/* BioM3 Q-Former console — house visual language.
   Tokens are copied from biom3-demo so this console, biom3-demo and
   console.ranganathanlab.org read as one body of work; keep them diffable.
   Colour carries information, never decoration: the product title and the
   measured d_E are red; alpha-sweep arm marks are the house blue; everything
   else is ink on ground. */

:root {
  --black:   #FFFFF8;                /* lab-house ivory */
  --parch:   #0A0A0A;
  --text:    #0A0A0A;
  --dim:     rgba(10,10,10,0.68);
  --faint:   rgba(10,10,10,0.56);
  --line:    rgba(10,10,10,0.17);
  --logo:    #0A0A0A;
  --ecru:    #90711A;
  --blue:    #407F8F;
  --green:   #637F27;
  --red:     #D2441E;
  --panel:   rgba(10,10,10,0.025);
  --field:   rgba(10,10,10,0.040);   /* the two inputs that carry the request */
  --fieldln: rgba(10,10,10,0.22);
  --title:   #8E2B14;                /* house red, darkened for the cream ground */
  --sans:    'Space Grotesk','IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:    'IBM Plex Mono','JetBrains Mono',Menlo,monospace;
  --display: 'Archivo','Space Grotesk',system-ui,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --black:#000000; --parch:#FBF3EF; --text:#FBF3EF; --logo:#FBF3EF;
    --dim:rgba(251,243,239,0.72); --faint:rgba(251,243,239,0.42);
    --line:rgba(251,243,239,0.13);
    --ecru:#DFBA51; --blue:#74B1C1; --green:#B2D26E; --red:#E04C24;
    --panel:rgba(251,243,239,0.04);
    --field:rgba(251,243,239,0.065); --fieldln:rgba(251,243,239,0.22);
    --title:#E8603A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --black:#000000; --parch:#FBF3EF; --text:#FBF3EF; --logo:#FBF3EF;
  --dim:rgba(251,243,239,0.72); --faint:rgba(251,243,239,0.42);
  --line:rgba(251,243,239,0.13);
  --ecru:#DFBA51; --blue:#74B1C1; --green:#B2D26E; --red:#E04C24;
  --panel:rgba(251,243,239,0.04);
  --field:rgba(251,243,239,0.065); --fieldln:rgba(251,243,239,0.22);
  --title:#E8603A;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── chrome ─────────────────────────────────────────────────────────────── */

header { padding: 22px 40px; display: flex; align-items: center; gap: 16px;
         border-bottom: 1px solid var(--line); }
.wm { display:flex; align-items:center; gap:9px; font-family:var(--mono);
      font-size:13px; letter-spacing:.2em; white-space:nowrap; color:var(--text); }
.wm svg { width:30px; height:13px; flex:0 0 30px; }
.who { margin-left:auto; font-family:var(--mono); font-size:12px;
       letter-spacing:.06em; color:var(--faint); display:flex; align-items:center; gap:14px; }
.theme-t { background:transparent; color:var(--faint); border:1px solid var(--line);
  border-radius:3px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; cursor:pointer; }
.theme-t:hover { color:var(--text); border-color:var(--dim); }

main { flex:1; width:100%; max-width:1100px; margin:0 auto;
       padding-left:max(16px, env(safe-area-inset-left, 0px));
       padding-right:max(16px, env(safe-area-inset-right, 0px));
       padding-block:0 72px; }

footer { padding:0 40px 24px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
footer a { color:var(--faint); text-decoration:none; border-bottom:1px solid var(--line); }
footer a:hover { color:var(--title); border-bottom-color:var(--title); }
.rlab { width:13px; height:13px; vertical-align:-2px; margin-right:7px; }

/* ── title ──────────────────────────────────────────────────────────────── */

.masthead {
  color: var(--title);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .105em;
  font-size: clamp(21px, 3.0vw, 33px);
  line-height: 1.16;
  max-width: 14em;
  margin: 34px 0 0;
  text-wrap: balance;
}
.masthead + .rule {
  height: 1px;
  background: color-mix(in srgb, var(--title) 38%, transparent);
  margin: 16px 0 34px;
}

/* ── form ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: 22px; }
label.lab { display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
label.lab .r { float:right; text-transform:none; letter-spacing:.04em; }

textarea, input[type="text"], select {
  width:100%; background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:4px; padding:11px 13px;
  font-family:var(--sans); font-size:15px; font-weight:300; line-height:1.55;
}
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--title); }
textarea { resize:vertical; }

/* The two request fields are filled; everything that only sets a parameter
   stays a bare underline. The fill separates "what you are asking for" from
   "how to run it". */
form textarea {
  min-height:70px; background:var(--field); border-color:var(--fieldln);
}
textarea.seq, .seqmono, input.seq {
  font-family:var(--mono); font-size:13.5px; letter-spacing:.04em;
  line-height:1.8; word-break:break-all;
}

.famsel { margin-bottom:26px; }
.famsel select, .params select {
  width:auto; min-width:7em; background:transparent; color:var(--dim);
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:3px 2px; font-family:var(--mono); font-size:13px;
  letter-spacing:.02em; cursor:pointer;
}
.famsel select option, .params select option {
  font-family:var(--mono); font-size:13px; background:var(--black); color:var(--text);
}
.famsel select:focus, .params select:focus { outline:none; border-bottom-color:var(--title); color:var(--text); }

.params { display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
.params .p { display:inline-flex; align-items:baseline; gap:8px; }
.params label { font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.06em; }
.params input[type=number] {
  width:68px; background:transparent; color:var(--dim);
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:3px 2px; font-family:var(--mono); font-size:13px;
  font-variant-numeric:tabular-nums;
}
.params input[type=number]:focus { outline:none; border-bottom-color:var(--title); color:var(--text); }
.spacer { margin-left:auto; }

button.primary, button.ghost {
  font-family:var(--sans); font-size:15px; font-weight:400;
  padding:13px 30px; border-radius:4px; cursor:pointer;
  transition:background .16s, border-color .16s, color .16s, filter .16s;
}
button.primary { background:var(--title); color:var(--black); border:1px solid var(--title); }
button.primary:hover { filter:brightness(1.12); }
button.primary:disabled { opacity:.45; cursor:default; filter:none; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button.ghost:hover { border-color:var(--title); color:var(--title); }
button.ghost.sm { font-size:13px; padding:9px 18px; }
button.ghost:disabled { opacity:.45; cursor:default; }
.tbtn { font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; border:1px solid var(--line);
  border-radius:3px; background:transparent; color:var(--faint); cursor:pointer; }
.tbtn:hover { color:var(--title); border-color:var(--title); }

/* ── panels, sections, provenance ───────────────────────────────────────── */

.panel { border:1px solid var(--line); border-radius:5px; padding:20px;
         margin-bottom:20px; background:var(--panel); }
.panel-hd, .ph { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-hd h3, .ph h3 { font-size:15px; font-weight:500; }

.asec { padding-top:26px; }
.asec + .asec { border-top:1px solid var(--line); margin-top:30px; }
.ahead { font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:12.5px; color:var(--faint); margin:0 0 12px; }
.anum { color:var(--title); margin-right:.7em; font-variant-numeric:tabular-nums; }
.anum::after { content:"."; }

.mrow { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.mname { font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:15px; color:var(--faint); white-space:nowrap; }
/* d_E is a symbol, not a word: the lowercase d is the quantity's name. */
.mname.sym { text-transform:none; letter-spacing:.04em; }
.mname.sym .w { text-transform:uppercase; letter-spacing:.09em; }
.metric { font-family:var(--mono); font-size:28px; font-variant-numeric:tabular-nums; }
.mrow .metric { color:var(--title); }
.unit { font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:5px; }

.prov, .note { font-family:var(--mono); font-size:11.5px; color:var(--faint);
  letter-spacing:.02em; line-height:1.6; }
.note strong { color:var(--dim); font-weight:500; }
.na { font-style:italic; color:var(--faint); font-size:14px; }
.bad { color:var(--red); font-size:13px; line-height:1.5; }

details.exp > summary { list-style:none; cursor:pointer; }
details.exp > summary::-webkit-details-marker { display:none; }
details.exp > summary:focus-visible { outline:1px solid var(--title); outline-offset:3px; }
.q { margin-left:auto; width:19px; height:19px; flex:0 0 19px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  font-family:var(--mono); font-size:11px; line-height:1; color:var(--faint);
  cursor:pointer; background:transparent; }
.q:hover, details.exp[open] .q { color:var(--title); border-color:var(--title); }
details.exp .body { font-size:13.5px; color:var(--dim); line-height:1.62;
  margin-top:10px; max-width:52em; border-left:1px solid var(--line); padding-left:14px; }

/* compute provenance: the record you would paste into a notebook */
table.cx { border-collapse:collapse; font-family:var(--mono); font-size:12px; width:auto; }
table.cx td { border:0; padding:2px 16px 2px 0; vertical-align:top; }
table.cx td:first-child { color:var(--faint); white-space:nowrap; letter-spacing:.04em; }
table.cx td:last-child { color:var(--dim); overflow-wrap:anywhere; }

table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  padding:0 10px 7px 0; border-bottom:1px solid var(--line); }
td { padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
td.num { font-family:var(--mono); font-variant-numeric:tabular-nums;
         text-align:right; padding-right:18px; white-space:nowrap; }
.tw { overflow-x:auto; }

/* generated sequences: mono, wrapped, and the id column narrow */
table.seqs td.id { font-family:var(--mono); font-size:11.5px; color:var(--faint);
  letter-spacing:.06em; white-space:nowrap; width:1%; }
table.seqs td.s { font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  line-height:1.75; word-break:break-all; }
/* d_E below the natural p95 is on-manifold; above 60 the design collapsed.
   Both are statements about the measurement, so both get colour. */
table.seqs tr.good td.num { color:var(--green); }
table.seqs tr.coll td.num { color:var(--red); }

.arm { font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin:22px 0 6px;
  border-bottom:1px solid var(--line); padding-bottom:5px; }

.legend { display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono);
  font-size:11px; color:var(--faint); margin-top:10px; align-items:center; }
.legend i { display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px; }

.spin { display:inline-block; width:11px; height:11px;
  border:1.5px solid var(--line); border-top-color:var(--title);
  border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px; }
@keyframes sp { to { transform:rotate(360deg); } }

.actions, .acts { display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.status { font-family:var(--mono); font-size:12px; color:var(--faint);
          font-variant-numeric:tabular-nums; }

/* a limitation sits where the result is, never collected at the end */
.caveat { border-left:2px solid var(--title); padding:2px 0 2px 14px;
  margin-top:16px; font-size:13.5px; color:var(--dim); line-height:1.62;
  max-width:52em; }
.caveat code { font-family:var(--mono); font-size:12.5px; }
.err { border-left:2px solid var(--red); padding:2px 0 2px 14px; margin-top:16px;
  font-family:var(--mono); font-size:12.5px; color:var(--red);
  white-space:pre-wrap; line-height:1.6; }

/* ── sign-in ────────────────────────────────────────────────────────────── */

.signin { max-width:460px; margin:14vh auto 0; }
.signin .masthead { margin-top:0; }
.signin input[type=text] { background:var(--field); border-color:var(--fieldln);
  font-family:var(--mono); font-size:13px; }

@media (max-width:820px) {
  header { padding:18px 20px; } footer { padding:0 20px 20px; }
  .params { gap:16px; }
  button.primary, button.ghost { flex:1; min-height:46px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }