/* oss.css — ROUND 18 (Bill, S20 §5 — PO1 · PO2 · PO3; S21 §2 "2. Correct."): THE OPEN SOURCE ON THE PRINT PATTERN. His words: "reuse the same
   layout scheme here as print & The Team. Obviously this is even more simplified"; each record "[Title] [Description] [Version/Date] [PM Bot (link
   to bot in The Team)]"; "Include an icon (same downscaled graphics we use for other icons). For now just use a generic 'GitHub' icon"; "Include a
   button to link to the repo. Don't use a hyper link. 'Open' is fine"; PO3 — the original repo's row leaves. Nothing here is new: every part is the
   pattern's (rounds 14–17). THE PANEL is the team's (css/team.css): a 1 px box the column's width, OPEN SOURCE cut into its top rule, the block one
   paint item; it wears data-fill, so the frames engine (js/fx-screens.js) measures it at its minimum and hands it the frame's slack; the section is
   pinned (data-pin — round 16's U1). THE LIST (the desk) is the tree at one level — the two repositories as rows in the kit's selection list
   (css/ui.css .ui-list: 11 px mono, uppercase, tracked), the landed one inverse video (the site's "current" mark), no disclosure (no groups), no
   pager (two rows fit everywhere); its box runs to the panel's foot (the tree's rule). THE RECORD: the landed repository's card — THE ICON at its
   head (a 16-cell sprite in the mark's register — css/shell.css .comms .sp — the GitHub mark as a disc with the cat cut out, generic until the project
   icons land; a paint item, rastered row by row), THE NAME (typed) over THE DESCRIPTION (the copy's face), then SHIPPED — the table's column, the
   [proposed] mark on its label until he rules — and the PM BOT (a text link to the bot's record, #team/<name>, round 17's address; the site's text-link
   dress, css/shell.css), and the OPEN key (the kit's keycap, css/ui.css .ui-key) that opens the repository in a new tab — a control, not a text link
   (his word). Every field is the table's own words (What · It is · Shipped · Where): no new words. THE PHONE: no list — the two repositories as
   STAMPS (the ecosystem's face, the team's row) over the same record. THE ADDRESS: every record is #projects/<repo> (the engine's tail, round 9-3),
   as the team's are. Script off: the plain list — each entry its icon, name, description, the shipped line, the PM bot and the OPEN link. The
   stacked page (the screens layer off): the same plain list. Knobs ?o-*= (the bench's section *round 18 — the open source*). */
:root{
  --o-list:200;   /* px the list's column is wide on the desk (the record takes the rest) — the team's --t-tree */
  --o-min:60;     /* px the list's box is AT LEAST — the engine's measure (two rows of 24 inside the box's rules); the fill runs it to the panel's foot */
}

/* ==== THE PANEL (the team's construction) ==== */
.oss{ 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 .oss{ height:var(--fill-h, auto); }   /* the engine's fill — the block is as tall as its frame leaves it */
.o-panel{ position:relative; display:grid; height:100%; grid-template-columns:calc(var(--o-list) * 1px) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr);
  grid-template-areas:"list rec"; column-gap:20px; align-items:stretch; border:1px solid var(--ink); padding:16px 12px 12px; }
.o-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); }   /* ROUND 19 (Bill, S21 §5 B1: "looks like the word 'OPEN SOURCE' cut off"): the legend is a child of THE PANEL (position:relative), as TEAM's, SYSTEMS's and POSTS's are — round 18 had it beside the panel, so top:-8px resolved against .oss, the paint item, and the item's forwards-filled clip (round 10, W1) cut the half that hung above its box: the word read as its lower half on the rule */
.o-panel:has(> .o-listcol > .o-list:empty){ grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); grid-template-areas:"rec"; }   /* script off: no list is built; the record is the whole panel */
.o-panel:has(> .o-listcol > .o-list:empty) .o-listcol, .o-panel:has(> .o-listcol > .o-list:empty) .o-phone{ display:none; }

/* ==== THE LIST: the kit's selection list at one level (the tree's rows without the chevron); its box to the panel's foot ==== */
.o-listcol{ grid-area:list; display:flex; flex-direction:column; min-height:0; min-width:0; }
.o-list{ flex:1 1 auto; margin:0; padding:0; border:1px solid var(--ink); background:rgba(221,227,232,.6); min-width:0;
  min-height:calc(var(--o-min) * 1px); max-height:var(--fill-h, calc(var(--o-min) * 1px)); overflow:hidden; }   /* the minimum at the measure; the fill after */
.o-list:focus{ outline:none; }
.o-list:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
.o-row{ 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; }
.o-row .w{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-row[aria-selected="true"]{ background:var(--ink); color:var(--paper); }

/* ==== THE PHONE's stamps (not on a desk) ==== */
.o-phone{ grid-area:phone; display:none; }
.o-stamps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:6px; }
.o-stamps 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; overflow:hidden; text-overflow:ellipsis; }
.o-stamps button[aria-checked="true"]{ background:var(--ink); color:var(--paper); }
.o-stamps button:focus-visible{ outline:1px dashed var(--ink); outline-offset:2px; }

