/* Responsive website layout layered over the Roundsly design. Colors come from tokens.css. */
/* A short completion celebration that settles back into the original badge. */
@media (prefers-reduced-motion: no-preference) {
  .completion-badge {
    position:relative;
    isolation:isolate;
    transform-origin:50% 70%;
    animation:completion-spring 1050ms both, completion-glow 1400ms 1050ms ease-in-out 2;
  }
  .completion-badge svg { position:relative;z-index:1; }
  .completion-badge svg path {
    stroke-dasharray:24;
    stroke-dashoffset:0;
    animation:completion-check 450ms 350ms cubic-bezier(.22,1,.36,1) backwards;
  }
  .completion-badge::before,.completion-badge::after { content:'';position:absolute;pointer-events:none;border-radius:50%; }
  .completion-badge::before {
    inset:-12px;border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);opacity:0;
    animation:completion-ripple 1400ms 450ms ease-out 2;
  }
  .completion-badge::after {
    inset:0;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb, var(--on-accent) 55%, transparent) 49%,transparent 63%);
    background-size:300% 100%;background-position:100% 0;opacity:0;
    animation:completion-sheen 1100ms 700ms ease-in-out;
  }
}
@keyframes completion-spring {
  0% { opacity:0;transform:translateY(22px) scale(.65) rotate(-12deg);animation-timing-function:cubic-bezier(.16,1,.3,1); }
  42% { opacity:1;transform:translateY(-10px) scale(1.09) rotate(4deg);animation-timing-function:ease-in; }
  64% { transform:translateY(4px) scale(.97) rotate(-2deg);animation-timing-function:ease-out; }
  82% { transform:translateY(-3px) scale(1.025) rotate(1deg);animation-timing-function:ease-in-out; }
  100% { opacity:1;transform:translateY(0) scale(1) rotate(0); }
}
@keyframes completion-check { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } }
@keyframes completion-ripple {
  0% { opacity:0;transform:scale(.94); }
  18% { opacity:.55; }
  100% { opacity:0;transform:scale(1.42); }
}
@keyframes completion-sheen {
  0% { opacity:0;background-position:100% 0; }
  25% { opacity:.6; }
  75% { opacity:.6; }
  100% { opacity:0;background-position:0 0; }
}
@keyframes completion-glow {
  0%,100% { box-shadow:0 0 45px color-mix(in srgb, var(--accent) 10%, transparent); }
  50% { box-shadow:0 0 30px color-mix(in srgb, var(--accent) 26%, transparent),0 0 65px color-mix(in srgb, var(--accent) 14%, transparent); }
}
/* Home icons celebrate briefly, then respond to deliberate interaction. */
@media (prefers-reduced-motion: no-preference) {
  .today-screen .hero .orbit {
    animation:completion-spring 1050ms both, home-orbit-glow 1400ms 800ms ease-in-out 2;
  }
  .today-screen .hero .orbit::before { animation:home-ring 1400ms 400ms ease-out 2; }
  .today-screen .hero .orbit::after { animation:home-satellite 1400ms 400ms ease-in-out 2; }
  .today-screen .hero .orbit.is-complete svg path {
    stroke-dasharray:24;stroke-dashoffset:0;
    animation:completion-check 450ms 350ms cubic-bezier(.22,1,.36,1) backwards;
  }
  .today-screen .stats-row .mini-stat:first-child .stat-icon svg {
    transform-origin:50% 85%;animation:home-flame 850ms 450ms ease-in-out 2;
  }
  .today-screen .stats-row .mini-stat:nth-child(2) .stat-icon svg {
    animation:home-icon-pop 800ms 600ms both;
  }
  .today-screen .focus-chip svg { animation:home-icon-pop 750ms 650ms backwards; }
  .today-screen .focus-chip:nth-child(2) svg { animation-delay:750ms; }
  .today-screen .focus-chip:nth-child(3) svg { animation-delay:850ms; }
  .today-screen .reminder-banner>svg:first-child {
    transform-origin:50% 15%;animation:home-bell 1000ms 900ms both;
  }
  .device:has(.today-screen) .nav-item.active svg { animation:home-icon-pop 800ms 150ms backwards; }
  .today-screen .focus-chip svg,.today-screen .hero .primary svg,
  .device:has(.today-screen) .nav-item svg { transition:transform 220ms cubic-bezier(.22,1,.36,1); }
  .today-screen .focus-chip:is(:hover,:focus-visible) svg,
  .device:has(.today-screen) .nav-item:is(:hover,:focus-visible) svg { transform:translateY(-2px) scale(1.08); }
  .today-screen .hero .primary:is(:hover,:focus-visible) svg { transform:translateX(3px); }
  .today-screen .reminder-banner:is(:hover,:focus-visible)>svg:first-child { animation:home-bell-hover 850ms; }
}
@keyframes home-orbit-glow {
  0%,100% { box-shadow:0 0 0 transparent; }
  50% { box-shadow:0 0 25px color-mix(in srgb, var(--accent-label) 24%, transparent); }
}
@keyframes home-ring {
  0%,100% { transform:scale(1);opacity:1; }
  48% { transform:scale(1.15);opacity:.45; }
}
@keyframes home-satellite {
  0%,100% { transform:scale(1); }
  48% { transform:scale(1.25); }
}
@keyframes home-icon-pop {
  0% { transform:translateY(5px) scale(.8); }
  45% { transform:translateY(-3px) scale(1.14); }
  72% { transform:translateY(1px) scale(.97); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes home-flame {
  0%,100% { transform:rotate(0) scale(1); }
  30% { transform:rotate(-9deg) scale(1.12); }
  65% { transform:rotate(6deg) scale(1.05); }
}
@keyframes home-bell {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(13deg); }
  40% { transform:rotate(-10deg); }
  60% { transform:rotate(6deg); }
  80% { transform:rotate(-3deg); }
}
@keyframes home-bell-hover {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(13deg); }
  40% { transform:rotate(-10deg); }
  60% { transform:rotate(6deg); }
  80% { transform:rotate(-3deg); }
}
html { scroll-behavior:smooth; }
body { display:block;padding:0;min-height:100dvh;font-size:var(--text-body); }
body::before { z-index:-1; }
button,input,select { font:inherit; }
.site-header { max-width:1360px;padding:28px 48px;margin:auto;display:flex;align-items:center;gap:30px; }
.site-brand { display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-size:var(--text-title);font-weight:780;letter-spacing:-1.3px;line-height:1; }
.site-brand .brand-wordmark { display:block;flex:none;height:38px;width:auto; }
.brand-suffix { display:block;width:min-content;font-size:var(--text-caption);letter-spacing:1.4px;font-weight:600;line-height:1.25;margin:0; }
.site-tagline { font-size:var(--text-footnote);letter-spacing:.1px;color:var(--muted);line-height:1.5; }
.header-account { margin:0 0 0 auto;padding:10px 18px;width:auto;font-size:var(--text-footnote);min-height:43px; }
.web-layout { position:relative;display:grid;grid-template-columns:minmax(275px,.75fr) minmax(0,1fr);gap:80px;max-width:1230px;margin:38px auto 55px;padding:0 38px;align-items:start; }
.website-intro { position:sticky;top:75px;padding-top:60px; }
.website-intro h1 { font-size:var(--text-hero);font-weight:630;line-height:1.08;letter-spacing:-2.8px;margin:24px 0; }
.website-intro h1 em { color:var(--accent-label);font-style:normal; }
.website-intro p { font-size:var(--text-body);line-height:1.75;color:var(--muted); }
.intro-detail { display:flex;align-items:center;gap:9px;margin-top:43px;font-size:var(--text-caption);letter-spacing:1.3px;font-weight:650; }
.intro-dot { width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow); }
.website-intro .intro-fine { max-width:335px;font-size:var(--text-footnote); }
.website-intro .editorial-notice { max-width:345px;margin-top:40px;border-top:1px solid var(--line);padding-top:20px;font-size:var(--text-caption);line-height:1.8; }
.device { width:100%;height:auto;min-height:740px;border:1px solid var(--edge);border-radius:25px;overflow:visible;zoom:1;box-shadow:0 22px 80px var(--shadow); }
.app { overflow:visible;flex:1;scrollbar-width:auto; }
.screen { padding:23px 30px 27px; }
.account-status { border-bottom:1px solid var(--line);padding:14px 25px;min-height:47px;display:flex;gap:9px;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--text-footnote);line-height:1.5; }
.account-status[hidden] { display:none; }
.account-status strong { color:var(--text);font-weight:500;overflow-wrap:anywhere; }
.account-status .text-button { flex-shrink:0;font-size:var(--text-footnote);min-height:30px; }
.account-status.is-saving { color:var(--accent-label); }
.account-status.is-error { color:var(--danger); }
.home-title { font-size:var(--text-display); }
.hero { padding:25px; }
.hero-description { font-size:var(--text-footnote);max-width:270px; }
.hero h2 { font-size:var(--text-title); }
.hero-meta,.hero-footer { font-size:var(--text-caption); }
.primary,.secondary { font-size:var(--text-body);min-height:47px; }
.navigation { position:sticky;bottom:14px;margin:0 14px 14px;min-height:66px;flex-shrink:0; }
.no-nav .navigation { display:none; }
.topbar { display:none; }
.section-heading h2 { font-size:var(--text-heading); }
.text-button { font-size:var(--text-footnote); }
.focus-row { flex-wrap:wrap; }
.focus-chip { font-size:var(--text-caption); }
.question-stem { font-size:var(--text-reading);line-height:1.65; }
.answer-option { font-size:var(--text-body); }
.feedback p { font-size:var(--text-body);line-height:1.75; }
.quiz-screen { padding-bottom:0; }
.quiz-bottom { position:sticky;bottom:0;margin-left:-30px;margin-right:-30px;padding:18px 30px;border-radius:0 0 25px 25px; }
.quiz-bottom .note { font-size:var(--text-caption);margin-bottom:0; }
.modal-overlay { position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:22px; }
.modal { border-radius:23px;max-width:490px;max-height:calc(100dvh - 44px);overflow:auto;width:100%;padding:28px; }
.modal-handle { display:none; }
.modal p { font-size:var(--text-body);line-height:1.65; }
.modal .note { font-size:var(--text-caption); }
.modal-icon { margin-top:0; }
.modal-heading h2 { font-size:var(--text-title); }
.toast { position:fixed;z-index:50;left:50%;bottom:28px;right:auto;transform:translate(-50%,20px);max-width:520px;width:calc(100% - 32px);font-size:var(--text-footnote);text-align:center;pointer-events:none; }
.toast.visible { transform:translate(-50%,0); }
.site-footer { max-width:1270px;margin:0 auto;padding:10px 38px 26px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:var(--text-caption);color:var(--muted); }
.auth-form .form-field { margin:17px 0; }
.auth-form input { width:100%;font-size:var(--text-input);min-height:47px;border-radius:10px; }
.auth-form .form-field label { display:block;margin-bottom:7px;color:var(--muted);font-size:var(--text-footnote); }
.auth-links { display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:17px; }
.form-status { min-height:22px;color:var(--muted);font-size:var(--text-footnote);line-height:1.55; }
.form-status.is-error { color:var(--danger); }
.account-email { overflow-wrap:anywhere; }
.account-card { border:1px solid var(--line);border-radius:16px;padding:20px;margin:24px 0; }
.account-card p { margin-top:0;font-size:var(--text-footnote);color:var(--muted); }
.gate-screen { padding:44px 30px; }
.gate-screen h1 { font-size:var(--text-display);letter-spacing:-1px;line-height:1.15; }
.gate-screen p { color:var(--muted);line-height:1.75; }
.gate-screen .primary { margin-top:24px; }
.cloud-note { display:flex;gap:8px;align-items:center;font-size:var(--text-caption);color:var(--muted);margin-top:16px; }
.cloud-note svg { width:14px;height:14px;color:var(--accent-label); }
.skip-link { position:fixed;top:-100px;left:16px;padding:12px;background:var(--accent);color:var(--on-accent);z-index:100; }
.skip-link:focus { top:10px; }
.noscript { padding:25px;text-align:center; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent-label);outline-offset:3px; }
body.cloud-busy .device { cursor:progress; }
@media(min-width:1400px) { .web-layout { grid-template-columns:450px minmax(0,650px);max-width:1330px;gap:110px; } }
@media(max-width:1000px) { .web-layout { gap:35px;grid-template-columns:minmax(240px,.65fr) minmax(0,1fr);padding:0 25px; }.site-header { padding:24px 25px; }.site-tagline { display:none; }.website-intro h1 { font-size:var(--text-hero); }.screen { padding:23px; }.quiz-bottom { margin-left:-23px;margin-right:-23px;padding-left:23px;padding-right:23px; } }
@media(max-width:760px) { .web-layout { grid-template-columns:1fr;gap:0;margin:5px auto 20px;max-width:620px;padding:0 18px; }.website-intro { position:static;padding:12px 7px 25px; }.website-intro h1 { font-size:var(--text-hero);letter-spacing:-1.5px;margin:15px 0; }.website-intro h1 br:first-child { display:none; }.website-intro>p { font-size:var(--text-footnote); }.website-intro .intro-detail,.website-intro .intro-fine,.website-intro .editorial-notice { display:none; }.site-header { max-width:620px;padding:20px 23px; }.site-brand { font-size:var(--text-title); }.device { min-height:670px; }.site-footer { max-width:620px;padding:10px 25px 26px;flex-wrap:wrap;gap:4px; }.navigation { bottom:max(10px,env(safe-area-inset-bottom)); }.home-title { font-size:var(--text-display); }.screen { padding:20px; }.quiz-bottom { margin-left:-20px;margin-right:-20px;padding:16px 20px; }.account-status { padding:10px 20px; }.modal-overlay { padding:14px; }.modal { padding:24px;max-height:calc(100dvh - 28px); }.community-map-stage { min-width:0; }.hero { padding:22px; }.hero-description { font-size:var(--text-footnote); }.hero h2 { font-size:var(--text-title); } }
@media(max-width:380px) { .web-layout { padding:0 10px; }.screen { padding:18px; }.home-title { font-size:var(--text-display); }.orbit { width:55px;height:55px; }.hero { padding:19px; }.account-status { padding:10px 16px; }.site-header { padding:18px; }.header-account { padding:9px 12px; }.focus-chip { font-size:var(--text-caption); }.quiz-bottom { margin-left:-18px;margin-right:-18px;padding:16px 18px; } }

