/*
  Veyra: the assessment section, moved into the same room as the opening.
  ==========================================================================

  index.html only, and loaded after styles.css.

  "See where your inventory stands" was the last surface still standing on
  paper. Read after the cinematic opening, it broke the page in half: a dark
  product, then a white website about it.

  HOW THIS IS DONE, AND WHY IT IS SHORT

  The section is not restyled rule by rule. It was already built on tokens -
  60-odd rules that all resolve --surface, --surface-soft, --line, --text,
  --muted and --accent - so the ground is changed by redefining those tokens
  ON THE SECTION, and every descendant follows without a single overriding
  selector.

  What is left after that is only the work tokens cannot do:

      the environment      the atmosphere, arcs and mesh behind it
      the glass            panels that have to read as lit objects
      the ten segments     a progress indicator that did not exist
      print                putting the paper back, for the report

  The status hues are deliberately unchanged: --ok, --low and --out are
  already the dark-surface variants of green, amber and red. What moves is
  the accent, from emerald to the brand blue the hero is lit with, because
  this section now sits between sections that are.

  Motion budget: opacity and transform. Everything here stops under
  prefers-reduced-motion.
*/

/* ==========================================================================
   1. One room
   ========================================================================== */

.assessment-section {
  /* --- the accent, blue rather than emerald ---------------------------- */
  --accent: #5ecbff;
  --accent-strong: #3ea2d3;
  --accent-soft: rgba(94, 203, 255, 0.12);
  --primary: #1b87bd;
  --primary-deep: #13537a;

  /* --- grounds and type ------------------------------------------------ */
  --paper: #04070f;
  --paper-2: #04070f;
  --bg: #04070f;
  --surface: rgba(14, 24, 41, 0.72);
  --surface-soft: rgba(17, 29, 48, 0.58);
  --surface-strong: rgba(22, 38, 62, 0.8);
  --text: #eaf2fc;
  --muted: #94a8c4;
  --line: rgba(126, 196, 240, 0.16);
  --rule: rgba(126, 196, 240, 0.16);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);

  /* A dark-ground green; the paper one is a near-black on this. */
  --emerald-deep: #6ee7a0;

  position: relative;
  isolation: isolate;
  color: var(--text);
  border-top: 1px solid rgba(126, 196, 240, 0.1);
  background:
    radial-gradient(1200px 560px at 16% 0%, rgba(30, 112, 190, 0.17), transparent 68%),
    radial-gradient(1000px 640px at 92% 26%, rgba(18, 78, 148, 0.13), transparent 72%),
    radial-gradient(900px 500px at 50% 100%, rgba(22, 92, 160, 0.1), transparent 70%),
    #04070f;
  /*
    Deliberately NOT overflow: hidden, so a sticky descendant keeps the
    section as its containing block. The environment clips itself instead;
    see .sec-env.
  */
}

/* The shell has to sit above the environment, which is absolute. */
.assessment-section > .shell {
  position: relative;
  z-index: 1;
}

/* --- the environment ----------------------------------------------------- */

/*
  Decorative in full: aria-hidden in the markup, pointer-events: none here,
  so neither layer can be reached or clicked through.
*/
.sec-env {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
  The mesh. A 1px grid at a size large enough that it reads as a coordinate
  system rather than as a texture, masked so it only exists where the section
  is lit and never reaches an edge.
*/
.sec-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(126, 196, 240, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126, 196, 240, 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(72% 52% at 50% 16%, #000 8%, transparent 74%);
  mask-image: radial-gradient(72% 52% at 50% 16%, #000 8%, transparent 74%);
}

/*
  The arcs, as in the opening frame: circles far larger than the viewport,
  centred outside it, so only a shallow curve crosses the screen. All share
  the centre line, so they read as one room rather than as stray diagonals.
*/
.sec-arcs {
  position: absolute;
  left: 50%;
  top: 0;
  width: 190vmax;
  height: 190vmax;
  margin-left: -95vmax;
  overflow: visible;
  opacity: 0.85;
}

.sec-arcs circle {
  fill: none;
  stroke: rgba(126, 196, 240, 0.3);
  vector-effect: non-scaling-stroke;
}

/* Two degrees and back over two and a half minutes: about a pixel a second
   at this radius, which is felt rather than watched. */
.sec-arcs g {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: sec-sway 150s ease-in-out infinite alternate;
}

@keyframes sec-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

/* --- the section headings ------------------------------------------------ */

/*
  The step marker was a rule and a grey label on paper. On this ground it is
  a lit rule and a blue label - the same device the opening uses for
  INVENTORY, REIMAGINED.
*/
.assessment-section .step-index {
  border-top-color: rgba(126, 196, 240, 0.3);
  color: var(--accent);
}

.assessment-intro h2 {
  color: #f4f9ff;
  letter-spacing: -0.035em;
}

.assessment-intro p {
  color: var(--muted);
}

.assessment-privacy {
  color: rgba(148, 168, 196, 0.7);
}

/* ==========================================================================
   3. The assessment: a diagnostic, not a form
   ========================================================================== */

/*
  One translucent panel standing in the room, with the same corner marks as
  the product screen so the two read as parts of one instrument.
*/
.q-card,
.r-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(16, 28, 48, 0.78) 0%, rgba(9, 16, 29, 0.84) 100%);
  border: 1px solid rgba(126, 196, 240, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(190, 230, 255, 0.1),
    0 2px 8px rgba(2, 5, 12, 0.5),
    0 40px 90px -36px rgba(0, 0, 0, 0.9),
    0 0 90px -30px rgba(40, 140, 220, 0.35);
  backdrop-filter: blur(14px);
}

.q-card::before,
.r-card::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(126, 196, 240, 0.55);
  border-right: 0;
  border-bottom: 0;
  pointer-events: none;
}

.q-card::after,
.r-card::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(126, 196, 240, 0.55);
  border-left: 0;
  border-top: 0;
  pointer-events: none;
}

