/* ============================================================
   BRAND TOKENS
   Biostream signal colours carried onto a light board. The dark
   field interface belongs on the device and in the operational
   product. A trusted research environment is used for hours at a
   time, on university and institutional desktops, often beside
   printed material, so the environment reads as paper rather than
   as a cockpit. The five brand colours below are unchanged in
   role and darkened only enough to hold contrast on white.
   Replace them with the exact brand guide values and every
   screen in this deck updates.
   ============================================================ */
:root{
  --brand-teal:#16686D;      /* primary action (POC design) */
  --brand-teal-lift:#0F5257; /* hover, focus, small text (POC design) */
  --control:#A87A22;         /* reserved: perimeter, suppression, airlock */
  --blocked:#AF432B;         /* reserved: a check that did not pass */
  --cleared:#2E7A59;         /* reserved: a check that passed */
  --paper:#10222A;           /* high emphasis text, the ink */

  /* tints, used behind the signal colours */
  --teal-wash:#E2EFEF;
  --control-wash:#F8F0DE;
  --blocked-wash:#F9E8E3;
  --cleared-wash:#E5F0EA;

  /* environment chrome */
  --base:#EFF4F6;
  --surface:#FFFFFF;
  --surface-2:#F7FAFB;
  --surface-3:#EDF3F5;
  --hairline:#D4E0E4;
  --hairline-soft:#E6EDEF;
  --text:#33474F;
  --muted:#647E88;
  --dim:#83969F;

  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --label:"Barlow Condensed","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--base);color:var(--text);
  font-family:var(--ui);font-size:15px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:500;color:var(--paper);letter-spacing:-.01em;}
p{margin:0 0 12px;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--brand-teal-lift);outline-offset:2px;}



.stage{max-width:1360px;margin:0 auto;padding:34px 26px 0;}
/* Sign in card fades and lifts away as the code is accepted... */
@keyframes appleave{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-14px);}}
.app.leaving{animation:appleave .5s ease both;pointer-events:none;}
/* ...then the environment fades and rises in on the first page after sign in. */
@keyframes appenter{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.stage.entering{animation:appenter .5s cubic-bezier(.33,.68,.28,1) both;}
@media (prefers-reduced-motion:reduce){.app.leaving,.stage.entering{animation:none;}}
.caption{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--hairline-soft);
}
.caption h2{font-size:22px;}
.caption span{font-size:13px;color:var(--dim);max-width:62ch;}

/* ---------- app shell ---------- */
.app{
  border:1px solid var(--hairline);background:var(--surface);
  border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px rgba(16,34,42,.10);
}
.topbar{
  display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;
  padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--hairline);
}
.wordmark{
  display:inline-block;width:101.5px;height:15.4px;
  background:url("../images/text-logo-dark.3dbc3100a7cf.png") left center/contain no-repeat;
  font-size:0;text-indent:-9999px;overflow:hidden;
}
.env{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--muted);padding-left:18px;border-left:1px solid var(--hairline);
}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);font-weight:500;}
.who form{margin:0;display:inline-flex;}
.whoemail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;}
.pill{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  border:1px solid var(--hairline);padding:3px 9px;border-radius:6px;color:var(--muted);
}
.pill.admin{border-color:var(--control);color:var(--control);}

/* SIGNATURE ELEMENT: the perimeter bar.
   Present on every screen. Amber means a control boundary and
   nothing else in this interface uses amber. */
.perimeter{
  display:flex;align-items:center;gap:14px;
  padding:9px 20px 9px 17px;
  background:linear-gradient(90deg,rgba(168,122,34,.11),rgba(168,122,34,0) 62%);
  border-bottom:1px solid var(--hairline);
  border-left:3px solid var(--control);
}
.perimeter .tag{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--control);font-weight:600;white-space:nowrap;
}
.perimeter .say{font-size:13px;color:var(--muted);}
.perimeter.gate{border-left-color:var(--blocked);background:linear-gradient(90deg,rgba(175,67,43,.11),rgba(175,67,43,0) 62%);}
.perimeter.gate .tag{color:var(--blocked);}
.perimeter.pass{border-left-color:var(--cleared);background:linear-gradient(90deg,rgba(46,122,89,.11),rgba(46,122,89,0) 62%);}
.perimeter.pass .tag{color:var(--cleared);}

