/* Signals archive grammar — ONE stylesheet for the pieces the Round 1 Wire and the
   Round 2 Records share on the shared v5 tokens: coverage ribbon, page head, the
   four primary controls, bands + rows + semantic chips, footer, empty/skeleton, the
   inspector, and their responsive transforms (board frames 03 · 03b · 04 / 05).
   Shell pieces (.page-h, .panel, .oc, the focus ring) stay the shell's. A page that
   docks the inspector inline sets data-insp-dock on its main. */

/* ---------- coverage ribbon ---------- */
/* one line (the boards' ribbon never wraps): the as-of stays on the right and the chips that
   do not fit fold into a "+N more" chip (LLSignalRow.fitRibbon); opened, it wraps */
.ribbon{display:flex;align-items:center;gap:.55rem .7rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-md);background:var(--sunk);padding:.5rem .8rem;font-size:.78rem;color:var(--muted);margin:0 0 1rem;min-height:46px;font-family:var(--font);}
.ribbon[data-expanded]{flex-wrap:wrap;white-space:normal;overflow:visible;}
.ribbon .cch.more{border-style:dashed;color:var(--violet);}
.ribbon>b{color:var(--ink);font-weight:700;}
.ribbon .cch{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);background:var(--card);border-radius:var(--r-pill);padding:0 .8em;font-family:var(--mono);font-size:.64rem;color:var(--muted);cursor:pointer;min-height:32px;font-weight:700;letter-spacing:.04em;}
.ribbon .cch i{width:7px;height:7px;border-radius:50%;background:var(--violet);opacity:.7;flex:none;}
.ribbon .cch.more i{display:none;}
.ribbon .cch b{color:var(--ink);font-weight:700;}
.ribbon .cch:hover,.ribbon .cch.on{border-color:var(--violet);color:var(--ink);}
.ribbon .cch.on i{opacity:1;}
.ribbon .obs{margin-left:auto;flex:none;font-family:var(--mono);font-size:.64rem;color:var(--dim);}
.ribbon .obs b{color:var(--ink);font-weight:600;}
.ribbon .obs b.warm{color:var(--goldHi);}
.ribbon .rlink{border:none;background:none;padding:0;font:inherit;color:var(--violet);cursor:pointer;text-decoration:underline dotted;}

/* ---------- page head ---------- */
.phead{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .6rem;}
.phead h1{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.phead .fresh{font-family:var(--mono);font-size:.64rem;color:var(--muted);}

/* ---------- the four primary controls ---------- */
.fwrap{margin:0 0 .9rem;}
.fbtn{display:none;}
.fsum{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
/* the filter pills (.fsum .fc) and the caps Clear button retired in SIG-LANGUAGE-4: every surface's filter
   controls are the shared select / input / quiet act now */

/* ---------- bands + rows (board: .band / .row) ---------- */
/* overflow:clip keeps the rounded corners without making the box a scroll
   container — a sticky band inside overflow:hidden never sticks (operator, on
   the ASKS-LENS-1 walk 2026-09-02) */
.wire{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:clip;}
.wire:empty{display:none;}
/* A day band is a divider, not a stripe (operator, 2026-09-02: the sunk grey
   bar "doesn't really look good for a content section header … a 1px border
   line at the top"). It sits on the card's own ground with a rule above it and
   none below, and it sticks under the top chrome while its rows scroll — on a
   feed that pages a whole database of loans the day stays in view. The
   card-coloured ground is what hides the rows sliding under it. */
.band{position:sticky;top:var(--wire-sticky-top,0px);z-index:2;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);padding:.95rem .7rem .45rem 1.7rem;background:var(--card);border-top:2px solid color-mix(in srgb,var(--violet) 32%,var(--border));border-bottom:1px solid var(--border);}
/* Operator, second pass: a divider alone "looks the same as the rows". A day is
   a NODE on the feed's spine — a filled violet mark exactly where the rows'
   hollow dots sit (their centre is .62rem + 3.5px), with a faint halo, a label
   larger than a row's time cell, and air above the rule. The mark rides the
   label line, not the box, because the padding is deliberately top-heavy. */
.band:not(.head)::before,.band.head .bl::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent);}
.band:not(.head)::before{left:calc(.62rem - 1px);top:calc(50% + .25rem);transform:translateY(-50%);}
.band.head .bl{position:relative;}
.band.head .bl::before{left:calc(-1.7rem + .62rem - 1px);top:50%;transform:translateY(-50%);}
.wire>.band:first-child{border-top:none;}
.band+.row{border-top:none;}
/* keyboard navigation (j/k) scrolls a row into view: keep it clear of the
   sticky chrome and the stuck band */
