/* SyncWealth — the ONE universal stylesheet for the whole product:
   website/ (marketing + free/sign-in tools), dashboard/ (paid app shell),
   and calculators/ (the tool pages). Every page links this single file
   — no page carries its own <style> block or a second stylesheet.

   Sectioned below:
     1. Tokens + base
     2. Calculator components (cards, fields, tables, result-hero, flags,
        .btn utility button, charts, print) — UNCHANGED from the previous
        per-calculator stylesheet, since calculator markup was ported as-is
     3. Public-site navbar (website/ pages)
     4. CTA button system — .cta / .cta-primary / .cta-outline / .cta-sm.
        Deliberately NOT named .btn-* and does not share a base class with
        section 2's .btn — calculator markup uses plain class="btn primary",
        so a shared base class would let whichever rule loads last silently
        resize every button on the OTHER surface. Fully self-contained here
        instead: no collision possible.
     5. App shell — sidebar + topbar (dashboard/ pages)
     6. Tool catalog listing (category blocks + tool cards, used by both
        website/'s Free Tools section and dashboard/calculators.html) */

@import url("tokens.css");
/* The Space Grotesk font is NOT imported here (an @import makes the browser fetch the page, then this file, then the font CSS, one after the other).
   Every page that links this stylesheet has its own <link> to the same font URL, with preconnect, in its <head>. */

/* ════════════════════════════════════════════════════════
   1. TOKENS + BASE
════════════════════════════════════════════════════════ */
:root { font-size: 16px; } /* every colour/shape/spacing token now lives in assets/tokens.css */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; line-height: 1.2; }
h1, h2 { text-wrap: balance; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--em); border-radius: 4px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Short entrances (opacity and transform only); the exit is instant. Easing: --ease-out-strong. */
@keyframes sw-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sw-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sw-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section-label {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--em-dark); background: var(--em-xlight);
  border: 2px solid var(--em); border-radius: 9999px; padding: 5px 14px; margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════
   2. CALCULATOR COMPONENTS (calculators/*.html) — unchanged
════════════════════════════════════════════════════════ */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 76px;
}

.page.page-wide { max-width: 1400px; }
.tool-layout { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
/* z-index needed here, not just on .cs-menu: .tool-sidebar (position:sticky)
   and .tool-main's .card/.result-hero (position:relative) both land at the
   same default stack level, and being first in the DOM, the sidebar loses
   ties to .tool-main — without this, any dropdown opened in the sidebar
   paints BEHIND the cards beside/below it despite .cs-menu's own z-index. */
.tool-sidebar { position: sticky; top: 20px; z-index: 2; display: flex; flex-direction: column; }
.tool-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tool-main .card, .tool-main .result-hero { margin-bottom: 0; }
@media (max-width: 900px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
}

/* Phase 2 UX revamp — inputs LEFT (normal flow) / RESULTS sticky RIGHT.
   Deliberately a NEW, separate class pair rather than reworking
   .tool-layout/.tool-sidebar above: most calculator pages already
   use that pair with sidebar=inputs (sticky) and main=results (not
   sticky) — the opposite of this brief's ask — and changing its meaning
   in place would silently invert the layout on all 20 at once. Pages
   adopt this new pair instead, one at a time (see
   docs/ux-revamp/phase-2-notes.md for which ones do). */
.tool-layout-v2 { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.tool-layout-v2 .tool-inputs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tool-layout-v2 .tool-results-sticky { position: sticky; top: 20px; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) {
  .tool-layout-v2 { grid-template-columns: 1fr; }
  .tool-layout-v2 .tool-results-sticky { position: static; }
}

/* Mobile-only sticky bottom summary bar (CalculatorLayout's
   stickyMobileSummary prop) — shows the headline result while scrolling
   through inputs, tap to expand the full result as a bottom sheet.
   Desktop already shows the full result inline (via tool-results-sticky
   above, for pages that opt into both), so this bar is mobile-only. */
.calc-sticky-summary-bar { display: none; }
@media (max-width: 900px) {
  .calc-sticky-summary-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
    background: #fff; border-top: 2px solid var(--text); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.bottom-tab-bar) .calc-sticky-summary-bar { bottom: 60px; }
}
.calc-sticky-summary-bar button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; padding: 4px 0; cursor: pointer; font: inherit; color: var(--text); min-height: 44px;
}
.calc-sticky-summary-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.calc-sticky-summary-value { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 800; font-size: 18px; flex: 1; text-align: left; margin-left: 8px; }
.calc-summary-sheet-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(26,26,46,0.5); animation: ux-fade-in var(--dur-base) var(--ease-out-strong); }
.calc-summary-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: var(--bg, #f7f5f0);
  border-top: 2px solid var(--text); border-radius: 20px 20px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: sw-sheet-up var(--dur-slow) var(--ease-out-strong);
}
.calc-summary-sheet-handle { width: 40px; height: 4px; background: var(--line); border-radius: 9999px; margin: 6px auto 14px; }
.calc-summary-sheet-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 6px; }

.table-wrap th:first-child, .table-wrap td:first-child { white-space: nowrap; }

/* Gated pages (body[data-requires-auth]) show their real content BLURRED
   rather than hidden — a standard, deliberate paywall pattern (the visitor
   sees there's something real here worth unlocking, not a placeholder),
   and it's what the lock/upgrade popup below (see assets/auth.js's
   showSignInLock()/showUpgradeLock()) sits on top of. The popup itself
   provides the "something is happening" read instead of a skeleton.
   pointer-events is disabled here too (not just left to the popup's own
   overlay) because enforceGate() needs a network round-trip
   (refreshProfile(), plus getSession()+checkEntitlement() on plan-gated
   pages) before the overlay/redirect exists at all — during that window
   the blurred content was previously still fully clickable, letting a
   signed-out visitor click straight through to a real card/link before
   the lock or redirect ever appeared (bug, 2026-09-16: reported via an
   insights-article calculator CTA -> "All calculators" back-link ->
   landed on the blurred, still-live dashboard). Un-blurs and re-enables
   interaction smoothly the moment the attribute is removed (visitor turns
   out to be entitled); stays blurred and inert behind the overlay
   otherwise, for as long as the requirement isn't met. */
.page, .app-shell { transition: filter 0.18s var(--ease); }
body[data-requires-auth] .page,
body[data-requires-auth] .app-shell { filter: blur(4px); pointer-events: none; }

/* Generic loading-skeleton building blocks — used by calculators-app's
   Suspense fallback while a lazy-loaded calculator's own JS chunk is still
   downloading (see calculators-app/src/shared/components/RouteSkeleton.jsx)
   rather than for the auth gate above. That component sets its own inline
   display:block, so no body[data-requires-auth] trigger rule is needed
   here. */
.gate-skeleton { display: none; }
.gate-skeleton .sk-block {
  border-radius: var(--radius); margin-bottom: 18px;
  background: linear-gradient(100deg, var(--em-xlight) 8%, #fff 28%, var(--em-xlight) 48%);
  background-size: 250% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.gate-skeleton .sk-bar { height: 14px; border-radius: 999px; max-width: 260px; }
.gate-skeleton .sk-hero { height: 132px; }
.gate-skeleton .sk-card { height: 220px; }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }

/* Reused by calculators-app for its route-level Suspense fallback and by
   any page-content entrance once real data is ready to show — same easing
   token as everything else in this file, not a one-off. */
.page-enter { animation: fadeUp 0.2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .gate-skeleton .sk-block { animation: none; background: var(--em-xlight); }
  .page-enter { animation: none; }
  .page, .app-shell { transition: none; }
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--text); text-decoration: none;
  padding: 8px 16px; border: 2px solid var(--text); border-radius: 999px;
  background: #fff; box-shadow: 2px 2px 0 var(--text); margin-bottom: 22px;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}
.back-link:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--text); background: var(--em-xlight); }

.back-link-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.back-link-row .back-link { margin-bottom: 0; }
.pdf-btn { display: inline-flex; align-items: center; gap: 7px; }

/* Client picker above a calculator (paid accounts). Never part of a PDF. */
.client-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 18px;
  padding: 10px 14px; background: var(--bg2); border: 2px solid var(--text); border-radius: 14px; font-size: 13.5px;
}
.client-bar label { font-weight: 700; }
.client-bar select {
  font-family: inherit; font-size: 14px; padding: 7px 10px; border: 2px solid var(--text); border-radius: 10px;
  background: #fff; color: var(--text); min-height: 38px; max-width: 100%;
}
.client-bar-status { color: var(--text-muted); flex: 1; min-width: 160px; }
.client-bar a { font-weight: 700; color: var(--text); }
.client-bar-status.is-nudge { color: var(--text); font-weight: 700; }
.client-pdf-msg { background: var(--sw-mint); border-color: var(--sw-green); }
.client-pdf-msg.is-error { background: var(--yellow-light); border-color: var(--yellow); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tool-header { margin-bottom: 26px; }
.tool-header h1 {
  font-size: clamp(24px, 4vw, 30px); font-weight: 800; margin: 0 0 8px;
  letter-spacing: var(--track-display); color: var(--text);
}
.tool-header p { margin: 0; color: var(--text-muted); font-size: 15px; max-width: 640px; line-height: 1.6; }
.eyebrow {
  display: inline-block; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 11px;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--em-dark); background: var(--em-xlight); border: 2px solid var(--em);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 12px;
}

.client-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 22px; }
.client-row .field { flex: 1; min-width: 220px; max-width: 320px; }

.card {
  background: var(--card); border: 2px solid var(--text); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--text); padding: 24px 26px; margin-bottom: 22px;
}
.card.clay-green { box-shadow: 5px 5px 0 var(--em); }
.card.clay-yellow { box-shadow: 5px 5px 0 var(--yellow); }
.card.clay-blue { box-shadow: 5px 5px 0 var(--blue); }
.card.clay-purple { box-shadow: 5px 5px 0 var(--purple); }
.card.clay-pink { box-shadow: 5px 5px 0 var(--pink); }
.card.clay-orange { box-shadow: 5px 5px 0 var(--orange); }

.card h2 {
  display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800;
  margin: 0 0 16px; letter-spacing: -0.1px; color: var(--text);
}
.card h2::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--em); border: 2px solid var(--text); flex: none;
}
.card.clay-yellow h2::before { background: var(--yellow); }
.card.clay-blue h2::before { background: var(--blue); }
.card.clay-purple h2::before { background: var(--purple); }
.card.clay-pink h2::before { background: var(--pink); }
.card.clay-orange h2::before { background: var(--orange); }

.card-head-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.card-head-row h2 { margin: 0; }
.card-head-row .grand-total { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 18px; font-weight: 800; color: var(--em-dark); }
.card-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.6; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; }

.field { display: flex; flex-direction: column; }
.field label {
  display: block; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px;
}

.field input[type="text"], .field input[type="number"], .field input[type="tel"],
.field input[type="email"], .field input[type="date"], .field input[type="url"], .field select {
  width: 100%; padding: 11px 14px; border: 2px solid var(--text); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text);
  background: #fff; text-align: right; box-shadow: 3px 3px 0 var(--text);
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease);
}
.field > input[type="text"], .field > input[type="number"], .field > input[type="tel"],
.field > input[type="email"], .field > input[type="date"], .field > input[type="url"], .field > select {
  margin-top: auto;
}
.field select { text-align: left; font-variant-numeric: normal; padding-right: 30px; }
.field input:hover, .field select:hover { box-shadow: 4px 3px 0 var(--text); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--em); box-shadow: 4px 4px 0 var(--em); transform: translate(-1px, -1px);
}
.field input:out-of-range { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.field input:out-of-range:focus { box-shadow: 4px 4px 0 var(--red); }

.field-row { display: flex; align-items: center; gap: 8px; }
.field-row label { margin-bottom: 0; flex: 1; }
.field-row .cs-select { flex: 1; margin-top: 0; }

.cs-select { position: relative; margin-top: auto; }
.cs-select select.cs-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cs-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border: 2px solid var(--text); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; font-weight: 500; color: var(--text); background: #fff;
  text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--text);
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease);
}
.cs-trigger:hover { box-shadow: 4px 3px 0 var(--text); }
.cs-select.is-open .cs-trigger, .cs-trigger:focus-visible {
  outline: none; border-color: var(--em); box-shadow: 4px 4px 0 var(--em); transform: translate(-1px, -1px);
}
.cs-trigger:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: 2px 2px 0 var(--text); transform: none; }
.cs-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger-arrow {
  flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(45deg) translateY(-2px); transition: transform 150ms var(--ease); margin-top: -3px;
}
.cs-select.is-open .cs-trigger-arrow { transform: rotate(-135deg) translateY(-1px); margin-top: 3px; }

.cs-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 264px;
  overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff;
  border: 2px solid var(--text); border-radius: var(--radius-sm); box-shadow: 4px 4px 0 var(--text); display: none;
}
.cs-select.is-open .cs-menu { display: block; animation: csMenuIn 130ms var(--ease); }
@keyframes csMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cs-option { padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--text); cursor: pointer; transition: background 100ms ease; }
.cs-option.is-active { background: var(--em-xlight); }
.cs-option.is-selected { background: var(--em-dark); color: #fff; font-weight: 700; }
.cs-option.is-selected.is-active { background: var(--em-dark); }
.cs-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .cs-menu, .cs-trigger-arrow { animation: none !important; transition: none !important; } }

