/* ══════════════════════════════════════════════════════════════════
   site.css — the design system the landing page established, shared
   across every non-app page.

   Loaded AFTER styles.css and BEFORE each page's own inline <style>,
   so a page can still override anything here without !important.

   Scoped to `body.site`. The planner app (index.html) does not carry
   that class, so none of this reaches the working tool — its density
   is deliberate and different from the marketing pages.

   The landing page keeps its own `body.landing` block; these are the
   rules general enough to belong on every page.
   ══════════════════════════════════════════════════════════════════ */

.site {
  /* Same scale as the landing page, so headings step identically
     across the site rather than each page inventing a size. */
  --t-h1: clamp(34px, 4vw, 52px);
  --t-h2: clamp(26px, 2.6vw, 36px);
  --t-h3: 20px;
  --t-body: 16px;
  --t-body-lg: 18px;
  --t-small: 13.5px;
  --measure: 68ch;
  font-size: var(--t-body);
}

/* ── STICKY TOOLBAR ──────────────────────────────
   The nav follows the scroll on every page. It is flattened to a
   hairline over blur: a rule the content passes under, not a bar
   floating above it.

   styles.css sets `html, body { overflow-x: hidden }`, which quietly
   promotes body to the scroll container — and a sticky element sticks
   to *its* scroll container, so the nav scrolled away with the page.
   `clip` contains the same horizontal overflow without creating a
   scroller, which is what restores sticky. */
html:has(body.site), body.site { overflow-x: clip; }
body.site { overflow-y: visible; }

body.site .app-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: none;
  background: rgba(245, 242, 236, 0.86);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.25s, background 0.25s;
}
/* Once the page has moved, the rule darkens — the only signal that
   the bar is now overlaying content rather than sitting in it. */
body.site .app-nav.is-scrolled {
  border-bottom-color: var(--border-2);
  background: rgba(245, 242, 236, 0.94);
}
body.site .app-nav-links .nav-cta {
  box-shadow: none;
  border-radius: 3px;
}
body.site .app-nav-links a { border-radius: 3px; }

/* ── TYPE ────────────────────────────────────────
   Bigger, tighter headings; body copy held to a measure so prose
   pages stop running the full container width. */
body.site h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
}
body.site h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
body.site h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.site p { color: var(--ink-2); }

/* The mono eyebrow, with the short rule the landing page uses to
   attach a label to the section it names. */
body.site .eyebrow {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
body.site .eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--field);
  vertical-align: middle;
  margin-right: 12px;
}

/* ── BUTTONS ─────────────────────────────────────
   Squared off, no drop shadow, no hover lift. Colour and border do
   the work instead of elevation. */
body.site .btn-primary,
body.site .nav-cta {
  border-radius: 3px;
  box-shadow: none;
}
body.site .btn-primary:hover {
  background: var(--field-dim);
  border-color: var(--field-dim);
  transform: none;
  box-shadow: none;
}
body.site .btn-secondary {
  border-radius: 3px;
  box-shadow: none;
  background: transparent;
  border-color: var(--border-2);
}
body.site .btn-secondary:hover {
  background: transparent;
  border-color: var(--ink-2);
  color: var(--ink);
  transform: none;
}

/* ── SURFACES ────────────────────────────────────
   Panels and cards lose their shadows and soft radii. Rules and
   restraint carry the structure; a shadow on every box was a large
   part of what made these pages read as templated. */
body.site .panel,
body.site .card,
body.site .info-box,
body.site .tip-box,
body.site .warning-box,
body.site .transfer-panel,
body.site .guide-panel,
body.site .drone-card,
body.site .remote-card,
body.site .toc {
  box-shadow: none;
  border-radius: 4px;
}

/* An accent bar reads as an annotation in the margin; a tinted,
   rounded, shadowed box reads as a component. These are notes. */
body.site .info-box,
body.site .tip-box,
body.site .tip,
body.site .notice,
body.site .warning-box {
  border-radius: 0 3px 3px 0;
  box-shadow: none;
}

/* ── PRO TAG ─────────────────────────────────────
   Amber means exactly one thing across the site: Pro. */
body.site .pro-tag,
body.site .pro-badge {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-pale);
  border: 1px solid rgba(196, 124, 42, 0.35);
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: 2px;
}

