/* ============================================================================
   SnapToolSuite — PREMIUM COMPONENT LAYER  (_premium.css)
   ----------------------------------------------------------------------------
   The reusable, tokenized "crafted product" reskin extracted from the canonical
   pool-ph-calculator reference build. It re-skins the SHARED factory scaffold
   (.mm-header / .card / .field / .result-head / .profit / .badge / .bd / .line)
   into the premium look WITHOUT touching a tool's markup, content, ids, or
   monetization — purely additive.

   ── How it activates ──────────────────────────────────────────────────────
   Everything is scoped under `.mm.premium`. A tool opts in by adding the
   `premium` class to its `<div class="mm">` wrapper (the suite-wide injector in
   build-deploy adds it + this stylesheet link). No marker = byte-identical to
   today. That makes the rollout reversible and pilot-safe.

   ── Design law ────────────────────────────────────────────────────────────
   - Tokens only. ZERO hardcoded component colors live below; the ONLY hex is in
     the `--w-*` / `--v` / zone token block, which derives from design.css's
     palette. Per-vertical accent via `--v` (defaults to brand gold).
   - SAME-POLARITY WIDGET (founder decision 2026-06-14, replaces the earlier
     inverse): the card matches the PAGE polarity — site LIGHT → a raised LIGHT
     card (distinct from the page bg via surface + micro-shadow); site DARK
     ([data-theme=dark]) → a raised DARK card. It still reads PREMIUM (distinct
     surface, micro-shadow, tan-gold accents, designed header/result) but NEVER
     inverts color. Same-polarity is robust + readable across all tool types
     (document sheets, soft panels, secondary buttons) — inverse auto-reskin had
     recurring invisible-text/control bugs. The two bespoke flagships
     (pool-ph-calculator, pressure-washing-pricing-calculator) stay hand-tuned
     inverse and are NOT touched by this layer.
   - Pairs with the A19 result-visual lib: design.css `.sts-viz` (scale/gauge/
     meter/donut/two-state) + _components.js (window.STS). This file styles the
     CARD CHROME; that lib renders the in-result VISUAL. The `.sts-viz` zone
     tokens are re-pointed here to the widget's palette so a mounted gauge/meter
     matches the card it sits in.
   - prefers-reduced-motion honored. Embed-safe (pure CSS, no network).
   ============================================================================ */

/* ── SAME-POLARITY WIDGET TOKEN BLOCK — the ONLY place hex appears ────────── */
.mm.premium {
  /* page LIGHT  →  widget LIGHT (a raised, distinct premium card) */
  --w-card:#ffffff; --w-text:#1a1a1a; --w-muted:#6e6a62;
  --w-input:#f6f5f2; --w-input-bd:#e5e5e5; --w-panel:#f1ece1;
  --w-resbody:#faf8f2; --w-bd:#e5e5e5; --w-groove:#e0dccf;
  --w-hero:#a98c57;                 /* deep gold hero value — readable on light */
  --w-link:#8a6a35;                 /* deeper gold for in-card LINK text (passes on the tan panel) */
  --z-ideal:#15875f; --z-amber:#b07d1a; --z-red:#c0392b;   /* deeper set */
  --gold:#c6a878; --gold-d:#a98c57; --gold-tx:#1a1a1a;
  --v:var(--gold);                  /* per-vertical accent — override per tool */
  --w-shadow:0 8px 28px rgba(20,17,11,.10);
}
[data-theme="dark"] .mm.premium {
  /* page DARK  →  widget DARK (a raised, distinct premium card) */
  --w-card:#1e222a; --w-text:#ecebe5; --w-muted:#a7a39a;
  --w-input:#161a21; --w-input-bd:#2d323b; --w-panel:#1a1e26;
  --w-resbody:#181c23; --w-bd:#2d323b; --w-groove:#2d323b;
  --w-hero:#dcc08a;                 /* bright gold hero value — readable on dark */
  --w-link:#dcc08a;                 /* bright gold for in-card LINK text on dark */
  --z-ideal:#1d9e75; --z-amber:#d8a93f; --z-red:#d6504f;   /* brighter set */
  --w-shadow:0 8px 28px rgba(0,0,0,.40);
}
/* keep a mounted .sts-viz gauge/meter/donut/two-state in step with the widget's
   palette (design.css colors these for the PAGE theme; re-point them so text/
   grooves read correctly on the raised widget card, not the page). */
.mm.premium .sts-viz { --z-band:var(--w-text); }
.mm.premium .sts-meter .sts-mtrack { background:var(--w-groove); }
.mm.premium .sts-meter .sts-mdot { background:var(--w-card); }
.mm.premium .sts-meter .sts-mlabel,
.mm.premium .sts-meter .sts-maxis,
.mm.premium .sts-scale .sts-gl,
.mm.premium .sts-scale .sts-gaxis { color:var(--w-muted); }
.mm.premium .sts-donut .sts-leg { color:var(--w-text); }
.mm.premium .sts-donut .sts-donut-cap { color:var(--w-muted); }
.mm.premium .sts-donut-svg circle:first-child { stroke:var(--w-groove); }
.mm.premium .sts-two .sts-two-cell { background:var(--w-input); border-color:var(--w-bd); }
.mm.premium .sts-two .sts-two-l { color:var(--w-muted); }
.mm.premium .sts-two .sts-two-v { color:var(--w-text); }
.mm.premium .sts-viz .sts-gv, .mm.premium .sts-viz .sts-mval { color:var(--w-text); }

/* SCOPED to the widget regions only (card + header) — NOT the whole .mm container,
   which also holds page content (guide/FAQ/related/footer) that must keep the PAGE
   theme colors. Coloring the whole container made page text take the inverse-widget
   color → invisible on the page background (the 2026-06-14 contrast bug). */
