/* pi-cloud web UI — "Night Shift" theme (from the Claude Design mock).
   Mobile-first single screen (fleet ⇄ cockpit), two-pane at laptop widths, fluid on
   large displays: no fixed-width shell — the fleet pane scales with clamp() and the
   cockpit content column grows through stepped max-widths (see "wide screens" below).
   Deliberately framework-free: the theme is fully bespoke, so a responsive framework
   would fight these rules while adding a runtime dependency to a self-hosted tool. */

:root {
  --bg-page: #060705;
  --bg-app: #0b0d0a;
  --bg-panel: #0f120c;
  --bg-panel2: #0e110b;
  --bg-deep: #080a06;
  --bg-sheet: #0d100b;
  --bg-chip: #12150e;
  --bg-thinking-accent: #10150d;
  --fg: #d6dcc4;
  --fg-soft: #c9d1ac;
  --fg-mid: #a5ad90;
  --fg-out: #a9b391;
  --fg-thinking: #8a927a;
  --muted: #7d8470;
  --dim: #5c634d;
  --faint: #4a5140;
  --line: #21261a;
  --line2: #2a3021;
  --line-faint: #171b12;
  --amber: #e8a852;
  --amber-hi: #f2c076;
  --amber-line: #6b4d22;
  --green: #9db06d;
  --green-line: #3d472b;
  --red: #cf6748;
  --red-line: #4a2d22;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --disp: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #10130c 0%, var(--bg-page) 65%) fixed var(--bg-page);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); }
a:hover { color: var(--amber-hi); }
::selection { background: rgba(232, 168, 82, 0.3); }
input::placeholder, textarea::placeholder { color: var(--dim); }
button { font-family: inherit; }

@keyframes pcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes pcSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.pc-noscroll { scrollbar-width: none; }
.pc-noscroll::-webkit-scrollbar { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* drag-to-scroll gesture state (enableDragScroll in app.js): a grabbing cursor on
   the whole strip and no text selection while a mouse drag scrolls it */
.chips.dragging, .botgrid.dragging { cursor: grabbing; user-select: none; }
.chips.dragging *, .botgrid.dragging * { cursor: grabbing; }

/* themed scrollbars — slim amber-tinted thumb on a transparent track */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox (Chromium ignores ::-webkit-scrollbar once scrollbar-color is set,
   so only apply the standard properties where the webkit pseudos don't exist) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
}

/* ── app shell ─────────────────────────────────────────────── */
#app {
  height: 100dvh;
  display: flex;
  overflow: hidden;
  background: var(--bg-app);
}
.pane {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}
.pane-fleet { width: 100%; }
.pane-cockpit { width: 100%; display: none; }
#app[data-screen="cockpit"] .pane-fleet { display: none; }
#app[data-screen="cockpit"] .pane-cockpit { display: flex; }
/* Mission control is a full page, not a side panel: the fleet pane stays hidden at every
   width (the >=920px two-pane rule below only re-shows it for data-screen="cockpit"), and
   the fx-back button in the view header is the way home. */
#app[data-screen="factory"] .pane-fleet { display: none; }
#app[data-screen="factory"] .pane-cockpit { display: flex; }
/* Settings is a full-page screen (Amp-style): no fleet/run-list pane beside it, at any
   width — the cockpit column it lives in spans the whole page. */
#app[data-screen="settings"] .pane-fleet { display: none; }
#app[data-screen="settings"] .pane-cockpit { display: flex; }
.ck-empty { display: none; }

@media (min-width: 920px) {
  /* Fluid shell: the app spans the full viewport instead of a fixed 1320px centered
     column, and the fleet pane widens gently with the screen — 360px on a laptop,
     up to 460px on large displays. */
  .pane-fleet {
    width: clamp(360px, 24vw, 460px);
    flex: none;
    border-right: 1px solid var(--line);
  }
  .pane-cockpit { display: flex; flex: 1; min-width: 0; }
  #app[data-screen="cockpit"] .pane-fleet { display: flex; }
  /* … but settings stays full-page at desktop widths too: the two-pane rule above would
     otherwise re-show the fleet pane beside it. */
  #app[data-screen="settings"] .pane-fleet { display: none; }
  /* The run/bot back buttons are redundant on the desktop two-pane (the fleet stays
     visible). #st-back is NOT hidden: settings is full-page, so its back button is the
     only way back to the fleet. */
  #btn-back, #sk-back { display: none; }
  .ck-empty {
    flex: 1;
    display: grid;
    place-items: center;
    color: var(--faint);
  }
  .ck-empty-inner {
    display: grid;
    place-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .ck-empty-inner img { opacity: 0.5; }
  #ck-view:not([hidden]) ~ .ck-empty, #app.has-run .ck-empty { display: none; }
}

/* ── wide screens ────────────────────────────────────────────
   The cockpit content column keeps growing past the old 1320px shell cap, with a
   readability ceiling that rises in steps so it always uses most of the screen
   without text sprawling edge-to-edge on ultrawide monitors. Long-form prose gets
   its own ch-based measure cap. */
@media (min-width: 1600px) {
  .ck-body, .transcript { max-width: 1500px; margin-inline: auto; }
}
@media (min-width: 2400px) {
  .ck-body, .transcript { max-width: 1900px; }
}
@media (min-width: 3400px) {
  .ck-body, .transcript { max-width: 2400px; }
}
.report-body p, .report-body li, .report-body blockquote { max-width: 105ch; }
/* Harvested report images (the sanitizer only keeps IMGs pointing at /runs/<id>/report-assets/). */
.report-body img, .att-md img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.st-hint { max-width: 105ch; }
.t-text, .t-thinking-body { max-width: 120ch; }

/* ── shared buttons / fields ───────────────────────────────── */
.btn-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 6px;
}
.btn-primary {
  background: var(--amber);
  color: var(--bg-app);
  border: 1px solid var(--amber);
  cursor: pointer;
}
.btn-primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red-line);
  cursor: pointer;
}
.btn-danger:hover { background: rgba(207, 103, 72, 0.08); }
.btn-ghost { background: transparent; border: none; color: var(--amber); cursor: pointer; }
#btn-sheet-close.btn-ghost, .auth .btn-ghost { color: var(--muted); }
.btn-outline {
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--line2);
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--muted); }
.btn-outline-amber {
  color: var(--amber);
  border: 1px solid var(--amber-line);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn-outline-amber:hover { background: rgba(232, 168, 82, 0.08); }
.btn-merge {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green-line);
  cursor: pointer;
}
.btn-merge:hover { background: rgba(157, 176, 109, 0.10); }
.btn-merge:disabled { opacity: 0.5; cursor: default; }
.btn-merge.conflict {
  color: var(--red);
  border-color: var(--red-line);
}
.btn-merge.conflict:hover { background: rgba(207, 103, 72, 0.08); }
.field {
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg);
  caret-color: var(--amber);
  background: var(--bg-panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  outline: none;
}
.field:focus { border-color: var(--amber); }
.field-mono { font-family: var(--mono); font-size: 12px; }
.field-task { min-height: 76px; resize: none; padding: 10px 12px; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 12px 0 6px;
}
.form-error {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--red-line);
  border-radius: 5px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ── fleet ─────────────────────────────────────────────────── */
.fleet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 8px;
  padding-top: calc(14px + env(safe-area-inset-top));
  flex: none;
}
.logo-box {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--amber);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--amber);
}
.logo-text { flex: 1; min-width: 0; }
.logo-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.logo-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.link-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(157, 176, 109, 0.7);
}
.link-dot.down {
  background: var(--red);
  box-shadow: 0 0 8px rgba(207, 103, 72, 0.7);
  animation: pcPulse 1.3s ease-in-out infinite;
}
.chips {
  display: flex;
  gap: 5px;
  padding: 8px 16px 10px;
  overflow-x: auto;
  flex: none;
}
.chip {
  flex: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--line2);
  color: var(--fg-mid);
  background: var(--bg-chip);
}
.chip.off {
  border-color: var(--line-faint);
  color: var(--faint);
  background: transparent;
}
/* Project filter: a compact <select> that scopes the fleet's bots + runs to one repo. Sits
   between the bucket chips and the bot bay; hidden by app.js when there's <=1 project. */
.proj-filter {
  flex: none;
  padding: 0 16px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.proj-filter .proj-select { flex: 1; min-width: 0; }
/* mission control entry beside the project select (#factory-page) — compact, select-height */
.proj-factory { width: 30px; height: 29px; color: var(--muted); border: 1px solid var(--line2); border-radius: 3px; }
.proj-factory:hover { color: var(--amber); border-color: var(--amber-line); }
.proj-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-mid);
  background: var(--bg-chip);
  border: 1px solid var(--line2);
  border-radius: 3px;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a8f7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  text-overflow: ellipsis;
}
.proj-select:hover { border-color: var(--amber-line); }
.proj-select:focus { border-color: var(--amber); outline: none; }
.runlist {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 10px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.sec-label {
  padding: 14px 8px 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.run-row {
  display: flex;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  background: var(--bg-panel2);
  border: 1px solid var(--line-faint);
  margin-bottom: 6px;
}
.run-row:hover { border-color: var(--line2); }
.run-row.active { border-color: var(--amber-line); }
/* Terminal buckets (merged/done/failed/killed) = nothing left to do: fade the text so the
   row reads as settled at a glance. Only running and review rows still need the operator and
   stay at full strength. The outcome dot keeps its bucket color at full strength; the border
   stays put so the row still reads as clickable. Transition lives on the base rules so the
   fade animates in place when a run lands mid-session (the fleet reconciles rows, never
   rebuilds them). */
.run-row.merged .run-title, .run-row.done .run-title, .run-row.failed .run-title, .run-row.killed .run-title { color: var(--muted); }
.run-row.merged .run-meta, .run-row.done .run-meta, .run-row.failed .run-meta, .run-row.killed .run-meta { color: var(--dim); }
.run-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  margin-top: 7px;
}
.run-dot.live {
  box-shadow: 0 0 6px rgba(232, 168, 82, 0.7);
  animation: pcPulse 1.3s ease-in-out infinite;
}
.run-main { flex: 1; min-width: 0; }
.run-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .4s ease;
}
.run-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  transition: color .4s ease;
}
.run-meta .warn { color: var(--amber); }
.run-badge {
  align-self: center;
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--amber-line);
  border-radius: 3px;
  color: var(--amber);
}
.run-badge.conflict {
  border-color: var(--red-line);
  color: var(--red);
}
.run-chev { align-self: center; flex: none; color: var(--faint); }
.fleet-empty {
  padding: 40px 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
}
/* The "+N more" footnote under a fleet section: the chip/label is a whole-registry total but
   only the recent window's rows are listed (the rest aged out or live inside a bot card). Sits
   flush with the run rows as a quiet footnote — deliberately NOT the big centered empty-state,
   which reads as a broken gap when it appears between rows. */
.fleet-more {
  padding: 4px 10px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
/* The "+N more" part of the footnote is a hyperlink: clicking it pulls the next 5 runs of
   that bucket past the recency window (loadMoreBucket). While a fetch is in flight the link
   reads "loading…" and ignores clicks. */
.fleet-more a {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── profile tray (#profile): amp-style operator card, fleet bottom-left ── */
/* Hidden until /profile.json answers with a handle — the public profile is opt-in
   (PI_PROFILE_HANDLE); with it off the route 404s and the tray never renders. */
.profile-tray {
  position: relative;
  flex: none;
  padding: 8px 10px 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-faint);
}
.tray-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tray-row .profile-btn { flex: 1; min-width: 0; width: auto; }
/* The "newer commit available" pill: a small chip inside the profile button, immediately
   left of the caret, so it fits within the tray's single row. Hidden until GET /deploy's
   update check reports one; clicking opens #/settings (the DEPLOY LATEST panel). */
.update-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--amber);
  background: rgba(232, 168, 82, 0.08);
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  cursor: pointer;
  animation: update-pill-pulse 2.4s ease-in-out infinite;
}
.update-pill:hover { background: rgba(232, 168, 82, 0.16); border-color: var(--amber); }
@keyframes update-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 168, 82, 0.25); }
  50% { box-shadow: 0 0 8px 1px rgba(232, 168, 82, 0.12); }
}
/* Profile off (PI_PROFILE_HANDLE unset) but an update is available: the profile button is a
   bare shell carrying just the pill, so the pill alone keeps its old standalone look. */
.profile-tray.update-only .profile-avatar,
.profile-tray.update-only .profile-id,
.profile-tray.update-only .profile-caret { display: none; }
.profile-tray.update-only .profile-btn {
  pointer-events: none;
  background: none;
  border-color: transparent;
  min-height: 0;
  padding: 0;
}
.profile-tray.update-only .update-pill { pointer-events: auto; }
.profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--bg-panel2);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}
.profile-btn:hover { border-color: var(--line2); }
.profile-btn[aria-expanded="true"] { border-color: var(--amber-line); }
.profile-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
}
.profile-avatar svg { width: 100%; height: 100%; }
.profile-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-handle {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-caret { flex: none; color: var(--faint); }
.profile-pop {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% - 2px);
  z-index: 30;
  background: var(--bg-sheet);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 6px;
  animation: pcSheetUp 0.14s ease-out;
}
.profile-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-faint);
  margin-bottom: 4px;
}
.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 40px;
  border-radius: 5px;
  color: var(--fg-soft);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.profile-item:hover { background: var(--bg-chip); color: var(--fg); }
.profile-item-label { flex: 1; }
.profile-item-ext { color: var(--faint); }
button.profile-item {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
}

/* ── settings view (#/settings, from the profile tray) ─────── */
#st-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#st-view[hidden] { display: none; }
/* Full-page layout (Amp-style): a section nav — glyph + label per item — beside the active
   section's panel. Mobile-first: the nav is a horizontal strip above the scrolling content;
   at laptop widths it becomes a left sidebar and the panels scroll in their own column. */
.st-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.st-nav {
  flex: none;
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.st-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 7px 11px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.st-nav-item svg { flex: none; }
.st-nav-item:hover { color: var(--fg-soft); background: var(--bg-panel); }
/* the active section reads as a selected box (Amp's sidebar highlight), in the theme's amber */
.st-nav-item.on { color: var(--amber); background: var(--bg-panel); border-color: var(--line2); }
.st-nav-item:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.st-content { min-width: 0; }
.st-panel .ck-title { margin-bottom: 12px; }
@media (min-width: 920px) {
  .st-layout { flex-direction: row; }
  .st-nav {
    flex-direction: column;
    width: 216px;
    gap: 2px;
    padding: 16px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
}
.st-card {
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 12px;
}
.st-row {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
}
.st-row[hidden] { display: none; }
.st-k {
  flex: none;
  width: 110px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 1px;
}
.st-v { flex: 1; min-width: 0; word-break: break-all; color: var(--fg-soft); }
.st-v.amber { color: var(--amber); }
.st-v.green { color: var(--green); }
.st-v.red { color: var(--red); }
.st-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.st-hint code { font-family: var(--mono); font-size: 10.5px; color: var(--fg-soft); }
/* completion-bell toggle (settings view NOTIFICATIONS panel): the sheet's checkbox look,
   laid out as an inline row the operator clicks anywhere on. */
.st-bell-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--fg-soft);
}
.st-bell-line:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; border-radius: 3px; }
/* bell preview button: small play icon next to the toggle, rings the chime on demand. */
.st-bell-wrap { display: inline-flex; align-items: center; gap: 10px; }
.st-bell-preview {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.st-bell-preview:hover { color: var(--amber); border-color: var(--amber); }
.st-bell-preview:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
/* The deploy CTA is the settings page's primary action: same shape/typography as the
   app's other full-width CTAs (.dispatch) — bare .btn-primary would render as a square,
   UA-font button off-theme. */
.st-deploy-btn {
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: 6px;
}
.st-deploy-btn:disabled { opacity: 0.5; cursor: default; }
#st-status { margin-top: 14px; }
#st-status[hidden] { display: none; }
.st-status-line {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border: 1px solid var(--line-faint);
  border-radius: 6px;
}
.st-status-line.amber { border-color: var(--amber-line); color: var(--amber); }
.st-status-line.green { border-color: var(--green-line); color: var(--green); }
.st-status-line.red { border-color: var(--red-line); color: var(--red); }
.st-log {
  margin: 8px 0 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  padding: 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-soft);
  white-space: pre-wrap;
  word-break: break-all;
}
/* secrets panel (settings view): name rows + the add form. Values never render (write-only). */
.st-secret-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
}
.st-secret-row .st-secret-name { font-family: var(--mono); color: var(--fg-soft); word-break: break-all; }
.st-secret-row .st-secret-when { flex: 1; min-width: 0; color: var(--muted); font-size: 11px; text-align: right; }
.st-secret-del {
  flex: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
}
.st-secret-del:hover { color: var(--red); }
.st-secret-form { display: flex; gap: 8px; margin-top: 10px; }
.st-secret-form .field { flex: 1; min-width: 0; height: 30px; padding: 4px 8px; font-size: 12px; }
/* ADD sits inline with the 30px form fields: same compact mono/rounded idiom as the
   app's other small buttons (chips, inline-editor SAVE/CANCEL), not a UA-default block. */
.st-secret-form .btn-primary {
  flex: none;
  margin: 0;
  height: 30px;
  padding: 0 16px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.st-secret-form .btn-primary:disabled { opacity: 0.5; cursor: default; }

/* GitHub panel (settings view): one row per recorded App installation — account, coverage,
   Manage-on-GitHub link, forget button. Same row rhythm as the SECRETS panel. */
.st-gh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
}
.st-gh-row .st-gh-name { font-family: var(--mono); color: var(--fg-soft); word-break: break-all; }
.st-gh-row .st-gh-cov { flex: 1; min-width: 0; color: var(--muted); font-size: 11px; text-align: right; }
.st-gh-manage { flex: none; color: var(--accent, #e8b34b); font-size: 11px; text-decoration: none; }
.st-gh-manage:hover { text-decoration: underline; }
#btn-gh-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#btn-gh-add svg { flex: none; }
#st-secrets-status { margin-top: 10px; }
#st-secrets-status[hidden] { display: none; }
#st-secrets-empty[hidden] { display: none; }

/* ── usage view (#/usage, from the profile tray) ──────────── */
#ug-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#ug-view[hidden] { display: none; }
#ug-status-line { margin: 10px 0 0; }
#ug-status-line[hidden] { display: none; }
#ug-cards {
  /* auto-fit grid: a single column on narrow panes, reflowing to as many ~420px
     columns as the cockpit has room for on wide screens */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
  gap: 10px;
  margin-top: 12px;
}
.ug-card {
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 12px;
}
.ug-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ug-name {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.ug-spec {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.ug-window { margin-top: 10px; }
.ug-window-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.ug-window-label { color: var(--muted); }
.ug-window-nums { color: var(--fg-soft); }
.ug-window-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.ug-card .banner { margin-top: 8px; }
.ug-console-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ug-console-link:hover { border-bottom-color: var(--amber); }
.bar-fill.red { background: var(--red); }

/* ── release notes view (#/release-notes, from the profile tray) ── */
#rn-status-line { margin: 10px 0 0; }
#rn-status-line[hidden] { display: none; }
.rn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0 4px;
  font-family: var(--mono);
  font-size: 11px;
}
.rn-deploy-range { font-weight: 600; letter-spacing: 0.03em; color: var(--fg-soft); }
.rn-deploy-range.green { color: var(--green); }
.rn-deploy-range.red { color: var(--red); }
.rn-deploy-range.amber { color: var(--amber); }
.rn-deploy-when { color: var(--muted); }
.rn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px;
}
.rn-commit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--bg-panel2);
  border: 1px solid var(--line-faint);
}
.rn-sha {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--amber);
  margin-top: 1px;
}
.rn-main { flex: 1; min-width: 0; }
.rn-subject {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.rn-by {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.rn-empty {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* ── fleet bay: scheduled tasks as pixel robots ─────────────── */
.botbay {
  flex: none;
  padding: 0 10px;
  border-bottom: 1px solid var(--line-faint);
}
.botbay .sec-label { padding-top: 6px; }
.botgrid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
}
.bot-card {
  position: relative;
  flex: none;
  width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-panel2);
  border: 1px solid var(--line-faint);
}
.bot-card:hover { border-color: var(--line2); }
.bot-card.active { border-color: var(--amber-line); }
.bot-card.no-run { cursor: default; }
.bot-avatar {
  position: relative;   /* anchor for the snooze overlay (.bot-snooze) */
  background: var(--bg-deep);
  border-radius: 6px;
  padding: 8px;
  line-height: 0;
}
.bot-avatar svg { display: block; overflow: visible; image-rendering: pixelated; }
.bot-name {
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Prompt ticker under the bot name: small dim text, one-way right-to-left marquee. The
   ticker is a query container so the span can start fully past the right edge (100cqw) and
   travel left until it clears the left edge (-100%), then loop — the wrap jump happens
   off-screen, so the motion reads as continuous. Duration comes from --ticker-dur, set per
   prompt in app.js from the text length, so every card scrolls at the same readable speed
   no matter how long the prompt is. The span is mutated in place when the prompt changes,
   keeping the element (and its animation) alive, matching the reconcile-in-place cards. */
.bot-ticker {
  align-self: stretch;
  overflow: hidden;
  white-space: nowrap;
  container-type: inline-size;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.bot-ticker > span {
  display: inline-block;
  animation: pcBotTicker var(--ticker-dur, 12s) linear infinite;
}
.bot-card:hover .bot-ticker > span { animation-play-state: paused; }
@keyframes pcBotTicker {
  from { transform: translateX(100cqw); }
  to { transform: translateX(-100%); }
}
.bot-meta {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.bot-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--dim);
}
.bot-dot.live {
  box-shadow: 0 0 6px rgba(232, 168, 82, 0.7);
  animation: pcPulse 1.3s ease-in-out infinite;
}
.bot-eta { color: var(--dim); }
.bot-card.paused { opacity: 0.7; }
.bot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--amber);
  color: var(--bg-app);
}

/* ── schedule detail view (the bot's home) ─────────────────── */
#sk-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#sk-view[hidden] { display: none; }
.sk-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sk-avatar {
  position: relative;   /* anchor for the snooze overlay (.bot-snooze) */
  flex: none;
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 10px;
  line-height: 0;
}
.sk-avatar svg { display: block; overflow: visible; image-rendering: pixelated; }
.sk-hero-main { flex: 1; min-width: 0; }
/* Prompt panel: the bot's prompt is content, not identity — the callsign is the hero title and
   the prompt gets its own labeled block. Collapsed it clamps to three lines (line-clamp keeps
   the ellipsis honest for multi-line text); MORE/LESS (app.js) toggles .expanded, which shows
   the full text in a scroll port. pre-wrap preserves the prompt's own line breaks. */
