/* Undersidor (under huven, villkor, integritet). Samma tokens och ram som index.html. */
:root {
  color-scheme: dark;
  --void: #06080a; --hull: #0a0d10; --text: #dde5e9; --dim: #7f8c94; --faint: #465158;
  --ion: #a6e6f2; --ion-dim: rgba(166,230,242,.14);
  --line: rgba(196,226,236,.075); --line-2: rgba(196,226,236,.16);
  --display: "Saira", "Eurostile", "Bank Gothic", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs: .6875rem; --t-sm: .8125rem; --t-md: 1rem; --t-lg: 1.25rem;
  --t-xl: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  --t-h1: clamp(2.1rem, 1.1rem + 3.6vw, 4rem);
  --frame: 1240px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2,.7,.1,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--void); color: var(--text);
  font-family: var(--body); font-weight: 300; font-size: var(--t-md); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--ion); color: var(--void); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--ion); outline-offset: 3px; }

.frame { position: relative; max-width: var(--frame); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.rails { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rails .frame { height: 100%; }
.rails .frame::before, .rails .frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.rails .frame::before { left: var(--gutter); }
.rails .frame::after { right: var(--gutter-r); }
main, header, footer { position: relative; z-index: 1; }

.label { font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.tnum { font-variant-numeric: tabular-nums; }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--void); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .frame { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.mark span { font-family: var(--display); font-weight: 300; font-size: 1.02rem; letter-spacing: .34em; font-stretch: 125%; color: #fff; }
.nav { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
.nav a.l { font-size: var(--t-sm); color: var(--dim); transition: color .2s; }
.nav a.l:hover { color: var(--text); }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 2px; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; }
.lang a, .lang button { all: unset; cursor: pointer; padding: .3rem .55rem; color: var(--faint); }
.lang [aria-current="true"], .lang [aria-pressed="true"] { color: var(--void); background: var(--dim); }
.lang a:focus-visible, .lang button:focus-visible { outline: 1px solid var(--ion); }

/* page head */
.intro { border-bottom: 1px solid var(--line); }
.intro .frame { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.5rem; }
h1 { margin: 0; font-family: var(--display); font-weight: 200; font-stretch: 125%; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; max-width: 18ch; }
h1 em { font-style: normal; color: var(--ion); }
.lede { margin: 0; max-width: 40rem; color: var(--dim); font-size: var(--t-lg); line-height: 1.55; text-wrap: pretty; }
.lede strong { color: var(--text); font-weight: 400; }
.legend { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; color: var(--dim); font-size: var(--t-sm); }
.legend span { display: inline-flex; gap: .6rem; align-items: center; }

.tag { justify-self: start; align-self: start; font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; padding: .15rem .4rem; border: 1px solid var(--line-2); color: var(--dim); border-radius: 1px; white-space: nowrap; }
.tag.m { color: var(--ion); border-color: color-mix(in srgb, var(--ion) 35%, transparent); }

/* layers: the stack, top to bottom */
section.band { border-bottom: 1px solid var(--line); }
.band .frame { padding-block: clamp(3rem, 7vw, 5.5rem); }
.head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head .label { padding-top: .55rem; }
h2 { margin: 0; font-family: var(--display); font-weight: 200; font-stretch: 125%; font-size: var(--t-xl); line-height: 1.12; text-wrap: balance; max-width: 24ch; }
h2 em { font-style: normal; color: var(--ion); }
.layers { border-top: 1px solid var(--line); }
.layer { display: grid; grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr) 9rem; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.layer .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); letter-spacing: .14em; padding-top: .3rem; }
.layer h3 { margin: 0; font-family: var(--display); font-weight: 300; font-stretch: 125%; font-size: var(--t-lg); letter-spacing: .02em; line-height: 1.3; }
.layer p { margin: 0; color: var(--dim); max-width: 52ch; }
.layer p + p { margin-top: .6rem; }
.layer p strong { color: var(--text); font-weight: 400; }
.layer code { font-family: var(--mono); font-size: .85em; color: var(--text); background: var(--hull); border: 1px solid var(--line); padding: .05rem .35rem; border-radius: 2px; }
.layer .meta { display: grid; gap: .5rem; justify-items: end; text-align: right; }
.layer .meta .tag { justify-self: end; }
.layer .v { font-family: var(--display); font-weight: 200; font-stretch: 125%; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.layer .v small { font-size: .45em; letter-spacing: .08em; color: var(--dim); margin-left: .3em; font-weight: 300; }

.note { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; }
.note p { margin: 0; color: var(--dim); max-width: 56ch; }
.note p + p { margin-top: 1rem; }
.note p strong { color: var(--text); font-weight: 400; }

.btn { display: inline-flex; align-items: center; gap: .9rem; height: 52px; padding: 0 1.4rem; border-radius: 2px; font-family: var(--mono); font-weight: 400; font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; background: var(--ion); color: var(--void); transition: box-shadow .25s var(--ease); }
.btn:hover { box-shadow: 0 0 0 1px var(--ion), 0 0 40px -6px var(--ion); }

/* legal prose */
.doc .frame { padding-block: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 5vw, 4rem); }
.toc { position: sticky; top: calc(80px + env(safe-area-inset-top, 0px)); align-self: start; display: grid; gap: .45rem; }
.toc a { color: var(--dim); font-size: var(--t-sm); line-height: 1.4; }
.toc a:hover { color: var(--text); }
.prose { min-width: 0; max-width: 46rem; }
.prose h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); max-width: none; margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--dim); }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.prose strong { color: var(--text); font-weight: 400; }
.prose a { color: var(--ion); }
.prose .ph { color: var(--ion); font-family: var(--mono); font-size: .9em; }
.prose .tbl { overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 34rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--dim); }
.prose th { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--text); }
.ver { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); letter-spacing: .06em; }

/* footer */
.foot .frame { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; padding-block: 2rem 2.5rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-left: auto; }
.foot nav a { color: var(--dim); font-size: var(--t-sm); }
.foot nav a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } }
@media (max-width: 980px) {
  .head, .note { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .layer > p, .layer > .body { grid-column: 2; }
  .layer .meta .tag { justify-self: start; }
  .layer .meta { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; }
  .doc .frame { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
  .nav a.l { display: none; }
}
@media (max-width: 460px) {
  .layer { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .layer > *, .layer > p, .layer > .body, .layer .meta { grid-column: 1; }
  .btn { width: 100%; justify-content: space-between; }
}
.prose code { font-family: var(--mono); font-size: .88em; color: var(--text); background: var(--hull); border: 1px solid var(--line); padding: .05rem .35rem; border-radius: 2px; }