/* ==========================================================================================
   NIGHT DESK — VerityGrade's look (Jason, 29-30 Sep 2026; applied to the real pages in block 211).
   "I like night desk." · "I think beam is my fav." · "Ok I Think I love this." · "And we can proceed with this. I like it"

   ONE stylesheet, loaded by one line on every page it styles, AFTER each page's own styles, so it wins exactly as the
   approved previews did (they were appended last to the same pages). LOOKS ONLY: no page's behaviour, words, buttons,
   fields or routes depend on this file; if it failed to load, every page would still work in its old look.

   Built from the three approved previews, each carried in UNCHANGED between its BEGIN and END markers (block 211 proves
   this byte for byte against the scratch originals):
     A. Night Desk, block 207 final round - every page: the dark desk, the rail, the file, sign-in, the broker's pages.
     B. Beam, block 209 after its critic round - the dashboard: three columns, each file on a lit dot, a soft status glow.
     C. The sidebar, block 210 after its critic round - the sidebar in the page's own near-black, the logo on a card.
     D. Block 211: the ADR card at the foot of the sidebar beside "Sign out", and the broker's document view.
   Fonts: Outfit and Inter, hosted on our own site (/vendor/fonts). Nothing here reaches outside the site.
   Every selector is scoped to one page by what that page alone contains:
     body:has(> header.top)               the agents' screen (dashboard, open file, cleared file)
     body:has(form[action="/login"])      sign-in
     body:has(form[action="/set-password"])  choose your password
     body:has(> img.vgl)                  the broker's submissions and agents pages
     body:has(> .bar + #pages)            the broker's document view
   ========================================================================================== */
@import url(/vendor/fonts/intake.css);

/* ==== BEGIN A: Night Desk (block 207, final round) ==== */
:root{
  --nd-ground:#060C16; --nd-rail:#0A1322; --nd-card:#101C2F; --nd-raised:#16243B; --nd-well:#070E1A;
  --nd-edge:rgba(152,184,230,.14); --nd-edge-hi:rgba(170,200,245,.30);
  --nd-ink:#E8EEF7; --nd-ink-2:#A9B8CC; --nd-ink-3:#8A9DB6;
  --nd-cobalt:#2F5FE8; --nd-cobalt-hi:#3F6EF5; --nd-cobalt-text:#9DB8FF; --nd-cobalt-glow:rgba(47,95,232,.45);
  --nd-red:#C0402E; --nd-red-text:#FF9A8A; --nd-green:#1F7A52; --nd-green-text:#74D6A6; --nd-amber:#E0A52C;
  --nd-rail-w:272px;
}

/* ==================================== INTAKE PAGE ==================================== */
html body:has(> header.top){
  --bg:var(--nd-ground); --panel:var(--nd-card); --raised:var(--nd-raised); --navy:#060C16; --navy-soft:#16243B;
  --text:var(--nd-ink); --muted:var(--nd-ink-2); --faint:var(--nd-ink-3); --sand:var(--nd-cobalt); --cream:var(--nd-card);
  --accent:var(--nd-cobalt); --accent-ink:var(--nd-ink); --overdue:var(--nd-red-text); --aging:#C3CFE0;
  --hairline:var(--nd-edge); --r:12px;
  color:var(--nd-ink);-webkit-font-smoothing:antialiased;padding-left:var(--nd-rail-w);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(47,95,232,.14), transparent 60%),
    linear-gradient(rgba(141,180,255,.028) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(141,180,255,.028) 1px, transparent 1px) 0 0/40px 40px,
    var(--nd-ground);
  background-attachment:fixed;
}
html body:has(> header.top) :focus-visible{outline:2px solid var(--nd-cobalt-text);outline-offset:2px}

/* ---- the rail ---- */
html body:has(> header.top) header.top{position:fixed;top:0;left:0;bottom:0;width:var(--nd-rail-w);z-index:30;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,#0C1729 0%,var(--nd-rail) 55%,#08101D 100%);
  border-top:0;border-bottom:0;border-right:1px solid var(--nd-edge);box-shadow:12px 0 40px rgba(0,0,0,.25)}
html body:has(> header.top) header.top .top-in{max-width:none;min-height:100%;box-sizing:border-box;margin:0;padding:0 0 20px;
  display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0}
