/* BestProps components. Owned by L0. Page lanes add page-only components in their own css.
   Sections: icons, buttons, chips/tags, disclosure, score arc, monogram, cards, firm card, stat,
   bento, table, tabs, segmented, accordion, evidence, drawer, tooltip, toast, compare tray,
   breadcrumb, quick answer, checked-on, callout, notes, pagination, forms, skeleton,
   section head, header, mega menu, mobile menu, palette, footer. */

/* ---------- Icons ---------- */
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--btn-h); padding: 0 calc(var(--btn-h) * 0.4);
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: -0.005em;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; }
.btn--sm { --btn-h: 32px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn--lg { --btn-h: 48px; font-size: var(--fs-base); border-radius: var(--r-md); }
.btn--xl { --btn-h: 56px; font-size: var(--fs-md); border-radius: var(--r-md); padding: 0 28px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--btn-h); padding: 0; }

.btn--primary {
  background: var(--brand) linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  color: var(--brand-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--brand) 70%, black);
}
.btn--primary:hover { background-color: var(--brand-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 6px 22px -6px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 70%, black); }
.btn--primary:active { background-color: var(--brand-press); }

.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--edge), var(--shadow-1); }
.btn--secondary:hover { background: var(--raised); border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text) 18%); }

.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--raised); color: var(--text); }

.btn--link { height: auto; padding: 0; color: var(--brand-soft); border: 0; }
.btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn--deal { background: var(--deal); color: var(--deal-ink); font-weight: 600; }
.btn--deal:hover { filter: brightness(0.95); }

.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cta-group .risk-note { flex-basis: 100%; }

/* ---------- Chips and tags ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
button.chip:hover, a.chip:hover, label.chip:hover { border-color: var(--line-strong); color: var(--text); background: var(--raised); }
.chip[aria-pressed="true"], .chip.is-active, input:checked + .chip {
  background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--text);
}
.chip .icon { width: 14px; height: 14px; }
.chip__count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.chip--sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip-input { position: absolute; opacity: 0; pointer-events: none; }
.chip-input:focus-visible + .chip { outline: 2px solid var(--focus); outline-offset: 2px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  background: var(--raised); color: var(--text-2); border: 1px solid var(--line);
  font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; line-height: 1;
}
.tag--brand { background: var(--brand-tint); color: var(--brand-soft); border-color: transparent; }
.tag--profit { background: var(--profit-tint); color: var(--profit-ink); border-color: transparent; }
.tag--caution { background: var(--caution-tint); color: var(--caution-ink); border-color: transparent; }
.tag--breach { background: var(--breach-tint); color: var(--breach); border-color: transparent; }
.tag--info { background: var(--info-tint); color: var(--info-ink); border-color: transparent; }
.tag--deal { background: var(--deal); color: var(--deal-ink); border-color: transparent; font-weight: 600; }
.tag--outline { background: transparent; }
.tag--mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.tag .dot, .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Retired marker (v2.0 neutral policy). No firm carries it; this hides leftover markup in the frozen demos. */
.affiliated { display: none !important; }

/* ---------- Disclosure Chip (details/summary popover) ---------- */
.disclosure { position: relative; display: inline-block; font-size: var(--fs-xs); }
.disclosure > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover, .disclosure[open] > summary { color: var(--text); border-color: var(--line-strong); }
.disclosure > summary .icon { width: 14px; height: 14px; color: var(--caution); }
.disclosure__panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: min(360px, calc(100vw - 32px)); padding: var(--s-4);
  background: var(--overlay); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-3), var(--edge); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55;
  animation: pop-in var(--t-base) var(--ease-out);
}
.disclosure--right .disclosure__panel { left: auto; right: 0; }
@media (max-width: 599px) { .disclosure { display: block; } .disclosure > summary { max-width: 100%; } .disclosure__panel { position: static; width: auto; margin-top: 8px; } }
.disclosure__panel p + p { margin-top: var(--s-2); }
.disclosure__panel a { color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; }
.pending-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--caution-tint); color: var(--caution-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Score Arc ---------- */
.score-arc { --size: 56px; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none; }
.score-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.score-arc__track { stroke: var(--line); }
.score-arc__fill { stroke: var(--brand-soft); transition: stroke-dashoffset 900ms var(--ease-out); }
.score-arc--top .score-arc__fill { stroke: var(--profit); }
.score-arc.is-armed:not(.is-in) .score-arc__fill { stroke-dashoffset: 100; }
.score-arc__num {
  position: relative; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: calc(var(--size) * 0.3); letter-spacing: -0.07em; color: var(--text); line-height: 1; margin-top: calc(var(--size) * 0.02);
}
.score-arc__max { display: none; }
.score-arc--sm { --size: 40px; }
.score-arc--sm .score-arc__num { font-size: 13px; }
.score-arc--lg { --size: 96px; }
.score-arc--lg .score-arc__max { display: block; position: absolute; bottom: 6%; font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: 0.04em; }
.score-arc--xl { --size: 140px; }
.score-arc--xl .score-arc__max { display: block; position: absolute; bottom: 8%; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.score-arc--nv .score-arc__track { stroke-dasharray: 2 4; }
.score-arc--nv .score-arc__num { font-size: calc(var(--size) * 0.18); color: var(--faint); }

/* ---------- Monogram tile (firm logo stand-in) ---------- */
.mono-tile {
  --h: 245; --size: 40px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); border-radius: calc(var(--size) * 0.26);
  /* Deep, low-chroma tile: hue identity stays, the candy saturation does not. */
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(155deg, hsl(var(--h) 32% calc(var(--mono-tile-l1) - 9%)), hsl(calc(var(--h) + 14) 36% calc(var(--mono-tile-l2) - 8%)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -6px 12px rgba(0, 0, 0, 0.14), var(--shadow-1);
  color: #fff; font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.04em;
  font-size: calc(var(--size) * 0.38); line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); user-select: none;
}
.mono-tile[data-len="3"] { font-size: calc(var(--size) * 0.3); letter-spacing: -0.05em; }
.mono-tile[data-len="4"] { font-size: calc(var(--size) * 0.25); letter-spacing: -0.05em; }
.mono-tile--xs { --size: 24px; font-size: 10px; }
.mono-tile--sm { --size: 32px; }
.mono-tile--lg { --size: 56px; }
.mono-tile--xl { --size: 88px; border-radius: 22px; }

/* ---------- Card ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--edge), var(--shadow-1); padding: var(--card-pad, var(--s-6));
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { box-shadow: var(--edge), var(--shadow-2); }
.card--interactive { transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.card--interactive:hover { border-color: var(--line-strong); box-shadow: var(--edge), var(--shadow-2); transform: translateY(-2px); }
.card--glow { background: radial-gradient(120% 80% at 50% -20%, var(--brand-tint-2), transparent 60%), var(--surface); }
.card__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.card__body { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Firm card ---------- */
.firm-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-5); box-shadow: var(--edge), var(--shadow-1);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.firm-card:hover { border-color: var(--line-strong); box-shadow: var(--edge), var(--shadow-2); }
.firm-card__head { display: flex; align-items: center; gap: var(--s-3); }
.firm-card__id { min-width: 0; flex: 1; }
.firm-card__name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.25; }
.firm-card__name a:hover { color: var(--brand-soft); }
.firm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.firm-card__rank { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-2); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.firm-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.firm-card__stats > div { background: var(--surface); padding: 10px 12px; min-width: 0; }
.firm-card__stats dt { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-card__stats dd { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-card__stats dd .nv { font-size: var(--fs-xs); white-space: normal; line-height: 1.3; display: inline-block; }
.firm-card__highlight { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.firm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-1); }

/* ---------- Not verified ---------- */
.nv { color: var(--faint); font-family: var(--font-sans); font-size: 0.92em; font-style: normal; white-space: nowrap; }
.nv::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; border: 1px dashed currentColor; vertical-align: 1px; }

