/* Workstation chrome: dense, flat, hairline-ruled. Colour is reserved for
   meaning - olive-brass is caution, red is deleted sequence, green is a
   confirmed call - so nothing decorative competes with the data. */
:root{
  --bg:#EEF0F3;
  --panel:#FFFFFF;
  --panel-2:#F6F7F9;
  --ink:#14181F;
  --ink-2:#48505E;
  --ink-3:#7C8695;
  --line:#DCE0E6;
  --line-2:#C3C9D2;
  --sel:#14181F;
  --sel-ink:#FFFFFF;
  --amber:#7A5B0E;          /* caution: olive-brass, not terracotta */
  --amber-bg:#FBF0D2;
  --red:#9A2323;
  --red-bg:#FADEDC;
  --green:#1B5E3F;
  --green-bg:#D8EEE0;
  --blue:#26467F;
  --blue-bg:#DCE7F8;
  --accent:#26467F;         /* the one hue the interface belongs to */
  --accent-soft:#DCE7F8;
  --alpha:#1B5E3F;          /* chr16 */
  --beta:#5B3A86;           /* chr11 */
  --hover:#F2F4F7;      /* row hover */
  --sel-soft:#DCE7F8;   /* the row you were sent to */
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rail:268px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1114; --panel:#171B21; --panel-2:#1E232B;
    --ink:#E6EAF0; --ink-2:#A7B0BE; --ink-3:#78828F;
    --line:#272D36; --line-2:#39414D;
    --sel:#E6EAF0; --sel-ink:#12161B;
    --amber:#E3C579; --amber-bg:#33291A;
    --red:#F09B9B; --red-bg:#3A2222;
    --green:#82D0A8; --green-bg:#17301F;
    --blue:#9CBAF0; --blue-bg:#1B2740;
    --accent:#9CBAF0; --accent-soft:#1B2740;
    --alpha:#82D0A8; --beta:#C6A6EE;
    --hover:#1E232B; --sel-soft:#20304A;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1114; --panel:#171B21; --panel-2:#1E232B;
  --ink:#E6EAF0; --ink-2:#A7B0BE; --ink-3:#78828F;
  --line:#272D36; --line-2:#39414D;
  --sel:#E6EAF0; --sel-ink:#12161B;
  --amber:#E3C579; --amber-bg:#33291A;
  --red:#F09B9B; --red-bg:#3A2222;
  --green:#82D0A8; --green-bg:#17301F;
  --blue:#9CBAF0; --blue-bg:#1B2740;
  --accent:#9CBAF0; --accent-soft:#1B2740;
  --alpha:#82D0A8; --beta:#C6A6EE;
  --hover:#1E232B; --sel-soft:#20304A;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}

/* ---------------------------------------------------------------- shell */
.app{display:grid;grid-template-rows:auto 1fr;height:100%}

.topbar{
  display:flex;align-items:center;gap:14px;
  padding:0 14px;height:44px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.brand small{color:var(--ink-3);font-weight:400;margin-left:7px}
.topbar .spacer{flex:1}
.topbar .ctx{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  display:flex;gap:14px;align-items:center;overflow:hidden}
.topbar .ctx b{color:var(--ink)}

.body{display:grid;grid-template-columns:var(--rail) 1fr;min-height:0}
.rail{
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.main{min-width:0;min-height:0;overflow:auto;padding:14px}

/* ---------------------------------------------------------------- rail */
.rail h2{
  margin:0;padding:11px 13px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.dropzone{
  margin:0 11px 10px;padding:16px 12px;text-align:center;cursor:pointer;
  border:1px dashed var(--line-2);border-radius:3px;background:var(--panel-2);
  transition:.12s;
}
.dropzone:hover,.dropzone.hot{border-color:var(--ink);background:var(--bg)}
.dropzone b{display:block;font-size:12.5px}
.dropzone span{color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.railform{padding:0 11px 11px;display:flex;flex-direction:column;gap:7px}
.runlist{flex:1;overflow:auto;border-top:1px solid var(--line)}
/* One line per run. The allele is what distinguishes them, so it sits on the
   line; the status chip appears only when a run is not simply done, because
   fifteen identical "done" chips is noise standing where information should be. */
/* Two lines per run: the name, then what it is and when. The allele goes on
   its own line because at rail width it competes with the name and truncates
   it, and a truncated identifier is worse than a second line. The status chip
   shows only when a run is not simply done - fifteen identical "done" chips is
   noise standing where information should be. */
.run{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:2px 7px;align-items:baseline;
  padding:4px 8px 5px;cursor:pointer;border-radius:4px;
  transition:background .1s;line-height:1.25;
}
.run:hover{background:var(--hover)}
.run.active{background:var(--sel);color:var(--sel-ink)}
.run.active .rico{color:var(--sel-ink);opacity:.7}
.run.active .sub b{color:inherit}
.run.active .sub i{color:inherit;opacity:.65}
.run .name{font-family:var(--mono);font-size:12px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run .sub{grid-column:3/-1;display:flex;align-items:baseline;gap:8px;
  min-width:0;font-size:10.5px}
.run .sub b{font-family:var(--mono);font-weight:500;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run .sub i{font-style:normal;color:var(--ink-3);margin-left:auto;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.run input[type=checkbox]{margin:0;grid-row:1/3;align-self:center;
  width:13px;height:13px;visibility:hidden}
.run:hover input[type=checkbox],.run input[type=checkbox]:checked,
.run input[type=checkbox]:focus-visible,
#runlist.picking .run input[type=checkbox]{visibility:visible}
/* The leaf mark. A tree where only the folders carry a glyph reads as a list
   with headings; the row needs its own to read as an item in a tree. */
.run .rico{grid-row:1/3;align-self:center;color:var(--ink-3);line-height:0}
.run .rico .ic{width:13px;height:13px}
.run.active .rico{color:inherit;opacity:.75}
.fico{display:grid;place-items:center;color:var(--ink-3)}
.fico svg{width:14px;height:14px}
.fico .ic{width:14px;height:14px}
.fgroup.bin .fico{color:var(--ink-3)}
.run.arch{opacity:.55}

/* -------------------------------------------------------------- widgets */
input[type=text]{
  width:100%;padding:6px 8px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel);font-family:var(--mono);font-size:12px;
}
input[type=text]:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;
}
.btn{
  padding:6px 11px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel);cursor:pointer;font-size:12px;transition:.12s;
  white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--ink);}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover:not(:disabled){opacity:.86}
.btn.sm{padding:4px 8px;font-size:11.5px}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.seg button{
  padding:5px 11px;border:0;background:var(--panel);cursor:pointer;
  font-size:11.5px;border-right:1px solid var(--line-2);
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink)}
.seg button:disabled{color:var(--ink-3);cursor:not-allowed;background:var(--panel-2)}

.tag{
  display:inline-block;padding:2px 7px;border-radius:2px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
/* A status that is also a destination. It keeps the tag's colour so it still
   reads as a status; the arrow is what says it goes somewhere. */
button.tag.link{
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  padding:2px 5px 2px 7px;font:inherit;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
button.tag.link .ic{width:11px;height:11px;opacity:.55}
button.tag.link:hover{filter:brightness(.93)}
button.tag.link:hover .ic{opacity:1}
button.tag.link:focus-visible{outline:2px solid var(--sel);outline-offset:1px}

/* a table cell whose text is the link - no chrome until you reach for it */
.cellink{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;
}
.cellink:hover{text-decoration:underline;text-underline-offset:2px}
.cellink:focus-visible{outline:2px solid var(--sel);outline-offset:2px}

/* landing on the row you asked for */
tr.flash > td{animation:flash 1.8s ease-out}
@keyframes flash{0%,40%{background:var(--sel-soft)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){tr.flash > td{animation:none;background:var(--sel-soft)}}

/* A status that is simply the expected one. Still legible and still clickable,
   but it does not compete: where every row passes, a filled chip on every row
   is decoration, and the one exception stops standing out. */
.tag.quiet{background:transparent;color:var(--ink-3);box-shadow:none;font-weight:500}
button.tag.quiet .ic{opacity:.3}
button.tag.quiet:hover{color:var(--ink);background:var(--hover)}
button.tag.quiet:hover .ic{opacity:.8}

.tag.ok{background:var(--green-bg);color:var(--green)}
.tag.busy{background:var(--blue-bg);color:var(--blue)}
.tag.bad{background:var(--red-bg);color:var(--red)}
.tag.warn{background:var(--amber-bg);color:var(--amber)}

/* -------------------------------------------------------------- panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;margin-bottom:12px}
.panel > header{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);
}
.panel > header h3{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.panel > header .spacer{flex:1}
.panel .pad{padding:12px}

/* result strip */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border-bottom:1px solid var(--line)}
.tile{padding:11px 13px;border-right:1px solid var(--line)}
.tile:last-child{border-right:0}
.tile .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tile .v{font-family:var(--mono);font-size:17px;font-weight:650;letter-spacing:-.02em;
  margin-top:2px;font-variant-numeric:tabular-nums}
.tile .v.small{font-size:13px;font-weight:600}

/* tables */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11.5px}
th{
  text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:8px 12px;
  border-bottom:1px solid var(--line-2);white-space:nowrap;
  position:sticky;top:0;background:var(--panel);
}
td{padding:7px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.allele{font-weight:700}
tr.dim td{color:var(--ink-3)}

/* meter used in the QC table */
.meter{display:flex;align-items:center;gap:7px;min-width:120px}
.meter .track{flex:1;height:5px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.meter .fill{display:block;height:100%;background:var(--ink-2)}
.meter .fill.lo{background:var(--red)}
.meter span{font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-2);min-width:38px;text-align:right}

/* ----------------------------------------------------------- igv panel */
.browser{display:flex;flex-direction:column}
.browser .toolbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:7px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.browser .toolbar label{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-2);cursor:pointer}
.readout{
  display:flex;gap:16px;flex-wrap:wrap;padding:6px 12px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
}
.readout b{color:var(--ink)}
.readout .sw{display:inline-block;width:9px;height:9px;border-radius:2px;
  vertical-align:-1px;margin-right:5px}
/* igv.js draws its own light canvas and is not theme-aware. Rather than let a
   white block sit awkwardly inside dark chrome, the viewport is an explicit
   light surface in both themes - genome browsers are conventionally light, so
   framing it as an instrument screen reads as deliberate instead of broken. */
#igv{
  padding:8px;margin:8px;border-radius:3px;
  background:#FFFFFF;color:#14181F;border:1px solid var(--line-2);
}
#igv .igv-root{border:0}
.grip{
  height:9px;cursor:ns-resize;background:var(--panel-2);
  border-top:1px solid var(--line);position:relative;
}
.grip::after{
  content:"";position:absolute;left:50%;top:3px;width:34px;height:3px;
  transform:translateX(-50%);border-radius:99px;background:var(--line-2);
}
.legend{display:flex;gap:15px;flex-wrap:wrap;padding:7px 12px;
  border-top:1px solid var(--line);font-size:11px;color:var(--ink-2)}

/* ------------------------------------------------------------- messages */
.msg{padding:10px 12px;border-radius:3px;font-size:12.5px;margin-bottom:12px}
.msg.ok{background:var(--green-bg);color:var(--green)}
.msg.bad{background:var(--red-bg);color:var(--red)}
.msg.warn{background:var(--amber-bg);color:var(--amber)}
.msg b{font-weight:700}

.progress{padding:12px}
.progress .lbl{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:11.5px;color:var(--ink-2);margin-bottom:6px}
.progress .track{height:5px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.progress .fill{display:block;height:100%;background:var(--ink);transition:width .3s}

.empty{color:var(--ink-3);text-align:center;padding:48px 20px;font-size:13px}
.hidden{display:none !important}
.filelist{max-height:120px;overflow:auto;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);padding:0 11px 10px}
.filelist div{display:flex;justify-content:space-between;gap:8px}

@media (max-width:860px){
  .body{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--line);max-height:44vh}
}

/* ---------------------------------------------------------------- tabs */
.tabs{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tabs button{
  padding:7px 15px;border:0;background:transparent;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--accent);font-weight:600;
  border-bottom-color:var(--accent)}
.tabs button:hover:not([aria-selected="true"]){color:var(--ink)}

/* prose used on the method tab; narrow measure, app type scale */
.prose{padding:14px 16px;max-width:74ch;font-size:13px;color:var(--ink-2)}
.prose p{margin:0 0 11px}
.prose p:last-child{margin-bottom:0}
.prose h4{
  margin:18px 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.prose b{color:var(--ink)}
.prose code{
  font-family:var(--mono);font-size:.9em;background:var(--panel-2);
  padding:1px 5px;border-radius:2px;color:var(--ink);
}
.method-name{font-family:var(--mono);font-weight:700;color:var(--ink)}

/* ------------------------------------------------------- flow diagram */
.flowwrap{padding:4px 16px 16px;overflow-x:auto}
.flow{display:block;width:100%;min-width:760px;max-width:1000px;height:auto;color:var(--ink-3)}
.flow .stage rect{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1}
.flow .stage.alt rect{fill:var(--panel);stroke:var(--line-2)}
.flow .stage.key rect{fill:var(--panel-2);stroke:var(--ink);stroke-width:1.5}
.flow .t{fill:var(--ink);font-family:var(--ui);font-size:14px;font-weight:600}
.flow .m{fill:var(--ink);font-family:var(--mono);font-size:14px;font-weight:700}
.flow .s{fill:var(--ink-2);font-family:var(--ui);font-size:11.5px}
.flow .n{fill:var(--ink);font-family:var(--mono);font-size:13px;font-weight:650;
  text-anchor:start;font-variant-numeric:tabular-nums}
.flow .d{fill:var(--ink-3);font-family:var(--ui);font-size:10.5px}
.flow .lab{fill:var(--ink-3);font-family:var(--ui);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase}
.flow .arrow{stroke:var(--line-2);stroke-width:1.5;fill:none}
.flow .rule{stroke:var(--line-2);stroke-width:1.5}
.mono{font-family:var(--mono)}
th[title]{cursor:help;text-decoration:underline dotted var(--line-2);text-underline-offset:3px}

/* rail tools */
.railtools{padding:0 11px 9px;display:flex;flex-direction:column;gap:6px}
.railtools .row2{display:flex;gap:5px;align-items:center}
.railtools .spacer{flex:1}
.railtools label{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2)}

#runcount{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.queue{padding:0 0 8px}
.queue .q{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px}
.queue .q:last-child{border-bottom:none}
.queue .bar{height:4px;background:var(--panel-2);border-radius:99px;overflow:hidden;width:120px}
.queue .bar i{display:block;height:100%;background:var(--ink)}

/* method diagrams */
.flow.diag .ref{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1}
.flow.diag .blk{fill:var(--blue);opacity:.85}
.flow.diag .blkfaint{fill:var(--blue);opacity:.28}
.flow.diag .clip{fill:var(--amber);opacity:.85}
.flow.diag .piece{fill:var(--blue);opacity:.85}
.flow.diag .dup{fill:var(--amber);opacity:.30}
.flow.diag .gapline{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 4}
.flow.diag .span{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 3}
.flow.diag .tick{fill:var(--ink-3);font-family:var(--ui);font-size:10.5px}
.flow.diag .ok{fill:var(--ink-2);font-family:var(--ui);font-size:11.5px}
.flow.diag .warn{fill:var(--ink);font-family:var(--ui);font-size:11.5px;font-weight:600}

/* sample record */
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:9px 14px;padding:12px}
.metagrid .f{display:flex;flex-direction:column;gap:3px}
.metagrid label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.metagrid input{width:100%;padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel);font-family:var(--mono);font-size:11.5px}
.metagrid input:focus{border-color:var(--ink)}
.metagrid .f.wide{grid-column:1/-1}
.metagrid .hint{font-size:10px;color:var(--ink-3)}
.savedhint{font-size:11px;color:var(--green)}
#auditbox{border-top:1px solid var(--line)}
#auditbox summary{padding:8px 12px;cursor:pointer;font-size:11px;color:var(--ink-3);
  letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.concord{font-family:var(--mono);font-size:11px}

