/* Home-page diagrams (RTSC-807: split out of styles.css; see the note there). Every
   rule below draws on index.html only. Conventions and measurements are the ones the
   illustration pass recorded in marketing/landing-illustration-pass. */
/* ===== diagram primitives, round 3 (redrawn by design agents) ===== */
/* ---- AGENT 1: wave dispatch ---- */
.wv{display:flex;align-items:center;width:100%;height:116px;font-family:var(--mono)}
.wv-call{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 9px;
  border:1px solid var(--sep);background:var(--panel-inset);border-radius:7px;font-size:11.5px;
  line-height:1;color:var(--fg);white-space:nowrap}
.wv-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  border-radius:5px;background:var(--warning-bg);border:1px solid var(--warning-border);
  color:var(--warning);font-size:11px;margin-left:2px}
.wv-caret{color:var(--muted)}
.wv-flow{flex:1 1 auto;min-width:22px;height:116px}
.wv-flow svg{display:block;width:100%;height:116px}
.wv-flow path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.wv-flow .wv-p1{stroke:var(--rt-claude)}
.wv-flow .wv-p2{stroke:var(--rt-codex)}
.wv-flow .wv-p3{stroke:var(--rt-cursor)}
.wv-lanes{flex:none;display:flex;flex-direction:column;justify-content:space-between;height:116px}
.wv-lane{display:flex;align-items:center;height:26px}
.wv-l1{color:var(--rt-claude)}.wv-l2{color:var(--rt-codex)}.wv-l3{color:var(--rt-cursor)}
.wv-tip{flex:none;width:0;height:0;border-left:6px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:5px}
.wv-chip{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;
  border:1px solid var(--warning-border);background:var(--warning-bg);color:var(--warning);
  font-size:11.5px;line-height:1.2;white-space:nowrap}
.wv-lk{width:11px;height:11px;flex:none;display:block}
/* One step down when the frame itself runs out, not when the viewport does — the same
   question the frontier asks two blocks above. Below 233px of frame the fixed right-hand
   column (call + lanes) needs more room than there is, and the chips ran 5px past the
   frame at a 335px phone and 15px at 320. The flow curve gives up its floor first,
   then the chips tighten. */
@container (max-width: 232px){
  .wv-chip{padding:4px 6px;gap:4px;font-size:10.5px;}
  .wv-flow{min-width:12px;}
  .wv-call{padding:7px 7px;}
}

/* ---- AGENT 4: intake ---- */
.gi{display:flex;align-items:center;height:122px;}
.gi-src{flex:none;display:flex;flex-direction:column;gap:8px;}
.gi-mk{width:34px;height:34px;display:block;}
.gi-gh{color:var(--fg);}
.gi-bus{flex:none;position:relative;width:1px;height:42px;background:var(--dim);margin-left:9px;}
.gi-bus::before, .gi-bus::after{content:"";position:absolute;left:-9px;width:9px;height:1px;background:var(--dim);}
.gi-bus::before{top:0;} .gi-bus::after{bottom:0;}
.gi-rails{flex:1;min-width:0;align-self:stretch;position:relative;}
.gi-rail{position:absolute;left:0;right:0;height:8px;display:flex;align-items:center;}
.gi-rail::before{content:"";flex:1;height:1px;background:currentColor;}
.gi-rail i{flex:none;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;}
.gi-in{top:36px;color:var(--sep);} .gi-in i{border-left:6px solid currentColor;}
.gi-out{top:78px;color:var(--success);flex-direction:row-reverse;} .gi-out i{border-right:6px solid currentColor;}
.gi-lab{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.06em;white-space:nowrap;}
.gi-lab.gi-a{top:16px;color:var(--muted);} .gi-lab.gi-b{top:90px;color:var(--success);}
.gi-node{flex:none;margin-left:11px;display:flex;align-items:center;justify-content:center;color:var(--fg);}
.gi-glyph{width:40px;height:40px;display:block;}
/* ---- AGENT 4 notifications, relaid by lead: role->platform was a false claim ---- */
.nt{display:flex;align-items:center;width:100%;height:122px;font-family:var(--mono)}
.nt-hub{flex:none;width:40px;height:40px;display:block}
.nt-flow{flex:1 1 auto;min-width:40px;height:122px}
.nt-flow svg{display:block;width:100%;height:122px}
.nt-flow path{fill:none;stroke:var(--sep);stroke-width:1.5;vector-effect:non-scaling-stroke}
.nt-mks{flex:none;display:flex;flex-direction:column;justify-content:space-between;height:122px}
.nt-row{display:flex;align-items:center;height:34px}
.nt-tip{flex:none;width:0;height:0;border-left:6px solid var(--sep);
  border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:9px}