.row{scroll-margin-top:calc(var(--wire-sticky-top,0px) + 2.6rem);}
.row{position:relative;display:grid;grid-template-columns:64px 112px minmax(0,.62fr) minmax(0,.58fr) minmax(0,.85fr) 212px 96px;gap:.85rem;align-items:center;padding:.62rem .7rem .62rem 1.7rem;border-top:1px solid var(--border);cursor:pointer;min-height:44px;}
/* SIG-PAIR-1 refined twice (operator, 2026-08-23): the roles are COLUMNS, and their
   labels ride IN the feed's first band — one box, not a strip of their own */
.band.head{display:grid;grid-template-columns:64px 112px minmax(0,.62fr) minmax(0,.58fr) minmax(0,.85fr) 212px 96px;gap:.85rem;align-items:end;padding:.95rem .7rem .45rem 1.7rem;}
.band.head .bl{grid-column:1 / span 2;}
.band.head span:not(.bl){color:var(--dim);letter-spacing:.1em;font-size:.625rem;}
.band.head .r{text-align:right;}
.row:hover{background:var(--row-hover,color-mix(in srgb,var(--ink) 4%,transparent));}
/* the spine (operator ruling 2026-08-22): one wire per section — the line runs unbroken
   from the section's first dot to its last and the dots sit on it. The boards draw each
   row's own stub (stops 12px past the row), which at our taller rows left a gap above every
   dot. A section = the rows between two .band headers, or a whole container without bands
   (Records). Rows appended later (Load more) join the wire by :last-child moving. */
.row::before{content:"";position:absolute;left:.62rem;top:50%;width:7px;height:7px;border-radius:50%;background:var(--card);border:1.5px solid var(--dim);transform:translateY(-50%);z-index:1;}
.row::after{content:"";position:absolute;left:calc(.62rem + 3.5px);top:0;bottom:0;width:1px;background:var(--border);}
.band + .row::after,.row:first-child::after{top:50%;}
.row:last-child::after,.row:has(+ .band)::after{bottom:50%;}
.row.sel{background:color-mix(in srgb,var(--violet) 10%,var(--card));outline:1px solid color-mix(in srgb,var(--violet) 45%,transparent);outline-offset:-1px;}
.row.sel::before{border-color:var(--violet);background:var(--violet);}
/* the row's quiet cells read in --dim, not --muted: in the dark theme --muted sits at 2.55:1 on
   the card (measured on the rig, 2026-09-02, operator-approved); --dim clears 4.5:1 in both themes */
