/* ─────────────────────────────────────────────────────────────────────────────
   /tuben — forma som er seksjonen sin eigen, og berre han.

   Skalet (/seksjon.css) gjev kort, tal, faner, skjelett, skravering og
   atterhald. Denne fila er resten: diagramma, tidstrippelen, dei rangerte
   radene og «sist sett». Same tosidige oppsettet /blogg har med blogg.css +
   kort.css — paletten for seg, forma som ikkje finst i skalet for seg.

   Ingen farge her heller, av same grunn: kvar verdi er ein var(--…) frå
   tuben.css eller frå skalet. Alt er tb-prefiksa, so ein skalklasse ikkje kan
   fangast opp av ein av desse.

   Lastrekkjefølgje: /seksjon.css → /tuben/tuben.css → DENNE.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Tal ────────────────────────────────────────────────────────────────────
   Talet sjølv er skalet sitt (.sek-tal): det er varmt av di eit tal er noko
   han gjorde. Rutenettet og etiketten er her. */
.tb-tal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  margin: 0.7rem 0 0;
}
.tb-tal > div { padding: 0.55rem 0; }
.tb-tal .sek-tal { display: block; font-size: 1.5rem; }
.tb-tal-l { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 0.15rem; }

/* ── R1: tidstrippelen ──────────────────────────────────────────────────────
   Tri figurar side om side, aldri éin, og lesinga held forma si når dei er
   null so «ikkje målt» landar der eit tal ville stått (ADR 0015). Stipla kant
   av di dette er ei GRENSE og ikkje ei måling — same visuelle argumentet som
   skraveringa fører for usikre år. */
.tb-tid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.7rem;
  margin: 0.6rem 0 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 0.9rem;
}
.tb-tid-n {
  display: block;
  font-family: var(--font-disp);
  font-size: 1.25rem; font-weight: 700;
  color: var(--ink);
}
.tb-tid-n.tb-umaalt { font-size: 1rem; color: var(--muted); font-weight: 600; }
.tb-tid-l { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.4; margin-top: 0.2rem; }

/* ── Notat og tomt ──────────────────────────────────────────────────────────
   Kva ei rangering ikkje kunne ta med bur i skalet sin .sek-atterhald. Dette
   er dei to som ikkje er det: eit samandrag under eit diagram, og ei linje
   som seier at det ikkje finst noko. */