.nt-mk{width:34px;height:34px;display:block;flex:none}
/* ---- AGENT 3: crash handoff ---- */
.ck-diag{--ck-name:84px;--ck-gap:10px;--ck-off:calc(var(--ck-name) + var(--ck-gap));
  --ck-seam:calc(var(--ck-off) + .52 * (100% - var(--ck-off)));
  flex:1;position:relative;min-width:0;min-height:122px;
  display:flex;flex-direction:column;justify-content:space-between}
.ck-sw{width:7px;height:7px;border-radius:2px;flex:none;display:inline-block}
.ck-sw.ck-cl{background:var(--rt-claude)} .ck-sw.ck-cx{background:var(--rt-codex)}
/* No glow band at the seam any more (Andrey, 8-25): the dashed spine and the
   diamond already mark the checkpoint; a blue wash behind them was decoration —
   and its hardcoded dark-theme blue read as a stray shadow in light. */
.ck-spine{position:absolute;left:var(--ck-seam);top:5px;bottom:15px;width:0;
  border-left:1px dashed var(--resume);opacity:.6;z-index:0}
.ck-row{display:flex;align-items:center;gap:var(--ck-gap);position:relative;z-index:1}
.ck-name{width:var(--ck-name);flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--ink);white-space:nowrap}
.ck-name.ck-issue{color:var(--secondary);font-size:10px;letter-spacing:.03em}
.ck-tr{position:relative;flex:1;min-width:0}
.ck-log{height:14px}
.ck-log .ck-tr{height:6px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--dim) 0 3px,transparent 3px 9px)}
.ck-dia{position:absolute;left:52%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  transform:rotate(45deg);background:var(--resume);border-radius:2px;z-index:3}
.ck-lane{height:36px}
.ck-lane .ck-tr{height:22px}
.ck-bar{position:absolute;top:0;height:22px;z-index:1}
.ck-bar.ck-cl{left:0;width:52%;background:var(--rt-claude);border-radius:11px 2px 2px 11px}
.ck-bar.ck-cx{left:52%;right:20px;background:var(--rt-codex);border-radius:2px}
.ck-node{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:4}
.ck-die{left:52%;margin-left:-11px;background:var(--surface);border:1.5px solid var(--error);color:var(--error)}
.ck-fin{right:9px;background:var(--surface);border:1.5px solid var(--success);color:var(--success)}
.ck-drop{position:absolute;left:var(--ck-seam);margin-left:-1.5px;top:52px;height:15px;width:3px;
  background:var(--resume);z-index:2}
.ck-drop::after{content:"";position:absolute;left:-3.5px;bottom:-6px;
  border:5px solid transparent;border-top:7px solid var(--resume);border-bottom:0}
.ck-cap{position:absolute;left:var(--ck-seam);bottom:0;transform:translateX(-50%);
  font-size:10px;letter-spacing:.05em;color:var(--secondary);white-space:nowrap;z-index:3}
.ck-foot{height:12px}
/* ---- ready frontier ---- */
.fr{flex:none;position:relative;display:flex;align-items:center;height:150px;
  margin:-14px -16px;overflow:hidden;border-radius:7px;font-family:var(--mono);
  /* --fr-inset drives the held territory's width (the pair is centred in it, so
     width = pair + 2*inset puts its cards the same distance from both its edges).
     The LEFT run is not padding any more: the entry gap, the arrow and the exit stub
     are three flex items sharing the slack EQUALLY, so they stay the same length as
     each other at every frame width. Padding + one greedy arrow gave 8 / 81 / 7 on a
     phone and 29 / 389 / 5 at 900px, which is one long arrow with two crumbs. */
  --fr-inset:32px;--fr-gate:24px;}
