/* =========================================================================
   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); }

/* 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: 2px solid var(--accent);
  outline-offset: 2px;
  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) — and the theme-sheet rules that take it without the
   class (efficiency #499, as #229 did for buttons). Only the four type
   properties are shared: each joined rule keeps its own font-family, colour
   and box in its home sheet, so nothing picks up `.label`'s Ink Muted. Every
   sheet here loads after design-base, and no rule of equal specificity sits
   between, so moving these four declarations earlier changes no winner.
   Deliberately NOT joined: rules inside a media query (`.mmj-foot__label`,
   `.mm-mega__bar-title`), and near-misses at another size or weight
   (`.badge`, `.eyebrow`, the WooCommerce tabs and sale badge). The block
   sheets take the same four through `@mixin label-role` in _shared.scss. */
.label,
.mmj-total__label,
form .mmc .form-row label,
.mmo-stats__label,
.woocommerce form .form-row label,
.mm-mega__more,
.ft__heading,
.ft__bar {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.label {
  font-family: var(--font-sans);
  color: var(--ink-muted);
}
.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: exactly ONE word per page, 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 body for the whole theme — and for the vendor markup that cannot
   be given a class (efficiency #229). WooCommerce prints its own `.button`
   elements from templates we do not own (the shop loop, account pages, the
   coupon / update-basket controls, notice actions), so those selectors are
   comma-joined into the canonical rules here rather than restated as a second
   body in `woocommerce.css`. (The basket drawer's links used to join too; its
   template is ours now — woocommerce/cart/mini-cart.php — and uses `.btn`.)

   Each joined selector keeps its own (higher) specificity, so it still beats
   WooCommerce's own sheet — which prints first, because plugin styles enqueue
   ahead of theme styles. The `.alt` join exists for the same reason it did in
   `woocommerce.css`: WooCommerce states `.alt` at one class more than its base
   rule, so the base join alone would lose to it.

   `justify-content`, `cursor` and `text-decoration` are declared on the base
   because the vendor markup needs them — an `input.button` inherits neither a
   pointer cursor nor a centred label — and none of the three changes how an
   auto-width `.btn` renders. */
.btn,
.woocommerce :is(a, button, input).button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-control);
  padding: 0 var(--sp-5);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color      var(--dur-fast) var(--ease),
              border     var(--dur-fast) var(--ease),
              transform  var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active,
.woocommerce :is(a, button, input).button:active,
.woocommerce #respond input#submit:active { transform: translateY(1px); }

.btn--secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-interactive);
}
.btn--secondary:hover { border-color: var(--ink); }

.btn--primary,
.woocommerce :is(a, button, input).button,
.woocommerce :is(a, button, input).button.alt,
.woocommerce #respond input#submit {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover,
.woocommerce :is(a, button, input).button:hover,
.woocommerce :is(a, button, input).button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: oklch(from var(--ink) calc(l + 0.08) c h);
  color: var(--paper);
}

/* Re-homed from main.css (CSS consolidation 2026-07-15): text-only button. */
.btn--text {
  padding: 0;
  background: none;
  border: none;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Two-line advancing button (§11.4) — the action on line one, the name of the
   step it leads to on line two, in Num. The pattern for ANY button that
   advances a sequence, so it lives here rather than in a journey sheet.
   The sub-label reuses Core's established Paper-70% recipe rather than Ink
   Faint: §3.3 reserves Ink Faint for placeholder and disabled glyphs, and this
   line carries real information (what's next). */
.btn--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: auto;
  min-height: var(--h-btn-lg);
  padding-block: var(--sp-2);
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}
.btn__next {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}

.btn--lg { height: var(--h-btn-lg); padding: 0 var(--sp-6); font-size: var(--fs-16); }
.btn--sm { height: var(--h-btn-sm); padding: 0 var(--sp-3); font-size: var(--fs-13); border-radius: var(--r-xs); }
.btn--full { width: 100%; justify-content: center; }

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

.input {
  display: flex;
  align-items: center;
  height: var(--h-control);
  width: 100%;
  padding: 0 var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  transition: border var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:focus { outline: 0; border-color: var(--ink); box-shadow: var(--focus-ring); }
.input[readonly] { background: var(--paper-soft); color: var(--ink-soft); }

/* Search form (Theme/searchform.php) — a 44px `.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: -6px -8px;
}
.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 (selectable) -------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h-chip);
  padding: 0 var(--sp-3);
  font-size: var(--fs-13);
  background: var(--paper);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  transition: border var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ---------- 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". */