/* FONTLAB — live typografi-switch för kupolen. Bygger på fx-lab-mönstret (panel +
   localStorage). Icke-destruktiv: default är Panchang/Supreme orörda, labbet
   överstyr bara när ett val gjorts (html.fontlab-on) via högre specificitet — inga
   !important, reverterar rent. De 84 typsnitten är self-hostade i fonts-lab/ (GDPR-rent,
   ingen CDN). Panelen syns bara med ?fontlab i URL:en; då laddas fonts.css (lazy). */

:root {
  --font-heading: Panchang, sans-serif;
  --font-body: Supreme, sans-serif;
}

/* ---- när labbet driver: överstyr rubrik + brödtext över bas- OCH fx-regler ---- */
html.fontlab-on h1,
html.fontlab-on h2,
html.fontlab-on h3,
html.fontlab-on .station h1,
html.fontlab-on .station h2,
html.fontlab-on .phero h1,
html.fontlab-on h2.sec,
html.fontlab-on .lead {
  /* !important so the lab wins over fx.css's high-specificity per-variant
     font rules (html[data-fx-type]:not([off]) .station h1 …) */
  font-family: var(--font-heading) !important;
}
html.fontlab-on body,
html.fontlab-on .page,
html.fontlab-on .nav-links a,
html.fontlab-on .nav-cta,
html.fontlab-on .btn,
html.fontlab-on .cta,
html.fontlab-on .card p,
html.fontlab-on .foot .fcol a {
  /* safe: the spaced mono labels (.nr .visk .kicker …) carry their own explicit
     font-family that this body-level rule never reaches, so they stay mono */
  font-family: var(--font-body) !important;
}
/* mono-etiketter (.nr .visk .kicker .eyebrow .marke .nav-brand) lämnas orörda */

/* ---- göm de andra lab-kontrollerna medan man väljer font ---- */
html.fontlab-active .fx-panel,
html.fontlab-active #fx-panel,
html.fontlab-active .fx-dial,
html.fontlab-active .fx-sp,
html.fontlab-active .fx-con,
html.fontlab-active .fx-film,
html.fontlab-active #fx-hud,
html.fontlab-active .btnlab {
  display: none !important;
}

/* ---- panelen ---- */
.fl-fab {
  position: fixed; right: 16px; top: 72px; z-index: 4000;
  background: rgba(5, 12, 12, 0.92); color: var(--teal, #4fe3d4);
  border: 1px solid rgba(79, 227, 212, 0.4); border-radius: 10px;
  padding: 8px 12px; font: 600 13px/1 "SF Mono", ui-monospace, monospace;
  cursor: pointer; backdrop-filter: blur(8px);
}
.fl-panel {
  position: fixed; right: 16px; top: 112px; bottom: 16px; z-index: 4000;
  width: 340px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  background: rgba(4, 10, 11, 0.96); color: #e8f4f2;
  border: 1px solid rgba(79, 227, 212, 0.28); border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px);
  overflow: hidden; font-family: system-ui, sans-serif;
}
.fl-panel[hidden] { display: none; }
.fl-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; }
.fl-head strong { letter-spacing: 0.14em; font-size: 11px; font-family: "SF Mono", ui-monospace, monospace; }
.fl-head span { color: #6f9691; font-size: 10px; }
.fl-tabs { display: flex; gap: 6px; padding: 0 12px 8px; }
.fl-tabs button {
  flex: 1; text-align: left; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 7px 9px;
  color: #8fb0ac; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 11px;
}
.fl-tabs button.on { border-color: rgba(79, 227, 212, 0.6); color: #e8f4f2; background: rgba(79, 227, 212, 0.12); }
.fl-tabs button em { font-style: normal; font-size: 12px; color: var(--teal, #4fe3d4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-search {
  margin: 0 12px 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  color: #e8f4f2; font-size: 13px; outline: none;
}
.fl-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; }
.fl-chips button {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 3px 9px; font-size: 10.5px; color: #8fb0ac; cursor: pointer;
}
.fl-chips button.on { border-color: rgba(79, 227, 212, 0.5); color: var(--teal, #4fe3d4); background: rgba(79, 227, 212, 0.1); }
.fl-list { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.fl-item {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 9px 11px; color: #e8f4f2; cursor: pointer;
}
.fl-item.on { border-color: rgba(79, 227, 212, 0.7); background: rgba(79, 227, 212, 0.14); }
.fl-item .fl-name { font-size: 17px; }
.fl-badge { color: var(--teal, #4fe3d4); font-style: normal; font-size: 12px; vertical-align: baseline; }
.fl-item.ref { border-color: rgba(79, 227, 212, 0.22); }
.fl-item .fl-sample { font-size: 12.5px; color: #8fb0ac; }
.fl-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.fl-foot button {
  flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 8px; color: #e8f4f2; font-size: 12px; cursor: pointer;
}
@media (max-width: 640px) { .fl-panel { width: calc(100vw - 32px); } }