/* The three gaps a reader sees are: frame edge -> card 1, card 1 -> card 2, and
   card 2 -> THE DASHED LINE. That third one is the exit stub PLUS the gate, because the
   dashed line is the gate's right border and the gate's ::after carries the connector
   straight across it. Giving all three `flex: 1 1 0` therefore made the third one a
   whole gate wider than the other two — 43 against 19 at 1440, which is what kept
   looking wrong however equal the numbers said the flex items were.
   So the two that do NOT contain the gate carry it as flex-basis instead, and the three
   come out equal to the eye. Measure this to the gate's RIGHT edge, never its left.
   The entry gap is a pseudo-element because it has no ink and still has to share. */
.fr::before{content:"";flex:1 1 var(--fr-gate);min-width:0;height:1px;}
.fr-n{flex:none;width:97px;display:flex;flex-direction:column;gap:6px;padding:8px 6px 9px;
  border-radius:6px;border:1px solid var(--surface-border);background:var(--card);color:var(--fg);
  font-size:11px;line-height:1.1;}
.fr-n b{display:flex;align-items:center;gap:5px;font-weight:400;white-space:nowrap;}
.fr-n i{width:6px;height:6px;border-radius:50%;background:var(--secondary);flex:none;}
.fr-n u{display:block;height:3px;border-radius:2px;background:var(--dim);}
.fr-n u+u{background:var(--surface-border);width:58%;}
.fr-done{border-color:var(--success-border);background:var(--success-bg);color:var(--success);}
.fr-done i{background:var(--success);}
.fr-done u, .fr-done u+u{background:var(--success-border);}
.fr-live{border-color:var(--sep);background:var(--surface);color:var(--fg);}
.fr-live i{background:var(--fg);}
.fr-wait{opacity:.5;} /* .38 put the 11px key at 3.2:1 */
/* The stub before the gate is pinned so (stub + gate) == the inset: the frontier then
   gets the same clearance on its left as the held card has on its right. Only the flow
   arrow between the first two cards is elastic, so all four margins hold at any width. */
.fr-e{flex:1 1 0;min-width:0;height:1px;background:var(--dim);position:relative;}
.fr-e.fr-ar{flex:1 1 var(--fr-gate);min-width:0;}
.fr-e.fr-ar::after{content:"";position:absolute;right:-1px;top:-3.5px;
  border-left:7px solid var(--dim);border-top:4px solid transparent;border-bottom:4px solid transparent;}
.fr-gate{flex:none;width:var(--fr-gate);align-self:stretch;border-right:1px dashed var(--sep);position:relative;}
.fr-gate::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--dim);}
/* THE LABEL NAMES THE LINE, SO IT KEEPS ITS DISTANCE FROM THE LINE — not from the
   gate's centre. The gate narrows 24 -> 16 -> 12 -> 10 across the four sets while
   the type only steps 10 -> 8, so a centred label spent its air first: measured at
   3x, the INK sat 8.67px clear of the dashed rule at 1440 and 4.00px at 390, where
   it read as printed against it, with 13px of unused channel on the card side.
   Anchored to the rule instead, and the number is measured per set (§Measure the
   ink: the em box is not the glyph — in vertical-rl the font hangs ~5px of its own
   air on this side, so the CSS value is the remainder, and these comments record
   the INK gap, which is the only one anybody sees). */
.fr-gate em{position:absolute;right:3px;top:25%;transform:translateY(-50%) rotate(180deg); /* ink 8.0px clear */
  writing-mode:vertical-rl;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--secondary);white-space:nowrap;z-index:3;}
/* Size the territory around the CARD (72px), not the pair. The pair carries a 28px
   left gutter for the branch spine; sizing on the pair and centring it made that
   invisible gutter count as content, so the visible card sat 58px from the frontier
   and 29px from the frame. Right-aligning with padding-right = inset puts the card
   the same distance from both. */
.fr-held{flex:0 0 calc(97px + 2*var(--fr-inset));align-self:stretch;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:var(--fr-inset);position:relative;}
.fr-pair{position:relative;display:flex;flex-direction:column;gap:11px;padding-left:28px;}
/* Feed line: from the territory's left edge to the branch spine. The spine sits at
   (pair left + 16), and the pair is right-aligned, so spine = width - inset - 100 + 16. */