.row .t{font-family:var(--mono);font-size:.64rem;color:var(--dim);white-space:nowrap;}
/* SIG-LANGUAGE-3: the row's cells sit on the ladder — handles are data, so they read in mono at R10 bold; the quiet cells at R7 */
.row .pair{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .who{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .who .rw{display:none;font-style:normal;}
.row .who .nf{font-weight:400;}
.row .pair .arr,.row .amt .arr,.insp .arr{color:var(--dim);font-weight:400;padding:0 2px;}
.row .pair .role,.insp .role{color:var(--dim);font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:0 3px;vertical-align:1px;}
.row .pair .role.nf,.insp .role.nf{text-transform:none;letter-spacing:0;font-size:.78rem;font-weight:400;font-style:normal;}
.nf{color:var(--dim);font-weight:500;font-style:italic;}
.row .amt{font-family:var(--mono);font-size:.78rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.row .amt b{font-weight:700;}
.row .amt small,.row .meta small{display:block;font-size:.64rem;color:var(--dim);margin-top:2px;font-weight:400;}
.row .meta{font-family:var(--mono);font-size:.64rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .meta b{color:var(--ink);font-weight:700;}
.bad{color:var(--oc-red);font-weight:700;}
.good{color:var(--oc-green);font-weight:700;}
.warm{color:var(--goldHi);font-weight:700;}
.row .src{font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--dim);text-align:right;white-space:nowrap;text-decoration:none;}
.row:hover .src{color:var(--violet);}
.row .src.gone{color:var(--dim);font-weight:500;font-style:italic;}

/* the chip: the D29 metric chip (.vl-chip below), rendered by signals-row.js chipHtml — the .tag dialect
   (handoff §5) retired in SIG-LANGUAGE-3; the word is still always the chip's content, colour the duplicate */

/* ---------- footer ---------- */
.wfoot{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;padding:.8rem .2rem 0;font-family:var(--mono);font-size:.64rem;color:var(--dim);}
.wfoot b{color:var(--ink);}
.wfoot .asof{margin-left:auto;}

/* ---------- empty / skeleton ---------- */
/* the .wire-empty dialect retired in SIG-LANGUAGE-5 — every surface's empty state is .vl-empty */
.sk{display:grid;grid-template-columns:64px 112px 1fr 96px;gap:.85rem;align-items:center;padding:.8rem .7rem .8rem 1.7rem;border-top:1px solid var(--border);}
.sk i{display:block;height:10px;border-radius:5px;background:var(--inset);}
.sk i.w2{width:80%;}.sk i.w3{width:60%;}
.sk:first-child{border-top:none;}

/* ---------- inspector (board frame 02: .insp) ---------- */
.insp{position:fixed;top:calc(var(--topchrome-h,96px) + .6rem);right:.8rem;bottom:.8rem;width:min(440px,calc(100% - 1.6rem));overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);box-shadow:var(--sh-lg);padding:1rem 1.1rem 1.2rem;z-index:30;font-size:.84rem;}
.insp .x{position:absolute;top:.6rem;right:.6rem;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:.9rem;}
.insp .x:hover{color:var(--ink);border-color:var(--violet);}
.insp .ey{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0 2rem .35rem 0;}   /* the kicker's value (R1), SIG-LANGUAGE-4 */
/* SIG-LANGUAGE-6 (2026-09-02): the inspector reads on the ladder — its title is the handle (R2; a pair wraps), its
   section labels the register head (R9), its facts R9 over R10, its source box the inset zone, its acts the shared act and primary */
.insp h3{margin:0 2rem .7rem 0;font-family:var(--mono);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);outline:none;overflow-wrap:anywhere;}
.insp h3:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px;}
.insp .iacts{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3);}
.insp .watchhost{display:inline-flex;align-items:center;gap:.45rem;}
.insp .watchhost small{font-family:var(--mono);font-size:.64rem;color:var(--dim);}
.insp .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s3);}
.insp .fact{padding:0;min-width:0;}
.insp .fact .l{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.insp .fact .v{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ink);margin-top:var(--s1);word-break:break-word;}
.insp .fact .s{font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-top:.15rem;}
.insp .isec{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:var(--s3) 0 var(--s1);}
.insp .isec span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:.64rem;}
.insp .isec .r{margin-left:auto;font-weight:700;letter-spacing:0;text-transform:none;color:var(--violet);text-decoration:none;font-size:.64rem;}
.insp .isec .r.gone{color:var(--dim);font-style:italic;font-weight:500;}
.insp .dline{font-size:.78rem;color:var(--text);line-height:1.5;}
.insp .mono{font-family:var(--mono);font-size:.66rem;color:var(--dim);margin-top:3px;}
.insp .xfacts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s3);font-family:var(--mono);font-size:.78rem;}
.insp .xfacts>div{display:flex;gap:.5rem;justify-content:space-between;border-bottom:1px dotted var(--border);padding:.25rem 0;min-width:0;}
.insp .xfacts .k{color:var(--dim);font-size:.64rem;}
.insp .xfacts .v{color:var(--ink);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;}
.srcbox{border:0;background:var(--inset);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-family:var(--mono);font-size:.78rem;line-height:1.6;color:var(--text,var(--ink));}
.srcbox .ttl{font-weight:700;color:var(--ink);}
.srcbox .q{color:var(--muted);}
.srcbox .meta{display:flex;gap:.9rem;margin-top:var(--s1);color:var(--dim);font-size:.64rem;}
.insp .trailline{font-family:var(--mono);font-size:.78rem;color:var(--muted);line-height:1.6;}
.insp .correct{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);line-height:1.5;}
.insp .correct a{font-weight:700;}
html[data-wire-insp="open"] [data-insp-dock]{padding-right:min(460px,40%);}

