/* Generated by cmd/sitegen in the flockdeck repository. Do not edit here.
 *
 * The values are design/tokens.css, under the names this sheet has always
 * used: one cool ramp, hairline rules, small corners, and nothing saturated
 * but the accent and the states of agents. Cyan is the mark's own colour and
 * the one accent; it is also what working looks like. Amber is an agent
 * waiting on you and red one that failed, and the page spends neither on
 * anything else. Green is a verdict, a test that passed, never a state.
 *
 * The page is dark always, as the application and the docs are.
 */

/* The fonts are the site's own files 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. Each is one variable font: IBM Plex Sans sets the words,
   JetBrains Mono anything measured or machine-made, and its subset carries
   the arrows and shapes the page types, so none is left to whatever the
   operating system would substitute. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.7cccda0238.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.10448419a9.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* This block is shared with the docs site, character for character: docs.css
   in cmd/docgen holds the same one, and a test there fails when they differ.
   Change both together. --exited is the failure red, the name it has on
   every surface; an agent that has merely exited is --ended. */
:root {
  color-scheme: dark;

  --surface:   #0F1418;
  --raised:    #161C21;
  --sunken:    #0A0E11;
  --overlay:   #1B2329;
  --hover:     #1D252B;
  --active:    #252F36;

  --edge-soft: #1F272D;
  --edge:      #2C363D;
  --edge-hard: #6A7982;

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

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

  --working: #4FD1DB;
  --waiting: #E2B341;
  --waiting-subtle: #2A2110;
  --waiting-edge:   #4E3D18;
  --exited:  #F0776A;
  --exited-subtle:  #2C1512;
  --exited-edge:    #58251F;
  --idle:    #93A1A9;
  --ended:   #738087;
  --ok:      #64C97F;

  --term-fg: #D7DFE4;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --shadow: 0 20px 56px -16px rgb(0 0 0 / .75);

  --display: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  --dur-1: 80ms;
  --dur-4: 400ms;
  --pulse: 1.6s;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

* { 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; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Text is set in rem, so a larger default text size in the browser scales the
   whole page; 17px is the body size, a little above the 16px it was. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 70rem; margin: 0 auto; padding-inline: 1.5rem; }

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

/* One ring, the same on everything that takes the focus. */
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* 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: 12px; z-index: 10;
  padding: 0.625rem 1rem; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; color: var(--on-accent); }

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

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem;
  max-width: 70rem; min-height: 4rem; margin: 0 auto;
  padding: 0 1.5rem;
}
.wordmark {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.01em; 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; }
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 0.25rem; font-size: .9375rem; }
.top nav a, .foot nav a { white-space: nowrap; }
.top nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.625rem;
  color: var(--muted); text-decoration: none;
}
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text); }
.top nav a, .foot nav a { transition: color var(--dur-1) linear, transform 100ms ease-out; }
.top nav a:active, .foot nav a:active { transform: scale(.97); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

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

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem 4rem;
  padding-block: 3.5rem 0.5rem; align-items: start;
}
@media (min-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-top: 4.5rem; }
}

/* The line over the headline: a branch, drawn, and what it is for. */
.kicker {
  display: flex; align-items: center; gap: 0.625rem;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; line-height: 1.5;
  color: var(--muted); margin: 0 0 1.25rem;
}
.kicker svg { flex: none; display: block; }

.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  margin: 0 0 1.5rem;
  text-wrap: balance; overflow-wrap: break-word;
}
/* 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: 1.1875rem; line-height: 1.55;
  color: var(--text); max-width: 58ch; margin: 0 0 1rem;
  text-wrap: pretty;
}
.lede.second { font-size: 1rem; color: var(--muted); margin-bottom: 2rem; }

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 0.75rem; }

/* The filled button is the one primary action; .ghost is every other. A
   button answers the pointer with its colour and a press with one pixel, and
   never lifts. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.25rem;
  font-family: var(--display); font-weight: 600; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; text-align: center; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear, color var(--dur-1) linear, transform 100ms ease-out;
}
.button:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.button:active { transform: scale(.97); }
.button.ghost { background: transparent; color: var(--text); border-color: var(--edge-hard); }
.button.ghost:hover { background: var(--hover); border-color: var(--edge-hard); color: var(--text); }
.button.ghost:active { background: var(--active); }

.cta-note { font-family: var(--mono); font-size: .8125rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------- the lane figure */

