daily-focus 0.1.0

package/public/style.css

@@ -0,0 +1,2515 @@
+/*
+ * Tokens come from the validated reference palette: the eight categorical hues
+ * carry source identity, the four status colours are reserved for state only.
+ * Both modes are selected, not flipped — dark has its own steps.
+ *
+ * Source colour is never the only cue: every dot sits beside its source name in
+ * text, which is what lets the lighter light-mode hues (aqua, yellow, magenta)
+ * sit below 3:1 contrast without losing meaning.
+ *
+ * Each token names both its steps and `light-dark()` picks one, so the dark
+ * palette lives here and nowhere else. It used to be a second, hand-kept copy of
+ * this list inside a `prefers-color-scheme` block — twenty-two values one edit
+ * away from disagreeing with the ones above them, with nothing to notice.
+ */
+
+:root {
+  /*
+   * Both keywords, which is the state the toggle calls "system": `light-dark()`
+   * follows `prefers-color-scheme` and re-evaluates the moment the OS flips.
+   * This is also what renders before `index.html`'s stamp has run.
+   */
+  color-scheme: light dark;
+
+  --page: light-dark(#f9f9f7, #0d0d0d);
+  --surface: light-dark(#fcfcfb, #1a1a19);
+  --surface-sunken: light-dark(#f2f1ed, #131312);
+  --ink-1: light-dark(#0b0b0b, #ffffff);
+  --ink-2: light-dark(#52514e, #c3c2b7);
+  --ink-3: #898781; /* Shared deliberately: the muted step clears both pages. */
+  --hairline: light-dark(#e1e0d9, #2c2c2a);
+  --border: light-dark(rgba(11, 11, 11, 0.1), rgba(255, 255, 255, 0.1));
+  /*
+   * Dark wants no shadow at all. Written as transparent steps rather than as a
+   * `none` somewhere else, because anywhere else means a selector that knows
+   * which mode it is in — and that is the duplicate copy coming back for one
+   * property.
+   */
+  --shadow: 0 1px 2px light-dark(rgba(11, 11, 11, 0.05), transparent),
+    0 4px 16px light-dark(rgba(11, 11, 11, 0.04), transparent);
+
+  --good: #0ca30c;
+  --warning: #fab219;
+  --serious: #ec835a;
+  --critical: #d03b3b;
+  --good-ink: light-dark(#006300, #0ca30c);
+
+  --src-github: light-dark(#2a78d6, #3987e5);
+  --src-email: light-dark(#eb6834, #d95926);
+  --src-calendar: light-dark(#1baf7a, #199e70);
+  --src-jira: light-dark(#eda100, #c98500);
+  --src-slack: light-dark(#e87ba4, #d55181);
+  --src-workday: #008300; /* Shared: the green reads on both. */
+  --src-tasks: light-dark(#0b8ea8, #2ba8c4);
+  --src-atlassian: light-dark(#4a3aa7, #9085e9);
+  --src-reminders: light-dark(#8a5a2b, #c89058);
+  --src-messages: light-dark(#9b3fc0, #c07ae8);
+  --src-eboks: light-dark(#c42b3a, #e5535f);
+  --src-other: #898781;
+
+  --accent: light-dark(#2a78d6, #3987e5);
+  --accent-wash: light-dark(#e8f1fd, #14263a);
+  --focus-ring: light-dark(#2a78d6, #3987e5);
+
+  --radius: 10px;
+  --radius-sm: 6px;
+  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+/*
+ * The two overrides, and the whole of what the toggle does. `data-theme="system"`
+ * matches neither and keeps both keywords above, so the third state is the
+ * absence of a choice rather than a third palette to maintain.
+ */
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/*
+ * The UA stylesheet's `[hidden] { display: none }` loses to any class that sets
+ * display, so `.timer`, `.focus-bar` and `.toast` all rendered as empty boxes
+ * while "hidden". Assert it once here rather than remembering per component.
+ */
+[hidden] {
+  display: none !important;
+}
+
+body {
+  margin: 0;
+  padding: 0 clamp(16px, 4vw, 40px) 64px;
+  background: var(--page);
+  color: var(--ink-1);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+a {
+  color: var(--accent);
+  text-underline-offset: 2px;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+}
+.skip-link:focus {
+  left: 16px;
+  top: 16px;
+  z-index: 10;
+  padding: 8px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+/* ---------- header ---------- */
+
+.page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 28px 0 20px;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.page-header__date {
+  margin: 2px 0 0;
+  color: var(--ink-2);
+  font-size: 14px;
+}
+
+.page-header__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.freshness {
+  color: var(--ink-3);
+  font-size: 13px;
+}
+.freshness[data-stale='true'] {
+  color: var(--critical);
+  font-weight: 500;
+}
+/*
+ * The readout as a link into the morning agent's runs: the same words, so the
+ * header gains nothing, and an underline on hover to say they go somewhere.
+ */
+.freshness__link {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.freshness__link:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+}
+
+.icon-button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-2);
+  font-size: 14px;
+  cursor: pointer;
+}
+.icon-button:hover {
+  color: var(--ink-1);
+  border-color: var(--ink-3);
+}
+.icon-button__icon {
+  width: 15px;
+  height: 15px;
+}
+/* A toggle that is on, such as the gear while Settings is open: drawn as the selected tab is, in the accent. */
+.icon-button[aria-pressed='true'] {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-wash);
+}
+
+/*
+ * Lost connection to the server. A pill in the header, because it is about the
+ * whole page rather than the tab showing, and it heals by itself — a full-width
+ * banner claimed more attention than a state with nothing to do about it.
+ * Warning, not critical: nothing is lost, the page is just not moving.
+ */
+.connection {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-2);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: help;
+}
+.connection[hidden] {
+  display: none;
+}
+.connection__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--warning);
+  animation: connection-pulse 1.4s ease-in-out infinite;
+}
+@keyframes connection-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .connection__dot {
+    animation: none;
+  }
+}
+/* The readouts beside it describe the last update, not now, so they step back. */
+body[data-offline='true'] .freshness,
+body[data-offline='true'] .refresh-label {
+  opacity: 0.5;
+}
+
+/*
+ * One glyph per theme state, picked by the attribute the pre-paint stamp sets.
+ * Keyed off `:root` rather than off something the client writes later, so the
+ * icon arrives in the same paint as the colours it is describing.
+ */
+.theme-toggle__icon {
+  display: none;
+  width: 15px;
+  height: 15px;
+}
+:root[data-theme='system'] .theme-toggle__icon[data-theme-icon='system'],
+:root[data-theme='light'] .theme-toggle__icon[data-theme-icon='light'],
+:root[data-theme='dark'] .theme-toggle__icon[data-theme-icon='dark'],
+/* No stamp at all means no script ran, and the OS is still deciding. */
+:root:not([data-theme]) .theme-toggle__icon[data-theme-icon='system'] {
+  display: block;
+}
+
+/*
+ * Each board's source, last read and refresh icon, in the header beside the
+ * theme toggle and only on its own tab — where the brief's "updated … ago" sits
+ * on Today, so that side of the header always describes the tab showing.
+ */
+.board-refresh {
+  display: none;
+}
+body[data-view='board'] #board-refresh,
+body[data-view='tickets'] #tickets-refresh {
+  display: contents;
+}
+body[data-view='board'] #freshness,
+body[data-view='tickets'] #freshness,
+body[data-view='board'] #brief-refresh,
+body[data-view='tickets'] #brief-refresh {
+  display: none;
+}
+.brief-refresh {
+  display: contents;
+}
+/* Reads as the Today tab's "updated … ago" does, so the three tabs match. */
+.refresh-label {
+  color: var(--ink-3);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+.refresh-label[data-stale='true'] {
+  color: var(--critical);
+  font-weight: 500;
+}
+/*
+ * Two arrows chasing each other round a circle, stroked to match the theme
+ * toggle's glyphs. A mask rather than an image so it is painted in
+ * `currentColor`, and turns red with the button when the board is stale.
+ */
+.refresh-button__icon {
+  display: block;
+  width: 15px;
+  height: 15px;
+  background: currentColor;
+  --refresh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 12a8.5 8.5 0 0 1 14.5-6L20.5 8.5'/><path d='M20.5 3.5v5h-5'/><path d='M20.5 12a8.5 8.5 0 0 1-14.5 6L3.5 15.5'/><path d='M8.5 15.5h-5v5'/></svg>");
+  -webkit-mask: var(--refresh-glyph) center / contain no-repeat;
+  mask: var(--refresh-glyph) center / contain no-repeat;
+}
+.refresh-button[data-fetching='true'] {
+  cursor: progress;
+}
+.refresh-button[data-fetching='true'] .refresh-button__icon {
+  animation: refresh-spin 0.9s linear infinite;
+}
+.refresh-button[data-stale='true'] {
+  color: var(--critical);
+  border-color: var(--critical);
+}
+@keyframes refresh-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Still says it is busy without the motion: the icon dims instead of turning. */
+@media (prefers-reduced-motion: reduce) {
+  .refresh-button[data-fetching='true'] .refresh-button__icon {
+    animation: none;
+    opacity: 0.45;
+  }
+}
+
+/* ---------- focus timer ---------- */
+
+.timer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 1280px;
+  margin: 0 auto 14px;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  font-size: 13.5px;
+  color: var(--ink-2);
+}
+/* Past the target the timer stops being encouraging and starts being a fact. */
+.timer[data-state='overrun'] {
+  border-left-color: var(--serious);
+}
+.timer[data-state='idle'] {
+  border-left-color: var(--hairline);
+  color: var(--ink-3);
+}
+
+.timer__clock {
+  font-size: 20px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-1);
+  min-width: 62px;
+}
+.timer[data-state='overrun'] .timer__clock {
+  color: var(--serious);
+}
+
+.timer__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.timer__note {
+  color: var(--ink-3);
+}
+.timer__note--warn {
+  color: var(--critical);
+}
+.timer__tally {
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+
+/*
+ * The bar after the timer stopped itself. Marked like the overrun state rather
+ * than the idle one: something happened that's worth a glance, even though the
+ * thing that happened was the dashboard being careful.
+ */
+.timer[data-state='stopped'] {
+  border-left-color: var(--serious);
+}
+.timer__away {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.timer__away-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.timer__away-text {
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.timer__away-detail {
+  color: var(--ink-3);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+/* ---------- banners ---------- */
+
+.banners {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.banner {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 14px;
+  margin-bottom: 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.banner__icon {
+  flex: none;
+  line-height: 1.5;
+}
+.banner--critical {
+  border-left: 3px solid var(--critical);
+}
+.banner--critical .banner__icon {
+  color: var(--critical);
+}
+.banner--warning {
+  border-left: 3px solid var(--warning);
+}
+.banner--warning .banner__icon {
+  color: var(--serious);
+}
+.banner__text {
+  flex: 1;
+  min-width: 0;
+}
+.banner__action {
+  flex: none;
+  align-self: center;
+}
+
+/*
+ * A read that keeps failing: the banner's one line as a fold, with how long, why
+ * and a Retry inside. Shared with the agenda's note, which brings its own box.
+ */
+.failure {
+  display: block;
+}
+.failure__summary {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  cursor: pointer;
+  list-style: none;
+}
+.failure__summary::-webkit-details-marker {
+  display: none;
+}
+.failure__summary::after {
+  content: '▸';
+  flex: none;
+  color: var(--ink-3);
+}
+.failure[open] > .failure__summary::after {
+  content: '▾';
+}
+.failure__summary:hover::after {
+  color: var(--ink-1);
+}
+.failure__message {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* Under the message, not under the icon. */
+.banner .failure__body {
+  margin-left: 20px;
+}
+.failure__facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+.agenda__note .failure__facts {
+  font-size: inherit;
+}
+.failure__retry[aria-busy='true'] {
+  cursor: progress;
+}
+.failure__detail {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  max-height: 16em;
+  overflow: auto;
+  border-radius: 6px;
+  background: var(--surface-sunken);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.agenda__note .failure__detail {
+  padding: 6px 8px;
+  background: var(--surface);
+  font-size: 10.5px;
+}
+
+/* A run of the morning agent the dashboard started, and what it reported. */
+.agent-run__progress {
+  display: block;
+  margin-top: 2px;
+  color: var(--ink-3);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A banner that is a way in, as a card is: the whole strip is the target. */
+.banner--link {
+  cursor: pointer;
+}
+.banner--link:hover {
+  border-color: var(--ink-3);
+}
+.banner--link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* The run's panel: how it went, then the list of the others, folded away. */
+.agent-run__status {
+  margin: 0 0 22px;
+  font-size: 13px;
+  color: var(--ink-2);
+}
+.agent-run__status--bad {
+  color: var(--serious);
+}
+.agent-run__list summary {
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+/* What the agent said along the way, one fold per message, under its first line. */
+.agent-run__messages {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.agent-run__list > .agent-run__messages {
+  margin-top: 8px;
+}
+.agent-run__message {
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+}
+.agent-run__message summary {
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--ink-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-run__message[open] summary {
+  color: var(--ink-3);
+}
+.agent-run__message-index,
+.agent-run__message[open] .agent-run__message-line {
+  display: none;
+}
+.agent-run__message[open] .agent-run__message-index {
+  display: inline;
+}
+.agent-run__message .assistant__reply {
+  padding: 0 10px 8px;
+}
+.agent-run__runs {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.agent-run__runs li + li {
+  margin-top: 6px;
+}
+.agent-run__pick {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+  text-align: left;
+  font: inherit;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+.agent-run__pick:hover {
+  border-color: var(--ink-3);
+  color: var(--ink-1);
+}
+.agent-run__pick-when {
+  display: block;
+  font-size: 12.5px;
+}
+.agent-run__pick-line {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--ink-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Explanation, not status — so it borrows the accent, not one of the four state hues. */
+.banner--info {
+  border-left: 3px solid var(--accent);
+}
+.banner--info .banner__icon {
+  color: var(--accent);
+}
+
+/* ---------- layout ---------- */
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 24px;
+  align-items: start;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .layout__side {
+    order: -1;
+  }
+}
+
+/* ---------- focus mode ---------- */
+
+/*
+ * Fourteen open rows are fourteen invitations to switch task. Focus mode answers
+ * the only question that matters mid-work — "what am I doing right now" — by
+ * leaving the objective, one item, and the clock, and taking away the menu.
+ */
+.focus-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 16px;
+  padding: 9px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  font-size: 13px;
+  color: var(--ink-2);
+}
+
+/* Scoped to the Today view: the board is a different question, and stays whole. */
+body[data-focus-mode='true'][data-view='today'] .stats,
+body[data-focus-mode='true'][data-view='today'] .headline,
+body[data-focus-mode='true'][data-view='today'] #today .drawer,
+body[data-focus-mode='true'][data-view='today'] #today .section__header,
+/* every section except the first, and every item in it except the first */
+body[data-focus-mode='true'][data-view='today'] #today .section:not(:first-of-type),
+body[data-focus-mode='true'][data-view='today'] #today .section:first-of-type .item:not(:first-child) {
+  display: none;
+}
+
+body[data-focus-mode='true'][data-view='today'] #today .item {
+  padding: 18px 20px;
+}
+body[data-focus-mode='true'][data-view='today'] #today .item__title {
+  font-size: 19px;
+  line-height: 1.35;
+}
+
+/* ---------- standing objective ---------- */
+
+/*
+ * Deliberately heavier than the agent's headline below it. The headline changes
+ * daily; this doesn't, and it should be the first thing read on the page.
+ */
+.objective {
+  margin-bottom: 20px;
+  padding: 14px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.objective__label {
+  margin: 0 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.objective__text {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  color: var(--ink-1);
+}
+
+.objective__blocker {
+  margin: 6px 0 0;
+  font-size: 13.5px;
+  color: var(--ink-2);
+}
+.objective__blocker-label {
+  color: var(--critical);
+  font-weight: 500;
+}
+
+.objective__note {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+
+/* A reminder, not a headline: no accent, no shadow, nothing competing with the brief. */
+.objective--empty {
+  padding: 10px 16px;
+  background: transparent;
+  border-style: dashed;
+  border-left-width: 1px;
+  box-shadow: none;
+}
+.objective--empty .objective__note {
+  margin-top: 2px;
+}
+
+/* ---------- stat row ---------- */
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.stat {
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.stat__label {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: 12px;
+}
+.stat__value {
+  margin: 2px 0 0;
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+.stat__value[data-tone='critical'] {
+  color: var(--critical);
+}
+.stat__value[data-tone='good'] {
+  color: var(--good-ink);
+}
+.stat__footnote {
+  margin: 3px 0 0;
+  color: var(--ink-3);
+  font-size: 11.5px;
+  line-height: 1.35;
+  /* The last thing completed can be a full title; keep the tile from growing. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.headline {
+  margin: 0 0 20px;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  color: var(--ink-2);
+  font-size: 14px;
+}
+
+/* ---------- sections ---------- */
+
+.section {
+  margin-bottom: 22px;
+}
+
+.section__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0 0 8px;
+  padding: 0 2px;
+}
+.section__title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-2);
+}
+.section__count {
+  color: var(--ink-3);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.section__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  align-self: center;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px; /* the surface gap doing the separating, not a border */
+}
+
+/* ---------- item ---------- */
+
+.item {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 11px 13px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  scroll-margin: 90px;
+}
+/*
+ * Three states used to share one look: selected, priority and running were all
+ * "accent border", so the one that matters most was indistinguishable from a
+ * keyboard cursor. They're now ranked — selected is quietest, running loudest.
+ */
+.item[data-selected='true'] {
+  border-color: var(--ink-3);
+  box-shadow: 0 0 0 1px var(--ink-3);
+}
+.item[data-priority='true'] {
+  border-left: 3px solid var(--accent);
+}
+
+/* The one you committed to. Four reinforcing cues, because missing it is the
+ * whole failure mode: a thick bar, a wash, a ring, and a live clock on the row. */
+.item[data-running='true'],
+.item[data-running='true'][data-selected='true'] {
+  border-color: var(--accent);
+  border-left: 5px solid var(--accent);
+  background: var(--accent-wash);
+  box-shadow: 0 0 0 2px var(--accent);
+}
+.item[data-running='true'][data-overrun='true'],
+.item[data-running='true'][data-overrun='true'][data-selected='true'] {
+  border-color: var(--serious);
+  border-left-color: var(--serious);
+  box-shadow: 0 0 0 2px var(--serious);
+}
+
+/* While a session runs, everything else recedes — the competing rows are the
+ * distraction the timer exists to resist. Hover brings one back so the list is
+ * still usable without stopping the clock. */
+body[data-session-active='true'] #today .item:not([data-running='true']) {
+  opacity: 0.45;
+}
+body[data-session-active='true'] #today .item:not([data-running='true']):hover,
+body[data-session-active='true'] #today .item:not([data-running='true']):focus-within {
+  opacity: 1;
+}
+.item[data-status='done'] .item__title,
+.item[data-status='dismissed'] .item__title {
+  color: var(--ink-3);
+  text-decoration: line-through;
+}
+.item[data-pending='true'] {
+  opacity: 0.55;
+}
+
+.item__mark {
+  padding-top: 4px;
+}
+
+.item__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  display: block;
+}
+
+.item__body {
+  min-width: 0;
+}
+
+.item__title {
+  margin: 0;
+  font-size: 14.5px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.item__title a {
+  color: inherit;
+  text-decoration: none;
+}
+.item__title a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+}
+
+/*
+ * The `owner/repo` (and, on the board, `#number`) ahead of a title. Lighter than
+ * the title it sits on so it reads as an address rather than as the first words
+ * of the sentence — you find the row by its title and confirm it by this.
+ */
+.item__ref {
+  color: var(--ink-3);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+.item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 5px;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+
+.item__source {
+  color: var(--ink-2);
+  font-weight: 500;
+}
+
+.item__detail {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--ink-2);
+  overflow-wrap: anywhere;
+}
+.item__detail code {
+  padding: 1px 4px;
+  background: var(--surface-sunken);
+  border-radius: 3px;
+  font-size: 0.92em;
+}
+
+/* A click anywhere on the card opens the panel, and the cursor says so. */
+.item {
+  cursor: pointer;
+}
+/* The row the panel is open on: a bar on the edge the panel sits past. */
+.item[data-detail='true'] {
+  border-right: 3px solid var(--accent);
+}
+
+/* pills */
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  font-size: 11.5px;
+  line-height: 1.6;
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+.pill--priority {
+  border-color: transparent;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.pill--running {
+  border-color: transparent;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.item[data-overrun='true'] .pill--running {
+  background: var(--serious);
+  color: #1a1a19;
+}
+.pill--objective {
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 500;
+}
+.pill--overdue {
+  border-color: var(--critical);
+  color: var(--critical);
+  font-weight: 500;
+}
+.pill--due {
+  border-color: var(--serious);
+  color: var(--ink-2);
+}
+.pill--age {
+  border-color: var(--warning);
+  color: var(--ink-2);
+}
+.pill--conflict {
+  border-color: var(--critical);
+  color: var(--critical);
+}
+.pill--tag {
+  background: var(--surface-sunken);
+  border-color: transparent;
+  color: var(--ink-3);
+}
+
+/* actions */
+
+.item__actions {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 90ms ease-out;
+  background: var(--surface);
+  padding-left: 6px;
+}
+.item:hover .item__actions,
+.item:focus-within .item__actions,
+.item[data-selected='true'] .item__actions {
+  opacity: 1;
+}
+@media (hover: none) {
+  .item__actions {
+    opacity: 1;
+  }
+}
+
+.button {
+  padding: 3px 9px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-2);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.button:hover {
+  color: var(--ink-1);
+  border-color: var(--ink-3);
+}
+.button--primary {
+  border-color: transparent;
+  background: var(--accent);
+  color: #fff;
+}
+.button--primary:hover {
+  color: #fff;
+  filter: brightness(1.08);
+}
+/* Not yet: it reads as waiting, not as the next thing to press. */
+.button:disabled,
+.button:disabled:hover {
+  opacity: 0.45;
+  cursor: not-allowed;
+  filter: none;
+  border-color: var(--border);
+}
+
+/* note composer */
+
+/* snooze menu */
+
+.menu {
+  position: absolute;
+  top: 34px;
+  right: 10px;
+  z-index: 5;
+  /* Wide enough that the date field below still shows its own placeholder. */
+  min-width: 204px;
+  padding: 5px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 6px 24px rgba(11, 11, 11, 0.14);
+}
+.menu button {
+  display: block;
+  width: 100%;
+  padding: 5px 9px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.menu button:hover {
+  background: var(--surface-sunken);
+  color: var(--ink-1);
+}
+
+/* The resolved date on the long-range presets, trailing its label. */
+.menu__when {
+  float: right;
+  padding-left: 12px;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
+}
+.menu__date {
+  display: flex;
+  gap: 5px;
+  padding: 5px 6px 2px;
+  margin-top: 4px;
+  border-top: 1px solid var(--hairline);
+}
+/*
+ * The presets above are stacked, so `.menu button` makes them full-width. This
+ * row is a flex line instead, and a 100% basis there lets "Set" claim the whole
+ * width and squeeze the date field down to its calendar icon — an empty box.
+ */
+.menu__date button {
+  flex: 0 0 auto;
+  width: auto;
+  text-align: center;
+}
+.menu__date input {
+  flex: 1;
+  min-width: 5.5em;
+  padding: 3px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--page);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 12px;
+}
+
+/* ---------- agenda ---------- */
+
+.agenda {
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  position: sticky;
+  top: 16px;
+}
+
+.agenda__title {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-2);
+}
+
+/*
+ * Why the agenda reads the way it does, when the calendar isn't the source.
+ * Sits under the heading rather than in the page banners: it is about these rows.
+ */
+.agenda__note {
+  margin: 0 0 10px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--ink-2);
+  background: var(--surface-sunken);
+  border-left: 2px solid var(--ink-3);
+}
+
+/* Falling back to the brief is a louder thing than a merely stale read. */
+.agenda__note--stale {
+  border-left-color: var(--warning);
+}
+
+.agenda__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.agenda__row {
+  display: grid;
+  /* Wide enough for a 12-hour "09:30 AM" without wrapping. */
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 10px;
+  padding: 6px 0;
+  border-top: 1px solid var(--hairline);
+  font-size: 13px;
+}
+.agenda__row:first-child {
+  border-top: 0;
+}
+
+.agenda__time {
+  color: var(--ink-3);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums; /* a column of times, so tabular is right here */
+  white-space: nowrap;
+  padding-top: 1px;
+}
+
+.agenda__name {
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+/* Event links take the row's ink so past events actually read as past. */
+.agenda__name a {
+  color: inherit;
+  text-decoration: none;
+}
+.agenda__name a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+}
+.agenda__row[data-past='true'] .agenda__name,
+.agenda__row[data-past='true'] .agenda__time {
+  color: var(--ink-3);
+}
+
+/*
+ * An event that sits on the day without taking any of it: a delivery window, a
+ * booking. One step down in emphasis and deliberately not the `[data-past]`
+ * dimming, because being home for the delivery is the entire point of it being
+ * on the agenda — a 14:30 slot that reads as already over is a worse mistake
+ * than one that reads as a meeting. The row also says "marked free" in text,
+ * since ink is never the only cue here.
+ */
+.agenda__row[data-blocking='false'] .agenda__name {
+  color: var(--ink-2);
+}
+.agenda__sub {
+  display: block;
+  color: var(--ink-3);
+  font-size: 12px;
+}
+
+.agenda__row--free .agenda__name {
+  color: var(--good-ink);
+  font-weight: 500;
+}
+.agenda__row--now {
+  align-items: center;
+  padding: 2px 0;
+  border-top: 0;
+}
+.agenda__now-label {
+  color: var(--critical);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.agenda__now-line {
+  height: 2px;
+  background: var(--critical);
+  border-radius: 1px;
+}
+
+.empty {
+  margin: 0;
+  padding: 18px 4px;
+  color: var(--ink-3);
+  font-size: 13.5px;
+  text-align: center;
+}
+
+/* ---------- done drawer ---------- */
+
+.drawer {
+  margin-top: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.drawer > summary {
+  padding: 9px 13px;
+  cursor: pointer;
+  color: var(--ink-2);
+  font-size: 13px;
+  list-style: none;
+}
+.drawer > summary::-webkit-details-marker {
+  display: none;
+}
+.drawer > summary::before {
+  content: '▸ ';
+  color: var(--ink-3);
+}
+.drawer[open] > summary::before {
+  content: '▾ ';
+}
+.drawer .list {
+  padding: 0 8px 8px;
+}
+.drawer .item {
+  box-shadow: none;
+}
+
+/* ---------- toast ---------- */
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 22px;
+  transform: translateX(-50%);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 14px;
+  background: var(--ink-1);
+  color: var(--page);
+  border-radius: 999px;
+  font-size: 13px;
+  box-shadow: 0 6px 24px rgba(11, 11, 11, 0.25);
+}
+.toast button {
+  border: 0;
+  background: none;
+  color: var(--page);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* ---------- help dialog ---------- */
+
+.help {
+  max-width: 420px;
+  padding: 22px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink-1);
+}
+.help::backdrop {
+  background: rgba(11, 11, 11, 0.4);
+}
+.help h2 {
+  margin: 0 0 14px;
+  font-size: 16px;
+}
+.help dl {
+  margin: 0 0 14px;
+  display: grid;
+  gap: 6px;
+}
+.help dl > div {
+  display: grid;
+  grid-template-columns: 96px 1fr;
+  gap: 10px;
+  font-size: 13.5px;
+}
+.help dt {
+  color: var(--ink-2);
+}
+.help dd {
+  margin: 0;
+  color: var(--ink-2);
+}
+.help__note {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+kbd {
+  padding: 1px 5px;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--surface-sunken);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--ink-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+  }
+}
+
+/* ---------- tabs ---------- */
+
+/*
+ * Two views, one page. Today is the brief; the board is the live list of pull
+ * requests. They're tabs rather than one long page because the brief is edited
+ * down to a short list on purpose, and a wall of PRs beneath it would undo that.
+ */
+.tabs {
+  display: flex;
+  gap: 4px;
+  max-width: 1280px;
+  margin: -6px auto 14px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 12px 9px;
+  margin-bottom: -1px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.tab:hover {
+  color: var(--ink-1);
+}
+.tab[aria-selected='true'] {
+  color: var(--ink-1);
+  border-bottom-color: var(--accent);
+}
+
+.tab__badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--critical);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  cursor: help;
+}
+/*
+ * Centring the line box doesn't centre the digits: where they sit inside it
+ * depends on the font's ascent and descent, which differ by browser, and in
+ * an 18px circle a pixel off is visible. Trimmed to cap height and baseline,
+ * the line box is exactly the digits, so equal padding centres them. The
+ * trim only applies to a block container's own lines, not to the anonymous
+ * item a grid wraps its text in, hence inline-block.
+ */
+@supports (text-box: trim-both cap alphabetic) {
+  .tab__badge {
+    display: inline-block;
+    height: auto;
+    padding: calc((18px - 1cap) / 2) 5px;
+    text-align: center;
+    text-box: trim-both cap alphabetic;
+  }
+}
+
+/*
+ * Which view is showing. Focus mode is scoped to Today (see the rules above).
+ *
+ * One rule per panel per view rather than `:not()`, because a view name nobody
+ * has written a rule for should show nothing rather than everything at once.
+ */
+body[data-view='board'] #today,
+body[data-view='tickets'] #today,
+body[data-view='settings'] #today,
+body[data-view='board'] .layout__side,
+body[data-view='tickets'] .layout__side,
+body[data-view='settings'] .layout__side {
+  display: none;
+}
+body[data-view='today'] #board,
+body[data-view='tickets'] #board,
+body[data-view='settings'] #board {
+  display: none;
+}
+body[data-view='today'] #tickets,
+body[data-view='board'] #tickets,
+body[data-view='settings'] #tickets {
+  display: none;
+}
+body[data-view='today'] #settings,
+body[data-view='board'] #settings,
+body[data-view='tickets'] #settings {
+  display: none;
+}
+body[data-view='board'] .layout,
+body[data-view='tickets'] .layout,
+body[data-view='settings'] .layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* ---------- the pull request board ---------- */
+
+
+/* The line under a waiting-on-you row that says why. Reads as the row's detail. */
+.item__reason {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--critical);
+  overflow-wrap: anywhere;
+}
+
+/*
+ * Waiting on a gate or on checks is not a failure, so it doesn't get the red the
+ * "your move" reasons use. Nothing has gone wrong; it just isn't finished.
+ */
+.item__reason--waiting {
+  color: var(--ink-3);
+}
+
+.item__reason--waiting a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+.pill--good {
+  border-color: var(--good);
+  color: var(--good-ink);
+  font-weight: 500;
+}
+
+.item--pull[data-status='snoozed'] .item__title,
+.item--ticket[data-status='snoozed'] .item__title {
+  color: var(--ink-3);
+}
+
+/* ---------- the Jira ticket board ---------- */
+
+/*
+ * Two columns, by measurement rather than by taste: the rows were
+ * 1200px wide for a summary that runs 520px at the median and 683px at the
+ * longest, so half of every card was empty and thirty of them came to 2527px of
+ * scrolling. At 460px a column the same thirty fit in half that.
+ *
+ * Multicol rather than a grid, which is what this was and which was wrong for a
+ * board whose cards disagree about height. A grid lays out in *rows*, so a
+ * one-line card beside a card carrying a note gets the note's height reserved
+ * next to it and left empty — `align-items: start` stops it stretching but
+ * cannot reclaim the row, and one noted card on a real board cost about a
+ * hundred pixels of nothing. A column flow has no rows to align against: each
+ * card starts where the one above it ended.
+ *
+ * `break-inside: avoid` so a card is never split down the middle of a column,
+ * and the vertical rhythm is a margin rather than `gap`, which a multicol
+ * container does not have.
+ *
+ * Never more than two, so the board keeps the shared page width and its edges
+ * line up with the other tabs' however wide the display is. The 460px floor is
+ * what drops it to one column on a narrow window rather than squeezing two.
+ *
+ * The abspos worry that picked the grid does not apply: `.item` is
+ * `position: relative`, so `.item__actions` and the snooze `.menu` resolve
+ * against the card and travel with it into its column. Only a child resolving
+ * against the multicol container itself would land beside the wrong row.
+ */
+#tickets .list {
+  display: block;
+  columns: 2 460px;
+  column-gap: 10px;
+}
+#tickets .list > .item {
+  break-inside: avoid;
+  margin-bottom: 4px;
+}
+
+/*
+ * A fixed gutter for the status, so every summary starts at the same x and the
+ * statuses read as a column you can run an eye down. Wide enough for the longest
+ * status seen (79px) with room; a longer one shrinks its own pill rather than
+ * moving the summaries, which is the right way round for a board scanned by
+ * column.
+ */
+#tickets .item--ticket {
+  padding: 8px 11px;
+}
+#tickets .item__body {
+  display: grid;
+  grid-template-columns: 6rem minmax(0, 1fr);
+  align-items: baseline;
+  gap: 4px 9px;
+}
+#tickets .item__meta--status {
+  grid-column: 1;
+  grid-row: 1;
+  margin-top: 0;
+  flex-wrap: nowrap;
+}
+/*
+ * The reserve on the right is the action strip's width. `.item__actions` is
+ * absolutely positioned over the card's top right and opaque, so without this it
+ * covers the tail of any summary long enough to reach it — on hover, and
+ * permanently on the selected row, which is the row being read. Measured rather
+ * than guessed: reserving the pull request board's three buttons cost 142px of
+ * board height, and dropping Open — which only duplicated the link the summary
+ * already is — brought it to 87px for the same "nothing is ever hidden".
+ */
+#tickets .item__title {
+  grid-column: 2;
+  grid-row: 1;
+  padding-right: 104px;
+  font-size: 13.5px;
+}
+/* The exceptions, the notes and the note form all span both columns. */
+#tickets .item__meta--extra,
+#tickets .item__notes,
+#tickets .note-form {
+  grid-column: 1 / -1;
+}
+
+/*
+ * The switch between the ticket tab's two views: what is out of sync, and what
+ * you are working on. A segmented control rather than a second row of tabs, so it
+ * reads as a way of looking at this tab and not as more places to go — the tabs
+ * above are underlined words, the status line below is a bordered bar, and this
+ * is neither.
+ */
+/*
+ * The switch and the key to the dots share a line: both describe the view
+ * below rather than being part of it, and stacked they made a third tier under
+ * the tabs, with the key hanging off the switch like a caption. The key goes
+ * to the far end and wraps beneath the switch when the line runs out.
+ */
+.ticket-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 24px;
+  margin: 0 0 18px;
+}
+.mode-switch {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--surface-sunken);
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+}
+.mode-switch__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--ink-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.mode-switch__option:hover {
+  color: var(--ink-1);
+}
+.mode-switch__option[aria-selected='true'] {
+  background: var(--surface);
+  color: var(--ink-1);
+  box-shadow: var(--shadow);
+}
+.mode-switch__count {
+  color: var(--ink-3);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * On a Working on row whose ticket is also out of sync. The border is the due
+ * pill's, because this is the same kind of claim — something here wants doing —
+ * and the text says what, so the colour is never the only thing carrying it.
+ */
+.pill--flag {
+  border-color: var(--serious);
+  background: transparent;
+  color: var(--ink-2);
+}
+
+/*
+ * The key to the dots. Sits at the end of the switch's line, read once — and
+ * carries each type's name in text beside its swatch, which is what lets the
+ * dot be the only place the type appears on a row.
+ */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  /* A <p>, and its default margins made the switch's line taller whenever the key was on it. */
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.legend__entry {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.legend__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  display: block;
+}
+
+/*
+ * A count, not an alarm. The board's badge is red because something is waiting
+ * on you; nothing on the ticket tab ever is, and a red number that is there
+ * every single morning is one you stop reading by the end of the week.
+ */
+.tab__badge--quiet {
+  background: var(--surface-sunken);
+  /* A shadow, not a border, so it adds nothing to the padding that centres the digits. */
+  box-shadow: inset 0 0 0 1px var(--hairline);
+  color: var(--ink-2);
+}
+
+/*
+ * What to do about a court, under its rows rather than above them.
+ *
+ * Above the list it would be read once and then skipped past every morning on
+ * the way to the rows; below, it is where the eye lands after running out of
+ * rows, which is when "a pull request nobody has written yet is invisible from
+ * here" is actually worth knowing.
+ */
+.court-hint {
+  margin: -6px 0 18px;
+  padding-left: 26px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--ink-3);
+  max-width: 68ch;
+}
+
+/*
+ * The status doubles as the control that changes it, and looks exactly like the
+ * pill it replaced — no underline, no marker. A persistent "this is clickable"
+ * hint is ink spent every row of every morning to say something the row only
+ * needs to say when you go looking for it, so the cursor and the hover carry it
+ * instead. The rows are dense enough that finding out costs one hover.
+ */
+.pill--button {
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+.pill--button:hover {
+  border-color: var(--ink-3);
+  color: var(--ink-1);
+}
+
+/*
+ * Anchored to the gutter rather than the card's right edge, unlike the park
+ * menu: it belongs to the pill that opened it, and the two menus must not be
+ * able to appear in the same place.
+ */
+.menu--status {
+  top: 26px;
+  right: auto;
+  left: 0;
+  min-width: 9rem;
+}
+
+/* The status the ticket claims — the row's own subject, so it carries weight. */
+.pill--status {
+  border-color: var(--hairline);
+  background: var(--surface-sunken);
+  color: var(--ink-1);
+  font-weight: 500;
+}
+
+/* An anchor styled as a button sits a hair lower than a real one; align them. */
+a.button {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+/* ---------- the assistant ---------- */
+
+.pill--assistant {
+  color: var(--accent);
+  background: var(--accent-wash);
+}
+
+/*
+ * ---------- the assistant ----------
+ *
+ * A section of the item panel, so the transcript scrolls with the panel's body
+ * and the field sits at its foot. It used to be a box under the card with its own
+ * scroll region; now the panel is the box.
+ */
+
+.assistant__turns {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.assistant__request {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.assistant__request strong {
+  color: var(--ink-1);
+  font-weight: 600;
+}
+
+.assistant__reply {
+  margin-top: 5px;
+  padding: 7px 10px;
+  border-left: 2px solid var(--accent);
+  background: var(--surface);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.assistant__reply > * {
+  margin: 0;
+}
+.assistant__reply > * + * {
+  margin-top: 7px;
+}
+.assistant__reply ul,
+.assistant__reply ol {
+  padding-left: 20px;
+}
+.assistant__reply li + li {
+  margin-top: 3px;
+}
+.assistant__reply pre {
+  padding: 7px 9px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+  font-size: 12px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+.assistant__reply code {
+  font-size: 12px;
+}
+.assistant__reply blockquote {
+  padding: 2px 10px;
+  border-left: 2px solid var(--hairline);
+  color: var(--ink-2);
+}
+.assistant__reply hr {
+  border: 0;
+  border-top: 1px solid var(--hairline);
+}
+.assistant__turn[data-status='running'] .assistant__reply {
+  border-left-style: dashed;
+}
+
+.assistant__status {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.assistant__status--bad {
+  color: var(--critical);
+}
+.assistant[data-running='true'] .assistant__status:not(.assistant__status--bad)::after {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-left: 6px;
+  border-radius: 50%;
+  border: 1.5px solid var(--accent);
+  border-top-color: transparent;
+  animation: assistant-spin 0.9s linear infinite;
+  vertical-align: -1px;
+}
+@keyframes assistant-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .assistant[data-running='true'] .assistant__status::after {
+    animation: none;
+  }
+}
+
+.assistant__quick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.assistant__form {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.assistant__input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--page);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  resize: vertical;
+}
+.assistant__input:disabled {
+  opacity: 0.6;
+}
+
+/* ---------- the item panel ---------- */
+
+/*
+ * The panel takes the side column: on Today it stands in for the agenda while it
+ * is open, and on the boards it brings the column back. In the grid rather than
+ * over it, so the list is never covered, and sticky like the agenda so a long
+ * list scrolls past a panel that stays put. Placed after the view rules above
+ * on purpose: they and these share a specificity, and the panel being open has
+ * to win.
+ */
+body[data-flyout='open'] .layout {
+  grid-template-columns: minmax(0, 1fr) 420px;
+}
+body[data-flyout='open'] .layout__side {
+  display: none;
+}
+
+.flyout {
+  position: sticky;
+  top: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 32px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.flyout[hidden] {
+  display: none;
+}
+
+.flyout__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 5px 10px;
+  padding: 14px 16px 13px;
+  border-bottom: 1px solid var(--hairline);
+}
+.flyout__where {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.flyout__close {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: start;
+}
+.flyout__title {
+  grid-column: 1;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.flyout__title a {
+  color: inherit;
+  text-decoration: none;
+}
+.flyout__title a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+}
+
+.flyout__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 16px 20px;
+}
+.flyout__detail {
+  margin: 0 0 22px;
+  font-size: 13px;
+  color: var(--ink-2);
+  overflow-wrap: anywhere;
+}
+.flyout__detail code {
+  padding: 1px 4px;
+  background: var(--surface-sunken);
+  border-radius: 3px;
+  font-size: 0.92em;
+}
+
+.flyout__section + .flyout__section {
+  margin-top: 26px;
+}
+.flyout__label {
+  margin: 0 0 10px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.flyout__notes {
+  margin: 0 0 12px;
+  padding: 7px 10px;
+  border-left: 2px solid var(--hairline);
+  background: var(--surface-sunken);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.flyout__note {
+  margin: 0;
+}
+.flyout__note + .flyout__note {
+  margin-top: 4px;
+}
+.flyout__when {
+  color: var(--ink-3);
+  font-size: 11.5px;
+  white-space: nowrap;
+}
+.flyout__empty {
+  margin: 0 0 10px;
+  font-size: 12.5px;
+  color: var(--ink-3);
+}
+
+/*
+ * The two forms share one button: the same size, sat on the same baseline as
+ * the bottom of its field. The note field is one line and the assistant's is
+ * not, which is deliberate (see `renderNoteForm`), so the buttons are what
+ * make the two read as a pair.
+ */
+.flyout__note-form {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.flyout__note-input {
+  flex: 1;
+  min-width: 0;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--page);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 13px;
+}
+.flyout__submit {
+  flex: none;
+  height: 36px;
+  padding: 0 14px;
+}
+
+/* Narrow: a sheet up from the bottom, over the list, since there is no side to sit at. */
+@media (max-width: 900px) {
+  body[data-flyout='open'] .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .flyout {
+    position: fixed;
+    inset: auto 0 0 0;
+    z-index: 15;
+    max-height: 80vh;
+    border-bottom: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+  /* The sheet has the bottom, so a toast goes to the top rather than over its field. */
+  body[data-flyout='open'] .toast {
+    bottom: auto;
+    top: 22px;
+  }
+}
+
+/* ---------- links that are buttons ---------- */
+
+.link-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  cursor: pointer;
+}
+.link-button:hover {
+  text-decoration: underline;
+}
+.objective__edit {
+  margin-left: 8px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+/* ---------- setup, before the first brief ---------- */
+
+/*
+ * The page a new store opens on. Built from the objective's card, since it does
+ * the same job in its place: the first thing read, before anything else exists.
+ */
+.setup {
+  padding: 18px 20px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.setup__title {
+  margin: 0 0 6px;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+}
+.setup__lede {
+  margin: 0 0 16px;
+  color: var(--ink-2);
+  font-size: 13.5px;
+  line-height: 1.5;
+}
+.setup__steps {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.setup__step {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px 0;
+  border-top: 1px solid var(--hairline);
+}
+.setup__mark {
+  font-size: 15px;
+  line-height: 1.3;
+  color: var(--ink-3);
+  text-align: center;
+}
+.setup__step[data-done='true'] .setup__mark {
+  color: var(--good-ink);
+}
+.setup__step[data-done='false'] .setup__mark {
+  color: var(--accent);
+}
+.setup__step-title {
+  margin: 0 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.setup__body p {
+  margin: 0 0 8px;
+  color: var(--ink-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.setup__step[data-done='true'] .setup__body p {
+  color: var(--ink-3);
+}
+.setup__choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.setup__boards {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.setup__board {
+  display: grid;
+  grid-template-columns: 16px 104px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: baseline;
+  font-size: 13px;
+}
+.setup__board-name {
+  font-weight: 500;
+}
+.setup__board-text {
+  color: var(--ink-2);
+}
+/*
+ * The mark says how a board is doing; the words beside it say it again, so the
+ * colour is never the only cue, and the words stay one colour for every state.
+ */
+.setup__board-mark {
+  font-weight: 600;
+  text-align: center;
+  color: var(--ink-3);
+}
+.setup__board[data-health='ok'] .setup__board-mark {
+  color: var(--good-ink);
+}
+.setup__board[data-health='problem'] .setup__board-mark {
+  color: var(--serious);
+}
+.setup__board[data-health='todo'] .setup__board-mark {
+  color: var(--accent);
+}
+.setup__body .setup__note {
+  color: var(--ink-3);
+}
+.setup__body .setup__note--todo {
+  color: var(--serious);
+}
+.setup__editor {
+  margin-top: 12px;
+}
+
+/* ---------- settings ---------- */
+
+.settings {
+  display: grid;
+  gap: 16px;
+  max-width: 760px;
+  padding-bottom: 72px;
+}
+.settings__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.settings__title {
+  margin: 0;
+  font-size: 18px;
+}
+.settings__problem {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid var(--warning);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+.settings-card {
+  padding: 16px 18px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  scroll-margin-top: 16px;
+}
+.settings-card__title {
+  margin: 0 0 10px;
+  font-size: 15px;
+}
+.settings-card__help {
+  margin: 0 0 12px;
+  color: var(--ink-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.settings-card__warning {
+  margin: 0 0 10px;
+  color: var(--serious);
+  font-size: 13px;
+}
+.settings-card__more {
+  margin-top: 6px;
+}
+.settings-card__more > summary {
+  cursor: pointer;
+  color: var(--ink-2);
+  font-size: 13px;
+  padding: 4px 0;
+}
+.settings-card__more[open] > summary {
+  margin-bottom: 10px;
+}
+
+.field {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 14px;
+}
+.settings-card > .field:last-child,
+.settings-card__more > .field:last-child {
+  margin-bottom: 0;
+}
+.field__label {
+  font-size: 13px;
+  font-weight: 500;
+}
+.field__input {
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--page);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 13px;
+}
+.field__input:disabled {
+  color: var(--ink-3);
+  background: var(--surface-sunken);
+}
+.field[data-changed='true'] .field__input {
+  border-color: var(--accent);
+}
+.field__help,
+.field__note {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: 12px;
+  line-height: 1.45;
+}
+.field__note {
+  color: var(--ink-2);
+}
+
+.objective-form {
+  display: grid;
+  gap: 2px;
+}
+.objective-form__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.text-editor {
+  display: grid;
+  gap: 8px;
+}
+.text-editor__area {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--page);
+  color: var(--ink-1);
+  font: 12.5px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
+  resize: vertical;
+}
+.text-editor__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.text-editor__status {
+  color: var(--ink-3);
+  font-size: 12px;
+}
+.text-editor__conflict {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--warning);
+  border-radius: var(--radius-sm);
+}
+.text-editor__conflict p {
+  flex: 1 1 100%;
+  margin: 0;
+  font-size: 13px;
+}
+
+.calendar-picker {
+  margin: -4px 0 14px;
+}
+.calendar-picker__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 4px 12px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+}
+.calendar-picker__source {
+  color: var(--ink-3);
+}
+
+/* Unsaved settings: a bar along the bottom, since the page is long and Save belongs to all of it. */
+.settings__bar {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: min(720px, calc(100vw - 32px));
+  padding: 10px 12px 10px 16px;
+  transform: translateX(-50%);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 24px rgba(11, 11, 11, 0.14);
+}
+.settings__bar[hidden] {
+  display: none;
+}
+.settings__bar-text {
+  flex: 1;
+  margin: 0;
+  font-size: 13px;
+  color: var(--ink-2);
+}
+.settings__bar-text--error {
+  color: var(--critical);
+}