/* ---------- responsive (board frames 03 · 03b · 04) ---------- */
@media (max-width:1279px){
  .row{grid-template-columns:56px 100px minmax(0,.64fr) minmax(0,.56fr) minmax(0,.8fr) 96px;}
  .band.head{grid-template-columns:56px 100px minmax(0,.64fr) minmax(0,.56fr) minmax(0,.8fr) 96px;}
  .band.head span:nth-child(5){display:none;}
  .row .meta{display:none;}
  html[data-wire-insp="open"] [data-insp-dock]{padding-right:0;}
}
@media (max-width:719px){
  /* the Filters toggle is the quiet act by value (it keeps its own class: it is display:none on a desk) */
  .fbtn{display:inline-flex;align-items:center;gap:.35em;border:1px dashed var(--border-strong);background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:0 .8em;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.04em;cursor:pointer;min-height:44px;}
  .fsum{display:none;flex-direction:column;align-items:stretch;gap:.5rem;margin-top:.6rem;padding:.8rem;border:1px solid var(--border);border-radius:12px;background:var(--card);}
  .fsum.open{display:flex;}
  .ribbon .obs{margin-left:0;width:100%;}
  .ribbon .cch{min-height:44px;}   /* a community chip is a tap target on a phone (was 28px; operator-approved 2026-09-02) */
  .band.head{display:block;}
  .band.head span:not(.bl){display:none;}   /* no header on phones — the in-cell "lender" prefix returns */
  .row{grid-template-columns:1fr auto;grid-template-areas:"tag t" "who who" "whol whol" "amt src";gap:.25rem .6rem;padding:.7rem .8rem .7rem 1.5rem;}
  .row .t{grid-area:t;justify-self:end;}
  .row .vl-chip{grid-area:tag;}
  /* the source link is a tap target on a phone (v0.60.60 acceptance review): the hit box clears 44px, the ink and the row do not grow */
  .row .src{display:inline-flex;align-items:center;min-height:44px;margin:-.55rem -.35rem -.55rem 0;padding:0 .35rem;}
  .row .pair{grid-area:who;white-space:normal;}
  .row .who{grid-area:who;white-space:normal;}
  .row .who.l{grid-area:whol;font-size:.78rem;}
  .row .who.l:empty{display:none;}
  .row .who .rw{display:inline;color:var(--dim);font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
  .row .amt{grid-area:amt;}
  .row .src{grid-area:src;align-self:end;}
  .insp{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0;padding-top:1.2rem;}
  .insp .facts{grid-template-columns:1fr 1fr;}
  .insp .xfacts{grid-template-columns:1fr;}
  .wfoot .asof{margin-left:0;width:100%;}
}

/* ================================================================
   D29 — the Signals visual language, shared (SIG-LANGUAGE-1, 2026-09-02).
   Spec: design/signals/signals-visual-language-spec-v1.html — binding for the
   language layer, accepted 2026-08-30. Readiness rulings 1–5 and 8 accepted by
   default on 2026-09-02 (docs/plans/D29_EXECUTION_READINESS_2026-09-02.md):
   card radius = --r-md · role prefix .vl- · the day band is the ninth piece ·
   the lens header rides the card recipe · sentence row .78rem, register head
   .625rem, legend gap s3, trio gap s6 · the empty state is a recipe.
   Every value is an ll-v5.css token or a ladder value. NOTHING HERE IS APPLIED
   TO A SURFACE YET: surfaces adopt in SIG-LANGUAGE-2…5, one slice each, and the
   person record keeps its .sgr-* rules byte-identical until its markup moves.
   ================================================================ */
/* D2: the spacing scale is inherited from ll-v5.css so boards and member pages agree. */
/* the controls' accent (ruling 7 names it --ac): the shell has no such token — its accent is --violet,
   so the name is bound here, once, and a future ruling can repoint it without touching a control */
main.signals-v2{--ac:var(--violet);}

/* 01 · twelve roles, one ladder — a role outranks another on two axes minimum */
.vl-kicker{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);}
.vl-handle{font-family:var(--mono);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15;}
.vl-reading{font-family:var(--font);font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.45;}
.vl-sect{font-family:var(--font);font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.vl-sub{font-family:var(--mono);font-size:.66rem;font-weight:500;color:var(--dim);}
.vl-cardt{font-family:var(--mono);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);}
.vl-meta{font-family:var(--mono);font-size:.64rem;font-weight:500;color:var(--dim);}
.vl-stat{font-family:var(--mono);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;}
.vl-statl{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.vl-cell{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;}
.vl-cell b,.vl-cellb{font-weight:700;color:var(--ink);}
.vl-chip{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;justify-self:start;}
/* justify-self: a chip is content, never a cell — as a grid item it hugs its label instead of
   stretching across the column (operator, 2026-09-02: "the outcome chip has a big space in it") */
.vl-fine{font-family:var(--mono);font-size:.66rem;font-weight:400;color:var(--dim);line-height:1.65;max-width:68ch;}

/* 03 · the pieces — a component is its recipe; a variant changes ONE property, stated */
/* the card (ruling 1: the radius is the token, never 11px) */
.vl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:var(--s3) var(--s4);}
.vl-card__zone{background:var(--inset);border-radius:var(--r-sm);padding:var(--s2) var(--s3);}
.vl-card__reading{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--border-2);}
/* the stat trio — R8 over R9, gap s1; trios apart at s6 (ruling 5) */
.vl-trio{display:flex;gap:var(--s6);}
.vl-trio>*{display:flex;flex-direction:column;gap:var(--s1);}
/* a strip of figures (FLOW-STRUCTURE-1): a stat over its label, a hairline between figures, wrapping on a phone */
.vl-stats{display:flex;flex-wrap:wrap;gap:var(--s2) 0;}
.vl-stats>*{display:flex;flex-direction:column;gap:2px;padding:0 var(--s4) 0 var(--s3);border-left:1px solid var(--border-2);min-width:6.5rem;}
.vl-stats>:first-child{padding-left:0;border-left:0;}
/* the chip family — three kinds, one type (R11); the shape carries the kind:
   pills are about the VIEWER (state or act), squared chips are facts of the RECORD */