.mm.premium .mm-header, .mm.premium .card {
  color:var(--w-text);
  /* Remap the PAGE design tokens to the WIDGET palette INSIDE the card, so ANY
     control built on design.css vars (--bg/--card/--text/--muted/--border/
     --primary) picks up the premium card surface + text together — covers custom
     radio/checkbox/segmented controls + buttons with no per-tool CSS. Now
     same-polarity, so the surfaces stay on the page's polarity (no inversion) =
     robust + readable across all tool types. Scoped to .card/.mm-header only so
     page content keeps the PAGE theme (the inverse-widget-contrast-rule). */
  --bg:var(--w-card); --card:var(--w-input); --surface:var(--w-input);
  --text:var(--w-text); --muted:var(--w-muted); --border:var(--w-bd);
  /* --accent is overwhelmingly used as TEXT (result sub-numbers, .amt/.tt/.tp,
     accent labels). --gold-d (#a98c57) as text reads only ~2.26:1, so point it at
     --w-link (deep gold #8a6a35 light ≈5:1 / bright #dcc08a dark) — still gold,
     now readable. Used as a rare fill/border it's just a slightly deeper gold (text
     on it still passes). The big hero value uses --w-hero directly, not --accent. */
  --primary:var(--v); --accent:var(--w-link); --on-primary:var(--gold-tx);
  /* Many estimators define a FIXED-LIGHT tinted "soft panel" token
     (--info-bg:#faf6ec / --info-border) with no dark override — on the
     same-polarity DARK card that's near-white text on cream = invisible. Re-point
     the soft-panel tokens to the widget panel so .callout/.disc-banner/.note-style
     boxes follow the card polarity in both themes (no per-tool edits). */
  --info-bg:var(--w-panel); --info-border:var(--w-bd);
  /* SEMANTIC tint boxes (warn/danger/ok/nudge/primary-50). Tools use them two ways:
     (A) color:var(--text) on the tint, and (B) a fixed semantic text color
     (.badge.warn{color:var(--warn)}). To satisfy BOTH on the same-polarity card we
     remap the tint BG to a translucent semantic hue over the card (follows the
     polarity) AND remap the semantic TEXT tokens to the THEME-AWARE zone colors
     (--z-* are bright on dark). Net: a dark box on the dark card carries either
     near-white (--w-text) or bright-semantic text; a light box on the light card
     carries dark text either way. */
  --warn-bg:color-mix(in srgb, var(--z-amber) 15%, var(--w-card));
  --warnbg:color-mix(in srgb, var(--z-amber) 15%, var(--w-card));
  --warn-border:color-mix(in srgb, var(--z-amber) 40%, var(--w-card));
  --warn:var(--z-amber); --warn-text:var(--z-amber);
  --warntx:var(--z-amber); --warn-border:color-mix(in srgb, var(--z-amber) 40%, var(--w-card)); --warnbd:color-mix(in srgb, var(--z-amber) 40%, var(--w-card));
  --danger-bg:color-mix(in srgb, var(--z-red) 15%, var(--w-card));
  --dangerbg:color-mix(in srgb, var(--z-red) 15%, var(--w-card));
  --badbg:color-mix(in srgb, var(--z-red) 15%, var(--w-card));
  --bad-bg:color-mix(in srgb, var(--z-red) 15%, var(--w-card));
  --critbg:color-mix(in srgb, var(--z-red) 15%, var(--w-card));
  --danger:var(--z-red); --bad:var(--z-red); --crit:var(--z-red);
  --danger-text:var(--z-red); --dangertx:var(--z-red); --badtx:var(--z-red); --bad-text:var(--z-red);
  --ok-bg:color-mix(in srgb, var(--z-ideal) 15%, var(--w-card));
  --okbg:color-mix(in srgb, var(--z-ideal) 15%, var(--w-card));
  --accent-bg:color-mix(in srgb, var(--z-ideal) 15%, var(--w-card));
  --ok:var(--z-ideal); --good:var(--z-ideal);
  --ok-text:var(--z-ideal); --oktx:var(--z-ideal); --okfg:var(--z-ideal);
  --nudgebg:color-mix(in srgb, var(--v) 13%, var(--w-card));
  --nudge-bg:color-mix(in srgb, var(--v) 13%, var(--w-card));
  --primary-50:color-mix(in srgb, var(--v) 13%, var(--w-card));
  --primary-100:color-mix(in srgb, var(--v) 22%, var(--w-card));
  --chip-bg:var(--w-panel);
  /* a few tools key a "soft info" box off --info-* with a slightly different name */
  --infobg:var(--w-panel);
}

/* Recurring gold-as-TEXT controls: several calculators style a secondary action
   button (.act), a quick-select preset chip (.preset / .preset.on), or a keyword
   chip (.chip) with color:var(--primary) on a light/tinted surface — gold text on
   light reads ~2:1. Point the TEXT to --w-text (readable, flips with theme); the
   gold border + gold tint background already carry the accent. Scoped to the
   widget card; gold-FILLED buttons (.btn.primary etc.) are untouched. */
.mm.premium .card .act,
.mm.premium .card .preset,
.mm.premium .card .chip { color:var(--w-text); }

/* BROADER gold-as-text sweep (same fix, more class names). Many calculators color
   a secondary control / disclosure / add-row / inline tag with var(--primary) (=
   --v gold on the card) → gold text reads ~2.26:1. Point the TEXT to --w-text
   (readable, theme-aware); their gold border/tint already carries the accent.
   `summary` is the <details> toggle (commonly color:var(--primary)). Scoped to the
   widget card so gold-FILLED primaries are untouched (handled below). */
.mm.premium .card summary,
.mm.premium .card .summary,
.mm.premium .card .addrow,
.mm.premium .card .add-btn,
.mm.premium .card .addcol,
.mm.premium .card .add,
.mm.premium .card .swap,
.mm.premium .card .opt,
.mm.premium .card .tag,
.mm.premium .card .tg,
.mm.premium .card .obs,
.mm.premium .card .brk-roi { color:var(--w-text); }