/* ==== THE RECORD. Script off: the plain list — every entry shown, ruled between ==== */
.o-record{ grid-area:rec; min-width:0; min-height:0; }
.o-entries{ list-style:none; margin:0; padding:0; }
/* the card's rows — ROUND 20 (Bill, S22 §C8): his field pattern. The head is the comms row's grammar (css/shell.css .comms .ln) — the sprite, the
   name, the OPEN key at the row's right; then the meta (version · licence · stars), the PM bot, and the description, each aligned under the name
   (an icon-wide gutter at the left). Recaller carries no OPEN key and no stars — its meta reads In Development. */
.o-entry{ display:grid; grid-template-columns:calc(var(--c-sp) * 16px) minmax(0, 1fr) max-content;
  grid-template-areas:"icon head key" ". meta meta" ". pm pm" ". desc desc";
  column-gap:12px; row-gap:9px; align-items:start; padding:10px 0 12px; border-bottom:1px solid var(--hair); }
.o-entry:last-child{ border-bottom:0; }
.o-icon{ grid-area:icon; display:block; width:calc(var(--c-sp) * 16px); height:calc(var(--c-sp) * 16px); }   /* the comms' cell: 16 cells at --c-sp (32 px) */
.o-icon svg{ display:block; width:100%; height:100%; fill:var(--ink); shape-rendering:crispEdges; }
.js.fx-screens .o-icon.pt.pd{ animation:sp-raster var(--line-ms, 80ms) steps(16, end) forwards; }   /* the sprite's raster (css/shell.css sp-raster): a row per step */
.o-head{ grid-area:head; min-width:0; align-self:center; }
.o-name{ display:block; font:700 16px/1.2 var(--sans); color:var(--ink); }
.o-meta{ grid-area:meta; }
.o-pm{ grid-area:pm; }
.o-desc{ grid-area:desc; }
.o-keys{ grid-area:key; align-self:start; }
.screen .maincol .o-meta, .screen .maincol .o-pm{ margin:0; font:500 12px/1.4 var(--mono); letter-spacing:.02em; color:var(--ink); max-width:none; }
.screen .maincol .o-desc{ margin:0; font-family:var(--sans); line-height:1.45; max-width:none; }   /* the copy's face (css/shell.css: --body-size on the desk, 16 on a phone) */
.o-stars{ white-space:nowrap; }   /* ROUND 20: the live star count (js/github.js fills it; the baked fallback shows at once; JS off shows the placeholder, honestly) */
.o-entry .lbl{ display:block; margin-bottom:2px; font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }   /* the field's label: the comms' designator tier (Project Manager:) */
.screen .maincol .o-keys{ margin:0; padding:0 2px 2px 0; max-width:none; }   /* the keycap's 2 px shadow inside the paint item's box (round 10, W1) */
/* the engine on: the record is ONE CARD — the landed entry; the others hidden. Before js/oss.js has run — the frames engine's FIRST measure, and the
   fonts' re-measure, which can land between the two scripts (round 17's finding) — only the first record is on; the script then lands whichever the
   address names: .on shows it, hidden hides the rest. */
.js.fx-screens .o-entry{ display:none; padding:2px 0 0; border:0; }
.js.fx-screens .o-entries > .o-entry:first-child:not([hidden]), .js.fx-screens .o-entry.on:not([hidden]){ display:grid; }
.js.fx-screens .o-entry[hidden]{ display:none; }
.js.fx-screens .o-record{ outline:none; }
.js.fx-screens .o-record:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }

@media (max-width:720px){   /* the phone: the stamps over the record */
  .o-panel{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"phone" "rec"; column-gap:0; row-gap:12px; padding:16px 10px 10px; }
  .o-listcol{ display:none; }
  .o-phone{ display:block; }
}
@media (max-width:720px) and (max-height:700px){   /* a short phone: the labels inline before their values, the gaps tightened — the section fits its one screen (360 × 640: 475 of room) */
  .oss{ margin-top:8px; }
  .o-panel{ row-gap:8px; padding:14px 8px 8px; }
  .o-entry{ row-gap:6px; }
  .o-entry .lbl{ display:inline; margin:0 8px 0 0; }
}
@media (min-width:721px) and (max-height:520px){   /* a phone on its side (235 px of room): the same — the labels inline, the gaps tightened further (the section 230 of 235) */
  .oss{ margin-top:4px; }
  .o-panel{ padding:8px 8px 2px; }
  .o-entry{ row-gap:4px; padding-top:0; }
  .o-entry .lbl{ display:inline; margin:0 8px 0 0; }
  .o-desc{ line-height:1.3; }
}