@layer reset, tokens, base, components, utilities;

/* Egen, liten reset i stedet for normalize.css: moderne nettlesere er samstemte nok
   til at bare det vi faktisk vil endre trenger å nulles. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  img, svg, video, audio { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  input, textarea { min-inline-size: 0; }
  button { cursor: pointer; }
  table { border-collapse: collapse; border-spacing: 0; }
  summary { cursor: pointer; }
  :target { scroll-margin-block-start: var(--space-6); }
}

@layer tokens {
  :root {
    --h-blue: 250; --h-orange: 65; --h-sky: 230; --h-green: 160; --h-yellow: 95; --h-verm: 40; --h-purple: 340;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem;
    --t--1: .875rem; --t-0: 1.0625rem; --t-1: 1.25rem; --t-2: 1.625rem;
    --t-3: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); --t-4: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    --font: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --lh: 1.6; --measure: 60ch; --r-1: 6px; --r-2: 12px; --dur: .15s;
  }
  @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }

  [data-theme=light] {
    --bg: oklch(98.5% .004 90); --bg-2: oklch(100% 0 0); --bg-3: oklch(94% .01 90);
    --fg: oklch(22% .02 250); --fg-muted: oklch(46% .03 250);
    --border: oklch(88% .01 90); --border-strong: oklch(70% .02 250);
    --blue: oklch(50% .15 var(--h-blue)); --orange: oklch(72% .17 var(--h-orange)); --sky: oklch(66% .12 var(--h-sky));
    --green: oklch(55% .12 var(--h-green)); --yellow: oklch(88% .16 var(--h-yellow));
    --verm: oklch(58% .2 var(--h-verm)); --purple: oklch(65% .14 var(--h-purple));
    --accent: var(--blue); --accent-fg: white; --accent-hover: oklch(43% .15 var(--h-blue)); --accent-soft: oklch(94% .04 var(--h-blue));
    --second: var(--orange); --second-fg: oklch(20% .05 var(--h-orange));
    --ok: var(--blue); --warn: var(--orange); --danger: var(--verm); --danger-fg: white; --danger-hover: oklch(50% .2 var(--h-verm)); --info: var(--sky);
    --shadow: 0 1px 2px oklch(20% .02 250 / .08), 0 8px 24px oklch(20% .02 250 / .08);
    color-scheme: light;
  }
  [data-theme=dark] {
    --bg: oklch(16% .01 250); --bg-2: oklch(20% .012 250); --bg-3: oklch(26% .014 250);
    --fg: oklch(94% .005 90); --fg-muted: oklch(70% .02 250);
    --border: oklch(30% .012 250); --border-strong: oklch(48% .02 250);
    --blue: oklch(72% .13 var(--h-blue)); --orange: oklch(78% .16 var(--h-orange)); --sky: oklch(78% .1 var(--h-sky));
    --green: oklch(70% .12 var(--h-green)); --yellow: oklch(90% .15 var(--h-yellow));
    --verm: oklch(70% .18 var(--h-verm)); --purple: oklch(75% .12 var(--h-purple));
    --accent: var(--blue); --accent-fg: oklch(16% .04 var(--h-blue)); --accent-hover: oklch(80% .12 var(--h-blue)); --accent-soft: oklch(28% .06 var(--h-blue));
    --second: var(--orange); --second-fg: oklch(18% .05 var(--h-orange));
    --ok: var(--blue); --warn: var(--orange); --danger: var(--verm); --danger-fg: oklch(16% .05 var(--h-verm)); --danger-hover: oklch(78% .16 var(--h-verm)); --info: var(--sky);
    --shadow: 0 8px 24px oklch(0% 0 0 / .5);
    color-scheme: dark;
  }
}

@layer base {
  html { font-family: var(--font); font-size: 100%; line-height: var(--lh); background: var(--bg); color: var(--fg); }
  body { font-size: var(--t-0); min-block-size: 100dvh; display: flex; flex-direction: column; }
  main { flex: 1; container-type: inline-size; padding-block: var(--space-6) var(--space-7); }
  h1, h2, h3 { font-weight: 650; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
  h1 { font-size: var(--t-3); }
  h2 { font-size: var(--t-2); margin-block-start: var(--space-6); }
  h2 + :is(.table-wrap, .bars, p, .form, .stat-row, .boxes, ol, ul) { margin-block-start: var(--space-4); }
  h3 { font-size: var(--t-1); margin-block-start: var(--space-5); }
  p { text-wrap: pretty; max-inline-size: var(--measure); }
  p + p { margin-block-start: var(--space-4); }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
  a:hover { color: var(--accent-hover); }
  :focus-visible { outline: 3px solid var(--second); outline-offset: 2px; }
  code { font-family: var(--mono); font-size: .9em; background: var(--bg-3); padding-inline: .3em; border-radius: var(--r-1); overflow-wrap: anywhere; }
  ::selection { background: var(--accent-soft); }
  @media (forced-colors: active) {
    .btn, .st, .notice, .card { border: 1px solid CanvasText; }
  }
}

@layer components {
  .wrap { inline-size: min(100% - 2 * var(--space-4), 68rem); margin-inline: auto; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .skip { position: absolute; inset-inline-start: var(--space-2); inset-block-start: -100%; background: var(--bg-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-1); }
  .skip:focus { inset-block-start: var(--space-2); z-index: 10; }

  .site-header { border-block-end: 1px solid var(--border); padding-block: var(--space-3); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: var(--t-1); text-decoration: none; color: var(--fg); letter-spacing: -.015em; }
  .brand .logo-mark { color: var(--accent); inline-size: 1.75rem; block-size: 1.75rem; }
  .hero .muted { margin-block-start: var(--space-3); font-size: var(--t--1); }
  .offer h2 { margin-block-start: var(--space-7); }
  .boxes { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-block-start: var(--space-4); }
  @container (min-width: 40rem) { .boxes { grid-template-columns: 1fr 1fr; } }
  @container (min-width: 60rem) { .boxes { grid-template-columns: 1fr 1fr 1fr; } }
  .box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-5); }
  .box h3 { margin-block-start: 0; font-size: var(--t-1); display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-2); }
  .box h3 .icon { color: var(--accent); inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .15em; }
  .hero.compact h1 { font-size: var(--t-3); }
  .hero.compact .muted { margin-block-start: var(--space-2); }
  .about-line { margin-block-start: var(--space-6); }
  .podcast-card { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
  .podcast-card:has(> .thumb) { grid-template-columns: auto 1fr; }
  .podcast-card .thumb { inline-size: 6rem; block-size: 6rem; border-radius: var(--r-1); object-fit: cover; }
  .podcast-card h2 { margin: 0; font-size: var(--t-1); }
  .podcast-card p { margin-block-start: var(--space-1); }
  .footer-nav { display: flex; gap: var(--space-4); }
  .footer-nav a { color: var(--fg-muted); }
  .links a { display: inline-flex; align-items: center; gap: var(--space-1); }
  .links .icon { inline-size: 1em; block-size: 1em; }

  .show { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-block-start: var(--space-4); }
  @container (min-width: 44rem) { .show:has(> .cover) { grid-template-columns: 15rem 1fr; } }
  .show .cover { inline-size: 15rem; block-size: 15rem; border-radius: var(--r-1); object-fit: cover; margin: 0; }
  .show-text h1 + p { margin-block-start: var(--space-2); }
  .show-text .prose { margin-block-start: var(--space-3); }
  .show-text .links { margin-block-start: var(--space-4); }
  .episodes h2 { margin-block-start: var(--space-7); }
  .episode-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }
  .episode-list .card { margin-block-start: 0; }
  .episode h3 { margin-block-start: 0; font-size: var(--t-1); }
  .episode .prose.small { font-size: var(--t--1); color: var(--fg-muted); }
  .episode audio { inline-size: 100%; margin-block-start: var(--space-3); }
  .episode p.small { margin-block-start: var(--space-2); color: var(--fg-muted); }

  .faq details { border-block-end: 1px solid var(--border); padding-block: var(--space-3); max-inline-size: var(--measure); }
  .faq summary { font-weight: 600; }
  .faq details p { margin-block-start: var(--space-2); padding-inline-start: 1.25em; color: var(--fg-muted); }
  .faq h2 { margin-block-start: var(--space-7); }

  .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-block-start: var(--space-5); }
  @container (min-width: 40rem) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
  .stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-4); display: grid; gap: var(--space-1); }
  .stat-label { font-size: var(--t--1); color: var(--fg-muted); }
  .stat-value { font-size: var(--t-2); font-weight: 650; font-variant-numeric: tabular-nums; }
  .bars { padding: var(--space-3); padding-block-start: var(--space-5); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); margin-block-start: var(--space-4); }
  .bar-row { display: flex; align-items: flex-end; gap: 2px; block-size: 9rem; }
  .bar { flex: 1; block-size: max(var(--h), 2px); background: var(--accent); border-radius: 2px 2px 0 0; position: relative; min-inline-size: 0; }
  .bar[data-zero=true] { background: var(--border-strong); }
  .bars figcaption { margin-block-start: var(--space-3); }
  .bar-value { display: none; position: absolute; inset-block-end: 100%; inset-inline: 0; text-align: center; font-size: var(--t--1); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  @container (min-width: 40rem) { .bar-value { display: block; } }
  .bars + details { margin-block-start: var(--space-3); }
  .btn .icon { inline-size: 1em; block-size: 1em; }
  .box p { margin-block-start: var(--space-2); font-size: var(--t--1); color: var(--fg-muted); }
  .site-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .site-nav a { color: var(--fg-muted); text-decoration: none; padding-block: var(--space-1); }
  .site-nav a:hover { color: var(--fg); text-decoration: underline; }
  .site-nav a[aria-current] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; text-decoration-color: var(--accent); }
  .site-nav .btn { padding-block: var(--space-1); }
  .site-nav .logout { margin-inline-start: var(--space-2); }
  .site-nav .who { display: none; line-height: 1; }
  @media (min-width: 48rem) { .site-nav .who { display: inline; } }
  .icon { inline-size: 1em; block-size: 1em; flex: none; }

  /* Temabryter: spor med sol og måne, knott som flytter seg. */
  .switch { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
  .switch .track { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; inline-size: 3.5rem; block-size: 1.75rem; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--fg-muted); }
  .switch .icon { justify-self: center; position: relative; z-index: 1; }
  .switch .knob { position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: calc(1.75rem - 6px); border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border-strong); transition: transform var(--dur); }
  .switch[aria-checked=true] .knob { transform: translateX(1.75rem); }
  .switch[aria-checked=true] .track { background: var(--accent-soft); color: var(--fg); }
  .switch .moon { opacity: .5; }
  .switch[aria-checked=true] .moon { opacity: 1; }
  .switch[aria-checked=true] .sun { opacity: .5; }
  @media (forced-colors: active) { .switch .knob { border: 1px solid CanvasText; } }

  .crumbs { font-size: var(--t--1); margin-block-start: var(--space-4); }
  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--fg-muted); }
  .crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--border-strong); }
  .crumbs a { color: var(--fg-muted); }
  .crumbs [aria-current] { color: var(--fg); }
  .crumbs + main { padding-block-start: var(--space-5); }

  .site-footer { padding-block: var(--space-5); border-block-start: 1px solid var(--border); font-size: var(--t--1); color: var(--fg-muted); }
  .site-footer p { margin: 0; }

  .hero { margin-block-end: var(--space-6); }
  .lede { font-size: var(--t-1); color: var(--fg-muted); margin-block-start: var(--space-4); }
  .prose h2 { font-size: var(--t-2); }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose ul, .prose ol { padding-inline-start: 1.5em; max-inline-size: var(--measure); }
  .steps ol { list-style: none; padding: 0; counter-reset: steg; display: grid; gap: var(--space-5); margin-block-start: var(--space-5); }
  .steps li { counter-increment: steg; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-3); }
  .steps li::before { content: counter(steg); font-weight: 650; font-size: var(--t-1); color: var(--fg-muted); font-variant-numeric: tabular-nums; line-height: 1.2; }
  .steps li > * { grid-column: 2; }
  .steps li h3 { margin-block-start: 0; grid-row: 1; }
  .steps li p { margin-block-start: var(--space-2); }

  .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-5); margin-block-start: var(--space-6); }
  .card h2 { margin-block-start: 0; }
  .card > * + * { margin-block-start: var(--space-3); }
  .links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .podcast-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
  .podcast-list .card { margin-block-start: 0; }

  .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .55em 1em; border-radius: var(--r-1); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; line-height: 1.2; font-weight: 500; transition: background var(--dur), color var(--dur), border-color var(--dur); }
  .btn.primary { background: var(--accent); color: var(--accent-fg); }
  .btn.primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
  .btn.second { background: var(--second); color: var(--second-fg); }
  .btn.outline { border-color: var(--border-strong); color: var(--fg); }
  .btn.outline:hover { background: var(--bg-3); }
  .btn.quiet { color: var(--fg-muted); }
  .btn.quiet:hover { color: var(--fg); background: var(--bg-3); }
  .btn.small { font-size: var(--t--1); padding: .5em .8em; min-block-size: 2.4rem; }
  .btn.danger { background: var(--danger); color: var(--danger-fg); }
  .btn.danger:hover { background: var(--danger-hover); color: var(--danger-fg); }
  .danger-zone { margin-block-start: var(--space-7); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); max-inline-size: 52rem; }
  .danger-zone h2 { margin-block-start: 0; font-size: var(--t-1); }
  .danger-zone p { margin-block: var(--space-2) var(--space-4); }
  .consequences { padding-inline-start: 1.2em; display: grid; gap: var(--space-2); }
  .btn:disabled { opacity: .6; cursor: progress; }
  form.inline { display: inline; }

  .form { max-inline-size: 52rem; margin-block-start: var(--space-5); display: grid; gap: var(--space-5); align-items: start; }
  .field { display: grid; gap: var(--space-1); align-content: start; }
  .field > label, .field > .label { font-weight: 600; font-size: var(--t--1); }
  .field .req { font-weight: 400; color: var(--fg-muted); }
  .field input:not([type=checkbox]), .field select, .field textarea {
    inline-size: 100%; padding-inline: .75em; border: 1px solid var(--border-strong); border-radius: var(--r-1); background: var(--bg-2); color: var(--fg);
  }
  /* Lik høyde på alle enkeltlinje-kontroller, så kolonner i skjemaet står på linje. */
  .field input:not([type=checkbox]), .field select { block-size: 2.75rem; padding-block: 0; line-height: 2.75rem; }
  .field select { line-height: normal; }
  .field input[type=file] { line-height: 2.5rem; padding-block: .1rem; }
  .field input[readonly] { background: var(--bg-3); color: var(--fg-muted); }
  .field textarea { resize: vertical; padding-block: .55em; line-height: 1.5; }
  .field .hint { font-size: var(--t--1); color: var(--fg-muted); margin: 0; }
  .field:has(input:user-invalid) > label, .field:has(input:user-invalid) .hint { color: var(--danger); }
  .field:has(input:user-invalid) input { border-color: var(--danger); }
  .field .err { display: none; font-size: var(--t--1); color: var(--danger); margin: 0; }
  .field:has(input:user-invalid) .err { display: block; }
  .field .req { font-weight: 400; color: var(--fg-muted); font-size: var(--t--1); }
  fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  fieldset.field legend { padding: 0; margin-block-end: var(--space-1); }
  .publish .options { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .publish .option { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
  .publish .option input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--accent); }
  .publish .when { display: none; margin-block-start: var(--space-3); }
  .publish:has(input[value=scheduled]:checked) .when { display: grid; }
  .publish:has(input[value=scheduled]:checked) > .hint { display: none; }
  .field.check .option { font-weight: 400; font-size: var(--t-0); display: flex; align-items: center; gap: var(--space-2); block-size: 2.75rem; }
  .field.check input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--accent); }
  .grid-2, .grid-3 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
  @container (min-width: 36rem) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  }
  .extras { border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-4); }
  .extras summary { cursor: pointer; font-weight: 600; }
  .extras[open] summary { margin-block-end: var(--space-4); }
  .extras .field + .field { margin-block-start: var(--space-4); }
  .actions-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
  .progress { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t--1); color: var(--fg-muted); }
  .progress[hidden] { display: none; }
  .progress progress { inline-size: 16rem; accent-color: var(--accent); }

  .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-4); }

  .notice { border-inline-start: 6px solid var(--info); background: var(--bg-2); border-radius: var(--r-1); padding: var(--space-3) var(--space-4); margin-block: var(--space-4); }
  .notice[data-kind=ok] { border-color: var(--ok); }
  .notice[data-kind=warn] { border-color: var(--warn); }
  .notice[data-kind=danger] { border-color: var(--danger); }
  .notice .sign { font-weight: 650; margin-inline-end: var(--space-1); }

  .st { display: inline-flex; align-items: center; gap: .35em; padding: .15em .7em; border-radius: 999px; font-size: var(--t--1); font-weight: 500; border: 1px solid var(--border); background: var(--bg-2); white-space: nowrap; }
  .st > span:first-child { font-weight: 650; }
  .st[data-s=ok] { border-color: var(--ok); color: var(--fg); }
  .st[data-s=ok] > span:first-child { color: var(--ok); }
  .st[data-s=warn] > span:first-child { color: var(--warn); }
  .st[data-s=warn] { border-style: dashed; border-color: var(--border-strong); }
  .st[data-s=danger] > span:first-child { color: var(--danger); }
  .st[data-s=info] > span:first-child { color: var(--info); }
  .st[data-s=info] { border-style: dotted; border-color: var(--border-strong); }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg-2); }
  table { inline-size: 100%; font-size: var(--t--1); }
  th, td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border); vertical-align: middle; }
  th { font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
  tbody tr:last-child td { border-block-end: 0; }
  .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .actions { text-align: end; white-space: nowrap; }
}

@layer utilities {
  .muted { color: var(--fg-muted); }
  .small { font-size: var(--t--1); }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}