/* ══════════════════════════════════════════════════════════════════════════
   Everbloom — everbloom.cyberhub.no

   Solarpunk og høyfantasi: varm pergament om dagen, skogsnatt om kvelden,
   og signaturgullet #FDE047 som kant og dekor.

   ⚠ FARGEREGEL: #FDE047 og #A3E635 stryker kontrastkravet som brødtekst på
   lys bakgrunn. De brukes derfor KUN som kanter, fargeprøver og chip-bunn med
   mørk tekst — aldri som tekstfarge på lys bunn. --accent-deep er gullet som
   tåler å være tekst.

   ⚠ BREDDER: aldri faste px-bredder. clamp(), %, min()/max() overalt, og
   min-width: 0 på grid-/flex-barn som kan inneholde brede tabeller eller kode.

   Ingen webfonter, ingen eksterne ressurser — CSP-en er default-src 'self'.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
	--font-head: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	--radius:     10px;
	--radius-sm:  6px;
	--radius-lg:  18px;
	--max-w:      min(78rem, 100%);
	--max-w-text: min(46rem, 100%);
	--gutter:     clamp(1rem, 4vw, 2.5rem);
	--gap:        clamp(1rem, 2.5vw, 1.75rem);
	--section-y:  clamp(2.5rem, 7vw, 5rem);

	/* Solarpunk-dagslys: varm pergament, dyp grønn tekst, gull som kant. */
	--bg:            #faf6ec;
	--bg-raised:     #fffdf8;
	--bg-sunken:     #f1e9d6;
	--bg-inset:      #ece2ca;
	--border:        #ddd0b0;
	--border-strong: #c3b285;          /* dekorativ, ikke UI-kant */
	--border-ui:     #8f7f4f;          /* skjemakant o.l. — klarer 3:1 */
	--text:          #33402f;
	--text-muted:    #57614f;
	--heading:       #16261a;
	--link:          #146c3a;
	--link-hover:    #0d4c28;
	--accent:        #FDE047;            /* KUN kant, chip og dekor */
	--accent-deep:   #a16207;            /* gull som tåler tekst på lys bunn */
	--accent-ink:    #15803D;
	--on-accent-ink: #fffdf8;   /* tekst på --accent-ink */
	--on-accent:     #16261a;   /* tekst på gullet */
	--danger:        #9f2d1e;
	--ok:            #15803D;
	--shadow:        0 1px 2px rgba(60, 52, 30, .07), 0 8px 24px -16px rgba(60, 52, 30, .35);
	--shadow-lift:   0 2px 4px rgba(60, 52, 30, .09), 0 18px 40px -24px rgba(60, 52, 30, .45);
	--focus:         #146c3a;
	--grid-line:     rgba(22, 38, 26, .06);
	--chart-line:    #15803D;
	--chart-area:    rgba(21, 128, 61, .10);
	--scrim:         rgba(250, 246, 236, .88);
}

/* Mørkt tema. Blokken finnes to ganger med vilje — én for systemvalget og
   én for det eksplisitte valget. De genereres fra samme kilde; endrer du
   den ene for hånd, MÅ du endre den andre. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {

	/* Skogsnatt: nesten svart med grønnstikk, samme gull som aksent. */
	--bg:            #0c110d;
	--bg-raised:     #131b15;
	--bg-sunken:     #080c09;
	--bg-inset:      #1a241c;
	--border:        #243227;
	--border-strong: #3a4d3e;          /* dekorativ, ikke UI-kant */
	--border-ui:     #6b826f;          /* skjemakant o.l. — klarer 3:1 */
	--text:          #c9d8c9;
	--text-muted:    #8fa08f;
	--heading:       #ecf5ea;
	--link:          #A3E635;
	--link-hover:    #d9f99d;
	--accent:        #FDE047;
	--accent-deep:   #FDE047;
	--accent-ink:    #A3E635;
	--on-accent-ink: #08120b;   /* tekst på --accent-ink */
	--on-accent:     #0c110d;   /* tekst på gullet */
	--danger:        #f87171;
	--ok:            #4ade80;
	--shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -18px rgba(0, 0, 0, .9);
	--shadow-lift:   0 2px 6px rgba(0, 0, 0, .55), 0 22px 48px -26px rgba(0, 0, 0, .95);
	--focus:         #A3E635;
	--grid-line:     rgba(236, 245, 234, .07);
	--chart-line:    #A3E635;
	--chart-area:    rgba(163, 230, 53, .10);
	--scrim:         rgba(12, 17, 13, .9);
	}
}
:root[data-theme="dark"] {

	/* Skogsnatt: nesten svart med grønnstikk, samme gull som aksent. */
	--bg:            #0c110d;
	--bg-raised:     #131b15;
	--bg-sunken:     #080c09;
	--bg-inset:      #1a241c;
	--border:        #243227;
	--border-strong: #3a4d3e;          /* dekorativ, ikke UI-kant */
	--border-ui:     #6b826f;          /* skjemakant o.l. — klarer 3:1 */
	--text:          #c9d8c9;
	--text-muted:    #8fa08f;
	--heading:       #ecf5ea;
	--link:          #A3E635;
	--link-hover:    #d9f99d;
	--accent:        #FDE047;
	--accent-deep:   #FDE047;
	--accent-ink:    #A3E635;
	--on-accent-ink: #08120b;   /* tekst på --accent-ink */
	--on-accent:     #0c110d;   /* tekst på gullet */
	--danger:        #f87171;
	--ok:            #4ade80;
	--shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -18px rgba(0, 0, 0, .9);
	--shadow-lift:   0 2px 6px rgba(0, 0, 0, .55), 0 22px 48px -26px rgba(0, 0, 0, .95);
	--focus:         #A3E635;
	--grid-line:     rgba(236, 245, 234, .07);
	--chart-line:    #A3E635;
	--chart-area:    rgba(163, 230, 53, .10);
	--scrim:         rgba(12, 17, 13, .9);
}

/* ── Grunnmur ───────────────────────────────────────────────────────────── */

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

