/* ============================================================
   MANDARA BIOFUELS — Tweaks panel (on-brand, vanilla)
   Three expressive controls: Headline voice · Accent · Motion.
   Hidden until the host activates edit mode.
   ============================================================ */
.mtweaks {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483646;
  width: 264px;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  background: rgba(20,37,69,0.82);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(237,228,220,0.16); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -24px rgba(0,0,0,0.6);
  color: var(--cream); overflow: hidden;
}
.mtweaks[data-open="0"] { display: none; }
.mtweaks__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px 13px 16px; border-bottom: 1px solid rgba(237,228,220,0.12);
}
.mtweaks__hd b { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #fff; display: flex; align-items: center; gap: 9px; }
.mtweaks__hd b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mid-blue); box-shadow: 0 0 8px var(--mid-blue); }
.mtweaks__x {
  appearance: none; border: 0; background: transparent; color: rgba(237,228,220,0.6);
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 17px; line-height: 1;
}
.mtweaks__x:hover { background: rgba(237,228,220,0.1); color: #fff; }
.mtweaks__body { padding: 6px 16px 16px; display: flex; flex-direction: column; }
.mtweaks__sect {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mid-blue); margin: 16px 0 9px;
}
.mtweaks__sect:first-child { margin-top: 8px; }

.mseg { display: flex; gap: 4px; background: rgba(0,0,0,0.22); border-radius: 9px; padding: 3px; }
.mseg button {
  appearance: none; flex: 1; border: 0; background: transparent; cursor: pointer;
  color: rgba(237,228,220,0.66); font-family: inherit; font-size: 11.5px; font-weight: 500;
  padding: 7px 4px; border-radius: 7px; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.mseg button:hover { color: var(--cream); }
.mseg button[aria-pressed="true"] { background: rgba(237,228,220,0.95); color: var(--navy); font-weight: 600; }
.mseg .sw { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; }

.mtweaks__note {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.5;
  color: rgba(237,228,220,0.42); margin: 16px 0 0; letter-spacing: 0.02em;
}
.mtweaks__reset {
  appearance: none; border: 1px solid rgba(237,228,220,0.2); background: transparent;
  color: rgba(237,228,220,0.7); font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 8px; border-radius: 7px; cursor: pointer;
  margin-top: 14px; transition: all .2s var(--ease);
}
.mtweaks__reset:hover { border-color: var(--cream); color: var(--cream); }

/* ===== Expressive overrides driven by body data-attributes ===== */

/* Headline voice */
:root { --display-font: var(--sans); }
.display-xl, .display, h1, h2, h3, .hero__h { font-family: var(--display-font); }
body[data-voice="editorial"] { --display-font: 'Newsreader', Georgia, 'Times New Roman', serif; }
body[data-voice="editorial"] .display-xl,
body[data-voice="editorial"] .display,
body[data-voice="editorial"] h1,
body[data-voice="editorial"] h2,
body[data-voice="editorial"] h3,
body[data-voice="editorial"] .hero__h { letter-spacing: -0.012em; font-weight: 600; }
body[data-voice="neo"] { --display-font: 'Space Grotesk', var(--sans); }
body[data-voice="neo"] .display-xl,
body[data-voice="neo"] .display,
body[data-voice="neo"] h1,
body[data-voice="neo"] h2,
body[data-voice="neo"] h3,
body[data-voice="neo"] .hero__h { letter-spacing: -0.03em; }

/* Accent temperature — recolors the logo-blue token used across eyebrows,
   bullets, badges, chips, tier pips, ticker head, links, HUD accents. */
body[data-accent="green"] { --mid-blue: #2F8B59; }
body[data-accent="brass"] { --mid-blue: #B0843E; }

/* Motion — Calm freezes the cinematic energy into a still, editorial register */
body[data-motion="calm"] .ticker__track { animation: none !important; }
body[data-motion="calm"] .flow-line { animation: none !important; }
body[data-motion="calm"] .travel { opacity: 0 !important; }
body[data-motion="calm"] .dot,
body[data-motion="calm"] .globe-hud__ey::before { animation: none !important; }
body[data-motion="calm"] .pcard [class*="mo-"] { animation: none !important; }