/* ══════════════════════════════════════════════════════════════════════
   Maverick Labs - Spectral Instrument · Components
   ══════════════════════════════════════════════════════════════════════
   Buttons, panels, inputs, tables, chips, toolbar, status bar, drawer,
   canvas chrome. Scoped to [data-product="maverick-labs"]. No hover glow,
   no lift, no default shadows on panels; border + luminance state changes
   only. Cyan leads actions; UV green is a group marker / semantic success.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Buttons ═══════════════════════════════════════════════════════════ */

/* Anchor-buttons: outrank the base [data-product] a link rule */
[data-product="maverick-labs"] a.ml-btn {
  color: var(--ml-text);
  text-decoration: none;
}
[data-product="maverick-labs"] a.ml-btn:hover { color: var(--ml-text); }
[data-product="maverick-labs"] a.ml-btn--primary,
[data-product="maverick-labs"] a.ml-btn--primary:hover { color: #0A0D12; }
[data-product="maverick-labs"] a.ml-btn--ghost { color: var(--ml-text-muted); }
[data-product="maverick-labs"] a.ml-btn--ghost:hover { color: var(--ml-text); }

.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-space-2);
  height: 40px;
  padding: 0 var(--ml-space-3);
  border-radius: var(--ml-radius-md);
  border: 1px solid var(--ml-control-line);
  background: transparent;
  color: var(--ml-text);
  font-family: var(--ml-font-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--ml-duration-micro) var(--ml-ease),
    border-color var(--ml-duration-micro) var(--ml-ease),
    color var(--ml-duration-micro) var(--ml-ease);
}
.ml-btn:hover {
  border-color: var(--ml-text-muted);
  background: var(--ml-surface-2);
}
.ml-btn:active { background: var(--ml-surface-3); }

.ml-btn--primary {
  background: var(--ml-primary);
  border-color: var(--ml-primary);
  color: #0A0D12;
}
.ml-btn--primary:hover {
  background: #5FEBFF;
  border-color: #5FEBFF;
}
.ml-btn--primary:active { background: #1FC8E0; border-color: #1FC8E0; }

.ml-btn--ghost {
  border-color: transparent;
  color: var(--ml-text-muted);
  font-weight: 500;
}
.ml-btn--ghost:hover { color: var(--ml-text); background: var(--ml-surface-2); }

.ml-btn--danger {
  border-color: var(--ml-danger);
  color: var(--ml-danger);
}
.ml-btn--danger:hover { background: var(--ml-danger-dim); }

/* Compact 32px toolbar variant */
.ml-btn--compact {
  height: 32px;
  padding: 0 var(--ml-space-2);
  font-size: 13px;
}

/* Active tool state - cyan, not green */
.ml-btn[aria-pressed="true"],
.ml-btn.is-active-tool {
  border-color: var(--ml-primary);
  color: var(--ml-primary);
  background: var(--ml-primary-dim);
}

/* Icon-only buttons must still hit 44px touch targets on coarse pointers */
@media (pointer: coarse) {
  .ml-btn, .ml-btn--compact { min-height: 44px; min-width: 44px; }
}

/* ══ Panels ════════════════════════════════════════════════════════════ */

.ml-panel {
  background: var(--ml-surface-1);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius-lg);
  padding: var(--ml-space-3);
}
.ml-panel--surface-2 { background: var(--ml-surface-2); }
.ml-panel--selected { border-color: var(--ml-primary); }

.ml-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ml-space-2);
  margin-bottom: var(--ml-space-2);
}
.ml-panel-head > * { min-width: 0; }

/* Verified: small green marker, never a full green border */
.ml-verified-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ml-font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ml-accent);
  text-transform: uppercase;
}
.ml-verified-marker::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: currentColor;
}
.ml-verified-marker.is-primary { color: var(--ml-primary); }

/* Floating elements (dialogs, menus, drawers, floating inspectors) may float */
.ml-float { box-shadow: var(--ml-shadow-float); }

/* ══ Inputs ════════════════════════════════════════════════════════════ */

.ml-field { display: grid; gap: 6px; }
.ml-field > label {
  font-family: var(--ml-font-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ml-text-subtle);
}
.ml-input,
.ml-select,
.ml-textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--ml-surface-2);
  border: 1px solid var(--ml-control-line);
  border-radius: var(--ml-radius-md);
  color: var(--ml-text);
  font-family: var(--ml-font-brand);
  font-size: 14px;
  transition:
    border-color var(--ml-duration-micro) var(--ml-ease),
    background-color var(--ml-duration-micro) var(--ml-ease);
}
.ml-textarea { height: auto; padding: 10px 12px; resize: vertical; }
.ml-input::placeholder,
.ml-textarea::placeholder { color: var(--ml-text-subtle); font-style: normal; }
.ml-input:hover, .ml-select:hover, .ml-textarea:hover { border-color: var(--ml-text-subtle); }
.ml-input:focus-visible, .ml-select:focus-visible, .ml-textarea:focus-visible {
  outline: 2px solid var(--ml-primary);
  outline-offset: 2px;
  border-color: var(--ml-primary);
}
.ml-field.is-success .ml-input { border-color: var(--ml-accent); }
.ml-field.is-error .ml-input { border-color: var(--ml-danger); }
.ml-field-caption {
  font-size: 12px;
  color: var(--ml-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ml-field.is-error .ml-field-caption { color: var(--ml-danger); }
.ml-field.is-success .ml-field-caption { color: var(--ml-accent); }

/* Compact input for toolbars */
.ml-input--compact { height: 32px; font-size: 13px; }

/* ══ Status chips (text + glyph, never color alone) ════════════════════ */

.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--ml-radius-sm);
  border: 1px solid var(--ml-line-strong);
  font-family: var(--ml-font-data);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ml-text-muted);
  white-space: normal;
  max-width: 100%;
}
.ml-chip::before { flex: none; }
.ml-table .ml-chip { white-space: nowrap; padding: 0 8px; }
.ml-chip::before { font-family: var(--ml-font-data); }
.ml-chip--verified { color: var(--ml-accent); border-color: rgba(57,255,136,.4); background: var(--ml-accent-dim); }
.ml-chip--verified::before { content: "✓"; }
.ml-chip--warning { color: var(--ml-warning); border-color: rgba(255,176,32,.4); background: var(--ml-warning-dim); }
.ml-chip--warning::before { content: "!"; }
.ml-chip--failed { color: var(--ml-danger); border-color: rgba(255,92,100,.4); background: var(--ml-danger-dim); }
.ml-chip--failed::before { content: "✕"; }
.ml-chip--running { color: var(--ml-primary); border-color: rgba(47,230,255,.4); background: var(--ml-primary-dim); }
.ml-chip--running::before { content: "▶"; font-size: 9px; }
.ml-chip--queued { color: var(--ml-text-muted); }
.ml-chip--queued::before { content: "…"; }
.ml-chip--reference { color: var(--ml-secondary); border-color: rgba(0,229,194,.4); background: var(--ml-secondary-dim); }
.ml-chip--reference::before { content: "◇"; }
.ml-chip--available { color: var(--ml-primary); border-color: rgba(47,230,255,.4); background: var(--ml-primary-dim); }
.ml-chip--available::before { content: "✓"; }
.ml-chip--dev { color: var(--ml-secondary); border-color: rgba(0,229,194,.4); background: var(--ml-secondary-dim); }
.ml-chip--dev::before { content: "◇"; }

/* ══ Tables ════════════════════════════════════════════════════════════ */

.ml-table-wrap {
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius-lg);
  overflow: auto;
  max-height: 560px;
  background: var(--ml-surface-1);
}
.ml-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.54;
}
.ml-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 32px;
  padding: 0 10px;
  background: var(--ml-surface-2);
  border-bottom: 1px solid var(--ml-line-strong);
  text-align: left;
  font-family: var(--ml-font-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ml-text-subtle);
  white-space: nowrap;
}
.ml-table thead th.is-numeric { text-align: right; }
.ml-table thead th button.ml-sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ml-table thead th button.ml-sort:hover { color: var(--ml-text); }
.ml-table thead th button.ml-sort:focus-visible {
  outline: 2px solid var(--ml-primary);
  outline-offset: 2px;
}
.ml-table thead th .ml-sort-arrow { font-size: 9px; opacity: 0; }
.ml-table thead th[aria-sort="ascending"] .ml-sort-arrow,
.ml-table thead th[aria-sort="descending"] .ml-sort-arrow { opacity: 1; color: var(--ml-primary); }

.ml-table tbody td {
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--ml-line);
  color: var(--ml-text);
  white-space: nowrap;
}
.ml-table--compact tbody td { height: 36px; }
.ml-table tbody tr:last-child td { border-bottom: 0; }
.ml-table td.is-numeric {
  text-align: right;
  font-family: var(--ml-font-data);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ml-table td.is-muted { color: var(--ml-text-muted); }

.ml-table tbody tr { cursor: default; }
.ml-table tbody tr.is-selectable { cursor: pointer; }
.ml-table tbody tr.is-selectable:hover td { background: var(--ml-surface-2); }
.ml-table tbody tr.is-selectable:focus-visible {
  outline: 2px solid var(--ml-primary);
  outline-offset: -2px;
}
.ml-table tbody tr[aria-selected="true"] td {
  background: var(--ml-surface-3);
}
.ml-table tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 2px 0 0 var(--ml-primary);
}

/* Table state rows (empty / loading) */
.ml-table-state {
  padding: var(--ml-space-6) var(--ml-space-4);
  text-align: center;
  color: var(--ml-text-muted);
}
.ml-table-state .ml-kicker { display: block; margin-bottom: var(--ml-space-2); }

/* ══ Toolbar ═══════════════════════════════════════════════════════════ */

.ml-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ml-space-2);
  padding: var(--ml-space-2) var(--ml-space-3);
  background: var(--ml-surface-1);
  border-bottom: 1px solid var(--ml-line);
}
.ml-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--ml-space-1);
  padding-right: var(--ml-space-2);
  border-right: 1px solid var(--ml-line);
}
.ml-toolbar-group:last-child { border-right: 0; }
.ml-toolbar-spacer { flex: 1; }
.ml-toolbar .ml-kicker { margin-right: var(--ml-space-1); }

/* ══ Status bar ════════════════════════════════════════════════════════ */

.ml-statusbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ml-space-3);
  min-height: 28px;
  padding: 2px var(--ml-space-3);
  background: var(--ml-surface-1);
  border-top: 1px solid var(--ml-line);
  font-family: var(--ml-font-data);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ml-text-muted);
}
.ml-statusbar strong { color: var(--ml-text); font-weight: 600; }
.ml-statusbar .ml-status-ok { color: var(--ml-accent); }
.ml-statusbar .ml-status-warn { color: var(--ml-warning); }

/* ══ Canvas chrome (workbench) ═════════════════════════════════════════ */

.ml-canvas-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  background: var(--ml-surface-1);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius-lg);
  overflow: hidden;
}
.ml-canvas-head {
  display: flex;
  align-items: center;
  gap: var(--ml-space-3);
  flex-wrap: wrap;
  padding: var(--ml-space-2) var(--ml-space-3);
  border-bottom: 1px solid var(--ml-line);
}
.ml-canvas-body { position: relative; flex: 1; min-height: 280px; }
.ml-canvas-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ml-canvas-readout {
  position: absolute;
  top: var(--ml-space-2);
  right: var(--ml-space-2);
  padding: var(--ml-space-2) var(--ml-space-3);
  background: rgba(10, 13, 18, .85);
  border: 1px solid var(--ml-line-strong);
  border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-data);
  font-size: 11.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--ml-text-muted);
  pointer-events: none;
}
.ml-canvas-readout strong { color: var(--ml-primary); font-weight: 600; }

/* Trace legend */
.ml-legend {
  display: flex;
  gap: var(--ml-space-3);
  flex-wrap: wrap;
  font-family: var(--ml-font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ml-text-muted);
}
.ml-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ml-legend i {
  width: 14px; height: 0;
  border-top: 2px solid currentColor;
  display: inline-block;
}
.ml-legend .lg-live { color: var(--ml-primary); }
.ml-legend .lg-ref { color: var(--ml-secondary); }
.ml-legend .lg-ref i { border-top-style: dashed; }
.ml-legend .lg-marker { color: var(--ml-marker); }
.ml-legend .lg-marker i { border-top-style: dotted; }
.ml-legend em { font-style: normal; color: var(--ml-text-muted); }

/* ══ Inspector / drawer ════════════════════════════════════════════════ */

.ml-inspector {
  padding: var(--ml-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-3);
}
.ml-inspector h2 { margin: 0; }
.ml-kv {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 4px var(--ml-space-3);
  font-size: 13px;
}
.ml-kv dt {
  color: var(--ml-text-subtle);
  font-family: var(--ml-font-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: center;
}
.ml-kv dd {
  margin: 0;
  font-family: var(--ml-font-data);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ml-text);
  overflow-wrap: anywhere;
  white-space: normal;
}

.ml-drawer-close { display: none; }
@media (max-width: 1023px) {
  .ml-drawer-close { display: inline-flex; align-self: flex-end; }
}

/* Scrim behind the mobile drawer */
.ml-scrim {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(10, 13, 18, .6);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ml-duration-default) var(--ml-ease),
    visibility 0s linear var(--ml-duration-default);
}
.ml-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ml-duration-default) var(--ml-ease), visibility 0s;
}

/* ══ KPI row ═══════════════════════════════════════════════════════════ */

.ml-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ml-space-3);
}
@media (max-width: 1023px) { .ml-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ml-kpi-row { grid-template-columns: 1fr; } }

/* ══ Data review layout ════════════════════════════════════════════════ */

.ml-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(280px, 1fr);
  gap: var(--ml-space-3);
  align-items: start;
}
.ml-review-layout > * { min-width: 0; }
@media (max-width: 1023px) {
  .ml-review-layout { grid-template-columns: 1fr; }
}

/* ══ Landing helpers ═══════════════════════════════════════════════════ */

.ml-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--ml-space-6);
  align-items: center;
  padding: var(--ml-space-6) 0;
}
@media (max-width: 1023px) { .ml-hero { grid-template-columns: 1fr; gap: var(--ml-space-4); } }

.ml-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ml-space-2);
}
.ml-spec-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ml-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.ml-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--ml-primary);
}
.ml-spec-list li strong { color: var(--ml-text); font-weight: 700; }

.ml-preview-frame {
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius-lg);
  overflow: hidden;
  background: var(--ml-surface-1);
}
.ml-preview-frame svg { display: block; width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════════════
   Maverick Labs — Spectral Instrument · CINEMATIC LAYER
   ──────────────────────────────────────────────────────────────────────
   Added 2026-08-11 · Founder-directed "bolder / cinematic" pass.
   INTENTIONAL SUPERSEDE: the base Components layer avoided glow/lift by
   design ("border + luminance only"). This block deliberately introduces
   ambient light, depth, motion and hover elevation per that direction.
   Rules kept: evolve-don't-pivot — NO new hues (every colour is an existing
   --ml-* token or its alpha); Space Grotesk unchanged; fully scoped to
   [data-product="maverick-labs"]; zero leakage into the Systems cascade.
   Reversible: this is a self-contained block appended to the end of the
   file — delete from this banner down to restore the prior aesthetic exactly.
   A11y: decorative only; text colour/contrast unchanged; 2px focus ring
   preserved; scroll-reveal is @supports-gated progressive enhancement and a
   prefers-reduced-motion guard at the foot disables all motion + reveal.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Derived cinematic tokens (alpha / gradient of existing colours only) ─ */
[data-product="maverick-labs"] {
  --ml-glow-soft: 0 18px 48px rgba(0,0,0,.5), 0 0 34px rgba(47,230,255,.10);
  --ml-edge-sheen: linear-gradient(90deg, transparent, rgba(47,230,255,.7) 32%, rgba(0,229,194,.7) 68%, transparent);
  --ml-panel-cine: linear-gradient(180deg, rgba(26,34,44,.86), rgba(17,22,29,.94));
}

/* ── Ambient cinematic field: slow-drifting aurora + edge vignette ─────── */
[data-product="maverick-labs"] .ml-app { position: relative; isolation: isolate; }
[data-product="maverick-labs"] .ml-app::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 8% -6%,  rgba(47,230,255,.10), transparent 60%),
    radial-gradient(34vmax 30vmax at 100% 12%, rgba(0,229,194,.08), transparent 62%),
    radial-gradient(40vmax 34vmax at 82% 108%, rgba(57,255,136,.05), transparent 60%);
  filter: blur(8px);
  animation: ml-aurora 46s var(--ml-ease) infinite alternate;
}
@keyframes ml-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
[data-product="maverick-labs"] .ml-app::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 58%, rgba(0,0,0,.34) 100%);
}

/* ── Sticky top-rail: a slow travelling sheen under the bar ────────────── */
[data-product="maverick-labs"] .ml-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ml-edge-sheen); background-size: 220% 100%; opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  animation: ml-rail 9s linear infinite;
}
@keyframes ml-rail { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* ── Hero: ambient instrument light behind the headline ───────────────── */
[data-product="maverick-labs"] .ml-home-hero,
[data-product="maverick-labs"] .ml-content-hero { position: relative; }
[data-product="maverick-labs"] .ml-home-hero::before,
[data-product="maverick-labs"] .ml-content-hero::before {
  content: ""; position: absolute; z-index: -1; inset: -8% -12% -12% -12%; pointer-events: none;
  background:
    radial-gradient(46% 60% at 22% 30%, rgba(47,230,255,.12), transparent 62%),
    radial-gradient(40% 54% at 80% 44%, rgba(0,229,194,.09), transparent 64%);
  filter: blur(6px);
}

/* ── Animated sheen across the gradient headline ──────────────────────── */
[data-product="maverick-labs"] .ml-gradient-text {
  background: linear-gradient(100deg, var(--ml-primary), var(--ml-secondary) 42%, var(--ml-primary) 72%, var(--ml-secondary));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ml-sheen 8s var(--ml-ease) infinite;
}
@keyframes ml-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ── Kickers: leading calibration tick with a soft glow ───────────────── */
[data-product="maverick-labs"] .ml-kicker--primary,
[data-product="maverick-labs"] .ml-kicker--accent { display: inline-flex; align-items: center; gap: 10px; }
[data-product="maverick-labs"] .ml-kicker--primary::before,
[data-product="maverick-labs"] .ml-kicker--accent::before {
  content: ""; width: 18px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; opacity: .9;
}

/* ── Cards: depth surface, top hairline, hover lift + rim glow ─────────── */
[data-product="maverick-labs"] .ml-service-card,
[data-product="maverick-labs"] .ml-demo-card,
[data-product="maverick-labs"] .ml-path-step,
[data-product="maverick-labs"] .ml-boundary-card {
  position: relative; overflow: hidden; background: var(--ml-panel-cine);
  transition:
    transform var(--ml-duration-default) var(--ml-ease),
    border-color var(--ml-duration-default) var(--ml-ease),
    box-shadow var(--ml-duration-default) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-service-card::before,
[data-product="maverick-labs"] .ml-demo-card::before,
[data-product="maverick-labs"] .ml-path-step::before,
[data-product="maverick-labs"] .ml-boundary-card::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: var(--ml-edge-sheen); opacity: .32;
  transition: opacity var(--ml-duration-default) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-service-card:hover,
[data-product="maverick-labs"] .ml-demo-card:hover,
[data-product="maverick-labs"] .ml-path-step:hover,
[data-product="maverick-labs"] .ml-boundary-card:hover {
  transform: translateY(-4px); border-color: var(--ml-line-strong); box-shadow: var(--ml-glow-soft);
}
[data-product="maverick-labs"] .ml-service-card:hover::before,
[data-product="maverick-labs"] .ml-demo-card:hover::before,
[data-product="maverick-labs"] .ml-path-step:hover::before,
[data-product="maverick-labs"] .ml-boundary-card:hover::before { opacity: .9; }

/* ── Numbered metrics: larger, with a spectral glow (colour preserved) ── */
[data-product="maverick-labs"] .ml-service-card .ml-metric,
[data-product="maverick-labs"] .ml-path-step .ml-metric,
[data-product="maverick-labs"] .ml-capability-row .ml-metric {
  font-size: 34px; text-shadow: 0 0 18px rgba(47,230,255,.35);
}

/* ── Signature instrument: signal board glow, corner ticks, scan sweep ── */
[data-product="maverick-labs"] .ml-signal-board {
  box-shadow: var(--ml-glow-soft);
  background-image:
    linear-gradient(var(--ml-primary),var(--ml-primary))     left 12px top 12px    / 14px 1px no-repeat,
    linear-gradient(var(--ml-primary),var(--ml-primary))     left 12px top 12px    / 1px 14px no-repeat,
    linear-gradient(var(--ml-primary),var(--ml-primary))     right 12px top 12px   / 14px 1px no-repeat,
    linear-gradient(var(--ml-primary),var(--ml-primary))     right 12px top 12px   / 1px 14px no-repeat,
    linear-gradient(var(--ml-secondary),var(--ml-secondary)) left 12px bottom 12px / 14px 1px no-repeat,
    linear-gradient(var(--ml-secondary),var(--ml-secondary)) left 12px bottom 12px / 1px 14px no-repeat,
    linear-gradient(var(--ml-secondary),var(--ml-secondary)) right 12px bottom 12px/ 14px 1px no-repeat,
    linear-gradient(var(--ml-secondary),var(--ml-secondary)) right 12px bottom 12px/ 1px 14px no-repeat;
}
[data-product="maverick-labs"] .ml-signal-board::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2%; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ml-primary), transparent);
  animation: ml-scan 4.6s var(--ml-ease) infinite;
}
@keyframes ml-scan { 0% { top: 2%; opacity: 0; } 14% { opacity: .6; } 86% { opacity: .6; } 100% { top: 98%; opacity: 0; } }

