/* ============================================================================
   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;

  /* --- 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);

  /* --- Type ------------------------------------------------------------- */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", ui-sans-serif, system-ui, sans-serif;

  --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;

  /* 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);

  /* --- 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;
}

/* ============================================================================
   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: 4px;
}

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

/* ============================================================================
   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);
  box-shadow: var(--shadow-core), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  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);
  --btn-fg: #FFFFFF;
  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);
  box-shadow: 0 1px 2px rgba(38, 30, 22, 0.14), 0 10px 22px -14px rgba(38, 30, 22, 0.55);
}

/* 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: rgba(255, 255, 255, 0.14);
  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: rgba(255, 255, 255, 0.22); }
}

/* 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;
}
.btn--quiet .well { background: rgba(26, 22, 19, 0.06); }

@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: rgba(26, 22, 19, 0.10); }
}

.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; }
}