@import url('/css/fonts.css');
@import url('/css/palette.css');

/* =========================================================================
   Tävlingsdags

   Efter designsystemet Steep: serif-redaktion på varmt papper. Nästan helt
   akromatiskt, serif i vikt 400 i alla storlekar, kort utan skugga, och en
   enda persikoaccent.

   Två saker är medvetna avsteg från specen, båda för att sajten är ett flöde
   och inte en produktsida:

   1. Kategorierna har en egen varm ton. Steep tillåter bara persika och
      sienna, men ett flöde utan färg till vänster om titeln är platt att
      skanna. Tonerna är lånade ur samma pigmentvärld, se lib/palette.js.
   2. Persikan används på fler än ett ställe per sida, eftersom den bär
      chansbedömningen och den återkommer i flödet.
   ========================================================================= */

:root {
  --ink: #17191c;
  --paper: #ffffff;
  --mist: #f2f2f3;
  --fog: #fafafb;
  --slate: #777b86;
  --ash: #8a8a8d;
  --hairline: #ececec;
  --rule-strong: #d8d8d9;

  --blush: #fbe1d1;
  --sienna: #5d2a1a;

  /* Semantiskt tillstånd, inte varumärkesfärg: enbart deadline. */
  --urgent: #9c2f0d;
  --urgent-soft: #fdeee8;

  --serif: 'Source Serif 4', 'Source Serif Pro', ui-serif, Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --artifact: 0 0 0 1px rgb(4 23 43 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Steeps två strukturradier: helrunda kontroller, 24px på kort. */
  --r-pill: 9999px;
  --r-card: 24px;
  --r-panel: 20px;
  --r-media: 12px;
  --r-input: 16px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --slow: 480ms;

  --page: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3rem, 7vw, 80px);
}

/* Steep är ett ljust system. Mörkt läge är en kompetent invertering så att
   sajten inte bränner näthinnan, inte en andra design. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0efec;
    --paper: #14140f;
    --mist: #1e1e19;
    --fog: #1a1a15;
    --slate: #a3a29c;
    --ash: #8d8c86;
    --hairline: #2b2b25;
    --rule-strong: #3d3c35;
    --blush: #3a241a;
    --sienna: #f0c9ae;
    --urgent: #ff9d78;
    --urgent-soft: #2c1a13;
    --artifact: 0 0 0 1px rgb(255 255 255 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.6);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  font-variation-settings: 'opsz' 17;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

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

.shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-panel) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- typografi -- */

/* Serifen stannar på vikt 400 i alla storlekar. Systemets signatur: den
   viskar auktoritet i stället för att skrika i fetstil. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.24;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 5.6vw, 76px);
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.heading-lg { font-size: clamp(2rem, 4.2vw, 60px); letter-spacing: -0.018em; }
.heading { font-size: clamp(1.75rem, 3.2vw, 42px); letter-spacing: -0.015em; }

/* En kursiverad fras mitt i rubriken, i sienna. */
.display em, .heading em, .heading-lg em { font-style: italic; color: var(--sienna); }

.lede { font-size: 20px; line-height: 1.4; color: var(--slate); max-width: 48ch; }
.mono { font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); }
.dim { color: var(--ash); }

/* --------------------------------------------------------------- logga -- */

/* Maskoten är en skata. Fågeln varje svensk vet samlar allt som glimmar,
   vilket är precis vad sajten gör med tävlingar, och redan svartvit. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark svg { width: 34px; height: 34px; flex: none; display: block; }
.logo__ink { fill: var(--ink); }
.logo__beak { fill: var(--sienna); }
.logo__flash, .logo__eye { fill: var(--blush); }
/* Prickarna över ä. Det enda som skiljer ordbilden från brödtext. */
.wordmark i { font-style: normal; color: var(--sienna); }

@media (prefers-color-scheme: dark) {
  .logo__flash, .logo__eye { fill: var(--paper); }
}

/* ------------------------------------------------------------- sidhuvud -- */

/* Viskande tyst: ingen bakgrund, ingen ram, ingen skugga. */
.masthead { position: relative; z-index: 30; }
.masthead__bar { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: 24px; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-left: auto;
  font-size: 16px;
}
.masthead__nav a { text-decoration: none; padding-block: 2px; color: var(--ink); }
.masthead__nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Knappen i menyn är en knapp först och en menylänk sedan. Utan detta ärver
   den menyns textfärg och blir svart text på svart botten. */
