/* ============================================================================
   DIVONCI WORLD — OPERATIONAL CONTROL · STYLES
   Left command panel. Glass over the living map, mirror of the right HUD.
   Depends on tokens.css + os.css.
   ========================================================================== */

:root{ --ctrl-w: 374px; }

/* tone helpers — set --tn to a state colour */
.t-clear{   --tn: var(--state-clear); }
.t-crisis{  --tn: var(--state-crisis); }
.t-caution{ --tn: var(--state-caution); }
.t-active{  --tn: var(--state-active); }
.t-focus{   --tn: var(--state-focus); }
.t-standby{ --tn: var(--state-standby); }

/* --------------------------------------------------------------- SHELL --- */
.control{
  position:fixed; left:14px; top:calc(var(--header-h) + 14px); bottom:14px; z-index:32;
  width:var(--ctrl-w); max-width:calc(100vw - 28px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(29,25,41,0.82), rgba(11,10,19,0.86));
  backdrop-filter:blur(16px);
  border:1px solid var(--hairline-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3), var(--glow-soft);
  overflow:hidden;
  transition:opacity var(--dur-base), transform var(--dur-base);
}
body.world .control{ opacity:0; pointer-events:none; transform:translateX(-12px); }

/* ---- header: title + account strip --------------------------------- */
.ctrl-head{ padding:12px 14px 11px; border-bottom:1px solid var(--hairline); }
.ctrl-eyebrow{ display:flex; align-items:center; justify-content:space-between; }
.ctrl-eyebrow .lbl{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.ctrl-eyebrow .lbl .g{ width:8px; height:8px; border-radius:2px; background:var(--gold); box-shadow:var(--glow-gold); }
.ctrl-eyebrow .live{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; color:var(--state-clear); display:inline-flex; align-items:center; gap:6px; }
.ctrl-eyebrow .live::before{ content:""; width:6px; height:6px; border-radius:99px; background:var(--state-clear); box-shadow:0 0 7px var(--state-clear); animation:blink 1.6s infinite; }

.acct{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:11px; }
.acct .cell{ background:var(--graphite); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:7px 6px; text-align:center; }
.acct .cell .ak{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
.acct .cell .av{ font-family:var(--font-display); font-weight:600; font-size:12.5px; margin-top:3px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.acct .cell.caution .av{ color:var(--state-caution); }
.acct .cell.active .av{ color:var(--ultraviolet); }

/* ---- top tabs -------------------------------------------------------- */
.ctrl-tabs{ display:flex; gap:2px; padding:8px 8px 0; overflow-x:auto; scrollbar-width:none; }
.ctrl-tabs::-webkit-scrollbar{ display:none; }
.ctrl-tabs .tt{ flex:0 0 auto; font-family:var(--font-mono); font-size:9px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-3); background:transparent; border:none; border-bottom:2px solid transparent; padding:8px 6px 9px; cursor:pointer; transition:color var(--dur-fast); white-space:nowrap; }
.ctrl-tabs .tt:hover{ color:var(--ink); }
.ctrl-tabs .tt.on{ color:var(--gold-bright); border-bottom-color:var(--gold); }

/* ---- sub tabs (segmented) ------------------------------------------- */
.ctrl-sub{ display:flex; gap:4px; padding:10px 12px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); overflow-x:auto; scrollbar-width:none; flex-wrap:wrap; }
.ctrl-sub::-webkit-scrollbar{ display:none; }
.ctrl-sub .st{ flex:0 0 auto; font-family:var(--font-mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; transition:all var(--dur-fast); }
.ctrl-sub .st:hover{ color:var(--ink); border-color:var(--hairline-3); }
.ctrl-sub .st.on{ color:var(--ink); background:var(--active-dim); border-color:rgba(168,85,247,0.5); }

/* ---- body ----------------------------------------------------------- */
.ctrl-body{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:14px; }
.ctrl-body::-webkit-scrollbar{ width:7px; }
.ctrl-body::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:99px; }
.ctrl-body::-webkit-scrollbar-thumb:hover{ background:var(--hairline-3); }

.cg{ display:flex; flex-direction:column; gap:9px; }
.cl{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-4); display:flex; justify-content:space-between; align-items:center; }
.cl .more{ color:var(--violet-ink); cursor:pointer; }

