/* /punnett-square-calculator/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

.ps-head .sub{margin-bottom:0.75rem;max-width:62ch}
@media(max-width:519px){.ps-head h1{margin-bottom:0.125rem}.ps-head .sub{font-size:0.9375rem;line-height:1.4;margin-bottom:0.5rem}}

/* phone: the cross, then the square, the ratios and the practice sheet;
   desktop: the square and ratios on the left, the cross and the practice sheet on the right */
.ps-grid{display:grid;gap:0.75rem;grid-template-columns:minmax(0,1fr)}
.ps-col{display:contents}
.ps-controls{order:1}.ps-sqcard{order:2}.ps-rescard{order:3}.ps-practice{order:4}
@media(min-width:960px){
  .ps-grid{grid-template-columns:minmax(0,1.55fr) minmax(20rem,1fr);gap:1rem;align-items:start}
  .ps-col{display:flex;flex-direction:column;gap:1rem;min-width:0}
  .ps-colA{grid-column:1;grid-row:1}
  .ps-colB{grid-column:2;grid-row:1}
}
.ps-card{padding:0.75rem;min-width:0}
@media(min-width:520px){.ps-card{padding:1.125rem}}

.ps-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.5rem}
.ps-secnote{text-transform:none;letter-spacing:0;font-weight:500}
.ps-k{display:block;font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:0.25rem}
.ps-f{display:block;min-width:0}
.ps-h3{font-size:0.9375rem;font-weight:650;margin:0.875rem 0 0.375rem;color:var(--ink)}
.ps-ratio{font-family:var(--mono);font-weight:650;color:var(--accent);margin-left:0.375rem;overflow-wrap:anywhere}
.ps-hint{color:var(--muted);font-size:0.8125rem;line-height:1.5;margin:0.5rem 0 0}
.ps-hint:empty{display:none}
.ps-hint.is-bad{color:var(--bad)}

.ps-controls .modes{margin-bottom:0.625rem}
.ps-controls .modes button{font-size:0.8125rem;padding:0.5rem 0.375rem}
.ps-parents{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0.5rem;align-items:start}
.ps-parent{display:grid;gap:0.375rem;min-width:0}
.ps-parent input{font-family:var(--mono);font-size:1.0625rem;font-weight:600}
.ps-parent select{font-size:0.8125rem;padding:0.4375rem 0.5rem}
.ps-x{align-self:center;margin-top:0.5rem;font-size:1.25rem;color:var(--muted)}
.ps-rh{margin-top:0.625rem}
input[aria-invalid=true]{border-color:var(--bad)}
.ps-msg{margin:0.625rem 0 0;padding:0.625rem 0.75rem;border:1px solid var(--bad);border-left-width:0.25rem;border-radius:0.5rem;color:var(--bad);font-weight:600;font-size:0.875rem;line-height:1.5;overflow-wrap:anywhere}
.ps-msg[hidden]{display:none}
.ps-names{margin-top:0.75rem;font-size:0.875rem}
.ps-names summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ps-namerow{display:grid;grid-template-columns:1.75rem repeat(auto-fit,minmax(5.5rem,1fr));gap:0.375rem;align-items:center;margin-top:0.5rem}
.ps-namerow b{font-family:var(--mono);text-align:center}
.ps-namerow input{padding:0.4375rem 0.5rem;font-size:0.875rem}
.ps-exh{margin-top:0.875rem}
.ps-ex{display:flex;flex-wrap:wrap;gap:0.375rem}
@media(max-width:959px){.ps-ex{flex-wrap:nowrap;overflow-x:auto;padding-bottom:0.25rem;scrollbar-width:thin}.ps-ex .chip{flex:none}}
.ps-ex .chip{font-size:0.8125rem;padding:0.375rem 0.625rem}

