/* team.css — ROUND 17 (Bill, S20 §5 — T1 · TD1 · TM1 · TU1 · TU2; S21 §2 "Typed. Remy goes to BE."): THE TEAM ON THE PRINT PATTERN.
   His words: "adapt a similar print design here away from the 'wheel' concept" — the same left-hand navigation as print, the bots divided
   into types; on a phone "some kind of hybrid menu/box layout"; the details area "[Name], [Title/Dept./Etc.] / [About]" where the About "can
   scroll, but must use the same '-- SCROLL --' scheme"; "an image area for all entries, including the bots… a placeholder for the bots for
   now… If that results in a smaller picture, that's fine"; and T1 — no PAUSE. Nothing here is new: every part is the pattern's (rounds 14–16).
   THE PANEL is the comms panel's construction (round 6A; POSTS's, SYSTEMS's): a 1 px box the column's width, TEAM cut into its top rule (his
   sketch's root word; ROSTER, round 11B's legend, is the fork), 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 panel is as tall as the sheet leaves it.
   THE TREE (the desk, TD1) is print's tree — the Finder's outline in the kit's selection list (css/ui.css .ui-list: 11 px mono, uppercase,
   tracked) with N6's pixel chevron as the disclosure — three levels deep: Humans › Bill · Bots › PM/Coordinators · Backend Developers ·
   Frontend Developers · Operations › the members. A node's children indent 15 px under its word; the landed member is inverse video (the
   site's "current" mark); no rules between rows (round 15, DK1). A group opens by DRAWING its rows in turn (each a CRT line, --t-open ms a
   row — print's DK2) and closes as a screen does (layers.css crt-off, --t-close). At load the two roots are open and the types closed; the
   landed member's group opens with it. More rows than fit: the tree PAGES (the pager's line under it).
   THE RECORD (TU1): the landed one's card — the NAME over his TITLE for the seat (the small mono tier), THE PICTURE beside them (TU2), and
   THE ABOUT in a WINDOW that pages (js/pager.js — the site's inner scroll, round 16): the rows are the About's sentences (js/team.js wraps
   them; a page can end inside a paragraph, as a printout's does), the pages drawn through the draw order, -- SCROLL -- · 1/2 under the
   window only while the words run past it. The window is the grid's middle track — what the fill leaves after the head and the line — as
   print's windows are (css/print.css, round 15); at the minimum (the engine's measure, the stacked page) exactly --t-min. Nothing scrolls
   within, on any screen.
   THE PICTURE (TU2): the picture-in-picture of round 11B-3 — his photo as a PAUSED VHS TAPE (the tear at the foot, the chroma bled right,
   each a knob whose 0 removes it; the deck's PAUSE OSD off by default now — T1, --v-osd 0) — sized to the record (--t-img, a square: 160 on
   the desk beside the head and the About, 96 on a phone beside the head; smaller than 11B's 256 — his "smaller is fine"). EVERY BOT has the
   same window, EMPTY: the post's image slot inside it (css/print.css .post figure .slot — a dashed hairline, the pending mark) — the site's
   own "a picture goes here", one device for the twenty-one, until his pictures land.
   THE PHONE (TM1): no tree — a GROUP key (the kit's keycap) opening a pull-down of the groups in the nav's menu style (round 8B; the key and
   its menu share a box — round 15's M1) and the members as STAMPS in the ecosystem's face (css/systems.css .s-stamp), over the same record —
   the picture small beside the head, the About below it, full width.
   Reduced motion the page honours: a page shows at once, a group opens at once. The stacked page (the screens layer off): the same widget
   at its minimum window, no engine, no fill. Script off: the panel with the plain nested list — the groups as labels, each entry its name,
   its title, its picture and its words — and no tree. Knobs ?t-*= and ?v-*= (the bench's section *round 17 — the team*). */
