/* design-control view: labelled cards (one parameter each) that stay readable at phone width. Uses app.css tokens, defines no global rule. */
.dc .dc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:12px;margin:10px 0}
.dc .dc-card{border:1px solid var(--line,#ddd3c0);border-radius:10px;padding:10px 12px;background:var(--paper,#fffdf8);min-width:0}
.dc .dc-card h3{margin:0 0 2px;font-size:1rem}
.dc .dc-card dl{margin:6px 0 0}
.dc .dc-f{padding:6px 0;border-top:1px solid var(--line,#ddd3c0);font-size:.88rem}
.dc .dc-f dt{font:700 .72rem var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.05em;color:var(--dim,#3e4f63)}
.dc .dc-f dd{margin:2px 0 0;overflow-wrap:anywhere}
.dc .dc-layer{margin:14px 0;border-top:2px solid var(--line,#ddd3c0);padding-top:8px}
.dc .dc-layer>summary{cursor:pointer;font-size:1.02rem}
.dc .chip[data-bound]{display:inline-block;padding:1px 9px;border-radius:99px;font:700 .72rem var(--sans,system-ui,sans-serif);border:1px solid var(--line,#ddd3c0)}
.dc .dc-measured{background:#e8efe0;border-color:#5b7a0f;color:#3d5509}
.dc .dc-assumed{background:#fdf0d8;border-color:#c99a2e;color:#6b4b00}
.dc .dc-sourced{background:#e5ecf6;border-color:#5b7fb0;color:#23406d}
.dc .dc-unknown,.dc .dc-unsupported{background:#eee;border-color:#999;color:#333}
.dc .dc-sources li{margin:.4em 0;overflow-wrap:anywhere}
.dc ul{padding-left:1.1em}

/* Genotype panel: counts, node chain, interface cards. Wraps at phone width; tables scroll in their own box. */
.gcounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:10px 0}.gcount{border:1px solid var(--line,#cfd8e3);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0}.gcount b{font-size:1.5rem;line-height:1.1}.gcount small{color:#5b6b7d;overflow-wrap:anywhere}
.gnodes{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:4px;align-items:center}.gnodes li{display:flex;align-items:center;gap:4px}.gnode{border:1px solid #9fb3c8;border-radius:999px;padding:2px 10px;font-size:.85rem;background:#f3f7fb}.garrow{color:#5b6b7d}
.gif{border:1px solid var(--line,#cfd8e3);border-radius:8px;padding:6px 10px;margin:6px 0}.gif summary{cursor:pointer;overflow-wrap:anywhere}.gslice h4{margin:.6em 0 .2em}.gslot{display:inline-block;margin-right:8px}
.gtwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}.gtwo .card{min-width:0}.gctx{margin:0;padding-left:1em}.genotype code{overflow-wrap:anywhere}
.gslice h3{font-size:1rem;margin:.7em 0 .3em}