.radio-group, .toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-group button, .toggle-group button {
  font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13px; padding: 9px 18px;
  border-radius: 999px; border: 2px solid var(--text); background: #fff; color: var(--text); cursor: pointer;
  box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.radio-group button:hover, .toggle-group button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.radio-group button.active, .toggle-group button.active { background: var(--em-dark); color: #fff; box-shadow: 3px 3px 0 var(--text); }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--text); background: #fff;
  font-size: 17px; font-family: inherit; cursor: pointer; color: var(--text); box-shadow: 2px 2px 0 var(--text);
  transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.stepper button:hover { background: var(--em-xlight); border-color: var(--em); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--em); }
.stepper output { min-width: 28px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 12px; border-bottom: 1.5px dashed rgba(26, 26, 46, 0.15); text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
thead th {
  color: var(--text-muted); font-weight: 700; font-size: 11px; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--text); background: transparent;
}
tfoot td { border-bottom: none; border-top: 2px solid var(--text); padding-top: 12px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

td input[type="number"], td input[type="text"] {
  min-width: 90px; width: 100%; padding: 7px 10px; border: 2px solid var(--text); border-radius: 8px;
  font-family: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text);
  background: #fff; text-align: right; box-shadow: 2px 2px 0 var(--text);
  transition: box-shadow 150ms var(--ease), border-color 150ms var(--ease);
}
td input[type="text"] { text-align: left; font-variant-numeric: normal; }
td input:focus { outline: none; border-color: var(--em); box-shadow: 2px 2px 0 var(--em); }
td input[type="text"].row-label { border-style: dashed; box-shadow: none; }
td select { padding: 6px 8px; border: 2px solid var(--text); border-radius: 8px; font-family: inherit; font-size: 13px; background: #fff; color: var(--text); }
td select:focus { outline: none; border-color: var(--em); }

.result-hero {
  position: relative; overflow: hidden; background: var(--em-dark); color: #fff; border: 2px solid var(--text);
  border-radius: var(--radius); padding: 26px 26px 24px; margin-bottom: 20px; box-shadow: 6px 6px 0 var(--text);
}
.result-hero .label {
  position: relative; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 12.5px; font-weight: 700;
  opacity: 0.95; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.result-hero .value {
  position: relative; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 34px; font-weight: 800;
  letter-spacing: var(--track-display); font-variant-numeric: tabular-nums;
}
.result-hero .sub { position: relative; font-size: 13.5px; opacity: 0.95; margin-top: 8px; }
.result-hero .stat-row { position: relative; display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.result-hero .stat { min-width: 120px; flex: 1; background: rgba(255, 255, 255, 0.14); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 10px 14px; }
.result-hero .stat .stat-label { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 11px; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.04em; }
.result-hero .stat .stat-value { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; }

.flag { border: 2px solid var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; font-weight: 500; margin-top: 12px; box-shadow: 3px 3px 0 var(--text); }
.flag.good { background: var(--sw-mint); color: #0b5c47; border-color: var(--sw-green); box-shadow: 3px 3px 0 var(--sw-green); }
.flag.warn { background: var(--yellow-light); color: #7a4a06; border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }
.flag.bad { background: var(--red-light); color: #8a1f18; border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; }
.pill.good { background: var(--sw-mint); color: var(--sw-green-btn); border-color: var(--sw-green); }
.pill.warn { background: var(--yellow-light); color: #92620a; border-color: var(--yellow); }
.pill.bad { background: var(--red-light); color: #b3261e; border-color: var(--red); }

.disclaimer { font-size: 11.5px; color: var(--text-muted); border-top: 2px dashed rgba(26, 26, 46, 0.15); padding-top: 16px; margin-top: 28px; }

/* Calculator utility button — plain class="btn", optionally "btn primary"
   / "btn ghost". Deliberately separate from section 4's .cta-* system. */
.actions { display: flex; gap: 10px; margin: 4px 0 18px; flex-wrap: wrap; }
.btn {
  padding: 10px 20px; border-radius: 999px; border: 2px solid var(--text); background: #fff;
  font-weight: 700; font-size: 13.5px; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; cursor: pointer;
  color: var(--text); box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}
.btn.primary { background: var(--em-dark); border-color: var(--text); color: #fff; box-shadow: 3px 3px 0 var(--text); }
.btn.primary:hover { box-shadow: 4px 4px 0 var(--text); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg); box-shadow: none; transform: none; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.btn:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--text); }
.add-row-btn { margin-top: 12px; padding: 8px 16px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--text); }
.add-row-btn:hover { box-shadow: 3px 3px 0 var(--text); }

.btn:focus-visible, .radio-group button:focus-visible, .toggle-group button:focus-visible,
.stepper button:focus-visible, .row-remove:focus-visible, .back-link:focus-visible {
  outline: 3px solid var(--purple); outline-offset: 2px;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.row-remove {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--text); background: #fff;
  color: var(--red); font-weight: 800; font-size: 12px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
.row-remove:hover { background: var(--red); color: #fff; transform: translate(-1px, -1px); }

.section-nav {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 2px 14px; margin: 0 0 20px; background: var(--bg); border-bottom: 2px solid var(--text);
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: none; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13px;
  padding: 9px 16px; min-height: 30px; display: inline-flex; align-items: center; border-radius: 999px;
  border: 2px solid var(--text); background: #fff; color: var(--text); text-decoration: none;
  white-space: nowrap; box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.section-nav a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.section-nav a.active { background: var(--em-dark); color: #fff; box-shadow: 3px 3px 0 var(--text); }
.section-nav a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

details.cat-block {
  border: 2px solid var(--cat-color, var(--text)); background: var(--cat-bg, #fff);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
details.cat-block:last-child { margin-bottom: 0; }
details.cat-block.cat-green  { --cat-color: var(--sw-green); --cat-bg: var(--sw-mint); }
details.cat-block.cat-yellow { --cat-color: var(--yellow); --cat-bg: var(--yellow-light); }
details.cat-block.cat-blue   { --cat-color: var(--blue);   --cat-bg: var(--blue-light); }
details.cat-block.cat-purple { --cat-color: var(--purple); --cat-bg: var(--purple-light); }
details.cat-block.cat-pink   { --cat-color: var(--pink);   --cat-bg: var(--pink-light); }
details.cat-block.cat-orange { --cat-color: var(--orange); --cat-bg: var(--orange-light); }
details.cat-block > summary.cat-head { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 8px; }
details.cat-block > summary.cat-head::-webkit-details-marker { display: none; }
details.cat-block > summary.cat-head:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.cat-head h3 { font-size: 12.5px; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--text); }
.cat-head .cat-total { font-size: 13px; font-weight: 800; color: var(--text-muted); }
.cat-head-right { display: flex; align-items: center; gap: 10px; flex: none; }
.chevron {
  width: 8px; height: 8px; border-right: 2px solid var(--cat-color, var(--text)); border-bottom: 2px solid var(--cat-color, var(--text));
  transform: rotate(45deg); transition: transform 150ms var(--ease); flex: none;
}
details.cat-block[open] > summary.cat-head .chevron { transform: rotate(-135deg); }
details.cat-block[open] > summary.cat-head { margin-bottom: 12px; }
details.cat-block .table-wrap { background: #fff; border-radius: 10px; padding: 2px 8px; }

.pdf-export-mode .client-bar, .pdf-export-mode .back-link-row, .pdf-export-mode .actions, .pdf-export-mode .section-nav,
.pdf-export-mode .row-remove, .pdf-export-mode .add-row-btn, .pdf-export-mode .stepper button,
.pdf-export-mode .cs-menu, .pdf-export-mode .cs-trigger-arrow, .pdf-export-mode #fullscreen-loader { display: none !important; }
.pdf-export-mode details.cat-block:not([open]) > :not(summary) { display: block !important; }
.pdf-export-mode .chevron { display: none !important; }
.pdf-export-mode .tool-layout { grid-template-columns: 1fr !important; }
.pdf-export-mode .tool-sidebar { position: static !important; }
.pdf-export-mode { overflow: hidden; }
.pdf-export-mode::after {
  content: "Preparing your PDF…"; position: fixed; inset: 0; z-index: 99999; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 17px; color: var(--text);
}

.chart-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.donut-wrap { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-center .dl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; }
.donut-center .dv { font-size: 15px; font-weight: 800; margin-top: 2px; }
.line-chart-wrap, .bar-chart-wrap { position: relative; width: 100%; height: 220px; }
.line-chart-wrap canvas, .bar-chart-wrap canvas { max-width: 100%; }
.legend-row { display: flex; justify-content: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); flex: none; }
.legend-dot.square { border-radius: 3px; }
@media (max-width: 640px) { .line-chart-wrap, .bar-chart-wrap { overflow-x: auto; } }

@media print {
  @page { margin: 18mm 20mm 18mm 18mm; }
  html { font-size: 15px; }
  .card { padding: 20px 22px; margin-bottom: 16px; border-width: 2.5px; box-shadow: 3px 3px 0 var(--text); }
  .card.clay-green { box-shadow: 3px 3px 0 var(--em); }
  .card.clay-yellow { box-shadow: 3px 3px 0 var(--yellow); }
  .card.clay-blue { box-shadow: 3px 3px 0 var(--blue); }
  .card.clay-purple { box-shadow: 3px 3px 0 var(--purple); }
  .card.clay-pink { box-shadow: 3px 3px 0 var(--pink); }
  .card.clay-orange { box-shadow: 3px 3px 0 var(--orange); }
  .result-hero { padding: 20px 22px 18px; margin-bottom: 16px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--text); }
  .result-hero .value { font-size: 27px; }
  .result-hero .stat { padding: 9px 12px; }
  .tool-header { margin-bottom: 18px; }
  .tool-header h1 { font-size: 23px; }
  .tool-header p { font-size: 13.5px; }
  .card-sub { font-size: 12.5px; margin-bottom: 13px; }
  .field label { font-size: 11px; margin-bottom: 5px; }
  .field input, .field select, .cs-trigger { padding: 9px 12px; font-size: 13.5px; border-width: 2px; box-shadow: 2px 2px 0 var(--text); }
  .grid { gap: 12px 14px; }
  .radio-group button, .toggle-group button { padding: 7px 14px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--text); }
  .radio-group button.active, .toggle-group button.active { box-shadow: 2px 2px 0 var(--text); }
  .flag { padding: 9px 13px; font-size: 13px; }
  .flag.good { box-shadow: 2px 2px 0 var(--sw-green); }
  .flag.warn { box-shadow: 2px 2px 0 var(--yellow); }
  .flag.bad { box-shadow: 2px 2px 0 var(--red); }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .back-link-row, .back-link, .pdf-btn, .actions, .section-nav, .row-remove, .add-row-btn, .stepper button,
  .cs-menu, .cs-trigger-arrow, #fullscreen-loader { display: none !important; }
  .page { max-width: none; padding: 0; }
  details.cat-block:not([open]) > :not(summary) { display: block !important; }
  details.cat-block > summary.cat-head { cursor: default; }
  .chevron { display: none !important; }
  .card, .result-hero, .field, .client-row, .tool-header, details.cat-block, .flag, table, tr, .donut-wrap { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  .grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .radio-group button, .toggle-group button, .stepper button, .btn,
  .back-link, .section-nav a, details.cat-block > summary.cat-head, .chevron,
  .clay, .cta, .info-btn, .tool-desc { transition: none; }
}

@media (max-width: 640px) {
  .page { padding: 20px 16px 52px; }
  .result-hero .value { font-size: 27px; }
  .card { padding: 18px; box-shadow: 4px 4px 0 var(--text); }
  .card.clay-green { box-shadow: 4px 4px 0 var(--em); }
  .card.clay-yellow { box-shadow: 4px 4px 0 var(--yellow); }
  .card.clay-blue { box-shadow: 4px 4px 0 var(--blue); }
  .card.clay-purple { box-shadow: 4px 4px 0 var(--purple); }
  .card.clay-pink { box-shadow: 4px 4px 0 var(--pink); }
  .card.clay-orange { box-shadow: 4px 4px 0 var(--orange); }
  .table-wrap th:first-child, .table-wrap td:first-child { white-space: normal; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 8px; }
}

/* ════════════════════════════════════════════════════════
   3. PUBLIC-SITE NAVBAR (website/ pages)
════════════════════════════════════════════════════════ */
#navbar {
  position: fixed; top: 14px; left: 0; right: 0; margin-inline: auto; width: min(1200px, calc(100% - 28px)); z-index: 200;
  background: var(--sw-card); /* solid; glass version in the GLASS block at the end of this file */
  border: 2px solid var(--text); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--text);
  padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#navbar > a img { height: 44px !important; }
.nav-links { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: center; }
.nav-link {
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--text-muted);
  text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease; white-space: nowrap;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); font-weight: 700; border-bottom-color: var(--em); }
.nav-link:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
#navbar .cta-outline, #navbar .cta-primary { font-size: 14px; font-weight: 700; padding: 9px 22px; border: 2px solid var(--text); border-radius: 999px; box-shadow: 3px 3px 0 var(--text); }
#navbar .cta-outline { background: #fff; color: var(--text); }

.nav-hamburger {
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; border: 2px solid var(--text); border-radius: 50%; background: #fff;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.nav-hamburger span { display: block; width: 18px; height: 2.5px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-hamburger:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
#nav-panel { display: contents; }

@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  #nav-panel {
    display: none; position: fixed; left: 14px; right: 14px; z-index: 199;
    flex-direction: column; gap: 18px; background: #fff; border: 2px solid var(--text);
    border-radius: var(--radius); box-shadow: 4px 4px 0 var(--text); padding: 22px;
    max-height: calc(100vh - 100px); overflow-y: auto; animation: sw-panel-in var(--dur-slow) var(--ease-out-strong);
  }
  #nav-panel.open { display: flex; }
  #nav-panel .nav-links { flex-direction: column; align-items: flex-start; gap: 2px; }
  #nav-panel .nav-link { width: 100%; padding: 10px 8px; border-radius: 10px; }
  #nav-panel .nav-link:hover { background: var(--em-xlight); }
  #nav-panel .nav-actions { flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid #eee; }
  #nav-panel .nav-actions > a.cta-primary, #nav-panel .nav-actions > a.cta-outline { width: 100%; justify-content: center; }
  #nav-panel .nav-actions #sw-profile-widget { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  #nav-panel .nav-actions #sw-profile-widget > * { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 640px) {
  #navbar { padding: 10px 14px; top: 8px; width: calc(100% - 16px); }
  section { padding-left: 16px; padding-right: 16px; }
}

/* ════════════════════════════════════════════════════════
   4. CTA BUTTON SYSTEM (website/ + dashboard/ pages only —
      never used on calculator pages, see the note at the top of file)
════════════════════════════════════════════════════════ */
.cta-primary, .cta-outline, .cta-purple {
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 15px;
  border-radius: 9999px; padding: 13px 28px; border: 2px solid var(--text); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
}
.cta-primary { background: var(--em-dark); color: #fff; box-shadow: 4px 4px 0 var(--text); }
.cta-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--text); }
.cta-outline { background: #fff; color: var(--text); box-shadow: 4px 4px 0 var(--text); }
.cta-outline:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--text); background: var(--em-xlight); }
.cta-sm { padding: 9px 18px; font-size: 13px; }
.cta-primary:focus-visible, .cta-outline:focus-visible, .cta-purple:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.cta-primary:disabled, .cta-outline:disabled, .cta-purple:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ════════════════════════════════════════════════════════
   5. APP SHELL — sidebar + topbar (dashboard/ pages)
════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }
#mobile-drawer { display: none; }

.sidebar {
  width: 264px; flex-shrink: 0; display: flex; flex-direction: column; padding: 22px 18px; gap: 26px;
  position: sticky; top: 0; height: 100vh; border-right: 2px solid var(--text);
}
.sidebar-logo { display: flex; align-items: center; justify-content: center; }
.sidebar-logo img { height: 58px; width: auto; display: block; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif;
  font-weight: 700; font-size: 14.5px; color: var(--text); text-decoration: none;
  padding: 12px 14px; border-radius: 14px; border: 2px solid transparent; cursor: pointer;
  background: none; width: 100%; text-align: left;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.side-link svg { flex-shrink: 0; }
.side-link:hover { background: var(--em-xlight); }
.side-link.active { background: var(--em-dark); color: #fff; border-color: var(--text); box-shadow: 3px 3px 0 var(--text); }

/* Cross-document View Transitions (dashboard/*.html pages, gated behind
   <meta name="view-transition" content="same-origin"> in each page's head):
   naming the active sidebar pill makes the browser morph/slide it from its
   old position to its new one across the page navigation, instead of the
   default hard cut — this is what makes clicking a different sidebar item
   look like the highlight itself moves, rather than the whole screen
   flashing blank between two separately-loaded pages. Desktop sidebar only
   — the mobile drawer's own copy is closed (not visible) during a nav
   click, so animating it would be invisible and just risks a duplicate
   view-transition-name error if both existed as visible at once. */
.sidebar .side-link.active { view-transition-name: sidebar-active-pill; }
@media (prefers-reduced-motion: reduce) {
  .sidebar .side-link.active { view-transition-name: none; }
}
::view-transition-group(sidebar-active-pill) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.side-link:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.sidebar-spacer { flex: 1; }
.sidebar-illustration { position: relative; overflow: hidden; padding: 22px 20px 130px; display: flex; flex-direction: column; }
.sidebar-illustration h3 { font-size: 17px; font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
.sidebar-illustration .rule { width: 30px; height: 3px; background: var(--em); border-radius: 3px; margin-bottom: 10px; }
.sidebar-illustration p { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.sidebar-illustration img { position: absolute; left: 0; right: 0; bottom: -14px; width: 100%; height: 150px; object-fit: cover; object-position: center bottom; pointer-events: none; }

.main { flex: 1; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 18px 32px; border-bottom: 2px solid var(--text);
  background: var(--bg); position: sticky; top: 0; z-index: 50;
}
.search-wrap { position: relative; flex: 1; max-width: 420px; }
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#dash-search, #tool-search {
  width: 100%; font-family: inherit; font-size: 14.5px; padding: 12px 16px 12px 42px;
  border: 2px solid var(--text); border-radius: 9999px; background: #fff;
}
#dash-search:focus-visible, #tool-search:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.topbar-spacer { flex: 1; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--text); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background 120ms var(--ease), transform 150ms var(--ease);
}
.icon-btn:hover, .hamburger:hover { background: var(--em-xlight); }
.icon-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.hamburger {
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; border: 2px solid var(--text); border-radius: 50%; background: #fff;
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background 120ms var(--ease), transform 150ms var(--ease);
}
.hamburger span { display: block; width: 18px; height: 2.5px; background: var(--text); border-radius: 2px; }
.hamburger:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.content { padding: 20px 32px 48px; max-width: 1600px; }
.content > .section-label { margin-bottom: 8px; }
.content h1 { font-size: clamp(21px,2.4vw,26px); font-weight: 800; margin-bottom: 4px; }
.content > p.lede { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; max-width: 640px; }

/* Sidebar section grouping (Overview / Collaborate / Settings) — a plain
   uppercase label above a run of .side-link items, no border/background of
   its own so it reads as a divider, not another nav item. */
.side-nav-label {
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
  padding: 14px 14px 2px; margin-top: 4px;
}
.side-nav-label:first-child { margin-top: 0; }

/* Headline stat blocks used across the dashboard. */
.stat {
  background: #fff; border: 2px solid var(--text); border-radius: 14px; padding: 14px 16px;
}
.stat .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.stat .stat-value { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 24px; font-weight: 800; color: var(--text); }

/* Checkout review modal (pricing.html) — a
   wider, more generous variant of .success-modal-panel, built for a form +
   order-summary layout rather than a short centered message. Consistent
   16px vertical rhythm between every block, instead of each screen
   hand-tuning its own spacing. */
.checkout-modal-panel {
  width: 100%; max-width: 480px; background: #fff; border: 2px solid var(--text);
  border-radius: var(--radius); box-shadow: 8px 8px 0 var(--text);
  padding: 36px 34px 30px; text-align: left; max-height: calc(100vh - 40px); overflow-y: auto;
}
.checkout-modal-panel h2 { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.order-summary { border: 2px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; }
.order-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.order-summary-row + .order-summary-row { margin-top: 10px; }
.order-summary-row .os-label { color: var(--text-muted); }
.order-summary-row .os-value { font-weight: 700; color: var(--text); text-align: right; }
.order-summary-row.total { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--line); font-size: 15.5px; }
.order-summary-row.total .os-value { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 18px; font-weight: 800; }
.checkout-field-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.checkout-field-group .field { gap: 6px; }
.checkout-modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.checkout-modal-actions .btn, .checkout-modal-actions .cta-primary { flex: 1; justify-content: center; }
.checkout-modal-status { font-size: 13px; color: var(--text-muted); margin: 12px 0 16px; min-height: 1.2em; }
.checkout-modal-error { font-size: 13px; color: #b3261e; margin: -8px 0 16px; display: none; }

.welcome-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.welcome-row h1 { font-size: clamp(24px,3vw,32px); font-weight: 800; letter-spacing: var(--track-heading); margin-bottom: 6px; }
.welcome-row p { color: var(--text-muted); font-size: 14px; }
.quote-block { max-width: 280px; text-align: right; }
.quote-block p:first-child { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text); border-right: 2px solid var(--em); padding-right: 12px; }
.quote-block p:last-child { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; padding-right: 12px; }

.plan-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; margin-bottom: 20px; flex-wrap: wrap; }
.plan-card .plan-left { display: flex; align-items: center; gap: 16px; }
.plan-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.plan-title { font-size: 17px; font-weight: 800; }
.plan-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.plan-perks { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.plan-perks span { display: flex; align-items: center; gap: 8px; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.section-heading h2 { font-size: 18px; font-weight: 800; }
.section-heading a { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13px; color: var(--em-dark); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.section-heading a:hover { text-decoration: underline; }
.section-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1300px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card { display: flex; align-items: flex-start; gap: 12px; padding: 15px; text-decoration: none; color: var(--text); }
.cat-card .cat-icon { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-card h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.cat-card p { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.cat-card .chev { margin-left: auto; align-self: center; flex-shrink: 0; color: var(--text-muted); }

.cta-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; flex-wrap: wrap; }
.cta-banner h2 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.cta-banner p { font-size: 12.5px; color: var(--text-muted); max-width: 380px; }
.cta-banner .cta-illustration { position: absolute; right: 0; bottom: -10px; width: 220px; height: 110px; object-fit: cover; object-position: center bottom; opacity: 0.9; pointer-events: none; }
.cta-right { display: flex; align-items: center; gap: 20px; z-index: 1; }

/* Phase 2 — icon rail on tablet: same sidebar markup, just narrowed and
   text hidden via font-size:0 on the anonymous text run next to each
   icon (so icon-only works for every .side-link, including the Settings
   <button>, without touching 7 pages' duplicated nav markup to wrap each
   label in its own <span>). A small, deliberate CSS-only trade-off:
   flexbox's `gap` still reserves space for the (now-invisible) text's
   anonymous flex item, so the rail is a few px wider than the icon alone
   — judged worth it to avoid a 7-file markup change for this. */
@media (min-width: 900px) and (max-width: 1199px) {
  .sidebar { width: 76px; padding: 22px 10px; }
  .sidebar-logo img { height: 36px; }
  .side-nav-label { display: none; }
  .side-link { justify-content: center; font-size: 0; padding: 12px 10px; }
  .sidebar-illustration { display: none; }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  /* The hamburger is still in the DOM and still wired up (its click
     handler is what the bottom tab bar's "More" button triggers below)
     — just visually replaced by that bottom bar on mobile so there isn't
     a redundant second way to open the same drawer. */
  .hamburger { display: none; }
  #mobile-drawer.open { display: block; position: fixed; inset: 0; z-index: 300; }
  #mobile-drawer .drawer-backdrop { position: absolute; inset: 0; background: rgba(26,26,46,0.5); animation: ux-fade-in var(--dur-base) var(--ease-out-strong); }
  #mobile-drawer .drawer-panel {
    position: absolute; left: 0; top: 0; bottom: 0; width: 264px; max-width: 82vw; background: var(--bg);
    border-right: 2px solid var(--text); padding: 22px 18px; display: flex; flex-direction: column; gap: 26px; overflow-y: auto;
    animation: sw-drawer-in var(--dur-slow) var(--ease-out-strong);
  }
  .content { padding: 28px 18px 60px; }
  .topbar { padding: 14px 16px; }
  .search-wrap { max-width: none; }
  .cta-banner .cta-illustration { display: none; }
  /* Room for the fixed bottom tab bar so page content never sits under it. */
  body:has(.bottom-tab-bar) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Phase 2 — bottom tab bar (mobile only), injected by assets/app-shell.js.
   Supplements rather than replaces the drawer: "More" opens the exact
   same #mobile-drawer every page already has, via the existing
   #drawer-open button's click handler. */
.bottom-tab-bar {
  display: none;
}
@media (max-width: 900px) {
  .bottom-tab-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: #fff; border-top: 2px solid var(--text);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
}
.bottom-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 6px 2px; border: none; background: none; cursor: pointer; text-decoration: none;
  color: var(--text-muted); font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 10.5px; font-weight: 700; border-radius: 12px;
  transition: background 120ms var(--ease), color 120ms var(--ease), transform 150ms var(--ease);
}
.bottom-tab.active { color: var(--em-dark); }
.bottom-tab:focus-visible { outline: 3px solid var(--purple); outline-offset: -2px; }
@media (max-width: 900px) {
  body:has(.bottom-tab-bar) #ux-toast-region { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Below ~560px the topbar's hamburger + search + notification icon + profile
   widget (avatar circle + "Sign out" pill) no longer fit on one row — their
   combined minimum width (the search input alone won't shrink past its
   intrinsic ~180px) overflows any phone viewport. Wrapping the search bar
   onto its own second row keeps every control reachable without horizontal
   scroll, instead of everything just silently overflowing off-screen. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .search-wrap { order: 3; flex: 1 1 100%; max-width: none; }
  .welcome-row { flex-direction: column; }
  .quote-block { max-width: none; text-align: left; }
  .quote-block p:first-child, .quote-block p:last-child { border-right: none; padding-right: 0; }
  .plan-card { padding: 16px; }
  .cta-banner { padding: 20px; }
}

/* ════════════════════════════════════════════════════════
   6. TOOL CATALOG LISTING (website/ Free Tools + dashboard/calculators.html)
════════════════════════════════════════════════════════ */
.clay {
  background: var(--bg2); border: 2px solid var(--text); border-radius: var(--radius);
  box-shadow: 4px 4px 0px var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.clay-green  { background: var(--em-xlight);    border-color: var(--em);     box-shadow: 4px 4px 0 var(--em); }
/* Foundation category card: FIXED mint, never follows the brand theme */
.clay-foundation { background: var(--sw-mint); border-color: var(--sw-green); box-shadow: 4px 4px 0 var(--sw-green); }
.clay-purple { background: var(--purple-light); border-color: var(--purple); box-shadow: 4px 4px 0 var(--purple); }
.clay-blue   { background: var(--blue-light);   border-color: var(--blue);   box-shadow: 4px 4px 0 var(--blue); }
.clay-pink   { background: var(--pink-light);   border-color: var(--pink);   box-shadow: 4px 4px 0 var(--pink); }
.clay-orange { background: var(--orange-light); border-color: var(--orange); box-shadow: 4px 4px 0 var(--orange); }
.clay-yellow { background: var(--yellow-light); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--yellow); }

/* Compact horizontal category filter — same pill-nav pattern as
   .section-nav (sticky tab bar used elsewhere), but toggled with JS state
   instead of anchor navigation, and not sticky here since .topbar above it
   already occupies top:0 on this page. */
.cat-filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: 0 0 16px; scrollbar-width: none; }
.cat-filter-bar::-webkit-scrollbar { display: none; }
.cat-filter-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif;
  font-weight: 700; font-size: 13px; padding: 8px 14px; min-height: 36px; border-radius: 999px;
  border: 2px solid var(--text); background: var(--cat-bg, #fff); color: var(--text);
  white-space: nowrap; box-shadow: 3px 3px 0 var(--text); cursor: pointer;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.cat-filter-btn svg { flex: none; }
.cat-filter-btn .cat-filter-count { font-size: 11px; font-weight: 700; opacity: 0.65; }
.cat-filter-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.cat-filter-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.cat-filter-btn[aria-pressed="true"] { background: var(--em-dark); border-color: var(--em-dark); color: #fff; box-shadow: 3px 3px 0 var(--text); }
.cat-filter-btn[aria-pressed="true"] .cat-filter-count { opacity: 0.85; }

.cat-filter-status { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.cat-filter-status span { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 800; font-size: 15px; color: var(--text); }

.toolkit-empty { text-align: center; padding: 48px 20px; }
.toolkit-empty p { font-family: "Space Grotesk", SpaceGroteskFallback, sans-serif; font-weight: 800; font-size: 17px; color: var(--text); margin-bottom: 4px; }
.toolkit-empty .toolkit-empty-sub { font-family: inherit; font-weight: 500; font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; }

/* "All" view: one unified grid across every category instead of stacked
   per-category sections. Un-nests .cat-block/.tool-grid with display:contents
   so every .tool-card becomes a direct grid item of #toolkit-root itself —
   the cards keep their per-category clay color, just without the heading
   and per-category grid breaking the row up. A specific category filter
   removes this class and falls back to the normal single cat-block layout. */
#toolkit-root.toolkit-flat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#toolkit-root.toolkit-flat .cat-block { display: contents; }
#toolkit-root.toolkit-flat .cat-block[hidden] { display: none; }
#toolkit-root.toolkit-flat .cat-heading { display: none; }
#toolkit-root.toolkit-flat .tool-grid { display: contents; }
@media (max-width: 1400px) { #toolkit-root.toolkit-flat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { #toolkit-root.toolkit-flat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #toolkit-root.toolkit-flat { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .cat-filter-btn { padding: 7px 12px; font-size: 12.5px; }
  .cat-filter-status { flex-wrap: wrap; row-gap: 8px; }
}

.cat-block { margin-bottom: 26px; scroll-margin-top: 96px; }
.full-catalog-heading { text-align: center; margin: 0 0 32px; padding-top: 24px; border-top: 2px dashed rgba(26,26,46,0.12); }
.full-catalog-heading h2 { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.full-catalog-heading p { font-size: 14.5px; color: var(--text-muted); }
.cat-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; cursor: pointer; width: fit-content; }
.cat-heading .cat-icon { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.cat-heading h2 { font-size: 17px; font-weight: 800; color: var(--text); }
.cat-heading .cat-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.cat-heading .cat-hint { font-size: 11px; color: var(--em-dark); font-weight: 700; opacity: 0; transition: opacity 0.15s ease; margin-left: 2px; }
.cat-heading:hover .cat-hint { opacity: 1; }

/* align-items defaults to stretch (not overridden here — same fix already
   proven on .carousel-card below) so every card in a row matches the
   tallest one instead of each sitting at its own content height. Without
   it, a card whose teaser wraps to 2 lines ends up visibly taller than its
   row neighbors, so the row's card bottoms — and the "Subscription
   required" badges above them — don't line up. */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1400px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: 1fr; } }
.cat-heading:hover + .tool-grid .tool-desc { grid-template-rows: 1fr; opacity: 1; }
.cat-heading:hover + .tool-grid .tool-desc-inner::before { margin-top: 14px; }

.tool-card { padding: 16px; cursor: pointer; position: relative; user-select: none; min-height: 128px; display: flex; flex-direction: column; }
.tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tool-card .tool-icon { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--text); display: flex; align-items: center; justify-content: center; flex: none; background: #fff; }
.info-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--text); background: #fff; color: var(--text-muted);
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 800; font-size: 12px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.info-btn:hover, .tool-card.expanded .info-btn { background: var(--text); color: #fff; }
.info-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.favourite-btn[aria-pressed="true"] { background: #fef3c7; border-color: #d97706; color: #b45309; }
.favourite-btn[aria-pressed="true"]:hover { background: #fde68a; }
mark.tool-match-highlight { background: var(--em-light); color: var(--text); border-radius: 3px; padding: 0 1px; }

.tool-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tool-teaser { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; flex: 1; }
.tool-lock-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--purple); background: var(--purple-light); border: 1.5px solid var(--purple);
  border-radius: 9999px; padding: 3px 9px; margin-bottom: 6px; width: fit-content;
}
.tool-card.is-locked .cta-primary { background: var(--purple); box-shadow: 4px 4px 0 #5b21b6; }
.tool-card.is-locked .cta-primary:hover { box-shadow: 6px 6px 0 #5b21b6; }

/* Grid-rows reveal: 0fr -> 1fr. The item must carry no padding or border of its own (they would not collapse),
   so the 10px gap, the dashed rule and the 6px tail are pseudo-elements inside it; the totals match the old
   margin 10 + border 2 + padding 10 / 6. */
.tool-desc { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.18s ease, opacity 0.15s ease; }
.tool-card:hover .tool-desc, .tool-card:focus-within .tool-desc, .tool-card.expanded .tool-desc { grid-template-rows: 1fr; opacity: 1; }
.tool-desc-inner { min-height: 0; overflow: hidden; }
.tool-desc-inner::before { content: ""; display: block; margin-top: 10px; padding-bottom: 10px; border-top: 2px dashed rgba(0,0,0,0.12); } /* padding, not margin: a margin here would collapse into the next paragraph's own top margin */
.tool-desc-inner::after { content: ""; display: block; height: 6px; }
.tool-desc p { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; }
.tool-desc a.cta-primary, .tool-desc a.cta-outline,
.tool-desc button.cta-primary, .tool-desc button.cta-outline { width: 100%; justify-content: center; }

.tool-card[hidden], .cat-block[hidden] { display: none; }

/* website/index.html's all-tools carousel: 2 fixed rows, horizontal
   scroll. Runs full-bleed (not capped to .container's 1200px) so the wide
   empty margins on a large screen actually get used — arrows float over
   the track's own edges instead of sitting in the unused space outside
   it, and a fade mask hints there's more to scroll past them. */
.carousel-wrap { position: relative; max-width: 1800px; margin: 0 auto; padding: 0 60px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 272px);
  grid-auto-columns: 280px; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 14px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Static cards, fixed height (no hover/click expand — that used to grow a
   card taller than its own grid row). Every card shows its full content —
   icon, title, badge, teaser, CTA — all the time. Row height above is sized
   for the worst case (badge present + a 2-line teaser) so the CTA button
   never gets clipped by overflow:hidden. */
.carousel-card {
  scroll-snap-align: start; min-width: 280px; padding: 16px;
  display: flex; flex-direction: column; cursor: default; overflow: hidden;
}
.carousel-card .tool-icon { margin-bottom: 8px; }
.carousel-card .tool-teaser { flex: 1; }
.carousel-card-cta { margin-top: 10px; flex-shrink: 0; }
.carousel-card-cta a, .carousel-card-cta button { width: 100%; justify-content: center; }
.carousel-fade {
  position: absolute; top: 0; bottom: 14px; width: 60px; pointer-events: none; z-index: 2;
}
.carousel-fade-left { left: 60px; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.carousel-fade-right { right: 60px; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--text); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 3px 3px 0 var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carousel-arrow-left { left: 0; }
.carousel-arrow-right { right: 0; }
.carousel-arrow:hover { transform: translateY(-50%) translate(-1px,-1px); box-shadow: 4px 4px 0 var(--text); }
.carousel-arrow:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
@media (max-width: 640px) {
  .carousel-wrap { padding: 0 16px; }
  .carousel-arrow, .carousel-fade { display: none; }
  .carousel-track { grid-auto-columns: 240px; -webkit-mask-image: none; mask-image: none; }
}

/* website/practice.html's "More on the way" placeholder card */
.coming-soon-card { padding: 18px; min-height: 168px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.7; border-style: dashed; }
.coming-soon-card h3 { font-size: 13px; color: var(--text-muted); font-weight: 700; }
.coming-soon-card p { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Neutral "sign in required" badge — website/index.html's Free Tools
   section only ever needs this (no free tool, open or with sign-in, requires payment);
   distinct from the purple .tool-lock-badge above, which is specifically
   the paid-plan-required state used on dashboard/calculators.html. */
.tool-lock-badge--signin {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); background: rgba(26,26,46,0.06);
  border-radius: 9999px; padding: 3px 9px; margin-bottom: 8px; width: fit-content;
}
.tool-gate-btn { width: 100%; justify-content: center; cursor: pointer; }

/* ════════════════════════════════════════════════════════
   7. MARKETING PAGE ONLY (website/index.html)
════════════════════════════════════════════════════════ */
/* Scoped to .clay.clay-<color> (both classes) — not bare .clay-<color> alone,
   since calculators reuse that same bare class name for unrelated category-
   color accents (.card.clay-blue etc., see section 2 above). A bare-class
   version of this rule used to match those calculator cards too: hovering
   one (unavoidable when opening a dropdown inside it) applied this
   translate() transform, which — having no z-index — still creates a new
   stacking context on an otherwise-static .card, letting a later, unrelated
   positioned sibling (e.g. .result-hero) render in front of that card's own
   open dropdown menu. Fixed 2026-09-14; do not re-broaden back to the bare
   class. */
.clay:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--text); }
.clay.clay-purple:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--purple); }
.clay.clay-yellow:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--yellow); }
.clay.clay-pink:hover   { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--pink); }
.clay.clay-blue:hover   { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--blue); }
.clay.clay-green:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--em); }
.clay.clay-foundation:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sw-green); }
.clay.clay-orange:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--orange); }
.clay-red    { background: var(--red-light); border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.clay.clay-red:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--red); }

