/* The fallbacks the sheet wears before face/look.js paints the chosen set on:
   the Powder blue day column and the day grounds. They are fallbacks, so
   they must be a real set, every hand at or above the AA floor. */
/* The instrument's four cuts, off the desk's own door rather than a CDN:
   a licensed face may only be served from a domain its owner licensed.
   `block` rather than `swap`, because the instrument is tracked caps and
   numerals -- a flash of a fallback at another width is a visible reflow,
   where a beat of nothing is not. */
@font-face{font-family:"Sohne";font-weight:400;font-style:normal;font-display:block;
  src:url("/fonts/soehne-buch.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:500;font-style:normal;font-display:block;
  src:url("/fonts/soehne-kraftig.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:600;font-style:normal;font-display:block;
  src:url("/fonts/soehne-halbfett.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:700;font-style:normal;font-display:block;
  src:url("/fonts/soehne-dreiviertelfett.woff2") format("woff2")}
/* The other three faces, off the same door rather than a CDN, so that the
   page's Content-Security-Policy names no third-party origin and opening
   the desk tells nobody else it was opened. These are the phone's own
   files (ios/Dashboard/Fonts, byte for byte), which is why they are .ttf
   and why the set is exactly the phone's three: Newsreader Regular and
   Italic, Plex Mono Regular. `swap` rather than `block`:
   these carry the owner's own writing, where a beat of nothing is worse
   than a beat of Georgia. */
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;
  src:url("/fonts/newsreader.ttf") format("truetype")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;
  src:url("/fonts/newsreader-italic.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;
  src:url("/fonts/plex-mono.ttf") format("truetype")}

:root{
  --paper:#ECE9E3;
  --paper-hi:#F4F2EF;
  --ink:#201F1B;
  --pen:#1A4BA8;
  --pen-soft:rgba(26,75,168,.16);
  --pencil:#6B6455;
  --stamp:#A63D40;
  --rule:#D3CBB9;
  --card:#FFFEFA;
  --card-hi:#FFFFFF;
  --pen-rule:rgba(26,75,168,.45);
  --manila:#EAE3D1;
  --manila-hi:#F2ECDD;
  --docpaper:#F4F1E6;
  --taped:#F6F1DA;
  /* The one clock for the sheet's two pieces of theatre, the tick and the
     capture's stamp: the mark draws, the thing is held, the thing goes.
     Mirrors Strike in ios/Dashboard/Card.swift; face/shared.js says the
     same three as STRIKE_DRAW / STRIKE_BEAT / STRIKE_LEAVE, and the tick's
     grace, how long a ticked card stays struck before it goes, as
     STRIKE_GRACE. */
  --strike-draw:.22s;
  --strike-beat:.35s;
  --strike-leave:.16s;
  --strike-grace:1.2s;
  /* Three faces, fixed: the instrument speaks grotesque, the owner writes
     serif, and mono belongs to the clerk alone, always in her green and
     never borrowed for labels. Soehne is licensed, not open -- the one
     face on the sheet that is not -- which is why it is served from the
     desk's own /fonts and never from a CDN. */
  --ui:"Sohne",system-ui,-apple-system,sans-serif;
  --display:"Sohne",system-ui,-apple-system,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* The app's NAME: Soehne Halbfett, the weight of the header's own
     tool words (decisions/2026-09-26-the-name/RULING.md). */
  --mark:"Sohne",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;line-height:1.55;
  padding:0 20px 64px;
  max-width:820px;margin:0 auto;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.mono{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* Words said to a screen reader and printed nowhere: a live line whose
   news the eye already has from the sheet (the capture's stamp). */
.aloud{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* A field is an underline. Every field on the sheet is
   written without a type attribute, so the rule has to reach a bare
   input; the date and time pickers keep their own. */
input:not([type=date]):not([type=time]),textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--rule);padding:9px 2px;font-family:var(--body);font-size:17px}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--pen)}
textarea{resize:vertical;min-height:76px;line-height:1.5}
::placeholder{color:var(--pencil);opacity:1}

/* ---------- section view ---------- */
.back{color:var(--pen);margin:30px 0 0;display:inline-block}
.sec-head{margin:14px 0 4px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,9vw,52px);letter-spacing:-.04em;
  line-height:.9;margin:0}
/* Completed is a word beside the Tasks title: the two halves of one
   paper, set in the head's own face and size -- the chosen word in ink,
   the other in pencil. No hairline: at this size the ink against the
   pencil is the whole mark. */
h2 .headword{font:inherit;letter-spacing:inherit;line-height:inherit;background:none;
  border:0;padding:0;margin:0;cursor:pointer;color:var(--pencil);opacity:.8}
h2 .headword.on{color:var(--ink);opacity:1}
/* the two words at the two ends of the line: side by side they did not
   read as a choice. The unchosen one at .8 of pencil, 3:1 at the least on
   every ground (.55 measured 2.15; the critique's ASSESSMENT-B). Where the
   line cannot hold both, Completed goes under Tasks rather than off the
   edge, as the phone's head stacks. */
h2:has(.headword){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px}
/* The card stock, not the sheet's and not the page's: the box is a card
   waiting to be written, so it stands on the ground the cards beside it
   stand on. */
.composer{margin:26px 0 8px;padding:16px;background:var(--card);
  border:1px solid var(--rule);transition:border-color .18s}
.composer:focus-within{border-color:var(--pen)}
/* The capture box is the width of its column and wraps: whatever is
   typed or dictated into it, including an address with no spaces in it,
   comes back on the next line. It never scrolls sideways, and it grows
   with the text by itself, so it shows no resize grip. */
.composer textarea{border-bottom:1px solid var(--rule);font-size:19px;resize:none;
  width:100%;max-width:100%;box-sizing:border-box;white-space:pre-wrap;
  overflow-wrap:break-word;word-break:break-word;overflow-x:hidden}
.composer .mono{color:var(--pencil);display:block;margin-bottom:6px}
.composer-actions{display:flex;gap:16px;align-items:center;justify-content:flex-end;margin-top:12px}
/* the completing row of recipients, drawn only while an "@" is typed */
.handrow:empty{display:none}
.handrow{margin-top:10px}
/* the clerk's one word about a hand-on, under the box and clear of the
   stamp, which rides the composer's own lower-left corner */
/* one instrument, at the reachable end: the mic glyph and then the
   word. Every control is a word, and SEND IT is an underlined one, at
   the one dress's own tracking and gap, so SEND IT and a card's verbs
   are one setting. */
.sendunit{display:inline-flex;align-items:center;gap:14px}
/* the mic's target is 34 square, over the 32 floor, while the glyph
   stands where it stood: the extra width is padding the margin gives back */
.sendunit .btn.speak{border:0;background:none;color:var(--pen);
  height:34px;min-width:34px;padding:0 10px;margin:0 -6px;display:inline-flex;
  align-items:center;justify-content:center}
.sendunit .btn.speak:hover{background:none;opacity:.68}
.sendunit .btn.send{border:0;background:none;border-bottom:1px solid var(--ink);
  padding:12px 0 4px;margin-bottom:8px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap}
.sendunit .btn.send:hover{background:none;color:inherit}
/* Listening: the mic's glyph and the box's outline in the stamp's red;
   the words keep their ink. Everything outside the box darkens under the hush
   (face/capture.js): black laid over it at .6 in every light, so it keeps
   about 40%, over .2s, the box left clear. */
.sendunit .btn.speak.listening,.sendunit .btn.speak.listening:hover{
  background:none;color:var(--stamp);opacity:1}
.composer.listening,.composer.listening:focus-within{border-color:var(--stamp)}
.hush{position:fixed;inset:0;z-index:100;background:#000;opacity:0;
  pointer-events:none;transition:opacity .2s ease-out}
.hush.on{opacity:.6;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hush{transition:none}}
.btn{font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.02em;
  border:1.5px solid var(--ink);border-radius:0;padding:8px 16px}
.btn:hover{background:var(--ink);color:var(--paper-hi)}

ul.entries{list-style:none;margin:22px 0 0;padding:0}
li.entry{padding:15px 0;border-bottom:1px solid var(--rule);display:flex;gap:13px;align-items:flex-start}
/* The tick square: one rule, wherever a card's tick appears: Tasks, the
   decks, a drawer, Just captured, the day page's rows, a case file's run.
   The phone draws it 15pt beside words set in Newsreader 17, 1.5pt stroke,
   square corners, the pen (ios/Dashboard/Card.swift's TickSquare ->
   StrikeSquare -> Look.swift's HouseSquare), so the square is .88 of the
   type it stands beside — the same object at the web's own size, where a
   flat 24px stood taller than the letters and read as a box with a title
   beside it. It sits on the first line's x-height center rather than on the
   top of the line box, so it holds whatever leading its words carry:
   Newsreader's ascent and descent come to exactly 1em, which puts the glyph
   box half the leading down the line and the x-height center .522em below
   that (.735 ascent less half the .426 x-height). Every place below says
   only the type it stands beside; nothing else places a square. */
.check{--tick-words:18px;--tick-lh:1.4;
  --tick:calc(var(--tick-words) * .88);
  flex-shrink:0;align-self:flex-start;
  width:var(--tick);height:var(--tick);
  margin-top:calc(var(--tick-words) * ((var(--tick-lh) - 1) / 2 + .522) - var(--tick) / 2);
  border:1.5px solid var(--pen);border-radius:0;position:relative}
.check[aria-checked=true]{background:var(--pen)}
/* the check cut out of the filled square, in the square's own proportions */
.check[aria-checked=true]::after{content:"";position:absolute;
  left:calc(var(--tick) * .33);top:calc(var(--tick) * .12);
  width:calc(var(--tick) * .21);height:calc(var(--tick) * .5);
  border:solid var(--paper-hi);
  border-width:0 calc(var(--tick) * .125) calc(var(--tick) * .125) 0;
  transform:rotate(42deg)}
.entry-body{flex:1;min-width:0}
/* A folded card is three lines deep. The words fold at three, and so
   does anything written under them, so that the printed foot -- the only
   door into the editor -- is never pushed off the screen by a long
   capture. And folded, the conversation is only its last turn:
   renderFoldedBody prints the newest word and nothing before it, so a
   long exchange has a ceiling reached by folding harder rather than by
   this clamp cutting through the oldest turn. The open card shows
   everything. Mirror of Fold.foldedLines in ios/Dashboard/Touch.swift. */
/* A card wholly the clerk's folds at five. Her typescript is smaller
   than the owner's serif, so five typed lines stand about as tall as
   three written ones and the printed foot is no further away. Mirror of
   Fold.clerksLines in ios/Dashboard/Touch.swift. */
:root{--folded-lines:3;--clerks-lines:5;--foot-rule:2.5px}
.entry-title{font-size:18px;line-height:1.4;display:-webkit-box;
  -webkit-line-clamp:var(--folded-lines);
  -webkit-box-orient:vertical;overflow:hidden}
li.entry.open .entry-title{display:block}
/* A card whose words open with the clerk's marker is hers: the title is
   her line, so it is printed in her hand, green typescript, as every
   AI-authored word on the sheet is. */
.entry-title.clerks{color:var(--clerk);font-family:var(--mono);
  font-size:14px;line-height:1.7;letter-spacing:-.1px;
  -webkit-line-clamp:var(--clerks-lines)}
/* A note the desk seeded itself with does not fold: a welcome that ends
   in an ellipsis is a welcome half said, so the words print whole.
   Nothing seeds such a note any more, and the exemption stays for the
   desks that already hold them. The reading is mirror.js's
   sIsSeededNote (the reserved `00000000-` prefix) and the phone's is
   Item.isSeededNote. It stands after `.clerks` because the two have
   equal weight and this one must win. */
.entry-title.seeded{display:block}
.entry-title.clerks[data-opencard]:hover{color:var(--clerk)}
.entry-title.clerks strong{font-weight:500;color:var(--clerk)}
.tick-title.clerks{color:var(--clerk);font-family:var(--mono);letter-spacing:-.1px}
.entry-note{color:var(--ink);font-size:16px;white-space:pre-wrap;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:var(--folded-lines);
  -webkit-box-orient:vertical;overflow:hidden}
li.entry.open .entry-note,li.entry.editing .entry-note{display:block;overflow:visible}
.entry-date{color:var(--pencil);margin-top:7px;display:block}
.done .entry-title{text-decoration:line-through;color:var(--pencil)}
.empty-state{margin:34px 0;color:var(--pencil);font-style:italic;font-size:18px}
.load{color:var(--pencil);padding:40px 0;font-style:italic}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- facets, capture, and the rest of the pool UI ---------- */
.composer{margin:26px 0 8px}
.lead{color:var(--pencil);margin:34px 0 -8px}
.filter-note{color:var(--pencil);margin:6px 0 0;font-size:11px}
.trouble{border:1px solid var(--rule);border-radius:0;color:var(--ink);
  padding:11px 14px;margin:18px 0 0;font-size:16px;font-style:italic}

.facets{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;margin-top:9px}
/* One dress for every word that fires (decisions/2026-09-16-one-dress/
   RULING.md). The grammar in one line: ink under an ink line fires; the
   pen is where you are or what is chosen; pencil is off, or declined.
   So act and door are one word: tracked caps at the verb's own tracking,
   in ink, under a 1px ink hairline the word's own width, 4px under the
   word so the line reads as a line and not a heavy baseline. The 1px ink
   hairline is thinner than the masthead's 2px ink rule, which runs the
   sheet's whole width and belongs to no word.
   The case is the sheet's, not the string's: every control keeps the
   plain case TEXT.md prints and this rule sets it in capitals, which is
   how one string serves both faces. There is no hover: the line is the
   affordance, and a hover state teaches only the pointer.
   The clerk's own words keep her green, and take the line in it. The
   word is small; the target is not: every one of them is at least 32px
   tall. */
.word{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:12px 0 4px;margin-bottom:8px;color:var(--ink);line-height:1.1;
  cursor:pointer;display:inline-block;text-align:left;text-decoration:none}
/* a word that DECLINES: pencil, bare, and in its own plain case --
   declining must cost less to see than what it declines */
.word.quiet{color:var(--pencil);font-weight:400;letter-spacing:.02em;
  text-transform:none;border-bottom-color:transparent;padding-bottom:4px}
.word.clerk{color:var(--clerk);border-bottom-color:var(--clerk)}
/* THE ONE BOXED WORD: the subscription's offer, `try it free` (or
   `subscribe`), in the pen inside a full square box in the pen, with no
   line under it -- the named exception to every control being an
   underlined word (docs/design.md, Exceptions; the owner, Oct 6, 2026,
   decisions/2026-10-06-what-a-subscription-unlocks/RULING.md). The box is
   drawn small; the target reaches 8px past it above and below, at least
   44px in all. Mirror of BoxedWord in ios/Dashboard/Look.swift. */
.word.boxed{position:relative;color:var(--pen);border:1px solid var(--pen);
  padding:9px 12px 8px;margin:7px 0 15px;line-height:1.2}
.word.boxed::after{content:"";position:absolute;left:-1px;right:-1px;top:-8px;bottom:-8px}
/* A time on a word is a value and keeps its own case, `12:00 p.m.`, under
   the same line: the caps printed `12:00 P.M.` (the critique of Oct 5,
   2026, item 9; filed with decisions/2026-10-05-polish/RULING.md). Mirror
   of `door(caps: false)` in ios/Dashboard/Editor.swift. */
.word.time{text-transform:none;letter-spacing:0}
/* A word among CHOICES is a state, not a fire: the chosen one takes the
   pen under a pen hairline, the rest pencil and bare, and neither takes
   the caps -- ten caps words underlined where one is chosen would print
   a row of buttons. */
/* an acting row is set at the instrument's reading size, 12.5, and never
   shrunk to fit -- every row of these wraps */
.word.pick{font-size:12.5px;letter-spacing:.06em;text-transform:none;
  color:var(--pencil);font-weight:500;border-bottom-color:transparent}
.word.pick.on{color:var(--pen);font-weight:600;border-bottom-color:var(--pen)}
/* THE NEEDLE (needles() in face/shell.js; the colour-and-motion ruling,
   M2): a row of choices keeps one mark, laid over the chosen word's box,
   and the chosen word's own line steps aside for it. The mark slides from
   the word left to the word chosen over a quarter second on the house's
   no-bounce spring; `.still` places it without travel, and under Reduce
   Motion the sheet's one rule turns the travel off. Print, never a
   control. */
.needled{position:relative}
/* doubled, to outrank the editor's and the pop-out's own chosen line */
.needled.needled .word.pick.on{border-bottom-color:transparent}
.needle{position:absolute;pointer-events:none;box-sizing:border-box;
  border-bottom:1px solid var(--pen);
  transition:left .25s var(--spring),top .25s var(--spring),width .25s var(--spring),
    height .25s var(--spring)}
.needle.still{transition:none}
/* An underlined word PRESSES: held down, it dips 1px with its line, and
   comes back up on the lift, 80ms each way -- a transform, so nothing
   beside it moves (decisions/2026-09-29-colour-and-motion/RULING.md, M1).
   A decline has no line and does not dip. No dip under Reduce Motion.
   The phone's `.word` press (HouseButtonStyle, Look.swift), which also
   taps; the web has no haptics. */
button.word:not(.quiet),a.word,.editor .sys,.sendunit .btn.send,.pocketline button,
.pl-doors a{transition:transform .08s ease-out}
button.word:not(.quiet):not(:disabled):active,a.word:active,.editor .sys:active,
.sendunit .btn.send:not(:disabled):active,.pocketline button:active,
.pl-doors a:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){
  button.word:active,a.word:active,.editor .sys:active,.sendunit .btn.send:active,
  .pocketline button:active,.pl-doors a:active{transform:none}
}
/* printed, not pressed: a mark on the card that says something */
.facets .mark{font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.1em;color:var(--pencil);padding:12px 0 4px}
.facets .mark.clerk{color:var(--clerk)}

/* One line, quieter: the open card is lines under hairlines, each with
   an eyebrow; tracked capitals are the house's voice
   only; everything chosen or read prints plain, chosen told from unchosen
   by ink against pencil; no box has a fill or a border. */
.editor{margin-top:10px;padding:0;background:transparent}
.editor .row{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:12px 0;border-top:1px solid var(--rule)}
.editor .row:last-child{padding-bottom:4px}
/* trash this, alone at the foot: no rule over it, 24px of air above it */
.editor .row.trashrow{border-top:0;padding-top:24px}
.editor .row > .mono{color:var(--pencil);flex:none;padding:0}
/* the value column takes the card's width, whatever the card's width is:
   a card in an hour lane on the day page is the lane, not the sheet, so
   the column must be free to shrink to it and let its own rows wrap */
.editor .row > div{display:flex;flex-wrap:wrap;gap:10px 20px;flex:1;min-width:0;align-items:baseline}
/* the NUDGE row carries the bell's own sheet, its rows stacked as they
   stand in the pop-out, no wider than the pop-out */
.editor .row > div.nudgebox{display:block;max-width:420px}
.editor .nudgebox .nudgerows{min-width:0}
.editor .word.pick{border:none;background:none;padding:0 0 4px;margin:0;font-family:var(--ui);font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--pencil);cursor:pointer}
/* chosen takes the pen under a pen hairline, as every row of choices on
   the sheet does */
.editor .word.pick.on{background:none;color:var(--pen);font-weight:600;
  border-bottom:1px solid var(--pen)}
/* a fact let go of: still printed, in pencil, ruled through until the fold */
.editor .word.pick.letgo{background:none;color:var(--pencil);font-weight:400;text-decoration:line-through}
.editor .word.pick.letgo:hover{color:var(--pencil)}
/* the bar's words wear the house's one dress: what fires is ink under
   the 1px hairline, what declines stays pencil and bare, the clerk's
   own takes the line in her green */
.editor .sys{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--ink);padding:9px 0 4px;margin-bottom:6px;cursor:pointer}
.editor .sys.pencil{color:var(--pencil);border-bottom-color:transparent}
.editor .sys.green{color:var(--clerk);border-bottom-color:var(--clerk)}
.editor .sys.big{font-size:12px;letter-spacing:.11em}
.editor .bar > div{justify-content:space-between;width:100%}
.editor .label-line{font-family:var(--ui);font-size:13.5px;border:none;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);min-width:110px;padding:2px 0}
.editor .label-line:focus{outline:none;border-bottom-color:var(--pen)}
@media(max-width:520px){
  .editor .row{flex-direction:column;gap:5px}
  .editor .row > .mono{flex:none;padding-top:0}
}

/* ---------- the shell: the sheet on the left, the desk on the right ---------- */
body{max-width:none;padding:0}
.shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:100vh}
/* --sheet-pad is the sheet's own side margin, named because the in-hand
   ribbon bleeds out through it to show the next card's paper (below) */
.main{--sheet-pad:34px;padding:34px var(--sheet-pad) 80px;width:100%;max-width:880px;margin:0 auto}

/* ---------- the masthead: date of record, sheet number, the search ---------- */
.masthead{margin-bottom:30px}
/* The running head, as the phone prints it: MAITLAND · DAY № n, in
   Soehne Halbfett -- the weight of SEARCH opposite -- at the LEFT
   end of the rule that opens the sheet, with the sheet's own tool at the
   right end. One printing per layout. */
.mast-row{display:flex;justify-content:space-between;align-items:flex-end;
  color:var(--pencil);border-bottom:2px solid var(--ink);padding-bottom:7px}
.mast-mark{font-family:var(--mark);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);
  flex:1 1 auto;min-width:0}
/* The name wears no line: it is print in the masthead's own hand and
   still the home door. The row's 2px ink rule runs the whole width,
   attached to no word; the tool opposite wears the thin underline of a
   word that acts (decisions/2026-10-05-polish/RULING.md, item 8). */
.mast-home{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  color:var(--pencil);text-decoration:none}
.mast-home:hover{color:var(--pen)}
/* The list mark prints at phone width only. A wide sheet's desk column
   already stands open beside the
   name, so a strip-pulling glyph there would promise a door that is
   already out; the mark earns its place only where the name is what
   opens it -- narrow, below, where the strip is closed. */
.mast-home svg{display:none}

.mast-main{display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;padding-top:14px;flex-wrap:wrap}
/* One 2px ink rule under the block, on Today and on the day page alike.
   It is the block's foot, so it prints only where
   the block does -- `dated` is on the masthead's row on Today and nowhere
   else, and every other screen keeps the views line standing bare. The
   air below is 10 measured from the BASELINE the numeral and the second
   line share, and the numeral's own .82 line box already carries about
   four of them under that baseline, so the padding is the remainder --
   measured on the page, like everything else in this block. */
.mast-main.dated{padding-bottom:6px;border-bottom:2px solid var(--ink)}
.datestamp{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  text-decoration:none;color:inherit}

.mail-flag{display:flex;align-items:center;gap:8px;color:var(--pen);cursor:pointer;
  padding:10px 0 0}
.mail-flag i{width:8px;height:8px;background:var(--pen);flex-shrink:0}
.mail-flag:hover{text-decoration:underline}
/* The numeral in the pen: the block is today's. 78px, the phone's 70 in
   the web's own scale (decisions/2026-09-16-the-date-block/). */
.daynum{font-family:var(--display);font-weight:700;font-size:78px;line-height:.82;
  letter-spacing:-.04em;color:var(--pen);font-variant-numeric:tabular-nums}
/* The top of the day is the top of the numeral: cap top to cap top, not
   frame to frame. Measured on the rendered face and never reasoned from
   the numbers: the weekday's line-height is `normal`, which every face
   answers out of its own hhea metrics, so a change of face moves the
   half-leading and with it the ink, and reasoning from cap height alone
   was out by almost 3px. The method, for whoever does this next: measure
   each element's ink top (canvas actualBoundingBoxAscent against its own
   line box), sweep this margin, and take the value where the two cap tops
   land flush; the sweep is not 1:1, Chrome snapping line boxes as it
   goes. Anything that moves either line-height, either font-size or the
   face moves this, and it is per font-size: the narrow sheet's smaller
   numeral has its own pull below. */
/* And the two lines span the numeral: the weekday's cap top is on the
   numeral's ink top and the month's baseline is on the numeral's
   baseline, and the sizes and the gap are whatever makes that come out.
   The two sizes are the design's, 25 over 17.5, the first line still the
   larger and heavier. The gap is not a design number: it is what the
   numeral's cap height has left once the weekday's cap, the weekday's
   descender and the second line's ascender have taken their share.
   Solved off the rendered face, never reasoned: Chrome's `normal` line
   box for Soehne measures 1.782 em (ascent 1.2929, descent .489) where
   CoreText answers 1.594 for the same file. The span to fill is the
   numeral's cap height, .718 em, which in Soehne is also its figure
   height, so the span is the same whatever today's date is; it is the
   basis the phone's `Masthead` uses.
   Move a size and both of these move: the sweep answers 15.385 and
   -6.745 at 78 / 25 / 17.5. The method: sweep the value, read each
   element's baseline off a zero-height inline-block with
   vertical-align:baseline, its ink top off the canvas's
   actualBoundingBoxAscent, and take the value where the offset crosses
   zero. The zoom is taken out of the reading: the desk's size setting is
   `document.body.style.zoom` (face/look.js), so a getBoundingClientRect
   is in zoomed pixels where getComputedStyle and the canvas answer in
   CSS pixels, and the canvas's ascent is multiplied by the zoom.
   The second line takes the numeral's own .82: a squeezed line box puts a
   flex row's whole distance into the gap rather than half of it into the
   line's own leading, which is why the block's foot is within a few
   pixels of the baseline rather than a line's descent below it. */
.datewords{display:flex;flex-direction:column;gap:15.385px;margin-top:-6.745px}
.dow{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.01em;
  color:var(--pen)}
/* named through `.datewords` so it outranks `.pl-doors`, which sets the
   11px a head's date names wear everywhere else and stands later in this
   sheet */
.datewords .dateplaces{font-size:17.5px;line-height:.82}
/* SEARCH: the sheet's own tool at the right end of the running head's
   line, in the folio's dress -- the glass and the tracked caps at the
   folio's tool size, the WORD under the house's thin underline, the
   word's own width, as every word that acts wears it. It stands clear of
   the row's own 2px rule, which belongs to no word (decisions/2026-10-05-
   polish/RULING.md, item 8). The underline is drawn on the word's text,
   so it takes no layout and the glass stays centred on the word. The hit
   is the row's full height, never under 32px. */
.mast-tool{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  padding:12px 0 7px;border:0}
.mast-tool > span{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-skip-ink:none}
.mast-tool:hover{opacity:.68}
.findglass{display:flex;flex-shrink:0}
/* the views line keeps the sheet's right edge whether or not the date
   block stands beside it -- it prints on Today alone */
/* The box takes the row's own width, so a row that fits stands flush with
   the right margin, and a row that does not wraps inside it, left-aligned
   (decisions/2026-09-28-review-leftovers/RULING.md, the list B amendment,
   item 7). */
.mast-find{flex:0 1 auto;min-width:250px;max-width:430px;margin-left:auto}
.mast-under{overflow:hidden}
/* The views line: the phone's five bar places said in words. Plain
   Title Case at the reading size, never tracked caps -- the
   bar's own words are plain, and capitals here read as a different
   instrument. It is a row of chosen words, so it takes the choice row's
   dress rather than the door's: the place you are in wears the pen, the
   rest the ink. It wraps rather than shrinking, left-aligned. Every word
   carries the dot before it, and the row stands one dot's cell to the
   left of its box, whose overflow clips that cell: the dot that opens
   each line is cut away, so a wrapped line never starts on one. */
.mast-views{display:flex;flex-wrap:wrap;justify-content:flex-start;
  align-items:baseline;font-family:var(--ui);font-weight:500;font-size:12.5px;
  margin-left:-18px}
.mast-views .vword{display:inline-flex;align-items:baseline;white-space:nowrap}
.mast-views a{cursor:pointer;color:var(--ink);padding:7px 0}
.mast-views a:hover,.mast-views a.on{color:var(--pen)}
.mast-views .sep{color:var(--rule);display:inline-block;width:18px;text-align:center}
#results{margin-top:14px}
/* The search screen's own field: the house's underline, which is what
   every other field on the sheet already is. */
.searchfield{margin-top:14px}
/* the field and its `clear`, on one line under the house's underline,
   which runs under both as the phone's field line does */
.searchline{display:flex;align-items:baseline;gap:14px;margin-top:14px;
  border-bottom:1px solid var(--rule)}
.searchline:focus-within{border-bottom-color:var(--pen)}
.searchline .searchfield{flex:1;min-width:0;margin-top:0;border-bottom:0}
.searchline .searchclear{margin-bottom:0;padding-top:9px;flex-shrink:0}
.searchline .searchclear[hidden]{display:none}
/* The clerk saying she has it. */
.clerkword{font-family:var(--mono);font-size:12px;color:var(--clerk);
  margin:12px 0 0}

/* ---------- the desk column ---------- */
/* The column scrolls on its own; bottoming out hands the wheel to the
   sheet (no overscroll containment, deliberately -- it is not to be put
   back). Its scroll position is carried across a
   re-render in render() -- the shell is rebuilt whole, which would
   otherwise drop the column to the top on every tick and capture. */
.desk{position:sticky;top:0;height:100vh;overflow-y:auto;
  overscroll-behavior-y:auto;
  scrollbar-width:none;
  padding:34px 24px 24px;
  border-left:1px solid var(--rule);background:var(--paper);
  display:flex;flex-direction:column;gap:0}

.deskhead{color:var(--pencil);border-bottom:1px solid var(--rule);
  padding-bottom:5px;margin-top:22px}
.drows{display:flex;flex-direction:column}
.drow{display:flex;flex-direction:column;gap:2px;padding:9px 0;cursor:pointer;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.drow:hover .drow-name{color:var(--pen)}
.drow-line{display:flex;align-items:baseline;gap:9px}
.drow-num{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--pencil);width:18px;flex-shrink:0}
.drow-name{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.drow.on .drow-name{color:var(--pen)}
.drow.quiet .drow-name{color:var(--pencil);font-weight:400}
/* Mail under the lists: a quiet row with no numeral, a little apart */
.drows.mailrow{margin-top:6px}
.drow.quiet.on .drow-name{color:var(--pen)}

li.entry.open,li.entry.editing{background:var(--card-hi)}
.entry-title[data-opencard]{cursor:pointer}
.entry-title[data-opencard]:hover{color:var(--pen)}
.card-title-write{width:100%;border:none;font-family:var(--body);font-weight:500;
  font-size:19px;line-height:1.4;color:var(--ink);background:transparent;
  padding:0 0 6px;border-bottom:1px solid var(--rule)}
.card-title-write:focus{outline:none;box-shadow:none;border-bottom-color:var(--pen)}
.card-write{width:100%;border:none;border-bottom:1px solid var(--rule);resize:none;
  font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);
  background:transparent;padding:0 0 8px;overflow:hidden;min-height:52px}
.card-write:focus{border-bottom-color:var(--pen);outline:none;box-shadow:none}
.card-save{color:var(--pencil);display:block;margin-top:3px;min-height:12px}
.from-desk{display:block;color:var(--pencil);margin-bottom:5px;letter-spacing:.1em}
.part-of{display:block;color:var(--pencil);font-size:14px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkform{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px 14px;
  background:var(--paper-hi);border:1px solid var(--rule);max-width:430px}
.linkform .mono{color:var(--pencil)}
.linkform input{border-bottom:1px solid var(--rule);font-size:15px}
.set-name{display:flex;align-items:baseline;gap:12px;margin:4px 0 2px}
.set-name .mono{color:var(--pencil);flex-shrink:0}
.set-name input{border-bottom:1px solid var(--rule);font-family:var(--body);font-size:17px;
  flex:1;min-width:0}
.set-name input:focus{border-bottom-color:var(--pen)}
.keyscreen{max-width:520px;margin:48px auto;padding:0 8px}
.keyscreen .lead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pencil)}
.keyscreen h2{margin:6px 0 10px}
/* the sentence stands under the way in, a breath below the field's line */
.keyscreen p.written{margin:22px 0 16px;line-height:1.5}
.keyfoot{margin-top:36px}
.keyfoot .set-note{margin:0 0 10px}
.keyrow{display:flex;gap:8px;align-items:stretch}
.keyrow .word + .word{margin-left:10px}
/* where the phrase lives, under the field: a line of fact, in pencil */
.keyscreen .keywhere{font-family:var(--body);font-size:15px;color:var(--pencil);margin:12px 0 0;line-height:1.45}
.keyfield{flex:1;min-width:0;font-family:var(--body);font-size:16px;text-transform:none;letter-spacing:0;padding:8px 2px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink)}
.keyfield:focus{outline:none;border-bottom-color:var(--pen)}
/* The twenty-four words: numbered, in the hand the owner writes in, two
   columns so the whole phrase is read without scrolling. Mirror of
   PhraseSheet in ios/Dashboard/Recovery.swift. */
.phrase{margin:14px 0 16px;padding:0;list-style:none;counter-reset:phrase;
  columns:2;column-gap:22px;max-width:340px}
.phrase li{counter-increment:phrase;font-family:var(--body);font-size:17px;
  color:var(--ink);line-height:1.7;break-inside:avoid}
.phrase li::before{content:counter(phrase);font-family:var(--ui);font-size:11px;
  color:var(--pencil);display:inline-block;width:20px;text-align:right;
  margin-right:8px}
.pairqr{margin:14px 0}
.pairqr .qr{width:168px;height:168px;background:#fff;padding:6px}
.pairqr .qr svg{width:100%;height:100%;display:block}
/* the pairing number the phone will show: figures two screens can be
   compared by, the three and three kept apart by the space in them */
.pairqr .paircode{font-family:var(--ui);font-weight:600;font-size:26px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink);
  margin:12px 0 4px;white-space:pre}
.set-note{font-family:var(--ui);font-size:11px;color:var(--pencil);margin:6px 0 2px;
  line-height:1.5}
/* The tabs are tabs, not a choice row: the page's own rule turning up
   around the chosen word, broken under it, two verticals rising from
   the break's ends. A rule that turns up means a page stood in
   (decisions/2026-09-16-settings/RULING.md).

   The rule is painted and not a border, because every line must carry
   its own and a flex container has one border-bottom however many lines
   it wraps to -- so a wrapped row's first line had none and could not
   carry the break. One 1px band every 46: a 36 row and the 10 between.
   The trailing 1px of padding is what keeps the last line's band inside
   the box to be painted at all, and the 20 beneath collapses with the
   first eyebrow's own 16 to the ruled 20. Every button carries a
   bottom border, transparent where the page is not the one stood in, so
   all five are the same 37 and the -1px margin lands them alike. */
.set-tabs{display:flex;flex-wrap:wrap;gap:10px 0;margin:14px 0 20px;padding-bottom:1px;
  background:repeating-linear-gradient(to bottom,
    transparent 0 36px, var(--rule) 36px 37px, transparent 37px 46px)}
.set-tabs button{font-family:var(--ui);font-weight:400;font-size:12.5px;line-height:16px;
  letter-spacing:normal;text-transform:none;color:var(--pencil);
  padding:14px 9px 6px;margin-bottom:-1px;
  border:none;border-bottom:1px solid transparent;background:none;cursor:pointer}
/* the break is the sheet's own stock laid over the line's rule; the two
   verticals are 1px x 30, drawn from the padding box's floor, which the
   bottom border has put exactly on the rule, and the third gradient is
   the lid across the cell's full width, seated 6 below the row's top so
   the box is 30 and its corners close. On a wrapped row every line is
   its own box: each button's background is
   measured from its own padding box, so the lid lands 16 below the rule
   of the line above it (10 of gap and 6) without a rule of its own. */
.set-tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--paper-hi);
  background:linear-gradient(var(--rule),var(--rule)) left bottom/1px 30px no-repeat,
    linear-gradient(var(--rule),var(--rule)) right bottom/1px 30px no-repeat,
    linear-gradient(var(--rule),var(--rule)) left 6px/100% 1px no-repeat}
/* The tabs' needle is the box itself: once the row wears it, the chosen
   button draws none, and the box -- break, verticals and lid, the same
   three strokes -- slides from the page left to the page opened
   (needles() in face/shell.js). */
.set-tabs.needled button.on{background:none;border-bottom-color:transparent}
.set-tabs .needle.box{border-bottom:1px solid var(--paper-hi);
  background:linear-gradient(var(--rule),var(--rule)) left bottom/1px 30px no-repeat,
    linear-gradient(var(--rule),var(--rule)) right bottom/1px 30px no-repeat,
    linear-gradient(var(--rule),var(--rule)) left 6px/100% 1px no-repeat}
.drow.dragging{opacity:.35}
/* reordering: the rows are lifted by a drag and open nothing, so the hand
   is told they move; `reorder` / `done` stands at the foot of the lists */
.drow.moving{cursor:grab}
.drow.moving:hover .drow-name{color:inherit}
.desk .reorder{margin:6px 0 0}
.drow.dropbefore{box-shadow:inset 0 2px 0 var(--pen)}
.drow.dropafter{box-shadow:inset 0 -2px 0 var(--pen)}
.roomform{display:flex;flex-direction:column;gap:8px;padding:10px 0;
  border-bottom:1px solid var(--rule)}
.roomform-acts{display:flex;gap:8px}
/* a refused `make it`: one line in the hand's own italic, under the field */
.roomform-said{margin:0;font-family:var(--body);font-style:italic;font-size:15px;color:var(--ink)}
.month{padding-top:10px}
.month-name{display:flex;align-items:baseline;gap:7px;color:var(--ink);margin-bottom:8px}
.month-name span:first-child{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;text-transform:none}
.month-name span:last-child{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--pencil)}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mdow{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--pencil);
  padding-bottom:3px}
.mday{font-family:var(--ui);font-size:14px;font-weight:700;color:var(--ink);padding:7px 0;cursor:pointer;font-variant-numeric:tabular-nums}
.mday:hover{background:var(--pen-soft)}
.mday.dated{text-decoration:underline;text-decoration-color:var(--pen);
  text-underline-offset:3px}
/* today outlined, as on the Calendar; no underline inside the box */
.mday.today{color:var(--pen);box-shadow:inset 0 0 0 1.5px var(--pen);text-decoration:none}
.desk-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* the folio line: on a narrow sheet the paper's name opens
   its own index, printed into the rule that opens the page — the same
   treatment as the phone. Wide sheets keep the desk column and need
   no folio. */
.folio{display:none;justify-content:space-between;align-items:flex-end}
/* A sheet with a tool of its own wears the folio line at every width:
   the notebook's page has no head and no masthead tools, so CONTENTS —
   its one door — stands at the folio's right end, alone on a wide sheet
   where the desk column is already the way back. */
.folio.tooled{display:flex;border-bottom:2px solid var(--ink);margin-bottom:16px}
/* SETTINGS in the folio's left seat: hidden by default, since a wide
   sheet already carries the desk
   column's own Settings word; shown narrow, below, in the folio-tool
   dress SEARCH wears on the masthead's line. */
.folio-settings{display:none}
/* CONTENTS wears the mast-tool dress in the markup, so all it needs here
   is its place at the right end; it stands over the folio's rule, clear
   of it, as SEARCH does over the masthead's. */
.folio-tool{margin-left:auto}
.scrim{display:none}
@media(max-width:899px){
  body{overflow-x:hidden}
  .shell{grid-template-columns:minmax(0,1fr)}
  .desk{position:fixed;right:0;top:0;bottom:0;width:290px;z-index:30;height:auto;
    transform:translateX(101%);transition:transform .22s ease;
    border-left:2px solid var(--rule)}
  .desk.open{transform:none}
  .scrim.on{display:block;position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 28%, transparent);z-index:25}
  .folio{display:flex;border-bottom:2px solid var(--ink);margin-bottom:16px}
  /* SETTINGS stands at the RIGHT end on a narrow sheet, in the mast-tool
     dress -- glyph, then the word under its thin underline -- and a
     CONTENTS tool keeps its place beside it, at the same margin the old
     Index door left it. */
  .folio-settings{display:inline-flex;margin-left:auto}
  .folio.tooled .folio-tool{margin-left:22px}
  /* the folio's 2px rule opens the sheet; the date block follows it
     without a second rule, as on the phone */
  .mast-row{border-bottom:0;padding-bottom:0}
  /* the list mark shows only here -- see .mast-home svg above */
  .mast-home svg{display:block}
  .main{--sheet-pad:20px;
        padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
        calc(80px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
  .desk{padding-top:calc(34px + env(safe-area-inset-top));
        padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .daynum{font-size:59.5px}   /* the same 1.0773, at phone width */
  /* The narrow numeral is smaller, so its two lines have less to span:
     .718 x 59.5 = 42.72px against the wide sheet's 56.00. The two sizes
     keep the wide sheet's own 78 : 25 : 17.5, so the block is that block
     photographically reduced, and the gap and the pull are swept again at
     the smaller size rather than scaled -- Chrome snaps line boxes as it
     goes, so the two are never one ratio apart. */
  .dow{font-size:18.75px}
  .datewords .dateplaces{font-size:13px}
  /* a smaller numeral sits differently in its line box, so the pull that
     puts the weekday's cap flush is its own. Measured, not scaled. */
  .datewords{gap:12.16px;margin-top:-4.7px}
  .mast-main{gap:16px}
  /* the wide sheet's floor under the views line would push it past the
     right margin on the narrowest phones; here it wraps inside the sheet */
  .mast-find{min-width:0;max-width:100%}
  /* On a narrow sheet the views line cannot stand beside the block, so it
     wraps -- and wrapped BELOW it, it came between the block and the rule
     that closes it. It goes above instead, which is where the day page
     prints it at this width, so the two pages read the same: the line of
     places, then the date, then its rule. */
  .mast-main.dated .mast-find{order:1}
  .mast-main.dated .datestamp{order:2}
}

/* ---------- the date line and capture ---------- */


/* ---------- offers: sorted by energy, never by priority ---------- */
.offers{margin-top:40px}
.sec-rule{padding-top:2px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sec-rule .mono{color:var(--pencil)}
/* the desk's standard eyebrow -- same register as JUST CAPTURED. The
   pile numerals below do the display work: tiny label, huge number,
   the Stendig way. */
.offer-head{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pencil)}
/* the numeral row: a selector, not a scoreboard */
.pile-row{display:flex;gap:30px;align-items:baseline;border-bottom:1px solid var(--rule);
  padding-bottom:9px;margin-bottom:16px}
/* The piles' tilde, `~10` and `~30`, on the figures' midline
   (decisions/2026-10-09-site-consistency/RULING.md, item 6): Soehne draws
   it at the operators' height, below the middle of the figures, so it is
   lifted by half the cut's cap height less the middle of its own ink,
   measured from each cut (cap height 718 of 1000; the tilde's ink centred
   at 312 in Buch, 315 in Kraftig, 319 in Halbfett, 322 in Dreiviertelfett).
   Keyed by the weight each place sets it in. Mirror of `Tilde` in
   ios/Dashboard/Look.swift, which reads the same two numbers from the font. */
.tilde{position:relative;top:-.047em}
.fval .tilde,.tline-fact .tilde{top:-.0435em}
.word.pick.on .tilde,.editor .word.pick.on .tilde,.spec-foot b .tilde,.tfold-name .tilde{top:-.040em}
.pile-sel b .tilde{top:-.0365em}
.pile-sel{display:inline-flex;align-items:baseline;gap:6px;background:none;border:0;cursor:pointer;padding:0}
.pile-sel b{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;
  color:var(--pencil);font-variant-numeric:tabular-nums}
/* The chosen numeral takes the pen: ink against pencil at this size is
   one hue's difference in tone, and the pen is the sheet's own mark for
   the current thing. No caps and no line -- a line under a numeral this
   big is a bar -- and no hover, the pen reading as chosen. */
.pile-sel.on b{color:var(--pen)}
.pile-sel i{font-style:normal;font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.02em;color:var(--pencil)}

.sec-head{margin:6px 0 4px}

/* ---------- ink: the hairline box ---------- */
/* An .ink box is a plain hairline box, square and flat. Cards lie flat:
   nothing on the sheet is drawn to look hand-made, because variation for
   its own sake reads as sloppy rather than considered. */
.ink{position:relative;border:1px solid var(--rule);border-radius:0}
.ink.faint{border-color:var(--rule);border-style:solid}
/* the open card is lines under hairlines: no box of its own */
.editor.ink{border:0}

/* ---------- the binder: the spine of chapters ----------
   The numbered run is the binder. The numeral is a door -- ink under a
   1px ink hairline, the one dress every word that fires wears -- because
   a chapter's place is a fact, and a fact is the
   door to its own small sheet (BEFORE); its hit is the row's full
   height and stands a thumb's width off the title's own door. */
.spine{list-style:none;margin:20px 0 18px;padding:0;counter-reset:ch}
.chapter{display:grid;grid-template-columns:30px 1fr;gap:0 14px;align-items:stretch;
  border-bottom:1px solid var(--rule)}
.ch-num{display:block;font-family:var(--ui);font-weight:600;font-size:12.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;background:none;border:0;
  padding:17px 0 13px;min-height:34px;cursor:pointer;
  /* the rule has to hug the numeral, not the 30px column it is set in,
     so this one door is drawn as a decoration: 1px of ink at the word's
     own 4px offset, which is the same line by another means */
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ch-open{text-align:left;display:block;min-width:0;padding:13px 0}
.ch-title{display:block;font-size:19px;line-height:1.35}
.ch-open:hover .ch-title{color:var(--pen)}
/* The chapter's report, in plain case as the phone prints it: tracked
   caps made a line of the person's own words read as the sheet's
   furniture. Their first line, where it stands, is in their serif. */
.ch-meta{display:block;color:var(--pencil);margin-top:3px;font-family:var(--ui);
  font-size:11.5px;font-weight:500}
.ch-meta .ch-words{font-family:var(--body);font-size:15px;font-weight:400}

/* The rite, where the list ends: an acting word, and after a binding the
   date it was last bound, in ink beside it -- never a count of bindings. */
.rite{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.bound{font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink)}

/* ---------- the proof: the book, before it leaves ----------
   A sheet over the binder printing the export's own lines in the
   export's own order -- the file, not a picture of it -- with the two
   carrying words on the 2px rule at its foot, where it actually goes. */
.proof{position:fixed;z-index:70;inset:0;overflow:auto;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  display:flex;justify-content:center;align-items:flex-start;
  padding:calc(28px + env(safe-area-inset-top)) 16px calc(36px + env(safe-area-inset-bottom))}
.proof-sheet{background:var(--paper);border:1px solid var(--rule);border-radius:0;
  width:100%;max-width:540px;padding:26px 26px 20px}
.pf-h1{font-family:var(--body);font-weight:400;font-size:27px;line-height:1.15;margin:0}
.pf-let{color:var(--pencil);font-family:var(--body);font-style:italic;font-size:13.5px;
  margin:7px 0 0}
.pf-h2{font-family:var(--body);font-weight:500;font-size:19px;line-height:1.25;
  margin:22px 0 0;padding-top:10px;border-top:1px solid var(--ink)}
.pf-h3{font-family:var(--body);font-weight:500;font-size:16px;margin:16px 0 0}
.pf-p{font-family:var(--body);font-size:15px;line-height:1.5;margin:10px 0 0}
.pf-q{font-family:var(--body);font-size:13.5px;line-height:1.45;color:var(--pencil);
  margin:8px 0 0;padding-left:16px}
.pf-li{font-family:var(--body);font-size:14px;line-height:1.45;margin:6px 0 0;padding-left:16px}
.proof-foot{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;
  margin-top:22px;padding-top:14px;border-top:2px solid var(--ink)}

/* ---------- writing surface ---------- */
.chap-title{width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-weight:700;font-size:clamp(26px,6vw,38px);
  letter-spacing:-.03em;padding:6px 2px 10px;margin:18px 0 0}
.chap-title:focus{outline:none;border-bottom-color:var(--pen)}
.chap-text{width:100%;min-height:52vh;background:transparent;border:none;resize:vertical;
  font-family:var(--body);font-size:19px;line-height:1.62;
  padding:18px 0 8px;margin:0}
.chap-text:focus{outline:none}
.chap-bar{display:flex;justify-content:space-between;gap:14px;color:var(--pencil);
  border-top:1px solid var(--rule);padding-top:10px}

/* ---------- carrying it onward ---------- */
.carry{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule)}
.carry-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.carry-note{color:var(--pencil)}
.lead + .entries{margin-top:10px}
.carry-box{width:100%;min-height:190px;margin-top:14px;background:var(--paper-hi);
  border:1px solid var(--rule);border-radius:0;
  padding:14px;font-family:var(--ui);font-size:12.5px;line-height:1.6;
  letter-spacing:0;text-transform:none;resize:vertical}
.carry-box:focus{outline:none;border-color:var(--pen)}
.facets .mark.busy{animation:clerkpulse 1.6s ease-in-out infinite}
@keyframes clerkpulse{50%{opacity:.45}}
.lead-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:40px 0 -8px}
.lead-row .lead{margin:0}

/* ---------- people in a case file ---------- */
.people{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.person{padding:10px 16px;background:var(--paper-hi);text-align:left;cursor:pointer}

/* ---------- the clerk's answer ---------- */
.clerkword{color:var(--clerk);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* The disclosure, said once before the clerk's first errand leaves. The
   house's own words about what goes where, so ink and the paper's hand --
   never the clerk's green -- with an acting word and a declining one under
   it. It stands in the flow, where the control it is holding up sits. */
.disclosure{flex-basis:100%;margin:6px 0 2px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:0 18px}
.disclosure p{flex-basis:100%;margin:0 0 2px;max-width:56ch;font-size:14px;
  line-height:1.5;color:var(--ink)}

/* The clickwrap, asked again. The box beside the button that makes an
   account lives on the sign-in sheet; this is the desk's own half, for a
   desk meeting Terms it has never agreed to. It stands over the sheet
   rather than in it -- the fact pop-out's own way -- because it belongs
   to no screen. The square is the card's own tick (.check above): the
   sheet prints no browser furniture, here or anywhere. */
.legalask{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:20px;overflow:auto;
  /* OPAQUE, never a tinted scrim: nothing on the sheet may ghost through
     anything, so this is the sheet's own paper laid over it -- the key
     screen's shape, with one card standing on it. */
  background:var(--paper)}
.legalask-paper{background:var(--card);border:1px solid var(--rule);
  border-radius:0;padding:22px 24px 16px;width:460px;max-width:100%;
  margin:auto}
.legalask-head{font-family:var(--body);font-size:17px;line-height:1.45;
  color:var(--ink);margin:0 0 12px}
.legalwrap{--tick-words:15px;--tick-lh:1.45;
  display:flex;gap:10px;align-items:flex-start;margin:0 0 18px}
.legalwrap .written{flex:1;min-width:0;font-size:15px;line-height:1.45;margin:0}
/* The square is a mark, not a control: it takes no click, and the only
   thing that sets it is the Agree on the bar under the document's own
   words. A box that could be ticked without the page it is about ever
   standing open would make the assent a formality, which is the one
   thing a clickwrap may not be. */
.legalwrap .check{flex-shrink:0}
/* The document's own name inside the sentence: a door read by its
   UNDERLINE alone, in the sentence's own face -- a control set inside a
   sentence takes the head date-names' exception rather than the hung
   hairline and tracked caps, which would print a shouted phrase in the
   middle of a paragraph. */
.legalwrap .legaldoor{font:inherit;color:var(--ink);text-transform:none;
  letter-spacing:0;display:inline;padding:0;margin:0;border:0;
  background:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.legalask-row{margin:4px 0 0;display:flex;gap:18px;align-items:baseline}
/* THE DOCUMENT, in its own words, over everything: the way out on a bar
   at the head, one scroll, and Agree alone on a bar pinned to the foot. */
.legaldoc{position:fixed;inset:0;z-index:90;background:var(--paper);
  display:flex;flex-direction:column;align-items:center}
.legaldoc-paper{flex:1;overflow:auto;width:100%;max-width:640px;
  padding:26px 22px 0;font-family:var(--body);color:var(--ink)}
.legaldoc-paper h2{font-family:var(--ui);font-weight:700;font-size:24px;
  letter-spacing:-.02em;margin:0 0 14px}
.legaldoc-paper h3{font-family:var(--ui);font-weight:600;font-size:15px;
  letter-spacing:.02em;margin:22px 0 6px}
.legaldoc-paper h4{font-family:var(--ui);font-weight:600;font-size:13px;
  letter-spacing:.02em;margin:18px 0 5px}
.legaldoc-paper p{font-size:16px;line-height:1.55;margin:0 0 11px}
.legaldoc-paper ul{margin:0 0 11px;padding-left:20px}
.legaldoc-paper li{font-size:16px;line-height:1.55;margin:0 0 5px}
.legaldoc-head{width:100%;max-width:640px;padding:12px 22px 10px;
  border-bottom:1px solid var(--rule);margin:0}
.legaldoc-foot{width:100%;max-width:640px;padding:12px 22px 16px;
  border-top:1px solid var(--rule);margin:0;text-align:center}
/* Agree, on the bar pinned under the words and in reach from the first
   line, so nobody has to scroll through to agree: the one control on the
   desk that is not a house word, a filled button in the manner of the
   phone's system button (.borderedProminent, large) -- the pen's ink for
   its fill and the paper's for its letters, so it reads in every Look's
   night as in its day (the owner, Oct 5, 2026;
   decisions/2026-10-04-first-screen/RULING.md). The sign-up panel's own
   is login.html's, said again in public.html. Agreed, the word is print
   -- the chosen thing's pen under a pen hairline, nothing to press. */
.legaldoc-foot button.agreebar{display:block;width:100%;min-height:50px;
  padding:0 16px;margin:0;border:0;border-radius:12px;background:var(--pen);
  color:var(--paper);font-family:var(--ui);font-size:17px;font-weight:600;
  letter-spacing:0;text-transform:capitalize;line-height:1.2;cursor:pointer}
.legaldoc-foot button.agreebar:hover{filter:brightness(1.08)}
.legaldoc-foot button.agreebar:active{filter:brightness(.92)}
.legaldoc-foot button.agreebar:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.legaldoc-foot .word.printed{cursor:default;padding-top:0;font-size:17px;
  display:inline-block;margin:13px 0}

.answer{padding:22px 24px;background:var(--paper-hi)}
.answer > .mono{color:var(--pencil);display:block;margin-bottom:10px}
/* what she'd pull out of a notebook page: one offer, one way to take it */
.take-offer{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.take-made{color:var(--clerk);font-size:11px;letter-spacing:.06em}
.answer-body{font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--clerk);max-width:62ch}
.answer .entries{margin-top:14px}

/* ---------- the clerk's hand: typed, and in green ----------
   The author writes -- serif, by hand, in ballpoint blue. The clerk types --
   monospace, on a machine, in green ink. Purple sat too close to the blue to
   tell the two apart at a glance; green is as far from it as an ink can
   reasonably go without becoming a warning. And a secretary of 1962 would
   never have handwritten in your margin: she would have typed it. Typescript
   is also simply easier to read than script, which settles it. */
:root{--clerk:#21684A;--clerk-soft:rgba(34,121,90,.18);--onionskin:#EEE7D6}
.clerk-ink{display:block;color:var(--clerk);margin-top:11px;
  font-family:var(--mono);font-size:13.5px;line-height:1.72;letter-spacing:-.1px}
.clerk-ink p{margin:0 0 9px;max-width:62ch}
.clerk-ink p:last-child{margin-bottom:0}
.clerk-ink strong{font-weight:500;color:var(--clerk)}
.clerk-list{list-style:none;margin:0 0 9px;padding:0}
.clerk-list li{position:relative;padding-left:16px;margin:0 0 5px}
.clerk-list li::before{content:"–";position:absolute;left:0;opacity:.7}
.answer-body .clerk-list{margin-bottom:12px}
.clerk-label{display:block;color:var(--clerk);margin-bottom:5px;white-space:normal}
/* The words that mean a drawer: her hand, under the drawer's name, with
   the one door beside it. */
.room-words{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:24px 0 0;
  font-family:var(--mono);font-size:11px;color:var(--clerk);line-height:1.6}
.room-words .word{font-size:11px}
.words-line{font-family:var(--mono);font-size:11px;color:var(--clerk);background:none;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:4px 0;width:min(100%,44ch)}
.words-line:focus{outline:none;border-bottom-color:var(--pen)}
/* Contacts: a name in ink, the desk beneath it in pencil, and the
   two doors. A calling card is a line to copy or to paste -- there is no
   directory, because a house may hold strangers. */
.contact{margin:10px 0 12px}
.contact-name{font-family:var(--body);font-size:14px;color:var(--ink)}
.contact-desk{font-size:11px;color:var(--pencil);margin-top:1px}
.contact-line{font-family:var(--mono);font-size:11px;color:var(--ink);background:none;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:6px 0;width:min(100%,52ch)}
.contact-line:focus{outline:none;border-bottom-color:var(--pen)}
/* A sender blocked, said in pencil beside `unblock`, a fact and not a
   control; and the open card's row of `block` and `report` under its From. */
.blocked-note{font-family:var(--ui);font-size:11px;color:var(--pencil)}
.sender-acts{margin:0 0 8px}
.cardsay{font-family:var(--mono);font-size:11px;color:var(--pencil);margin:6px 0 2px;
  line-height:1.5;word-break:break-all;user-select:all}

/* her answer arrives as a typed sheet, not as prose in the app's own voice */
.answer{background:var(--onionskin)}
.answer > .mono{color:var(--clerk)}
.answer-body{color:var(--clerk);font-family:var(--mono);font-size:13.5px;line-height:1.72}

/* ---------- rooms that grow and contract ---------- */
h2.renameable{cursor:text}
h2.renameable:hover{color:var(--pen)}
/* Renaming changes the caret and nothing else: the field wears the
   printed name's own face, size, weight, color and spacing. The
   selector has to reach past the sheet's base field rule, which is the
   more specific of the two -- a bare class loses to it and the name
   flips to body serif mid-edit. The underline is the house hairline,
   taking pen on focus like every other field. */
.sec-head input.room-rename{width:100%;background:transparent;color:inherit;
  font-family:var(--display);font-weight:700;font-size:clamp(34px,9vw,52px);
  letter-spacing:-.04em;line-height:.9;padding:0 0 4px}
.room-rename:focus{outline:none}
.retire{color:var(--pencil)}

/* ===========================================================================
   What remains of the older skins: the working sheet, entries as index
   cards, the manila tabs, and the string and pins the manuscript's deep
   view still draws between a chapter and its notes. The tournaments that
   chose and then superseded them are in sketches/VERDICTS.md. Legibility
   outranks charm.
=========================================================================== */

/* ---------- the working sheet ---------- */
/* A clean page. The ruling belongs to pieces of paper (a notebook's
   stock), never to the world; the cards carry the character. */
.main{position:relative;background:var(--paper-hi);
  box-shadow:0 0 0 1px var(--rule)}

/* ---------- entries as index cards ---------- */
ul.entries{margin-top:16px}
/* No bar down the edge: the card's one colour is the rule above its foot
   (.ffoot3), decisions/2026-09-27-the-carry/RULING.md. */
li.entry{position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:0;padding:12px 14px;margin-bottom:10px}
li.entry.done{background:transparent}


/* ---------- the deep is a filing cabinet: people as folder tabs ---------- */
.people{gap:0 6px;align-items:flex-end}
.person{clip-path:polygon(0 100%, 0 26%, 9% 0, 91% 0, 100% 26%, 100% 100%);
  background:var(--manila);border:1px solid var(--rule);border-bottom:none;
  border-radius:0;padding:12px 18px 9px;transform:none}
.person::after{display:none}
.person:hover{background:var(--manila-hi)}
.person.add{background:transparent;border-style:dashed}
.people::after{content:"";flex:1 1 100%;height:2px;background:color-mix(in srgb, var(--ink) 18%, transparent);
  margin-top:-1px}

/* ---------- the string between a page and its notes ---------- */
.string-svg{position:absolute;inset:0;pointer-events:none;z-index:5}

/* ---------- the taken stamp: the sheet's one piece of theatre ---------- */
.composer{position:relative}
/* Lean, place, ink and grain all come in on the element as custom
   properties, seeded off the item's id -- see stampStyle(). The phone
   has the same variation (ios/Dashboard/Look.swift's TakenStamp). */
.stamp{position:absolute;left:18px;bottom:18px;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.18em;color:var(--stamp);border:2px solid var(--stamp);
  --rot:0deg;--dx:0px;--dy:0px;--ink:.9;
  border-radius:0;padding:5px 10px;opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot));
  pointer-events:none;
  mix-blend-mode:multiply;
  -webkit-mask-image:var(--grain);mask-image:var(--grain);
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* Every note stamps in the one place: below the thin line, at the left
   end of the instruments' row -- the free space in the box, and clear of
   the mic. The beat: it lands there and holds, and it is also where it
   settles, so nothing moves when the box clears. It comes down over the
   TICK's own draw, at the tick's own curve -- one clock for both. */
.stamp.landing{animation:stamp-land var(--strike-draw) ease-out forwards}
@keyframes stamp-land{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.55)}
  100%{opacity:var(--ink);transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)}
}
/* Landed and holding: the impression where it came down, let go of the
   animation whose forwards fill would outrank the departure below. */
.stamp.landed{animation:none;opacity:var(--ink);
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
/* The departure: the stamp lands, and then the whole paper is sent --
   the words and the impression on them, away from the person, one short
   slide up and out. They are two elements (the stamp rides the
   composer's own corner, so a wrapper would move its containing block)
   wearing one motion: the same offset, the same fade, the same curve,
   started by one class in one style pass. */
.composer textarea,.composer .stamp.landed{
  transition:transform var(--strike-leave) ease-in,opacity var(--strike-leave) ease-in}
.composer.sending textarea{transform:translateY(-14px);opacity:0}
.composer.sending .stamp.landed{
  transform:translate(var(--dx),calc(var(--dy) - 14px)) rotate(var(--rot));opacity:0}
/* no motion: the impression still shows, it just doesn't come down --
   and the paper doesn't slide away, it simply clears */
@media(prefers-reduced-motion:reduce){
  .stamp.landing{animation:none;opacity:var(--ink)}
  .composer textarea,.composer .stamp.landed{transition:none}
}
.chap-head{display:flex;align-items:center;gap:10px;margin-top:18px}
.chap-head .chap-title{margin-top:0;flex:1}
.retire{margin-top:8px}
/* Settings -> Labels: one row per standing label, the name in ink and
   `delete` in the dress `delete this notebook` wears. */
.labelrow{display:flex;gap:0 14px;align-items:baseline;margin:5px 0;
  color:var(--ink);font-size:12.5px}
.labelrow button{color:var(--pencil);font-weight:400;letter-spacing:.02em;text-decoration:none}
/* A label's words belong to the name above them: the drawer page's 24px
   of air put the line nearer the next label than its own. */
.labelrow + .room-words{margin:2px 0 16px}

/* ---------- things that live elsewhere ---------- */
.docbar{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 4px}
li.entry.doc{display:flex;gap:12px;align-items:flex-start;background:var(--docpaper);
  border-top-color:color-mix(in srgb, var(--ink) 30%, transparent)}
.clip{flex-shrink:0;width:15px;height:26px;margin-top:2px;
  border:2px solid var(--pencil);border-radius:0;
  border-bottom-color:transparent;opacity:.6}
.docpath{color:var(--pencil);font-size:11px;word-break:break-all}
/* The case file's run: one dated column, the date said once per day on
   the rail, the entries beside it. Mirror of recordRun in
   ios/Dashboard/Room.swift and RecordEntry in ios/Dashboard/Deep.swift. */
.people-add{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;margin:10px 0 0}
.run{list-style:none;margin:18px 0 0;padding:0}
.run-day{display:flex;gap:16px;align-items:flex-start;margin:0 0 16px}
.run-date{flex:0 0 92px;color:var(--pencil);font-size:11px;padding-top:3px}
.run-entries{flex:1;min-width:0;list-style:none;margin:0;padding:0}
.run-entry{margin:0 0 13px}
.run-entry:last-child{margin-bottom:0}
.run-line{display:flex;gap:10px;align-items:flex-start}
.run-line .check.small{--tick-words:16px;--tick-lh:1.45}
.run-said{flex:1;min-width:0}
.run-words{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink);
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  display:block;width:100%;white-space:pre-wrap}
.run-words:hover{color:var(--pen)}
.run-entry.done .run-words{color:var(--pencil);text-decoration:line-through}
.run-whose{flex-shrink:0;max-width:140px;color:var(--pencil);font-size:11px;padding-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-doc{margin-top:5px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
/* a file's name or a link's address is spelled as it is: capitals would
   change what it says, so it keeps its own case and no tracking */
.run-doc .mono{color:var(--pencil);font-size:11px;font-weight:500;letter-spacing:0;
  text-transform:none;word-break:break-all}
.run-place{margin-top:6px}
.run-entry .entries{margin:0}
a.word{text-decoration:none;display:inline-block}
/* `The guide`, where a screen raises a question the guide answers (the
   hour grid, the new-list form, Search): the small acting word, on its
   own line under what it explains */
.guide-to{margin:14px 0 0}
.pocketline{border:1.5px dashed color-mix(in srgb, var(--pen) 30%, transparent);border-radius:0;
  color:var(--pen);padding:9px 13px;margin:16px 0 0;line-height:1.5}
/* the one word inside the pocket's notice fires, so it wears the one
   dress -- ink under a 1px ink hairline */
.pocketline button{color:var(--ink);border-bottom:1px solid var(--ink);margin-left:8px;
  padding-bottom:4px;font-family:var(--ui);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase}

/* a document result says which file it is and the line the words were
   found on — pencil, under the card, never a card of its own */
.foundline{list-style:none;margin:-6px 0 14px;padding:0 0 0 2px;
  font-family:var(--body);font-size:14px;line-height:1.45;color:var(--pencil)}

/* ---------- Tasks: everything still on the desk ---------- */
/* a row of chosen words: Tasks' sorts, and Search's bands */
.pickrow{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
/* A book's own affairs, folded behind `settings` in its head, where a
   long run of pages cannot bury it. The word sits at the right end of
   the name's row, which aligns on the name's first baseline so a name
   that wraps leaves the word up beside its first line. */
.nbset{margin-top:22px}
.nbset.affairs{margin:8px 0 20px}
.nbset .sec-head{margin-top:6px}
.sec-head.has-settings{align-items:baseline}
.head-settings{flex:none;font-size:12.5px;margin-bottom:0;white-space:nowrap}
.sortpick{display:inline-flex;align-items:baseline;gap:4px}
.sortdir{font-family:var(--ui);font-size:11px;line-height:1;color:var(--pencil)}
/* the unchosen word's slot: the same glyph, no ink. Hidden rather than
   sized by hand, so the room is exactly the mark's own room and the row's
   words do not move by a pixel when the choice moves. */
.sortdir.blank{visibility:hidden}
/* and the word's own box is always the CHOSEN word's box: the hidden twin
   is set in 600, so being chosen changes the colour and the line and not
   the width */
.pickrow .word.pick::after{content:attr(data-word);display:block;height:0;
  overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none}
/* ---------- Tasks as a list: a line per task under its sort's headings ----
   Every heading of the chosen sort stands at once, one after another,
   and a click anywhere on one folds its lines away or brings them back
   (decisions/2026-09-29-tasks-list/RULING.md). The heading is its words
   as they stand (`<10 min`, `Sep 28`, a label's name) in
   Soehne Halbfett at the size of a line's words, in ink: no caps, no
   tracking, no count and no rule under it (the owner, Sep 29, 2026, the
   same on both clients). Its chevron is the notebook name's own glyph in
   pencil, scaled to sit beside that heading, pointing down while open and
   turned to point right once folded. The fold moves on the house's
   no-bounce spring over --fold-move (FOLD_MOVE in face/tasks.js), and
   under Reduce Motion it changes at once (the sheet-wide rule above). */
:root{--fold-move:.33s;
  /* a critically damped spring, the phone's Spring(bounce: 0), sampled:
     x = 1 - (1 + wt)e^-wt, w for a .3s response, over the fold's time */
  --spring:cubic-bezier(.25,.8,.3,1);
  --spring:linear(0,.048 5%,.154 10%,.28 15%,.405 20%,.52 25%,.618 30%,.769 40%,
    .866 50%,.926 60%,.961 70%,.982 80%,.994 90%,1)}
.tgroup{margin-top:18px}
.tgroup + .tgroup{margin-top:14px}
.tgroup-head{margin:0;font:inherit}
/* 18 is .tline-words' size: the heading stands as tall as the words
   under it, and its weight alone says it is the heading */
.tfold{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;padding:4px 0;text-align:left;
  font-family:var(--ui);font-weight:600;font-size:18px;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.tfold-name{min-width:0;overflow-wrap:anywhere}
.tchev{flex:none;width:14.4px;height:14.4px;color:var(--pencil);
  transition:transform var(--fold-move) var(--spring)}
.tgroup.folded .tchev{transform:rotate(-90deg)}
/* the lines fold by their row's height, 1fr to 0fr, so the section keeps
   no fixed measure; folded, they are hidden from the tab order and the
   screen reader as well as the eye */
.tfold-body{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(0,1fr);
  transition:grid-template-rows var(--fold-move) var(--spring),visibility 0s}
/* min-width 0, or a long line's unbroken words would widen the column
   past the page instead of ending in an ellipsis */
.tfold-inner{min-height:0;min-width:0}
.tgroup.folded .tfold-body{grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--fold-move) var(--spring),visibility 0s var(--fold-move)}
.tgroup.folded .tfold-inner,.tgroup.moving .tfold-inner{overflow:hidden}
/* The lines sit at Completed's rhythm, without the strike: the same rule
   down the left and the same 9 above and below each line. A line is the
   card's tick square, the task's first line in the card's title face,
   cut with an ellipsis, and one fact at the right in the foot's type in
   pencil. 44 tall, a finger's reach, on every width. */
ul.tlines{list-style:none;margin:0 0 6px;padding:0 0 0 14px;
  border-left:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent)}
ul.tlines.flat{margin-top:22px}
.tline{display:flex;align-items:flex-start;gap:13px;min-height:44px;padding:9px 0}
.tline-open{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px;text-align:left}
.tline-words{flex:1;min-width:0;font-family:var(--body);font-size:18px;line-height:1.4;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tline-words.clerks{color:var(--clerk);font-family:var(--mono);font-size:14px;letter-spacing:-.1px}
.tline-open:hover .tline-words:not(.clerks){color:var(--pen)}
.tline-fact{flex:none;max-width:48%;font-family:var(--ui);font-size:12.5px;font-weight:500;
  line-height:1.25;color:var(--pencil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tline.done .tline-words{text-decoration:line-through;color:var(--pencil)}
/* the card opened from a line stands where the line stood */
ul.tlines li.entry{margin:6px 0}
.tfold:focus-visible,.tline-open:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
/* a search hit wholly the assistant's keeps her green when struck (the
   polish of Oct 5, ruling 5) */
.sline.done .tline-words.clerks{color:var(--clerk)}
/* on a phone's width the words keep the larger share: a date with its
   repeat rule is cut before it can take the line */
@media (max-width: 560px){
  .tline-fact{font-size:12px;max-width:40%}
}


/* steps: the smaller moves written on the parent's card */
.step{display:flex;align-items:baseline;gap:9px;margin-top:7px;padding-left:2px}
.step .check.small{--tick-words:16px;--tick-lh:1.55}
.step-title{font-size:16px}
/* A folded step's row under its task: at least 44px tall, and the small
   square's hit reaching 44 around it, centred, taking no layout, so one
   row's reach never lands on the next (decisions/2026-10-05-polish/
   RULING.md; the critique's ASSESSMENT-B, touch targets). Mirror of
   `StepTick` in ios/Dashboard/Card.swift. */
.step.folded{min-height:44px;margin-top:0;padding-top:9px;box-sizing:border-box}
.step.folded .check::before{content:"";position:absolute;
  inset:calc((var(--tick) - 44px) / 2)}
.step.done .step-title{text-decoration:line-through;color:var(--pencil)}
.step.addstep input{border-bottom:1px solid var(--rule);font-size:15px;flex:1;
  background:transparent;padding:3px 2px}
.step.addstep{align-items:center;gap:10px}
/* open, a step's words are a line in the owner's hand, like the title */
.step-write{flex:1;border:none;border-bottom:1px solid transparent;background:transparent;
  font-family:var(--body);color:var(--ink);padding:1px 0}
.step-write:focus{outline:none;border-bottom-color:var(--pen)}
.step.done .step-write{text-decoration:line-through;color:var(--pencil)}
/* a step's row dragged to its place: the line it lands on, in the pen */
.step[draggable="true"]{cursor:grab}
.step.dragging{opacity:.5}
.step.dropbefore{box-shadow:inset 0 2px 0 var(--pen)}
.step.dropafter{box-shadow:inset 0 -2px 0 var(--pen)}
/* a folded card's open steps sit under one word, `steps`; unfolded, their
   rows, each word a door to the step, and a step opened from its row
   stands in place under its task */
.step-fold .word{margin-bottom:0}
.step-words{font:inherit;font-size:16px;background:none;border:0;border-radius:0;
  padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;flex:1}
.step.done .step-words{text-decoration:line-through;color:var(--pencil)}
.step-open{margin:7px 0 0 2px}
/* PART OF, once set: the task's words are a fact, in ink */
.word.printed.inked{color:var(--ink)}

.reply-ink{display:block;margin-top:10px;white-space:pre-wrap}
.reply-label{display:block;color:var(--pencil);margin-bottom:4px}
.reply-lane{display:flex;gap:8px;margin-top:10px;align-items:center}
.reply-lane input{flex:1;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  background:transparent;font-family:var(--body);font-size:15px;padding:5px 2px}
.reply-lane input:focus{outline:none;border-bottom-color:var(--clerk)}
/* SEND is one of the clerk's acting words, so it is a word and not a
   box: the one dress in her green */
.reply-lane button{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--clerk);background:none;
  border:0;border-bottom:1px solid var(--clerk);border-radius:0;
  padding:6px 0 4px;cursor:pointer}

/* The controls that never wore a chip class wear the one dress with
   everything else: what fires is ink under a 1px ink
   hairline. Two stay pencil and bare -- retiring a drawer or signing
   out is the destructive word the house keeps quiet, which is the
   decline's own treatment, and a thing named on the all-day line is a
   NAME, a door by position. */
.strip-more button,.retire button,
.day-allday button,.cal-head button,.retire-yes{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.11em;
  color:var(--ink);background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--ink);
  /* said out loud because a button does not inherit its paper's case:
     every browser sets text-transform:none on a form control */
  text-transform:uppercase;
  padding:10px 0 4px;cursor:pointer;line-height:1.1}
.retire button,.day-allday button{
  color:var(--pencil);font-weight:400;letter-spacing:.02em;border-bottom:0;
  text-transform:none}
.retire-yes{padding-bottom:4px;margin-bottom:7px}
/* Inside a confirmation the person has already asked, so `delete it` is a
   normal action (docs/design.md): ink caps over the ink line, with the
   18 of air an action row keeps before `never mind`. The question above
   it is a sentence in the UI face at the reading size, never an eyebrow's
   tracked caps. */
.retire > span{display:block;font-family:var(--ui);font-size:12.5px;line-height:1.45}
.retire .retire-yes{color:var(--ink);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);margin-right:18px}

/* ---------- thumbs ---------- */
.strip-more{margin:10px 0 0}
@media (pointer:coarse){
  .word{padding-top:14px}
  .facets{gap:0 18px}
}

/* ---------- the welcome, once, and the page that stays ----------
   (decisions/2026-09-18-unless-you-ask/RULING.md)

   Today is left standing behind the panel and dimmed, not covered: the
   thing being explained is the thing behind the paper, and a full-screen
   cover would explain a screen the person has not seen. The dim is the
   drawer scrim's own mix, which is the only dim this sheet has. */
.welcome-dim{position:fixed;inset:0;z-index:58;
  background:color-mix(in srgb, var(--ink) 28%, transparent)}
.welcome{position:fixed;z-index:59;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(460px, calc(100vw - 32px));max-height:calc(100vh - 64px);
  overflow:auto;background:var(--card);border:1px solid var(--rule);
  border-radius:0;padding:22px 24px 14px}
.welcome:focus{outline:none}
/* The title and the paragraph are the OWNER'S serif, not the clerk's
   green and not the instrument's caps: the desk speaking about itself in
   the person's own hand. */
.welcome-head{font-family:var(--body);font-weight:400;font-size:21px;
  line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ink);
  margin:0 0 10px}
.welcome-said{font-family:var(--body);font-size:15.5px;line-height:1.5;
  color:var(--ink);margin:0 0 6px}
/* `close` at the left, HOW IT WORKS at the right, on one row that never
   restacks onto the paragraph. */
.welcome-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;margin:0}
/* The permanent page's prose: the same serif at the same width. */
.works-said{font-family:var(--body);font-size:15.5px;line-height:1.55;
  color:var(--ink);max-width:62ch;margin:14px 0 0}
.works-said a{color:var(--ink);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
/* The first run's lines: one sentence from the clerk under the thing it
   is about, in her own hand (.clerk-ink), with no control beside it and
   nothing to dismiss. Held to a reading measure: 32em, about 53
   monospace characters a line. */
.firstsaid{max-width:32em;margin:10px 0 0}
/* the recovery line: the app's words about the password, in plain type */
.plainsaid{font-size:14px;line-height:1.5;color:var(--ink)}

/* ---------- the look of the desk: the swatch book ---------- */
.lookbook{position:fixed;z-index:60;inset:0;overflow:auto;background:var(--paper-hi);
  border:0;border-radius:0;
  padding:calc(30px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom))}
.lookbook > *{max-width:440px}
/* On a wide page Settings is a sheet standing on the page, as the proof
   sheet is: centred, full height, a hairline down each side, the page
   dimmed around it by the drawer scrim's own mix, and a click on the dim
   closes it as DONE does. Its rows take the sheet's width, so the five
   tabs and the ink names stand on one line, and a line of prose keeps a
   reading measure (decisions/2026-09-28-review-leftovers/RULING.md, the
   list B amendment, item 9). */
@media(min-width:900px){
  .scrim.lookdim{display:block;position:fixed;inset:0;z-index:59;
    background:color-mix(in srgb, var(--ink) 28%, transparent)}
  .lookbook{right:0;left:0;width:620px;max-width:calc(100% - 64px);margin:0 auto;
    border-left:1px solid var(--rule);border-right:1px solid var(--rule);
    padding:calc(40px + env(safe-area-inset-top)) 48px calc(48px + env(safe-area-inset-bottom))}
  .lookbook > *{max-width:none}
  .lookbook .set-note,.lookbook p.written{max-width:62ch}
  /* the specimen keeps a card's width, as the iPad's Wide.proof does */
  .lookbook .spec{max-width:440px}
}
/* At phone width the sheet takes the main sheet's own 20 margins, and the
   tabs' cells close in to 6 either side of the word, so the five stand on
   one line at 390 without shrinking the words (the same item). */
@media(max-width:520px){
  .lookbook{padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right))}
  .set-tabs button{padding-left:6px;padding-right:6px}
}
.lookbook h2{margin:0 0 6px}
.look-head{display:block;color:var(--pencil);margin:16px 0 7px}
.look-row{display:flex;gap:0 18px;flex-wrap:wrap;align-items:baseline}
/* The last rows of General -- how Maitland works, the guide, the two
   documents, the letter -- stand as their own group, with no eyebrow (the
   phone's own stack), set off from Export above so they are not read as
   its rows, and each on its own line with the air the phone gives them. */
.set-reading{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.set-reading .look-row + .look-row{margin-top:14px}
/* The specimen card, at the foot of the Look tab, below `The size` and
   set at it, so one card proofs both choices the tab offers. A pen's
   mark beside a name says which hue the
   pen holds and nothing else, so the swatch book prints a proof: a card
   in the house's own anatomy -- the card stock, the binding down the
   left edge, the squared corner, the card's own walls, the tick square
   at the head of its first line -- carrying the hands of the set being
   proofed as they are actually worn. Nothing on it is a control. Every
   color is set inline off the set chosen on the row, never off the ink
   in force, so a night ink picked in daylight still shows what was
   picked. The phone has the same card
   (ios/Dashboard/Settings.swift's SpecimenCard / SpecimenProof). */
.spec{margin:18px 0 0}
/* a card's own anatomy: the tick square hanging at the left and the
   body column beside it, as ItemCard has it on the phone */
.spec-card{position:relative;border:1px solid;border-radius:0;
  padding:12px 14px;display:flex;align-items:flex-start;gap:10px}
.spec-body{flex:1;min-width:0}
.spec-card p{margin:0 0 8px}
.spec-body p:last-child{margin:0}
/* with the sun, two whole cards, one per light */
.spec-card + .spec-card{margin-top:10px}
/* the card's one colour, the rule above its foot */
.spec-rule{display:block;height:var(--foot-rule);margin:0 0 8px}
/* the tick square, in the PEN: printed, never a control */
.spec-tick{flex-shrink:0;width:16px;height:16px;margin-top:3px;
  border:1.5px solid;border-radius:0}
.spec-written{font-family:var(--body);font-size:15px;line-height:1.45}
.spec-acts,.spec-foot{display:flex;align-items:baseline;gap:16px}
/* a word that fires, in the one dress it wears everywhere else: tracked
   caps in ink under the 1px ink hairline -- the specimen proofs the hand,
   so it must proof the dress the hand is worn in. */
.spec-acts b{font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;
  border-bottom:1px solid;padding-bottom:4px}
/* and one that DECLINES: pencil, bare and in its plain case */
.spec-acts span{font-family:var(--ui);font-weight:400;font-size:11px;
  letter-spacing:.02em}
/* the foot's own pair: the chosen word in the PEN under its pen
   hairline, which is how the pen is worn on the sheet, beside the one
   not chosen in pencil -- a choice row's dress, printed, so both words
   are tracked as a choice row's words are */
.spec-foot b{font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.11em;border-bottom:1px solid;padding-bottom:4px}
.spec-foot span{font-family:var(--ui);font-weight:400;font-size:11px;
  letter-spacing:.11em}
.spec-clerk{font-family:var(--mono);font-size:12.5px;line-height:1.5}
/* the word, not the mark, gives the swatch its baseline, so a plain word
   in the same row (Sundays in colour's `off`) sits on the same line */
.lookbook .word.swatch{display:inline-flex;align-items:baseline;gap:7px}
.lookbook .word.swatch i{align-self:center}
/* The pen's mark, not a square: a rule is what a pen
   leaves. 22x3, heavier than every hairline on the sheet and detached
   from the word, so it never reads as a chosen word's 1px line. */
.lookbook .word.swatch i{width:22px;height:3px;border-radius:0;display:inline-block}

/* ---------- the real calendar, faintly underneath ---------- */

.day-ev{color:var(--pencil);font-size:11px;padding:1px 7px;margin-bottom:2px;
  border:1px dashed color-mix(in srgb, var(--pencil) 45%, transparent);border-radius:0;align-self:flex-end;
  background:var(--paper-hi)}

/* ---------- Completed: a struck line per thing ----------
   What has come off the desk is a record to read down, not a wall of
   cards: the phone's own struck line — a month's rule down the left, the
   title struck in pencil, its date under it, and the way back at the
   right end. */
.completedgroup{margin-top:26px}
ul.struck{list-style:none;margin:12px 0 0;padding:0 0 0 14px;
  border-left:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent)}
.struckrow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:9px 0}
.strucklines{display:flex;flex-direction:column;gap:4px;min-width:0}
/* the strike in the pen, the words in pencil (the colour-and-motion
   ruling, C5) */
.strucktitle{font-family:var(--body);font-size:16px;line-height:1.35;color:var(--pencil);
  text-decoration:line-through;text-decoration-color:var(--pen)}
/* the assistant's own, in her green typescript, struck the same
   (decisions/2026-10-05-polish/RULING.md, ruling 5) */
.strucktitle.clerks{font-family:var(--mono);font-size:13.5px;letter-spacing:-.1px;color:var(--clerk)}
.struckdate{font-size:11px;color:var(--pencil)}
/* the undo is a decline: it takes no room
   from the title it stands beside */
.struckrow .word.quiet{flex:none}

/* ---------- the day, ruled ---------- */
.daysheet{margin-top:40px}
.daysheet > .lead{margin-bottom:8px;display:block}
.day-strip{position:relative;border-top:1px solid var(--rule);padding-top:2px}
.day-row{position:relative;height:26px;display:flex;align-items:flex-end}
/* The strip is the day page's rail at a smaller scale and says its hours
   the same short way, `9 AM`, `NOON`. The rail carries the time on this
   strip: its rows are one line at the hour's own pitch, so the rows
   print their titles bare. */
.day-hour{width:44px;flex-shrink:0;color:var(--pencil);white-space:nowrap;
  padding-bottom:2px;text-align:right;padding-right:10px}
.day-line{flex:1;border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent)}
.day-row:nth-child(4n+1) .day-line{border-bottom-color:color-mix(in srgb, var(--ink) 16%, transparent)}
/* An hour's thing runs the lane. A box shrunk to its words reads as a
   chip pinned to the hour rather than as the hour being spoken for --
   and two things on one hour, both pinned at the same left, sit on top
   of each other. So the hour has a lane running
   from the rule to the right edge, and what is on that hour fills it,
   sharing evenly when there is more than one. Mirrored on the phone. */
.day-lane{position:absolute;left:60px;right:0;bottom:1px;
  display:flex;gap:6px;align-items:flex-end}
.day-lane > *{flex:1 1 0;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.day-item{font-family:var(--ui);font-weight:500;font-size:11px;
  color:var(--pen);letter-spacing:.02em;display:flex;align-items:center;gap:7px;
  background:var(--paper-hi);padding:1px 8px 1px 4px;border:1px solid var(--pen-soft);
  border-radius:0;text-align:left}
.day-item:hover{border-color:var(--pen)}
/* the flex box cannot cut its own text, so the words wear the ellipsis */
.day-words{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* the strip draws the same block at its own scale: the 2px head rule, the
   1px foot hairline and the hatch, in the pen, pencil once the event is
   over, and no side walls, so the two rulers mark a taken hour the same
   way. The web's strip
   stands its blocks on their start hour rather than spanning the hours
   they cover, sharing the hour's lane with whatever else starts in it: a
   written asymmetry with the phone's strip, which draws the real block
   in its columns. */
.day-block{border-top:2px solid var(--pen);border-bottom:1px solid var(--pen);
  /* said outright: the block wears `.day-item` too, whose own box would
     otherwise keep the two walls this ruling took off */
  border-left:0;border-right:0;
  background:repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 8px)}
.day-block.over{border-top-color:var(--pencil);border-bottom-color:var(--pencil);
  color:var(--pencil);
  background:repeating-linear-gradient(45deg, var(--hatch-pencil) 0 1px, transparent 1px 8px)}
.day-dot{width:6px;height:6px;border-radius:0;background:var(--pen);flex-shrink:0}
/* a timed task whose minute has passed, not ticked: the grey a finished
   event takes, square, words and edge (decisions/2026-10-05-polish/
   RULING.md, item 1) */
.day-item.over{color:var(--pencil);border-color:color-mix(in srgb, var(--pencil) 30%, transparent)}
.day-item.over .day-dot{background:var(--pencil)}
/* every title in its writer's style (decisions/2026-10-05-polish/RULING.md,
   item 5): the person's in the serif and the ink, the assistant's in her
   green typescript, at the strip's size -- the serif at 13 stands as tall
   as the strip's 11 of Soehne, as the phone sets it. Gone quiet, either
   keeps its face and takes the pencil. */
.day-words.theirs{font-family:var(--body);font-weight:400;font-size:13px;
  letter-spacing:0;color:var(--ink)}
.day-words.clerks{font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:-.1px;color:var(--clerk)}
.day-item.over .day-words{color:var(--pencil)}
.day-offnote button.clerks{font-family:var(--mono);font-size:12.5px;color:var(--clerk)}
.day-allday{color:var(--pencil);margin:8px 0 0}

/* one undated note beside the ruled hours: a narrow card at the strip's right */
.day-strip{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.day-rows{flex:1 1 300px;min-width:0}
.day-offnote{flex:0 1 150px;padding:12px;
  background:var(--card);border:1px solid var(--rule);border-top:1px solid var(--ink);
  border-radius:0}
.day-offnote .mono{display:block;color:var(--pencil);font-size:11px;margin-bottom:5px}
.day-offnote button{font-family:var(--body);font-size:14.5px;line-height:1.35;color:var(--ink);
  text-align:left}
.day-offnote button:hover{color:var(--pen)}
@media(max-width:560px){.day-offnote{width:120px}
  .pile-row{gap:14px}
  .pile-sel b{font-size:24px}}

/* the editor's date and time fields, kept quiet */
.when-lane{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
/* the field is the lane's own width and never a minimum wider than it --
   an input carries an intrinsic width of its own, so it is told the line
   it stands on; where the lane is narrow the placeholder clips inside the
   field, as an input's words do */
.when-nl{border-bottom:1px solid var(--rule);font-family:var(--body);font-size:15px;
  width:100%;max-width:100%}
.when-nl:focus{border-bottom-color:var(--pen)}
.when-echo{color:var(--pen);min-height:13px}
/* the pickers wrap INSIDE the card: bounded by the lane, the row breaks
   as often as it must rather than running past the card's right edge */
.when-pickers{display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%}
.when-pickers[hidden]{display:none}
.when-date,.when-time{background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:3px 2px;
  font-family:var(--ui);font-size:11.5px;color:var(--pen)}
.when-date:focus,.when-time:focus{outline:none;border-bottom-color:var(--pen)}
.when-time:disabled{opacity:.4}

li.entry:nth-child(3n){border-radius:0}

/* the journal page */
.jpage{margin-top:18px}
/* The planner's box -- the week, month and year pages. Its stock is the
   leaf's: the rules are drawn off the field's OWN line height by
   ruleTheLeaf, never at a pitch of their own, so the writing sits on the
   line at every size. background-COLOR, not the shorthand, for the
   reason #nbleaf gives: the shorthand would clear the stock the field is
   printed on, which this id would then outrank. */
/* No resize grip: the box grows under the writing, as the day's box does
   (growLeaf, face/shell.js), the page being the thing that scrolls. */
.planner #scopepage{width:100%;min-height:22vh;background-color:transparent;border:none;
  resize:none;overflow:hidden;font-family:var(--body);font-size:16.5px;line-height:28px;color:var(--ink)}
.planner #scopepage:focus{outline:none}

/* ---------- the calendar ---------- */
/* The month at Stendig scale: one enormous word, a heavy grid, numerals
   you can read from across the room. Nothing counted, nothing red. */
.cal-mast-name{display:flex;align-items:baseline;gap:16px}
.cal-month-big{font-family:var(--display);font-weight:700;font-size:clamp(44px,8vw,72px);
  letter-spacing:-.04em;line-height:1.02;padding-bottom:.06em;margin:0}
.cal-month-big a{cursor:pointer}
.cal-month-big a:hover{color:var(--pen)}
.cal-year a{cursor:pointer}
.cal-year a:hover{color:var(--pen)}
.ymonths{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:8px 0 18px;
  max-width:520px}
/* The year's twelve months are doors back into the roll, as words: ink
   over the close underline a header's date names wear, no box and no
   fill, as the phone's year page prints them (`yearGrid` in
   ios/Dashboard/Scope.swift). The accent is kept for the current or the
   chosen day, and the padding keeps the row's height as the hit. */
.ymonth{font-family:var(--ui);font-weight:400;font-size:13px;color:var(--ink);
  padding:10px 0;background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:1px;text-decoration-skip-ink:none}
@media(max-width:560px){.ymonths{grid-template-columns:repeat(4,1fr)}}
.cal-year{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--pencil)}

.cal-grid{display:grid;grid-template-columns:26px repeat(7,minmax(0,1fr));border-left:1px solid var(--rule);
  border-top:2px solid var(--ink)}
.cal-dow{text-align:left;padding:7px 9px;font-size:11px;letter-spacing:.12em;color:var(--pencil);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* the roll: months in one continuous scroll, the weekday rail pinned */
/* the roll notches by month: momentum kept, but it always comes to rest
   with a month's head under the pinned rail. scroll-padding-top is set
   from the rail's real height in fitCalFrame, so the head is never
   hidden beneath it; a month taller than the frame scrolls freely
   inside itself, which is what makes six-week months behave. */
.cal-frame{height:calc(100vh - 330px);min-height:420px;overflow-y:auto;
  scrollbar-width:none;scroll-snap-type:y mandatory;
  overscroll-behavior:contain;position:relative}
.cal-tools{display:flex;gap:8px;align-items:center;padding-bottom:8px}
/* the one word under Today's stack and under In Hand, at the reading size */
.underdeck{list-style:none;margin:-6px 0 12px;padding:0}
.underdeck .word{font-size:12.5px}
.cal-roll-month{padding:6px 10px 18px;margin:0 -10px}
.cal-dowrail{display:grid;grid-template-columns:26px repeat(7,minmax(0,1fr));position:sticky;top:0;z-index:5;
  background:var(--paper);border-bottom:2px solid var(--ink)}
/* Each name sits centered over its own column, as the phone's rail does.
   The text-indent gives back the trailing letter-space the tracking adds
   after the last letter, which would otherwise pull the word left. */
.cal-dowrail .cal-dow{border-right:0;border-bottom:0;padding:9px 4px 7px;
  text-align:center;text-indent:.12em}
/* The week gutter wears no head: the numbers beneath it stand turned on
   their side, and the turn is what says the column is weeks. The cell
   stays, empty, to keep the seven day names over their own columns. */
/* The grooves are deep: `always` makes the roll STOP at every month,
   so one throw of the wheel passes exactly one notch however hard it
   was thrown -- the phone's one-month-per-gesture, as near as CSS can
   say it. What CSS cannot say is the speed of the landing: the settle
   is the browser's own, and there is no property for a stiffer one. */
.cal-roll-month{margin-top:36px;scroll-snap-align:start;scroll-snap-stop:always}
.cal-roll-month:first-child{margin-top:12px}
.cal-blank{background:var(--paper);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.cal-day{position:relative;min-width:0;overflow:hidden;min-height:92px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);text-align:left;padding:7px 9px;cursor:pointer;
  background:var(--paper-hi);display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.cal-day:hover{background:var(--card-hi)}
.cal-day.dim{background:transparent}
.cal-day.dim .cal-num{opacity:.3}
.cal-num{font-family:var(--ui);font-weight:700;font-size:27px;letter-spacing:-.01em;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.cal-day.wkend{background:var(--paper)}
/* today: an accent numeral in an accent outline; the Calendar has no chosen day */
.cal-day.today .cal-num{color:var(--pen);box-shadow:inset 0 0 0 1.5px var(--pen);
  padding:3px 6px;margin:-3px 0 0 -6px}
.cal-lines{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.cal-line{font-family:var(--ui);font-size:11.5px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;border-left:2px solid var(--pen);
  padding-left:5px;text-align:left}
.cal-line.ev{color:var(--pencil);border-left-color:var(--rule)}
/* a landing a repeating thing has not reached yet: the same line, in
   pencil. It is a projection, not a thing -- there is nothing there to
   tick and nothing to be behind on */
.cal-line.ghost{color:var(--pencil);border-left-color:var(--pencil)}
@media(max-width:560px){
  .cal-day{min-height:64px;padding:5px 6px}
  .cal-num{font-size:20px}
  /* no room for words in a phone cell: the lines become square marks */
  .cal-day .cal-lines{flex-direction:row;gap:3px}
  .cal-line{width:6px;height:6px;padding:0;border:none;background:var(--pen);
    color:transparent;overflow:hidden}
  /* the phone's hollow pencil square: in the rule colour it was 1.3:1 */
  .cal-line.ev{background:transparent;box-shadow:inset 0 0 0 1px var(--pencil)}
  .cal-line.ghost{background:var(--pencil)}
  /* one square for a day with anything open, however many -- never a
     count (decisions/2026-09-28-review-leftovers/RULING.md, the
     amendment); one for a repeat's landing ahead. The wide cell keeps its
     titled lines */
  .cal-line:not(.ev):not(.ghost) ~ .cal-line:not(.ev):not(.ghost),
  .cal-line.ghost ~ .cal-line.ghost{display:none}
}

/* ---------- the day book: one day, ruled by the hour ---------- */
/* The day's head: the date names, then the date strip -- the week's seven
   bare dates under the weekday heads, opening into the month by the
   handle -- in the phone's sizes (DateStrip.swift). */
/* The head is a size container: the dates are sized from their cell,
   a seventh of its width. */
.db-head{margin:18px 0 0;container-type:inline-size}
.db-names{padding:0 0 12px 2px;line-height:1}
.ds-heads{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-bottom:6px}
.ds-heads span{text-align:center;font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.12em;color:var(--pencil);line-height:1.2}
/* The dates are the page's masthead (decisions/2026-09-26-top-weight/):
   the date numeral's weight at 30, sized from the cell as the grid's own
   numerals are. The box's side padding gives first, 5 down to 3, then the
   numeral shrinks, so the chosen day's box and today's outline always
   keep 2px between them. 1.216em is two tabular figures of Soehne 700
   (the font's own advance, .608em a figure); .718em its cap. The row is
   the box -- the cap and 7px above and below -- and 13px of air. Twin of
   DateStrip.fit. --ds-rows is the rows drawn, set by dateStrip(). */
.ds-dates{position:relative;overflow:hidden;
  --ds-cell:calc(100cqw / 7);
  --ds-pad:clamp(3px, (var(--ds-cell) - 2px - 30px * 1.216) / 2, 5px);
  --ds-size:min(30px, (var(--ds-cell) - 2px - 2 * var(--ds-pad)) / 1.216);
  --ds-row:calc(var(--ds-size) * .718 + 27px);
  height:calc(var(--ds-rows, 1) * var(--ds-row))}
.ds-rows{will-change:transform}
.ds-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:var(--ds-row)}
.ds-day{display:flex;align-items:center;justify-content:center;cursor:pointer}
.ds-day.blank{cursor:default}
/* the numeral's cap box: the chosen day filled, today outlined */
.ds-num{font-family:var(--ui);font-weight:700;font-size:var(--ds-size);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);
  text-box:trim-both cap alphabetic;padding:7px var(--ds-pad)}
/* a past day in pencil, today on in ink, Saturday as every weekday
   (decisions/2026-10-09-outside-review-today/RULING.md, item 4) */
.ds-day.past .ds-num{color:var(--pencil)}
.ds-day.today .ds-num{color:var(--pen);box-shadow:inset 0 0 0 1.5px var(--pen)}
.ds-day.chosen .ds-num{background:var(--pen);color:var(--paper-hi);box-shadow:none}
/* the handle, in the phone's divider handle's dress: the same 3px of
   paint, on a band 32 tall, the target floor */
.ds-handle{display:flex;align-items:center;justify-content:center;width:100%;height:32px}
.ds-handle i{display:block;width:44px;height:3px;background:var(--pencil);opacity:.55}

/* Sundays in colour (Settings → Calendar; docs/planner-and-notebooks.md):
   a Sunday's numeral and its weekday head take the Sunday ink wherever a
   day is drawn -- the date strip, the Calendar, the month page, the week's
   bands, the side column's month -- while the body carries `sundays`.
   Today's outline, the chosen day's fill, a day outside the month and a
   hovered name keep their own colours. */
body.sundays .ds-heads span.sun,
body.sundays .ds-day.sun:not(.today):not(.chosen) .ds-num,
body.sundays .cal-dow.sun,
body.sundays .cal-day.sun:not(.today) .cal-num,
body.sundays .poster-head span.sun,
body.sundays .poster-cell.sun:not(.today):not(.out):not(:hover) .poster-num,
body.sundays .wk-band2.sun:not(.today) .wk-bnum:not(:hover),
body.sundays .wk-band2.sun:not(.today) .wk-bdow,
body.sundays .mdow.sun,
body.sundays .mday.sun:not(.today){color:var(--sunday)}

/* The ruler window, the phone's frame carried here. The Any time lane
   and the hours are one thing, on the same stock
   the write box is printed on, cut at head and foot by 2px of ink, full
   width and equal — the only heavy rules below the date. Its picture is
   inset 12px from both margins with 8px of stock above and below, so it
   reads as paper set in a frame and ends at ink where it is cut. */
.db-window{margin-top:0;background:var(--paper-hi);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:8px 12px}
.db-window .pl-lane{margin-top:0;border-top:none;padding-top:14px;
  border-bottom:1px solid var(--rule)}
.db-ruler{position:relative;padding-top:8px}

/* ---------- the block ----------
   An event on the ruler, from its start to its end. A 2px pen rule at
   its head, the title on a clear band beside it, and beneath the title
   diagonal hatching at 45° -- the drafting mark for a span that is
   taken, never a wash, which would fight the hour lines the block stands
   on. The pitch scales with the type because the desk's size setting is
   a zoom on the body.

   Columns: blocks that overlap stand side by side, each on its own paper
   with a strip of the lane between, and the hatching's own lean
   alternates across the columns, which is what tells two blocks side by
   side apart. */
/* Three layers, and the rows between them. The fills lie behind the
   ruler's rows, so a task given an hour inside
   somebody's meeting prints in front of the block on its own paper
   instead of vanishing under it; the block's marks -- its title, its
   tasks, its two handles and its gutter times -- stand above the rows,
   where the pointer looks for them; the edges above everything, so a
   block's extent is readable however the blocks are layered. */
.db-blocks{position:absolute;inset:0;pointer-events:none}
.db-blocks.fills{z-index:0}
.db-row{z-index:1}
.db-blocks.marks{z-index:2}
.db-blocks.edges{z-index:3}
/* the row's own paper, which is what clears the hatching under its words */
.db-body .tick-row,
.db-body .db-ev{background:var(--paper-hi)}
/* A half hour's tasks side by side, equal columns, each one line, where
   every column can still show a readable title: the columns are set by
   `rowTasks` (daybook.js), one to a line until it has measured the lane.
   The row grows only where they do not all fit across. Mirror of the
   ruler row's grid in DayPage+Ruler.swift. */
.db-rowtasks{display:grid;grid-template-columns:minmax(0,1fr);column-gap:12px;min-width:0}
/* the lane begins past the hour word's column and its air -- the phone's
   `laneX` exactly, and off `--rail` so that widening the column moves
   the lane with it. The `+ 1px` is the retired gutter hairline's own
   pixel, kept so nothing else on the picture moved when the rule went. */
.db-block{position:absolute;left:calc(var(--rail) + 1px);right:0;pointer-events:none}
/* the mark itself -- the paper, the rule and the hatch. It is a lane of
   its own so that a day carrying both blocks and rows can split the two
   without the gutter times leaving the gutter. */
/* the mark is PRINT: the hatch takes no clicks, so the hour line under
   it is still the target it always was. Only the block's own controls --
   its face, its two handles and its gutter times -- take a touch. */
/* the lean alternates across the columns, or down the nest where they
   stack: the fill carries both angles and the block's arrangement picks */
.db-block{--hatch-angle:var(--hatch-nest,45deg)}
.db-block.columned{--hatch-angle:var(--hatch-col,45deg)}
/* The block's own rectangle across the lane. Where its cluster's columns
   can each hold a readable title (`.columned`, set by `drawBlocks`) it is
   column --col of --cols, sharing the lane equally with --block-gap of
   paper between, since a block has no walls and two hatch fields edge to
   edge would read as one; otherwise it stands --nest in from the lane's
   left edge and keeps its right. A block overlapping nothing has the lane.
   Mirrored on the phone (BlockLayout's `across`). */
:root{--block-gap:6px}
.db-blockmark,.db-blockwords,.db-blockedge{position:absolute;top:0;bottom:0;
  left:var(--nest,0px);right:0}
.db-block.columned > .db-blockmark,.db-block.columned > .db-blockwords,
.db-block.columned > .db-blockedge{
  left:calc((100% + var(--block-gap)) * var(--col,0) / var(--cols,1));
  right:calc((100% + var(--block-gap)) * (var(--cols,1) - var(--col,0) - 1) / var(--cols,1))}
/* a column is too narrow for the tasks put with an event */
.db-block.columned .db-blocktasks{display:none}
.db-blockmark{pointer-events:none;
  border-top:2px solid var(--pen);
  background:repeating-linear-gradient(var(--hatch-angle,45deg),
    var(--hatch) 0 1px, transparent 1px 8px), var(--paper-hi)}
/* the block's own words and handles, in the marks layer, measured onto
   the ruler exactly as its fill is */
.db-blockwords{pointer-events:none}
.db-block.over .db-blockmark{border-top-color:var(--pencil);
  background:repeating-linear-gradient(var(--hatch-angle,45deg),
    var(--hatch-pencil) 0 1px, transparent 1px 8px), var(--paper-hi)}
/* The block's foot: one hairline at the end of its span, drawn in a
   second layer over every fill and measured onto the ruler exactly as the
   mark is. A block is its 2px head rule, this hairline and the hatch, and
   nothing on the window stands upright. The element stays, because
   daybook.js reads this layer's rectangle for the grips. */
.db-blockedge{pointer-events:none;border-bottom:1px solid var(--pen)}
.db-block.over .db-blockedge{border-bottom-color:var(--pencil)}
/* The title sits on a clear band at the head: the words are read, not
   hatched through, and the hatching resumes after them.
   A block is three strokes: the 2px head rule, the 1px foot hairline and
   the hatch. The band has no right or foot edge, as the phone's has none
   -- five strokes a block, repeated for a second one, was ten strokes
   and two hatch fields inside one hour. `blockBand()` measures
   the band off this padding, so the row's room for it moves with it. */
.db-blockface{display:block;pointer-events:auto;max-width:100%;text-align:left;
  font-family:var(--body);font-size:15.5px;line-height:1.25;color:var(--ink);
  background:var(--paper-hi);padding:4px 8px 4px 2px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* an event whose end has passed prints in pencil, hatch and border alike */
.db-block.over .db-blockface{color:var(--pencil)}
/* THE BLOCK'S OWN TIME, at the head of its band: it prints only where
   the gutter cannot hold this block's times a row clear of the times
   already in it (drawBlocks measures that), and then the rail keeps its
   hour word alone. Print, in the rail's pencil -- the door to the DATE
   sheet is the card the title opens. */
.db-blockwhen{display:none}
.db-block.crowded .db-blockwhen{display:inline;color:var(--pencil);
  font-size:11px;letter-spacing:.1em;padding-right:5px}
.db-block.crowded .db-blocktime{display:none}
/* the tail of a span that began before midnight: the day did not start
   it, so its title is in pencil -- the desk's own word for "not the
   thing itself, here" -- and the gutter says since when */
.db-block.tail .db-blockface{color:var(--pencil)}
.db-blockface:hover{color:var(--pen)}
/* The rail wears one dress: the block's two times are print, in the
   rail's own pencil, never doors -- a column 52px wide printing hours in
   pencil, a NOON in ink and two underlined doors read as one mixed
   column. The way to the time is the way it is from every other card on
   the desk: the DATE cell on the card the block itself opens. */
.db-blocktime{position:absolute;pointer-events:none;left:calc(-1px - var(--rail));width:var(--rail);padding-right:8px;text-align:right;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;
  color:var(--pencil);background:var(--paper-hi);padding-top:4px}
/* set to the hour words' own baseline -- the word's 9px of air less this
   one's own 4 -- so a block that starts or ends ON an hour line prints
   one mark and not two */
.db-blocktime.head{top:5px}
.db-blocktime.foot{top:100%;margin-top:5px}
/* a hairline's hit is a hand's width though its paint is a hairline: the
   grip straddles the edge it moves, and paints nothing of its own -- the
   mark's head rule and the edges layer's foot hairline are the two lines,
   and a border of its own printed a second hairline under every block. */
.db-grip{position:absolute;pointer-events:auto;left:0;right:0;height:14px;cursor:ns-resize;
  touch-action:none;user-select:none}
.db-grip.head{top:-8px}
.db-grip.foot{bottom:-7px}
.db-grip:hover{background:var(--pen-soft)}
/* tasks put with an event print inside its span, each still a tick and a
   title, each still a task */
.db-blocktasks{padding:2px 0 0 10px;pointer-events:auto}
/* an event with no hour: a hatched bar in the lane the day already has
   for things with no hour */
/* the whole bar is the door, as the whole block is */
.db-bar{border-top:2px solid var(--pen);margin:4px 0;padding:1px 0 5px;
  cursor:pointer;
  background:repeating-linear-gradient(45deg,
    var(--hatch) 0 1px, transparent 1px 8px)}
.db-bar.over{border-top-color:var(--pencil);
  background:repeating-linear-gradient(45deg,
    var(--hatch-pencil) 0 1px, transparent 1px 8px)}
/* the draft's own foot: drag it down the ruler and the task becomes an
   event, the two clock words saying so as it passes each hour */
.db-draftgrip{display:inline-block;width:34px;height:20px;flex-shrink:0;
  border-bottom:2px solid var(--pen);cursor:ns-resize;touch-action:none;
  user-select:none}
/* the draft's end is a time, and a time keeps its lowercase `a.m.`
   (docs/design.md, "Times") though the span wears .mono's face */
.db-draftspan{color:var(--pen);text-transform:none}
/* A row of the ruler is a half hour; face/daybook.js's ROW_PITCH is this
   height, so the two must move together. The hour's word is
   right-aligned in its own column with nothing ruled beside it: the rail
   is a column of words. A half hour wears no word and its foot rule is
   the same ink at half its strength, saying nothing. NOON prints in ink.

   The column is 52, which is what `9 AM` and `10:30` want at this size
   and tracking: a rail names hours, it does not time a thing. `--rail`
   says the column once, because the half hour's rule and the block's two
   times are measured off it. */
:root{--rail:52px}
.db-row{display:flex;align-items:stretch;gap:0;
  padding:0;min-height:33px;position:relative}
/* A row's foot rule is the mark of the half hour it ends on. A row begins
   on the half hour it says and runs to the next, so `.db-row.hour`'s foot
   is the half hour's mark and `.db-row.half`'s is the hour's own rule, as
   the phone's `footRule` has it.

   Both begin at the lane: the rail is a column of words, not a ruled
   margin, and an hour rule running under its own word was a third grid
   printing over the other two. */
.db-row::before{content:"";position:absolute;left:var(--rail);right:0;bottom:-1px;
  height:1px;background:var(--rule);pointer-events:none}
/* The half hour is dashed and subtle, drawn by hand at 3px on and 3px
   off, which is what the phone's `DashedRule` draws: a browser picks its
   own length for a `dashed` border and the two faces would not agree.
   Turned down, but nearer full than a half-strength solid rule would be,
   since a dashed line reads lighter. */
.db-row.hour::before{opacity:.7;
  background:repeating-linear-gradient(to right, var(--rule) 0 3px, transparent 3px 6px)}

.db-hour{width:var(--rail);flex-shrink:0;font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.12em;color:var(--pencil);text-align:right;white-space:nowrap;
  padding:9px 8px 0 0}
/* NOON in the stamp's red (the colour-and-motion ruling, C2) */
.db-hour.noon{color:var(--stamp)}
/* the lane's 10 of left padding is 9 plus the retired gutter hairline's
   own pixel, so the words stand exactly where they stood */
.db-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;
  padding:5px 0 4px 10px}
/* The minute's mark: a hairline in the stamp's red across the lane
   alone, the page's second hand (decisions/2026-09-29-colour-and-motion/
   RULING.md, C1), and nothing outside it. It begins at `--rail`, which is where `.db-row::before` --
   the hour's own rule -- begins, to the pixel. `::before` is the row's
   foot rule and `::after` is this, and the row has no third. Print, never
   a control. */
.db-row.now::after{content:"";position:absolute;left:var(--rail);right:0;
  top:calc(var(--minute, 0) * 100%);height:1px;pointer-events:none;
  background:var(--stamp)}
/* The now line's time (nowTime in face/daybook.js): the rail's words, in
   the stamp's red, centred on the line at the same --minute, set right as
   the hour words are and on the sheet's stock as a block's gutter time is
   (the colour-and-motion ruling, the amendment on the now line's time).
   An hour's word it would stand over gives way: `.yields`, unprinted and
   unheard, its room kept. */
.db-now{position:absolute;left:0;width:var(--rail);box-sizing:border-box;
  padding-right:8px;text-align:right;top:calc(var(--minute, 0) * 100%);
  transform:translateY(-50%);pointer-events:none;z-index:2}
.db-nowshown{display:inline-block;padding:0 2px;background:var(--paper-hi);
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;
  line-height:12px;color:var(--stamp);white-space:nowrap}
.db-hour.yields{visibility:hidden}
.db-ev{display:block;font-family:var(--ui);font-size:12px;color:var(--pencil);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a landing not yet reached: pencil, no tick, the rule said beside it */
.db-ev.ghost{display:block}
.db-ev .ghost-rule{font-family:var(--mono);font-size:11px}

/* A planner row is ONE LINE and keeps its height: the time, then the
   title beside it on its baseline, the title cut with an ellipsis where
   the row runs out and the whole of it one click away on the card (the
   owner, Sep 23, 2026 -- decisions/2026-09-16-times/RULING.md). The time
   never yields, being the row's first words. Mirror of TickRow's HStack
   in ios/Dashboard/Planner.swift. Pencil, never the pen: the pen is where
   you are or what is chosen, and a stamp in it read as a link on a row
   whose title is the only door. */
.db-time{display:inline;font-family:var(--ui);font-weight:600;font-size:11px;
  color:var(--pencil);margin-right:6px}
.db-add{font-family:var(--display);font-size:17px;line-height:1;color:var(--pencil);
  width:32px;height:32px;flex-shrink:0;border:0;background:none;text-align:right;
  cursor:pointer}
.db-add:hover{color:var(--pen)}
.db-row[data-dayadd]{cursor:pointer}
.db-row[data-dayadd]:hover .db-hour{color:var(--pen)}
/* The keyboard's way onto an hour: a button the size of the row that
   draws nothing and takes no pointer, so a click still lands on the row
   and on whatever stands in it. Focused from the keyboard, it outlines
   the row it opens, in the pen, as the hover marks the hour's word. */
.db-key{position:absolute;inset:0;padding:0;border:0;background:none;
  pointer-events:none;outline:none}
.db-key:focus-visible{outline:2px solid var(--pen);outline-offset:-2px}

/* The planner: one anatomy at three altitudes —
   the paper's name as the way home, a head under a 2px rule, the
   instrument, the lane, the one unnamed ruled box, a line from an older
   page. A dated thing is a tick and a title on its row, struck in pencil
   when done and kept where it was. */
.pl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.pl-title{font-family:var(--display);font-weight:700;font-size:34px;line-height:.92;letter-spacing:-.02em;color:var(--ink)}
.pl-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.pl-range{font-family:var(--ui);font-size:12px;color:var(--ink)}
.pl-doors{font-family:var(--ui);font-size:11px;color:var(--pencil)}
/* The planner's pointers name PAPERS -- September, 2026, W36, today,
   this week -- so they are the views line's case, not the one dress's:
   a list of places, never verbs. No hover to the pen, which says
   chosen. */
/* And the line is an underline, hugging the word: a hairline hung under
   the word's box stands nearer the next row than its own at this size,
   where the text's own underline sits where a pen would draw it. The
   phone's `HeadDoor` has it too, and it is the one written exception to
   the fired word's hung line -- a head's date names alone.
   The offset is measured off the phone, not guessed: on the simulator the
   phone's line is one point thick with its top one point under the
   baseline, which is Soehne's own underline metrics (.114 em to the
   line's centre and .075 em thick) rounded up to the whole point the
   screen can draw. So the web says the same thing in its own units: 1px
   under the baseline, 1px thick. Chrome's `auto` offset is the font's
   .114 em to the line's top, which hangs it about a third of a pixel
   lower than the phone at this size, so the length is said rather than
   left to the UA. `skip-ink: none` because SwiftUI's `.underline()` draws
   straight through a descender and Chrome's default breaks around one.
   The words take the ink the phone's do; the sep and the annotations
   beside them stay pencil. */
.pl-doors a{cursor:pointer;color:var(--ink);border-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:1px;text-decoration-skip-ink:none}
.pl-doors .sep{color:var(--rule);margin:0 5px}
.pl-lane{margin-top:18px;border-top:1px solid var(--ink)}
.pl-lanehead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 0 4px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pencil)}
.pl-lanehead .db-add{opacity:1;margin:0}
.tick-row{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-top:1px solid var(--rule)}
.db-body .tick-row{border-top:none;padding:1px 0}
.tick-row .check.small{--tick-words:15.5px;--tick-lh:1.35}
.tick-title{font-family:var(--body);font-size:15.5px;line-height:1.35;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;flex:1;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick-title:hover{color:var(--pen)}
.tick-row.done .tick-title{color:var(--pencil);text-decoration:line-through}

/* The strike takes a beat, as on the phone. A ticked thing leaving the
   sheet in the same frame as the click reads as something having gone
   wrong rather than as a thing finished. The write still goes first, at
   the click -- nothing here may
   delay or risk it -- and then the row is HELD where it stands for the
   grace: the rule draws across the words from the left, the square fills
   behind it in the same direction, a second click on the square unticks
   it and it stays, and only then does the list let it go, fading over
   --strike-leave after it. The rule is a second copy of the
   words laid exactly over the first and wiped in, so a title that wraps
   is struck on every line it takes. */
@keyframes strike-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes strike-fill{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes strike-out{0%,88%{opacity:1}100%{opacity:.14}}
.striking{animation:strike-out calc(var(--strike-grace) + var(--strike-leave)) ease-in forwards}
.striking .check[aria-checked=true]{background:linear-gradient(var(--pen),var(--pen)) left/0 100% no-repeat;
  animation:strike-fill var(--strike-draw) ease-out forwards}
.striking .check[aria-checked=true]::after{animation:strike-draw var(--strike-draw) ease-out forwards}
li.entry.striking .entry-title,.tick-row.striking .tick-title,.tline.striking .tline-words{
  position:relative;text-decoration:none;color:var(--ink)}
li.entry.striking .entry-title::after,.tick-row.striking .tick-title::after,
.tline.striking .tline-words::after{
  content:attr(data-words);position:absolute;left:0;top:0;width:100%;text-align:left;
  text-decoration:line-through;color:var(--pencil);pointer-events:none;
  animation:strike-draw var(--strike-draw) ease-out forwards}
/* a planner row is one line, and so is the copy struck across it */
.tick-row.striking .tick-title::after,.tline.striking .tline-words::after{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* no motion: struck at once, held for the grace, and gone without a fade */
@media(prefers-reduced-motion:reduce){
  .striking,.striking .check[aria-checked=true]::after,
  li.entry.striking .entry-title::after,.tick-row.striking .tick-title::after,
  .tline.striking .tline-words::after{animation:none}
  .striking .check[aria-checked=true]{animation:none;background-size:100% 100%}
}
/* The write box: the frame's second element, on the window's own stock
   under its own 2px rule. Its floor is four ruled lines — the phone's day
   box, one ruled line under 176pt, said in the web's type
   (decisions/2026-09-26-top-weight/) — and it grows with the writing, this
   face's page having no bottom (the written asymmetry). */
.pl-box{margin-top:16px;background:var(--paper-hi);
  border:1px solid var(--rule);border-top:2px solid var(--ink)}
/* the month, week and year pages' own box; the day's is #nbpage below */
.pl-box #scopepage{min-height:120px !important;padding:8px 12px !important}
#nbpage{display:block;width:100%;min-height:152px;background-color:transparent;
  border:none;resize:none;overflow:hidden;font-family:var(--body);font-size:19px;
  line-height:32px;color:var(--ink);padding:12px 13px}
#nbpage:focus{outline:none}
/* the clerk's own words on a page, in her hand: the one dress's plain
   1px line, in her green */
.clerkline{margin-top:10px}
.clerkline button{font-family:var(--mono);font-size:11px;color:var(--clerk);background:none;border:0;padding:0 0 4px;cursor:pointer;
  border-bottom:1px solid var(--clerk)}
.clerk-take{font-family:var(--mono);font-size:11px;color:var(--clerk);background:none;border:0;padding:0 0 4px;cursor:pointer;border-bottom:1px solid var(--clerk)}
.poster{margin-top:6px;border-bottom:2px solid var(--ink)}
.poster-head,.poster-row{display:grid;grid-template-columns:18px repeat(7,1fr)}
.poster-head{border-bottom:1px solid var(--ink)}
.poster-head span{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--pencil);text-align:center;padding:4px 0 5px}
/* turned ninety degrees and centered on its row, as the big calendar's
   gutter is; the head over it goes with the turn */
.poster-wk{font-family:var(--ui);font-size:11px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--pencil);padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.poster-wk span{writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}
/* the numeral is sized from its cell's width as well as its height, as
   the phone's month is (DateStrip.fit): two tabular figures and today's
   outline padding fit a seventh of the narrowest page, never under 11 */
.poster-cell{height:58px;border:0;border-bottom:1px solid var(--rule);background:none;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;container-type:inline-size;min-width:0}
.poster-num{font-family:var(--display);font-weight:700;font-size:clamp(11px, calc((100cqi - 12px) / 1.2), 27px);letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.poster-cell.out .poster-num{color:var(--pencil);font-weight:600}
.poster-cell.today .poster-num{color:var(--pen);box-shadow:inset 0 0 0 1.5px var(--pen);padding:2px 5px 3px}
.poster-marks{position:absolute;bottom:7px;right:7px;display:flex;gap:2px}
.poster-marks i{width:4px;height:4px;background:var(--pen);display:block}
.poster-marks i.done{background:var(--pencil)}
.poster-cell:hover .poster-num{color:var(--pen)}
.wk-strip{margin-top:2px;border-top:2px solid var(--ink)}
.wk-band2{display:grid;grid-template-columns:74px minmax(0,1fr);min-height:66px;border-bottom:1px solid var(--rule)}
.wk-bnum{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:flex-end;padding-right:14px;background:none;border:0;cursor:pointer}
.wk-bnum.future{color:var(--pencil);font-weight:600}
.wk-bnum span{display:block}
.wk-band2.today .wk-bnum{color:var(--pen);padding-right:8px}
.wk-band2.today .wk-bnum span{box-shadow:inset 0 0 0 1.5px var(--pen);padding:4px 6px}
.wk-bnum:hover{color:var(--pen)}
.wk-bcontent{border-left:1px solid var(--rule);padding:9px 0 9px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:none;border-top:0;border-right:0;border-bottom:0;text-align:left;cursor:text}
.wk-bdow{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--pencil)}
.wk-bline{font-family:var(--body);font-size:15.5px;line-height:1.28;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-bline.done{color:var(--pencil);text-decoration:line-through}
/* an event's start before its title, the rail's pencil at 11 (BandEvent) */
.wk-btime{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--pencil);margin-right:6px;text-decoration:none;display:inline-block}
.wk-bline.blank{font-family:var(--ui);font-size:11px;letter-spacing:.14em;color:var(--pencil);font-weight:500}
.wk-bcontent input{width:100%;border:none;border-bottom:1px solid var(--rule);background:transparent;font-family:var(--body);font-size:15px;padding:3px 0}
.wk-bcontent input:focus{outline:none;border-bottom-color:var(--pen)}
.db-older{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--rule);padding:14px 0;cursor:pointer}
.db-older .mono{display:block;color:var(--pencil);margin-bottom:5px}
.db-older-line{display:block;font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink)}
.db-older:hover .db-older-line{color:var(--pen)}
/* the rail's own reading size: a week number is read, not merely
   present, so it prints at the size of the weekday letters over it, in
   the rail's face -- the caps' tracking off. It is TURNED
   ninety degrees and reads upward, like the spine of a book, centered on
   its row: that turn is what sets the week off from the day numerals,
   and it is why the column carries no head. The button keeps the whole
   cell as its hit -- the gutter's width by the row's height. */
.cal-wk{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--pencil);background:none;border:0;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.cal-wk span{writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}
.cal-wk:hover{color:var(--pen)}

.db-addrow{flex:1;display:flex;gap:8px;align-items:center}
.db-addrow input{border-bottom:1px solid var(--rule);font-size:15px;flex:1;
  min-width:0;font-family:var(--body)}
/* on a narrow page the field takes a line of its own, and the draft's end,
   its foot and `never mind` follow beneath it, so an event is never typed
   into a field too narrow to see */
@media(max-width:560px){
  .db-addrow{flex-wrap:wrap}
  .db-addrow input{flex-basis:100%}
}

/* the sheet lights up, gently, when a file is over it */
body.droplit .main{outline:2px dashed var(--pen);outline-offset:-8px}

/* In Hand: what is kept on top, above the capture box. No heading, no
   box, no count, and no height at all when the hand is empty. */
.ribbon-sec{margin-top:26px}
.ribbon-sec .underdeck{margin-top:4px}
/* One card a page, at the sheet's own card width, because a card is the
   same object everywhere it appears. The card is the ul's whole content
   box, which is the pile card's width, and the peek comes out of the
   sheet's margin: the ribbon
   bleeds out through --sheet-pad and lays it back on as its own padding,
   so the first card stands on the text column and the next card's paper
   shows in the margin, the phone's deck said in the pointer's terms. The
   peek takes --ribbon-peek of that margin and the card gap is what is
   left of it (floored, where a narrow sheet's margin is smaller than the
   peek itself). Snapped, so a flick settles a page at a time -- the
   calendar's own manner. */
ul.entries.ribbon{--ribbon-peek:24px;
  display:flex;gap:max(4px,calc(var(--sheet-pad) - var(--ribbon-peek)));
  align-items:flex-start;overflow-x:auto;
  scrollbar-width:none;margin:0 calc(-1 * var(--sheet-pad));
  padding:3px var(--sheet-pad) 5px;
  scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--sheet-pad)}
ul.entries.ribbon::-webkit-scrollbar{display:none}
ul.entries.ribbon li.entry{flex:0 0 100%;margin-bottom:0;
  scroll-snap-align:start;scroll-snap-stop:always}
/* A card kept on top or put back, in the air: a copy fixed over the page
   where the card stood, moved by transform and opacity alone and gone
   when it lands (carryLand in face/today.js). It takes no pointer; the
   card itself is already in its place. */
ul.entries.carry-flight{position:fixed;margin:0;padding:0;z-index:20;
  pointer-events:none;will-change:transform,opacity}
ul.entries.carry-flight li.entry{margin:0}
.desk::-webkit-scrollbar,.cal-frame::-webkit-scrollbar{display:none}

/* The facts, printed as a form along the card's foot: three EQUAL cells,
   so the two dividing rules stand at a third and two thirds of the foot
   on every card at every width -- the phone's own foot exactly.
   Mirror of CardFoot in ios/Dashboard/Card.swift. */
/* The foot is four cells: LABEL · DURATION · DATE and, at the right end,
   REMIND, a proper column with its own eyebrow in the same pencil dress as
   the other three and a mark big enough to read at a glance. The three
   word cells split what remains equally, their two dividing rules still
   at a third and two thirds of that remainder on every card at every
   width, and nothing restacks. See decisions/2026-09-18-the-bell/RULING.md.
   `--bell-cell` is what the eyebrow needs, measured in the browser at each
   step of the ladder below and rounded up by a whole pixel: REMIND sets
   50.0 at 11px with the eyebrow's .12em tracking; the narrow steps below
   keep the earlier word NUDGE's 32.9 at 9.5px plain and 31.2 at 9px
   plain. The cell is fixed at that, so the word can never wrap -- one
   eyebrow wearing two lines beside three wearing one is the fault the
   DURATION ladder exists to avoid. `--bell-mark` is the drawing's own box,
   22px: the mark's ink fills the value's line and stands a few pixels above
   its cap, read against the `Sep 18` beside it. The 11px added to the
   column is the dividing rule and
   its 10px of air, which every cell after a rule carries (below). */
.ffoot3{--bell-cell:51px;--bell-mark:22px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)) calc(var(--bell-cell) + 11px);
  border-top:var(--foot-rule) solid var(--pen);margin:11px -14px -12px;padding:9px 14px 11px}
/* the card's one colour: the rule between its words and its foot, in the
   pen, and the rule colour once the card is done. Its weight is one
   constant, the phone's CardFoot.rule. */
li.entry.done .ffoot3{border-top-color:var(--rule)}
/* and it crosses the whole card, as the phone's foot does: on a card with
   a tick the foot reaches back past the tick's column (the tick, 18px
   words at .88, and the row's 13px gap) to the card's own padding */
li.entry > .check + .entry-body .ffoot3{margin-left:calc(-27px - 18px * .88)}
/* Nothing a cell holds may cross the rule that ends it -- the rules are
   the thing the foot is read by, and a fact reaching over one is worse
   than a fact cut short. */
.f{min-width:0;overflow:hidden}
/* the one word that declines, under the date it declines: pencil, bare */
.fskip{display:block;margin-top:4px;font-size:12.5px}
/* the two days a pencil phrase could mean, under it: pencil, bare, and a
   tap on one binds it. On one line with the dot between where the cell
   holds both; where it does not, the second wraps under the first. The dot
   is set in a box of its own width, centred, so the air either side is
   equal, and it rides at the head of the second reading: each piece after
   the first steps back by the dot's width (the one before leaves that much
   room behind it), so mid-line the dot lands in that room and at the head
   of a wrapped line it falls past the edge and is clipped. Mirror of
   CardFoot's `readingsRow` (ios/Dashboard/Card.swift). */
.freadings{display:flex;flex-wrap:wrap;align-items:baseline;overflow:hidden;
  margin-top:4px;font-size:11px;color:var(--pencil)}
.fone{white-space:nowrap;margin-right:.8em}
.fone + .fone{margin-left:-.8em}
.fdot{display:inline-block;width:.8em;text-align:center}
.freading{padding-bottom:0}
/* The gutter is the phone's own: the rule, then 10px of air inside the
   cell that follows it, and nothing before it -- `Rectangle().frame(width:
   1).padding(.trailing, 10)` in CardFoot, said in CSS. Air on both sides
   of the rule would leave a third of a phone-width cell (47px of 74px)
   for a DURATION head that needs 65px. */
.f + .f{border-left:1px solid var(--rule);padding-left:10px}
/* A label wraps inside its own cell rather than running over the rule
   beside it: DURATION is the widest of the three and on a
   narrow card its cell is narrower than the word, which printed it
   straight across the divider. The values already ellipsize. */
/* The foot's eyebrow is pencil, always: caps in
   ink never appear without a line, or caps alone start to mean touch.
   Both faces. */
.flabel{display:block;font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);
  line-height:1;margin-bottom:6px;overflow-wrap:break-word}
/* And it never breaks, and never shrinks: 11 is the floor
   (decisions/2026-09-28-review-leftovers/RULING.md, the list B amendment,
   item 10). The cells stay equal thirds and nothing restacks; at a
   phone's width the eyebrow gives up its tracking, which is the one thing
   on the foot that can yield. The four words -- LABEL, SIZE, DATE, NUDGE
   -- are short enough to stand at 11 plain down to 320: measured there,
   LABEL, the widest word cell's eyebrow, is 34 in a cell of 55. The
   fourth cell is sized to its own word (`--bell-cell` above). */
@media (max-width: 560px){
  /* NUDGE measures 38.3 at 11px plain, so 39 is what the cell asks for */
  .ffoot3{--bell-cell:39px}
  .flabel{letter-spacing:0}
  /* the values give up a point and a half: at 375 the DATE cell is 65
     and `12:00 p.m.` wants exactly 65 at 12.5, which is no margin at all
     for the line the clock takes */
  /* the bell's seat is a value's line box, so it steps where the value does */
  .ffoot3 .fval, .ffoot3 .bell{font-size:12px}
}
@media (max-width: 360px){
  /* the values step down to the floor and no further. At 360 an event's
     second clock (`12:30 p.m.`) no longer fits its line at 11 and breaks
     before `p.m.`; at 320 both clocks broke already at 10. That is the
     cost of the floor, said here so it is not taken for an oversight. */
  .ffoot3 .fval, .ffoot3 .bell{font-size:11px}
}
/* and the value is a door printed as a value: ink, no line. Three more
   rules in a foot that already carries two dividers and the card's edge
   said less than the one tap a person learns once and finds on every
   card. */
