/* cronwatch.dev
   Set like a printed sheet: a serif for everything a person reads, a mono for
   everything a machine printed, and a small label down the left of each
   section instead of headlines shouting at you. Neutral greys only; text is
   black on light and white on dark, and the only colours anywhere are the
   four states the library reports. Light by default; the toggle turns the
   sheet over. Fonts are self hosted, so the page asks nothing of any other
   origin. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-normal-200-800.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic-200-800.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plexmono-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plexmono-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plexmono-normal-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f4f4f5;
  --sheet: #ffffff;
  --sunk: #fafafa;
  --rule: #e4e4e7;
  --rule-2: #d4d4d8;
  --tick: #909098;
  --faint: #71717a;
  --ink: #000000;
  --body: #18181b;
  --muted: #71717a;
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
  --link: #000000;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #09090b;
  --sheet: #111113;
  --sunk: #18181b;
  --rule: #27272a;
  --rule-2: #3f3f46;
  --tick: #66666f;
  --faint: #85858f;
  --ink: #ffffff;
  --body: #e4e4e7;
  --muted: #a1a1aa;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --link: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/1.62 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: var(--rule-2); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--sheet); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, pre, kbd, .mono { font-family: var(--mono); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.006em; }
p { margin: 0; }
pre { margin: 0; font: 400 13.5px/1.62 var(--mono); color: var(--body); overflow-x: auto; }
pre .k { color: var(--ink); font-weight: 500; } pre .s { color: var(--ok); } pre .c { color: var(--muted); } pre .n { color: var(--ink); }
pre b { font-weight: 600; color: var(--ink); }
pre b.bad { color: var(--bad); } pre b.warn { color: var(--warn); } pre b.ok { color: var(--ok); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--sheet); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 30; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The sheet. */
.page { max-width: 1180px; margin: 0 auto; background: var(--sheet); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 0 clamp(20px, 4vw, 56px); }
@media (min-width: 1240px) { .page { margin: 0 auto; } }

/* Top: links left, the mark right, the way a masthead sits. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 17px; }
.links a { color: var(--ink); text-decoration-color: var(--rule-2); }
.links a:hover, .links a.here { text-decoration-color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
/* The mark sits in a rounded box like the favicon: dark on light paper, light
   on dark. The one gradient on the site, by the owner's choice. */