@media(max-width:760px) { body.is-member .website-intro { display:none; } .app { scroll-margin-top:20px; } }

/* Guest practice opens on the question, with account choices after the round. */
body.guest-practice .website-intro { display:none; }
body.guest-practice .web-layout { display:block;max-width:860px;margin-top:14px; }
body.guest-practice.practice-focus .device { min-height:0; }
body.guest-practice.practice-focus .site-header { max-width:1050px;padding-top:20px;padding-bottom:16px; }
body.guest-practice.practice-focus .account-status { min-height:39px;padding-top:7px;padding-bottom:7px; }
body.guest-practice.practice-focus .screen { padding-top:18px; }
body.guest-practice.practice-focus .question-title { font-size:var(--text-title);line-height:1.15;margin-top:13px; }
body.guest-practice.practice-focus .question-stem { font-size:var(--text-reading);line-height:1.6; }
.draft-strip { color:var(--muted);font-size:var(--text-caption);line-height:1.5;margin:0 0 18px; }
.guest-save-card,.guest-import-card { background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:17px;padding:22px;margin:24px 0;text-align:left; }
.guest-save-card h2 { font-size:var(--text-heading);letter-spacing:-.6px;margin:0 0 10px; }
.guest-save-card p,.guest-import-card p { font-size:var(--text-footnote);line-height:1.65;color:var(--muted);margin:8px 0 17px; }
.guest-save-card .note { font-size:var(--text-caption);margin-bottom:0; }
.guest-import-card { margin:0 0 23px; }
.guest-import-card .primary { font-size:var(--text-body); }
.guest-import-card .text-button { display:block;margin:8px auto 0; }
.guest-import-card .account-email { color:var(--text); }
.import-conflicts { border-left:2px solid var(--accent-line);padding-left:14px;margin:20px 0; }
.import-conflicts p { font-size:var(--text-footnote); }
.completion .completion-learning-note { font-size:var(--text-footnote); }
.completion-later { display:block;margin:14px auto;min-height:40px; }
@media(max-width:760px) {
 body.guest-practice.practice-focus .web-layout { margin-top:0;padding:0 10px; }
 body.guest-practice.practice-focus .site-header { padding:14px 20px; }
 body.guest-practice.practice-focus .site-brand { font-size:var(--text-heading); }
 body.guest-practice.practice-focus .site-brand .brand-wordmark { height:32px; }
 body.guest-practice.practice-focus .brand-suffix { font-size:var(--text-caption); }
 body.guest-practice.practice-focus .header-account { min-height:38px;padding:8px 12px;font-size:var(--text-footnote); }
 body.guest-practice.practice-focus .question-title { font-size:var(--text-title); }
 body.guest-practice.practice-focus .question-stem { font-size:var(--text-reading);line-height:1.55; }
 body.guest-practice.practice-focus .quiz-header { margin-bottom:13px; }
 body.guest-practice.practice-focus .answer-option { min-height:48px;padding:11px;font-size:var(--text-body); }
 body.guest-practice.practice-focus .draft-strip { font-size:var(--text-caption);margin-bottom:13px; }
 body.guest-practice.practice-focus .quiz-bottom { padding-top:13px;padding-bottom:13px; }
 .guest-save-card,.guest-import-card { padding:18px; }
}

.guest-loading { padding:35px 8px; }.guest-loading h1 { font-size:var(--text-display);line-height:1.2;letter-spacing:-1px; }.guest-loading p { color:var(--muted);font-size:var(--text-body); }

@media(max-width:1000px) {
  .site-header { flex-wrap:wrap;column-gap:16px;row-gap:9px; }
  .site-header .site-tagline { display:block;order:3;flex-basis:100%;font-size:var(--text-footnote); }
}

.intro-about { margin-top:20px; }.auth-divider { display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:var(--text-caption); }.auth-divider::before,.auth-divider::after { content:'';height:1px;background:var(--line);flex:1; }.google-auth-button { display:block;width:180px;height:40px;margin:16px auto 0;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer; }.google-auth-button img { display:block;width:180px;height:40px; }.google-auth-button:focus-visible { outline:3px solid var(--accent-label);outline-offset:4px; }.google-auth-button:disabled { opacity:.55;cursor:wait; }

/* Answer results use text, icons, and opaque color surfaces together. */
:root { --result-correct: color-mix(in srgb, var(--success) 20%, var(--canvas)); --result-missed: color-mix(in srgb, var(--danger) 18%, var(--canvas)); }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.answer-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }
.answer-options.is-answered .answer-option { opacity:1;-webkit-text-fill-color:currentColor;cursor:default; }
.answer-options.is-answered .answer-option.correct { background:var(--result-correct);border:2px solid var(--success);color:var(--text);box-shadow:none; }
.answer-options.is-answered .answer-option.incorrect { background:var(--result-missed);border:2px solid var(--danger);color:var(--text);box-shadow:none; }
.answer-options.is-answered .answer-option.correct .answer-letter { color:var(--on-success);background:var(--success);border-color:var(--success); }
.answer-options.is-answered .answer-option.incorrect .answer-letter { color:var(--on-danger);background:var(--danger);border-color:var(--danger); }
.answer-result-label { display:flex;align-items:center;gap:6px;font-size:var(--text-caption);font-weight:750;line-height:1.4; }
.answer-result-label svg { width:17px;height:17px;stroke-width:2.7;flex-shrink:0; }
.answer-result-summary { display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;border:2px solid;padding:10px 13px;border-radius:11px;margin:0 0 11px;font-size:var(--text-body);line-height:1.35; }
.answer-result-summary svg { width:21px;height:21px;stroke-width:2.7;flex-shrink:0; }
.answer-result-summary strong { font-size:var(--text-body); }
.answer-result-summary span { margin-left:auto;font-size:var(--text-footnote); }
.answer-result-summary.is-correct,.feedback-status.is-correct { color:var(--text);background:var(--result-correct);border-color:var(--success); }
.answer-result-summary.is-correct svg,.feedback-status.is-correct svg { color:var(--success); }
.answer-result-summary.is-incorrect,.feedback-status.is-incorrect { color:var(--text);background:var(--result-missed);border-color:var(--danger); }
.answer-result-summary.is-incorrect svg,.feedback-status.is-incorrect svg { color:var(--danger); }
.feedback-status { display:flex;align-items:center;gap:10px;border:2px solid;border-radius:12px;padding:13px 15px;margin:0 0 17px;font-size:var(--text-heading);font-weight:750; }
.feedback-status svg { width:25px;height:25px;stroke-width:2.7; }
.quiz-bottom { z-index:3; }
.feedback { margin-top:36px;border-top:2px solid var(--line-strong);padding-top:30px;scroll-margin-top:20px; }
.question-tools { display:flex;margin:-5px 0 18px; }
.lab-reference-button { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-raised);color:var(--text);font-size:var(--text-footnote);font-weight:700;box-shadow:0 2px 0 var(--shadow),var(--shadow-soft);cursor:pointer;transition:background .15s,box-shadow .15s; }
.lab-reference-button svg { width:18px;height:18px;stroke-width:2;flex-shrink:0; }
.lab-reference-button .lab-reference-arrow { margin-left:7px; }
.lab-reference-button:enabled:hover { background:color-mix(in srgb, var(--text) 7%, var(--surface-raised));box-shadow:0 2px 0 var(--shadow),var(--shadow-card); }
.lab-reference-button:enabled:active { background:color-mix(in srgb, var(--text) 13%, var(--surface-raised));box-shadow:0 1px 0 var(--shadow); }
.lab-reference-button:focus-visible { outline:3px solid var(--accent-label);outline-offset:4px; }
.lab-reference-button:disabled { opacity:.6;cursor:wait; }
.modal.lab-reference-modal { --lab-dialog-padding:24px;max-width:680px;padding:0;overscroll-behavior:contain; }
.lab-reference-modal .modal-icon { display:none; }
.lab-reference-modal .modal-heading { position:sticky;top:0;z-index:2;background:var(--surface-solid);margin:0;padding:20px var(--lab-dialog-padding) 15px;border-bottom:1px solid var(--line-strong); }
.lab-reference-content { padding:18px var(--lab-dialog-padding) var(--lab-dialog-padding); }
.lab-reference-modal .modal-heading h2 { font-size:var(--text-heading); }
.lab-reference-modal .modal-heading .icon-button { width:42px;height:42px;margin-top:-5px; }
.lab-values-table { border-collapse:collapse;width:100%;margin:23px 0 28px;font-size:var(--text-footnote);line-height:1.45;table-layout:fixed; }
.lab-values-table caption { text-align:left;font-size:var(--text-body);font-weight:650;color:var(--text);padding-bottom:10px; }
.lab-values-table th,.lab-values-table td { text-align:left;vertical-align:top;border-bottom:1px solid var(--line-strong);padding:9px 8px;overflow-wrap:anywhere; }
.lab-values-table thead th { color:var(--text-soft);background:var(--surface-raised);font-size:var(--text-caption);font-weight:600; }
.lab-values-table th:first-child { width:44%;padding-left:0; }
.lab-values-table th:nth-child(2) { width:29%; }
.lab-values-table th:nth-child(3) { width:27%; }
.lab-values-table tbody th { color:var(--text);font-weight:500; }
.lab-values-table td { color:var(--text-soft); }
.lab-values-table th small { display:block;font-size:var(--text-caption);font-weight:400;color:var(--muted);margin-top:4px; }
.lab-reference-content>.lab-values-table:first-child { margin-top:0; }
.lab-values-matches caption { color:var(--accent-label); }
.lab-values-table .lab-value-highlight th,.lab-values-table .lab-value-highlight td { background:var(--accent-soft);color:var(--text);border-bottom-color:var(--accent-line); }
.lab-values-table .lab-value-highlight th:first-child { border-left:3px solid var(--accent);padding-left:10px; }
.lab-values-table .lab-value-highlight th small { color:var(--text-soft); }
.lab-reference-sources { border-top:1px solid var(--line);padding-top:15px;margin-bottom:23px; }
.lab-reference-sources h3 { margin:0 0 10px;font-size:var(--text-body); }
.lab-reference-sources ul { padding-left:19px;margin:0; }
.lab-reference-sources li { font-size:var(--text-caption);line-height:1.6;margin-bottom:9px; }
.lab-reference-sources a { color:var(--accent-label); }
.lab-reference-sources li span { display:block;color:var(--muted); }
@media(max-width:480px) {
  .answer-result-summary { padding:9px 10px;gap:7px; }
  .answer-result-summary strong { font-size:var(--text-body); }
  .answer-result-summary span { font-size:var(--text-footnote); }
  .answer-result-label { font-size:var(--text-caption); }
  .modal.lab-reference-modal { --lab-dialog-padding:20px; }
  .lab-reference-modal .modal-heading h2 { font-size:var(--text-heading); }
  .lab-values-table { font-size:var(--text-footnote); }
  .lab-values-table th,.lab-values-table td { padding:9px 5px; }
  .lab-values-table th:first-child { width:44%; }
  .lab-values-table th:nth-child(2) { width:28%; }
  .lab-values-table th:nth-child(3) { width:28%; }
}

