/*
  I am Boone — brand styles.

  Palette and type only; there is no framework and no build step. See
  website/README.md for why, and for the asset list this file expects.

  The palette is the brand's six tokens, unchanged. Everything else in this file
  is derived from them, so a colour correction is a one-line edit at the top
  rather than a search across the stylesheet.
*/

:root {
  /* The brand palette. Do not introduce a seventh colour without a reason. */
  --forest: #1e3a2e;
  --navy: #0d1b2a;
  --copper: #c56a2d;
  --sage: #a3b18a;
  --sand: #eadfc8;
  --off-white: #f6f4ee;

  /* Semantic roles, light theme. */
  --bg: var(--off-white);
  --surface: #fffdf8;
  --ink: var(--navy);
  --ink-soft: #46586b;
  --accent: var(--copper);
  --brand: var(--forest);
  --rule: #e2dccc;
  --code-bg: #fffdf8;

  /*
    The copy button is the one thing on the page asking to be clicked, so it is
    given its own pair rather than reusing --brand: --brand flips to sage in dark
    mode, and off-white text on sage is unreadable. Both pairs clear WCAG AA.
  */
  --button-bg: var(--forest);
  --button-ink: var(--off-white);

  --measure: 34rem;
  --radius: 14px;

  /*
    Geometric-first, because the wordmark is geometric. Century Gothic ships with
    Windows and Office, Futura and Avenir Next with macOS, so most visitors get a
    geometric face with zero downloaded bytes. The README documents how to drop in
    the real brand font if exact fidelity is ever worth the request.
  */
  --font-display: "Poppins", "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a14;
    --surface: #16241c;
    --ink: #ece7da;
    --ink-soft: #a9b5ab;
    --accent: #e08a4e;
    --brand: var(--sage);
    --rule: #26382c;
    --code-bg: #0b1410;

    --button-bg: var(--sage);
    --button-ink: #0f1a14;
  }
}

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

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

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Keyboard users get to skip the header. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--brand);
  color: var(--off-white);
  border-radius: 8px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- masthead ---------- */

/*
  The masthead carries the Connect button, to the right of the lockup. That is the
  literal top of the page and it costs no vertical space of its own — the button
  sits in room the lockup was already reserving.

  **The row is capped at --measure rather than filling .wrap.** Body copy is capped
  there too, so the button's right edge lines up with the end of every paragraph
  below it. Left to .wrap's full 46rem it would sit out past a margin nothing else
  on the page reaches, and read as unaligned — which is exactly what happened.

  It wraps rather than shrinking: on a narrow screen the button drops below the
  lockup at full size instead of being squeezed into whatever is left beside a 60px
  logo.
*/
.masthead {
  padding: 2.25rem 0 0;
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: var(--measure);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.lockup img {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  flex: none;
}

.lockup .names {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.handle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  color: var(--accent);
}

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

/*
  "Getting started" — the journey in the order it happens, now a section of the page in
  its own right rather than a caption under the masthead button. It stopped being a
  caption when the button moved into step 2: these three steps describe starting a
  family, connecting, and talking, and only one of them is about a control.
*/
.how {
  padding: 2.5rem 0 0;
}

/* Both tags, because the element carries meaning here rather than appearance: a sequence is an
 * `ol` and a set of co-equal things is a `ul`, and the layout is the same either way. The
 * `::marker` rule below is what stays scoped to `ol` — accent numerals are for steps that have
 * an order, and a `ul` takes the ordinary bullet. */
ol.steps,
ul.steps {
  max-width: var(--measure);
  margin: 0;
  padding-left: 1.4rem;
}

/* Roomier than when each step was one clause — step 2 now carries a control. */
ol.steps li,
ul.steps li {
  margin-bottom: 0.9rem;
}

ol.steps li::marker {
  color: var(--accent);
  font-weight: 700;
}

.intro {
  padding: 2.75rem 0 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.5vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: 20ch;
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/*
  The product-thesis line, above the core brand line as its kicker. Copper, to
  match the @boone handle in the lockup — the two accent lines bracket the hero.
*/
.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

/*
  The core brand line is written as a two-part statement (the <br> mirrors how the
  brand foundation sets it) and is allowed to run to its natural width rather than
  the body --measure, the way a hero line does.
*/
.intro h1 {
  max-width: none;
}

/* ---------- the front door (issue #99) ---------- */

/*
  "Start your family" — the masthead's one control, in the room the lockup was already
  reserving. It replaced Connect agent there rather than joining it: that row is one
  control and stays one control (see README), and starting a family is the step that
  comes first.

  Styled as the copy button's twin — same fill, radius and display font — so the page
  reads as having one kind of action rather than two competing ones. An <a>, not a
  <button>: it navigates, needs no script, and so works with JavaScript off.
*/
.start {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  background: var(--button-bg);
  color: var(--button-ink);
  border: 2px solid var(--button-bg);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.start:hover,
.start:focus-visible {
  /* The fill stays; only the edge moves, so the control never changes size. */
  border-color: var(--accent);
}

/*
  The Connect agent button sits on its own line under the sentence that explains it,
  never inline with it — a wide button mid-paragraph breaks the reading line.

  Unscoped since ADR 0015: the button left the homepage entirely and now lives on
  /connect, which is the route that owns connecting. It was `.steps .copy-slot` while
  the only slot on the site was inside the homepage's step 2. The slot is block-level
  wherever it appears, so the rule says that rather than naming one page's list.
*/
.copy-slot {
  display: block;
  margin-top: 0.75rem;
}

/* ---------- the beta notice ---------- */

.notice {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.notice p {
  margin: 0;
}

.notice p + p {
  margin-top: 0.6rem;
}

.notice strong {
  color: var(--ink);
}


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

section {
  padding: 3rem 0 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 2rem 0 0.75rem;
  color: var(--ink);
}

p {
  max-width: var(--measure);
}

/*
  The three lists are Boone's own words, lifted verbatim from src/tools/getStarted.ts
  — the page and the assistant say the same thing, and a test fails if they drift.
  Each list gets its own marker colour so "won't do" reads as a commitment rather
  than a limitation.
*/
.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.claims li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
}

.claims li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.claims.can li::before {
  content: "\2713"; /* check */
  color: var(--brand);
}

.claims.wont li::before {
  content: "\00D7"; /* multiplication sign, not a letter x */
  color: var(--accent);
  font-size: 1.25em;
  line-height: 1.35;
}

.claims.control li::before {
  content: "\25C6"; /* filled diamond */
  color: var(--sage);
  font-size: 0.8em;
  line-height: 2.1;
}

/* ---------- connecting ---------- */

/* ---------- /connect ---------- */

/*
  Connecting lives on its own route since ADR 0015 — see connect/index.html. These two
  classes appear only there.

  .connect-action holds the sentence, the button copy.js builds, and the address in plain
  sight. It matches .connect's rhythm below rather than inventing a second one, since on
  that page the two are alternatives: whichever of them is showing sits in the same place.

  The page still describes no host's connector *settings*, only what each one needs before
  the paste will work. Those menus belong to other companies and move; a stale click path
  here reads as a broken product.
*/
.connect,
.connect-action {
  padding: 2.25rem 0 0;
}

/*
  The address, outside the copied prompt, for someone adding the server by hand. Quieter
  than body copy — the button is the path this page is optimised for — but never truncated
  or wrapped mid-host: it is the payload, and a half-transcribed address fails in a way
  nobody can diagnose from the error.
*/
.address {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  /* Deliberately thin. The label is long, so the width carries it. */
  padding: 0.5rem 1.1rem;
  background: var(--button-bg);
  color: var(--button-ink);
  /*
    Same colour as the fill, so it is invisible until .copied swaps the fill out.
    Declaring it up front keeps the button exactly the same size in both states —
    without it, the label would shift by 4px on every click.
  */
  border: 2px solid var(--button-bg);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  cursor: pointer;
}

/*
  **The button must not change size when clicked**, and three attempts at that
  failed because each one guessed a width:

    - size to content, and the longer confirmation made it wrap under the lockup
      mid-read;
    - reserve a width for the confirmation, and it stopped fitting beside the lockup
      at all, sitting underneath permanently;
    - reserve less and hide the marks to make room, and it still moved, because the
      guess was still a guess — em-based estimates of a font stack that falls back
      across Poppins, Century Gothic and Trebuchet are not measurements.

  So nothing here reserves anything. All three labels are in the markup at once,
  stacked in a single grid cell, and **the browser measures the widest one in the
  font it actually loaded**. Visibility switches; the box never moves. Add a fourth
  label and it is sized correctly for free.

  visibility rather than display: display:none would drop the hidden labels out of
  the grid's measurement, which is the entire mechanism. It also keeps them out of
  the accessibility tree, so only the visible one is announced.
*/
.copy-label {
  display: grid;
  place-items: center;
}

.copy-label > span {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
}

.copy[data-state="idle"] > .copy-label > [data-state="idle"],
.copy[data-state="copied"] > .copy-label > [data-state="copied"],
.copy[data-state="manual"] > .copy-label > [data-state="manual"] {
  visibility: visible;
}

.copy:hover {
  opacity: 0.9;
}

.copy:not([data-state="idle"]) {
  background: transparent;
  color: var(--button-bg);
}

/*
  The marks of the assistants Boone connects to, inside the button beside the label
  — they answer "will this work with mine?" without spending a line of the page on
  a sentence that names them.

  Inline SVG rather than <img>, so they inherit currentColor and follow both the
  page into dark mode and the button into its copied state; three image files would
  need a second set of assets to do either. They are aria-hidden, with one
  visually-hidden sentence covering the row, because three logos read out in
  sequence tell a screen-reader user nothing.
*/
.agents {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  opacity: 0.85;
}

.agent {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

/*
  The marks stay put through every state. Hiding them was an earlier attempt to buy
  width for a longer label; with the label stack sizing itself there is nothing to
  buy, and a row of logos vanishing under the cursor was its own small jolt.
*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.do-this {
  margin: 1rem 0 0;
}

.copy-source {
  margin: 0.6rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* One line of the prompt, matching how copy.js breaks it on the clipboard. */
.copy-source [data-line] {
  display: block;
}

.copy-source [data-line] + [data-line] {
  margin-top: 0.5rem;
}

/*
  The server address inside the prompt. Set in mono so it reads as a thing
  transcribed exactly, but with no box of its own — it is one clause of a sentence
  here, not a field. It must never be truncated: it is the payload.
*/
.copy-source .endpoint {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/*
  copy.js sets .js-copy on <html> once the button is wired up and working. Note the
  direction: the default — this file's plain state, and what a blocked or failed
  script leaves behind — is the no-JavaScript one, with the prompt written out on
  the page. The class hides it, rather than a class revealing it. A clipboard write
  that throws takes .js-copy back off and the prompt returns.
*/
.js-copy .no-js-only {
  display: none;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

/* ---------- status table ---------- */

.status {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  margin: 0;
  font-size: 0.98rem;
}

.status th,
.status td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.status th {
  font-family: var(--font-display);
  font-weight: 600;
}

.status td:last-child {
  color: var(--ink-soft);
}

.yes {
  color: var(--brand);
  font-weight: 600;
}

.not-yet {
  color: var(--ink-soft);
  font-weight: 600;
}

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

footer {
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

footer p {
  margin: 0 0 0.4rem;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: none;
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
}