/* ============================================================================
   Walking Reset — design foundation
   Shared by the wizard and the report so both surfaces speak one language.
   Vibe: editorial luxury — warm paper, high-contrast serif display, sage accent.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Surface ---------------------------------------------------------- */
  --paper:        #FDFBF7;  /* page */
  --paper-sunk:   #F2EEE4;  /* recessed tray: the outer half of a bezel */
  --card:         #FFFFFF;  /* raised core: the inner half of a bezel */
  --card-quiet:   #FAF8F3;

  /* The plate a photograph is printed on, and the caption band under it. Always
     the darkest surface the palette has, in both themes — a photograph wants a
     dark mat whatever the room is like. It used to be --ink, which is a *light*
     colour after dark: the score page's plate came out a 309x550 sheet of
     #F5F0E8, the brightest thing on the page, in the theme whose whole reason
     for existing is not being a torch in the face. */
  --mat:          #1A1613;
  --mat-ink:      #FDFBF7;  /* 17.4:1 on mat */

  /* What covers the page while a dialog is up. Black in both themes, and heavier
     in the dark one, because a scrim means "the light behind this is off" and no
     wash of near-black over near-black can say that: the example sheet used a
     warm near-black at 42%, which took the dark page from 22 to 19.5 out of 255
     while the sheet itself sat at 22 — a modal with no visible edge. The colour
     has nowhere left to go after dark, so the opacity carries it instead. */
  --scrim:        rgba(0, 0, 0, 0.42);

  /* --- Ink -------------------------------------------------------------- */
  --ink:          #1A1613;  /* 17.4:1 on paper */
  --ink-2:        #4A423A;  /*  9.5:1 on paper — secondary prose */
  --ink-3:        #6E655A;  /*  5.5:1 on paper — the quietest text allowed */

  /* --- Accent ----------------------------------------------------------- */
  --sage:         #40614E;
  --sage-ink:     #35513F;
  --sage-soft:    #E7EDE7;
  --sage-line:    rgba(64, 97, 78, 0.22);

  /* --- Semantic (safety states carry real weight in this product) -------- */
  --amber:        #7A5314;
  --amber-soft:   #FBF1DF;
  --amber-line:   rgba(122, 83, 20, 0.22);
  --rose:         #8A2F2A;
  --rose-soft:    #FBEBE9;
  --rose-line:    rgba(138, 47, 42, 0.22);

  --hairline:     rgba(26, 22, 19, 0.09);
  --hairline-2:   rgba(26, 22, 19, 0.14);

  /* A select cannot host a pseudo-element, so its chevron is a background image
     with the ink burned into the URL — which is why it has to be a token. Left
     in one theme it measured 2.9:1 against the dark card, under the 3:1 that
     WCAG 1.4.11 asks of a control's own glyph, on fourteen controls in a row. */
  --select-chevron:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%236E655A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* --- Type ------------------------------------------------------------- */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", ui-sans-serif, system-ui, sans-serif;
  /* The access key is the one string a reader may have to copy by hand, and it
     cannot be recovered if they mistype it. Mono disambiguates 0/O and 1/l. */
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.85rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.16rem, 1.10rem + 0.30vw, 1.35rem);
  --step-2:  clamp(1.42rem, 1.30rem + 0.60vw, 1.80rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.30rem, 1.80rem + 2.40vw, 4.00rem);

  /* --- Rhythm ----------------------------------------------------------- */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 2.5rem);
  --bezel-pad: 7px;
  --r-outer: 28px;
  --r-inner: 21px;   /* --r-outer minus --bezel-pad: concentric curves */
  --r-ctl: 12px;
  --r-sm: 10px;      /* small blocks: inset notes, media frames */
  --r-xs: 6px;       /* the checkbox, and the focus ring's own corner */

  /* Offset + soft blur; elevation is declared once per layer, never as a
     hairline and a shadow on the same element. */
  --shadow-core:
    0 1px 2px rgba(38, 30, 22, 0.05),
    0 10px 24px -14px rgba(38, 30, 22, 0.18),
    0 30px 60px -42px rgba(38, 30, 22, 0.28);
  --shadow-lift:
    0 2px 4px rgba(38, 30, 22, 0.06),
    0 16px 32px -16px rgba(38, 30, 22, 0.22),
    0 44px 80px -50px rgba(38, 30, 22, 0.34);
  /* A pill's own step: tighter and more contained than a card's, because a
     button is small and its shadow has to read at that size. */
  --shadow-btn:
    0 1px 2px rgba(38, 30, 22, 0.14),
    0 10px 22px -14px rgba(38, 30, 22, 0.55);

  /* --- Motion ----------------------------------------------------------- */
  /* Two scales, one system: feedback is fast because speed reads as
     responsiveness; entrances are unhurried because they set the tone. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-fluid:  cubic-bezier(0.32, 0.72, 0.00, 1);

  --dur-press: 140ms;   /* a press must feel heard immediately */
  --dur-ui:    220ms;   /* hover, colour, small state changes */
  --dur-move:  320ms;   /* something travelling across the screen */
  --dur-enter: 620ms;   /* a section arriving */

  --reveal-shift: 18px;

  /* Lets block-size animate to `auto` when a report region opens. */
  interpolate-size: allow-keywords;
}

/* ============================================================================
   The same world after dark.

   Not a second brand and not a category default — this is the use scene. People
   film a walk at home and read the result on a phone, often in the evening, and
   a full-bleed sheet of warm paper at that hour is a torch in the face. The
   palette keeps its warmth: the paper turns to a warm near-black rather than a
   blue-grey, the sage stays the accent, and every ink stays above its light-mode
   ratio. Ratios below are measured, not estimated, and a test recomputes them
   from these hex values on every run.

   Two ways in, and they are deliberately not the same rule:

   - The system preference, for the reader who never touches a control. It is
     narrowed by :not([data-theme="light"]) so that choosing the light theme on a
     dark phone is actually honoured rather than immediately overruled.
   - An explicit choice, carried as data-theme on <html> by theme.js. Only ever
     written when someone picks one, so the default stays "whatever the phone is
     doing" and a reader with no JavaScript still gets a dark page after dark.

   Both live inside @media screen, which is what keeps the palette off paper.
   Without it, printing on a dark phone put #F5F0E8 text on the #fff sheet
   report.css forces — measured, an unreadable printout of the one artefact in
   this product people are most likely to print.

   The two blocks are byte-for-byte the same declarations, and a test compares
   them, because two hand-maintained copies of a palette are two palettes.
   ========================================================================== */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:        #16130F;  /* page */
    --paper-sunk:   #100E0B;  /* recessed tray */
    --card:         #221D18;  /* raised core */
    --card-quiet:   #1C1814;

    --mat:          #100E0B;
    --mat-ink:      #CBC2B4;  /* 10.9:1 on mat */
    --scrim:        rgba(0, 0, 0, 0.62);

    --ink:          #F5F0E8;  /* 16.3:1 on paper */
    --ink-2:        #CBC2B4;  /* 10.5:1 on paper — secondary prose */
    --ink-3:        #9C9386;  /*  6.1:1 on paper — the quietest text allowed */

    --select-chevron:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%239C9386' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --sage:         #8FB89B;
    --sage-ink:     #A6C9B0;
    --sage-soft:    #1D2A22;
    --sage-line:    rgba(143, 184, 155, 0.28);

    --amber:        #E0B05A;
    --amber-soft:   #2A2214;
    --amber-line:   rgba(224, 176, 90, 0.28);
    --rose:         #E79B92;
    --rose-soft:    #2C1916;
    --rose-line:    rgba(231, 155, 146, 0.28);

    --hairline:     rgba(245, 240, 232, 0.10);
    --hairline-2:   rgba(245, 240, 232, 0.17);

    /* Shadow does less work on a dark surface; the lift comes from the raised
       card being lighter than the page, so the shadow only anchors it. */
    --shadow-core:
      0 1px 2px rgba(0, 0, 0, 0.36),
      0 10px 24px -14px rgba(0, 0, 0, 0.52);
    --shadow-lift:
      0 2px 4px rgba(0, 0, 0, 0.42),
      0 16px 32px -16px rgba(0, 0, 0, 0.58);
    --shadow-btn:
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 10px 22px -14px rgba(0, 0, 0, 0.70);
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --paper:        #16130F;  /* page */
    --paper-sunk:   #100E0B;  /* recessed tray */
    --card:         #221D18;  /* raised core */
    --card-quiet:   #1C1814;

    --mat:          #100E0B;
    --mat-ink:      #CBC2B4;  /* 10.9:1 on mat */
    --scrim:        rgba(0, 0, 0, 0.62);

    --ink:          #F5F0E8;  /* 16.3:1 on paper */
    --ink-2:        #CBC2B4;  /* 10.5:1 on paper — secondary prose */
    --ink-3:        #9C9386;  /*  6.1:1 on paper — the quietest text allowed */

    --select-chevron:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%239C9386' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --sage:         #8FB89B;
    --sage-ink:     #A6C9B0;
    --sage-soft:    #1D2A22;
    --sage-line:    rgba(143, 184, 155, 0.28);

    --amber:        #E0B05A;
    --amber-soft:   #2A2214;
    --amber-line:   rgba(224, 176, 90, 0.28);
    --rose:         #E79B92;
    --rose-soft:    #2C1916;
    --rose-line:    rgba(231, 155, 146, 0.28);

    --hairline:     rgba(245, 240, 232, 0.10);
    --hairline-2:   rgba(245, 240, 232, 0.17);

    /* Shadow does less work on a dark surface; the lift comes from the raised
       card being lighter than the page, so the shadow only anchors it. */
    --shadow-core:
      0 1px 2px rgba(0, 0, 0, 0.36),
      0 10px 24px -14px rgba(0, 0, 0, 0.52);
    --shadow-lift:
      0 2px 4px rgba(0, 0, 0, 0.42),
      0 16px 32px -16px rgba(0, 0, 0, 0.58);
    --shadow-btn:
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 10px 22px -14px rgba(0, 0, 0, 0.70);
  }
}

/* The one thing a forced theme cannot reach is a capture plate: it is an
   <img>-referenced SVG, so the page's stylesheet stops at its edge and the file
   answers prefers-color-scheme for itself. What it does follow is the used
   color-scheme of the element embedding it — measured, an OS-light page whose
   :root is color-scheme: dark renders the plate at 40,41,34 instead of
   178,167,142 — which is why every block above declares color-scheme first and
   why that declaration is not decoration. */

/* ============================================================================
   Cross-document view transitions.
   The language switch is a real navigation (/en/ <-> /ru/), so without this
   the browser tears the page down and rebuilds it with no continuity at all.
   Pure CSS, no JS; browsers without support simply get today's instant swap.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-move);
  animation-timing-function: var(--ease-out);
}

/* The selected-language chip is the one element present in both documents, so
   it morphs between the two positions instead of cross-fading. */
::view-transition-group(lang-indicator) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-in-out);
}

/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

/* Prose columns hold a 65–75ch measure at every width. */
.prose { max-width: 68ch; }
.measure-tight { max-width: 54ch; }

a { color: var(--sage-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--sage-soft); color: var(--ink); }

/* --- Findings ----------------------------------------------------------- */
/* A finding is a row of the report: what was seen, what could not be determined,
   what the reader said. It lives here rather than in report.css because the
   landing page shows real report pages too, and two copies of this drift apart —
   which is the whole reason this file exists. */

.findings { list-style: none; margin: 0; padding: 0; }

.finding {
  padding: 0.7rem 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}
.finding + .finding { border-top: 1px solid var(--hairline); }
.finding--empty { color: var(--ink-3); font-style: italic; }
.provenance-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  background: var(--card-quiet);
  color: var(--ink-3);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.35;
  white-space: nowrap;
}


/* ============================================================================
   Double bezel — a machined tray holding a raised plate.
   The tray owns the hairline; the plate owns the shadow.
   ========================================================================== */

.bezel {
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-outer);
  padding: var(--bezel-pad);
}

.bezel > .core {
  background: var(--card);
  border-radius: var(--r-inner);
  /* The top bevel is a highlight of the page colour, not of white, so it reads
     as a lit edge in daylight and a soft one after dark. */
  box-shadow: var(--shadow-core), inset 0 1px 0 color-mix(in srgb, var(--paper) 90%, transparent);
  padding: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
}

