/* ARBIT Control Center — structural styles (Path 1 / HTMX adaptation).
 *
 * Hand-trimmed from styles-base.css + styles-screens.css in the design
 * handoff. Drops React-only constructs (drag handlers, motion components);
 * keeps colors, typography, density, agent-accent system, kill-switch
 * visuals, card system, table styling, letter editorial, and the static
 * constellation. Power-user surfaces (palette/X-ray/console/sound) are
 * Path 2 follow-ups and intentionally omitted.
 */

/* === SHELL: 232px rail + 56px top bar + main =========================== */
.cc-app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
  background: var(--surface-0);
}
.cc-rail {
  grid-row: 1 / -1;
  background: var(--surface-1);
  border-right: 1px solid var(--stroke-1);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) 0;
  min-width: 0;
}
/* ─── ARBIT brand (V3a animated logo) ─────────────────────────────────
   See templates/_brand.html for markup. Mark = A-clipped digit rain +
   pulsing accent outline. Wordmark = 5 letters with CSS-content decrypt.
   All animations pure CSS; respects prefers-reduced-motion. */
.cc-brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-5);
}
.cc-brand-link {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: inherit;
  flex: 1; min-width: 0;
}
/* --- Mark: digit rain inside an A-shaped clip --- */
.arb-mark {
  --arb-mark-size: 36px;
  --arb-accent: oklch(0.78 0.14 178);
  width: var(--arb-mark-size); height: var(--arb-mark-size);
  position: relative; flex-shrink: 0;
  clip-path: polygon(50% 4%, 96% 96%, 76% 96%, 64% 70%, 36% 70%, 24% 96%, 4% 96%);
  -webkit-clip-path: polygon(50% 4%, 96% 96%, 76% 96%, 64% 70%, 36% 70%, 24% 96%, 4% 96%);
  background: rgba(245, 243, 238, 0.04);
  overflow: hidden;
}
.arb-col {
  position: absolute; top: 0; height: 100%;
  width: calc(100% / 6);
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  font-size: max(8px, calc(var(--arb-mark-size) * 0.085));
  line-height: max(11px, calc(var(--arb-mark-size) * 0.115));
  font-weight: 600;
  text-align: center;
  animation: arb-rain linear infinite;
  will-change: transform;
}
.arb-col i {
  display: block; font-style: normal;
  color: rgba(245, 243, 238, 0.45);
}
.arb-col i.arb-head {
  color: var(--arb-accent);
  text-shadow: 0 0 8px var(--arb-accent);
}
/* Trail fade — discretized from JSX formula max(0.08, 0.62 - k*0.034). */
.arb-col i:nth-child(2)  { color: rgba(245,243,238,0.586); }
.arb-col i:nth-child(3)  { color: rgba(245,243,238,0.552); }
.arb-col i:nth-child(4)  { color: rgba(245,243,238,0.518); }
.arb-col i:nth-child(5)  { color: rgba(245,243,238,0.484); }
.arb-col i:nth-child(6)  { color: rgba(245,243,238,0.450); }
.arb-col i:nth-child(7)  { color: rgba(245,243,238,0.416); }
.arb-col i:nth-child(8)  { color: rgba(245,243,238,0.382); }
.arb-col i:nth-child(9)  { color: rgba(245,243,238,0.348); }
.arb-col i:nth-child(10) { color: rgba(245,243,238,0.314); }
.arb-col i:nth-child(11) { color: rgba(245,243,238,0.280); }
.arb-col i:nth-child(12) { color: rgba(245,243,238,0.246); }
.arb-col i:nth-child(13) { color: rgba(245,243,238,0.212); }
.arb-col i:nth-child(14) { color: rgba(245,243,238,0.178); }
.arb-col i:nth-child(15) { color: rgba(245,243,238,0.144); }
.arb-col i:nth-child(16) { color: rgba(245,243,238,0.110); }
.arb-col i:nth-child(17) { color: rgba(245,243,238,0.080); }
.arb-col i:nth-child(18) { color: rgba(245,243,238,0.080); }

.arb-col-0 { left: 0;              animation-duration: 2.6s; animation-delay:  0s;   }
.arb-col-1 { left: calc(100%/6);   animation-duration: 3.4s; animation-delay: -0.42s; }
.arb-col-2 { left: calc(200%/6);   animation-duration: 4.2s; animation-delay: -0.84s; }
.arb-col-3 { left: calc(300%/6);   animation-duration: 5.0s; animation-delay: -1.26s; }
.arb-col-4 { left: calc(400%/6);   animation-duration: 2.6s; animation-delay: -1.68s; }
.arb-col-5 { left: calc(500%/6);   animation-duration: 3.4s; animation-delay: -2.10s; }

