/* SHC Portal, in Supplemental Health Care's brand (shccares.com): navy and accent blue,
   gold accent, cool grey ground. Jost (Google Fonts) stands in for SHC's licensed Futura PT.
   Token names are kept from the old theme so the rules below did not need touching:
   --navy is SHC navy, --teal is SHC gold (fills, borders, focus rings only: 2.2:1 on
   white, never text), --teal-deep is navy again for any accent that is text. */
:root{
  --shc-navy:#004688; --shc-blue:#005EB8; --shc-gold:#DAAA00; --shc-grey:#F3F3F3;
  --navy:var(--shc-navy); --navy-deep:#00264B; --navy-soft:var(--shc-blue);
  --teal:var(--shc-gold); --teal-deep:var(--shc-navy); --teal-tint:#FBF3D6; --teal-tint2:#F5E3A3;
  --ink:#2D2926; --muted:#454B52; --faint:#565D66;
  --bg:var(--shc-grey); --card:#ffffff; --line:#E0E0E0; --line2:#EEEEEE;
  --good:#0B7A52; --warn:#8A5A12; --danger:#c0392b;
  /* fallback for any segment beyond client/candidate/both — white-on-bg clears
     WCAG AA for the 12px bold badge/dot text it backs */
  --seg-other:#6d4aa8;
  --shadow:0 1px 2px rgba(0,70,136,.06),0 6px 20px rgba(0,70,136,.08);
  --radius:14px;
  --font:'Jost',Arial,Helvetica,sans-serif;
  /* shared tables.css brand overrides. Selected must differ from BOTH bands and from
     hover, or a ticked row is indistinguishable from the one under the pointer. */
  --table-header-bg:var(--navy); --table-header-hover:var(--navy-soft); --table-row-even:var(--shc-grey);
  --table-row-hover:var(--teal-tint); --table-row-selected:#DCE9F7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
a{color:var(--teal-deep)}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:15px}
[hidden]{display:none!important}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 15px;font-weight:600;font-size:14px;transition:.12s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-teal{background:var(--teal);border-color:var(--teal);color:var(--navy-deep)}
.btn-teal:hover{background:#C29700;border-color:#C29700}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--line2);color:var(--ink)}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn-block{width:100%;justify-content:center;padding:11px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- login ---------- */
/* justify-content:center clips the top of a card taller than the viewport and
   leaves no way to scroll back to it. Auto margins centre identically when
   there is room and give way to the scroll when there is not. */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:18px;padding:24px 12px;overflow-y:auto;
  background:radial-gradient(1200px 600px at 50% -10%,#005EB8 0%,var(--shc-navy) 55%,#00264B 100%)}
.login-wrap>.login-card{margin-top:auto}
.login-wrap>.login-foot{margin-bottom:auto}
.login-card{width:min(400px,92vw);background:var(--card);border-radius:18px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,38,75,.4);display:flex;flex-direction:column;gap:13px}
.login-card h1{font-size:21px;margin:6px 0 2px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.login-card input{border:1px solid var(--line);border-radius:9px;padding:11px 12px;color:var(--ink)}
.login-card input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.login-err{color:var(--danger);font-size:13px;min-height:16px;font-weight:600}
.login-ok{color:var(--good);font-size:13px;font-weight:600}
.login-foot{color:#D9E3EE;font-size:12px;letter-spacing:.02em}
.login-link-row{text-align:center;margin-top:-4px}
.login-link{background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--shc-navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.login-link:hover{text-decoration:underline}

/* Tightened against a 1366x768 laptop, which leaves roughly 635px of viewport
   once browser chrome and the taskbar are gone. Up to ten tiles have to clear that
   without a scrollbar, so the chooser runs closer than the other panels do.
   Spacing only: no type is shrunk to buy the room. Scoped to #chooser so the
   sign-in, reset and change-password panels keep the spacing they had. */
#chooser.login-wrap{padding-block:16px;gap:13px}
.chooser-card{gap:11px;width:min(920px,94vw);padding:22px 26px}
/* The error line only ever has text after a failed hop, and reserving its
   height costs a row of tiles more than the shift on error is worth. */
.chooser-card .login-err{min-height:0}
.chooser-card h1{text-align:center}
/* Six tracks with two per tile, so three tiles sit on a row and the stragglers
   on a part-filled last row can share its width evenly: one spans six, two span
   three each. Three columns rather than two is what lets seven tiles land in
   three rows and clear a laptop viewport without scrolling.
   auto-rows:1fr so a two-line description in one tile does not leave the row
   above it visibly shorter than the row below.
   --cols/--tracks are read by showChooser, so the layout maths never has to
   restate the breakpoints below and drift from them. */
.chooser-grid{--cols:3;--tracks:6;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:10px}
.chooser-opt{grid-column:span 2}
.chooser-opt{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
  height:100%;padding:12px 15px;text-align:left;white-space:normal;
  font-size:15px;color:var(--navy);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(0,70,136,.05)}
.chooser-opt span{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--muted)}
/* The arrow marks a tile that leaves the portal for its own sign-in. It sits
   with the title rather than in the tile corner: on the full-width tile a
   corner arrow lands so far from the label it stops reading as part of it.
   line-height matches the plain text titles so a row mixing the two keeps one
   baseline. The 12.5px rule below is for descriptions, so the title overrides
   it back to the 15px the untitled tiles inherit from .chooser-opt. */
.chooser-opt .opt-title{display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:600;line-height:1.5;color:inherit}
.chooser-opt .ext-mark{font-size:12px;font-weight:700;line-height:1;color:var(--muted)}
.chooser-opt.is-external:hover .ext-mark{color:var(--navy)}
/* The hover needs to read as "this is the one you are about to open", so it
   moves, brightens and takes a teal edge rather than shifting a shade of grey. */
.chooser-opt:hover{background:var(--teal-tint);border-color:var(--teal);color:var(--navy);
  transform:translateY(-3px);box-shadow:0 10px 24px rgba(218,170,0,.30)}
/* :not(.opt-title) because the title is itself a span on the tiles that have
   one, and this rule outranks the title's own colour: without the exclusion a
   hovered title dims to the description's grey and the arrow beside it ends up
   darker than the name it belongs to. */
.chooser-opt:hover span:not(.opt-title){color:var(--muted)}
.chooser-opt:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.chooser-opt:active{transform:translateY(-1px)}
/* A laptop and wider: four tiles across, and the welcome line and signed-in box sit
   beside the logo instead of stacked under it. Stacked, ten tiles at three across ran
   70px past a 1366x768 laptop (measured 2026-10-19). The card stays 920px wide: any
   wider and it slides under the white Guide and RadWorks links in the top corner.
   Rows size to their own tiles here: a part-filled last row of wide tiles holds one
   line of description and does not need the height of a row of narrow ones. */
@media (min-width:1100px){
  .chooser-card{display:grid;grid-template-columns:auto 1fr;column-gap:32px;align-items:end}
  .chooser-card>*{grid-column:1/-1}
  .chooser-card>.brand-lockup{grid-column:1;grid-row:1/3}
  .chooser-card>h1{grid-column:2;grid-row:1;text-align:left;margin:0}
  .chooser-card>.signed-as{grid-column:2;grid-row:2}
  .chooser-grid{--cols:4;--tracks:12;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto}
  .chooser-opt{grid-column:span 3}}
@media (max-width:900px){.chooser-grid{--cols:2;--tracks:2;grid-template-columns:repeat(2,1fr)}
  .chooser-opt{grid-column:span 1}}
@media (max-width:560px){.chooser-grid{--cols:1;--tracks:1;grid-template-columns:1fr}
  .chooser-opt{grid-column:span 1}}
@media (prefers-reduced-motion:reduce){.chooser-opt:hover,.chooser-opt:active{transform:none}}

/* brand lockup */
.brand-lockup{display:flex;align-items:center;gap:11px}
/* The icon is the secondary mark and may stand alone (guideline: Logo use); the full
   lockup is reserved for the sign-in card where its clear space (its own height) fits. */
.brand-mark{display:block;width:auto;height:38px;flex:none}
.brand-lockup.sm .brand-mark{height:30px}
.brand-lockup.sm .brand-sub{font-size:14px;font-weight:700;color:var(--navy)}
.brand-lockup.card{flex-direction:column;align-items:flex-start;gap:0}
/* 44px tall, so 44px of clear space: 28-30px card padding + 12px margin, 44px below */
.brand-logo{display:block;height:44px;width:auto;margin:12px 12px 44px 12px}
.brand-name{font-weight:700;color:var(--navy);letter-spacing:-.02em;font-size:18px;line-height:1.1}
.brand-lockup.sm .brand-name{font-size:15px}
.brand-sub{font-size:12px;color:var(--faint);font-weight:600}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:11px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,70,136,.02)}
.topbar .brand-lockup{cursor:pointer}
.topnav{display:flex;gap:4px;margin-left:8px;margin-right:auto}
.brand-switch{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:3px;background:#fff;margin-right:12px}
.brand-switch[hidden]{display:none}
.brand-switch button{border:none;background:none;color:var(--muted);font-weight:700;font-size:13.5px;padding:6px 13px;border-radius:100px;white-space:nowrap}
.brand-switch button:hover{color:var(--ink)}
.brand-switch button.on{background:var(--navy);color:#fff}
.topnav button{border:none;background:none;color:var(--muted);font-weight:600;font-size:14px;padding:8px 13px;border-radius:8px}
.topnav button:hover{background:var(--line2);color:var(--ink)}
.topnav button.on{background:var(--teal-tint);color:var(--teal-deep)}
.account-slot{margin-left:auto;display:flex;align-items:center}
.nav-home-btn{margin-right:14px;background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.nav-home-btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}

/* ---------- account menu (avatar + dropdown) ---------- */
.usermenu{position:relative;display:flex;align-items:center;gap:12px}
.usermenu.floating{position:fixed;top:16px;right:20px;z-index:60}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700;letter-spacing:.02em;flex:none}
.avatar.lg{width:42px;height:42px;font-size:15px}
.avatar.xl{width:56px;height:56px;font-size:19px}
.avatar-btn{border:2px solid transparent;background:none;padding:2px;border-radius:50%;display:grid;place-items:center;transition:.12s}
.avatar-btn:hover{border-color:var(--teal)}
.avatar-btn[aria-expanded="true"]{border-color:var(--teal)}
.usermenu.floating .avatar-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.usermenu.floating .avatar-btn:hover,.usermenu.floating .avatar-btn[aria-expanded="true"]{border-color:#fff}
.user-drop{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;min-width:246px;display:flex;flex-direction:column;z-index:61}
.user-drop button{border:none;background:none;text-align:left;padding:9px 11px;border-radius:7px;font-size:14px;font-weight:600;color:var(--ink)}
.user-drop button:hover{background:var(--line2)}
.user-drop .ud-danger{color:var(--danger)}
.user-drop .ud-danger:hover{background:#fdecea}
.ud-head{display:flex;align-items:center;gap:11px;padding:11px 11px 8px}
.ud-id{min-width:0}
.ud-name{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ud-email{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ud-role-row{padding:0 11px 9px}
.ud-sep{height:1px;background:var(--line);margin:5px 4px}
.role-pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;background:var(--line2);color:var(--muted);border:1px solid var(--line)}
.role-pill.is-admin{background:var(--teal-tint);color:var(--shc-navy);border-color:var(--teal-tint2)}

/* ---------- icon buttons ---------- */
.icon-btn{border:1px solid transparent;background:none;color:var(--muted);border-radius:8px;padding:7px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--line2);color:var(--navy)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.sm svg{width:16px;height:16px}

/* ---------- shell + history side panel ---------- */
.shell{display:flex;align-items:stretch;min-height:calc(100dvh - var(--topbar-h, 65px))}
.histpanel{width:300px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .18s ease,margin .18s ease;overflow:hidden}
.shell:not(.hist-open) .histpanel{width:0;border-right:none}
.hist-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;font-weight:700;color:var(--navy);font-size:14px}
.hist-filters{padding:0 14px 10px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line2)}
.hist-filters input,.hist-filters select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;background:#fff;color:var(--ink);width:100%}
.hist-filters input:focus,.hist-filters select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.hist-selects{display:flex;gap:8px}
.hist-scroll{flex:1;overflow-y:auto;padding:10px 12px 24px;display:flex;flex-direction:column;gap:7px}
.hist-item{border:1px solid var(--line);border-radius:9px;padding:10px 11px;cursor:pointer;transition:.12s;background:#fff}
.hist-item:hover{border-color:var(--teal);background:var(--teal-tint)}
.hist-item .tl{font-weight:600;color:var(--navy);font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hist-item .mt{color:var(--faint);font-size:11.5px;margin-top:3px}
.hist-item .del{margin-top:6px;border:none;background:none;color:var(--danger);font-size:11.5px;font-weight:600;padding:0;cursor:pointer}
.hist-empty{color:var(--faint);font-size:13px;text-align:center;padding:26px 10px}
.hist-scrim{display:none}
@media (max-width:900px){
  .histpanel{position:fixed;top:var(--topbar-h, 65px);bottom:0;left:0;z-index:40;width:300px;box-shadow:0 10px 40px rgba(0,38,75,.3)}
  .shell:not(.hist-open) .histpanel{width:0}
  .shell.hist-open .hist-scrim{display:block;position:fixed;inset:var(--topbar-h, 65px) 0 0 0;background:rgba(20,38,45,.35);z-index:39}
}

/* ---------- view container ---------- */
.view{flex:1;min-width:0;max-width:1120px;margin:0 auto;padding:28px 22px 80px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:26px}
.page-head p{margin:5px 0 0;color:var(--muted);font-size:14px;max-width:640px}
.crumb{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:14px;background:none;border:none;padding:0}
.crumb:hover{color:var(--teal-deep)}

/* ---------- tool grid ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:10px}
.tool-card:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 8px 26px rgba(0,70,136,.12)}
.tool-ic{width:44px;height:44px;border-radius:11px;background:var(--teal-tint);color:var(--teal-deep);display:grid;place-items:center}
.tool-ic svg{width:23px;height:23px}
.tool-card h3{font-size:17px}
.tool-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.tool-card .go{margin-top:auto;color:var(--teal-deep);font-weight:700;font-size:13px;display:inline-flex;gap:5px;align-items:center}

/* reference tile */
.ref-tile{margin-top:26px;background:linear-gradient(180deg,#fff,#FCFAF8);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.ref-tile h3{font-size:15px;margin-bottom:12px;color:var(--navy)}
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pillar{border-left:3px solid var(--teal);padding:2px 0 2px 12px}
.pillar b{display:block;font-size:13.5px}
.pillar span{color:var(--muted);font-size:12.5px}

/* ---------- forms ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);max-width:760px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field .req{color:var(--teal-deep)}
.field .hint{font-size:12px;color:var(--faint);font-weight:500}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);background:#fff;width:100%}
.field textarea{min-height:90px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.field.resume textarea{min-height:180px;font-size:13.5px}
.depth-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.depth-opt{border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;cursor:pointer;transition:.12s;background:#fff}
.depth-opt:hover{border-color:var(--faint)}
.depth-opt.on{border-color:var(--teal);background:var(--teal-tint)}
.depth-opt b{display:block;font-size:14px;color:var(--navy)}
.depth-opt span{font-size:12px;color:var(--muted);line-height:1.4;display:block;margin-top:3px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.form-actions .spacer{flex:1}

/* ---------- generating / progress ---------- */
.gen-status{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.spinner{width:26px;height:26px;border:3px solid var(--teal-tint2);border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-status b{color:var(--navy)}
.gen-status .sub{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- brief output ---------- */
.brief-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;flex-wrap:wrap}
.brief-head h1{font-size:24px}
.brief-meta{color:var(--muted);font-size:13px;margin:4px 0 18px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.brief-meta .badge{background:var(--teal-tint);color:var(--teal-deep);border-radius:20px;padding:3px 11px;font-weight:700;font-size:12px}
.brief-actions{display:flex;gap:8px;flex-wrap:wrap}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2);background:#FCFAF8}
.sec-head h3{font-size:15.5px}
.sec-head .n{width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;margin-right:10px}
.sec-head .left{display:flex;align-items:center}
.sec-body{padding:16px 18px}
.sec-empty{color:var(--faint);font-style:italic;font-size:13px}
.sources{background:linear-gradient(180deg,#fff,#FCFAF8)}
.sources ol{margin:0;padding-left:20px}
.sources li{margin:5px 0;font-size:13.5px}
.sources a{word-break:break-all}
.sources .src-note{color:var(--muted);font-size:13px;margin:0 0 12px}
.sec-head.plain{cursor:default}

/* lead card — the "Bottom line" hook that opens every brief */
.brief-lead{background:linear-gradient(180deg,#FFF8E8,#FBF3D6);border:1px solid var(--teal-tint2);
  border-left:4px solid var(--teal);border-radius:var(--radius);padding:16px 20px 6px;margin-bottom:16px;box-shadow:var(--shadow)}
.brief-lead .lead-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:2px}
.brief-lead .md{color:var(--ink)}
.brief-lead .md ul{margin:6px 0 10px;padding-left:20px}
.brief-lead .md li{margin:6px 0;font-size:15px;line-height:1.55}

/* phase divider (Full Campaign's 3 phases) */
.phase-head{margin:22px 2px 10px;padding-bottom:6px;border-bottom:2px solid var(--teal);
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.phase-head:first-of-type{margin-top:6px}

/* section controls (expand all) */
.sec-controls{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.sec-controls .spacer{flex:1}
.sec-controls .sc-hint{color:var(--faint);font-size:12.5px;font-weight:600}

/* collapsible sections — collapsed shows the takeaway hook, expands to the detail */
.sec.collapsible .sec-head{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;
  border:none;border-bottom:none;background:#fff;padding:15px 18px;font-family:inherit;cursor:pointer}
.sec.collapsible .sec-head:hover{background:var(--teal-tint)}
.sec.collapsible .sec-head:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.sec.collapsible.open .sec-head{border-bottom:1px solid var(--line2);background:#FCFAF8}
.sec.collapsible .sec-head .chev{flex:none;color:var(--teal-deep);margin-top:2px;transition:transform .18s}
.sec.collapsible.open .sec-head .chev{transform:rotate(90deg)}
.sec.collapsible .sec-head .n{width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;margin:0}
.sec-htext{flex:1;min-width:0}
.sec-htext h3{font-size:15.5px;line-height:1.3}
.sec-htext .hook{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--muted);font-weight:500}
.sec.collapsible.open .sec-htext .hook{color:var(--muted)}
.sec-copy{flex:none;opacity:0;transition:.12s}
.sec.collapsible .sec-head:hover .sec-copy,.sec.collapsible.open .sec-copy{opacity:1}

/* cited links in brief bodies read as links */
.md a{word-break:break-word;color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.md a:hover{color:var(--navy)}

/* markdown body */
.md h1,.md h2,.md h3{color:var(--navy);margin:14px 0 8px;line-height:1.3}
.md h1{font-size:18px}.md h2{font-size:16px}.md h3{font-size:14.5px}
.md p{margin:9px 0}
.md ul,.md ol{margin:9px 0;padding-left:22px}
.md li{margin:4px 0}
.md strong{color:var(--navy);font-weight:700}
.md code{background:var(--line2);padding:1px 6px;border-radius:5px;font-size:13px;font-family:'JetBrains Mono',ui-monospace,monospace}
.md a{word-break:break-word}
.md hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.md table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13.5px}
.md th,.md td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.md th{background:var(--navy);color:#fff;font-weight:600}
.md tr:nth-child(even) td{background:var(--shc-grey)}
.md blockquote{border-left:3px solid var(--teal);margin:10px 0;padding:2px 0 2px 14px;color:var(--muted)}

/* ---------- library cards (DIQ + objections) ---------- */
.lib-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.lib-controls select,.lib-controls input{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff;color:var(--ink)}
.lib-controls input{min-width:240px}
.lib-controls .count{color:var(--muted);font-size:13px;margin-left:auto}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.diq-card,.obj-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 17px;display:flex;flex-direction:column;gap:10px}
.diq-card.sel{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-tint)}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--teal-tint);color:var(--teal-deep);text-transform:uppercase;letter-spacing:.03em}
.chip.navy{background:#EFEBE7;color:var(--navy)}
.diq-card h4,.obj-card h4{font-size:15px;color:var(--navy)}
.diq-seg{font-size:13.5px}
.diq-seg .k{font-weight:700;color:var(--teal-deep);font-size:11px;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:2px}
.diq-src{font-size:12px;color:var(--faint);font-style:italic}
.card-foot{display:flex;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line2)}
/* objections = expandable accordion, legibility-first */
.card-grid.stack{grid-template-columns:1fr;max-width:860px;gap:11px}
.obj-card{padding:0;gap:0;overflow:hidden}
.obj-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:#fff;
  padding:16px 18px;cursor:pointer;font-family:inherit}
.obj-head:hover{background:var(--teal-tint)}
.obj-head:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.obj-head .chev{flex:none;color:var(--teal-deep);transition:transform .18s}
.obj-card.open .obj-head .chev{transform:rotate(90deg)}
.obj-head .qt{flex:1;font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.35}
.obj-head .obj-copy{flex:none;opacity:0;transition:.12s}
.obj-card:hover .obj-head .obj-copy,.obj-card.open .obj-head .obj-copy{opacity:1}
.obj-body{padding:0 18px 16px;border-top:1px solid var(--line2)}
.acpc{display:flex;flex-direction:column;gap:13px;padding-top:14px}
.acpc .step .k{font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:3px}
.acpc .step p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}
.acpc .step ul{margin:2px 0 0;padding-left:20px;font-size:15px;color:var(--ink);line-height:1.55}
.acpc .step ul li{margin:3px 0}
.acpc .step.clarify{background:var(--teal-tint);border-radius:9px;padding:11px 13px}
.obj-tags{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 14px}

/* ---------- Playbook ---------- */
.pb-section{margin-bottom:26px}
.pb-section h2{font-size:16px;color:var(--navy);margin-bottom:4px}
.pb-section .sub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.fw-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px 18px;border-top:3px solid var(--teal)}
.fw-card h3{font-size:15.5px;color:var(--navy);margin-bottom:7px}
.fw-card .what{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 9px}
.fw-card .apply{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0;border-left:3px solid var(--teal-tint2);padding-left:11px}
.fw-card .apply b{color:var(--teal-deep)}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mini{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mini b{display:block;color:var(--navy);font-size:14px}
.mini span{color:var(--muted);font-size:13px;line-height:1.45}

/* ---------- segmented control + call sheets ---------- */
.seg{display:inline-flex;background:var(--line2);border-radius:10px;padding:3px;gap:2px;margin-bottom:16px}
.seg button{border:none;background:none;padding:7px 15px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,70,136,.12)}
.purpose{background:var(--teal-tint);border:1px solid var(--teal-tint2);color:var(--navy);border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:16px}
.sheet-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);cursor:pointer;transition:.12s;margin-bottom:10px}
.sheet-row:hover{border-color:var(--teal)}
.sheet-row .tl{font-weight:700;color:var(--navy)}
.sheet-row .mt{color:var(--muted);font-size:12.5px}
.sheet-row .sp{flex:1}

/* example badge + strip */
.badge.example{background:#fff3d6;color:#8a6300}
.example-strip{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.example-chip{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--teal);color:var(--teal-deep);background:var(--teal-tint);
  border-radius:9px;padding:8px 13px;font-weight:600;font-size:13px;cursor:pointer}
.example-chip:hover{background:var(--teal-tint2)}

/* call sheet tray */
.tray{position:fixed;bottom:0;left:0;right:0;background:var(--navy);color:#fff;padding:12px 22px;display:flex;align-items:center;gap:14px;box-shadow:0 -6px 24px rgba(0,38,75,.25);z-index:30}
.tray b{color:#fff}.tray .sub{color:#D9E3EE;font-size:13px}
.tray input{margin-left:auto;border:1px solid #005EB8;background:#00264B;color:#fff;border-radius:8px;padding:8px 11px;min-width:220px}
.tray input::placeholder{color:#B8C6CB}

/* ---------- history ---------- */
.hist-list{display:flex;flex-direction:column;gap:10px}
.hist-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);cursor:pointer;transition:.12s}
.hist-row:hover{border-color:var(--teal)}
.hist-row .tl{font-weight:700;color:var(--navy)}
.hist-row .mt{color:var(--muted);font-size:12.5px}
.hist-row .sp{flex:1}

/* empty states */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty svg{width:42px;height:42px;color:var(--faint);margin-bottom:10px}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 8px 30px rgba(0,38,75,.35);z-index:50}

/* misc */
.notice{background:#fff7e6;border:1px solid #f0d9a8;color:#8a6300;border-radius:10px;padding:12px 15px;font-size:13.5px;margin-bottom:14px}
.err-box{background:#fdeceb;border:1px solid #f2c2bd;color:#a02a1e;border-radius:10px;padding:14px 16px;font-size:14px;font-weight:600}
@media (max-width:640px){
  .depth-row{grid-template-columns:1fr}
  /* Six nav items no longer fit a phone. Without this the last one (Review
     Queue) is pushed under the CRM button and cannot be tapped at all. */
  .topbar{gap:10px;padding:11px 12px;flex-wrap:nowrap}
  .topnav{gap:0;overflow-x:auto;flex:1;min-width:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav button{padding:8px 9px;font-size:13px;white-space:nowrap;flex:none}
  /* One short button fits a phone header where three did not; it shrinks to the
     arrow so it can never crowd the page nav out of reach again. */
  .nav-home-btn{margin-right:0;padding:6px 9px;font-size:12px}
  .nav-home-btn .home-label{display:none}
  .brand-lockup.sm .brand-sub{display:none}
}
@media print{
  .topbar,.brief-actions,.crumb,.tray,.toast{display:none!important}
  body{background:#fff}.sec{box-shadow:none;break-inside:avoid}
  .lab-left,#lab-actions{display:none!important}
  .view.is-lab,.lab-right,.lab-right .data-table-wrap{height:auto!important;overflow:visible!important}
}

/* ---- Marketing tab (content from the marketing engine, via Selling Rad) ---- */
.mkt-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.mkt-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.mkt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mkt-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; color: #fff; }
.mkt-badge.client { background: var(--shc-navy); }
.mkt-badge.cand   { background: var(--shc-gold); color: #00264B; }  /* navy on gold is 4.36:1; deep navy 7.06:1 */
.mkt-badge.other  { background: var(--seg-other); }
.mkt-topic  { font-size: 14px; color: var(--muted); font-weight: 600; }
.mkt-status { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.mkt-body { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 14px; max-height: 240px; overflow: auto; }
.mkt-foot { display: flex; justify-content: flex-end; gap: 8px; }
.mkt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mkt-card.posted { background: #F7F4F1; border-style: dashed; }
.mkt-hook { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--navy); }
.mkt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.rev2-tags { margin: 14px 0 16px; }
.mkt-tag { font-size: 13.5px; font-weight: 600; color: var(--shc-navy); background: var(--teal-tint); border-radius: 6px; padding: 3px 8px; }
.mkt-image { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; margin-bottom: 12px; padding: 10px 12px; background: #F5F1EE; border-radius: 8px; border: 1px solid var(--line); }
.mkt-image-lbl { flex-basis: 100%; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mkt-image p { flex: 1 1 320px; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.meta-pill.fmt { background: #EFEBE7; border-color: #D9D4CF; color: var(--navy); font-weight: 700; }
.mkt-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.mkt-figure-img { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--line); background: #F5F1EE; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* ---- Review Queue: master-detail triage layout ----
   A reviewer working a backlog needs orientation (where am I), comparison
   (what am I choosing between) and a visible next action at all times. A
   vertical feed of full-text cards gives none of those, so this is a list +
   reading pane with pinned header and pinned actions. */
.view.is-review { max-width: none; padding: 0; display: flex; }
/* The History rail lists generated briefs, which have nothing to do with review.
   Reclaim its 300px here; every other view keeps the user's own preference. */
.shell:has(.view.is-review) .histpanel { width: 0; border-right: none; overflow: hidden; }
.shell:has(.view.is-review) .hist-scrim { display: none; }
/* The history rail lists generated briefs, which belong to the Sales Portal and
   to nothing else. Scoped by "not the portal" rather than by naming each other
   module: Sprout was named here, the Searcher was not, and it shipped with the
   Sales Portal's briefs sitting in its sidebar. */
body:not([data-mod="portal"]) .histpanel { width: 0; border-right: none; overflow: hidden; }
body:not([data-mod="portal"]) .hist-scrim { display: none; }
body:not([data-mod="portal"]) #hist-toggle { display: none; }
.rev2 { display: flex; flex-direction: column; flex: 1; min-width: 0;
  height: calc(100dvh - var(--topbar-h, 65px)); background: var(--bg); }

/* filter bar */
.rev2-bar { flex: none; background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rev2-bar-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rev2-search { flex: 1; min-width: 190px; max-width: 340px; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font-size: 14px; color: var(--ink); background: #fff; }
.rev2-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.rev2-chips { display: flex; gap: 6px; }
.rev2-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 100px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center;
  cursor: pointer; }
.rev2-chip span { color: var(--faint); font-weight: 700; font-size: 12px; }
.rev2-chip:hover { border-color: var(--faint); }
.rev2-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rev2-chip.on span { color: #D9E3EE; }
.rev2-topic, .rev2-source, .rev2-sort { border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; max-width: 260px; }
.rev2-source { max-width: 200px; }
.rev2-clear { border: none; background: none; color: var(--teal-deep); font-size: 13.5px;
  font-weight: 600; text-decoration: underline; padding: 0; }
.rev2-progress { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
  display: flex; align-items: center; gap: 10px; }
/* SHC navy on the gold tints: 8.5:1 at rest, 7.4:1 on hover. */
.rev2-golink { font: inherit; font-weight: 700; color: var(--shc-navy); background: var(--teal-tint);
  border: 1px solid var(--teal-tint2); border-radius: 20px; padding: 3px 11px; cursor: pointer; }
.rev2-golink:hover { background: var(--teal-tint2); }

/* two panes */
.rev2-body { flex: 1; display: flex; min-height: 0; }
.rev2-list { width: 330px; flex: none; border-right: 1px solid var(--line); background: var(--card);
  overflow-y: auto; padding: 10px 10px 40px; }
.rev2-loading { color: var(--muted); font-size: 14px; padding: 18px 12px; }
.rev2-sec { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 7px; display: flex; gap: 7px; align-items: center;
  position: sticky; top: -10px; background: var(--card); z-index: 2;
  width: 100%; border: 0; text-align: left; cursor: pointer; }
.rev2-sec:hover { color: var(--navy); }
.rev2-count { background: var(--bg); border-radius: 20px; padding: 1px 7px; color: var(--muted); }
.rev2-caret { display: flex; color: var(--faint); transform: rotate(90deg); transition: transform .12s; }
.rev2-sec.shut .rev2-caret { transform: rotate(0deg); }
.rev2-row { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  border: 1px solid transparent; border-radius: 10px; padding: 10px 11px; background: none;
  cursor: pointer; transition: .1s; }
.rev2-row:hover { background: var(--bg); }
.rev2-row.on { background: var(--teal-tint); border-color: var(--teal-tint2); }
.rev2-row.done { opacity: .55; }
.rev2-row-top { display: flex; align-items: flex-start; gap: 8px; }
.rev2-row-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.rev2-row.on .rev2-row-title { color: var(--navy); font-weight: 700; }
.rev2-row-meta { font-size: 12px; color: var(--muted); padding-left: 16px; }
/* Platform pill sits beside the meta text as its own box, so it never rides over
   the wrapped line above it or touches the last word. */
.rev2-row-meta:not(.rev2-row-when) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rev2-row-meta .meta-pill { display: inline-block; padding: 1px 9px; font-size: 11.5px; line-height: 1.5; }
/* Where the idea came from, on the scannable row itself — long hostnames clip
   rather than wrapping the row to a third line. --muted on --bg is 4.79:1. */
.rev2-row-when { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.rev2-row-src { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; padding: 1px 8px;
  background: var(--bg); border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rev2-row.on .rev2-row-src { background: #fff; }
.rev2-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
.rev2-dot.client { background: var(--navy); }
.rev2-dot.cand { background: var(--teal); }
.rev2-dot.both { background: linear-gradient(135deg, var(--navy) 50%, var(--teal) 50%); }
.rev2-dot.other { background: var(--seg-other); }
.rev2-tick { color: var(--teal-deep); font-weight: 800; font-size: 13px; }

/* detail pane */
.rev2-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.rev2-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 14px; }
.rev2-back { display: none; }
.rev2-dh { flex: none; background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 28px 0; }
.rev2-dh-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.rev2-pill { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
.rev2-dh-title { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.25; margin: 0 0 14px; }
.rev2-dh-note { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.rev2-tabs { display: flex; gap: 4px; }
.rev2-tab { border: none; background: none; border-bottom: 3px solid transparent; padding: 9px 13px;
  font-size: 13.5px; font-weight: 700; color: var(--muted); text-transform: capitalize;
  display: inline-flex; gap: 6px; align-items: center; }
.rev2-tab:hover { color: var(--navy); }
.rev2-tab.on { color: var(--navy); border-bottom-color: var(--teal); }
.rev2-tab-tick { font-size: 11px; }
.rev2-tab.approved .rev2-tab-tick { color: var(--teal-deep); }
.rev2-tab.rejectd { opacity: .6; }

.rev2-dbody { flex: 1; overflow-y: auto; padding: 26px 28px 40px; }
/* ~68ch keeps long-form copy readable instead of running the full pane width */
.rev2-read { max-width: 68ch; }
.rev2-lede { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; }
.rev2-kv { margin-bottom: 16px; }
.rev2-kv span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.rev2-kv p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.rev2-post-title { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.35; margin: 0 0 14px; }
.rev2-post-body { font-size: 15.5px; line-height: 1.72; color: var(--ink); white-space: pre-wrap; }

.rev2-actions { flex: none; background: var(--card); border-top: 1px solid var(--line);
  padding: 13px 28px; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap; }
.rev2-chanpick { flex: 1 1 100%; display: flex; flex-direction: row; align-items: center;
  gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.rev2-chanpick-lbl { font-size: 13px; color: var(--muted); }
.rev2-hint { margin-right: auto; font-size: 13px; color: var(--muted); }
.rev2-decided { margin-right: auto; font-size: 14px; font-weight: 700; }
.rev2-decided.approve { color: var(--teal-deep); }
.rev2-decided.reject { color: var(--muted); }

/* date + source strip: how fresh, and where it came from, on every card */
.card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.meta-pill { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-pill-lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-right: 5px; }
/* Missing data is stated outright, never left as a gap — a blank reads as "no
   source", which is a different claim. It just should not shout: --muted is
   4.79:1 on the pill's own background, over the AA floor. */
.meta-pill.unknown { color: var(--muted); font-style: italic; }
.meta-pill.chan { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }

/* source citation */
.rev-source { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
/* --faint on white is 2.70:1, an outright AA failure at this size. --muted is
   5.42:1 and reads the same visual weight. NOTE: --faint is used as a text
   colour in a dozen other places in this file with the same problem. */
.rev-source-lbl { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rev-source a { color: var(--teal-deep); word-break: break-word; }

@media (max-width: 900px) {
  .rev2-list { width: 100%; border-right: none; }
  .rev2-detail { display: none; }
  .rev2-detail.open { display: flex; position: fixed; inset: var(--topbar-h, 65px) 0 0 0; z-index: 45; background: var(--bg); }
  .rev2-back { display: inline-block; border: none; background: none; color: var(--teal-deep);
    font-size: 13.5px; font-weight: 700; padding: 0 0 10px; }
  .rev2-dh, .rev2-dbody, .rev2-actions { padding-left: 18px; padding-right: 18px; }
  .rev2-progress { display: none; }
}
/* ---------- signed-in identity block (chooser) ---------- */
.signed-as{display:flex;align-items:center;gap:11px;background:var(--line2);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px}
.signed-as .sa-id{min-width:0;flex:1}
.sa-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sa-name{font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-email{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corner-mount{position:absolute;top:0;right:0}

/* ---------- full-page sheets (profile, admin) ---------- */
.sheet{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:40;overflow:hidden}
.sheet-top{display:flex;align-items:center;gap:16px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line)}
.sheet-heading h1{font-size:19px}
.sheet-heading p{margin:2px 0 0;font-size:13px;color:var(--muted)}
/* The heading takes the slack, so the header's own button and the account menu sit
   together at the right in DOM order. The menu used to float over this bar on a fixed
   56px allowance, which was exactly wide enough for the avatar and nothing else -- add
   a link beside it and it lands on top of "+ New request". Nothing here is reserved by
   guess now; the two are laid out side by side and cannot collide. */
.sheet-heading{margin-right:auto;min-width:0}
.sheet-corner{display:flex;align-items:center;flex:none}
.sheet-body{flex:1;min-height:0;overflow:auto;padding:20px 22px 26px;display:flex;flex-direction:column;gap:14px}
.sheet-body.narrow{max-width:620px;width:100%}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;display:flex;flex-direction:column;gap:15px}
.panel-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.panel-card input[type=text],.panel-card input[type=email],.panel-card input[type=password],.panel-card select{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);background:#fff}
.panel-card input:focus,.panel-card select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.pf-head{display:flex;align-items:center;gap:14px;padding-bottom:4px}
.pf-email{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:5px}
.hint{font-weight:500;color:var(--muted);font-size:12.5px}
.row-actions{display:flex;gap:9px;align-items:center}
.row-actions.end{justify-content:flex-end}
.form-err{color:var(--danger);font-size:13.5px;font-weight:600;min-height:17px}

/* ---------- admin users table ---------- */
#ad-table{min-width:1160px}
#ad-table{--table-cell-text:var(--ink)}  /* the shared td rule is !important; override the token */
.td-empty{text-align:center;color:var(--muted);padding:22px 0;font-weight:600}
.td-actions{white-space:nowrap;overflow:visible}
.td-actions .btn{padding:4px 9px;font-size:12.5px;margin-right:5px}
.btn-danger-ghost{color:#a02a1e;border-color:#f2c2bd}
.btn-danger-ghost:hover{background:#fdeceb;border-color:#e39a92}
.you-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--shc-navy);
  background:var(--teal-tint);border-radius:4px;padding:1px 5px;margin-left:5px}
.dot-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.dot-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#B8C6CB}
.dot-pill.on::before{background:var(--good)}
.dot-pill.off{color:var(--faint)}

/* ---------- user editor modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(20,38,45,.55);display:grid;place-items:center;z-index:70;padding:20px}
.modal-card{width:min(470px,94vw);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;
  box-shadow:0 24px 60px rgba(0,38,75,.4);display:flex;flex-direction:column;gap:13px}
.modal-card h2{font-size:18px}
.modal-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.modal-card input[type=text],.modal-card input[type=email],.modal-card input[type=password],.modal-card select{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);background:#fff}
.modal-card input:disabled{background:var(--line2);color:var(--muted)}
.modal-card input:focus,.modal-card select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.modal-card .two-up{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-card label.check{flex-direction:row;align-items:center;gap:9px;font-size:14px;color:var(--ink);font-weight:600}
.modal-card label.check input{width:17px;height:17px;accent-color:var(--teal-deep)}
@media (max-width:640px){
  .modal-card .two-up{grid-template-columns:1fr}
  .sheet-top{flex-wrap:wrap;gap:10px}
  #ad-table{min-width:820px}
}

/* ---------- Rad Build ----------
   The channel back to Rad for what this portal needs. A text link in the topbar, not a
   nav tab: it is about the tool, not one of the places you work. Colours below are all
   solid grounds with their own dark ink -- tinted text on the page background is what
   fails AA on a light theme. */
.build-link{background:none;border:none;color:var(--navy);font-size:14px;font-weight:600;
  padding:7px 2px;border-bottom:1px solid transparent;white-space:nowrap}
.build-link:hover{color:var(--teal-deep);border-bottom-color:var(--teal-deep)}
/* The chooser is the one screen where the menu floats over the dark navy ground, so the
   link inverts there. Every other home for it (topbar, sheets) is white or near-white. */
#chooser-corner .build-link{color:#fff}
#chooser-corner .build-link:hover{color:#fff;border-bottom-color:#fff}
.rb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);
  margin-left:6px;vertical-align:2px}
.bd-lead{margin:0 0 4px;color:var(--muted);font-size:13.5px}
.bd-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.bd-tools input[type=search]{border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  min-width:280px;color:var(--ink);background:#fff}
.bd-tools input[type=search]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.bd-chips{display:flex;gap:8px;flex-wrap:wrap}
/* Not .chip: that is already the portal's uppercase teal tag. */
.bchip{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  font-size:13px;font-weight:600;padding:6px 13px}
.bchip:hover{border-color:var(--faint)}
.bchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
/* The name matters: tables.css forces --table-cell-text on every cell span whose class
   does NOT contain badge/chip/pill/status, so "bbadge" is what keeps these their own
   colour inside a row. Renaming it would repaint them all one flat grey. */
.bbadge{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;
  white-space:nowrap}
.bst[data-s="new"]{background:#fef3c7;color:#713f12} .bst[data-s="need_info"]{background:#fee2e2;color:#7f1d1d}
.bst[data-s="planned"]{background:#DCE9F7;color:#4A2C7A} .bst[data-s="in_progress"]{background:var(--teal-tint2);color:var(--shc-navy)}
.bst[data-s="done"]{background:#E3FFF3;color:#0E5C3E} .bst[data-s="declined"]{background:#EFEBE7;color:var(--muted)}
.bim[data-i="blocking"]{background:#fee2e2;color:#7f1d1d} .bim[data-i="slowing"]{background:#fef3c7;color:#713f12}
.bim[data-i="minor"]{background:#EFEBE7;color:var(--muted)}
.bkd{border:1px solid var(--line);background:var(--line2);color:var(--ink)}
/* Marks a row that has moved since this person last opened it. */
.bdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);
  margin-right:7px;vertical-align:1px}
.rowlink{background:none;border:none;padding:0;color:var(--navy);font-weight:700;font-size:15px;
  text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowlink:hover{color:var(--teal-deep);text-decoration:underline}
.bd-field{display:flex;flex-direction:column;gap:6px}
.bd-label{font-size:13px;font-weight:600;color:var(--muted)}
/* One choice per row of stacked buttons: a request has exactly one kind and one status,
   so this is pick-one, not tick-then-save. */
.bd-choices{display:flex;flex-direction:column;gap:8px}
.bd-choice{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 14px;
  text-align:left;color:var(--ink)}
.bd-choice:hover{border-color:var(--teal)}
.bd-choice[aria-pressed="true"],.bd-choice.on{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.bd-choice b{display:block;font-size:14.5px;font-weight:700;color:var(--navy)}
.bd-choice span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
/* The three pickers on the New request form are one-line dropdowns. As rows of buttons
   they pushed the two fields people actually fill -- what happened, and the picture of
   it -- below the fold of the card. */
.bd-inline{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bd-inline>label{flex:0 0 226px;font-size:14px;font-weight:600;color:var(--ink);margin:0}
.bd-inline>select{flex:1 1 auto;width:auto;min-width:0;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:15px;
  font-family:inherit}
.bd-inline>select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.bd-inline-hint{font-size:13.5px;color:var(--muted);margin:-6px 0 12px}
.bd-inline-hint:empty{display:none}
@media(max-width:560px){
  .bd-inline{display:block}
  .bd-inline>label{display:block;margin-bottom:6px}
  .bd-inline>select{width:100%}
}
/* A screenshot is already on the clipboard when someone reaches this form. Saving it to
   a folder to browse back to it is three steps for nothing, so the box takes a paste, a
   drop or a click. --line is a hairline meant to separate panels and reads as no target
   at all at 1.2:1; --dz-edge is the same idea at the 3:1 a control's outline must clear. */
:root{--dz-edge:#5E727A}          /* 5.0:1 on white */
.dropzone{border:1.5px dashed var(--dz-edge);border-radius:11px;background:#fff;
  padding:16px 14px;text-align:center;cursor:pointer}
.dropzone:hover{border-color:var(--teal-deep)}
.dropzone:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.dropzone.over{border-color:var(--teal-deep);background:var(--teal-tint)}
.dz-hint{display:block;font-size:14px;color:var(--muted)}
/* Underlined and bold rather than teal: the accent is 3.1:1 on white, and this text is
   the instruction, not decoration. */
.dz-hint u,.dz-browse{color:var(--ink);font-weight:600}
/* A real button, painted as that same underlined word. It has to be its own control:
   the box no longer browses on click, so this is the only way to the file dialog. */
.dz-browse{background:none;border:0;padding:0;font-size:inherit;font-family:inherit;
  text-decoration:underline;cursor:pointer}
.dz-browse:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dz-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;justify-content:center}
.dz-thumbs:empty{display:none}
.dz-item{position:relative;width:98px}
.dz-item img{width:98px;height:70px;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:8px}
.dz-file{width:98px;height:70px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--line2);
  font-size:13px;font-weight:700;color:var(--navy)}
.dz-name{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A solid pill, not a white one: painted in the card's own colour it was 1.2:1 against
   the card behind it and you had to already know where it was. */
.dz-x{position:absolute;top:-8px;right:-8px;width:23px;height:23px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid #fff;background:var(--navy);color:#fff;
  font-size:15px;font-weight:700;line-height:1;cursor:pointer}
.dz-x:hover{background:var(--danger);border-color:var(--danger)}
/* Grows with what is typed, and still draggable by the corner. */
#bm-summary{min-height:104px;max-height:340px;resize:vertical;overflow-y:auto}

.bd-card{width:min(620px,94vw)}
.bd-card textarea{border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);
  background:#fff;font-size:15px;resize:vertical}
.bd-card textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.bd-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bd-meta{color:var(--muted);font-size:13.5px;margin:0}
.bd-blurb{font-size:14.5px;margin:6px 0 0;color:var(--ink)}
.bd-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.bd-panel h3{font-size:15px;margin-bottom:10px}
.bd-body{font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.bd-res{border-left:3px solid var(--good);background:#f2fbf7;border-radius:0 9px 9px 0;
  padding:10px 14px;margin-top:14px;font-size:14.5px}
.bd-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bd-note{border:1px solid var(--line);border-radius:11px;padding:11px 14px;background:#fff}
.bd-note.rad{border-color:var(--teal);background:var(--teal-tint)}
.bd-note-head{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:5px}
.bd-tag{background:var(--teal-deep);color:#fff;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:700}
.bd-when{color:var(--muted);font-size:12.5px}
.bd-event{display:flex;gap:9px;align-items:flex-start;font-size:14px}
.bd-event .d{width:8px;height:8px;border-radius:50%;background:var(--line);margin-top:6px;flex:0 0 8px}
.bd-event .t{white-space:pre-wrap;color:var(--ink)}
.bd-files{display:flex;gap:12px;flex-wrap:wrap}
.bd-file{width:132px;font-size:12.5px;position:relative}
.bd-file img{width:132px;height:92px;object-fit:cover;border-radius:9px;border:1px solid var(--line);
  display:block;background:var(--line2);cursor:pointer}
.bd-file .doc{width:132px;height:92px;border-radius:9px;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;background:var(--line2);color:var(--navy);font-weight:700;
  font-size:13px;cursor:pointer}
.bd-file .nm{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink)}
.bd-file .x{position:absolute;top:4px;right:4px;background:rgba(20,38,45,.7);color:#fff;border:none;
  border-radius:50%;width:22px;height:22px;line-height:1;font-size:15px}
/* Let the shared component size the table from its column widths; the wrap scrolls. */
#bd-detail{max-width:1000px}
@media (max-width:640px){ .bd-tools input[type=search]{min-width:100%} }

/* ---- Walkthrough guide (guide.js) ----
   One fixed layer. The spotlight is a box over the target whose huge box-shadow
   dims everything else, so the target stays crisp and clickable-looking while
   the rest of the page recedes. No target: the box parks off-screen and the
   shadow dims the whole page behind a centred card. */
.guide-root{position:fixed;inset:0;z-index:1000}
.guide-root[hidden]{display:none}
.guide-scrim{position:absolute;inset:0}
.guide-spot{position:fixed;top:-40px;left:-40px;width:0;height:0;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(20,38,45,.62);pointer-events:none;
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
.guide-spot[hidden]{display:block;top:-40px;left:-40px;width:0;height:0}
.guide-card{position:fixed;width:min(440px,calc(100vw - 24px));background:#fff;border-radius:14px;
  padding:20px 22px 18px;box-shadow:0 12px 40px rgba(0,70,136,.28);z-index:1;
  font-family:var(--font)}
.guide-card.centred{top:50%!important;left:50%!important;bottom:auto!important;transform:translate(-50%,-50%)}
.guide-x{position:absolute;top:8px;right:10px;border:none;background:none;font-size:24px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.guide-x:hover{background:var(--line2);color:var(--ink)}
.guide-kicker{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--shc-navy);margin-bottom:6px;min-height:14px}
.guide-title{font-size:19px;line-height:1.25;color:var(--navy);margin:0 26px 8px 0}
.guide-body{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink)}
.guide-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.guide-count{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.guide-btns{display:flex;gap:8px}
.guide-btns .btn{padding:8px 14px}
.guide-btns .guide-skip[hidden]{display:none}
body.guide-open{overflow:hidden}
@media (max-width:640px){
  .guide-card{padding:16px 16px 14px}
  .guide-title{font-size:17px}
  .guide-body{font-size:14.5px}
}

/* ===================== SOLICITATION SEARCHER =====================
   Colour rules from the brand system:
   gold is a fill/border only (2.2:1 on white), navy carries any accent that
   is text. Every text colour below is a token already measured for this portal. */
.sol-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.sol-head h1{font-size:21px;color:var(--navy);margin:0}
.sol-head .btn{margin-left:auto}
.sol-sub{margin:3px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}

.sol-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.sol-filters input[type=search],.sol-filters input[type=text],.sol-filters select{
  font:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.sol-filters input[type=search]{min-width:260px;flex:1}
.sol-filters input[type=text]{width:78px;text-transform:uppercase}
.sol-filters input:focus,.sol-filters select:focus{outline:2px solid var(--teal);outline-offset:1px}
.sol-chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}

/* Rule 2: the bar is always present and always holds its height. A FIXED height,
   not a min-height: the buttons revealed on selection are taller than the idle count
   text, and min-height let the bar grow 2px, which moved the whole table down. The
   browser test measures that, and caught it. */
#sol-actions,#buy-actions{display:flex;align-items:center;gap:12px;height:46px;box-sizing:border-box}
#sol-actions .btn.sm,#buy-actions .btn.sm{margin:0}
.sol-count{font-size:13.5px;color:var(--muted)}
.sol-selinfo{font-size:13.5px;font-weight:600;color:var(--navy)}
.sol-actbtns{display:inline-flex;gap:8px}

/* Score chips. Measured white-on-background: #0B7A52 = 5.36:1, #8A5A12 = 5.91:1,
   #454B52 = 7.97:1. All clear AA; the first two are AA but not AAA.

   The class MUST keep "chip" in its name. tables.css forces
   `.data-table td span:not([class*="chip"])... { color: var(--table-cell-text) !important }`,
   so a span called .sol-score got dark text on these dark fills and rendered the
   score at 2.2-3.3:1, illegible, on the one number this whole tool exists to show.
   Renaming a class here is a contrast change, not cosmetics. */
.sol-chip{display:inline-block;min-width:34px;padding:2px 8px;border-radius:999px;
  font-size:15px;font-weight:700;color:#fff;text-align:center}
.sol-chip-hi{background:var(--good)}
.sol-chip-mid{background:var(--warn)}
.sol-chip-lo{background:var(--muted)}
/* "Not read yet" is plain cell text, not a chip, so the 15px table-cell floor applies
   to it even though the chips beside it may be smaller. The class still carries "chip"
   so the shared stylesheet's dark-text !important rule leaves its colour alone. */
.sol-chip-none{background:none;color:var(--muted);font-weight:500;font-size:15px;min-width:0;padding:0}

.sol-pill{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:#fff;background:var(--warn);vertical-align:middle}
.sol-empty{padding:22px;text-align:center;color:var(--muted);font-size:15px}
.sol-dim{color:var(--muted);font-size:13px}

/* The Searcher is a one-screen table: the page stays put and the table scrolls inside
   its own box, header pinned (house rule; tables.css does the inner scroll). */
.view.is-sol{display:flex;flex-direction:column;box-sizing:border-box;max-width:none;
  height:calc(100dvh - var(--topbar-h, 65px));padding-bottom:18px;overflow:hidden}
/* Frozen columns (2026-10-11; offsets set by solFreeze in solicit.js). A td
   paints no background of its own (banding, hover and the selected tint sit on the tr),
   so a stuck cell would show the scrolled columns through it: inherit gives it the row's
   colour. The header sits above the frozen body cells, and a frozen th above its
   neighbours, so nothing scrolls across either. */
.view.is-sol .data-table thead{z-index:3}
.data-table .sol-frozen{position:sticky}
.data-table th.sol-frozen{z-index:1;background:var(--table-header-bg)}
.data-table th.sol-frozen:hover{background:var(--table-header-hover)}
.data-table td.sol-frozen{z-index:2;background:inherit}
.data-table .sol-frozen-end{box-shadow:inset -2px 0 0 var(--line)}
/* The selected marker (a 3px inset on the tr) is painted over by the opaque frozen tick
   cell, so the cell draws it itself. */
.data-table tbody tr.is-selected td.col-check.sol-frozen,
.data-table tbody tr.tr-selected td.col-check.sol-frozen{box-shadow:inset 3px 0 0 var(--table-header-bg)}
/* On a narrow window the frozen Title (or Buyer name) would be wider than the scroll
   box and the other columns could never be reached; only the tick box and Score stay. */
/* The header cell keeps tables.css's position:relative (for its resize handle), so its inline
   left offset would shove it sideways; zero it to stay over its column. */
@media (max-width:900px){.data-table .sol-frozen-end{position:static;box-shadow:none}
  .data-table th.sol-frozen-end{left:0!important}}
.view.is-sol .sol-head,.view.is-sol .sol-filters,.view.is-sol #sol-actions,.view.is-sol #buy-actions{flex:none}
.view.is-sol .data-table-wrap{flex:1;min-height:0}
#sol-rows tr[data-id],#buy-rows tr[data-id]{cursor:pointer}
#sol-rows tr[data-id] td.col-check,#buy-rows tr[data-id] td.col-check{cursor:default}
#sol-rows tr.is-open td,#buy-rows tr.is-open td{background:var(--teal-tint2)}
/* The Searcher and Buyer list mark a ticked row .is-selected; give it the shared
   .tr-selected look (tables.css), which it never had. */
.data-table tbody tr.is-selected,.data-table tbody tr.is-selected:hover,
.data-table tbody tr.is-selected:nth-child(even){background:var(--table-row-selected);
  box-shadow:inset 3px 0 0 var(--table-header-bg)}
/* Buyer list (buyers.js). "chip" stays in the class name so tables.css leaves the colour. */
.data-table td a.buy-link{text-decoration:underline;font-weight:600}
.sol-filters #buy-metro{max-width:100%}
.buy-chip-none{color:var(--muted);font-size:15px}
.buy-note{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;resize:vertical}
.buy-note:focus{outline:2px solid var(--teal);outline-offset:1px}
.sol-lowrow td{background:var(--card);text-align:center;padding:10px}
.sol-lowtoggle{font:inherit;font-size:15px;font-weight:600;color:var(--navy);background:var(--shc-grey);
  border:1px solid var(--line);border-radius:999px;padding:6px 16px;cursor:pointer}
.sol-lowtoggle:hover{background:var(--teal-tint)}
.sol-lowtoggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sol-verdict-pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:15px;font-weight:600}
.sol-verdict-pill.yes{background:#E3F4EC;color:#0B5A3C}
.sol-verdict-pill.no{background:#F6E3E1;color:#8A2A1F}
.sol-star-chip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--teal-tint2);color:var(--navy);font-size:15px}

/* Edit filters / Edit columns */
.sol-editors{margin-left:auto;display:inline-flex;gap:8px}
.sol-editor{position:relative}
.sol-editor-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px 0}
.sol-editor-head{display:flex;justify-content:space-between;align-items:center;padding:6px 14px 8px;
  font-size:13px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line2)}
.sol-editor-reset{font:inherit;font-size:13px;color:var(--teal-deep);background:none;border:none;cursor:pointer;text-decoration:underline}
.sol-editor-list label{display:flex;align-items:center;gap:9px;padding:6px 14px;font-size:14px;color:var(--ink);cursor:pointer}
.sol-editor-list label:hover{background:var(--teal-tint)}
.sol-editor-list label.is-locked{color:var(--muted);cursor:default}
.sol-editor-list label.is-locked:hover{background:none}
.sol-filters [hidden]{display:none!important}

/* Detail drawer: its own scroll, the title and Close pinned at the top. */
.sol-drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,94vw);z-index:60;
  background:var(--card);border-left:1px solid var(--line);
  box-shadow:-12px 0 34px rgba(0,70,136,.16);overflow-y:auto;overscroll-behavior:contain}
.sol-drawer-in{padding:14px 22px 40px}
.sol-drawer-top{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px 14px;background:var(--navy);color:#fff}
.sol-drawer-top h2{font-size:17.5px;line-height:1.35;color:#fff;margin:0}
.sol-drawer-title{flex:1;min-width:0}
.sol-drawer-top .sol-sub{color:#DCE6E9}
.sol-drawer-top .btn{background:#fff;color:var(--navy);border-color:#fff}
.sol-drawer h3{font-size:13.5px;color:var(--navy);margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.05em}
.sol-answer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0 6px}
.sol-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.sol-seg button{font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border:none;
  background:var(--card);color:var(--navy);cursor:pointer}
.sol-seg button+button{border-left:1px solid var(--line)}
.sol-seg button.on.yes{background:#0B5A3C;color:#fff}
.sol-seg button.on.no{background:#8A2A1F;color:#fff}
.sol-seg button:focus-visible,.sol-prio:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sol-prio{font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--navy)}
.sol-prio.on{background:var(--teal-tint2);border-color:var(--teal)}
.sol-fact-score.hi{background:var(--good)!important;border-color:var(--good)!important}
.sol-fact-score.mid{background:var(--warn)!important;border-color:var(--warn)!important}
.sol-fact-score.hi b,.sol-fact-score.hi span,.sol-fact-score.mid b,.sol-fact-score.mid span{color:#fff!important}
.sol-card{border-radius:12px;padding:14px 16px;margin-top:14px;border:1px solid var(--line);background:var(--shc-grey)}
.sol-card-why{background:#EAF7F1;border-color:#C9E9DA}
.sol-card-quotes{background:#F4EDFF;border-color:#E2D2FA}
.sol-card-unsure{background:var(--teal-tint);border-color:var(--teal-tint2)}
.sol-card .sol-list li:last-child{margin-bottom:0}
.sol-facts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.sol-facts div{background:var(--shc-grey);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;min-width:104px}
.sol-facts b{display:block;font-size:19px;color:var(--navy);line-height:1.2}
.sol-facts span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sol-list{margin:0;padding-left:19px}
.sol-list li{font-size:14.5px;color:var(--ink);line-height:1.55;margin-bottom:5px}
.sol-quotes li{color:var(--ink);font-style:italic}
.sol-body{font-size:14.5px;color:var(--ink);line-height:1.6;margin:0}
.sol-warn{background:var(--teal-tint);border:1px solid var(--teal-tint2);border-radius:10px;
  padding:10px 13px;font-size:13.5px;color:var(--navy);margin:14px 0 0}
.sol-link{color:var(--teal-deep);font-weight:600;font-size:14.5px}
.sol-fb{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.sol-fb-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.sol-reasons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

@media (max-width:760px){
  .sol-filters input[type=search]{min-width:100%}
  .sol-drawer{width:100vw}
}

/* ===================== LABOR MARKET DATA =====================
   labor.js. One screen: the picker scrolls in its own left pane, the result fills the
   right pane and its table scrolls inside its own box (house rule: the page never
   scrolls behind a table). Stacks on narrow screens. Text colours are the measured
   portal tokens: --ink 14.4:1, --muted 8.8:1, --navy 9.4:1 on white; gold is
   only ever a fill or border. Chart hues live in labor.js (LAB_COLORS). */
.view.is-lab{max-width:none;display:grid;grid-template-columns:minmax(340px,410px) 1fr;gap:18px;
  box-sizing:border-box;height:calc(100dvh - var(--topbar-h, 65px));padding:18px 22px;overflow:hidden}
.lab-left{overflow-y:auto;min-height:0;padding-right:4px;display:flex;flex-direction:column;gap:14px}
.lab-right{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.lab-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.lab-card h1{font-size:21px;margin-bottom:4px}
.lab-card h2{font-size:17px;margin-bottom:10px}
.lab-lead{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.5}
.lab-favs{padding:0;flex:none}
.lab-favhead{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:16px;font-weight:700;color:var(--navy);
  background:none;border:0;border-radius:var(--radius);padding:12px 18px;cursor:pointer;text-align:left}
.lab-favhead:hover{background:var(--line2)}
.lab-favhead:focus-visible{outline:2px solid var(--navy-soft);outline-offset:-2px}
.lab-favstar{color:var(--navy);font-size:17px}
.lab-favn{font-size:13px;font-weight:700;color:var(--navy);background:var(--teal-tint);border:1px solid var(--teal-tint2);
  border-radius:999px;padding:1px 8px}
.lab-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(-45deg);transition:transform .15s}
.lab-favhead[aria-expanded="true"] .lab-chev{transform:rotate(45deg)}
.lab-favbody{padding:0 18px 14px}
.lab-favpills{display:flex;flex-wrap:wrap;gap:7px}
.lab-fav{display:inline-flex;align-items:center;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:999px}
.lab-fav:hover{border-color:var(--teal)}
.lab-favpill{font:inherit;font-size:15px;font-weight:600;color:var(--navy);background:none;border:0;border-radius:999px;
  padding:6px 4px 6px 13px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lab-favx{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:5px 10px 5px 6px;min-width:28px;min-height:28px;border-radius:999px}
.lab-favx:hover{color:var(--navy);background:var(--line2)}
.lab-fav.on{background:var(--navy);border-color:var(--navy)}
.lab-fav.on .lab-favpill,.lab-fav.on .lab-favx{color:#fff}
.lab-fav.on .lab-favx:hover{background:var(--navy-soft)}
.lab-favpill:focus-visible,.lab-favx:focus-visible{outline:2px solid var(--navy-soft);outline-offset:1px}
.lab-fav.on .lab-favpill:focus-visible,.lab-fav.on .lab-favx:focus-visible{outline-color:var(--teal)}
.lab-favhint{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.lab-favundo{margin:10px 0 0;font-size:13.5px;color:var(--ink)}
.lab-link{font:inherit;font-weight:700;color:var(--navy);background:none;border:0;padding:0;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.lab-titlerow{display:flex;align-items:flex-start;gap:12px}
.lab-titlerow .lab-title{flex:1;min-width:0}
.lab-favslot{flex:none}
.lab-favadd{white-space:nowrap}
.lab-favdone{display:inline-block;font-size:13.5px;font-weight:600;color:var(--navy);padding:5px 2px;white-space:nowrap}
.lab-favform{display:flex;gap:6px;align-items:center}
.lab-favform input{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;width:230px;max-width:40vw}
.lab-favform input:focus{outline:2px solid var(--navy-soft);outline-offset:0;border-color:var(--navy-soft)}
.lab-askrow{display:flex;gap:8px}
.lab-askrow input{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.lab-askrow input:focus,.lab-dim select:focus,.lab-filter:focus,.lab-years select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.lab-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lab-example{font:inherit;font-size:13px;color:var(--navy);background:var(--shc-grey);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;cursor:pointer;text-align:left}
.lab-example:hover{border-color:var(--teal);background:var(--teal-tint)}
.lab-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.lab-tab{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:1px solid transparent;
  border-radius:8px;padding:6px 10px;cursor:pointer}
.lab-tab:hover{color:var(--ink);background:var(--line2)}
.lab-tab.on{color:var(--navy);background:var(--teal-tint);border-color:var(--teal)}
.lab-blurb{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.45}
.lab-dims{display:flex;flex-direction:column;gap:10px;transition:opacity .15s}
.lab-dims.is-loading{opacity:.55}
.lab-dim{display:flex;flex-direction:column;gap:4px}
.lab-dimlabel{font-size:13px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.lab-dimcount{font-weight:500;color:var(--muted)}
.lab-dim select,.lab-filter{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;width:100%;box-sizing:border-box}
.lab-filter{font-size:13.5px;padding:6px 10px}
.lab-fixed{font-size:14px;color:var(--ink);padding:2px 0}
.lab-none{font-size:13.5px;color:var(--muted)}
.lab-chips{display:flex;flex-wrap:wrap;gap:6px}
.lab-chip{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--navy);background:var(--teal-tint);
  border:1px solid var(--teal-tint2);border-radius:999px;padding:3px 4px 3px 10px}
.lab-chipx{border:0;background:none;color:var(--navy);font-size:17px;line-height:1;cursor:pointer;padding:0 5px;border-radius:999px}
.lab-chipx:hover{background:var(--teal-tint2)}
.lab-pickfoot{margin-top:14px;border-top:1px solid var(--line2);padding-top:12px}
.lab-match{margin:0 0 10px;font-size:14px;color:var(--ink);line-height:1.45}
.lab-pickbtns{display:flex;gap:8px;justify-content:flex-end}
.lab-vintage{margin:0 4px;font-size:12.5px;color:var(--muted)}
.lab-empty{margin:auto;max-width:420px;text-align:center;color:var(--muted);font-size:15px}
.lab-empty h2{font-size:18px;margin-bottom:6px}
.lab-spin{width:26px;height:26px;margin:0 auto 10px;border:3px solid var(--line);border-top-color:var(--navy);
  border-radius:50%;animation:lab-spin .8s linear infinite}
@keyframes lab-spin{to{transform:rotate(360deg)}}
.lab-rhead{flex:none}
.lab-asked{margin:0 0 2px;font-size:13px;color:var(--muted)}
.lab-title{font-size:19px;margin:0 0 3px}
.lab-source{margin:0 0 6px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.lab-note{margin:6px 0 0;font-size:14px;color:var(--ink);background:var(--teal-tint);border-left:4px solid var(--teal);
  border-radius:6px;padding:7px 11px}
.lab-years{flex:none;display:flex;gap:14px;margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.lab-years label{display:flex;align-items:center;gap:6px;font-weight:600}
.lab-years select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff}
.lab-chart{flex:none;position:relative;margin:10px 0 4px}
.lab-chart svg{display:block;max-width:100%;height:auto}
.lab-chartcap,.lab-nochart{margin:0 0 6px;font-size:13px;color:var(--muted)}
.lab-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:6px;font-size:13px;color:var(--ink)}
.lab-legitem{display:inline-flex;align-items:center;gap:6px}
/* The definition "i": a 20px circle in SHC navy on white (9.4:1), 28px hit area via padding. */
.lab-info{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;
  margin-left:6px;padding:0;border:1.5px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);
  font:700 12px/1 Georgia,'Times New Roman',serif;font-style:italic;cursor:help;vertical-align:middle;
  box-shadow:0 0 0 4px transparent}
.lab-info:hover,.lab-info:focus-visible,.lab-info[aria-expanded="true"]{background:var(--navy);color:#fff;outline:none}
.lab-def{position:fixed;z-index:60;max-width:340px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:11px 13px;font-size:14px;line-height:1.5;color:var(--ink)}
.lab-def p{margin:4px 0 6px}
.lab-defhead{font-weight:700;color:var(--navy)}
.lab-def a{font-size:13.5px;font-weight:600;color:var(--navy)}
.lab-linekey{display:inline-block;width:16px;height:3px;border-radius:2px;flex:none}
.lab-grid{stroke:var(--line2);stroke-width:1}
.lab-axis{font-size:12px;fill:var(--muted);font-variant-numeric:tabular-nums}
.lab-cross{stroke:var(--faint);stroke-width:1}
.lab-barlabel{font-size:13px;fill:var(--ink)}
.lab-barval{font-size:13px;fill:var(--ink);font-weight:600}
.lab-bar{transition:opacity .1s}
svg rect:hover + .lab-bar,svg rect:focus + .lab-bar{opacity:.85}
.lab-tip{position:absolute;z-index:5;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);padding:7px 10px;font-size:13px;color:var(--ink);min-width:140px;max-width:320px}
.lab-tiphead{font-weight:700;color:var(--navy);margin-bottom:3px}
.lab-tiprow{display:flex;align-items:center;gap:7px;line-height:1.6}
.lab-tiprow b{font-variant-numeric:tabular-nums}
.lab-tiprow span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lab-actions{flex:none;display:flex;align-items:center;gap:10px;height:46px;box-sizing:border-box}
#lab-actions #lab-csv{margin-left:auto}
.lab-count{font-size:13.5px;color:var(--muted)}
.lab-selinfo{font-size:13.5px;font-weight:600;color:var(--navy)}
.lab-right .data-table-wrap{flex:1;min-height:120px}
/* "chip" in the name keeps tables.css from forcing it to the cell ink; muted is 7.97:1. */
.lab-na-chip{color:var(--muted);font-size:15px}
@media (max-width:900px){
  .view.is-lab{display:flex;flex-direction:column;height:auto;overflow:visible;padding:14px}
  .lab-left{overflow:visible}
  .lab-titlerow{flex-wrap:wrap}
  .lab-favform input{max-width:none;flex:1;min-width:0}
  .lab-right{min-height:70vh}
  .lab-right .data-table-wrap{max-height:60vh}
}

/* ---- Sprout: topic trail, platform tabs, background writing (2026-10-07) ---- */
/* --muted on white is 7.9:1; the separators are decoration and stay --faint. */
.rev2-crumbs { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rev2-crumbs span { color: var(--faint); }
/* Platform tabs sit above the angle tabs, so they read as the outer level. */
.rev2-ptabs { border-bottom: 1px solid var(--line); margin-bottom: 2px; flex-wrap: wrap; }
.rev2-ptab { font-size: 14px; text-transform: none; }
.rev2-jobnote { color: var(--warn); font-weight: 600; font-size: 14px; }
.rev2-row.writing .rev2-row-title { font-style: italic; }
.rev2-writing { list-style: none; padding: 0; margin: 0 0 8px; max-width: 420px; }
.rev2-writing li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 14.5px; }
.rev2-writing li span { font-weight: 700; color: var(--muted); }
.rev2-writing li.ok span { color: var(--good); }
.rev2-writing li.bad span { color: var(--danger); }
/* Ready to Post */
.mkt-from { font-size: 14px; color: var(--ink); margin: -2px 0 10px; line-height: 1.45; }
.mkt-from-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-right: 6px; }
.mkt-topicsel { max-width: 320px; }
.mkt-prep { background: var(--teal-tint); border: 1px dashed var(--teal-tint2); border-radius: 10px; padding: 12px 16px; }
.mkt-prep-head { font-size: 15px; color: var(--shc-navy); display: flex; gap: 8px; align-items: center; }
.mkt-prep-head .rev2-count { background: #fff; color: var(--shc-navy); }
.mkt-prep-note { margin: 4px 0 8px; font-size: 14px; color: var(--ink); }
.mkt-prep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mkt-prep-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: #fff;
  border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.mkt-prep-title { font-weight: 700; color: var(--ink); }
.mkt-prep-topic { flex-basis: 100%; font-size: 14px; color: var(--muted); }
/* Phones, Sprout only: the brand switch took the row the page tabs needed, so
   Review Queue / Ready to Post were squeezed to nothing and the account menu
   ran off the right edge. The page tabs and the switch each drop to their
   own line under the bar, so Ready to Post is never scrolled out of sight. */
@media (max-width:640px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar:has(.brand-switch:not([hidden])) .topnav{order:9;flex-basis:100%}
  .brand-switch:not([hidden]){order:10;margin:0}
  .rev2-chips{flex-wrap:wrap}
}

/* ===================== COMPANY RESEARCH =====================
   research.js. The list reuses the Searcher's one-screen table; the report is a
   document that scrolls. Every chip pairs a dark text colour with a pale fill (or white
   on a dark fill), and "chip" stays in each class name so tables.css leaves the colour
   alone inside a table cell. Status is always written in words, never colour alone. */
#cr-actions{display:flex;align-items:center;gap:12px;height:46px;box-sizing:border-box}
#cr-actions .btn.sm{margin:0}
.view.is-sol #cr-actions{flex:none}
#cr-rows tr[data-id]{cursor:pointer}
#cr-rows tr[data-id] td.col-check{cursor:default}
.cr-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.45;
  white-space:nowrap;vertical-align:middle;background:#E6EEF1;color:#004688}
.data-table .cr-chip{font-size:15px;font-weight:600}
.cr-st-completed,.cr-src-searched{background:#E3F4EC;color:#0B5A3C}
.cr-st-completed_limited,.cr-src-ambiguous{background:#FBF3D6;color:#004688}
.cr-st-unresolved,.cr-src-unavailable{background:#F6E3E1;color:#8A2A1F}
.cr-st-pick,.cr-chg{background:#DCE9F7;color:#4A2A7A}
.cr-src-not_connected,.cr-src-outside_scope,.cr-src-pending{background:#EEEEEE;color:#454B52}
.cr-p-high{background:#8A2A1F;color:#fff}
.cr-p-review{background:#8A5A12;color:#fff}
.cr-p-context{background:#E6EEF1;color:#004688}
.cr-unv{background:#fff;color:#004688;border:1px dashed #8A5A12}
.cr-demo{background:#4A2A7A;color:#fff;margin-left:6px;font-size:14px}
.data-table .cr-demo{font-size:14px}

.view.is-cr{max-width:1060px}

/* ---------- Resume Formatter (resume.js) ---------- */
.view.is-rs{max-width:1400px}
.rs-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:170px;padding:20px;
  border:2px dashed var(--faint);border-radius:var(--radius);background:var(--card);color:var(--ink);text-align:center;cursor:pointer;transition:.12s}
.rs-drop strong{font-size:16px;color:var(--navy)}
.rs-drop span{font-size:14px;color:var(--muted)}
.rs-drop:hover,.rs-drop.over{border-color:var(--navy);background:var(--teal-tint)}
.rs-drop.is-busy{border-style:solid;border-color:var(--line);background:var(--line2);cursor:progress;pointer-events:none}  /* dim the box, never the words */
.rs-status{min-height:22px;margin:10px 0 0;font-size:14px;color:var(--ink)}
.rs-status.is-err{color:var(--danger);font-weight:600}
.rs-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.rs-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.rs-toolbar label{font-size:14px;font-weight:600;color:var(--ink)}
.rs-toolbar select{padding:8px 10px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.rs-file{font-size:14px;color:var(--muted);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-spacer{flex:1}
.rs-work .rs-status{margin:8px 0}
.rs-panes{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:calc(100dvh - var(--topbar-h, 65px) - 230px);min-height:520px}
.rs-pane{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rs-pane-head{padding:10px 16px;font-size:14px;font-weight:700;color:var(--navy);background:var(--line2);border-bottom:1px solid var(--line)}
.rs-pane-head span{margin-left:6px;font-weight:400;color:var(--muted)}
.rs-pane-body{flex:1;min-height:0;overflow:auto;background:#fff}
.rs-frame{display:block;width:100%;height:100%;border:0}
.rs-pad{margin:0;padding:12px 18px 0;font-size:14px}
.rs-hint{color:var(--muted)}
.rs-text{white-space:pre-wrap;padding:12px 18px 18px;font-size:14px;line-height:1.55;color:var(--ink)}
@media (max-width:900px){.rs-panes{grid-template-columns:1fr;height:auto}.rs-pane{height:70vh}}
.cr-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cr-title{flex:1;min-width:260px}
.cr-title h1{font-size:24px}
/* The shared crumb, sub-line, count and tick labels run 13-13.5px elsewhere; here they carry
   report content, so they meet the 14px body floor (ui-check, 2026-10-19). Scoped, so the
   Searcher and the other views keep theirs. */
#cr-report .crumb,#cr-report .sol-sub,#cr-report .sol-chk,#cr-actions .sol-count,#cr-actions .sol-selinfo,
.sol-chk:has(#cr-demo){font-size:14px}
.cr-title .sol-sub .cr-chip{font-size:14px}
.cr-top-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-top-btns select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px;max-width:340px}
.cr-demo-bar{background:#4A2A7A;color:#fff;font-weight:700;border-radius:10px;padding:10px 14px;margin:6px 0 10px;font-size:14.5px}
.cr-disclaim{font-size:14px;color:var(--muted);margin:0 0 16px}
.cr-card,.cr-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:16px}
.cr-card h2,.cr-sec h2{font-size:18px;margin-bottom:10px}
.cr-warnbox{border-color:var(--teal);background:#FFFBF0}
.cr-stage{font-weight:700;color:var(--navy);margin:0 0 4px}
.cr-hint{font-size:14px;color:var(--muted);margin:4px 0 10px;line-height:1.5}
.cr-dim{font-size:14px;color:var(--muted)}
.cr-none{color:var(--muted);font-size:14.5px;margin:0}
.cr-prog{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.cr-prog li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink)}
.cr-prog .cr-chip{min-width:150px;text-align:center}
.cr-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:12px 0 14px}
.cr-cand{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--ink)}
.cr-cand h3{font-size:16px}
.cr-cand b{color:var(--navy)}
.cr-cand .btn{align-self:flex-start;margin-top:6px}
.cr-snap,.cr-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px;margin:0}
.cr-snap dt,.cr-facts dt{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cr-snap dd,.cr-facts dd{margin:1px 0 0;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.cr-internal{grid-column:1/-1;background:var(--shc-grey);border-radius:9px;padding:8px 11px}
.cr-clean{font-size:16px;font-weight:700;color:var(--navy);margin:6px 0}
.cr-mat{margin:8px 0 0;padding-left:22px}
.cr-mat li{margin-bottom:7px;font-size:15px}
.cr-mat a{color:var(--navy);font-weight:600}
.cr-limit{background:#FBF3D6;border-radius:9px;padding:10px 13px;font-size:14.5px;color:var(--navy);margin:12px 0 0}
.cr-gone{margin-top:14px;border-top:1px solid var(--line2);padding-top:10px}
.cr-gone h3{font-size:15px}
.cr-gone ul{margin:4px 0 0;padding-left:20px;font-size:14.5px}
.cr-site{font-size:15.5px;margin:14px 0 8px;color:var(--navy)}
.cr-f{border:1px solid var(--line);border-left:5px solid #C9D6DB;border-radius:12px;margin-top:8px;background:#fff;break-inside:avoid}
.cr-f-high{border-left-color:#8A2A1F}
.cr-f-review{border-left-color:#8A5A12}
.cr-f-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.cr-f h3{font-size:16.5px;margin-bottom:4px}
.cr-sum{font-size:15px;color:var(--ink);margin:0 0 8px;line-height:1.55}
.cr-why{font-size:14.5px;color:var(--ink);margin:0 0 6px}
.cr-why b{color:var(--navy)}
.cr-facts{margin:10px 0}
.cr-srcs h4,.cr-fnotes h4{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin:8px 0 4px}
.cr-srcs ul{margin:0;padding-left:18px}
.cr-srcs li{font-size:14.5px;margin-bottom:6px;overflow-wrap:anywhere}
.cr-srcs a{color:var(--teal-deep);font-weight:600}
.cr-srcnote{display:block;font-size:14px;color:var(--muted)}
.cr-srcs blockquote{margin:4px 0 0;padding:4px 10px;border-left:3px solid var(--line);font-size:14.5px;color:var(--muted);font-style:italic}
.cr-fnotes{margin-top:8px}
.cr-note{background:var(--shc-grey);border-radius:9px;padding:8px 11px;font-size:14.5px;color:var(--ink);margin:6px 0}
.cr-notebox{margin-top:6px}
.cr-covlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cr-covlist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.cr-covlist .cr-chip{min-width:170px;text-align:center;flex:none}
.cr-covlist li div{display:flex;flex-direction:column;gap:2px}
.cr-covlist b{color:var(--navy)}
.cr-form{display:flex;flex-direction:column;gap:14px}
.cr-field{display:flex;flex-direction:column;gap:5px}
.cr-lab{font-size:14px;font-weight:700;color:var(--navy)}
.cr-opt{font-weight:500;color:var(--muted);font-size:14px}
.cr-form input:not([type=checkbox]),.cr-form textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%;box-sizing:border-box}
.cr-form input:focus,.cr-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.cr-form .cr-hint{margin:0}
.cr-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-check{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.cr-check input{margin-top:4px}
#cr-client-only{display:flex;flex-direction:column;gap:14px}
#cr-client-only[hidden]{display:none}
.cr-form .sol-seg button.on{background:var(--navy);color:#fff}
@media (max-width:640px){.cr-two{grid-template-columns:1fr}.cr-covlist li{flex-direction:column;gap:4px}}

/* Report screen, executive layout (Chris, 2026-10-19: "an executive document... the eye is
   drawn to the important parts"). Summary first, then topics, timeline, questions, Ask,
   and every finding as a one-line row that opens to its record. */
.cr-snapcard{padding:16px 20px}
.cr-snapcard h2{margin-bottom:6px}
.cr-snap-desc{font-size:15.5px;line-height:1.5;color:var(--ink);margin:0 0 10px}
.cr-snapcard .cr-snap{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cr-covsum{font-size:15px;color:var(--ink);margin:0 0 12px}
.cr-covmore summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--teal-deep);margin-top:2px}
.cr-covmore div{font-size:14.5px;line-height:1.5;margin-top:4px;display:flex;flex-direction:column;gap:3px}
.cr-more{margin-top:10px}
.cr-more summary,.cr-gone summary{cursor:pointer;font-size:14.5px;font-weight:700;color:var(--navy)}
.cr-more .cr-snap{margin-top:10px}
.cr-summary{border-left:6px solid var(--navy);padding:20px 22px}
.cr-eyebrow{font-size:14px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-soft);margin:0 0 8px!important}
.cr-headline{font-size:20px;line-height:1.45;font-weight:600;color:var(--ink);margin:0 0 14px;max-width:62em}
.cr-tally{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cr-tb{display:inline-flex;align-items:baseline;gap:7px;font:inherit;font-size:14.5px;font-weight:600;border-radius:999px;
  padding:6px 14px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.cr-tb b{font-size:18px}
.cr-tb-high{background:#FBEDEB;color:#8A2A1F;border-color:#EBC9C4}
.cr-tb-review{background:#FFF4E0;color:#6E470E;border-color:#F0D9AE}
.cr-tb-context{background:#EEF3F5;color:#004688;border-color:#D5E0E4}
.cr-tb-warn{background:#FBF3D6;color:#004688;border-color:#F3D58A}
.cr-tb:hover{filter:brightness(.97);border-color:currentColor}
.cr-kps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.cr-kp{border:1px solid var(--line);border-top:4px solid #668491;border-radius:12px;padding:13px 16px 14px;background:#fff;
  display:flex;flex-direction:column;gap:6px;break-inside:avoid}
.cr-kp-high{border-top-color:#8A2A1F}
.cr-kp-review{border-top-color:#B7791F}
.cr-kp h3{font-size:16.5px;line-height:1.3;color:var(--ink);margin:0}
.cr-kp p{font-size:15px;line-height:1.5;color:var(--ink);margin:0;flex:1}
.cr-kp .cr-refs{align-self:flex-start}
.cr-refs,.cr-link{background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:700;color:var(--teal-deep);cursor:pointer;text-align:left}
.cr-refs::after{content:" \2192"}
.cr-refs:hover,.cr-link:hover{text-decoration:underline}
.cr-link{font-size:inherit}
.cr-fine{font-size:14px;color:var(--muted);margin:14px 0 0}
.cr-jump{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:4px 6px;padding:8px 10px;margin:0 0 16px;
  background:rgba(250,247,245,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px}
.cr-jump a{font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;padding:5px 10px;border-radius:8px}
.cr-jump a:hover{background:var(--teal-tint)}
/* the sticky jump bar would otherwise cover the heading it jumped to */
#cr-report [id^="cr-sec-"],#cr-report .cr-f{scroll-margin-top:96px}
.cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cr-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.cr-topic{display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.cr-topic:hover,.cr-topic:focus-visible{border-color:var(--navy);background:#FFFCF5}
.cr-topic:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cr-topic-t{font-size:16px;font-weight:700;color:var(--navy)}
.cr-topic-l{font-size:14.5px;line-height:1.45}
.cr-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2);margin-top:2px}
.cr-bar i{display:block;height:100%}
.cr-bar-high{background:#8A2A1F}.cr-bar-review{background:#B7791F}.cr-bar-context{background:#668491}
.cr-topic-n{font-size:14px;color:var(--muted)}
.cr-tl svg{width:100%;height:auto;display:block}
.cr-tl-axis{stroke:#8FA3AA;stroke-width:1.5}
.cr-tl-yr{font-size:14px;fill:#454B52;text-anchor:middle;font-family:var(--font)}
.cr-tl-dot{cursor:pointer;stroke:#fff;stroke-width:1.5}
.cr-tl-dot:hover,.cr-tl-dot:focus-visible{stroke:var(--navy);stroke-width:3.5;outline:none}
.cr-tl-high{fill:#8A2A1F}.cr-tl-review{fill:#B7791F}.cr-tl-context{fill:#668491}
.cr-tl-tip{min-height:22px;font-size:14.5px;color:var(--ink);margin:6px 0 0}
.cr-tl-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink);margin-top:6px;align-items:center}
.cr-tl-legend span{display:inline-flex;gap:6px;align-items:center}
.cr-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;background:#668491}
.cr-dot-high{background:#8A2A1F}.cr-dot-review{background:#B7791F}
.cr-qs{margin:0;padding-left:24px}
.cr-qs li{font-size:15.5px;line-height:1.5;margin-bottom:10px;color:var(--ink)}
.cr-qs .cr-refs{margin-left:6px;font-size:14px}
.cr-askf{display:flex;gap:8px}
.cr-askf input{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.cr-askf input:focus{outline:2px solid var(--teal);outline-offset:1px}
.cr-sugg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.cr-sg{font:inherit;font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.cr-sg:hover{border-color:var(--navy);background:var(--teal-tint)}
.cr-qa{border-top:1px solid var(--line2);padding:12px 0 2px;margin-top:10px}
.cr-qa-q{margin:0 0 4px;font-size:15px;color:var(--navy)}
.cr-qa-a{margin:0 0 6px;font-size:15px;line-height:1.55;color:var(--ink)}
.cr-all-h{font-size:20px;margin:26px 0 10px}
.cr-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.cr-filters .sol-seg button.on{background:var(--navy);color:#fff}
.cr-filters select,.cr-filters input{font:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.cr-filters input{min-width:180px;flex:1}
.cr-sec-n{display:inline-block;font-size:14px;font-weight:600;color:var(--muted);background:var(--line2);border-radius:999px;padding:1px 9px;vertical-align:middle;margin-left:6px}
.cr-f[hidden],.cr-sitegrp[hidden]{display:none}
.cr-f-row{display:grid;grid-template-columns:11px minmax(0,1fr) auto 14px;gap:12px;align-items:center;width:100%;text-align:left;
  background:none;border:0;padding:11px 14px;font:inherit;color:var(--ink);cursor:pointer;border-radius:10px}
.cr-f-row:hover{background:#FFFCF5}
.cr-f-row:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.cr-f-title{font-size:15.5px;font-weight:600;line-height:1.4}
.cr-f-meta{font-size:14px;color:var(--muted);white-space:nowrap;display:flex;gap:6px;align-items:center}
.cr-f-meta .cr-chip{font-size:14px;padding:1px 8px}
.cr-notechip{background:var(--shc-grey);color:var(--ink)}
.cr-caret{width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.cr-f.is-open .cr-caret{transform:rotate(225deg) translate(-2px,-2px)}
.cr-f-body{padding:2px 18px 14px 37px}
.cr-f-body[hidden]{display:none}
@keyframes crflash{from{background:#F5E3A3}to{background:#fff}}
.cr-flash{animation:crflash 1.8s ease-out}
.cr-hidden-n{font-size:14px;color:var(--muted);margin:10px 0 0}
.cr-sitegrp .cr-site{margin-top:14px}
@media (max-width:640px){
  .cr-f-row{grid-template-columns:11px minmax(0,1fr) 14px}
  .cr-f-meta{grid-column:2;grid-row:2;white-space:normal;flex-wrap:wrap}
  .cr-caret{grid-column:3;grid-row:1}
  .cr-f-body{padding-left:16px}
  .cr-headline{font-size:18px}
  .cr-askf{flex-direction:column}
  .cr-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cr-jump a{white-space:nowrap}
  #cr-report [id^="cr-sec-"],#cr-report .cr-f{scroll-margin-top:64px}
  /* the timeline keeps its full width and scrolls sideways, so year labels stay 14px */
  .cr-tl{overflow-x:auto}
  .cr-tl svg{min-width:920px}
}
@media print{
  body.cr-printing .histpanel,body.cr-printing #cr-back,body.cr-printing .cr-top-btns,body.cr-printing .cr-noprint,
  body.cr-printing .account-slot,body.cr-printing #accountmenu{display:none!important}
  body.cr-printing.cr-hide-notes .cr-note,body.cr-printing.cr-hide-notes .cr-notes-sec,
  body.cr-printing.cr-hide-notes .cr-internal{display:none!important}
  body.cr-printing .view.is-cr{max-width:none;padding:0}
  body.cr-printing .cr-card,body.cr-printing .cr-sec{box-shadow:none;break-inside:auto}
  body.cr-printing .cr-srcs a::after{content:" (" attr(href) ")";font-weight:400;color:var(--muted);font-size:12px}
  body.cr-printing .cr-chip,body.cr-printing .cr-dot,body.cr-printing .cr-bar i,body.cr-printing .cr-tb,body.cr-printing .cr-kp,
  body.cr-printing .cr-tl{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.cr-printing .cr-f[hidden],body.cr-printing .cr-sitegrp[hidden],body.cr-printing .cr-f-body[hidden]{display:block!important}
  body.cr-printing .cr-caret,body.cr-printing .cr-refs,body.cr-printing .cr-tl-tip{display:none!important}
  body.cr-printing .cr-f-row{padding:8px 12px}
  body.cr-printing .cr-topic{break-inside:avoid}
}

/* ---------- Resume Formatter: layouts (admins) ---------- */
.ly-h2{font-size:16px;color:var(--navy);margin:18px 0 8px}
.ly-lead,.ly-empty{margin:0 0 10px;font-size:14px;color:var(--muted)}
.ly-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.ly-card-main{flex:1;min-width:0}
.ly-card-name{font-size:15px;font-weight:700;color:var(--ink)}
.ly-card-desc{font-size:14px;color:var(--ink);margin-top:2px}
.ly-card-meta{font-size:13px;color:var(--muted);margin-top:4px}
.ly-card-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ly-edit{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:16px;align-items:start}
.ly-form{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  max-height:calc(100dvh - var(--topbar-h, 65px) - 150px);overflow:auto}
.ly-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.ly-form input[type=text],.ly-form select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;color:var(--ink);background:#fff;min-width:0}
.ly-form input:focus,.ly-form select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.ly-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ly-set{border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:9px;min-width:0}
.ly-set legend{padding:0 4px;font-size:13px;font-weight:700;color:var(--ink)}
.ly-form label.ly-check{flex-direction:row;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.ly-check input{width:17px;height:17px;accent-color:var(--teal-deep);flex:0 0 auto}
.ly-colour{display:flex;align-items:center;gap:10px}
.ly-colour[hidden]{display:none}
.ly-colour input[type=color]{width:46px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ly-colour input[type=text]{width:110px}
.ly-note{margin:0;font-size:13px;color:var(--muted)}
.ly-note.is-err{color:var(--danger);font-weight:600}
.ly-head-btns{display:flex;gap:8px;flex-wrap:wrap}
.ly-learn{background:var(--shc-grey)}
.ly-notes{margin:6px 0 0;padding-left:18px;color:var(--ink)}
.ly-file.is-busy{background:var(--line2);cursor:progress;pointer-events:none}  /* dim the box, never the words */
.ly-head-btns .btn:disabled{opacity:1;color:var(--muted);background:var(--line2);border-color:var(--line)}
.ly-logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ly-logo-box{width:150px;height:60px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:8px;background:#fff;overflow:hidden}
.ly-logo-box img{max-width:140px;max-height:52px}
.ly-logo-box span{font-size:13px;color:var(--muted)}
.ly-form label.ly-file{flex-direction:row;color:var(--ink);font-size:13px;cursor:pointer}
.ly-sec{display:grid;grid-template-columns:132px 1fr auto auto;align-items:center;gap:8px}
.ly-sec-name{font-size:14px;color:var(--ink)}
.ly-sec .btn{padding:5px 10px}
.ly-sec .btn:disabled{opacity:1;color:var(--muted);background:var(--line2)}
.ly-actions{display:flex;gap:9px;align-items:center;position:sticky;bottom:-18px;margin:0 -18px -18px;padding:12px 18px;background:var(--card);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}  /* Save stays in reach while the form scrolls */
.ly-preview{height:calc(100dvh - var(--topbar-h, 65px) - 150px);min-height:520px}
@media (max-width:900px){.ly-edit{grid-template-columns:1fr}.ly-form{max-height:none}.ly-preview{height:70vh}.ly-card{flex-wrap:wrap}}
@media (max-width:420px){.ly-two{grid-template-columns:1fr}.ly-sec{grid-template-columns:1fr auto auto}.ly-sec .ly-check{grid-column:1 / -1}}