/* print.css — ROUND 9 (Bill, S16 §9 — the gimmick, his words verbatim in the department's record of that session;
   "print is great" §10; the principle from S17: land on a screen and mess with a widget rather than scroll). THE PRINT AREA: the wheel
   of posts (9-4, the block at the end of this file), and THE PRINTOUT (9-2) — the window that slides in from the right when a post is
   printed. His three candidates for its framing were a computer print-out, paper, or e-ink. The honest one is the first, and specifically
   CONTINUOUS-FORM PAPER — fanfold, tractor-fed: the bureau's plotter drew the projects table (round 5A); its line printer prints the
   report. The framing is the cheapest thing that says "printout" at a glance and nothing more: a sprocket strip down each side with
   the holes real (the monitor shows through them), the perforation beside each strip, a fold every eleven inches, the printer's banner
   line across the top in the machine's face with the CLOSE key, and END OF PRINT at the foot with NEXT. THE PAPER IS PHYSICAL: it lies IN FRONT
   of the monitor — outside .tube, above the CRT overlays — so it wears none of the tube's effects (no dots, no scanlines, no glass, no
   hum): that is the whole point of printing it. It is the pack's own paper — the brand's cream (#F2E9D6) in the brand's ink (#172B30,
   11.4:1) — the one place on the site the pack's ground belongs (the tube's paper is the phosphor's cool grey). INSIDE IT: a plain,
   readable, normal-HTML page — real reading typography, not the terminal's: Archivo at --p-size px on a --p-measure px column,
   headings, paragraphs, lists, a pull-quote, code, a table, an image slot (for the picture-in-picture widget to come — a slot, not a
   design), and a signature line. THE DESK — ROUND 10 (P1, Bill, S18: "on a large monitor, the print out is very far to the right.
   Ideally, the paper would occupy the same general space as the fixed content. Meaning it would 'cover' the main content. This ensures
   that the reader can keep their eyes focused on the same general part of the screen"): the paper PRINTS UP FROM THE BOTTOM (P1a — the
   printer feeds the form up; NEXT feeds it out and back with the next post) OVER THE SHEET — centred, --p-width px wide (P4: 864, the
   grid's own width, so it covers the content exactly on any monitor), from the nav's foot to the bottom of the viewport (the prompt stays
   in view: it types print/<slug> while the paper is open, and a command is a way out); the wheel is a CLOSE away, as on a phone. And
   THE COMPUTER IS DIMMED while the paper is out (P1b — his "disable or blur out the 'computer'… I don't suggest using a blur, because we
   actually had performance issues with css blurring in Collattice and had to remove it"): the monitor's brightness turned down — a flat
   shade of the ink over the tube (.po-dim, --p-shade), no filter and no backdrop-filter anywhere in it; the sprocket holes' blur of round
   9 is gone with it (the dimmed monitor shows through them plain). Under 1100 px, and on a phone, the paper is the viewport wide; the
   phone keeps its whole screen (his "it looks great on mobile, because it fills the whole screen"). Reduced motion the page honours: the
   paper is present, the shade is down, no slide. Script off: the posts are plain articles at the foot of the page, and #print/<slug>
   scrolls to one — the address is honest in both modes.
   Every number is a knob (?p-*= the printout, ?w-*= the wheel; the bench's section *round 9 — the print area*). js/print.js is the life. */

