/* Copied from site/assets/app.css on 29 Sep 2026 (RESTRUCTURE.md); this copy is the maintained one. Unchanged. */
/* The practice side of PYQGraph: exam picker, the free 20, the summary and
   the paywall. Built on site.css — same paper, ink and one ink-blue. Brass
   marks two things only: "your exam" and the yearly plan. */

.appbar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;gap:22px;height:62px}
.appbar .brand .wm{font-size:20px}
.appbar .brand svg{width:26px;height:26px}
.appbar nav{margin-left:auto;display:flex;gap:20px;align-items:center;font-family:var(--sans);font-size:14px}
.appbar nav a{color:var(--ink-2);text-decoration:none}
.appbar nav a:hover{color:var(--ink)}
.appbar nav .signin{border:1px solid var(--rule);padding:7px 14px;border-radius:var(--r)}
@media (max-width:640px){.appbar nav .hide-sm{display:none}}

/* ---- exam picker ------------------------------------------------------ */
.pick-head{padding-top:56px;padding-bottom:28px}
.pick-head h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.pick-head h1 i{color:var(--accent);font-weight:400}
.pick-head .lede{margin:0}
.scope{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:18px}
.scope b{color:var(--ink);font-weight:600}
.pick-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-bottom:80px}
@media (max-width:980px){.pick-grid{grid-template-columns:1fr}}
.search{width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--card);color:var(--ink);margin-bottom:16px}
.search:focus{outline:2px solid var(--accent);outline-offset:-1px}
.exams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.exams{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .exam{min-height:0;padding:12px 12px 11px}.exam .st{font-size:16.5px}.exam .ex{font-size:12px}.exam .ct{margin-top:8px;font-size:12px}}
.exam{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:16px 16px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);min-height:104px;transition:border-color .12s}
.exam:hover{border-color:var(--rule)}
.exam:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.exam[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.exam .st{display:block;font-family:var(--serif);font-size:19px;line-height:1.2;color:var(--ink)}
.exam .ex{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:3px}
.exam .ct{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-2);margin-top:12px}
.exam .ct b{font-weight:600;font-variant-numeric:tabular-nums}
.exam .yr{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px}
.alt{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.alt{grid-template-columns:1fr}}
.alt a{display:block;padding:14px 16px;border:1px dashed var(--rule);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.alt a small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:2px}
.alt a:hover{border-style:solid;border-color:var(--accent)}

.chosen{position:sticky;top:86px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:24px 24px 22px}
.chosen .empty{font-family:var(--sans);font-size:14px;color:var(--muted);margin:0}
.chosen h2{font-size:26px;margin:2px 0 2px}
.chosen .full{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 16px}
.chosen .big{font-size:36px;line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.chosen .big-l{font-family:var(--sans);font-size:13px;color:var(--muted);margin:4px 0 18px}
.split20{display:flex;height:10px;border-radius:2px;overflow:hidden;margin:6px 0 8px}
.split20 i{display:block;height:100%}
.split20 .s{background:var(--brass)} .split20 .c{background:var(--accent)}
.split20-l{display:flex;justify-content:space-between;font-family:var(--sans);font-size:12.5px;color:var(--ink-2);margin-bottom:18px}
.split20-l span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:1px;margin-right:6px;vertical-align:0}
.split20-l .s::before{background:var(--brass)} .split20-l .c::before{background:var(--accent)}
.chosen ul{list-style:none;margin:0 0 20px;padding:0;font-size:15.5px;color:var(--ink-2)}
.chosen li{padding:5px 0 5px 22px;position:relative}
.chosen li::before{content:"\2713";position:absolute;left:0;font-family:var(--sans);font-weight:700;font-size:12px;color:var(--ok);top:7px}
.chosen .fine{margin:12px 0 0;text-align:center}
@media (max-width:980px){.chosen{position:static}}

/* ---- trial ------------------------------------------------------------- */
.trial{max-width:780px;margin:0 auto;padding:30px var(--gut) 90px}
.meter{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin:0 0 8px}
.meter i{height:6px;border-radius:1px;background:var(--line)}
.meter i.ok{background:var(--ok)} .meter i.no{background:var(--bad)} .meter i.now{background:var(--accent)}
.meter-l{display:flex;justify-content:space-between;gap:10px;font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:22px}
.meter-l b{color:var(--ink);font-weight:600}
.meter-l .left.low{color:var(--warn);font-weight:600}
.qtag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.qtag .k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.qtag .k.yours{background:var(--brass);color:#fffaf0}
.qtag .k.common{border:1px solid var(--accent);color:var(--accent)}
.qtag .subj{color:var(--ink-2);font-weight:600}
.why-here{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin:-4px 0 14px}
.why-here summary{cursor:pointer;display:inline;color:var(--accent);list-style:none}
.why-here summary::-webkit-details-marker{display:none}
.why-here p{margin:6px 0 0;max-width:46em}
.qcard .qh .src-l{font-family:var(--sans)}
.next-row{display:flex;justify-content:flex-end;gap:14px;align-items:center;padding:0 22px 22px}
.nudge{margin:18px 0 0;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--card);
  border-radius:var(--r);font-size:16px;color:var(--ink-2)}
.nudge b{color:var(--ink)}
.nudge.warn{border-left-color:var(--warn)}
.nudge a{font-family:var(--sans);font-size:14px;font-weight:600;white-space:nowrap}
.mini-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.mini-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);line-height:1.1}
.qcard .stem{white-space:pre-line}

/* ---- summary + paywall -------------------------------------------------- */
.sum-head{text-align:center;padding:10px 0 26px}
.sum-head .eyebrow{margin-bottom:10px}
.sum-head h1{font-size:clamp(32px,4.4vw,48px);margin:0 0 8px;letter-spacing:-.02em}
.score{display:flex;justify-content:center;gap:0;margin:22px 0 6px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.score>div{flex:1;padding:18px 10px;text-align:center;border-left:1px solid var(--line)}
.score>div:first-child{border-left:0}
.score .n{font-size:42px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.score .l{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:6px}
.score .ok .n{color:var(--ok)} .score .no .n{color:var(--bad)}
.missed{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.missed li{border-bottom:1px solid var(--line)}
.missed details summary{list-style:none;cursor:pointer;padding:14px 30px 14px 0;position:relative;font-size:16px;line-height:1.45}
.missed details summary::-webkit-details-marker{display:none}
.missed details summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--sans);color:var(--accent);font-size:20px}
.missed details[open] summary::after{content:"\2212"}
.missed .meta{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-bottom:3px}
.missed .ans{font-family:var(--sans);font-size:13px;margin:0 0 8px}
.missed .ans .you{color:var(--bad)} .missed .ans .key{color:var(--ok)}
.missed .body{padding:0 0 16px;font-size:15.5px;color:var(--ink-2)}
.cover{margin:30px 0 0;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.cover h3{font-size:20px;margin:0 0 4px}
.cover p{margin:0 0 12px;color:var(--ink-2);font-size:16px}
.cover .all{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.8}
.cover .all b{color:var(--ink-2);font-weight:600}

.paywall{margin:34px 0 0;border:2px solid var(--accent);border-radius:var(--r);background:var(--paper);padding:30px 30px 26px;text-align:center}
.paywall h2{font-size:clamp(26px,3.4vw,34px);margin:0 0 8px}
.paywall .lede{font-size:18px;margin:0 auto 24px;max-width:30em}
.pw-price{display:flex;justify-content:center;align-items:baseline;gap:8px}
.pw-price .amt{font-size:60px;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.pw-price .amt sup{font-size:.4em;vertical-align:1em;margin-right:4px;color:var(--muted)}
.pw-price .per{font-family:var(--sans);font-size:15px;color:var(--muted)}
.pw-month{font-family:var(--sans);font-size:14px;color:var(--brass);font-weight:600;margin:6px 0 20px}
.paywall .btn{min-width:280px}
.pw-alt{margin:16px 0 0;font-family:var(--sans);font-size:14.5px}
.pw-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:13px;color:var(--ink-2)}
.pw-list span::before{content:"\2713";color:var(--ok);font-weight:700;margin-right:5px}
.not-now{display:block;margin:18px auto 0;font-family:var(--sans);font-size:13.5px;color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.paywall{padding:24px 16px}.paywall .btn{min-width:0;width:100%}}

/* ---- locked explanation ------------------------------------------------- */
.locked{position:relative;margin:4px 22px 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.locked .fog{padding:16px 18px;filter:blur(5px);user-select:none;pointer-events:none;color:var(--ink-2);font-size:16px;line-height:1.6}
.locked .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:color-mix(in srgb,var(--paper) 72%,transparent);text-align:center;padding:16px}
.locked .over b{font-size:19px;font-weight:500}
.locked .over span{font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.public-key{margin:0 22px 14px;font-family:var(--sans);font-size:14px;color:var(--ok);font-weight:600}

.stage{display:none}.stage.on{display:block}
.preview-note{font-family:var(--sans);font-size:12px;color:var(--muted);text-align:center;margin:26px 0 0}
.next-row[hidden]{display:none}
.locked{min-height:190px}

/* ---- phone: thumb-reach bars ------------------------------------------ */
.start-bar{display:none}
@media (max-width:980px){
  .chosen{display:none}
  .start-bar.on{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:12px;align-items:center;justify-content:space-between;
    background:var(--card);border-top:1px solid var(--rule);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 24px -18px rgba(0,0,0,.35)}
  .start-bar .t{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.3}
  .start-bar .t b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
  .pick-grid{padding-bottom:110px}
}
.qcard .next-row{position:sticky;bottom:0;z-index:5;background:var(--card);border-top:1px solid var(--line);
  padding:12px 22px calc(12px + env(safe-area-inset-bottom));margin-top:6px;border-radius:0 0 var(--r) var(--r)}
@media (max-width:640px){
  .trial{padding-left:12px;padding-right:12px}
  .qcard .qh,.qcard .qb{padding-left:16px;padding-right:16px}
  .qhint,.reveal{padding-left:16px!important;padding-right:16px!important}
  .qcard .next-row{padding-left:16px;padding-right:16px}
  .qcard .next-row .btn{width:100%;text-align:center}
  .qcard .stem{font-size:19px}
  .opts button{grid-template-columns:30px 1fr 20px;padding:14px 8px;min-height:52px}
  .qtag{font-size:12px}
  .locked{margin-left:16px;margin-right:16px}
  .public-key{margin-left:16px;margin-right:16px}
}
.missed-wrap{margin-top:30px}
.missed-wrap > summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:22px;padding:12px 0;border-top:1px solid var(--line)}
.missed-wrap > summary::-webkit-details-marker{display:none}
.missed-wrap > summary .tap{font-family:var(--sans);font-size:13px;color:var(--accent);margin-left:10px}
.missed-wrap[open] > summary .tap{display:none}

@media (max-width:640px){.hide-sm{display:none}}

.qcard .next-row{display:flex;justify-content:space-between;gap:10px}
.qcard .next-row .btn[disabled]{opacity:.4;cursor:default}
@media (max-width:640px){.qcard .next-row .btn{width:auto;flex:1}}

/* exam cards now carry just the state and the exam (27 Sep): size to that */
.exam{min-height:74px}
@media (max-width:760px){.exam{min-height:0;padding:12px 12px 11px}}

/* buttons with an icon: the icon leads, sized to the text */
.btn.btn-i{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn.btn-i.block{display:flex}
.btn .btn-ico{width:17px;height:17px;flex:none}

/* search: a card marked hidden must actually disappear (the card's own
   display rule otherwise wins over the browser's [hidden]) */
.exam[hidden]{display:none!important}
.no-match{font-family:var(--sans);font-size:14px;color:var(--muted);padding:14px 0}

/* ---- the free 20 as seats (UX step 6) ------------------------------------- */
.tseats{display:grid;grid-template-columns:repeat(10,minmax(0,26px)) 14px repeat(10,minmax(0,26px));gap:6px 5px;justify-content:start;margin:0 0 10px}
.tseats .seat{all:unset;box-sizing:border-box;width:26px;height:26px;border-radius:7px 7px 3px 3px;background:var(--paper-2);
  border:1px solid var(--rule);cursor:default;transition:transform .12s}
.tseats .seat:nth-child(11){grid-column-start:12}
.tseats .seat.ok{background:var(--ok);border-color:var(--ok)}
.tseats .seat.no{background:var(--bad);border-color:var(--bad)}
.tseats .seat.now{outline:2px solid var(--accent);outline-offset:2px}
.tseats button.seat:not([disabled]){cursor:pointer}
.tseats button.seat:not([disabled]):hover{transform:translateY(-2px)}
.tseats button.seat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tseats .seat[disabled]{opacity:.55}
@media (max-width:640px){
  .tseats{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
  .tseats .seat{width:auto;height:auto;aspect-ratio:1;min-height:28px}
  .tseats .seat:nth-child(11){grid-column-start:auto}
}
/* summary: the same seats, then what they mean */
.sum-seats{justify-content:center;margin:22px auto 6px}
@media (max-width:640px){.sum-seats{margin-top:18px}}
.meaning{list-style:none;margin:10px auto 0;padding:0;max-width:640px}
.meaning li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.meaning li b{color:var(--ink);font-weight:600}
.meaning li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:12px;border-radius:3px 3px 1px 1px;background:var(--accent)}
.meaning li.ok::before{background:var(--ok)} .meaning li.no::before{background:var(--bad)}
.carry{font-family:var(--sans);font-size:14px;color:var(--ink-2);margin:0 auto 18px;max-width:30em;padding:10px 14px;border-radius:6px;
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.carry b{color:var(--ok)}

/* ---- loading skeletons and empty states (UX step 10) ------------------------- */
.sk{display:block;height:12px;border-radius:4px;background:color-mix(in srgb,var(--ink) 9%,transparent);margin:0 0 12px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);animation:sk 1.3s infinite}
@keyframes sk{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}
.sk.tall{height:18px} .sk.w20{width:20%} .sk.w30{width:30%} .sk.w60{width:60%} .sk.w70{width:70%} .sk.w90{width:90%}
.sk.opt{height:46px;border-radius:6px;margin-top:10px}
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){.why-here summary{padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:-14px}}

/* the question number inside each of the 20 seats (owner, 7 Oct): the theme's
   contrast colour on green / red -- white in light mode, near-black in dark */
.tseats .seat{display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.tseats .sn{color:var(--ink-2);pointer-events:none}
.tseats .seat.ok .sn,.tseats .seat.no .sn{color:var(--on-accent)}
/* desktop: the row of 20 runs the full width of the question box below it,
   evenly spaced, so both side edges line up with the card (owner, 7 Oct) */
@media (min-width:641px){
  #meter.tseats{grid-template-columns:repeat(10,minmax(0,1fr)) 14px repeat(10,minmax(0,1fr));gap:6px;justify-content:stretch}
  #meter.tseats .seat{width:auto;height:auto;aspect-ratio:1;max-height:40px;font-size:12px}
}