:root{
  --navy:#11233f; --navy2:#1a3155; --steel:#5b7196; --steel2:#8499b8;
  --sand:#e9e2d3; --sand2:#f4efe5; --paper:#fbfaf6; --ink:#16202e;
  --line:#dcd6c8; --line2:#e7e2d6;
  --live:#2f7d6b; --livebg:#e7f1ee; --livedot:#34a085;
  --lock:#9a917f; --lockbg:#f1ede3;
  --alert:#a33a3a; --alertbg:#f7e6e6; --gold:#b08a3e; --warn:#9a6b1a; --warnbg:#f6ecd5;
  --shadow:0 1px 2px rgba(17,35,63,.04),0 8px 28px rgba(17,35,63,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--sand2);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}
::selection{background:var(--navy);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}

/* ============ RAIL ============ */
.rail{background:var(--navy);color:#cdd6e4;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
/* align-items is CENTRE, not baseline: baseline aligns the text of the two
   spans, which does nothing useful once the first child is an image and
   leaves the mark sitting on the text's baseline rather than beside it.
   Explicit width/height on the <img> carry the INTRINSIC 83x80 so the
   browser reserves the right box before the file lands; height:40px here
   is the display size and width:auto keeps the aspect ratio exact. */
.brand .mark{display:flex;align-items:center;gap:9px}
.brand .mark .logo{height:40px;width:auto;display:block;flex:none}
.brand .b{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:#fff;letter-spacing:-.01em}
.brand .by{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel2);font-weight:600}
.brand .sub{font-size:11px;color:var(--steel);margin-top:5px;letter-spacing:.02em}
.tenant{padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:11px}
/* margin-top:auto pins the footer to the BOTTOM of the rail rather than
   letting it sit directly under the nav. Without it a short viewport
   leaves Sign out floating mid-rail, and a tall one leaves it stranded
   far above the fold. Verified at 600px and 720px. */
/* STICKY AS WELL AS margin-top:auto, and the 600px check is what found it.
   margin-top:auto pins the footer below the content; it does NOT keep it
   on screen once the content exceeds the rail. Measured at 600px: the rail
   scrolled (666px of content) and Sign out sat 51.9px BELOW THE FOLD --
   tucked away had become undiscoverable, which is a different defect from
   the one being fixed. sticky bottom:0 keeps it in view at any height; the
   background is opaque so scrolling content does not run underneath it. */
.railftr{margin-top:auto;position:sticky;bottom:0;background:var(--navy)}
.railftr .signout{display:block;width:100%;margin-top:12px;padding:7px 10px;
  background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:6px;
  color:rgba(255,255,255,.72);font-size:11.5px;font-family:inherit;cursor:pointer;
  text-align:center}
.railftr .signout:hover{border-color:rgba(255,255,255,.45);color:#fff}
.tenant .av{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#27466f,#16294a);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#dfe8f4;flex:none;border:1px solid rgba(255,255,255,.1)}
.tenant .who{min-width:0}
/* TWO LINES, NOT ONE. The rail is 262px; .tenant padding leaves 218px and
   the avatar plus gap take 43px, so the name has at most 175px. Measured:
   'Oldendorff Carriers GmbH & Co. KG' needs 223px on one line, and even
   the unset default 'Desk name not set' did not fit beside the old Sign
   out button at 109.7px. Single-line nowrap cannot render this block's own
   default, so wrapping is the mechanism rather than a defence.
   line-clamp bounds it at two lines: without a limit a long name pushes
   the nav down the rail instead of ending in an ellipsis. */
.tenant .who .n{font-size:13px;font-weight:600;color:#eef3fa;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.tenant .who .p{font-size:10.5px;color:var(--steel);margin-top:1px}
/* An unset desk name says so, muted and italic, so it reads as an
   omission to fix rather than as the client's actual name. */
.tenant .who .n.unset{color:var(--steel);font-style:italic;font-weight:500}

.navsec{padding:16px 14px 6px}
.navsec .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#6f84a6;
  padding:0 8px 7px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  width:100%;text-align:left;color:#bcc8db;font-size:13.5px;font-weight:500;transition:.13s;position:relative}
.nav button .ic{width:17px;height:17px;flex:none;opacity:.82}
.nav button .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button:hover{background:rgba(255,255,255,.05);color:#eaf0f8}
.nav button.on{background:rgba(95,153,209,.16);color:#fff}
.nav button.on .ic{opacity:1}
.nav button.locked{color:#7f8ba0}
.nav button.locked .t{color:#8593a8}
.dotlive{width:6px;height:6px;border-radius:50%;background:var(--livedot);flex:none;
  box-shadow:0 0 0 3px rgba(52,160,133,.18)}
.lockic{width:13px;height:13px;flex:none;opacity:.6}
.railftr{margin-top:auto;padding:14px 22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:var(--steel);line-height:1.6}
.railftr a{color:var(--steel2);text-decoration:none}

/* ============ MAIN ============ */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:58px;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.crumb{font-size:13px;color:var(--steel);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sl{opacity:.4}
.topact{display:flex;align-items:center;gap:10px}
.pill{font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;letter-spacing:.02em}
.pill.live{background:var(--livebg);color:var(--live);display:inline-flex;align-items:center;gap:6px}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--livedot)}
.supportbtn{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:8px 15px;border-radius:9px;
  display:inline-flex;align-items:center;gap:7px;transition:.14s}
.supportbtn:hover{background:var(--navy2)}
.supportbtn .sp{width:7px;height:7px;border-radius:50%;background:var(--steel2);
  box-shadow:0 0 0 3px rgba(132,153,184,.3)}

.view{padding:28px;max-width:1180px;width:100%;margin:0 auto;flex:1}

/* ============ OVERVIEW ============ */
.ovhead{margin-bottom:24px}
.ovhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:29px;letter-spacing:-.015em;color:var(--navy)}
.ovhead p{font-size:14px;color:#6a7689;margin-top:6px;max-width:620px}
.deptlbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin:26px 0 13px;display:flex;align-items:center;gap:10px}
.deptlbl::after{content:"";flex:1;height:1px;background:var(--line2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.mod{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;min-height:166px;transition:.16s;position:relative;overflow:hidden}
.mod .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:13px}
.mod .glyph{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--sand);color:var(--navy);flex:none}
.mod .glyph svg{width:20px;height:20px}
.mod h3{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mod .desc{font-size:12.5px;color:#71798a;line-height:1.5;flex:1}
.mod .foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between}
.tag{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:6px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:5px}
.tag.live{background:var(--livebg);color:var(--live)}
.tag.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--livedot)}
.tag.avail{background:var(--lockbg);color:var(--lock)}
.mod.live{cursor:pointer;border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.mod.live:hover{border-color:var(--livedot);box-shadow:var(--shadow);transform:translateY(-2px)}
.mod.live .glyph{background:var(--livebg);color:var(--live)}
.mod.locked .glyph{background:var(--lockbg);color:var(--lock)}
.mod.locked h3{color:#5f6675}
.mod .open{font-size:12px;font-weight:600;color:var(--live);display:inline-flex;align-items:center;gap:4px}
.mod.demo{cursor:pointer}
.mod.demo:hover{border-color:#aebdd4;box-shadow:var(--shadow);transform:translateY(-2px)}
.mod.demo .glyph{background:#eef1f7;color:#3a567f}
.mod.demo h3{color:var(--ink)}
.mod.demo .tag.avail{background:#eef1f7;color:#3a567f}
.mod .demolink{font-size:12px;font-weight:600;color:#3a567f;display:inline-flex;align-items:center;gap:4px}
.mod .req{font-size:12px;font-weight:600;color:var(--steel);display:inline-flex;align-items:center;gap:4px;
  padding:5px 0;transition:.13s}
.mod.locked:hover .req{color:var(--navy)}
.lockstripe{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(154,145,127,.025) 11px,rgba(154,145,127,.025) 22px);pointer-events:none}

/* ============ CHARTERING MODULE ============ */
.modview{display:none}
.modview.on{display:block}
.modhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:6px}
.modhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:26px;letter-spacing:-.015em;color:var(--navy)}
.modhead .lede{font-size:13.5px;color:#6a7689;margin-top:5px;max-width:560px}
.runbar{display:flex;align-items:center;gap:12px;margin:22px 0 20px;flex-wrap:wrap}
.runbtn{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;
  display:inline-flex;align-items:center;gap:9px;transition:.14s}
.runbtn:hover{background:var(--navy2)}
.runbtn:disabled{opacity:.5;cursor:default}
.runbtn .d{width:8px;height:8px;border-radius:50%;background:#7fd4bd}
.muted{font-size:12.5px;color:#8a93a3}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:880px){.cols{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.panel .ph{padding:12px 15px;border-bottom:1px solid var(--line2);display:flex;align-items:center;
  justify-content:space-between;background:var(--sand2)}
.panel .ph h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:600}
.panel .ph .ct{font-size:11px;color:#9aa2b1;font-weight:500}
.list{max-height:340px;overflow-y:auto}
.row{padding:12px 15px;border-bottom:1px solid var(--line2);font-size:13px}
.row:last-child{border:none}
.row .r1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row .nm{font-weight:600;color:var(--ink)}
.row .meta{font-size:11.5px;color:#8a93a3;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.row .meta span{display:inline-flex;align-items:center;gap:4px}
.badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em}
.badge.ship{background:#e8eef7;color:#3a567f}
.badge.cargo{background:#f4ecdc;color:#8a6a26}

.matchwrap{margin-top:18px}
.match{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:12px;
  opacity:0;transform:translateY(8px);transition:.4s}
.match.show{opacity:1;transform:none}
.match.top{border-color:var(--livedot);background:linear-gradient(180deg,#fafdfb,var(--paper))}
.match .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.match .pair{font-weight:600;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:9px}
.match .pair .vs{color:#b9c0cc;font-weight:400;font-size:12px}
.score{font-family:'Fraunces',serif;font-weight:600;font-size:21px;letter-spacing:-.01em}
.score.hi{color:var(--live)} .score.mid{color:var(--gold)} .score.lo{color:#b06a4e}
.score small{font-size:11px;font-family:'Inter';color:#9aa2b1;font-weight:500;margin-left:2px}
.facts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.fact{font-size:11px;padding:4px 9px;border-radius:6px;background:var(--sand2);color:#5d6577;
  border:1px solid var(--line2);display:inline-flex;align-items:center;gap:5px}
.fact.ok{background:var(--livebg);color:var(--live);border-color:#cfe5dd}
.fact.no{background:#f8ece6;color:#b0613e;border-color:#ecd5c8}
.rationale{font-size:12.5px;color:#5d6577;line-height:1.55;padding:11px 13px;background:var(--sand2);
  border-radius:9px;border-left:3px solid var(--steel2)}
.rationale.ruled{border-left-color:#cba}
.rationale b{color:var(--ink);font-weight:600}

/* ============ CHARTERING FLOW ============ */
.stepbar{display:flex;gap:6px;margin:6px 0 18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#9aa2b1;
  padding:7px 13px 7px 9px;border-radius:9px;background:var(--paper);border:1px solid var(--line2);transition:.16s}
.step .sn{width:19px;height:19px;border-radius:50%;background:var(--sand);color:#9aa2b1;font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.step.on{color:var(--navy);border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.step.on .sn{background:var(--live);color:#fff}
.step.done{color:var(--live)}
.step.done .sn{background:var(--livebg);color:var(--live)}
.stage{display:none}
.stage.on{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.inbox{display:flex;flex-direction:column;gap:9px}
.mail{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.3s;position:relative}
.mail .mtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.mail .from{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail .time{font-size:11px;color:#aab1bf;flex:none}
.mail .subj{font-size:12.5px;color:#5d6577;font-weight:500;margin-bottom:6px}
.mail .body{font-size:12px;color:#808997;line-height:1.55;max-height:42px;overflow:hidden;position:relative}
.mail .body.full{max-height:none}
.mail .verdict{position:absolute;top:13px;right:14px;font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:5px;opacity:0;transform:scale(.9);transition:.3s}
.mail.tagged .verdict{opacity:1;transform:none}
.mail .verdict.ship{background:#e8eef7;color:#3a567f}
.mail .verdict.cargo{background:#f4ecdc;color:#8a6a26}
.mail .verdict.noise{background:#f0ede6;color:#a39a86}
.mail .verdict b{font-weight:700;opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
.mail.noise.tagged{opacity:.52}
.mail.ship.tagged{border-color:#cdd9ec}
.mail.cargo.tagged{border-color:#e8dcc2}

.proclog{background:#0e1d34;border-radius:11px;padding:13px 15px;margin-bottom:16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11.5px;line-height:1.7;color:#9fb3d1;max-height:150px;overflow-y:auto}
.proclog .pl{opacity:0;animation:plin .25s forwards}
.proclog .pl .t{color:#5e7499}
.proclog .pl .g{color:#5ec9a8} .proclog .pl .a{color:#e3c98a} .proclog .pl b{color:#dce6f4;font-weight:600}
@keyframes plin{to{opacity:1}}

/* ============ MODULE DEMO SHARED ============ */
.pill.demo{background:#eef1f7;color:#3a567f}
.pill.demo::before{content:"";width:6px;height:6px;border-radius:50%;background:#5b7196}
.demohead{margin-bottom:6px}
.demohead h1{font-family:'Fraunces',serif;font-weight:600;font-size:26px;letter-spacing:-.015em;color:var(--navy)}
.demohead .lede{font-size:13.5px;color:#6a7689;margin-top:5px;max-width:600px}
.availnote{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--lock);
  background:var(--lockbg);border:1px solid #e6e0d2;padding:5px 11px;border-radius:7px;margin-top:12px}
.availnote svg{width:13px;height:13px}
.srcline{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#7a8396;
  background:var(--sand2);border:1px solid var(--line2);padding:6px 12px;border-radius:8px;margin-top:12px;margin-right:10px}
.srcline svg{width:13px;height:13px;color:var(--steel);flex:none}
.srcline b{color:var(--navy);font-weight:600}
.demofoot{margin-top:22px;padding:16px 18px;background:linear-gradient(180deg,#fbfdfc,var(--paper));
  border:1px solid #cfdcd6;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.demofoot .dt{font-size:13px;color:#475063;max-width:560px;line-height:1.5}
.demofoot .dt b{color:var(--navy);font-weight:600}
.demofoot button{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:10px 17px;border-radius:9px;flex:none;transition:.14s}
.demofoot button:hover{background:var(--navy2)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:18px 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.stat .v{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--navy);letter-spacing:-.01em}
.stat .v.warn{color:var(--warn)} .stat .v.good{color:var(--live)} .stat .v.bad{color:#b0613e}
.stat .l{font-size:11px;color:#8a93a3;margin-top:3px;font-weight:500}

/* TRIAGE */
.tmail{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:8px;
  display:flex;gap:13px;align-items:flex-start;transition:.3s}
.tmail .prio{width:4px;align-self:stretch;border-radius:3px;background:var(--line);flex:none;min-height:38px}
.tmail.tagged.crit .prio{background:#c2553a} .tmail.tagged.high .prio{background:var(--warn)}
.tmail.tagged.norm .prio{background:var(--steel2)} .tmail.tagged.low .prio{background:#c3bdaf}
.tmail .tc{flex:1;min-width:0}
.tmail .th{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.tmail .tfrom{font-size:13px;font-weight:600;color:var(--ink)}
.tmail .ttime{font-size:11px;color:#aab1bf;flex:none}
.tmail .tsubj{font-size:12.5px;color:#5d6577}
.tmail .tmeta{margin-top:8px;display:flex;gap:7px;flex-wrap:wrap;opacity:0;max-height:0;overflow:hidden;transition:.35s}
.tmail.tagged .tmeta{opacity:1;max-height:60px}
.tchip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;letter-spacing:.02em}
.tchip.crit{background:#f8e8e3;color:#b04a30} .tchip.high{background:var(--warnbg);color:var(--warn)}
.tchip.norm{background:#eef1f7;color:#3a567f} .tchip.low{background:var(--lockbg);color:var(--lock)}
.tchip.route{background:var(--livebg);color:var(--live)}
.tchip.action{background:var(--sand2);color:#5d6577;border:1px solid var(--line2)}

/* NOON / SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.raw{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;line-height:1.65;color:#5d6577;white-space:pre-wrap}
.fields{display:flex;flex-direction:column}
.fld{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);
  opacity:0;transform:translateX(6px);transition:.3s}
.fld.show{opacity:1;transform:none}
.fld:last-child{border:none}
.fld .fl{font-size:12px;color:#8a93a3}
.fld .fv{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.fld .flag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.fld .flag.ok{background:var(--livebg);color:var(--live)}
.fld .flag.warn{background:var(--warnbg);color:var(--warn)}
.fld .flag.bad{background:#f8e8e3;color:#b04a30}
.noonalert{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:var(--warnbg);border:1px solid #e8d6ad;color:#6f5318}
.noonalert b{color:#5a420f}

/* PSC */
.pscvessel{display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:4px}
.pscvessel .pv{flex:1}
.pscvessel .pv .pn{font-size:15px;font-weight:600;color:var(--navy)}
.pscvessel .pv .pm{font-size:12px;color:#8a93a3;margin-top:2px}
.pscvessel .port{text-align:right}
.pscvessel .port .pl{font-size:11px;color:#8a93a3}
.pscvessel .port .pp{font-size:14px;font-weight:600;color:var(--ink)}
.def{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:9px;
  opacity:0;transform:translateY(8px);transition:.4s}
.def.show{opacity:1;transform:none}
.def .dh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}
.def .dttl{font-size:13.5px;font-weight:600;color:var(--ink)}
.def .dcode{font-size:11px;color:#9aa2b1;font-weight:500;margin-top:2px}
.def .lik{text-align:right;flex:none}
.def .lik .lv{font-family:'Fraunces',serif;font-weight:600;font-size:18px}
.def .lik .lv.hi{color:#b0613e} .def .lik .lv.mid{color:var(--warn)} .def .lik .lv.lo{color:var(--steel)}
.def .lik .ll{font-size:10px;color:#9aa2b1}
.def .dwhy{font-size:12.5px;color:#5d6577;line-height:1.55;padding:10px 12px;background:var(--sand2);
  border-radius:8px;border-left:3px solid var(--steel2)}
.def .dwhy b{color:var(--ink);font-weight:600}
.def.crit .dwhy{border-left-color:#c2553a}

/* VOYAGE OPS */
.voygrid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:4px}
@media(max-width:980px){.voygrid{grid-template-columns:1fr}}
.voymap{background:#0a1628;border-radius:13px;overflow:hidden;position:relative;min-height:300px;border:1px solid #1a3155}
.voymap svg{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.voymap .mlbl{position:absolute;top:13px;left:15px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#6f84a6;font-weight:600;z-index:2}
.voyship{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:3}
.voyship .vd{width:11px;height:11px;border-radius:50%;border:2px solid #0e1d34;transition:.2s}
.voyship .vd.ok{background:#5ec9a8} .voyship .vd.warn{background:#e3b85a} .voyship .vd.bad{background:#e07a5a}
.voyship:hover .vd{transform:scale(1.4)}
.voyship .vn{position:absolute;left:15px;top:-6px;font-size:10.5px;color:#aebfd6;white-space:nowrap;
  background:rgba(14,29,52,.88);padding:2px 6px;border-radius:4px;opacity:0;transition:.15s;pointer-events:none}
.voyship:hover .vn{opacity:1}
.voylist{display:flex;flex-direction:column;gap:9px}
.voycard{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  opacity:0;transform:translateY(8px);transition:.4s}
.voycard.show{opacity:1;transform:none}
.voycard.alert{border-color:#e8d0a8;background:linear-gradient(180deg,#fdfaf3,var(--paper))}
.voycard .vh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.voycard .vnm{font-size:13.5px;font-weight:600;color:var(--navy)}
.voycard .vst{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px}
.voycard .vst.ok{background:var(--livebg);color:var(--live)}
.voycard .vst.warn{background:var(--warnbg);color:var(--warn)}
.voycard .vst.bad{background:#f8e8e3;color:#b04a30}
.voycard .vroute{font-size:12px;color:#8a93a3;margin-bottom:8px}
.voycard .vbar{height:5px;background:var(--sand);border-radius:3px;overflow:hidden;margin-bottom:8px}
.voycard .vbar i{display:block;height:100%;background:var(--steel2);border-radius:3px;width:0;transition:1s ease}
.voycard .vmsg{font-size:12px;color:#5d6577;line-height:1.5}
.voycard .vmsg b{color:var(--ink);font-weight:600}
.voycard.alert .vmsg b{color:var(--warn)}

/* ============ DASHBOARD ============ */
.dashhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.dashhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:29px;letter-spacing:-.015em;color:var(--navy)}
.dashhead p{font-size:14px;color:#6a7689;margin-top:6px;max-width:600px}
.dashcta{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:10px 17px;border-radius:10px;flex:none;transition:.14s}
.dashcta:hover{background:var(--navy2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 17px;position:relative;overflow:hidden}
.kpi .klbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:600;margin-bottom:11px;line-height:1.3;padding-right:62px;min-height:26px}
.kpi .ktag{position:absolute;top:15px;right:15px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.02em}
.kpi .ktag.ok{background:var(--livebg);color:var(--live)}
.kpi .ktag.warn{background:var(--warnbg);color:var(--warn)}
.kpi .ktag.bad{background:#f8e8e3;color:#b04a30}
.kpi .ktag.info{background:#eef1f7;color:#3a567f}
.kpi .kval{font-family:'Fraunces',serif;font-weight:600;font-size:30px;color:var(--navy);letter-spacing:-.02em;line-height:1}
.kpi .ksub{font-size:11.5px;color:#8a93a3;margin-top:7px}
.kpi .ksub.up{color:var(--live)} .kpi .ksub.down{color:#b06a4e}
.dashgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
@media(max-width:980px){.dashgrid{grid-template-columns:1fr}}
.dashpanel{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dashpanel .dph{padding:14px 17px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;background:var(--sand2)}
.dashpanel .dph h3{font-size:13px;letter-spacing:.04em;color:var(--navy);font-weight:600}
.dashpanel .dph .dphsub{font-size:11.5px;color:#9aa2b1;font-weight:500}
.dashmap{border-radius:0;border:none;min-height:340px;margin:0}
.excboard{max-height:354px;overflow-y:auto;padding-bottom:2px}
.exc{padding:14px 17px;border-bottom:1px solid var(--line2);border-left:3px solid var(--line);transition:.13s;cursor:pointer}
.exc:last-child{border-bottom:none}
.exc:hover{background:var(--sand2)}
.exc.crit{border-left-color:#c2553a} .exc.warn{border-left-color:var(--warn)} .exc.ok{border-left-color:var(--steel2)}
.exc .eh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.exc .etitle{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.exc .emod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;flex:none;background:#eef1f7;color:#3a567f}
.exc .edesc{font-size:12px;color:#6a7280;line-height:1.5;margin-bottom:5px}
.exc .emeta{font-size:11px;color:#9aa2b1;display:flex;gap:8px;align-items:center}
.exc .emeta .dot{width:3px;height:3px;border-radius:50%;background:#c3cad6}

/* ============ COMMERCIAL-DESK DASHBOARD (Build 4) ============
   Replaces the World-B "Fleet at a glance" dashboard above (.dashhead/
   .kpis/.dashgrid/.dashmap/.excboard/.exc are left in place, unused, rather
   than risk collateral edits elsewhere -- nothing in v-dashboard's new
   markup references them anymore). Reuses existing tokens only, no new
   design system, per spec section 3. */
.dashgreet{margin-bottom:22px}
.dashgreet h1{font-family:'Fraunces',serif;font-weight:600;font-size:27px;letter-spacing:-.015em;color:var(--navy)}
.dashgreet p{font-size:14px;color:#6a7689;margin-top:6px}

.widgetgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px}
@media(max-width:980px){.widgetgrid{grid-template-columns:1fr}}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.13s}
.widget:hover{border-color:var(--steel2)}
.widget.locked{background:transparent;border:none;padding:0;cursor:default}
.widget.subwidget{padding:14px 16px}
.wgttop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wgttop h3{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--navy)}
.wgtlive{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:var(--livebg);color:var(--live)}
.wgtcounts{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:13px}
.wgtcount{display:flex;flex-direction:column}
.wgtnum{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--navy);line-height:1}
.wgtlbl{font-size:10.5px;letter-spacing:.03em;color:var(--steel);font-weight:600;margin-top:4px;max-width:120px}
.wgtrows{border-top:1px solid var(--line2)}
.wgtrow{padding:9px 0;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:3px;position:relative}
.wgtrow:last-child{border-bottom:none}
.wgtrow.rejection .wgtrowtitle{color:#b04a30}
.wgtrowtitle{font-size:12.5px;font-weight:600;color:var(--ink)}
.wgtrowsub{font-size:11.5px;color:#8a93a3;line-height:1.5}
.wgtimo{font-size:10.5px;color:#9aa2b1;font-weight:500;margin-left:4px}
.wgtchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:5px;width:fit-content}
.wgtchip.ok{background:var(--livebg);color:var(--live)}
.wgtchip.warn{background:var(--warnbg);color:var(--warn)}
.wgtchip.bad{background:#f8e8e3;color:#b04a30}
.wgtchip.info{background:#eef1f7;color:#3a567f}
.wgtempty{font-size:12px;color:#9aa2b1;padding:10px 0}
.wgtfoot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line2)}
.wgtopen{font-size:12px;font-weight:600;color:var(--navy)}

.attnpanel .attnboard{max-height:400px;overflow-y:auto}
.attn{padding:13px 17px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px;cursor:pointer;transition:.13s}
.attn:last-child{border-bottom:none}
.attn:hover{background:var(--sand2)}
.attnmod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:5px;flex:none;background:#eef1f7;color:#3a567f}
.attntext{font-size:12.5px;color:var(--ink);flex:1;line-height:1.4}
.attngo{font-size:13px;color:#9aa2b1;flex:none}
.attnempty{padding:22px 17px;text-align:center;font-size:12.5px;color:#9aa2b1}

/* ---- Phase 2: live data. Trust bands (A1/A2), review queue, opportunity.
   Reuses the tokens above; no new design system. A trust band is REPORTED
   age, deliberately styled apart from the .st-* lifecycle chips so the two
   are not read as one thing -- they answer different questions and they
   disagree (see app/staleness.py). ---- */
.wgtpos{padding:7px 0;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:8px}
.wgtpos:last-child{border-bottom:none}
.wgtposlbl{font-size:12px;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:5px;flex:none}
.band-full{background:var(--livebg);color:var(--live)}
.band-qualified{background:var(--warnbg);color:var(--warn)}
.band-stale{background:#f0eef1;color:#8a7f92}
.bandage{font-size:10.5px;color:#9aa2b1;flex:none}

.attn.held{border-left:3px solid var(--warn)}
.attnsub{font-size:11px;color:#9aa2b1;line-height:1.45;margin-top:3px}
.attnacts{display:flex;gap:6px;flex:none}

.oppmod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:5px;flex:none;background:#f3eee7;color:#8a6d3a}
.oppnum{font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--navy);flex:none}

/* "Unidentified" is the absence of a verdict, so it is deliberately the
   quietest chip on the board -- neutral, not a green/amber/red judgment. */
.wgtchip.none{background:#f0eef1;color:#7a7285}
.wgtrow.unidentified .wgtrowtitle{color:#8a7f92}

.firstrun{padding:26px 17px;text-align:center}
.firstrun b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.firstrun span{font-size:12.5px;color:#9aa2b1;line-height:1.6}

/* ============ ACTIVATION / PLACEHOLDER ============ */
.activate{max-width:560px;margin:8px auto;text-align:center;padding:30px 0}
.activate.wide{max-width:760px}
.activate .ico{width:62px;height:62px;border-radius:16px;background:var(--lockbg);color:var(--lock);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.procprev{max-width:720px;margin:6px auto 26px;text-align:left}
.procprev .ppt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:600;margin:0 0 12px;text-align:center}
.qcompare{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.qcompare .qreq{padding:13px 16px;background:var(--sand2);border-bottom:1px solid var(--line2);font-size:12.5px;color:#5d6577}
.qcompare .qreq b{color:var(--navy);font-weight:600}
.qtable{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;font-size:12.5px}
.qtable .qc{padding:10px 14px;border-bottom:1px solid var(--line2)}
.qtable .qhrow .qc{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:600;background:#fafaf6}
.qtable .ql{color:#5d6577} .qtable .qc.win{background:var(--livebg)}
.qtable .qv{font-weight:600;color:var(--ink);text-align:right}
.qtable .qv.win{color:var(--live)}
.qaward{padding:13px 16px;background:linear-gradient(180deg,#fbfdfc,var(--paper));border-top:1px solid #cfdcd6;font-size:12.5px;color:#475063;line-height:1.55}
.qaward b{color:var(--live);font-weight:600}
/* PROCUREMENT DEMO (full flow) */
.reqcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:16px}
.reqcard .rqh{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.reqcard .rqh .rqno{font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--navy);color:#fff;padding:3px 9px;border-radius:6px}
.reqcard .rqh .rqv{font-size:13px;font-weight:600;color:var(--navy)}
.reqcard .rqitems{display:flex;flex-direction:column;gap:6px}
.reqcard .rqi{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#5d6577;padding:6px 0;border-bottom:1px dashed var(--line2)}
.reqcard .rqi:last-child{border:none}
.reqcard .rqi b{color:var(--ink);font-weight:600}
.qarrivals{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
@media(max-width:820px){.qarrivals{grid-template-columns:1fr}}
.qarr{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;opacity:0;transform:translateY(8px);transition:.4s}
.qarr.show{opacity:1;transform:none}
.qarr .qa1{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:8px}
.qarr .qsup{font-size:13px;font-weight:600;color:var(--navy)}
.qarr .qfmt{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;background:#eef1f7;color:#3a567f;flex:none}
.qarr .qmeta{font-size:11.5px;color:#8a93a3;line-height:1.6}
.qarr .qmeta b{color:var(--ink);font-weight:600}
.cmptable{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.cmptable .cmh{padding:12px 15px;background:var(--sand2);border-bottom:1px solid var(--line2);font-size:12px;letter-spacing:.04em;color:var(--navy);font-weight:600}
.cmpgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font-size:12.5px}
.cmpgrid .cc{padding:11px 14px;border-bottom:1px solid var(--line2)}
.cmpgrid .chrow .cc{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);font-weight:600;background:#fafaf6}
.cmpgrid .cl{color:#5d6577}
.cmpgrid .cv{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cmpgrid .cc.win{background:var(--livebg)}
.cmpgrid .cv.win{color:var(--live)}
.cmpgrid .cv.bad{color:#b0613e}
.cmpgrid .totalrow .cc{border-top:2px solid var(--line);background:#fafaf6;font-weight:700}
.cmpgrid .totalrow .cv{font-family:'Fraunces',serif;font-size:15px}
.recobox{background:linear-gradient(180deg,#fafdfb,var(--paper));border:1px solid #cfdcd6;border-radius:12px;padding:15px 17px}
.recobox .rt{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--live);font-weight:700;margin-bottom:9px}
.recobox .rt svg{width:15px;height:15px}
.recobox p{font-size:13px;color:#43506a;line-height:1.6}
.recobox p b{color:var(--navy);font-weight:600}
.recobox .flag{margin-top:10px;font-size:12.5px;color:#8a5a2a;background:var(--warnbg);border:1px solid #e8d6ad;border-radius:8px;padding:9px 12px;line-height:1.5}
.recobox .flag b{color:#6f4818}
/* PROCUREMENT — requisition front-half */
.reqflow{display:flex;gap:6px;margin:4px 0 18px;flex-wrap:wrap}
.reqstep{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#9aa2b1;padding:7px 12px 7px 9px;border-radius:9px;background:var(--paper);border:1px solid var(--line2);transition:.16s}
.reqstep .rn{width:18px;height:18px;border-radius:50%;background:var(--sand);color:#9aa2b1;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.reqstep.on{color:var(--navy);border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.reqstep.on .rn{background:var(--live);color:#fff}
.reqstep.done{color:var(--live)} .reqstep.done .rn{background:var(--livebg);color:var(--live)}
.origintoggle{display:flex;gap:9px;margin-bottom:15px}
.otog{flex:1;border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;cursor:pointer;transition:.14s;background:var(--paper)}
.otog:hover{border-color:var(--steel2)}
.otog.sel{border-color:var(--live);background:var(--livebg)}
.otog .oth{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.otog .oth svg{width:18px;height:18px;color:var(--navy)}
.otog.sel .oth svg{color:var(--live)}
.otog .ott{font-size:13.5px;font-weight:600;color:var(--navy)}
.otog .otd{font-size:11.5px;color:#8a93a3;line-height:1.5}
.catbox{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.catbox .cbh{padding:11px 15px;background:var(--sand2);border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.catbox .cbh .cbt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:600}
.catbox .cbh .cbsrc{font-size:11px;font-weight:600;color:#3a567f}
.catsearch{padding:11px 14px;border-bottom:1px solid var(--line2)}
.catsearch input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13px;outline:none;background:var(--paper)}
.catsearch input:focus{border-color:var(--steel2)}
.catresults{max-height:190px;overflow-y:auto}
.catrow{padding:9px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:.1s}
.catrow:last-child{border:none}
.catrow:hover{background:var(--sand2)}
.catrow .ci{min-width:0}
.catrow .cin{font-size:13px;font-weight:600;color:var(--ink)}
.catrow .cic{font-size:11px;color:#8a93a3;margin-top:1px}
.catrow .cadd{font-size:11px;font-weight:700;color:var(--live);flex:none;padding:4px 9px;border-radius:6px;background:var(--livebg)}
.catempty{padding:20px;text-align:center;font-size:12.5px;color:#9aa2b1}
.reqlines{margin-bottom:14px}
.reqln{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line2)}
.reqln:last-child{border:none}
.reqln .rli{flex:1;min-width:0}
.reqln .rln{font-size:13px;font-weight:600;color:var(--ink)}
.reqln .rlc{font-size:11px;color:#8a93a3;margin-top:1px}
.reqln .qty{display:flex;align-items:center;gap:8px;flex:none}
.reqln .qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--paper);font-size:15px;color:var(--navy);display:flex;align-items:center;justify-content:center;line-height:1}
.reqln .qty span{font-size:13px;font-weight:600;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.reqln .rmv{color:#b06a4e;font-size:11px;font-weight:600;flex:none;cursor:pointer}
.reqnote{font-size:11.5px;color:#8a93a3;background:var(--sand2);border:1px solid var(--line2);border-radius:8px;padding:9px 12px;line-height:1.5;margin-bottom:14px}
.reqnote b{color:var(--navy);font-weight:600}
.qchip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.qchip.onboard{background:#e8eef7;color:#3a567f} .qchip.office{background:#f4ecdc;color:#8a6a26}
.activate .ico svg{width:28px;height:28px}
.activate h2{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--navy);letter-spacing:-.01em}
.activate .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin-bottom:8px}
.activate p{font-size:14px;color:#6a7689;margin-top:10px;line-height:1.6}
.activate .does{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:18px 20px;margin:22px 0;box-shadow:var(--shadow)}
.activate .does h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin-bottom:12px}
.activate .does ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.activate .does li{display:flex;gap:11px;font-size:13.5px;color:#475063;line-height:1.5;text-align:left}
.activate .does li svg{width:17px;height:17px;color:var(--live);flex:none;margin-top:1px}
.actbtns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.actbtn{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:10px;transition:.14s}
.actbtn:hover{background:var(--navy2)}
.actbtn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.actbtn.ghost:hover{background:var(--sand2)}
.actnote{font-size:12px;color:#9aa2b1;margin-top:16px;line-height:1.5}

/* ============ ENTITLEMENTS VIEW ============ */
.entcard{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.entrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.entrow:last-child{border:none}
.entrow .eg{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.entrow .eg.live{background:var(--livebg);color:var(--live)}
.entrow .eg.lock{background:var(--lockbg);color:var(--lock)}
.entrow .ei{flex:1;min-width:0}
.entrow .ei .en{font-size:14px;font-weight:600;color:var(--ink)}
.entrow .ei .ed{font-size:12px;color:#8a93a3;margin-top:2px}
.entrow .price{text-align:right;flex:none}
.entrow .price .amt{font-size:14px;font-weight:700;color:var(--navy)}
.entrow .price .amt small{font-size:11px;font-weight:500;color:#9aa2b1}
.entrow .price .st{font-size:11px;font-weight:600;margin-top:2px}
.entrow .price .st.live{color:var(--live)}
.entrow .price .st.lock{color:var(--lock)}
.enttotal{padding:16px 18px;background:var(--sand2);display:flex;align-items:center;justify-content:space-between}
.enttotal .lt{font-size:13px;color:#5d6577}
.enttotal .lv{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--navy)}
.entnote{font-size:12px;color:#9aa2b1;margin-top:14px;line-height:1.6;max-width:640px}

/* ============ ASK DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(17,35,63,.32);backdrop-filter:blur(2px);opacity:0;
  pointer-events:none;transition:.2s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:392px;max-width:92vw;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:41;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.dh .dt{display:flex;align-items:center;gap:10px}
.dh .dt .sp{width:9px;height:9px;border-radius:50%;background:var(--livedot);box-shadow:0 0 0 4px rgba(52,160,133,.16)}
.dh .dt b{font-size:14px;color:var(--navy);font-weight:600}
.dh .dt span{font-size:11px;color:#9aa2b1;display:block;margin-top:1px}
.dh .x{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8a93a3}
.dh .x:hover{background:var(--sand2)}
.dbody{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.msg{font-size:13.5px;line-height:1.55;max-width:88%}
.msg.u{align-self:flex-end;background:var(--navy);color:#fff;padding:10px 13px;border-radius:13px 13px 4px 13px}
.msg.a{align-self:flex-start;color:#3a4254}
.msg.a .ab{background:var(--sand2);border:1px solid var(--line2);padding:11px 13px;border-radius:13px 13px 13px 4px}
.msg.a .src{font-size:11px;color:#9aa2b1;margin-top:6px;padding-left:2px}
.dsugg{padding:12px 20px;border-top:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;color:var(--navy);background:var(--sand2);border:1px solid var(--line2);
  padding:6px 11px;border-radius:18px;transition:.12s}
.chip:hover{background:var(--sand);border-color:var(--line)}
.dform{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px}
/* 16px FOR THE SAME FUNCTIONAL REASON AS THE LOGIN INPUTS: iOS Safari zooms the
   page when a text input under 16px takes focus and does not zoom back. Found by
   the narrow-viewport check, which caught this one after the login inputs had
   already been fixed -- a second instance of a trap that was invisible at every
   width anyone had ever looked at. */
.dform input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-family:inherit;
  font-size:16px;background:var(--paper);outline:none}
.dform input:focus{border-color:var(--steel2)}
.dform button{background:var(--navy);color:#fff;border-radius:10px;width:40px;display:flex;align-items:center;justify-content:center}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);
  color:#fff;padding:13px 20px;border-radius:11px;font-size:13.5px;box-shadow:0 12px 32px rgba(17,35,63,.25);
  opacity:0;pointer-events:none;transition:.25s;z-index:60;display:flex;align-items:center;gap:11px;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ti{width:8px;height:8px;border-radius:50%;background:var(--livedot);flex:none}

/* THE RAIL'S SCRIM IS NOT #scrim. That one belongs to the Ask Bridge drawer and
   already has a click handler meaning "close the drawer"; a second owner would
   inherit an assumption written for a different panel. Same class for the look
   and the layer (40, under the rail's 50), separate element for the meaning. */
.railscrim{display:none}
.railx{display:none;position:absolute;top:14px;right:12px;width:32px;height:32px;
  align-items:center;justify-content:center;border-radius:8px;
  color:var(--steel2);background:transparent}
.railx:hover{background:rgba(255,255,255,.1);color:#fff}
.brand{position:relative}
/* Body scroll is locked while the drawer is open, so the page behind does not
   scroll under the panel on a phone. */
body.railopen{overflow:hidden}

@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;width:262px;transform:translateX(-100%);transition:.22s;z-index:50}
  .rail.open{transform:none}
  .menubtn{display:flex!important}
  .cols{grid-template-columns:1fr}
  /* The close control and the rail's own scrim exist ONLY here. Above this
     width the rail is always visible, so a close button would offer to hide
     navigation that cannot be brought back. */
  .railx{display:flex}
  .railscrim{display:block}
}
.menubtn{display:none;width:36px;height:36px;border-radius:8px;align-items:center;justify-content:center;color:var(--navy)}
.menubtn:hover{background:var(--sand2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}