/* ── The 2026 restyle ────────────────────────────────────────────────────────────────────
   One stylesheet, loaded after every other, carrying a single direction: a restrained
   near-white page, one large display face, wide gutters, and hierarchy built from size
   contrast rather than rules, boxes and colour.

   It is a separate file rather than edits spread across fifteen because style.css uses
   @layer and the later stylesheets do not, so an override appended to style.css still
   loses to discovery.css at equal specificity simply by loading earlier. Loading last is
   the only reliable way to own a component without escalating specificity everywhere, and
   it keeps the whole change in one reviewable, revertible place.

   The vertical carousel is deliberately untouched: every rule here is scoped away from
   body.carousel-mode and from .hardware-carousel, which own their own type and layout.
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* ── 1. Air ──────────────────────────────────────────────────────────────────────────────
   The page was a 40px gutter at every width. It is now a token, wider on large screens and
   narrower on phones, so "more air" is one edit rather than fifteen. */
body:not(.carousel-mode) .shell,
body:not(.carousel-mode) .masthead,
body:not(.carousel-mode) .discovery-footer {
  width:calc(100% - (var(--gutter) * 2));
  max-width:1320px;
}

/* Space between major sections, from the same token. */
body:not(.carousel-mode) main > section + section,
body:not(.carousel-mode) main > .alt-group + .alt-group { margin-top:var(--section-gap); }

/* ── 2. Display type ────────────────────────────────────────────────────────────────────
   The direction is size contrast: a display line much larger than anything near it, and
   body copy that stays quiet. Sizes interpolate between two steps of the scale, and the
   negative tracking comes from a token so each stylesheet stops inventing its own. */
/* No h1 font-size here on purpose. quiet-pages.css already owns the page display line for
   six page types, device-pages.css owns the device heading and discovery.css owns the home
   hero — a size set here would be a fourth competing layer, which is how the site ended up
   with 43 h1 font-size rules and one page at 37px next to another at 68px. The sizes were
   raised in those three files instead. This only supplies what nothing else claims. */
body:not(.carousel-mode) h1 { text-wrap:balance; }
/* h1 above is safe to style globally: the build asserts exactly one h1 per page, so it is
   always the page's own display line. h2 is not — it titles cards, tiles and table columns
   as well as sections. A blanket `h2` here computes to (0,1,2) and would outrank considered
   component rules like `.build-copy h2` at (0,1,1), flattening every one of them to a
   section-heading size. So section headings are named explicitly instead. */
body:not(.carousel-mode) main > section > h2,
body:not(.carousel-mode) .section-heading > h2,
body:not(.carousel-mode) .discovery-section-head > h2,
body:not(.carousel-mode) .alt-group > h2 {
  font-family:var(--display);
  font-size:clamp(var(--text-28), 3.4vw, var(--text-44));
  line-height:1.08;
  letter-spacing:var(--track-display);
  font-weight:600;
  text-wrap:balance;
}

/* An intro paragraph is the one piece of body copy allowed to be large, because it carries
   the sentence that decides whether someone keeps reading. */
body:not(.carousel-mode) .intro {
  font-size:clamp(var(--text-16), 1.5vw, var(--text-20));
  line-height:1.55;
  max-width:62ch;
  color:var(--muted);
}

/* ── 3. Labels ──────────────────────────────────────────────────────────────────────────
   Small monospaced labels are the only decorative type on the page. They sit above a
   heading and are set in the mono face, uppercase, widely tracked — the counterweight to a
   very large display line. */
body:not(.carousel-mode) .eyebrow,
body:not(.carousel-mode) .tiny-label {
  font-family:var(--mono);
  font-size:var(--text-11);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--muted);
}

/* ── 4. Surfaces ────────────────────────────────────────────────────────────────────────
   Fewer boxes. A card is defined by the photograph and the space around it, not by a
   border and a shadow, so the hardware is the only thing with edges. */
body:not(.carousel-mode) .device-card .card-visual { border-color:var(--line); }
/* Size contrast only works if the small things stay small: a card title drops a step while
   the page's display line grows. */
body:not(.carousel-mode) .device-card .card-copy h2 {
  font-size:var(--text-24);
  letter-spacing:var(--track-tight);
  line-height:1.12;
}