html {
	font-size: 100%;
	scroll-behavior: smooth;
	/* Ankere fra innholdslisten skal ikke havne under topplinjen. */
	scroll-padding-top: 5rem;
	overflow-x: clip;
	color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
	line-height: 1.65;
	/* Sikkerhetsnett: ingenting skal kunne gjøre dokumentet bredere enn skjermen. */
	overflow-x: clip;
	max-width: 100%;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--heading);
	line-height: 1.18;
	font-weight: 600;
	text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.3rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1.03rem + .55vw, 1.4rem); }
h4 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }

p, ul, ol, dl, table, figure, pre, blockquote { margin-block: 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-block-end: 0; }
ul, ol { padding-inline-start: 1.4rem; }
li + li { margin-block-start: .35rem; }
ul[role="list"], ol[role="list"] { list-style: none; padding-inline-start: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }

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

img, svg { max-width: 100%; height: auto; }

strong { color: var(--heading); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }

code, kbd, pre { font-family: var(--font-mono); font-size: .9em; }

/* Kommando-chip: /rankup, /fly … */
.cmd {
	display: inline-block;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .05em .4em;
	color: var(--heading);
	font-size: .88em;
	white-space: nowrap;
}
.cmd-wrap { white-space: normal; overflow-wrap: anywhere; }

/* ❀ — valutaglyfen. Gullfarget, men aldri eneste bærer av informasjon. */
.bloom { color: var(--accent-deep); font-weight: 600; }

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

.skip-link {
	position: absolute;
	inset-inline-start: .5rem;
	inset-block-start: -4rem;
	z-index: 100;
	background: var(--bg-raised);
	color: var(--heading);
	border: 2px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: .6rem 1rem;
	transition: inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start: .5rem; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container-narrow { max-width: min(52rem, 100%); }
.container-form   { max-width: min(30rem, 100%); }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-sunken); }
.section-kicker {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block-end: .5rem;
}
.section-intro {
	font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
	color: var(--text-muted);
	max-width: var(--max-w-text);
	margin-block: .75rem 0;
}
.section-body { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); }
.section > .container > h2 { margin-block-start: 0; }

/* ── Knapper ────────────────────────────────────────────────────────────── */

.button {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: .7rem 1.25rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.button:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }

.button-primary {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-accent-ink);
}
.button-primary:hover {
	background: var(--link-hover);
	border-color: var(--link-hover);
	color: var(--on-accent-ink);
}

.button-secondary {
	background: transparent;
	border-color: var(--border-ui);
	color: var(--heading);
}
.button-secondary:hover { background: var(--bg-inset); border-color: var(--accent); color: var(--heading); }

.button.is-disabled { opacity: .55; pointer-events: none; }
.button[disabled], button[disabled] { opacity: .55; cursor: not-allowed; }

.button-quiet {
	font: inherit;
	font-size: .9rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--border-ui);
	color: var(--text-muted);
	padding: .1rem 0;
	cursor: pointer;
}
.button-quiet:hover { color: var(--heading); border-color: var(--accent); }
.button-danger { color: var(--danger); }

.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }

/* ── Topplinje ──────────────────────────────────────────────────────────── */

.topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--scrim);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
/* Gulltråden under topplinjen — merkevaren, i én piksel. */
.topbar::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent) 20%, #F472B6 50%, var(--accent) 80%, transparent);
	opacity: .55;
}
.topbar-inner {
	display: flex;
	align-items: center;
	gap: var(--gap);
	flex-wrap: wrap;
	padding-block: .7rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
	color: var(--heading);
	margin-inline-end: auto;
	min-width: 0;
}
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
	font-family: var(--font-head);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .01em;
}
.brand-sub {
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	font: inherit;
	font-size: .9rem;
	background: transparent;
	border: 1px solid var(--border-ui);
	border-radius: var(--radius-sm);
	color: var(--heading);
	padding: .45rem .75rem;
	cursor: pointer;
}
.nav-toggle-bars {
	width: 1rem; height: .125rem;
	background: currentColor;
	box-shadow: 0 -.3rem 0 currentColor, 0 .3rem 0 currentColor;
}

.mainnav { display: none; width: 100%; }
.mainnav.is-open { display: block; }
.mainnav ul { list-style: none; padding: 0; }
.mainnav > ul > li + li { margin-block-start: 0; }
.mainnav a {
	display: block;
	padding: .55rem .25rem;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	font-weight: 500;
}
.mainnav a:hover { color: var(--heading); }
.mainnav a[aria-current="page"] { color: var(--heading); box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: .6rem; }

.nav-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding-block: .75rem;
}
.nav-tools a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--text); }
.nav-tools a:hover { color: var(--heading); }
.nav-cart.has-items { color: var(--heading); }
.nav-cart-count {
	display: inline-block;
	min-width: 1.35rem;
	background: var(--accent);
	color: #16261a;
	border-radius: 999px;
	padding: 0 .3rem;
	font-size: .78rem;
	font-weight: 700;
	text-align: center;
}
.nav-admin { color: var(--accent-deep) !important; }

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font: inherit;
	font-size: .9rem;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	padding: .3rem .7rem;
	cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--heading); }
.theme-toggle-icon {
	width: .8rem; height: .8rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: inset -.25rem -.1rem 0 var(--bg-raised);
}

@media (min-width: 56em) {
	.nav-toggle { display: none; }
	.mainnav {
		display: flex !important;
		align-items: center;
		gap: clamp(.75rem, 2vw, 1.75rem);
		width: auto;
	}
	.mainnav > ul { display: flex; gap: clamp(.75rem, 2vw, 1.5rem); }
	.mainnav a { border-bottom: 0; padding: .25rem 0; }
	.mainnav a[aria-current="page"] {
		box-shadow: none;
		padding-inline-start: 0;
		border-bottom: 2px solid var(--accent);
	}
	.nav-tools { padding-block: 0; border-inline-start: 1px solid var(--border); padding-inline-start: 1.25rem; }
}

/* ── Brødsmuler ─────────────────────────────────────────────────────────── */

