/* ═══════════════════════════════════════════════════════════════════════
   Monetizr Blackbelt — COMPONENT + INTERACTION styles (plain CSS)
   ───────────────────────────────────────────────────────────────────────
   Base appearance is set with inline styles + tokens in the markup (see
   index.html). This file supplies ONLY the things inline styles can't express:
   :hover / :active / :focus states, and the shared reset.
   One motion language: ease-out, <200ms, real press feedback, reduced-motion safe.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── reset & document defaults ───────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* The browser's built-in `[hidden] { display: none }` rule is UA-origin, so
   any normal author rule setting `display` on the same element (e.g. a
   `.foo { display: flex }` component class) silently wins and the element
   stays visibly rendered even with the `hidden` attribute set via JS. Restate
   it here as an author rule so `el.hidden = true` always actually hides. */
[hidden] { display: none !important; }

html, body { background: var(--bg); }

body {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

input, textarea, select { font-family: var(--font-sans); caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* inline icons — always beside text, never a stacked tile over a heading */
.licon { line-height: 1; vertical-align: -2px; }
@media (max-width: 700px) {
  .mtz-desktop-break { display: none; }
  .mtz-desktop-break + .accent::before { content: ' '; }
}

/* ── Box + Card ──────────────────────────────────────────────────────
   .mtz-box is the base primitive for every new bordered/content container.
   Specialized components may add padding or behavior, but keep this shared
   surface, hairline, and squircle silhouette. */
.mtz-box,
.mtz-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-box);
}

/* Card
   Elevation is surface + hairline border, NOT shadow. Hover: border → gold
   at 35%, card lifts -2px; the footer view-link turns gold + arrow slides 3px. */
.mtz-card {
  padding: 22px;
  transition: border-color var(--dur-slow) var(--ease-out),
              transform   var(--dur-slow) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .mtz-card:hover { border-color: var(--border-hover); transform: translateY(var(--lift)); }
  .mtz-card.mtz-card--static:hover { border-color: var(--border-hairline); transform: none; }
}
.mtz-card .mtz-view-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-card:hover .mtz-view-link { color: var(--accent); }
.mtz-card:hover .mtz-view-link .mtz-arrow { transform: translateX(3px); }

/* ── Button ───────────────────────────────────────────────────────────
   primary = solid gold, navy text · secondary = gold outline, gold text. */
.mtz-btn {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  border-radius: var(--radius-button);
  font-family: var(--font-sans); font-weight: 700;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mtz-btn--primary {
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent);
  justify-content: center; width: var(--width-cta-standard); max-width: 100%;
  height: var(--height-cta-standard); padding: 0 20px;
  font-size: 14px; font-weight: var(--fw-black); line-height: 1; text-align: center;
}
.mtz-btn--secondary {
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
  padding: 9px 16px; font-size: 13px;
}
.modal-followup .capture-actions {
  flex-direction: column;
  align-items: center;
  gap: var(--gap-cta-followup);
  text-align: center;
}
.modal-followup .capture-actions > .mtz-secondary-link {
  align-self: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .mtz-btn.mtz-btn--primary { width: 100%; }
  .capture-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-cta-followup);
  }
  .capture-actions > .mtz-secondary-link {
    align-self: center;
    justify-content: center;
    text-align: center;
  }
}
@media (hover:hover) and (pointer:fine) {
  .mtz-btn--primary:not([disabled]):hover {
    /* color MUST be re-asserted: these buttons are <a>, and the generic
       a:hover{color:accent-hover} would otherwise turn the navy label light-gold
       on the light-gold hover fill → invisible text. Keep it navy. */
    background: var(--accent-hover); color: var(--on-accent);
    transform: translateY(var(--lift)); box-shadow: var(--shadow-btn-hover);
  }
  .mtz-btn--secondary:not([disabled]):hover {
    border-color: var(--accent); color: var(--accent); transform: translateY(var(--lift));
  }
}
.mtz-btn--primary:not([disabled]):active {
  transform: scale(var(--press-scale)); box-shadow: var(--shadow-btn-press);
  transition: transform 100ms var(--ease-out);
}
.mtz-btn--secondary:not([disabled]):active {
  transform: scale(var(--press-scale)); transition: transform 100ms var(--ease-out);
}

/* ── ArrowLink ────────────────────────────────────────────────────────
   Gold, bold, trailing → that slides right on hover. No underline. */
.mtz-arrow-link { color: var(--accent); font-weight: 700; }
.mtz-arrow-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-arrow-link:hover { color: var(--accent-hover); }
.mtz-arrow-link:hover .mtz-arrow { transform: translateX(3px); }

/* ── Tab pill (nav) ───────────────────────────────────────────────────
   Active = gold fill + navy text. Inactive = transparent + hairline + muted. */