/* Tables carry technical detail, so they stay legible and lose their heavier rules. */
body:not(.carousel-mode) table.comparison th,
body:not(.carousel-mode) table.comparison td,
body:not(.carousel-mode) table.alt-table th,
body:not(.carousel-mode) table.alt-table td { border-color:var(--line); }

/* ── 5. Controls ────────────────────────────────────────────────────────────────────────
   One accent, used sparingly, on a near-black page. */
body:not(.carousel-mode) .button { letter-spacing:var(--track-tight); }

/* ── 9. The catalogue ────────────────────────────────────────────────────────────────────
   Same language as the homepage, on this page's own selectors: .hardware-intro holds the
   heading and standfirst, .discovery-directory holds the filters and the grid. */

body[data-page=catalog] .hardware-intro {
  padding-block:clamp(56px,8vh,104px) var(--space-40);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-40);
}
body[data-page=catalog] .hardware-intro h1 {
  font-size:clamp(var(--text-40),5.5vw,var(--text-72));
  line-height:1;
  letter-spacing:var(--track-display);
  max-width:14ch;
}
/* The standfirst ran the full 1197px of the shell. Long measures are the single easiest
   way to make a page tiring to read; this caps it near the 60-75 characters that prose
   wants regardless of how wide the window is. */
body[data-page=catalog] .hardware-intro > p {
  max-width:62ch;
  margin-top:var(--space-24);
  font-size:var(--text-16);
  line-height:1.6;
  color:var(--muted);
}
body[data-page=catalog] .hardware-intro > a {
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  margin-top:var(--space-28);
  font:500 var(--text-11)/1 var(--mono);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}

/* The task tabs become navigation type rather than buttons competing with the heading. */
body[data-page=catalog] .task-nav > a {
  font:500 var(--text-11)/1 var(--mono);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}

/* ── 10. Device pages ────────────────────────────────────────────────────────────────────
   The heading already grew when the display sizes were consolidated. What was missing is
   the rest of the language: navigation set as small mono, hairlines separating the major
   blocks, and a reading measure on the prose. */

body[data-page=device] .device-back-row a,
body[data-page=device] .device-section-nav a {
  font:500 var(--text-11)/1 var(--mono);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body[data-page=device] .device-back-row { padding-block:var(--space-28) 0; }
body[data-page=device] .device-section-nav {
  border-block:1px solid var(--line);
  padding-block:var(--space-20);
  margin-block:var(--space-40);
  display:flex;
  gap:var(--space-32);
  flex-wrap:wrap;
}
body[data-page=device] .device-related {
  border-top:1px solid var(--line);
  padding-top:var(--space-64);
  margin-top:var(--space-72);
}
/* Technical prose still wants a measure. These paragraphs ran the full column width. */
body[data-page=device] .device-intro > p,
body[data-page=device] .device-reference-layout p { max-width:68ch; }
/* The purchase note added with the honest buy labels reads as a footnote, not body copy. */
body[data-page=device] .purchase-note { font-size:var(--text-12); color:var(--muted); }

/* ── 11. Category pages ──────────────────────────────────────────────────────────────────
   Static /hardware/<category>/ pages exist now, so the categories are real links rather
   than JS-only filter URLs. Same navigation type as the task tabs, with the count set small. */
body[data-page=catalog] .category-nav {
  display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-24);
  padding-block:var(--space-16); border-top:1px solid var(--line);
}
body[data-page=catalog] .category-nav a {
  display:inline-flex; align-items:baseline; gap:var(--space-8); min-height:44px;
  font:500 var(--text-11)/1 var(--mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted);
}
body[data-page=catalog] .category-nav a[aria-current=page] { color:var(--ink); }
body[data-page=catalog] .category-nav a span { font-size:var(--text-10); color:var(--muted); letter-spacing:0; }

/* Guides that apply to a device, under its related-hardware heading. */
body[data-page=device] .device-guides { display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-24); margin:calc(-1 * var(--space-16)) 0 var(--space-24); }
body[data-page=device] .device-guides a { display:inline-flex; align-items:center; gap:var(--space-8); min-height:44px; font-size:var(--text-13); }