.tb-samandrag { margin: 0.55rem 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.tb-tom { margin: 0.6rem 0 0; color: var(--muted); font-style: italic; }

/* ── Diagram ────────────────────────────────────────────────────────────────
   Aldri mål DOM-en herifrå: røyktesten sin stubb no-oppar getBBox(), so ei
   målt utlegging blir send blank med grøn test (ADR 0015). */
svg.tb-graf { width: 100%; height: auto; display: block; overflow: visible; }
.tb-grid-line { stroke: var(--tb-grid); stroke-width: 1; }
.tb-axis-text { fill: var(--muted); font-size: 20px; font-variant-numeric: tabular-nums; }
.tb-axis-title { fill: var(--muted); font-size: 20px; }
.tb-merke { fill: var(--tb-usikker); font-size: 20px; }
.tb-merke-line { stroke: var(--tb-usikker); stroke-width: 2; stroke-dasharray: 5 4; }

.tb-b-shorts { fill: var(--tb-shorts); }
.tb-b-lang   { fill: var(--tb-lang); }
.tb-b-ukjend { fill: url(#hatch-ukjend); stroke: var(--tb-ukjend); stroke-width: 1.5; }

/* R2 — usikker dekning blir TEIKNA, ikkje forklart. Omriss og skravering i
   staden for fyll, so året les som «me veit ikkje» ved eit blikk og ikkje kan
   samanliknast på areal med eit år me veit. Ingen animasjon: test/a11y.test.js
   krev ein prefers-reduced-motion-blokk av kvar side som animerer. */
.tb-usikker { fill: url(#hatch-usikker); stroke: var(--tb-usikker); stroke-width: 2; }

/* Legendruta er skalet si (.sek-legende .rute); desse er dei tre fyllinga
   hennar kan ha. Skraveringane er teikna og ikkje fylte, av same grunn. */
.sek-legende .rute.tb-l-lang { background: var(--tb-lang); border-color: var(--tb-lang); }
.sek-legende .rute.tb-l-shorts { background: var(--tb-shorts); border-color: var(--tb-shorts); }
.sek-legende .rute.tb-l-ukjend {
  background: repeating-linear-gradient(45deg, transparent 0 3px, var(--tb-ukjend) 3px 5px);
  border-color: var(--tb-ukjend);
}
.sek-legende .rute.tb-l-usikker {
  background: repeating-linear-gradient(45deg, transparent 0 3px, var(--tb-usikker) 3px 5px);
  border-color: var(--tb-usikker);
}

/* ── Rangerte rader ─────────────────────────────────────────────────────────*/
.tb-rad {
  display: grid;
  grid-template-columns: 1.6rem minmax(6rem, 1fr) 3.6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--line);
}
.tb-rad:last-child { border-bottom: 0; }
.tb-rad .tb-nr { color: var(--muted); font-size: 0.82rem; }
.tb-rad .tb-kven { min-width: 0; }
.tb-rad .tb-namn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-rad .tb-stolpe {
  display: block; height: 0.32rem; border-radius: 0.2rem;
  background: var(--tb-lang); margin-top: 0.22rem;
}
.tb-rad .tb-n { text-align: right; color: var(--varm); font-size: 0.92rem; }
/* «minst N» — eit tal me veit er for lågt, av di passet det kom frå var kappa.
   Kaldt: det er noko maskina slutta seg til, ikkje noko ho talde. */
.tb-rad .tb-n .tb-om-lag { color: var(--kald); font-size: 0.78rem; }

/* ── Filterknappar ──────────────────────────────────────────────────────────
   Kroppen er skalet sin .sek-knapp; her er berre den trykte tilstanden, som
   .sek-knapp ikkje har (han er ein knapp, ikkje ein brytar). */
.tb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.9rem; padding: 0; list-style: none; }
.tb-chip { font-size: 0.85rem; min-height: 36px; padding: 0.32rem 0.9rem; }
.tb-chip[aria-pressed="true"] {
  background: var(--varm); border-color: var(--varm); color: var(--bg); font-weight: 700;
}
.tb-chip[aria-pressed="true"]:hover { background: var(--varm-lys); color: var(--bg); }
.tb-chip[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Vegar vidare ───────────────────────────────────────────────────────────*/
.tb-veg {
  display: block; padding: 0.85rem 1rem;
  border-radius: 0.85rem; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.tb-veg:hover, .tb-veg:focus-visible { border-color: var(--kald); }
.tb-veg b { display: block; margin-bottom: 0.15rem; }
.tb-veg span { font-size: 0.84rem; color: var(--muted); line-height: 1.45; }

/* ── Årslista ───────────────────────────────────────────────────────────────*/
.tb-aar-liste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; padding: 0; list-style: none; }
.tb-aar-liste a {
  display: inline-block; padding: 0.3rem 0.7rem;
  border-radius: 0.5rem; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: 0.9rem;
}
.tb-aar-liste a:hover, .tb-aar-liste a:focus-visible { border-color: var(--kald); }
.tb-aar-liste a .tb-n { color: var(--muted); font-size: 0.78rem; margin-left: 0.3rem; }
/* Eit usikkert år er stipla i lista OG skravert i figuren. Same påstanden, to
   stader, av di ein lesar som berre ser lista elles ikkje får han. */
.tb-aar-liste a.tb-usikker-lenkje { border-style: dashed; border-color: var(--tb-usikker); }

/* ── Sist sett ──────────────────────────────────────────────────────────────*/
.tb-sist { margin: 0.4rem 0 0; }
.tb-sist .tb-tittel { font-size: 1.05rem; font-weight: 600; }
.tb-sist .tb-kanal { color: var(--muted); }
.tb-sist .tb-naar { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); }
/* Ein rad utan tittel er ein sletta eller privat video — ei ekte avspeling me
   ikkje kan namngje. Han blir merkt, ikkje skjult. */
.tb-sist.tb-uavklart .tb-tittel { color: var(--muted); font-style: italic; font-weight: 500; }

/* ── Overskrifter i eit kort ────────────────────────────────────────────────
   Skalet gjev .sek-h1 og .sek-h2, men .sek-h2 er ei SIDE-overskrift (clamp
   1.7–2.2rem) og ikkje ei kortoverskrift. /tuben har ti kort på hubben og
   treng den mindre. Andre seksjonar løyser det med .sek-auga — ei liten
   versalisert etikett — men overskriftene her er heile setningar («Shorts kom
   i februar 2025»), og ei setning i versalar med sperring er ropt, ikkje
   merkt.

   Utan desse arvar dei nettlesaren sin standard: det SÅG rimeleg ut i porten,
   og er nettopp den stille tilstanden skalet finst for å hindra. */
.tb-h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-disp); font-weight: 700;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em;
}
.tb-h3 {
  margin: 1.2rem 0 0.5rem;
  font-family: var(--font-lab); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}