.body{display:grid;grid-template-columns:214px 1fr;min-height:520px;}
.rail{background:var(--surface-2);border-right:1px solid var(--hairline);padding:16px 0;}
.rail-h{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--dim);padding:0 18px;margin-bottom:10px;
}
.rail a{
  display:block;padding:10px 18px;color:var(--text);text-decoration:none;
  font-size:14px;font-weight:500;border-left:3px solid transparent;
}
.rail a:hover{color:var(--paper);background:rgba(16,34,42,.04);}
.rail a.on{color:var(--brand-teal-lift);border-left-color:var(--brand-teal);background:var(--teal-wash);font-weight:600;}
.rail hr{border:none;border-top:1px solid var(--hairline-soft);margin:16px 0;}

.main{padding:26px 28px 34px;}
.eyebrow{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;font-weight:600;color:var(--brand-teal-lift);margin:0 0 8px;
}
.main h3{font-size:20px;margin-bottom:6px;}
.lede{font-size:14px;color:var(--muted);max-width:70ch;margin-bottom:22px;}

/* ---------- shared parts ---------- */
.card{background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;padding:20px;}
/* Wraps a data table: no padding and clipped corners so the header band
   fills to the edges instead of leaving a strip of card colour above it. */
.tablecard{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow:hidden;}
/* Field dictionary revealed inside a dataset card. */
.dict{margin-top:18px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow-x:auto;}
.dict[hidden]{display:none;}
.dict table{min-width:460px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.statcard{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:9px;padding:13px 15px;}
.statcard p{margin:0 0 3px;font-size:12.5px;color:var(--muted);font-weight:500;}
.statcard .v{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--paper);}

.field{margin-bottom:16px;}
.field label{
  display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--muted);margin-bottom:6px;
}
.input,.ta,.sel{
  width:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  color:var(--paper);font-family:var(--ui);font-size:14px;padding:10px 12px;
}
.ta{min-height:96px;resize:vertical;line-height:1.55;}
.input::placeholder,.ta::placeholder{color:#9BAEB6;}

.btn{
  display:inline-block;text-decoration:none;
  background:var(--brand-teal);border:1px solid var(--brand-teal);color:#FFFFFF;
  font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px;transition:.16s;
}
.btn:hover{background:var(--brand-teal-lift);border-color:var(--brand-teal-lift);}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--hairline);font-weight:400;}
.btn.ghost:hover{border-color:var(--muted);color:var(--paper);}
.btn.danger{background:transparent;border-color:var(--blocked);color:var(--blocked);font-weight:500;}
.btn.danger:hover{background:var(--blocked-wash);}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.hint{font-size:12.5px;color:var(--dim);}
.meta{font-family:var(--mono);font-size:12px;color:var(--dim);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;font-weight:600;color:var(--text);background:var(--surface-3);
  padding:9px 12px;border-bottom:1.5px solid var(--hairline);
}
td{padding:10px 12px;border-bottom:1px solid var(--hairline-soft);color:var(--text);vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.n{font-family:var(--mono);font-size:12.5px;}

/* SIGNATURE: withheld values read as a deliberate control */
.withheld{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--control);border:1px dashed var(--control);border-radius:6px;padding:2px 8px;
  background:var(--control-wash);
}
.withheld::before{content:"";width:5px;height:5px;background:var(--control);transform:rotate(45deg);}