:root{
  --p-slide:360;      /* ms the paper prints up from the bottom (0 = at once; reduced motion the page honours: at once) */
  --p-paper:#F2E9D6;  /* the paper: the pack's cream */
  --p-ink:#172B30;    /* the ink on it: the pack's ink (11.4:1 on the cream) */
  --p-dim:#4a5a66;    /* the paper's small tier (the date line, the banner, captions): 6.4:1 on the cream */
  --p-width:864;      /* px the paper is wide on the desk — the grid's width, centred over the sheet (round 10, P1/P4; round 9: 760 flush right); under 1100 px and on a phone it is the viewport */
  --p-shade:.5;       /* the monitor's brightness turned down while the paper is out: the ink over the tube at this alpha (0 = the monitor as it was) — round 10, P1b */
  --p-size:17;        /* px the body is set at (the phone 16) */
  --p-lh:1.55;        /* the body's line height */
  --p-measure:620;    /* px the column is wide at most (~68 characters of Archivo at 17 px) */
  --p-strip:40;       /* px the sprocket strip is wide each side (the phone 20) */
  --p-hole:12;        /* px a sprocket hole's diameter (the phone 6) */
  --p-pitch:48;       /* px between holes — half an inch (the phone 24) */
  --p-fold:0;         /* px between the fanfold's perforations — a hairline across the paper every eleven inches at 96 dpi (1056); 0 = NONE, the default since
                         ROUND 19 (Bill, S22, U2: "remove the horizontal rules from the print out. I think they are suppoed to represent pages, but it's just
                         distracting") — ?p-fold=1056 draws them again. The banner's rule, the foot's, the header's and the signature's are the page's edges, not folds, and stay */
  --p-pad:32;         /* px of paper between the perforation and the column (the phone 16) */
}

/* ---- the printouts: outside the tube, in front of the monitor. Script off / the screens layer off: a plain block at the foot of the
   stacked page with every post on it (the address #print/<slug> is the article's own id, so it scrolls there natively). */
.printouts{ text-shadow:none; color:var(--p-ink); --paper:var(--p-paper); --ink:var(--p-ink); --key-shadow:2px 2px 0 var(--p-ink); }   /* the kit's parts on this paper wear its cream and its ink */
.printouts .po-sheet{ background:var(--p-paper); }
.printouts .po-head, .printouts .po-foot{ display:none; }
.printouts .post{ border-bottom:1px dashed var(--hair); }   /* the stacked page: the posts one after another, a perforation between */
/* the screens layer on: the paper is a fixed sheet below the bottom edge until a post is printed, then it feeds up over the sheet's column
   (round 10, P1/P1a); the posts are hidden but the printed one */
.js.fx-screens .printouts .po-sheet{ position:fixed; top:var(--nav-top); left:50%; bottom:0; z-index:9; width:calc(var(--p-width) * 1px); max-width:100vw;
  background:transparent; transform:translate(-50%, 100%); visibility:hidden;
  transition:transform calc(var(--p-slide) * 1ms) cubic-bezier(.2,.7,.2,1), visibility 0s linear calc(var(--p-slide) * 1ms);
  box-shadow:0 -10px 28px rgba(23,43,48,.34), 0 -1px 0 rgba(23,43,48,.25); }
.js.fx-screens .printouts.open .po-sheet{ transform:translate(-50%, 0); visibility:visible; transition-delay:0s, 0s; }
.js.fx-screens .printouts.still .po-sheet{ transition:none; }   /* a cold deep link, or reduced motion: the paper is simply there */
@media (prefers-reduced-motion:reduce){ body:not(.fx-motion) .printouts .po-sheet{ transition:none; } }
@media (max-width:1099px){ :root{ --p-width:9999; } }   /* under 1100 px the paper is the viewport (max-width:100vw) */
/* THE SHADE (round 10, P1b): the monitor's brightness turned down while the paper is out — the ink at --p-shade over everything on the
   tube, under the paper; no filter, no backdrop-filter (Bill's fact from Collattice: blur cost frame time and was removed). It fades with
   the paper's own clock and is simply down under reduced motion or on a cold link. Clicks pass through it (the nav's commands are a way out). */
.po-dim{ display:none; }
.js.fx-screens .printouts .po-dim{ display:block; position:fixed; inset:0; z-index:8; pointer-events:none; background:rgba(30,42,56,var(--p-shade)); opacity:0;
  transition:opacity calc(var(--p-slide) * 1ms) ease-out; }
.js.fx-screens .printouts.open .po-dim{ opacity:1; }
.js.fx-screens .printouts.still .po-dim{ transition:none; }
@media (prefers-reduced-motion:reduce){ body:not(.fx-motion) .printouts .po-dim{ transition:none; } }
.js.fx-screens .printouts .post{ display:none; }
.js.fx-screens .printouts .post.open{ display:block; border:0; }
.js.fx-screens .printouts .po-head, .js.fx-screens .printouts .po-foot{ display:flex; }
/* the sprocket strips: paper drawn around real holes (the strip's ground is transparent — the dimmed monitor shows through each hole; round
   9's backdrop-filter:blur on the strip is gone with P1b) */
