/* ChelaMix OS design system, adapted from Pulpa Madre OS. README "Theme" documents the tokens.
 * Primitives (--cm-*) are the only hex values. Components use semantic tokens only.
 * Composition: ink nav → white canvas with bordered white work surfaces → Michelada Red primary actions.
 * Brand (from the website): Tailgate Yellow #F7BE00, Michelada Red #D7282F, Aluminum #EAEAEA, white.
 * Contrast: white on red 4.9:1, ink on yellow 10:1, red on white 4.9:1. Yellow never carries text on white. */

:root {
  /* Primitives: brand palette, plus agent accent colors */
  --cm-ink: #1E1414;
  --cm-white: #FFFFFF;
  --cm-red: #D7282F;
  --cm-yellow: #F7BE00;
  --cm-aluminum: #EAEAEA;
  --cm-chile: #8E1519;
  --cm-lilac: #B19AD6;
  --cm-pink: #FFA3B5;
  --cm-gold: #E89B00;
  --cm-lime: #97D700;
  --cm-sky: #00A3E0;

  /* Shell and surfaces */
  --app-bg: var(--cm-white);
  --surface-primary: var(--cm-white);
  --surface-secondary: var(--cm-aluminum);   /* editorial moments, code, table heads */
  --surface-neutral: color-mix(in srgb, var(--cm-ink) 5%, var(--cm-white));   /* plain UI gray: tool chrome that must not read as a brand color (Brand page) */
  --surface-dark: var(--cm-ink);     /* nav, tooltips, selected tab */

  /* Text */
  --text-primary: var(--cm-ink);
  --text-muted: color-mix(in srgb, var(--cm-ink) 62%, transparent);  /* white/crema only: 5.0 / 4.8:1 */
  --text-inverse: var(--cm-white);
  --text-on-canvas: var(--cm-ink);

  /* Actions and UI accents */
  --action-primary: var(--cm-red);
  --action-primary-text: var(--cm-white); /* white on Michelada Red, 4.9:1 */
  --action-primary-hover: color-mix(in srgb, var(--cm-red) 86%, var(--cm-ink));
  --ui-accent: var(--cm-red);             /* link underlines, markers, focus halo, active nav on charcoal, kicker */

  /* Status */
  --status-live: var(--cm-yellow);
  --status-success: var(--cm-lime);
  --status-warning: var(--cm-gold);
  --status-danger: var(--cm-chile);

  /* Lines and states */
  --border: color-mix(in srgb, var(--cm-ink) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--cm-ink) 42%, transparent);
  --border-card: color-mix(in srgb, var(--cm-red) 45%, transparent);   /* card outlines */
  --hover: color-mix(in srgb, var(--cm-red) 10%, transparent);
  --focus: var(--cm-ink);
  --focus-halo: color-mix(in srgb, var(--cm-red) 45%, transparent);

  /* Actor identity (dots only). AI colors are hashed from the agent name, see accent() in src/views.ts. */
  --actor-global: var(--cm-sky);
  --actor-human: var(--cm-yellow);
  --actor-system: color-mix(in srgb, var(--cm-ink) 30%, var(--cm-white));
  --actor-lilac: var(--cm-lilac);
  --actor-pink: var(--cm-pink);
  --actor-zest: var(--cm-yellow);
  --actor-gold: var(--cm-gold);
  --actor-lime: var(--cm-lime);

  /* Typography */
  --font-display: "Bebas Neue", Impact, system-ui, sans-serif;
  --font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --heading-sm: 1.375rem; /* 22 */
  --heading-md: 1.875rem; /* 30 */
  --heading-lg: 2.625rem; /* 42 */
  --heading-hero: 3.5rem; /* 56 */
  --display-tracking: 0.01em;             /* Bebas Neue is already condensed; open it up a touch */
  --display-leading: 0.9;                 /* manual: leading 0.8–0.9× */
  --heading-color: var(--cm-red);         /* headings in Michelada Red, uppercase, like the website */

  /* Shape and space */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-pill: 99px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: var(--space-5);
  --page-max: 1140px;                    /* the whole app's max width, gutters included; bars keep full-bleed backgrounds but align their contents to it */
  --shadow-pop: 0 6px 18px color-mix(in srgb, var(--cm-ink) 22%, transparent);
  --surface-hero: var(--cm-red);          /* Home hero band; everything on it is white */
  --text-on-hero: var(--cm-white);
  --surface-band: var(--cm-yellow);       /* Home checklist band: Tailgate Yellow; ink on it is 10:1 */
  --header-height: 116px;               /* unscrolled header; the Home hero fills the rest of the screen */
  color-scheme: light;
}

