@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0&family=Public+Sans:wght@400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700;8..60,800&display=swap');

:root {
  --tis-paper: #f4f6f7;
  --tis-white: #ffffff;
  --tis-tint: #e8edef;
  --tis-ink: #182126;
  --tis-ink-2: #38464d;
  --tis-muted: #626f76;
  --tis-line: #dce2e5;
  --tis-line-2: #c4ced3;
  --tis-brand: #123c2f;
  --tis-brand-2: #0d3026;
  --tis-brand-3: #08251d;
  --tis-accent: #2f6a51;
  --tis-accent-2: #245640;
  --tis-brand-glass: #e7b84b;
  --tis-neutral-hover: #f1f3f4;
  --tis-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --tis-sans: "Public Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tis-wrap: 1240px;
  /* EN bredd för entitets- och loppytornas innehåll (Oliver 2026-08-07: huvudet
     såg fel ut på stora skärmar). Huvudet, snabbfaktan, hubbarnas listor och
     relaterat-sektionen låg tidigare på 1010, 1010, 1192 och 1192 px, alltså
     fyra olika vänsterkanter på samma sida. Läskolumnen i brödtexten är
     smalare med flit (.profile-article, radlängd före bredd). */
  --tis-entity-width: 1010px;
  --tis-shadow-soft: 0 1px 2px rgba(22, 27, 36, 0.03);
  --tis-shadow-h: 0 2px 10px rgba(22, 27, 36, 0.06);
  --accent: var(--tis-brand);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--tis-paper);
  color: var(--tis-ink);
  font-family: var(--tis-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:where(a, summary):focus-visible {
  outline: 2px solid var(--tis-accent);
  outline-offset: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--tis-serif);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--tis-ink);
  margin: 0;
  line-height: 1.12;
}
.wrap {
  width: 100%;
  max-width: var(--tis-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
/* BAKGRUNDEN går kant i kant, INNEHÅLLET aldrig (Oliver 2026-08-08, granskning på
   27 tum): headern satte `max-width: none` på sin wrap och låg därmed 59 px från
   skärmkanten medan sidans egna sektioner började 684 px in — uppmätt vid 2560 px,
   alltså 625 px isär. Ordmärket och navigationen delar nu EXAKT .wrap-boxen med
   resten av sajten, så vänsterkanten är en och samma på hela sidan. */
.header {
  background: var(--tis-brand);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 18px rgba(8, 19, 36, 0.16);
}
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(32px, 5vw, 72px);
  min-height: 64px;
}
.wordmark {
  font-family: var(--tis-serif);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.015em;
  color: #fff;
  white-space: nowrap;
}
.wordmark em {
  font-style: normal;
  color: var(--tis-brand-glass);
}
.site-nav-shell {
  min-width: 0;
  position: relative;
}
.site-nav-toggle { display: none; }
.site-nav-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}
.site-nav a:hover {
  color: rgba(255, 255, 255, 0.96);
  background: transparent;
}
.site-nav a.active {
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.34);
}
.header a:focus-visible,
.footer a:focus-visible,
.newsbox a:focus-visible { outline-color: var(--tis-brand-glass); }

/* ---------- shared editorial pieces ---------- */
.kicker {
  font-family: var(--tis-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tis-accent);
  margin: 0 0 10px;
  display: inline-block;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tis-muted);
  margin: 0 0 14px;
}
.crumb-link { color: var(--tis-ink-2); }
.crumb-link:hover { color: var(--tis-accent); text-decoration: underline; }
.crumb-sep { color: var(--tis-line-2); }
.crumb-current { color: var(--tis-muted); }
.shead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.shead h2 {
  font-size: 22px;
  font-weight: 800;
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shead .line {
  flex: 1;
  height: 2px;
  background: var(--tis-ink);
  opacity: 0.8;
}
.shead .more {
  font-size: 13px;
  font-weight: 700;
  color: var(--tis-accent);
  white-space: nowrap;
}
.shead .more:hover { text-decoration: underline; }
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--tis-white));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--tis-line));
  color: var(--accent);
  font-family: var(--tis-serif);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  flex: none;
}
.status-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tis-ink-2);
  background: var(--tis-tint);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---------- homepage ---------- */
.front-hero {
  background: var(--tis-white);
  border-bottom: 1px solid var(--tis-line);
  padding: 42px 0 40px;
}
.front-hero .inner { max-width: 760px; }
.front-hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
}
.front-hero p.lead {
  color: var(--tis-ink-2);
  font-size: 17px;
  line-height: 1.65;
  margin: 16px 0 0;
}
.front-section { padding: 34px 0 4px; }
.front-section:last-of-type { padding-bottom: 40px; }
.p-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.p-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: var(--tis-shadow-soft);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.p-card:hover { border-color: var(--tis-line-2); box-shadow: var(--tis-shadow-h); }
.p-card .t { min-width: 0; }
.p-card .name {
  display: block;
  font-family: var(--tis-serif);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.2;
  color: var(--tis-ink);
}
.p-card .role {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tis-muted);
  margin-top: 3px;
}

/* ---------- hub ---------- */
/* HUBBHUVUDET ÄR INGEN EGEN YTA (Oliver 2026-08-07, granskningsrunda 4: "hero-
   sektionen ska inte ha en egen avvikande bakgrund - bygg in den så sidan blir EN
   sammanhållen yta"). En vit remsa med underkant ovanpå sidans pappersfärg delade
   hubben i två ytor och fick huvudet att läsa som en banner i stället för som
   sidans början. Huvudet ärver därför sidans bakgrund och avgränsas bara av luft.

   Avståndet ner till nästa sektion bor HÄR, i huvudets padding-bottom, inte i
   listans padding och inte i filtrets margin. Tre värden på varandra var precis
   vad som gav de uppmätta 50 px mellan huvud och grenfilter på stadshubbarna. */
.hub-head {
  padding: 30px 0 26px;
}
.hub-head .inner { max-width: 760px; }
.hub-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.hub-head p {
  color: var(--tis-ink-2);
  font-size: 16.5px;
  line-height: 1.62;
  margin: 13px 0 0;
}
.plist {
  padding: 30px 0 44px;
  display: grid;
  gap: 10px;
}
.prow {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 10px;
  padding: 12px 18px;
  min-height: 66px;
  box-shadow: var(--tis-shadow-soft);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.prow:hover { border-color: var(--tis-line-2); box-shadow: var(--tis-shadow-h); }
.prow .name {
  font-family: var(--tis-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--tis-ink);
}
.prow .role {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tis-muted);
}