.fr-held::before{content:"";position:absolute;left:0;top:50%;
  width:calc(100% - var(--fr-inset) - 109px);height:1px;background:var(--dim);}
.fr-fork{display:none;}
.fr-branch{position:absolute;left:16px;top:26px;bottom:26px;width:1px;background:var(--dim);}
.fr-branch::before, .fr-branch::after{content:"";position:absolute;left:0;width:12px;height:1px;background:var(--dim);}
.fr-branch::before{top:0;}
.fr-branch::after{bottom:0;}
/* The frontier is a fixed composition inside an `overflow:hidden` frame, so on a narrow
   screen it CROPS rather than scrolls — and a clipped element still reports a normal
   rect, which is why no width sweep ever caught it. It needed 368px before the cards
   were widened and 407 after, against ~240 of frame at 320. Two smaller sets of the
   same proportions, so the composition survives instead of losing its right-hand
   territory. The invariant stub = inset - gate holds in all three. */
/* These key off the ILLUSTRATION's own width, not the viewport's. The frontier is a
   fixed composition inside its frame, and on /index that frame is one column of a
   split section — so between roughly 900 and 990px of viewport the page is wide, the
   column is not, and the widest set was being applied to a frame it did not fit:
   measured, the territory ran 37px past the frame's right edge and the held cards 8px,
   inside an overflow:auto frame, so no page-level check saw it. `.ill` is already a
   registered inline-size container, so the sets can ask the only question that
   decides this, which is how much room the picture actually has.
   400, not 626: the WIDE set fits in 379px of frame, and the frame on /index's split
   section is 406 at every desktop width — so a 626 threshold put the small cards on
   the desktop picture, which is not what any of this was for. The steps are the widths
   at which each set stops fitting, nothing else. */
@container (max-width: 400px){
  .fr{--fr-inset:22px;--fr-gate:16px;}
  /* 68, not 64: `RTSC-33` at 10px mono lands its last glyph EXACTLY on the padding
     edge, so the card reads as if the id had been cut. 4px of gutter, and the feed
     line moves with it (spine = pair padding-left + card - branch left). */
  .fr-n{width:78px;font-size:10px;padding:6px 6px 7px;}
  .fr-held{flex:0 0 calc(78px + 2*var(--fr-inset));}
  .fr-held::before{width:calc(100% - var(--fr-inset) - 88px);}
  .fr-gate em{font-size:9px;right:1px;}   /* ink 7.0px clear: 0.8em, as at 1440 */
  .fr-branch{left:12px;}
  .fr-pair{padding-left:22px;}
}

/* ---- no priority inversion ----------------------------------------------
   Andrey's composition (sketched 2026-08-20). The issue appears TWICE on purpose —
   dashed as filed, solid as dispatched — which is legible here where my earlier
   version was not, because the two states are told apart by the border and joined by
   a labelled arc that names what happened. Left to right: RTSC-9 as filed, the
   relation that causes the change, and RTSC-9 after it.
   Cards are a fixed width so the arc can anchor on their CENTRES (half a card in from
   each end) instead of on a guessed offset. */
/* The card width is a variable because the arc's ends are half a card in from each
   side — hardcoding 44 meant the arc could only ever be right at one card width. */
.pv{flex:none;position:relative;display:grid;--pv-c:90px;--pv-mk:11px;--pv-brk:0px;
  grid-template-columns:var(--pv-c) minmax(44px,1.2fr) var(--pv-c) minmax(40px,1fr) var(--pv-c);
  align-items:center;padding-top:42px;font-family:var(--mono);font-size:11px;}
/* Same component as the frontier's `.fr-n`, and it has to read that way: identical
   padding, radius, gap, dot and bar. It came out 88x62 (1.41) against the frontier's
   97x49 (1.98) because it carried a 64%-width bar AND a text row where `.fr-n` carries
   two bars. The bar is full width now, like `.fr-n`'s first one, the priority word is
   the third row in place of `.fr-n`'s 58% bar, and the padding is the frontier's. The
   word is the one thing that legitimately differs, and a 12px line where the reference
   has a 3px bar is the whole of the remaining height. */
