/* Gel Crime Lab: the forensic DNA bench. Left: the gel tank on the bench (case tab, power supply, the gel on a
 * blue-light imager with a mm ruler). Right: the lab report on a clipboard. The scene keeps its own colours in light
 * and dark mode; text on the paper and the case tab is always dark on light, text on the gel always light on dark. */
.gcl { --gcl-accent: #5a3e8e; --gcl-scale: 66px; --gcl-ruler: 60px;
  position: absolute; inset: 0; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 12px; color: #1d2433; font-size: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px) 0 0 / 48px 100%,
    linear-gradient(#dde6ec, #cbd7df 70%, #2a2f36 70.2%, #1f2329);
  border-radius: var(--tlg-radius-lg, 14px); overflow: hidden; }
.gcl b { font-weight: 800; }
.gcl-muted { color: #5b6573; font-weight: 500; }

/* ── the bench ── */
.gcl-bench { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.gcl-casebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 36px; }
.gcl-tab { margin: -10px 0 0; padding: 6px 14px 6px; border-radius: 0 0 10px 10px; background: linear-gradient(#f3dca6, #dcb874); color: #3d2a08; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); line-height: 1.2; }
.gcl-psu { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: linear-gradient(#6f7c88, #4b5560); border: 1px solid #2f363e; box-shadow: 0 4px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.gcl-psu-led { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a8a, #8f2018); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .4); }
.gcl-psu.is-on .gcl-psu-led { background: radial-gradient(circle at 35% 35%, #c9ffb0, #2f9a1e); box-shadow: 0 0 8px #6bff4a; }
.gcl-psu-lcd { display: flex; gap: 10px; min-width: 128px; justify-content: space-between; padding: 2px 8px; border-radius: 4px; background: #1c2a1c; color: #9dff8a; font: 700 16px/1.3 ui-monospace, Menlo, Consolas, monospace; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.gcl-psu:not(.is-on) .gcl-psu-lcd { color: #6fa863; }
.gcl-evidence { margin: 0; line-height: 1.3; }
.gcl-status { margin: 0; min-height: 22px; font-weight: 800; line-height: 1.3; color: #2a2346; }
.gcl-status.is-nudge { color: #9c2a1a; }

/* the tank: black lead (−) at the wells, red lead (+) at the far end */
.gcl-tank { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 4px 10px 6px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08) 12%, rgba(255, 255, 255, .02) 88%, rgba(255, 255, 255, .3)), linear-gradient(#7fb6cf, #5b93ad);
  border: 2px solid #3e6e86; box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.gcl-lead { position: relative; display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 8px; color: #0f2230; font-weight: 700; }
.gcl-lead::before { content: ""; position: absolute; left: 44px; right: 8px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #1d1d1f; }
.gcl-lead--pos::before { background: #c0261b; }
.gcl-lead-t { position: relative; margin-left: auto; padding: 0 8px; background: #6fa8c2; border-radius: 6px; }
.gcl-pole { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #1d1d1f; color: #fff; font: 900 20px/1 var(--tlg-font); }
.gcl-lead--pos .gcl-pole { background: #c0261b; }
/* electrolysis bubbles while the power is on */
.gcl.is-running .gcl-lead::after { content: ""; position: absolute; left: 48px; right: 12px; top: 2px; height: 10px; opacity: .9;
  background: radial-gradient(circle, #fff 0 1.6px, transparent 2px) 0 0 / 22px 10px; animation: gcl-bubble .9s linear infinite; }
@keyframes gcl-bubble { from { background-position: 0 8px; } to { background-position: 11px -4px; } }

.gcl-heads, .gcl-gel { display: grid; grid-template-columns: var(--gcl-scale) repeat(var(--n), minmax(0, 1fr)) var(--gcl-ruler); }
.gcl-heads { align-items: end; padding: 2px 0 2px; }
.gcl-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; font-weight: 800; line-height: 1.15; color: #0f2230; }
.gcl-head-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gcl-head--scale, .gcl-head--ruler { align-self: end; font-weight: 700; }
.gcl-head--evidence .gcl-head-t { padding: 0 6px; border-radius: 6px; background: #c0392b; color: #fff; }
.gcl-tubebox { display: block; height: 30px; }
.gcl-tube { height: 30px; width: auto; display: block; }
.gcl-verdict { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; font-weight: 900; line-height: 1; animation: gcl-pop .35s ease-out both; }
.gcl-verdict.is-same { background: #136f4e; color: #fff; }
.gcl-verdict.is-diff { background: #fff; color: #9c2a1a; border: 2px solid #9c2a1a; border-radius: 6px; }
@keyframes gcl-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* the gel on its blue-light imager */
.gcl-gel { position: relative; flex: 1 1 0; min-height: 0; border-radius: 6px;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(120, 100, 255, .22), transparent 70%), linear-gradient(#2b2462, #1b1640);
  box-shadow: inset 0 0 0 2px #120f2c, inset 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 3px #4b5866; }
.gcl-scale, .gcl-lane, .gcl-ruler { position: relative; min-width: 0; }
.gcl-lane { margin: 0 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035) 20%, rgba(255, 255, 255, .035) 80%, transparent); }
.gcl-lane--evidence { background: linear-gradient(90deg, transparent, rgba(255, 120, 120, .07) 20%, rgba(255, 120, 120, .07) 80%, transparent); }
.gcl-well { position: absolute; top: 2px; left: 16%; right: 16%; height: 7px; border-radius: 2px; background: #0b0920; border: 1px solid #7d78b8; }
.gcl-bands { position: absolute; inset: 0; }
.gcl-band { position: absolute; left: 14%; right: 14%; height: 6px; margin-top: -3px; border-radius: 2px; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255, 170, 60, .5); }
.gcl-lane--ladder .gcl-band { background: #ffe1a6; box-shadow: 0 0 6px 1px rgba(255, 220, 150, .45); left: 18%; right: 18%; height: 5px; }
.gcl-front { position: absolute; left: var(--gcl-scale); right: var(--gcl-ruler); height: 14px; margin-top: -7px; pointer-events: none;
  background: linear-gradient(transparent, rgba(120, 110, 255, .55), transparent); }
.gcl-bp { position: absolute; right: 8px; transform: translateY(-50%); color: #ece9ff; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
.gcl-ruler { border-left: 2px solid #8f8ac9; touch-action: none; }
.gcl--pred:not(.is-locked) .gcl-ruler { cursor: ns-resize; background: linear-gradient(90deg, rgba(255, 224, 102, .12), transparent); }
.gcl-tick { position: absolute; left: 0; width: 8px; border-top: 2px solid #8f8ac9; }
.gcl-tick--major { width: 14px; }
.gcl-mm { position: absolute; left: 18px; transform: translateY(-50%); color: #cfd2ff; font-size: 16px; line-height: 1; }

/* prediction marker (role=slider) and its line across the lanes */
.gcl-handle { position: absolute; left: -4px; z-index: 3; transform: translateY(-50%); display: flex; align-items: center; min-height: 32px; padding: 2px 6px 2px 16px;
  background: #ffe066; color: #1d1a3a; font-weight: 900; line-height: 1; clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%); cursor: grab; outline: none; }
.gcl-handle:focus-visible { background: #fff3a8; box-shadow: inset 0 0 0 3px #1d1a3a; }
.gcl-handle.is-unset { animation: gcl-nudge 1.4s ease-in-out infinite; }
.gcl-handle-t { font-size: 16px; white-space: nowrap; }
@keyframes gcl-nudge { 0%, 100% { margin-top: 0; } 50% { margin-top: 6px; } }
.gcl-predline { position: absolute; left: var(--gcl-scale); right: var(--gcl-ruler); z-index: 2; border-top: 3px dashed #ffe066; pointer-events: none; }

/* reveal (practice only) */
.gcl-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gcl-guide { position: absolute; left: var(--gcl-scale); right: var(--gcl-ruler); border-top: 2px dashed #9fe0ff; transform-origin: right center; animation: gcl-sweep .6s ease-out both; }
@keyframes gcl-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gcl-band.is-hit { box-shadow: 0 0 0 2px #7fffd4, 0 0 10px 2px rgba(127, 255, 212, .6); }
.gcl-band.is-miss { background: #ff8a7a; box-shadow: 0 0 0 2px #fff; }
.gcl-band.is-miss::after { content: "✗"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: #ff8a7a; font: 900 16px/1 var(--tlg-font); }
.gcl-gap { position: absolute; left: 14%; right: 14%; height: 8px; margin-top: -4px; border: 2px dotted #ff8a7a; border-radius: 3px; }
.gcl-stamp { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-14deg); padding: 1px 4px; border: 3px solid #7fffd4; border-radius: 4px; color: #7fffd4; font: 900 16px/1.2 var(--tlg-font); letter-spacing: .04em; animation: gcl-stamp .4s .5s ease-out both; }
@keyframes gcl-stamp { from { transform: translateX(-50%) rotate(-14deg) scale(2.2); opacity: 0; } to { transform: translateX(-50%) rotate(-14deg) scale(1); opacity: 1; } }
.gcl-lane.is-picked-wrong { box-shadow: inset 0 0 0 3px #ff8a7a; border-radius: 4px; }
.gcl-trueline { position: absolute; left: var(--gcl-scale); right: var(--gcl-ruler); border-top: 3px solid #7fffd4; }
.gcl-trueline.is-below .gcl-trueline-t { bottom: auto; top: 3px; }
.gcl-trueline-t { position: absolute; right: 4px; bottom: 3px; padding: 0 6px; border-radius: 4px; background: #0f3d33; color: #c8fff0; font-size: 16px; font-weight: 800; white-space: nowrap; }

/* the bench foot: model label, band distances, about */
.gcl-foot { position: relative; display: flex; align-items: center; gap: 6px; min-height: 34px; }
.gcl-model { margin: 0 auto 0 0; min-width: 0; padding: 3px 8px; border-radius: 6px; background: rgba(24, 28, 34, .78); color: #e5ebf0; font-size: 16px; line-height: 1.15; }
.gcl-readout summary { min-height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #f4f7fa; color: #1d2433; font-weight: 700; cursor: pointer; list-style: none; border: 1px solid #9aa7b3; }
.gcl-readout summary::-webkit-details-marker { display: none; }
.gcl-readout summary::before { content: "▸"; margin-right: 6px; }
.gcl-readout[open] summary::before { content: "▾"; }
.gcl-readout-b { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6; max-height: 300px; overflow: auto; padding: 10px 14px; border-radius: 10px; background: #fff; color: #1d2433; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.gcl-readout-b p { margin: 0; line-height: 1.4; }
.gcl-readout-b table { width: 100%; border-collapse: collapse; }
.gcl-readout-b th, .gcl-readout-b td { padding: 4px 6px; text-align: left; border-bottom: 1px solid #dfe5ea; }

/* ── the lab report (clipboard) ── */
.gcl-panel { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 22px 14px 10px; overflow: auto;
  background: linear-gradient(#fffef9, #fbf7ea); border: 10px solid #9a6633; border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px #e7dcc0; }
.gcl-clip { position: absolute; top: -10px; left: 50%; width: 110px; height: 22px; margin: 0 0 0 -55px; border-radius: 0 0 8px 8px; background: linear-gradient(#d8dde2, #8f99a3); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.gcl-ph { margin: 0 0 2px; font-size: 16px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #5a3e8e; }
.gcl-sec { display: flex; flex-direction: column; gap: 6px; padding: 5px 0 7px; border-bottom: 1px dashed #d8ccb0; }
.gcl-sec:last-child { border-bottom: 0; }
.gcl-step { margin: 0; font-weight: 700; line-height: 1.25; }
.gcl-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background: #5a3e8e; color: #fff; font-size: 16px; font-weight: 900; vertical-align: -1px; }
.gcl-tip { margin: 0; color: #5b6573; line-height: 1.25; }

.gcl-radios { display: grid; gap: 6px; }
.gcl-radios--enz { grid-template-columns: 1fr 1fr; }
.gcl-radios--sus { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.gcl-radio { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 2px solid #b8c1ca; border-radius: 10px; background: #fff; color: #1d2433; font: inherit; text-align: left; cursor: pointer; line-height: 1.2; }
.gcl-radio:hover:not(:disabled) { border-color: #8a74b8; }
.gcl-radio:focus-visible { outline: 3px solid #1d6fd8; outline-offset: 2px; }
.gcl-radio[aria-checked="true"] { border-color: #5a3e8e; background: #efe9fb; box-shadow: inset 0 0 0 1px #5a3e8e; }
.gcl-radio[aria-checked="true"]::after, .gcl-radio.is-right::after, .gcl-radio.is-wrong::after { content: "✓"; position: absolute; top: -9px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #5a3e8e; color: #fff; font: 900 16px/22px var(--tlg-font); text-align: center; }
.gcl-radio:disabled { cursor: default; opacity: .55; }
.gcl-radio[aria-checked="true"]:disabled { opacity: 1; }
.gcl-radio.is-right { border-color: #136f4e; background: #e3f6ec; box-shadow: inset 0 0 0 1px #136f4e; opacity: 1; }
.gcl-radio.is-right::after { content: "✓"; background: #136f4e; }
.gcl-radio.is-wrong { border-color: #9c2a1a; background: #fde8e4; box-shadow: inset 0 0 0 1px #9c2a1a; }
.gcl-radio.is-wrong::after { content: "✗"; background: #9c2a1a; }
.gcl-vial { flex: none; width: 26px; height: 40px; }
.gcl-vial-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcl-site { font: 700 16px/1.1 ui-monospace, Menlo, Consolas, monospace; color: #3b4452; white-space: nowrap; }
.gcl-site-a, .gcl-site-b { display: inline-block; transition: transform .35s ease; }
.gcl-snip { display: inline-block; color: #9c2a1a; font-family: var(--tlg-font); }
.gcl.is-cut .gcl-radio[aria-checked="true"] .gcl-site-a { transform: translateX(-3px); }
.gcl.is-cut .gcl-radio[aria-checked="true"] .gcl-site-b { transform: translateX(3px); }
.gcl.is-cutting .gcl-radio[aria-checked="true"] .gcl-snip { animation: gcl-snip .5s ease-out 2; }
@keyframes gcl-snip { 50% { transform: translateY(4px) scale(1.4); } }
.gcl.is-cutting .gcl-tubebox { animation: gcl-shake .45s ease-in-out 2; }
@keyframes gcl-shake { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.gcl-radios--sus .gcl-radio { flex-direction: column; justify-content: center; gap: 0; text-align: center; padding: 4px 6px; }
.gcl-chip-k { font-size: 16px; color: #5b6573; }
.gcl-radios--sus .gcl-radio b { font-size: 22px; line-height: 1.05; }

.gcl-btns { display: flex; gap: 8px; }
.gcl-btn { flex: 1; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 2px solid #5a3e8e; background: #fff; color: #4a2f7c; font: 800 16px/1.1 var(--tlg-font); cursor: pointer; }
.gcl-btn--run { background: #5a3e8e; color: #fff; }
.gcl-btn:hover:not(:disabled) { filter: brightness(1.08); }
.gcl-btn:focus-visible { outline: 3px solid #1d6fd8; outline-offset: 2px; }
.gcl-btn:disabled { opacity: .5; cursor: default; }
.gcl-predrow { display: flex; align-items: center; gap: 6px; }
.gcl-predout { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; background: #fff7cf; border: 2px solid #e2c55a; }
.gcl-nudge { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 2px solid #b8c1ca; background: #fff; color: #1d2433; font: 900 16px/1 var(--tlg-font); cursor: pointer; }
.gcl-nudge:disabled { opacity: .5; cursor: default; }
.gcl-nudge:focus-visible { outline: 3px solid #1d6fd8; outline-offset: 2px; }

/* Briefing example + start art */
.gcl-ex-svg { width: 100%; height: auto; display: block; }
.gcl-start-art { width: 100%; height: 100%; display: block; }

/* The assignment card would cover the lab report's last choices: put it at the foot of the customer column. */
@media (min-width: 901px) {
  html.ps-locked:has(.gcl) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.gcl):has(.lga-card) .ps-side { padding-bottom: 84px; }
}

/* ── narrow screens: the bench stacks over the report and the gel scrolls sideways if it must ── */
@media (max-width: 900px) {
  .gcl { position: static; grid-template-columns: 1fr; padding: 8px; }
  .gcl-tank { flex: none; overflow-x: auto; }
  .gcl-heads, .gcl-gel { min-width: 500px; }
  .gcl-gel { flex: none; height: 380px; }
  .gcl-panel { overflow: visible; }
  .gcl-casebar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .gcl *, .gcl *::before, .gcl *::after { animation: none !important; transition: none !important; }
}