.po-strip{ position:absolute; top:0; bottom:0; width:calc(var(--p-strip) * 1px); pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent calc(var(--p-hole) * .5px), var(--p-paper) calc(var(--p-hole) * .5px + .6px)) 0 calc(var(--p-pitch) * -.5px) / 100% calc(var(--p-pitch) * 1px) repeat-y; }
.po-strip.l{ left:0; border-right:1px dashed rgba(23,43,48,.35); }
.po-strip.r{ right:0; border-left:1px dashed rgba(23,43,48,.35); }
/* the paper between the strips: the scroller — the folds every --p-fold px ride its content */
.po-scroll{ position:absolute; top:0; bottom:0; left:calc(var(--p-strip) * 1px); right:calc(var(--p-strip) * 1px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  background:var(--p-paper); scrollbar-width:thin; scrollbar-color:rgba(23,43,48,.35) transparent; }
.po-scroll:focus, .po-sheet:focus{ outline:none; }
.po-page{ position:relative; min-height:100%; }
/* the folds — only off 0 (round 19, U2): at the default the cascade carries no background at all; a rule gated on the knob's value, not a value that evaluates
   to nothing (round 10's rule for a knob whose default must be inert) */
@container not style(--p-fold: 0){ .po-page{ background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--p-fold) * 1px - 1px), rgba(23,43,48,.14) calc(var(--p-fold) * 1px - 1px) calc(var(--p-fold) * 1px)); } }
/* the banner: the line the printer prints across the top of the job — the site, the area, the address — and the CLOSE key; sticky */
.po-head{ position:sticky; top:0; z-index:1; align-items:center; gap:12px; padding:9px calc(var(--p-pad) * 1px) 8px; background:var(--p-paper); border-bottom:1px solid rgba(23,43,48,.35);
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--p-dim); white-space:nowrap; }
.po-head .po-job{ color:var(--p-ink); }
.po-head .po-addr{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; letter-spacing:.08em; text-transform:none; }
.po-head .ui-key, .po-foot .ui-key{ flex:none; padding:8px 12px 7px; }
/* the trailer: END OF PRINT, then NEXT — the next post on the wheel feeds through (round 10, P3: no CLOSE here — the banner's is the one; Escape, Back and leaving the area are the others) */
.po-foot{ margin:0; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:22px calc(var(--p-pad) * 1px) 40px; border-top:1px dashed rgba(23,43,48,.35);
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--p-dim); }
.po-foot .po-end{ flex:1 1 100%; text-align:center; margin-bottom:6px; }

/* ---- the post: a plain, readable page. The column is centred on the paper; nothing here is typed or painted (the block is data-plain). */
.post{ max-width:calc(var(--p-measure) * 1px + var(--p-pad) * 2px); margin:0 auto; padding:28px calc(var(--p-pad) * 1px) 48px;
  font:400 calc(var(--p-size) * 1px)/var(--p-lh) var(--sans); color:var(--p-ink); -webkit-font-smoothing:auto; scroll-margin-top:60px; outline:none; }   /* the browser's own fragment scroll on a cold load clears the banner; the post's focus (script) shows no ring */
.post > header{ margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--p-ink); }
/* the header's grammar (round 10, P2 — the same as the wheel's rows): the date line (MM-DD-YYYY in a <time>), the title, the standfirst */
.post .date{ font:500 11px/1.4 var(--mono); letter-spacing:.12em; color:var(--p-dim); margin:0 0 12px; font-variant-numeric:tabular-nums; }
.post h1{ font:700 30px/1.15 var(--sans); letter-spacing:-.005em; text-transform:none; margin:0 0 12px; color:var(--p-ink); text-wrap:balance; }
.post .standfirst{ font:400 19px/1.4 var(--sans); color:var(--p-dim); margin:0; max-width:none; text-wrap:balance; }
/* round 11A (the first real post at its length — 2,900 words, 44 paragraphs): on the desk seven paragraphs ended on a last line under a fifth
   of the measure, one on a single word. text-wrap:pretty lets the engine re-break a paragraph's last lines to avoid that (Chromium 117+,
   WebKit 26); an engine without it breaks as before. The title and the standfirst balance their lines when they wrap. */