.glass-dark {
  background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 2px solid rgba(255,255,255,0.18); color: #fff;
}

.cta-purple { background: var(--purple); color: #fff; box-shadow: 4px 4px 0 #5b21b6; }
.cta-purple:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #5b21b6; }

section { padding: 100px 24px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px;
  font-size: 12px; font-weight: 700; border: 2px solid currentColor; letter-spacing: 0.04em; text-transform: uppercase;
}

.shape { position: absolute; border-radius: 50%; pointer-events: none; }
@keyframes float { 0%,100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-12px) rotate(1.5deg); } 66% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-2deg); } }
@keyframes squiggle { 0%,100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(5deg) scale(1.02); } 75% { transform: rotate(-5deg) scale(0.98); } }
.float-a { animation: float  6s ease-in-out infinite; }
.float-b { animation: floatB 7s ease-in-out 1s infinite; }
.float-c { animation: float  5s ease-in-out 2.5s infinite; }
@media (prefers-reduced-motion: reduce) { .shape { animation: none !important; } }

#sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--em); border-top: 2px solid var(--em-dark);
  padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 14px;
  transform: translateY(100%); transition: transform 0.22s var(--ease); flex-wrap: wrap;
}
#sticky-bar.visible { transform: translateY(0); }

.vision-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.vision-node { padding: 14px 22px; border-radius: 9999px; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 14px; text-align: center; }
.vision-node--brand { background: var(--em-dark); color: #fff; border: 2px solid var(--em); }
.vision-arrow { color: var(--em-light); font-size: 20px; font-weight: 700; }
.vision-arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vision-arrow-stack .vision-arrow { font-size: 24px; line-height: 1; }
.vision-arrow-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-visual { display: none !important; }
  section { padding: 70px 20px; }
  #sticky-bar { flex-direction: column; gap: 8px; padding: 12px; }
  .vision-flow { flex-direction: column; }
  .vision-arrow-stack { flex-direction: row; gap: 8px; }
  .vision-arrow-stack .vision-arrow { transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  section { padding: 56px 16px; }
  #navbar { padding: 10px 12px; top: 8px; width: calc(100% - 16px); gap: 6px; }
  #hero .shape { display: none !important; }
  .clay { padding: 20px 16px; }
  h2 { font-size: clamp(22px, 6vw, 36px) !important; }
  h3 { font-size: clamp(17px, 5vw, 22px) !important; }
  footer { padding: 32px 16px !important; }
  footer > div { gap: 16px !important; }
}

/* The Framework: 8 Events of Life as one pyramid, foundation at the base, name inside each level.
   Sizes use container units (cqw) so the whole shape and its text scale together down to phones. */
.fw2-wrap { container-type: inline-size; max-width: 1000px; margin: 48px auto; }
.fw2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.fw2-row { position: relative; height: 10cqw; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: clamp(12px, 3cqw, 30px); line-height: 1.1; color: var(--text); }
.fw2-row::before { content: ""; position: absolute; inset: 0; background: var(--tier); clip-path: polygon(var(--l0) 0, var(--r0) 0, var(--r1) 100%, var(--l1) 100%); }
.fw2-row::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #fff; }
.fw2-row > span { position: relative; z-index: 1; white-space: nowrap; }
.fw2-apex { height: 30cqw; align-items: flex-end; padding-bottom: 1.6cqw; font-size: clamp(12px, 3.4cqw, 34px); }
.fw2-apex::after { display: none; }
.events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
.event-card { padding: 20px 16px; text-align: center; cursor: default; }
.event-num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--text); font-weight: 800; font-size: 13px; margin-bottom: 10px; background: #fff;
}
.event-card h4 { font-size: 14.5px; font-weight: 700; color: var(--text); }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-panel { padding: 28px; }
.compare-panel ul { list-style: none; }
.compare-panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; margin-bottom: 14px; }
.compare-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; margin-top: 1px; }

.home-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .home-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-pricing-grid { grid-template-columns: 1fr; } }
.home-price-card { padding: 22px 20px; text-align: center; }
.home-price-card .amt { font-family:'Space Grotesk', SpaceGroteskFallback,sans-serif; font-size: 26px; font-weight: 800; }
.home-price-card.featured { transform: scale(1.04); position: relative; }
.home-price-card.featured:hover { transform: scale(1.04) translate(-2px,-2px); }

/* ════════════════════════════════════════════════════════
   8. LOGIN PAGE ONLY (website/login.html)
   .login-card / .login-btn are deliberately prefixed — this page's own
   card/button geometry differs from section 2's calculator .card/.btn,
   so a bare name here would collide the same way section 4's did.
════════════════════════════════════════════════════════ */
body.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.logo-link { display: block; text-align: center; margin-bottom: 22px; text-decoration: none; }
.logo-link img { height: 52px; width: auto; }

.login-card {
  width: 100%; max-width: 420px; background: var(--bg2); border: 2px solid var(--text);
  border-radius: var(--radius); box-shadow: 6px 6px 0px var(--text); padding: 40px 34px;
}

h1.title { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 6px; }
p.subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 26px; }

.login-btn {
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 15px;
  border-radius: 9999px; padding: 13px 20px; border: 2px solid var(--text); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; text-decoration: none;
}
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.btn-google { background: #fff; color: var(--text); box-shadow: 3px 3px 0 var(--text); }
.btn-google:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--text); }
.btn-primary { background: var(--em-dark); color: #fff; box-shadow: 3px 3px 0 var(--text); }
.btn-primary:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--text); }
.login-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: #e5e2da; }
.divider span { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.method-tabs {
  display: flex; gap: 6px; padding: 6px; margin-bottom: 22px;
  background: var(--bg); border: 2px solid var(--text); border-radius: 9999px;
}
.method-tabs button {
  flex: 1; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 13.5px;
  padding: 10px 8px; border-radius: 9999px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.method-tabs button.active { background: var(--em-dark); color: #fff; }
.method-tabs button:not(.active):hover { color: var(--text); }
.method-tabs button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.login-card label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.login-card label span.field-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.login-card input[type="email"], .login-card input[type="text"], .login-card input[type="password"] {
  font-family: inherit; font-size: 16px; padding: 13px 16px; border: 2px solid var(--text); border-radius: 14px; width: 100%;
}
input#otp-code, input#signup-otp-code { text-align: center; letter-spacing: 0.3em; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 22px; }
.login-card input:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; }

.error-msg {
  display: none; font-size: 13px; font-weight: 600; color: #b3261e;
  background: var(--red-light); border: 2px solid var(--red); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.hint { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.hint a, .hint button.link { color: var(--text); font-weight: 700; text-decoration: underline; background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

.hint-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.btn-xs {
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 12px;
  padding: 8px 14px; border-radius: 9999px; border: 2px solid; cursor: pointer;
  white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.btn-xs:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.btn-xs-green { background: var(--em-xlight); color: var(--em-dark); border-color: var(--em); }
.btn-xs-green:hover { background: var(--em-dark); color: #fff; }
.btn-xs-purple { background: #ede9fe; color: #5b21b6; border-color: var(--purple); }
.btn-xs-purple:hover { background: var(--purple); color: #fff; }

[hidden] { display: none !important; }

.footer-links { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 20px; }
.footer-links a { color: inherit; text-decoration: underline; margin: 0 8px; }

.login-page .back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--text); text-decoration: none; margin-bottom: 18px;
  background: #fff; border: 2px solid var(--text); border-radius: 9999px;
  cursor: pointer; padding: 7px 14px 7px 10px; box-shadow: 2px 2px 0 var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-page .back-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--text); background: var(--bg); }
.login-page .back-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* Login layout: single column on mobile; on desktop a value panel beside the form
   so the form sits above the fold instead of under a stacked checklist. */
.login-shell { width: 100%; max-width: 420px; }
.login-aside { display: none; }
@media (min-width: 900px) {
  body.login-page { padding: 40px 32px; }
  .login-shell { max-width: 1000px; display: grid; grid-template-columns: 1fr 440px; column-gap: 72px; align-items: center; }
  .login-shell .logo-link { grid-column: 1 / -1; text-align: left; margin-bottom: 40px; }
  .login-shell .login-card { max-width: none; padding: 34px 34px 30px; }
  .login-aside { display: flex; flex-direction: column; gap: 32px; }
  .login-aside h2 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.08; letter-spacing: var(--track-heading); font-weight: 800; text-wrap: balance; }
  .login-aside ul { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; }
  .login-aside li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; line-height: 1.4; color: var(--text); }
  .login-aside li svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--em); color: var(--text); border: 2px solid var(--text); box-shadow: 2px 2px 0 var(--text); }
  #benefit-bullets { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   9. PRICING PAGE ONLY (website/pricing.html)
════════════════════════════════════════════════════════ */
.plan-toggle-wrap { margin: 0 auto 28px; width: fit-content; text-align: center; }
.toggle-caption { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--purple); }
.plan-toggle {
  display: flex; gap: 6px; padding: 6px; position: relative;
  background: var(--bg); border: 2px solid var(--text); border-radius: 9999px; margin: 0;
}
.plan-toggle-thumb {
  position: absolute; top: 6px; left: 0; bottom: 6px; z-index: 0;
  background: var(--em-dark); border-radius: 9999px; box-shadow: 2px 2px 0 var(--text);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), width 0.2s cubic-bezier(.4,0,.2,1);
}
.plan-toggle button {
  position: relative; z-index: 1; flex: 1; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 10px 8px; border-radius: 9999px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: color 0.15s ease; white-space: nowrap;
}
.plan-toggle button.active { color: #fff; }
.plan-toggle button:not(.active):hover { color: var(--text); }
.plan-toggle button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.plan-toggle button.recommended.active { box-shadow: 2px 2px 0 var(--purple); }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card { padding: 36px 32px; display: flex; flex-direction: column; }
.price-card .cta-primary, .price-card .cta-purple, .price-card .cta-outline { width: 100%; justify-content: center; }
.price-card .badge {
  display: inline-flex; align-self: flex-start; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: 9999px;
  margin-bottom: 16px; border: 2px solid;
}
.price-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.price-card .plan-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; min-height: 20px; }

.price-value { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-value .amount { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 44px; font-weight: 800; letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; }
.price-value .cadence { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.price-note { font-size: 12.5px; color: var(--em-dark); font-weight: 700; margin-bottom: 24px; min-height: 18px; }

.feature-list { list-style: none; margin: 0 0 28px; flex: 1; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-bottom: 12px; color: var(--text); }
.feature-list li .tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--em); color: var(--em);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; margin-top: 1px;
}
.price-card.lifetime .feature-list li .tick { border-color: var(--purple); color: var(--purple); }

.fine-print { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 28px; }
.fine-print a { color: var(--em-dark); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .plan-toggle button { transition: none; } }
@media (max-width: 640px) { .price-card { padding: 28px 22px; } }

/* Payment success modal — shown once right after checkout completes. */
.success-modal-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(26,26,46,0.6); backdrop-filter: blur(4px); animation: ux-fade-in var(--dur-base) var(--ease-out-strong);
}
.success-modal-panel {
  position: relative; width: 100%; max-width: 440px; background: #fff; border: 2px solid var(--text);
  border-radius: var(--radius); box-shadow: 8px 8px 0 var(--text); padding: 40px 32px 32px; text-align: center;
  animation: ux-modal-in var(--dur-slow) var(--ease-out-strong);
}
.success-modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--text); background: #fff; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.success-modal-close:hover { background: var(--bg); }
.success-modal-close:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.success-modal-image { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto 18px; }
.success-modal-panel h2 { font-size: 26px; font-weight: 800; letter-spacing: var(--track-heading); margin: 4px 0 10px; }
.success-modal-lede { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
.success-modal-sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; }

/* Payment-processing overlay — shown the instant Razorpay's own popup
   closes on a successful charge, while verify-payment/entitlement/profile
   calls run before the success modal above can appear. Without this the
   page looked frozen for however long that chain took (server functions,
   Supabase round-trips) with zero indication anything was happening. */
.spinner {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--em-xlight); border-top-color: var(--em);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--em-xlight); } }

/* "Subscription Required" popup — dashboard/calculators.html, shown when a
   signed-in-but-unpaid visitor clicks a locked calculator card, instead of
   sending them straight to pricing.html (which used to mean leaving
   app.syncwealth.in entirely — see vercel.json's pricing.html exemption for
   why that link now stays on-domain). Reuses .success-modal-overlay/
   .success-modal-panel; the only new piece is the red/warning icon circle,
   using the same --red tokens as every other "bad" state in this file. */
.warn-modal-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--red-light);
  border: 2px solid var(--red); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}

/* ════════════════════════════════════════════════════════
   10. LEGAL PAGES ONLY (website/legal/*.html)
   .legal-card is prefixed (padding/shadow differ from section 2's
   calculator .card); .back-link reuses the shared pill-button style from
   section 2 rather than redefining a second, plainer version.
════════════════════════════════════════════════════════ */
.legal-page .container { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.legal-page h1 { font-size: clamp(28px, 5vw, 38px); font-weight: 800; margin-bottom: 6px; }
.legal-page .updated { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }
.legal-card { background: #fff; border: 2px solid var(--text); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--text); padding: 32px; margin-bottom: 24px; }
.legal-page h2 { font-size: 19px; font-weight: 800; margin: 28px 0 10px; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.legal-page p, .legal-page li { font-size: 15px; color: var(--text); margin-bottom: 12px; }
.legal-page ul { padding-left: 22px; margin-bottom: 12px; }
.legal-page a { color: var(--em-dark); font-weight: 600; }
.legal-disclaimer { background: var(--em-xlight); border: 2px solid var(--em-dark); border-radius: 14px; padding: 18px 20px; font-weight: 600; font-size: 14.5px; margin-bottom: 24px; }

#refund-form label, #refund-form span { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
#refund-form label span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
#refund-form input, #refund-form textarea {
  font-family: inherit; font-size: 15px; padding: 11px 14px; border: 2px solid var(--text); border-radius: 12px; width: 100%;
}
#refund-form textarea { resize: vertical; min-height: 90px; }
#refund-form .cta-primary, #signed-out-block .cta-outline { width: 100%; }
.msg { font-size: 13.5px; font-weight: 600; border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.msg.error { color: #b3261e; background: var(--red-light); border: 2px solid var(--red); }
.msg.success { color: var(--sw-green-btn); background: var(--sw-mint); border: 2px solid var(--sw-green-btn); }

/* ════════════════════════════════════════════════════════
   11. 8 EVENTS CALCULATOR — INFO MODAL
   (dashboard/calculators.html; the old dedicated landing page this used to
   link to, dashboard/planner/index.html, was removed in favor of this
   modal — everything a visitor needs to decide "start the plan" fits in
   one non-scrolling screen instead of a full page with its own navbar.)
════════════════════════════════════════════════════════ */
.step-num {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--text);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 14px; background: #fff; flex-shrink: 0;
}
.events-modal-panel { max-width: 860px; text-align: center; padding: 44px 40px 36px; }
.events-modal-panel h2 { font-size: 28px; margin: 6px 0 12px; }
.events-modal-panel .success-modal-lede { font-size: 15px; max-width: 620px; margin-left: auto; margin-right: auto; }
.events-modal-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 30px; text-align: left;
}
/* Reuses the same .clay/.clay-{color} clay-card system every other page
   already uses (see "8. CLAY / CARD SYSTEM"), cycling through the same
   colors the old planner/index.html step-grid used — grander/more colorful
   than a plain bordered chip, no new tokens invented. */
.events-step-chip { display: flex; align-items: center; gap: 10px; padding: 14px; }
.events-step-chip .step-num { width: 28px; height: 28px; font-size: 12px; background: rgba(255,255,255,0.6); }
.events-step-chip span { font-size: 13px; font-weight: 700; line-height: 1.25; }

/* ════════════════════════════════════════════════════════
   12. ADMIN PANEL (dashboard/admin/*.html)
   Reuses the app-shell/sidebar/topbar dashboard shell and the .clay/.card/
   table/cta-* system already defined above — nothing here is a new visual
   system, only the handful of layout patterns (a KPI stat grid, a
   left-aligned data table, status pills) that don't already exist.
════════════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 18px 20px; }
.stat-card .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.stat-card .stat-value { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-size: 28px; font-weight: 800; color: var(--text); }
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.admin-table-wrap { padding: 6px 20px; }
.admin-table-wrap table { font-size: 13.5px; }
.admin-table-wrap th, .admin-table-wrap td { text-align: left; font-variant-numeric: normal; }
.admin-table-wrap tbody tr { cursor: pointer; }
.admin-table-wrap tbody tr:hover td { background: var(--em-xlight); }

.admin-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; border-radius: 9999px; padding: 3px 9px; width: fit-content;
}
.admin-badge.is-paid { color: var(--em-dark); background: var(--em-xlight); border: 1.5px solid var(--em); }
.admin-badge.is-free { color: var(--text-muted); background: var(--bg2); border: 1.5px solid rgba(26,26,46,0.2); }
.admin-badge.is-admin-grant { color: var(--purple); background: var(--purple-light); border: 1.5px solid var(--purple); }

.admin-search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.admin-search-row input[type="search"] {
  flex: 1; min-width: 220px; font-family: inherit; font-size: 14px; padding: 10px 16px;
  border: 2px solid var(--text); border-radius: 9999px; background: #fff;
}
.admin-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-decoration: none; margin-bottom: 14px; }
.admin-back-link:hover { color: var(--text); }

.admin-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .admin-detail-grid { grid-template-columns: 1fr; } }
.admin-field-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1.5px dashed rgba(26,26,46,0.12); }
.admin-field-row:last-child { border-bottom: none; }
.admin-field-row .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.admin-field-row .value { font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 640px) { .events-modal-steps { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════════════
   7. UX REVAMP PHASE 1 — design-system tokens + primitives
   Added 2026-10-04, scoped to the public site / sign-in / onboarding /
   pricing surfaces rebuilt this phase (website/index.html, login.html,
   pricing.html, assets/auth.js's onboarding modal). Deliberately appended
   here rather than forked into a second stylesheet — this project already
   retired one fragmented design-tokens.css/components.css layer once (see
   CLAUDE.md); every token below is purely ADDITIVE, nothing above this
   line was renamed, removed, or had its value changed, so every existing
   calculator/dashboard page keeps rendering exactly as before.

   Dark mode: the rest of this stylesheet (every calculator, the app
   shell, admin panel) has never had a dark palette — adding one
   retroactively to ~30 files is a real, separate project, not something
   safe to do blindly inside a UI-polish pass. The tokens below give LIGHT
   + DARK values; dark is wired up (via prefers-color-scheme) only on the
   pages this phase actually touches. See docs/ux-revamp/phase-1-notes.md.
════════════════════════════════════════════════════════ */

/* (Phase 1 role / spacing / radius / elevation / type / motion tokens moved to assets/tokens.css) */

@media (prefers-color-scheme: dark) {
  [data-ux-revamp] {
    --role-bg: #14151a;
    --role-surface: #1d1f26;
    --role-text: #f3f3f0;
    --role-muted: #a2a4ad;
    --role-primary: #34d399;
    --role-primary-hover: #6ee7b7;
    --role-accent: #a78bfa;
    --role-success: #34d399;
    --role-warning: #fbbf24;
    --role-danger: #f87171;
    --role-focus: #a78bfa;
    --role-border: #e8e8e6;
  }
}

/* ---- Focus ring (every interactive primitive below uses this, never
   browser default outline — but never none either) ---- */
[data-ux-revamp] :focus-visible {
  outline: 3px solid var(--role-focus); outline-offset: 2px; border-radius: 4px;
}

/* ---- Touch targets — every button/control in this phase's new
   primitives is at least 44px tall, Fitts's-law minimum for a thumb on a
   phone, not just a desktop mouse pointer. ---- */
[data-ux-revamp] .ux-btn { min-height: 44px; }

/* ════════ Button ════════
   Extends the existing .cta-* system (never replaces it — calculator/
   dashboard buttons keep using .cta-primary/.cta-outline unchanged) with
   the variants/states this phase's new screens need. */
.ux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: var(--fs-sm);
  padding: 12px 22px; border-radius: var(--r-pill); border: 2px solid var(--role-border);
  cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ux-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--elev-1); }
.ux-btn:active { transform: translate(0, 0); box-shadow: none; }
.ux-btn:disabled, .ux-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.ux-btn-primary { background: var(--theme-fill); color: #fff; }
.ux-btn-secondary { background: #fff; color: var(--role-text); }
[data-ux-revamp] .ux-btn-secondary { background: var(--role-surface); }
.ux-btn-ghost { background: transparent; border-color: transparent; color: var(--role-text); box-shadow: none !important; }
.ux-btn-ghost:hover { background: var(--em-xlight); transform: none; }
.ux-btn-danger { background: #fff; color: var(--role-danger); border-color: var(--role-danger); }
.ux-btn-danger:hover { box-shadow: 3px 3px 0 var(--role-danger); }
.ux-btn-sm { padding: 9px 16px; font-size: var(--fs-xs); min-height: 38px; }
.ux-btn-lg { padding: 15px 28px; font-size: var(--fs-md); }
/* Loading: label stays in the DOM (readable by screen readers via
   aria-busy) but visually replaced by a spinner so button width doesn't jump. */
.ux-btn[aria-busy="true"] { color: transparent !important; position: relative; pointer-events: none; }
.ux-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: inherit;
  animation: ux-spin 0.7s linear infinite;
}
.ux-btn-primary[aria-busy="true"]::after { color: #fff; }
.ux-btn-secondary[aria-busy="true"]::after, .ux-btn-ghost[aria-busy="true"]::after { color: var(--role-text); }
@keyframes ux-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ux-btn[aria-busy="true"]::after { animation-duration: 1.4s; } }

/* ════════ Input ════════ label above, helper below, inline error replaces helper */
.ux-field { display: flex; flex-direction: column; gap: 6px; }
.ux-field label { font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: var(--fs-sm); color: var(--role-text); }
.ux-field input, .ux-field select {
  font-family: inherit; font-size: var(--fs-body); /* >=16px: no iOS zoom-on-focus */
  padding: 13px 16px; border: 2px solid var(--role-border); border-radius: 14px;
  background: var(--role-surface); color: var(--role-text); min-height: 44px;
}
.ux-field input:hover, .ux-field select:hover { transform: translate(-1px, -1px); box-shadow: var(--elev-1); }
.ux-field .ux-helper { font-size: var(--fs-xs); color: var(--role-muted); }
.ux-field.has-error input { border-color: var(--role-danger); }
.ux-field .ux-error { font-size: var(--fs-xs); color: var(--role-danger); font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* ════════ Badge (Free / Sign in / Pro) ════════ */
.ux-badge {
  display: inline-flex; align-items: center; gap: 4px; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif;
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--r-pill); border: 1.5px solid currentColor;
}
.ux-badge-free { color: var(--role-success); background: var(--sw-mint); }
.ux-badge-signin { color: var(--role-accent); background: var(--purple-light); }
.ux-badge-pro { color: #92400e; background: var(--yellow-light); }

/* ════════ Card ════════ thin alternative to the heavy .clay card, for
   dense lists (tool grids, FAQ, comparison) where every item having a
   5px offset shadow would be too loud. */
.ux-card {
  background: var(--role-surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-5); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ux-card.is-interactive { cursor: pointer; }
.ux-card.is-interactive:hover { box-shadow: var(--elev-1); transform: translateY(-2px); }

/* ════════ Tooltip ════════ */
.ux-tooltip { position: relative; display: inline-flex; }
.ux-tooltip [role="tooltip"] {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--role-text); color: var(--role-bg); font-size: var(--fs-xs); font-weight: 600;
  padding: 7px 11px; border-radius: 9px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 20;
}
.ux-tooltip:hover [role="tooltip"], .ux-tooltip:focus-within [role="tooltip"] { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════ Skeleton ════════ */
.ux-skeleton {
  background: linear-gradient(100deg, var(--em-xlight) 8%, #fff 28%, var(--em-xlight) 48%);
  background-size: 200% 100%; animation: ux-shimmer 1.6s ease-in-out infinite; border-radius: var(--r-sm);
}
@keyframes ux-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ux-skeleton { animation: none; background: var(--em-xlight); } }

/* ════════ EmptyState ════════ */
.ux-empty { text-align: center; padding: var(--space-10) var(--space-5); color: var(--role-muted); }
.ux-empty h3 { color: var(--role-text); font-size: var(--fs-md); margin-bottom: 6px; }
.ux-empty p { font-size: var(--fs-sm); max-width: 360px; margin: 0 auto 16px; }

/* ════════ Segmented toggle (generalizes the existing .plan-toggle pattern) ════════ */
.ux-segmented { display: inline-flex; position: relative; background: var(--em-xlight); border: 2px solid var(--role-border); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.ux-segmented button { position: relative; z-index: 1; background: none; border: none; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: var(--fs-sm); padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer; color: var(--role-text); min-height: 38px; transition: color var(--dur-base) var(--ease-out); }
.ux-segmented button.active { color: #fff; }
.ux-segmented-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; background: var(--role-primary); border-radius: var(--r-pill); transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); z-index: 0; }

/* ════════ Stepper ════════ */
.ux-stepper { display: inline-flex; align-items: center; border: 2px solid var(--role-border); border-radius: var(--r-pill); overflow: hidden; }
.ux-stepper button { width: 44px; height: 44px; border: none; background: var(--role-surface); font-size: 18px; font-weight: 800; cursor: pointer; color: var(--role-text); }
.ux-stepper button:hover:not(:disabled) { background: var(--em-xlight); }
.ux-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.ux-stepper .ux-stepper-value { min-width: 48px; height: 44px; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 800; font-size: var(--fs-body); border-left: 2px solid var(--role-border); border-right: 2px solid var(--role-border); }

/* ════════ Tabs ════════ */
.ux-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.ux-tabs button { background: none; border: none; font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: var(--fs-sm); padding: 12px 6px; color: var(--role-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; min-height: 44px; }
.ux-tabs button.active { color: var(--role-text); border-bottom-color: var(--role-primary); }

/* ════════ Toast (with Undo) ════════ */
#ux-toast-region { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.ux-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--role-text); color: var(--role-bg);
  border-radius: 14px; padding: 13px 16px; box-shadow: var(--elev-2); font-size: var(--fs-sm);
  animation: ux-toast-in var(--dur-slow) var(--ease-out);
}
.ux-toast-msg { flex: 1; }
.ux-toast button { background: none; border: none; color: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; padding: 4px; min-height: 36px; }
.ux-toast.is-danger { background: var(--role-danger); }
.ux-toast.is-success { background: var(--sw-green-btn); }
@keyframes ux-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ux-toast { animation: none; } }

/* ════════ Modal (becomes a bottom sheet under 640px) / Drawer ════════ */
.ux-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(26,26,46,0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  animation: ux-fade-in var(--dur-base) var(--ease-out);
}
@keyframes ux-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ux-modal {
  background: var(--role-surface); color: var(--role-text); border: 2px solid var(--role-border); border-radius: var(--r-lg);
  box-shadow: var(--elev-2); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; padding: var(--space-8);
  animation: ux-modal-in var(--dur-slow) var(--ease-out);
}
@keyframes ux-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Drawer: slides from the right on desktop, same bottom-sheet collapse on mobile */
.ux-drawer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(26,26,46,0.5); animation: ux-fade-in var(--dur-base) var(--ease-out); }
.ux-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--role-surface); color: var(--role-text);
  border-left: 2px solid var(--role-border); box-shadow: -6px 0 0 rgba(26,26,46,0.06); overflow-y: auto; padding: var(--space-6);
  animation: ux-drawer-in-right var(--dur-slow) var(--ease-out);
}
@keyframes ux-drawer-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (max-width: 640px) {
  .ux-overlay { align-items: flex-end; padding: 0; }
  .ux-modal {
    max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none;
    padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    animation: ux-sheet-in var(--dur-slow) var(--ease-out);
  }
  @keyframes ux-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .ux-drawer {
    top: auto; left: 0; right: 0; width: 100%; max-height: 92vh; border-left: none; border-top: 2px solid var(--role-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    animation: ux-sheet-in var(--dur-slow) var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ux-overlay, .ux-modal, .ux-drawer-overlay, .ux-drawer { animation: none; }
}
.ux-modal-handle, .ux-drawer-handle { display: none; }
@media (max-width: 640px) {
  .ux-modal-handle, .ux-drawer-handle { display: block; width: 40px; height: 4px; background: var(--line); border-radius: 9999px; margin: 0 auto 16px; }
}

/* ════════ FAQ accordion (website/pricing.html) ════════ */
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; text-align: left; padding: 16px 2px; cursor: pointer;
  font-family: 'Space Grotesk', SpaceGroteskFallback, sans-serif; font-weight: 700; font-size: 14.5px; color: var(--text); min-height: 44px;
}
.faq-chevron { flex: none; transition: transform var(--dur-base, 180ms) var(--ease-out, ease); color: var(--text-muted); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--em-dark); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base, 180ms) var(--ease-out, ease); }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
/* the grid item carries no vertical margin or padding (they would not collapse): the answer's old 1em top and bottom margin and 16px bottom padding are the two pseudo-elements */
.faq-a p { min-height: 0; overflow: hidden; margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.65; padding: 0 2px; }
.faq-a p::before { content: ""; display: block; height: 1em; }
.faq-a p::after { content: ""; display: block; height: calc(16px + 1em); }
@media (prefers-reduced-motion: reduce) { .faq-chevron, .faq-a { transition: none; } }

/* Seats sidebar link: hidden until the server says this account has Seats (assets/seats-link.js). */
[data-sw-seats-link][hidden] { display: none !important; }

/* Elements only the account owner should see; hidden by script for team members (a convenience, the database enforces access). */
[data-sw-owner-field][hidden], [data-sw-owner-only][hidden] { display: none !important; }

/* ════════ Pressed state + motion safety net (kept last so it wins ties with the :hover rules above) ════════
   Press = the control sinks 1px into its own shadow, like .btn:active. Placed on pointer-down, not on release. */
.cta-primary:active, .cta-outline:active, .cta-purple:active, .login-btn:active, .back-link:active,
.stepper button:active, .section-nav a:active, .cat-filter-btn:active, .btn-xs:active, .info-btn:active,
.login-page .back-btn:active {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--text); transition-duration: 80ms;
}
.tool-card.is-locked .cta-primary:active { box-shadow: 1px 1px 0 var(--sw-lav-text); }
#navbar .cta-primary:active, #navbar .cta-outline:active { box-shadow: 1px 1px 0 var(--text); }
.carousel-arrow:active { transform: translateY(-50%) translate(1px, 1px); box-shadow: 1px 1px 0 var(--text); transition-duration: 80ms; }
.radio-group button:active, .toggle-group button:active, .method-tabs button:active, .icon-btn:active, .nav-hamburger:active,
.bottom-tab:active { transform: translate(1px, 1px); transition-duration: 80ms; }
.bottom-tab:active { background: var(--em-xlight); }

/* Numbers that change while you look at them keep their width. */
.stat .stat-value, .card-head-row .grand-total, .order-summary-row .os-value, .calc-sticky-summary-value,
.cat-head .cat-total, .verdict-card .vv, .ratio-card .rvalue { font-variant-numeric: tabular-nums; }

