/* November Novel Word-Count Tracker — the look.
   ---------------------------------------------------------------------------
   THIS IS THE SECOND DESIGN. The first one was paper and ink on a dark walnut
   desk: warm cream, a book serif, muted rust and olive, soft shadows. It was
   competent and it was completely generic — the default register a machine
   reaches for when asked to make something tasteful. The note that killed it
   was three words long and correct.

   Recording that here rather than deleting it, because the failure is going to
   recur: **tasteful is a style, and it is the one style that reads as nobody
   having chosen.** If a page could belong to any product in any category, the
   design has not been done yet, however carefully the shadows were tuned.

   WHAT THIS IS NOW
   WordPerfect 5.1 on DOS. Blue screen, sixteen colours, monospace, box-drawing
   characters, reverse video, a status line at the bottom that tells you where
   you are in the document.

   The reason is not nostalgia, it is that it is *the right building*. This tool
   counts words; word counts came from word processors; and the writers this is
   built for are the one audience that will get the joke instantly — the most
   famous working novelist of the last thirty years still writes his books in
   WordStar 4.0 on a DOS machine, and says so in interviews. A page about
   finishing a novel, wearing the interface novels were actually written in.

   THE RULES THAT FALL OUT OF IT, AND THEY ARE STRICT
   1. Sixteen colours, and not one of them is invented. The palette below is
      the IBM CGA/EGA table, hex for hex. No tints, no alpha shading, no
      in-between values. A palette you are not allowed to add to is a palette
      that stays coherent by construction.
   2. No gradients, no shadows, no rounded corners, no transitions on colour.
      Every border is 1px, 2px or `double`. A CRT could not draw a soft edge
      and neither will this.
   3. Everything monospace, on a grid. One face for reading (IBM Plex Mono),
      one for display sizes (VT323, which is a terminal face and looks like a
      dot-matrix at 3rem where a clean mono just looks large).
   4. Where a thing can be drawn with characters, it is drawn with characters.
      The progress bar is █ and ░. The chart is a 36-column grid of ·, █ and :.
      Both can be selected and copied out of the page as text, which is a
      nicer property than either had as SVG.
   5. Colour means something or it is not used. Green is ahead, red is behind,
      yellow is today and par, cyan is a heading. Nothing is coloured to look
      nice, because on this palette nothing looks nice.

   ONE CELEBRATION
   A message box types `THE END` when the goal falls, and nothing else on this
   page animates on interaction. */

:root {
  /* The IBM CGA/EGA sixteen. Verbatim — the whole discipline of this page is
     that there is no seventeenth colour. */
  --c-black:    #000000;
  --c-blue:     #0000aa;
  --c-green:    #00aa00;
  --c-cyan:     #00aaaa;
  --c-red:      #aa0000;
  --c-magenta:  #aa00aa;
  --c-brown:    #aa5500;
  --c-ltgrey:   #aaaaaa;
  --c-dkgrey:   #555555;
  --c-ltblue:   #5555ff;
  --c-ltgreen:  #55ff55;
  --c-ltcyan:   #55ffff;
  --c-ltred:    #ff5555;
  --c-ltmag:    #ff55ff;
  --c-yellow:   #ffff55;
  --c-white:    #ffffff;

  /* What each one is for here. Naming the job separately from the colour is
     what stops a seventeenth from creeping in: if a new element needs a colour
     that is not on this list, it needs a job first. */
  --screen:  var(--c-blue);     /* the editing screen */
  --text:    var(--c-white);    /* anything that must be read first */
  --dim:     var(--c-ltgrey);   /* ALL secondary text. 5.7:1 on the blue. */
  --ghost:   var(--c-ltblue);   /* furniture only — grid, shade, rules. 2.6:1. */
  --off:     var(--c-dkgrey);   /* disabled. 1.8:1, and that is the point. */
  --ahead:   var(--c-ltgreen);
  --behind:  var(--c-ltred);
  --mark:    var(--c-yellow);   /* today, par, anything that wants a glance */
  --head:    var(--c-ltcyan);   /* headings */

  /* The first pass of this file mixed two colours that are not on the list —
     a blue-grey for faint text and a darker one for the fine print — and both
     landed near 3:1 against the screen, under the 4.5:1 that small text needs.
     Which is the answer to how a sixteen-colour palette handles a third tier
     of text: it does not. On blue there are exactly two readable text colours,
     white and light grey, and the dimmer entries are for things that are not
     text. A DOS program used dark grey for *disabled*, and disabled is
     supposed to be hard to read. Keeping the palette closed is what forced
     the accessible answer here rather than an invented seventeenth colour. */

  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  --term: "VT323", "IBM Plex Mono", Consolas, monospace;

  /* The character grid — the chart, the gauge, the little day bars — and
     nothing else.

     IBM PLEX MONO IS DELIBERATELY ABSENT, and that is the whole point of this
     variable. Plex Mono has no U+2588, no shade blocks and no box-drawing set,
     so naming it first does not mean "use Plex" — it means the browser takes
     the ASCII from Plex and falls through per glyph for everything else,
     landing on a different font with a different advance. Measured: 8.45px for
     a digit and 8.25px for a block, a 0.2px drift per cell that skews a
     36-column plot by seven pixels. On a CJK page it is not subtle at all —
     the box-drawing characters are East Asian Ambiguous width and came back
     FULL width, 14px against 8.45px, which tears the chart in half.

     Every face below carries the blocks, the shades, the box-drawing set,
     U+25BC and U+221A at one advance, verified by measuring each character in
     a browser rather than assuming. A stack whose first entry is missing some
     of your glyphs is worse than one that never mentions it.

     Separate from --mono so the per-language overrides below cannot reach it. */
  --grid: Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, "Courier New", monospace;
}

/* Scripts the two webfonts do not cover, appended rather than substituted so
   Latin runs and digits still come from IBM Plex Mono and only the local script
   falls to a system face. No extra webfont is loaded: a CJK webfont is
   megabytes, and a DOS page can afford a system face for its prose far more
   easily than it can afford the payload.
   The display face (--term) loses VT323 for these languages, which is correct —
   VT323 has no glyphs for any of them, and a headline that silently swaps face
   mid-word is worse than one that never had the dot-matrix to begin with. */
html:lang(ja) { --mono: "IBM Plex Mono", "BIZ UDGothic", "MS Gothic", "Hiragino Sans", "Noto Sans CJK JP", monospace;
                --term: "IBM Plex Mono", "BIZ UDGothic", "MS Gothic", "Hiragino Sans", monospace; }
html:lang(ko) { --mono: "IBM Plex Mono", "D2Coding", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", monospace;
                --term: "IBM Plex Mono", "D2Coding", "Malgun Gothic", "Apple SD Gothic Neo", monospace; }
html:lang(zh-Hans) { --mono: "IBM Plex Mono", "Sarasa Mono SC", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", monospace;
                     --term: "IBM Plex Mono", "Sarasa Mono SC", "Microsoft YaHei", "PingFang SC", monospace; }
html:lang(zh-Hant) { --mono: "IBM Plex Mono", "Sarasa Mono TC", "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", monospace;
                     --term: "IBM Plex Mono", "Sarasa Mono TC", "Microsoft JhengHei", "PingFang TC", monospace; }
html:lang(ar) { --mono: "IBM Plex Mono", "Noto Naskh Arabic", "Traditional Arabic", "Segoe UI", Tahoma, monospace;
                --term: "IBM Plex Mono", "Noto Naskh Arabic", "Traditional Arabic", "Segoe UI", Tahoma, monospace; }
html:lang(hi) { --mono: "IBM Plex Mono", "Noto Sans Devanagari", "Nirmala UI", Mangal, monospace;
                --term: "IBM Plex Mono", "Noto Sans Devanagari", "Nirmala UI", Mangal, monospace; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--screen);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scanlines. Two pixels on, two off, at four percent — enough that the screen
   is a screen and not so much that 15px text starts to strobe against it.
   `position: fixed` so it does not scroll with the content, which is what a
   phosphor mask does. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.14) 0 1px,
    transparent 1px 3px);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 64px;   /* 16px gutter: this is read on a phone first */
}

/* ---- Header ------------------------------------------------------------- */

header {
  padding: 40px 0 28px;
}

/* The DOS prompt, with a block cursor that stops blinking. A cursor that
   blinks forever is a page that never finishes loading. */
.path {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.path::after {
  content: "\2588";
  color: var(--mark);
  animation: blink 0.7s steps(1) 8;
  animation-fill-mode: forwards;
}
@keyframes blink { 50% { opacity: 0; } 100% { opacity: 0; } }

h1 {
  margin: 0;
  font-family: var(--term);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
h1 em {
  display: block;
  font-style: normal;
  color: var(--mark);
}

.tagline {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 0.92rem;
  color: var(--dim);
}

/* ---- A window ----------------------------------------------------------- */

/* Every block of content is a bordered window with a reverse-video title bar.
   Double border, because that is the one DOS ever used for something it wanted
   you to treat as a thing rather than as a region. */
.win {
  border: 3px double var(--dim);
  margin: 0 0 26px;
}
.win-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--dim);
  color: var(--screen);
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.win-body { padding: 18px 16px 20px; }

.win h2 {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head);
  margin: 0 0 10px;
}

/* ---- The goal, and typed fields ----------------------------------------- */

.goalbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 0.95rem;
}
.goalbar label { color: var(--dim); }
.goal-tail { color: var(--dim); }

.hint {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--dim);
}

/* A field in a DOS program is an underscored run of character cells. It is not
   a box, it has no background, and it does not round. */
.field {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mark);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--dim);
  border-radius: 0;
  padding: 0 4px;
  width: 7em;
}
.field::placeholder { color: var(--ghost); opacity: 1; }
.field:focus {
  outline: none;
  background: var(--mark);
  color: var(--screen);
  border-bottom-color: var(--mark);
}
.goal-field { width: 5.5em; }

/* ---- The three numbers -------------------------------------------------- */

.statline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 3px double var(--dim);
  margin: 20px 0 16px;
}
.stat {
  padding: 10px 6px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid var(--dim); }
.stat strong {
  display: block;
  font-family: var(--term);
  font-weight: 400;
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1;
  color: var(--text);
}
.stat-rate strong { color: var(--mark); }
.statline.is-ahead  .stat-rate strong { color: var(--ahead); }
.statline.is-behind .stat-rate strong { color: var(--behind); }
.stat-label {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---- The gauge, which is characters ------------------------------------- */

.gauge {
  margin: 0 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.gauge pre {
  margin: 0;
  font-family: var(--grid);
  font-size: clamp(0.62rem, 2.9vw, 0.95rem);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: pre;
}
.gauge-mark { color: var(--mark); height: 1.15em; }
.g-edge { color: var(--dim); }
.g-off  { color: var(--ghost); }
.g-on   { color: var(--text); }
.gauge.is-ahead .g-on,
.gauge.is-done  .g-on { color: var(--ahead); }

.verdict {
  margin: 0 0 20px;
  font-size: 0.95rem;
  min-height: 1.7em;
}
.verdict b { color: var(--mark); font-weight: 700; }
.verdict.is-ahead  b { color: var(--ahead); }
.verdict.is-behind b { color: var(--behind); }

/* ---- Logging ------------------------------------------------------------ */

.logbar {
  border: 1px solid var(--dim);
  padding: 12px;
  margin: 0 0 22px;
}
/* Outside a run the log row is replaced rather than greyed out. A disabled
   control is the one state a visitor cannot distinguish from a broken page,
   and this page spends eleven months of the year outside November. */
.logbar.is-locked .mode-toggle,
.logbar.is-locked .logrow,
.logbar.is-locked #logrow-day { display: none; }

.startbox {
  border: 1px solid var(--mark);
  padding: 14px;
}
.startbox-head {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--mark);
}
.startbox .hint { margin-top: 10px; max-width: 58ch; }
#start-btn {
  background: var(--mark);
  border-color: var(--mark);
  color: var(--screen);
  font-size: 0.8rem;
}
#start-btn:hover { background: var(--text); border-color: var(--text); }
#start-btn.danger { background: var(--behind); border-color: var(--behind); }

.mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Reverse video for the selected one. DOS had no other way of saying "this
   one", and it is a better signal than any amount of tinting. */
.mode-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--dim);
  background: transparent;
  color: var(--dim);
  border-radius: 0;
  cursor: pointer;
}
.mode-btn.is-on {
  background: var(--dim);
  color: var(--screen);
}

.logrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.prompt {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.words-field { font-size: 1.15rem; width: 8em; }

/* A DOS button is a label between brackets in reverse video. No shadow, no
   press animation — the inversion is the press. */
.key-btn {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--screen);
  border-radius: 0;
  cursor: pointer;
}
.key-btn::before { content: "\00a0"; }
.key-btn::after  { content: "\00a0"; }
.key-btn:hover   { background: var(--mark); border-color: var(--mark); }
.key-btn:active  { background: var(--screen); color: var(--text); }
.key-btn:disabled { background: transparent; color: var(--off); border-color: var(--off); cursor: default; }

.key-btn.ghost {
  background: transparent;
  color: var(--dim);
  border-color: var(--dim);
}
.key-btn.ghost:hover { background: var(--dim); color: var(--screen); }
.key-btn.ghost.danger:hover { background: var(--behind); border-color: var(--behind); color: var(--screen); }

.error {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--behind);
}
.error::before { content: "! "; }
.hidden { display: none !important; }

/* ---- The chart, which is also characters -------------------------------- */

.chartbox { margin: 0 0 22px; padding: 0; }

.chart {
  margin: 0;
  /* --grid, never --mono. There were two font-family declarations in this rule
     for a while — the new one added above the old one — and the later wins, so
     the chart silently kept the body face and the per-language CJK fallback
     with it. The symptom was box-drawing characters at 14px beside digits at
     8.45px on the Japanese page, live. */
  font-family: var(--grid);
  overflow-x: auto;
  overflow-y: hidden;   /* overflow-x:auto alone computes overflow-y to auto too,
                           which put a scrollbar down a chart that fits */
  /* 44 columns have to fit a 328px phone screen without a scrollbar, and the
     clamp is what does it. Below the floor the grid would be unreadable, so it
     scrolls instead. */
  font-size: clamp(0.58rem, 2.45vw, 0.88rem);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: pre;
  color: var(--ghost);
}
.c-you  { color: var(--text); }
.chart.is-ahead  .c-you { color: var(--ahead); }
.chart.is-behind .c-you { color: var(--behind); }
.c-par  { color: var(--ghost); }
.c-proj { color: var(--mark); }
.c-goal { color: var(--head); }
.c-axis { color: var(--ghost); }
.c-tick { color: var(--dim); }
.c-empty { color: var(--dim); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.7rem;
  color: var(--dim);
}
.key { display: flex; align-items: baseline; gap: 6px; }
.key b { font-weight: 400; }
.key-par b  { color: var(--ghost); }
.key-you b  { color: var(--text); }
.chartbox.is-ahead  .key-you b { color: var(--ahead); }
.chartbox.is-behind .key-you b { color: var(--behind); }
.key-proj b { color: var(--mark); }

.chart-caption {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--dim);
}

/* ---- Thirty cells ------------------------------------------------------- */

.month-head { margin-top: 0; }

.month {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0;
  margin: 12px 0 0;
  border: 1px solid var(--dim);
  border-width: 1px 0 0 1px;
}

/* No gaps and shared borders, so thirty cells read as one table rather than as
   thirty floating cards — which is how a DOS program would have drawn it and
   also how a month actually looks. */
.day {
  display: block;
  width: 100%;
  border: 0;
  border-right: 1px solid var(--dim);
  border-bottom: 1px solid var(--dim);
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  padding: 3px 2px 4px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
}
.day:hover { background: var(--dim); color: var(--screen); }
.day:hover .day-w, .day:hover .day-bar, .day:hover .day-tick { color: var(--screen); }
.day.future { cursor: default; color: var(--ghost); }
.day.future:hover { background: transparent; color: var(--ghost); }

.day-n {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--dim);
  line-height: 1.3;
}
.day-w {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.day.empty .day-w { color: var(--ghost); font-weight: 400; }
.day-bar {
  display: block;
  font-family: var(--grid);
  font-size: 0.58rem;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}
.day.met .day-bar { color: var(--ahead); }
.day.empty .day-bar { color: var(--ghost); }

/* Today, in reverse video. There is no other way to say it on this palette and
   no better one on any palette. */
.day.today {
  background: var(--mark);
  color: var(--screen);
}
.day.today .day-n,
.day.today .day-w,
.day.today .day-bar { color: var(--screen); }

.day-tick { color: var(--ahead); }
.day.today .day-tick { color: var(--screen); }

.dayedit {
  margin-top: 14px;
  border: 1px solid var(--mark);
  padding: 12px;
}
.dayedit-head {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mark);
}
.dayedit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}

/* ---- The one celebration ------------------------------------------------ */

.theend {
  margin: 22px 0 0;
  border: 3px double var(--ahead);
  padding: 18px 12px 14px;
  text-align: center;
}
.theend-mark {
  margin: 0;
  font-family: var(--term);
  font-size: clamp(2.2rem, 10vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--ahead);
}
.theend-mark span::after {
  content: "\2588";
  animation: blink 0.62s steps(1) 9;
  animation-fill-mode: forwards;
}
.theend-sub {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--dim);
}

/* ---- Actions, and the status line --------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--dim);
}
#reset-btn { margin-left: auto; }

.feedback {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--ahead);
}
.feedback::before { content: "* "; }

.localnote {
  margin: 16px 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--dim);
}

/* The one piece of chrome WordPerfect 5.1 actually had. */
.statusline {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: 0;
  padding: 1px 8px 2px;
  border-top: 1px solid var(--dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* ---- The pace table ----------------------------------------------------- */

.table-intro,
.deep-intro {
  margin-top: 0;
  font-size: 0.88rem;
  color: var(--dim);
}

/* Week headings in reverse video, one colour each. The colours are four of the
   sixteen and they are doing a job — a reader scanning for "week two" finds it
   by colour before they find it by reading. */
.table-group {
  margin: 22px 0 0;
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wk, var(--dim));
  color: var(--screen);
}
.group-emoji { display: none; }   /* nothing on this palette survives an emoji */
.table-group-note {
  margin: 8px 0 10px;
  font-size: 0.82rem;
  color: var(--dim);
}

.wk-w1 { --wk: var(--c-ltgreen); }
.wk-w2 { --wk: var(--c-ltcyan); }
.wk-w3 { --wk: var(--c-yellow); }
.wk-w4 { --wk: var(--c-ltmag); }
.wk-w5 { --wk: var(--c-ltred); }

.value-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.value-table th,
.value-table td {
  text-align: left;
  padding: 2px 8px 2px 0;
  vertical-align: baseline;
}
.value-table thead th {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--dim);
  padding-bottom: 3px;
}
.value-table tbody th {
  font-weight: 400;
  color: var(--dim);
  white-space: nowrap;
  width: 4.4em;
}
.col-target,
.col-left {
  white-space: nowrap;
  text-align: right !important;
  width: 6.2em;
  padding-right: 14px !important;
}
.col-target { color: var(--text); font-weight: 700; }
.col-left { color: var(--dim); }
.col-note { color: var(--dim); }

.table-foot {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--dim);
}

/* ---- The article -------------------------------------------------------- */

/* Collapsed, with a real heading inside the summary. §9 of the playbook: text
   in a closed <details> is indexed fine, but <summary> is not a heading, so a
   long explainer collapses into one section as far as a crawler is concerned
   and every question-shaped subheading stops being one. */
.deep-item { border-bottom: 1px solid var(--ghost); }
.deep-item > summary {
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.deep-item > summary::-webkit-details-marker { display: none; }
.deep-item > summary::before {
  content: "[+]";
  color: var(--mark);
  line-height: 1;
  font-size: 0.82rem;
}
.deep-item[open] > summary::before { content: "[-]"; }
.deep-item > summary h2 {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--head);
  margin: 0;
  display: inline;
}
.deep-body {
  padding: 0 0 14px 28px;
  font-size: 0.86rem;
  line-height: 1.8;
  max-width: 72ch;
  color: var(--dim);
}
.deep-body p { margin: 0 0 1em; }
.deep-body p:last-child { margin-bottom: 0; }
.deep-body strong { color: var(--text); font-weight: 700; }
.deep-body em { font-style: normal; color: var(--text); }
.deep-body a { color: var(--mark); }

/* ---- Footer ------------------------------------------------------------- */

footer {
  padding: 4px 0 0;
  font-size: 0.76rem;
  color: var(--dim);
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 10px;
}
footer a { color: var(--dim); text-decoration: none; }
footer a::before { content: "> "; color: var(--ghost); }
footer a:hover { color: var(--mark); }
footer p { margin: 8px 0; max-width: 78ch; }

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 10px 0;
  font-size: 0.7rem;
}
.lang-switch a::before { content: ""; }
.lang-switch [aria-current] { color: var(--mark); }

.fine-print {
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--ghost);
}
.fine-print:hover { color: var(--dim); }

.ad-slot:not([hidden]) { margin: 0 0 26px; min-height: 1px; }

/* ---- Focus -------------------------------------------------------------- */

/* Reverse video, like everything else that wants attention here. An outline
   would be the only soft-edged thing on the page. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 1px;
}
.day:focus-visible { outline-offset: -2px; }

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 560px) {
  body { font-size: 14px; }
  .win-body { padding: 14px 12px 16px; }
  header { padding: 28px 0 22px; }
  .month { grid-template-columns: repeat(5, 1fr); }
  .col-note { display: none; }        /* thirty rows of notes is a scroll, not a chart */
  .value-table thead th.col-note { display: none; }
  #reset-btn { margin-left: 0; }
  .deep-body { padding-left: 0; }
}

/* ---- The setting a blinking cursor exists to be switched off by ---------- */

@media (prefers-reduced-motion: reduce) {
  .path::after,
  .theend-mark span::after { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}