.post p{ margin:0 0 1em; max-width:none; text-wrap:pretty; }
.post h2{ display:block; font:700 21px/1.25 var(--sans); letter-spacing:0; text-transform:none; margin:1.7em 0 .5em; color:var(--p-ink); }
.post h3{ font:600 17px/1.3 var(--sans); letter-spacing:0; text-transform:none; margin:1.4em 0 .4em; }
.post a{ color:var(--p-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.post a:hover{ background:var(--p-ink); color:var(--p-paper); text-decoration:none; }
.post ul, .post ol{ margin:0 0 1em; padding-left:1.4em; }
.post li{ margin:0 0 .35em; }
.post li::marker{ color:var(--p-dim); }
.post blockquote{ margin:1.4em 0; padding:2px 0 2px 1.1em; border-left:3px solid var(--p-ink); font-size:1.12em; line-height:1.45; font-weight:600; }
.post blockquote p{ margin:0; }
.post blockquote cite{ display:block; margin-top:.5em; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--p-dim); font-style:normal; }
.post code{ font:500 .88em/1 var(--mono); background:rgba(23,43,48,.08); padding:1px 5px 0; }
.post pre{ margin:1.2em 0; padding:14px 16px; border:1px solid rgba(23,43,48,.35); background:rgba(23,43,48,.05); overflow-x:auto;
  font:400 13px/1.5 var(--mono); letter-spacing:0; color:var(--p-ink); tab-size:2; }
.post pre code{ font:inherit; background:none; padding:0; }
.post hr{ border:0; border-top:1px dashed rgba(23,43,48,.4); margin:1.8em 0; }
.post table{ width:100%; border-collapse:collapse; margin:1.2em 0; font:400 14px/1.4 var(--sans); color:var(--p-ink); }
.post th, .post td{ text-align:left; padding:7px 10px 6px; border-bottom:1px solid rgba(23,43,48,.25); white-space:normal; vertical-align:top; }
.post th{ font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--p-dim); border-bottom:1.5px solid var(--p-ink); background:none; }
.post th:first-child, .post td:first-child{ text-align:left; }
.post tbody tr:last-child td{ border-bottom:0; }
/* the image slot: the picture-in-picture widget's place (Bill, S17 — an 80s VHS still played as video, used anywhere the site shows an
   image; coming, not this round). A slot, not a design: a hairline box at the picture's ratio, the bracketed mark inside it. */
.post figure{ margin:1.4em 0; border:0; background:none; }
.post figure .slot{ display:grid; place-items:center; aspect-ratio:16 / 9; border:1px dashed rgba(23,43,48,.45); background:rgba(23,43,48,.04); }
.post figure .slot mark.pend{ color:var(--p-dim); border-color:var(--p-dim); }
.post figcaption{ display:block; border:0; padding:8px 0 0; font:400 12px/1.5 var(--mono); letter-spacing:.02em; color:var(--p-dim); }
.post > footer{ display:block; margin:34px 0 0; padding-top:14px; border-top:1px solid var(--p-ink); font:400 15px/1.5 var(--sans); letter-spacing:0; text-transform:none; color:var(--p-ink); }   /* the sheet's own footer rule (mono, uppercase, flex) does not reach the paper */
.post > footer p{ margin:0; }
.post mark.pend{ color:var(--p-dim); border-color:var(--p-dim); }

@media (max-width:720px){   /* the phone: the paper is the whole viewport (the nav under it too — "it looks great on mobile, because it fills the whole screen"); narrower strips and holes; the body at 16 */
  :root{ --p-strip:20; --p-hole:6; --p-pitch:24; --p-pad:16; --p-size:16; }
  .js.fx-screens .printouts .po-sheet{ top:0; }
  .post{ padding-top:22px; }
  .post h1{ font-size:26px; }
  .post .standfirst{ font-size:17px; }
  .po-head{ padding-top:8px; padding-bottom:7px; }
}
@media (min-width:721px) and (max-height:520px){ :root{ --p-pad:24; } }   /* a phone on its side: the paper is the viewport (under 1100); the padding eased */