/* the brand panel: white on purpose, full rail width, lit from beneath, ADR inside it */
html body:has(> header.top) header.top .logo{order:1;display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;background:#FEFEFE;
  padding:30px 24px 0;position:relative;
  box-shadow:0 2px 0 #D7222A,0 22px 44px -14px rgba(63,110,245,.45)}
html body:has(> header.top) header.top .logo .plate.vg.big{display:block;background:none;padding:0;border-radius:0;box-shadow:none}
html body:has(> header.top) header.top .logo .plate.vg.big img{display:block;width:100%;height:auto;max-width:none}
html body:has(> header.top) header.top .logo .plate.adr.corner{position:static;display:flex;justify-content:flex-start;align-items:center;background:none;
  border-radius:0;padding:12px 0 12px;margin-top:22px;border-top:1px solid #E3E7EE}
html body:has(> header.top) header.top .logo .plate.adr.corner img{height:26px}
html body:has(> header.top) header.top .logo .mark{margin:12px 0}
/* the two figures */
html body:has(> header.top) header.top .barstats{order:2;margin:26px 24px 0;display:flex;flex-direction:column;gap:0;width:auto}
html body:has(> header.top) header.top .bstat{padding:14px 0 16px;border-top:1px solid var(--nd-edge);line-height:1.1}
html body:has(> header.top) header.top .bstat:first-child{border-top:0;padding-top:0}
html body:has(> header.top) header.top .bstat .bl{font-family:Inter,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--nd-ink-2)}
html body:has(> header.top) header.top .bstat .bv{font-family:Outfit,Inter,sans-serif;font-size:34px;font-weight:500;letter-spacing:-.02em;color:#fff;margin:6px 0 4px}
html body:has(> header.top) header.top .bstat .bs{font-size:12px;color:var(--nd-cobalt-text)}
/* who is signed in: the foot of the rail */
html body:has(> header.top) header.top .whoami{order:3;margin:auto 24px 0;padding:16px 0 0;border-top:1px solid var(--nd-edge);justify-content:space-between;color:var(--nd-ink-2);font-size:12.5px}
html body:has(> header.top) header.top .whoami #signout{border-color:var(--nd-edge-hi);color:var(--nd-ink);border-radius:8px;padding:5px 12px}
html body:has(> header.top) header.top .whoami #signout:hover{border-color:var(--nd-cobalt-text);color:#fff}

/* ---- main column ---- */
html body:has(> header.top) .wrap{max-width:1120px;padding:0 36px 80px;animation:nd-arrive .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes nd-arrive{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
html body:has(> header.top) .hero{margin-top:28px}
html body:has(> header.top) footer.buildline{max-width:1120px;padding:0 36px;color:var(--nd-ink-3);font-size:11px;text-align:left}

/* the hard-stops alarm: a red signal line across the desk */
html body:has(> header.top) .attn-strip{width:auto;justify-self:stretch;gap:14px;border-radius:12px;padding:12px 18px 12px 12px;font-size:14.5px;font-weight:500;color:#fff;
  background:linear-gradient(90deg,#D04A36,#C0402E 55%,#A8321F);border:1px solid #F07A64;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 4px rgba(192,64,46,.22),0 0 44px rgba(224,96,76,.55),0 14px 34px rgba(192,64,46,.45)}
html body:has(> header.top) .attn-strip .num{display:inline-grid;place-items:center;min-width:32px;height:32px;border-radius:9px;background:#fff;color:#A8321F;
  font-size:17px;margin-left:6px;box-shadow:0 0 0 1px #E0604C,0 0 16px rgba(224,96,76,.6)}

html body:has(> header.top) h2.sect{font-family:Outfit,Inter,sans-serif;text-transform:none;letter-spacing:-.01em;font-size:26px;font-weight:500;color:#fff;margin:34px 0 16px}
html body:has(> header.top) #ws-holder h2.sect,html body:has(> header.top) #insp-panel h2.sect{font-size:20px;margin-top:40px}

/* ---- the board ---- */
html body:has(> header.top) .pipe{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:stretch}
html body:has(> header.top) .prow{background:linear-gradient(180deg,rgba(18,32,54,.8),rgba(11,21,36,.55));border:1px solid var(--nd-edge);border-top:2px solid #4D7BFF;
  border-radius:14px;padding:14px 12px 14px;min-width:0}
html body:has(> header.top) .prow:nth-child(2){border-top-color:#2FA774}
html body:has(> header.top) .prow:nth-child(3){border-top-color:#E6C35C}
html body:has(> header.top) .prow-l{display:flex;align-items:center;gap:9px;font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--nd-ink);margin:0 2px 16px}
html body:has(> header.top) .prow-l::before{content:'';width:8px;height:8px;border-radius:50%;background:#4D7BFF;box-shadow:0 0 10px #4D7BFF}
html body:has(> header.top) .prow:nth-child(2) .prow-l::before{background:#2FA774;box-shadow:0 0 10px #2FA774}
html body:has(> header.top) .prow:nth-child(3) .prow-l::before{background:#F3D77A;box-shadow:0 0 10px #E6C35C}
html body:has(> header.top) .prow-g{grid-template-columns:1fr;gap:12px;align-content:start}
html body:has(> header.top) .prow:first-child .prow-g{grid-template-columns:repeat(2,minmax(0,1fr))}
html body:has(> header.top) .prow:first-child .prow-g .newf{grid-column:1/-1}

html body:has(> header.top) .fcard{background:linear-gradient(180deg,#132139,#0F1B2E);border:1px solid var(--nd-edge);border-radius:12px;padding:13px 14px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.28);transition:border-color .15s,box-shadow .15s}
html body:has(> header.top) .fcard:hover{border-color:var(--nd-edge-hi)}
html body:has(> header.top) .fcard.on{border-color:#4D7BFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(47,95,232,.35),0 10px 26px rgba(0,0,0,.35)}
html body:has(> header.top) .fcard .fn,html body:has(> header.top) .fcard .fname-slot{font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;color:inherit;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3;min-width:0}
html body:has(> header.top) .fcard .fp{font-family:Outfit,Inter,sans-serif;font-size:22px;font-weight:500;letter-spacing:-.01em;margin-top:6px;color:#fff}
/* status chip on its own line, the facts in a tidy line beneath it — never a ragged wrap */
html body:has(> header.top) .fcard .fm{display:flex;flex-wrap:wrap;align-items:center;column-gap:9px;row-gap:3px;font-size:11.5px;color:var(--nd-ink-2);margin-top:9px}
html body:has(> header.top) .fcard .fm::before{content:'';order:1;flex-basis:100%;height:0}
html body:has(> header.top) .fcard .fm .chip{order:0;margin-bottom:4px}
html body:has(> header.top) .fcard .fm > span:not(.chip){order:2}
html body:has(> header.top) .fcard .fm span:not(.chip){white-space:normal;overflow-wrap:anywhere}
html body:has(> header.top) .fcard .fdel{color:var(--nd-ink-3)}
html body:has(> header.top) .fcard .fdel:hover{color:#fff;background:rgba(255,255,255,.08)}
html body:has(> header.top) .chip{background:rgba(255,255,255,.04);border-color:var(--nd-edge-hi);color:var(--nd-ink-2);padding:2px 9px;font-size:10.5px}
html body:has(> header.top) .chip.declaring{color:#C3CFE0;border-color:rgba(195,207,224,.35)}
html body:has(> header.top) .chip.submitted{color:var(--nd-cobalt-text);border-color:rgba(77,123,255,.6);background:rgba(47,95,232,.14)}
html body:has(> header.top) .tcbadge{top:-9px;left:12px;background:#E8EEF7;color:#07101E;border-radius:6px;font-size:9.5px;padding:3px 6px;box-shadow:0 2px 8px rgba(0,0,0,.4)}

html body:has(> header.top) .fcard.needs{background:linear-gradient(160deg,#C4432F 0%,#C0402E 45%,#A5311F 100%);border-color:#E36B57;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(192,64,46,.5),0 10px 30px rgba(192,64,46,.38)}
html body:has(> header.top) .fcard.needs .fm,html body:has(> header.top) .fcard.needs .fdel{color:#FFE9E5}
html body:has(> header.top) .fcard.needs .chip.needs{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.14)}
html body:has(> header.top) .fcard.cleared{background:linear-gradient(160deg,#1F7A52 0%,#1C7049 50%,#18653F 100%);border-color:#3BAA78;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(31,122,82,.5),0 10px 30px rgba(31,122,82,.38)}
html body:has(> header.top) .fcard.cleared .fm,html body:has(> header.top) .fcard.cleared .fdel{color:#EAF7F0}
html body:has(> header.top) .fcard.cleared .chip.cleared{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.14)}
/* GOLD — the achievement. Sparkles live in the empty right-hand field, clear of every word. */
html body:has(> header.top) .fcard.closed{overflow:visible;border:1px solid #F3D77A;color:#2B1D00;
  background:linear-gradient(115deg,#B8860B 0%,#E6C35C 22%,#FFF1B8 38%,#D4AF37 52%,#A67C00 70%,#F3D77A 86%,#C9A227 100%);
  background-size:260% 100%;animation:goldshine 5s ease-in-out infinite;
  box-shadow:inset 0 0 0 1px rgba(255,241,184,.7),inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(201,162,39,.55),0 0 26px rgba(230,195,92,.35),0 12px 34px rgba(166,124,0,.45)}
html body:has(> header.top) .fcard.closed::after{border-radius:inherit;inset:36px 10px 0 58%;
  background:radial-gradient(circle at 20% 22%,rgba(255,255,255,.95) 0 1.6px,transparent 3.2px),
             radial-gradient(circle at 62% 12%,rgba(255,255,255,.95) 0 1.3px,transparent 2.8px),
             radial-gradient(circle at 86% 30%,rgba(255,255,255,.95) 0 1.7px,transparent 3.4px),
             radial-gradient(circle at 44% 40%,rgba(255,255,255,.8) 0 1.1px,transparent 2.4px)}
html body:has(> header.top) .fcard.closed .fp,html body:has(> header.top) .fcard.closed .fm,html body:has(> header.top) .fcard.closed .fdel{color:#2B1D00}
html body:has(> header.top) .fcard.closed .chip.closed{background:#2B1D00;color:#F3D77A;border-color:#2B1D00}
html body:has(> header.top) .fcard.closed .tcbadge{background:#2B1D00;color:#F3D77A}

html body:has(> header.top) .newf{min-height:88px;background:rgba(47,95,232,.08);border:1.5px dashed rgba(77,123,255,.6);color:var(--nd-cobalt-text);font-size:17px;border-radius:12px;box-shadow:none}
html body:has(> header.top) .newf:hover{background:var(--nd-cobalt);border-style:solid;border-color:var(--nd-cobalt);color:#fff}
html body:has(> header.top) .pipe-total{color:var(--nd-ink-2);margin-top:14px;font-size:12.5px}

/* ---- the file: a settings table over a wall of document cards ---- */
html body:has(> header.top) .ws{background:linear-gradient(180deg,#111E33,#0C1728);border:1px solid var(--nd-edge);border-radius:16px;padding:26px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 40px rgba(0,0,0,.3)}
html body:has(> header.top) .ws-head{margin-bottom:18px;gap:14px}
html body:has(> header.top) .ws-head input.fname{font-family:Outfit,Inter,sans-serif;font-size:26px;font-weight:500;color:#fff;letter-spacing:-.01em}
html body:has(> header.top) .ws:not(.compact) > .axis{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:18px;margin:0;padding:11px 0;border-top:1px solid var(--nd-edge)}
html body:has(> header.top) .ws:not(.compact) > .axis:last-of-type{border-bottom:1px solid var(--nd-edge)}
html body:has(> header.top) .ws:not(.compact) > .axis > .lab{margin:0;font-size:13px;font-weight:500;color:var(--nd-ink-2)}
html body:has(> header.top) .tabs{justify-self:start;background:var(--nd-well);border:1px solid var(--nd-edge);border-radius:10px;padding:3px;gap:2px}
html body:has(> header.top) .tabs button{color:#B9C7DA;border-radius:7px;font-size:12.5px;padding:6px 13px}
html body:has(> header.top) .tabs button:hover{color:#fff;background:rgba(255,255,255,.05)}
html body:has(> header.top) .tabs button.on{background:var(--nd-cobalt);color:#fff;box-shadow:0 0 0 1px #4D7BFF,0 4px 14px var(--nd-cobalt-glow)}
html body:has(> header.top) .tabs button[disabled].on{opacity:1}
html body:has(> header.top) .price-row{gap:16px;flex-wrap:nowrap;align-items:center}
html body:has(> header.top) .price-in{background:var(--nd-well);border:1px solid var(--nd-edge-hi);border-radius:10px;flex:none}
html body:has(> header.top) .price-in span{color:var(--nd-ink-2)}
html body:has(> header.top) .price-in input{color:#fff;font-family:Outfit,Inter,sans-serif;font-size:17px}
html body:has(> header.top) .price-note{color:var(--nd-ink-3);font-size:11px;line-height:1.45}
html body:has(> header.top) textarea{background:var(--nd-well);color:var(--nd-ink);border:1px solid var(--nd-edge-hi);border-radius:10px;padding:8px 10px;font:inherit}

/* document cards */
html body:has(> header.top) .ws:not(.closing) > .slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
html body:has(> header.top) .slot{position:relative;background:linear-gradient(180deg,#0E192B,#0A1424);border:1px solid var(--nd-edge);border-radius:14px;padding:14px 12px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html body:has(> header.top) .slot[data-grade]{background:linear-gradient(180deg,#0E192B,#0A1424);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);border-color:var(--nd-edge)}
/* the document glyph: an outline when empty, a lit sheet when filled or graded */
html body:has(> header.top) .slot::before{content:'';position:absolute;top:13px;left:12px;width:14px;height:18px;border-radius:2px;
  box-shadow:inset 0 0 0 1.5px #5E7391;clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
html body:has(> header.top) .slot .sh{padding-left:24px;gap:4px 8px;align-items:center;min-height:20px}
html body:has(> header.top) .slot .sn{font-family:Outfit,Inter,sans-serif;font-size:13.5px;font-weight:600;color:#fff;line-height:1.25;flex-basis:100%}
html body:has(> header.top) .slot .gchip{order:2;font-family:Inter,sans-serif;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;padding:0;background:none;border:0;display:inline-flex;align-items:center;gap:5px}
html body:has(> header.top) .slot .gchip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
html body:has(> header.top) .slot .gchip.none{color:var(--nd-ink-3);background:none}
html body:has(> header.top) .slot .gchip.stop{color:var(--nd-red-text);background:none}
html body:has(> header.top) .slot .gchip.question{color:#F1C66A;background:none}
html body:has(> header.top) .slot .gchip.passed{color:var(--nd-green-text);background:none}
html body:has(> header.top) .slot .st{order:3;margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nd-ink-3)}
html body:has(> header.top) .slot .sc{color:var(--nd-ink-3);font-size:10.5px;line-height:1.4;margin-top:8px}
html body:has(> header.top) .slot .pills{margin:10px 0 10px}
html body:has(> header.top) .pill{background:#14264A;border:1px solid rgba(77,123,255,.45);color:var(--nd-ink);border-radius:8px;padding:6px 8px;font-size:11px}
html body:has(> header.top) .pill .px{color:var(--nd-cobalt-text)}
html body:has(> header.top) .pill .px:hover{color:#fff}
html body:has(> header.top) .pill .crm{color:var(--nd-ink);border-color:var(--nd-edge-hi);border-radius:7px}
html body:has(> header.top) .slot .add{margin-top:auto;height:32px;border:1px solid rgba(77,123,255,.6);border-radius:9px;background:rgba(47,95,232,.16);color:#D3DFFF;
  font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:0 8px;cursor:pointer}
html body:has(> header.top) .slot .add:hover{background:var(--nd-cobalt);border-color:var(--nd-cobalt);color:#fff}
html body:has(> header.top) .slot.catchall{border-style:dashed}
/* filled: the card lights up */
html body:has(> header.top) .slot.filled,html body:has(> header.top) .slot.filled[data-grade],html body:has(> header.top) .slot.cbox:has(.pill){border-color:rgba(77,123,255,.6);
  background:linear-gradient(180deg,#132650,#0E1B36);box-shadow:inset 0 2px 0 #4D7BFF,0 0 22px rgba(47,95,232,.18)}
html body:has(> header.top) .slot.filled::before,html body:has(> header.top) .slot.cbox:has(.pill)::before{box-shadow:none;background:linear-gradient(160deg,#7EA2FF,#2F5FE8)}
html body:has(> header.top) .slot.filled .st{color:var(--nd-cobalt-text)}
html body:has(> header.top) .slot.filled .add,html body:has(> header.top) .slot.cbox:has(.pill) .add{background:transparent;border-color:var(--nd-edge-hi);color:var(--nd-ink-2)}
html body:has(> header.top) .slot.filled .add:hover,html body:has(> header.top) .slot.cbox:has(.pill) .add:hover{background:var(--nd-cobalt);border-color:var(--nd-cobalt);color:#fff}
/* graded: the result colours the whole card */
html body:has(> header.top) .slot[data-grade="stop"]{background:linear-gradient(180deg,rgba(192,64,46,.26),rgba(192,64,46,.10));border-color:#D0513E;box-shadow:inset 0 2px 0 #E0604C,0 0 22px rgba(192,64,46,.25)}
html body:has(> header.top) .slot[data-grade="stop"]::before{box-shadow:none;background:#E0604C}
html body:has(> header.top) .slot[data-grade="question"]{background:linear-gradient(180deg,rgba(201,138,14,.24),rgba(201,138,14,.08));border-color:#C98A0E;box-shadow:inset 0 2px 0 var(--nd-amber)}
html body:has(> header.top) .slot[data-grade="question"]::before{box-shadow:none;background:var(--nd-amber)}
html body:has(> header.top) .slot[data-grade="passed"]{background:linear-gradient(180deg,rgba(31,122,82,.30),rgba(31,122,82,.10));border-color:#2FA774;box-shadow:inset 0 2px 0 #2FA774,0 0 22px rgba(31,122,82,.22)}
html body:has(> header.top) .slot[data-grade="passed"]::before{box-shadow:none;background:#2FA774}
/* drag-over wins over every state */
html body:has(> header.top) .slots .slot.dragover.dragover,html body:has(> header.top) .slots .slot.dragover.dragover[data-grade]{border-color:#7EA2FF;border-style:solid;
  background:linear-gradient(180deg,rgba(47,95,232,.38),rgba(47,95,232,.18));box-shadow:0 0 0 2px #4D7BFF,0 0 30px rgba(47,95,232,.5)}

html body:has(> header.top) .attached-note{color:var(--nd-ink-2);font-size:12px}
html body:has(> header.top) .footnote,html body:has(> header.top) .gate-why{color:var(--nd-ink-3)}
html body:has(> header.top) .acdnote{background:rgba(201,138,14,.12);border-color:rgba(224,165,44,.45);color:#F1D9A0}
html body:has(> header.top) .acdnote b{color:#FFD27A}
html body:has(> header.top) .acdnote .eng{color:#E9CD8C}
html body:has(> header.top) .orphans{background:rgba(201,138,14,.08);border-color:rgba(224,165,44,.4)}

html body:has(> header.top) .btn{border-radius:10px;font-family:Inter,sans-serif}
html body:has(> header.top) .btn.primary{background:linear-gradient(180deg,var(--nd-cobalt-hi),var(--nd-cobalt));color:#fff;box-shadow:0 0 0 1px #4D7BFF,0 8px 24px var(--nd-cobalt-glow)}
html body:has(> header.top) .btn.primary:hover{background:var(--nd-cobalt-hi)}
html body:has(> header.top) .btn.primary:disabled{background:var(--nd-raised);color:var(--nd-ink-3);box-shadow:none}
html body:has(> header.top) .btn.ghost{color:var(--nd-ink);border:1px solid var(--nd-edge-hi);background:rgba(255,255,255,.03)}
html body:has(> header.top) .btn.ghost:hover{border-color:var(--nd-cobalt-text)}
html body:has(> header.top) .btn:not(.primary):not(.ghost){background:var(--nd-raised);color:var(--nd-ink);border:1px solid var(--nd-edge-hi)}
html body:has(> header.top) #ovr-open{border-color:rgba(255,154,138,.55);color:#FFB3A7}
html body:has(> header.top) #ovr-open:hover{background:rgba(192,64,46,.14)}
html body:has(> header.top) .unsaved-warn{background:rgba(192,64,46,.16);border-color:rgba(224,96,76,.55);color:#FFD0C8}
html body:has(> header.top) .unsaved-warn div{color:#FFB3A7}
html body:has(> header.top) .unsaved-warn .btn:not(.primary):not(.ghost){background:#B3261E;color:#fff;border:0}
html body:has(> header.top) .pill.nope{background:rgba(192,64,46,.18);border-color:rgba(224,96,76,.55);color:#FFD0C8}
html body:has(> header.top) .locked-note{background:linear-gradient(90deg,rgba(31,122,82,.20),rgba(31,122,82,.06));border:1px solid rgba(47,167,116,.4);color:var(--nd-ink-2);border-radius:12px;box-shadow:inset 3px 0 0 #2FA774}
html body:has(> header.top) .locked-note b{color:var(--nd-green-text)}
html body:has(> header.top) .insp-msg{color:var(--nd-ink-2)}
html body:has(> header.top) #insp-wrap[data-state="done"] .insp-msg{color:var(--nd-ink)}
html body:has(> header.top) #insp-wrap[data-state="running"] .insp-msg{color:#E8C66A}
html body:has(> header.top) #insp-wrap[data-state="failed"] .insp-msg{color:var(--nd-red-text)}
html body:has(> header.top) .collecting,html body:has(> header.top) .pill.sending{background:#13213A;border-color:var(--nd-edge-hi);color:var(--nd-ink)}
html body:has(> header.top) .pill.sending em{color:var(--nd-ink-2)}
html body:has(> header.top) .toast{background:#E8EEF7;color:#07101E;border-color:#E8EEF7}
html body:has(> header.top) .showpg{background:rgba(47,95,232,.16);border-color:rgba(77,123,255,.6);color:#D3DFFF}
/* page viewer: a dark frame around the white page */
html body:has(> header.top) .pgv{background:rgba(3,7,14,.72)}
html body:has(> header.top) .pgv-box{background:#0D1829;border:1px solid var(--nd-edge-hi);color:var(--nd-ink);box-shadow:0 30px 80px rgba(0,0,0,.6)}
html body:has(> header.top) .pgv-head{color:var(--nd-ink);border-bottom-color:var(--nd-edge)}
html body:has(> header.top) .pgv-body img{border-color:var(--nd-edge-hi);background:#fff}
html body:has(> header.top) .pgv-msg{color:var(--nd-ink-2)}

/* cleared file: the answers as a strip of spec tiles */
html body:has(> header.top) .ws.compact > .axis{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0 8px 8px 0;padding:10px 14px;
  background:var(--nd-well);border:1px solid var(--nd-edge);border-radius:12px;vertical-align:top}
html body:has(> header.top) .ws.compact > .axis .lab{font-size:11px;font-weight:500;color:var(--nd-ink-3);white-space:nowrap}
html body:has(> header.top) .ws.compact > .axis .tabs{background:none;border:0;padding:0}
html body:has(> header.top) .ws.compact > .axis .tabs button,html body:has(> header.top) .ws.compact > .axis .tabs button.on{background:none;box-shadow:none;color:#fff;padding:0;font-family:Outfit,Inter,sans-serif;font-size:15px;font-weight:500}
html body:has(> header.top) .ws.compact > .axis:has(.price-row){display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:4px 0 0;width:100%;box-sizing:border-box}
html body:has(> header.top) .ws.compact > .axis:has(.price-row) .price-row{flex:1;min-width:0}
html body:has(> header.top) .ws.closing{background:none;border:0;box-shadow:none;padding:0}
html body:has(> header.top) .ws.closing .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-rows:auto}
html body:has(> header.top) .ws.closing .cbox{margin-bottom:0;min-height:150px}

/* ---- phone ---- */
@media (max-width:860px){
  html body:has(> header.top){padding-left:0}
  html body:has(> header.top) header.top{position:sticky;top:0;bottom:auto;width:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--nd-edge);box-shadow:0 8px 24px rgba(0,0,0,.35)}
  html body:has(> header.top) header.top .top-in{flex-direction:row;flex-wrap:wrap;align-items:center;padding:0 16px 12px;gap:10px 12px;min-height:0}
  html body:has(> header.top) header.top .logo{flex:0 0 calc(100% + 32px);margin:0 -16px;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 16px;box-sizing:border-box}
  html body:has(> header.top) header.top .logo .plate.vg.big img{width:auto;height:32px}
  html body:has(> header.top) header.top .logo .plate.adr.corner{margin:0;padding:0 0 0 12px;border-top:0;border-left:1px solid #E3E7EE;gap:10px}
  html body:has(> header.top) header.top .logo .plate.adr.corner::before{display:none}
  html body:has(> header.top) header.top .logo .plate.adr.corner img{height:22px}
  html body:has(> header.top) header.top .barstats{order:2;flex-direction:row;margin:4px 0 0;gap:22px;flex:1}
  html body:has(> header.top) header.top .bstat{border:0;padding:0}
  html body:has(> header.top) header.top .bstat .bv{font-size:22px;margin:2px 0 1px}
  html body:has(> header.top) header.top .whoami{order:3;margin:4px 0 0 auto;padding:0;border:0;gap:8px}
  html body:has(> header.top) .wrap,html body:has(> header.top) footer.buildline{padding-left:16px;padding-right:16px}
  html body:has(> header.top) .pipe{grid-template-columns:1fr}
  html body:has(> header.top) .ws{padding:18px 16px}
  html body:has(> header.top) .ws:not(.compact) > .axis{grid-template-columns:1fr;gap:8px}
  html body:has(> header.top) .price-row{flex-wrap:wrap}
  html body:has(> header.top) .ws:not(.closing) > .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body:has(> header.top) .ws.closing .slots{grid-template-columns:1fr}
  html body:has(> header.top) h2.sect{font-size:22px}
}
@media (max-width:520px){
  html body:has(> header.top) .prow:first-child .prow-g{grid-template-columns:1fr}
  html body:has(> header.top) .ws:not(.closing) > .slots{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  html body:has(> header.top) .wrap{animation:none}
  html body:has(> header.top) .fcard.closed,html body:has(> header.top) .fcard.closed::after{animation:none}
  html body:has(> header.top) .fcard,html body:has(> header.top) .tabs button{transition:none}
}

/* ==================================== SIGN-IN ==================================== */
html body:has(form[action="/login"]){color:var(--nd-ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 600px at 30% 40%, rgba(47,95,232,.22), transparent 65%),
    radial-gradient(700px 500px at 80% 110%, rgba(215,34,42,.08), transparent 60%),
    linear-gradient(rgba(141,180,255,.03) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(141,180,255,.03) 1px, transparent 1px) 0 0/40px 40px,
    var(--nd-ground)}
html body:has(form[action="/login"]) .card{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;
  max-width:1000px;width:calc(100% - 48px);padding:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,#111E33,#0B1627);border:1px solid var(--nd-edge-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -30px rgba(0,0,0,.8),0 0 120px rgba(47,95,232,.12)}
html body:has(form[action="/login"]) .brand{grid-column:1;grid-row:1/-1;margin:0;background:#FEFEFE;border-radius:0;min-height:460px;padding:56px 48px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;position:relative;
  box-shadow:inset -2px 0 0 #D7222A}
html body:has(form[action="/login"]) .brand .vg{width:100%;max-width:100%;height:auto}
html body:has(form[action="/login"]) .brand .adr{position:absolute;right:30px;bottom:26px;height:30px}
html body:has(form[action="/login"]) h1,html body:has(form[action="/login"]) p.sub,html body:has(form[action="/login"]) .err,html body:has(form[action="/login"]) form{grid-column:2;margin-left:44px;margin-right:44px}
html body:has(form[action="/login"]) h1{grid-row:2;font-family:Outfit,Inter,sans-serif;font-size:34px;font-weight:500;letter-spacing:-.02em;color:#fff;margin-top:0;margin-bottom:6px}
html body:has(form[action="/login"]) p.sub{grid-row:3;color:var(--nd-ink-2);font-size:13.5px;margin-bottom:10px}
html body:has(form[action="/login"]) .err{grid-row:4;background:rgba(192,64,46,.16);color:#FFB3A7;border:1px solid rgba(224,96,76,.5)}
html body:has(form[action="/login"]) form{grid-row:5}
html body:has(form[action="/login"]) label{color:var(--nd-ink-2);font-weight:500;font-size:12.5px}
html body:has(form[action="/login"]) input{background:var(--nd-well);color:#fff;border:1px solid var(--nd-edge-hi);border-radius:11px;padding:.8rem .9rem}
html body:has(form[action="/login"]) input:focus{outline:none;border-color:#4D7BFF;box-shadow:0 0 0 3px rgba(47,95,232,.35)}
html body:has(form[action="/login"]) button{background:linear-gradient(180deg,var(--nd-cobalt-hi),var(--nd-cobalt));color:#fff;border-radius:11px;padding:.85rem;font-size:1rem;margin-top:1.6rem;
  box-shadow:0 0 0 1px #4D7BFF,0 12px 30px var(--nd-cobalt-glow)}
html body:has(form[action="/login"]) button:hover{background:var(--nd-cobalt-hi)}
@media (max-width:760px){
  html body:has(form[action="/login"]) .card{grid-template-columns:1fr;grid-template-rows:none;width:calc(100% - 32px);padding-bottom:28px}
  html body:has(form[action="/login"]) .brand,html body:has(form[action="/login"]) h1,html body:has(form[action="/login"]) p.sub,html body:has(form[action="/login"]) .err,html body:has(form[action="/login"]) form{grid-column:1;grid-row:auto}
  html body:has(form[action="/login"]) .brand{min-height:0;padding:34px 26px 48px;margin-bottom:26px;box-shadow:inset 0 -2px 0 #D7222A}
  html body:has(form[action="/login"]) .brand .adr{right:20px;bottom:14px;height:24px}
  html body:has(form[action="/login"]) h1,html body:has(form[action="/login"]) p.sub,html body:has(form[action="/login"]) .err,html body:has(form[action="/login"]) form{margin-left:24px;margin-right:24px}
  html body:has(form[action="/login"]) h1{font-size:28px}
}

/* ================================= CHOOSE YOUR PASSWORD ================================= */
html body:has(form[action="/set-password"]){color:var(--nd-ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(800px 500px at 50% 0%, rgba(47,95,232,.22), transparent 65%),
    linear-gradient(rgba(141,180,255,.03) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(141,180,255,.03) 1px, transparent 1px) 0 0/40px 40px,var(--nd-ground)}
html body:has(form[action="/set-password"]) form[action="/set-password"]{background:linear-gradient(180deg,#111E33,#0B1627);border:1px solid var(--nd-edge-hi);border-radius:22px;padding:0 28px 28px;
  width:min(420px,calc(100% - 32px));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -30px rgba(0,0,0,.8)}
html body:has(form[action="/set-password"]) form[action="/set-password"] .vg{box-sizing:border-box;width:calc(100% + 56px);max-width:none;height:auto;margin:0 -28px 24px;padding:30px 36px;background:#fff;box-shadow:0 2px 0 #D7222A}
html body:has(form[action="/set-password"]) h1{color:#fff;font-size:26px;font-weight:500;letter-spacing:-.01em}
html body:has(form[action="/set-password"]) p{color:var(--nd-ink-2)}
html body:has(form[action="/set-password"]) label{color:var(--nd-ink-2);font-weight:500}
html body:has(form[action="/set-password"]) input{background:var(--nd-well);color:#fff;border:1px solid var(--nd-edge-hi);border-radius:11px;padding:.75rem .85rem}
html body:has(form[action="/set-password"]) input:focus{outline:none;border-color:#4D7BFF;box-shadow:0 0 0 3px rgba(47,95,232,.35)}
html body:has(form[action="/set-password"]) button{background:linear-gradient(180deg,var(--nd-cobalt-hi),var(--nd-cobalt));color:#fff;border-radius:11px;padding:.8rem;box-shadow:0 0 0 1px #4D7BFF,0 12px 30px var(--nd-cobalt-glow)}
html body:has(form[action="/set-password"]) .err{color:var(--nd-red-text)}

/* ============================ BROKER RAIL PAGES (submissions, agents) ============================ */
html body:has(> img.vgl){color:var(--nd-ink);-webkit-font-smoothing:antialiased;padding:0 40px 60px;
  background:radial-gradient(1000px 500px at 90% -10%, rgba(47,95,232,.13), transparent 60%),
    linear-gradient(rgba(141,180,255,.028) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(141,180,255,.028) 1px, transparent 1px) 0 0/40px 40px,var(--nd-ground);
  background-attachment:fixed}
html body:has(> img.vgl) > img.vgl{display:block;box-sizing:border-box;width:calc(100% + 80px);max-width:none;height:112px;object-fit:contain;object-position:left center;
  margin:0 -40px 36px;padding:26px 40px;border-radius:0;background:#FEFEFE;box-shadow:0 2px 0 #D7222A,0 22px 44px -14px rgba(63,110,245,.45)}
html body:has(> img.vgl) h1{font-family:Outfit,Inter,sans-serif;font-size:30px;font-weight:500;letter-spacing:-.02em;color:#fff;margin:0}
html body:has(> img.vgl) a{color:var(--nd-cobalt-text)}

/* submissions: a dark ledger — identity on the left, the case on the right */
html body:has(> img.vgl) .top{max-width:940px;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap}
html body:has(> img.vgl) .top a{color:var(--nd-ink);text-decoration:none;font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--nd-edge-hi);border-radius:10px;background:rgba(255,255,255,.03)}
html body:has(> img.vgl) .top a:hover{border-color:var(--nd-cobalt-text)}
html body:has(> img.vgl) > section.card{position:relative;max-width:940px;box-sizing:border-box;display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start;
  background:linear-gradient(180deg,#111E33,#0C1728);border:1px solid var(--nd-edge);border-radius:16px;padding:22px 24px 20px 30px;margin:0 0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.3);overflow:hidden}
html body:has(> img.vgl) > section.card > *{grid-column:2}
html body:has(> img.vgl) > section.card > h2{grid-column:1/-1;grid-row:1;font-family:Outfit,Inter,sans-serif;font-size:24px;font-weight:500;line-height:1.2;color:#fff;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--nd-edge)}
html body:has(> img.vgl) > section.card > .meta{grid-column:1;grid-row:2/span 30;margin-top:4px;align-self:start;color:var(--nd-ink-2);font-size:12.5px;line-height:1.6}
html body:has(> img.vgl) > section.card > .meta b{color:#FFB3A7}
html body:has(> img.vgl) > section.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--nd-edge-hi)}
html body:has(> img.vgl) > section.card:has(.decide){border-color:rgba(77,123,255,.45)}
html body:has(> img.vgl) > section.card:has(.decide)::before{background:#4D7BFF;box-shadow:0 0 16px #2F5FE8}
html body:has(> img.vgl) > section.card:has(.dec.denied)::before{background:#E0604C;box-shadow:0 0 16px #C0402E}
html body:has(> img.vgl) > section.card:has(.dec.cleared)::before{background:#2FA774;box-shadow:0 0 16px #1F7A52}
html body:has(> img.vgl) .why{background:var(--nd-well);border:1px solid var(--nd-edge);border-radius:10px;padding:11px 13px;margin:0 0 12px;color:var(--nd-ink)}
html body:has(> img.vgl) .why b{color:var(--nd-ink-2)}
html body:has(> img.vgl) a.page{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 14px;border-radius:10px;text-decoration:none;
  background:rgba(192,64,46,.18);border:1px solid rgba(224,96,76,.6);color:#FFD9D2;font-weight:600;font-size:13.5px}
html body:has(> img.vgl) a.page::before{content:'';width:8px;height:8px;border-radius:50%;background:#E0604C;box-shadow:0 0 8px #E0604C}
html body:has(> img.vgl) a.page:hover{background:rgba(192,64,46,.32)}
html body:has(> img.vgl) .nopage{color:var(--nd-ink-2);margin:0 0 12px}
html body:has(> img.vgl) .docs{margin:0 0 14px}
html body:has(> img.vgl) .docs > b{display:block;font-size:12px;font-weight:600;color:var(--nd-ink-3);margin-bottom:8px}
html body:has(> img.vgl) .docs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
html body:has(> img.vgl) .docs li{color:var(--nd-ink-2)}
html body:has(> img.vgl) .docs li > a{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;background:#14264A;border:1px solid rgba(77,123,255,.4);
  color:#DCE6F5;text-decoration:none;font-size:12.5px;font-weight:500}
html body:has(> img.vgl) .docs li > a::before{content:'';width:9px;height:11px;border-radius:1.5px;background:#7EA2FF;clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
html body:has(> img.vgl) .docs li > a:hover{background:var(--nd-cobalt);border-color:var(--nd-cobalt);color:#fff}
/* a hard-stop line is a sentence with a small chip at its end */
html body:has(> img.vgl) .docs li:has(> a[href*="#page="]){flex-basis:100%;color:var(--nd-ink);font-size:13.5px;line-height:1.55;padding:9px 12px 9px 14px;border-radius:10px;
  background:rgba(192,64,46,.10);border:1px solid rgba(224,96,76,.3);box-shadow:inset 3px 0 0 #E0604C}
html body:has(> img.vgl) .docs li > a[href*="#page="]{padding:2px 9px;font-size:11.5px;margin-left:2px;background:rgba(192,64,46,.22);border-color:rgba(224,96,76,.55);color:#FFD9D2}
html body:has(> img.vgl) .docs li > a[href*="#page="]::before{background:#E0604C}
html body:has(> img.vgl) .empty{color:var(--nd-ink-2);margin:0 0 8px}
html body:has(> img.vgl) .decide{margin:4px 0 16px}
html body:has(> img.vgl) .decide button{font-size:15px;font-weight:600;border-radius:11px;padding:11px 22px;margin-right:6px}
html body:has(> img.vgl) .decide .ok{background:linear-gradient(180deg,#22875B,#1F7A52);box-shadow:0 0 0 1px #2FA774,0 10px 26px rgba(31,122,82,.4)}
html body:has(> img.vgl) .decide .no{background:linear-gradient(180deg,#C94836,#C0402E);box-shadow:0 0 0 1px #E0604C,0 10px 26px rgba(192,64,46,.35)}
html body:has(> img.vgl) .denybox label{color:var(--nd-ink-2)}
html body:has(> img.vgl) .denybox textarea{background:var(--nd-well);color:var(--nd-ink);border:1px solid var(--nd-edge-hi);border-radius:10px;padding:9px 11px}
/* the decision is the headline of a decided card */
html body:has(> img.vgl) .dec{border-radius:12px;padding:13px 15px;margin:0 0 14px;font-size:14px}
html body:has(> img.vgl) .dec > b{font-family:Outfit,Inter,sans-serif;font-size:18px;font-weight:500;margin-right:4px}
html body:has(> img.vgl) .dec.cleared{background:linear-gradient(90deg,rgba(31,122,82,.30),rgba(31,122,82,.08));color:var(--nd-green-text);border:1px solid rgba(47,167,116,.45);box-shadow:inset 3px 0 0 #2FA774}
html body:has(> img.vgl) .dec.cleared > b{color:#9AE8C0}
html body:has(> img.vgl) .dec.denied{background:linear-gradient(90deg,rgba(192,64,46,.30),rgba(192,64,46,.08));color:var(--nd-red-text);border:1px solid rgba(224,96,76,.5);box-shadow:inset 3px 0 0 #E0604C}
html body:has(> img.vgl) .dec.denied > b{color:#FFB8AC}
html body:has(> img.vgl) .dec.denied div,html body:has(> img.vgl) .dec.deleted,html body:has(> img.vgl) .dec.deleted div{color:var(--nd-ink)}
html body:has(> img.vgl) .dec.deleted{background:var(--nd-raised);border:1px solid var(--nd-edge)}
html body:has(> img.vgl) .docs .dec{margin:0 0 8px}
html body:has(> img.vgl) .history{border-left-color:var(--nd-edge-hi);color:var(--nd-ink-2)}

/* agents */
html body:has(> img.vgl) > p{color:var(--nd-ink-2);max-width:880px;margin:8px 0 22px;line-height:1.6}
html body:has(> img.vgl) > p a{display:inline-block;margin-left:6px;color:var(--nd-ink);text-decoration:none;font-size:13px;font-weight:600;padding:5px 12px;border:1px solid var(--nd-edge-hi);border-radius:9px}
html body:has(> img.vgl) > .row{max-width:880px;box-sizing:border-box;background:linear-gradient(180deg,#111E33,#0C1728);border:1px solid var(--nd-edge);border-radius:14px;padding:14px 18px;gap:12px;margin:0 0 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html body:has(> img.vgl) > .row .who{color:#fff;font-weight:600}
html body:has(> img.vgl) > .row .tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;border:1px solid rgba(77,123,255,.6);color:var(--nd-cobalt-text);font-size:11px}
html body:has(> img.vgl) > .row input{background:var(--nd-well);color:#fff;border:1px solid var(--nd-edge-hi);border-radius:9px;padding:8px 10px}
html body:has(> img.vgl) > .row input::placeholder{color:var(--nd-ink-3)}
html body:has(> img.vgl) > .row input:focus{outline:none;border-color:#4D7BFF;box-shadow:0 0 0 3px rgba(47,95,232,.3)}
html body:has(> img.vgl) > .row button{background:linear-gradient(180deg,var(--nd-cobalt-hi),var(--nd-cobalt));color:#fff;border-radius:9px;padding:8px 16px;box-shadow:0 0 0 1px #4D7BFF}
html body:has(> img.vgl) > .row .said{color:var(--nd-ink-2)}
html body:has(> img.vgl) > .row.add{border:1.5px dashed rgba(77,123,255,.55);background:rgba(47,95,232,.07)}
html body:has(> img.vgl) > .row .note{color:var(--nd-ink-3)}

@media (max-width:860px){
  html body:has(> img.vgl){padding:0 16px 40px}
  html body:has(> img.vgl) > img.vgl{position:static;display:block;width:calc(100% + 32px);height:88px;object-fit:contain;object-position:center;margin:0 -16px 22px;padding:20px 24px}
  html body:has(> img.vgl) > section.card{grid-template-columns:1fr;padding:18px 16px 16px 20px}
  html body:has(> img.vgl) > section.card > *,html body:has(> img.vgl) > section.card > h2,html body:has(> img.vgl) > section.card > .meta{grid-column:1;grid-row:auto}
  html body:has(> img.vgl) > section.card > .meta{margin-bottom:12px}
  html body:has(> img.vgl) > .row{padding:14px}
}
/* ==== END A ==== */

/* ==== BEGIN B: Beam (block 209, after its critic round) ==== */
html body:has(> header.top) .pipe{
  --bm-blue:#5B86FF; --bm-green:#34C38A; --bm-gold:#F3D77A; --bm-red:#FF5A43;
  --bm-x:13px;            /* centre of the rail, from the column's left edge */
  --bm-pad:38px;          /* where a file begins */
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}

/* ---- sections: no box; a name capping a short rail ---- */
html body:has(> header.top) .pipe .prow{--lane:var(--bm-blue);background:none;border:0;border-radius:0;padding:0;box-shadow:none;min-width:0}
html body:has(> header.top) .pipe .prow:nth-child(2){--lane:var(--bm-green)}
html body:has(> header.top) .pipe .prow:nth-child(3){--lane:var(--bm-gold)}
html body:has(> header.top) .pipe .prow-l{gap:12px;margin:0 0 4px;font-size:14px;font-weight:600;color:var(--nd-ink);padding:0}
html body:has(> header.top) .pipe .prow-l::before{width:12px;height:12px;margin-left:calc(var(--bm-x) - 6px);flex:none;
  background:radial-gradient(circle,#fff 0 2px,var(--lane) 3px);box-shadow:0 0 0 3px rgba(255,255,255,.06),0 0 14px var(--lane),0 0 30px var(--lane)}

html body:has(> header.top) .pipe .prow:nth-child(n) .prow-g{display:flex;flex-direction:column;gap:12px;position:relative;
  padding:14px 0 6px var(--bm-pad);grid-template-columns:none}
/* the rail: from the section's name down to its last file, fading out just below it */
html body:has(> header.top) .pipe .prow-g::before{content:'';position:absolute;pointer-events:none;z-index:0;
  left:calc(var(--bm-x) - 1px);width:2px;top:-6px;bottom:28px;border-radius:2px;
  background:linear-gradient(180deg,var(--lane) 0,var(--lane) calc(100% - 22px),transparent 100%);
  box-shadow:0 0 6px var(--lane),0 0 18px color-mix(in srgb,var(--lane) 55%,transparent)}

/* ---- a file: no box, a soft glow in its status colour, contained inside its own area ---- */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard{--node:#C9D6EE;--glow:rgba(170,195,240,.14);position:relative;z-index:1;min-width:0;
  background:radial-gradient(ellipse closest-side at 45% 50%,var(--glow),transparent);
  border:0;border-radius:16px;padding:8px 12px 10px 14px;box-shadow:none;transition:background-color .15s}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard:hover{background-color:rgba(255,255,255,.025)}
/* node + connector: an orb on the rail and a short lit thread to the file */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard::before{content:'';position:absolute;pointer-events:none;z-index:0;
  left:calc(0px - var(--bm-pad) + var(--bm-x) - 7px);top:13px;width:calc(var(--bm-pad) - var(--bm-x) + 7px);height:14px;
  background:radial-gradient(circle at 7px 50%,#fff 0 1.5px,var(--node) 2.5px 5px,transparent 6px),
             linear-gradient(90deg,var(--node),color-mix(in srgb,var(--node) 20%,transparent)) 13px 50%/calc(100% - 13px) 2px no-repeat;
  filter:drop-shadow(0 0 4px var(--node)) drop-shadow(0 0 10px color-mix(in srgb,var(--node) 60%,transparent))}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.on{background-color:rgba(91,134,255,.08);box-shadow:inset 2px 0 0 var(--node)}

html body:has(> header.top) .pipe .prow:nth-child(n) .fcard > div:first-of-type{justify-content:flex-start;align-items:flex-start!important;gap:6px}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fn,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fname-slot{flex:0 1 auto;margin:0;min-width:0;
  font-family:Outfit,Inter,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.2;color:#fff;
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fp{font-family:Outfit,Inter,sans-serif;font-size:16px;font-weight:400;margin-top:2px;color:#D5E0F0}
/* chip and facts on one line under the price - keeps each file short so the page fits */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fm{margin-top:7px;color:var(--nd-ink-2);column-gap:8px}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fm::before{display:none}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fm .chip{margin-bottom:0}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fdel{position:relative;z-index:2;flex:none;color:var(--nd-ink-3);font-size:17px;line-height:1;padding:3px 6px;margin:0}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fdel:hover{color:#fff;background:rgba(255,255,255,.1)}
/* TC: a tag on the rail, just below the file's dot */
html body:has(> header.top) .pipe .prow:nth-child(n) .tcbadge{z-index:2;top:34px;left:calc(0px - var(--bm-pad) + var(--bm-x) - 12px);width:24px;box-sizing:border-box;text-align:center;padding:3px 0;
  background:#E8EEF7;color:#07101E;border-radius:5px;font-size:9.5px;box-shadow:0 0 0 2px var(--nd-ground),0 0 12px color-mix(in srgb,var(--node) 70%,transparent)}

/* ---- status: the dot, its thread, and the glow ---- */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs{--node:var(--bm-red);--glow:rgba(255,90,67,.34);color:#fff}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs::before{height:18px;top:11px;
  background:radial-gradient(circle at 7px 50%,#fff 0 2px,var(--node) 3px 7px,transparent 8px),
             linear-gradient(90deg,var(--node),rgba(255,90,67,.3)) 13px 50%/calc(100% - 13px) 2px no-repeat;
  filter:drop-shadow(0 0 5px var(--node)) drop-shadow(0 0 16px rgba(255,90,67,.7))}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .fn{text-shadow:0 0 22px rgba(255,90,67,.75)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .fm,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .fdel{color:#F6D3CC}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .chip.needs{color:#fff;background:#C0402E;border-color:#FF7A66}

html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared{--node:var(--bm-green);--glow:rgba(52,195,138,.32);color:#fff}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .fn{text-shadow:0 0 22px rgba(52,195,138,.6)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .fm,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .fdel{color:#C9ECDB}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .chip.cleared{color:#fff;background:#1F7A52;border-color:#4FD39E}

/* ---- GOLD: a lit gold rail that sparkles ---- */
html body:has(> header.top) .pipe .prow:nth-child(3) .prow-g::before{width:3px;left:calc(var(--bm-x) - 1.5px);
  background:linear-gradient(180deg,#B8860B 0%,#FFF1B8 12%,#E6C35C 26%,#A67C00 40%,#FFF1B8 55%,#D4AF37 70%,#F3D77A 85%,transparent 100%);
  background-size:100% 220%;animation:bm-goldflow 6s ease-in-out infinite;
  box-shadow:0 0 6px #F3D77A,0 0 18px rgba(230,195,92,.65),0 0 46px rgba(230,195,92,.3)}
html body:has(> header.top) .pipe .prow:nth-child(3) .prow-g::after{content:'';position:absolute;pointer-events:none;z-index:0;
  left:calc(var(--bm-x) - 14px);width:28px;top:-6px;bottom:28px;
  background:
    radial-gradient(circle at 25% 8%,#fff 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 78% 22%,#FFF1B8 0 1.6px,transparent 3px),
    radial-gradient(circle at 15% 40%,#fff 0 1px,transparent 2.2px),
    radial-gradient(circle at 82% 58%,#fff 0 1.4px,transparent 2.8px),
    radial-gradient(circle at 30% 74%,#FFF1B8 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 72% 90%,#fff 0 1px,transparent 2.2px);
  background-size:100% 110px;background-repeat:repeat-y;
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 40px),transparent);
  animation:bm-twinkle 2.6s ease-in-out infinite}

html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed{--node:var(--bm-gold);--glow:rgba(243,215,122,.30);overflow:visible;color:#FFF3CC;
  border:0;box-shadow:none;animation:none}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed::before{
  background:radial-gradient(circle at 7px 50%,#fff 0 2px,#FFF1B8 3px,var(--node) 4px 6px,transparent 7px),
             linear-gradient(90deg,#FFF1B8,rgba(243,215,122,.35)) 13px 50%/calc(100% - 13px) 2px no-repeat;
  filter:drop-shadow(0 0 5px #F3D77A) drop-shadow(0 0 14px rgba(230,195,92,.8));animation:bm-nodeglint 2.6s ease-in-out infinite}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed::after{content:none}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed > *{position:relative;z-index:1}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed > .tcbadge{position:absolute;z-index:2;background:#F3D77A;color:#2B1D00}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fname-slot{color:#FFF3CC;text-shadow:0 0 22px rgba(243,215,122,.6)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fp{color:#F3D77A}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fm,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fdel{color:#E3D3A4}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .chip.closed{background:linear-gradient(115deg,#E6C35C,#FFF1B8 45%,#D4AF37);color:#2B1D00;border-color:#FFF1B8}

/* ---- + New file: an open socket on the rail ---- */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf{--node:var(--bm-blue);min-height:88px;min-width:240px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;padding:0 16px;margin-top:4px;
  background:rgba(47,95,232,.09);border:1.5px dashed rgba(120,155,255,.65);border-radius:16px;
  color:var(--nd-cobalt-text);font-family:Outfit,Inter,sans-serif;font-size:18px;font-weight:600}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf::before{top:calc(50% - 7px);left:calc(0px - var(--bm-pad) + var(--bm-x) - 7px - 1.5px);
  background:radial-gradient(circle at 7px 50%,transparent 0 3px,var(--node) 3.5px 5.5px,transparent 6.5px),
             repeating-linear-gradient(90deg,var(--node) 0 4px,transparent 4px 7px) 13px 50%/calc(100% - 13px) 2px no-repeat}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf:hover{background:var(--nd-cobalt);border-style:solid;border-color:var(--nd-cobalt);color:#fff}

html body:has(> header.top) .pipe-total{margin-top:8px}

@keyframes bm-goldflow{0%,100%{background-position:0 0}50%{background-position:0 100%}}
@keyframes bm-twinkle{0%,100%{opacity:.35;background-position:0 0}50%{opacity:1;background-position:0 -12px}}
@keyframes bm-nodeglint{0%,100%{filter:drop-shadow(0 0 4px #F3D77A) drop-shadow(0 0 10px rgba(230,195,92,.6))}50%{filter:drop-shadow(0 0 7px #FFF1B8) drop-shadow(0 0 20px rgba(230,195,92,.95))}}

/* ================= block 209 fix round (critic's eight faults) ================= */
/* 6: balanced columns and a wider gap */
html body:has(> header.top) .pipe{--bm-pad:46px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:26px}
html body:has(> header.top) .pipe .prow-l{min-height:20px;line-height:20px;align-items:center}
/* 1+2: a stronger status glow anchored behind the address and price, fading out to the right; two layers, both
   closest-side, so it reaches nothing outside the file's own area and has no hard edge */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard{--glow:rgba(91,134,255,.30);--glow2:rgba(91,134,255,.12);
  background:radial-gradient(ellipse closest-side at 28% 50%,var(--glow),transparent),radial-gradient(ellipse closest-side at 50% 50%,var(--glow2),transparent)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs{--glow:rgba(255,90,67,.35);--glow2:rgba(255,90,67,.14)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared{--glow:rgba(52,195,138,.35);--glow2:rgba(52,195,138,.14)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed{--glow:rgba(243,215,122,.45);--glow2:rgba(243,215,122,.18)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf{background:transparent}
/* 3: address and x in one row, address capped so the x stays tight at a wrapped address's top-right */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fn,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fname-slot{max-width:34ch}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fdel{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:-3px 0 0 0;
  font-size:16px;line-height:1;border-radius:8px;color:rgba(255,255,255,.75)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .fdel,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .fdel,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fdel{color:rgba(255,255,255,.75)}
/* 4: TC on the thread beside its node, level with the address */
html body:has(> header.top) .pipe .prow:nth-child(n) .tcbadge,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed > .tcbadge{top:12px;left:calc(0px - var(--bm-pad) + var(--bm-x) + 8px);width:24px}
/* 8: facts larger and lighter; the neutral chip brighter */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fm{font-size:13px}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .fm > span:not(.chip){color:#B9C3D8}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.needs .fm > span:not(.chip){color:#F6D3CC}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.cleared .fm > span:not(.chip){color:#C9ECDB}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fm > span:not(.chip){color:#E3D3A4}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard .chip.declaring{border-color:rgba(255,255,255,.35);color:#DFE5F2}
/* 5: gold that reads as an achievement - gold-white sparkles in the margins around each gold file (the gutter beside it,
   below its thread, and the band under its facts line), never over a word; warm glow on the address */
html body:has(> header.top) .pipe .prow:nth-child(3) .prow-g::after{
  background:
    radial-gradient(circle at 25% 8%,#FFF6D0 0 1.6px,rgba(255,214,120,.55) 2.4px,transparent 4px),
    radial-gradient(circle at 78% 26%,#FFF6D0 0 1.8px,rgba(255,214,120,.55) 2.6px,transparent 4.2px),
    radial-gradient(circle at 18% 46%,#FFF6D0 0 1.3px,rgba(255,214,120,.5) 2px,transparent 3.4px),
    radial-gradient(circle at 80% 64%,#FFF6D0 0 1.6px,rgba(255,214,120,.55) 2.4px,transparent 4px),
    radial-gradient(circle at 30% 84%,#FFF6D0 0 1.4px,rgba(255,214,120,.5) 2.2px,transparent 3.6px);
  background-size:100% 110px;background-repeat:repeat-y}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed{padding-bottom:18px}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed::after{content:'';position:absolute;pointer-events:none;z-index:0;border-radius:0;animation:goldtwinkle 2.6s ease-in-out infinite;
  top:-4px;bottom:-2px;left:-30px;right:0;
  background:
    radial-gradient(circle at 10px 46px,#FFF6D0 0 1.7px,rgba(255,214,120,.6) 2.6px,transparent 4.4px),
    radial-gradient(circle at 22px 66px,#FFF6D0 0 1.3px,rgba(255,214,120,.55) 2.1px,transparent 3.6px),
    radial-gradient(circle at 34% calc(100% - 7px),#FFF6D0 0 1.8px,rgba(255,214,120,.6) 2.7px,transparent 4.5px),
    radial-gradient(circle at 58% calc(100% - 4px),#FFF6D0 0 1.3px,rgba(255,214,120,.55) 2.1px,transparent 3.6px),
    radial-gradient(circle at 80% calc(100% - 8px),#FFF6D0 0 1.6px,rgba(255,214,120,.6) 2.5px,transparent 4.2px),
    radial-gradient(circle at 97% 4px,#FFF6D0 0 1.4px,rgba(255,214,120,.55) 2.2px,transparent 3.8px)}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed .fname-slot{text-shadow:0 0 14px rgba(243,215,122,.55),0 0 2px rgba(255,236,170,.35)}
/* 7: + New file - a hollow node on the rail and a light dashed pill (kept at least 240x88, as ruled) */
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf{align-self:flex-start;width:240px;min-width:240px;min-height:88px;height:88px;border-radius:999px;
  border:1.5px dashed rgba(157,184,255,.55);background:rgba(91,134,255,.04);font-size:16px;font-weight:600;color:#B9CCFF}
html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf:hover{background:rgba(91,134,255,.18);border-style:solid;border-color:#9DB8FF;color:#fff}

/* ---- tablet: Being worked on the left; Cleared to close above Closed on the right ---- */
@media (min-width:600px) and (max-width:860px){
  html body:has(> header.top) .pipe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b" "a c";grid-template-rows:auto 1fr;gap:48px 28px}
  html body:has(> header.top) .pipe .prow:nth-child(1){grid-area:a}
  html body:has(> header.top) .pipe .prow:nth-child(2){grid-area:b}
  html body:has(> header.top) .pipe .prow:nth-child(3){grid-area:c}
}
/* ---- phone: the sections stack, each with its own rail ---- */
@media (max-width:599px){
  html body:has(> header.top) .pipe{grid-template-columns:1fr;gap:20px}
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.newf{min-width:240px;width:240px}
}
@media (prefers-reduced-motion: reduce){
  html body:has(> header.top) .pipe .prow-g::before,html body:has(> header.top) .pipe .prow-g::after,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard,html body:has(> header.top) .pipe .prow:nth-child(n) .fcard::before,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard::after{animation:none;transition:none}
}
/* ==== END B ==== */

/* ==== BEGIN C: the sidebar (block 210, after its critic round) ==== */
html body:has(> header.top){--sb-line:rgba(91,134,255,.25)}

/* ---- the sidebar: one continuous dark surface with the page ---- */
html body:has(> header.top) header.top{
  background:var(--nd-ground);
  border-right:1px solid var(--sb-line);
  box-shadow:1px 0 10px rgba(91,134,255,.10)}

/* ---- the brand: small frosted cards, no white block, no red line ---- */
/* padding measured so the figures below land exactly where block 209 has them (the harness compares positions) */
html body:has(> header.top) header.top .logo{background:none;box-shadow:none;padding:28px 24px 0;align-items:flex-start;gap:10px}
/* critic, fault 1: a pure-white slab read as a sticker - the card now hugs the logo and is tied into the dark by a Beam-blue
   hairline and halo, so it sits IN the surface rather than on it. The card's white stays #FEFEFE; the logo is untouched. */
html body:has(> header.top) header.top .logo .plate.vg.big,
html body:has(> header.top) header.top .logo .plate.adr.corner{
  background:#FEFEFE;border-radius:14px;
  box-shadow:0 0 0 1px rgba(91,134,255,.28),0 10px 30px -8px rgba(0,0,0,.7),0 0 24px -6px rgba(91,134,255,.35)}
html body:has(> header.top) header.top .logo .plate.vg.big{display:inline-block;padding:10px 16px}
html body:has(> header.top) header.top .logo .plate.vg.big img{width:188px;height:auto;max-width:none}
/* critic, fault 2: the ADR mark was ~40px wide and unreadable - now ~76px wide, same card recipe */
html body:has(> header.top) header.top .logo .plate.adr.corner{display:inline-flex;margin:0;padding:8px 10px;border-top:0;border-radius:12px}
html body:has(> header.top) header.top .logo .plate.adr.corner img{height:36px}
/* critic, fault 5: the rules between the figures competed with the new divider - quieter now (positions unchanged) */
html body:has(> header.top) header.top .bstat{border-top-color:rgba(255,255,255,.06)}
html body:has(> header.top) header.top .whoami{border-top-color:rgba(255,255,255,.06)}

/* ---- tablet and phone: the same treatment across the top bar ---- */
@media (max-width:860px){
  html body:has(> header.top) header.top{border-right:0;border-bottom:1px solid var(--sb-line);box-shadow:0 1px 10px rgba(91,134,255,.10)}
  html body:has(> header.top) header.top .logo{flex:0 0 100%;margin:0;padding:6px 0 0;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  html body:has(> header.top) header.top .logo .plate.vg.big{padding:8px 12px;border-radius:12px}
  html body:has(> header.top) header.top .logo .plate.vg.big img{width:auto;height:30px}
  html body:has(> header.top) header.top .logo .plate.adr.corner{padding:5px 8px;border-left:0;border-radius:10px}
  html body:has(> header.top) header.top .logo .plate.adr.corner img{height:28px}
}
/* ==== END C ==== */

/* ==== BEGIN D: block 211 ==== */
/* THE ADR CARD AT THE FOOT OF THE SIDEBAR, BESIDE "SIGN OUT" (Jason, 30 Sep 2026: "Absolutely do it."). The page's markup
   moved the ADR plate (and its "ADR" fallback) out of the logo and into the signed-in row, so the rules above that name
   `.logo .plate.adr.corner` no longer reach it; these do. The signed-in name keeps its own line above, so a long name
   never crowds the card or the button. On the tablet and phone bar the three sit in one row. */
html body:has(> header.top) header.top .whoami{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name name" "adr . out";
  align-items:center;gap:10px}
html body:has(> header.top) header.top .whoami #who-name{grid-area:name;min-width:0;overflow-wrap:anywhere}
html body:has(> header.top) header.top .whoami #who-name:empty{display:none}
html body:has(> header.top) header.top .whoami .plate.adr.corner,html body:has(> header.top) header.top .whoami .mark{grid-area:adr}
html body:has(> header.top) header.top .whoami #signout{grid-area:out}
html body:has(> header.top) header.top .whoami .plate.adr.corner{position:static;display:inline-flex;align-items:center;justify-self:start;margin:0;padding:6px 9px;
  background:#FEFEFE;border-radius:12px;box-shadow:0 0 0 1px rgba(91,134,255,.28),0 10px 30px -8px rgba(0,0,0,.7),0 0 24px -6px rgba(91,134,255,.35)}
html body:has(> header.top) header.top .whoami .plate.adr.corner img{display:block;height:28px;width:auto}
/* the fallback monogram stays hidden until the page's own script shows it (it does so inline, which wins) */
html body:has(> header.top) header.top .whoami .mark{display:none;width:38px;height:38px;border-radius:9px;background:var(--nd-cobalt);align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;letter-spacing:.02em}
@media (max-width:860px){
  html body:has(> header.top) header.top .whoami{grid-template-columns:auto auto auto;grid-template-areas:"name adr out";gap:8px}
  html body:has(> header.top) header.top .whoami .plate.adr.corner{padding:4px 7px;border-radius:10px}
  html body:has(> header.top) header.top .whoami .plate.adr.corner img{height:22px}
}

/* THE BROKER'S DOCUMENT VIEW (/admin/doc): the dark desk around the white pages, "← Back to the file" as the desk's
   own button. The pages themselves stay white - they are the paper. */
html body:has(> .bar + #pages){background:var(--nd-ground);color:var(--nd-ink);-webkit-font-smoothing:antialiased}
html body:has(> .bar + #pages) .bar{background:var(--nd-ground);border-bottom:1px solid rgba(91,134,255,.25);box-shadow:0 1px 10px rgba(91,134,255,.10)}
html body:has(> .bar + #pages) .bar a{font-family:Inter,sans-serif;color:var(--nd-ink);border:1px solid var(--nd-edge-hi);border-radius:10px;background:rgba(255,255,255,.03)}
html body:has(> .bar + #pages) .bar a:hover{border-color:var(--nd-cobalt-text);color:#fff}
html body:has(> .bar + #pages) .bar a.dl{color:var(--nd-ink-2);border-color:var(--nd-edge)}
html body:has(> .bar + #pages) .pg{box-shadow:0 0 0 1px var(--nd-edge),0 12px 34px rgba(0,0,0,.55);border-radius:4px}
html body:has(> .bar + #pages) .msg{color:var(--nd-ink-2)}

/* ---- the critic's faults on the real pages (block 211), looks only ---- */
/* the foot of the sidebar: the ADR card and "Sign out" one level row, the same height; the signed-in name above */
html body:has(> header.top) header.top .whoami #who-name{font-size:12px;color:#B9C3D8}
html body:has(> header.top) header.top .whoami .plate.adr.corner{min-height:36px;box-sizing:border-box;padding:6px 9px}
html body:has(> header.top) header.top .whoami .plate.adr.corner img{height:24px}
html body:has(> header.top) header.top .whoami #signout{min-height:36px;box-sizing:border-box}
/* tablet and phone: one row for the logo, the ADR card and "Sign out"; the figures and the signed-in name beneath. The
   signed-in row's box steps aside (display:contents) so its three parts can take their own places in the bar - nothing
   in it is hidden, reordered for the keyboard beyond the bar's own order, or reworded. */
@media (max-width:860px){
  html body:has(> header.top) header.top .logo{flex:0 0 auto;order:1}
  html body:has(> header.top) header.top .whoami{display:contents}
  html body:has(> header.top) header.top .whoami .plate.adr.corner{order:2;margin-left:auto;min-height:32px;padding:5px 8px}
  html body:has(> header.top) header.top .whoami .plate.adr.corner img{height:22px}
  html body:has(> header.top) header.top .whoami .mark{order:2;margin-left:auto}
  html body:has(> header.top) header.top .whoami #signout{order:3;min-height:32px}
  html body:has(> header.top) header.top .barstats{order:4;flex:1 1 auto}
  html body:has(> header.top) header.top .whoami #who-name{order:5;align-self:flex-end;margin-left:auto;padding-bottom:2px}
}
@media (max-width:480px){
  html body:has(> header.top) header.top .bstat .bl{font-size:11px;white-space:nowrap;letter-spacing:0}
  html body:has(> header.top) header.top .barstats{gap:18px}
  /* the declared price: label, box and note each on their own full-width line */
  html body:has(> header.top) .ws.compact > .axis:has(.price-row){flex-direction:column;align-items:stretch}
  html body:has(> header.top) .price-row{flex-direction:column;align-items:stretch;gap:8px}
  html body:has(> header.top) .price-in{width:100%;box-sizing:border-box}
  html body:has(> header.top) .price-in input{width:100%}
  html body:has(> header.top) .price-note{max-width:none}
}
/* the small status words on the upload boxes, a step brighter */
html body:has(> header.top) .slot .st,html body:has(> header.top) .slot .gchip.none,html body:has(> header.top) .slot .sc{color:#AAB6CC}
/* the document view: "Download" an outline button like "← Back to the file"; air between the pages */
html body:has(> .bar + #pages) .bar a.dl{color:#DFE5F2;border-color:rgba(255,255,255,.3)}
html body:has(> .bar + #pages) .pg{margin-bottom:22px}
/* agents: "Back to submissions" on its own line under the sentence, not a stray indent where it wraps */
html body:has(> img.vgl) > p a{display:table;margin:12px 0 0}
/* ==== END D ==== */

/* ==== BEGIN E: block 212 - the Brokerage switch (the broker's page only) ==== */
/* "My files | Brokerage": the page draws it for the broker alone; an agent's page never has it */
html body:has(> header.top) .bk-switch{display:inline-flex;gap:2px;padding:3px;margin:-4px 0 20px;background:var(--nd-well);border:1px solid var(--nd-edge);border-radius:10px}
html body:has(> header.top) .bk-switch button{appearance:none;border:0;background:none;cursor:pointer;color:#B9C7DA;font-family:Inter,sans-serif;font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:7px}
html body:has(> header.top) .bk-switch button:hover{color:#fff;background:rgba(255,255,255,.05)}
html body:has(> header.top) .bk-switch button.on{background:var(--nd-cobalt);color:#fff;box-shadow:0 0 0 1px #4D7BFF,0 4px 14px var(--nd-cobalt-glow)}
/* a brokerage file is a link to its card - it looks exactly like a file on the rail, never like a link */
html body:has(> header.top) .pipe a.fcard{display:block;text-decoration:none;color:inherit}
html body:has(> header.top) .pipe .fcard .fagent{margin:3px 0 0;font-size:12.5px;font-weight:500;color:#9DB8FF;overflow-wrap:anywhere}
html body:has(> header.top) .pipe .fcard.needs .fagent{color:#FFC9BF}
html body:has(> header.top) .pipe .fcard.cleared .fagent{color:#A8EBCB}
html body:has(> header.top) .pipe .fcard.closed .fagent{color:#F3D77A}
html body:has(> header.top) .pipe .bk-none{color:var(--nd-ink-3);font-size:13px;padding:6px 0 10px}
/* ==== END E ==== */

/* ==== BEGIN F: Glide (block 213's preview, as approved - Jason, 30 Sep 2026: "I like glide") ==== */
/* ==== GLIDE (block 213 option): a frosted glass track and a lit capsule that glides between the two views ====
   The capsule is the track's ::before, BEHIND both words (z-index 0 under the buttons' z-index 1). Its top edge carries a
   thin Beam-blue light, like a rail seen side-on. Each word has a node before it, as every file on the rail does: the
   chosen view's node is lit (white core, blue orb), the other is a hollow ring - so the pressed state reads by shape and
   brightness, not by colour alone. */
html body:has(> header.top) #bk-switch.bk-switch{
  --gl-blue:#5B86FF;
  position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;
  padding:4px;margin:-2px 0 29px -7px;border-radius:999px;
  background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the track: a faint Beam-blue hairline under both words, fading at its ends; the capsule rides on it */
html body:has(> header.top) #bk-switch.bk-switch::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:10px;right:0;bottom:4px;height:1px;
  background:linear-gradient(90deg,rgba(91,134,255,.7),rgba(91,134,255,.5) 70%,transparent);
  box-shadow:0 0 6px rgba(91,134,255,.35)}

/* the capsule */
html body:has(> header.top) #bk-switch.bk-switch::before{content:'';position:absolute;z-index:0;pointer-events:none;
  top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;
  background:
    linear-gradient(90deg,transparent 8%,rgba(200,218,255,.55) 30%,#fff 50%,rgba(200,218,255,.55) 70%,transparent 92%) 50% 0/100% 1.5px no-repeat,
    radial-gradient(50% 6px at 50% 0,rgba(140,175,255,.55),transparent) 50% 0/100% 10px no-repeat,
    radial-gradient(120% 140% at 50% 0%,rgba(91,134,255,.42),transparent 70%),
    linear-gradient(180deg,#1D3570,#132651);
  box-shadow:0 0 0 1px rgba(91,134,255,.6),0 0 18px rgba(91,134,255,.45),0 6px 22px -8px rgba(47,95,232,.8),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.3);
  transform:translateX(0);transition:transform .32s cubic-bezier(.3,.7,.2,1)}
html body:has(> header.top) #bk-switch.bk-switch:has([data-bk="brokerage"].on)::before{transform:translateX(100%)}

/* the words */
html body:has(> header.top) #bk-switch.bk-switch button{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;min-height:34px;padding:0 20px 0 12px;border-radius:999px;
  font-family:Inter,sans-serif;font-size:13px;font-weight:500;letter-spacing:.005em;color:#B9C3D8;white-space:nowrap;
  box-shadow:none;transition:color .2s}
html body:has(> header.top) #bk-switch.bk-switch button:hover{color:#E8EEF7;background:none}
html body:has(> header.top) #bk-switch.bk-switch button.on{color:#fff;font-weight:600;background:none;box-shadow:none;text-shadow:0 0 12px rgba(91,134,255,.55)}

/* the nodes: hollow when not chosen, lit when chosen */
html body:has(> header.top) #bk-switch.bk-switch button::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid rgba(255,255,255,.55);background:transparent;transition:border-color .2s,box-shadow .2s,background-color .2s}
html body:has(> header.top) #bk-switch.bk-switch button:hover::before{border-color:rgba(232,238,247,.8)}
html body:has(> header.top) #bk-switch.bk-switch button.on::before{border:0;width:8px;height:8px;
  background:radial-gradient(circle,#fff 0 1.6px,var(--gl-blue) 2.4px);
  box-shadow:0 0 0 2px rgba(91,134,255,.22),0 0 8px var(--gl-blue),0 0 16px rgba(91,134,255,.7)}

/* keyboard focus: a clear ring outside the pill shape */
html body:has(> header.top) #bk-switch.bk-switch button:focus{outline:none}
html body:has(> header.top) #bk-switch.bk-switch button:focus-visible{outline:2px solid #C7D6FF;outline-offset:3px}

@media (max-width:860px){
  html body:has(> header.top) #bk-switch.bk-switch button{min-height:40px;font-size:14px;padding:0 20px 0 12px}
}

@media (prefers-reduced-motion:reduce){
  html body:has(> header.top) #bk-switch.bk-switch::before,
  html body:has(> header.top) #bk-switch.bk-switch button,
  html body:has(> header.top) #bk-switch.bk-switch button::before{transition:none}
}
/* ==== END F ==== */

/* ==== BEGIN G: block 214 - the gold stays still under "reduce motion" ==== */
/* FOUND IN BLOCK 213: with "reduce motion" on, six gold animations kept running - the gold rail's shimmer (bm-goldflow)
   and twinkle (bm-twinkle), and each Closed file's node glint (bm-nodeglint) and sparkles (goldtwinkle). Measured in Edge
   with reduce-motion emulated (the emulation itself seed-tested). Beam's own reduce rule (section B) names these parts
   more loosely than the rules that animate them (those carry .prow:nth-child(...)), so it lost. These rules name them
   exactly as the animating rules do, come later, and so win. The gold, the glow and the sparkles all STAY - only their
   movement stops. Nothing changes on a screen without "reduce motion". */
@media (prefers-reduced-motion: reduce){
  html body:has(> header.top) .pipe .prow:nth-child(3) .prow-g::before,
  html body:has(> header.top) .pipe .prow:nth-child(3) .prow-g::after,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed::before,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard.closed::after,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard::before,
  html body:has(> header.top) .pipe .prow:nth-child(n) .fcard::after{animation:none}
}
/* ==== END G ==== */

/* ==== BEGIN H: block 216 - "View all (N)" / "Show the latest ten" at the foot of a rail ==== */
/* a quiet control that hangs off the rail like a file does: a small hollow node on a short dashed thread, then the words */
html body:has(> header.top) .pipe .rail-more{position:relative;align-self:flex-start;appearance:none;cursor:pointer;margin:2px 0 4px;
  min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(157,184,255,.35);background:rgba(91,134,255,.06);
  color:#C9D6F2;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.005em}
html body:has(> header.top) .pipe .rail-more::before{content:'';position:absolute;pointer-events:none;top:calc(50% - 7px);
  left:calc(0px - var(--bm-pad) + var(--bm-x) - 7px);width:calc(var(--bm-pad) - var(--bm-x) + 7px);height:14px;
  background:radial-gradient(circle at 7px 50%,transparent 0 2.5px,var(--lane) 3px 4.5px,transparent 5.5px),
             repeating-linear-gradient(90deg,var(--lane) 0 3px,transparent 3px 6px) 13px 50%/calc(100% - 13px) 1.5px no-repeat;opacity:.8}
html body:has(> header.top) .pipe .rail-more:hover{border-color:#9DB8FF;background:rgba(91,134,255,.14);color:#fff}
html body:has(> header.top) .pipe .rail-more:focus-visible{outline:2px solid #C7D6FF;outline-offset:3px}
/* ==== END H ==== */

/* ==== I (block 218) — a FAILED closing check is red, never the note's green. Same weight as the green note above and
   later in the file, so it wins; the red is the broker card's own (.dec.denied). ==== */
html body:has(> header.top) .locked-note.cres-fail{background:linear-gradient(90deg,rgba(192,64,46,.30),rgba(192,64,46,.08));border:1px solid rgba(224,96,76,.5);color:var(--nd-red-text);box-shadow:inset 3px 0 0 #E0604C}
html body:has(> header.top) .locked-note.cres-fail b{color:#FFB8AC}
html body:has(> header.top) .locked-note.cres-fail div{color:var(--nd-ink)}
/* ==== END I ==== */

/* ==== BEGIN J: block 412 - the gold Closed column in columns of ten (Jason, 20 Oct 2026: "make vertical rows of ten and shrink the
   tiles as necessary to keep the declaration info close" - "Gold closed collunn"). The Closed rail's files sit in columns of ten
   (.ccol), side by side, left to right; its gold tiles are drawn smaller so a column of ten stays short. The gold rail, its glow and
   sparkles, the dots and every other rail are untouched. A rail holding more than ten (View all) takes the pipe's full width so its
   columns fit beside each other; on a phone they wrap below one another, never sideways off the page. ==== */
html body:has(> header.top) .pipe .prow:has(> [data-row="closed"]) .ccols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 26px;min-width:0}
html body:has(> header.top) .pipe .prow:has(> [data-row="closed"]) .ccol{display:flex;flex-direction:column;gap:4px;flex:1 1 190px;min-width:0;max-width:340px}
html body:has(> header.top) .pipe .prow:has(> [data-row="closed"]) .ccols:not(.multi) .ccol{max-width:none}
/* a smaller gold tile: address, price and facts on three tight lines */
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard.closed{padding:3px 10px 5px 12px}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard.closed::before{top:6px}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fname-slot,
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fn{font-size:14.5px;line-height:1.2}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fp{font-size:13px;margin-top:0}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard.closed{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:baseline}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard.closed > div:first-of-type{grid-column:1 / -1}
/* price and facts share the second line; the facts give way (cut short, never wrapped) when the column is narrow */
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fm{font-size:11px;margin-top:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fm > *{display:inline;margin-right:6px;white-space:nowrap}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fm .chip{font-size:10px;padding:1px 7px}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard .fdel{width:22px;height:22px;font-size:14px;margin-top:-2px}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .fcard.closed > .tcbadge{top:24px}
/* later columns are not on the rail: no dot or thread, the TC tag at the tile's lower right */
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .ccol + .ccol .fcard.closed::before{display:none}
html body:has(> header.top) .pipe .prow:nth-child(n):has(> [data-row="closed"]) .ccol + .ccol .fcard.closed > .tcbadge{left:auto;right:6px;top:auto;bottom:5px}
/* more than ten shown: the Closed rail takes the pipe's full width, below the others */
html body:has(> header.top) .pipe .prow:has(> [data-row="closed"][data-cols="multi"]){grid-area:auto;grid-column:1 / -1}
@media (min-width:600px) and (max-width:860px){
  html body:has(> header.top) .pipe .prow:has(> [data-row="closed"][data-cols="multi"]){grid-area:auto;grid-column:1 / -1}
}
/* ==== END J ==== */