/* Registry — the app's own parts, and the widget.
   Header, card, tabs, bar, gutter, one left edge: os-app.css. ⛔ Do not redraw them.

   ⛔ THE APP'S OWN SCOPE, NOT THE SHELL'S PAGE MODE. Every rule here hung off
   `body.os.inthread .osReg`, so on the Work OS home — where `inthread` is a view
   the shell may or may not be in — the app drew with no styling of its own and
   read as a bare document. Same failure os-app.css fixed for the shared parts;
   rules hang off `.osApp.osReg`, the app root, which the pane always carries.
   The widget rules below keep the thread scope on purpose: the widget lives IN
   the conversation, not in the pane.

   ⚡ Clay, through tokens. The world's tokens (--cream2, --clay-mint, --lift…)
   are declared by work-clay.css on the shell body; every use here carries a
   fallback so the same sheet still draws on a surface the skin has not reached.
   ⛔ No hard-coded hex.

   ⛔ AND EVERY `var()` IN A `font:` SHORTHAND NEEDS A REAL FALLBACK, because a
   shorthand containing an UNDECLARED custom property is invalid at computed-
   value time and the WHOLE declaration is dropped — not just that one word.
   Measured 2026-09-08: `--osMono` is declared by work-clay.css and
   os-thread.css on the shell, and is EMPTY when this app is opened on a
   surface the skin has not reached. The reader's column pages carried
   `class="osRegPageText cols"` and rendered in the proportional body font, so
   an annual report's balance sheet lost its columns while the class attribute
   said it had them. ⛔ A style that is present and wrong costs more than one
   that is missing: the missing one gets noticed. 8 uses fixed.
   */

/* ⛔ The crumb is one word and never two lines. At 390 the shared crumb
   (os-app.css) shrank inside the flex row and broke "‹ atpakaļ" over two
   lines — measured 2026-09-05. */
.osApp.osReg .rhTop .crumb{white-space:nowrap;flex:none}

/* ── the search: one field, one verb ───────────────────────────────────── */
.osApp.osReg .osRegQ{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;position:relative}
.osApp.osReg .osAppBar{padding:16px 18px 6px}
/* ⛔ `:not([name="q"])` IS THE FIX, NOT A TIGHTER SELECTOR. The search field
   reserves 38px on the left for the glass; this shorthand replaces padding
   WHOLE, so any version of it that can reach that field wins or loses on
   specificity and source order — and the last one lost silently, putting the
   magnifier on the first letter of all three search fields. Excluding the
   field makes the wrong answer unreachable instead of merely outranked. */
.osApp.osReg .osAppBar input:not([name="q"]){
  padding:12px 18px;font:500 15px/1.4 var(--body);
  background:var(--cream,var(--surf));box-shadow:var(--lift,none)}
.osApp.osReg .osAppBar input:focus{
  background:var(--cream,var(--surf2));border-color:var(--violet,var(--line2));
  box-shadow:var(--lift,none),0 0 0 3px var(--fill-2,transparent)}
.osApp.osReg .osAppBar .go{padding:11px 20px;font-weight:700;box-shadow:var(--clay,none)}
.osApp.osReg .osAppBar.withTabs .osRegQ{flex:0 1 260px;min-width:180px}
.osApp.osReg .osAppBar.withTabs .osRegQ input{flex:1;min-width:0}
.osApp.osReg .osAppBar.withTabs .osRegQ input:not([name="q"]){padding:8px 14px}

/* ── the welcome: the empty state says what the register is FOR ──────── */
.osApp.osReg .osRegWelcome{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 20px 34px;gap:8px}
.osApp.osReg .osRegWelcome img{width:84px;height:84px;display:block;margin-bottom:4px}
.osApp.osReg .osRegWelcome h2{
  margin:4px 0 0;font:800 21px/1.2 var(--disp,var(--osDisp));color:var(--ink);letter-spacing:-.01em}
.osApp.osReg .osRegWelcome p{
  margin:0;max-width:46ch;font:400 13.5px/1.6 var(--body);color:var(--muted)}
.osApp.osReg .osRegWelcome .hint{
  margin-top:6px;font:400 11px var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);color:var(--faint)}

/* ── results: the shared list, a status pill on the right ───────────── */
.osApp.osReg .osAppList .row.osRegHit{padding:11px 14px 11px 16px;background:var(--cream,transparent);
  border:0;box-shadow:var(--lift,none);border-radius:var(--r-s,12px)}