/* ---- search + add row ----------------------------------------------- */
.ctrl-find{ display:flex; gap:7px; }
.ctrl-find input{ flex:1; height:32px; border-radius:var(--r-sm); border:1px solid var(--hairline-2); background:rgba(16,14,25,0.7);
  color:var(--ink); padding:0 12px; font-family:var(--font-ui); font-size:12px; outline:none; }
.ctrl-find input::placeholder{ color:var(--ink-4); }
.ctrl-find input:focus{ border-color:rgba(168,85,247,0.5); }
.ctrl-find .add{ flex:0 0 auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:0 12px;
  border-radius:var(--r-sm); border:1px solid rgba(47,224,161,0.4); background:var(--clear-dim); color:var(--state-clear); cursor:pointer; }
.ctrl-find .add:hover{ box-shadow:var(--glow-clear); }

/* ---- metric chip row (health / sales metrics) ----------------------- */
.chips{ display:grid; gap:6px; }
.chips.c3{ grid-template-columns:repeat(3,1fr); }
.chips.c4{ grid-template-columns:repeat(4,1fr); }
.chip{ background:var(--graphite); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:8px 9px; }
.chip .ck{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
.chip .cv{ font-family:var(--font-display); font-weight:600; font-size:13px; margin-top:3px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chip .cd{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.06em; text-transform:uppercase; margin-top:2px; color:var(--tn,var(--ink-3)); }
.chip.tone{ border-color:color-mix(in srgb, var(--tn) 32%, transparent); }
.chip.tone .cv{ color:var(--tn); }

/* ---- feed rows ------------------------------------------------------ */
.feed{ display:flex; flex-direction:column; gap:7px; }
.frow{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:linear-gradient(180deg, rgba(37,31,51,0.5), rgba(22,19,31,0.5)); border:1px solid var(--hairline); border-left:2px solid var(--tn,var(--violet));
  border-radius:var(--r-sm); padding:9px 11px; }
.frow .dot{ width:8px; height:8px; border-radius:99px; background:var(--tn,var(--violet)); box-shadow:0 0 7px var(--tn,var(--violet)); }
.frow .mid .nm{ font-size:12.5px; font-weight:500; color:var(--ink); }
.frow .mid .mt{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); margin-top:2px; }
.frow .rt{ text-align:right; }
.frow .rt .st{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tn,var(--ink-3)); }
.frow .rt .amt{ font-family:var(--font-display); font-weight:600; font-size:12.5px; margin-top:2px; }
.frow .rt .tm{ font-family:var(--font-mono); font-size:8.5px; color:var(--ink-4); margin-top:1px; }

/* ---- generic card --------------------------------------------------- */
.ccard{ background:linear-gradient(180deg, rgba(37,31,51,0.55), rgba(22,19,31,0.55)); border:1px solid var(--hairline-2); border-radius:var(--r-md); padding:11px 12px; }
.ccard .top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ccard .ttl{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); }
.ccard .sub{ font-family:var(--font-mono); font-size:9px; color:var(--ink-3); }

.tag{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--tn,var(--violet)) 38%, transparent); color:var(--tn,var(--violet-ink)); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.tag .d{ width:6px; height:6px; border-radius:99px; background:currentColor; box-shadow:0 0 6px currentColor; }

/* mini stat grid inside card */
.minis{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.minis.m4{ grid-template-columns:repeat(4,1fr); }
.mini{ text-align:center; }
.mini .mk{ font-family:var(--font-mono); font-size:7px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4); }
.mini .mv{ font-family:var(--font-mono); font-size:11px; color:var(--ink); margin-top:2px; }
.mini .mv.gold{ color:var(--gold-bright); }

.prog{ height:5px; border-radius:99px; background:var(--graphite); overflow:hidden; margin-top:9px; }
.prog > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--tn,var(--violet)), color-mix(in srgb, var(--tn,var(--violet)) 40%, #fff)); }
.prog-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; color:var(--ink-3); margin-top:6px; }