/* batch prepare */
.sharedrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px 12px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.sharedrow .f{display:flex;flex-direction:column;gap:3px}
.sharedrow label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sharedrow input{padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel);font-family:var(--mono);font-size:11.5px}
#preptable input{width:100%;padding:4px 6px;border:1px solid transparent;border-radius:2px;
  background:transparent;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
#preptable input:hover{border-color:var(--line)}
#preptable input:focus{border-color:var(--ink);background:var(--panel);outline:none}
#preptable td{padding:3px 8px}

/* sub-tabs within a run */
.subtabs{display:flex;gap:2px;margin:0 0 12px;border-bottom:1px solid var(--line)}
.subtabs button{
  padding:6px 13px;border:0;background:transparent;cursor:pointer;
  font-size:12px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.subtabs button:hover{color:var(--ink)}
.subtabs button[aria-selected="true"]{color:var(--accent);font-weight:600;
  border-bottom-color:var(--accent)}
.subtabs .flag{margin-left:6px}
.dropzone.big{padding:26px 22px}
.dropzone.big b{font-size:14px}
.pickinfo{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.pickinfo b{color:var(--ink)}

/* ------------------------------------------------- result status bar
   Status is stated, not narrated: an identity block, then a row of
   label/value pairs. Colour appears only on the verdict chip and on
   flagged rows, so nothing decorative competes with the data. */
.statusbar{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:11px 14px;margin-bottom:10px;
}
.statusbar .idblock{display:flex;align-items:center;gap:9px;
  padding-right:18px;border-right:1px solid var(--line)}
.statusbar .sname{font-family:var(--mono);font-size:14px;font-weight:650;
  letter-spacing:-.01em}
/* The analysis name identifies the files, not the sample. It sits beside the
   label so it can be quoted, and recedes so it is not mistaken for the name. */
.statusbar .sid{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px}

/* Read pools: a disclosure, not two dozen rows always open. The junction
   browser is the evidence and should not be pushed off the screen by a list
   most readers open once. */
#poolsbox > summary{display:flex;align-items:baseline;gap:11px;cursor:pointer;
  padding:8px 12px;list-style:none}
#poolsbox > summary::-webkit-details-marker{display:none}
#poolsbox > summary::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--ink-3);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s;
  transform:translateY(1px)}
