/* =========================================================================
   Make My — Base styles & shared components
   Loads after main.css, which owns the tokens and the reset. This sheet is
   enqueued straight after it with main.css as its only dependency, so no
   other stylesheet can print between the two: a rule here that repeats one of
   main.css's at the same specificity is inert whatever else loads, which is
   why only the additions below remain. `html, body` margin/padding and `button`
   stay because they sit at (0,0,1) over main.css's zero-specificity `*` and
   `:where(button)` rules; `html`'s background paints the canvas.
   ========================================================================= */

html, body { margin: 0; padding: 0; }

html {
  background: var(--paper);
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* main.css's `button` rule carries background/border/cursor; this adds the
   (0,0,1) font and colour inherit. */
button { font: inherit; color: inherit; }
/* Zero specificity (`:where()`) like main.css's bare form rules, so a
   component class always outranks the element layer. */
:where(input, select, textarea) { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* §3.8 — every non-field control takes the 3px Accent Tint ring, the same
   ring a field wears (maintainer ruling, 2026-09-30: the 2px accent outline
   was rejected on look). It is an OUTLINE rather than --focus-ring's
   box-shadow so a component's own box-shadow can't erase it and it survives
   forced-colours mode; it reads --accent-tint at the element, so a
   configurator scope's accent resolves correctly.
   Form fields are excluded (zero-cost `:where(:not())`, keeps (0,1,0)):
   their focus state is the --focus-ring + ink border from main.css's form
   block, not this outline. Before the bare form rules were `:where()`-zeroed
   the (0,1,1) `input:focus` suppressed it; the exclusion keeps that intent. */
:focus-visible:where(:not(input, select, textarea)) {
  outline: 3px solid var(--accent-tint);
  outline-offset: 0;
  border-radius: var(--r-xs);
}

/* ---------- Typography primitives ----------------------------------------
   The Display registers (§4.3/§4.4) are deliberately NOT a class here. Nothing
   ever adopted `.display-xl` / `-lg` / `-md`, and the blocks that need a
   Display size state the `--fs-*` / `--lh-*` / `--tracking-*` tokens against
   Design.md §4.4 directly in their own style.scss. Read the § — not a
   convenience class nobody used. */

.title {
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
}
.body    { font-size: var(--fs-16); line-height: var(--lh-body); }
.mono    { font-family: var(--font-sans); letter-spacing: var(--tracking-normal); }
/* The Label role (§4.4) is `.core-label` in the plugin's core-controls.css,
   with the Theme rules that take its four type properties without the class
   joined there (efficiencies #499, #558). */
.num {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
}

/* The accent term (§3.6, §8.5, §15.14) — the network's one expressive use of
   accent: at most ONE word or short phrase per heading (several per page,
   ruled 2026-09-30), naming the subject. Applied by the
   editor's "Accent term" RichText format (see
   Theme/src/blocks/section-header/accent-term-format.js).
   Restricted to Display sizes (≥28px) — §3.5 puts accent text below 28px on a
   4.5:1 threshold that Door, Desk and Cabinet all miss. Never in body copy,
   never in a control. */
.accent-term { color: var(--accent); }
/* Corn measures 2.05:1 and fails even the 3:1 display threshold, so Cabinet's
   accent term is set in Ink (§3.6) — on the Cabinet site, and on a hub block
   whose Product setting is Cabinet (inc/product-accent.php stamps the
   `data-product`). */
[data-site="cabinet"] .accent-term,
[data-product="cabinet"] .accent-term { color: var(--ink); }

/* ---------- Buttons -------------------------------------------------------
   One button family, and it is the plugin's: `.core-btn` in core-controls.css,
   which the Theme loads on every page (enqueue.php). The `.btn` classes — and
   WooCommerce's `.button` markup, which cannot take a class — are comma-joined
   onto those rules there (efficiency #558), so there is no button body here.
   Design.md §7.1: new markup uses `.core-btn`. */

/* ---------- Form controls ------------------------------------------------- */

/* Fields are `.core-input` (the plugin's core-controls.css, loaded on every
   page) — the `.input` body that sat here was a second copy of it
   (efficiency #558). */

/* Search form (Theme/searchform.php) — a 44px `.core-input` and a 44px
   `.btn--primary` on one rung (§5.4); the field grows, the button keeps its
   width. The header overlay restyles the same form in header.css. */
.search-form { display: flex; align-items: center; gap: var(--sp-2); }
.search-form .search-field { flex: 1 1 auto; min-width: 0; }
.search-form .search-submit { flex: 0 0 auto; }

/* Number with steppers */
.stepper {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: stretch;
  height: var(--h-control);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
.stepper:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.stepper button {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.stepper button:hover { background: var(--paper-soft); color: var(--ink); }
.stepper input {
  text-align: center;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-normal);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bare stepper — `− 2 +` with no box (the designer's basket mock-ups,
   2026-09-25). Used wherever a basket line's quantity is edited: the basket
   page, its cut-list table and the basket drawer. The glyphs are quiet until
   hovered, when they take the same Pebble wash as the boxed stepper. Each
   button draws 28×32 but reaches 44×44 through an invisible ::after, so the
   touch floor holds without the row growing. */
.stepper--bare {
  display: inline-grid;
  grid-template-columns: 28px auto 28px;
  width: auto;
  height: var(--h-btn-sm);
  border: 0;
  background: transparent;
  overflow: visible;
}
.stepper--bare:focus-within { box-shadow: none; }
.stepper--bare button {
  position: relative;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-16);
  color: var(--ink-muted);
  cursor: pointer;
}
.stepper--bare button::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2));
}
.stepper--bare button:focus-visible,
.stepper--bare input:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.stepper--bare input {
  width: 3.5ch;
  padding: 0;
  border-radius: var(--r-xs);
  font-size: var(--fs-16);
  color: var(--ink);
}

.field { display: grid; gap: var(--sp-2); }

/* ---------- Cards & surfaces --------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

/* ---------- Spec pair (§9.3) ---------------------------------------------
   Two-column key/value. Key in Body SM Ink Muted left; value right-aligned,
   in Num where the value is numeric (add `.num` in the markup — a material
   name is prose and stays in Lexend). Hairline between rows, none after the
   last. Named in §9.6 as a block that didn't exist yet; built here generically
   so the basket, the checkout review and the confirmation summary all read
   from one design.

   Markup is a real <dl> so the key/value relationship survives a screen
   reader:  <dl class="spec-pair"><dt>Dimensions</dt><dd class="num">597×797mm</dd>…

   Row padding is 8px, not the prototype's 6px — §5.1's 4px grid has no 6px
   step and one extra pixel a side is not worth breaking it for. */

.spec-pair {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-6);
  margin: 0;
}
.spec-pair dt,
.spec-pair dd {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.spec-pair dt { color: var(--ink-muted); }
.spec-pair dd {
  margin: 0;
  text-align: right;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}
.spec-pair dt:last-of-type,
.spec-pair dd:last-of-type { border-bottom: 0; }

/* §3.3 — Ink Muted is Paper-only, so a spec pair placed on a Pebble surface
   (≈4.3:1) must step its keys up to Ink Soft. Stated here as a note rather
   than a `.spec-pair--on-soft` rule: no surface in the theme does that today,
   and the modifier sat unused. Add the rule back WITH the markup that needs
   it, and add the pairing to tests/js/Theme/design-contrast.test.js. */

/* ---------- Badges -------------------------------------------------------
   The §7.6 badge is `.core-badge` in the plugin's core-controls.css, which
   the Theme loads on every page (enqueue.php). The `.badge` family that lived
   here had no markup left and had drifted from the plugin's copy. */

/* ---------- Chip ---------------------------------------------------------
   The §7.7 chip is `.core-chip` in the plugin's core-controls.css (efficiency
   #558). The `.chip` that sat here had no markup. */

/* ---------- Swatch (material picker) ------------------------------------- */

.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  text-align: left;
}
.swatch:hover { border-color: var(--ink-muted); }
.swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.swatch__sample {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xs);
  background: var(--paper-soft);
  border: 1px solid var(--rule-interactive); /* §7.8 — a white material still has an edge */
  position: relative;
  overflow: hidden;
}
.swatch__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--sp-1) var(--sp-1);
  gap: var(--sp-2);
}
.swatch__name { font-size: var(--fs-13); font-weight: var(--fw-regular); }
.swatch__delta {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--ink-muted);
}

/* A swatch's sample is filled from the material record's own `texture_url` /
   colour by the plugin's material rail (Core_Materials / CoreMaterialSwatch),
   which is the single source of what a board looks like. The CSS-gradient
   `.grain--<species>` placeholders that stood in before that shipped are gone;
   don't reintroduce a hand-authored wood palette here — it would be a second
   answer to "what colour is Oak". */