/* Fonts and colors follow moin-website/src/styles/site.css. danger, warning, violet and
   surface are not there; they are the app palette's, which site.css names as its
   source: moin-flutter/lib/shared/theme/palettes/moin.dart. violet is its
   secondaryAccent. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-400-700.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500.woff2') format('woff2');
}

/* Each color is written once, light then dark, and the system picks. */
:root {
  color-scheme: light dark;
  --page: light-dark(#f2f5fa, #080c12);
  --ink: light-dark(#202c40, #f3f6fb);
  --muted-bright: light-dark(#58677e, #aab4c3);
  --muted: light-dark(#58677e, #8693a6);
  --line: light-dark(#cdd6e6, #263241);
  --line-soft: light-dark(#e3e8f0, rgba(112, 131, 155, 0.18));
  --periwinkle: light-dark(#4561b8, #7da2ff);
  --periwinkle-bright: light-dark(#4561b8, #a7bcff);
  --sea-glass: light-dark(#277657, #48d5aa);
  --danger: light-dark(#b3344b, #f08a96);
  --warning: light-dark(#8b5b09, #ffc66d);
  --violet: light-dark(#79529e, #b194ff);
  --nav-surface: light-dark(#e8edf5, #080c12);
  --menu-surface: light-dark(#fdfeff, #171d26);
  --surface: light-dark(#fffffff2, #111822f2);
  --shadow: light-dark(#0d244518, #0006);
  --button-background: light-dark(#4561b8, #dde3ed);
  --button-ink: light-dark(#fff, #080c12);
  --button-hover: light-dark(#3a529c, #cbd8ff);
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-utility: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The header's appearance button sets these, and the gallery, to show a page in the theme
   the system is not in. */
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}

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

html {
  background: var(--page);
}

/* Operators read these pages all day: mono and tight. */
body {
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 13px/1.5 var(--font-utility);
}

/* Customers read theirs once: running text in the website's face, with room. #page
   holds the frame, so that htmx swapping the body's content brings who reads it too. */
.customers {
  font: 400 14px/1.6 var(--font-body);
}

a {
  color: var(--periwinkle-bright);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

::selection {
  background: color-mix(in srgb, var(--periwinkle) 38%, transparent);
  color: var(--ink);
}

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

/* The frame. */

header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 40px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--nav-surface);
  font: 400 13px/1.5 var(--font-utility);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 20px;
  height: 20px;
}
.brand span {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted-bright);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

header nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.25rem;
}
header nav a {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 0.6rem;
  border-radius: 3px;
  color: var(--muted-bright);
  white-space: nowrap;
}
header nav a:hover {
  color: var(--ink);
  text-decoration: none;
}
header nav a[aria-current] {
  background: color-mix(in srgb, var(--periwinkle) 16%, transparent);
  color: var(--ink);
}
header nav .split {
  width: 1px;
  height: 14px;
  margin: 0 0.5rem;
  background: var(--line);
}
header .who {
  color: var(--muted);
  white-space: nowrap;
}
/* The appearance button, which names the theme: as wide as its longest name, so the
   header holds still as it changes. It keeps the header's far end when nobody is signed
   in and no links push it there. */
header .theme {
  min-width: 5ch;
  margin-left: auto;
  text-align: right;
}
header .theme[hidden] {
  display: none;
}

/* What is too wide and has no sheet to scroll in scrolls here, not the page. */
main {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  overflow-x: auto;
}
.customers main {
  max-width: 52rem;
}
/* A community's page is set as operators' are, as wide as what it holds needs, and as
   high as the window, so a form that opens from its command bar has the room. */
.owner main {
  max-width: 60rem;
  min-height: calc(100vh - 41px);
}
/* One thing to do, in the middle of the window. */
.alone main {
  max-width: 26rem;
  padding-top: 3rem;
}
.alone form.stack {
  max-width: none;
}

/* What heads a page: its title, and beside it what the page puts there. */
.title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: center;
  padding: 1.1rem 0 0.8rem;
}
.customers .title {
  padding: 2rem 0 1rem;
}
h1 {
  margin: 0;
  font: 500 15px/1.4 var(--font-utility);
}
.customers h1 {
  font: 600 22px/1.3 var(--font-body);
  letter-spacing: -0.03em;
}

/* The way back, over the title. */
.crumb {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.crumb a {
  color: inherit;
}
.crumb a:hover {
  color: var(--ink);
}

/* Where a thing is, in a few words each, at the title's far end. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}
.chips span,
.chips button.copy {
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.chips b {
  margin-left: 0.2rem;
  color: var(--ink);
  font-weight: 400;
}
/* A chip that copies what it holds. */
.chips button.copy {
  height: auto;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: inherit;
}
.chips button.copy::after {
  margin-left: 0.5rem;
  color: var(--periwinkle-bright);
  content: 'copy';
}
.chips button.copy.copied::after {
  color: var(--sea-glass);
  content: 'copied';
}
.chips button.copy:hover {
  border-color: color-mix(in srgb, var(--periwinkle) 55%, var(--line));
}

h2 {
  margin: 1.6rem 0 0.4rem;
  color: var(--muted);
  font: 400 11px/1.5 var(--font-utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h2 small {
  margin-left: 0.6rem;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

p {
  margin: 0.5rem 0;
}

.muted {
  color: var(--muted);
}

/* Tables and sheets. A sheet is the bordered surface a table sits on, and scrolls
   sideways when the table is too wide; a table with no sheet around it draws its own
   border. */

.sheet {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
}

table {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  border-spacing: 0;
  background: var(--surface);
}
/* A problem report's description, as the person wrote it. */
.sheet > .description {
  margin: 0;
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sheet > table {
  border: 0;
  border-radius: 0;
  background: none;
}
table:empty {
  display: none;
}

/* A feed says "None." until it has a row; a live feed's first row can arrive. */
.feed:has(tbody > tr) > .none,
.feed:not(:has(tbody > tr)) > .sheet {
  display: none;
}

/* A feed's rows: a row starting each day and one for each long silence; who wrote an
   entry as a chip by kind, named once for a run of its entries; a failure or deletion
   marked in the danger color, a refusal or retry in the warning color; the detail as
   key and value. */
/* The Activity page's lanes, over its feed. */
.sheet.overview {
  margin-bottom: 0.8rem;
}
.feed tr:target td {
  background: color-mix(in srgb, var(--periwinkle) 22%, transparent);
}
.feed tr.day td {
  padding-top: 10px;
  background: color-mix(in srgb, var(--periwinkle) 6%, transparent);
  color: var(--muted-bright);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feed tr.quiet td {
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px);
  color: var(--muted);
  font-size: 12px;
}
.feed td.when {
  color: var(--muted-bright);
}
.feed td.when.same {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
}
.who {
  padding: 0 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  font-size: 12px;
}
.who.agent { --tone: var(--periwinkle); }
.who.person { --tone: var(--sea-glass); }
.who.customer { --tone: var(--violet); }
.who.system { --tone: var(--muted-bright); }
.feed td.bad::before,
.feed td.doubt::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: var(--danger);
  content: '';
  vertical-align: 1px;
}
.feed td.doubt::before {
  background: var(--warning);
}
.feed .kv {
  display: inline-block;
  margin-right: 14px;
}
.feed .kv .k {
  color: var(--muted);
}
.feed .kv pre {
  display: inline;
}

th,
td {
  padding: 5px 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
tbody > tr:last-child > * {
  border-bottom: 0;
}
td {
  font: 400 13px/1.5 var(--font-utility);
}
tr:hover > td {
  background: color-mix(in srgb, var(--periwinkle) 6%, transparent);
}

/* A column's head. */
th {
  color: var(--muted);
  font: 400 11px/1.7 var(--font-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
tr:has(> th + th) > th {
  background: color-mix(in srgb, var(--page) 50%, transparent);
}

/* A row's label, and the value beside it. */
th:has(+ td) {
  width: 13rem;
  color: var(--muted-bright);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* Text and JSON are what a table has room for: their column takes the width the others
   leave, wraps at its spaces, and inside a string only when one alone is wider than the
   cell. With no such column the last one takes what is left, so the others stay as wide
   as what is in them. */
td.text {
  width: 100%;
  min-width: 14rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sheet > table:not(.state, :has(.text)) :is(th, td):last-child {
  width: 100%;
}

/* A table with no sheet still reads: a value beside its label wraps, and the last
   column takes what is left. */
table:not(.sheet > *) th + td {
  white-space: normal;
  overflow-wrap: anywhere;
}
table:not(.sheet > *) :is(th, td):last-child {
  width: 100%;
}

pre,
code {
  color: var(--muted-bright);
  font: inherit;
  font-family: var(--font-utility);
}
pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
details summary {
  color: var(--muted-bright);
  cursor: pointer;
}

/* What is shown once: an administrator link, a registration token. */
.secret {
  padding: 0.75rem;
  border: 1px solid var(--periwinkle);
  border-radius: 4px;
  background: var(--surface);
  font: 400 13px/1.5 var(--font-utility);
  overflow-wrap: anywhere;
}

td.soft {
  color: var(--muted-bright);
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Desired beside observed: the subject, then a column each, sharing the width. */
table.state {
  min-width: 40rem;
  table-layout: fixed;
}
table.state :is(th, td) {
  width: auto;
  min-width: 0;
  white-space: normal;
}
table.state th:first-child {
  width: 10rem;
}
tr.differs > * {
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}

/* What went wrong the last time something was asked for. */
p.failed {
  color: var(--warning);
}

/* What to know about the value it follows. */
.note {
  display: inline-block;
  margin-left: 0.75rem;
  color: var(--warning);
  font-size: 12px;
}

/* What is beside a value and matters less: the slots left after a meter. */
.aside {
  margin-left: 0.7rem;
  color: var(--muted);
}

/* A thing's facts, three to a row; the gaps draw the lines, so any number of columns
   closes. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
}
.facts div {
  padding: 0.45rem 0.8rem;
  background: var(--surface);
}
.facts dt {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.facts dd {
  margin: 0;
  overflow: hidden;
  font: 400 13px/1.5 var(--font-utility);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Facts whose values are lists or say what went wrong wrap, not end in an ellipsis. */
.facts.wraps dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Two blocks side by side, the first taking the room. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  align-items: start;
}

/* Blocks side by side, sharing the width; in a rail, a column of lists beside the rest. */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  align-items: start;
}
.cols.rail {
  grid-template-columns: 24rem minmax(0, 1fr);
}
.cols > div {
  min-width: 0;
}
/* A rail's labels are as wide as the longest, and its values start in one line: a
   meter's numbers are set left, as the plain values under and over it are. */
.rail th:has(+ td) {
  width: auto;
}
.rail .meter {
  grid-template-columns: 5.5rem 5rem;
}
.rail .meter > span {
  text-align: left;
}

/* What is used of what there is: the numbers, and a bar that warns from four fifths. */
.meter {
  display: inline-grid;
  grid-template-columns: 4.5rem 5rem;
  gap: 0.6rem;
  align-items: center;
  white-space: nowrap;
}
.meter > span {
  text-align: right;
}
.meter em {
  color: var(--muted);
  font-style: normal;
}
.meter i {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-soft);
}
.meter i::after {
  display: block;
  width: var(--filled);
  height: 100%;
  border-radius: inherit;
  background: var(--periwinkle);
  content: '';
}
.meter i.high::after {
  background: var(--warning);
}
/* One meter on its own has no column of numbers to line up with. */
:is(table.state, .facts) .meter {
  grid-template-columns: auto 5rem;
}

/* A count's share of the largest in its table: the meter's bar, in the color of the
   status it counts. */
td.bar {
  width: 100%;
  min-width: 5rem;
  vertical-align: middle;
}
td.bar i {
  display: block;
  width: var(--filled);
  min-width: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--status, var(--periwinkle));
}

/* A count by week: the drawing stretches to the width, so its line keeps its stroke, and
   the numbers at its left and the dates beneath it are text beside it. Bars take the
   color of the status they count, as a share's bar does. */
.plot {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 0.4rem;
  padding: 0.5rem 0.8rem 0.3rem;
  color: var(--muted);
  font-size: 11px;
}
.plot svg {
  display: block;
  width: 100%;
  height: 72px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
}
.plot rect {
  fill: var(--status, var(--periwinkle));
}
.plot rect.hit {
  fill: transparent;
}
.plot polyline {
  fill: none;
  stroke: var(--periwinkle);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* The drawing, and over it a column for each week, which says its week while pointed at:
   beside the column, at its right, or at its left in the later half. */
.plot .drawing {
  position: relative;
}
.plot .weeks {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}
.plot .weeks span {
  position: relative;
}
.plot .weeks span:hover {
  background: color-mix(in srgb, var(--periwinkle) 12%, transparent);
}
.plot .weeks span:hover::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(100% + 4px);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--menu-surface);
  color: var(--ink);
  line-height: 1.4;
  white-space: pre;
  content: attr(data-says);
  pointer-events: none;
}
.plot .weeks span.late:hover::after {
  right: calc(100% + 4px);
  left: auto;
}
.plot line {
  stroke: var(--line);
  vector-effect: non-scaling-stroke;
}
.plot .y {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
/* The baseline's number, where counts go both ways from it. */
.plot .y .zero {
  position: absolute;
  right: 0;
  translate: 0 -50%;
}
.plot .x {
  display: flex;
  grid-column: 2;
  justify-content: space-between;
}
/* A heading's figure, at its far end; where two are counted, each after a mark in its
   bars' color. */
h2 b {
  float: right;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
h2 b i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  background: var(--status, var(--periwinkle));
}
h2 b .aside {
  color: var(--muted);
}

/* Lanes: what each thing had open over time. Row names in a column, then the track, where
   everything is placed in percent, so the width stretches and the text keeps its size.
   The grid lines and guides sit behind the bars, the cuts over them, the labels over all. */
.lanes {
  --name: 10.5rem;
  position: relative;
  isolation: isolate;
  min-width: 760px;
  padding-right: 12px;
  font-size: 10px;
}
.lanes .axis,
.lanes .lrow,
.lanes .foot {
  display: grid;
  grid-template-columns: var(--name) minmax(0, 1fr);
}
.lanes .track {
  position: relative;
}
.lanes .axis .track {
  height: 26px;
  border-bottom: 1px solid var(--line);
}
.lanes .tick,
.lanes .gname {
  position: absolute;
  top: 6px;
  color: var(--muted);
  line-height: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.lanes .gname {
  color: var(--ink);
  transform: none;
}
.lanes .over {
  position: absolute;
  inset: 25px 12px 18px var(--name);
  pointer-events: none;
}
.lanes .over i {
  position: absolute;
  top: 0;
  bottom: 0;
}
.lanes .gl {
  width: 1px;
  background: var(--line-soft);
}
.lanes .guide {
  border-left: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
  z-index: 2;
}
.lanes .scale {
  border-left: 1px dotted var(--line);
}
.lanes .cut {
  z-index: 2;
  background: repeating-linear-gradient(135deg, var(--surface) 0 3px, var(--line) 3px 5px);
}
.lanes .foot .track {
  height: 18px;
}
.lanes .foot .track span {
  position: absolute;
  top: 3px;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(-50%);
}

/* A lane: a report's, in its color, or a topic's. */
.tone-1 { --tone: var(--periwinkle); }
.tone-2 { --tone: var(--sea-glass); }
.tone-3 { --tone: var(--violet); }
.tone-4 { --tone: var(--muted-bright); }
.tone-warning { --tone: var(--warning); }
.lanes .lane {
  margin-top: 12px;
  padding-bottom: 6px;
  background: color-mix(in srgb, var(--tone) 4%, transparent);
}
.lanes .lane-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px 4px;
  font-size: 12px;
  white-space: nowrap;
}
.lanes .lane-head b {
  color: var(--tone);
  font-weight: 500;
}
.lanes .topic .lane-head b,
.lanes .tone-warning .lane-head b {
  color: var(--ink);
}
.lanes .lane-head .aside {
  margin: 0;
}
.lanes .lname {
  overflow: hidden;
  padding-left: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lanes .lrow {
  height: 17px;
}
.lanes .lrow.rate {
  height: 30px;
}
.lanes .lrow.faults {
  height: 22px;
}
.lanes .lrow.rate .track,
.lanes .lrow.faults .track {
  border-bottom: 1px solid var(--line-soft);
}

/* What was open: a bar from its start to its end, an arrow where it began before the
   range or runs past it. Its label stays inside it and inside its axis segment. */
.lanes .bar {
  position: absolute;
  top: 3px;
  z-index: 1;
  height: 11px;
  overflow: hidden;
  border-left: 2px solid var(--tone);
  border-radius: 2px;
  background: color-mix(in srgb, var(--tone) 45%, transparent);
  color: var(--ink);
  line-height: 11px;
}
.lanes .bar:not(.past) {
  border-right: 1px solid var(--tone);
}
.lanes .bar span {
  display: block;
  overflow: hidden;
  padding-left: 4px;
  white-space: nowrap;
}
.lanes .bar.before {
  border-left: 0;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}
.lanes .bar.before span {
  padding-left: 8px;
}
.lanes .bar.past {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}
.lanes .bar.before.past {
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.lanes .bar.muted {
  /* Over the sheet's color, so it covers the microphone's bar and label beneath it. */
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 55%, transparent) 0 1.5px, transparent 1.5px 4px),
    var(--surface);
}
.lanes .bar.waiting {
  border: 1px dashed var(--muted);
  border-left: 2px solid var(--tone);
  background: transparent;
  color: var(--muted);
}
.lanes .bar.faint,
.lanes .dashed .bar {
  background: color-mix(in srgb, var(--tone) 22%, transparent);
}
.lanes .dashed .bar {
  outline: 1px dashed var(--tone);
  outline-offset: -1px;
}
.lanes a:hover {
  text-decoration: none;
  filter: brightness(1.15);
}

/* The pointer's line and the time on the axis, while the pointer is over the lanes; the
   readout beside them says what each lane had open then. Drawn by the lanes' script. */
.lanes.pointed {
  cursor: crosshair;
}
.lanes .cursor {
  display: none;
  z-index: 4;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 75%, transparent);
}
.lanes .chip {
  position: absolute;
  top: 3px;
  z-index: 4;
  display: none;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.lanes.pointed .cursor,
.lanes.pointed .chip {
  display: block;
}
.readout {
  position: fixed;
  z-index: 10;
  display: grid;
  gap: 3px;
  max-width: 36rem;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--menu-surface);
  box-shadow: 0 6px 18px var(--shadow);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.readout[hidden] {
  display: none;
}
.readout b {
  margin-right: 6px;
  font-weight: 500;
}
.readout .note {
  margin: 0;
  font-size: 12px;
}
.readout .aside {
  margin: 0;
}
.readout .under {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-bright);
}

/* Moments and warnings, in the warning color; their words beside them, over everything. */
.lanes .mark {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--warning);
  transform: rotate(45deg);
}
.lanes .mark.plain {
  background: var(--tone);
}
.lanes .mark.danger {
  background: var(--danger);
}
.lanes .stretch {
  position: absolute;
  top: calc(50% - 2px);
  z-index: 1;
  min-width: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--warning);
}
.lanes .stretch::before {
  position: absolute;
  top: -2px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--warning);
  content: '';
  transform: rotate(45deg);
}
.lanes .note {
  position: absolute;
  top: 50%;
  z-index: 3;
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  white-space: nowrap;
  transform: translateY(-50%);
}
/* A label on its own stretch's line, where there is no room beside it. */
.lanes .note.inside {
  padding: 0 4px;
  background: var(--surface);
}
.lanes .lane-head .note {
  position: static;
  transform: none;
}

/* A value per window: a line to the row's top, its dips in the warning color. */
.lanes .rate svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  overflow: visible;
}
.lanes .rate path {
  fill: color-mix(in srgb, var(--tone) 16%, transparent);
}
.lanes .rate polyline {
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.5;
}
.lanes .pt {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--tone);
}
.lanes .pt.low {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--warning);
}
.lanes .fault {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 3px;
  margin-left: -1.5px;
  background: var(--warning);
}
/* A row's faults in all, after its name. */
.lanes .lname .total {
  position: static;
  color: var(--muted);
  font-size: 11px;
  transform: none;
}
.lanes .lname .total.note {
  color: var(--warning);
}

/* Everything in order: time, step, who or what, and the line. A warning is tinted with a
   stripe; a silence folds into one striped row that opens to what it held. */
.events {
  --cols: 12.5ch 7.5ch 10ch minmax(0, 1fr);
}
.events .ev,
.events .heads {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 0 12px;
  align-items: baseline;
  padding: 5px 12px 5px 9px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
}
.events .heads {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.events .ev:last-child {
  border-bottom: 0;
}
.events .when {
  font-weight: 500;
  white-space: nowrap;
}
.events .clock,
.events .step {
  color: var(--muted);
  white-space: nowrap;
}
.events .step {
  font-size: 12px;
}
.events .who {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.events .what {
  min-width: 0;
  overflow-wrap: anywhere;
}
.events .what small,
.events .ids {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
}
.events .ev.warn {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.events .ev.warn .lvl,
.events .ev.warn .tgt {
  color: var(--warning);
}
.events .ev.warn .lvl {
  font-weight: 500;
}
.events .ev.unaligned .when,
.events .ev.unaligned .clock {
  color: var(--warning);
  font-weight: 400;
}
.events .ev.media {
  color: var(--muted);
}
.events .ev.media .what {
  display: grid;
  gap: 1px;
  font-size: 12px;
}
.events .low {
  color: var(--warning);
}
.events .ev:target {
  background: color-mix(in srgb, var(--periwinkle) 22%, transparent);
  animation: arrived 1.6s ease-out;
}
@keyframes arrived {
  from {
    background: color-mix(in srgb, var(--periwinkle) 45%, transparent);
  }
}
.events .run {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--periwinkle) 8%, transparent);
  color: var(--muted);
  font-size: 12px;
}
.events .run b {
  color: var(--ink);
  font-weight: 500;
}
details.fold {
  border-bottom: 1px solid var(--line-soft);
}
details.fold > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 12px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary::before {
  color: var(--muted);
  content: '▸';
}
details.fold[open] > summary::before {
  content: '▾';
}
details.fold > summary b {
  color: var(--ink);
  font-weight: 500;
}
details.fold .low {
  color: var(--warning);
}
details.fold .series {
  padding: 4px 12px 4px 26px;
  border-top: 1px dotted var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}
details.fold .series b {
  color: var(--ink);
  font-weight: 500;
}

/* All in order spends its columns on the time twice, the step, and the reports. */
.events.stream {
  --cols: 10ch 12.5ch 7.5ch 20ch minmax(0, 1fr);
}
.events .label,
.spine .label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.events .ev:has(> .what > [id]:target) {
  background: color-mix(in srgb, var(--periwinkle) 22%, transparent);
}

/* The lines a list shows: links in one bar over it. */
nav.only {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
nav.only a {
  padding: 1px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--muted-bright);
  font-size: 12px;
}
nav.only a:hover {
  color: var(--ink);
  text-decoration: none;
}
nav.only a[aria-current] {
  border-color: var(--line);
  background: color-mix(in srgb, var(--periwinkle) 12%, transparent);
  color: var(--ink);
}

/* The lanes' key: the swatches alone. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}
.legend .swatch {
  display: inline-block;
  width: 18px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}
.legend .swatch.open {
  background: color-mix(in srgb, var(--periwinkle) 50%, transparent);
}
.legend .swatch.muted {
  background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px);
}
.legend .swatch.waiting {
  border: 1px dashed var(--muted);
}
.legend .swatch.mark {
  width: 8px;
  background: var(--warning);
  transform: rotate(45deg);
}
.legend .swatch.fault {
  width: 4px;
  background: var(--warning);
}
.legend .swatch.stretch {
  height: 4px;
  background: var(--warning);
}

/* The sender down the left, every other report down the right, time down the middle; the
   middle thick while the share is live. A sender's line and its answers share a row. */
.spine-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}
.spine-key .note {
  margin: 0;
}
.spine-head,
.c-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.5rem minmax(0, 1fr);
}
.spine-head {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.spine-head > :first-child {
  padding-right: 14px;
  text-align: right;
}
.spine-head > :nth-child(2) {
  text-align: center;
}
.spine-head > :last-child {
  padding-left: 14px;
}
.c-row {
  position: relative;
  align-items: center;
  min-height: 30px;
}
.c-row + .c-row {
  border-top: 1px solid var(--line-soft);
}
.c-row.win + .c-row.win {
  border-top-color: transparent;
}
.c-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  content: '';
}
.c-row.live::before {
  width: 3px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--periwinkle) 55%, var(--muted));
}
.c-left,
.c-right {
  min-width: 0;
  padding: 5px 14px;
  overflow-wrap: anywhere;
}
.c-left {
  text-align: right;
}
.c-spine {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.c-time {
  padding: 0 6px;
  background: var(--surface);
  font-weight: 500;
}
.c-time.unal {
  color: var(--warning);
  font-weight: 400;
}
.c-row.paired .c-spine::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: -1;
  border-top: 1px dashed var(--muted);
  content: '';
}
.c-left .warn,
.c-line.warn,
.c-line.warn .lvl,
.c-line.warn .tgt,
.c-left .warn .lvl,
.c-left .warn .tgt {
  color: var(--warning);
}
.c-line {
  padding: 1px 0;
}
.c-line + .c-line {
  border-top: 1px dotted var(--line-soft);
}
.c-line .note {
  margin: 0;
}
.spine .delay {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.c-row.win {
  min-height: 22px;
  color: var(--muted);
  font-size: 12px;
}
.c-row.win .c-time {
  color: var(--muted);
  font-weight: 400;
}
.c-row.win .bar {
  display: inline-block;
  height: 6px;
  margin: 0 4px 0 6px;
  border-radius: 3px;
  background: var(--tone, var(--periwinkle));
  vertical-align: middle;
}
.c-row.win .win {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}
.c-row.win .low {
  color: var(--warning);
}
.c-row.win .low .bar {
  background: var(--warning);
}
.spine [id]:target {
  background: color-mix(in srgb, var(--periwinkle) 22%, transparent);
}

/* What each thing a log summarizes counted: a row per series in one sheet, in groups as
   the lanes are. On the left what it is and when; on the right what stands out, in the
   warning color, its settings in a sentence, and its counts with their rates; every number
   behind a fold. */
.sheet.media .media-group {
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--periwinkle) 6%, transparent);
  color: var(--muted-bright);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.series-row {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.series-name {
  display: grid;
  align-content: start;
  gap: 2px;
}
.series-name b {
  font-weight: 500;
}
.series-name .aside {
  margin: 0;
  font-size: 12px;
}
.series-gist {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}
.series-gist p {
  margin: 0;
}
.series-gist .out {
  display: block;
  margin: 0;
  font-size: 13px;
}
.series-gist .counts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}
.series-gist .count .what {
  color: var(--muted);
}
.series-gist .count.wrong,
.series-gist .count.wrong .what {
  color: var(--warning);
}
.series-gist .rate,
dl.numbers .rate {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.series-gist .quiet {
  color: var(--muted);
  font-size: 12px;
}
.series-gist .quiet .label {
  margin-right: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
details.numbers > summary {
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
details.numbers > summary:hover {
  color: var(--ink);
}
details.numbers[open] > summary {
  margin-bottom: 6px;
}
dl.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 6px 16px;
  margin: 0;
}
dl.numbers dt {
  color: var(--muted);
  font-size: 11px;
}
dl.numbers dd {
  margin: 0;
  overflow-wrap: anywhere;
}
dl.numbers .wrong dd,
dl.numbers .wrong dt {
  color: var(--warning);
}
.sheet.media .event-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet.media .event-row .aside {
  margin: 0;
}
.sheet.media > :last-child {
  border-bottom: 0;
}
@media (max-width: 760px) {
  .series-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Who a line is from: a report's reference in its lane's color, outlined when its clock
   is not aligned; or what kind of thing it is. */
.tag {
  padding: 0 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.tag.unaligned {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent);
}
.kind {
  padding: 0 5px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--muted-bright);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.kind.warn {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--warning);
}

/* What a page waits for, under the line that names it: the meter's bar, running across
   as the website's does. A reader who asked for less motion has the line alone, since
   a bar standing still would read as a meter. */
.loader {
  width: 8rem;
  height: 4px;
  margin: 0.9rem 0 1.1rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-soft);
}
.loader::after {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--periwinkle);
  animation: loader 1.8s ease-in-out infinite;
  content: '';
}
@keyframes loader {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
  .events .ev:target {
    animation: none;
  }
}

/* The version a tenant runs, after the one it is to run. */
.was {
  margin-left: 0.5rem;
  color: var(--warning);
}

/* A list's filter: links in one bar, at the title's far end. */
nav.filter {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  padding: 2px;
  border: 1px solid var(--line-soft);
  margin-left: auto;
  border-radius: 4px;
  background: var(--surface);
}
nav.filter a {
  padding: 2px 10px;
  border-radius: 3px;
  color: var(--muted-bright);
  font-size: 12px;
  text-transform: capitalize;
  white-space: nowrap;
}
nav.filter a span {
  margin-left: 0.1rem;
  color: var(--muted);
}
nav.filter a:hover {
  color: var(--ink);
  text-decoration: none;
}
nav.filter a[aria-current] {
  background: color-mix(in srgb, var(--periwinkle) 18%, transparent);
  color: var(--ink);
}
/* A view that does not apply here, and the line under the title that says why. */
nav.filter span.disabled {
  padding: 2px 10px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.55;
  cursor: not-allowed;
}
.why {
  margin: 0 0 0.4rem;
  font-size: 12px;
}

/* A section's head with a filter at its far end. */
.head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: end;
  margin: 1.6rem 0 0.4rem;
}
.head h2 {
  margin: 0;
}
.head nav.filter a,
.head nav.filter span {
  text-transform: none;
}

/* Statuses. status-<word> alone colors its text; with status it marks the word. */

[class*='status-'] {
  --status: var(--muted);
  color: var(--status);
}
.status-active,
.status-ready,
.status-done,
.status-current {
  --status: var(--sea-glass);
}
.status-provisioning,
.status-creating,
.status-bootstrapping,
.status-queued,
.status-running,
.status-upgrading {
  --status: var(--periwinkle);
}
.status-suspended,
.status-draining,
.status-behind {
  --status: var(--warning);
}
.status-failed,
.status-deleted {
  --status: var(--danger);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  white-space: nowrap;
}
.status::before {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--status);
  content: '';
}

/* Controls. */

button,
input,
select {
  height: 26px;
  padding: 0 0.65rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: inherit;
  font: 400 12px/1 var(--font-utility);
}
button {
  background: color-mix(in srgb, var(--menu-surface) 60%, transparent);
  white-space: nowrap;
  cursor: pointer;
}
button:hover {
  border-color: color-mix(in srgb, var(--periwinkle) 55%, var(--line));
  background: color-mix(in srgb, var(--periwinkle) 12%, transparent);
}
input,
select {
  background: var(--page);
  font-size: 13px;
}
input:focus,
select:focus {
  border-color: var(--periwinkle);
  outline: none;
}
input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
input[type='checkbox'] {
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--periwinkle);
}
td button {
  height: 20px;
  padding: 0 0.5rem;
}

/* Customers' controls have the room their pages do. */
.customers :is(button, input, select) {
  height: 32px;
  font-size: 13px;
}
.customers main button {
  padding: 0 0.9rem;
  font: 600 13px/1 var(--font-body);
}

/* A link that is the thing to do: New community. */
a.button {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.9rem;
  border-radius: 3px;
  background: var(--button-background);
  color: var(--button-ink);
  font: 600 13px/1 var(--font-body);
  white-space: nowrap;
}
a.button:hover {
  background: var(--button-hover);
  text-decoration: none;
}
.title a.button {
  margin-left: auto;
}

/* A button that reads as a link: Sign out. */
button.link {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-bright);
  font-size: 13px;
}
button.link:hover {
  background: none;
  color: var(--ink);
}

/* Forms. */

label {
  display: block;
  color: var(--muted);
  font: 400 11px/1.5 var(--font-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
label input,
label select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  color: var(--ink);
  letter-spacing: 0;
}
label code {
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

/* A checkbox and what it means, and a field with words after it, sit in a line. */
label:has(> input[type='checkbox']),
label > span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted-bright);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
label:has(> input[type='checkbox']) {
  min-height: 26px;
}
label:has(> input[type='checkbox']) input,
label > span input {
  margin-top: 0;
}
label > span input {
  flex: 1;
  width: auto;
}

form.inline,
.actions form {
  display: inline-flex;
  gap: 0.4rem;
  align-items: end;
}
main > form.inline,
main > section > form.inline {
  margin-bottom: 0.6rem;
}

/* One form under another, its button the thing to do. */
form.stack {
  display: grid;
  gap: 0.6rem;
  max-width: 28rem;
  padding: 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
}
/* The plans to buy, side by side, the chosen one marked. */
fieldset.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
fieldset.plans legend {
  float: left;
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
  padding: 0;
  color: var(--muted);
  font: 400 11px/1.5 var(--font-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
fieldset.plans label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: 400 13px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
fieldset.plans label:hover {
  border-color: color-mix(in srgb, var(--periwinkle) 55%, var(--line));
}
fieldset.plans label:has(input:checked) {
  border-color: var(--periwinkle);
  background: color-mix(in srgb, var(--periwinkle) 10%, transparent);
}
fieldset.plans label:has(input:focus-visible) {
  outline: 2px solid var(--periwinkle-bright);
  outline-offset: 1px;
}
fieldset.plans input[type='radio'] {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--periwinkle);
  align-self: center;
}
fieldset.plans label > span {
  display: block;
  font-size: 13px;
}
fieldset.plans .price {
  font-family: var(--font-utility);
  white-space: nowrap;
}
fieldset.plans .slots {
  grid-column: 2 / -1;
  color: var(--muted-bright);
  font-size: 12px;
}
fieldset.plans p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

/* The privacy policy, under a form that asks for personal data. */
.privacy {
  color: var(--muted);
  font-size: 12px;
}
.privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.privacy a:hover {
  color: var(--ink);
}

/* Its fields in one row, in a sheet, going to further rows as the window slims. */
form.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
}
form.row > label {
  flex: 1 1 12rem;
}
form.row > button {
  min-width: 6rem;
}

/* A link beside the button, such as a filter's Clear. */
form.row > a {
  line-height: 26px;
  white-space: nowrap;
}

:is(form.stack, form.row) > button {
  border-color: transparent;
  background: var(--button-background);
  color: var(--button-ink);
}
:is(form.stack, form.row) > button:hover {
  background: var(--button-hover);
}

/* A page's actions in one bar. One with nothing to fill in is a button; one with
   fields opens its form under its name, and naming the <details> alike keeps one open
   at a time. */
.cmd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
}
.cmd > form {
  display: contents;
}
.cmd .rule {
  width: 1px;
  height: 18px;
  margin: 0 0.25rem;
  background: var(--line);
}
.cmd details {
  position: relative;
}
.cmd details:last-child {
  margin-left: auto;
}
.cmd summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 26px;
  padding: 0 0.65rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--menu-surface) 60%, transparent);
  font-size: 12px;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
}
.cmd summary::-webkit-details-marker {
  display: none;
}
.cmd summary::after {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  content: '';
}
.cmd summary:hover {
  border-color: color-mix(in srgb, var(--periwinkle) 55%, var(--line));
  background: color-mix(in srgb, var(--periwinkle) 12%, transparent);
}
.cmd details[open] summary {
  border-color: var(--periwinkle);
}
.cmd details form {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  width: 19rem;
  border-color: var(--line);
  background: var(--menu-surface);
  box-shadow: 0 12px 32px var(--shadow);
}
.cmd details:last-child form {
  right: 0;
  left: auto;
}
.cmd details p {
  margin: 0;
  color: var(--muted-bright);
  font-size: 12px;
}

/* In a form that opens, the link it is about, and the thing to do that is not the first. */
.cmd details p.secret {
  padding: 0.5rem 0.6rem;
  color: var(--ink);
}
/* What the choices under it are of, and what belongs to a choice: there while it is
   ticked. */
.cmd details p.legend {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cmd .under {
  display: grid;
  gap: 0.6rem;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.cmd form:has(#with-password:not(:checked)) .under {
  display: none;
}
.cmd form.stack > button.plain {
  border-color: var(--line);
  background: none;
  color: inherit;
}
.cmd form.stack > button.plain:hover {
  background: color-mix(in srgb, var(--periwinkle) 12%, transparent);
}

/* What cannot be undone. */
button.danger,
.danger summary,
.danger form.stack > button {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}
.danger form.stack > button {
  background: none;
}
button.danger:hover,
.danger form.stack > button:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* What is wrong now, in a line. */
.failing {
  color: var(--danger);
}

/* A filter form over the table it filters. */
form.filters {
  margin-bottom: 0.6rem;
}

/* Links between a long list's pages, under it. */
nav.pages {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 0.6rem;
  font: 400 12px/1.5 var(--font-utility);
  white-space: nowrap;
}

/* A page's actions, in a bar that wraps. */
div.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: end;
  padding: 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
}
td.actions {
  white-space: nowrap;
}
td.actions > :not(:first-child) {
  margin-left: 0.3rem;
}

/* Slim windows. The header's one row needs about 75rem when it has the operators'
   links, and about 40rem without them; under that the links take a second row and the
   header scrolls away with the page. */

/* Jobs beside Backups needs about 86rem; under that they stack. */
@media (max-width: 86rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 75rem) {
  header:has(.split) {
    position: static;
    flex-wrap: wrap;
    gap: 0 1rem;
    height: auto;
    padding-top: 7px;
  }
  header:has(.split) nav {
    flex: 1 0 100%;
    flex-wrap: wrap;
    order: 3;
    margin: 0 -0.6rem;
    padding: 4px 0;
  }
  header:has(.split) .who {
    margin-left: auto;
  }
  header .split {
    display: none;
  }
}

@media (max-width: 66rem) {
  .cols,
  .cols.rail {
    grid-template-columns: minmax(0, 1fr);
  }
  nav.filter,
  .chips {
    flex-basis: 100%;
    margin-left: 0;
  }
  nav.filter {
    flex-basis: auto;
  }
  .title {
    row-gap: 0.5rem;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  header {
    position: static;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    height: auto;
    padding-top: 7px;
  }
  header nav {
    flex: 1 0 100%;
    flex-wrap: wrap;
    order: 3;
    margin: 0 -0.6rem;
    padding: 4px 0;
  }
  header,
  main {
    padding-inline: 0.75rem;
  }
  header .who {
    display: none;
  }
  header form {
    margin-left: auto;
  }
  header .theme:not([hidden]) ~ form {
    margin-left: 0;
  }
  header:not(:has(form)) nav {
    display: none;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A form opens across the bar, not from its own name, so it cannot hang off the
     screen. */
  .cmd {
    position: relative;
  }
  .cmd details {
    position: static;
  }
  .cmd details:last-child {
    margin-left: 0;
  }
  .cmd details form,
  .cmd details:last-child form {
    right: 0;
    left: 0;
    width: auto;
  }
  .cmd .rule {
    display: none;
  }
}