/* action buttons */
.acts{ display:flex; gap:6px; margin-top:10px; }
.act{ flex:1; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:8px 6px; border-radius:var(--r-sm);
  border:1px solid var(--hairline-2); background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:all var(--dur-fast); text-align:center; }
.act:hover{ color:var(--ink); border-color:var(--hairline-3); }
.act.go{    border-color:rgba(47,224,161,0.42); background:var(--clear-dim); color:var(--state-clear); }
.act.no{    border-color:rgba(255,77,94,0.42); background:var(--crisis-dim); color:var(--state-crisis); }
.act.amber{ border-color:rgba(245,181,68,0.42); background:var(--caution-dim); color:var(--state-caution); }
.act.violet{border-color:rgba(168,85,247,0.45); background:var(--active-dim); color:var(--violet-ink); }
.act.icon{ flex:0 0 auto; width:34px; padding:8px 0; font-size:13px; }

/* ---- table (inventory) ---------------------------------------------- */
.tbl{ width:100%; border-collapse:collapse; font-size:11px; }
.tbl th{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4); text-align:right; padding:0 4px 7px; font-weight:400; }
.tbl th:first-child{ text-align:left; }
.tbl td{ padding:7px 4px; border-top:1px solid var(--hairline); text-align:right; font-family:var(--font-mono); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tbl td:first-child{ text-align:left; font-family:var(--font-ui); color:var(--ink); font-weight:500; }
.tbl tr.low td{ color:var(--state-caution); } .tbl tr.low td:first-child::after{ content:" ▾"; color:var(--state-caution); }
.tbl tr.dead td:first-child{ color:var(--ink-4); }
.tbl tr.dead td:first-child::after{ content:" idle"; font-family:var(--font-mono); font-size:8px; color:var(--state-caution); letter-spacing:0.06em; }

/* warehouse / loadout bars */
.wbar{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--hairline); }
.wbar:last-child{ border-bottom:none; }
.wbar .wn{ font-size:12px; color:var(--ink); }
.wbar .wn small{ font-family:var(--font-mono); font-size:8.5px; color:var(--ink-4); margin-left:6px; letter-spacing:0.06em; }
.wbar .wn .hub-flag{ font-family:var(--font-mono); font-style:normal; font-size:7.5px; letter-spacing:0.1em; color:var(--gold-bright); border:1px solid rgba(245,181,68,0.4); border-radius:99px; padding:1px 5px; margin-left:7px; vertical-align:middle; }
.wbar .wp{ font-family:var(--font-mono); font-size:10px; color:var(--tn,var(--ink-3)); }
.wbar .track{ grid-column:1 / -1; height:5px; border-radius:99px; background:var(--graphite); overflow:hidden; }
.wbar .track > i{ display:block; height:100%; border-radius:99px; background:var(--tn,linear-gradient(90deg,var(--violet),var(--ultraviolet))); }

/* ---- hub state (warehouse / dispatch detail) ------------------------ */
.hub-state{ display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border-radius:var(--r-md);
  border:1px solid var(--hairline-2); background:linear-gradient(180deg, rgba(37,31,51,0.45), rgba(22,19,31,0.45)); }
.hub-state.is-hub{ border-color:rgba(245,181,68,0.4); background:linear-gradient(180deg, rgba(212,176,98,0.12), rgba(212,176,98,0.03)); }
.hub-state .hub-ico{ font-size:18px; line-height:1.2; color:var(--ink-4); }
.hub-state.is-hub .hub-ico{ color:var(--gold-bright); text-shadow:0 0 10px rgba(245,181,68,0.5); }
.hub-state .hub-txt{ flex:1; min-width:0; }
.hub-state .hub-h{ font-size:12px; color:var(--ink); letter-spacing:0.01em; }
.hub-state.is-hub .hub-h{ color:var(--gold-bright); }
.hub-state .hub-s{ font-family:var(--font-mono); font-size:9px; color:var(--ink-3); letter-spacing:0.04em; margin-top:3px; line-height:1.5; text-wrap:pretty; }
.hub-state .hub-flag{ align-self:center; font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; color:var(--gold-bright); border:1px solid rgba(245,181,68,0.4); border-radius:99px; padding:2px 6px; flex:none; }

