/* Trial Eligibility Compiler — UI.

   The design has one job beyond usability: convince a clinician that the
   number on screen was computed, not guessed. That is an argument made with
   typography and space rather than colour.

   Three decisions carry it:

   1. A serif carries every figure and heading. Editorial serifs read as
      considered and authoritative, and it ties the product to the deck, which
      is set in the same voice. The interface chrome stays sans, so the serif
      only ever appears on things the system is asserting.
   2. Space is generous to the point of feeling wasteful. Cramped layouts read
      as cheap; air reads as confident. The largest type also carries the
      tightest tracking, which is what keeps density and calm in the same view.
   3. Colour means exactly one thing: eligibility state. Never decoration,
      never a button, never emphasis. Everything else is black on white with
      hairline rules.

   Motion is 120–180ms on hover, focus and selection only. Nothing animates on
   load; an entrance animation would pantomime latency this system does not
   have. */

/* ── palette ─────────────────────────────────────────────────────
   Teal and white. The supplied brand cyan (#2FB4CA) measures 2.47:1 on white,
   so it can fill a shape but must never carry text; --brand-600 (5.02:1) does
   every job with a label on it.

   The brand colour is not decoration: it IS the "eligible from a date" state.
   Producing a calendar date instead of a category is the one thing this system
   does that a prompted matcher cannot, so that state wears the brand. Green,
   grey and red keep the other three. */
:root {
  --brand-700: #0A5F6E;
  --brand-600: #0E7A8C;   /* text, buttons, focus — 5.02:1 on white */
  --brand-500: #2FB4CA;   /* the supplied colour: fills, bars, swatches */
  --brand-400: #5FC9DA;
  --brand-300: #95DEEA;
  --brand-200: #C2ECF3;
  --brand-100: #DFF4F8;
  --brand-50:  #F2FBFC;

  --bg:      #FFFFFF;
  --sunk:    #F7FBFC;
  --sunk-2:  #EEF7F9;
  --line:    #E2ECEF;
  --line-2:  #EDF4F6;
  --line-3:  #C9DDE2;

  --ink:     #07161A;   /* near-black with a trace of the brand hue */
  --ink-2:   #3F5257;
  --ink-3:   #74898E;
  --ink-4:   #9DAFB4;

  /* verdict state */
  --ok:   #0E6B3E;      --ok-bg:   #EDF6F1;  --ok-line:   #C8E2D5;
  --warn: var(--brand-600);  /* "eligible from a date" wears the brand */
  --warn-bg: var(--brand-50); --warn-line: var(--brand-200);
  --warn-fill: var(--brand-500);
  --neut: #55656A;      --neut-bg: #F1F5F6;  --neut-line: #DEE8EA;
  --bad:  #A81F17;      --bad-bg:  #FDF0EF;  --bad-line:  #EFD2CE;

  --mark: #FFE9A0;

  --r:   10px;
  --r-s: 7px;

  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", Charter, "Source Serif Pro", Georgia,
           "Times New Roman", serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Layout blocks below declare `display`, which beats the UA rule for [hidden]. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px;
                 border-radius: 5px; }
.grow { flex: 1; }


kbd {
  font: 500 10.5px/1 var(--sans); color: var(--ink-2);
  background: #fff; border: 1px solid var(--line-3);
  border-bottom-width: 1.5px; border-radius: 5px;
  padding: 3px 5px; min-width: 18px; display: inline-block; text-align: center;
}
kbd.on-dark { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.26);
              color: #fff; margin-left: 8px; }

/* ───────────────────────────────────────────────────── header ── */

.hdr {
  height: 64px; flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 0 32px; border-bottom: 1px solid var(--line); min-width: 0;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px;
         flex: 0 1 auto; min-width: 0; }
.logo {
  width: 26px; height: 26px; border-radius: 8px; color: #fff;
  background: linear-gradient(158deg, var(--brand-500) 0%, var(--brand-700) 100%);
  display: grid; place-items: center;
  font: 700 12px/1 var(--serif); letter-spacing: 0;
}
.name { font-size: 15px; font-weight: 600; letter-spacing: -.016em;
        white-space: nowrap; }

.perf { display: flex; align-items: center; gap: 11px; font-size: 12.5px;
        color: var(--ink-3); }