/* Signal steps: left status rail + gentle pulse on the review step */
[data-product="maverick-labs"] .ml-signal-step { position: relative; }
[data-product="maverick-labs"] .ml-signal-step::after {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; border-radius: 2px;
  background: var(--ml-primary); opacity: .45;
}
[data-product="maverick-labs"] .ml-signal-step.is-review::after {
  background: var(--ml-marker); opacity: .9; box-shadow: 0 0 10px var(--ml-marker);
  animation: ml-pulse 2.6s var(--ml-ease) infinite;
}
@keyframes ml-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── Buttons: gradient primary with sheen sweep; glow on secondary ─────── */
[data-product="maverick-labs"] .ml-btn {
  position: relative; overflow: hidden;
  transition:
    background-color var(--ml-duration-micro) var(--ml-ease),
    border-color var(--ml-duration-micro) var(--ml-ease),
    color var(--ml-duration-micro) var(--ml-ease),
    box-shadow var(--ml-duration-micro) var(--ml-ease),
    transform var(--ml-duration-micro) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-btn--primary {
  background-image: linear-gradient(120deg, var(--ml-primary), var(--ml-secondary));
  border-color: transparent; box-shadow: 0 6px 20px rgba(47,230,255,.22);
}
[data-product="maverick-labs"] .ml-btn--primary:hover {
  background-image: linear-gradient(120deg, #5FEBFF, #2FF3D6);
  box-shadow: 0 8px 26px rgba(47,230,255,.34); transform: translateY(-1px);
}
[data-product="maverick-labs"] .ml-btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  transform: translateX(-130%); transition: transform var(--ml-duration-transition) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-btn--primary:hover::after { transform: translateX(130%); }
[data-product="maverick-labs"] .ml-btn:not(.ml-btn--primary):not(.ml-btn--ghost):not(.ml-btn--danger):hover {
  border-color: var(--ml-primary);
  box-shadow: 0 0 0 1px rgba(47,230,255,.25), 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-1px);
}

/* ── Feature bands: depth + premium gradient rim ──────────────────────── */
[data-product="maverick-labs"] .ml-outcome-band,
[data-product="maverick-labs"] .ml-contact-band,
[data-product="maverick-labs"] .ml-scope-note { position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
[data-product="maverick-labs"] .ml-outcome-band::before,
[data-product="maverick-labs"] .ml-contact-band::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(47,230,255,.5), transparent 40%, transparent 60%, rgba(0,229,194,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Footer: top sheen hairline ───────────────────────────────────────── */
[data-product="maverick-labs"] .ml-footer { position: relative; }
[data-product="maverick-labs"] .ml-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ml-edge-sheen); opacity: .4;
}

/* ── Focus: keep the 2px ring, add a soft outer glow ──────────────────── */
[data-product="maverick-labs"] :focus-visible { box-shadow: 0 0 0 4px rgba(47,230,255,.18); }

/* ── Themed scrollbar (polish) ────────────────────────────────────────── */
[data-product="maverick-labs"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-product="maverick-labs"] ::-webkit-scrollbar-track { background: var(--ml-surface-1); }
[data-product="maverick-labs"] ::-webkit-scrollbar-thumb {
  background: var(--ml-line-strong); border-radius: 999px; border: 2px solid var(--ml-surface-1);
}
[data-product="maverick-labs"] ::-webkit-scrollbar-thumb:hover { background: var(--ml-control-line); }

/* ── Scroll reveal — progressive enhancement (scroll-driven, no JS) ────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-product="maverick-labs"] .ml-home-section,
    [data-product="maverick-labs"] .ml-content-section {
      animation: ml-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
  }
}
@keyframes ml-rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ── Reduced-motion guard (explicit; scroll-timeline is not time-based) ── */
@media (prefers-reduced-motion: reduce) {
  [data-product="maverick-labs"] .ml-home-section,
  [data-product="maverick-labs"] .ml-content-section { animation: none; opacity: 1; transform: none; }
}
/* ════════════════════ end CINEMATIC LAYER ════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   Maverick Labs — Spectral Instrument · VISUAL SYSTEM LAYER
   ──────────────────────────────────────────────────────────────────────
   Added 2026-08-11 · icons, generative visuals, raster field, verdict
   legend + micro-interaction styling. Pairs with the ENHANCE module in
   labs_site.js (which injects icons/scope and toggles .ml-inview / .is-*).
   Token-only colours; Labs-scoped; reversible (delete this block).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Monoline icon + its instrument chip ──────────────────────────────── */
[data-product="maverick-labs"] .ml-ic { width: 22px; height: 22px; display: block; color: var(--ml-primary); }
[data-product="maverick-labs"] .ml-ic-wrap {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--ml-line-strong); border-radius: var(--ml-radius-md);
  background: linear-gradient(180deg, rgba(47,230,255,.06), rgba(17,22,29,.4));
  box-shadow: inset 0 0 12px rgba(47,230,255,.06);
  transition: border-color var(--ml-duration-default) var(--ml-ease),
              box-shadow var(--ml-duration-default) var(--ml-ease),
              transform var(--ml-duration-default) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-service-card:hover .ml-ic-wrap,
[data-product="maverick-labs"] .ml-demo-card:hover .ml-ic-wrap,
[data-product="maverick-labs"] .ml-path-step:hover .ml-ic-wrap,
[data-product="maverick-labs"] .ml-boundary-card:hover .ml-ic-wrap {
  border-color: var(--ml-primary);
  box-shadow: 0 0 0 1px rgba(47,230,255,.22), 0 6px 18px rgba(0,0,0,.4);
  transform: translateY(-1px);
}
[data-product="maverick-labs"] .ml-principle { position: relative; }
[data-product="maverick-labs"] .ml-principle .ml-ic-wrap { top: 22px; right: 0; }
[data-product="maverick-labs"] .ml-service-card .ml-panel-title,
[data-product="maverick-labs"] .ml-demo-card .ml-panel-title,
[data-product="maverick-labs"] .ml-path-step .ml-panel-title { padding-right: 46px; }

/* ── Live oscilloscope injected into the signal board ─────────────────── */
[data-product="maverick-labs"] .ml-scope {
  position: relative; z-index: 1; width: 100%; height: 54px; display: block; margin: 2px 0 16px;
  overflow: visible;
}
[data-product="maverick-labs"] .ml-scope-ref {
  stroke: var(--ml-secondary); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .55; vector-effect: non-scaling-stroke;
}
[data-product="maverick-labs"] .ml-scope-live {
  stroke: var(--ml-primary); stroke-width: 1.75; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(47,230,255,.55));
}
[data-product="maverick-labs"] .ml-scope-dot { fill: var(--ml-marker); filter: drop-shadow(0 0 6px var(--ml-marker)); }

