/* Daily Dose - shared styling.
   Fonts and palette follow learnwithpriya (Baloo 2 display + Atkinson Hyperlegible body,
   navy / sun / mint). Built mobile-first: one question fills the screen, nothing scrolls
   that does not have to, tap targets are thumb-sized. */
:root {
  color-scheme: light;
  --navy: #0e3470; --blue: #1c6ecd; --sun: #fabe14; --coral: #e5484d; --mint: #12a46f; --grape: #7b4fe0;
  --bg: #f4f8ff; --paper: #fff; --ink: #0b1a38; --ink2: #2c3b5a; --muted: #4a5878; --line: #d6e2f3; --tint: #eaf2ff;
  --f-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  /* Belt colours are the belts' own, not the brand palette - a yellow belt has to look
     yellow. White and black carry a border instead of relying on the fill alone. */
  --belt-white: #f3f5f9; --belt-yellow: #f6c800; --belt-orange: #f08a24;
  --belt-green: #1e9e57; --belt-blue: #1766c8; --belt-purple: #7b3fd0;
  --belt-brown: #7a4a22; --belt-black: #16181d;
}
.belt-White { --belt: var(--belt-white); --belt-ink: #2c3b5a; }
.belt-Yellow { --belt: var(--belt-yellow); --belt-ink: #4a3600; }
.belt-Orange { --belt: var(--belt-orange); --belt-ink: #4a2400; }
.belt-Green { --belt: var(--belt-green); --belt-ink: #fff; }
.belt-Blue { --belt: var(--belt-blue); --belt-ink: #fff; }
.belt-Purple { --belt: var(--belt-purple); --belt-ink: #fff; }
.belt-Brown { --belt: var(--belt-brown); --belt-ink: #fff; }
.belt-Black { --belt: var(--belt-black); --belt-ink: #fff; }

/* The badge: a belt, drawn as a belt - a band of its colour with a knot in the middle. */
.beltcard { display: flex; gap: 14px; align-items: center; }
.beltband {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 16px;
  background: var(--belt, var(--belt-white)); border: 1.5px solid rgba(11, 26, 56, .22);
  display: grid; place-items: center; position: relative;
}
.beltband::after {                       /* the knot */
  content: ""; width: 20px; height: 20px; border-radius: 5px;
  background: var(--belt-ink, #2c3b5a); opacity: .9;
}
.beltname {
  font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--navy); line-height: 1.1;
}
.beltbar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 7px; }
.beltbar i { display: block; height: 100%; background: var(--belt, var(--navy)); border-right: 1px solid rgba(11,26,56,.2); }
/* Who wrote this: photo, name, credentials. Used on the landing page and on /about/. */
.me { display: flex; gap: 14px; align-items: center; }
.me img {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--line);
}
.me b { display: block; font-family: var(--f-display); font-size: 19px; color: var(--navy); line-height: 1.2; }
.me small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 2px; }
/* The case coming tomorrow, under today's poster: a strip, not a second poster, or the
   page has two things shouting at the same volume and neither reads as the one to open. */
.nextstrip { display: flex; gap: 12px; align-items: center; background: var(--paper);
             border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.nextstrip img { flex: 0 0 auto; width: 64px; height: 44px; border-radius: 8px;
                 object-fit: cover; border: 1px solid var(--line); }
.nextstrip .t { min-width: 0; }
.nextstrip .k { display: block; color: var(--grape); font-weight: 800; font-size: 11px;
                letter-spacing: .07em; text-transform: uppercase; }
.nextstrip b { display: block; font-family: var(--f-display); font-size: 15.5px;
               color: var(--navy); line-height: 1.25; margin-top: 1px; }
.nextstrip small { display: block; color: var(--muted); font-weight: 700; font-size: 12px;
                   margin-top: 2px; }

/* Rating a case: five big tap targets, because this is read on a phone with one thumb. */
.stars { display: flex; gap: 6px; justify-content: center; margin: 4px 0 2px; }
.stars button { font: inherit; line-height: 1; background: none; border: 0; cursor: pointer;
                padding: 6px; border-radius: 10px; color: var(--line); font-size: 34px;
                transition: transform .08s ease, color .08s ease; }
.stars button:hover { transform: scale(1.08); }
.stars button.on { color: var(--sun); }
.stars button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.starword { text-align: center; font-weight: 800; color: var(--navy); font-size: 13.5px;
            min-height: 18px; }
.rate textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line);
                 border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px;
                 resize: vertical; min-height: 76px; background: var(--paper); color: var(--ink); }
.rate textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.rate .row { display: flex; gap: 10px; }
.rate .row .btn { flex: 1; }

/* A button with a mark on it: the icon and the words centre together as one line. */
.btn.withicon { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn.withicon svg { flex: 0 0 auto; }

/* Passing it on. The card is shown before it is sent - nobody should have to guess what
   their phone is about to post on their behalf. */
.shareprev { display: block; width: 100%; height: auto; border-radius: 14px;
             border: 1px solid var(--line); background: var(--tint); }
.sharewrap { position: relative; }
.sharewrap.busy::after { content: ""; position: absolute; inset: 0; border-radius: 14px;
                         background: var(--tint); }
/* The WhatsApp button wears WhatsApp's own green, because that is what the mark means. */
.btn.wa { background: #25d366; border-color: #25d366; color: #0b2e18; }
.btn.wa:hover { background: #1fbb59; border-color: #1fbb59; }
.btn.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn.ghost svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.optin { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px;
         font-weight: 700; color: var(--ink2); cursor: pointer; }
.optin input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy);
               flex: 0 0 auto; }

/* The two doctors, in one line each. The landing page says who they are; /about/ says more. */
.folk { display: grid; gap: 12px; }
.folk .p { display: flex; gap: 11px; align-items: center; }
.folk img { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
            border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--line); }
.folk .t { min-width: 0; }
.folk b { display: block; font-family: var(--f-display); font-size: 15.5px; color: var(--navy);
          line-height: 1.2; }
.folk small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px;
              margin-top: 1px; }

/* What this person does on Daily Dose, which is not the same as their job title. */
.role { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
        background: var(--tint); color: var(--navy); font-size: 11px; font-weight: 800;
        letter-spacing: .05em; text-transform: uppercase; }
/* On the dark hero the name and credentials have to read against navy. */
.hero .me b { color: #fff; }
.hero .me small { color: var(--sun); }
.hero .me img { border-color: rgba(255, 255, 255, .5); box-shadow: none; }

/* "There is more, and it is one tap away" - the link that replaces three cards of text. */
.go-more {
  display: block; margin-top: 2px; font-weight: 700; font-size: 14.5px; line-height: 1.45;
  color: var(--blue); text-decoration: none;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.go-more:hover { text-decoration: underline; }

/* Points about something, with a tick instead of a bullet. */
ul.pts { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
ul.pts li { padding-left: 26px; position: relative; font-size: 15px; }
ul.pts li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--mint); font-weight: 800; font-size: 15px;
}
.hero ul.pts li::before { color: var(--sun); }

/* The small dot beside a name on the board. */
.beltdot {
  display: inline-block; width: 11px; height: 11px; border-radius: 4px; vertical-align: -1px;
  background: var(--belt, var(--belt-white)); border: 1px solid rgba(11, 26, 56, .3); margin-right: 5px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--blue); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--grape); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; color: var(--navy); margin: 0; line-height: 1.15; }
p { margin: 0; }
.wrap { max-width: 720px; margin: 0 auto; padding-inline: 16px; }
.wrap.wide { max-width: 1040px; }

/* Top bar */
header.bar {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
header.bar .wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brand .dot {
  width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: var(--sun);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 19px;
}
.brand b { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--navy); line-height: 1; }
.brand b span { color: var(--blue); }
.spacer { flex: 1; }
.who { font-size: 13px; color: var(--muted); font-weight: 700; text-align: right; line-height: 1.25; }
/* The mute button in the test header. Thumb-sized, because it gets tapped in a hurry when
   someone walks in. */
.mute {
  flex: none; width: 40px; height: 40px; margin-right: 8px; font-size: 19px; line-height: 1;
  background: var(--tint); border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.mute:active { transform: translateY(1px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); font-weight: 800; font-size: 18px;
  border-radius: 14px; padding: 13px 22px 11px; text-decoration: none; border: 0;
  cursor: pointer; white-space: nowrap; min-height: 50px;
}
.btn.go { background: var(--sun); color: var(--navy); box-shadow: 0 4px 0 #c58f00; }
.btn.line { background: #fff; color: var(--navy); border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.btn.navy { background: var(--navy); color: #fff; box-shadow: 0 4px 0 #061d41; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.block { width: 100%; }
.btn.g { background: #fff; color: #1f1f1f; border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 17px; }
.btn.g svg { width: 20px; height: 20px; flex: none; }

/* Cards */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  box-shadow: 0 4px 14px rgba(14,52,112,.05);
}
.stack { display: grid; gap: 14px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.kicker {
  display: inline-flex; gap: 8px; align-items: center; color: var(--blue); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
}

/* Hero */
.hero { background: radial-gradient(520px 320px at 92% 8%, rgba(250,190,20,.30), transparent 70%), linear-gradient(160deg, #123f86, var(--navy) 72%); color: #fff; }
.hero .wrap { padding-block: 40px 44px; display: grid; gap: 16px; }
.hero .kicker { color: var(--sun); }
.hero h1 { color: #fff; font-size: clamp(30px, 7vw, 44px); }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero .lead { color: #d8e4f8; font-size: 17px; max-width: 32em; }

/* Form */
label.f { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink2); }
label.f .optional { font-weight: 400; color: var(--muted); }
input[type=text], select {
  font-family: var(--f-body); font-size: 17px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 13px; width: 100%;
  min-height: 50px; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.err { color: var(--coral); font-weight: 700; font-size: 14px; }

/* Question screen */
.qtop { display: flex; align-items: center; gap: 10px; padding-block: 14px 0; }
.qtop .count { font-family: var(--f-display); font-weight: 800; color: var(--navy); font-size: 15px; }
.qtop .clock { margin-left: auto; font-family: var(--f-display); font-weight: 800; background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 14px 2px; font-variant-numeric: tabular-nums; }
.qtop .clock.low { background: var(--coral); }
.pbar { height: 7px; border-radius: 999px; background: #e3ebf7; overflow: hidden; margin-top: 10px; }
.pbar i { display: block; height: 100%; background: var(--mint); transition: width .25s ease; }
.topic { color: var(--blue); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.vignette { font-size: 19px; line-height: 1.5; margin-top: 6px; }
.opts { display: grid; gap: 10px; margin-top: 4px; }
.opt {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px;
  font-family: var(--f-body); font-size: 17px; line-height: 1.45; color: var(--ink);
  cursor: pointer; min-height: 56px;
}
.opt b {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--navy);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 14px;
}
.opt.sel { border-color: var(--blue); background: var(--tint); box-shadow: 0 0 0 1.5px var(--blue) inset; }
.opt.sel b { background: var(--blue); color: #fff; }
.opt.right { border-color: var(--mint); background: #e7f8f0; } .opt.right b { background: var(--mint); color: #fff; }
.opt.wrong { border-color: var(--coral); background: #fdecec; } .opt.wrong b { background: var(--coral); color: #fff; }
.qnav { display: flex; gap: 10px; padding-block: 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.qnav .btn { flex: 1; }

/* Result + review */
.score { display: grid; gap: 4px; place-items: center; text-align: center; padding-block: 10px; }
.score .big { font-family: var(--f-display); font-weight: 800; font-size: 58px; color: var(--navy); line-height: 1; }
.score .of { color: var(--muted); font-weight: 700; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pill { font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 13px 3px; background: var(--tint); color: var(--navy); }
.pill.ok { background: #e3f7ee; color: #0a7a52; } .pill.no { background: #fdecec; color: #b4232a; }
.rev { display: grid; gap: 12px; }
.rev .q { font-weight: 700; }
.why { background: var(--tint); border-radius: 12px; padding: 12px; font-size: 15px; display: grid; gap: 8px; }
.why .wr { color: var(--ink2); }
.cite { font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.cite b { color: var(--ink2); }

footer.ft { padding-block: 28px 36px; color: var(--muted); font-size: 13px; text-align: center; display: grid; gap: 6px; }
.load { display: grid; place-items: center; min-height: 60vh; color: var(--muted); font-weight: 700; }

/* Boot splash - held until Firebase says who is signed in. Without it the signed-out
   landing page paints first and flashes past on every visit. */
body.booting > :not(#boot) { visibility: hidden; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
body:not(.booting) #boot { display: none; }
#boot .b { display: grid; gap: 12px; justify-items: center; }
#boot .dot { width: 48px; height: 48px; border-radius: 14px; background: var(--navy); color: var(--sun);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 26px; }
#boot .l { width: 120px; height: 6px; border-radius: 999px; background: #e3ebf7; overflow: hidden; }
#boot .l i { display: block; width: 40%; height: 100%; background: var(--blue); border-radius: 999px;
  animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- the week: the 7-day strip and the board ---------- */
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk div { text-align: center; border-radius: 10px; padding: 7px 2px; background: var(--tint);
  color: var(--muted); font-size: 11.5px; font-weight: 700; }
.wk div.hit { background: #e3f7ee; color: #0a7a52; }
.wk div.today { outline: 2px solid var(--sun); }
.wk small { display: block; font-size: 13px; font-weight: 800; }
.lb { width: 100%; border-collapse: collapse; font-size: 15px; }
.lb th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-bottom: 1.5px solid var(--line); }
.lb td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.lb td.n, .lb th.n { text-align: right; font-variant-numeric: tabular-nums; }
.lb tr.me { background: #fff8e3; }
.lb tr.me td { font-weight: 800; }
.lb .who { font-weight: 700; }
.lb .st { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

/* ---------- getting around ----------
   A thumb-reachable bar, not a header link: a doctor holds the phone one-handed and the
   top of the screen is the hardest place to reach. Hidden while a test is running, so a
   mis-tap cannot walk out of a timed paper. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* One row whatever the tab count - a fixed column count silently wraps the extras
     onto a second row the moment a tab is added. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs a {
  display: grid; justify-items: center; gap: 3px; padding: 9px 4px 7px;
  text-decoration: none; color: var(--muted); font-weight: 700; font-size: 12px;
  min-height: 56px; align-content: center;
}
.tabs a .lbl { white-space: nowrap; }
.tabs a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.tabs a.on { color: var(--navy); }
.tabs a.on svg { stroke: var(--blue); }
.tabs a.on span.lbl { color: var(--navy); }
/* On body, not main: some pages set padding-block inline on main, and an inline style
   would win - leaving the last control hidden behind the bar. */
body.has-tabs { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* ---------- who you are ---------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--navy); color: var(--sun);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1;
}
a.who { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
a.who .nm { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The account card: who you are, then the two things you can do about it. */
.acct { display: flex; align-items: center; gap: 12px; }
.acct .avatar { width: 46px; height: 46px; font-size: 20px; }
.acct .t { min-width: 0; }
.acct .t b { display: block; font-family: var(--f-display); font-size: 18px; color: var(--navy); }
.acct .t small { color: var(--muted); word-break: break-all; }

/* ---------- the week's board ----------
   Rows, not a 6-column table. A table of that width forces a sideways scroll on a phone,
   which hides the very columns a doctor came to see. Every row fits the screen. */
.lb2 { display: grid; gap: 8px; }
.lb2 .r {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px;
}
.lb2 .r.me { border-color: var(--sun); background: #fffaed; box-shadow: 0 0 0 1.5px var(--sun) inset; }
.lb2 .pos {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--navy);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 16px;
}
.lb2 .r.me .pos { background: var(--sun); }
.lb2 .pos.medal { background: transparent; font-size: 23px; }
.lb2 .nm { min-width: 0; }
.lb2 .nm b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb2 .nm small { color: var(--muted); font-size: 12.5px; }
.lb2 .sc { text-align: right; font-variant-numeric: tabular-nums; }
.lb2 .sc b { display: block; font-family: var(--f-display); font-size: 19px; color: var(--navy); line-height: 1.1; }
.lb2 .sc small { color: var(--muted); font-size: 12.5px; }
/* The break between the top few and the doctor's own row, when they are further down. */
.lb2 .gap { text-align: center; color: var(--muted); letter-spacing: 3px; font-size: 13px; line-height: 1; }

/* ---------- home ---------- */
.hello { display: grid; gap: 2px; }
.hello h1 { font-size: clamp(24px, 6vw, 30px); }
.hello p { color: var(--muted); font-size: 14px; }
.big-cta { display: grid; gap: 12px; }
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat div {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 8px; text-align: center;
}
.stat b { display: block; font-family: var(--f-display); font-size: 22px; color: var(--navy); line-height: 1.15; }
.stat small { color: var(--muted); font-size: 11.5px; font-weight: 700; }

/* A nudge, not a warning: the nickname is the one field that protects a doctor's privacy,
   and it is the one field people skip because it says "optional". */
.nudge {
  background: var(--tint); border: 1px solid #cfe0f7; border-left: 4px solid var(--blue);
  border-radius: 12px; padding: 11px 13px; display: grid; gap: 5px;
}
.nudge b { color: var(--navy); font-size: 14px; }
.nudge p { color: var(--ink2); font-size: 13.5px; line-height: 1.5; }
.nudge .ok { color: #0a7a52; font-weight: 700; font-size: 13px; }

/* ---------- reporting a bad question ----------
   Quiet by default - this is not the point of the screen - but always there, because the
   doctor who spots a wrong key is the one reader who can stop it reaching everyone else. */
.flag { margin-top: 2px; }
.flag > button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--muted); font-family: var(--f-body); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.flag > button:hover { color: var(--coral); }
.flag form { display: grid; gap: 8px; margin-top: 8px; }
.flag .why-opts { display: grid; gap: 6px; }
.flag label {
  display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.4;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer;
}
.flag label:has(input:checked) { border-color: var(--blue); background: var(--tint); }
.flag input[type=radio] { margin-top: 2px; accent-color: var(--blue); flex: none; }
.flag textarea {
  font-family: var(--f-body); font-size: 15px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 10px; resize: vertical; min-height: 64px; width: 100%;
}
.flag .sent { color: #0a7a52; font-weight: 700; font-size: 14px; }

/* Choosing how long today's test is. Three tiles, thumb-sized, no cleverness. */
.lens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.lens button {
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 6px;
  cursor: pointer; font-family: var(--f-body); display: grid; gap: 2px; min-height: 76px;
}
.lens button b { font-family: var(--f-display); font-size: 25px; color: var(--navy); line-height: 1; }
.lens button small { color: var(--muted); font-size: 12px; font-weight: 700; }
.lens button.on { border-color: var(--blue); background: var(--tint); box-shadow: 0 0 0 1.5px var(--blue) inset; }
.lens button.on b { color: var(--blue); }

/* ---------- admin dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.kpi b { font-family: var(--f-display); font-size: 30px; color: var(--navy); line-height: 1; }
.kpi small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.kpi.warn b { color: var(--coral); }
.kpi .sub { color: var(--muted); font-size: 12px; }

.bars { display: grid; gap: 7px; }
.bars .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.bars .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: #eef2f8; overflow: hidden; margin-top: -3px; }
.bars .track i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.bars .n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink2); }

/* A question's accuracy, worst first. Red is the band where a wrong key is likelier
   than a hard question. */
.qacc { display: grid; gap: 9px; }
.qacc .q { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; }
.qacc .id { font-family: var(--f-display); font-weight: 800; color: var(--navy); font-size: 13px; }
.qacc .tp { color: var(--ink2); font-size: 14px; }
.qacc .pc { font-family: var(--f-display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.qacc .track { height: 8px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.qacc .track i { display: block; height: 100%; border-radius: 999px; }
.qacc .bad .pc { color: var(--coral); } .qacc .bad .track i { background: var(--coral); }
.qacc .mid .pc { color: #b07400; } .qacc .mid .track i { background: var(--sun); }
.qacc .ok  .pc { color: #0a7a52; } .qacc .ok  .track i { background: var(--mint); }
.qacc .seen { color: var(--muted); font-size: 12px; }

.tabbar { display: flex; gap: 8px; }
.tabbar button { flex: 1; font-size: 15px; min-height: 44px; }

/* The way in: small, lowercase, at the foot of the page. */
.adminlink { display: block; text-align: center; color: var(--muted); font-size: 11px;
  text-decoration: none; opacity: .55; padding: 10px 0 2px; letter-spacing: .04em; }
.adminlink:hover { opacity: 1; color: var(--blue); }

/* ---------- admin: the people table ----------
   Dense and scannable on a laptop, and it must not force a sideways scroll on a phone,
   so the less important columns step out as the screen narrows. */
.ppl { width: 100%; border-collapse: collapse; font-size: 14px; }
.ppl th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 7px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.ppl th.s { cursor: pointer; user-select: none; }
.ppl th.s:hover { color: var(--blue); }
.ppl th.on { color: var(--navy); }
.ppl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ppl tr.row { cursor: pointer; }
.ppl tr.row:hover td { background: var(--tint); }
.ppl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppl .nm b { display: block; font-size: 15px; }
.ppl .nm small { color: var(--muted); font-size: 12px; }
.ppl .acc { font-family: var(--f-display); font-weight: 800; font-size: 16px; }
.ppl .acc.bad { color: var(--coral); } .ppl .acc.mid { color: #b07400; } .ppl .acc.ok { color: #0a7a52; }
.ppl .dim { color: var(--muted); }
@media (max-width: 860px) { .ppl .c4 { display: none; } }
@media (max-width: 680px) { .ppl .c3 { display: none; } }
@media (max-width: 520px) { .ppl .c2 { display: none; } }

.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(8,20,45,.5); display: grid; align-items: end; }
.sheet .inner {
  background: var(--bg); border-radius: 20px 20px 0 0; max-height: 88vh; overflow: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) { .sheet { align-items: center; justify-items: center; }
  .sheet .inner { border-radius: 20px; width: min(680px, 94vw); } }
.sheet .grab { width: 44px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }

/* ---------- admin: what wants doing ----------
   The top of a dashboard should be a short list of actions, not a mood. */
.todo { display: grid; gap: 8px; }
.todo a {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px;
  text-decoration: none; color: var(--ink);
}
.todo a:hover { border-color: var(--blue); background: var(--tint); }
.todo .cnt {
  width: 44px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 19px;
  background: #fdecec; color: var(--coral);
}
.todo a.mild .cnt { background: var(--tint); color: var(--navy); }
.todo .go { color: var(--muted); font-size: 19px; line-height: 1; }
.todo .all-clear { color: #0a7a52; font-weight: 700; }

/* movement against the week before */
.trend { font-size: 12px; font-weight: 700; }
.trend.up { color: #0a7a52; } .trend.down { color: var(--coral); } .trend.flat { color: var(--muted); }

/* the tab bar follows you down a long page */
.tabwrap { position: sticky; top: 56px; z-index: 15; background: var(--bg); padding: 8px 0 10px; }
.tabbar .btn { padding-inline: 8px; }

.qacc .pick { cursor: pointer; }
.qacc .pick:hover .tp { color: var(--blue); text-decoration: underline; }

.emptyish { display: grid; gap: 6px; padding: 6px 0; }
.emptyish b { color: var(--ink2); font-size: 14px; }
.emptyish span { color: var(--muted); font-size: 13px; }

/* ---------- desktop ----------
   Everything above is the phone, and none of it changes. From 1024px wide, pages that opt in
   with `.wrap.desk` spread into columns, and the tab bar moves up into the header - a bar
   pinned along the bottom of a laptop screen is the most phone-like thing on the site.
   Reading text keeps its width; only the arrangement widens. */
@media (min-width: 1024px) {
  .wrap.desk, header.bar .wrap { max-width: 1120px; }
  .tabs {
    top: env(safe-area-inset-top, 0px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
    height: 56px; align-items: center; gap: 4px; grid-auto-columns: auto;
    background: none; backdrop-filter: none; border-top: 0; padding: 0;
  }
  .tabs a { display: flex; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 14.5px; }
  .tabs a svg { width: 19px; height: 19px; }
  .tabs a:hover, .tabs a.on { background: var(--tint); color: var(--navy); }
  body.has-tabs { padding-bottom: 0; }

  /* The day's case as a wide poster: the picture beside the words, not above them. */
  .desk .simcard:has(> img) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .desk .simcard > img { height: 100%; min-height: 250px; }
  .desk .simcard .body { padding: 22px 22px 20px; align-self: center; }
}