/* ==== ROUND 14 (Bill, S20, 2026-09-14 — "The UI for print is very functional but doesn't work well with the theme of the site. It feels
   too modern. So I want to go with a more traditional layout for print"; his conceptual mockup is for him to describe from, its colours
   and theme not to be applied — his description is the spec): THE POSTS, FILED BY YEAR AND MONTH. The wheel (rounds 9-4 / 10 — the drum,
   the lens at the top as the print line, the keys row with the count) is gone; what stands in its slot is the archive's traditional shape
   drawn out of the site's own parts, nothing new invented:
     the panel    — the comms panel's construction (round 6A): a 1 px box the column's width, its legend (POSTS) cut into the top rule,
                    padded like the kit's notice; the block is one paint item (it wipes in), and its rows are paint items of their own
     THE TREE     — ON A DESK, at the left: the years, each opening on its months — only where there is content (his rule) — the Finder's
                    outline (his "80's Mac beats") out of the kit's selection list (css/ui.css .ui-list: 11 px mono, uppercase, the cursor
                    inverse video) with N6's pixel chevron as the disclosure — turned right while the year is closed, down while open, the
                    nav's own mark for a command that opens; a month's row is its name and its count; the selected month is inverse (the
                    site's "current" mark); the keyboard cursor is the dashed phantom line. --w-fold 1: only the selected month's year is
                    open at load (0 = every year open — the indented listing, the fork not built)
     THE LIST     — beside it: the selected month's posts, one row each — the date (MM-DD-YYYY, round 10's grammar) at the left, the title
                    over the standfirst, and a PRINT key (the kit's keycap, no hover state — W6) at the row's end: the key prints
     -- SCROLL -- — under a window with more than fits (the pager's line, round 8B's P3, in the prompt's face, the chevrons by where the
                    window is); its row is reserved, so nothing below moves when it appears
     THE PHONE    — no tree: a YEAR key (the kit's keycap) opening a pull-down of the years in the nav's menu style (round 8B: 1 px ink,
                    the keycap's shadow, the rows in the keycap's face, the current inverse, rastering down), and the months as STAMPS in
                    the ecosystem's face (css/systems.css .s-stamp: a 1 px box, 10 px mono, uppercase; the selected inverse), over the
                    same list with the date over the title
   The newest month with content is selected at load (his ruling, S20). A month change REDRAWS THE LIST ALONE — js/print.js hands the
   list's rows to the draw order and walks them in turn; the tree, the intro, the prompt, the frame: untouched.
   ==== ROUND 15 (Bill, S20 §4, 2026-09-14 — "this layout is going to be reused in several places, so I want to iterate on this real
   quick… This is still reading way too modern and the scrolling is not following the same convention and beats from the rest of the
   site"): THE PATTERN'S RULES, in the site's own beats —
     1  THE PANEL FILLS THE SHEET ("use the available space… 2/3 of the screen is blank"): the .pl block wears data-fill and the frames
        engine (js/fx-screens.js) hands it its frame's slack as --fill-h — the panel is that tall, and the tree's and the list's windows
        take what the label row and the -- SCROLL -- row leave (the grid's middle track). Without the engine (the stacked page) the windows
        are --w-rows × --w-row, the minimum the engine measures them at.
     D2 THE LIST PAGES LIKE THE SITE'S CONTENT: no scrolling within — the rows that fit the window are a page (packed by their measured
        heights, js/print.js's pager), the rest hidden; a turn erases the page and draws the next through the draw order, row by row.
        -- SCROLL -- under a window with more than one page. The tree pages the same way.
     D1 NO CURSOR ON THE LIST: the print line's bar is gone — PRINT is the row's verb, nothing is "current".
     DK1 NO RULES BETWEEN THE TREE'S ROWS: the outline reads by its indent and its chevrons.
     DK2 THE TREE'S REDRAW, MORE THEMATIC: a year opening DRAWS its months in turn — each row a CRT line wiped in at --w-open ms a row (the
        redraw the list already has, turned up); a year closing runs the screen's own collapse on the group (layers.css crt-off, --w-close).
     M1 THE PHONE'S YEAR PULL-DOWN HANGS OFF THE YEAR KEY, over the stamps: the menu's containing block was the whole controls row (the key
        and the stamps), so top:100% put it under the stamps — the key and its menu share a box of their own now (.pl-yk).
     2  THE X LINK IS OUT of the status line (his "Drop the X.com link"); the address survives on Contact.
   ==== ROUND 16 (Bill, S20 §5 / §6, 2026-09-14): THE PATTERN IS THE SITE'S. The pager is js/pager.js now (every window that pages, at the
   one inner-scroll speed --i-step; --w-redraw retired) and its line is css/shell.css's .pg-ind — -- SCROLL -- at the left, THE PAGE OVER
   THE COUNT (1/3) at the right, opposite it (item 0, his "X/N list/screen indicator anchored to the right side"); a one-page window shows no
   line. The section is pinned (index.html data-pin): one screen; past the fitted range it clips. Nothing else here changed.
   The stacked page (script on, the screens layer off): the same widget at its minimum window, the keys plain #print/<slug> links. Script
   off: nothing is built and the panel is hidden; the posts are the plain articles at the foot. Knobs ?w-*= (the bench's section *round 14 —
   the posts, filed*). */