/* Daily email reminder controls and the standalone opt-out page. */
#reminder-time,#reminder-zone { width:100%;min-height:48px;font-size:var(--text-input);border-radius:10px;padding:11px 12px; }
#reminder-zone { color:var(--text);background:var(--input);border:1px solid var(--line-strong); }
#reminder-zone option { color:var(--text);background:var(--input); }
.reminder-optout-page { min-height:100dvh;display:grid;place-items:center;padding:24px; }
.reminder-optout-card { width:min(100%,480px);padding:32px;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface-solid);box-shadow:var(--shadow-card); }
.reminder-optout-card h1 { margin:32px 0 16px;font-size:var(--text-title);letter-spacing:-.6px; }
.reminder-optout-card p { color:var(--muted);font-size:var(--text-body);line-height:1.7; }
.reminder-optout-card .primary { margin-top:26px; }
.reminder-optout-card a.primary { text-decoration:none; }
.reminder-optout-card .secondary { display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:12px; }
@media(max-width:420px) { .reminder-optout-card { padding:24px; }.reminder-optout-page { padding:16px; } }
.footer-links { display:flex;gap:18px;align-items:center;flex-wrap:wrap; }
.question-meta .report-link { color:var(--muted);text-decoration:underline;text-underline-offset:2px; }
.question-meta .report-link:hover,.question-meta .report-link:focus-visible { color:var(--text); }
.account-links { text-align:center;margin-top:14px; }
.account-links a { color:var(--muted); }
.account-links .quiet-link { font-size:var(--text-caption);color:var(--muted);min-height:0;padding:0;text-decoration:underline;text-underline-offset:2px; }

/* Membership: free starter round, then a 7-day trial and $9.99/month. */
.hero-locked .secondary { width:100%;margin-top:10px; }
.hero-locked .orbit svg { width:22px;height:22px; }
.membership-card { background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:17px;padding:22px;margin:16px 0 4px; }
.membership-card h2 { font-size:var(--text-heading);letter-spacing:-.5px;margin:7px 0 8px; }
.membership-card p { font-size:var(--text-footnote);line-height:1.6;color:var(--muted);margin:0 0 16px; }
.membership-card .note,.membership-offer .note { font-size:var(--text-caption);margin:12px 0 0;text-align:center; }
.membership-benefits { list-style:none;padding:0;margin:18px 0; }
.membership-benefits li { display:flex;gap:11px;align-items:flex-start;margin:0 0 13px; }
.membership-benefits li>svg { flex-shrink:0;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:2.4; }
.membership-benefits strong { display:block;font-size:var(--text-footnote);margin-bottom:2px; }
.membership-benefits span { font-size:var(--text-caption);line-height:1.5;color:var(--muted); }
.membership-price { display:flex;flex-direction:column;gap:3px;margin:4px 0 16px; }
.membership-price strong { font-size:var(--text-heading);letter-spacing:-.6px; }
.membership-price span { font-size:var(--text-caption);color:var(--muted); }
.membership-status { font-size:var(--text-footnote);line-height:1.55;color:var(--text); }
.account-card .text-button { display:block;margin:10px auto 0; }
@media(max-width:760px) { .membership-card { padding:18px; } }

