/* =========================================================
   Hjernet – designlag (indlæses SIDST på alle sider)
   Ét sted bestemmer afstande, kort, kanter og typografi.
   Afstandsskala: 4 · 8 · 12 · 16 · 24 · 32 · 48 px
   ========================================================= */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --line: #C3CDDA; --radius: 14px; --muted: var(--ink);
  --card-shadow: 0 1px 2px rgba(16, 40, 80, .06), 0 4px 14px rgba(16, 40, 80, .06);
}
html[data-theme="dark"] { --line: #3A4D68; --muted: var(--ink); --card-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .3); }

/* ---------- Læsbarhed: ingen kursiv, ingen grå eller falmet tekst ---------- */
*, *::before, *::after, ::placeholder { font-style: normal !important; }
.muted, .hint, small, .small, figcaption, .lead, .tile span, .mission small, .mode small, .preset small, .pal small, .res small, .crumbs, .crumbs a { opacity: 1 !important; }
.muted, .hint, small, .small, figcaption { color: var(--ink) !important; }
.goal p, .goal-list span, .goal small, .night span, .night small { opacity: 1 !important; color: #FFFFFF !important; }
::placeholder { color: #5D6B80 !important; opacity: 1 !important; }
html[data-theme="dark"] ::placeholder { color: #B6C3D6 !important; }

/* ---------- Sidens rytme ---------- */
main { padding: var(--s6) clamp(16px, 4vw, 40px) var(--s7) !important; }
main > *:not(:last-child):not(.crumbs):not(h1) { margin-bottom: var(--s5); }
main h1 { margin: 0 0 var(--s3) !important; line-height: 1.15; }
main h2 { margin: 0 0 var(--s3); line-height: 1.25; }
main section > h2 { margin-top: 0; }
main .lead { margin: 0 0 var(--s5) !important; max-width: 65ch; }
.crumbs { margin: 0 0 var(--s4) !important; }
main p { margin-top: 0; }
.row { gap: var(--s3); }

/* ---------- Kort: altid kant + luft indeni ---------- */
.box, .card, .tile, .method, .kidgame, .sact, .mission, .class-card, .learn-card, .mine, .game, .fact, .flow-row, .shape,
.pal, .preset, .mode, .stat-cards > div, .lib-card, .coll-btn, .txt-row, .login-box, .quickstart, .learn-today, .mig-head, .next-step, .tool-intro, .announce, .explain, .res-tip, .img-card {
  border: 1.5px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--card-shadow) !important;
}
.box, .learn-today, .login-box, .quickstart, .mig-head, .homework { padding: var(--s5) !important; }
.tile, .method, .kidgame, .sact, .mission, .learn-card, .mine, .game, .class-card, .fact, .pal, .preset, .mode, .stat-cards > div, .flow-row, .shape, .txt-row { padding: var(--s4) !important; }
.tool-intro, .next-step, .announce, .explain, .res-tip { padding: var(--s3) var(--s4) !important; }
.box > :last-child, .tile > :last-child, .method > :last-child, .learn-card > :last-child, .mine > :last-child, .fact > :last-child { margin-bottom: 0 !important; }
.box p:last-child { margin-bottom: 0; }
.box + .box, section + section { margin-top: var(--s5); }
.learn-today, .tool-intro, .next-step, .quickstart { border-color: var(--blue-line) !important; }
.learn-today.done { border-color: var(--mint-dark) !important; }
.next-step { margin-top: var(--s6) !important; }
.tool-intro { margin: 0 0 var(--s5) !important; box-shadow: none !important; }

/* Ting, der ikke er kort, får ingen kant (det lignede fejl) */
.gintro, .flow-form.box > .flow-row:only-child { box-shadow: none !important; }
.gintro { border: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; }
.res-extra { margin: var(--s4) 0 !important; }

/* ---------- Gitre: ens luft ---------- */
.tiles, .methods, .missions, .learn-grid, .mine-grid, .land-cards, .profile-grid, .class-cards, .stat-cards, .img-grid, .shapes, .sactions, .kidgames, .games, .facts { gap: var(--s4) !important; }
.tiles { margin: 0 !important; }
.learn-grid, .mine-grid { margin-top: var(--s3); }

/* ---------- Ingen pill-badges ---------- */
.badge, #dueBadge { display: none !important; }
.tag, .lc-tech, .status-pill, .ob-tag, .rb-tag { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline !important; }
.tag { color: var(--navy) !important; font-weight: 700; font-size: inherit !important; }
.lc-tech { color: var(--blue) !important; font-weight: 700; font-size: .88rem !important; margin-top: auto; padding-top: var(--s2) !important; display: block !important; }
html[data-theme="dark"] .lc-tech { color: #8DBDF8 !important; }
.status-pill { font-weight: 700; font-size: .9rem !important; color: var(--ink) !important; }
.status-pill.custom { color: var(--mint-dark) !important; } .status-pill.pending { color: #8A5A00 !important; }
html[data-theme="dark"] .status-pill.pending { color: #F5CD6B !important; }
/* Nummererede trin: almindelige tal i stedet for runde mærker */
.gintro-steps li::before, .m-steps li::before { background: none !important; border: 0 !important; width: auto !important; height: auto !important; color: var(--blue) !important; font-weight: 800 !important; content: counter(gs) "." !important; }
.m-steps li::before { content: counter(ms) "." !important; }
.gintro-steps li, .m-steps li { gap: var(--s2) !important; }
.chip { border-radius: 10px !important; }

/* ---------- Centreret indhold (tomme sider, færdig-skærme) ---------- */
.center { max-width: 640px; margin: var(--s6) auto !important; text-align: center; }
.center .row { justify-content: center; }
.center .lead { margin-left: auto !important; margin-right: auto !important; }

/* ---------- Formularer ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], textarea, select { border-width: 1.5px !important; border-color: #8C9AAE !important; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] textarea, html[data-theme="dark"] select { border-color: #7486A2 !important; }
.flow-form { gap: var(--s4) !important; }
.flow-row { box-shadow: none !important; }

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  main { padding-top: var(--s5) !important; }
  .box, .learn-today, .login-box, .quickstart, .mig-head, .homework { padding: var(--s4) !important; }
  main > *:not(:last-child):not(.crumbs):not(h1) { margin-bottom: var(--s4); }
  .learn-today { flex-direction: column; align-items: stretch; } .learn-today .btn { width: 100%; justify-content: center; }
  .next-step .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Paneler (admin og lærer): tabeller ruller i deres egen ramme ---------- */
.panel-main, #tabBody, .cms, .cms-main, .cms > *, .profile-grid > *, .txt-row > * { min-width: 0; }
.tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.txt-row textarea { min-width: 0 !important; width: 100%; }
.panel-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: thin; }
.panel-tabs button { white-space: nowrap; flex: none; }
@media (max-width: 600px) { .panel-form label, .panel-form input, .panel-form select { min-width: 0 !important; width: 100%; } .panel-form { flex-direction: column; align-items: stretch; } }
.tbl-wrap, .panel-tabs, .cms-main { position: relative; }   /* skjult skærmlæser-tekst må ikke gøre siden bredere */

/* Lær: alle 5 valg på én række, når der er plads */
.learn-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)) !important; }
/* Spillenes startskærm: titlen står allerede i rammen – ingen dobbelt titel, ingen tom luft */
.gintro-head .gintro-e, .gintro-head h2 { display: none !important; }
.gintro-head { margin-bottom: var(--s3) !important; }
.gintro-facts { margin: 0 !important; font-weight: 700; }
.gintro h3 { margin: 0 0 var(--s2) !important; }
.gamepanel:has(.gintro), .ov-in:has(.gintro) { min-height: 0 !important; }

/* ---------- Huskepakker ---------- */
.pack-card h3 { margin: var(--s2) 0 var(--s1); font-size: 1.15rem; color: var(--navy); }
.pack-sub { font-weight: 700; font-size: .9rem; margin: 0 0 var(--s2) !important; color: var(--blue) !important; }
html[data-theme="dark"] .pack-sub { color: #8DBDF8 !important; }
.pack-card .row { margin-top: var(--s3); }
main section + section { margin-top: var(--s6); }

/* ---------- Printbare huskekort ---------- */
#printArea { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block !important; color: #000; font: 12pt Verdana, Arial, sans-serif; }
  #printArea h1 { font-size: 18pt; margin: 0 0 4pt; } #printArea > p { margin: 0 0 10pt; }
  .print-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .print-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px dashed #000; break-inside: avoid; min-height: 26mm; }
  .print-card .pq { padding: 6pt; font-weight: 700; border-right: 1px dashed #000; }
  .print-card .pa { padding: 6pt; } .print-card .pa small { display: block; font-size: 9pt; margin-top: 3pt; }
}
@media print { body.printing, body.printing #printArea { background: #fff !important; } body.printing::before { display: none !important; } }