/* =====================================================================
   celnav -- same token system as colregs, deliberately.  Six tools that
   look like six unrelated apps is six things to learn in the dark.

   Dark is the normal mode because this is used after sunset.  NIGHT is
   red-on-black because dark adaptation takes twenty minutes to build and
   a second to lose, and that outranks a pretty screen.
   ===================================================================== */
:root {
  --ground:  #07090b;
  --panel:   #10151a;
  --panel-2: #161c23;
  --line:    #232b34;
  --text:    #e6eaef;
  --dim:     #8995a3;
  --accent:  #6fb3d9;
  --warn:    #ff4438;
  --good:    #2fd45f;
  --radius:  10px;
  --tap:     56px;
}
:root[data-mode="night"] {
  --ground:  #060101;
  --panel:   #0e0303;
  --panel-2: #140505;
  --line:    #3a0f0c;
  --text:    #cf2a20;
  --dim:     #8a1d16;
  --accent:  #e23a2c;
  --warn:    #e23a2c;
  --good:    #e23a2c;
}
/* The photograph itself is the one thing NIGHT must not recolour - you
   are judging an edge in it.  It is dimmed and reddened instead, which
   protects dark adaptation without destroying the thing being measured. */
:root[data-mode="night"] #cv {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-28deg) brightness(0.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* APP LAYOUT, NOT DOCUMENT LAYOUT.
   This runs in panes as short as a few hundred pixels.  As a normal
   scrolling document the controls fell off the bottom, and scrolling past
   the end chained to the host and dismissed the page.  So: the body is
   exactly one viewport tall and never scrolls, only the middle scrolls,
   and overscroll-behavior stops any scroll reaching the parent. */
html, body { height: 100%; overscroll-behavior: none; }

/* The `hidden` attribute is only a presentation hint, and ANY display rule
   beats it - so `.panel { display: grid }` made every step's controls show
   on every step, which is most of why this page was unreadable.  This one
   line is the fix, and it has to stay above the component rules. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  display: flex; flex-direction: column;
  height: 100dvh; min-height: 100%; overflow: hidden;
}
main {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 760px; width: 100%; margin: 0 auto; padding: 0 12px 10px;
}
.bar { flex: 0 0 auto; }

.bar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.bar h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.mode {
  min-height: 40px; padding: 0 14px; background: transparent; color: var(--accent);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 600 13px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.08em; cursor: pointer;
}

/* ---------- the photograph ---------- */
.stage {
  position: relative; margin: 16px 0 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
/* The photograph is capped so the controls stay on screen: you tap it
   roughly and then work in the magnified strip and the buttons. */
#cv { display: block; max-width: 100%; max-height: 30dvh; height: auto;
      width: auto; touch-action: none; }
.empty { color: var(--dim); margin: 0; padding: 48px 16px; text-align: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 18px; flex: 1;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; cursor: pointer; text-align: center;
}
.btn:active { background: var(--panel-2); }
.btn-go { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.note { color: var(--dim); font-size: 13px; margin: 10px 0 0;
        font-family: ui-monospace, Menlo, monospace; }

.stage { position: relative; }
#zoom { display: block; width: 100%; max-height: 30dvh; height: auto;
        image-rendering: pixelated; }
.zoomlbl {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 3px 8px; background: rgba(7,9,11,0.78); color: var(--dim);
  font: 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.04em;
}
/* the view switch */
.seg { display: flex; }
.segbtn {
  flex: 1; min-height: 38px; background: var(--panel); color: var(--dim);
  border: 1px solid var(--line); font: inherit; font-size: 13px; cursor: pointer;
}
.segbtn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segbtn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.segbtn.on { background: var(--panel-2); color: var(--accent); font-weight: 600; }

/* ---------- the readout ---------- */
.readout {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.readout .chain, .readout .conf { grid-column: 1 / -1; }
.big { display: flex; align-items: baseline; gap: 8px; }
.big .lbl {
  width: 2.2em; color: var(--dim); font: 600 13px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
}
.big .val {
  font: 700 23px/1.25 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.chain, .conf {
  margin: 6px 0 0; color: var(--dim); font-size: 13px;
  font-family: ui-monospace, Menlo, monospace;
}
.conf[data-state="bad"] { color: var(--warn); }
.conf[data-state="good"] { color: var(--good); }

/* ---------- the steps ---------- */
.steps {
  display: flex; gap: 5px; list-style: none; margin: 10px 0 10px; padding: 0;
}
.steps li {
  flex: 1; display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 6px;
  padding: 6px 2px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--dim); font-size: 11px; letter-spacing: 0.04em; text-align: center;
}
.steps li span {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  background: var(--panel-2); color: var(--dim);
  font: 700 12px/1 ui-monospace, Menlo, monospace;
}
.steps li.on { border-color: var(--accent); color: var(--accent); }
.steps li.on span { background: var(--accent); color: var(--ground); }
.steps li.done span { background: var(--panel-2); color: var(--accent); }

/* The instruction, in plain words and at reading size.  The first version
   put it in 13 px grey monospace inside the readout block, where nobody
   read it - which is why the page was unusable. */
.tellme {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--panel-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius); font-size: 14px; line-height: 1.4;
}

.panel { display: grid; gap: 10px; margin-bottom: 10px; }
.scale { margin: 0; color: var(--dim); font-size: 13px;
         font-family: ui-monospace, Menlo, monospace; }
.dock {
  flex: 0 0 auto; background: var(--panel); border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
#snaprow { grid-template-columns: 2fr 1fr 1fr; gap: 7px; margin-bottom: 8px; }
#snaprow .btn { min-height: 48px; padding: 0 6px; font-size: 14px; }
.btn[disabled] { opacity: 0.4; cursor: default; }
.row6 { grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 8px; }
.row6 .nudge { min-height: 48px; font-size: 13px; padding: 0 2px; }
.btn-big { min-height: 68px; font-size: 18px; font-weight: 600;
           border-color: var(--accent); color: var(--accent); }
.pad { background: var(--panel); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 9px; }
.padlbl { margin: 0 0 7px; color: var(--dim); font: 600 12px/1 ui-monospace, Menlo, monospace;
          letter-spacing: 0.08em; text-transform: uppercase; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 7px; }
.row:last-child { margin-bottom: 0; }
.row4 { grid-template-columns: repeat(4, 1fr); }
/* The nudge buttons are the primary control, so they get the biggest
   targets on the page - 60 px, comfortably past the 44 px minimum, because
   this is tapped with cold wet hands on a moving boat. */
.nudge {
  min-height: 52px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 600 15px/1 ui-monospace, Menlo, monospace; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.nudge:active { background: var(--accent); color: var(--ground); }

#calcv { display: block; max-width: 100%; max-height: 34dvh; height: auto;
         width: auto; touch-action: none; }
#callist { display: grid; gap: 6px; }
.row3 { grid-template-columns: 1fr 1fr 1fr; }
.fields label button { width: 100%; }

/* ---------- the plotting sheet ---------- */
.sheet {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px;
}
.sheet svg { display: block; width: 100%; max-height: 42dvh; height: auto; }
#sightlist { display: grid; gap: 6px; }
.srow {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 13px/1.4 ui-monospace, Menlo, monospace;
}
.srow b { color: var(--text); min-width: 7em; }
.srow span { color: var(--dim); }
.srow button {
  margin-left: auto; min-height: 34px; padding: 0 10px;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; cursor: pointer;
}

/* ---------- the sight ---------- */
.sight { margin-top: 24px; }
.sight h2 { font-size: 16px; margin: 0 0 12px; }
.fields { display: grid; gap: 12px; }
@media (min-width: 520px) { .fields { grid-template-columns: 1fr 1fr; } }
.fields label { display: flex; flex-direction: column; gap: 6px;
                color: var(--dim); font-size: 13px; }
.fields input, .fields select {
  min-height: 46px; padding: 0 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 16px/1 ui-monospace, Menlo, monospace;   /* 16px: iOS zooms below it */
}

.foot { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.foot summary { cursor: pointer; color: var(--accent); font-size: 13px;
                min-height: 40px; display: flex; align-items: center; }
.foot p { color: var(--dim); font-size: 13px; margin: 0 0 6px; }
.foot strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- the shell: home, tiles, and the teaching track ----------
   celnav was the camera-sight page alone; it has a home screen and two
   sections now, so it needs what colregs needed. Nothing here restyles
   the camera flow, which keeps its own panels untouched inside
   #v-camera.                                                         */
.view { max-width: 760px; margin: 0 auto; }
.lede { color: var(--dim); margin: 2px 0 16px; line-height: 1.5; }
.tiles { display: grid; gap: 10px; margin-bottom: 14px; }
.tile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px; min-height: var(--tap, 56px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius, 10px);
}
.t-name { display: block; font-weight: 700; font-size: 16px; }
.t-sub { display: block; color: var(--dim); font-size: 13px; margin-top: 3px; }

.ridx { display: grid; gap: 8px; margin: 0 0 14px; }
.ridx button {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  text-align: left; cursor: pointer; padding: 11px 12px;
  min-height: var(--tap, 56px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius, 10px);
}
.ridx .done { color: var(--ok, #2fd45f); font-family: ui-monospace, Menlo, monospace; }
.ridx .todo { color: var(--dim); font-family: ui-monospace, Menlo, monospace; }
#syl-index h3 {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
#syl-index h3:first-child { margin-top: 0; }

/*  the lesson body: one panel of paragraphs, the shell's 70-column
    breaks dropped and the figures that are tables held exactly  */
.prose {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px; line-height: 1.6; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius, 10px); padding: 14px; margin: 0 0 16px;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.lp { margin: 0 0 12px; }
.lp-item { margin: 0 0 6px; padding-left: 2.2em; text-indent: -2.2em; }
.lp-item + .lp { margin-top: 12px; }
.lp-pre {
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 12px; font: inherit; color: inherit;
  background: var(--panel-2, var(--panel)); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px;
}

/*  A GAP WHERE A FIGURE BELONGS, and it should look like one. Ten of the
    lessons draw on a character grid and those drawings are the second
    pass; a lesson missing its figure reads as unfinished on purpose,
    because a quiet hole is worse than an obvious one.                */
.fig-gap {
  margin: 0 0 16px; padding: 14px; border-radius: var(--radius, 10px);
  border: 1px dashed var(--line); background: none; color: var(--dim);
  font-size: 13px; line-height: 1.5;
}
.fig-gap-tag {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

.lesson h2 { font-size: 19px; line-height: 1.3; margin: 0 0 14px; }
.check { border-top: 1px solid var(--line); padding-top: 14px; }
/*  one option per row, with its text: in the shell they are columns on
    one line, which on a phone is a sideways scroll and a row of bare
    letters to press  */
.opts { display: grid; gap: 8px; }
.opts .opt {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  width: 100%; padding: 12px; min-height: var(--tap, 56px); cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius, 10px);
  font-size: 15px; line-height: 1.45;
}
.opts .ltr { font-family: ui-monospace, Menlo, monospace; color: var(--dim); }
.opts .opt[data-state] .ltr { color: inherit; }
.opts .otext { flex: 1; }
.opts .opt[data-state="right"] { border-color: var(--ok, #2fd45f); color: var(--ok, #2fd45f); }
.opts .opt[data-state="wrong"] { border-color: var(--bad, #ff4438); color: var(--bad, #ff4438); }
.answer { margin-top: 14px; }
.answer h3 { margin: 0 0 6px; font-size: 15px; color: var(--accent); }

/* ---------- sight reduction ----------------------------------------
   The tool's first purpose, and the browser had no way in until now.
   The camera flow has its own panels and keeps them; these are the
   forms and tables the typed path needs.                             */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius, 10px); padding: 14px; margin: 0 0 14px;
}
.card h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/*  ONE COLUMN, SAME FIELD. A bare <label> in a card puts its text beside a
    narrow input instead of above a full-width one - the almanac's body list
    rendered as "Bodies [sun,moon,venus,mars,jupiter,s" with the value cut
    off, where every field around it stacked. Only .grid2 carried the
    stacking rules; .grid1 is the single-column form of the same thing.  */
.grid1 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }
.grid2 label, .grid1 label { display: flex; flex-direction: column; gap: 4px;
               font-size: 12px; color: var(--dim); }
.grid2 input, .grid2 select, .grid1 input, .grid1 select {
  min-height: 44px; padding: 8px 10px; font-size: 16px;   /* 16px: iOS zooms below it */
  color: var(--text); background: var(--panel-2, var(--panel));
  border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
}
.grid2 input:focus, .grid2 select:focus, .grid1 input:focus, .grid1 select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/*  the correction chain and the fix, as label and value: lesson S5 is
    about the size of each part, so the parts are shown and not summed  */
.kv { width: 100%; border-collapse: collapse;
      font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; }
.kv th { text-align: left; font-weight: 400; color: var(--dim); padding: 4px 10px 4px 0; }
.kv td { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.kv tr:first-child th, .kv tr:first-child td { font-weight: 700; }

#s-list .ct-tab { width: 100%; border-collapse: collapse; font-size: 13px;
                  font-family: ui-monospace, Menlo, monospace; }
#s-list th { text-align: left; color: var(--dim); font-size: 11px;
             letter-spacing: .06em; text-transform: uppercase;
             padding: 6px 8px 4px; border-bottom: 1px solid var(--line); }
#s-list td { padding: 7px 8px; color: var(--text); }
#s-list td.num { text-align: right; font-variant-numeric: tabular-nums; }
#s-list tr + tr td { border-top: 1px solid var(--line); }
#s-sheet svg { width: 100%; height: auto; max-width: 420px; display: block; margin: 12px auto 0; }

/*  the two latitude screens. `tot` is the answer line - the one row in a
    correction chain that is not a correction - and `warn` carries the
    things the shell prints in its accent colour: a sun within a degree of
    the zenith, and a Polaris sight that has come out southern.  */
.kv tr.tot th, .kv tr.tot td { font-weight: 700; border-top: 1px solid var(--line);
                               padding-top: 7px; }
.kv tr.tot td { color: var(--accent); }
p.warn { color: var(--warn); font-size: 13px; margin: 10px 0 0; line-height: 1.5; }
#n-out h3, #p-out h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; }
#n-out, #p-out { padding: 0 2px; }
/*  the shell draws a rule between the planning half and the working half;
    this is that rule's job, done with space  */
#n-out .kv, #p-out .kv { margin-top: 14px; }

/*  the sky view and the planner's table. `picked` marks the three the
    planner suggests in the long list, so the drawing and the table agree
    about which rows they are.  */
#pl-sky svg { display: block; width: 100%; max-width: 360px; margin: 6px auto 0; }
#pl-sky h3, #pl-list h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; }
#pl-out .ct-tab, #pl-list .ct-tab { width: 100%; border-collapse: collapse; font-size: 13px;
                  font-family: ui-monospace, Menlo, monospace; }
/*  SCOPED TO .ct-tab, not to the panel. Unscoped, the uppercase rule
    reached the kv table beside it and printed the suggested set as
    "1 SCHEDAR" - the body name shouted in a list where every other
    spelling of it is "Schedar".  */
#pl-out .ct-tab th, #pl-list .ct-tab th { text-align: left; color: var(--dim); font-size: 11px;
                          letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px 4px 0; }
#pl-out .ct-tab td, #pl-list .ct-tab td { padding: 3px 8px 3px 0; color: var(--text);
                          font-variant-numeric: tabular-nums; }