.vl-chip--state{display:inline-flex;align-items:center;gap:.35em;min-height:32px;padding:0 .8em;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--violet) 45%,var(--border));background:var(--oc-violet-soft);color:var(--violet);}
.vl-chip--act{display:inline-flex;align-items:center;gap:.35em;min-height:32px;padding:0 .8em;border-radius:var(--r-pill);border:1px dashed var(--border-strong);background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;}
.vl-chip--act:hover{border-color:var(--ac);color:var(--ink);}
/* the pieces set display, so the UA [hidden] rule alone would lose: a hidden chip or button is hidden (the lesson of "Retry web" under every working web) */
.vl-chip[hidden],.vl-btn[hidden]{display:none;}
/* a quiet select for a line of metadata (WIRE-TOP-1; a variant under ruling 7); the phone floor still holds */
.vl-select.vl-select--quiet{min-height:26px;padding:0 1.5em 0 .5em;font-family:var(--mono);font-size:.66rem;background-position:right .35em center;}
@media (max-width:719px){.vl-select.vl-select--quiet{min-height:44px;}}
/* an act that is ON (a pressed toggle, an unfolded row, an open panel) turns solid in the accent (SIG-LANGUAGE-7) */
.vl-chip--act.is-on,.vl-chip--act[aria-pressed="true"],.vl-chip--act[aria-expanded="true"]{border-style:solid;border-color:var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,transparent);}
.vl-chip--act:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
.vl-chip--act[disabled]{opacity:.55;cursor:default;}
.vl-chip--metric{display:inline-flex;align-items:center;gap:.35em;padding:.18em .55em;border-radius:4px;border:1px solid transparent;background:var(--oc-grey-soft);color:var(--oc-grey);}
.vl-chip--metric.is-repaid{background:var(--oc-green-soft);color:var(--oc-green);}
.vl-chip--metric.is-unpaid{background:var(--oc-red-soft);color:var(--oc-red);}
.vl-chip--metric.is-madegood{background:var(--oc-gold-soft);color:var(--oc-gold);}
.vl-chip--metric.is-open{background:var(--oc-violet-soft);color:var(--oc-violet);}
/* the section head — R4 + R5 left, optional R7 state-line right, hairline at s2 pad / s3 margin */
.vl-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:1px solid var(--border-2);}
.vl-head__l{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;}
/* roles are type, never spacing: an element that carries one brings no margin of its own. Single-class
   selectors on purpose — a page sheet's composition rule (.fnote{margin:…}) must be able to win. */
