/* Genetics Lab: Crossing Fruit Flies. Classes are zsa-ff-. Load after zsa-base.css and zsa-lab-a11y.css. */
.zsa-ff {--zsa-max-width:1040px; --ff-ink:#1e293b; --ff-teal:#0f5e66; --ff-sun:#f3c74a; --ff-sun-soft:#fff6d6; --ff-line:#cfdbe8; background:#f6f9fc; font-size:17px; color:var(--ff-ink);}
.zsa-ff h2 {font-size:clamp(24px,2.4vw,30px); font-weight:650; margin:0 0 12px; letter-spacing:-.02em;}
.zsa-ff h3 {font-size:19px; font-weight:650; margin:0 0 10px;}
.zsa-ff h4 {font-size:16px; font-weight:650; color:var(--zsa-navy); margin:16px 0 6px;}
.zsa-ff p {margin:10px 0;}
.zsa-ff .zsa-eyebrow {color:var(--ff-teal); margin:0 0 4px;}
.zsa-ff-sr {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.zsa-ff-sprite {position:absolute; width:0; height:0; overflow:hidden;}
.zsa-ff-small {font-size:15px; color:#475569;}
.zsa-ff-strong {font-weight:650; color:var(--zsa-navy);}
.zsa-ff-mono {font-variant-numeric:tabular-nums; font-weight:650; letter-spacing:.04em;}

/* Step chips and the pager */
.zsa-ff-steps {display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:16px 0;}
.zsa-ff-steps ol {display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; flex:1 1 auto;}
.zsa-ff-chip {position:relative; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:2px solid #9fb3c8; border-radius:12px; background:white; color:var(--zsa-navy); font-weight:700; font-size:17px;}
.zsa-ff-chip:hover {background:var(--zsa-sky);}
.zsa-ff-chip[aria-current="step"] {background:var(--zsa-navy); border-color:var(--zsa-navy); color:white;}
.zsa-ff-chip[aria-disabled="true"] {border-style:dashed; color:#64748b; background:#f1f5f9; cursor:not-allowed;}
.zsa-ff-chip-done {position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; background:#15803d; color:white; font-size:12px; line-height:20px; text-align:center; border:2px solid white;}
.zsa-ff-chip-lock {position:absolute; bottom:2px; font-size:12px;}
.zsa-ff .zsa-ff-reset {margin-left:auto; font-size:15px; padding:10px 16px;}
.zsa-ff-card {background:white; border:1px solid var(--ff-line); border-top:6px solid var(--ff-teal); border-radius:16px; padding:22px; box-shadow:0 6px 20px #0b2a5b0d;}
.zsa-ff-pager {display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:16px 0;}
.zsa-ff-pager .zsa-btn--primary {margin-left:auto;}
.zsa-ff-row {display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0;}
.zsa-ff-row .zsa-btn {font-size:16px;}
.zsa-ff .zsa-btn:disabled {opacity:.5;}
.zsa-ff-redo {margin-top:22px; padding-top:14px; border-top:1px dashed var(--ff-line);}
.zsa-ff .zsa-ff-redobtn {font-size:15px; padding:10px 16px;}
.zsa-ff-panel {border:1px solid var(--ff-line); border-radius:14px; padding:16px; margin:18px 0; background:#fbfdff;}
.zsa-ff-panel > summary {cursor:pointer; min-height:44px; padding:10px 0; font-weight:650; color:var(--zsa-navy);}
.zsa-ff-model {margin:8px 0 0; max-width:820px;}
.zsa-ff-model summary {cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; color:var(--zsa-navy);}

/* Choices: native radios inside tappable cards */
.zsa-ff-choices {border:0; margin:14px 0; padding:0; min-width:0;}
.zsa-ff-choices legend {font-weight:650; color:var(--zsa-navy); padding:0; margin-bottom:8px; font-size:17px;}
.zsa-ff-choice {display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px; margin:8px 0; border:2px solid #c3d1e0; border-radius:12px; background:white; cursor:pointer; line-height:1.4;}
.zsa-ff-choice:hover {border-color:#7b93ad; background:#f8fbff;}
.zsa-ff-choice:has(input:checked) {border-color:var(--zsa-navy); background:#eaf1ff; box-shadow:inset 0 0 0 1px var(--zsa-navy);}
.zsa-ff-choice:has(input:disabled) {opacity:.55; cursor:default;}
.zsa-ff-choice input {width:22px; height:22px; flex:0 0 22px; margin:0; accent-color:var(--zsa-navy);}
.zsa-ff-choice--done {border-color:#15803d;}
.zsa-ff-mark {margin-left:auto; color:#15803d; font-weight:700;}
.zsa-ff-choices--compact {display:flex; flex-wrap:wrap; gap:8px; align-items:stretch;}
.zsa-ff-choices--compact legend {flex:0 0 100%;}
.zsa-ff-choices--compact .zsa-ff-choice {margin:0; flex:1 1 140px;}
.zsa-ff-pickers {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px;}
.zsa-ff-pickers--4 {grid-template-columns:repeat(2,minmax(0,1fr));}
.zsa-ff-pickers .zsa-ff-choice {font-size:15px;}

/* Feedback */
.zsa-ff-feedback {display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:2px solid; line-height:1.5; margin:12px 0;}
.zsa-ff-feedback-mark {flex:0 0 26px; height:26px; border-radius:50%; text-align:center; line-height:26px; font-weight:800; color:white;}
.zsa-ff-feedback--good {background:#ecfdf3; border-color:#15803d;}
.zsa-ff-feedback--good .zsa-ff-feedback-mark {background:#15803d;}
.zsa-ff-feedback--retry {background:#fff7ed; border-color:#c2410c;}
.zsa-ff-feedback--retry .zsa-ff-feedback-mark {background:#c2410c;}
.zsa-ff-feedback--info {background:#eef4ff; border-color:#1d4ed8;}
.zsa-ff-feedback--info .zsa-ff-feedback-mark {background:#1d4ed8; font-family:Georgia,serif;}

/* Flies */
.zsa-ff svg {display:block; overflow:visible;}
.zsa-ff-fly {width:110px; height:110px;}
.zsa-ff-fly--small {width:84px; height:84px;}
.zsa-ff-fly--large {width:170px; height:170px;}
.zsa-ff-parents {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; margin:16px 0;}
.zsa-ff-flycard {display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; padding:10px 12px; border:1px solid var(--ff-line); border-radius:14px; background:white; min-width:140px; max-width:220px;}
.zsa-ff-flycard figcaption {display:flex; flex-direction:column; font-size:15px; line-height:1.35; gap:2px;}
.zsa-ff-flycard strong {color:var(--zsa-navy);}
.zsa-ff-times {font-size:30px; font-weight:700; color:#475569; margin:0;}
.zsa-ff-vialbox {margin:16px auto; max-width:520px; text-align:center;}
.zsa-ff-vial {width:100%; height:auto;}
.zsa-ff-vialbox figcaption {margin-top:8px; font-size:16px;}

/* Traits */
.zsa-ff-traitkey {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0;}
.zsa-ff-traitcard {border:1px solid var(--ff-line); border-radius:14px; padding:14px; background:var(--ff-sun-soft);}
.zsa-ff-traitcard ul {list-style:none; margin:0; padding:0;}
.zsa-ff-traitcard li {display:flex; align-items:center; gap:10px; margin:6px 0;}
.zsa-ff-allele {display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border-radius:8px; background:white; border:2px solid #8a6d00; font-weight:800; font-size:19px;}
.zsa-ff-builder {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start;}
.zsa-ff-allelerow {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0;}
.zsa-ff-rowlabel {flex:0 0 100%; font-weight:650; color:var(--zsa-navy); font-size:15px;}
.zsa-ff-allelecard {display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:96px; min-height:96px; padding:8px; border:2px solid #7b93ad; border-radius:14px; background:white; color:var(--ff-ink); line-height:1.25;}
.zsa-ff-allelecard--dom {border-color:#8a6d00; background:var(--ff-sun-soft);}
.zsa-ff-allelecard:hover {box-shadow:0 0 0 3px #c7d6ee;}
.zsa-ff-allele-big {font-size:34px; font-weight:800;}
.zsa-ff-allelecard .zsa-ff-small {font-size:13px;}
.zsa-ff-result {display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; border-radius:14px; background:#eef6f7; border:1px solid #b9d6da;}
.zsa-ff-readout {display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 12px; margin:0; font-size:15px; width:100%;}
.zsa-ff-readout dt {font-weight:650; color:var(--zsa-navy);}
.zsa-ff-readout dd {margin:0;}
.zsa-ff-goals {list-style:none; margin:0; padding:0;}
.zsa-ff-goals li {display:flex; align-items:center; gap:10px; margin:6px 0;}
.zsa-ff-goalmark {flex:0 0 26px; height:26px; border-radius:50%; border:2px solid #7b93ad; text-align:center; line-height:22px; font-weight:800;}
.zsa-ff-goal--done .zsa-ff-goalmark {background:#15803d; border-color:#15803d; color:white;}
.zsa-ff-glossary {margin:8px 0 0;}
.zsa-ff-glossary div {margin:8px 0;}
.zsa-ff-glossary dt {font-weight:700; color:var(--zsa-navy);}
.zsa-ff-glossary dd {margin:0;}

/* Punnett square, tiles and slots */
.zsa-ff-bank {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 14px; padding:10px; border-radius:12px; background:var(--ff-sun-soft); border:1px dashed #b89a2a;}
.zsa-ff-token {min-width:56px; min-height:52px; padding:4px 10px; border:2px solid #8a6d00; border-radius:12px; background:white; color:var(--ff-ink); font-size:22px; font-weight:800; touch-action:none; cursor:grab; user-select:none;}
.zsa-ff-token:hover {background:#fffbea;}
.zsa-ff-token[aria-pressed="true"] {background:var(--zsa-navy); border-color:var(--zsa-navy); color:white; box-shadow:0 0 0 4px #93c5fd;}
.zsa-ff-ghost {position:fixed; z-index:20; transform:translate(-50%,-60%); pointer-events:none; padding:8px 14px; border-radius:12px; background:var(--ff-sun); border:2px solid #8a6d00; font-size:22px; font-weight:800; color:var(--ff-ink); box-shadow:0 8px 18px #0b2a5b33;}
.zsa-ff-grid {display:grid; gap:6px; margin:6px 0; max-width:520px;}
.zsa-ff-grid--2 {grid-template-columns:56px repeat(2,minmax(0,1fr));}
.zsa-ff-grid--4 {grid-template-columns:52px repeat(4,minmax(0,1fr)); max-width:640px; gap:4px;}
.zsa-ff-gridwrap {max-width:100%;}
.zsa-ff-corner {display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; color:#475569; line-height:1.2; border-radius:8px; background:#f1f5f9;}
.zsa-ff-corner span:first-child::after {content:" →";}
.zsa-ff-corner span:last-child::after {content:" ↓";}
.zsa-ff-head {display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:10px; background:#e8f1fb; color:var(--zsa-navy); font-size:24px; font-weight:800;}
.zsa-ff-grid--4 .zsa-ff-head {font-size:17px; padding:3px;}
.zsa-ff-cell {position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; min-height:92px; padding:8px 6px; border:2px solid #9fb3c8; border-radius:12px; background:white;}
.zsa-ff-cell--small {min-height:72px; padding:4px 2px; gap:0; flex-direction:column; border-width:1px;}
.zsa-ff-cell--right {border-color:#15803d; background:#f3fbf6;}
.zsa-ff-cell--wrong {border-color:#c2410c; background:#fff7ed;}
.zsa-ff-cell--solved {flex-direction:column; gap:2px; background:#f7fbff;}
.zsa-ff-cellgeno {font-size:22px; font-weight:800; letter-spacing:.04em;}
.zsa-ff-grid--4 .zsa-ff-cellgeno {font-size:15px;}
.zsa-ff-cellphen {font-size:13px; line-height:1.2; text-align:center; color:#334155;}
.zsa-ff-cellmark {position:absolute; top:2px; right:6px; font-weight:800; font-size:16px;}
.zsa-ff-cell--right .zsa-ff-cellmark {color:#15803d;}
.zsa-ff-cell--wrong .zsa-ff-cellmark {color:#c2410c;}
.zsa-ff-minifly {width:30px; height:30px;}
.zsa-ff-slot {min-width:48px; min-height:48px; border:2px dashed #7b93ad; border-radius:10px; background:#f8fafc; color:var(--ff-ink); font-size:22px; font-weight:800;}
.zsa-ff-slot--gamete {width:100%; min-width:44px; font-size:17px; padding:2px;}
.zsa-ff-slot--full {border-style:solid; border-color:#8a6d00; background:var(--ff-sun-soft);}
.zsa-ff-slot--over {background:#dbeafe; border-color:var(--zsa-blue); border-style:solid;}
.zsa-ff-slot--wrong {border-color:#c2410c;}
.zsa-ff-slot--right {border-color:#15803d;}
.zsa-ff-ifs {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0;}
.zsa-ff-if {border:1px dashed #7b93ad; border-radius:12px; padding:12px; background:white;}
.zsa-ff-if h3 {font-size:17px; margin:0;}
.zsa-ff-if p {margin:6px 0 0; font-size:15px;}

/* Data: table, chart and copy */
.zsa-ff-tablewrap {max-width:100%;}
.zsa-ff-table {border-collapse:collapse; width:100%; font-size:15px; margin:12px 0; font-variant-numeric:tabular-nums;}
.zsa-ff-table caption {text-align:left; font-weight:650; color:var(--zsa-navy); margin-bottom:6px;}
.zsa-ff-table th,.zsa-ff-table td {border-bottom:1px solid var(--ff-line); padding:8px 6px; text-align:left; vertical-align:top;}
.zsa-ff-table thead th {background:#eef4fb; color:var(--zsa-navy); font-size:14px; line-height:1.3;}
.zsa-ff-predrow {background:#fffbea;}
.zsa-ff-charthost {max-width:720px;}
.zsa-ff-chart {width:100%; height:auto;}
.zsa-ff-chart-text {font-family:var(--zsa-font); font-size:13px; fill:#334155;}
.zsa-ff-chart-strong {font-weight:700; fill:var(--zsa-navy);}
.zsa-ff-chart-value {font-family:var(--zsa-font); font-size:13px; font-weight:700;}
.zsa-ff-legend {display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:8px 0 0; padding:0; font-size:15px;}
.zsa-ff-legend li {display:flex; align-items:center; gap:6px;}
.zsa-ff-legend-note {color:#475569;}
.zsa-ff-copytext {white-space:pre-wrap; overflow-wrap:anywhere; tab-size:16; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#f8fafc; border:1px solid var(--ff-line); border-radius:12px; padding:12px; max-height:340px; overflow:auto;}
.zsa-ff-copystatus {font-weight:650; color:#15803d; min-height:1.5em;}
.zsa-ff-starters li {margin:6px 0;}
.zsa-ff-confirm {max-width:460px;}

@media (max-width:820px) {
  .zsa-ff-builder,.zsa-ff-pickers {grid-template-columns:1fr;}
}
@media (max-width:600px) {
  .zsa-ff {font-size:16px;}
  .zsa-ff-card {padding:16px 14px;}
  .zsa-ff-panel {padding:12px 10px;}
  .zsa-ff-traitkey,.zsa-ff-ifs,.zsa-ff-pickers--4 {grid-template-columns:1fr;}
  .zsa-ff-chip {width:44px; height:44px;}
  .zsa-ff .zsa-ff-reset {margin-left:0;}
  .zsa-ff-grid--2 {grid-template-columns:44px repeat(2,minmax(0,1fr)); gap:5px;}
  .zsa-ff-grid--4 {grid-template-columns:40px repeat(4,minmax(0,1fr)); gap:3px;}
  .zsa-ff-grid--4 .zsa-ff-head {font-size:15px;}
  .zsa-ff-grid--4 .zsa-ff-cellgeno {font-size:13px;}
  .zsa-ff-cell {gap:4px; padding:6px 2px;}
  .zsa-ff-flycard {min-width:120px; padding:8px;}
  .zsa-ff-fly {width:88px; height:88px;}
  .zsa-ff-fly--large {width:140px; height:140px;}
  /* Narrow screens: each table row becomes a small card, and each value carries its column name. */
  .zsa-ff-table thead {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
  .zsa-ff-table tbody tr {display:block; border:1px solid var(--ff-line); border-radius:10px; margin-bottom:10px; padding:4px 8px;}
  .zsa-ff-table tbody th,.zsa-ff-table td {display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 0; font-size:15px;}
  .zsa-ff-table td::before {content:attr(data-label); font-weight:600; color:var(--zsa-navy);}
}
@media (forced-colors:active) {
  .zsa-ff-chip[aria-current="step"],.zsa-ff-token[aria-pressed="true"] {outline:3px solid Highlight;}
}