/* ════════════════════════════════════════════════════════════════════
   COMMAND · the owner/manager HQ
   Storm Stream "The Sweep" radar grammar fused with Bounce "The Climb",
   re-tokened onto Canvass Pro's palette. Loaded after tokens.css; adds
   only --cmd-* names, never swaps the palette. Dark instrument island.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --cmd-accent: var(--tool-canvasspro, var(--ember));
  --cmd-accent-text: var(--tool-canvasspro-text, var(--ember-hi));
  --cmd-live: var(--green);
  --cmd-warn: var(--amber);
  --cmd-bad: var(--red);
  --cmd-well: color-mix(in srgb, var(--obsidian) 86%, var(--green));   /* the scope ground: a near-black navy-green */
}

.cmd {
  position: fixed; inset: 0; z-index: 1400;
  background: var(--obsidian);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: none;
  color: var(--platinum);
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.cmd.on { display: block; animation: cmdIn 260ms var(--ease-exit, ease); }
@keyframes cmdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── sticky command bar ─────────────────────────────────────────────── */
.cmd-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px max(16px, env(safe-area-inset-left)) 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--obsidian) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line-hi);
}
.cmd-bar .cmd-mark { width: 22px; height: 22px; color: var(--cmd-accent); flex: 0 0 auto; }
.cmd-bar .cmd-title { font: 700 14px/1 var(--disp, var(--body)); letter-spacing: .14em; text-transform: uppercase; }
.cmd-bar .cmd-title span { color: var(--cmd-accent-text); }
.cmd-role {
  font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-chip, 9px); color: var(--cmd-accent-text);
  background: var(--tint-ember); border: 1px solid color-mix(in srgb, var(--cmd-accent) 40%, transparent);
}
.cmd-bar .grow { flex: 1 1 auto; }
.cmd-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--graphite-2); border: 1px solid var(--line); color: var(--plat-dim); cursor: pointer;
  transition: background var(--m-fast, .14s) ease, color var(--m-fast, .14s) ease;
}
.cmd-icon-btn:hover { background: var(--graphite); color: var(--platinum); }
.cmd-icon-btn svg { width: 18px; height: 18px; }
.cmd-icon-btn.spin svg { animation: cmdSpin 900ms linear infinite; }
@keyframes cmdSpin { to { transform: rotate(360deg); } }

/* ── inner tab rail ─────────────────────────────────────────────────── */
.cmd-tabs { display: flex; gap: 2px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; }
.cmd-tabs::-webkit-scrollbar { display: none; }
.cmd-tab {
  font: 600 12.5px/1 var(--body); padding: 10px 14px; white-space: nowrap;
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--plat-faint); cursor: pointer;
}
.cmd-tab.on { color: var(--platinum); border-bottom-color: var(--cmd-accent); }

.cmd-body { max-width: 1080px; margin: 0 auto; padding: 14px 16px 0; }
.cmd-pane { display: none; }
.cmd-pane.on { display: block; animation: cmdIn 200ms ease; }

/* ── verdict header + pulse ─────────────────────────────────────────── */
.cmd-verdict {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line-hi); border-radius: var(--r-card);
  background: var(--graphite); margin-bottom: 14px;
}
.cmd-verdict .v-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cmd-live); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--cmd-live) 75%, transparent); animation: cmdPulse 1.8s ease-in-out infinite; flex: 0 0 auto; }
.cmd-verdict.warn .v-dot { background: var(--cmd-warn); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--cmd-warn) 75%, transparent); }
.cmd-verdict .v-label { font: 700 13px var(--disp, var(--body)); letter-spacing: .1em; text-transform: uppercase; }
.cmd-verdict .v-sub { font: 500 12px var(--mono); color: var(--plat-faint); }
@keyframes cmdPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── the scope: a conic sweep over the KPI island ───────────────────── */
.cmd-scope {
  position: relative; border: 1px solid var(--line-hi); border-radius: var(--r-card-lg, 20px);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cmd-accent) 6%, var(--cmd-well)), var(--cmd-well) 62%, var(--obsidian));
  overflow: hidden; margin-bottom: 14px;
}
.cmd-scope-rings { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.cmd-scope-beam {
  position: absolute; inset: -20%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--cmd-live) 26%, transparent) 350deg, color-mix(in srgb, var(--cmd-live) 42%, transparent) 360deg);
  animation: cmdSweep 6s linear infinite; transform-origin: 50% 50%;
}
@keyframes cmdSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cmd-scope-beam { animation: none; opacity: .25; } .cmd-verdict .v-dot { animation: none; } .cmd-wire-head .live-dot { animation: none; } }
.cmd-pulse-face { position: relative; z-index: 2; text-align: center; padding: 26px 16px 20px; }
.cmd-pulse-num { font: 700 clamp(46px, 14vw, 72px)/0.9 var(--disp, var(--body)); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cmd-pulse-num small { font-size: .34em; color: var(--plat-faint); letter-spacing: 0; }
.cmd-pulse-cap { font: 600 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-faint); margin-top: 8px; }
.cmd-pulse-cap b { color: var(--cmd-accent-text); }