:root{
  --w-rows:2;     /* rows the windows are measured at — the widget's MINIMUM (the engine's fill adds the rest); the phone 2; a short phone and a phone on its side 1; the stacked page's window */
  --w-row:72;     /* px a row is at least — the date over the title over the standfirst, with the row's padding (the phone 110: the title and the standfirst two lines each; a short phone 92: the standfirst one line; the landscape phone 56: none) */
  --w-tree:180;   /* px the tree's column is wide on the desk (the list takes the rest) */
  --w-fold:1;     /* 1 = only the selected month's year is open at load; 0 = every year open (the indented listing) */
  --w-open:80;    /* ms per row a year's months are drawn in when it opens (each a CRT line; the baud step when that is slower; 0 = the baud step) — round 15 (DK2); round 14 rastered the group in 140 ms whole */
  --w-close:240;  /* ms a year's months collapse when it closes (the screen's own crt-off; 0 = at once) — round 15 (DK2) */
  /* (--w-redraw — ms per row on a month change or a page turn — is retired in round 16: the pager's pace is the site's one inner-scroll speed,
     --i-step in css/shell.css, for every window that pages) */
}
.pl{ position:relative; margin-top:14px; padding-top:8px; }   /* the legend's upper half inside the paint item's box (round 10, W1) */
.js.fx-screens.fx-frames .pl{ height:var(--fill-h, auto); }   /* round 15 (1): the engine's fill — the block is as tall as its frame leaves it */
.pl-panel{ position:relative; display:grid; height:100%; grid-template-columns:calc(var(--w-tree) * 1px) minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) minmax(22px, auto);
  grid-template-areas:"tlab stat" "tree list" "tind lind"; column-gap:20px; row-gap:0; align-items:start; border:1px solid var(--ink); padding:16px 12px 12px; }