@keyframes arb-rain {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(110%); }
}

.arb-outline {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.arb-outline polygon {
  fill: none;
  stroke: var(--arb-accent);
  stroke-width: 3.9;
  vector-effect: non-scaling-stroke;
  animation: arb-pulse 3.2s ease-in-out infinite;
}
@keyframes arb-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* --- Wordmark: ARBIT decrypt animation --- */
.arb-wordmark {
  display: inline-flex;
  gap: 1.36px;
  line-height: 1;
}
.arb-letter {
  display: inline-block;
  width: 10.5px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--fg-primary);
}
.arb-letter::before { content: "A"; }

.arb-l0::before { animation: arb-gl-0  3.4s steps(1) infinite 0s;    }
.arb-l0         { animation: arb-glc-0 3.4s steps(1) infinite 0s;    }
.arb-l1::before { animation: arb-gl-1  3.4s steps(1) infinite 0.04s; }
.arb-l1         { animation: arb-glc-1 3.4s steps(1) infinite 0.04s; }
.arb-l2::before { animation: arb-gl-2  3.4s steps(1) infinite 0.08s; }
.arb-l2         { animation: arb-glc-2 3.4s steps(1) infinite 0.08s; }
.arb-l3::before { animation: arb-gl-3  3.4s steps(1) infinite 0.12s; }
.arb-l3         { animation: arb-glc-3 3.4s steps(1) infinite 0.12s; }
.arb-l4::before { animation: arb-gl-4  3.4s steps(1) infinite 0.16s; }
.arb-l4         { animation: arb-glc-4 3.4s steps(1) infinite 0.16s; }

@keyframes arb-gl-0 {
  0%{content:"◇"} 8%{content:"▣"} 16%{content:"/"} 24%{content:"Z"}
  32%{content:">"} 40%{content:"0"} 48%{content:"+"} 56%{content:"◇"}
  64%{content:"▣"} 70%,100%{content:"A"}
}
@keyframes arb-glc-0 {
  0%,65% { color: rgba(245,243,238,0.55); }
  72%,100% { color: var(--fg-primary); }
}
@keyframes arb-gl-1 {
  0%{content:"◆"} 8%{content:"#"} 16%{content:"◈"} 24%{content:"%"}
  32%{content:"X"} 40%{content:"<"} 48%{content:"1"} 56%{content:"◆"}
  64%{content:"#"} 73%,100%{content:"R"}
}
@keyframes arb-glc-1 {
  0%,68% { color: rgba(245,243,238,0.55); }
  75%,100% { color: var(--fg-primary); }
}
@keyframes arb-gl-2 {
  0%{content:"◇"} 8%{content:"▣"} 16%{content:"/"} 24%{content:"Z"}
  32%{content:">"} 40%{content:"0"} 48%{content:"+"} 56%{content:"◇"}
  64%{content:"▣"} 76%,100%{content:"B"}
}
@keyframes arb-glc-2 {
  0%,71% { color: rgba(245,243,238,0.55); }
  78%,100% { color: var(--fg-primary); }
}
@keyframes arb-gl-3 {
  0%{content:"◆"} 8%{content:"#"} 16%{content:"◈"} 24%{content:"%"}
  32%{content:"X"} 40%{content:"<"} 48%{content:"1"} 56%{content:"◆"}
  64%{content:"#"} 79%,100%{content:"I"}
}
@keyframes arb-glc-3 {
  0%,74% { color: rgba(245,243,238,0.55); }
  81%,100% { color: var(--fg-primary); }
}
@keyframes arb-gl-4 {
  0%{content:"◇"} 8%{content:"▣"} 16%{content:"/"} 24%{content:"Z"}
  32%{content:">"} 40%{content:"0"} 48%{content:"+"} 56%{content:"◇"}
  64%{content:"▣"} 82%,100%{content:"T"}
}
@keyframes arb-glc-4 {
  0%,77% { color: rgba(245,243,238,0.55); }
  84%,100% { color: var(--fg-primary); }
}

