/* DNA Lab. Light on the web; the World's dark liquid palette when a World lesson
   embeds it (?in=world), so a lesson step and its lab read as one screen. The four
   bases keep one colour each everywhere, and every base also carries its letter,
   so nothing depends on colour alone. */
:root {
  color-scheme: light;
  --bg: #f4f8f5; --panel: #ffffff; --panel-2: #eef4f0; --ink: #16302a; --muted: #5a6f68; --line: rgba(22, 48, 42, .14);
  --accent: #1b6d30; --accent-ink: #ffffff; --accent-soft: #e6f4ea; --gold: #8a6408;
  --right: #1f8a4c; --wrong: #c2412d;
  --strand-a: #2c5d8f; --strand-b: #7a4a8c; --strand-old: #2c5d8f; --strand-new: #2f9e5b; --phosphate: #e0a526;
  --base-a: #e4572e; --base-t: #f3b61f; --base-g: #3a7bd5; --base-c: #22a39a; --base-ink: #10201c;
  --hbond: #16302a; --select: #1b6d30;
  --enzyme-helicase: #f08a5d; --enzyme-polymerase: #b9a7f5; --enzyme-ligase: #f5d565;
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", sans-serif;
}
:root[data-theme="world"] {
  color-scheme: dark;
  --bg: #101d20; --panel: #1b2c2f; --panel-2: #17282b; --ink: #eef5ef; --muted: #afc2b9; --line: #ffffff1c;
  --accent: #d9edb0; --accent-ink: #19392e; --accent-soft: #273d35; --gold: #e4c87f;
  --right: #8fd49a; --wrong: #f2a07f;
  --strand-a: #8fb8e8; --strand-b: #d3a6e6; --strand-old: #8fb8e8; --strand-new: #8fd49a; --phosphate: #e4c87f;
  --hbond: #eef5ef; --select: #e4c87f;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100dvh; font-size: 15px; line-height: 1.75; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-head { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.head-inner { width: min(760px, calc(100% - 24px)); min-height: 56px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 800; color: inherit; text-decoration: none; }
.brand .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: 700; font-size: 13px; }

main { width: min(760px, calc(100% - 24px)); margin: auto; padding: 16px 0 calc(60px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hero { padding: 20px 18px; border-radius: var(--radius); background: linear-gradient(140deg, #134e2a, #1b6d30 60%, #2c8a4a); color: #fff; }
.hero .kicker { display: inline-block; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 800; }
.hero h1 { margin: 8px 0 4px; font-size: 24px; line-height: 1.45; }
.hero p { margin: 0; opacity: .88; font-size: 14px; }
.draft { padding: 8px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); font-size: 12.5px; font-weight: 700; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); }
.tabs button { min-height: 46px; border: 0; border-radius: 14px; background: transparent; font-weight: 800; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }

.stage { position: relative; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
#dna-canvas { display: block; width: 100%; touch-action: pan-y; }
.stage-note { position: absolute; inset-inline: 12px; bottom: 10px; margin: 0; font-size: 12px; color: var(--muted); text-align: center; pointer-events: none; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 46px; padding: 8px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-weight: 800; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.btn:disabled { opacity: .45; }

.card { padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 10px; }
.card h2 { margin: 0; font-size: 17px; line-height: 1.5; }
.card p { margin: 0; }
.source { font-size: 11.5px; color: var(--muted); }
.info { min-height: 58px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); font-size: 14px; }
.info b { font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 10px 12px; border-radius: 14px; background: var(--panel-2); font-size: 13.5px; line-height: 1.6; }
.facts b { display: block; font-size: 18px; color: var(--accent); }
:root[data-theme="world"] .facts b { color: var(--gold); }

.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); font-size: 12.5px; font-weight: 700; }
.legend i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--c); color: var(--base-ink); font-style: normal; font-weight: 900; font-size: 12px; }

.nucleotide { display: grid; gap: 12px; align-items: center; }
.nucleotide svg { max-width: 260px; justify-self: center; }
.nucleotide svg { width: 100%; height: auto; }
.nucleotide svg [data-shape] { transition: opacity .2s; }
.nucleotide svg[data-show] [data-shape] { opacity: .28; }
.nucleotide svg[data-show="phosphate"] [data-shape="phosphate"], .nucleotide svg[data-show="sugar"] [data-shape="sugar"], .nucleotide svg[data-show="base"] [data-shape="base"] { opacity: 1; }
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 560px) { .nucleotide { grid-template-columns: minmax(180px, 240px) 1fr; } .parts { grid-template-columns: 1fr; } }
.parts button { min-height: 52px; text-align: center; padding: 8px 8px; line-height: 1.4; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 800; }
.parts button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* Cells shrink below 34px when the row would outgrow a narrow lesson frame. */
.task-grid { display: grid; gap: 4px; direction: ltr; }
.task-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 34px); gap: 4px; justify-content: center; }
.cell { height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--c, var(--panel-2)); color: var(--base-ink); font-weight: 900; font-size: 16px; }
.cell.empty { background: var(--panel-2); color: var(--muted); border: 1.5px dashed var(--line); }
.cell.now { box-shadow: 0 0 0 2.5px var(--select); }
.bonds { height: 14px; display: flex; justify-content: center; gap: 3px; }
.bonds i { width: 2px; height: 14px; border-radius: 1px; background: var(--hbond); opacity: .7; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; direction: ltr; }
.keys button { min-height: 52px; border-radius: 14px; border: 0; background: var(--c); color: var(--base-ink); font-size: 20px; font-weight: 900; }
.keys button:disabled { opacity: .4; }
.shake { animation: shake .32s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.status { min-height: 26px; display: grid; gap: 2px; font-size: 14px; }
.status b { color: var(--right); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps button { min-height: 50px; padding: 6px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-weight: 800; font-size: 12.5px; line-height: 1.35; }
.steps button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.caption { min-height: 120px; }
.caption b { font-size: 16px; }
.caption small { color: var(--muted); font-size: 11.5px; }
.options { display: grid; gap: 8px; }
.options button { min-height: 48px; text-align: start; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 700; }
.options button[data-state="right"] { border-color: var(--right); box-shadow: inset 0 0 0 2px var(--right); }
.options button[data-state="wrong"] { border-color: var(--wrong); box-shadow: inset 0 0 0 2px var(--wrong); }
.options button:disabled:not([data-state]) { opacity: .55; }

/* Inside a World lesson the lesson owns the title and the way back. */
/* The lesson also carries the draft banner and has already picked the mode. */
:root[data-theme="world"] .site-head, :root[data-theme="world"] .hero, :root[data-theme="world"] .web-only,
:root[data-theme="world"] .draft, :root[data-theme="world"] .tabs { display: none; }
:root[data-theme="world"] main { padding-top: 10px; }

@media (min-width: 720px) { .hero h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
[hidden] { display: none !important; }