.pv-c{display:flex;flex-direction:column;gap:6px;padding:8px 6px 9px;
  border-radius:6px;border:1px solid var(--surface-border);background:var(--card);color:var(--fg);
  line-height:1.1;}
.pv-c b{display:flex;align-items:center;gap:5px;font-weight:400;white-space:nowrap;}
.pv-c i{width:6px;height:6px;border-radius:50%;background:var(--error);flex:none;}
.pv-c u{display:block;height:3px;border-radius:2px;background:var(--error-border);}
.pv-pr{color:var(--error);white-space:nowrap;}
.pv-hot{border-color:var(--error-border);background:var(--error-bg);color:var(--error);}
/* as filed: dashed, unlit, and its own priority in the quiet ink */
.pv-ghost{border-style:dashed;border-color:var(--dim);background:none;color:var(--muted);}
.pv-ghost i{background:var(--sep);}
.pv-ghost u{background:var(--surface-border);}
.pv-ghost .pv-pr{color:var(--secondary);}
/* The relation reads as the WORD wherever the row can hold it, and as a mark where it
   cannot. The word needed 42-56px of chip plus clearance, and on a phone the two gaps
   ate the row until the card came out square; the mark is 11px, so the width goes back
   into the card and the ratio holds. Desktop keeps the word: there is room, and a word
   says which way the relation points where a mark has to be learned.
   The mark is `circle-backslash`, the same one the "Blocked is computed" card carries.
   The padlock was tried and pulled: a lock is LOCKED, and on this site it already means
   an issue is held by an agent.
   Either way the LINE BREAKS for it rather than the label painting a box over it. A
   knockout needs the ground's colour, and this diagram sits on --panel-sunk inside a
   band card while the old chip painted --surface, so the box was always a shade off and
   read as a button. `--pv-brk` is how wide the break is: the word's own width at the top
   step, the mark plus its clearance below. Centred on the line's middle, which is 3px
   left of this element's (the 7px head overhangs its end by 1). */
.pv-rel{position:relative;height:1px;}
.pv-rel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--sep) 0 calc(50% - 3px - var(--pv-brk)/2),
    transparent calc(50% - 3px - var(--pv-brk)/2) calc(50% - 3px + var(--pv-brk)/2),
    var(--sep) calc(50% - 3px + var(--pv-brk)/2) 100%);}
.pv-rel::after{content:"";position:absolute;right:-1px;top:-3.5px;
  border-left:7px solid var(--sep);border-top:4px solid transparent;border-bottom:4px solid transparent;}
.pv-rel em{position:absolute;left:calc(50% - 3px);top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);white-space:nowrap;}
/* The WORD is a badge, exactly as PROMOTED is on the arc above it: same knockout, same
   padding. Two labels on one diagram, one naming the relation and one naming what it
   caused, have to be the same object. The MARK gets no badge — a box around an 11px
   glyph reads as a button, so the line breaks for it instead (`--pv-brk`). */
.pv-rel .pv-rel-t{background:var(--surface);padding:2px 8px;}
.pv-rel .pv-rel-m{display:none;}
.pv-rel-i{display:block;width:var(--pv-mk);height:var(--pv-mk);}
/* the promotion: over the top, from the card as filed to the card as dispatched. Its
   ends sit on those cards' centres, which is 48px (half a card) in from each side. */
.pv-gap{align-self:center;justify-self:center;height:15px;display:flex;align-items:stretch;gap:5px;}
.pv-gap i{display:block;width:2px;background:var(--dim);}
.pv-arc{position:absolute;left:calc(var(--pv-c)/2);right:calc(var(--pv-c)/2);top:8px;height:34px;
  border-radius:10px 10px 0 0;}
/* the arc's stroke is a pseudo-element at .75 so the label on the arc keeps 4.5:1 while the line stays dim */
.pv-arc::before{content:"";position:absolute;inset:0;border:1px solid var(--error);border-bottom:none;border-radius:inherit;opacity:.75;}
.pv-arc::after{content:"";position:absolute;right:-4.5px;bottom:0;
  border-top:7px solid var(--error);border-left:4.5px solid transparent;border-right:4.5px solid transparent;opacity:.75;}
.pv-arc em{position:absolute;left:50%;top:-1px;transform:translate(-50%,-50%);font-style:normal;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--error);white-space:nowrap;
  background:var(--surface);padding:2px 8px;}
