/* WritSpeak shared components (phase 2). Adds to style.css; uses its colour tokens, so dark mode and contrast come for free.
   Text colours: use --ink, --muted, --gold-ink. Never put --gold (4.4:1) on small text; it is for lines, fills and large text only. */
:root {
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;           /* 8px spacing scale */
  --fs-h1: clamp(1.75rem, 4vw, 2.5rem); --fs-h2: clamp(1.35rem, 2.6vw, 1.75rem); --fs-h3: 1.125rem; --fs-body: 1rem; /* 3 heading sizes, body 16px */
  --r-card: 12px; --ease: 160ms;
}
/* Buttons: primary (one per screen) / secondary / ghost. .btn.primary already exists in style.css. */
.btn.secondary { background: transparent; border-color: var(--band); color: var(--ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--gold-ink); text-decoration: underline; padding-inline: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* Card: 1px border, no heavy shadow */
.ui-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); }
.ui-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
/* Tabs (role=tablist / tab / tabpanel) */
.ui-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.ui-tab { min-height: var(--tap); padding: 8px 16px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ui-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
/* Filter chips (toggle buttons with aria-pressed) */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ui-chip { min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ui-chip[aria-pressed="true"] { background: var(--band); color: var(--band-ink); border-color: var(--band); }
/* Accordion (native details: works without script) */
.ui-acc details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: var(--sp-1) 0; }
.ui-acc summary { min-height: var(--tap); padding: 12px 16px; font-weight: 700; cursor: pointer; }
.ui-acc details > :not(summary) { margin: 0; padding: 0 16px 14px; color: var(--muted); }
/* Quota meter: "3 of 5 left", a bar, and an upgrade link only when it matters */
.quota { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: .9rem; }
.quota .bar { width: 72px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.quota .bar > span { display: block; height: 100%; background: var(--good); width: calc(var(--left, 0) * 1%); }
.quota.low .bar > span { background: var(--warn); } .quota.out .bar > span { background: var(--bad); }
/* Band-score badge */
.band-badge { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; font-family: var(--font-display); }
.band-badge small { font-weight: 400; font-family: var(--font-body); color: var(--muted); }
/* Locked badge: the lock is text too, so it is not colour-only */
.locked-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 600; }
/* Empty state: one sentence, one button */
.ui-empty { text-align: center; padding: var(--sp-4) var(--sp-2); color: var(--muted); }
.ui-empty p { margin: 0 0 var(--sp-2); }
/* Modal (use <dialog class="ui-modal">) */
.ui-modal { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); background: var(--surface); color: var(--ink); max-width: min(480px, calc(100vw - 32px)); }
.ui-modal::backdrop { background: rgba(10, 18, 34, .6); }
.ui-modal h2 { font-size: var(--fs-h2); margin: 0 0 var(--sp-1); }
/* Toast: polite live region, bottom centre, above the mobile tab bar */
.ui-toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.ui-toast { background: var(--band); color: var(--band-ink); padding: 12px 16px; border-radius: 10px; pointer-events: auto; }
.ui-toast.bad { background: var(--bad); color: var(--rec-ink); }
/* Breadcrumb */
.ui-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 var(--sp-2); font-size: .9rem; color: var(--muted); }
.ui-crumbs li + li::before { content: "/"; margin-right: 6px; }
.ui-crumbs a { color: var(--gold-ink); }
/* Browser-frame preview: give the inner <img> width and height attributes so nothing jumps */
.browser-frame { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.browser-frame .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.browser-frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser-frame .bar span { margin-left: 8px; font-size: .8rem; color: var(--muted); }
.browser-frame img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .ui-tab, .ui-chip, .quota .bar > span { transition: background-color var(--ease), color var(--ease), border-color var(--ease), width var(--ease); } .ui-toast { animation: ui-in var(--ease) ease-out; } @keyframes ui-in { from { opacity: 0; transform: translateY(6px); } } }

/* Phase 6: plan comparison table (also used on the public /plans page) */
.table-wrap { overflow-x: auto; margin: 20px 0; }
.plan-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--surface); }
.plan-table th, .plan-table td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.plan-table thead th { background: var(--surface-2); }
.plan-table tbody th { font-weight: 600; }
.plan-table .band-badge { display: block; width: fit-content; margin-top: 4px; font-size: .75rem; }

/* Phase 7: touch targets */
.dash-grid input, .dash-grid select { min-height: var(--tap); }
.ui-crumbs a { display: inline-block; padding: 10px 2px; }