.breadcrumbs { border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	padding: 0;
	margin: 0;
	padding-block: .6rem;
	font-size: .85rem;
	color: var(--text-muted);
}
.breadcrumbs li + li::before { content: "/"; margin-inline-end: .4rem; opacity: .5; }
.breadcrumbs li { margin: 0; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs [aria-current="page"] { color: var(--heading); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	padding-block: clamp(3rem, 9vw, 6.5rem);
	background:
		radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
		radial-gradient(100% 80% at 5% 0%, color-mix(in srgb, var(--accent-ink) 12%, transparent), transparent 58%),
		var(--bg);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}
.hero-inner { max-width: min(44rem, 100%); }
.hero-kicker {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block-end: .9rem;
}
.hero-intro {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
	color: var(--text-muted);
	margin-block-start: 1.1rem;
	max-width: min(38rem, 100%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }
.hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin-block-start: 2rem;
	font-size: .9rem;
	color: var(--text-muted);
}
.hero-points li {
	position: relative;
	margin: 0;
	padding-inline-start: 1rem;
}
.hero-points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .58em;
	width: .45rem; height: .45rem;
	border-radius: 50%;
	background: var(--accent);
}
.hero-home h1 { text-wrap: balance; }
.hero-page { padding-block: clamp(2.25rem, 6vw, 4rem); }

/* ── Kort ───────────────────────────────────────────────────────────────── */

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	list-style: none;
	padding: 0;
}
.card-grid > li { margin: 0; min-width: 0; }
@media (min-width: 40em) {
	.card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
	.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-link > a { display: block; height: 100%; text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-link:hover { transform: none; } }
.card-body { padding: clamp(1.1rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: .55rem; height: 100%; }
.card-body h2, .card-body h3 { margin: 0; }
.card-kicker {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}
.card-more { margin-block-start: auto; padding-block-start: .5rem; color: var(--accent-ink); font-weight: 600; font-size: .9rem; }

/* Karusell på smal skjerm: sveip nativt, dra med mus (main.js). */
@media (max-width: 47.99em) {
	.card-carousel {
		display: flex;
		gap: var(--gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		padding-block-end: .75rem;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.card-carousel > li { flex: 0 0 min(19rem, 82%); scroll-snap-align: start; }
	.card-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
	.card-carousel.is-dragging a { pointer-events: none; }
}

/* ── Meldinger og callouts ──────────────────────────────────────────────── */

.alert {
	border: 1px solid var(--border-strong);
	border-inline-start: 4px solid var(--accent-ink);
	border-radius: var(--radius);
	background: var(--bg-raised);
	padding: .9rem 1.1rem;
	margin-block: 1.25rem;
}
.alert-error { border-inline-start-color: var(--danger); }
.alert ul { margin-block-start: .5rem; padding-inline-start: 1.2rem; }

.callout {
	border: 1px solid var(--border);
	border-inline-start: 4px solid var(--accent);
	border-radius: var(--radius);
	background: var(--bg-raised);
	padding: 1rem 1.2rem;
	margin-block: 1.5rem;
}
.callout-label {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block-end: .4rem;
}
.callout-warn { border-inline-start-color: var(--danger); }
.callout-placeholder { border-inline-start-color: var(--border-strong); border-style: dashed; }

.note {
	font-size: .92rem;
	color: var(--text-muted);
	border-inline-start: 2px solid var(--border-strong);
	padding-inline-start: .85rem;
	margin-block: 1rem;
}
.empty-list { color: var(--text-muted); font-style: italic; }
.placeholder { color: var(--text-muted); font-style: italic; }

.factbox {
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.4rem);
	margin-block: 1.5rem;
}
.factbox h3 { margin-block-end: .6rem; }

.checklist { display: grid; gap: .45rem; }
.checklist li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.4rem;
}
.checklist li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--accent-ink);
	font-weight: 700;
}

.pull-quote {
	border-inline-start: 3px solid var(--accent);
	padding-inline-start: 1.2rem;
	margin-block: 1.75rem;
}
.pull-quote blockquote { font-family: var(--font-head); font-size: 1.2rem; color: var(--heading); }
.pull-quote figcaption { margin-block-start: .5rem; font-size: .88rem; color: var(--text-muted); }

.steps { counter-reset: step; display: grid; gap: var(--gap); list-style: none; padding: 0; }
.step {
	counter-increment: step;
	position: relative;
	padding-inline-start: 3rem;
	margin: 0;
}
.step::before {
	content: counter(step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 2.1rem; height: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: var(--bg-raised);
	font-family: var(--font-mono);
	font-size: .85rem;
	color: var(--accent-deep);
	font-weight: 700;
}
.step h3 { margin-block-end: .35rem; }

.faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-raised);
	margin-block-end: .6rem;
}
.faq-item summary {
	cursor: pointer;
	padding: .85rem 1.1rem;
	font-weight: 600;
	color: var(--heading);
	list-style-position: inside;
}
.faq-answer { padding: 0 1.1rem 1rem; }

.tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: .1rem .55rem;
	color: var(--text-muted);
	text-decoration: none;
}
a.tag:hover { border-color: var(--accent); color: var(--heading); }
.tag-placeholder { border-style: dashed; }
.sample-note {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-sm);
	padding: .15rem .5rem;
	display: inline-block;
	margin-block-start: .5rem;
}

/* ── Tabeller ───────────────────────────────────────────────────────────── */

.table-scroll {
	overflow-x: auto;
	/* Uten min-width: 0 kan en bred tabell tvinge fram sidebredde på mobil. */
	min-width: 0;
	max-width: 100%;
	margin-block: 1.25rem;
	border-radius: var(--radius);
}
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: start; color: var(--text-muted); font-size: .88rem; padding-block-end: .6rem; }
th, td { text-align: start; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
	font-family: var(--font-mono);
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 2px solid var(--border-strong);
	white-space: nowrap;
}
tbody th { color: var(--heading); font-weight: 600; }
tfoot td { font-weight: 600; color: var(--heading); border-top: 2px solid var(--border-strong); }

/* ── Filterknapper ──────────────────────────────────────────────────────── */

.filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin-block-end: 1.75rem;
}
.filter-label {
	font-family: var(--font-mono);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.filter-buttons { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-button {
	font: inherit;
	font-size: .88rem;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	padding: .35rem .85rem;
	text-decoration: none;
	cursor: pointer;
}
.filter-button:hover { border-color: var(--border-strong); color: var(--heading); }
.filter-button.is-active {
	background: var(--bg-inset);
	border-color: var(--accent);
	color: var(--heading);
	font-weight: 600;
}

/* ── Skjema ─────────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.1rem; margin-block-start: 1.5rem; }
.form-tight { gap: .85rem; }
.field { display: grid; gap: .35rem; min-width: 0; }
.field label { font-weight: 600; color: var(--heading); font-size: .95rem; }
.field-optional { font-weight: 400; color: var(--text-muted); }
.field-hint { font-size: .85rem; color: var(--text-muted); margin: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="file"], select, textarea {
	font: inherit;
	width: 100%;
	max-width: 100%;
	background: var(--bg-raised);
	/* --border-ui, ikke --border-strong: kanten på et skjemafelt ER
	   komponentens omriss og må klare 3:1 (WCAG 1.4.11). */
	border: 1px solid var(--border-ui);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: .6rem .75rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-ink); }
textarea { resize: vertical; min-height: 5rem; }
.code-editor {
	font-family: var(--font-mono);
	font-size: .85rem;
	line-height: 1.5;
	min-height: 24rem;
	white-space: pre;
	overflow: auto;
	background: var(--bg-sunken);
}
.field-check { display: flex; align-items: start; gap: .6rem; }
.field-check input { margin-block-start: .3rem; flex: none; width: auto; }
.field-check label { font-weight: 400; }
.inline-form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.inline-form select { width: auto; min-width: 7rem; padding: .3rem .5rem; font-size: .88rem; }
.form-alt, .form-note { margin-block-start: 1.25rem; font-size: .9rem; color: var(--text-muted); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.sitefoot {
	background: var(--bg-sunken);
	border-top: 1px solid var(--border);
	padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
	margin-block-start: clamp(3rem, 8vw, 5rem);
}
.foot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 40em) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.foot-grid > * { min-width: 0; }
.foot-mark { width: 2.75rem; height: 2.75rem; }
.foot-name { font-family: var(--font-head); font-size: 1.25rem; color: var(--heading); margin-block: .5rem .25rem; }
.foot-tagline { color: var(--text-muted); font-style: italic; }
.foot-text { color: var(--text-muted); font-size: .9rem; margin-block-start: .6rem; }
.foot-links h2, .foot-join h2 {
	font-family: var(--font-mono);
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
	margin-block-end: .75rem;
}
.foot-links ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.foot-links li { margin: 0; }
.foot-links a { color: var(--text); text-decoration: none; font-size: .92rem; }
.foot-links a:hover { color: var(--heading); text-decoration: underline; }
.foot-address { margin-block-end: .75rem; overflow-wrap: anywhere; }
.foot-note { font-size: .85rem; color: var(--text-muted); margin-block-start: .75rem; }
.foot-legal {
	margin-block-start: clamp(2rem, 5vw, 3rem);
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--border);
	font-size: .82rem;
	color: var(--text-muted);
}

/* ── Feilsider ──────────────────────────────────────────────────────────── */

.errorpage h1 { margin-block-end: .5rem; }
.errorpage .card-grid { margin-block-start: 2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   RANGSTIGEN
   ══════════════════════════════════════════════════════════════════════════
   Rangfargen kommer inline fra ranks.xml som --rank-colour (eller
   --rank-gradient). Den brukes som kant, prikk og fargeprøve — aldri som
   tekstfarge, fordi flere av dem (#FDE047, #A3E635) stryker kontrastkravet
   mot lys bakgrunn. */

.rank-swatch {
	display: inline-block;
	width: .85rem;
	height: .85rem;
	border-radius: 50%;
	background: var(--rank-colour, var(--accent));
	/* Ringen gjør at både #14532D på mørk bunn og #FDE047 på lys bunn er synlige. */
	box-shadow: 0 0 0 1px var(--border-strong), inset 0 0 0 1px rgba(255, 255, 255, .25);
	flex: none;
	vertical-align: -.05em;
}
.rank-swatch-gradient { background: var(--rank-gradient, linear-gradient(135deg, #FDE047, #FFFFFF, #F472B6)); }

.rank-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--rank-colour, var(--accent));
	border-radius: var(--radius-sm);
	padding: .05em .5em;
	font-size: .95em;
	font-weight: 600;
	color: var(--heading);
	text-decoration: none;
	/* Ikke nowrap: «Sovereign of the Everbloom» er 278 px og sprenger en
	   320 px skjerm med listeinnrykk. Brytes heller over to linjer. */
	max-width: 100%;
	overflow-wrap: anywhere;
}
.rank-chip:hover { border-color: var(--border-strong); border-inline-start-color: var(--rank-colour, var(--accent)); color: var(--heading); }

/* ── Totaler ────────────────────────────────────────────────────────────── */

.totals {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	list-style: none;
	padding: 0;
	margin-block-end: 2rem;
}
@media (min-width: 44em) { .totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.totals > li {
	margin: 0;
	min-width: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-block-start: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.4rem);
}
.totals-figure {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	color: var(--heading);
	line-height: 1.1;
	margin: 0;
	overflow-wrap: anywhere;
}
.totals-label { font-size: .88rem; color: var(--text-muted); margin-block-start: .4rem; }

/* ── Tidslinjen ─────────────────────────────────────────────────────────── */

.ladder-tier { margin-block-end: clamp(2rem, 5vw, 3rem); }
.ladder-tier-name {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
	margin-block-end: 1rem;
	padding-block-end: .5rem;
	border-bottom: 1px solid var(--border);
}

.ladder { list-style: none; padding: 0; margin: 0; }
.ladder-step {
	position: relative;
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: 0 clamp(.75rem, 2vw, 1.25rem);
	margin: 0;
	padding-block-end: clamp(1rem, 2.5vw, 1.5rem);
}
/* Selve stigen: linjen som binder nodene sammen. */
.ladder-marker { position: relative; display: flex; justify-content: center; }
.ladder-marker::before {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 2px;
	background: var(--border);
}
.ladder-step:last-child .ladder-marker::before { inset-block-end: auto; height: 1.4rem; }
.ladder-dot {
	position: relative;
	z-index: 1;
	width: 1rem;
	height: 1rem;
	margin-block-start: 1.15rem;
	border-radius: 50%;
	background: var(--rank-colour, var(--accent));
	box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--border-strong);
}
.ladder-step.is-apex .ladder-dot { background: var(--rank-gradient); }

.ladder-card {
	min-width: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-inline-start: 4px solid var(--rank-colour, var(--accent));
	border-radius: var(--radius);
	padding: clamp(.9rem, 3vw, 1.35rem);
	box-shadow: var(--shadow);
}
.ladder-step.is-apex .ladder-card {
	border-inline-start: 0;
	position: relative;
	overflow: hidden;
}
/* Apex-rangene får gradienten som kant i stedet for én farge. */
.ladder-step.is-apex .ladder-card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--rank-gradient);
}
.ladder-index {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}
.ladder-name {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-block: .25rem .5rem;
	min-width: 0;
}
.ladder-name > span { overflow-wrap: anywhere; }
.ladder-summary { color: var(--text-muted); font-size: .94rem; }