/* ---------- profile page ---------- */
.profile-head {
  background: var(--tis-white);
  border-bottom: 1px solid var(--tis-line);
  padding: 28px 0 32px;
}
.profile-head .inner { max-width: 820px; }
.profile-head h1 { font-size: clamp(27px, 3.8vw, 38px); font-weight: 800; }
.profile-head p.lead {
  color: var(--tis-ink-2);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 14px 0 0;
}
.profile-head .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tis-muted);
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: center;
  padding: 30px 0 20px;
}
.article {
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 12px;
  padding: 30px 34px 34px;
  box-shadow: var(--tis-shadow-soft);
}
.article h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 38px 0 14px;
  line-height: 1.18;
}
.article section:first-child h2 { margin-top: 0; }
.article h3 {
  font-family: var(--tis-sans);
  font-size: 16.5px;
  font-weight: 700;
  margin: 24px 0 8px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.article p {
  margin: 0 0 13px;
  line-height: 1.72;
  color: var(--tis-ink-2);
  font-size: 15.5px;
}
.article ul { margin: 0 0 13px; padding-left: 20px; }
.article li { line-height: 1.66; color: var(--tis-ink-2); font-size: 15.5px; margin-bottom: 5px; }
.article li::marker { color: var(--tis-accent); }

/* ---------- text pages (E-E-A-T, 404) ---------- */
.page-article { padding: 30px 0 50px; }
.page-article .inner {
  max-width: 760px;
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 12px;
  padding: 32px 36px 38px;
  box-shadow: var(--tis-shadow-soft);
}
.page-article h1 { font-size: clamp(27px, 3.8vw, 36px); font-weight: 800; margin: 0 0 16px; }
.page-article h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.page-article h3 { font-family: var(--tis-sans); font-size: 16.5px; font-weight: 700; margin: 20px 0 6px; }
.page-article p { line-height: 1.72; color: var(--tis-ink-2); margin: 0 0 13px; font-size: 15.5px; }
.page-article .lead { font-size: 17px; color: var(--tis-ink-2); }
.page-article ul { margin: 0 0 13px; padding-left: 20px; }
.page-article li { line-height: 1.66; color: var(--tis-ink-2); margin-bottom: 5px; font-size: 15.5px; }
.page-article li::marker { color: var(--tis-accent); }
.page-article a { color: var(--tis-brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page-article a:hover { color: var(--tis-accent); }
.text-link { color: var(--tis-brand); font-weight: 700; text-decoration: underline; }

/* ---------- footer ---------- */
.footer {
  background: var(--tis-brand-2);
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0;
}
.footer-top { padding: 44px 0 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-top .wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 34px;
}
.fbrand .wordmark { color: #fff; font-size: 24px; }
.fbrand .wordmark em { color: var(--tis-brand-glass); }
.fbrand p {
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.55);
}
.fcol-title {
  font-family: var(--tis-sans);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.fcol a {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  padding: 5px 0;
  transition: color 0.15s;
}
.fcol a:hover { color: #fff; }
.footer-bottom { padding: 16px 0 20px; }
.footer-bottom .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .layout { grid-template-columns: 1fr; }
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .header .wrap {
    min-height: 64px;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
  }
  .wordmark { font-size: 23px; }
  .site-nav-shell {
    position: static;
    width: auto;
    margin: 0;
  }
  .site-nav-toggle {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .site-nav-toggle:hover,
  .site-nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
  .site-nav-toggle:focus-visible { outline: 2px solid var(--tis-brand-glass); outline-offset: 3px; }
  .site-nav-toggle .material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-size: 27px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
  .site-nav {
    position: absolute;
    z-index: 51;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 8px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: var(--tis-brand);
    box-shadow: 0 18px 32px rgba(4, 26, 19, .22);
    overflow: visible;
  }
  .site-nav-shell[data-open="true"] .site-nav { display: grid; }
  .site-nav a { padding: 11px 6px; font-size: 15px; }
  .site-nav a + a { border-top: 1px solid rgba(255, 255, 255, .1); }
  .site-nav-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .footer-top .wrap { grid-template-columns: 1fr; gap: 26px; }
  .prow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .prow .role { display: none; }
  .article { padding: 22px 20px 26px; }
  .page-article .inner { padding: 24px 20px 28px; }
}
@media (max-width: 560px) {
  .p-grid { grid-template-columns: 1fr; }
  .front-hero { padding: 30px 0 28px; }
}

/* ---------- f1blogg-inspired profile system ---------- */
/* Hjältens höjd är KOMPRIMERAD (Oliver 2026-08-07: bilden tog för mycket plats
   och lämnade ett stort tomrum ovanför H1). Uppmätt före: 500 px hög hjälte med
   rubriken 131 px ner i bilden. Bilden är kvar, men den ska inte äga hela
   första skärmen — rubriken och inledningen ligger nu högt i vyn. */
.home-brand-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(380px, 27vw, 460px);
  overflow: hidden;
  background: var(--tis-brand-3);
}
.home-brand-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: rgba(4, 26, 19, .26);
  pointer-events: none;
}
.home-brand-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.96) contrast(1.02) brightness(1);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Copyn bär redan `wrap` i markupen och ÄRVER därför sajtens innehållsbredd.
   Den satte tidigare en egen max-width (980) plus egen padding och hade alltså
   en fjärde vänsterkant på startsidan. Hjältebandet och dess bild går fortsatt
   kant i kant — det är bakgrund, inte innehåll. */
.home-brand-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-brand-hero h1,
.home-brand-hero p {
  margin: 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .48);
}
.home-brand-hero h1 {
  max-width: 820px;
  font-family: var(--tis-sans);
  font-size: clamp(48px, 4.9vw, 80px);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-brand-hero .home-brand-hero-lede {
  max-width: 720px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .91);
  font-family: var(--tis-sans);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.5;
}
.home-brand-hero-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 6px;
  background: rgba(18, 60, 47, .92);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .005em;
  box-shadow: 0 10px 28px rgba(4, 20, 27, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.home-brand-hero-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (min-width: 761px) {
  .header .wrap { min-height: 64px; }
  .wordmark { font-size: 28px; }
  .site-nav-shell { margin-left: auto; }
  .site-nav a { font-size: 17px; }
  .home-brand-hero-cta {
    width: auto;
    min-height: 52px;
  }
}
/* Om-sektionen låg i sidans FULLA bredd: rubriken började 112 px från skärmkanten
   vid 2560 px mot sektionernas 684 px, och bilden gick ända ut till 2560 mot
   kortrutnätets 1876. Rutnätet delar nu .wrap-boxen (samma max-width och samma
   24 px padding), så copyns vänsterkant och bildens högerkant ligger på sajtens
   egna innehållskanter. Den beigea bakgrunden går kvar kant i kant. */
.home-about { background: #f7f5f0; border-bottom: 1px solid var(--tis-line); }
.home-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--tis-wrap);
  min-height: 430px;
  margin: 0 auto;
  padding: 0 24px;
}
.home-about-copy {
  width: 100%;
  align-self: center;
  padding: 62px clamp(34px, 3.4vw, 54px) 62px 0;
}
.home-about-copy h2 { font-size: clamp(36px, 3.25vw, 48px); line-height: 1.08; }
.home-about-copy p:not(.kicker) { margin: 18px 0 0; color: var(--tis-ink-2); font-size: 16.5px; line-height: 1.72; }
.home-about-image { position: relative; min-height: 430px; margin: 0; overflow: hidden; background: var(--tis-brand-2); }
.home-about-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.02); }
#sportprofiler { scroll-margin-top: 96px; }

.home-hero {
  background: var(--tis-white);
  border-bottom: 1px solid var(--tis-line);
  padding: 34px 0;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
  gap: 22px;
  align-items: stretch;
}
.newsbox {
  background: var(--tis-brand-3);
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--tis-shadow-h);
}
.newsbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 19px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.newsbox-head p { margin: 0; font-family: var(--tis-serif); font-size: 21px; font-weight: 800; }
.newsbox-head span { color: rgba(255,255,255,0.58); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.newsbox-list { display: grid; }
.newsbox-list a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 67px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.newsbox-list a:last-child { border-bottom: 0; }
.newsbox-list a:hover { background: rgba(255,255,255,0.06); }
.newsbox-number { color: var(--tis-brand-glass); font-family: var(--tis-serif); font-size: 18px; font-weight: 800; }
.newsbox-list small { display: block; color: rgba(255,255,255,0.57); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.newsbox-list strong { display: block; margin-top: 2px; font-family: var(--tis-serif); font-size: 16px; line-height: 1.2; }

.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.profile-card { 
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--tis-shadow-soft);
  transition: box-shadow .16s, transform .16s;
}
.profile-card:hover { box-shadow: var(--tis-shadow-h); transform: translateY(-2px); }
.profile-visual { margin: 0; background: var(--tis-tint); }
.profile-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 24%;
}
.profile-card .profile-visual img { aspect-ratio: 4 / 3; }
.profile-visual-fallback {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--tis-white));
}
.profile-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 17px 18px; }
.card-kicker {
  display: block;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.profile-card-title { display: block; margin: 0; font-family: var(--tis-serif); font-size: 21px; font-weight: 800; line-height: 1.15; }
.profile-card-text { display: block; color: var(--tis-ink-2); font-size: 14px; line-height: 1.55; margin-top: 8px; }
.profile-card-meta { display: block; color: var(--tis-muted); font-size: 11.5px; font-weight: 600; margin-top: auto; padding-top: 11px; }
.profile-card.is-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, 1fr);
  align-items: stretch;
}
.profile-card.is-lead .profile-visual img { aspect-ratio: auto; min-height: 315px; }
.profile-card.is-lead .profile-card-body { display: flex; flex-direction: column; justify-content: center; padding: 30px 32px; }
.profile-card.is-lead .profile-card-title { font-size: clamp(27px, 3.2vw, 38px); }
.profile-card.is-lead .profile-card-text { font-size: 16px; }

/* Hubbfiltret. Raden ligger dold i HTML och avslöjas av hubbens inline-skript, så en
   besökare utan JS får hela listan i stället för en död knapprad. */
.hub-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 6px;
  padding-bottom: 4px;
}
.hub-filter[hidden] { display: none; }
/* LOPPFILTRET är EN kompakt panel, inte tre chiprader (Oliver 2026-08-07,
   granskningsrunda 4). Mönstret kommer från Örebro Race Days förarregister:
   hopfällbara grupper med kryssrutor, flerval inom gruppen. Klassnamnen är TIS
   egna med flit — mönstret porteras, aldrig palett eller klassrymd.

   Panelen äger INGEN egen luft uppåt: avståndet till hubbhuvudet bor i
   .hub-head padding-bottom, så bara ett värde styr fogen. */
/* EN RAD (granskningsrunda 7). Panelen bestod av en rubrikrad ovanpå
   grupprutnätet och var 102 px hög innan något fällts ut; rubrikraden bar bara
   en etikett och en räknare som upprepade listan under. Panelen är nu själv
   raden: grupperna flödar som ett rutnät i den, och Rensa lägger sig sist när
   ett filter är aktivt. Grupperna behåller `1fr`-spalterna, alltså sitter
   avdelarna kvar där de satt. */
.race-sift {
  display: flex;
  align-items: flex-start;
  margin: 0 0 24px;
  border: 1px solid var(--tis-line);
  border-radius: 14px;
  background: var(--tis-white);
  box-shadow: var(--tis-shadow-soft);
}
.race-sift[hidden] { display: none; }
/* Resultatet syns och läses samtidigt upp via aria-live. En förändrad grid är
   inte i sig en tydlig räknare för en seende läsare. */
.race-sift-count {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 12px 16px;
  border-left: 1px solid var(--tis-line);
  color: var(--tis-muted);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* flex-start, inte stretch: en öppen grupp gör panelen några hundra pixlar hög,
   och en knapp som sträcker sig hade centrerat sitt eget "Rensa" mitt i den
   höjden i stället för att stå kvar på grupprubrikernas rad. */
.race-sift-clear {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px solid var(--tis-line);
  background: none;
  padding: 12px 16px;
  color: var(--tis-brand);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.race-sift-clear[hidden] { display: none; }
.race-sift-clear:focus-visible { outline: 2px solid var(--tis-accent); outline-offset: 3px; }
/* En grupp per dimension. Grupperna ligger sida vid sida på desktop och staplas
   på mobil (mobilblocket sist i filen). */
.race-sift-groups {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.race-sift-group { min-width: 0; border-left: 1px solid var(--tis-line); }
.race-sift-group:first-child { border-left: 0; }
.race-sift-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.race-sift-summary::-webkit-details-marker { display: none; }
/* Pilen ritas i CSS så markören blir densamma i alla webbläsare. */
.race-sift-summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--tis-muted);
  border-bottom: 2px solid var(--tis-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}
.race-sift-group[open] > .race-sift-summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.race-sift-summary:focus-visible { outline: 2px solid var(--tis-accent); outline-offset: -2px; }
.race-sift-legend {
  color: var(--tis-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.race-sift-picked {
  min-width: 0;
  overflow: hidden;
  color: var(--tis-brand);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-sift-picked:empty { display: none; }
/* Valen flödar i två spalter när gruppen är bred nog. Tio grenar i en spalt gör
   panelen 440 px hög och tar över sidan — precis det Oliver underkände hos
   chipraderna, bara lodrätt i stället för vågrätt.

   HELA gruppens lista renderas i ett steg sedan granskningsrunda 6, alltså även
   de 18 orter som låg bakom en nästlad "Fler orter"-utfällning. Taket plus egen
   scroll är det som gör den formen möjlig: gruppen kan inte längre skjuta ner
   sidan hur långt som helst, och panelens höjd blir densamma oavsett vilken
   grupp som är öppen. `overscroll-behavior` hindrar att sidan rullar med när
   listan tar slut. */
.race-sift-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr));
  gap: 2px 4px;
  max-height: 264px;
  padding: 0 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.race-sift-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  /* Tryckyta: 38px höjd på en rad som annars är 20px text. */
  min-height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--tis-ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.race-sift-opt:hover { background: var(--tis-neutral-hover); color: var(--tis-ink); }
.race-sift-opt input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--tis-brand);
  cursor: pointer;
}
.race-sift-opt input:focus-visible { outline: 2px solid var(--tis-accent); outline-offset: 2px; }
.race-sift-opt-label { min-width: 0; overflow-wrap: break-word; }
.race-sift-opt-n {
  color: var(--tis-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* `.race-sift-more` fanns här för den nästlade "Fler orter"-utfällningen. Den
   formen är borta (granskningsrunda 6), och reglerna med den — en kvarlämnad
   klassrymd är bara ett sätt att återinföra mönstret av misstag. */
.race-sift-empty {
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px dashed var(--tis-line-2);
  border-radius: 12px;
  color: var(--tis-ink-2);
  font-size: 15px;
}
.race-sift-empty[hidden] { display: none; }
.hub-filter-label {
  margin: 0;
  color: var(--tis-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.hub-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filter-count {
  margin: 0 0 0 auto;
  color: var(--tis-muted);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hub-filter-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tis-line-2);
  border-radius: 999px;
  background: var(--tis-white);
  color: var(--tis-ink-2);
  padding: 10px 16px;
  /* Touch target: 44px, samma golv som sajtens övriga pill-knappar. */
  min-height: 44px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.hub-filter-chip:hover { border-color: var(--accent); color: var(--tis-ink); }
.hub-filter-chip:focus-visible { outline: 2px solid var(--tis-accent); outline-offset: 3px; }
.hub-filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Listan lägger INGEN egen luft mot huvudet: hela avståndet ägs av .hub-head
   (se noten där). Två padding-värden på samma fog driver isär vid varje ändring. */
.hub-listing { padding-top: 0; padding-bottom: 46px; }
/* Loppytorna håller EN bredd: huvudets läskolumn, listan och relaterat-sektionen
   delar --tis-entity-width, så inget block har en egen vänsterkant. Talet är
   innehållsbredd, därför +48 px för .wrap-paddingen (border-box). */
.race-head .inner { max-width: var(--tis-entity-width); }
.race-head .inner > p { max-width: 70ch; }
/* Listan är en SMALSPALT i en full .wrap, och `margin: 0 auto` centrerade den i
   sidan i stället för att ge den huvudets vänsterkant: uppmätt 2026-08-07 låg
   lopplistan 91 px till höger om H1 och 91 px utanför dess högerkant (Olivers
   granskning). Kanten räknas därför på SAMMA containing block som huvudets wrap
   — sidbredden minus wrap-bredden, aldrig minus smalspaltens egen bredd. */
.race-listing {
  max-width: calc(var(--tis-entity-width) + 48px);
  margin-right: auto;
  margin-left: max(0px, calc((100% - var(--tis-wrap)) / 2));
}
/* Relaterat-sektionen låg tidigare kant i kant mot artikeln och i sidans fulla
   bredd. Egen linje, egen luft, samma bredd som huvudet ovanför. */
.race-related {
  max-width: var(--tis-entity-width);
  margin: 54px 0 0;
  padding-top: 38px;
  border-top: 1px solid var(--tis-line);
}
.hub-card-grid { margin-top: 14px; }
/* Klippet finns för att hålla korten i en rad lika höga, inte för att korta
   texten. Hubbtexten bär sedan granskningsrunda 6 tre fakta i stället för ett
   (dimension, distansspann och de mest efterfrågade loppen, 84-196 tecken mot
   14-90 förut), och ett tak på tre rader hade klippt mitt i en mening. Fem rader
   är profilboxarnas egen naturliga maxhöjd på samma rutnät. */
.hub-card-grid .profile-card-text {
  display: -webkit-box;
  min-height: 7.75em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
/* Faktarutan i boxen: sportens krav-slots, samma fält på varje kort. */
.profile-card-facts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--tis-line);
}
.profile-card-fact {
  display: grid;
  grid-template-columns: minmax(78px, 40%) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.profile-card-fact dt {
  color: var(--tis-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.profile-card-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--tis-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.profile-card[hidden] { display: none; }

/* BILDKREDITER
   CC BY och CC BY-SA kraver upphovsperson, licens och kalla vid VARJE visning av
   verket, alltsa aven pa hubbkort och miniatyrer. Raden renderas av
   src/components/PhotoCredit.astro och stilen MASTE bo har: Astros scopade stilar
   nar aldrig en barnkomponents element. Global `a { color: inherit; text-decoration: none }`
   gor dessutom att lankarna behover bade farg och understrykning i viloläget. */
.tis-photo-credit {
  margin: 0;
  color: var(--tis-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tis-photo-credit a {
  color: var(--tis-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.tis-photo-credit a:hover { color: var(--accent); }
.tis-hero-image .tis-photo-credit { margin-top: 0.45rem; font-size: 12.5px; }

/* Ramen bar krediten UTANFOR kortets lank (lankar far inte nastlas) och ar helt
   genomskinlig — kortet behaller sitt eget utseende. Hubbfiltret doljer bade kortet
   och ramen, annars skulle en ensam kreditrad bli kvar under ett bortfiltrerat kort. */
.profile-card-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.profile-card-frame .profile-card { flex: 1 1 auto; }
.profile-card-frame .tis-photo-credit { padding: 6px 2px 0; }
.profile-card-frame[hidden] { display: none; }

.entity-head {
  background: #efede5;
  border-bottom: 1px solid var(--tis-line);
  padding: 28px 0 38px;
}
/* VÄNSTERKANTEN (Oliver 2026-08-08: brödsmulorna, H1 och allt annat började inte
   på samma bredd som ordmärket till vänster). Kolumnerna nedan är SMALARE än den
   .wrap de ligger i, och `margin: 0 auto` centrerade dem då i wrappen i stället
   för att ge dem dess vänsterkant. Uppmätt vid 1440 px: ordmärket 124, kickern,
   H1, leden, snabbfaktan och relaterat 215, artikelkroppen 300, alltså tre olika
   vänsterkanter under en header som bara har en. Kolumnerna ligger REDAN inuti
   wrappens innehållsbox, så vänsterställningen är `margin-left: 0` och inte
   .race-listings max()-räkning (den behövs bara för smalspalter som sitter
   direkt i en fullbredds-container). Bredderna är orörda: raden är ojämn åt
   höger med flit, radlängden i brödtexten styr fortfarande .profile-article. */
.profile-reading-column { max-width: var(--tis-entity-width); margin: 0; }
.entity-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
  gap: 46px;
  align-items: center;
  max-width: var(--tis-entity-width);
  margin: 0;
}
.entity-copy h1 { font-size: clamp(30px, 4.2vw, 45px); font-weight: 800; }
.entity-intro { max-width: 650px; margin: 15px 0 0; color: var(--tis-ink-2); font-size: 16px; line-height: 1.65; }
.tis-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tis-muted); font-size: 12.5px; font-weight: 600; margin: 18px 0 0; }
.tis-byline-author { display: inline-flex; align-items: center; gap: 8px; color: var(--tis-ink); }
.tis-byline-author img { width: 32px; height: 32px; border: 1px solid var(--tis-line); border-radius: 50%; object-fit: cover; }
.tis-byline a { color: var(--tis-brand); text-decoration: underline; text-underline-offset: 3px; }
.tis-hero-image { margin: 0; overflow: hidden; border: 1px solid var(--tis-line); border-radius: 6px; background: var(--tis-paper); box-shadow: var(--tis-shadow-soft); }
.tis-hero-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 24%; }
/* Bildtexten bär bildkrediten och är den enda platsen läsaren ser var bilden
   kommer ifrån, alltså läsbar text och inte en etikett (granskning 2026-08-07). */
.tis-hero-image figcaption { padding: 8px 11px 9px; color: var(--tis-muted); background: var(--tis-paper); font-size: 12px; line-height: 1.45; }
.tis-hero-image figcaption a { color: var(--tis-brand); text-decoration: underline; text-underline-offset: 2px; }
.profile-main { background: var(--tis-white); }
.profile-content-wrap { padding-top: 42px; padding-bottom: 62px; }
.quick-facts {
  max-width: var(--tis-entity-width);
  margin: 28px 0 0;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--tis-line);
  border-radius: 6px;
  padding: 20px 22px 22px;
  box-shadow: var(--tis-shadow-soft);
}
.quick-facts-title { margin: 0 0 11px; color: var(--tis-muted); font-family: var(--tis-sans); font-size: 11px; font-weight: 800; letter-spacing: .065em; line-height: 1.3; text-transform: uppercase; }
.quick-facts dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid var(--tis-line);
}
.quick-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-content: center;
  flex: 1 1 calc(33.333% - 18px);
  min-width: 250px;
  padding: 10px 2px 11px;
  border-bottom: 1px solid var(--tis-line);
}
.quick-fact dt { color: var(--tis-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.quick-fact dd { margin: 0; color: var(--tis-ink); font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.profile-article { max-width: 840px; width: 100%; margin: 0; }
/* LUFTEN KRING SEKTIONSLINJEN (Oliver 2026-08-08: "för mycket margin ovanför varje
   H2"). Avståndet räknades tre gånger: sektionens margin-top 34, dess padding-top 34
   OCH rubrikens egen margin-top 28. Linjen hamnade då 62 px ovanför den rubrik den
   inleder och läste som en avslutning på stycket före i stället. Rubriken tar inget
   eget avstånd när den är sektionens första barn — linjen ska sitta NÄRA sin rubrik
   och luften ligga ovanför linjen. Uppmätt före: 96 px från brödtext till H2. */
.profile-body > .profile-section {
  margin: 36px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--tis-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.profile-body > .profile-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.profile-body h2 { margin: 28px 0 12px; font-size: 24px; line-height: 1.2; }
.profile-body > .profile-section > h2:first-child { margin-top: 0; }
.profile-body h3 { margin: 22px 0 8px; font-family: var(--tis-serif); font-size: 19px; line-height: 1.24; }
.profile-body p { margin: 0 0 16px; color: var(--tis-ink-2); font-size: 17px; line-height: 1.66; }
.profile-body .section-answer { color: var(--tis-ink-2); font-size: 17px; font-weight: 400; line-height: 1.66; }
.profile-subsection {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.profile-career-summary { margin: 34px 0 38px; }
.profile-prose-list { display: grid; gap: 8px; margin: 2px 0 20px; padding-left: 22px; color: var(--tis-ink-2); }
.profile-prose-list li { padding-left: 4px; font-size: 16px; line-height: 1.62; }
.profile-article p a,
.profile-article li a { color: var(--tis-brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.tis-faq { max-width: 800px; margin: 42px 0 0; padding-top: 36px; border-top: 1px solid var(--tis-line); }
.tis-faq.is-flush { margin-top: 0; }
.tis-faq > h2 { margin: 0 0 14px; font-size: 24px; font-weight: 700; line-height: 1.2; }
.tis-faq-list { display: grid; gap: 10px; }
.tis-faq-item { overflow: hidden; border: 1px solid var(--tis-line); border-radius: 6px; background: var(--tis-white); box-shadow: var(--tis-shadow-soft); }
.tis-faq-item[open] { border-color: var(--tis-line-2); box-shadow: var(--tis-shadow-h); }
.tis-faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 56px; padding: 15px 17px; cursor: pointer; list-style: none; color: var(--tis-ink); }
.tis-faq-item summary::-webkit-details-marker { display: none; }
.tis-faq-item summary::marker { content: ''; }
.tis-faq-item summary:focus-visible { outline: 2px solid var(--tis-ink); outline-offset: -3px; }
.tis-faq-item summary > h3 { display: block; margin: 0; color: inherit; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.35; }
.tis-faq-chevron { display: grid; width: 22px; height: 22px; place-items: center; color: var(--tis-muted); transition: transform 160ms ease, color 160ms ease; }
.tis-faq-item summary:hover .tis-faq-chevron { color: var(--tis-accent); }
.tis-faq-item[open] .tis-faq-chevron { transform: rotate(180deg); color: var(--tis-accent); }
.tis-faq-answer { border-top: 1px solid var(--tis-line); padding: 14px 17px 17px; }
.tis-faq-answer p { margin: 0; color: var(--tis-ink-2); font-size: 16px; line-height: 1.6; }

.tis-author-box {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 34px;
  padding: 22px;
  border: 1px solid var(--tis-line);
  border-radius: 6px;
  background: var(--tis-white);
}
.tis-author-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.tis-author-box p { margin: 0; }
.tis-author-eyebrow { margin: 0 0 8px !important; color: var(--tis-muted) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tis-author-name { margin: 0 0 2px !important; color: var(--tis-ink) !important; font-family: var(--tis-serif); font-size: 21px !important; font-weight: 700; }
.tis-author-role { color: var(--tis-muted) !important; font-size: 12px !important; font-weight: 700; }
.tis-author-bio { margin: 9px 0 12px !important; color: var(--tis-ink-2) !important; font-size: 14px !important; line-height: 1.6 !important; }
.tis-author-link { display: inline; padding: 0; border: 0; background: none; color: var(--tis-ink-2); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tis-author-link:hover { color: var(--tis-ink); }
.tis-author-link:focus-visible { outline-color: var(--tis-ink); }

.tis-internal-links { margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--tis-line); }
/* Centrerad titel mellan tva symmetriska linjer. minmax(0, auto) i mittspalten
   later langa sammansatta ord brytas i stallet for att spranga boxen. */
.tis-internal-links-head { display: grid; grid-template-columns: minmax(16px, 1fr) minmax(0, auto) minmax(16px, 1fr); gap: 14px; align-items: center; margin-bottom: 18px; }
.tis-internal-links-title { margin: 0; color: var(--tis-ink); font-family: var(--tis-serif); font-size: 24px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: break-word; }
.tis-internal-links-line { height: 1px; background: var(--tis-line-2); }
.tis-internal-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.editorial-page { background: var(--tis-white); padding: 30px 0 64px; }
.editorial-page-head { max-width: 780px; padding: 14px 0 34px; }
.editorial-page-head h1 { font-size: clamp(34px, 5vw, 52px); }
.editorial-page-head > p:last-child { margin: 16px 0 0; color: var(--tis-ink-2); font-size: 17px; line-height: 1.68; }
.editorial-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.editorial-person-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 24px 26px; border: 0; border-radius: 12px; background: var(--tis-paper); }
.editorial-person-card > img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.editorial-person-role { margin: 0; color: var(--tis-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.editorial-person-card h2 { margin: 0; font-size: 24px; }
.editorial-person-card > p:not(.editorial-person-role) { margin: 4px 0 0; color: var(--tis-ink-2); font-size: 14px; line-height: 1.6; }
/* Hovern byter varken BAKGRUND eller ger UNDERSTRYKNING (Oliver 2026-08-07,
   granskningsrunda 3): en fylld knapp vid hover läste som ett lägesbyte, och
   understrykning hör inte hemma på knappar, kort och widgetar. Kvar är ett
   diskret skifte i sajtens egen accentfärg — på texten och ramen, inte ytan. */
.editorial-person-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 14px; padding: 10px 18px; border: 1px solid var(--tis-accent); border-radius: 999px; color: var(--tis-accent); font-size: 13px; font-weight: 700; transition: color .16s, border-color .16s; }
.editorial-person-link:hover, .editorial-person-link:focus-visible { color: var(--tis-brand); border-color: var(--tis-brand); }
.editorial-profile { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 880px; padding: 22px 0 38px; }
.editorial-profile-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.editorial-profile h1 { font-size: clamp(34px, 5vw, 50px); }
.editorial-profile .lead { max-width: 720px; margin: 14px 0 0; color: var(--tis-ink-2); font-size: 17px; line-height: 1.68; }
.editorial-coverage,
.editorial-assignment { max-width: 840px; padding: 28px 0; border-top: 1px solid var(--tis-line); }
.editorial-coverage h2,
.editorial-assignment h2 { margin: 0 0 12px; font-size: 26px; }
.editorial-coverage p { margin: 0; color: var(--tis-ink-2); font-size: 16px; line-height: 1.72; }
.editorial-assignment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editorial-assignment-grid .profile-card-title { font-size: 19px; }
.adcard, .ad-leader { border: 1px solid var(--tis-line); border-radius: 12px; background: var(--tis-white); }
.adcard { display: grid; gap: 8px; padding: 14px; }
.adcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; }
.adcard strong { font-family: var(--tis-serif); font-size: 19px; }
.adcard b, .ad-leader b { color: var(--tis-accent); }
.adlabel { color: var(--tis-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ad-leader { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin: 0 0 28px; }
.ad-leader span { display: grid; }

@media (max-width: 980px) {
  .home-hero-grid, .entity-head-grid, .profile-card.is-lead { grid-template-columns: 1fr; }
  .profile-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card.is-lead .profile-visual img { aspect-ratio: 16 / 9; min-height: 0; }
  .editorial-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-brand-hero { height: 420px; }
  .home-brand-hero::after { background: rgba(4, 26, 19, .35); }
  .home-brand-hero img { object-position: 50% center; }
  .home-brand-hero-copy { justify-content: center; padding: 24px 20px 26px; }
  .home-brand-hero h1 { max-width: 350px; font-size: clamp(40px, 11vw, 52px); line-height: 1; }
  .home-brand-hero .home-brand-hero-lede { max-width: 340px; margin-top: 16px; font-size: 16px; line-height: 1.5; }
  .home-brand-hero-cta { min-height: 48px; margin-top: 20px; padding: 12px 26px; font-size: 15px; }
  #sportprofiler { scroll-margin-top: 80px; }
  /* På mobil är bilden ett band kant i kant igen, alltså ingen wrap-padding. */
  .home-about-inner { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .home-about-copy { max-width: none; padding: 42px 20px 38px; }
  .home-about-image { min-height: 0; aspect-ratio: 16 / 10; }
  .profile-card-grid { grid-template-columns: 1fr; }
  .entity-head-grid { gap: 22px; }
  .profile-card.is-lead .profile-card-body { padding: 22px 20px; }
  .tis-author-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tis-internal-links-grid { grid-template-columns: 1fr; }
  .editorial-team-grid { grid-template-columns: 1fr; }
  .editorial-profile { grid-template-columns: 1fr; justify-items: start; }
  /* Loppytornas mobilregler bor SIST i filen, efter sina basregler. Se noten
     där: de låg här och var döda på källordning. */
}
@media (max-width: 560px) {
  .home-about-copy h2 { font-size: 31px; }
  .quick-facts { padding: 16px; }
  .quick-facts dl { display: block; }
  .quick-fact { min-width: 0; grid-template-columns: minmax(105px, 38%) minmax(0, 1fr); gap: 13px; }
  .profile-body h2 { font-size: 24px; }
  .tis-faq-item summary { padding: 14px 15px; }
  .tis-faq-answer { padding: 13px 15px 16px; }
  .hub-filter-chips { width: 100%; }
  .hub-filter-chip { white-space: nowrap; }
  .hub-filter-count { width: 100%; margin-left: 0; }
  /* Loppfiltrets mobilregler bor SIST i filen, efter sina basregler. Se noten
     där: race-familjens overrides låg här och var döda på källordning. */
  .shead { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; }
  .shead h2 { flex: 1 1 calc(100% - 92px); }
  .shead .line { display: none; }
  .shead .more { margin-left: auto; padding-top: 4px; }
  /* Grid-varianten behåller sina linjer — 16px-golvet gör dem läsbara även här,
     men rubriken får inte flex-basen ovan (den gäller flex-varianten). */
  .shead:has(.shead-line) h2 { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tis-faq-chevron { transition: none; }
}

/* Preferred source-badge (handskriven, TIS saknar src/styles/global.css) */
.fbrand .tis-gsrc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  background: var(--tis-white);
  color: var(--tis-ink);
  font-size: 13px;
  line-height: 1.35;
  padding: 9px 17px 9px 13px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.fbrand .tis-gsrc:hover,
.fbrand .tis-gsrc:focus-visible {
  /* Bakgrund och textfärg UPPREPAS i hovertillståndet med flit. Pillen är mörk text
     på ljus platta ovanpå sidfotens mörka botten, så en hover-regel som bara ändrar
     opacity låter vilken annan hover-regel som helst (t.ex. ett äldre badge-block i
     samma fil) nollställa bakgrunden, och då står mörk text direkt mot sidfoten.
     Med värdena här kan bakgrunden aldrig försvinna i något av lägena. */
  background: var(--tis-white);
  color: var(--tis-ink);
  opacity: 0.92;
}
.tis-gsrc-g {
  width: 17px;
  height: 17px;
  flex: none;
}
.tis-gsrc-txt strong {
  font-weight: 700;
}
a.tis-gsrc-rail {
  display: block;
  text-decoration: none;
  background: var(--tis-white);
  border: 1px solid var(--tis-line);
  border-radius: 4px;
  padding: 18px 20px;
  box-shadow: var(--tis-shadow-soft);
}
.tis-gsrc-rail-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tis-gsrc-rail-head .tis-gsrc-g {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.tis-gsrc-rail-head strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tis-ink);
  line-height: 1.35;
}
.tis-gsrc-rail-text {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--tis-muted);
  line-height: 1.45;
}
.tis-gsrc-rail:hover .tis-gsrc-rail-head strong {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Loppkalendern (2026-08-06). Egna klasser med tis-oberoende namn: sidorna
   återanvänder sajtens .wrap/.hub-head/.shead-chassi och lägger bara till det
   som är loppspecifikt.
   --------------------------------------------------------------------------- */
.race-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-block: 32px 56px;
}
@media (min-width: 900px) {
  .race-page {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }
}
/* Hjältebilden spänner över båda spalterna och ligger överst i rutnätet. Saknas
   bilden renderas figuren inte alls, så regeln har inget att träffa och raden
   försvinner ur griden i stället för att lämna ett tomrum. */
.race-hero {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line, #dcd9d2);
  border-radius: 10px;
  background: var(--surface, #fbfaf8);
}
@media (min-width: 900px) {
  .race-hero { grid-column: 1 / -1; }
}
.race-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.race-hero figcaption {
  padding: 8px 12px 9px;
  color: var(--muted, #6b6660);
  font-size: 0.78rem;
  line-height: 1.45;
}
.race-facts {
  border: 1px solid var(--line, #dcd9d2);
  border-radius: 10px;
  padding: 18px 20px;
  background: var(--surface, #fbfaf8);
}
.race-facts-title {
  margin: 0 0 14px;
  font-family: var(--tis-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.race-facts dl {
  margin: 0;
  display: grid;
  gap: 12px;
}
.race-fact dt {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b6660);
}
.race-fact dd {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 600;
}
.race-body {
  display: grid;
  gap: 32px;
  min-width: 0;
}
/* VERTIKAL RYTM (Oliver 2026-08-07: "flerlopp-sektionen ... ingen margin").
   Sektionerna låg kant i kant, så en rubrik gick rakt in i boxarna ovanför.
   Avståndet bor på sektionen, inte på rubriken, så en sektion utan .shead får
   samma luft. */
.race-section + .race-section { margin-top: 52px; }
.race-section > .shead { margin-bottom: 20px; }
.race-section h2 {
  margin: 0 0 10px;
}
.race-section > .shead h2 { margin: 0; }
.race-section p {
  margin: 0 0 12px;
  max-width: 68ch;
}
/* SEKTIONSRUBRIKER ÄR VÄNSTERSTÄLLDA (Oliver 2026-08-07, granskning av
   loppkalendern: de centrerade rubrikerna ska stå till vänster som sidans övriga
   rubriker). Linjen ligger efter rubriken och fyller resten av raden, precis som
   .shead .line gör i flex-varianten. Rubrikkolumnen är minmax(0, auto) så långa
   svenska sammansättningar bryts i stället för att spränga raden, och 16px-golvet
   håller linjen synlig ner till 320 px.

   Relaterat-bandet behåller den CENTRERADE formen: det följer fabrikens
   internlänksbox-mönster och känns igen på att det bär en linje FÖRE rubriken. */
.shead:has(.shead-line) {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(16px, 1fr);
  align-items: center;
  gap: 16px;
}
.shead .shead-line {
  height: 1px;
  background: var(--tis-line-2);
}
.shead:has(.shead-line + h2) {
  grid-template-columns: minmax(16px, 1fr) minmax(0, auto) minmax(16px, 1fr);
}
.shead:has(.shead-line + h2) h2 { text-align: center; }
/* LOPPWIDGET (Olivers granskningsrunda 3, 2026-08-07). Ersatte de små
   race-card-korten: strukturen är Örebro Race Days förarwidget (etikett, egen
   rubrik, faktatabell, text) i TIS palett och typografi. MAX TVÅ PER RAD — ytan
   ska rymma en tabell, inte etikettpiller. */
.race-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
.race-widget {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tis-line);
  border-radius: 12px;
  background: var(--tis-white);
  box-shadow: var(--tis-shadow-soft);
}
/* HELA WIDGETEN ÄR KLICKBAR (Oliver 2026-08-07). Ytan hör till samma ENDA ankare
   som redan ligger på loppets namn — inget andra ankare läggs till, så sidan
   behåller en länk per URL och rubriken bär fortfarande hela ankartexten. */
.race-widget-name a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}
.race-widget:hover,
.race-widget:focus-within {
  border-color: var(--accent);
  box-shadow: var(--tis-shadow-h);
}
/* Widgetens egen display-regel slår hidden-attributet, så en bortfiltrerad
   widget hade blivit kvar på skärmen och filtret sett dött ut trots att
   skriptet kör. */
.race-widget[hidden] { display: none; }
.race-widget-media { display: block; background: var(--tis-tint, #f2efe9); }
.race-widget-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.race-widget-body { padding: 20px 22px 22px; }
.race-widget-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.race-widget-name {
  margin: 0;
  font-family: var(--tis-serif);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.014em;
  line-height: 1.18;
}
/* Hovern byter FÄRG, aldrig understrykning (Oliver 2026-08-07: ingen
   text-decoration på kort, knappar och widgetar). */
.race-widget-name a { color: inherit; }
.race-widget-name a:hover,
.race-widget-name a:focus-visible { color: var(--tis-accent); }
.race-widget-facts {
  display: grid;
  margin: 15px 0 0;
  border-top: 1px solid var(--tis-line);
}
.race-widget-fact {
  display: grid;
  grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--tis-line);
}
.race-widget-fact dt {
  color: var(--tis-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.race-widget-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--tis-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* TVÅ klasser i selektorn med flit: `.race-section p { margin: 0 0 12px }` har
   högre specificitet än en enda klass och nollställde marginalen, så texten
   startade exakt på faktatabellens nedersta linje (Oliver 2026-08-07:
   "beskrivningstexten går in i kanten"). En komponent som äger sitt avstånd
   måste vinna kaskaden, inte hoppas på källordningen. */
.race-widget .race-widget-text {
  margin: 18px 0 0;
  color: var(--tis-ink-2);
  font-size: 15.5px;
  line-height: 1.62;
}
.race-hub-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.race-hub-links li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--line, #dcd9d2);
  border-radius: 999px;
  padding: 6px 14px;
}
.race-hub-links a {
  text-decoration: none;
  font-weight: 600;
}
.race-hub-links a:hover { color: var(--tis-accent); }
.race-hub-count {
  font-size: 0.78rem;
  color: var(--muted, #6b6660);
  font-variant-numeric: tabular-nums;
}
/* Faktaraden i hubbhuvudet (ÖRD-förarregistrets dl-mönster). Den låg som tre
   fritt flytande etikett-plus-tal och läste som lös text; Oliver 2026-08-08 ville
   ha den "lite som en tabellaktigt". Den är därför en RUTA med celler: en ram,
   lodräta avdelare mellan cellerna och lika breda kolumner, alltså samma
   tabellspråk som snabbfaktan på loppsidorna. Bredden hålls nere så tre celler
   inte spänner över hela läskolumnen. */
.race-head-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: fit-content;
  max-width: 100%;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid var(--tis-line);
  border-radius: 6px;
  background: var(--tis-white);
  box-shadow: var(--tis-shadow-soft);
}
.race-head-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 22px 12px;
  border-left: 1px solid var(--tis-line);
}
.race-head-facts div:first-child { border-left: 0; }
.race-head-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tis-muted);
}
.race-head-facts dd {
  margin: 0;
  font-family: var(--tis-serif);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Orts- och grenboxarna renderas sedan granskningsrunda 3 i startsidans
   PROFILBOX-familj (.profile-card-grid/.profile-card via HubCard.astro), så den
   egna race-hub-card-familjen finns inte längre. */

/* Entitetshuvudets bild på loppsidan följer copy-höjden (fabriksregeln:
   align stretch + fill, inte fast aspect som ger whitespace vid kort text).
   REGELN FANNS I KOMMENTAREN MEN INTE I KODEN: bilden bar `aspect-ratio: 16/10`
   och blev 330 px hög bredvid ett 176 px högt copyblock, alltså 154 px tomrum
   över och under rubriken (uppmätt 2026-08-08 vid 1920 och 2560 px). Nu stretchar
   raden och bilden FYLLER sin cell, så hjälten är exakt så hög som H1 plus
   inledningen kräver. Golvet finns för lopp med mycket kort inledning. */
.race-entity-hero { margin: 0; }
.race-entity-hero img { aspect-ratio: 16 / 10; object-position: center; }
.entity-head-grid.is-race {
  grid-template-columns: minmax(0, 1fr) clamp(250px, 28%, 310px);
  align-items: stretch;
  gap: 38px;
}
.entity-head-grid.is-race .race-entity-hero {
  display: flex;
  /* Golvet för lopp med mycket kort inledning. Är copyn högre växer bilden med
     den — raden styrs alltid av texten. */
  min-height: 186px;
  flex-direction: column;
}
/* `flex: 1 1 0` är hela knepet: med basis `auto` räknas bildens EGNA höjd in i
   figurens höjd, och då sätter bilden radens höjd precis som förut. Med basis 0
   bidrar den med noll och fyller i stället det utrymme copyn lämnar. */
.entity-head-grid.is-race .race-entity-hero img {
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
}
.entity-head-grid.is-single { grid-template-columns: minmax(0, 1fr); }
/* Blocket måste ligga EFTER sina basregler: en media query bär ingen specificitet.
   Under 980 px staplas huvudet, och då är fyllnadsbeteendet fel — bilden får sin
   egen proportion tillbaka. */
@media (max-width: 980px) {
  .entity-head-grid.is-race { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .entity-head-grid.is-race .race-entity-hero { display: block; min-height: 0; }
  .entity-head-grid.is-race .race-entity-hero img { height: auto; flex: none; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------------
   TABELL- OCH LISTBLOCK i loppsektionerna (kontrakt: RaceTableBlock/
   RaceListBlock i src/utils/race-content.ts). Tabellspråket är sajtens eget:
   samma linjer, versal-etiketter och serif-rubriker som snabbfaktan, inte ett
   nytt ramverk. Breda tabeller scrollar i SIN EGEN behållare — sidan får
   aldrig scrolla i sidled.
   --------------------------------------------------------------------------- */
.race-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--tis-line);
  border-radius: 8px;
  background: var(--tis-white);
}
.race-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.race-table caption {
  padding: 13px 16px 0;
  color: var(--tis-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: left;
}
.race-table th,
.race-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--tis-line);
  text-align: left;
  vertical-align: top;
}
/* Tabellhuvudet är innehåll, inte en etikett: kolumnnamnen är det som gör
   raderna läsbara, och 10,5px versalt med letter-spacing är under den storlek
   där en versal text går att läsa i löpande tempo (oberoende granskning
   2026-08-07). Samma höjning i analystabellen längre ned. */
.race-table thead th {
  color: var(--tis-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.race-table tbody tr:last-child th,
.race-table tbody tr:last-child td { border-bottom: 0; }
.race-table tbody td {
  color: var(--tis-ink-2);
  line-height: 1.5;
}
.race-table tbody td:first-child {
  color: var(--tis-ink);
  font-weight: 700;
}
.race-prose-list { margin: 2px 0 20px; }

/* ---------------------------------------------------------------------------
   ANALYSYTAN (/sportanalyser/, src/components/AnalysisArticle.astro).

   Brödtexten kommer via <slot /> från link-sale-lanens ruttfil. Astro-scopade
   regler når ALDRIG slottat innehåll — elementen bär sidans cid, inte mallens —
   så artikelns styling MÅSTE bo här. Tunga lyftet gör `.profile-body` och
   `.profile-article` redan (rubriker, brödtext, länkar): blocket nedan täcker
   bara det slottad rå-HTML har som profilsidornas projicerade markup saknar.
   --------------------------------------------------------------------------- */
/* Analysartikeln följer sajtens DELADE innehållsbredd, inte profilsidornas
   smalare läskolumn (Oliver 2026-08-07: innehållet ska ha samma bredd och
   vänsterkant som huvudsektionen). Uppmätt före: huvudet 1010 px med vänsterkant
   135, brödtexten 840 px med vänsterkant 220. Profilsidornas .profile-article
   är oförändrad — den har ingen hjälte i entitetsbredd att linjera mot. */
.tis-analysis-article { max-width: var(--tis-entity-width); }
.tis-analysis-body > :first-child { margin-top: 0; }
/* Tabellerna i artikeltexten kommer som rå <table> ur brödtexten och hade
   ingen styling alls — samma tabellspråk som loppsidornas snabbfakta gäller
   här: linjer, versal-etiketter och serif-rubrik. Regeln träffar varje
   analysartikel, alltså också nästa som skrivs. */
.tis-analysis-body table {
  width: 100%;
  margin: 0 0 22px;
  border: 1px solid var(--tis-line);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tis-white);
  overflow: hidden;
  font-size: 14.5px;
}
.tis-analysis-body caption {
  caption-side: top;
  padding: 0 0 9px;
  color: var(--tis-muted);
  font-family: var(--tis-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: left;
}
.tis-analysis-body th,
.tis-analysis-body td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--tis-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.tis-analysis-body thead th {
  color: var(--tis-muted);
  background: var(--tis-paper);
  font-family: var(--tis-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tis-analysis-body tbody tr:last-child th,
.tis-analysis-body tbody tr:last-child td { border-bottom: 0; }
.tis-analysis-body tbody td { color: var(--tis-ink-2); }
.tis-analysis-body tbody td:first-child { color: var(--tis-ink); font-weight: 700; }
.tis-analysis-body ul,
.tis-analysis-body ol {
  display: grid;
  gap: 8px;
  margin: 2px 0 20px;
  padding-left: 22px;
  color: var(--tis-ink-2);
}
.tis-analysis-body li { padding-left: 4px; font-size: 16px; line-height: 1.62; }
/* Hjältebildens beskärning: profilbilderna sitter högt i ramen (ansiktet),
   analysbilderna är motiv och ska centreras. */
.tis-analysis-hero img { object-position: center; }

/* ---------------------------------------------------------------------------
   MOBILA ÖVERSKRIVNINGAR FÖR LOPP- OCH ANALYSYTORNA.

   Blocket ligger SIST i filen med flit. En @media-regel bär ingen extra
   specificitet, så en mobilregel som står FÖRE sin basregel förlorar kaskaden
   på källordning och blir tyst död. Precis det hade hänt: loppwidgetens
   mobilregler låg i sajtens allmänna 760px-block medan basreglerna skrevs
   tvåhundra rader längre ner. Utfallet vid 320 px var två spalter i stället för
   en (uppmätt kortbredd 124 px), bild och text klippta av kortets overflow, och
   faktavärden som bröt ett tecken per rad eftersom etikettkolumnens 92px-golv
   plus gap åt upp hela spalten. Sidans scrollWidth var hela tiden lika med
   viewporten, så ingen overflow-mätning på dokumentnivå kunde se det.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* En loppwidget rymmer inte en faktatabell i halva mobilbredden. */
  .race-widget-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .race-widget-media img { aspect-ratio: 16 / 9; }
  .race-widget-body { padding: 18px 18px 20px; }
  .race-section + .race-section { margin-top: 40px; }
  /* Filtergrupperna staplas: en 230px-spalt per grupp får inte plats bredvid
     varandra, och avdelaren måste då gå vågrätt i stället för lodrätt. Panelens
     enradsform gäller bara desktop av samma skäl: står grupperna under varandra
     hör Rensa under dem, inte i en egen spalt bredvid en enda staplad kolumn. */
  .race-sift { display: block; }
  .race-sift-groups { grid-template-columns: minmax(0, 1fr); }
  .race-sift-group { border-left: 0; border-top: 1px solid var(--tis-line); }
  .race-sift-group:first-child { border-top: 0; }
  .race-sift-count {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--tis-line);
    text-align: center;
  }
  .race-sift-clear {
    display: block;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--tis-line);
    text-align: left;
  }
}
@media (max-width: 560px) {
  /* Etikettkolumnen får inte äta värdet: 92px-golvet gäller från 561 px och upp,
     under det krymper etiketten med spalten. */
  .race-widget-fact { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; }
  /* Tre celler bredvid varandra ryms inte: rutan blir en kolumn och avdelaren
     vågrät. Blocket ligger EFTER basreglerna, annars vore det tyst dött. */
  .race-head-facts { grid-auto-flow: row; width: 100%; }
  .race-head-facts div { padding: 10px 16px 11px; border-left: 0; border-top: 1px solid var(--tis-line); }
  .race-head-facts div:first-child { border-top: 0; }
  .race-table th, .race-table td { padding: 10px 13px; }
  .tis-analysis-body th, .tis-analysis-body td { padding: 9px 11px; }
  .tis-analysis-body table { font-size: 13.5px; }
}