.state{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;
}
.state::before{content:"";width:7px;height:7px;border-radius:50%;}
.state.ok{
  color:var(--cleared);background:var(--cleared-wash);
  border:1px solid rgba(46,122,89,.3);border-radius:6px;padding:4px 10px;
}
.state.ok::before{background:var(--cleared);}
.state.bad{color:var(--blocked);}
.state.bad::before{background:var(--blocked);}
.state.wait{color:var(--control);}
.state.wait::before{background:var(--control);}

.note{
  border-left:3px solid var(--control);background:var(--control-wash);
  border-radius:0 8px 8px 0;padding:11px 14px;
  font-size:13px;color:var(--text);margin:16px 0;
}
.note strong{color:var(--paper);font-weight:600;}

/* ---------- sign in ---------- */
.brand{
  background:var(--surface-2);border-bottom:1px solid var(--hairline-soft);
  padding:24px 30px 20px;
}
.brand .wordmark{display:block;width:184px;height:28px;margin-bottom:8px;}
.brand span{
  display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;
  font-size:12.5px;color:var(--muted);
}
.signinbody{padding:30px 34px 36px;}
.codeboxes{display:flex;gap:9px;margin-bottom:8px;}
.codeboxes span{
  width:46px;height:56px;border:1px solid var(--hairline);border-radius:2px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:22px;color:var(--paper);
}
.codeboxes span.empty{color:#C7D5DA;}
.codeboxes span.cursor{border-color:var(--brand-teal-lift);}

/* ---------- filter builder ---------- */
.frow{
  display:grid;grid-template-columns:1.2fr .8fr 1.2fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--hairline-soft);
}
.frow .join{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--dim);
  grid-column:1 / -1;padding-top:4px;
}
.x{
  background:var(--surface);border:1.5px solid var(--hairline);border-radius:8px;
  color:var(--muted);font-size:16px;line-height:1;padding:9px 12px;cursor:pointer;
}
.x:hover{border-color:var(--blocked);color:var(--blocked);}

/* Editing an existing analysis: banner above the cohort builder. */
.editnote{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 20px;padding:11px 14px;border-radius:8px;
  background:var(--teal-wash);border:1px solid var(--brand-teal);
  font-size:13px;color:var(--text);
}
.editnote strong{color:var(--paper);font-weight:600;}

/* Query mode tabs. Only Manual is built for the POC; the others are inert. */
.qtabs{display:flex;gap:6px;margin-bottom:-1px;position:relative;z-index:1;}
.qtab{
  display:inline-flex;align-items:center;font-family:var(--label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;padding:9px 16px;
  border:1px solid transparent;border-radius:8px 8px 0 0;
}
.qtab.on{background:var(--surface-2);border-color:var(--hairline);border-bottom:none;color:var(--paper);}
.qtab.off{background:var(--surface-3);border-color:var(--hairline-soft);color:#9AABB0;cursor:not-allowed;position:relative;}
.qtab.off::after{
  content:attr(data-soon);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--paper);color:#FFFFFF;font-family:var(--ui);
  text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;padding:6px 10px;border-radius:6px;
  box-shadow:0 8px 18px rgba(16,34,42,.25);opacity:0;pointer-events:none;transition:opacity .12s;
}
.qtab.off:hover::after{opacity:1;}
.card.qcard{border-radius:0 10px 10px 10px;}

.count{
  display:flex;align-items:baseline;gap:14px;padding:18px 20px;
  background:var(--surface-3);border:1px solid var(--hairline);border-radius:10px;
}
.count b{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--paper);letter-spacing:-.02em;}
.count span{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted);}

/* ---------- checks ---------- */
.check{
  display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--hairline-soft);
}
.check:last-child{border-bottom:none;}
.check .idx{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:2px;}
.check h4{font-size:14.5px;margin-bottom:3px;}
.check p{font-size:13px;color:var(--muted);margin:0;}
.finding{
  font-family:var(--mono);font-size:12px;color:var(--blocked);
  background:var(--blocked-wash);border:1px solid rgba(175,67,43,.35);
  border-radius:2px;padding:6px 10px;margin-top:8px;display:inline-block;
}