#pl-out .ct-tab .num, #pl-list .ct-tab .num { text-align: right; }
#pl-list tr.picked td { color: var(--accent); }
#c-out h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; }
#c-out { padding: 0 2px; }
#c-out .kv { margin-top: 14px; }
/*  prime time for stars gets the good colour: it is the one line on the
    planning screen that is an answer rather than a number  */
p.good { color: var(--good); font-size: 13px; margin: 10px 0 0; line-height: 1.5; }

/*  Pub. 249: the page, and the reader's working beside it  */
#t-args h3, #t-page h3, #t-check h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; }
#t-args, #t-page, #t-check { padding: 0 2px; }
#t-args .kv, #t-check .kv { margin-top: 14px; }
#t-page .ct-tab { width: 100%; border-collapse: collapse; font-size: 13px;
                  font-family: ui-monospace, Menlo, monospace; }
#t-page .ct-tab th { text-align: left; color: var(--dim); font-size: 11px;
                     letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px 4px 0; }
#t-page .ct-tab th.num { text-align: right; }
#t-page .ct-tab td { padding: 3px 8px 3px 0; color: var(--text);
                     font-variant-numeric: tabular-nums; }
#t-page .ct-tab .num { text-align: right; }
#t-page tr.picked td { color: var(--accent); font-weight: 700; }

/*  the sandbox: three sliders and a drawing that follows them  */
#v-sandbox label { display: block; margin: 12px 0 0; color: var(--dim); font-size: 13px; }
#v-sandbox input[type=range] { display: block; width: 100%; margin: 6px 0 0; accent-color: var(--accent); }
#v-sandbox .val { color: var(--accent); font-family: ui-monospace, Menlo, monospace;
                  font-variant-numeric: tabular-nums; }
#sb-out svg { display: block; width: 100%; max-width: 380px; margin: 10px auto 0; }
#sb-out { padding: 0 2px; }
#sb-out .kv { margin-top: 14px; }

/*  the walkthrough: ten steps, with the app's own drawings in three of them  */
#walk-body h2 { font-size: 17px; margin: 18px 0 6px; line-height: 1.35; }
#walk-body h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .06em;
                text-transform: uppercase; color: var(--dim); }
#walk-body .walkfig svg { display: block; width: 100%; max-width: 400px; margin: 8px auto 0; }
#walk-body .kv { margin-top: 12px; }
.walknav { display: flex; align-items: center; gap: 12px; margin: 22px 0 8px; }
.walknav .btn { flex: 0 0 auto; }
.walknav .btn[disabled] { opacity: .35; }
.walkpos { flex: 1 1 auto; text-align: center; color: var(--dim); font-size: 13px;
           font-variant-numeric: tabular-nums; }

/*  the drills: the question, the answer boxes, and the marking  */
#d-q h3, #d-out h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; }
#d-q, #d-out { padding: 0 2px; }
#d-q .kv, #d-out .kv { margin-top: 14px; }
#d-q .ct-tab { width: 100%; border-collapse: collapse; font-size: 13px;
               font-family: ui-monospace, Menlo, monospace; margin-top: 12px; }
#d-q .ct-tab th { text-align: left; color: var(--dim); font-size: 11px;
                  letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px 4px 0; }
#d-q .ct-tab td { padding: 3px 8px 3px 0; color: var(--text);
                  font-variant-numeric: tabular-nums; }
#d-q .ct-tab .num { text-align: right; }
#d-out .kv tr.good td { color: var(--good); }
#d-out .kv tr.bad td { color: var(--warn); }
#d-out h3.good { color: var(--good); }
#d-out h3.warn { color: var(--warn); }
#d-out .walkfig svg { display: block; width: 100%; max-width: 400px; margin: 8px auto 0; }

/*  THIRTEEN TILES IN ONE LIST IS A SCROLL, NOT A MENU, and on a phone at
    sea the first tap has to be readable at a glance. Grouped by what you
    are doing: working a sight, looking something up, learning it.  */
.tilegroup { margin: 22px 2px 8px; font-size: 11px; letter-spacing: .08em;
             text-transform: uppercase; color: var(--dim); font-weight: 600; }
.tilegroup:first-of-type { margin-top: 14px; }