/* Reduced motion: static A with head glyphs only + settled wordmark. */
@media (prefers-reduced-motion: reduce) {
  .arb-col { animation: none; transform: translateY(0); }
  .arb-col i:not(.arb-head) { display: none; }
  .arb-outline polygon { animation: none; opacity: 0.85; }
  .arb-letter, .arb-letter::before { animation: none !important; }
  .arb-l0::before { content: "A"; }
  .arb-l1::before { content: "R"; }
  .arb-l2::before { content: "B"; }
  .arb-l3::before { content: "I"; }
  .arb-l4::before { content: "T"; }
  .arb-letter { color: var(--fg-primary); }
}

.cc-nav { list-style: none; margin: 0; padding: 0 var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.cc-nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3); border-radius: var(--r-2);
  color: var(--fg-secondary); text-decoration: none; font-size: 13px;
  position: relative;
  transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.cc-nav a:hover { background: var(--surface-2); color: var(--fg-primary); }
.cc-nav a.active {
  background: oklch(70% 0.13 220 / 0.10);
  color: var(--fg-primary);
}
.cc-nav a.active::before {
  content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; width: 2px;
  background: var(--agent-scanner); border-radius: 2px;
}
.cc-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.cc-nav-label { flex: 1; }
.cc-nav-hint {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-quaternary); letter-spacing: 0.06em;
}

.cc-rail-section-title {
  padding: var(--s-5) var(--s-5) var(--s-2);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-quaternary);
}
.cc-rail-agents { padding: 0 var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.cc-rail-agent {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 6px var(--s-3); border-radius: var(--r-2);
  color: var(--fg-secondary); text-decoration: none; font-size: 12px;
}
.cc-rail-agent:hover { background: var(--surface-2); color: var(--fg-primary); }
.cc-rail-agent .glyph { color: var(--agent-color, var(--fg-tertiary)); }
.cc-rail-agent .name { flex: 1; }
.cc-rail-agent .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--agent-color, var(--fg-quaternary));
  opacity: 0.85;
  animation: breathe var(--breathe-period, 4s) ease-in-out infinite;
}
.cc-rail-agent[data-state="idle"] .dot { opacity: 0.4; animation: none; }
.cc-rail-agent[data-state="not_started"] .dot { background: var(--fg-quaternary); opacity: 0.35; animation: none; }
.cc-rail-agent[data-state="error"] .dot { background: var(--loss); }

.cc-rail-footer { margin-top: auto; padding: var(--s-5) var(--s-5) 0; border-top: 1px solid var(--stroke-1); }
.cc-rail-footer .op-chip {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3); border-radius: var(--r-2);
  background: var(--surface-2); font-size: 12px;
}
.cc-op-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(80% 0.05 70), oklch(70% 0.06 280));
  font-weight: 600; font-size: 11px; color: var(--surface-0);
  display: flex; align-items: center; justify-content: center;
}
.cc-rail-footer small { color: var(--fg-tertiary); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Toggle chevron — collapses the rail to a 56px strip.
   Tap target sized for iPad (44pt) per Apple HIG; smaller would
   register the tap as ambiguous and fail to fire onclick. */
.cc-rail-toggle {
  margin-left: auto;
  min-width: 32px; min-height: 32px; padding: 8px;
  background: transparent; border: 1px solid var(--stroke-1);
  border-radius: var(--r-1); color: var(--fg-tertiary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
  touch-action: manipulation;
  transition: color var(--d-micro) var(--ease-out),
              border-color var(--d-micro) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.cc-rail-toggle:hover { color: var(--fg-primary); border-color: var(--stroke-2); }
.cc-rail-toggle:active { background: var(--surface-2); }
/* Let the click event reach the button, not get swallowed by the SVG
   child — Safari on iPad routes taps to inner SVG paths otherwise. */
.cc-rail-toggle svg { pointer-events: none; }

/* === COLLAPSED RAIL STATE ============================================== */
html[data-rail="collapsed"] .cc-app { grid-template-columns: 56px 1fr; }
html[data-rail="collapsed"] .cc-brand { padding: 0 0 var(--s-5); justify-content: center; }
html[data-rail="collapsed"] .arb-wordmark { display: none; }
html[data-rail="collapsed"] .cc-rail-toggle { transform: rotate(180deg); margin: 0; }
/* Chevron stacks under the brand mark when collapsed (no room beside it) */
html[data-rail="collapsed"] .cc-brand { flex-direction: column; gap: var(--s-2); }

html[data-rail="collapsed"] .cc-nav { padding: 0 var(--s-2); }
html[data-rail="collapsed"] .cc-nav a {
  justify-content: center; padding: 8px 0; gap: 0;
}
html[data-rail="collapsed"] .cc-nav-label { display: none; }
/* Keep just the shortcut letter as a visual hint; full label on hover via title attr */
html[data-rail="collapsed"] .cc-nav-hint {
  font-size: 13px; color: var(--fg-secondary); letter-spacing: 0;
  text-transform: uppercase; min-width: 14px; text-align: center;
}
html[data-rail="collapsed"] .cc-nav a.active .cc-nav-hint { color: var(--fg-primary); }

html[data-rail="collapsed"] .cc-rail-section-title { display: none; }
html[data-rail="collapsed"] .cc-rail-agents { padding: 0 var(--s-2); }
html[data-rail="collapsed"] .cc-rail-agent {
  justify-content: center; padding: 6px 0; gap: 0;
}
html[data-rail="collapsed"] .cc-rail-agent .name { display: none; }
html[data-rail="collapsed"] .cc-rail-agent .dot { display: none; }

html[data-rail="collapsed"] .cc-rail-footer {
  padding: var(--s-3) var(--s-2) 0;
}
html[data-rail="collapsed"] .cc-rail-footer .op-chip {
  padding: 4px 0; justify-content: center;
}
html[data-rail="collapsed"] .cc-rail-footer .op-chip span:not(.cc-op-avatar) {
  display: none;
}

/* === TOP BAR ============================================================ */
.cc-topbar {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--stroke-1);
}
.cc-stat-pill {
  display: flex; flex-direction: column; gap: 1px; padding: 4px 10px;
  border-left: 1px solid var(--stroke-1);
}
.cc-stat-pill:first-of-type { border-left: 0; padding-left: 0; }
.cc-stat-pill .label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); }
.cc-stat-pill .value { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.cc-stat-pill .value.profit { color: var(--profit); }
.cc-stat-pill .value.loss { color: var(--loss); }
.cc-topbar-spacer { flex: 1; }
.cc-heartbeats { display: flex; gap: 6px; padding: 0 var(--s-3); }
.cc-heartbeat {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--agent-color, var(--fg-quaternary));
  animation: breathe var(--breathe-period, 4s) ease-in-out infinite;
}
[data-halted="true"] .cc-heartbeat { opacity: 0.25; animation: none; }
.cc-clock { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); }

