:root {
  --bg:#FAF7F2;
  --card:#f8f5ec;
  --ink:#2B2E33;
  --muted:#5f6470;
  --border:#e6e8ef;
  --accent:#304b78;
  --accent-2:#8b9bb8;
  --accent-3:#307b78;
  --table-stripe:#F0ECE6;
  --kbd:#eef2ff;
  --code-bg:#0f172a0d;
  --shadow:0 6px 20px rgba(31,35,48,.08);
  --info:#0F52BA;
}

:root.theme-light {
  --bg:#FAF7F2;
  --card:#f8f5ec;
  --ink:#2B2E33;
  --muted:#5f6470;
  --border:#e6e8ef;
  --accent:#304b78;
  --accent-2:#8b9bb8;
  --accent-3:#307b78;
  --table-stripe:#F0ECE6;
  --kbd:#eef2ff;
  --code-bg:#0f172a0d;
  --shadow:0 6px 20px rgba(31,35,48,.08);
  --info:#0F52BA;
}

:root.theme-dark {
  --bg:#0f1320;
  --card:#161a28;
  --ink:#f8f5ec;
  --muted:#9aa3b2;
  --border:#242a3a;
  --accent:#7ea0ff;
  --accent-2:#4f6bb3;
  --accent-3:#7ec0ff;
  --table-stripe:#1a2032;
  --kbd:#1d2540;
  --code-bg:#091026;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --info:#87CEEB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1320;
    --card:#161a28;
    --ink:#f8f5ec;
    --muted:#9aa3b2;
    --border:#242a3a;
    --accent:#7ea0ff;
    --accent-2:#4f6bb3;
    --accent-3:#7ec0ff;
    --table-stripe:#1a2032;
    --kbd:#1d2540;
    --code-bg:#091026;
    --shadow:0 6px 24px rgba(0,0,0,.35);
    --info:#87CEEB;
  }
}

html,body{ background:var(--bg); color:var(--ink); }
body{ font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif; }
#content{ max-width:55rem; margin:3rem auto; padding:0 1.25rem; }

h1,h2,h3,h4{ line-height:1.2; margin:0.3rem 0 1rem; }
h2{ font-size:1.8rem; letter-spacing:.2px; }
h3{ font-size:1.27rem; color:var(--accent); }
h4{ font-size:1.05rem; color:var(--accent-3); }
.subtitle{ color:var(--muted); }
h2::after{
  content:""; display:block; width:64px; height:3px; margin:.5rem 0 0;
  background:linear-gradient(90deg,var(--accent),transparent); border-radius:3px;
}

.outline-2,.outline-3{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.05rem 1.25rem 0.2rem; margin:1.05rem 0; box-shadow:var(--shadow);
}
.outline-3{ border-radius:12px; padding:0.7rem 1rem 0.1rem; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

ul,ol{ padding-left:1.2rem; }
li{ margin:.20rem 0; }
ul li::marker{ color:var(--accent-2); }

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  margin-bottom: 1rem;
}

th,td{ padding:.65rem .75rem; vertical-align:middle; }
thead th{
  position:sticky; top:0; background:var(--card); color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);
}
tbody tr{ border-bottom:1px solid var(--border); }
tbody tr:nth-child(2n){ background:var(--table-stripe); }
/* hex kompakt */
.hex { white-space:nowrap; font-family:ui-monospace,Menlo,Consolas,monospace; }

pre,code,kbd{ font-family:ui-monospace,Menlo,Consolas,monospace; }
pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem; }