/* What the headline says, drawn: three agents in one checkout write to the
   same file, and three worktrees give each its own. It is the page's one
   drawn idea, so it is the only thing outside the application's own
   parts that takes the accent for more than a word: the isolated lanes are
   accent, the shared checkout is neutral. Nothing in it is amber or red,
   because nothing in it is a state the application reports. */
.lanes { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.lanes-pane {
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--raised); padding: 1rem 1.25rem 1.25rem;
}
.lanes-pane.iso { border-color: var(--accent-edge); background: var(--accent-subtle); }
.lanes-title {
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; line-height: 1.4;
  color: var(--muted); margin: 0 0 1rem;
}
.iso .lanes-title { color: var(--text); }
.lanes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.lanes li { display: grid; grid-template-columns: min(7.25rem, 38%) minmax(0, 1fr) auto; align-items: center; gap: 0 0.625rem; }
.lanes .who { font-family: var(--mono); font-size: .8125rem; color: var(--text); }
.lanes .wire { display: block; height: 0; border-top: 2px solid var(--edge-hard); position: relative; }
.iso .wire { border-top-color: var(--accent); }
.iso .wire::after {
  content: ""; position: absolute; right: -1px; top: -6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}
.lanes .where { font-family: var(--mono); font-size: .8125rem; color: var(--muted); text-align: right; padding-left: 0.625rem; overflow-wrap: anywhere; }
.lanes .where b { font-weight: 500; color: var(--text); }
/* In the shared checkout the three wires meet at one bar and one file. */
.shared .lanes-merge { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.75rem; }
.shared ul { border-right: 2px solid var(--edge-hard); padding-block: 2px; }
.shared li { grid-template-columns: min(7.25rem, 38%) minmax(0, 1fr); }
.shared li .wire { margin-right: 0; }
.shared .file {
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: var(--text);
  border: 1px solid var(--edge-hard); border-radius: var(--radius-xs); padding: 0.375rem 0.625rem;
  background: var(--sunken); overflow-wrap: anywhere; max-width: 9.5rem;
}
.lanes-note { margin: 1rem 0 0; font-size: .9375rem; color: var(--muted); }
.iso .lanes-note { color: var(--text); }
@media (max-width: 520px) {
  .lanes li { grid-template-columns: min(6.25rem, 38%) minmax(0, 1fr); }
  .lanes .where { grid-column: 1 / -1; text-align: left; padding: 0.25rem 0 0; }
  .shared li { grid-template-columns: min(6.25rem, 38%) minmax(0, 1fr); }
  .shared .lanes-merge { grid-template-columns: 1fr; gap: 0.75rem; }
  .shared ul { border-right: 0; border-bottom: 2px solid var(--edge-hard); padding-bottom: 0.875rem; }
  .shared .file { max-width: none; justify-self: start; }
}

/* The works-with line: names, set apart from the pills the status marks use. */
.works {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; padding: 0; margin: 1.75rem 0 0;
}
.works li {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.4; color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: var(--radius-xs); padding: 2px 0.5rem;
}
.works .works-label { border: 0; padding-left: 0; }
.hero > .works { grid-column: 1 / -1; margin-top: 0; }

/* ------------------------------------------------------- the status marks */

/* The application's own marks, drawn rather than typed, so they are the same
   shapes on every system: a circle is a live process, a triangle needs you,
   a square has ended, and a filled one has something happening. The element
   still holds the glyph the page's script writes into it; it is given no
   size, and the shape is drawn on the element instead. Only working moves. */
.dot {
  display: inline-block; flex: none; width: 8px; height: 8px;
  font-size: 0; line-height: 0; overflow: hidden; vertical-align: 1px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--idle);
}
.dot.working {
  background: var(--working); box-shadow: none;
  animation: pulse var(--pulse) var(--ease-in-out) infinite;
}
.dot.waiting {
  width: 10px; height: 10px; border-radius: 0; box-shadow: none;
  background: var(--waiting); clip-path: polygon(50% 6%, 100% 94%, 0 94%);
}
.dot.failed { border-radius: 1.5px; box-shadow: none; background: var(--exited); }
.dot.exited { border-radius: 1.5px; box-shadow: inset 0 0 0 1.5px var(--ended); }
@keyframes pulse { 50% { opacity: .4; } }

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

/* The desktop application's own parts at their own sizes: a 40px bar of
   28px tabs, panes 4px apart with 30px headers, names in the sans and
   everything measured in the mono. It arrives once, and then holds still. */
