/* ============================================================
   Agentic OS — Component & Layout styles
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Boot splash ---------- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 16px; color: var(--text-3);
  font-size: var(--text-sm);
}
.boot-logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--accent-grad);
  box-shadow: var(--shadow-md); animation: pulse 1.4s var(--ease) infinite;
  display: grid; place-content: center;
}
.boot-logo::after {
  content: ""; width: 29px; height: 24px; background-color: #fff;
  -webkit-mask: url("../brand/mila-mark.svg") no-repeat center / contain;
  mask: url("../brand/mila-mark.svg") no-repeat center / contain;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.92)} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes modalIn { from{opacity:0;transform:translate(-50%, calc(-50% + 8px))} to{opacity:1;transform:translate(-50%, -50%)} }

/* ============================================================
   App shell
   ============================================================ */
/* svh, not dvh, for anything that only sets a minimum: dvh grows when the
   browser toolbar retracts, and a min-height that grows mid-scroll reflows the
   page under the reader's thumb. svh is the short measurement, so the shell
   fills the screen without ever inventing a scrollbar. The plain vh line above
   each one is the fallback for browsers that predate the unit. */
.app-shell { min-height: 100vh; min-height: 100svh; }
/* Inside Telegram the container decides how tall the page is, and svh is the
   browser's answer to a question Telegram is not being asked. */
[data-surface="telegram"] .app-shell,
[data-surface="telegram"] .layout { min-height: var(--tg-viewport); }

/* ---------- Inside Telegram ----------
   The container already draws a header carrying the app's name and its own
   back-or-close control, and it owns the palette. What the console adds on top
   of that has to earn its height: the viewport here is about 660px, and the
   topbar and the tab bar together were taking 124 of them — a fifth of the
   screen — before a single row of content.

   Nothing is removed that cannot be reached another way. The drawer still
   opens the whole of navigation, search still opens the palette. */
[data-surface="telegram"] .topbar {
  /* 64 -> 48. A second header under Telegram's own does not need the height
     of a first one. */
  height: 48px;
  padding-top: 0;
}

/* The theme belongs to the container. A toggle here fights it: Telegram hands
   the app its colours and the page would sit in a scheme the chat around it
   does not share. */
[data-surface="telegram"] #themeBtn { display: none; }


/* Telegram reports the home indicator through contentSafeAreaInset, which the
   bridge feeds into --safe-b. The bar sits above it rather than under it. */
[data-surface="telegram"] .tabbar {
  height: calc(52px + var(--safe-b));
  padding-bottom: var(--safe-b);
}
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh; min-height: 100svh;
}

/* ---------- Sidebar: rail + section column ----------
   Two columns inside one element. The rail never changes and never scrolls;
   the section column holds the children of whichever rail item is active, so
   only one section's worth of links is ever on screen.

   Keeping both inside .sidebar is deliberate: the drawer machinery below 900px
   — scrim, focus trap, swipe to dismiss — already targets .sidebar and does not
   need to learn about the split. */
.sidebar {
  position: sticky; top: 0;
  /* dvh here, because this one has to cover exactly: as a drawer it is the
     thing the notch and the gesture bar would otherwise cut into. */
  height: 100vh; height: 100dvh;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
  overflow: hidden;
  overscroll-behavior: contain;
}

.rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(12px + var(--safe-t)) 0 calc(12px + var(--safe-b)) var(--safe-l);
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.rail-brand {
  width: 34px; height: 34px; flex: none; margin-bottom: 10px; border-radius: 10px;
  background: var(--accent-grad); display: grid; place-content: center;
}
.rail-brand::after {
  content: ""; width: 19px; height: 16px; background-color: #fff;
  -webkit-mask: url("../brand/mila-mark.svg") no-repeat center / contain;
  mask: url("../brand/mila-mark.svg") no-repeat center / contain;
}
.rail-item {
  position: relative; flex: none;
  width: 52px; min-height: 52px; border-radius: 11px;
  display: grid; place-content: center; justify-items: center; gap: 3px;
  color: var(--text-3); text-align: center;
  transition: background var(--dur), color var(--dur);
}
.rail-item svg { width: 20px; height: 20px; }
.rail-item span { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.rail-item:hover { background: var(--surface); color: var(--text-2); }
.rail-item.active { background: var(--primary-soft); color: var(--primary-ink); }
.rail-item.active::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary-ink);
}
/* The count of things waiting on a person. Absent, not zero, when there are
   none — a badge showing 0 is a badge asking to be ignored. */
.rail-count {
  position: absolute; top: 3px; right: 5px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 18px;
  /* The fills here carry white text, so they are the deeper members of each
     family rather than the bright dot colours: white on --info is 3.68:1 and on
     --error 3.76:1, both under AA. Amber cannot go deep enough for white at all,
     so that one takes dark ink instead. */
  text-align: center; color: #fff; background: var(--primary);
}
.rail-count.error { background: var(--danger-fill); }
.rail-count.warning { background: var(--warning); color: #2b1a02; }
.rail-count[hidden] { display: none; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
/* The rail carries an avatar and the section column carries a full name-and-role
   chip, and both open the same menu. When the column is on screen that is two
   account buttons side by side. Whichever column is actually visible owns the
   account; the rail only takes it over when the column has become a flyout. */
.rail-foot #user-menu { display: none; }
.rail-orb {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, var(--teal), var(--primary), var(--violet-400), var(--teal));
  display: grid; place-content: center;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  transition: transform var(--dur) var(--ease);
}
.rail-orb::after {
  content: ""; width: 15px; height: 13px; background-color: #fff;
  -webkit-mask: url("../brand/mila-mark.svg") no-repeat center / contain;
  mask: url("../brand/mila-mark.svg") no-repeat center / contain;
}
.rail-orb:hover { transform: scale(1.06); }

.sectionnav {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(18px + var(--safe-t)) 12px calc(18px + var(--safe-b));
}
.sectionnav-head { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; }
.sectionnav-head .brand-lockup { height: 32px; }
.sectionnav-title {
  font-size: var(--text-lg); font-weight: 800; letter-spacing: -.02em;
  padding: 0 8px 10px;
}
/* The mark in the rail and the wordmark in the column are the same brand said
   twice. Whichever column is on screen says it once: the rail carries the mark
   only in the range where the section column is a flyout. */
@media (min-width: 1281px) { .rail-brand { display: none; } }
@media (max-width: 900px) { .rail-brand { display: none; } }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
/* The lockup ships as one SVG file and is tinted through a mask, so it stays
   crisp, cacheable, and follows the theme's ink like the brand sheet specifies. */
.brand-lockup {
  flex: 1; min-width: 0; height: 42px;
  background-color: var(--text);
  -webkit-mask: url("../brand/mila-lockup.svg") no-repeat left center / contain;
  mask: url("../brand/mila-lockup.svg") no-repeat left center / contain;
  transition: opacity var(--dur) var(--ease);
}
.brand-lockup:hover { opacity: 0.75; }
.brand-lockup:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent-grad);
  display: grid; place-content: center; color: #fff; box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-mark-lg { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px; }
.brand-mark-lg svg { width: 29px; height: 29px; }
.brand-sub {
  text-align: center; margin: 2px 0 0; font-size: 12px; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.nav-item.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.brand-badge {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--violet-300); background: var(--primary-soft);
  padding: 2px 7px; border-radius: 999px; margin-left: auto;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; color: var(--text-2);
  font-weight: 500; font-size: var(--text-base); position: relative;
  transition: background var(--dur), color var(--dur);
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--text); }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary);
}
.nav-item .nav-tag {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-inv);
  background: var(--primary); border-radius: 999px; padding: 1px 6px;
}
.sidebar-foot { margin-top: auto; padding-top: 12px; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.user-chip .avatar { width: 34px; height: 34px; }
.user-chip .u-name { font-weight: 600; font-size: var(--text-sm); }
.user-chip .u-mail { font-size: 12px; color: var(--text-3); }
.user-chip .icon-btn { margin-left: auto; }

/* ---------- Topbar ---------- */
/* No overflow-x here. It had been hiding the overflow rather than preventing
   it, so at 375px content ran to x=525 and the part past the edge was not
   scrollable — it was gone. Everything wide now carries its own scroller;
   see "Containment" below. */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; gap: 16px;
  padding-left: calc(26px + var(--safe-l)); padding-right: calc(26px + var(--safe-r));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.search {
  /* min-width:0 is what lets it give way. A flex item defaults to min-width
     auto, so the search field refused to shrink below its content and pushed
     the action buttons off the right edge — invisibly, while .main still
     clipped. It is the one element here that can afford to be narrower. */
  flex: 1; min-width: 0; max-width: 460px; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-3);
}
.search input { min-width: 0; }
.search:focus-within { border-color: var(--border-strong); }
.search svg { width: 16px; height: 16px; flex: none; }
.search input {
  border: 0; background: transparent; color: var(--text); flex: 1; font-size: var(--text-base);
}
.search input:focus { outline: none; }
.search kbd {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ui-language {
  height: 34px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 7px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
}
.ui-language svg { width: 14px; height: 14px; flex: none; }
.ui-language select {
  /* stretch, or the control is 34px tall and only its middle 17px opens the
     menu — clicking the visible chip anywhere else does nothing. */
  width: 34px; align-self: stretch; border: 0; outline: 0; padding: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ui-language select:disabled { cursor: wait; opacity: .6; }
.login-card { position: relative; }
.login-language {
  position: absolute; top: 16px; right: 16px; height: 30px;
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-2);
}
.login-language svg { width: 13px; height: 13px; }
.login-language select {
  width: 34px; align-self: stretch; border: 0; outline: 0; padding: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ---------- Page container ---------- */
.view {
  padding: 26px calc(26px + var(--safe-r)) calc(26px + var(--safe-b)) calc(26px + var(--safe-l));
  max-width: var(--maxw); width: 100%; margin: 0 auto; min-width: 0;
  animation: fadeUp .24s var(--ease);
}

/* ---------- Containment ----------
   The rules that let .main stop clipping. Each one is a place where content
   wider than the phone had been escaping its container:

   - A grid item defaults to min-width:auto, so one wide child pushes the whole
     track past the viewport. At 375px this made a 1fr column 509px wide.
   - A tab strip is a horizontal list by nature; it scrolls rather than pushing.
   - A .row is a horizontal line by nature too, but on a phone there is no room
     to be horizontal, so below the phone breakpoint it wraps. */
.grid > * { min-width: 0; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > * { flex: none; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.page-sub { color: var(--text-2); margin-top: 3px; }
.page-head .spacer { flex: 1; }

.grid { display: grid; gap: 16px; }
/* A wide pane beside a narrower one — a form and its list, a table and its
   summary. It exists because pages were writing the same layout inline, and an
   inline grid-template-columns cannot be folded by a media query: the missions
   page carried a literal 380px first column, which on a 358px phone put its
   second card 22px past the right edge and slid the whole document sideways.

   minmax(0, …) on both tracks, so neither can be held open by its content. */
.grid-aside { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
.grid-aside-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) {
  .grid-aside, .grid-aside-wide { grid-template-columns: minmax(0, 1fr); }
}

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.card.pad-lg { padding: 22px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card-head h3 { font-size: var(--text-md); font-weight: 700; }
.card-head .spacer { flex: 1; }

.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; position: relative; overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); border-color: var(--border-strong); }
.card.tile:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); border-color: var(--border-strong); }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat .stat-label { color: var(--text-2); font-size: var(--text-sm); font-weight: 500; }
.stat .stat-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-content: center; background: var(--primary-soft); color: var(--violet-300); }
.stat .stat-ico svg { width: 18px; height: 18px; }
.stat .stat-value { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; margin-top: 8px; }
.stat .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 600; margin-top: 6px; }
.stat .stat-delta.up { color: var(--success-ink); }
.stat .stat-delta.down { color: var(--error-ink); }
.stat .stat-delta svg { width: 14px; height: 14px; }
.stat .spark { position: absolute; right: 12px; bottom: 10px; opacity: .8; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: 10px; font-weight: 600; font-size: var(--text-base);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  transition: background var(--dur), border-color var(--dur), transform var(--dur), opacity var(--dur);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.sm { padding: 6px 11px; font-size: var(--text-sm); border-radius: 8px; }
.btn.lg { padding: 12px 20px; font-size: var(--text-md); }
.btn.block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-text); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--glow-primary); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 30px -8px rgba(124,58,237,.65); }
.btn-secondary { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-3); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-fill); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn.loading { color: transparent; position: relative; }
.btn.loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite;
}

.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-content: center;
  color: var(--text-2); background: transparent; border: 1px solid transparent;
  transition: background var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot {
  position: absolute; transform: translate(9px,-9px); width: 7px; height: 7px;
  background: var(--error); border-radius: 50%; border: 2px solid var(--bg);
}

/* ============================================================
   Badges / chips / pills
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; line-height: 1.4;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.neutral { color: var(--text-2); background: var(--surface-3); border-color: var(--border); }
.badge.primary { color: var(--violet-300); background: var(--primary-soft); }
.badge.success { color: var(--success-ink); background: var(--success-bg); }
.badge.warning { color: var(--warning-ink); background: var(--warning-bg); }
.badge.error { color: var(--error-ink); background: var(--error-bg); }
.badge.info { color: var(--info-ink); background: var(--info-bg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: var(--text-sm); font-weight: 500;
}
.chip .x { cursor: pointer; opacity: .6; } .chip .x:hover { opacity: 1; }

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.hint { font-size: 12px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border-interactive); color: var(--text); font-size: var(--text-base);
  font-family: inherit; transition: border-color var(--dur), box-shadow var(--dur);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft);
}
/* The option list is painted by the browser and inherits the select, not the
   box around it. Three selects here sit on a transparent background — both
   language pickers and the Claude project picker — and handed a near-white
   foreground to whatever ground the platform picked. color-scheme in
   tokens.css settles the ground; naming both ends here settles the rest. */
select option { background-color: var(--surface); color: var(--text); }
.textarea { resize: vertical; min-height: 92px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.input.error, .textarea.error { border-color: var(--error-ink); }
.field-error { color: var(--error-ink); font-size: 12px; }

/* switch */
.switch { position: relative; display: inline-flex; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-interactive);
  border-radius: 999px; transition: background var(--dur);
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3); transition: transform var(--dur), background var(--dur);
}
.switch input:checked + .track { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .track + .thumb { transform: translateX(18px); background: #fff; }

/* checkbox / radio */
.check { display: inline-flex; align-items: center; gap: 9px; font-size: var(--text-base); color: var(--text-2); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }

/* range */
input[type="range"] { width: 100%; accent-color: var(--primary); }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.tbl thead th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-3); padding: 10px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; cursor: default;
}
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th.sortable:hover { color: var(--text-2); }
.tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-sub { color: var(--text-3); font-size: 12px; }

/* success meter */
.meter { width: 84px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; }
.meter > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }

/* ============================================================
   Avatars, agent icons
   ============================================================ */
.avatar { border-radius: 50%; overflow: hidden; background: var(--surface-3); display: grid; place-content: center; font-weight: 600; color: var(--text-2); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.aico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-content: center;
  color: #fff; flex: none; font-weight: 700;
}
.aico svg { width: 18px; height: 18px; }

/* ============================================================
   Progress
   ============================================================ */
.progress { width: 100%; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .5s var(--ease); }
.progress.indeterminate > span { width: 40% !important; animation: indet 1.3s var(--ease) infinite; }
@keyframes indet { 0%{margin-left:-40%} 100%{margin-left:100%} }

/* ============================================================
   Tabs
   ============================================================ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 10px 14px; font-weight: 600; color: var(--text-2); position: relative;
  border: 0; background: transparent; font-size: var(--text-base);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; }

/* ============================================================
   Alerts / toasts
   ============================================================ */
.alert {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: 12px; align-items: flex-start;
  border: 1px solid var(--border); background: var(--surface-2);
}
.alert .a-ico { flex: none; margin-top: 1px; } .alert .a-ico svg { width: 18px; height: 18px; }
.alert .a-body { flex: 1; }
.alert .a-title { font-weight: 700; font-size: var(--text-base); }
.alert .a-desc { color: var(--text-2); font-size: var(--text-sm); margin-top: 1px; }
.alert.success { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.alert.success .a-ico { color: var(--success-ink); }
.alert.warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.alert.warning .a-ico { color: var(--warning-ink); }
.alert.error { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
.alert.error .a-ico { color: var(--error-ink); }
.alert.info .a-ico { color: var(--info-ink); }

.toast-root { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 36px); }
.toast {
  display: flex; gap: 11px; padding: 13px 14px; border-radius: 12px; align-items: flex-start;
  background: var(--elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: fadeUp .2s var(--ease);
}
.toast .a-ico svg { width: 18px; height: 18px; }
.toast.success .a-ico { color: var(--success-ink); }
.toast.error .a-ico { color: var(--error-ink); }
.toast.warning .a-ico { color: var(--warning-ink); }
.toast.info .a-ico { color: var(--info-ink); }
.toast .x { color: var(--text-3); cursor: pointer; } .toast .x:hover { color: var(--text); }

/* ============================================================
   Overlays: modal, drawer, dropdown
   ============================================================ */
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 100; animation: fadeUp .16s var(--ease); }
.modal {
  position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow: auto;
  background: var(--elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); animation: modalIn .2s var(--ease);
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: var(--text-lg); font-weight: 700; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); }

.drawer {
  position: fixed; z-index: 101; top: 0; right: 0; height: 100vh; height: 100dvh; width: 440px;
  max-width: 92vw; background: var(--bg-1); border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xl); overflow-y: auto; animation: slideIn .24s var(--ease);
}
@keyframes slideIn { from{transform:translateX(100%)} to{transform:none} }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-1); }

.menu {
  position: absolute; z-index: 120; min-width: 210px; padding: 6px;
  background: var(--elevated); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-lg); animation: fadeUp .12s var(--ease);
}
.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-2); font-size: var(--text-base); }
.menu-item svg { width: 16px; height: 16px; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item.danger { color: var(--error-ink); } .menu-item.danger:hover { background: var(--error-bg); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-label { font-size: 12px; color: var(--text-3); padding: 8px 10px 4px; font-weight: 600; }

/* ============================================================
   Tooltip
   ============================================================ */
/* The tooltip is built only while it is wanted. It used to exist permanently at
   opacity 0 — invisible, but a real nowrap box hanging off the side of its
   button, and absolutely positioned descendants still count toward a scroll
   container's extent. With .main clipping the overflow nobody could tell; once
   the clip came off, a 36px icon button in the Kanban header was pushing the
   whole page 12px wider than the phone. `content: none` means no box at all.

   The cost is the fade-in, which cannot animate from nothing. A tooltip that
   appears at once is a fair trade for a page that does not scroll sideways. */
.tip { position: relative; }
.tip[data-tip]::after {
  content: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: var(--elevated); color: var(--text);
  border: 1px solid var(--border-strong); padding: 6px 9px; border-radius: 8px;
  font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-md);
  pointer-events: none; z-index: 130;
}
.tip:hover[data-tip]::after,
.tip:focus-visible[data-tip]::after { content: attr(data-tip); }
/* No hover on a touch screen, so the tooltip is only ever dead weight there. */
@media (pointer: coarse) {
  .tip:hover[data-tip]::after { content: none; }
}

/* ============================================================
   Empty / skeleton / spinner
   ============================================================ */
.empty { text-align: center; padding: 40px 20px; color: var(--text-2); }
.empty .empty-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); display: grid; place-content: center; margin: 0 auto 14px; color: var(--text-3); }
.empty .empty-ico svg { width: 26px; height: 26px; }
.empty h4 { color: var(--text); font-size: var(--text-md); }
.empty p { margin: 4px 0 16px; font-size: var(--text-sm); }

.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--surface-3); border-top-color: var(--primary-ink); animation: spin .7s linear infinite; }

/* ============================================================
   Chat
   ============================================================ */
