/* Bridge Chartering — additions on top of the reference design system.
   Uses the same tokens (--navy, --sand, --live, ...) defined in reference.css. */

/* ---------- buttons ---------- */
.ghostbtn{background:var(--paper);border:1px solid var(--line);color:var(--navy);font-size:13px;
  font-weight:600;padding:9px 15px;border-radius:10px;transition:.14s;display:inline-flex;align-items:center;gap:7px}
.ghostbtn:hover{border-color:var(--steel2);box-shadow:var(--shadow)}
.ghostbtn:disabled{opacity:.5;cursor:default}
.dangerbtn{color:#b0613e}
.tinybtn{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:7px;background:var(--sand2);
  border:1px solid var(--line2);color:var(--navy);transition:.12s}
.tinybtn:hover{background:var(--sand);border-color:var(--line)}
.tinybtn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.tinybtn.primary:hover{background:var(--navy2)}

/* ---------- chartering sub-tabs ---------- */
.subtabs{display:flex;gap:6px;margin:4px 0 18px;flex-wrap:wrap;border-bottom:1px solid var(--line2);padding-bottom:0}
.subtab{font-size:13px;font-weight:600;color:#8a93a3;padding:9px 14px;border-radius:9px 9px 0 0;
  border-bottom:2px solid transparent;transition:.13s;display:inline-flex;align-items:center;gap:7px}
.subtab:hover{color:var(--navy)}
.subtab.on{color:var(--navy);border-bottom-color:var(--live)}
.tabct{font-size:10.5px;font-weight:700;background:var(--sand);color:#6a7280;border-radius:9px;
  padding:1px 7px;min-width:16px;text-align:center}
.tabct:empty{display:none}
.subtab.on .tabct{background:var(--livebg);color:var(--live)}
.chpane{display:none}
.chpane.on{display:block;animation:fadein .3s ease}

/* ---------- item cards ---------- */
.itemgrid{display:flex;flex-direction:column;gap:10px}
.itemcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.15s}
.itemcard:hover{border-color:#cfd8e4}
.itemcard .ih{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.itemcard .ttl{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.itemcard .meta{font-size:11.5px;color:#8a93a3;margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.itemcard .acts{display:flex;gap:7px;flex-wrap:wrap;flex:none;align-items:center}
.itemcard .ibody{display:none;margin-top:12px;border-top:1px dashed var(--line2);padding-top:12px}
.itemcard.openit .ibody{display:block}
.expander{font-size:12px;font-weight:600;color:var(--steel);background:none;padding:4px}
.expander:hover{color:var(--navy)}

/* lifecycle badges */
.st{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase}
.st-new{background:#e8eef7;color:#3a567f}
.st-open{background:var(--livebg);color:var(--live)}
.st-matched{background:#f4ecdc;color:#8a6a26}
.st-in_negotiation{background:var(--warnbg);color:var(--warn)}
.st-fixed{background:#e7f1ee;color:#2f7d6b}
.st-withdrawn{background:#f0ede6;color:#a39a86}
.st-expired{background:#f8ece6;color:#b0613e}

/* confidence tiers — qualitative, deliberately not a percentage */
.conf{font-family:'Fraunces',serif;font-weight:600;font-size:15px;letter-spacing:-.01em}
.conf-High{color:var(--live)} .conf-Medium{color:var(--gold)} .conf-Low{color:#b06a4e}
.conf small{font-family:'Inter';font-size:10px;color:#9aa2b1;font-weight:500;display:block;letter-spacing:.06em;text-transform:uppercase}

.origin-badge{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;background:#eef1f7;color:#3a567f;letter-spacing:.03em}

/* Vetting Flag pill (build reference §2) — commercial PSC/detention risk read,
   never presented as gospel, so styled as a hint chip, not a pass/fail stamp. */
.vet{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;letter-spacing:.03em;cursor:help}
.vet-elevated_risk{background:#f8ece6;color:#b0613e}
.vet-normal{background:var(--livebg);color:var(--live)}
.vet-insufficient_data{background:var(--sand2);color:#8a93a3}
.vetbox{background:var(--paper);border:1px solid var(--line2);border-radius:10px;padding:12px 13px;margin-bottom:4px}
.vetbox .facts{margin-top:8px}
.vetbox .rationale{margin-top:0}

/* S&P module (build reference §3) — reuses .itemcard/.kvgrid/.sect etc.
   from the chartering module; only the doc-type pill and pane class are new. */
.sppane{display:none}
.sppane.on{display:block;animation:fadein .3s ease}
.doctype{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;letter-spacing:.03em;text-transform:uppercase}
.doctype-recap{background:#e8eef7;color:#3a567f}
.doctype-moa{background:var(--livebg);color:var(--live)}
.doctype-other{background:var(--sand2);color:#8a93a3}

/* fields grid inside item detail */
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px 18px;margin:10px 0}
.kv{font-size:12.5px}
.kv .k{color:#9aa2b1;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.kv .v{color:var(--ink);font-weight:500;margin-top:1px}
.rawmail{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11.5px;line-height:1.6;color:#5d6577;
  background:var(--sand2);border:1px solid var(--line2);border-radius:9px;padding:11px 13px;white-space:pre-wrap;
  max-height:180px;overflow-y:auto;margin-top:8px}
.sect{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:600;margin:16px 0 8px;
  display:flex;align-items:center;gap:10px}
.sect::after{content:"";flex:1;height:1px;background:var(--line2)}

/* deep link chips */
.linkchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--navy);
  background:var(--sand2);border:1px solid var(--line2);padding:4px 10px;border-radius:7px;text-decoration:none;transition:.12s}
.linkchip:hover{border-color:var(--steel2)}
.linkchip svg{width:12px;height:12px;flex:none}
.linknote{font-size:11.5px;color:#9aa2b1;font-style:italic;display:inline-flex;align-items:center;gap:6px}

/* prefilter audit rows */
.pfrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line2);font-size:12.5px}
.pfrow:last-child{border-bottom:none}
.pfflag{flex:none;font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;margin-top:1px;letter-spacing:.03em}
.pfflag.pass{background:var(--livebg);color:var(--live)}
.pfflag.fail{background:#f8ece6;color:#b0613e}
.pfrow .who{font-weight:600;color:var(--ink)}
.pfrow .why{color:#6a7280;margin-top:2px;line-height:1.45}
.pfrule{font-size:10px;font-weight:700;color:#9aa2b1;text-transform:uppercase;letter-spacing:.05em;margin-left:6px}

/* pairing cards (matches view + item detail) */
.pairingcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:11px}
.pairingcard.ismatch{border-color:#cfdcd6;background:linear-gradient(180deg,#fafdfb,var(--paper))}
.pairingcard .ph2{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.pairingcard .pair{font-weight:600;font-size:14px;color:var(--navy)}
.pairingcard .pair .vs{color:#b9c0cc;font-weight:400;font-size:11.5px;margin:0 6px}
.pairingcard .verdict-line{display:flex;align-items:center;gap:10px;flex:none}
.vbadge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:5px;letter-spacing:.05em;text-transform:uppercase}
.vbadge.match{background:var(--livebg);color:var(--live)}
.vbadge.reject{background:#f8ece6;color:#b0613e}
.pairingcard .facts{margin-bottom:10px}
.pairingcard .foot2{margin-top:11px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pairingcard .srclinks{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* draft output */
.draftbox{margin-top:11px;border:1px solid #cfdcd6;border-radius:10px;overflow:hidden}
.draftbox .dsubj{background:var(--sand2);border-bottom:1px solid var(--line2);padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--ink)}
.draftbox .dtext{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;line-height:1.6;color:#3a4254;
  padding:12px 13px;white-space:pre-wrap;background:var(--paper)}
.draftbox .dfoot{padding:8px 13px;border-top:1px solid var(--line2);display:flex;gap:8px;align-items:center;background:#fbfdfc}
.draftbox .dnote{font-size:11px;color:#8a93a3;margin-left:auto}

/* filter bar (working pool / history) */
.filterbar{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.filterbar input,.filterbar select{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-family:inherit;
  font-size:13px;background:var(--paper);outline:none;color:var(--ink)}
.filterbar input:focus,.filterbar select:focus{border-color:var(--steel2)}

/* empty states */
.emptystate{padding:36px 20px;text-align:center;color:#8a93a3;font-size:13px;background:var(--paper);
  border:1px dashed var(--line);border-radius:12px;line-height:1.6}
.emptystate b{color:var(--navy)}

/* ---------- bell + notification panel ---------- */
.bellbtn{position:relative;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--navy);border:1px solid var(--line);background:var(--paper);transition:.13s}
.bellbtn:hover{border-color:var(--steel2)}
.bellct{position:absolute;top:-5px;right:-5px;background:#c2553a;color:#fff;font-size:9.5px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notipanel{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:94vw;background:var(--paper);
  box-shadow:-12px 0 40px rgba(17,35,63,.16);transform:translateX(100%);transition:.24s cubic-bezier(.4,0,.2,1);
  z-index:45;display:flex;flex-direction:column}
.notipanel.on{transform:none}
.notiact{padding:11px 20px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.noti{border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#3a4254;position:relative;
  overflow-wrap:anywhere;word-break:break-word}
.noti.unread{border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.noti .nh{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.noti .ntime{font-size:10.5px;color:#9aa2b1;margin-left:auto}
.nkind{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.05em;text-transform:uppercase}
.nkind.instant{background:var(--livebg);color:var(--live)}
.nkind.digest{background:var(--warnbg);color:var(--warn)}
.nkind.queued{background:#f0ede6;color:#a39a86}

/* ---------- modal ---------- */
.mscrim{position:fixed;inset:0;background:rgba(17,35,63,.35);backdrop-filter:blur(2px);z-index:55}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:620px;max-width:94vw;max-height:88vh;
  overflow-y:auto;background:var(--paper);border-radius:15px;box-shadow:0 24px 70px rgba(17,35,63,.3);z-index:56;padding:22px 24px}
.modal h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--navy);margin-bottom:6px}
.modal .msub{font-size:12.5px;color:#8a93a3;margin-bottom:14px;line-height:1.5}
.modal textarea{width:100%;min-height:170px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;line-height:1.55;resize:vertical;outline:none;background:#fdfdfb}
.modal textarea:focus{border-color:var(--steel2)}
.modal select,.modal input[type=text],.modal input[type=number]{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-family:inherit;font-size:13px;background:var(--paper);outline:none;margin-top:4px}
.modal label{font-size:11.5px;font-weight:600;color:var(--steel);letter-spacing:.04em;text-transform:uppercase;display:block;margin-top:13px}
.modal .mfoot{display:flex;gap:9px;margin-top:18px;align-items:center}
.modal .mnote{font-size:11.5px;color:#9aa2b1;line-height:1.5;background:var(--sand2);border:1px solid var(--line2);
  border-radius:8px;padding:9px 12px;margin-top:12px}

/* ---------- usage & settings tables ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.dtable-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--paper)}
.dtable-wrap table{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable-wrap th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);font-weight:600;
  text-align:left;padding:10px 14px;background:var(--sand2);border-bottom:1px solid var(--line2);white-space:nowrap}
.dtable-wrap td{padding:9px 14px;border-bottom:1px solid var(--line2);color:#3a4254;vertical-align:top}
.dtable-wrap tr:last-child td{border-bottom:none}
.dtable-wrap td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

.setform{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 22px;max-width:560px}
.setform .row2{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line2)}
.setform .row2:last-of-type{border-bottom:none}
.setform .sl2{font-size:13.5px;font-weight:600;color:var(--ink)}
.setform .sd2{font-size:12px;color:#8a93a3;margin-top:3px;line-height:1.5;max-width:340px}
.setform select,.setform input{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-family:inherit;
  font-size:13px;background:var(--paper);outline:none;min-width:120px}
.modebadge{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.04em}
.modebadge.mock{background:var(--warnbg);color:var(--warn)}
.modebadge.live{background:var(--livebg);color:var(--live)}

/* MOA draft generator (Bridge_SP_MOA_Build_Spec.md) — fill engine output
   lives inside the S&P deal detail. Checklist groups mirror the vetting
   pill palette: missing=red, non-standard=gold, deadline=blue-neutral. */
.moapanel{margin-top:4px}
.moatop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.moadraft{background:var(--paper);border:1px solid var(--line2);border-radius:10px;padding:13px 15px;margin-top:10px}
.moameta{display:flex;gap:12px;font-size:11px;color:#9aa2b1;margin-bottom:10px;letter-spacing:.02em}
.moameta span:first-child{font-weight:700;color:var(--navy)}

.checklist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.clgroup{border-radius:9px;padding:9px 12px}
.clhead{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.clrow{font-size:12.5px;line-height:1.5;padding:3px 0}
.clrow:not(:last-child){border-bottom:1px dashed rgba(0,0,0,.06)}
.cl-missing{background:#f8ece6}
.cl-missing .clhead{color:#b0613e}
.cl-missing .clrow{color:#8a5140}
.cl-non_standard{background:var(--warnbg)}
.cl-non_standard .clhead{color:var(--warn)}
.cl-non_standard .clrow{color:#8a6a26}
.cl-deadline{background:#e8eef7}
.cl-deadline .clhead{color:#3a567f}
.cl-deadline .clrow{color:#3a4254}

.ackrow{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink);line-height:1.5;
  cursor:pointer;margin-bottom:11px}
.ackrow input{margin-top:2px;flex:none}
.moaacts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Vetting Desk (VETTING_DESK_SPEC.md) — standalone premium module, peer to
   S&P. Own input panel (paste/PDF tabs) since screening is the whole view,
   not a modal action; result renders below once a screen completes. */
.vdinput{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin-bottom:18px}
.vdtabs{display:flex;gap:6px;margin-bottom:14px}
.vdpane{display:none}
.vdpane.on{display:block}
.vdpane textarea{width:100%;min-height:160px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;line-height:1.55;resize:vertical;outline:none;background:#fdfdfb}
.vdpane textarea:focus{border-color:var(--steel2)}
.vdupload{display:flex;align-items:center;gap:12px;padding:20px;border:1px dashed var(--line);border-radius:10px;background:var(--sand2)}
.vdfoot{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}

.vdresult{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin-top:6px}
.vdkv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px 18px;margin:10px 0}
.vdcontingency{font-size:12px;color:var(--warn);background:var(--warnbg);border-radius:8px;padding:8px 12px;margin-top:6px}

.vdheadline{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--navy);margin:8px 0 6px}
.vdread{font-size:13px;line-height:1.6;color:#3a4254;margin-bottom:12px}
.vddisprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.disppill{font-size:11px;font-weight:700;padding:4px 11px;border-radius:6px;letter-spacing:.03em}
.disp-proceed{background:var(--livebg);color:var(--live)}
.disp-note{background:var(--warnbg);color:var(--warn)}
.disp-query{background:#e8eef7;color:#3a567f}
.disp-caution{background:#f8ece6;color:#b0613e}
.vdconf{font-size:12px;color:#8a93a3;font-style:italic}

.vdwatch{margin:8px 0 4px;padding-left:20px;font-size:13px;line-height:1.7;color:#3a4254}

.vdfindings{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.vdfinding{border:1px solid var(--line2);border-radius:10px;padding:11px 13px;background:var(--sand2)}
.vdfhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chanpill{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;letter-spacing:.03em;text-transform:uppercase;
  background:#eef1f7;color:#3a567f}
.vdref{font-size:11.5px;color:#8a93a3;font-weight:600}
.vdopresp{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;margin-left:auto}
.vdopresp.yes{background:var(--livebg);color:var(--live)}
.vdopresp.no{background:#f8ece6;color:#b0613e}
.vdfarea{font-size:12px;color:#6a7280;font-weight:600;margin-bottom:3px}
.vdfcomment{font-size:12.5px;line-height:1.5;color:var(--ink)}

.vdnotes{font-size:11.5px;color:#9aa2b1;font-style:italic;margin-top:12px;line-height:1.5}
.vddisclaimer{font-size:11px;color:#9aa2b1;line-height:1.5;background:var(--sand2);border:1px solid var(--line2);
  border-radius:8px;padding:10px 13px;margin-top:14px}
.vdacts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}

.vdhistory{background:#e8eef7;border-radius:10px;padding:11px 13px;margin-bottom:16px}
.vdhisthead{font-size:11.5px;font-weight:700;color:#3a567f;margin-bottom:6px}
.vdhistlist{display:flex;flex-direction:column;gap:3px}
.vdhistrow{display:flex;gap:14px;font-size:12px;color:#3a4254}
.vdhistrow span:first-child{color:#6a7280;min-width:110px}

/* Demolition recycling-economics (Bridge_Demolition_Build_Spec.md) — a
   FEATURE inside S&P, not a standalone module: lives as a third subtab
   inside #sp-tabs. Persistent worksheet form (not a modal) for the same
   reason as Vetting Desk's paste panel — entering the numbers IS the
   primary action. Reuses .sect/.vdheadline/.vdread/.vdconf/.vdwatch/
   .vddisclaimer/.vdacts/.tinybtn from elsewhere in this file rather than
   duplicating those rules. */
.dminput{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin-bottom:18px}
.dmrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 16px;margin-bottom:6px}
.dmfield label{font-size:11px;font-weight:600;color:var(--steel);letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:5px}
.dmfield input,.dmfield select{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font-size:13px;outline:none;background:#fdfdfb}
.dmfield input:focus,.dmfield select:focus{border-color:var(--steel2)}

.dmprices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 16px;margin-bottom:6px}
.dmprices .dmfield label{font-weight:700}

.dmdeductions{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.dmdedrow{display:grid;grid-template-columns:1fr 150px 130px auto;gap:9px;align-items:center}
.dmdedrow input[type=text]{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;background:#fdfdfb}
.dmdedrow select{border:1px solid var(--line);border-radius:9px;padding:8px 9px;font-size:12.5px;background:#fdfdfb}
.dmdedrow input[type=number]{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;background:#fdfdfb;text-align:right}

.dmfoot{display:flex;align-items:center;gap:12px;margin-top:15px;flex-wrap:wrap}

.dmresult{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin-top:6px}
.dmtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.dmtable th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#8a93a3;
  font-weight:700;padding:6px 10px;border-bottom:1px solid var(--line2)}
.dmtable td{padding:8px 10px;border-bottom:1px solid var(--line2);color:var(--ink)}
.dmtable tr.dmrow-ineligible td{color:#9aa2b1}
.dmeligpill{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:5px;letter-spacing:.03em}
.dmeligpill.yes{background:var(--livebg);color:var(--live)}
.dmeligpill.no{background:#f8ece6;color:#b0613e}
.dmreason{font-size:10.5px;color:#9aa2b1;margin-top:3px;line-height:1.4;max-width:320px}

.dmbestline{font-size:12.5px;color:#3a4254;margin-top:12px;padding:10px 13px;background:var(--sand2);
  border-radius:8px}

.dmleanline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.dmleanpill{font-size:11px;font-weight:700;padding:4px 11px;border-radius:6px;letter-spacing:.03em;text-transform:capitalize}
.dmlean-scrap-favourable{background:var(--livebg);color:var(--live)}
.dmlean-marginal{background:var(--warnbg);color:var(--warn)}
.dmlean-trade-on-favourable{background:#e8eef7;color:#3a567f}

/* Billing / modules page rebuild (Bridge_Build2_Billing_Rebuild_Spec.md) —
   extends reference.css's .entcard/.entrow/.eg/.price/.st (which only
   supported a flat two-state live/lock badge) with: nested add-on rows,
   a fourth "available" state, an add-on tag, an upgrade affordance, and a
   one-time setup line. Status is rendered purely from billing.js's config
   — no entitlement enforcement lives here (that's Build 3). */
.entrow.addon{padding-left:52px;background:var(--sand2)}
.entrow.addon .eg{width:30px;height:30px}
.entrow.addon .ei .en{font-size:13px;font-weight:500}
.addontag{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a93a3;
  background:var(--sand);border-radius:5px;padding:1.5px 6px;margin-right:7px;vertical-align:1px}
.tiernote{font-size:11px;color:#9aa2b1;margin-top:3px;line-height:1.5}

.entrow .eg.avail{background:#eef1f7;color:#3a567f}
.entrow .price .st.included{color:var(--live)}
.entrow .price .st.active{color:var(--live)}
.entrow .price .st.available{color:#3a567f}
.entrow .price .st.locked{color:var(--lock)}
.upgradebtn{font-size:11px;font-weight:600;color:var(--navy);background:var(--sand);border:1px solid var(--line2);
  border-radius:7px;padding:3px 9px;margin-top:5px;transition:.12s}
.upgradebtn:hover{background:var(--sand2);border-color:var(--steel2)}

.entrow.onetime{background:var(--paper);border:1px dashed var(--line);border-radius:11px}
.entrow.onetime .price .st.onetime{color:var(--steel);font-weight:600}

/* Entitlement locking (Bridge_Build3_Entitlement_Lock_Spec.md) — the
   greyed/locked state shown in place of a premium add-on's real UI
   (Vetting Flag panel, MOA generator panel, Demolition subtab) whenever
   isEntitled() is false. One shared block (entitlements.js's
   lockedPanelHtml()) reused across all three, so they look consistent. */
.vet-locked{background:var(--lockbg);color:var(--lock)}
.lockedpanel{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:16px 18px;color:#6a7280}
.lockedhead{display:flex;align-items:center;gap:10px;color:var(--lock)}
.lockedname{font-size:14px;font-weight:600;color:var(--ink);margin-left:2px}
.lockeddesc{font-size:12.5px;line-height:1.6;color:#8a93a3;margin:9px 0 12px}

/* Hidden admin demo toggle (Bridge_Build3b_Admin_Toggle_Spec.md) -- only
   ever in the DOM behind ?admin=1 (see entitlements.js). Deliberately
   styled unlike any real product chrome (dashed amber border, fixed
   corner) so it reads as an internal tool, never mistaken for a feature a
   prospect might see. */
.adminpanel{position:fixed;bottom:16px;right:16px;z-index:80;background:#fffaf0;
  border:1.5px dashed var(--warn);border-radius:11px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(17,35,63,.18);min-width:240px}
.adminhead{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);margin-bottom:8px}
.adminrow{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px dashed var(--line2)}
.adminrow:first-of-type{border-top:none}
.adminname{font-size:12.5px;font-weight:600;color:var(--ink);flex:1}
.adminstatus{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em}
.adminstatus.active{background:var(--livebg);color:var(--live)}
.adminstatus.locked{background:var(--lockbg);color:var(--lock)}
.admintogglebtn{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;
  background:var(--sand);border:1px solid var(--line2);color:var(--navy)}
.admintogglebtn:hover{background:var(--sand2);border-color:var(--steel2)}
.admintogglebtn:disabled{opacity:.5}

@media(max-width:760px){
  .modal{width:94vw}
  .runbar{gap:8px}
  .dmdedrow{grid-template-columns:1fr;gap:6px}
  .entrow.addon{padding-left:30px}
}

/* ============ LOGIN ============
   Sits above everything (z-index over the modal scrim at 55) because it is not
   a dialog over the app -- it is what stands in front of the app when there is
   no session. Fixed and full-viewport so no part of the shell is readable or
   clickable behind it. */
.loginview{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:var(--navy,#11233f);padding:24px}
.loginbox{width:380px;max-width:94vw;background:#fff;border-radius:14px;padding:30px 28px 24px;
  box-shadow:0 24px 60px rgba(6,16,32,.42)}
.loginmark{display:flex;align-items:baseline;gap:7px;margin-bottom:18px}
.loginmark .b{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--navy,#11233f)}
.loginmark .by{font-size:12px;color:#7d8ba1}
.loginbox h1{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--navy,#11233f);margin-bottom:4px}
.loginsub{font-size:13px;color:#6b7a90;margin-bottom:20px}
.loginbox label{display:block;font-size:12px;font-weight:600;color:#48566b;margin-bottom:5px}
.loginbox input{width:100%;padding:10px 12px;border:1px solid #d5dce6;border-radius:8px;font-size:14px;
  margin-bottom:14px;font-family:inherit;color:var(--navy,#11233f);background:#fff}
.loginbox input:focus{outline:none;border-color:#4a7fc1;box-shadow:0 0 0 3px rgba(74,127,193,.16)}
.loginerr{background:#fdeceb;border:1px solid #f2c4c0;color:#9c2a20;border-radius:8px;
  padding:9px 11px;font-size:13px;margin-bottom:14px}
.loginbox button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--navy,#11233f);
  color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
.loginbox button:hover{background:#1b3358}
.loginbox button:disabled{opacity:.6;cursor:default}
.loginfoot{font-size:11.5px;color:#8b98ab;margin-top:16px;line-height:1.5}
.tenant .signout{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.72);border-radius:6px;padding:4px 8px;font-size:11px;font-family:inherit;cursor:pointer}
.tenant .signout:hover{border-color:rgba(255,255,255,.45);color:#fff}

/* ===== Operator dashboard (ops.js) =====
   FOUR SEVERITIES, FOUR TREATMENTS. Three greys would defeat the point of
   separating the evidence cases at all: an operator acts differently on
   "never came up" (fix the service definition) than on "too early to tell"
   (wait) than on "you switched this off" (decide whether you meant to).
   `unproven` is hatched rather than merely pale, so it reads as NOT MEASURED
   rather than as a muted version of fine. */
.opsheadline{font-size:23px;font-weight:650;letter-spacing:-.01em;padding:14px 18px;
  border-radius:12px;border:1px solid var(--line);margin-top:18px}
.opsheadline.ok{background:var(--livebg);color:var(--live);border-color:#cfe3dc}
.opsheadline.bad{background:var(--alertbg);color:var(--alert);border-color:#eccfcf}
.opsheadline.unproven{background:var(--sand2);color:var(--steel);
  border-style:dashed;border-color:var(--steel2)}

.opsmeta{font-size:12px;color:var(--steel);margin:8px 2px 0}
.stalebanner{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  font-weight:600;background:var(--alertbg);color:var(--alert);border:1px solid #eccfcf}
/* The whole page dims when its own figures are stale, so a frozen board cannot
   be mistaken for a calm one at a glance across a room. */
#v-ops.stalepage .opsrows,#v-ops.stalepage .opsheadline,
#v-ops.stalepage .factstrip,#v-ops.stalepage .opsmeasure{opacity:.45;filter:grayscale(.6)}

.opsrows{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opsrow{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.opsrow[data-severity="unproven"]{border-style:dashed;border-color:var(--steel2);
  background:repeating-linear-gradient(135deg,var(--sand2),var(--sand2) 7px,var(--paper) 7px,var(--paper) 14px)}
.opshead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.opsname{font-weight:640;color:var(--navy)}
.opssentence{margin-top:7px;font-size:13.5px;color:var(--ink);line-height:1.5}
.opsrunbook{margin-top:6px;font-size:11.5px;color:var(--steel);font-style:italic}

.sevchip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px}
.sevchip.ok{background:var(--livebg);color:var(--live)}
.sevchip.bad{background:var(--alertbg);color:var(--alert)}
.sevchip.known{background:var(--warnbg);color:var(--warn)}
.sevchip.unproven{background:transparent;color:var(--steel);
  border:1px dashed var(--steel2)}

/* The evidence label is SERVER TEXT. It exists because severity cannot carry
   the distinction: no_clock and polling_switched_off are both `unproven`. */
.evchip{font-size:11px;color:var(--navy);background:var(--sand);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px}

.mockband{margin-top:16px;padding:13px 16px;border-radius:11px;font-weight:640;font-size:14px;
  background:var(--warnbg);color:var(--warn);border:2px solid var(--gold)}
.opsmeasure{margin-top:14px;font-size:13px;color:var(--ink);background:var(--sand2);
  border:1px solid var(--line2);border-radius:10px;padding:11px 14px}
.factstrip{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--steel);
  border-top:1px solid var(--line2);padding-top:11px}
.factstrip b{color:var(--navy);font-weight:600}

/* ===== Mail status (client_status.js) =====
   The desk's own view. Two states only -- flowing or not -- because the client
   cannot act on the difference between `blind` and `never_came_up`, and a page
   offering them four shades of uncertainty is a page that worries them without
   telling them anything. The sentence carries the detail. */
.mailstate{border-radius:12px;border:1px solid var(--line);padding:16px 18px;margin-top:18px}
.mailstate.ok{background:var(--livebg);border-color:#cfe3dc}
.mailstate.bad{background:var(--alertbg);border-color:#eccfcf}
.mailhead{font-size:20px;font-weight:650;letter-spacing:-.01em}
.mailstate.ok .mailhead{color:var(--live)}
.mailstate.bad .mailhead{color:var(--alert)}
.mailsentence{margin-top:7px;font-size:14px;line-height:1.55;color:var(--ink)}
.mailmeta{margin-top:8px;font-size:12px;color:var(--steel)}
.mailcard{margin-top:12px;background:var(--paper);border:1px solid var(--line);
  border-radius:11px;padding:14px 16px}
.mailcardhead{font-weight:640;color:var(--navy);font-size:13.5px}
.mailcard .ghostbtn{margin-top:10px}
.mailasof{margin-top:14px;font-size:12px;color:var(--steel);text-align:right}