/* Buttons */
.btn {
  --btn-bg: var(--shk-surface); --btn-ink: var(--shk-green-800); --btn-line: var(--shk-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--shk-tap); padding: 0 18px; border-radius: var(--shk-r-md);
  background: var(--btn-bg); color: var(--btn-ink); border: 1.5px solid var(--btn-line);
  font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { color: var(--btn-ink); }
.btn:active { transform: scale(.985); }
.btn--primary { --btn-bg: var(--shk-green-800); --btn-ink: #fff; --btn-line: var(--shk-green-800); }
.btn--primary:hover { --btn-bg: var(--shk-green-900); --btn-line: var(--shk-green-900); }
.btn--secondary { --btn-bg: #fff; --btn-ink: var(--shk-green-800); --btn-line: var(--shk-green-800); }
.btn--secondary:hover { --btn-bg: var(--shk-green-50); }
.btn--gold { --btn-bg: var(--shk-gold-500); --btn-ink: var(--shk-green-950); --btn-line: var(--shk-gold-500); }
.btn--gold:hover { --btn-bg: #C6B25C; --btn-line: #C6B25C; }
.btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--shk-green-800); padding-inline: 12px; }
.btn--ghost:hover { --btn-bg: var(--shk-green-50); }
.btn--light { --btn-bg: transparent; --btn-ink: #fff; --btn-line: rgba(255, 255, 255, .45); }
.btn--light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-line: #fff; }
.btn--sm { min-height: 38px; font-size: 13.5px; padding: 0 12px; }
.btn--lg { min-height: 54px; font-size: 16px; padding-inline: 24px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* Badges and status tags */
.badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 1px 10px;
  border-radius: var(--shk-r-pill); font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap;
  background: var(--shk-surface-sunken); color: var(--shk-ink-700);
}
.badge svg { width: 13px; height: 13px; }
.badge--green { background: var(--shk-green-100); color: var(--shk-green-800); }
.badge--gold { background: var(--shk-gold-100); color: var(--shk-gold-700); }
.badge--dark { background: var(--shk-green-900); color: #fff; }
.badge--outline { background: transparent; border: 1px solid var(--shk-line-strong); }
.badge--verified { background: var(--shk-success-bg); color: var(--shk-success); }
.badge--estimate { background: var(--shk-gold-100); color: var(--shk-gold-700); }
.badge--proposed { background: var(--shk-info-bg); color: var(--shk-info); }
.badge--partial { background: var(--shk-warning-bg); color: var(--shk-warning); }
.badge--demo { background: var(--shk-gold-100); color: var(--shk-gold-700); }
.badge--count { background: var(--shk-green-50); color: var(--shk-green-800); border: 1px solid var(--shk-green-200); }
.sec--dark .badge--estimate, .sec--dark .badge--verified { background: rgba(255, 255, 255, .12); color: #fff; }

.sev { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: var(--shk-r-pill); white-space: nowrap; }
.sev--high, .sev--p0 { background: var(--shk-error-bg); color: var(--shk-error); }
.sev--med, .sev--p1 { background: var(--shk-warning-bg); color: var(--shk-warning); }
.sev--low { background: var(--shk-info-bg); color: var(--shk-info); }

/* Facts chips (hero) */
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { border: 1px solid rgba(209, 191, 112, .45); border-radius: var(--shk-r-pill); padding: 4px 14px; font-size: 13.5px; color: #EDE6C8; display: inline-flex; gap: 6px; align-items: baseline; }
.facts strong { color: var(--shk-gold-500); font-size: 16px; }

/* Segmented controls: radio or checkbox inputs inside labels */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--shk-surface-sunken); border-radius: 12px; padding: 4px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 9px;
  font-weight: 700; font-size: 14px; color: var(--shk-ink-700); white-space: nowrap; transition: background-color .15s, color .15s;
}
.seg span svg { width: 16px; height: 16px; }
.seg label:hover span { color: var(--shk-green-900); }
.seg input:checked + span { background: #fff; color: var(--shk-green-800); box-shadow: var(--shk-shadow-1); }
.seg input:focus-visible + span { outline: var(--shk-focus-ring); outline-offset: 2px; }
.seg--chips { background: transparent; padding: 0; gap: 8px; }
.seg--chips span { border: 1.5px solid var(--shk-line-strong); background: #fff; border-radius: var(--shk-r-pill); min-height: 40px; }
.seg--chips input:checked + span { background: var(--shk-green-800); color: #fff; border-color: var(--shk-green-800); box-shadow: none; }

.field { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.field > span { white-space: nowrap; }
.field--stack { display: grid; gap: 6px; align-items: start; }
.select {
  appearance: none; -webkit-appearance: none; min-height: var(--shk-tap); min-width: 240px; max-width: 100%;
  padding-block: 6px; padding-inline: 14px 40px; border: 1.5px solid var(--shk-line-strong); border-radius: var(--shk-r-md);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2344514C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center;
  font-size: 14px; font-weight: 600; color: var(--shk-ink-900);
}
.select:focus-visible { outline: var(--shk-focus-ring); outline-offset: 1px; }

/* Cards */
.card { background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: var(--shk-r-xl); padding: 20px; box-shadow: var(--shk-shadow-1); }
.card--pad-lg { padding: 24px; }
.card--accent { border-block-start: 3px solid var(--shk-gold-500); }
.card__title { font-size: 17px; font-weight: 800; margin-block-end: 8px; }
.card p, .card li { font-size: 14px; color: var(--shk-ink-700); }
.card ul, .card ol { padding-inline-start: 18px; display: grid; gap: 6px; }
.card ul li::marker { color: var(--shk-green-500); }
.card__example { background: var(--shk-surface-sunken); border-radius: var(--shk-r-md); padding: 8px 10px; margin-block-start: 8px; font-size: 13.5px; }

/* Pros / cons */
.pros-cons { display: grid; gap: 14px; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons h4 { font-size: 14px; font-weight: 800; margin-block-end: 6px; display: flex; align-items: center; gap: 6px; }
.pros-cons ul { list-style: none; display: grid; gap: 5px; font-size: 14px; color: var(--shk-ink-700); }
.pros-cons li { padding-inline-start: 20px; position: relative; line-height: 1.6; }
.pros-cons li::before { position: absolute; inset-inline-start: 0; inset-block-start: 0; font-weight: 900; }
.pros-cons__plus li::before { content: '+'; color: var(--shk-success); }
.pros-cons__minus li::before { content: '−'; color: var(--shk-error); }
.pros-cons__plus h4 { color: var(--shk-success); }
.pros-cons__minus h4 { color: var(--shk-error); }

/* Notes */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--shk-r-md); font-size: 14px; line-height: 1.7; background: var(--shk-surface-sunken); color: var(--shk-ink-700); }
.note svg { width: 18px; height: 18px; flex: none; margin-block-start: 3px; }
.note--warn { background: var(--shk-warning-bg); color: var(--shk-ink-900); border-inline-start: 4px solid var(--shk-gold-600); }
.note--info { background: var(--shk-info-bg); color: var(--shk-info); }
.note--quiet { background: transparent; padding: 0; color: var(--shk-ink-500); }
.note strong { color: inherit; }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: var(--shk-r-lg); }
.table-wrap:focus-visible { outline: var(--shk-focus-ring); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--shk-line); }
.tbl thead th { background: var(--shk-surface-sunken); font-weight: 800; white-space: nowrap; font-size: 13px; position: sticky; top: 0; z-index: 1; }
.tbl tbody th { font-weight: 700; color: var(--shk-ink-900); }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-block-end: 0; }
.tbl small { display: block; color: var(--shk-ink-500); font-size: 12.5px; font-weight: 500; }
.tbl--min { min-width: 720px; }
.tbl td.is-cur { background: #FCF7F6; }

/* Chip links to concepts (01 02 03) */
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chips a, .chips button {
  display: inline-grid; place-items: center; min-width: 38px; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 0;
  background: var(--shk-green-50); color: var(--shk-green-800); font-weight: 800; text-decoration: none; font-size: 13px; transition: background-color .15s;
}
.chips a:hover, .chips button:hover { background: var(--shk-green-100); color: var(--shk-green-900); }

/* Score: 1–5 bar + number */
.score { display: inline-flex; align-items: center; gap: 8px; --v: 0; --max: 5; }
.score__bar { width: 64px; height: 8px; border-radius: 4px; background: var(--shk-line); position: relative; overflow: hidden; flex: none; }
.score__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) / var(--max) * 100%); background: var(--shk-green-500); border-radius: 4px; }
.score strong { font-variant-numeric: tabular-nums; min-width: 1.2em; }
.score--best .score__bar::after { background: var(--shk-green-800); }
.score--best strong { color: var(--shk-green-800); }
.effort { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.effort__dots { display: inline-flex; gap: 3px; }
.effort__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--shk-line-strong); }
.effort__dots i.on { background: var(--shk-green-500); }

/* Findings / issues */
.issues { list-style: none; display: grid; gap: 10px; }
.issues li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--shk-line); border-radius: 14px; font-size: 14.5px; color: var(--shk-ink-700); background: var(--shk-surface); }
.issues strong { color: var(--shk-ink-900); }
.issues small { display: block; color: var(--shk-ink-500); font-size: 12.5px; }

/* Figures */
.figures { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.figures--wide { grid-template-columns: minmax(0, 1fr); }
.figures figure { display: grid; gap: 8px; margin: 0; }
.figures img { width: 100%; height: auto; border: 1px solid var(--shk-line); border-radius: 14px; box-shadow: var(--shk-shadow-2); background: #fff; }
.figures figcaption { font-size: 13px; font-weight: 700; color: var(--shk-ink-700); text-align: center; }
.figures a { text-decoration: none; color: inherit; display: grid; gap: 8px; }

/* Definition list treatments */
.treat { display: grid; gap: 10px; }
.treat dt { font-weight: 800; color: var(--shk-green-800); }
.treat dd { font-size: 14px; color: var(--shk-ink-700); }

/* Documents */
.doc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.doc-card { display: grid; gap: 2px; min-height: 64px; padding: 12px 14px; background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: var(--shk-r-md); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.doc-card:hover { border-color: var(--shk-green-800); box-shadow: var(--shk-shadow-2); color: inherit; }
.doc-card b { color: var(--shk-green-800); font-size: 14.5px; }
.doc-card span { font-size: 12.5px; color: var(--shk-ink-500); }

.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }