/* The page furniture the two *public* surfaces share: the marketing pages and the shop.
   Colors and type come from /shared/tokens.css, which this file assumes is loaded first.

   It exists because of how the shop looked before 2026-08-18: its own reset, its own
   16px body, a bare bold word where the site has a brand mark, a 26rem column beside the
   site's 62rem. Bringing the two together produced fourteen byte-identical rule blocks in
   two files, which is the state a design drifts out of again — the second time nobody is
   comparing. So the shared half moved here and neither sheet can quietly change it alone.

   The operator dashboard deliberately does NOT link this. `control/` is a dense
   inward tool with its own density, its own `main`, its own `h1`; it shares the palette
   and nothing else, and pretending otherwise would put a customer-facing header in a
   place no customer ever reaches.

   Load order is tokens → chrome → the surface's own sheet, so a surface can still
   override anything here — the shop's `main` adds a bottom padding, and both keep their
   own headline sizes, which are a real design difference rather than drift. */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--plasma);
  outline-offset: 3px;
}

/* ── the page column ─────────────────────────────────────────────────────────── */

/* One measure for the header, the content and the footer, so the brand mark and the
   first letter of the text below it stand on the same left edge on every page of the
   site — including the account page, which is where that stopped being true. */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.4rem 2rem;
}

main { max-width: 62rem; margin: 0 auto; padding: 0 2rem; }

/* ── the brand ───────────────────────────────────────────────────────────────── */

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
/* The mark: a plasma-colored square, the same core that sits in the cross-section on
   the front page. */
.brand::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  background: var(--plasma);
}

/* ── the language switch ─────────────────────────────────────────────────────── */

/* A disclosure rather than a row, and rather than a <select>. Three languages fit on a
   line; the eight the README has queued behind them do not, and a row that grows into
   the nav is a redesign waiting to happen. Not a <select> because that needs JavaScript
   to navigate, and the marketing pages are prose that must render without it.
   What sits *inside* the panel is each surface's own business — links there, buttons in
   the shop, because one has a URL per language and the other has one URL and a
   preference. */
.langs { position: relative; }
.langs summary {
  list-style: none;              /* the disclosure triangle, which we draw ourselves */
  cursor: pointer;
  padding: 0;
  color: var(--line-strong);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .04em;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; }
.langs[open] summary, .langs summary:hover { color: var(--ink); }
.langs nav {
  position: absolute;
  right: 0;
  top: 1.65rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
}

/* ── footer ──────────────────────────────────────────────────────────────────── */

footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
footer nav { display: flex; gap: 1.5rem; }
footer a {
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
}
footer a:hover { color: var(--ink); }
.colophon { margin: 0; font-size: .8rem; color: var(--muted); max-width: 32rem; }

/* ── calls to action ─────────────────────────────────────────────────────────── */

/* Shared, because every public surface has one — the front page's, the checkout's
   "Sign in", the landing page's "Open BlueAgent", the account page's "Buy a plan". The
   last of those was an underlined link for as long as these rules lived in the
   marketing sheet alone: the account page loads this file and not that one, and the
   one loud action it has was the quietest thing on it. */
.actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin: 0; }

.cta {
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .01em;
  display: inline-block;
  padding: .7rem 1.3rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
.cta:hover { background: var(--ink); }

.cta-quiet {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.cta-quiet:hover { color: var(--ink); border-color: var(--ink); }

/* ── narrow ──────────────────────────────────────────────────────────────────── */

@media (max-width: 52rem) {
  body { font-size: 16px; }
  .top, main, footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  footer { flex-direction: column; }
}