/* ===== ScenarioX Assessment (full-screen theme) =====
   Replaces the WhatsApp chat-bubble layout. Reuses the shared brand tokens
   (--wa-header, --wa-accent, --score-green/yellow/red) defined in
   whatsapp.css's :root so this page stays visually consistent with
   Results/Concepts, without the phone frame or bubble chrome. */

:root {
    --asm-paper: #f6f4ee;
    --asm-card: #ffffff;
    --asm-ink: #12201b;
    --asm-muted: #5c6b64;
    --asm-line: #dfe0d7;
    --asm-tag-bg: #eef1ec;
    --asm-correct-bg: #e9f7ee;
    --asm-correct-ink: var(--score-green);
    --asm-correct-line: #bfe6cd;
    --asm-partial-bg: #fbf1d6;
    --asm-partial-ink: #a37700;
    --asm-partial-line: #eddca3;
    --asm-wrong-bg: #fbeae1;
    --asm-wrong-ink: var(--score-red-text);
    --asm-wrong-line: #eac7b5;
    --asm-shadow: 0 1px 2px rgba(18, 32, 27, 0.06), 0 8px 24px -14px rgba(18, 32, 27, 0.22);
}

.asm-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--asm-paper);
    color: var(--asm-ink);
}

.asm-mono {
    font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

/* ---------- top bar ---------- */

.asm-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--asm-paper);
    border-bottom: 1px solid var(--asm-line);
}

.asm-topbar-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 14px 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asm-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.asm-drop-label {
    font-size: 12px;
    color: var(--asm-muted);
    text-transform: uppercase;
}

.asm-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wa-header);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 14px;
    background: var(--asm-tag-bg);
    white-space: nowrap;
}
.asm-home-link:hover { background: #e2e7e2; }

.asm-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--asm-muted);
    font-variant-numeric: tabular-nums;
}
.asm-status-row b { color: var(--asm-ink); font-weight: 700; }
/* Pre-existing gotcha, not introduced here: an author rule setting `display`
   always wins over the browser's own `[hidden] { display: none }`, no
   matter its specificity, so the row above stayed visible on the intro
   screen despite the `hidden` attribute. This restores it, scoped to just
   this element rather than a blanket [hidden] override. */
.asm-status-row[hidden] { display: none; }

.asm-score-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Mini live version of the score ring on Results (Views/Home/Results.cshtml
   / whatsapp.css's .ring-fg): same math, circumference = 2*PI*r, dashoffset
   = circumference * (1 - score/max). Deliberately kept in the neutral brand
   color throughout the run, never the green/yellow/red score-band colors
   Results uses. That verdict, plus the tier reveal and confetti that come
   with it, stays exclusive to finishing; this ring only shows real progress
   toward it, so it motivates without spoiling or previewing the outcome. */
.asm-score-ring { transform: rotate(-90deg); flex-shrink: 0; }
.asm-ring-bg { fill: none; stroke: var(--asm-line); stroke-width: 3; }
.asm-ring-fg {
    fill: none;
    stroke: var(--wa-header);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asm-progress-track {
    height: 3px;
    border-radius: 2px;
    background: var(--asm-line);
    overflow: hidden;
}
.asm-progress-fill {
    height: 100%;
    width: 0;
    background: var(--wa-header);
    border-radius: 2px;
    transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reading column ---------- */

.asm-main {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(14px, 3vw, 20px) clamp(18px, 4.5vw, 24px) 80px;
}

.asm-fade-in {
    /* Shared reading-column width for the question and the options below it.
       Set here, once, on their common parent rather than on each of them
       separately: .asm-question and .asm-options have different font-sizes
       (the question's is a responsive clamp, the options' a fixed 15px), so
       the same "66ch" on each resolved to two different pixel widths and the
       two blocks never actually lined up. */
    max-width: 66ch;
    animation: asm-rise 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes asm-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .asm-fade-in { animation: none; }
    .asm-progress-fill { transition: none; }
    .asm-ring-fg { transition: none; }
}

/* ---- intro / resume screens ---- */

/* app-info card (single-app drops, e.g. Drop 06 / QuickBite). Adapted from
   Concepts/Detail.cshtml's .cc-station language (tinted icon node + colored
   label + prose) but as one standalone card. Absent entirely when the drop
   has no appIntro; see appIntro() in assessment.js. */
.asm-appintro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
    background: var(--asm-tag-bg);
    border: 1px solid var(--asm-line);
    border-radius: 14px;
}
.asm-appintro-node {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--asm-card);
    border: 1.5px solid var(--asm-line);
    font-size: 19px;
    line-height: 1;
}
.asm-appintro-body { min-width: 0; }
.asm-appintro-label {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wa-header);
    margin-bottom: 4px;
}
.asm-appintro-name {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--asm-ink);
}
.asm-appintro-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--asm-ink);
    max-width: 56ch;
}

