/* nerd's design system: the board's colours, type, space and the pieces it is made of. Everything the page draws
   is made from what is here, by these names, and a piece the page needs that is not here yet is added here first.

   Calm surfaces and hairlines, so that the data is the only thing that is loud. One accent, for what can be done
   and for the agents' time. Green, amber and red mean passed, wants a look, and failed, and nothing else, and
   come with a word or a shape beside them, never on their own. Dark is its own set of steps from the same hues,
   checked against its own ground: not the light one turned over. Every text colour is 5:1 or better on the
   grounds it sits on; --ink-4 is for marks only, and is never text. */

:root {
  color-scheme: light dark;

  /* The grounds things sit on, and the hairlines that edge them. */
  --ground: #f5f5f2;
  --surface: #ffffff;
  --sunk: #f1f0ec;
  --night: #f7f6f2;
  --line: #e6e4de;
  --line-strong: #d3d0c8;

  /* Ink, from loudest to quietest. */
  --ink: #161615;
  --ink-2: #52514e;
  --ink-3: #6b6963;
  --ink-4: #b9b6ad;

  /* The accent: marks drawn in it, buttons filled with it and what is written on them, links, and tints. */
  --accent: #2a78d6;
  --accent-fill: #256abf;
  --on-accent: #ffffff;
  --accent-ink: #1f62b5;
  --accent-wash: #e8f1fc;
  --accent-ring: rgb(42 120 214 / 0.18);

  /* What things came to: passed, wants a look, stopped at its limit, failed. */
  --good: #0ca30c;
  --good-ink: #1a7a2e;
  --good-wash: #e9f6ec;
  --warn: #fab219;
  --warn-ink: #8a5300;
  --warn-wash: #fdf3dc;
  --warn-deep: #5c3a00;
  /* What is drawn on the warning's own colour, which is the same on either ground. */
  --on-warn: #5c3a00;
  --serious: #ec835a;
  --bad: #d03b3b;
  --bad-ink: #b42626;
  --bad-wash: #fbeaea;

  /* Data: the two things an agent's time went to, what is there to compare against, and time at work in an hour,
     lighter for less. */
  --series-model: #2a78d6;
  --series-tools: #eb6834;
  --series-quiet: #d3d0c8;
  /* A project's robot at work, apart from its sessions; its runs that have ended, lighter; its issues done; and the
     robot's own chip. */
  --series-robot: #7a52e0;
  --series-robot-soft: #b8a3f0;
  --series-done: #9fd3a8;
  --robot-wash: #f0ebfc;
  --robot-ink: #5b3cc4;
  /* A robot's run with Codex, while Claude's plan holds the robots, as the robot's purple is Claude's; and Codex's
     plan, inside the plan's ring. */
  --series-codex: #12857c;
  --series-codex-soft: #8fd0c8;
  --codex-wash: #e2f3f1;
  --codex-ink: #0d6b64;
  /* What is filled to be pressed in the robot's purple, and what is written on it: File for robot. */
  --robot-fill: #7a52e0;
  --on-robot: #ffffff;
  /* The morning brief, its magenta (#121): its ink, its wash, and what is filled to be pressed in it, File as idea. */
  --brief-ink: #8e2f72;
  --brief-wash: #f7e9f2;
  --brief-fill: #a53a86;
  --brief-line: #e9c9de;
  --on-brief: #ffffff;
  /* A number of a project's mechanical intuition: its baseline, as a band, and what was done to it, marked in a lane
     under its chart: a regression nerd filed, its issue closed, and its baseline written again. Its ideal is a dashed
     line in --good-ink. */
  --baseline-band: #e3ecf7;
  --mark-regressed: #d9730d;
  --mark-closed: #1a7a2e;
  --mark-baseline: #3d5f8f;
  --heat-0: #eeede8;
  --heat-1: #cde2fb;
  --heat-2: #9ec5f4;
  --heat-3: #6da7ec;
  --heat-4: #3987e5;
  --heat-5: #256abf;
  --heat-6: #184f95;

  /* A server's terminal. */
  --terminal: #16161a;
  --terminal-ink: #e6e3dc;

  /* Type. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Space, corners and depth. A hairline is the edge of everything; a shadow is only for what floats over the
     page. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --radius-mark: 3px;
  --radius-badge: 4px;
  --radius-control: 7px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --shadow-card: 0 1px 2px rgb(22 22 21 / 0.04);
  --shadow-float: 0 12px 32px rgb(22 22 21 / 0.16), 0 0 0 1px rgb(22 22 21 / 0.06);
  --shadow-drawer: -12px 0 40px rgb(22 22 21 / 0.18);
  --backdrop: rgb(22 22 21 / 0.42);
  --quick: 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --slide: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e0e0f;
    --surface: #18181a;
    --sunk: #232325;
    --night: #1c1c1e;
    --line: #29292c;
    --line-strong: #3a3a3e;
    --ink: #f2f1ed;
    --ink-2: #c3c2b7;
    --ink-3: #9b998f;
    --ink-4: #55534f;
    --accent: #3987e5;
    --accent-fill: #3987e5;
    --on-accent: #0b1626;
    --accent-ink: #7fb0f0;
    --accent-wash: rgb(57 135 229 / 0.16);
    --accent-ring: rgb(57 135 229 / 0.28);
    --good-ink: #4cc764;
    --good-wash: rgb(12 163 12 / 0.14);
    --warn-ink: #f2bd4b;
    --warn-wash: rgb(250 178 25 / 0.12);
    --warn-deep: #f6d38a;
    --bad-ink: #ff8a80;
    --bad-wash: rgb(208 59 59 / 0.16);
    --series-model: #3987e5;
    --series-tools: #d95926;
    --series-quiet: #3f3f43;
    --series-robot: #9d82f2;
    --series-robot-soft: #4d3c87;
    --series-done: #3f8a52;
    --robot-wash: rgb(157 130 242 / 0.16);
    --robot-ink: #c0adf7;
    --series-codex: #3fb8ac;
    --series-codex-soft: #2a6b65;
    --codex-wash: rgb(63 184 172 / 0.16);
    --codex-ink: #7fd6cc;
    --brief-ink: #eda8d8;
    --brief-wash: rgb(165 58 134 / 0.2);
    --brief-fill: #b84a97;
    --brief-line: rgb(237 168 216 / 0.32);
    --baseline-band: rgb(57 135 229 / 0.2);
    --mark-regressed: #f0913a;
    --mark-closed: #4cc764;
    --mark-baseline: #8fa9d6;
    /* More is lighter on a dark ground. */
    --heat-0: #222224;
    --heat-1: #173a66;
    --heat-2: #1c4f8f;
    --heat-3: #2a6bc0;
    --heat-4: #3987e5;
    --heat-5: #6da7ec;
    --heat-6: #a9cbf5;
    --terminal: #0d0d10;
    --shadow-card: none;
    --shadow-float: 0 12px 32px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.08);
    --shadow-drawer: -12px 0 40px rgb(0 0 0 / 0.5);
    --backdrop: rgb(0 0 0 / 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --quick: 0ms linear;
    --slide: 0ms linear;
  }
}