.deck {
  margin: 3.5rem 0 0.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: rise var(--dur-4) var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.deck-bar {
  display: flex; align-items: center; gap: 0.25rem;
  min-height: 2.5rem; padding: 0.25rem 0.75rem;
  background: var(--raised);
  border-bottom: 1px solid var(--edge-soft);
}
.deck-tab {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 1.75rem; padding: 0 0.625rem;
  font-size: .8125rem; line-height: 1.4; color: var(--muted);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  white-space: nowrap;
}
.deck-tab.on { background: var(--surface); border-color: var(--edge); color: var(--text); }
.deck-tally {
  margin-left: auto; display: flex; gap: 1rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; line-height: 1.4;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.deck-tally span { display: inline-flex; align-items: center; gap: 0.375rem; }
.deck-tally b { font-weight: 500; }
.deck-tally span:has(> .dot.waiting) { color: var(--waiting); }

.deck-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; background: var(--surface); }
.pane {
  min-width: 0; min-height: 172px; display: flex; flex-direction: column;
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  background: var(--sunken); overflow: hidden;
}
.pane.wide { grid-column: 1 / -1; min-height: 116px; }
/* Where the keyboard is: the border says so, and says nothing else. */
.pane.focused { border-color: var(--accent); }

.pane-head {
  display: flex; align-items: center; gap: 0.375rem;
  min-height: 1.875rem; padding: 0 0.5rem;
  background: var(--raised); border-bottom: 1px solid var(--edge-soft);
  font-family: var(--mono); font-size: .75rem; line-height: 1.4;
  color: var(--muted); white-space: nowrap; overflow: hidden;
}
.pane-head .name { font-family: var(--body); font-size: .75rem; font-weight: 600; color: var(--text); }
.pane-head .branch { overflow: hidden; text-overflow: ellipsis; }

/* A pane blocked on the user is the one thing the interface raises its voice
   about: its header takes the amber as a tint and a rule along the top, as
   the application's does, and the text on it stays the text's own colour. */
.pane.is-waiting .pane-head {
  background: color-mix(in srgb, var(--waiting) 14%, var(--raised));
  box-shadow: inset 0 2px 0 var(--waiting);
}

.term {
  flex: 1; margin: 0; padding: 0.5rem 0.75rem 0.75rem;
  font-family: var(--mono); font-size: .75rem; line-height: 1.6;
  font-variant-ligatures: none;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  border: 0; border-radius: 0; background: none;
  overflow: hidden;
}
.term .u { color: var(--accent); }
.term .ok { color: var(--ok); }
.term .warn { color: var(--waiting); }
.term .dim { color: var(--faint); }
.term b { color: var(--term-fg); 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; } }

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

/* A key to the marks, as a line under the window rather than a box of its
   own: it explains the picture above it and says nothing the picture does
   not. */
.legend {
  display: flex; flex-wrap: wrap; gap: 0.25rem 2rem;
  margin: 2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--edge-soft);
}
.legend div { display: flex; align-items: center; gap: 0.5rem; font-size: .9375rem; }
.legend b { font-family: var(--mono); font-size: .8125rem; font-weight: 500; }
.legend .t { color: var(--muted); }

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

.band { padding-block: 6.5rem; }
.band + .band { padding-top: 0; }

h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.18;
  letter-spacing: -.022em; margin: 0 0 1.25rem; text-wrap: balance;
}
.band > p { color: var(--muted); max-width: 66ch; margin: 0 0 1.5rem; }
.band > p strong { color: var(--text); font-weight: 600; }

/* The one small label left: the heading of a long page's contents. */
.eyebrow {
  font-family: var(--body); font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem;
}

/* The why: the argument is the section, so it is set larger than the
   paragraphs of the bands after it, with the claim first and the second
   benefit under it. */
#why > p:first-of-type { font-size: 1.25rem; line-height: 1.55; color: var(--text); max-width: 56ch; }

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

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.875rem), 1fr)); gap: 1rem; }

/* A card is a unit, not a control: it does nothing under the pointer. */
.card {
  padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--raised); border: 1px solid var(--edge-soft);
}
.card h3 {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em; margin: 0 0 0.5rem;
}
.card p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.card .g { font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--muted); display: block; margin-bottom: 0.75rem; }
/* 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: 1.5rem; background: var(--accent-subtle); border-color: var(--accent-edge); }

/* The features. Two lead the list, because they are the point: a worktree for
   each agent, and a team made from a plan. The rest are open columns on a
   hairline rather than fourteen boxes, so the list reads as one list. */
#what .grid { gap: 0 2.5rem; }
#what .card {
  background: none; border: 0; border-top: 1px solid var(--edge);
  border-radius: 0; padding: 1.25rem 0 1.75rem;
}
#what .card.lead {
  grid-column: 1 / -1; background: var(--raised); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem;
  border-top: 2px solid var(--accent);
}
#what .card.lead h3 { font-size: 1.375rem; letter-spacing: -.015em; }
#what .card.lead p { font-size: 1.0625rem; max-width: 62ch; }
@media (min-width: 880px) {
  #what .card.lead { grid-column: span 1; margin-bottom: 1.5rem; }
  #what .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #what .card.lead { grid-column: span 3 / span 3; display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 2rem; align-items: start; }
  #what .card.lead .g { grid-column: 1; }
  #what .card.lead h3 { grid-column: 1; margin: 0; }
  #what .card.lead p { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 560px) and (max-width: 879px) {
  #what .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* The relay drawn as 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 marks 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: 1rem; align-items: center; margin: 0 0 2rem;
}
.relay-node { min-width: 0; overflow-wrap: anywhere;
  border: 1px solid var(--edge-soft); border-radius: var(--radius);
  background: var(--raised); padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.relay-node.hub { border-color: var(--accent-edge); background: var(--accent-subtle); }
.relay-node .g { font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--muted); }
.relay-node .t { font-size: .9375rem; color: var(--muted); }
.relay-tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  font-family: var(--mono); font-size: .75rem; color: var(--text);
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
}
/* A status mark and its word wrap as one, so a narrow box never strands a
   mark 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-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.relay-link .t { font-family: var(--mono); font-size: .75rem; color: var(--muted); white-space: nowrap; }
#remote .grid { margin-bottom: 1.5rem; }
/* 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) 17.5rem; gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
#remote .remote-phone .grid { margin-bottom: 0; }
@media (max-width: 880px) {
  .remote-phone { grid-template-columns: minmax(0, 1fr); }
  .figure.phone { width: 100%; max-width: 18.75rem; margin: 0 auto; }
}

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

.caption { font-family: var(--mono); font-size: .8125rem; color: var(--muted); text-align: center; margin: 1rem 0 0; }

/* A screenshot set into a section of its own: 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);
}
/* The recording is a 6.8 MB GIF, so the page shows a still of it and does not
   fetch the GIF until the visitor opens the details: a lazy image inside a
   closed details is never rendered, so the browser never asks for it. No
   script is needed. The summary stays on screen when the details is open, with
   its label turned to "Hide the recording", so the keyboard keeps its focus
   and the loop can be put away again. A GIF cannot honour
   prefers-reduced-motion, which is why it stays behind a press and is never
   started by the page itself. */
.play summary { list-style: none; cursor: pointer; position: relative; display: block; }
.play summary::-webkit-details-marker { display: none; }
.play-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.5rem 1.25rem; border-radius: 1.5rem; text-align: center; width: max-content; max-width: calc(100% - 1.5rem);
  background: var(--raised); border: 1px solid var(--edge-hard); box-shadow: var(--shadow);
  font-family: var(--display); font-weight: 600; font-size: .9375rem; color: var(--text);
}
.play-label .t { font-family: var(--mono); font-weight: 400; font-size: .75rem; color: var(--muted); margin-left: .4em; }
.play summary:hover .play-label { border-color: var(--accent); }
/* The label is centred by a transform, so the press keeps the translate. */
.play summary:active .play-label { transform: translate(-50%, -50%) scale(.97); }
.play-label { transition: transform 100ms ease-out, border-color var(--dur-1) linear; }
.when-open { display: none; }
.play[open] .when-open { display: inline; }
.play[open] .when-closed { display: none; }
/* Open, the still goes and the label becomes a plain bar over the recording. */
.play[open] summary > img { display: none; }
.play[open] .play-label { position: static; transform: none; display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 1rem; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; 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: 1.5rem; }
.pair.plan .card.soon { margin-top: 0; }
@media (max-width: 880px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
}

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

pre {
  position: relative;
  margin: 0 0 1rem; padding: 0.875rem 1rem; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
}
pre code { font-family: var(--mono); font-size: .8125rem; line-height: 1.6; font-variant-ligatures: none; color: var(--text); }
pre code .c { color: var(--muted); }
/* 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; font-variant-ligatures: none;
  background: var(--sunken); border: 1px solid var(--edge-soft);
  border-radius: var(--radius-xs); padding: 1px 0.375rem;
  overflow-wrap: anywhere;
}
kbd {
  font-family: var(--mono); font-size: .8125rem;
  background: var(--raised); border: 1px solid var(--edge);
  border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 1px 0.375rem; color: var(--muted);
  white-space: nowrap;
}
.aside { font-size: .9375rem; color: var(--muted); border-left: 2px solid var(--edge); padding-left: 1rem; }

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

/* The chosen tab is the pressed neutral with a rule in the accent under it;
   the accent's fill is kept for the one primary action. */
