/* Generated by cmd/sitegen in the flockdeck repository. Do not edit here.
 *
 * The palette is design/color.css, the one the application's icon is drawn in.
 * That is not decoration: green, amber and red mean the same three things here
 * that the status dots mean in a pane header — working, waiting on you, gone —
 * and the page uses them for nothing else. The accent is the deepened terminal
 * cyan.
 *
 * The page commits to the dark ground the application runs on, so there is no
 * light variant; every colour is still stated outright rather than inherited.
 */

/* The fonts are the site's own files, the ones the phone client serves
   (flockdeck-remote's web/app/fonts), rather than a font service's, which
   would be told of every visit. Both are SIL OFL 1.1, and the licences are
   beside the files. Archivo is one variable font covering every weight the
   page sets it in, 400 to 800. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.8f704806db.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.83c005d49d.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --surface:   #0F1418;
  --raised:    #161C21;
  --sunken:    #0A0E11;

  --edge-soft: #1F272D;
  --edge:      #2C363D;
  --edge-hard: #5D6B72;

  --text:      #E6EDF1;
  --muted:     #93A1A9;

  --accent:        #4FD1DB;
  --accent-strong: #7BE0E8;
  --accent-subtle: #0E2B2E;
  --accent-edge:   #1F4E53;
  --on-accent:     #0F1418;

  --working: #64C97F;
  --waiting: #E2B341;
  --exited:  #F0776A;
  --idle:    #738087;

  --radius: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 24px 60px -28px rgba(0,0,0,.9);

  --display: Archivo, "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, sans-serif;
  --body:    Archivo, "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; }

/* Anything given a display of its own below would otherwise stay on screen
   with the hidden attribute set, which is how the install tabs showed, and
   did nothing, with scripting off. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A single wash behind the fold, in the accent, so the ground is not flat
   without anything on the page having to be loud about it. It scrolls away
   with the fold rather than being fixed to the window, which would tint the
   top of every section in turn and, on a phone, be repainted whenever the
   browser's toolbar slides in or out. */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  /* Not a pixel wider than the page: an absolute layer that pokes out at the
     sides widens what a phone lays the page out at, and it zooms out to fit. */
  inset: -20vh 0 auto 0;
  height: 70vh;
  background:
    radial-gradient(60% 55% at 22% 0%, rgba(79,209,219,.13), transparent 70%),
    radial-gradient(45% 45% at 82% 8%, rgba(226,179,65,.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 24px; position: relative; z-index: 1; }

a { color: var(--accent); text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The skip link, the first thing a Tab press reaches: above the top of the
   page until it has the focus, then over the header's corner, where it is
   seen and Enter takes it. */
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 8px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--on-accent); }

/* ------------------------------------------------------------------ top */

.top {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  max-width: 1080px; margin: 0 auto;
  padding: 22px 24px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -.015em; color: var(--text);
}
.wordmark svg { display: block; }
/* Away from the home page the wordmark is the way back to it. */
a.wordmark { text-decoration: none; }
/* Both navs wrap rather than run off the side of a phone, where the body's
   overflow-x: hidden would cut the last links off without a scrollbar. */
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; }
.top nav a, .foot nav a { white-space: nowrap; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--text); }

/* ----------------------------------------------------------------- hero */

.hero { padding-block: 40px 12px; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-subtle); border: 1px solid var(--accent-edge);
  border-radius: 999px; padding: 5px 12px; margin: 0 0 22px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 20px;
  max-width: 15ch;
  text-wrap: balance;
}
/* The accent, not the amber: amber is what a pane goes when it is blocked on
   you, and spending it on a headline would make the one colour the interface
   raises its voice with mean nothing in particular. */
.hero h1 em { font-style: normal; color: var(--accent); }

.lede {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--muted); max-width: 60ch; margin: 0 0 30px;
}

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

.button {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  text-decoration: none; border-radius: 8px; padding: 12px 20px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  transition: transform .12s ease, background .12s ease;
}
.button:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); transform: translateY(-1px); }
.button.ghost { background: transparent; color: var(--text); border-color: var(--edge-hard); }
.button.ghost:hover { background: var(--raised); border-color: var(--accent); color: var(--text); }

.cta-note { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------- the window mock */

.deck {
  margin: 44px 0 8px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.deck-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--raised);
  border-bottom: 1px solid var(--edge-soft);
}
.deck-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  padding: 5px 11px; border-radius: 6px; border: 1px solid transparent;
  white-space: nowrap;
}
.deck-tab.on { background: var(--sunken); border-color: var(--edge); color: var(--text); }
.deck-tally { margin-left: auto; display: flex; gap: 12px; font-family: var(--mono); font-size: 12px; }
.deck-tally span { display: inline-flex; align-items: center; gap: 5px; }