/* the square: a real table; cells take a phenotype colour mixed from the series tokens */
.ps-sqwrap{overflow:auto;max-width:100%;border-radius:0.5rem}
.ps-sq{border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums;margin:0 auto}
.ps-sq th,.ps-sq td{border:1px solid var(--line-2);text-align:center;padding:0.375rem;min-width:3.5rem;height:3.25rem;font-size:1rem}
.ps-sq th{background:var(--surface-2);font-weight:700;color:var(--ink)}
.ps-sq td{color:var(--ink);font-weight:550}
table.ps-sq th.ps-corner{background:transparent;border-color:transparent;font-size:0.6875rem;font-weight:500;color:var(--muted);line-height:1.25}
.ps-sq.g4 th,.ps-sq.g4 td{min-width:4.5rem;height:3.25rem;font-size:0.9375rem}
.ps-sq.g8 th,.ps-sq.g8 td{min-width:3.75rem;height:2.5rem;font-size:0.8125rem;padding:0.25rem}
.ps-sq.g16 th,.ps-sq.g16 td{min-width:4.25rem;height:2rem;font-size:0.6875rem;padding:0.125rem 0.25rem}
@media(min-width:520px){.ps-sq.g2 th,.ps-sq.g2 td{min-width:6rem;height:4.5rem;font-size:1.25rem}}
.ps-sq td.carrier{position:relative}
.ps-sq td.carrier::after{content:"";position:absolute;top:0.25rem;right:0.25rem;width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--ink)}
sup{font-size:0.7em;line-height:0}

.ps-c0{background:color-mix(in srgb,var(--s4) 42%,var(--surface))}
.ps-c1{background:color-mix(in srgb,var(--s2) 42%,var(--surface))}
.ps-c2{background:color-mix(in srgb,var(--s1) 42%,var(--surface))}
.ps-c3{background:color-mix(in srgb,var(--s5) 42%,var(--surface))}
.ps-c4{background:color-mix(in srgb,var(--s3) 42%,var(--surface))}
.ps-c5{background:color-mix(in srgb,var(--accent) 42%,var(--surface))}
.ps-c6{background:color-mix(in srgb,var(--s4) 20%,var(--surface))}
.ps-c7{background:color-mix(in srgb,var(--s2) 20%,var(--surface))}
.ps-c8{background:color-mix(in srgb,var(--s1) 20%,var(--surface))}
.ps-c9{background:color-mix(in srgb,var(--s5) 20%,var(--surface))}
.ps-c10{background:color-mix(in srgb,var(--s3) 20%,var(--surface))}
.ps-c11{background:color-mix(in srgb,var(--accent) 20%,var(--surface))}
.ps-c12{background:color-mix(in srgb,var(--s4) 70%,var(--surface))}
.ps-c13{background:color-mix(in srgb,var(--s2) 70%,var(--surface))}
.ps-c14{background:color-mix(in srgb,var(--s1) 70%,var(--surface))}
.ps-c15{background:color-mix(in srgb,var(--s5) 70%,var(--surface))}
.ps-c16{background:color-mix(in srgb,var(--s3) 70%,var(--surface))}
.ps-c17{background:color-mix(in srgb,var(--accent) 70%,var(--surface))}

.ps-legend{list-style:none;margin:0.625rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem;font-size:0.8125rem;color:var(--ink-2)}
.ps-legend li{display:flex;align-items:center;gap:0.375rem;min-width:0;overflow-wrap:anywhere}
.ps-sw{flex:none;width:0.875rem;height:0.875rem;border-radius:0.1875rem;border:1px solid var(--line-2)}
.ps-sw.ps-dotkey{border:0;width:auto;height:auto;font-weight:700;color:var(--ink)}