/* `.copy-btn` is the SHARED copy/share control (31 tools): a gold-tinted button
   with color:var(--primary) (=--v gold) text → ~2.26:1. It also appears in the
   result card's `.actions` row. Point the text to the readable deep gold --w-link
   (its gold tint + border already carry the accent). `summary` (the <details>
   toggle, color:var(--primary) in 31 tools) and gold table headers `th` likewise.
   Not scoped to .card alone because .copy-btn/summary sometimes sit just outside
   it; the .mm.premium scope still keeps it inside the widget region. */
.mm.premium .copy-btn, .mm.premium .copy-btn *,
.mm.premium .copybtn,  .mm.premium .copybtn *,
.mm.premium .act-btn,  .mm.premium .act-btn *,
.mm.premium .btn-copy, .mm.premium .btn-copy *,
.mm.premium .card summary,
.mm.premium .card th { color:var(--w-link); }

/* Checkbox-/segment-card LABELS that hard-code color:#fff on a gold fill
   (--primary→--v gold) read ~2.26:1 white-on-gold. Force charcoal (--gold-tx)
   when the label is the selected/gold state. These use varied class names, so
   cover the common "label is the control" pattern: a <label> whose computed bg is
   gold can't be selected in CSS, so we target the recurring explicit classes. */
.mm.premium .card .seg-label.on,
.mm.premium .card .opt-card.on,
.mm.premium .card label.on { color:var(--gold-tx); }

/* Gold-FILLED selected/primary controls that hard-code color:#fff. On the card,
   --primary→--v (gold) so the fill is tan-gold; #fff on tan-gold reads ~2.26:1.
   Force CHARCOAL text (--gold-tx) — readable on gold in BOTH themes. Covers the
   recurring selected-pill / primary-action variants beyond the bare .btn. */
.mm.premium .card .tipbtn.on,
.mm.premium .card .act.primary,
.mm.premium .card .preset.on,
.mm.premium .card .btn.primary,
.mm.premium .card .opt.on,
.mm.premium .card .seg.on,
.mm.premium .card .pillsel.on { color:var(--gold-tx); }

/* ── INTEGRATED CARD HEADER (icon chip + title + subtitle + status) ───────── */
/* Re-skins the existing `.mm-header` (h1 + p) into the premium top bar. A tool
   may add `<span class="mm-ico">…svg…</span>` + `<span class="mm-status">…` to
   light up the chip/badge; without them the header still upgrades cleanly. */
.mm.premium .mm-header {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--w-card); border:1px solid var(--w-bd);
  border-radius:16px 16px 0 0; border-bottom:0;
  padding:16px 16px 14px; margin-bottom:0; box-shadow:var(--w-shadow);
}
.mm.premium .mm-ico {
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--v) 16%, transparent); color:var(--v);
}
.mm.premium .mm-ico svg { width:24px; height:24px; }
.mm.premium .mm-header > div:first-of-type,
.mm.premium .mm-htext { flex:1; min-width:0; }
.mm.premium .mm-header h1 { font-size:21px; font-weight:700; line-height:1.15; margin:0; color:var(--w-text); }
.mm.premium .mm-header p  { margin:3px 0 0; font-size:13px; color:var(--w-muted); }
.mm.premium .mm-status {
  flex:none; align-self:flex-start; font-size:12.5px; font-weight:700;
  padding:3px 11px; border-radius:999px; letter-spacing:.2px;
  color:#fff; background:var(--z-ideal); transition:background .25s;
}
.mm.premium .mm-status[data-zone="amber"]{ background:var(--z-amber); color:#1a1a1a; }
.mm.premium .mm-status[data-zone="red"]  { background:var(--z-red); }

/* ── PREMIUM INPUT CARD ───────────────────────────────────────────────────── */
/* The FIRST `.card` after the header is the input card; it joins the header into
   one object (header has bottom corners square, this has top corners square). */
.mm.premium .card {
  background:var(--w-card); border:1px solid var(--w-bd);
  border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:var(--w-shadow);
}
.mm.premium .mm-header + .card { border-radius:0 0 16px 16px; border-top:0; margin-top:0; }

/* `.field` is the dominant input class (291 tools); `.fld` is a rarer bespoke
   variant (7 tools) — cover both so generators/bespoke inputs reskin too. */
.mm.premium .field, .mm.premium .fld { margin-bottom:14px; }
.mm.premium .field:last-child, .mm.premium .fld:last-child { margin-bottom:0; }
.mm.premium label,
.mm.premium .field > label,
.mm.premium .fld > label {
  display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--w-text);
}
.mm.premium input[type=number],
.mm.premium input[type=text],
.mm.premium input[type=date],
.mm.premium input[type=email],
.mm.premium select,
.mm.premium textarea {
  width:100%; padding:11px 12px; border:1px solid var(--w-input-bd);
  border-radius:10px; font-size:15px; font-family:inherit;
  background:var(--w-input); color:var(--w-text);
}
.mm.premium input:focus, .mm.premium select:focus, .mm.premium textarea:focus {
  outline:2px solid var(--v); outline-offset:1px; border-color:var(--v);
}
.mm.premium input::placeholder, .mm.premium textarea::placeholder { color:var(--w-muted); opacity:1; }
.mm.premium .hint, .mm.premium .field .hint { font-size:12px; color:var(--w-muted); margin:6px 0 0; }