/* Kill switch */
.cc-kill {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px; border-radius: var(--r-2);
  background: var(--surface-2); border: 1px solid var(--stroke-1);
  color: var(--fg-secondary);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--d-micro) var(--ease-out);
}
.cc-kill:hover { border-color: var(--kill); color: var(--fg-primary); }
.cc-kill-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kill); box-shadow: 0 0 6px var(--kill); opacity: 0.45;
}
.cc-kill[data-state="armed"] .cc-kill-led { opacity: 0.45; }
.cc-kill[data-state="confirm"] {
  background: oklch(40% 0.20 25 / 0.25); border-color: var(--warning);
}
.cc-kill[data-state="confirm"] .cc-kill-led { animation: breathe 1.2s ease-in-out infinite; opacity: 1; }
.cc-kill[data-state="halted"] {
  background: oklch(35% 0.22 25 / 0.4); border-color: var(--kill); color: var(--kill);
}
.cc-kill[data-state="halted"] .cc-kill-led { opacity: 1; box-shadow: 0 0 12px var(--kill); }

/* === MAIN =============================================================== */
.cc-main {
  grid-column: 2; grid-row: 2;
  padding: var(--s-6) var(--s-7);
  overflow: auto;
}
.cc-page-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 var(--s-5); gap: var(--s-5);
}
.cc-page-title h1 { font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.cc-page-title .eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-tertiary); }
.cc-page-title .actions { display: flex; gap: var(--s-2); align-items: center; }

