/* components.css — the shared component vocabulary. builder-1 owns.
   Every visual atom the hubs consume is styled here. Hub CSS (hubs.css)
   may only add layout inside its own region; never restyle these. */

/* ===== Card ============================================================== */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.card--sunken { background: var(--surface-sunken); box-shadow: none; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }

/* ===== SectionHeader ===================================================== */
.section-header { margin: var(--s7) 0 var(--s4); scroll-margin-top: var(--s6); }
.section-header:first-child { margin-top: 0; }
.section-header__eyebrow { margin-bottom: var(--s2); }
.section-header__title { font-size: var(--fs-h1); }
.section-header__sub { color: var(--ink-muted); font-size: var(--fs-body); margin-top: var(--s2); max-width: 62ch; }

/* ===== RateChip ========================================================== */
/* value + CI whisker + n= + tier styling. The ONLY way a rate is shown. */
.ratechip {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ratechip__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-med); font-size: var(--fs-h3); letter-spacing: -0.01em; }
.ratechip__whisker { flex: none; }
.ratechip__meta { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-faint); }
.ratechip__n { color: var(--ink-faint); }
.ratechip__ci { color: var(--ink-faint); }

.ratechip--directive  .ratechip__val { color: var(--gold-ink); }
.ratechip--suggestive .ratechip__val { color: var(--ink); }
.ratechip--descriptive .ratechip__val { color: var(--ink-muted); font-weight: var(--fw-reg); }
.ratechip--empty .ratechip__val { color: var(--ink-faint); }

/* block variant — label above a big value */
.ratechip-block { display: flex; flex-direction: column; gap: var(--s2); }
.ratechip-block__label { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); font-family: var(--font-mono); }
.ratechip-block .ratechip__val { font-size: 1.75rem; }

/* tier tag (tiny, next to a rate when relevant) */
.tiertag {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--border); color: var(--ink-faint);
}
.tiertag--directive  { color: var(--gold-ink); border-color: var(--gold-line); background: var(--gold-soft); }
.tiertag--suggestive { color: var(--ink-muted); }
.tiertag--descriptive{ color: var(--ink-faint); }

/* ===== VerdictCard ======================================================= */
.verdict {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
a.verdict:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
a.verdict:hover .verdict__go { color: var(--ink); gap: var(--s2); }

.verdict--directive { border-color: var(--gold-line); }
.verdict--directive::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, var(--gold-soft), transparent 60%);
}
.verdict__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.verdict__tag { display: inline-flex; align-items: center; gap: var(--s2); }
.verdict__kicker {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-med);
}
.verdict--directive  .verdict__kicker { color: var(--gold-ink); }
.verdict--suggestive .verdict__kicker { color: var(--ink-muted); }
.verdict--descriptive .verdict__kicker { color: var(--ink-faint); }
.verdict__dot { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; }
.verdict--directive  .verdict__dot { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.verdict--suggestive .verdict__dot { background: var(--ink-muted); }
.verdict--descriptive .verdict__dot { background: var(--ink-faint); }

.verdict__body { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); }
.verdict__body em { font-style: normal; color: var(--gold-ink); }
.verdict__support { color: var(--ink-muted); font-size: var(--fs-sm); }
.verdict__chips { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: flex-end; }
.verdict__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s2); }
.verdict__go { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-med); transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.verdict__go svg { width: 15px; height: 15px; }

/* ===== CompChip ("composition, not impact") ============================= */
.compchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px dashed var(--border-strong); color: var(--ink-muted);
  background: var(--surface-sunken);
}
.compchip svg { width: 12px; height: 12px; opacity: 0.8; }

/* ===== ConfidenceTag ===================================================== */
.conftag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--ink-muted);
  cursor: help;
}
.conftag__pip { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.conftag[data-level="solid"]    .conftag__pip { background: var(--defense); }
.conftag[data-level="reported"] .conftag__pip { background: var(--gold); }
.conftag[data-level="inferred"] .conftag__pip { background: var(--ink-faint); }
.conftag:hover, .conftag:focus-visible { border-color: var(--border-strong); color: var(--ink); }

/* ===== ScopeSwitch ======================================================= */
.scopeswitch { display: inline-flex; align-items: center; gap: var(--s3); }
.scopeswitch__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.scopeswitch__group {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-1);
}
.scopeswitch__opt {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--s3);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.scopeswitch__opt:hover { color: var(--ink); }
.scopeswitch__opt[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-1); }
.scopeswitch__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--ink-faint); }
.scopeswitch__opt[aria-pressed="true"] .scopeswitch__n { color: var(--gold-ink); }
.scopeswitch__opt-short { display: none; }