.fval{display:block;font-family:var(--ui);font-size:12.5px;font-weight:500;
  color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdoor{background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* The DATE takes a second line, alone of the three. A repeat rule rides
   that fact after the date -- "Sep 11 · monthly on
   the 11th" -- and at a phone's width one line cut it to "Sep 11 ·…",
   which says the card repeats and never says how. LABEL and DURATION
   stay one line. Mirror of `cell(.date, …, lines: 2)` in CardFoot,
   ios/Dashboard/Card.swift. */
.ffoot3 .fdoor[data-fact$="|date"]{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;white-space:pre-line;overflow:hidden}
/* a date phrase the desk saw and could not read: the owner's own words,
   in pencil, on the same door as every other fact on the foot */
.fdoor.said{color:var(--pencil)}
/* The bell's cell, a column like the other three: its eyebrow is an
   ordinary `.flabel` in the same dress, and everything the cell holds is
   set flush left from its own gutter, exactly as LABEL, DURATION and DATE
   set theirs -- one rule for every cell on the foot, rather than a
   centred square at the end of a row of columns.
   The mark stands on the value's line: the button is as tall as a value's
   line box and no taller (the value's own size and line height, so it takes
   every step of the ladder with them), and the drawing overflows it evenly.
   At the desktop step that is a 22px box on a 15.6px line, which puts the
   bell's ink about 4px above the value's cap and a hair below its baseline
   -- read against `Sep 18` in the cell beside it. Nothing on the foot moves
   for the growth: the line is the same line, the overflow is allowed by the
   cell alone (which has no text of its own to spill), and the DATE cell
   wrapping to three lines leaves the mark where it was.
   The hit overhangs the mark by 9px top and bottom and 5px each side, taken
   back by the same negative margins, which is the house's 32px target on a
   mark that is smaller than one. Mirror of the bell's cell in CardFoot,
   ios/Dashboard/Card.swift. */
.fbell{overflow:visible;display:flex;flex-direction:column;align-items:flex-start}
.bell{box-sizing:content-box;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;line-height:1.25;width:var(--bell-mark);height:1.25em;
  padding:9px 5px;margin:-9px -5px;
  background:none;border:0;cursor:pointer;color:var(--pencil)}
/* the two states, and nothing else moves between them: the same silhouette
   on the same grid, both FILLED -- the pencil bell with the strike cut
   through it when the bell is off, the whole bell in the pen when it is
   armed -- so `color` is the only thing the state changes */
.bell.armed{color:var(--pen)}
.bell svg{display:block;flex:none;width:var(--bell-mark);height:var(--bell-mark)}
button.fval.blank{border:0;background-color:transparent;cursor:pointer;padding:0}
/* ---------- a fact's own pop-out ---------- */
/* Clicking a fact on a card's foot opens THAT fact and nothing else, on
   a small square of paper hung under the cell it came from. Hairline
   border, the house's one shadow -- the same lift a card in the hand
   wears -- and no corner. Where a screen is too narrow to hang anything,
   it lies along the foot of the window instead, only as tall as what it
   holds. Mirror of FactSheet in ios/Dashboard/Editor.swift. */
.factpop{position:absolute;z-index:60;background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:14px 16px 16px;
  min-width:206px;max-width:330px;
  box-shadow:0 5px 14px color-mix(in srgb, var(--ink) 16%, transparent),
             0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent)}
.factpop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;
  max-width:none;padding:16px 18px 24px;border-left:0;border-right:0;border-bottom:0}
.factpop .flabel{margin-bottom:8px}
.factpop .words{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:baseline}
.factpop .word.pick{border:none;background:none;padding:9px 0 4px;margin:0;
  font-family:var(--ui);font-size:13.5px;letter-spacing:0;text-transform:none;
  font-weight:400;color:var(--pencil);cursor:pointer}
/* chosen in the pen under a pen hairline, as every row of choices is */
.factpop .word.pick.on{color:var(--pen);font-weight:600;border-bottom:1px solid var(--pen)}
.factpop .word.pick.letgo{color:var(--pencil);font-weight:400;text-decoration:line-through}
.factpop .word.pick.letgo:hover{color:var(--pencil)}
/* BEFORE: the chapters one to a line, in the hand they are written in;
   the one being moved prints pencil and bare, never ruled through -- the
   strike already means Completed's line and a label leaving on the fold,
   and one mark may not say a third thing. */
.factpop .words.before{flex-direction:column;align-items:stretch;gap:0}
.factpop .words.before > *{display:block;width:100%;text-align:left;
  font-family:var(--body);font-size:15px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink);padding:10px 0;
  border-bottom:1px solid var(--rule)}
.factpop .words.before > *:last-child{border-bottom:0}
.factpop .words.before .self{color:var(--pencil);cursor:default}
.factpop .words.before .last{font-family:var(--ui);font-size:13.5px;font-weight:500}
/* the pop-out's own doors -- PICK A DATE, AT A TIME, REPEATS, and the
   span line's two hours -- wear the one dress like every other word
   that fires */
.factpop .doors{display:flex;gap:22px;margin-top:10px}
.factpop .pickers{margin-top:10px}
/* One line of fact, not flavour: the web cannot ring, so a reminder set
   here says who rings it. Pencil, no rule -- it is print, and there is
   nothing to tap. */
:is(.factpop,.editor) .factfact{font-family:var(--ui);font-size:11.5px;color:var(--pencil);
  margin:8px 0 0;line-height:1.35}
/* the cadences behind the DATE pop-out's third door stand off its row
   of doors exactly as the browser's own date field does */
.factpop .cadences{margin-top:10px}
/* The NUDGE sheet: the browser's own drop-downs, one to a row under the
   house hairline, the row's name in ink at the left and the value in the
   pen at the right -- the platform's menus, one of the exceptions to
   "every control is a word" (docs/design.md). A row that cannot be used
   yet stays where it is, greyed. The Rings line above them is print, in
   the pen: a thing the person chose, said back (the colour-and-motion
   ruling, C4). */
:is(.factpop,.editor) .nudgerings{font-family:var(--ui);font-size:12.5px;color:var(--pen);
  margin:0 0 6px;line-height:1.35}
:is(.factpop,.editor) .nudgerows{min-width:260px}
.factpop.sheet .nudgerows{min-width:0}
:is(.factpop,.editor) .nudgerow{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:4px 12px;min-height:40px;
  border-top:1px solid var(--rule)}
:is(.factpop,.editor) .nudgerow:first-child{border-top:0}
:is(.factpop,.editor) .nudgename{font-family:var(--ui);font-size:13.5px;color:var(--ink)}
:is(.factpop,.editor) .nudgerow select{font-family:var(--ui);font-size:13.5px;color:var(--pen);
  background:transparent;border:0;padding:8px 0;max-width:100%;cursor:pointer;
  text-align:right}
:is(.factpop,.editor) .nudgerow select:focus-visible{outline:1px solid var(--pen);outline-offset:2px}
:is(.factpop,.editor) .nudgerow.off .nudgename,
:is(.factpop,.editor) .nudgerow.off select{color:var(--pencil);opacity:.55;cursor:default}
:is(.factpop,.editor) .nudgerow input{margin:0 0 8px auto;color:var(--pen)}
/* The span line: two doors and a printed dash, with
   `all day` at the row's right. The two ends of one dash need no caption
   to say which is which, so neither is labeled. */
.factpop .spanline{margin-top:10px;gap:2px 10px}
.factpop .spanline .word.pick{margin-left:auto}
.factpop .spandash{color:var(--pencil);font-family:var(--ui);font-size:12px}
.factpop input{font-family:var(--ui);font-size:13.5px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:4px 0}
.factpop input:focus{outline:none;border-bottom-color:var(--pen)}
/* The one door under the label board: a word the desk
   does not know yet. It stands off the board the way the DATE pop-out's
   doors stand off theirs, and when it is opened it becomes the house's
   underline field -- the pop-out's own field dress, above -- in the place
   the word stood, taking the row's whole width. */
.factpop .coin{margin-top:12px}
.factpop .coinline{flex:1;min-width:130px}
.factpop .coinline::placeholder{color:var(--pencil)}
.lboard{margin-top:14px}
.lband{margin-bottom:14px}
.lband-head{color:var(--pencil);display:block;margin-bottom:7px}
.lstrips{display:flex;flex-wrap:wrap;gap:7px}
.lstrip{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:var(--paper-hi);
  border:1px solid var(--rule);padding:6px 10px;cursor:pointer}
/* no hover to the pen: the pen says chosen, and a strip's own box is its
   affordance */
/* `all labels →` is a strip like the others, in pencil: nothing on the
   sheet is dotted or dashed (docs/design.md, "Every control is a word") */
.lstrip.more{color:var(--pencil)}
.lcomplete{margin-bottom:12px}

/* The one fact about a binder that is about the binder and not about
   you: beside the name at the row's right end, never beneath it, in the
   foot's one date form. A binder never bound prints nothing, and the
   blank is not a reproach. */
.drow-bound{font-family:var(--ui);font-size:11px;font-weight:500;
  color:var(--pencil);margin-left:auto;padding-left:10px;white-space:nowrap}
/* The kinds on the new-list form are words in the option dress
   (docs/design.md): the chosen kind in the pen over a pen hairline the
   word's width, the others pencil and bare, no border and no fill, one
   kind to a line at the reading size. */
.kindrow{display:block;align-self:flex-start;text-align:left;background:none;
  border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:4px 0 4px;margin:0;color:var(--pencil);cursor:pointer}
.kindrow.on{color:var(--pen);border-bottom-color:var(--pen)}
.kindname{display:block;font-family:var(--ui);font-weight:500;font-size:12.5px;
  letter-spacing:.06em}
.kindrow.on .kindname{font-weight:600}
/* `other kinds`: a link, so the acting word's dress, at the rows' own
   size, the word's width and no wider, standing where the three will stand
   (list B, item 16) */
.roomform .kindmore{align-self:flex-start;font-size:12.5px;padding-top:2px;margin-bottom:0}

/* An empty cell shows nothing under its eyebrow (decisions/2026-10-05-
   polish/RULING.md, item 6): the value's line held blank, the cell's
   width, so every foot keeps one height and the blank is still the door
   to its fact. Nothing on screen is dotted. */
.fval.blank{height:calc(12.5px * 1.25);width:100%}
.day-gap{color:var(--pencil);padding:1px 0 1px 18px;font-size:11px;
  letter-spacing:.35em;line-height:1}
/* `earlier`, over the strip's first hour: the house's word, set where the
   lane begins (decisions/2026-10-05-polish/RULING.md, item 2) */
.day-earlier{margin:0 0 2px 60px;padding-top:6px}

/* Ruling belongs to a piece of paper, not to the world. The calendar,
   Tasks and Completed sit on the plain desk; the month is its own sheet. */
.main.plain{background-image:none}
.main.plain::before,.main.plain::after{display:none}
.cal-grid{background:var(--paper-hi);
  border:1px solid var(--rule);
  border-radius:0;overflow:hidden}

/* ---------- the paper rack: each notebook picks its stock ---------- */
.paper-head{display:block;color:var(--pencil);margin:16px 0 0}
.paper-rack{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 0}
/* the one door inside the clerk's disclosure: the one dress -- ink
   under the ink hairline -- kept at the sentence's own size and face,
   because it stands inside that sentence and not in a row of its own */
.disclosure-door{display:inline;padding:0;margin:0;line-height:inherit;font:inherit}

/* ---------- a notebook's page: one field, and nothing else ----------
   The words fill the sheet and the field grows with them: a page has no
   bottom, so it never scrolls inside itself. The first line is the
   title, which is a fact about the page and not a second face on it. */
/* The page's head and its one address: the notebook's name at 34 in the
   date numeral's weight, as a list's head is set (.pl-title), and a door
   to the sheet of notebooks. It stands above the words rather than under
   the title, the title being the first line of the one field the page is
   (decisions/2026-09-26-top-weight/, N1 modified). */
.nbhead{display:block;width:100%;margin:18px 0 0;padding:0;background:none;border:none;
  text-align:left;cursor:pointer;font-family:var(--display);font-weight:700;font-size:34px;
  line-height:.92;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
/* the chevron after the name: a third of the name's size in pencil, its
   middle lifted to the middle of the capitals (cap height .718em, so the
   .33em mark's foot stands at .19em), bound to the name's last character
   so it never wraps alone. Mirror of NotebookBook's `head`. */
.nbtail{white-space:nowrap}
.nbchev{display:inline-block;width:.33em;height:.33em;vertical-align:.19em;color:var(--pencil)}
.nbleaf{margin-top:2px}
/* The pad is a box (the notebook's leaf alone -- a chapter's page is not
   a memo pad): the day box's anatomy, the sheet's stock with a hairline
   round it, its top edge the day box's 2px ink rule and the binding
   directly beneath -- a clean band in the pen, 28px, the proportion of a memo pad's top band, no
   perforation, stitches, holes or shadow. It covers the typing area only;
   the drawer's stock inside is `plain` by default, so the leaf is blank
   paper in a box. Mirror of NotebookBook's binding and box. */
.nbleaf.nbpad{margin-top:8px;background:var(--paper-hi);border:1px solid var(--rule)}
/* under the head, the pad's top edge is ONE heavy rule -- the planner's
   2px of ink -- and the band sits directly beneath it */
.nbhead + .nbleaf.nbpad{margin-top:14px;border-top:2px solid var(--ink)}
/* the card band's own paint, not the pen full, which was too vibrant */
.nbpad .nbbind{height:28px;background:var(--pen);opacity:.55}
.nbpad #nbleaf{padding:6px 10px}
/* background-COLOR, not the shorthand: the shorthand would also clear
   the stock the field is printed on, which the id would then outrank */
#nbleaf{display:block;width:100%;min-height:60vh;background-color:transparent;border:none;
  resize:none;overflow:hidden;font-family:var(--body);font-size:19px;line-height:32px;
  color:var(--ink);padding:6px 0}
#nbleaf:focus{outline:none}
/* THE STOCKS. Every one is drawn off the type: --pitch is the field's
   own computed line-height and --rule-at its first baseline, both
   measured in ruleTheLeaf(), and the cell is that same pitch in both
   directions so it is square. The writing sits ON the rule, one line per
   rule, as it does on real paper; the grid's verticals begin at the
   text's own left edge; a dot stands at each cell corner, which puts a
   row of dots on every baseline; and the steno pad is that same ruling
   with the one center rule down it. Never a picture of
   a notebook. Mirror of RuledTextView.Ruled on the phone.
   The rules start at the first baseline and run down: their layer is not
   repeated, so no tile wraps a rule into the space above the first line. */
.nbstock{
  --stock-rule:color-mix(in srgb, var(--ink) 10%, transparent);
  --stock-dot:color-mix(in srgb, var(--ink) 28%, transparent);
  /* the steno pad's center rule: the pen is a dark saturated ink, so 16%
     of it sits at about the lightness 10% of the ink does */
  --stock-centre:color-mix(in srgb, var(--pen) 16%, transparent)}
.paper-ruled.nbstock,.paper-grid.nbstock,.paper-steno.nbstock{
  background-image:repeating-linear-gradient(to bottom,
    var(--stock-rule) 0, var(--stock-rule) 1px,
    transparent 1px, transparent var(--pitch, 32px));
  background-position:0 var(--rule-at, 31px);
  background-repeat:no-repeat}
/* the grid adds the verticals at the same pitch: a square cell, one
   vertical to a tile a pitch wide, so they step out both ways from the
   text's left edge */
.paper-grid.nbstock{
  background-image:
    repeating-linear-gradient(to bottom, var(--stock-rule) 0, var(--stock-rule) 1px,
      transparent 1px, transparent var(--pitch, 32px)),
    linear-gradient(to right, var(--stock-rule) 0, var(--stock-rule) 1px, transparent 1px);
  background-position:0 var(--rule-at, 31px), var(--grid-at, 0px) 0;
  background-size:auto auto, var(--pitch, 32px) 100%;
  background-repeat:no-repeat, repeat-x}
/* the dots: one per tile, at the tile's center, the tile laid half a
   cell back so the dot lands on the crossing */
.paper-dots.nbstock{
  background-image:radial-gradient(circle at center,
    var(--stock-dot) 0 0.75px, transparent 0.85px);
  background-size:var(--pitch, 32px) var(--pitch, 32px);
  background-position:var(--dot-x, 0px) var(--dot-at, 15px);
  background-repeat:repeat}
/* The steno pad (the Gregg ruling): the ordinary rules at the type's own
   pitch, plus the ONE vertical rule down the center that divides the pad
   into two columns -- red or blue on a real pad, the pen here. The line
   is one image of its own so it is drawn once at full height rather than
   tiled, and it rides the element's own background, so it scrolls with
   the page exactly as the rules do. */
.paper-steno.nbstock{
  background-image:
    repeating-linear-gradient(to bottom, var(--stock-rule) 0, var(--stock-rule) 1px,
      transparent 1px, transparent var(--pitch, 32px)),
    linear-gradient(to right, var(--stock-centre) 0 100%);
  background-position:0 var(--rule-at, 31px), 50% 0;
  background-size:auto auto, 1px 100%;
  background-repeat:no-repeat, no-repeat}
/* The paper's specimen, under the rack: three lines of the owner's hand
   on the stock chosen above, at the page's own size and drawn by the
   page's own rule, on the sheet's stock inside the card's own walls. It
   takes no clicks -- it is print, like the Look's specimen card it is
   modelled on. */
.spec-paper{margin:12px 0 0;padding:12px 8px;white-space:pre-wrap;
  font-family:var(--body);font-size:19px;line-height:32px;color:var(--ink);
  background-color:var(--paper-hi);border:1px solid var(--rule);border-radius:0}
/* INK ON A PAGE. The phone lays its canvas over the text view at the
   page's own origin, and the picture of that ink is drawn at the page's
   width: so here it lies over the field, at the field's width, taking no
   clicks -- the caret still goes to the words beneath. */
.inkpage{position:relative}
.inkpic{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}
/* The picture is the record: the day ink on a clear ground, so it opens
   right in any other tool. Under the lamp a near-black stroke would vanish
   into the buff, so its lightness is turned over -- the ground stays clear,
   the ink comes out light, close to the night set's own ink -- and the hue
   is turned back so a coloured family keeps its colour. No card behind it:
   a bright slab on a night page is the thing the lamp is for avoiding. */
body.night .inkpic{filter:invert(1) hue-rotate(180deg)}
/* words a machine read off the handwriting are not the owner's hand */
.inked{color:var(--pencil)}
.nbleaf-note{margin:6px 0 0;color:var(--pencil)}
.nbleaf-note:empty{display:none}
/* a chapter says its length once, under the last line, in pencil */
.chap-count{margin:2px 0 0;color:var(--pencil)}
.chap-count:empty{display:none}
/* the notes put with a chapter stand under its words past a hairline:
   position is the string, so nothing is pinned and nothing is drawn */
.nbleaf + .run{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
/* New page: the acting word at the head of a newest-first run, where a
   new page actually is. */
.nb-new{margin:2px 0 6px}
/* The Daybook's contents: its other pages as doors at the head, then the
   eyebrow over the run of day pages. The doors are a row of chosen words
   a stranger has to find and click, so they are set at the reading size
   rather than the pl-doors 11px an annotation wears. */
.db-spine-title{margin:6px 0 10px}
.db-spans{margin:0 0 14px;font-size:12.5px}
.db-pages{margin:0 0 6px}
/* a fact printed and not offered: a day page's LABEL is Daybook, pencil,
   no door -- and printed, not pressed, so it keeps its own plain case */
.fval.printed,.word.printed{color:var(--pencil);background:none;border:0;border-bottom-color:transparent;cursor:default;text-decoration:none;text-transform:none}

/* The subscription's offer line (face/house.js, planOfferHTML): a quiet
   sentence in pencil at the reading size, `try it free` and the decline
   under it. On Today it stands under the capture box, above the cards;
   in the LABEL and SIZE pop-outs, under the words. Mirror of PlanOffer in
   ios/Dashboard/Purchase.swift. */
.planoffer{max-width:62ch;margin:10px 0 0}
.planoffer-said{font-family:var(--ui);font-size:12.5px;line-height:1.45;
  color:var(--pencil);margin:0}
.factpop .planoffer{margin-top:14px}
/* the page about the subscription: the Daybook's in its place, or the one
   the offer opens */
.planpage .set-note{margin-top:14px;max-width:62ch}