/* === CARDS ============================================================== */
.cc-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.cc-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.cc-card-eyebrow { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); }
.cc-card-title { font-size: 14px; font-weight: 600; margin: 0; }
.cc-card-number { font-family: var(--font-mono); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cc-card-number.profit { color: var(--profit); }
.cc-card-number.loss { color: var(--loss); }
.cc-card-sub { font-size: 12px; color: var(--fg-tertiary); margin-top: var(--s-2); }

.cc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
@media (max-width: 1400px) { .cc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .cc-grid-4, .cc-grid-3, .cc-grid-2 { grid-template-columns: 1fr; } }

/* === BUTTONS / PILLS ==================================================== */
.cc-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px; border-radius: var(--r-2);
  background: var(--surface-2); color: var(--fg-primary);
  border: 1px solid var(--stroke-1);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
.cc-btn:hover { background: var(--surface-3); border-color: var(--stroke-2); }
.cc-btn-primary { background: oklch(70% 0.13 220 / 0.18); border-color: oklch(70% 0.13 220 / 0.4); color: var(--agent-scanner); }
.cc-btn-primary:hover { background: oklch(70% 0.13 220 / 0.28); }
.cc-btn-danger { background: oklch(58% 0.24 25 / 0.18); border-color: oklch(58% 0.24 25 / 0.4); color: var(--loss); }
.cc-btn-success { background: oklch(72% 0.13 160 / 0.16); border-color: oklch(72% 0.13 160 / 0.4); color: var(--profit); }

.cc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--stroke-1);
}
.cc-pill.profit { background: oklch(72% 0.13 160 / 0.16); border-color: oklch(72% 0.13 160 / 0.35); color: var(--profit); }
.cc-pill.loss { background: oklch(65% 0.15 30 / 0.18); border-color: oklch(65% 0.15 30 / 0.4); color: var(--loss); }
.cc-pill.warn { background: oklch(78% 0.14 75 / 0.18); border-color: oklch(78% 0.14 75 / 0.4); color: var(--warning); }
.cc-pill.muted { color: var(--fg-tertiary); }

/* === AGENT GLYPH PLATES (constellation + activity) ====================== */
.cc-glyph-plate {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, var(--agent-color, var(--fg-tertiary)), oklch(15% 0.02 250) 75%);
  border: 1px solid var(--agent-color, var(--fg-tertiary));
  color: var(--agent-color, var(--fg-tertiary));
  position: relative;
  box-shadow: 0 0 14px oklch(70% 0.10 250 / 0.18), 0 0 0 1px oklch(15% 0.02 250) inset;
}
.cc-glyph-plate .glyph { opacity: 0.95; }
.cc-glyph-plate.sm { width: 28px; height: 28px; }
.cc-glyph-plate.xs { width: 18px; height: 18px; }
.cc-glyph-plate.lg { width: 72px; height: 72px; }

/* === TABLES ============================================================= */
.cc-table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.cc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cc-table thead {
  background: var(--surface-2);
  text-align: left;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-tertiary);
}
.cc-table th, .cc-table td { padding: var(--pad-y) var(--pad-x); }
.cc-table tbody tr { border-top: 1px solid var(--stroke-1); transition: background var(--d-micro); }
.cc-table tbody tr:hover { background: var(--surface-2); }
.cc-table .right { text-align: right; }
.cc-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* === ACTIVITY FEED ====================================================== */
.cc-activity { display: flex; flex-direction: column; gap: var(--s-3); }
.cc-activity-row { display: grid; grid-template-columns: 70px 28px 1fr; align-items: center; gap: var(--s-3); font-size: 12.5px; }
.cc-activity-row .time { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: 11px; }
.cc-activity-row .agent-name { color: var(--agent-color); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-activity-row .text { color: var(--fg-secondary); }

/* === LETTER (recommendations) =========================================== */
.cc-letter {
  background: var(--surface-editorial);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-4);
  padding: var(--s-7) var(--s-8);
  position: relative; overflow: hidden;
}
.cc-letter::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, oklch(80% 0.05 70 / 0.04), transparent 50%, oklch(80% 0.06 280 / 0.03));
  animation: iridescent-shift 9s ease-in-out infinite;
  pointer-events: none;
}
.cc-letter::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--agent-arbit), oklch(70% 0.06 280));
}
.cc-letter-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-5); position: relative; }
.cc-letter-meta { display: flex; gap: var(--s-3); align-items: baseline; font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.cc-letter-title { font-family: var(--font-serif); font-size: 32px; font-weight: 400; line-height: 1.15; margin: 0; }
.cc-letter-body { font-family: var(--font-serif); font-size: 15px; line-height: 1.65; max-width: 64ch; color: var(--fg-secondary); position: relative; }
.cc-letter-body p { margin: 0 0 var(--s-4); }
.cc-letter-action { color: var(--warning); font-family: var(--font-mono); font-size: 12px; padding: var(--s-3) 0 0; border-top: 1px solid var(--stroke-1); margin-top: var(--s-5); }

/* === GAUGE ============================================================== */
.cc-gauge { display: flex; flex-direction: column; gap: 6px; }
.cc-gauge-track { height: 8px; background: var(--surface-3); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.cc-gauge-fill { height: 100%; border-radius: var(--r-pill); transition: width var(--d-state) var(--ease-out); }
.cc-gauge-fill.zone-ok { background: var(--profit); }
.cc-gauge-fill.zone-warn { background: var(--warning); }
.cc-gauge-fill.zone-danger { background: var(--kill); }
.cc-gauge-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-tertiary); font-family: var(--font-mono); }