.ladder-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: .75rem 1.25rem;
	margin-block: 1rem;
	padding-block: .85rem;
	border-block: 1px solid var(--border);
}
.ladder-figures > div { min-width: 0; }
.ladder-figures dt {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.ladder-figures dd {
	margin: .15rem 0 0;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--heading);
	overflow-wrap: anywhere;
}
.is-final { color: var(--accent-deep); }

.ladder-unlocks, .unlock-unlocks {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block-end: .5rem;
}
.ladder-nounlock { font-size: .9rem; color: var(--text-muted); font-style: italic; }

.perk-list {
	display: grid;
	/* Wayfarer har elleve punkter. I én kolonne blir kortet unødvendig høyt
	   på brede skjermer, så listen brekker i flere kolonner når det er plass. */
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: .4rem 1.5rem;
	list-style: none;
	padding: 0;
}
/* Kulepunktet er absolutt plassert, ikke et flex-barn. Med flex havnet
   kulen på en egen linje så snart teksten brøt — og de lengste perkene
   bryter alltid på mobil. */
.perk-list li {
	position: relative;
	margin: 0;
	font-size: .94rem;
	padding-inline-start: .95rem;
}
.perk-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	width: .35rem; height: .35rem;
	border-radius: 50%;
	background: var(--rank-colour, var(--accent));
}
.perk-highlight { font-weight: 600; color: var(--heading); }
.perk-list-big li { font-size: 1rem; }

/* ── Kostnadskurven ─────────────────────────────────────────────────────── */

.rank-chart-figure { margin-block: 1rem 0; }
/* Under ca. 620 px blir akseetikettene uleselig små hvis kurven bare krymper.
   Derfor får den en minstebredde og en egen rullebeholder — samme løsning som
   brede tabeller. Å presse den ned til 320 px ville gitt 4–5 px tekst. */
.rank-chart-scroll {
	overflow-x: auto;
	min-width: 0;
	max-width: 100%;
}
.rank-chart {
	width: 100%;
	min-width: 38rem;
	max-width: 46rem;
	height: auto;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .5rem;
}
.chart-grid line { stroke: var(--grid-line); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--chart-area); stroke: none; }
.chart-dot { stroke: var(--bg-raised); stroke-width: 2; }
.chart-ylabel, .chart-xlabel, .chart-xname, .chart-note {
	font-family: var(--font-mono);
	fill: var(--text-muted);
}
.chart-ylabel { font-size: 13px; }
.chart-xlabel { font-size: 13px; }
.chart-xname  { font-size: 11px; }
.chart-note   { font-size: 14px; fill: var(--heading); font-weight: 700; }
.chart-swipe-hint { display: none; }
@media (max-width: 40em) {
	.chart-swipe-hint { display: inline; }
}
.rank-chart-figure figcaption {
	font-size: .88rem;
	color: var(--text-muted);
	margin-block-start: .75rem;
	max-width: var(--max-w-text);
}

/* ── Rangtabellen ───────────────────────────────────────────────────────── */

.rank-table tbody th a {
	display: flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: var(--heading);
}
.rank-table tbody th a:hover { text-decoration: underline; }
.rank-table tbody tr { border-inline-start: 3px solid var(--rank-colour, transparent); }
.rank-table td { white-space: nowrap; }

/* Under 48em blir hver rad et kort. data-label bærer kolonneoverskriften. */
@media (max-width: 47.99em) {
	.rank-table, .rank-table thead, .rank-table tbody, .rank-table tfoot,
	.rank-table tr, .rank-table th, .rank-table td { display: block; }
	.rank-table thead { display: none; }
	.rank-table tr {
		background: var(--bg-raised);
		border: 1px solid var(--border);
		border-inline-start: 4px solid var(--rank-colour, var(--accent));
		border-radius: var(--radius);
		margin-block-end: .75rem;
		padding: .75rem .9rem;
	}
	.rank-table th, .rank-table td { border: 0; padding: .2rem 0; white-space: normal; }
	.rank-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: .7rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--text-muted);
	}
	.rank-table td[data-label="#"] { display: none; }
	.rank-table caption { padding-block-end: 1rem; }
}

/* ── «What do I unlock next?» ───────────────────────────────────────────── */

.unlock {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 3.5vw, 1.75rem);
	box-shadow: var(--shadow);
}
.unlock-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: .75rem;
}
.unlock-form label {
	flex: 1 1 100%;
	font-weight: 600;
	color: var(--heading);
}
.unlock-form select { flex: 1 1 min(16rem, 100%); width: auto; min-width: 0; }
.unlock-result { margin-block-start: 1.5rem; }
.unlock-empty { color: var(--text-muted); }

