/* Desktop and pointer refinements, September 24, 2026. Loaded after web.css.
   Wide windows (1100px and up): one aligned frame, navigation in the header, practice in two panes
   (the case on the left, the teaching on the right) and Today as a dashboard.
   Every width: hover feedback for mouse users, and the practice card never hides answer choices behind its button. */

/* Parts that only wide windows show. */
.feedback-title, .explanation-placeholder { display: none; }
.question-title:focus { outline: none; }
/* app.js keeps nav-hidden on the body while a round is open; the page starts with it so no empty bar flashes. */
body.nav-hidden .navigation { display: none; }

/* Loading screens hold the card's height, so the footer doesn't jump into view and away again on first load.
   (The #app in each selector is deliberate: it outranks the practice rules that reset min-height.) */
.device:is(:has(#app:empty), :has(#app .guest-loading)),
.device:has(#app .gate-screen):not(:has(#app .gate-screen .primary)) { min-height: calc(100dvh - 100px); }

/* The panel of marketing copy beside the app is not shown to signed-in members. */
@media (min-width: 761px) {
  body:not(.guest-practice) .website-intro { display: none; }
  body:not(.guest-practice) .web-layout { display: block; max-width: 860px; margin-top: 14px; }
}

/* Mid-size windows (small laptops, zoomed browsers, tablets in landscape): one column. Before an answer is
   checked, the button follows the choices instead of floating over them; after, it stays in reach. */
@media (min-width: 761px) and (max-width: 1099px) {
  .quiz-screen:not(.is-answered) .quiz-bottom { position: static; }
  .site-header, body.guest-practice.practice-focus .site-header, .site-footer { max-width: 860px; }
}

@media (min-width: 1100px) {
  :root { --page-max: 1200px; --page-pad: 32px; --pane: clamp(360px, 31vw, 440px); }

  /* One frame: header, card and footer share the same edges on every screen and in every state. */
  .site-header,
  body.guest-practice.practice-focus .site-header { max-width: var(--page-max); min-height: 72px; padding: 14px var(--page-pad); gap: 20px; }
  .web-layout,
  body.guest-practice .web-layout,
  body.guest-practice.practice-focus .web-layout,
  body:not(.guest-practice) .web-layout { display: block; max-width: var(--page-max); margin: 0 auto 28px; padding: 0 var(--page-pad); }
  .website-intro { display: none; }
  .site-footer { max-width: var(--page-max); padding: 6px var(--page-pad) 22px; }
  .device,
  body.guest-practice.practice-focus .device { min-height: 0; border-radius: 22px; }
  .device:is(:has(#app:empty), :has(#app .guest-loading), :has(#app .quiz-screen)),
  .device:has(#app .gate-screen):not(:has(#app .gate-screen .primary)) { min-height: calc(100dvh - 110px); }
  .device:has(.page-top, .completion, .gate-screen .primary) { max-width: 820px; margin-inline: auto; }

  /* Navigation sits in the header (app.js moves it there) and hides while a round is open. */
  .site-header .site-tagline { order: 1; }
  .site-header .navigation {
    order: 2; position: static; display: flex; gap: 2px; flex-shrink: 0; width: auto; height: 44px; min-height: 0;
    margin: 0 auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-solid); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-header .header-account { order: 3; margin-left: auto; }
  body:not(.nav-hidden) .site-header:has(.navigation) .header-account { margin-left: 0; }
  .site-header .nav-item { flex: none; flex-direction: row; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: var(--text-footnote); color: var(--muted); }
  .site-header .nav-item svg { width: 17px; height: 17px; }
  .site-header .nav-item.active { color: var(--accent-label); background: var(--accent-soft); }
  .site-header .nav-item.active::before { display: none; }

  /* Practice: the case, the choices and the button on the left; the explanation on the right. */
  .quiz-screen { display: grid; grid-template-columns: minmax(0, 1fr) var(--pane); grid-template-rows: auto auto auto auto 1fr; column-gap: 48px; align-items: start; padding: 20px 32px 24px; }
  .quiz-screen > * { grid-column: 1; min-width: 0; }
  .quiz-screen .question-layout-wrap,
  .quiz-screen .question-layout,
  .quiz-screen.is-answered .question-layout { display: contents; }
  .quiz-screen .quiz-header { margin-bottom: 12px; }
  .quiz-screen .question-main { grid-column: 1; min-width: 0; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: 8px; }
  .question-main > .category-pill { grid-row: 1; justify-self: start; }
  .question-main > .question-tools { grid-row: 1; grid-column: 4; margin: 0; }
  .question-main > .question-stem,
  .question-main > .answer-options { grid-column: 1 / -1; }
  .question-main > .question-stem,
  body.guest-practice.practice-focus .question-main > .question-stem { margin: 14px 0 16px; }
  .question-main .lab-reference-button { min-height: 36px; padding: 6px 12px; font-size: var(--text-footnote); }
  .question-main .lab-reference-button svg { width: 16px; height: 16px; }
  /* The title moves to the top of the explanation (it names the diagnosis, so it only appears after checking). */
  .question-main > .question-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .quiz-screen .answer-options { gap: 8px; }
  .quiz-screen .answer-option { min-height: 52px; padding-top: 11px; padding-bottom: 11px; }
  /* "Your answer · Incorrect" and "Correct answer" sit at the end of the line, before the mark, saving a row per marked choice. */
  .quiz-screen .answer-options.is-answered .answer-copy { flex-direction: row; align-items: center; gap: 14px; width: 100%; }
  .quiz-screen .answer-options.is-answered .answer-copy > span:first-child { flex: 1; min-width: 0; }
  .quiz-screen .answer-result-label { flex-shrink: 0; white-space: nowrap; }
  .quiz-screen .quiz-bottom,
  body.guest-practice.practice-focus .quiz-screen .quiz-bottom {
    position: static; display: flex; align-items: center; gap: 16px; margin: 16px 0 0; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .quiz-screen .quiz-bottom .primary { width: auto; min-width: 220px; padding: 13px 24px; }
  .quiz-screen .quiz-bottom .note { margin: 0; text-align: left; }
  /* The verdict sits above the button, under the choices, on one line. The explanation is beside it, so its arrow points there. */
  .quiz-screen .quiz-bottom,
  body.guest-practice.practice-focus .quiz-screen .quiz-bottom { flex-wrap: wrap; row-gap: 12px; }
  .quiz-screen .quiz-bottom .verdict-bar { flex: 1 1 100%; margin: 0; }
  .quiz-screen .verdict-copy { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .quiz-screen .verdict-chevron { transform: none; }

  /* The right pane scrolls on its own, so the case stays in view while you read. */
  .quiz-screen .feedback,
  .quiz-screen .explanation-placeholder {
    grid-column: 2; grid-row: 1 / -1; align-self: stretch; position: sticky; top: 16px;
    max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    margin: 0; padding: 2px 6px 28px 40px; border-top: 0; border-left: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  }
  .explanation-placeholder { display: flex; flex-direction: column; color: var(--muted); }
  .explanation-placeholder .placeholder-title { margin: 8px 0 6px; font-size: var(--text-heading); font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: var(--text); }
  .explanation-placeholder p { margin: 0 0 22px; font-size: var(--text-body); line-height: 1.6; }
  /* Keyboard shortcuts stay out of the way: a small link at the foot of the pane opens the list (so does ?). */
  .shortcut-help { margin-top: auto; padding-top: 24px; font-size: var(--text-caption); }
  .shortcut-help summary {
    display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-left: -8px; padding: 5px 8px;
    border-radius: 8px; list-style: none; cursor: pointer; color: var(--muted); opacity: .75;
    transition: opacity .15s, color .15s, background .15s;
  }
  .shortcut-help summary::-webkit-details-marker { display: none; }
  .shortcut-help summary::marker { content: ''; }
  .shortcut-help summary svg { width: 15px; height: 15px; flex-shrink: 0; }
  .shortcut-help summary kbd { margin-left: 2px; opacity: .8; }
  .shortcut-help summary:hover, .shortcut-help[open] summary { opacity: 1; color: var(--text-soft); }
  .shortcut-help summary:hover { background: var(--chip); }
  .shortcut-help summary:focus-visible { opacity: 1; outline: 3px solid var(--accent-label); outline-offset: 2px; }
  .shortcut-list {
    display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px 18px; width: fit-content; margin: 8px 0 0; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--chip);
  }
  .shortcut-list div { display: contents; }
  .shortcut-list dt { display: flex; align-items: center; gap: 3px; margin: 0; }
  .shortcut-list dd { margin: 0; color: var(--text-soft); }
  .kbd-range { color: var(--muted); }
  kbd {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
    font: 600 calc(var(--text-caption) - 1px)/1 var(--font); letter-spacing: .02em; color: var(--text-soft);
    background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 5px; box-shadow: 0 1px 0 var(--line);
  }
  .quiz-screen .feedback > .feedback-title { display: block; margin: -8px 0 16px; font-size: var(--text-body); font-weight: 600; line-height: 1.4; color: var(--muted); }

  /* Today: the day's round on the left; streak, topics and reminder beside it. */
  .today-screen {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 26px 32px 30px;
    grid-template-areas: "top top" "date date" "title title" "hero glance-h" "hero glance" "hero mix-h" "hero mix" "hero remind" "hero .";
    grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
  }
  .today-screen > * { grid-column: 1 / -1; }
  .today-screen > .guest-import-card { grid-area: top; }
  .today-screen > .date-line { grid-area: date; }
  .today-screen > .home-title { grid-area: title; }
  .today-screen > .hero { grid-area: hero; margin: 0; }
  .today-screen > .section-heading:has(+ .stats-row) { grid-area: glance-h; margin-top: 2px; }
  .today-screen > .stats-row { grid-area: glance; }
  .today-screen > .section-heading:has(+ .focus-row) { grid-area: mix-h; }
  .today-screen > .focus-row { grid-area: mix; }
  .today-screen > .reminder-banner { grid-area: remind; }

  /* Lab values open as a side sheet over the explanation, so the case stays readable. */
  .modal-overlay:has(.lab-reference-modal) { justify-content: flex-end; align-items: stretch; padding: 16px; background: color-mix(in srgb, var(--canvas) 35%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal.lab-reference-modal { width: min(480px, 40vw); max-width: none; max-height: none; border-radius: 18px; }
}

/* Short laptop windows (about 1366×768 and 1920×1080 at 125% scaling): tighter spacing so the case, all four
   choices and the button fit without scrolling, even with the signed-in status line above the card's content. */
@media (min-width: 1100px) and (max-height: 760px) {
  .site-header, body.guest-practice.practice-focus .site-header { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
  .account-status { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .quiz-screen { padding-top: 14px; }
  .quiz-screen .quiz-header { margin-bottom: 8px; }
  .question-main > .question-stem,
  body.guest-practice.practice-focus .question-main > .question-stem { margin: 10px 0 12px; line-height: 1.55; }
  .quiz-screen .answer-options { gap: 6px; }
  .quiz-screen .answer-option { min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
  .quiz-screen .quiz-bottom { margin-top: 12px; }
  .quiz-screen .quiz-bottom .primary { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }
  .quiz-screen .quiz-bottom .verdict-bar { padding-top: 7px; padding-bottom: 7px; }
  .quiz-screen .feedback, .quiz-screen .explanation-placeholder { max-height: calc(100dvh - 130px); }
  .device:is(:has(#app:empty), :has(#app .guest-loading), :has(#app .quiz-screen)),
  .device:has(#app .gate-screen):not(:has(#app .gate-screen .primary)) { min-height: calc(100dvh - 90px); }
}

/* Keyboard hints only make sense with a keyboard and mouse. */
@media (hover: none), (pointer: coarse) { .shortcut-help { display: none; } }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .shortcut-help[open] .shortcut-list { animation: shortcuts-in .18s ease-out; }
  @keyframes shortcuts-in { from { opacity: 0; transform: translateY(4px); } }
}

/* Hover feedback for mouse and trackpad users (not on touch screens, where hover sticks). */
@media (hover: hover) and (pointer: fine) {
  .answer-option:not(:disabled):not(.selected):hover { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); }
  .answer-option:not(:disabled):not(.selected):hover .answer-letter { border-color: var(--accent-line); color: var(--accent-label); }
  .secondary:not(:disabled):hover { background: var(--chip); border-color: var(--line-strong); }
  .icon-button:not(:disabled):hover { background: var(--chip); }
  .nav-item:not(.active):hover { color: var(--text); }
  .site-header .nav-item:not(.active):hover { background: var(--chip); }
  .text-button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
  .list-action:hover, .review-item:hover, .reminder-banner:hover { background: var(--chip); }
}

/* Phones and mid-size windows (up to 1099px), September 24 evening: more of the case before the first scroll.
   The "Clinical question" placeholder above the case is visually hidden, as on wide windows (screen readers still
   hear it, and it takes the question's focus after "Next"); once the answer is checked, the real title follows the
   explanation's heading instead. The "Take your time" line under the button gives way to the case. */
@media (max-width: 1099px) {
  .question-main > .question-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .quiz-screen .feedback > .feedback-title { display: block; margin: -8px 0 16px; font-size: var(--text-body); font-weight: 600; line-height: 1.4; color: var(--muted); }
  .quiz-bottom .note { display: none; }
}
/* Phones: the tagline no longer takes a second header row. */
@media (max-width: 760px) {
  .site-header .site-tagline { display: none; }
}
/* Mid-size windows (a browser in half a screen, small laptops, tablets): the tagline returns to the header's
   row, the header is slimmer while practicing, and the category and "Open lab values" share one row, as on wide
   windows, so the case, every choice and the button fit a 1024×700 window. */
@media (min-width: 761px) and (max-width: 1099px) {
  .site-header .site-tagline { order: 0; flex-basis: auto; }
  body.guest-practice.practice-focus .site-header { padding-top: 12px; padding-bottom: 12px; }
  .quiz-screen .question-main { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: 8px; }
  .question-main > .category-pill { grid-row: 1; justify-self: start; }
  .question-main > .question-tools { grid-row: 1; grid-column: 4; margin: 0; }
  .question-main > .question-stem,
  .question-main > .answer-options { grid-column: 1 / -1; }
  .question-main > .question-stem,
  body.guest-practice.practice-focus .question-main > .question-stem { margin: 14px 0 16px; }
  .question-main .lab-reference-button { min-height: 36px; padding: 6px 12px; font-size: var(--text-footnote); }
  .question-main .lab-reference-button svg { width: 16px; height: 16px; }
}

/* The small round buttons (close, info) keep their look but get a 44-point touch target. */
.icon-button { position: relative; }
.icon-button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* 34px + 1px borders → 44px */

/* Primary buttons on hover: a slightly deeper accent. The lighter mix in glass.css left white text at 3.86:1 in
   dark mode, and it showed right after "Check answer", when "Next question" appears under the pointer. Touch
   screens get no hover color at all. */
.primary:hover:not(:disabled) { background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 90%, black); }
}

/* Reviewing a round with a mouse and keyboard: a quiet hint that ← and → step between its questions. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .quiz-screen .quiz-bottom .review-keys { display: flex; align-items: center; gap: 4px; margin: 0; font-size: var(--text-caption); color: var(--muted); }
  .quiz-screen .quiz-bottom .review-keys span { margin-left: 6px; }
}