/* Structured setup under the lede: the app's services as a two-column list
   (one column on phones), each a bold name plus a few words on what it
   owns, then a single muted infrastructure line. Replaces the five-clause
   sentence that used to carry all of this inside .asm-appintro-desc. */
.asm-appintro-services {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 22px;
    max-width: 60ch;
}
.asm-appintro-services li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    background: var(--asm-card);
    border: 1px solid var(--asm-line);
    border-radius: 8px;
    min-width: 0;
}
.asm-appintro-services b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--asm-ink);
}
.asm-appintro-services span {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--asm-muted);
}
.asm-appintro-infra {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--asm-muted);
    max-width: 60ch;
}
@media (max-width: 560px) {
    .asm-appintro-services { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* The journey (AppIntroCard.Journey): the application as the steps a user
   takes through it, numbered in order and joined by a thin rail, with the
   service handling each step named in the brand green. Replaces the tiles
   above on drops that have it; stacks the same way at every width. */
.asm-journey-label {
    display: block;
    margin: 14px 0 4px;
    font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asm-muted);
}
.asm-journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 60ch;
}
.asm-journey li {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--asm-ink);
}
.asm-journey li + li::before {
    content: "";
    position: absolute;
    left: 12.5px;
    top: -8px;
    height: 16px;
    border-left: 1.5px solid #cfd6cf;
}
.asm-journey-step {
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--asm-card);
    border: 1.5px solid var(--wa-header);
    color: var(--wa-header);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.asm-journey-action { font-weight: 700; }
.asm-journey b { font-weight: 700; color: var(--wa-header); }

/* The score-card preview that used to sit here before Start was removed:
   the landing page already shows the real score card one click earlier,
   and on a laptop the preview pushed Start below the fold. */

.asm-intro-lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}
/* One row for the drop's terms, right above Start: scenario count, the
   drop's "Takes ~N minutes" line, and the no-login note. */
.asm-terms {
    margin: 0;
    font-size: 12px;
    color: var(--asm-muted);
}
.asm-actions.asm-intro-actions { margin-top: 14px; }
.asm-intro-lines p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--asm-ink);
    max-width: 62ch;
}
.asm-intro-hint {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--asm-muted);
}

/* ---- question ---- */

.asm-qnum {
    font-size: 12px;
    color: var(--asm-muted);
    margin: 0 0 6px;
}

.asm-question {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 0.6vw + 13.5px, 18px);
    line-height: 1.5;
    margin: 0 0 clamp(22px, 5vw, 34px);
    color: var(--asm-ink);
}
.asm-question:focus { outline: none; }
.asm-question:focus-visible { outline: 2px solid var(--wa-header); outline-offset: 4px; }

/* Each paragraph of a multi-paragraph question (see assessment.js), spaced by
   a fixed small margin rather than a full blank text line, so a question that
   opts into a paragraph break doesn't end up with an oversized gap. */
.asm-question-para { margin: 0 0 0.55em; }
.asm-question-para:last-child { margin-bottom: 0; }

.asm-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asm-option {
    text-align: left;
    width: 100%;
    background: var(--asm-card);
    border: 1.5px solid var(--asm-line);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--asm-ink);
    cursor: pointer;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color 150ms ease, background 150ms ease;
    font-family: inherit;
}
.asm-option:hover:not(:disabled) {
    border-color: var(--wa-accent);
    background: #f5faf6;
}
.asm-option:focus-visible {
    outline: 2px solid var(--wa-header);
    outline-offset: 2px;
}
.asm-option:disabled { cursor: default; }

.asm-option-letter {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--asm-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--asm-muted);
    font-family: ui-monospace, "SFMono-Regular", monospace;
}