.pl-legend{ position:absolute; top:-8px; left:10px; padding:0 6px; background:var(--paper); font:500 10px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.pl-panel:has(> .pl-list:empty){ display:none; }   /* script off: nothing is built; the posts are the plain articles at the foot */
/* ---- the tree column's label (his mock's DATE INDEX) and the list's status line (his mock's "SEP 2026 / 04 DOCUMENTS"): the kit's field
   label (css/ui.css .ui-lbl: 10 px mono, tracked, uppercase, the small tier's ink) — the status line typed in turn, the count read off
   the index (round 15: the X link that stood at its right is gone — item 2) */
.pl-tlab, .pl-stat{ display:flex; align-items:center; min-height:calc(var(--c-sp) * 16px); margin-bottom:8px; font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.pl-tlab{ grid-area:tlab; }
.pl-stat{ grid-area:stat; justify-content:space-between; gap:12px; min-width:0; }
.pl-count{ color:var(--ink); font-variant-numeric:tabular-nums; padding:1px 0; }
.pl-count:empty::before{ content:"\00a0"; }   /* the line keeps its height before the count is written */
/* the windows: the tree's column and the list — the grid's middle track, which is what the panel's fill leaves after the label row and the
   -- SCROLL -- row (round 15); at the minimum (no fill: the engine's measure, the stacked page) exactly --w-rows × --w-row. Nothing scrolls
   within: the rows beyond the page are hidden (the pager, js/print.js) and a row taller than the window is clipped, reported. */
.pl-tree, .pl-list{ margin:0; padding:0; border:1px solid var(--ink); min-width:0; align-self:stretch; height:100%;
  min-height:calc(var(--w-rows) * var(--w-row) * 1px); max-height:var(--fill-h, calc(var(--w-rows) * var(--w-row) * 1px)); overflow:hidden; }
.pl-tree:focus, .pl-list:focus{ outline:none; }
.pl-tree:focus-visible, .pl-list:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
/* ---- the tree: the kit's selection list — a year's line, its months indented under it; no rules between the rows (round 15, DK1) */
.pl-tree{ grid-area:tree; background:rgba(221,227,232,.6); }
.pl-yl, .pl-mo{ display:flex; align-items:center; gap:8px; min-height:24px; padding:3px 10px 2px;
  font:500 11px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.pl-yl[hidden], .pl-mo[hidden]{ display:none; }   /* a row on another page of the tree */
.pl-yl .c{ flex:none; width:7px; height:4px; fill:currentColor; shape-rendering:crispEdges; transform:rotate(-90deg); }   /* the disclosure: N6's chevron, turned right while the year is closed */
.pl-yr[aria-expanded="true"] > .pl-yl .c{ transform:none; }
.pl-mo{ padding-left:25px; }   /* under the year's word: the chevron's 7 and the gap's 8 */
.pl-yl .n, .pl-mo .n{ margin-left:auto; font-size:10px; letter-spacing:.06em; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pl-mo[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.pl-mo[aria-selected="true"] .n{ color:var(--paper); }
.pl-grp[hidden]{ display:none; }
/* DK2: a year closing — its months die as a screen does (layers.css's crt-off: the picture collapses to a line and goes), then hide */
.pl-grp.pl-off{ animation:crt-off calc(var(--w-close) * 1ms) ease-in forwards; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ body:not(.fx-motion) .pl-grp.pl-off{ animation:none; } }
.pl-tree:focus-visible .pl-cur{ outline:1px dashed currentColor; outline-offset:-3px; }   /* the keyboard cursor: the phantom line, only while the tree has the keyboard */
/* ---- the list: a row is the date over the title over the standfirst (his mock's row, round 10's grammar), the PRINT key at the right;
   no cursor (round 15, D1 — the print line's bar of round 14 is gone: nothing on the list is "current") */
.pl-list{ grid-area:list; position:relative; }
.pl-list .row{ display:grid; grid-template-columns:minmax(0, 1fr) max-content; grid-template-areas:"d k" "t k" "s k"; column-gap:14px; align-items:center;
  min-height:calc(var(--w-row) * 1px); padding:7px 12px 8px; border-top:1px solid var(--hair); color:var(--ink); outline:none; }
.pl-list .row[hidden]{ display:none; }   /* a row on another page */
.pl-list .row.pg-first{ border-top:0; }   /* the page's first row carries no rule (the pager marks it — :first-child would be the month's, not the page's) */
.pl-list .row .d{ grid-area:d; font:500 10px/1.4 var(--mono); letter-spacing:.12em; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pl-list .row .t{ grid-area:t; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:2px; font:600 16px/1.25 var(--sans); }
.pl-list .row .s{ grid-area:s; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; margin-top:3px; font:400 13px/1.35 var(--sans); color:var(--ink-2); }
.pl-list .row .k{ grid-area:k; align-self:center; }
.pl-list .ui-key:hover{ background:var(--paper); }   /* round 10 (W6): the PRINT key's rest state is its only state (a press still sits it flush) */
/* ---- -- SCROLL -- · 1/3: the pager's line (round 8B, P3; round 16: the site's — css/shell.css .pg-ind, js/pager.js — with the page over the count
   at its right) under a window with more than one page; its row is reserved (the grid's last row) */
.pg-ind[data-for="tree"]{ grid-area:tind; }
.pg-ind[data-for="list"]{ grid-area:lind; }
/* ---- the phone's controls (not on a desk): the year key and its pull-down, the month stamps. Round 15 (M1): the key and its menu share
   a box of their own (.pl-yk), so the menu hangs directly under the key and over the stamps — the controls row is not its containing block */
.pl-phone{ grid-area:phone; display:none; }
.pl-yk{ position:relative; display:inline-block; }
.pl-year .mn-c{ display:inline-block; width:7px; height:4px; margin-left:8px; vertical-align:1px; fill:currentColor; shape-rendering:crispEdges; }
.pl-year[aria-expanded="true"]{ background:var(--ink); color:var(--paper); transform:translate(2px, 2px); box-shadow:none; }
.pl-year[aria-expanded="true"] .mn-c{ transform:scaleY(-1); }
.pl-menu{ position:absolute; top:100%; left:0; margin-top:3px; z-index:2; min-width:max-content; border:1px solid var(--ink); background:var(--paper); box-shadow:var(--key-shadow); }
.pl-menu[hidden]{ display:none; }
.pl-menu button{ display:block; width:100%; margin:0; padding:10px 14px 9px; border:0; border-bottom:1px solid var(--hair); border-radius:0;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:none; text-align:left; cursor:pointer; }
.pl-menu button:last-child{ border-bottom:0; }
.pl-menu button:hover{ background:rgba(30,42,56,.08); }
.pl-menu button:active, .pl-menu button[aria-current="true"]{ background:var(--ink); color:var(--paper); }
.pl-menu button:focus-visible{ outline:1px dashed var(--ink); outline-offset:-4px; }
/* the months: the ecosystem's stamps (css/systems.css .s-stamp) in a grid of equal cells — his mock's box selector — only the months with content */
.pl-months{ flex:1 1 100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
.pl-months button{ margin:0; padding:6px 6px 5px; border:1px solid var(--ink); border-radius:0; background:none; font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); cursor:pointer; white-space:nowrap; }
.pl-months button .n{ margin-left:6px; color:var(--ink-2); }
.pl-months button[aria-checked="true"]{ background:var(--ink); color:var(--paper); }
.pl-months button[aria-checked="true"] .n{ color:var(--paper); }
.pl-months button:focus-visible{ outline:1px dashed var(--ink); outline-offset:2px; }
@media (max-width:720px){   /* the phone: the year key and the stamps, the status line, then the list — the title and the standfirst two lines each */
  :root{ --w-rows:2; --w-row:110; }   /* a phone row with two lines of title and two of standfirst measures 109–110 */
  .pl-panel{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto minmax(0, 1fr) minmax(22px, auto); grid-template-areas:"phone" "stat" "list" "lind"; column-gap:0; row-gap:10px; padding:16px 10px 10px; }
  .pl-tlab, .pl-tree, .pg-ind[data-for="tree"]{ display:none; }
  .pl-phone{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .pl-stat{ margin-bottom:0; }
  .pl-list .row{ padding:8px 10px 9px; }
  .pl-list .row .t{ font-size:15px; }
  .pl-list .row .s{ -webkit-line-clamp:2; }
  .pg-ind[data-for="list"]{ margin-top:0; }
}
@media (max-width:720px) and (max-height:700px){   /* a short phone (round 15, item 0): one row is the minimum the engine measures; the standfirst one line (a row 92); the status
                                                      line goes — the inverse stamp already says the month and its count — so the intro and the panel share the one screen */
  :root{ --w-rows:1; --w-row:92; }
  .pl-panel{ grid-template-rows:auto minmax(0, 1fr) minmax(22px, auto); grid-template-areas:"phone" "list" "lind"; row-gap:8px; padding:14px 10px 8px; }
  .pl-stat{ display:none; }
  .pl-list .row .s{ -webkit-line-clamp:1; }
}
@media (min-width:721px) and (max-height:520px){   /* a phone on its side (209 px of room on the panel's screen): a row without its standfirst, the label row at the
                                                     sprite's smaller cell, the panel's padding tightened (round 10, W1) */
  :root{ --w-rows:1; --w-row:56; }
  .pl{ margin-top:8px; }
  .pl-panel{ padding:12px 12px 8px; }
  .pl-tlab, .pl-stat{ min-height:24px; margin-bottom:6px; }
  .pl-list .row{ padding:6px 12px 7px; }
  .pl-list .row .s{ display:none; }
}