.vl-head h2,.vl-reading,.vl-fine,.vl-meta,.vl-sub,.vl-sect{margin:0;}
/* the key / legend — R7 type, 8px swatches, gap s3 (ruling 5) */
.vl-key{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font-family:var(--mono);font-size:.64rem;color:var(--dim);}
.vl-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:.4em;vertical-align:middle;}
/* the keys hint (PANEL-WALK, operator 2026-09-03: "it should be a little bit clearer you can walk the register"):
   where a keyboard walks a list, the list and its panel say so; hidden where there is no keyboard */
.vl-keys{display:inline-flex;align-items:center;gap:.3em;font-family:var(--mono);font-size:.64rem;color:var(--dim);white-space:nowrap;}
.vl-keys kbd{display:inline-block;min-width:1.6em;padding:0 .3em;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--inset);color:var(--text);font:700 .625rem/1.6 var(--mono);text-align:center;}
@media (hover:none),(max-width:719px){.vl-keys{display:none;}}
/* GRAPHICS-1 (operator GO 2026-09-03): two small graphics beside the bar. The sparkline is a fact series
   drawn with the current ink (one real point per day, never a ranking); the history strip is one
   square per approved record, oldest to newest, in the outcome inks — open is hollow (capital out,
   not an outcome), a request is a hollow dim square. Both are inline SVG or spans on tokens. */
.vl-spark{display:inline-block;width:44px;height:15px;color:var(--dim);vertical-align:middle;flex:none;}
.vl-spark polyline{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.is-on>.vl-spark,.vl-spark.is-on{color:var(--ac);}
.vl-strip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;vertical-align:middle;max-width:100%;}
.vl-strip i{display:block;width:8px;height:8px;border-radius:2px;background:var(--oc-grey);box-sizing:border-box;}
.vl-strip i.is-repaid{background:var(--oc-green);}
.vl-strip i.is-unpaid{background:var(--oc-red);}
.vl-strip i.is-madegood{background:var(--oc-gold);}
.vl-strip i.is-open{background:transparent;border:1px solid var(--oc-violet);}
.vl-strip i.is-request{background:transparent;border:1px solid var(--dim);}
.vl-strip b{margin-left:.35em;font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--dim);}
/* the sentence row — mono date gutter (R9 weight, --muted) + sans sentence at R10 size (ruling 5) */
.vl-srow{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:var(--s3);align-items:baseline;}
.vl-srow__d{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.vl-srow__s{font-family:var(--font);font-size:.78rem;color:var(--text);line-height:1.45;}
.vl-srow__s b{font-weight:700;color:var(--ink);}
/* the outcome bar & meter — 8px, segments gapped 2px and rounded 2px; diagonal violet stripes = capital out now (an open span, not an outcome) */
.vl-bar{display:flex;gap:2px;height:8px;}
.vl-bar>i{display:block;height:100%;border-radius:2px;}
.vl-bar>i.is-repaid{background:var(--oc-green);}
.vl-bar>i.is-unpaid{background:var(--oc-red);}
.vl-bar>i.is-madegood{background:var(--oc-gold);}
.vl-bar>i.is-open{background:repeating-linear-gradient(135deg,var(--oc-violet) 0 3px,transparent 3px 6px);}
.vl-meter{position:relative;height:6px;border-radius:3px;background:var(--oc-red-soft);overflow:hidden;}
.vl-meter>i{display:block;height:100%;border-radius:3px;background:var(--oc-green);}
/* the register table header — R9 at .625rem (ruling 5), +.1em caps, --dim, single hairline below */
.vl-thead{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--border);}
/* the ninth piece — the day band (operator, 2026-09-02): a node on the feed's spine, a 2px
   violet-tinted rule above, a solid hairline below that separates it from its rows (operator, on the
   walk: "they need to have a solid line below them"), a label larger than a row's time cell, air
   above the rule, and it sticks under the top chrome while its rows scroll — the only sticky piece */