/* ---------- Stat tile ---------- */
.stat { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--edge); min-width: 0; }
.stat__label { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 18px; }
.stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; color: var(--text); }
.stat__value small { font-size: 0.5em; color: var(--muted); letter-spacing: -0.01em; margin-left: 2px; }
.stat__meta { font-size: var(--fs-xs); color: var(--faint); }
.stat__delta { font-family: var(--font-mono); font-size: var(--fs-xs); }
.stat__delta--up { color: var(--profit); }
.stat__delta--down { color: var(--breach); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s-3); }
.stat--plain { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---------- Bento grid ---------- */
.bento { display: grid; gap: var(--s-4); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
.bento__cell {
  position: relative; grid-column: span 2; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--edge), var(--shadow-1); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--t-base) var(--ease-out);
}
.bento__cell:hover { border-color: var(--line-strong); }
.bento__cell--wide { grid-column: span 4; }
.bento__cell--half { grid-column: span 3; }
.bento__cell--full { grid-column: 1 / -1; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--feature { background: radial-gradient(90% 70% at 100% 0%, var(--brand-tint-2), transparent 65%), var(--surface); }
.bento__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.016em; color: var(--text); }
.bento__text { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }
.bento__visual { margin-top: auto; }
@media (max-width: 959px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__cell, .bento__cell--half { grid-column: span 1; } .bento__cell--wide, .bento__cell--full { grid-column: 1 / -1; } }
@media (max-width: 599px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento__cell, .bento__cell--wide, .bento__cell--half { grid-column: 1 / -1; } .bento__cell--tall { grid-row: auto; } }

/* ---------- Data table ---------- */
.table-wrap {
  position: relative; overflow: auto; max-height: var(--table-max-h, min(78vh, 760px));
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--edge); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.table-wrap--auto { max-height: none; }
.data-table { width: 100%; min-width: max-content; font-size: var(--fs-sm); border-collapse: separate; border-spacing: 0; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-block: 10px;
}
.data-table tbody tr:nth-child(even) > * { background-image: linear-gradient(var(--zebra), var(--zebra)); }
.data-table tbody tr { transition: background-color var(--t-fast); }
.data-table tbody tr:hover > * { background-color: color-mix(in srgb, var(--raised) 70%, var(--surface)); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
/* Pinned first column */
.data-table th:first-child, .data-table td:first-child {
  position: sticky; left: 0; z-index: 1; background-color: var(--surface);
  box-shadow: inset -1px 0 0 var(--line);
}
.data-table thead th:first-child { z-index: 3; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
.table-wrap.is-scrolled-x .data-table th:first-child, .table-wrap.is-scrolled-x .data-table td:first-child { box-shadow: inset -1px 0 0 var(--line), 8px 0 16px -8px rgba(0, 0, 0, 0.35); }
.data-table .num, .data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table th.num .sort { flex-direction: row-reverse; }
.data-table td.num { color: var(--text); }
.data-table .firm-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.data-table .firm-cell a { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.data-table .firm-cell a:hover { color: var(--brand-soft); }
.data-table .best { color: var(--profit); }
.data-table--compact th, .data-table--compact td { padding: 8px 12px; }
/* Sortable header affordance */
.sort {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  padding: 2px 4px; margin: -2px -4px; border-radius: 4px; transition: color var(--t-fast), background-color var(--t-fast);
}
.sort:hover { color: var(--text); background: var(--raised); }
.sort::after {
  content: ""; width: 7px; height: 10px; opacity: 0.45;
  background: linear-gradient(currentColor, currentColor) center 0 / 100% 0 no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0zM3.5 10 0 6h7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0zM3.5 10 0 6h7z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--brand-soft); }
th[aria-sort="ascending"] .sort::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0z'/%3E%3C/svg%3E"); }
th[aria-sort="descending"] .sort::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 10 0 6h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 10 0 6h7z'/%3E%3C/svg%3E"); }
.table-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative; padding: 10px 12px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); white-space: nowrap;
  border-radius: var(--r-xs) var(--r-xs) 0 0; transition: color var(--t-fast);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__tab .chip__count { margin-left: 6px; }
.tabs-panel { padding-top: var(--s-6); }
.tabs-panel:focus-visible { outline-offset: 4px; }

/* ---------- Segmented control ---------- */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label, .segmented button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 7px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.segmented label:hover, .segmented button:hover { color: var(--text); }
.segmented input:checked + label, .segmented button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-strong); }
.segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented--sm label, .segmented--sm button { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }

/* ---------- Accordion / FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--text); letter-spacing: -0.01em;
  border-radius: var(--r-xs); transition: color var(--t-fast);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--brand-soft); }
.faq__item > summary::after {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: linear-gradient(currentColor, currentColor) center / 9px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 9px no-repeat;
  color: var(--muted); transition: transform var(--t-base) var(--ease-out), background-size var(--t-base) var(--ease-out);
}
.faq__item[open] > summary::after { transform: rotate(180deg); background-size: 9px 1.5px, 1.5px 0; }
.faq__answer { padding: 0 0 var(--s-5); color: var(--text-2); font-size: var(--fs-base); line-height: 1.65; max-width: 72ch; }
.faq__answer > * + * { margin-top: 0.8em; }
.faq__item[open] .faq__answer { animation: fade-down var(--t-slow) var(--ease-out); }
.accordion--card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding-inline: var(--s-5); }
.accordion--card .faq__item:last-child { border-bottom: 0; }
.accordion--card.faq { border-top: 1px solid var(--line); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Evidence trigger (any fact with a source) ---------- */
.evidence {
  display: inline-flex; align-items: baseline; gap: 4px; color: inherit; font: inherit; text-align: left;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); padding: 0; line-height: inherit;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.evidence:hover { color: var(--brand-soft); border-bottom-color: currentColor; }
.evidence::after {
  content: ""; width: 10px; height: 10px; flex: none; align-self: center; opacity: 0.5; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.evidence:hover::after { opacity: 1; }

/* ---------- Drawer (Evidence Drawer, filters sheet) ---------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); backdrop-filter: blur(2px); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: relative; display: flex; flex-direction: column; width: min(460px, 100%); height: 100%;
  background: var(--overlay); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
.drawer__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.012em; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); overscroll-behavior: contain; }
.drawer__foot a { white-space: nowrap; }
.drawer__foot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line); display: flex; gap: var(--s-3); justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.drawer__grab { display: none; }
@media (max-width: 767px) {
  .drawer { align-items: flex-end; }
  .drawer__panel {
    width: 100%; height: auto; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--line-strong);
    border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom);
  }
  .drawer__grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 10px auto 0; }
  .drawer__head { padding: var(--s-4) var(--s-5); }
  .drawer__body { padding: var(--s-5); }
}
.ev-value { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: -0.035em; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--font-mono); }
.ev-excerpt { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.ev-excerpt::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--brand); }
.ev-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--fs-sm); }
.ev-meta dt { color: var(--muted); }
.ev-meta dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ev-meta a { color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tooltip ---------- */
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip__trigger { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--faint); transition: color var(--t-fast); }
.tip__trigger:hover, .tip__trigger:focus-visible { color: var(--text); }
.tip__trigger .icon { width: 14px; height: 14px; }
.tip__bubble {
  position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--text); color: var(--bg); font-size: var(--fs-xs); line-height: 1.45; font-weight: 500; text-align: left; white-space: normal;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text); }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity: 1; transform: translate(-50%, 0); }