/* Narrow viewports: the war room's most-used control must seat inside 390px.
   Drop the "Scope" label + inline n= counts and swap to short labels (Act/Main/
   Life) so all three chips fit beside the crumbs without clipping. */
@media (max-width: 430px) {
  .scopeswitch { gap: var(--s2); }
  .scopeswitch__label { display: none; }
  .scopeswitch__n { display: none; }
  .scopeswitch__opt-full { display: none; }
  .scopeswitch__opt-short { display: inline; }
  .scopeswitch__opt { padding: 0 var(--s2); gap: 0; }
}

/* scope-lock chip (a block locked to one scope) */
.lockchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--ink-muted); background: var(--surface-sunken);
}
.lockchip svg { width: 12px; height: 12px; }

/* ===== ReviewQueue ======================================================= */
.reviewq {
  border: 1px solid var(--border-faint); border-radius: var(--r-2);
  background: var(--surface-sunken); overflow: hidden;
}
.reviewq__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); min-height: 44px;
  color: var(--ink-muted); font-size: var(--fs-sm);
}
.reviewq__summary::-webkit-details-marker { display: none; }
.reviewq__summary:hover { color: var(--ink); }
.reviewq__chev { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); color: var(--ink-faint); }
.reviewq[open] .reviewq__chev { transform: rotate(90deg); }
.reviewq__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.reviewq__body { padding: 0 var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.reviewq__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--border-faint); font-size: var(--fs-sm); color: var(--ink-muted); }
.reviewq__item .mono { color: var(--ink-faint); }

/* ===== Glossary popover ================================================== */
.gloss-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-med);
  vertical-align: middle; margin-left: 4px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* Extend the touch/click target past the 16px visual pip to ~28px so it clears
   the target-size floor without disturbing inline text flow (vertical-safe, no
   sibling overlap — the pip only ever follows non-interactive label text).
   z-index on the button lifts its stacking context above the following block
   content so the transparent ::after halo is the topmost box at its edges and
   hit-tests back to the button (a bare pseudo z-index alone lost to a sibling
   DIV that painted later). */
.gloss-btn::after { content: ""; position: absolute; inset: -6px; z-index: 1; border-radius: var(--r-pill); }
.gloss-btn:hover, .gloss-btn[aria-expanded="true"] { color: var(--gold-ink); border-color: var(--gold-line); }

.gloss-pop {
  position: absolute; z-index: 50;
  max-width: 300px; width: max-content;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-1); box-shadow: var(--shadow-3);
  padding: var(--s4);
}
.gloss-pop__term { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-sm); margin-bottom: 4px; }
.gloss-pop__def  { font-size: var(--fs-sm); color: var(--ink-muted); line-height: var(--lh-snug); }

/* ===== Buttons / links =================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4);
  border-radius: var(--r-1); border: 1px solid var(--border-strong);
  color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-med);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-3); }
.btn--ghost { border-color: transparent; color: var(--ink-muted); }
.btn--ghost:hover { color: var(--ink); background: var(--surface-2); }

/* ===== Empty / loading states =========================================== */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center;
  padding: var(--s8) var(--s5); min-height: 240px;
  color: var(--ink-faint);
}
.state__icon { width: 34px; height: 34px; opacity: 0.5; }
.state__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink-muted); font-weight: var(--fw-med); }
.state__msg { font-size: var(--fs-sm); max-width: 40ch; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--r-1); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 6%, transparent), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ===== Chart primitives (shared by hand-rolled SVG charts) =============== */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart__axis-label { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-faint); }
.chart__grid { stroke: var(--grid); stroke-width: 1; }
.chart__tick { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s4); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-muted); }
.chart-legend__swatch { width: 12px; height: 3px; border-radius: 2px; flex: none; }

/* crosshair tooltip */
.chart-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-1); box-shadow: var(--shadow-2);
  padding: var(--s3); font-size: var(--fs-xs); min-width: 150px;
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.chart-tip[data-show="1"] { opacity: 1; }
.chart-tip__head { font-family: var(--font-mono); color: var(--ink-faint); letter-spacing: 0.04em; margin-bottom: 6px; }
.chart-tip__row { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; padding: 2px 0; }
.chart-tip__row .k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.chart-tip__row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.chart-tip__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }