/* mm-base.css: MadeMirror Liquid Mirror base layer (FINAL-DESIGN §2, §3, §10, §11).
   Self-wraps in @layer mm.base. Link after mm-fonts.css and mm-tokens.css.

   Cascade note for beauty.html: there, mm.base is a layer AFTER `legacy`, so anything written here beats
   legacy rules regardless of specificity. Therefore:
   - The opinionated element reset (margins, button and link resets, block media) is scoped to
     `body:not(.store)`, i.e. pages that do not depend on styles.css (index.html, beauty-insights.html).
   - Rules that intentionally re-skin every page (body type and colors, focus ring, selection) stay global.
   - Every .mm-* component sets all of its own box, type and color properties, so legacy `.button`
     declarations (Manrope, uppercase, 48px gap, hover lift) cannot leak through.
   Reduced motion: there is no universal animation kill here. The duration tokens shrink below, and each
   surface owns its reduced-motion branch (§11), which keeps the short meaningful fades the spec asks for. */

@layer mm.base {

  /* ---------- reset (global, safe on legacy pages) ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    color-scheme: dark;
    scrollbar-color: var(--mm-line-3) transparent;
    -webkit-tap-highlight-color: transparent;
  }
  :root:has(> body.mm-paper) { color-scheme: light; scrollbar-color: var(--mm-rule-3) transparent; }
  body {
    margin: 0;
    background: var(--mm-bg);
    color: var(--mm-fg-1);
    font: 400 var(--mm-fs-body)/1.55 var(--mm-f-display);
    font-stretch: 100%;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: var(--mm-accent-text);
  }
  [hidden] { display: none !important; }
  ::selection { background: color-mix(in oklab, var(--mm-shade) 45%, transparent); color: var(--mm-fg-1); }
  :where(.mm-paper, .mm-ink) { color: var(--mm-fg-1); }
  :where(section[id], [id].mm-anchor) { scroll-margin-top: 96px; }

  /* ---------- reset (opinionated, pages without legacy CSS only) ---------- */
  :where(body:not(.store)) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset) { margin: 0; }
  :where(body:not(.store)) :where(ul, ol)[role="list"] { padding: 0; list-style: none; }
  :where(body:not(.store)) :where(img, canvas, video, svg, picture) { display: block; max-width: 100%; }
  :where(body:not(.store)) :where(h1, h2, h3, h4) { font-weight: 400; text-wrap: balance; }
  :where(body:not(.store)) :where(p, li, dd) { text-wrap: pretty; }
  :where(body:not(.store)) :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  :where(body:not(.store)) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
  :where(body:not(.store)) :where(button) { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
  :where(body:not(.store)) :where(fieldset) { border: 0; padding: 0; min-width: 0; }

  /* ---------- focus (§3.18) ---------- */
  :focus-visible { outline: 2px solid var(--mm-focus); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: none; }

  /* ---------- accessibility helpers ---------- */
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .mm-skip {
    position: fixed; left: 16px; top: 16px; z-index: calc(var(--mm-z-grain) + 1);
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border-radius: var(--mm-r-pill); background: var(--mm-silver-1); color: var(--mm-ink-0);
    font: 500 var(--mm-fs-ui)/1 var(--mm-f-display); text-decoration: none;
    transform: translateY(calc(-100% - 32px)); transition: transform var(--mm-t-state) var(--mm-ease-out);
  }
  .mm-skip:focus, .mm-skip:focus-visible { transform: none; outline-color: var(--mm-silver-1); }

  /* ---------- layout utility (§4) ---------- */
  .mm-container { width: min(100% - 2 * var(--mm-gutter), var(--mm-maxw)); margin-inline: auto; }

  /* ---------- typography roles (§2) ---------- */
  .mm-display {
    font-family: var(--mm-f-display); font-size: var(--mm-fs-display); font-weight: var(--mm-w-display); font-stretch: 125%;
    line-height: .92; letter-spacing: .012em; text-transform: uppercase; font-style: normal;
  }
  .mm-leadin { font-family: var(--mm-f-display); font-size: var(--mm-fs-leadin); font-weight: var(--mm-w-leadin); font-stretch: 100%; line-height: 1.15; }
  .mm-h1, .mm-h2, .mm-h3, .mm-serif {
    font-family: var(--mm-f-serif); font-weight: var(--mm-w-serif); font-stretch: 100%; font-style: normal;
    font-optical-sizing: auto; font-variant-numeric: lining-nums tabular-nums; text-transform: none; text-wrap: balance;
  }
  .mm-h1 { font-size: var(--mm-fs-h1); line-height: 1.02; letter-spacing: -.01em; }
  .mm-h2 { font-size: var(--mm-fs-h2); line-height: 1.04; letter-spacing: -.01em; }
  .mm-h3 { font-size: var(--mm-fs-h3); line-height: 1.12; letter-spacing: -.005em; }
  /* MadeMirror's own pages use the sturdy sans for every editorial heading (the thin Bodoni read weak on
     phones); the NO. 08 sample storefront (body.store) keeps its serif as its own brand type. */
  body:not(.store) { --mm-f-serif: var(--mm-f-display); --mm-w-serif: 600; --mm-w-serif-em: 600; }
  body:not(.store) :is(.mm-h1, .mm-h2, .mm-h3) { letter-spacing: -.02em; }
  body:not(.store) :is(.mm-h1, .mm-h2, .mm-h3) em { font-style: normal; padding-bottom: 0; }
  /* One italic phrase per heading, in the shade. Descender-safe (yours, journey, beauty). */
  :is(.mm-h1, .mm-h2, .mm-h3) em {
    font-family: var(--mm-f-serif); font-style: italic; font-weight: var(--mm-w-serif-em);
    color: var(--mm-accent-text); line-height: 1.1; padding-bottom: .08em;
    transition: color var(--mm-t-shade) var(--mm-ease-out);
  }
  /* Display accent ("ON YOU."): same face, lit in the shade, not italic. */
  .mm-display :is(em, strong) { font: inherit; color: var(--mm-accent-text); transition: color var(--mm-t-shade) var(--mm-ease-out); }
  .mm-number {
    font-family: var(--mm-f-display); font-size: var(--mm-fs-number); font-weight: var(--mm-w-number); font-stretch: 118%;
    line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
  }
  .mm-lead { font-size: var(--mm-fs-lead); line-height: 1.55; color: var(--mm-fg-2); max-width: 56ch; text-wrap: pretty; }
  .mm-body { color: var(--mm-fg-2); max-width: 62ch; text-wrap: pretty; }
  .mm-small { font-size: var(--mm-fs-small); line-height: 1.5; color: var(--mm-fg-3); }
  .mm-mono {
    font-family: var(--mm-f-mono); font-size: var(--mm-fs-mono); font-weight: 450; font-stretch: 100%;
    line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-fg-3);
  }
  .mm-mono :is(b, strong) { font-weight: 500; color: var(--mm-fg-1); }
  .mm-mono-num { font-family: var(--mm-f-mono); font-size: var(--mm-fs-mono-num); font-weight: 450; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .mm-tabular { font-variant-numeric: tabular-nums; }

  /* Sentence case for QA strings whose source is uppercase (§2). Never on flex/grid boxes. */
  .mm-case { text-transform: lowercase; display: inline-block; }
  .mm-case::first-letter { text-transform: uppercase; }

  /* ---------- icons (§3.17): inline sprite, 1.5px stroke, 24 grid ---------- */
  .i {
    width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .i-sm { width: 14px; height: 14px; }

  /* The MadeMirror mark: a small dot in the live shade. */
  .mm-dot {
    display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--mm-shade); transition: background-color var(--mm-t-shade) var(--mm-ease-out);
  }

  /* ---------- buttons (§3.1) ---------- */
  .mm-btn {
    --mm-btn-h: 48px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--mm-btn-h); height: auto; min-width: 0; margin: 0; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--mm-r-pill);
    background: transparent; color: var(--mm-fg-1); box-shadow: none;
    font: 500 var(--mm-fs-ui)/1.1 var(--mm-f-display); font-stretch: 100%; letter-spacing: -.005em;
    text-transform: none; text-decoration: none; text-align: center; white-space: nowrap;
    cursor: pointer; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transform: none;
    transition:
      transform var(--mm-t-press) var(--mm-ease-out),
      background-color var(--mm-t-state) var(--mm-ease-out),
      border-color var(--mm-t-state) var(--mm-ease-out),
      color var(--mm-t-state) var(--mm-ease-out),
      box-shadow var(--mm-t-state) var(--mm-ease-out);
  }
  .mm-btn:active { transform: scale(.97); }
  .mm-btn .i { width: 18px; height: 18px; transition: transform var(--mm-t-pop) var(--mm-ease-out); }
  .mm-btn .i-sm { width: 14px; height: 14px; }
  .mm-btn__icon {
    display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -12px;
    border-radius: 50%; background: color-mix(in oklab, currentColor 14%, transparent);
    transition: transform var(--mm-t-pop) var(--mm-ease-out);
  }
  .mm-btn__icon .i { width: 14px; height: 14px; }
  @media (hover: hover) and (pointer: fine) {
    .mm-btn:hover > .i:last-child, .mm-btn:hover .mm-btn__icon { transform: translate(2px, -2px); }
  }

  /* Primary: the live shade. One per view. */
  .mm-btn--shade {
    background: var(--mm-shade); color: var(--mm-on-shade); border-color: transparent;
    box-shadow: var(--mm-shadow-shade), inset 0 1px 0 rgb(255 255 255 / .22);
    transition:
      transform var(--mm-t-press) var(--mm-ease-out),
      --mm-shade var(--mm-t-shade) var(--mm-ease-out),
      --mm-on-shade var(--mm-t-shade) var(--mm-ease-out),
      color var(--mm-t-shade) var(--mm-ease-out),
      box-shadow var(--mm-t-state) var(--mm-ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .mm-btn--shade:hover { box-shadow: 0 14px 34px -12px color-mix(in oklab, var(--mm-shade) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .28); }
  }

  /* Secondary: the rim of light. */
  .mm-btn--line { background: transparent; color: var(--mm-fg-1); border-color: var(--mm-hair-3); }
  @media (hover: hover) and (pointer: fine) {
    .mm-btn--line:hover { border-color: var(--mm-fg-1); background: color-mix(in oklab, var(--mm-fg-1) 4%, transparent); }
  }

  /* Paper pages: graphite fill, MadeMirror shade dot before the label (unless the markup has its own .mm-dot). */
  .mm-btn--ink { background: var(--mm-graphite-1); color: var(--mm-paper-1); border-color: transparent; }
  .mm-btn--ink:not(:has(.mm-dot))::before {
    content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mm-shade-ink);
  }
  .mm-btn--ink .mm-dot { background: var(--mm-shade-ink); }
  @media (hover: hover) and (pointer: fine) {
    .mm-btn--ink:hover { background: #2A2A31; }
  }

  .mm-btn--ghost {
    padding-inline: 12px; background: transparent; border-color: transparent; color: var(--mm-fg-1);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    text-decoration-color: var(--mm-hair-3);
  }
  @media (hover: hover) and (pointer: fine) {
    .mm-btn--ghost:hover { text-decoration-color: var(--mm-accent-text); }
  }

  .mm-btn--sm { --mm-btn-h: 44px; padding: 0 18px; font-size: var(--mm-fs-small); }
  .mm-btn--block { display: flex; width: 100%; }

  /* ---------- nav: chat on WhatsApp (an icon on phones, icon + label on wide screens) and book a call ---------- */
  .mm-nav-chat { flex: none; width: var(--mm-btn-h); margin-left: 8px; padding: 0; gap: 8px; }
  .mm-nav-chat .i { width: 18px; height: 18px; }
  .mm-nav-chat__label { display: none; }
  .mm-nav-book { display: none; }
  @media (min-width: 1200px) { .mm-nav-book { display: inline-flex; margin-left: 8px; } }
  @media (min-width: 1360px) {
    .mm-nav-chat { width: auto; padding: 0 16px; }
    .mm-nav-chat__label { display: inline; }
  }

  .mm-btn:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
  .mm-btn[aria-busy="true"] { cursor: progress; }
  .mm-btn[aria-busy="true"]::after {
    content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid currentColor; border-right-color: transparent;
    animation: mm-spin 800ms linear infinite;
  }
  @keyframes mm-spin { to { transform: rotate(1turn); } }

  /* ---------- link (§3.2) ---------- */
  .mm-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    color: var(--mm-fg-1); font: 500 var(--mm-fs-ui)/1.2 var(--mm-f-display); font-stretch: 100%; letter-spacing: -.005em;
    text-transform: none; text-decoration-line: underline; text-decoration-thickness: 1px;
    text-decoration-color: var(--mm-hair-3); text-underline-offset: 5px;
    transition: text-decoration-color var(--mm-t-state) var(--mm-ease-out);
  }
  .mm-link .i { width: 14px; height: 14px; transition: transform var(--mm-t-pop) var(--mm-ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .mm-link:hover { text-decoration-color: var(--mm-accent-text); }
    .mm-link:hover .i { transform: translate(2px, -2px); }
  }

  /* ---------- chips and tags (§3.3) ---------- */
  .mm-chip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; margin: 0; padding: 0 16px;
    border: 1px solid var(--mm-hair-2); border-radius: var(--mm-r-pill);
    background: transparent; color: var(--mm-fg-1); box-shadow: none;
    font: 500 var(--mm-fs-small)/1.1 var(--mm-f-display); font-stretch: 100%; letter-spacing: 0;
    text-transform: none; text-decoration: none; white-space: nowrap;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: border-color var(--mm-t-state) var(--mm-ease-out), background-color var(--mm-t-pop) var(--mm-ease-out), color var(--mm-t-state) var(--mm-ease-out), transform var(--mm-t-press) var(--mm-ease-out);
  }
  .mm-chip::before { content: ""; position: absolute; inset: -3px 0; } /* 44px hit area */
  .mm-chip:active { transform: scale(.97); }
  .mm-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], .is-selected) {
    border-color: var(--mm-fg-1); background: var(--mm-surface-3);
  }
  .mm-chip--answer:is([aria-pressed="true"], [aria-checked="true"], .is-selected) {
    border-color: var(--mm-shade); background: color-mix(in oklab, var(--mm-shade) 18%, transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    .mm-chip:hover { border-color: var(--mm-hair-3); }
  }

  /* Honesty tag: every simulated or illustrative object carries exactly one. */
  .mm-tag {
    display: inline-flex; align-items: center; flex: none; gap: 6px; height: 22px; padding: 0 8px;
    border: 1px solid var(--mm-hair-3); border-radius: var(--mm-r-chip); background: none;
    color: var(--mm-fg-2); font: 450 var(--mm-fs-mono)/1 var(--mm-f-mono); letter-spacing: .12em;
    text-transform: uppercase; white-space: nowrap;
  }

  /* ---------- swatch (§3.4): lacquer core in a chrome bezel ---------- */
  .mm-swatch {
    --sw: var(--mm-shade); --mm-sw-size: 32px;
    position: relative; display: inline-block; flex: none; vertical-align: middle;
    width: var(--mm-sw-size); height: var(--mm-sw-size); border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(var(--sw), var(--sw)) padding-box, var(--mm-chrome) border-box;
    box-shadow: inset 0 -3px 6px rgb(0 0 0 / .25);
    transition: box-shadow var(--mm-t-state) var(--mm-ease-out);
  }
  .mm-swatch::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .55), transparent 42%);
  }
  .mm-swatch--14 { --mm-sw-size: 14px; border-width: 1px; box-shadow: none; }
  .mm-swatch--22 { --mm-sw-size: 22px; border-width: 1.5px; box-shadow: inset 0 -2px 4px rgb(0 0 0 / .22); }
  .mm-swatch--32 { --mm-sw-size: 32px; }
  .mm-swatch--44 { --mm-sw-size: 44px; }
  .mm-swatch--56 { --mm-sw-size: 56px; }
  .mm-swatch:is([aria-checked="true"], [aria-pressed="true"], .is-selected),
  :is([aria-checked="true"], [aria-pressed="true"], .is-selected) > .mm-swatch {
    box-shadow: inset 0 -3px 6px rgb(0 0 0 / .25), 0 0 0 3px var(--mm-bg), 0 0 0 5px var(--mm-fg-1);
  }
  /* A swatch used as a control sits in a 44px target. */
  .mm-swatch-btn {
    display: inline-grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }

  /* ---------- meters (§3.13): categorical, value always as text ---------- */
  /* Markup: <div class="mm-meters"><div class="mm-meter-row"><span>Light</span>
     <span class="mm-meter" data-value="2" aria-hidden="true"><i></i><i></i><i></i><i></i></span><b>Uneven</b></div>…</div> */
  .mm-meters { display: grid; grid-template-columns: max-content max-content 1fr; align-items: center; gap: 10px 14px; }
  .mm-meter-row { display: contents; }
  .mm-meter-row > span:first-child { font: 450 var(--mm-fs-mono)/1.4 var(--mm-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mm-fg-3); }
  .mm-meter-row > b { font: 500 var(--mm-fs-small)/1.3 var(--mm-f-display); color: var(--mm-fg-1); }
  .mm-meter { display: inline-flex; gap: 4px; align-items: center; }
  .mm-meter > i { display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--mm-hair-2); transition: background-color var(--mm-t-state) var(--mm-ease-out); }
  .mm-meter > i.on,
  .mm-meter[data-value="1"] > i:nth-child(-n+1),
  .mm-meter[data-value="2"] > i:nth-child(-n+2),
  .mm-meter[data-value="3"] > i:nth-child(-n+3),
  .mm-meter[data-value="4"] > i:nth-child(-n+4) { background: var(--mm-fg-1); }

  /* ---------- glass (§5): fixed landing nav only ---------- */
  .mm-glass {
    background: rgb(10 10 12 / .62);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--mm-glass-edge);
  }

  /* ---------- grain (§3.20): ink pages only, static, fixed ---------- */
  .mm-grain::after {
    content: ""; position: fixed; inset: 0; z-index: var(--mm-z-grain); pointer-events: none; opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- reduced motion (§11) ---------- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --mm-t-press: 0ms; --mm-t-pop: 160ms; --mm-t-sheet: 150ms; --mm-t-shade: 160ms;
      --mm-t-layer: 160ms; --mm-t-focal: 0ms; --mm-t-exit: 120ms;
    }
    html { scroll-behavior: auto; }
    .mm-btn:active, .mm-chip:active { transform: none; }
    .mm-btn .i, .mm-btn__icon, .mm-link .i { transition: none; }
    .mm-btn[aria-busy="true"]::after { animation-duration: 1600ms; }
  }

  /* ---------- reduced transparency (§11) ---------- */
  @media (prefers-reduced-transparency: reduce) {
    .mm-glass { background: var(--mm-ink-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* ---------- forced colors (§11) ---------- */
  @media (forced-colors: active) {
    .mm-btn, .mm-chip, .mm-tag { border: 1px solid ButtonText; }
    .mm-btn--shade, .mm-btn--ink { forced-color-adjust: none; background: ButtonText; color: ButtonFace; box-shadow: none; }
    .mm-btn--ink::before, .mm-dot { forced-color-adjust: none; background: ButtonFace; }
    .mm-swatch { forced-color-adjust: none; outline: 1px solid CanvasText; outline-offset: 0; }
    .mm-meter > i { forced-color-adjust: none; background: GrayText; }
    .mm-meter > i.on,
    .mm-meter[data-value="1"] > i:nth-child(-n+1), .mm-meter[data-value="2"] > i:nth-child(-n+2),
    .mm-meter[data-value="3"] > i:nth-child(-n+3), .mm-meter[data-value="4"] > i:nth-child(-n+4) { background: CanvasText; }
    :is(.mm-h1, .mm-h2, .mm-h3) em { color: CanvasText; }
    :focus-visible { outline-color: Highlight; }
    .mm-grain::after { display: none; }
  }
}