/* Site typography (home page and Expérience 3D): Eurostile with a light blue glow (classes on <html>: tg-on tg-glow tg-euro tg-soft tg-light), chosen 2026-10-14.
   Text on white or light grey stays plain Eurostile (Classic). References: MRSTV ident (soft blue broadcast glow), JKOKL, Dweller.
   With ?glow, js/typo-glow.js adds a switcher: Sweet Square Pro (former type), Eurostile Classic (tg-euro only), Glow Light, Glow (tg-soft without tg-light). */

/* ============================================================ typefaces */
html.tg-euro { --font: "eurostile", "Helvetica Neue", Arial, sans-serif; --font-text: var(--font); }

/* figures already match the capitals in Eurostile: no enlarged "3" in "3D" */
html.tg-on:not(.pl-sweet):not(.pl-adj):not(.pl-orb) .n3 { font-size: 1em; line-height: inherit; }

/* Eurostile: square and wide, so neutral tracking, regular leads, tracked capitals for the small headings */
html.tg-euro body { letter-spacing: 0; }
html.tg-euro :is(.t-hero, .t-xl, .t-l, .t-m) { letter-spacing: -.01em; }
html.tg-euro .t-lead { font-weight: 400; }
html.tg-euro :is(.t-eyebrow, .tile-kicker, .sheet-kicker, .module h3, .spec-table dt, .offer-name, .info-kicker, .rank-eyebrow) { text-transform: uppercase; letter-spacing: .14em; }
html.tg-euro :is(.t-eyebrow, .rank-eyebrow) { font-size: clamp(14px, 1.15vw, 17px); }
html.tg-euro .tile-kicker { font-size: 14px; }
html.tg-euro .countdown { text-transform: none; letter-spacing: 0; }
html.tg-euro .spec-table dt { font-size: 16px; }
html.tg-euro .module h3 { font-size: 18px; }

/* ============================================================ glow
   Light seen through a soft lens: a near-white core, a blue halo, a wide haze. Sizes in em, so every size glows the same way. */