/* ===== Polish, September 24, 2026 ===== */
/* The verdict is stated once, in the app's voice, without a heavy box. */
.feedback-status,.feedback-status.is-correct,.feedback-status.is-incorrect { border:0;background:none;padding:0;margin:0 0 14px;font-size:var(--text-heading);font-weight:700; }
.feedback-status.is-correct,.feedback-status.is-correct svg { color:var(--success); }
.feedback-status.is-incorrect,.feedback-status.is-incorrect svg { color:var(--danger); }
.feedback-status svg { width:21px;height:21px;stroke-width:2.2; }
.answer-result-label .drawn-check { width:17px;height:17px;stroke-width:2.7; }
.hero-ring .ring-center svg { width:24px;height:24px; }
/* The header lines up with the content below it. */
@media(min-width:1001px) { .site-header { max-width:1230px;padding-left:38px;padding-right:38px; } body.guest-practice.practice-focus .site-header { max-width:860px; } }
@media(min-width:1400px) { .site-header { max-width:1330px; } body.guest-practice.practice-focus .site-header { max-width:860px; } }
@media(max-width:760px) { .site-header,body.guest-practice.practice-focus .site-header { padding-left:18px;padding-right:18px; } }
/* Wide screens: the explanation sits beside the question from the start (desktop.css). */

/* About Roundsly, after the free round (guests, and non-members once billing is on). */
.nowrap { white-space:nowrap; }
.about-rounds { container-type:inline-size;text-align:left;margin:30px 0 6px;padding-top:26px;border-top:1px solid var(--line); }
.about-rounds h2 { font-size:var(--text-heading);font-weight:680;letter-spacing:-.4px;margin:0 0 6px; }
.about-lede { font-size:var(--text-footnote);line-height:1.65;color:var(--muted);margin:0 0 16px; }
.about-facts { display:grid;gap:10px; }
.about-facts .white-card { padding:16px; }
.about-facts h3 { margin-bottom:7px; }
.about-facts p { font-size:var(--text-footnote);line-height:1.65;color:var(--muted);margin:0; }
.about-faq { margin-top:22px; }
.about-faq h3 { font-size:var(--text-body);font-weight:680;margin:0 0 4px; }
.about-faq details { border-top:1px solid var(--line); }
.about-faq details:last-child { border-bottom:1px solid var(--line); }
.about-faq summary { display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;list-style:none;font-size:var(--text-body);font-weight:620;color:var(--text); }
.about-faq summary::-webkit-details-marker { display:none; }
.about-faq summary .chevron { width:15px;height:15px;margin-left:auto;flex-shrink:0;color:var(--muted);transition:transform .2s ease; }
.about-faq details[open] summary .chevron { transform:rotate(90deg); }
.about-faq details p { font-size:var(--text-footnote);line-height:1.65;color:var(--muted);margin:0 0 14px;padding-right:27px; }
.about-faq summary:focus-visible { outline:3px solid var(--accent-label);outline-offset:3px;border-radius:6px; }
.about-rounds>.note { margin:16px 0 0; }
@container (min-width:640px) { .about-facts { grid-template-columns:repeat(2,1fr); } }
@media (hover:hover) { .about-faq summary:hover { color:var(--accent-label); } }
@media (prefers-reduced-motion:reduce) { .about-faq summary .chevron { transition:none; } }

/* Fewer words, September 24 evening: tab screens open with a plain title instead of an all-caps eyebrow and a slogan. */
.page-top { margin-bottom: 18px; }
.page-title { margin: 0; font-size: var(--text-title); font-weight: 700; letter-spacing: -.6px; line-height: 1.15; color: var(--text); }
.today-screen .date-line { margin-bottom: 12px; }
.community-below-note { justify-content: flex-end; }
/* The hero's detail row is gone, so the button keeps its breathing room on its own. */
.hero > .hero-top + button { margin-top: 20px; }
/* Round review: "Review all 10" sits under "Review your 3 misses". The ← → hint is for mouse users on wide windows (desktop.css). */
.review-all { display:block;margin:10px auto 0;min-height:44px;padding:0 12px; }
.review-keys { display:none; }
.hero > .review-all { margin:6px auto -12px; }

/* Practice record dialog (Progress › Practice record): name, period, PDF first, CSV second. */
.modal .form-field select, .modal .form-field input[type=date] { width:100%; border:1px solid var(--line-strong); border-radius:12px; background:var(--input); color:var(--text); padding:11px 12px; min-height:47px; font-size:var(--text-input); }
.modal .record-dates { grid-template-columns:auto 1fr; align-items:center; column-gap:12px; }
.modal .record-dates[hidden] { display:none; }
.modal .record-summary { font-size:var(--text-footnote); color:var(--text-soft); margin:6px 0 14px; }
.modal .record-csv { display:block; margin:12px auto 0; font-size:var(--text-footnote); color:var(--accent-label); }
.modal .record-csv:disabled { opacity:.45; }
.modal .record-note { font-size:var(--text-caption); line-height:1.6; margin-top:16px; }

/* ===== Answer reveal, September 25, 2026 (Docs/Brand-direction.md, "Voice for results") =====
   Checking an answer never scrolls away from the choices. A wrong pick turns red with an X and "Your answer · Incorrect", the
   answer turns green with a check and "Correct answer" (or "Your answer · Correct"), and the other choices fade back. A verdict
   bar above the button states the result and goes to the explanation. Tinted surfaces use --tint-soft over the solid surface
   (the reduced-transparency formula in glass.css), so the red and green labels keep at least 4.5:1 in Clinical Light. */
.answer-copy { flex:1; }
.answer-options.is-answered .answer-option.correct { background:color-mix(in srgb, var(--success) var(--tint-soft), var(--surface-solid)); }
.answer-options.is-answered .answer-option.incorrect { background:color-mix(in srgb, var(--danger) var(--tint-soft), var(--surface-solid)); }
.answer-options.is-answered .answer-option.dimmed { opacity:.5; }
.answer-result-label { font-weight:700; }
.answer-option.correct .answer-result-label { color:var(--success); }
.answer-option.incorrect .answer-result-label { color:var(--danger); }
.result-mark { display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%; }
.result-mark svg { width:14px;height:14px;stroke-width:3; }
.result-mark .drawn-check { width:16px;height:16px;stroke-width:2.8; }
.result-mark.is-correct { background:var(--success);color:var(--on-success); }
.result-mark.is-incorrect { background:var(--danger);color:var(--on-danger); }
.answer-options.revealed .result-mark { animation:status-in .28s ease-out both;animation-delay:.06s; }
.verdict-bar { display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0 0 10px;padding:10px 14px 10px 12px;border:1.5px solid;border-radius:16px;color:var(--text);text-align:left;transition:border-color .15s; }
.verdict-bar.is-correct { background:color-mix(in srgb, var(--success) var(--tint-soft), var(--surface-solid));border-color:var(--success-line); }
.verdict-bar.is-incorrect { background:color-mix(in srgb, var(--danger) var(--tint-soft), var(--surface-solid));border-color:var(--danger-line); }
.verdict-bar .result-mark { width:28px;height:28px; }
.verdict-bar .result-mark svg { width:16px;height:16px; }
.verdict-copy { display:flex;flex-direction:column;gap:1px;flex:1;min-width:0; }
.verdict-copy strong { font-size:var(--text-body);font-weight:750;line-height:1.3; }
.verdict-bar.is-correct .verdict-copy strong { color:var(--success); }
.verdict-bar.is-incorrect .verdict-copy strong { color:var(--danger); }
.verdict-copy span { font-size:var(--text-body);line-height:1.35;color:var(--text); }
.verdict-chevron { width:18px;height:18px;flex-shrink:0;stroke-width:2.2;color:var(--accent-label);transform:rotate(90deg); }
.verdict-bar:focus-visible { outline:3px solid var(--accent-label);outline-offset:3px; }
.verdict-bar.revealed { animation:verdict-in .24s ease-out both; }
@keyframes verdict-in { from { opacity:0;transform:translateY(6px); } }
@media (hover:hover) and (pointer:fine) { .verdict-bar.is-correct:hover { border-color:var(--success); } .verdict-bar.is-incorrect:hover { border-color:var(--danger); } }
/* The explanation is headed "Explanation" (the verdict is already on the choices and in the bar). After a miss it starts with
   your answer and the correct answer, each with why it does or doesn't fit. */
.feedback-heading { margin:0 0 14px;font-size:var(--text-heading);font-weight:700;letter-spacing:-.3px;line-height:1.25;color:var(--text); }
.feedback-heading:focus { outline:none; }
.choice-reasons { display:grid;gap:16px;margin:0 0 18px; }
.choice-reason { display:flex;align-items:flex-start;gap:12px; }
.choice-reason .answer-letter { width:28px;height:28px;border:0;font-size:var(--text-footnote);font-weight:700; }
.choice-reason.is-incorrect .answer-letter { background:var(--danger);color:var(--on-danger); }
.choice-reason.is-correct .answer-letter { background:var(--success);color:var(--on-success); }
.choice-reason-copy { display:flex;flex-direction:column;gap:3px;min-width:0; }
.choice-role { font-size:var(--text-caption);font-weight:750;line-height:1.3; }
.choice-reason.is-incorrect .choice-role { color:var(--danger); }
.choice-reason.is-correct .choice-role { color:var(--success); }
.choice-reason strong { font-size:var(--text-body);font-weight:650;line-height:1.45;color:var(--text); }
.feedback .choice-reason p { margin:2px 0 0;font-size:var(--text-body);line-height:1.65;color:var(--muted); }
.feedback .section-heading h3 { margin:0;font-size:var(--text-heading);font-weight:680;letter-spacing:-.2px; }