/* Fra nervecelle til hjerne. Kun det, der ikke hører til på resten af sitet:
 * tegningernes farver, signalet og modellen.
 *
 * Farverne på lapperne er identitet og ikke information. Navnet står altid
 * skrevet, og lapperne skilles også ad af deres grænser og af lysstyrke, så
 * en farveblind elev kan se, hvor én holder op og den næste begynder. Ingen
 * af dem er rød mod grøn.
 */

:root {
  --nc-celle: #f4ddd3;
  --nc-kant: #8b4f43;
  --nc-kerne: #cf968a;
  --nc-kernelegeme: #8b4f43;
  --nc-myelin: #f7efcf;
  --nc-myelin-kant: #a38c3f;
  --nc-celle2: #dbe5f2;
  --nc-kant2: #4b6790;
  --nc-kerne2: #9db1cf;
  --nc-signal: #3c3a7d;
  --nc-signal-glod: rgba(60, 58, 125, .22);

  --hj-pande: #ecdcc6;
  --hj-isse: #d5e1ed;
  --hj-tinding: #e5d8ea;
  --hj-nakke: #dbe7d5;
  --hj-lille: #e9e1cf;
  --hj-folie: #b3a483;
  --hj-stamme: #e7d1c6;
  --hj-kant: #5f5045;
  --hj-fure: rgba(95, 80, 69, .38);
  --hj-graense: #5f5045;
  --hj-kortex: #dcd5cb;
  --hj-indre: #ece7df;
  --hj-bjaelke: #fbf7ef;
  --hj-thalamus: #cdbbe0;
  --hj-hypo: #edc1ad;
  --hj-hippo: rgba(120, 160, 200, .6);
  --hj-amygdala: rgba(214, 120, 104, .62);
  --hj-valgt: #514fa3;
  --hj-svaev: #b9b6e6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nc-celle: #4a342f;
    --nc-kant: #e2a99b;
    --nc-kerne: #7d5048;
    --nc-kernelegeme: #f0c8be;
    --nc-myelin: #4b4430;
    --nc-myelin-kant: #d6c27d;
    --nc-celle2: #2c3a50;
    --nc-kant2: #a7bde0;
    --nc-kerne2: #4a6188;
    --nc-signal: #c9c6ff;
    --nc-signal-glod: rgba(201, 198, 255, .28);

    --hj-pande: #4b3f31;
    --hj-isse: #2f3e4d;
    --hj-tinding: #40344a;
    --hj-nakke: #33422f;
    --hj-lille: #453e2f;
    --hj-folie: #9c8d6c;
    --hj-stamme: #4b3731;
    --hj-kant: #d9cbbd;
    --hj-fure: rgba(217, 203, 189, .32);
    --hj-graense: #d9cbbd;
    --hj-kortex: #3a3632;
    --hj-indre: #2a2724;
    --hj-bjaelke: #5a554d;
    --hj-thalamus: #4d3f63;
    --hj-hypo: #6a4434;
    --hj-hippo: rgba(110, 160, 210, .55);
    --hj-amygdala: rgba(220, 120, 104, .55);
    --hj-valgt: #a6a2ee;
    --hj-svaev: #4d4a86;
  }
}

/* ── Tegningerne ──────────────────────────────────────────────────────────── */

.figur { display: block; width: 100%; height: auto; overflow: visible; }

/* Nervecellen */
.nc-gren, .nc-gren2, .nc-akson, .nc-gren-kant, .nc-gren2-kant, .nc-akson-kant {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nc-gren { stroke: var(--nc-celle); }
.nc-gren-kant, .nc-akson-kant { stroke: var(--nc-kant); }
.nc-akson { stroke: var(--nc-celle); }
.nc-krop { fill: var(--nc-celle); stroke: var(--nc-kant); stroke-width: 1.5; }
.nc-kerne { fill: var(--nc-kerne); stroke: var(--nc-kant); stroke-width: 1.2; }
.nc-kernelegeme { fill: var(--nc-kernelegeme); }
.nc-myelin rect { fill: var(--nc-myelin); stroke: var(--nc-myelin-kant); stroke-width: 1.5; transition: opacity .4s var(--ease); }
.nc-endeknapper ellipse { fill: var(--nc-celle); stroke: var(--nc-kant); stroke-width: 1.5; }
.nc-blaerer circle { fill: var(--nc-kant); }
.nc-gren2 { stroke: var(--nc-celle2); }
.nc-gren2-kant { stroke: var(--nc-kant2); }
.nc-krop2 { fill: var(--nc-celle2); stroke: var(--nc-kant2); stroke-width: 1.5; }
.nc-kerne2 { fill: var(--nc-kerne2); stroke: var(--nc-kant2); stroke-width: 1.2; }
.nc-receptorer rect { fill: var(--nc-kant2); }
.nc-vej { fill: none; stroke: none; }
.nc-signal circle { fill: var(--nc-signal); stroke: var(--nc-signal-glod); stroke-width: 14; opacity: 0; }
.nc-signal.er-synlig circle { opacity: 1; }
.nc-stof circle { fill: var(--nc-signal); }

/* Hjernen */
.hj-flade { stroke: var(--hj-kant); stroke-width: 1.5; }
.hj-pande { fill: var(--hj-pande); }
.hj-isse { fill: var(--hj-isse); }
.hj-tinding { fill: var(--hj-tinding); }
.hj-nakke { fill: var(--hj-nakke); }
.hj-lille { fill: var(--hj-lille); }
.hj-stamme { fill: var(--hj-stamme); }
.hj-kortex { fill: var(--hj-kortex); }
.hj-indre { fill: var(--hj-indre); stroke: none; }
.hj-bjaelke { fill: var(--hj-bjaelke); }
.hj-thalamus { fill: var(--hj-thalamus); }
.hj-hypo { fill: var(--hj-hypo); }
.hj-hypofyse { fill: var(--hj-hypo); stroke: var(--hj-kant); stroke-width: 1.2; }
.hj-hippo { fill: var(--hj-hippo); }
.hj-amygdala { fill: var(--hj-amygdala); }
.hj-flade.er-gennemsigtig { stroke-dasharray: 5 4; }

/* Inde i lapperne er grænserne tegnet ovenpå; fladernes egen kant ville give
 * dobbeltstreger. */
.hj-lapper > .hj-flade { stroke: none; }
.hj-furer path, .hj-folier path, .hj-trae path { fill: none; stroke: var(--hj-fure); stroke-width: 2; stroke-linecap: round; }
.hj-folier path { stroke: var(--hj-folie); stroke-width: 2.2; }
.hj-trae path { stroke: var(--hj-folie); stroke-width: 3.5; }
.hj-graenser path { fill: none; stroke: var(--hj-graense); stroke-width: 2.6; stroke-linecap: round; }
.hj-omrids { fill: none; stroke: var(--hj-kant); stroke-width: 2.4; }

/* ── Signalet ─────────────────────────────────────────────────────────────── */

.signal-panel {
  margin-top: 8px;
  padding: clamp(14px, 2vw, 20px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.signal-styring { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.signal-valg { display: flex; gap: 6px; }
.signal-knap[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.signal-status { margin-top: 12px; min-height: 1.5em; font-weight: 600; }
.signal-tid { color: var(--ink-soft); font-size: var(--step--1); max-width: 62ch; }

.nc-krop.er-aktiv, .er-aktiv > .nc-krop2 { stroke: var(--nc-signal); stroke-width: 5; }
.nc-endeknapper.er-aktiv ellipse { stroke: var(--nc-signal); stroke-width: 4; }
.nc-myelin.er-vaek rect { opacity: .1; }

/* ── Modellen ─────────────────────────────────────────────────────────────── */

.model {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "figur styring"
    "figur regne"
    "figur besked"
    "figur opgaver"
    "hebb hebb"
    "forfra forfra";
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 12px clamp(20px, 3vw, 36px);
  align-items: start;
}

.model-figur { grid-area: figur; }
.model-styring { grid-area: styring; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.model-regnestykke { grid-area: regne; font-weight: 600; font-variant-numeric: tabular-nums; }
.model-besked { grid-area: besked; color: var(--ink-soft); min-height: 3em; }
.model-opgaver { grid-area: opgaver; }
.model-hebb { grid-area: hebb; }
.model > .btn.small { grid-area: forfra; justify-self: start; }

@media (max-width: 820px) {
  .model {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "figur" "styring" "regne" "besked" "opgaver" "hebb" "forfra";
    grid-template-rows: none;
  }
}

.model-vaelgere { display: flex; gap: 8px; }

.model-vaelger {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 14px;
}

.model-vaelger-navn { color: var(--ink); }
.model-vaelger-under { font-size: 12px; font-weight: 400; }
.model-vaelger[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.model-vaelger[aria-pressed="true"] .model-vaelger-navn { color: var(--on-accent); }

.model-opgaver { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.model-opgaver li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: start; color: var(--ink-soft); }
.model-opgaver li.er-klaret { color: var(--ink); font-weight: 600; }

.model-opgave-maerke {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 3px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.er-klaret .model-opgave-maerke { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.model-hebb {
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-control);
  max-width: 70ch;
}

.model-hebb[hidden] { display: none; }

.model-akson { stroke: var(--nc-kant); stroke-linecap: round; transition: stroke-width .5s var(--ease); }
.model-akson.er-haemmende { stroke: var(--nc-kant2); stroke-dasharray: 12 8; }
.model-knop { fill: var(--nc-celle); stroke: var(--nc-kant); stroke-width: 2; }
.model-knop.er-haemmende { fill: var(--nc-celle2); stroke: var(--nc-kant2); }
.model-tal { font: 650 20px var(--font); fill: var(--ink-soft); }
.model-celle circle, .model-celle rect { fill: var(--nc-celle); stroke: var(--nc-kant); stroke-width: 2.5; transition: fill .2s var(--ease); }
.model-celle.er-haemmende rect { fill: var(--nc-celle2); stroke: var(--nc-kant2); }
.model-celle text { font: 650 24px var(--font); fill: var(--ink); }
.model-celle.er-valgt circle, .model-celle.er-valgt rect { stroke-width: 6; }
.model-celle.er-aktiv circle, .model-celle.er-aktiv rect { fill: var(--nc-signal); }
.model-celle.er-aktiv text { fill: var(--paper); }
.model-celle.er-m circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.model-celle.er-m.er-aktiv circle { fill: var(--nc-signal); stroke: var(--nc-signal-glod); stroke-width: 18; }
.model-celle.er-m.er-stille circle { stroke-dasharray: 7 6; }
.model-taerskel { font: 500 16px var(--font); fill: var(--ink-faint); }
.model-puls { fill: var(--nc-signal); }
.model-puls.er-haemmende { fill: var(--nc-kant2); }

/* ── Patienterne ──────────────────────────────────────────────────────────── */

.skade-faner { display: flex; flex-wrap: wrap; gap: 6px; }
.skade-fane[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.skade-fane.er-loest:not([aria-pressed="true"]) { border-style: solid; color: var(--ink); }

.skade-kort {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rail-hjernen);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  max-width: 64ch;
}

.skade-kort h3 { font-size: var(--step-1); }
.skade-kort h3:focus { outline: none; }
.skade-tekst { margin-top: 6px; }

.skade-figurer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  max-width: 54rem;
  margin-top: 14px;
}
.skade-figur { margin: 0; }
.skade-figur figcaption { margin-top: 2px; text-align: center; color: var(--ink-faint); font-size: 13px; }

@media (max-width: 620px) {
  .skade-figurer { grid-template-columns: minmax(0, 1fr); }
}

.skade-valg { margin-top: 10px; font-weight: 600; }
.skade-status { min-height: 1.5em; margin-top: 8px; max-width: 64ch; color: var(--ink-soft); }

/* Det valgte sted er markant mørkere end resten — det kan ses uden at
 * skelne farverne — og navnet står under tegningerne. */
.er-klikbar .hj-flade { cursor: pointer; outline: none; transition: fill .15s var(--ease); }
.skade-figurer:not(.er-laast) .er-klikbar .hj-flade:hover,
.er-klikbar .hj-flade:focus-visible { fill: var(--hj-svaev); }
.figur .hj-flade.er-valgt,
.skade-figurer:not(.er-laast) .er-klikbar .hj-flade.er-valgt:hover { fill: var(--hj-valgt); }
.er-laast .hj-flade { cursor: default; }