/* Domainpilot, the dispatch desk.

   The work is postal: names, addresses, a queue, and one decision per item.
   So the screen is a sorting office rather than a document folder -- concrete
   grey to stand on, white for anything a person acts on, and one signal
   yellow that is never decoration. Yellow means "this one is yours": the
   letter you have open, the count of what is waiting, the keyboard's own
   focus, the bar that fills as a budget is spent. Green, red and blue mark
   states and nothing else.

   Three typefaces, three jobs, and no overlap. Archivo says everything the
   machine says. DM Mono carries the atom of this product -- a domain name, an
   address, a number that lines up with the number below it. Newsreader sets
   the letter, and only the letter, because a letter has to read as a printed
   page and not as another panel in an application. */

/* The light palette. Also the fallback: a browser without light-dark() keeps
   these values and the desk stays legible, just never dark. */
:root {
  --ground:   #e9ebe6;
  --ground-2: #dfe2db;
  --surface:  #fdfdfc;
  --surface-2:#f4f5f1;
  --line:     #d6dad2;
  --line-firm:#b6bdb2;
  --ink:      #171a18;
  --ink-2:    #4f5652;
  --ink-3:    #6b736e;
  --on-ink:   #fbfcfa;

  --signal:      #ffc400;
  --signal-wash: #fff4cd;
  --signal-edge: #eac95e;
  --signal-ink:  #4a3a00;

  --ok:   #1f6b47; --ok-wash:   #e3efe9; --ok-edge:   #c6ddd1;
  --stop: #a4302a; --stop-wash: #fbe9e6; --stop-edge: #eed2cd;
  --cool: #2c56a4; --cool-wash: #e8eefa; --cool-edge: #d3dff2;
  --mute-wash: #e9ebe5; --mute-edge: #d8dcd4;
  --chrome: #191d1b; --chrome-2: #272c29; --chrome-line: #2e3430;
  --on-chrome: #f2f4f0; --chrome-soft: #a8b0aa;
  --teal: #0f6e6a; --teal-wash: #e0efee; --teal-edge: #c2dedb;
  --iris: #5b4bb8; --iris-wash: #ebe9f9; --iris-edge: #d8d3f0;

  --shadow-1: 0 1px 2px rgba(23,26,24,.06);
  --shadow-2: 0 1px 2px rgba(23,26,24,.05), 0 18px 40px rgba(23,26,24,.10);
}

/* The same tokens, each carrying what it becomes in the dark. `color-scheme`
   on :root is the switch: unset it follows the machine, and the lamp pins it. */
:root {
  color-scheme: light dark;
  --ground:   light-dark(#e9ebe6, #121412);
  --ground-2: light-dark(#dfe2db, #191c1a);
  --surface:  light-dark(#fdfdfc, #1b1e1c);
  --surface-2:light-dark(#f4f5f1, #222623);
  --line:     light-dark(#d6dad2, #2f3430);
  --line-firm:light-dark(#b6bdb2, #464d47);
  --ink:      light-dark(#171a18, #e7eae5);
  --ink-2:    light-dark(#4f5652, #a7afa8);
  --ink-3:    light-dark(#6b736e, #8b948d);
  --on-ink:   light-dark(#fbfcfa, #121412);

  --signal:      light-dark(#ffc400, #ffcb1f);
  --signal-wash: light-dark(#fff4cd, #33290a);
  --signal-edge: light-dark(#eac95e, #5d4a10);
  --signal-ink:  light-dark(#4a3a00, #ffd85c);
  /* Text standing on the solid yellow, not on its wash. The wash's ink turns
     yellow itself in the dark, and a count or a step number in it vanished. */
  --on-signal:   #171a18;

  --ok:   light-dark(#1f6b47, #6fc79b);
  --ok-wash:   light-dark(#e3efe9, #14291f);
  --ok-edge:   light-dark(#c6ddd1, #264434);
  --stop: light-dark(#a4302a, #f08a80);
  --stop-wash: light-dark(#fbe9e6, #331916);
  --stop-edge: light-dark(#eed2cd, #562b26);
  --cool: light-dark(#2c56a4, #8fb2f0);
  --cool-wash: light-dark(#e8eefa, #17203a);
  --cool-edge: light-dark(#d3dff2, #2b3a5e);
  --mute-wash: light-dark(#e9ebe5, #232724);
  --mute-edge: light-dark(#d8dcd4, #333833);
  --chrome: light-dark(#191d1b, #0b0d0c);
  --chrome-2: light-dark(#272c29, #191d1b);
  --chrome-line: light-dark(#2e3430, #1e2220);
  --on-chrome: light-dark(#f2f4f0, #e7eae5);
  --chrome-soft: light-dark(#a8b0aa, #949d96);
  --teal: light-dark(#0f6e6a, #5fc9c2);
  --teal-wash: light-dark(#e0efee, #102b2a);
  --teal-edge: light-dark(#c2dedb, #1f4744);
  --iris: light-dark(#5b4bb8, #b0a4f2);
  --iris-wash: light-dark(#ebe9f9, #221d3d);
  --iris-edge: light-dark(#d8d3f0, #383062);

  --cast-near: light-dark(rgba(23,26,24,.07), rgba(0,0,0,.55));
  --cast-far:  light-dark(rgba(23,26,24,.10), rgba(0,0,0,.45));
  --shadow-1: 0 1px 2px var(--cast-near);
  --shadow-2: 0 1px 2px var(--cast-near), 0 18px 40px var(--cast-far);

  --sans:  "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:  "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --radius: 8px;
  --radius-s: 5px;
  --measure: 62ch;
  --bar: 57px;              /* the top bar, which every sticky thing sits under */
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ---- the ground ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--line-firm); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

/* Where the keyboard is. The dark ring is what makes it findable -- yellow on
   white is about 1.8:1 and would be decoration -- and the wash around it is
   the signal saying the same thing in colour. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--signal-wash);
  border-radius: 2px;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.018em; margin: 0; }
h1 { font-size: 29px; line-height: 1.15; }
h2 { font-size: 19px; line-height: 1.25; margin: 34px 0 12px; }
h3 { font-size: 14px; }
p { margin: 10px 0; }

.lede { max-width: var(--measure); color: var(--ink-2); margin: 10px 0 0; }
.hint { max-width: var(--measure); color: var(--ink-2); font-size: 14px; }
.small { font-size: 12.5px; }
.quiet { color: var(--ink-3); }
code { font-family: var(--mono); font-size: .92em; background: var(--mute-wash);
       border-radius: 3px; padding: 1px 5px; }

/* A name, an address, a figure: the things that have to line up and be read
   character by character. */
.dom, .num, .range { font-family: var(--mono); }
.dom { font-size: 13px; letter-spacing: -0.01em; }
.num { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- the bar across the top ------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch; gap: 22px;
  height: var(--bar); padding: 0 20px;
  background: var(--chrome); color: var(--on-chrome);
  border-bottom: 1px solid var(--chrome-line);
}
/* On the dark bar the ring is the yellow itself: there it has the contrast
   that it does not have on paper. */
.topbar :focus-visible { outline-color: var(--signal); box-shadow: none; }

.mark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap;
}
.mark::before {
  content: ""; width: 11px; height: 20px; border-radius: 2px;
  background: var(--signal);
}

.tabs { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none;
        flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 11px; height: 100%;
  color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap;
  text-decoration: none;
}
.tabs a { color: var(--chrome-soft); }
.tabs a:hover { color: var(--on-chrome); background: var(--chrome-2); }
.tabs a.here { color: var(--on-chrome); }
.tabs a.here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--signal);
}
.tabs .count {
  font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 4px 6px;
  border-radius: 99px; background: var(--signal); color: var(--on-signal); font-weight: 500;
}

.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lamp, .signout button {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; color: var(--chrome-soft);
  background: none; border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 6px 9px; cursor: pointer;
}
.lamp:hover, .signout button:hover { background: var(--chrome-2); border-color: var(--chrome-line); color: var(--on-chrome); }
.lamp .off { display: none; }
html[data-theme="dark"] .lamp .on { display: none; }
html[data-theme="dark"] .lamp .off { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lamp .on { display: none; }
  html:not([data-theme="light"]) .lamp .off { display: inline; }
}
.signout { display: flex; align-items: center; gap: 8px; margin: 0; }
.signout > span { font-size: 13px; color: var(--chrome-soft); }
.signout button { white-space: nowrap; }
/* There is room for the row of tabs, so there is no button to open them. */
.burger { display: none; }

/* ---- the strip of readings under it ----------------------------------- */

.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  padding: 7px 20px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.meter { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.meter b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.gauge {
  width: 68px; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--mute-wash); box-shadow: inset 0 0 0 1px var(--mute-edge);
}
.gauge i { display: block; height: 100%; background: var(--signal); }
/* Two different bars: how far through our own portfolio a reading has got,
   and how much of an allowance is gone. They fill the same way and mean
   opposite things, so they are not the same colour. */
.gauge.ours i { background: var(--teal); }
.gauge.full i { background: var(--stop); }
.gauge.wide { width: 100%; height: 10px; }
.strip .warn, .strip .capped { color: var(--stop); font-weight: 500; }
.strip .warn a { color: inherit; }
.strip .sep { color: var(--line-firm); }
.strip .apart { margin-left: auto; }

/* Things that are wrong say so across the whole width, because the symptom of
   every one of them is that nothing happens. */
.alarm, .said p {
  margin: 0; padding: 11px 20px;
  border-bottom: 1px solid var(--stop-edge);
  background: var(--stop-wash); color: var(--stop); font-weight: 500;
}
.said p.success { background: var(--ok-wash); border-color: var(--ok-edge); color: var(--ok); }
.said p.info, .said p.debug { background: var(--cool-wash); border-color: var(--cool-edge); color: var(--cool); }
.said p.warning { background: var(--signal-wash); border-color: var(--signal-edge); color: var(--signal-ink); }

main { max-width: 1440px; margin: 0 auto; padding: 26px 20px 90px; }

/* ---- what a page opens with ------------------------------------------- */

header.page { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
header.page .find { margin-top: 14px; }

/* ---- controls ---------------------------------------------------------- */

button, input, select { font: inherit; }
button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-s);
  border: 1px solid var(--line-firm); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
button:hover { border-color: var(--ink-3); background: var(--surface-2); }
button:disabled { opacity: .42; cursor: not-allowed; }
button:disabled:hover { border-color: var(--line-firm); background: var(--surface); }

/* The one thing this page is for. */
.go { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.go:hover { background: var(--ink-2); border-color: var(--ink-2); }
.stay { background: var(--surface); border-color: var(--line-firm); }
.quietbtn { background: transparent; border-color: var(--line); color: var(--ink-2); }
.quietbtn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line-firm); }

input[type="search"], input[type="text"], input[type="number"], select {
  padding: 7px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line-firm); background: var(--surface); color: var(--ink);
  font-size: 13.5px;
}
input::placeholder { color: var(--ink-3); }
input[type="checkbox"] { accent-color: var(--ink); width: 15px; height: 15px; }
label.inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.tiny { width: 92px; }

.onerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }

/* ---- states, and nothing else, get colour ------------------------------ */

.state {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  background: var(--mute-wash); color: var(--ink-2); border: 1px solid var(--mute-edge);
}
/* A state says itself with a sign as well as a colour: colour alone is lost
   on a colour-blind reader and on a printout. */
.state::before { margin-right: 4px; font-size: .9em; }
.state.draft::before     { content: "✎"; }
.state.review::before    { content: "?"; }
.state.approved::before  { content: "✓"; }
.state.sent::before      { content: "➤"; }
.state.bounced::before   { content: "↩"; }
.state.failed::before    { content: "✕"; }
.state.discarded::before { content: "–"; }
.state.queued::before    { content: "…"; }
.state.running::before   { content: "▸"; }
.state.done::before      { content: "✓"; }
.state.found::before     { content: "•"; }
.state.dropped::before   { content: "✕"; }
.state.held::before      { content: "‖"; }
.state.replied::before   { content: "↵"; }
.state.review   { background: var(--signal-wash); color: var(--signal-ink); border-color: var(--signal-edge); }
.state.approved,
.state.running  { background: var(--cool-wash); color: var(--cool); border-color: var(--cool-edge); }
.state.sent,
.state.done,
.state.written  { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-edge); }
.state.failed,
.state.bounced,
.state.dropped  { background: var(--stop-wash); color: var(--stop); border-color: var(--stop-edge); }

/* An objection, and a clearance, in a table cell. */
.bar, .free {
  display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px;
  border: 1px solid; margin: 0 4px 3px 0;
}
.bar  { background: var(--stop-wash); color: var(--stop); border-color: var(--stop-edge); }
.free { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-edge); }
.bar.worked { background: var(--cool-wash); color: var(--cool); border-color: var(--cool-edge); }
.stop {
  max-width: var(--measure);
  background: var(--stop-wash); border: 1px solid var(--stop-edge); border-left-width: 3px;
  border-radius: var(--radius-s); padding: 10px 13px; color: var(--stop);
}
.stop code { background: rgba(0,0,0,.06); }

/* ---- listings ---------------------------------------------------------- */

.scrolls { border-radius: var(--radius); }
@media (max-width: 1180px) { .scrolls { overflow-x: auto; } .scrolls .rows th { position: static; } }
.rows {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.rows.laid { table-layout: fixed; }
.rows th {
  position: sticky; top: var(--bar); z-index: 5;
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 9px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rows thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.rows thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.rows td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rows tbody tr:last-child td { border-bottom: 0; }
.rows tbody tr:hover { background: var(--surface-2); }
.rows tbody tr:has(input[name="ids"]:checked) { background: var(--signal-wash); }
.rows td.tick, .rows th.tick { width: 34px; padding-right: 0; }
.rows td.act { text-align: right; white-space: nowrap; }
.rows .empty { color: var(--ink-3); padding: 26px 14px; text-align: center; }
.rows .one { white-space: nowrap; }
.clip { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows.laid .clip { max-width: none; }

/* The buyers table carries a name and what backs it in one cell, so its
   columns are set rather than measured. */
.rows.laid th:nth-child(1) { width: 34px; }
.rows.laid th:nth-child(2) { width: 19%; }
.rows.laid th:nth-child(4) { width: 20%; }
.rows.laid th:nth-child(5) { width: 74px; }
.rows.laid th:nth-child(6) { width: 15%; }
.rows.laid th:nth-child(7) { width: 130px; }
.name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backing { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backing.none { color: var(--stop); }

.sort { text-decoration: none; color: inherit; }
.sort:hover { color: var(--ink); text-decoration: underline; }
.sort.on { color: var(--ink); font-weight: 700; }
/* Which column a listing is in the order of, said where the order is chosen
   rather than left to be worked out from the rows. */
.rows th:has(.sort.on) { background: var(--signal-wash); border-bottom-color: var(--signal-edge); }
.sort .arrow { color: var(--signal-ink); }
html[data-theme="dark"] .sort .arrow { color: var(--signal); }

/* ---- filters, searches, pagers ----------------------------------------- */

.toolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filters, .pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0;
}
.filters a, .pills a {
  padding: 5px 11px; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13px; white-space: nowrap;
}
.filters a:hover, .pills a:hover { border-color: var(--line-firm); color: var(--ink); }
.filters a.here, .pills a.here { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.filterlabel { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }
.filters.second { gap: 8px; }
.clear { font-size: 12.5px; color: var(--ink-3); }

.find, .sift { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.find input[type="search"] { min-width: 260px; flex: 1 1 260px; max-width: 440px; }

.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 9px 2px; font-size: 12.5px; color: var(--ink-2);
}
.pager a { text-decoration: none; color: var(--ink-2); }
.pager a:hover { color: var(--ink); text-decoration: underline; }
.pager .range { color: var(--ink); font-size: 12.5px; }
.pager .per { display: flex; gap: 7px; align-items: center; color: var(--ink-3); }
.pager .export { margin-left: auto; }

/* Ticking boxes. The bar above a listing says what the ticks will do, and
   goes yellow the moment it can actually do it. */
.chosen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.chosen.armed { background: var(--signal-wash); border-color: var(--signal-edge); }
.chosen + .scrolls .rows, .chosen + .rows { border-top-left-radius: 0; border-top-right-radius: 0; }
.chosen + .scrolls { border-top-left-radius: 0; border-top-right-radius: 0; }
.howmany { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.chosen.armed .howmany { color: var(--signal-ink); font-weight: 500; }

/* ---- readings: a row of figures that are not a chart -------------------- */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin: 0 0 18px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 12px 14px; border-left: 3px solid transparent; }
.facts .ours    { border-left-color: var(--teal); }
.facts .machine { border-left-color: var(--iris); }
.facts .moving  { border-left-color: var(--cool); }
.facts .gone    { border-left-color: var(--ok); }
.facts .stuck   { border-left-color: var(--stop); }
/* The one reading that is a queue of work for a person, rather than a number
   about the machine. */
.facts .yours { border-left-color: var(--signal); background: var(--signal-wash); }
.facts .yours dt { color: var(--signal-ink); }
.facts .yours dd, .facts .yours dd a { color: var(--signal-ink); }
.facts dt { font-size: 12.5px; color: var(--ink-3); }
.facts dd { margin: 3px 0 0; font-family: var(--mono); font-size: 21px; font-weight: 500; }
.facts dd a { text-decoration: none; }
.facts dd .small { font-family: var(--sans); font-size: 12.5px; font-weight: 400; }

.progress { margin: 0 0 18px; }
.progress p { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }

/* ---- the panel at the foot that says what the words mean ---------------- */

.key {
  margin: 40px 0 0; padding: 18px 20px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.key h2 { margin: 0 0 12px; font-size: 15px; }
.key dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 26px; margin: 0; }
.key dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.key dt { font-size: 12px; font-weight: 500; color: var(--ink); }
.key dd { margin: 0; font-size: 13px; color: var(--ink-2); }

/* A block of its own: a heading, a rule, and whatever it holds. */
.block { margin: 30px 0 0; }
.block > h2 { margin: 0 0 12px; }
.block h2.bare { border: 0; }

/* ---- the desk: the pile, the letter, the margin -------------------------- */

.desk { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1180px) {
  .desk.withpile { grid-template-columns: 306px minmax(0, 1fr); }
  .desk.withpile .pile { grid-column: 1; grid-row: 1; }
  .desk.withpile .reading, .desk.withpile .nothing { grid-column: 2; grid-row: 1; }
  /* The pile keeps its place while the letter is read: a decision is one
     click away from the next letter, not one scroll away. */
  .pile { position: sticky; top: calc(var(--bar) + 18px); max-height: calc(100vh - var(--bar) - 36px);
          display: flex; flex-direction: column; }
  .pile .stack { overflow: auto; flex: 1 1 auto; min-height: 0; }
}

.pile h2 { margin: 0 0 10px; font-size: 15px; }
.pile h2 b { font-family: var(--mono); font-weight: 500; }
.pile .sift { flex-direction: column; gap: 7px; margin: 0 0 10px; }
.pile .sift input[type="search"], .pile .sift select { width: 100%; }
.pile .sift button { align-self: start; }
.sorting { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; line-height: 1.7; }
.sorting a { color: var(--ink-2); }

.stack ol { list-style: none; margin: 0; padding: 0;
            border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stack li + li { border-top: 1px solid var(--line); }
.stack li a {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 1px 11px;
  padding: 9px 11px; text-decoration: none; color: inherit;
}
.stack li:first-child a { border-radius: var(--radius) var(--radius) 0 0; }
.stack li:last-child a { border-radius: 0 0 var(--radius) var(--radius); }
.stack li a:hover { background: var(--surface-2); }
.stack .score {
  grid-row: span 2; align-self: start;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: center; padding: 3px 0; border-radius: var(--radius-s);
  background: var(--mute-wash); color: var(--ink-2); border: 1px solid var(--mute-edge);
}
.stack .s3 { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-edge); }
.stack .s1 { background: var(--stop-wash); color: var(--stop); border-color: var(--stop-edge); }
.stack .dom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack .to { grid-column: 2; font-size: 12.5px; color: var(--ink-3);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack .note { grid-column: 2; font-size: 12px; color: var(--stop); }
.stack .note:empty { display: none; }
/* The one being read. This is what the yellow is for. */
.stack li.open a { background: var(--signal-wash); box-shadow: inset 3px 0 0 var(--signal); }
.stack li.open .dom { font-weight: 500; }
.stack .none { padding: 16px 12px; font-size: 13px; color: var(--ink-3); }
.pile .pager { padding-top: 10px; }

.desk .reading { display: grid; gap: 18px; }
.who h1 { font-size: 26px; }
.who h1.asaddress { font-family: var(--mono); font-size: 20px; letter-spacing: -0.02em; }
.who .addr { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 6px 0 0;
             overflow-wrap: anywhere; }

.sheet-and-margin { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .sheet-and-margin { grid-template-columns: minmax(0, 1fr) 288px; } }

/* The letter is the only thing on any screen that is a document. It gets the
   white, the shadow, the serif and the room; everything else is apparatus. */
.sheet {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden;
}
.letterhead {
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
  padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.letterbody { padding: 34px 40px 40px; }
.letterbody .subject {
  font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3;
  margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  max-width: var(--measure);
}
.letterbody .body {
  font-family: var(--serif); font-size: 17px; line-height: 1.68;
  max-width: var(--measure); color: var(--ink);
}
.letterbody .body p { margin: 0 0 1.05em; }
.letterbody .closing { font-family: var(--serif); font-size: 17px; margin: 22px 0 0; }
.letterbody .footer {
  font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; margin: 6px 0 0;
}

/* The margin is an annotation on the letter, so it is ruled rather than boxed:
   a card here would compete with the sheet. */
.margin { display: grid; gap: 22px; align-content: start; }
.margin .block { margin: 0; }
.margin .cardhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 7px; border-bottom: 2px solid var(--ink);
}
.margin .cardhead h3 { font-size: 13px; font-weight: 600; }
.margin .cardhead .small { color: var(--ink-3); }
.verdict { font-family: var(--mono); font-size: 20px; font-weight: 500; line-height: 1; }
.verdict.high { color: var(--ok); }
.verdict.mid  { color: var(--signal-ink); }
.verdict.low  { color: var(--stop); }
html[data-theme="dark"] .verdict.mid { color: var(--signal); }

.checks { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.checks li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 6px; padding: 3px 0; color: var(--ink-2); }
.checks li::before { font-family: var(--mono); }
.checks li.ok::before  { content: "✓"; color: var(--ok); }
.checks li.not::before { content: "✕"; color: var(--stop); }
.checks li.not { color: var(--ink); font-weight: 500; }

/* What the critic objected to. The one place in the interface that argues
   with the letter, so it is allowed to look like a hand in the margin. */
.pencilcard .cardhead { border-bottom-color: var(--stop); }
.pencil { list-style: none; margin: 10px 0 0; padding: 0; }
.pencil li {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--stop);
  background: var(--stop-wash); border-left: 3px solid var(--stop);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 8px 11px; margin: 0 0 7px;
}

.who-is { margin: 10px 0 0; font-size: 13px; }
.who-is dt { color: var(--ink-3); font-size: 12px; }
.who-is dd { margin: 1px 0 10px; color: var(--ink); }
.why { margin: 8px 0 0; font-size: 13px; }
.why summary { cursor: pointer; color: var(--ink-2); }
.why p { color: var(--ink-2); margin: 8px 0 0; }

/* The decision follows the reader down the page. */
.decide {
  position: sticky; bottom: 14px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 11px 13px; margin: 0;
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.decide input[type="text"] { flex: 1 1 220px; }
.decide .keys { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.decide .keys kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--line-firm); background: var(--surface-2);
}

.nothing {
  background: var(--surface); border: 1px dashed var(--line-firm); border-radius: var(--radius);
  padding: 46px 30px; text-align: center;
}
.nothing h1 { font-size: 21px; }
.nothing p { color: var(--ink-2); max-width: 46ch; margin: 10px auto 0; }

/* ---- one name, and everything that happened to it ----------------------- */

.run {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 0 0 16px;
}
.run > h2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; font-size: 15px;
}
.runmeta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }

.thread { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.cand { border-left: 2px solid var(--line-firm); padding: 2px 0 2px 14px; }
.candname {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; font-weight: 600; font-size: 15px;
}
.candmeta { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; overflow-wrap: anywhere; }
.reason { font-size: 13.5px; color: var(--ink-2); max-width: var(--measure); margin: 7px 0 0; }
.letterline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 8px 0 0; padding: 8px 11px;
  background: var(--surface-2); border-radius: var(--radius-s); font-size: 13.5px;
}
.letterline .num { color: var(--ink-3); font-size: 12px; }
.letterline.none { color: var(--ink-3); background: none; padding-left: 0; }
.standing { line-height: 1.9; }

/* ---- queues, workers, the machinery ------------------------------------- */

.automatic {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 18px 16px; margin: 0 0 18px;
}
.automatic .onerow {
  align-items: flex-start; gap: 10px; padding: 14px 0 0; margin: 0;
  border-top: 1px solid var(--line);
}
.automatic .onerow:first-child { border-top: 0; }
.automatic p { flex: 1 1 420px; margin: 0; font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.automatic p b { color: var(--ink); }
.automatic input[type="number"] { width: 74px; }
.automatic .small { color: var(--ink-3); display: block; margin-top: 4px; }

.now { margin: 0 0 18px; }
.inflight { list-style: none; margin: 12px 0 0; padding: 0;
            border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.inflight li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 110px; gap: 12px;
  padding: 9px 13px; align-items: center; font-size: 13px;
}
.inflight li + li { border-top: 1px solid var(--line); }
.inflight .role { font-weight: 600; }
.inflight .about, .inflight .seat { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
                                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inflight .num { color: var(--ink-3); text-align: right; }
.inflight li.stalled { background: var(--stop-wash); }
.inflight li.stalled .num { color: var(--stop); }
.tally { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }

.procs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin: 0 0 8px; }
/* A process is a discrete machine you switch on and off, so here a card is
   the honest shape. */
.proc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px;
}
.proc h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 15px; }
.proc .hint { font-size: 13px; margin: 6px 0; }
.loglines {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--ground-2); border-radius: var(--radius-s); padding: 10px 12px;
  margin: 8px 0 0; max-height: 210px; overflow: auto; white-space: pre-wrap;
}
.sum { color: var(--ink-3); }
.loglines span { display: block; }
.loglines .bad { color: var(--stop); }

/* ---- settings ----------------------------------------------------------- */

.fixed { margin: 0 0 24px; }
.knobs { margin: 0 0 10px; }
.knobs fieldset {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 4px 18px 14px; margin: 0 0 14px;
}
.knobs legend { font-size: 14px; font-weight: 600; padding: 0 7px; }
.knobs label {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 14px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.knobs fieldset label:first-of-type { border-top: 0; }
.knobs label input, .knobs label select { width: 100%; }
.ceiling { font-size: 12px; color: var(--ink-3); }
.knobs .hint { margin: 10px 0 0; }

/* ---- the light and the dark, and what neither may do -------------------- */

@media (prefers-reduced-motion: no-preference) {
  .tabs a, button, .filters a, .pills a, .stack li a { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}

/* A phone. The rule the whole file answers to here: the page never scrolls
   sideways -- what is too wide for it scrolls inside its own box. */
@media (max-width: 900px) {
  main { padding: 18px 14px 70px; }
  /* A listing keeps its columns legible and takes the scrolling on itself. */
  .scrolls { overflow-x: auto; }
  .scrolls .rows { min-width: 680px; }
  .scrolls .rows.laid { min-width: 760px; }
  /* The name of whoever is signed in is not worth a third of the bar. */
  .signout > span { display: none; }

  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; align-self: center;
    background: none; border: 1px solid transparent; border-radius: var(--radius-s);
    color: var(--chrome-soft);
  }
  .burger:hover, .burger[aria-expanded="true"] {
    background: var(--chrome-2); border-color: var(--chrome-line); color: var(--on-chrome);
  }
  /* The panel hangs off the bar itself, which is already a positioned box. */
  .tabs {
    position: absolute; top: var(--bar); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch;
    padding: 6px 0 10px; overflow-y: auto; max-height: calc(100vh - var(--bar));
    background: var(--chrome); border-bottom: 1px solid var(--chrome-line);
    box-shadow: var(--shadow-2);
  }
  .tabs.open { display: flex; }
  .tabs a { height: auto; padding: 12px 18px; font-size: 15px; justify-content: flex-start; }
  /* Where you are is a bar down the side of the row, not under it. */
  .tabs a.here::after { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; }
  .tabs .count { margin-left: auto; }
  .lamp span, .keys { display: none; }
  .stated > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .decide { bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .decide button { flex: 1 1 auto; justify-content: center; }
  .who h1 { font-size: 21px; }
  .letterbody .body, .letterbody .closing { font-size: 16px; }
  .margin .cardhead { border-bottom-width: 1px; }
  .procs { grid-template-columns: minmax(0, 1fr); }
  .key dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .topbar { gap: 12px; padding: 0 14px; }
  .strip { padding: 7px 14px; }
  .mark span { display: none; }
  .letterbody { padding: 24px 20px 28px; }
  .knobs label { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .inflight li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rows th { position: static; }
  .facts dd { font-size: 18px; }
  h1 { font-size: 24px; }
}

/* ---- what the two further accents are for ------------------------------ */

/* Teal: a name of ours and what we know about it. */
.group, .free.funnel, .standing .group {
  display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px;
  background: var(--teal-wash); color: var(--teal); border: 1px solid var(--teal-edge);
}
.group { font-family: var(--mono); }

/* Iris: the machine's own work -- which revision wrote it, which role is
   holding the call, what it drew from the window. */
.rev, .role {
  display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px;
  background: var(--iris-wash); color: var(--iris); border: 1px solid var(--iris-edge);
}
.rev { font-family: var(--mono); }
/* The chip is the link, so it does not want the underline a cell's links get. */
a.rev { text-decoration: none; }
.rows td a.rev, .letterhead a.rev { border-bottom: 0; }
a.rev:hover { border-color: var(--iris); color: var(--iris); background: var(--iris-wash); filter: brightness(0.97); }
.inflight .role { font-weight: 500; justify-self: start; }
.tokens { color: var(--iris); }

/* A run wears its own state on the edge, so a page of them can be read down
   the margin without stopping at each heading. */
.run { border-left: 3px solid var(--line-firm); }
.run.done    { border-left-color: var(--ok); }
.run.running { border-left-color: var(--cool); }
.run.queued  { border-left-color: var(--signal); }
.run.failed  { border-left-color: var(--stop); }
.proc { border-left: 3px solid var(--line-firm); }
.proc.up   { border-left-color: var(--ok); }
.proc.down { border-left-color: var(--stop); }

/* ---- links that go somewhere ------------------------------------------- */

/* In a listing every cell is quiet until it is worth reaching for. */
.rows td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.rows td a:hover { border-bottom-color: currentColor; color: var(--ink); }
.rows td.act a { border: 0; }
/* What a link does is shown by the link itself: one that leaves for another
   site carries an arrow, one that opens the mail program an envelope. Keyed
   to the href and the target rather than to a class, which was set on some
   external links and forgotten on others. */
.ext::after, a[target="_blank"]::after { content: "↗"; font-size: .78em; color: var(--ink-3); margin-left: 3px; }
/* The envelope is drawn, not typed: the text faces here have no ✉ and the
   fallback showed "≈". A mask keeps it in the colour of the text around it. */
a[href^="mailto:"]::before, .state.written::before {
  content: ""; display: inline-block; width: .95em; height: .95em; margin-right: 4px;
  vertical-align: -.1em; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1'/%3E%3Cpath d='M2 4.5l6 4.5 6-4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1'/%3E%3Cpath d='M2 4.5l6 4.5 6-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.who .addr a, .who h1 a { color: inherit; text-decoration: none;
                          border-bottom: 1px solid var(--line-firm); }
.who .addr a:hover, .who h1 a:hover { border-bottom-color: currentColor; }
.letterhead a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.letterhead a:hover { border-bottom-color: currentColor; }

/* ---- one buyer ---------------------------------------------------------- */

.twoup { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .twoup { grid-template-columns: 1fr 1fr; }
                            .twoup.lopsided { grid-template-columns: 2fr 3fr; } }
.twoup .block { margin: 0; }

/* What is known about a company, as a list of answers rather than a table:
   half of these fields say something by being empty, and a row that says
   "nobody has asked yet" needs the room to say it. */
.stated {
  margin: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.stated > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.stated > div:first-child { border-top: 0; }
.stated dt { font-size: 13px; color: var(--ink-3); }
.stated dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.stated dd .small { display: inline-block; }
.stated dd .quiet { color: var(--ink-3); }
.bad { color: var(--stop); }

/* ---- the overview ------------------------------------------------------- */

/* The funnel. Every bar is the share of the line above it, so one axis in one
   unit carries a chain whose rows count names, then buyers, then letters --
   and each row says which of those it is counting. */
.stages { list-style: none; margin: 14px 0 0; padding: 0;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stages li {
  display: grid; gap: 2px 14px; align-items: center;
  grid-template-columns: 128px minmax(0, 1fr) 130px 46px;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.stages li:first-child { border-top: 0; }
.stagename { font-size: 13.5px; font-weight: 600; }
.track { height: 10px; border-radius: 99px; background: var(--mute-wash);
         box-shadow: inset 0 0 0 1px var(--mute-edge); overflow: hidden; }
.track i { display: block; height: 100%; min-width: 3px; background: var(--teal); border-radius: 99px; }
.stagevalue { font-size: 13px; color: var(--ink-2); text-align: right; }
.stagevalue b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.stageshare { text-align: right; color: var(--ink-3); font-size: 12.5px; }
.stagenote { grid-column: 2 / -1; font-size: 12px; color: var(--ink-3); }

/* A fortnight, one bar a day. Three of these, never overlaid: they count
   different things and share no scale. */
.trace { margin: 0 0 18px; }
.tracehead { display: flex; justify-content: space-between; align-items: baseline;
             margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.tracehead .num { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.ticks { display: flex; align-items: flex-end; gap: 2px; height: 52px;
         padding: 0 2px; border-bottom: 1px solid var(--line); }
/* Named `day`, not `tick`: every listing on the site has a `td.tick` holding
   a checkbox, and `display: flex` on a table cell takes it out of the table. */
.ticks .day { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; }
.ticks .day i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0;
                background: var(--ink-3); }
.trace.runs .day i    { background: var(--iris); }
.trace.buyers .day i  { background: var(--teal); }
.trace.letters .day i { background: var(--ink); }
.tracefoot { display: flex; justify-content: space-between; margin: 5px 0 0;
             font-size: 11.5px; color: var(--ink-3); }

/* One bar cut into its parts, with a surface gap between them so the eye
   counts segments rather than reading a gradient. */
.split { display: flex; gap: 2px; height: 14px; margin: 10px 0 8px; }
.split .seg { border-radius: 3px; min-width: 2px; }
.split .seg:first-child { border-radius: 99px 3px 3px 99px; }
.split .seg:last-child { border-radius: 3px 99px 99px 3px; }
/* Named for the band rather than for how it feels, because `.stop` and `.ok`
   already mean an alert and a clearance elsewhere -- and a legend item wearing
   `.stop` came out as a pink boxed paragraph in the middle of the row. */
.split .high     { background: var(--ok); }
.split .middling { background: var(--line-firm); }
.split .low      { background: var(--stop); }
.split .site     { background: var(--teal); }
.split .reading  { background: color-mix(in srgb, var(--teal) 45%, var(--surface)); }
.split .unbacked { background: var(--stop); }
.split .nameless { background: var(--mute-edge); }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
          margin: 0 0 6px; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 7px;
             background: none; border: 0; padding: 0; color: var(--ink-2); }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px;
                     background: var(--line-firm); flex: none; }
.legend li.plain::before { display: none; }
.legend li.high::before     { background: var(--ok); }
.legend li.low::before      { background: var(--stop); }
.legend li.site::before     { background: var(--teal); }
.legend li.reading::before  { background: color-mix(in srgb, var(--teal) 45%, var(--surface)); }
.legend li.unbacked::before { background: var(--stop); }
.legend li.nameless::before { background: var(--mute-edge); }
.legend b { font-family: var(--mono); font-weight: 500; color: var(--ink); }

@media (max-width: 700px) {
  .stages li { grid-template-columns: minmax(0, 1fr) 60px; }
  .stagename { grid-column: 1 / -1; }
  .track { grid-column: 1; }
  .stagevalue { grid-column: 1 / -1; text-align: left; }
  .stageshare { grid-column: 2; grid-row: 2; }
}

/* ---- one policy revision ------------------------------------------------ */

.diffbox {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0 0; overflow: auto; max-height: 560px;
  white-space: pre; color: var(--ink-2);
}
.diffbox .add { display: block; background: var(--ok-wash); color: var(--ok); }
.diffbox .del { display: block; background: var(--stop-wash); color: var(--stop); }
.diffbox .at  { display: block; color: var(--iris); }
.diffbox.plainjson, .diffbox.wraps { white-space: pre-wrap; overflow-wrap: anywhere; }
.diffbox.wraps .add, .diffbox.wraps .del { padding: 2px 4px; border-radius: 3px; margin: 2px 0; }
h3.promptdiff { margin: 16px 0 0; font-size: 14px; }

/* A prompt is the one thing on this page somebody reads as prose rather than
   inspects, so it is set to be read: wrapped, measured, and not in a diff. */
.rolecard { margin: 0 0 16px; }
.rolecard h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 15px; }
.prompt {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--iris); border-radius: var(--radius);
  padding: 14px 16px; margin: 0; max-width: 96ch;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}

/* What a finger needs. Not a width query: a small screen with a mouse wants
   the small control, and a large touchscreen wants the large one. */
@media (pointer: coarse) {
  input[type="checkbox"] { width: 18px; height: 18px; }
  .rows td, .rows th { padding-top: 13px; padding-bottom: 13px; }
  .rows td.tick, .rows th.tick { width: 40px; }
  .stack li a { padding: 12px 11px; }
  button { padding: 9px 14px; }
}

/* ---- the first screen: the line of work ---------------------------------- */

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.pagehead .find { margin: 6px 0 0; }
.pagehead .find input[type="search"] { width: min(320px, 70vw); }

/* Is the machine on. Four tiles, one each for the two processes, the sending
   mode and the seats: the four things that can be absent while every count
   below reads as if work were about to happen. */
.machine {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
  margin: 0 0 22px;
}
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--line-firm); padding: 12px 14px 10px;
}
.tile.up   { border-left-color: var(--ok); }
.tile.down { border-left-color: var(--stop); }
.tile.half { border-left-color: var(--signal); }
.tile h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14.5px; }
.tile p { margin: 4px 0; }
.tile .onerow { margin: 8px 0 0; }
.tile .seatname { font-family: var(--mono); font-size: 12px; margin-right: 6px; }
.tile .gauge.wide { display: inline-block; width: 90px; height: 7px; vertical-align: middle; margin-right: 6px; }
.tile .bar { margin-left: 6px; }

.stepno {
  display: inline-grid; place-items: center; width: var(--knot, 22px); height: var(--knot, 22px);
  border-radius: 99px; flex: none;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  box-shadow: 0 0 0 4px var(--ground);
}
.stepname { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.pulse {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--ok); text-transform: uppercase; letter-spacing: .05em;
}
.pulse::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--ok);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .pulse::before { animation: none; } }

.figs { list-style: none; margin: 2px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.figs li { padding: 3px 0; border-top: 1px dashed var(--line); }
.figs li:first-child { border-top: 0; }
.figs a { text-decoration: none; display: flex; gap: 8px; align-items: baseline; }
.figs a:hover .num { text-decoration: underline; }
.figs .num { min-width: 46px; text-align: right; color: var(--ink); }

/* What happened last, newest first. One row an event, whatever table it
   came from; the dot says which. */
.feed { list-style: none; margin: 0; padding: 0;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        max-height: 560px; overflow: auto; }
.feed li {
  display: grid; grid-template-columns: 82px 128px minmax(0, 1fr); gap: 4px 10px;
  padding: 7px 12px 7px 22px; border-top: 1px solid var(--line); font-size: 13px; position: relative;
}
.feed li:first-child { border-top: 0; }
.feed li::before { content: ""; position: absolute; left: 9px; top: 13px; width: 7px; height: 7px;
                   border-radius: 99px; background: var(--ink-3); }
.feed li.run::before, .feed li.run-done::before { background: var(--iris); }
.feed li.run-failed::before { background: var(--stop); }
.feed li.buyer::before { background: var(--teal); }
.feed li.letter::before { background: var(--ink); }
.feed li.approved::before { background: var(--signal); }
.feed li.sent::before { background: var(--ok); }
.feed .when { color: var(--ink-3); font-size: 12px; }
.feed .what { font-weight: 500; }
.feed .dom { text-decoration: none; border-bottom: 1px solid var(--line-firm); justify-self: start; }
.feed .dom:hover { border-bottom-color: currentColor; }
.feed .detail { grid-column: 2 / -1; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .feed li { grid-template-columns: 82px minmax(0, 1fr); }
  .feed .dom { grid-column: 2; }
}
.busy { list-style: none; margin: 10px 0 0; padding: 0; color: var(--ink-3); }

/* One name: where it is on the line, the same stepper with the rail filled
   as far as the name has got -- green behind it, yellow where it stands,
   dashed ahead. */
.where {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 12px; margin: 0 0 18px;
  --knot: 24px; --rail: 4px;
}
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 6px;
}
.steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; font-size: 12.5px; color: var(--ink-3); min-width: 0;
}
.steps li::before {
  content: ""; position: absolute; z-index: 0; left: -3px; right: -3px;
  top: calc(var(--knot) / 2 - var(--rail) / 2); height: var(--rail);
  background: var(--mute-edge);
}
.steps li:first-child::before { left: 50%; }
.steps li:last-child::before  { right: 50%; }
.steps li .stepno { position: relative; z-index: 1; background: var(--mute-edge); color: var(--ink-3);
                    box-shadow: 0 0 0 4px var(--surface); }
.steps li.done::before, .steps li.now::before { background: var(--ok); }
/* The rail arrives green and leaves grey: the half past the node is the
   next segment's colour, which the next node's own half continues. */
.steps li.now::before {
  background: linear-gradient(to right, var(--ok) 50%, var(--mute-edge) 50%);
}
.steps li.done { color: var(--ink-2); }
.steps li.done .stepno { background: var(--ok); color: var(--on-ink); }
.steps li.now { color: var(--signal-ink); font-weight: 600; }
.steps li.now .stepno { background: var(--signal); color: var(--on-signal);
                        box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--signal-wash); }
.steps li.next .stepno { border: 2px dashed var(--line-firm); background: var(--surface); }
@media (max-width: 560px) { .steps li .stepname { font-size: 11px; } }
.where .line { margin: 12px 0 0; font-size: 15px; max-width: var(--measure); }
.where .onerow { margin: 10px 0 0; }

/* ---- pages read -------------------------------------------------------- */

.kept-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.kept-grid h2 { font-size: 15px; margin: 18px 0 8px; }
.kept-grid h2:first-child { margin-top: 0; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kept-json { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 12px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.kept-snapshot { width: 100%; height: 70vh; border: 1px solid var(--line-firm); border-radius: var(--radius); background: #fff; }
.kept-text pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--sans); max-height: 60vh; overflow: auto;
  background: var(--surface-2); padding: 12px; border-radius: var(--radius-s); }
@media (max-width: 900px) { .kept-grid { grid-template-columns: minmax(0, 1fr); } }