.unlock-panel {
	border: 1px solid var(--border);
	border-block-start: 4px solid var(--rank-colour, var(--accent));
	border-radius: var(--radius);
	background: var(--bg-inset);
	padding: clamp(1rem, 3vw, 1.5rem);
}
.unlock-kicker {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.unlock-panel h4 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-block: .4rem 1rem;
	font-size: clamp(1.05rem, .98rem + .5vw, 1.35rem);
}
.unlock-arrow { color: var(--text-muted); }
.unlock-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	gap: 1rem;
	margin-block-end: 1.25rem;
}
.unlock-figures > div { min-width: 0; }
.unlock-figures dt {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.unlock-figures dd { margin: .2rem 0 0; font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
.unlock-big { font-family: var(--font-head); font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.unlock-further, .unlock-cmd { font-size: .92rem; color: var(--text-muted); margin-block-start: 1rem; }

/* ── Grenser som stiger ─────────────────────────────────────────────────── */

.scaling {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: var(--gap);
	list-style: none;
	padding: 0;
}
.scaling-item {
	margin: 0;
	min-width: 0;
	text-align: center;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.4rem);
}
.scaling-label {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.scaling-range {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	color: var(--heading);
	margin-block: .35rem;
}
.scaling-arrow { color: var(--accent-deep); font-size: .7em; }
.scaling-note { font-size: .8rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   WIKI
   ══════════════════════════════════════════════════════════════════════════ */

.wiki-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.wiki-layout > * { min-width: 0; }

@media (min-width: 60em) {
	.wiki-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
	.wiki-side { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.wiki-nav-wrap {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
@media (min-width: 60em) {
	.wiki-nav-wrap { background: transparent; border: 0; border-radius: 0; }
	.wiki-nav-summary { display: none; }
}
.wiki-nav-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	padding: .8rem 1rem;
	font-weight: 600;
	color: var(--heading);
	list-style: none;
}
.wiki-nav-summary::-webkit-details-marker { display: none; }
.wiki-nav-wrap[open] .wiki-nav-hint { transform: rotate(180deg); }
.wiki-nav-hint { color: var(--text-muted); transition: transform .15s ease; }

.wiki-search { padding: 0 1rem 1rem; }
@media (min-width: 60em) { .wiki-search { padding: 0 0 1rem; } }
.wiki-search input { font-size: .95rem; }
.wiki-search-status { font-size: .8rem; color: var(--text-muted); margin-block-start: .4rem; min-height: 1.2em; }
.wiki-results { display: grid; gap: .25rem; list-style: none; padding: 0; margin-block-start: .5rem; }
.wiki-results li { margin: 0; }
.wiki-results a {
	display: block;
	text-decoration: none;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .45rem .6rem;
	font-size: .9rem;
}
.wiki-results a:hover, .wiki-results a:focus-visible { border-color: var(--accent); color: var(--heading); }
.wiki-result-title { display: block; font-weight: 600; color: var(--heading); }
.wiki-result-where { display: block; font-size: .78rem; color: var(--text-muted); }

.wiki-nav { padding: 0 1rem 1rem; }
@media (min-width: 60em) { .wiki-nav { padding: 0; } }
.wiki-nav-group {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block: 1.1rem .45rem;
}
.wiki-nav-group:first-child { margin-block-start: 0; }
.wiki-nav ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.wiki-nav li { margin: 0; }
.wiki-nav a {
	display: block;
	padding: .35rem .6rem;
	border-radius: var(--radius-sm);
	border-inline-start: 2px solid transparent;
	color: var(--text);
	text-decoration: none;
	font-size: .92rem;
}
.wiki-nav a:hover { background: var(--bg-inset); color: var(--heading); }
.wiki-nav a[aria-current="page"] {
	background: var(--bg-inset);
	border-inline-start-color: var(--accent);
	color: var(--heading);
	font-weight: 600;
}

.wiki-main { min-width: 0; }
.wiki-head { margin-block-end: clamp(1.5rem, 4vw, 2.5rem); }
.wiki-updated { font-size: .85rem; color: var(--text-muted); margin-block-start: 1rem; }

/* Wikiartikler bruker samme <section>-grammatikk som resten av nettstedet,
   men uten den store luften — det er referansetekst, ikke landingsside. */
.wiki-body .section { padding-block: clamp(1.25rem, 3vw, 2rem); }
.wiki-body .section .container { padding-inline: 0; max-width: 100%; }
.wiki-body .section-alt {
	background: var(--bg-sunken);
	border-radius: var(--radius);
	padding-inline: clamp(1rem, 3vw, 1.75rem);
}
.wiki-body .section + .section { border-top: 1px solid var(--border); }
.wiki-body .section-alt + .section,
.wiki-body .section + .section-alt { border-top: 0; }
.wiki-body h2 { margin-block-end: .5rem; }
.wiki-body .section-body { margin-block-start: 1.25rem; }
.wiki-body h3 { margin-block: 1.5rem .5rem; }

.wiki-highlight {
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-inline-start: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}
.wiki-group { margin-block-end: clamp(1.75rem, 4vw, 2.75rem); }
.wiki-group h2 { margin-block-end: 1rem; }

/* Innholdsliste */
.toc {
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-block: 1.5rem;
}
.toc-heading {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
	margin-block-end: .6rem;
}
.toc ol { list-style: none; padding: 0; display: grid; gap: .3rem; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a { font-size: .92rem; }
.toc a::before { content: counter(toc) ". "; color: var(--text-muted); font-family: var(--font-mono); font-size: .85em; }

.wiki-pager {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	margin-block-start: clamp(2rem, 5vw, 3rem);
	padding-block-start: 1.5rem;
	border-top: 1px solid var(--border);
}
@media (min-width: 40em) { .wiki-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wiki-pager-link {
	display: block;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .85rem 1rem;
	text-decoration: none;
	color: inherit;
	background: var(--bg-raised);
}
.wiki-pager-link:hover { border-color: var(--accent); }
.wiki-pager-next { text-align: end; grid-column: -2 / -1; }
.wiki-pager-label {
	display: block;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.wiki-pager-title { display: block; font-weight: 600; color: var(--heading); margin-block-start: .2rem; }

/* ── Jobber, krater, verdener, sett, clue scrolls, tagger ───────────────── */

.job-grid, .crate-grid, .set-grid, .tag-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--gap);
	list-style: none;
	padding: 0;
}
.job-grid > li, .crate-grid > li, .set-grid > li, .tag-grid > li { margin: 0; min-width: 0; }

.job, .set {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
}
.job-name, .set-name { font-size: 1.05rem; margin-block-end: .3rem; }
.job-what, .set-summary { font-size: .92rem; color: var(--text-muted); }
.job-cmd { margin-block-start: .6rem; }
.set-unknown { font-style: italic; }

.crate {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-block-start: 4px solid var(--crate-colour, var(--accent));
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.35rem);
	min-width: 0;
}
.crate-grid { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.crate-name { margin-block-end: .4rem; }
.crate-summary { color: var(--text-muted); font-size: .94rem; }
.crate-meta { display: grid; gap: .5rem; margin-block: 1rem; }
.crate-meta dt {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.crate-meta dd { margin: 0; color: var(--heading); }
.reward-table { font-size: .9rem; margin-block-start: 1rem; }
.reward-table tr.is-placeholder td:first-child { color: var(--text-muted); font-style: italic; }
@media (max-width: 39.99em) {
	.reward-table, .reward-table thead, .reward-table tbody, .reward-table tr, .reward-table td { display: block; }
	.reward-table thead { display: none; }
	.reward-table tr { border-bottom: 1px solid var(--border); padding-block: .5rem; }
	.reward-table td { border: 0; padding: .1rem 0; }
	.reward-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: .68rem;
		text-transform: uppercase;
		color: var(--text-muted);
	}
}

.world-summary { display: block; font-size: .88rem; color: var(--text-muted); font-weight: 400; margin-block-start: .2rem; }
.world-rules { display: grid; gap: .25rem; list-style: none; padding: 0; }
.world-rules li { margin: 0; font-size: .9rem; }
.world-rules li::before { content: "· "; color: var(--accent-deep); }
@media (max-width: 47.99em) {
	.world-table, .world-table thead, .world-table tbody, .world-table tr, .world-table th, .world-table td { display: block; }
	.world-table thead { display: none; }
	.world-table tr {
		background: var(--bg-raised);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: .85rem 1rem;
		margin-block-end: .75rem;
	}
	.world-table th, .world-table td { border: 0; padding: .2rem 0; }
	.world-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: .68rem;
		text-transform: uppercase;
		color: var(--text-muted);
	}
}

.clue-tiers { counter-reset: clue; display: grid; gap: var(--gap); list-style: none; padding: 0; }
@media (min-width: 44em) { .clue-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clue-tier {
	counter-increment: clue;
	margin: 0;
	min-width: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-inline-start: 4px solid var(--tier-colour, var(--accent));
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
}
.clue-tier::before {
	content: "Tier " counter(clue);
	display: block;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.clue-name { margin-block: .3rem .4rem; }
.clue-summary { font-size: .94rem; color: var(--text-muted); }

.chat-tag { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.chat-tag-chip {
	display: inline-block;
	align-self: start;
	background: var(--tag-colour, var(--accent));
	/* Tekstfargen regnes ut fra taggfargen i PHP (se Components::inkFor)
	   og settes inline. Å hardkode mørk tekst her ga 3,16:1 på de mørkeste
	   grønnfargene — under kravet. */
	color: var(--tag-ink, #16261a);
	border-radius: var(--radius-sm);
	padding: .2rem .7rem;
	font-weight: 700;
	font-size: .95rem;
}
.chat-tag-note { font-size: .85rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   BLOGG
   ══════════════════════════════════════════════════════════════════════════ */

.blog-feed-link { margin-block-start: 1rem; font-size: .9rem; }
.post-list { display: grid; gap: var(--gap); list-style: none; padding: 0; }
@media (min-width: 48em) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-card {
	margin: 0;
	min-width: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	box-shadow: var(--shadow);
}
.post-card h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); margin-block: .5rem; }
.post-card h2 a { color: var(--heading); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .85rem;
	color: var(--text-muted);
	margin: 0;
}
.post-summary { color: var(--text-muted); }
.post-author { font-size: .9rem; color: var(--text-muted); margin-block-start: .75rem; }
.post-head { margin-block-end: clamp(1.5rem, 4vw, 2.5rem); }
.post-body .section { padding-block: clamp(1.25rem, 3vw, 2rem); }
.post-body .section .container { padding-inline: 0; max-width: 100%; }
.post-body .section-alt {
	background: var(--bg-sunken);
	border-radius: var(--radius);
	padding-inline: clamp(1rem, 3vw, 1.5rem);
}
.post-body .section + .section { border-top: 1px solid var(--border); }
.post-body .section-alt + .section, .post-body .section + .section-alt { border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTIKK
   ══════════════════════════════════════════════════════════════════════════ */

.promise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--gap);
	list-style: none;
	padding: 0;
}
.promise li {
	margin: 0;
	min-width: 0;
	font-size: .93rem;
	color: var(--text-muted);
	border-inline-start: 3px solid var(--accent);
	padding-inline-start: .85rem;
}
.promise strong { display: block; color: var(--heading); }

.store-group-title { margin-block: clamp(1.75rem, 4vw, 2.5rem) 1rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.store-group-title a { color: var(--heading); text-decoration: none; }
.store-group-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.store-cat-note { margin-block-end: 1.5rem; }

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	gap: clamp(.75rem, 2vw, 1.1rem);
	list-style: none;
	padding: 0;
}
.product { margin: 0; min-width: 0; }
.product-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	height: 100%;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.product-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.product.is-featured .product-link { border-color: var(--accent); }
.product-flag {
	position: absolute;
	inset-block-start: -.6rem;
	inset-inline-end: .75rem;
	background: var(--accent);
	color: #16261a;
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 999px;
	padding: .1rem .55rem;
}
.product-name { font-family: var(--font-head); font-size: 1.1rem; color: var(--heading); font-weight: 600; overflow-wrap: anywhere; }
.product-display {
	font-family: var(--font-mono);
	font-size: .8rem;
	color: var(--text-muted);
	background: var(--bg-inset);
	border-radius: var(--radius-sm);
	padding: .15rem .4rem;
	align-self: start;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.product-summary { font-size: .85rem; color: var(--text-muted); }
.product-price { margin-block-start: auto; padding-block-start: .5rem; font-weight: 700; color: var(--accent-ink); }

.product-detail { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56em) { .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } }
.product-detail > * { min-width: 0; }
.product-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: 1rem; }
.product-preview-label {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.product-preview-chip {
	font-family: var(--font-mono);
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .3rem .7rem;
	color: var(--heading);
	overflow-wrap: anywhere;
}
.product-body { margin-block: 1.5rem; }
.product-body p + p { margin-block-start: .75rem; }

.product-buy {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-block-start: 4px solid var(--accent);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	box-shadow: var(--shadow);
	position: sticky;
	top: 5rem;
}
.product-buy-price { font-family: var(--font-head); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem); color: var(--heading); }
.product-buy-note { font-size: .85rem; color: var(--text-muted); margin-block-end: 1.25rem; }
.product-buy form { margin-block-end: 1.25rem; }
.product-buy .button { width: 100%; }
.product-in-cart { font-size: .9rem; color: var(--accent-ink); font-weight: 600; margin-block-end: .5rem; }
.product-facts { display: grid; gap: .6rem; list-style: none; padding: 0; font-size: .87rem; color: var(--text-muted); }
.product-facts li { margin: 0; }
.product-facts strong { display: block; }
.product-buy-hint { font-size: .87rem; color: var(--text-muted); margin-block-start: 1.25rem; padding-block-start: 1rem; border-top: 1px solid var(--border); }

/* ── Kurv, kasse, kvittering ────────────────────────────────────────────── */

.cart-lines, .receipt-lines { display: grid; gap: .5rem; list-style: none; padding: 0; margin-block: 1.5rem; }
.cart-line, .receipt-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1rem;
	margin: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .9rem 1.1rem;
}
.cart-line-main, .receipt-line-main { flex: 1 1 min(14rem, 100%); min-width: 0; }
.cart-line-name, .receipt-line-name { font-weight: 600; color: var(--heading); text-decoration: none; overflow-wrap: anywhere; }
.cart-line-summary { font-size: .87rem; color: var(--text-muted); margin: .2rem 0 0; }
.cart-line-price, .receipt-line-price { font-weight: 700; color: var(--heading); white-space: nowrap; }
.cart-line-remove { flex: none; }

.cart-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 1rem;
	border-block: 2px solid var(--border-strong);
	margin-block: 1.5rem;
}
.cart-total-label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.cart-total-sum { font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); color: var(--heading); }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.cart-delivering, .checkout-target { font-size: .93rem; color: var(--text-muted); }
.checkout-form { margin-block-start: 2rem; }
.checkout-terms { font-size: .87rem; color: var(--text-muted); }

.receipt-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 1rem;
	margin-block: 1.75rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--border);
}
.receipt-meta > div { min-width: 0; }
.receipt-meta dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.receipt-meta dd { margin: .2rem 0 0; color: var(--heading); overflow-wrap: anywhere; }

/* Leveransestatus. Fargen kommer alltid sammen med ordet, aldri alene. */
.delivery-status, .order-status {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	padding: .05rem .55rem;
	color: var(--text-muted);
	margin: 0;
}
.delivery-delivered, .status-delivered { border-color: var(--ok); color: var(--ok); }
.delivery-failed, .status-failed { border-color: var(--danger); color: var(--danger); }
.delivery-delivering, .status-partly-delivered { border-color: var(--accent); color: var(--accent-deep); }
.delivery-error { display: block; font-size: .82rem; color: var(--danger); margin-block-start: .3rem; }
.delivery-note, .queue-detail { display: block; font-size: .82rem; color: var(--text-muted); margin-block-start: .3rem; }

/* ══════════════════════════════════════════════════════════════════════════
   KONTO OG ADMIN
   ══════════════════════════════════════════════════════════════════════════ */

.account-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	margin-block-start: 2rem;
}
@media (min-width: 56em) { .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-grid > * { min-width: 0; }

.panel {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	box-shadow: var(--shadow);
	min-width: 0;
}
.panel + .panel, .panel-wide { margin-block-start: var(--gap); }
.panel h2 { margin-block-end: .75rem; }
.panel h3 { margin-block: 1.75rem .5rem; }

.account-details { display: grid; gap: .7rem; }
.account-details > div { display: grid; gap: .1rem; min-width: 0; }
.account-details dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.account-details dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }

.linked-player { display: flex; align-items: center; gap: .75rem; margin-block-end: 1rem; }
.linked-avatar {
	width: 2.5rem; height: 2.5rem;
	flex: none;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--accent-ink), var(--accent));
	box-shadow: inset 0 0 0 1px var(--border-strong);
}
.linked-uuid { display: block; font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); overflow-wrap: anywhere; }