/* ── Raster spectral field + cursor-reactive light behind heroes ──────── */
[data-product="maverick-labs"] .ml-home-hero::after,
[data-product="maverick-labs"] .ml-content-hero::after {
  content: ""; position: absolute; z-index: -1; inset: -8% -12% 0 -12%; pointer-events: none; opacity: .9;
  background:
    radial-gradient(320px 240px at calc(var(--ml-mx, .5) * 100%) calc(var(--ml-my, .4) * 100%), rgba(47,230,255,.12), transparent 70%),
    linear-gradient(rgba(10,13,18,.74), rgba(10,13,18,.92)),
    -webkit-image-set(url("gen/ml-hero-field.webp") type("image/webp"), url("gen/ml-hero-field.jpg") type("image/jpeg")) center / cover no-repeat;
  background:
    radial-gradient(320px 240px at calc(var(--ml-mx, .5) * 100%) calc(var(--ml-my, .4) * 100%), rgba(47,230,255,.12), transparent 70%),
    linear-gradient(rgba(10,13,18,.74), rgba(10,13,18,.92)),
    image-set(url("gen/ml-hero-field.webp") type("image/webp"), url("gen/ml-hero-field.jpg") type("image/jpeg")) center / cover no-repeat;
  -webkit-mask: linear-gradient(#000 62%, transparent);
          mask: linear-gradient(#000 62%, transparent);
}

/* ── Card entrance (JS adds .ml-inview when scrolled into view) ────────── */
[data-product="maverick-labs"] .ml-inview { animation: ml-card-in .55s var(--ml-ease) both; animation-delay: var(--ml-stagger, 0ms); }
@keyframes ml-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Reality Audit verdict legend (signature interactive element) ──────── */
[data-product="maverick-labs"] .ml-verdict-legend {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ml-space-3); margin-top: var(--ml-space-4);
}
[data-product="maverick-labs"] .ml-verdict {
  position: relative; overflow: hidden; padding: 20px;
  border: 1px solid var(--ml-line); border-radius: var(--ml-radius-lg);
  background: var(--ml-panel-cine); outline: none;
  transition: transform var(--ml-duration-default) var(--ml-ease),
              border-color var(--ml-duration-default) var(--ml-ease),
              box-shadow var(--ml-duration-default) var(--ml-ease),
              opacity var(--ml-duration-default) var(--ml-ease);
}
[data-product="maverick-labs"] .ml-verdict::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: currentColor; opacity: .8;
}
[data-product="maverick-labs"] .ml-verdict .ml-ic { width: 26px; height: 26px; margin-bottom: 12px; color: currentColor; }
[data-product="maverick-labs"] .ml-verdict h3 { color: var(--ml-text); margin: 0 0 6px; }
[data-product="maverick-labs"] .ml-verdict p { margin: 0; color: var(--ml-text-muted); font-size: 13px; line-height: 1.5; }
[data-product="maverick-labs"] .ml-verdict--verified { color: var(--ml-accent); }
[data-product="maverick-labs"] .ml-verdict--inferred { color: var(--ml-secondary); }
[data-product="maverick-labs"] .ml-verdict--unproven { color: var(--ml-marker); }
[data-product="maverick-labs"] .ml-verdict--unknown  { color: var(--ml-text-subtle); }
[data-product="maverick-labs"] .ml-verdict-legend.is-focusing .ml-verdict { opacity: .42; }
[data-product="maverick-labs"] .ml-verdict-legend.is-focusing .ml-verdict.is-active {
  opacity: 1; transform: translateY(-4px); border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, var(--ml-glow-soft);
}
[data-product="maverick-labs"] .ml-verdict:focus-visible { box-shadow: 0 0 0 2px var(--ml-primary); }