.chat { display: grid; grid-template-rows: 1fr auto; height: calc(100vh - var(--topbar-total) - 52px); height: calc(100dvh - var(--topbar-total) - 52px); }
.chat-scroll { overflow-y: auto; padding: 8px 4px 20px; display: flex; flex-direction: column; gap: 18px; }
.msg { display: flex; gap: 12px; max-width: 780px; animation: fadeUp .2s var(--ease); }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { padding: 12px 15px; border-radius: 14px; line-height: 1.55; }
.msg.user .bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant .bubble { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg .bubble pre { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow-x: auto; margin: 8px 0; }
.msg .bubble code { font-family: var(--font-mono); font-size: 13px; }
.msg .bubble p { margin: 6px 0; } .msg .bubble p:first-child { margin-top: 0; } .msg .bubble p:last-child { margin-bottom: 0; }
.chat-input { display: flex; gap: 10px; align-items: flex-end; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.chat-input textarea { flex: 1; border: 0; background: transparent; resize: none; color: var(--text); font-family: inherit; font-size: var(--text-base); max-height: 160px; }
.chat-input textarea:focus { outline: none; }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); margin: 0 1px; animation: blink 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* ============================================================
   Hermes Kanban
   ============================================================ */
.kanban-page, .agent-fleet, .modal {
  --kanban-info-soft: color-mix(in srgb, var(--info) 12%, transparent);
  --kanban-success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --kanban-warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --kanban-error-soft: color-mix(in srgb, var(--error) 12%, transparent);
}
.kanban-page { min-width: 0; min-height: calc(100vh - var(--topbar-total) - 48px); min-height: calc(100svh - var(--topbar-total) - 48px); display: flex; flex-direction: column; }
.kanban-head { margin-bottom: 12px; }
.kanban-fleet { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kanban-agent {
  min-width: 0; min-height: 72px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr; align-items: center; gap: 0 9px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); text-align: left;
}
.kanban-agent:hover { border-color: var(--border-strong); background: var(--surface-2); }
.kanban-agent-icon { width: 38px; height: 38px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 7px; }
.kanban-agent-icon svg { width: 17px; height: 17px; }
.kanban-agent-icon.violet, .kanban-assignee i.violet { background: var(--primary-soft); color: var(--violet-300); }
.kanban-agent-icon.blue, .kanban-assignee i.blue { background: var(--kanban-info-soft); color: var(--info-ink); }
.kanban-agent-icon.green, .kanban-assignee i.green { background: var(--kanban-success-soft); color: var(--success-ink); }
.kanban-agent-icon.amber, .kanban-assignee i.amber { background: var(--kanban-warning-soft); color: var(--warning-ink); }
.kanban-agent-icon.cyan, .kanban-assignee i.cyan { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info-ink); }
.kanban-agent-icon.teal, .kanban-assignee i.teal { background: var(--teal-soft); color: var(--teal-ink); }
.kanban-agent-copy { min-width: 0; align-self: end; display: flex; flex-direction: column; }
.kanban-agent-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-agent-copy small, .kanban-agent-count { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-agent-state { align-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--success-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.kanban-agent-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kanban-agent-state.running { color: var(--warning-ink); }
.kanban-agent-state.blocked { color: var(--error-ink); }
.kanban-agent-state.waiting { color: var(--warning-ink); }
.kanban-agent-count { align-self: start; }
.kanban-board {
  min-height: 570px; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 9px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.kanban-column {
  min-height: 0; display: grid; grid-template-rows: 42px minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); scroll-snap-align: start;
}
.kanban-column > header { display: flex; align-items: center; gap: 7px; padding: 0 9px; border-bottom: 1px solid var(--border); background: var(--surface); }
.kanban-column > header strong { font-size: 12px; }
.kanban-column > header .icon-btn { width: 28px; height: 28px; margin-left: auto; }
.kanban-column > header .icon-btn svg { width: 13px; height: 13px; }
.kanban-column-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; color: var(--text-3); }
.kanban-column-icon svg { width: 13px; height: 13px; }
.kanban-column-icon.info { background: var(--kanban-info-soft); color: var(--info-ink); }
.kanban-column-icon.success { background: var(--kanban-success-soft); color: var(--success-ink); }
.kanban-column-icon.warning { background: var(--kanban-warning-soft); color: var(--warning-ink); }
.kanban-column-icon.error { background: var(--kanban-error-soft); color: var(--error-ink); }
.kanban-column-count { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: var(--surface-3); color: var(--text-3); font-family: var(--font-mono); font-size: 12px; text-align: center; }
.kanban-column-body { min-height: 0; overflow-y: auto; padding: 8px; transition: background var(--dur), box-shadow var(--dur); }
.kanban-column-body.drag-over { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.kanban-column-empty { min-height: 72px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-3); font-size: 12px; }
.kanban-card {
  margin-bottom: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
}
.kanban-card:hover, .kanban-card:focus-visible { border-color: var(--border-strong); outline: none; box-shadow: var(--shadow-md); }
.kanban-card.dragging { opacity: .4; }
.kanban-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.kanban-card-top code { overflow: hidden; flex: 1; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-priority { padding: 2px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-3); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.kanban-priority.p1 { background: var(--kanban-info-soft); color: var(--info-ink); }
.kanban-priority.p2 { background: var(--kanban-warning-soft); color: var(--warning-ink); }
.kanban-priority.p3 { background: var(--kanban-error-soft); color: var(--error-ink); }
.kanban-card h3 { margin: 0; color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.kanban-card > p { max-height: 48px; margin-top: 7px; overflow: hidden; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.kanban-card-live { height: 25px; display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 7px; border-radius: 5px; background: var(--kanban-warning-soft); color: var(--text-2); font-family: var(--font-mono); font-size: 12px; }
.kanban-card-live i, .kanban-detail-live i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 17%, transparent); animation: pulse 1.4s infinite; }
.kanban-card-live span:last-child { margin-left: auto; }
.kanban-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-3); font-size: 12px; }
.kanban-card-meta > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.kanban-card-meta svg { width: 11px; height: 11px; }
.kanban-card-meta time { margin-left: auto; font-family: var(--font-mono); }
.kanban-assignee { min-width: 0; max-width: 92px; color: var(--text-2); font-weight: 650; }
.kanban-assignee i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 4px; }
.kanban-assignee i svg { width: 10px; height: 10px; }
.kanban-warning { color: var(--warning-ink); }
.kanban-form-grid { display: grid; grid-template-columns: 1.35fr 1fr .7fr; gap: 10px; }
.kanban-form-grid .field { min-width: 0; }
.kanban-form-note { margin-top: -4px; padding: 9px 10px; border-left: 3px solid var(--primary-ink); background: var(--primary-soft); color: var(--text-2); font-size: 12px; }
.kanban-task-files { min-height: 36px; display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.kanban-task-files > span { min-width: 0; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-detail-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.modal:has(.kanban-detail-meta) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.modal:has(.kanban-detail-meta) .modal-body { overflow-y: auto; }
.kanban-detail-meta code { color: var(--text-3); font-size: 12px; }
.kanban-detail-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.kanban-detail-live svg { width: 13px; height: 13px; }
.kanban-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kanban-detail-stats > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-left: 1px solid var(--border); }
.kanban-detail-stats > span:first-child { border-left: 0; }
.kanban-detail-stats small { color: var(--text-3); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.kanban-detail-stats strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-detail-body { margin-bottom: 15px; color: var(--text-2); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.kanban-result { margin-bottom: 16px; padding: 11px 12px; border-left: 3px solid var(--success-ink); background: var(--kanban-success-soft); }
.kanban-result strong { font-size: 12px; }
.kanban-result p { margin-top: 4px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.kanban-detail-controls { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
.kanban-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 17px; }
.kanban-detail-tabs { display: flex; gap: 2px; height: 38px; margin: 0 -4px 14px; padding: 0 4px; border-bottom: 1px solid var(--border); }
.kanban-detail-tabs button { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border: 0; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 700; }
.kanban-detail-tabs button::after { content: ""; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: transparent; }
.kanban-detail-tabs button.active { color: var(--text); }
.kanban-detail-tabs button.active::after { background: var(--primary); }
.kanban-detail-tabs small { min-width: 16px; padding: 1px 4px; border-radius: 7px; background: var(--surface-3); color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.kanban-detail-panel { min-height: 240px; }
.kanban-detail-section { margin-bottom: 16px; }
.kanban-detail-section > h4, .kanban-section-head h4 { margin: 0; font-size: 12px; }
.kanban-detail-section > p { margin-top: 6px; color: var(--text-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.kanban-detail-section.danger { padding: 10px 12px; border-left: 3px solid var(--error-ink); background: var(--kanban-error-soft); }
.kanban-section-head { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.kanban-section-head > span, .kanban-section-head small { color: var(--text-3); font-size: 12px; }
.kanban-section-head > div { min-width: 0; }
.kanban-section-head > div small { display: block; margin-top: 2px; }
.kanban-detail-empty { min-height: 58px; display: grid; place-items: center; padding: 14px; border: 1px dashed var(--border); color: var(--text-3); font-size: 12px; text-align: center; }
.kanban-child-list { border-top: 1px solid var(--border); }
.kanban-child-list button { width: 100%; min-height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 8px 3px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; }
.kanban-child-list button:hover { background: var(--surface-2); }
.kanban-child-list button > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kanban-child-list strong, .kanban-child-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-child-list strong { font-size: 12px; }
.kanban-child-list small { color: var(--text-3); font-size: 12px; }
.kanban-child-list svg { width: 14px; height: 14px; color: var(--text-3); }
.kanban-run-list { display: grid; gap: 7px; }
.kanban-run { padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.kanban-run.active { border-color: var(--warning-ink); background: var(--kanban-warning-soft); }
.kanban-run header { display: flex; align-items: center; gap: 7px; }
.kanban-run header strong { font-size: 12px; }
.kanban-run header code { color: var(--text-3); font-size: 12px; }
.kanban-run header time { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.kanban-run > p { margin-top: 7px; color: var(--text-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.kanban-run .error-text { color: var(--error-ink); }
.kanban-run details { margin-top: 7px; }
.kanban-run summary { color: var(--text-3); cursor: pointer; font-size: 12px; }
.kanban-run pre { max-height: 240px; margin-top: 6px; overflow: auto; padding: 8px; background: var(--surface-2); color: var(--text-2); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.kanban-worker-log { max-height: 330px; overflow: auto; padding: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.kanban-file-list { border-top: 1px solid var(--border); }
.kanban-file-row { min-height: 52px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px 30px; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.kanban-file-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-2); color: var(--text-3); }
.kanban-file-row > span svg, .kanban-file-row .icon-btn svg { width: 13px; height: 13px; }
.kanban-file-row > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kanban-file-row strong, .kanban-file-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-file-row strong { font-size: 12px; }
.kanban-file-row small { color: var(--text-3); font-size: 12px; }
.kanban-file-row .icon-btn { width: 28px; height: 28px; }
.kanban-file-row .icon-btn.danger { color: var(--error-ink); box-shadow: inset 0 0 0 1px var(--error-ink); }
.kanban-activity { margin-bottom: 14px; }
.kanban-activity h4 { margin-bottom: 7px; font-size: 12px; }
.kanban-activity-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.kanban-activity-item > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-2); color: var(--text-3); }
.kanban-activity-item svg { width: 12px; height: 12px; }
.kanban-activity-item strong { color: var(--text-2); font-size: 12px; text-transform: capitalize; }
.kanban-activity-item p { margin-top: 2px; color: var(--text); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.kanban-activity-item time { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.kanban-activity-empty { padding: 15px 0; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12px; }
.kanban-comment { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.kanban-comment .textarea { min-height: 64px; }
.kanban-profile-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.kanban-profile-head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.kanban-profile-head > div span { color: var(--text-3); font-size: 12px; }
.kanban-profile-description { margin-bottom: 16px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.kanban-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kanban-profile-stats span { display: flex; flex-direction: column; gap: 2px; padding: 11px; border-left: 1px solid var(--border); color: var(--text-3); font-size: 12px; text-align: center; text-transform: uppercase; }
.kanban-profile-stats span:first-child { border-left: 0; }
.kanban-profile-stats strong { color: var(--text); font-size: 17px; }
.agent-fleet #fleetRows tr[data-profile] { cursor: pointer; }
.agent-fleet #fleetRows tr[data-profile]:hover { background: var(--surface-2); }
.agent-fleet .kanban-agent-icon { grid-row: auto; }

/* ============================================================
   Misc utility
   ============================================================ */
/* Wrapping is the default. .row is the generic horizontal group, used at every
   size from a topbar to a cell in a two-column grid, and a horizontal group
   that cannot wrap can only overflow. That overflow was invisible while .main
   clipped it; with the clip gone it turned up again at 375, then at 768, then
   at 1024 — the same avatar stack each time, just a wider container. The
   explicit .wrap utility that used to opt into this is now redundant, and left
   in place so no page has to be edited to keep working. */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }
/* Opt back out where a line genuinely must stay a line. */
.row.nowrap { flex-wrap: nowrap; }
.between { justify-content: space-between; }
.spacer { flex: 1; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-4{margin-bottom:16px}
.hidden { display: none !important; }
.fw-700 { font-weight: 700; } .fw-600 { font-weight: 600; }
.text-sm { font-size: var(--text-sm); } .text-lg { font-size: var(--text-lg); }
.pill-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.pill-tabs button { border: 0; background: transparent; color: var(--text-2); padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: var(--text-sm); }
.pill-tabs button.active { background: var(--primary); color: #fff; }

.token-swatch { height: 56px; border-radius: 10px; border: 1px solid var(--border); }
.dots { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }

/* code block */
.codeblock { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.codeblock .cb-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.codeblock pre { padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.tok-key { color: var(--violet-400); } .tok-str { color: var(--success-ink); } .tok-fn { color: var(--info-ink); } .tok-com { color: var(--text-3); }

/* ============================================================
   Responsive
   ============================================================ */
.menu-toggle { display: none; }
/* The compact stand-in for the search field. It is a button rather than a
   readonly input because on a phone the field was simply hidden, which left
   the command palette — the only global search — reachable by ⌘K alone. */
.search-compact { display: none; }

/* ---------- Drawer scrim ----------
   The drawer used to slide over the page with nothing behind it: no dimming to
   say the page had gone inert, and no target to tap to dismiss. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 89;
  background: var(--scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
/* Above the drawer breakpoint the sidebar is an ordinary column, so the scrim
   must not exist even as an invisible layer over the page. */
@media (min-width: 901px) { .nav-scrim { display: none; } }
/* The page behind an open drawer does not scroll. */
body.nav-open { overflow: hidden; }

@media (max-width: 1280px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  /* Not enough width for two nav columns and a workspace. The rail stays —
     it is the part that tells you where you are — and the section column
     becomes a flyout the rail opens. */
  .layout { grid-template-columns: var(--rail-w) 1fr; }
  .sidebar { grid-template-columns: var(--rail-w); width: var(--rail-w); }
  .sectionnav {
    position: absolute; left: var(--rail-w); top: 0; bottom: 0; width: 200px;
    background: var(--bg-1); border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg); z-index: 91;
    /* It is anchored at left:var(--rail-w), so sliding it by its own width
       alone leaves the last 68px of it sitting on top of the rail: opaque,
       z-index 91, swallowing every click on a nav item. It has to travel its
       own width AND the rail offset to actually be gone. */
    transform: translateX(calc(-100% - var(--rail-w) - 6px));
    transition: transform var(--dur) var(--ease);
  }
  .sidebar.expanded { overflow: visible; }
  .sidebar.expanded .sectionnav { transform: none; }
  /* The column is a flyout now, so its chip is behind a tap — the rail takes
     the account back. */
  .rail-foot #user-menu { display: grid; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 90; transform: translateX(-100%); transition: transform var(--dur);
    /* Back to both columns: on a phone the drawer is the only navigation there
       is, so hiding half of it behind a second tap helps nobody. */
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    width: var(--sidebar-w); overflow: hidden;
  }
  .sidebar.open { transform: none; }
  .sectionnav {
    position: static; width: auto; transform: none; box-shadow: none;
    border-right: 0; background: transparent;
  }
  /* Both columns are back inside the drawer, so the chip is visible again. */
  .rail-foot #user-menu { display: none; }
  .menu-toggle { display: grid; }
  /* Once the menu button joins the row there is no longer room for everything.
     The live/demo badge and the help button are the two that carry least — the
     badge repeats what the page already shows, and help is in the palette. */
  .topbar-actions > .badge, .topbar-actions #helpBtn { display: none; }
  .topbar-actions { flex: none; }
  .kanban-fleet { grid-template-columns: repeat(5, 190px); overflow-x: auto; padding-bottom: 5px; }
  .kanban-board { min-height: 540px; }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .view { padding: 16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .search { display: none; }
  .search-compact { display: grid; }
  /* Longhands, not the shorthand: `padding: 0 … 0 …` here silently reset the
     padding-top that holds the bar clear of the notch. */
  .topbar {
    padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r));
    padding-bottom: 0; gap: 8px;
  }
  .topbar-actions { gap: 3px; }
  .topbar-actions > .badge, .topbar-actions #helpBtn, .topbar-actions #bellBtn { display: none; }
  .topbar-actions #newAgentTop { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .topbar-actions #newAgentTop span { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-orb { display: none; }
  .kanban-head { align-items: flex-start; flex-wrap: wrap; }
  .kanban-head > div:first-child { width: 100%; }
  .kanban-form-grid, .kanban-detail-controls { grid-template-columns: 1fr; }
  .kanban-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban-detail-stats > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .kanban-detail-stats > span:nth-child(4) { border-top: 1px solid var(--border); }
  .kanban-detail-tabs { overflow-x: auto; }
  .kanban-detail-tabs button { flex: none; }
  .kanban-comment { grid-template-columns: 1fr; }
}

/* ============================================================
   Bottom tabs — the phone and tablet shell
   ============================================================ */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding: 0 calc(var(--safe-l)) var(--safe-b) calc(var(--safe-r));
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  /* Content has to be able to scroll clear of a bar that floats over it. */
  .view { padding-bottom: calc(24px + var(--tabbar-h) + var(--safe-b)); }
  /* The tab bar owns the bottom of the screen now, so the live-call dock sits
     above it rather than under it. */
  .mila-dock { bottom: calc(12px + var(--tabbar-h) + var(--safe-b)); }
}
.tab-item {
  position: relative; min-height: 52px;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  color: var(--text-3); text-align: center;
}
.tab-item svg { width: 21px; height: 21px; }
.tab-item span { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.tab-item.active { color: var(--primary-ink); }
.tab-count {
  position: absolute; top: 2px; left: 50%; margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center; color: #fff; background: var(--primary);
}
.tab-count.error { background: var(--danger-fill); }
.tab-count.warning { background: var(--warning); color: #2b1a02; }
.tab-count[hidden] { display: none; }
/* The orb rises out of the bar: the one control that is not a destination. */
.tab-orb {
  justify-self: center; width: 54px; height: 54px; border-radius: 50%;
  margin-top: -18px;
  background: conic-gradient(from 210deg, var(--teal), var(--primary), var(--violet-400), var(--teal));
  display: grid; place-content: center;
  box-shadow: 0 0 0 4px var(--bg-1), 0 8px 22px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
.tab-orb::after {
  content: ""; width: 19px; height: 16px; background-color: #fff;
  -webkit-mask: url("../brand/mila-mark.svg") no-repeat center / contain;
  mask: url("../brand/mila-mark.svg") no-repeat center / contain;
}
.tab-orb-spacer { display: block; }

/* ============================================================
   Needs you — the queue of things blocked on a person
   ============================================================ */
.needs-host { margin-bottom: 18px; }
.needs {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 14px 16px;
}
/* The border carries the worst severity present, and every row carries its own
   glyph and word — colour is never the only thing saying what this is. */
.needs-blocked { border-color: color-mix(in srgb, var(--error) 42%, var(--border)); background: linear-gradient(180deg, var(--error-soft), transparent 62%), var(--surface); }
.needs-waiting, .needs-overdue { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); background: linear-gradient(180deg, var(--warning-soft), transparent 62%), var(--surface); }
.needs-attention { border-color: color-mix(in srgb, var(--info) 38%, var(--border)); }

.needs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.needs-head strong { font-size: var(--text-md); letter-spacing: -.01em; }
.needs-pill {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
}

.needs-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: 48px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.needs-row:hover { background: var(--surface-2); border-radius: 8px; }
.needs-mark {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-content: center;
  font-weight: 800; font-size: 13px;
}
.needs-mark.error { background: var(--error-soft); color: var(--error-ink); }
.needs-mark.warning { background: var(--warning-soft); color: var(--warning-ink); }
.needs-mark.info { background: var(--info-soft); color: var(--info-ink); }
.needs-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.needs-text strong { font-size: var(--text-base); font-weight: 600; }
.needs-text span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-go {
  font-size: 12px; font-weight: 600; color: var(--primary-ink);
  border: 1px solid var(--border-interactive); border-radius: 8px; padding: 5px 11px;
  white-space: nowrap;
}
.needs-row:hover .needs-go { border-color: var(--primary-ink); }

/* Nothing waiting is a real answer and deserves to look like one, not like an
   empty container that failed to load. */
.needs-clear { display: flex; align-items: center; gap: 12px; }
.needs-clear-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-content: center;
  background: var(--success-soft); color: var(--success-ink);
}
.needs-clear-mark svg { width: 17px; height: 17px; }
.needs-clear strong { font-size: var(--text-base); font-weight: 600; }

/* ============================================================
   Hero (dashboard welcome)
   ============================================================ */
.hero {
  position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px;
  align-items: center; overflow: hidden;
  background:
    var(--hero-glow),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  padding: 28px 30px; margin-bottom: 18px;
}
.hero h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.hero h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-2); margin-top: 8px; max-width: 46ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; }
.hero-chip svg { width: 15px; height: 15px; color: var(--violet-400); }
.hero-cta { display: flex; gap: 10px; margin-top: 20px; }
.hero-orb { position: relative; height: 190px; display: grid; place-items: center; }
.hero-orb svg { filter: drop-shadow(0 20px 40px rgba(124, 58, 237, 0.5)); animation: float 6s var(--ease) infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================================
   Command palette (⌘K)
   ============================================================ */
.cmdk { position: fixed; z-index: 210; top: 90px; left: 50%; transform: translateX(-50%); width: 600px; max-width: calc(100vw - 32px);
  background: var(--elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; animation: fadeUp .16s var(--ease); }
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.cmdk-search svg { width: 18px; height: 18px; color: var(--text-3); }
.cmdk-search input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: var(--text-md); }
.cmdk-search input:focus { outline: none; }
.cmdk-list { max-height: 380px; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); cursor: pointer; }
.cmdk-item svg { width: 17px; height: 17px; }
.cmdk-item .k { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.cmdk-item.active, .cmdk-item:hover { background: var(--primary-soft); color: var(--text); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.cmdk-foot kbd { font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; }
/* On a phone a 600px dialog floating 90px down is a desktop idea. The palette
   becomes the screen, the list gets the height, and the keyboard-hint footer
   goes away because there is no keyboard to hint at. */
@media (max-width: 640px) {
  .cmdk {
    top: 0; left: 0; right: 0; bottom: 0; transform: none;
    width: auto; max-width: none; border-radius: 0; border: 0;
    display: flex; flex-direction: column;
    padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  }
  .cmdk-search { padding: 16px 18px; }
  .cmdk-search input { font-size: 16px; }
  .cmdk-list { flex: 1; max-height: none; }
  .cmdk-item { padding: 13px 12px; }
  .cmdk-foot { display: none; }
}

/* Notifications panel */
.notif { position: absolute; z-index: 120; width: 340px; padding: 8px; background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); animation: fadeUp .12s var(--ease); }
.notif-head { display: flex; align-items: center; padding: 8px 10px; }
.notif-body { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; padding: 10px; border-radius: 10px; align-items: flex-start; }
.notif-item:hover { background: var(--surface-2); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--info); }
.notif-dot.error { background: var(--error); }
.notif-dot.warning { background: var(--warning); }
.notif-dot.success { background: var(--success); }

/* Chart hover tooltip */
.chart-host { position: relative; }
.chart-tip { position: absolute; pointer-events: none; transform: translate(-50%, -120%); background: var(--elevated); border: 1px solid var(--border-strong); border-radius: 9px; padding: 7px 10px; font-size: 12px; box-shadow: var(--shadow-md); white-space: nowrap; opacity: 0; transition: opacity var(--dur); z-index: 5; }
.chart-tip.show { opacity: 1; }
.chart-tip .ct-row { display: flex; align-items: center; gap: 7px; }
.chart-dot-hover { transition: r .1s var(--ease); }
.cd { cursor: crosshair; }
.cd:hover .chart-dot-hover { r: 5.5; }

/* Compact mode */
body.compact .view {
  padding: 18px calc(18px + var(--safe-r)) calc(18px + var(--safe-b)) calc(18px + var(--safe-l));
}
body.compact .card, body.compact .stat { padding: 14px; }
body.compact .card.pad-lg { padding: 16px; }

/* Official Hermes Dashboard embedded in the existing Agentic OS shell. */
.hermes-control { display: flex; min-height: calc(100vh - var(--topbar-total) - 48px); min-height: calc(100svh - var(--topbar-total) - 48px); flex-direction: column; }
.hermes-head { margin-bottom: 14px; }
.hermes-frame-shell {
  position: relative; flex: 1; min-height: 680px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #090b10;
}
.hermes-frame { display: block; width: 100%; height: 100%; min-height: 680px; border: 0; background: #090b10; }
.hermes-frame-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-2); background: var(--surface);
}
.hermes-frame-loading.hidden, .hermes-control .hidden { display: none; }
.hermes-control > .alert { margin-top: 12px; }
@media (max-width: 640px) {
  .hermes-control { min-height: calc(100vh - var(--topbar-total) - 32px); min-height: calc(100svh - var(--topbar-total) - 32px); }
  .hermes-frame-shell, .hermes-frame { min-height: 620px; }
  .hermes-head .btn span { display: none; }
}

/* Obsidian knowledge center */
.knowledge-stats { margin-bottom: 14px; }
.knowledge-status {
  min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 14px;
}
.knowledge-logo {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--primary-soft); color: var(--violet-300);
}
.knowledge-logo svg { width: 18px; height: 18px; }
.knowledge-status > div { min-width: 0; display: flex; flex-direction: column; }
.knowledge-status > div strong { font-size: var(--text-sm); }
.knowledge-status > div span { margin-top: 2px; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-status .badge { flex: none; }
.knowledge-updated { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.knowledge-graph { min-height: 260px; margin-bottom: 14px; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.knowledge-graph.empty { display: grid; place-items: center; text-align: center; }
.knowledge-graph > svg { width: 100%; height: 300px; display: block; margin-top: 8px; overflow: visible; }
.knowledge-graph > svg line { stroke: color-mix(in srgb, var(--primary) 38%, var(--border)); stroke-width: 1.2; }
.knowledge-graph > svg line.open { stroke-dasharray: 4 5; opacity: .48; }
.knowledge-graph-node { cursor: pointer; }
.knowledge-graph-node circle { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; transition: fill .16s var(--ease), stroke .16s var(--ease), transform .16s var(--ease); }
.knowledge-graph-node:hover circle, .knowledge-graph-node.active circle { fill: var(--primary); stroke: var(--primary); transform: scale(1.08); }
.knowledge-graph-node text { fill: var(--text-2); font-size: 12px; text-anchor: middle; pointer-events: none; }
.knowledge-graph-node.active text { fill: var(--text); font-weight: 700; }
.knowledge-workspace {
  min-height: 660px; height: calc(100vh - var(--topbar-total) - 560px); height: calc(100dvh - var(--topbar-total) - 560px); display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.35fr); gap: 14px;
}
.knowledge-browser, .knowledge-inspector {
  min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface);
}
.knowledge-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.knowledge-toolbar {
  height: 58px; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.knowledge-toolbar > span { flex: none; color: var(--text-3); font-size: 12px; }
.knowledge-search { min-width: 0; flex: 1; height: 36px; background: var(--surface); }
.knowledge-search input { width: 100%; }
.knowledge-note-list { min-height: 0; overflow-y: auto; padding: 6px; }
.knowledge-note {
  width: 100%; min-height: 84px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start; gap: 9px; padding: 10px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text); text-align: left;
}
.knowledge-note:hover { background: var(--surface-2); }
.knowledge-note.active { border-color: var(--border-strong); background: var(--primary-soft); }
.knowledge-note-icon {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px;
  background: var(--surface-3); color: var(--text-3);
}
.knowledge-note.active .knowledge-note-icon { background: var(--surface); color: var(--violet-300); }
.knowledge-note-icon svg { width: 15px; height: 15px; }
.knowledge-note-copy { min-width: 0; display: flex; flex-direction: column; }
.knowledge-note-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-note-copy small { margin-top: 2px; overflow: hidden; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-note-copy em { height: 30px; margin-top: 5px; overflow: hidden; color: var(--text-2); font-size: 12px; font-style: normal; line-height: 1.45; }
.knowledge-note-meta { display: flex; flex-direction: column; align-items: flex-end; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.knowledge-note-meta small { margin-top: 5px; }
.knowledge-inspector { display: grid; grid-template-rows: minmax(300px, 1.2fr) minmax(255px, .8fr); }
.knowledge-preview { min-height: 0; overflow-y: auto; padding: 16px; border-bottom: 1px solid var(--border); }
.knowledge-preview-head { display: flex; align-items: flex-start; gap: 10px; }
.knowledge-preview-head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.knowledge-preview-head strong { font-size: var(--text-md); }
.knowledge-preview-head span { margin-top: 3px; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.knowledge-note-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; color: var(--text-3); font-size: 12px; }
.knowledge-note-facts span { display: inline-flex; align-items: center; gap: 5px; }
.knowledge-note-facts svg { width: 12px; height: 12px; }
.knowledge-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.knowledge-tags span { padding: 3px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.knowledge-markdown {
  min-height: 180px; margin: 0; padding: 14px; overflow: visible; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg-1); color: var(--text); font: 12px/1.65 var(--font-mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.knowledge-empty { min-height: 240px; }
.knowledge-agents { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 14px 16px; }
.knowledge-section-head { display: flex; align-items: center; gap: 10px; }
.knowledge-section-head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.knowledge-section-head strong { font-size: 12px; }
.knowledge-section-head span { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.knowledge-tool-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 0; }
.knowledge-tool-list span { max-width: 100%; padding: 4px 6px; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.knowledge-usage { min-height: 0; overflow-y: auto; border-top: 1px solid var(--border); }
.knowledge-use-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.knowledge-use-row:last-child { border-bottom: 0; }
.knowledge-use-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-3); }
.knowledge-use-icon svg { width: 13px; height: 13px; }
.knowledge-use-row > div { min-width: 0; display: flex; flex-direction: column; }
.knowledge-use-row strong { font-size: 12px; }
.knowledge-use-row > div span { overflow: hidden; color: var(--text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-use-row time { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.knowledge-no-usage { padding: 18px 0; color: var(--text-3); font-size: 12px; }

@media (max-width: 1280px) {
  .knowledge-workspace { height: auto; grid-template-columns: 1fr; }
  .knowledge-browser { min-height: 520px; }
  .knowledge-inspector { min-height: 720px; }
}
@media (max-width: 900px) {
  .knowledge-status { align-items: flex-start; flex-wrap: wrap; }
  .knowledge-updated { width: 100%; margin-left: 48px; }
  .knowledge-workspace { min-height: 0; }
  .knowledge-note { grid-template-columns: 30px minmax(0, 1fr); }
  .knowledge-note-meta { display: none; }
}

/* Login */
.login-wrap { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; background: radial-gradient(60% 55% at 50% 28%, var(--primary-soft), transparent 70%), var(--bg); }
.login-card { width: 360px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg); animation: fadeUp .24s var(--ease); }
.login-card [hidden] { display: none !important; }
.login-card .brand-mark { box-shadow: var(--glow-primary); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.login-tabs button { min-height: 34px; border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent; color: var(--text-2); font-weight: 650; }
.login-tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.login-card[data-mode="login"] .auth-register-only { display: none; }
.login-card[data-mode="register"] .auth-login-only { display: none; }

/* Business onboarding */
.onboarding { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--bg); }
.onboarding-rail { display: flex; flex-direction: column; padding: 30px 24px; border-right: 1px solid var(--border); background: var(--surface); }
.onboarding-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.onboarding-brand > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: white; }
.onboarding-brand svg { width: 19px; height: 16px; }
.onboarding-rail ol { display: grid; gap: 8px; margin: 54px 0 0; padding: 0; list-style: none; }
.onboarding-rail li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 42px; color: var(--text-3); }
.onboarding-rail li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; }
.onboarding-rail li > span svg { width: 13px; height: 13px; }
.onboarding-rail li.active { color: var(--text); }
.onboarding-rail li.active > span { border-color: var(--primary); background: var(--primary); color: white; }
.onboarding-rail li.done > span { border-color: var(--success-ink); color: var(--success-ink); }
.onboarding-context { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; }
.onboarding-context svg { width: 18px; color: var(--success-ink); }
.onboarding-context small { color: var(--text-3); }
.onboarding-main { width: min(820px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0; }
.onboarding-main > header { margin-bottom: 28px; }
.onboarding-main h1 { margin: 12px 0 7px; font-size: 30px; line-height: 1.18; letter-spacing: 0; }
.onboarding-main header p { color: var(--text-2); }
.onboarding-page { display: none; }
.onboarding-page.active { display: block; animation: fadeUp .2s var(--ease); }
.onboarding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onboarding-choice { margin-bottom: 18px; }
.onboarding-choice > .label { display: block; margin-bottom: 8px; }
.onboarding-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.onboarding-choice > .label { grid-column: 1 / -1; }
.onboarding-choice label input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-choice label > span { min-height: 112px; display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.onboarding-choice label svg { width: 18px; margin-bottom: 5px; color: var(--primary-ink); }
.onboarding-choice label small { color: var(--text-3); line-height: 1.4; }
.onboarding-choice label input:checked + span { border-color: var(--primary-ink); box-shadow: 0 0 0 1px var(--primary); }
.onboarding-languages { margin: 0; padding: 0; border: 0; }
.onboarding-languages legend { margin-bottom: 8px; color: var(--text-2); font-size: 12px; font-weight: 650; }
.onboarding-languages label { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px; color: var(--text-2); font-size: 12px; }
.onboarding-result { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 15px; border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.onboarding-result > svg { width: 20px; color: var(--success-ink); }
.onboarding-result p { margin: 4px 0 0; color: var(--text-2); line-height: 1.55; }
.onboarding-main footer { display: flex; align-items: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .onboarding { grid-template-columns: 1fr; }
  .onboarding-rail { padding: 18px; border-right: 0; border-bottom: 1px solid var(--border); }
  .onboarding-rail ol { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
  .onboarding-context { display: none; }
  .onboarding-main { padding: 30px 0; }
  .onboarding-grid, .onboarding-choice { grid-template-columns: 1fr 1fr; }
}

/* Mila Live voice workspace */
.mila-live { min-height: calc(100vh - var(--topbar-total) - 48px); min-height: calc(100svh - var(--topbar-total) - 48px); display: flex; flex-direction: column; }
.mila-head { margin-bottom: 14px; }
.mila-language-wrap {
  height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2);
}
.mila-language-wrap svg { width: 15px; height: 15px; }
.mila-language-wrap select { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); }
.mila-language-wrap select:disabled { cursor: not-allowed; opacity: .62; }
.mila-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
  gap: 16px; height: calc(100vh - var(--topbar-total) - 126px); height: calc(100dvh - var(--topbar-total) - 126px); min-height: 650px;
}
.mila-stage, .mila-transcript {
  min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface);
}
.mila-stage {
  position: relative; display: grid; grid-template-rows: auto minmax(280px, 1fr) auto auto;
  padding: 18px 20px 16px;
}
.mila-identity { width: 100%; display: flex; align-items: center; gap: 11px; }
.mila-mark {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--primary-soft); color: var(--violet-300);
}
.mila-mark svg { width: 19px; height: 19px; }
.mila-profile { font-size: 12px; }
.mila-stt { margin-left: auto; font-size: 12px; }
.mila-handoff {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 7px;
  color: var(--text-2); font-size: var(--text-sm); font-weight: 600;
}
.mila-handoff:hover { background: var(--surface-2); color: var(--text); }
.mila-handoff svg { width: 16px; height: 16px; color: var(--warning-ink); }
.mila-voice-core { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; }
.mila-wave {
  width: min(430px, 88%); height: 112px; display: flex; align-items: center;
  justify-content: center; gap: 5px;
}
.mila-wave i {
  width: 5px; height: 6px; min-height: 6px; max-height: 88px; flex: none;
  border-radius: 3px; background: var(--text-3); opacity: .68;
  transition: height 90ms linear, background var(--dur), opacity var(--dur);
}
.mila-stage[data-phase="listening"] .mila-wave i { background: var(--success); opacity: .86; }
.mila-stage[data-phase="thinking"] .mila-wave i { background: var(--warning); opacity: .84; }
.mila-stage[data-phase="speaking"] .mila-wave i { background: var(--primary); opacity: 1; }
.mila-phase { min-height: 29px; color: var(--text); font-size: var(--text-xl); font-weight: 750; }
.mila-caption {
  width: min(540px, 100%); height: 48px; margin-top: 6px; overflow: hidden;
  color: var(--text-2); text-align: center; line-height: 1.5;
}
.mila-controls { height: 68px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.mila-video-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); }
.mila-video-btn.active { border-color: var(--primary-ink); background: var(--primary-soft); color: var(--primary-ink); }
.mila-selfview {
  position: relative; width: 188px; margin: 10px auto 0; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.mila-selfview video { display: block; width: 100%; height: auto; max-height: 132px; object-fit: cover; }
.mila-selfview-label {
  position: absolute; left: 7px; bottom: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 600;
}
.mila-selfview .icon-btn {
  position: absolute; right: 5px; top: 5px; width: 26px; height: 26px;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 0;
}
.mila-mic, .mila-end {
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  transition: transform var(--dur), background var(--dur), box-shadow var(--dur);
}
.mila-mic { width: 60px; height: 60px; border: 1px solid var(--primary); background: var(--primary); box-shadow: var(--glow-primary); }
.mila-mic:hover { transform: translateY(-1px); background: var(--primary-hover); }
.mila-mic.muted { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); box-shadow: none; }
.mila-mic svg { width: 24px; height: 24px; }
.mila-end { width: 40px; height: 40px; border: 1px solid var(--error); background: var(--error); }
.mila-end svg { width: 17px; height: 17px; }
.mila-meters { width: min(400px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.mila-meters > span { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 8px; color: var(--text-3); }
.mila-meters svg { width: 15px; height: 15px; }
.mila-meters i { height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.mila-meters b { display: block; width: 0; height: 100%; background: var(--success); transition: width 80ms linear; }
.mila-meters > span:last-child b { background: var(--primary); }
.mila-quick-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 0; }
.mila-quick-actions .btn { color: var(--text-2); }
.mila-quick-actions svg { width: 14px; height: 14px; }
.mila-compose-zone { min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.mila-composer { display: flex; align-items: flex-end; gap: 7px; }
.mila-composer textarea {
  min-width: 0; min-height: 40px; max-height: 120px; flex: 1; resize: none; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 8px; outline: none; overflow-y: auto;
  background: var(--surface-2); color: var(--text); font: inherit; line-height: 1.45;
}
.mila-composer textarea:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.mila-composer .icon-btn { flex: none; margin-bottom: 1px; }
.mila-send { color: var(--primary-ink); }
.mila-send:disabled { cursor: wait; opacity: .45; }
.mila-attachments { display: none; gap: 8px; overflow-x: auto; padding: 0 0 10px; }
.mila-attachments.active { display: flex; }
.mila-attachment {
  width: 210px; min-width: 0; flex: 0 0 210px; display: flex; align-items: center; gap: 8px;
  padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.mila-attachment-preview, .mila-attachment-file {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 0; border-radius: 6px; background: var(--surface-3); color: var(--text-3);
}
.mila-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.mila-attachment-file svg { width: 18px; height: 18px; }
.mila-attachment-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.mila-attachment-copy strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mila-attachment-copy small { color: var(--text-3); font-size: 12px; }
.mila-remove-attachment { width: 26px; height: 26px; }
.mila-remove-attachment svg { width: 13px; height: 13px; }
.mila-drop-overlay {
  position: absolute; inset: 10px; z-index: 5; display: none; place-content: center; justify-items: center; gap: 10px;
  border: 2px dashed var(--primary); border-radius: 8px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--primary-ink); pointer-events: none;
}
.mila-drop-overlay svg { width: 28px; height: 28px; }
.mila-stage.dragging .mila-drop-overlay { display: grid; }
.mila-transcript { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.mila-transcript-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mila-transcript-head > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.mila-transcript-head span { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.mila-transcript-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mila-scroll { min-height: 0; overflow-y: auto; padding: 0 16px 18px; }
.mila-line { padding: 15px 0; border-bottom: 1px solid var(--border); }
.mila-line:last-child { border-bottom: 0; }
.mila-line-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mila-line-meta time { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.mila-speaker { color: var(--text-3); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.mila-line.assistant .mila-speaker { color: var(--violet-300); }
.mila-line p { color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.mila-line.partial { opacity: .68; }
.mila-history-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mila-history-attachments .mila-attachment { width: 190px; flex-basis: 190px; }
.mila-event { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--text-sm); }
.mila-event svg { width: 16px; height: 16px; margin-top: 2px; color: var(--warning-ink); }
.mila-event time { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.mila-empty { height: 100%; min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-3); }
.mila-empty span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.mila-empty svg { width: 20px; height: 20px; }
.mila-empty small { font-size: 12px; }
.mila-image-modal { display: grid; place-items: center; min-height: 260px; background: var(--bg-1); }
.mila-image-modal img { display: block; max-width: 100%; max-height: 70vh; max-height: 70dvh; object-fit: contain; }
.mila-live > .alert { margin-top: 12px; }

.mila-settings { display: grid; gap: 18px; }
.mila-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mila-settings .field { min-width: 0; margin: 0; }
.mila-setting-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.mila-setting-group legend { margin-bottom: 7px; color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.mila-segments {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.mila-segments.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mila-segments.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mila-segments.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mila-toggle-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer;
}
.mila-persona { min-height: 92px; resize: vertical; line-height: 1.5; font-family: inherit; }
.mila-toggle-row input { margin-top: 2px; flex: none; }
.mila-toggle-row strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.mila-toggle-row small { color: var(--text-3); font-size: var(--text-xs); }
@media (max-width: 640px) { .mila-segments.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mila-segments label { min-width: 0; cursor: pointer; }
.mila-segments input { position: absolute; opacity: 0; pointer-events: none; }
.mila-segments span {
  min-height: 38px; display: grid; place-items: center; padding: 6px 8px; border-left: 1px solid var(--border);
  color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center;
}
.mila-segments label:first-child span { border-left: 0; }
.mila-segments input:checked + span { background: var(--primary-soft); color: var(--primary-ink); }
.mila-segments input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--primary); }
.mila-name-field { max-width: calc(50% - 7px); }
.mila-settings-note { color: var(--text-3); font-size: 12px; }
.mila-mic-check {
  display: grid; grid-template-columns: auto minmax(90px, 1fr) minmax(190px, 1.5fr);
  align-items: center; gap: 10px;
}
.mila-mic-check-meter {
  height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-2);
}
.mila-mic-check-meter span {
  display: block; width: 0; height: 100%; border-radius: inherit; background: var(--success);
  transition: width 80ms linear;
}
.mila-mic-check-result { color: var(--text-3); font-size: 12px; line-height: 1.35; }

/* Persistent Mila mini chat */
.mila-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 92; width: 380px;
  color: var(--text); filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .24));
}
.mila-dock.hidden { display: none; }
.mila-dock-panel {
  overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.mila-dock-bubble {
  position: absolute; right: 0; bottom: 0; width: 54px; height: 54px; display: none;
  place-items: center; border: 1px solid var(--primary); border-radius: 50%;
  background: var(--primary); color: #fff; box-shadow: var(--glow-primary);
}
.mila-dock-bubble svg { width: 22px; height: 22px; }
.mila-dock-pulse {
  position: absolute; right: 3px; top: 3px; width: 10px; height: 10px;
  border: 2px solid var(--surface); border-radius: 50%; background: var(--success);
}
.mila-dock.collapsed { width: 54px; height: 54px; filter: none; }
.mila-dock.collapsed .mila-dock-panel { display: none; }
.mila-dock.collapsed .mila-dock-bubble { display: grid; }
.mila-dock-head {
  height: 58px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.mila-dock-avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--primary-soft); color: var(--violet-300);
}
.mila-dock-avatar svg { width: 18px; height: 15px; }
.mila-dock-head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mila-dock-head strong { font-size: 13px; }
.mila-dock-head > div span { color: var(--success-ink); font-size: 12px; text-transform: capitalize; }
.mila-dock[data-phase="muted"] .mila-dock-head > div span { color: var(--text-3); }
.mila-dock[data-phase="thinking"] .mila-dock-head > div span { color: var(--warning-ink); }
.mila-dock[data-phase="speaking"] .mila-dock-head > div span { color: var(--info-ink); }
.mila-dock-head time { flex: none; color: var(--text-3); font-size: 12px; }
.mila-dock-head .icon-btn { width: 30px; height: 30px; }
.mila-dock-head .icon-btn svg { width: 14px; height: 14px; }
.mila-dock-head .icon-btn.danger { color: var(--error-ink); }
.mila-dock-messages {
  height: 210px; overflow-y: auto; padding: 8px 13px; background: var(--surface);
}
.mila-dock-empty {
  height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px;
  color: var(--text-3); font-size: 12px; text-align: center;
}
.mila-dock-empty svg { width: 20px; height: 20px; }
.mila-dock-message { padding: 9px 0; border-bottom: 1px solid var(--border); }
.mila-dock-message:last-child { border-bottom: 0; }
.mila-dock-message > span { display: block; margin-bottom: 3px; color: var(--text-3); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.mila-dock-message.assistant > span { color: var(--violet-300); }
.mila-dock-message p { max-height: 58px; overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.mila-dock-message.partial { opacity: .65; }
.mila-dock-files { display: none; gap: 6px; overflow-x: auto; padding: 8px 10px 0; border-top: 1px solid var(--border); }
.mila-dock-files.active { display: flex; }
.mila-dock-file {
  width: 168px; flex: 0 0 168px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px;
  align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2);
}
.mila-dock-file > img, .mila-dock-file > svg { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; color: var(--text-3); }
.mila-dock-file > span { min-width: 0; display: flex; flex-direction: column; }
.mila-dock-file strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mila-dock-file small { color: var(--text-3); font-size: 12px; }
.mila-dock-file button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-3); }
.mila-dock-file button svg { width: 12px; height: 12px; }
.mila-dock-compose {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px 32px; align-items: end;
  gap: 5px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.mila-dock-compose textarea {
  min-height: 34px; max-height: 88px; resize: none; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: 7px; outline: none; overflow-y: auto; background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; line-height: 1.45;
}
.mila-dock-compose textarea:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.mila-dock-compose .icon-btn { width: 32px; height: 32px; }
.mila-dock-compose .icon-btn svg { width: 15px; height: 15px; }
.mila-dock-compose .icon-btn.active { background: var(--error-soft); color: var(--error-ink); }
.mila-dock-send { color: var(--primary-ink); }
.mila-dock-send:disabled { cursor: wait; opacity: .45; }

@media (max-width: 1280px) {
  .mila-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mila-stage { min-height: 610px; }
  .mila-transcript { min-height: 460px; max-height: 650px; }
}
@media (max-width: 640px) {
  .mila-head { align-items: flex-start; flex-wrap: wrap; }
  .mila-head .spacer { display: none; }
  .mila-head > div:first-child { width: 100%; }
  .mila-stage { min-height: 570px; padding: 14px; grid-template-rows: auto minmax(270px, 1fr) auto auto; }
  .mila-profile { display: none; }
  .mila-stt { display: none; }
  .mila-wave { width: 100%; height: 96px; gap: 3px; }
  .mila-wave i { width: 4px; }
  .mila-caption { height: 52px; }
  .mila-meters { gap: 12px; }
  .mila-quick-actions .btn span { display: none; }
  .mila-attachment { flex-basis: 180px; width: 180px; }
  .mila-transcript { min-height: 410px; }
  .mila-dock { right: 12px; width: min(380px, calc(100vw - 24px)); }
  .mila-settings-grid { grid-template-columns: 1fr; }
  .mila-name-field { max-width: none; }
  .mila-mic-check { grid-template-columns: 1fr; }
  .mila-segments.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mila-segments.four label:nth-child(3) span { border-left: 0; border-top: 1px solid var(--border); }
  .mila-segments.four label:nth-child(4) span { border-top: 1px solid var(--border); }
}

/* ============================================================
   Claude Workspace
   ============================================================ */
/* Deliberately edge to edge — but "edge" means the usable edge, not under a
   notch or the gesture bar. Top stays zero because the topbar already clears
   the notch above it. */
#view:has(.claude-workspace) .view {
  width: 100%; max-width: none;
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
}
#view:has(.claude-workspace) { min-height: 0; flex: 1; overflow: hidden; }
.claude-workspace {
  height: calc(100vh - 65px); height: calc(100dvh - 65px); min-height: 620px; display: grid;
  grid-template-columns: 248px minmax(520px, 1fr) 316px; overflow: hidden;
  border-top: 1px solid var(--border); background: var(--bg-1);
}
.claude-rail, .claude-inspector { min-width: 0; background: var(--surface); }
.claude-rail { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.claude-rail-head {
  height: 57px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border);
}
.claude-rail-head strong { min-width: 0; display: flex; flex: 1; align-items: center; gap: 9px; font-size: 14px; }
.claude-rail-head strong svg { width: 17px; height: 17px; color: var(--warning-ink); }
.claude-project-row { margin: 10px 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px; align-items: center; gap: 5px; }
.claude-project-row .icon-btn { width: 32px; height: 38px; border: 1px solid var(--border); background: var(--surface-2); }
.claude-project-row .icon-btn:disabled { opacity: .4; }
.claude-project-select, .claude-session-search {
  height: 38px; margin: 10px 12px 0; display: flex; align-items: center; gap: 8px;
  padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-3);
  background: var(--surface-2);
}
.claude-project-row .claude-project-select { min-width: 0; margin: 0; }
.claude-project-select svg, .claude-session-search svg { width: 14px; height: 14px; flex: none; }
.claude-project-select select, .claude-session-search input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 12px;
}
.claude-project-meta { min-height: 23px; margin: 4px 14px 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-3); font-size: 12px; }
.claude-project-meta span { display: inline-flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-project-meta svg { width: 11px; height: 11px; flex: none; }
.claude-project-meta .clean { color: var(--success-ink); }
.claude-project-meta .dirty { color: var(--warning-ink); }
.claude-project-meta a { display: grid; place-items: center; color: var(--text-3); }
.claude-project-meta a:hover { color: var(--text); }
.claude-import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.claude-import-grid .field { min-width: 0; }
.claude-session-label { padding: 15px 16px 7px; color: var(--text-3); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.claude-sessions { min-height: 0; flex: 1; overflow-y: auto; padding: 0 7px 10px; }
.claude-session {
  width: 100%; min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; padding: 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text); text-align: left;
}
.claude-session:hover { background: var(--surface-2); }
.claude-session.active { background: var(--primary-soft); }
.claude-session-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }
.claude-session.active .claude-session-icon { background: var(--surface); color: var(--primary-ink); }
.claude-session-icon svg { width: 13px; height: 13px; }
.claude-session > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claude-session strong, .claude-session small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-session strong { font-size: 12px; font-weight: 650; }
.claude-session small { color: var(--text-3); font-size: 12px; }
.claude-session time { align-self: start; padding-top: 2px; color: var(--text-3); font-size: 12px; }
.claude-kanban-link {
  height: 44px; margin: 8px 12px 12px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2); font-size: 12px; font-weight: 650;
}
.claude-kanban-link:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.claude-kanban-link svg { width: 14px; height: 14px; }

.claude-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 57px minmax(0, 1fr) auto; background: var(--bg-1); }
.claude-main-head {
  min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.claude-main-head > div:first-child { min-width: 0; flex: 1; }
.claude-main-head h1 { overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.claude-main-head > div:first-child span { display: block; margin-top: 2px; overflow: hidden; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.claude-runtime { max-width: 250px; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.claude-runtime > span { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--text-3); }
.claude-runtime.ready { color: var(--success-ink); }
.claude-runtime.ready > span { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.claude-runtime.offline { color: var(--error-ink); }
.claude-runtime.offline > span { background: var(--error); }
.claude-main-head .icon-btn { width: 31px; height: 31px; }
.claude-main-head .icon-btn svg { width: 14px; height: 14px; }
.claude-main-head .danger { color: var(--error-ink); }

.claude-conversation { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.claude-welcome { min-height: 100%; display: grid; place-content: center; justify-items: center; padding: 40px; color: var(--text-2); text-align: center; }
.claude-welcome.compact { min-height: 360px; }
.claude-welcome > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--warning-ink); box-shadow: var(--shadow-sm); }
.claude-welcome > span svg { width: 21px; height: 21px; }
.claude-welcome h2 { color: var(--text); font-size: 18px; }
.claude-welcome p { max-width: 520px; margin: 7px 0 18px; font-size: 12px; line-height: 1.6; }
.claude-message {
  width: min(820px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px; padding: 22px 0; border-bottom: 1px solid var(--border);
}
.claude-message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); }
.claude-message.assistant .claude-message-avatar { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); background: var(--warning-soft); color: var(--warning-ink); }
.claude-message.agent .claude-message-avatar { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); color: var(--primary-ink); }
.claude-message-avatar svg { width: 14px; height: 14px; }
.claude-message-body { min-width: 0; }
.claude-message-body header { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.claude-message-body header strong { font-size: 12px; }
.claude-message-body header time { color: var(--text-3); font-size: 12px; }
.claude-message-text { color: var(--text); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.claude-message-body footer { margin-top: 9px; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.claude-message-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.claude-message-file { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); font-size: 12px; }
.claude-message-file svg { width: 12px; height: 12px; }
.claude-message.pending { border-bottom: 0; }
.claude-runtime-alert { width: min(820px, calc(100% - 48px)); margin: 14px auto 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border)); border-radius: 7px; background: var(--error-soft); color: var(--error-ink); }
.claude-runtime-alert > svg { width: 16px; height: 16px; margin-top: 2px; }
.claude-runtime-alert > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claude-runtime-alert strong { font-size: 12px; }
.claude-runtime-alert small { color: var(--text-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.claude-thinking { min-height: 24px; display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12px; }
.claude-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--warning); animation: blink 1.2s infinite; }
.claude-thinking i:nth-child(2) { animation-delay: .15s; }
.claude-thinking i:nth-child(3) { margin-right: 5px; animation-delay: .3s; }

.claude-compose-wrap { padding: 10px 18px 15px; background: linear-gradient(transparent, var(--bg-1) 22%); }
.claude-composer {
  width: min(860px, 100%); min-height: 49px; margin: 0 auto; display: flex; align-items: flex-end; gap: 5px;
  padding: 7px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-md);
}
.claude-composer textarea { min-width: 0; min-height: 33px; max-height: 150px; flex: 1; resize: none; padding: 7px 5px; border: 0; outline: 0; overflow-y: auto; background: transparent; color: var(--text); font: inherit; font-size: 12px; line-height: 1.5; }
.claude-composer select { height: 31px; max-width: 82px; padding: 0 5px; border: 1px solid var(--border); border-radius: 6px; outline: 0; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.claude-composer .icon-btn { width: 33px; height: 33px; flex: none; }
.claude-composer .icon-btn svg { width: 15px; height: 15px; }
.claude-send { width: 33px; height: 33px; flex: none; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--primary); color: #fff; }
.claude-send:hover { background: var(--primary-hover); }
.claude-send:disabled { cursor: wait; opacity: .45; }
.claude-send svg { width: 14px; height: 14px; }
.claude-attachments { width: min(860px, 100%); margin: 0 auto; display: none; gap: 6px; overflow-x: auto; padding-bottom: 7px; }
.claude-attachments.active { display: flex; }
.claude-attachment { min-width: 170px; max-width: 240px; display: grid; grid-template-columns: 25px minmax(0, 1fr) 25px; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.claude-attachment > svg { width: 14px; height: 14px; color: var(--text-3); }
.claude-attachment > span { min-width: 0; display: flex; flex-direction: column; }
.claude-attachment strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.claude-attachment small { color: var(--text-3); font-size: 12px; }
.claude-attachment .icon-btn { width: 25px; height: 25px; }
.claude-attachment .icon-btn svg { width: 11px; height: 11px; }

.claude-inspector { min-height: 0; display: grid; grid-template-rows: minmax(150px, 38%) minmax(0, 1fr); border-left: 1px solid var(--border); }
.claude-progress, .claude-side-panel { min-height: 0; display: flex; flex-direction: column; }
.claude-progress { border-bottom: 1px solid var(--border); }
.claude-progress > header { height: 48px; flex: none; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border); }
.claude-progress > header strong { flex: 1; font-size: 12px; }
.claude-progress > header span { color: var(--text-3); font-size: 12px; }
#claudeProgress { min-height: 0; overflow-y: auto; padding: 6px; }
.claude-progress-row { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 7px; color: var(--text); }
.claude-progress-row:hover { background: var(--surface-2); }
.claude-progress-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claude-progress-row strong, .claude-progress-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-progress-row strong { font-size: 12px; }
.claude-progress-row small { color: var(--text-3); font-size: 12px; text-transform: capitalize; }
.claude-task-state { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--text-3); }
.claude-task-state.running { background: var(--info-soft); color: var(--info-ink); }
.claude-task-state.done, .claude-task-state.archived { background: var(--success-soft); color: var(--success-ink); }
.claude-task-state svg { width: 12px; height: 12px; }
.claude-side-tabs { height: 42px; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.claude-side-tab { position: relative; border: 0; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 650; }
.claude-side-tab:hover { color: var(--text); }
.claude-side-tab.active { color: var(--text); }
.claude-side-tab.active::after { content: ""; position: absolute; right: 15px; bottom: 0; left: 15px; height: 2px; background: var(--primary); }
.claude-side-body { min-height: 0; flex: 1; overflow-y: auto; padding: 7px; }
.claude-file-path { height: 31px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--text-3); font-size: 12px; }
.claude-file-path svg { width: 13px; height: 13px; }
.claude-file-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-file-row, .claude-agent-row { width: 100%; min-width: 0; display: grid; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; }
.claude-file-row { grid-template-columns: 18px minmax(0, 1fr) 14px; }
.claude-agent-row { grid-template-columns: 30px minmax(0, 1fr) 14px; }
.claude-file-row:hover, .claude-agent-row:hover { background: var(--surface-2); }
.claude-file-row > svg { width: 14px; height: 14px; color: var(--text-3); }
.claude-file-row > span, .claude-agent-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claude-file-row strong, .claude-agent-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.claude-file-row small, .claude-agent-row small { color: var(--text-3); font-size: 12px; }
.claude-agent-row > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary-ink); }
.claude-agent-row > span:first-child svg { width: 14px; height: 14px; }
.claude-agent-row > svg { width: 12px; height: 12px; color: var(--text-3); }
.claude-agents-intro { margin: 3px 3px 8px; padding: 10px; border-left: 2px solid var(--warning-ink); background: var(--warning-soft); }
.claude-agents-intro strong { font-size: 12px; }
.claude-agents-intro p { margin-top: 3px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.claude-context-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; padding: 9px 7px; border-bottom: 1px solid var(--border); }
.claude-context-row > svg { width: 14px; height: 14px; color: var(--text-3); }
.claude-context-row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claude-context-row strong, .claude-context-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-context-row strong { font-size: 12px; }
.claude-context-row small { color: var(--text-3); font-size: 12px; }
.claude-side-empty { padding: 28px 14px; color: var(--text-3); font-size: 12px; line-height: 1.55; text-align: center; }
.claude-side-empty.error { color: var(--error-ink); }
.claude-loading { min-height: 120px; display: grid; place-items: center; }
.claude-loading .spinner { width: 18px; height: 18px; }
.claude-file-preview { max-height: 70vh; max-height: 70dvh; overflow: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-1); }
.claude-file-preview pre { margin: 0; padding: 16px; color: var(--text); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre; }

@media (max-width: 1280px) {
  .claude-workspace { grid-template-columns: 220px minmax(500px, 1fr) 280px; }
  .claude-runtime { max-width: 150px; }
}
@media (max-width: 1280px) {
  .claude-workspace { grid-template-columns: 210px minmax(480px, 1fr); }
  .claude-inspector { display: none; }
}
@media (max-width: 900px) {
  #view:has(.claude-workspace) { overflow: auto; }
  .claude-workspace { height: auto; min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); grid-template-columns: 1fr; overflow: visible; }
  .claude-rail { display: none; }
  .claude-main { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); }
  .claude-runtime { display: none; }
  .claude-message { width: calc(100% - 28px); }
  .claude-compose-wrap { padding-right: 10px; padding-left: 10px; }
  .claude-composer select { display: none; }
}

/* ============================================================
   Reduced motion (accessibility — required)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .stat:hover, .card.tile:hover { transform: none; }
}
.readiness-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.readiness-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.readiness-check:first-child {
  padding-top: 0;
  border-top: 0;
}

.readiness-check > span {
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: var(--success-ink);
}

.readiness-check.needs-work > span {
  color: var(--warning-ink);
}

.readiness-check svg {
  width: 15px;
  height: 15px;
}

.readiness-actions {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.readiness-action {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.readiness-action:hover {
  border-color: var(--primary-ink);
  background: var(--primary-soft);
}

.readiness-action > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

@media (max-width: 1280px) {
  .readiness-section {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .readiness-section {
    grid-column: 1 / -1;
  }
}

.skill-studio-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: end;
}

.skill-search {
  width: 100%;
}

.skill-profile-field {
  margin: 0;
}

.skill-card {
  display: flex;
  min-width: 0;
  min-height: 228px;
  flex-direction: column;
  gap: 10px;
  transition: border-color 140ms ease, opacity 140ms ease;
}

.skill-card:hover {
  border-color: var(--border-strong);
}

.skill-card.is-disabled {
  opacity: 0.66;
}

.skill-card-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.skill-card-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-description {
  display: -webkit-box;
  min-height: 66px;
  margin-top: 12px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.skill-editor {
  min-height: 430px;
  max-height: min(58vh, 680px); max-height: min(58dvh, 680px);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}

.skill-hub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .skill-studio-toolbar {
    grid-template-columns: 1fr;
  }

  .skill-hub-row {
    grid-template-columns: 1fr;
  }
}

.routine-card {
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  gap: 14px;
}

.routine-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.routine-main strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-prompt {
  display: -webkit-box;
  min-height: 58px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.routine-facts {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.routine-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

.routine-facts span {
  color: var(--text-3);
}

.routine-facts strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: auto;
}

.routine-empty {
  min-height: 380px;
}

.routine-empty p {
  max-width: 560px;
}

.routine-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routine-skills {
  min-height: 150px;
  padding-right: 12px;
  background-image: none;
}

.routine-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.operational-head {
  margin-bottom: 16px;
}

.operational-stat {
  display: block;
  color: inherit;
  text-decoration: none;
}

.operational-stat:hover {
  border-color: var(--border-strong);
}

.ops-action-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface));
}

.ops-action-strip.is-ready {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: color-mix(in srgb, var(--success-bg) 52%, var(--surface));
}

.ops-action-strip > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.ops-action-strip > div > span:last-child {
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operational-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  gap: 16px;
}

.operational-lower-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ops-card-head {
  padding: 16px 16px 12px;
}

.ops-service {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.ops-service:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.ops-service-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-content: center;
  border-radius: 6px;
  color: var(--warning-ink);
  background: var(--warning-bg);
}

.ops-service-icon.ready {
  color: var(--success-ink);
  background: var(--success-bg);
}

.ops-service-icon svg {
  width: 15px;
  height: 15px;
}

.ops-service strong,
.ops-service small {
  display: block;
}

.ops-service strong {
  font-size: 12px;
}

.ops-service small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-progress {
  display: block;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}

.ops-progress .progress {
  margin-top: 7px;
}

.ops-fleet {
  display: grid;
  gap: 8px;
}

.ops-agent {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.ops-agent strong,
.ops-agent small {
  display: block;
}

.ops-agent strong {
  font-size: 12px;
}

.ops-agent small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
}

.ops-activity {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ops-activity:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ops-activity > span {
  color: var(--text-3);
}

.ops-activity > span svg {
  width: 15px;
  height: 15px;
}

.ops-activity strong,
.ops-activity small {
  display: block;
}

.ops-activity strong {
  font-size: 12px;
}

.ops-activity small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-activity time {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

.ops-empty {
  min-height: 210px;
}

@media (max-width: 1280px) {
  .operational-grid,
  .operational-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ops-action-strip,
  .ops-action-strip > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .ops-action-strip > div > span:last-child {
    white-space: normal;
  }
}

/* ============================================================
   Operational Home v2 — pulse strip, attention rail, KPI
   sparklines, fleet lanes, live feed, host meters.
   ============================================================ */

.oh-pulse { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 11px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.oh-svc { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-2); text-decoration: none; }
.oh-svc:hover strong { color: var(--primary-ink); }
.oh-svc strong { color: var(--text); font-weight: 600; }
.oh-svc small { color: var(--text-3); font-size: var(--text-xs); }
.oh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.oh-dot.ok { background: var(--success); }
.oh-dot.warn { background: var(--warning); }
.oh-pulse-anim { animation: oh-pulse 2s infinite; }
@keyframes oh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.oh-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: start; }
.oh-mid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.oh-low { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }

.oh-attn { display: flex; flex-direction: column; gap: 9px; }
.oh-attn-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.oh-sev { width: 4px; align-self: stretch; border-radius: 4px; flex: none; background: var(--primary); }
.oh-sev.warn { background: var(--warning); }
.oh-sev.err { background: var(--error); }
.oh-attn-body { flex: 1; min-width: 0; }
.oh-attn-body strong { display: block; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-attn-body small { color: var(--text-3); font-size: var(--text-xs); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-attn-actions { display: flex; gap: 6px; flex: none; }

/* minmax(0, 1fr) and not 1fr. A plain fr track takes its automatic minimum
   from its content, so two KPI tiles whose labels do not wrap held the row at
   716px inside a 390px phone and dragged the whole page sideways with them.
   The tiles already ellipsis their own text; they were never given the chance. */
.oh-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.oh-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; color: inherit; }
.oh-kpi:hover { border-color: var(--border-strong); box-shadow: var(--card-hover-shadow); }
.oh-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.oh-kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.oh-delta { font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.oh-delta.up { color: var(--success-ink); }
.oh-delta.down { color: var(--error-ink); }
.oh-delta.flat { color: var(--text-3); font-weight: 400; }
.oh-spark { display: block; width: 100%; height: 30px; margin-top: 8px; }
.oh-spark-empty { height: 30px; margin-top: 8px; display: flex; align-items: center; font-size: var(--text-xs); color: var(--text-3); }

.oh-lanes { display: flex; flex-direction: column; gap: 9px; padding: 4px 16px 16px; }
.oh-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.oh-lane-label { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 600; color: var(--text); text-decoration: none; }
.oh-lane-label:hover { color: var(--primary-ink); }
.oh-lane-track { display: flex; gap: 4px; min-height: 28px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; }
.oh-bar { display: flex; align-items: center; min-width: 0; padding: 0 9px; border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; color: var(--text-2); background: var(--surface-3); }
.oh-bar.running { color: var(--text-inv); }
.oh-bar.running::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); animation: oh-shimmer 2.4s infinite; }
@keyframes oh-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.oh-bar.waiting { background: var(--warning-bg); color: var(--warning-ink); }
.oh-bar.blocked { background: var(--error-bg); color: var(--error-ink); }
.oh-bar.queued { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); flex: none; }
.oh-bar.idle { background: transparent; color: var(--text-3); font-weight: 400; }

.oh-dot.agent-violet { background: var(--primary); }
.oh-dot.agent-teal { background: var(--teal); }
.oh-dot.agent-blue { background: var(--info); }
.oh-dot.agent-amber { background: var(--warning); }
.oh-dot.agent-green { background: var(--success); }
.oh-bar.running.agent-bg-violet { background: var(--primary); }
.oh-bar.running.agent-bg-teal { background: var(--teal); color: #06281f; }
.oh-bar.running.agent-bg-blue { background: var(--info); }
.oh-bar.running.agent-bg-amber { background: var(--warning); color: #2b1a02; }
.oh-bar.running.agent-bg-green { background: var(--success); color: #04240f; }

.oh-feed { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; padding: 0 12px 12px; }
.oh-feed-item { display: flex; gap: 9px; padding: 7px 6px; border-radius: var(--radius-sm); font-size: var(--text-sm); align-items: baseline; }
.oh-feed-item:hover { background: var(--surface-2); }
.oh-feed-item.fresh { animation: oh-slidein 0.4s var(--ease); }
@keyframes oh-slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.oh-feed-item time { color: var(--text-3); font-size: var(--text-xs); flex: none; width: 40px; font-variant-numeric: tabular-nums; }
.oh-feed-actor { font-weight: 650; flex: none; }
.oh-feed-actor.violet { color: var(--primary-ink); }
.oh-feed-actor.teal { color: var(--teal-ink); }
.oh-feed-actor.blue { color: var(--info-ink); }
.oh-feed-actor.amber { color: var(--warning-ink); }
.oh-feed-actor.green { color: var(--success-ink); }
.oh-feed-msg { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oh-meter { margin-bottom: 12px; font-size: var(--text-sm); }
.oh-meter .progress { margin-top: 5px; }
.oh-meter.warn .progress span { background: var(--warning); }
.oh-meter small { display: block; margin-top: 4px; }
.oh-hostrow { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-2); }
.oh-hostrow svg { width: 14px; height: 14px; color: var(--success-ink); }

@media (prefers-reduced-motion: reduce) {
  .oh-pulse-anim, .oh-bar.running::after, .oh-feed-item.fresh { animation: none; }
}
@media (max-width: 1280px) {
  /* The wide rules above say minmax(0, ...) and these said 1fr, so folding to
     one column reintroduced exactly the overflow the wide layout had avoided. */
  .oh-top, .oh-mid { grid-template-columns: minmax(0, 1fr); }
  .oh-low { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the lane label and the track cannot share a row. At 375px the card
   leaves 273px; the fixed 96px label and its gap take 106 of them, and the five
   segments then split 145px by weight — the smallest bar works out at 13px
   against 18px of its own padding, so its content box clamps to zero and the
   label is simply not there. Stacking the label above the track gives the bars
   the full width back. */
@media (max-width: 640px) {
  .oh-lane { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .oh-lane-label { font-size: var(--text-xs); }
  /* With the row back to full width the narrowest bar still only has room for a
     number, so the padding comes down to leave it something to show. */
  .oh-bar { padding: 0 5px; }
}

/* ============================================================
   Member workspace
   ============================================================ */
.member-eyebrow {
  margin-bottom: 5px;
  color: var(--primary-ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.member-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
  margin-top: 16px;
}

.member-section { min-height: 360px; }
.member-list, .member-note-list { border-top: 1px solid var(--border); }

.member-task-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
}
.member-task-row.compact { grid-template-columns: 7px minmax(0, 1fr) auto auto; }
.member-task-copy { min-width: 0; }
.member-task-copy strong, .member-task-copy p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-task-copy strong { font-size: 13px; }
.member-task-copy p { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.member-priority { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.member-priority.high { background: var(--error); }
.member-priority.normal { background: var(--warning); }
.member-priority.low { background: var(--success); }
.member-due { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.member-due svg { width: 13px; height: 13px; }
.member-due.due { color: var(--error-ink); }

.member-note-list > a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.member-note-list > a:hover strong { color: var(--primary-ink); }
.member-note-list > a > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-3);
}
.member-note-list svg { width: 14px; height: 14px; }
.member-note-list strong, .member-note-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-note-list strong { font-size: 12px; }
.member-note-list small { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.member-inline-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-3); }
.member-inline-empty svg { width: 24px; height: 24px; }

.member-loading {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.member-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: pulse 1.2s infinite; }
.member-loading span:nth-child(2) { animation-delay: .14s; }
.member-loading span:nth-child(3) { animation-delay: .28s; }
.member-empty { min-height: 420px; }
.member-empty > svg { width: 30px; height: 30px; color: var(--text-3); }
.member-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.member-task-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
  align-items: start;
}
.member-task-column {
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.member-task-column > header {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.member-task-column > header > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-ink);
}
.member-task-column > header svg { width: 13px; height: 13px; }
.member-task-column > header strong { font-size: 12px; }
.member-task-column > header small {
  min-width: 20px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.member-task-column > div { display: flex; flex-direction: column; gap: 8px; padding: 9px; }
.member-task-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.member-task-card:hover { border-color: var(--border-strong); }
.member-task-card-head { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; text-transform: uppercase; }
.member-task-card-head .icon-btn { width: 28px; height: 28px; margin-left: auto; }
.member-task-card h3 { margin-top: 7px; font-size: 13px; overflow-wrap: anywhere; }
.member-task-card > p { max-height: 48px; margin-top: 6px; overflow: hidden; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.member-task-card footer { display: grid; grid-template-columns: minmax(0, 1fr) 116px 28px; align-items: center; gap: 6px; margin-top: 11px; }
.member-task-card footer > span { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-task-card footer svg { width: 12px; height: 12px; }
.member-task-card .member-status { height: 30px; padding: 4px 26px 4px 8px; border-radius: 7px; background-position: right 7px center; font-size: 12px; }
.icon-btn.danger { color: var(--error-ink); }
.member-column-empty { min-height: 110px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-3); font-size: 12px; }

.member-notes {
  min-height: 620px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.member-note-index { overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface-2); }
.member-note-index > button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.member-note-index > button:hover, .member-note-index > button.active { background: var(--surface); }
.member-note-index > button.active { box-shadow: inset 3px 0 var(--primary); }
.member-note-index > button > span { color: var(--text-3); }
.member-note-index svg { width: 15px; height: 15px; }
.member-note-index strong, .member-note-index small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-note-index strong { font-size: 12px; }
.member-note-index small { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.member-note-editor { min-width: 0; display: flex; flex-direction: column; padding: 18px 22px; }
.member-note-toolbar { min-height: 36px; display: flex; align-items: center; gap: 8px; }
.member-note-title {
  width: 100%;
  margin: 8px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 700 var(--text-xl)/1.3 var(--font-sans);
}
.member-note-title:focus, .member-note-content:focus { outline: none; }
.member-note-content {
  width: 100%;
  min-height: 430px;
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 400 var(--text-base)/1.7 var(--font-sans);
}
.member-note-editor > footer { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.member-note-editor > footer .btn { margin-left: auto; }

.member-inbox-page { width: 100%; max-width: 1040px; margin: 0 auto; }
.member-inbox-count {
  min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 9px;
  border-radius: 15px; background: var(--primary); color: white; font-size: 12px; font-weight: 800;
}
.member-inbox-filters { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--border); }
.member-inbox-filters button {
  min-height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-3); font: 700 11px/1 var(--font-sans); cursor: pointer;
}
.member-inbox-filters button:hover, .member-inbox-filters button.active { color: var(--text); }
.member-inbox-filters button.active { border-bottom-color: var(--primary-ink); }
.member-inbox-list { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.member-inbox-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.member-inbox-item:last-child { border-bottom: 0; }
.member-inbox-item.unread { box-shadow: inset 3px 0 var(--primary); background: var(--primary-soft); }
.member-inbox-type { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--text-2); }
.member-inbox-type svg { width: 17px; height: 17px; }
.member-inbox-type.reminder, .member-inbox-type.calendar { background: var(--warning-soft); color: var(--warning-ink); }
.member-inbox-copy { min-width: 0; }
.member-inbox-copy header, .member-inbox-copy footer { display: flex; align-items: center; gap: 9px; }
.member-inbox-copy header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.member-inbox-copy time { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.member-inbox-copy p { margin: 6px 0 10px; color: var(--text-2); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.member-inbox-copy footer .link-button:first-of-type { margin-left: auto; }
.member-inbox-empty { border: 0; }

@media (max-width: 640px) {
  .member-inbox-filters { overflow-x: auto; }
  .member-inbox-item { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .member-inbox-type { width: 32px; height: 32px; }
  .member-inbox-copy header { align-items: flex-start; }
  .member-inbox-copy header time { font-size: 12px; }
  .member-inbox-copy footer { flex-wrap: wrap; }
  .member-inbox-copy footer .link-button:first-of-type { margin-left: 0; }
}

@media (max-width: 1280px) {
  .member-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-home-grid { grid-template-columns: 1fr; }
  .member-task-board { grid-template-columns: 1fr; }
  .member-task-column { min-height: 180px; }
}

@media (max-width: 900px) {
  .member-stats { grid-template-columns: 1fr; }
  .member-task-row.compact { grid-template-columns: 7px minmax(0, 1fr); }
  .member-task-row.compact .member-due, .member-task-row.compact .badge { display: none; }
  .member-form-row { grid-template-columns: 1fr; }
  .member-notes { grid-template-columns: 1fr; }
  .member-note-index { max-height: 210px; border-right: 0; border-bottom: 1px solid var(--border); }
  .member-note-content { min-height: 320px; }
}

/* Personal workspace */
.personal-page { width: 100%; min-width: 0; max-width: 1500px; margin: 0 auto; overflow: hidden; }
.personal-heading { margin-bottom: 16px; }
.personal-tabs {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 18px;
  padding: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.personal-tabs button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.personal-tabs button:hover { color: var(--text); }
.personal-tabs button.active { border-bottom-color: var(--primary-ink); color: var(--text); }
.personal-tabs svg { width: 16px; height: 16px; }
.personal-tabs b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-size: 12px;
}
.personal-briefing {
  min-height: 126px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.personal-briefing-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
  color: white;
}
.personal-briefing-icon svg { width: 20px; height: 20px; }
.personal-briefing span, .personal-panel header span, .personal-sources header span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.personal-briefing h2 { margin: 0 0 7px; color: var(--text); font-size: 22px; letter-spacing: 0; }
.personal-briefing p { margin: 0; color: var(--text-2); line-height: 1.55; }
.personal-load { text-align: right; }
.personal-load strong { display: block; color: var(--text); font-size: 24px; }
.personal-load span { margin: 2px 0 8px; text-transform: none; }
.personal-load i { width: 100%; height: 5px; display: block; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.personal-load b { height: 100%; display: block; border-radius: inherit; background: var(--primary); }
.personal-capture {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 7px 8px 7px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.personal-capture > svg { width: 17px; color: var(--primary-ink); }
.personal-capture input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 13px/1 var(--font-sans); }
.personal-today-grid { display: grid; grid-template-columns: 1.15fr .9fr .9fr; gap: 14px; }
.personal-panel, .personal-sources {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.personal-panel > header, .personal-sources > header {
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.personal-panel header h3, .personal-sources header h3 { margin: 0; color: var(--text); font-size: 14px; letter-spacing: 0; }
.personal-panel header > a, .personal-panel header .link-button { margin-left: auto; }
.personal-panel header > a { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.personal-panel header > a svg { width: 13px; }
.link-button { border: 0; background: none; color: var(--primary-ink); font: 600 11px/1 var(--font-sans); cursor: pointer; }
.personal-stack { padding: 6px 14px 12px; }
.personal-focus-callout {
  display: grid;
  gap: 4px;
  margin: 14px;
  padding: 14px;
  border-left: 3px solid var(--primary-ink);
  background: var(--surface);
}
.personal-focus-callout span { color: var(--primary-ink); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.personal-focus-callout strong { color: var(--text); font-size: 13px; }
.personal-focus-callout small { color: var(--text-3); line-height: 1.45; }
.personal-focus-callout.wide { margin: 0 0 14px; }
.personal-agenda { margin-bottom: 14px; }
.personal-plan-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}
.personal-plan-stats span { display: inline-flex; align-items: center; gap: 6px; }
.personal-plan-stats svg { width: 13px; color: var(--primary-ink); }
.personal-plan-window { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.personal-agenda-list { padding: 6px 14px 12px; }
.personal-agenda-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 24px auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.personal-agenda-item:last-child { border-bottom: 0; }
.personal-agenda-time { color: var(--text-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.personal-agenda-body { min-width: 0; }
.personal-agenda-body strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-agenda-body small { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; }
.personal-agenda-kind svg { width: 14px; }
.personal-agenda-kind.focus svg { color: var(--primary-ink); }
.personal-agenda-kind.event svg { color: var(--text-3); }
.personal-agenda-item.focus { border-left: 2px solid var(--primary-ink); padding-left: 8px; }
/* The default icon button is 34px and would spill out of its 28px track. */
.personal-agenda-item .icon-btn { width: 28px; height: 28px; }
.personal-alert {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.personal-alert:last-child { border-bottom: 0; }
.personal-alert svg { width: 16px; color: var(--text-3); }
.personal-alert.high svg { color: var(--error-ink); }
.personal-alert strong { display: block; color: var(--text); font-size: 12px; }
.personal-alert small { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; }
.personal-mila-hint { margin: 14px 16px 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.personal-mila-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.personal-mila-answer {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--primary-ink);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.personal-policy.warning { display: flex; align-items: center; gap: 10px; }
.personal-policy.warning .btn { margin-left: auto; }
.personal-task {
  min-height: 52px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.personal-task:last-child { border-bottom: 0; }
.personal-task strong, .personal-task small { display: block; }
.personal-task strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-task small { margin-top: 3px; color: var(--text-3); font-size: 12px; }
.personal-task .icon-btn { width: 28px; height: 28px; }
.personal-empty {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 22px;
  color: var(--text-3);
  text-align: center;
}
.personal-empty svg { width: 22px; height: 22px; }
.personal-empty strong { color: var(--text-2); font-size: 12px; }
.personal-empty span { max-width: 280px; font-size: 12px; line-height: 1.45; }
.personal-empty.wide { grid-column: 1 / -1; min-height: 260px; }
.personal-approval {
  min-height: 74px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.personal-approval:last-child { border-bottom: 0; }
.personal-approval > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.personal-approval > span svg { width: 15px; }
.personal-approval strong, .personal-approval small { display: block; }
.personal-approval strong { color: var(--text); font-size: 12px; line-height: 1.35; }
.personal-approval small { margin-top: 4px; color: var(--text-3); font-size: 12px; }
.personal-approval-actions { display: flex; gap: 7px; }
.personal-note-stream { padding: 6px 14px 12px; }
.personal-note-stream > a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.personal-note-stream > a:last-child { border-bottom: 0; }
.personal-note-stream svg { width: 14px; }
.personal-note-stream strong, .personal-note-stream small { display: block; }
.personal-note-stream strong { color: var(--text); font-size: 12px; }
.personal-note-stream small { margin-top: 3px; color: var(--text-3); font-size: 12px; }
.personal-sources { margin-top: 14px; }
.personal-sources > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.personal-source {
  min-height: 72px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  color: var(--text-3);
}
.personal-source:is(button) {
  width: 100%;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.personal-source:is(button):disabled { cursor: default; }
.personal-source:last-child { border-right: 0; }
.personal-source.disabled { opacity: .62; }
.personal-source-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--surface); color: var(--text-2); }
.personal-source-icon svg, .personal-source > svg { width: 14px; }
.personal-source strong, .personal-source small { display: block; }
.personal-source strong { color: var(--text); font-size: 12px; }
.personal-source small { margin-top: 4px; font-size: 12px; }
.personal-source small.connected { color: var(--success-ink); }
.personal-source small.warning { color: var(--warning-ink); }
.personal-split, .personal-account-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.personal-profile-form { padding: 18px; }
.personal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.personal-profile-form footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.personal-profile-form footer span { flex: 1; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.personal-file-path { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 9px 11px; border-radius: 6px; background: var(--surface); color: var(--text-3); }
.personal-file-path svg { width: 14px; }
.personal-file-path code { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-soul-preview pre {
  max-height: 560px;
  margin: 12px 16px 16px;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-2);
  font: 400 10px/1.65 var(--font-mono);
  white-space: pre-wrap;
}
.personal-memory-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 14px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-3);
}
.personal-memory-search svg { width: 16px; }
.personal-memory-search input { border: 0; outline: 0; background: transparent; color: var(--text); }
.personal-memory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px; }
.personal-memory-grid > :is(a, article) { min-height: 150px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.personal-memory-grid > a { grid-template-columns: 32px minmax(0, 1fr); }
.personal-memory-grid > a:hover { border-color: var(--primary-ink); }
.personal-memory-glyph { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary-ink); }
.personal-memory-glyph svg { width: 15px; }
.personal-memory-grid strong { font-size: 12px; }
.personal-memory-grid p { margin: 8px 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.personal-memory-grid small { color: var(--text-3); font-size: 12px; }
.personal-context-callout, .personal-policy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-3);
}
.personal-context-callout > svg, .personal-policy > svg { width: 18px; flex: 0 0 auto; color: var(--primary-ink); }
.personal-context-callout > div { flex: 1; }
.personal-context-callout strong, .personal-context-callout span { display: block; }
.personal-context-callout strong { color: var(--text); font-size: 12px; }
.personal-context-callout span { margin-top: 3px; font-size: 12px; }
.personal-approval-list { padding: 8px 16px; }
.personal-policy { font-size: 12px; line-height: 1.5; }
.personal-account-card { align-self: start; }
.personal-account-identity { display: flex; align-items: center; gap: 14px; padding: 20px 18px; }
.personal-account-identity > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-size: 18px; font-weight: 800; }
.personal-account-identity h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.personal-account-identity p { margin: 4px 0 0; color: var(--text-3); font-size: 12px; }
.personal-account-card dl { margin: 0; padding: 0 18px 18px; }
.personal-account-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 12px; }
.personal-account-card dt { color: var(--text-3); }
.personal-account-card dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.personal-device-row { min-height: 76px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 0 16px; border-bottom: 1px solid var(--border); }
.personal-device-row > svg { width: 19px; color: var(--primary-ink); }
.personal-device-row strong, .personal-device-row span { display: block; }
.personal-device-row strong { color: var(--text); font-size: 12px; }
.personal-device-row div span { margin-top: 4px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.personal-device-row + .btn { margin: 16px; }

@media (max-width: 1280px) {
  .personal-today-grid { grid-template-columns: 1fr 1fr; }
  .personal-focus { grid-column: 1 / -1; }
  .personal-sources > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .personal-source { border-bottom: 1px solid var(--border); }
  .personal-memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .personal-today-grid, .personal-split, .personal-account-grid { grid-template-columns: 1fr; }
  .personal-focus { grid-column: auto; }
  .personal-briefing { grid-template-columns: 40px minmax(0, 1fr); }
  .personal-load { grid-column: 1 / -1; text-align: left; }
  .personal-sources > div { grid-template-columns: 1fr 1fr; }
  .personal-memory-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .personal-heading .btn-secondary { display: none; }
  .personal-tabs { margin-left: -8px; margin-right: -8px; }
  .personal-tabs button { padding: 0 10px; }
  .personal-briefing { padding: 18px; }
  .personal-briefing h2 { font-size: 18px; }
  .personal-capture { grid-template-columns: 20px minmax(0, 1fr); }
  .personal-capture .btn { grid-column: 1 / -1; }
  .personal-sources > div, .personal-form-grid { grid-template-columns: 1fr; }
  .personal-source { border-right: 0; }
  .personal-profile-form footer { align-items: stretch; flex-direction: column; }
  .personal-approval { grid-template-columns: 30px minmax(0, 1fr); }
  .personal-approval-actions { grid-column: 1 / -1; }
  /* The agenda is the page's main content on a phone: the time column keeps its
     own row so a long meeting title is never squeezed into a sliver. */
  .personal-agenda-item { grid-template-columns: minmax(0, 1fr) 20px 28px; row-gap: 2px; padding: 10px 0; }
  .personal-agenda-item.focus { padding-left: 8px; }
  .personal-agenda-time { grid-column: 1 / -1; font-size: 12px; }
  .personal-plan-stats { gap: 6px 14px; padding: 11px 14px; }
  .personal-plan-window { margin-left: 0; }
  .personal-alert { grid-template-columns: 18px minmax(0, 1fr); row-gap: 8px; }
  .personal-alert .btn { grid-column: 2 / -1; justify-self: start; }
  .personal-mila-actions .btn { flex: 1 1 auto; justify-content: center; }
  .personal-policy.warning { align-items: flex-start; flex-wrap: wrap; }
  .personal-policy.warning .btn { margin-left: 0; }
}
/* Corporate chat: channel list beside one open thread */
.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; height: calc(100vh - 190px); height: calc(100dvh - 190px); min-height: 420px; }
.chat-side, .chat-main { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.chat-search { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-search svg { width: 15px; color: var(--text-3); }
.chat-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 12px/1 var(--font-sans); }
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-item, .chat-person {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-item:hover, .chat-person:hover { background: var(--surface-2); }
.chat-item.active { background: var(--primary-soft); }
.chat-avatar {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
}
.chat-avatar svg { width: 16px; }
.chat-avatar.channel { background: var(--primary-soft); color: var(--primary-ink); }
.chat-avatar.agent { background: var(--primary); color: #fff; }
.chat-item-body, .chat-person span:not(.chat-avatar) { min-width: 0; }
.chat-item-body strong, .chat-person strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-body small, .chat-person small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-item-meta time { color: var(--text-3); font-size: 12px; }
.chat-unread { min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.chat-people-head { margin: 10px 8px 4px; color: var(--text-3); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.chat-thread-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.chat-thread-head strong { display: block; color: var(--text); font-size: 13px; }
.chat-thread-head small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; }
.chat-back { display: none; }
.chat-thread { flex: 1; overflow-y: auto; padding: 16px; }
.chat-day { margin: 14px 0 10px; color: var(--text-3); font-size: 12px; text-align: center; }
.chat-system { margin: 8px 0; color: var(--text-3); font-size: 12px; text-align: center; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.chat-msg.mine { align-items: flex-end; }
.chat-msg-author { margin: 0 0 3px 10px; color: var(--text-3); font-size: 12px; font-weight: 700; }
.chat-bubble {
  max-width: min(560px, 78%);
  position: relative;
  padding: 9px 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.mine .chat-bubble { border-color: transparent; background: var(--primary); color: #fff; }
.chat-msg.agent .chat-bubble { border-color: var(--primary-ink); }
.chat-bubble time { position: absolute; right: 10px; bottom: 4px; font-size: 12px; opacity: .65; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-composer textarea {
  min-height: 38px; max-height: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 500 12.5px/1.45 var(--font-sans);
  resize: none;
}
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--text-3); text-align: center; }
.chat-empty svg { width: 24px; }
.chat-empty h4 { margin: 0; color: var(--text-2); font-size: 13px; }
.chat-empty p { max-width: 320px; font-size: 12px; line-height: 1.5; }
.chat-empty.small { min-height: 120px; padding: 18px; }
.chat-avatar.online::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--success, #30a46c);
}
.chat-avatar { position: relative; }
.chat-unread.mention { background: var(--error); }
.chat-msg { position: relative; }
.chat-msg.flash .chat-bubble { animation: chat-flash 1.2s ease-out; }
@keyframes chat-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--primary-soft); } 100% { box-shadow: none; } }
.chat-quote {
  margin: -2px -4px 6px;
  padding: 5px 8px;
  border-left: 2px solid var(--primary-ink);
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  cursor: pointer;
}
.chat-quote strong { display: block; font-size: 12px; }
.chat-quote span { display: block; overflow: hidden; font-size: 12px; opacity: .8; text-overflow: ellipsis; white-space: nowrap; }
.chat-bubble.mentioned { border-color: var(--primary-ink); }
.chat-bubble.deleted { color: var(--text-3); font-style: italic; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-att-image img { max-width: 260px; max-height: 260px; margin-bottom: 4px; border-radius: 8px; display: block; }
.chat-att-audio { display: grid; gap: 4px; margin-bottom: 4px; }
.chat-att-audio audio { width: 240px; max-width: 100%; height: 34px; }
.chat-att-audio small { color: var(--text-3); font-size: 12px; }
.chat-transcript { margin: 2px 0 0; font-size: 12px; line-height: 1.45; opacity: .85; }
.chat-att-file {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
}
.chat-att-file svg { width: 15px; }
.chat-att-file strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-att-file small { display: block; font-size: 12px; opacity: .7; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-reaction {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}
.chat-reaction.mine { border-color: var(--primary-ink); background: var(--primary-soft); }
.chat-react-picker {
  position: absolute;
  z-index: 5;
  bottom: 100%;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.chat-react-picker button { padding: 3px 5px; border: 0; border-radius: 50%; background: none; font-size: 15px; cursor: pointer; }
.chat-react-picker button:hover { background: var(--surface-2); }
.chat-actions {
  position: absolute;
  top: -10px;
  right: 8px;
  display: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.chat-msg.mine .chat-actions { right: auto; left: 8px; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { display: flex; }
.chat-actions .icon-btn.sm, .icon-btn.sm { width: 24px; height: 24px; }
.icon-btn.sm svg { width: 13px; }
.chat-receipt { display: inline-flex; align-items: center; gap: 1px; margin-top: 2px; color: var(--text-3); font-size: 12px; }
.chat-receipt svg { width: 11px; }
.chat-receipt.seen { color: var(--primary-ink); }
.chat-receipt i { margin-left: 3px; font-style: normal; }
.chat-new-line { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--primary-ink); font-size: 12px; }
.chat-new-line::before, .chat-new-line::after { content: ""; flex: 1; height: 1px; background: var(--primary); opacity: .35; }
.chat-older { display: block; width: 100%; margin-bottom: 10px; padding: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer; }
.chat-recap { margin: 8px 14px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.chat-recap > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: var(--text-sm); }
.chat-recap p { margin: 0; white-space: pre-wrap; font-size: var(--text-sm); color: var(--text-2); }

.chat-pinned { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.chat-pinned svg { width: 14px; color: var(--primary-ink); }
.chat-pinned span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-bar { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.chat-reply-bar svg { width: 14px; color: var(--primary-ink); }
.chat-reply-bar strong { display: block; font-size: 12px; }
.chat-reply-bar small { display: block; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.chat-pending span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; }
.chat-pending button { border: 0; background: none; color: var(--text-3); cursor: pointer; }
.chat-pending svg { width: 11px; }
.chat-typing { padding: 4px 16px 0; color: var(--text-3); font-size: 12px; font-style: italic; }
.chat-composer .icon-btn.recording { color: #fff; background: var(--danger-fill); animation: chat-pulse 1.4s ease-in-out infinite; }
@keyframes chat-pulse { 50% { opacity: .55; } }
.chat-composer { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: end; }
.chat-members { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chat-members header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chat-members header strong { font-size: 12px; }
.chat-members-list { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.chat-member { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.chat-member .chat-avatar { width: 28px; height: 28px; font-size: 12px; }
.chat-member strong { display: block; font-size: 12px; }
.chat-member small { display: block; color: var(--text-3); font-size: 12px; }
.chat-members-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-members-add small { width: 100%; color: var(--text-3); font-size: 12px; }
.chat-leave { margin-top: 10px; }
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 170px); height: calc(100dvh - 170px); }
  .chat-layout .chat-main { display: none; }
  .chat-layout.thread-open .chat-side { display: none; }
  .chat-layout.thread-open .chat-main { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-bubble { max-width: 86%; }
}

/* Touch targets. The compact icon buttons are 24px, which is fine for a mouse
   and too small for a thumb — and several of them delete something. On a touch
   device the hit area grows to 40px while the glyph stays the same size, so the
   layout does not change but the button becomes reachable. */
@media (pointer: coarse) {
  /* The hit area grows through an absolutely positioned pseudo-element, so the
     button keeps its 24px box and nothing in the row moves. Resizing the button
     itself pushed its container past the screen edge. */
  .icon-btn.sm { position: relative; }
  .icon-btn.sm::after { content: ""; position: absolute; inset: -8px; }
  /* The message actions sit shoulder to shoulder, so widen the row to match the
     grown hit areas. Overlapping them would let a tap meant for "edit" land on
     "delete", and the later sibling wins. */
  .chat-actions { gap: 16px; padding: 4px 6px; }
  .chat-reaction { padding: 5px 10px; }
  .chat-react-picker button { padding: 7px 9px; font-size: 18px; }

  /* Same trick, applied to the rest of the shell. An .icon-btn is a 36px box,
     which is four pixels short of a finger on every axis; a .nav-item and a
     .tab are tall enough to read and not to hit. Growing the hit area rather
     than the box keeps every row exactly where it was. */
  .icon-btn { position: relative; }
  .icon-btn::after { content: ""; position: absolute; inset: -4px; }
  .nav-item { min-height: 44px; }
  .tab { min-height: 44px; }
  .menu-item { min-height: 44px; }
}

/* Personal memory: what MILA was told about the owner */
.personal-knows { margin-bottom: 14px; }
.personal-knows-hint { margin: 12px 16px 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.personal-knows-add { margin: 12px 16px; }
.personal-knows-group { padding: 0 16px 10px; }
.personal-knows-cat {
  margin: 10px 0 5px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.personal-knows-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.personal-knows-fact:last-child { border-bottom: 0; }
.personal-knows-fact span { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .personal-knows-add { grid-template-columns: 20px minmax(0, 1fr); }
  .personal-knows-add .btn { grid-column: 1 / -1; }
}

/* Memory: the day journal the system writes about itself */
.memory-journal-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.memory-journal-head h4 { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.memory-journal-head span { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; }
.memory-journal { padding: 4px 18px 14px; }
.memory-journal-day {
  margin: 12px 0 4px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.memory-journal-row {
  display: grid;
  grid-template-columns: 46px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.memory-journal-row:last-child { border-bottom: 0; }
.memory-journal-time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.memory-journal-ico svg { width: 14px; color: var(--primary-ink); }
.memory-journal-body { min-width: 0; }
.memory-journal-body strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.memory-journal-body small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; }
@media (max-width: 640px) {
  .memory-journal { padding: 4px 12px 12px; }
  .memory-journal-row { grid-template-columns: 42px 16px minmax(0, 1fr); row-gap: 4px; }
  .memory-journal-row .badge { grid-column: 3 / -1; justify-self: start; }
}

/* Studio: Design, Media and Analytics */
.studio-page{padding-bottom:48px}.studio-head{align-items:flex-start}.studio-head .row{flex-wrap:wrap;justify-content:flex-end}
.studio-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.studio-metric{min-height:112px;padding:18px;border:1px solid var(--border);background:var(--surface);border-radius:8px;display:flex;flex-direction:column;justify-content:space-between}
.studio-metric>span{color:var(--text-2);font-size:12px}.studio-metric strong{font-size:30px;line-height:1;font-weight:800}.studio-metric small{color:var(--text-3);font-size:12px}
.studio-band{border-top:1px solid var(--border);padding:22px 0 28px}.studio-band>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:15px}
.studio-band>header h2{font-size:16px;margin:0 0 4px}.studio-band>header p{font-size:12px;color:var(--text-2);margin:0}
.studio-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.studio-collection{min-height:168px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;justify-content:space-between}
.studio-collection h3,.studio-model h3,.studio-campaign h3,.studio-job h3{font-size:15px;margin:6px 0}.studio-collection p,.studio-model p,.studio-campaign p,.studio-job p{font-size:12px;line-height:1.55;color:var(--text-2);margin:0}
.studio-kicker{text-transform:uppercase;font-size:12px;color:var(--text-3);font-weight:700}
.studio-card-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--text-2)}
.studio-status{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border:1px solid var(--border);background:var(--surface-2);border-radius:5px;text-transform:uppercase;font-size:12px;font-weight:800;color:var(--text-2)}
.studio-status.approved,.studio-status.released,.studio-status.complete,.studio-status.live{color:var(--success-ink);border-color:color-mix(in srgb,var(--success) 30%,var(--border));background:color-mix(in srgb,var(--success) 8%,var(--surface))}
.studio-status.production,.studio-status.running,.studio-status.measuring{color:var(--warning-ink);border-color:color-mix(in srgb,var(--warning) 30%,var(--border))}
.studio-status.rejected,.studio-status.failed,.studio-status.cancelled{color:var(--error-ink);border-color:color-mix(in srgb,var(--error) 30%,var(--border))}
.studio-model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.studio-model{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.studio-model-media{aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-3)}.studio-model-media svg{width:32px;height:32px}.studio-model-media img{width:100%;height:100%;object-fit:cover}.studio-model-media small{font-size:12px}
.studio-model-body{padding:14px}.studio-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}.studio-specs span{padding:7px 4px;background:var(--surface-2);text-align:center;font-size:12px;border-radius:5px}
.studio-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.studio-form-grid .span-2{grid-column:1/-1}
.studio-check-list{border:1px solid var(--border);border-radius:6px;padding:8px;max-height:160px;overflow:auto;background:var(--surface-2)}.check-row{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:7px}.check-row+ .check-row{border-top:1px solid var(--border)}.check-row small{color:var(--text-3)}
.studio-campaign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.studio-campaign{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.studio-campaign-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.studio-campaign-metrics span{font-size:12px;text-transform:uppercase;color:var(--text-3)}.studio-campaign-metrics b{display:block;color:var(--text);font-size:16px;margin-bottom:3px}
.studio-job-list{display:grid;gap:8px}.studio-job{display:grid;grid-template-columns:42px minmax(0,1fr) 34px;gap:13px;align-items:center;padding:13px 15px;border:1px solid var(--border);background:var(--surface);border-radius:7px}.studio-job-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);color:var(--primary-ink)}.studio-job-icon svg{width:19px;height:19px}.studio-job h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-job code{font-size:12px;color:var(--text-2)}
.studio-job-icon{overflow:hidden}.studio-job-icon img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.studio-genbar{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:8px}
.studio-genbar-controls{display:flex;flex-wrap:wrap;gap:10px}.studio-genbar-controls .field{flex:1;min-width:150px}
.studio-genbar-input{display:flex;gap:10px;align-items:flex-end}.studio-genbar-input .textarea{flex:1;resize:vertical;min-height:52px}
.studio-genfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.studio-genitem{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:8px}
.studio-genitem-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.studio-genitem-head code{font-size:12px;color:var(--text-2)}
.studio-genitem-actions{margin-left:auto;display:flex;gap:4px}
.studio-genitem p{font-size:12px;line-height:1.5;color:var(--text-2);margin:0}
.studio-genitem-media{display:block}.studio-genitem-media img{width:100%;border-radius:6px;border:1px solid var(--border)}
.studio-genitem-wait{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px;font-size:12px;color:var(--text-3);border:1px dashed var(--border);border-radius:6px}
.studio-genitem-wait svg{width:14px;height:14px;animation:studioSpin 1.2s linear infinite}
@keyframes studioSpin{to{transform:rotate(360deg)}}
.studio-genitem-error{padding:10px 12px;font-size:12px;color:var(--error-ink);border:1px solid color-mix(in srgb,var(--error) 30%,var(--border));border-radius:6px}
.studio-provider{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--surface));border-radius:7px}.studio-provider>svg{width:22px;color:var(--primary-ink)}.studio-provider div{display:flex;flex-direction:column}.studio-provider span{font-size:12px;color:var(--text-2)}
.studio-stream-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.studio-stream{min-width:0;border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden}.studio-stream>header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:14px;border-bottom:1px solid var(--border)}.studio-stream>header>span{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);color:var(--primary-ink)}.studio-stream>header svg{width:16px}.studio-stream h3{font-size:12px;margin:0 0 2px}.studio-stream header p{font-size:12px;color:var(--text-3);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-stream header b{font-size:18px}
.studio-signal{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);text-align:left}.studio-signal:hover{background:var(--surface-2)}.studio-signal>span{font-size:12px;font-weight:800}.studio-signal .positive{color:var(--success-ink)}.studio-signal .negative{color:var(--error-ink)}.studio-signal strong,.studio-signal small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-signal strong{font-size:12px}.studio-signal small{font-size:12px;color:var(--text-3)}.studio-signal em{font-style:normal;font-size:12px;color:var(--text-2)}.studio-stream-empty{padding:24px 12px!important;text-align:center;font-size:12px!important}
.studio-table td strong,.studio-table td small{display:block}.studio-table td small{font-size:12px;color:var(--text-3);margin-top:3px}.studio-recommend{display:inline-flex;padding:4px 8px;border-radius:5px;font-size:12px;font-weight:700;background:var(--surface-2)}.studio-recommend.increase{color:var(--success-ink)}.studio-recommend.stop,.studio-recommend.reduce{color:var(--error-ink)}.studio-recommend.validate{color:var(--warning-ink)}
.studio-empty{grid-column:1/-1;min-height:190px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px dashed var(--border);border-radius:8px;color:var(--text-2);padding:24px}.studio-empty>span{width:42px;height:42px;display:grid;place-items:center;background:var(--surface-2);border-radius:7px}.studio-empty svg{width:20px}.studio-empty h3{font-size:14px;color:var(--text);margin:12px 0 5px}.studio-empty p{max-width:420px;font-size:12px;margin:0 0 14px}
@media (max-width: 1280px){.studio-model-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-stream-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 900px){.studio-metrics,.studio-collection-grid,.studio-campaign-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-form-grid{grid-template-columns:1fr}.studio-form-grid .span-2{grid-column:auto}.studio-head{display:block}.studio-head .row{justify-content:flex-start;margin-top:12px}}
@media (max-width: 640px){.studio-metrics,.studio-collection-grid,.studio-campaign-grid,.studio-model-grid,.studio-stream-grid{grid-template-columns:1fr}}

/* ERP */
.erp-page .kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.erp-page .kv-grid>div{min-height:76px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.erp-page .kv-grid span{font-size:12px;color:var(--text-2)}
.erp-page .kv-grid strong{font-size:18px;line-height:1.2}
.erp-page .list.compact{display:flex;flex-direction:column;gap:8px}
.erp-page .list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:12px}
.erp-page .list-item strong{display:block;font-size:14px}.erp-page .list-item p{margin:3px 0 0}
.erp-page .chips{display:flex;flex-wrap:wrap;gap:8px}
.erp-page .codebox{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:12px;font-size:12px;line-height:1.5;white-space:pre-wrap}
.erp-page .empty.compact{min-height:96px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:8px;background:var(--surface-2)}
.erp-page .erp-metric.ok{border-color:color-mix(in srgb,var(--success) 32%,var(--border))}
.erp-page .erp-metric.warning{border-color:color-mix(in srgb,var(--warning) 38%,var(--border))}
.erp-page .erp-metric.risk{border-color:color-mix(in srgb,var(--error) 42%,var(--border))}
.erp-page .erp-table{border:1px solid var(--border);background:var(--surface-2)}
.erp-page .erp-table .tbl tbody tr.risk{background:color-mix(in srgb,var(--error) 7%,transparent)}
.erp-page .erp-table .tbl td small{display:block;color:var(--text-3);font-size:12px;margin-top:4px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erp-page .erp-raw{margin-top:12px}.erp-page .erp-raw summary{cursor:pointer;color:var(--text-2);font-size:12px}
.erp-page .erp-actions{display:flex;flex-wrap:wrap;gap:10px}.erp-page .erp-actions .btn{justify-content:flex-start}
@media (max-width: 900px){.erp-page .kv-grid{grid-template-columns:1fr}.erp-page .list-item{align-items:flex-start;flex-direction:column}}

/* ---------- Command Center ----------
   Two screens after RUBRIC Agentic OS: the dashboard stage and the Second
   Brain map. A stage, not a page — pure black with one ember accent in both
   themes (a cockpit stays dark at noon), so these colours are literal rather
   than token-driven: the one screen allowed to opt out of theming. Panels are
   typography floating on the honeycomb, not boxes. */
#view:has(.cmd-stage) .view { width: 100%; max-width: none; padding: 0 var(--safe-r) 0 var(--safe-l); }
/* The palette is shared with the sheets, which live on <body>: a fixed dialog
   inside the stage would inherit any ancestor transform as its containing
   block (the page-entry animation was enough), so the overlay leaves the
   subtree and takes the variables with it. */
.cmd-stage, .cmd-sheet, .cmd-sheet-scrim {
  --ember: #ff6a00; --ember-2: #ff9440; --ember-3: #ffc98f; --cream: #e8e3d8;
  --cmd-bg: #060605;
  --cmd-line: rgba(255, 255, 255, 0.12); --cmd-line-2: rgba(255, 255, 255, 0.4);
  /* --cmd-faint carries real words (subheads, table headers), so it clears
     4.5:1 on the stage black like any other ink — pinned by design-tokens. */
  --cmd-text: #f2f0ec; --cmd-dim: #9a968e; --cmd-faint: #7d7970;
  --cmd-r: 300px; --cmd-R: 300px;
}
.cmd-stage {
  position: relative; overflow: hidden; color: var(--cmd-text); background: var(--cmd-bg);
  min-height: calc(100vh - var(--topbar-total)); min-height: calc(100svh - var(--topbar-total)); font-size: 13px;
}
.cmd-stage a { color: inherit; text-decoration: none; }
.cmd-bg { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(56% 50% at 50% 46%, rgba(200, 190, 170, 0.045), transparent 62%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'><path d='M14 8.8 28 17v16.3L14 41.5 0 33.3V17Z M14 41.5v7.5 M14 0v8.8' fill='none' stroke='rgba(255,250,240,0.05)' stroke-width='1'/></svg>");
  background-color: var(--cmd-bg);
}
.cmd-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 120%, rgba(6, 6, 5, 0.85), transparent 60%); }
.cmd-nebula { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Orbit — the chips sit on a wide dark band over the honeycomb. */
.cmd-orbit { position: absolute; inset: 0; animation: cmdFade 0.9s var(--ease) both; }
.cmd-band { position: absolute; left: 50%; top: 50%;
  width: calc(var(--cmd-r) * 2 + 82px); height: calc(var(--cmd-r) * 2 + 82px);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 41px solid rgba(9, 9, 8, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.cmd-sats { position: absolute; inset: 0; animation: cmdSpin 300s linear infinite; }
.cmd-sat { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--cmd-r)) rotate(calc(-1 * var(--a))); }
.cmd-sat-chip { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%;
  background: #101010; border: 1px solid rgba(255, 255, 255, 0.2); color: #b9b5ad;
  animation: cmdSpinRev 300s linear infinite;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.cmd-sat-chip svg { width: 18px; height: 18px; }
.cmd-sat-chip em { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ember-2); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.cmd-sat:hover .cmd-sat-chip, .cmd-sat:focus-visible .cmd-sat-chip, .cmd-sat.hit .cmd-sat-chip {
  border-color: var(--ember); color: var(--ember-2);
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.35), 0 0 22px rgba(255, 106, 0, 0.35); }
.cmd-sat:hover .cmd-sat-chip em, .cmd-sat:focus-visible .cmd-sat-chip em { opacity: 1; }
.cmd-sat.miss .cmd-sat-chip { opacity: 0.14; }
.cmd-orbit:hover .cmd-sats, .cmd-orbit:hover .cmd-sat-chip,
.cmd-orbit:focus-within .cmd-sats, .cmd-orbit:focus-within .cmd-sat-chip { animation-play-state: paused; }
@keyframes cmdSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cmdSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ring filter — type to spotlight modules, like RUBRIC's ring search. */
.cmd-filter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cmd-filter input { width: 220px; text-align: center; background: rgba(10, 9, 8, 0.92);
  border: 1px solid rgba(255, 106, 0, 0.6); border-radius: 8px; padding: 10px 14px;
  font: 700 13px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cmd-text); outline: none; }
.cmd-filter input::placeholder { color: var(--cmd-faint); }
.cmd-filter-count { font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-2); text-align: center; }

/* Brain search results — everything the OS holds, grouped by kind. */
.cmd-results { width: min(440px, 88vw); max-height: 52vh; max-height: 52dvh; overflow-y: auto; text-align: left;
  background: rgba(9, 9, 8, 0.96); border: 1px solid var(--cmd-line); border-radius: 8px; padding: 8px 10px;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.cmd-res-group { padding: 6px 0 4px; }
.cmd-res-group + .cmd-res-group { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cmd-res-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px;
  font: 700 12px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-2); }
.cmd-res-head svg { width: 12px; height: 12px; }
.cmd-res-head b { margin-left: auto; color: var(--cmd-faint); font-weight: 700; }
.cmd-res-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; margin: 0 -8px; border-radius: 5px; min-width: 0; }
.cmd-res-row:hover { background: rgba(255, 255, 255, 0.06); }
.cmd-res-row b { font-size: 13px; font-weight: 700; color: var(--cmd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-res-row small { font-size: 12px; color: var(--cmd-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Where the memory lives and when it was last touched. */
.cmd-res-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--cmd-faint); }
.cmd-res-meta i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-res-meta time { margin-left: auto; flex: none; color: var(--ember-2); opacity: 0.85; }
.cmd-res-note { padding: 7px 4px; font: 500 12px/1.5 var(--font-mono); letter-spacing: 0.06em; color: var(--cmd-faint); }

/* Brand */
/* Centred by margins, not transform: the entry animation owns `transform`
   (its last keyframe is `none`, fill both), so a translateX(-50%) here is
   silently erased and the brand sits half its width to the right. */
.cmd-brand { position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: fit-content;
  text-align: center; z-index: 3; animation: cmdIn 0.5s var(--ease) both; padding: 2px 42px 10px; }
/* The ring's top arc passes beneath the title; this halo keeps the words on
   top of the traffic without drawing a box around them. */
.cmd-brand::before { content: ""; position: absolute; inset: -16px -8px -4px; z-index: -1;
  background: radial-gradient(closest-side, rgba(6, 6, 5, 0.97), rgba(6, 6, 5, 0.72) 60%, transparent);
  filter: blur(6px); }
.cmd-title { font-size: 21px; letter-spacing: 0.03em; white-space: nowrap; }
@media (max-width: 1680px) { .cmd-brand .cmd-title { white-space: normal; text-wrap: balance; max-width: 46vw; margin: 0 auto; } }
.cmd-title .cmd-hex { color: var(--ember); font-size: 17px; vertical-align: 1px; }
.cmd-title strong { font-weight: 800; color: #ffffff; }
.cmd-title em { font-style: normal; font-weight: 700; color: var(--ember-2); }
.cmd-title em.dim { color: var(--cmd-dim); }
.cmd-sub { margin: 4px 0 8px; font-size: 12px; color: var(--cmd-dim); letter-spacing: 0.22em; text-transform: uppercase; }
.cmd-quick { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.cmd-quick-btn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid transparent; background: none; padding: 0; cursor: pointer; color: var(--cmd-dim); }
.cmd-quick-btn svg { width: 14px; height: 14px; }
.cmd-quick-btn:hover { color: #ffffff; border-color: var(--cmd-line); }
.cmd-leds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; background: none; border: 1px solid transparent;
  border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.cmd-leds:hover, .cmd-leds:focus-visible { border-color: var(--cmd-line); }
.cmd-meter { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); margin-top: 5px; overflow: hidden; }
.cmd-meter i { display: block; height: 100%; background: var(--ember); border-radius: 2px; }
.cmd-meter-val { font-style: normal; font-weight: 500; font-size: 12px; color: var(--cmd-dim); margin-left: 6px; }
.cmd-led { display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cmd-faint); }
.cmd-led i { width: 5px; height: 5px; border-radius: 50%; background: var(--cmd-faint); }
.cmd-led.ok { color: var(--cmd-dim); }
.cmd-led.ok i { background: var(--ember); box-shadow: 0 0 8px rgba(255, 106, 0, 0.8); }
.cmd-led.down i { background: #e5484d; box-shadow: 0 0 8px rgba(229, 72, 77, 0.7); }

/* Side columns — typography on black, no boxes. */
/* On short HUD screens the column scrolls quietly instead of clipping. */
.cmd-col { position: absolute; top: 20px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 26px; width: 318px;
  overflow-y: auto; scrollbar-width: none; }
.cmd-col::-webkit-scrollbar { display: none; }
.cmd-col-l { left: 22px; }
.cmd-col-r { right: 22px; }
.cmd-col > :last-child { margin-top: auto; }
.cmd-panel { --d: 0; min-height: 0; animation: cmdIn 0.55s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms); }
.cmd-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cmd-panel-ico { color: var(--cmd-text); display: grid; place-items: center; }
.cmd-panel-ico svg { width: 15px; height: 15px; }
.cmd-panel-head h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #ffffff; }
.cmd-head-note { font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmd-faint); }
.cmd-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cmd-text); border: 1.5px solid var(--cmd-line-2); border-radius: 999px; padding: 6px 13px; }
.cmd-pill:hover { border-color: #ffffff; }
.cmd-pill.ember { color: var(--ember-2); border-color: rgba(255, 106, 0, 0.7); }
.cmd-pill.ember:hover { background: var(--ember); color: #140a02; }
.cmd-panel-foot { margin-top: 10px; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--cmd-faint); }

/* Micro apps */
.cmd-modlist { display: flex; flex-direction: column; gap: 2px; }
.cmd-mod { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; }
.cmd-mod:hover { background: rgba(255, 255, 255, 0.05); }
.cmd-mod-ico { flex: none; display: grid; place-items: center; color: var(--cmd-text); }
.cmd-mod-ico svg { width: 20px; height: 20px; }
.cmd-mod:hover .cmd-mod-ico { color: var(--ember-2); }
.cmd-mod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmd-mod-body strong { font-size: 13px; font-weight: 700; color: var(--cmd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-mod-body small { font-size: 12px; color: var(--cmd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-mod-arrow { color: var(--cmd-faint); font-size: 14px; }
.cmd-mod:hover .cmd-mod-arrow { color: var(--ember-2); }

/* Calendar */
.cmd-clockrow { display: flex; align-items: center; gap: 14px; }
.cmd-analog { width: 46px; height: 46px; flex: none; }
.cmd-analog circle { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.6; }
.cmd-analog line { stroke: #d9d5cc; stroke-width: 2; stroke-linecap: round; }
.cmd-analog line.s { stroke: var(--ember); stroke-width: 1; }
.cmd-clockcol { min-width: 0; }
.cmd-weekline { font-size: 12.5px; font-weight: 600; color: var(--cmd-dim); letter-spacing: 0.04em; }
.cmd-weekline b { color: var(--ember-2); }
.cmd-weekline span { color: var(--cmd-faint); }
.cmd-clock { font-size: 33px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; color: var(--ember);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(255, 106, 0, 0.3); white-space: nowrap; }
.cmd-tz { font-size: 12px; color: var(--cmd-dim); letter-spacing: 0.22em; text-transform: uppercase; }
.cmd-world { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 18px; padding: 12px 0; }
.cmd-world-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmd-world-city { font-size: 12px; font-weight: 600; color: var(--cmd-faint); letter-spacing: 0.1em; white-space: nowrap; }
.cmd-world-time { font-size: 13px; color: var(--cmd-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-world-time b { font-weight: 800; }
.cmd-world-time em { font-style: normal; font-size: 12px; color: var(--cmd-faint); }
.cmd-qtrs { display: flex; flex-direction: column; gap: 5px; }
.cmd-qtr { display: flex; align-items: center; gap: 4px; }
.cmd-qtr b { flex: none; width: 24px; font: 600 12px/1 var(--font-mono); color: var(--cmd-faint); }
.cmd-qtr i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #33312d; }
.cmd-qtr i.past { background: var(--cream); border-color: var(--cream); }
.cmd-qtr i.now { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 9px rgba(255, 106, 0, 0.8); }
.cmd-next { margin-top: 12px; display: flex; flex-direction: column; gap: 1px; }
.cmd-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 6px; margin: 0 -6px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.cmd-next-row:hover { background: rgba(255, 255, 255, 0.05); }
.cmd-next-row > span:last-child { color: var(--cmd-dim); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Big numbers */
.cmd-big { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; color: var(--ember);
  font-variant-numeric: tabular-nums; }
.cmd-bigrow { display: flex; align-items: flex-start; gap: 12px; }
.cmd-big-side { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; min-width: 0; }
.cmd-big-side b { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cmd-text); }
.cmd-big-side em { font-style: normal; font-size: 12px; color: var(--cmd-dim); }
.cmd-hexmark { margin-left: auto; color: var(--ember); font-size: 15px; }
.cmd-hexmark.sm { margin: 0; font-size: 12px; }
.cmd-matrix { margin-top: 13px; display: grid; grid-template-columns: repeat(14, 16px); gap: 7px; }
.cmd-matrix i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #33312d; }
.cmd-matrix i.on { background: var(--ember); border-color: var(--ember); }
.cmd-matrix i:not(.on):nth-child(3n) { background: #33312d; }
.cmd-matrix i.now { box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.55); }

/* Inbox */
.cmd-sublist { margin-top: 12px; display: flex; flex-direction: column; gap: 1px; }
.cmd-subhead { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cmd-faint); margin-bottom: 6px; }
.cmd-subrow { display: flex; align-items: center; gap: 9px; padding: 5px 6px; margin: 0 -6px; border-radius: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--cmd-text); }
a.cmd-subrow:hover { background: rgba(255, 255, 255, 0.05); }
.cmd-subico { flex: none; color: var(--ember); display: grid; place-items: center; }
.cmd-subico svg { width: 14px; height: 14px; }
.cmd-subtext { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-subwhen { flex: none; font-size: 12px; font-weight: 500; color: var(--cmd-dim); }
.cmd-empty { padding: 10px 0 4px; font-size: 12px; color: var(--cmd-dim); }
.cmd-mix { margin-top: 12px; }
.cmd-mixbar { display: flex; gap: 3px; height: 7px; margin-bottom: 8px; }
.cmd-mixbar i { min-width: 6px; border-radius: 999px; }
.cmd-mixbar i.a { background: var(--ember); }
.cmd-mixbar i.b { background: var(--cream); }
.cmd-mixbar i.c { background: #8a877f; }
.cmd-mixbar i.d { background: #45433f; }
.cmd-mixlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--cmd-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.cmd-mixlegend b { color: var(--cmd-text); font-weight: 800; }

/* Skills deck — filled cards, tap ▶ to run. */
.cmd-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmd-skill { display: flex; flex-direction: column; gap: 2px; padding: 12px 13px;
  border-radius: 10px; background: #161512; }
.cmd-skill-ico { display: grid; place-items: center; width: 20px; height: 20px; margin-bottom: 5px; }
.cmd-skill-ico svg { width: 16px; height: 16px; }
.cmd-skill-name { font-size: 13px; font-weight: 800; color: #ffffff; }
.cmd-skill-meta { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmd-dim); }
.cmd-skill-meta b { font-weight: 800; }
.cmd-skill-meta .run { color: var(--ember-2); }
.cmd-skill-meta .warn { color: #f5a524; }
.cmd-skill-meta .err { color: #f87171; }
.cmd-skill-actions { display: flex; gap: 7px; margin-top: 9px; }
.cmd-skill-run, .cmd-skill-cfg { width: 30px; height: 24px; display: grid; place-items: center;
  border-radius: 6px; border: 1.5px solid var(--cmd-line-2); color: var(--cmd-dim); }
.cmd-skill-run { border-color: rgba(255, 106, 0, 0.75); color: var(--ember); }
.cmd-skill-run:hover { background: var(--ember); color: #140a02; }
.cmd-skill-cfg:hover { color: #ffffff; border-color: #ffffff; }
.cmd-skill-run svg, .cmd-skill-cfg svg { width: 12px; height: 12px; }
.cmd-skill-run, .cmd-skill-cfg { background: none; cursor: pointer; }
.cmd-skill-run[disabled] { opacity: 0.35; pointer-events: none; }
.cmd-skill.off { opacity: 0.6; }

/* The fleet keeps one compact row under the deck: agents are not skills. */
.cmd-fleetrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cmd-line); }
.cmd-fleet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--cmd-line); font-size: 12px; font-weight: 700; color: var(--cmd-text); }
.cmd-fleet-chip:hover { border-color: rgba(255, 106, 0, 0.5); }
.cmd-fleet-ico { display: grid; place-items: center; }
.cmd-fleet-ico svg { width: 12px; height: 12px; }
.cmd-fleet-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--cmd-faint); }
.cmd-fleet-chip i.run { background: var(--ember); box-shadow: 0 0 6px rgba(255, 106, 0, 0.8); }
.cmd-fleet-chip i.warn { background: #f5a524; }
.cmd-fleet-chip i.err { background: #e5484d; }
.cmd-fleet-chip i.ok { background: #86c98f; }

/* Routines — a TIME | ROUTINE | STATUS table. */
.cmd-rtable { display: flex; flex-direction: column; }
.cmd-rhead { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; padding: 0 6px 7px;
  border-bottom: 1px solid var(--cmd-line); margin-bottom: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cmd-faint); }
.cmd-rrow { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center;
  padding: 5px 6px; margin: 0 -6px; border-radius: 5px; min-width: 0; }
.cmd-rrow:hover { background: rgba(255, 255, 255, 0.05); }
.cmd-rtime { font: 700 12.5px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--cmd-dim);
  padding: 4px 5px; border-radius: 5px; text-align: center; font-variant-numeric: tabular-nums; }
.cmd-rrow.next .cmd-rtime { background: var(--ember); color: #140a02; box-shadow: 0 0 14px rgba(255, 106, 0, 0.45); }
.cmd-rname { font-size: 13px; font-weight: 700; color: var(--cmd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-rname em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--cmd-faint); }
.cmd-rstatus { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cmd-faint); }
.cmd-rrow.next .cmd-rstatus { color: var(--ember); }
.cmd-rrow.fired { opacity: 0.42; }
.cmd-rrow.paused { opacity: 0.55; }
.cmd-rrow.error .cmd-rstatus { color: #f87171; }

/* Memory + factory, side by side at the foot of the left column. */
.cmd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.cmd-duo .cmd-big { font-size: 26px; }
.cmd-duo .cmd-bigrow { flex-wrap: wrap; gap: 3px 8px; }
.cmd-duo .cmd-big-side { padding-top: 0; }
.cmd-duo .cmd-panel-head h2 { font-size: 12px; letter-spacing: 0.16em; }
.cmd-duo .cmd-matrix { grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 9px; }
.cmd-erp-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--cmd-dim); }
.cmd-erp-rows span { display: flex; justify-content: space-between; gap: 8px; }
.cmd-erp-rows b { color: var(--cmd-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.cmd-erp-rows b.risk, .cmd-erp-val.risk { color: #f87171; }
.cmd-erp-val { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cmd-text); }

/* MILA's orb — the voice is one tap from anywhere on the stage. */
.cmd-orb { position: absolute; right: 18px; bottom: 16px; z-index: 4; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c084fc, #7c3aed 55%, #4c1d95);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: box-shadow var(--dur) var(--ease); }
.cmd-orb:hover, .cmd-orb:focus-visible { box-shadow: 0 0 30px rgba(168, 85, 247, 0.75), 0 0 0 2px rgba(255, 148, 64, 0.5); }


/* ---------- The shell in the command language (operator theme) ----------
   The first pass only tinted the existing shapes and the owner rightly said
   nothing had changed. This one takes the shapes away: the rail and its
   column stand on the same honeycomb as the stage, an active row is an ember
   bar and brighter type rather than a filled pill, and every boundary is a
   hairline. */
[data-theme="command"] .sidebar { background: #080807; }
[data-theme="command"] .rail,
[data-theme="command"] .sectionnav {
  background-color: #080807;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'><path d='M14 8.8 28 17v16.3L14 41.5 0 33.3V17Z M14 41.5v7.5 M14 0v8.8' fill='none' stroke='rgba(255,250,240,0.035)' stroke-width='1'/></svg>");
}
[data-theme="command"] .rail { border-right: 1px solid rgba(255, 255, 255, 0.07); }
[data-theme="command"] .sectionnav { border-right: 1px solid rgba(255, 255, 255, 0.07); }

/* Rail: icon over a mono label, no pill — the active one lights up. */
[data-theme="command"] .rail-item { border-radius: 0; color: #6f6a62; }
[data-theme="command"] .rail-item span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme="command"] .rail-item:hover { background: rgba(255, 255, 255, 0.04); color: #cfcabf; }
[data-theme="command"] .rail-item.active { background: none; color: #ff9440; }
[data-theme="command"] .rail-item.active::before { left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0; background: #ff6a00; box-shadow: 0 0 10px rgba(255, 106, 0, 0.7); }
[data-theme="command"] .rail-brand { border-radius: 0; background: none; box-shadow: none; position: relative; }
[data-theme="command"] .rail-brand::after { background-color: #ff6a00; }
[data-theme="command"] .rail-foot { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 10px; margin-top: 6px; }

/* Section column: a mono caption, rows that are lines rather than boxes. */
[data-theme="command"] .sectionnav-head { border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 10px; }
[data-theme="command"] .sectionnav-title { font: 700 12px/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: #7d7970; padding: 2px 10px 12px; }
[data-theme="command"] .nav-item {
  border-radius: 0; border-left: 2px solid transparent; padding: 9px 10px 9px 12px;
  font-size: 13px; color: #a49f95; letter-spacing: 0.01em;
}
[data-theme="command"] .nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #f2f0ec; }
[data-theme="command"] .nav-item.active {
  background: linear-gradient(90deg, rgba(255, 106, 0, 0.16), rgba(255, 106, 0, 0));
  border-left-color: #ff6a00; color: #ffffff; font-weight: 700; box-shadow: none;
}
/* The stock rule paints a second bar outside the row; the border-left is ours. */
[data-theme="command"] .nav-item.active::before { display: none; }
[data-theme="command"] .nav-item .nav-tag { background: none; color: #ff9440; box-shadow: inset 0 0 0 1px rgba(255, 106, 0, 0.5); font-family: var(--font-mono); }
[data-theme="command"] .brand-badge { background: none; box-shadow: inset 0 0 0 1px rgba(255, 106, 0, 0.45); color: #ff9440; font-family: var(--font-mono); }
[data-theme="command"] .sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.07); }
[data-theme="command"] .user-chip .u-name { letter-spacing: 0.02em; }
[data-theme="command"] .user-chip .u-mail { font-family: var(--font-mono); font-size: 12px; }

/* Topbar and tabbar answer to the same rules. */
[data-theme="command"] .topbar { background: rgba(8, 8, 7, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="command"] .search { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; }
[data-theme="command"] .search input::placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
[data-theme="command"] .tabbar { background: rgba(8, 8, 7, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.07); }
[data-theme="command"] .tab-item { color: #6f6a62; }
[data-theme="command"] .tab-item.active { color: #ff9440; }
[data-theme="command"] .tab-item span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Second Brain map ---------- */
.cmd-map-field { position: absolute; inset: 0; animation: cmdFade 0.9s var(--ease) both; }
.cmd-band-label { --br: 0.5; position: absolute; left: 50%; top: calc(50% - var(--cmd-R) * var(--br) - 16px);
  transform: translateX(-50%); font-size: 14px; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.95); pointer-events: none; }
.cmd-band-label.apps { top: calc(50% - var(--cmd-R) * 0.97); color: #9fc8e8; }
.cmd-band-label.skills { top: calc(50% - var(--cmd-R) * 0.22 - 12px); color: #ff8a2a; font-size: 12px; letter-spacing: 0.3em; }
.cmd-hexring { position: absolute; inset: 0; }
.cmd-hexchip { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  transform: rotate(var(--a)) translateX(calc(var(--cmd-R) * 0.86)) rotate(calc(-1 * var(--a)));
  color: #8fb8d8; transition: color var(--dur) var(--ease), filter var(--dur) var(--ease); }
.cmd-hexchip svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmd-hexchip span { position: absolute; inset: 0; display: grid; place-items: center; color: inherit; }
.cmd-hexchip span svg { width: 14px; height: 14px; }
.cmd-hexchip:hover, .cmd-hexchip:focus-visible { color: #e6f3ff; filter: drop-shadow(0 0 8px rgba(160, 210, 255, 0.6)); }
.cmd-map-core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  border-radius: 50%; background: radial-gradient(circle, #0d0d0c 0%, #060606 70%);
  border: 1px solid rgba(255, 106, 0, 0.55); box-shadow: 0 0 34px rgba(255, 106, 0, 0.22), 0 0 0 6px rgba(255, 106, 0, 0.05); }
.cmd-map-core strong { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #ffffff; }
.cmd-map-core span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-2); }
.cmd-map-core:hover { border-color: var(--ember); }
.cmd-map-node { --a: 0deg; --nr: 0.3; position: absolute; left: 50%; top: 50%;
  transform: rotate(var(--a)) translateX(calc(var(--cmd-R) * var(--nr))) rotate(calc(-1 * var(--a)));
  display: flex; align-items: center; gap: 6px; }
.cmd-map-node i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.cmd-map-node span { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #dcd8d0; text-shadow: 0 0 10px rgba(0, 0, 0, 0.95); }
.cmd-map-node:hover span { color: #ffffff; }
.cmd-map-head { position: absolute; top: 16px; left: 22px; z-index: 3; animation: cmdIn 0.5s var(--ease) both; }
.cmd-map-head .cmd-sub { color: var(--ember-2); margin: 3px 0 0; text-align: left; }
.cmd-map-actions { position: absolute; top: 16px; right: 22px; z-index: 3; display: flex; gap: 8px; }
.cmd-map-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 700 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ember-2); border: 1px solid rgba(255, 106, 0, 0.55); border-radius: 5px;
  background: rgba(8, 6, 4, 0.7); padding: 8px 13px; }
.cmd-map-btn:hover { background: var(--ember); color: #140a02; }
.cmd-map-legendwrap { position: absolute; left: 22px; bottom: 16px; z-index: 3; display: flex; flex-direction: column-reverse; gap: 8px; align-items: flex-start; }
.cmd-map-legend { border: 1px solid var(--cmd-line); border-radius: 6px; padding: 10px 12px; min-width: 190px;
  background: rgba(10, 10, 9, 0.92); backdrop-filter: blur(9px); }
.cmd-map-legend div { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--cmd-text); }
.cmd-map-legend i { width: 9px; height: 9px; border-radius: 2px; }
.cmd-map-legend b { margin-left: auto; color: var(--cmd-dim); font-weight: 600; }
.cmd-map-node b { font: 600 12px/1 var(--font-mono); color: var(--cmd-faint); }
.cmd-map-node.focus i { box-shadow: 0 0 16px currentColor, 0 0 0 3px rgba(255, 255, 255, 0.15); }
.cmd-map-node.focus span { color: #ffffff; }

/* Galaxy + map tooltips: the data names itself under the cursor. */
.cmd-galaxy-tip { position: absolute; transform: translate(-50%, -100%); z-index: 4; pointer-events: none;
  white-space: nowrap; padding: 5px 10px; border-radius: 5px;
  background: rgba(9, 9, 8, 0.94); border: 1px solid var(--cmd-line);
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ember-3); }

/* Sheets — the day's operations in a right-hand overlay, without leaving the
   stage. Same language as the panels: black, hairline, one ember accent. */
.cmd-sheet-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(3, 3, 2, 0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: cmdFade 0.2s var(--ease) both; }
.cmd-sheet { position: fixed; top: calc(var(--topbar-total) + 12px); right: 12px; bottom: 12px;
  width: min(440px, calc(100vw - 24px)); z-index: 60;
  display: flex; flex-direction: column; border: 1px solid var(--cmd-line); border-radius: 8px;
  background: rgba(9, 9, 8, 0.97); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  color: var(--cmd-text); font-size: 13px; animation: cmdIn 0.25s var(--ease) both; }
.cmd-sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 11px; border-bottom: 1px solid var(--cmd-line); }
.cmd-sheet-head .cmd-panel-ico { margin-top: 2px; }
.cmd-sheet-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmd-sheet-title strong { font-size: 14px; font-weight: 800; color: #ffffff; overflow-wrap: anywhere; }
.cmd-sheet-title small { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--cmd-faint); overflow-wrap: anywhere; }
.cmd-sheet-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px;
  border: 1px solid transparent; background: none; padding: 0; cursor: pointer; color: var(--cmd-dim); }
.cmd-sheet-x:hover, .cmd-sheet-x:focus-visible { color: #ffffff; border-color: var(--cmd-line); }
.cmd-sheet-x svg { width: 13px; height: 13px; }
.cmd-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.cmd-sheet-body .cmd-subhead { margin: 8px 0 3px; }
.cmd-sheet-body .cmd-subhead:first-child { margin-top: 0; }
.cmd-sheet-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 6px; min-width: 0; }
.cmd-sheet-row:hover { background: rgba(255, 255, 255, 0.04); }
.cmd-sheet-row.dim { opacity: 0.55; }
.cmd-sheet-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmd-sheet-row-body strong { font-size: 13px; font-weight: 700; color: var(--cmd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-sheet-row-body small { font-size: 12px; color: var(--cmd-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-sheet-acts { display: flex; gap: 6px; flex: none; align-items: center; }
.cmd-mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; min-height: 26px;
  padding: 4px 10px; border-radius: 6px; border: 1.5px solid var(--cmd-line-2); background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--cmd-dim); }
.cmd-mini-btn:hover, .cmd-mini-btn:focus-visible { color: #ffffff; border-color: #ffffff; }
.cmd-mini-btn.ember { color: var(--ember-2); border-color: rgba(255, 106, 0, 0.7); }
.cmd-mini-btn.ember:hover { background: var(--ember); color: #140a02; }
.cmd-mini-btn svg { width: 12px; height: 12px; }
.cmd-mini-btn[disabled] { opacity: 0.45; pointer-events: none; }
.cmd-check { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--cmd-line-2);
  background: none; cursor: pointer; padding: 0; }
.cmd-check:hover, .cmd-check:focus-visible { border-color: var(--ember); box-shadow: 0 0 8px rgba(255, 106, 0, 0.4); }
.cmd-sheet-prose { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--cmd-text); overflow-wrap: anywhere; }
.cmd-sheet-append { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cmd-line); display: flex; flex-direction: column; gap: 8px; }
.cmd-sheet-append textarea { resize: vertical; min-height: 44px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cmd-line); border-radius: 6px; padding: 8px 10px; color: var(--cmd-text);
  font: 400 13px/1.5 var(--font-sans); outline: none; }
.cmd-sheet-append textarea:focus-visible { border-color: rgba(255, 106, 0, 0.6); }
.cmd-sheet .cmd-routine-led.live { background: var(--ember); box-shadow: 0 0 9px rgba(255, 106, 0, 0.9); }
@media (max-width: 1280px) { .cmd-sheet { bottom: calc(var(--tabbar-h) + 10px); } }

@media (prefers-reduced-motion: reduce) {
  .cmd-sats, .cmd-sat-chip { animation: none; }
  .cmd-panel, .cmd-brand, .cmd-orbit, .cmd-map-head, .cmd-map-field { animation: none; }
}

/* Below the HUD breakpoint the stage becomes an ordinary column: brand, orbit,
   panels in a grid. The orrery stays, smaller; the labels remain on hover. */
@media (max-width: 1280px) {
  #view:has(.cmd-stage) .view { padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); }
  .cmd-stage { overflow: visible; min-height: 0; padding: 20px 16px calc(20px + var(--tabbar-h)); }
  .cmd-brand { position: static; transform: none; margin-bottom: 8px; }
  .cmd-orbit { position: relative; inset: auto; height: min(92vw, 470px); margin: 0 auto 14px; }
  .cmd-col { position: static; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .cmd-col + .cmd-col { margin-top: 22px; }
  .cmd-col > :last-child { margin-top: 0; }
  .cmd-orb { position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + 14px); }
  .cmd-map-field { position: relative; inset: auto; height: min(96vw, 560px); margin: 0 auto; }
  .cmd-map-head { position: static; margin-bottom: 4px; }
  .cmd-map-head .cmd-sub { text-align: left; }
  .cmd-map-actions { position: static; margin-bottom: 10px; }
  .cmd-map-legendwrap { position: static; margin-top: 12px; }
}
@media (max-width: 640px) {
  .cmd-col { grid-template-columns: 1fr; }
  .cmd-orbit { height: min(96vw, 380px); }
  .cmd-band { display: none; }
  .cmd-sat-chip { width: 36px; height: 36px; left: -18px; top: -18px; }
  .cmd-sat-chip svg { width: 14px; height: 14px; }
  /* A phone-sized ring cannot seat all twenty-four; every other seat is enough,
     and the modules panel below still lists every destination. */
  .cmd-sats .cmd-sat:nth-child(even) { display: none; }
  .cmd-hexring .cmd-hexchip:nth-child(even) { display: none; }
  .cmd-clock { font-size: 28px; }
  .cmd-matrix { grid-template-columns: repeat(14, 1fr); }
  .cmd-band-label { letter-spacing: 0.2em; }
}