/* Life Sciences worksheet diagrams (templates/classdoodle_biology.html).
   Reuses the paper tokens from classdoodle-paper.css. */

.bio-svg {
  display: block; width: 100%; max-width: 620px; height: auto; margin: 0 0 .6rem;
  border: 1px solid var(--sheet-edge, #e6e0d1); border-radius: 6px;
  background-color: #fcfdfb;
  background-image:
    linear-gradient(var(--grid-bold, rgba(43,118,140,.24)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold, rgba(43,118,140,.24)) 1px, transparent 1px),
    linear-gradient(var(--grid-fine, rgba(43,118,140,.1)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine, rgba(43,118,140,.1)) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
}
.bio-svg text { font-family: var(--clean, Inter, sans-serif); fill: #1f2937; paint-order: stroke; stroke: #fcfdfb; stroke-width: 3px; stroke-linejoin: round; }

/* Process boxes */
.bio-box rect { fill: #fffdf8; stroke: var(--ink-blue, #1d4ed8); stroke-width: 1.8; }
.bio-box .bio-letter { font: 700 17px var(--hand, cursive); fill: var(--teacher-red, #c2321f); }
.bio-box .bio-text { font-size: 12.5px; font-weight: 600; }
.bio-arrow, .bio-feedback path { fill: none; stroke: var(--ink-blue, #1d4ed8); stroke-width: 2; stroke-linecap: round; }
.bio-svg marker path { fill: var(--ink-blue, #1d4ed8); }
.bio-feedback path { stroke: var(--teacher-red, #c2321f); stroke-dasharray: 6 5; }
.bio-feedback rect.bio-feedback-label { fill: #fff8f5; stroke: rgba(194, 50, 31, .45); stroke-width: 1; }
.bio-feedback text { font: 700 12.5px var(--hand, cursive); fill: var(--teacher-red, #c2321f); }
.bio-region rect { fill: rgba(201, 243, 223, .38); stroke: rgba(43, 118, 104, .45); stroke-dasharray: 4 4; }
.bio-region text { font: 700 13px var(--hand, cursive); fill: #2b7668; }

/* Labels stay hidden until checked correct or revealed - only once JS runs. */
.bio-js .bio-box:not(.bio-named) .bio-text { visibility: hidden; }
.bio-js .bio-box:not(.bio-named) .bio-letter { font-size: 26px; }
.bio-box.bio-named rect { fill: #eefaf3; }

/* Pedigree */
.pedigree .ped-person rect, .pedigree .ped-person circle { fill: #fffdf8; stroke: #1f2937; stroke-width: 2; }
.pedigree .ped-person.affected rect, .pedigree .ped-person.affected circle { fill: #1f2937; }
.pedigree .ped-line { fill: none; stroke: #1f2937; stroke-width: 2; }
.pedigree .ped-gen { font: 700 15px var(--hand, cursive); fill: var(--ink-blue, #1d4ed8); }
.pedigree .ped-id { font-size: 12px; fill: var(--pencil, #4b5563); }
.ped-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem; font-size: .82rem; color: var(--pencil, #4b5563); }
.ped-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.ped-legend i { display: inline-block; width: 14px; height: 14px; border: 2px solid #1f2937; background: #fffdf8; }
.ped-legend i.ci { border-radius: 50%; }
.ped-legend i.on { background: #1f2937; }

/* Shared answer slots */
.bio-labels, .bio-strand { margin: .4rem 0 1rem; }
.bio-instr { margin: .2rem 0 .7rem; font-weight: 600; }
.bio-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bio-slots li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 1.6rem; align-items: center; gap: .5rem; }
.bio-slots label b { font: 700 1.15rem var(--hand, cursive); color: var(--teacher-red, #c2321f); }
.bio-slots select, .cross-in, .base-in {
  min-height: 42px; width: 100%; padding: .45rem .6rem; border: 1px solid #b9c4bf; border-radius: 6px;
  background: #fff; font: 600 1rem var(--clean, sans-serif); color: #1f2937;
}
.bio-slots select { text-overflow: ellipsis; }
.bio-mark { font: 700 1.2rem var(--hand, cursive); text-align: center; }
.is-right { border-color: #2f8f5b !important; background: #f0faf4 !important; }
.is-wrong { border-color: var(--teacher-red, #c2321f) !important; background: #fff4f1 !important; }
.bio-mark.ok { color: #2f8f5b; }
.bio-mark.no { color: var(--teacher-red, #c2321f); }
.bio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .8rem; }
.bio-link { border: 0; background: none; padding: .4rem 0; color: #216b5d; font: 700 .9rem inherit; text-decoration: underline; cursor: pointer; }
.bio-status { font-weight: 600; color: var(--pencil, #4b5563); }
.bio-status.good { color: #2f8f5b; }
.bio-js .bio-key { display: none; }
.bio-key { margin-top: .8rem; font-size: .9rem; }
.bio-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--pencil, #4b5563); }

/* Genetic cross */
.cross-parents { display: grid; gap: .3rem; margin: 0 0 .8rem; padding: .8rem 1rem; border-left: 3px solid var(--ink-blue, #1d4ed8); background: #f6f8ff; }
.cross-parents p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0; }
.cross-parents span { min-width: 7.5rem; font: 700 .72rem monospace; letter-spacing: .08em; text-transform: uppercase; color: #2b7668; }
.cross-parents b { color: var(--teacher-red, #c2321f); }
.cross-parents .geno { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; }
.cross-step { margin: 0 0 .6rem; font: 400 1rem var(--hand, cursive); color: var(--ink-blue, #1d4ed8); }
.cross-scroll { max-width: 100%; overflow-x: auto; }
.cross-grid { border-collapse: collapse; background: #fcfdfb; }
.cross-grid th, .cross-grid td { border: 2px solid #1f2937; padding: .45rem; text-align: center; vertical-align: top; min-width: 6.5rem; }
.cross-grid thead th, .cross-grid tbody th { background: #f6f8ff; }
.cross-corner { font: 700 .72rem monospace; letter-spacing: .08em; text-transform: uppercase; color: #2b7668; }
.cross-in { text-align: center; font-family: ui-monospace, Consolas, monospace; }
.cross-pheno { display: block; min-height: 1.2em; margin-top: .3rem; font: 400 .85rem/1.25 var(--hand, cursive); color: var(--ink-blue, #1d4ed8); }

/* Transcription strip */
.strand-rows { display: grid; gap: .5rem; overflow-x: auto; }
.strand-row { display: flex; align-items: center; gap: .6rem; }
.strand-name { min-width: 6.5rem; font: 700 .72rem monospace; letter-spacing: .08em; text-transform: uppercase; color: #2b7668; }
.codon { display: inline-flex; gap: 3px; padding: 3px; border: 1px dashed #9ca3af; border-radius: 6px; }
.codon b, .base-in { display: inline-grid; place-items: center; width: 2.4rem; min-height: 2.4rem; padding: 0; text-align: center; font: 700 1.05rem ui-monospace, Consolas, monospace; text-transform: uppercase; }
.codon b { border-radius: 4px; background: #eef2f7; }

@media (max-width: 520px) {
  .bio-slots li { grid-template-columns: 2rem minmax(0, 1fr) 1.4rem; }
  .cross-grid th, .cross-grid td { min-width: 4.6rem; padding: .3rem; }
  .codon b, .base-in { width: 2rem; min-height: 2.2rem; }
  .strand-name { min-width: 4.6rem; }
}
@media print {
  .bio-actions, .bio-hint { display: none !important; }
  .bio-js .bio-key { display: block; }
}