.a-global { --actor: var(--actor-global); }
.a-human { --actor: var(--actor-human); }
.a-system { --actor: var(--actor-system); }
.a-lilac { --actor: var(--actor-lilac); }
.a-pink { --actor: var(--actor-pink); }
.a-zest { --actor: var(--actor-zest); }
.a-gold { --actor: var(--actor-gold); }
.a-lime { --actor: var(--actor-lime); }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--app-bg); color: var(--text-on-canvas);
  font: 400 var(--text-base)/1.5 var(--font-ui);
}
main { max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--gutter) 48px; }

h1, h2, h3, .display, details.acc > summary {
  font-family: var(--font-display); font-weight: 400; letter-spacing: var(--display-tracking); line-height: var(--display-leading);
  text-transform: uppercase; color: var(--heading-color);
}
h1 { font-size: var(--heading-lg); margin: 0 0 var(--space-3); }
h2 { font-size: var(--heading-sm); margin: 0 0 var(--space-3); }
h1 .meta, h2 .meta, h3 .meta { font: 400 var(--text-sm)/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-left: var(--space-1); }
summary .dot { margin-left: var(--space-1); }
h3 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
h3 a { text-decoration-color: currentColor; }
.wordmark { text-transform: none; color: var(--text-primary); }
main > p, main > .meta, main > .muted { color: var(--text-on-canvas); }

a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--ui-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--text-primary); }
main > p a, main > .meta a { text-decoration-color: var(--text-on-canvas); }
ul.entries a, .hero a, .tab, .button, .top a { text-decoration: none; }
ul.entries a { font-weight: 500; }
ul.entries a:hover { text-decoration: underline; text-decoration-color: var(--ui-accent); }
code {
  background: var(--surface-secondary); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius-sm);
  word-break: break-all; font-family: var(--font-mono); font-size: 0.9em;
}
::selection { background: color-mix(in srgb, var(--cm-red) 35%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header (same behavior as the TK Hibachi header): sticky charcoal bar, a 3-zone grid with the logo dead center.
   It is 116px tall with a 92px logo; past 8px of scroll, app.js adds .scrolled and it eases to 90px with a 66px logo.
   On phones it is 94px with a 44px centered logo, easing to 84px / 38px. Menu sits left; Settings and Log out right. */
.top {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  height: var(--header-height); padding: 0 max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--surface-dark); color: var(--text-inverse);
  box-shadow: 0 1px 0 transparent;
  transition: height 0.4s ease, box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.top.scrolled { height: calc(var(--header-height) - 26px); box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
/* Over a hero (Home): transparent at the top, translucent blurred charcoal once scrolled. Other pages stay solid. */
.top--over { background: transparent; }
.top--over.scrolled {
  background: color-mix(in srgb, var(--cm-ink) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top :focus-visible { outline-color: var(--text-inverse); }
.top-left, .top-right { display: flex; align-items: center; gap: var(--space-2); }
.top-right { justify-content: flex-end; }
.top-right form { margin: 0; }
.top .brand { position: relative; display: inline-flex; align-items: center; color: var(--text-inverse); }
.top .os { position: absolute; left: 104%; top: 50%; translate: 0 -50%; font-size: var(--text-lg); padding: 6px 10px 4px; letter-spacing: 0.04em; }  /* Match the wordmark’s ~7% inter-word gap, including as it shrinks on scroll. */
.logo { display: block; height: 92px; width: auto; transition: height 0.4s ease; }
.top.scrolled .logo { height: 66px; }
.logo .mark { fill: currentColor; }   /* header + menu: the whole logo is white (lettering and fruit take currentColor) */
.top .header-logo-mobile { display: none; }
/* The ChelaMix script logo is tall (2.6:1), so it is sized by height, not width like Pulpa Madre's wide wordmark. */
.top .header-logo { width: auto; height: 64px; transition: height 0.4s ease; }
.top.scrolled .header-logo { width: auto; height: 50px; }
.os {
  font: 400 var(--text-xs)/1 var(--font-display); letter-spacing: 0.02em; padding: 4px 6px; border-radius: var(--radius-sm);
  background: var(--status-live); color: var(--text-primary);
}
.icon { display: block; width: 22px; height: 22px; flex: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text-inverse); cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--cm-white) 10%, transparent); }
.icon-btn[aria-current="page"] { color: var(--ui-accent); background: color-mix(in srgb, var(--cm-red) 16%, transparent); }
/* Hamburger (TK Hibachi): three white lines at 100 / 70 / 40% that all run full width on hover, plus a "Menu" label. */
.hamburger {
  display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-inverse); cursor: pointer;
}
.hamburger:hover { background: none; }
.hamburger-lines { position: relative; flex: none; width: 32px; height: 17px; }
.hamburger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hamburger-lines span:nth-child(1) { top: 2px; }
.hamburger-lines span:nth-child(2) { top: 7.5px; width: 70%; }
.hamburger-lines span:nth-child(3) { top: 13px; width: 40%; }
.hamburger:hover .hamburger-lines span { width: 100%; }
.hamburger-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }  /* same as .kicker */
/* Scrolled (TK turns these brand red): hamburger lines and header icons go Tailgate Yellow. */
.top.scrolled .hamburger-lines span { background: var(--cm-yellow); }
.top.scrolled .icon-btn:not([aria-current="page"]) { color: var(--cm-yellow); }

