/*
 * Naturfag v3 — læringsrejse og laboratorieskal.
 * Ejes af DeepSeek. Denne fil tilføjer den nye informationsarkitektur
 * oven på naturfag.css uden at røre den: fem elevnære indgange, en kompakt
 * navigator, fremgang pr. læringsområde og en ensartet Gæt→Prøv→Se→Forklar.
 */

/* ── Kompakt navigator ─────────────────────────────────────────────── */
.journey-nav{
  position:sticky;top:70px;z-index:90;
  width:min(1160px,calc(100% - 32px));margin:0 auto 20px;padding:6px;
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 30px rgba(31,56,100,.08);backdrop-filter:blur(12px);
}
.journey-nav button{
  border:0;background:transparent;color:#5e6e84;border-radius:9px;
  min-height:44px;padding:8px 12px;font-size:.875rem;font-weight:800;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.journey-nav button span{font-size:.95rem;line-height:1}
.journey-nav button:hover{background:rgba(31,56,100,.07);color:var(--navy)}
.journey-nav button[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(31,56,100,.23)}
.journey-nav #tab-overblik{border:1px dashed #c3d0e0;background:#f4f7fb;color:#4a5c74}
.journey-nav #tab-overblik[aria-selected="true"]{background:var(--navy);border-style:solid;color:#fff}

/* ── Fremgang pr. læringsområde ────────────────────────────────────── */
.area-progress{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.area-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#f6f9fc;font-size:.875rem;color:#5a6a80;font-weight:700}
.area-chip.done{background:#e8f7f2;border-color:#9bd4cf;color:#08715f}
.area-chip-mark{font-weight:900;font-size:.8rem;line-height:1}

/* ── Fem indgange (arbejdsstedet) ──────────────────────────────────── */
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.journey-card{
  position:relative;text-align:left;min-height:252px;padding:18px;
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:17px;
  background:#f9fbfe;color:var(--ink);overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.journey-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--blue)}
.journey-card.systems:before{background:linear-gradient(90deg,#0d6e6e,#4dc9d6,#7030a0)}
.journey-card.sense:before{background:var(--purple)}
.journey-card.wave:before{background:#0d8ca0}
.journey-card.chemistry:before{background:#d08018}
.journey-card.body:before{background:#1e8a64}
.journey-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(31,56,100,.12);border-color:#b8c8dc}
.journey-number{font-size:.75rem;font-weight:900;color:#8290a5;letter-spacing:.12em}
.journey-icon{font-size:1.9rem;line-height:1;margin:18px 0 10px}
.journey-card strong{font-size:1.1rem;line-height:1.25;margin-bottom:6px}
.journey-what{color:var(--muted);font-size:1rem;line-height:1.55;flex:1}
.journey-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.journey-meta span{font-size:.8rem;font-weight:800;color:#4a5c74;background:#e9eef6;border-radius:999px;padding:4px 9px}
.journey-card b{font-size:.9rem;color:var(--blue);margin-top:auto;padding-top:16px}

/* ── Ensartet læringsrytme ─────────────────────────────────────────── */
.journey-method{
  margin-top:18px;padding:22px;background:linear-gradient(120deg,#172f57,#223f70);
  border-radius:17px;color:#fff;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px 26px;align-items:center;
}
.journey-method .eyebrow{color:#82e0e0}
.journey-method h3{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;margin:0 0 8px}
.journey-method-note{margin:0;color:#c3d1e4;font-size:1rem;line-height:1.5}
.journey-rhythm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.journey-rhythm li{display:flex;flex-direction:column;gap:2px;padding:9px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:9px}
.journey-rhythm b{font-size:.9rem}
.journey-rhythm small{font-size:.8rem;color:#c3d1e4;line-height:1.4}

/* ── Undernavigation i "Sanser og signaler" ────────────────────────── */
.sanser-subnav{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 16px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.sanser-subnav button{min-height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#596981;padding:8px 16px;font-size:.875rem;font-weight:800;white-space:nowrap}
.sanser-subnav button:hover{border-color:var(--teal);color:var(--teal)}
.sanser-subnav button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

.panel-back{margin:0 0 14px}
.panel-back button{min-height:44px;border:0;background:transparent;color:var(--teal);font-size:.875rem;font-weight:800;padding:0 6px;cursor:pointer}
.panel-back button:hover{text-decoration:underline}

/* ── Hero gøres kompakt, så de fem indgange står i første viewport ──── */
.lab-intro{min-height:320px;padding-top:42px;padding-bottom:42px}
.lab-intro h1{font-size:clamp(2.3rem,4.5vw,3.9rem);margin-bottom:16px}
.lab-intro-visual{height:240px}

/* ── Responsivt ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-method{grid-template-columns:1fr}
}
@media(max-width:620px){
  .journey-nav{top:62px;width:min(100% - 18px,1160px);justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .journey-nav button{min-height:44px}
  .lab-intro{min-height:340px}
  .lab-intro h1{font-size:2.4rem}
  .journey-grid{grid-template-columns:1fr}
  .journey-card{min-height:0}
  .journey-rhythm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-progress{grid-template-columns:1fr auto;align-items:start}
  .journey-progress .progress-lead{grid-column:1;grid-row:1}
  .journey-progress .area-progress{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .journey-progress #resetProgress{grid-column:2;grid-row:1}
}

/* ── Codex-krydsreview: læsbar betjening og reelle trykflader ───────── */
/* Arbejdsteksterne skal kunne læses uden at eleven zoomer ind. De små
   versaler forbliver metadata; forklaringer og kontroller er mindst 14 px. */
.development-notice>p:last-of-type,
.panel-heading>p,
.experiment-notes>p,
.systems-theory>p,
.topic-section>p,
.education-paths>div>p:last-child,
.education-paths article p,
.curriculum-note p,
.chemistry-safety p{font-size:1rem;line-height:1.55}

.site-header nav>a,.motion-control,
.progress-strip strong,.progress-strip button,
.education-paths article strong,.education-paths article a,
.curriculum-note strong,.curriculum-note a,.chemistry-safety a,
.range-control,.controls-card label,.controls-card select,.sound-button,
.sense-picker button,.synapse-buttons button,.switch-row strong,
.chemistry-toolbar>label,.chemistry-toolbar button,.builder-heading>button,
.builder-actions button,.element-inspector p,.inspector-facts b,.inspector-facts span,
.molecule-result strong,.molecule-result p,
.prediction-box legend,.prediction-box button,.prediction-feedback,
.system-objective,.system-controls-help,.system-control label,.system-control small,
.system-guided-experiments>strong,.system-guided-experiments>p,
.system-preset b,.system-preset small,.systems-explain>div>p:not(.system-kicker),
.explain-entry label,.explain-entry textarea,.explain-entry button,.explain-entry p,
.systems-concepts button,.systems-evidence ol,.systems-theory>ol strong,
.systems-theory>ol p,.system-knowledge-check h4,.system-knowledge-check legend,
.system-knowledge-check label,.system-knowledge-check button,.system-knowledge-check p,
.source-line{font-size:.875rem}

.development-notice-actions button,.development-notice-actions a,
.progress-strip button,.prediction-box button,.synapse-buttons button,
.sound-button,.explain-entry button,.system-knowledge-check button,
.systems-concepts button,.system-playback button,.chemistry-toolbar button,
.builder-heading>button,.builder-actions button{min-height:44px}

.atom-chip{width:44px;height:44px}

.switch{width:52px;height:44px}
.switch span{inset:8px 0}
.switch span:after{width:22px;height:22px;top:3px;left:3px}
.switch input:checked+span:after{transform:translateX(24px)}

@media(max-width:620px){
  .journey-card{padding:17px}
  .journey-meta{gap:5px}
  .journey-method{padding:18px}
  .systems-picker,.sense-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0}
  .systems-picker button,.sense-picker button{min-width:0;white-space:normal}
  .periodic-table{min-width:860px}
}