.osApp.osReg .osAppList .row.osRegHit:hover{background:var(--cream2,var(--surf));transform:translateY(-1px)}
.osApp.osReg .osRegHitTx{min-width:0;display:block}
.osApp.osReg .osRegHit .t{font:700 14px/1.35 var(--disp,var(--osDisp))}
.osApp.osReg .osRegHit.dead .t{color:var(--muted);font-weight:600}
.osApp.osReg .osRegHit .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osApp.osReg .osRegSt{
  flex:none;padding:4px 11px;border-radius:999px;font:700 11px/1.3 var(--body);letter-spacing:.02em}
.osApp.osReg .osRegSt.ok{background:var(--clay-mint,color-mix(in srgb,var(--mint) 14%,transparent));color:var(--mint)}
.osApp.osReg .osRegSt.dead{background:var(--surf2);color:var(--muted)}
/* the caveat that belongs beside the list — the difference between "not in
   this search" and "no such company" */
.osApp.osReg .osRegCaveat{
  margin:12px 0 0;max-width:64ch;font:400 11.5px/1.55 var(--body);color:var(--muted)}
.osApp.osReg .osAppEmpty+.osRegCaveat{margin:0 auto;text-align:center;padding-bottom:10px}

/* ── the answer: four clay tiles, then the columns ─────────────────────── */
.osApp.osReg .osAppRow{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.osApp.osReg .osAppRow .k{overflow:visible;text-overflow:unset;white-space:normal;line-height:1.35}
.osApp.osReg .osAppRow .v{text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.35}

.osApp.osReg .osRegRisks{display:flex;flex-direction:column;gap:9px;margin:0 0 16px}
.osApp.osReg .osRegRisk{
  border:0;border-radius:var(--r-s,12px);padding:12px 16px;
  background:var(--clay-peach,color-mix(in srgb,var(--rose) 10%,transparent));box-shadow:var(--lift,none)}
.osApp.osReg .osRegRisk strong{display:block;font:800 13px var(--disp,var(--osDisp));color:var(--rose);margin:0 0 3px}
.osApp.osReg .osRegRisk span{font-size:12.5px;color:var(--muted)}

.osApp.osReg .osRegHero{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}
.osApp.osReg .osRegTile{
  border:0;border-radius:var(--r-s,12px);padding:14px 16px 13px;min-width:0;
  background:var(--cream2,var(--surf));box-shadow:var(--lift,none)}
.osApp.osReg .osRegTile.ok{background:var(--clay-mint,color-mix(in srgb,var(--mint) 12%,transparent))}
.osApp.osReg .osRegTile.bad{background:var(--clay-peach,color-mix(in srgb,var(--rose) 12%,transparent))}
.osApp.osReg .osRegTile .lab{
  font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.osApp.osReg .osRegTile .big{
  font:800 18px/1.2 var(--disp,var(--osDisp));color:var(--ink);letter-spacing:-.01em;word-break:break-word}
.osApp.osReg .osRegTile.ok .big{color:var(--mint)}
.osApp.osReg .osRegTile.bad .big{color:var(--rose)}
.osApp.osReg .osRegTile .sub{margin-top:6px;font:400 11px/1.45 var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);color:var(--muted)}
.osApp.osReg .osRegTile .act{margin-top:8px}
.osApp.osReg .osRegTile .note{margin-top:6px;font-size:11.5px;color:var(--amber)}
.osApp.osReg .osRegLive{
  border:1px solid var(--line);border-radius:999px;background:var(--cream,var(--surf));
  color:var(--ink);font:600 11px var(--body);padding:4px 11px;cursor:pointer}
.osApp.osReg .osRegLive:hover{border-color:var(--line2)}

.osApp.osReg .osRegYear{
  display:grid;grid-template-columns:5em minmax(0,1fr) minmax(0,1fr);gap:12px;
  padding:7px 0;font:400 12px var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);color:var(--ink);border-bottom:1px solid var(--line)}
.osApp.osReg .osRegYearH{color:var(--faint);letter-spacing:.14em;text-transform:uppercase;
  font:700 9.5px/1 var(--body);border-bottom:1px solid var(--line)}

/* type-ahead under the compact field while a company is open */
.osApp.osReg .osRegSug{
  position:absolute;top:calc(100% + 6px);right:0;width:min(34em,80vw);z-index:5;
  border:0;border-radius:var(--r-s,12px);background:var(--panel,var(--surf));
  box-shadow:var(--lift-2,var(--lift,0 10px 30px rgba(0,0,0,.12)));padding:6px;max-height:50vh;overflow:auto;
  display:flex;flex-direction:column;gap:4px}
.osApp.osReg .osRegSug .row.osRegHit{box-shadow:none;background:transparent}
.osApp.osReg .osRegSug .row.osRegHit:hover{background:var(--surf);transform:none}

