/* Monitor and Genomes pages, their SVG charts and graphs (B3, docs/design_infra-v2-phase5b.md
   §5.6, §5.7). Colours by class only (CSP style-src 'self'); the SVGs scale to the width through
   their viewBox (§5.10). */

:root {
  --pos: #2f6fd1;
  --neg: #d1553f;
  --violet: #7a4fd1;
  --good: var(--ok);
  --bad: var(--err);
  --warnc: #b07800;
  --fam0: #f29959; --fam1: #66ccf2; --fam2: #8ce673; --fam3: #f2d159;
  --fam4: #e085eb; --fam5: #739efa; --fam6: #f77899; --fam7: #99ebd1;
}
@media (prefers-color-scheme: dark) {
  :root { --pos: #7aa7ff; --neg: #ff8a73; --violet: #b49bff; --warnc: #ffcf5c; }
}

.crumbs { margin: 0.4rem 0 0; font-size: 0.9em; }
.small { font-size: 0.85em; }
.nowrap { white-space: nowrap; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warnc); }
.violet { color: var(--violet); }
.note { background: var(--warn-bg); color: var(--warn-fg); padding: 6px 10px; border-radius: 6px; }
.warning { color: var(--warnc); margin: 4px 0; }
.warning.bad { color: var(--bad); font-weight: 600; }
.pre { white-space: pre-wrap; }
.err { color: var(--err); }

/* GET filters: inline fields */
form.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 0 0 12px; }
form.filters label { margin: 0; min-width: 12rem; }
form.filters button { min-height: 40px; }

/* Folds outside the polled regions */
details.fold { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 0 0 10px; }
details.fold > summary { cursor: pointer; min-height: 32px; padding: 4px 0; color: var(--dim); }
details.fold[open] > summary { margin-bottom: 6px; }
details.glossary dt { font-weight: 600; margin-top: 8px; }
details.glossary dd { margin: 2px 0 0; color: var(--dim); }

/* The status in words (§18.6): a flow's at the top of its page, a run's at the top of its card */
.glance { border-left: 4px solid var(--line); padding: 2px 0 2px 12px; margin: 0 0 12px; }
.glance.tone-good, .glance.tone-done { border-left-color: var(--good); }
.glance.tone-warn { border-left-color: var(--warnc); }
.glance.tone-bad { border-left-color: var(--bad); }
.glance.tone-wait { border-left-color: var(--dim); border-left-style: dashed; }
.glance p { margin: 4px 0; }
.glance .headline { font-size: 1.12rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.glance .mark { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; }
.tone-good > .mark, .tone-done > .mark, .tone-good > .headline .mark, .tone-done > .headline .mark { color: var(--good); }
.tone-warn > .mark, .tone-warn > .headline .mark { color: var(--warnc); }
.tone-bad > .mark, .tone-bad > .headline .mark { color: var(--bad); }
.tone-wait > .mark, .tone-wait > .headline .mark, .tone-idle > .mark { color: var(--dim); }
.glance .health b { font-weight: 700; }
.glance .health.tone-warn b, .word.tone-warn { color: var(--warnc); }
.glance .health.tone-bad b, .word.tone-bad { color: var(--bad); }
.glance .health.tone-good b, .glance .health.tone-done b { color: var(--good); }
.word { font-weight: 600; font-size: 0.9em; color: var(--dim); }
.glance ul.running { list-style: none; padding: 0; margin: 4px 0 6px; }
.glance ul.running li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 0; }
svg.bar { width: 8rem; height: 8px; display: inline-block; vertical-align: middle; }
svg.bar .track { fill: var(--line); }
svg.bar .fill { fill: var(--accent); }
.meta { color: var(--dim); margin: -6px 0 10px; }
.flowcard .steer { margin: 6px 0 10px; }

/* Details folds and their record */
details.details { margin-top: 12px; }
details.details > summary { color: var(--fg); }
details.details h3 { font-size: 1rem; margin: 14px 0 6px; }
dl.record { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 6px 18px; margin: 4px 0 10px; }
dl.record dt { color: var(--dim); font-size: 0.8em; }
dl.record dd { margin: 0; overflow-wrap: anywhere; }
dl.record .wide { grid-column: 1 / -1; }
.score .big { font-size: 1.6em; font-weight: 700; }
ul.breakdown { margin: 0 0 8px; padding-left: 1.1rem; color: var(--dim); font-size: 0.9em; }

/* The lineage graph (§18.6): boxes by depth, seeds in root bands, lines parent → child. It scrolls
   sideways inside its own box (the poll region inside it is replaced, the box and its scroll stay). */
ul.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0; margin: 0 0 10px; font-size: 0.85em; }
ul.legend .key { display: inline-block; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 5px; background: var(--card); white-space: nowrap; }
ul.legend .key i { font-style: normal; color: var(--dim); }
ul.legend .key.st-passed { border-left-color: var(--good); }
ul.legend .key.st-failed { border-left-color: var(--bad); }
ul.legend .key.st-running { border-left-color: var(--accent); }
ul.legend .key.st-waiting { border-left-color: var(--dim); border-style: dashed; }
ul.legend .key.st-in-line { border-left-color: var(--accent); border-style: dotted; }
ul.legend .key.st-interrupted { border-left-color: var(--warnc); }
ul.legend .key.pk { border: 2px solid var(--accent); }
ul.legend .key.carry { border: 2px solid var(--carry); border-left-width: 4px; color: var(--carry); font-weight: 600; white-space: normal; }
ul.legend .key.carry i { color: var(--dim); font-weight: 400; }
div.ln-box { overflow-x: auto; overflow-y: hidden; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
div.ln-box > .poll { width: max-content; }
svg.lineage { display: block; max-width: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
svg.lineage .ln-node .frame { fill: var(--card); stroke: var(--line); stroke-width: 1.2; }
svg.lineage .ln-node.s-done .frame { stroke: var(--good); }
svg.lineage .ln-node.s-running .frame { stroke: var(--accent); stroke-width: 1.8; }
svg.lineage .ln-node.s-failed .frame { stroke: var(--bad); }
svg.lineage .ln-node.s-waiting .frame { stroke: var(--dim); stroke-dasharray: 5 3; }
svg.lineage .ln-node.k-origin .frame { fill: var(--bg); stroke: var(--line); stroke-dasharray: 3 3; }
svg.lineage .ln-node.k-asm .frame { stroke-dasharray: 5 3; }
svg.lineage .ln-node.k-asm.s-idle .frame { stroke: var(--violet); }
svg.lineage .hd { font-size: 13px; font-weight: 700; fill: var(--fg); }
svg.lineage .ln-node a .hd { fill: var(--accent); text-decoration: underline; }
svg.lineage .mk { font-size: 13px; font-weight: 700; text-anchor: end; fill: var(--dim); }
svg.lineage .s-done .mk { fill: var(--good); }
svg.lineage .s-running .mk { fill: var(--accent); }
svg.lineage .s-failed .mk { fill: var(--bad); }
svg.lineage .sub { font-size: 11px; fill: var(--dim); }
svg.lineage .ln-node .track { fill: var(--line); }
svg.lineage .ln-node .fill { fill: var(--good); }
svg.lineage .ln-wire { fill: none; stroke: var(--dim); stroke-opacity: 0.45; stroke-width: 1.5; stroke-dasharray: 2 4; }
svg.lineage .ln-edge { fill: none; stroke: var(--dim); stroke-width: 1.6; opacity: 0.8; pointer-events: none; transition: opacity 0.12s; }
svg.lineage .ln-edge.e-passed { stroke: var(--good); }
svg.lineage .ln-edge.e-failed { stroke: var(--bad); opacity: 0.55; }
svg.lineage .ln-edge.e-running { stroke: var(--accent); }
svg.lineage .ln-edge.e-waiting { stroke: var(--dim); stroke-dasharray: 4 3; }
svg.lineage .ln-edge.e-in-line { stroke: var(--accent); stroke-dasharray: 2 3; }
svg.lineage .ln-edge.e-interrupted { stroke: var(--warnc); stroke-dasharray: 4 3; }
svg.lineage .ln-edge.e-asm { stroke: var(--violet); }
svg.lineage .ln-edge.e-asm.later { stroke-dasharray: 3 4; opacity: 0.5; }
svg.lineage .ln-edge.pk { stroke-width: 3.2; opacity: 1; }
svg.lineage .ln-edge.from-root { stroke: var(--dim); stroke-width: 1; opacity: 0.4; }
svg.lineage .ln-edge.from-root.pk { stroke: var(--accent); stroke-width: 2.4; opacity: 1; }
/* A carried lineage (D8): its lines orange, solid, whatever the child's state; a ring round each
   seed, outside the chip, so the state tab, mark and the pick's fill stay as they are. */
svg.lineage .ln-edge.carry { stroke: var(--carry); stroke-dasharray: none; opacity: 0.95; }
svg.lineage .ln-seed .ring { fill: none; stroke: var(--carry); stroke-width: 2; }
svg.lineage .ln-seed { cursor: pointer; transition: opacity 0.12s; }
svg.lineage g.ln-seed { cursor: default; }
svg.lineage .ln-seed .chip { fill: var(--card); stroke: var(--line); stroke-width: 1; }
svg.lineage .ln-seed .tab { fill: var(--dim); }
svg.lineage .ln-seed .m { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--dim); }
svg.lineage .ln-seed .l { font-size: 12px; font-weight: 600; fill: var(--fg); font-family: var(--mono); }
svg.lineage .ln-seed .d { font-size: 11px; text-anchor: end; fill: var(--dim); }
svg.lineage .ln-seed .prog { fill: var(--accent); opacity: 0.6; }
svg.lineage .st-passed .tab, svg.lineage .st-passed .m { fill: var(--good); }
svg.lineage .st-failed .tab, svg.lineage .st-failed .m { fill: var(--bad); }
svg.lineage .st-failed .d { fill: var(--bad); }
svg.lineage .st-running .tab, svg.lineage .st-running .m, svg.lineage .st-running .d { fill: var(--accent); }
svg.lineage .st-running .chip { stroke: var(--accent); }
svg.lineage .st-waiting .chip { stroke: var(--dim); stroke-dasharray: 3 2; fill: var(--bg); }
svg.lineage .st-waiting .l { fill: var(--dim); }
svg.lineage .st-in-line .tab, svg.lineage .st-in-line .m, svg.lineage .st-in-line .d { fill: var(--accent); }
svg.lineage .st-in-line .chip { stroke: var(--accent); stroke-dasharray: 2 2; }
svg.lineage .st-interrupted .tab, svg.lineage .st-interrupted .m { fill: var(--warnc); }
svg.lineage .st-parent .tab, svg.lineage .st-parent .m { fill: var(--violet); }
svg.lineage .st-root .chip { fill: none; stroke: none; }
svg.lineage .st-root .l { fill: var(--dim); font-weight: 400; font-size: 11px; }
svg.lineage .ln-seed.pk .chip { stroke: var(--accent); stroke-width: 2; }
svg.lineage .ln-seed.st-root.pk .l { fill: var(--accent); font-weight: 700; }
svg.lineage .ln-seed.picked .chip { fill: var(--accent); stroke: var(--accent); }
svg.lineage .ln-seed.picked .tab { fill: var(--card); }
svg.lineage .ln-seed.picked :is(.l, .d, .m) { fill: var(--card); }
svg.lineage a.ln-seed:hover .chip { stroke: var(--accent); stroke-width: 2; }
svg.lineage a.ln-seed:focus { outline: none; }
svg.lineage a.ln-seed:focus-visible .chip { stroke: var(--fg); stroke-width: 2.5; }
@keyframes ln-pulse { 50% { opacity: 0.3; } }
svg.lineage .st-running .m { animation: ln-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { svg.lineage .st-running .m { animation: none; } }
/* Hover or keyboard focus lights a seed's lineage: the groups that hold the seed are its ancestors
   (their own seed and line in), its own group holds its descendants (all of it). */
svg.lineage:has(.ln-seed:is(:hover, :focus-visible)) .ln-seed { opacity: 0.28; }
svg.lineage:has(.ln-seed:is(:hover, :focus-visible)) .ln-edge { opacity: 0.08; }
svg.lineage .ln-sub:has(.ln-seed:is(:hover, :focus-visible)) > :is(.ln-seed, .ln-edge.in),
svg.lineage .ln-sub:has(> .ln-seed:is(:hover, :focus-visible)) :is(.ln-seed, .ln-edge) { opacity: 1; }
svg.lineage .ln-sub:has(.ln-seed:is(:hover, :focus-visible)) > .ln-edge.in,
svg.lineage .ln-sub:has(> .ln-seed:is(:hover, :focus-visible)) .ln-edge { stroke-width: 3.2; }

/* The run's tiles */
section.group h4 { margin: 10px 0 4px; font-size: 0.95em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--bg); }
.tile .t { display: block; color: var(--dim); font-size: 0.82em; }
.tile .v { display: block; font-size: 1.25em; font-weight: 600; }
.tile .d { display: block; color: var(--dim); font-size: 0.8em; }
.tile svg.spark { display: block; width: 100%; height: 22px; margin-top: 4px; }
svg.spark .line, svg.spark .gate { vector-effect: non-scaling-stroke; }

/* Charts: small multiples */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px; }
figure.chart { margin: 0; }
figure.chart figcaption { font-size: 0.82em; color: var(--dim); display: flex; justify-content: space-between; gap: 6px; }
figure.chart figcaption .v { color: var(--fg); font-weight: 600; }
figure.chart svg { width: 100%; height: auto; display: block; }
svg .frame { fill: none; stroke: var(--line); }
svg .line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
svg .gate { stroke: var(--warnc); stroke-dasharray: 4 3; stroke-width: 1; }
svg .mark { stroke: var(--dim); stroke-width: 1; }
svg .axis { fill: var(--dim); font-size: 8px; font-family: system-ui, sans-serif; }
svg .hit { fill: transparent; }
svg .hit:hover { fill: var(--line); fill-opacity: 0.35; }

/* The goal row (§18.9): one chart, its reading list beside it as the legend. Lines: accent, dim,
   dim dotted (identity never by colour alone); the reference stays the gate's dashed line. */
.goalbody { display: grid; grid-template-columns: minmax(0, 30rem) minmax(12rem, 1fr); gap: 6px 16px; align-items: start; }
.goalbody figure.chart { max-width: 30rem; }
.goalbody p.noplot { margin: 4px 0; }
svg .line.l2 { stroke: var(--dim); }
svg .line.l3 { stroke: var(--dim); stroke-dasharray: 1 3; stroke-linecap: round; }
ul.reading { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.9em; }
ul.reading li { padding: 2px 0; }
ul.reading li.beside { margin-top: 4px; }
.sw { display: inline-block; width: 1.6em; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--accent); }
.sw.l2 { border-top-color: var(--dim); }
.sw.l3 { border-top: 3px dotted var(--dim); }
.sw.ref { border-top: 2px dashed var(--warnc); }

/* The Life hall */
.pill { display: inline-block; padding: 0 8px; border: 1px solid var(--dim); border-radius: 9px; font-size: 0.8em; color: var(--dim); }
svg.standing { width: 70px; height: 14px; vertical-align: middle; }
svg.standing .track { fill: var(--line); }
svg.standing .bar.good { fill: var(--good); }
svg.standing .bar.warn { fill: var(--warnc); }
svg.standing .whisker { stroke: var(--fg); stroke-width: 1; }
svg.standing .one { stroke: var(--dim); stroke-width: 1.5; }
.fam { font-weight: 600; }
.fam.f0 { color: var(--fam0); } .fam.f1 { color: var(--fam1); } .fam.f2 { color: var(--fam2); } .fam.f3 { color: var(--fam3); }
.fam.f4 { color: var(--fam4); } .fam.f5 { color: var(--fam5); } .fam.f6 { color: var(--fam6); } .fam.f7 { color: var(--fam7); }
.life { margin-right: 10px; white-space: nowrap; }
ul.others { list-style: none; padding: 0; margin: 0 0 8px; }
ul.others li { padding: 3px 0; border-bottom: 1px solid var(--line); }
ul.others li > * { margin-right: 8px; }

/* Log tail */
pre.log { max-height: 32rem; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; margin: 0; white-space: pre; font-size: 0.82em; }

/* Gate rows */
ul.gate { list-style: none; padding: 0; margin: 4px 0 8px; }
ul.gate li { padding: 2px 0; }

/* Genomes */
tr.live td { font-weight: 600; }
.badge.hall, .badge.s-live { background: #ece3ff; color: #4b2a99; }
.badge.s-assembly { background: #dff3e4; color: #145a2a; }
.badge.s-attempt { background: #d8ecff; color: #0b3f7a; }
dl.identity { display: flex; flex-wrap: wrap; gap: 6px 22px; }
dl.identity dt { color: var(--dim); font-size: 0.8em; }
dl.identity dd { margin: 0; }
p.pager { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
p.pager a { min-height: 40px; display: inline-flex; align-items: center; }

/* CPPN graphs and the body */
svg.cppn { width: 100%; height: auto; display: block; background: var(--bg); border-radius: 6px; }
svg.cppn .edge.pos { stroke: var(--pos); }
svg.cppn .edge.neg { stroke: var(--neg); }
svg.cppn .edge.off { stroke-dasharray: 3 3; }
svg.cppn .node { stroke: var(--card); stroke-width: 1; }
svg.cppn .node.in { fill: #59b8e0; }
svg.cppn .node.out { fill: #e0a24d; }
svg.cppn .node.hid { fill: var(--dim); }
.cppn-caption { margin: 2px 0 4px; font-size: 0.85em; }
figure.silhouette { margin: 0; }
figure.silhouette svg { width: 100%; max-height: 28rem; display: block; background: var(--bg); border-radius: 6px; }
svg .flesh { fill: var(--accent); fill-opacity: 0.18; stroke: var(--accent); stroke-width: 1.2; }
svg .flesh.limb { fill-opacity: 0.12; }
svg .bone { stroke: var(--fg); stroke-width: 1.2; stroke-opacity: 0.7; }
svg .bone.limb { stroke-opacity: 0.45; }
svg .cone { stroke-width: 0.8; fill-opacity: 0.12; }
svg .cone.sight { fill: var(--pos); stroke: var(--pos); }
svg .cone.smell { fill: var(--violet); stroke: var(--violet); }
svg .mouth { fill: var(--neg); stroke: var(--card); stroke-width: 1; }

@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts { grid-template-columns: 1fr; }
  .goalbody { grid-template-columns: minmax(0, 1fr); }
  form.filters label { min-width: 0; flex: 1 1 100%; }
  svg.bar { width: 6rem; }
}