/* ── the look: an exam paper, marked in pen ───────────────────────────────────────────
   Students sit Methods on paper, so the app looks like the paper: warm stock, black ink,
   square corners, ruled lines, prose and mathematics in the same Computer Modern (KaTeX's
   own KaTeX_Main, already vendored, so no download), a typewriter face for numbers and
   labels. The only colours are the marker's: a green tick and a red cross.

   The generated SVG diagrams reference --ink / --dim / --line / --accent / --panel directly
   (see pipeline/graphs.py), so these names are load-bearing, not decoration: rename one
   and the diagrams fall back to their built-in defaults. */
:root{
  --bg:#f3efe4; --panel:#faf7ef; --panel-2:#e9e3d3; --line:#d6ceba; --line-2:#b3a98f;
  --ink:#1c1a16; --dim:#5d584b; --faint:#8f8876;
  --ok:#1f6b3f; --ok-bg:#e3eadb; --bad:#b8301c; --bad-bg:#f3e0d6;
  --accent:#1f3f8c;               /* blue ballpoint: diagram curves and focus */
  --accent-ink:#f3efe4;
  --warn:#8a6414;
  --margin:#c9533f;               /* the exercise-book margin line */
  --serif:KaTeX_Main,"Latin Modern Roman","CMU Serif",Georgia,"Times New Roman",serif;
  --mono:KaTeX_Typewriter,"Courier New",ui-monospace,monospace;
  --tap:54px;
  --pad:max(16px, env(safe-area-inset-left));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15140f; --panel:#1b1a15; --panel-2:#26241d; --line:#34312a; --line-2:#4d493d;
    --ink:#ece6d6; --dim:#a8a190; --faint:#716b5c;
    --ok:#7cc592; --ok-bg:#1c2a1f; --bad:#f07a60; --bad-bg:#2e1b16;
    --accent:#9db6f2; --accent-ink:#15140f;
    --warn:#d8b25a; --margin:#a8493a;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;border-radius:0}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.55 var(--serif);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grow{flex:1}
.hide{display:none !important}
/* for screen readers only: the marks already say it on screen */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* small typewriter labels: the furniture of an exam paper */
.strip .k,.lead .meta,.days-h,.foot,.proj .k,.results .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);
}

/* ── frame ─────────────────────────────────────────────────────────────────────────── */
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
     position:relative}
header{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px var(--pad) 10px;background:var(--bg);
  border-bottom:3px double var(--ink);min-height:56px;
}
header .icon{
  background:none;border:1px solid var(--ink);padding:0;width:32px;height:32px;
  color:var(--ink);font-size:17px;line-height:1;flex:none;
}
header .icon:active{background:var(--panel-2)}
header h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.005em;line-height:1.15}
/* the brand, with the subject beside it in the label face */
header h1 .subj{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em;
                text-transform:uppercase;color:var(--dim);margin-left:10px;vertical-align:2px}
main{flex:1;padding:18px var(--pad) 28px}
/* clear of the fixed Next bar, which is taller by the home-indicator inset on phones */
body[data-view="play"] main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}

/* header live counters */
#hud{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:13px;
     color:var(--dim)}
#hud .pos{position:relative;color:var(--ink);font-size:15px}
#delta{
  position:absolute;right:0;top:-15px;font-size:12px;opacity:0;
  pointer-events:none;white-space:nowrap;
}
#delta.go{animation:rise .95s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translateY(5px)}18%{opacity:1;transform:translateY(-1px)}
                70%{opacity:1}100%{opacity:0;transform:translateY(-9px)}}

/* ── home: a contents page ──────────────────────────────────────────────────────────── */
/* the lead: the study score estimate once there are 25 answers (core/projection.py), with
   its band beneath it; until then how many answers it is away, and the meter */
.lead{padding:2px 0 16px}
.lead-row{display:flex;align-items:flex-end;gap:18px}
.lead .big{font-size:56px;line-height:.95;letter-spacing:-.02em;color:var(--ink)}
.lead .big .of{font-size:22px;color:var(--faint)}
.lead .pm{font-size:15px;line-height:1;color:var(--dim);margin-top:6px}
.lead .meta{margin:6px 0}
.lead-trail{flex:1;min-width:0;padding-bottom:6px}
.lead-trail svg{display:block}
.tip-w{display:none}            /* the trail's end dot on a wide screen (see below) */
.calib{display:flex;gap:3px;margin-top:10px}
.calib i{flex:1;height:10px;border:1px solid var(--ink)}
.calib i.on{background:var(--ink)}

