/* The board, laid out in the pieces system.css makes. A bar across the top: nerd, and on the home this machine as
   three meters, this week, and a new project; on a project's page, its name, how it stands, what is live, its
   repository and its menu. Under it, one of three pages: the home, what asks the person and then the projects, a row
   each, in an order that does not move; a project's own page, its robot's conversation and issues beside its day
   and what is live; and this week, in numbers. In a narrower window a row's parts go two by two, and then one under
   another, and a project's side goes under its robot. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grow { flex: 1; }

/* ---- The bar across the top. */

.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-inner, main {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.bar-inner { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
/* nerd's mark, the same as its icon, in its own colours whatever the theme. */
.brand .face { fill: #1f5fbf; }
.brand .letter { fill: #ffffff; }

/* This machine: its name, with a light that is amber where something on it wants a look, and three meters. */
.machine { height: 36px; gap: 16px; padding: 0 14px; border-color: var(--line); border-radius: 10px; color: var(--ink-2); font-size: 12px; }
.machine .host { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.machine .light { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.machine .light.warn { background: var(--warn); }
.meter-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.meter-mini .track { width: 44px; height: 6px; border-radius: 3px; background: var(--heat-0); overflow: hidden; }
.meter-mini .track > span { display: block; height: 100%; background: var(--accent); }
.meter-mini .track.warn > span { background: var(--warn); }

/* The person's Claude plan, beside the machine: a $ and a ring, the week outside and the session inside. */
.plan-pill { height: 36px; gap: 4px; padding: 0 3px 0 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink-3); }
.plan-pill.reached { border: 1.5px solid var(--warn); background: color-mix(in srgb, var(--warn-wash) 50%, var(--surface)); color: var(--warn-ink); }
.plan-pill.stale { border-style: dashed; border-color: var(--line-strong); color: var(--ink-4); }
.plan-ring { display: block; flex: none; }
.plan-track { stroke: var(--heat-0); }
.plan-track.dashed { stroke: var(--line-strong); }
.plan-arc { stroke: var(--accent); }
.plan-arc.pale { stroke: var(--heat-2); }
.plan-arc.warn { stroke: var(--warn); }
.plan-arc.codex { stroke: var(--series-codex); }
.tip.plan-tip { min-width: 300px; max-width: min(400px, calc(100vw - 16px)); padding: 14px 16px; gap: 10px; border: 1px solid var(--line); border-radius: 12px; }
.plan-tip .plan-tip-title { font-size: 14px; font-weight: 600; }
.plan-tip-rows { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 6px; align-items: baseline; font-size: 13px; line-height: 18px; }
.plan-tip-name { color: var(--ink-2); }
.plan-tip-figure { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-tip-when { color: var(--ink-3); white-space: nowrap; }
.plan-tip-rows .warn { color: var(--warn-ink); }
.plan-tip-name.warn { font-weight: 600; }
.plan-tip-wait { font-size: 13px; color: var(--warn-ink); }
.plan-tip-carry { font-size: 13px; color: var(--ink-2); }
.top a.week { color: var(--ink-2); font-size: 13px; }
.top a.week[aria-current] { color: var(--ink); font-weight: 600; }

/* A project's bar: its name after nerd's, its chips, what is live, its repository and its menu. */
.crumb { color: var(--ink-4); margin: 0 -8px; }
.bar-name { font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -0.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { height: 24px; padding: 0 8px; border-radius: 6px; font-weight: 500; gap: 5px; }
.bar-links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.live-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.live-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-link .ico { flex: none; }
.repo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.menu-wrap { position: relative; }
.icon-button.more { width: 36px; height: 36px; color: var(--ink); }
.icon-button.more[aria-expanded="true"] { border-color: var(--accent-fill); background: var(--accent-wash); }
.menu { position: absolute; right: 0; top: 44px; z-index: 10; width: 240px; padding: 6px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
.menu button { justify-content: flex-start; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font-size: 14px; }
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--sunk); }
.menu .danger-item { color: var(--bad-ink); }
.menu-line { height: 1px; margin: 4px 0; background: var(--line); }

main { padding-top: 28px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-head h1 a { color: inherit; }
.page-head .back { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }

/* ---- What asks the person: cards, each with its answer on it. Nothing else on the home is amber. */

.asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
/* A card does not clip what is in it, so that Later's menu shows whole over it (#136): its head rounds its own corners. */
.ask { min-width: 0; display: flex; flex-direction: column; border-radius: 14px; }
.ask-head, .talk-head { border-radius: 13px 13px 0 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--warn-wash); color: var(--warn-deep); font-size: 13px; }
.ask-head a, .talk-head a { color: inherit; }
.ask-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warn); color: var(--on-warn); flex: none; }
.ask-what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ask-age { font-size: 12px; color: var(--warn-ink); }
.ask-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ask-q { font-size: 16px; line-height: 23px; font-weight: 600; overflow-wrap: anywhere; }
.ask-q.mono { font-size: 13px; line-height: 19px; }
.ask-working { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ask-working .swatch { width: 8px; height: 8px; border-radius: 50%; }
.talk-body > .ask-working { padding: 0 2px; }
/* An ask the person wrote about the whole issue since (#150): their words may settle it, which its robot does. */
.ask-wrote { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ask-wrote .ico { flex: none; color: var(--accent-ink); }
.talk-body > .ask-wrote { padding: 0 2px; }
/* An issue whose answer waits for a free slot, as the cap is full (#151): kept, and heard first as one frees. */
.ask-slot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ask-slot .ico { flex: none; color: var(--accent-ink); }
.talk-body > .ask-slot { padding: 0 2px; }
.ask-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
/* What a robot whose issue waits on the person said last, whole (#158), so that they need not open GitHub to read it. */
.ask-said { max-height: 320px; overflow: auto; padding: 10px 14px; border-radius: 10px; background: var(--sunk); font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.waiting-do { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.waiting-do .ask-do { margin-top: 0; }
.waiting-words { height: 36px; min-width: 180px; flex: 1; padding: 0 10px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ask-do button, .ask-do .button { height: 36px; padding: 0 14px; font-size: 14px; }
/* Feedback on a card (#189): quiet in its head, and a box at its foot for what is wrong with it, filed on nerd. */
.ask-head .feedback-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn-ink); }
.feedback-box { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.feedback-box[hidden] { display: none; }
.feedback-box p { margin: 0; }
.feedback-words { height: 36px; min-width: 180px; flex: 1; padding: 0 10px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* ---- The projects, a row each. */

.projects { border-radius: 14px; }
.row {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1.25fr) minmax(0, 1fr) minmax(150px, 210px);
  grid-template-areas: "name issues day live";
  column-gap: 28px;
  row-gap: 12px;
  padding: 16px 22px;
  align-items: start;
}
.rows > .row { border-top: 1px solid var(--line); }
.row.head { padding-top: 14px; padding-bottom: 10px; align-items: end; font-size: 12px; color: var(--ink-3); }
.row.put-away { opacity: 0.65; }
.row > :nth-child(1) { grid-area: name; }
.row > :nth-child(2) { grid-area: issues; }
.row > :nth-child(3) { grid-area: day; }
.row > :nth-child(4) { grid-area: live; }
.head-issues { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.bar-key { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.bar-key > span { display: inline-flex; align-items: center; gap: 4px; }
.head-day { position: relative; }

.cell-name { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cell-name .name { align-self: flex-start; font-size: 16px; line-height: 21px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.cell-name .controls { display: flex; flex-wrap: wrap; gap: 6px; }
.cell-issues { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.issues { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.issues .count { font-size: 13px; font-weight: 600; white-space: nowrap; }
.issues .count .quiet { font-weight: 400; }
.issues.big { flex: 1; max-width: 460px; }

/* A run going: its ring, its issue, its pushes, how long, and its Join and Stop. */
.run-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.run-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-what a { color: var(--ink); }
.pushes { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.pushes.none { color: var(--ink-4); }
.run-for { font-size: 12px; color: var(--ink-2); min-width: 32px; text-align: right; white-space: nowrap; }
.run-do { display: inline-flex; gap: 6px; }

/* A project's day: its hours across the top, every third and now. */
.cell-day { min-width: 0; padding-top: 2px; }
.chart.day { display: block; border-radius: 3px; }
.day-ticks { position: relative; display: block; height: 16px; font-size: 11px; color: var(--ink-3); }
.day-ticks > span { position: absolute; bottom: 0; transform: translateX(-50%); }
.day-ticks > .first { transform: none; }
.day-ticks > .now { right: 0; transform: none; color: var(--ink); font-weight: 600; }
.cell-live { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.cell-live .live-link { max-width: 100%; }
.cell-live .none { color: var(--ink-4); }
.not-live { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--warn-wash); color: var(--warn-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hidden-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.hidden-line .ico { color: var(--ink-3); }

/* ---- A project's page. */

.project-page { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.project-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.project-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* A robot's question as a conversation: its words on the left, the person's on the right, its last word quiet; then
   the answer, in a choice or in words. */
.talk { min-width: 0; border-radius: 14px; scroll-margin-top: 16px; }
.talk-head h2 { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.talk-head a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn-ink); white-space: nowrap; }
.talk-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.said { align-self: flex-start; max-width: 82%; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--sunk); white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.said.person { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: var(--accent-wash); }
.said-who { font-size: 12px; color: var(--ink-3); white-space: normal; }
.said-when { font-size: 12px; color: var(--ink-3); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
/* Steps a robot asks the person for, numbered, each marked done where nerd sees it (#135). */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.steps li { display: flex; gap: 10px; align-items: flex-start; }
.step-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.steps li.done .step-mark { border-color: var(--good); background: var(--good); color: var(--surface); }
.step-text { display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 20px; }
.steps li.done .step-text { color: var(--ink-2); }
.step-sees { font-size: 12px; color: var(--ink-3); white-space: normal; }
.steps li.done .step-sees { color: var(--good-ink); }
.steps-title { font-weight: 600; }
.said .steps { margin-top: 6px; }
.said.seen { background: var(--sunk); }
.not-yet-words { height: 36px; min-width: 180px; flex: 1; padding: 0 10px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
/* Later: a card hidden until a moment, or until what nerd sees (#135). */
.later-menu { position: relative; }
.later-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 14px; cursor: pointer; }
.later-menu > summary::-webkit-details-marker { display: none; }
.later-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.later-menu.below .later-pop { bottom: auto; top: calc(100% + 6px); }
.later-pop > button { display: flex; justify-content: space-between; gap: 12px; height: 36px; padding: 0 10px; border: 0; background: none; text-align: left; font-size: 14px; border-radius: 8px; }
.later-pop > button:hover { background: var(--sunk); }
.later-date { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.later-date input { flex: 1; min-width: 0; height: 32px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; background: var(--surface); color: var(--ink); }
.later-date button { height: 32px; padding: 0 10px; font-size: 13px; }
.later-line { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.later-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; color: var(--ink-3); }
.later-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.later-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.later-item:first-child { border-top: 0; }
.later-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.talk-later { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px 18px; font-size: 13px; color: var(--ink-2); background: var(--sunk); }
.talk-foot { display: flex; justify-content: flex-end; }

/* An artifact a robot points to, as a pill to open, in its words and at the head of its card (#132): the picture of
   what it did is seen without reading for it, or copying it. */
a.artifact-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; margin: 2px 0; vertical-align: middle;
  border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent-ring); }
a.artifact-link:hover { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
a.artifact-link .ico { flex: none; }
a.artifact-link .icon-external { opacity: 0.7; }
.ask-do a.artifact-link { height: 36px; padding: 0 14px 0 12px; font-size: 14px; }
.said.person a.artifact-link { background: var(--surface); }
/* A nerd page a robot points to, as its picture, light or dark as the board is, with Open (#236): on its card, and in
   What's new. The picture is the top of the page, as wide as the card lets it be, never taller than a glance. */
.page-shot { display: flex; flex-direction: column; margin: 0; max-width: 560px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); overflow: hidden; }
.page-shot-picture { display: block; max-height: 240px; overflow: hidden; background: var(--sunk); border-bottom: 1px solid var(--line); }
.page-shot-picture img { display: block; width: 100%; height: auto; }
.page-shot-none { display: flex; align-items: center; justify-content: center; height: 96px; }
.page-shot figcaption { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; font-size: 14px; }
.page-shot-mark { display: inline-flex; color: var(--accent-ink); }
.page-shot-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.page-shot .page-shot-open { flex: none; height: 32px; }
.talk > .page-shot { margin: 0 16px 12px; }
.reply { display: flex; align-items: flex-end; gap: 8px; }
.reply textarea { flex: 1; min-width: 0; min-height: 40px; padding: 9px 12px; border-radius: 10px; resize: none; }
.icon-button.send { width: 40px; height: 40px; border-radius: 50%; border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }

/* Its mechanical intuition: each command's main number in a card, with its chart; its other numbers small under it;
   and what was done. */
.intuition { display: flex; flex-direction: column; gap: 28px; }
.intuition-part { display: flex; flex-direction: column; gap: 14px; }
.intuition-head { display: flex; align-items: baseline; gap: 12px; }
.intuition-head h2 { font-size: 19px; line-height: 24px; font-weight: 700; }
.intuition-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; }
.intuition-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 8px; }
.intuition-main > .secondary { font-size: 15px; }
.intuition-legend { font-size: 13px; line-height: 18px; gap: 4px 8px; }
.intuition-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.intuition-number { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.intuition-number strong { font-size: 15px; line-height: 20px; }
.intuition-done { display: flex; flex-direction: column; gap: 8px; }
.intuition-done h3 { color: var(--ink-2); }
.intuition-done ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.intuition-event { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 19px; }
.intuition-event .event-mark { align-self: center; }
.intuition-when { flex: none; width: 52px; color: var(--ink-3); }
.intuition-what { min-width: 0; overflow-wrap: anywhere; }
/* Repeat blocks, on nerd's page: their chart, as a command's; and where they come from, in tables under it. */
.blocks-tables { display: flex; flex-direction: column; gap: 18px; }
.blocks-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 19px; }
.blocks-table caption { text-align: left; }
.blocks-table th { text-align: left; font-weight: 600; color: var(--ink-2); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.blocks-table td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.blocks-table .numbers { text-align: right; white-space: nowrap; }

/* Its week on Cloud Run (nerd#173): its requests in a line, then its feedback, errors and events, each under its own
   heading, in one card, as the board's other lists are. */
.telemetry-part { display: flex; flex-direction: column; gap: 14px; }
.telemetry-card { display: flex; flex-direction: column; gap: 18px; padding: 14px 16px; }
.telemetry-requests { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; line-height: 19px; }
.telemetry-kind { display: flex; flex-direction: column; gap: 8px; }
.telemetry-kind h3 { color: var(--ink-2); }
.telemetry-kind ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.telemetry-feedback { display: flex; flex-direction: column; gap: 4px; }
.feedback-words { font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-came > summary { cursor: pointer; color: var(--ink-3); }
.feedback-came[open] > summary { margin-bottom: 6px; }
.feedback-came .came { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 13px; line-height: 18px; padding: 2px 0 2px 14px; }
.feedback-came .came code { overflow-wrap: anywhere; }
.feedback-came .came ul { gap: 2px; }
.telemetry-error { display: flex; align-items: baseline; gap: 10px; }
.error-count { flex: none; width: 40px; text-align: right; font-weight: 650; font-size: 14px; }
.error-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.error-message { font-size: 13px; overflow-wrap: anywhere; }
.error-issue { flex: none; font-size: 14px; }
.telemetry-events { flex-direction: row !important; flex-wrap: wrap; gap: 6px 18px !important; }
.telemetry-events li { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.telemetry-events li .numbers { font-weight: 650; }

/* Its issues (#184): at the top, the machine's robot slots and the plan, and the robot's and the brief's switches; the
   New issue box; then Robot, Ideas and Other, as tabs. Robot is Kanban, a lane per plan in five columns with lines
   from each blocker to what it blocks, or List, with the opened issue's history beside it. Purple is the robot's,
   magenta the ideas', amber what needs the person, green what is done. */
.robot-part { display: flex; flex-direction: column; gap: 14px; }
.robot-part > .issues-top { display: flex; flex-direction: column; gap: 10px; }
.robot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.robot-head h2 { font-size: 18px; margin-right: auto; }
.robot-head .switches { display: flex; align-items: center; gap: 4px; }
.issues-top > p { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; }
.issues-top > p .glyph { margin-top: 3px; }
.machine-robots { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; border-radius: var(--radius-card); }
.robot-slots { display: flex; flex-direction: column; gap: 4px; }
.robot-slots-label { font-size: 11px; color: var(--ink-3); }
.robot-slots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 4px; border-radius: 5px; font: 600 10px var(--mono);
  background: var(--robot-wash); color: var(--robot-ink); }
.pip.here { background: var(--series-robot); color: var(--on-robot); }
.pip.free { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); font: 500 10px var(--font); }
.robot-slots-words { margin-left: 6px; font-size: 12px; color: var(--ink-2); }
.usage { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.usage-words { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
.usage-words strong { font-size: 12px; font-weight: 600; }

.new-issue { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 6px 6px 6px 14px; border-color: var(--line-strong); }
.new-issue label { margin: 0; font-size: 12px; font-weight: 500; line-height: 36px; margin-top: 1px; color: var(--ink-3); white-space: nowrap; }
/* Its words take as many lines as they need (#200), the box growing with them; its controls are centered on the first
   line, as they were on the one line it had. */
.new-issue textarea { flex: 1 1 220px; width: auto; min-width: 0; height: 36px; margin-top: 1px; max-height: 320px; border: 0; padding: 8px 0; font: inherit; font-size: 14px; line-height: 20px;
  color: var(--ink); background: transparent; outline: none; resize: none; overflow-y: auto; }
.new-issue:focus-within { border-color: color-mix(in srgb, var(--series-robot) 45%, var(--surface)); box-shadow: 0 0 0 3px var(--robot-wash); }
.new-issue.idea:focus-within { border-color: var(--brief-line); box-shadow: 0 0 0 3px var(--brief-wash); }
.new-issue .halves { background: var(--sunk); border-radius: 9px; }
.new-issue .halves button { height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; }
.new-issue .icon-button { border-color: transparent; margin-top: 4px; }
.new-issue > button[type="submit"] { margin-top: 3px; }
/* Its screenshots, each a thumbnail with × until it is filed; and why GitHub refused, where it did. */
.new-issue .shots { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 8px; }
.shot { position: relative; margin: 0; }
.shot img { display: block; height: 56px; width: auto; max-width: 140px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.shot-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 14px; line-height: 1; justify-content: center; }
.new-issue-error { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 13px; }
.new-issue-error .glyph { margin-top: 3px; }
/* What became of the last filing (#202): Filing…, then Filed with its number, Show and View on GitHub. */
.new-issue-said { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 13px; color: var(--ink-3); }
.new-issue-said.filed { color: var(--good-ink); }
.new-issue-said .ico { flex: none; }
.new-issue-said a { display: inline-flex; align-items: center; gap: 3px; }
.new-issue-said .dismiss { margin-left: auto; padding: 0 4px; font-size: 16px; line-height: 1; color: var(--ink-3); }
/* What was filed, in its group at once: Filing…, then its number until the view has it. */
.kcard.filing { cursor: default; border-style: dashed; border-color: color-mix(in srgb, var(--series-robot) 55%, var(--surface)); }
.filing-words { font-family: var(--font); font-weight: 500; color: var(--robot-ink); }
.status.filing, .dep.moving { background: var(--robot-wash); color: var(--robot-ink); }
.li.filing { background: var(--robot-wash); }
.li.idea.filing { background: var(--brief-wash); }
.li.idea.filing .num, .li.idea.filing .li-date { color: var(--brief-ink); }
.screenshots { display: flex; flex-wrap: wrap; gap: 8px; }
.screenshots img { display: block; height: 96px; width: auto; max-width: 220px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.other-text .error { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 12px; }

.issues-body { display: flex; flex-direction: column; gap: 12px; }
.issues-body > p { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.tabs [role="tablist"] { display: flex; gap: 2px; }
.tab { height: auto; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-2); font-size: 13px; gap: 6px; align-items: baseline; }
.tab:hover:not(:disabled) { color: var(--ink); }
.tab .count { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tab.robot[aria-selected="true"] { border-bottom-color: var(--series-robot); }
.tab.ideas[aria-selected="true"] { border-bottom-color: var(--brief-fill); }
.segmented { display: flex; gap: 2px; padding: 2px; margin-bottom: 4px; border-radius: 7px; background: var(--sunk); }
.segmented button { height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); font-size: 12px; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.nothing { padding: 8px 2px; font-size: 13px; }

.status { display: inline-block; padding: 3px 6px; border-radius: var(--radius-badge); font-size: 10.5px; line-height: 1; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.status.working { background: var(--robot-wash); color: var(--robot-ink); }
.status.asking { background: var(--warn-wash); color: var(--warn-ink); }
.status.done { background: var(--good-wash); color: var(--good-ink); }

/* Kanban: the columns' heads, then a lane each, its cards in a grid of five, its lines drawn over it. */
.kanban { display: flex; flex-direction: column; gap: 10px; }
.kanban-columns, .ilane-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kanban-columns { padding: 0 11px; }
.colh { display: flex; align-items: baseline; gap: 6px; padding: 0 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.colh .count { font-weight: 400; color: var(--ink-3); }
.colh.working { color: var(--robot-ink); }
.colh.asking { color: var(--warn-ink); }
.colh.done { color: var(--good-ink); }
.ilane { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 55%, var(--ground)); }
.ilane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; }
.ilane-head .quiet { font-size: 11.5px; }
.ilane-title { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ilane-head .grow { display: none; }
.ilane-note { margin-left: auto; }
.ilane-title .link { font-weight: 600; }
.ilane-number { font: 600 11px var(--mono); color: var(--robot-ink); }
.ilane-note { font-size: 11px; }
.parts { display: inline-flex; gap: 2px; }
.part { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.part.done { background: var(--series-done); }
.part.working { background: var(--series-robot); }
.part.asking { background: var(--warn); }
.ilane-grid { position: relative; }
.kcell { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; z-index: 1; }
.kempty { padding: 10px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 11px; color: var(--ink-3); text-align: center; }
svg.deps { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.dep-line { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.dep-head { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lighting .dep-line, .lighting .dep-head { stroke: var(--line-strong); }
.lighting .dep-line.lit, .lighting .dep-head.lit { stroke: var(--ink); stroke-width: 2.5; }
.kcard { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; overflow-wrap: anywhere;
  transition: border-color var(--quick); }
.kcard:hover { border-color: var(--ink-3); }
.kcard.lit { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.kcard.working { border-color: color-mix(in srgb, var(--series-robot) 40%, var(--surface)); }
.kcard.working.codex { border-color: color-mix(in srgb, var(--series-codex) 45%, var(--surface)); }
.kcard.asking { border-color: color-mix(in srgb, var(--warn) 60%, var(--surface)); }
.kcard.blocked { border-style: dashed; border-color: var(--line-strong); }
.kcard.done { background: color-mix(in srgb, var(--good-wash) 45%, var(--surface)); }
.kcard-number { display: flex; gap: 6px; font: 600 11px var(--mono); color: var(--ink-3); }
.done-at { font-family: var(--font); font-weight: 500; color: var(--good-ink); }
.kcard-title { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.kcard-title:hover { text-decoration: none; color: var(--accent-ink); }
/* What is done says less: its title in two lines at most, the whole of it a hover away. */
.kcard.done { padding: 7px 10px; gap: 4px; }
.kcard.done .kcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard-question { font-size: 12px; line-height: 1.4; color: var(--warn-deep); }
.kcard-held { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.kcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.kcard-chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* What the person said of the issue, folded: how many times, and each quote beneath (#225). */
.kcard-said > summary { cursor: pointer; font-size: 11px; color: var(--ink-2); }
.kcard-said ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.kcard-said li { display: grid; gap: 2px; padding-left: 8px; border-left: 2px solid var(--line-strong); }
.kcard-said q { font-size: 12px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.kcard-said q::before, .kcard-said q::after { content: none; }
.kcard-said small { font-size: 10.5px; color: var(--ink-3); }
.dep { padding: 3px 6px; border-radius: 4px; font-size: 10.5px; line-height: 1; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.dep.blocks { background: var(--ink); color: var(--surface); }
.kcard-do { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kcard-do .small { height: 28px; }
.older-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 0 4px; font-size: 12px; }

/* List, and Ideas: the list on the left, the opened issue on the right; under it, narrower. */
.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.issue-list { flex: 0 1 330px; min-width: 260px; overflow: hidden; border-radius: 14px; }
.issue-list.ideas { flex-basis: 360px; }
.issue-list .grp { display: block; width: 100%; height: auto; padding: 11px 12px 7px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.issue-list > .grp:first-child { border-top: 0; }
button.grp:hover:not(:disabled) { color: var(--ink); }
.issue-list .grp.open { color: var(--robot-ink); }
.li { display: flex; width: 100%; height: auto; justify-content: flex-start; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); font-size: 12px; text-align: left; }
.li:hover:not(:disabled) { background: var(--night); }
.li.open { background: var(--robot-wash); }
.li.idea { align-items: baseline; }
.li.idea.open { background: var(--brief-wash); }
.li .tree { flex: none; font: 12px var(--mono); color: var(--ink-4); white-space: pre; }
.li .num, .history .num { flex: none; font: 600 11px var(--mono); color: var(--ink-3); }
.li.open .num { color: var(--robot-ink); }
.li.idea.open .num, .num.idea { color: var(--brief-ink); }
.li-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-title.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.li.open .li-title { font-weight: 600; }
.li-date { flex: none; font-size: 11px; color: var(--ink-3); }
/* Where an idea's shaping stands, in its place in the Ideas list (#221): the robot's at work on it, the person's to answer. */
.li-date.shaping { padding: 1px 6px; border-radius: 999px; font-weight: 500; background: var(--brief-wash); color: var(--brief-ink); }
.li-date.shaping.working { background: var(--robot-wash); color: var(--robot-ink); }
.li-date.shaping.yours { background: var(--warn-wash); color: var(--warn-ink); }
.issue-list .older-foot { justify-content: flex-start; padding: 10px 12px; border-top: 1px solid var(--line); }

.history { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px; }
.history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.history-head a { display: inline-flex; align-items: center; gap: 4px; }
.history-title { font-size: 18px; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.history-line { font-size: 12.5px; color: var(--ink-2); }
.strip { display: flex; flex-direction: column; gap: 4px; }
.strip-bar { position: relative; height: 16px; overflow: hidden; border-radius: 4px; background: var(--sunk); }
.strip-bar > span { position: absolute; top: 0; bottom: 0; }
.strip-run { background: var(--series-robot); z-index: 1; }
.strip-run.codex { background: var(--series-codex); }
.strip-wait { background: repeating-linear-gradient(135deg, var(--warn-wash) 0 5px, color-mix(in srgb, var(--warn) 45%, var(--surface)) 5px 10px); }
.strip-after { background: repeating-linear-gradient(135deg, var(--sunk) 0 5px, var(--line-strong) 5px 10px); }
.strip-ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 11px; color: var(--ink-3); }
.strip-key { display: inline-flex; align-items: center; gap: 5px; }
.strip-key .key + * { margin-left: 0; }
.key.wait { background: color-mix(in srgb, var(--warn) 55%, var(--surface)); }
.key.after { background: var(--line-strong); }
.events { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ev { display: grid; grid-template-columns: 66px 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ev .at { padding-top: 1px; font: 11.5px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.ev .dot { width: 10px; height: 10px; margin: 3px auto 0; border-radius: 50%; background: var(--ink-3); }
.ev .what { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; font-size: 13px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.ev .what small { font-size: 11.5px; color: var(--ink-3); }
.ev.ev-run-began .dot { background: var(--series-robot); }
.ev.ev-run-ended .dot { background: var(--series-robot-soft); }
.ev.ev-commit .dot { border-radius: 2px; background: var(--ink); }
.ev.ev-mentioned .dot { border-radius: 2px; background: var(--line-strong); }
.ev.ev-asked .dot { background: var(--warn); }
.ev.ev-answered .dot, .ev.ev-wrote .dot { background: var(--accent); }
.ev.ev-closed .dot { background: var(--good); }
.ev.ev-labelled .dot, .ev.ev-unlabelled .dot { width: 8px; height: 8px; background: var(--ink-4); }
.ev.wait .dash { width: 2px; height: 28px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--ink-4) 0 3px, transparent 3px 6px); }
.ev.wait.person .dash { background: repeating-linear-gradient(180deg, var(--warn) 0 3px, transparent 3px 6px); }
.ev.wait .what { padding-top: 5px; font-size: 12px; color: var(--ink-3); }
.ev.wait.person .what { color: var(--warn-ink); }
.ev-day { padding: 2px 0 10px 94px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.quote { padding: 8px 10px; border-radius: 8px; background: var(--night); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; gap: 6px; }
.quote.yours { background: var(--accent-wash); color: var(--ink); }
.commit[href] { color: var(--accent-ink); }

.idea-text { padding: 10px 12px; border-radius: 8px; background: var(--brief-wash); font-size: 13px; }
.updates { display: flex; flex-direction: column; gap: 6px; }
.updates h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.updates ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; }
.shape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; font-size: 12px; }
/* A shaped idea's record (#215): what it was shaped into, its decisions with where each came from, and its journey. */
.record .shaped-into { margin: 0; color: var(--ink-2); }
.record h4 { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.record .rd-row { padding: 10px 14px; }
.record .rd-step { padding-bottom: 12px; }

.other { overflow: hidden; border-radius: 14px; }
.other .grp { padding: 10px 14px 8px; font-size: 11px; font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--line); }
.other .grp:first-child { border-top: 0; }
.other-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
.other-row .num { font: 600 11px var(--mono); color: var(--ink-3); }
.other-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.other-text a { color: var(--ink); }
.other-text small { font-size: 11.5px; }
.to-robot { color: var(--robot-ink); border-color: color-mix(in srgb, var(--series-robot) 40%, var(--surface)); }
.to-idea { color: var(--brief-ink); border-color: var(--brief-line); }
.other-none { padding: 4px 14px 16px; font-size: 12.5px; }

.foot-part { display: flex; flex-direction: column; gap: 6px; }
.foot-part h2 { font-size: 15px; }
.foot-part p.warn { display: flex; gap: 6px; }

/* Beside them. */
.side-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; }
.side-card h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.side-card .day-ticks { margin-top: -6px; }
.side-card p.warn, .side-card p.error { display: flex; gap: 6px; }
.live-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.week-link { padding: 0 4px; font-size: 13px; }

.sessions { display: flex; flex-direction: column; gap: 8px; }
.sessions > div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sessions .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
.sessions .busy .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.session-name { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.sessions .button { flex: none; }

.things > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.things > div > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.things .what { font-weight: 600; }
.things button { flex: none; }

/* ---- This week. */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tile-sub .key { display: inline-block; margin-right: 6px; vertical-align: 0; }
.lanes-head, .lane {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 28px;
  padding: 16px 20px;
}
.lanes-head { padding-top: 14px; padding-bottom: 10px; align-items: end; }
.lanes-head h2 { font-size: 15px; line-height: 20px; margin-bottom: 6px; }
.lane { border-top: 1px solid var(--line); align-items: start; }
.lane-name { font-size: 15px; line-height: 20px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }

.days { position: relative; height: 34px; }
.days span { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.days span.today { color: var(--ink); font-weight: 600; }
.lanes-note { padding: 12px 20px 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 17px; color: var(--ink-3); }
.timeline { position: relative; height: 84px; margin-top: 2px; cursor: pointer; border-radius: 2px; }
.timeline .note { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-size: 12px; color: var(--ink-3); pointer-events: none; }
.timeline .cross { position: absolute; top: 0; height: 51px; width: 1px; background: var(--ink); pointer-events: none; }

.section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head span { font-size: 12px; color: var(--ink-3); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.figures .well { display: flex; flex-direction: column; gap: 2px; }
.figures .well > span:first-child { font-size: 12px; color: var(--ink-2); }
.figures strong { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.01em; }
.figures .well > span:last-child { font-size: 12px; color: var(--ink-3); }

/* When in the day agents were at work: a row a day, a cell an hour, and how long that day came to at its end. */
.punch { display: grid; grid-template-columns: 52px minmax(0, 1fr) 132px; column-gap: 10px; row-gap: 3px; align-items: center; }
.punch .hours, .punch .cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.punch .hours { font-size: 10px; color: var(--ink-3); }
.punch .cells { gap: 2px; }
.punch .cells div { height: 22px; border-radius: 3px; }
.punch .day { font-size: 12px; color: var(--ink-2); }
.punch .day.today { color: var(--ink); font-weight: 600; }
.punch .total { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.punch .total div { height: 8px; border-radius: 0 3px 3px 0; background: var(--accent); }
.punch .head { font-size: 11px; color: var(--ink-3); }
.scale { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.scale .cell { width: 16px; height: 10px; border-radius: 2px; }
.punch + .scale { padding-left: 62px; }

.kinds { display: flex; flex-direction: column; gap: 10px; }
.kinds .kind { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 12px; }
.kinds .kind > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kinds .kind > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kinds .bar { height: 8px; border-radius: 0 3px 3px 0; background: var(--accent); }
.kinds .kind small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.kinds .kind > span:last-child { text-align: right; color: var(--ink-2); }

.listed { display: flex; flex-direction: column; }
.listed > div { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 17px; }
.listed .what { flex: none; width: 140px; font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listed .took { flex: none; width: 58px; text-align: right; color: var(--ink-3); }
.listed .command { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listed .when { flex: none; width: 110px; }
.section .count { font-size: 22px; font-weight: 650; color: var(--ink); }
.days.axis { height: 18px; }

.tests { border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; }
.tests > div { display: grid; grid-template-columns: 96px 150px 220px 64px 52px minmax(140px, 1fr); column-gap: 14px; align-items: center; padding: 8px 16px; min-width: 820px; }
.tests > div + div { border-top: 1px solid var(--line); }
.tests .head { background: var(--sunk); color: var(--ink-3); }
.tests .test-name { font-weight: 600; overflow-wrap: anywhere; }
.tests .right { text-align: right; }
.tests p { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.tests p.warn { color: var(--warn-ink); }
.tests p.error { color: var(--bad-ink); }

.things > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.things > div > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.things .what { font-weight: 600; }
.things button { flex: none; }

.sessions { display: flex; flex-direction: column; gap: 6px; }
.sessions > div { display: flex; align-items: baseline; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }
.sessions .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; align-self: center; }
.sessions .busy .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.sessions .button { margin-left: auto; align-self: center; flex: none; }


/* ---- The dialogs. */

.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dialog-head h2 { margin: 0; }
/* This machine: its name and whether all is well; what wants a look, each with its one move; three tiles; the
   drain; the robots at work, a slot each; the watches and phones, a card each; and nerd's GitHub App. */
#machine { width: min(680px, calc(100vw - 24px)); container-type: inline-size; }
#machine .dialog-head { margin-bottom: 4px; }
#machine-body { display: flex; flex-direction: column; gap: 22px; }
.machine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.machine-head h2 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.health { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 600; }
.health.good { background: var(--good-wash); color: var(--good-ink); }
.health.warn { background: var(--warn-wash); color: var(--warn-ink); }
.nerd-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--sunk); color: var(--ink-2); font-size: 12px; }
.nerd-chip .ico { color: var(--good-ink); }
.nerd-chip code { color: var(--ink); }

.looks { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--warn-wash); color: var(--warn-deep); }
.look { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.look + .look { border-top: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.look-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--warn); color: var(--on-warn); display: flex; align-items: center; justify-content: center; flex: none; }
.look-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.look-words strong { font-size: 14px; line-height: 20px; }
.look code { padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--ink); }
.look .steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.look .step { padding: 2px 8px; border-radius: 6px; background: var(--surface); color: var(--ink-2); }
.look .clear { flex: none; height: 36px; }

.machine-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.machine-tile { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ink); }
.machine-tile .tile-title { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.machine-tile .tile-title .ico { color: var(--ink-3); }
.machine-tile .figure { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.machine-tile .of { color: var(--ink-3); }
.machine-tile .tile-foot { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.machine-tile.warn { border: 1.5px solid var(--warn); background: color-mix(in srgb, var(--warn-wash) 50%, var(--surface)); }
.machine-tile.warn .tile-title, .machine-tile.warn .tile-title .ico, .machine-tile.warn .tile-foot { color: var(--warn-ink); }
.machine-tile.warn .tile-title { font-weight: 600; }
.cores-chart { border-radius: 4px; }
.cores-chart .chart.line { max-width: none !important; }
.chart .ceiling { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.machine-bar { display: block; height: 10px; border-radius: 5px; background: var(--heat-0); overflow: hidden; }
.machine-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.machine-bar.warn > span { background: var(--warn); }
.plan-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* A plan's bar: its share used, and a dark tick at how much of the window has gone by. */
.plan-bar { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--heat-0); }
.plan-bar .plan-used { position: absolute; left: 0; top: 0; height: 10px; border-radius: 5px; background: var(--accent); }
.plan-bar.warn .plan-used { background: var(--warn); }
.plan-bar.codex .plan-used { background: var(--series-codex); }
.plan-bar .plan-tick { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--ink); }

.drain { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--sunk); }
.drain-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--line); color: var(--ink-3); display: flex; align-items: center; justify-content: center; flex: none; }
.drain.on .drain-mark { background: var(--accent-wash); color: var(--accent-ink); }
.drain-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }
.drain-words strong { font-size: 15px; line-height: 20px; }
.drain .clear { flex: none; }
.machine-switch { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 2px solid var(--ink-3); border-radius: 16px; background: var(--line); }
.machine-switch > span { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); display: flex; align-items: center; justify-content: center; transition: left var(--quick), width var(--quick); }
.machine-switch[aria-checked="true"] { border-color: var(--accent-fill); background: var(--accent-fill); }
.machine-switch[aria-checked="true"] > span { top: 2px; left: 22px; width: 24px; height: 24px; background: var(--on-accent); color: var(--accent-fill); }
.machine-switch:hover:not(:disabled) { border-color: var(--ink-2); }
.machine-switch[aria-checked="true"]:hover:not(:disabled) { border-color: var(--accent-fill); }

.machine-part { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.machine-part h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.part-head { display: flex; align-items: center; gap: 12px; }
.part-head h3 { flex: 1; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.stepper button { width: 40px; height: 36px; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font-size: 18px; }
.stepper button:disabled { color: var(--ink-4); }
.stepper .count.wide { width: 48px; }
.x-words { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.stepper .count { width: 32px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.slots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.slot { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-2); }
.slot:hover { text-decoration: none; }
.slot-face { width: 56px; height: 56px; border-radius: 16px; background: var(--robot-wash); color: var(--robot-ink); display: flex; align-items: center; justify-content: center; }
a.slot:hover .slot-face { box-shadow: 0 0 0 2px var(--series-robot); }
.slot.free .slot-face { background: transparent; border: 2px dashed var(--line-strong); color: var(--ink-4); }
.slot.free { color: var(--ink-3); }
.slot-words { font-size: 12px; line-height: 16px; text-align: center; overflow-wrap: anywhere; }
.slots-words { margin-left: auto; align-self: center; font-size: 13px; line-height: 18px; color: var(--ink-2); text-align: right; }

.device-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.device-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink-2); }
.device-card .device-drawing { flex: none; }
.device-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-words strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.device-state { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; }
.device-app { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.device-app.warn { color: var(--warn-ink); }
.device-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.device-state .dot.hollow { background: transparent; border: 1.5px solid var(--ink-3); }
.device-card.away { color: var(--ink-3); }
.device-card.warn { border: 1.5px solid var(--warn); background: color-mix(in srgb, var(--warn-wash) 50%, var(--surface)); }
.device-card.warn .device-state { color: var(--warn-ink); font-weight: 600; }
.device-card.emulator { border-style: dashed; border-color: var(--line-strong); }

.machine-foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* Narrow, the tiles and the cards go one under another, and a move under what it is for. */
@container (max-width: 560px) {
  .machine-tiles, .device-cards, .plan-tiles { grid-template-columns: minmax(0, 1fr); }
  .look { flex-wrap: wrap; }
  .look-words { flex-basis: calc(100% - 40px); }
  .look .clear { margin-left: 40px; }
  .drain { flex-wrap: wrap; }
  .drain-words { flex-basis: calc(100% - 50px - 66px); }
  .drain .clear { order: 5; margin-left: 50px; }
  .slots-words { flex-basis: 100%; text-align: left; margin-left: 0; }
}
#console { width: min(920px, calc(100vw - 24px)); }
#console .asking { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--warn-wash); color: var(--warn-deep); }
#console .asking p { overflow-wrap: anywhere; }
#console .asking .buttons { justify-content: flex-start; margin-top: 8px; }
.keys { margin-right: auto; display: flex; gap: 6px; }
ul.plain { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; }

/* ---- The morning brief: the home's row, and its page, the headlines on the left, grouped by project, and the open
   card on the right; narrower, the card goes under them. */

.brief-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; color: var(--ink-3); }
.brief-row:hover { text-decoration: none; border-color: var(--brief-line); }
.brief-row-words { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.brief-row-name { font-size: 15px; font-weight: 600; color: var(--brief-ink); }
.brief-mark { width: 40px; height: 40px; border-radius: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brief-wash); color: var(--brief-ink); }

.brief-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.brief-top h1 { font-size: 28px; line-height: 34px; }
.brief-none { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.brief-page { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.headlines { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.brief-open { flex: 999 1 460px; min-width: 0; }

.brief-group { display: flex; flex-direction: column; gap: 4px; }
.brief-group-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; }
.brief-group-head h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.brief-group-head .badge { border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.headline-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; border: 1px solid var(--surface); border-radius: 14px; background: var(--surface); }
.headline-row.open { background: var(--brief-wash); border-color: var(--brief-line); }
.headline-row.outside { border: 1.5px dashed var(--ink-4); }
.headline-row.judged .headline { color: var(--ink-3); }
.headline { flex: 1; min-width: 0; height: auto; min-height: 34px; justify-content: flex-start; padding: 2px 8px; border: 0; background: transparent; text-align: left;
  white-space: normal; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--ink); }
.headline:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.row-act { width: 34px; height: 34px; padding: 0; flex: none; border: 0; border-radius: 17px; }
.row-act.keep { background: var(--accent-wash); color: var(--accent-ink); }
.row-act.discard { background: var(--sunk); color: var(--ink-2); }
.judged-word { flex: none; padding-right: 6px; }

.brief-card { padding: 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.brief-source { display: flex; align-items: center; gap: 12px; }
.brief-project { font-size: 15px; font-weight: 600; }
.outside-chip { align-self: flex-start; padding: 4px 10px; border-radius: 12px; background: var(--sunk); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.brief-head { font-size: 22px; line-height: 29px; font-weight: 600; letter-spacing: -0.01em; }
.brief-insight { font-size: 15px; line-height: 22px; color: var(--ink-2); white-space: pre-line; }
.brief-matters { font-size: 14px; line-height: 20px; color: var(--ink-3); }

/* The switch and what it sends, in a box of its colour: the issue for the robot word for word, or the idea. */
.kind-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: 18px; }
.kind-box.task { background: var(--robot-wash); }
.kind-box.idea { background: var(--brief-wash); }
.kind-box .halves { margin-bottom: 4px; }
/* What the person may change reads as the card's own words, and shows that it can be changed where it is pointed at. */
.brief-field { display: block; min-height: 0; padding: 4px 6px; margin: 0 -6px; width: calc(100% + 12px); border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink); resize: none; overflow: hidden; field-sizing: content; }
.brief-field:hover { border-color: var(--line-strong); }
.brief-field:focus { border-color: var(--line-strong); background: var(--surface); outline: none; }
.task-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.task-body, .task-done-text { font-size: 13px; line-height: 18px; }
.idea-text { font-size: 16px; line-height: 23px; }
.task-done { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 18px; }
.task-done > span { flex: none; font-weight: 600; }
.task-done .brief-field { margin-left: -6px; width: auto; flex: 1; }
.sparked { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; }
.brief-words { min-height: 64px; border-radius: 14px; padding: 10px 14px; font-size: 15px; line-height: 21px; resize: vertical; }
.brief-do { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-do button { flex: 1 1 160px; height: 46px; border-radius: 23px; font-size: 15px; }
.brief-do button:not([class]) { border-color: var(--sunk); background: var(--sunk); }
.brief-verdict { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--sunk); color: var(--ink-2); }
.brief-verdict.task { background: var(--robot-wash); color: var(--robot-ink); }
.brief-verdict.idea { background: var(--brief-wash); color: var(--brief-ink); }

/* Side by side, the open card stays in view beside the headlines as they scroll. */
@media (min-width: 960px) {
  .brief-open { position: sticky; top: 16px; }
  .brief-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

/* Why a card is put away: a few words, each chosen with a tap. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#discard { width: min(480px, calc(100vw - 24px)); }

/* ---- Narrower windows: a row's parts two by two, then one under another. */

@media (max-width: 1100px) {
  .row { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); grid-template-areas: "name issues" "live day"; }
  .row.head { grid-template-areas: "name issues"; }
  .row.head .head-day, .row.head .head-live { display: none; }
}

@media (max-width: 760px) {
  .bar-inner, main { padding-left: 16px; padding-right: 16px; }
  .machine .meter-mini { display: none; }
  .bar-inner { flex-wrap: nowrap; gap: 12px; }
  .bar-links { gap: 12px; flex-shrink: 1; }
  .repo-link span { display: none; }
  .bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "issues" "day" "live"; padding: 14px 16px; }
  .row.head { grid-template-areas: "issues"; }
  .row.head > :first-child { display: none; }
  .lanes-head, .lane { grid-template-columns: minmax(0, 1fr); }
  /* Kanban's five columns, too narrow side by side, go two by two, and its lines with them. */
  .kanban-columns { display: none; }
  .ilane-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcell:empty { display: none; }
  .kcell::before { content: attr(data-words); font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .kcell:empty::before { content: none; }
  .usage { padding-left: 0; border-left: 0; }
  .lane .timeline { margin-top: 12px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .punch { grid-template-columns: 44px minmax(0, 1fr); }
  .punch .total, .punch .head { display: none; }
  .punch + .scale { padding-left: 0; }
  .hidden-line { padding: 10px 16px; }
  .brief-card { padding: 18px; border-radius: 20px; }
}

@media (max-width: 520px) {
  .said { max-width: 92%; }
}

/* ---- The intention review (#123): each change to a project's INTENTION.md the brief proposed, as a card in the
   brief's look, with why, its lines as a diff, and the cards it came from, each opened with a tap; then Accept and
   Reject. Those decided in the last week follow in a list. */
.intention-row { margin-bottom: 4px; }
.intention-row .badge { border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.brief-top .back { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; flex-basis: 100%; }
.changes { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.change { padding: 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.change-why { font-size: 17px; line-height: 25px; color: var(--ink); }
.diff { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; line-height: 21px; }
.diff-line { display: flex; gap: 10px; padding: 6px 14px 6px 10px; }
.diff-line + .diff-line { border-top: 1px solid var(--surface); }
.diff-line.remove { background: var(--bad-wash); color: var(--ink-2); }
.diff-line.remove > span:last-child { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad-ink) 45%, transparent); }
.diff-line.add { background: var(--good-wash); color: var(--ink); }
.diff-sign { flex: none; width: 12px; font-family: var(--mono); font-weight: 600; text-align: center; }
.diff-line.remove .diff-sign { color: var(--bad-ink); }
.diff-line.add .diff-sign { color: var(--good-ink); }
.from { display: flex; flex-direction: column; gap: 6px; }
.from ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.from-card { border: 1px solid var(--line); border-radius: 14px; }
.from-card.open { border-color: var(--brief-line); background: var(--brief-wash); }
.from-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px 8px 14px; border: 0; border-radius: 14px; background: none; text-align: left; font-weight: 400; white-space: normal; height: auto; }
.from-head svg { flex: none; color: var(--ink-3); transition: transform 0.15s; }
.from-card.open .from-head svg { transform: rotate(90deg); }
.from-headline { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.verdict-chip { flex: none; max-width: 45%; padding: 3px 10px; border-radius: 11px; background: var(--sunk); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verdict-chip.task { background: var(--robot-wash); color: var(--robot-ink); }
.verdict-chip.idea { background: var(--surface); color: var(--brief-ink); }
.from-card:not(.open) .verdict-chip.idea { background: var(--brief-wash); }
.from-body { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.decided { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin-top: 8px; }
.decided ul { list-style: none; margin: 0; padding: 4px 0; border-radius: 18px; }
.decided-row { display: grid; grid-template-columns: 140px 1fr; gap: 2px 14px; padding: 10px 18px; }
.decided-row + .decided-row { border-top: 1px solid var(--line); }
.decided-project { font-weight: 600; font-size: 14px; }
.decided-why { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.decided-said { grid-column: 2; }
.decided-row.accepted .decided-said { color: var(--good-ink); }
@media (max-width: 600px) {
  .change { padding: 18px; border-radius: 20px; }
  .decided-row { grid-template-columns: 1fr; }
  .decided-said { grid-column: 1; }
}

/* ---- The Deploy button, for a project only the person deploys (#139): on its page, above its robot. */

.crux-products, .crux-parts { list-style: none; margin: 0; padding: 0; }
.crux-product { padding: 8px 0; border-top: 1px solid var(--line); }
.crux-product:first-child { border-top: 0; padding-top: 0; }
.crux-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crux-parts { margin-top: 4px; padding-left: 12px; }
.deploy-card { display: flex; flex-direction: column; border-radius: 14px; }
.deploy-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.deploy-head h2 { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.deploy-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); flex: none; }
.deploy-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.deploy-state { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.deploy-state.done { color: var(--good-ink); }
.deploy-log { margin: 0; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 12px; line-height: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.coming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coming li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 20px; }
.coming code { font-size: 12px; }
.coming-subject { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-ring); border-top-color: var(--accent); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--accent); } }
.live-where { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.live-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deploy-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---- What's new (news.js): what the robots built for the person to try, in the green of what is done, apart from the
   warning's yellow of what asks them. */

.news-section { display: flex; flex-direction: column; gap: 12px; }
.news-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; color: var(--ink-3); }
.news-row:hover { text-decoration: none; border-color: var(--good-ink); }
.news-row-words { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.news-row-name { font-size: 15px; font-weight: 600; color: var(--good-ink); }
.news-row-mark { width: 40px; height: 40px; border-radius: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--good-wash); color: var(--good-ink); }
.news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.news-list:empty { display: none; }
.news-page { margin-top: 20px; }
.news-top h1 { font-size: 28px; line-height: 34px; }
.news-top p { margin-top: 4px; }

.news { min-width: 0; display: flex; flex-direction: column; border-radius: 14px; }
.news.is-new { border-color: var(--good-ink); }
.news-head { border-radius: 13px 13px 0 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--good-wash); color: var(--good-ink); font-size: 13px; }
.news-head a { color: inherit; }
.news-head .age { font-size: 12px; }
.news-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--good-ink); color: var(--surface); flex: none; }
.news-whose { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.news-new { padding: 1px 7px; border-radius: var(--radius-badge); background: var(--good-ink); color: var(--surface); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.news-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-made { font-size: 18px; line-height: 25px; font-weight: 600; overflow-wrap: anywhere; }
.news-line { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.news-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.news-unsure .news-label { color: var(--warn-ink); }
.news-intention .news-label { color: var(--brief-ink); }
.news-yours > span:last-child { color: var(--ink-2); white-space: pre-line; }
.news-answer { font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.news-answer > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
details.news-answer > .md { margin-top: 8px; }
.news-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.news-do:first-of-type { margin-top: auto; }
.news-do .button, .news-do button { height: 36px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.news-said { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.news-box .news-words { flex: 1; min-width: 180px; height: 36px; }
.news-archive { margin-left: 4px; height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: inherit; border-color: transparent; }
.news-archive:hover:not(:disabled) { border-color: currentColor; }
.news.is-archived .news-head { background: var(--sunk); color: var(--ink-2); }
.news.is-archived .news-mark { background: var(--ink-3); }
.news-archived { margin-top: 28px; }
/* A night of the night shift (#329): its fixes, each a line with its number and commit, and each offer a row of its own. */
.news-night { font-weight: 400; color: var(--ink-3); }
.news-fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.news-fix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.news-fix-what { flex: 1 1 200px; min-width: 0; }
.news-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--good-ink); white-space: nowrap; }
.news-commit { font-family: var(--mono); font-size: 12px; }
.news-offer { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); }
.news-offer-name, .news-offer-why { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.news-offer-why { color: var(--ink-2); }
.news-offer-do { margin-top: 6px; }
.news-offer-do .news-words { flex: 1 1 100%; min-width: 180px; height: 36px; }
.news-offer-said { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.news-archived > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 16px; }
.news-wrote { display: flex; align-items: center; gap: 6px; color: var(--ink-2); margin: 0; }
.news-wrote .ico { flex: none; color: var(--good-ink); }

/* ---- A shaping round (#212), drawn after the record's round 3 (https://claude.ai/artifact/Unr18kfruQP7zdaMBjBPrq): one
   column of cards under a bar that stays as the page scrolls, about 860 wide in a window of 1027, and a phone's. Its
   guess in a box of its own, the evidence sunk beneath it, a thumb each way; what is right in green, what is changed in
   the accent, and what wants words or overturns in amber. The journey in two lanes, the person's in the accent and the
   robot's in its purple, each step a card with its sketch. */
.rd { width: 100%; min-width: 0; }
.rd-wrap { max-width: 860px; margin: 0 auto; }
.rd-main { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
.rd-main h2 { margin: 24px 0 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.rd-sub { margin: -4px 0 0; color: var(--ink-3); font-size: 13px; }
.rd-bar { position: sticky; top: 0; z-index: 5; margin: -28px 0 0; background: var(--ground); border-bottom: 1px solid var(--line); }
.rd-bar-in { max-width: 860px; margin: 0 auto; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rd-title { font-weight: 600; white-space: nowrap; }
.rd-title a { color: var(--ink); }
.rd-title span { color: var(--ink-3); font-weight: 400; }
.rd-counts { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rd-count { padding: 1px 8px; border-radius: var(--radius-badge); background: var(--sunk); color: var(--ink-2); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-count.good { background: var(--good-wash); color: var(--good-ink); }
.rd-count.flipped { background: var(--accent-wash); color: var(--accent-ink); }
.rd-count.warn { background: var(--warn-wash); color: var(--warn-ink); }
.rd-save { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rd-save.bad { color: var(--bad-ink); white-space: normal; }
.rd-insight-open { border-color: var(--warn-ink); background: var(--warn-wash); color: var(--warn-ink); font-weight: 600; }
.rd-insight-open:hover:not(:disabled) { border-color: var(--warn-deep); }
.rd-panel { max-width: 860px; margin: 0 auto; padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.rd-panel[hidden] { display: none; }
.rd-panel p { margin: 0; color: var(--ink-2); font-size: 13px; }
.rd-panel-do { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rd-intro { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rd-intro h1 { margin: 0; font-size: 22px; line-height: 28px; }
.rd-intro p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.rd-idea { display: flex; flex-direction: column; gap: 4px; }
.rd-intro .rd-idea-name { font-size: 15px; font-weight: 600; color: var(--ink-3); overflow-wrap: anywhere; }
.rd-idea-name a { color: var(--ink); }
.rd-idea-text summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.rd-idea-text > .md { margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--line); color: var(--ink-2); max-width: 66ch; }
.rd-banner { margin: 0; padding: 10px 14px; border-radius: var(--radius-control); background: var(--good-wash); color: var(--good-ink); }
.rd-banner[hidden] { display: none; }
/* The round while Send or File is in flight: nothing on it to change until the board answers. */
.rd-held .rd-banner { background: var(--accent-wash); color: var(--accent-ink); }
.rd-held > :not(.rd-banner):not(.rd-foot) { opacity: .6; }
.rd-insights { display: flex; flex-direction: column; gap: 8px; }
.rd-insight { padding: 8px 12px; border-radius: var(--radius-control); background: var(--warn-wash); overflow-wrap: anywhere; }
.rd-insight p { margin: 0; }
.rd-insight-src { color: var(--ink-3); font-size: 12px; }
.rd-list { display: flex; flex-direction: column; gap: 12px; }
.rd-card { min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.rd-card.flipped { border-color: var(--accent); }
.rd-card.talk { border-color: var(--warn-ink); }
.rd-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.rd-kind, .rd-label, .rd-lanes span { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.rd-num { margin-right: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-state { padding: 0 8px; border-radius: var(--radius-badge); background: var(--sunk); color: var(--ink-3); font-size: 12px; line-height: 18px; white-space: nowrap; }
.rd-state.unread { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rd-state.up { background: var(--good-wash); color: var(--good-ink); }
.rd-state.flipped { background: var(--accent-wash); color: var(--accent-ink); }
.rd-state.talk { background: var(--warn-wash); color: var(--warn-ink); }
.rd-state.agent { background: var(--robot-wash); color: var(--robot-ink); }
.rd-question { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.rd-reopened { margin: 0; color: var(--warn-ink); font-size: 12px; line-height: 18px; font-weight: 600; }
.rd-guess { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.rd-card.up .rd-guess { border-color: var(--good-ink); background: var(--good-wash); }
.rd-answer { font-weight: 600; overflow-wrap: anywhere; }
.rd-why, .rd-opt-why, .rd-src { color: var(--ink-3); font-size: 13px; line-height: 18px; }
.rd-evidence { min-width: 0; padding: 8px 12px; border-radius: var(--radius-control); background: var(--sunk); color: var(--ink-2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.rd-evidence .rd-label { margin-right: 6px; }
.rd-evidence q { font-style: italic; quotes: none; }
/* A question of taste's ways (#238): each answer's artboard side by side, labelled as the answer, the one picked ringed. */
.rd-ways { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.rd-way { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rd-way figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ink-2); }
.rd-way-box { position: relative; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / 0.08); }
.rd-way.picked .rd-way-box { box-shadow: 0 0 0 2px var(--accent-fill); }
.rd-way-frame { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.rd-ways-gone, .rd-ways-unreached { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 19px; }
.rd-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rd-thumb { color: var(--ink-2); }
.rd-thumb svg { width: 16px; height: 16px; flex: none; }
.rd-thumb.up[aria-pressed="true"] { border-color: var(--good-ink); background: var(--good-wash); color: var(--good-ink); font-weight: 600; }
.rd-thumb.down[aria-pressed="true"] { border-color: var(--warn-ink); background: var(--warn-wash); color: var(--warn-ink); font-weight: 600; }
.rd-hint { color: var(--ink-3); font-size: 12px; }
.rd-down { display: flex; flex-direction: column; gap: 10px; }
.rd-opts { display: flex; flex-direction: column; gap: 6px; }
.rd-opts.off .rd-opt-body { opacity: 0.55; }
.rd-opt { position: relative; margin: 0; font-weight: 400; font-size: 14px; }
.rd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rd-opt-body { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; overflow-wrap: anywhere; transition: border-color var(--quick), background var(--quick); }
.rd-opt-body:hover { border-color: var(--line-strong); }
.rd-opt-why { grid-column: 2; }
.rd-dot { width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--ink-4); border-radius: 50%; }
.rd-opt input:checked + .rd-opt-body { border-color: var(--accent); background: var(--accent-wash); }
.rd-opt input:checked + .rd-opt-body .rd-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px); }
.rd-opt input:focus-visible + .rd-opt-body { box-shadow: 0 0 0 3px var(--accent-ring); }
.rd-guess-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-badge); color: var(--ink-3); font-size: 11px; line-height: 16px; vertical-align: 1px; white-space: nowrap; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip { height: auto; padding: 3px 11px; border-color: var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13px; line-height: 18px; white-space: normal; text-align: left; }
.rd-chip:hover:not(:disabled) { color: var(--ink); }
.rd-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.rd-rows { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.rd-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 18px; border-top: 1px solid var(--line); }
.rd-row:first-child { border-top: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.rd-row:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.rd-row:only-child { border-radius: var(--radius-card); }
.rd-row.settled { grid-template-columns: minmax(0, 1fr) auto; }
.rd-row.over, .rd-row.reopened { background: var(--warn-wash); }
.rd-row textarea { grid-column: 2 / -1; }
.rd-row.settled textarea { grid-column: 1 / -1; }
.rd-n { padding-top: 1px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-what { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rd-from { color: var(--ink-3); font-size: 12px; line-height: 18px; }
.rd-what .rd-reopened a { color: inherit; text-decoration: underline; }
.rd-skipped { margin: 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink-2); }
.rd-journey { display: flex; flex-direction: column; }
.rd-lanes, .rd-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.rd-lanes { margin-bottom: 10px; }
.rd-lanes span { padding-bottom: 6px; border-bottom: 2px solid var(--line-strong); }
.rd-lanes .you { color: var(--accent-ink); border-bottom-color: var(--accent); }
.rd-lanes .robot { color: var(--robot-ink); border-bottom-color: var(--robot-ink); }
.rd-step { padding-bottom: 20px; }
.rd-step-card { min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.rd-step.robot .rd-step-card { border-color: transparent; background: var(--robot-wash); }
.rd-step.noted .rd-step-card { outline: 2px solid var(--warn-ink); outline-offset: -1px; }
.rd-step-head { display: flex; align-items: baseline; gap: 8px; }
.rd-step-head .rd-num { margin: 0; font-size: 12px; }
.rd-step-title { font-weight: 600; overflow-wrap: anywhere; }
.rd-lane-tag { display: none; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.rd-step-text { color: var(--ink-2); overflow-wrap: anywhere; }
.rd-step-text p { margin: 0; }
.rd-step-text b, .rd-step-text strong { color: var(--ink); }
.rd-foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rd-card.rd-part.plan { border-width: 2px; }
.rd-card.rd-part.up { border-color: var(--good-ink); }
.rd-card.rd-part.talk { border-color: var(--warn-ink); }
.rd-part-sum { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.rd-part-after { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.rd-part-full summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.rd-part-text { min-width: 0; padding-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.rd-file-note { margin-top: 8px; }

/* What a run drew of a screen, in the record's own few pieces: a box (mock) of rows (mrow), buttons (mbtn, warn and
   ghost), tabs, lines of text to come (line, s and m), answers (opt, on), a dot (rd), chips (chipm), thumbs (th), tags
   (tag, new) and a picture beside words (pic, scr). Drawn, not real: they do nothing. */
.rd-sketch .mock { display: grid; gap: 5px; max-width: 340px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--ground); color: var(--ink-2); font-size: 11px; line-height: 15px; overflow: hidden; }
.rd-sketch .mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rd-sketch .tab { height: auto; padding: 1px 6px; border: 0; border-radius: 4px; background: var(--sunk); color: inherit; font-size: inherit; }
.rd-sketch .tab.on { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.rd-sketch .mrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.rd-sketch .mrow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-sketch .mbtn { padding: 1px 7px; border-radius: 4px; background: var(--accent-fill); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.rd-sketch .mbtn.warn { border: 1px solid var(--warn-ink); background: var(--warn-wash); color: var(--warn-ink); }
.rd-sketch .mbtn.ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font-weight: 400; }
.rd-sketch .line { height: 6px; border-radius: 3px; background: var(--line-strong); }
.rd-sketch .line.s { width: 55%; }
.rd-sketch .line.m { width: 75%; }
.rd-sketch .opt { display: flex; align-items: center; gap: 5px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.rd-sketch .opt.on { border-color: var(--accent); background: var(--accent-wash); }
.rd-sketch .rd { width: 8px; height: 8px; flex: none; border: 1px solid var(--ink-4); border-radius: 50%; }
.rd-sketch .opt.on .rd { border-color: var(--accent); background: var(--accent); }
.rd-sketch .chipm { display: inline-block; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; }
.rd-sketch .th { display: inline-flex; gap: 3px; }
.rd-sketch .th span { padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.rd-sketch .th span.on { border-color: var(--good-ink); background: var(--good-wash); color: var(--good-ink); }
.rd-sketch .tag { padding: 0 5px; border-radius: 3px; background: var(--robot-wash); color: var(--robot-ink); font-size: 10px; white-space: nowrap; }
.rd-sketch .tag.new { background: var(--good-wash); color: var(--good-ink); }
.rd-sketch .pic { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 6px; }
.rd-sketch .scr { position: relative; height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.rd-sketch .scr::after { content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 4px; border-radius: 2px; background: var(--line-strong); box-shadow: 0 8px 0 var(--line), 0 16px 0 var(--line); }

@media (max-width: 640px) {
  .rd-card { padding: 14px; }
  .rd-lanes { display: none; }
  .rd-step { grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; }
  .rd-step .rd-cell { display: none; }
  .rd-lane-tag { display: inline; }
  .rd-row { grid-template-columns: 22px minmax(0, 1fr); padding: 10px 14px; }
  .rd-row > button { grid-column: 2; justify-self: start; }
  .rd-row.settled > button { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .rd * { transition: none !important; } }

/* ---- A page a robot published (#233): a bar of the board's own that stays as it scrolls, its title, the issue that
   made it, its version and Comment; beneath it the page, in its frame, as wide as the board. */
body[data-view="page"] main { padding-bottom: 0; }
.pg { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.pg-wrap { max-width: 860px; margin: 0 auto; }
.pg-bar { position: sticky; top: 0; z-index: 5; margin: -28px 0 0; background: var(--ground); border-bottom: 1px solid var(--line); }
.pg-bar-in { padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pg-title { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.pg-title a { color: var(--ink-3); }
.pg-sep { color: var(--ink-3); }
.pg-title h1 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.pg-issue { padding: 1px 8px; border-radius: var(--radius-badge); background: var(--sunk); color: var(--ink-2); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-issue:empty { display: none; }
.pg-version { width: auto; max-width: 100%; padding: 5px 8px; font-size: 13px; }
/* As tall as the window leaves it beneath the bar, whose height the page view gives it (--pg-bar). */
.pg-unreached { padding: 24px 0; }
.pg-frame { display: block; width: 100%; height: calc(100vh - var(--pg-bar, 52px)); min-height: 320px; border: 0; background: #fff; }

/* A canvas (#234): its artboards side by side on the board's sunk ground, each labelled above a frame of its own at its
   size, scaled alike to fit beneath the bar (pages.js sets the scale); a click opens one whole, the rest put away. */
.pg-canvas { position: relative; height: calc(100vh - var(--pg-bar, 52px)); min-height: 320px; overflow: auto; background: var(--sunk); }
.pg-boards { display: flex; align-items: flex-start; gap: 32px; width: max-content; margin: 0 auto; padding: 32px; }
.pg-board { margin: 0; flex: none; }
.pg-board figcaption { height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.pg-board-box { position: relative; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / 0.08); }
.pg-board-frame { display: block; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; }
.pg-board-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
.pg-board-open:hover, .pg-board-open:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pg-canvas-back { display: none; position: sticky; top: 12px; left: 12px; z-index: 1; margin: 12px 0 -44px 12px; }
.pg-canvas.whole .pg-canvas-back { display: inline-flex; }
.pg-canvas.whole .pg-board:not(.opened) { display: none; }
.pg-canvas.whole .pg-boards { padding-top: 56px; }
.pg-canvas.whole .pg-board-open { display: none; }
.pg-canvas.whole .pg-board-frame { pointer-events: auto; }
/* Comments (#235): beside the page, over its right edge; and, on a canvas, each artboard's pins, which take a click
   only while the person comments, a click pinning their comment there. */
.pg-body { position: relative; }
.pg-comment.on { border-color: var(--accent-fill); background: var(--accent-wash); color: var(--accent-ink); }
.pg-notes { display: none; position: absolute; top: 0; right: 0; z-index: 3; width: min(360px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; padding: 14px 16px 16px; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-drawer); }
.pg-body.commenting .pg-notes { display: block; }
/* Where the window is wide enough, the page makes room for them, rather than be drawn beneath them. */
@media (min-width: 760px) { .pg-body.commenting > .pg-frame, .pg-body.commenting > .pg-canvas { width: calc(100% - 360px); } }
.pg-notes-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-notes-top h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.pg-notes-close { padding: 2px 9px; font-size: 16px; line-height: 20px; }
.pg-notes-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pg-note { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.pg-note-head { display: flex; align-items: center; gap: 6px; }
.pg-note-on { font-weight: 600; color: var(--ink-2); }
.pg-note-words { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-note-went { margin: 4px 0 0; font-size: 12px; }
.pg-notes-new { margin-top: 12px; display: grid; gap: 8px; }
.pg-notes-where { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.pg-unpin { padding: 2px 8px; font-size: 12px; }
.pg-notes-words { width: 100%; box-sizing: border-box; }
.pg-notes-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; }
.pg-notes-hint { margin: 10px 0 0; font-size: 12px; line-height: 16px; }
.pg-pins { position: absolute; inset: 0; display: none; cursor: crosshair; }
.pg-body.commenting .pg-pins { display: block; }
.pg-pin, .pg-pin-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-pin { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.pg-pin.draft { background: var(--surface); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-fill); }

/* The board in the cloud (cloud.js): where the machine last wrote more than a minute ago, how long ago; and, before the
   person signs in, the way to. */
.away { margin: 0; padding: 6px 16px; background: var(--warn-wash); color: var(--warn-ink); font-size: 13px; text-align: center; }
.signin { max-width: 420px; margin: 80px auto; display: grid; gap: 12px; }
.signin h1 { margin: 0; }

/* A page in the board in the cloud: its picture, until it can run there (#425). */
.pg-cloud { overflow: auto; }
.pg-cloud-shot { max-width: 100%; height: auto; border: 1px solid var(--line, #8884); border-radius: 8px; }