html.tg-glow {
  --g-core: 205 225 255;
  --g-halo: 64 132 255;
  --g-haze: 36 92 255;
  --on-dark: #e2ebff;
  --on-dark-2: #8a97b4;
  --on-dark-3: #66718c;
  --glow-display: 0 0 .012em rgb(var(--g-core) / .9), 0 0 .06em rgb(var(--g-halo) / .75), 0 0 .2em rgb(var(--g-halo) / .45), 0 0 .55em rgb(var(--g-haze) / .3), 0 0 1.2em rgb(var(--g-haze) / .16);
  --glow-text: 0 0 .06em rgb(var(--g-core) / .5), 0 0 .4em rgb(var(--g-halo) / .38), 0 0 1em rgb(var(--g-haze) / .16);
  --glow-drop: drop-shadow(0 0 .06em rgb(var(--g-halo) / .8)) drop-shadow(0 0 .3em rgb(var(--g-haze) / .4));
}
html.tg-euro.tg-glow { --g-core: 214 220 255; --g-halo: 92 116 255; --g-haze: 84 72 255; --on-dark: #e5e8ff; --on-dark-2: #8e93b8; }
/* Eurostile Glow: the light toned down (about 60 %), titles and text */
html.tg-soft {
  --glow-display: 0 0 .01em rgb(var(--g-core) / .6), 0 0 .05em rgb(var(--g-halo) / .5), 0 0 .16em rgb(var(--g-halo) / .28), 0 0 .45em rgb(var(--g-haze) / .16), 0 0 1em rgb(var(--g-haze) / .08);
  --glow-text: 0 0 .05em rgb(var(--g-core) / .3), 0 0 .35em rgb(var(--g-halo) / .2), 0 0 .9em rgb(var(--g-haze) / .08);
  --glow-drop: drop-shadow(0 0 .05em rgb(var(--g-halo) / .55)) drop-shadow(0 0 .25em rgb(var(--g-haze) / .22));
}
/* Eurostile Glow Light: lighter still (about 35 % of the full glow) */
html.tg-light {
  --glow-display: 0 0 .01em rgb(var(--g-core) / .4), 0 0 .05em rgb(var(--g-halo) / .32), 0 0 .15em rgb(var(--g-halo) / .17), 0 0 .4em rgb(var(--g-haze) / .09), 0 0 .9em rgb(var(--g-haze) / .045);
  --glow-text: 0 0 .05em rgb(var(--g-core) / .18), 0 0 .3em rgb(var(--g-halo) / .12), 0 0 .8em rgb(var(--g-haze) / .045);
  --glow-drop: drop-shadow(0 0 .05em rgb(var(--g-halo) / .35)) drop-shadow(0 0 .22em rgb(var(--g-haze) / .13));
}

html.tg-glow body { text-shadow: var(--glow-text); }
html.tg-glow :is(h1, h2, h3, .t-hero, .t-xl, .t-l, .t-m, .t-s, .t-eyebrow, .stat-num, .offer-name, .offer-price, .try-mark, .sound-chip-title, .sheet-title, .module h3) { text-shadow: var(--glow-display); }
html.tg-glow .hero-eyebrow, html.tg-glow .lead-mixed { color: var(--on-dark-2); }
html.tg-glow .lead-mixed strong { color: var(--on-dark); }
html.tg-glow .eyebrow-blue { color: #5aa2ff; }
html.tg-glow .try-month { color: #c9d4ee; }
html.tg-glow .try-dates i { color: #2c3447; }

/* gradient letters: text-shadow would paint over the gradient, a drop shadow follows the letters instead */
html.tg-glow .gradient-text, html.tg-glow .ranks-track span.legend.lit, html.tg-glow .ranks-track span.now, html.tg-glow .module-ico { text-shadow: none; filter: var(--glow-drop); }

/* the statement lights word by word. One drop shadow on the whole block instead of a text-shadow per word: a per-word shadow
   left grey ghosts around the words in iOS Safari. Unlit words are the lit colour at low opacity, so the shadow (drawn from alpha) only glows on lit ones. */
html.tg-glow .statement-text { text-shadow: none; filter: var(--glow-drop); --st-off: rgb(170 182 230 / .2); }
html.tg-glow .statement-text .w { color: rgb(170 182 230 / .2); text-shadow: none; }
html.tg-glow .statement-text .w.on { color: var(--on-dark); }

/* controls keep crisp labels */
html.tg-glow :is(button, .btn, .finger, .seg, .slots, .fields, .select, .check, .countdown, .kbd, #tg-bar) { text-shadow: none; }

/* white and grey sections (Design, Fondateur, Caractéristiques, footer): Eurostile Classic, no glow, the site's own colours */
html.tg-glow :is(.light, .white, .footer) { --glow-display: none; --glow-text: none; --glow-drop: none; text-shadow: none; }
html.tg-glow :is(.light, .white) .lead-mixed { color: var(--ink-2); }
html.tg-glow :is(.light, .white) .lead-mixed strong { color: var(--ink); }

/* ============================================================ Expérience 3D (explorer.html) */
html.tg-glow :is(.info-title, .res-title, .res-stats dd, .rank-name, .rank-eyebrow, .rank-text, .boot-press, .learn-note, .burst b, .hud-streak b) { text-shadow: var(--glow-display); }
/* light pills, toasts and badges: Eurostile Classic */
html.tg-glow :is(.toast, .ach-toast, .hotspot .dot, .hud-streak.on, .modes button[aria-selected="true"], .kbd-toggle[aria-expanded="true"],
  .songs button[aria-checked="true"], .parts button[aria-selected="true"]) { --glow-display: none; --glow-text: none; --glow-drop: none; text-shadow: none; }

/* ============================================================ the switcher: ‹ current style › with the full list above */
#tg-bar { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 200;
  display: grid; gap: 8px; width: 272px; color: #f5f5f7;
  font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-size-adjust: none; text-shadow: none; }
#tg-bar .tg-row, #tg-bar .tg-list { background: rgba(22, 22, 24, .8); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 50px rgba(0, 0, 0, .55); }
#tg-bar .tg-row { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
#tg-bar .tg-row > button { height: 36px; border-radius: 999px; transition: background .2s, color .2s; }
@media (hover: hover) { #tg-bar .tg-row > button:hover, #tg-bar .tg-list button:hover { background: rgba(255, 255, 255, .08); } }
#tg-bar .tg-step { width: 36px; font-size: 22px; line-height: 1; padding-bottom: 3px; color: rgba(245, 245, 247, .7); }
#tg-bar .tg-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; }
#tg-bar .tg-main small { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(245, 245, 247, .45); }
#tg-bar .tg-list { display: grid; padding: 6px; border-radius: 18px; }
#tg-bar .tg-list[hidden] { display: none; }
#tg-bar .tg-group { padding: 10px 12px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 245, 247, .45); }
#tg-bar .tg-list button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 12px; font-size: 16px; text-align: left; transition: background .2s; }
#tg-bar .tg-list button[aria-checked="true"] { background: rgba(255, 255, 255, .14); }
#tg-bar kbd { font: 500 11px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .18); color: rgba(245, 245, 247, .5); }
/* each name is written in its own typeface, glowing when the style glows */
#tg-bar .tg-s-sweet { font-family: "sweet-square-pro", system-ui, sans-serif; font-weight: 700; }
#tg-bar :is(.tg-s-euro-classic, .tg-s-euro, .tg-s-euro-light) { font-family: "eurostile", sans-serif; font-weight: 700; }
#tg-bar .tg-s-euro { color: #e2ebff; text-shadow: 0 0 .05em rgb(205 225 255 / .5), 0 0 .25em rgb(64 132 255 / .5), 0 0 .7em rgb(36 92 255 / .25); }
#tg-bar .tg-s-euro-light { color: #e2ebff; text-shadow: 0 0 .05em rgb(205 225 255 / .3), 0 0 .22em rgb(64 132 255 / .3), 0 0 .6em rgb(36 92 255 / .14); }
@media (max-width: 600px) {
  #tg-bar { left: 12px; right: 12px; width: auto; }
}
@media (hover: none) {
  #tg-bar kbd { display: none; }
}