/* systems.css — ROUND 11C (Bill, S17: "people are going to want to try to make sense of what Collabot.dev is. The physical systems that make it
   work are important for people to see what it is" · "I want people to see this guy and these bots are doing a lot" · his principle: land on a
   screen and mess with a widget rather than scroll; the words are Envoi's; the surface is Dana's).
   THE SYSTEMS PANEL: the ten systems as a DIRECTORY LISTING with a CURSOR, beside THE RECORD (the read-out) — the terminal's own idiom, and the
   kit's own part (css/ui.css .ui-list: "the terminal's selection list. The cursor is inverse video; arrow keys move it"), built in round 2 and
   never used on the site until now. Why not the drum (the wheel's and the roster's grammar): a drum shows part of a file and turns to the rest;
   ten names fit the panel whole, and his point is breadth — every name and every state in view at once, at rest and while reading; a drum
   landing on the seventh would have scrolled six names out of sight. The listing: one row per system, the machine name (the file's id — the word
   the prompt would type) at the left and its STATE at the right, in the small mono tier; the row under the cursor is inverse video — the site's
   "current" mark (the nav's command, the heading tier), not a glow. A row whose state does not fit beside its name wraps it under (flex-wrap: the
   longest, small-things · built and running, some migrating, needs ~340 px). THE RECORD beside it: the landed system's card — the display name,
   its STATE STAMP(S) (the kit's tag, css/ui.css .ui-tag: a 1 px box in the small mono tier, uppercase — a stamp on a form; a label is content and
   is never softened), the paragraphs at the copy's size, and for the two open-source systems the repository's address (built by js/systems.js from
   the open-source table on the area's first screen — one source).
   Move the cursor: the arrow keys (the listing takes focus; PageUp/Down three, Home/End the ends), a click on a row, or the wheel over the listing
   (a detent, a row; the event never reaches the reel). No verb — the record follows the cursor. No hover-only state. Script off, or the screens
   layer off: the entries are the plain list (the name, the state, the words) and the listing is not built.
   ==== ROUND 16 (Bill, S20 §5 U3 / U4 / E1, 2026-09-14): THE PANEL FILLS THE SHEET AND THE RECORD PAGES. The block wears data-fill — the frames
   engine (js/fx-screens.js) measures it at its minimum (the listing beside, or over, a record window of --s-min px) and hands the frame's slack
   back as --fill-h; the panel is that tall, and the record's window takes what the listing (the phone) and the -- SCROLL -- row leave — the
   grid's middle track — as print's windows do (css/print.css, round 15). THE RECORD IS A WINDOW: the landed card's blocks are rows the pager
   (js/pager.js — the site's inner scroll) packs into pages; a page draws in through the draw order, no scrolling within, on any screen; the line
   under it (-- SCROLL -- · 1/2) only while the card has more than one page. On the desk the window is the track the fill gives it (~590 px at
   1440 × 900) and every card fits on one page; at 1280 × 720 the longest (small-things, ~434 px) turns a page; a phone's page is its own. Round
   11C's record sized by construction (every entry in one grid cell; --s-win, the phone's 300 px scroller) is retired: the track sizes it. The
   listing's box runs to the panel's foot beside the window (the tree's rule in print). A SHORT SCREEN keeps 11C-4's two-column `ls`.
   The section is PINNED (index.html data-pin; the engine's U1): one screen; past the fitted range it clips. Knobs ?s-*= (the bench's section). */
:root{
  --s-list:45;   /* % of the panel the listing takes on the desk; the record takes the rest (the phone stacks them) */
  --s-row:24;    /* px a row of the listing is at least — one line: the id, the state; a state that does not fit wraps under and the row grows */
  --s-min:240;   /* px the record's window is AT LEAST — what the engine measures the panel at; the frame's slack adds the rest (round 16; round 11C's --s-win 0 / 300 / 240 / 140 is retired: the desk's card whole is one page of a taller window); the landscape phone 140 */
}

/* ==== THE PANEL ==== */
.systems{ 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 .systems{ height:var(--fill-h, auto); }   /* round 16 (U3): the engine's fill — the block is as tall as its frame leaves it */
.s-panel{ position:relative; display:grid; height:100%; grid-template-columns:calc(var(--s-list) * 1%) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) minmax(22px, auto);
  grid-template-areas:"list record" "lind rind"; column-gap:20px; row-gap:0; align-items:start; border:1px solid var(--ink); padding:16px 12px 12px; }
.s-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); }

/* ==== THE LISTING: the kit's selection list — a directory of the ten, the cursor inverse; its box runs to the panel's foot (round 16) ==== */
.s-list{ grid-area:list; align-self:stretch; margin:0; padding:0; border:1px solid var(--ink); background:rgba(221,227,232,.6); min-width:0; }
.s-list:empty{ display:none; }   /* script off: never built; the record is the plain list */
.s-list:focus{ outline:none; }
.s-list:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
.s-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:10px; row-gap:1px; min-height:calc(var(--s-row) * 1px); padding:3px 10px 2px;
  border-bottom:1px solid var(--hair); font:500 11px/1.3 var(--mono); letter-spacing:.04em; color:var(--ink); cursor:pointer; }