#poolsbox[open] > summary::before{transform:rotate(90deg) translateX(1px)}
#poolsbox > summary:hover{background:var(--hover)}
#poolsbox > summary h3{margin:0;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
#poolsbox > summary .spacer{flex:1}
#poolsbox > summary .hint{font-size:11.5px;color:var(--ink-3)}
.poolsbar{display:flex;align-items:center;gap:12px;padding:9px 13px;
  border-top:1px solid var(--line);background:var(--panel-2);
  font-size:12px;color:var(--ink-2)}
.poolsbar .btn{margin-left:auto}
.statusbar .facts{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.statusbar .kv{display:flex;flex-direction:column;gap:1px}
.statusbar .kv i{font-style:normal;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.statusbar .kv b{font-family:var(--mono);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.statusbar .kv b.hit{color:var(--ink)}
.statusbar .kv b.none{color:var(--ink-3);font-weight:400}

/* flagged conditions: one line each, severity as a leading token */
.flagstrip{
  border:1px solid var(--line);border-left:3px solid var(--line-2);
  background:var(--panel);border-radius:3px;margin-bottom:10px;
  display:flex;flex-direction:column;
}
.flagstrip span,
.flagstrip .flag{padding:7px 12px;font-size:12px;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.flagstrip span:last-child,
.flagstrip .flag:last-child{border-bottom:none}
/* each flag is a button, because each one is answerable in the Quality tab */
.flagstrip .flag{background:none;border-width:0 0 1px 0;border-style:solid;
  border-color:var(--line);font-family:inherit;text-align:left;
  width:100%;cursor:pointer}
.flagstrip .flag:hover{background:var(--hover)}
.flagstrip .flag:focus-visible{outline:2px solid var(--sel);outline-offset:-2px}
.flagstrip .flag b .ic{width:11px;height:11px;margin-left:5px;color:var(--ink-3);
  vertical-align:-1px}
.flagstrip .flag:hover b .ic{color:var(--sel)}
.flagstrip em{font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-right:9px}
.flagstrip em.warn{color:var(--amber)}
.flagstrip em.bad{color:var(--red)}

/* field/value table used for scope and similar reference blocks */
.kvtable td{padding:7px 12px;vertical-align:top;white-space:normal}
.kvtable td:first-child{width:190px;color:var(--ink-3);white-space:nowrap}
.warnhint{color:var(--amber)}

/* ---------------------------------------------------------------- charts
   Single-series throughout, so no categorical palette is needed: one data
   hue, magnitude by length, and thresholds drawn as labelled rules rather
   than a second colour. */
.chartwrap{padding:14px 16px;overflow-x:auto}
.chart{display:block;width:100%;min-width:520px;height:auto;
  font-family:var(--ui);font-size:11px}
.chart .bar{fill:var(--blue)}
.chart .bar.out{fill:var(--ink-3);opacity:.35}
.chart .band{fill:var(--blue);opacity:.07}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .rule{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 3}
.chart text{fill:var(--ink-3)}
.chart text.val{fill:var(--ink);font-family:var(--mono);font-size:10.5px;
  font-variant-numeric:tabular-nums}
.chart text.lbl{fill:var(--ink-2);font-family:var(--mono);font-size:10.5px}
.chart .cell{stroke:var(--panel);stroke-width:2}
.chart .hit{fill:transparent;cursor:pointer}
.charttip{position:fixed;pointer-events:none;z-index:50;background:var(--ink);
  color:var(--panel);padding:5px 8px;border-radius:3px;font-family:var(--mono);
  font-size:11px;white-space:nowrap;opacity:0;transition:opacity .1s}
.charttip.on{opacity:1}
/* The browser default select carries its own chrome and does not match
   anything else here, so the arrow is drawn and the frame is ours. */
.sel,.newuser select{
  appearance:none;-webkit-appearance:none;
  padding:5px 26px 5px 9px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel) no-repeat right 8px center/9px 6px;
  background-image:linear-gradient(45deg,transparent 45%,var(--ink-3) 45% 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,var(--ink-3) 45% 55%,transparent 55%);
  background-position:right 12px center,right 8px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);cursor:pointer;
}
.sel:hover,.newuser select:hover{border-color:var(--ink-3)}
.sel:focus-visible,.newuser select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.chartnote{padding:0 16px 12px;font-size:11.5px;color:var(--ink-3)}
.legend2{display:flex;gap:16px;flex-wrap:wrap;padding:4px 0 0;
  font-size:11.5px;color:var(--ink-2)}
.legend2 span{display:inline-flex;align-items:center;gap:6px}
.legend2 i{width:11px;height:11px;border-radius:2px;display:inline-block}
.legend2 b{color:var(--ink);font-family:var(--mono);font-size:10.5px}
/* a scatter of a handful of points reads as empty if stretched to panel width */
.chart.scatter{max-width:660px;min-width:420px}
#rectable input{width:100%;min-width:110px;padding:4px 6px;border:1px solid transparent;
  border-radius:2px;background:transparent;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
#rectable input:hover{border-color:var(--line)}
#rectable input:focus{border-color:var(--ink);background:var(--panel);outline:none}
#rectable td{padding:3px 8px}
#rectable td.lbl{font-family:var(--mono);color:var(--ink-3);white-space:nowrap}
#rectable th .opt{font-family:var(--mono);font-size:9px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:2px;padding:0 3px;margin-left:3px}

/* icon buttons */
/* a download link that has to sit in a table cell like a button */
a.btn{display:inline-block;text-decoration:none;color:inherit}
a.btn:hover{border-color:var(--ink)}

.btn.icon{display:inline-flex;align-items:center;gap:6px}
/* An icon on an action button is a second cue, not the label. It stays a shade
   lighter than the text so the word still leads, and lifts on hover with it. */
.btn.icon .ic{color:var(--ink-2)}
.btn.icon:hover:not(:disabled) .ic{color:var(--ink)}
.btn.primary .ic,.btn.primary:hover .ic{color:currentColor;opacity:.75}
.panel > header .hint{font-size:11.5px;color:var(--ink-3)}
/* The browser header carries the whole control set on one row: what to look
   at, how close, and what to take away. Two rows of toolbar read as two
   toolbars. */
.browser > header{flex-wrap:wrap;gap:9px;padding:8px 12px}
.browser > header .tbsep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.browser > header .tbcheck{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink-2);white-space:nowrap}

/* Fifteen identical Open buttons outweigh the row they sit on. They stay full
   buttons for the hit target and the label, but recede until the row is under
   the pointer. */
#sumtable .btn.sm{border-color:transparent;color:var(--ink-3);background:transparent}
#sumtable tr:hover .btn.sm{border-color:var(--line-2);color:var(--ink);
  background:var(--panel)}
#sumtable .btn.sm:focus-visible{border-color:var(--line-2);color:var(--ink)}
.ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.selcol{width:26px}
#sumtable td:first-child{width:26px}
.chart .hit.clickable{cursor:pointer}

/* what the QC verdicts mean, stated once under the table */
.qckey{display:flex;flex-wrap:wrap;gap:6px 22px;padding:9px 14px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.qckey span{display:flex;align-items:baseline;gap:8px}

/* verdict guidance: one sentence saying what to do, above the detail */
.guidance{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;
  border:1px solid var(--line);border-radius:3px;margin-bottom:10px;
  font-size:12.5px;background:var(--panel)}
.guidance .ic{margin-top:2px}
.guidance .btn{margin-left:auto;flex:none;white-space:nowrap}
.guidance.ok{border-left:3px solid var(--green);color:var(--ink-2)}
.guidance.warn{border-left:3px solid var(--amber);color:var(--ink)}
.guidance.bad{border-left:3px solid var(--red);color:var(--ink)}

/* each flag: severity, what it is, what it means, what to do */
.flagstrip span,
.flagstrip .flag{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:baseline}
.flagstrip b{grid-column:2;color:var(--ink);font-weight:650}
.flagstrip i{grid-column:2;font-style:normal;color:var(--ink-2)}
.flagstrip u{grid-column:2;text-decoration:none;color:var(--ink);
  display:flex;align-items:flex-start;gap:6px;margin-top:3px;font-size:12px}
.flagstrip u .ic{margin-top:2px;color:var(--ink-3)}
td .none{color:var(--ink-3);font-style:italic}

/* what the selected browser view is for - the two answer different questions */
.modenote{padding:8px 13px;border-bottom:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);font-size:12.5px;line-height:1.5}
.modenote b{color:var(--ink);font-weight:650}

/* how many alpha genes a deletion takes out, beside the call */
.alost{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:2px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--amber-bg);color:var(--amber);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 32%,transparent)}
.alost.a0{background:var(--red-bg);color:var(--red);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 28%,transparent)}

/* Sign-out: who accepted this result. A closed record is visibly closed. */
.signoff{display:flex;align-items:flex-start;gap:11px;padding:10px 13px;
  border:1px solid var(--line);border-radius:3px;margin-bottom:10px;
  background:var(--panel)}
.signoff.pending{border-left:3px solid var(--amber)}
.signoff.done{border-left:3px solid var(--green)}
.signoff .tag{flex:none;margin-top:1px}
.sotext{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2)}
.sotext b{color:var(--ink);font-weight:650}
.socomment{display:block;margin-top:3px;color:var(--ink)}
.socomment.warn{color:var(--amber)}
.sonote{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.soform{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;
  padding:11px 13px;margin:-6px 0 10px;border:1px solid var(--line-2);
  border-top:0;border-radius:0 0 3px 3px;background:var(--panel-2)}
.soform label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.soform label.sofull,.soform .sorow,.soform .soas{grid-column:1/-1}
.soas{font-size:12.5px;color:var(--ink-2)}
.soas b{color:var(--ink);font-weight:650}
.soform .sorow{display:flex;align-items:center;gap:9px}
.soerr{color:var(--red);font-size:12px}

/* a signed-out record is read-only until the sign-out is withdrawn */
#rectable tr.closed input[disabled]{background:var(--panel-2);color:var(--ink-3);
  border-color:var(--line);cursor:not-allowed}

/* Sign-in gate. Deliberately plain: it is a door, not a landing page. */
/* The sign-in screen. Two panels: who this is on the left, what to do on the
   right. The left half is the only place in the app with room to say what the
   service is, so it says it once and then gets out of the way. */
.gate{position:fixed;inset:0;overflow:auto;display:grid;place-items:center;
  background:var(--bg);z-index:50;padding:28px 20px}
.gatewrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;
  align-items:center;width:min(940px,100%)}

.gateside{min-width:0}
/* Logos sit with the description, not on the form: the gate shows one of four
   forms and the ownership of the page does not change between them. */
.gatebrand{display:flex;align-items:center;gap:20px;margin:0 0 26px}
.gatebrand img{height:46px;width:auto;display:block}
.gatedot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.gatetitle{margin:0 0 10px;font:650 27px/1.2 var(--ui);letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance}
.gateblurb{margin:0 0 26px;max-width:44ch;font:400 13.5px/1.65 var(--ui);
  color:var(--ink-2)}

.gatemotif{display:block;width:100%;max-width:420px;height:auto;color:var(--blue)}
.gatemotif .ref rect{fill:currentColor;opacity:.14}
.gatemotif .gap rect{fill:var(--red);opacity:.5}
.gatemotif .gap path{stroke:var(--red);stroke-width:1.5;opacity:.45;fill:none}
.gatemotif .reads rect{fill:url(#fade);opacity:.9}
.gatemotif .reads rect:nth-child(even){transform:scaleX(-1);transform-origin:center;
  transform-box:fill-box}
.gatemotif .joins path{stroke:var(--red);stroke-width:1.2;opacity:.32;fill:none}

.gateforms{min-width:0}

/* One column once the two panels stop fitting side by side. The description
   goes with it - on a phone the form is the only thing wanted. */
@media (max-width:860px){
  .gatewrap{grid-template-columns:minmax(0,1fr);gap:26px;width:min(420px,100%)}
  .gatebrand{justify-content:center;margin-bottom:18px}
  .gatebrand img{height:38px}
  .gatetitle,.gateblurb{text-align:center}
  .gateblurb{max-width:none}
  .gatemotif{display:none}
}
/* Each logo ships in two cuts; the theme decides which is drawn. Neither is a
   recolour of the other - the dark ones are the versions the brands supply. */
.gatebrand img.darkonly{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gatebrand img.lightonly{display:none}
  :root:not([data-theme="light"]) .gatebrand img.darkonly{display:block}
}
:root[data-theme="dark"] .gatebrand img.lightonly{display:none}
:root[data-theme="dark"] .gatebrand img.darkonly{display:block}
:root[data-theme="light"] .gatebrand img.lightonly{display:block}
:root[data-theme="light"] .gatebrand img.darkonly{display:none}
.gatebox{width:100%;display:flex;flex-direction:column;gap:11px;
  padding:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:7px;box-shadow:0 1px 2px rgba(16,20,28,.05),
  0 8px 24px -12px rgba(16,20,28,.18)}
.gatebox h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.gatesub{margin:0;color:var(--ink-2);font-size:12.5px}
.gatebox label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.gatebox input{width:100%;padding:7px 9px;border:1px solid var(--line-2);
  border-radius:3px;background:var(--panel);font-family:var(--mono);font-size:13px}
#pwchange{display:flex;flex-direction:column;gap:11px}
.gateerr{color:var(--red);font-size:12.5px;min-height:1em}

/* who is signed in, in the top bar */
.who{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);
  padding-left:14px;border-left:1px solid var(--line);white-space:nowrap}

/* user administration */
.urow{display:flex;gap:6px;white-space:nowrap}
.newuser{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:9px 12px;
  align-items:end;padding:13px;border-top:1px solid var(--line);background:var(--panel-2)}
.newuser label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.newuser input,.newuser select{padding:6px 8px;border:1px solid var(--line-2);
  border-radius:3px;background:var(--panel);font-size:12.5px}
.newuser .soerr{grid-column:1/-1}

/* files the picker walked into but will not upload */
.skipped{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3);font-weight:400}