.bb-tab {
  padding: 7px 15px; font-size: 12.5px; font-weight: 700;
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans);
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.bb-tab:hover { color: var(--text); border-color: var(--border-hover); }
.bb-tab[aria-selected="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* ── FilterDropdown trigger (pill) ────────────────────────────────────
   Form-field variant: static press — only the hairline goes gold, no scale/lift. */
.mtz-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 16px; font-size: 13px; font-weight: 700; font-family: var(--font-sans);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mtz-dropdown-trigger .mtz-chevron { transition: transform 180ms var(--ease-out); color: var(--muted); }
@media (hover:hover) and (pointer:fine) {
  .mtz-dropdown-trigger:hover { border-color: var(--accent); transform: translateY(-1px); }
}
.mtz-dropdown-trigger:active { transform: scale(var(--press-scale)); }

/* ── Panel secondary link ─────────────────────────────────────────────── */
.mtz-secondary-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.mtz-secondary-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-secondary-link:hover { color: var(--accent); }
.mtz-secondary-link:hover .mtz-arrow { transform: translateX(3px); }

/* ── Removable tag ────────────────────────────────────────────────────
   A selected value the user can remove — quiet surface+hairline pill with
   a dedicated close-button hit target (never the whole pill). */
.mtz-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 7px 7px 7px 14px; white-space: nowrap;
}
.mtz-tag-remove {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: none; border: none; color: var(--faint); cursor: pointer; padding: 0;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.mtz-tag-remove .licon-svg { width: 12px; height: 12px; }
.mtz-tag-remove:hover { background: var(--line); color: var(--text); }
.mtz-tag-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Alert (top-of-viewport banner) ──────────────────────────────────────
   Three-layer state pattern (see state-colors.prompt.md): solid icon/text,
   .14 soft fill, .35 hairline border — fill and border always the same hue.

   Position is one canonical, site-wide rule (not a per-page override):
   desktop centers the toast on the fixed nav's own height; below the shared
   700px nav-collapse breakpoint it anchors just under the nav instead, since
   a wrapped two-line message no longer fits inside the mobile nav's shorter
   height and would otherwise hang half off it. Every page that uses
   .mtz-alert must expose --kb-nav-h (its fixed nav's real measured height,
   kept live via the standard padForNav() resize script — see
   specs/header-footer.spec.md) for this to track correctly; the 77px/56px
   fallbacks match the nav's typical desktop/mobile measured heights. */
:root {
  --alert-top: calc(var(--kb-nav-h, 77px) / 2);
  --alert-rest-y: -50%;
  --alert-hide-y: calc(-50% - 12px);
}
@media (max-width: 700px) {
  :root {
    --alert-top: calc(var(--kb-nav-h, 56px) + 10px);
    --alert-rest-y: 0%;
    --alert-hide-y: -6px;
  }
}
.mtz-alert {
  position: fixed; top: var(--alert-top); left: 50%; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text);
  padding: 13px 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown);
  max-width: calc(100vw - 40px);
  /* Alerts float over arbitrary page content (hero headings, cards, the nav
     itself), not just a uniform surface — the .14-alpha soft fill alone lets
     whatever's underneath show through sharply enough to read as visual
     noise. Blur it the same way the fixed nav blurs the page scrolling
     beneath it, so the alert stays legible regardless of what's behind it. */
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0; transform: translate(-50%, var(--alert-hide-y)); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.mtz-alert.visible { opacity: 1; transform: translate(-50%, var(--alert-rest-y)); pointer-events: auto; }
.mtz-alert .licon { flex-shrink: 0; font-size: 18px; }
.mtz-alert--guidance { background: var(--guidance-soft); border: 1px solid var(--line-guidance); }
.mtz-alert--guidance .licon { color: var(--guidance); }
.mtz-alert--error   { background: var(--error-soft);   border: 1px solid var(--line-error); }
.mtz-alert--error   .licon { color: var(--error); }
.mtz-alert--success { background: var(--success-soft); border: 1px solid var(--line-success); }
.mtz-alert--success .licon { color: var(--success); }
.mtz-alert--warning { background: var(--warning-soft); border: 1px solid var(--line-warning); }
.mtz-alert--warning .licon { color: var(--warning); }

/* ── Information note ───────────────────────────────────────────────────
   The icon belongs to the first text line, not a separate grid/flex column. */
.mtz-info-note { color: var(--faint); line-height: var(--lh-body); }
.mtz-info-note .mtz-info-note-icon {
  display: inline-block;
  margin-right: var(--space-1);
  color: var(--muted);
  font-size: var(--fs-body);
  vertical-align: var(--icon-inline-shift);
}
.mtz-info-note strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .mtz-alert { transition: opacity var(--dur-fast) ease !important; transform: translate(-50%, var(--alert-rest-y)) !important; }
}

