/* Mutation Detective: a genetics crime lab at night. The lit evidence table (top), the case folder with your findings
 * (bottom left) and the codon wheel on its reference card (bottom right) fill the stage. The scene keeps its night
 * colours in light and dark mode; text on the light box, folder and cards is always dark on light. */
.md { --md-wheel: 372px; position: absolute; inset: 0; padding: 8px 12px 10px; display: grid; gap: 8px 12px; color: #1d2433;
  grid-template-columns: minmax(0, 1fr) var(--md-wheel); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "table table" "panel wheel";
  background:
    radial-gradient(ellipse 60% 55% at 18% -8%, rgba(255, 232, 160, .22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 98% 100%, rgba(80, 140, 220, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px),
    linear-gradient(#111a2c, #1c2840 60%, #16203a);
  border-radius: var(--tlg-radius-lg, 14px); overflow: hidden; }
.md b { font-weight: 800; }
.md small { display: block; font-size: 16px; font-weight: 500; opacity: .85; line-height: 1.1; }
.md-muted { color: #4f5a6b; font-weight: 500; }
.md-area-table { grid-area: table; min-width: 0; min-height: 0; position: relative; }
.md-panel { grid-area: panel; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 28px 12px 8px; overflow: hidden;
  background: linear-gradient(#f6e8c6, #efdcae); border: 1px solid #b08a45; border-radius: 4px 14px 10px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 #fff6dd; }
.md-panel::before { content: "CASE REPORT"; position: absolute; top: -1px; left: 14px; padding: 2px 14px 3px; border-radius: 0 0 8px 8px; background: #d9b56a; color: #4a3208;
  font: 800 16px/1.2 var(--tlg-font); letter-spacing: .08em; }
.md-panel::after { content: "EVIDENCE"; position: absolute; right: 14px; top: 6px; transform: rotate(-6deg); color: rgba(170, 40, 30, .18); border: 3px solid rgba(170, 40, 30, .16);
  padding: 0 8px; font: 900 22px/1.2 var(--tlg-font); letter-spacing: .14em; pointer-events: none; }
.md-side { grid-area: wheel; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border-radius: 10px;
  background: linear-gradient(#2b3447, #222a3b); border: 1px solid #3f4a62; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 18px rgba(0, 0, 0, .4); position: relative; }
.md-side::before { content: ""; position: absolute; bottom: 8px; left: 12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #a8261c); box-shadow: 0 2px 2px rgba(0, 0, 0, .5); }
.md-side-h { position: absolute; left: 10px; top: 8px; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.15; color: #dfe7f5; pointer-events: none; }
.md-side-h--r { left: auto; right: 10px; text-align: right; }
.md-wheel { flex: 1 1 0; min-height: 0; aspect-ratio: 1; max-width: 100%; }
.md-wheel-svg { width: 100%; height: 100%; display: block; }
.md-w-bg { fill: #f4f1ea; }
.md-w-t { font-weight: 700; fill: #1d1d1f; }
.md-w-aat { font-weight: 800; }
.md-w-lines circle { stroke: #6b5a4a; stroke-width: 1.5; }
.md-w-s1 path, .md-w-s2 path, .md-w-s3 path, .md-w-aa path { stroke: #fff; stroke-width: 1; transition: opacity .2s; }
.md-wheel-svg.is-hl .md-w-s1:not(.is-on), .md-wheel-svg.is-hl .md-w-s2:not(.is-on), .md-wheel-svg.is-hl .md-w-s3:not(.is-on), .md-wheel-svg.is-hl .md-w-aa:not(.is-on) { opacity: .25; }
.md-wheel-svg .is-on path { stroke: #1d1d1f; stroke-width: 3; }
.md-w-arrow { fill: none; stroke: #1d1d1f; stroke-width: 4; stroke-dasharray: 2 7; stroke-linecap: round; }
.md-w-arrowhead { fill: #1d1d1f; }

/* ── the light box ── */
.md-table { --md-cw: 28px; --md-lw: 116px; position: relative; padding: 0 12px 8px; border-radius: 12px;
  background: linear-gradient(#6c7688, #49526a); border: 1px solid #2b3245; box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.md-casehead { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 2px 0 4px; color: #f2f5fa; }
.md-tab { flex: none; padding: 3px 14px 4px; margin-top: -2px; border-radius: 0 0 10px 10px; background: linear-gradient(#efd49a, #d9b56a); color: #3d2a08; font-size: 16px; font-weight: 600;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35); }
.md-excerpt { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: #3d2a08; color: #ffe7b0; font-size: 16px; font-weight: 700; }
.md-tx { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 14px; border-radius: 999px; border: 2px solid #ffd27a; background: #263049; color: #fff3d6;
  font: 800 16px/1 var(--tlg-font); cursor: pointer; }
.md-tx[aria-pressed="true"] { background: #ffd27a; color: #2a1d05; }
.md-tx:disabled { opacity: .55; cursor: default; }
.md-note { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.25; color: #fff3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tracks { position: relative; border-radius: 8px; padding: 8px 10px 6px;
  background: radial-gradient(ellipse at 50% 40%, #fffdf3, #e9f1fb 70%, #d9e6f6), #eef4fb;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 26px rgba(120, 160, 210, .35), 0 0 22px rgba(255, 248, 220, .25); }
.md-tracks::before { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(60, 90, 130, .06) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(60, 90, 130, .06) 0 1px, transparent 1px 22px); }
.md-rows { position: relative; display: flex; flex-direction: column; gap: 4px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.md-table.is-focus .md-tracks { box-shadow: inset 0 0 0 3px var(--tlg-focus, #2563eb), inset 0 0 26px rgba(120, 160, 210, .35); }
.md-track { display: grid; grid-template-columns: var(--md-lw) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
.md-tlabel { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 0; font-size: 16px; line-height: 1.15; color: #1d2433; }
.md-tsub { font-size: 16px; color: #45516a; }
.md-seq, .md-cods { display: grid; grid-template-columns: repeat(var(--n), var(--md-cw)); gap: 2px; justify-content: start; }
.md-seq { grid-column: 2; grid-row: 1; }
.md-cods { grid-column: 2; grid-row: 2; position: relative; min-height: 31px; }
.md-b { position: relative; display: grid; place-items: center; height: 32px; border-radius: 5px; border: 1px solid #5e7584; color: #1d1d1f;
  font: 800 18px/1 var(--tlg-font-mono, ui-monospace, Menlo, monospace); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.md-b-A { background: #ffd98a; } .md-b-U { background: #ffb3a7; } .md-b-T { background: #f3b5d6; } .md-b-G { background: #a9cdf2; } .md-b-C { background: #b7e4c0; }
.md-b.is-cur { outline: 3px dashed #1d2433; outline-offset: 2px; z-index: 1; }
.md-rows .md-b:hover { filter: brightness(1.06); box-shadow: 0 0 0 2px #1f5f8b; }
.md-b.is-mark { border: 2px solid #b42318; background-image: repeating-linear-gradient(135deg, rgba(180, 35, 24, .22) 0 4px, transparent 4px 8px); }
.md-b.is-mark::after { content: "✗"; position: absolute; top: -9px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #b42318; color: #fff;
  font: 900 13px/18px var(--tlg-font); text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); z-index: 1; }
.md-b.is-true { box-shadow: 0 0 0 3px #2e7d32; }
.md-b.is-true:not(.is-mark)::before { content: "✓"; position: absolute; bottom: -10px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2e7d32; color: #fff;
  font: 900 13px/18px var(--tlg-font); text-align: center; z-index: 1; }
.md-b.is-wrong { box-shadow: 0 0 0 3px #b42318; opacity: .8; }
.md-b.is-flip { animation: md-flip .36s ease both; }
@keyframes md-flip { 0% { transform: scaleY(1); } 45% { transform: scaleY(.05); } 100% { transform: scaleY(1); } }
.md-cod { position: relative; min-width: 0; height: 31px; padding: 0 1px; border: 2px solid #6d7f97; border-top: 0; border-radius: 0 0 9px 9px; background: transparent; color: #45516a;
  font: 700 16px/1 var(--tlg-font); cursor: pointer; display: grid; place-items: center; }
.md-cod:hover:not(:disabled) { background: rgba(31, 95, 139, .1); }
.md-cod.is-part { border-style: dashed; opacity: .6; cursor: default; }
.md-cod.is-lit { background: rgba(31, 95, 139, .2); border-color: #1f5f8b; }
.md-cod.is-site { background: repeating-linear-gradient(135deg, rgba(220, 140, 20, .28) 0 6px, rgba(220, 140, 20, .12) 6px 12px); border-color: #b06d00; }
.md-cod.is-unread { opacity: .38; }
.md-cod-n { pointer-events: none; }
.md-sitekey { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: repeating-linear-gradient(135deg, #f3c27a 0 6px, #f8dcae 6px 12px); color: #3d2a08; font-weight: 800; }
.md-bead { display: inline-grid; place-items: center; min-width: 46px; max-width: 100%; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--md-c); color: var(--md-i);
  font: 800 16px/1 var(--tlg-font); border: 1.5px solid rgba(0, 0, 0, .45); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); pointer-events: none; }
.md-bead--stop { border-radius: 6px; letter-spacing: .03em; }
.md-bead.is-after { opacity: .5; border-style: dashed; }
.md-bead.is-pop { animation: md-pop .28s cubic-bezier(.3, 1.6, .5, 1) both; }
.md-bead.is-diff { box-shadow: 0 0 0 3px #b42318, inset 0 3px 0 rgba(255, 255, 255, .35); }
@keyframes md-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.md-x { position: absolute; top: -8px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #b42318; color: #fff; font: 900 13px/18px var(--tlg-font); text-align: center; z-index: 2; }
.md-lost { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); padding: 0 5px; border-radius: 6px; background: #b42318; color: #fff; font: 800 16px/1.2 var(--tlg-font); z-index: 2; white-space: nowrap; }
/* the protein lineup board: the codon row turns into a lineup wall when the ribosomes run */
.md-cods.is-board { background: repeating-linear-gradient(0deg, rgba(29, 36, 51, .1) 0 1px, transparent 1px 8px), rgba(29, 36, 51, .05); border-radius: 0 0 8px 8px; }
.md-rib { position: absolute; left: 0; top: -40px; width: calc(var(--md-cw) * 3 + 4px); height: 46px; pointer-events: none; z-index: 3; will-change: transform; }
.md-rib-l { position: absolute; left: 4%; right: 4%; top: 0; height: 30px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 38% 30%, #e7b48c, #bf7e55 55%, #7f4426); border: 1.5px solid #6b3a1c; opacity: .82; }
.md-rib-s { position: absolute; left: 10%; right: 10%; top: 34px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 25%, #f0c79a, #c98d58 60%, #8a5228); border: 1.5px solid #6b3a1c; opacity: .82; }

/* ── the case report (panel) ── */
.md-step { margin: 0; font-size: 16px; line-height: 1.25; color: #2b2210; }
.md-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; background: #3d2a08; color: #ffe7b0; font-size: 16px; font-weight: 800; vertical-align: 1px; }
.md-status { min-height: 22px; }
.md-q { font-size: 18px; }
.md-board { display: flex; gap: 10px; align-items: stretch; }
.md-tray { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed #b08a45; border-radius: 10px; padding: 4px; background: rgba(255, 255, 255, .25); }
.md-tray.is-empty .md-tray-tip { opacity: .7; }
.md-tray-tip { margin: 0; font-size: 16px; line-height: 1.15; text-align: center; color: #5a4520; }
.md .md-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: 4px 10px 10px 4px;
  background: linear-gradient(#fff4d6, #f1d79a); border: 2px solid #8a6a2c; color: #3d2a08; font: 900 16px/1 var(--tlg-font); letter-spacing: .04em; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.md-tag-hole { width: 10px; height: 10px; border-radius: 50%; background: #efdcae; border: 2px solid #8a6a2c; }
.md-tag:focus-visible { outline: 3px solid var(--tlg-focus, #2563eb); outline-offset: 3px; }
.md-zones { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 6px; align-content: start; }
.md-zgroup { margin: 0; align-self: end; font-size: 16px; font-weight: 800; color: #5a4520; border-bottom: 2px solid #b08a45; line-height: 1.15; }
.md-zone { position: relative; min-height: 44px; padding: 2px 6px; border-radius: 9px; border: 2px solid #8a7a5a; background: #fffaf0; color: #1d2433;
  display: flex; flex-direction: column; justify-content: center; font-size: 16px; font-weight: 800; line-height: 1.1; }
.md-zone small { font-weight: 500; }
.md-zone-slot { position: absolute; right: -6px; top: -9px; z-index: 1; }
.md .md-zone .md-tag { height: 22px; padding: 0 5px; gap: 0; border-radius: 4px 9px 9px 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.md-zone .md-tag .md-tag-t { display: none; }
.md-zone .md-tag .md-tag-hole { width: 8px; height: 8px; margin-right: 3px; }
.md-zone .md-tag::after { content: "✓"; font-size: 16px; }
.md-zone.is-on { border-color: var(--ps-accent, #1f5f8b); background: #e7f1fa; box-shadow: 0 0 0 2px var(--ps-accent, #1f5f8b); }
.md-zone.is-right { border-color: #2e7d32; background: #e3f4e4; }
.md-zone.is-right::before { content: "✓"; position: absolute; left: -8px; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font: 900 14px/20px var(--tlg-font); text-align: center; }
.md-zone.is-wrong { border-color: #b42318; background: #fbe4e1; }
.md-zone.is-wrong::before { content: "✗"; position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #b42318; color: #fff; font: 900 14px/20px var(--tlg-font); text-align: center; }
html.pdz-armed .md-zone { outline: 3px dashed rgba(31, 95, 139, .6); outline-offset: -3px; cursor: pointer; }
.md-radios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.md-radio { position: relative; min-height: 44px; padding: 2px 14px 2px 6px; border-radius: 10px; border: 2px solid #8a7a5a; background: #fffaf0; color: #1d2433; text-align: left;
  font: 800 16px/1.12 var(--tlg-font); cursor: pointer; }
.md-radio small { font-weight: 500; }
.md-radio[aria-checked="true"] { border-color: var(--ps-accent, #1f5f8b); background: #e7f1fa; box-shadow: 0 0 0 2px var(--ps-accent, #1f5f8b); }
.md-radio[aria-checked="true"]::before { content: ""; position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ps-accent, #1f5f8b); }
.md-radio:focus-visible { outline: 3px solid var(--tlg-focus, #2563eb); outline-offset: 2px; }
.md-radio:disabled { cursor: default; }
.md-radio.is-right { border-color: #2e7d32; background: #e3f4e4; }
.md-radio.is-right::after { content: " ✓"; color: #2e7d32; font-weight: 900; }
.md-radio.is-wrong { border-color: #b42318; background: #fbe4e1; }
.md-radio.is-wrong::after { content: " ✗"; color: #b42318; font-weight: 900; }
.md-radios--pick .md-radio { min-height: 64px; font-size: 20px; text-align: center; }
.md-len { display: flex; flex-direction: column; gap: 2px; }
.md-len-in .pn { flex-direction: row; align-items: center; gap: 6px; }
.md-len-in .pn-label { display: none; }
.md-len-in .pn-display { flex: 0 0 84px; width: 84px; min-width: 0; min-height: 38px; background: #fffaf0; border-color: #8a7a5a; }
.md-len-in .pn-input { width: 100%; font-size: 22px; padding: 2px 0; color: #1d2433; }
.md-len-in .pn-units { display: none; }
.md-len-in .pn-pad { flex: 1; display: flex; gap: 4px; }
.md-len-in .pn-pad .pn-key { flex: 1 1 0; min-width: 0; }
.md-len-in .pn-key--neg, .md-len-in .pn-key--dot { display: none; }
.md-len-in .pn-key[data-key="1"] { order: 1; } .md-len-in .pn-key[data-key="2"] { order: 2; } .md-len-in .pn-key[data-key="3"] { order: 3; }
.md-len-in .pn-key[data-key="4"] { order: 4; } .md-len-in .pn-key[data-key="5"] { order: 5; } .md-len-in .pn-key[data-key="6"] { order: 6; }
.md-len-in .pn-key[data-key="7"] { order: 7; } .md-len-in .pn-key[data-key="8"] { order: 8; } .md-len-in .pn-key[data-key="9"] { order: 9; }
.md-len-in .pn-key[data-key="0"] { order: 10; } .md-len-in .pn-key--back { order: 11; } .md-len-in .pn-key--clear { order: 12; flex: 1.8 1 0; font-size: 16px; }
.md-len-in .pn-key { min-height: 38px; padding: 0; font-size: 18px; font-weight: 800; background: #fffaf0; color: #1d2433; border-color: #8a7a5a; }
.md-len-in .pn-wide { grid-column: auto; }
.md-len-want { margin: 0; font-size: 16px; font-weight: 800; color: #2e7d32; }

/* ── lineups ── */
.md--lineup .md-panel { justify-content: flex-start; gap: 8px; }

/* ── germ-line (AP): the case card left, the questions right ── */
.md--germ { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "table panel"; }
.md--germ .md-panel { justify-content: center; gap: 10px; }
.md--germ .md-radios { grid-auto-flow: row; }
.md--germ .md-radio { min-height: 58px; font-size: 18px; }
.md-file, .md-kary { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px; border-radius: 12px;
  background: linear-gradient(#6c7688, #49526a); border: 1px solid #2b3245; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.md-file-tab { align-self: flex-start; margin: 0; padding: 3px 14px 4px; border-radius: 0 0 10px 10px; background: linear-gradient(#efd49a, #d9b56a); color: #3d2a08; font-size: 16px; }
.md-file-art { flex: 1; min-height: 0; border-radius: 8px; background: radial-gradient(ellipse at 50% 40%, #fffdf3, #e9f1fb 70%, #d9e6f6); display: grid; place-items: center; }
.md-file-art svg { width: 100%; height: 100%; max-height: 380px; }
.md-file-text { margin: 0; padding: 8px 12px; border-radius: 8px; background: #fffaf0; color: #1d2433; font-size: 18px; line-height: 1.3; }

/* ── chromosomes (AP) ── */
.md--chromo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "table" "panel"; }
.md-kary { height: auto; }
.md-kary-art { border-radius: 8px; background: radial-gradient(ellipse at 50% 40%, #fffdf3, #e9f1fb 70%, #d9e6f6); }
.md-kary-art svg { width: 100%; height: auto; display: block; max-height: 300px; }
.md-band-hl { stroke: #b42318; stroke-width: 5; }
.md-board--chromo .md-zones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-board--chromo .md-zone { min-height: 70px; font-size: 18px; }
.md--chromo .md-panel { gap: 10px; justify-content: center; }

/* ── Briefing example + start art ── */
.md-ex-svg { width: 100%; height: auto; display: block; color: var(--tlg-text); }
.md-start-art { width: 100%; height: 100%; display: block; }

/* the assignment card would cover the wheel: move it to the foot of the customer column */
@media (min-width: 901px) {
  html.ps-locked:has(.md) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.md):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 1100px) { .md { --md-wheel: 300px; } }
@media (max-width: 900px) {
  .md { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "table" "panel" "wheel"; }
  .md--germ { grid-template-areas: "table" "panel"; grid-template-rows: auto auto; }
  .md-side { min-height: 360px; }
  .md-wheel { max-width: 400px; width: 100%; flex: none; }
  .md-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-zgroup { display: none; }
  .md-zone { grid-column: auto !important; grid-row: auto !important; }
  .md-radios { grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) { .md-b.is-flip, .md-bead.is-pop { animation: none; } .md-w-s1 path, .md-w-s2 path, .md-w-s3 path, .md-w-aa path { transition: none; } }

.md-b.has-gap::before { content: ""; position: absolute; left: -4px; top: -5px; bottom: -5px; width: 4px; border-radius: 2px; background: #b42318; z-index: 1; }
.md-gap { position: absolute; left: -15px; top: -12px; padding: 0 4px; border-radius: 8px; background: #b42318; color: #fff; font: 800 16px/1.1 var(--tlg-font); z-index: 2; white-space: nowrap; pointer-events: none; }