/* 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 {
  --navy:    #0A2540;
  --teal:    #12B8A0;
  --blue:    #2F80ED;

  --brand-700: #0A2540;
  --brand-600: #0F766E;
  --brand-500: #12B8A0;
  --brand-400: #2DD4BF;
  --brand-300: #99F6E4;
  --brand-200: #CCFBF1;
  --brand-100: #E6FFFB;
  --brand-50:  #F4FFFD;

  --bg:      #F7FAFC;
  --surface: #FFFFFF;
  --brand:   #12B8A0;
  --sunk:    #F3F7F9;
  --sunk-2:  #EAF1F4;
  --line:    #E2EAEF;
  --line-2:  #EEF3F6;
  --line-3:  #C9D6DE;

  --ink:     #0A2540;
  --ink-2:   #3D5366;
  --ink-3:   #6B8090;
  --ink-4:   #9AADB8;

  /* 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 Display", "SF Pro Text",
           "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);
  --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: 68px; flex: 0 0 auto; display: flex; align-items: center; gap: 18px;
  padding: 0 36px; border-bottom: 1px solid transparent; min-width: 0;
  background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px;
         flex: 0 1 auto; min-width: 0;
         background: none; border: 0; padding: 0; cursor: pointer;
         text-decoration: none; }
.wordmark { height: 30px; width: auto; display: block; }
.brand:hover { opacity: .82; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav button, .nav a {
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.nav button:hover, .nav a:hover { color: var(--navy); background: var(--sunk); }
.nav button[aria-pressed="true"] { color: var(--navy); background: var(--brand-50); }
.logo {
  width: 28px; height: 28px; border-radius: 8px; color: #fff;
  background: linear-gradient(158deg, var(--blue) 0%, var(--teal) 100%);
  display: grid; place-items: center;
  font: 700 12px/1 var(--sans); letter-spacing: 0;
}
.name { font-size: 15px; font-weight: 650; letter-spacing: -.02em;
        white-space: nowrap; color: var(--navy); }

.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(--sans); font-weight: 620;
  font-size: 34px; line-height: 1.18; letter-spacing: -.032em;
  color: var(--navy); max-width: 18ch;
}

/* 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, #16C2A8 0%, #0E8F7C 100%);
  color: #fff; border-color: #0C7A6A; padding: 13px 22px; font-size: 14.5px;
  font-weight: 560; letter-spacing: -.008em; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(12,122,106,.22), 0 8px 20px rgba(18,184,160,.22);
}
.btn.primary:hover { background: linear-gradient(180deg, #1AD0B4 0%, #12B8A0 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); }

/* ─────────────────────────────────────────── find / catalog ── */
/* Registry-style browse. The three audience cards are the product
   difference: sex and age are the first cut, not a filter drawer. */

.browse {
  flex: 1; overflow-y: auto;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(47,128,237,.10) 0%, transparent 60%),
    radial-gradient(800px 380px at 10% -8%, rgba(18,184,160,.12) 0%, transparent 58%),
    var(--bg);
}
.browse-hero { width: 100%; max-width: 960px; margin: 0 auto; padding: 48px 32px 20px; }
.hero-logo { display: block; height: 56px; width: auto; margin: 0 0 28px; }
.browse .eyebrow {
  font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600);
}
.browse h1 {
  font-family: var(--sans); font-weight: 620;
  font-size: 42px; line-height: 1.12; letter-spacing: -.038em;
  color: var(--navy); max-width: 16ch; margin-top: 12px;
}
.browse .lede {
  margin-top: 14px; max-width: 52ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-2);
}