:root{
  --t-tree:200;   /* px the tree's column is wide on the desk (the record takes the rest); FRONTEND DEVELOPERS at 11 px mono, indented one level, needs ~190 */
  --t-tmin:170;   /* px the tree's window is AT LEAST — the engine's measure: the seven rows at load (Humans, Bill, Bots, the four types); the landscape phone 48 (it pages) */
  --t-min:180;    /* px the About window is AT LEAST — what the engine measures the panel at; the frame's slack adds the rest (the phone 180; a short phone 110; the landscape phone 48) */
  --t-img:160;    /* px the picture is, a square, beside the record (the phone 96; a short phone 80; the landscape phone 64) — round 11B's --v-size 256 is retired: the record sizes it */
  --t-open:80;    /* ms per row a group's members are drawn in when it opens (each a CRT line; the baud step when that is slower; 0 = the baud step) — print's --w-open */
  --t-close:240;  /* ms a group's members collapse when it closes (the screen's own crt-off; 0 = at once) — print's --w-close */
  --v-bleed:2;     /* px the colour is shifted right of the picture (0 = none) */
  --v-track:7;     /* % of the picture's height the tear at the foot takes (0 = none) */
  --v-jitter:5;    /* px the torn band is displaced, about ± this, in steps (0 = the band still) */
  --v-osd:0;       /* 1 = the deck's PAUSE on the picture; 0 = none — ROUND 17 (T1: "drop the || PAUSE graphic") */
  --v-blink:1000;  /* ms of the OSD's blink cycle (0 = steady) */
}

/* ==== THE PANEL ==== */
.roster{ 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 .roster{ height:var(--fill-h, auto); }   /* the engine's fill — the block is as tall as its frame leaves it */
.r-panel{ position:relative; display:grid; height:100%; grid-template-columns:calc(var(--t-tree) * 1px) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr);
  grid-template-areas:"tree rec"; column-gap:20px; align-items:stretch; border:1px solid var(--ink); padding:16px 12px 12px; }
.r-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); }
.r-panel:has(> .r-treecol > .r-tree:empty){ grid-template-columns:minmax(0, 1fr); grid-template-areas:"rec"; }   /* script off: no tree is built; the record is the whole panel */
.r-panel:has(> .r-treecol > .r-tree:empty) .r-treecol{ display:none; }

/* ==== THE TREE: the kit's selection list, the Finder's outline; its window over its -- SCROLL -- line ==== */
.r-treecol{ grid-area:tree; display:flex; flex-direction:column; min-height:0; min-width:0; }
.r-tree{ 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(--t-tmin) * 1px); max-height:var(--fill-h, calc(var(--t-tmin) * 1px)); overflow:hidden; }   /* the minimum at the measure; the fill after (the flex fills the column) */
.r-tree:focus{ outline:none; }
.r-tree:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
.roster .pg-ind[data-for="tree"]{ flex:none; min-height:22px; }   /* scoped: print's tree pager is named tree too — unscoped, this rule grew print's line row by 4 px on the landscape phone (the preservation sweep's one DIFFERS) */
.r-nl, .r-lf{ 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; }
.r-nl{ padding-left:calc((10 + var(--d, 0) * 15) * 1px); }   /* a node: the chevron, then the word at 25 + 15 × depth */
.r-lf{ padding-left:calc((25 + var(--d, 0) * 15) * 1px); }   /* a member: its word under its group's, one level in */
.r-nl[hidden], .r-lf[hidden]{ display:none; }   /* a row on another page of the tree */
.r-nl .c{ flex:none; width:7px; height:4px; fill:currentColor; shape-rendering:crispEdges; transform:rotate(-90deg); }   /* the disclosure: N6's chevron, turned right while the group is closed */
.r-nd[aria-expanded="true"] > .r-nl .c{ transform:none; }
.r-nl .w, .r-lf .w{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-lf[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.r-grp[hidden]{ display:none; }
.r-grp.r-off{ animation:crt-off calc(var(--t-close) * 1ms) ease-in forwards; pointer-events:none; }   /* a group closing — its rows die as a screen does, then hide */
@media (prefers-reduced-motion:reduce){ body:not(.fx-motion) .r-grp.r-off{ animation:none; } }
.r-tree:focus-visible .r-cur{ outline:1px dashed currentColor; outline-offset:-3px; }   /* the keyboard cursor: the phantom line, only while the tree has the keyboard */

/* ==== THE PHONE's controls (not on a desk): the group key and its pull-down, the member stamps ==== */
.r-phone{ grid-area:phone; display:none; }
.r-gk{ position:relative; display:inline-block; }
.r-gkey .mn-c{ display:inline-block; width:7px; height:4px; margin-left:8px; vertical-align:1px; fill:currentColor; shape-rendering:crispEdges; }
.r-gkey[aria-expanded="true"]{ background:var(--ink); color:var(--paper); transform:translate(2px, 2px); box-shadow:none; }
.r-gkey[aria-expanded="true"] .mn-c{ transform:scaleY(-1); }
.r-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); }
.r-menu[hidden]{ display:none; }
.r-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; white-space:nowrap; }
.r-menu button:last-child{ border-bottom:0; }
.r-menu button:hover{ background:rgba(30,42,56,.08); }
.r-menu button:active, .r-menu button[aria-current="true"]{ background:var(--ink); color:var(--paper); }
.r-menu button:focus-visible{ outline:1px dashed var(--ink); outline-offset:-4px; }
.r-stamps{ flex:1 1 100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
.r-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; }
.r-stamps button[aria-checked="true"]{ background:var(--ink); color:var(--paper); }
.r-stamps button:focus-visible{ outline:1px dashed var(--ink); outline-offset:2px; }