.os-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.os-tabs button {
  min-height: 2.75rem; padding: 0 1.125rem;
  font-family: var(--display); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--edge-hard); border-radius: var(--radius-sm);
  transition: background-color var(--dur-1) linear, color var(--dur-1) linear, transform 100ms ease-out;
}
.os-tabs button:hover { color: var(--text); background: var(--hover); }
.os-tabs button:active { transform: scale(.97); }
.os-tabs button[aria-selected="true"] {
  color: var(--text); font-weight: 600; background: var(--active);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.os > p { color: var(--muted); margin: 0 0 0.75rem; }
.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: 0.5rem;
  list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.downloads .button { padding: 0 1rem; font-size: .875rem; font-weight: 500; white-space: normal; text-align: center; }
.downloads .button > span { font-family: var(--mono); }

/* 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: 5.5rem; }
@media (max-width: 660px) {
  pre.has-copy code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
.copy {
  position: absolute; top: 8px; right: 8px;
  min-height: 2rem; padding: 0 0.75rem;
  font-family: var(--body); font-size: .8125rem; font-weight: 500; color: var(--text);
  background: var(--raised); border: 1px solid var(--edge-hard); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-1) linear, transform 100ms ease-out;
}
.copy:hover { background: var(--hover); }
.copy:active { background: var(--active); transform: scale(.97); }
/* A fingertip needs 44px; a pointer is fine with the smaller one. */
@media (pointer: coarse) {
  .copy { min-height: 44px; min-width: 64px; }
  pre.has-copy { padding-right: 6rem; }
}

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

.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; max-width: 47.5rem; }
.faq details {
  border: 1px solid var(--edge-soft); border-radius: var(--radius);
  background: var(--raised); padding: 0 1.25rem;
}
.faq details[open] { border-color: var(--edge); }
.faq summary {
  cursor: pointer; list-style: none; padding: 0.875rem 0; min-height: 3.25rem;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.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: 1.125rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; content: "–" / ""; }
/* The same measure as the band's paragraphs: uncapped, an answer ran to
   about 110 characters a line across the 760px card. */
.faq details p { margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; line-height: 1.65; max-width: 68ch; }

/* --------------------------------------------------------------- sponsor */

/* Sponsors are names, each a link where they gave one, set as plainly as the
   agents Flockdeck works with: no logos, and nothing to make one sponsor's
   line louder than another's. */
#sponsor h3 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.01em; margin: 2rem 0 0.75rem;
}
.sponsors { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sponsors li {
  font-size: .9375rem; line-height: 1.4; color: var(--text);
  border: 1px solid var(--edge);
  border-radius: var(--radius-xs); padding: 0.25rem 0.75rem;
}
.sponsors a { color: var(--text); text-decoration-color: var(--edge-hard); }

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

.foot {
  border-top: 1px solid var(--edge-soft); margin-top: 2.5rem;
  padding: 1.5rem 1.5rem 2.5rem;
  font-size: .875rem; color: var(--muted);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; padding: 0; }
.foot p { margin: 0; }
.foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
/* 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: 0 1.5rem;
  padding-top: 0.5rem; border-top: 1px solid var(--edge-soft);
}
.foot nav a[aria-current="page"] { color: var(--text); }

/* ------------------------------------------------------------- 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: 3rem; padding-block: 2rem 4rem; }
.doc-toc { display: none; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 210px minmax(0, 1fr); }
  .doc-toc {
    display: block; position: sticky; top: 32px; align-self: start;
    max-height: calc(100vh - 64px); 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: 0.25rem 0 0.25rem 1rem; margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted); text-decoration: none; font-size: .9375rem; line-height: 1.4;
}
.doc-toc a:hover { color: var(--text); border-left-color: var(--edge-hard); }
/* The contents scroll in a box of their own, which would cut a ring drawn
   outside the link; this one is drawn inside it. */
.doc-toc a:focus-visible { outline-offset: -2px; }

.prose { max-width: 70ch; min-width: 0; overflow-wrap: break-word; }
.prose h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.875rem, 5vw, 2.5rem); line-height: 1.1; letter-spacing: -.024em;
  margin: 0.75rem 0 1rem; 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: .8125rem; color: var(--muted); margin: 0 0 2rem; }
