/* Survey app theme: "Bold Block, softened" (Rob, Nov 9, 2026), after the Pebble kit's public previews (its
   patterns, not its files). A calm grey page with white cards and soft shadows; one ink button; the client's
   color held for the welcome and ending blocks, the chosen answer, the progress and the charts; pastel tiles
   and soft status pills in results. Built on Bold Block (Nov 8), a step away from the studio's strict system. One place for color, type and shape, read by the respondent
   page, the results pages, the builder and the index. Light and dark are both selected sets, every pair
   checked for WCAG 2.2 AA (text 4.5:1, controls and chart fills 3:1). Values are plain hex on purpose:
   older phones have no color-mix(). A client's accent and everything derived from it (text on it, tint,
   hover, the dark-mode lift, the text shade) is applied at runtime by lib/format.mjs accentSet().
   Rule for new pairs: text tokens (--ink, --secondary, --meta, --accent-text, --good, --warning, --serious)
   clear 4.5:1 on --surface, --surface-2 and --accent-tint; --control clears 3:1 on the same three. --accent
   itself is a fill: text on it is --accent-ink, and as text it is only safe through --accent-text. */

@font-face { font-family: 'Bricolage Grotesque'; src: url('/public/fonts/bricolage-var.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/public/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --page: #F2F2F4;                /* what everything sits on */
  --surface: #FFFFFF; --surface-2: #EAEAEE; --press: #E4E4E8;   /* surface is the card */
  --ink: #0B0B0B; --secondary: #4A4A4A; --meta: #5E5E5E;
  --hairline: #E2E2E6;            /* decorative lines, never the only edge of a control */
  --control: #7D7E85;             /* rings and borders of inputs, choices and buttons: 3:1 on page, card and surface-2 */
  --btn: #141416; --btn-ink: #FFFFFF; --btn-hover: #2E2E33;     /* the one primary button, in ink */
  --shadow-card: 0 1px 2px rgba(20,20,22,.04), 0 6px 20px rgba(20,20,22,.05); --card-edge: #E2E2E6;   /* a faint edge as well as the shadow, so cards hold in sunlight */
  --sage: #E3F0E5; --sky: #E2EDF8; --lilac: #ECE7F8; --butter: #F6EED8; --rose: #FBE7E7;   /* tiles and status pills, ink text */
  /* the accent and its family; a survey's own color replaces all five at runtime */
  --accent: #1E4FB8; --accent-ink: #FFFFFF; --accent-tint: #EDF1F9; --accent-hover: #1A4399;
  --accent-text: #1E4FB8;         /* the accent as text: clears 4.5:1 on the surface, surface-2 and the tint */
  --data: var(--accent); --data-track: var(--accent-tint);   /* charts wear the client's color, one series */
  --good: #166534; --warning: #A34A08; --serious: #B91C1C;   /* each clears 4.5:1 on the page, the card, surface-2 and its own pastel */
  --shadow-1: none;
  --r-card: 22px; --r-row: 18px; --r-ctl: 999px; --r-field: 16px; --r-chip: 999px; --r-tile: 20px;
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif; --w-display: 800;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* names the pages already use */
  --soft: var(--surface-2); --live: var(--serious); --ok: var(--good); --sans: var(--font-body); --track: var(--data-track);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0D0D0D; --surface: #1A1A1D; --surface-2: #242428; --press: #2A2A2E;
    --ink: #F4F4F4; --secondary: #C9C9C9; --meta: #A3A3A8;
    --hairline: #33333A; --control: #7A7A80;   /* cards carry a hairline edge in dark instead of a shadow */
    --btn: #F4F4F4; --btn-ink: #141416; --btn-hover: #DADADD; --shadow-card: none; --card-edge: #3A3A42;
    --sage: #1C2B20; --sky: #19263A; --lilac: #251F38; --butter: #2E2716; --rose: #3A1D1D;
    --accent: #5479C9; --accent-ink: #0D0D0D; --accent-tint: #242B3C; --accent-hover: #6788CE; --accent-text: #7694D4;
    --good: #4ADE80; --warning: #FBBF24; --serious: #F87171;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0D0D0D; --surface: #1A1A1D; --surface-2: #242428; --press: #2A2A2E;
  --ink: #F4F4F4; --secondary: #C9C9C9; --meta: #A3A3A8;
  --hairline: #33333A; --control: #7A7A80; 
  --btn: #F4F4F4; --btn-ink: #141416; --btn-hover: #DADADD; --shadow-card: none; --card-edge: #3A3A42;
  --sage: #1C2B20; --sky: #19263A; --lilac: #251F38; --butter: #2E2716; --rose: #3A1D1D;
  --accent: #5479C9; --accent-ink: #0D0D0D; --accent-tint: #242B3C; --accent-hover: #6788CE; --accent-text: #7694D4;
  --good: #4ADE80; --warning: #FBBF24; --serious: #F87171;
}
/* paper prints light, whatever the screen was */
@media print {
  :root:not(#_) {
    color-scheme: light;
    --page: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F3F3; --press: #EFEFEF; --ink: #0B0B0B; --secondary: #4A4A4A; --meta: #5E5E5E;
    --hairline: #E2E2E2; --control: #7D7E85; --btn: #141416; --btn-ink: #FFFFFF; --shadow-card: none; --card-edge: #CCCCCC; --accent: #1E4FB8; --accent-ink: #FFFFFF; --accent-tint: #EDF1F9; --accent-text: #1E4FB8;
    --good: #166534; --warning: #A34A08; --serious: #B91C1C;
  }
}

/* ---- base ---- */
html { background: var(--page); }
body { background: var(--page); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: -0.01em; }
a { color: var(--accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* one focus ring everywhere: 3 px ink with a surface halo, so it reads on a filled button or a tinted card */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--surface); }
::selection { background: var(--accent-tint); }

/* ---- shared controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px; text-align: center; font: 600 1.0625rem/1.2 var(--font-body); color: var(--btn-ink); background: var(--btn); border: 2px solid var(--btn); border-radius: var(--r-ctl); cursor: pointer; text-decoration: none; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.ghost, .ghost { color: var(--ink); background: var(--surface); border: 1.5px solid var(--control); }
.btn.ghost:hover, .ghost:hover { background: var(--press); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
/* the filled number: "Question 4 of 11", in the survey's color */
.qnum { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .8125rem/1 var(--font-body); letter-spacing: .01em; }
/* status: a soft pill with a shape and a word, never color alone */
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%; justify-self: start; padding: 3px 10px; border-radius: 13px; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .8125rem; line-height: 1.3; }   /* wraps on a narrow screen (1.4.10); sits at its own width in a grid */
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.st.good { color: var(--good); background: var(--sage); } .st.warn { color: var(--warning); background: var(--butter); } .st.bad { color: var(--serious); background: var(--rose); }
/* a card: white on the grey page, a soft shadow in light, a hairline edge in dark */
.card { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.st.warn::before { border-radius: 2px; transform: rotate(45deg); } .st.bad::before { border-radius: 1px; }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 14px 0 2px; transition: transform 160ms var(--ease); }
.fold[open] > summary::before { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .btn, .qnum { forced-color-adjust: none; background: ButtonText; color: Canvas; border-color: ButtonText; }
  .card { border-color: CanvasText; }
  .st::before { background: CanvasText; }
}