.tip--right .tip__bubble { left: auto; right: -8px; transform: translateY(4px); }
.tip--right .tip__bubble::after { left: auto; right: 12px; }
.tip--right:hover .tip__bubble, .tip--right:focus-within .tip__bubble { transform: none; }

/* ---------- Toast ---------- */
.toast-region { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(var(--tray-offset, 0px) + 20px); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); transition: bottom var(--t-slow) var(--ease-out); }
.toast {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px 14px 10px 12px; border-radius: var(--r-md);
  background: var(--overlay); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3), var(--edge);
  font-size: var(--fs-sm); color: var(--text); pointer-events: auto; animation: toast-in var(--t-slow) var(--ease-out);
}
.toast .icon { width: 16px; height: 16px; color: var(--profit); }
.toast--caution .icon { color: var(--caution); }
.toast.is-leaving { animation: toast-out var(--t-base) var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Compare Tray ---------- */
.compare-tray {
  position: fixed; z-index: var(--z-tray); left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(880px, calc(100vw - 24px)); transform: translate(-50%, calc(100% + 32px));
  display: flex; align-items: center; gap: var(--s-4); padding: 10px 10px 10px 18px;
  background: color-mix(in srgb, var(--overlay) 88%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3), var(--edge);
  transition: transform var(--t-slow) var(--ease-out); visibility: hidden;
}
.compare-tray.is-visible { transform: translate(-50%, 0); visibility: visible; }
.compare-tray__label { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.compare-tray__label span { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); }
.compare-tray__slots { display: flex; gap: var(--s-2); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.compare-tray__slot {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 6px; flex: none;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; max-width: 200px;
}
.compare-tray__slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-tray__slot--empty { width: 120px; justify-content: center; border-style: dashed; color: var(--faint); font-size: var(--fs-xs); font-weight: 400; background: transparent; }
.compare-tray__remove { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); flex: none; }
.compare-tray__remove:hover { background: var(--raised); color: var(--text); }
.compare-tray__actions { display: flex; gap: var(--s-2); flex: none; }
@media (max-width: 767px) {
  .compare-tray { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: 10px; bottom: 8px; width: calc(100vw - 16px); }
  .compare-tray__label { flex: 1; }
  .compare-tray__slots { order: 3; flex-basis: 100%; }
  .compare-tray__slot--empty { display: none; }
  .compare-tray__slot { height: 36px; }
}
[data-compare-add][aria-pressed="true"] { color: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-tint); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: var(--fs-xs); color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--faint); opacity: 0.7; }
.breadcrumb a { color: var(--muted); border-radius: 4px; transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text-2); }

/* ---------- Quick Answer (AEO) ---------- */
.quick-answer {
  position: relative; padding: var(--s-5) var(--s-6); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--brand-tint), transparent 140%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); box-shadow: var(--edge);
}
.quick-answer__label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.quick-answer__label .eyebrow { color: var(--brand-soft); }
.quick-answer__text { font-size: var(--fs-md); line-height: 1.6; color: var(--text); max-width: 72ch; }
.quick-answer__text strong { font-weight: 600; }
.quick-answer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Checked on freshness stamp ---------- */
.checked-on { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.checked-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--profit); box-shadow: 0 0 0 3px var(--profit-tint); }
.checked-on--stale::before { background: var(--caution); box-shadow: 0 0 0 3px var(--caution-tint); }
.checked-on time { color: var(--text-2); }

/* ---------- Callouts ---------- */
.callout {
  --c: var(--info); --c-tint: var(--info-tint);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-tint);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
}
.callout > .icon { color: var(--c); margin-top: 1px; }
.callout__title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.callout--info { --c: var(--info); --c-tint: var(--info-tint); }
.callout--caution { --c: var(--caution); --c-tint: var(--caution-tint); }
.callout--risk { --c: var(--breach); --c-tint: var(--breach-tint); }
.callout--brand { --c: var(--brand-soft); --c-tint: var(--brand-tint); }

/* ---------- Compliance notes ---------- */
.risk-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; max-width: 60ch; }
.risk-note .icon { width: 13px; height: 13px; margin-top: 2px; color: var(--caution); }
.sample-note {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.01em; line-height: 1.5;
}
.sample-note::before { content: "SAMPLE"; padding: 2px 6px; border-radius: 4px; background: var(--caution-tint); color: var(--caution); font-weight: 500; letter-spacing: 0.06em; font-size: 10px; }
.illustrative { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--info-tint); color: var(--info-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-sm); }
.pagination a, .pagination span, .pagination button {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  font-family: var(--font-mono); color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast);
}
.pagination a:hover, .pagination button:hover { background: var(--raised); color: var(--text); }
.pagination [aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pagination .pagination__step { font-family: var(--font-sans); display: inline-flex; gap: 6px; }
.pagination__gap { pointer-events: none; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.label .num { color: var(--brand-soft); font-weight: 500; }
.hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--text); font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 70%, var(--text) 15%); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint-2); background: var(--surface); }
.input--sm, .select--sm { height: 34px; font-size: var(--fs-sm); padding: 0 10px; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .icon { position: absolute; left: 12px; color: var(--faint); pointer-events: none; }
.input-group > .input { padding-left: 38px; }
.input-group__suffix { position: absolute; right: 12px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); pointer-events: none; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239095AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.select option { background: var(--surface); color: var(--text); }

/* Range slider: set --val (0 to 100) inline or let shell.js keep it in sync */
.range { --val: 50; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand) calc(var(--val) * 1%), var(--line-strong) calc(var(--val) * 1%)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-strong); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--brand); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 5px var(--brand-tint-2); transition: box-shadow var(--t-fast); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 5px var(--brand-tint-2); }
.range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 7px var(--brand-tint-2); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.range-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--faint); }

/* Checkbox and radio */
.check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; line-height: 1.4; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--bg-elev); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::after { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--t-fast) var(--ease-out); background: var(--brand-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.check input[type="radio"]::after { -webkit-mask: none; mask: none; border-radius: 50%; width: 8px; height: 8px; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check:hover input:not(:checked) { border-color: var(--muted); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--line-strong); cursor: pointer; transition: background-color var(--t-base) var(--ease-out); flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease-out); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Radio cards: <label class="radio-card"><input type="radio">...</label> */
.radio-cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.radio-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) var(--s-5); padding-right: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer; box-shadow: var(--edge);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-base);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card::after { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); transition: border var(--t-fast), background-color var(--t-fast); }
.radio-card:has(input:checked) { border-color: var(--brand); background: linear-gradient(var(--brand-tint), var(--brand-tint)), var(--surface); box-shadow: 0 0 0 3px var(--brand-tint), var(--edge); }
.radio-card:has(input:checked)::after { border: 5px solid var(--brand); background: #fff; }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.radio-card__title { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.radio-card__desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.radio-card__icon { width: 28px; height: 28px; color: var(--brand-soft); margin-bottom: 6px; }

/* ---------- Skeleton ---------- */
.skeleton { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton--text { height: 12px; margin-block: 6px; }
.skeleton--title { height: 22px; width: 60%; }
.skeleton--circle { border-radius: 50%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Section header ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); }
.section-head__text { display: flex; flex-direction: column; gap: var(--s-3); max-width: 680px; }
.section-head__title { font-size: var(--fs-2xl); line-height: 1.12; letter-spacing: var(--track-tight); font-weight: 600; color: var(--text); }
.section-head__lede { font-size: var(--fs-md); color: var(--muted); line-height: 1.55; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .section-head__text { align-items: center; }
.page-head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--s-4); }
.page-head__title { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--track-display); font-weight: 600; max-width: 22ch; }
.page-head__lede { font-size: var(--fs-lg); color: var(--text-2); max-width: 62ch; line-height: 1.55; }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }

/* ---------- Kbd ---------- */
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line); line-height: 1; }

/* =========================================================================
   Shell: header, mega menu, mobile menu, palette, footer
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
  background: color-mix(in srgb, var(--ground) 74%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--draft-2);
}
.site-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: var(--s-5); max-width: calc(var(--container-sheet) + var(--gutter) * 2); }
/* drafting registration crosses where the header rule meets the sheet margins */
.site-header__reg { position: absolute; bottom: -5px; width: 9px; height: 9px; pointer-events: none; }
.site-header__reg::before, .site-header__reg::after { content: ""; position: absolute; background: var(--draft); }
.site-header__reg::before { left: 4px; top: 0; width: 1px; height: 9px; }
.site-header__reg::after { left: 0; top: 4px; width: 9px; height: 1px; }
.site-header__reg--l { left: max(6px, calc((100vw - var(--container-sheet)) / 2 - 4px)); }
.site-header__reg--r { right: max(6px, calc((100vw - var(--container-sheet)) / 2 - 4px)); }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; border-radius: var(--r-xs); color: var(--ink); }
.brand__mark { width: 28px; height: 24px; }
.brand__word { font-size: 18px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.brand__word span { color: var(--ink-3); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: var(--s-6); align-self: stretch; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 4px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--ink); background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.nav__link .icon { width: 12px; height: 12px; opacity: 0.6; transition: transform var(--t-base) var(--ease-out); }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }
.nav__item[data-current] > .nav__link { color: var(--ink); }
/* current section: indigo rule sitting on the header line, as in the directory frame */
.nav__item[data-current] > .nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: calc((var(--header-h) - 34px) / -2 - 1px); height: 2px; background: var(--indigo); box-shadow: 0 0 10px var(--indigo); }
.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.search-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ground) 40%, transparent); border: 1px solid var(--glass-edge); box-shadow: inset 1px 1px 0 var(--glass-hi);
  color: var(--ink-3); font-size: var(--fs-sm); min-width: 264px; transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.search-btn:hover { color: var(--ink); box-shadow: inset 1px 1px 0 var(--glass-hi), var(--glass-glow); border-color: transparent; }
.search-btn .icon { width: 15px; height: 15px; }
.search-btn__kbd { margin-left: auto; display: inline-flex; gap: 3px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: color-mix(in srgb, var(--indigo) 10%, transparent); color: var(--ink); }
.icon-btn .icon { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }
.menu-btn { display: none; }
.site-header .btn--primary { height: 34px; }

/* Mega panel (glass). Narrow panels: glass-icon links plus an aside. Wide panel (.mega--wide): one column per group. */
.mega {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 5;
  width: max-content; min-width: 520px; max-width: min(780px, calc(100vw - 48px));
  padding: var(--s-4);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.mega.bp-glass { position: absolute; background: var(--glass), var(--glass-solid); } /* beats .bp-glass position: relative */
.mega::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* the wide panel anchors to the header row (its nav item is static), centred under the nav, never off-screen */
.nav__item:has(> .mega--wide) { position: static; }
.mega--wide { top: calc(100% + 1px); left: max(var(--gutter), calc(50% - 450px)); right: auto; max-width: min(900px, calc(100vw - 48px)); }
.mega__grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: var(--s-4); }
.mega__grid--single { grid-template-columns: minmax(0, 1fr); }
.mega__links { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 2px; align-content: start; }
.mega__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; transition: background-color var(--t-fast); }
.mega__link:hover, .mega__link:focus-visible, .mega__item:hover, .mega__item:focus-visible { background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.mega__glass { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.mega__glass .bp-icon { width: 44px; height: 44px; }
.mega__title { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.3; }
.mega__desc { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.mega__aside { padding: var(--s-2) var(--s-4); border-left: 1px solid var(--draft-2); display: flex; flex-direction: column; gap: var(--s-3); }
.mega__aside-title { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.5; color: var(--ink-3); }
.mega__firm { display: flex; align-items: center; gap: 10px; padding: 6px; margin: -6px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); transition: background-color var(--t-fast); }
.mega__firm:hover { background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.mega__firm .num { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); }
.mega__all { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo-ink); }
.mega__all:hover { color: var(--ink); }
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.mega__col { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-3); }
.mega__col + .mega__col { border-left: 1px solid var(--draft-2); }
.mega__colhead { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--draft-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.mega__colhead .bp-icon { width: 40px; height: 40px; }
.mega__item { display: block; padding: 8px 12px; border-radius: 6px; transition: background-color var(--t-fast); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-header) + 1); display: flex; flex-direction: column;
  background-color: var(--ground);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 40px 40px;
  visibility: hidden; opacity: 0; transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--draft-2); flex: none; }
.mobile-menu__body { flex: 1; overflow-y: auto; padding: var(--s-3) var(--gutter) var(--s-6); overscroll-behavior: contain; }
.mobile-menu__group { border-bottom: 1px solid var(--draft-2); }
.mobile-menu__group > summary, .mobile-menu__direct {
  list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 60px;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); cursor: pointer; border-radius: var(--r-xs);
}
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__group > summary .icon { transition: transform var(--t-base) var(--ease-out); color: var(--ink-3); }
.mobile-menu__group[open] > summary .icon { transform: rotate(180deg); }
.mobile-menu__direct { border-bottom: 1px solid var(--draft-2); }
.mobile-menu__links { display: flex; flex-direction: column; padding-bottom: var(--s-4); }
.mobile-menu__links a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 12px; border-radius: 6px; font-size: var(--fs-md); color: var(--ink-2); }
.mobile-menu__links a small { font-size: var(--fs-xs); color: var(--ink-3); }
.mobile-menu__links a:active, .mobile-menu__links a:hover { background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.mobile-menu__sub { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.mobile-menu__sub .bp-icon { width: 28px; height: 28px; }
.mobile-menu__foot { flex: none; padding: var(--s-4) var(--gutter) max(var(--s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--draft-2); display: flex; flex-direction: column; gap: var(--s-3); background: var(--ground); }

@media (max-width: 1319px) { .search-btn { min-width: 0; padding-right: 12px; } .search-btn__label, .search-btn__kbd { display: none; } .site-header__inner { gap: var(--s-4); } .nav { margin-left: var(--s-3); } }
@media (max-width: 1023px) {
  .nav, .search-btn__label, .search-btn__kbd { display: none; }
  .search-btn { min-width: 0; width: 34px; padding: 0; justify-content: center; border-color: transparent; background: none; box-shadow: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 479px) {
  .site-header .header-cta { display: none; }
  .site-header__inner { gap: var(--s-3); }
}

/* Command palette */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); display: flex; justify-content: center; align-items: flex-start; padding: min(14vh, 120px) 16px 16px; visibility: hidden; }
.palette.is-open { visibility: visible; }
.palette__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--t-base) var(--ease-out); backdrop-filter: blur(3px); }
.palette.is-open .palette__scrim { opacity: 1; }
.palette__box {
  position: relative; width: min(640px, 100%); max-height: min(560px, 78dvh); display: flex; flex-direction: column;
  background: var(--overlay); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3), var(--edge); overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(0.985); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.palette.is-open .palette__box { opacity: 1; transform: none; }
.palette__search { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.palette__search .icon { color: var(--muted); }
.palette__input { flex: 1; height: 56px; border: 0; background: none; font-size: var(--fs-md); color: var(--text); min-width: 0; }
.palette__input:focus { outline: none; }
.palette__input::placeholder { color: var(--faint); }
.palette__results { overflow-y: auto; padding: 6px; overscroll-behavior: contain; flex: 1; }
.palette__group { padding: 10px 10px 4px; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.palette__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; min-height: 48px; }
.palette__item[aria-selected="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.palette__item-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--muted); }
.palette__item-text { flex: 1; min-width: 0; }
.palette__item-title { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-title mark { background: none; color: var(--brand-soft); }
.palette__item-sub { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); flex: none; }
.palette__item-enter { opacity: 0; color: var(--muted); }
.palette__item[aria-selected="true"] .palette__item-enter { opacity: 1; }
.palette__empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.palette__foot { display: flex; align-items: center; gap: var(--s-4); padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); flex: none; }
.palette__foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 599px) { .palette { padding: 12px 8px; } .palette__foot { display: none; } }

/* Footer (v2): drafting band. The brand column is split off by a vertical rule; column heads carry glass icons. */
.site-footer { position: relative; margin-top: var(--section-y); border-top: 1px solid var(--draft-2); background: color-mix(in srgb, var(--ground) 86%, transparent); padding-block: var(--s-9) var(--s-6); font-size: var(--fs-sm); }
.site-footer > .container { max-width: calc(var(--container-sheet) + var(--gutter) * 2); }
.site-footer__top { display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: var(--s-7); }
.site-footer__brand { padding-right: var(--s-7); border-right: 1px solid var(--draft-2); }
.site-footer__brand p { color: var(--ink-2); margin-top: var(--s-4); max-width: 34ch; line-height: 1.55; }
.site-footer__col h2 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); }
.site-footer__col h2 .bp-icon { width: 36px; height: 36px; margin: -6px 0 -6px -4px; }
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: var(--ink-2); transition: color var(--t-fast); border-radius: 4px; }
.site-footer__col a:hover { color: var(--ink); }
.site-footer__legal { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--draft-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.6; }
.site-footer__legal h2 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-footer__legal .pending-tag { vertical-align: 1px; }
.site-footer__bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--draft-2); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-xs); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer__links a { color: var(--ink-2); }
.site-footer__links a:hover { color: var(--ink); }
.site-footer__motto { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 959px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; padding-right: 0; border-right: 0; padding-bottom: var(--s-6); border-bottom: 1px solid var(--draft-2); }
  .site-footer__legal { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* =========================================================================
   Wave 1 additions: code pill, workbench, quadrant, diff rows, timeline, receipt, stacked table
   ========================================================================= */

/* ---------- Code pill (copyable discount code, shell handles [data-copy]) ---------- */
.code-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 5px 0 12px;
  border-radius: var(--r-sm); border: 1px dashed color-mix(in srgb, var(--deal) 60%, var(--line-strong));
  background: color-mix(in srgb, var(--deal) 7%, var(--surface)); color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
[data-theme="light"] .code-pill { background: color-mix(in srgb, var(--deal) 20%, var(--surface)); border-color: #B3A300; }
.code-pill:hover { border-style: solid; }
.code-pill__copy { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--raised); color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-2xs); letter-spacing: 0; transition: color var(--t-fast), background-color var(--t-fast); }
.code-pill:hover .code-pill__copy { color: var(--text); }
.code-pill__copy .icon { width: 12px; height: 12px; }
.code-pill.is-copied .code-pill__copy { color: var(--profit); background: var(--profit-tint); }
.code-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.code-pill { max-width: 100%; }
.code-pill--recheck { border-color: var(--caution); background: color-mix(in srgb, var(--caution) 12%, var(--surface)); }
.code-pill--recheck .code-pill__copy { color: var(--caution-ink, var(--caution)); }
.code-pill--expired { border-color: var(--line-strong); border-style: dashed; background: var(--bg-elev); color: var(--faint); pointer-events: none; }
.code-pill--expired .code-pill__code { text-decoration: line-through; text-decoration-color: var(--breach); }

/* ---------- Ranking workbench (weight sliders) ---------- */
.workbench { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--edge); }
.workbench__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.workbench__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.weight { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 48px; align-items: center; gap: var(--s-4); }
.weight__label { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.weight__value { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.workbench__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.workbench__total { font-family: var(--font-mono); color: var(--text); }
.workbench__total.is-off { color: var(--caution); }
@media (max-width: 479px) { .weight { grid-template-columns: minmax(0, 1fr) 44px; gap: 2px var(--s-3); } .weight .range { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Quadrant chart (server-rendered SVG via ui.quadrant) ---------- */
.quadrant { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--edge); }
.quadrant > svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
@media (max-width: 639px) { .quadrant { overflow-x: auto; padding: var(--s-3); } .quadrant > svg { min-width: 560px; } }
.quadrant__legend svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.quadrant__grid { stroke: var(--grid-line); stroke-width: 1; }
.quadrant__axis { stroke: var(--line-strong); stroke-width: 1; }
.quadrant__mid { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.quadrant__tick { fill: var(--faint); font-family: var(--font-mono); font-size: 10px; }
.quadrant__label { fill: var(--muted); font-size: 11px; font-weight: 500; }
.quadrant__zone { fill: var(--faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.quadrant__zone--best { fill: var(--profit); }
.quadrant__hot { fill: var(--profit-tint); }
.quadrant__pt { cursor: pointer; }
.quadrant__pt circle { fill: hsl(var(--h, 240) 58% 56%); stroke: var(--surface); stroke-width: 2; transition: r var(--t-fast) var(--ease-out); }
.quadrant__pt--aff circle { stroke: var(--caution); stroke-dasharray: 2 2; }
.quadrant__pt text { fill: var(--text-2); font-size: 10.5px; font-weight: 500; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.quadrant__pt--labeled text, .quadrant__pt:hover text, .quadrant__pt:focus-visible text { opacity: 1; }
.quadrant__pt:hover circle, .quadrant__pt:focus-visible circle { r: 7; }
.quadrant__pt:focus-visible { outline: none; }
.quadrant__pt:focus-visible circle { stroke: var(--focus); stroke-width: 2.5; }
.quadrant__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Diff rows (rule changes) ---------- */
.diff { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; box-shadow: var(--edge); }
.diff__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.diff__row { display: grid; grid-template-columns: minmax(140px, 220px) auto 16px auto minmax(84px, 1fr); align-items: center; gap: var(--s-3); padding: 12px var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.diff__head + .diff__row { border-top: 0; }
.diff__field { color: var(--muted); }
.diff__old, .diff__new { font-family: var(--font-mono); font-size: var(--fs-sm); padding: 3px 8px; border-radius: 5px; justify-self: start; max-width: 100%; overflow-wrap: anywhere; }
.diff__old { background: var(--breach-tint); color: var(--text-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--breach) 60%, transparent); }
.diff__new { background: var(--profit-tint); color: var(--text); }
.diff__row--stricter .diff__new { background: var(--caution-tint); }
.diff__to { color: var(--faint); width: 16px; height: 16px; }
.diff__row > .tag { justify-self: end; }
.diff__impact { display: flex; gap: var(--s-2); align-items: flex-start; padding: 12px var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); background: var(--bg-elev); }
.diff__impact .icon { color: var(--caution); margin-top: 2px; width: 15px; height: 15px; }
@media (max-width: 639px) {
  .diff__row { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 6px var(--s-2); padding: 12px var(--s-4); }
  .diff__field { grid-column: 1 / 3; }
  .diff__row > .tag { grid-column: 3; grid-row: 1; }
}

/* ---------- Timeline (rule watch, status history, graveyard) ---------- */
.timeline { list-style: none; padding: 0; position: relative; display: flex; flex-direction: column; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--line-strong), var(--line) 85%, transparent); }
.timeline__item { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand-soft); }
.timeline__item--profit .timeline__dot { border-color: var(--profit); }
.timeline__item--caution .timeline__dot { border-color: var(--caution); }
.timeline__item--breach .timeline__dot { border-color: var(--breach); background: var(--breach); box-shadow: 0 0 0 4px var(--breach-tint); }
.timeline__item--muted .timeline__dot { border-color: var(--faint); }
.timeline__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em; }
.timeline__title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-top: 2px; letter-spacing: -0.01em; }
.timeline__body { font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; line-height: 1.55; max-width: 64ch; }
.timeline__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.timeline--memorial .timeline__title { font-family: var(--font-serif); font-style: normal; font-weight: inherit; font-size: var(--fs-xl); letter-spacing: -0.01em; }
.timeline--memorial .timeline__dot { border-color: var(--faint); background: var(--bg-elev); }

/* ---------- Decision receipt ---------- */
.receipt {
  --receipt-bg: var(--surface);
  position: relative; max-width: 440px; padding: var(--s-6) var(--s-6) var(--s-7); background: var(--receipt-bg);
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-2), var(--edge);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 10px;
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: radial-gradient(circle at 6px 10px, transparent 5.5px, var(--receipt-bg) 6px) 0 0 / 12px 10px repeat-x;
}
.receipt__head { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; padding-bottom: var(--s-2); }
.receipt__title { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.receipt__sep { border: 0; border-top: 1px dashed var(--line-strong); margin: var(--s-4) 0; }
.receipt__rows { display: flex; flex-direction: column; }
.receipt__row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 3px 0; }
.receipt__row dt { color: var(--muted); }
.receipt__row dd { color: var(--text); text-align: right; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); color: var(--text); font-weight: 600; }
.receipt__total .num { color: var(--profit); }
.receipt__foot { margin-top: var(--s-5); font-size: var(--fs-2xs); color: var(--faint); text-align: center; line-height: 1.6; }