/* ---- agent card ----------------------------------------------------- */
.agent{ background:linear-gradient(180deg, rgba(37,31,51,0.55), rgba(22,19,31,0.55)); border:1px solid var(--hairline-2); border-radius:var(--r-md); overflow:hidden; }
.agent .ah{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--hairline); }
.agent .ah .pf{ width:34px; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--hairline-2); }
.agent .ah .pf img{ width:100%; height:100%; object-fit:cover; }
.agent .ah .who .nm{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); }
.agent .ah .who .tr{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tn,var(--ink-3)); margin-top:2px; }
.agent .stat-row{ display:flex; gap:6px; align-items:center; }
.agent .wallet{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); }
.agent .wallet .w{ background:var(--graphite); padding:8px 8px; text-align:center; }
.agent .wallet .w .wk{ font-family:var(--font-mono); font-size:7px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4); }
.agent .wallet .w .wv{ font-family:var(--font-mono); font-size:11px; color:var(--ink); margin-top:2px; }
.agent .afoot{ display:flex; gap:6px; padding:10px 12px; }

/* loc/status mini pill */
.spill{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 7px; border-radius:99px; border:1px solid var(--hairline-2); color:var(--ink-3); }
.spill.on{ color:var(--state-clear); border-color:rgba(47,224,161,0.4); }
.spill.off{ color:var(--ink-4); }

/* ---- CRM contact card ----------------------------------------------- */
.contact{ background:linear-gradient(180deg, rgba(37,31,51,0.5), rgba(22,19,31,0.5)); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; transition:border-color var(--dur-fast); }
.contact:hover{ border-color:var(--hairline-3); }
.contact.sel{ border-color:rgba(168,85,247,0.5); box-shadow:var(--glow-soft); }
.contact .cr1{ display:flex; align-items:center; justify-content:space-between; }
.contact .agent-tag{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.06em; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.contact .agent-tag::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--violet); }
.contact .cr2{ display:flex; align-items:center; justify-content:space-between; margin-top:7px; }
.contact .cn{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); }
.contact .cright{ display:flex; align-items:center; gap:7px; }
.contact .spend{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink); border:1px solid var(--hairline-2); border-radius:99px; padding:3px 9px; }
.contact .chip-chat{ flex:0 0 auto; padding:5px 11px; font-size:8.5px; }
.contact .warn{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.08em; color:var(--state-crisis); margin-top:6px; }
.contact .recent{ margin-top:8px; padding-top:8px; border-top:1px solid var(--hairline); display:none; }
.contact.sel .recent{ display:block; }
.contact .recent .rl{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:6px; }
.contact .recent .ro{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--ink-2); padding:2px 0; }

/* ---- chat threads --------------------------------------------------- */
.thread{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:linear-gradient(180deg, rgba(37,31,51,0.5), rgba(22,19,31,0.5)); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; transition:border-color var(--dur-fast); }
.thread:hover{ border-color:var(--hairline-3); }
.thread.fresh{ border-color:rgba(47,224,161,0.5); box-shadow:0 0 0 1px rgba(47,224,161,0.15), var(--glow-soft); }
.thread .tav{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:#0b0a13; }
.thread .tmid .tn{ display:flex; align-items:center; gap:7px; }
.thread .tmid .tn b{ font-size:13px; color:var(--ink); }
.thread .tmid .tn .rl{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4); }
.thread .tmid .tx{ font-size:11.5px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.thread .tmid .tx.eph{ color:var(--state-caution); font-family:var(--font-mono); font-size:10px; }
.thread .trt{ text-align:right; }
.thread .trt .tt{ font-family:var(--font-mono); font-size:9px; color:var(--ink-4); }
.thread .trt .badge{ display:inline-block; margin-top:4px; min-width:17px; height:17px; line-height:17px; border-radius:99px; background:var(--violet); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:600; padding:0 5px; }

/* segmented window control (sales today/7d/30d) */
.seg{ display:inline-flex; background:var(--graphite); border:1px solid var(--hairline-2); border-radius:var(--r-pill); padding:2px; gap:2px; }
.seg button{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); background:transparent; border:none; border-radius:99px; padding:5px 11px; cursor:pointer; }
.seg button.on{ color:var(--ink); background:var(--active-dim); }