.perf b { color: var(--ink-2); font-weight: 600; }
.zero {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line);
  padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600;
}
.dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor;
       flex: 0 0 auto; }

.kbd {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--ink-3); background: var(--sunk); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 11px 6px 7px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.kbd:hover { background: var(--sunk-2); color: var(--ink-2); border-color: var(--line-3); }

/* ────────────────────────────────────────────────────── intake ── */
/* The first frame of the video. It has to state what the thing is and why it
   is credible before anything is clicked. */

.intake {
  flex: 1; display: grid; place-items: center; padding: 40px 32px 56px;
  overflow-y: auto;
  background:
    radial-gradient(1100px 460px at 50% -14%, var(--brand-50) 0%, transparent 72%);
}
.intake-inner { width: 100%; max-width: 660px; }

.intake h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: 34px; line-height: 1.24; letter-spacing: -.024em;
  color: var(--ink); max-width: 20ch;
}

/* A grid, not a flex row: with wrapping, the third figure dropped onto its own
   line and the set stopped reading as one statement. */

/* The note is a document, not a form field. */
.paper {
  margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: #fff; transition: border-color .15s;
}
.paper:focus-within { border-color: var(--line-3); }
.paper-hd {
  display: flex; align-items: center; gap: 11px; padding: 11px 15px;
  background: var(--sunk); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.paper-hint { font-size: 11.5px; color: var(--ink-4); }
#report {
  display: block; width: 100%; height: 300px; resize: vertical; border: 0;
  outline: 0; padding: 18px 19px; background: #fff;
  font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--ink-2);
}

.intake-act { margin-top: 26px; display: flex; align-items: center; gap: 18px;
              flex-wrap: wrap; }