/* unit affix — also re-skins the scaffold's existing `.input-money` ($ prefix) so
   money tools premium-ify with no markup change. */
.mm.premium .input-money { position:relative; }
.mm.premium .input-money > span:first-child {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--w-muted); font-weight:600; pointer-events:none;
}
.mm.premium .input-money input { padding-left:26px; }

/* unit affix — wrap an input in `<div class="punit">…<span class="pgal">$</span></div>` */
.mm.premium .punit { position:relative; }
.mm.premium .punit .pgal {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--w-muted); font-weight:600; pointer-events:none;
}
.mm.premium .punit.left .pgal { right:auto; left:12px; }
.mm.premium .punit input { padding-right:42px; }
.mm.premium .punit.left input { padding-right:12px; padding-left:30px; }

/* stepper buttons — `<div class="pstep"><button data-step="-1">−</button>…</div>` */
.mm.premium .pstep { display:flex; align-items:stretch; gap:0; }
.mm.premium .pstep input { border-radius:0; text-align:center; }
.mm.premium .pstep button {
  flex:none; width:40px; border:1px solid var(--w-input-bd); background:var(--w-input);
  color:var(--w-text); font-size:18px; font-weight:700; cursor:pointer; line-height:1;
  transition:.12s;
}
.mm.premium .pstep button:first-child { border-radius:10px 0 0 10px; border-right:0; }
.mm.premium .pstep button:last-child  { border-radius:0 10px 10px 0; border-left:0; }
.mm.premium .pstep button:hover { background:color-mix(in srgb,var(--v) 18%,var(--w-input)); border-color:var(--v); }

/* custom slider (zone-fill via --fill/--p, same contract as the pH reference) */
.mm.premium .pslider {
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; margin:4px 0 2px;
  background:linear-gradient(to right, var(--fill,var(--v)) 0 calc(var(--p,50%)), var(--w-groove) calc(var(--p,50%)) 100%);
  cursor:pointer;
}
.mm.premium .pslider:focus { outline:none; }
.mm.premium .pslider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--w-card); border:3px solid var(--fill,var(--v)); box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:border-color .2s, box-shadow .15s;
}
.mm.premium .pslider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; background:var(--w-card);
  border:3px solid var(--fill,var(--v)); box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.mm.premium .pslider:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 55%,transparent); }
.mm.premium .pscale { display:flex; justify-content:space-between; font-size:11px; color:var(--w-muted); margin-top:2px; }

/* ── DESIGNED RESULT CARD ─────────────────────────────────────────────────── */
/* The result `.card` becomes the hero result card. Two scaffold patterns exist
   and BOTH are supported additively:
     Pattern A (pH-style): an explicit `.reshead-band` element = the tan-gold
       band (label/flow), with the hero value below in `.resbody`.
     Pattern B (most tools): `.result-head` is a flex row holding the hero
       `#profit` value + `#badge` directly. We do NOT band `.result-head` (that
       would paint the big number on gold) — we just premium-style the body.
   Either way the existing `#profit` / `#badge` / `#breakdown` ids are untouched.
   Opt into the band by giving the result card the `result` class. */