/* ---- create trigger (opens a draw) ---------------------------------- */
.ctrl-create{ width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  padding:11px; border-radius:var(--r-sm); border:1px dashed rgba(47,224,161,0.45); background:var(--clear-dim);
  color:var(--state-clear); cursor:pointer; transition:all var(--dur-fast); }
.ctrl-create:hover{ border-style:solid; box-shadow:var(--glow-clear); }
.ctrl-find .add[data-create]{ border-style:solid; }

/* ---- create draw (slide-in form) ------------------------------------ */
.cdrawer{ z-index:70; width:394px; }
.cdraw-scrim{ z-index:65; background:rgba(4,4,9,0.5); backdrop-filter:blur(3px); }

.cform{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.cfield{ grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; }
.cfield.half{ grid-column:auto; }
.cfield label{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); }
.cfield input, .cfield select, .cfield textarea{ width:100%; height:38px; border-radius:var(--r-sm); border:1px solid var(--hairline-2);
  background:rgba(16,14,25,0.72); color:var(--ink); padding:0 12px; font-family:var(--font-ui); font-size:13px; outline:none;
  transition:border-color var(--dur-fast); }
.cfield textarea{ height:auto; min-height:74px; padding:10px 12px; resize:vertical; line-height:1.55; }
.cfield select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%237b7490' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; }
.cfield input::placeholder, .cfield textarea::placeholder{ color:var(--ink-4); }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus{ border-color:color-mix(in srgb, var(--ac,var(--violet)) 55%, transparent); }

.cform-sec{ grid-column:1 / -1; font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-4); border-top:1px solid var(--hairline); padding-top:14px; margin-top:2px; }

/* live profit calculator (Add Item) */
.cform-calc{ grid-column:1 / -1; border-radius:var(--r-md); padding:13px;
  border:1px solid color-mix(in srgb, var(--ac,var(--violet)) 30%, var(--hairline));
  background:linear-gradient(180deg, color-mix(in srgb, var(--ac,var(--violet)) 9%, rgba(16,14,25,0.55)), rgba(16,14,25,0.5)); }