/* ── FOOTER ──────────────────────────────────────
   A hairline and mono type, matching the landing footer. */
body.site .page-footer,
body.site .guide-footer,
body.site .landing-footer {
  background: none;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
}
body.site .page-footer a,
body.site .guide-footer a,
body.site .landing-footer a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
}
body.site .page-footer a:hover,
body.site .guide-footer a:hover,
body.site .landing-footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-2);
}

/* ── MOTION ──────────────────────────────────────
   No entrance choreography anywhere, and a real reduced-motion
   guard, which none of these pages previously had. */
@media (prefers-reduced-motion: reduce) {
  body.site *, body.site *::before, body.site *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── TAGS & CHIPS ────────────────────────────────
   Solid 999px pills in bold caps were the loudest thing on the drones
   page — a support tier is metadata, not a call to action. They become
   outlined mono chips in the tier's own colour, which also lets green
   keep meaning "recommended" without shouting it. */
body.site .drone-tier {
  border-radius: 3px;
  padding: 2px 7px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: transparent;
}
body.site .drone-tier.direct {
  color: var(--field);
  background: var(--field-pale);
  border: 1px solid rgba(45, 107, 68, 0.3);
}
body.site .drone-tier.extended {
  color: var(--amber);
  background: var(--amber-pale);
  border: 1px solid rgba(196, 124, 42, 0.35);
}

body.site .remote-tag {
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: 'DM Mono', monospace;
  box-shadow: none;
}

/* ── SPEC ROWS ───────────────────────────────────
   A spec sheet is a readout: the label stays quiet, the value gets mono
   and full ink so the eye can scan the right-hand column alone. */
body.site .drone-spec { font-size: 12px; }
body.site .drone-spec > span:first-child {
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
body.site .drone-spec > span:last-child {
  font-family: 'DM Mono', monospace;
  color: var(--ink);
}

/* ── SECTION LABELS ──────────────────────────────
   The same rule-and-label device the landing page uses, so a section
   heading looks identical wherever it appears. */
body.site .drones-section-title,
body.site .panel-title,
body.site .toc-title {
  color: var(--ink-3);
  letter-spacing: 0.16em;
}
body.site .drones-section-title::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--field);
  vertical-align: middle;
  margin-right: 12px;
}

/* ── PAGE HEADINGS ───────────────────────────────
   Page titles were only a little larger than the body; they now carry
   the same weight a landing-page section title does. */
body.site .page-header h1,
body.site .guide-shell h1,
body.site .transfer-header h1,
body.site .legal-wrap h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.03em;
  line-height: 1.04;
}
body.site .page-header p,
body.site .guide-lead,
body.site .transfer-header p {
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ── CARDS ───────────────────────────────────────
   No hover lift, no shadow. A border that darkens is enough feedback
   for something that is not clickable. */
body.site .drone-card,
body.site .remote-card {
  box-shadow: none;
  border-radius: 4px;
  transition: border-color 0.2s;
}
body.site .drone-card:hover,
body.site .remote-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-2);
}

/* ── LEGAL PAGES ─────────────────────────────────
   The nav chips lose their pill shape; prose gets a measure so the
   terms are readable rather than running the full 820px. */
body.site .legal-nav a {
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
body.site .legal-nav a:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}
body.site .legal-wrap p,
body.site .legal-wrap li { max-width: var(--measure); }

/* ── TABLES ──────────────────────────────────────
   Hairlines only, mono for the cells that hold values. */
body.site .actions-table {
  box-shadow: none;
  border-radius: 0;
}
body.site .actions-table th {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── BUTTON-BASED CARDS ──────────────────────────
   .rc-choice on /transfer is a <button>, and buttons inherit
   `white-space: nowrap` from the UA sheet rather than from any rule on
   the page. At the old 14px base its two lines happened to fit; at the
   shared 16px they overflowed the card. Let them wrap, which is what
   the two-line layout wanted in the first place. */
body.site .rc-choice {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  border-radius: 4px;
  font-size: var(--t-small);
}
body.site .rc-choice strong {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--ink);
}
body.site .rc-choice span {
  display: block;
  color: var(--ink-3);
  line-height: 1.45;
}