.masthead__nav a.btn--primary, .masthead__nav a.btn--primary:hover { color: var(--paper); }
.masthead__nav a.btn--ghost:hover { color: var(--paper); }

.masthead__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .masthead__toggle { display: block; }
  .masthead__nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: var(--artifact);
    border-radius: 0 0 var(--r-card) var(--r-card);
  }
  .masthead__nav[data-open='true'] { display: flex; }
  .masthead__nav a { padding-block: 0.9rem; border-bottom: 1px solid var(--hairline); font-size: 18px; }
  .masthead__nav .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; }
}

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

/* Fylld pillerknapp parad med en spökpiller på samma baslinje. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease),
    color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { opacity: 0.86; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lg { height: 52px; padding-inline: 26px; font-size: 17px; }
.btn--plain { padding-inline: 20px; }

/* Pilen bor inte i en egen cirkel här. Steep sätter den som en del av
   etiketten, och den grammatiken gäller hela sajten. */
.btn__pip { display: none; }

.arrowlink { font-size: 16px; text-decoration: none; }
.arrowlink:hover { text-decoration: underline; text-underline-offset: 4px; }

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

.hero {
  padding-block: clamp(1.5rem, 4vw, 40px) var(--section);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blush) 46%, var(--paper)) 0%, var(--paper) 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--sienna) 12%, transparent);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(2rem, 5vw, 64px);
  align-items: center;
}
.hero .display { margin-bottom: 22px; }
.hero .lede { margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pulse {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--sienna) 16%, transparent);
  font-size: 16px;
  color: var(--slate);
  max-width: 42ch;
}
.pulse b { color: var(--sienna); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Kollaget. Produktfragment som överlappar varandra, lutar olika håll och har
   olika karaktär. Överlappet är det som gör det till ett kollage i stället
   för en prydlig kolumn med kort. */
.artifacts { position: relative; padding-block: 20px; }
.artifact {
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--artifact);
  padding: 16px 18px 14px;
}
.artifact__label { font-size: 14px; color: var(--ash); margin-bottom: 8px; }
.artifact__title { font-family: var(--serif); font-size: 19px; line-height: 1.24; }
.artifact__sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.artifact__metric { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }

.artifact--photo { position: relative; z-index: 2; width: 300px; margin-left: auto; padding: 12px 12px 14px; transform: rotate(1.4deg); }
.artifact--photo img { width: 100%; height: 168px; object-fit: cover; border-radius: var(--r-media); background: var(--mist); margin-bottom: 12px; }
.artifact--photo .artifact__title, .artifact--photo .artifact__sub { padding-inline: 4px; }

.artifact--gauge { position: relative; z-index: 3; width: 224px; margin-top: -18px; margin-left: -14px; transform: rotate(-1.8deg); }

.artifact--chance {
  position: relative;
  z-index: 4;
  width: 268px;
  margin-top: -18px;
  margin-left: auto;
  background: var(--blush);
  color: var(--sienna);
  box-shadow: 0 0 0 1px rgb(93 42 26 / 0.08), 0 18px 30px -14px rgb(93 42 26 / 0.35);
  transform: rotate(1.1deg);
}
.artifact--chance .artifact__label { color: var(--sienna); opacity: 0.75; }

.spark { display: block; width: 100%; height: 44px; margin-top: 10px; }
.spark path { fill: none; stroke: var(--sienna); stroke-width: 1.5; }

@media (max-width: 1119px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .artifacts { display: none; }
}

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

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2rem, 4vw, 48px); }
.section--fog { background: var(--fog); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 32px;
}
.section__more { font-size: 16px; text-decoration: none; }
.section__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font-size: 14px; color: var(--ash); margin-bottom: 10px; }

/* ---------------------------------------------------------------- flödet -- */

.feed { list-style: none; margin: 0; padding: 0; }

/* Fyra kolumner, för raden har fyra barn: tidsstämpel, bricka, innehåll och
   sifferkolumn. Med tre kolumner hamnade sifferkolumnen på egen rad och hela
   flödet såg sönderslaget ut. */
.row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 96px minmax(0, 1fr) 11rem;
  gap: 24px;
  align-items: start;
  padding-block: 26px;
  border-bottom: 1px solid var(--hairline);
}
.row:first-child { border-top: 1px solid var(--hairline); }

.row__when { font-size: 14px; color: var(--ash); }

/* Brickan finns alltid: arrangörens bild när den går att hämta, annars
   kategorins ton med sitt namn i. Aldrig en tom ruta. */
.row__tile {
  position: relative;
  width: 96px;
  height: 76px;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--cat, var(--cat-ovrigt));
  display: grid;
  place-items: center;
}
.row__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__tile-label {
  position: relative;
  padding-inline: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  hyphens: manual;
}

.row__main { min-width: 0; }
.row__main h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.row__main h3 a { text-decoration: none; }
.row__main h3 a::after { content: ''; position: absolute; inset: 0; }
.row:hover .row__main h3 { text-decoration: underline; text-underline-offset: 5px; }

.row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 15px;
  color: var(--slate);
}
.row__meta .sep { display: none; }

.row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.value { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sponsrat läge. Märkningen är inte förhandlingsbar. */
.row--sponsored { background: var(--fog); }
.sponsor-flag { font-size: 14px; color: var(--sienna); }

@media (max-width: 900px) {
  /* Två kolumner: brickan till vänster, allt annat staplat till höger. */
  .row { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 18px; }
  .row__tile { grid-row: span 3; grid-column: 1; }
  .row__when { grid-column: 2; }
  .row__main { grid-column: 2; }
  .row__aside {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    gap: 6px 16px;
  }
  .row__main h3 { font-size: 21px; }
}

/* ---------------------------------------------------------------- taggar -- */

/* Typografiska taggar: de grupperar utan visuell vikt. */
.tag { font-size: 14px; color: var(--ash); white-space: nowrap; text-decoration: none; }
a.tag:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tag--cat { color: var(--cat, var(--ash)); }

/* Chansmärkningen är den enda taggen som får en yta. Persika med sienna, som
   bläck på kraftpapper, och den bär den enda bedömning sajten själv gör. */
.tag--odds {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  background: var(--blush);
  color: var(--sienna);
  font-weight: 500;
}
.tag--platform { color: var(--ash); }
.tag--accent { color: var(--sienna); }
.tag--urgent { color: var(--urgent); font-weight: 500; }

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

.lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 16px; }

/* Standardkortet: platt, mjukt och tyst. Ingen skugga, ingen ram. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  border-radius: var(--r-card);
  overflow: hidden;
}

.card__face { position: relative; aspect-ratio: 16 / 10; background: var(--cat, var(--cat-ovrigt)); overflow: hidden; }
.card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__face-label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgb(10 10 14 / 0.5);
  color: #fff;
  font-size: 13px;
}

.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__body h3 { font-family: var(--serif); font-size: 20px; line-height: 1.26; letter-spacing: -0.01em; }
.card__body h3 a { text-decoration: none; }
.card__body h3 a::after { content: ''; position: absolute; inset: 0; }
.card:hover .card__body h3 { text-decoration: underline; text-underline-offset: 4px; }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__price { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__price em { font-style: normal; font-size: 0.7em; font-weight: 400; color: var(--slate); margin-left: 3px; }
.card__price--free { color: var(--slate); }

@media (max-width: 640px) { .card__face { aspect-ratio: 5 / 2; } }

/* --------------------------------------------------- avslutas snart-remsa -- */

.strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.strip > * { scroll-snap-align: start; flex: 0 0 min(19rem, 78vw); }
.mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--mist);
  border-radius: var(--r-card);
}
.mini h3 { font-family: var(--serif); font-size: 19px; line-height: 1.26; }
.mini h3 a { text-decoration: none; }
.mini h3 a::after { content: ''; position: absolute; inset: 0; }
.mini:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.mini__countdown { margin-top: auto; font-size: 14px; color: var(--urgent); }

/* ------------------------------------------------------------ kategorier -- */

.cats { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 40px; display: block; }
.cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  font-size: 17px;
  break-inside: avoid;
}
.cats a::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat, var(--cat-ovrigt));
  flex: none;
  margin-right: 2px;
  transform: translateY(-1px);
}
.cats a span { margin-left: auto; font-size: 14px; color: var(--ash); font-variant-numeric: tabular-nums; }
.cats a:hover { color: var(--cat, var(--ink)); }
@media (max-width: 860px) { .cats { columns: 2; } }
@media (max-width: 560px) { .cats { columns: 1; } }

/* ------------------------------------------------------------------ band -- */

/* Persikokortet. Det är det Steep kallar en redaktionell accent. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 5vw, 40px);
  background: var(--blush);
  color: var(--sienna);
  border-radius: var(--r-card);
}
.band h2 { font-family: var(--sans); font-size: 26px; font-weight: 500; letter-spacing: -0.009em; color: var(--sienna); }
.band p { font-size: 18px; margin-top: 10px; max-width: 52ch; }
.band .btn--primary { background: var(--sienna); color: var(--blush); }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ redaktionellt -- */

.prose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.prose h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; margin-bottom: 10px; }
.prose p { font-size: 17px; line-height: 1.55; color: var(--slate); }
.prose p + p { margin-top: 12px; }
.prose a { color: var(--ink); }

.page-body { max-width: 68ch; }
.page-body--wide { max-width: none; }
.page-body h2 { font-family: var(--sans); font-size: 22px; font-weight: 500; margin-top: 40px; margin-bottom: 10px; }
.page-body h2:first-child { margin-top: 0; }
.page-body p { font-size: 17px; line-height: 1.6; color: var(--ink); }
.page-body p + p { margin-top: 12px; }
.page-body a { color: var(--ink); }
.page-body .cats { max-width: none; }

/* ------------------------------------------------------------- detaljsida -- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; padding-block: clamp(2rem, 5vw, 48px); }
@media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 40px; } }

.detail h1 { font-size: clamp(1.875rem, 3.6vw, 44px); letter-spacing: -0.018em; margin-block: 14px 18px; }
.detail__media { border-radius: var(--r-media); overflow: hidden; margin-bottom: 28px; background: var(--mist); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ash); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Åtgärdspanelen är ett svävande produktfragment, inte ett innehållskort, och
   därför det enda elementet här som har skugga. */
.act { position: sticky; top: 24px; background: var(--paper); border-radius: var(--r-panel); box-shadow: var(--artifact); padding: 0; }
.act__inner { padding: 24px 20px 20px; }
.act .btn { width: 100%; }
.act__note { margin-top: 14px; font-size: 14px; color: var(--slate); line-height: 1.5; }

.facts { margin: 0 0 20px; display: grid; gap: 14px; }
.facts > div { display: grid; gap: 2px; }
.facts dt { font-size: 14px; color: var(--ash); }
.facts dd { margin: 0; font-size: 17px; }

/* ---------------------------------------------------------------- filter -- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 4px 24px; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--slate);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--odds[aria-pressed='true'] { background: var(--blush); border-color: var(--blush); color: var(--sienna); }

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

.form { display: grid; gap: 20px; max-width: 34rem; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 500; }
.field .hint { font-size: 14px; color: var(--slate); }
.field .err { font-size: 14px; color: var(--urgent); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ash); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 7rem; resize: vertical; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--urgent); }

/* Honeypot: osynlig för människor, lockande för skript. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 20px; border-radius: var(--r-card); background: var(--blush); color: var(--sienna); font-size: 16px; }
.notice--bad { background: var(--urgent-soft); color: var(--urgent); }

/* ------------------------------------------------------------------ tomt -- */

.empty { padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; text-align: center; background: var(--mist); border-radius: var(--r-card); }
.empty h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.empty p { color: var(--slate); max-width: 44ch; margin-inline: auto; margin-bottom: 20px; }

/* ------------------------------------------------------------- paginering -- */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; }
.pager__pos { font-size: 14px; color: var(--ash); }

/* ------------------------------------------------------------------- fot -- */

.foot { border-top: 1px solid var(--hairline); padding-block: 48px 40px; margin-top: var(--section); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 32px; }
.foot h4 { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ash); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { font-size: 16px; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ash);
}

/* -------------------------------------------------------------- notisfält -- */

/* Sajten sätter inga cookies. Det här är därför en upplysning och inte en
   samtyckesruta: den ber inte om lov, den berättar. */
.cookiebar {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  max-width: 26rem;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 18px 18px 20px;
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--artifact);
}
.cookiebar p { font-size: 15px; line-height: 1.5; color: var(--slate); }
.cookiebar a { color: var(--ink); }
.cookiebar[hidden] { display: none; }
@media (max-width: 620px) {
  .cookiebar { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; }
}

/* ---------------------------------------------------------------- rörelse -- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ admin -- */

.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; font-size: 14px; font-weight: 400; color: var(--ash); padding: 10px 12px; border-bottom: 1px solid var(--rule-strong); }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions button {
  font-family: var(--sans);
  font-size: 14px;
  height: 34px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.admin-actions button:hover { border-color: var(--ink); }
.admin-actions button[data-variant='go'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.admin-actions button[data-variant='no']:hover { border-color: var(--urgent); color: var(--urgent); }