.cc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.cc-head > span:first-child{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.cc-marg{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.04em; padding:3px 8px; border-radius:99px;
  border:1px solid var(--hairline-2); color:var(--ink-3); }
.cc-marg.pos{ color:#2FE0A1; border-color:rgba(47,224,161,0.4); background:rgba(47,224,161,0.08); }
.cc-marg.neg{ color:#FF6B6B; border-color:rgba(255,107,107,0.4); background:rgba(255,107,107,0.08); }
.cc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.cc-cell{ background:rgba(11,10,19,0.5); border:1px solid var(--hairline-2); border-radius:var(--r-sm); padding:9px 11px; }
.cc-cell.cc-big{ grid-column:1 / -1; background:color-mix(in srgb, var(--ac,var(--violet)) 12%, rgba(11,10,19,0.5));
  border-color:color-mix(in srgb, var(--ac,var(--violet)) 35%, transparent); }
.cc-k{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
.cc-v{ font-family:var(--font-display,var(--font-ui)); font-weight:600; font-size:18px; color:var(--ink); margin-top:4px; font-variant-numeric:tabular-nums; }
.cc-cell.cc-big .cc-v{ font-size:23px; }
.cc-v.pos{ color:#5BE8B6; }
.cc-v.neg{ color:#FF8080; }
.cc-note{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.02em; color:var(--ink-4); margin-top:10px; line-height:1.4; }

.cform-foot{ grid-column:1 / -1; display:flex; gap:9px; margin-top:6px; }
.cform-foot button{ flex:1; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:12px; border-radius:var(--r-sm); cursor:pointer; border:1px solid var(--hairline-2); background:var(--panel-2);
  color:var(--ink-2); transition:all var(--dur-fast); }
.cform-foot .cancel:hover{ color:var(--ink); border-color:var(--hairline-3); }
.cform-foot .submit{ flex:1.4; border-color:color-mix(in srgb, var(--ac,var(--violet)) 55%, transparent);
  background:color-mix(in srgb, var(--ac,var(--violet)) 16%, transparent); color:var(--ac,var(--violet-ink)); }
.cform-foot .submit:hover{ box-shadow:0 0 20px color-mix(in srgb, var(--ac,var(--violet)) 35%, transparent); }

/* ---- chat draw (open a thread) -------------------------------------- */
.drawer-body.chatmode{ gap:12px; }
.chat-head-meta{ margin-top:13px; display:flex; flex-direction:column; gap:8px; }
.chatdraw .eyebrow2{ flex-wrap:wrap; gap:8px; }
.chatdraw .eyebrow2 .chan-sub{ font-family:var(--font-mono); text-transform:none; letter-spacing:0.02em; color:var(--ink-3); font-size:10px; }
.chatdraw h2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chatdraw h2 .name-status{ font-size:8px; }
.chatdraw .sub:empty{ display:none; }
.chm-alert{ margin-left:auto; font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.08em; color:var(--state-crisis); text-align:right; align-self:center; }
.chm-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.chm-stat{ display:inline-flex; flex-direction:column; gap:1px; font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
.chm-stat b{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); letter-spacing:0; }
.chat-chan{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cc,var(--violet));
  border:1px solid color-mix(in srgb, var(--cc,var(--violet)) 42%, transparent); border-radius:var(--r-pill); padding:5px 11px; }
.chat-chan .d{ width:7px; height:7px; border-radius:99px; background:var(--cc,var(--violet)); box-shadow:0 0 8px var(--cc,var(--violet)); }
.chat-sec{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.05em; color:var(--state-caution); }

.chat-perf .recent-line{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-4); margin-top:9px; padding-top:9px; border-top:1px solid var(--hairline); }
.chat-warn{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.08em; color:var(--state-crisis); margin-top:8px; }
.chat-norec{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); }

.chat-log{ flex:1; min-height:90px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px 2px 0; }
.chat-log::-webkit-scrollbar{ width:6px; } .chat-log::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:99px; }
.chat-bubble{ max-width:82%; padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.45; color:var(--ink); }
.chat-bubble .bt{ display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:0.06em; color:var(--ink-4); margin-top:5px; }
.chat-bubble.in{ align-self:flex-start; background:var(--panel-2); border:1px solid var(--hairline-2); border-bottom-left-radius:4px; }
.chat-bubble.out{ align-self:flex-end; border-bottom-right-radius:4px;
  background:color-mix(in srgb, var(--ac,var(--violet)) 20%, transparent); border:1px solid color-mix(in srgb, var(--ac,var(--violet)) 45%, transparent); }

.chat-compose{ display:flex; gap:8px; }
.chat-compose input{ flex:1; height:40px; border-radius:var(--r-sm); border:1px solid var(--hairline-2); background:rgba(16,14,25,0.72);
  color:var(--ink); padding:0 13px; font-family:var(--font-ui); font-size:13px; outline:none; }
.chat-compose input::placeholder{ color:var(--ink-4); }
.chat-compose input:focus{ border-color:color-mix(in srgb, var(--ac,var(--violet)) 55%, transparent); }
.chat-compose button{ flex:0 0 auto; padding:0 17px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ac,var(--violet)) 55%, transparent); background:color-mix(in srgb, var(--ac,var(--violet)) 18%, transparent);
  color:var(--ac,var(--violet-ink)); font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; }
.chat-compose button:hover{ box-shadow:0 0 16px color-mix(in srgb, var(--ac,var(--violet)) 32%, transparent); }