/* ── "About this data" — under the card, folded, every claim kept ───────── */
.osApp.osReg .osRegAbout{margin:14px 19px 0;color:var(--muted)}
.osApp.osReg .osRegAbout summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.osApp.osReg .osRegAbout summary::-webkit-details-marker{display:none}
.osApp.osReg .osRegAbout summary::before{content:'›';font-size:13px;transition:transform .15s}
.osApp.osReg .osRegAbout[open] summary::before{transform:rotate(90deg)}
.osApp.osReg .osRegAbout summary:hover{color:var(--muted)}
.osApp.osReg .osRegAbout p{margin:9px 0 0;max-width:70ch;font:400 12px/1.6 var(--body)}

@media (max-width:900px){
  .osApp.osReg .osRegHero{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .osApp.osReg .osAppBar{padding:14px 14px 4px}
  /* ⛔ THE NARROW-WIDTH OVERRIDE IS A SHORTHAND TOO, and it was the second
     way the glass could land on the first letter — invisible at desktop width,
     so a fix verified at 1440 would have shipped broken at 390. */
  .osApp.osReg .osAppBar input:not([name="q"]){padding:11px 14px;font-size:14px}
  .osApp.osReg .osAppBar input[name="q"]{padding:11px 14px 11px 36px;font-size:14px}
  .osApp.osReg .osAppBar .go{padding:10px 14px}
  .osApp.osReg .osRegWelcome{padding:26px 8px 22px}
  .osApp.osReg .osRegWelcome img{width:68px;height:68px}
  .osApp.osReg .osRegAbout{margin:12px 4px 0}
  .osApp.osReg .osRegSug{width:calc(100vw - 48px)}
}
@media (max-width:420px){
  .osApp.osReg .osRegHero{gap:9px}
  .osApp.osReg .osRegTile{padding:12px 13px 11px}
  .osApp.osReg .osRegTile .big{font-size:16px}
}

/* ── widget: reuse the site-card material, stay ~six lines of prose tall ──
   These live in the THREAD, so the thread scope is the right one. */
body.os.inthread .osCo{grid-template-columns:minmax(0,1fr);cursor:pointer}
body.os.inthread .osCo .osCoHead{
  font:500 14px/1.35 var(--osDisp);color:var(--ink);letter-spacing:-.01em;margin-bottom:9px}
body.os.inthread .osCo .osCoHead .id{
  display:block;margin-top:3px;font:400 11px var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);color:var(--faint)}
body.os.inthread .osCo .osCoCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.os.inthread .osCoMark{display:none}
body.os.inthread .osCoWarn{
  font:500 12px/1.35 var(--f-body,Inter,sans-serif);color:var(--rose);margin:0 0 9px}
@media (max-width:820px){ body.os.inthread .osCo .osCoCols{grid-template-columns:1fr} }

/* Reports stay in the company workspace, on the shared clay material. */
.osApp.osReg .osRegResultHint{font:500 13px/1.5 var(--body);color:var(--muted);margin:0 0 14px}
.osApp.osReg .osRegReportSummary{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r-s,12px);padding:16px;margin:0 0 20px;background:var(--cream2,var(--surf));color:var(--ink);cursor:pointer}
.osApp.osReg .osRegReportSummary img{width:36px;height:36px}
.osApp.osReg .osRegReportSummary>span:first-of-type{flex:1}
.osApp.osReg .osRegReportSummary strong,.osApp.osReg .osRegReportSummary small{display:block}
.osApp.osReg .osRegReportSummary small{margin-top:4px;color:var(--muted)}
.osApp.osReg .osRegReportYears{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.osApp.osReg .osRegReportYear{display:flex;flex-direction:column;gap:10px;padding:18px;text-align:left;border:1px solid var(--line);border-radius:var(--r-s,12px);background:var(--cream,var(--surf));color:var(--ink);cursor:pointer}
.osApp.osReg .osRegReportYear strong{font:800 24px var(--disp,var(--body))}
.osApp.osReg .osRegReportYear span{font:400 13px/1.5 var(--body);color:var(--muted)}
.osApp.osReg .osRegReportYear small{margin-top:auto;color:var(--ink)}
.osApp.osReg .osRegReportYear:hover,.osApp.osReg .osRegReportSummary:hover{border-color:var(--violet,var(--line2))}
/* ⚡ THE REPORT HEAD HAS A RHYTHM (visual pass 2026-09-08, §3.5): back pill,
   then the year as the one large title, then the provenance as a quiet
   monospace LINE under it — it used to be a filled box, which outweighed the
   heading it qualified. 32px then separates it from the first statement. */
.osApp.osReg .osRegReport>h2{
  margin:16px 0 6px;font:800 24px/1.2 var(--disp,Nunito,Sora,sans-serif);
  color:var(--ink);letter-spacing:-.015em}
.osApp.osReg .osRegSource{
  margin:0 0 32px;padding:0;background:none;border-radius:0;color:var(--muted);
  font:500 12px/1.5 var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace)}
