/* ===========================================================================
   Pensumforslag – lyst, moderne design
   =========================================================================== */

:root {
  /* Flater */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf5ef;
  --line: #ddeae1;
  --line-strong: #ccddd2;

  /* Tekst */
  --text: #101a13;
  --muted: #4e6657;
  --muted-2: #7d9885;

  /* Aksent (grønn → emerald → teal) */
  --accent: #16a34a;
  --accent-2: #059669;
  --grad: linear-gradient(135deg, #16a34a 0%, #059669 55%, #0d9488 100%);

  --ok: #10b981;
  --danger: #ef4444;
  --warn: #f59e0b;

  /* Kjønnsfarger (god kontrast på lyst) */
  --c-kvinne: #ec4899;
  --c-mann: #3b82f6;
  --c-annet: #f59e0b;
  --c-ukjent: #94a3b8;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 42, 0.04), 0 2px 6px rgba(20, 21, 42, 0.04);
  --shadow: 0 4px 14px rgba(20, 21, 42, 0.06), 0 12px 32px rgba(20, 21, 42, 0.06);
  --shadow-lg: 0 18px 50px rgba(22, 163, 74, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  line-height: 1.55;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Bakgrunnsskyer fjernet – ren hvit bakgrunn */

h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.01em; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

/* ----- Topbar ----- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
}
.brand h1 {
  margin: 0;
  font-size: 1.45rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Oppsett-banner ----- */
.banner {
  display: none;
  background: linear-gradient(135deg, rgba(22,163,74,0.07), rgba(13,148,136,0.07));
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: #164e2a;
}
.banner.show { display: block; }
.banner.banner-error { display: block; background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.banner code {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.85em;
}

/* ----- Paneler ----- */
main { padding: 30px 0 70px; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.panel > h2 {
  margin: 0 0 18px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel h3 { margin: 0 0 12px; font-size: 0.95rem; }

/* Lærer-paneler skjult som standard */
.teacher-only { display: none; }
body.is-teacher .teacher-only { display: revert; }
.show-removed { display: none; align-items: center; gap: 6px; }
body.is-teacher .show-removed { display: inline-flex; }

/* ----- Knapper ----- */
.btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
/* .btn på <a> (f.eks. «Foreslå en artist →», «← Til startsiden»): oppfør deg
   som knapp, ikke lenke. Skopet til ankere så <button>-layout ikke røres. */
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: var(--grad);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
}
.btn.primary:hover { box-shadow: 0 10px 26px rgba(22, 163, 74, 0.4); filter: brightness(1.03); }
.btn.sent { background: #16a34a; color: #fff; border: none; font-weight: 600; cursor: default; box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32); }
.btn.sent:hover { filter: none; box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.small { padding: 6px 11px; font-size: 0.82rem; border-radius: 9px; }
/* .compact: for knapperader med tre like brede knapper (f.eks. Undersjangere/
   Tidslinje/Varmekart i sjanger-kortet) — mindre padding/tekst og min-width:0
   så de tre får plass på smale skjermer (iPhone) uten at siste går ut. */
.btn.compact { padding: 9px 8px; font-size: 0.86rem; min-width: 0; white-space: nowrap; }
.btn.danger { color: var(--danger); border-color: #f3c9c9; }
.btn.danger:hover { border-color: var(--danger); background: #fff5f5; }

/* ----- Dashboard / stats ----- */
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
}
.stat-label { color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }

/* ----- Bars ----- */
.bar {
  height: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 10px;
}
.bar.small { height: 7px; margin: 0; flex: 1; }
.bar-fill {
  height: 100%;
  background: var(--grad);
  display: block;
  border-radius: 100px;
  transition: width 0.4s ease;
}

/* ----- Kjønnsdiagram ----- */
.gender-bar {
  display: flex;
  height: 20px;
  border-radius: 100px;
  overflow: hidden;
  margin: 8px 0 10px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.gender-seg { height: 100%; transition: width 0.4s ease; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; }
.legend-item { color: var(--muted); }
.legend-item strong { color: var(--text); }
/* Tall som er lenke, midt i en tekstlinje (kjønnslegenden). Samme språk som
   .ov-num i metasjanger-kortet, men uten kolonnejusteringen. */
.ov-num-inline {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ov-num-inline:hover { color: var(--accent-2); }
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* ----- Oversikt (lærer) — pensumets form / hull / mangler ----- */
.ov-kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ov-kick:first-child { margin-top: 0; }
.ov-kick::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Kompakte nøkkeltall — fire per rad, «vanlig» tekststørrelse */
.ov-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ov-kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  text-align: left;
}
.ov-kpi-n {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ov-kpi-l { font-size: 0.85rem; color: var(--muted); }
button.ov-kpi { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
button.ov-kpi:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
button.ov-kpi:hover .ov-kpi-l { color: var(--accent-2); }

.ov-block { margin-top: 12px; }
.ov-two {
  display: grid;
  /* Metasjanger-kortet har to søylekolonner og trenger bredden; kjønnskortet er
     én søyle med fire legender og tåler å gi fra seg litt. 1,25/0,75 er der
     søylene blir brukbart lange uten at kjønnslegenden sprekker opp i fire
     linjer (målt ved 1440 px: søyler 148 px, legenden på tre linjer). */
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

/* Tiår-histogram */
.ov-hist { display: flex; align-items: flex-end; gap: 6px; height: 130px; margin-top: 10px; }
.ov-hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.ov-hist-bar {
  width: 100%;
  max-width: 30px;
  background: var(--grad);
  border-radius: 5px 5px 0 0;
  transition: opacity 0.12s;
}
.ov-hist-col:hover .ov-hist-bar { opacity: 0.7; }
.ov-hist-bar.ov-thin { background: var(--warn); }
.ov-hist-val { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-hist-year { font-size: 0.64rem; color: var(--muted-2); }

/* Kompakte fordelings-rader (metasjangre + sjangerliste) */
.ov-rows { display: grid; gap: 8px; margin-top: 10px; }
.ov-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr 30px;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 0.82rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.ov-row .ov-name {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-row:hover .ov-name { color: var(--accent-2); text-decoration: underline; }
.ov-row .ov-count { text-align: right; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ov-row.ov-zero .ov-name, .ov-row.ov-zero .ov-count { color: var(--warn); }
/* Parentestall: lytteeksempler i sjangerens spilleliste; varsel når lista er tom. */
.ov-count-ex { color: var(--muted); font-size: 0.85em; }
.ov-count-ex.ov-ex-zero { color: var(--warn); }
.ov-row.ov-zero .bar-fill { background: var(--warn); opacity: 0.45; }

/* Metasjanger-raden: to tallkolonner (artistkort + lytteeksempler), og det er
   TALLENE som er lenkene — navnet er ren tekst her, i motsetning til
   sjangerlista der hele raden er én knapp. */
/* Hver av de to kolonnene er søyle + tall: navn | søyle | antall | søyle | antall.
   Søylene blir korte, men de skal bare rangere metasjangrene mot hverandre.
   ALLE radene deler ETT rutenett (radene er `display: contents`), ikke ett per
   rad: med hver sin grid ble navnekolonnen så bred som radens eget navn, og
   «Klubbmusikk» dyttet søylen og tallene sine til høyre for de andre radenes.
   Nå setter det bredeste navnet kolonnebredden for hele tabellen. */
.ov-rows-meta {
  display: grid;
  grid-template-columns: auto 1fr 30px 1fr 34px;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  margin-top: 10px;
}
.ov-rows-meta .ov-row-meta { display: contents; }
.ov-row-meta { cursor: default; }
.ov-row-meta:hover .ov-name { color: var(--muted); text-decoration: none; }
/* Søyla for lytteeksempler har egen kulør (teal → cyan) så de to kolonnene ikke
   leses som én lang søyle med et tall midt inni. */
.ov-bar-ex .bar-fill { background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); }
.ov-row-meta .ov-bar-zero .bar-fill { background: var(--warn); opacity: 0.45; }
/* Kolonneoverskriftene: hver etikett spenner over søyla OG tallet sitt, og står
   midtstilt over paret. */
.ov-row-head {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ov-row-head .ov-colh { grid-column: span 2; text-align: center; }
/* Tallene ER lenkene: understreket + aksentfarge, samme språk som de klikkbare
   navnene i listene under. */
.ov-num {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  text-align: right;
  color: var(--accent);
  text-decoration: underline;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ov-num:hover { color: var(--accent-2); }
.ov-num.ov-ex-zero, .ov-row.ov-zero .ov-num { color: var(--warn); }

/* Kolonnetallet styres av MINSTEBREDDE, ikke et fast antall: en rad trenger rundt
   190 px (navn + søyle + tallkolonne), og med fast antall ble kolonnene på mobil
   smalere enn det — da fløt navnet og tallet ut av kolonnen og la seg oppå naboen
   («1 (1)Rock»). `columns: 200px 3` betyr: så mange kolonner det er plass til,
   aldri smalere enn 200 px og aldri flere enn tre. */
.ov-genre-cols { columns: 200px 3; column-gap: 28px; margin-top: 10px; }
/* Bredere tallkolonne («31 (12)») enn standard 30px — søylen (1fr) blir
   tilsvarende kortere, så alt står på én rad i stedet for å brytes. */
.ov-genre-cols .ov-row { break-inside: avoid; margin-bottom: 8px; grid-template-columns: minmax(96px, auto) 1fr 54px; }
.ov-genre-cols .ov-count { white-space: nowrap; }

/* Chips (instrument, tomme greiner, tynne tiår, historier) */
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ov-chip {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.ov-chip strong { color: var(--text); font-weight: 600; }
.ov-chip:hover { border-color: var(--accent); color: var(--accent-2); }
.ov-chip.ov-zero { color: #b45309; border-color: #f2ddb0; background: #fffbeb; }
.ov-chip.ov-zero strong { color: #b45309; }
.ov-chip.ov-zero:hover { border-color: var(--warn); }

/* Hull-kort */
.ov-gaps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ov-gap {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 0 14px 14px 0;
  padding: 12px 15px;
}
.ov-gap-t {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.ov-gap-t span { color: var(--muted-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.ov-gap .muted { margin: 0; font-size: 0.8rem; }

/* Innhold som mangler */
.ov-miss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.ov-miss-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.ov-miss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.ov-miss-head:hover span:first-child { color: var(--accent-2); }
.ov-miss-head .ov-count { font-variant-numeric: tabular-nums; color: var(--muted-2); }
.ov-miss-head .ov-count.ov-warn { color: #b45309; font-weight: 600; }
.ov-miss-head .ov-count.ov-ok { color: var(--ok); }
.ov-expand { margin-top: 10px; }

@media (max-width: 720px) {
  .ov-kpis { grid-template-columns: repeat(2, 1fr); }
  .ov-two { grid-template-columns: 1fr; }
  /* Ingen overstyring av .ov-genre-cols her: minstebredden over gjør jobben
     selv, og et fast kolonnetall her ville lagt kollisjonen tilbake. */
  .ov-hist { height: 100px; gap: 4px; }
  .ov-hist-year { display: none; }
}

/* ----- Skjema ----- */
.add-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.add-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}
.add-grid .full { grid-column: 1 / -1; }
input, select, textarea {
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
textarea { resize: vertical; }
.field-label { font-size: 0.82rem; font-weight: 500; color: var(--muted); display: block; margin-bottom: 8px; }

.me-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.me-row .me-label { flex: 1; }
.me-row .me-url { flex: 1.4; }
.me-row .me-year { flex: 0 0 90px; }
.me-row .me-perf-year { flex: 0 0 110px; }
.me-row .me-note { flex: 1 1 100%; }
.me-row .me-genre { flex: 0 0 240px; }

/* Epoke-feltene i sjangereditoren: to smale årstallfelt side om side, som
   brekker under hverandre på smal skjerm. */
.ss-epoke-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-epoke-felt { flex: 0 1 170px; }

/* Påstander uten kildebelegg — arbeidsnotat i lærerens sjangereditor. Gul
   venstrekant, samme signal som «trenger tilsyn» ellers i admin. */
.ss-usikker { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface));
  border-radius: 0 6px 6px 0; padding: 8px 10px; margin-bottom: 8px; }
.ss-usikker-tekst { font-size: 0.9rem; }
.ss-usikker .hint { margin: 4px 0 0; }
.ss-usikker .ss-usikker-ok { margin-top: 6px; }

.add-actions, .admin-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hint { margin: 2px 0 10px; font-size: 0.78rem; color: var(--muted-2); }
.form-msg { font-size: 0.88rem; font-weight: 500; }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: var(--ok); }
.form-msg.warn { color: var(--warn); }

/* ----- Listehode + filtre ----- */
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
}
.list-head h2 { margin: 0; font-size: 1.15rem; }
/* Lærer-filter: to rader — kontroller (søk, tidslinje, avkrysninger, Ny artist)
   over, rullegardinene under. */
.filters { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-row--controls .show-removed { white-space: nowrap; }
.filter-row--selects select { flex: 1 1 130px; min-width: 120px; }
.filters input, .filters select { padding: 8px 11px; font-size: 0.88rem; }

/* ----- Forslagskort ----- */
.artist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: rise 0.3s ease both;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card.is-removed { opacity: 0.6; }
.card.is-removed:hover { transform: none; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-head h3 { margin: 0 0 8px; font-size: 1.1rem; }
.artist-image {
  float: right;
  margin: 0 0 10px 14px;
  width: 110px;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.artist-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.artist-image.big { width: 180px; max-width: 50%; }
.image-credit {
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 0.74rem;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 100px;
  color: var(--muted);
}
/* Sjanger = sterkere grønnyanse, undersjanger = lysere */
.tag.tag-sjanger { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.tag.tag-under { color: var(--accent-2); background: #ecfdf5; border-color: #a7f3d0; }
button.tag { cursor: pointer; font-family: inherit; line-height: inherit; }
button.tag:hover { border-color: var(--accent); color: var(--accent); background: #f0fdf4; }
button.tag.tag-sjanger:hover { border-color: #10b981; color: #065f46; background: #a7f3d0; }
/* Sjanger uten artister ennå: nedtonet + stiplet, men fortsatt klikkbar for beskrivelsen. */
.tag.tag-sjanger.is-empty { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; border-style: dashed; }
button.tag.tag-sjanger.is-empty:hover { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
button.tag.tag-under:hover { border-color: var(--accent-2); color: var(--accent-2); background: #d1fae5; }
.tag.tag-instrument { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
button.tag.tag-instrument:hover { border-color: #3b82f6; color: #1e40af; background: #bfdbfe; }
.tag.tag-prio { padding: 2px 8px; display: inline-flex; align-items: center; }
.tag.tag-prio svg { display: block; }
.tag.tag-prio.prio-3 { background: #fef9c3; border-color: #facc15; color: #854d0e; }
.tag.tag-prio.prio-2 { background: #e0f2fe; border-color: #38bdf8; color: #075985; }
.tag.tag-prio.prio-1 { background: #f0fdf4; border-color: #86efac; color: #166534; }
.tag.tag-prio.prio--1 { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }

.desc { margin: 4px 0; font-size: 0.9rem; color: #2c2e44; }
.works { margin: 0; font-size: 0.85rem; color: var(--muted); }
.works a { color: var(--accent); text-decoration: underline; }
.works a:hover { color: var(--accent-2); }
.facts { margin: 6px 0 10px; }
.facts p { margin: 0 0 2px; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.facts strong { color: var(--text); font-weight: 600; }
/* Klikkbare faktaverdier (kategori/instrument på innovasjonskortene). Skal se
   ut som resten av linja — kun understrek og pekefinger røper at den er en
   lenke, så formateringen fra v3.81 beholdes. */
.facts-link {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.facts-link:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Beslektede artister i detaljmodalen (#5) */
.related { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.related-head { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 500; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong);
  padding: 5px 11px; border-radius: 100px; cursor: pointer; transition: 0.12s;
}
.related-chip:hover { border-color: var(--accent); color: var(--accent-2); }

/* Røtter før 1910 — forfattet fortelling (#9) */
/* Navigasjonsknappen på Røtter-siden — står OVER teksten (.story-body), som
   rendres fra Firestore-innholdet, og fyller hele bredden (flex: 1). */
.rotter-links { display: flex; gap: 10px; margin-bottom: 18px; }
.rotter-links .btn { flex: 1; }

/* Sjangerhistorier — seks fortellinger i Det store bildet + lærer-editor.
   Knappene ligger i et grid med like brede kolonner, så de seks til sammen
   dekker hele bredden av kortet, og bærer metasjangerens farge fra slektstreet
   (--hist-color settes per knapp i explore.js). */
.hist-intro { margin-bottom: 12px; font-size: 0.9rem; }
/* Sju historier på fire kolonner (4 + 3). Seks kolonner klemte «Klubbmusikk»
   til ellipse allerede før den sjuende kom til; fire gir god plass til alle. */
.hist-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
/* Selektorene tar med .btn: ellers vinner `.btn.ghost { background }` (to
   klasser) over en ren .hist-chip-regel, og den lyse fargen slår aldri gjennom. */
.hist-chip.btn {
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hist-color, var(--text));
  /* Uvalgt: en lys tone av sjangerens egen farge, så alle seks er fargekodet
     hele tiden — ikke bare den som er valgt. */
  background: color-mix(in srgb, var(--hist-color, var(--line)) 14%, #fff);
  border-color: color-mix(in srgb, var(--hist-color, var(--line)) 45%, transparent);
}
.hist-chip.btn:hover {
  background: color-mix(in srgb, var(--hist-color, var(--line)) 24%, #fff);
  border-color: var(--hist-color, var(--line));
}
.hist-chip.btn.active {
  background: var(--hist-color, var(--accent));
  border-color: var(--hist-color, var(--accent));
  color: #fff;
}
/* Fire kolonner blir for trangt på telefon — tre rader à tre (siste alene). */
@media (max-width: 640px) {
  .hist-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Formatert tekst (markdown-light fra js/rich-text.js). `.story-body` er
   historiene og innholdssidene; `.rt` er de vanlige beskrivelsene (artist,
   sjanger, kobling, innovasjon). Begge får samme typografi, for det er samme
   parser og samme syntaks. Beskrivelsene arver skriftstørrelse og farge fra
   containeren sin (.desc/.gx-desc), så de settes ikke på nytt her. */
.story-body h3, .rt h3 { margin: 18px 0 6px; font-size: 1.02rem; color: var(--text); }
.story-body h3:first-child, .rt h3:first-child { margin-top: 0; }
.story-body p { margin: 0 0 10px; font-size: 0.9rem; color: #2c2e44; line-height: 1.6; }
.story-body ul, .story-body ol { margin: 0 0 10px; padding-left: 20px; font-size: 0.9rem; color: #2c2e44; line-height: 1.6; }
.story-body li, .rt li { margin-bottom: 3px; }
.rt p { margin: 0 0 8px; }
.rt ul, .rt ol { margin: 0 0 8px; padding-left: 20px; }
/* Siste blokk skal ikke skyve på det som kommer under (kilder, knapper). */
.story-body > :last-child, .rt > :last-child { margin-bottom: 0; }
/* [tekst](url)-lenker i historier/sider (f.eks. «Hør:»-lenkene) */
.story-body a, .rt a[href] { color: var(--accent); font-weight: 500; text-decoration: none; }
.story-body a:hover, .rt a[href]:hover { text-decoration: underline; }
.story-toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.story-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
#se-text { width: 100%; min-height: 420px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.55; }
/* Sjangerbeskrivelsen: main-nivåets tekster ligger rundt 2000 tegn, så feltet
   settes i piksler i stedet for rader. rows="10" i teacher.html blir stående
   som fallback hvis stilarket ikke lastes. */
#ss-desc { min-height: 300px; }
.story-preview { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; max-height: 480px; overflow-y: auto; background: #fff; }
@media (max-width: 900px) { .story-edit-grid { grid-template-columns: 1fr; } }

.kilder { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.kilder ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

.source-row { display: flex; gap: 8px; margin-bottom: 8px; }
.source-row .source-text { flex: 1.4; }
.source-row .source-url { flex: 1; }
.work-row { display: flex; gap: 8px; margin-bottom: 8px; }
.work-row .work-title { flex: 1.4; }
.work-row .work-year { flex: 0 0 110px; }
.work-row .work-url { flex: 1; }

.card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.spacer { flex: 1; }
.proposed { color: var(--muted-2); }
.teacher-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 10px; }
.ta-left, .ta-center, .ta-right { display: flex; gap: 6px; align-items: center; }

/* Delt lærer-knapperad i detaljvisninger: Sjekk til venstre, Rediger/Slett
   til høyre — ikonknapper (.icon-btn), samme som artistkortene. */
.teacher-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* Koblingskort i Oversikt: navn + tagger over en teacher-card-actions-fot.
   Foten deler klasse (og dermed utseende) med artist-/innovasjonskortene. */
.ov-edge-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.ov-edge-card:hover { border-color: var(--line-strong); }
.ov-edge-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-edge-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.ov-edge-card .teacher-card-actions { margin-top: 10px; }

/* ----- Icon buttons ----- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg); border-color: var(--line-strong); color: var(--text); }
.icon-btn.active { background: #dcfce7; border-color: #86efac; color: #16a34a; }
.icon-btn.primary { color: #1d4ed8; }
.icon-btn.primary:hover { background: #dbeafe; border-color: #93c5fd; }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
.icon-btn svg { pointer-events: none; }

/* ----- Badges ----- */
.badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 7px;
  vertical-align: middle;
}
.badge.removed { background: #fee2e2; color: var(--danger); }
.badge.pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge.prio-3 { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.badge.prio-2 { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.badge.prio-1 { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.card.is-pending { border-left: 3px solid #f59e0b; opacity: 0.92; }
.card.is-prio-3 { border-left: 3px solid #facc15; }
.card.is-prio-2 { border-left: 3px solid #38bdf8; }
.card.is-prio-1 { border-left: 3px solid #86efac; }
.card.is-prio--1 { border-left: 3px solid #cbd5e1; opacity: 0.6; }
.card.is-checked { border-left: 3px solid #22c55e; }
.tag.is-checked { outline: 2px solid #22c55e; outline-offset: -2px; }

/* Flyter inline med resten av hodet. (Var absolutt-sentrert i «Finn
   artister»-hodet, men med tre knapper der kolliderte baren med dem.) */
.priority-filter-bar { display: flex; align-items: center; gap: 6px; }
/* Viktighetsgrad-filtrene skal stå midtstilt, ikke presses mot høyre.
   Student («Finn artister»): baren tas ut av flyten og sentreres på
   tittelraden (.modal-head er position:relative) — h2 blir liggende til
   venstre og ←/✕ til høyre, baren midt imellom.
   Lærer (.list-head): .filters fyller hele bredden (flex-basis:100%), så
   baren får sin egen sentrerte rad mellom «Sorter navn» og filtrene i stedet
   for å dele rad med tittelen. */
#modal-artister #sp-prio-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#t-prio-bar { flex: 0 0 100%; justify-content: center; }
.prio-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.prio-filter-btn:hover { background: var(--bg); border-color: var(--line-strong); color: var(--text); }
.prio-filter-btn.active-3 { background: #fef9c3; border-color: #facc15; color: #854d0e; box-shadow: 0 0 0 2px #fde68a; }
.prio-filter-btn.active-2 { background: #e0f2fe; border-color: #38bdf8; color: #075985; box-shadow: 0 0 0 2px #7dd3fc; }
.prio-filter-btn.active-1 { background: #f0fdf4; border-color: #86efac; color: #166534; box-shadow: 0 0 0 2px #bbf7d0; }
.prio-filter-btn.active--1 { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; box-shadow: 0 0 0 2px #e2e8f0; }
.prio-filter-btn svg { pointer-events: none; }

.btn.ghost.accent { color: var(--accent); border-color: var(--accent); }
.btn.ghost.accent:hover { background: var(--accent); color: #fff; }
.btn.small.accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }

/* ----- Diverse ----- */
.muted { color: var(--muted); }
.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.sitefoot { padding: 24px; text-align: center; }

/* ----- Responsiv ----- */
@media (max-width: 760px) {
  .add-grid { grid-template-columns: 1fr 1fr; }
  .artist-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .add-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: 1.25rem; }
  .panel { padding: 20px; }
}

/* ----- Rollevelger ----- */
.role-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.role-gate.hidden { display: none; }
.role-gate-card {
  text-align: center; padding: 40px 32px; max-width: 340px; width: 100%;
}
.role-gate-card h2 { margin: 0 0 4px; }
.role-gate-card .btn { width: 100%; padding: 12px; font-size: 1rem; }

/* Studenter får et rent dashbord uten faner: hele nav-lenkeraden skjules
   (Foreslå nås via knapp i Artister-modalen; tilbake-veien på undersider er
   .student-back + brand-lenken). Lærer/uvalgt rolle ser fanene som før. */
body.role-student .nav .nav-icon { display: none; }
body.role-student .version-tag { display: none; }

/* «← Til startsiden» på skjemasiden — kun synlig for studenter (andre har
   faner). Skjult som standard; body.role-student viser den. */
a.btn.student-back { display: none; }
body.role-student a.btn.student-back { display: inline-flex; margin-bottom: 14px; }

/* ----- Modaler ----- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overscroll-behavior: contain;
  overflow: hidden;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: rise 0.2s ease both;
}
.modal.modal-wide { max-width: 860px; }
/* For modaler med lite innhold (Innstillinger: to seksjoner à to små knapper).
   320 px er målt: knapperadene står på én linje med god margin, og modalhodet
   («Innstillinger» + ←/✕) holder seg på én rad. */
.modal.modal-narrow { max-width: 320px; }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  position: relative;
}
.modal-head h2 { margin: 0; font-size: 1.1rem; flex: 1; }
/* «Finn artister» har mange hode-elementer — la dem bryte pent på smale skjermer. */
#modal-artister .modal-head { flex-wrap: wrap; gap: 8px; }

/* Lærerens Sjekk/Rediger-ikoner i selve modal-hodet (Om historie, Røtter,
   Sjangerhistorier, Slik bruker du appen): midtstilt i rommet mellom tittelen
   og ←/✕-knappene. Raden får all ledig plass (flex:1) og sentrerer innholdet
   sitt — men da må tittelens egen `flex: 1` vike, ellers spiser h2 plassen og
   ikonene presses inntil ←. Radens vanlige spacer (som skyver Rediger helt ut
   til høyre i kort-foten) skrus av her; i hodet skal ikonene stå samlet.
   For studenter er beholderen tom (ingen onCheck) — da gjelder ingenting av
   dette, og hodet ser ut nøyaktig som før. */
.modal-head .head-actions:not(:empty) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-head:has(> .head-actions:not(:empty)) h2 { flex: 0 1 auto; }
.modal-head .head-actions .teacher-card-actions { margin: 0; padding: 0; border: 0; gap: 8px; }
.modal-head .head-actions .spacer { display: none; }
.modal-head .modal-close,
.modal-head .modal-close-all { font-size: 1.05rem; padding: 4px 10px; min-width: 36px; }
.modal-head .modal-close { margin-right: 4px; }
.modal-foot-right { display: flex; justify-content: flex-end; margin-top: 20px; }

.info-section { margin-bottom: 18px; }
.info-label { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.info-text { margin: 0; line-height: 1.65; }
.info-text p { margin: 0 0 8px; }
.info-text p:last-child { margin-bottom: 0; }
.info-text ul { margin: 6px 0 10px; padding-left: 20px; }
.info-text li { margin-bottom: 4px; }

/* ----- Tidslinje (horisontal) ----- */
.timeline { margin: 24px 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tl-track { position: relative; display: flex; align-items: center; min-width: max-content; padding: 90px 16px; }
/* --tl-color settes kun av sjangertidslinjen (familiefargen fra slektstreet).
   Uten den faller alt tilbake på --accent, så tiårs- og teknologitidslinjene
   er uendret grønne. */
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: var(--tl-color, var(--accent)); border-radius: 2px; transform: translateY(-50%); }
.tl-item { position: relative; flex: 1 0 120px; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.tl-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--tl-color, var(--accent)); background: var(--bg); flex-shrink: 0; z-index: 2; }
.tl-label { position: absolute; width: 110px; text-align: center; }
.tl-below .tl-label { top: calc(50% + 18px); }
.tl-above .tl-label { bottom: calc(50% + 18px); }
.tl-year { display: block; font-weight: 700; font-size: 0.78rem; color: var(--tl-color, var(--accent)); margin-bottom: 2px; }
.tl-desc { display: block; font-size: 0.75rem; line-height: 1.4; color: var(--text); opacity: 0.8; }

/* Proporsjonal tidslinje */
.tl-prop .tl-track {
  display: block;
  min-width: max(100%, 560px);
  /* --tl-half settes per tidslinje av buildProportionalTimeline: høyeste
     stilk + etikett på en side. Fallback tilsvarer gammel makshøyde. */
  height: calc(var(--tl-half, 144px) * 2 + 4px);
  padding: 0;
  position: relative;
}
.tl-prop .tl-track::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tl-prop .tl-item {
  position: absolute;
  flex: none;
  width: 0;
  align-items: center;
  transform: translateX(-50%);
}
.tl-prop .tl-item.tl-above { bottom: 50%; }
.tl-prop .tl-item.tl-below { top: 50%; }
.tl-prop .tl-dot {
  width: 14px;
  height: 14px;
  position: absolute;
}
.tl-prop .tl-above .tl-dot { bottom: -7px; }
.tl-prop .tl-below .tl-dot { top: -7px; }
.tl-stem { display: none; }
.tl-prop .tl-stem {
  display: block;
  width: 2px;
  height: var(--stem, 24px);
  background: var(--tl-color, var(--accent));
  opacity: 0.4;
  position: absolute;
}
.tl-prop .tl-above .tl-stem { bottom: 6px; }
.tl-prop .tl-below .tl-stem { top: 6px; }
.tl-prop .tl-label {
  position: absolute;
  width: 130px;
  text-align: center;
  left: -65px;
}
.tl-prop .tl-above .tl-label { bottom: calc(var(--stem, 24px) + 10px); }
.tl-prop .tl-below .tl-label { top: calc(var(--stem, 24px) + 10px); }
.tl-prop .tl-start .tl-label { left: -10px; text-align: left; }
.tl-prop .tl-end .tl-label { left: auto; right: -10px; text-align: right; }
.tl-prop .tl-desc + .tl-desc { margin-top: 3px; }
.tl-prop .tl-desc[data-tech-id] { cursor: pointer; }
.tl-prop .tl-desc[data-tech-id]:hover { color: var(--accent-2); opacity: 1; text-decoration: underline; }

/* ----- Sjangertidslinje (over hver sjangerhistorie) -----
   Samme spor som innovasjonstidslinjen, men farget av familiefargen og med
   sjangernavnet som det bærende elementet. Genereres fra GENEALOGY. */
/* .tl-rich = den forfinede utformingen, delt av sjanger- OG instrumenttidslinjen:
   navnet bærer etiketten, midtstilte etiketter, navnet nærmest streken.
   .tl-genre legger familiefargen oppå; instrumenttidslinjen har ingen farge og
   arver dermed den grønne --accent, som innovasjonstidslinjen den stammer fra.

   Sidepolstringen gir de midtstilte ytterste etikettene plass utenfor sporet.
   Uten den ville halve etiketten havnet utenfor scroll-kanten, siden punktene
   selv står helt ytterst på aksen. */
.tl-rich { margin: 4px 0 18px; padding: 0 62px; }
.tl-rich .tl-desc { font-size: 0.82rem; font-weight: 600; opacity: 1; }
.tl-rich .tl-year { font-weight: 500; font-size: 0.72rem; opacity: 0.75; }
/* Navnet skal ligge NÆRMEST streken uansett hvilken side etiketten står på.
   Over streken stables innholdet nedover mot den, og navnet ligger allerede
   sist; under streken stables det bort fra den, så årstallet flyttes bakerst med
   `order` — det beholder rekkefølgen på navnene når en gruppe har flere. */
.tl-rich .tl-label { display: flex; flex-direction: column; }
.tl-rich .tl-below .tl-label .tl-year { order: 1; margin-bottom: 0; margin-top: 3px; }
.tl-prop.tl-rich .tl-desc[data-genre],
.tl-prop.tl-rich .tl-desc[data-tech-id] { cursor: pointer; }
.tl-prop.tl-rich .tl-desc[data-genre]:hover,
.tl-prop.tl-rich .tl-desc[data-tech-id]:hover { color: var(--tl-color, var(--accent)); text-decoration: underline; }

/* ----- Instrumenter: fane per gruppe, én tidslinje + sammendrag om gangen -----
   Fanene har samme rolle som sjangerhistorienes chips: alle tidslinjene under
   hverandre ble uoversiktlig. Åtte kolonner, samme rytme som .hist-chips. */
/* Skjult for øyet, lest av skjermlesere. Brukt til modaltitler som er erstattet
   av faner — uten den mister modalen sitt tilgjengelige navn. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hovedfanene (utvikling / podkaster) ligger I modalhodet, på samme rad som
   ←/✕. Ekte fane-preg: ingen ramme, understrek på den aktive, og en tynn linje
   langs hele hodet som fanene «sitter på». */
.modal-head-tabs { align-items: flex-end; gap: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.modal-head-tabs .modal-close,
.modal-head-tabs .modal-close-all { margin-bottom: 6px; }
.instr-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.instr-tab.btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 10px;
  margin-bottom: -1px;             /* legger understreken oppå hodets linje */
  font-size: 0.92rem;
  color: var(--muted);
}
.instr-tab.btn:hover { background: none; color: var(--text); }
.instr-tab.btn.active {
  background: none;
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* To rader à fire, ikke én à åtte: «Elektronisk produksjon» blir avkortet til
   «Elektronisk pro…» når åtte navn skal dele bredden. */
.instr-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}
@media (min-width: 560px) { .instr-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Skiller knappevalget fra innholdet under — samme tynne strek som over
   tidslinjen, så de to seksjonsgrensene ser like ut. */
.instr-chips { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
/* .btn tas med i selektoren: ellers vinner `.btn.ghost { background }` på to
   klasser over en ren .instr-chip-regel, og aktiv-fargen slår aldri gjennom. */
.instr-chip.btn {
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Uvalgt: en lys tone av instrumentets egen farge, så alle åtte er fargekodet
     hele tiden — ikke bare den som er valgt (som sjangerhistorienes chips). */
  color: var(--instr-color, var(--text));
  background: color-mix(in srgb, var(--instr-color, var(--line)) 14%, #fff);
  border-color: color-mix(in srgb, var(--instr-color, var(--line)) 45%, transparent);
}
.instr-chip.btn:hover {
  background: color-mix(in srgb, var(--instr-color, var(--line)) 24%, #fff);
  border-color: var(--instr-color, var(--line));
}
.instr-chip.btn.active {
  background: var(--instr-color, var(--accent));
  border-color: var(--instr-color, var(--accent));
  color: #fff;
}
/* Radiovalg i skjemaene (korttype: innovasjon / hendelse) */
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.radio-opt { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.radio-opt input { margin: 0; }

/* Hendelseskort på tidslinjen: åpen prikk mot innovasjonens fylte, så artefakt
   og skifte skilles uten farge (fargen er allerede instrumentets). */
.tl-item-hendelse .tl-dot { background: var(--bg); border-style: double; border-width: 4px; }
.tl-desc-hendelse { font-style: italic; }
.tl-legend { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 0.74rem; color: var(--muted); }
.tl-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--tl-color, var(--accent)); background: var(--tl-color, var(--accent));
}
.tl-legend-dot.tl-legend-hendelse { background: var(--bg); border-style: double; border-width: 3px; margin-left: 12px; }

.instr-single { font-size: 0.88rem; margin: 10px 0 14px; }
/* Tidslinjen har egen luft (.tl-rich), så seksjonen trenger ikke mer under. */
.instr-tl .timeline { margin-bottom: 4px; }
.instr-tl .gx-missing { margin: 10px 0 14px; }
/* Sammendrag som ennå ikke er skrevet: en henvisning til podkastgruppen, ikke
   et feilvarsel — kursiv i stedet for .gx-missing sin røde fete stil. */
.instr-sum-hint { font-style: italic; color: var(--muted); margin: 10px 0 14px; }
/* Sammendraget står ØVERST — teksten er inngangen til instrumentet. Skrives av
   studentene, som resten av innholdet. */
.instr-sum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.instr-sum-head h3 { margin: 0; font-size: 1rem; }
.instr-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* Skillelinjen følger tidslinjen, som nå ligger nederst. */
.instr-tl { border-top: 1px solid var(--line, #e5e7eb); margin-top: 18px; padding-top: 6px; }

/* ----- Endringsforslag-liste ----- */
.pending-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 8px; }
.pending-table th, .pending-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pending-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.pending-table .tag { font-size: 0.78rem; }

/* ----- Endringsforslag (diff-tabell) ----- */
.diff-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 8px 0 16px; }
.diff-table th, .diff-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.diff-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.diff-table .diff-field { font-weight: 600; width: 18%; }
.diff-table .diff-current { width: 32%; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.diff-table .diff-proposed { width: 32%; white-space: pre-wrap; word-break: break-word; }
.diff-table .diff-actions { width: 18%; white-space: nowrap; }
.diff-table .diff-actions button { padding: 4px 10px; min-width: 36px; margin-right: 4px; }
.diff-table .diff-row.is-approved { background: #f0fdf4; }
.diff-table .diff-row.is-approved .diff-approve { background: #16a34a; color: #fff; border-color: #16a34a; }
.diff-table .diff-row.is-rejected { background: #fef2f2; }
.diff-table .diff-row.is-rejected .diff-reject { background: #dc2626; color: #fff; border-color: #dc2626; }
.diff-empty { color: var(--muted); font-style: italic; }
.diff-full { margin-top: 6px; font-size: 0.88rem; white-space: pre-wrap; }
@media (max-width: 640px) {
  .diff-table, .diff-table thead, .diff-table tbody, .diff-table tr, .diff-table td { display: block; }
  .diff-table thead { display: none; }
  .diff-table .diff-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .diff-table .diff-field, .diff-table .diff-current, .diff-table .diff-proposed, .diff-table .diff-actions {
    width: auto; padding: 4px 0; border-bottom: none;
  }
  .diff-table .diff-current::before { content: "Gjeldende: "; font-weight: 600; color: var(--muted); }
  .diff-table .diff-proposed::before { content: "Foreslått: "; font-weight: 600; color: var(--text); }
}

/* ----- Teknologi-kort ----- */
.tech-category-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
/* «Foreslå ny» (student) / «Rediger kort» (lærer) i enden av kategoriraden.
   nowrap: uten det brekker teksten til to linjer når raden er trang, og knappen
   blir dobbelt så høy som fanene ved siden av. */
.tech-tabs-extra { margin-left: auto; }
.tech-tabs-extra:empty { display: none; }
.tech-tabs-extra .btn { white-space: nowrap; }
.tech-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

/* ----- Innstillinger-knapp i header (lærer) ----- */

/* ----- Innstillinger (lærer) ----- */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.settings-section:first-child { padding-top: 0; }
.settings-section:last-child { border-bottom: none; padding-bottom: 0; }
.settings-section h3 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  font-weight: 600;
}
.settings-section--danger h3 { color: var(--danger); }
.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.settings-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}
.settings-row label input { width: 90px; background: #fff; }

/* ----- Merge-konflikt ----- */
.merge-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; max-height: 55vh; overflow-y: auto; }
.conflict-row { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.conflict-field-name { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding: 6px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.conflict-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; }
.conflict-opt:hover { background: var(--surface-2); }
.conflict-opt + .conflict-opt { border-top: 1px solid var(--line); }
.conflict-opt input[type="radio"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.conflict-val { font-size: 0.87rem; line-height: 1.45; }
.conflict-val.new { color: var(--accent-2); }
.merge-foot { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ----- Filtret resultatliste (forside) ----- */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
}
.result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
}
.result-row:hover { background: var(--surface-2); border-color: var(--accent); transform: translateX(3px); }
.result-name { font-weight: 600; min-width: 130px; flex-shrink: 0; }
.result-name.result-link { color: var(--text); text-decoration: none; cursor: pointer; }
.result-name.result-link:hover { color: var(--text); }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; }
.result-meta .tag { padding: 2px 8px; font-size: 0.72rem; }
.result-arrow { color: var(--accent); font-size: 1.1rem; margin-left: auto; flex-shrink: 0; }
.result-work { font-size: 0.78rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ----- Spotlight (forside) ----- */
.spotlight-grid {
  display: block;
  margin-top: 0;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.view-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 4px;
}
.filter-bar input,
.filter-bar select { padding: 8px 11px; font-size: 0.88rem; }
/* Student «Finn artister»: handlingsknappene på egen rad under tittelen,
   over filter-raden. */
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Skyver en knapp helt ut til høyre i raden (f.eks. «Foreslå en artist»). */
.filter-actions .push-right { margin-left: auto; }

/* Sjanger-/undersjanger-boblene: luft både til sidene og mellom radene — de lå
   tidligere klistret inntil hverandre (lista hadde ingen egen regel). */
.subgenre-tag-list { display: flex; flex-wrap: wrap; gap: 10px; }

.section-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin: 0 0 10px; }
.dagens-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* ----- Skrivebord (lærer-arbeidsflyt øverst) ----- */
.desk-inbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.desk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.desk-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.desk-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--accent-2);
}
.desk-ic svg { width: 19px; height: 19px; }
.desk-item-l { font-size: 0.95rem; color: var(--text); }
.desk-item-l b { font-weight: 700; }
.desk-clear {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 0.92rem;
}
.desk-clear svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; }

/* Sjekk-fremdrift per innholdskategori */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.desk-cat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
/* Tittel + progresjonsstrek på samme rad — holder kortet lavt. Tittelen kan
   kortes med ellipsis (title-attributt viser full tekst), streken tar resten. */
.desk-cat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.desk-cat-h { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-cat-top .bar.small { flex: 1; min-width: 34px; }
.desk-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 29px; flex-wrap: wrap; }
.desk-cat-n { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.desk-cat-n b { color: var(--text); font-weight: 700; }
.desk-cat-btn { flex-shrink: 0; }
.desk-cat .bar.small { display: block; }
.desk-cat-list { margin-top: 10px; max-height: 250px; overflow-y: auto; }
.desk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.desk-row-name {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-row-name:hover { color: var(--accent); text-decoration-color: var(--accent); }
.desk-row-check { flex-shrink: 0; }
.desk-undo { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.desk-undo-l { font-size: 0.72rem; color: var(--muted-2); width: 100%; }
.desk-undo-chip {
  font-family: inherit;
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.desk-undo-chip:hover { border-color: var(--danger); color: var(--danger); }
.desk-ok { font-size: 0.85rem; color: var(--muted-2); }
.desk-item.active { border-color: var(--accent); background: #f0fdf4; }
/* Må stå ETTER basisregelen — regler med lik spesifisitet vinner på rekkefølge,
   media query eller ei (720px-blokka øverst i fila taper mot basis her nede).
   4 kort per rad på brede skjermer, trappes ned til 1 på mobil. */
@media (max-width: 1000px) {
  .desk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .desk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .desk-grid { grid-template-columns: 1fr; }
}

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* Utforsk-griden med SEKS kort skal aldri ende med en ujevn siste rad. auto-fit
   ovenfor fyller så mange den får plass til, og ga 5+1 rundt 900 px og 4+2 rundt
   800 px. Her låses kolonnetallet til divisorene i 6 — 6, 3, 2 eller 1 — så
   radene alltid blir like lange, og raden midtstilles når kortene ikke fyller
   bredden.
   Kortene får samtidig et tak på 240 px. Uten det ville tre kort på en 1000 px
   skjerm blitt 294 px brede, altså nesten dobbelt så store som i dag; med taket
   beholder de formen og luften havner utenfor raden i stedet for inni kortene.

   Grensene er regnet ut fra minstebredden (150 px) og luften (10 px), mot
   .wrap- og .panel-paddingen som gjelder på hvert nivå:
     6 på rad: 6·150 + 5·10 = 950 px grid  → skjerm ≥ 1050 px
     3 på rad: 3·150 + 2·10 = 470 px grid  → skjerm ≥ 530 px
     2 på rad: 2·150 + 1·10 = 310 px grid  → skjerm ≥ 364 px
   Grensene er lagt der kortene FAKTISK får plass, målt i nettleseren, så
   ingen skjermbredde mister en kolonne den hadde med auto-fit.

   :has() framfor en egen klasse: da treffer regelen nøyaktig de gridene som
   FAKTISK har seks kort (student- og lærerdashbordet), og faller trygt tilbake
   til auto-fit den dagen et sjuende kort kommer til. Hub-griden «Det store
   bildet» har ni kort og er bevisst utenfor: like rader der ville tvunget den
   ned i ett kort per rad på mobil. */
.dash-grid:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(6, minmax(150px, 240px));
  justify-content: center;
}
@media (max-width: 1049px) {
  .dash-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(150px, 240px)); }
}
@media (max-width: 529px) {
  .dash-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(150px, 240px)); }
}
@media (max-width: 363px) {
  .dash-grid:has(> :nth-child(6):last-child) { grid-template-columns: minmax(150px, 240px); }
}
.dash-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dash-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-icon { width: 22px; height: 22px; margin-bottom: 4px; flex-shrink: 0; }
.dash-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.dash-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }

/* Tiårsvelger: klikkbar tidslinje-stripe øverst i Samfunn/Teknologi-
   visningen (student og lærer). Linja tegnes som ::before fra første til
   siste punktsenter (én kolonnehalvdel inn fra hver side). */
.decade-ribbon { margin: 6px 0 2px; }
.dr-track {
  position: relative;
  display: grid;
  /* --dr-cols settes av renderDecadeRibbon: 13 tiår, 14 når kartets «Alle»-
     prikk er med. */
  grid-template-columns: repeat(var(--dr-cols, 13), 1fr);
}
/* Selve tidsaksen. Den starter i midten av den FØRSTE tiårsprikken og slutter i
   midten av den siste. --dr-line-start hopper over «Alle»-kolonnen når den er
   der, så Alle-prikken står utenfor aksen — den er ikke et årstall. */
.dr-track::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(100% / var(--dr-cols, 13) * (var(--dr-line-start, 0) + 0.5));
  right: calc(100% / var(--dr-cols, 13) * 0.5);
  height: 2px;
  background: var(--line-strong);
  border-radius: 1px;
}
.dr-node {
  position: relative;
  background: none;
  border: 0;
  padding: 5px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
}
.dr-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.dr-node:hover .dr-dot { transform: scale(1.25); }
.dr-node.active .dr-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}
.dr-year {
  font-size: 0.66rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dr-node.active .dr-year { color: var(--accent-2); font-weight: 700; }
.dr-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* «Alle»-prikken i kartets stripe: egen farge (lilla), så den leses som noe
   annet enn et tiår — den slår av tiårsfilteret i stedet for å velge et år. */
.dr-all .dr-dot { border-color: #7c3aed; }
.dr-all.active .dr-dot { background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16); }
.dr-all.active .dr-year { color: #6d28d9; }
@media (max-width: 480px) {
  .dr-year { font-size: 0.56rem; letter-spacing: -0.03em; }
  .dr-dot { width: 10px; height: 10px; }
  .dr-track::before { top: 9px; }
}
.dv-decade { font-size: 1.15rem; margin: 12px 0 2px; }
.dv-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* ----- Podkast ----- */
/* Episodekortene: lave og slanke, hvit flate med tynn ramme i stedet for det
   grønne fyllet — de skal lese som en liste, ikke som åtte tunge blokker. */
.podkast-list { display: flex; flex-direction: column; gap: 10px; }
.podkast-episode {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
/* Tittelraden bærer også lærerens knapper, skjøvet helt til høyre. baseline
   ville løftet ikon-knappene skjevt, så raden sentreres i stedet. */
.podkast-header { display: flex; align-items: center; gap: 8px; }
.podkast-title { margin: 0; font-size: 0.95rem; }
.podkast-duration { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.podkast-header .podkast-actions { display: flex; gap: 4px; margin-left: auto; }
.podkast-desc { font-size: 0.86rem; color: var(--muted); margin: 4px 0 0; line-height: 1.45; }
.podkast-desc p { margin: 0 0 6px; }
/* Nettleserens standard lydavspiller er 54px høy — den dominerer et slankt
   kort, så den skaleres ned litt her. */
.podkast-episode audio { width: 100%; height: 34px; margin-top: 8px; display: block; }

/* ===========================================================================
   Flersides-elementer: navigasjon, forside-hero, lærerport
   =========================================================================== */

/* Merke som lenke */
a.brand { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; }
.brand-icon { height: 36px; width: auto; }

/* Navigasjon */
.nav { display: flex; gap: 6px; align-items: center; }
.version-tag {
  font-size: 0.72rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-right: 4px;
}
/* Ikonfaner (hjem / lærer / innstillinger) — <a> og <button> deler stil. */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--muted);
  background: none;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.12s;
}
.nav-icon svg { display: block; }
.nav-icon:hover { color: var(--text); background: var(--surface-2); }
.nav-icon.active { color: var(--accent); background: #f0fdf4; border-color: #bbf7d0; }
/* Tannhjulet på lærersiden er teacher-only (modalen virker først etter
   innlogging) — må gjentas her fordi .nav-icon ellers vinner på kilderekkefølge. */
.nav-icon.teacher-only { display: none; }
body.is-teacher .nav-icon.teacher-only { display: inline-flex; }

/* Lærerport (innlogging) */
.gate { max-width: 430px; margin: 64px auto; }
.gate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  text-align: center;
}
.gate-card h2 { margin: 0 0 6px; }
.gate-card p { color: var(--muted); margin: 0 0 20px; font-size: 0.9rem; }
.gate-card form { display: flex; flex-direction: column; gap: 12px; }
.gate-card input { text-align: center; }

/* Vis/skjul lærerverktøy */
#teacher-app { display: none; }
body.is-teacher #teacher-app { display: block; }
body.is-teacher #gate { display: none; }

/* ===========================================================================
   Mobil – generelle justeringer
   =========================================================================== */

/* Topbar: wrap brand + nav til to rader på smale skjermer */
@media (max-width: 640px) {
  .topbar .wrap {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 6px;
  }
  .brand h1 { font-size: 1.05rem; }
  /* Når topbaren brytes til to rader (brand på rad 1, nav på rad 2) venstre-
     stiller space-between den ene nav-en. margin-left:auto skyver ikonene til
     høyre, likt som på desktop. */
  .nav { gap: 2px; margin-left: auto; }
  .nav-icon { width: 34px; height: 34px; }
  .version-tag { display: none; }
  .wrap { padding: 0 14px; }
  main { padding: 20px 0 50px; }
  /* Slektstre-hodet: «Åpne musicmap.info» får sin egen rad på telefon (ellers
     blir rada for bred). Overskrift + Tilbake/Lukk blir på rad 1. */
  .gx-page-head { flex-wrap: wrap; }
  .gx-page-head .gx-musicmap { order: 1; flex-basis: 100%; }
  .panel { padding: 18px 14px; margin-bottom: 14px; }

  /* Modaler fyller mer av skjermen */
  .modal-backdrop { padding: 10px; }
  .modal { padding: 20px 16px; max-height: 92vh; border-radius: var(--radius-sm); }
  .modal-head { margin-bottom: 16px; }

  /* Filter: hvert element tar full bredde */
  .filter-bar { gap: 8px; }
  .filter-bar input,
  .filter-bar select { width: 100%; }

  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-card { padding: 12px 10px; }
  .dash-icon { width: 18px; height: 18px; }
  .dash-title { font-size: 0.88rem; }
  .dash-desc { font-size: 0.73rem; }

  /* Resultat-liste: kortere min-width på navn */
  .result-name { min-width: 110px; }
  .result-work { display: none; }

  /* Skjema: verk- og kilderader stables vertikalt */
  .me-row { flex-direction: column; }
  .source-row { flex-direction: column; }
  .work-row { flex-direction: column; }
  .work-row .work-year { flex: 1; }
  .artist-image { float: none; max-width: 100%; margin: 0 0 12px; }
  .artist-image.big { max-width: 100%; }

  /* Kortets bunntekst */
  .spacer { display: none; }
  .card-foot { gap: 8px; }
}

/* ===========================================================================
   Slektstre (genealogy)
   =========================================================================== */
.gx-stage {
  position: relative;
  width: 100%;
  height: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.gx-stage.gx-drag { cursor: grabbing; }
.gx-stage-tall { height: 70vh; min-height: 480px; }
#gx-svg { display: block; width: 100%; height: 100%; }
.gx-ctrl { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 6px; z-index: 5; }
.gx-ctrl button {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gx-ctrl button:hover { border-color: var(--accent); }
.gx-grid { stroke: var(--line); stroke-width: 1; opacity: 0.6; }
.gx-decade { font-size: 12px; fill: var(--muted-2); font-family: "Inter", sans-serif; }

.gx-edge { stroke: #c2cfc7; stroke-width: 1.4; opacity: 0.35; fill: none; transition: opacity 0.15s, stroke-width 0.15s; }
.gx-edge.gx-hl { opacity: 1; stroke-width: 2.2; }
.gx-edge.gx-react { stroke: #e0a85a; stroke-dasharray: 6 5; opacity: 0.5; }
.gx-edge.gx-react.gx-hl { opacity: 1; stroke-width: 2.4; }
/* Usynlig, bred trykkbane oppå hver strek — fanger klikk/hover for koblingen
   (en 1,4 px linje er umulig å treffe med finger). pointer-events: stroke gjør
   den klikkbar selv om streken er gjennomsiktig. */
.gx-edge-hit { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; }

.gx-node { cursor: pointer; }
.gx-node rect { pointer-events: all; }
/* Boksene er usynlige til vanlig — kun treffflate. Den hovrede noden
   (gx-focus, satt i light()) beholder familiefyllet fra gx-f-*-reglene
   under, så ankeret for fremhevingen alltid er tydelig. */
.gx-node:not(.gx-focus) rect { fill: transparent !important; stroke: transparent !important; }
/* Sjangernavnene i treet: større enn nodeboksen tilsier, for lesbarhet.
   Boksen (NW/NH i genealogy.js) og avstanden mellom nodene er UENDRET — teksten
   er pointer-events:none og påvirker ikke treffområdet eller layouten. */
.gx-node text { font-size: 18px; font-weight: 500; pointer-events: none; font-family: "Inter", sans-serif; }
.gx-dim { opacity: 0.16; }

/* Touch: mini-kort øverst til venstre i kartet. Vises kun etter et trykk på en
   node på touch-enheter — se selectTouch() i genealogy.js. Første trykk lyser
   opp slekta og viser dette; «Detaljer» (eller et nytt trykk på noden) åpner
   popupen. (Zoom-knappene ligger nederst til høyre, så ingen kollisjon.) */
.gx-card {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
  display: none;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 11px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 6;
}
.gx-card.show { display: flex; }
.gx-card-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.gx-card-name {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  font-family: "Inter", sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-card-btn { flex: none; }

.gx-f-gray rect   { fill: #e7ebe8; stroke: #9bada1; } .gx-f-gray text   { fill: #3a4a40; }
.gx-f-blue rect   { fill: #dbeafe; stroke: #3b82f6; } .gx-f-blue text   { fill: #1e3a8a; }
.gx-f-amber rect  { fill: #fef3c7; stroke: #d97706; } .gx-f-amber text  { fill: #7c2d12; }
.gx-f-purple rect { fill: #ede9fe; stroke: #7c3aed; } .gx-f-purple text { fill: #4c1d95; }
.gx-f-red rect    { fill: #fee2e2; stroke: #dc2626; } .gx-f-red text    { fill: #7f1d1d; }
/* olive = Gospel, skilt ut fra den røde familien i v3.88 da R&B overtok rødt.
   Se FAMILIES i genealogy.js for hvorfor den havnet i grønnsonen og ikke i en
   burgunder ved siden av rødt. */
.gx-f-olive rect  { fill: #ecfccb; stroke: #4d7c0f; } .gx-f-olive text  { fill: #365314; }
.gx-f-teal rect   { fill: #ccfbf1; stroke: #0d9488; } .gx-f-teal text   { fill: #134e4a; }
.gx-f-pink rect   { fill: #fce7f3; stroke: #db2777; } .gx-f-pink text   { fill: #831843; }
.gx-f-green rect  { fill: #dcfce7; stroke: #16a34a; } .gx-f-green text  { fill: #14532d; }
.gx-f-rock rect   { fill: #e2e8f0; stroke: #334155; } .gx-f-rock text   { fill: #1e293b; }
.gx-f-pop rect    { fill: #fae8ff; stroke: #c026d3; } .gx-f-pop text    { fill: #701a75; }

.gx-era { font-size: 0.8rem; color: var(--muted-2); margin: 0 0 8px; }
/* pre-line: lange metasjanger-tekster bruker \n\n som avsnittsskille i data. */
.gx-desc { font-size: 0.92rem; line-height: 1.55; margin: 0 0 10px; color: var(--text); }
.gx-rel { font-size: 0.85rem; color: var(--muted); margin: 0 0 4px; }
.gx-rel strong { color: var(--text); font-weight: 600; }
.gx-react-rel strong { color: #b4690e; }

/* Spilleliste-popup */
.pl-list { margin: 0 0 4px; padding-left: 16px; list-style: disc; }
.pl-item { font-size: 0.88rem; line-height: 2.4; }
.pl-item a { color: var(--accent); text-decoration: none; }
.pl-item a:hover { text-decoration: underline; }
.tag.tag-pl { font-size: 0.7rem; padding: 0 5px; vertical-align: middle; line-height: 1.5; margin-left: 4px; }

.gx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; }
.gx-missing { color: var(--danger, #dc2626); font-weight: 600; }
.gx-leg { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.gx-leg-hint { font-style: italic; color: var(--muted-2); }
.gx-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid; }
.gx-sw.gx-f-gray   { background: #e7ebe8; border-color: #9bada1; }
.gx-sw.gx-f-blue   { background: #dbeafe; border-color: #3b82f6; }
.gx-sw.gx-f-amber  { background: #fef3c7; border-color: #d97706; }
.gx-sw.gx-f-purple { background: #ede9fe; border-color: #7c3aed; }
.gx-sw.gx-f-red    { background: #fee2e2; border-color: #dc2626; }
.gx-sw.gx-f-teal   { background: #ccfbf1; border-color: #0d9488; }
.gx-sw.gx-f-pink   { background: #fce7f3; border-color: #db2777; }
.gx-sw.gx-f-green  { background: #dcfce7; border-color: #16a34a; }
.gx-sw.gx-f-rock   { background: #e2e8f0; border-color: #334155; }
.gx-sw.gx-f-pop    { background: #fae8ff; border-color: #c026d3; }
.gx-sw-line { width: 18px; height: 0; border-top: 2px dashed #e0a85a; display: inline-block; vertical-align: middle; }
.gx-sw-line.gx-sw-solid { border-top: 2px solid #aebbb1; }

/* Ekstra smal: veldig gamle/små telefoner */
@media (max-width: 380px) {
  .brand h1 { font-size: 0.95rem; }
  .nav-icon { width: 32px; height: 32px; }
  .panel { padding: 14px 12px; }
  .modal { padding: 16px 14px; }
  .btn { padding: 8px 13px; }
  .btn.small { padding: 5px 9px; font-size: 0.78rem; }
  .btn.compact { padding: 8px 5px; font-size: 0.79rem; }
}

.artist-link, .tech-link, .genre-link { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.artist-link { color: var(--accent); }
.tech-link { color: #d97706; }
.genre-link { color: #059669; }
.artist-link:hover, .tech-link:hover, .genre-link:hover { text-decoration-style: solid; }

/* ============================================================
   Sjangerhimmelen (konstellasjonskart, constellation.js)
   ============================================================ */
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; padding: 4px 11px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: #fff; color: var(--text); cursor: pointer;
}
.sh-chip.off { opacity: 0.35; }
.sh-chip.solo { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); font-weight: 500; }
.sh-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sh-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.sh-bro-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.sh-counts { font-size: 0.78rem; color: var(--muted); }
.sh-linkbtn { background: none; border: 0; padding: 0; margin: 0; color: var(--accent); font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sh-zoom-btns { margin-left: auto; display: inline-flex; gap: 4px; }
#sh-svg-wrap { position: relative; }
#sh-svg {
  touch-action: none; cursor: grab;
  width: 100%; height: min(52vh, 480px);
  background: var(--bg-soft, #f2f6f3);
  border: 1px solid var(--line); border-radius: 12px;
}
#sh-svg:active { cursor: grabbing; }
#sh-svg text { pointer-events: none; font-family: inherit; }
/* Sjangernavn alltid synlige; artistnavn kommer med fokus (og zoom for de tetteste). */
#sh-svg .sh-starlbl { font-size: 21px; fill: var(--text); paint-order: stroke; stroke: var(--bg-soft, #f2f6f3); stroke-width: 4px; }
#sh-svg .sh-rootlbl { font-size: 15px; fill: var(--muted); paint-order: stroke; stroke: var(--bg-soft, #f2f6f3); stroke-width: 3px; }
#sh-svg .sh-artlbl { display: none; font-size: 13px; fill: var(--text); paint-order: stroke; stroke: var(--bg-soft, #f2f6f3); stroke-width: 2.5px; }
/* Alle navn ved berøringsfokus; ellers kun det man holder over (sh-show). */
#sh-svg .sh-artgroup.sh-locked .sh-artlbl { display: block; }
#sh-svg .sh-artlbl.sh-show { display: block; font-weight: 700; stroke-width: 3.5px; }
#sh-svg .sh-artdot { transition: r .08s; }
/* Artistbildet ved hover (bygges i constellation.js). Skygge + peker-gjennom, så
   ruta aldri stjeler hover fra prikken under og «blinker» av og på. */
#sh-svg .sh-thumb { pointer-events: none; filter: drop-shadow(0 3px 8px rgba(16, 26, 19, 0.28)); }

/* ----- Varmekart: én glidende stripe per sjanger -----
   Raden var 13 avrundede bolker med luft imellom; nå er den ÉN stripe der
   gradienten (bygd i explore-varmekart.js) bærer hele tidsforløpet. Høyden er
   bevisst lav — stripa skal lese som en linje, ikke som en rad klosser — og
   pille-radiusen gjør endene runde uten å dele opp innmaten.
   .vk-cell er de usynlige tiårsfeltene oppå: treffområder for hjelpetekst og
   lærerens klikk. De har ALDRI egen bakgrunn i hvile — får de det, er vi tilbake
   til firkantene. Hover/fokus er derfor et lyst slør, ikke en ramme. */
/* Tiårsaksen over en varmestripe. Like kolonner og INGEN luft, så
   etikettmidtene treffer segmentmidtene i stripa under på prosenten. Delt av
   varmekartet og sjangerkortet, så de to aldri kan drive fra hverandre. */
.hs-axis {
  display: grid;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* Varmelinja øverst på sjangerkortet: tyngdepunktet gjennom historien, over
   selve teksten. Litt luft under, så den ikke klistrer seg til era-linja. */
.gx-heat { margin: 0 0 14px; }
.gx-heat .hs-axis { margin-bottom: 3px; }
/* Mobil: sjangerkortets akse får ~25 px per tiår på en 375 px-skjerm, mens
   «1900» er 26 px bredt. Etikettene klistret seg sammen til «190019101920…».
   Under 480 px vises derfor annethvert årstall (1900, 1920 … 2020), som gir
   dem det dobbelte av plassen, og begge ender er fortsatt merket.
   Grensen er MÅLT på tekstboksene (ikke på grid-cellene, som alltid fyller
   kolonnen sin): med alle tretten synlige er avstanden mellom årstallene
   -1,3 px ved 375 px skjerm, 1,6 px ved 431 px og 5,5 px ved 481 px. Det er
   altså først rett over 480 px det er luft nok til å vise hele rekka.
   visibility, IKKE display: kolonnene må stå igjen, ellers flytter de synlige
   etikettene seg vekk fra segmentene i stripa under. Stripa selv beholder alle
   tretten segmentene og hjelpeteksten på hvert av dem.
   Gjelder kun sjangerkortet: varmekartets akse ligger i en vannrett scroller og
   har 35 px per tiår, altså god plass. */
@media (max-width: 480px) {
  .gx-heat .hs-axis > :nth-child(even) { visibility: hidden; }
}
.gx-heat-missing {
  margin: 5px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

/* Å knytte navnet til riktig stripe var vanskelig i en gruppe med mange rader
   (Jazz har 12). Derfor lyser HELE raden opp under pekeren — båndet går tvers
   over både etiketten og stripa, så øyet kobler dem uten å telle linjer.
   Bakgrunnen er det som bærer koblingen; halvfet etikett og en tynn ring rundt
   stripa er bare forsterkning.
   Bare hover-enheter får :hover — på berøring ville den hengt igjen etter et
   trykk. Der settes .is-active fra JS i stedet (samme utseende), og
   :focus-within tar tastaturet gjennom lærerens celleknapper. */
.vk-row { border-radius: 8px; transition: background-color .12s; }
@media (hover: hover) {
  .vk-row:hover { background: var(--surface-2); }
}
.vk-row.is-active,
.vk-row:focus-within { background: var(--surface-2); }

.vk-rowlabel { transition: font-weight .12s; }
.vk-row.is-active .vk-rowlabel,
.vk-row:focus-within .vk-rowlabel { font-weight: 600; }
@media (hover: hover) {
  .vk-row:hover .vk-rowlabel { font-weight: 600; }
}

.vk-strip {
  position: relative;
  height: 15px;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .12s;
}
.vk-row.is-active .vk-strip,
.vk-row:focus-within .vk-strip { box-shadow: 0 0 0 1px var(--line-strong); }
@media (hover: hover) {
  .vk-row:hover .vk-strip { box-shadow: 0 0 0 1px var(--line-strong); }
}
.vk-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
button.vk-cell { cursor: pointer; }
button.vk-cell:hover { background: rgba(255, 255, 255, 0.34); }
button.vk-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 3px;
}

/* Hover-kortet på tidslinjens blokker: bilde + navn + aktiv-periode. Ligger i
   <body> med fixed posisjon (settes i explore.js), så modalens scroll-boks ikke
   klipper det. pointer-events:none — kortet skal aldri stjele hoveren fra
   blokka under. Bildet beholder sitt eget format: ingen faste mål, bare et tak
   på hver side, så liggende blir liggende og stående blir stående. */
.tid-tip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  width: max-content;
  max-width: 200px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.tid-tip img {
  display: block;
  width: auto;
  height: auto;
  max-width: 168px;
  max-height: 168px;
  border-radius: 6px;
  margin: 0 auto 7px;
}
.tid-tip-name { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.tid-tip-years { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
#sh-svg .sh-star .sh-halo { transition: fill-opacity .12s; }
#sh-svg .sh-star.sh-hot .sh-starlbl { font-weight: 700; }
#sh-svg .sh-star.sh-linked .sh-starlbl { font-weight: 700; }
#sh-svg .sh-star.sh-linked circle:not(.sh-halo) { stroke: var(--text); stroke-width: 2px; }
/* Fokusmodus (én stjerne valgt): alle ANDRE stjerner + røtter + skjelett gråes
   ut, så sjangerens artist-prikker står tydelig frem. Den valgte stjernen
   (.sh-hot) beholder familiefargen som anker for stjernebildet.
   NB: ingen transition på fill her — Chrome låser transisjonen på startverdien
   når fill går fra presentasjonsattributt til CSS-verdi (gråtonen slo aldri inn). */
#sh-svg.sh-focusmode .sh-star:not(.sh-hot) circle:not(.sh-halo) { fill: var(--muted-2, #7d9885); fill-opacity: 0.3; }
#sh-svg.sh-focusmode .sh-star:not(.sh-hot) .sh-starlbl { fill: var(--muted); opacity: 0.55; }
#sh-svg.sh-focusmode .sh-root { opacity: 0.35; }
#sh-svg.sh-focusmode .sh-lineage { opacity: 0.4; }
.sh-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.sh-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sh-lg-star { width: 13px; height: 13px; border-radius: 50%; background: var(--muted-2); flex: none; }
.sh-lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex: none; }
.sh-lg-bridge { width: 11px; height: 11px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 1.5px var(--text); flex: none; }
/* Fokus-panel: flyter øverst i kartet, viser valgt sjanger. */
.sh-focus-panel {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface, #fff); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); pointer-events: auto;
}
.sh-focus-panel[hidden] { display: none; }
.sh-fp-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.sh-fp-meta { color: var(--muted); font-size: 0.8rem; }
.sh-loose-list { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 40vh; overflow-y: auto; margin-top: 4px; }
.sh-loose-item { text-align: left; }