.mm.premium .card.result { padding:0; overflow:hidden; background:var(--w-resbody); }

/* Pattern A — explicit tan-gold band */
.mm.premium .reshead-band {
  background:var(--v); color:var(--gold-tx); padding:12px 16px; margin:0;
}
.mm.premium .reshead-band .pht,
.mm.premium .reshead-band > strong {
  display:block; font-size:13px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
}
.mm.premium .reshead-band .phflow { font-size:13px; font-weight:600; margin-top:2px; opacity:.85; font-variant-numeric:tabular-nums; }
.mm.premium .card.result .resbody,
.mm.premium .card.result > .result-head,
.mm.premium .card.result > .bd { padding-left:16px; padding-right:16px; }
.mm.premium .card.result .resbody { padding:18px 16px 16px; }
.mm.premium .card.result > .result-head { padding-top:18px; }
.mm.premium .card.result > .bd { padding-bottom:16px; }
/* action buttons (copy / share) that live in the result card below the body */
.mm.premium .card.result > .actions { padding:0 16px 16px; margin:0; }
/* NOTE: a BARE `.btn` is conventionally the GOLD-FILLED primary (design.css colors
   it --on-primary/charcoal, which is correct on gold). A tool that instead wants a
   secondary/ghost button should class it `.btn.ghost` (design.css → --text, which
   flips with theme) rather than relying on bare `.btn` — otherwise charcoal text
   lands on the same-polarity dark card surface = invisible. We deliberately do NOT
   blanket-override bare .btn color here (that would break the common gold-filled
   case); ghost buttons use .ghost and already read correctly in both themes. */

/* Pattern B — flex row keeps its layout, just premium-spaced */
.mm.premium .result-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0; }

.mm.premium .profit {
  font-size:40px; font-weight:800; letter-spacing:-1px; color:var(--w-hero);
  line-height:1; font-variant-numeric:tabular-nums; margin:0;
}
.mm.premium .profit .pu { font-size:20px; font-weight:700; margin-left:4px; }
.mm.premium .badge {
  display:inline-block; font-size:13px; color:var(--w-muted);
  background:transparent; padding:3px 9px; border-radius:999px; font-weight:700;
}
.mm.premium .badge.warn { color:var(--z-amber); }
.mm.premium .badge.bad  { color:var(--z-red); }

/* breakdown rows */
.mm.premium .bd { margin-top:14px; border-top:1px dashed var(--w-bd); padding-top:10px; }
.mm.premium .line { display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; gap:8px; }
.mm.premium .line.total { font-weight:700; border-top:1px solid var(--w-bd); margin-top:6px; padding-top:8px; }
.mm.premium .line span:only-child { white-space:normal; overflow-wrap:anywhere; }

/* tip / caution box — `<div class="ptip"><svg/><span>…</span></div>` */
.mm.premium .ptip {
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  background:var(--w-panel); border:1px solid var(--w-bd); border-radius:10px;
  padding:11px 12px; font-size:12.5px; color:var(--w-muted); line-height:1.5;
}
.mm.premium .ptip svg { width:17px; height:17px; flex:none; color:var(--v); margin-top:1px; }
.mm.premium .ptip a { color:var(--w-link); font-weight:600; }
.mm.premium .ptip .ptip-more { display:block; margin-top:6px; }

/* helper cross-link under an input (circle-help icon → prerequisite tool) */
.mm.premium .phelp { display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:12.5px; color:var(--w-muted); text-decoration:none; }
.mm.premium .phelp:hover { color:var(--v); }
.mm.premium .phelp svg { width:14px; height:14px; flex:none; color:var(--v); }

/* ── GENERATOR / TEMPLATE OUTPUT (preview surface) ────────────────────────── */
/* Document tools render onto a printable sheet — keep paper readable but frame it
   premium. The `.doc`/`.paper`/`.preview` sheet stays white per the dev rules. */