.prose h1 + p em { font-style: normal; }
.prose h1 + p.doc-lede { font-family: var(--body); font-size: 1.1875rem; line-height: 1.55; color: var(--muted); }
.prose h1 + p.doc-lede em { font-style: italic; }
.prose h2 {
  font-size: 1.5rem;
  margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--edge-soft);
}
.prose h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2;
  letter-spacing: -.01em; margin: 2rem 0 0.75rem;
}
.prose h4 {
  font-family: var(--mono); font-weight: 500; font-size: .9375rem; line-height: 1.4; color: var(--text);
  margin: 2rem 0 0.5rem; 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: 1.0625rem; line-height: 1.7; }
.prose p { margin: 0 0 1rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25em; }
.prose li { margin: 0.375rem 0; }
.prose li::marker { color: var(--faint); }
.prose hr { border: 0; border-top: 1px solid var(--edge-soft); margin: 2rem 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: 0.75rem 0 1rem;
  border: 1px solid var(--edge-soft); border-radius: var(--radius); background: var(--raised);
}
.licence-text summary {
  cursor: pointer; list-style: none; padding: 0 1rem; min-height: 2.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: .8125rem; 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 1rem; }
.licence-text pre code, .prose pre.licence code {
  font-size: .8125rem; line-height: 1.6; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

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

@media (max-width: 880px) {
  .relay { grid-template-columns: minmax(0, 1fr); }
  .relay-link { flex-direction: row; gap: 0.75rem; }
  .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: 4.5rem; }
  .wrap, .top { padding-inline: 1.25rem; }
  .foot { padding-inline: 1.25rem; }
  /* Seven links do not fit on a phone's width, and wrapping them made three
     rows of small targets. They are one row that scrolls, each 44px high,
     with the edge faded to say there is more. */
  .top nav {
    flex: 0 0 100%; margin-left: -0.625rem; margin-right: -1.25rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-right: 1.25rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .top nav::-webkit-scrollbar { display: none; }
  .foot nav { margin-left: 0; }
  .sponsors a { display: inline-flex; align-items: center; min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* The window fades in rather than rising, and nothing presses. */
  .deck { animation: fade 200ms ease both !important; }
  :is(.button, .os-tabs button, .copy, .top nav a, .foot nav a):active { transform: none; }
}
@keyframes fade { from { opacity: 0; } }

/* Reduce Transparency: nothing on this page is translucent by design, but the
   scroll-edge mask, the waiting tint and the soft shadows are the closest
   things, so they go solid. */
@media (prefers-reduced-transparency: reduce) {
  .top nav { -webkit-mask-image: none; mask-image: none; }
  .pane.is-waiting .pane-head { background: var(--waiting-subtle); }
  .deck, .figure img, .play-label { box-shadow: none; }
}

/* Increase Contrast: the quiet text takes the full text colour and the hairlines
   the strong one, so nothing is carried by a line or a grey that is close to
   its ground. It is html:root rather than a second :root rule because
   cmd/docgen's test keeps the tokens in the one shared block. */
@media (prefers-contrast: more) {
  html:root { --muted: var(--text); --edge-soft: var(--edge-hard); --edge: var(--edge-hard); }
  .term { color: var(--text); }
}

/* High Contrast paints every ground the same, which would leave the chosen
   tab looking like the other one; the system highlight pair survives. The
   status marks keep their own colours, since their colour is their meaning. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; }
  .dot { forced-color-adjust: none; }
  .os-tabs button[aria-selected="true"] { color: HighlightText; background: Highlight; border-color: Highlight; }
  .iso .wire::after { forced-color-adjust: none; }
}

/* ------------------------------------------------------------- tracking */

/* Tracking is set by size: the larger the type, the tighter. Display and
   headings are negative, card titles slightly, body is at zero, and the small
   mono labels are a little open so they stay legible at 12 and 13px. */
body { letter-spacing: 0; font-optical-sizing: auto; }
.hero h1, h2, .prose h1 { letter-spacing: -.02em; }
.card h3, .prose h3, #sponsor h3, .faq summary { letter-spacing: -.01em; }
.kicker, .cta-note, .caption, .works li, .lanes-title, .lanes .who, .lanes .where, .lanes .file,
.card .g, .relay-node .g, .relay-tally, .relay-link .t, .deck-tally, .pane-head, .legend b,
.licence-text summary, kbd { letter-spacing: .01em; }