.hex-chip{
  display:inline-block; width:1.1em; height:1.1em; margin-left:.4em; vertical-align:-.15em;
  border:1px solid rgba(0,0,0,.18); border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.hex-code{
  background:color-mix(in srgb, var(--accent-2) 12%, transparent);
  border:1px solid var(--border); padding:.15em .4em; border-radius:6px; color:var(--ink);
}

blockquote {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 10px;
  line-height: 1.55;
}

blockquote.info {
  border-left: 4px solid #2a5d9f; /* dyp sjøblå */
  background: color-mix(in srgb, #2a5d9f 12%, var(--card));
  color: var(--ink);
}

blockquote.tip {
  border-left: 4px solid #3b6b3b; /* granskog-grønn */
  background: color-mix(in srgb, #3b6b3b 7%, var(--card));
  color: var(--ink);
  @media (prefers-color-scheme: dark) {
    background: color-mix(in srgb, #3b6b3b 17%, var(--card));
  }
}

blockquote.warn {
  border-left: 4px solid #c75b1e; /* bål-oransje */
  background: color-mix(in srgb, #c75b1e 12%, var(--card));
  color: var(--ink);
}

/* Ekstra: gi <strong> og <em> litt farge inni boksene */
blockquote strong { color: var(--accent); }
blockquote em { color: var(--accent); }


@media print{
  body{ background:#fff; }
  #content{ max-width:none; margin:0; }
  .outline-2,.outline-3{ box-shadow:none; border-color:#ddd; }
  a{ color:#000; text-decoration:underline; }
}

.title {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
}

.sesongkrydder {
  max-width: 350px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sesongkrydder .season-header td {
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --- RESPONSIVE TABELLER --- */
/* 1) Horisontal scroll på små skjermer */
@media (max-width: 720px){
  table{
    display: block;            /* gjør det scrollbart */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  thead, tbody, tr { width: max-content; } /* lar kolonner beholde bredden sin */
  /* kun HEX-kolonne får nowrap; resten kan brytes */
  td, th { white-space: normal; }
  /* td:nth-child(2), th:nth-child(2){ white-space: nowrap; } /\* HEX *\/ */
}

/* 2) Sticky første kolonne for kontekst (valgfritt, aktiver via .sticky-col-1) */
.sticky-col-1 thead th:first-child,
.sticky-col-1 tbody td:first-child{
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  box-shadow: 8px 0 0 var(--card);
}

/* 3) Skjul en kolonne på veldig smal skjerm (valgfritt) */
@media (max-width: 560px){
  /* Skjul kolonne 4 (friksjon) hvis tabellen har .hide-col-4-xs */
  .hide-col-4-xs th:nth-child(4),
  .hide-col-4-xs td:nth-child(4){ display: none; }
}

/* 4) Lite visuelt hint om at tabellen kan scrolles */
@media (max-width: 720px){
  table{
    background:
      linear-gradient(to right, rgba(0,0,0,0.06), transparent) 0 0/12px 100% no-repeat,
      linear-gradient(to left,  rgba(0,0,0,0.06), transparent) 100% 0/12px 100% no-repeat;
  }
}

.info {
  color: var(--info);
}

/* TOC-kortet */
#toc{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.2rem 1.5rem;
  margin:2rem 0;
  box-shadow:var(--shadow);
}

/* Tittel */
#toc h2{
  font-size:1.2rem;
  margin:0 0 1rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Liste – én kolonne som standard */
#toc ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* To kolonner ≥1100px – fyller ovenfra og ned (1 4 / 2 5 / 3 6) */
@media (min-width:1100px){
  #toc ul{
    column-count:2;
    column-gap:1.6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }
}

/* Ikke del et punkt mellom kolonner + vertikal spacing */
#toc li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:.35rem 0;
}

/* Lenker */
#toc a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem .6rem;
  border-radius:10px;
  color:var(--ink);
  text-decoration:none;
  transition:background .18s, color .18s, transform .08s ease-out;
}

#toc a:hover{
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  color:var(--accent);
}

#toc a:active{ transform:translateY(1px); }

#toc a:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset:2px;
}

/* Aktivt avsnitt */
#toc a.is-active{
  background:color-mix(in srgb, var(--accent) 16%, var(--card));
  color:var(--accent);
  font-weight:600;
}

/* Emoji-badge */
.toc-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35em; height:1.35em;
  font-size:1.05em; line-height:1;
  border-radius:8px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

#back-to-toc{
  position:fixed; right:16px; bottom:18px; z-index:60;
  padding:.6rem .8rem; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  cursor:pointer; font-size:1rem; line-height:1;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .08s, background .18s, color .18s;
}
#back-to-toc.show{ opacity:1; pointer-events:auto; }
#back-to-toc:hover{ background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--accent); }
#back-to-toc:active{ transform:translateY(1px); }

#theme-toggle{
  position:fixed; right:16px; bottom:72px; z-index:60;
  padding:.6rem .63rem; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  cursor:pointer; font-size:1rem; line-height:1;
  transition:transform .08s, background .18s, color .18s;
}
#theme-toggle:hover{ background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--accent); }
#theme-toggle:active{ transform:translateY(1px); }