/* ⛔ .osRegPage (the per-page <details>) is GONE — the reader replaced it.
   .osRegStatement is a <section> now and its rules are at the foot of this
   file, with the reader they belong to. */
.osApp.osReg .osRegTableScroll{overflow:auto}
.osApp.osReg .osRegStatement table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegStatement th,.osApp.osReg .osRegStatement td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
/* the COLUMN heads are labels, not another row of figures. ⛔ `thead th` on
   purpose: the row labels are `<th scope="row">` too, and one unscoped `th`
   rule turned every balance-sheet line into a 10px caption (measured on the
   first after-shot of this pass). */
.osApp.osReg .osRegStatement thead th{
  padding-top:0;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;
  font:700 10px/1.4 var(--body,Nunito,'DM Sans',system-ui,sans-serif);white-space:nowrap}
.osApp.osReg .osRegStatement th:first-child{text-align:left;min-width:180px}
.osApp.osReg .osRegStatement tbody th{
  color:var(--ink);white-space:normal;
  font:500 13px/1.5 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegStatement td{white-space:nowrap;font-variant-numeric:tabular-nums}
.osApp.osReg .osRegStatement tbody tr:last-child th,
.osApp.osReg .osRegStatement tbody tr:last-child td{border-bottom:0}
.osApp.osReg .osRegYear{grid-template-columns:4em repeat(4,minmax(0,1fr));font-size:13px}
.osApp.osReg .osRegYearH{font-size:10px;line-height:1.4;letter-spacing:.03em}
.osApp.osReg button:focus-visible{outline:2px solid var(--violet,var(--ink));outline-offset:3px}
@media(max-width:640px){.osApp.osReg .osRegYear{grid-template-columns:3em repeat(4,minmax(60px,1fr));min-width:390px}.osApp.osReg .osAppOne{overflow:auto}.osApp.osReg .osAppBar.withTabs{flex-wrap:wrap}.osApp.osReg .osAppBar.withTabs .osRegQ{flex:1 1 100%}.osApp.osReg .osRegReportYears{grid-template-columns:1fr}}

@media(max-width:640px){.osApp.osReg .osAppBar .tabs{flex-wrap:wrap;white-space:normal;overflow:visible}}

/* ── the search glass ──────────────────────────────────────────────────────
   ⛔ THE ARC MOVES ONLY WHILE A REQUEST IS OPEN. `.on` is set from the fetch's
   own lifetime, never from a timer, so it cannot spin after the answer has
   landed. A spinner that outlives its request teaches people to ignore every
   spinner on the surface — which is worse than having none. */
.osRegQ{position:relative}
/* ⛔ THE RESERVE MUST OUT-SPECIFY THE FIELD'S OWN PADDING. Measured
   2026-09-11 from the owner's screenshots: the glass sat ON the first letter
   on every one of the three search fields. `.osRegQ input[name="q"]` is
   (0,2,1); `.osApp.osReg .osAppBar input{padding:12px 18px}` above is (0,3,1)
   and the `.withTabs` variant is (0,4,1) — so the shorthand won and the 38px
   reserve was dropped WHOLE, leaving the icon and the text in the same 20px.
   ⛔ Order in the file cannot save a weaker selector; the fix is to carry the
   reserve at a specificity above BOTH, and to assert the COMPUTED padding
   rather than the declaration (test-registry-workspace-browser.mjs). */
.osApp.osReg .osAppBar .osRegQ input[name="q"]{
  padding:12px 18px 12px 38px;font:500 15px/1.4 var(--body);
  background:var(--cream,var(--surf));box-shadow:var(--lift,none)}
.osApp.osReg .osAppBar.withTabs .osRegQ input[name="q"]{padding:8px 14px 8px 34px}
.osApp.osReg .osAppBar.withTabs .osRegSeek{left:10px;width:18px;height:18px}
.osApp.osReg .osAppBar.withTabs .osRegSeek svg{width:18px;height:18px}
.osRegSeek{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;pointer-events:none;color:var(--faint);z-index:2}
.osRegSeek svg{width:20px;height:20px;display:block}
.osRegSeek .ring,.osRegSeek .stem{stroke:currentColor}
.osRegSeek .arc{stroke:transparent}
.osRegSeek.on{color:#8b6cff}
.osRegSeek.on .ring{stroke:color-mix(in oklab,#8b6cff 30%,transparent)}
.osRegSeek.on .arc{stroke:#8b6cff;transform-origin:10.5px 10.5px;
  animation:osRegSpin .9s linear infinite}
@keyframes osRegSpin{to{transform:rotate(360deg)}}

.osRegSeekTx{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:11.5px;color:var(--faint);pointer-events:none;letter-spacing:.02em}
.osRegQ:has(.go) .osRegSeekTx{right:auto;left:44px;
  background:var(--bg);padding-right:8px}

/* ⛔ A person who has asked not to see motion still needs to know we are
   working. The arc stops turning and stands as a solid quarter-ring, so the
   state is carried by COLOUR AND SHAPE rather than by movement — removing the
   animation without replacing the signal would just hide the answer. */
@media (prefers-reduced-motion: reduce){
  .osRegSeek.on .arc{animation:none;stroke:#8b6cff}
}

/* ⛔ RESULTS STAY VISIBLE WHILE THE NEXT ANSWER LOADS. Blanking the list on
   every keystroke is the flicker people describe as "it keeps jumping"; the
   old list is still true until the new one arrives, so it is dimmed, not
   removed. ⚠ Opacity only — no filter, no transform: a blur here would be the
   same per-frame recomposite the app background was just cured of. */
.osRegQ:has(.osRegSeek.on) ~ * .osAppList,
.osApp:has(.osRegSeek.on) .osAppList,
.osApp:has(.osRegSeek.on) .osRegSug{opacity:.55;transition:opacity .12s linear}

/* ── the keyboard cursor ───────────────────────────────────────────────────
   The highlight must be legible without colour alone (a border AND a wash),
   because "which row will Enter open" is not a decorative question. */
.osRegHit.cur{background:color-mix(in oklab,#8b6cff 9%,transparent);
  box-shadow:inset 3px 0 0 #8b6cff}
.osRegHit.cur .t{color:var(--ink)}

/* ── the shortened name, and the form it moved into ────────────────────────
   The business name is the line people read; the legal form is a field on the
   second line where it already was. The full registered name is the row's
   title attribute, so it is one hover away and never lost. */
.osRegHit .t{font-weight:600}
.osRegHitTx .s{color:var(--muted);font-size:11.5px}

/* Reports held, when we know. ⛔ Rendered only for state `held` — see
   os-registry.js: `not_asked` is about the request and `none` is about our
   import lane, and neither is a statement about the company. */
.osRegDocs{font-size:11px;color:#7a5cf0;background:color-mix(in oklab,#8b6cff 10%,transparent);
  border-radius:999px;padding:1px 7px;white-space:nowrap;margin-left:2px}

/* ── the watch star and the door to the list ─────────────────────────────
   Both live in the crumb row, pushed to its right edge, because they are the
   app's own two actions and neither belongs to a company's tabs. */
.osApp.osReg .rhTop .rhActs{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
/* ⚡ Two actions, two shapes (visual pass 2026-09-08, §3.6). The star is a
   TOGGLE about this company: an outlined pill on cream that fills lilac when
   it is on. The door is NAVIGATION to another screen: the same squared,
   filled material the crumbs beside it wear, carrying its count. Same row,
   same height, and they no longer read as two of the same thing. */
.osApp.osReg .osRegWatch,.osApp.osReg .osRegWatchDoor{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 12px;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;white-space:nowrap;
  font:600 11.5px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegWatch{border-radius:999px;background:var(--cream,var(--surf))}
.osApp.osReg .osRegWatchDoor{
  border-radius:9px;border-color:transparent;background:var(--surf);color:var(--ink);font-weight:700}
.osApp.osReg .osRegWatch:hover{border-color:var(--violet,var(--line2));color:var(--ink)}
.osApp.osReg .osRegWatchDoor:hover{background:var(--surf2)}
.osApp.osReg .osRegWatch[disabled]{opacity:.55;cursor:progress}
.osApp.osReg .osRegWatch.on{
  border-color:var(--violet,var(--line2));color:var(--ink);
  background:var(--clay-lilac,color-mix(in srgb,var(--violet) 12%,transparent))}
.osApp.osReg .osRegWatch .star{font-size:13px;line-height:1;color:var(--violet)}
.osApp.osReg .osRegWatchDoor .n{
  display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--fill,var(--violet));color:var(--onfill,var(--cream));
  font:700 10px/1 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}

/* ── the watchlist screen: the lists across the top, the companies below ── */
/* ⚡ TWO JOBS ON ONE LINE, TOLD APART WITHOUT A SECOND FRAME (visual pass
   2026-09-08, §3.1). The FILTERS are the chips: solid cream pills, the chosen
   one filled lilac. The LIST-EDITING controls — the name field, "New list",
   "Delete list" — sit at the far right behind a hairline, drawn as ghosts (no
   fill, a border that only appears on hover) so they weigh less than the
   filters and cannot be mistaken for one more filter. Under the row, one rule
   closes the toolbar off from the companies below it. */
.osApp.osReg .osRegChips{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.osApp.osReg .osRegChip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--cream,var(--surf));color:var(--muted);
  font:600 12px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif);cursor:pointer}
.osApp.osReg .osRegChip:hover{border-color:var(--violet,var(--line2));color:var(--ink)}
.osApp.osReg .osRegChip.on{
  border-color:var(--violet,var(--line2));color:var(--ink);
  background:var(--clay-lilac,color-mix(in srgb,var(--violet) 12%,transparent))}
.osApp.osReg .osRegChip .n{color:var(--faint);font-variant-numeric:tabular-nums;font-weight:500}
.osApp.osReg .osRegNewList{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:14px;position:relative}
.osApp.osReg .osRegNewList::before{
  content:'';position:absolute;left:0;top:50%;height:18px;width:1px;
  transform:translateY(-50%);background:var(--line2,var(--line))}
/* ⛔ The field must fit its own placeholder. At 12ch "List name" rendered as
   "List nam" — a control that cannot say what it is for. */
.osApp.osReg .osRegNewList input{
  width:15ch;min-width:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);
  font:500 12px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegNewList input::placeholder{color:var(--faint)}
.osApp.osReg .osRegNewList input:focus{
  border-color:var(--violet,var(--line2));outline:none;width:19ch;background:var(--cream,var(--surf))}
.osApp.osReg .osRegNewList button,.osApp.osReg .osRegDropList{
  padding:6px 10px;border:1px solid transparent;border-radius:999px;
  background:none;color:var(--muted);cursor:pointer;
  font:600 11.5px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegNewList button:hover{border-color:var(--violet,var(--line2));color:var(--ink)}
.osApp.osReg .osRegDropList:hover{border-color:var(--rose,var(--line2));color:var(--rose)}
.osApp.osReg .osRegNewList button:focus-visible,.osApp.osReg .osRegDropList:focus-visible,
.osApp.osReg .osRegChip:focus-visible{outline:2px solid var(--violet,var(--ink));outline-offset:2px}

/* One watched company: the row opens it, the select files it. Two controls,
   side by side, never nested. */
/* ⚡ ONE CARD PER COMPANY, TWO CONTROLS INSIDE IT (visual pass 2026-09-08,
   §3.3). The cream material and the lift moved from the button to the ROW, so
   the button and its sibling select share one surface; the button itself is
   transparent and the select is a small outlined field on that surface. The
   markup is unchanged — the select stays a sibling, never a child, of the
   button — only the paint moved out one level. Hovering anywhere on the card
   warms the whole card; the button's own lift and hop are switched off here
   because a control that hops away from its sibling looks broken. */
.osApp.osReg .osRegWatchRow{
  display:flex;align-items:center;gap:12px;
  background:var(--cream,var(--surf));box-shadow:var(--lift,none);border-radius:var(--r-s,12px)}
.osApp.osReg .osRegWatchRow:hover{background:var(--cream2,var(--surf))}
.osApp.osReg .osRegWatchRow>.row.osRegHit{
  flex:1;min-width:0;background:transparent;box-shadow:none;
  border-radius:var(--r-s,12px) 0 0 var(--r-s,12px);padding:13px 6px 13px 16px}
.osApp.osReg .osRegWatchRow>.row.osRegHit:hover{background:transparent;transform:none}
.osApp.osReg .osRegWatchRow .osRegHit .t{font:700 14.5px/1.3 var(--disp,Nunito,Sora,sans-serif);color:var(--ink)}
/* ⛔ A WATCHED ROW CARRIES FIVE FACTS AND THE SEARCH ROW CARRIES THREE. The
   shared row's sub line is one nowrap line with an ellipsis, which is right for
   a suggestion and wrong here: it cut "Last report 2024 · on the list since
   2026-09-08" mid-word, so the two facts a watchlist EXISTS to show were the
   two it dropped. Measured 2026-09-08 at 1440px.
   ⚡ §3.2, the honest half: the five facts are ONE text node, so a sheet cannot
   weigh them differently without markup — a span per fact in watchRow() is a
   JS change and out of this pass. What CSS can do it does: the run leaves the
   11.5px monospace of a suggestion for the 12.5px body face at a reading
   line-height, wraps at ~66 characters so it lands as two deliberate lines
   rather than one long grey run, and sets the figures in tabular numerals so
   the number and the `as of` date beside it hold their own columns. ⛔ No
   colour, no weight on any fact: emphasis here would be a claim. */
.osApp.osReg .osRegWatchRow .osRegHit .s{
  white-space:normal;overflow:visible;text-overflow:clip;
  margin-top:4px;max-width:66ch;color:var(--muted);
  font:400 12.5px/1.6 var(--body,Nunito,'DM Sans',system-ui,sans-serif);
  font-variant-numeric:tabular-nums /* ⛔ after the shorthand, which resets it */}
.osApp.osReg .osRegWatchRow .osRegSt{margin-right:2px}
.osApp.osReg .osRegWatchRow.dead>.row.osRegHit .t{color:var(--muted)}
.osApp.osReg .osRegFile{
  flex:none;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 14px 0 0;color:var(--faint);
  font:600 9.5px/1.2 var(--body,Nunito,'DM Sans',system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.osApp.osReg .osRegFile select{
  padding:5px 8px;border:1px solid var(--line2,var(--line));border-radius:8px;min-width:9.5em;
  background:transparent;color:var(--ink);cursor:pointer;letter-spacing:0;text-transform:none;
  font:500 12px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegFile select:hover{border-color:var(--violet,var(--line2))}
.osApp.osReg .osRegFile select:focus-visible{
  border-color:var(--violet,var(--line2));outline:2px solid var(--violet,var(--ink));outline-offset:2px}

/* ── the reader: a reading column, one page at a time ────────────────────
   ⛔ The statement tables are sections now, not disclosures — the figures a
      person opened the filing for are not hidden behind a press. */
/* ⚡ THE READING RHYTHM (visual pass 2026-09-08, §3.5). Three kinds of thing
   sit under the title and each gets its own weight and its own gap:
     statement  — a real heading in the display face, set in its own case (the
                  shared `.osAppOne h3` rule would upper-case it into the same
                  small-cap label the reader's section uses), 32px below the one
                  before it, its table closed by the last row not a rule;
     the reader — 48px down and behind a rule of its own, a heading of the same
                  rank, the pager beside it;
     the page   — 12px under its label, on the lifted cream sheet.
   The eye then has three places to land: title, statement, page. */
.osApp.osReg .osRegStatement{margin:0 0 32px;border-bottom:0}
.osApp.osReg .osRegStatement>h3{
  margin:0 0 12px;font:800 15px/1.3 var(--disp,Nunito,Sora,sans-serif);color:var(--ink);
  letter-spacing:-.01em;text-transform:none}
.osApp.osReg .osRegStatement>h3 small{
  margin-left:8px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;
  font:600 10.5px var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace)}
.osApp.osReg .osRegReportBack{
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--muted);cursor:pointer;
  font:600 11.5px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegReportBack:hover{border-color:var(--violet,var(--line2));color:var(--ink)}

.osApp.osReg .osRegReader{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.osApp.osReg .osRegReaderBar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 0 12px;border-bottom:1px solid var(--line)}
.osApp.osReg .osRegReaderBar h3{
  margin:0;font:800 15px/1.3 var(--disp,Nunito,Sora,sans-serif);color:var(--ink);
  letter-spacing:-.01em;text-transform:none}
.osApp.osReg .osRegPages{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
/* ⚡ A STRIP THAT SURVIVES FORTY PAGES (§3.4). Every cell is the same width
   (28px, so 3-digit page numbers still fit) and the gaps are 2px, so a long
   filing wraps into an even grid of numerals rather than a paragraph of
   digits. Past 12 pages the whole pager takes its own line under the heading:
   `Previous` at the left end, `Next` at the right, the grid between them —
   `:has()` reads the count off the DOM so the sheet needs no help from JS. */
.osApp.osReg .osRegPageStrip{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.osApp.osReg .osRegPageNo{
  min-width:28px;height:26px;padding:0 4px;border:1px solid transparent;border-radius:7px;
  display:inline-grid;place-items:center;
  background:none;color:var(--muted);cursor:pointer;
  font:600 11.5px/1 var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);
  font-variant-numeric:tabular-nums}
.osApp.osReg .osRegPageNo:hover{border-color:var(--line);color:var(--ink)}
.osApp.osReg .osRegPageNo.on{
  border-color:var(--violet,var(--line2));color:var(--ink);
  background:var(--clay-lilac,color-mix(in srgb,var(--violet) 12%,transparent))}
.osApp.osReg .osRegPageNo:focus-visible{outline:2px solid var(--violet,var(--ink));outline-offset:1px}
.osApp.osReg .osRegPageStep{
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  font:600 11px/1.3 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegPageStep:hover:not([disabled]){border-color:var(--violet,var(--line2));color:var(--ink)}
.osApp.osReg .osRegPageStep[disabled]{opacity:.35;cursor:default}
.osApp.osReg .osRegPages:has(.osRegPageNo:nth-child(n+13)){
  flex:1 1 100%;margin-left:0;flex-wrap:wrap;align-items:flex-start}
.osApp.osReg .osRegPages:has(.osRegPageNo:nth-child(n+13)) .osRegPageStrip{
  order:2;flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fill,28px);gap:2px}
.osApp.osReg .osRegPages:has(.osRegPageNo:nth-child(n+13)) .osRegPageStep[data-page-step="1"]{
  order:1;margin-left:auto}
/* ⛔ No text-transform here: the label says "filed text (verbatim)" and a sheet
   that shouts it in capitals has changed what the person reads. */
.osApp.osReg .osRegPageLab{
  margin:12px 0 0;color:var(--faint);letter-spacing:.02em;
  font:500 11px/1.4 var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace)}

/* ⛔ ONE PAGE, AND ITS LINE BREAKS ARE THE FILING'S. Both layouts keep the
   text exactly as filed; only the typeface differs — a column-aligned page in
   a proportional font loses its columns, and prose in monospace reads as a
   log file. ⚡ The column face is 13px now — DESIGN.md's floor for dense
   table text — and the widest filed line measured (~90 columns) still fits the
   1440 sheet without scrolling; narrower sheets scroll the page, never the pane. */
.osApp.osReg .osRegPageText{
  margin:12px 0 0;padding:24px 28px;border-radius:var(--r-s,12px);
  background:var(--cream,var(--surf));box-shadow:var(--lift,none);
  white-space:pre-wrap;overflow-wrap:anywhere}
.osApp.osReg .osRegPageText.prose{
  font:400 14.5px/1.75 var(--body,Nunito,'DM Sans',system-ui,sans-serif);color:var(--ink);max-width:74ch}
.osApp.osReg .osRegPageText.cols{
  font:400 13px/1.6 var(--osMono,ui-monospace,'JetBrains Mono',Menlo,monospace);color:var(--ink);
  white-space:pre;overflow-x:auto;overflow-wrap:normal}
.osApp.osReg .osRegPageBlank{
  margin:12px 0 0;padding:24px 28px;border-radius:var(--r-s,12px);
  background:var(--cream2,var(--surf));color:var(--muted);
  font:400 13px/1.6 var(--body,Nunito,'DM Sans',system-ui,sans-serif)}
.osApp.osReg .osRegReader .osRegCaveat{margin-top:12px}

/* ⚡ 390px (visual pass 2026-09-08, §3.7). The company card stacks: the button
   on top, the `List` control on one line inside the same card's foot. The
   list-editing form takes its own line under a hairline of its own, since the
   vertical separator has no line to stand on once the row wraps. The pager
   puts Previous and Next at the two ends of one line and the page grid
   beneath them, so the strip never splits a step button off on its own.
   ⛔ The pane never scrolls sideways — the column page scrolls inside itself. */
@media(max-width:640px){
  .osApp.osReg .osRegWatchRow{flex-direction:column;align-items:stretch;gap:0}
  /* one column: the status pill drops under the facts instead of squeezing
     them into a strip beside it — five facts in three lines, not six */
  .osApp.osReg .osRegWatchRow>.row.osRegHit{
    grid-template-columns:minmax(0,1fr);gap:8px;
    border-radius:var(--r-s,12px) var(--r-s,12px) 0 0;padding:12px 14px 8px}
  .osApp.osReg .osRegWatchRow .osRegHit .s{max-width:none}
  .osApp.osReg .osRegWatchRow .osRegSt{justify-self:start;margin:0}
  .osApp.osReg .osRegFile{flex-direction:row;align-items:center;gap:10px;padding:0 14px 12px}
  .osApp.osReg .osRegFile select{flex:0 1 14em;min-width:0}
  .osApp.osReg .osRegNewList{margin-left:0;flex:1 1 100%;padding:10px 0 0;border-top:1px solid var(--line);margin-top:4px}
  .osApp.osReg .osRegNewList::before{display:none}
  .osApp.osReg .osRegNewList input{flex:1;width:auto}
  .osApp.osReg .osRegDropList{margin-left:auto}
  .osApp.osReg .osRegPages{margin-left:0;flex:1 1 100%;align-items:flex-start}
  .osApp.osReg .osRegPageStrip{order:2;flex:1 1 100%}
  .osApp.osReg .osRegPageStep[data-page-step="1"]{order:1;margin-left:auto}
  .osApp.osReg .osRegReport>h2{font-size:21px}
  .osApp.osReg .osRegSource{margin-bottom:24px}
  .osApp.osReg .osRegStatement{margin-bottom:24px}
  .osApp.osReg .osRegReader{margin-top:32px;padding-top:20px}
  .osApp.osReg .osRegPageText,.osApp.osReg .osRegPageBlank{padding:18px 16px}
  /* the column heads may wrap here — kept on one line they pushed the
     "Previous year" column off the edge into a sideways scroll */
  .osApp.osReg .osRegStatement thead th{white-space:normal}
  .osApp.osReg .osRegStatement th:first-child{min-width:120px}
}