/* Smashq website. Tokens follow the app design system (docs/design-system, Concept B). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/space-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/space-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-sans-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/instrument-sans-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-600.woff2) format('woff2')}

/* ---------- tokens: light is the base, dark via media query, data-theme wins ---------- */
:root{
  --bg:oklch(97.2% 0.004 250);
  --raise:oklch(99.2% 0.002 250);
  --over:oklch(94.5% 0.005 250);
  --line:oklch(88% 0.006 250);
  --fg:oklch(24% 0.012 250);
  --mut:oklch(46% 0.01 250);
  --acc:oklch(55% 0.16 230);
  --acc10:oklch(55% 0.16 230 / 0.08);
  --glow:oklch(55% 0.16 230 / 0.1);
  --btnfg:oklch(99% 0.002 250);
  --ok:oklch(56% 0.13 155);
  --warn:oklch(62% 0.12 70);
  --err:oklch(55% 0.19 25);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:oklch(16% 0.01 250);
    --raise:oklch(19.5% 0.011 250);
    --over:oklch(23% 0.012 250);
    --line:oklch(29% 0.012 250);
    --fg:oklch(93% 0.005 250);
    --mut:oklch(63% 0.01 250);
    --acc:oklch(72% 0.14 230);
    --acc10:oklch(72% 0.14 230 / 0.1);
    --glow:oklch(72% 0.14 230 / 0.15);
    --btnfg:oklch(15% 0.02 250);
  }
}
:root[data-theme="dark"]{
  --bg:oklch(16% 0.01 250);
  --raise:oklch(19.5% 0.011 250);
  --over:oklch(23% 0.012 250);
  --line:oklch(29% 0.012 250);
  --fg:oklch(93% 0.005 250);
  --mut:oklch(63% 0.01 250);
  --acc:oklch(72% 0.14 230);
  --acc10:oklch(72% 0.14 230 / 0.1);
  --glow:oklch(72% 0.14 230 / 0.15);
  --btnfg:oklch(15% 0.02 250);
}
:root[data-theme="light"]{
  --bg:oklch(97.2% 0.004 250);
  --raise:oklch(99.2% 0.002 250);
  --over:oklch(94.5% 0.005 250);
  --line:oklch(88% 0.006 250);
  --fg:oklch(24% 0.012 250);
  --mut:oklch(46% 0.01 250);
  --acc:oklch(55% 0.16 230);
  --acc10:oklch(55% 0.16 230 / 0.08);
  --glow:oklch(55% 0.16 230 / 0.1);
  --btnfg:oklch(99% 0.002 250);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.in{max-width:1040px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:0.14em;font-size:12px;color:var(--mut);
}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:16px 0;border-bottom:1px solid var(--line)}
.logo{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;color:var(--fg)}
.logo .cur{color:var(--acc)}
.logo-word{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:0.02em;margin-left:8px;font-size:15px}
.nav .links{display:flex;gap:20px;font-size:13.5px;color:var(--mut);margin-left:8px}
.nav .links a:hover{color:var(--fg)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.theme-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;padding:0}
.theme-btn:hover{color:var(--fg);border-color:var(--mut)}
.theme-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .icon-moon{display:none}
:root:not([data-theme="dark"]) .icon-sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-moon{display:none}
  :root:not([data-theme="light"]) .icon-sun{display:inline}
}
.lang{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex}
.lang b{padding:3px 8px;background:var(--over);color:var(--fg);font-weight:400}
.lang a{padding:3px 8px;color:var(--mut)}
.lang a:hover{color:var(--fg)}
.btn{background:var(--acc);color:var(--btnfg);border-radius:6px;padding:7px 14px;
  font-weight:600;font-size:13.5px;display:inline-block}
.btn:hover{opacity:0.9}
.btn-ghost{border:1px solid var(--line);border-radius:6px;padding:7px 14px;font-size:13.5px;color:var(--fg);display:inline-block}
.btn-ghost:hover{border-color:var(--mut)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:40px;padding:56px 0 48px;align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,44px);
  line-height:1.08;letter-spacing:-0.015em;margin:14px 0 16px;text-wrap:balance}
.hero p{color:var(--mut);font-size:15.5px;max-width:52ch;margin:0 0 22px}
.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.meta{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mut);margin-top:18px}
/* Die Version kommt zur Laufzeit aus /releases/latest.json. Bis dahin - und
   dauerhaft, falls der Abruf scheitert - ist der Span leer und traegt seinen
   Trenner selbst. Eine eingebaute Zahl waere schlimmer als gar keine: sie
   stammt aus dem Build, nicht aus der Realitaet, und behauptet bei totem
   Manifest eine Version, die die Tabelle darunter gerade dementiert.

   Trenner-Zeichen als Escapes: ein Leerzeichen NACH \00B7 wuerde die
   Escape-Sequenz beenden und dabei selbst verschluckt - der Punkt klebte dann
   am naechsten Wort. Geschuetzte Leerzeichen halten den Trenner ausserdem beim
   Umbruch bei der Versionsnummer statt ihn allein in die naechste Zeile zu
   schicken. */
#release-version:empty{display:none}
#release-version:not(:empty)::after{content:'\00A0\00B7\00A0'}

/* ---------- fleet panel ---------- */
.fleet{background:var(--raise);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fleet-h{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.fleet-h .t{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--mut)}
.fleet-h .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc)}
.fleet-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media (max-width:640px){.fleet-grid{grid-template-columns:1fr}}
.sess{background:var(--raise);padding:11px 14px;border-left:2px solid transparent}
.sess.active{border-left-color:var(--acc);background:var(--acc10);
  box-shadow:inset 0 0 0 1px var(--glow),0 0 8px var(--glow)}
.sess .nm{font-family:'JetBrains Mono',monospace;font-size:12.5px;margin-bottom:4px}
.sess .st{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut)}
.dot{width:7px;height:7px;border-radius:999px;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.dot.err{background:var(--err)} .dot.idle{background:var(--mut)}
.dot.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.55}}
.ticker{border-top:1px solid var(--line);padding:8px 16px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ok);background:var(--bg)}
.ticker .p{color:var(--mut)}

/* ---------- features ---------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:8px 0 48px}
@media (max-width:820px){.feat{grid-template-columns:1fr}}
.fbox{background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:18px}
.fbox svg{width:18px;height:18px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.fbox h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15.5px;margin:0 0 6px}
.fbox p{font-size:13.5px;color:var(--mut);margin:0}

/* ---------- releases ---------- */
.rel{border-top:1px solid var(--line);padding:40px 0 48px}
.rel .rt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.rel h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--mut);margin:0}
.reltab{background:var(--raise);border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.reltab table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px;min-width:520px}
.reltab th{padding:8px 16px;border-bottom:1px solid var(--line);text-align:left;
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:0.12em;color:var(--mut)}
.reltab td{padding:9px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.reltab tr:last-child td{border-bottom:none}
.reltab a{color:var(--fg)}
.reltab a:hover{color:var(--acc)}
.reltab .dim{color:var(--mut)}
.note{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mut);margin-top:12px}
.note b{color:var(--acc);font-weight:400}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--mut);flex-wrap:wrap;gap:8px}
.foot a:hover{color:var(--fg)}

/* ---------- legal pages ---------- */
.legal-wrap{max-width:720px;margin:0 auto;padding:40px 28px 72px}
.legal-wrap h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;margin:24px 0 16px}
.legal-wrap h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;margin:28px 0 8px}
.legal-wrap p,.legal-wrap li{font-size:14.5px;color:var(--fg)}
.legal-wrap .back{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut)}
.legal-wrap .back:hover{color:var(--acc)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
}