.mm.premium .out, .mm.premium .output {
  background:var(--w-resbody); border:1px solid var(--w-bd); border-radius:12px; padding:14px;
}
/* a preview wrapper that holds a printable `.doc`/`.paper` sheet = transparent
   frame only (the sheet supplies its own white paper). Avoids double-framing. */
.mm.premium .preview-wrap { background:transparent; }
.mm.premium .preview-wrap .doc, .mm.premium .preview-wrap .paper { box-shadow:0 4px 16px rgba(0,0,0,.18); }
/* generator summary line ("30 brandable name ideas") + the output list/notes */
.mm.premium .summary { display:flex; align-items:baseline; gap:8px; }
.mm.premium .summary #profit, .mm.premium .summary .num {
  font-size:34px; font-weight:800; color:var(--w-hero); letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; line-height:1;
}
.mm.premium .summary .sub { font-size:14px; color:var(--w-muted); font-weight:600; }
.mm.premium .note-line, .mm.premium .availfb { color:var(--w-muted); }
.mm.premium .ulist .empty, .mm.premium .empty { color:var(--w-muted); }
.mm.premium .ulist { color:var(--w-text); }

/* ── CHECKLIST (premium list + progress) ──────────────────────────────────── */
/* `.item` is the dominant checklist row class (40 tools); `.rowcheck`/`.check-item`
   are alternates — cover all. Each row becomes a tappable premium card. */
.mm.premium .item, .mm.premium .rowcheck, .mm.premium .check-item {
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px; margin:0 0 8px;
  background:var(--w-input); border:1px solid var(--w-input-bd); border-radius:10px;
  border-bottom:1px solid var(--w-input-bd); transition:border-color .15s, background .15s; cursor:pointer;
}
.mm.premium .item:hover, .mm.premium .rowcheck:hover, .mm.premium .check-item:hover { border-color:var(--v); }
.mm.premium .item input[type=checkbox],
.mm.premium .rowcheck input[type=checkbox], .mm.premium .check-item input[type=checkbox] {
  width:20px; height:20px; flex:none; accent-color:var(--v); margin-top:1px; cursor:pointer;
}
.mm.premium .item.done, .mm.premium .rowcheck.done, .mm.premium .check-item.done { opacity:.62; }
.mm.premium .item.done span, .mm.premium .rowcheck.done label, .mm.premium .check-item.done label { text-decoration:line-through; color:var(--w-muted); }
/* section subheads inside a checklist — readable deep gold (--w-link), NOT raw --v
   gold (which reads ~2.3:1 as text on the light card). Keeps the gold-eyebrow feel. */
.mm.premium .sec-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--w-link); margin:16px 0 7px; }
.mm.premium .sec-h:first-child { margin-top:0; }
/* progress bar — covers the scaffold's `.pbar`/`.pfill` + an explicit `.ck-prog`. */
.mm.premium .pbar, .mm.premium .ck-prog { height:10px; border-radius:999px; background:var(--w-groove); overflow:hidden; margin:0 0 12px; }
.mm.premium .pfill, .mm.premium .ck-prog-fill { height:100%; border-radius:999px; background:var(--v); width:0; transition:width .4s cubic-bezier(.4,0,.2,1); }
.mm.premium .progress-text { color:var(--w-muted); }
.mm.premium .progress-text #ppct, .mm.premium .progress-text [id$=pct] { color:var(--w-hero); font-weight:800; }

/* ── MOTION ───────────────────────────────────────────────────────────────── */
.mm.premium .profit { transition:color .2s; }
@media (max-width:480px){
  .mm.premium .mm-header { flex-wrap:wrap; }
  .mm.premium .mm-status { margin-top:2px; }
}
@media (max-width:360px){
  .mm.premium .profit { font-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  .mm.premium .pslider::-webkit-slider-thumb,
  .mm.premium .ck-prog-fill,
  .mm.premium .profit { transition:none !important; }
}