/* ============================================================================
   TAX ORGANIZER UI KIT — shared component layer for the Free Tax Filer and any
   future tax-questionnaire surface. SINGLE SOURCE OF TRUTH for these components.

   Rules for anyone extending the tool:
   - Colors come from /css/odyssey-tokens.css. Never hardcode a hex here or in a page.
   - Add a NEW module (Schedule E, credits, …)? Reuse these classes as-is. If a genuinely
     new component is needed, add it HERE with a `.tax-` prefix so every module inherits it.
   - Icons are inline SVG rendered by organizerUiMeta.js — add new ones to its ICON_PATHS
     map rather than embedding raw SVG in markup.
   - Every component below already works in light and dark via the tokens.

   Component index:
     .tax-shell / .tax-rail / .tax-main       page layout (nav rail + content)
     .tax-navitem                             section nav with status + counts
     .tax-hud                                 sticky live totals bar (gamified)
     .tax-card                                the question / content card
     .tax-option                              large tappable choice with icon
     .tax-field                               currency + number + text inputs
     .tax-insight                             live computed feedback under inputs
     .tax-table                               data table for multi-row entry & summaries
     .tax-badge / .tax-chip                   status pills
     .tax-toast                               milestone celebration
     .tax-progress                            progress bar
   ============================================================================ */

/* ── layout (MOBILE FIRST: base styles are the phone layout; the desktop
       two-column shell is a min-width upgrade below) ────────────────────────── */
.tax-shell { display: block; }
.tax-main { min-width: 0; }
.tax-rail {
  display: flex; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 8px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev);
}
.tax-rail::-webkit-scrollbar { display: none; }
.tax-rail-title { display: none; }
.tax-navitem { flex: 0 0 auto; }

@media (min-width: 900px) {
  .tax-shell { display: grid; grid-template-columns: 236px 1fr; gap: 26px; align-items: start; }
  .tax-rail {
    position: sticky; top: 96px; flex-direction: column; gap: 3px; overflow: visible;
    padding: 12px; margin-bottom: 0; border-radius: 14px;
  }
  .tax-rail-title {
    display: block; font-family: "JetBrains Mono", monospace; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding: 2px 8px 8px;
  }
  .tax-navitem { flex: 1 1 auto; }
}

/* ── section nav ──────────────────────────────────────────────────────────── */
.tax-navitem {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
@media (min-width: 900px) { .tax-navitem { font-size: 13.5px; padding: 8px 10px; gap: 9px; } }
@media (min-width: 640px) { .tax-stat-value { font-size: 21px; } }
.tax-navitem:hover { background: var(--bg); color: var(--ink); }
.tax-navitem[data-state="current"] {
  background: color-mix(in oklch, var(--accent) 16%, var(--bg));
  border-color: var(--accent); color: var(--ink); font-weight: 600;
}
.tax-navitem[data-state="done"] { color: var(--ink); }
.tax-navitem svg { width: 14px; height: 14px; flex: none; }
.tax-navitem-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tax-navitem-count {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tax-navitem[data-state="done"] .tax-navitem-count { color: var(--success, #0F9D6C); }

/* ── live HUD (gamified running totals) ───────────────────────────────────── */
.tax-hud {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.tax-stat {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-elev);
}
.tax-stat-label {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.tax-stat-value {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px;
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.tax-stat-value[data-tone="good"] { color: var(--success, #0F9D6C); }
.tax-stat-value[data-tone="warn"] { color: var(--gold); }
.tax-stat-value[data-tone="accent"] { color: var(--accent); }
.tax-stat-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.tax-stat-bump { animation: taxBump .45s ease; }
@keyframes taxBump { 0% { transform: scale(1); } 40% { transform: scale(1.11); } 100% { transform: scale(1); } }

/* ── progress ─────────────────────────────────────────────────────────────── */
.tax-progress-track { height: 6px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; }
.tax-progress-fill {
  height: 100%; border-radius: 3px; transition: width .35s ease;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tax-progress-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-3); margin-top: 7px; display: flex; justify-content: space-between; gap: 10px;
}

/* ── cards ────────────────────────────────────────────────────────────────── */
.tax-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--bg-elev);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.5);
}
@media (min-width: 900px) { .tax-card { padding: 26px; border-radius: 16px; } }
.tax-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.tax-eyebrow svg { width: 13px; height: 13px; }
.tax-question { font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.38; margin: 0 0 10px; }
.tax-help { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.tax-subhead { margin: 22px 0 10px; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tax-subhead svg { width: 15px; height: 15px; color: var(--accent); }

/* ── option buttons ───────────────────────────────────────────────────────── */
.tax-options { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; }
.tax-options[data-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tax-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: .95rem; text-align: left; cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
}
.tax-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.tax-option[aria-pressed="true"] {
  border-color: var(--accent); background: color-mix(in oklch, var(--accent) 15%, var(--bg));
}
.tax-option-icon {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  color: var(--accent);
}
.tax-option-icon svg { width: 16px; height: 16px; }
.tax-option-body { flex: 1; min-width: 0; }
.tax-option-label { font-weight: 500; }
.tax-option-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ── fields ───────────────────────────────────────────────────────────────── */
.tax-fieldrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.tax-field { position: relative; flex: 1; min-width: 160px; }
.tax-field input, .tax-field select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.tax-field select { appearance: none; padding-right: 30px; cursor: pointer; }
.tax-field[data-prefix="$"] input { padding-left: 30px; }
.tax-field[data-prefix]::before {
  content: attr(data-prefix); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 1.05rem; pointer-events: none;
}
.tax-field input:focus, .tax-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.tax-field-label { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; display: block; }

/* Add-a-row entry strip under a repeatable table. Mobile-first: every column stacks to
   full width, then sits inline once there is room. Fields carry labels here, so the
   currency prefix has to align to the input rather than the whole field box. */
.tax-fieldrow--entry { align-items: flex-end; gap: 10px 12px; }
.tax-fieldrow--entry .tax-field { min-width: 100%; }
.tax-fieldrow--entry .tax-field[data-prefix]::before { top: auto; bottom: 15px; transform: none; }
.tax-fieldrow--entry .tax-btn { width: 100%; }
@media (min-width: 640px) {
  .tax-fieldrow--entry .tax-field { min-width: 120px; }
  .tax-fieldrow--entry .tax-field--wide { flex: 2.2; min-width: 180px; }
  .tax-fieldrow--entry .tax-btn { width: auto; }
}

/* ── live insight ─────────────────────────────────────────────────────────── */
.tax-insight {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 11px 14px;
  border-radius: 12px; font-size: .88rem;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent);
}
.tax-insight[data-tone="good"] {
  background: color-mix(in oklch, var(--success, #0F9D6C) 12%, transparent);
  border-color: color-mix(in oklch, var(--success, #0F9D6C) 36%, transparent);
}
.tax-insight[data-tone="warn"] {
  background: color-mix(in oklch, var(--gold) 12%, transparent);
  border-color: color-mix(in oklch, var(--gold) 36%, transparent);
}
.tax-insight svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.tax-insight strong { font-variant-numeric: tabular-nums; }

/* ── tables ───────────────────────────────────────────────────────────────── */
.tax-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .89rem; }
.tax-table th {
  text-align: left; font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.tax-table th.tax-num, .tax-table td.tax-num { text-align: right; font-variant-numeric: tabular-nums; }
.tax-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tax-table tbody tr:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.tax-table tfoot td {
  font-weight: 700; border-top: 1px solid var(--line); border-bottom: none;
  font-variant-numeric: tabular-nums;
}
.tax-table .tax-rowaction { color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; font-size: .82rem; }
.tax-table-empty { padding: 16px 10px; color: var(--ink-3); font-size: .86rem; text-align: center; }
.tax-table-scroll { overflow-x: auto; }

/* ── matrix: a whole form schedule as one editable grid ───────────────────────
   Fixed rows (the form's line items) across fixed columns. Inputs live in cells, so
   they need to be denser than a standalone .tax-field. The label column sticks to the
   left while the value columns scroll on a phone. */
.tax-matrix { min-width: 380px; }
.tax-matrix td, .tax-matrix th { padding: 6px 8px; }
.tax-matrix .tax-matrix-label {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  font-size: .84rem; line-height: 1.3; min-width: 150px;
}
.tax-matrix-hint { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.tax-matrix-heading td {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  padding-top: 14px; border-bottom: 1px solid var(--line);
}
.tax-matrix-strong td { font-weight: 600; background: color-mix(in oklch, var(--accent) 5%, transparent); }
.tax-matrix .tax-field--cell { min-width: 104px; }
.tax-matrix .tax-field--cell input {
  padding: 8px 9px 8px 22px; font-size: .92rem; border-radius: 9px; text-align: right;
}
.tax-matrix .tax-field--cell[data-prefix]::before { left: 9px; font-size: .88rem; }
@media (min-width: 640px) {
  .tax-matrix .tax-matrix-label { min-width: 230px; font-size: .88rem; }
  .tax-matrix .tax-field--cell { min-width: 128px; }
}

/* Summary tables (results screen): label/value rows with emphasis levels. */
.tax-lines { margin: 4px 0 10px; }
.tax-line { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: .92rem; border-bottom: 1px dashed var(--line-soft); }
.tax-line span:last-child { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", monospace; }
.tax-line[data-emphasis="strong"] { font-weight: 700; border-bottom: 1px solid var(--line); }
.tax-line[data-emphasis="total"] { font-weight: 700; font-size: 1.06rem; border-bottom: 3px double var(--line); }
.tax-line[data-emphasis="hero"] {
  margin-top: 14px; padding: 16px; border: 1px solid var(--accent); border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 12%, transparent); font-size: 1.2rem; font-weight: 800; border-bottom: none;
}

/* ── badges, chips, buttons ───────────────────────────────────────────────── */
.tax-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-3);
}
.tax-badge[data-tone="good"] { color: var(--success, #0F9D6C); border-color: color-mix(in oklch, var(--success, #0F9D6C) 45%, transparent); }
.tax-badge[data-tone="accent"] { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.tax-btn {
  padding: 12px 22px; border-radius: 12px; border: none; background: var(--accent);
  color: oklch(0.13 0.02 280); font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background .18s, transform .12s;
}
.tax-btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.tax-btn[data-variant="ghost"] { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tax-btn[data-variant="ghost"]:hover { border-color: var(--accent); background: transparent; }
.tax-link { background: none; border: none; color: var(--accent); font-family: inherit; cursor: pointer; font-size: .88rem; padding: 8px 4px; }
.tax-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; flex-wrap: wrap; }
html[data-theme="light"] .tax-btn { color: #FFFFFF; }

/* ── milestone toast ──────────────────────────────────────────────────────── */
.tax-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 14px;
  background: var(--bg-elev); border: 1px solid var(--accent); color: var(--ink);
  box-shadow: 0 22px 50px -24px rgba(0,0,0,.6); font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 60;
}
.tax-toast[data-visible="true"] { opacity: 1; transform: translateX(-50%) translateY(0); }
.tax-toast svg { width: 18px; height: 18px; color: var(--gold); }

/* ── required-forms strip (live: forms trigger/untrigger as the graph grows) ── */
.tax-forms {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev);
}
.tax-forms-label {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 2px;
}
.tax-formpill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px;
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .04em; cursor: help; animation: taxPillIn .28s ease;
}
.tax-formpill svg { width: 11px; height: 11px; color: var(--accent); }
@keyframes taxPillIn { from { opacity: 0; transform: translateY(-3px) scale(.94); } to { opacity: 1; transform: none; } }
.tax-forms-empty { font-size: 11.5px; color: var(--ink-3); }

/* ── collapsible review folders ───────────────────────────────────────────── */
.tax-folder { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--bg); }
.tax-folder-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  background: transparent; border: none; color: var(--ink); font-family: inherit;
  font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer;
}
.tax-folder-head:hover { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.tax-folder-head > svg:first-child { width: 15px; height: 15px; color: var(--accent); flex: none; }
.tax-folder-title { flex: 1; min-width: 0; }
.tax-folder-chevron { width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s; flex: none; }
.tax-folder[data-open="true"] .tax-folder-chevron { transform: rotate(90deg); }
.tax-folder-body { display: none; padding: 0 14px 12px; }
.tax-folder[data-open="true"] .tax-folder-body { display: block; }
.tax-folder-body .tax-table { margin-top: 0; }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.tax-callout {
  margin-top: 26px; padding: 22px; border-radius: 14px; text-align: center;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
}
.tax-callout h3 { margin: 0 0 8px; font-weight: 700; }
.tax-callout p { font-size: .9rem; color: var(--ink-2); }
.tax-cta { display: inline-block; margin-top: 12px; padding: 13px 26px; border-radius: 12px; background: var(--accent); color: oklch(0.13 0.02 280); font-weight: 700; text-decoration: none; }
html[data-theme="light"] .tax-cta { color: #FFFFFF; }
.tax-notes { font-size: .86rem; color: var(--ink-2); line-height: 1.65; padding-left: 20px; }
.tax-notes li { margin-bottom: 6px; }

@media print {
  .tax-rail, .tax-actions, .tax-callout, .tax-hud, .tax-toast, #site-header, .cosmos { display: none !important; }
  .tax-shell { grid-template-columns: 1fr; }
  .tax-card { border: none; box-shadow: none; padding: 0; }
}

/* ── account layer: save-progress banner + mid-interview nudge ─────────────── */
.tax-account-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-2));
  padding: 10px 14px; margin-bottom: 12px; font-size: .86rem; color: var(--ink-2);
}
.tax-account-banner[data-signed-in="true"] {
  background: color-mix(in oklch, var(--good, #3fb96a) 8%, var(--bg-2));
}
.tax-account-icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.tax-account-banner[data-signed-in="true"] .tax-account-icon { color: var(--good, #3fb96a); }
.tax-account-copy { flex: 1 1 240px; line-height: 1.45; }
.tax-account-copy strong { color: var(--ink); }
.tax-account-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tax-account-input {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: .86rem; padding: 8px 10px; min-width: 190px;
}
.tax-account-input:focus { outline: none; border-color: var(--accent); }
.tax-account-btn {
  border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: .84rem; font-weight: 700; padding: 8px 14px;
  background: var(--accent); color: var(--bg);
}
.tax-account-btn:hover { filter: brightness(1.08); }
.tax-account-btn:disabled { opacity: .6; cursor: default; }
.tax-account-notice {
  display: flex; align-items: center; gap: 8px; border-radius: 10px;
  padding: 8px 12px; margin: -4px 0 12px; font-size: .84rem; color: var(--ink-2);
  border: 1px solid var(--line);
}
.tax-account-notice svg { width: 14px; height: 14px; flex-shrink: 0; }
.tax-account-notice[data-tone="good"] { border-color: color-mix(in oklch, var(--good, #3fb96a) 40%, var(--line)); }
.tax-account-notice[data-tone="warn"] { border-color: color-mix(in oklch, #e0a93f 45%, var(--line)); }
.tax-account-nudge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--line));
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: color-mix(in oklch, var(--accent) 5%, var(--bg-2));
}
/* THE PAID-PRODUCT CTA SITS BELOW THE INTERVIEW (owner, 2026-08-22), which the
   original margins never anticipated — every nudge had margin-bottom only, so the
   books CTA butted straight against the questionnaire card above it and read as
   part of the interview rather than as a separate offer. Both the expanded card and
   the collapsed "Show" bar get the same separation. */
.tax-account-nudge[data-variant="books"],
.tax-account-nudge[data-collapsed="true"] { margin-top: 28px; }

.tax-account-nudge svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.tax-account-nudge-copy { flex: 1 1 260px; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.tax-account-nudge-copy strong { display: block; color: var(--ink); margin-bottom: 2px; }
.tax-account-nudge-dismiss {
  border: 1px solid var(--line); border-radius: 8px; background: transparent;
  color: var(--ink-3); font-family: inherit; font-size: .8rem; padding: 6px 12px; cursor: pointer;
}
.tax-account-nudge-dismiss:hover { color: var(--ink); border-color: var(--ink-3); }
@media print {
  .tax-account-banner, .tax-account-nudge, .tax-account-notice { display: none !important; }
}

/* ── unified account layer additions: auth mode toggle + books CTA variant ── */
.tax-account-toggle {
  display: block; margin-top: 3px; padding: 0; border: none; background: none;
  color: var(--accent); font-family: inherit; font-size: .8rem; cursor: pointer;
  text-align: left; text-decoration: underline; text-underline-offset: 2px;
}
.tax-account-toggle:hover { filter: brightness(1.15); }
a.tax-account-btn { text-decoration: none; display: inline-block; text-align: center; }
.tax-account-nudge[data-variant="books"] {
  border-style: solid;
  border-color: color-mix(in oklch, var(--accent-2, var(--accent)) 55%, var(--line));
  background: color-mix(in oklch, var(--accent-2, var(--accent)) 7%, var(--bg-2));
}