/* ── 12. Framer Theme Aesthetic Harmonization ────────────────────────────────────────── */
:root {
  --bg: #090b0e;
  --surface: #12151b;
  --ink: #f2f5f9;
  --muted: #8792a2;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --strong-line: rgba(255, 255, 255, 0.28);
  --accent: #fbe154;
  --accent-soft: rgba(251, 225, 84, 0.12);
  --image-stage: #161920;
  --feature-bg: #0d0f13;
  --feature-ink: #f2f5f9;
  --demo-bg: #0e1115;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

body:not(.carousel-mode) {
  background: var(--bg);
  color: var(--ink);
}

/* (A rule here once forced border-radius: 0 !important on every button, field, card and
   dialog. Components now set their own corners; --radius stays 0 for anything that doesn't.) */

body:not(.carousel-mode) .site-header,
body:not(.carousel-mode) .workbench-header {
  background: rgba(13, 15, 19, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

body:not(.carousel-mode) .site-footer,
body:not(.carousel-mode) .discovery-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

body:not(.carousel-mode) .device-card {
  background: var(--surface);
  border-color: var(--line);
}
body:not(.carousel-mode) .device-card:hover {
  border-color: var(--strong-line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
body:not(.carousel-mode) .device-card .card-visual {
  background: #161920;
  border-color: var(--line);
}
body:not(.carousel-mode) .device-card .card-visual .device-art {
  background: transparent;
}
body:not(.carousel-mode) .device-card .card-controls {
  border-color: var(--line);
}

body:not(.carousel-mode) .button.primary {
  background: var(--accent);
  color: #12151b;
  font-weight: 700;
}
body:not(.carousel-mode) .button.primary:hover {
  background: #ffe96b;
}

body:not(.carousel-mode) .button.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
body:not(.carousel-mode) .button.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--strong-line);
}

body:not(.carousel-mode) .search-field {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
body:not(.carousel-mode) .search-field input {
  color: var(--ink);
}

body:not(.carousel-mode) select {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

body:not(.carousel-mode) .device-overview .device-photo .device-art {
  background: #161920;
  border: 1px solid var(--line);
}
body:not(.carousel-mode) .device-overview .device-photo .device-art img,
body:not(.carousel-mode) .card-visual img {
  mix-blend-mode: normal;
}

body:not(.carousel-mode) .device-maker-offer {
  background: rgba(251, 225, 84, 0.08);
  border-color: rgba(251, 225, 84, 0.25);
  color: var(--ink);
}
body:not(.carousel-mode) .device-maker-offer>summary>span,
body:not(.carousel-mode) .device-maker-offer small {
  color: var(--muted);
}
body:not(.carousel-mode) .device-offer-code code {
  background: var(--surface);
  border-color: rgba(251, 225, 84, 0.35);
  color: var(--accent);
}
body:not(.carousel-mode) .device-offer-code button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

body:not(.carousel-mode) .device-resource-list > a,
body:not(.carousel-mode) .device-spec-group {
  background: var(--surface);
  border-color: var(--line);
}

body:not(.carousel-mode) .guide-tile,
body:not(.carousel-mode) .guide-pick,
body:not(.carousel-mode) .builds-card,
body:not(.carousel-mode) .comparison-scroll,
body:not(.carousel-mode) .hero-guide,
body:not(.carousel-mode) .sidebar-guide,
body:not(.carousel-mode) .filter-panel,
body:not(.carousel-mode) .session-checklist li {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
body:not(.carousel-mode) .session-checklist li:has(input:checked) {
  background: rgba(28, 192, 57, 0.08);
  border-color: rgba(28, 192, 57, 0.3);
}
body:not(.carousel-mode) .session-checklist li:has(input:checked) label span {
  color: rgba(255, 255, 255, 0.4);
}
body:not(.carousel-mode) table.comparison th,
body:not(.carousel-mode) table.comparison td,
body:not(.carousel-mode) table.comparison th:first-child,
body:not(.carousel-mode) table.comparison thead th,
body:not(.carousel-mode) table.comparison tbody tr td,
body:not(.carousel-mode) table.comparison tbody tr:nth-child(-n+3) td {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
body:not(.carousel-mode) table.comparison tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

body:not(.carousel-mode) .task-nav > a {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
}
body:not(.carousel-mode) .task-nav > a[aria-current=true] {
  background: var(--accent);
  color: #12151b;
  border-color: var(--accent);
}

/* ── 13. Supporting Page Dark Theme Harmonization ────────────────────────────────────── */

/* Universal form inputs & dialogs */
body:not(.carousel-mode) input:not([type=checkbox]):not([type=radio]),
body:not(.carousel-mode) textarea,
body:not(.carousel-mode) select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
body:not(.carousel-mode) input::placeholder,
body:not(.carousel-mode) textarea::placeholder {
  color: var(--muted);
  opacity: 0.65;
}
body:not(.carousel-mode) dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--strong-line);
}

/* /for-makers/ (Maker Pilot) */
.maker-pilot {
  color: var(--ink);
  --pilot-muted: var(--muted);
  --pilot-line: var(--line);
  --pilot-lime: var(--accent);
}
.pilot-example {
  background: var(--surface);
  border-color: var(--line);
}
.pilot-example-header {
  border-bottom-color: var(--line);
}
.pilot-example-badge {
  background: rgba(251, 225, 84, 0.15);
  color: var(--accent);
}
.pilot-example-photo {
  background: #161920;
}
.pilot-example-photo img {
  mix-blend-mode: normal;
}
.pilot-part-image {
  background: #161920;
}
.pilot-part-image img {
  mix-blend-mode: normal;
}
.pilot-example-parts {
  border-top-color: var(--line);
}
.pilot-example-parts > a {
  border-bottom-color: var(--line);
  color: var(--ink);
}
.pilot-disclosure {
  border-top-color: var(--line);
}
.pilot-field :is(input,textarea,select) {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.pilot-field :is(input,textarea,select):focus {
  border-color: var(--accent);
}
.pilot-button-ink {
  background: var(--accent);
  color: #12151b;
}
.pilot-button-ink:hover {
  background: #ffe96b;
  color: #12151b;
}
.pilot-button-outline {
  border-color: var(--line-strong);
  color: var(--ink);
}
.pilot-button-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}
.pilot-offer {
  border-top-color: var(--line);
}

/* /builds/scout-lite/ (Scout Companion) */
body[data-page="scout-companion"] {
  background: var(--bg);
}
.scout-companion {
  --scout-ink: var(--ink);
  --scout-muted: var(--muted);
  --scout-line: var(--line);
  --scout-lime: var(--accent);
  color: var(--ink);
}
.scout-hero-photo {
  background: #161920;
  border: 1px solid var(--line);
}
.scout-part-photo {
  background: #161920;
}
.scout-firmware-map {
  background: var(--surface);
  border-color: var(--line);
}
.scout-firmware-target + .scout-firmware-target {
  border-top-color: var(--line);
}
.scout-companion code {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
.scout-primary {
  background: var(--accent);
  color: #12151b;
}
.scout-primary:hover {
  background: #ffe96b;
}
.scout-maker-line strong,
.scout-part-copy strong {
  color: var(--ink);
}
.scout-guide-grid {
  border-top-color: var(--line);
}
.scout-part {
  border-bottom-color: var(--line);
}
.scout-download {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}
.scout-download:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* /saved/ (Inventory) */
.inventory-panel {
  color: var(--ink);
  --ink: var(--ink);
  --muted: var(--muted);
  --line: var(--line);
  --surface: var(--surface);
  --bg: var(--bg);
}
.inventory-form {
  background: var(--surface);
  border-color: var(--line);
}
.inventory-photo {
  background: #161920;
}
.inventory-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #12151b;
}
.inventory-primary:hover {
  background: #ffe96b;
  border-color: #ffe96b;
}
.inventory-button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.inventory-button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.inventory-remove {
  border-color: var(--line);
  color: var(--muted);
}
.inventory-remove:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.inventory-row {
  border-top-color: var(--line);
}
.inventory-name > :where(a,strong) {
  color: var(--ink);
}
.inventory-list-heading p {
  color: var(--ink);
}
.inventory-empty {
  border-top-color: var(--line);
}

/* /builds/ (Build Finder) */
.bf-revision {
  background: rgba(251, 225, 84, 0.08);
  border-left-color: var(--accent);
  color: var(--ink);
}
.bf-card {
  background: var(--surface);
  border-color: var(--line);
}
.bf-add,
.bf-setup {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.bf-add:hover,
.bf-setup:hover {
  background: rgba(255, 255, 255, 0.08);
}
.builds-invitation {
  background: var(--surface);
  border-color: var(--line);
}

/* /setup/ (Kit & Setup Cards) */
.setup-card-preview {
  background: #161920;
}
.setup-card-format:has(input:checked) {
  background: rgba(251, 225, 84, 0.12);
  border-color: var(--accent);
}
.kit-object {
  background: var(--surface);
  border-color: var(--line);
}
.kit-object-image {
  background: #161920;
}