.sk-prompt {
  margin-top: 12px;
  padding: 8px 12px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sk-prompt-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sk-prompt-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.sk-prompt-more {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: none;
}
.sk-prompt-more:hover { color: var(--amber); border-color: var(--amber-line); }
.sk-prompt-head .ck-prompt-edit { width: 22px; height: 22px; }
.sk-prompt-text {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sk-prompt-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-prompt-text.expanded {
  max-height: min(46vh, 480px);
  overflow-y: auto;
}
.sk-editor { margin-top: 10px; }
.sk-editor .field-task { min-height: 64px; font-family: var(--mono); font-size: 12px; }
.sk-meta {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
#sk-runs { padding-bottom: 8px; }
.crumb-bot { color: var(--amber); cursor: pointer; white-space: nowrap; }
.crumb-bot:hover { color: var(--amber-hi); }

/* avatar motion (see /ui/avatars.js — durations/delays are per-seed CSS vars) */
@keyframes pcAvBob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.av-bob-slow { animation: pcAvBob var(--bob-dur, 2.6s) ease-in-out var(--bob-delay, 0s) infinite alternate; }
.av-bob-fast { animation: pcAvBob calc(var(--bob-dur, 2.6s) / 3) ease-in-out var(--bob-delay, 0s) infinite alternate; }
@keyframes pcAvBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.av-bounce { animation: pcAvBounce 0.7s ease-in-out infinite; }
@keyframes pcAvPulse { from { opacity: 1; } to { opacity: 0.45; } }
.av-pulse-slow { animation: pcAvPulse var(--pulse-dur, 2s) ease-in-out infinite alternate; }
.av-pulse-fast { animation: pcAvPulse calc(var(--pulse-dur, 2s) / 3) ease-in-out infinite alternate; }
@keyframes pcAvBoot { 0%, 40% { opacity: 0.15; } 60%, 100% { opacity: 1; } }
.av-boot { animation: pcAvBoot 1.3s steps(2, jump-none) var(--boot-delay, 0s) infinite; }
@keyframes pcAvFlicker {
  0%, 100% { opacity: 1; } 8% { opacity: 0.2; } 12% { opacity: 1; }
  38% { opacity: 0.3; } 44% { opacity: 1; } 70% { opacity: 0.15; } 76% { opacity: 1; }
}
.av-flicker { animation: pcAvFlicker 1.6s linear infinite; }

/* Snooze overlay for sleeping bots (between runs / paused — see BOT_SLEEP in app.js) — ZzZz
   drifting up from the robot's head like the 😴 emoji (element built in app.js, buildSnooze;
   shown on the fleet card AND the bot's home). The container is a zero-box pinned inside
   the avatar tile's top-right corner so the trail overlaps the bot a little, above the
   head; the three z's rise one after another on a shared loop (staggered by a third of the
   cycle) and grow as they fade, smallest nearest the head. --snooze-delay is a per-seed
   jitter from app.js so a bay of sleeping bots doesn't breathe in unison. */
.bot-snooze {
  position: absolute;
  top: 12px;  /* pulled inside the avatar tile so the ZzZz overlaps the bot a little more */
  right: 8px;
  width: 0;
  height: 0;
  pointer-events: none;
}
.bot-snooze span {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--mono);
  font-weight: 900;
  line-height: 1;
  color: var(--fg-soft);
  opacity: 0;
  animation: pcSnooze 2.7s ease-in-out infinite;
}
.bot-snooze span:nth-child(1) { font-size: 9px; animation-delay: var(--snooze-delay, 0s); }
.bot-snooze span:nth-child(2) { font-size: 12px; animation-delay: calc(var(--snooze-delay, 0s) + 0.9s); }
.bot-snooze span:nth-child(3) { font-size: 15px; animation-delay: calc(var(--snooze-delay, 0s) + 1.8s); }
@keyframes pcSnooze {
  0%   { opacity: 0; transform: translate(0, 3px) scale(0.7); }
  25%  { opacity: 0.9; }
  65%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(6px, -13px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .av-bob-slow, .av-bob-fast, .av-bounce, .av-pulse-slow, .av-pulse-fast, .av-boot, .av-flicker,
  .bot-ticker > span {
    animation: none;
  }
  /* The snooze trail still reads as ZzZ — three static z's stacked above the head. */
  .bot-snooze span { animation: none; opacity: 0.75; }
  .bot-snooze span:nth-child(2) { transform: translate(5px, -9px); }
  .bot-snooze span:nth-child(3) { transform: translate(10px, -18px); }
}

/* ── cockpit ───────────────────────────────────────────────── */
.ck-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  flex: none;
}
#ck-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#ck-view[hidden] { display: none; }
.ck-crumb-wrap { flex: 1; min-width: 0; }
.ck-crumb {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 3px;
  align-self: center;
  flex: none;
  border: 1px solid var(--line2);
  color: var(--fg-mid);
}
.tag.running { border-color: var(--amber-line); color: var(--amber); background: rgba(232, 168, 82, 0.08); }
.tag.review { border-color: var(--amber); color: var(--bg-app); background: var(--amber); }
.tag.merged { border-color: var(--green-line); color: var(--green); background: rgba(157, 176, 109, 0.08); }
.tag.failed { border-color: var(--red-line); color: var(--red); background: rgba(207, 103, 72, 0.08); }
.tag.killed { color: var(--muted); }
.ck-scroll { flex: 1; overflow-y: auto; min-height: 0; }
/* Pinned prompt bar: sits between the head and the scroll port, so the run's prompt stays
   fixed/visible at the top of the detail page no matter how far the transcript scrolls. */
.ck-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  flex: none;
}
.ck-prompt[hidden] { display: none; }
.ck-prompt-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  flex: none;
}
.ck-prompt-text {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Click-to-expand: a long prompt stops being an unreadable single line — the chevron (or the
   text itself) toggles .expanded, which unwraps to the full prompt in a scroll port. */
.ck-prompt-text.overflowing { cursor: pointer; }
.ck-prompt-text.expanded {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  text-overflow: clip;
  max-height: min(40vh, 420px);
  cursor: pointer;
}
.ck-prompt.expanded { align-items: flex-start; }
.ck-prompt.expanded .ck-prompt-label { padding-top: 2px; }
.ck-prompt-edit {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--muted);
}
.ck-prompt-edit:hover { color: var(--amber); }
.ck-prompt-editor {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  flex: none;
}
.ck-prompt-editor[hidden] { display: none; }
.ck-prompt-editor .field-task { min-height: 64px; font-family: var(--mono); font-size: 12px; }
.ck-prompt-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ck-prompt-hint {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}
.ck-prompt-editor-row button {
  padding: 7px 14px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  flex: none;
}
.ck-body { padding: 14px 16px 0; }
.ck-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 1120px) { .stats { grid-template-columns: repeat(4, 1fr); } }
/* Schedule view carries five stats (the generic 4-col rule above would orphan the fifth):
   one 5-cell row on wide screens; on the 2-col mobile grid the last cell (RUNS, with its
   cost sub-row) spans full width instead of sitting alone on a half-row. */