/* The SAME diagram at every width, stepped down rather than restacked. The frontier
   beside it carries four cards and a territory horizontally at 390px, so three cards
   have no excuse.
   What sizes these steps is NOT the cards: it is the two GAPS, because one holds a
   labelled chip and the other holds the conveyor, and either of those touching the card
   beside it is the diagram broken. Each step declares the minimums its own chip and
   conveyor need, and the card takes what is left. Keyed to the ILLUSTRATION's width,
   like the frontier's, and narrowest LAST — two container queries that both match are
   decided by source order. */
/* The label hands over one step EARLIER than the cards resize. Measured at the 380
   boundary the badge had 1.3px of clearance from the card beside it, so the word is
   gone by 400: below that the mark takes over and the line breaks for it instead. */
@container (max-width: 400px){
  .pv-rel .pv-rel-t{display:none;} .pv-rel .pv-rel-m{display:flex;}
  .pv{--pv-brk:calc(var(--pv-mk) + 7px);}
}
@container (max-width: 380px){
  .pv{--pv-c:82px;font-size:10px;padding-top:38px;
    grid-template-columns:var(--pv-c) minmax(34px,1.2fr) var(--pv-c) minmax(30px,1fr) var(--pv-c);}
  .pv-c{padding:8px 6px 9px;gap:5px;}
  .pv-arc{height:30px;}
  .pv-arc em{font-size:9px;padding:2px 6px;}
  .pv-gap{height:13px;gap:4px;}
}
@container (max-width: 322px){
  .pv{--pv-c:74px;font-size:9px;padding-top:34px;
    grid-template-columns:var(--pv-c) minmax(22px,1.2fr) var(--pv-c) minmax(19px,1fr) var(--pv-c);}
  .pv-c{padding:7px 5px 8px;gap:5px;}
  .pv-c b{gap:4px;}
  .pv-arc{height:26px;}
  .pv-arc em{font-size:8px;padding:2px 5px;letter-spacing:.06em;}
  .pv{--pv-mk:10px;}
  .pv-gap{height:11px;gap:3px;}
  .pv-gap i:nth-child(n+6){display:none;}
}
@container (max-width: 267px){
  .pv{--pv-c:66px;font-size:7.5px;padding-top:30px;
    grid-template-columns:var(--pv-c) minmax(20px,1.2fr) var(--pv-c) minmax(16px,1fr) var(--pv-c);}
  .pv-c{padding:6px 4px 7px;gap:4px;}
  .pv-c b{gap:3px;}
  .pv-c i{width:5px;height:5px;}
  .pv-arc{height:22px;}
  .pv-arc em{font-size:7px;padding:2px 4px;letter-spacing:.03em;}
  .pv{--pv-mk:9px;}
  .pv-gap{height:9px;gap:3px;}
  .pv-gap i:nth-child(n+4){display:none;}
}
@container (max-width: 240px){
  .pv{--pv-c:60px;
    grid-template-columns:var(--pv-c) minmax(18px,1.2fr) var(--pv-c) minmax(14px,1fr) var(--pv-c);}
  /* the card has to lose height here too, or the last step is the only one that comes
     out square again - the ratio is the thing being held, not the width */
  .pv-c{padding:5px 4px 6px;gap:3px;}
  .pv-c u{height:2px;}
}

@container (max-width:340px){
.fr{--fr-inset:14px;--fr-gate:12px;}
/* 62, not 52: measured, the id ran 6px PAST the card's padding box here, which is
   what made the held cards read as clipped against the frame on a phone. */
.fr-n{width:70px;font-size:10px;padding:5px 5px 6px;}
.fr-gate em{font-size:9px;letter-spacing:.1em;right:1px;}  /* ink 7.0px clear; 10.3px of channel still to its left */
/* the three connectors share the slack here too — pinning the stub and letting the
   arrow take the rest is exactly what made the arrow 81px against 62px cards */
  /* release the wide-frame minimum, but keep a right gutter so the held cards
     never sit against the frame edge. Phone keeps the pre-inset behaviour: the
     connectors don't grow and the territory is content-width, not pair+2*inset. */
.fr-held{flex:none;width:auto;min-width:0;padding-right:16px;}
.fr-pair{padding-left:20px;}
.fr-branch{left:10px;}
/* The territory is content-width here, so the spine always sits exactly (pair
   padding-right = 8) in from the panel's left edge, whatever the card width is —
   a percentage of the panel drifts with it, and did: the feed stopped 2px short at
   68px cards and 5px short at 62px. */
.fr-held::before{width:10px;}
}
/* One more step, for the frames a 320-345px phone actually gives (248 and 218 of
   container, not the 277 the page width suggests — the well sits inside a card that has
   padding of its own). At 70px the three connectors collapse to 0-5px there, which is a
   run with no run in it. Everything steps down together, and it has to come AFTER the
   block above: two container queries that both match are decided by source order. */
