/* ==========================================================================
   Dubbarkivet – stilmall
   Palett: granmörk teal (studiovägg) + bärnsten (VU-mätare) + kall pappersvit
   Typsnitt: Familjen Grotesk (rubrik) · Public Sans (brödtext) · IBM Plex Mono (data)
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper:    #F2F5F4;
  --paper-2:  #E7EDEB;
  --card:     #FFFFFF;
  --card-2:   #F7FAF9;
  --ink:      #0E1F1D;
  --ink-2:    #46605B;
  --ink-3:    #56706B;   /* 4.9:1 mot papper – klarar WCAG AA även för liten text */
  --line:     #DCE5E2;
  --line-2:   #C8D5D1;

  --accent:      #0F5F57;
  --accent-ink:  #0B4842;
  --accent-soft: #DDEDE9;
  --accent-chip: #3F6D67;   /* text på accent-soft, 4.8:1 */
  --accent-glow: rgba(15, 95, 87, .16);

  --signal:      #C1761E;   /* bärnsten – används sparsamt */
  --signal-soft: #F6E7D2;
  --violet:      #6A579B;   /* omdubbning */
  --violet-soft: #E9E4F3;

  --shadow-1: 0 1px 2px rgba(14, 31, 29, .05), 0 2px 8px rgba(14, 31, 29, .04);
  --shadow-2: 0 2px 4px rgba(14, 31, 29, .06), 0 12px 32px rgba(14, 31, 29, .09);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --font-display: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --topbar-h: 4.25rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 82rem;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { color-scheme: dark;
    --paper: #0B1413; --paper-2: #101C1A; --card: #142120; --card-2: #182725;
    --ink: #E7EFEC; --ink-2: #9AB1AB; --ink-3: #6D8480;
    --line: #223330; --line-2: #2E423E;
    --accent: #4FBFAD; --accent-ink: #7FD6C6; --accent-chip: #7FD6C6; --accent-soft: #16332F; --accent-glow: rgba(79,191,173,.18);
    --signal: #E2A055; --signal-soft: #33261A;
    --violet: #A08FD4; --violet-soft: #251F38;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
  }
}

html[data-theme="dark"] { color-scheme: dark;
  --paper: #0B1413; --paper-2: #101C1A; --card: #142120; --card-2: #182725;
  --ink: #E7EFEC; --ink-2: #9AB1AB; --ink-3: #6D8480;
  --line: #223330; --line-2: #2E423E;
  --accent: #4FBFAD; --accent-ink: #7FD6C6; --accent-chip: #7FD6C6; --accent-soft: #16332F; --accent-glow: rgba(79,191,173,.18);
  --signal: #E2A055; --signal-soft: #33261A;
  --violet: #A08FD4; --violet-soft: #251F38;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
}

/* --- Grund ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(.95rem, .92rem + .18vw, 1.02rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); }
p { margin: 0 0 1em; }

a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.mono { font-family: var(--font-mono); font-size: .86em; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.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;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  transition: top .15s;
}
.skip:focus { top: 1rem; }

.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; margin: 0 .1rem; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 52rem; }
.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section-tight { padding-block: clamp(1.25rem, 3vw, 2rem); }

/* ==========================================================================
   Sidhuvud
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: .6rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "brand toggles toggles menu" "search search search search";
  align-items: center;
  gap: .55rem .9rem;
}

@media (min-width: 60rem) {
  .topbar-inner {
    /* Sökfältet får krympa mer än förut: menyn har sex poster och behöver
       utrymmet på skärmar strax över brytpunkten. */
    grid-template-columns: auto minmax(10rem, 34rem) 1fr auto;
    grid-template-areas: "brand search nav toggles";
    padding-block: .7rem;
    gap: 1.25rem;
  }
}

/* Ordermarkeringar */
.brand        { grid-area: brand; }
.searchbar    { grid-area: search; }
.mainnav      { grid-area: nav; display: none; }
.theme-toggle { grid-area: toggles; justify-self: end; }
.menu-toggle  { grid-area: menu; }

@media (min-width: 60rem) {
  .mainnav { display: block; justify-self: end; }
}