.find {
  margin-top: 32px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 18px; background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.8); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(10,37,64,.04), 0 18px 40px rgba(10,37,64,.06);
  backdrop-filter: blur(10px);
}
.find-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.find-field.grow { flex: 1; min-width: 220px; }
.find-field span {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.find-field input {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 11px 13px; font-size: 14px; width: 100%;
}
.find-field input[readonly] { color: var(--ink-2); background: var(--sunk); }
.find-go { flex: 0 0 auto; }

.aud-h {
  margin-top: 48px; font-family: var(--sans); font-size: 13px; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.aud-sub { margin-top: 6px; font-size: 14px; color: var(--ink-3); max-width: 62ch; }
.aud {
  margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.aud-card {
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 20px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.aud-card:hover { border-color: var(--brand-300); transform: translateY(-1px);
                  box-shadow: 0 10px 24px rgba(10,37,64,.06); }
.aud-card[aria-pressed="true"] {
  border-color: var(--teal); background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.aud-kicker { font-size: 11px; font-weight: 650; color: var(--brand-600);
              letter-spacing: .08em; text-transform: uppercase; }
.aud-name { font-family: var(--sans); font-size: 26px; font-weight: 650;
            letter-spacing: -.03em; color: var(--navy); }
.aud-n { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.aud-why { margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }

.cancers {
  margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.countries {
  margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.c-card {
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 14px 12px; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 2px; align-items: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.c-card:hover { border-color: var(--brand-300); transform: translateY(-1px);
                box-shadow: 0 10px 24px rgba(10,37,64,.06); }
.c-card[aria-pressed="true"] {
  border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
  background: #F4F8FF;
}
.c-flag { font-size: 22px; line-height: 1; grid-row: 1 / span 2; }
.c-name { font-size: 13.5px; font-weight: 620; color: var(--navy); letter-spacing: -.01em; }
.c-n { font-size: 12px; color: var(--ink-3); }

.catalog { max-width: 920px; margin: 0 auto; padding: 8px 32px 64px; }
.catalog-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 18px 0 12px; border-bottom: 1px solid var(--line);
}
.catalog-hd h2 { font-family: var(--sans); font-size: 22px; font-weight: 650;
                 letter-spacing: -.02em; color: var(--navy); }
.catalog-sub { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.catalog-hint { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 42ch; }

.study {
  width: 100%; text-align: left; background: #fff; border: 0;
  border-bottom: 1px solid var(--line-2); padding: 18px 4px 18px 0;
  display: grid; gap: 6px; cursor: default;
}
.study-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.study-id { font-family: var(--mono); font-size: 12px; color: var(--brand-700);
            font-weight: 600; text-decoration: none; }
.study-id:hover { text-decoration: underline; }
.study-status {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line);
  border-radius: 99px; padding: 2px 8px;
}
.study-title {
  font-size: 16px; font-weight: 560; letter-spacing: -.012em; line-height: 1.4;
  color: var(--ink);
}
.study-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
              font-size: 12.5px; color: var(--ink-3); }
.chip {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 99px; padding: 2px 9px; background: var(--sunk);
  font-size: 11.5px; color: var(--ink-2);
}
.chip.exclusive { background: var(--brand-50); border-color: var(--brand-200);
                  color: var(--brand-700); font-weight: 600; }
.chip.child { background: #FFF6E8; border-color: #F0D7A8; color: #8A5A10; }
.study-empty { padding: 36px 4px; color: var(--ink-3); font-size: 14px; }

.join-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; margin-top: 12px; padding: 14px 16px; min-height: 56px;
  border-radius: 14px; text-decoration: none;
  background: var(--teal); color: #06201E;
  box-shadow: 0 1px 0 rgba(6,32,30,.08);
}
.join-btn:hover { filter: brightness(1.06); }
.join-label { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.join-sub { font-size: 13px; font-weight: 500; color: #0A3A34; }
.dhead .join-btn { margin-top: 18px; }

@media (max-width: 900px) {
  .countries, .cancers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .aud { grid-template-columns: 1fr; }
  .browse-hero, .catalog { padding-left: 16px; padding-right: 16px; }
  .browse h1 { font-size: 30px; }
  .hero-logo { height: 44px; }
  .hdr { padding: 8px 16px; height: auto; flex-wrap: wrap; }
  .nav { margin-left: 0; }
  .wordmark { height: 26px; }
}

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

/* ── iPhone chrome ────────────────────────────────────────────────── */
:root { --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }

html, body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
}
body { padding-bottom: var(--tabbar-h); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: var(--tabbar-h);
  padding: 4px 8px env(safe-area-inset-bottom, 8px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 6px 4px 0; min-height: 44px;
  background: none; border: 0; color: var(--ink-3);
  font-size: 10px; font-weight: 620; letter-spacing: .02em;
}
.tabbar button[aria-pressed="true"] { color: var(--brand); }
.tab-ico { font-size: 18px; line-height: 1; font-weight: 400; }

.nav-desk { display: none; }
@media (min-width: 900px) {
  .nav-desk { display: flex; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

.settings {
  flex: 1; overflow-y: auto; background: var(--bg);
}
.settings-inner { max-width: 560px; margin: 0 auto; padding: 20px 20px 48px; }
.settings h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  color: var(--navy); margin: 8px 0 6px;
}
.settings .lede { color: var(--ink-3); font-size: 15px; margin-bottom: 28px; }
.settings h2 {
  font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 4px 8px;
}
.ios-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.ios-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink); text-decoration: none; font-size: 16px;
  background: var(--surface);
}
.ios-group .ios-row:last-child { border-bottom: 0; }
.ios-row b { display: block; font-weight: 620; }
.ios-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.ios-row input[type="radio"],
.ios-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); flex-shrink: 0; }

.ada-card {
  margin-top: 22px; padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
}
.ada-card h3 { font-size: 17px; font-weight: 650; color: var(--navy); margin-bottom: 8px; }
.ada-card p, .ada-card li { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ada-card ul { margin: 10px 0 12px 18px; }
.ada-card li { margin: 6px 0; }
.ada-foot { font-size: 12.5px !important; color: var(--ink-3) !important; }

/* ── Dark mode: every surface stays painted, text stays readable ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;
  --surface: #162033;
  --sunk: #101827;
  --sunk-2: #1A2433;
  --ink: #F3F7FB;
  --ink-2: #C9D4E0;
  --ink-3: #93A1B3;
  --ink-4: #7A8A9C;
  --line: #2C3A4F;
  --line-2: #243044;
  --line-3: #3A4B62;
  --navy: #E8EEF6;
  --navy-ink: #E8EEF6;
  --brand: #3EC8C0;
  --brand-700: #7EE0DA;
  --brand-600: #5EE0D6;
  --brand-500: #3EC8C0;
  --brand-400: #2A9A94;
  --brand-300: #2A7A74;
  --brand-200: #1F5A56;
  --brand-100: #16403C;
  --brand-50: #123330;
  --ok: #5EE09A; --ok-bg: #123322; --ok-line: #1F5A3A;
  --warn: #5EE0D6; --warn-bg: #123330; --warn-line: #1F5A56;
  --neut: #A8B6C4; --neut-bg: #1A2433; --neut-line: #2C3A4F;
  --bad: #FF8A80; --bad-bg: #3A1514; --bad-line: #6B2A26;
  --mark: #5A4A18;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .browse,
html[data-theme="dark"] .settings,
html[data-theme="dark"] .find,
html[data-theme="dark"] .catalog {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"] .browse {
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(62,200,192,.10), transparent 55%),
    radial-gradient(700px 360px at 100% 8%, rgba(15,36,72,.55), transparent 50%),
    var(--bg);
}
html[data-theme="dark"] .hdr {
  background: rgba(11, 18, 32, .88);
  border-bottom-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] .sitefoot {
  background: color-mix(in srgb, var(--bg) 88%, #000);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .find {
  background: rgba(22, 32, 51, .94);
  border-color: var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
html[data-theme="dark"] .drop,
html[data-theme="dark"] .paper,
html[data-theme="dark"] #report,
html[data-theme="dark"] .btn:not(.primary),
html[data-theme="dark"] .cnt,
html[data-theme="dark"] .pchip,
html[data-theme="dark"] .detail,
html[data-theme="dark"] .row,
html[data-theme="dark"] .blk,
html[data-theme="dark"] .blkhd,
html[data-theme="dark"] .note,
html[data-theme="dark"] .palette,
html[data-theme="dark"] .filterbar,
html[data-theme="dark"] .find-field input,
html[data-theme="dark"] kbd {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .intake {
  background:
    radial-gradient(1100px 460px at 50% -14%, rgba(62,200,192,.10) 0%, transparent 72%),
    var(--bg);
}
html[data-theme="dark"] .list,
html[data-theme="dark"] .col-list {
  background: var(--sunk);
}
html[data-theme="dark"] .grp {
  background: linear-gradient(180deg, var(--sunk) 68%, transparent);
  color: var(--brand-600);
}
html[data-theme="dark"] .row:hover,
html[data-theme="dark"] .row.sel,
html[data-theme="dark"] .blkhd:hover,
html[data-theme="dark"] .blkrow:hover,
html[data-theme="dark"] .c:hover,
html[data-theme="dark"] .c.act {
  background: #1C2B42;
}
html[data-theme="dark"] .c-card[aria-pressed="true"] { background: #1A2740; }
html[data-theme="dark"] .aud-card[aria-pressed="true"] { background: var(--brand-50); }
html[data-theme="dark"] .cnt[aria-pressed="true"] { background: var(--brand-600); color: #06201E; }
html[data-theme="dark"] .cnt[aria-pressed="true"] span.l { color: #0B1220; }
html[data-theme="dark"] .back { color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .name,
html[data-theme="dark"] .aud-name,
html[data-theme="dark"] .dtitle,
html[data-theme="dark"] .creason { color: var(--navy); }
html[data-theme="dark"] mark.on { color: #F3F7FB; }
html[data-theme="dark"] .join-btn {
  background: var(--brand);
  color: #06201E;
  box-shadow: none;
}
html[data-theme="dark"] .join-sub { color: #0A3A34; }
html[data-theme="dark"] .drop-main b { color: var(--ink); }
html[data-theme="dark"] .drop-main span { color: var(--ink-2); }
html[data-theme="dark"] .sample-link { color: var(--brand-700); }
html[data-theme="dark"] .wordmark,
html[data-theme="dark"] .hero-logo {
  background: #F7FAFC;
  border-radius: 10px;
  padding: 5px 10px;
  box-sizing: content-box;
}
html[data-theme="dark"] .brand { color: var(--ink); }
html[data-theme="dark"] .nav button,
html[data-theme="dark"] .nav a { color: var(--ink-2); }
html[data-theme="dark"] .nav button[aria-pressed="true"] { color: var(--brand); }
html[data-theme="dark"] .tabbar button { color: var(--ink-3); }
html[data-theme="dark"] .tabbar button[aria-pressed="true"] { color: var(--brand); }
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-text {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .btn-pri { background: var(--brand); color: #06201E; border-color: transparent; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .field,
html[data-theme="dark"] .search,
html[data-theme="dark"] .note {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-3); }
html[data-theme="dark"] .aud-card,
html[data-theme="dark"] .c-card,
html[data-theme="dark"] .country,
html[data-theme="dark"] .ios-group,
html[data-theme="dark"] .ios-row,
html[data-theme="dark"] .ada-card,
html[data-theme="dark"] .study,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .row,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .chip {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .aud-card h3,
html[data-theme="dark"] .c-name,
html[data-theme="dark"] .catalog-hd h2,
html[data-theme="dark"] .settings h1,
html[data-theme="dark"] .ada-card h3,
html[data-theme="dark"] .browse h1,
html[data-theme="dark"] .study-title { color: var(--navy); }
html[data-theme="dark"] .aud-card p,
html[data-theme="dark"] .c-n,
html[data-theme="dark"] .catalog-hint,
html[data-theme="dark"] .catalog-sub,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .study-meta,
html[data-theme="dark"] .sitefoot-note,
html[data-theme="dark"] .ada-card p,
html[data-theme="dark"] .ada-card li { color: var(--ink-2); }
html[data-theme="dark"] .chip { color: var(--ink-2); }
html[data-theme="dark"] .chip.exclusive { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
html[data-theme="dark"] .chip.child { background: #3A2A12; border-color: #6B4E1E; color: #F0D7A8; }
html[data-theme="dark"] .study { background: transparent; }
html[data-theme="dark"] a { color: var(--brand-700); }
html[data-theme="dark"] .sitefoot a { color: var(--ink-2); }

/* ADA-friendly: larger type + stronger contrast + bigger hits */
html[data-ada="on"] { font-size: 18px; }
html[data-ada="on"] button,
html[data-ada="on"] a,
html[data-ada="on"] .ios-row,
html[data-ada="on"] .aud-card,
html[data-ada="on"] .c-card,
html[data-ada="on"] .country { min-height: 48px; }
html[data-ada="on"] :focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
html[data-theme="dark"][data-ada="on"] {
  --ink: #FFFFFF;
  --ink-2: #E4EBF3;
  --ink-3: #B7C4D3;
}

/* iPhone stacked layout */
@media (max-width: 899px) {
  .hdr {
    position: sticky; top: 0; z-index: 30;
    padding: 10px 16px;
    height: auto;
  }
  .browse-hero, .catalog, .settings-inner { padding-left: 16px; padding-right: 16px; }
  .browse h1 { font-size: 28px; }
  .hero-logo { height: 36px; }
  .countries, .cancers { grid-template-columns: repeat(2, 1fr); }
  .aud { grid-template-columns: 1fr; }
  .find { flex-direction: column; align-items: stretch; }
  .find-field, .find-field.grow { min-width: 0; width: 100%; }
  .find-go { width: 100%; justify-content: center; }
  html, body { height: auto; min-height: 100dvh; overflow-y: auto; }
  .split { display: block; overflow: visible; min-height: 0; }
  .list, .detail, .col-list { max-height: none; overflow: visible; }
  .detail { padding: 24px 16px 80px; }
  .strip { padding: 18px 16px 14px; }
  .hero .big { font-size: 34px; }
  .kbd, kbd, .sitefoot { display: none; }
  input, textarea, select { font-size: 16px; } /* no iOS zoom */
  .tabbar { display: grid; }
  body { padding-bottom: var(--tabbar-h); }
  .aud-card, .c-card, .ios-row, .btn, .sample-link, .join-btn { min-height: 48px; }
  .sample-link {
    display: flex; width: 100%; min-height: 52px; margin-top: 14px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 16px; font-weight: 620; justify-content: space-between;
  }
  .intake h1 { font-size: 28px; }
  .drop { padding: 22px 16px; }
}

/* ── real iPhone frame (NomaeTrust-style device) ──────────────── */
body {
  display: block;
  padding: 0;
  background: #F3F0FA;
  min-height: 100dvh;
}
.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  background:
    radial-gradient(720px 360px at 50% -8%, #fff 0%, transparent 58%),
    #F3F0FA;
}
.iphone {
  position: relative;
  width: 390px;
  height: 844px;
  padding: 11px;
  background: linear-gradient(160deg, #3A3A3E 0%, #1A1A1D 40%, #111113 100%);
  border-radius: 56px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 2px #0B0B0D,
    0 22px 50px rgba(20,16,40,.22),
    0 60px 120px rgba(20,16,40,.18);
  scale: min(1, (100dvh - 40px) / 844, (100vw - 24px) / 390);
}
.iphone-btn {
  position: absolute; width: 3px; background: #2C2C30; border-radius: 1px;
}
.iphone-btn.silent { left: -3px; top: 118px; height: 26px; }
.iphone-btn.vol-up { left: -3px; top: 168px; height: 50px; }
.iphone-btn.vol-down { left: -3px; top: 226px; height: 50px; }
.iphone-btn.power { right: -3px; top: 188px; height: 78px; }
.iphone-bezel {
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: #000;
}
.iphone-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  border-radius: 44px;
  position: relative;
}
.ios-status {
  flex: 0 0 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 10px;
  position: relative;
  z-index: 50;
  color: var(--ink);
  font-size: 15px;
  font-weight: 670;
  letter-spacing: -.02em;
}
.ios-island {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 118px;
  height: 34px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 20px;
}
.ios-sys { display: flex; align-items: center; gap: 6px; }
.ios-home {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 128px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--ink);
  opacity: .22;
  border-radius: 99px;
  z-index: 45;
  pointer-events: none;
}
.iphone-screen .hdr {
  height: auto;
  padding: 4px 16px 10px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
}
.iphone-screen .nav-desk,
.iphone-screen .sitefoot,
.iphone-screen .kbd { display: none !important; }
.iphone-screen .browse,
.iphone-screen .settings,
.iphone-screen .intake,
.iphone-screen .split { flex: 1; min-height: 0; overflow-y: auto; }
.iphone-screen .split { display: block; overflow-y: auto; }
.iphone-screen .list, .iphone-screen .detail, .iphone-screen .col-list {
  max-height: none; overflow: visible;
}
.iphone-screen .find { flex-direction: column; align-items: stretch; }
.iphone-screen .find-field, .iphone-screen .find-field.grow { min-width: 0; width: 100%; }
.iphone-screen .find-go { width: 100%; justify-content: center; }
.iphone-screen .countries, .iphone-screen .cancers { grid-template-columns: repeat(2, 1fr); }
.iphone-screen .aud { grid-template-columns: 1fr; }
.iphone-screen .browse-hero, .iphone-screen .catalog, .iphone-screen .settings-inner {
  padding-left: 16px; padding-right: 16px;
}
.iphone-screen .browse h1, .iphone-screen .intake h1 { font-size: 26px; }
.iphone-screen .hero-logo { height: 34px; }
.iphone-screen .tabbar {
  position: absolute;
  left: 14px; right: 14px; bottom: 18px;
  display: grid !important;
  height: 58px;
  padding: 6px 6px 8px;
  border: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 32px rgba(10, 37, 64, .14);
}
.iphone-screen .browse,
.iphone-screen .settings,
.iphone-screen .intake,
.iphone-screen .split,
.iphone-screen .catalog { padding-bottom: 84px; }

html[data-theme="dark"] body,
html[data-theme="dark"] .stage {
  background: #0A0C12;
}
html[data-theme="dark"] .stage {
  background:
    radial-gradient(720px 360px at 50% -8%, #182033 0%, transparent 58%),
    #0A0C12;
}
html[data-theme="dark"] .iphone-screen .tabbar {
  background: color-mix(in srgb, var(--surface) 92%, #000);
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
}

/* Real iPhone: drop the fake bezel, keep island + home bar */
@media (max-width: 480px) {
  .stage { padding: 0; background: var(--bg); }
  html[data-theme="dark"] .stage { background: var(--bg); }
  .iphone {
    width: 100%; height: 100dvh; padding: 0; scale: 1;
    background: none; border-radius: 0; box-shadow: none;
  }
  .iphone-btn { display: none; }
  .iphone-bezel, .iphone-screen { border-radius: 0; height: 100%; }
  .ios-status { padding-top: env(safe-area-inset-top); flex-basis: calc(54px + env(safe-area-inset-top)); }
}