/* ===========================================================================
   Hatchbot design system — Roost (dark, default) + Daybreak (light).
   Tokens and rules follow docs/brand.md; per-pixel details follow the
   docs/design/*.dc.html reference bundle. THE RED RULE: --signal red appears
   only on Freeze / End session / destructive controls — never errors, warnings,
   badges, or decoration.
   ========================================================================== */

/* --- Fonts: self-hosted (the app never hotlinks) --------------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/geist-latin-variable-faa79069.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/geist-mono-latin-variable-2dfee388.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fraunces-latin-variable-2a0ad122.woff2") format("woff2");
}

/* --- Tokens: Roost (dark) is the base default ----------------------------- */
:root {
  --ground: #1c1b1a;
  --sunken: #141312;
  --raised: #232120;
  --raised-2: #2a2724;
  --rail: #191817;

  --ink-rgb: 246, 241, 231;
  --egg-shell: #f6f1e7;

  --yolk: #f2a93b;
  --yolk-hi: #f7b95c;
  --on-yolk: #1c1b1a;
  /* amber AS TEXT — kept separate so it can darken to stay AA-legible on the
     light ground (yolk fills/buttons keep --yolk). */
  --yolk-text: #f2a93b;

  --spring: #6fa876;
  --spring-ink: #8cbf93;

  --signal: #d6453d;
  --signal-ink: #e06158;
  --signal-line: rgba(214, 69, 61, 0.45);
  --signal-wash: rgba(214, 69, 61, 0.12);

  --hair: rgba(var(--ink-rgb), 0.08);
  --hair-2: rgba(var(--ink-rgb), 0.12);

  --font-ui: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-brand: "Fraunces", Georgia, serif;

  --radius-chip: 6px;
  --radius-btn: 8px;
  --radius-card: 10px;
  --radius-panel: 14px;

  color-scheme: dark;
}

/* Daybreak (light) — same structure; accents darken, backgrounds swap. Applied
   when the OS asks for light and dark is not explicitly forced, or on an
   explicit data-theme="light". An explicit data-theme="dark" always wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f6f1e7;
    --sunken: #ede4d2;
    --raised: #fffdf8;
    --raised-2: #fbf6ec;
    --rail: #f1ead9;

    --ink-rgb: 28, 27, 26;
    --egg-shell: #1c1b1a;

    --yolk: #d98e1b;
    --yolk-hi: #c47f12;
    --on-yolk: #fffdf8;
    --yolk-text: #9a6212;

    --spring: #4c8256;
    --spring-ink: #3c6b45;

    --signal: #c03a32;
    --signal-ink: #a82f28;
    --signal-line: rgba(192, 58, 50, 0.42);
    --signal-wash: rgba(192, 58, 50, 0.12);

    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #f6f1e7;
  --sunken: #ede4d2;
  --raised: #fffdf8;
  --raised-2: #fbf6ec;
  --rail: #f1ead9;

  --ink-rgb: 28, 27, 26;
  --egg-shell: #1c1b1a;

  --yolk: #d98e1b;
  --yolk-hi: #c47f12;
  --on-yolk: #fffdf8;
    --yolk-text: #9a6212;

  --spring: #4c8256;
  --spring-ink: #3c6b45;

  --signal: #c03a32;
  --signal-ink: #a82f28;
  --signal-line: rgba(192, 58, 50, 0.42);
  --signal-wash: rgba(192, 58, 50, 0.12);

  color-scheme: light;
}

/* --- Base ----------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
/* The hidden attribute must win over component display rules (hatch wizard
   steps, disclosure panels). */
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  min-height: 100dvh;
  background: var(--ground);
  color: rgba(var(--ink-rgb), 0.9);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--yolk-text);
  text-decoration: none;
}
a:hover {
  color: rgba(var(--ink-rgb), 1);
}
:focus-visible {
  outline: 2px solid var(--yolk);
  outline-offset: 2px;
  border-radius: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Egg avatar — the mark carries live status. Geometry from Egg.dc.html.
   Animations here; the helper (AvatarHelper#egg_avatar) attaches state classes.
   Never animate on safety surfaces: pass still:true → .egg--still.
   ========================================================================== */
.egg {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}
.egg .egg-shell {
  stroke: var(--egg-shell);
  transition: stroke 0.5s ease;
}
.egg .egg-face {
  stroke: var(--egg-color, var(--yolk));
  transition: stroke 0.5s ease;
}
.egg .egg-eye {
  fill: var(--egg-color, var(--yolk));
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.5s ease;
}
.egg .egg-mark {
  stroke: var(--egg-color, var(--yolk));
  fill: none;
  transition: stroke 0.5s ease;
}

/* whole-egg motions */
.egg--idle .egg-body { animation: hbBreath 3.4s ease-in-out infinite; }
.egg--thinking .egg-body { animation: hbTiltL 5s ease-in-out infinite; }
.egg--waiting .egg-body { animation: hbBounceS 1.4s ease-in-out infinite; }
.egg--done .egg-body { animation: hbHop 2.4s ease-in-out infinite; }
.egg--sleeping .egg-body { animation: hbSleepBreath 4.6s ease-in-out infinite; }
.egg--stuck .egg-body { animation: hbConfuseTilt 4.2s ease-in-out infinite; }

/* outer-eye group motions */
.egg--idle .egg-eyes { animation: hbTurn 7s ease-in-out infinite; }
.egg--working .egg-eyes { animation: hbSaccade 3.6s steps(1, end) infinite; }
.egg--thinking .egg-eyes { animation: hbThink 5s ease-in-out infinite; }
.egg--waiting .egg-eyes { animation: hbPuppy 2.8s ease-in-out infinite; }

/* inner-eye group motions */
.egg--idle .egg-eyes-inner { animation: hbBlink2 6s ease-in-out infinite; }
.egg--working .egg-eyes-inner { animation: hbSquint 3.6s ease-in-out infinite; }
.egg--stuck .egg-eye-l { animation: hbConfuse 4.2s ease-in-out infinite; }

/* hatch ceremony — plays once, only ever on the hatch-success surface */
.egg--hatch .egg-body { animation: hbWobble 1.4s ease-in-out 1 both; }
.egg--hatch .egg-pop { animation: hbPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s 1 both; }
.egg--hatch .egg-face { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hbCrackDraw 0.8s ease-out 1.4s 1 both; }
.egg--hatch .egg-mark { opacity: 0; animation: hbEyesIn 0.4s ease-out 2.15s 1 both; }
.egg--hatch .egg-eyes { opacity: 0; animation: hbEyesIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.55s 1 both; }
.egg--hatch .egg-eyes-inner { animation: hbBlinkOnce 0.8s ease-in-out 3.3s 1 both; }

/* still frame for safety surfaces + reduced motion */
.egg--still .egg-body,
.egg--still .egg-eyes,
.egg--still .egg-eyes-inner,
.egg--still .egg-eye-l,
.egg--still .egg-pop,
.egg--still .egg-face,
.egg--still .egg-mark {
  animation: none !important;
  opacity: 1;
  stroke-dashoffset: 0;
}

@keyframes hbBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 0.985); } }
@keyframes hbBlink2 { 0%, 80%, 86%, 90%, 100% { transform: scaleY(1); } 83%, 88% { transform: scaleY(0.06); } }
@keyframes hbTurn { 0%, 55%, 100% { transform: translateX(0); } 63%, 85% { transform: translateX(-7px); } }
@keyframes hbSaccade { 0%, 22% { transform: translateX(0); } 26%, 44% { transform: translateX(-6px); } 48%, 58% { transform: translateX(6px); } 62%, 74% { transform: translateX(4px); } 78%, 100% { transform: translateX(0); } }
@keyframes hbSquint { 0%, 60%, 100% { transform: scaleY(1); } 70%, 90% { transform: scaleY(0.55); } }
@keyframes hbThink { 0%, 15% { transform: translate(0, 0); } 25%, 45% { transform: translate(-5px, -7px); } 55%, 75% { transform: translate(5px, -7px); } 85%, 100% { transform: translate(0, 0); } }
@keyframes hbTiltL { 0%, 15%, 85%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-4deg); } }
@keyframes hbPuppy { 0%, 45%, 100% { transform: translateY(0) scale(1); } 55%, 90% { transform: translateY(-6px) scale(1.12); } }
@keyframes hbBounceS { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hbHop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 60% { transform: translateY(2px) scale(1.06, 0.92); } 68% { transform: translateY(-16px) scale(0.96, 1.06); } 76% { transform: translateY(0) scale(1.04, 0.94); } 82% { transform: translateY(-7px) scale(1, 1); } 88% { transform: translateY(0) scale(1, 1); } }
@keyframes hbZzz { 0%, 100% { opacity: 0; transform: translateY(4px); } 30%, 60% { opacity: 1; } 90% { opacity: 0; transform: translateY(-8px); } }
@keyframes hbSleepBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.975); } }
@keyframes hbConfuse { 0%, 30%, 100% { transform: translateY(0); } 45%, 80% { transform: translateY(-5px); } }
@keyframes hbConfuseTilt { 0%, 25%, 100% { transform: rotate(0); } 45%, 80% { transform: rotate(5deg); } }
@keyframes hbWobble { 0% { transform: rotate(0); } 12% { transform: rotate(-7deg); } 26% { transform: rotate(6deg); } 40% { transform: rotate(-4deg); } 54% { transform: rotate(3deg); } 66%, 100% { transform: rotate(0); } }
@keyframes hbCrackDraw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes hbEyesIn { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hbBlinkOnce { 0%, 70%, 100% { transform: scaleY(1); } 85% { transform: scaleY(0.06); } }
@keyframes hbPop { 0% { transform: scale(0.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hbZ { 0%, 100% { opacity: 0; transform: translateY(4px); } 30%, 60% { opacity: 1; } 90% { opacity: 0; transform: translateY(-8px); } }

/* live pulse dot (chat/live-run/takeover). Still on reduced motion. */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yolk);
  flex: none;
  display: inline-block;
  animation: hbPulse 1.6s ease-in-out infinite;
}
@keyframes hbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .egg * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .live-dot,
  .caret { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ===========================================================================
   Buttons (Component Library): primary yolk / approve eggshell / secondary /
   freeze (red) / grow-trust (spring) / ghost. THE RED RULE governs .btn--freeze.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: none;
  color: rgba(var(--ink-rgb), 0.8);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn--sm { padding: 6px 14px; font-size: 12px; }
.btn--primary { background: var(--yolk); color: var(--on-yolk); }
.btn--primary:hover { background: var(--yolk-hi); color: var(--on-yolk); }
.btn--approve { background: var(--egg-shell); color: var(--ground); }
.btn--approve:hover { background: rgba(var(--ink-rgb), 1); color: var(--ground); }
.btn--secondary { border-color: var(--hair-2); color: rgba(var(--ink-rgb), 0.75); }
.btn--secondary:hover { background: rgba(var(--ink-rgb), 0.06); color: rgba(var(--ink-rgb), 1); }
.btn--freeze { border-color: var(--signal-line); color: var(--signal-ink); font-weight: 600; }
.btn--freeze:hover { background: var(--signal-wash); color: var(--signal-ink); }
.btn--grow { border-color: rgba(111, 168, 118, 0.5); color: var(--spring-ink); }
.btn--grow:hover { background: rgba(111, 168, 118, 0.12); color: var(--spring-ink); }
.btn--ghost { color: rgba(var(--ink-rgb), 0.6); padding: 6px 10px; }
.btn--ghost:hover { color: rgba(var(--ink-rgb), 1); }
.btn--block { width: 100%; }

/* status dots + badges + chips */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--yolk { background: var(--yolk); }
.dot--spring { background: var(--spring); }
.dot--muted { background: rgba(var(--ink-rgb), 0.3); }
.count {
  background: var(--yolk);
  color: var(--on-yolk);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  line-height: 1.5;
}
.badge-bot {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(242, 169, 59, 0.18);
  color: var(--yolk-text);
}
.chip {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--hair-2);
  color: rgba(var(--ink-rgb), 0.7);
}
.chip--cap { border-style: dashed; }
.mono-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.mono-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(var(--ink-rgb), 0.4);
}

/* flashes — note: NOT red (THE RED RULE). alert uses ink + a yolk edge. */
.flash {
  margin: 0;
  padding: 10px 18px;
  font-size: 12.5px;
  border-left: 2px solid var(--yolk);
  background: rgba(242, 169, 59, 0.08);
  color: rgba(var(--ink-rgb), 0.85);
}
.flash.notice { border-left-color: var(--spring); background: rgba(111, 168, 118, 0.1); }
.flash.alert { border-left-color: var(--yolk); background: rgba(242, 169, 59, 0.1); }
.app-flashes { position: sticky; top: 0; z-index: 20; }

/* ===========================================================================
   App shell — icon+label sidebar / chat list / content. (App Home v4)
   ========================================================================== */
.shell {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  background: var(--ground);
  overflow: hidden;
}
.sidebar {
  width: 208px;
  flex: none;
  background: var(--sunken);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  padding: 18px 12px 16px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 22px;
}
.sidebar-brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: rgba(var(--ink-rgb), 1); }
.wordmark { /* retained hook: title-case product wordmark */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(var(--ink-rgb), 1);
  margin: 0;
}
.wordmark-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: rgba(var(--ink-rgb), 0.62);
  font-size: 13px;
  text-decoration: none;
}
.nav-item svg { flex: none; }
.nav-item:hover { background: rgba(var(--ink-rgb), 0.05); color: rgba(var(--ink-rgb), 0.9); }
.nav-item--active { background: rgba(242, 169, 59, 0.12); color: var(--yolk-text); font-weight: 600; }
.nav-item--active:hover { background: rgba(242, 169, 59, 0.14); color: var(--yolk-text); }
.nav-item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.nav-item .count { margin-left: auto; }
.nav-soon { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.3); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 0;
}
.avatar-initial {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--raised-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--ink-rgb), 0.85);
  flex: none;
}
.sidebar-user-name { font-size: 11.5px; font-weight: 500; color: rgba(var(--ink-rgb), 0.9); }
.bridge-org-current,
.sidebar-user-org { font-size: 10px; color: rgba(var(--ink-rgb), 0.4); }
.sidebar-account { display: flex; flex-direction: column; gap: 4px; }
.sidebar-account summary { list-style: none; cursor: pointer; }
.sidebar-account summary::-webkit-details-marker { display: none; }
.sidebar-account-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px 2px; }
.sidebar-account-menu form { margin: 0; }
.linkish {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 11.5px;
  color: rgba(var(--ink-rgb), 0.6);
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  width: 100%;
}
.linkish:hover { background: rgba(var(--ink-rgb), 0.06); color: rgba(var(--ink-rgb), 1); }

/* content region + generic focused/list page */
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  overflow: hidden;
}
.page {
  flex: 1;
  overflow: auto;
  padding: 28px 32px 40px;
}
.page-narrow { max-width: 780px; }
.page-title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: rgba(var(--ink-rgb), 1);
}
.page-lead { color: rgba(var(--ink-rgb), 0.55); margin: 0 0 24px; font-size: 13px; max-width: 62ch; }
.section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* ===========================================================================
   Chat list pane (App Home v4)
   ========================================================================== */
.chatlist {
  width: 292px;
  flex: none;
  background: var(--rail);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chatlist-head {
  padding: 18px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatlist-head h1 { font-size: 16px; font-weight: 600; margin: 0; color: rgba(var(--ink-rgb), 1); }
.icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--ink-rgb), 0.7);
  background: none;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(var(--ink-rgb), 0.06); color: rgba(var(--ink-rgb), 1); }
.chatlist-search {
  margin: 0 18px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 7px;
  padding: 7px 11px;
  color: rgba(var(--ink-rgb), 0.38);
  font-size: 12px;
}
.chatlist-scroll { flex: 1; overflow: auto; padding: 0 10px 12px; display: flex; flex-direction: column; }
.chatlist-group-label { padding: 8px 10px 6px; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.chat-row:hover { background: rgba(var(--ink-rgb), 0.04); color: inherit; }
.chat-row--active { background: rgba(242, 169, 59, 0.1); }
.chat-row--active:hover { background: rgba(242, 169, 59, 0.12); }
.chat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-row-name { font-size: 13px; font-weight: 600; color: rgba(var(--ink-rgb), 0.95); }
.chat-row-time { font-family: var(--font-mono); font-size: 9.5px; color: rgba(var(--ink-rgb), 0.4); }
.chat-row-preview {
  font-size: 11.5px;
  color: rgba(var(--ink-rgb), 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row-preview--live { color: var(--yolk-text); }
.avatar-stack { width: 26px; height: 30px; flex: none; position: relative; }
.avatar-stack .egg { position: absolute; }
.avatar-stack .egg:first-child { left: 0; top: 0; }
.avatar-stack .egg:last-child { left: 9px; top: 7px; }

/* ===========================================================================
   Conversation pane (App Home v4)
   ========================================================================== */
.convo { flex: 1; display: flex; flex-direction: column; background: var(--ground); min-width: 0; min-height: 0; }
.convo-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hair);
}
.convo-head-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.convo-head-name { font-size: 15px; font-weight: 600; color: rgba(var(--ink-rgb), 1); }
.convo-head-status {
  font-size: 11.5px;
  color: var(--yolk-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.convo-head-status--muted { color: rgba(var(--ink-rgb), 0.5); }
.convo-head-status--frozen { color: var(--signal-ink); }
.convo-head-sub { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.55); }
.convo-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.convo-head-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(var(--ink-rgb), 0.4); margin-right: 8px; }

.log {
  flex: 1;
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 24px 16px;
  gap: 16px;
}
.log-daystamp { align-self: center; font-family: var(--font-mono); font-size: 10px; color: rgba(var(--ink-rgb), 0.3); }

/* message bubbles: user right/yolk, bot left/raised */
.turn { display: flex; gap: 11px; max-width: 660px; }
.turn--you { align-self: flex-end; max-width: 540px; }
.turn-avatar { flex: none; margin-top: 2px; }
.turn-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.turn-from { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.bubble {
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-family: var(--font-ui);
  margin: 0;
}
.bubble--you {
  background: var(--yolk);
  color: var(--on-yolk);
  border-radius: 12px 12px 3px 12px;
}
.bubble--bot {
  background: var(--raised);
  border: 1px solid var(--hair);
  color: rgba(var(--ink-rgb), 0.9);
  border-radius: 3px 12px 12px 12px;
}

/* live-run card + mono run tape (App Home v4 / Component Library) */
.live-run {
  background: var(--sunken);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.live-run-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair);
}
.live-run-title { font-size: 11.5px; font-weight: 600; color: var(--yolk-text); }
.live-run-meta { font-family: var(--font-mono); font-size: 10px; color: rgba(var(--ink-rgb), 0.5); }
.live-run-expand { margin-left: auto; font-size: 11px; font-weight: 500; color: rgba(var(--ink-rgb), 0.6); background: none; border: 0; cursor: pointer; }
.live-run-expand:hover { color: rgba(var(--ink-rgb), 1); }
.event-rail {
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.95;
  color: rgba(var(--ink-rgb), 0.55);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.event {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.95;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(var(--ink-rgb), 0.55);
}
.event-narration { color: rgba(var(--ink-rgb), 0.7); }
.event-done { color: var(--spring-ink); }
.event-error { color: rgba(var(--ink-rgb), 0.7); }
.event-tool_call, .event-tool_result, .event-usage { color: rgba(var(--ink-rgb), 0.42); }
.event-cap { margin: 0; font-family: var(--font-mono); font-size: 10.5px; color: rgba(var(--ink-rgb), 0.42); }
.event-fold { margin: 0; font-family: var(--font-mono); font-size: 11px; color: rgba(var(--ink-rgb), 0.42); }
.event-fold summary { cursor: pointer; color: rgba(var(--ink-rgb), 0.5); }
.caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: var(--yolk);
  margin-left: 3px;
  vertical-align: -1px;
  animation: hbCaret 1.1s step-end infinite;
}
@keyframes hbCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* in-chat callouts: takeover + approval (previews only — decisions live on
   their full pages). Not red. */
.callout {
  background: var(--raised);
  border: 1px solid rgba(242, 169, 59, 0.35);
  border-radius: 3px 12px 12px 12px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.callout-kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yolk-text); margin: 0; }
.callout-title { font-size: 13.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.9); margin: 0; }
.callout-note { font-family: var(--font-mono); font-size: 10px; color: rgba(var(--ink-rgb), 0.38); margin: 0; }
.callout-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* composer (App Home v4) + capability hint line */
.composer-wrap { flex: none; padding: 0 24px 18px; display: flex; flex-direction: column; gap: 8px; }
.helm-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--raised);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-card);
  padding: 10px 12px 10px 16px;
}
.helm-form:focus-within { border-color: rgba(242, 169, 59, 0.5); }
.helm-form input[type="text"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: rgba(var(--ink-rgb), 0.95);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 2px 0;
  outline: none;
}
.helm-form input[type="text"]::placeholder { color: rgba(var(--ink-rgb), 0.38); }
.helm-form input[type="text"]:disabled { color: rgba(var(--ink-rgb), 0.4); }
.composer-send {
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--yolk);
  border: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8 H12 M8.5 3.5 L13.5 8 L8.5 12.5' fill='none' stroke='%231C1B1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
  color: transparent;
}
.composer-send:hover { background-color: var(--yolk-hi); }
.composer-send:disabled { opacity: 0.5; cursor: not-allowed; }
.capability-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(var(--ink-rgb), 0.5);
  padding-left: 2px;
}