/* Vinjett: fem streck i olika höjd – en nivåmätare */
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex: none; }
.brand-mark span { width: 3px; border-radius: 2px; background: var(--accent); }
.brand-mark span:nth-child(1) { height: 40%; }
.brand-mark span:nth-child(2) { height: 78%; }
.brand-mark span:nth-child(3) { height: 100%; background: var(--signal); }
.brand-mark span:nth-child(4) { height: 62%; }
.brand-mark span:nth-child(5) { height: 30%; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-text b { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.025em; }
.brand-text em { font-style: normal; font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 26rem) { .brand-text em { display: none; } }

/* --- Sökfältet: alltid synligt, på varje sida ----------------------------- */

.searchbar { position: relative; display: flex; align-items: center; gap: .4rem;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .3rem .35rem .3rem .85rem; box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

.searchbar-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; }
.searchbar:focus-within .searchbar-icon { stroke: var(--accent); }

.searchbar input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: .96rem; padding: .48rem 0; outline: none;
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchbar-key {
  display: none; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 5px; padding: .1rem .35rem; flex: none;
}
.searchbar:focus-within .searchbar-key { visibility: hidden; }
@media (min-width: 48rem) and (hover: hover) { .searchbar-key { display: inline-block; } }

.searchbar-go {
  flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem;
  background: var(--accent); color: #fff; padding: .48rem 1.05rem; border-radius: 999px;
  transition: background .15s, transform .08s;
}
.searchbar-go:hover { background: var(--accent-ink); }
.searchbar-go:active { transform: scale(.97); }
html[data-theme="dark"] .searchbar-go { color: #08201D; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .searchbar-go { color: #08201D; }
}
@media (max-width: 26rem) { .searchbar-go { padding-inline: .8rem; } }

/* Förslagslista */
.suggest {
  position: absolute; inset-inline: -1px; top: calc(100% + .5rem); z-index: 120;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden; max-height: min(70vh, 30rem); overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest-group { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); padding: .7rem .95rem .3rem; }
.suggest a { display: flex; align-items: center; gap: .7rem; padding: .5rem .95rem; text-decoration: none; color: inherit; }
.suggest a:hover, .suggest a.is-active { background: var(--accent-soft); }
.suggest-thumb { width: 30px; height: 44px; border-radius: 5px; object-fit: cover; background: var(--paper-2); flex: none; }
.suggest-thumb.round { width: 36px; height: 36px; border-radius: 50%; }
.suggest-txt { min-width: 0; }
.suggest-txt b { display: block; font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-txt span { display: block; font-size: .78rem; color: var(--ink-3); }
.suggest-all { display: block; padding: .7rem .95rem; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 600; text-align: center; text-decoration: none; }

/* --- Meny ---------------------------------------------------------------- */

.mainnav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: block; padding: .45rem .8rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-weight: 500; font-size: .93rem; white-space: nowrap;
}
.mainnav a:hover { background: var(--paper-2); color: var(--ink); }
.mainnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-chip, var(--accent-ink)); }

/* Mellan brytpunkten och riktigt breda skärmar är utrymmet knappt med sex
   poster. Stramare luft här i stället för att låta menyn brytas eller
   tränga undan sökfältet. */
@media (min-width: 60rem) and (max-width: 76rem) {
  .mainnav a { padding-inline: .55rem; font-size: .88rem; }
  .mainnav ul { gap: .05rem; }
}

.theme-toggle, .menu-toggle {
  flex: none; width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--card);
  color: var(--ink-2); cursor: pointer; padding: 0;
}
.theme-toggle:hover, .menu-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .i-moon { display: none; }
html[data-theme="dark"] .theme-toggle .i-moon { display: block; }
html[data-theme="dark"] .theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .theme-toggle .i-moon { display: block; }
  html[data-theme="auto"] .theme-toggle .i-sun { display: none; }
}

.menu-toggle span[aria-hidden] { position: relative; width: 15px; height: 1.6px; background: currentColor; border-radius: 2px; }
.menu-toggle span[aria-hidden]::before, .menu-toggle span[aria-hidden]::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .18s, top .18s;
}
.menu-toggle span[aria-hidden]::before { top: -5px; }
.menu-toggle span[aria-hidden]::after { top: 5px; }
.menu-toggle[aria-expanded="true"] span[aria-hidden] { background: transparent; }
.menu-toggle[aria-expanded="true"] span[aria-hidden]::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span[aria-hidden]::after  { top: 0; transform: rotate(-45deg); }

.mobilenav { border-top: 1px solid var(--line); background: var(--card); }
.mobilenav[hidden] { display: none; }
.mobilenav ul { list-style: none; margin: 0; padding: .4rem var(--gutter) .8rem; max-width: var(--maxw); margin-inline: auto; }
.mobilenav a { display: block; padding: .7rem .2rem; text-decoration: none; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.mobilenav li:last-child a { border-bottom: 0; }

/* Menyknappen och den utfällbara menyn hör bara hemma på små skärmar.
   Reglerna står EFTER komponenternas grundstil, och är scopade till .topbar,
   så att de inte kan köras över av en senare regel med samma specificitet. */
@media (min-width: 60rem) {
  .topbar .menu-toggle { display: none; }
  .topbar .mobilenav   { display: none; }
}

/* ==========================================================================
   Startsidan
   ========================================================================== */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--accent-soft) 0%, transparent 58%),
    radial-gradient(90% 70% at 92% 8%, color-mix(in srgb, var(--signal) 14%, transparent) 0%, transparent 55%),
    var(--paper);
}
.hero-inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); }
.hero-eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.hero h1 { max-width: 18ch; margin-bottom: .5rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: var(--ink-2); max-width: 46ch; margin-bottom: 1.6rem; }

.hero-search { display: flex; align-items: center; gap: .5rem; background: var(--card);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .4rem .5rem .4rem 1.15rem;
  box-shadow: var(--shadow-2); max-width: 40rem; }
.hero-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); }
.hero-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; }
.hero-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1.02rem; padding: .6rem 0; outline: none; }
.hero-search button { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; background: var(--accent); color: #fff; padding: .6rem 1.4rem; border-radius: 999px; }
html[data-theme="dark"] .hero-search button { color: #08201D; }

.hero-hints { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; align-items: center; }
.hero-hints span { font-size: .82rem; color: var(--ink-3); margin-right: .2rem; }
.hero-hints a { font-size: .84rem; text-decoration: none; padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--card); }
.hero-hints a:hover { border-color: var(--accent); color: var(--accent-ink); }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 1.5rem; margin-top: 2.5rem; max-width: 44rem; }
@media (min-width: 40rem) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stats div { border-top: 2px solid var(--line-2); padding-top: .6rem; margin-top: 1rem; }
.hero-stats dt { font-size: .76rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.hero-stats dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); }

/* ==========================================================================
   Sektionsrubriker och rutnät
   ========================================================================== */

.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sechead h2 { margin: 0; }
.sechead-sub { margin: .25rem 0 0; color: var(--ink-3); font-size: .9rem; }
.sechead-more { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sechead-more:hover { text-decoration: underline; }

/* Rutnäten använder fasta kolumnantal i stället för auto-fill.
 *
 * Sidorna visar 12 eller 24 poster. Med auto-fill bestämmer skärmbredden
 * antalet kolumner, och blir det 5 eller 7 går talen inte jämnt ut – sista
 * raden blir halvtom. Stegen nedan (2, 3, 4, 6) delar både 12 och 24 jämnt,
 * så sista raden alltid är komplett.
 *
 * Ändrar du PER_PAGE till ett tal som inte delas av dessa, justera stegen. */

.grid-titles {
  display: grid;
  gap: clamp(.85rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 30rem) { .grid-titles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .grid-titles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .grid-titles { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 30rem) { .grid-titles { gap: .85rem; } }

.grid-persons { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* Rutnäts- och flexceller får krympa under sitt innehåll. Utan detta kan en
   enda lång rad text tvinga hela sidan att bli bredare än skärmen. */
.grid-titles > *, .grid-persons > *, .results > *, .filters-body > *,
.filmo > *, .lanes > *, .hitlist > * { min-width: 0; }
.tcard-body, .pcard-body, .lane-main, .filmo-item > * { min-width: 0; }
.fgroup select { max-width: 100%; }

/* Vågrät karusell på små skärmar */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 44vw; gap: .85rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 34rem) { .rail { grid-auto-columns: 26vw; } }
@media (min-width: 60rem) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
          overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* --- Titelkort ------------------------------------------------------------ */

.tcard-link { display: block; text-decoration: none; color: inherit; }
.poster {
  position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1);
  background: linear-gradient(155deg, hsl(var(--h, 175) 22% 88%), hsl(var(--h, 175) 18% 76%));
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard-link:hover .poster { transform: translateY(-4px); box-shadow: var(--shadow-2); }
html[data-theme="dark"] .poster { background: linear-gradient(155deg, hsl(var(--h, 175) 16% 22%), hsl(var(--h, 175) 14% 15%)); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .poster { background: linear-gradient(155deg, hsl(var(--h, 175) 16% 22%), hsl(var(--h, 175) 14% 15%)); }
}
.poster-fallback { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 6vw, 2.2rem); color: rgba(0,0,0,.3); }
html[data-theme="dark"] .poster-fallback { color: rgba(255,255,255,.5); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .poster-fallback { color: rgba(255,255,255,.5); } }
.poster-badge {
  position: absolute; left: .45rem; bottom: .45rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  background: color-mix(in srgb, var(--ink) 78%, transparent); color: #fff;
  backdrop-filter: blur(6px); padding: .2rem .45rem; border-radius: 5px;
}

.tcard-body { display: block; padding-top: .55rem; }
.tcard-title { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.tcard-link:hover .tcard-title { color: var(--accent-ink); }
.tcard-meta { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-3); margin-top: .12rem; }

/* --- Personkort ---------------------------------------------------------- */

.pcard-link { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem .6rem .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pcard-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-1); }

.avatar { position: relative; flex: none; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, hsl(var(--h, 175) 26% 84%), hsl(var(--h, 175) 22% 70%));
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: rgba(0,0,0,.42); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-theme="dark"] .avatar { background: linear-gradient(150deg, hsl(var(--h, 175) 18% 26%), hsl(var(--h, 175) 16% 18%)); color: rgba(255,255,255,.72); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .avatar { background: linear-gradient(150deg, hsl(var(--h, 175) 18% 26%), hsl(var(--h, 175) 16% 18%)); color: rgba(255,255,255,.72); }
}

.pcard-body { min-width: 0; }
.pcard-name { display: block; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-meta { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-3); }
.pcard-note { display: block; font-size: .78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Chips ---------------------------------------------------------------- */

.chip { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500; letter-spacing: .04em; padding: .18rem .45rem;
  border-radius: 5px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.chip-lang { background: var(--accent-soft); color: var(--accent-chip, var(--accent-ink)); }
.chip-signal { background: var(--signal-soft); color: var(--signal); }
.chip-violet { background: var(--violet-soft); color: var(--violet); }

.btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 600; font-size: .92rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: .6rem 1.25rem;
  text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-ink); }
html[data-theme="dark"] .btn { color: #08201D; }
.btn-ghost { background: none; color: var(--ink-2); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }

.empty { text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; border: 1px dashed var(--line-2);
  border-radius: var(--r-xl); background: var(--card-2); }
.empty h3 { margin-bottom: .3rem; }
.empty p { color: var(--ink-2); max-width: 40ch; margin-inline: auto; }

/* ==========================================================================
   Sök- och bläddringssidan
   ========================================================================== */

.searchhead { border-bottom: 1px solid var(--line); background: var(--card); }
.searchhead .wrap { padding-block: clamp(1.25rem, 3vw, 2rem) 0; }
.searchhead h1 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); margin-bottom: .2rem; }
.searchhead p { color: var(--ink-2); font-size: .95rem; }

.tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; margin-top: 1rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: flex; align-items: baseline; gap: .4rem; padding: .65rem .9rem;
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .95rem; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .count { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3); }
.tabs a[aria-current="page"] .count { color: var(--accent); }

.results { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 62rem) {
  .results { grid-template-columns: 15.5rem 1fr; }
  /* Flikar utan filter ska inte lämna en tom spalt efter sig */
  .results.results-full { grid-template-columns: 1fr; }
}

/* Filterpanel: fällbar på mobil, alltid öppen på stor skärm */
/* Fällbar panel. Används både av filtren på söksidan och av fristående
   utfällbara block, t.ex. "Alternativa titlar" på en titelsida. */
.filters, .disclosure { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.filters > summary, .disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.filters > summary::-webkit-details-marker, .disclosure > summary::-webkit-details-marker { display: none; }
.filters > summary::after, .disclosure > summary::after { content: "▾"; color: var(--ink-3); transition: transform .18s; }
.filters[open] > summary::after, .disclosure[open] > summary::after { transform: rotate(180deg); }
.filters > summary:hover, .disclosure > summary:hover { background: var(--card-2); }
.filters-body { padding: 0 1rem 1rem; display: grid; gap: 1.1rem; }

/* På stora skärmar står söksidans filterpanel alltid öppen, så där stängs
   klickytan av. Regeln är scopad till .results – annars slår den även mot
   fristående .disclosure-block, som ska gå att fälla ihop i alla bredder. */
@media (min-width: 62rem) {
  .results .filters { position: sticky; top: calc(var(--topbar-h) + 4.6rem); }
  .results .filters > summary { pointer-events: none; }
  .results .filters > summary::after { display: none; }
}

.fgroup > h2 { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; margin-bottom: .5rem; }
.fgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.fgroup a { display: inline-block; font-size: .84rem; text-decoration: none; padding: .28rem .65rem;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); }
.fgroup a:hover { border-color: var(--accent); color: var(--accent-ink); }
.fgroup a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
html[data-theme="dark"] .fgroup a[aria-current="true"] { color: #08201D; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .fgroup a[aria-current="true"] { color: #08201D; }
}
.fgroup select { width: 100%; font: inherit; font-size: .88rem; padding: .45rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--paper); color: inherit; }

.filters-reset { font-size: .85rem; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.1rem; }
.results-bar .sortform { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--ink-3); }
.results-bar select { font: inherit; font-size: .86rem; padding: .35rem .5rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); }

.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.active-filters a { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; text-decoration: none;
  background: var(--accent-soft); color: var(--accent-chip, var(--accent-ink)); border-radius: 999px; padding: .25rem .5rem .25rem .7rem; }
.active-filters a::after { content: "×"; font-size: 1rem; line-height: 1; opacity: .6; }
.active-filters a:hover::after { opacity: 1; }

/* Träfflista för karaktärer */
.hitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hitlist li a { display: flex; gap: .85rem; align-items: center; padding: .6rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; }
.hitlist li a:hover { border-color: var(--accent); }
.hitlist .thumb { position: relative; flex: none; width: 2.6rem; aspect-ratio: 2/3; border-radius: 6px;
  overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(155deg, hsl(175 20% 88%), hsl(175 16% 78%));
  font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: rgba(0,0,0,.3); }
.hitlist .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-theme="dark"] .hitlist .thumb { background: linear-gradient(155deg, hsl(175 14% 22%), hsl(175 12% 15%)); color: rgba(255,255,255,.5); }
.hitlist .hit-main { min-width: 0; flex: 1; }
.hitlist .hit-main b { display: block; font-weight: 600; }
.hitlist .hit-main span { display: block; font-size: .84rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Sidnumrering
   ========================================================================== */

.pager { margin-top: 2rem; display: grid; gap: .9rem; justify-items: center; }
.pager-count { margin: 0; font-size: .86rem; color: var(--ink-3); }
.pager-count b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

.pager-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  min-width: 2.35rem; height: 2.35rem; padding: 0 .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  font-size: .88rem; font-family: var(--font-mono); text-decoration: none; }
a.pager-btn:hover { border-color: var(--accent); color: var(--accent-chip, var(--accent-ink)); background: var(--accent-soft); }
.pager-btn.is-current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
html[data-theme="dark"] .pager-btn.is-current { color: #08201D; }
.pager-btn.is-off { opacity: .35; }
.pager-gap { display: inline-flex; align-items: center; height: 2.35rem; padding: 0 .2rem; color: var(--ink-3); }

/* På små skärmar: göm sidsiffrorna och behåll fram/tillbaka + hoppa till */
@media (max-width: 34rem) {
  .pager-list li:not(:first-child):not(:last-child) .pager-btn:not(.is-current) { display: none; }
  .pager-list li .pager-btn.is-current { display: inline-flex; }
  .pager-list li:nth-child(2) .pager-btn,
  .pager-list li:nth-last-child(2) .pager-btn { display: inline-flex; }
}

/* Antal per sida – en diskret inställning under pagern, inte en knapprad. */
.perpage {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .9rem; font-size: .84rem; color: var(--ink-3);
}
.perpage select {
  font: inherit; font-size: .84rem; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .2rem 1.5rem .2rem .5rem; cursor: pointer;
}
.perpage select:hover { border-color: var(--accent); }
.perpage select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.perpage button { font: inherit; font-size: .82rem; padding: .25rem .7rem;
  border: 1px solid var(--line-2); background: var(--card); border-radius: var(--r-sm); }

/* ==========================================================================
   Titelsida
   ========================================================================== */

.titlehero { position: relative; border-bottom: 1px solid var(--line);
  background: radial-gradient(90% 120% at 15% 0%, var(--accent-soft) 0%, transparent 60%), var(--paper); }
.titlehero-grid { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); padding-block: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 48rem) { .titlehero-grid { grid-template-columns: minmax(10rem, 15rem) 1fr; } }

.titlehero .poster { max-width: 15rem; }
.titlehero-grid > * { min-width: 0; }
.titlehero h1 { overflow-wrap: anywhere; }

@media (max-width: 47.9375rem) {
  .titlehero-grid { grid-template-columns: 7.5rem 1fr; align-items: start; }
  .titlehero .poster { max-width: none; }
}
@media (max-width: 26rem) {
  .titlehero-grid { grid-template-columns: 1fr; }
  .titlehero .poster { max-width: 8rem; }
}

.titlehero h1 { margin-bottom: .2rem; }
.titlehero-orig { font-size: 1.02rem; color: var(--ink-2); font-style: italic; margin-bottom: .8rem; }
.titlemeta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; font-size: .88rem; color: var(--ink-2); margin-bottom: 1rem; }
.titlemeta .mono { color: var(--ink); font-weight: 600; }
.titlenotes { color: var(--ink-2); max-width: 62ch; }

/* ==========================================================================
   Handlingar och referenser under en post
   ==========================================================================
   Två rader med olika tyngd: det besökaren kan göra här står som knappar,
   och länkarna som leder bort står diskret under. Tidigare låg allt i en
   rad där ögat måste läsa varje etikett för att se vad som var vad. */

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.actions .rattaknapp,
.actions .delaknapp {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .87rem; font-weight: 600;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: .42rem .95rem; cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.actions .rattaknapp::after { content: "✎"; font-weight: 400; opacity: .55; }
.actions .rattaknapp { border-style: dashed; }

.actions .rattaknapp:hover,
.actions .delaknapp:hover,
.actions .delaknapp.is-klar {
  border-color: var(--accent); color: var(--accent-chip, var(--accent-ink));
}
.actions .rattaknapp:focus-visible,
.actions .delaknapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* display: inline-flex ovan har högre specificitet än webbläsarens
   [hidden] { display: none } – attributet måste därför upprepas här. */
.actions .delaknapp[hidden] { display: none; }

/* Referenser: text, inte knappar. De leder bort från sajten. */
.reflinks {
  margin-top: .7rem; font-size: .84rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
}
.reflinks a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.reflinks a:hover { color: var(--accent-chip, var(--accent-ink)); text-decoration-color: currentColor; }
.reflinks a::after { content: "↗"; margin-left: .2em; opacity: .5; font-size: .9em; }

/* Punkt mellan länkarna, men inte före den första. inline-block hindrar
   att understrykningen löper vidare under skiljetecknet. */
.reflinks a + a::before {
  content: "·";
  display: inline-block;
  margin-right: .55rem;
  color: var(--line-2);
  text-decoration: none;
}

/* --- Signaturkomponenten: dubbningen som ett spår ------------------------- */

.lanes { display: grid; gap: .7rem; }

.lane { position: relative; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .15s, box-shadow .2s; }
.lane:hover { box-shadow: var(--shadow-1); }
.lane[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.lane[data-version="original"]   { border-left-color: var(--ink-3); }
.lane[data-version="omdubbning"] { border-left-color: var(--violet); }
.lane[data-version="nymixning"]  { border-left-color: var(--signal); }

.lane > summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem .85rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.lane > summary::-webkit-details-marker { display: none; }
.lane > summary:hover { background: var(--card-2); }

.lane-lang { grid-row: span 2; font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  background: var(--accent-soft); color: var(--accent-chip, var(--accent-ink)); border-radius: var(--r-sm);
  padding: .45rem .5rem; min-width: 2.9rem; text-align: center; }
.lane[data-version="original"] .lane-lang { background: var(--paper-2); color: var(--ink-2); }
.lane[data-version="omdubbning"] .lane-lang { background: var(--violet-soft); color: var(--violet); }

.lane-main { min-width: 0; }
.lane-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.lane-sub { display: block; font-size: .84rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.lane-sub a { color: inherit; }

.lane-right { display: flex; align-items: center; gap: .8rem; }
.lane-chev { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  color: var(--ink-3); transition: transform .18s; }
.lane[open] .lane-chev { transform: rotate(180deg); }
.lane-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Nivåmätaren: ett streck per krediterad roll. Ren data, ingen dekoration. */
.meter { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.meter i { display: block; width: 2px; height: 100%; background: var(--accent); border-radius: 1px; opacity: .32; }
.meter i:nth-child(5n) { opacity: .6; }
.meter i.hi { background: var(--signal); opacity: .95; }
.meter-label { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.lane-count { display: none; }
@media (max-width: 34rem) {
  .meter { display: none; }
  .lane-right .meter-label { display: none; }
  .lane-count { display: inline; }
}

.lane-body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.lane-body > h4 { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; margin: 1.1rem 0 .55rem; }

/* Rollista */
.rolefilter { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.rolefilter input { flex: 1; min-width: 0; font: inherit; font-size: .88rem; padding: .45rem .75rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: inherit; }

.roles { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.roles li { display: grid; grid-template-columns: 1fr; gap: .1rem .9rem; padding: .6rem .8rem; background: var(--card); }
@media (min-width: 34rem) { .roles li { grid-template-columns: 1fr 1fr; align-items: baseline; } }
.roles li[hidden] { display: none; }
/* Urvalsväxeln på karaktärslistan – samma knappar som filterpanelen, men
   fristående ovanför träffarna eftersom listan saknar filterpanel. */
.fgroup-urval { margin-bottom: 1.1rem; }

.role-char { font-weight: 600; }
/* Karaktärslänk: tystare än röstlänken bredvid, som är radens huvudsakliga
   handling. Prickad understrykning läses som "det finns mer att veta" snarare
   än "gå härifrån" – och eftersom bara återkommande figurer länkas blir
   prickarna i sig informationsbärande. */
.role-charlink { color: inherit; text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 55%, transparent);
  text-underline-offset: .22em; }
.role-charlink:hover, .role-charlink:focus-visible {
  color: var(--accent-ink); text-decoration-style: solid; text-decoration-color: currentColor; }
.role-char.is-blank, .filmo-roles b.is-blank { font-weight: 400; font-style: italic; color: var(--ink-3); }
.role-char small { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-3); font-style: italic; }
.role-voice { display: flex; align-items: baseline; gap: .4rem; }
.role-voice a { font-weight: 500; }
.role-voice::before { content: "→"; color: var(--ink-3); flex: none; font-size: .85rem; }
@media (min-width: 34rem) { .role-voice::before { content: ""; margin: 0; } }
.role-note { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); }

/* Team */
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.crew li { display: flex; gap: .5rem; font-size: .9rem; }
.crew dt, .crew .crew-role { color: var(--ink-3); font-size: .84rem; min-width: 8.5rem; flex: none; }

/* Fakta-tabeller (utgåvor, säsonger, alternativa titlar) */
.datatable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.datatable { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 32rem; }
.datatable th, .datatable td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.datatable thead th { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 600; background: var(--card-2); position: sticky; top: 0; }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover { background: var(--card-2); }

/* ==========================================================================
   Personsida
   ========================================================================== */

.personhero { border-bottom: 1px solid var(--line);
  background: radial-gradient(80% 120% at 85% 0%, var(--accent-soft) 0%, transparent 62%), var(--paper); }
.personhero-grid { display: grid; gap: clamp(1rem, 3vw, 2rem); padding-block: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 40rem) { .personhero-grid { grid-template-columns: auto 1fr; } }
.personhero .avatar { width: clamp(5rem, 18vw, 8.5rem); height: clamp(5rem, 18vw, 8.5rem); font-size: 2rem; box-shadow: var(--shadow-1); }
.personhero h1 { margin-bottom: .15rem; }

.statline { display: flex; flex-wrap: wrap; gap: .1rem 2rem; margin: 1.2rem 0 0; }
.statline div { border-top: 2px solid var(--line-2); padding-top: .45rem; min-width: 5.5rem; }
.statline dt { font-size: .74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.statline dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; }

/* Filmografi grupperad per titel */
.filmo { display: grid; gap: .6rem; }
.filmo-item { display: grid; grid-template-columns: 3rem 1fr; gap: .85rem; padding: .65rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 40rem) { .filmo-item { grid-template-columns: 3.5rem 1fr; } }
.filmo-item:hover { border-color: var(--line-2); }
.filmo-poster { width: 100%; border-radius: 6px; }
.filmo-poster .poster-fallback { font-size: 1rem; }
.filmo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.filmo-head a { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; text-decoration: none; color: inherit; }
.filmo-head a:hover { color: var(--accent-ink); }
.filmo-head .mono { color: var(--ink-3); }
.filmo-roles { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; }
.filmo-roles li { font-size: .88rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
/* Notrad under en titel i filmografin: "Krediterad som …", "Ingen röst
   registrerad ännu". Samma storlek som rollraderna den ersätter. */
.filmo-meta { font-size: .88rem; color: var(--ink-2); margin: .35rem 0 0; }
.filmo-meta.muted { color: var(--ink-3); }
.filmo-roles b { font-weight: 600; }
.filmo-roles .mono { color: var(--ink-3); }

/* ==========================================================================
   Formulär
   ========================================================================== */

.formular { display: grid; gap: 1.25rem; max-width: 34rem; margin-top: 2rem; }

.falt { display: grid; gap: .35rem; }
.falt > label { font-weight: 600; font-size: .93rem; }

.falt input[type="text"],
.falt input[type="email"],
.falt select,
.falt textarea {
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: .65rem .85rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.falt textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.falt input:focus, .falt select:focus, .falt textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow);
}
.falt input[readonly] { background: var(--paper-2); color: var(--ink-2); }

.falt-hjalp { margin: 0; font-size: .85rem; color: var(--ink-3); }
.falt-fel   { margin: 0; font-size: .87rem; font-weight: 500; color: #B3261E; }
html[data-theme="dark"] .falt-fel { color: #F2B8B5; }

.falt.har-fel input, .falt.har-fel select, .falt.har-fel textarea { border-color: #B3261E; }

/* Honungsfälla – dold för besökare, synlig för robotar som läser koden */
.honungsfalla {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.notis { border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.notis h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.notis p:last-child { margin-bottom: 0; }
.notis-klar { background: var(--accent-soft); color: var(--accent-ink);
              border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.notis-info { background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
.notis-info b { color: var(--ink); }
.notis-info a { font-weight: 600; }

.notis-fel  { background: #FDECEA; color: #7A1C16; border: 1px solid #F3C0BB; }
html[data-theme="dark"] .notis-fel { background: #2C1614; color: #F2B8B5; border-color: #5C2A26; }

/* ==========================================================================
   Sidfot
   ========================================================================== */

.sitefoot { margin-top: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--line); background: var(--card); }
.sitefoot-inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(2rem, 5vw, 3rem) var(--gutter); display: grid; gap: 1.75rem; }
.sitefoot-inner > * { min-width: 0; }

.foot-brand { display: flex; gap: .7rem; align-items: flex-start; }
.foot-brand p { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 34ch; }
.foot-brand b { font-family: var(--font-display); color: var(--ink); }

.foot-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 1.5rem; margin: 0; }
.foot-stats div { border-top: 2px solid var(--line-2); padding-top: .4rem; margin-top: .8rem; }
.foot-stats dt { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.foot-stats dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }

.foot-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.foot-links a { font-size: .9rem; text-decoration: none; color: var(--ink-2); }
.foot-links a:hover { color: var(--accent-ink); text-decoration: underline; }

.foot-fine { margin: 0; font-size: .8rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* Responsiva överstyrningar sist, efter komponenternas grundstil.
   De namngivna ytorna tilldelas ENBART i det breddintervall där
   grid-template-areas faktiskt definierar dem – annars pekar barnen på
   ytor som inte finns och hamnar ovanpå varandra. Under 52rem staplas
   de i dokumentordning av sig själva, vilket är precis vad vi vill. */
@media (min-width: 34rem) {
  .foot-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 52rem) {
  .sitefoot-inner {
    grid-template-columns: 1.4fr 2fr;
    grid-template-areas: "brand stats" "links links" "fine fine";
  }
  .foot-brand { grid-area: brand; }
  .foot-stats { grid-area: stats; }
  .foot-links { grid-area: links; }
  .foot-fine  { grid-area: fine; }
}

/* ==========================================================================
   Platshållarfärger
   ==========================================================================
   Nyansen härleds ur namnet i PHP och sätts som en klass, så att sidorna
   slipper inline-stilar. Tolv steg räcker gott för att samma titel eller
   person alltid ska kännas igen på sin färg. */

.hue-0  { --h:   8; }
.hue-1  { --h:  38; }
.hue-2  { --h:  68; }
.hue-3  { --h:  98; }
.hue-4  { --h: 128; }
.hue-5  { --h: 158; }
.hue-6  { --h: 188; }
.hue-7  { --h: 218; }
.hue-8  { --h: 248; }
.hue-9  { --h: 278; }
.hue-10 { --h: 308; }
.hue-11 { --h: 338; }

/* ==========================================================================
   Småklasser som ersätter inline-stilar
   ========================================================================== */

.muted      { color: var(--ink-3); }
.is-normal  { font-weight: 400; }
.is-flush   { margin: 0; }

/* Spårrad utan utfällning – används på startsidan och studiosidan, där raden
   bara länkar vidare i stället för att öppna en rollista. */
.lane-static { cursor: auto; }
.lane-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .5rem .85rem; padding: .8rem 1rem;
}
a.lane-title { text-decoration: none; color: inherit; }
a.lane-title:hover { color: var(--accent-ink); }
.lane-title .mono { color: var(--ink-3); }

.lane-note   { margin: 0; color: var(--ink-2); font-size: .9rem; }
.lane-empty  { margin: 0; color: var(--ink-3); font-size: .9rem; }
.lane-more   { margin: 1.1rem 0 0; font-size: .88rem; }
.lane-status { text-transform: none; letter-spacing: 0; }

.crew .mono          { color: var(--ink-3); }
.datatable .mono.muted { color: var(--ink-3); }
.datatable-wrap.is-bare { border: 0; }
.datatable.is-narrow    { min-width: 0; }

.faq { display: grid; gap: .5rem; }
.faq > .disclosure > summary { font-family: var(--font-display); font-size: 1.02rem; }
.faq-svar { padding: 0 1rem 1rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.faq-svar p { margin: 1rem 0 0; }

.noscript-btn   { margin-top: .5rem; }
.sortform-center { justify-content: center; margin-top: 1.25rem; }

/* ==========================================================================
   Diverse
   ========================================================================== */

.breadcrumb { font-size: .84rem; color: var(--ink-3); padding-top: 1rem; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 .35rem; opacity: .5; }

/**
 * Textsidor.
 *
 * Bredden styrs av .wrap-narrow, precis som på alla andra sidor – annars
 * hamnar innehållet olika långt in beroende på vilken sida man är på.
 * .prose begränsar bara radlängden på löptexten, så att rubriker och
 * brödtext ändå börjar vid samma vänsterkant.
 */
.prose > p,
.prose > ul,
.prose > ol { max-width: 62ch; }
.prose h2 { margin-top: 2rem; }

/* ==========================================================================
   Prestanda
   ========================================================================== */

/* Långa listor: låt webbläsaren hoppa över layout och målning av det som
   ligger utanför skärmen. contain-intrinsic-size ger en uppskattad höjd så
   att rullningslisten inte hoppar. */
@supports (content-visibility: auto) {
  /**
   * content-visibility: auto medför paint containment, som klipper allt
   * som ritas utanför elementets egen box – även när elementet syns.
   *
   * Kort som lyfts vid hover får därför toppen avklippt, så de är
   * undantagna. Vinsten för små kort är ändå marginell.
   */
  .filmo > .filmo-item,
  .hitlist > li,
  .lanes > .lane {
    content-visibility: auto;
  }
  .filmo > .filmo-item     { contain-intrinsic-size: auto 7rem; }
  .hitlist > li            { contain-intrinsic-size: auto 4.5rem; }
  .lanes > .lane           { contain-intrinsic-size: auto 4.5rem; }
}

/* Bilder får aldrig ändra sidans höjd när de laddas */
.poster img, .avatar img, .hitlist .thumb img { display: block; }

/* ==========================================================================
   Lightbox för omslagsbilder
   ========================================================================== */

/**
 * Miniatyren i tabellen som öppnar lightboxen.
 *
 * display:inline-block behövs: en <a> är inline, och eftersom img är
 * display:block (regeln längst upp i filen) kollapsar annars länkens
 * egen box till någon enstaka pixel. Bilden syns visserligen ändå, men
 * fokusringen ritas som en strimma och träffytan blir opålitlig.
 *
 * min-width är inte kosmetik utan nödvändigt. Den globala regeln
 * img { max-width: 100% } mäts mot tabellcellen, och när .datatable
 * pressas mot sin min-width på smala skärmar svälter cellen – utan
 * min-width krymper omslaget till 19 px vid 700 px skärmbredd och till
 * en enda pixel under 520 px. min-width gör 30 px till kolumnens
 * minsta innehållsbredd, så tabellayouten måste ge plats.
 *
 * Lyftet vid hover följer samma språk som titelkorten.
 */
.lightbox-oppna { display: inline-block; line-height: 0; border-radius: 5px; }
.lightbox-oppna img { min-width: 30px; transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
.lightbox-oppna:hover img { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .lightbox-oppna img { transition: none; }
  .lightbox-oppna:hover img { transform: none; }
}

/**
 * Bygger på <dialog>, så webbläsaren sköter fokusfällan, Esc och att
 * bakgrunden blir inert. Basregeln sätter display:grid, vilket skulle
 * slå ut webbläsarens egen display:none på en stängd dialog – därför
 * regeln för :not([open]) direkt efter.
 */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: clamp(1rem, 5vw, 3rem);
  border: 0; background: transparent; color: inherit;
  display: grid; place-items: center; overflow: hidden;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop {
  background: rgba(9, 20, 19, .8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.lightbox-fig { margin: 0; display: grid; gap: .85rem; justify-items: center; max-width: min(92vw, 34rem); }
.lightbox-fig img {
  max-width: 100%; max-height: 74vh; width: auto; height: auto;
  border-radius: var(--r-md); box-shadow: var(--shadow-2); background: var(--card-2);
}
/* Vit bildtext mot den mörka bakdukan, i båda temana. */
.lightbox-fig figcaption {
  color: #F2F5F4; font-size: .9rem; text-align: center; text-wrap: balance;
}

.lightbox-stang, .lightbox-bla {
  position: absolute; display: grid; place-items: center;
  border: 1px solid rgba(242, 245, 244, .22); border-radius: 999px;
  background: rgba(9, 20, 19, .55); color: #F2F5F4;
  cursor: pointer; line-height: 1; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox-stang:hover, .lightbox-bla:hover { background: rgba(9, 20, 19, .8); border-color: rgba(242, 245, 244, .45); }
.lightbox-stang { top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
.lightbox-bla   { top: 50%; translate: 0 -50%; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; }
.lightbox-bla.is-forra { left: .5rem; }
.lightbox-bla.is-nasta { right: .5rem; }

/* På smala skärmar tar pilarna över bilden – lägg dem under den i stället. */
@media (max-width: 30rem) {
  .lightbox-bla { top: auto; bottom: .9rem; translate: none; }
  .lightbox-bla.is-forra { left: 25%; }
  .lightbox-bla.is-nasta { right: 25%; }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-upp .2s cubic-bezier(.2, .7, .3, 1); }
  .lightbox[open]::backdrop { animation: lightbox-in .2s ease-out; }
}
@keyframes lightbox-upp { from { opacity: 0; scale: .97; } }
@keyframes lightbox-in  { from { opacity: 0; } }

@media print {
  .topbar, .sitefoot, .pager, .results .filters, .theme-toggle { display: none !important; }
  body { background: #fff; }
}