/* Site pages (everything except the test-day interface, which has test.css). */

:root {
  --navy: #002c57;
  --navy-2: #0b3d73;
  --navy-ink: #0d1b2a;
  --ink: #1d2733;
  --muted: #5b6776;
  --line: #dfe3e8;
  --bg: #f5f7fa;
  --card: #ffffff;
  --accent: #f0b429;
  --accent-ink: #3d2c00;
  --ok: #1e7b46;
  --ok-bg: #e6f4ec;
  --bad: #b42318;
  --bad-bg: #fdecea;
  --warn: #9a5b00;
  --warn-bg: #fff4dc;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15.5px; line-height: 1.55; display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--navy-2); }
a:hover { color: var(--navy); }
h1, h2, h3 { color: var(--navy-ink); line-height: 1.25; }
h1 { font-size: 30px; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 0 0 14px; }
h3 { font-size: 16px; margin: 0 0 10px; }
code { font-family: Consolas, 'Courier New', monospace; font-size: 0.9em; background: #eef1f5; padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 2px solid #3b73c8; outline-offset: 2px; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
.container.wide { max-width: 1400px; }
.page { flex: 1; padding: 28px 0 56px; }
.home .page { padding-top: 0; }
.center { text-align: center; }
.center-block { text-align: center; padding-top: 60px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.mono { font-family: Consolas, 'Courier New', monospace; font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.center, td.center { text-align: center; }
.mt { margin-top: 26px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.page-head { margin-bottom: 22px; }
.page-head p { margin: 0; }
.crumbs { margin: 0 0 2px; font-size: 14px; }
.crumbs a { text-decoration: none; }
.code { display: inline-block; min-width: 34px; font-family: Consolas, monospace; font-size: 12.5px; font-weight: 600; color: var(--navy-2); }
.warn-text { color: var(--warn); }

/* ---------- nav ---------- */
/* Dark bar: gold R tile with a dark serif R, white name with "Right" in gold italics, light links. */
.nav { background: #001a35; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky; top: 0; z-index: 20; }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand em { color: var(--accent); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #001a35; display: grid; place-items: center; font: 900 20px Georgia, 'Times New Roman', serif; }
.nav-links, .nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right { margin-left: auto; gap: 18px; }
.nav a:not(.btn), .linklike { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a:not(.btn) { color: #c7d3e2; }
.nav a:not(.btn):hover, .nav .linklike:hover { color: #fff; }
.nav a.brand, .nav a.brand:hover { color: #fff; }
.nav a.active { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); padding: 19px 0; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--navy-2); }
/* A long username (up to 30 characters) shortens with "…" instead of pushing Log out off the screen. */
.nav-right { min-width: 0; }
.nav .nav-user { min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Long unbroken names (usernames, test names) wrap instead of widening the page. */
.page-head h1, .table td strong { overflow-wrap: anywhere; }
.nav .linklike { color: #c7d3e2; font-weight: 500; }
form.inline { display: inline; margin: 0; }

.flash { padding: 12px 0; font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--ok); border-bottom: 1px solid #c4e5d1; }
.flash-error { background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid #f5c6c1; }
/* The trial bar: bright blue, white text, days left in a white circle, orange pill. */
.trial-bar { background: #2196f3; color: #fff; font-size: 15px; font-weight: 300; }
.trial-bar .container { display: flex; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.trial-days { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: #fff; color: #222; font-size: 12.5px; font-weight: 700; vertical-align: 1px; }
.trial-upgrade { order: -1; padding: 5px 13px; border-radius: 14px; background: #145a32; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); color: #fff; font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.trial-upgrade { color: #ffd25a; font-weight: 700; letter-spacing: 0.02em; }
.trial-upgrade:hover { background: #0e4426; color: #ffe08a; }
.trial-bar-ended { background: #d93025; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 7px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #f7c64b; color: var(--accent-ink); }
.btn-outline { background: #fff; border-color: #c9d1da; color: var(--navy-ink); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #8f1c13; }
.btn-danger-outline { background: #fff; border-color: #e7aaa4; color: var(--bad); }
.btn-danger-outline:hover { border-color: var(--bad); }
.btn.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.disabled, .btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* ---------- cards, tables, badges ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-head.pad { padding: 18px 22px 6px; }
.empty { color: var(--muted); padding: 18px 22px; margin: 0; }
.card:not(.flush) > .empty { padding: 6px 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap; }
.table th.center { text-align: center; }
.table th.num { text-align: right; } /* headers line up with their centered or right-aligned columns */
.table td { padding: 11px 14px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.card:not(.flush) .table th, .card:not(.flush) .table td { padding-left: 8px; padding-right: 8px; }
.table.compact td, .table.compact th { padding-top: 7px; padding-bottom: 7px; }
.table td .btn + .btn { margin-left: 6px; }
.table th.wide { width: 28%; }
.row-muted td { color: #7a8594; }
.pack-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; color: var(--muted); }
.pack-filter a { padding: 1px 8px; border-radius: 99px; color: var(--navy-2); font-family: ui-monospace, Consolas, monospace; text-decoration: none; }
.pack-filter a.is-on { background: var(--navy); color: #fff; }
.score { font-weight: 700; margin-right: 10px; }
a.score { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a.score:hover { text-decoration: underline; }
/* Instant hover label (a title attribute waits a second or so): below the element, or to its left with
   .tip-left, so it stays inside a scrolling list. */
.tip { position: relative; }
.tip:hover::after, .tip:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); padding: 4px 8px; border-radius: 4px; background: var(--navy-ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-decoration: none; pointer-events: none; z-index: 5; }
.tip-left:hover::after, .tip-left:focus-visible::after { left: auto; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-muted { background: #eef1f5; color: var(--muted); }

.result { font-weight: 600; }
.result-correct { color: var(--ok); }
.result-incorrect { color: var(--bad); }
.result-omitted { color: var(--muted); }
.flag-mark { color: var(--warn); }

.devnote { background: var(--warn-bg); border: 1px dashed #e0b45a; color: #6b4300; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.devnote.inline-note { margin: 8px 0 0; }

/* ---------- stats & meters ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { margin: 0; padding: 18px 20px; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 30px; font-weight: 700; color: var(--navy-ink); line-height: 1.2; margin: 4px 0 6px; }
.stat-value span { font-size: 17px; color: var(--muted); font-weight: 600; }
.stat-hero { background: var(--navy); border-color: var(--navy); }
.stat-hero .stat-label, .stat-hero .muted { color: #b9c8d9; }
.stat-hero .stat-value { color: #fff; }
/* Results page: the score and what to do next in one panel. */
.res-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 20px; }
.res-score { flex: none; min-width: 120px; }
.res-score .stat-value { font-size: 40px; margin: 0; }
.res-next { flex: 1; min-width: 260px; }
.res-next p { margin: 0 0 10px; }
.res-meta { flex-basis: 100%; margin: 0; }
.res-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; }
@media (max-width: 640px) { .res-meters { grid-template-columns: 1fr; } }

.bar { height: 8px; background: #e6eaef; border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy-2); border-radius: 99px; }
.meter { margin-bottom: 14px; }
.meter-label { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 5px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-2 > .card { margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff8e6; border: 1px solid #f3d58a; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }

.usage-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: #e6eaef; margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.u-correct { background: var(--ok); }
.u-incorrect { background: #d9534f; }
.u-omitted { background: #9aa5b1; }
.u-pending { background: var(--accent); }
.u-unused { background: #e6eaef; border: 1px solid #cfd6de; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 8px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; color: var(--navy-ink); }
.field small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.field input, .field select { height: 42px; padding: 0 12px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; font-weight: 400; color: var(--ink); background: #fff; }
.field input:focus { border-color: var(--navy-2); outline: none; box-shadow: 0 0 0 3px rgba(11, 61, 115, 0.15); }
.field input:disabled { background: #f1f3f6; color: var(--muted); }
.form .btn:not(.btn-block) { align-self: flex-start; }
.inline-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1; min-width: 180px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; margin: 10px 0 0; cursor: pointer; }
.check-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); flex: none; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 10px 14px; border-radius: 8px; font-size: 14.5px; margin-bottom: 14px; }
.alert-error { background: var(--bad-bg); color: var(--bad); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.form .form-error { margin: 0; }
.inline-form .form-error { flex-basis: 100%; }
.pad-x { padding: 0 22px; }

.auth { display: flex; justify-content: center; padding-top: 24px; }
.auth-card { width: 100%; max-width: 440px; padding: 30px; }
.auth-card h1 { font-size: 25px; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; margin-top: 12px; }

/* ---------- home ---------- */
.hero { background: radial-gradient(1200px 500px at 85% -10%, #0e4a8a 0%, transparent 60%), linear-gradient(160deg, #001f3f 0%, var(--navy) 55%, #003a70 100%); color: #fff; padding: 72px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; font-size: 44px; letter-spacing: -0.01em; margin-bottom: 6px; }
.hero h1 em { color: var(--accent); }
.hero-by { color: #9fb3c8; font-size: 17px; font-weight: 600; margin: 0 0 18px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 12px; }
.lead { font-size: 19px; color: #d9e3ee; margin: 0 0 26px; max-width: 520px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { color: #9fb3c8; font-size: 14px; margin: 12px 0 0; }

.mock { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 11px; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
.mock-head { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #d2d2d2; font-family: Verdana, sans-serif; white-space: nowrap; overflow: hidden; }
.mock-head span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mock-timer { color: #666; font-family: Arial, sans-serif; }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #d2d2d2; color: #555; }
.mock-bar i { flex: 1; height: 6px; background: #d2d2d2; border-radius: 4px; }
.mock-body { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 190px; }
.mock-stem { padding: 18px 14px 18px 26px; border-right: 1px solid #d2d2d2; }
.mock-stem b, .mock-choices b { display: block; height: 8px; background: #d9dde2; border-radius: 3px; margin-bottom: 9px; }
.mock-stem b.short { width: 60%; }
.mock-stem b.hl { background: #fff23a; width: 75%; margin-top: 16px; }
.mock-choices { padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.mock-choices div { display: flex; align-items: center; gap: 8px; border: 1px solid #d2d2d2; padding: 7px 8px; }
.mock-choices em { font-style: normal; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d3d3d3; display: grid; place-items: center; font-size: 10px; flex: none; }
.mock-choices b { flex: 1; margin: 0; height: 7px; }
.mock-choices .on { background: #ccd5dd; border-color: #ccd5dd; }
.mock-choices .on em { background: #002c57; color: #fff; border-color: #002c57; }
.mock-choices .struck b { background: repeating-linear-gradient(90deg, #c4c9cf 0 6px, transparent 6px 8px); }
.mock-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid #d2d2d2; font-weight: 700; }
.mock-confirm { background: #002c57; color: #fff; font-weight: 400; padding: 6px 22px; }

.slogans { background: var(--navy-ink); padding: 22px 0; }
.slogans ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.slogans li { color: #d9e3ee; font-weight: 600; font-size: 16px; }

.section { padding: 64px 0; }
.section-alt { background: #eaf0f6; }
.section-title { text-align: center; font-size: 28px; margin-bottom: 30px; }
.feature { margin: 0; padding: 26px; }
.feature h3 { font-size: 18px; }
.feature p { color: var(--muted); margin: 0; }
.feature-icon { width: 44px; height: 44px; border-radius: 10px; background: #e8eef5; color: var(--navy); display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; }
.pitch { margin: 0; text-align: center; }
.pitch p { font-size: 24px; line-height: 1.45; color: var(--navy-ink); font-weight: 600; margin: 0 0 14px; }
.pitch .pitch-promise { font-size: 20px; color: var(--navy-2); font-weight: 700; }
.pitch footer { color: var(--muted); font-size: 15px; }
.guarantee { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 2px solid var(--accent); border-radius: 14px; padding: 28px 30px; box-shadow: var(--shadow); }
.guarantee h2 { font-size: 22px; margin-bottom: 6px; }
.guarantee p { margin: 0 0 8px; }
.guarantee-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 26px; font-weight: 800; }
.guarantee-sm { margin: 34px 0; }
.cta-band { background: #fff; border-top: 1px solid var(--line); }
.cta-band h2 { font-size: 28px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-top: 18px; }
.plan { position: relative; display: flex; flex-direction: column; margin: 0; padding: 26px 22px; }
.plan h2 { font-size: 20px; margin-bottom: 4px; }
.plan-price { font-size: 34px; font-weight: 800; color: var(--navy-ink); margin-bottom: 4px; }
.plan-popular { border: 2px solid var(--navy); }
.plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; white-space: nowrap; }
.checks { list-style: none; padding: 0; margin: 10px 0 20px; flex: 1; }
.checks li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 14.5px; }
.checks li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
/* Plans page: what every plan includes, once, above the cards. */
.plan-includes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 6px auto 26px; flex: none; }
.plan-includes li { margin: 0; }
.plan-unit { margin: 0 0 18px; font-size: 14px; }
.plan-reset { color: var(--ok); font-weight: 600; } /* the 180 and 360-day plans' one-time reset, like UWorld's */
.plan .plan-cta { margin-top: auto; }
.plan-flag-alt { background: var(--ok); }
.plan-trial { margin: 22px 0 0; font-size: 15px; }
.faq { max-width: 760px; margin: 0 auto; }
.faq h2 { text-align: center; font-size: 24px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--navy-ink); }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* ---------- builder ---------- */
.builder .card { margin-bottom: 16px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 12px; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1.5px solid #c9d1da; border-radius: 10px; background: #fff; }
.seg-opt small { color: var(--muted); font-size: 13px; }
.seg-opt input:checked + span { border-color: var(--navy); background: #edf2f8; box-shadow: inset 0 0 0 1px var(--navy); }
.seg-opt input:focus-visible + span { outline: 2px solid #3b73c8; outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pool-waiting { margin: 12px 0 0; }
.row-action { display: inline; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid #c9d1da; border-radius: 10px; cursor: pointer; background: #fff; font-weight: 500; }
.chip input { accent-color: var(--navy); width: 15px; height: 15px; margin: 0; }
.chip:has(input:checked) { border-color: var(--navy); background: #edf2f8; }
.count { display: inline-block; min-width: 28px; padding: 0 7px; border-radius: 99px; background: #eef1f5; color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sections { display: flex; flex-direction: column; gap: 10px; }
.sec { border: 1px solid var(--line); border-radius: 10px; }
.sec-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sec-label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.sec-label input { width: 17px; height: 17px; accent-color: var(--navy); flex: none; }
.sec-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-toggle { border: 0; background: none; color: var(--navy-2); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; padding: 4px 14px 14px 40px; border-top: 1px solid #eef0f3; }
.cats[hidden] { display: none; }
.cat { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14.5px; cursor: pointer; }
.cat input { accent-color: var(--navy); width: 15px; height: 15px; flex: none; margin: 0; }
.cat-label { flex: 1; min-width: 0; }
.empty-cat { color: #9aa5b1; }
.more summary { list-style: none; display: flex; align-items: baseline; gap: 12px; cursor: pointer; }
.more summary::-webkit-details-marker { display: none; }
.more summary h2 { margin: 0; }
.more summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.more[open] summary::after { content: '▴'; }
.more-grid { margin-top: 16px; }
.more-grid > div { min-width: 0; }
.builder-submit { display: flex; flex-direction: column; gap: 10px; }
.submit-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.submit-row .btn { margin-left: auto; }
.field-count { width: 110px; }
.field-name { width: 30ch; max-width: 100%; } /* about a default name's length */
.submit-note { margin: 0; }
.cats-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.mcat-mix { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding: 3px 10px; border: 1.5px solid #c9d1da; border-radius: 8px; background: #fff; font-weight: 600; color: var(--navy-ink); cursor: pointer; }
.mcat-mix input { accent-color: var(--navy); margin: 0; }
.mcat-mix:has(input:checked) { border-color: var(--navy); background: #edf2f8; }
.mcat-mix.is-off { opacity: .5; cursor: not-allowed; }
.mcat-mix.tip:hover::after, .mcat-mix.tip:focus-within::after { width: 280px; white-space: normal; }
.sections.is-mcat { opacity: .45; pointer-events: none; }

/* ---------- My Deck ---------- */
kbd { display: inline-block; font-family: inherit; font-size: 12px; line-height: 1.5; padding: 0 6px; border: 1px solid #cfd6de; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--ink); }
.deck-empty { max-width: 760px; }
.deck-empty p { margin: 0 0 16px; }
.deck-sets td:first-child { width: 100%; }
.deck-sec td { background: #fafbfc; }
.table td.deck-cat { padding-left: 32px; }
.loot-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff8e1; border: 1px solid #f0d48a; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.loot-note > div { flex: 1; min-width: 220px; }
.loot-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e0a800; color: #fff; display: grid; place-items: center; font-size: 16px; }
.deck-nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #edf2f8; border: 1px solid #c9d7e8; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-tabs a { padding: 6px 14px; border: 1.5px solid #c9d1da; border-radius: 99px; background: #fff; color: var(--navy-ink); font-weight: 500; font-size: 14px; text-decoration: none; }
.filter-tabs a.active { border-color: var(--navy); background: #edf2f8; color: var(--navy); }
.card-list td { vertical-align: top; }
.card-prompt { font-weight: 600; color: var(--navy-ink); }
.card-answer { color: var(--muted); }
/* Drill: the cards a test tooltip linked to sit at the top (below the sticky header) and their
   background blinks softly for 3 seconds (public/js/drill.js). */
.drill-table tr[id] { scroll-margin-top: 80px; }
.drill-table tr.is-from td { animation: drill-from 1s ease-in-out 3; }
@keyframes drill-from { 0%, 100% { background: transparent; } 50% { background: var(--warn-bg); } }
@media (prefers-reduced-motion: reduce) { .drill-table tr.is-from td { animation: none; background: var(--warn-bg); } }
/* Every column as narrow as its content; Prompt and Answer share the rest. A student's dragged
   widths come inline on the header (public/js/drill.js). */
.drill-table thead th { position: relative; }
.drill-table thead th:not([data-key="prompt"]):not([data-key="answer"]):not([style*="width"]) { width: 1%; }
.drill-table td:not([data-col="prompt"]):not([data-col="answer"]) { white-space: nowrap; }
/* The table fits its box: long prompts and answers wrap, header filters and the Quiz
   buttons shrink with their column, instead of pushing Familiarity out of view. */
.drill-table td[data-col="prompt"], .drill-table td[data-col="answer"] { overflow-wrap: anywhere; }
.drill-table th .col-filter { width: 100%; min-width: 0; box-sizing: border-box; }
.drill-table th .th-stack { min-width: 0; }
.drill-table .quiz-toggle, .drill-table .quiz-on { white-space: normal; }
.col-grip { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; }
.col-grip::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: var(--line); }
/* The last column's handle stays inside the table, so it never adds a sideways scroll bar. */
.drill-table thead th:last-child .col-grip { right: 0; }
.drill-table thead th:last-child .col-grip::after { left: auto; right: 0; }
.drill-table thead th:hover .col-grip::after, .drill-table.is-resizing .col-grip::after { background: var(--navy-2); width: 2px; }
.drill-table.is-resizing { user-select: none; cursor: col-resize; }
.ctx-menu { position: absolute; z-index: 40; display: grid; min-width: 190px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); }
.ctx-menu[hidden] { display: none; }
.ctx-menu button { padding: 7px 10px; border: 0; border-radius: 5px; background: none; font: inherit; font-size: 14px; text-align: left; color: var(--ink); cursor: pointer; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: #eef3f9; outline: none; }
.th-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
/* Headers sit on one line at the bottom; the quiz dropdowns stack above Prompt and Answer. */
.drill-table thead th { vertical-align: bottom; }
.drill-table td { vertical-align: middle; }
.sort-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.sort-btn:hover { color: var(--navy-2); }
.sort-arrow { display: inline-block; width: 10px; }
th[aria-sort='descending'] .sort-arrow::after { content: '▼'; font-size: 9px; }
th[aria-sort='ascending'] .sort-arrow::after { content: '▲'; font-size: 9px; }
th[aria-sort='descending'] .sort-btn, th[aria-sort='ascending'] .sort-btn { color: var(--navy-ink); }
.drill-src { color: var(--navy-2); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.drill-src:hover { text-decoration: underline; }
.th-filter { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.col-filter { width: 130px; height: 26px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink); background: #fff; }
select.col-filter { width: auto; padding: 2px 4px; cursor: pointer; }
.col-filter:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 2px rgba(11, 61, 115, 0.15); }
/* The quiz options: a small, quiet group above the table's right end. */
.quiz-opts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; margin: 0 2px 6px; font-size: 12.5px; color: var(--muted); }
/* "How to play": a link-like summary that opens a small panel below it, over the table. */
.quiz-help { position: relative; margin-right: auto; }
.quiz-help summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--navy-2); text-decoration: underline; text-underline-offset: 2px; }
.quiz-help summary::-webkit-details-marker { display: none; }
.quiz-help-body { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(420px, calc(100vw - 32px)); padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); font-size: 13px; line-height: 1.45; color: var(--ink); }
.quiz-help-body p { margin: 0 0 8px; }
.quiz-help-body p:last-child { margin-bottom: 0; }
.quiz-opts-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.quiz-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.quiz-opts input { width: 14px; height: 14px; margin: 0; accent-color: var(--navy-2); cursor: pointer; }
.quiz-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--navy-2); cursor: pointer; white-space: nowrap; }
/* "Quiz this column": a small outlined button; solid navy as "End quiz" while its column is quizzed. */
.quiz-on { padding: 3px 10px; border: 1px solid var(--navy-2); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--navy-2); cursor: pointer; }
.quiz-on:hover { background: #eef3f9; }
.quiz-on.is-on { background: var(--navy-2); color: #fff; }
.quiz-on.is-on:hover { filter: brightness(1.15); }
.drill-table thead th .quiz-toggle { display: flex; }
/* Quizzing: answers are blacked out until the right choice is picked (public/js/drill.js). */
.drill-table td.quiz-hidden, .drill-table td.quiz-hidden * { color: transparent; user-select: none; }
/* A quizzed cell is a card back: navy with a fine gold dot pattern and a gold "?". Hover lifts it. */
.drill-table td.quiz-hidden {
  position: relative; cursor: pointer;
  background-color: #0e3a6b;
  background-image: radial-gradient(rgba(240, 180, 41, 0.28) 1px, transparent 1.6px), linear-gradient(135deg, #14497f 0%, #0b2f57 100%);
  background-size: 11px 11px, 100% 100%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(240, 180, 41, 0.45);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.drill-table td.quiz-hidden::after {
  content: '?'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--accent); font: 800 18px Georgia, 'Times New Roman', serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
/* Stars for the levels a covered cell has passed, top left on its card back. */
.drill-table td.quiz-hidden[data-stars]::before { content: attr(data-stars); position: absolute; top: 3px; left: 7px; color: var(--accent); font-size: 11px; letter-spacing: 1px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
/* Cooldown: a card that just leveled up rests (hourglass, dimmed) until another card levels up. */
.drill-table td.quiz-hidden.quiz-cool { filter: grayscale(0.7) brightness(0.85); cursor: not-allowed; }
.drill-table td.quiz-hidden.quiz-cool::after { content: '\23F3'; }
.quiz-cooltip { position: fixed; z-index: 55; max-width: 260px; padding: 6px 10px; border-radius: 6px; background: #0d1b2a; color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); pointer-events: none; }
.quiz-cooltip[hidden] { display: none; }
.drill-table td.quiz-hidden:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--accent); }
.drill-table td.quiz-hidden:hover::after { transform: translate(-50%, -50%) scale(1.25); }
.drill-table td.quiz-right { position: relative; animation: quiz-right 3s ease-out; }
@keyframes quiz-right {
  0% { background: #1e9e55; color: #fff; box-shadow: inset 0 0 0 3px #137a3f; }
  12% { background: #a6e6bf; box-shadow: inset 0 0 0 3px #1e9e55; }
  86% { background: #c9f0d8; box-shadow: inset 0 0 0 2px #5cc28a; }
  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
/* Time up: the row glows amber for 3 seconds, showing the answer. */
.drill-table td.quiz-late { position: relative; animation: quiz-late 3s ease-out; }
@keyframes quiz-late {
  0% { background: #f59e0b; color: #fff; box-shadow: inset 0 0 0 3px #b45309; }
  12% { background: #fcd58a; box-shadow: inset 0 0 0 3px #f59e0b; }
  86% { background: #fde9be; box-shadow: inset 0 0 0 2px #f2b84b; }
  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
/* One try per run, wrong: the row glows red for 3 seconds. */
.drill-table td.quiz-miss { position: relative; animation: quiz-miss 3s ease-out; }
@keyframes quiz-miss {
  0% { background: #d92d20; color: #fff; box-shadow: inset 0 0 0 3px #a01d14; }
  12% { background: #f5b4ae; box-shadow: inset 0 0 0 3px #d92d20; }
  86% { background: #fbd5d1; box-shadow: inset 0 0 0 2px #e87a70; }
  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
/* One try per run: a tried cell stays uncovered with its result's border. */
.drill-table td[data-tried="right"] { box-shadow: inset 0 0 0 3px #1e9e55; }
.drill-table td[data-tried="wrong"] { box-shadow: inset 0 0 0 3px #d92d20; }
.drill-table td[data-tried="late"] { box-shadow: inset 0 0 0 3px #f59e0b; }
/* One row at a time: the other rows fade out while one is hovered. */
.drill-table tbody tr { transition: opacity 0.15s ease; }
.drill-table.row-focus tbody tr:not(.is-focus) { opacity: 0; }
/* Familiarity -1: hovering a covered cell just shows its text. */
.drill-table td.quiz-peek { background: #fff8e6; box-shadow: inset 0 0 0 2px var(--accent); }
.drill-table td.quiz-right-mark::after { content: '✓'; position: absolute; right: 8px; top: 50%; color: #137a3f; font-size: 22px; font-weight: 900; pointer-events: none; animation: quiz-check 3s ease-out forwards; }
@keyframes quiz-check {
  0% { opacity: 0; transform: translateY(-50%) scale(0.3); }
  8% { opacity: 1; transform: translateY(-50%) scale(1.35); }
  16% { transform: translateY(-50%) scale(1); }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scale(1); }
}
/* The choices panel: a light grey tray, each choice a white card of its own (a navy edge on the left,
   a soft shadow, clear gaps), so neighbouring choices don't run together. */
.quiz-pop { position: absolute; z-index: 30; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, auto)); gap: 10px; max-width: min(960px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; padding: 12px; background: #e9eef5; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); }
.quiz-pop[hidden] { display: none; }
.quiz-choice { min-width: 140px; max-width: 280px; padding: 9px 12px; border: 1.5px solid #5b8fd6; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); font: inherit; font-size: 13.5px; line-height: 1.35; text-align: left; color: var(--ink); cursor: pointer; }
.quiz-choice:hover { border-color: var(--navy-2); background: #f2f6fc; box-shadow: 0 3px 8px rgba(16, 24, 40, 0.18); transform: translateY(-1px); }
.quiz-choice { transition: transform 0.12s ease; }
.quiz-choice.quiz-hit { background: #1e9e55; border-color: #137a3f; color: #fff; transform: scale(1.06); box-shadow: 0 0 0 3px rgba(30, 158, 85, 0.3); }
.quiz-choice.quiz-answer { box-shadow: 0 0 0 3px #1e9e55; border-color: #137a3f; }
.quiz-choice.quiz-late { background: #f59e0b; border-color: #b45309; color: #fff; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); }
/* The countdown bar across the top of the choices: gold, red in its last quarter. */
.quiz-clock { position: relative; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e8edf3; overflow: hidden; }
.quiz-clock span { position: relative; z-index: 1; display: block; height: 100%; background: var(--accent); transform-origin: left center; }
.quiz-clock.is-low span { background: #d92d20; }
/* A wrong pick: the lost piece holds in bright red behind the bar, then drains (drill.js showLoss). */
.quiz-clock .quiz-clock-lost { position: absolute; inset: 0; z-index: 0; background: #ff3b30; opacity: 0; }
.quiz-clock.is-low .quiz-clock-lost { background: #ff9f97; }
.quiz-clock.is-hit { animation: quiz-clock-hit 0.35s ease-out; }
/* Hovering a choice: the share a wrong pick would cut (30% of the time left), striped red at the end of the fill. */
.quiz-clock-cost { position: absolute; top: 0; bottom: 0; left: 70%; right: 0; background: repeating-linear-gradient(-45deg, #d92d20 0 3px, #ff8a80 3px 6px); opacity: 0; transition: opacity 0.12s; }
.quiz-clock.is-cost .quiz-clock-cost { opacity: 1; }
@keyframes quiz-clock-hit { 0% { transform: translateX(0) scaleY(1); } 15% { transform: translateX(-4px) scaleY(1.8); } 35% { transform: translateX(4px) scaleY(1.5); } 55% { transform: translateX(-3px) scaleY(1.2); } 75% { transform: translateX(2px); } 100% { transform: translateX(0) scaleY(1); } }
.quiz-choice.quiz-wrong { background: #d92d20; border-color: #a01d14; color: #fff; box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.3); animation: quiz-wrong 0.6s ease-out; }
@keyframes quiz-wrong {
  0% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .quiz-choice.quiz-wrong, .drill-table td.quiz-right-mark::after { animation-duration: 1ms; } .quiz-choice.quiz-hit { transform: none; } }

.col-filter[data-col="tags"] { width: 64px; }
.tag-in { width: 100%; min-width: 64px; height: 26px; padding: 2px 7px; border: 1px dashed #cdd3db; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
.tag-in::placeholder { color: #a3a8ae; }
.tag-in:hover { border-color: #b7c0cc; }
.tag-in:focus { outline: none; border-style: solid; border-color: var(--navy-2); background: #fff; }
.tag-in.is-saved { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.tag-in.is-error { border-style: solid; border-color: var(--bad); background: var(--bad-bg); }
.fam { display: inline-flex; align-items: center; gap: 6px; }
.fam-val { font-weight: 700; }
/* One stepper: top half up, bottom half down. */
.fam-step { display: inline-flex; flex-direction: column; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.fam-btn { width: 20px; height: 12px; padding: 0; border: 0; background: #fff; color: var(--navy-2); font-size: 7px; line-height: 12px; cursor: pointer; }
.fam-btn + .fam-btn { border-top: 1px solid var(--line); }
.fam-btn:hover:not(:disabled) { background: #e3ebf5; }
.fam-btn:disabled { color: #c9cfd6; cursor: default; }
/* Instant hover text (a title attribute waits about a second). */
.drill-src { position: relative; }
/* Beside the link, not above it: the table's scroll box would clip it on the top row. */
.drill-src:hover::after, .drill-src:focus-visible::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 4px; background: var(--navy-ink); color: #fff; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; z-index: 5; }
.drill-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; }

.study { max-width: 780px; }
.study [hidden], .toast[hidden] { display: none !important; }
.study-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.study-head h1 { margin: 0; }
.study-set { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.study-sub { margin: 4px 0 0; font-size: 14px; }
/* The other ways to study: a quiet row of links under the heading. */
.study-ways { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; margin: -6px 0 16px; font-size: 13.5px; }
.study-ways[hidden] { display: none; }
.study-way { padding: 3px 10px; border: 1px solid transparent; border-radius: 99px; background: none; font: inherit; color: var(--navy-2); font-weight: 600; cursor: pointer; }
.study-way:hover, .study-way:focus-visible { border-color: #c9d6e6; background: #f2f6fb; }
.study-left { font-size: 14px; color: var(--muted); }
.study-count { font-size: 20px; font-weight: 700; color: var(--navy-ink); }
.flash-card { display: flex; flex-direction: column; min-height: 300px; padding: 18px 28px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.08); cursor: pointer; }
.flash-card.is-flipped { cursor: default; }
.flash-meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.flash-from { margin-left: auto; }
.flash-prompt { margin: auto 0; padding: 30px 0 24px; text-align: center; font-size: 27px; font-weight: 600; line-height: 1.35; color: var(--navy-ink); overflow-wrap: anywhere; }
.flash-answer { padding: 22px 0 8px; border-top: 1px dashed #cfd6de; text-align: center; font-size: 23px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; animation: flash-in 0.18s ease-out; }
.flash-hint { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flash-answer { animation: none; } }
.flash-why { margin: 4px auto 6px; max-width: 560px; padding: 10px 14px; border-left: 3px solid #e0a800; border-radius: 0 6px 6px 0; background: #fff8e1; color: #3d4752; font-size: 15px; line-height: 1.5; text-align: left; }
.flash-why-label { margin-right: 4px; color: #8a6400; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.card-why { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.card-why summary { cursor: pointer; color: var(--navy-2); font-weight: 600; }
.flash-actions { margin-top: 16px; }
.ratings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rate { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border: 1.5px solid; border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.rate b { font-size: 16px; }
.rate span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rate:disabled { opacity: 0.6; cursor: default; }
.rate-again { border-color: #eab2ac; color: var(--bad); }
.rate-again:hover { background: var(--bad-bg); }
.rate-hard { border-color: #ebcd94; color: var(--warn); }
.rate-hard:hover { background: var(--warn-bg); }
.rate-good { border-color: #a8d4ba; color: var(--ok); }
.rate-good:hover { background: var(--ok-bg); }
.rate-easy { border-color: #a9c0dc; color: var(--navy-2); }
.rate-easy:hover { background: #edf2f8; }
.study-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; }
.study-foot p { margin: 0; }
.study-actions { display: inline-flex; align-items: center; gap: 8px; }
.report-item p { margin: 8px 0; }
.report-message { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--line); background: #f7f9fb; white-space: pre-wrap; }
.report-note-field { flex: 1 1 260px; }
.study-done { text-align: center; padding: 36px 28px; }
.study-done p { margin: 6px 0 0; }
.study-done .btn-row { justify-content: center; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 9px; background: var(--navy-ink); color: #fff; font-size: 14.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.toast .linklike { color: #ffd772; font-weight: 700; }
@media (hover: none) { .study-keys { display: none; } }

/* ---------- account ---------- */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.account-grid > .card { margin: 0; }
.plan-now { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: #f4f7fa; border: 1px solid var(--line); margin-bottom: 12px; }
.plan-now p { margin: 4px 0 0; }
.plan-now-name { font-size: 19px; font-weight: 700; color: var(--navy-ink); display: flex; align-items: center; gap: 10px; }
.danger-zone { border-color: #f1c4bf; }
.summary-table { margin-bottom: 16px; }
.pay-placeholder { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1.5px dashed #c9d1da; border-radius: 10px; background: #fafbfc; font-weight: 600; }

/* ---------- admin ---------- */
.subnav { background: #fff; border-bottom: 1px solid var(--line); margin: -28px 0 24px; }
.subnav-inner { display: flex; gap: 24px; }
.subnav a { padding: 12px 0; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.subnav a.active { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.checklist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.checklist .tick { flex: none; width: 18px; color: var(--warn); font-weight: 800; }
.checklist li.is-done .tick { color: var(--ok); }
.checklist li.is-done strong { color: var(--muted); }
.pad-bottom { padding: 14px 22px; }
/* Links into the questions table (#questions, #q-<ID>) land below the sticky header. */
#questions, #questions tr[id] { scroll-margin-top: 80px; }
.notes-list { margin: 12px 0; }
.notes-list summary { cursor: pointer; font-weight: 600; color: var(--navy-2); }

/* ---------- legal ---------- */
.prose { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px; }
.prose li { margin-bottom: 6px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: #fff; padding: 22px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer-inner p { margin: 4px 0 0; max-width: 620px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .mock { transform: none; }
}
@media (max-width: 760px) {
  .nav-inner { height: auto; flex-wrap: wrap; gap: 10px 18px; padding: 10px 16px; }
  .nav a.active { padding: 4px 0; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 4px; }
  .container { padding: 0 16px; }
  h1 { font-size: 25px; }
  .hero { padding: 44px 0 52px; }
  .hero h1 { font-size: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .account-grid, .cats, .seg, .checklist { grid-template-columns: minmax(0, 1fr); }
  .nav .nav-user { max-width: 9em; }
  .nav-links a { white-space: nowrap; flex: none; }
  /* Wide tables with buttons at the end: each row stacks, so the buttons stay on screen. */
  .table.stack-sm, .stack-sm tbody { display: block; }
  .stack-sm thead { display: none; }
  .stack-sm tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; border-bottom: 1px solid #eef0f3; }
  .stack-sm tr:last-child { border-bottom: 0; }
  .table.stack-sm td { display: block; padding: 0; border: 0; text-align: left; }
  .stack-sm td:first-child { flex-basis: 100%; }
  .table.stack-sm td.deck-cat { padding-left: 14px; }
  .stack-sm td[data-label]::before { content: attr(data-label) ' '; color: var(--muted); font-size: 12.5px; }
  .stack-sm td.right { margin-left: auto; }
  .plans { grid-template-columns: 1fr; }
  .sec-title { display: none; }
  .guarantee { flex-direction: column; padding: 22px; }
  .pitch p { font-size: 20px; }
  .prose { padding: 22px; }
  .flash-card { min-height: 240px; padding: 14px 16px 18px; }
  .flash-from { margin-left: 0; }
  .flash-prompt { font-size: 22px; padding: 22px 0 18px; }
  .flash-answer { font-size: 19px; }
  .ratings { gap: 6px; }
  .rate b { font-size: 14.5px; }
}
/* Admin: the public sample pickers. */
.sample-pick { width: 100%; max-width: 640px; height: 36px; padding: 0 8px; border: 1px solid #c9d1da; border-radius: 6px; font: inherit; background: #fff; }

/* ---------- front page (views/public/home.ejs) ----------
   Fills the first screen under the top bar: the two promises (one line each), three proof points,
   a sample question per section, Plans, and a news band along the bottom. The photo (Vitaly Gariev
   on Unsplash, Unsplash License) sits on the right behind a navy fade; lib/security.js allows its
   host in img-src. */
.fp { --fp-deep: #001a35; --fp-soft: #d6e0eb; --fp-dim: #9fb2c8; position: relative; overflow: hidden; min-height: calc(100vh - 63px); display: flex; flex-direction: column; background: var(--fp-deep); color: #fff; }
.fp-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; background: url('https://images.unsplash.com/photo-1758873268783-967d13f0c163?w=2000&q=75&auto=format') 2% 30% / auto 150% no-repeat; }
.fp-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--fp-deep) 0%, rgba(0, 26, 53, 0.9) 22%, rgba(0, 26, 53, 0.55) 46%, rgba(0, 26, 53, 0.12) 66%, rgba(0, 26, 53, 0) 80%),
              linear-gradient(0deg, rgba(0, 26, 53, 0.92) 0%, rgba(0, 26, 53, 0) 34%); }
.fp-text { position: relative; flex: 1; padding-top: 14px; padding-bottom: 18px; }
.fp-text > div { max-width: 860px; }
.fp-promise { margin: 0 0 10px; color: #fff; font-size: 32px; line-height: 1.22; font-weight: 800; letter-spacing: -0.015em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.fp-promise span { display: block; white-space: nowrap; }
.fp-promise em { font-style: normal; color: var(--accent); }
.fp-promise em.fp-shortest { font-style: italic; }
/* "you": white, with a thick gold underline, so it lands on the reader without a third color. */
.fp-promise .fp-you { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 6px; }
/* The opening line under the promise: why it's faster. */
.fp-sub { margin: 0 0 12px; max-width: 860px; font-size: 19px; font-weight: 600; line-height: 1.4; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.fp-sub b { color: var(--accent); }
.fp-proof { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 4px; max-width: 860px; }
.fp-proof li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.4; color: var(--fp-soft); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.fp-proof li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.fp-proof b { color: var(--accent); font-weight: 600; }
.fp-proof em { font-style: normal; color: var(--accent); font-weight: 600; }
.fp-label { margin: 0 0 8px; font-size: 16px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; scroll-margin-top: 80px; }
.fp-samples { display: grid; gap: 5px; max-width: 660px; margin-bottom: 10px; }
/* Exam-realistic passages: two per row (C/P, CARS / B/B, P/S). */
.fp-samples-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1000px; } /* minmax: a long word can't push a column past the edge */
.fp-samples-2 .fp-sample { grid-template-columns: 50px 1fr auto; padding: 8px 14px; }
.fp-samples-2 .fp-sample span { font-size: 16px; }
/* The front page's call to action: "Free trial" (gold pill) and "See plans" (outlined) side by side. */
.fp-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* The guided sample's row with the Free trial button beside it. */
.fp-sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 12px; }
.fp-sample-row .fp-samples { flex: 1 1 520px; margin-bottom: 0; }
.fp-trial { border-radius: 999px; padding: 0 30px; font-weight: 700; }
.fp-sample { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; padding: 11px 18px; border-radius: 11px; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.3); color: #fff; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.fp-sample:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--accent); color: #fff; }
.fp-sample b { font-size: 17px; color: var(--accent); letter-spacing: 0.04em; }
.fp-sample span { font-size: 18px; line-height: 1.3; }
.fp-sample i { font-style: normal; font-size: 22px; color: var(--accent); }
.fp-sample:hover i { color: var(--accent); }
/* The band along the bottom: student thank-you notes on the dark blue glass. */
.fp-praise { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 20, 42, 0.6); backdrop-filter: blur(8px); }
.fp-praise .container { display: grid; grid-template-columns: 130px repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.fp-praise-head h2 { margin: 0; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.fp-quote { margin: 0; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }
.fp-quote blockquote { margin: 0; font-size: 13.5px; line-height: 1.4; font-style: italic; color: #e6edf5; }
.fp-quote blockquote::before { content: '“'; }
.fp-quote blockquote::after { content: '”'; }
.fp-quote figcaption { margin-top: 4px; font-size: 12.5px; color: var(--fp-dim); }
.fp-quote figcaption b { color: var(--accent); }
/* One note: centered, its heading beside it, a little larger, the name right under the quote. */
.fp-praise.is-one .container { display: flex; justify-content: center; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; }
.fp-praise.is-one .fp-quote { max-width: 640px; }
.fp-praise.is-one .fp-quote blockquote { font-size: 15.5px; line-height: 1.45; }
.fp-praise.is-one .fp-quote figcaption { margin-top: 6px; font-size: 13px; }
@media (max-width: 900px) {
  .fp-photo { width: 100%; background-size: cover; background-position: 40% 15%; }
  .fp-photo::after { background: linear-gradient(0deg, rgba(0, 26, 53, 0.96) 0%, rgba(0, 26, 53, 0.7) 55%, rgba(0, 26, 53, 0.4) 100%); }
  .fp-text { padding-top: 120px; }
  .fp-promise { font-size: 26px; }
  .fp-promise span { white-space: normal; }
  .fp-promise span + span { margin-top: 6px; }
  .fp-proof li { font-size: 15px; }
  .fp-sample span { font-size: 16px; }
  .fp-praise .container { grid-template-columns: 1fr; gap: 12px; }
  .fp-praise.is-one .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fp-quote { padding-left: 0; border-left: 0; }
}
/* Phones: the four passage cards stack in one column. */
@media (max-width: 600px) {
  .fp-samples-2 { grid-template-columns: minmax(0, 1fr); }
}

/* The familiarity number: plain dark text. In color mode it sits on a small dark badge in its
   tier's color, like game item quality: 5 legendary orange, 4 blue, 3 green, 2 white, 1 and below grey. */
.fam-val { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 5px; text-align: center; color: var(--navy-ink); }
.drill-table.color-mode .fam-val { background: #1b1f2a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #9d9d9d; }
.drill-table.color-mode tr[data-fam="2"] .fam-val { color: #ffffff; }
.drill-table.color-mode tr[data-fam="3"] .fam-val { color: #1eff00; }
.drill-table.color-mode tr[data-fam="4"] .fam-val { color: #3a9bff; }
.drill-table.color-mode tr[data-fam="5"] .fam-val { color: #ff8000; box-shadow: inset 0 0 0 1px #ff8000, 0 0 6px rgba(255, 128, 0, 0.6); text-shadow: 0 0 4px rgba(255, 128, 0, 0.8); }
/* Color mode: a row's prompt and answer in its familiarity tier's color, darkened enough to read on
   white (2 is "white" in the tiers, so plain text); covered quiz cells stay covered. */
.drill-table.color-mode tr td:is([data-col="prompt"], [data-col="answer"]):not(.quiz-hidden) { color: #8a8a8a; }
.drill-table.color-mode tr[data-fam="2"] td:is([data-col="prompt"], [data-col="answer"]):not(.quiz-hidden) { color: var(--ink); }
.drill-table.color-mode tr[data-fam="3"] td:is([data-col="prompt"], [data-col="answer"]):not(.quiz-hidden) { color: #1a8f00; }
.drill-table.color-mode tr[data-fam="4"] td:is([data-col="prompt"], [data-col="answer"]):not(.quiz-hidden) { color: #0070dd; }
.drill-table.color-mode tr[data-fam="5"] td:is([data-col="prompt"], [data-col="answer"]):not(.quiz-hidden) { color: #e06c00; }
/* Familiarity decay: a faded card's old peak, small and grey beside its number. */
.fam-peak { margin-left: 2px; font-size: 10px; font-weight: 700; color: var(--muted); vertical-align: super; cursor: help; }

/* Level-up on a right pick (drill.js levelUp): centered on the Familiarity cell, above everything,
   in the new tier's color (--lvl). */
.lvl-fx { --lvl: #ffd65a; position: absolute; z-index: 60; width: 0; height: 0; pointer-events: none; }
.lvl-fx::before { content: ''; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lvl) 55%, transparent) 0%, transparent 70%); animation: lvl-glow 1.4s ease-out forwards; }
@keyframes lvl-glow {
  0% { transform: scale(0.3); opacity: 0; }
  20% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.lvl-beam { position: absolute; left: -22px; bottom: -22px; width: 44px; height: 180px; border-radius: 22px 22px 0 0; background: linear-gradient(to top, transparent 0%, var(--lvl) 20%, color-mix(in srgb, var(--lvl) 45%, white) 55%, transparent 100%); box-shadow: 0 0 18px var(--lvl); filter: blur(1px); transform-origin: bottom center; animation: lvl-beam 1.5s ease-out forwards; }
@keyframes lvl-beam {
  0% { transform: scaleY(0) scaleX(0.4); opacity: 0; }
  18% { transform: scaleY(1) scaleX(1); opacity: 0.95; }
  60% { opacity: 0.75; }
  100% { transform: scaleY(1.1) scaleX(0.5); opacity: 0; }
}
.lvl-ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border: 3px solid var(--lvl); border-radius: 50%; box-shadow: 0 0 12px var(--lvl), inset 0 0 8px var(--lvl); animation: lvl-ring 0.9s ease-out forwards; }
@keyframes lvl-ring {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.lvl-spark { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 3px var(--lvl); opacity: 0; animation: lvl-spark 0.9s ease-out forwards; }
@keyframes lvl-spark {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.lvl-text { position: absolute; left: 0; bottom: 20px; display: flex; flex-direction: column; align-items: center; white-space: nowrap; font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: 0.06em; color: var(--lvl); -webkit-text-stroke: 1px #2a1a00; text-shadow: 0 0 10px var(--lvl), 0 2px 0 #2a1a00; animation: lvl-text 2s ease-out forwards; }
.lvl-stars { font-size: 20px; font-style: normal; letter-spacing: 2px; }
@keyframes lvl-text {
  0% { transform: translate(-50%, 10px) scale(0.4); opacity: 0; }
  14% { transform: translate(-50%, -6px) scale(1.3); opacity: 1; }
  26% { transform: translate(-50%, -10px) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -54px) scale(1); opacity: 0; }
}
.lvl-fx.is-max .lvl-beam { width: 64px; left: -32px; height: 240px; }
.lvl-fx.is-max .lvl-ring { animation-iteration-count: 2; }
.lvl-fx.is-max .lvl-stars { font-size: 24px; }
.fam-val.lvl-pop { animation: lvl-pop 0.9s ease-out; }
@keyframes lvl-pop {
  0% { transform: scale(1); }
  20% { transform: scale(1.9); filter: brightness(1.4) drop-shadow(0 0 6px currentColor); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .lvl-spark { display: none; } }

/* The sample Drill page's banner: what this page is, and the way to keep the cards. */
.sample-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid #f0d27a; border-radius: 10px; background: #fff8e6; }
.sample-banner p { margin: 0; color: var(--ink); }

/* The Drill page's "Learn these cards" button (learn.js; its window is styled in learn.css). */
.learn-btn { margin-right: auto; padding: 4px 14px; border: 1px solid var(--navy-2); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--navy-2); cursor: pointer; }
.learn-btn:hover { background: var(--navy-2); color: #fff; }
/* Drill's saved views: chips after "Study these N cards" (drill.js), then the quiz options on the right. */
.learn-btn:has(+ .drill-views) { margin-right: 0; }
.drill-views { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; }
.view-chip, .view-add { padding: 3px 11px; border: 1px solid #cfd6df; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer; white-space: nowrap; }
.view-chip:hover, .view-add:hover:not(:disabled) { border-color: var(--navy-2); }
.view-chip.on, .view-chip-wrap.on .view-chip { border-color: var(--navy-2); background: var(--navy-2); color: #fff; }
.view-chip-wrap { position: relative; display: inline-flex; }
.view-chip-wrap .view-chip { padding-right: 22px; }
.view-x { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 13px; line-height: 16px; color: inherit; opacity: 0; cursor: pointer; }
.view-chip-wrap:hover .view-x, .view-x:focus-visible { opacity: 0.7; }
.view-chip-wrap.on .view-x { color: #fff; }
.view-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }
.view-add { border-style: dashed; color: var(--muted); font-weight: 500; }
.view-add:disabled { opacity: 0.5; cursor: default; }
.quiz-opts input.view-name { width: 140px; height: 26px; padding: 0 10px; border: 1px solid var(--navy-2); border-radius: 999px; font: inherit; font-size: 12.5px; cursor: text; }
/* Tags + and −: small buttons beside the header, and the box they open. */
.tags-head { display: inline-flex; align-items: center; gap: 4px; }
.tag-bulk { width: 18px; height: 18px; padding: 0; border: 1px solid #cfd6df; border-radius: 4px; background: #fff; font: 700 13px/1 inherit; font-family: inherit; color: var(--navy-2); cursor: pointer; }
.tag-bulk:hover { border-color: var(--navy-2); background: #f2f6fb; }
.tag-bulk-pop { position: absolute; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 360px; padding: 10px; border: 1px solid #cfd6df; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0, 44, 87, 0.15); }
.tag-bulk-pop[hidden] { display: none; }
.tag-bulk-pop input { width: 250px; height: 30px; padding: 0 8px; border: 1px solid #c9d1da; border-radius: 6px; font: inherit; font-size: 13px; }
.tag-bulk-msg { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.tag-bulk-msg:empty { display: none; }
.quiz-opts .quiz-help { margin-right: 0; }

/* Register and Sign in: a white page, one narrow column, fields drawn as a
   single underline with the label as placeholder, a small round blue button. */
body:has(.uw-auth) { background: #fff; }
.uw-auth { width: 100%; max-width: 572px; margin: 0 auto; padding: 56px 16px 72px; color: #333; font-weight: 300; }
.uw-auth h1 { margin: 0 0 6px; font-size: 32px; font-weight: 300; color: #333; }
.uw-lead { margin: 0 0 26px; font-size: 14.5px; color: #6b6b6b; }
.uw-form { display: flex; flex-direction: column; gap: 34px; }
.uw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uw-field { position: relative; display: block; }
.uw-field input { width: 100%; height: 36px; padding: 6px 0; border: 0; border-bottom: 1px solid #c8c8c8; border-radius: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 300; color: #333; }
.uw-field input::placeholder { color: #8a8a8a; }
.uw-field input:focus { outline: none; border-bottom: 2px solid #1a82e2; }
.uw-pw input { padding-right: 36px; }
.uw-eye { position: absolute; right: 2px; top: 4px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #b5b5b5; cursor: pointer; }
.uw-eye svg { width: 22px; height: 22px; fill: currentColor; }
.uw-eye.is-on, .uw-eye:hover { color: #1a82e2; }
.uw-terms { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.uw-auth a { color: #1a82e2; text-decoration: none; }
.uw-auth a:hover { text-decoration: underline; }
.uw-btn { align-self: flex-start; height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: #1a82e2; box-shadow: 0 2px 6px rgba(26, 130, 226, 0.35); font: inherit; font-size: 13.5px; font-weight: 400; color: #fff; cursor: pointer; }
.uw-btn:hover { background: #126bbf; }
.uw-switch { margin: 18px 0 0; font-size: 14.5px; }
.uw-auth .alert { margin-bottom: 18px; }
@media (max-width: 560px) { .uw-row { grid-template-columns: 1fr; gap: 34px; } .uw-auth { padding-top: 32px; } }
.uw-gap { height: 26px; }
/* Sign-up's target test date: three choices in a row, then a calendar for approximate or exact. */
.uw-date { margin: 0; padding: 0; border: 0; min-width: 0; }
.uw-date legend { padding: 0; margin-bottom: 10px; font-size: 15px; color: #8a8a8a; }
.uw-choices { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.uw-choices label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.uw-choices input { accent-color: #1a82e2; width: 16px; height: 16px; margin: 0; }
.uw-day { margin-top: 14px; max-width: 270px; }
.uw-day[hidden] { display: none; }
.uw-day small { display: block; margin-top: 5px; font-size: 12.5px; color: #8a8a8a; }
/* Sign-up's drop-downs, drawn like its text fields (an underline), gray until something's picked. */
.uw-field select { width: 100%; height: 36px; padding: 6px 0; border: 0; border-bottom: 1px solid #c8c8c8; border-radius: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 300; color: #333; cursor: pointer; }
.uw-field select:has(option[value='']:checked) { color: #8a8a8a; }
.uw-field select option { color: #333; }
.uw-field select:focus { outline: none; border-bottom: 2px solid #1a82e2; }
.uw-field input[type='number'] { -moz-appearance: textfield; }
.uw-field input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Latest score: total and the four sections, once "practice" or "real" is picked. */
.uw-scores { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.uw-scores[hidden] { display: none; }
@media (max-width: 560px) { .uw-scores { grid-template-columns: repeat(3, 1fr); } }
/* A required field left out when the form was sent: red underline and a short note under it. */
.uw-field.is-missing input, .uw-field.is-missing select { border-bottom: 2px solid #d93025; }
.uw-date.is-missing legend { color: #d93025; }
.uw-missing { display: block; margin-top: 5px; font-size: 12.5px; color: #d93025; }
.uw-other { grid-column: 2; }
.uw-other[hidden] { display: none; }
@media (max-width: 560px) { .uw-other { grid-column: auto; margin-top: 0; } }

/* Home footer: continues the dark front page instead of a white strip under it. */
.home .page { padding-bottom: 0; }
.home .footer { background: #00142a; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 26px 0 30px; color: #e6edf5; }
.home .footer strong { color: #fff; letter-spacing: 0.01em; }
.home .footer .muted { color: #8197b0; }
.home .footer-links a { color: #b9c8d9; transition: color 0.15s; }
.home .footer-links a:hover { color: var(--accent); }

/* ---------- the app frame (partials/shell-top.ejs) ---------- */
body.app-shell { display: block; background: #f3f3f4; font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif; }
.sb-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-top { height: 64px; display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; padding: 0 16px 0 24px; background: #fff; }
.sh-title { flex: 1; min-width: 0; margin: 0; text-align: right; font-size: 28px; font-weight: 600; color: var(--navy-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-right { display: flex; flex-direction: row-reverse; align-items: center; gap: 22px; }
.sh-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: 600 14px inherit; font-family: inherit; color: #a7b1c2; cursor: pointer; }
.sh-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sh-link:hover { color: #2196f3; }
.sh-account { position: relative; }
.sh-account { display: block; border-radius: 50%; text-decoration: none; }
.sh-account.is-open .sh-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.sh-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--navy); font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 44, 87, 0.25); }
.sh-menu-who .sh-avatar { flex: none; width: 40px; height: 40px; font-size: 15px; }
.sh-menu { position: absolute; left: -8px; top: 42px; z-index: 50; width: 260px; padding: 6px 0; border-radius: 4px; background: #fff; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18); }
.sh-menu-who { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.sh-menu-who b { display: block; font-size: 14px; color: #222; }
.sh-menu-who small { color: #596375; }
.sh-menu a, .sh-menu button { display: block; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid #eee; background: none; font: 14px inherit; font-family: inherit; color: #222; text-align: left; text-decoration: none; cursor: pointer; }
.sh-menu a:hover, .sh-menu button:hover { background: #f5f7fa; }
.sh-menu form { margin: 0; }
/* In the app, the trial bar is a banner just as wide as its words, hanging from the top. */
.app-shell .trial-bar { display: flex; justify-content: center; background: none; }
.app-shell .trial-bar .container { width: auto; max-width: none; margin: 0; padding: 7px 16px; border-radius: 0 0 10px 10px; background: #2196f3; }
.app-shell .trial-bar-ended .container { background: #d93025; }
.app-shell .flash .container { max-width: none; padding: 0 32px; }
.sh-page { flex: 1; padding: 30px 0 40px; }
.sh-page > .container, .sh-page > section.container { max-width: 1420px; padding: 0 32px; }
/* The page title is in the header row, so a page's own big heading steps aside. */
.sh-page .page-head > h1, .sh-page .page-head > div > h1:first-child { display: none; }
.sh-page .card { border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.125); box-shadow: none; }
.sh-foot { padding: 10px; background: #fff; text-align: center; font-size: 12.5px; color: #212529; }
/* Test Date dialog: blue panel with the question, then the choice and the calendar. */
.sh-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.sh-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.sh-dialog form { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 280px; }
.sh-dialog-side { padding: 28px; background: linear-gradient(160deg, #002c57, #001a35); color: #fff; }
.sh-dialog-side p { margin: 12px 0 0; color: #b4c3d6; font-size: 14px; }
.sh-dialog-side b { color: var(--accent); }
.sh-dialog-side h2 { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.3; color: #fff; }
.sh-dialog-body { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px; }
.sh-dialog-body input[type='date'] { height: 38px; padding: 0 8px; border: 1px solid #c8c8c8; border-radius: 4px; font: inherit; }
.sh-dialog-body input[hidden] { display: none; }
.sh-dialog-actions { display: flex; justify-content: space-between; margin-top: auto; }
.sh-pill { padding: 7px 20px; border: 0; border-radius: 18px; background: #2196f3; color: #fff; font: 14px inherit; font-family: inherit; cursor: pointer; }
.sh-pill-ghost { background: #e9f3fe; color: #2196f3; }
@media (max-width: 900px) {
  .sh-title { font-size: 22px; }
  .sh-page > .container, .sh-page > section.container { padding: 0 14px; }
  .sh-dialog form { grid-template-columns: 1fr; }
}
/* Dashboard numbers: label, big percent and its count, an icon in a lilac square. */
/* Dashboard: Test Count and Question Score on the left with their rows, the Study Planner beside
   them, then the Subjects table across the page. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.dash-left { display: grid; gap: 20px; align-content: start; min-width: 0; }
.dcard { margin: 0; padding: 0; }
.dcard > .uw-stat { border-bottom: 1px solid #edf0f4; }
.dsub { padding: 6px 16px 12px; }
.drow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f3f6; }
.drow:last-of-type { border-bottom: 0; }
.drow-main { flex: 1; min-width: 0; }
.drow-name { font-weight: 600; color: var(--navy-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } /* default names are one long word */
.drow > .btn, .drow > .row-action, .drow > .score { flex: none; }
/* Resume and Retake: one width, text centered. */
.dact { width: 84px; justify-content: center; text-align: center; }
/* Tests panel: about 3 tests tall, then it scrolls; the expand button (public/js/dashboard.js) fills the
   screen with it over a dimmed page, and Esc or the button again puts it back. */
#testsPanel .uw-stat { gap: 8px; }
#testsPanel .uw-stat-main { flex: 1; }
.drows { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9d1da transparent; margin-right: -6px; padding-right: 6px; }
/* Beside My Steps, the Tests panel runs as tall as My Steps: the list fills the panel and scrolls
   inside it (absolutely placed, so a long list never makes the row taller). On one column, the
   300px cap above applies. */
@media (min-width: 901px) {
  .dash-left:has(.drows) { align-content: stretch; }
  #testsPanel:not(.is-max):has(.drows) { display: flex; flex-direction: column; }
  #testsPanel:not(.is-max):has(.drows) .dsub { position: relative; flex: 1; min-height: 220px; padding: 0; }
  #testsPanel:not(.is-max) .drows { position: absolute; inset: 6px 16px 12px; max-height: none; margin-right: -6px; }
}
/* Delete mode (public/js/dashboard.js): rows are picked by clicking them. */
.del-mode .drow { cursor: pointer; border-radius: 6px; padding-left: 8px; padding-right: 8px; }
.del-mode .drow:hover { background: #f6f7f9; }
.del-mode .drow.picked { background: #fde8e8; box-shadow: inset 3px 0 0 #c0392b; }
.del-mode .drow .dact { opacity: .4; }
.dmax { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-ink); cursor: pointer; transition: background .12s, border-color .12s; }
.dmax:hover { background: #edf2f8; border-color: var(--navy); }
.dmax svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dmax .dmax-close, .is-max .dmax .dmax-open { display: none; }
.is-max .dmax .dmax-close { display: block; }
#testsPanel.is-max { position: fixed; inset: 24px; z-index: 60; display: flex; flex-direction: column; margin: 0; box-shadow: 0 0 0 100vmax rgba(14, 27, 44, .45), 0 18px 48px rgba(0, 0, 0, .25); animation: dmax-in .16s ease-out; }
#testsPanel.is-max .dsub { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#testsPanel.is-max .drows { flex: 1; max-height: none; }
@keyframes dmax-in { from { transform: scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { #testsPanel.is-max { inset: 8px; } }
.drow-name:hover { text-decoration: underline; }
.drow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.subj { padding: 0 7px; border-radius: 9px; font-size: 11.5px; font-weight: 700; line-height: 18px; }
.subj-chemphys { background: #e3edfb; color: #1d4f91; }
.subj-cars { background: #f6e9fb; color: #6b2f86; }
.subj-biobiochem { background: #e2f4ea; color: #1e6b3f; }
.subj-psychsoc { background: #fff1d6; color: #8a5a00; }
.drow-meter .drow-label { flex: 0 0 96px; font-size: 14px; }
.drow-meter .uw-stat-bar { flex: 1; margin: 0; }
.drow-num { flex: 0 0 96px; text-align: right; font-size: 14px; }
.dmore { display: inline-block; margin-top: 8px; font-size: 13.5px; }
/* Questions panel, coach style: done bars, % correct badges, a nudge line. */
.uw-stat-bar i.qdone { background: #7b93b4; }
.qnudge { margin: 8px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13.5px; }
.qbadge { display: inline-block; min-width: 44px; padding: 1px 7px; border-radius: 9px; font-weight: 700; font-size: 13px; text-align: center; }
.qb-hi { background: var(--ok-bg); color: var(--ok); }
.qb-mid { background: var(--warn-bg); color: var(--warn); }
.qb-lo { background: var(--bad-bg); color: var(--bad); }
.qb-none { background: #eef1f5; color: var(--muted); font-weight: 600; }
.qkey { display: flex; gap: 12px; margin-top: 6px; }
.dplan { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.dplan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dplan-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: #596375; }
/* Every dashboard panel heading looks like My Steps': Tests, Results by subject, MCAT experience. */
#testsPanel .uw-stat-label, .dperf h2, .dach h2 { margin: 0; font-size: 18px; font-weight: 600; color: #596375; }
.dperf h2 { margin-bottom: 10px; }
.dplan-big { margin: 18px 0 0; font-size: 22px; color: #212529; }
.dplan-big b { font-size: 40px; color: var(--navy); }
.dplan-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf0f4; }
.dplan-deck .btn { margin-left: auto; }
/* Subjects, like a game's achievement list: a badge, the name, two progress bars, the percent. */
.dach { padding: 18px 20px; }
.dach h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #596375; }
.ach { display: grid; grid-template-columns: 14px minmax(200px, 1fr) minmax(260px, 2.2fr) 70px; align-items: center; gap: 16px; padding: 12px 14px; margin-top: 8px; border: 1px solid #e4e8ee; border-radius: 10px; background: linear-gradient(90deg, #fbfcfe, #f4f6fa); }
.ach-done { border-color: var(--accent); background: linear-gradient(90deg, #fffaf0, #fff3d6); }
.ach-badge { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d6dce6; font-size: 14px; font-weight: 800; }
.ach-done .ach-badge { box-shadow: 0 0 0 2px var(--accent); }
.ach-name b { display: block; font-size: 16px; color: var(--navy-ink); }
.ach-bars { display: grid; gap: 7px; }
.ach-bar { display: grid; grid-template-columns: 80px 1fr 86px; align-items: center; gap: 8px; font-size: 12.5px; color: #596375; }
.ach-track { position: relative; height: 14px; border-radius: 7px; background: #e3e7ee; overflow: hidden; }
.ach-track i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: linear-gradient(90deg, #0b3d73, #2a6fbf); }
.ach-cards i { background: linear-gradient(90deg, #c88a00, #f0b429); }
/* MCAT experience (dashboard): a long XP bar in the level's color. --xa/--xb: the level's gradient. */
.xp-c1 { --xa: #3f8f2f; --xb: #7ccf5a; }
.xp-c2 { --xa: #1f8a4c; --xb: #4fd08a; }
.xp-c3 { --xa: #0d8584; --xb: #36c9c6; }
.xp-c4 { --xa: #0f74a8; --xb: #3fb3e8; }
.xp-c5 { --xa: #1d5fc4; --xb: #5a9cf5; }
.xp-c6 { --xa: #3c48c4; --xb: #7d88f2; }
.xp-c7 { --xa: #6a3dc8; --xb: #a47df5; }
.xp-c8 { --xa: #a33aa8; --xb: #e17ae6; }
.xp-c9 { --xa: #c2410c; --xb: #fb8a4a; }
.xp-c10 { --xa: #b97800; --xb: #f6c744; }
.xp-row { position: relative; display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto; align-items: center; gap: 10px 16px; margin-bottom: 6px; }
.xp-row h2 { margin: 0; white-space: nowrap; }
.xp-lvl { display: grid; justify-items: center; gap: 4px; }
.xp-badge { padding: 3px 10px; border-radius: 99px; background: linear-gradient(135deg, var(--xa), var(--xb)); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.xp-pips { display: flex; gap: 2px; }
.xp-pips i { width: 5px; height: 4px; border-radius: 2px; background: #dfe4ec; }
.xp-pips i.on { background: var(--xb); }
.xp-pips i.now { background: #aab4c3; }
.xp-bar { position: relative; height: 16px; border-radius: 99px; background: #e6eaf0; box-shadow: inset 0 1px 3px rgba(15, 30, 50, .18); overflow: visible; }
.xp-bar > i { position: absolute; inset: 0 auto 0 0; min-width: 16px; border-radius: 99px; background: linear-gradient(90deg, var(--xa), var(--xb)); box-shadow: 0 0 10px color-mix(in srgb, var(--xb) 55%, transparent); animation: xp-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.xp-bar > i::after { content: ''; position: absolute; inset: 2px 6px auto 6px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .35); }
/* Faint ticks every 10%. */
.xp-bar::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 99px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .45) calc(10% - 1px) 10%); }
.xp-bar.tip:hover::after, .xp-bar.tip:focus-visible::after { z-index: 5; white-space: normal; width: max-content; max-width: 420px; }
@keyframes xp-fill { from { width: 0; } }
/* Performance (dashboard): per section, done (blue) with right (green) inside it. */
.dperf { padding: 18px 20px 14px; margin-bottom: 20px; }
.dperf h2 { margin: 0 0 10px; }
.perf-row { display: grid; grid-template-columns: 96px minmax(120px, 1fr) 92px 92px; align-items: center; gap: 14px; padding: 7px 0; }
.perf-name { font-weight: 600; color: var(--navy-ink); }
.perf-track { position: relative; height: 16px; border-radius: 99px; background: #e6eaf0; box-shadow: inset 0 1px 3px rgba(15, 30, 50, .15); }
.perf-track > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; animation: xp-fill 1s cubic-bezier(.2, .8, .2, 1) both; }
.perf-done { background: linear-gradient(90deg, #8db6ec, #b9d3f5); }
.perf-right { background: linear-gradient(90deg, #1f8a4c, #48c47f); box-shadow: 0 0 8px rgba(72, 196, 127, .45); }
.perf-right::after { content: ''; position: absolute; inset: 2px 6px auto 6px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .3); }
.perf-pct { white-space: nowrap; font-variant-numeric: tabular-nums; }
.perf-pct b { font-size: 17px; color: var(--navy-ink); }
.perf-count { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.perf-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.perf-sw { display: inline-block; width: 18px; height: 8px; border-radius: 99px; }
.perf-sw-done { background: #a3c5f0; }
.perf-sw-right { margin-left: 10px; background: #34a866; }
@media (max-width: 640px) { .perf-row { grid-template-columns: 80px 1fr 70px; } .perf-count { display: none; } }
.xp-num { font-size: 13.5px; color: #596375; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-num b { color: var(--navy-ink); }
.xp-up { position: absolute; right: 0; top: -30px; padding: 4px 12px; border-radius: 99px; background: linear-gradient(135deg, var(--xa), var(--xb)); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); animation: xp-pop 2.6s ease both; }
@keyframes xp-pop { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 700px) { .xp-row { grid-template-columns: auto auto 1fr; } .xp-bar { grid-column: 1 / -1; } }
.ach-bar em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--navy-ink); white-space: nowrap; }
.ach-pct { font-size: 22px; font-weight: 800; color: var(--navy); text-align: right; }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .ach { grid-template-columns: 44px 1fr 52px; }
  .ach-bars { grid-column: 1 / -1; }
  .ach-badge { width: 44px; height: 44px; }
}
.uw-stat-main { flex: 1; min-width: 0; }
.uw-stat-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: #e9ecf3; overflow: hidden; }
.uw-stat-bar i { display: block; height: 100%; background: #002c57; border-radius: 3px; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }
.uw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.uw-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; font-size: 16px; color: #596375; }
.uw-stat b { margin-right: 4px; font-size: 20px; color: #000; }
.uw-stat-label { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: #596375; }
.uw-stat-ic { flex: none; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 6px; background: #dde1f9; }
.uw-stat-ic svg { width: 22px; height: 22px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .uw-stats { grid-template-columns: 1fr; } }

/* ---------- our own touches on the app frame (navy and gold) ---------- */
.trial-bar { background: var(--navy); }
.app-shell .trial-bar .container { background: var(--navy); box-shadow: 0 3px 10px rgba(0, 26, 53, 0.25); }
.trial-days { background: var(--accent); color: var(--navy); }
.sh-title::after { content: ''; display: block; width: 46px; height: 3px; margin: 4px 0 0 auto; border-radius: 2px; background: var(--accent); }
.sh-link:hover { color: var(--navy); }
.sh-pill { background: var(--navy); }
.sh-pill:hover { background: #0b3d73; }
.sh-pill-ghost { background: #eef2f7; color: var(--navy); }
.uw-stat-ic { background: #fff3d6; }
.uw-stat-ic svg { stroke: var(--navy); }
body.app-shell { background: #f5f7fa; }
.dplan-hi { margin: 0; color: #596375; font-size: 14.5px; }
.ach-badge { font-size: 12px; letter-spacing: 0.02em; }
.ach-cp { background: #e3edfb; color: #1d4f91; }
.ach-bb { background: #e2f4ea; color: #1e6b3f; }
.ach-ps { background: #fff1d6; color: #8a5a00; }
.ach-cars { background: #f6e9fb; color: #6b2f86; }
/* CARS card stars are a bonus on top: a dashed track. */
.ach-bonus { background: repeating-linear-gradient(90deg, #eef1f5 0 6px, #e3e7ee 6px 12px); }
.ach-note { margin: 12px 2px 0; }
@media (max-width: 900px) { .ach { grid-template-columns: 1fr 60px; } }

/* My Steps: the countdown and hours a sitting on top, the pace, then the steps (2 done, 3 next). */
.steps-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.steps-count { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: #212529; text-align: left; cursor: pointer; }
.steps-count b { font-size: 44px; line-height: 1; color: var(--navy); }
.steps-count span { font-size: 17px; }
.steps-count:hover span { text-decoration: underline; }
.steps-count-empty b { color: var(--accent); }
.steps-hours { display: grid; justify-items: end; gap: 4px; margin: 0; font-size: 13px; color: #596375; }
.steps-pills { display: inline-flex; border: 1px solid #cfd6df; border-radius: 18px; overflow: hidden; }
.steps-pills button { width: 38px; height: 30px; border: 0; border-left: 1px solid #cfd6df; background: #fff; font: 600 14px inherit; font-family: inherit; color: var(--navy); cursor: pointer; }
.steps-pills button:first-child { border-left: 0; }
.steps-pills button.is-on { background: var(--navy); color: #fff; }
.steps-pace { margin: 4px 0 0; font-size: 14.5px; color: #3c4653; }
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 9px 0 9px; }
.step::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: #e3e7ee; }
.step:first-child::before { top: 50%; }
.step:last-child::before { bottom: 50%; }
.step-dot { position: relative; grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #cfd6df; background: #fff; font-size: 13px; font-weight: 800; color: #596375; }
.step a { font-weight: 600; color: var(--navy-ink); text-decoration: none; }
.step a:hover { text-decoration: underline; }
.step small { grid-column: 2; }
.step-done .step-dot { border-color: #1e7b46; background: #e6f4ec; color: #1e7b46; }
.step-done a { color: #5b6776; font-weight: 400; }
.step-now .step-dot { border-color: var(--accent); background: var(--accent); color: var(--navy); box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.25); }
.step-now a { font-size: 16.5px; }

/* The month calendar (site.js): big, easy day buttons, today ringed, the pick in navy. */
.cal { position: relative; }
.cal-value { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.cal-box { width: 100%; max-width: 340px; user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-size: 15.5px; font-weight: 700; color: var(--navy-ink); }
.cal-nav { width: 34px; height: 34px; border: 1px solid #d6dce6; border-radius: 50%; background: #fff; font-size: 20px; line-height: 1; color: var(--navy); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: #eef2f7; }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-w { padding: 4px 0; font-size: 12px; font-weight: 700; color: #8a94a3; text-align: center; }
.cal-day { aspect-ratio: 1; min-height: 36px; border: 0; border-radius: 50%; background: none; font: 500 14.5px inherit; font-family: inherit; color: #1d2733; cursor: pointer; }
.cal-day:hover:not(:disabled) { background: #fff3d6; }
.cal-day:disabled { color: #c3c9d2; cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px #cfd6df; }
.cal-day.is-sel { background: var(--navy); color: #fff; font-weight: 700; }
.cal-grid .cal-day.cal-pad { cursor: default; }
.cal-grid .cal-day.cal-pad:hover { background: none; }
.uw-day { margin-top: 14px; max-width: 340px; }
.uw-day.is-missing .cal-box { outline: 2px solid #d93025; outline-offset: 6px; border-radius: 8px; }
/* Test Date dialog. */
.td-dialog { width: min(680px, calc(100vw - 24px)); }
.td-dialog form { grid-template-columns: 0.85fr 1.15fr; min-height: 0; }
.td-dialog .sh-dialog-side { display: flex; flex-direction: column; gap: 4px; }
.td-now { margin-top: auto !important; padding-top: 18px; color: #fff !important; }
.td-dialog .sh-dialog-body { position: relative; gap: 14px; padding: 22px 24px 18px; }
.td-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: #8a94a3; cursor: pointer; }
.td-x:hover { background: #eef2f7; color: var(--navy); }
.td-kind { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 20px; background: #eef2f7; }
.td-kind button { padding: 6px 14px; border: 0; border-radius: 17px; background: none; font: 600 13.5px inherit; font-family: inherit; color: #596375; cursor: pointer; }
.td-kind button.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.td-unsure { align-self: flex-start; padding: 0; border: 0; background: none; font: 13.5px inherit; font-family: inherit; color: #596375; text-decoration: underline; cursor: pointer; }
.td-unsure:hover { color: var(--navy); }
@media (max-width: 640px) { .td-dialog form { grid-template-columns: 1fr; } }

/* Our icons: navy-ish strokes with a gold accent. */
.sb-ic .acc, .uw-stat-ic .acc, .sh-link .acc { fill: var(--accent); stroke: none; }
.sb-ic .acc-line, .uw-stat-ic .acc-line { stroke: var(--accent); }
.sb-ic { width: 19px; height: 19px; }
.sh-link svg .acc { fill: var(--accent); }
/* Share your idea dialog. */
.idea-dialog { width: min(620px, calc(100vw - 24px)); }
.idea-dialog form { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.idea-dialog .sh-dialog-body { position: relative; padding-top: 40px; }
.idea-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid #cfd6df; border-radius: 8px; font: 15px/1.5 inherit; font-family: inherit; resize: vertical; }
.idea-dialog textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 44, 87, 0.12); }
.idea-dialog .sh-dialog-actions { align-items: center; gap: 10px; }
@media (max-width: 640px) { .idea-dialog form { grid-template-columns: 1fr; } }
/* AAMC Resources page. */
.aamc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.aamc-lead { max-width: 680px; margin: 0; font-size: 15.5px; color: #3c4653; }
.aamc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 12px; }
.aamc-card-head h2 { font-size: 18px; }
.aamc-card-head a { margin-left: auto; font-size: 14px; font-weight: 600; }
.aamc a[target='_blank']::after { content: ' \2197'; }
.aamc .btn[target='_blank']::after { content: none; }
.aamc-table td:first-child { white-space: nowrap; }
.aamc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.aamc-card h2 { margin: 0 0 10px; font-size: 18px; }
.aamc-list { margin: 0; padding: 0; list-style: none; }
.aamc-list li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid #eef0f3; }
.aamc-list li:first-child { border-top: 0; padding-top: 0; }
.aamc-list a { font-weight: 600; }
.aamc-list span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .aamc-grid { grid-template-columns: 1fr; } }
.ach-points { margin-left: 10px; padding: 2px 12px; border-radius: 14px; background: #fff3d6; font-size: 15px; font-weight: 800; color: var(--navy); vertical-align: 2px; }
/* Drag a row to arrange the Achievements (saved to the account): grip dots on hover, the row lifts. */
.ach { cursor: grab; user-select: none; }
.ach-grip { touch-action: none; }
@media (hover: none) { .ach-grip { opacity: 1 !important; width: 14px; } }
.ach-grip { width: 10px; height: 22px; justify-self: center; opacity: 0; background: radial-gradient(circle, #a3adbb 1.4px, transparent 1.6px) 0 0 / 5px 5px; transition: opacity 0.15s; }
.ach:hover .ach-grip { opacity: 1; }
.ach.is-dragging { position: relative; z-index: 2; cursor: grabbing; background: #fff; box-shadow: 0 10px 26px rgba(0, 26, 53, 0.18); transform: scale(1.01); }
.dach.is-arranging .ach:not(.is-dragging) { transition: transform 0.18s ease; }
@media (max-width: 900px) { .ach { grid-template-columns: 14px 1fr 60px; } .ach-bars { grid-column: 2 / -1; } }

/* The fading-cards reminder in My Steps. */
.fade-alert { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px solid #f3d58a; border-radius: 10px; background: #fff8e6; color: #5c4300; text-decoration: none; }
.fade-alert:hover { background: #fff1cc; color: #3d2c00; }
.fade-alert u { font-weight: 700; color: var(--navy); }
.fade-ic { font-size: 20px; }
.fade-ok { margin: 10px 0 0; }
.fade-form { align-items: center; gap: 8px; }
.fade-form input[type='number'] { width: 80px; height: 38px; padding: 0 8px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; }
.fade-form select { height: 38px; padding: 0 8px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; background: #fff; }
.drill-only { padding: 8px 12px; border-radius: 8px; background: #fff8e6; }

/* The hover on a card's familiarity number: when it next fades (drill.js). */
.fam-tip { position: fixed; z-index: 80; max-width: 280px; padding: 7px 11px; border-radius: 8px; background: #001a35; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; }
.fam-tip[hidden] { display: none; }
.drill-table .fam-val { cursor: help; }

/* My Account (public/js/account.js saves each field as it's edited). */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.acc-grid-4 { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.acc-field { position: relative; display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: #596375; }
.acc-field small { font-weight: 400; }
.acc-field input, .acc-field select, .acc-pair input, .acc-pair select, .acc-password input { height: 40px; padding: 0 11px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; font-size: 14.5px; font-weight: 400; color: var(--ink); background: #fff; min-width: 0; }
.acc-field input:focus, .acc-field select:focus, .acc-pair input:focus, .acc-pair select:focus, .acc-password input:focus { border-color: var(--navy-2); outline: none; box-shadow: 0 0 0 3px rgba(11, 61, 115, 0.15); }
.acc-field [aria-invalid="true"], .acc-pair [aria-invalid="true"] { border-color: var(--bad); }
.acc-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-pair input[type="number"] { width: 72px; }
.acc-status { position: absolute; top: 0; right: 0; font-size: 12px; font-style: normal; font-weight: 600; color: var(--ok); opacity: 0; transition: opacity .2s; }
.acc-status.on { opacity: 1; }
.acc-status.is-error { position: static; color: var(--bad); font-weight: 500; }
.acc-pair .acc-status, .switch .acc-status { position: static; }
.acc-confirm { padding: 10px 12px; border-radius: 8px; background: #f4f7fa; }
.acc-field[hidden], .acc-pair [hidden] { display: none; }
.acc-password { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: center; }
.acc-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-top: 1px solid #edf0f4; }
.acc-row > div { flex: 1 1 220px; }
.acc-row:first-of-type { border-top: 0; }
.acc-row p { margin: 3px 0 0; }
/* A switch: a checkbox drawn as a sliding toggle. */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #cfd6df; transition: background .15s; }
.switch > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid #3b73c8; outline-offset: 2px; }
@media (max-width: 700px) { .acc-grid { grid-template-columns: 1fr 1fr; } }
/* My big plan (views/partials/big-plan.ejs): study time a week, the phases on a timeline, this
   week's target with a pace mark, the bank. */
.bp { display: flex; flex-direction: column; gap: 12px; }
.bp-ask-lead { margin: 0; color: #596375; font-size: 14.5px; }
.bp-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid #e4e8ee; border-radius: 10px; background: #fbfcfe; }
.bp-ask-q { font-weight: 600; min-width: 150px; }
.bp-pair { display: inline-flex; gap: 6px; }
.bp select, .bp input[type=date] { height: 32px; padding: 0 8px; border: 1px solid #cfd6df; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.bp-status { font-style: normal; font-size: 13px; color: var(--bad); }
.bp-status:not(.on) { display: none; }
.bp-today { margin: 4px 0; font-size: 18px; }
.bp-hours { display: flex; align-items: center; gap: 8px; margin: 0; color: #596375; }
.bp-line { display: flex; gap: 3px; }
.bp-line i { flex: 1 1 0; min-width: 6px; height: 8px; border-radius: 4px; }
.bp-phases { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.bp-phases li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.bp-phases li i { width: 10px; height: 10px; border-radius: 3px; }
.bp-phases li:not(.is-now) b { font-weight: 600; color: #596375; }
.bp-phases em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--navy); background: #e8eef6; border-radius: 8px; padding: 0 7px; }
.bp-ph-first i, i.bp-ph-first { background: #9fb7d6; }
.bp-ph-review i, i.bp-ph-review { background: #9ccbaf; }
.bp-ph-final i, i.bp-ph-final { background: #f3d58a; }
.is-now.bp-ph-first i, i.is-now.bp-ph-first { background: var(--navy); }
.is-now.bp-ph-review i, i.is-now.bp-ph-review { background: var(--ok); }
.is-now.bp-ph-final i, i.is-now.bp-ph-final { background: var(--accent); }
.bp-week { padding: 12px 14px; border: 1px solid #e4e8ee; border-radius: 10px; background: linear-gradient(90deg, #fbfcfe, #f4f6fa); }
.bp-week-head { display: flex; justify-content: space-between; gap: 10px; }
.bp-week-n { font-size: 14px; color: #596375; }
.bp-bar { position: relative; height: 10px; margin: 8px 0; border-radius: 5px; background: #e4e8ee; overflow: hidden; }
.bp-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--navy); }
.bp-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.bp-bar-thin { flex: 1; height: 6px; margin: 0; }
.bp-bar-thin > i { background: #6f8fb8; }
.bp-pace { margin: 0; font-size: 14.5px; }
.bp-pace .muted { display: block; font-size: 13.5px; }
.bp-ahead b, .bp-on b { color: var(--ok); }
.bp-behind b { color: var(--warn); }
.bp-tight { margin: 6px 0 0; color: var(--warn); }
.bp-bank { display: flex; align-items: center; gap: 10px; }
/* My next step (the plan card's bottom part, public/js/next-step.js): one question at a time, big
   answer buttons, ending in one step with Start now. */
.nstep { display: grid; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid #edf0f4; }
.nstep-h { margin: 0; font-size: 18px; font-weight: 600; color: #596375; }
.nstep-tree { display: grid; gap: 10px; margin: 0; }
.ns-screen { display: grid; gap: 12px; }
.ns-screen[hidden] { display: none; }
.ns-q { margin: 0; font-size: 17px; color: #212529; }
.ns-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ns-opts:has(> :only-child) { grid-template-columns: 1fr; }
.ns-opt { min-height: 54px; padding: 12px 16px; border: 1.5px solid #cfd6df; border-radius: 10px; background: #fff; font: 600 16px/1.25 inherit; font-family: inherit; color: var(--navy); cursor: pointer; transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }
.ns-opt:hover, .ns-opt:focus-visible { border-color: var(--navy); background: #f2f6fb; box-shadow: 0 2px 6px rgba(0, 44, 87, 0.1); outline: none; }
.ns-wide { grid-column: 1 / -1; }
.ns-size { display: grid; justify-items: center; gap: 2px; padding: 16px; text-align: center; }
.ns-size b { font-size: 34px; line-height: 1; }
.ns-size span { font-size: 14px; font-weight: 600; color: #596375; }
.ns-size small { margin-top: 6px; font-size: 14px; font-weight: 400; color: #3c4653; }
.ns-note { margin: 0; font-size: 14px; color: #596375; }
.ns-link { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--navy-2); text-decoration: underline; cursor: pointer; }
.ns-link[hidden] { display: none; }
.nstep-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; border: 1.5px solid var(--accent); border-radius: 10px; background: #fffaf0; }
.nstep-what { display: grid; gap: 2px; }
.nstep-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8a5a00; }
.nstep-what b { font-size: 18px; color: var(--navy-ink); }
.nstep-go { min-width: 120px; padding: 10px 20px; font-size: 16px; }
.nstep-go[hidden] { display: none; }
.nstep-done { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: #3c4653; }
.nstep-check { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e6f4ec; color: #1e7b46; font-weight: 800; }
@media (max-width: 600px) { .ns-opts { grid-template-columns: 1fr; } .nstep-go { width: 100%; } }
/* My big plan as a calendar (views/partials/big-plan.ejs): today up front with its Start buttons, this
   week as 7 day cells, the full calendar an overlay (public/js/big-plan.js). */
.bp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bp-now { padding: 12px 14px; border: 1.5px solid var(--navy); border-radius: 10px; background: #f6f9fd; }
.bp-now-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; color: var(--navy); }
.bp-parts { display: grid; gap: 6px; margin: 0; }
.bp-part { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid #e4e8ee; }
.bp-part-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #cfd6df; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; }
.bp-part.is-done .bp-part-check { background: var(--ok); border-color: var(--ok); }
.bp-part.is-done .bp-part-what { color: #596375; }
.bp-part-what { flex: 1; font-size: 14.5px; }
.bp-part .btn { flex: none; min-width: 74px; }
.bp-rest { margin: 0; font-size: 14.5px; }
.bp-rest .muted { display: block; margin-top: 2px; font-size: 13.5px; }
.bp-did { margin: 8px 0 0; }
.bp-week .bp-week-head { flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bp-week .bp-week-head .small { color: #596375; }
.bp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.bp-d { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 52px; padding: 5px 6px; border-radius: 7px; background: #fff; border: 1px solid #e4e8ee; font-size: 12px; line-height: 1.25; }
.bp-d-date { color: #596375; }
.bp-d-date b { color: var(--ink); }
.bp-d-what { font-weight: 600; color: var(--navy); overflow-wrap: break-word; }
.bp-d-rest, .bp-d-eve, .bp-d-past.bp-d-rest, .bp-d-before, .bp-d-after { background: transparent; border-style: dashed; }
.bp-d-rest .bp-d-what, .bp-d-eve .bp-d-what, .bp-d-past .bp-d-what { font-weight: 500; color: #8a94a3; }
.bp-d-past.bp-d-done { background: var(--ok-bg); border-color: #b9dcc7; }
.bp-d-past.bp-d-done .bp-d-what { color: var(--ok); font-weight: 600; }
.bp-d-check { position: absolute; top: 4px; right: 6px; font-weight: 700; color: var(--ok); }
.bp-d-test { background: var(--accent); border-color: var(--accent); }
.bp-d-test .bp-d-what, .bp-d-test .bp-d-date, .bp-d-test .bp-d-date b { color: var(--accent-ink); }
.bp-d.is-today { border: 2px solid var(--navy); box-shadow: 0 2px 6px rgba(0, 44, 87, .15); }
.bp-d.bp-in-first:not(.is-today):not(.bp-d-rest) { border-top: 3px solid #9fb7d6; }
.bp-d.bp-in-review:not(.is-today):not(.bp-d-rest) { border-top: 3px solid #9ccbaf; }
.bp-d.bp-in-final:not(.is-today):not(.bp-d-rest):not(.bp-d-test) { border-top: 3px solid #f3d58a; }
.bp-cal:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(14, 27, 44, .45); animation: dmax-in .16s ease-out; }
.bp-cal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px 12px; border-bottom: 1px solid #edf0f4; }
.bp-cal-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: #596375; }
.bp-cal-close { margin-left: auto; align-self: center; font-size: 20px; line-height: 1; }
.bp-cal > * { width: min(1100px, 100%); background: #fff; }
.bp-cal-head { border-radius: 12px 12px 0 0; }
.bp-cal-body { max-height: calc(100vh - 140px); overflow-y: auto; padding: 8px 20px 20px; border-radius: 0 0 12px 12px; }
.bp-cal:not([hidden]) { grid-template-rows: auto auto; align-content: center; gap: 0; }
.bp-cal-week { padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.bp-cal-week:last-child { border-bottom: 0; }
.bp-cal-week .bp-week-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bp-cal-week .bp-week-head .small { color: #596375; }
.bp-days-full .bp-d { min-height: 84px; gap: 3px; }
.bp-d-part { font-weight: 600; color: var(--navy); }
.bp-d-part + .bp-d-part { font-weight: 500; color: #4a5566; }
.bp-d-time { font-size: 11.5px; margin-top: auto; }
@media (max-width: 480px) {
  .bp-days:not(.bp-days-full) { gap: 3px; }
  .bp-days:not(.bp-days-full) .bp-d { padding: 4px 3px; font-size: 11px; }
}
@media (max-width: 760px) {
  .bp-days-full { grid-template-columns: 1fr; }
  .bp-days-full .bp-d { min-height: 0; flex-direction: row; flex-wrap: wrap; column-gap: 10px; }
  .bp-days-full .bp-d-date { min-width: 56px; }
  .bp-cal:not([hidden]) { padding: 8px; }
}

/* My next step: "I don't understand": the latest misses to ask about, then a note. */
.ns-ask-list { display: grid; gap: 6px; margin: 6px 0 10px; }
.ns-ask-item { display: flex; align-items: center; gap: 10px; }
.ns-ask-q { flex: 1; padding: 8px 12px; border: 1.5px solid #c9d1da; border-radius: 8px; background: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ns-ask-q:hover { border-color: var(--navy-2); }
.ns-ask-q.on { border-color: var(--navy); background: #edf2f8; }
.ns-ask-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.ns-ask-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
/* Surprise me's ask before a new test: in place of the size buttons. */
.ns-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px; border: 1.5px solid var(--navy); border-radius: 10px; background: #f2f6fb; text-align: center; }
.ns-confirm[hidden], .ns-opts[hidden] { display: none; }
.ns-confirm .ns-q { font-weight: 600; color: var(--navy); }
.ns-confirm-row { display: flex; gap: 10px; }
.ns-confirm-row .btn { min-width: 110px; }
a.ns-opt { text-decoration: none; text-align: center; }

/* Drill page: one short tip each. */
.drill-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.drill-tips li { padding: 8px 12px; border: 1px solid #e3e8ef; border-radius: 8px; background: #f8fafc; font-size: 13.5px; color: #4a5566; line-height: 1.4; }
.drill-tips li b { display: block; margin-bottom: 2px; color: var(--navy-ink); font-size: 13px; }

/* My Decks: Study and Drill side by side over one deck, the shared-knowledge line under them. */
.deck-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.deck-way { display: flex; flex-direction: column; margin: 0; }
/* Drill: as tall as Study, the level bars growing to fill it. */
.deck-way-fit .drill-levels { flex: 1; }
.deck-way-fit .lv-row { flex: 1; }
.deck-way-fit .lv-track { height: clamp(14px, 65%, 28px); }
.deck-way h2 { margin: 0 0 2px; }
.deck-way > p { margin: 0 0 8px; }
.deck-big { margin: 8px 0 2px; font-size: 16px; color: var(--navy-ink); }
.deck-big b { font-size: 36px; margin-right: 4px; }
.deck-way .btn-block { margin-top: auto; }
.deck-more { margin: 10px 0 0; color: var(--muted); }
.deck-shared { display: flex; align-items: center; gap: 10px; margin: 14px 0 20px; padding: 10px 14px; border-radius: 10px; background: #eef4fb; color: #33496a; font-size: 14px; }
.deck-shared span { font-size: 20px; color: var(--navy-2); }
@media (max-width: 700px) { .deck-ways { grid-template-columns: 1fr; } }

/* Drill: a card suspended in Study, greyed, with its way back. */
.drill-table tr.is-suspended td:not([data-col="fam"]) { opacity: .45; }
.susp { display: block; margin-top: 4px; white-space: nowrap; }

/* Drill: the table packed left so Prompt and Answer get the room: less page margin, tighter cells, and
   narrow Tags, Arrived and Source columns. */
.sh-page > section.container.drill-page { padding-left: 12px; padding-right: 12px; }
.drill-table th, .drill-table td { padding-left: 8px; padding-right: 8px; }
.drill-table th { letter-spacing: 0; }
.drill-table .tag-in { min-width: 0; width: 56px; }
.drill-table th[data-key="tags"] .col-filter { width: 56px; }
.drill-table th[data-key="subject"] .col-filter { width: auto; max-width: 64px; }

/* Ask beside a dashboard heading, and its box (public/js/dashboard.js). */
.dask { margin-left: 8px; height: 24px; padding: 0 10px; border: 1px solid #b9c7d8; border-radius: 12px; background: #fff; color: #1d4f91; font: inherit; font-size: 12.5px; font-weight: 700; vertical-align: middle; cursor: pointer; }
.dask:hover, .dask:focus-visible { border-color: #1d4f91; background: #edf3fb; }
.dask-pop { position: absolute; z-index: 80; width: 320px; padding: 10px 12px; border: 1px solid #c9d1da; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.dask-pop[hidden] { display: none; }
.dask-h { margin: 0 0 6px; font-weight: 700; font-size: 13.5px; color: #1d4f91; }
.dask-pop textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #c9d1da; border-radius: 6px; font: inherit; font-size: 13.5px; resize: vertical; }
.dask-pop textarea:focus { outline: none; border-color: #1d4f91; box-shadow: 0 0 0 3px rgba(29, 79, 145, .15); }
.dask-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.dask-row button { height: 28px; padding: 0 14px; border: 0; border-radius: 14px; background: #1d4f91; color: #fff; font-weight: 700; cursor: pointer; }
.dask-msg { font-size: 12px; color: #2f7a46; }

/* My Decks: All cards, Anki-browser style (public/js/deck-browse.js). */
.deck-browse { margin-top: 20px; }
.browse-q { width: 220px; height: 32px; padding: 0 10px; border: 1px solid #c9d1da; border-radius: 8px; font: inherit; font-size: 13.5px; }
.browse-wrap { max-height: 520px; overflow: auto; }
.browse-table th { position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none; }
.browse-table th[data-dir="asc"]::after { content: ' ▲'; font-size: 10px; }
.browse-table th[data-dir="desc"]::after { content: ' ▼'; font-size: 10px; }
.browse-table td { font-size: 13.5px; }
.browse-table tr.is-new td:nth-child(4) { color: #1d4f91; font-weight: 600; }
.browse-table tr.is-susp td { background: #fff8d6; }

/* My Cards: the next 7 days' reviews as small bars, and the streak line. */
.deck-cast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; margin: 10px 0 4px; }
.cast-day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.cast-day i { display: block; width: 100%; max-width: 28px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #7aa7e0, #2a6fbf); }
.cast-day:first-child i { background: linear-gradient(180deg, #f6c744, #d99a00); }
.cast-n { font-weight: 700; color: var(--navy-ink); min-height: 14px; }
/* Card Summary's Drill panel: cards by level (a horizontal bar each, 5 stars on top), progress, fading cards. */
.drill-levels { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 6px; }
.lv-head { font-size: 13px; font-weight: 700; color: var(--navy-ink); margin-bottom: 1px; }
.lv-head .muted { font-size: 12px; font-weight: 400; }
/* Label, then the bar and its count just past its end (the track keeps room for it on the right): both
   drill the level's cards. */
.lv-row { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.lv-row small { color: var(--muted); text-align: right; }
.lv-track { display: flex; align-items: center; gap: 6px; height: 14px; padding-right: 6ch; }
.lv-bar { display: block; flex: none; height: 100%; border-radius: 4px; background: #c9d1da; transition: filter 0.15s; }
.lv-n { font-weight: 700; color: var(--navy-ink); font-variant-numeric: tabular-nums; text-decoration: none; }
.lv-row:hover .lv-n { color: var(--navy-2); text-decoration: underline; text-underline-offset: 2px; }
.lv-row:hover .lv-bar { filter: brightness(1.08) saturate(1.15); }
.drill-levels .lv-5 .lv-bar { background: linear-gradient(90deg, #f6c744, #d99a00); }
.drill-levels .lv-4 .lv-bar { background: linear-gradient(90deg, #6fd39b, #1f9a5a); }
.drill-levels .lv-3 .lv-bar { background: linear-gradient(90deg, #6cc9c4, #198b86); }
.drill-levels .lv-2 .lv-bar { background: linear-gradient(90deg, #7aa7e0, #2a6fbf); }
.drill-levels .lv-1 .lv-bar { background: linear-gradient(90deg, #a9c2e3, #6f8fbd); }
.drill-levels .lv-5 small { color: #b07a00; font-weight: 700; }
.drill-win { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 6px; padding: 8px 10px; border-radius: 8px; background: #ecf8f0; color: #22553a; line-height: 1.45; }
.drill-win b { color: #157a45; }
.drill-win a { color: #157a45; font-weight: 600; }
.drill-ic { font-size: 18px; line-height: 1.2; }
.drill-fade { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #fff6e6; color: #6b4a10; line-height: 1.45; }
.drill-fade a { color: #a15c00; font-weight: 700; }
.drill-quiet { margin: 6px 0; }
.drill-win a.drill-period, .drill-fade a.drill-period, .drill-quiet a.drill-period { color: inherit; font-weight: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.drill-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.soon-chip { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 9px; border: 1px solid #f0c987; border-radius: 999px; background: #fffaf0; color: #8a5a00; text-decoration: none; }
.soon-chip:hover { background: #ffefd2; }
.soon-chip.is-zero { border-color: #dfe4ea; background: transparent; color: var(--muted); }
.deck-streak { margin: 4px 0 10px; color: #4a5566; }
.deck-streak b { color: #c2410c; }

/* Study: how cards show (Front/Back first, Read/Listen), two small segmented toggles. */
.study-modes { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: -6px 0 14px; }
.seg-mini { display: inline-flex; border: 1px solid #c9d1da; border-radius: 8px; overflow: hidden; }
.seg-mini button { padding: 4px 12px; border: 0; background: #fff; font: inherit; font-size: 13px; color: #4a5566; cursor: pointer; }
.seg-mini button + button { border-left: 1px solid #c9d1da; }
.seg-mini button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 600; }
.seg-mini button:disabled { opacity: .4; cursor: not-allowed; }
.flash-hear { padding: 10px 18px; border: 1.5px solid #c9d6e6; border-radius: 99px; background: #f2f6fb; font: inherit; font-size: 16px; color: var(--navy-2); cursor: pointer; }
.flash-heard { margin-bottom: 10px; color: var(--muted); font-size: .85em; }

/* Study: Anki's review tools (Undo, Bury, Mark, Info), the card's tags and its info box. */
.study-tags { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.study-tags input { flex: 1; height: 30px; padding: 0 10px; border: 1px dashed #cdd3db; border-radius: 6px; font: inherit; font-size: 13.5px; background: transparent; }
.study-tags input:focus { outline: none; border-style: solid; border-color: var(--navy-2); }
#markBtn[aria-pressed="true"] { color: #b45309; font-weight: 700; }
.card-info { margin-top: 10px; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 8px; background: #f8fafc; font-size: 13.5px; }
.card-info dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; margin: 0 0 8px; }
.card-info dt { color: var(--muted); font-size: 12px; }
.card-info dd { margin: 0 0 4px; font-weight: 600; color: var(--navy-ink); }
.card-info ul { margin: 4px 0 8px; padding-left: 18px; }
.study-timer { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 8px; }
.deck-custom { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.deck-custom select { height: 28px; padding: 0 6px; border: 1px solid #c9d1da; border-radius: 6px; font: inherit; font-size: 13px; }
.deck-custom select[hidden] { display: none; }
.browse-q { width: 300px; }

/* Card stats (/deck/stats). */
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats-tiles .card { margin: 0; padding: 14px 16px; }
.stats-tiles b { display: block; font-size: 26px; color: var(--navy-ink); }
.stats-tiles span { font-size: 13px; color: var(--muted); }
.stats-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin: 10px 0 6px; }
.st-bar { flex: 1; display: flex; flex-direction: column-reverse; min-width: 0; }
.st-bar i { display: block; border-radius: 2px; }
.sb-study { background: #2a6fbf; }
.sb-drill { background: #f0b429; }
.sb-ahead { background: #5a9cf5; }
.stats-key { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.sw-study { background: #2a6fbf; }
.sw-drill { margin-left: 8px; background: #f0b429; }
.deck-stats-link { float: right; font-weight: 600; }
/* Study page: its links and link-style tools (Undo, Bury, Mark, Info, Suspend, Reset) are underlined. */
.study a:not(.btn), .study .linklike { text-decoration: underline; text-underline-offset: 2px; }

/* Results: the next steps in a row with arrows, the dashboard on its own line under them. */
.res-steps { align-items: center; }
.res-steps + .btn-row { margin-top: 8px; }
.res-arrow { color: var(--muted); font-size: 18px; line-height: 1; }
.res-step { display: inline-flex; align-items: center; gap: 8px; }
.btn.is-off { opacity: 0.5; cursor: default; }

/* The app's menu (partials/shell-top.ejs), matching the front page's header (.nav): solid navy, the
   logo left (.brand), the page links, the expiration date right. */
.sh-main { min-height: 100vh; display: flex; flex-direction: column; }
.tb { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: 62px; padding: 0 24px; background: #001a35; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tb-brand { flex: none; }
.tb-nav { flex: 1; min-width: 0; display: flex; gap: 22px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-item { position: relative; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #c7d3e2; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tb-item:hover, .tb-item.is-on { color: #fff; }
.tb-item.is-on { box-shadow: inset 0 -2px 0 var(--accent); }
.tb-item sup { font-size: 0.6em; }
.tb-exp { flex: none; text-align: right; font-size: 11.5px; line-height: 1.3; color: #9fb2c8; }
.tb-exp b { display: block; font-size: 12.5px; font-weight: 500; color: #fff; }
@media (max-width: 1250px) { .tb-brand-name { display: none; } }
@media (max-width: 900px) { .tb-exp { display: none; } .tb { gap: 18px; padding: 0 14px; } .tb-nav { gap: 16px; } .tb-item { font-size: 14px; } }
@media (max-width: 1150px) { .tb-item .sb-ic { display: none; } }

/* Dashboard tests: each test's card familiarity, net stars out of the max, as a gold meter. */
.dfam { display: inline-flex; align-items: center; gap: 7px; margin: 5px 0 2px; padding: 3px 10px 3px 7px; border-radius: 99px; background: #fff8e6; border: 1px solid #f5dc9a; font-size: 12.5px; color: var(--navy-ink); text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.dfam:hover { background: #ffefc2; border-color: var(--accent); transform: translateY(-1px); }
.dfam-star { color: var(--accent); font-size: 15px; line-height: 1; text-shadow: 0 0 6px rgba(240, 180, 41, 0.6); }
.dfam-bar { position: relative; flex: 0 1 80px; min-width: 36px; height: 7px; border-radius: 99px; background: #f1e3bb; overflow: hidden; }
.dfam-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #f0b429, #ffd166); box-shadow: 0 0 6px rgba(240, 180, 41, 0.7); }
.dfam-n { white-space: nowrap; font-variant-numeric: tabular-nums; color: #7a5b00; }
.dfam-n b { color: var(--navy-ink); }
.dfam-go { font-weight: 700; color: #b7791f; white-space: nowrap; }
.dfam:hover .dfam-go { color: var(--navy-ink); }
.dfam.is-full { background: #e9f7ef; border-color: #9ad5b0; }
.dfam.is-full .dfam-go { color: #1e7b45; }

/* Plans: the guarantee's "To qualify" steps. */
.guarantee-steps { margin: 4px 0 10px; padding-left: 20px; }
.guarantee-steps li { margin-bottom: 4px; }
/* Dashboard, empty Tests panel: the baseline diagnostic lengths under "Create your first test". */
/* The empty Tests panel: Create your first test and the baseline diagnostic, styled like the menu
   bar's links (icon with a gold accent, then the words), then the diagnostic's lengths. */
.dstart { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 22px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; cursor: pointer; }
.dstart:hover, .dstart:focus-visible { color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.dstart .sb-ic { width: 19px; height: 19px; }
.diag { padding: 0 0 12px; }
.diag [data-diag] { display: grid; gap: 10px; }
.diag [data-diag][hidden] { display: none; }
.diag [data-diag="time"] { padding: 6px 22px 0; }
.diag .ns-q { font-size: 15px; }
.diag .ns-link { justify-self: start; }
.diag-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.diag-opt { display: grid; justify-items: center; gap: 1px; min-height: 0; padding: 7px 14px; border-width: 1px; border-radius: 8px; text-align: center; }
.diag-opt b { font-size: 15px; font-weight: 600; }
.diag-opt small { font-size: 12px; font-weight: 400; color: #596375; }
.diag-opt:disabled { background: #fff; border-color: #e3e7ec; color: #b3bac4; cursor: not-allowed; box-shadow: none; }
.diag-opt:disabled small { color: #c3c9d1; }

/* A paid account's welcome (dashboard, public/js/dash-tour.js). */
.welcome-dialog { width: min(760px, calc(100vw - 32px)); }
.welcome-dialog .sh-dialog-side { display: flex; align-items: center; }
.welcome-dialog .sh-dialog-side h2 { font-size: 24px; }
.welcome-dialog .sh-dialog-body { gap: 12px; font-size: 15px; line-height: 1.55; color: var(--navy-ink); }
.welcome-dialog .sh-dialog-body p { margin: 0; }
.welcome-dialog .sh-dialog-actions { margin-top: 8px; }

/* The account icon at the right end of the menu bar; Test Date on its own, top left of the header row,
   with a bold checkered flag. */
.tb-account { flex: none; }
.tb-account .sh-avatar { box-shadow: 0 0 0 2px #001a35, 0 0 0 3px rgba(255, 255, 255, 0.35); }
.tb-account:hover .sh-avatar { box-shadow: 0 0 0 2px #001a35, 0 0 0 3px var(--accent); }
.tb-account.is-open .sh-avatar { box-shadow: 0 0 0 2px #001a35, 0 0 0 4px #fff; }
.sh-testdate { gap: 8px; padding: 6px 12px 6px 8px; border: 1.5px solid #f3d27a; border-radius: 99px; background: #fff8e6; color: var(--navy-ink); font-size: 14.5px; }
.sh-testdate:hover { border-color: var(--accent); background: #ffefc2; color: var(--navy-ink); }
.sh-link svg.td-flag { width: 24px; height: 24px; stroke: none; }
.td-flag .td-pole { fill: none; stroke: var(--navy-ink); stroke-width: 2.2; stroke-linecap: round; }
.td-flag .td-cloth { fill: #fff; stroke: var(--navy-ink); stroke-width: 1.4; stroke-linejoin: round; }
.td-flag .td-check { fill: var(--navy-ink); }
/* The countdown beside it (partials/shell-top.ejs): a bar a day, 7 to 180 of them sharing the strip. */
.td-count { display: inline-flex; align-items: center; gap: 12px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--navy-ink); cursor: pointer; }
.td-count:hover { background: #f4f6f9; }
.td-bars { display: flex; align-items: flex-end; gap: 1px; width: calc(361px * var(--fill, 1) - 1px); height: 28px; } /* --fill: days left / 30, under 30 days (each bar plus its 1px gap stays 361/30 px) */
.td-bars i { flex: 1 1 0; min-width: 1px; height: 18px; border-radius: 1.5px 1.5px 0 0; background: linear-gradient(to top, var(--navy), var(--navy-2)); }
.td-bars i.is-week { height: 26px; }
.td-bars i.is-alt { background: linear-gradient(to top, #2a4f7a, #3d6596); }
.td-bars.is-dense { gap: 0; }
.td-bars.is-dense i { border-radius: 0; }
.td-bars i.is-last { background: linear-gradient(to top, #d99a0b, var(--accent)); }
.td-count { position: relative; }
.td-bars i.is-hover { background: var(--accent); box-shadow: 0 0 0 1px var(--navy-ink); }
.td-tip { position: absolute; top: calc(100% + 4px); transform: translateX(-50%); padding: 4px 9px; border-radius: 6px; background: var(--navy-ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 20; }
.td-tip::before { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-bottom-color: var(--navy-ink); }
.td-tip[hidden] { display: none; }
.td-eye { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: #7a8696; cursor: pointer; }
.td-eye:hover { background: #f4f6f9; color: var(--navy-ink); }
.td-eye { margin-left: -16px; } /* close to the countdown's "days left", on its right */
.td-eye svg { width: 18px; height: 18px; }
.td-eye-off { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td-hidden .td-count, .td-hidden .td-eye-on { display: none; }
.td-hidden .td-eye-off { display: block; }
.td-num { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.td-num b { font-size: 18px; color: var(--navy-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .td-bars { width: calc(221px * var(--fill, 1) - 1px); } }
@media (max-width: 800px) { .td-bars { display: none; } }