/* ── hairline-grid KPI tiles (the 1px-gap trick) ────────────────────── */
.cmd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 14px; }
.cmd-kpi { background: var(--graphite-2); padding: 14px 14px 13px; }
.cmd-kpi .k-v { font: 700 26px/1 var(--disp, var(--body)); font-variant-numeric: tabular-nums; }
.cmd-kpi .k-v.accent { color: var(--cmd-accent-text); }
.cmd-kpi .k-l { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--plat-faint); margin-top: 7px; }
/* the display font stylizes "%"; render the unit in the body font so a rate
   reads cleanly as "28.1%" instead of "28.1%o" */
.k-unit { font-family: var(--body); font-weight: 600; font-size: .74em; margin-left: 1px; }
.cmd-kpi .k-d { font: 500 11px var(--mono); margin-top: 4px; color: var(--plat-dim); }
.cmd-kpi .k-d.up { color: var(--cmd-live); } .cmd-kpi .k-d.down { color: var(--cmd-warn); }

/* ── the funnel strip ───────────────────────────────────────────────── */
.cmd-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 14px; }
.cmd-fstep { background: var(--graphite-2); padding: 14px 12px; position: relative; }
.cmd-fstep .f-v { font: 700 24px/1 var(--disp, var(--body)); font-variant-numeric: tabular-nums; }
.cmd-fstep .f-l { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); margin-top: 6px; }
.cmd-fstep .f-pct { font: 600 11px var(--mono); color: var(--cmd-accent-text); margin-top: 5px; }
.cmd-fstep .f-bar { height: 3px; border-radius: 2px; background: var(--cmd-accent); margin-top: 9px; opacity: .85; }

/* ── the wire ticker ────────────────────────────────────────────────── */
.cmd-wire { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite); overflow: hidden; margin-bottom: 14px; }
.cmd-wire-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.cmd-wire-head .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cmd-live); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--cmd-live) 70%, transparent); animation: cmdPulse 1.8s ease-in-out infinite; }
.cmd-wire-head span { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); }
.cmd-wire-list { max-height: 240px; overflow-y: auto; }
.cmd-wire-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 12.5px; }
.cmd-wire-row:first-child { border-top: none; }
.cmd-wire-row .w-sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cmd-wire-row .w-rep { font-weight: 600; color: var(--platinum); }
.cmd-wire-row .w-where { color: var(--plat-dim); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-wire-row .w-at { font: 500 11px var(--mono); color: var(--plat-faint); flex: 0 0 auto; }
.cmd-wire-row .w-ver { color: var(--cmd-live); flex: 0 0 auto; }

/* ── ruled ledger rows (reps, turf, team) ───────────────────────────── */
.cmd-block { margin-bottom: 18px; }
.cmd-block-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px 10px; }
.cmd-block-head .bh-l { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); }
.cmd-block-head .bh-r { font: 500 11px var(--mono); color: var(--plat-faint); }
.cmd-ledger { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--graphite); }
.cmd-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.cmd-row:first-child { border-top: none; }
.cmd-row.you { background: var(--tint-ember); }
.cmd-coin { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--mono); color: var(--obsidian); flex: 0 0 auto; }
.cmd-row .r-mid { flex: 1 1 auto; min-width: 0; }
.cmd-row .r-name { font-weight: 600; color: var(--platinum); display: flex; align-items: center; gap: 8px; }
.cmd-row .r-sub { font: 500 11px var(--mono); color: var(--plat-faint); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-row .r-fig { text-align: right; flex: 0 0 auto; }
.cmd-row .r-fig .rf-v { font: 700 18px/1 var(--disp, var(--body)); font-variant-numeric: tabular-nums; color: var(--cmd-accent-text); }
.cmd-row .r-fig .rf-l { font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); margin-top: 3px; }

