@import url("tokens.css");

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--limestone);color:#1B2A33;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}

.shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.rail{background:#fff;border-right:1px solid #E3DFD3;display:flex;flex-direction:column}
.brand{padding:18px 16px;border-bottom:1px solid #E3DFD3;background:var(--navy);color:#fff}
.brand h1{font-size:15px;text-transform:uppercase;letter-spacing:.14em}
.brand .sub{font-size:11px;opacity:.75;margin-top:3px;letter-spacing:.06em}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}
.rail-head span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6D7A82}
.runlist{flex:1;overflow:auto;padding:0 8px 12px}
.runitem{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:9px 10px;border-radius:3px;cursor:pointer}
.runitem:hover{background:var(--row-shade)}
.runitem.on{background:var(--row-shade);border-left-color:var(--navy)}
.runitem .t{font-weight:600;font-size:13px}
.runitem .m{font-size:11px;color:#6D7A82;margin-top:2px}
.rail-foot{padding:10px 14px;border-top:1px solid #E3DFD3;font-size:11px;color:#6D7A82}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid #E3DFD3;padding:14px 22px;display:flex;
  gap:14px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:9}
.topbar h2{font-size:17px}
.body{padding:22px;max-width:1200px;width:100%}

.card{background:#fff;border:1px solid #E3DFD3;border-radius:5px;padding:18px;margin-bottom:16px}
.card>h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6D7A82;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px}
label.f{display:block}
label.f>span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:#6D7A82;margin-bottom:4px}
/* Units are never uppercased. CSS text-transform mangles the micro sign, and a label
   reading "(MG)" where the field means micrograms is a thousand-fold error rendered in
   the interface -- the exact trap the schema stores protein in ug to avoid. */
label.f>span .unit{text-transform:none;letter-spacing:0;font-weight:600;color:#42525C}
input,select{width:100%;padding:8px 10px;border:1px solid #D8D2C4;border-radius:3px;background:#fff}
input.amber{background:var(--input-amber)}
input:focus,select:focus{outline:2px solid var(--discovery);outline-offset:-1px}

.btn{padding:9px 15px;border:1px solid var(--navy);background:var(--navy);color:#fff;
  border-radius:3px;cursor:pointer;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.ghost:hover{background:var(--row-shade);filter:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hint{font-size:12.5px;color:#5E6B73;line-height:1.55}
.unit{color:#6D7A82;font-size:11px}

.plate{display:grid;gap:2px;overflow:auto}
.w{aspect-ratio:1;border-radius:50%;border:1px solid #E3DFD3;background:#F2EFE6;
  display:flex;align-items:center;justify-content:center;font-size:7px;color:#42525C;
  min-width:20px;position:relative}
.w.f96{width:34px}.w.f384{width:17px;font-size:0}
.w[data-role=TOTAL],.w[data-role=TB]{background:var(--calc-blue);border-color:#9FBACB}
.w[data-role=NSB]{background:#E4DCEA;border-color:#B9A8C6}
.w[data-role=SAMPLE]{background:var(--amber);border-color:#E0AE31}
.w[data-role=VEHICLE]{background:#EDE7D8}
.w[data-role=E_MAX_CONTROL]{background:var(--discovery);border-color:#4F8F93}
.w[data-role=STD]{background:#fff;border:1px dashed var(--navy)}
.w[data-role=STABILITY]{background:#D9E7D9}
.w[data-role=EMPTY]{background:#F7F5EE;border-color:#EDEAE0}
.w.filled{box-shadow:inset 0 0 0 2px var(--navy)}
/* a well set aside: the reading stays visible under a red-dirt cross, and the colour it had
   is dimmed so the eye reads "not counted" before it reads the role */
.w.excluded{opacity:.55}
.w.excluded::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:
    linear-gradient(45deg,transparent 44%,var(--red-dirt) 44%,var(--red-dirt) 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--red-dirt) 44%,var(--red-dirt) 56%,transparent 56%);
  pointer-events:none}
.plate.clickable .w.filled{cursor:pointer}
.plate.clickable .w.filled:hover{outline:2px solid var(--discovery);outline-offset:1px}
.w.picked{outline:2px solid var(--red-dirt);outline-offset:1px}
.wellpanel{margin-top:14px;border:1px solid #D8D2C4;border-left:3px solid var(--red-dirt);
  border-radius:3px;padding:12px 14px;background:#FBF9F2;font-size:13px}
.wellpanel .t{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}
.wellpanel .t b{font-size:14px}
.wellpanel .was{background:#FBF2F0;border:1px solid #E7C9C2;border-radius:3px;padding:8px 10px;margin-bottom:10px}
.wellpanel .row{margin-top:10px;align-items:flex-end}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#5E6B73}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:5px;
  vertical-align:-1px;border:1px solid #C9C2B2}
.legend i.aside{position:relative}
.legend i.aside::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:
  linear-gradient(45deg,transparent 40%,var(--red-dirt) 40%,var(--red-dirt) 60%,transparent 60%),
  linear-gradient(-45deg,transparent 40%,var(--red-dirt) 40%,var(--red-dirt) 60%,transparent 60%)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6D7A82;
  padding:7px 9px;border-bottom:1px solid #E3DFD3}
td{padding:6px 9px;border-bottom:1px solid #F0ECE1}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.gate{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:3px;margin-bottom:5px;
  border-left:3px solid #E3DFD3;background:#FCFBF7}
.gate .code{font-size:11px;letter-spacing:.05em;text-transform:uppercase;min-width:210px;font-weight:600}
.gate .msg{font-size:12.5px;color:#42525C}
.gate.pass{border-left-color:var(--discovery)}
.gate.fail{border-left-color:var(--red-dirt);background:#FBF2F0}
.gate.fail .code{color:var(--red-dirt)}
.gate.not_evaluated{border-left-color:var(--navy);background:#F4F6F8}
.gate.not_evaluated .code{color:var(--navy)}
.pill{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;
  border-radius:2px;border:1px solid #D8D2C4;color:#5E6B73}
.pill.draft{border-color:var(--amber);background:#FEF6E2;color:#8A6414}
.empty{padding:48px 20px;text-align:center;color:#6D7A82}
.err{background:#FBF2F0;border:1px solid var(--red-dirt);color:#7E2418;padding:10px 12px;
  border-radius:3px;font-size:13px;margin-bottom:12px}
svg{display:block;width:100%;height:auto}

/* ---- Layer 1: the review surface (BRIEF_2026-09-10_review-surface.md) ---- */
.pill.submitted{border-color:var(--discovery);background:#EAF4F4;color:#2F6B6E}
.pill.approved{border-color:var(--navy);background:var(--navy);color:#fff}
.pill.changes_requested{border-color:var(--red-dirt);background:#FBF2F0;color:#7E2418}
.pill.rejected{border-color:#6D7A82;background:#EEEEEA;color:#42525C}
.queue-btn{margin:4px 14px 8px;padding:8px 10px;border:1px solid #E3DFD3;border-radius:4px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.queue-btn:hover{background:var(--row-shade)}
.sec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6D7A82;margin:14px 0 6px}
.gate .sev{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:2px;border:1px solid #E3DFD3;color:#6D7A82}
.gate.fail .sev{border-color:var(--red-dirt);color:var(--red-dirt)}
.gate.warn{border-left-color:var(--amber);background:#FFFBEE}
.gate.warn .sev{border-color:#E0AE31;color:#8A6414}
.gate.info{border-left-color:#B9C6CE;background:#F8F9FA}
.gate .msg{flex:1 1 300px}
.gate{flex-wrap:wrap}
.kv{font-size:12.5px}
.kv b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6D7A82;font-weight:600}
.kv .src{display:inline-block;margin-left:2px;font-size:10px;padding:1px 6px;border-radius:2px;background:#EAF4F4;color:#2F6B6E;letter-spacing:.05em;text-transform:uppercase}
.curves{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.curve{border:1px solid #E3DFD3;border-radius:4px;padding:10px;background:#FCFBF7}
.curve .t{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:6px}
.curve .t b{font-variant-numeric:tabular-nums;text-align:right}
.diff{border-left:3px solid var(--amber);background:#FFFBEE;padding:10px 12px;border-radius:3px;font-size:12.5px}
.diff ul{margin:0;padding-left:18px}.diff li{margin:2px 0}
.diff .old{color:#6D7A82;text-decoration:line-through;margin-right:4px}
.decide{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.btn.warn{background:#fff;color:var(--red-dirt);border-color:var(--red-dirt)}
.btn.warn:hover{background:#FBF2F0;filter:none}
textarea{width:100%;min-height:64px;border:1px solid #D8D2C4;border-radius:3px;padding:8px 10px;font:inherit;background:var(--input-amber);resize:vertical}
textarea:focus{outline:2px solid var(--discovery);outline-offset:-1px}
label.lbl{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6D7A82;font-weight:600;margin-bottom:4px}
.frozen{border:1px dashed var(--navy);background:#F4F6F8;padding:10px 12px;border-radius:3px;font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.frozen .who{font-weight:600}
.sentback{border-left:3px solid var(--red-dirt);background:#FBF2F0;padding:10px 12px;border-radius:3px;font-size:13px;margin-bottom:16px}
.qrow{cursor:pointer}.qrow:hover td{background:var(--row-shade)}
@media (max-width:760px){.decide{grid-template-columns:1fr}}

/* ---- compound inventory (Layer 1 proper, slice 1) ---- */
.total-mg{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.crow{cursor:pointer}.crow:hover td{background:var(--row-shade)}
tr.batch td{background:var(--row-shade);font-weight:600}
tr.cont td:first-child{padding-left:28px;position:relative;font-weight:400}
tr.cont td:first-child::before{content:"";position:absolute;left:14px;top:0;bottom:50%;width:8px;
  border-left:1px solid #C9C2B2;border-bottom:1px solid #C9C2B2}
.path{font-size:11.5px;color:#42525C}.path .sep{color:#B0A896}
.ev{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:2px;
  background:var(--calc-blue);color:var(--navy);white-space:nowrap}
.ev.out{background:#FBF2F0;color:#7E2418}
.ev.in{background:#DDEFE3;color:#1F5A3A}
.pill.sched{background:#FBF2F0;border-color:#E7C9C2;color:#7E2418}
.src{display:inline-block;margin-left:4px;font-size:10px;padding:1px 6px;border-radius:2px;background:#EAF4F4;color:#2F6B6E;letter-spacing:.05em;text-transform:uppercase}
label.f[hidden]{display:none}   /* the attribute alone loses to label.f{display:block} */

/* ---- the notebook (Layer 1 proper, slice 2) ---- */
.nb-body{width:100%;min-height:260px;border:1px solid #D8D2C4;border-radius:3px;padding:12px 14px;font:13.5px/1.6 ui-monospace,Menlo,monospace;background:var(--input-amber);white-space:pre-wrap;resize:vertical}
.nb-body.locked{background:#F4F6F8;border:1px dashed var(--navy);cursor:default}
.chip{display:inline-block;padding:1px 8px;border-radius:12px;background:#DDEFE3;color:#1F5A3A;font-size:11.5px;font-weight:600;border:1px solid #A9D5B8;vertical-align:baseline;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;white-space:nowrap}
.chip.pending{background:#FFFBEE;color:#8A6414;border-color:#E0AE31}
.chip.posted{background:#DDEFE3}
.items{margin-top:10px}
.item{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:7px 10px;border-left:3px solid var(--amber);background:#FFFBEE;border-radius:3px;margin-bottom:5px;font-size:12.5px}
.item.posted{border-left-color:var(--discovery);background:#EAF4F4}
.item b{font-variant-numeric:tabular-nums}
.amend{border-left:3px solid var(--navy);background:#F4F6F8;padding:8px 12px;border-radius:3px;margin-top:8px;font-size:13px}
.sigline{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;padding:10px 12px;border:1px solid #E3DFD3;border-radius:3px;background:#FCFBF7}
.sigline b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6D7A82}
.pill.signed{border-color:var(--navy);background:var(--navy);color:#fff}
.pill.witnessed{border-color:#1F5A3A;background:#DDEFE3;color:#1F5A3A}
.pill.due{border-color:#E0AE31;background:#FFFBEE;color:#8A6414}
.pill.late{border-color:var(--red-dirt);background:#FBF2F0;color:#7E2418}
/* ---- the registry front (slice 4) ---- */
td.ik code{font-size:11px;letter-spacing:.02em}
#cmp-identity[hidden]{display:none}

/* the vault export card (direction 2026-09-12) */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.tbl td{padding:4px 8px;border-bottom:1px solid #EEEAE0}
.tbl td.n{text-align:right;font-variant-numeric:tabular-nums;color:#1F2A33;font-weight:600}
.tbl td.k{color:#6D7A82;font-family:ui-monospace,Menlo,monospace}


/* ===== P3-3 (2026-09-12c) · one identity, the page as a document, the history as a timeline ===== */
.me{margin:10px 12px 4px;padding:10px 12px;border:1px solid #E0AE31;background:#FFFBEE;border-radius:5px}
.me .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#8A6414}
.me .n{font-weight:700;font-size:14px;color:var(--navy);display:flex;gap:8px;align-items:center}
.me .n small{font-weight:400;font-size:11px;color:#6D7A82}
.me .n a{font-size:11px;margin-left:auto;color:var(--navy);font-weight:400}
.me .me-unset{color:var(--red-dirt);font-weight:600}
.me .me-hint{font-size:11px;color:#6D7A82;line-height:1.4;margin-top:3px}
.me .me-edit{display:flex;gap:6px;margin-top:6px}
.me .me-edit[hidden]{display:none}
.me.attention{animation:me-pulse 1.2s ease-in-out 2}
@keyframes me-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px #FECC4E}}
.signing-as b{color:var(--navy)}
.nb-doc{font:14.5px/1.75 "Source Serif 4",Georgia,serif;max-width:820px;padding:4px 2px}
.nb-doc p{margin:0 0 10px}
.nb-doc.locked{border-left:3px solid var(--navy);padding-left:14px}
.nb-doc .chip{display:inline-flex;gap:6px;align-items:baseline;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;white-space:normal}
.nb-doc .chip .bal{font-weight:400;color:#5E6B73;border-left:1px solid #E0AE31;padding-left:6px;white-space:nowrap}
.nb-doc .chip.posted .bal{border-left-color:#A9D5B8}
.nb-editor{margin-top:8px}
.tl{position:relative;margin-left:14px;padding-left:22px;border-left:2px solid #E3DFD3}
.tday{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#6D7A82;margin:8px 0 4px;position:relative}
.tday::before{content:"";position:absolute;left:-26px;top:6px;width:6px;height:6px;border-radius:50%;background:#E3DFD3}
.tev{position:relative;padding:4px 0 12px}
.tev::before{content:"";position:absolute;left:-29px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--discovery);border:2px solid #fff;box-shadow:0 0 0 1px #E3DFD3}
.tev.in::before{background:#1F5A3A}
.tev.out::before{background:var(--red-dirt)}
.tev.count::before{background:#E0AE31}
.tev .h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tev .h b{font-variant-numeric:tabular-nums}
.tev .d{font-size:12px;color:#6D7A82}
.tev .r{font-size:12.5px;color:#42525C}
.tev .bal{margin-left:auto;font:600 12px ui-monospace,Menlo,monospace;color:var(--navy)}
@media (prefers-reduced-motion: reduce){.me.attention{animation:none;box-shadow:0 0 0 3px #FECC4E}}

/* Phase 4 item 1 (2026-09-12c): assay results on the compound page */
.roll td b{font-size:15px}
.ub{color:var(--red-dirt)}
.kdsrc{font-size:11px;color:#8A6414;background:#FFFBEE;border:1px solid #E0AE31;border-radius:10px;padding:0 7px;white-space:nowrap}
#results-empty .btn{margin-top:10px}