/* a folder the user has taken out of this batch */
#preptable tr.excluded > td:not(:first-child){opacity:.4}
#preptable tr.excluded input[type=text]{text-decoration:line-through}

/* product seen, junction unconfirmed: not a call and not a negative */
.statusbar .kv b.unconf,.unconf{color:var(--amber);font-weight:650}

/* Folders in the rail. A run belongs to at most one, so this is a flat list of
   groups rather than a tree: nesting would imply a hierarchy the data does not
   have, and at a lab's scale a flat set is faster to scan anyway. */
.fgroup{position:relative}
/* The guide runs from under the folder's own twisty down past its last child. */
.fgroup[data-depth]:not([data-depth="0"])::before{content:"";position:absolute;
  left:calc(var(--ind) - 6px);top:0;bottom:6px;width:1px;background:var(--line)}
.fhead{display:grid;grid-template-columns:14px 16px 1fr auto auto auto auto;align-items:center;
  gap:6px;padding:5px 8px 5px 0;cursor:pointer;user-select:none;border-radius:4px;
  font:500 11.5px/1.3 var(--ui);letter-spacing:.01em;color:var(--ink);position:relative}
/* Indentation carries the nesting. A guide line down the left of each level
   keeps a deep row attached to its parent when the parent has scrolled by. */

.ftwist{width:14px;height:14px;border:0;background:none;cursor:pointer;padding:0;
  display:grid;place-items:center;color:var(--ink-3)}
.ftwist::before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;border-radius:1px;
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .12s ease}
.ftwist[aria-expanded="true"]::before{transform:rotate(45deg) translate(-2px,-2px)}
.ftwist:hover{color:var(--ink)}
.ftwist.blank{cursor:default}.ftwist.blank::before{display:none}
.fhead .fname{font-size:11.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fhead .fcount{font-family:var(--mono);font-size:10px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:18px;text-align:right}
.fmenu{width:20px;height:20px;display:none;place-items:center;border:0;
  background:none;border-radius:3px;cursor:pointer;color:var(--ink-3);padding:0}
.fhead:hover .fmenu,.fhead.on .fmenu,.fhead:focus-within .fmenu,
.run:hover .fmenu{display:grid}
.fmenu:hover{background:var(--panel-2);color:var(--ink)}
.fmenu svg{width:13px;height:13px}
.fmenu .ic{width:13px;height:13px}
.fempty{font:400 10.5px/1 var(--ui);color:var(--line-2);padding:5px 0;font-style:italic}

/* Drag state: the row lifts, the target folder shows where it will land. */
.run[draggable="true"]{cursor:grab}
.run.dragging{opacity:.4}
.fgroup.dropping{background:var(--sel-soft)}
.fgroup.dropping .fhead{background:var(--sel-soft)}
.fgroup.dropping .fempty{color:var(--ink)}

/* the contextual selection bar */
.selbar{background:var(--sel-soft);margin:0 -11px;padding:7px 11px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.selbar #selcount{font-size:11.5px;color:var(--ink);font-weight:600}

/* Recycle bin: the last node in the tree, the way it sits on a desktop. Its
   rows are quieter than live runs - they are not part of the working set - and
   each carries put-back and delete-for-good. */
.fgroup.bin{border-top:1px solid var(--line-2);margin-top:4px}
.fgroup.bin .fname{color:var(--ink-3)}
.run.binned{cursor:default;opacity:.72}
.run.binned:hover{background:var(--hover);opacity:1}
/* Always shown, not revealed on hover: in a recycle bin the two actions are
   the reason you are looking at the row. */
.run.binned .binacts{grid-column:4;display:inline-flex;gap:2px}
.run.binned .binacts .fmenu{display:inline-flex;color:var(--ink-3)}
.run.binned .binacts .fmenu:hover{color:var(--ink)}
.run.binned .sub i{color:var(--ink-3)}

.fhead:hover{background:var(--hover)}

.fhead.on{background:var(--sel-soft);color:var(--blue)}
.fhead.on .fico svg{color:var(--blue)}
.fhead.on::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;
  border-radius:0 2px 2px 0;background:var(--blue)}

.fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fcount{font:500 10.5px/1 var(--mono);color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:18px;text-align:right}

.rico{display:grid;place-items:center;color:var(--line-2)}
.rico svg{width:12px;height:12px}

.sumscope{display:flex;min-height:0}
.sumscope:not(:empty){margin:0 0 12px}

.scopechip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 9px;
  border:1px solid var(--blue);border-radius:14px;background:var(--sel-soft);
  color:var(--blue);font:500 11px/1 var(--ui)}
.scopechip svg{width:12px;height:12px}
.scopechip button{width:17px;height:17px;display:grid;place-items:center;border:0;padding:0;
  border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.65}
.scopechip button:hover{opacity:1;background:var(--panel-2)}

