/* The public website: what it adds to the Bridge's stylesheet (bridge.css, a
   copy of web/src/index.css). Every colour, face, type size, space, radius and
   rule is one of its tokens. The few lengths that are not tokens are the
   Bridge's own: its mark of 22 px, its breakpoint of 1000 px, and the least
   width of a point in the design system's reference, 250 px. */

/* The Bridge fills the window and scrolls inside main; a page of the site is as long as it is. */
html, body { height: auto; }
/* The Bridge's column grows with the window; a page that is read keeps the column's least width, centred. */
:root { --column: 1200px; }
main.site-page { overflow: visible; padding: var(--space-8) var(--gutter) var(--space-9); }
main.site-page > * + * { margin-top: var(--space-9); }

/* ---- the top bar: a ruled line ---- */
.site-bar { padding: env(safe-area-inset-top, 0px) var(--gutter) 0; border-bottom: var(--rule-ink); }
.site-bar-in { max-width: var(--column); margin-inline: auto; display: flex; align-items: stretch; gap: var(--space-6); min-height: var(--bar); }
.site-brand { display: flex; align-items: center; gap: 10px; font: var(--type-name); font-stretch: 112%; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.site-brand svg { width: 22px; height: 22px; flex: none; }
.site-links { display: flex; gap: var(--space-6); margin-right: auto; }
.site-links a { position: relative; display: flex; align-items: center; color: var(--text-secondary); font: var(--type-label); font-weight: 500; text-decoration: none; }
.site-links a:hover { color: var(--text); }
.site-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-links a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 4px; background: var(--text); }
.site-bar #theme { align-self: center; }

/* ---- the first screen: the claim across the column, its first sentence in quieter ink
   so that the Captain's stands out (the Bridge's sign-in claim does the same), and a
   real piece of the Bridge beside the lead ---- */
.hero { display: grid; gap: var(--space-8); align-items: start; }
.hero h1.claim { grid-column: 1 / -1; max-width: none; font-weight: 800; letter-spacing: -0.05em; }
.hero .claim span { text-wrap: balance; }
.hero .claim .captain { color: var(--text); }
/* Everything under the claim has one width: the lead, the install sheet, the two ways on, the notice. */
.hero .copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.hero .copy .lead { max-width: none; }

/* The install sheet: the one thing above the page here, as the sign-in control is on the Bridge.
   A head with the two ways to install, the command with its prompt and Copy, and a foot. */
.launch { border: var(--outline); border-radius: var(--radius-2); background: var(--surface-raised); box-shadow: var(--shadow-float); min-width: 0; }
.launch-head { display: flex; align-items: stretch; gap: var(--space-5); min-height: var(--control); padding: 0 var(--space-5); border-bottom: var(--rule); }
.launch-label { align-self: center; font: var(--type-label); }
.launch-tabs { display: flex; gap: var(--space-5); }
.launch-tabs button { position: relative; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--text-secondary); font: var(--type-mono-label); }
.launch-tabs button:hover { background-image: none; color: var(--text); }
.launch-tabs button[aria-pressed="true"] { color: var(--text); }
.launch-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px; background: var(--text); }
.launch-where { align-self: center; margin-left: auto; color: var(--text-tertiary); font: var(--type-meta); text-align: right; }
.launch-line { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); min-width: 0; }
.launch-prompt { flex: none; color: var(--text-tertiary); font: var(--type-code); user-select: none; }
.launch-line pre { flex: 1; padding: 0; border: 0; border-radius: 0; background: none; font: var(--type-mono-name); }
.launch-line button { flex: none; }
.launch-foot { padding: var(--space-4) var(--space-5); border-top: var(--rule); color: var(--text-secondary); font: var(--type-meta); }
.launch-go { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.launch-go > span { margin-left: auto; color: var(--text-secondary); font: var(--type-meta); }
@media (max-width: 599px) { .launch-where { display: none; } .launch-go > span { margin-left: 0; flex-basis: 100%; } }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-9); } }
.example { display: grid; gap: var(--space-4); min-width: 0; }
.example .names b { font: var(--type-mono-name); }

/* A link drawn as a control: a rectangle, filled only with the class primary. */
.button-link { min-height: var(--control); padding: 6px var(--space-5); border: var(--outline); border-radius: var(--radius-1); font: var(--type-control); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: background-color var(--dur-quick); }
.button-link:hover { background-image: linear-gradient(var(--hover-overlay), var(--hover-overlay)); }
.button-link:active { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.button-link.primary { background-color: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button-link.primary:hover { background-image: linear-gradient(var(--fill-hover), var(--fill-hover)); }
.button-link { gap: var(--space-3); }
.button-link .glyph { transition: transform var(--dur-base) var(--ease-standard); }
.button-link:hover .glyph { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .button-link .glyph { transition: none; } .button-link:hover .glyph { transform: none; } }

/* A command: mono, outlined, and it scrolls inside itself when the window is narrow. */
pre { margin: 0; padding: var(--space-4) var(--space-5); border: var(--rule-ink); border-radius: var(--radius-1); background: var(--surface-raised); font: var(--type-mono); overflow-x: auto; min-width: 0; max-width: 100%; }
pre code { overflow-wrap: normal; white-space: pre; }
/* A command is read letter by letter: the mono face joins no characters (its -< would read as an arrow). */
pre, code, .mono { font-variant-ligatures: none; }
/* A command that may break across lines where the window is narrow: nothing to scroll. */
pre.wraps { overflow-x: visible; }
pre.wraps code { white-space: pre-wrap; overflow-wrap: anywhere; }
.install { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* ---- sections: under a 2 px rule, no cards ---- */
.section-head h2, .section-head h3, .prose h2 { font: var(--type-subtitle); font-stretch: 112%; letter-spacing: -0.02em; }
.section > p, .section .text p, .section .pair p { font: var(--type-read); color: var(--text-secondary); max-width: 68ch; }
.section .text, .section .pair { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.section > .piece { margin-top: var(--space-5); }
@media (min-width: 1000px) {
  .section.beside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-9); }
  .section.beside > .section-head { grid-column: 1 / -1; }
  .section.beside > .piece { margin-top: 0; }
  .section .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-9); }
}

/* ---- pieces of the Bridge, shown as pictures: example data, nothing to press ---- */
.piece { margin-block: 0; margin-inline: 0; display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.piece .names b { font: var(--type-mono-name); }
/* An example conversation in Slack, drawn in paper and ink: a framed window, a row a
   message, the speaker's picture beside it (a crew member's is its flag, as in Slack). */
.chat { border: var(--rule-ink); border-radius: var(--radius-2); background: var(--surface-raised); overflow: hidden; min-width: 0; }
.chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--rule); font: var(--type-label); }
.chat-head b { font: var(--type-section); font-stretch: 105%; }
.chat-head b span { color: var(--text-tertiary); font-weight: 400; }
.chat-head > span { color: var(--text-tertiary); font: var(--type-meta); }
.chat-list { list-style: none; display: grid; gap: var(--space-5); padding: var(--space-4) var(--space-5) var(--space-5); }
.chat-day { display: flex; align-items: center; gap: var(--space-4); color: var(--text-tertiary); font: var(--type-meta); font-weight: 600; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: var(--rule); }
.chat-msg { display: grid; grid-template-columns: var(--control) minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.chat-avatar { display: grid; place-items: center; width: var(--control); height: var(--control); border: var(--rule); border-radius: var(--radius-inner); background: var(--bg); overflow: hidden; }
.chat-avatar img { width: 100%; height: 100%; display: block; }
.chat-avatar.captain { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.chat-avatar.captain svg { width: 100%; height: 100%; display: block; }
/* The Captain's picture: paper on ink; the cap's badge is the ink showing through. */
.chat-avatar .cap-badge { stroke: var(--primary); }
.chat-body { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.chat .chat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); max-width: none; color: var(--text); font: var(--type-label); }
.chat-meta b { font-weight: 700; }
.chat-meta time { color: var(--text-tertiary); font: var(--type-mono-small); }
.chat-app { padding: 0 var(--space-2); border: var(--rule); border-radius: var(--radius-1); color: var(--text-secondary); font: var(--type-tab); }
.chat .chat-text { max-width: none; color: var(--text); font: var(--type-body); overflow-wrap: anywhere; }
.chat-mention { font-weight: 600; }
.chat .chat-react { margin-top: var(--space-2); }
.chat-react span { display: inline-block; padding: var(--space-1) var(--space-3); border: var(--rule); border-radius: var(--radius-1); color: var(--text-secondary); font: var(--type-meta); }
.chat-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 var(--space-5) var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-1); color: var(--text-tertiary); font: var(--type-body); }
/* The 36 signal flags: one whole row, or two or three whole rows where the window is narrow. */
.flag-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.flag-row .flag { width: 100%; height: auto; aspect-ratio: 1; }
@media (min-width: 600px) { .flag-row { grid-template-columns: repeat(18, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .flag-row { grid-template-columns: repeat(36, minmax(0, 1fr)); } .section.beside > .piece.flags { grid-column: 1 / -1; margin-top: var(--space-6); } }
.ruler-wrap { overflow-x: auto; }
.ruler-wrap .ruler { min-width: 720px; }
.where { margin: 0; border-top: var(--rule-ink); }
.where > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: var(--rule); }
.where dt { font: var(--type-label); }
.where dd { margin: 0; font: var(--type-mono); color: var(--text-secondary); text-align: right; }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-6) var(--space-7); }
.points > div { display: grid; gap: var(--space-2); align-content: start; border-top: var(--rule); padding-top: var(--space-4); }
.points h2, .points h3 { font: var(--type-section); font-stretch: 105%; letter-spacing: 0; }
.points p { color: var(--text-secondary); }

/* ---- documentation: the column's whole width; text keeps its measure ---- */
.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); justify-items: start; font: var(--type-read); }
.prose > * { min-width: 0; max-width: 100%; }
.prose > h1 { overflow-wrap: anywhere; font-size: var(--size-claim); line-height: var(--leading-claim); font-stretch: 125%; letter-spacing: -0.045em; }
.prose > p { max-width: 72ch; }
.prose > .steps, .prose > .points, .prose > .needs, .prose > .error { justify-self: stretch; }
.prose > .error { max-width: 72ch; justify-self: start; width: 100%; }
.prose p, .prose li { font: var(--type-read); }
.prose p, .prose li { color: var(--text-secondary); }
.prose p.lead { font: var(--type-lead); }
.prose p.hint, .prose p.launch-foot { font: var(--type-meta); }
.prose p.error { font: var(--type-label); font-weight: 500; }
.prose p.error.is-warning { color: var(--warning-text); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

/* What you need: a grid of blocks, each under its rule. */
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-7) var(--space-8); margin-top: var(--space-5); }
.needs > div { display: grid; gap: var(--space-4); align-content: start; padding-top: 10px; border-top: var(--rule-head); min-width: 0; }
.needs h2 { font: var(--type-name); font-stretch: 105%; letter-spacing: 0; }
/* The last way to stop: across the column, so its command is read in one piece. */
.lastway { justify-self: stretch; display: grid; gap: var(--space-4); justify-items: start; padding-top: 10px; border-top: var(--rule-head); min-width: 0; }
.lastway h2 { font: var(--type-name); font-stretch: 105%; letter-spacing: 0; }
.lastway p { max-width: 84ch; }
.need-head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.needs p.sum { color: var(--text); font: var(--type-read); font-weight: 600; }
.needs button { justify-self: start; }
.needs button[aria-pressed="true"], .prose > .launch-go { justify-self: stretch; margin-top: var(--space-4); }
.prose > .launch-go > span { margin-left: 0; }

/* The number of a step: a square, outlined, and filled with ink once the step is done. */
.step-n { display: grid; place-items: center; flex: none; width: var(--control); height: var(--control); border: var(--outline); border-radius: var(--radius-1); font: var(--type-code); color: var(--text); transition: background-color var(--dur-base), color var(--dur-base); }
.is-done .step-n { background: var(--primary); color: var(--on-primary); }
.step-n.optional { border-style: dashed; color: var(--text-secondary); }

/* The head of a docs page that has figures: the title and lead, and beside them a ruled line of figures. */
.doc-head { justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-9); align-items: end; }
.doc-head .lead { max-width: 52ch; }
.doc-head h1 { grid-column: 1 / -1; overflow-wrap: anywhere; font-size: var(--size-claim); line-height: var(--leading-claim); font-stretch: 125%; letter-spacing: -0.045em; }
.prose ul.tally { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--rule-head); }
.tally li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4) var(--space-4) 0 0; }
.tally li + li { padding-left: var(--space-5); border-left: var(--rule); }
.tally b { color: var(--text); font: var(--type-figure); letter-spacing: -0.03em; }
.tally span { color: var(--text-secondary); font: var(--type-meta); }
@media (min-width: 900px) { .doc-head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* The way through the page: its steps in a line, joined, each a link to its step. */
.path { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.path a { display: flex; align-items: center; gap: var(--space-4); min-width: 0; text-decoration: none; }
.path a b { font: var(--type-label); font-weight: 700; }
.path a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.prose > .path-count { color: var(--text-secondary); font: var(--type-meta); }
@media (min-width: 900px) {
  .path { display: flex; gap: var(--space-4); }
  .path a { flex: 1 1 auto; white-space: nowrap; }
  .path a:last-child { flex: none; }
  .path a:not(:last-child)::after { content: ""; flex: 1; min-width: var(--space-6); border-top: var(--rule-ink); }
}

/* A step is a row: its number, title and one line beside what to do. */
.prose ol.steps { list-style: none; padding: 0; gap: 0; margin-top: var(--space-5); }
.prose ol.steps > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-8); padding: var(--space-7) 0; border-top: var(--rule-head); min-width: 0; color: var(--text); scroll-margin-top: var(--space-5); }
.step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; align-content: start; }
.step-head .step-n { grid-row: span 2; align-self: start; }
.step-head h2 { font: var(--type-subtitle); font-stretch: 112%; letter-spacing: -0.02em; }
.step-head p { grid-column: 2; color: var(--text-secondary); font: var(--type-meta); }
.step-head button { grid-column: 2; justify-self: start; margin-top: var(--space-4); }
.steps .body { display: grid; gap: var(--space-5); justify-items: start; align-content: start; min-width: 0; }
.steps .body > * { min-width: 0; max-width: 100%; }
/* What to do fills its column, so the text, the small print and the install sheet end on one edge. */
.steps .body > p, .steps .body > p.hint { max-width: none; justify-self: stretch; }
.steps .body > p:not(.hint) { color: var(--text); }
.steps .body > .launch, .steps .body > .piece, .steps .body > .parts { justify-self: stretch; }
.steps .body > .piece { max-width: 520px; }
@media (min-width: 900px) { .prose ol.steps > li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* The parts of one step: each under a hairline, its name beside it on a wide screen. */
.parts { display: grid; gap: 0; border-bottom: var(--rule); }
.parts > div { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: var(--rule); min-width: 0; }
.parts h3 { font: var(--type-name); font-stretch: 105%; }
.parts p, .parts li, .parts p.hint { max-width: none; }
@media (min-width: 600px) { .parts > div { grid-template-columns: 9em minmax(0, 1fr); column-gap: var(--space-5); } .parts > div > * { grid-column: 2; } .parts > div > h3 { grid-column: 1; grid-row: 1 / span 4; } }

/* ---- the footer: on a hairline ---- */
.site-foot { padding: 0 var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.site-foot-in { max-width: var(--column); margin-inline: auto; padding-top: var(--space-5); border-top: var(--rule); display: flex; gap: var(--space-4) var(--space-6); flex-wrap: wrap; justify-content: space-between; font: var(--type-meta); color: var(--text-secondary); }
.site-foot nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }