/* Treningsplanleggeren
   Farger: snøgrå grunn, blekkblå tekst, kinahatt-oransje for handlinger.
   Øktdelene har hver sin kjeglefarge: gul oppvarming, blå hovedaktivitet, grønn avslutning. */

:root {
  --bg: #EDF1F3;
  --flate: #FFFFFF;
  --flate-2: #F5F7F8;
  --tekst: #13202A;
  --dempet: #52616C;
  --linje: #D3DBE0;
  --linje-sterk: #B6C2CA;

  --aksent: #C9441A;
  --aksent-hover: #B03A14;
  --aksent-tekst: #FFFFFF;
  --aksent-svak: #FBE6DC;

  --oppv: #E2A019;
  --oppv-svak: #FBF0D5;
  --oppv-tekst: #6A4600;
  --hoved: #2A62AE;
  --hoved-svak: #DEE8F6;
  --hoved-tekst: #183F74;
  --avsl: #2D8160;
  --avsl-svak: #DBEEE5;
  --avsl-tekst: #17503A;

  --fare: #B3261E;
  --fare-svak: #FBE3E1;
  --lag4: #8656C2;
  --ok: #2D8160;

  --skygge: 0 1px 2px rgba(19, 32, 42, .06), 0 6px 18px rgba(19, 32, 42, .06);
  --radius: 10px;
  --radius-liten: 6px;

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font-tekst: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C1318;
    --flate: #141E26;
    --flate-2: #1A2630;
    --tekst: #E3EAF0;
    --dempet: #95A5B1;
    --linje: #26343F;
    --linje-sterk: #3A4B58;
    --aksent: #F06A34;
    --aksent-hover: #FF7D48;
    --aksent-tekst: #1A0C05;
    --aksent-svak: #3A1E12;
    --oppv: #F0B43C;
    --oppv-svak: #352A11;
    --oppv-tekst: #F5CF7D;
    --hoved: #6096E0;
    --hoved-svak: #172A43;
    --hoved-tekst: #ACC8F0;
    --avsl: #4DB088;
    --avsl-svak: #14332A;
    --avsl-tekst: #9AD9BE;
    --fare: #F2837B;
    --fare-svak: #3B1917;
    --lag4: #B08AE8;
    --ok: #4DB088;
    --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1318;
  --flate: #141E26;
  --flate-2: #1A2630;
  --tekst: #E3EAF0;
  --dempet: #95A5B1;
  --linje: #26343F;
  --linje-sterk: #3A4B58;
  --aksent: #F06A34;
  --aksent-hover: #FF7D48;
  --aksent-tekst: #1A0C05;
  --aksent-svak: #3A1E12;
  --oppv: #F0B43C;
  --oppv-svak: #352A11;
  --oppv-tekst: #F5CF7D;
  --hoved: #6096E0;
  --hoved-svak: #172A43;
  --hoved-tekst: #ACC8F0;
  --avsl: #4DB088;
  --avsl-svak: #14332A;
  --avsl-tekst: #9AD9BE;
  --fare: #F2837B;
  --fare-svak: #3B1917;
  --lag4: #B08AE8;
  --ok: #4DB088;
  --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--hoved); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--hoved); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.app {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 0 64px;
}

/* ---------- Toppfelt ---------- */
.topp {
  padding-block: 20px 0;
  display: grid;
  gap: 14px;
}
.topp-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.merke { display: flex; align-items: center; gap: 12px; }
.merke-kjegle { width: 42px; height: 28px; color: var(--aksent); flex: none; }
.merke-navn {
  font-family: var(--font-display);
  font-stretch: 78%;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
}
.merke-under { color: var(--dempet); font-size: 14px; margin-top: 4px; }
.lagring {
  font-size: 13px;
  color: var(--dempet);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lagring::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--linje-sterk);
}
.lagring[data-modus="delt"]::before { background: var(--ok); }
.lagring[data-modus="kobler"]::before { background: var(--oppv); }
.lagring[data-modus="server"]::before { background: var(--ok); }
.lagring[data-modus="frakoblet"]::before { background: var(--fare); }

.faner {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linje);
  overflow-x: auto;
  scrollbar-width: none;
}
.faner::-webkit-scrollbar { display: none; }
.fane-knapp {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 12px 9px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dempet);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fane-knapp:hover { color: var(--tekst); }
.fane-knapp[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--aksent); }
.teller {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-size: 12px;
  font-weight: 700;
  background: var(--flate-2);
  border: 1px solid var(--linje);
  border-radius: 999px;
  padding: 0 7px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.teller:empty { display: none; }

main { padding-top: 24px; }

/* ---------- Felles kontroller ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-liten);
  border: 1px solid var(--linje-sterk);
  background: var(--flate);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tekst);
  line-height: 1.2;
}
.knapp:hover { border-color: var(--tekst); }
.knapp-primar { background: var(--aksent); border-color: var(--aksent); color: var(--aksent-tekst); }
.knapp-primar:hover { background: var(--aksent-hover); border-color: var(--aksent-hover); }
.knapp-bred { width: 100%; min-height: 48px; font-size: 17px; }
.knapp-liten { min-height: 34px; padding: 5px 10px; font-size: 14px; }
.knapp-fare { color: var(--fare); border-color: currentColor; }
.knapp-fare-fylt { background: var(--fare); border-color: var(--fare); color: var(--flate); }
.knapp svg { width: 16px; height: 16px; flex: none; }
.lenke-knapp {
  background: none; border: 0; padding: 0;
  color: var(--hoved); font-weight: 700; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.ikon-knapp {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-liten);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--dempet);
  flex: none;
}
.ikon-knapp:hover { color: var(--tekst); border-color: var(--linje-sterk); background: var(--flate); }
.ikon-knapp svg { width: 18px; height: 18px; }
.ikon-knapp:disabled { opacity: .35; cursor: default; border-color: transparent; background: none; }

.knapperad { display: flex; flex-wrap: wrap; gap: 8px; }

.panel-tittel {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dempet);
}

.felt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.felt legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}
.felt-rad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hint { font-size: 13px; color: var(--dempet); }

.segment {
  display: flex;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  overflow: hidden;
  background: var(--flate);
}
.segment label { flex: 1 1 0; position: relative; min-width: 0; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  border-left: 1px solid var(--linje);
  cursor: pointer;
}
.segment label:first-child span { border-left: 0; }
.segment small { font-weight: 400; font-size: 12px; color: var(--dempet); margin-top: 2px; }
.segment input:checked + span { background: var(--tekst); color: var(--flate); }
.segment input:checked + span small { color: inherit; opacity: .8; }
.segment input:focus-visible + span { outline: 3px solid var(--hoved); outline-offset: -3px; }
.segment-smal span { min-height: 40px; }

.brikker { display: flex; flex-wrap: wrap; gap: 6px; }
.brikke { position: relative; }
.brikke input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.brikke span, button.brikke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--linje-sterk);
  background: var(--flate);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
button.brikke[aria-pressed="true"],
.brikke input:checked + span {
  background: var(--hoved-svak);
  border-color: var(--hoved);
  color: var(--hoved-tekst);
}
.brikke input:focus-visible + span { outline: 3px solid var(--hoved); outline-offset: 2px; }

.bryter { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.bryter input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--hoved); flex: none; }

.kontroll { display: grid; gap: 6px; min-width: 0; }
.kontroll label { font-weight: 700; font-size: 14px; }
.kontroll input, .kontroll select, .kontroll textarea, .eksempel select, .velger-filter input[type="search"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
}
.kontroll textarea { resize: vertical; min-height: 64px; }
.kontroll input[aria-invalid="true"] { border-color: var(--fare); box-shadow: 0 0 0 1px var(--fare); }

.feilmelding { color: var(--fare); font-weight: 700; font-size: 14px; }
.feilmelding:empty { display: none; }

/* ---------- Planlegg ---------- */
/* Planleggeren, steg 1: oppsettet, med eksempler og heftets mal ved siden av */
.oppsett-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .oppsett-grid { grid-template-columns: minmax(0, 640px) minmax(0, 360px); gap: 32px; }
}
.oppsett-siden { display: grid; gap: 20px; }
#plan-oppsett { max-width: 1032px; }
#fortsett-kort:not(:empty) { margin-bottom: 20px; }
.fortsett span { font-size: 14px; opacity: .85; }

/* Steg 2: forslaget */
.plan-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.plan-nav .lenke-knapp { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 15px; }
.plan-nav .lenke-knapp svg { width: 18px; height: 18px; }
.plan-nav .lenke-knapp:hover { text-decoration: underline; }
.plan .plan-kropp { margin-top: 0; }
#merknader:empty, #redigerer-banner:empty { display: none; }
@media (min-width: 1000px) {
  .plan-kropp { grid-template-columns: minmax(0, 1fr) 360px; }
  /* Sidekolonnen kan være høyere enn skjermen, så den følger ikke med ved rulling. */
  .plan-siden { position: static; }
  .plan-siden .skjema { grid-template-columns: minmax(0, 1fr); }
  .plan-siden .datovelger { left: auto; right: 0; width: 340px; }
}

.oppsett {
  display: grid;
  gap: 20px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 20px;
}

.eksempel {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.eksempel-tittel { font-weight: 700; font-size: 14px; }
.eksempel-rad { display: flex; gap: 8px; }
.eksempel-rad select { flex: 1; min-width: 0; }

.mal-boks { background: var(--flate-2); border-radius: var(--radius-liten); padding: 14px; display: grid; gap: 10px; }
.mal-tittel { font-weight: 700; font-size: 14px; }
.mal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--dempet); }
.mal-liste li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: baseline; }
.mal-liste strong { color: var(--tekst); }
.mal-prikk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--hoved); }
.mal-prikk.del-oppvarming { background: var(--oppv); }
.mal-prikk.del-hoved { background: var(--hoved); }
.mal-prikk.del-avslutning { background: var(--avsl); }