/* The status glyphs are the application's: ● in a state's colour, and ▲ where
   an agent is waiting, as the app marks a tab and its tally. */
.dot { font-size: 10px; line-height: 1; color: var(--idle); }
.dot.working { color: var(--working); }
.dot.waiting { color: var(--waiting); }
.dot.exited  { color: var(--exited); }

.deck-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge-soft); }
.pane { background: var(--sunken); min-height: 172px; display: flex; flex-direction: column; }
.pane.wide { grid-column: 1 / -1; min-height: 116px; }

.pane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-bottom: 1px solid var(--edge-soft);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.pane-head .name { color: var(--text); }
.pane-head .branch { margin-left: auto; color: var(--idle); }

/* A pane blocked on the user is the one thing the interface raises its voice
   about, so it is the one thing here drawn in amber. */
.pane.is-waiting { box-shadow: inset 0 0 0 1px var(--waiting); }
.pane.is-waiting .pane-head { color: var(--waiting); background: rgba(226,179,65,.07); }
.pane.is-waiting .pane-head .name { color: var(--waiting); }

.term {
  flex: 1; margin: 0; padding: 10px 12px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  overflow: hidden;
}
.term .u { color: var(--accent); }
.term .ok { color: var(--working); }
.term .warn { color: var(--waiting); }
.term .dim { color: var(--idle); }
.term b { color: var(--text); font-weight: 500; }

.caret {
  display: inline-block; width: 7px; height: 13px;
  background: var(--accent); vertical-align: -2px;
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.deck-cap {
  font-family: var(--mono); font-size: 12px; color: var(--idle);
  text-align: center; margin: 14px 0 0;
}

/* --------------------------------------------------------------- legend */

.legend {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 54px 0 0; padding: 18px 20px;
  border: 1px solid var(--edge-soft); border-radius: var(--radius);
  background: var(--raised);
}
.legend div { display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; }
.legend b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.legend .t { color: var(--muted); }

/* -------------------------------------------------------------- sections */

section { position: relative; z-index: 1; }

.band { padding-block: 78px; }
.band + .band { padding-top: 0; }

h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -.025em; margin: 0 0 14px; text-wrap: balance;
}
.band > p { color: var(--muted); max-width: 62ch; margin: 0 0 26px; font-size: 16.5px; }
.band > p strong { color: var(--text); font-weight: 600; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}

/* ------------------------------------------------------------------ grid */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }

.card {
  padding: 22px; border-radius: var(--radius);
  background: var(--raised); border: 1px solid var(--edge-soft);
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--edge-hard); transform: translateY(-2px); }
.card h3 {
  font-family: var(--display); font-size: 16.5px; font-weight: 650;
  letter-spacing: -.012em; margin: 0 0 8px;
}
.card p { margin: 0; color: var(--muted); font-size: 14.6px; line-height: 1.62; }
.card .g { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 11px; }
/* Something announced rather than shipped: set apart in the accent's tint, so
   it is not read as one of the features beside it. */
.card.soon { margin-top: 22px; background: var(--accent-subtle); border-color: var(--accent-edge); }
.card.soon .g { color: var(--accent-strong); }

/* ------------------------------------------------------------- fan-out */

.fan { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.2fr); gap: 20px; align-items: center; }
.fan-plan, .fan-out { border: 1px solid var(--edge-soft); border-radius: var(--radius); background: var(--raised); padding: 16px 18px; }
.fan-plan ol { margin: 0; padding-left: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 2; }
.fan-arrow { font-size: 26px; color: var(--accent); text-align: center; }
.fan-out ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fan-out li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: 6px; padding: 8px 11px;
}
.fan-out li .br { margin-left: auto; color: var(--idle); }

/* ---------------------------------------------------------------- remote */

/* The relay drawn the way fan out is: boxes in the raised surface, arrows in
   the accent. The desktop's arrow points at the relay because that is the
   direction the connection is made, which is the whole reason no port has to
   be opened. The status glyphs keep their meanings; nothing here is amber
   except a pane that is waiting. */
