/* =========================================================================
   MinDel — publik webbplats

   Bärande idé: sömmen. Linjen där två personers andelar möts är inte
   dekoration, den är produkten.

   Arbetsdelning i designen: all lek ligger i räknaren, all trygghet i ramen
   runt den. Räknaren får vara en leksak; allt annat håller tyst och exakt.

   Produktnamnet är inte låst (PROJECT_FOUNDATION §21). Se web/README.md
   innan det byts.
   ========================================================================= */

/* --- Typsnitt ------------------------------------------------------------
   Självhostade. Sajten gör inga tredjepartsanrop — integritetspolicyn
   bygger på det. Se assets/fonts/README.md.                              */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-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;
}

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

:root {
  /* Färg. Framräknad i OKLCH och validerad mot protanopi/deuteranopi för
     de tre roller färgen får ha — rummet, personerna, sömmen. Värdena
     ändras inte för hand; se art-direction §3 om något ska omprövas.
     --ink/--ink-soft är text på ljusa ytor, --paper/--paper-soft är text
     på mörka — namnen beskriver jobbet, inte en bakgrundsfärg. */
  --room: #05281d;
  --room-raised: #16382c;
  --instrument: #fbfcfa;
  --room-light: #eaf3ed;

  /* Premiumriktningen (ADR-0002, tillägget 2026-08-29): startsidan är mörk
     hela vägen och rytmen ligger i två smaragddjup plus elevation, inte i
     en växling mellan mörkt och ljust rum. --room-deep är gradientens
     golv, --room-alt det andra, något ljusare djupet. --surface-1/-2 är de
     upphöjda mörka kortytorna och används som gradientstopp, därför fasta
     värden och inte color-mix. Dokumentsidorna rör inget av det här; de
     lever kvar på --instrument och --room-light. */
  --room-deep: #03190f;
  --room-alt: #072f22;
  --surface-1: #0b3325;
  --surface-2: #14432f;

  --ink: #0c251c;
  --ink-soft: #50625b;
  --paper: #ecf4ee;
  --paper-soft: #b2c2b9;

  --a: #25bb73;
  --a-ink: #00864e;
  --b: #53a0ff;
  --b-ink: #3271bd;
  --seam: #fed800;
  --seam-ink: #936f00;

  --font-display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;

  /* Fyra steg, inte sex — de sex tidigare graderna konkurrerade alla om
     att vara "nästan brödtext". Bildtext ligger nära brödtexten och
     skiljs med färg och vikt, inte storlek. Hero:brödtext ≈ 5:1. */
  --text-display: clamp(2.75rem, 1.9rem + 4.3vw, 6rem);
  --text-heading: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --text-body: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --text-caption: clamp(0.9375rem, 0.92rem + 0.12vw, 1rem);

  /* Tracking som funktion av grad. Aldrig negativ på brödtext. */
  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --tracking-caption: 0.01em;

  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;

  /* Synligt rundare, inte marginellt rundare. 6 px är en myndighetsblankett-
     tell (elimineringslistans punkt 3). */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 34px;

  --measure: 62ch;
  --shell: 86rem;

  /* Djup som bara är skugga, så elevation blir additiv (Vercel Geist,
     art-direction §6). Vila: hårstrecket uttryckt som skugga i stället
     för en border som inte går att stapla. Höjd: lägg till en diffus
     skugga i samma lista. Upphöjda mörka ytor får dessutom en ljus kant
     upptill — raden som skiljer "platt kort med skugga under" från
     "objekt som står upp". */
  --edge-light: rgba(12, 37, 28, 0.12);
  --edge-dark: rgba(236, 244, 238, 0.14);
  --shadow-rest-light: 0 0 0 1px var(--edge-light);
  --shadow-raised-light:
    0 0 0 1px var(--edge-light),
    0 20px 44px -26px rgba(12, 37, 28, 0.32),
    0 6px 16px -10px rgba(12, 37, 28, 0.2);
  --shadow-rest-dark: 0 0 0 1px var(--edge-dark);
  --shadow-raised-dark:
    0 0 0 1px var(--edge-dark),
    0 22px 52px -22px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Glöden. Färgat ljus UTANFÖR kortet, aldrig innanför — innerglöd
     läser som en ram, ytterglöd som ett objekt med ljus bakom sig.
     Byggd med color-mix ur identitetsfärgerna, så den aldrig kan glida
     isär från personerna och sömmen. */
  --glow-a: color-mix(in srgb, var(--a) 26%, transparent);
  --glow-b: color-mix(in srgb, var(--b) 24%, transparent);
  --glow-seam: color-mix(in srgb, var(--seam) 26%, transparent);

  /* Upphöjt mörkt kort. Samma additiva princip som --shadow-raised-dark —
     hårstreck, djup skugga, ljus överkant — så ett färgat glödlager kan
     läggas till i samma lista utan att något av det andra tas bort. */
  --shadow-card-dark:
    0 0 0 1px var(--edge-dark),
    0 26px 60px -28px rgba(0, 0, 0, 0.7),
    0 8px 20px -14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Två rörelsebudgetar (§7). Interaktion är snabb och sker hela tiden;
     avslöjande är sällsynt och får ta mer tid. */
  --ease-interaction: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-interaction: 220ms;
  --duration-reveal: 550ms;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  caret-color: var(--seam-ink);
  scrollbar-color: var(--ink-soft) var(--room-light);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--instrument);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: var(--tracking-body);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: var(--ink-soft);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-interaction) var(--ease-interaction);
}

a:hover {
  text-decoration-color: currentColor;
}

/* Webbläsarytor tematiserade i stället för lämnade på default — den
   billigaste signalen att en sida är byggd, inte ihopsatt. */
::selection {
  background: var(--seam);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--room-light);
}

::-webkit-scrollbar-thumb {
  background: var(--ink-soft);
  border: 3px solid var(--room-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}

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


svg {
  flex: none;
}

/* Pengar måste linjera i kolumn. Innehållsregel, inte styling. */
.num {
  font-variant-numeric: tabular-nums;
}

/* Sidpaddingen måste också klara hacket. I liggande läge på en iPhone är
   sidoinsetet omkring 44px medan --space-3 är 20px, så texten hamnade under
   kameraön. max() tar det största av de två: normalvärdet på allt utom en
   inskuren skärm, insetet där det finns. Kräver viewport-fit=cover i
   viewport-metan — utan den returnerar iOS noll och regeln blir verkningslös. */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--room);
  color: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-dark);
  transform: translateY(-250%);
  transition: transform var(--duration-interaction) var(--ease-interaction);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Sidhuvud ---------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--edge-light);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
}

/* Symbolbilden är dekorativ; texten bredvid bär det åtkomliga namnet. */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}

/* 44px tryckyta utan att ordmärket blir högre. Samma grepp som
   .payer__option i home.css.

   min-height här i stället hade fungerat — men bara på breda skärmar. Under
   ~430px radbryter .masthead__inner och ordmärket får en egen rad, och då
   blev det fastnitade sidhuvudet 8px högre på just de skärmar som har minst
   höjd att avvara. En overlay kostar ingen layout alls. */
.wordmark::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}

.wordmark__mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
}

.wordmark__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-heading);
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
}

/* Navlänkar är egna tryckytor, inte löptext, och håller därför 44 px. */
.masthead nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--duration-interaction) var(--ease-interaction);
}

.masthead nav a:hover,
.masthead nav a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--seam-ink);
  text-decoration-thickness: 2px;
}





















































































































































/* --- Textsidor --------------------------------------------------------- */

.doc {
  max-width: var(--measure);
  padding-block: var(--space-5) var(--space-6);
}

.doc h1 {
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
}

/* Två mellansteg mellan rubrik- och brödtextgraden, skopade till .doc.
   En lång juridisk sida behöver en tydligare inre hierarki än en
   marknadssida har råd att sakna — annars kollapsar h2 till fet
   brödtext, precis den platta hierarki redesignen ska bort ifrån. */
.doc h2 {
  font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-4);
}

.doc h3 {
  font-size: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-3);
}

/* Brödtexten är huvudläsningen på de här sidorna — juridisk text som
   faktiskt måste läsas — och ska stå i full --ink (15.73:1), inte den
   dämpade --ink-soft. Den senare är reserverad åt bildtext, hjälptext
   och tabellens underetiketter. */
.doc p,
.doc li {
  color: var(--ink);
}

.doc p,
.doc ul,
.doc ol,
.doc .table-scroll {
  margin-top: var(--space-2);
}

.doc ul,
.doc ol {
  padding-left: 1.25rem;
}

.doc li {
  margin-top: var(--space-1);
}

/* Vissa typsnitt — Schibsted Grotesk inräknat — ger siffror tabellform
   som standard, vilket i en listmarkör visuellt gör "1." till "1 .":
   ett synligt mellanrum mellan siffra och punkt. Markören ska ha
   proportionella siffror, inte tabellformade. */
.doc li::marker {
  font-variant-numeric: normal;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2);
  border-bottom: 1px solid var(--edge-light);
}

.doc th {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--room-light);
}

.table-scroll {
  overflow: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest-light);
}

.doc__meta {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  color: var(--ink-soft);
}

/* Platshållare som måste fyllas i före lansering. Avsiktligt iögonfallande
   i sömfärgen, sidans mest laddade gula, så att ingen publicerar sidan med
   dem kvar. */
.todo {
  background: var(--seam);
  color: var(--ink);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* Ingen färgad kant till vänster längre — detektorns mest igenkännbara
   tell för AI-genererat UI (elimineringslistan #11). Ytan är i stället
   svagt tonad mot sidans grund och hålls samman av vilo-skuggan, samma
   teknik som bär hela sajtens djupsystem (§6). */
.callout {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--room-light);
  box-shadow: var(--shadow-rest-light);
}

.callout p {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
}

/* --- Sidfot ------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--edge-light);
  padding-block: var(--space-4) var(--space-5);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-soft);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-right: auto;
}

.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  transition: color var(--duration-interaction) var(--ease-interaction);
}

.footer nav a:hover {
  color: var(--ink);
}

/* --- Utskrift ---------------------------------------------------------- */

@media print {
  .masthead nav,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }
}

/* --- Rörelse ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Subtraktion, inte radering (§7). Rumslig förflyttning — translate,
     skalning, parallax, staggade entréer — försvinner genom att transform
     helt enkelt inte längre finns med i listan över vad som får animeras;
     nya lägen appliceras direkt, utan rörelse. Färg- och tillstånds-
     övergångar — sömmen som svarar på inmatning, fokusringen som tänds —
     är information, inte utsmyckning, och behålls. Bara kortare. */
  *,
  *::before,
  *::after {
    transition-property: color, background-color, border-color,
      outline-color, box-shadow, opacity, fill, stroke !important;
    transition-duration: 120ms !important;
  }
}