/* A disabled toolbar control stays in place and explains itself on hover. */
.tbcheck.off{opacity:.4;cursor:not-allowed}
.tbcheck.off input{cursor:not-allowed}
.brand code{font:500 10px/1 var(--mono);color:var(--ink-3);
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  padding:1px 4px;letter-spacing:0}

/* Summary filter bar. One row, wraps on a narrow window; the match count sits
   at the end so the effect of a change is visible without moving the eye. */
.filterbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin:0 0 12px;padding:9px 11px;border:1px solid var(--line);
  border-radius:5px;background:var(--panel)}
.filterbar .inp{flex:1 1 240px;min-width:180px;padding:5px 8px;
  border:1px solid var(--line-2);border-radius:4px;background:var(--panel);
  color:var(--ink);font:400 12px/1.3 var(--ui)}
.filterbar .inp:focus{outline:2px solid var(--blue);outline-offset:-1px}
.filterbar .sel{padding:5px 6px;border:1px solid var(--line-2);border-radius:4px;
  background:var(--panel);color:var(--ink);font:400 11.5px/1.3 var(--ui);max-width:190px}
.filterbar .sel:disabled{opacity:.45}
.filterbar .fcount{margin-left:auto;font:500 11px/1 var(--mono);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.filterbar.on{border-color:var(--blue)}

/* Upload instructions. Numbered because the steps are a sequence and the
   numbers are the only ordering cue once the text wraps. */
.howto{margin:14px 0 0;padding:0 0 0 20px;display:grid;gap:6px;
  font:400 12px/1.5 var(--ui);color:var(--ink-2)}
.howto li{padding-left:2px}
.howto li b{color:var(--ink);font-weight:600}
.howto .mono{font-family:var(--mono);font-size:11px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:3px;padding:0 3px}
.howto-note{margin:10px 0 0;font:400 11.5px/1.5 var(--ui);color:var(--ink-3)}
.howto-note .mono{font-family:var(--mono);font-size:11px}

/* Upload diagram: folder tree in, one run per barcode out. */
.upflow{padding:14px 0 2px}
.flow.up{min-width:640px;max-width:900px}
.flow.up .tree .fold{fill:var(--ink);font-family:var(--mono);font-size:12px;font-weight:600}
.flow.up .tree .file{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.flow.up .tree .more{fill:var(--ink-3);font-family:var(--ui);font-size:11px;font-style:italic}
.flow.up .drop rect{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:6 5}
.flow.up .lab{text-anchor:start}

/* The two loci are the axis this panel runs on, so they get a hue each: the
   alpha cluster on chr16 and the beta cluster on chr11. Used as a marker
   beside a call, never as the only way to tell them apart - the allele name
   says it too. */
.locus{display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:middle;background:var(--ink-3)}
.locus.chr16{background:var(--alpha)}
.locus.chr11{background:var(--beta)}
.run .sub b .locus{margin-right:5px}

/* A thin band of the accent under the masthead, so the app has a colour
   before any data is on screen. */
.topbar{border-bottom:2px solid var(--accent)}
.rail h2{color:var(--accent)}
.panel > header h3{color:var(--ink)}

/* Gate: the secondary ways in sit under the button, not beside it. */
.linkbtn{display:block;margin:12px auto 0;border:0;background:none;padding:2px;
  color:var(--accent);font:400 12px/1.3 var(--ui);cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--ink)}
.gatehint{margin:2px 0 10px;font:400 11px/1.45 var(--ui);color:var(--ink-3)}
.invitelink{flex-basis:100%;margin-top:9px;padding:9px 10px;border:1px solid var(--amber);
  border-radius:4px;background:var(--amber-bg);font:400 11.5px/1.5 var(--ui);color:var(--ink)}
.invitelink code{display:block;margin-top:5px;padding:6px 7px;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;font-family:var(--mono);
  font-size:10.5px;word-break:break-all;user-select:all}
.tag.live{background:var(--green-bg);color:var(--green)}

/* Two-factor enrolment. The QR and the typed secret sit side by side: a
   camera is quicker, and a secret you can read is what you fall back on. */
.tfa{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.tfa .qr{width:190px;height:190px;flex:0 0 auto;padding:8px;background:#fff;
  border:1px solid var(--line);border-radius:4px}
.tfa .qr svg{width:100%;height:100%;display:block}
.tfa .side{flex:1 1 300px;min-width:260px;font:400 12px/1.6 var(--ui);color:var(--ink-2)}
.tfa .side ol{margin:0 0 10px;padding-left:18px}
.tfa code.secret{display:inline-block;margin:4px 0 10px;padding:6px 8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;user-select:all}
.tfa .row{display:flex;gap:8px;align-items:center;margin-top:8px}
.tfa input{padding:6px 8px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--panel);color:var(--ink);font:400 13px/1 var(--mono);
  letter-spacing:.14em;width:150px}
.reccodes{margin-top:12px;padding:11px 12px;border:1px solid var(--amber);
  border-radius:4px;background:var(--amber-bg)}
.reccodes .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:6px;margin-top:9px}
.reccodes code{padding:5px 7px;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;font-family:var(--mono);font-size:11.5px;text-align:center;user-select:all}
.tfaok{color:var(--green);font-weight:600}

.invitelink .btn{margin-top:8px}
.invitelink code{margin-bottom:0}

/* The card heading is a step below the panel title beside it: one names the
   service, the other names the task. */
.gatebox h1{font-size:16px}