.vl-band{position:sticky;top:var(--wire-sticky-top,0px);z-index:2;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);padding:.95rem .7rem .45rem 1.7rem;background:var(--card);border-top:2px solid color-mix(in srgb,var(--violet) 32%,var(--border));border-bottom:1px solid var(--border);}
.vl-band::before{content:"";position:absolute;left:calc(.62rem - 1px);top:calc(50% + .25rem);width:9px;height:9px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent);transform:translateY(-50%);}
/* the lens header (ruling 4) — the card recipe carrying R6 title · R3 reading · R12 fine print.
   The whole recipe, nothing more: the spec's card lists accent left-borders under
   "never", so the violet rule the shipped wire header carries is a fork this piece
   does not repeat (SIG-LANGUAGE-2 brings that header onto this). */
.vl-lens{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:var(--s3) var(--s4);}
/* the empty / error state (ruling 8) — an R3 sentence, an optional R12 line, one action; no card, no icon */
.vl-empty{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6) var(--s4);}
.vl-empty>.vl-fine{max-width:62ch;}
.vl-empty>.vl-chip--act{align-self:flex-start;}
/* the twelfth piece — the facet (readiness ruling 9 is the operator's; applied here as the default in
   SIG-LANGUAGE-4, reversible): a viewer's filter row — a marker, a sans label at the sentence size, a mono
   count at R7; the chosen row wears the accent. Search's four groups are the first list of them. */
.vl-facet{display:flex;align-items:center;gap:var(--s2);width:100%;border:none;background:none;text-align:left;padding:var(--s1) var(--s2);border-radius:var(--r-sm);color:var(--muted);font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;min-height:34px;}
.vl-facet>i{width:14px;height:14px;border:1.5px solid var(--border-strong);border-radius:50%;flex:none;background:var(--card);}   /* round: every facet group is single-choice (SEARCH-COLUMNS-2) */
.vl-facet>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vl-facet>b{font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;}
.vl-facet:hover{background:var(--inset);color:var(--ink);}
.vl-facet.is-on{color:var(--ink);}
.vl-facet.is-on>i{border-color:var(--ac);background:var(--ac);box-shadow:inset 0 0 0 2.5px var(--card);}
.vl-facet.is-on>b{color:var(--ac);}
.vl-facet:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
/* the facet's one variant — a disclosure row: the marker is a chevron that turns when the row is open */
.vl-facet--more{width:100%;list-style:none;}
.vl-facet--more::-webkit-details-marker{display:none;}
.vl-facet--more>i{width:8px;height:8px;border:0;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);border-radius:0;background:none;box-shadow:none;transform:rotate(-45deg);margin:0 .3em 0 .2em;}
details[open]>.vl-facet--more>i{transform:rotate(45deg);}
/* the legal line (2026-09-02, operator review): one fine-print line under every Signals page — five pages had
   styled theirs locally, at three sizes */