.relay {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,.9fr) auto minmax(0,1fr);
  gap: 14px; align-items: center; margin: 0 0 28px;
}
.relay-node {
  border: 1px solid var(--edge-soft); border-radius: var(--radius);
  background: var(--raised); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.relay-node.hub { border-color: var(--accent-edge); background: var(--accent-subtle); }
.relay-node .g { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.relay-node .t { font-size: 13.5px; color: var(--muted); }
.relay-tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: 6px; padding: 8px 11px;
}
/* A status glyph and its word wrap as one, so a narrow box never strands a
   dot at the end of one line and its label at the start of the next. */
.relay-tally > span { white-space: nowrap; }
.relay-link { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.relay-link .arrow { font-size: 24px; line-height: 1; color: var(--accent); }
.relay-link .t { font-family: var(--mono); font-size: 11px; color: var(--idle); white-space: nowrap; }
#remote .grid { margin-bottom: 26px; }
/* Four cards: two rows of two rather than three and one left over. */
@media (min-width: 661px) {
  #remote .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The phone beside the four cards: a capture taken on a phone is tall and
   narrow, and on a row of its own it left most of the band empty. Under the
   cards on a small screen, no wider than a phone would show it. */
.remote-phone { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; margin-bottom: 26px; }
#remote .remote-phone .grid { margin-bottom: 0; }
.figure.phone img { border-radius: 24px; }
@media (max-width: 880px) {
  .remote-phone { grid-template-columns: 1fr; }
  .figure.phone { width: 100%; max-width: 300px; margin: 0 auto; }
}

/* ------------------------------------------------------------------ shot */

.caption { font-family: var(--mono); font-size: 12px; color: var(--idle); text-align: center; margin: 14px 0 0; }

/* A screenshot set into a section of its own: under the fan-out diagram, and
   two to a row where a pair of panels sit side by side. */
.figure { margin: 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fan + .figure { margin-top: 34px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
/* Enterprise's card beside the plan as Settings shows it: the row keeps
   the space the card had above it, and the card its tint. */
.pair.plan { margin-top: 22px; }
.pair.plan .card.soon { margin-top: 0; }
@media (max-width: 880px) {
  .pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- install */

pre {
  position: relative;
  margin: 0 0 16px; padding: 16px 18px; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
}
pre code { font-family: var(--mono); font-size: 13px; color: var(--text); }
pre code .c { color: var(--idle); }
/* A path such as %LOCALAPPDATA%\Programs\flockdeck is one unbreakable word,
   wider than a 320px phone; the body clips sideways overflow, so without a
   break point its end would be cut off rather than wrap. */
p code, li code {
  font-family: var(--mono); font-size: .88em;
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: 4px; padding: 1px 6px;
  overflow-wrap: anywhere;
}
kbd {
  font-family: var(--mono); font-size: .84em;
  background: var(--raised); border: 1px solid var(--edge-hard);
  border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; color: var(--text);
}
.aside { font-size: 14.5px; color: var(--idle); border-left: 2px solid var(--edge); padding-left: 14px; }

/* ---------------------------------------------------------- works with */

.works {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; padding: 0; margin: 26px 0 0;
}
.works li {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  border: 1px solid var(--edge-soft); background: var(--raised);
  border-radius: 999px; padding: 5px 12px;
}
.works .works-label {
  border: 0; background: none; padding-left: 0;
  color: var(--idle); text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
}

/* -------------------------------------------------------- install tabs */

.os-tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.os-tabs button {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 8px; padding: 8px 14px;
}
.os-tabs button:hover { color: var(--text); border-color: var(--edge-hard); }
.os-tabs button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
/* High Contrast replaces the accent fill with the plain ground, which left the
   chosen tab looking like the other one; the system highlight pair survives. */
@media (forced-colors: active) {
  .os-tabs button[aria-selected="true"] { color: HighlightText; background: Highlight; border-color: Highlight; }
}
.os > p { color: var(--muted); margin: 0 0 12px; font-size: 16.5px; }
.has-os-tabs .os-label { display: none; }

/* The archives under each installer: the site's outline buttons, a size down
   so that a system's set sits on one row at a desk and wraps on a phone. */
.downloads {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0; margin: 0 0 22px;
}
.downloads .button { padding: 9px 16px; font-size: 14.5px; }

/* Room for the button. On a narrow screen a long command would still scroll
   underneath it, so there the commands wrap instead; what is copied is the
   text, not the lines it was drawn on. */
pre.has-copy { padding-right: 78px; }
@media (max-width: 660px) {
  pre.has-copy code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
.copy {
  position: absolute; top: 9px; right: 9px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--raised); border: 1px solid var(--edge); border-radius: 6px;
  padding: 4px 9px; cursor: pointer; opacity: .85;
}
.copy:hover { color: var(--text); border-color: var(--accent); opacity: 1; }

/* ------------------------------------------------------------------- faq */

.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details {
  border: 1px solid var(--edge-soft); border-radius: var(--radius);
  background: var(--raised); padding: 0 20px;
}
.faq details[open] { border-color: var(--edge); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--display); font-weight: 650; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
/* The marker is drawn, not read: without the empty alternative after the
   slash, a screen reader announces every question as "… plus". The plain
   form first is for a browser that does not know the alternative syntax. */
.faq summary::after { content: "+"; content: "+" / ""; font-family: var(--mono); color: var(--accent); font-size: 18px; }
.faq details[open] summary::after { content: "–"; content: "–" / ""; }
/* The same measure as the band's paragraphs, about 80 characters a line:
   uncapped, an answer ran to about 110 across the 760px card. */
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 62ch; }

.foot-note { font-size: 13px; }

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--edge-soft); margin-top: 40px;
  padding: 30px 24px 56px; position: relative; z-index: 1;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; padding: 0; }
.foot p { margin: 0; color: var(--idle); font-size: 14px; }
.foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
/* The copyright, and the way to the privacy policy, the terms and the
   licences: a quieter row of its own under the rest, on every page. */
.foot-legal {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding-top: 18px; border-top: 1px solid var(--edge-soft);
}
.foot .foot-legal p, .foot .foot-legal nav { font-size: 13px; }
.foot nav a[aria-current="page"] { color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------- documents */

/* The privacy policy, the terms and the licences: long prose, set to be read
   rather than scanned. The measure stays near 70 characters, and the
   contents sit beside it where there is room, so a section can be found
   without scrolling through the rest; on a phone the page is simply the
   prose. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 28px 64px; }
.doc-toc { display: none; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 210px minmax(0, 1fr); }
  .doc-toc {
    display: block; position: sticky; top: 28px; align-self: start;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
}
.doc-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--edge-soft);
}
.doc-toc a {
  display: block; padding: 5px 0 5px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4;
}
.doc-toc a:hover { color: var(--text); border-left-color: var(--edge-hard); }

.prose { max-width: 70ch; min-width: 0; overflow-wrap: break-word; }
.prose h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em;
  margin: 12px 0 14px; text-wrap: balance;
}
/* The line under a policy's title is the date it last changed. */
.prose h1 + p { font-family: var(--mono); font-size: 12.5px; color: var(--idle); margin: 0 0 36px; }
.prose h1 + p em { font-style: normal; }
.prose h1 + p.doc-lede { font-family: var(--body); font-size: clamp(1.05rem, 1.6vw, 1.15rem); color: var(--muted); }
.prose h1 + p.doc-lede em { font-style: italic; }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--edge-soft);
}
.prose h3 {
  font-family: var(--display); font-weight: 650; font-size: 1.15rem;
  letter-spacing: -.012em; margin: 36px 0 10px;
}
.prose h4 {
  font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--text);
  margin: 30px 0 8px; overflow-wrap: anywhere;
}
.prose :is(h2, h3) { scroll-margin-top: 20px; }
/* A section arrived at by a link to it, #cookies say, is marked. */
.prose :is(h2, h3):target { color: var(--accent-strong); }
.prose p, .prose li { color: var(--muted); font-size: 16.5px; line-height: 1.72; }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.25em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--idle); }
.prose hr { border: 0; border-top: 1px solid var(--edge-soft); margin: 32px 0; }

