:root {
  --ground: #F3F5F7; --panel: #FFFFFF; --line: #D9DEE4; --line2: #EEF1F4;
  --ink: #15202B; --ink2: #33414E; --muted: #4A5866; --accent: #0B5C8A; --accent-bg: #E4EEF5;
  --pass: #1E7A46; --pass-ink: #17603A; --pass-bg: #E3F2E8;
  --fail: #B42318; --fail-ink: #9B1C12; --fail-bg: #FDE8E6;
  --warn-ink: #6B3A00; --warn-bg: #FFF1DC; --warn-line: #E9B872;
  --dark: #15202B; --dark2: #22303D;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Cascadia Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; }
button, input { font-family: inherit; font-size: 14px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid #7FC4E8; outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* header */
.top { background: var(--dark); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { display: block; font-weight: 600; font-size: 15px; }
.brand small { display: block; font-size: 12px; color: #B8C4CF; }
.spacer { flex: 1 1 auto; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--dark2); color: #C9D4DD; }
.pill.pass { background: #1F3A2C; color: #BFE8CF; }
.pill.fail { background: #4A1F1B; color: #F6C9C3; }
.pill.busy { background: #1E3550; color: #CFE3F5; }
.quit { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #44525F; background: transparent; color: #DDE5EC; }

/* layout */
.body { display: flex; flex-wrap: wrap; flex: 1 1 auto; align-items: stretch; }
.nav { flex: 1 1 220px; max-width: 280px; background: var(--panel); border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--ink2); text-align: left; min-height: 44px; width: 100%; }
.nav button[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.nav .count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* The foot of the column: it holds a path, which has no spaces to break at,
   so every line in it is told it may break anywhere. Without that the path
   runs out of the column and off the page. */
.nav .foot { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 12px 0;
  font-size: 12px; color: var(--muted); line-height: 1.6;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nav .foot > div { overflow-wrap: anywhere; word-break: break-word; }
.nav .foot .path { font-size: 11px; color: #8795A1; }
.nav .foot .latest { align-self: flex-start; min-height: 34px; padding: 0 12px;
  font-size: 12px; margin-top: 4px; }
.nav .foot .latest.newer { border-color: var(--accent); color: var(--accent);
  font-weight: 600; }
/* The nav's own buttons: an icon that never shrinks, a label that may wrap,
   and a count pinned to the right. */
.nav button { min-width: 0; }
.nav button > svg { flex: 0 0 auto; }
.nav .navname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav .navtop { background: #F2F7FB; }
.nav .navtop[aria-current="page"] { background: var(--accent-bg); }
.nav .navrule { height: 1px; background: var(--line); margin: 8px 4px; }
.nav .count.asks { background: var(--accent); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-weight: 700; }
.brand .mark { flex: 0 0 auto; }
.main { flex: 999 1 560px; min-width: 0; padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
.view[hidden] { display: none; }
.view { display: flex; flex-direction: column; gap: 18px; }

/* headings, buttons */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.head > div:first-child { flex: 1 1 320px; }
h1 { margin: 0; font-size: 24px; font-weight: 600; }
h1 + p { margin: 4px 0 0; color: var(--muted); }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid #B9C3CD; background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.danger { border-color: #E2A59E; color: var(--fail-ink); }
.seg { display: inline-flex; background: #E6EAEE; border-radius: 8px; padding: 3px; }
.seg button { min-height: 38px; padding: 0 14px; border-radius: 6px; border: 0; background: transparent; color: var(--ink2); font-weight: 600; font-size: 13px; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink2); }
.check input { width: 18px; height: 18px; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.card .sub { color: var(--muted); font-size: 13px; }
.cardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.grow { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile { flex: 1 1 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.tile .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tile .v { margin-top: 6px; font-family: var(--mono); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.tile .s { margin-top: 4px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tile .v.pass { color: var(--pass-ink); }
.tile .v.fail { color: var(--fail-ink); }
.empty { background: var(--panel); border: 1px dashed #B9C3CD; border-radius: 10px; padding: 28px; text-align: center; color: var(--muted); line-height: 1.6; }
.banner { border-radius: 10px; padding: 12px 16px; line-height: 1.5; }
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.banner.fail { background: var(--fail-bg); border: 1px solid #E2A59E; color: var(--fail-ink); }

/* badges */
.badge { white-space: nowrap; display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: #EEF1F4; color: var(--muted); }
.badge.PASS { background: var(--pass-bg); color: var(--pass-ink); }
.badge.FAIL, .badge.ERROR { background: var(--fail-bg); color: var(--fail-ink); }
.badge.INCOMPLETE, .badge.CANCELLED { background: var(--warn-bg); color: var(--warn-ink); }

/* progress strip */
.strip { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.bar { flex: 1 1 240px; height: 8px; background: #E6EAEE; border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--pass); transition: width .3s; }
.bar.busy > div { background: var(--accent); }

/* timeline */
.lanes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lane { display: flex; align-items: center; gap: 12px; }
.lane > button { flex: 0 0 72px; min-height: 44px; border-radius: 8px; font-family: var(--mono); font-weight: 600; font-size: 13px; border: 1px solid #B9C3CD; background: #fff; color: var(--ink); }
.lane > button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.track { flex: 1 1 auto; display: flex; border-radius: 6px; overflow: hidden; height: 30px; }
.lane.sel .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.segm { height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; overflow: hidden; white-space: nowrap; border-right: 1px solid #fff; }
.st-INACTIVE { background: #E6EAEE; color: #4A5866; }
.st-ACCUMULATION { background: #D3E3F2; color: #1F4E7A; }
.st-READINESS { background: #FBE3BE; color: #6B3A00; }
.st-ACTIVE { background: #1E7A46; color: #fff; }
.st-TERMINATE { background: #5B6875; color: #fff; }
.st-LOCKOUT { background: #B42318; color: #fff; }
.axis { display: flex; gap: 12px; margin-top: 6px; }
.axis > div:first-child { flex: 0 0 72px; }
.axis .ticks { flex: 1 1 auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.marks { flex: 1 1 auto; position: relative; height: 22px; font-family: var(--mono); font-size: 11px; color: var(--ink2); }
.marks span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; border-bottom: 2px solid var(--ink2); padding: 0 2px 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12px; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* chart */
.chart { position: relative; margin-top: 14px; height: 240px; border-left: 1px solid #C9D1D9; border-bottom: 1px solid #C9D1D9; }
.chart svg { display: block; width: 100%; height: 240px; }
.chart .lbl { position: absolute; right: 8px; font-family: var(--mono); font-size: 11px; background: #fff; padding: 0 4px; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 13px; }
.keys span { display: inline-flex; align-items: center; gap: 6px; }
.keys i { width: 18px; height: 3px; display: inline-block; }

/* gate panel */
.gaterows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: #F6F8FA; border-radius: 8px; }
.ic { flex: 0 0 16px; margin-top: 2px; }
.gr .kk { font-weight: 500; }
.gr .vv { color: var(--muted); font-size: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.gr .src { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.result { margin-top: 12px; border-radius: 8px; padding: 12px 14px; color: #fff; background: var(--pass); }
.result.no { background: var(--fail); }
.result small { display: block; font-family: var(--mono); font-size: 12px; margin-top: 4px; opacity: .9; }
.notes { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink2); }

/* evidence log */
.log { background: var(--dark); color: #E6ECF1; border-radius: 10px; padding: 16px 18px; }
.log h2 { color: #fff; font-size: 15px; }
.log .lines { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 12px; max-height: 360px; overflow: auto; }
.log .ln { padding: 3px 6px; border-radius: 4px; color: #C9D4DD; display: grid; grid-template-columns: 40px 38px minmax(0, 1fr); column-gap: 8px; }
.log .ln .x { overflow-wrap: anywhere; }
.log .ln .q { color: #7D8E9D; }
.log .ln.hi { background: #22384A; color: #fff; }
.log .t { color: #9FB0BF; }
.log .s { color: #7FC4E8; }

/* tables */
.tablebox { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { background: #F6F8FA; text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
th { padding: 10px 8px; font-weight: 600; }
td { padding: 8px; border-top: 1px solid var(--line2); vertical-align: middle; }
tr.on td { background: #EEF5FA; }
td .idbtn { min-height: 40px; min-width: 64px; border: 0; border-radius: 6px; font-family: var(--mono); font-weight: 600; font-size: 13px; background: transparent; color: var(--accent); }
tr.on td .idbtn { background: var(--accent); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; background: #fff; color: var(--ink); border: 1px solid #B9C3CD; }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.small { font-size: 12px; }
.opt { margin-left: 8px; font-size: 11px; color: var(--muted); border: 1px solid #C9D1D9; border-radius: 4px; padding: 1px 5px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.evs { display: flex; flex-wrap: wrap; gap: 6px; }
.ev { font-family: var(--mono); font-size: 12px; background: #EEF3F7; color: #0B4A6E; border-radius: 6px; padding: 4px 8px; }

/* package */
.verdict { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.disc { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--pass); }
.disc.FAIL, .disc.ERROR { background: var(--fail); }
.disc.INCOMPLETE, .disc.CANCELLED { background: #8A4B00; }
.disc b { font-family: var(--mono); font-size: 28px; }
.disc small { font-size: 12px; opacity: .9; }
.facts { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
.files .f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line2); }
.files .f .n { flex: 0 1 300px; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.files .f .h { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.defects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.dcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.dcard .top2 { display: flex; align-items: center; gap: 8px; }
.dcard .top2 .badge { margin-left: auto; }
.field { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field input { flex: 1 1 320px; min-height: 44px; border: 1px solid #B9C3CD; border-radius: 8px; padding: 0 12px; font-family: var(--mono); font-size: 13px; }

@media (max-width: 800px) { .nav { max-width: none; border-right: 0; border-bottom: 1px solid var(--line); } }

/* console */
.console { background: var(--dark); color: #DDE5EC; border-radius: 10px; padding: 12px 16px; }
.console summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 10px; }
.console pre { margin: 10px 0 0; max-height: 260px; overflow: auto; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; color: #C9D4DD; }

/* settings for the next run, and the sweep */
.params { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.params > summary { font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 32px; }
.params .sub { margin: 6px 0 0; }
.prms { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px 18px; margin-top: 12px; }
.prm { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13px; }
.prm .pk { flex: 1 1 auto; color: var(--ink2); }
.prm input { width: 86px; min-height: 30px; padding: 0 8px; border: 1px solid #C9D1D9; border-radius: 6px;
  font-family: var(--mono); font-size: 12px; text-align: right; background: #fff; color: var(--ink); }
.prm.changed input { border-color: #0B5C8A; background: #F2F8FC; font-weight: 700; }
.prm .pd { display: none; }
.params[open] .prm .pd { display: inline; font-size: 10px; color: #8795A1; flex: 0 0 auto; }
.banner { background: #F2F8FC; border: 1px solid #BBD6E8; color: #0B4A6F; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.tbl td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tr:first-child td { border-top: 0; }
.chart.yaxis { margin-left: 44px; }
.chart .ylbl { position: absolute; left: -42px; width: 36px; text-align: right;
  font-family: var(--mono); font-size: 10px; color: #8795A1; }
.chart .yname { position: absolute; left: -42px; top: -16px; font-size: 11px; color: var(--ink2); white-space: nowrap; }

/* --- the gate: sign in, create the administrator, choose what to open ---- */
/* A class that sets display beats the browser's own rule for [hidden], so the
   two full-page layers say it themselves. */
[hidden] { display: none !important; }
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: linear-gradient(180deg, #15202B 0%, #22303D 55%, #2B3C4B 100%); }
.gcard { width: 100%; max-width: 440px; background: var(--panel); border-radius: 14px;
  border: 1px solid var(--line); padding: 26px 26px 24px; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.gcard.wide { max-width: 880px; }
.gbrand { display: flex; align-items: center; gap: 12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line2); }
.gbrand b { display: block; font-weight: 600; font-size: 15px; }
.gbrand small { color: var(--muted); font-size: 12px; }
.gcard h1 { font-size: 20px; margin: 18px 0 8px; }
.gcard > p.muted { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.gform { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.gfield { display: flex; flex-direction: column; gap: 5px; }
.gfield label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.gfield input { min-height: 40px; padding: 0 12px; border: 1px solid #C9D1D9; border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 15px; }
.gfield input:focus { border-color: var(--accent); }
.gfield small { font-size: 11px; }
.gerror { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--fail-bg); border: 1px solid #F0B4AE; color: var(--fail-ink); }
.gsec { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 22px 0 10px; }
.gchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.gchoice { text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.gchoice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-bg); }
.gchoice b { font-size: 16px; }
.gchoice .gsub { color: var(--accent); font-size: 13px; font-weight: 600; }
.gchoice .gabout { color: var(--ink2); font-size: 12.5px; line-height: 1.5; }
/* The mark: a balance with the bowl and the snake in one pan and a doctor in
   the other. Everything here is a colour or a stroke; the shapes and the lean
   are drawn by app.js, which is also where the five steps are explained. */
.mark { display: block; }
.markbox { display: inline-flex; align-items: center; }
/* What the mark says, in words. It is the accessible form of the beam and it
   is also simply easier to read than a picture, so it is not hidden away in
   a tooltip. The second clause is a result that has settled: quieter, but
   still there, because a failure that went silent after five minutes while
   it was still true would be a lie by omission. */
.marksays { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 300px;
  color: var(--muted); line-height: 1.3; }
.marksays .marklast { opacity: 0.72; }
.mk-line { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.mk-beam { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 2.4;
  stroke-linecap: round; }
.mk-pivot { fill: var(--mark-line, #7FC4E8); }
.mk-dish { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 1.7;
  stroke-linecap: round; }
.mk-post { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 1.8;
  stroke-linecap: round; }
.mk-bar { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 2.1;
  stroke-linecap: round; }
.mk-stem { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 2.6;
  stroke-linecap: butt; }
/* Dark brown, as the drawing has it. */
.mk-hair { fill: var(--mark-hair, #4A3326); }
/* The cup is filled and edged, so that it reads as a vessel rather than as
   a line with a wash under it; the rim is the bar across its mouth. */
/* The same tone as the rim, so that the cup is one solid vessel rather
   than a bar with a lighter dish hanging under it. */
.mk-cup { fill: var(--mark-cup, #7FC4E8); }
.mk-rim { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 2.6;
  stroke-linecap: round; }
.mk-collar { fill: none; stroke: var(--mark-line, #7FC4E8); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
.mk-snake { fill: none; stroke: var(--mark-snake, #4FA86E); stroke-width: 1.55;
  stroke-linecap: round; }
.mk-snakehead { fill: var(--mark-snake, #4FA86E); }
.mk-eye { fill: #0E1A24; }
.mk-tongue { fill: none; stroke: var(--mark-snake, #4FA86E); stroke-width: 0.5;
  stroke-linecap: round; }
.mk-coat { fill: var(--mark-coat, #EDF4F9); stroke: var(--mark-line, #7FC4E8);
  stroke-width: 1.3; stroke-linejoin: round; }
.mk-skin { fill: var(--mark-skin, #F6D9B0); stroke: var(--mark-skinline, #D9A760);
  stroke-width: 1.1; stroke-linejoin: round; }
.mk-steth { fill: none; stroke: var(--mark-steth, #2E5C7A); stroke-width: 1.05;
  stroke-linecap: round; }
.mk-steth-head { fill: var(--mark-steth, #2E5C7A); }
/* The membrane in the middle of the piece that goes on the patient. */
.mk-steth-eye { fill: var(--mark-coat, #EDF4F9); }
.mk-ink { fill: var(--mark-ink, #15202B); }
/* The white of an eye needs its own edge to read against the skin. */
.mk-eyewhite { fill: #FFFFFF; stroke: var(--mark-ink, #15202B); stroke-width: 0.4; }
.mk-mouth { fill: none; stroke: var(--mark-ink, #15202B); stroke-width: 0.85;
  stroke-linecap: round; }
.mk-brow { fill: none; stroke: var(--mark-ink, #15202B); stroke-width: 0.52;
  stroke-linecap: round; }
.mk-shirt { fill: #FFFFFF; }
.mk-tie { fill: var(--mark-tie, #3E7FA6); }
.mk-glint { fill: #FFFFFF; }
/* --- what the mark says with colour and movement ---------------------------

   Only the apparatus takes the tone: the stand, the beam, the pans and the
   pivot. The figures keep their own colours in every state. A doctor who
   turns red is a different drawing, and more to the point the colour is
   never the only signal -- the lean, the face and the sentence beside the
   mark all carry the same thing, so it still reads for somebody who cannot
   tell these colours apart.

   The tone is set on concrete properties rather than through a custom
   property, because a transition cannot be relied on to run when the custom
   property is what changed. */
.mark .mk-line, .mark .mk-beam, .mark .mk-dish, .mark .mk-post {
  transition: stroke 600ms ease; }
.mark .mk-pivot { transition: fill 600ms ease; }
.mark .mk-beamset, .mark .mk-pan { transition: transform 600ms cubic-bezier(.4, 0, .2, 1); }
.mark.tone-busy .mk-line, .mark.tone-busy .mk-beam,
.mark.tone-busy .mk-dish, .mark.tone-busy .mk-post { stroke: var(--mark-busy, #C98A3E); }
.mark.tone-busy .mk-pivot { fill: var(--mark-busy, #C98A3E); }
.mark.tone-good .mk-line, .mark.tone-good .mk-beam,
.mark.tone-good .mk-dish, .mark.tone-good .mk-post { stroke: var(--mark-good, #3E9E6A); }
.mark.tone-good .mk-pivot { fill: var(--mark-good, #3E9E6A); }
.mark.tone-bad .mk-line, .mark.tone-bad .mk-beam,
.mark.tone-bad .mk-dish, .mark.tone-bad .mk-post { stroke: var(--mark-bad, #CF6250); }
.mark.tone-bad .mk-pivot { fill: var(--mark-bad, #CF6250); }
.mark.tone-held .mk-line, .mark.tone-held .mk-beam,
.mark.tone-held .mk-dish, .mark.tone-held .mk-post { stroke: var(--mark-held, #C98A3E); }
.mark.tone-held .mk-pivot { fill: var(--mark-held, #C98A3E); }
/* The pivot ringed: the two checkers disagree, so the instrument itself is
   what is in question rather than either side of it. */
.mk-jam { fill: none; stroke: var(--mark-bad, #CF6250); stroke-width: 1.1; }

/* Something is running. The beam rocks a little -- about three degrees, a
   quarter of what a full lean is -- and the pans are turned back by the same
   amount on the same clock, so what is standing in them stays upright. It is
   slow on purpose: this sits in the corner of somebody's eye all day. */
@keyframes mk-rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes mk-level { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
.mark.mk-rocking .mk-beamset { transform-origin: 42px 40px;
  animation: mk-rock 2600ms ease-in-out infinite; }
.mark.mk-rocking .mk-pan-l { transform-origin: 13px 40px;
  animation: mk-level 2600ms ease-in-out infinite; }
.mark.mk-rocking .mk-pan-r { transform-origin: 71px 40px;
  animation: mk-level 2600ms ease-in-out infinite; }
/* Somebody who has turned animation off in their system does not get a thing
   that rocks all day in the corner of the window. The thinking face stays,
   and it is the face and the words that were carrying the meaning anyway. */
@media (prefers-reduced-motion: reduce) {
  .mark.mk-rocking .mk-beamset, .mark.mk-rocking .mk-pan-l,
  .mark.mk-rocking .mk-pan-r { animation: none; }
  .mark .mk-line, .mark .mk-beam, .mark .mk-dish, .mark .mk-post,
  .mark .mk-pivot, .mark .mk-beamset, .mark .mk-pan { transition: none; }
}

/* On the dark header the thin blue reads; on the white sign-in card it needs
   to be a shade deeper to carry the same weight. */
.gbrand { --mark-line: #2F7FA8; --mark-coat: #EAF3F9; --mark-cup: #2F7FA8;
  --mark-steth: #24506B; --mark-snake: #3E8F5C; }
/* Messages: a list of threads on one side, the thread being read on the other. */
/* A name that opens the person's own page. */
.linky { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line2); cursor: pointer; }
.linky:hover { color: var(--accent); text-decoration-color: var(--accent); }
.msgrow { width: 100%; text-align: left; }
.msgrow.unread b { font-weight: 700; }
.msgrow.here { border-color: var(--accent); background: var(--accent-bg); }
.msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.msg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff; }
.msg.mine { background: var(--accent-bg); border-color: var(--accent-bg); }
.msg.answer { border-color: var(--accent); }
/* Somebody brought in, somebody gone: a line about the conversation rather
   than a line in it, so it is set quieter than what people said. */
.msg.aside { border-style: dashed; background: transparent; }
.msg.aside .msgtext { color: var(--muted); font-size: 13px; }
.msgtext { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.5; }
textarea { width: 100%; min-height: 60px; font: inherit; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
  resize: vertical; }

/* --- the dropdowns ------------------------------------------------------- */
/* Until 1.13.0 these had no style of their own anywhere in the program, so
   every one of them was drawn by the browser at whatever size the platform
   liked: on a tablet a strip twenty-odd pixels high with an arrow of seven.
   Beside a 56-pixel button in touch mode they were the one control nobody
   could hit. They are fields now, like the text boxes they sit next to, and
   the touch size below makes them as big as the buttons.

   The width is deliberately left alone: these sit in `.field` rows that
   already size themselves, and nothing should move when this is turned on.
   `appearance: none` takes the platform's arrow away, so one is drawn here --
   a data: image, which the policy allows (`img-src 'self' data:`). Tapping
   the control still opens the platform's own picker, which is what should
   happen: that list is drawn by the device at the device's own size. */
select { font: inherit; color: var(--ink); background-color: #fff;
  min-height: 44px; padding: 0 36px 0 12px;
  border: 1px solid #B9C3CD; border-radius: 8px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  max-width: 100%; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2341505E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 12px 8px; }
select:hover { border-color: var(--accent); }
select:disabled { color: var(--muted); background-color: #F6F8FA; cursor: not-allowed;
  opacity: 1; }
/* The list itself is the platform's, but the size it is asked for is ours. */
select option { font-size: inherit; }
.gchoice.off { opacity: .55; }
/* What an account that only reads is told in place of the configurations. */
.readnote { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--accent-bg); color: var(--ink2);
  font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.readnote b { color: var(--ink); }
/* (not .grow: the main layout already uses that name for a column) */
.gfoot { text-align: right; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--line2); }
.gfoot .btn { display: inline-flex; width: auto; }

/* --- who is signed in, in the header ------------------------------------ */
.who { font-size: 12.5px; color: #C5D2DC; white-space: nowrap; }
.ghost { background: transparent; color: #C5D2DC; border: 1px solid #44525F; border-radius: 8px;
  min-height: 32px; padding: 0 12px; font-size: 13px; }
.ghost:hover { color: #fff; border-color: #7FC4E8; }
.pill.reading { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }

/* --- the files page ------------------------------------------------------ */
.path { display: inline-block; padding: 7px 10px; background: #F6F8FA; border: 1px solid var(--line);
  border-radius: 6px; word-break: break-all; max-width: 100%; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.gwarn { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.5; background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-ink); }

/* --- touch: bigger targets, and text that reads from a distance ---------- */
/* One switch in the header turns this on; a device with a coarse pointer
   starts with it on. Nothing moves -- the same layout, at a size a gloved
   finger can hit and an eye can read from a metre away. */
html[data-touch="on"] body { font-size: 18px; }
html[data-touch="on"] button, html[data-touch="on"] input,
html[data-touch="on"] select, html[data-touch="on"] textarea { font-size: 18px; }
html[data-touch="on"] .btn { min-height: 64px; padding: 0 26px; font-size: 18px; }
html[data-touch="on"] .nav button { min-height: 64px; font-size: 18px; padding: 12px 14px; }
html[data-touch="on"] .seg button { min-height: 56px; padding: 0 22px; font-size: 17px; }
html[data-touch="on"] .chips button { min-height: 56px; padding: 0 22px; font-size: 17px; }
/* The dropdowns, which is what this switch was missing. A 44-pixel field
   becomes a 64-pixel one, the arrow grows with it, and the hit area is the
   whole control rather than the arrow. */
html[data-touch="on"] select { min-height: 64px; padding: 0 52px 0 18px;
  background-size: 16px 11px; background-position: right 16px center;
  border-width: 2px; }
html[data-touch="on"] textarea { min-height: 110px; padding: 14px 16px; }
html[data-touch="on"] .quit, html[data-touch="on"] .ghost { min-height: 52px; padding: 0 20px;
  font-size: 16px; }
html[data-touch="on"] .check { min-height: 60px; font-size: 17px; }
html[data-touch="on"] .check input { width: 30px; height: 30px; }
html[data-touch="on"] h1 { font-size: 30px; }
html[data-touch="on"] h2 { font-size: 20px; }
html[data-touch="on"] .tile .v { font-size: 21px; }
html[data-touch="on"] .tile .k, html[data-touch="on"] .tile .s { font-size: 15px; }
html[data-touch="on"] .badge { font-size: 15px; padding: 5px 11px; }
html[data-touch="on"] td { padding: 16px 12px; font-size: 17px; }
html[data-touch="on"] th { padding: 16px 12px; font-size: 15px; }
html[data-touch="on"] td .idbtn { min-height: 56px; min-width: 92px; font-size: 17px; }
html[data-touch="on"] .lane > button { flex-basis: 96px; min-height: 56px; font-size: 16px; }
html[data-touch="on"] .track, html[data-touch="on"] .segm { height: 40px; }
html[data-touch="on"] .segm { font-size: 13px; }
html[data-touch="on"] .log .lines { font-size: 15px; max-height: 420px; }
html[data-touch="on"] .log .ln { padding: 6px 8px; grid-template-columns: 56px 48px minmax(0, 1fr); }
html[data-touch="on"] .field input { min-height: 62px; font-size: 17px; }
html[data-touch="on"] .prm input { width: 130px; min-height: 56px; font-size: 17px; }
html[data-touch="on"] .prm { min-height: 58px; font-size: 17px; }
html[data-touch="on"] .gfield input { min-height: 64px; font-size: 20px; padding: 0 18px; }
html[data-touch="on"] .gfield label { font-size: 16px; }
html[data-touch="on"] .gcard { max-width: 560px; padding: 30px 30px 28px; }
html[data-touch="on"] .gcard.wide { max-width: 1000px; }
html[data-touch="on"] .gchoice { padding: 22px 24px; }
html[data-touch="on"] .gchoice b { font-size: 20px; }
html[data-touch="on"] .gchoice .gabout { font-size: 15px; }
html[data-touch="on"] .muted, html[data-touch="on"] .card .sub { font-size: 15px; }
html[data-touch="on"] .small { font-size: 14px; }

/* --- the on-screen keyboard ---------------------------------------------- */
/* Drawn here, from nothing: the machine it runs on may have no network and no
   keyboard of its own. */
.kbopen { position: absolute; z-index: 40; padding: 0; font-size: 15px; line-height: 1;
  border: 1px solid #C9D1D9; border-radius: 6px; background: #F6F8FA;
  color: var(--accent); opacity: .85; }
.kbopen:hover { opacity: 1; background: var(--accent-bg); }
.kbopen[hidden] { display: none !important; }
.kb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #1B2733;
  border-top: 1px solid #38485A; padding: 10px 12px 14px; box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.kb[hidden] { display: none !important; }
html[data-kb="open"] body { padding-bottom: 54vh; }
/* The sign-in card is centred in the window, so with the keyboard up it would
   sit behind it. While the keyboard is open the card moves to the top, where
   every field of it is above the keys. */
html[data-kb="open"] .gate { align-items: flex-start; padding-top: 12px;
  padding-bottom: 54vh; min-height: auto; }
.kbhead { display: flex; align-items: center; gap: 12px; padding: 0 2px 10px; }
.kbname { color: #9FB0BF; font-size: 14px; white-space: nowrap; }
.kbvalue { flex: 1 1 auto; min-width: 0; color: #fff; font-size: 20px; background: #0F1821;
  border: 1px solid #38485A; border-radius: 8px; padding: 8px 12px; min-height: 42px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbrows { display: flex; flex-direction: column; gap: 8px; }
.kbrow { display: flex; gap: 8px; }
.kb .k { flex: 1 1 0; min-width: 0; min-height: 58px; border-radius: 8px; border: 1px solid #44566A;
  background: #2A3A4A; color: #EDF2F6; font-size: 20px; font-weight: 500; }
.kb .k:active { background: var(--accent); border-color: var(--accent); }
.kb .kbmod { background: #1F2C38; color: #BBC9D5; font-size: 16px; }
.kb .kbmod.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kb .kbenter { background: #1E5E3C; border-color: #2A7A50; color: #fff; }
.kb .kbsmall { flex: 0 0 auto; min-height: 42px; padding: 0 16px; font-size: 15px; }
.kb .kbdone { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 560px) { .kb .k { min-height: 48px; font-size: 17px; } }

/* --- people, roles and what was asked for -------------------------------- */
.rolepill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 3px 10px; background: #EEF1F4; color: var(--ink2); white-space: nowrap; }
.rolepill.r-admin { background: #15202B; color: #fff; }
.rolepill.r-chief { background: #1F3A57; color: #D7E8F5; }
.rolepill.r-leader, .rolepill.r-manager, .rolepill.r-phd, .rolepill.r-scientist {
  background: var(--accent-bg); color: var(--accent); }
.rolepill.r-member { background: #EEF1F4; color: var(--muted); }
.askrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 12px; background: #F6F8FA; border-radius: 8px; }
.askrow .askwhat { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.who.link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.who.link:hover { color: #fff; }
html[data-touch="on"] .rolepill { font-size: 15px; padding: 5px 12px; }
html[data-touch="on"] .askrow { padding: 14px 16px; }

/* Nothing in the window runs out of its box: every long word, path or
   identifier may break, and a table that cannot fit scrolls instead. */
.card, .tile, .strip, .banner, .empty, .gchoice { min-width: 0; overflow-wrap: anywhere; }
.head > div:first-child { min-width: 0; }
h1, h2, .tile .v, .gchoice b { overflow-wrap: anywhere; }
.path { overflow-wrap: anywhere; word-break: break-word; }

/* --- saved settings ------------------------------------------------------ */
.savedbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
.savedbox .field input { flex: 0 1 260px; }
html[data-touch="on"] .savedbox .field input { min-height: 62px; }