.btn {
  border: 1px solid var(--line-3); background: #fff; border-radius: 8px;
  padding: 9px 15px; font-size: 13.5px; font-weight: 550; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: var(--sunk); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff; border-color: var(--brand-700); padding: 13px 22px; font-size: 14.5px;
  font-weight: 560; letter-spacing: -.008em; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(10,95,110,.28), 0 5px 16px rgba(10,95,110,.16);
}
.btn.primary:hover { background: linear-gradient(180deg, #128DA2 0%, var(--brand-600) 100%); }
.btn.primary:disabled { opacity: .5; cursor: default; }

/* ─────────────────────────────────────────────── verdict strip ── */
/* The strip answers the query; the split below is where the work happens. */

.strip { flex: 0 0 auto; padding: 26px 32px 18px;
         border-bottom: 1px solid var(--line-3); }
.strip-top { display: flex; align-items: flex-start; gap: 32px; }
.hero { flex: 1; min-width: 0; }
.hero .over { font-size: 14px; color: var(--ink-3); letter-spacing: .01em; }
.hero .big {
  margin-top: 7px; font-family: var(--serif); font-size: 52px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.06;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.hero .big .d { color: var(--warn); }
.hero .big .sep { color: var(--line-3); font-weight: 400; }
.hero .big.plain { color: var(--ink); }

.proof { display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
         flex: 0 0 auto; }

.counts { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.cnt {
  display: flex; align-items: center; gap: 9px; padding: 9px 17px 9px 13px;
  border: 1px solid var(--line); border-radius: 99px; background: #fff;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cnt:hover { border-color: var(--line-3); background: var(--sunk); }
.cnt[aria-pressed="true"] { background: var(--brand-600);
                             border-color: var(--brand-600); color: #fff; }
.cnt b { font-family: var(--serif); font-size: 17px; font-weight: 600;
         letter-spacing: -.014em; }
.cnt span.l { font-size: 13.5px; color: var(--ink-2); }
.cnt[aria-pressed="true"] span.l { color: #CFCFD4; }
.sw { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; }

/* The work order: the system's most distinctive output. Not "35 unknown" but
   "order these four tests and 340 criteria resolve". */
.work { margin-top: 12px; }
.work-line {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; background: var(--brand-50);
  border: 1px solid var(--brand-200); border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); text-align: left;
  transition: background .15s, border-color .15s;
}
.work-line:hover { background: var(--brand-100); border-color: var(--brand-300); }
.work-line b { font-weight: 600; color: var(--ink); }
.work-line .work-list { color: var(--ink-4); overflow: hidden; white-space: nowrap;
                        text-overflow: ellipsis; flex: 1; min-width: 0; }
.work-line .chev { color: var(--ink-4); flex: 0 0 auto; }

.patient { margin-top: 16px; display: flex; align-items: center; gap: 8px;
           flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.patient .pname { font-weight: 600; color: var(--ink); margin-right: 4px; }
.pchip { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
         background: #fff; font-size: 12.5px; color: var(--ink-2); }

/* ─────────────────────────────────────────────────────── split ── */

.split { flex: 1 1 auto; min-height: 0; display: grid;
         grid-template-columns: 452px 1fr; }
.list { border-right: 1px solid var(--line); overflow-y: auto; outline: none;
        background: var(--brand-50); }
.detail { overflow-y: auto; padding: 36px 48px 72px; background: #fff; }

.grp {
  position: sticky; top: 0; z-index: 2;
  padding: 16px 24px 9px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; color: var(--brand-600); text-transform: uppercase;
  background: linear-gradient(180deg, var(--brand-50) 68%, rgba(242,251,252,0));
}

.row {
  width: 100%; text-align: left; background: #fff; border: 0;
  border-bottom: 1px solid var(--line-2); padding: 17px 24px 17px 21px;
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  transition: background .14s;
}
.row:hover { background: var(--brand-50); }
.row.sel { background: var(--brand-50);
           box-shadow: inset 3px 0 0 var(--brand-500); }
.rbar { flex: 0 0 auto; width: 3px; height: 30px; border-radius: 99px; margin-top: 3px; }
.rmain { flex: 1; min-width: 0; }
.rtitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px; font-weight: 550; letter-spacing: -.012em; line-height: 1.42;
}
.row.sel .rtitle { font-weight: 620; }
.rmeta { margin-top: 7px; font-size: 12px; color: var(--ink-3);
         display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
         overflow: hidden; white-space: nowrap; }
.rmeta > * { flex: 0 0 auto; }
.rmeta .mdot { color: var(--ink-4); }
.rmeta > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden;
                       text-overflow: ellipsis; }
.rid { font-family: var(--mono); font-size: 11px; color: var(--ink-3);
       letter-spacing: -.02em; }
.rwhy { display: block; margin-top: 6px; font-size: 12px; color: var(--bad); }
.rright { flex: 0 0 auto; display: flex; flex-direction: column;
          align-items: flex-end; gap: 7px; }
.rdate { font-family: var(--serif); font-size: 13.5px; font-weight: 600;
         color: var(--warn); letter-spacing: -.012em; white-space: nowrap; }

/* Coverage: how much checkable evidence a trial actually offered. "Eligible"
   on one criterion and on fifteen are different findings. */
.cov { display: flex; align-items: center; gap: 7px; }
.covtxt { font-family: var(--serif); font-size: 11px; color: var(--ink-4); }
.covbar { display: flex; gap: 2px; }
.covseg { width: 3.5px; height: 12px; border-radius: 1.5px; background: var(--line); }
.covseg.on { background: var(--ok); }
.covseg.pend { background: var(--brand-500); }
.row.weak .covseg.on { background: #C0CBC4; }
.row.weak .rtitle { color: var(--ink-2); font-weight: 500; }
.tag-weak { color: var(--ink-4); }

/* 421 rows of noise become a short explanation of why the field narrowed. */
.blk { margin: 12px 16px 30px; border: 1px solid var(--line);
       border-radius: var(--r); overflow: hidden; background: #fff; }
.blkhd { width: 100%; text-align: left; background: #fff; border: 0;
         padding: 14px 16px; display: flex; align-items: center; gap: 11px;
         cursor: pointer; font-size: 13px; transition: background .14s; }
.blkhd:hover { background: var(--brand-50); }
.blkhd b { font-weight: 600; }
.blkhd .sub { color: var(--ink-4); font-size: 12.5px; }
.blkhd .chev { margin-left: auto; color: var(--ink-4); font-size: 10px; }
.blkrow { border-top: 1px solid var(--line-2); padding: 10px 16px; width: 100%;
          text-align: left; background: none; border-left: 0; border-right: 0;
          border-bottom: 0; display: flex; gap: 12px; align-items: baseline;
          font-size: 12.5px; color: var(--ink-2); cursor: pointer;
          transition: background .14s; }
.blkrow:hover { background: var(--brand-50); }
.blkrow b { font-family: var(--serif); font-weight: 600; color: var(--ink);
            min-width: 28px; text-align: right; flex: 0 0 auto; }
.blkmore { padding: 10px 16px; border-top: 1px solid var(--line-2);
           font-size: 12px; color: var(--ink-4); }

/* ────────────────────────────────────────────────────── detail ── */

.dhead { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.dtitle { font-family: var(--serif); font-size: 33px; font-weight: 600;
          letter-spacing: -.024em; line-height: 1.22; max-width: 20em; }
.dmeta { margin-top: 14px; font-size: 13px; color: var(--ink-3);
         display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.dstate {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 9px; font-size: 15px; font-weight: 600;
  border: 1px solid; letter-spacing: -.01em;
}
.dstate small { font-weight: 450; opacity: .82; letter-spacing: 0; }
.dstate.ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.dstate.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.dstate.neut { background: var(--neut-bg); border-color: var(--neut-line); color: var(--neut); }
.dstate.bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad); }

.dsec { margin-top: 36px; font-size: 11px; font-weight: 600;
        letter-spacing: .13em; color: var(--brand-600); text-transform: uppercase; }
.dsec-toggle {
  display: flex; align-items: baseline; gap: 11px; width: 100%;
  background: none; border: 0; padding: 0; margin-top: 40px; cursor: pointer;
  text-align: left;
}
.dsec-toggle .dsec { margin-top: 0; }
.dsec-toggle .chev { font-size: 11px; color: var(--ink-4); }
.dsec-toggle:hover .chev { color: var(--ink-2); }

.crit { margin-top: 10px; border-top: 1px solid var(--line); }
.c { width: 100%; text-align: left; background: none; border: 0;
     border-bottom: 1px solid var(--line-2); padding: 16px 12px 16px 4px;
     display: flex; gap: 14px; cursor: pointer; transition: background .14s; }
.c:last-child { border-bottom: 0; }
.c:hover { background: var(--brand-50); }
.c.act { background: var(--brand-50); box-shadow: inset 2px 0 0 var(--brand-500); }
.cdot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 99px; margin-top: 8px; }
.cmain { flex: 1; min-width: 0; }
.ctype { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em;
         color: var(--ink-4); }
.ctype .ex { color: var(--bad); }
.creason { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 500;
           letter-spacing: -.011em; color: var(--ink); }
.craw { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; margin-top: 7px; font-size: 12.5px; color: var(--ink-3);
        line-height: 1.55; }
.cwhen { flex: 0 0 auto; font-family: var(--serif); font-size: 12.5px;
         font-weight: 600; color: var(--warn); }

/* The source note is evidence, so it is presented as a document. */
.note { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r);
        overflow: hidden; background: #fff; }
.notehd { padding: 12px 16px; border-bottom: 1px solid var(--line);
          background: var(--brand-50); font-size: 12px; color: var(--ink-3);
          display: flex; align-items: center; gap: 8px; }
.notehd b { color: var(--ink-2); font-weight: 600; }
.notebody { padding: 20px 22px; font-size: 13px; line-height: 1.85;
            color: var(--ink-2); white-space: pre-wrap; max-height: 320px;
            overflow-y: auto; font-family: var(--mono); }
mark { background: transparent; color: inherit; border-radius: 3px;
       padding: 1px 3px; transition: background .18s, color .18s; }
mark.on { background: var(--mark); color: var(--ink); }

.empty { display: grid; place-items: center; height: 100%; color: var(--ink-3);
         font-size: 13.5px; text-align: center; padding: 48px; }

/* ──────────────────────────────────────────── command palette ── */

.palette-wrap { position: fixed; inset: 0; background: rgba(8,8,10,.34);
                display: grid; place-items: start center; padding-top: 11vh; z-index: 40; }
.palette { width: min(660px, calc(100vw - 40px)); background: #fff;
           border: 1px solid var(--line-3); border-radius: 14px; overflow: hidden;
           box-shadow: 0 24px 64px rgba(8,8,10,.24); }
.palette-in { display: flex; align-items: center; gap: 12px; padding: 0 18px;
              border-bottom: 1px solid var(--line); color: var(--ink-4); }
#palette-q { flex: 1; border: 0; outline: 0; padding: 17px 0; font-size: 15.5px;
             letter-spacing: -.012em; }
.palette-results { max-height: 46vh; overflow-y: auto; padding: 7px; }
.presult { width: 100%; text-align: left; background: none; border: 0;
           padding: 10px 13px; display: flex; gap: 12px; align-items: center;
           cursor: pointer; font-size: 13px; border-radius: var(--r-s); }
.presult.on { background: var(--sunk-2); }
.presult .pt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
.presult .pid { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.palette-foot { border-top: 1px solid var(--line); padding: 10px 18px;
                display: flex; gap: 18px; font-size: 11.5px; color: var(--ink-3);
                background: var(--sunk); align-items: center; }
.palette-foot span { display: flex; align-items: center; gap: 5px; }
.pnone { padding: 24px 16px; color: var(--ink-3); font-size: 13px; }

/* ─────────────────────────────────────────────────── progress ── */

.bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--brand-500);
       width: 0; opacity: 0; z-index: 60; }
.bar.go { width: 84%; opacity: 1; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.bar.done { width: 100%; opacity: 0; transition: width .16s, opacity .32s .08s; }

.err { margin: 32px; padding: 16px 18px; border: 1px solid var(--bad-line);
       background: var(--bad-bg); color: var(--bad); border-radius: var(--r);
       font-size: 13.5px; }

/* ───────────────────────────────────────────────── responsive ── */

@media (max-width: 1180px) {
  .split { grid-template-columns: 360px 1fr; }
  .detail { padding: 32px 32px 56px; }
  .dtitle { font-size: 26px; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .col-list { border-right: 0; border-bottom: 1px solid var(--line-3);
              max-height: 46vh; }
  .strip { padding: 22px 18px 16px; }
  .hero .big { font-size: 32px; }
  /* The header gained a back control and a breadcrumb; at this width they
     must give way rather than push the page wider than the viewport. */
  .hdr { padding: 0 14px; gap: 10px; }
  .kbd span { display: none; }
  .crumb { display: none; }
  .back .lbl { display: none; }
  /* Icon-only, so it still needs a finger-sized target (44px). */
  .back { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .back span { font-size: 17px; }
  .brand .name { display: none; }
  .split { min-width: 0; }
  .list, .col-list, .detail { min-width: 0; }
  .intake { padding: 40px 20px 56px; }
  .intake h1 { font-size: 32px; }
  .intake h1 br { display: none; }
  .facts { grid-template-columns: 1fr 1fr; gap: 22px; }
  .fact b { font-size: 25px; }
  .detail { padding: 26px 20px 48px; }
  .dtitle { font-size: 23px; }
}

/* ─────────────────────────────────────────── choose a document ── */
/* The landing asks for a document rather than handing you one. A judge who
   drops their own note learns more in five seconds than any pre-filled box
   teaches them, and the test document is one click away for everyone else. */

.choose { margin-top: 40px; }

.drop {
  display: flex; align-items: center; gap: 14px;
  padding: 34px 26px; cursor: pointer;
  border: 1px dashed var(--line-3); border-radius: 10px; background: #fff;
  transition: border-color .16s, background .16s;
}
.drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
.drop.over {
  border-color: var(--brand-500); background: var(--brand-50);
  border-style: solid;
}
.drop-ico { width: 34px; height: 34px; flex: 0 0 auto; color: var(--brand-500); }
.drop-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drop-main b { font-size: 16px; font-weight: 550; letter-spacing: -.012em; }
.drop-main span { font-size: 13.5px; color: var(--ink-3); }
.drop-main u { text-decoration-color: var(--brand-300); text-underline-offset: 2px;
               color: var(--brand-600); }

/* a rule with the word set into it */


.paper-x {
  background: none; border: 0; cursor: pointer; padding: 2px 0;
  font-size: 11.5px; color: var(--brand-600);
  border-bottom: 1px solid var(--brand-200);
}
.paper-x:hover { border-color: var(--brand-500); }

.drop-err {
  margin-top: 12px; font-size: 12.5px; color: var(--bad);
  background: var(--bad-bg); border: 1px solid var(--bad-line);
  border-radius: 8px; padding: 9px 13px;
}

/* ── registry sourcing ──────────────────────────────────────────
   Every trial links to its official ClinicalTrials.gov record. A verdict a
   reader cannot check against the source is a verdict they have to take on
   faith, which is the opposite of what this system is arguing for. */
.ctlink { color: var(--brand-600); text-decoration: none;
          border-bottom: 1px solid var(--brand-200); }
.ctlink:hover { border-color: var(--brand-500); }
.ext { font-size: .85em; opacity: .7; }

.src {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-4);
}
.src a { color: var(--brand-600); text-decoration: none;
         border-bottom: 1px solid var(--brand-200); }
.src a:hover { border-color: var(--brand-500); }

/* The test document is a secondary path: a link, not a second card competing
   with the drop zone for attention. */
.sample-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 14.5px; color: var(--brand-600);
}
.sample-link:hover { color: var(--brand-700); }
.sample-link span { transition: transform .16s; }
.sample-link:hover span { transform: translateX(2px); }

.dnote { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); max-width: 52ch; }

/* ── navigation ─────────────────────────────────────────────────
   Getting back out has to be as obvious as getting in. Escape does the same
   walk — filtered list, all trials, the document — but only for someone who
   already knows that. */
.back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 13px 7px 11px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.back:hover { background: var(--brand-50); border-color: var(--brand-300);
              color: var(--brand-700); }
.back span { font-size: 15px; line-height: 1; }

.crumb {
  font-size: 13.5px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 30ch;
}
.crumb::before { content: "/"; color: var(--line-3); margin-right: 10px; }

.col-list { display: flex; flex-direction: column; min-height: 0;
            border-right: 1px solid var(--line); background: var(--brand-50); }
.col-list .list { border-right: 0; }

.filterbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--line);
  background: #fff;
}
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--brand-600); white-space: nowrap;
}
.backlink:hover { color: var(--brand-700); }
.filterbar-what {
  font-size: 12.5px; color: var(--ink-3); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}

/* ── site footer ────────────────────────────────────────────────
   The legal reach has to exist on the tool itself, not only on pages nobody
   navigates to. Quiet, but always present. */
.sitefoot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 32px; border-top: 1px solid var(--line);
  background: #fff; font-size: 12.5px;
}
.sitefoot a { color: var(--ink-3); text-decoration: none; }
.sitefoot a:hover { color: var(--brand-600); }
.sitefoot-note { color: var(--ink-4); margin-left: auto; }
@media (max-width: 900px) {
  .sitefoot { padding: 10px 14px; gap: 12px; font-size: 12px; }
  .sitefoot-note { margin-left: 0; flex-basis: 100%; }
}

/* ── who did this reach ────────────────────────────────────────────────── */
/* One line in the flow rather than a floating card: this is a question the
   tool asks, not a widget bolted onto it, and it should be as easy to ignore
   as it is to answer. */
.who {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 14px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r); font-size: 12.5px;
}
.who-q { color: var(--ink-3); font-weight: 500; }
.who-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.who-opts button {
  font: inherit; color: var(--brand-700); background: var(--surface);
  border: 1px solid var(--brand-200); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.who-opts button:hover { background: var(--brand-100); border-color: var(--brand-500); }
.who-opts button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
/* The first option is the one answer that changes what gets built next. */
.who-opts button:first-child { border-color: var(--brand-500); font-weight: 500; }
.who-x {
  margin-left: auto; font-size: 16px; line-height: 1; color: var(--ink-4);
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
}
.who-x:hover { color: var(--ink-2); }
.who-thanks { color: var(--ink-2); }
.who-thanks a { color: var(--brand-600); }

@media (max-width: 720px) {
  .who { font-size: 12px; padding: 8px 11px; }
  .who-x { display: none; }
}

/* ── appended by deploy/build.py: public-deployment use notice ── */
.notice {
  background: var(--warn-bg); border-bottom: 1px solid #f0dcb4;
  color: var(--warn); font-size: 11.5px; line-height: 1.45;
  padding: 7px 18px;
}
.notice strong { color: #6d4200; font-weight: 600; }

/* The page is already a flex column whose split pane claims the remaining
   height, so the notice slots in as one more band without a layout override. */