/* ── Generative dual-trace figure (reported vs real) ──────────────────── */
[data-product="maverick-labs"] .ml-figure {
  position: relative; border: 1px solid var(--ml-line-strong); border-radius: var(--ml-radius-lg);
  background: rgba(17,22,29,.66); padding: 16px 16px 12px; box-shadow: var(--ml-glow-soft);
}
[data-product="maverick-labs"] .ml-figure svg { display: block; width: 100%; height: auto; }
[data-product="maverick-labs"] .ml-figure .fig-real { stroke: var(--ml-primary); stroke-width: 2; fill: none; filter: drop-shadow(0 0 5px rgba(47,230,255,.5)); }
[data-product="maverick-labs"] .ml-figure .fig-reported { stroke: var(--ml-secondary); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: .85; }
[data-product="maverick-labs"] .ml-figure .fig-grid { stroke: var(--ml-grid-major); stroke-width: .5; }
[data-product="maverick-labs"] .ml-figure .fig-gap { fill: rgba(255,176,32,.10); stroke: none; }
[data-product="maverick-labs"] .ml-figure-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--ml-font-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-text-subtle);
}
[data-product="maverick-labs"] .ml-figure-legend span { display: inline-flex; align-items: center; gap: 7px; }
[data-product="maverick-labs"] .ml-figure-legend i { width: 16px; height: 0; display: inline-block; border-top: 2px solid currentColor; }
[data-product="maverick-labs"] .ml-figure-legend .lg-real { color: var(--ml-primary); }
[data-product="maverick-labs"] .ml-figure-legend .lg-rep { color: var(--ml-secondary); }
[data-product="maverick-labs"] .ml-figure-legend .lg-rep i { border-top-style: dashed; }

@media (max-width: 767px) {
  [data-product="maverick-labs"] .ml-verdict-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-product="maverick-labs"] .ml-inview { animation: none; }
}
/* ════════════════════ end VISUAL SYSTEM LAYER ════════════════════════ */