/* strength by area: centre line is the student's own level */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:20px 0 4px}
.area-tile{display:block;background:none;border:0;padding:0;text-align:left;color:var(--ink)}
.area-tile .nm{display:block;font-size:14.5px;line-height:1.25;margin-bottom:6px;min-height:2.5em}
.sbar{display:block;width:100%;height:10px}
.days{margin:24px 0 4px}
.days-h{display:flex;justify-content:space-between;margin-bottom:8px}
.days svg{display:block}

.contents{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:4px 0 0}
.contents .big-btn + .big-btn{border-top:1px solid var(--line-2)}
.big-btn{
  display:grid;grid-template-columns:30px 1fr auto;grid-template-rows:auto auto;
  column-gap:12px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;padding:16px 2px 15px;min-height:72px;color:var(--ink);
}
.big-btn .sec-l{grid-row:1 / span 2;align-self:start;font-family:var(--mono);font-size:14px;
                border:1.5px solid var(--ink);width:28px;height:28px;display:grid;
                place-items:center;margin-top:1px}
.big-btn .t{display:flex;align-items:baseline;gap:8px;font-size:21px;font-weight:700;
            line-height:1.2;min-width:0}
.big-btn .t::after{content:"";flex:1;border-bottom:2px dotted var(--line-2);
                   transform:translateY(-5px);min-width:12px}
/* the arrows are set in KaTeX_Main, which has the glyph: KaTeX_Typewriter does not, and a system
   without Courier New fell back to a colour emoji font for it */
.big-btn .arr{grid-column:3;grid-row:1;font-family:var(--serif);font-size:18px}
.big-btn:active{background:var(--panel-2)}
@media (hover:hover){.big-btn:hover .sec-l{background:var(--ink);color:var(--bg)}}

/* the running totals: a ruled marking grid */
.strip{display:flex;margin:20px 0 4px;border:1px solid var(--ink);background:var(--panel)}
.strip > div{flex:1;padding:10px 6px 9px;text-align:center;border-right:1px solid var(--line-2)}
.strip > div:last-child{border-right:0}
.strip .v{font-size:22px;line-height:1.1;color:var(--ink)}
.strip .v .pm{font-size:12px;color:var(--dim)}
.strip .k{font-size:10px;margin-top:4px}

/* results day: "What did you get?" (projection.results_day), above the lead */
.results{border:1px solid var(--ink);background:var(--panel);padding:12px 14px 14px;
         margin:0 0 18px}
.results h2{margin:0 0 8px;font-size:17px;font-weight:700}
.results .rrow{display:flex;align-items:center;gap:10px}
.results .k{flex:none}
.results input{width:84px;padding:8px 10px;font-size:20px;background:var(--bg);color:var(--ink);
               border:1px solid var(--ink)}
.results button{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
                text-transform:uppercase;padding:11px 14px;border:1px solid var(--ink);
                background:var(--ink);color:var(--bg)}
.results button:disabled{background:none;color:var(--dim);border-color:var(--line-2);cursor:default}
.results input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Progress, under the estimate: the Exam 1 mark it rests on, the topics worth the most marks,
   and one line on how it is estimated */
.proj{margin:18px 0 4px}
.proj .exam1{display:flex;align-items:baseline;gap:14px;padding:6px 0 10px;
             border-bottom:2px solid var(--ink)}
.proj .exam1 .v{font-size:26px;line-height:1.1;margin-left:auto}
.proj .exam1 .of{font-size:15px;color:var(--faint)}
.proj .gains{margin-top:12px}
.proj .gains > .k{padding-bottom:4px}
.gain{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
      border-bottom:1px solid var(--line);padding:10px 2px;min-height:48px;text-align:left;
      font-size:15.5px;color:var(--ink)}
.gain .nm{flex:1;min-width:0}
.gain .num{font-size:15px}
.gain .arr{font-family:var(--mono)}
.gain:active{background:var(--panel-2)}
.proj .note{margin:12px 0 0;font-size:14px;font-style:italic;color:var(--dim);line-height:1.5}

.rowlink{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
         border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 2px;
         text-align:left;font-size:17px;color:var(--ink);margin-top:14px}
.rowlink .arr{margin-left:auto;font-family:var(--serif)}
.foot{margin-top:22px;line-height:1.9;text-transform:none;letter-spacing:.02em}

/* ── the question ──────────────────────────────────────────────────────────────────── */
#stack{position:relative}
.card{display:block}
.card.staged{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
.stem{font-size:18.5px;line-height:1.6;padding:2px 0;overflow-x:auto}
.fig{margin:14px 0 4px;border:1px solid var(--line-2);background:var(--panel);
     padding:8px 6px 4px;overflow-x:auto}
.fig svg{display:block;margin:0 auto}
.prompt{font-size:18.5px;line-height:1.55;margin:12px 0 16px}
.prose{white-space:pre-wrap}

/* options: the multiple-choice answer sheet */
.opts{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.opts li{border-bottom:1px solid var(--line)}
.opts li:last-child{border-bottom:1px solid var(--ink)}
.opts button{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:var(--tap);
  background:none;border:0;padding:10px 4px;position:relative;
  transition:opacity .12s,background .1s;
}
.opts button i{
  flex:none;width:26px;height:26px;border:1.5px solid var(--ink);font-style:normal;
  font-family:var(--mono);font-size:13px;display:grid;place-items:center;color:var(--ink);
  background:var(--panel);transition:background .08s,color .08s;
}
.opts button .body{flex:1;min-width:0;display:block;overflow-x:auto;overflow-y:hidden;
                   padding:1px 0;line-height:1.45;font-size:19px}
@media (hover:hover){.opts button:hover:not(:disabled) i{background:var(--panel-2)}}
.opts button:active:not(:disabled){background:var(--panel-2)}
.opts button:disabled{cursor:default}
.opts button.dim{opacity:.36}
/* shading the box, as on the real answer sheet */
.opts button.pick i{background:var(--ink);color:var(--bg)}
.opts button.right,.opts button.wrong{opacity:1;padding-right:34px}
.opts button.right i{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.opts button.wrong i{background:var(--panel);border-color:var(--bad);color:var(--bad);
  background-image:linear-gradient(to top right,transparent calc(50% - 1px),var(--bad) calc(50% - 1px),
                   var(--bad) calc(50% + 1px),transparent calc(50% + 1px))}
.opts button.right::after,.opts button.wrong::after{
  position:absolute;right:6px;top:50%;transform:translateY(-52%);font-size:22px;line-height:1;
  font-family:var(--serif);
}
.opts button.right::after{content:"\2713";color:var(--ok)}
.opts button.wrong::after{content:"\2717";color:var(--bad)}

/* graph options: small graphs two to a row, so each is big enough to read on a phone. The
   letter box sits above its graph and is shaded, ticked and crossed as on a text option. */
.opts.graphs{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:0}
.opts.graphs li,.opts.graphs li:last-child{border:1px solid var(--line-2);background:var(--panel)}
.opts.graphs button{flex-direction:column;align-items:stretch;gap:5px;min-height:0;
                    padding:6px 5px 4px}
.opts.graphs button i{align-self:flex-start;width:24px;height:24px;font-size:12.5px}
.opts.graphs button .body{overflow:visible;padding:0;line-height:0}
.opts.graphs button .body svg{display:block;width:100%;height:auto}
.opts.graphs button.right,.opts.graphs button.wrong{padding-right:5px}
.opts.graphs button.right::after,.opts.graphs button.wrong::after{top:4px;right:8px;
                                                                  transform:none}

/* ── marking, in the marker's hand ─────────────────────────────────────────────────── */
.result{margin-top:16px}

/* the working: a page of an exercise book, numbers in the ruled margin */
.work{list-style:none;counter-reset:w;margin:14px 0 0;padding:0;
      background:var(--panel);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
      background-image:linear-gradient(to right,transparent 43px,var(--margin) 43px,
                       var(--margin) 44px,transparent 44px);}
.work li{counter-increment:w;padding:11px 12px 12px 58px;position:relative;
         border-top:1px solid var(--line)}
.work li:first-child{border-top:0}
.work li::before{content:counter(w);position:absolute;left:0;width:43px;top:12px;
                 text-align:center;font-family:var(--mono);font-size:13px;color:var(--dim)}
.work .wmath{overflow-x:auto;overflow-y:hidden;font-size:17.5px;line-height:1.5}
.work .wnote{margin-top:4px;font-size:15.5px;font-style:italic;color:var(--dim);line-height:1.45}

/* report a problem: quiet until opened */
.report{margin-top:14px}
.report .rep-open{background:none;border:0;padding:6px 0;color:var(--faint);
                  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
                  text-decoration:underline;text-underline-offset:3px}
.report .rep-note{width:100%;background:var(--panel);color:var(--ink);
                  border:1px solid var(--ink);padding:10px 12px;
                  font:16px/1.45 var(--serif);resize:vertical}
.report .rep-row{display:flex;gap:10px;margin-top:8px}
.report .rep-row button{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
                        text-transform:uppercase;padding:10px 14px;border:1px solid var(--ink);
                        background:none;color:var(--ink)}
.report .rep-row .rep-send{background:var(--ink);color:var(--bg)}
.report .rep-done{margin:6px 0 0;font-style:italic;color:var(--dim)}

/* the next-question bar: one solid ink block under the thumb */
#bar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:3px double var(--ink);
}
#bar .inner{max-width:520px;margin:0 auto;display:flex;gap:10px;align-items:center}
body[data-view="play"] #bar.show{display:block}
body.reporting #bar.show{display:none}
#next{flex:1;background:var(--ink);color:var(--bg);border:0;padding:15px 18px;
      font-size:18px;font-weight:700;min-height:54px;letter-spacing:.01em}
#next:active{opacity:.86}
#next.quiet{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.why{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.55;
     word-break:break-word}

/* ── drill picker: an index ────────────────────────────────────────────────────────── */
.area{margin-bottom:26px}
.area>h2{font-size:19px;font-weight:700;margin:0 0 6px;display:flex;align-items:baseline;
         gap:10px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.area>h2 span{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--dim);
              letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;margin-left:auto}
#scopes .pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
      border:0;border-bottom:1px solid var(--line);padding:12px 2px;min-height:58px;color:var(--ink)}
#scopes .pick:active{background:var(--panel-2)}
#scopes .pick .t{font-size:16.5px;line-height:1.3}
#scopes .pick.all .t{font-style:italic}
#scopes .pick .rec{margin-left:auto;flex:none;font-size:13px;color:var(--dim)}

/* ── progress ──────────────────────────────────────────────────────────────────────── */
/* opened at an area, a section lands below the sticky header (56px) and main's top padding */
.area-sec{margin-top:22px;scroll-margin-top:76px}
.area-h{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:2px solid var(--ink)}
.area-h .nm{flex:1;font-size:17px;font-weight:700}
.topic-row{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);
           font-size:15.5px}
.topic-row .nm{flex:1;min-width:0}
.area-h .sbar,.topic-row .sbar{width:120px;flex:none}
#statsBody svg{display:block;max-width:100%;height:auto}
#statsBody .sbar{height:10px}
.trail{padding:2px 0 8px;min-height:24px}
.owner-btn{display:block;width:100%;margin-top:28px;padding:12px 14px;background:none;
           border:1px solid var(--line-2);color:var(--dim);font-family:var(--mono);
           font-size:12px;letter-spacing:.04em;text-transform:uppercase;text-align:left}
.empty{color:var(--faint);text-align:center;padding:34px 10px;font-style:italic;line-height:1.7}
code{font-family:var(--mono);font-size:13px;background:var(--panel-2);padding:1px 5px;
     color:var(--ink)}
.texfail{color:var(--bad)}
/* prose and mathematics are the same typeface here, so they share a size */
.katex{font-size:1em}
.katex-display{margin:.3em 0}

/* ── wider screens ─────────────────────────────────────────────────────────────────────
   Everything above is the phone, and below 768px nothing here applies. Two steps:
     768px   tablet, or a phone on its side: a wider column, the home screen in two
             columns, graph options three to a row, topics in columns. Play keeps one
             column and the fixed Next bar under the thumb.
     1024px  laptop and desktop: the question paper on the left and the working on the
             right, like facing pages, so the working is read beside the question it
             answers. The Next bar leaves the bottom of the screen and sits under the
             working (app.js moves it into the answered card; on a phone it stays fixed).
   Line lengths stay readable: the frame stops at 1200px, the question page at 648px and the
   working at 432px, and a single column keeps its prose under 660px. */
