/* ==========================================================================
   VEO — System B  ·  App re-skin + executive component layer
   --------------------------------------------------------------------------
   Loads AFTER bunkio.css (tokens + core) and admin.css (sidebar console).
   Changes ONLY brand identity — a petrol-teal ramp + the VEO wordmark — plus
   the handful of components with no equivalent in the shared sheets: the
   gate pill (the two hard gates), action-kind pills, the loop-phase flow
   (Monitor → Direct → Reflect), and the boardroom's human speech variant.
   Materials, elevation, buttons, tables, drawer, charts: inherited unchanged.
   Semantics: emerald = money (never the brand), red = a locked gate,
   teal = the VEO itself speaking/acting.
   NOTE: app-switcher + roadmap/.is-planned are copied from marketninja.css
   (they were born there) — promotion into the shared sheets is pending.
   ========================================================================== */

/* ---------- 1. BRAND RE-SKIN (petrol teal — the quiet executive) ---------- */
:root {
  --brand-50:  #ecfafa;
  --brand-100: #d3f3f2;
  --brand-200: #a8e6e6;
  --brand-300: #6fd2d4;
  --brand-400: #35b4b9;
  --brand-500: #189aa2;
  --brand-600: #0e8590;  /* primary action — VEO petrol */
  --brand-700: #0b6b76;
  --brand-800: #0a5761;
  --brand-900: #09484f;

  /* Derived tokens that hard-code the old blue — re-tint to petrol */
  --e-brand: 0 4px 14px rgba(14, 133, 144, 0.35);
  --state-booked: linear-gradient(135deg, #189aa2 0%, #0b6b76 100%);
  --type-room: linear-gradient(135deg, #189aa2 0%, #0b6b76 100%);
  --pinstripe-ink: rgba(14, 133, 144, 0.038);   /* Pinstripe finish in VEO petrol */
}
[data-theme="dark"] {
  --brand-600: #2fb5bd; /* brighter petrol on dark for contrast */
  --brand-700: #0e8590;
  --pinstripe-ink: rgba(47, 181, 189, 0.055);
}

/* Shared rules that bake the old blue in as rgba literals — re-point to petrol */
[data-theme="dark"] .side-nav a.here { background: rgba(47, 181, 189, 0.16); color: #9fe3e7; }
[data-theme="dark"] .tbl tr.sel td { background: rgba(47, 181, 189, 0.13); }
[data-theme="dark"] .status.booked { background: rgba(47, 181, 189, 0.16); color: #9fe3e7; border-color: rgba(47, 181, 189, 0.36); }
[data-theme="dark"] .dd-opt.sel,
[data-theme="dark"] .nav-dd-inner a.sel { background: rgba(47, 181, 189, 0.16); color: #9fe3e7; }
[data-theme="dark"] .alert.ai { background: rgba(47, 181, 189, 0.12); border-color: rgba(47, 181, 189, 0.32); color: #a9e7ea; }
[data-theme="dark"] .alert.ai.speech::after { border-top-color: rgba(47, 181, 189, 0.12); }

/* ---------- 2. WORDMARK ---------------------------------------------------- */
/* "VEO" — the V petrol, "EO" ink (flips near-white on dark). The mark is a
   rounded petrol tile carrying a laurel-simple chevron drawn as an SVG mask,
   same trick as the MarketNinja spark: glyph metrics can't be trusted. */
.veo-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: 0 3px 8px rgba(14, 133, 144, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0; line-height: 1;
}
.veo-mark::before {
  content: ""; display: block; width: 18px; height: 18px; background: #fff;
  -webkit-mask: var(--veo-chev) center / contain no-repeat;
          mask: var(--veo-chev) center / contain no-repeat;
}
:root {
  /* a "V" cut as a tie/pennant — executive, not martial */
  --veo-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h6l2 5 2-5h6l-8 18L4 3z' fill='%23000'/%3E%3C/svg%3E");
}
.logo-veo {
  display: inline-flex; align-items: baseline; gap: 0;
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
}
.logo-veo .v  { color: var(--brand-600); }   /* V — petrol */
.logo-veo .eo { color: var(--text); }         /* EO — ink   */

/* ---------- 3. APP-SWITCHER (copied from marketninja.css — see NOTE) ------ */
.app-switch { position: relative; padding: var(--s-2) var(--s-2) var(--s-4); }
.app-switch-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: var(--r-md); cursor: pointer;
  background: transparent; border: 1px solid transparent; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.app-switch-btn:hover { background: var(--surface-sunken); border-color: var(--line); }
.app-switch-btn .chev { margin-left: auto; color: var(--text-3); font-size: 11px; transition: transform 0.18s; }
.app-switch.open .app-switch-btn { background: var(--surface-sunken); border-color: var(--line); }
.app-switch.open .app-switch-btn .chev { transform: rotate(180deg); }

.app-switch-panel {
  position: absolute; top: calc(100% - var(--s-2)); left: var(--s-2); right: var(--s-2); z-index: 95;
  display: none; padding: 6px; border-radius: var(--r-lg);
  background: var(--glass-strong-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--e4), var(--highlight);
}
.app-switch.open .app-switch-panel { display: block; animation: pop 0.16s ease; }
.asw-group {
  padding: 8px 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.app-switch-panel a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
  color: var(--text); text-decoration: none;
}
.app-switch-panel a:hover { background: var(--surface-sunken); text-decoration: none; }
.app-switch-panel a.cur { background: var(--brand-50); }
[data-theme="dark"] .app-switch-panel a.cur { background: rgba(47, 181, 189, 0.14); }
.app-switch-panel a .who { flex: 1; min-width: 0; line-height: 1.25; }
.app-switch-panel a .who b { display: block; font-size: var(--fs-sm); }
.app-switch-panel a .who span { font-size: var(--fs-xs); color: var(--text-3); }
.app-switch-panel a .ext { color: var(--text-3); font-size: var(--fs-sm); }
.asw-mk {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.asw-mk.bunkio { background: linear-gradient(135deg, #5265f0, #3542bd); }
.asw-mk.slate  { background: linear-gradient(135deg, var(--ink-700), var(--ink-900)); }
.asw-mk.mn     { background: linear-gradient(135deg, #8257f4, #5a2bd8); }
.asw-mk.veo    { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.dotcur { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }

/* ---------- 4. ROADMAP BADGE + PLANNED SURFACES (copied — see NOTE) ------- */
.roadmap {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-xs)/1 var(--font); color: var(--brand-700);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-50); border: 1px dashed var(--brand-300);
}
.roadmap::before { content: '◇'; font-size: 11px; }
[data-theme="dark"] .roadmap { background: rgba(47, 181, 189, 0.12); color: #9fe3e7; border-color: rgba(47, 181, 189, 0.4); }
.roadmap-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.is-planned { position: relative; }
.is-planned::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--pinstripe-ink) 9px 18px);
}

/* ---------- 5. THE GATE PILL ----------------------------------------------- */
/* The two hard gates (payment · product) — always red, always locked, never a
   button. A gate never renders as "approved by default"; it names the human
   decision an action is waiting on. Born inline in the MarketNinja war room,
   named here — VEO is the app whose whole job is gates. */
.gate {
  display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-pill); color: var(--danger-600);
  background: var(--danger-50); border: 1px solid #fecaca; white-space: nowrap;
}
.gate::before { content: '🔒'; font-size: 9px; }
[data-theme="dark"] .gate { background: rgba(229, 72, 77, 0.12); color: #fca5a5; border-color: rgba(229, 72, 77, 0.3); }
/* the comms gate (ADR 0007) is policy, not one of the two hard gates — amber */
.gate.comms { color: var(--warn-600); background: var(--warn-50); border-color: #fde68a; }
.gate.comms::before { content: '📮'; }
[data-theme="dark"] .gate.comms { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); }

/* ---------- 6. ACTION-KIND PILLS ------------------------------------------- */
/* Every ActionProposal wears its kind. Gated kinds stay in the red family so
   kind and gate never disagree; ungated kinds are cool/neutral. */
.akind {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-xs)/1 var(--font); color: #fff;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.akind.payment  { background: linear-gradient(135deg, #f0525e, #c92a38); }
.akind.product  { background: linear-gradient(135deg, #f472b6, #db2777); }
.akind.comms    { background: linear-gradient(135deg, #f59e0b, #d97706); }
.akind.research { background: linear-gradient(135deg, #35b4b9, #0b6b76); }
.akind.memo     { background: linear-gradient(135deg, var(--ink-400), var(--ink-600)); }
.akind.task     { background: linear-gradient(135deg, #38bdf8, #0284c7); }

/* ---------- 7. LOOP FLOW (Monitor → Direct → Reflect) ---------------------- */
/* The heartbeat, read left to right, with the return arrow making it a cycle.
   Each phase card: name, the model tier that runs it (tier-per-phase), what
   the last pass did, and its cost. The active phase raises on petrol. */
.loopflow { display: flex; align-items: stretch; overflow-x: auto; }
.lphase { flex: 1; min-width: 148px; padding: var(--s-3) var(--s-4); border-left: 1px dashed var(--line); position: relative; }
.lphase:first-child { border-left: 0; padding-left: 0; }
.lphase .ph { display: flex; align-items: center; gap: 7px; }
.lphase .ph b { font-size: var(--fs-md); letter-spacing: -0.01em; }
.lphase .ph .arr { color: var(--text-3); font-weight: 800; }
.lphase .did { font-size: var(--fs-xs); color: var(--text-2); margin-top: 4px; line-height: 1.45; }
.lphase .fig { font-size: var(--fs-xs); color: var(--text-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.lphase.now { background: var(--brand-50); border-radius: var(--r-md); border-left-color: transparent; box-shadow: inset 0 0 0 1px var(--brand-200); }
[data-theme="dark"] .lphase.now { background: rgba(47, 181, 189, 0.1); box-shadow: inset 0 0 0 1px rgba(47, 181, 189, 0.3); }
.lphase.now .ph b { color: var(--brand-700); }
[data-theme="dark"] .lphase.now .ph b { color: #9fe3e7; }
/* model tier chip — which brain runs the phase */
.tier {
  display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-pill); color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-200); white-space: nowrap;
}
[data-theme="dark"] .tier { background: rgba(47, 181, 189, 0.13); color: #9fe3e7; border-color: rgba(47, 181, 189, 0.32); }
/* the cycle-return chip after Reflect */
.lreturn {
  flex: none; align-self: center; margin-left: var(--s-3);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text-3);
  background: var(--matte-raised); border: 1px solid var(--line); box-shadow: var(--e1), var(--highlight);
}

/* ---------- 8. BOARDROOM SPEECH -------------------------------------------- */
/* The VEO speaks with the shared AI speech alert (petrol here). The human
   answers with this neutral matte variant — same component, seated LEFT, so
   the meeting reads as two chairs at one table. */
.alert.human { background: var(--matte); border-color: var(--line-strong); color: var(--text); }
/* tail fill: border colors can't take the matte GRADIENT — use its bottom-edge
   color (--surface-2 light / #171c2e dark), which is what the tail meets */
.alert.human.speech::after { border-top-color: var(--surface-2); }
[data-theme="dark"] .alert.human.speech::after { border-top-color: #171c2e; }
.speech-group.left { align-items: flex-start; }
.speech-group.left .alert.speech::before { right: auto; left: 32px; }
.speech-group.left .alert.speech::after  { right: auto; left: 33.5px; }
.speech-group.left .speech-who { margin-right: 0; margin-left: 26px; }
/* meeting transcript column: quiet vertical rhythm */
.minutes { display: flex; flex-direction: column; gap: var(--s-5); }
.minutes .when { align-self: center; font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; letter-spacing: 0.04em; }
/* slash-command chip — a human-only control surface, styled as a key, not a button */
.slash {
  display: inline-flex; align-items: center; font: 700 11px/1 ui-monospace, 'Cascadia Code', Consolas, monospace;
  padding: 4px 8px; border-radius: 6px; color: var(--text-2);
  background: var(--surface-sunken); border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 var(--line-strong);
}

/* ---------- 9. SHARED-SHAPE HELPERS (match sibling apps) ------------------- */
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12px; }
.pos { color: var(--ok-600); font-weight: 700; }
.neg { color: var(--danger-500); font-weight: 700; }
.facet {
  display: inline-flex; align-items: center; font: 600 10.5px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-pill); color: var(--text-2);
  background: var(--surface-sunken); border: 1px solid var(--line);
}
.grid.split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .grid.split { grid-template-columns: 1fr; } }
/* activity feed row (index + loop pages) */
.feed { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); align-items: baseline; }
.feed:last-child { border-bottom: 0; }
.feed .ft { flex: none; width: 48px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Sidebar environment chip stays one-line in the narrow rail */
.side-foot .env-chip { white-space: nowrap; letter-spacing: 0.03em; }

/* Executive console is prose-and-queue dense, not table-wide: keep the shared
   default width (no max-width bump — that's MarketNinja's need, not ours). */

/* ---------- 10. MOBILE GUARDS ---------------------------------------------- */
@media (max-width: 620px) {
  .q-row { flex-wrap: wrap; }
  .q-row .row { flex-wrap: wrap; }
  .loopflow { flex-direction: column; }
  .lphase { border-left: 0; border-top: 1px dashed var(--line); padding-left: 0; }
  .lphase:first-child { border-top: 0; }
}