.asm-option.is-chosen-good { border-color: var(--asm-correct-line); background: var(--asm-correct-bg); }
.asm-option.is-chosen-good .asm-option-letter { border-color: var(--asm-correct-ink); color: var(--asm-correct-ink); background: var(--asm-card); }
.asm-option.is-chosen-partial { border-color: var(--asm-partial-line); background: var(--asm-partial-bg); }
.asm-option.is-chosen-partial .asm-option-letter { border-color: var(--asm-partial-ink); color: var(--asm-partial-ink); background: var(--asm-card); }
.asm-option.is-chosen-bad { border-color: var(--asm-wrong-line); background: var(--asm-wrong-bg); }
.asm-option.is-chosen-bad .asm-option-letter { border-color: var(--asm-wrong-ink); color: var(--asm-wrong-ink); background: var(--asm-card); }
.asm-option.is-best-reveal { border-color: var(--asm-correct-line); }
.asm-option.is-best-reveal .asm-option-letter { border-color: var(--asm-correct-ink); color: var(--asm-correct-ink); }
.asm-option.is-muted { opacity: 0.55; }

/* ---- verdict panel ---- */

.asm-verdict {
    margin-top: 28px;
    border-radius: 12px;
    border: 1.5px solid var(--asm-line);
    overflow: hidden;
    box-shadow: var(--asm-shadow);
}
.asm-verdict.good    { border-color: var(--asm-correct-line); }
.asm-verdict.partial { border-color: var(--asm-partial-line); }
.asm-verdict.bad      { border-color: var(--asm-wrong-line); }

.asm-verdict-head {
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.asm-verdict.good .asm-verdict-head    { background: var(--asm-correct-bg); color: var(--asm-correct-ink); }
.asm-verdict.partial .asm-verdict-head { background: var(--asm-partial-bg); color: var(--asm-partial-ink); }
.asm-verdict.bad .asm-verdict-head     { background: var(--asm-wrong-bg); color: var(--asm-wrong-ink); }

.asm-verdict-body {
    padding: 18px 20px 20px;
    background: var(--asm-card);
}
.asm-verdict-line {
    font-size: 15px;
    line-height: 1.6;
    color: var(--asm-ink);
    margin: 0;
}

.asm-best-callout {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--asm-tag-bg);
    border: 1px solid var(--asm-line);
}
.asm-best-label-inline {
    font-weight: 700;
    color: var(--wa-header);
}
.asm-best-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--asm-ink);
    margin: 0 0 8px;
    font-weight: 500;
}
.asm-best-why {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--asm-muted);
    margin: 0;
}

/* ---- buttons ---- */

.asm-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Full-width primary/secondary actions (Start, Next scenario, Continue, etc.):
   a content-hugging pill left-anchored under the left-aligned reading column
   sits far from wherever the pointer actually rests, on a thumb reaching
   across a phone or a mouse crossing a wide desktop window. Full width means
   the tap/click target reaches all the way across the column either way, so
   there's nothing to aim for beyond already being near the text above it.
   Two buttons in the same row (e.g. Continue / Start over) each claim the
   full row width and wrap onto their own line via the flex-wrap above. */
.asm-actions .asm-btn,
.asm-actions .asm-btn-secondary {
    width: 100%;
    text-align: center;
}

.asm-btn {
    background: var(--wa-header);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: filter 150ms ease, transform 60ms ease;
}
.asm-btn:hover { filter: brightness(1.08); }
.asm-btn:active { transform: scale(0.99); }

.asm-btn-secondary {
    background: none;
    color: var(--wa-header);
    border: 1.5px solid var(--wa-header);
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.asm-btn-secondary:hover { background: var(--asm-tag-bg); }

.asm-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--asm-muted);
    line-height: 1.5;
}

.asm-leave-copy {
    font-size: 14px;
    line-height: 1.55;
    color: var(--asm-ink);
    margin: 0 0 18px;
}

.asm-leave-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.asm-leave-actions .asm-btn,
.asm-leave-actions .asm-btn-secondary {
    padding: 11px 20px;
    font-size: 13.5px;
}

.asm-error {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--asm-wrong-ink);
    background: var(--asm-wrong-bg);
    border: 1px solid var(--asm-wrong-line);
    border-radius: 10px;
    padding: 14px 16px;
}