/* ---------- Table as cards on phones: add .data-table--stack and data-label on each td ---------- */
@media (max-width: 639px) {
  .table-wrap:has(.data-table--stack) { max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; }
  .data-table--stack, .data-table--stack tbody { display: block; min-width: 0; }
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--s-4); padding: var(--s-4); margin-bottom: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--edge); }
  .data-table--stack tbody tr > * { background: none !important; }
  .data-table--stack td, .data-table--stack th { display: block; padding: 0; border: 0; white-space: normal; text-align: left !important; position: static; box-shadow: none !important; }
  .data-table--stack td::before { display: block; margin-bottom: 3px; content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .data-table--stack td:first-child, .data-table--stack th:first-child { grid-column: 1 / -1; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft); }
  .data-table--stack td:first-child::before, .data-table--stack td[data-label=""]::before { display: none; }
  .data-table--stack td.span-all { grid-column: 1 / -1; }
}

/* =========================================================================
   v2.0 kit: Glass + Engineering drawing (lane V0, 2026-10-04)
   Builders: src/lib/ui.mjs (server) and /assets/js/kit.js (client). Tokens: tokens.css v2 blocks.
   Every class is prefixed bp-. Dark is primary; light is blueprint on paper (tokens flip, rules below stay).
   ========================================================================= */

/* ---------- Glass panel ---------- */
.bp-glass {
  position: relative; isolation: isolate; border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 1px 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.bp-glass::before { /* top-left specular wash, behind the content */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, var(--glass-spec), transparent 50%);
}
.bp-glass--flat { box-shadow: inset 1px 1px 0 var(--glass-hi); }
.bp-glass--tight { border-radius: 10px; }
.bp-glass--hover { transition: box-shadow 0.35s ease, border-color 0.35s ease; }
.bp-glass--hover:hover, .bp-glass--hover:focus-within, .bp-glass--selected {
  border-color: transparent; box-shadow: inset 1px 1px 0 var(--glass-hi), var(--glass-glow), var(--glass-shadow);
}

/* ---------- Drafting sheet frame: margin rules and registration crosses (wrap a page section) ---------- */
.bp-frame { position: relative; isolation: isolate; }
/* Pages that host the Live Floor canvas (mix-blend-mode: screen against the body grid) add .bp-frame--live,
   because isolation: isolate would cut the blend off from the grid. Home uses it (.hm.bp-frame does the same). */
.bp-frame--live { isolation: auto; }
.bp-frame::before, .bp-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--draft-2); opacity: 0.7; pointer-events: none; z-index: -1; }
.bp-frame::before { left: max(8px, calc((100% - var(--container-sheet)) / 2 + 24px)); }
.bp-frame::after { right: max(8px, calc((100% - var(--container-sheet)) / 2 + 24px)); }
.bp-band { position: relative; padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--draft-2); }
.bp-rule { display: block; height: 1px; background: var(--draft-2); border: 0; }