.sk-stats .stat:last-child { grid-column: 1 / -1; }
@media (min-width: 1120px) {
  .sk-stats { grid-template-columns: repeat(5, 1fr); }
  .sk-stats .stat:last-child { grid-column: auto; }
}
.stat {
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}
.stat-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.stat-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.stat-value.amber { color: var(--amber); }
.stat-click { cursor: pointer; }
.stat-click:hover { color: var(--amber); }
.sk-cadence-editor { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.sk-cadence-editor[hidden] { display: none; }
.sk-cadence-editor .field { min-height: 0; height: 30px; padding: 4px 8px; font-size: 12px; }
.sk-cadence-row { display: flex; gap: 6px; }
.sk-cadence-row button {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.sk-model-editor { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.sk-model-editor[hidden] { display: none; }
.sk-model-editor .field { min-height: 0; height: 30px; padding: 4px 8px; font-size: 12px; }
.sk-model-row { display: flex; gap: 6px; }
.sk-model-row button {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
/* Thinking level editor — same inline-editor shape as the model editor above. */
.sk-thinking-editor { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.sk-thinking-editor[hidden] { display: none; }
.sk-thinking-editor .field { min-height: 0; height: 30px; padding: 4px 8px; font-size: 12px; }
.sk-thinking-row { display: flex; gap: 6px; }
.sk-thinking-row button {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.stat-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 4px;
}
.bar { height: 3px; background: var(--line); margin-top: 6px; }
.bar-fill { height: 100%; width: 0; }
.bar-fill.amber { background: var(--amber); }
.bar-fill.green { background: var(--green); }
.stat-now {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  min-width: 0;
}
.now-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(232, 168, 82, 0.8);
  animation: pcPulse 1.3s ease-in-out infinite;
}
.now-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-idle { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 12.5px;
  background: var(--bg-panel2);
  border: 1px solid var(--line2);
  color: var(--fg-mid);
}
.banner.review { border-color: var(--amber-line); color: var(--amber); }
.banner.merged { border-color: var(--green-line); color: var(--green); }
.banner.failed { border-color: var(--red-line); color: var(--red); }
.report {
  margin-top: 10px;
  background: var(--bg-thinking-accent);
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 12px 14px;
}
.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.report-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--green);
}
.report-toggle {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green-line);
  border-radius: 4px;
  cursor: pointer;
}
.report-toggle:hover { background: rgba(157, 176, 109, 0.08); }
.report-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.report-task { display: inline-flex; align-items: center; gap: 5px; }
.report-body {
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: var(--fg-soft);
}
/* raw mode: the untouched markdown source, monospace, no rendered-element styling */
.report-body.raw {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--fg-mid);
}
/* rendered-markdown (marked, sanitized) element styles */
.report-body > :first-child { margin-top: 0; }
.report-body > :last-child { margin-bottom: 0; }
.report-body h1, .report-body h2, .report-body h3,
.report-body h4, .report-body h5, .report-body h6 {
  font-family: var(--disp);
  color: var(--fg);
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
  line-height: 1.3;
}
.report-body h1 { font-size: 16px; }
.report-body h2 { font-size: 14.5px; }
.report-body h3 { font-size: 13px; }
.report-body h4, .report-body h5, .report-body h6 { font-size: 12px; }
.report-body p { margin: 7px 0; }
.report-body ul, .report-body ol { margin: 7px 0; padding-left: 22px; }
.report-body li { margin: 2px 0; }
.report-body li > ul, .report-body li > ol { margin: 2px 0; }
.report-body code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 1px 4px;
}
.report-body pre {
  margin: 8px 0;
  padding: 9px 11px;
  background: var(--bg-deep);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  overflow-x: auto;
}
.report-body pre code { background: none; border: none; padding: 0; font-size: 11.5px; }
.report-body blockquote {
  margin: 8px 0;
  padding: 2px 12px;
  border-left: 3px solid var(--green-line);
  color: var(--fg-mid);
}
.report-body hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.report-body table { border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.report-body th, .report-body td {
  border: 1px solid var(--line2);
  padding: 4px 9px;
  text-align: left;
}
.report-body th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-mid); background: var(--bg-deep); }
.report-body del { color: var(--muted); }

/* ── run attachments (cockpit) ─────────────────────────────── */
.atts {
  margin-top: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 12px 14px;
}
.atts-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 8px;
}
.atts-list { display: flex; flex-direction: column; gap: 8px; }
.att {
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  background: var(--bg-deep);
  overflow: hidden;
}
.att-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-faint);
}
.att-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.att-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim);
  white-space: nowrap;
}
.att-body {
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-soft);
  max-height: 420px;
  overflow: auto;
}
.att-img { display: block; max-width: 100%; max-height: 380px; border-radius: 4px; }
.att-pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg-mid);
}
/* rendered markdown reuses the report element styles where possible */
.att-md > :first-child { margin-top: 0; }
.att-md > :last-child { margin-bottom: 0; }
.att-md h1, .att-md h2, .att-md h3, .att-md h4, .att-md h5, .att-md h6 {
  font-family: var(--disp);
  color: var(--fg);
  letter-spacing: 0.04em;
  margin: 12px 0 5px;
  line-height: 1.3;
}
.att-md h1 { font-size: 15px; }
.att-md h2 { font-size: 13.5px; }
.att-md h3 { font-size: 12.5px; }
.att-md h4, .att-md h5, .att-md h6 { font-size: 12px; }
.att-md p { margin: 6px 0; }
.att-md ul, .att-md ol { margin: 6px 0; padding-left: 22px; }
.att-md li { margin: 2px 0; }
.att-md code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 1px 4px;
}
.att-md pre {
  margin: 7px 0;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  overflow-x: auto;
}
.att-md pre code { background: none; border: none; padding: 0; }
.att-md blockquote { margin: 7px 0; padding: 2px 12px; border-left: 3px solid var(--line2); color: var(--fg-mid); }
.att-md hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }
.att-md table { border-collapse: collapse; margin: 7px 0; font-size: 12px; }
.att-md th, .att-md td { border: 1px solid var(--line2); padding: 4px 9px; text-align: left; }
.att-md th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--fg-mid); }

/* ── new-run sheet: attach control ─────────────────────────── */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-chips:empty { margin-top: 0; }
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mid);
  background: var(--bg-chip);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 3px 5px 3px 8px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.att-chip-x {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 10px;
  cursor: pointer;
  padding: 1px 3px;
}
.att-chip-x:hover { color: var(--red); }