/* ---- clickable inventory rows (open a detail draw) ------------------ */
.wbar.clk{ cursor:pointer; }
.wbar.clk:hover .wn{ color:var(--ink); }
.wbar.clk:hover{ background:rgba(255,255,255,0.02); }
.ccard.clk{ cursor:pointer; transition:border-color var(--dur-fast); }
.ccard.clk:hover{ border-color:var(--hairline-3); }
.infodraw .tbl td:nth-child(2), .infodraw .tbl td:nth-child(3){ font-variant-numeric:tabular-nums; }
.infodraw .prow{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); padding:7px 0; border-bottom:1px solid var(--hairline); }
.infodraw .prow:last-child{ border-bottom:none; }
.infodraw .prow span:last-child{ color:var(--ink); }
.infodraw .stat-row .spill{ font-size:8.5px; }

/* ---- vendor scorecard expand (inline on supply card) ---------------- */
.vscore{ display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline); }
.ccard.vexp .vscore{ display:block; }
.vscore .mini .mv{ font-size:12px; }
.paylines{ display:flex; flex-direction:column; gap:7px; }
.payline{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 10px;
  border:1px solid var(--hairline); border-radius:var(--r-sm); background:var(--graphite); }
.payline.pref{ border-color:color-mix(in srgb,var(--state-clear) 45%, transparent); background:var(--clear-dim); }
.payline .pm{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; color:var(--ink); display:flex; align-items:center; gap:7px; }
.payline .pd{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); text-align:right; white-space:nowrap; }
.pref-badge{ font-family:var(--font-mono); font-size:7px; letter-spacing:0.1em; color:var(--state-clear);
  border:1px solid color-mix(in srgb,var(--state-clear) 40%,transparent); border-radius:99px; padding:1px 5px; }

/* ---- All Items: pin search, scroll only the list + below ------------ */
.ctrl-body.fitcol{ overflow:hidden; gap:0; }
.inv-fit{ display:flex; flex-direction:column; height:100%; gap:12px; min-height:0; }
.inv-scroll{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px; }
.inv-scroll::-webkit-scrollbar{ width:7px; }
.inv-scroll::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:99px; }

