/* ==========================================================================
   KoiShark tier quiz — site theme for koishark.com.
   Loaded by src/components/QuizAssets.astro directly AFTER the hosted quiz
   stylesheet (assets.koishark.com/koishark-quiz.css), so at equal specificity
   these rules win. The hosted files stay unchanged; the Squarespace page that
   also loads them keeps its light look.

   Screen only. Print (the "Download as PDF" button on /results) keeps the
   quiz's own light print styles.
   ========================================================================== */

@media screen {

  /* --- 1. Tokens: the dark section palette from global.css --------------- */
  .ks-quiz {
    --ks-ink:      #FFFFFF;                  /* headings and main text */
    --ks-muted:    #A9C2C7;                  /* --ink-soft */
    --ks-hairline: rgba(255, 255, 255, 0.16);
    --ks-surface:  #142629;                  /* --ink-deep, the page */
    --ks-paper:    #1E363D;                  /* --ink, the cards */

    --ks-brand:    #E8531C;                  /* --koi: hover, bullets, focus */
    --ks-shallow:  #A9C2C7;
    --ks-koi:      #E8531C;

    /* Tier colors get brighter as the tier goes up, so every one is
       visible on the dark cards. */
    --ks-t-starter:    #7BB5B2;
    --ks-t-pro:        #C9E2DF;
    --ks-t-enterprise: #FFFFFF;

    --ks-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ks-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ks-label:   "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  }

  .ks-quiz :focus-visible { outline-color: var(--ks-koi); }

  /* --- 2. Headings, same weight as the site ------------------------------ */
  .ks-quiz .ks-q,
  .ks-quiz .ks-result-head h1 { font-weight: 600; }
  .ks-quiz .ks-eyebrow { color: var(--ks-koi); }

  /* --- 3. Progress bar --------------------------------------------------- */
  .ks-quiz .ks-gauge-track { background: var(--ks-hairline); }

  /* --- 4. Buttons, same as .btn and .btn--ghost on the site -------------- */
  .ks-quiz .ks-btn {
    background: var(--ks-koi);
    border-color: var(--ks-koi);
    color: #FFFFFF;
    font-weight: 500;
    transition: background-color 200ms ease, opacity 160ms;
  }
  .ks-quiz .ks-btn:hover { background: #C8410F; border-color: #C8410F; opacity: 1; }
  .ks-quiz .ks-btn[disabled],
  .ks-quiz .ks-btn[disabled]:hover { background: var(--ks-koi); border-color: var(--ks-koi); opacity: 0.3; }

  .ks-quiz .ks-btn-quiet {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
  }
  .ks-quiz .ks-btn-quiet:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: #FFFFFF; }

  .ks-quiz .ks-btn-reveal { background: var(--ks-koi); color: #FFFFFF; font-weight: 500; }
  .ks-quiz .ks-btn-reveal:hover { background: #C8410F; }

  /* --- 5. Callout cards: one step lighter than the other cards ----------- */
  .ks-quiz .ks-capture,
  .ks-quiz .ks-gates { background: #2F4E54; color: #FFFFFF; }
  .ks-quiz .ks-capture h2,
  .ks-quiz .ks-gates h2,
  .ks-quiz .ks-gates .ks-need { color: #FFFFFF; }
  .ks-quiz .ks-field input { color: #FFFFFF; }

  /* --- 6. Results -------------------------------------------------------- */
  .ks-quiz .ks-tier-badge { color: #FFFFFF; }
  .ks-quiz .ks-scale-labels span { color: rgba(255, 255, 255, 0.35); }
  .ks-quiz .ks-scale-labels span.on { color: #FFFFFF; }

  /* --- 7. Answer buttons appear together, 0.5 s after each question -------
     Question screens only (.ks-panel-locked). The hub picker re-renders on
     every click, so it is left out. `backwards` holds the start state during
     the delay and releases it at the end, so the hover lift still works.
     visibility keeps the buttons from taking a click before they show.
     The quiz stylesheet turns this off for reduced motion. */
  .ks-quiz .ks-panel-locked > .ks-options > .ks-opt {
    animation: ks-materialize 300ms ease-out 500ms backwards;
  }
  @keyframes ks-materialize {
    from { opacity: 0; visibility: hidden; filter: blur(2px); }
    to   { opacity: 1; visibility: visible; filter: blur(0); }
  }

  /* --- 8. Results screens: the logo scrolls away with the page ------------
     Only when the finished screen is showing (the "Your results are ready"
     gate on /quiz, and /results). Question screens keep the fixed logo. */
  body:has(.ks-result-head) .chrome--tl { position: absolute; }

  /* --- 9. Phones: questions start at the top, not centred --------------
     The quiz stylesheet locks .ks-panel-locked to the tallest question's
     height (--ks-stage-height) and centres each question inside it. On a
     phone the tallest question is very tall, so short questions float in a
     large void under the progress bar and the last answer is pushed down
     behind Safari's toolbar. Below the quiz's own 768px single-column
     breakpoint, drop the lock and align from the top. */
  @media (max-width: 768px) {
    .ks-quiz .ks-panel-locked { min-height: 0; justify-content: flex-start; }

    /* The label hangs 14px below the track (absolute, so it takes no space).
       Give it a fixed line box and size the gauge so the question heading
       starts exactly 2rem below the label: 2px track + 12px + 1rem label
       + 2rem gap. Question screens only; the picker and results keep theirs. */
    .ks-quiz .ks-stage:has(.ks-panel-locked) .ks-gauge-label { line-height: 1rem; }
    .ks-quiz .ks-stage:has(.ks-panel-locked) .ks-gauge { padding-bottom: calc(12px + 1rem + 2rem); }

    /* Room above the home indicator (needs viewport-fit=cover, set on /quiz). */
    .ks-quiz { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  }

  /* Landscape notch: keep the quiz's side padding clear of it. env() is 0
     everywhere else, so this is the quiz's own padding on desktop. */
  .ks-quiz .ks-shell {
    padding-left: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-right, 0px));
  }
}

/* The site fades heading and page colors over 700 ms. Without this, the switch
   from the dark screen colors to the light print colors can be caught halfway
   and print light-on-white. */
@media print {
  body, .ks-quiz, .ks-quiz * { transition: none !important; }
}

/* Footer bar on the quiz pages. Its site rule (position: absolute; bottom: 0)
   is made for the last home page section. Here it has no positioned parent,
   so it sat on top of the bottom of the first screen and took the clicks
   meant for the "Start the quiz" button and the answers below it.
   On these pages it goes back into the normal flow, after the quiz. */
.ks-quiz + .footer-bar { position: static; }