/* ── transcript ────────────────────────────────────────────── */
.transcript { padding: 6px 16px 18px; }
.t-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}
.t-phase-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
}
.t-phase-rule { flex: 1; height: 1px; background: var(--line); }
.t-thinking { margin: 8px 0; }
.t-thinking summary {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  min-height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.t-thinking summary::-webkit-details-marker { display: none; }
.t-thinking-body {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--fg-thinking);
  padding: 4px 0 0 12px;
  border-left: 1px solid var(--line2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.t-text {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 11px 0;
  color: var(--fg);
  text-wrap: pretty;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.t-log {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.t-steer-wrap { display: flex; justify-content: flex-end; margin: 10px 0; }
.t-steer {
  max-width: 85%;
  background: rgba(232, 168, 82, 0.08);
  border: 1px solid var(--amber-line);
  border-radius: 5px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber);
  overflow-wrap: anywhere;
}
.t-steer.pending { opacity: 0.55; }
.t-steer-label {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 3px;
  opacity: 0.7;
}
.t-tool {
  margin: 5px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-panel2);
}
.t-tool summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.t-tool summary::-webkit-details-marker { display: none; }
.t-tool-icon {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid var(--line2);
  color: var(--fg-mid);
}
.t-tool-icon.edit { border-color: var(--green-line); color: var(--green); }
.t-tool-label {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-tool-err {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border: 1px solid var(--red-line);
  border-radius: 3px;
  color: var(--red);
}
.t-tool-live {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.t-tool-live .now-dot { width: 6px; height: 6px; }
.t-tool-ms {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
}
.t-tool-out {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--fg-out);
  overflow-x: auto;
  white-space: pre;
}

/* ── cockpit footer ────────────────────────────────────────── */
.ck-foot {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--bg-sheet);
  padding: 10px 12px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.foot-row { display: flex; gap: 8px; }
.foot-row[hidden] { display: none; }
.steer-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  caret-color: var(--amber);
  background: var(--bg-panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  outline: none;
}
.steer-input:focus { border-color: var(--amber); }
#btn-steer, #btn-kill, #btn-delete, #btn-session { width: 48px; height: 44px; }
.foot-main {
  flex: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 6px;
}
.foot-main[hidden] { display: none; }

/* dispatch-grant toggle on the bot detail footer — amber-lit while the grant is on */
#sk-dispatch.on {
  color: var(--amber);
  border-color: var(--amber-line);
  background: rgba(232, 168, 82, 0.08);
}

/* ── new-run sheet ─────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(4, 5, 3, 0.72);
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  background: var(--bg-sheet);
  border: 1px solid var(--line2);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 12px 16px 30px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
  animation: pcSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 92dvh;
  overflow-y: auto;
}
@media (min-width: 920px) {
  .sheet-backdrop { justify-content: center; align-items: center; }
  .sheet {
    width: min(720px, calc(100vw - 32px));
    border-bottom: 1px solid var(--line2);
    border-radius: 12px;
    padding-bottom: 24px;
  }
  .sheet-grab { display: none; }
}
.sheet-grab {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line2);
  margin: 0 auto 10px;
}
.sheet-head { display: flex; align-items: center; gap: 8px; }
.sheet-title {
  flex: 1;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.03em;
}
.checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid #3a4230;
  color: transparent;
}
.checkbox.on {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--bg-app);
}
.dispatch {
  width: 100%;
  min-height: 48px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: 6px;
  margin-top: 12px;
}
.dispatch:disabled { opacity: 0.5; cursor: default; }

/* ── new-run composer ────────────────────────────────────────
   The NEW RUN sheet is a composer card (prompt-as-hero + one footer row of value-chips with
   popovers), not a stacked settings form: the TASK textarea is the tallest element and every
   setting collapses into a chip showing only its current value — dim at default, amber-lit
   when overridden (Amp's non-default tint) — so the whole card fits above the fold with no
   scroll and DISPATCH never drops below it. */
.composer-hero { position: relative; margin-top: 12px; }
.composer-task {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px 44px;   /* the attach button + attachment chips ride the bottom edge */
  font-size: 14px;
  line-height: 1.55;
}
.composer-atts {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.composer-atts .att-chips { flex: 1; min-width: 0; margin-top: 0; }
.composer-attach {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
}
.composer-attach:hover { color: var(--amber); border-color: var(--amber-line); }
.composer-foot {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.composer-chips {
  flex: 1;
  min-width: min(100%, 300px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.chip-wrap { position: relative; }
.chip {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  border: 1px solid var(--line2);
  color: var(--muted);
  background: transparent;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip:hover { color: var(--fg-soft); border-color: var(--faint); }
.chip.lit {   /* an override of the default — the operator sees the deviation at a glance */
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(232, 168, 82, 0.1);
}
.chip.dim { color: var(--dim); border-style: dashed; }
.chip-toggle { display: inline-flex; align-items: center; gap: 7px; user-select: none; }
.chip-toggle .checkbox { width: 13px; height: 13px; font-size: 9px; }
.chip-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 35;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-sheet);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  animation: pcSheetUp 0.14s ease-out;
}
.chip-pop-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 4px 6px 6px;
}
.chip-pop-input { min-height: 34px; margin-bottom: 4px; }
.chip-opt {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-opt:hover { background: var(--bg-chip); color: var(--fg); }
.chip-opt.on { color: var(--amber); }
/* Repo picker rows: name left, single-tone padlock glyph pinned right, names stay aligned. */
.chip-opt.with-suffix { display: flex; align-items: center; gap: 8px; }
.chip-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-opt-suffix { flex: none; display: inline-flex; align-items: center; opacity: 0.8; }
.chip-pop-empty { padding: 8px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); }
#f-repo-gh { margin-top: 6px; border-top: 1px solid var(--line2); padding-top: 4px; }
.composer-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.composer-kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
}
.dispatch-pill {
  min-height: 38px;
  padding: 0 20px;
  border-radius: 19px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.dispatch-pill:disabled { opacity: 0.5; cursor: default; }

/* ── confirm dialog + toast ──────────────────────────────────
   In-theme replacements for native confirm()/alert(): the confirm modal reuses the
   sheet/backdrop primitives (bottom sheet on phones, centered card at desktop widths)
   and error feedback surfaces as a toast. Native dialogs freeze the tab, ignore the
   theme and render as OS chrome on mobile. */
.confirm-sheet { padding: 12px 16px 16px; }
@media (min-width: 920px) {
  .confirm-sheet { width: 400px; padding-bottom: 16px; }
}
.confirm-body {
  margin: 10px 0 16px;
  color: var(--fg-mid);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-btn {
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 6px;
}
.btn-danger-solid {
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--bg-page);
  cursor: pointer;
}
.btn-danger-solid:hover { background: #d97e5f; border-color: #d97e5f; }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(600px, calc(100vw - 24px));
  padding: 10px 14px;
  background: var(--bg-sheet);
  border: 1px solid var(--red-line);
  border-radius: 8px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  animation: pcToastIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
@keyframes pcToastIn {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ── auth ──────────────────────────────────────────────────── */
.auth {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 0%, #10130c 0%, var(--bg-page) 65%) var(--bg-page);
}
.auth[hidden] { display: none; }
.auth-card {
  width: min(380px, 100%);
  background: var(--bg-sheet);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 20px;
}
.auth-head { display: flex; align-items: center; gap: 10px; }

/* ── mission control (#factory-page, #/factory/<slug>) ─────────
   The per-project factory view: pipeline flow, outcome KPIs, chart cards, duty roster, live
   feed. Ported from the Claude Design mock's redesign/factory.css — additive .fx-* classes on
   the same var contract, dependency-free inline SVG charts like the rest of the app. The mock
   was a fixed 1600px frame; here the grids auto-fit and the flow row scrolls sideways on
   narrow screens instead of breaking. */
/* Same flex-column sizing as the other cockpit views: without it the .ck-scroll scroll port
   never constrains (parent grows with content) and the page clips instead of scrolling. */
#fx-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#fx-view[hidden] { display: none; }
/* Labeled back button — mission control hides the fleet pane, so this is the way home and
   reads as navigation, not a stray chevron. */
#fx-back { width: auto; padding-inline: 10px; display: flex; align-items: center; gap: 3px; }
#fx-back .fx-back-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted); }
#fx-back:hover .fx-back-label, #fx-back:focus-visible .fx-back-label { color: var(--fg); }
.fx-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.fx-row-label { padding: 8px 0 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.fx-row-label::after { content: ""; flex: 1; height: 1px; background: var(--line-faint); }

/* pipeline flow: side panels + numbered stage cards joined by connectors. The strip is
   sized to always fit the pane when there's real room — fluid side panels, wrapping
   stage heads, tight minimums — and the container query below reflows it into a vertical
   stepper when there isn't, so it never scrolls sideways or clips text. */
.fx-flow { display: flex; align-items: stretch; overflow-x: auto; }
.fx-side { width: 186px; flex: 0 1 auto; min-width: 140px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.fx-side-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--muted); }
.fx-side-big { font-family: var(--disp); font-weight: 600; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-stage { flex: 1; min-width: 132px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
/* metric rows group: invisible in the horizontal strip (contents join the card's column
   flex exactly as bare rows did), a wrapping inline row in the vertical stepper. */
.fx-metrics { display: contents; }
.fx-link { flex: none; width: 20px; display: grid; place-items: center; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.fx-stage-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; min-width: 0; }
.fx-stage-num { flex: none; font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--bg-app); background: var(--amber); border-radius: 2px; padding: 1px 5px; }
.fx-stage-name { font-family: var(--disp); font-weight: 600; font-size: 12.5px; letter-spacing: 0.05em; color: var(--fg); white-space: nowrap; }
.fx-stage-bots { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.fx-m { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; line-height: 1.6; min-width: 0; }
.fx-m-k { flex: none; color: var(--muted); letter-spacing: 0.05em; white-space: nowrap; }
.fx-m-v { color: var(--fg-soft); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* side panels: a long value (the deploy line) drops to its own line and wraps at word
   boundaries before it ever truncates */
.fx-side .fx-m { flex-wrap: wrap; }
.fx-side .fx-m-v { white-space: normal; }
.fx-m-v.amber { color: var(--amber); }
.fx-m-v.green { color: var(--green); }
.fx-m-v.red { color: var(--red); }

/* outcome KPI strip — "measure outcomes, not tokens" */
.fx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fx-kpi { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 11px 14px 12px; min-width: 0; }
.fx-kpi-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--muted); }
.fx-kpi-value { font-family: var(--disp); font-weight: 600; font-size: 26px; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fx-kpi-value.amber { color: var(--amber); }
.fx-kpi-sub { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 3px; }

/* analytics cards: big number + delta + area sparkline + axis + note */
.fx-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fx-chart { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 9px; min-width: 0; }
.fx-chart-head { display: flex; align-items: center; gap: 8px; }
.fx-chart-title { flex: 1; min-width: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-delta { flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 600; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--green-line); color: var(--green); }
.fx-delta.warn { border-color: var(--amber-line); color: var(--amber); }
.fx-chart-big { font-family: var(--disp); font-weight: 600; font-size: 21px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fx-chart svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.fx-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; color: var(--faint); margin-top: 3px; }
.fx-note { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em; color: var(--dim); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* automations on duty: the fleet's pixel bots, each with a stage assignment */
.fx-duty { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.fx-bot { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px; background: var(--bg-panel2); border: 1px solid var(--line-faint); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.fx-bot:hover { border-color: var(--line2); }
.fx-bot-av { flex: none; background: var(--bg-deep); border-radius: 5px; padding: 4px; line-height: 0; }
.fx-bot-main { flex: 1; min-width: 0; }
.fx-bot-name { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bot-meta { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bot-stage { flex: none; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; padding: 2px 6px; border: 1px solid var(--line2); border-radius: 3px; color: var(--fg-mid); }
.fx-bot-stage.hot { border-color: var(--amber-line); color: var(--amber); }

/* Narrow panes (split windows, high zoom, phones): the pipeline reflows into a vertical
   stepper — full-width cards keeping SIGNAL→SHIP order, metrics flowing inline, the ▸
   connectors rotated to point down. Keyed on the cockpit pane's own width (not the
   device's) so it reacts to whatever space the view actually has. 1100px is the point
   below which the horizontal strip can no longer honor its minimum card sizes. */
#fx-view .ck-scroll { container-type: inline-size; }
@container (max-width: 1100px) {
  .fx-flow { flex-direction: column; overflow-x: visible; }
  .fx-link { width: auto; height: 18px; transform: rotate(90deg); }
  .fx-side, .fx-stage { width: auto; flex: none; min-width: 0; }
  .fx-metrics { display: flex; flex-wrap: wrap; gap: 2px 22px; }
  .fx-side svg { max-width: 300px; }
  .fx-deploy-bars { max-width: 300px; }
}

/* live flow feed: recent pipeline events, two-up (one column on narrow screens) */
.fx-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.fx-ev { display: flex; align-items: center; gap: 9px; min-height: 34px; font-family: var(--mono); font-size: 10.5px; min-width: 0; }
.fx-ev-t { flex: none; color: var(--dim); }
.fx-ev-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.fx-ev-x { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-soft); }
.fx-ev-x .dim { color: var(--muted); }
.fx-ev-id { flex: none; color: var(--amber); }
.fx-empty { font-family: var(--mono); font-size: 10.5px; color: var(--dim); padding: 4px 0; }
@media (max-width: 900px) { .fx-feed { grid-template-columns: 1fr; } }

/* out-side panel: one bar per series bucket */
.fx-deploy-bars { display: flex; gap: 3px; align-items: flex-end; height: 40px; margin-top: 4px; }
.fx-deploy-bars span { flex: 1; background: var(--green); opacity: 0.7; border-radius: 1px; min-height: 2px; }
.fx-deploy-bars span.none { background: var(--line); opacity: 1; }

/* signal-side sparkline sits at the panel foot like the mock */
.fx-side svg { display: block; width: 100%; height: auto; margin-top: auto; }