/* === STATIC CONSTELLATION (Path 1 fallback) ============================= */
.cc-constellation {
  position: relative; aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse at center top, oklch(15% 0.02 250 / 0.8), var(--surface-1));
  border: 1px solid var(--stroke-1); border-radius: var(--r-4); overflow: hidden;
}
.cc-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-const-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--fg-secondary);
}
.cc-const-node .label { font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-tertiary); }
.cc-const-flow { stroke: oklch(70% 0.05 250 / 0.35); fill: none; stroke-width: 1.2; }
.cc-const-flow.active { stroke-dasharray: 4 24; animation: flow-dash 1.6s linear infinite; }

/* === HALT BANNER ======================================================== */
.cc-halt-banner {
  display: none;
  position: fixed; top: 0; left: 232px; right: 0; z-index: 50;
  background: oklch(35% 0.22 25 / 0.95); color: var(--surface-0);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
[data-halted="true"] .cc-halt-banner { display: flex; align-items: center; gap: var(--s-4); }

/* === FORM INPUTS ======================================================== */
.cc-input, .cc-textarea, .cc-select {
  background: var(--surface-2);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-2);
  padding: 8px 12px;
  color: var(--fg-primary);
  font-size: 13px;
}
.cc-input:focus, .cc-textarea:focus, .cc-select:focus {
  outline: none; border-color: oklch(70% 0.13 220 / 0.6);
}

/* === HALT BANNER stub === */
.cc-page-title h1.serif { font-family: var(--font-serif); font-weight: 400; }

/* Footer (small) */
.cc-footer { padding: var(--s-3) var(--s-7); text-align: right; color: var(--fg-quaternary); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* === TOASTS ============================================================== */
/* Stack lives top-right; each entry slides in from the right + fades.
   Auto-dismiss timing handled in base.html JS (opp 8s, exec 30s). */
.cc-toasts {
  position: fixed;
  top: var(--s-6);
  right: var(--s-6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  pointer-events: none;          /* don't trap clicks on the rail behind it */
  max-width: 360px;
  width: 100%;
}
.cc-toast {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-left-width: 3px;
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  color: var(--fg-primary);
  box-shadow: 0 18px 40px -20px oklch(0% 0 0 / 0.6), 0 4px 14px -6px oklch(0% 0 0 / 0.4);
  font-family: var(--font-sans);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--d-state) var(--ease-out), transform var(--d-state) var(--ease-out);
}
.cc-toast.visible { opacity: 1; transform: translateX(0); }
.cc-toast.dismissing {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in);
}
.cc-toast-opportunity { border-left-color: var(--agent-arbit); }
.cc-toast-execution   { border-left-color: var(--profit); }
.cc-toast-error       { border-left-color: var(--loss); }
.cc-toast-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: var(--s-1);
}
.cc-toast-opportunity .cc-toast-eyebrow { color: var(--agent-arbit); }
.cc-toast-execution   .cc-toast-eyebrow { color: var(--profit); }
.cc-toast-error       .cc-toast-eyebrow { color: var(--loss); }
.cc-toast-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  line-height: 1.35;
}
.cc-toast-meta {
  font-size: 11.5px;
  color: var(--fg-tertiary);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}
.cc-toast-meta .mono { font-family: var(--font-mono); }
.cc-toast-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: 0;
  color: var(--fg-quaternary);
  font-size: 16px; line-height: 1;
  width: 20px; height: 20px;
  cursor: pointer;
  border-radius: var(--r-1);
  display: grid; place-items: center;
  transition: color var(--d-micro) var(--ease-out), background var(--d-micro) var(--ease-out);
}
.cc-toast-close:hover { color: var(--fg-primary); background: var(--surface-2); }
/* Clicking the body navigates to the detail page (link is absolutely
   positioned and covers everything except the close button). */
.cc-toast-link {
  position: absolute; inset: 0;
  z-index: 1;
}
.cc-toast-close { z-index: 2; }
.cc-toast > .cc-toast-eyebrow,
.cc-toast > .cc-toast-title,
.cc-toast > .cc-toast-meta { position: relative; z-index: 2; pointer-events: none; }
.cc-toast > .cc-toast-meta .cc-pill { pointer-events: none; }