/* prefers-reduced-motion: no keyframe motion, no sliding/lifting; colour and opacity changes stay so feedback still reads. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, opacity !important; scroll-behavior: auto !important;
  }
  /* the one deliberate exception: a busy button keeps a slow spinner so "working" is still visible */
  .ux-btn[aria-busy="true"]::after { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

/* ════════ GLASS: floating layers only ════════
   Header, bottom tab bar, calculator summary bar, phone menu panel, dashboard drawer, sign-in / upgrade panel, the homepage
   sample card (and its chip, fill only) and the default toast. Never on inputs, result cards, tables, pricing cards, charts,
   long text or anything exported to PDF. Each already has a solid fill above; this block swaps it for a translucent one and
   adds blur, and darkens the secondary text that sits directly on the glass (tokens --glass-muted / --glass-green-text).
   Never animate backdrop-filter. At most two glass layers are visible at once: where a third could appear, one drops its blur.
   Reduced transparency puts every solid fill and text colour back. */
/* auth.js mounts the gate twice, so two identical overlays stack: two dims (about 84% dark at 60% each) and two panels. Hide every
   overlay except the last one; the last is the one that was already on top, so what the visitor sees does not change. */
body .success-modal-overlay[data-sw-gate-overlay]:has(~ .success-modal-overlay[data-sw-gate-overlay]) { display: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #navbar { background: var(--glass-fill-header); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
  #navbar .nav-link:not(.active) { color: var(--glass-muted); }
  #navbar .nav-link:not(.active):hover { color: var(--text); }
  .bottom-tab-bar { background: var(--glass-fill-bar); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
  .bottom-tab { color: var(--glass-muted); }
  .bottom-tab.active { color: var(--glass-green-text); }
  .calc-sticky-summary-bar { background: var(--glass-fill-summary); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
  .calc-sticky-summary-label { color: var(--glass-muted); }
  /* sign-in / upgrade panel. The page behind it is already blurred (body[data-requires-auth] filter), and the scrim must not be a
     backdrop-filter itself or the panel would only see the scrim. So the scrim is a light dim plus two soft glows (brand green
     and a wider, paler mint) centred behind the panel: that is the colour the panel's glass blurs. */
  body .success-modal-overlay[data-sw-gate-overlay], body.calc-app .success-modal-overlay[data-sw-gate-overlay] {
    background:
      radial-gradient(circle at 50% 50%, var(--glass-glow-green), transparent min(320px, 80vw)),
      radial-gradient(circle at 50% 50%, var(--glass-glow-mint), transparent min(560px, 130vw)),
      var(--glass-scrim);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel { background: var(--glass-fill-panel); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: inset 0 0 0 1px var(--glass-edge), 8px 8px 0 var(--text); }
  /* the calculator gate keeps its lavender hard shadow (calc-theme.css, from the LockedTool board) */
  body.calc-app .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel { box-shadow: inset 0 0 0 1px var(--glass-edge), 8px 8px 0 var(--sw-lav-line); }
  /* the back link under the button carries an inline grey (auth.js), so this one needs !important */
  body .success-modal-overlay[data-sw-gate-overlay] .success-modal-sub, body .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel a:not(.cta-primary) { color: var(--glass-muted) !important; }
  /* the header sits under the scrim: its blur is dropped while the gate is open */
  body:has(.success-modal-overlay[data-sw-gate-overlay]) #navbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* default toast only: the success and danger toasts are brand-colour surfaces with white text and stay solid */
  .ux-toast:not(.is-danger):not(.is-success) { background: var(--glass-fill-ink); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
  @media (max-width: 900px) {
    /* phone menu: it is a child of the header, and a header with its own backdrop-filter is a backdrop root that would hide the
       page from it, so the header goes solid while the menu is open and the panel does the glass */
    body:has(#nav-panel.open) #navbar { background: var(--sw-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
    #nav-panel { background: var(--glass-fill-menu); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
    /* dashboard drawer over the dimmed page; the tab bar behind the scrim drops its blur so it is drawer plus toast at most */
    #mobile-drawer .drawer-panel { background: var(--glass-fill-menu); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
    #mobile-drawer .side-nav-label { color: var(--glass-muted); }
    body:has(#mobile-drawer.open) .bottom-tab-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}
/* The phone summary bar is part of the page, so a PDF export captures it: keep it exactly as it was before glass (solid white, original label colour). */
.pdf-export-mode .calc-sticky-summary-bar { background: var(--sw-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pdf-export-mode .calc-sticky-summary-label { color: var(--text-muted); }
@media (prefers-reduced-transparency: reduce) {
  #navbar, body:has(#nav-panel.open) #navbar { background: var(--sw-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #navbar .nav-link:not(.active) { color: var(--text-muted); }
  #navbar .nav-link:not(.active):hover { color: var(--text); }
  .bottom-tab-bar, .calc-sticky-summary-bar, #nav-panel, body .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel { background: var(--sw-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #mobile-drawer .drawer-panel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body .success-modal-overlay[data-sw-gate-overlay], body.calc-app .success-modal-overlay[data-sw-gate-overlay] { background: var(--glass-scrim-solid); }
  body .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel { box-shadow: 8px 8px 0 var(--text); }
  body.calc-app .success-modal-overlay[data-sw-gate-overlay] .success-modal-panel { box-shadow: 8px 8px 0 var(--sw-lav-line); }
  .bottom-tab { color: var(--text-muted); }
  .bottom-tab.active { color: var(--em-dark); }
  .calc-sticky-summary-label, #mobile-drawer .side-nav-label { color: var(--text-muted); }
  .ux-toast:not(.is-danger):not(.is-success) { background: var(--role-text); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ════════════════════════════════════════════════════════
   13. DAILY BRIEF (admin/brief.html; the preview is also the base for the advisor page)
   Uses only existing tokens, .clay / .pill / .flag / .msg / .field / .cta-*. Meaning is always carried by words
   (status chips, arrow + word), never by colour alone. All content is plain text drawn by assets/brief-admin.js.
════════════════════════════════════════════════════════ */
.brief-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brief-muted { color: var(--text-muted); font-size: var(--fs-sm); }
.brief-error { color: var(--sw-red-text); font-weight: 700; }
.pill.neutral { background: var(--sw-grey-100); color: var(--text); border-color: var(--sw-grey-line); }

.brief-upload { padding: 20px; margin-bottom: 26px; display: flex; flex-direction: column; gap: 14px; }
.brief-upload h2, .brief-preview h2 { font-size: var(--fs-lg); margin: 0; letter-spacing: var(--track-heading); }
.brief-upload textarea, .brief-confirm textarea {
  width: 100%; box-sizing: border-box; font: 16px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text);
  padding: 10px 12px; border: var(--sw-border) solid var(--text); border-radius: var(--sw-radius-sm); background: var(--sw-white); resize: vertical;
}
.brief-upload input[type="file"] { font: inherit; font-size: var(--fs-body); max-width: 100%; }
.brief-prompt-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.brief-prompt-row .field { min-width: 150px; }
.brief-prompt .section-sub { margin: 0; }
.brief-prompt #prompt-note:empty { display: none; }
.brief-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brief-linkbtn { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.brief-report { margin-top: 12px; border: var(--sw-border) solid var(--text); border-radius: var(--sw-radius-sm); padding: 12px 14px; background: var(--sw-white); }
.brief-report.is-error { border-color: var(--sw-red); box-shadow: 3px 3px 0 var(--sw-red); }
.brief-report.is-warn { border-color: var(--sw-amber-line); box-shadow: 3px 3px 0 var(--sw-amber-line); }
.brief-report h3 { font-size: var(--fs-sm); margin: 0 0 8px; }
.brief-report ul { margin: 0; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.5; }
.brief-report code { font-size: 12.5px; background: var(--sw-grey-100); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.brief-table tbody tr { cursor: default; }
.brief-table tbody tr:hover td { background: transparent; }
.brief-actions .cta-sm { margin: 2px 8px 2px 0; }

.brief-preview { margin-top: 30px; }
.brief-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.brief-preview-head p { margin: 4px 0 0; }
#preview-title:focus-visible { outline: 3px solid var(--role-focus); outline-offset: 4px; }
.brief-confirm { padding: 18px 20px; margin-bottom: 18px; background: var(--sw-amber); }
.brief-confirm h3 { margin: 0 0 6px; font-size: var(--fs-md); }
.brief-confirm p { margin: 0 0 10px; line-height: 1.5; }
.brief-check { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; }
.brief-check input { width: 22px; height: 22px; accent-color: var(--sw-green-btn); }
.brief-warnings { margin: 0 0 18px; }
.brief-warnings h3 { margin: 0 0 8px; font-size: var(--fs-body); }
.brief-warnings ul { margin: 0; padding-left: 20px; line-height: 1.5; }

.brief-block { padding: 18px 20px; margin-bottom: 18px; }
.brief-block h3 { margin: 0 0 10px; font-size: var(--fs-md); }
.brief-story { padding: 20px; margin-bottom: 22px; }
.brief-story header h3 { font-size: var(--fs-lg); line-height: 1.25; margin: 8px 0 10px; letter-spacing: var(--track-heading); overflow-wrap: anywhere; }
.brief-story-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brief-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1180px) { .brief-story-grid { grid-template-columns: minmax(0, 1fr) 300px; } }

.brief-sec { margin: 0 0 18px; }
.brief-sec h4, .brief-story-sources h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.brief-sec p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.brief-sec.has-warning { border-left: 4px solid var(--sw-amber-line); padding-left: 12px; }
.brief-sec-warn { margin-top: 6px; padding: 0; list-style: none; color: var(--sw-amber-text); font-size: var(--fs-sm); }
.brief-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.brief-facts, .brief-assets { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.brief-facts li { margin-bottom: 10px; }
.brief-assets li { padding: 8px 0; border-bottom: 1.5px dashed var(--sw-line); }
.brief-assets li:last-child { border-bottom: 0; }
.brief-dir { display: inline-block; font-weight: 700; padding: 1px 9px; border: 1.5px solid var(--text); border-radius: var(--sw-radius-pill); }

.brief-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border-radius: var(--sw-radius-pill); border: 1.5px solid var(--text); background: var(--sw-grey-100); color: var(--text); }
.brief-chip.is-confirmed, .brief-chip.is-level-high { background: var(--sw-mint); border-color: var(--sw-green-btn); color: var(--sw-green-text); }
.brief-chip.is-reported { background: var(--sw-blue); border-color: var(--sw-blue-line); color: var(--sw-blue-text); }
.brief-chip.is-disputed, .brief-chip.is-level-low { background: var(--sw-red-bg); border-color: var(--sw-red); color: var(--sw-red-text); }
.brief-chip.is-unconfirmed, .brief-chip.is-level-medium { background: var(--sw-amber); border-color: var(--sw-amber-border); color: var(--sw-amber-text); }
.brief-chip.is-use { background: var(--sw-lav); border-color: var(--sw-lav-line); color: var(--sw-lav-text); }

.brief-keynums { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.brief-keynums div { border: 1.5px solid var(--sw-grey-line); border-radius: var(--sw-radius-sm); padding: 8px 12px; }
.brief-keynums dt { font-size: 12px; color: var(--text-muted); }
.brief-keynums dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-keynums dd.brief-numdetail { margin-top: 2px; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.brief-numchg { white-space: nowrap; }
.brief-ask { border: 1.5px dashed var(--sw-mint-line); background: var(--sw-mint); border-radius: var(--sw-radius-sm); padding: 10px 12px; margin-bottom: 10px; }
.brief-ask p { margin: 0 0 6px; }
.brief-q { font-weight: 700; }

.brief-story-sources { background: var(--sw-grey-100); border: 1.5px solid var(--sw-grey-line); border-radius: var(--sw-radius-sm); padding: 14px; align-self: start; }
.brief-srclist { list-style: none; margin: 0; padding: 0; }
.brief-src { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--sw-line); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.brief-src:last-child { border-bottom: 0; }
.brief-src-id { flex: none; white-space: nowrap; align-self: flex-start; font-weight: 700; font-size: 12px; background: var(--sw-white); border: 1.5px solid var(--text); border-radius: 8px; padding: 0 7px; }
.brief-src-title { font-weight: 700; }
.brief-src a, .brief-confirm a, .brief-report a { color: var(--theme-text); text-decoration: underline; }
.brief-gloss { margin: 0; }
.brief-gloss dt { font-weight: 700; }
.brief-gloss dd { margin: 0 0 10px; line-height: 1.5; }

.brief-chart { margin: 0; }
.brief-chart-svg svg { display: block; width: 100%; max-width: 560px; height: auto; }
.brief-chart-svg svg.is-donut { max-width: 220px; }
.brief-chart figcaption { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }
.brief-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.brief-svg .axis { font-size: 11px; fill: var(--text-muted); }
.brief-svg .axis.end { text-anchor: end; }
.brief-svg .axis.mid { text-anchor: middle; }
.brief-svg .grid { stroke: var(--sw-line); stroke-width: 1; }
.brief-svg .zero { stroke: var(--text); stroke-width: 1.5; }
.brief-svg .line { fill: none; stroke: var(--sw-green); stroke-width: 2.5; stroke-linejoin: round; }
.brief-svg .dot { fill: var(--sw-white); stroke: var(--sw-green-btn); stroke-width: 2; }
.brief-svg .bar { fill: var(--sw-green); stroke: var(--text); stroke-width: 1.5; }
.brief-svg path[class^="tone-"] { stroke: var(--sw-white); stroke-width: 1.5; }
.brief-svg .tone-0 { fill: var(--sw-green); } .brief-svg .tone-1 { fill: var(--sw-blue-line); } .brief-svg .tone-2 { fill: var(--sw-amber-line); }
.brief-svg .tone-3 { fill: var(--sw-lav-line); } .brief-svg .tone-4 { fill: var(--sw-pink-line); } .brief-svg .tone-5 { fill: var(--sw-orange-line); }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--text); border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.swatch.tone-0 { background: var(--sw-green); } .swatch.tone-1 { background: var(--sw-blue-line); } .swatch.tone-2 { background: var(--sw-amber-line); }
.swatch.tone-3 { background: var(--sw-lav-line); } .swatch.tone-4 { background: var(--sw-pink-line); } .swatch.tone-5 { background: var(--sw-orange-line); }

@media (max-width: 640px) {
  /* the list becomes one card per brief, so the Preview / Publish buttons are never off-screen */
  .brief-table table, .brief-table tbody, .brief-table tr, .brief-table td { display: block; width: 100%; }
  .brief-table thead { display: none; }
  .brief-table tr { padding: 10px 0; border-bottom: 1.5px dashed var(--sw-line); }
  .brief-table tr:last-child { border-bottom: 0; }
  .brief-table td { display: flex; align-items: center; gap: 10px; padding: 3px 0; border: 0; white-space: normal; }
  .brief-table td[data-label]::before { content: attr(data-label); flex: none; min-width: 84px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
  .brief-table td.brief-actions { padding-top: 8px; flex-wrap: wrap; }
}
.brief-linkbtn:focus-visible, .brief-src a:focus-visible, .brief-upload textarea:focus-visible, .brief-confirm textarea:focus-visible,
.brief-upload input[type="file"]:focus-visible, .brief-check input:focus-visible { outline: 3px solid var(--role-focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .brief-story, .brief-block, .brief-upload, .brief-confirm { padding: 14px; }
  .brief-story header h3 { font-size: var(--fs-md); }
}

/* ════════════════════════════════════════════════════════
   14. NOTIFICATION BELL + DAILY BRIEF READER (dashboard pages)
   The bell is the existing .icon-btn in each dashboard topbar; assets/notifications.js adds the badge and the panel.
   Tokens only. Unread is shown by a dot AND by hidden text for screen readers, never by colour alone.
════════════════════════════════════════════════════════ */
.icon-btn[data-sw-bell] { position: relative; }
.notif-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sw-radius-pill);
  background: var(--theme-strong); color: var(--sw-white); border: 2px solid var(--text); font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.notif-badge[hidden] { display: none; }
.notif-panel {
  position: fixed; z-index: 1000; width: min(400px, calc(100vw - 16px)); max-height: min(72vh, 560px); display: flex; flex-direction: column;
  background: var(--sw-white); border: var(--sw-border) solid var(--text); border-radius: var(--sw-radius); box-shadow: var(--elev-2); overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: var(--sw-border) solid var(--text); }
.notif-head h2 { margin: 0; flex: 1; font-size: var(--fs-md); }
.notif-close {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: var(--sw-border) solid var(--text); background: var(--sw-white);
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.notif-close:hover { background: var(--em-xlight); }
.notif-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 60px; overscroll-behavior: contain; }
.notif-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-bottom: 1.5px dashed var(--sw-line); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.is-unread { background: var(--theme-tint); }
.notif-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; text-align: left; font: inherit; color: var(--text);
  background: none; border: 0; border-radius: var(--sw-radius-sm); cursor: pointer;
}
.notif-main:hover { background: var(--sw-grey-100); }
.notif-icon {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1.5px solid var(--text); background: var(--sw-white);
}
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.notif-body { font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.notif-time { font-size: 12px; color: var(--text-muted); }
.notif-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--theme-strong); border: 1.5px solid var(--text); }
.notif-open { flex: none; }
.notif-state { padding: 22px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.notif-foot { padding: 12px 16px; border-top: var(--sw-border) solid var(--text); font-size: var(--fs-sm); font-weight: 700; }
.notif-foot a { color: var(--theme-text); text-decoration: underline; }
.notif-main:focus-visible, .notif-close:focus-visible, .notif-foot a:focus-visible, .notif-open:focus-visible, .brief-back:focus-visible, .brief-row:focus-visible,
.notif-panel .brief-linkbtn:focus-visible { outline: 3px solid var(--role-focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .notif-panel { width: auto; max-height: calc(100vh - 170px); border-radius: var(--sw-radius-sm); } /* clear of the bottom tab bar */
}

/* reader page */
.brief-src-url { display: none; }
.brief-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.brief-back { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); text-decoration: none; }
.brief-back:hover { color: var(--text); text-decoration: underline; }
.brief-letterhead { margin: 0 0 18px; background: var(--sw-white); border: var(--sw-border) solid var(--text); border-radius: var(--sw-radius); box-shadow: var(--elev-1); overflow: hidden; }
.brief-lh-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.brief-lh-brand { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 40px; flex: 1 1 0; }
.brief-lh-sw { display: block; height: 30px; width: auto; max-width: 100%; flex: none; }
.brief-lh-logo { display: block; max-height: 40px; max-width: 150px; width: auto; height: auto; object-fit: contain; min-width: 0; }
.brief-lh-x { flex: none; font-size: 20px; line-height: 1; font-weight: 500; color: var(--text); }
.brief-lh-name { min-width: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--track-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a long name is cut with an ellipsis, as in the PDF; the full name is its title */
@media (max-width: 640px) { .brief-lh-sw { height: 24px; } .brief-lh-logo { max-height: 32px; max-width: 110px; } .brief-lh-x { font-size: 16px; } .brief-lh-name { font-size: var(--fs-body); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .brief-lh-brand { flex: 1 1 100%; } }
.brief-lh-doc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.brief-lh-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-text); }
.brief-lh-bar { height: 8px; background: var(--theme-strong); }
.brief-h1 { margin: 0 0 16px; font-size: var(--fs-xl); letter-spacing: var(--track-title); }
.brief-disclaimer { margin: 22px 0 0; padding-top: 14px; border-top: 1.5px dashed var(--sw-line); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.brief-notice { max-width: 560px; }
.brief-notice h1 { margin: 0 0 8px; font-size: var(--fs-lg); }
.brief-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.brief-row { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--text); text-decoration: none; }
.brief-row:hover { background: var(--em-xlight); }
.brief-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brief-row-headline { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

/* print = the interim PDF: A4, no app chrome, the branded header on top, no card split where it can be avoided, link addresses written out */
@media print {
  @page { size: A4; margin: 12mm; }
  html.brief-reader-html, body.brief-reader { background: var(--sw-white); }
  body.brief-reader .sidebar, body.brief-reader #mobile-drawer, body.brief-reader .topbar, body.brief-reader .bottom-tab-bar,
  body.brief-reader .brief-noprint, body.brief-reader .notif-panel, body.brief-reader #ux-toast-region { display: none !important; }
  body.brief-reader .app-shell { display: block; min-height: 0; }
  body.brief-reader .main { width: auto; }
  body.brief-reader .content { padding: 0; max-width: none; }
  body.brief-reader .brief-letterhead, body.brief-reader .brief-story, body.brief-reader .brief-block { box-shadow: none; }
  body.brief-reader .brief-story[data-tier="brief"], body.brief-reader .brief-block, body.brief-reader .brief-letterhead, body.brief-reader .brief-ask,
  body.brief-reader .brief-src, body.brief-reader .brief-sec, body.brief-reader .brief-chart, body.brief-reader .brief-keynums div,
  body.brief-reader .brief-facts li, body.brief-reader .brief-assets li { break-inside: avoid; page-break-inside: avoid; }
  /* A lead or major story is longer than a page, so it may continue on the next page (never inside a section); a short "in brief" story is kept whole. */
  body.brief-reader .brief-story { padding: 14px 16px; margin-bottom: 12px; }
  body.brief-reader .brief-story header { break-after: avoid; }
  body.brief-reader .brief-block { padding: 12px 16px; margin-bottom: 12px; }
  body.brief-reader .brief-story-grid { grid-template-columns: minmax(0, 1fr); }
  body.brief-reader .brief-src-url { display: block; font-size: 10.5px; color: var(--text-muted); overflow-wrap: anywhere; }
  body.brief-reader a { color: inherit; text-decoration: none; }
  body.brief-reader .brief-h1 { font-size: 22px; }
  body.brief-reader .brief-chart-svg svg { max-width: 360px; }
  body.brief-reader .brief-chart-svg svg.is-donut { max-width: 160px; }
}

/* Daily Brief PDF buttons (assets/brief-pdf-client.js): reader toolbar and bell panel */
.brief-toolbar-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdf-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdf-controls button[disabled] { opacity: .6; cursor: progress; }
.pdf-status { font-size: 12px; color: var(--text-muted); }
.pdf-status:empty { display: none; }
.pdf-controls.is-compact { flex: 1 1 100%; }
.notif-actions { flex: 1 1 100%; padding: 0 8px 8px 52px; }
.pdf-controls button:focus-visible, .pdf-status button:focus-visible { outline: 3px solid var(--role-focus); outline-offset: 2px; }