/* UGC-guiden — stilmall.
   Ett snitt, två vikter: Poppins 400 för löptext, 700 för allt som bär
   struktur. Accenten är terrakotta med guld som andrafärg — inte Helsamas
   korall, det är ett annat varumärke, och inte den elektriska indigo som låg
   här till 2026-08-14. Läsaren är i huvudsak en kvinnlig kreatör; indigon läste
   maskulint och tekniskt, och den slog dessutom mot de varma hudtonerna i
   kreatörernas eget material.

   Neutralerna lutar numera VARMT (åt accenten, som förut) — en kall grå bredvid
   terrakottan får den att se lerig ut. Ingen rosa: mjukheten ska komma från
   form och värme, inte från att sajten bytt genus.

   Fonten serveras från egen origin. Google Fonts-CDN skickar besökarens IP
   till Google, och sajten har inloggade svenska användare. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #ffffff;
  --paper-2: #faf6f4;
  --card: #ffffff;
  --ink: #1b1417;
  --ink-2: #55484c;
  /* Mäts mot BANDET (--paper-2), inte mot vitt: metadata i .84rem ligger oftare
     på band än på papper, och #7e6e72 gav 4,48:1 där — en hundradel under AA. */
  --ink-3: #78686c;
  --line: #ede3df;
  --accent: #c0492b;
  --accent-ink: #ffffff;
  --accent-deep: #8f3319;
  --accent-soft: #fdefe9;
  /* Guldet är delat precis som korallen var: --hot fyller, --hot-ink bär text.
     #f0a93f ger 2,2:1 mot vitt och får ALDRIG sättas som color på läsbar text. */
  --hot: #f0a93f;
  --hot-ink: #8a5510;
  --ok: #1f7a57;
  --ok-soft: #e3f4ec;
  --warn-soft: #fcf0dc;

  /* Logotypen har egna tokens. Märket är ett varumärke, inte ett UI-element:
     det ska se likadant ut oavsett läge, och blocket måste bära både ringen och
     pricken (3:1 vardera). Räknade man dem ur --accent bröts pricken varje gång
     accenten justerades — guld på terrakotta ger 2,5:1, guld på oxblod 3,9:1. */
  --logo-block: #8f3319;
  --logo-ring: #ffffff;
  --logo-dot: #f0a93f;

  --wrap: 1160px;
  /* Artikelns textmått. Rubrik, ingress, byline, brödtext och taggar delar den
     här bredden — annars centreras varje block för sig i .wrap och kolumnerna
     hamnar aldrig i linje med varandra.
     36rem, inte 44: Poppins är bredare per tecken än serifen som låg här förut,
     och 44rem gav 85+ tecken per rad. */
  --measure: 36rem;
  /* 20/12 i stället för 14/8. Kortet är sajtens vanligaste form — det är där
     rundningen faktiskt känns. Knappar och chips ligger redan på 999px.
     Mer än så och korten börjar läsa som app-widgets i stället för redaktion. */
  --radius: 20px;
  --radius-sm: 12px;
  /* Skuggorna är bruna, inte svarta. En neutral skugga under ett varmt kort
     lägger en grå hinna i kanten; samma opacitet i brunt läser som ljus. */
  --shadow: 0 1px 2px rgba(74, 42, 30, .05), 0 10px 30px rgba(74, 42, 30, .07);
  --shadow-lift: 0 2px 8px rgba(74, 42, 30, .07), 0 22px 50px rgba(74, 42, 30, .13);

  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14100f;
    --paper-2: #1c1715;
    --card: #1d1817;
    --ink: #f7f1ee;
    --ink-2: #c3b4af;
    --ink-3: #9c8c87;
    --line: #2e2724;
    --accent: #f58a63;
    --accent-ink: #2a0f06;
    --accent-deep: #ffa98a;
    --accent-soft: #34211b;
    --hot: #f5be6a;
    --hot-ink: #f7ce8e;
    --ok: #4ecfa0;
    --ok-soft: #12291f;
    --warn-soft: #2e2113;
    /* Blocket ljusnar ett steg så märket inte blir en mörk fläck på mörk sida,
       men behåller ring och prick över 3:1. */
    --logo-block: #c0492b;
    --logo-ring: #fff7f2;
    --logo-dot: #ffc15e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5), 0 22px 50px rgba(0, 0, 0, .45);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* 16,5 mot Inters 17: Poppins har större x-höjd och tar mer plats optiskt.
     Radavståndet upp i gengäld. */
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Poppins är ritad luftig. Utan den här spärren ser rubrikerna utsträckta ut —
   det är den vanligaste anledningen till att Poppins ser amatörmässig ut stort. */
h1, h2, h3 { line-height: 1.15; letter-spacing: -.028em; margin: 0 0 .4em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.07; letter-spacing: -.035em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.12rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- huvud ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head__inner { display: flex; align-items: center; gap: 1.6rem; min-height: 66px; }

/* Märket är en lins med en inspelningsprick i. Ordbilden upprepar samma prick
   i stället för bindestrecket, så de två delarna hör ihop även när de används
   var för sig — märket ensamt som favicon och avatar, ordbilden ensam i e-post. */
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.logo__mark { flex: none; width: 30px; height: 30px; }
.logo__word {
  color: var(--ink); font-weight: 700; font-size: 1.24rem; letter-spacing: -.045em;
  line-height: 1; display: inline-flex; align-items: center;
}
.logo__dot {
  width: .26em; height: .26em; margin-inline: .1em;
  border-radius: 50%; background: var(--hot); flex: none;
}
.logo--foot .logo__mark { width: 26px; height: 26px; }
.logo--foot .logo__word { font-size: 1.1rem; }

.nav { display: flex; gap: 1.35rem; margin-right: auto; font-size: .95rem; font-weight: 400; }
/* nowrap: en menypost som bryts på två rader drar med sig understrykningen och
   ser trasig ut. Hellre en meny som är för bred, för då syns problemet direkt. */
.nav a { text-decoration: none; color: var(--ink-2); padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.site-head__account { display: flex; align-items: center; gap: 1rem; }
.nav__edit {
  font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: .3rem .7rem; border-radius: 999px; background: var(--warn-soft); color: var(--hot-ink);
}
.nav__edit[aria-current="page"] { background: var(--hot); color: var(--paper); }
.nav__buy { color: var(--accent-deep); background: var(--accent-soft); }
/* Säljarens ingång. Samma form som köparens, men konturerad: båda är dörrar,
   bara den ena betalar. Utan pillerformen låg "För kreatörer" som lös text
   intill en fylld knapp och bröts dessutom på två rader. */
/* De två dörrarna är ETT element, inte två piller bredvid varandra.
   Skillnaden är hela poängen: två fristående knappar intill varandra ser ut
   som ett misstag, en delad kontroll med en skiljelinje ser ut som ett val. */
.nav__dorrar {
  display: inline-flex; align-items: stretch; margin-left: .7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px; overflow: hidden;
}
/* Båda halvorna delar mått och typografi. Bara bakgrunden skiljer dem åt. */
.nav__dorrar > a {
  display: inline-flex; align-items: center;
  font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: .42rem .95rem; border: 0; border-radius: 0;
  transition: background-color .15s, color .15s;
}
/* Skiljelinjen mellan halvorna, i samma ton som ramen. */
.nav__dorrar .nav__buy { border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
/* .nav a ger en understrykning som inte hör hemma inuti kontrollen. */
.nav .nav__dorrar > a { border-bottom: 0; }

.nav__sell { color: var(--ink-2); background: transparent; }
.nav__sell:hover { color: var(--ink); background: var(--paper-2); }
.nav__sell[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

.nav__buy:hover { background: var(--accent); color: var(--accent-ink); }
.nav__buy[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

.nav__out { margin: 0; display: flex; }
.nav__out .btn { padding-inline: 0; font-size: .85rem; }
.nav__me { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; font-size: .92rem; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 999px; transition: transform .2s, opacity .2s; }

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; margin-left: auto; }
  .site-head__account { order: 2; }
  .nav {
    order: 4; width: 100%; flex-direction: column; gap: 0;
    margin: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  /* Hopfälld meny är en radlista. Paret upplöses och blir två rader. */
  .nav__dorrar { display: contents; border: 0; }
  /* Hopfälld meny är en radlista, inte en knapprad. Pillret blir en rad. */
  .nav__sell {
    align-self: stretch; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--line); padding: .8rem 0; background: transparent;
    /* Ärver menyns typografi, annars blir raden tre pixlar lägre än de andra. */
    font-size: inherit; font-weight: inherit; color: var(--ink-2);
  }
  .nav__sell[aria-current="page"] { background: transparent; }
  .nav__buy {
    align-self: stretch; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--line); padding: .8rem 0; background: transparent;
    font-size: inherit; font-weight: inherit; color: var(--accent-deep);
  }
  .nav__buy[aria-current="page"] { background: transparent; color: var(--accent-deep); }
  .site-head__inner { flex-wrap: wrap; gap: .8rem; padding-bottom: 0; }
  .site-head--open .nav { max-height: 60vh; padding-bottom: .6rem; }
  .site-head--open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-head--open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-head--open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- framsidan ---------- */

/* Tidningshuvud, inte pitch. Raden är avsiktligt låg: den ska tala om vad
   sajten är och vilken dag det är, sedan lämna plats åt ledaren. H1:an bär
   fortfarande sökorden men sätts i brödtextstorlek — på en framsida är det
   ledarrubriken som ska vara sidans största typ, inte husrubriken. */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.masthead__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; padding: .85rem 0;
}
.masthead__title {
  margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.35; color: var(--ink);
}
.masthead__meta {
  margin: 0; font-size: .84rem; color: var(--ink-3);
  display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.masthead__meta a { text-decoration: none; color: var(--ink-3); }
.masthead__meta a:hover { color: var(--accent); }
.masthead__meta time::first-letter { text-transform: uppercase; }
.masthead__sep { color: var(--line); }

/* Namngivna ytor, inte bara kolumner. Skälet är mobilen: när gridet faller
   till en kolumn ska spalten komma direkt efter ledaren och INTE efter hela
   huvudspalten. Låg den sist hamnade plattformsradarn 2372 px ned på en sida
   som var 4302 px hög, och då finns den i praktiken inte. */
.front {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas: "lead rail" "seconds rail";
  gap: 2.5rem; align-items: start;
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem) 0 clamp(2rem, 1.6rem + 2vw, 3.2rem);
}
.front__main { grid-area: lead; display: grid; gap: 1.6rem; min-width: 0; }
/* Sekundärerna ligger som liggande kort under ledaren, inte som ett rutnät
   bredvid den. Två skäl: ett ensamt kort i en tvåkolumnare lämnar ett tomt hål,
   och ett stående kort i full spaltbredd får en större bild än ledaren — då
   finns ingen ledare längre, bara tre jämnstora saker. */
.front__seconds { grid-area: seconds; display: grid; gap: 1.1rem; min-width: 0; }
.front__seconds { margin-top: -.9rem; }
.front__seconds .card { flex-direction: row; align-items: center; }
/* Bilden får inte sträckas till kortets höjd: då beskar object-fit: cover
   omslagets sidor, och omslagen bär en rad text längst till vänster
   (scripts/make_omslag.py). Hel bild i 16:10, infälld i kortet. */
.front__seconds .card__media {
  flex: 0 0 15rem; aspect-ratio: 16 / 10; align-self: center;
  margin: .9rem 0 .9rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.front__seconds .card__title { font-size: 1.18rem; }
@media (max-width: 620px) {
  .front__seconds .card { flex-direction: column; align-items: stretch; }
  .front__seconds .card__media { flex: none; align-self: stretch; margin: 0; border: 0; border-radius: 0; }
}

/* Ledaren är sidans enda stora sak. Utan den här höjningen ser framsidan ut
   som en jämn kortmatta, och då finns ingen ingång — läsaren måste jämföra
   fyra rubriker i stället för att få en serverad. */
.front__main > .card--featured .card__title { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); }
.front__main > .card--featured .card__dek { font-size: 1.05rem; }

.front__rail { grid-area: rail; display: grid; gap: 1.8rem; position: sticky; top: 82px; }

.rail { display: grid; gap: .55rem; }
.rail__head {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink); line-height: 1;
  padding-bottom: .55rem; border-bottom: 2px solid var(--ink);
}
.rail__note { margin: 0; font-size: .82rem; color: var(--ink-3); }
.rail__more { font-size: .84rem; font-weight: 700; color: var(--accent); text-decoration: none; }

.newslist { list-style: none; margin: 0; padding: 0; display: grid; }
.newslist__item {
  display: flex; align-items: baseline; gap: .8rem; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.newslist__link { text-decoration: none; display: grid; gap: .12rem; min-width: 0; }
.newslist__kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.newslist__title { font-size: .93rem; font-weight: 700; line-height: 1.32; letter-spacing: -.012em; }
.newslist__link:hover .newslist__title { color: var(--accent); }
.newslist__time {
  font-size: .78rem; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Omvärldsspalten. Länkarna lämnar sajten, så källan står ut mer än vanligt —
   läsaren ska se innan klicket att raden går till Meta eller till
   Reklamombudsmannen och inte till en text vi skrivit. */
.wire { list-style: none; margin: 0; padding: 0; display: grid; }
.wire__item { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.wire__link {
  font-size: .9rem; font-weight: 400; line-height: 1.4; text-decoration: none;
  color: var(--ink-2);
}
.wire__link:hover { color: var(--accent); }
.wire__meta { margin: 0; font-size: .76rem; color: var(--ink-3); display: flex; gap: .4rem; }
.wire__source { font-weight: 700; color: var(--ink-3); }

/* Remsan. Utbildningen och kontoinbjudan får en rad var i botten — de var
   tidigare tre kort plus en numrerad trestegslista, och det var den listan som
   fick framsidan att läsa som en kursplan. */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem) 0;
}
.strip__text { max-width: 44rem; display: grid; gap: .35rem; }
.strip__kicker {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
.strip__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
.strip__dek { margin: 0; color: var(--ink-2); font-size: .96rem; }
.strip__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.strip--quiet { border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .front { grid-template-columns: 1fr; grid-template-areas: "lead" "rail" "seconds"; gap: 2.2rem; }
  .front__rail { position: static; }
}
@media (max-width: 560px) {
  /* Huvudet får inte äta förstaskärmen på en telefon — ledaren ska synas utan
     att man skrollar. Datumet stannar kvar, det är signalen om att sajten är
     en publikation och inte en broschyr. */
  .masthead__inner { padding: .6rem 0; gap: .2rem; }
  .masthead__title { font-size: .88rem; }
  .masthead__meta { font-size: .78rem; }
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(3rem, 2rem + 6vw, 6.5rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
  background:
    radial-gradient(60rem 30rem at 15% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(40rem 24rem at 95% 0%, color-mix(in srgb, var(--hot) 14%, transparent), transparent 65%);
}
.hero__kicker {
  margin: 0 0 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.hero__title { max-width: 17ch; margin-bottom: .5rem; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead { max-width: 58ch; font-size: 1.12rem; color: var(--ink-2); margin: 0 0 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- knappar ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid var(--line);
  font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; }
.btn--sm { padding: .45rem .95rem; font-size: .88rem; }
.btn--quiet { background: none; border: 0; color: var(--ink-3); padding-inline: 0; }
.btn--quiet:hover { color: var(--hot-ink); box-shadow: none; transform: none; }

/* ---------- sektioner ---------- */

/* Två vägar in i guide-avdelningen: kurserna i ordning, eller en enskild guide.
   Ligger högst upp så att den som bara vill lösa ett problem slipper skrolla
   förbi fyra spår för att upptäcka att guiderna finns. */
.subnav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-top: 1.8rem;
}
.subnav__item {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, transform .15s;
}
.subnav__item:hover { border-color: var(--accent); transform: translateY(-1px); }
.subnav__item strong { font-size: 1rem; }
.subnav__item span { color: var(--ink-3); font-size: .88rem; }

/* ---------- kreatörskatalogen ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.chip {
  padding: .4rem .9rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--card);
  font-size: .88rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.member__kat { margin: .2rem 0 0; color: var(--accent); font-size: .82rem; font-weight: 700; }
.member__foot {
  margin-top: auto; padding-top: .6rem; display: flex; align-items: center;
  justify-content: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem;
}
.member { justify-content: flex-start; }

.kategorier {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .3rem .8rem; margin-bottom: .4rem;
}

/* ---------- köparsidan ---------- */

.steps { max-width: 46rem; margin: 0; padding-left: 1.3rem; display: grid; gap: .9rem; }
.steps li { color: var(--ink-2); }
/* Fetstilen är stegets rubrik och texten efter är förklaringen. Utan egen rad
   gick de ihop, "profilen.Nisch", eftersom mallarna inte har mellanslag
   mellan elementen och inte ska behöva ha det. */
.steps strong { color: var(--ink); display: block; margin-bottom: .15rem; }

.lead-form {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.5rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}
.lead-form__text h2 { margin-top: 0; }
.lead-form__text p { color: var(--ink-2); }
.lead-form .form { margin-top: 0; }
@media (max-width: 860px) { .lead-form { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Honungsfälla: dold för människor, synlig för skript som fyller i allt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.faq { max-width: 46rem; display: grid; gap: .6rem; }
.faq__item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
}
.faq__item summary { font-weight: 700; cursor: pointer; }
.faq__item[open] summary { margin-bottom: .6rem; }
.faq__item p { margin: 0; color: var(--ink-2); }

.section { padding: clamp(2.2rem, 1.6rem + 2vw, 3.6rem) 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.section__title { margin: 0 0 .2rem; }
.section__blurb { margin: 0; color: var(--ink-3); font-size: .98rem; }
.section__more { white-space: nowrap; font-weight: 700; font-size: .93rem; text-decoration: none; color: var(--accent); }

.band { background: var(--paper-2); border-block: 1px solid var(--line); }

.page-head { padding: clamp(2.4rem, 2rem + 3vw, 4rem) 0 .5rem; }
.page-head__kicker { margin: 0 0 .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.page-head__lead { max-width: 60ch; color: var(--ink-2); font-size: 1.08rem; margin: 0; }

.page-head__lead + .page-head__actions { margin-top: 1.4rem; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.section__lead { max-width: 62ch; color: var(--ink-2); margin: 0 0 1.4rem; }
.section__title + .section__lead { margin-top: -.2rem; }

/* Kort som i sin helhet är en länk. Understrykningen är bortvald med flit:
   hela ytan är klickbar och rubriken bär redan anvisningen. */
.katalog__bransch { margin: -.6rem 0 1.4rem; font-size: .95rem; }

.card--link { text-decoration: none; color: inherit; }
.card--link:hover .card__title { color: var(--accent); }

.crumbs { font-size: .87rem; color: var(--ink-3); margin-bottom: 1rem; }
.crumbs a { text-decoration: none; }
.crumbs span { margin: 0 .4rem; }

.empty { color: var(--ink-3); padding: 2rem 0; }

/* ---------- kort ---------- */

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--lead { grid-template-columns: 1.35fr 1fr; align-items: start; }
.grid__stack { display: grid; gap: 1.1rem; }
@media (max-width: 900px) { .grid--lead { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .22s ease, border-color .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.card__title { margin: 0; font-size: 1.08rem; letter-spacing: -.015em; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__dek { margin: 0; color: var(--ink-2); font-size: .95rem; }
.card__meta { margin: auto 0 0; color: var(--ink-3); font-size: .84rem; }

.card--featured .card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
.card--featured .card__media { aspect-ratio: 16 / 9; }
.card--featured .card__dek { font-size: 1.02rem; }
.grid__stack .card { flex-direction: row; }
.grid__stack .card__media { flex: 0 0 108px; aspect-ratio: 1; }
/* Omslagen är typografiska — logotyp och sektionsord. En kvadrat på 108 px kan
   inte bära något av det: beskärningen kapar båda och ser trasig ut oavsett var
   den läggs. Kompaktkorten går därför utan bild, som sekundärnyheterna i en
   tidning: en artikel med bild, resten som ren lista. */
.grid__stack .card__media { display: none; }
.grid__stack .card__body { padding: .8rem .9rem; }
.grid__stack .card__title { font-size: .98rem; }
.grid__stack .card__dek { display: none; }

/* ---------- etiketter ---------- */

.tag {
  align-self: flex-start; display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .25em .6em; border-radius: 999px; text-decoration: none;
  /* --accent-deep, inte --accent: terrakotta på sin egen tint ger 4,3:1 och
     etiketten sätts i .7rem. Samma regel gäller varje färgad text på tint. */
  background: var(--accent-soft); color: var(--accent-deep);
}
.tag--artiklar { background: var(--accent-soft); color: var(--accent-deep); }
.tag--guider { background: var(--ok-soft); color: var(--ok); }
.tag--intervjuer { background: var(--warn-soft); color: var(--hot-ink); }
.tag--kurs { background: var(--accent-soft); color: var(--accent-deep); }
.tag--plain, .tag--role, .tag--pin, .tag--free, .tag--draft {
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line);
}
.tag--draft { color: var(--hot-ink); }
.tag--klar { background: var(--ok-soft); color: var(--ok); }
.tag--uppgift { background: var(--warn-soft); color: var(--hot-ink); }

.badge {
  display: inline-flex; align-items: center; gap: .25em; vertical-align: middle;
  font-size: .7em; font-weight: 700; letter-spacing: .04em;
  padding: .3em .6em; border-radius: 999px; white-space: nowrap;
}
.badge--cert { background: var(--ok-soft); color: var(--ok); }

/* ---------- artikel ---------- */

.post { padding-bottom: 2rem; }
.post__head { padding: clamp(2rem, 1.6rem + 2vw, 3.2rem) 0 1.4rem; max-width: var(--measure); }
.post__head h1 { letter-spacing: -.028em; }
.post__dek { font-size: 1.2rem; color: var(--ink-2); margin: .6rem 0 0; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; color: var(--ink-3); font-size: .9rem; }
.byline { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; color: var(--ink); }

/* Omslaget ligger i textens kolumn, inte kant i kant. Ett typografiskt omslag
   uppblåst till full bredd och 60vh skriker högre än rubriken det illustrerar,
   och bryter dessutom den enda kolumn resten av artikeln håller sig i. */
.post__cover {
  width: min(100% - 2.5rem, var(--measure));
  margin: 0 auto 2.4rem;
}
.post__cover img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* Brödtexten går i samma snitt som resten. 1rem, inte 1.18: serifen som låg
   här förut behövde uppförstoras för att bära, Poppins gör inte det. */
.prose { max-width: var(--measure); font-size: 1rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.15em; }
/* Ingressen. Första stycket i varje artikel går i fetstil, husregel på alla
   våra sajter. Satt i stilmallen och inte i texten, så den gäller allt som
   redan är publicerat och inte kan glömmas bort av den som skriver nästa. */
.prose > p:first-child { font-weight: 700; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.18rem; margin-top: 1.8em; }
/* :not(.btn) — annars vinner den här regeln över .btn--primary på specificitet
   och knappen får terrakotta text på terrakotta botten, alltså en tom pill.
   Gäller varje knapp som står i löptext, t.ex. anmälan i slutet av en guide. */
.prose a:not(.btn) { color: var(--accent); }
.prose img, .prose figure { margin-block: 2rem; }
.prose figcaption { font-size: .88rem; color: var(--ink-3); margin-top: .5rem; }
.prose blockquote {
  margin-inline: 0; padding: .3em 0 .3em 1.3em; border-left: 3px solid var(--accent);
  font-size: 1.12rem; color: var(--ink-2);
}
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--paper-2); padding: .15em .4em; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }

.post__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; max-width: var(--measure); }

.interviewee {
  max-width: 42rem; margin-bottom: 2rem; padding: 1.2rem 1.4rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.interviewee h2 { font-size: 1rem; margin: 0 0 .3rem; }
.interviewee p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.interviewee__links { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: .8rem 0 0; font-size: .9rem; }
.interviewee__links a { color: var(--accent); }

.pager { display: flex; justify-content: space-between; margin-top: 2.5rem; font-weight: 700; }
.pager a { text-decoration: none; color: var(--accent); }

/* ---------- kurser ---------- */

.course-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; padding: clamp(2rem, 1.6rem + 2vw, 3.4rem) 0; }
.course-head__media img { border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.course-head__facts { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--ink-3); font-size: .93rem; margin: 1.2rem 0; }
@media (max-width: 860px) { .course-head { grid-template-columns: 1fr; } }

.lessons { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.lesson { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line); }
.lesson:last-child { border-bottom: 0; }
.lesson a { text-decoration: none; font-weight: 700; }
.lesson a:hover { color: var(--accent); }
.lesson--locked { color: var(--ink-3); }
.lesson__meta { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ink-3); white-space: nowrap; }
.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; max-width: 42rem; font-weight: 700; }
.lesson-nav a { text-decoration: none; color: var(--accent); }

.lesson__main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.lesson__check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .8rem; font-weight: 700;
  background: var(--ok-soft); color: var(--ok);
}
.lesson--done a { color: var(--ink-3); }

.video { max-width: 46rem; margin-bottom: 2rem; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* ---------- utbildning: spår, progression, uppgifter ---------- */

.progress { display: grid; gap: .35rem; margin: 1rem 0; min-width: 11rem; }
.progress__bar {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border: 0; border-radius: 999px;
  background: var(--paper-2); color: var(--accent);
}
.progress__bar::-webkit-progress-bar { background: var(--paper-2); border-radius: 999px; }
.progress__bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.progress__bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.progress__label { font-size: .82rem; color: var(--ink-3); font-weight: 700; }
.progress--done .progress__bar::-webkit-progress-value { background: var(--ok); }
.progress--done .progress__bar::-moz-progress-bar { background: var(--ok); }
.progress--done .progress__label { color: var(--ok); }

.tracks { display: grid; gap: 1.5rem; padding: 1.5rem 0 3rem; }
.track {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
}
.track--cert { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 30%, var(--card)); }
.track__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.track__kicker { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.track__title { margin: 0 0 .4rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.track__summary { margin: 0; max-width: 60ch; color: var(--ink-2); }
.track__goal { margin: .7rem 0 0; max-width: 60ch; font-size: .93rem; color: var(--ink-3); }

.track__courses { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.modul {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.modul__text { flex: 1 1 20rem; min-width: 0; }
.modul__title { margin: 0; font-size: 1.05rem; }
.modul__title a { text-decoration: none; }
.modul__title a:hover { color: var(--accent); }
.modul__summary { margin: .25rem 0 0; color: var(--ink-2); font-size: .92rem; }
.modul__facts { display: flex; gap: 1rem; margin: .5rem 0 0; color: var(--ink-3); font-size: .84rem; }
.modul__side { display: grid; gap: .4rem; justify-items: start; min-width: 11rem; }
.modul__side .progress { margin: 0; }

.callout {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
  display: grid; gap: .8rem; justify-items: start;
}
.callout h2 { font-size: 1.1rem; margin: 0; }
.callout p { margin: 0; color: var(--ink-2); }
.callout--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.callout--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--hot) 30%, transparent); }

.uppgift {
  max-width: 42rem; margin-top: 2.5rem; padding: 1.4rem 1.5rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.uppgift__kicker { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.uppgift__text > :first-child { margin-top: 0; }
.uppgift__text > :last-child { margin-bottom: 0; }
.uppgift__note { color: var(--ink-2); font-size: .93rem; }
.uppgift__feedback { padding: .8rem 1rem; background: var(--card); border-radius: var(--radius-sm); font-size: .95rem; }
.uppgift .form { max-width: 100%; }

.lesson-done { max-width: 42rem; margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lesson-done__hint { margin: 0; color: var(--ink-3); font-size: .9rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.stat {
  padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: .2rem;
}
.stat strong { font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; }
.stat span { color: var(--ink-3); font-size: .85rem; }

.status { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.status--inlamnad { color: var(--ink-3); }
.status--godkand { color: var(--ok); }
.status--underkand { color: var(--hot-ink); }
.linklist__note { color: var(--ink-3); font-size: .88rem; border-bottom: 0; padding-top: 0; }

.cert-state { max-width: 42rem; padding-bottom: 4rem; }
.cert-state .form { max-width: 100%; }

/* ---------- redaktion ---------- */

.count {
  display: inline-block; margin-left: .4rem; vertical-align: middle;
  font-size: .75rem; font-weight: 700; padding: .2em .6em; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}

.reviews { display: grid; gap: 1.2rem; max-width: 46rem; }
.review {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; display: grid; gap: .9rem;
}
.review--cert { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.review__who { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; }
.review__meta { color: var(--ink-3); font-size: .85rem; }
.review__meta a { color: inherit; }
.review__note {
  margin: 0; padding: .8rem 1rem; background: var(--paper-2); border-radius: var(--radius-sm);
  font-size: .95rem; color: var(--ink-2);
}
.review__link { justify-self: start; font-weight: 700; color: var(--accent); font-size: .93rem; }
.review__link--broken { color: var(--hot-ink); }
.review__criteria { margin: 0; color: var(--ink-3); font-size: .85rem; }
.review__form { display: grid; gap: .7rem; }
.review__form label { display: grid; gap: .35rem; font-weight: 700; font-size: .88rem; }
.review__form textarea {
  font: inherit; font-size: .95rem; padding: .7rem .85rem; line-height: 1.5;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; resize: vertical;
}
.review__form textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- uppdrag ---------- */

.card--brief .card__body { gap: .6rem; }

.brieffacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem;
  margin: 0; padding: 1.2rem 1.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.brieffacts dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.brieffacts dd { margin: .2rem 0 0; font-weight: 700; }

.applicants { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.applicant {
  display: grid; gap: .6rem; padding: 1rem 1.1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.applicant__who { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.applicant__who a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; }

.form--inline-row { display: flex; gap: .5rem; margin: 0; flex-wrap: wrap; align-items: center; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }

.form select {
  font: inherit; font-weight: 400; font-size: 1rem; padding: .7rem .85rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%;
}
/* Brödtextrutan ska gå att skriva en artikel i, inte bara en kommentar. */
.editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; line-height: 1.6; min-height: 26rem;
}

/* ---------- forum ---------- */

.forum-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .forum-layout { grid-template-columns: 1fr; gap: 2rem; } }

.cats { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; transition: border-color .2s; }
.cat:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cat__name { font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.cat__desc { margin: .25rem 0 0; color: var(--ink-3); font-size: .92rem; }

.threadlist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.threadlist--compact { gap: 1.1rem; margin-top: 0; }
.threadlist--compact a { font-weight: 700; text-decoration: none; }
.threadlist__meta { margin: .2rem 0 0; color: var(--ink-3); font-size: .85rem; }
.threadlist__meta a { color: inherit; }

.thread { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.thread__body { flex: 1; min-width: 0; }
.thread__title { margin: 0; font-size: 1.05rem; }
.thread__title a { text-decoration: none; }
.thread__title a:hover { color: var(--accent); }
.thread__excerpt { margin: .3rem 0 0; color: var(--ink-2); font-size: .93rem; }
.thread__count { display: flex; flex-direction: column; align-items: center; color: var(--ink-3); font-size: .75rem; min-width: 3rem; }
.thread__count strong { font-size: 1.15rem; color: var(--ink); }

.thread-view { display: grid; gap: 1rem; max-width: 48rem; }
.post-item { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.post-item--op { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.post-item__who { display: flex; gap: .7rem; align-items: center; }
.post-item__name { display: block; font-weight: 700; font-size: .93rem; text-decoration: none; }
.post-item__who time { font-size: .8rem; color: var(--ink-3); }
.post-item__text > :first-child { margin-top: 0; }
.post-item__text > :last-child { margin-bottom: 0; }
@media (max-width: 720px) { .post-item { grid-template-columns: 1fr; gap: .9rem; } }

.composer { margin-bottom: 2rem; }
.composer > summary { display: inline-flex; list-style: none; margin-bottom: 1rem; }
.composer > summary::-webkit-details-marker { display: none; }

/* ---------- profiler ---------- */

.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--accent-soft); }
.avatar--sm { width: 26px; height: 26px; }
.avatar--md { width: 46px; height: 46px; }
.avatar--lg { width: 104px; height: 104px; }
.avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 700; letter-spacing: 0;
}
.avatar--fallback.avatar--sm { font-size: .8rem; }
.avatar--fallback.avatar--md { font-size: 1.2rem; }
.avatar--fallback.avatar--lg { font-size: 2.6rem; }

.profile { padding-top: clamp(2rem, 1.6rem + 2vw, 3.2rem); max-width: 46rem; }
.profile__head { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.profile__head h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: .1em; }
.profile__handle { margin: 0; color: var(--ink-3); font-weight: 700; }
.profile__since { margin: .2rem 0 .8rem; color: var(--ink-3); font-size: .85rem; }
.profile__bio { margin-top: 1.8rem; font-size: 1.02rem; color: var(--ink-2); }
.profile__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0 0; }
.profile__links a {
  display: inline-block; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); text-decoration: none; font-size: .88rem; font-weight: 700;
}
.profile__links a:hover { border-color: var(--accent); color: var(--accent); }

.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.linklist a { text-decoration: none; font-weight: 700; }
.linklist span { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }

.grid--members { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.member {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  padding: 1.4rem 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; transition: border-color .2s, transform .15s;
}
.member:hover { border-color: var(--accent); transform: translateY(-2px); }
.member span { color: var(--ink-3); font-size: .85rem; }
.member p { margin: .3rem 0 0; color: var(--ink-2); font-size: .85rem; }

/* ---------- formulär ---------- */

.auth { max-width: 27rem; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 4rem; }
.auth--wide { max-width: 40rem; }
.auth__lead { color: var(--ink-2); margin-top: -.3rem; }
.auth__alt { margin-top: 1.5rem; color: var(--ink-3); font-size: .93rem; }
.auth__alt--top { margin-top: .4rem; }

.form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.form label { display: grid; gap: .35rem; font-weight: 700; font-size: .92rem; }
.form small { font-weight: 400; color: var(--ink-3); font-size: .82rem; }
.form input, .form textarea {
  /* Fälten ligger inuti den feta etiketten och ärvde vikten, så både det man
     skrev och exempeltexten stod i fetstil och såg redan ifyllda ut. */
  font: inherit; font-weight: 400; font-size: 1rem; padding: .7rem .85rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%;
}
.form input[type="file"] { padding: .5rem; font-size: .9rem; }
.form textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.form button { justify-self: start; }
.form--inline { margin-top: 2.5rem; }
.form--reply { max-width: 100%; }
.form__avatar { display: flex; gap: 1.3rem; align-items: center; }
.form__avatar label { flex: 1; }
.form__social { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: 1rem; }
.form__social legend { padding-inline: .5rem; font-weight: 700; font-size: .88rem; }
.form__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

.notice { padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .93rem; margin: 1rem 0; border: 1px solid transparent; }
.notice--error { background: var(--warn-soft); color: var(--hot-ink); border-color: color-mix(in srgb, var(--hot) 30%, transparent); }
.notice--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.notice--info { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
.notice a { color: inherit; font-weight: 700; }

.cta { text-align: center; max-width: 34rem; margin-inline: auto; }
.cta p { color: var(--ink-2); }

/* ---------- sidfot ---------- */

.site-foot { margin-top: 4rem; background: var(--paper-2); border-top: 1px solid var(--line); }
.site-foot__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding: 3rem 0 2rem; }
.site-foot nav { display: flex; flex-direction: column; gap: .5rem; font-size: .93rem; }
.site-foot h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .3rem; }
.site-foot a { text-decoration: none; color: var(--ink-2); }
.site-foot a:hover { color: var(--accent); }
.site-foot__tagline { color: var(--ink-3); font-size: .92rem; max-width: 30ch; margin: .8rem 0 0; }
.site-foot__legal { padding-bottom: 2.5rem; color: var(--ink-3); font-size: .84rem; }
@media (max-width: 760px) { .site-foot__inner { grid-template-columns: 1fr 1fr; } }

/* ---------- filmer på profilen ---------- */

/* Små rutor, inte en spellista. Profilen ska gå att överblicka på ett ögonkast
   även med tolv filmer, så korten är medvetet smalare än artikelkorten. */
.videos {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.video-card { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }

/* Portföljen: filmer levererade på uppdrag här. Stående format, spelas på
   plats. poster laddas, filmen först när någon trycker play. */
.portfolj__video {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain;
  background: #000; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.video-card--ugc .video-card__title { color: var(--ink-3); font-size: .82rem; }
.callout--sm { padding: 1rem 1.2rem; margin-top: 1rem; }
.callout--sm h3 { margin: 0 0 .4rem; font-size: 1rem; }
.callout--sm p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.callout--sm form { margin-top: .7rem; }

/* Redaktionens verktyg på leveranssidan: kör om och radera. Raderingen ligger
   bakom en utfällning och en kryssruta, den går inte att ångra. */
.redaktionsverktyg {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem 1.2rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line);
}
.redaktionsverktyg .form { margin: 0; }
.radera summary { cursor: pointer; font-weight: 700; color: var(--hot-ink); padding: .35rem 0; }
.radera[open] { flex-basis: 100%; }
.radera .form { max-width: 34rem; margin-top: .6rem; }
.btn--fara { background: var(--hot-ink); border-color: var(--hot-ink); color: #fff; }
.btn--fara:hover { filter: brightness(1.1); }

/* Fasaden: knappen ÄR miniatyren fram tills någon klickar, då app.js byter ut
   den mot en iframe. Samma mått på båda så layouten inte hoppar. */
.video-card__play,
.video-card iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); overflow: hidden;
}

.video-card__play {
  position: relative; padding: 0; cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.video-card__play:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.video-card__play img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-card__placeholder {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-3);
  background: linear-gradient(135deg, var(--paper-2), var(--accent-soft));
}

.video-card__icon {
  position: absolute; inset: 0; margin: auto;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(38, 22, 16, .68); color: #fff;
  font-size: .9rem; padding-left: .15rem;
}
.video-card__play:hover .video-card__icon { background: var(--accent); color: var(--accent-ink); }

/* Kreatörslänken under filmen på startsidan. Kortet har två mål: spela upp
   filmen ELLER gå till den som gjort den, så namnet är en egen länk och inte
   en rad text under en knapp. */
.filmrad__kreator {
  display: flex; align-items: center; gap: .45rem;
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: .88rem;
  min-width: 0;
}
.filmrad__kreator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filmrad__kreator:hover { color: var(--accent); }

/* Raden på startsidan får färre och större rutor än profilen: här är filmerna
   huvudnumret, på profilen är de en bilaga. */
.filmrad .videos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 700px) {
  .filmrad .videos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

.video-card__title {
  margin: 0; font-size: .88rem; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Ort och pris under filmen. Samma två storlekar som kreatörskortet använder,
   .kreatorkort__ort och __pris, så de två raderna på framsidan inte ser ut som
   två olika system. Priset bär vikten eftersom det är den uppgift som svarar på
   "har jag råd"; orten är kontext och ska vara tystare. */
.video-card__meta {
  margin: -.15rem 0 0; font-size: .82rem; line-height: 1.35; color: var(--ink-3);
}
.video-card__meta strong { color: var(--ink); font-weight: 700; }
.video-card__meta { margin: 0; font-size: .78rem; color: var(--ink-3); }
.video-card__meta a { color: inherit; }
.video-card__meta a:hover { color: var(--accent); }

/* Publiceringslistan på profilen får plats för en ingress. */
.linklist--rich li { flex-direction: column; align-items: flex-start; gap: .3rem; }
.linklist__dek { margin: 0; color: var(--ink-2); font-size: .9rem; font-weight: 400; line-height: 1.45; }

@media (max-width: 520px) {
  .videos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
}

/* ---------- nästa steg, utfästelser, värvning ---------- */

/* Ett enda kort, inte en lista. Sidan ska ge ett beslut, inte en meny. */
.next-step {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem; box-shadow: var(--shadow);
}
.next-step__label {
  margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.next-step__title { margin: 0 0 .4rem; font-size: 1.4rem; line-height: 1.25; }
.next-step__why { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 52ch; }

/* Profilens fem punkter under nästa steg. Små och tysta med flit: de visar
   hur långt det är kvar, de är inte fem uppgifter att beta av. */
.olasta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }

.profilbockar { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.profilbockar__rubrik { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; color: var(--ink-3); }
.profilbockar__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.profilbockar__punkt { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--ink-3); }
.profilbockar__punkt--klar { color: var(--ok); }
.profilbockar__punkt--klar span:nth-child(2) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 45%, transparent); }

.commitments { list-style: none; padding: 0; margin: 1rem 0 1.2rem; }
.commitments li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.commitments .form--inline { display: flex; align-items: center; gap: .8rem; margin: 0; }
.commitments time { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }

.form--row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.form--row input { flex: 1 1 12rem; min-width: 0; }
.form--row button { flex: 0 0 auto; }

/* Selektorn måste tas på elementet: `.form label` ovan är display:grid och
   väger tyngre än en ensam klass, vilket la kryssrutan PÅ raden över texten
   i stället för bredvid den. */
label.form__check {
  display: flex; align-items: flex-start; gap: .6rem; font-weight: 400;
  cursor: pointer;
}
/* Toppställd, inte centrerad: samtyckesrutan vid registrering har två rader,
   och då ska rutan stå vid den första. Marginalen lyfter den till radens
   optiska mitt när texten bara är en rad, vilket är fallet i kategorierna. */
label.form__check input { width: auto; flex: 0 0 auto; margin: .15rem 0 0; }
label.form__check span { font-weight: 400; }

.checklist { list-style: none; padding: 0; margin: 1rem 0; max-height: 26rem; overflow-y: auto; }
.checklist li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.checklist label { display: flex; align-items: center; gap: .6rem; font-weight: 400; margin: 0; }
.checklist input { width: auto; flex: 0 0 auto; }
.checklist small { color: var(--ink-3); }

.referral code {
  display: inline-block; padding: .5rem .8rem; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .95rem;
  word-break: break-all;
}

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


/* Sidfotens rad. Flex kvar även utan radarknappen: raden har fortfarande
   copyright till vänster och kan få sällskap igen. */
.site-foot__legal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-foot__legal p { margin: 0; }

/* ---------- resultatspårning ---------- */

/* Statistikrutorna på resultatsidorna har en tredje rad som de gamla .stat
   saknar: källmärkningen. Ett tal utan den är ett påstående, inte en uppgift. */
.stat__label { margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat__value { margin: .15rem 0 0; font-size: 1.75rem; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.stat__foot { margin: .45rem 0 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.stat__hint { color: var(--ink-3); font-size: .82rem; }

/* De tre källorna. Skillnaden är avsiktligt synlig på håll: grönt är mätt,
   terrakotta är hämtat, och det uppgivna har streckad ram just för att det ska
   se ut som ett påstående någon lämnat och inte som ett mätvärde. */
.kalla {
  display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .32em .6em; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; cursor: help;
}
.kalla--matt { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.kalla--plattform { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.kalla--uppgiven { background: var(--paper-2); color: var(--ink-2); border-style: dashed; border-color: var(--ink-3); }

.legend { margin-top: 1.6rem; max-width: 46rem; }
.legend > summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; }
.legend__list { margin: 1rem 0 0; display: grid; gap: .8rem; }
.legend__list dt { margin: 0; }
.legend__list dd { margin: .25rem 0 0; color: var(--ink-2); font-size: .93rem; }
.legend__foot { margin: 1rem 0 0; color: var(--ink-3); font-size: .88rem; }

/* Tabellen får rulla i sin egen behållare. Utan den skjuter en provisionsrad
   ut hela sidan i sidled på telefon. */
/* En rad per företag på /redaktion/intakter/. Formuläret är avsiktligt platt:
   satsen är ETT tal och ett val, och en fullstor formulärlayout per bolag hade
   gjort listan oläsbar. */
.sats {
  display: flex; align-items: end; gap: .9rem; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.sats__namn { font-weight: 700; min-width: 12rem; }
.sats label { margin: 0; font-size: .85rem; }
.sats input[type="number"] { width: 6rem; }
.sats__ingen { color: var(--ink-3); font-size: .88rem; }
.table td small { display: block; color: var(--ink-3); font-weight: 400; font-size: .8rem; }

.table-scroll { overflow-x: auto; margin-top: 1.2rem; }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 40rem; }
.table th {
  text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 0 .8rem .6rem; border-bottom: 1px solid var(--line);
}
.table td { padding: .9rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th.num, .table td.num { text-align: right; }
/* Sifferkolumnerna i tabellsiffror, inte proportionella: annars hoppar
   kolumnen i sidled mellan rader och blir omöjlig att jämföra i ögat. */
.table td.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.table__foot { margin: .8rem 0 0; color: var(--ink-3); font-size: .88rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.row__sub { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .82rem; font-weight: 400; }
.row__sub .code { font-size: .78rem; }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .15em .45em; font-size: .85em; word-break: break-all;
}
.code--secret { display: inline-block; margin-top: .5rem; }
.code-block {
  margin: 1rem 0; padding: 1rem 1.1rem; overflow-x: auto;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.code-block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; line-height: 1.6; background: none; border: 0; padding: 0; }

.keyval { display: grid; gap: .9rem; margin: 1.4rem 0; max-width: 46rem; }
.keyval dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.keyval dd { margin: .3rem 0 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.reveal > summary { cursor: pointer; display: inline-flex; list-style: none; }
.reveal > summary::-webkit-details-marker { display: none; }

.postings { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.posting {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; display: grid; gap: 1rem;
}
.posting__kicker { margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.posting__title { margin: .35rem 0 0; font-size: 1.05rem; }
.posting__title a { word-break: break-all; }
.posting__meta { margin: .3rem 0 0; color: var(--ink-3); font-size: .88rem; }

.metrics { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.metric { padding: .9rem 1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.metric__head { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.metric__date { color: var(--ink-3); font-size: .82rem; }
.metric__grid { margin: .8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .8rem; }
.metric__grid dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.metric__grid dd { margin: .15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.dispute { margin-top: .4rem; }
.dispute > summary { cursor: pointer; display: inline-flex; list-style: none; }
.dispute > summary::-webkit-details-marker { display: none; }
.dispute .form { margin-top: .8rem; max-width: 26rem; }

.composer--tight { margin-bottom: 0; }
.composer--tight > summary { margin-bottom: .8rem; }
.form--tight { display: grid; gap: .7rem; }
.form--spaced { margin-top: 1.6rem; }
.form__note { margin: 0; color: var(--ink-3); font-size: .88rem; max-width: 40rem; }

.status--aktiv, .status--utbetald { color: var(--ok); }
.status--pausad, .status--avslutad, .status--vantar { color: var(--ink-3); }
.status--avvisad { color: var(--hot-ink); }

.prose__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 620px) {
  .stat__value { font-size: 1.45rem; }
  .posting { padding: 1.1rem 1rem; }
}

/* "Mäts inte" är inte ett fel och ska inte läsa som ett. Kursivt och dämpat,
   med förklaringen i title: skillnaden mellan "ingen klickade" och "det räknas
   inte här" är hela skälet att texten finns. */
.matsinte { color: var(--ink-3); font-style: italic; font-weight: 400; cursor: help; }

/* ---------- meddelanden ---------- */

.nav__inbox { font-weight: 700; font-size: .92rem; color: var(--ink-2); text-decoration: none; }
.nav__inbox:hover, .nav__inbox[aria-current] { color: var(--accent-deep); }

.samtalslista { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; max-width: 46rem; }
.samtal {
  display: flex; align-items: baseline; gap: 1rem; justify-content: space-between;
  padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
}
.samtal > a { flex: 1; display: grid; gap: .2rem; text-decoration: none; color: inherit; }
.samtal__vem { font-weight: 700; }
.samtal__amne { font-size: .92rem; color: var(--ink-2); }
.samtal__utdrag { font-size: .9rem; color: var(--ink-3); }
.samtal__tid { font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
/* Oläst markeras med kant och inte med fet text: listan är redan tät, och en
   halv lista i fetstil läser som att allt är brådskande. */
.samtal--olast { border-color: var(--accent); background: var(--accent-soft); }

.bubblor { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .9rem; max-width: 46rem; }
.bubbla {
  padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
}
.bubbla--jag { background: var(--paper-2); margin-left: 2.5rem; }
.bubbla__topp {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--ink-3); margin-bottom: .35rem;
}
.bubbla__topp span { font-weight: 700; color: var(--ink-2); }
.bubbla__text p { margin: 0 0 .5rem; }
.bubbla__text p:last-child { margin-bottom: 0; }

/* ---------- meritvärdet ---------- */

.merit { display: grid; gap: 1rem; }
.merit__topp { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.merit__tal { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.merit__av { color: var(--ink-3); font-size: .9rem; }
/* Ingen stapel: en stapel förutsätter ett tak, och meritvärdet har inget.
   Talet står för sig självt med delarna under. */
.merit__delar { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; max-width: 46rem; }
.merit__delar li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.merit__delar span:last-child { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.omdome { border-left: 3px solid var(--accent-soft); padding-left: 1rem; }
.omdome__topp { font-size: .85rem; color: var(--ink-3); }

/* Prislistan pa profilen -----------------------------------------------------
   Ligger direkt under bion och over allt annat pa profilen. Ett foretag som
   maste skrolla for att fa veta vad nagon kostar skrollar oftast bort i stallet.

   Kolumnerna ar auto-fit och inte tre fasta: en kreator som bara fyllt i ett av
   tre priser ska fa ett kort i full bredd, inte ett kort och tva hal. */
.prislista {
  margin-top: 1.8rem;
  padding: 1.2rem 1.3rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.prislista__rubrik {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prislista__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.prislista__lista li {
  display: grid;
  gap: .15rem;
  padding: .7rem .85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
}
.prislista__niva { font-size: .8rem; font-weight: 700; color: var(--ink-3); }
/* Priset ar det man letar efter. Det far bara vagen ensamt, ingen accentfarg:
   tre kort i accent bredvid varandra blir en reklamskylt, inte en prislista. */
.prislista__pris { font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.prislista__under { font-size: .78rem; color: var(--ink-3); }
.prislista__not { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-3); }

/* Ersattningsfaltsettet i formularen. Samma ram som .form__social, men egen
   klass sa att de tva kan sara pa sig utan att den ena drar med sig den andra. */
.form__ers {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
}
.form__ers legend { padding-inline: .5rem; font-weight: 700; font-size: .88rem; }

.member__pris { font-weight: 700; color: var(--ink); }

/* Fliken Alla konton: mindre kort, bild och bio, för företag och redaktion. */
.chips--flikar { margin-bottom: 1.1rem; }
.chip--on[aria-current="page"] { cursor: default; }
.grid--members-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.member--sm { padding: .9rem .7rem; gap: .3rem; }
.member--sm strong { font-size: .92rem; }
.member--sm p { font-size: .8rem; line-height: 1.45; }
.member--sm .member__foot { padding-top: .45rem; gap: .35rem; font-size: .75rem; }
.member__tom { color: var(--ink-3); font-style: italic; }
.member__sedan { color: var(--ink-3); }

@media (max-width: 560px) {
  .prislista { padding: 1rem; }
  .prislista__lista { grid-template-columns: 1fr; }
}

/* Vagvalet pa startsidan ------------------------------------------------------
   Tva ingangar, inte en hero. En hero hade gjort tidningen till en landningssida
   och begravt dagens artiklar under vikningen. Det har ar en rad som sager vad
   sajten ar, och slapper sedan fram innehallet.

   Hela kortet ar lanken, inte bara knappen: ett kort som ser klickbart ut men
   bara reagerar pa en liten yta ar irriterande pa mobil. */
.vagval {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 1.8rem;
  margin-bottom: 1.4rem;
}
/* Rubriken ovanför paret. Utan den lag två kort i luften och det gick att lasa
   dem som annonser. Med fragan blir de ett svar. Span over hela gridet. */
.vagval__over {
  grid-column: 1 / -1;
  margin: 0 0 .1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.vagval__kort {
  display: grid;
  gap: .45rem;
  align-content: start;
  padding: 1.7rem 1.8rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.vagval__kort:hover { box-shadow: 0 6px 20px rgb(27 20 23 / 7%); }
.vagval__kort:hover { border-color: var(--accent); transform: translateY(-2px); }
.vagval__kort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vagval__kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
/* Mätt före: 18,4 px mot ledarartikelns 40. Ett vägval som väger en fjärdedel
   av en artikel är ingen ingång, det är en bildtext. */
.vagval__rubrik { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.65rem); font-weight: 800; color: var(--ink); line-height: 1.2; }
.vagval__dek { font-size: .98rem; color: var(--ink-2); line-height: 1.5; }
/* Ser ut som en knapp men ar det inte: hela kortet ar redan lanken, och en
   riktig knapp inuti en lank ar ogiltig HTML. */
.vagval__cta {
  justify-self: start; margin-top: .75rem;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  font-size: .9rem; font-weight: 700; color: var(--accent-deep);
  background: var(--accent-soft);
}
.vagval__kort:hover .vagval__cta { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vagval__cta::after { content: " →"; }

/* Koparen far bandfargen. De tva ingangarna ska ga att skilja pa i ogonvran,
   och samma uppdelning gar igen i menyn dar "For foretag" ar den fyllda. */
.vagval__kort--kop { background: var(--paper-2); }

@media (max-width: 720px) {
  .vagval { grid-template-columns: 1fr; }
}

/* Uppdragets bild ------------------------------------------------------------
   Företagen laddar upp vad de har: kvadratiska produktbilder, liggande foton,
   stående omslag. Bilden får därför ALDRIG beskäras. En kvadratisk grafik med
   text i blev avklippt uppe och nere av ett tidigare object-fit: cover, och
   det är precis den sortens bild företag laddar upp.

   Lösningen är att bilden själv krymper: den blir aldrig bredare än spalten
   och aldrig högre än taket, och behåller sina proportioner däremellan. Inga
   svarta fält, ingen beskärning, samma regel oavsett format.

   margin-inline sätts INTE till noll: figuren bär .wrap, som centrerar med
   margin-inline: auto. Ett margin: 0 slog ut den och bilden sprängde spalten. */
.brief__bild { margin-block: 0 1.6rem; }
.brief__bild img {
  display: block;
  width: auto; max-width: 100%;
  max-height: min(26rem, 60vh);
  margin-inline: auto;
  border-radius: var(--radius); background: var(--paper-2);
}

/* Kortet i listan är en annan sak: där ligger bilden i en ruta med fast
   proportion tillsammans med andra kort, och då MÅSTE den fylla ytan. Att
   beskära i en tumnagel är rätt, att beskära på uppdragets egen sida är fel. */
.card--brief .card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Produktlänken. Egen rad under fakta, inte inne i brödtexten: den är en
   uppmaning att titta på något, inte en källa. */
/* Raden som säger vilken sorts ersättning uppdraget har. Låg ton med flit:
   den ska läsas av den som undrar, inte ropa åt den som redan vet. */
.brief__spar { margin: 0 0 .8rem; font-size: .9rem; color: var(--ink-3); }
.brief__spar a { font-weight: 700; }

.brief__produkt { margin: 0 0 1.4rem; }

/* Uppdragssidan: en vänsterkant för allt. Beskrivningen var en egen centrerad
   prosaspalt och ansökningsrutan en centrerad 42rem-spalt, så sidan hade tre
   olika vänsterkanter (granskningen 2026-09-14). Nu står allt på .wrap-kanten,
   och bara bredden begränsas. */
.brief__text, .brief__del { padding-block: 1rem; }
.brief__text .prose, .brief__del .prose { max-width: 42rem; }
.brief__sok.cert-state { max-width: none; }
.brief__sok > * { max-width: 42rem; }
/* Artikelregeln "första stycket är fet" gäller våra egna texter, inte
   företagets brief. Ett helt fett stycke under Användningsrätt läste som
   ett skrik. */
.brief__text .prose > p:first-child, .brief__del .prose > p:first-child { font-weight: 400; }
.brief__kontakt { margin: 0; color: var(--ink-3); font-size: .9rem; }
.brieffacts--kontakt { margin-block: .4rem; }
.acceptera__villkor { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); }
.acceptera__fore { display: block; color: var(--ink-3); font-size: .85rem; }
.brief__produkt a { font-weight: 700; }

/* Bildbytet på företagsvyn. En rad, inte ett formulär i full höjd: det ska
   kunna stå under varje uppdrag utan att dränka ansökningarna. */
.form--bild {
  display: flex; flex-wrap: wrap; align-items: end; gap: .8rem;
  margin: .9rem 0 1.2rem; padding: .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.form--bild label { flex: 1 1 12rem; margin: 0; font-size: .85rem; }
.form--bild .btn { flex: none; }
.form__bild {
  flex: none; width: 120px; height: 80px; object-fit: cover;
  border-radius: calc(var(--radius) - 6px); background: var(--card);
}

@media (max-width: 560px) {
  .brief__bild img { max-height: 15rem; }
  .form--bild label { flex-basis: 100%; }
}

/* Kreatörsraden på startsidan --------------------------------------------
   Sajten handlar om att koppla ihop människor och visade inga. Raden tänds
   först när det finns minst fyra profiler som sagt något om sig själva, se
   KREATORER_MIN i content.js: fyra tomma kort med bara en initial är ett
   sämre förstaintryck än ingen rad alls. */
.kreatorrad__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.kreatorkort {
  display: grid; justify-items: center; gap: .3rem; text-align: center;
  padding: 1.3rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.kreatorkort:hover { border-color: var(--accent); transform: translateY(-2px); }
.kreatorkort .avatar { margin-bottom: .5rem; }
.kreatorkort strong { color: var(--ink); font-size: .98rem; line-height: 1.25; }
.kreatorkort__kat { color: var(--accent); font-size: .8rem; font-weight: 700; }
.kreatorkort__ort { color: var(--ink-3); font-size: .82rem; }
.kreatorkort__pris { margin-top: .3rem; color: var(--ink); font-size: .88rem; font-weight: 700; }

@media (max-width: 560px) {
  .kreatorrad__lista { grid-template-columns: repeat(2, 1fr); }
  .kreatorkort { padding: 1rem .6rem; }
}

/* Vägen vidare -------------------------------------------------------------
   Sista lektionen i en kurs var en återvändsgränd: pilen till höger blev ett
   tomt span och kurssidan pekade inte vidare alls. Rutan säger vad som kommer
   sedan, och den räknas ut ur kursplanens ordning så att den följer med när
   ett spår avpubliceras. */
.vidare {
  display: grid; gap: .35rem; justify-items: start;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  padding: 1.5rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.vidare__kicker {
  margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep);
}
.vidare__titel { margin: 0 0 .6rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); }

/* Kreatörsbloggen -----------------------------------------------------------
   Formuläret är formatet, se src/routes/blogg.js och src/lib/aeo.js. Listan
   till höger visar kraven och tipsen och uppdateras av app.js medan man
   skriver. Samma svarsruta som Their Legacy: det korta svaret i fetstil
   först, frågorna sist. */
.blogg-redigera { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; align-items: start; }
.blogg-form { margin-top: 0; }
.blogg-form__par { display: grid; gap: .6rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.blogg-form__par:first-of-type { border-top: 0; }
.aeo {
  position: sticky; top: 1.5rem;
  padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); display: grid; gap: .5rem;
}
.aeo__rubrik { margin: 0; font-size: 1.05rem; }
.aeo__del { margin: .4rem 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.aeo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .88rem; line-height: 1.4; }
.aeo__punkt { display: grid; grid-template-columns: 1.1rem 1fr; gap: .4rem; color: var(--ink-2); }
.aeo__ikon::before { content: "○"; color: var(--ink-3); }
.aeo__punkt--ok .aeo__ikon::before { content: "✓"; color: var(--ok); font-weight: 700; }
.aeo__punkt--fel .aeo__ikon::before { content: "✕"; color: var(--hot-ink); font-weight: 700; }
.aeo__punkt--fel { color: var(--ink); }
.aeo__punkt--tips .aeo__ikon::before { content: "·"; color: var(--ink-3); font-weight: 700; }
.aeo__nu { color: var(--ink-3); white-space: nowrap; }
.blogg-ta-bort { margin-top: 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.blogg__reklam {
  display: inline-block; margin: 0 0 .9rem; padding: .25rem .6rem; border-radius: 6px;
  background: var(--warn-soft); color: var(--hot-ink); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.blogg__reklam--liten { margin-bottom: .4rem; font-size: .74rem; }
.blogg__svar { font-size: 1.12rem; line-height: 1.6; }
.blogg__svar strong { font-weight: 700; }
.blogg__faq { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.blogg__forfattare {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  max-width: var(--measure); margin-top: 2.5rem; margin-bottom: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line);
}
.blogg__forfattare p { margin: 0 0 .4rem; color: var(--ink-2); }
.blogg__namn { font-weight: 700; }
.blogg__namn a { text-decoration: none; color: var(--ink); }

.blogglista-publik { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
.blogglista-publik__rad { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.blogglista-publik__titel { margin: 0 0 .4rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.3; }
.blogglista-publik__titel a { text-decoration: none; color: var(--ink); }
.blogglista-publik__titel a:hover { color: var(--accent); }
.blogglista-publik__svar { margin: 0 0 .7rem; color: var(--ink-2); }
.blogglista-publik__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; color: var(--ink-3); font-size: .85rem; }
.assistenter { margin: 1rem 0 1.6rem; }
.blogg-avpublicera { display: inline; margin: 0 0 0 .4rem; }

@media (max-width: 900px) {
  .blogg-redigera { grid-template-columns: 1fr; gap: 1.5rem; }
  .aeo { position: static; order: -1; }
}

/* Redaktionens startsida: det som väntar på beslut, som klickbara siffror.
   Siffror över noll får accentfärgen, så att det som kräver något syns först. */
.attgora { margin: 1.4rem 0 .4rem; }
.stat--lank { text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.stat--lank:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat--vantar { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.stat--vantar strong { color: var(--accent); }

/* Filmleveransen, se src/routes/leverans.js. Spelaren är stående som en reel
   och får aldrig bli högre än fönstret: företaget ska se hela bilden, också
   taggen nere till vänster, utan att scrolla. */
/* Spelaren. Ramen bestämmer storleken och formen, filmen fyller ramen. Förut
   bar videon själv width: auto + max-height + aspect-ratio i ett grid: då
   räknade raden med filmens egen form medan lådan ritades med en annan, och
   en liggande film svämmade över sidhuvudet. Formen kommer som klass från
   servern (CSP:n tillåter inga style-attribut). */
/* Sidhuvudet är klistrat. Utan marginalen hamnar rubriken under det när en
   länk eller en omdirigering går till #film, #chatt och liknande. */
[id] { scroll-margin-top: 5.5rem; }

.film { margin: 0 0 1.2rem; }
.film__ram {
  position: relative; width: 100%; background: #000; overflow: hidden;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.film__ram--liggande { aspect-ratio: 16 / 9; max-width: 48rem; }
.film__ram--kvadrat { aspect-ratio: 1 / 1; max-width: 30rem; }
.film__ram--fyrafem { aspect-ratio: 4 / 5; max-width: 26rem; }
.film__ram--staende { aspect-ratio: 9 / 16; max-width: 22rem; }
.film__video {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.film figcaption { margin-top: .5rem; color: var(--ink-3); font-size: .85rem; }
.film--vantar {
  padding: 1.1rem 1.3rem; max-width: 36rem; background: var(--paper-2);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.film--vantar p { margin: 0 0 .6rem; color: var(--ink-2); }
.film--vantar p:last-child, .film--vantar form { margin-bottom: 0; }

/* Fakta om filen som laddas ned, under förhandsvisningen. */
.filfakta {
  max-width: 36rem; margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.filfakta__rubrik { margin: 0 0 .7rem; font-size: 1rem; }
.filfakta__lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .7rem 1.2rem; margin: 0;
}
.filfakta__lista div { min-width: 0; }
.filfakta__lista dt { font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.filfakta__lista dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.filfakta__lista small { font-weight: 400; color: var(--ink-3); }
.filfakta__ok {
  display: inline-block; margin-top: .2rem; padding: .05rem .5rem; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); font-size: .75rem; font-weight: 700;
}
.filfakta__varning {
  margin: .8rem 0 0; padding: .55rem .8rem; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--hot-ink); font-size: .88rem;
}
.filfakta__not { margin: .8rem 0 0; font-size: .82rem; color: var(--ink-3); }

.uppladdning { width: 100%; max-width: 36rem; }
.uppladdning__status { display: grid; gap: .35rem; }
.uppladdning__status[hidden] { display: none; }
.uppladdning progress { width: 100%; height: .6rem; accent-color: var(--accent); }
.uppladdning__text { font-size: .9rem; color: var(--ink-2); }

.leveranssteg {
  list-style: none; counter-reset: steg; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: 1.1rem 0 0; padding: 0; font-size: .85rem; color: var(--ink-3);
}
.leveranssteg__steg { counter-increment: steg; display: inline-flex; align-items: center; gap: .45rem; }
.leveranssteg__steg::before {
  content: counter(steg); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-weight: 700;
}
.leveranssteg__steg--klar { color: var(--ok); font-weight: 700; }
.leveranssteg__steg--klar::before { content: "✓"; background: var(--ok-soft); border-color: var(--ok); }

.versioner { margin-top: 1rem; }
.versioner summary { cursor: pointer; font-weight: 700; }

.form__belopp { display: grid; gap: .2rem; font-size: .85rem; font-weight: 700; }
.form__belopp input { width: 8rem; padding: .45rem .6rem; font: inherit; font-weight: 400; }
.form__belopp small { font-weight: 400; color: var(--ink-3); max-width: 18rem; }
.page-head .brieffacts { margin-top: 1rem; }
/* Formulären i en callout ska vara fullbreda: callouten radar upp innehållet
   till vänster, och en textruta blev annars smal som en knapp. */
.callout .form { width: 100%; max-width: 36rem; }

/* Brödsmulorna: sista ledet är sidan själv. Ett långt uppdrags- eller
   artikelnamn kortas med ellips i stället för att bryta raden i tre. */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .1rem; }
.crumbs [aria-current="page"] {
  color: var(--ink-2); max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px) { .crumbs [aria-current="page"] { max-width: 22ch; } }

/* Aktivitetsloggen, /redaktion/logg/. */
.logg__oversikt { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.logg__topp { margin: 0 0 1.4rem; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .92rem; }
.logg__topp span { color: var(--ink-3); font-size: .82rem; margin-left: .3rem; }
.logg__filter { margin-bottom: 1rem; }
.logg__filter label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 700; }
.logg__filter select, .logg__filter input { font: inherit; font-weight: 400; padding: .4rem .5rem; }
.logg__tabell { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.logg__tabell table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.logg__tabell th, .logg__tabell td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.logg__tabell th { position: sticky; top: 0; background: var(--paper-2); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.logg__tid { white-space: nowrap; color: var(--ink-3); }
.logg__vag a { word-break: break-all; }
.logg__vag small { display: block; color: var(--ink-3); }
.logg__siffra { text-align: right; white-space: nowrap; color: var(--ink-3); }
.logg__rad--handling td:nth-child(3) { font-weight: 700; }
.logg__rad--varning td:nth-child(3), .logg__rad--fel td:nth-child(3) { color: var(--accent); }
.logg__besok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }

/* Uppdragssidan i två spalter (UX-genomgången 2026-09-15): texten till vänster,
   fakta och nästa steg i ett kort som följer med när man scrollar. På mobil
   hamnar kortet överst och knappen ligger fast i nederkant. */
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; padding-block: .5rem 3rem; }
.brief-layout__sida { position: sticky; top: 88px; }
.brief-kort {
  display: grid; gap: .9rem; padding: 1.2rem 1.3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.brieffacts--kort { grid-template-columns: 1fr 1fr; padding: 0; border: 0; background: none; box-shadow: none; }
.brief-kort .brief__spar, .brief-kort .brief__produkt { margin: 0; font-size: .9rem; }
.brief-kort__knapp { width: 100%; }
.brief-kort__lank { text-align: center; font-size: .9rem; }
.brief-layout .brief__bild { margin-block: 0 1.2rem; }
.mobil-cta { display: none; }
@media (max-width: 900px) {
  .brief-layout { grid-template-columns: 1fr; gap: 1.2rem; padding-bottom: 5.5rem; }
  .brief-layout__sida { position: static; order: -1; }
  .mobil-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  .mobil-cta .btn { width: 100%; }
}

/* Utloggad: Logga in och Skapa konto i sidhuvudet. På smala skärmar flyttar
   Logga in in i den hopfällda menyn så att huvudet ryms på en rad. */
.site-head__account { gap: .6rem; }
.nav__mobil-login { display: none; }
@media (max-width: 560px) {
  .nav__logga-in { display: none; }
  .nav__mobil-login { display: block; }
  .nav__skapa { padding: .5rem .9rem; }
}
@media (max-width: 900px) {
  .brief-layout:has(~ .mobil-cta) .brief-kort__knapp,
  .brief-layout:has(~ .mobil-cta) .brief-kort__lank { display: none; }
}

/* Olästa i menyn. */
.nav__inbox { display: inline-flex; align-items: center; gap: .35rem; }
.nav__antal {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 800; line-height: 1;
}

/* Besked från UGC-guiden i inkorgen och leveranschatten: en egen, lugnare
   bubbla med knapp till nästa steg, så att den inte förväxlas med en person. */
.bubbla--system { background: var(--paper-2); border: 1px dashed var(--line); max-width: 100%; }
.bubbla--system .bubbla__topp span { color: var(--accent-deep); }
.bubbla__knapp { margin-top: .6rem; }
/* Knappen till nästa steg i inkorgen: under texten på mobil, till höger på dator. */
.samtal { flex-wrap: wrap; align-items: center; }
.samtal__steg { flex: 0 0 auto; }
@media (max-width: 560px) { .samtal__steg { flex-basis: 100%; } }


/* ---------- startsidan utloggad: hjälte, dörrar och stegen (2026-09-16) ---------- */

.starthero {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--line);
}
.starthero__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem;
  align-items: center; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.starthero__kicker {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.starthero__title {
  margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.035em;
  text-wrap: balance;
}
.starthero__lead { margin: 1.1rem 0 0; max-width: 34rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }

.dorrar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1.8rem; }
.dorr {
  display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.dorr:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.dorr--foretag { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dorr--foretag:hover { border-color: var(--accent-deep); }
.dorr__vem { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.dorr__vad { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.dorr__dek { font-size: .86rem; line-height: 1.45; opacity: .85; }

.starthero__bild { position: relative; min-height: 26rem; display: grid; place-items: center; }
.telefon {
  width: 13.5rem; aspect-ratio: 9 / 18.5; padding: .55rem; border-radius: 2rem;
  background: #1b1412; box-shadow: var(--shadow-lift); transform: rotate(-4deg);
}
.telefon__skarm {
  position: relative; height: 100%; border-radius: 1.55rem; overflow: hidden;
  background: linear-gradient(160deg, #f0a93f 0%, #c0492b 55%, #5a2012 100%);
  display: grid; place-items: center;
}
.telefon__mark {
  position: absolute; left: 50%; transform: translateX(-50%) rotate(-24deg); white-space: nowrap;
  font-size: .95rem; font-weight: 800; letter-spacing: .06em; color: rgba(255, 255, 255, .42);
}
.telefon__mark:nth-child(1) { top: 22%; }
.telefon__mark:nth-child(2) { top: 47%; }
.telefon__mark:nth-child(3) { top: 72%; }
.telefon__play {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 1.1rem; padding-left: .2rem;
}
.telefon__tagg {
  position: absolute; left: .8rem; bottom: 34%; padding: .15rem .45rem; border-radius: .35rem;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: .7rem; font-weight: 700;
}
.flyt {
  position: absolute; padding: .55rem .85rem; border-radius: 999px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: .82rem; font-weight: 700; color: var(--ink);
}
.flyt--ett { top: 12%; right: 0; }
.flyt--tva { top: 48%; left: 0; font-variant-numeric: tabular-nums; }
.flyt--tre { bottom: 10%; right: 4%; background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.flyt__bock { color: var(--ok); }

.stegkort {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.stegkort__steg {
  position: relative; padding: 1.2rem 1.2rem 1.3rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.stegkort__nr {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: .9rem;
}
.stegkort__steg h3 { margin: .8rem 0 .35rem; font-size: 1rem; }
.stegkort__steg p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }

@media (max-width: 900px) {
  .starthero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .starthero__bild { display: none; }
  .stegkort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dorrar { grid-template-columns: 1fr; }
  .stegkort { gap: .6rem; }
  .stegkort__steg { padding: .9rem; }
  .stegkort__steg h3 { font-size: .92rem; margin-top: .55rem; }
  .stegkort__steg p { font-size: .82rem; }
}
@media (max-width: 360px) {
  .stegkort { grid-template-columns: 1fr; }
}

/* Företagssidan: fakta under knapparna, leveransen med miniatyr, bocklista. */
.hero__fakta { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-3); }
.leveransvisning {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center;
}
.leveransvisning .starthero__bild { min-height: 24rem; }
.bocklista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .85rem; }
.bocklista li { position: relative; padding-left: 2rem; color: var(--ink-2); line-height: 1.55; }
.bocklista li::before {
  content: "✓"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
  font-size: .75rem; font-weight: 800;
}
.bocklista strong { color: var(--ink); }
.stegkort__alt { margin: 1rem 0 0; color: var(--ink-2); }
@media (max-width: 900px) {
  .leveransvisning { grid-template-columns: 1fr; gap: 1rem; }
}

/* Uppdragskortet: taggar på en rad, fakta som rutor under rubriken. */
.uppdragskort__taggar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
.uppdragskort__taggar .tag { margin: 0; }
.uppdragskort__fakta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.uppdragskort__fakta div { min-width: 0; padding: .4rem .65rem; border-radius: var(--radius-sm); background: var(--paper-2); }
.uppdragskort__fakta dt { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.uppdragskort__fakta dd { margin: .05rem 0 0; font-size: .88rem; font-weight: 700; color: var(--ink); }
.card--brief .card__media img { object-fit: cover; width: 100%; height: 100%; }

/* Företagspanelen: att göra överst, redigering bakom utfällning, handlingar på en rad. */
.vantarpa { padding-block: 0 1rem; }
.vantarpa__rubrik { margin: 0 0 .7rem; font-size: 1.05rem; }
.vantarpa__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vantarpa__rad {
  display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.vantarpa__antal {
  flex: 0 0 auto; display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800;
}
.vantarpa__text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.vantarpa__tomt {
  margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 600;
}
.redigera { margin: .8rem 0 0; }
.redigera > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 700; color: var(--ink-2); padding: .3rem 0;
}
.redigera > summary:hover { color: var(--accent); }
.redigera[open] > summary { margin-bottom: .6rem; }
.applicant__handling { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .7rem; }
.applicant__handling .form--inline { margin: 0; }
.valj > summary { list-style: none; }
.valj > summary::-webkit-details-marker { display: none; }
.valj[open] { flex-basis: 100%; }
.valj[open] > summary { margin-bottom: .5rem; }
.valj__form {
  margin: 0; padding: .9rem 1rem; border-radius: var(--radius-sm);
  background: var(--paper-2); border: 1px solid var(--line); max-width: 34rem;
}
@media (max-width: 560px) {
  .vantarpa__rad { flex-wrap: wrap; }
  .vantarpa__rad .btn { margin-left: auto; }
}

/* Ärendesidan: vems tur, två spalter på dator, kravkort och släppyta. */
.tur {
  margin: .9rem 0 0; padding: .6rem .9rem; border-radius: var(--radius-sm);
  background: var(--paper-2); color: var(--ink-2); font-size: .92rem; display: inline-block;
}
.tur--min { background: var(--accent-soft); color: var(--accent-deep); }
.tur--klar { background: var(--ok-soft); color: var(--ok); }
.arende {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: 2rem; align-items: start;
}
.arende > .arende__huvud > .wrap, .arende > .arende__sida > .wrap { width: auto; margin-inline: 0; }
.arende__sida { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
.arende__sida > .section { padding-block: 0; }
.arende__huvud > .section:first-child { padding-block-start: 0; }
.arende__huvud > .section:first-child > :first-child { margin-top: 0; }
.arende__sida .callout { margin: 0; }
.kravkort {
  padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.kravkort__rubrik { margin: 0 0 .5rem; font-size: 1rem; }
.kravkort .prose { font-size: .92rem; }
.kravkort__datum { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-2); }
.kravkort__lank { margin: .5rem 0 0; font-size: .88rem; }
.slapp { display: grid; gap: .45rem; }
.slapp input[type="file"] {
  width: 100%; padding: 1.4rem 1rem; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-2); cursor: pointer; font-size: .92rem;
}
.slapp input[type="file"]:hover, .slapp input[type="file"]:focus { border-color: var(--accent); }
.slapp input[type="file"]::file-selector-button {
  margin-right: .9rem; padding: .55rem 1rem; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer;
}
.slapp__hint { font-weight: 400; font-size: .85rem; color: var(--ink-3); }
@media (max-width: 960px) {
  .arende { grid-template-columns: 1fr; }
  .arende__sida { position: static; }
}

/* Mobilraden: fakta till vänster, knappen till höger. */
@media (max-width: 900px) {
  .mobil-cta { display: flex; align-items: center; gap: .8rem; }
  .mobil-cta .btn { width: auto; flex: 0 0 auto; }
  .mobil-cta__fakta { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
  .mobil-cta__fakta strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobil-cta__fakta span { font-size: .78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.mobil-cta--arende) .site-foot { padding-bottom: 5rem; }
}
@media (min-width: 901px) {
  .mobil-cta--arende { display: none; }
}

/* Ansökningsmapparna på företagspanelen. */
.mapp { margin-top: .6rem; }
.mapp > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 0;
  font-weight: 800; font-size: .92rem; color: var(--ink);
}
.mapp > summary:hover { color: var(--accent); }
.mapp .applicants { margin-top: .4rem; }

/* Galleriet /filmer/: större kort, bransch och beställknapp. */
.videos--galleri { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.video-card__bransch { justify-self: start; margin: 0; }
.video-card__bestall { justify-self: start; margin-top: .2rem; }

/* Verifieringsintyget /intyg/<id>/ och delningsrutan på Mina sidor. */
.intyg {
  max-width: 36rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line);
  border-top: 4px solid var(--ok); border-radius: var(--radius); background: var(--paper-2);
}
.intyg__marke { margin: 0 0 .8rem; }
.intyg__fakta { display: grid; gap: .7rem; margin: 0; }
.intyg__fakta div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .8rem; }
.intyg__fakta dt { color: var(--ink-3); font-size: .9rem; }
.intyg__fakta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.intyg__fakta code { font-weight: 400; font-size: .85rem; }
@media (max-width: 480px) { .intyg__fakta div { grid-template-columns: 1fr; gap: .1rem; } }
.intygdelning { margin: .9rem 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.intygdelning p { margin: 0 0 .6rem; }
.intygdelning p:last-child { margin-bottom: 0; }
.intygdelning__lank { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.intygdelning__lank code { overflow-wrap: anywhere; font-size: .85rem; padding: .35rem .6rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.intygdelning__knappar { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Artikelmallen (UX-granskningen 2026-09-16, punkt 5). Textkolumnen är
   densamma som förut, --measure i mitten. Förteckningen ligger i marginalen
   till vänster på bred skärm och som hopfälld ruta i flödet på smal. */
.post__roll { color: var(--ink-3); }
.kortsvar {
  max-width: var(--measure); margin-bottom: 2rem; padding: 1rem 1.2rem;
  background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.kortsvar__rubrik {
  margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep);
}
.kortsvar__text { margin: 0; line-height: 1.65; }
.post__kropp { position: relative; }
.post__kropp > .prose, .post__kropp > .toc--mobil, .post__kropp > .post__cta, .post__kropp > .forfattare {
  max-width: var(--measure); margin-inline: auto;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 1.6rem 1fr; padding: .35rem 0; text-decoration: none;
  color: var(--ink-2); font-size: .9rem; line-height: 1.4;
}
.toc a::before { content: counter(toc) "."; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--accent-deep); }
.toc a[aria-current="true"] { font-weight: 700; }
.toc--mobil {
  margin-bottom: 2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.toc--mobil summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; }
.toc--mobil summary span { font-weight: 400; color: var(--ink-3); margin-left: .3rem; }
.toc--mobil nav { padding: 0 1rem .8rem; }
.toc--sida { display: none; }
.toc__rubrik {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 1100px) {
  .toc--mobil { display: none; }
  .toc--sida {
    display: block; position: absolute; top: 0; bottom: 0; left: 0;
    width: calc((100% - var(--measure)) / 2 - 2.5rem);
  }
  .toc__inre { position: sticky; top: 6rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
}
.post__cta {
  margin-top: 2.5rem; padding: 1.2rem 1.3rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.post__cta p { margin: 0 0 .8rem; }
.post__cta .post__cta-rubrik { font-weight: 700; font-size: 1.1rem; margin-bottom: .2rem; }
.forfattare {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.forfattare .avatar { flex: 0 0 auto; }
.forfattare p { margin: 0; }
.forfattare__namn span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.forfattare__namn a { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.forfattare__roll { color: var(--ink-2); font-size: .92rem; }
.forfattare__bio { color: var(--ink-2); font-size: .92rem; margin-top: .4rem !important; }
.forfattare__mer { display: inline-block; margin-top: .5rem; font-size: .9rem; color: var(--accent-deep); }

/* Tv-raden på startsidan: en rad som scrollar i sidled, med en glimt av nästa
   kort som visar att det finns fler. Ett rutnät gav tomma rutor så fort antalet
   inte gick jämnt upp i kolumnerna. */
.filmrad .videos--rad {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1.1rem) / 4.3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-bottom: .7rem; scrollbar-width: thin;
}
.videos--rad > li { scroll-snap-align: start; }
@media (max-width: 900px) { .filmrad .videos--rad { grid-auto-columns: calc((100% - 1.1rem) / 2.3); } }
@media (max-width: 560px) { .filmrad .videos--rad { grid-auto-columns: 78%; } }

/* Landningssidan för den globala sajten, routes/landing.js (2026-09-16).
   Trybes struktur: en mening per sida av marknaden, tre steg med produkten i
   miniatyr, ett påstående, pris på en rad, vanliga frågor. */
.landning__knappar { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.landning__liten { margin: .8rem 0 0; font-size: .86rem; color: var(--ink-3); }
.landning__huvud { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.landning__huvud .section__lead { margin: .4rem auto 0; }

.landning__steg {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem;
}
.stegkort2 {
  display: flex; flex-direction: column; padding: .8rem .8rem 1.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
}
.stegkort2 h3 { margin: .2rem .6rem .4rem; font-size: 1.2rem; letter-spacing: -.015em; }
.stegkort2 > p:last-child { margin: 0 .6rem; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.stegkort2__bild {
  display: grid; place-items: center; min-height: 16.5rem; padding: 1.4rem;
  border-radius: var(--radius); margin-bottom: 1.1rem;
}
.stegkort2__bild--ett { background: var(--accent-soft); }
.stegkort2__bild--tva { background: var(--warn-soft); }
.stegkort2__bild--tre { background: var(--ok-soft); }
.stegkort2__nr { margin: 0 .6rem; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stegkort2__nr--ett { color: var(--accent); }
.stegkort2__nr--tva { color: var(--hot-ink); }
.stegkort2__nr--tre { color: var(--ok); }

.miniui {
  width: 100%; max-width: 17rem; padding: .9rem 1rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); font-size: .8rem; color: var(--ink);
}
.miniui p { margin: 0; }
.miniui__rubrik { font-weight: 700; font-size: .95rem; }
.miniui__under { color: var(--ink-3); font-size: .74rem; margin-top: .1rem !important; }
.miniui__fakta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .8rem 0; }
.miniui__fakta span { padding: .45rem .5rem; border-radius: 9px; background: var(--paper-2); font-weight: 700; }
.miniui__fakta small { display: block; font-weight: 500; font-size: .66rem; color: var(--ink-3); }
.miniui__status {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .72rem;
}
.miniui__lista { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.miniui__lista li {
  display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem;
  border-radius: 9px; background: var(--paper-2);
}
.miniui__lista li > span:last-child {
  margin-left: auto; padding: .1rem .45rem; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .68rem;
}
.miniui__lista .miniui__vantar > span:last-child { background: var(--line); color: var(--ink-2); }
.miniui__ring { width: .8rem; height: .8rem; border-radius: 50%; border: 2px dashed var(--ink-3); }
.miniui__stor { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 .8rem !important; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.miniui__rad { display: flex; justify-content: space-between; gap: .6rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.miniui__rad strong { font-variant-numeric: tabular-nums; }
.miniui__stapel { height: .45rem; margin-top: .5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.miniui__stapel span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--accent); }
.bock { color: var(--ok); font-weight: 800; }

.landning__pastaende { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; text-align: center; }
.landning__pastaende h2 { margin: 0; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; }
.understruken { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .12em; }

.landning__sidor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.landning__sida {
  display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.landning__sida h3 { margin: 0 0 1rem; font-size: 1.35rem; letter-spacing: -.02em; }
.landning__bockar { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; color: var(--ink-2); }
.landning__bockar li { display: flex; gap: .55rem; line-height: 1.45; }
.landning__sida .btn { margin-top: auto; }

.landning__pris { text-align: center; max-width: 40rem; }
.landning__pris h2 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); letter-spacing: -.03em; }
.landning__pris > p { color: var(--ink-2); margin: 0 auto; max-width: 32rem; }
.landning__priser { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.2rem 0 1.5rem !important; }
.landning__priser span { padding: .35rem .8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; }
.landning__faq { margin: 1.2rem auto 0; }
.landning__faqdel .section__title { text-align: center; }

.landning__slut { padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0; text-align: center; background: var(--accent-soft); }
.landning__slut h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -.03em; }
.landning__slut .landning__knappar { justify-content: center; }

@media (max-width: 860px) {
  .landning__steg, .landning__sidor { grid-template-columns: 1fr; }
}

/* Publika företagssidor och följ-knappen, routes/varumarken.js (2026-09-16). */
.foretagsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.foretagskort {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.foretagskort__topp { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.foretagskort__topp:hover .foretagskort__namn { color: var(--accent); }
.foretagskort__namn { font-weight: 800; font-size: 1.1rem; }
.foretagskort__om { margin: 0; color: var(--ink-2); font-size: .92rem; }
.foretagskort__meta, .foretagshuvud__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; color: var(--ink-3); font-size: .86rem; }
.foretagskort .foljform, .foretagskort > .btn { margin-top: auto; align-self: flex-start; }
.foretagslogga {
  display: grid; place-items: center; flex: none; object-fit: contain;
  border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line);
}
.foretagslogga--md { width: 3rem; height: 3rem; }
.foretagslogga--lg { width: 4.5rem; height: 4.5rem; border-radius: 18px; }
.foretagslogga--initial { font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; }
.foretagslogga--lg.foretagslogga--initial { font-size: 1.8rem; }
.foretagshuvud__rad { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
.foretagshuvud__text { flex: 1 1 14rem; min-width: 0; }
.foretagshuvud__text h1 { margin: 0 0 .3rem; }
.foretagshuvud__om { margin-top: 1.2rem; max-width: var(--measure); color: var(--ink-2); }
.foretagshuvud__om p { margin: 0 0 .7rem; }
.foretagshuvud__not { margin: .8rem 0 0; color: var(--ink-3); font-size: .9rem; }
.foljform { margin: 0; }
.inlaggslista { display: grid; gap: 1rem; max-width: 46rem; }
.inlagg { padding: 1.1rem 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inlagg__datum { margin: 0; color: var(--ink-3); font-size: .82rem; }
.inlagg__rubrik { margin: .2rem 0 .5rem; font-size: 1.1rem; }
.inlagg__text p { margin: .4rem 0 0; color: var(--ink-2); }
.inlaggsrader { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.inlaggsrader li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.inlaggsrader small { color: var(--ink-3); margin-left: .4rem; }
.inlaggsrader form { margin: 0; }
.brief__foretag { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.brief__foretag small { color: var(--ink-3); }

/* Betyg åt båda håll, supabase/betyg.sql (2026-09-16). Stjärnorna står i
   omvänd ordning i koden så att ~-selektorn kan färga dem upp till den valda. */
.betyg { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--ok) 25%, var(--line)); }
.betyg__falt { border: 0; padding: 0; margin: 0; }
.betyg__falt legend { font-weight: 700; margin-bottom: .3rem; }
.betyg__stjarnor { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.betyg__stjarnor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.betyg__stjarnor label { font-size: 1.9rem; line-height: 1; color: var(--line); cursor: pointer; margin: 0; }
.betyg__stjarnor label:hover, .betyg__stjarnor label:hover ~ label,
.betyg__stjarnor input:checked ~ label { color: var(--hot); }
.betyg__stjarnor input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.betyg__klart { margin: 1rem 0 0; }
.stjarnor { color: var(--hot-ink); letter-spacing: .08em; }
.betyg__snitt { color: var(--ink-2); font-weight: 700; }
.betyg__snitt > span { color: var(--hot); }
.omdome { margin: 0; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.omdome p { margin: 0; }
.omdome blockquote { margin: .4rem 0; color: var(--ink); }
.omdome figcaption { color: var(--ink-3); font-size: .84rem; }

/* Massgranskning i företagspanelen (2026-09-16). */
.massgranskning__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.massgranskning__lista li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.massgranskning__lista .form__check { margin: 0; }
.massgranskning__knappar { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

/* Produktprov och löpande program (2026-09-17). */
.produkt__adress {
  font-style: normal; line-height: 1.5; margin: .6rem 0 1rem; padding: .7rem .9rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.filmflikar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 .3rem; }
.filmflikar__flik {
  display: inline-flex; flex-direction: column; padding: .4rem .75rem; line-height: 1.25;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.filmflikar__flik small { font-weight: 400; font-size: .78rem; color: var(--ink-3); }
.filmflikar__flik--vald { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.filmflikar__flik--kommande { background: transparent; border-style: dashed; color: var(--ink-3); }
.filmflikar__antal { margin-left: .3rem; font-size: .86rem; color: var(--ink-3); }
.form__antal input { max-width: 9rem; }

/* Landningssidan: funktionerna efter första filmen (2026-09-17). */
.landning__funktioner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.funktion { padding: 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.funktion h3 { margin: 0 0 .45rem; font-size: 1.08rem; letter-spacing: -.01em; }
.funktion p { margin: 0; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1000px) { .landning__funktioner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .landning__funktioner { grid-template-columns: 1fr; } }