/* stacked inventory action buttons */
.inv-actions{ display:flex; flex-direction:column; gap:8px; }
.ctrl-create.move{ border-style:solid; border-color:rgba(77,159,255,0.45); background:color-mix(in srgb,#4D9FFF 14%, transparent); color:#7db4ff; }
.ctrl-create.move:hover{ box-shadow:0 0 16px color-mix(in srgb,#4D9FFF 32%, transparent); }
.ctrl-create span{ font-weight:700; }

/* ---- request tracking timeline -------------------------------------- */
.track-tl{ display:flex; flex-direction:column; padding:2px 0; }
.tstep{ display:grid; grid-template-columns:auto 1fr; gap:12px; position:relative; }
.tstep .td{ width:14px; height:14px; border-radius:99px; border:2px solid var(--hairline-3); background:var(--graphite); margin-top:1px; position:relative; z-index:1; }
.tstep::before{ content:""; position:absolute; left:6px; top:14px; bottom:-2px; width:2px; background:var(--hairline-2); }
.tstep:last-child::before{ display:none; }
.tstep.done .td{ background:var(--state-clear); border-color:var(--state-clear); }
.tstep.done::before{ background:var(--state-clear); }
.tstep.now .td{ background:#4D9FFF; border-color:#4D9FFF; box-shadow:0 0 10px #4D9FFF; }
.tstep .tl-mid{ padding-bottom:15px; }
.tstep .ts-name{ font-size:13px; color:var(--ink); }
.tstep.todo .ts-name{ color:var(--ink-4); }
.tstep .ts-sub{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.tstep.todo .ts-sub{ color:var(--ink-4); }

/* ---- missions ------------------------------------------------------- */
.mcard .ttl{ display:flex; align-items:center; gap:8px; }
.mcard .mglyph{ font-size:14px; line-height:1; }
.mcard .mtime{ font-family:var(--font-mono); color:var(--ink-3); }
.mclock{ font-family:var(--font-mono); font-weight:600; font-size:30px; letter-spacing:0.04em; color:var(--ink);
  font-variant-numeric:tabular-nums; background:var(--graphite); border:1px solid var(--hairline-2); border-radius:var(--r-md);
  padding:14px 16px; text-align:center; }
.mclock-bal{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--ink-3); text-align:center; margin-top:2px; }
.mclock-bal b{ color:var(--ultraviolet); }

/* --------------------------------------------- reposition map chrome --- */
/* Left panel now owns the lower-left; push map controls to the right edge. */
.zoombar{ left:calc(var(--ctrl-w) + 28px); right:auto; bottom:14px; flex-direction:row; }
.level-ind{ left:calc(var(--ctrl-w) + 28px); right:auto; bottom:62px; }
.legend{ left:calc(var(--ctrl-w) + 166px); right:auto; bottom:14px; max-width:34vw; }

@media (max-width:1280px){ .legend{ display:none; } }

/* ----------------------------------------------- MAP LAYER CONTROLS (topbar) */
.map-ctrls{ display:flex; align-items:center; gap:3px; }
.mc-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
  cursor:pointer; padding:0; border:1px solid var(--hairline-2); border-radius:var(--r-sm);
  background:var(--panel); color:var(--c,var(--ink-2)); transition:all var(--dur-fast); }
.mc-btn .mc-ic{ font-size:13px; line-height:1; font-family:var(--font-display); }
.mc-btn:hover{ border-color:var(--hairline-3); background:var(--panel-2); }
.mc-btn.on{ color:var(--c); border-color:color-mix(in oklab, var(--c) 48%, var(--hairline-2));
  background:color-mix(in oklab, var(--c) 12%, var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 22%, transparent), 0 0 11px -5px var(--c); }
.mc-btn.off{ color:var(--ink-4); opacity:0.55; }
.mc-btn.off:hover{ opacity:0.85; color:var(--ink-3); }
.mc-sep{ width:1px; height:17px; background:var(--hairline-2); margin:0 3px; flex:none; }

@media (max-width:1100px){ .map-ctrls .mc-sep{ display:none; } .mc-btn{ width:27px; height:27px; } }
@media (max-width:880px){ .map-ctrls{ display:none; } }
/* Floating toggle + scrim, hidden on desktop. */
.ctrl-fab{ position:fixed; left:14px; bottom:14px; z-index:34; display:none;
  align-items:center; gap:9px; height:46px; padding:0 18px 0 15px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(37,31,51,0.92), rgba(16,14,25,0.92)); backdrop-filter:blur(10px);
  border:1px solid rgba(212,176,98,0.4); color:var(--gold-bright); cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  box-shadow:var(--shadow-3), var(--glow-soft); }
.ctrl-fab .g{ width:9px; height:9px; border-radius:3px; background:var(--gold); box-shadow:var(--glow-gold); }
.ctrl-fab:active{ box-shadow:var(--glow-gold); }
.ctrl-fab .x{ display:none; }
.ctrl-scrim{ position:fixed; inset:0; z-index:33; background:rgba(4,4,9,0.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base); }

.ctrl-close{ display:none; position:absolute; top:11px; right:11px; z-index:3; width:30px; height:30px;
  border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--hairline-2); color:var(--ink-3);
  cursor:pointer; font-size:16px; align-items:center; justify-content:center; }
.ctrl-close:hover{ color:var(--ink); background:var(--panel-3); }

@media (max-width:880px){
  .control{
    left:0; top:0; bottom:0; width:min(372px,90vw); max-width:none;
    border-radius:0 var(--r-lg) var(--r-lg) 0; border-left:none;
    transform:translateX(-104%); transition:transform var(--dur-base) var(--ease-out);
  }
  body.ctrl-open .control{ transform:translateX(0); }
  body.ctrl-open .ctrl-scrim{ opacity:1; pointer-events:auto; }
  .ctrl-fab{ display:inline-flex; }
  body.ctrl-open .ctrl-fab{ display:none; }
  .ctrl-close{ display:flex; }
  .ctrl-head{ padding-right:50px; }            /* clear the close button */
  /* map chrome already sits in the lower-left when the panel is closed; nudge above the FAB */
  .zoombar, .level-ind{ left:auto; right:14px; }
  .zoombar{ flex-direction:column; bottom:14px; }
  .level-ind{ bottom:148px; }
}