/* per-rep mini climb pills */
.r-climb { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.r-pill { font: 600 10px var(--mono); padding: 3px 7px; border-radius: var(--r-chip, 9px); background: var(--graphite-2); border: 1px solid var(--line); color: var(--plat-dim); }
.r-pill b { color: var(--platinum); }
.r-pill.sale { border-color: color-mix(in srgb, var(--cmd-accent) 45%, transparent); color: var(--cmd-accent-text); }

.role-chip { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-chip, 9px); }
.role-chip.owner { color: var(--cmd-accent-text); background: var(--tint-ember); }
.role-chip.manager { color: var(--cmd-live); background: var(--tint-green); }
.role-chip.rep { color: var(--plat-dim); background: var(--graphite-2); }
.badge-live { font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cmd-live); background: var(--tint-green); padding: 2px 6px; border-radius: var(--r-chip, 9px); }
.badge-idle { font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--plat-faint); background: var(--graphite-2); padding: 2px 6px; border-radius: var(--r-chip, 9px); }

/* coverage bar for turf rows */
.cov-track { height: 5px; border-radius: 3px; background: var(--graphite-2); overflow: hidden; margin-top: 8px; }
.cov-fill { height: 100%; border-radius: 3px; background: var(--cmd-accent); }

/* ── team management ────────────────────────────────────────────────── */
.cmd-invite { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cmd-invite input { flex: 1 1 180px; min-height: 44px; padding: 0 13px; border-radius: 12px; background: var(--graphite-2); border: 1px solid var(--line); color: var(--platinum); font: 500 14px var(--body); }
.cmd-invite select { min-height: 44px; padding: 0 10px; border-radius: 12px; background: var(--graphite-2); border: 1px solid var(--line); color: var(--platinum); font: 500 13px var(--body); }
.cmd-invite button { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--cmd-accent); color: var(--ember-ink); border: none; font: 700 13px var(--body); cursor: pointer; }
.cmd-mgmt-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.cmd-mini { font: 600 11px var(--body); padding: 7px 11px; min-height: 36px; border-radius: 10px; background: var(--graphite-2); border: 1px solid var(--line); color: var(--plat-dim); cursor: pointer; }
.cmd-mini:hover { background: var(--graphite); color: var(--platinum); }
.cmd-mini.danger:hover { color: var(--cmd-bad); border-color: color-mix(in srgb, var(--cmd-bad) 50%, transparent); }
.cmd-invite-link { font: 500 11px var(--mono); color: var(--plat-dim); word-break: break-all; padding: 8px 0; }
.cmd-empty { padding: 26px 16px; text-align: center; font: 500 13px var(--body); color: var(--plat-faint); }
.cmd-note { font: 500 12px var(--body); line-height: 1.5; color: var(--plat-dim); padding: 12px 14px; border: 1px dashed var(--line-hi); border-radius: var(--r-card); background: var(--graphite); margin-bottom: 14px; }
.cmd-note b { color: var(--platinum); }

/* the storm strip on Overview */
.cmd-storm { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--cmd-warn) 34%, var(--line)); border-radius: var(--r-card); background: color-mix(in srgb, var(--cmd-warn) 6%, var(--graphite)); margin-bottom: 14px; }
.cmd-storm .s-bolt { color: var(--cmd-warn); flex: 0 0 auto; }
.cmd-storm .s-txt { flex: 1 1 auto; font-size: 13px; color: var(--platinum); }
.cmd-storm .s-txt b { color: var(--cmd-warn); }
.cmd-storm .s-fig { font: 700 20px var(--disp, var(--body)); color: var(--cmd-warn); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .cmd-funnel { grid-template-columns: repeat(2, 1fr); }
  .cmd-row { gap: 10px; padding: 12px; }
}