/* ==== THE RECORD. Script off: the plain nested list — the groups as labels, every entry shown, ruled between ==== */
.r-record{ grid-area:rec; min-width:0; min-height:0; }
.r-entries, .r-entries ol{ list-style:none; margin:0; padding:0; }
.r-gname{ display:block; margin:16px 0 4px; font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.r-group > ol > .r-group > .r-gname{ margin-top:10px; }
.r-entry{ padding:10px 0 12px; border-bottom:1px solid var(--hair); }
.r-entry::after{ content:""; display:block; clear:both; }
.r-head{ min-width:0; }
.r-name{ display:block; font:700 16px/1.2 var(--sans); color:var(--ink); }
.r-title{ display:block; margin:3px 0 0; font:500 10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.r-about{ min-width:0; margin-top:8px; }
.r-about 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) */
.r-about p:last-child{ margin-bottom:0; }
.r-about p[hidden], .r-about .r-s[hidden]{ display:none; }   /* a sentence on another page of the About; a paragraph with none of its sentences on the page */
.r-about .r-s{ display:inline; }
/* the engine on: the record is ONE CARD — the landed entry, its head over the About window, the picture beside; the other entries hidden */
.js.fx-screens .r-entries, .js.fx-screens .r-group, .js.fx-screens .r-group > ol{ display:contents; }
.js.fx-screens .r-gname{ display:none; }
.js.fx-screens .r-record{ height:100%; outline:none; }
.js.fx-screens .r-record:focus-visible{ outline:1px dashed var(--ink); outline-offset:3px; }
/* before js/team.js has run — the frames engine's FIRST measure, and the fonts' re-measure, which can land between the two scripts — only
   the first record (the human's) is on; with all 23 shown the engine measured the block at 5,900 px and handed the fill back at that. The
   script then lands whichever the address names: .on shows it, hidden hides the rest. */
.js.fx-screens .r-entry{ display:none; height:100%; grid-template-columns:minmax(0, 1fr) calc(var(--t-img) * 1px); grid-template-rows:auto minmax(0, 1fr) minmax(22px, auto);
  grid-template-areas:"head img" "about img" "line line"; column-gap:16px; row-gap:8px; align-items:start; padding:2px 0 0; border:0; }
.js.fx-screens .r-entries > .r-group:first-child > ol > .r-entry:first-child:not([hidden]), .js.fx-screens .r-entry.on:not([hidden]){ display:grid; }
.js.fx-screens .r-entry::after{ display:none; }
.js.fx-screens .r-entry[hidden]{ display:none; }   /* the other records */
.js.fx-screens .r-head{ grid-area:head; }
.js.fx-screens .r-entry .pip{ grid-area:img; float:none; width:100%; margin:0; }
/* the window: the grid's middle track — what the record's height (the panel's fill) leaves after the head and the -- SCROLL -- row; at the
   minimum (no fill: the engine's measure) exactly --t-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) and the ecosystem's record. */
.js.fx-screens .r-about{ grid-area:about; align-self:stretch; height:100%; margin:0; min-height:calc(var(--t-min) * 1px); max-height:var(--fill-h, calc(var(--t-min) * 1px)); overflow:hidden; }
.pg-ind[data-for="about"]{ grid-area:line; }   /* the pager's line (css/shell.css) in the card's last row */

/* ==== THE PICTURE-IN-PICTURE (round 11B-3; round 17: sized to the record, PAUSE off) ==== */
.pip{ float:right; width:calc(var(--t-img) * 1px); margin:4px 0 12px 20px; border:0; background:none; }   /* script off: at the right of the words; the sheet's own figure rules (a box, a ground) do not apply: the window is .pip-scr */
.pip-scr{ position:relative; overflow:hidden; aspect-ratio:1 / 1; border:1px solid var(--ink); background:#0c1016; isolation:isolate; }
.pip-img{ position:relative; display:block; width:100%; height:100%; object-fit:cover; }
/* chroma bleed: the same picture over itself, shifted right, COLOUR ONLY (mix-blend-mode:color takes the top layer's hue and saturation
   with the luminance beneath) — the tape's colour smeared right of the edges; no filter. Absent at 0 (the layer would still composite). */
.pip-chroma{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:color; opacity:.8; transform:translateX(calc(var(--v-bleed) * 1px)); }
@container not style(--v-bleed: 0){ .pip-chroma{ display:block; } }
/* the tear: the head-switching band at the foot of a paused frame — the picture's own bottom --v-track %, displaced sideways, the noise
   stripe over it; it jumps between displacements in whole steps (the deck's pause jitter). Absent at 0. */
.pip-tear{ display:none; position:absolute; left:0; right:0; bottom:0; height:calc(var(--v-track) * 1%); overflow:hidden; }
@container not style(--v-track: 0){ .pip-tear{ display:block; } }
.pip-tear img{ position:absolute; left:0; bottom:0; width:100%; height:calc(100% * 100 / var(--v-track)); object-fit:cover; }   /* the whole picture, sized to the window, showing through the band */
@container not style(--v-jitter: 0){
  .pip-tear img{ transform:translateX(calc(var(--v-jitter) * 1px)); animation:pip-tear 1.1s steps(1, end) infinite; }
}
@keyframes pip-tear{ 0%{ transform:translateX(calc(var(--v-jitter) * 1px)); } 18%{ transform:translateX(calc(var(--v-jitter) * -.6px)); } 37%{ transform:translateX(calc(var(--v-jitter) * 1.4px)); }
  55%{ transform:translateX(calc(var(--v-jitter) * .2px)); } 72%{ transform:translateX(calc(var(--v-jitter) * -1px)); } 88%{ transform:translateX(calc(var(--v-jitter) * .7px)); } 100%{ transform:translateX(calc(var(--v-jitter) * 1px)); } }
.pip-tear::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, rgba(0,0,0,.5) 2px 3px, transparent 3px 9px, rgba(255,255,255,.3) 9px 10px, transparent 10px 17px, rgba(0,0,0,.35) 17px 18px, transparent 18px 23px),
    linear-gradient(rgba(255,255,255,.22), rgba(0,0,0,.4)); }
