/* Fælles typografi målt på Cellebiologi, september 2026.
   Indlæses efter modulernes CSS. Navigation og kompakte spilkontroller
   beholder deres rollebestemte størrelser. */
:root {
  --font-body: Inter, Manrope, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-body);
  --site-body-size: 17px;
  --site-h1-size: 46px;
  --site-h2-size: 28px;
  --site-h3-size: 22px;
}
body { font-family: var(--font-body); }
button, input, select, textarea { font-family: var(--font-body); }
body #main-content :is(h1,h2,h3,h4,p,li,dt,dd,summary) {
  font-family: var(--font-body);
}
body #main-content :is(p,li,dt,dd):not(:where(nav *, aside nav *, .biology-menu-section *, [data-protein-game] *, .protein-synthesis-game *, .figure-caption *, .teacher-note *, .eyebrow, .figure-source, .figure-description)) {
  font-size: var(--site-body-size);
  line-height: 1.7;
}
body #main-content h1 { font-size:var(--site-h1-size); line-height:1.1; font-weight:700; letter-spacing:0; }
body #main-content h2 { font-size:var(--site-h2-size); line-height:1.25; font-weight:650; letter-spacing:0; }
body #main-content h3 { font-size:var(--site-h3-size); line-height:1.3; font-weight:650; letter-spacing:0; }
body #main-content h4 { font-size:18px; line-height:1.4; font-weight:650; letter-spacing:0; }
body #main-content :is(.accordion-title, .biology-depth-disclosure > summary) { font-size:19px; line-height:1.35; font-weight:650; }
body #main-content :is(.figure-caption-title, .figure-title) { font-family:var(--font-body); font-size:16px; line-height:1.45; font-weight:700; }
body #main-content :is(.figure-caption-text, .figure-description, .biology-figure-explanation p) { font-size:15px; line-height:1.65; }
body #main-content :is(.figure-caption-source, .figure-source) { font-size:13px; line-height:1.55; }
body #main-content :is(.cell-research-sources, .cell-practical) :is(p,li) { font-size:15px; line-height:1.65; }
body #main-content .cell-research-sources h3 { font-size:17px; }
/* Samme afsnitsrytme som Cellebiologi på alle biologiske artikler. */
body[data-current-page="biologi"] #main-content .article-page h2 { margin:0 0 16px; }
body[data-current-page="biologi"] #main-content .article-page h3 { margin:0 0 12px; }
body[data-current-page="biologi"] #main-content .article-page h4 { margin:0 0 10px; }
body[data-current-page="biologi"] #main-content .article-page p:not(:where(.figure-caption *, .teacher-note *, .article-header *, .cell-research-sources *, .cell-practical *)) { margin:0 0 16px; }
body[data-current-page="biologi"] #main-content .article-content > :is(h2,h3,h4):not(:first-child) { margin-top:28px; }
body[data-current-page="biologi"] #main-content .article-page .article-section { margin-block:28px; }
@media (max-width:1180px) { :root { --site-h1-size:40px; } }
@media (max-width:600px) {
  :root { --site-h1-size:29px; --site-h2-size:24px; --site-h3-size:20px; }
  body #main-content h1 { line-height:1.12; }
  body #main-content .article-subtitle { font-size:16px; line-height:1.5; }
}
/* Tall Mendel teaching figure: retain readable width in the expanded view. */
.figure-dialog-panel:has(img[src*="mendel-tre-generationer-v2"]) { display: block; overflow-y: auto; }
.figure-dialog-media:has(img[src*="mendel-tre-generationer-v2"]) { overflow: visible; }
.figure-dialog-media img[src*="mendel-tre-generationer-v2"] { position: static; display: block; width: 100%; max-width: 1024px; height: auto; max-height: none; margin: 0 auto; padding: 24px; }
.figure-dialog-panel:has(img[src*="mendel-tre-generationer-v2"]) .figure-dialog-caption { max-height: none; overflow: visible; }
/* Editable Punnett board: parent colours follow the two axes. */
.inheritance-lab { background:#fff; border-radius:18px; padding:clamp(12px,3vw,30px); }
.inheritance-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-bottom:1px solid #dde5e0; padding-bottom:20px; }
.inheritance-toolbar label { display:flex; align-items:center; gap:12px; font-weight:600; }
.inheritance-toolbar>span { color:#607169; font-size:14px; }
.inheritance-board { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; margin:28px 0; align-items:center; }
.inheritance-parent { display:grid; gap:9px; font-size:14px; font-weight:650; padding:16px; border-radius:12px; }
.inheritance-parent-top { grid-column:2; background:#fbefc8; }
.inheritance-parent-side { grid-column:1; background:#dcebd3; }
.inheritance-parent input { width:100%; box-sizing:border-box; font-size:28px; font-weight:650; letter-spacing:2px; text-align:center; }
.inheritance-parent small { font-size:12px; font-weight:400; }
.inheritance-board [data-inheritance-grid] { grid-column:2; min-width:0; }
.inheritance-scroll { margin:0; }
.inheritance-scroll table { table-layout:fixed; }
.inheritance-scroll th,.inheritance-scroll td { padding:clamp(5px,1.2vw,14px) 3px; border:2px solid white; font-size:clamp(16px,2vw,27px); }
.inheritance-scroll thead th { background:#f3d783; color:#513f10; }
.inheritance-scroll tbody th { background:#b9d6a6; color:#294820; }
.inheritance-scroll tbody td { background:#e2ecf9; color:#233f61; }
.inheritance-scroll small { font-size:11px; line-height:1.6; color:inherit; opacity:.8; }
.inheritance-scroll .inheritance-corner { background:white; font-size:15px; }
.inheritance-summary { display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid #dde5e0; padding-top:20px; }
.inheritance-result { display:grid; grid-template-columns:1fr auto; gap:5px; margin:12px 0; font-size:15px; }
.inheritance-result meter { grid-column:1/-1; width:100%; height:9px; accent-color:#537968; }
.inheritance-lab .inheritance-help,.inheritance-lab .inheritance-model-note { font-size:14px; color:#5b6b63; }
.inheritance-lab [role=status] { min-height:1.7em; }
.inheritance-empty { padding:30px 12px; background:#f2f5f4; text-align:center; border-radius:10px; }
.inheritance-lab input[aria-invalid=true] { border-color:#a65338; }
.inheritance-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:650px){
 .inheritance-board { grid-template-columns:1fr 1fr; gap:10px; }
 .inheritance-parent-top { grid-column:2;grid-row:1; }
 .inheritance-parent-side { grid-column:1;grid-row:1; }
 .inheritance-parent { padding:10px; font-size:12px; }
 .inheritance-parent input { font-size:24px; padding:8px; }
 .inheritance-board [data-inheritance-grid] { grid-column:1/-1; }
 .inheritance-summary { grid-template-columns:1fr;gap:8px; }
 .inheritance-scroll th,.inheritance-scroll td { font-size:16px; padding:12px 2px; }
 .inheritance-scroll small { font-size:10px; }
}
/* Direct editing in the gamete headers. */
.inheritance-board { display:block; max-width:620px; margin:28px auto; }
.inheritance-scroll table { border-spacing:3px; border-collapse:separate; }
.inheritance-scroll th,.inheritance-scroll td { height:86px; padding:5px; border:0; }
.inheritance-scroll th input { width:100%; max-width:100%; height:64px; border:1px solid transparent; background:transparent; border-radius:5px; font-size:clamp(21px,3vw,32px); font-weight:600; color:inherit; text-align:center; padding:3px; }
.inheritance-scroll th input:hover { background:#ffffff45; border-color:#ffffff90; }
.inheritance-scroll th input:focus { background:#ffffffa0; outline:2px solid #587867; outline-offset:0; }
.inheritance-scroll td[data-offspring] { font-size:clamp(21px,3vw,32px); font-weight:600; }
.inheritance-scroll .inheritance-corner { position:relative; background:linear-gradient(135deg,transparent 49.5%,#cad5ce 50%,transparent 50.5%); }
.inheritance-female,.inheritance-male { position:absolute; font-size:30px; line-height:1; color:#485c52; }
.inheritance-female { right:18%;top:15%; }
.inheritance-male { left:18%;bottom:15%; }
@media(max-width:650px){.inheritance-scroll th,.inheritance-scroll td {height:58px;padding:2px}.inheritance-scroll th input{height:48px;font-size:19px}.inheritance-scroll td[data-offspring]{font-size:18px}.inheritance-female,.inheritance-male{font-size:23px}}
.inheritance-lab .inheritance-scroll th input { font-family:Inter,Manrope,"Segoe UI",sans-serif; }
@media(max-width:650px){.inheritance-scroll td[data-offspring]{font-size:13px;white-space:nowrap;letter-spacing:-.3px}.inheritance-scroll th input{font-size:16px}}