/* empty conversation state */
.convo-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(var(--ink-rgb), 0.5);
  text-align: center;
  padding: 40px;
}
.convo-empty-title { font-family: var(--font-brand); font-size: 22px; color: rgba(var(--ink-rgb), 0.85); }
/* Drop the empty state the moment a message exists — including one streamed in
   live via Turbo (the append lands a .turn inside the log). */
#conversation_log:has(.turn) .convo-empty { display: none; }

/* ===========================================================================
   Focused pages: breadcrumb header + footer bar (Approval Review / Takeover)
   ========================================================================== */
.focus { display: flex; flex-direction: column; height: 100dvh; min-height: 100dvh; background: var(--ground); color: rgba(var(--ink-rgb), 0.95); overflow: hidden; }
.focus-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--hair);
}
.crumb { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.45); text-decoration: none; }
.crumb:hover { color: rgba(var(--ink-rgb), 0.9); }
.crumb-sep { color: rgba(var(--ink-rgb), 0.25); }
.focus-head-title { font-size: 14.5px; font-weight: 600; }
.focus-head-actions { margin-left: auto; display: flex; gap: 8px; }
.focus-body { flex: 1; display: flex; gap: 24px; padding: 24px 32px; overflow: auto; min-height: 0; }
.focus-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-top: 1px solid var(--hair);
  background: var(--rail);
}
.focus-foot form { margin: 0; }
.focus-foot-note { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: rgba(var(--ink-rgb), 0.38); }

/* ===========================================================================
   Approvals (index + review). The review renders the COMPLETE hashed payload;
   approve controls sit only where the whole payload is visible (SPEC §5/inv.12).
   ========================================================================== */
.approvals-main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.approvals-count { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.approvals-count-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(var(--ink-rgb), 0.55); }
.approvals-rail { width: 320px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.gate-list { display: flex; flex-direction: column; gap: 16px; }

.effect {
  background: var(--raised);
  border: 1px solid rgba(242, 169, 59, 0.35);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.effect-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 14px 16px 0; }
.effect-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yolk-text); }
.effect-target { font-family: var(--font-mono); font-size: 12px; color: rgba(var(--ink-rgb), 0.9); overflow-wrap: anywhere; }
.effect-why { margin: 8px 16px 0; color: rgba(var(--ink-rgb), 0.6); font-size: 12.5px; line-height: 1.55; }
.effect-fields { margin: 12px 0 0; padding: 0 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.effect-field-name { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.effect-field-value { margin: 4px 0 0; }
.effect-body {
  margin: 0;
  padding: 10px 12px;
  max-height: 22rem;
  overflow: auto;
  background: var(--sunken);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(var(--ink-rgb), 0.85);
}
.effect-empty { margin: 0; color: rgba(var(--ink-rgb), 0.5); }
.effect-hash {
  margin: 12px 16px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(var(--ink-rgb), 0.4);
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.effect-hash code { color: rgba(var(--ink-rgb), 0.6); }
.effect-unverified { margin: 12px 16px 0; color: var(--signal-ink); font-weight: 600; font-size: 12.5px; }
.effect-decided {
  margin: 12px 16px 16px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10.5px;
  color: rgba(var(--ink-rgb), 0.5);
}
.effect-actions { margin: 12px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.effect-actions form { margin: 0; }
.effect-back { margin: 20px 0 0; }

.rail-card {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail-card h2 { font-size: 13px; font-weight: 600; margin: 0; color: rgba(var(--ink-rgb), 0.95); }
.rail-card p { margin: 0; font-size: 12px; color: rgba(var(--ink-rgb), 0.65); line-height: 1.55; }
.scope-line { display: flex; gap: 9px; font-size: 12px; color: rgba(var(--ink-rgb), 0.7); line-height: 1.5; }
.scope-yes { color: var(--spring-ink); flex: none; }
.scope-no { color: rgba(var(--ink-rgb), 0.35); flex: none; }
.scope-line--no { color: rgba(var(--ink-rgb), 0.45); }
.rail-note {
  border-top: 1px solid var(--hair);
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(var(--ink-rgb), 0.4);
  line-height: 1.7;
}
.policy-code { font-family: var(--font-mono); font-size: 11px; color: var(--yolk-text); }

/* ===========================================================================
   Takeover session (Takeover Session.dc.html). Logged, not recorded (SPEC §8).
   ========================================================================== */
.takeover { background: var(--sunken); }
.takeover-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  background: rgba(242, 169, 59, 0.1);
  border-bottom: 2px solid var(--yolk);
}
.takeover-banner-title { font-size: 14px; font-weight: 600; }
.takeover-banner-note { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.65); }
.takeover-banner-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.takeover-banner-right form { margin: 0; }
.takeover-clock { font-family: var(--font-mono); font-size: 13px; color: var(--yolk-text); font-weight: 500; }
.takeover-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.takeover-chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--raised);
  border: 1px solid var(--hair-2);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
}
.takeover-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--raised-2); }
.takeover-url {
  flex: 1;
  margin: 0 10px;
  background: var(--sunken);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(var(--ink-rgb), 0.6);
}
.takeover-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: var(--sunken);
  border: 1px solid var(--hair-2);
  border-radius: 0 0 10px 10px;
}
.takeover-side { width: 300px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.takeover-side-card {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.takeover-side-card h2 { font-size: 14px; font-weight: 600; margin: 0; }
.takeover-side-card p { font-size: 12px; color: rgba(var(--ink-rgb), 0.55); line-height: 1.55; margin: 0; }
.takeover-meta {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.takeover-meta h2 { font-size: 13px; font-weight: 600; margin: 0; }
.takeover-meta-rows { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; color: rgba(var(--ink-rgb), 0.65); }
.takeover-meta-row { display: flex; justify-content: space-between; gap: 12px; }
.takeover-meta-row span:last-child { color: rgba(var(--ink-rgb), 0.9); }
.takeover-meta-row .val-spring { color: var(--spring-ink); }
.takeover-end { margin-top: auto; }
.takeover-warning {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--yolk);
  background: rgba(242, 169, 59, 0.08);
  font-size: 12.5px;
  color: rgba(var(--ink-rgb), 0.8);
}
.password-field {
  border: 2px solid var(--yolk);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.password-note { font-family: var(--font-mono); font-size: 9.5px; color: var(--yolk-text); }

/* ===========================================================================
   Machine / Settings — freeze two-control model (SPEC §10). Red only on the
   destructive controls.
   ========================================================================== */
.settings-grid { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.panel {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-panel);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel h2 { font-size: 15px; font-weight: 600; margin: 0; }
.panel p { margin: 0; font-size: 12.5px; color: rgba(var(--ink-rgb), 0.6); line-height: 1.55; }
.panel-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-row form { margin: 0; }
.state-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--hair-2);
  color: rgba(var(--ink-rgb), 0.7);
}
.state-pill--running { border-color: rgba(111, 168, 118, 0.4); color: var(--spring-ink); }
.state-pill--frozen { border-color: var(--signal-line); color: var(--signal-ink); }
.freeze-divider { border: 0; border-top: 1px solid var(--hair); margin: 4px 0; }
.freeze-revoke-note { font-family: var(--font-mono); font-size: 10px; color: rgba(var(--ink-rgb), 0.4); line-height: 1.7; }

/* generic list rows (Sessions / Memory / Audit) */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.list-row {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.list-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-row-head form { margin: 0; margin-left: auto; }
.list-row-kind { font-size: 13px; font-weight: 600; }
.list-row-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.list-row-body { font-family: var(--font-mono); font-size: 11.5px; color: rgba(var(--ink-rgb), 0.65); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.list-empty { color: rgba(var(--ink-rgb), 0.5); font-size: 13px; }

/* ===========================================================================
   Hatch flow (Hatch Flow.dc.html)
   ========================================================================== */
.hatch {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse 900px 600px at 50% 35%, var(--raised), var(--ground) 70%);
  color: rgba(var(--ink-rgb), 0.95);
}
.hatch-top { flex: none; display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 22px 32px; }
.hatch-top-name { font-size: 14px; font-weight: 600; }
.hatch-top-sub { font-size: 12px; color: rgba(var(--ink-rgb), 0.4); margin-left: 6px; }
.hatch-steps {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 34px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  flex-wrap: wrap;
  justify-content: center;
}
.hatch-step { color: rgba(var(--ink-rgb), 0.45); }
.hatch-step--active { color: var(--yolk-text); font-weight: 500; }
.hatch-step--todo { color: rgba(var(--ink-rgb), 0.3); }
.hatch-step-sep { width: 26px; height: 1px; background: rgba(var(--ink-rgb), 0.2); }
.hatch-stage { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0 24px 40px; }
.hatch-egg { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hatch-egg .egg--peek { animation: hbPeek 3s ease-in-out infinite; }
@keyframes hbPeek { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.hatch-egg-name { font-family: var(--font-brand); font-size: 26px; }
.hatch-egg-role { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
.hatch-panel { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.hatch-headline { font-family: var(--font-brand); font-size: 28px; letter-spacing: -0.01em; margin: 0; }
.hatch-sub { font-size: 13px; color: rgba(var(--ink-rgb), 0.55); line-height: 1.6; margin: 0; }
.limits-card { background: var(--raised); border: 1px solid var(--hair-2); border-radius: 11px; overflow: hidden; }
.limit-row { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1px solid var(--hair); }
.limit-row:last-child { border-bottom: 0; }
.limit-yes { color: var(--spring-ink); font-size: 13px; flex: none; }
.limit-no { color: rgba(var(--ink-rgb), 0.35); font-size: 13px; flex: none; }
.limit-main { flex: 1; display: flex; flex-direction: column; }
.limit-title { font-size: 13px; font-weight: 600; }
.limit-title--off { font-weight: 500; color: rgba(var(--ink-rgb), 0.65); }
.limit-desc { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.5); }
.hatch-actions { display: flex; align-items: center; gap: 12px; }
.hatch-fineprint { font-family: var(--font-mono); font-size: 10px; color: rgba(var(--ink-rgb), 0.5); }
.hatch-form-field { display: flex; flex-direction: column; gap: 6px; }
.hatch-form-field label { font-size: 12.5px; font-weight: 500; color: rgba(var(--ink-rgb), 0.7); }
.hatch-input {
  background: var(--sunken);
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: rgba(var(--ink-rgb), 0.95);
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  width: 100%;
}
.hatch-input:focus { outline: none; border-color: rgba(242, 169, 59, 0.6); }
.hatch-error { color: var(--signal-ink); font-size: 12px; margin: 0; }
.hatch-ceremony { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 40px; }

/* ===========================================================================
   Login (Devise) — standalone centered card.
   ========================================================================== */
.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background: radial-gradient(ellipse 900px 620px at 50% 30%, var(--raised), var(--ground) 72%);
}
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand-name { font-size: 18px; font-weight: 600; }
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius-panel);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card h1 { font-family: var(--font-brand); font-weight: 400; font-size: 24px; margin: 0; }
.auth-tagline { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.55); margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(var(--ink-rgb), 0.6); }
.login-form input[type="email"],
.login-form input[type="password"] {
  background: var(--sunken);
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: rgba(var(--ink-rgb), 0.95);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.login-form input:focus { outline: none; border-color: rgba(242, 169, 59, 0.6); }
.login-form .remember { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; }
.login-form input[type="submit"] {
  background: var(--yolk);
  color: var(--on-yolk);
  border: 0;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  padding: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.login-form input[type="submit"]:hover { background: var(--yolk-hi); }

/* ===========================================================================
   Mobile: responsive down to the iPhone frames (Mobile.dc.html).
   Chats home + "N things need you" banner + tab bar; conversation with
   thumb-sized cards; approval as a bottom sheet.
   ========================================================================== */
.needs-you {
  display: none;
  margin: 0 16px 8px;
  align-items: center;
  gap: 10px;
  background: rgba(242, 169, 59, 0.12);
  border: 1px solid rgba(242, 169, 59, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(var(--ink-rgb), 0.9);
  font-size: 12.5px;
  text-decoration: none;
}
.needs-you .count { flex: none; }
.needs-you-open { margin-left: auto; color: var(--yolk-text); font-weight: 600; font-size: 12px; white-space: nowrap; }
.tabbar { display: none; }
.mobile-back { display: none; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  /* On mobile the sidebar collapses; nav moves to the bottom tab bar. */
  .sidebar { display: none; }
  /* One pane at a time: the open conversation by default, the chats-home list
     one tap back (mobilenav toggles .shell--list). */
  .chatlist { width: 100%; flex: 1; border-right: 0; display: none; }
  .convo { border-left: 0; display: flex; }
  .shell--list .chatlist { display: flex; }
  .shell--list .convo { display: none; }
  .needs-you { display: flex; }
  .convo-head { padding: 12px 16px; gap: 10px; }
  .convo-head-tools { display: none; }
  .mobile-back { display: inline-flex; flex: none; }
  .log { padding: 16px 14px 12px; }
  .turn, .turn--you { max-width: 90%; }
  .composer-wrap { padding: 0 14px 14px; }
  .focus-body { flex-direction: column; overflow: auto; }
  .approvals-rail { width: 100%; }
  .takeover-side { width: 100%; }
  .takeover-stage { min-height: 300px; }
  .focus-head { flex-wrap: wrap; padding: 12px 16px; }
  .focus-head-title { flex: 1 1 100%; }
  .focus-head-actions { width: 100%; }
  .focus-foot { flex-wrap: wrap; padding: 12px 16px; }
  .focus-foot form { flex: 1; }
  .focus-foot .btn { width: 100%; }
  .focus-foot-note { width: 100%; text-align: left; margin-left: 0; }
  .takeover-banner { flex-wrap: wrap; padding: 12px 16px; }
  .takeover-banner-note { flex: 1 1 100%; }
  .takeover-banner-right { width: 100%; justify-content: space-between; }
  .tabbar {
    display: flex;
    flex: none;
    border-top: 1px solid var(--hair);
    background: var(--sunken);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
  }
  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    color: rgba(var(--ink-rgb), 0.5);
    font-size: 10px;
    text-decoration: none;
  }
  .tab--active { color: var(--yolk-text); }
  .tab .count { position: absolute; transform: translate(12px, -6px); }
  .tab-ico { position: relative; }
}

/* Approval as a bottom sheet on mobile */
.sheet { display: contents; }
@media (max-width: 860px) {
  /* The approval review reads as a bottom sheet: the decision bar pins to the
     bottom over the scrolling payload (Mobile.dc.html). */
  .sheet-focus .focus-head { position: sticky; top: 0; z-index: 5; background: var(--ground); }
  .sheet-focus .focus-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-wrap: wrap;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  }
}