/* Menu overlay (TK Hibachi): full screen, a circle wipe out of the hamburger, numbered Bebas Neue links left, the logo right.
   Its contents sit in the --page-max column like the header. app.js sets --burger-x/-y (the hamburger's top-left) and
   --burger-cx/-cy (its center) on open, so Close lands exactly on the hamburger and the wipe grows from it. */
.menu {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1.2fr 0.8fr;
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: radial-gradient(1200px 900px at 12% 8%, color-mix(in srgb, var(--cm-red) 28%, var(--cm-ink)), var(--cm-ink) 70%);
  color: var(--text-inverse);
  clip-path: circle(0% at var(--burger-cx, 56px) var(--burger-cy, 58px)); visibility: hidden;
  transition: clip-path 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0.8s;
}
.menu.open { clip-path: circle(150% at var(--burger-cx, 56px) var(--burger-cy, 58px)); visibility: visible; transition: clip-path 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s; }
.menu :focus-visible { outline-color: var(--text-inverse); }
.menu-close {
  position: absolute; top: var(--burger-y, 36px); left: var(--burger-x, var(--gutter)); z-index: 2;
  display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0;  /* same box as .hamburger */
  border: 0; background: none; color: var(--text-inverse); cursor: pointer;
}
.menu-close:hover { background: none; color: var(--status-live); }
.menu-close-x { position: relative; flex: none; width: 32px; height: 17px; }  /* the hamburger lines' box, so the labels line up */
.menu-close-x::before, .menu-close-x::after {
  content: ""; position: absolute; top: calc(50% - 1px); left: 4px; width: 24px; height: 2px; background: var(--status-live);
}
.menu-close-x::before { transform: rotate(45deg); }
.menu-close-x::after { transform: rotate(-45deg); }
.menu-main { align-self: center; padding: 120px var(--space-6) 80px 0; }
.menu-list { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.menu-list a {
  display: inline-flex; align-items: baseline; width: max-content; max-width: 100%;
  font: 400 clamp(1.5rem, 7vw, 3.6rem)/1 var(--font-display); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-inverse); text-decoration: none;
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease;
}
.menu.open .menu-list a { opacity: 1; transform: none; transition-delay: calc(0.15s + var(--i, 0) * 0.07s); }
.menu.open .menu-list a:hover { color: var(--status-live); transform: translateX(14px); transition-delay: 0s; }
.menu-list a[aria-current="page"] { color: var(--status-live); }
.menu-num {
  font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.2em; color: var(--status-live); opacity: 0.8;
  vertical-align: super; margin-right: 0.6em;
}
.menu-aside {
  display: grid; place-items: center;
  padding: clamp(60px, 10vh, 120px) 0 clamp(60px, 10vh, 120px) clamp(30px, 5vw, 64px); border-left: 1px solid color-mix(in srgb, var(--cm-white) 12%, transparent);
}
.menu-aside .logo {
  width: 100%; max-width: 440px; height: auto;
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease;  /* same rise as the links */
}
.menu.open .menu-aside .logo { opacity: 1; transform: none; transition-delay: 0.3s; }  /* lands with the last links */
@media (max-width: 860px) {
  .menu { grid-template-columns: 1fr; align-content: center; }
  .menu-main { padding: 120px 0 40px; }
  .menu-aside { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--cm-white) 12%, transparent); padding: 40px 0; }
  .menu-aside .logo { max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.open, .menu-list a, .menu-aside .logo { transition: none; }
}

/* Work surfaces: white cards on the white canvas, framed by a hairline border. */
section, details.acc, form.surface, .surface, main > ul.entries, .tabs, .filters {
  background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-card); border-radius: var(--radius);
}
section { padding: var(--space-5); margin-bottom: var(--gutter); }
.surface, form.surface { padding: var(--space-5); margin-bottom: var(--gutter); }
main > ul.entries { padding: var(--space-2) var(--space-5); }

/* Home hero: a full-bleed Sky band, 100svh, that runs up behind the transparent header. Business status + AI status,
   centered, everything white on it (owner's call: white on Sky is 2.9:1). Agent marks keep their color except
   charcoal ones, which turn white. A chevron at the bottom jumps to the board below. */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 56px;
  min-height: 100svh; margin-top: calc(-1 * var(--header-height));
  padding: calc(var(--header-height) + var(--space-6)) max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) 88px; text-align: center;  /* sides match the header */
  background: var(--surface-hero); color: var(--text-on-hero);
}
.hero :focus-visible { outline-color: var(--text-on-hero); }
.kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); margin: 0 0 var(--space-4); color: var(--text-on-hero); }
.hero-body { max-width: 60ch; margin: 0 auto; font-size: var(--text-lg); font-weight: 500; }
.agent-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.agent-tile {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 220px; padding: 14px 18px 14px 16px; text-align: left;
  border: 1.5px solid var(--text-on-hero); border-radius: var(--radius); color: var(--text-on-hero);
}
.agent-tile:hover { background: color-mix(in srgb, var(--cm-white) 14%, transparent); z-index: 5; }
.agent-tile strong { font-weight: 700; }
.agent-logo { display: block; flex: none; width: 32px; height: 32px; color: var(--text-on-hero); }
.agent-logo--none {
  display: grid; place-items: center; border-radius: 50%; background: var(--actor); color: var(--text-primary);
  font: 400 var(--text-base)/1 var(--font-display);
}
/* Status dot, pushed to the right edge: filled Tailgate Yellow = connected, hollow Tailgate Yellow ring = not connected. */
.status-dot { flex: none; width: 12px; height: 12px; margin-left: auto; border-radius: 50%; }
.status-dot.on { background: var(--cm-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-yellow) 35%, transparent); }
.status-dot.off { border: 2.5px solid var(--status-live); }
/* Connected / last seen / last write: a tooltip bubble after a short hover (or keyboard focus). */
.agent-tile .meta {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; width: max-content; max-width: min(320px, 80vw);
  background: var(--surface-dark); color: var(--text-inverse); border-radius: var(--radius-sm); padding: 6px 10px;
  box-shadow: var(--shadow-pop); font-size: var(--text-xs); line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-2px); pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}
.agent-tile .meta::before {
  content: ""; position: absolute; top: -4px; left: 16px; width: 8px; height: 8px; background: var(--surface-dark); transform: rotate(45deg);
}
.agent-tile:hover .meta, .agent-tile:focus-visible .meta {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.15s 0.4s, transform 0.15s 0.4s, visibility 0s 0.4s;
}
.hero-cue {
  position: absolute; bottom: var(--space-4); left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-on-hero);
  animation: cue 2s ease-in-out infinite;
}
.hero-cue .icon { width: 28px; height: 28px; }
@keyframes cue { 50% { transform: translateY(6px); } }
/* Home bands below the hero: Sky hero (white on Sky) → Tailgate Yellow checklist band → white board.
   On the light bands, section titles are charcoal Bebas Neue (readable) with a muted kicker; brand color goes into
   the marks that carry meaning. On the Tailgate Yellow band everything is charcoal (ticks, progress, Add); Sky on the board. */
.band { padding: 72px var(--gutter); }
.band-inner { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto; }  /* same content width as <main> */
.band--checklist { background: var(--surface-band); color: var(--text-primary); scroll-margin-top: calc(var(--header-height) - 26px); }
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.band-head .kicker { color: var(--text-muted); margin-bottom: var(--space-2); }
.band-head h2 { font-size: var(--heading-lg); color: var(--text-primary); margin: 0; }
.band-head--board { margin: var(--space-4) 0 var(--space-5); }
.progress-label { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.progress-label strong { color: var(--text-primary); }
.progress { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cm-ink) 14%, transparent); overflow: hidden; margin-bottom: var(--space-5); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--text-primary); transition: width 0.4s ease; }
.checklist { list-style: none; margin: 0 0 var(--space-5); padding: 0; columns: 2 320px; column-gap: var(--space-6); }
.task {
  break-inside: avoid; display: flex; align-items: center; gap: var(--space-3); padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cm-ink) 10%, transparent);
}
.task-toggle { margin: 0; display: contents; }
.task-toggle button {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 8px;
  background: var(--surface-primary); border: 2px solid var(--text-primary); color: transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.task-toggle button:hover { background: var(--surface-primary); border-color: var(--text-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-ink) 18%, transparent); }
.task-toggle button .icon { width: 16px; height: 16px; stroke-width: 3; }
.task.done .task-toggle button { background: var(--text-primary); border-color: var(--text-primary); color: var(--cm-yellow); }
.task-title { flex: 1; font-weight: 500; }
.task.done .task-title { color: color-mix(in srgb, var(--cm-ink) 65%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cm-ink) 40%, transparent); }
.task-area {
  flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-primary); border: 1px solid var(--border);
}
/* Add: one centered pill; opening it reveals the form (title, area dropdown, custom area for "Other…"). */
.task-add-wrap { text-align: center; }
.task-add-open {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--text-primary); color: var(--text-inverse); font-weight: 700; list-style: none;
  transition: background 0.2s ease;
}
.task-add-open::-webkit-details-marker { display: none; }
.task-add-open:hover { background: color-mix(in srgb, var(--cm-ink) 85%, var(--cm-white)); }
.task-add-open .icon { width: 18px; height: 18px; color: var(--cm-yellow); }
.task-add-wrap[open] .task-add-open { display: none; }
.task-add { display: flex; flex-wrap: wrap; gap: var(--space-2); text-align: left; }
.task-add select { flex: 0 1 180px; border-color: transparent; }
.task-add input[name=area_other] { flex: 0 1 180px; }
.task-add input[hidden] { display: none; }
.task-add .task-add-cancel { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.task-add .task-add-cancel:hover { background: color-mix(in srgb, var(--cm-ink) 10%, transparent); border-color: var(--text-primary); }
.task-add input { border-color: transparent; }
.task-add button:not(.task-add-cancel) { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.task-add button:hover { background: color-mix(in srgb, var(--cm-ink) 85%, var(--cm-white)); border-color: transparent; }
.task-add input[name=title] { flex: 1 1 280px; }
/* Board cards: charcoal titles on white; the Sky +/− and outline stay the accent. */
.home-card > summary h2 { color: var(--text-primary); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .hero-cue { animation: none; } }

ul.entries { list-style: none; margin: 0; padding: 0; }
ul.entries li { padding: 10px 0; border-bottom: 1px solid var(--border); }
ul.entries li:last-child { border-bottom: 0; }
.body, .snippet { white-space: pre-wrap; color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.meta { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.who { white-space: nowrap; }
.who .agent-logo { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--author-logo, #000); }
.who--claude .agent-logo { color: var(--author-logo, #D97757); }
/* Dark surfaces set the inherited override; light author labels use their brand color. */
.top, .menu, [data-backdrop="dark"], [data-theme="dark"] { --author-logo: #fff; }

/* Badges: quiet by default; color only where it carries meaning */
.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 500; line-height: 1.5; padding: 0 7px; margin-left: var(--space-1);
  border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted); vertical-align: middle;
}
.s-open { background: var(--status-warning); border-color: var(--status-warning); color: var(--text-primary); }
.s-archived, .s-superseded { text-decoration: line-through; }
.badge.blocker { background: var(--status-danger); border-color: var(--status-danger); color: var(--text-inverse); font-weight: 700; }
.badge.week { background: var(--status-live); border-color: var(--status-live); color: var(--text-primary); }

/* Forms (always on a white surface) */
input, select, textarea, button, .button {
  font: inherit; font-size: var(--text-base); color: var(--text-primary); background: var(--surface-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 12px;
}
textarea { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo);
}
input[type=checkbox] { accent-color: var(--cm-ink); width: 18px; height: 18px; }
button, .button {
  background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary);
  font-weight: 700; cursor: pointer; display: inline-block;
}
button:hover, .button:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
button.secondary, .button.secondary { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--hover); border-color: var(--text-primary); }
button.danger { background: var(--surface-primary); color: var(--status-danger); border-color: var(--status-danger); }
button.danger:hover { background: var(--status-danger); color: var(--text-inverse); }
button.small { padding: 3px 10px; font-size: var(--text-sm); }
button.link { background: none; border: 0; padding: 6px 0; font-weight: 400; }
button.link:hover { background: none; text-decoration: underline; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 500; font-size: var(--text-sm); }
label small { color: var(--text-muted); font-weight: 400; font-size: var(--text-xs); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.row label { display: flex; flex-direction: column; gap: var(--space-1); }
label.check { flex-direction: row; align-items: center; gap: var(--space-2); padding-bottom: 10px; }
.narrow { max-width: 440px; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--gutter); }
.filters input[type=search] { flex: 1 1 240px; }
.inline { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.inline input { flex: 1 1 200px; }
.actions { display: flex; gap: var(--space-4); align-items: center; }

/* Login / consent: a single card with the one big script moment */
section.narrow { margin: 12vh auto 0; padding: var(--space-6); }
.wordmark { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); line-height: 1; }
.wordmark { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2); color: var(--cm-red); }
.wordmark .logo { height: 96px; width: auto; }
.wordmark .os { font: 400 var(--heading-md)/1 var(--font-display); color: var(--text-primary); }

/* Messages: white card, colored edge; text stays charcoal except errors (Hibiscus passes on white, 6:1) */
.error, .notice, .hint {
  background: var(--surface-primary); color: var(--text-primary); border-left: 5px solid var(--ui-accent);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4);
}
.error { color: var(--status-danger); border-left-color: var(--status-danger); font-weight: 500; }
.notice { border-left-color: var(--status-success); }
.hint { border-left-color: var(--status-warning); }
.secret { background: var(--surface-secondary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.secret code { display: block; margin: 6px 0 10px; padding: var(--space-2); background: var(--surface-primary); }
.secret code.recovery-codes { white-space: pre; font-size: var(--text-base); line-height: 1.6; columns: 2; max-width: 320px; }
.setup-steps { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-4); }
.qr { width: 200px; max-width: 100%; margin: var(--space-3) 0; padding: var(--space-2); background: var(--cm-white); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qr svg { display: block; width: 100%; height: auto; }
details.disclose { margin-top: var(--space-3); }
details.disclose > summary { cursor: pointer; font-weight: 500; color: var(--text-primary); }
details.disclose > form { margin-top: var(--space-3); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-2) 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--surface-secondary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
td form { margin: 0; }
section table { display: block; overflow-x: auto; }

/* Actor dot: identity color; filled = connected, ring = not connected. The hairline keeps pale colors visible on white. */
.dot {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0;
  background: var(--actor, var(--actor-system));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cm-ink) 45%, transparent);
}
.dot.off { background: transparent; border: 2.5px solid var(--actor, var(--actor-system)); }
.dot.sm { width: 8px; height: 8px; margin-right: 4px; }

.footer-line { margin-top: var(--gutter); }

/* Brain tabs: a white segmented bar; the selected view is charcoal and keeps its actor dot */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); margin: 0 0 var(--gutter); width: fit-content; max-width: 100%; }
.tab { padding: 7px 14px; color: var(--text-muted); border-radius: calc(var(--radius) - 4px); font-weight: 500; font-size: var(--text-sm); }
.tab:hover { color: var(--text-primary); background: var(--hover); }
.tab.on { color: var(--text-inverse); background: var(--surface-dark); font-weight: 700; }
.tab.on .dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cm-white) 55%, transparent); }