.plan { display: grid; gap: 20px; min-width: 0; }
.plan-hode { display: grid; gap: 6px; }
.plan-eyebrow {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aksent);
}
.plan-hode h1, .side-hode h1 {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
}
.plan-under { color: var(--dempet); }

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--hoved);
  background: var(--hoved-svak);
  color: var(--hoved-tekst);
}
.banner p { font-size: 15px; }
.banner strong { color: var(--tekst); }
#delt-banner:not(:empty) { margin-bottom: 20px; }

.merknad {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-liten);
  background: var(--oppv-svak);
  color: var(--oppv-tekst);
}
.merknad[data-type="info"] { background: var(--flate); border: 1px solid var(--linje); color: var(--dempet); }
#merknader { display: grid; gap: 6px; }
#merknader:empty { display: none; }

/* Tidslinjen: 60 minutter som en stadionklokke */
.tidslinje-ramme {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  display: grid;
  gap: 10px;
}
.tl-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tl-sum {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl-sum small { font-size: 16px; font-weight: 700; color: var(--dempet); margin-left: 4px; }
.status-pille {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--avsl-svak);
  color: var(--avsl-tekst);
}
.status-pille[data-status="over"] { background: var(--fare-svak); color: var(--fare); }
.status-pille[data-status="under"] { background: var(--oppv-svak); color: var(--oppv-tekst); }
.tl-bar { position: relative; }
.tl-segmenter {
  position: relative;
  height: 46px;
  border-radius: 5px;
  background: var(--flate-2);
  box-shadow: inset 0 0 0 1px var(--linje);
  overflow: hidden;
}
.tl-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 3px solid var(--flate);
  display: flex;
  align-items: center;
  padding-inline: 8px;
  overflow: hidden;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-seg span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-seg.del-oppvarming { background: var(--oppv); color: #2B1C00; }
.tl-seg.del-hoved { background: var(--hoved); color: #FFFFFF; }
.tl-seg.del-avslutning { background: var(--avsl); color: #FFFFFF; }
:root[data-theme="dark"] .tl-seg.del-hoved,
:root[data-theme="dark"] .tl-seg.del-avslutning { color: #06121F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-seg.del-hoved,
  :root:not([data-theme="light"]) .tl-seg.del-avslutning { color: #06121F; }
}
.tl-skala { position: relative; height: 18px; font-size: 12px; color: var(--dempet); font-variant-numeric: tabular-nums; }
.tl-skala span { position: absolute; top: 0; transform: translateX(-50%); }
.tl-skala span:first-child { transform: none; }
.tl-skala span:last-child { transform: translateX(-100%); }
.tl-grense {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--fare);
  border-radius: 1px;
}

/* Øktdelene */
#deler, .deler { display: grid; gap: 24px; }
.del { display: grid; gap: 10px; }
.del-hode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.del-kjegle { width: 26px; height: 18px; flex: none; }
.del-oppvarming .del-kjegle { color: var(--oppv); }
.del-hoved .del-kjegle { color: var(--hoved); }
.del-avslutning .del-kjegle { color: var(--avsl); }
.del-hode h2 {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}
.del-min {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: 15px;
  color: var(--dempet);
  font-variant-numeric: tabular-nums;
}
.del-hode .knapp { margin-left: auto; }
.del-tom {
  border: 1px dashed var(--linje-sterk);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 14px;
  color: var(--dempet);
}

.blokk {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
}
.blokk-tid {
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.del-oppvarming .blokk-tid { background: var(--oppv-svak); color: var(--oppv-tekst); }
.del-hoved .blokk-tid { background: var(--hoved-svak); color: var(--hoved-tekst); }
.del-avslutning .blokk-tid { background: var(--avsl-svak); color: var(--avsl-tekst); }
.blokk-tid .fra { font-stretch: 75%; font-weight: 800; font-size: 22px; line-height: 1; white-space: nowrap; }
.blokk-tid .til { font-stretch: 85%; font-size: 13px; font-weight: 600; opacity: .85; }

.blokk-innhold { padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.blokk-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.blokk-hode h3 { font-size: 18px; line-height: 1.25; }
.blokk-meta { font-size: 13px; color: var(--dempet); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.blokk-meta .advarsel { color: var(--oppv-tekst); background: var(--oppv-svak); padding: 0 6px; border-radius: 4px; font-weight: 700; }
.blokk-slik { max-width: 68ch; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  flex: none;
  background: var(--flate);
}
.stepper button {
  width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  font-size: 18px; font-weight: 700;
  color: var(--tekst);
}
.stepper button:hover { background: var(--flate-2); }
.stepper button:disabled { opacity: .3; cursor: default; background: none; }
.stepper output {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

details.mer { font-size: 15px; }
details.mer summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--hoved);
  width: fit-content;
  list-style-position: outside;
}
.mer-innhold {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px 24px;
  margin-top: 12px;
  align-items: start;
}
.mer-tekst { display: grid; gap: 10px; }
.kilde-linje { font-size: 13px; color: var(--dempet); }

/* Beskrivelse av en aktivitet: organisering, gjennomføring, varianter, tips */
.beskrivelse { display: grid; gap: 14px; max-width: 68ch; }
.beskrivelse section { display: grid; gap: 4px; }
.beskrivelse h4, .beskrivelse h2 {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dempet);
}
.beskrivelse ol, .beskrivelse ul { margin: 0; padding-left: 22px; display: grid; gap: 5px; }
.beskrivelse ol li::marker { font-weight: 700; color: var(--dempet); font-variant-numeric: tabular-nums; }

.blokk-handlinger { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.blokk-handlinger .skyv { margin-left: auto; display: flex; gap: 2px; }

.egen-felt { display: grid; gap: 8px; flex: 1; min-width: 0; }
.egen-felt input, .egen-felt textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
}
.egen-felt input { font-weight: 700; font-size: 17px; }

/* Lagre og pakkeliste */
.lagre-panel, .pakkeliste {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 16px;
}
.skjema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kontroll-bred { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .skjema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .skjema .kontroll:nth-child(4) { grid-column: 1 / -1; }
}

.pakke-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pakke-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 15px; }
.pakke-liste input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--avsl); }
.pakke-liste .kilde-akt { color: var(--dempet); font-size: 13px; display: block; }
.krav { font-size: 14px; padding: 10px 12px; background: var(--flate-2); border-radius: var(--radius-liten); }

/* ---------- Sider ---------- */
.side-hode { display: grid; gap: 8px; margin-bottom: 20px; }
.side-ingress { color: var(--dempet); max-width: 65ch; }
.filter { margin-bottom: 20px; }

/* Øktene våre */
.okt-seksjon { display: grid; gap: 10px; margin-bottom: 28px; }
.okt-seksjon > h2 { margin-bottom: 2px; }
.okt-rad {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
}
.okt-rad.tidligere .dato-blad { opacity: .7; }
.okt-hode {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  background: none;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
}
.okt-hode:hover { background: var(--flate-2); }
.dato-blad {
  display: grid;
  justify-items: center;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  overflow: hidden;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  background: var(--flate);
}
.dato-blad .mnd {
  width: 100%;
  text-align: center;
  background: var(--aksent);
  color: var(--aksent-tekst);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 18px;
}
.dato-blad .dag { font-stretch: 75%; font-weight: 800; font-size: 26px; line-height: 34px; }
.okt-info { display: grid; gap: 2px; min-width: 0; }
.okt-navn { font-weight: 700; font-size: 17px; line-height: 1.25; }
.okt-meta { font-size: 14px; color: var(--dempet); }
.okt-hoyre { display: flex; align-items: center; gap: 8px; }
.gruppe-pille {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--linje-sterk);
  white-space: nowrap;
}
.pil { width: 18px; height: 18px; color: var(--dempet); flex: none; }
.okt-hode:hover .pil { color: var(--tekst); }
@media (max-width: 560px) {
  .okt-hode { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; }
  .okt-hoyre .gruppe-pille { display: none; }
}