.sv2-legal{max-width:var(--content-max);margin:0 auto;padding:0;text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--dim);}
/* Before D2 the scale existed only inside main; preserve the external footers' computed zero padding. */
main.signals-v2 .sv2-legal{padding:var(--s6) var(--s4) var(--s10);}
.sv2-legal a{color:var(--muted);text-decoration:none;margin:0 .45rem;}
.sv2-legal a:hover{color:var(--ink);text-decoration:underline;}
/* the eleventh piece — the register (operator GO 2026-09-02, SIG-LANGUAGE-2b: "the rows/table has no
   background … we have a UI set for boxes, rows, lists, tables?"): every list or table sits on the card
   surface with no padding of its own and a clipped corner. It holds the register head, the rows, the day
   bands and the empty state; rows keep s2 s3 breathing, a hairline between them and none against the box. */
.vl-register{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:0;overflow:clip;}
.vl-register:empty{display:none;}
.vl-register>:last-child{border-bottom:0;}
/* a register whose only child is the empty state is not a box around nothing (operator, 2026-09-02): the empty
   state stands where the list would, on the surface it sits in */
.vl-register:has(>.vl-empty:only-child){border:0;background:transparent;box-shadow:none;border-radius:0;}
.vl-register:has(>.vl-empty:only-child)>.vl-empty{padding-left:0;padding-right:0;}
/* the tenth piece — controls (readiness ruling 7, applied as the default in SIG-LANGUAGE-2, 2026-09-02,
   reversible by ruling): a control keeps the shell's field geometry and carries the --ac accent.
   One select, one primary, one quiet action (the act chip); nothing else is a control. */
.vl-select{appearance:none;-webkit-appearance:none;font-family:var(--font);font-size:.88rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);min-height:36px;padding:0 1.9rem 0 .75rem;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .7rem) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.vl-select:hover{border-color:var(--border-strong);}
.vl-select:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
.vl-select.is-on{border-color:var(--ac);color:var(--ac);}
/* the input shares the select's geometry; ruling 9 (the form field) may refine it for Contribute */
.vl-input{font-family:var(--font);font-size:.88rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);min-height:36px;padding:0 .75rem;}
.vl-input::placeholder{color:var(--dim);font-weight:500;}
.vl-input:hover{border-color:var(--border-strong);}
.vl-input:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
.vl-input.is-on{border-color:var(--ac);}
.vl-input[aria-invalid="true"],.vl-select[aria-invalid="true"]{border-color:var(--oc-red);}
.vl-input[disabled],.vl-select[disabled]{opacity:.55;cursor:not-allowed;}
/* the form field (ruling 9's other half, applied as the default in SIG-LANGUAGE-5, 2026-09-02): an R9 label
   over its control — the label is the label element, so the control never inherits its caps */
.vl-field{display:flex;flex-direction:column;gap:var(--s1);min-width:0;}
.vl-field>span:first-child{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-family:var(--font);font-size:.88rem;font-weight:700;min-height:36px;padding:0 1rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;}
.vl-btn--primary{background:var(--ac);border-color:var(--ac);color:#fff;}
/* a primary that is a link keeps its white ink whatever the page says about links (the inspector's link colour outranked it: an empty violet block on the walk, 2026-09-02) */
a.vl-btn--primary:link,a.vl-btn--primary:visited,a.vl-btn--primary:hover{color:#fff;}
.vl-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
.vl-btn[disabled]{opacity:.55;cursor:default;}
/* the metric chip's badge variant — ONE property stated: the type label is set in caps (+.09em) */
.vl-chip--metric.is-badge{text-transform:uppercase;letter-spacing:.09em;}
@media (max-width:719px){
  .vl-chip--state,.vl-chip--act,.vl-btn,.vl-select,.vl-input,.vl-facet{min-height:44px;}
}
@media (forced-colors:active){
  .vl-band::before{outline:1px solid CanvasText;box-shadow:none;}
  .vl-bar>i,.vl-meter>i,.vl-key i{outline:1px solid CanvasText;}
}