/* --- the ten segments ---------------------------------------------------- */

.q-progress-row {
  align-items: baseline;
}

/*
  The count, set as a reading: the question you are on at full weight, the
  ten it is out of stepped back. Tabular figures so 01 and 10 are the same
  width and the row does not shift as you go.
*/
.q-count {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 176, 208, 0.6);
  font-variant-numeric: tabular-nums;
}

.q-count b {
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--accent);
}

.q-time {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 176, 208, 0.45);
}

/*
  Ten segments, one per question, so the whole of the thing you are being
  asked to do is visible from the first screen. A single filling bar hides
  that; ten dashes state it.
*/
.q-steps {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-seg {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(126, 196, 240, 0.14);
  overflow: hidden;
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

/* Answered. */
.q-seg.is-done {
  background: rgba(94, 203, 255, 0.55);
}

/* The one you are on: brighter, and filling. */
.q-seg.is-live {
  background: rgba(94, 203, 255, 0.22);
  box-shadow: 0 0 12px rgba(56, 160, 235, 0.5);
}

.q-seg.is-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent), #bfe9ff);
  transform-origin: left;
  animation: sec-seg-fill 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sec-seg-fill {
  from { transform: scaleX(0); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}

/* --- the question itself -------------------------------------------------- */

.q-legend {
  color: #f4f9ff;
  letter-spacing: -0.02em;
}

.q-help {
  color: rgba(148, 176, 208, 0.72);
}

/*
  Each question arrives rather than appears. assessment.js rebuilds the card
  on every step, so this runs once per question with no state to manage.
*/
.q-body {
  animation: sec-step-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sec-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.q-option {
  background: rgba(17, 29, 48, 0.55);
  border-color: rgba(126, 196, 240, 0.16);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.q-option:hover {
  background: rgba(22, 38, 62, 0.7);
  border-color: rgba(126, 196, 240, 0.4);
  transform: translateX(2px);
}

.q-option.is-selected {
  background:
    linear-gradient(to right, rgba(94, 203, 255, 0.16), rgba(94, 203, 255, 0.05)),
    rgba(14, 26, 44, 0.8);
  border-color: rgba(126, 196, 240, 0.65);
  box-shadow: 0 0 26px -8px rgba(56, 160, 235, 0.75);
}

.q-option-label {
  color: #e6eefb;
}

.q-option-mark {
  border-color: rgba(126, 196, 240, 0.4);
  background: rgba(6, 12, 22, 0.8);
}

.q-option.is-selected .q-option-mark {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 203, 255, 0.5), inset 0 0 0 4px var(--accent);
}

.q-option:focus-within {
  box-shadow: 0 0 0 3px rgba(94, 203, 255, 0.22);
}

.q-select,
.q-input {
  color: var(--text);
  background: rgba(10, 18, 32, 0.7);
  border-color: rgba(126, 196, 240, 0.22);
}

.q-select:focus,
.q-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 203, 255, 0.2);
}

.q-select option {
  background: #0b1524;
  color: var(--text);
}

.q-affix {
  color: rgba(148, 176, 208, 0.7);
}

.q-error {
  color: #ffc4c0;
  background: rgba(240, 133, 125, 0.12);
  border-color: rgba(240, 133, 125, 0.32);
}

.q-actions {
  border-top-color: rgba(126, 196, 240, 0.12);
}

/* The primary action borrows the opening's button: a hairline rectangle with
   a bloom, not a filled pill. */
.q-next.button-primary,
.r-actions .button-primary {
  border: 1px solid rgba(126, 196, 240, 0.45);
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.2), rgba(94, 203, 255, 0.06)),
    rgba(6, 18, 34, 0.7);
  color: #eaf6ff;
  box-shadow:
    inset 0 1px 0 rgba(200, 240, 255, 0.2),
    0 0 26px -8px rgba(56, 160, 235, 0.7);
}

.q-next.button-primary:hover,
.r-actions .button-primary:hover {
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.3), rgba(94, 203, 255, 0.1)),
    rgba(8, 24, 44, 0.8);
  border-color: rgba(126, 196, 240, 0.75);
}