/* the OSD: the deck's PAUSE, top left — white with a black edge over the picture, two bars and the word; the led layer's face when it is on.
   Off at the default since round 17 (T1); ?v-osd=1 brings it back. */
.pip-osd{ display:none; position:absolute; top:9px; left:10px; align-items:center; gap:7px; font:700 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#fff;
  text-shadow:1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
@container not style(--v-osd: 0){ .pip-osd{ display:flex; } }
.pip-osd i{ display:block; width:3px; height:11px; background:#fff; outline:1px solid #000; }
.pip-osd i + i{ margin-left:-4px; }
.fx-led .pip-osd{ font-family:"Doto","IBM Plex Mono",ui-monospace,monospace; font-weight:700; font-variation-settings:"ROND" 100; font-size:15px; letter-spacing:.08em; }
@container not style(--v-blink: 0){ .pip-osd{ animation:pip-blink calc(var(--v-blink) * 1ms) steps(1, end) infinite; } }
@keyframes pip-blink{ 50%, 99.9%{ visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ body:not(.fx-motion) .pip-tear img, body:not(.fx-motion) .pip-osd{ animation:none; } }
/* THE PLACEHOLDER (TU2): the same window, empty — the post's image slot inside it (css/print.css .post figure .slot): a dashed hairline on
   a faint wash, the pending mark. Reads as "no picture yet", the way the post's slot does; never an avatar, never an initial. */
.pip-slot .pip-scr{ background:rgba(30,42,56,.04); }
.pip-slot .slot{ position:absolute; inset:5px; display:grid; place-items:center; border:1px dashed rgba(30,42,56,.45); }

@media (max-width:720px){   /* the phone: the group key and the stamps over the record — THE PICTURE AT THE PANEL'S TOP RIGHT (ROUND 19, Bill, S21 §5 B2: "the image
                               should be better aligned on the page" — his box framed the room right of the key, the stamps and the head, from the panel's rule down;
                               round 17 set the picture beside the head alone, its top level with the name, that room empty above it): the picture sits in the panel's
                               box, its top on the key row's top and its right on the panel's padding — out of the record's flow, so the About starts under the head
                               as before; the key, the stamps and the head keep its column clear and wrap at its left; the About below, full width */
  :root{ --t-img:96; --r-pt:16px; --r-px:10px; }
  .r-panel{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"phone" "rec"; column-gap:0; row-gap:10px; padding:var(--r-pt) var(--r-px) 10px; }
  .r-treecol{ display:none; }
  .r-phone{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-right:calc(var(--t-img) * 1px + 12px); }
  .js.fx-screens .r-head{ padding-right:calc(var(--t-img) * 1px + 12px); }
  .js.fx-screens .r-entry{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "about" "line"; column-gap:0; }
  .js.fx-screens .r-entry .pip{ position:absolute; top:var(--r-pt); right:var(--r-px); width:calc(var(--t-img) * 1px); }
  .pip{ margin:4px 0 10px 14px; }
}
@media (max-width:720px) and (max-height:700px){   /* a short phone: a smaller picture and window minimum, the gaps tightened — the intro and the panel share the one screen */
  :root{ --t-min:110; --t-img:80; --r-pt:14px; }
  .r-panel{ row-gap:8px; padding:var(--r-pt) var(--r-px) 8px; }
  .js.fx-screens .r-entry{ row-gap:6px; }
}
@media (min-width:721px) and (max-height:520px){   /* a phone on its side (235 px of room): the tree pages from two rows, the picture at 64, the About's line a step smaller */
  :root{ --t-tmin:48; --t-min:48; --t-img:64; }
  .roster{ margin-top:8px; }
  .r-panel{ padding:12px 12px 8px; }
  .js.fx-screens .r-entry{ row-gap:4px; }
  .r-title{ margin-top:2px; }
  .screen .maincol .r-about p{ font-size:14px; line-height:1.35; margin-bottom:6px; }
}