.ps-bysex{display:grid;gap:0.5rem;margin-bottom:0.25rem}
@media(min-width:620px){.ps-bysex{grid-template-columns:1fr 1fr}}
.ps-sexbox{border:1px solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);padding:0.5rem 0.75rem}
.ps-sexbox b{display:block;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:0.125rem}
.ps-sexbox p{margin:0.125rem 0;font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.ps-sexbox .ps-fr{font-family:var(--mono);font-weight:650}

.ps-tab{width:100%;border-collapse:collapse;font-size:0.875rem;font-variant-numeric:tabular-nums}
.ps-tab th,.ps-tab td{border-bottom:1px solid var(--line);padding:0.3125rem 0.375rem;text-align:left;vertical-align:middle}
.ps-tab th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ps-tab td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.ps-tab th.n{text-align:right}
.ps-tab td.g{font-family:var(--mono);overflow-wrap:anywhere}
.ps-tab td.l{overflow-wrap:anywhere}
.ps-tab .ps-sw{display:inline-block;vertical-align:-0.125rem;margin-right:0.375rem}
.ps-tabwrap{max-height:20rem;overflow-y:auto}

.ps-prob{margin-top:0.875rem;padding:0.625rem 0.75rem;border:1px solid var(--accent);border-radius:0.5rem;background:var(--accent-soft)}
.ps-prob select{font-family:var(--mono);font-size:0.875rem}
.ps-work{margin:0.5rem 0 0;font-family:var(--mono);font-weight:650;font-size:0.9375rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ps-work:empty{display:none}
.ps-work small{display:block;font-weight:500;color:var(--muted);font-size:0.8125rem}

.ps-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.75rem}
.ps-actions .chip{padding:0.4375rem 0.6875rem}
.ps-copybox{margin-top:0.5rem;font-family:var(--mono);font-size:0.75rem;min-height:8rem}
.ps-copybox[hidden]{display:none}

.ps-prrow{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:0.5rem;align-items:end;margin-top:0.625rem}
.ps-prrow .chip{justify-self:start;white-space:nowrap}
@media(min-width:520px) and (max-width:959px){.ps-prrow{grid-template-columns:5rem 9rem auto auto}}
#prSeed{font-family:var(--mono)}
.ps-sheet{margin-top:0.75rem}
.ps-sheet[hidden]{display:none}
.ps-seedline{margin:0 0 0.375rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.ps-sheetlist,.ps-anslist{margin:0;padding-left:1.375rem;font-size:0.9375rem;line-height:1.5}
.ps-sheetlist li,.ps-anslist li{margin:0 0 0.5rem}
.ps-anslist{margin-top:0.75rem;padding-top:0.625rem;border-top:1px solid var(--line)}
.ps-anslist[hidden]{display:none}
.ps-anslist li{font-size:0.875rem;color:var(--ink-2)}

.explainer code{font-family:var(--mono);font-size:0.875em;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}
.explainer .ps-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .ps-cannot li{margin:0 0 0.5rem}
.explainer .ps-cannot b{color:var(--ink-2)}
.ps-src{font-size:0.8125rem;color:var(--muted);overflow-wrap:anywhere}
.ps-printarea{display:none}

.chip:focus-visible,.modes button:focus-visible,.ps-names summary:focus-visible,.ps-card input:focus-visible,.ps-card select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* print: the square and its ratios, or the practice sheet then its answer page; black on white */
@media print{
  body.ps-printing .wrap,body.ps-printing .skip-link{display:none!important}
  body.ps-printing .ps-printarea{display:block!important}
  body{background:#fff!important;color:#000!important}
  .ps-printarea svg{display:block;max-width:100%;height:auto}
  .ps-printarea pre{font-family:var(--mono);font-size:9.5pt;white-space:pre-wrap;color:#000}
  .ps-printarea h1{font-size:15pt;margin:0 0 0.2cm;color:#000}
  .ps-printarea .ps-seedline{color:#000}
  .ps-printarea ol{font-size:11pt;line-height:1.45;color:#000}
  .ps-printarea .ps-sheetlist li{margin-bottom:2.2cm;break-inside:avoid}
  .ps-printarea .ps-pagebreak{break-before:page}
}