.brand .mark { width: 26px; height: 26px; display: block; border-radius: 6.5px; background: linear-gradient(180deg, #3f3f46 0%, #09090b 100%); color: #fafafa; transform: translate(2px, -2px); }
.brand .mark svg { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .brand .mark { background: linear-gradient(180deg, #fafafa 0%, #c9c9cf 100%); color: #09090b; }
.menu { display: none; }

/* The opening: the first paragraph does the work a slogan usually does. */
.opening { padding: 60px 0 48px; }
.opening .say { font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.26; letter-spacing: -0.015em; max-width: 19em; text-wrap: pretty; }
.opening .say b { font-weight: 600; }
.opening .say i { font-style: italic; color: var(--muted); }
.opening .then { margin-top: 24px; color: var(--ink); max-width: 52ch; text-wrap: pretty; }
.install { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 10px 10px 14px; font: 400 14px/1.4 var(--mono); }
.install code::before { content: "$ "; color: var(--muted); }
/* One install box per language, side by side, each under a small label. */
.installs { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 26px; }
.installs .for { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
.installs .install { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.prompt-btn { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--mono); color: var(--sheet); background: var(--ink); border: 1px solid var(--ink); border-radius: 3px; padding: 11px 14px; }
.prompt-btn:hover { opacity: .85; }
.prompt-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sheet); flex: none; }
.prompt-note { font-size: 15px; color: var(--ink); }
.prompt-note a { color: var(--ink); }
details.peek { margin-top: 18px; }
details.peek > summary { list-style: none; cursor: pointer; font: 400 13px/1.5 var(--mono); color: var(--muted); }
details.peek > summary::-webkit-details-marker { display: none; }
details.peek > summary::after { content: " +"; }
details.peek[open] > summary::after { content: " \2212"; }
details.peek > summary:hover { color: var(--ink); }
details.peek .out { margin-top: 12px; }
details.peek .out pre { max-height: 360px; overflow-y: auto; }
.copy { flex: none; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-2); border-radius: 2px; padding: 6px 8px; }
.copy:hover { color: var(--ink); border-color: var(--muted); }

/* Rows: a small label down the left, the thing itself on the right. */
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 40px; row-gap: 40px; align-items: start; padding: clamp(64px, 8vw, 96px) 0; border-top: 1px solid var(--rule); }
.row > .label { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.row .body > h2 { font-size: 1.62rem; line-height: 1.22; max-width: 40ch; text-wrap: pretty; }
/* Wide enough for every section heading to sit on one line: keep it there. */
@media (min-width: 1100px) { .row .body > h2 { max-width: none; white-space: nowrap; } }
.row .body > p { color: var(--ink); max-width: 58ch; margin-top: 18px; text-wrap: pretty; }
.row .body > p.small { font-size: 17px; color: var(--ink); }
.row .body > p code, .row .body > p.small code { font-size: .86em; color: var(--ink); }
.row .body > * + .out, .row .body > * + .install, .row .body > * + .catches { margin-top: 30px; }
.row .body > * + p.small, .row .body > * + details.peek { margin-top: 24px; }
.row .body > details.peek + details.peek { margin-top: 12px; }

/* Printed things: what the library actually put on a screen. */
.out { background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; }
.out + .out { margin-top: 12px; }
.out .from { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--rule); font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.out pre { padding: 13px 15px 15px; white-space: pre-wrap; word-break: break-word; }
.out.code pre { white-space: pre; }
.out .t { font-weight: 600; color: var(--ink); }
.out .t.bad { color: var(--bad); } .out .t.warn { color: var(--warn); } .out .t.ok { color: var(--ok); }
.out .prompt { color: var(--ink); font-weight: 600; }
.out .prompt::before { content: "> "; color: var(--muted); font-weight: 400; }
.out.tall pre { max-height: 440px; overflow-y: auto; }
/* The failure pair: a terminal where cron started the job and then said
   nothing, and the channel where CronWatch's alert arrived. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1.28fr); align-items: stretch; margin-top: 34px; }
.pair .side { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.pair .side figcaption { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.pair .side figcaption b { color: var(--ink); font-weight: 500; }
.pair .bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--rule); font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.pair .bar > span:nth-child(2) { justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair .dots { display: flex; gap: 5px; }
.pair .dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--rule-2); }
.pair .term { flex: 1; display: flex; flex-direction: column; background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px; }
.pair .term pre { flex: 1; padding: 13px 15px 18px; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.pair .term .c { color: var(--muted); }
.pair .term .l2 { color: var(--body); }
.pair .cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--ink); opacity: .75; }
.pair .quiet { margin-top: 12px; font-size: 16px; line-height: 1.45; font-style: italic; color: var(--ink); }
.pair .quiet span { color: var(--muted); }
.pair .chan { flex: 1; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 4px; }
.pair .chan .bar { display: flex; font-weight: 500; color: var(--ink); background: var(--sunk); border-radius: 4px 4px 0 0; }
.pair .msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 0 11px; padding: 14px 15px 16px 13px; }
.pair .who { width: 30px; height: 30px; color: var(--ink); }
.pair .msg .from { display: flex; align-items: baseline; gap: 9px; min-width: 0; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.pair .msg .from b { font: 600 16px/1.3 var(--serif); color: var(--ink); letter-spacing: -0.005em; }
.pair .msg pre { grid-column: 2; margin-top: 8px; padding: 1px 0 1px 12px; border-left: 2px solid var(--bad); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.pair .msg pre .t { font-weight: 600; color: var(--bad); }
.pair .arrow { display: grid; place-items: center; color: var(--muted); margin-top: 26px; }
.pair .arrow svg { width: 74px; height: auto; overflow: visible; }

/* A section's wide part: runs under both the label and the body. */
.row > .span { grid-column: 1 / -1; min-width: 0; }
.row .caption { margin-top: 14px; font-size: 16px; color: var(--ink); }
.row .body > p.example { margin-top: 26px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.row .body > .example + .pair { margin-top: 14px; }

/* A flat browser window: a thin frame, three dots and the address, nothing
   else. What sits inside is the dashboard, redrawn from its capture. */
.browser { margin: 0; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--sheet); overflow: hidden; }
.browser .chrome { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 9px 12px; background: var(--sunk); border-bottom: 1px solid var(--rule); }
.browser .dots { display: flex; gap: 6px; }
.browser .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule-2); }
.browser .url { justify-self: center; width: min(100%, 380px); padding: 5px 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; font: 400 12px/1.4 var(--mono); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser .screen { padding: 0 clamp(16px, 3vw, 32px) 8px; }

/* The dashboard's own furniture, at the dashboard's sizes. */
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 15px; }
.dbrand { display: flex; align-items: center; gap: 9px; font: 600 17px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.dmark { width: 22px; height: 22px; flex: none; color: var(--ink); }
.dact { display: flex; align-items: center; gap: 12px; }
.dact .meta { font: 400 12px/1.4 var(--mono); color: var(--muted); }
.dact .fake { font: 500 12px/1 var(--mono); color: var(--sheet); background: var(--ink); border-radius: 3px; padding: 8px 11px; }
.dsec { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 32px; padding: 26px 0; border-top: 1px solid var(--rule); }
.dlabel { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 5px; }
.dsec .lede { color: var(--muted); font-size: 16px; max-width: 64ch; text-wrap: pretty; }
.dwide { grid-column: 1 / -1; min-width: 0; margin-top: 8px; }
.headline { font: 400 clamp(22px, 2.6vw, 28px)/1.2 var(--serif); letter-spacing: -0.01em; }
.headline b { font-weight: 600; }
.sq { display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; background: currentColor; margin-right: 7px; vertical-align: 1px; flex: none; }
.sq.muted { background: none; border: 1.5px solid var(--tick); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--rule); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px 16px 2px 0; }
.figures dt { display: flex; align-items: center; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.figures dd { margin: 0; font: 400 30px/1.1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.figures .zero dd { color: var(--rule-2); }
.figures .bad dd { color: var(--bad); } .figures .warn dd { color: var(--warn); }
.figures .bad .sq, .figures .zero .sq.bad { color: var(--bad); } .figures .warn .sq, .figures .zero .sq.warn { color: var(--warn); } .figures .ok .sq { color: var(--ok); }
.state { font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }
.state.ok { color: var(--ok); } .state.warn { color: var(--warn); } .state.bad { color: var(--bad); } .state.muted { color: var(--muted); } .state.info { color: var(--ink); }
.state + .state::before { content: " · "; color: var(--muted); font-weight: 400; }
.counts { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 3px; }
.counts .state + .state::before { content: none; }

/* The last 24 hours, one SVG per width: every mark sits where the dashboard
   put it, in its 1000-unit lane, scaled across. */
.tlbox .tl { display: block; width: 100%; height: auto; overflow: visible; }
.tlbox .tl.narrow { display: none; }
.tl .future { fill: var(--sunk); }
.tl .gl, .tl .edge { stroke: var(--rule); stroke-width: 1; }
.tl .hour { fill: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: .04em; }
.tl .hour:not([text-anchor]) { text-anchor: middle; }
.tl .hour.nowlabel { fill: var(--ink); font-weight: 500; }
.tl .name { fill: var(--ink); font: 500 13px/1 var(--mono); }
.tl .sched { fill: var(--muted); font: 400 11px/1 var(--mono); }
.tl .sq { fill: var(--ok); } .tl .sq.bad { fill: var(--bad); } .tl .sq.warn { fill: var(--warn); }
.tl .sq.muted { fill: none; stroke: var(--tick); stroke-width: 1.5; }
.tl .note { fill: var(--muted); font: italic 400 14px/1 var(--serif); stroke: var(--sheet); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.tl.narrow .note { font-size: 12.5px; }
.tl.narrow .name { font-size: 12.5px; }
.tl .now { stroke: var(--ink); stroke-width: 1.5; }
.tl .marks * { vector-effect: non-scaling-stroke; }
.tl .base, .legend .base { stroke: var(--rule); stroke-width: 1; }
.tl .tick, .legend .tick { stroke: var(--tick); stroke-width: 1.5; }
.tl .tick.ahead { stroke-dasharray: 2 2; opacity: .75; }
.tl .cadence { stroke: var(--tick); stroke-width: 2; stroke-dasharray: 1 3; }
.tl .run, .legend .run { stroke-width: 2; stroke-linejoin: round; }
.tl .run.ok, .legend .run.ok { fill: var(--ok); stroke: var(--ok); }
.tl .run.bad, .legend .run.bad { fill: var(--bad); stroke: var(--bad); }
.tl .run.timeout, .legend .run.timeout { fill: var(--bad); fill-opacity: .28; stroke: var(--bad); stroke-width: 1.5; }
.tl .run.warn, .legend .run.warn { fill: var(--warn); stroke: var(--warn); }
.tl .run.running, .legend .run.running { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tl .run.stuck, .legend .run.stuck { fill: var(--bad); fill-opacity: .12; stroke: var(--bad); stroke-width: 1.5; }
.tl .missed, .legend .missed { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.tl .unloaded, .tl .ahead { fill: var(--sunk); }
.dwide .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding-left: 19.44%; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.dwide .legend span { display: inline-flex; align-items: center; gap: 7px; }
.dwide .key { width: 16px; height: 12px; overflow: visible; }

/* The jobs table, as the dashboard sets it. */
.browser table.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.board td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font: 400 12.5px/1.5 var(--mono); color: var(--body); }
.board tbody tr:last-child td { border-bottom: 0; }
.board td.job { min-width: 160px; }
.board td.job .name { font: 500 13.5px/1.5 var(--mono); color: var(--ink); }
.board td.job .desc { display: block; margin: 2px 0 0; font: 400 14px/1.4 var(--serif); color: var(--muted); }
.board td .tz, .board td .sub { display: block; color: var(--muted); font-size: 11.5px; }
.board .nowrap { white-space: nowrap; }
.board .muted { color: var(--muted); }
.spark { display: block; overflow: visible; }
.spark rect { fill: var(--tick); } .spark rect.bad { fill: var(--bad); } .spark rect.warn { fill: var(--warn); }
.spark rect.running { fill: none; stroke: var(--ink); stroke-width: 1; }

/* Concept illustrations: drawn by hand to explain, and labelled as such. */
.ill { margin: 0; }
.row .body > * + .ill { margin-top: 30px; }
.ill .illbox { padding: 22px 20px 16px; }
.ill svg { display: block; width: 100%; height: auto; overflow: visible; }
.ill svg.narrow { display: none; }
.ill .lt { fill: var(--ink); font: 500 13px/1 var(--mono); }
.ill .ls { fill: var(--muted); font: italic 400 14px/1 var(--serif); }
.ill .base { stroke: var(--rule-2); stroke-width: 1; }
.ill .tick { stroke: var(--tick); stroke-width: 1.5; }
.ill .cap { fill: var(--muted); font: 400 11px/1 var(--mono); }
.ill .cap:not([text-anchor]) { text-anchor: middle; }
.ill .bar.ok { fill: var(--ok); }
.ill .bar.running { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ill .bar.stuck { fill: var(--bad); fill-opacity: .12; stroke: var(--bad); stroke-width: 1.5; }
.ill .grace { fill: var(--rule); }
.ill .missed { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.ill .limit { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ill .usual { stroke: var(--tick); stroke-width: 1; stroke-dasharray: 1 3; }
.ill .cost.ok { fill: var(--ok); } .ill .cost.warn { fill: var(--warn); }
.ill .alert { color: var(--bad); } .ill .alert.warn { color: var(--warn); }
.ill .alert line { stroke: currentColor; stroke-width: 1.5; }
.ill .alert circle { fill: currentColor; }
.ill .alert text { fill: currentColor; font: 500 12px/1 var(--mono); }
.ill .head { display: none; }
.ill .head line { stroke: var(--ink); stroke-width: 1.5; }

/* Where the records go. */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.vs { margin: 0; padding: 12px 16px 16px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; }
.vs figcaption { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.versus-svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.versus-svg .node { fill: var(--sheet); stroke: var(--rule-2); stroke-width: 1; }
.versus-svg .node.theirs { stroke-dasharray: 4 3; stroke: var(--muted); }
.versus-svg .node.lib { fill: var(--sunk); stroke: var(--ink); }
.versus-svg .nl { fill: var(--ink); font: 500 13px/1 var(--mono); text-anchor: middle; }
.versus-svg .ns { fill: var(--muted); font: italic 400 13px/1 var(--serif); text-anchor: middle; }
.versus-svg .flow { stroke: var(--muted); stroke-width: 1.2; }
.versus-svg .headp { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.versus-svg .fl { fill: var(--muted); font: 400 11px/1 var(--mono); }

/* Motion. Only once site.js has seen the figure scroll into view (it adds
   .armed straight away and .play when the figure shows), and never when the
   reader asked for less motion. Without script, everything simply sits in
   its final place. */
@media (prefers-reduced-motion: no-preference) {
  .armed:not(.play) .tl .marks > :not(.base), .armed:not(.play) .tl .note, .armed:not(.play) .tl .now, .armed:not(.play) .tl .nowlabel { opacity: 0; }
  .armed.play .tl .marks > * { animation: cw-fade .45s ease-out both; }
  .armed.play .tl .marks > .base { animation: none; }
  .armed.play .tl .marks .run, .armed.play .tl .marks .missed { transform-box: fill-box; transform-origin: 0 50%; animation-name: cw-grow; animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .armed.play .tl .marks .missed, .armed.play .tl .marks .run.running, .armed.play .tl .marks .run.stuck { animation-name: cw-grow, cw-breathe; animation-duration: .6s, 2.6s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out; }
  .armed.play .tl .now { transform-box: fill-box; transform-origin: top; animation: cw-drop .7s 1.8s cubic-bezier(.2, .8, .2, 1) both; }
  .armed.play .tl .nowlabel { animation: cw-fade .5s 2.1s both; }
  .armed.play .tl .note { animation: cw-fade .7s 2.2s both; }
  .armed.play .tl .d1 { animation-delay: 70ms; }
  .armed.play .tl .d2 { animation-delay: 140ms; }
  .armed.play .tl .d3 { animation-delay: 210ms; }
  .armed.play .tl .d4 { animation-delay: 280ms; }
  .armed.play .tl .d5 { animation-delay: 350ms; }
  .armed.play .tl .d6 { animation-delay: 420ms; }
  .armed.play .tl .d7 { animation-delay: 490ms; }
  .armed.play .tl .d8 { animation-delay: 560ms; }
  .armed.play .tl .d9 { animation-delay: 630ms; }
  .armed.play .tl .d10 { animation-delay: 700ms; }
  .armed.play .tl .d11 { animation-delay: 770ms; }
  .armed.play .tl .d12 { animation-delay: 840ms; }
  .armed.play .tl .d13 { animation-delay: 910ms; }
  .armed.play .tl .d14 { animation-delay: 980ms; }
  .armed.play .tl .d15 { animation-delay: 1050ms; }
  .armed.play .tl .d16 { animation-delay: 1120ms; }
  .armed.play .tl .d17 { animation-delay: 1190ms; }
  .armed.play .tl .d18 { animation-delay: 1260ms; }
  .armed.play .tl .d19 { animation-delay: 1330ms; }
  .armed.play .tl .d20 { animation-delay: 1400ms; }
  .armed.play .tl .d21 { animation-delay: 1470ms; }
  .armed.play .tl .d22 { animation-delay: 1540ms; }
  .armed.play .tl .d23 { animation-delay: 1610ms; }
  .armed.play .tl .d24 { animation-delay: 1680ms; }

  /* The checks: a playhead crosses in seven seconds, and each mark arrives
     as it passes (pN is the moment it is N twentieths of the way across). */
  .armed:not(.play) .ill svg > :not(title):not(.base):not(.lt):not(.ls):not(.head) { opacity: 0; }
  .armed.play .ill svg > * { animation: cw-fade .4s ease-out both; }
  .armed.play .ill svg > .base, .armed.play .ill svg > .lt, .armed.play .ill svg > .ls { animation: none; }
  .armed.play .ill .bar, .armed.play .ill .grace { transform-box: fill-box; transform-origin: 0 50%; animation-name: cw-grow; }
  .armed.play .ill .grace { animation-duration: 1.26s; animation-timing-function: linear; }
  .armed.play .ill .bar.running { animation-duration: 2.8s; animation-timing-function: linear; }
  .armed.play .ill .bar.stuck { animation-name: cw-grow, cw-breathe; animation-duration: 3.36s, 2.6s; animation-timing-function: linear, ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
  .armed.play .ill .missed { animation-name: cw-fade, cw-breathe; animation-duration: .4s, 2.6s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
  .armed.play .ill .cost { transform-box: fill-box; transform-origin: 50% 100%; animation-name: cw-grow-up; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .armed.play .ill .alert { animation-name: cw-pop; animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .armed.play .ill .head { display: inline; animation: cw-sweep-w 7s linear both; }
  .armed.play .ill svg.narrow .head { animation-name: cw-sweep-n; }
  .armed.play .ill .p1 { animation-delay: 0.35s; }
  .armed.play .ill .p2 { animation-delay: 0.70s; }
  .armed.play .ill .p3 { animation-delay: 1.05s; }
  .armed.play .ill .p4 { animation-delay: 1.40s; }
  .armed.play .ill .p5 { animation-delay: 1.75s; }
  .armed.play .ill .p6 { animation-delay: 2.10s; }
  .armed.play .ill .p7 { animation-delay: 2.45s; }
  .armed.play .ill .p8 { animation-delay: 2.80s; }
  .armed.play .ill .p9 { animation-delay: 3.15s; }
  .armed.play .ill .p10 { animation-delay: 3.50s; }
  .armed.play .ill .p11 { animation-delay: 3.85s; }
  .armed.play .ill .p12 { animation-delay: 4.20s; }
  .armed.play .ill .p13 { animation-delay: 4.55s; }
  .armed.play .ill .p14 { animation-delay: 4.90s; }
  .armed.play .ill .p15 { animation-delay: 5.25s; }
  .armed.play .ill .p16 { animation-delay: 5.60s; }
  .armed.play .ill .p17 { animation-delay: 5.95s; }
  .armed.play .ill .p18 { animation-delay: 6.30s; }
  .armed.play .ill .p19 { animation-delay: 6.65s; }
  .armed.play .ill .p20 { animation-delay: 7.00s; }
  /* The failure pair, about three and a half seconds: cron logs the start
     and the cursor waits; the alert arrives in the channel; then the quiet
     note says what cron never did. */
  .pair.armed:not(.play) .term .l1, .pair.armed:not(.play) .term .l2, .pair.armed:not(.play) .chan .msg, .pair.armed:not(.play) .quiet { opacity: 0; }
  .pair.armed:not(.play) .arrow svg { clip-path: inset(0 100% 0 0); }
  .pair.armed.play .term .l1 { animation: cw-fade .3s .25s both; }
  .pair.armed.play .term .l2 { animation: cw-fade .35s .75s both; }
  .pair.armed.play .cursor { animation: cw-blink 1.05s 1.1s steps(1, end) 3 both; }
  .pair.armed.play .arrow svg { animation: cw-wipe .7s 1.25s cubic-bezier(.4, 0, .2, 1) both; }
  .pair.armed.play .chan .msg { animation: cw-arrive .6s 1.8s cubic-bezier(.2, .8, .2, 1) both; }
  .pair.armed.play .quiet { animation: cw-fade .9s 2.9s ease-out both; }
}
@keyframes cw-blink { 50% { opacity: 0; } }
@keyframes cw-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cw-arrive { from { opacity: 0; transform: translateY(10px); } }
@keyframes cw-fade { from { opacity: 0; } }
@keyframes cw-grow { from { opacity: 0; transform: scaleX(0); } }
@keyframes cw-drop { from { opacity: 0; transform: scaleY(0); } }
@keyframes cw-grow-up { from { opacity: 0; transform: scaleY(0); } }
@keyframes cw-pop { from { opacity: 0; transform: translateY(4px); } }
@keyframes cw-breathe { to { stroke-opacity: .3; } }
@keyframes cw-sweep-w { from { transform: translateX(-830px); } 96% { opacity: 1; } to { transform: none; opacity: 0; } }
@keyframes cw-sweep-n { from { transform: translateX(-360px); } 96% { opacity: 1; } to { transform: none; opacity: 0; } }

/* The six conditions, set as a glossary. */
.catches { list-style: none; margin: 0; padding: 0; }
.catches li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 11px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.catches li:first-child { border-top: 0; padding-top: 0; }
.catches li code { font: 500 13px/1.5 var(--mono); }
.catches li code.bad { color: var(--bad); } .catches li code.warn { color: var(--warn); } .catches li code.ok { color: var(--ok); }
.catches li span { color: var(--ink); font-size: 17px; }
.catches li span code { font-size: .82em; color: var(--ink); }

/* Not found and server error: one centred block, nothing else. */
.lost { display: grid; justify-items: center; text-align: center; padding: clamp(64px, 14vh, 150px) 0 clamp(72px, 16vh, 170px); }
.lost .code { font: 300 clamp(5rem, 13vw, 8.5rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--rule-2); }
.lost h1 { margin-top: 10px; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.015em; }
.lost .line { margin-top: 14px; color: var(--ink); max-width: 40ch; }
.lost .actions { justify-content: center; margin-top: 28px; }
.lost .prompt-btn { text-decoration: none; }
.lost .prompt-btn::before { display: none; }
.ghost-btn { display: inline-flex; align-items: center; font: 500 14px/1 var(--mono); color: var(--ink); text-decoration: none; border: 1px solid var(--rule-2); border-radius: 3px; padding: 11px 14px; }
.ghost-btn:hover { border-color: var(--ink); }
.lost .note { margin-top: 26px; font-size: 16px; color: var(--ink); max-width: 44ch; }
.lost .note a { color: var(--muted); }
.lost .note a:hover { color: var(--ink); }

/* The close. */
.end { padding: clamp(64px, 8vw, 96px) 0 24px; border-top: 1px solid var(--rule); }
.end p { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; max-width: 22ch; letter-spacing: -0.01em; }
.end .go { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 18px; max-width: none; }

/* Footer. */
footer { padding: 34px 0 52px; border-top: 1px solid var(--rule); margin-top: 40px; font-size: 16px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer button { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .14em; }
footer button:hover { color: var(--ink); }
/* The project's links on the left, the site's policies on the right, and
   the copyright on its own line beneath. On a phone the policies wrap below. */
footer .legal { margin-left: auto; }
footer .rights { flex-basis: 100%; }
@media (max-width: 700px) { footer .legal { margin-left: 0; } }

/* Terms, privacy and contact: a label down the left, the text beside it. */
.solo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 24px; }
.solo > .label { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 14px; }
.solo .updated { font: 400 13px/1.5 var(--mono); color: var(--muted); }
.solo .notice { border-left: 2px solid var(--rule-2); padding: 2px 0 2px 16px; }
.solo .notice.ok { border-left-color: var(--ok); }
.solo .notice.bad { border-left-color: var(--bad); }
.contact { display: grid; gap: 20px; max-width: 34rem; margin-top: 30px; }
.contact label { display: block; font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contact input, .contact textarea { display: block; width: 100%; font: 400 17px/1.5 var(--serif); color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 3px; padding: 9px 12px; margin: 0; }
.contact textarea { min-height: 11em; resize: vertical; }
.contact input:hover, .contact textarea:hover { border-color: var(--tick); }
.contact input:focus-visible, .contact textarea:focus-visible { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0; }
.contact button:hover { opacity: .85; }
@media (max-width: 900px) {
  .solo { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 24px; }
  .solo > .label { padding-top: 0; }
}

/* Docs */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0; }
/* The sidebar sticks 24px from the top, with the search entry fixed at its
   head and the list scrolling beneath it. Its height must end above the
   bottom of the window from wherever it starts: under the masthead at first,
   24px from the top once stuck. site.js measures that as --side-room; the
   fallback assumes the lower start, which fits in both. The list never
   hands its scroll on to the page, and ends with room to spare. */
.docs-side { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: var(--side-room, calc(100vh - 150px)); }
.docs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; scrollbar-width: thin; }
.docs-side p { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.docs-side ol, .docs-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.docs-side ol a, .docs-menu ol a { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; text-decoration: none; font-size: 17px; color: var(--body); }
.docs-side ol a span:first-child, .docs-menu ol a span:first-child { font: 400 11px/1 var(--mono); color: var(--muted); }
.docs-side ol a:hover, .docs-menu ol a:hover { color: var(--ink); }
.docs-side ol a.here, .docs-menu ol a.here { color: var(--ink); font-weight: 600; }
.docs-side .group p, .docs-menu .group p { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px 30px; }
.docs-side .group ol, .docs-menu .group ol { padding: 0 0 12px; }
.docs-menu { display: none; }

/* Search: the entry looks like a flat, empty field; the dialog is a sheet
   with a field on top and the results beneath. */
.search-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; margin: 0 0 20px; padding: 6px 8px 6px 10px; background: var(--sunk); border: 1px solid var(--rule-2); border-radius: 3px; font-size: 16px; line-height: 1.4; color: var(--muted); text-decoration: none; }
.search-open:hover { color: var(--ink); border-color: var(--tick); }
.search-open kbd { font: 400 11px/1.5 var(--mono); color: var(--muted); border: 1px solid var(--rule-2); border-radius: 2px; padding: 0 5px; }
.search-open kbd:empty { display: none; }
@media (hover: none) { .search-open kbd { display: none; } }
html.searching { overflow: hidden; }
dialog.search { width: min(640px, calc(100vw - 24px)); max-width: none; max-height: min(600px, calc(100dvh - 24px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--sheet); color: var(--ink); overflow: hidden; }
dialog.search[open] { display: flex; flex-direction: column; }
dialog.search::backdrop { background: rgba(9, 9, 11, .42); }
:root[data-theme="dark"] dialog.search::backdrop { background: rgba(0, 0, 0, .66); }
.search-box { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.search-field { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 12px; border-bottom: 1px solid var(--rule); }
.search-field:focus-within { border-bottom-color: var(--ink); }
.search-field input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 15px 16px; border: 0; background: none; font: 400 20px/1.3 var(--serif); color: var(--ink); -webkit-appearance: none; appearance: none; }
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus-visible { outline: none; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); border: 1px solid var(--rule-2); border-radius: 2px; padding: 5px 7px; }
.search-close:hover { color: var(--ink); border-color: var(--muted); }
.search-status { padding: 14px 16px; font-size: 16px; color: var(--muted); }
.search-status:empty { padding: 0; }
.search-results { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.search-results:empty { display: none; }
.search-results li { display: grid; gap: 1px; padding: 9px 16px 10px 14px; border-left: 2px solid transparent; cursor: pointer; }
.search-results li[aria-selected="true"] { background: var(--sunk); border-left-color: var(--ink); }
.sr-page { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sr-group { color: var(--faint); font-weight: 400; }
.sr-group::before { content: " / "; }
.sr-head { font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.sr-text { font-size: 15px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results mark { background: var(--rule); color: var(--ink); border-radius: 1px; }
:root[data-theme="dark"] .search-results mark { background: var(--rule-2); }
.search-hint { flex: none; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; padding: 8px 16px; border-top: 1px solid var(--rule); font: 400 11px/1.6 var(--mono); color: var(--muted); }
.search-hint kbd { font: inherit; border: 1px solid var(--rule-2); border-radius: 2px; padding: 0 4px; }
.search-hint kbd:not(:first-child) { margin-left: 10px; }

.doc { min-width: 0; max-width: 66ch; }
.doc > * + * { margin-top: 16px; }
.doc .label { font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.doc h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.18; letter-spacing: -0.014em; }
.doc h2 { font-size: 1.45rem; margin-top: 38px; scroll-margin-top: 24px; }
.doc h3 { font-size: 1.15rem; margin-top: 26px; scroll-margin-top: 24px; }
.doc .anchor { text-decoration: none; color: inherit; }
.doc h2 .anchor:hover::after, .doc h3 .anchor:hover::after { content: " #"; color: var(--muted); }
.doc p, .doc li { color: var(--ink); }
.doc p > code, .doc li > code, .doc td > code, .doc h2 code, .doc h3 code { font-size: .8em; background: var(--sunk); border: 1px solid var(--rule); padding: 1px 4px; border-radius: 2px; color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.2em; margin: 0; }
.doc li + li { margin-top: 5px; }
.doc .table { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc th { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc blockquote { margin: 0; border-left: 2px solid var(--rule-2); padding: 2px 16px; color: var(--muted); }
.doc hr { border: 0; border-top: 1px solid var(--rule); }
.code pre { background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 17px; }
.pager a { text-decoration: none; display: grid; color: var(--ink); }
.pager a:hover { text-decoration: underline; }
.pager a small { color: var(--muted); font-size: 12px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pager .next { text-align: right; margin-left: auto; }

@media (max-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 14px; row-gap: 14px; }
  .row > .span { margin-top: 18px; }
  .dsec { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dwide .legend { padding-left: 0; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .row > .label { padding-top: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .pair .side + .side figcaption { margin-top: 0; }
  .pair .term pre { padding-bottom: 14px; }
  .pair .msg { padding: 12px 12px 14px; }
  .pair .msg pre { grid-column: 1 / -1; margin-top: 10px; font-size: 12px; }
  .pair .term pre { font-size: 12px; }
  .pair .arrow { margin: 10px 0 14px; justify-items: start; }
  .pair .arrow svg { width: 56px; transform: rotate(74deg); }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .docs-side { display: none; }
  .docs-menu { display: block; margin-bottom: 22px; }
  .docs-menu summary { list-style: none; cursor: pointer; font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .docs-menu summary::-webkit-details-marker { display: none; }
  .docs-menu summary::after { content: " +"; }
  .docs-menu ol { padding: 10px 0; }
  .docs-menu .search-open { margin: 12px 0 2px; }
}
@media (max-width: 700px) {
  body { font-size: 18px; }
  .page { border-left: 0; border-right: 0; }
  .links { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: 16px; color: var(--ink); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu ol { position: absolute; left: 0; top: calc(100% + 10px); min-width: 170px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 8px; list-style: none; margin: 0; z-index: 5; display: grid; gap: 6px; }
  .menu a { color: var(--ink); text-decoration-color: var(--rule-2); }
  .top { padding-top: 20px; }
  .opening { padding: 36px 0 32px; }
  .install { display: flex; width: 100%; }
  .installs { display: grid; }
  .installs .install { justify-content: space-between; }
  .catches li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .row { padding: 56px 0; }
  .tlbox .tl.wide, .ill svg.wide { display: none; }
  .tlbox .tl.narrow, .ill svg.narrow { display: block; }
  .ill .illbox { padding: 18px 12px 12px; }
  .browser .chrome { grid-template-columns: auto minmax(0, 1fr); }
  .browser .chrome > span:last-child { display: none; }
  .browser .screen { padding: 0 14px 6px; }
  .dact .fake { display: none; }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures > div { padding-right: 8px; }
  .figures dd { font-size: 24px; }
  .figures dt { font-size: 10px; letter-spacing: .04em; }
  .board .hide-sm { display: none; }
  .board thead { display: none; }
  .board tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .board tbody tr:last-child { border-bottom: 0; }
  .board td { border: 0; padding: 0; }
  .board td.job { min-width: 0; }
  .board td.last { grid-column: 1 / -1; margin-top: 4px; white-space: normal; }
  .board td.last .sub { display: inline; margin-left: 8px; }
  dialog.search { margin-top: 12px; max-height: calc(100dvh - 24px); }
  .search-hint { display: none; }
}