@container (max-width: 252px){
.fr{--fr-inset:10px;--fr-gate:10px;}
.fr-n{width:62px;font-size:9px;padding:5px 4px 6px;}
/* The one set with nothing to hand out: 12px of channel against 6px of ink, so
   3px a side is the whole of it and the box overhangs the rule by 1px to sit
   symmetric (there is no ink in that pixel — it is the font's own air). */
.fr-gate em{font-size:8px;letter-spacing:.08em;right:-1px;}
.fr-held{padding-right:10px;}
.fr-pair{padding-left:16px;}
.fr-branch{left:8px;}
.fr-held::before{width:8px;}
}

/* ---- notifications: four lanes since email became a channel (RTSC-683/695) ----
   Four rows of 30 in the same 122px frame, marks 28 so a row never carries a mark
   taller than itself; the curves land on the row centres (15 / 45.7 / 76.3 / 107).
   The envelope has no brand, so it takes the reading ink the connectors pile gives it. */
.nt-row{height:30px}
.nt-mk{width:28px;height:28px}
.nt-mail{color:var(--fg)}

/* ---- the human half: four Analytics cards in a fanned pile (2026-09-15, round 4) ----
   The grammar is /connectors' brand pile (connectors.css .bp-*): one row of cards on an
   aspect-ratio field, placed by percentages so the composition scales as one object,
   vertical jitter, z falling left to right, neighbours clip corners only. Cards take the
   panel step and a cast, like the tiles. A full miniature of the Analytics page was built
   first and rejected: a wall on a phone. The phase inks are the Dash's own status
   colours: working green, filing grey, reviewing violet, redoing amber, cancelled muted;
   the queue bar adds ready grey and blocked red. */
/* No well around the pile: the cards are the objects, the way the connectors tiles sit on the
   page ground with nothing framing them. The pile takes the split's illustration slot itself.
   It still wraps as .ill.bare (frameless) so the gates read it as a diagram and so it is the
   inline-size container its phone placement below asks about. The stage inside it carries the
   aspect ratio, because a container query cannot size the container it queries. */
.an-pile{width:100%;font-family:var(--mono);font-size:var(--t-label);color:var(--secondary);}
.an-stage{position:relative;width:100%;aspect-ratio:45/19;}
.block.split > .an-pile{grid-column:2;grid-row:2 / span 2;align-self:center;margin-top:7.16px;}
@media (max-width: 900px){ .block.split > .an-pile{margin-top:0;} }
.an-card{position:absolute;display:flex;flex-direction:column;gap:5px;padding:10px 11px 11px;min-width:0;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius-card);
  box-shadow:0 12px 24px -16px var(--cast);}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .an-card{box-shadow:0 8px 18px -14px var(--cast);} }
:root[data-theme="light"] .an-card{box-shadow:0 8px 18px -14px var(--cast);}
/* One fanned row: widths sum to 106 and the three overlaps are 2% each, less than a
   card's own padding, so a neighbour clips a border and never ink. z falls left to
   right, tops alternate. */
.an-k1{width:24%;left:0;top:30%;z-index:4;}
.an-k2{width:40%;left:22%;top:0;z-index:3;}
.an-k3{width:22%;left:60%;top:34%;z-index:2;}
.an-k4{width:20%;left:80%;top:10%;z-index:1;}
.an-l{display:flex;align-items:center;gap:6px;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-k{width:6px;height:6px;border-radius:1.5px;background:var(--success);flex:none;}
.an-k.an-blocked{background:var(--error);}
.an-v{display:flex;align-items:center;font-size:var(--t-card);line-height:1.1;font-weight:500;color:var(--fg);letter-spacing:-.01em;white-space:nowrap;}
.an-ok .an-v{color:var(--success);}
/* The delta pill's ink. In dark it is the state green. In light the tinted pill ground costs
   the bare state green 0.1 of its AA ratio (measured 4.40 against 4.5), so the pill takes one
   step darker, declared under the same theme selectors styles.css uses. */
:root{--an-delta:var(--success);}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--an-delta:#0a5a29;} }
:root[data-theme="light"]{--an-delta:#0a5a29;}
.an-d{font-style:normal;font-size:var(--t-label);line-height:1.1;padding:1px 6px;margin-left:7px;border-radius:var(--radius-pill);color:var(--an-delta);background:var(--success-bg);white-space:nowrap;}
.an-spark{display:block;width:100%;height:14px;overflow:visible;}
.an-spark polyline{fill:none;stroke:var(--sep);stroke-width:1.5;vector-effect:non-scaling-stroke;}
.an-bar{display:block;height:3px;border-radius:2px;background:var(--surface-border);overflow:hidden;}
.an-bar i{display:block;height:100%;background:var(--success);}
.an-qbar{display:flex;height:4px;gap:2px;border-radius:2px;overflow:hidden;}
.an-qbar i{display:block;height:100%;}
.an-c{font-size:var(--t-label);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.an-m{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-t{font-family:var(--sans);font-size:var(--t-value);font-weight:500;color:var(--fg);white-space:nowrap;}
.an-tabs{display:inline-flex;border:1px solid var(--surface-border);border-radius:var(--radius-sm);overflow:hidden;}
.an-tabs > *{padding:2px 6px;font-size:var(--t-label);color:var(--secondary);font-weight:400;}
.an-tabs > b{background:var(--surface);color:var(--fg);}
.an-hero{display:flex;align-items:baseline;gap:7px;flex-wrap:nowrap;color:var(--muted);white-space:nowrap;overflow:hidden;}
.an-hero > b{font-size:var(--t-card);line-height:1;font-weight:500;color:var(--fg);letter-spacing:-.02em;}
.an-hero .an-d{margin-left:0;}
.an-cols{display:flex;align-items:flex-end;gap:3px;height:52px;border-bottom:1px solid var(--surface-border);padding-bottom:1px;}
.an-col{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;}
.an-col i{display:block;width:100%;min-height:1px;}
.an-col i + i{margin-bottom:1px;}
.an-leg{display:flex;flex-wrap:nowrap;gap:10px;font-size:var(--t-label);color:var(--secondary);overflow:hidden;}
/* the third legend item fits the phone's wider chart card, not the row's */
.an-leg span:nth-child(3){display:none;}
@container (max-width: 420px){ .an-leg span:nth-child(3){display:inline-flex;} }
.an-leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.an-leg i{width:6px;height:6px;border-radius:1.5px;flex:none;display:inline-block;}
.an-working{background:var(--success);} .an-filing{background:var(--sep);} .an-reviewing{background:var(--review);}
.an-redoing{background:var(--warning);} .an-cancelled{background:var(--muted);}
.an-ready{background:var(--sep);} .an-blocked{background:var(--error);}
/* A narrow frame keeps the composition and sheds the smallest ink: the pills, the tabs,
   the legend and the captions go, the figures and the shapes stay. */
/* Under 420px of frame the row cannot hold four cards with their figures, so the pile
   takes a PORTRAIT placement: two by two with the same jitter, the chart leading. Same
   move the connectors pile makes at this width. The chart's fact line goes; the rest
   keeps its captions. */
@container (max-width: 420px){
  .an-stage{aspect-ratio:10/9;}
  .an-k2{width:60%;left:0;top:0;z-index:4;}
  .an-k1{width:40%;left:58%;top:14%;z-index:3;}
  .an-k3{width:42%;left:4%;top:50%;z-index:2;}
  .an-k4{width:44%;left:54%;top:60%;z-index:1;}
  .an-head .an-m{display:none;}
  .an-cols{height:44px;}
}

/* on a band the cards step down, the way every panel on a band does */
.block.band .an-card{background:var(--panel-sunk);}