/* A licence text, folded under the component it belongs to, and Flockdeck's
   own, which is short enough to show. They wrap rather than scroll sideways:
   the lines are prose that happens to be set in a fixed width. */
.licence-text {
  margin: 10px 0 18px;
  border: 1px solid var(--edge-soft); border-radius: var(--radius); background: var(--raised);
}
.licence-text summary {
  cursor: pointer; list-style: none; padding: 9px 14px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; color: var(--accent);
}
.licence-text summary::-webkit-details-marker { display: none; }
.licence-text summary::before { content: "+"; content: "+" / ""; width: 1ch; }
.licence-text[open] summary::before { content: "–"; content: "–" / ""; }
.licence-text pre {
  margin: 0; border: 0; border-top: 1px solid var(--edge-soft);
  border-radius: 0 0 var(--radius) var(--radius); max-height: 28rem; overflow: auto;
}
.prose pre.licence { margin: 0 0 18px; }
.licence-text pre code, .prose pre.licence code {
  font-size: 12px; line-height: 1.6; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 880px) {
  .fan { grid-template-columns: 1fr; }
  .fan-arrow { transform: rotate(90deg); }
  .relay { grid-template-columns: 1fr; }
  .relay-link { flex-direction: row; gap: 10px; }
  .relay-link .arrow { transform: rotate(90deg); }
}
@media (max-width: 660px) {
  .deck-panes { grid-template-columns: 1fr; }
  .pane { min-height: 140px; }
  .deck-tally { display: none; }
  .band { padding-block: 56px; }
  .top nav, .foot nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}