/* CodeNSM — Virtual Office (canvas edition). Loads AFTER codensm.css and
   reuses its custom props (--mint --sky --peach --lav --rose --amber, dark
   bg, mono/sans stacks). All floor drawing happens in ONE <canvas>
   (office.js); this file styles only the HTML chrome around it: tabs, HUD,
   legend, tooltip, unit card, empty state. */

/* ── project section tabs ─────────────────────────────────────────────── */
.cn-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px;font-family:var(--mono);font-size:.78rem}
.cn-tabs a{padding:8px 15px;border-radius:10px;border:1px solid transparent;color:var(--dim);
  transition:color .2s,border-color .2s,background .2s}
.cn-tabs a:hover{color:var(--ink);border-color:var(--line)}
.cn-tabs a.on{color:var(--mint);border-color:rgba(126,240,201,.35);background:rgba(126,240,201,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* ── page chrome ──────────────────────────────────────────────────────── */
.office-sub{color:var(--soft);max-width:64ch;margin:14px 0 6px}
.office-icp{font-family:var(--mono);font-size:.72rem;color:var(--dim);letter-spacing:.08em;margin-bottom:6px}
.office-icp b{color:var(--soft);font-weight:600}
.office-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-top:26px}

/* legend */
.office-legend{display:flex;gap:13px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:.68rem;color:var(--soft);padding-bottom:4px}
.lg-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lg-chip i{width:9px;height:9px;border-radius:3px;display:block}
.lg-chip.s-fit i{background:var(--mint)}
.lg-chip.s-keystone i{background:var(--sky)}
.lg-chip.s-vital_rare i{background:var(--lav)}
.lg-chip.s-overloaded i{background:var(--peach)}
.lg-chip.s-fragile i{background:var(--rose)}
.lg-chip.s-drowsy i{background:#b7a97e}
.lg-chip.s-sleeping i{background:#6d6885}

/* ── stage: one canvas, whole floor always in view ────────────────────── */
.office-stage{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(120% 100% at 50% 0%,#0e1119 0%,#0a0d12 70%);
  box-shadow:var(--press);padding:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
#officeCanvas{display:block}
.office-empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:.82rem;color:var(--dim);letter-spacing:.06em;
  background:rgba(10,12,17,.35)}
.office-empty b{color:var(--soft);font-weight:600}
.office-empty[hidden]{display:none}
.office-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:10px;letter-spacing:.05em}
.office-foot .live{color:var(--mint)}
.office-foot .live::before{content:"● ";animation:pulse 2.4s infinite}

/* ── top HUD strip — one slim resource bar ────────────────────────────── */
.office-hud{display:flex;flex-wrap:wrap;align-items:stretch;font-family:var(--mono);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:linear-gradient(180deg,#151a28,#0c0f17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5),
    0 10px 24px -18px #000}
.hud-cell{display:flex;align-items:baseline;gap:7px;padding:9px 16px;white-space:nowrap;
  border-right:1px solid var(--line-2)}
.hud-cell:last-child{border-right:0}
.hud-cell i{font-style:normal;font-size:.78rem;line-height:1;opacity:.9}
.hud-cell b{font-size:.98rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hud-cell small{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.hud-active b{color:var(--mint)}
.hud-calls b{color:var(--sky)}
.hud-snooze b{color:#a49ec4}
.hud-stress b{color:var(--peach)}
.hud-err b{color:var(--rose)}

/* ── tooltip ──────────────────────────────────────────────────────────── */
.office-tip{position:absolute;z-index:6;pointer-events:none;min-width:196px;max-width:256px;
  background:rgba(13,16,23,.97);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;box-shadow:0 20px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  font-size:.76rem;line-height:1.5;backdrop-filter:blur(8px);
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.office-tip.show{opacity:1;transform:translateY(0)}
.tip-fn{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--ink);
  word-break:break-all;margin-bottom:2px}
.tip-desc{font-style:italic;font-size:.66rem;color:var(--dim);line-height:1.45;margin-bottom:3px}
.tip-role{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.tip-state{display:inline-block;font-family:var(--mono);font-size:.68rem;padding:2px 9px;
  border-radius:12px;border:1px solid currentColor;margin-bottom:9px}
.tip-state.s-fit{color:var(--mint)}.tip-state.s-keystone{color:var(--sky)}
.tip-state.s-vital_rare{color:var(--lav)}.tip-state.s-overloaded{color:var(--peach)}
.tip-state.s-fragile{color:var(--rose)}.tip-state.s-freeloader{color:var(--amber)}
.tip-state.s-dormant{color:#a49ec4}
.tip-row{display:flex;justify-content:space-between;gap:14px;padding:2.5px 0;
  border-top:1px solid var(--line-2);color:var(--soft)}
.tip-row b{font-family:var(--mono);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tip-debt{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  padding:1.5px 8px;border-radius:10px;border:1px solid}
.tip-debt.d-none{color:var(--dim);border-color:var(--line)}
.tip-debt.d-emerging{color:var(--amber);border-color:rgba(239,217,163,.5)}
.tip-debt.d-accruing{color:var(--peach);border-color:rgba(244,203,168,.55)}
.tip-debt.d-critical{color:#f1857f;border-color:rgba(241,133,127,.6)}
.tip-cta{font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-top:8px}

/* ── unit card — fixed bottom-left of the VIEWPORT ────────────────────── */
.office-unit{display:flex;gap:13px;padding:12px 34px 12px 13px;border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,rgba(21,26,40,.97),rgba(11,14,21,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 52px -22px #000;
  font-family:var(--mono)}
.office-unit--fixed{position:fixed;left:14px;bottom:14px;width:auto;max-width:360px;
  z-index:2147483647;pointer-events:auto}
.uc-portbox{flex:0 0 auto;width:68px;height:82px;display:flex;align-items:center;
  justify-content:center;border-radius:9px;border:1px solid var(--line);
  background:radial-gradient(90% 80% at 50% 20%,#131726,#0a0d13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.uc-port{display:block}
.uc-main{flex:1;min-width:0}
.uc-name{font-size:.8rem;font-weight:700;color:var(--ink);word-break:break-all;line-height:1.3}
.uc-desc{font-style:italic;font-size:.68rem;color:var(--soft);line-height:1.45;margin-top:2px}
.uc-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:3px 0 7px}
.uc-role{font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.uc-state{font-size:.6rem;padding:1px 8px;border-radius:10px;border:1px solid currentColor}
.uc-state.s-fit{color:var(--mint)}.uc-state.s-keystone{color:var(--sky)}
.uc-state.s-vital_rare{color:var(--lav)}.uc-state.s-overloaded{color:var(--peach)}
.uc-state.s-fragile{color:var(--rose)}.uc-state.s-freeloader{color:var(--amber)}
.uc-state.s-dormant{color:#a49ec4}
.uc-hp{height:6px;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);margin-bottom:8px}
.uc-hp i{display:block;height:100%;border-radius:2px}
.uc-hp i.hp-g{background:var(--mint)}
.uc-hp i.hp-a{background:var(--amber)}
.uc-hp i.hp-r{background:#f1857f}
.uc-grid{display:flex;gap:5px 15px;flex-wrap:wrap}
.uc-cell{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.uc-cell i{font-style:normal;font-size:.68rem;opacity:.85}
.uc-cell b{font-size:.74rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.uc-cell small{font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.uc-cell b.uc-debt.d-none{color:var(--dim)}
.uc-cell b.uc-debt.d-emerging{color:var(--amber)}
.uc-cell b.uc-debt.d-accruing{color:var(--peach)}
.uc-cell b.uc-debt.d-critical{color:#f1857f}
.uc-dossier{display:inline-block;margin-top:9px;font-size:.66rem;letter-spacing:.05em;
  padding:5px 12px;border-radius:9px;border:1px solid rgba(126,240,201,.4);
  color:var(--mint);background:rgba(126,240,201,.06)}
.uc-dossier:hover{background:rgba(126,240,201,.12)}
.uc-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);
  font-size:.62rem;line-height:1;cursor:pointer;font-family:var(--mono)}
.uc-close:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
/* cluster member list inside the card */
.uc-list{margin-top:8px;max-height:220px;overflow:auto;border-top:1px solid var(--line-2)}
.uc-list-row{display:flex;justify-content:space-between;gap:14px;padding:4px 2px;
  font-size:.68rem;color:var(--soft);border-bottom:1px solid var(--line-2)}
.uc-list-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.uc-list-row.lnk{cursor:pointer}
.uc-list-row.lnk:hover{color:var(--mint)}
.uc-list-row.lnk:hover b{color:var(--mint)}
.uc-list-more{padding:6px 2px;font-size:.62rem;color:var(--dim)}

/* ── demo page (public marketing surface) ─────────────────────────────── */
.demo-hero{padding:136px 0 8px;text-align:left}
.demo-hero h1{margin:6px 0 16px}
.demo-hero .lead{margin-bottom:26px}
.demo-hero .cta-row{margin-bottom:8px}
.okr-strip{margin-top:30px;border:1px solid var(--line);border-radius:16px;padding:18px 22px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise)}
.okr-kpis{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:14px}
.okpi .v{display:block;font-family:var(--mono);font-size:1.45rem;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.okpi .l{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-top:2px}
.okr-krs{display:flex;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:14px}
.kr-chip{font-family:var(--mono);font-size:.7rem;padding:5px 12px;border-radius:16px;
  border:1px solid;white-space:nowrap}
.kr-chip i{font-style:normal;opacity:.55;margin-left:4px}
.kr-chip.ok{color:var(--mint);border-color:rgba(126,240,201,.4);background:rgba(126,240,201,.06)}
.kr-chip.miss{color:var(--peach);border-color:rgba(244,203,168,.5);background:rgba(244,203,168,.07)}
.demo-note{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:12px;letter-spacing:.05em}

@media(max-width:720px){
  .office-top{flex-direction:column;align-items:flex-start}
  .hud-cell{padding:7px 11px;gap:5px}
  .hud-cell b{font-size:.85rem}
  .okr-kpis{gap:22px}
  .office-unit--fixed{left:0;right:0;bottom:0;width:100%;max-width:none;
    border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:10px 30px 10px 12px;gap:10px}
  .office-unit--fixed .uc-portbox{width:48px;height:60px}
}

/* reduced motion: static chrome, no pulsing dot */
@media(prefers-reduced-motion:reduce){
  .office-tip{transition:none}
  .office-foot .live::before{animation:none}
}