/* Self-hosted variable fonts (OFL, via Fontsource): the interface looks the same on every machine. */
/* inter-latin-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* source-serif-4-latin-ext-opsz-normal */
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* source-serif-4-latin-opsz-normal */
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Factory's design language: Stone.
 * Warm gray paper, near-black ink, one ultramarine accent for what is yours to click and what is cooking.
 * Color is spent on attention: autonomous work stays quiet, and only two things are warm or red.
 *   cooking  ultramarine  an agent works on its own; never moves, never asks
 *   yours    amber        a step waits for you (a human gate, or a question)
 *   stuck    red, ringed  a run failed or the agent is blocked
 *   served   sage         a recipe finished
 * Sizes: controls 24px (sm) and 30px, chips 20px, radii 4/6/8/12, spacing on a 4px scale.
 * Type: Inter for the interface, Source Serif 4 for titles, JetBrains Mono for code, paths and ids.
 */
:root {
  color-scheme: light;

  /* Surfaces, from the page outward. */
  --bg: #fdfcfa;          /* main content */
  --bg2: #f5f4f1;         /* raised: code, cards, composer field, dialogs */
  --bg3: #ebe9e4;         /* hover and selected */
  --side: #ecebe6;        /* sidebar and side panel */
  --side-hover: #e2e0da;
  --side-sel: #dcd9d2;
  --line: #e6e4de;        /* hairlines */
  --line2: #d3d0c8;       /* control borders */

  /* Ink. */
  --fg: #1d1c1a;
  --ink2: #3a3833;        /* body text of long prose */
  --muted: #66635c;       /* secondary text, 5.6:1 on --bg */
  --dim: #8c8880;         /* decoration only: arrows, separators, placeholders */

  /* The one accent, and the states. */
  --accent: #3b4fd8;
  --accent-bg: rgba(59, 79, 216, 0.08);
  --accent-line: rgba(59, 79, 216, 0.35);
  --cook: #3b4fd8;
  --yours: #e0832f;
  --yours-ink: #a85a12;
  --yours-bg: rgba(224, 131, 47, 0.08);
  --yours-line: rgba(224, 131, 47, 0.4);
  --stuck: #cc3a2f;
  --stuck-ring: rgba(204, 58, 47, 0.18);
  --stuck-bg: rgba(204, 58, 47, 0.06);
  --ok: #3f8a5a;
  --ok-bg: rgba(63, 138, 90, 0.1);
  --warn: #a85a12;
  --bad: #cc3a2f;

  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --shadow-float: 0 0 0 1px var(--line2), 0 8px 28px -8px rgba(40, 36, 28, 0.22);

  --sans: "Inter Variable", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4 Variable", "Iowan Old Style", Georgia, ui-serif, serif;
  --mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Status dots: the four states, and nothing else gets these colors ── */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dim); }
.dot.cooking { background: var(--cook); }
.dot.yours { background: var(--yours); }
.dot.stuck { background: var(--stuck); box-shadow: 0 0 0 2.5px var(--stuck-ring); }
.dot.served { background: var(--ok); }
.dot.idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); }

/* ── Buttons: 30px default, 24px .sm, icon buttons square ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--fg); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; font-size: 13px; text-decoration: none; }
.btn:hover { background: var(--bg2); border-color: var(--dim); }
.btn.sm { height: 24px; padding: 0 9px; font-size: 12px; border-radius: var(--r-xs); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary:hover { background: #33312d; }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg3); color: var(--fg); }
.btn.danger { color: var(--bad); }
.btn.approve { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn .ic { width: 14px; height: 14px; }
.iconbtn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.iconbtn:hover { background: var(--bg3); color: var(--fg); }
.iconbtn .ic { width: 14px; height: 14px; }
.btn:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Chips: 20px, for keys, repos, small facts ── */
.chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; font-size: 11.5px; border-radius: var(--r-xs); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; }
button.chip { cursor: pointer; } button.chip:hover { box-shadow: inset 0 0 0 1px var(--dim); color: var(--fg); }
.chip .k { font-family: var(--mono); color: var(--muted); }
.chip.mono { font-family: var(--mono); font-size: 11px; }

/* ── Attention card: the only warm surface ── */
.attn { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: var(--r); background: var(--yours-bg); box-shadow: inset 0 0 0 1px var(--yours-line); }
.attn > .ic { color: var(--yours); width: 15px; height: 15px; }
.attn.stuck { background: var(--stuck-bg); box-shadow: inset 0 0 0 1px var(--stuck-ring); }
.attn.stuck > .ic { color: var(--stuck); }

/* ── Tabs ── */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.tabs button { all: unset; cursor: pointer; padding: 7px 0; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.tabs .count { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ── Titles in serif ── */
.serif { font-family: var(--serif); letter-spacing: -0.005em; }

/* Inter reads best slightly tightened, with weights a notch lighter than the usual 600 bold. */
body { letter-spacing: -0.006em; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
b, strong { font-weight: 600; }