.linkcode {
	background: var(--bg-inset);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	padding: 1.1rem;
	margin-block: 1.25rem;
	text-align: center;
}
.linkcode-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.linkcode-value {
	font-family: var(--font-mono);
	font-size: clamp(1.15rem, 1rem + 1.2vw, 1.7rem);
	font-weight: 700;
	color: var(--heading);
	letter-spacing: .06em;
	margin-block: .5rem;
	overflow-wrap: anywhere;
}
.linkcode-expiry { font-size: .85rem; color: var(--text-muted); }

.order-list { display: grid; gap: var(--gap); list-style: none; padding: 0; }
.order {
	margin: 0;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	background: var(--bg-inset);
}
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.order-head h3 { margin: 0; font-size: 1.05rem; }
.order-meta { font-size: .85rem; color: var(--text-muted); margin-block: .4rem .75rem; }
.order-items { display: grid; gap: .35rem; list-style: none; padding: 0; }
.order-items li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .4rem 1rem;
	margin: 0;
	font-size: .92rem;
}
.order-item-name { color: var(--heading); min-width: 0; overflow-wrap: anywhere; }

.admin-cards { margin-block: 2rem; }
.admin-list { display: grid; gap: .5rem; list-style: none; padding: 0; }
.admin-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem 1rem;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	background: var(--bg-inset);
}
.admin-row > div { min-width: 0; }
.admin-row h3 { margin: 0; font-size: 1rem; }
.admin-row-meta { font-size: .82rem; color: var(--text-muted); margin: .2rem 0 0; overflow-wrap: anywhere; }
.admin-table td, .admin-table th { font-size: .9rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.admin-none { color: var(--text-muted); }
.admin-inline-list { display: grid; gap: .2rem; list-style: none; padding: 0; font-size: .88rem; }
.admin-inline-list li { margin: 0; }

.queue-summary { margin-block: 1.5rem; }
.queue-mode { font-size: .9rem; color: var(--text-muted); margin-block-start: .35rem; }
.queue-attempts { display: block; font-size: .78rem; color: var(--text-muted); margin-block-start: .25rem; }

@media (max-width: 55.99em) {
	.admin-table, .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table th, .admin-table td { display: block; }
	.admin-table thead { display: none; }
	.admin-table tr {
		background: var(--bg-raised);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: .85rem 1rem;
		margin-block-end: .75rem;
	}
	.admin-table th, .admin-table td { border: 0; padding: .25rem 0; }
	.admin-table td[data-label]::before, .admin-table th[data-label]::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: .68rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--text-muted);
	}
}