/* ---- The ground every page stands on. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/20px var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; line-height: 22px; font-weight: 650; }
h3 { font-size: 13px; line-height: 18px; font-weight: 650; }

a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12px; }
/* A command for the person to run: one click takes the whole of it. */
code.settle { user-select: all; overflow-wrap: anywhere; color: var(--ink-2); margin-top: 2px; }
/* Code in what someone said, as its backticks mark it (#177): a span set off in the line, and a block on lines of its own. */
code.said-code, code.said-block { padding: 1px 5px; border-radius: 4px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
code.said-block { display: block; margin: 4px 0; padding: 8px 10px; white-space: pre-wrap; line-height: 18px; }
/* What was said, drawn from its Markdown (#182): its blocks spaced as a comment's, its lists indented under their marks,
   its quotes set off by a bar, its tables ruled; and in a line, its words as they were written. */
.md { white-space: normal; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.md > *, .md li > *, .md blockquote > * { margin: 0; }
.md li > * + *, .md blockquote > * + * { margin-top: 6px; }
.md .md-heading { font-size: 1em; line-height: inherit; font-weight: 700; }
.md-list { padding-left: 22px; }
.md-list li + li { margin-top: 4px; }
.md-list:not(.tight) li + li { margin-top: 8px; }
.md-list li::marker { color: var(--ink-3); }
.md-list .md-list { margin-top: 4px; }
.md-quote { padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.md-rule { border: 0; border-top: 1px solid var(--line); width: 100%; }
.md-table { overflow-x: auto; max-width: 100%; }
.md-table table { border-collapse: collapse; font-size: 0.93em; }
.md-table th, .md-table td { padding: 4px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.md-table th { font-weight: 600; background: var(--surface); }
.md code.said-block { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The type scale, for what is not a heading. */
.text-figure { font-size: 28px; line-height: 32px; font-weight: 650; letter-spacing: -0.02em; }
.text-small { font-size: 13px; line-height: 18px; }
.text-caption { font-size: 12px; line-height: 16px; }
.text-label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.quiet { color: var(--ink-3); }
.secondary { color: var(--ink-2); }
.warn { color: var(--warn-ink); }
.error { color: var(--bad-ink); }
.numbers { font-variant-numeric: tabular-nums; }

/* ---- Controls. One primary for each thing at most. */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--quick), background var(--quick);
}
button:hover:not(:disabled), .button:hover { border-color: var(--ink-3); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.primary:hover:not(:disabled) { border-color: var(--accent-fill); background: color-mix(in srgb, var(--accent-fill) 88%, var(--ink)); }
.danger { background: var(--bad-ink); border-color: var(--bad-ink); color: #ffffff; font-weight: 600; }
.subtle { border-color: transparent; background: transparent; color: var(--ink-2); }
.subtle:hover:not(:disabled) { border-color: var(--line-strong); }
.small { height: 30px; padding: 0 11px; }
.icon { width: 32px; padding: 0; }
.link {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.link:hover:not(:disabled) { text-decoration: underline; }

label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
input:not([type="checkbox"]), textarea, select {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
textarea { resize: vertical; }
.hint { margin: 4px 0 12px; color: var(--ink-3); font-size: 12px; line-height: 17px; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; }

/* ---- Words with a mark: how a server stands, what came of something, a commit. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.chip.working { background: var(--accent-wash); color: var(--accent-ink); }
.chip.working .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chip.waiting, .chip.terminal { background: var(--warn-wash); color: var(--warn-ink); }
.chip.terminal .dot { background: var(--warn); }
.chip.stopped { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip.stopped .dot { background: transparent; border: 1.5px solid var(--ink-3); }
.chip.robot { background: var(--robot-wash); color: var(--robot-ink); }
.chip .ico { flex: none; }

/* A button that is only an icon, its words in its label; and one that is on, as a run the person has joined. */
.icon-button { width: 30px; height: 30px; padding: 0; border-color: var(--line); color: var(--ink-2); flex: none; }
.icon-button.on { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-fill); border-radius: var(--radius-control); background: var(--accent-wash); color: var(--accent-ink); }
a.icon-button.on:hover { text-decoration: none; }
.icon-button.joining { animation: joining 1.2s ease-in-out infinite alternate; }
@keyframes joining { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .icon-button.joining { animation: none; } }
/* A button whose act is in flight (common.js, acts): held, and breathing, until the board has answered and the page
   shows what came of it. */
button[aria-busy] { cursor: progress; animation: joining 1.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { button[aria-busy] { animation: none; } }
.not-joined { display: inline-flex; align-items: center; cursor: help; }

/* A choice that is the whole answer, rounded as a word said. */
.pill { border-radius: 999px; height: 36px; padding: 0 15px; font-size: 14px; }

/* A switch: on or off, its word beside it. */
.switch { height: 30px; padding: 0 4px 0 10px; gap: 8px; border-color: transparent; background: transparent; color: var(--ink-2); }
.switch-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background var(--quick); }
.switch-track > span { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: left var(--quick); }
.switch.on .switch-track { background: var(--series-robot); }
.switch.on .switch-track > span { left: 18px; }

/* A choice of two halves, each large enough to press without aiming, the one chosen filled in its own colour: a
   brief's card as a task for the robot, in its purple, or an idea, in the brief's magenta. */
.halves { display: flex; gap: 3px; padding: 3px; border-radius: 22px; background: var(--surface); }
.halves button { flex: 1; height: 40px; border: 0; border-radius: 19px; background: transparent; font-size: 14px; font-weight: 500; }
.halves button.task { color: var(--robot-ink); }
.halves button.idea { color: var(--brief-ink); }
.halves button[aria-pressed="true"] { font-weight: 600; cursor: default; }
.halves button.task[aria-pressed="true"] { background: var(--robot-fill); color: var(--on-robot); }
.halves button.idea[aria-pressed="true"] { background: var(--brief-fill); color: var(--on-brief); }

/* What is pressed to send something where its colour says: to the robot, or to the ideas to shape. */
.fill-robot { background: var(--robot-fill); border-color: var(--robot-fill); color: var(--on-robot); font-weight: 600; }
.fill-brief { background: var(--brief-fill); border-color: var(--brief-fill); color: var(--on-brief); font-weight: 600; }
.fill-robot:hover:not(:disabled) { border-color: var(--robot-fill); background: color-mix(in srgb, var(--robot-fill) 88%, var(--ink)); }
.fill-brief:hover:not(:disabled) { border-color: var(--brief-fill); background: color-mix(in srgb, var(--brief-fill) 88%, var(--ink)); }
/* A word chosen with a tap, from a few: pressed, it is filled. */
.pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }

/* A run's time against its limit: a ring that fills. */
.ring { flex: none; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.ring-fill { fill: none; stroke: var(--series-robot); stroke-width: 3; stroke-linecap: round; }
.ring.codex .ring-fill { stroke: var(--series-codex); }

/* A robot's issues as one bar, a part for each of done, working, asking the person and next; and its key. */
.issue-bar { display: flex; gap: 2px; height: 10px; flex: 1; min-width: 0; }
.issue-bar .seg { min-width: 4px; }
.issue-bar .seg:first-child { border-radius: 5px 0 0 5px; }
.issue-bar .seg:last-child { border-radius: 0 5px 5px 0; }
.issue-bar .seg:only-child { border-radius: 5px; }
.issue-bar.empty { border: 1.5px dashed var(--line-strong); border-radius: 5px; }
.seg.done, .swatch.done { background: var(--series-done); }
.seg.working, .swatch.working { background: var(--series-robot); }
.seg.codex, .swatch.codex { background: var(--series-codex); }
.seg.asking, .swatch.asking { background: var(--warn); }
.seg.next { background: var(--line); }
.swatch.next { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.swatch { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 3px; flex: none; color: #ffffff; }

.badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-badge);
  background: var(--sunk);
  color: var(--ink-3);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.warn { background: var(--warn-wash); color: var(--warn-ink); }
.badge.bad { background: var(--bad-wash); color: var(--bad-ink); }
.badge.good { background: var(--good-wash); color: var(--good-ink); }
.badge.brief { background: var(--brief-fill); color: var(--on-brief); }

.commit { font-family: var(--mono); font-size: 12px; padding: 0 5px; border-radius: var(--radius-badge); background: var(--sunk); color: var(--ink-2); }

/* The marks beside a word that say what kind of thing it is: a warning, or a failure. */
.glyph { width: 14px; height: 14px; flex: none; }
.glyph .fill-warn { fill: var(--warn); }
.glyph .on-warn { stroke: var(--warn-deep); }
.glyph .stroke { fill: none; stroke: currentColor; }

/* ---- What needs the person: at the top of the page, above everything, and gone when it is done. Nothing else is
   amber. */

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--warn-wash);
  color: var(--warn-deep);
  font-size: 13px;
  line-height: 18px;
}
.banner .glyph { width: 16px; height: 16px; }
.banner > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.banner button { background: var(--warn-ink); border-color: var(--warn-ink); color: var(--surface); font-weight: 600; }

/* ---- Surfaces. */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.well { padding: 12px 14px; border-radius: 10px; background: var(--sunk); }

/* A stat tile: what a number is, the number, what it means, and how it went. */
.tile { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; line-height: 16px; }
.tile-head > :first-child { font-weight: 600; color: var(--ink-2); }
.tile-head > :last-child { color: var(--ink-3); }
.tile-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tile-value { white-space: nowrap; }
.tile-value small { margin-left: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.tile-sub { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.tile .chart { flex: none; }
.tile .chart.line { flex: 1 1 0; min-width: 0; }

/* A meter: one ratio against its limit. The track is the fill's own hue, lighter. */
.meter { height: 4px; border-radius: 2px; background: var(--accent-wash); overflow: hidden; }
.meter > div { height: 100%; width: 0; background: var(--accent); }
.meter.warn > div { background: var(--warn-ink); }

/* ---- Charts. A chart has no colours of its own: its marks take them from here. */

.chart { display: block; overflow: visible; }
.chart.line { padding: 5px 5px 0 0; }
.chart .mark-accent { fill: var(--accent); }
.chart .mark-quiet { fill: var(--series-quiet); }
.chart .mark-model { fill: var(--series-model); }
.chart .mark-tools { fill: var(--series-tools); }
.chart .mark-robot { fill: var(--series-robot); }
.chart .run-going { fill: var(--series-robot); }
.chart .run-done { fill: var(--series-robot-soft); }
.chart .run-going.codex { fill: var(--series-codex); }
.chart .run-done.codex { fill: var(--series-codex-soft); }
.chart .session-time { fill: var(--series-model); }
.chart .day-ground { fill: var(--night); }
.chart .day-tick { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .day-now { fill: var(--ink); }
.chart .mark-good { fill: var(--good); }
.chart .mark-bad { fill: var(--bad); }
.chart .mark-serious { fill: var(--serious); }
.chart .night { fill: var(--night); }
.chart .midnight { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .hairline { stroke: var(--line); stroke-width: 1; }
.chart .line-accent { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .area-accent { fill: var(--accent); fill-opacity: 0.12; }
.chart .dot-accent { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .point-ring { stroke: var(--surface); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .point-accent { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .dot-hollow { fill: var(--surface); stroke: var(--accent); stroke-width: 1.3; }
.chart .dot-bad { fill: var(--bad); stroke: var(--surface); stroke-width: 1.5; }
.chart .dot-serious { fill: var(--serious); stroke: var(--surface); stroke-width: 1.5; }
.chart .limit { stroke: var(--bad); stroke-opacity: 0.6; stroke-width: 1; }
.chart .usual { stroke: var(--ink-3); stroke-opacity: 0.7; stroke-width: 1; }
.chart .rug { stroke-width: 2; stroke-linecap: round; }
.chart .rug.deploy { stroke: var(--accent); }
.chart .rug.ran { stroke: var(--ink-4); }
.chart .rug.push { stroke: var(--ink-3); }
.chart .rug.push.robot { stroke: var(--series-robot); }
.chart .rug.loosened { stroke: var(--warn); stroke-width: 3; }
.chart .rug.failed { stroke: var(--bad); }

/* A number over its days, as a project's mechanical intuition charts it: its line in the accent's ink, its baseline as
   a band, its ideal dashed, and nothing written in it. Under it, a lane that stays put, where what was done is marked,
   with a faint dashed line from each mark up through the chart. */
.chart .grid { stroke: var(--sunk); stroke-width: 1; }
.chart .band { fill: var(--baseline-band); }
.chart .ideal { fill: none; stroke: var(--good-ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.chart .ideal.small { stroke-width: 1; stroke-dasharray: 3 3; }
.chart .trend-line { fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .trend-line.small { stroke-width: 1.3; }
.chart .trend-last { fill: var(--accent-ink); }
.chart .lane { fill: var(--night); }
.chart .guide { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .event { stroke: var(--surface); stroke-width: 1.5; }
.chart .event.small { stroke-width: 0; }
.chart .event.regressed, .event-mark.regressed { fill: var(--mark-regressed); background: var(--mark-regressed); }
.chart .event.closed, .event-mark.closed { fill: var(--mark-closed); background: var(--mark-closed); }
.chart .event.baseline, .event-mark.baseline { fill: var(--mark-baseline); background: var(--mark-baseline); }
.chart .tick { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }

/* What was done, beside the words that say it: a dot for a regression and its issue closed, a diamond for a
   baseline written again, as the lane marks them. */
.event-mark { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.event-mark.baseline { border-radius: 0; transform: rotate(45deg) scale(0.9); }

/* Whether a number holds within its baseline: a pill beside it. */
.standing { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.standing.good { background: var(--good-wash); color: var(--good-ink); }
.standing.warn { background: var(--warn-wash); color: var(--warn-ink); }

/* A legend's keys: a swatch for a fill, a stroke for a line or a tick. */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
.key.tick { width: 2px; height: 10px; border-radius: 1px; }
.key.line { width: 14px; height: 1px; border-radius: 0; }
.key.dot { border-radius: 50%; }
.key.hollow { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.key.tools { background: var(--series-tools); }
.key.robot { background: var(--series-robot); }
.key.codex { background: var(--series-codex); }
.key.span { width: 14px; height: 3px; border-radius: 1px; }
.key.ran { background: var(--ink-4); }
.key.short { height: 5px; }
.key.pushed { background: var(--ink-3); }
.key.loosened { background: var(--warn); }
.key.good { background: var(--good); }
.key.bad { background: var(--bad); }
.key.usual { background: var(--ink-3); }
.key.band { width: 16px; height: 10px; border-radius: 0; background: var(--baseline-band); }
.key.ideal { width: 16px; height: 0; border-radius: 0; background: none; border-top: 1.5px dashed var(--good-ink); }

/* Time at work in an hour: one hue, darker for more; lighter on a dark ground. */
.heat-0 { background: var(--heat-0); }
.heat-1 { background: var(--heat-1); }
.heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); }
.heat-4 { background: var(--heat-4); }
.heat-5 { background: var(--heat-5); }
.heat-6 { background: var(--heat-6); }
.heat-none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* What the pointer, or the keyboard, finds on a chart: the value first, then what it is. */
.tip {
  position: fixed;
  z-index: 20;
  min-width: 180px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
.tip .when { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.tip strong { font-size: 15px; line-height: 20px; font-weight: 650; color: var(--ink); }
.tip strong small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* ---- What opens over the page. */

dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 22px;
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}
dialog::backdrop { background: var(--backdrop); }
dialog h2 { margin-bottom: 12px; }

/* A drawer is a dialog that comes in from the right, the full height of the window. */
dialog.drawer {
  width: min(940px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 0;
  box-shadow: var(--shadow-drawer);
  overflow: hidden;
}
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--slide); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 30;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--ground);
  font-size: 13px;
  box-shadow: var(--shadow-float);
}

.log {
  margin: 0;
  padding: 12px;
  max-height: 46dvh;
  min-height: 120px;
  overflow: auto;
  border-radius: 10px;
  background: var(--sunk);
  font: 12.5px/1.45 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log.terminal { background: var(--terminal); color: var(--terminal-ink); white-space: pre; overflow-wrap: normal; }

/* Which agent a robot's run worked with, as a dot beside what it did: the robot's purple for Claude, teal for Codex. */
.agent-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--series-robot); }
.agent-dot.codex { background: var(--series-codex); }

/* A space inventory, with labels that wrap and figures aligned for comparison. */
.usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usage-table th, .usage-table td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; }
.usage-table tbody th { font-weight: 400; overflow-wrap: anywhere; }
.usage-table td, .usage-table thead th:last-child { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.usage-table .total th, .usage-table .total td { font-weight: 600; }