.banner{
  display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:3px;
  border:1px solid rgba(175,67,43,.45);background:var(--blocked-wash);margin-bottom:22px;
}
.banner .bar{width:3px;align-self:stretch;background:var(--blocked);}
.banner h4{color:var(--blocked);font-size:15px;margin-bottom:4px;}
.banner p{font-size:13.5px;color:var(--text);margin:0;}

/* ---------- queue ---------- */
.queue{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;}
.qitem{
  padding:13px 14px;border:1px solid var(--hairline);border-radius:3px;
  background:var(--surface-2);margin-bottom:10px;
}
.qitem.sel{border-color:var(--brand-teal);background:var(--surface-3);}
.qitem .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px;}
.qitem h4{font-size:14.5px;}
.qitem .sub{font-size:12.5px;color:var(--muted);}

.quote{
  border-left:2px solid var(--hairline);padding:2px 0 2px 14px;
  font-size:13.5px;color:var(--text);font-style:italic;
}

/* ---------- SIGNATURE: audit thread ---------- */
.thread{position:relative;padding-left:132px;}
.thread::before{
  content:"";position:absolute;left:118px;top:6px;bottom:6px;width:1px;background:var(--hairline);
}
.ev{position:relative;padding:0 0 20px;}
.ev .t{
  position:absolute;left:-132px;width:104px;text-align:right;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.5;padding-top:1px;
}
.ev::before{
  content:"";position:absolute;left:-18px;top:6px;width:7px;height:7px;
  background:var(--surface);border:1px solid var(--muted);border-radius:50%;
}
.ev.amber::before{border-color:var(--control);background:var(--control);}
.ev.red::before{border-color:var(--blocked);background:var(--blocked);}
.ev.green::before{border-color:var(--cleared);background:var(--cleared);}
.ev h4{font-size:14px;margin-bottom:2px;}
.ev p{font-size:13px;color:var(--muted);margin:0;}
.ev .who2{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:4px;}

/* ---------- screens ---------- */


@keyframes in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

footer{
  max-width:1360px;margin:0 auto;padding:20px 26px 44px;
  font-size:12.5px;color:var(--dim);
}

@media (max-width:1040px){
  /* The rail stacks above the content but keeps its vertical, full-width menu
     with the Project and Admin groups intact, matching the mobile design
     rather than collapsing into a horizontal strip. */
  .body{grid-template-columns:1fr;}
  .rail{border-right:none;border-bottom:1px solid var(--hairline);}
  .signin,.grid2,.queue,.charts{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .stage{padding:22px 14px 60px;}
  .main{padding:20px 16px 26px;}
  .frow{grid-template-columns:1fr;}
  .thread{padding-left:0;}
  .thread::before{display:none;}
  .ev .t{position:static;width:auto;text-align:left;display:block;margin-bottom:2px;}
  .ev::before{display:none;}
  .ev{border-left:2px solid var(--hairline);padding-left:14px;}
}

/* ------------------------------------------------------------
   Added for the Django build. Not part of the original deck.
   ------------------------------------------------------------ */
.staticmark{
  max-width:1360px;margin:0 auto;padding:10px 26px;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--control);background:var(--control-wash);
  border-bottom:1px solid rgba(168,122,34,.35);
}
.errors{
  border:1px solid rgba(175,67,43,.45);background:var(--blocked-wash);
  border-radius:2px;padding:10px 14px;margin-bottom:16px;
  font-size:13.5px;color:var(--blocked);
}
.errors ul{margin:0;padding-left:18px;}
.codeinput{
  width:100%;font-family:var(--mono);font-size:26px;letter-spacing:.42em;
  text-align:center;padding:14px 12px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:2px;color:var(--paper);
}
.codeinput:focus{border-color:var(--brand-teal-lift);}
.linkbtn{
  background:none;border:none;padding:0;color:var(--brand-teal-lift);
  font-size:13px;text-decoration:underline;cursor:pointer;
}
.linkbtn:disabled{color:var(--dim);text-decoration:none;cursor:not-allowed;}
/* Deliberately understated so it sits quietly under the sign-in form. */
.forgotlink{
  appearance:none;-webkit-appearance:none;
  background:none;border:none;padding:0;margin-top:16px;
  color:var(--dim);font-size:13px;text-decoration:underline;cursor:pointer;
}
.forgotlink:hover{color:var(--muted);}
.signout{
  background:none;border:1px solid var(--hairline);border-radius:6px;
  padding:5px 11px;color:var(--text);font-size:13px;font-weight:500;
  text-decoration:none;cursor:pointer;
}
.signout:hover{border-color:var(--muted);color:var(--paper);}
/* POC scope note in the project rail. */
.rail .scope{margin:18px 18px 0;padding-top:16px;border-top:1px solid var(--hairline-soft);}
.rail .scope .rail-h{padding:0;margin:0 0 6px;}
.rail .scope-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;}
/* Build version, sat faint at the foot of the rail. */
.rail-version{margin:18px 0 0;padding:0 18px;font-family:var(--mono);font-size:11px;color:var(--dim);}

/* ---------- results: saved list, back link and charts ---------- */
.backlink{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  color:var(--muted);font-size:13.5px;text-decoration:none;margin-bottom:14px;
}
.backlink:hover{color:var(--paper);}
.runitem{
  display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:16px 18px;margin-bottom:12px;text-decoration:none;transition:border-color .14s;
}
.runitem:hover{border-color:var(--brand-teal);}
.runitem-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px;}
.runitem-top h4{font-size:16px;color:var(--paper);}
.runitem-sub{margin:0 0 6px;font-size:13px;color:var(--muted);}
.runitem-n{font-family:var(--mono);font-size:12.5px;color:var(--brand-teal-lift);}

.charts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.chartcard{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:20px 22px;min-width:0;}
/* Placeholder for a later "open this chart in detail" view. Deliberately
   disabled and greyed for the POC, kept only as a visible reminder. */
.chart-soon{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;
  background:var(--surface-3);border:1px solid var(--hairline-soft);color:#9AABB0;
  font-family:var(--label);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:6px 12px;border-radius:7px;cursor:not-allowed;}
.chart-soon::after{
  content:attr(data-soon);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--paper);color:#FFFFFF;font-family:var(--ui);
  text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;padding:6px 10px;border-radius:6px;
  box-shadow:0 8px 18px rgba(16,34,42,.25);opacity:0;pointer-events:none;transition:opacity .12s;}
.chart-soon:hover::after{opacity:1;}
.chart-k{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 3px;}
.chartcard h4{font-size:16px;color:var(--paper);margin-bottom:4px;}
.chart-sub{margin:0 0 16px;font-size:13px;color:var(--muted);}
.chart-legend{display:flex;gap:16px;margin-top:14px;font-size:12.5px;color:var(--text);}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.cdot{width:11px;height:11px;border-radius:4px;display:inline-block;}
.cdot.teal{background:var(--brand-teal);}
.cdot.red{background:var(--blocked);}
/* chart 1: stacked outcome bars */
.ebar{margin-bottom:13px;}
.ebar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:13px;color:var(--text);}
.ebar-track{display:flex;height:20px;border-radius:6px;overflow:hidden;background:var(--teal-wash);}
.ebar-stab{background:var(--brand-teal);color:#FFFFFF;font-size:11.5px;font-weight:600;display:flex;align-items:center;padding-left:8px;white-space:nowrap;}
.ebar-det{background:var(--blocked);}
/* chart 3: mechanism bars */
.mbar{display:grid;grid-template-columns:88px 1fr 52px;gap:10px;align-items:center;margin-bottom:11px;}
.mbar-label{font-size:13px;color:var(--text);}
.mbar-track{height:18px;background:var(--teal-wash);border-radius:6px;overflow:hidden;}
.mbar-fill{height:100%;background:#3E8A8E;border-radius:6px;}
.mbar-fill.first{background:var(--brand-teal);}
.mbar-n{font-family:var(--mono);font-size:12.5px;color:var(--paper);text-align:right;}
/* chart 4: quartile bars */
.qbars{display:flex;align-items:flex-end;gap:16px;height:170px;padding:0 4px;}
.qbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.qbar-n{font-family:var(--mono);font-size:12.5px;color:var(--paper);font-weight:500;}
.qbar-fill{width:100%;background:#4E9599;border-radius:8px 8px 4px 4px;}
.qbar-fill.hi{background:var(--brand-teal);}
.qbar-label{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--text);}
/* chart hover tooltip */
.ebar,.mbar,.qbar{cursor:default;}
.charts [data-tip]:hover .ebar-track,.charts [data-tip]:hover .mbar-track{filter:brightness(.96);}
.charttip{
  position:fixed;z-index:60;pointer-events:none;background:var(--paper);color:#FFFFFF;
  font-family:var(--ui);font-size:12px;font-weight:500;padding:6px 10px;border-radius:6px;
  white-space:nowrap;box-shadow:0 8px 18px rgba(16,34,42,.25);
}
.charttip[hidden]{display:none;}

/* Name-this-analysis modal. */
.modal-overlay{
  position:fixed;inset:0;z-index:40;background:rgba(16,34,42,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
}
.modal-overlay[hidden]{display:none;}
.modal{
  background:var(--surface);border-radius:12px;padding:26px 28px;max-width:460px;width:100%;
  box-shadow:0 24px 60px rgba(16,34,42,.28);max-height:90vh;overflow-y:auto;margin:auto;
}
.modal h3{font-size:19px;margin-bottom:6px;}

/* Audit trail: filter chips. */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--hairline);border-radius:20px;padding:6px 14px;
  font-size:13px;color:var(--text);background:var(--surface);
}
.chip:hover{border-color:var(--muted);color:var(--paper);}
.chip.on{background:var(--teal-wash);border-color:var(--brand-teal);color:var(--brand-teal-lift);font-weight:600;}
.chip .chipn{font-family:var(--mono);font-size:11.5px;color:var(--dim);}
.chip.on .chipn{color:var(--brand-teal-lift);}

/* Audit trail: older activity folded away by day. */
.daygroup{border-top:1px solid var(--hairline-soft);}
.daygroup summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 2px;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.14em;font-size:12.5px;color:var(--text);font-weight:600;
}
.daygroup summary::-webkit-details-marker{display:none;}
.daygroup summary::before{
  content:"▸";color:var(--muted);font-size:11px;transition:transform .15s;
}
.daygroup[open] summary::before{transform:rotate(90deg);}
.daygroup .daycount{
  margin-left:auto;font-family:var(--mono);text-transform:none;letter-spacing:0;
  font-size:12px;color:var(--dim);font-weight:400;
}
.daygroup[open] summary{color:var(--paper);}
.daygroup > .thread{padding-bottom:8px;}

/* Sign in step indicator (POC design). */
.step{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.step .num{
  width:22px;height:22px;border-radius:11px;background:var(--brand-teal);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;
}
.step .lbl{
  font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:12.5px;color:var(--muted);
}

/* Printing a result (also the path to "save as PDF"). Strip the chrome so the
   page prints as the charts, the table and the information alone. */
@media print{
  .topbar,.rail,.perimeter,.backlink,.chart-soon,.charttip{display:none !important;}
  .row .btn,.row a.btn{display:none !important;}
  .app,.body,.main{display:block;background:#FFFFFF;}
  .chartcard,.card{break-inside:avoid;}
}