.q-back.button-secondary,
.r-actions .button-secondary {
  background: transparent;
  border-color: rgba(126, 196, 240, 0.22);
  color: rgba(170, 195, 222, 0.85);
}

.q-back.button-secondary:hover:not([disabled]),
.r-actions .button-secondary:hover {
  background: rgba(22, 38, 62, 0.6);
  border-color: rgba(126, 196, 240, 0.45);
  color: #eaf2fc;
}

/* --- the results --------------------------------------------------------- */

.r-eyebrow {
  color: var(--accent);
}

.r-hero {
  background:
    linear-gradient(135deg, rgba(27, 135, 189, 0.3) 0%, rgba(11, 45, 78, 0.6) 100%),
    rgba(8, 16, 30, 0.7);
  border: 1px solid rgba(126, 196, 240, 0.28);
  color: #f4f9ff;
}

.r-tile,
.r-gap,
.r-math {
  background: rgba(14, 25, 42, 0.6);
  border-color: rgba(126, 196, 240, 0.14);
}

.r-tile-label,
.r-meter-label,
.r-meter-note,
.r-tile-note,
.r-gap-detail,
.r-math-body,
.r-actions-note {
  color: var(--muted);
}

.r-meter-track {
  background: rgba(126, 196, 240, 0.12);
}

.r-meter,
.r-gaps {
  border-top-color: rgba(126, 196, 240, 0.12);
}

.r-gap-high {
  color: #ffc4c0;
  background: rgba(240, 133, 125, 0.16);
}

.r-gap-medium {
  color: #ffdc9a;
  background: rgba(232, 176, 75, 0.16);
}

.r-math summary {
  color: var(--accent);
}

.r-clean {
  color: var(--emerald-deep);
}

/* ==========================================================================
   5. Narrower screens
   ========================================================================== */

@media (max-width: 1080px) {
  .sec-mesh {
    background-size: 64px 64px;
  }
}

@media (max-width: 900px) {
  /* The arcs are built for a wide frame; on a phone they crowd the panel and
     the atmosphere carries the section on its own. */
  .sec-arcs {
    display: none;
  }

  .q-steps {
    gap: 4px;
  }

  .q-seg {
    height: 4px;
  }
}

@media (max-width: 620px) {
  .q-card::before,
.q-card::after,
.r-card::before,
.r-card::after {
    width: 9px;
    height: 9px;
  }

  /* Ten segments across a phone are under 30px each, which is still legible
     as a count but too fine to carry a glow. */
  .q-seg.is-live {
    box-shadow: none;
  }
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sec-arcs g,
.q-body,
.q-seg.is-live::after {
    animation: none !important;
  }

  .q-option {
    transition: none !important;
  }
}

/* ==========================================================================
   7. Print
   --------------------------------------------------------------------------
   The assessment's results are the report, and a report is printed on paper.
   styles.css already says so in its own @media print block, but these rules
   come after it and would otherwise win, so the paper is put back here.
   ========================================================================== */

@media print {
  .assessment-section {
    background: #fff;
    border-top: 0;
    color: #141b2b;

    --paper: #fff;
    --paper-2: #fff;
    --bg: #fff;
    --surface: #fff;
    --surface-soft: #f8f7f4;
    --text: #141b2b;
    --muted: #4e5a6e;
    --line: #e4e0d8;
    --rule: #e4e0d8;
    --accent: #1b87bd;
    --accent-strong: #146a99;
    --emerald-deep: #15803d;
  }

  .sec-env {
    display: none;
  }

  .r-card {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .r-card::before,
  .r-card::after {
    display: none;
  }

  .r-tile,
  .r-gap,
  .r-math {
    background: #f8f7f4;
    border-color: #e4e0d8;
  }

  /*
    The headline figure. styles.css already prints it as black on white, but
    these rules are in a later file, so on screen OR on paper they win on
    source order - a media query carries no specificity of its own. Every
    colour this file sets on the report has to be answered here, or the
    figure the whole page is about prints white on white.
  */
  .r-hero {
    background: none;
    border: 1px solid #999;
    color: #000;
  }

  .r-hero-label,
  .r-hero-note {
    color: #333;
  }

  .r-hero-note strong {
    color: #000;
  }

  .r-tile-label,
  .r-meter-label,
  .r-meter-note,
  .r-tile-note,
  .r-gap-detail,
  .r-math-body,
  .r-actions-note {
    color: #4e5a6e;
  }

  .r-meter-track {
    background: #e4e0d8;
  }

  .r-meter,
  .r-gaps {
    border-top-color: #e4e0d8;
  }

  .r-eyebrow,
  .r-math summary {
    color: #146a99;
  }

  .r-clean {
    color: #15803d;
  }

  .r-gap-high {
    color: #8c2f2f;
    background: rgba(255, 122, 122, 0.14);
  }

  .r-gap-medium {
    color: #7a5306;
    background: rgba(243, 185, 63, 0.18);
  }
}