/* ============================================================================
   Eyebrow — the wizard's step counter. Used as a system on sequenced steps,
   not sprinkled over every heading.
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--ink);
  /* Not literal white: the button surface is --ink, which is light after dark,
     and a hard white label would vanish on it. */
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.6rem 0.6rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-press) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out);
  /* Tighter than --shadow-core on purpose — a pill is not a card — but themed
     like it. Written out as a literal warm brown, the resting shadow stayed a
     daylight shadow after dark: a colour lighter than the page it fell on. */
  box-shadow: var(--shadow-btn);
}

/* Trailing glyph rides in its own circular well, flush to the inner padding. */
.btn .well {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  font-size: 0.8rem;
  line-height: 1;
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}

/* Hover is gated: on touch, a tap fires :hover and the state sticks after the
   finger lifts, which reads as a stuck button. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover  { box-shadow: var(--shadow-lift); }
  .btn:hover .well { transform: translate3d(2px, -1px, 0) scale(1.06); background: color-mix(in srgb, var(--paper) 22%, transparent); }
}

/* Press feedback stays ungated — it is the only confirmation a touch user gets. */
.btn:active:not([disabled]) { transform: scale(0.97); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink-2);
  box-shadow: none;
  border: 1px solid var(--hairline-2);
  padding: 0.55rem 1.1rem;
}
/* Mixed from --ink rather than pinned to its light-theme value. A literal
   rgba(26, 22, 19, …) is a dark wash, and a dark wash on a dark button is
   nothing at all: after dark the well under the arrow simply stopped existing. */
.btn--quiet .well { background: color-mix(in srgb, var(--ink) 7%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover { --btn-fg: var(--ink); background: var(--card-quiet); box-shadow: none; }
  .btn--quiet:hover .well { background: color-mix(in srgb, var(--ink) 12%, transparent); }
}

.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn[disabled]:hover .well { transform: none; }

/* ============================================================================
   Notices — escalation and safety copy must never read as fine print.
   ========================================================================== */

.notice {
  border-radius: var(--r-ctl);
  padding: 0.95rem 1.15rem;
  font-size: var(--step--1);
  line-height: 1.55;
  background: var(--sage-soft);
  color: var(--sage-ink);
  border: 1px solid var(--sage-line);
}
.notice strong { font-weight: 600; }
.notice--warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.notice--stop { background: var(--rose-soft);  color: var(--rose);  border-color: var(--rose-line); }
.notice + .notice { margin-top: 0.6rem; }

.notice__ru {
  display: block;
  margin-top: 0.4rem;
  opacity: 0.82;
}

/* ============================================================================
   Motion policy
   ========================================================================== */

/* Reduced motion means gentler, not none. Movement is what causes sickness, so
   travel and looping are removed while the fades that explain a change survive. */
@media (prefers-reduced-motion: reduce) {
  :root { --reveal-shift: 0px; }

  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .btn:active:not([disabled]),
  .btn:hover .well,
  .upload__pick:active { transform: none !important; }

  .progress__dot { animation: none !important; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* The jurisdictional refusal page. These live here rather than in a <style>
   block on the page itself because the site's CSP declares no style-src and
   falls back to default-src 'self', which does not permit an inline style
   element — the browser would drop the rules and render the refusal unstyled,
   which is the exact outcome the gate's placement below WhiteNoise exists to
   avoid. */
.geo { max-width: 34rem; margin: 0 auto; padding: 4rem 1.5rem; }
.geo h1 { margin: 0 0 1rem; }
.geo p { margin: 0 0 1rem; }
.geo__credit { font-size: 0.8rem; opacity: 0.7; margin-top: 3rem; }

/* Product-status notices: the unfinished-translation banner and the
   subscriptions-in-development line. Styled rather than left to inherit, for
   the reason the provenance chip taught: an unstyled notice reads as ordinary
   prose and stops being a notice. Deliberately quiet — this is a disclosure, not
   an alert, and it appears on every page of two of the three languages. */
.status-notice {
  margin: 0; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--amber-line);
  background: var(--amber-soft); color: var(--mat-ink);
  font-size: 0.875rem; text-align: center;
}
.plans-grid + .status-notice, .status-notice + .plans-grid { text-align: left; }