/* ── Data table ───────────────────────────────────────────────────────── */
.bb-tech-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; font-size: 13px; margin: 14px 0;
}
.bb-tech-table th, .bb-tech-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.bb-tech-table thead th {
  background: var(--surface-recessed); color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.bb-tech-table tbody tr:last-child td { border-bottom: none; }
.bb-id { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }

/* mock-tool placeholder — dashed well where a live interactive tool renders */
.bb-mock {
  background: var(--surface-recessed); border: var(--border-dashed);
  border-radius: var(--radius-lg); padding: 26px; text-align: center;
  font-size: 13px; color: var(--faint); font-family: var(--font-mono);
}

/* ── Slider ───────────────────────────────────────────────────────────
   Single-thumb range control on the gold rail. See Slider.prompt.md.
   Built by design-system/reference/slider.js — this file is visuals only. */
.mtz-slider { position: relative; padding-top: 34px; padding-bottom: 4px; touch-action: none; user-select: none; }
.mtz-slider-rail { position: relative; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; }
.mtz-slider-fill { position: absolute; top: 0; left: 0; height: 5px; border-radius: var(--radius-pill); background: var(--accent); pointer-events: none; }
.mtz-slider-marks { position: absolute; top: 50%; left: 0; width: 100%; height: 0; pointer-events: none; }
.mtz-slider-mark { position: absolute; top: 50%; width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--line-strong); transform: translate(-50%, -50%); }
.mtz-slider-mark.active { background: var(--on-accent); }
.mtz-slider-thumb {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--accent); box-shadow: 0 0 0 3.2px var(--surface);
  transform: translate(-50%, -50%) scale(1); cursor: grab;
  transition: transform 140ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mtz-slider.dragging .mtz-slider-thumb { transform: translate(-50%, -50%) scale(0.82); cursor: grabbing; }
.mtz-slider-tooltip {
  position: absolute; bottom: calc(100% + 26px); left: 50%; transform: translateX(-50%);
  background: var(--surface-recessed); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out);
}
.mtz-slider-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--surface-recessed);
}
.mtz-slider-thumb.show-tip .mtz-slider-tooltip { opacity: 1; }
.mtz-slider-end-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--faint); }

/* ── PhoneFrame — iPhone 16-style bezel for campaign screenshots ────────
   Every geometric metric (outer radius, bezel padding, rim, screen radius)
   is a % of the frame's *measured* width, applied via phone-frame.js
   (ResizeObserver) — NOT fixed px — so corners stay concentric and the
   bezel reads correctly at any size. Values below are just the pre-JS /
   no-JS fallback, computed at the 206px reference width; phone-frame.js
   overrides them inline as soon as it measures the real rendered width.
   Width-driven: aspect-ratio derives height, never set height directly.
   One motion: 3px hover lift, ease-out, reduced-motion-aware (below). */
.mtz-phone-frame {
  width: 100%;
  box-sizing: border-box;
  padding: 8px; /* 206px × 0.04 */
  border-radius: var(--radius-phone); /* 206px × 0.165 ≈ 34px */
  background: linear-gradient(150deg, #3a3b40, #17181b 55%, #202127);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-phone);
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mtz-phone-frame:hover { transform: translateY(-3px); }
}
.mtz-phone-screen {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 26px; /* fallback = 206px × 0.125; phone-frame.js sets the real value inline */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, var(--surface), var(--surface-recessed));
}
.mtz-phone-screen img,
.mtz-phone-screen image-slot {
  position: absolute;
  /* Responsive overscan is measured by phone-frame.js: about 0.8% of the
     inner screen, clamped to 1–3px. Values below are the no-JS fallback. */
  inset: var(--mtz-phone-overscan-offset, -2px);
  width: calc(100% + var(--mtz-phone-overscan-grow, 4px));
  height: calc(100% + var(--mtz-phone-overscan-grow, 4px));
  max-width: none;
  object-fit: cover;
  display: block;
}
/* Outer wrapper: centers the frame + caption as a column — matters once the
   frame is given a fixed width narrower than its parent (see specs/phone-frame.spec.md). */
.mtz-phone-frame-wrap { display: flex; flex-direction: column; align-items: center; }
.mtz-phone-caption { margin-top: 12px; font-size: 13px; line-height: 1.4; text-align: center; }
.mtz-phone-caption .num { font-family: var(--font-sans); font-weight: var(--fw-black); color: var(--accent); margin-right: 6px; }
.mtz-phone-caption .lbl { font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--text); }

/* ── Focus ring (keyboard only) — gold ring is the ONE focus signal ────── */
.mtz-btn:focus-visible, .mtz-arrow-link:focus-visible, .mtz-card:focus-visible,
.bb-tab:focus-visible, .mtz-dropdown-trigger:focus-visible, .mtz-secondary-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Reduced motion — transforms drop, colour transitions remain ───────── */
@media (prefers-reduced-motion: reduce) {
  .mtz-btn, .mtz-card, .mtz-dropdown-trigger, .bb-tab, .mtz-arrow, .mtz-arrow-link .mtz-arrow {
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
    transform: none !important;
  }
  .mtz-card:hover, .mtz-btn:hover, .mtz-dropdown-trigger:hover { transform: none !important; }
  .mtz-slider-thumb, .mtz-slider.dragging .mtz-slider-thumb { transition: box-shadow var(--dur-fast) ease !important; transform: translate(-50%, -50%) !important; }
  .mtz-phone-frame { transition: none !important; }
  .mtz-phone-frame:hover { transform: none !important; }
}