/* ---------- Eyebrow, reference marks, scale note, title block, measure ---------- */
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3);
}
.bp-eyebrow__rule { position: relative; width: 52px; height: 1px; background: var(--indigo); flex: none; }
.bp-eyebrow__rule::before { content: ""; position: absolute; left: -2px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.bp-eyebrow--caret > span:not([class])::before { content: "> "; color: var(--indigo); }
.bp-eyebrow__ref { color: var(--indigo-ink); letter-spacing: 0.08em; }
.bp-ref-chip {
  display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; flex: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink);
  border: 1px solid var(--draft); border-radius: 3px; background: color-mix(in srgb, var(--ground) 60%, transparent);
}
.bp-scale { display: grid; gap: 2px; margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.bp-titleblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; border: 1px solid var(--draft-2); border-radius: 2px; }
.bp-titleblock > div { padding: 8px 12px; min-width: 0; border-right: 1px solid var(--draft-2); }
.bp-titleblock > div:last-child { border-right: 0; }
.bp-titleblock dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.bp-titleblock dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.bp-measure { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.bp-measure .bp-ref-chip { margin-bottom: 4px; }
.bp-measure__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo-ink); }
.bp-measure__v { font-family: var(--font-mono); font-size: clamp(22px, 1.6vw + 12px, 32px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-measure__s { font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ---------- Glass icon and monogram tile ---------- */
.bp-icon { display: block; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(79, 72, 255, 0.28)); }
.bp-icon--nav { filter: drop-shadow(0 4px 10px rgba(79, 72, 255, 0.35)); }
[data-theme="light"] .bp-icon { filter: drop-shadow(0 8px 18px rgba(40, 40, 160, 0.25)) saturate(1.1) brightness(0.92) contrast(1.15); }
.bp-tile {
  --t: 56px; position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.2);
  background: linear-gradient(150deg, rgba(160, 170, 255, 0.22), rgba(40, 46, 90, 0.35) 45%, rgba(10, 12, 26, 0.6));
  border: 1px solid rgba(190, 196, 255, 0.28);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.35), 0 12px 26px -12px rgba(79, 72, 255, 0.6);
}
.bp-tile::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 40%); pointer-events: none; }
.bp-tile--xs { --t: 26px; } .bp-tile--sm { --t: 40px; } .bp-tile--md { --t: 56px; } .bp-tile--lg { --t: 76px; }
.bp-tile__t {
  font-family: var(--font-sans); font-weight: 300; font-size: calc(var(--t) * 0.44); letter-spacing: -0.02em; line-height: 1;
  color: transparent; -webkit-text-stroke: max(0.6px, calc(var(--t) * 0.016)) rgba(225, 228, 255, 0.92);
  text-shadow: 0 0 14px rgba(124, 118, 255, 0.55);
}
.bp-tile[data-len="3"] .bp-tile__t { font-size: calc(var(--t) * 0.32); }
.bp-tile[data-len="4"] .bp-tile__t { font-size: calc(var(--t) * 0.26); }
.bp-tile--xs .bp-tile__t { font-weight: 500; color: rgba(225, 228, 255, 0.92); -webkit-text-stroke: 0; text-shadow: none; }
[data-theme="light"] .bp-tile { background: linear-gradient(150deg, #FFFFFF, #E7E9F8 55%, #D9DCF2); border-color: rgba(40, 52, 160, 0.22); box-shadow: inset 1px 1px 0 #fff, 0 10px 22px -12px rgba(40, 52, 160, 0.45); }
[data-theme="light"] .bp-tile__t { -webkit-text-stroke-color: #2B2FA8; text-shadow: none; }
[data-theme="light"] .bp-tile--xs .bp-tile__t { color: #2B2FA8; }

/* ---------- Drafted gauge (ui.gauge) ---------- */
.bp-gauge { position: relative; display: inline-grid; place-items: center; width: var(--bp-g, 88px); height: var(--bp-g, 88px); flex: none; }
.bp-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-gauge__track { fill: none; stroke: var(--draft-2); stroke-width: 1; }
.bp-gauge__tk { stroke: var(--draft-2); stroke-width: 0.8; }
.bp-gauge__tk.is-major { stroke: var(--draft); }
.bp-gauge__tk.is-on { stroke: var(--indigo); opacity: 0.85; }
.bp-gauge__val { fill: none; stroke: var(--indigo); stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--indigo) 70%, transparent)); }
.bp-gauge__node { fill: var(--ground); stroke: var(--indigo); stroke-width: 1.4; }
.bp-gauge__face { position: relative; display: grid; justify-items: center; line-height: 1; pointer-events: none; }
.bp-gauge__num { font-family: var(--font-mono); font-weight: 500; font-size: calc(var(--bp-g, 88px) * 0.26); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-gauge__of { margin-top: 3px; font-family: var(--font-mono); font-size: max(9px, calc(var(--bp-g, 88px) * 0.11)); color: var(--ink-3); }
.bp-gauge__cap { margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.bp-gauge__num--nv { font-family: var(--font-sans); font-size: max(10px, calc(var(--bp-g, 88px) * 0.13)); font-weight: 500; letter-spacing: 0; line-height: 1.15; text-align: center; color: var(--ink-3); }
.bp-gauge.is-nv .bp-gauge__track { stroke-dasharray: 2 3; }
.bp-gauge--sm.is-nv .bp-gauge__of { display: none; }
/* large: glass disc, dashed construction ring, quarter labels, heavier value arc */
.bp-gauge--lg .bp-gauge__glass { fill: color-mix(in srgb, var(--indigo-deep) 7%, transparent); stroke: var(--glass-edge); }
.bp-gauge--lg .bp-gauge__inner { fill: none; stroke: var(--draft-2); stroke-dasharray: 1.5 2.5; stroke-width: 0.6; }
.bp-gauge--lg .bp-gauge__track { stroke-width: 2.6; }
.bp-gauge--lg .bp-gauge__val { stroke-width: 2.6; }
.bp-gauge--lg .bp-gauge__tk { stroke-width: 0.45; }
.bp-gauge--lg .bp-gauge__tk.is-on { opacity: 0.6; }
.bp-gauge--lg .bp-gauge__lab { font-family: var(--font-mono); font-size: 4.6px; fill: var(--ink-2); }
.bp-gauge--lg .bp-gauge__num { font-family: var(--font-sans); font-weight: 650; font-size: calc(var(--bp-g) * 0.25); letter-spacing: -0.05em; }
.bp-gauge--lg .bp-gauge__of { font-size: 13px; margin-top: 4px; }
.bp-gauge--lg .bp-gauge__num--nv { font-weight: 500; font-size: max(15px, calc(var(--bp-g) * 0.1)); letter-spacing: 0; line-height: 1.15; color: var(--ink-3); }
.bp-gauge__fm line { stroke: var(--amber); stroke-width: 1.1; }
.bp-gauge__fm circle { fill: var(--amber); }
[data-theme="light"] .bp-gauge__val { filter: none; }

/* ---------- Drawdown micro-diagram (ui.ddDiagram) and cell (ui.ddCell) ---------- */
.bp-dd { display: block; width: 100%; height: auto; aspect-ratio: 160 / 64; overflow: visible; }
.bp-dd__day { stroke: var(--draft-2); stroke-width: 0.6; stroke-dasharray: 1.5 2.5; }
.bp-dd__base { stroke: var(--draft); stroke-width: 0.7; stroke-dasharray: 3 2; }
.bp-dd__eq { fill: none; stroke: var(--eq-line); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.9; }
.bp-dd__floor { fill: none; stroke: var(--indigo); stroke-width: 1.4; stroke-linejoin: miter; }
.bp-dd.is-schematic .bp-dd__floor { stroke-dasharray: 3 2; }
.bp-dd__hatch { fill: url(#bp-hatch); stroke: none; }
.bp-hatch-line { stroke: var(--draft-2); stroke-width: 1; }
.bp-dd__dim line { stroke: var(--ink-2); stroke-width: 0.9; }
.bp-dd__dim .bp-dd__ext { stroke: var(--draft); stroke-width: 0.6; stroke-dasharray: 1.5 1.5; }
.bp-dd__arr { fill: none; stroke: var(--ink-2); stroke-width: 0.9; }
.bp-dd__lab { font-family: var(--font-mono); font-size: 7px; fill: var(--ink); }
.bp-dd__nvbox { fill: none; stroke: var(--draft-2); stroke-dasharray: 3 3; }
.bp-dd__nvt { fill: var(--ink-3); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; }
.bp-ddc { display: grid; grid-template-columns: minmax(120px, 180px) auto; gap: 14px; align-items: end; min-width: 0; }
.bp-ddc__fig { display: grid; gap: 4px; min-width: 0; }
.bp-ddc__type { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink); }
.bp-ddc__type.is-nv { color: var(--ink-3); }
.bp-ddc__also { font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.bp-ddc__spec { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid var(--draft-2); align-self: center; }
.bp-ddc__k { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); white-space: nowrap; }
.bp-ddc__k .illustrative { height: 15px; font-size: 9px; padding: 0 4px; }
.bp-ddc__v { font-family: var(--font-mono); font-size: 15px; color: var(--ink); white-space: nowrap; }
.bp-ddc__v.is-nv { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); }

/* ---------- Dimension lines, leader callouts, reference marks (SVG) ---------- */
.bp-dim path { fill: none; stroke: var(--draft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bp-dim text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--ink); }
.bp-dim .bp-dim__sub { font-size: 10px; fill: var(--ink-3); letter-spacing: 0.04em; }
.bp-leader path { fill: none; stroke: var(--indigo); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bp-leader circle { fill: var(--indigo); }
.bp-leader__ref { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; fill: var(--indigo-ink); }
.bp-leader__t { font-family: var(--font-sans); font-size: 15px; font-weight: 500; fill: var(--ink); }
.bp-leader__s { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); letter-spacing: 0.02em; }
.bp-refmark { font-family: var(--font-mono); font-size: 18px; fill: var(--indigo-ink); letter-spacing: 0.04em; }
.bp-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.bp-drawing .bp-cons { stroke: var(--draft-2); stroke-dasharray: 6 5; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

/* ---------- Buttons (v2): square-cornered, glass ghost ---------- */
.bp-btn {
  --bh: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--bh); padding: 0 22px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; border-radius: 4px; border: 1px solid transparent;
  text-decoration: none; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.bp-btn .icon { width: 16px; height: 16px; }
.bp-btn--primary { background: var(--indigo-deep); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px -14px rgba(79, 72, 255, 0.9); }
.bp-btn--primary:hover { background: #5F59FF; }
[data-theme="light"] .bp-btn--primary:hover { background: #2A23E0; }
.bp-btn--ghost { border-color: var(--draft); color: var(--ink); background: transparent; }
.bp-btn--ghost:hover, .bp-btn--ghost[aria-pressed="true"] { border-color: var(--indigo); box-shadow: var(--glass-glow); }
.bp-btn--xl { --bh: 60px; padding: 0 30px; font-size: 17px; }
.bp-btn--sm { --bh: 36px; padding: 0 14px; font-size: 13.5px; gap: 8px; }
.bp-btn--xs { --bh: 30px; padding: 0 10px; font-size: 12px; gap: 6px; }
.bp-btn--xs .icon { width: 13px; height: 13px; }
.bp-btn--block { width: 100%; }
.bp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bp-arrow { width: 16px; height: 16px; flex: none; }
.bp-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo-ink); }
.bp-link:hover { color: var(--ink); }

/* ---------- Drawing head (ui.drawingHead) ---------- */
.bp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.bp-head__t { margin-top: 16px; }
.bp-head__note { max-width: 340px; padding-left: 24px; border-left: 1px solid var(--draft-2); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.bp-head__note p { margin: 0; }
.bp-head__note .bp-head__k { margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo-ink); }
@media (max-width: 960px) { .bp-head { flex-direction: column; align-items: flex-start; } .bp-head__note { padding-left: 16px; } }

/* ---------- Source chip and fact rows (ui.sourceChip, ui.factRow, ui.factPanel) ---------- */
.bp-src {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-edge); background: color-mix(in srgb, var(--ground) 40%, transparent); box-shadow: inset 1px 1px 0 var(--glass-hi);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; transition: box-shadow 0.2s, color 0.2s;
}
.bp-src:hover { color: var(--ink); box-shadow: inset 1px 1px 0 var(--glass-hi), var(--glass-glow); }
.bp-src__k { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; font-size: 9.5px; }
.bp-facts { padding: clamp(18px, 2vw, 28px); }
.bp-facts__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--draft-2); }
.bp-facts__t { margin: 0; font-size: clamp(24px, 2vw, 32px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.bp-facts__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.bp-facts__rows { display: grid; gap: 8px; }
.bp-fact {
  display: grid; grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1.2fr) auto; align-items: center; gap: 14px; min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--glass-edge); border-radius: 8px; background: color-mix(in srgb, var(--ground) 30%, transparent);
}
.bp-fact__i { display: grid; place-items: center; color: var(--ink-2); }
.bp-fact__i .icon { width: 20px; height: 20px; }
.bp-fact__k { font-size: 14px; color: var(--ink-2); }
.bp-fact__v { font-size: 15px; color: var(--ink); }
@media (max-width: 560px) {
  .bp-fact { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 2px; }
  .bp-fact__v { grid-column: 2 / 3; grid-row: 2; }
  .bp-fact > :last-child { grid-column: 3; grid-row: 1 / 3; }
}

/* ---------- Payout cadence cell (ui.payoutCell) ---------- */
.bp-cad { display: inline-grid; gap: 2px; line-height: 1.2; }
.bp-cad__n { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.bp-cad__s { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.bp-cad.is-nv .bp-cad__n { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-3); }

/* ---------- Tool card (ui.toolCard) ---------- */
.bp-tool { display: flex; flex-direction: column; padding: 22px 24px; color: inherit; text-decoration: none; min-width: 0; }
.bp-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bp-tool__fig { position: relative; display: block; aspect-ratio: 240 / 150; margin-bottom: 18px; }
.bp-tool__dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-tool__dims .bp-dim text { font-size: 10px; letter-spacing: 0.1em; }
.bp-tool__ring { fill: none; stroke: var(--draft-2); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.bp-tool__icon { position: absolute; left: 50%; top: 56%; width: 62%; height: auto; transform: translate(-50%, -50%); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bp-tool:hover .bp-tool__icon { transform: translate(-50%, -54%); }
.bp-tool__ref { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--indigo-ink); }
.bp-tool__name { font-size: 24px; font-weight: 550; letter-spacing: -0.03em; color: var(--ink); }
.bp-tool__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.bp-tool__go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo-ink); }

/* ---------- Firm card v2 (ui.firmCardV2) ---------- */
.bp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 22px; }
.bp-card { display: grid; grid-template-rows: auto auto 1fr auto; padding: 22px 22px 16px; min-width: 0; }
.bp-card__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--draft-2); }
.bp-card__id { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 6px; }
.bp-card__name { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 550; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.bp-card__name a { color: inherit; }
.bp-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; z-index: 0; }
.bp-card__name a:focus-visible { outline: none; }
.bp-card:has(.bp-card__name a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.bp-card__kind { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.bp-card__rank { margin-right: 8px; color: var(--indigo-ink); }
.bp-card__stats { display: grid; grid-template-columns: 1fr 1fr 1.25fr; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--draft-2); }
.bp-card__stats > div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--draft-2); }
.bp-card__stats > div:first-child { padding-left: 2px; border-left: 0; }
.bp-card__stats dt { font-size: 13px; color: var(--ink-2); }
.bp-card__stats dd { margin: 6px 0 0; font-size: 18px; color: var(--ink); }
.bp-card__stats .bp-cad__n { font-size: 13px; }
.bp-card__dd { padding-top: 16px; }
.bp-card__dd .bp-ddc { grid-template-columns: minmax(0, 1fr) auto; }
.bp-card__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; }

/* ---------- Motion: draw-in and fade-up (kit.js initKit adds .bp-armed, then .bp-in) ---------- */
.bp-armed .bp-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.bp-armed .bp-rise { opacity: 0; transform: translateY(14px); }
.bp-armed.bp-in .bp-draw, .bp-armed .bp-in .bp-draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-draw) var(--ease-draw) var(--d, 0s); }
.bp-armed.bp-in .bp-rise, .bp-armed .bp-rise.bp-in, .bp-armed .bp-in .bp-rise { opacity: 1; transform: none; transition: opacity 0.7s ease var(--d, 0s), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
/* after the draw-in, drop the dash so non-scaling strokes render whole at any zoom */
.bp-armed.bp-drawn .bp-draw, .bp-armed .bp-drawn .bp-draw { stroke-dasharray: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bp-armed .bp-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .bp-armed .bp-rise { opacity: 1; transform: none; }
  .bp-glass--hover, .bp-tool__icon { transition: none; }
  .bp-tool:hover .bp-tool__icon { transform: translate(-50%, -50%); }
}
@media (max-width: 560px) {
  .bp-ddc { grid-template-columns: minmax(0, 1fr) auto; }
  .bp-card__stats > div { padding: 0 8px; }
}