@media (min-width:768px){
  :root{--pad:max(24px, env(safe-area-inset-left))}
  #app{max-width:760px}
  #bar .inner{max-width:712px}

  /* home: the lead and the days above, the contents and the areas below */
  #v-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
          grid-template-areas:"res res" "lead days" "cont areas" "cont prog" "foot foot"}
  #v-home .results{grid-area:res;justify-self:start;min-width:340px}
  #v-home .lead{grid-area:lead;align-self:end}
  #v-home .days{grid-area:days;align-self:end;margin:0 0 16px}
  #v-home .contents{grid-area:cont;align-self:start}
  #v-home .area-grid{grid-area:areas;align-self:start;margin:4px 0 0;padding-top:16px;
                     border-top:2px solid var(--ink)}
  #v-home #goStats{grid-area:prog;align-self:start}
  #v-home .foot{grid-area:foot}
  /* an area's bar sits level with its neighbour's, however its name wraps */
  #v-home .area-grid{gap:20px 24px}
  .area-tile{display:flex;flex-direction:column}
  .area-tile .nm{min-height:0}
  .area-tile .sbar{margin-top:auto}
  /* the rating trail is stretched wider than it was drawn: keep its end dot round */
  .lead-trail circle,.trail circle{display:none}
  .tip-w{display:inline}

  /* the question: prose kept to a readable measure (in px, not em: fitCard shrinks the type
     to fit, and an em limit would shrink with it), a figure at about the size it was drawn
     for, graph options three to a row */
  .stem,.prompt{max-width:660px}
  .work .wnote{max-width:600px}
  .fig svg{max-width:440px;max-height:max(240px, min(340px, 38vh))}
  .opts.graphs{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* topics: an index, each area's topics read down in columns */
  #scopes .area{columns:2;column-gap:40px}
  #scopes .area>h2{column-span:all}
  #scopes .pick{break-inside:avoid}

  /* progress: the areas two by two, in the order of the tiles on the home screen */
  #statsBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
             align-items:start}
  #statsBody > .trail,#statsBody > .strip,#statsBody > .owner-btn{grid-column:1 / -1}
  /* the Exam 1 mark and its note on the left, the marks to gain on the right */
  #statsBody > .proj{grid-column:1 / -1;display:grid;column-gap:40px;align-items:start;
                     grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                     grid-template-areas:"exam gains" "note gains"}
  .proj .exam1{grid-area:exam}
  .proj .gains{grid-area:gains;margin-top:0}
  .proj .note{grid-area:note}
  .gain:focus-visible{outline-offset:-2px}

  /* the keyboard: every action is a button; the ballpoint marks the one in focus */
  .opts button:focus-visible,#scopes .pick:focus-visible,.rowlink:focus-visible,
  .big-btn:focus-visible{outline-offset:-2px}
  /* an option in focus is not shaded: a shaded box on the answer sheet means chosen */
  .opts button:focus-visible:not(:disabled) i{background:var(--panel-2)}
  .big-btn:focus-visible .sec-l{background:var(--ink);color:var(--bg)}
  .area-tile:focus-visible{outline-offset:5px}
  #next:focus-visible{outline-offset:3px}
}
@media (min-width:768px) and (hover:hover){
  #scopes .pick:hover,.rowlink:hover,.gain:hover{background:var(--panel)}
  .area-tile:hover .nm{text-decoration:underline;text-underline-offset:3px}
  header .icon:hover{background:var(--panel-2)}
}

@media (min-width:1024px){
  :root{--pad:max(32px, env(safe-area-inset-left))}
  #app{max-width:1200px}

  /* home: wider gutters and taller charts */
  #v-home{column-gap:64px}
  #v-home .lead-trail svg{height:64px}
  #v-home .days svg{height:60px}

  /* play: facing pages. The question keeps the larger page; the working is a column of
     about sixty characters. The working stays in view beside a tall question. */
  .card{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:56px;
        align-items:start}
  .card > .qcol{grid-column:1;grid-row:1}
  /* 74px: the header (56px) and main's top padding, so it starts level with the question */
  .card > .result{grid-column:2;grid-row:1;margin-top:0;position:sticky;top:74px}
  .result .work{margin-top:0}
  body[data-view="play"] main{padding-bottom:48px}

  /* the Next bar, under the working: in the flow, and held at the foot of the screen
     while the working runs below it */
  #bar{position:sticky;left:auto;right:auto;bottom:0;z-index:5;margin-top:18px;
       padding:10px 0 max(14px, env(safe-area-inset-bottom));border-top:0}
  #bar .inner{max-width:none}

  /* a pointer needs less height than a thumb: more of the index on one screen */
  #scopes .area{columns:3;column-gap:44px}
  #scopes .pick{min-height:48px;padding:9px 2px}
  #statsBody{column-gap:64px}
  #statsBody > .proj{column-gap:64px}
  #statsBody > .trail{grid-column:1;grid-row:1;align-self:end}
  #statsBody > .trail + .strip{grid-column:2;grid-row:1;align-self:end;margin-bottom:8px}
  .area-h .sbar,.topic-row .sbar{width:160px}
}