.s-row:last-child{ border-bottom:0; }
.s-row .id{ white-space:nowrap; }
.s-row .st{ margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); text-align:right; white-space:nowrap; }
.s-row[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.s-row[aria-selected="true"] .st{ color:var(--paper); }

/* ==== THE RECORD: the landed system's card, in a WINDOW that pages (round 16). Script off: the plain list, every entry shown, ruled between ==== */
.s-record{ grid-area:record; min-width:0; }
.s-entries{ list-style:none; margin:0; padding:0; }
.s-entry{ margin:0; padding:10px 0 12px; border-bottom:1px solid var(--hair); }
.s-entry:last-child{ border-bottom:0; }
.s-name{ margin:0; font:700 16px/1.25 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink); }
.s-state{ display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 10px; }
.s-stamp{ display:inline-block; font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); border:1px solid var(--ink); padding:3px 6px 2px; white-space:nowrap; }   /* the kit's tag (.ui-tag), the full ink: at 10 px the 500's strokes want the darkest ink through the mask (round 2A) */
.s-body p{ margin:0 0 10px; font-family:var(--sans); line-height:1.45; max-width:none; }   /* the size is the copy's (css/shell.css: --body-size on the desk, 16 on a phone) */
.s-body p:last-child{ margin-bottom:0; }
.s-link{ margin:10px 0 0; font:500 12px/1.4 var(--mono); letter-spacing:.02em; overflow-wrap:anywhere; }
/* (round 18, U2: the address wears the site's text-link dress — css/shell.css — as every link in the copy does; the table's underline is retired) */
/* the window: the grid's middle track — what the panel's fill leaves after the listing (the phone) and the -- SCROLL -- row; at the minimum (no
   fill: the engine's measure) exactly --s-min. Nothing scrolls within: the rows beyond the page are hidden (the pager) and a row taller than the
   window is clipped, reported. The same construction as print's windows (css/print.css). */
.js.fx-screens .s-record{ align-self:stretch; height:100%; min-height:calc(var(--s-min) * 1px); max-height:var(--fill-h, calc(var(--s-min) * 1px)); overflow:hidden; outline:none; }
.js.fx-screens .s-record:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
.js.fx-screens .s-entry{ padding:2px 0 0; border:0; }
.js.fx-screens .s-entry[hidden]{ display:none; }   /* the other cards */
.js.fx-screens .s-entry .s-body > p[hidden], .js.fx-screens .s-entry > [hidden]{ display:none; }   /* a row on another page of the card */
.pg-ind[data-for="record"]{ grid-area:rind; }   /* the pager's line (css/shell.css) in the panel's last row */

@media (max-width:720px){   /* the phone: the listing over the record; the record's window takes the rest of the fill */
  .s-panel{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) minmax(22px, auto); grid-template-areas:"list" "record" "rind"; column-gap:0; row-gap:12px; padding:16px 10px 10px; }
  .s-list{ align-self:start; }
  .s-row{ padding:3px 8px 2px; column-gap:8px; }
  .pg-ind[data-for="record"]{ margin-top:-4px; }
}
/* A SHORT SCREEN — a short phone, and a phone on its side (round 11C-4, the fit): the card whole made the block taller than the frame, and the
   engine then puts the heading ALONE on a screen and the widget on the next (a block taller than a frame goes to a screen of its own; the engine
   cannot pull the heading with it — 360 × 640 read THE ECOSYSTEM over an empty screen, SCREEN 1 / 2). So on a short screen the listing is an
   `ls` IN TWO COLUMNS of five ids — the states leave the rows and stay on the card's stamp — and the window is what the frame can hold. */
@media (max-width:720px) and (max-height:700px){   /* a short phone: 475 px of room at 360 × 640 — five rows of 24 in two columns (122), the window 240 at least; the panel's gaps and
                                                      padding tightened (round 16: the line's row is 22 more than 11C's block; 471 of 475 at the minimum — the fitted range's edge) */
  .s-panel{ row-gap:8px; padding:14px 10px 8px; }
  .s-list{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(5, auto); }
  .s-row .st{ display:none; }
  .s-row:nth-child(-n+5){ border-right:1px solid var(--hair); }
  .s-row:nth-child(5){ border-bottom:0; }
}
@media (min-width:721px) and (max-height:520px){   /* a phone on its side: 235 px of room — the desk's two columns, five rows of 22 in two columns beside a 140 px window at least */
  :root{ --s-row:22; --s-min:140; }
  .systems{ margin-top:8px; padding-top:8px; }
  .s-panel{ padding:12px 12px 8px; }
  .s-list{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(5, auto); align-self:start; }
  .s-row .st{ display:none; }
  .s-row:nth-child(-n+5){ border-right:1px solid var(--hair); }
  .s-row:nth-child(5){ border-bottom:0; }
}