/* =========================================================================
   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.
   Checkboxes and radios are NOT excluded: they have no border to darken, so
   they take this ring like any other control. So does a heading given a
   programmatic tabindex (the cookie banner's title, refocused on reopen). */
:focus-visible:where(:not(input:not([type="checkbox"], [type="radio"]), 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. */

/* 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 (§4.4) is the body face at the default tracking. The face is inherited;
   the tracking is restated because an em letter-spacing inherits as the px it
   resolved to on the ancestor, so a 12px value would otherwise carry the 16px
   body's −0.48px. Every Theme rule that sets its own size keeps its tracking for the same reason. */
.num {
  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; }

/* Quantity stepper (§7.3) — `− 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 Pebble wash. Each button draws 28×32 but
   reaches 44×44 through an invisible ::after, so the touch floor holds without
   the row growing. */
.stepper {
  display: inline-grid;
  grid-template-columns: 28px auto 28px;
  align-items: stretch;
  height: var(--h-btn-sm);
}
.stepper button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-16);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.stepper button:hover { background: var(--paper-soft); color: var(--ink); }
.stepper button::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2));
}
.stepper input {
  width: 3.5ch;
  padding: 0;
  text-align: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button:focus-visible,
.stepper input:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* ---------- Badges -------------------------------------------------------
   The §7.6 badge is `.core-badge` in the plugin's core-badge.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-soft); }
/* §7.28: a chosen swatch is a 2px Ink border, one weight, no extra ring. The
   swatches are radios in a radiogroup, so the state is aria-checked. */
.swatch[aria-checked="true"] { border: 2px solid var(--ink); }
.swatch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* 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". */

/* A line's name as brand then type (maintainer sign-off 2026-10-15): "Make My
   Desk" at the name's own size, the module word in its accent (inline, from
   Core_Brand_Accents::brand_name_html()), then the type alone underneath in
   Ink Soft. The basket, the drawer, the order summary and My Account share it
   through makemy_brand_line_html(). Accent text below 4.5:1 on Door, Desk and
   Cabinet is the pinned waiver (design-contrast.test.js); the word it
   colours is never the only thing naming the line. */
.mm-brand-line,
.mm-brand-line__brand,
.mm-brand-line__type { display: block; }
.mm-brand-line__type {
  margin-top: 2px;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  color: var(--ink-soft);
}