.okt-notat { background: var(--flate-2); border-radius: var(--radius-liten); padding: 10px 12px; font-size: 15px; white-space: pre-wrap; }
.okt-notat strong { display: block; font-size: 13px; color: var(--dempet); }
.slett-bekreft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-liten);
  background: var(--fare-svak); color: var(--fare); font-weight: 700; font-size: 14px;
}

.tom-tilstand {
  background: var(--flate);
  border: 1px dashed var(--linje-sterk);
  border-radius: var(--radius);
  padding: 28px 20px;
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 60ch;
}
.tom-tilstand h2 { font-size: 18px; }
.tom-tilstand p { color: var(--dempet); }

#okter-verktoy:not(:empty) {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--linje);
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--dempet);
}

/* Aktivitetsbanken */
.bank-filter {
  display: grid;
  gap: 14px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.filter-rad { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.filtergruppe { display: grid; gap: 6px; min-width: 0; }
.filter-tittel { font-weight: 700; font-size: 14px; }
.antall { font-size: 14px; color: var(--dempet); margin-bottom: 12px; }
.bank-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  align-items: start;
}
.akt-kort {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 8px;
}
.akt-kort h3 { font-size: 17px; line-height: 1.25; }
.akt-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.side-ref { font-size: 12px; color: var(--dempet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.merkelapper { display: flex; flex-wrap: wrap; gap: 4px; }
.merkelapp {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--flate-2);
  border: 1px solid var(--linje);
  color: var(--dempet);
}
.merkelapp.ski { color: var(--hoved-tekst); background: var(--hoved-svak); border-color: transparent; }
.merkelapp.advarsel { color: var(--oppv-tekst); background: var(--oppv-svak); border-color: transparent; }
.akt-kort p { font-size: 15px; }
.akt-utstyr { font-size: 14px; color: var(--dempet); }
.legg-til { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; font-size: 13px; color: var(--dempet); }

/* Råd */
.rad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.rad-kort {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.rad-kort-bred { grid-column: 1 / -1; }
.rad-kort h2 {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}
.rad-kort ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rad-kort p { color: var(--dempet); max-width: 70ch; }
.rad-tidslinje { display: flex; gap: 3px; height: 38px; max-width: 640px; }
.rad-tidslinje span {
  border-radius: 4px;
  display: flex; align-items: center; padding-inline: 10px;
  font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 15px;
}
.rad-tidslinje .del-oppvarming { background: var(--oppv); color: #2B1C00; }
.rad-tidslinje .del-hoved { background: var(--hoved); color: #FFFFFF; }
.rad-tidslinje .del-avslutning { background: var(--avsl); color: #FFFFFF; }
.rad-deler { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.rad-deler dt { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rad-deler dd { margin: 0; color: var(--dempet); font-size: 15px; }
.kilde { margin-top: 20px; font-size: 14px; color: var(--dempet); }

/* Velger (dialog) */
dialog#velger {
  width: min(680px, calc(100vw - 24px));
  max-height: min(86vh, 820px);
  padding: 0;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  box-shadow: var(--skygge);
}
dialog#velger::backdrop { background: rgba(8, 16, 22, .5); }
.velger-ramme { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(86vh, 820px); }
.velger-hode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 20px; }
.velger-hode h2 { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 22px; }
.velger-filter { display: grid; gap: 10px; padding: 0 20px 12px; border-bottom: 1px solid var(--linje); }
.velger-liste { overflow-y: auto; padding: 8px 12px; display: grid; gap: 2px; align-content: start; }
.velger-rad {
  display: grid;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--radius-liten);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}
.velger-rad:hover { background: var(--flate-2); border-color: var(--linje); }
.velger-rad strong { font-size: 16px; }
.velger-rad .velger-meta { font-size: 13px; color: var(--dempet); }
.velger-rad .velger-slik { font-size: 14px; color: var(--dempet); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.velger-rad[aria-current="true"] { background: var(--hoved-svak); border-color: var(--hoved); }
.velger-fot { padding: 12px 20px 16px; border-top: 1px solid var(--linje); }
.velger-tom { padding: 20px 8px; color: var(--dempet); }

/* Datovelger */
.dato-kontroll { position: relative; }
.dato-felt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px; /* like høy som dato- og tidsfeltene ved siden av */
  padding: 8px 10px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  text-align: left;
  cursor: pointer;
}
.dato-felt svg { width: 20px; height: 20px; color: var(--dempet); flex: none; }
.dato-felt .kort { display: none; }
@media (max-width: 640px) {
  .dato-felt .lang { display: none; }
  .dato-felt .kort { display: inline; }
}
.dato-felt:hover svg { color: var(--tekst); }
.dato-felt[aria-expanded="true"] { border-color: var(--hoved); box-shadow: 0 0 0 1px var(--hoved); }
.dato-felt[aria-invalid="true"] { border-color: var(--fare); box-shadow: 0 0 0 1px var(--fare); }
.datovelger {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  /* Starter inne i lagrepanelet (sidemarg + panelmarg), og skal ikke gå utenfor skjermen. */
  width: min(360px, calc(100vw - 50px));
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}
.dv-hurtig { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-hode { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-hode strong { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 20px; }
.dv-hode .ikon-knapp { width: 42px; height: 42px; color: var(--tekst); border-color: var(--linje); }
.dv-hode .ikon-knapp svg { width: 20px; height: 20px; }
.dv-grid { display: grid; grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.dv-uke, .dv-ukedag { font-size: 12px; font-weight: 700; color: var(--dempet); align-self: center; padding-block: 4px; }
.dv-uke { font-weight: 400; font-variant-numeric: tabular-nums; }
.dv-dag {
  position: relative;
  height: 42px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-liten);
  background: none;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dv-dag:hover { background: var(--flate-2); border-color: var(--linje-sterk); }
.dv-dag.utenfor { color: var(--dempet); }
.dv-dag.idag { border-color: var(--linje-sterk); font-weight: 800; }
.dv-dag[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--flate); font-weight: 800; }
.dv-dag.har-okt::after, .dv-prikk {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aksent);
}
.dv-dag.har-okt::after { position: absolute; left: calc(50% - 2.5px); bottom: 5px; }
.dv-dag[aria-pressed="true"].har-okt::after { background: var(--flate); }
.dv-dag:focus-visible { outline: 3px solid var(--hoved); outline-offset: 1px; }
.dv-forklaring { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dempet); }
.dv-prikk { display: inline-block; flex: none; }

/* Innlogging (dialog) */
dialog#logginn {
  width: min(440px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  box-shadow: var(--skygge);
}
dialog#logginn::backdrop { background: rgba(8, 16, 22, .5); }
.logginn-ramme { display: grid; gap: 14px; padding: 22px 20px 20px; }
.logginn-ramme h2 { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; }
.logginn-ramme > p { color: var(--dempet); }
.logginn-ramme .feilmelding { color: var(--fare); }
.logginn-ramme input { font-size: 17px; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--tekst);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  font-weight: 700;
  font-size: 15px;
  z-index: 50;
}
.toast[data-type="feil"] { background: var(--fare); color: #FFFFFF; }

/* Smale skjermer */
@media (max-width: 560px) {
  /* Kompakt topp, så økta kommer tidlig på skjermen */
  .topp { padding-block: 12px 0; gap: 8px; }
  .topp-rad { gap: 2px 12px; }
  .merke { gap: 8px; }
  .merke-kjegle { width: 30px; height: 20px; }
  .merke-navn { font-size: 21px; }
  .merke-under { display: none; }
  .lagring { display: none; }
  .faner { gap: 0; }
  .fane-knapp { flex: 1 1 0; justify-content: center; padding: 10px 2px 9px; font-size: 14px; gap: 4px; }
  .faner .fane-knapp .lang { display: none; }
  .faner .fane-knapp .kort { display: inline; }
  main { padding-top: 16px; }
  .plan-hode h1, .side-hode h1 { font-size: 32px; }
  .tl-skala .mellom { display: none; }

  .oppsett, .lagre-panel, .pakkeliste { padding: 16px; }

  /* Aktivitetskort: tid og varighet i en stripe øverst, teksten får hele bredden */
  .blokk { grid-template-columns: minmax(0, 1fr); }
  .blokk-tid { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; padding: 8px 14px; text-align: left; }
  .blokk-tid .fra { font-size: 19px; }
  .blokk-tid .til { font-size: 15px; }
  .blokk-tid.med-kl .varighet { display: inline; margin-left: auto; }
  .blokk .min-merke { display: none; }
  .blokk-innhold { padding: 12px 14px 14px; }
  .blokk-hode { flex-direction: column; align-items: stretch; }
  .blokk-hode .stepper { align-self: flex-start; }
  .blokk-slik { font-size: 17px; }
  details.mer { font-size: 16px; }
  details.mer summary { padding-block: 11px; font-size: 15px; }
}

/* ---------- Banetegninger ---------- */
.ill-ramme { margin: 0; display: grid; gap: 8px; align-content: start; }
.ill { display: block; width: 100%; height: auto; max-width: 520px; }
.i-grunn { fill: var(--flate-2); stroke: var(--linje); }
.i-felt { fill: none; stroke: var(--linje-sterk); stroke-width: 1.2; stroke-dasharray: 5 4; }
.i-felt.i-runde, .i-sirkel.i-runde { fill: none; stroke: var(--aksent); stroke-width: 1.4; stroke-dasharray: 2 3; }
.i-strek { stroke: var(--dempet); stroke-width: 2; stroke-linecap: round; }
.i-bind { stroke: var(--dempet); stroke-width: 1.6; }
.i-kjegle { fill: var(--aksent); }
.i-hatt { fill: var(--oppv); }
.i-hatt-ned { fill: none; stroke: var(--oppv); stroke-width: 1.6; }
.i-sp { stroke: var(--flate); stroke-width: 1.5; }
.i-a { fill: var(--hoved); }
.i-b { fill: var(--avsl); }
.i-c { fill: var(--oppv); }
.i-d { fill: var(--lag4); }
.i-f { fill: var(--tekst); }
.i-n { fill: var(--linje-sterk); }
.i-t { fill: var(--flate); stroke: var(--tekst); stroke-width: 1.4; }
.i-sp-t { font: 700 7.5px var(--font-tekst); fill: var(--flate); text-anchor: middle; }
.i-sp-t.i-mork { fill: var(--tekst); }
.i-pil { fill: none; stroke: var(--tekst); stroke-width: 1.4; stroke-linecap: round; }
.i-pil.stiplet { stroke: var(--dempet); stroke-dasharray: 4 3; }
.i-pil.kast { stroke: var(--dempet); stroke-dasharray: 1 3; }
.i-pilhode { fill: var(--tekst); }
.i-hale { fill: none; stroke: var(--aksent); stroke-width: 2; stroke-linecap: round; }
.i-tau { fill: none; stroke: var(--oppv-tekst); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i-loype { fill: none; stroke: var(--linje); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.i-hekk { fill: none; stroke: var(--tekst); stroke-width: 1.7; stroke-linecap: round; }
.i-kloss { fill: var(--hoved-svak); stroke: var(--hoved); stroke-width: 1.2; }
.i-bom { fill: var(--oppv-svak); stroke: var(--oppv-tekst); stroke-width: 1.2; }
.i-ring { fill: none; stroke: var(--lag4); stroke-width: 1.8; }
.i-boette { fill: var(--linje-sterk); stroke: var(--dempet); stroke-width: 1; }
.i-terning { fill: var(--flate); stroke: var(--tekst); stroke-width: 1.2; }
.i-prikk { fill: var(--tekst); }
.i-ball { fill: var(--oppv); stroke: var(--oppv-tekst); stroke-width: .8; }
.i-femmer { fill: var(--oppv); stroke: var(--oppv-tekst); stroke-width: .8; stroke-linejoin: round; }
.i-tre { fill: var(--avsl-svak); stroke: var(--avsl); stroke-width: 1.4; }
.i-stamme { stroke: var(--dempet); stroke-width: 2; }
.i-bakke { fill: var(--linje); }
.i-sirkel { fill: none; stroke: var(--dempet); stroke-width: 1.4; stroke-dasharray: 3 3; }
.i-sirkel.i-hender { stroke: var(--dempet); stroke-dasharray: none; stroke-width: 1.4; }
.i-flaske { fill: var(--hoved-svak); stroke: var(--hoved); stroke-width: 1.2; }
.i-kort { fill: var(--flate); stroke: var(--tekst); stroke-width: 1.1; }
.i-post { fill: var(--oppv); stroke: var(--oppv-tekst); stroke-width: 1; }
.i-matte { fill: var(--hoved-svak); stroke: var(--hoved); stroke-width: 1.2; }
.i-trapp { fill: var(--linje); stroke: var(--linje-sterk); stroke-width: 1.2; }
.i-stav { stroke: var(--oppv-tekst); stroke-width: 2.6; stroke-linecap: round; }
.i-maalband { fill: none; stroke: var(--oppv-tekst); stroke-width: 1.4; }
.i-maal line { stroke: var(--dempet); stroke-width: 1; }
.ill text { font-family: var(--font-tekst); }
.i-tekst { font-size: 9px; fill: var(--dempet); text-anchor: middle; }
.i-lite { font-size: 7.5px; font-weight: 700; fill: var(--dempet); text-anchor: middle; }
.ill-forklaring {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--dempet);
}
.ill-forklaring li { display: inline-flex; align-items: center; gap: 5px; }
.ill-ikon { width: 20px; height: 16px; flex: none; }

/* ---------- Aktivitetsbanken: kort som åpner aktivitetssiden ---------- */
.akt-kort { position: relative; }
.akt-kort:hover { border-color: var(--linje-sterk); box-shadow: var(--skygge); }
.kort-lenke {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: var(--tekst);
}
.kort-lenke::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.kort-lenke:focus-visible::after { outline: 3px solid var(--hoved); outline-offset: 2px; }
.akt-kort:hover .kort-lenke { text-decoration: underline; text-underline-offset: 3px; }
.akt-kort .legg-til { position: relative; z-index: 1; }

/* ---------- Detaljsider (aktivitet og økt) ---------- */
.tilbake { margin-bottom: 14px; }
.tilbake .lenke-knapp { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 15px; }
.tilbake .lenke-knapp svg { width: 18px; height: 18px; }
.tilbake .lenke-knapp:hover { text-decoration: underline; }

.akt-side { display: grid; gap: 24px; }
.akt-side .plan-hode { gap: 10px; }
.akt-ingress { font-size: 19px; line-height: 1.45; max-width: 60ch; }
.akt-side-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .akt-side-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
}
.akt-side-venstre, .akt-side-hoyre {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.akt-side-hoyre .beskrivelse { gap: 20px; font-size: 16.5px; }
.akt-side-hoyre .beskrivelse ol, .akt-side-hoyre .beskrivelse ul { gap: 8px; }
.fakta { margin: 0; display: grid; gap: 10px; }
.fakta div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 15px; }
.fakta dt { font-weight: 700; color: var(--dempet); font-size: 14px; }
.fakta dd { margin: 0; }
.bla { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bla .knapp svg { width: 18px; height: 18px; }

.okt-handlinger { margin-top: 14px; }
.okt-handlinger + .slett-bekreft { margin-top: 12px; }
.okt-side-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
@media (min-width: 1000px) {
  .okt-side-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .okt-side-siden { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
}
.okt-side-hoved { display: grid; gap: 20px; min-width: 0; }
.okt-side-siden { display: grid; gap: 16px; }
.eval-felt {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  resize: vertical;
}
.min-merke {
  flex: none;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: var(--radius-liten);
  background: var(--flate-2);
  border: 1px solid var(--linje);
}
@media (max-width: 560px) {
  .fakta div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .akt-side-venstre, .akt-side-hoyre { padding: 16px; }
}

/* ---------- Ski ---------- */
.beskrivelse .paa-ski {
  background: var(--hoved-svak);
  color: var(--hoved-tekst);
  border-radius: var(--radius-liten);
  padding: 10px 12px;
}
.beskrivelse .paa-ski h4, .beskrivelse .paa-ski h2 { color: inherit; }
.beskrivelse .paa-ski p { color: var(--tekst); }
.i-flagg { fill: var(--aksent); }
.i-portal { fill: none; stroke: var(--tekst); stroke-width: 2; stroke-linejoin: round; }
.i-bjelle { fill: var(--oppv); stroke: var(--oppv-tekst); stroke-width: 1; }
.i-akebrett { fill: var(--lag4); opacity: .35; stroke: var(--lag4); stroke-width: 1.4; }
.i-ballong { fill: var(--aksent); stroke: var(--flate); stroke-width: 1; }
.i-hopp { fill: var(--flate); stroke: var(--tekst); stroke-width: 1.4; stroke-linejoin: round; }
.i-mal { fill: none; stroke: var(--tekst); stroke-width: 2.2; stroke-linejoin: round; }
.i-spor { fill: none; stroke: var(--linje-sterk); stroke-width: 1.6; }

/* ---------- Mobil: faner og øktside ---------- */
.fane-knapp .kort { display: none; }
.blokk-tid .varighet { display: none; font-stretch: 85%; font-size: 14px; font-weight: 700; opacity: .85; }
.okt-topp-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.okt-topp-knapper .knapp-primar { min-height: 48px; padding-inline: 20px; font-size: 17px; }
.okt-topp-knapper .knapp-primar svg { width: 18px; height: 18px; }
.okt-topp-knapper .hint { flex-basis: 100%; }
.deler-verktoy { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.deler-verktoy .lenke-knapp { min-height: 40px; }
.okt-admin .knapperad { gap: 8px; }
@media (max-width: 560px) {
  .okt-topp-knapper .knapp-primar { flex: 1 1 100%; }
}

/* ---------- Treningsmodus ---------- */
.blokk.naa { border-color: var(--aksent); box-shadow: 0 0 0 2px var(--aksent), var(--skygge); }
.blokk.naa .blokk-tid { background: var(--aksent); color: var(--aksent-tekst); }
.blokk.ferdig { opacity: .55; }
.blokk.ferdig:hover, .blokk.ferdig:focus-within { opacity: 1; }
.naa-merke {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aksent);
}
.tl-naa {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--tekst);
  box-shadow: 0 0 0 2px var(--flate);
  pointer-events: none;
}
.app.trening-aktiv { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }

.trening-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--tekst);
  color: var(--bg);
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px rgba(8, 16, 22, .25);
}
.tb-fremdrift { height: 5px; margin-inline: -8px; background: rgba(255, 255, 255, .15); }
.tb-fremdrift span { display: block; height: 100%; width: 0; background: var(--aksent); transition: width .9s linear; }
.tb-rad {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px 48px;
  align-items: center;
  gap: 4px;
  padding-block: 8px;
}
.tb-knapp {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: inherit;
  cursor: pointer;
}
.tb-knapp:hover { background: rgba(255, 255, 255, .18); }
.tb-knapp svg { width: 22px; height: 22px; }
.tb-stopp { background: none; }
.tb-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-liten);
}
.tb-naa { font-weight: 700; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tid { font-size: 14px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tb-tid strong {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-size: 17px;
  opacity: 1;
  color: var(--bg);
}
.trening-aktiv .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
.blokk.naa .blokk-tid::after {
  content: "Nå";
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .blokk.naa .blokk-tid::after { margin: 0 0 0 8px; }
  .blokk.naa .blokk-tid:not(.med-kl)::after { margin-left: auto; }
}
@media (max-width: 560px) {
  /* Kategoriene i aktivitetsbanken på én rad som kan sveipes */
  #bank-kat {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -16px;
    padding-inline: 16px;
    scrollbar-width: none;
  }
  #bank-kat::-webkit-scrollbar { display: none; }
  #bank-kat .brikke { flex: none; }
  .bank-filter { gap: 12px; }
}

/* Tittel med blyant for redigering */
.tittel-rad { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tittel-rad h1 { min-width: 0; overflow-wrap: anywhere; }
.tittel-knapper { display: flex; gap: 8px; flex: none; }
.tittel-knapp {
  width: 44px;
  height: 44px;
  border-color: var(--linje-sterk);
  background: var(--flate);
  color: var(--tekst);
  margin-top: 2px;
}
.tittel-knapp svg { width: 20px; height: 20px; }
.tittel-knapp-tekst { display: none; }
/* På store skjermer er det plass til teksten ved siden av ikonet. */
@media (min-width: 700px) {
  .tittel-knapp { width: auto; display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px 16px; font-weight: 700; font-size: 15px; }
  .tittel-knapp-tekst { display: inline; }
}
@media (max-width: 560px) {
  .side-hode { margin-bottom: 14px; gap: 4px; }
  .filter { margin-bottom: 16px; }
  .okt-topp-knapper { margin-top: 12px; }
}