/* Accordions: white cards with Bebas Neue titles */
details.acc { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
details.acc > summary { cursor: pointer; font-size: var(--text-lg); }
details.acc > summary::marker { color: var(--ui-accent); }
details.acc > summary:hover { text-decoration: underline; text-decoration-color: var(--text-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
details.acc[open] > summary { margin-bottom: var(--space-3); }
.count { color: var(--text-muted); font: 400 var(--text-sm) var(--font-ui); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.row label.grow { flex: 1 1 240px; }

/* Home cards: full width, stacked; collapsed shows the top item, open shows the list */
.home-card { padding: var(--space-5); margin-bottom: var(--gutter); }
details.acc.home-card > summary { font: inherit; text-transform: none; color: var(--text-primary); }
.home-card > summary h2 { display: inline; margin: 0; }
details.acc.home-card > summary:hover { text-decoration: none; }
/* +/− toggle instead of the disclosure arrow; hover brings the outline to full Sky */
details.acc.home-card > summary { list-style: none; display: block; }
details.acc.home-card > summary::-webkit-details-marker { display: none; }
details.acc.home-card > summary::before {
  content: "+"; display: inline-block; width: 1.1em; margin-right: var(--space-1);
  font: 400 var(--heading-sm)/1 var(--font-display); color: var(--ui-accent);
}
details.acc.home-card[open] > summary::before { content: "\2212"; }
.home-card { transition: border-color 0.15s; }
.home-card:hover { border-color: var(--ui-accent); }
.home-card .preview { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-base); }
.home-card .preview .more { display: inline-block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.home-card[open] .preview { display: none; }
.home-card .preview a { text-decoration: none; font-weight: 500; }
.home-card .preview a:hover { text-decoration: underline; text-decoration-color: var(--ui-accent); }
.home-card .card-foot { margin: var(--space-3) 0 0; }
.promote { align-items: center; }

/* Small screens: tighter gutters and smaller display sizes */

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

@media (max-width: 640px) {
  .band { padding: 48px var(--gutter); }
  .band-head h2 { font-size: var(--heading-md); }
  :root { --gutter: var(--space-4); --header-height: 94px; }
  main { padding-top: var(--space-5); }
  h1 { font-size: var(--heading-md); }
  .hero { gap: 40px; }
  .hero-body { font-size: var(--text-base); }
  .agent-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
  .agent-tile { min-width: 0; gap: 10px; padding: 12px; }
  .agent-logo { width: 26px; height: 26px; }
  .agent-tile strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
  section, .surface, form.surface, section.narrow { padding: var(--space-4); }
  details.acc { padding: var(--space-3) var(--space-4); }
  .top { gap: var(--space-2); }
  .top.scrolled { height: calc(var(--header-height) - 10px); }
  .logo { height: 60px; }
  .top.scrolled .logo { height: 50px; }
  .top .os { display: none; }
  .top .header-logo { display: none; }
  .top .header-logo-mobile { display: block; height: 44px; }
  .top.scrolled .header-logo-mobile { height: 38px; }
  .top-left, .top-right { gap: 0; }
  .hamburger-label { display: none; }
  .menu { clip-path: circle(0% at 32px 47px); }
  .menu.open { clip-path: circle(150% at 32px 47px); }
  .menu-close { top: 25px; }
}

.completed-tasks { margin-bottom: var(--space-5); border-top: 1px solid var(--border-card); padding-top: var(--space-3); }
.completed-tasks summary { cursor: pointer; font-weight: 700; width: fit-content; }
.completed-tasks .checklist { margin-top: var(--space-3); }
[hidden] { display: none !important; }

/* Website screens (/site) */
textarea.code { font: var(--text-sm)/1.45 var(--font-mono); tab-size: 2; white-space: pre; }
.count-chars { align-self: flex-end; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.count-chars.over { color: var(--status-danger); font-weight: 700; }
.badge.sev-error { background: var(--status-danger); color: var(--text-inverse); }
.badge.sev-warning { background: color-mix(in srgb, var(--cm-yellow) 70%, var(--cm-white)); color: var(--text-primary); }
.badge.sev-info { background: var(--surface-neutral); color: var(--text-primary); }
.badge.s-pending { background: color-mix(in srgb, var(--cm-yellow) 70%, var(--cm-white)); color: var(--text-primary); }
.badge.s-approved, .badge.s-published, .badge.s-applied { background: color-mix(in srgb, var(--cm-lime) 45%, var(--cm-white)); color: var(--text-primary); }
.badge.s-rejected, .badge.s-withdrawn, .badge.s-draft { background: var(--surface-neutral); color: var(--text-muted); }
.block-help { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; font-size: var(--text-sm); }
.block-help dt { font-weight: 700; }
.block-help dd { margin: 0; }
.diff-row { margin-bottom: var(--space-4); }
.diff-row h3 { font: 700 var(--text-sm)/1.2 var(--font-ui); color: var(--text-primary); text-transform: none; margin: 0 0 var(--space-2); }
.diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.diff pre { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.diff-before { background: color-mix(in srgb, var(--cm-red) 8%, var(--cm-white)); box-shadow: inset 3px 0 0 var(--cm-red); }
.diff-after { background: color-mix(in srgb, var(--cm-lime) 14%, var(--cm-white)); box-shadow: inset 3px 0 0 var(--cm-lime); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.media-card { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-primary); }
.media-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-neutral); }
.media-card figcaption { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); font-size: var(--text-sm); overflow-wrap: anywhere; }
.row.tight { gap: var(--space-2); align-items: center; }
.row.tight input, .row.tight select { flex: 1; min-width: 0; }
.leads li { padding: var(--space-3) 0; }
@media (max-width: 640px) { .diff-cols { grid-template-columns: 1fr; } .block-help { grid-template-columns: 1fr; } }
fieldset.bare { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }

/* Home → Leads: always open; three counters (New turns yellow when > 0), latest leads, the email alert switch. */
.leads-card { border-color: var(--cm-red); }
.leads-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.leads-head h2 { margin: 0; color: var(--text-primary); }
.button-link { font-weight: 700; text-decoration: none; color: var(--cm-red); white-space: nowrap; }
.button-link:hover { text-decoration: underline; }
.lead-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.lead-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-neutral); }
.lead-stat strong { font: 400 var(--heading-lg)/1 var(--font-display); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lead-stat span { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lead-stat.hot { background: var(--cm-yellow); }
.lead-stat.hot span { color: var(--text-primary); }
.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.lead-list a { text-decoration: none; color: var(--text-primary); }
.lead-list a:hover { text-decoration: underline; text-decoration-color: var(--ui-accent); }
.lead-list .meta { flex-basis: 100%; }
.lead-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.lead-alert-error { font-size: var(--text-sm); color: var(--status-danger); flex-basis: 100%; }
button.switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none; color: var(--text-primary); font: 600 var(--text-base) var(--font-ui); cursor: pointer; }
button.switch:hover { background: none; }
.switch-track { position: relative; width: 44px; height: 26px; border-radius: 99px; background: color-mix(in srgb, var(--cm-ink) 22%, transparent); transition: background 0.2s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cm-white); box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform 0.2s; }
button.switch[aria-checked="true"] .switch-track { background: var(--cm-red); }
button.switch[aria-checked="true"] .switch-track::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }

/* Compact website footer on every OS page */
.app-footer { margin-top: 64px; background: var(--cm-red); color: var(--cm-white); padding: var(--space-6) var(--gutter) var(--space-4); }
.app-footer__inner { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); }
.app-footer .logo { height: 64px; width: auto; color: var(--cm-white); transition: none; }
.app-footer__line { margin: 0; text-align: center; font: 400 var(--heading-md)/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.app-footer nav { display: flex; align-items: center; gap: var(--space-4); }
.app-footer nav a { color: var(--cm-white); font-weight: 600; text-decoration: none; }
.app-footer nav a:hover { text-decoration: underline; }
.app-footer .social-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; }
.app-footer .social-link svg { width: 18px; height: 18px; }
.app-footer__legal { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: var(--space-5) auto 0; font-size: var(--text-xs); opacity: 0.85; }
@media (max-width: 640px) {
  .lead-stats { gap: var(--space-2); }
  .lead-stat { padding: var(--space-2) var(--space-3); }
  .lead-stat strong { font-size: var(--heading-md); }
  .app-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.lead-alert-to { display: flex; align-items: center; gap: var(--space-2); }
.lead-alert-to label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.lead-alert-to input { width: 16rem; max-width: 60vw; padding: 6px 10px; }