/* Site surfaces (home, landing, picker): the Willis Worxs design language on the exam
   palette. 8px grid, 24px inset, 24px radius, Inter for UI, Libre Baskerville for the one
   accent per page. Three sizes and three weights per component. */
/* Space, shape and type tokens come from css/tokens.css, loaded first. */
body.site { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
body.site .exam-header { height: 56px; padding: 0 var(--space); }
body.site .exam-header .meta { gap: 8px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 48px var(--space) 80px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.auth-form input { height: 48px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.auth-submit { height: 48px; border-radius: var(--radius); border: 0; background: var(--gold); color: #1a1404; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.auth-note { min-height: 24px; color: var(--muted); font-size: 15px; }

/* Request Access (signup.html at /join). One component: the form and its confirmation.
   Sizes 14 (labels, hints), 16 (fields, text), 20 (confirmation heading); weights 400, 500, 700.
   Fields are 48px tall on the 8px grid with the one 24px radius; the column is 560px wide
   and full width on a phone. */
.join-form { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.join-field { display: flex; flex-direction: column; gap: 8px; }
.join-field label { font-size: 14px; font-weight: 500; color: var(--text); }
.join-field input, .join-field select, .join-field textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.join-field select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.join-field select:invalid { color: var(--muted); }
.join-field textarea { padding: 16px; line-height: 24px; resize: vertical; min-height: 128px; }
.join-field input:focus, .join-field select:focus, .join-field textarea:focus { outline: 2px solid var(--gold-dim); outline-offset: 0; border-color: var(--gold-dim); }
.join-hint { margin: 0; font-size: 14px; color: var(--muted); }
.join-agree { display: flex; gap: 16px; align-items: flex-start; font-size: 14px; color: #c9cfd6; line-height: 24px; cursor: pointer; }
.join-agree input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--gold); }
.join-agree a { color: #8cb4d4; }
.join-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join-error { margin: 0; min-height: 24px; font-size: 14px; color: #ff8a8a; }
.join-error:empty { display: none; }
.join-done { outline: none; }
.join-done p { margin: 0 0 24px; font-size: 16px; color: #c9cfd6; }
.join .auth-join { margin-top: 24px; }
.join-form[hidden], .join-done[hidden], .join .lede[hidden] { display: none; }

/* Single-purpose screens (sign in, request access, 404): one card, at most 480px wide,
   centered in the viewport below the header (js/beta.js sets --solo-top to its height), and top-aligned with normal scrolling
   when it is taller than that. margin: auto inside the flex container does both. Sizes in
   the card: 32 heading, 16 text and fields, 14 hints; weights 400, 500, 700. */
main.solo { box-sizing: border-box; display: flex; min-height: calc(100vh - var(--solo-top, 88px)); min-height: calc(100svh - var(--solo-top, 88px)); padding: var(--space); }
.solo-card { box-sizing: border-box; width: 100%; max-width: 480px; margin: auto; padding: var(--space); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.solo-card h1 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: 0; margin: 0 0 8px; }
body.site .solo-card .lede { font-size: 16px; max-width: none; margin: 0 0 24px; }
body.site .solo-card .lede, body.site .solo-card p { overflow-wrap: anywhere; }
.solo-card .auth-form, .solo-card .join-form, .solo-card .auth-terms { max-width: none; }
.solo-card .auth-form input, .solo-card .join-field input, .solo-card .join-field select, .solo-card .join-field textarea { background-color: var(--bg); }
.solo-card .auth-submit { width: 100%; font-size: 16px; }
.solo-card .auth-note { font-size: 14px; margin: 16px 0 0; }
.solo-card .auth-note:empty { display: none; }
body.site .solo-card .btn { font-size: 16px; }
.solo-card > :last-child { margin-bottom: 0; }
.wrap h1 { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: 0; margin: 0 0 8px; }
.wrap h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 40px 0 16px; }
/* Scoped: site.css is now loaded by pages that are not body.site (the lobby, the credits
   page, the random draw) purely for the shell header, and the exam palette's own .lede
   must keep its own metrics there. */
body.site .lede { font-size: 17px; color: #c9cfd6; max-width: 720px; margin: 0 0 var(--space); }
body.site .lede a { color: #8cb4d4; }

/* Status strip */
.status { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.status .cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px var(--space); }
.status .n { font-size: 24px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.status .n.ok { color: #7fd18a; }
.status .n.bad { color: #ff8a8a; }
.status .l { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Action cards */
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.actions.secondary { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
a.action { display: flex; flex-direction: column; gap: 8px; padding: var(--space); min-height: 176px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.action:hover { border-color: #5a6470; transform: translateY(-2px); }
a.action.primary { background: #1f2a36; border-color: #35516a; }
a.action .kicker { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
a.action .title { font-size: 20px; font-weight: 700; }
a.action .body { font-size: 15px; color: #c9cfd6; }
/* Standing rule: the card is a flex column and the action block takes margin-top:auto, so
   the actions line up across a row however many lines the body text wraps to. Grid items
   stretch to the tallest card in their row, which is what gives the auto margin something
   to push against. */
.actions > * { align-self: stretch; }
a.action .go { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--gold); }
.actions.secondary a.action { min-height: 128px; }
.actions.secondary a.action .title { font-size: 17px; }

/* Text links row and footer */
.links { display: flex; flex-wrap: wrap; gap: 8px var(--space); font-size: 13px; color: var(--muted); }
.links a { color: #8cb4d4; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.site-credit { margin-top: 40px; padding: 16px var(--space); border: 1px solid var(--gold-dim); border-radius: 16px; background: #2a2a1e; color: #e6dcb4; font-size: 13px; }
.site-credit a { color: #f0d78c; }
.foot { margin-top: var(--space); font-size: 13px; color: var(--muted); }

/* Buttons on site pages */
body.site .btn, body.site a.btn { height: 40px; padding: 0 var(--space); border-radius: var(--radius); font-size: 15px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
body.site .btn-primary { background: var(--gold); color: #1a1500; border-color: var(--gold); }
body.site .btn-primary:hover { background: #d9b437; }

/* Landing page */
/* Scoped: the landing page has its own full-bleed .hero and now loads this file for the
   shared header, so an unscoped rule here silently squeezed it to 800px. */
body.site .hero { padding: 72px 0 40px; max-width: 800px; }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero .lede { font-size: 19px; margin-bottom: var(--space); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero .only { margin-top: 16px; font-size: 13px; color: var(--muted); }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 40px 0; }
.numbers .cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space); }
.numbers .n { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; color: var(--gold); }
.numbers .l { font-size: 13px; color: var(--muted); margin-top: 8px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); align-items: start; margin: 24px 0 48px; }
.feature .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space); }
.feature h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.feature p { margin: 0 0 8px; color: #c9cfd6; }
.feature ol, .feature ul { margin: 8px 0 0 20px; padding: 0; color: #c9cfd6; }
.feature li { margin: 4px 0; }
.quote { font-family: var(--font-serif); font-style: normal; font-size: 17px; color: var(--text); border-left: 2px solid var(--gold-dim); padding-left: 16px; margin: 16px 0 0; }
.bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0 0; }
.bands .band { border: 1px solid var(--line); border-radius: 16px; padding: 12px 8px; text-align: center; background: var(--bg); }
.bands .band .s { font-size: 20px; font-weight: 700; }
.bands .band .w { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.bands .band.pass .s { color: #e8e8e8; } .bands .band.good .s { color: #7fd18a; } .bands .band.fail .s { color: #ff8a8a; }
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.sections .cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px var(--space); }
.sections .cell b { display: block; font-size: 15px; }
.sections .cell span { font-size: 13px; color: var(--muted); }
table.counted-demo { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.counted-demo th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
table.counted-demo td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.counted-demo .q { font-family: var(--font-serif); font-style: normal; }
table.counted-demo .ok { color: #7fd18a; font-weight: 500; } table.counted-demo .miss { color: #ff8a8a; font-weight: 500; }

@media (max-width: 720px) {
    .wrap { padding: 32px 16px 64px; }
    .wrap h1 { font-size: 32px; }
    .hero { padding: 40px 0 24px; }
    .hero h1 { font-size: 36px; }
    .feature { grid-template-columns: 1fr; }
    .bands { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .bands .band { padding: 8px 4px; border-radius: 12px; }
    .bands .band .s { font-size: 16px; }
    a.action { min-height: 0; }
    .numbers .cell:last-child:nth-child(odd), .status .cell:last-child:nth-child(odd) { grid-column: span 2; }
    body.site .exam-header { height: auto; flex-wrap: wrap; padding: 8px 16px; row-gap: 8px; }
    /* Chips keep their words on one line; the row wraps instead. The Radiopaedia credit
       chip stays legible, never broken across lines. */
    body.site .exam-header .meta { flex-wrap: wrap; row-gap: 8px; }
    body.site .exam-header .chip { white-space: nowrap; font-size: 11px; padding: 0 10px; }
}

/* ==========================================================================
   Shell header — the one navigation component for every page except exam.html.

   exam.html is a focus surface and keeps its own minimal .exam-header. Do not
   put .site-header on it.

   Three sizes (--t-md wordmark, --t-sm nav, --t-xs optional credit) and two
   weights (--w-regular, --w-medium). Spacing is 8px/24px only, no new radius.
   The current page is marked with aria-current="page" and gets a gold 2px
   underline; nothing else distinguishes it, so the row never reflows.

   At 720px and below the header wraps to two rows and the nav scrolls
   horizontally inside the 24px inset, with 44px touch targets throughout.
   ========================================================================== */