#amb7{
  --bg:#0b2a31; --panel:#103840; --panel2:#0a2429;
  --ink:#eef5f5; --ink2:#a7c3c6; --ink3:#85a8af; --rule:#1d454d;
  --orange:#ff5a0a; --orangeB:#ff7d29; --orangeS:rgba(255,90,10,.14);
  --teal:#25b4a4; --tealS:rgba(37,180,164,.20); --amber:#ffab3d;
  --blue:#6f9ec7; --red:#ff5d63; --purple:#b18bd6;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --r:22px; --rmd:14px; --rsm:11px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,90,10,.10), transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(37,180,164,.10), transparent 45%),
    var(--bg);
  border:1px solid rgba(255,90,10,.22); border-radius:var(--r);
  box-shadow:0 0 34px -6px rgba(255,90,10,.30), 0 24px 60px -24px rgba(0,0,0,.7);
  padding:22px; container-type:inline-size; font-size:16px; line-height:1.5; max-width:1260px; margin:24px auto;
}
/* #amb7 ITSELF is in this selector, not just its descendants. It used to
   inherit its own box-sizing from the host page, which happens to be
   border-box on the live WordPress theme's reset and content-box anywhere
   else -- so `width:100vw` in the full-bleed rule below silently became
   100vw PLUS the 24px padding on a page without that reset, overflowing by
   exactly 24px. Measured 2026-09-09 in a local reproduction of the theme
   chain: 399.3px wide in a 375px viewport. No effect on the live page, where
   the theme already forced border-box; the point is that the tool no longer
   depends on the host to make its own width arithmetic true. */
#amb7,#amb7 *,#amb7 *::before,#amb7 *::after{box-sizing:border-box;}
#amb7 .head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px;}
#amb7 .head h2{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;}
#amb7 .head .sub{font-size:14px;color:var(--ink3);}
#amb7 .status{font-family:var(--mono);font-size:12.5px;color:var(--ink3);
  display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--rule);border-radius:999px;padding:5px 12px;}
#amb7 .dot{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none;}
#amb7 .dot.on{background:var(--teal);box-shadow:0 0 8px var(--teal);}
#amb7 .dot.busy{background:var(--orange);box-shadow:0 0 8px var(--orange);animation:amb-pulse 1s ease-in-out infinite;}
@keyframes amb-pulse{50%{opacity:.3}}

#amb7 .tip{position:relative;cursor:help;border-bottom:1px dotted var(--ink3);}
#amb7 .tip:hover::after{content:attr(data-tip);position:absolute;left:var(--tipx,0px);top:130%;z-index:20;
  background:#04161a;border:1px solid var(--orange);border-radius:8px;padding:7px 10px;font-size:13px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal;width:var(--tipw,260px);line-height:1.45;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);}
#amb7 .q{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--ink3);color:var(--ink3);font-size:10.5px;font-weight:700;margin-left:4px;cursor:help;vertical-align:middle;}

/* The filter bar is SECTIONED, not one ragged wrap. Before: 11 controls in a
   single flex-wrap whose columns never lined up (Search 150px next to a
   full-width Disease area), with three `gstart` divider rules that vanished
   the moment the row wrapped -- so the grouping the markup already encoded was
   invisible. Now each group is a labelled `.fsec` laid out on its own auto-fit
   grid, so columns align within a section and the section captions carry the
   grouping the dividers used to imply. `auto-fit` + `minmax` is what keeps the
   phone case working: it collapses to a single column on its own, which is why
   the old narrow-screen override for `.gstart` is gone rather than ported. */
#amb7 .cohort{display:flex;flex-direction:column;gap:0;padding:15px 15px 10px;position:relative;
  background:var(--panel2);border:1px solid var(--rule);border-radius:var(--rmd);margin-bottom:8px;}
#amb7 .fsec{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:7px 14px;align-items:end;padding:7px 0;}
#amb7 .fsec + .fsec{border-top:1px solid var(--rule);}
#amb7 .fsec-cap{grid-column:1/-1;font-size:10.5px;line-height:1.1;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;}
/* The two checkbox blocks earn a wider slot than a plain select -- capped by
   .facetwrap's own min(420px,100%) so this cannot reintroduce the 375px
   overflow that rule exists to prevent. */
#amb7 .fsec .fgroup.wide{grid-column:span 2;}
/* Actions sit on their own line, right-aligned, instead of trailing whichever
   filter happened to wrap last. */
#amb7 .fsec-actions{display:flex;justify-content:flex-end;gap:10px;padding:9px 0 0;}
#amb7 .cohort-tag{position:absolute;top:-9px;left:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orangeB);background:var(--bg);padding:1px 8px;border-radius:6px;border:1px solid var(--rule);}
/* `min-width:0` because a flex item defaults to `min-width:auto`, i.e. it
   refuses to shrink below its content. Without it the Designation checkbox box
   below keeps its full 420px on a 375px phone no matter what `max-width` says
   (`100%` resolves against a parent that never shrank), and the filter bar
   overflows sideways. */
#amb7 .fgroup{display:flex;flex-direction:column;gap:5px;min-width:0;}
/* `[hidden]` is a UA rule (`display:none`), and the author `display:flex`
   above beats it. renderCharts() has set .hidden on the per-preset controls
   since it was written and nothing ever happened -- Cohort window, Custom
   years and Group by showed on every preset, doing nothing on most of them.
   Verified 2026-08-31: hidden=true, computed display:flex, visible. */
#amb7 .fgroup[hidden],#amb7 [hidden]{display:none;}
/* Applicable to this view, but inert because of another setting -- dimmed and
   disabled rather than hidden, so the layout does not jump and the control can
   still say why. Same treatment, and the same reasoning, as the status
   sub-controls' .dim (r6). */
#amb7 .inert{opacity:.4;}
#amb7 .inert,#amb7 .inert *{cursor:not-allowed;}
/* Checkbox sets inside a filter group (Designation, Chemistry -- Phase 0).
   Both capped and SCROLLED, not free-growing. Measured 2026-08-06: letting
   the eight designation boxes wrap to their natural height took the whole
   filter bar from 225px to 422px, pushing the drugs table below the fold on a
   1203px viewport -- the bar is the thing you glance at, not the thing you
   read. Width, not scrolling, is what buys that back: measured across five
   variants, a 420px box shows all eight designations in three rows for the
   SAME 336px bar as a 250px box scrolled to 58px -- and scrolling hid five of
   the eight, which for the headline filter of this change defeats the point.
   `width:max-content` capped at that 420px keeps the two-item Chemistry box
   narrow instead of stretching it to match.
   The cap is `min(420px,100%)`, not a bare 420px: on a 375px phone the filter
   bar is only ~255px wide, and a fixed 420px box hung 179px past its right
   edge with the last designations unreachable — found on the live site
   2026-08-06, after this had already shipped, because the layout check ran
   only at desktop width. */
#amb7 .facetwrap{display:flex;flex-wrap:wrap;gap:2px 10px;width:max-content;max-width:min(420px,100%);
  padding:5px 8px;border:1px solid var(--rule);border-radius:var(--rsm);background:var(--panel);}
#amb7 .facetwrap .check{font-size:13px;color:var(--ink2);}
/* B28's condition typeahead has its own list because a native <datalist>
   cannot do the one thing this filter needs: suggest a descriptor that does
   NOT contain what was typed. Chrome and Firefox both filter datalist options
   against the input's value, so "ovarian cancer" -> "Ovarian Neoplasms" -- the
   suggestion that matters most, since MeSH spells it the other way round --
   is precisely the one the browser would hide. Positioned over the bar rather
   than in flow: a list that pushed the filters down would move the control
   under the pointer on every keystroke. */
#amb7 .condbox{position:relative;}
#amb7 .condsug{position:absolute;z-index:40;top:calc(100% + 2px);left:0;
  width:max-content;min-width:100%;max-width:min(340px,86vw);max-height:232px;overflow:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--rsm);
  box-shadow:0 6px 18px rgba(0,0,0,.22);padding:3px;}
#amb7 .condsug .csug{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--rsm);padding:4px 7px;cursor:pointer;
  font:inherit;color:var(--ink);}
#amb7 .condsug .csug:hover,#amb7 .condsug .csug.on{background:var(--panel2);}
#amb7 .condsug .ct{flex:1 1 auto;font-size:13px;white-space:normal;overflow-wrap:anywhere;}
#amb7 .condsug .cn{flex:0 0 auto;font-size:11.5px;color:var(--ink3);white-space:nowrap;}
#amb7 .condsug .cnone{padding:5px 7px;font-size:12.5px;color:var(--ink3);}
/* Logical grouping within the filter bar (2026-07-31): a thin divider marks
   where Biology / Regulatory & commercial / Evidence begin, so the 11 filters
   read as clusters instead of one undifferentiated row. Deliberately just a
   divider, not a floating group-name label -- this bar wraps unpredictably at
   different widths and a positioned label risks clipping/overlap depending on
   where a group happens to land; the divider degrades safely at any width.
   Search stays outside a group -- it does not belong to a category. */
#amb7 label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
#amb7 input,#amb7 select{font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--rsm);padding:8px 10px;}
/* The dropdown LIST needs its own colours. Styling a <select> does not reach
   its <option> children: the popup is drawn by the OS, which picks its own
   background and then inherits the dark `color` from the select -- dark grey
   text on a dark panel, effectively unreadable (reported 2026-08-06 with a
   screenshot; only the blue-highlighted row was legible). Setting both
   properties on the option itself is what fixes it on Windows/Linux Chrome and
   Firefox. Safari and iOS always draw a native light popup and ignore this,
   which is fine -- their default is already readable.
   `color-scheme:dark` is the same fix for the parts no CSS can reach: the
   scrollbar inside a long dropdown, and the native month picker. */
#amb7{color-scheme:dark;}
#amb7 select option{background:var(--panel);color:var(--ink);}
#amb7 select option:disabled{color:var(--ink3);}
#amb7 input[type=text]{min-width:150px;}
#amb7 input[type=month]{padding:5px 7px;font-size:14px;}
#amb7 ::placeholder{color:#547079;}
#amb7 :is(input,select):focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange);}
#amb7 .btn{appearance:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--orangeB);border:1px solid rgba(255,125,41,.5);border-radius:999px;padding:7px 14px;white-space:nowrap;}
#amb7 .btn:hover{background:var(--orangeS);border-color:var(--orange);}
#amb7 .btn.solid{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 0 18px -5px rgba(255,90,10,.6);}

#amb7 .disp{display:none;flex-wrap:wrap;gap:16px 22px;align-items:flex-start;padding:15px;position:relative;
  background:var(--panel2);border:1px solid var(--rule);border-radius:var(--rmd);margin-bottom:8px;}
#amb7 .disp.show{display:flex;}
#amb7 .dcol{display:flex;flex-direction:column;gap:6px;min-width:150px;}
#amb7 .check{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--ink);cursor:pointer;}
#amb7 .check input{width:15px;height:15px;accent-color:var(--orange);cursor:pointer;padding:0;flex:none;}
#amb7 .check.top{font-weight:700;}
#amb7 .swatch{width:9px;height:9px;border-radius:2px;flex:none;}
#amb7 .rangerow{display:flex;align-items:center;gap:6px;margin:2px 0 2px 21px;}
#amb7 .rangerow select{font-size:12.5px;padding:3px 6px;background:var(--bg);color:var(--ink2);}
#amb7 .customrange{display:flex;align-items:center;gap:4px;margin:2px 0 2px 21px;}
#amb7 .customrange[hidden]{display:none;}
#amb7 .subwrap{display:flex;flex-direction:column;gap:4px;margin:2px 0 0 21px;padding-left:10px;border-left:2px solid var(--rule);}
#amb7 .subwrap .check{font-size:13px;color:var(--ink2);}
#amb7 .rangerow.dim,#amb7 .subwrap.dim,#amb7 .customrange.dim{opacity:.35;}
#amb7 .rangerow.dim select,#amb7 .subwrap.dim .check{cursor:not-allowed;}
#amb7 select:disabled,#amb7 input:disabled{cursor:not-allowed;}

#amb7 .poolToggle{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--rule);border-radius:999px;padding:3px;}
#amb7 .poolToggle button{appearance:none;border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink3);padding:6px 13px;cursor:pointer;border-radius:999px;white-space:nowrap;}
#amb7 .poolToggle button[aria-pressed="true"]{background:var(--teal);color:#06201d;}
#amb7 .poolToggle button:hover:not([aria-pressed="true"]){color:var(--ink);}
#amb7 .views{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--rule);margin:14px 0 16px;}
#amb7 .view{appearance:none;border:0;background:none;font:inherit;font-size:15.5px;color:var(--ink2);
  padding:9px 18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;}
#amb7 .view:hover{color:var(--ink);background:rgba(255,255,255,.03);}
#amb7 .view[aria-selected="true"]{color:var(--orange);border-bottom-color:var(--orange);font-weight:700;}

#amb7 .lens{display:none;flex-wrap:wrap;gap:13px;align-items:flex-end;margin:0 0 14px;padding:11px 14px;
  background:rgba(255,90,10,.05);border:1px solid rgba(255,90,10,.18);border-radius:var(--rmd);}
#amb7 .lens.active{display:flex;}
#amb7 .lens-tag{width:100%;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:-4px;}

#amb7 .hint{font-size:14px;color:var(--ink3);margin-bottom:12px;padding:8px 12px;background:var(--panel2);border-left:2px solid var(--orange);border-radius:0 8px 8px 0;}

#amb7 .summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
#amb7 .stat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rmd);padding:9px 15px;min-width:92px;}
#amb7 .stat b{display:block;font-size:20px;font-weight:700;}
#amb7 .stat span{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);}

#amb7 .chart{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rmd);padding:16px;margin-bottom:16px;}
#amb7 .chart h3{margin:0 0 12px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orangeB);font-weight:700;}
#amb7 .bar{display:grid;grid-template-columns:210px 1fr 54px;gap:10px;align-items:center;margin-bottom:7px;font-size:14px;cursor:pointer;}
#amb7 .bar:hover .bl{color:var(--ink);}
#amb7 .bl{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#amb7 .bt{background:var(--panel2);border-radius:4px;height:16px;overflow:hidden;display:flex;}
#amb7 .bf{height:100%;min-width:2px;}
#amb7 .bv{font-family:var(--mono);font-size:14px;text-align:right;color:var(--ink);}
#amb7 canvas{width:100%;display:block;border-radius:8px;background:var(--panel2);}
#amb7 .clegend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12.5px;color:var(--ink2);}
#amb7 .clegend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle;}
/* Deliberately louder than .clegend: an amber left rule and full-contrast ink,
   so it reads as a condition on the number rather than another footnote. */
#amb7 .cwarn{margin-top:12px;padding:9px 12px;font-size:13px;line-height:1.55;color:var(--ink);
  background:rgba(255,171,61,.08);border-left:3px solid var(--amber);border-radius:0 var(--rsm) var(--rsm) 0;}
#amb7 .cwarn b{color:var(--amber);}

/* B35 D1: ONE vertical scroll surface. The box used to scroll by itself
   (max-height 620px) with its header sticky to the BOX top, which slides under
   the pinned search bar as the page scrolls, and the column names went with
   it. Now the page scrolls and the header sticks under the bar at page level
   (--amb-headtop, measured by pinTableHead()). overflow:clip rounds the corners
   without making the box a scroll container, which would capture the sticky
   header again. A table wider than its box (.hscroll) and the wide pipeline
   grid must scroll sideways, so they keep a box one window tall less the
   bar: its sideways scrollbar then shows with the first rows, where a
   page-long table would put it rows below the fold (and a fixed 620px box,
   on a 650px-tall laptop window, still would). pinTableHead() moves their
   header by hand. */
#amb7 .tablewrap{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rmd);overflow:clip;}
#amb7 .tablewrap:is(.hscroll,.wide){overflow:auto;max-height:max(240px,calc(100vh - var(--amb-headtop,0px) - 16px));}
#amb7 .tablewrap thead{position:relative;z-index:2;}
#amb7 .tablewrap:not(.wide):not(.hscroll) thead th{top:var(--amb-headtop,0px);}
#amb7 table{width:100%;border-collapse:collapse;font-size:14.5px;}
#amb7 thead th{position:sticky;top:0;background:var(--panel2);text-align:left;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);padding:9px 9px;border-bottom:1px solid var(--rule);white-space:nowrap;cursor:pointer;user-select:none;z-index:1;}
#amb7 thead th:hover{color:var(--orangeB);}
#amb7 thead th.sa::after{content:" \25B4";}
#amb7 thead th.sd::after{content:" \25BE";}
#amb7 tbody td{padding:7px 9px;border-bottom:1px solid var(--rule);color:var(--ink);vertical-align:top;}
/* Two-line clamp for long free-text cells (Target, Sponsor). `overflow-wrap:
   anywhere` matters as much as the clamp: `target` is a hyphen-joined string
   with no spaces, so without it the browser breaks after every hyphen and
   renders one gene symbol per line in a narrow column. Max-width keeps the
   clamped cell from stealing the table's width in the other direction. */
/* min-width matters more than max here. The table is auto-layout, so a clamped
   cell (overflow:hidden) demands no width at all and the column collapsed to
   61px -- two lines of about eight characters, a useless preview. The minimum
   buys a readable first line in both states. */
#amb7 tbody td.clamp{min-width:150px;max-width:230px;}
#amb7 td.clamp .clampbox{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;}
/* Back to `display:block` when open, not just an unset clamp: the -webkit-box
   layout keeps laying each line out as a box child, so an expanded 363-char
   target ran to 1,697px (one gene symbol per line) instead of wrapping. */
#amb7 td.clamp.open .clampbox{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;}
#amb7 tbody td.clamp.open{max-width:340px;}
/* B28's column spends VERTICAL budget, not horizontal: measured 2026-09-15 over
   40 rows, one CLIPPED term costs +11% body height, a wrapped one +26%, and two
   terms +81%. So it is one line, clipped, with the full descriptor on hover --
   and the muted count line under it is free, because the Trials bucket bar
   already sets the 64px row floor those numbers were measured against.
   min-width for the same reason .clamp above has one: the table is auto-layout,
   and a cell whose content is overflow:hidden demands no width at all. */
/* Fixed at the 156px the measurement assumed. A band (156-200) let the
   column take 200 and put the table's min-content at 1,192px against the
   1,198px it gets -- inside the budget, but with 6px of headroom instead
   of the 56px dropping `Last activity` was supposed to buy, which is not
   what was agreed and not enough for the next long sponsor string. */
#amb7 tbody td.condcell{min-width:156px;max-width:156px;}
#amb7 td.condcell .ct1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#amb7 td.condcell .ct2{margin-top:2px;font-size:11.5px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#amb7 :is(.morebtn,.namesmore){appearance:none;background:none;border:0;padding:2px 0 0;margin:0;cursor:pointer;
  font:inherit;font-size:12px;color:var(--orangeB);text-decoration:underline;}
#amb7 :is(.morebtn,.namesmore):hover{color:var(--orange);}
/* Inline copy-to-clipboard trigger for long identifier strings (InChI --
   B2, 2026-08-18): same family as .btn but small enough to sit next to a kv
   label instead of taking a button's usual footprint. */
#amb7 .copybtn{appearance:none;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--orangeB);border:1px solid rgba(255,125,41,.5);border-radius:999px;
  padding:1px 8px;margin-left:6px;white-space:nowrap;}
#amb7 .copybtn:hover{background:var(--orangeS);border-color:var(--orange);}
#amb7 td.num{font-family:var(--mono);white-space:nowrap;}
#amb7 td.na{color:var(--ink3);}
/* Pipeline-detail column set (ARCHITECTURE.md 3m): 4 buckets x 5 phase
   slots. Cells are narrow, monospaced and tabular so the digits line up down
   the whole column -- that vertical alignment is the entire point, it is what
   makes a shape readable by scanning rather than by reading each number.
   .tablewrap already scrolls (overflow:auto), so the min-width below just
   stops the browser compressing 20 numeric columns into unreadable slivers. */
#amb7 table.wide{min-width:1180px;}
#amb7 thead th.grp{text-align:center;padding-bottom:3px;border-bottom:none;cursor:default;}
#amb7 thead th.slot{text-align:right;padding:0 4px 9px;font-size:11px;letter-spacing:.02em;cursor:default;}
#amb7 thead th.slot:hover,#amb7 thead th.grp:hover{color:var(--ink3);}
#amb7 tbody td.slot{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  padding:7px 4px;white-space:nowrap;}
#amb7 td.gend,#amb7 th.gend{border-right:1px solid var(--rule);}
#amb7 td.gstart,#amb7 th.gstart{padding-left:10px;}
/* Zero renders as a dimmed dot, not "0": on a 20-cell row a screen of zeros
   competes with the numbers that matter, and sparsity is the norm here (26% of
   drugs fill a single cell). */
#amb7 .zdot{color:var(--ink3);opacity:.4;}
#amb7 tbody tr{cursor:pointer;}
#amb7 tbody tr:hover{background:rgba(255,255,255,.03);}
#amb7 .wrap{white-space:normal;max-width:240px;color:var(--ink2);font-size:14px;}
#amb7 .pill{font-size:11.5px;border-radius:999px;padding:2px 9px;border:1px solid var(--rule);white-space:nowrap;display:inline-block;}
#amb7 .pill.mono{font-family:var(--mono);}
/* B25: several drug chips share one cell, so they need the gap a lone
   pill never did. .incohort is a hook only -- the bold comes from the <b>
   inside, so a chip stays legible if this rule is ever dropped. */
#amb7 .drugchip{margin:1px 4px 1px 0;}
/* B10 (2026-09-15): same multi-chip-in-one-cell problem as .drugchip. MeSH
   descriptors are long and inverted ("Carcinoma, Non-Small-Cell Lung"), so
   these wrap where a drug chip does not -- white-space:normal overrides the
   nowrap .pill sets, or one descriptor forces the column past its max-width.
   .meshlead is the display default; like .incohort the bold comes from the
   <b> inside, so the lead stays distinguishable without this rule. */
#amb7 .meshchip{margin:1px 4px 1px 0;white-space:normal;}
#amb7 .meshlead{border-color:rgba(37,180,164,.5);}
#amb7 .raw{font-family:var(--mono);font-size:12px;color:var(--ink3);}
/* B29 (2026-09-18). Which way round nowrap goes here was decided wrongly once
   and is now decided by what the call sites actually emit. There are 13 of
   them: THREE use a bare `.chip` and all three carry FREE TEXT -- approved
   indications and the two condition lists -- while all eleven fixed labels
   carry a modifier (.nme, .fic, .warn, .reg, .form, .unconf, .diag, .path).
   So wrapping is the base case and nowrap is the exception, not the other
   way round. (.diag joined on 2026-09-18 with B16: fixed label, so nowrap.)

   The 2026-09-09 fix got this backwards. It read the base as "short fixed
   labels" and exempted pathway chips alone, which left the free-text bare
   chips still on nowrap: FOSDENOPTERIN's "sulfite oxidase deficiency due to
   molybdenum cofactor deficiency" is 64 characters and ran 20px past the
   360px viewport at 375px (measured 2026-09-17). T17 had been guarding the
   one case that was fixed while the premise it rested on was false.

   Pathway volumes, which are why this matters at all: 16,067 chips, median 34
   chars, p90 62, p99 103, max 126 -- 5,824 (36.2%) over 40. max-width keeps a
   chip inside its card even when a single token is huge. */
#amb7 .chip{font-size:11.5px;border-radius:6px;padding:2px 7px;display:inline-block;margin:1px 3px 1px 0;border:1px solid var(--rule);background:var(--panel2);color:var(--ink2);white-space:normal;max-width:100%;overflow-wrap:anywhere;}
/* The fixed labels opt back out, and `max-width:none` is part of that opt-out
   rather than an oversight: nowrap plus a capped box paints the text OUTSIDE
   its own border and background, which reads as a rendering fault. Restoring
   both properties makes this an exact revert to pre-B29 behaviour for the ten
   fixed-label call sites, which is the only behaviour anyone has reviewed.
   (Measured 2026-09-18 across seven drugs at 375px, no fixed-label chip
   actually reached the cap -- this is belt and braces, not a fixed bug.)
   Three of them (.nme, .fic, .diag) sit in table cells where wrapping would
   change row heights; the rest are short labels where wrapping would look
   like a fault. */
#amb7 .chip.nme,#amb7 .chip.fic,#amb7 .chip.warn,#amb7 .chip.reg,#amb7 .chip.form,#amb7 .chip.unconf,#amb7 .chip.diag{white-space:nowrap;max-width:none;}
#amb7 .chip.nme{border-color:rgba(37,180,164,.6);color:#7fe0d2;background:var(--tealS);}
#amb7 .chip.fic{border-color:rgba(255,125,41,.6);color:var(--orangeB);}
#amb7 .chip.reg{border-color:rgba(177,139,214,.5);color:var(--purple);}
#amb7 .chip.warn{border-color:rgba(255,93,99,.5);color:#ff8f93;}
#amb7 .chip.path{border-color:rgba(111,158,199,.5);color:var(--blue);}
#amb7 .chip.form{border-color:var(--rule);color:var(--ink3);}
#amb7 .chip.unconf{border-color:rgba(255,171,61,.6);color:var(--amber);}
/* B16's chip carries the nowrap opt-out and NO colour of its own: the five
   coloured modifiers all mean regulatory or safety standing, and a use-class
   label borrowing one of those palettes would read as a designation. Default
   `.chip` ink is the honest rendering. */
#amb7 .tbreak{font-family:var(--mono);font-size:13px;white-space:nowrap;}
#amb7 .tbreak b{font-weight:700;}
#amb7 .rolebar{display:flex;height:5px;width:68px;border-radius:3px;overflow:hidden;margin-top:3px;background:var(--panel2);cursor:help;}
#amb7 .rolebar span{display:block;}
#amb7 .nct{font-family:var(--mono);color:var(--blue);text-decoration:none;}

#amb7 .tablefoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;}
#amb7 .count{font-size:15px;color:var(--ink2);}
#amb7 .count b{color:var(--ink);font-weight:700;}

/* B34 drawer. #amb7 is a size container, so position:fixed in here would
   anchor to #amb7, not the viewport. The drawer is therefore an absolute child
   of a zero-height sticky host at the top of #amb7 (mountDrawer), and its
   height is set from the viewport by sizeDrawer(). The host's negative margin
   cancels #amb7's padding so the drawer meets the edge. */
#amb7 .dhost{position:sticky;top:0;height:0;z-index:30;margin:0 -22px;}
#amb7 .detail{display:none;position:absolute;top:0;right:0;width:min(640px,100%);box-sizing:border-box;
  overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--orange);
  border-radius:var(--rmd) 0 0 var(--rmd);padding:0 18px 18px;box-shadow:-18px 0 40px -12px rgba(0,0,0,.65);}
#amb7 .detail.show{display:block;}
#amb7 .dbar{position:sticky;top:0;z-index:3;display:flex;gap:6px;align-items:center;justify-content:flex-end;
  margin:0 -18px 10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--rule);}
#amb7 .dbar .dpos{margin-right:auto;font-size:13px;color:var(--ink3);}
#amb7 .dbar button{appearance:none;font:inherit;font-size:17px;line-height:1;cursor:pointer;width:40px;height:40px;
  background:var(--panel2);color:var(--ink);border:1px solid var(--rule);border-radius:50%;}
#amb7 .dbar button:hover:not(:disabled){border-color:var(--orange);color:var(--orangeB);}
#amb7 .dbar button:disabled{opacity:.35;cursor:default;}
#amb7 #tbody tr.cur td{background:var(--orangeS);}
#amb7 .xlink{color:var(--orangeB);}
#amb7 .dtrials{margin:0 0 12px;}
#amb7 .detail h4{margin:0 0 2px;font-size:19px;}
#amb7 .detail .codes{font-family:var(--mono);font-size:12.5px;color:var(--ink3);margin-bottom:12px;}
#amb7 .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
#amb7 .dcard{background:var(--panel2);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;}
#amb7 .dcard h5{margin:0 0 8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orangeB);}
#amb7 .kv{font-size:14.5px;color:var(--ink2);margin-bottom:4px;}
#amb7 .kv b{color:var(--ink);font-weight:600;}
/* No longer rendered since B18 -- SMILES and InChI are copy buttons now. Kept
   because the ui-tests mutation 'smiles-printed-again' reproduces the old
   block, and an unstyled reproduction is a weaker one. Delete both together. */
#amb7 .smiles{font-family:var(--mono);font-size:12.5px;color:var(--ink2);word-break:break-all;background:var(--bg);padding:6px 8px;border-radius:6px;margin-top:4px;}
#amb7 .structimg{background:var(--bg);border:1px solid var(--rule);border-radius:8px;margin-bottom:8px;
  min-height:150px;display:flex;align-items:center;justify-content:center;padding:4px;}
#amb7 .structimg svg{width:100%;height:auto;max-width:300px;display:block;}
#amb7 .structimg .na{font-size:12.5px;}
#amb7 .copyrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
#amb7 .radar{display:block;width:100%;max-width:400px;height:auto;margin:2px auto 4px;}
#amb7 .radar .rr-rim{fill:var(--bg);stroke:var(--ink3);stroke-width:1;stroke-opacity:.55;}
#amb7 .radar .rr-bro5{fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-dasharray:5 4;stroke-opacity:1;}
#amb7 .radar .rr-ro5{fill:var(--ink2);fill-opacity:.10;stroke:var(--ink2);stroke-width:1.6;stroke-opacity:1;}
#amb7 .radar .rr-spoke{stroke:var(--ink3);stroke-width:.8;stroke-opacity:.45;}
#amb7 .radar .rr-data{fill:var(--teal);fill-opacity:.26;stroke:var(--teal);stroke-width:2.4;stroke-linejoin:round;}
#amb7 .radar .rr-over{fill:var(--red);}
#amb7 .radar .rr-lab{font-size:13px;fill:var(--ink2);dominant-baseline:middle;}
#amb7 .radar .rr-lab.warn{fill:var(--amber);}
#amb7 .radar .rr-lab.bad{fill:var(--red);}
#amb7 .radar .rr-val{fill:var(--ink);font-weight:700;}
#amb7 .rr-key{font-size:12.5px;color:var(--ink2);text-align:center;margin-bottom:9px;}
#amb7 .rr-key span{display:inline-block;width:14px;height:0;vertical-align:middle;margin:0 4px 0 0;}
#amb7 .rr-key .rr-kro5{border-top:2px solid var(--ink2);}
#amb7 .rr-key .rr-kbro5{border-top:2px dashed var(--ink2);margin-left:12px;}
#amb7 .rr-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:6px;}
#amb7 .rr-tbl th{font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);
  text-align:right;padding:0 0 4px 8px;border-bottom:1px solid var(--ink3);}
#amb7 .rr-tbl th:first-child{text-align:left;padding-left:0;}
#amb7 .rr-tbl td{padding:3.5px 0 3.5px 8px;text-align:right;color:var(--ink2);
  border-bottom:1px solid var(--rule);}
#amb7 .rr-tbl td:first-child{text-align:left;padding-left:0;color:var(--ink2);}
#amb7 .rr-tbl tr:last-child td{border-bottom:none;}
#amb7 .rr-tbl td.v{color:var(--ink);font-weight:700;}
#amb7 .rr-tbl td.v.warn{color:var(--amber);}
#amb7 .rr-tbl td.v.bad{color:var(--red);}
#amb7 .rr-note{font-size:13px;color:var(--amber);margin-bottom:5px;line-height:1.4;}
#amb7 .gg-wrap{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule);}
#amb7 .gg{margin-bottom:9px;}
#amb7 .gg:last-child{margin-bottom:2px;}
#amb7 .gg-hd{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:4px;}
#amb7 .gg-nm{color:var(--ink);}
#amb7 .gg-v{color:var(--teal);font-weight:700;}
#amb7 .gg-v.out{color:var(--amber);}
#amb7 .gg-v.bad{color:var(--red);}
#amb7 .gg-tr{position:relative;height:9px;background:var(--bg);border:1px solid var(--ink3);border-radius:5px;}
#amb7 .gg-ok{position:absolute;top:0;bottom:0;background:var(--teal);opacity:.30;
  border-left:2px solid var(--teal);border-right:2px solid var(--teal);}
#amb7 .gg-ok2{position:absolute;top:0;bottom:0;background:var(--amber);opacity:.28;}
#amb7 .gg-pt{position:absolute;top:-4px;width:3px;height:15px;background:var(--ink);
  transform:translateX(-1.5px);border-radius:1.5px;}
#amb7 .gg-pt.out{background:var(--amber);}
#amb7 .gg-pt.bad{background:var(--red);}
#amb7 .gg-pt.clamp{width:4px;background:var(--red);}
/* space-between alone left ZERO space between the three items once the rule
   text grew long enough to fill the row -- on a 375px phone the TPSA/MW
   footer read "0.000.10-0.30 above MW 500, half of Rule of ~1/50.60", three
   separate facts run together into one unreadable string (measured
   2026-09-09). gap keeps them apart and lets the rule wrap to a second line
   instead of colliding; the min/max ends never wrap, so the axis stays
   readable at any width. */
#amb7 .gg-ft{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:11.5px;color:var(--ink2);margin-top:3px;}
#amb7 .gg-ft>span:first-child,#amb7 .gg-ft>span:last-child{flex:0 0 auto;white-space:nowrap;}
#amb7 .gg-rule{color:var(--ink2);text-align:center;min-width:0;}
#amb7 .spine{position:relative;height:46px;margin:6px 6px 16px;}
#amb7 .spine-line{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--rule);}
#amb7 .spine-mark{position:absolute;top:14px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);border:2px solid var(--panel2);}
/* No translateX here: renderTrialSpine() writes a per-label
   translateX(-<pct>%) inline, which pins the FIRST label's left edge to the
   spine's left edge, the LAST label's right edge to its right edge, and
   interpolates in between. A flat -50% centred every label on its mark, so
   the two end labels hung half outside the card -- 23px left and 19px right
   of a 269px spine on a 375px phone, measured 2026-09-09, which is what
   "text running out of the box" was. max-width is the backstop for a label
   wider than the whole spine. */
#amb7 .spine-label{position:absolute;top:27px;font-size:10.5px;line-height:1.3;white-space:nowrap;text-align:center;max-width:100%;}
#amb7 .spine-label.alt{top:-15px;}
/* B19 Stage 2 -- the phase-lane timeline. One row per phase the drug actually
   has, all sharing one real-date x-axis, so the same year lines up vertically
   across every lane. Lane labels are deliberately NEUTRAL, not pC() phase
   colours: dot colour means indication here, and two colour meanings inside
   one card is how a reader is taught to mistrust both. The spine directly
   above keeps its phase colours -- it is a different element with its own
   labels. */
#amb7 .lanes{margin:2px 6px 10px;}
#amb7 .lane-legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--ink2);margin-bottom:7px;}
#amb7 .lane-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:-1px;font-style:normal;}
#amb7 .lane-row{position:relative;height:24px;border-bottom:1px solid var(--rule);}
#amb7 .lane-row:first-of-type{border-top:1px solid var(--rule);}
#amb7 .lane-name{position:absolute;left:0;top:5px;width:66px;font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#amb7 .lane-track{position:absolute;left:70px;right:4px;top:0;bottom:0;}
/* Every trial is a dot; nothing is capped. Density is carried by OVERLAP --
   at 0.62 alpha a crowded lane-year cell reads darker rather than silently
   dropping trials (p99 is 22 trials in one cell, max 84). */
#amb7 .lane-dot{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);opacity:.62;cursor:pointer;}
#amb7 .lane-dot:hover{opacity:1;outline:1px solid var(--ink);}
/* An ESTIMATED start date is a sponsor projection, not a record of something
   that happened (B11). It is still plotted -- 6.5% of rows is too much to drop
   -- but hollow, so a reader can see which part of a lane is projection. */
#amb7 .lane-dot.est{background:transparent!important;border:1.5px solid;opacity:.85;}
#amb7 .lane-axis{position:relative;height:15px;margin-left:70px;margin-right:4px;}
#amb7 .lane-tick{position:absolute;top:2px;font-size:10px;color:var(--ink3);transform:translateX(-50%);white-space:nowrap;}
#amb7 .lane-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--rule);opacity:.5;}
#amb7 .lane-note{font-size:11px;color:var(--ink3);margin-top:3px;}
#amb7 .trhist{margin-top:6px;max-height:230px;overflow:auto;}
#amb7 .trrow{font-size:13px;padding:6px 0;border-bottom:1px solid var(--rule);}
#amb7 .trrow:last-child{border-bottom:0;}
#amb7 .trrow .why{color:var(--ink3);font-style:italic;}

#amb7 .msg{margin:10px 0;font-size:15px;padding:9px 13px;border-radius:var(--rsm);display:none;}
#amb7 .msg.show{display:block;}
#amb7 .msg.err{background:rgba(255,93,99,.12);color:#ff8f93;border:1px solid rgba(255,93,99,.4);}
#amb7 .foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;}
#amb7 .foot a{color:var(--orangeB);}
#amb7 .flag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(255,171,61,.5);border-radius:6px;padding:2px 8px;}

/* ==========================================================================
   RESPONSIVE LAYER -- 2026-08-31
   ==========================================================================
   Everything above this point was authored and measured at desktop width. The
   file carried no @media and no @container rule at all. Measured on the real
   10,795-drug dataset at a 390px viewport before this block existed:

     filter chrome above the tabs   1,838px  (about six phone screens
                                              before the first drug row)
     Drugs table in its window      1121 / 327  = 3.4x sideways scroll
     Trials table in its window     1290 / 327  = 3.9x
     chart bar track                    11px
     controls under 40px tall             48   (checkboxes at 15x15)

   @container, not @media, and deliberately: #amb7 declares
   container-type:inline-size and lives in a WordPress column, so its width is
   NOT the viewport's. A media query would break at the wrong moment on any
   page that gives the block a sidebar. These queries resolve against #amb7's
   CONTENT box (padding already subtracted), so 560 here is roughly a 610px
   viewport.

   Two consequences of container-type to know before editing this block:
   - #amb7 cannot query ITSELF. The rule that shrinks its own padding is
     therefore @media, and is the only width @media here.
   - container-type implies `contain:layout`, which makes #amb7 a containing
     block for position:fixed descendants. A "fixed" overlay inside the tool
     anchors to #amb7, not the viewport -- which is why the drawer (.dhost)
     hangs off a sticky host instead of being a fixed overlay.
   ========================================================================== */

/* ---- Filter summary bar: the collapsed state of the whole filter stack ---- */
#amb7 .filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;}
#amb7 .fbtoggle{appearance:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--panel2);color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;}
#amb7 .fbtoggle:hover{border-color:var(--orange);color:var(--orangeB);}
#amb7 .fbtoggle .fbn{font-family:var(--mono);font-size:12.5px;color:#06201d;background:var(--teal);
  border-radius:999px;padding:1px 7px;}
#amb7 .fbtoggle .fbcar{font-size:10.5px;color:var(--ink3);transition:transform .15s;}
#amb7 .fbtoggle[aria-expanded="true"] .fbcar{transform:rotate(180deg);}
#amb7 .fbchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 180px;min-width:0;}
#amb7 .fchip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;max-width:100%;
  background:var(--orangeS);border:1px solid rgba(255,125,41,.5);color:var(--orangeB);
  border-radius:999px;padding:3px 3px 3px 10px;}
#amb7 .fchip .fcv{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#amb7 .fchip button{appearance:none;border:0;background:none;font:inherit;font-size:16px;line-height:1;
  color:var(--orangeB);cursor:pointer;padding:2px 7px;border-radius:999px;}
#amb7 .fchip button:hover{background:rgba(255,90,10,.28);color:#fff;}
#amb7 .fbnone{font-size:13px;color:var(--ink3);}
#amb7 #filterpanels[hidden]{display:none;}

/* Sort control for card mode, where the sticky thead -- the only sort
   affordance this table has ever had -- is hidden. Mounted at every width,
   shown only where the cards are. */
#amb7 .cardsort{display:none;gap:8px;align-items:center;margin-bottom:10px;}
#amb7 .cardsort[hidden]{display:none;}
#amb7 .cardsort label{flex:none;}
#amb7 .cardsort select{flex:1 1 auto;min-width:0;}

/* Switching view should never mean scrolling back up to the tabs. The bottom
   gap has to live on the SIBLING, not as margin here: a sticky element's own
   margin is transparent, so content scrolled through the 16px band under it. */
/* B34: the tabs and the filter bar (with its search box) stick as one block,
   built by buildFilterBar(). */
#amb7 .stickyhead{position:sticky;top:0;z-index:6;background:var(--bg);margin:14px 0 0;padding-bottom:2px;}
#amb7 .stickyhead .views{margin:0;}
#amb7 #filterbar{margin-top:10px;}
#amb7 .qsearch{flex:1 1 240px;max-width:420px;min-width:0;font:inherit;font-size:15px;
  background:var(--panel2);color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;}
#amb7 .fgroup.proxied{display:none;}
#amb7 .pgn{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-left:4px;}

/* The tooltip bubble is anchored left:0 on a 260px box, so any tip in the
   right half of a narrow container hung off the edge. --tipx is set by
   positionTip() just before the bubble shows, at every width. */
#amb7 .tip.tipopen::after{content:attr(data-tip);position:absolute;left:var(--tipx,0px);top:130%;z-index:20;
  background:#04161a;border:1px solid var(--orange);border-radius:8px;padding:7px 10px;font-size:13px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal;width:var(--tipw,260px);line-height:1.45;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);}

/* Touch: ~41 tooltips were :hover::after only, so the entire explanatory layer
   -- including the caveats that Target coverage is 28% and Action type 33% --
   was unreachable on a phone. tapTips() opens them on tap; :hover is disabled
   here so a tap-through hover cannot leave a second bubble stuck open. */
@media (hover:none){
  #amb7 .tip:hover::after{content:none;}
  #amb7 .tip,#amb7 .q{cursor:pointer;}
}

@container (max-width:900px){
  #amb7 .fgroup{flex:1 1 160px;}
  #amb7 .dcol{flex:1 1 170px;min-width:0;}
  #amb7 .bar{grid-template-columns:150px 1fr 48px;}
}

@container (max-width:560px){
  /* The absolutely-positioned section tag wraps to two lines at this width and
     lands on top of the first field's label -- measured, tag bottom 150px
     against a label top of 142px. In normal flow it cannot overlap anything. */
  #amb7 .cohort-tag{position:static;width:100%;order:-1;margin:0 0 2px;padding:0;
    background:none;border:0;color:var(--orangeB);}
  #amb7 .cohort,#amb7 .disp{padding:12px;gap:8px 12px;}
  #amb7 .fgroup{flex:1 1 140px;}
  #amb7 .dcol{flex:1 1 100%;min-width:0;}
  /* `.gstart` dividers are gone from the filter bar entirely -- `.fsec`
     sections replaced them. The grid collapses itself here, so the only
     narrow-screen job left is to let a spanning checkbox block go full width
     rather than demand two columns that do not exist. */
  #amb7 .fsec .fgroup.wide{grid-column:1/-1;}
  #amb7 .facetwrap{width:auto;max-width:100%;}

  /* Tap targets. 16px on text inputs is not a style choice -- below it, iOS
     Safari zooms the page on focus and never zooms back. */
  #amb7 .check{min-height:40px;}
  #amb7 .check input{width:22px;height:22px;}
  #amb7 input,#amb7 select{padding:10px;font-size:17px;}
  #amb7 input[type=month]{padding:9px 7px;font-size:16px;}
  #amb7 .rangerow select,#amb7 .lens select,#amb7 .cardsort select{font-size:16px;padding:9px 8px;}
  #amb7 .btn{padding:10px 16px;font-size:15px;}
  #amb7 .view{padding:11px 15px;}
  #amb7 .q{width:22px;height:22px;font-size:14px;}
  #amb7 .poolToggle button{padding:9px 14px;}

  /* Chart bars: the two fixed tracks (210px + 54px) ate 264px of a 327px
     container and left an 11px bar. Restacked, the track gets the full width. */
  #amb7 .bar{grid-template-columns:1fr 54px;grid-template-areas:"l l" "t v";gap:3px 10px;margin-bottom:11px;}
  #amb7 .bl{grid-area:l;white-space:normal;}
  #amb7 .bt{grid-area:t;}
  #amb7 .bv{grid-area:v;}

  /* Tables become cards. A 9-column table dragged sideways at 3.4x (Trials: 12
     columns at 3.9x) is not a narrow-screen layout, it is a desktop layout with
     a scrollbar. thead is hidden and every cell carries its own label, written
     by labelCells() from the SAME cols array that builds the header -- so a new
     column cannot reach a card without its label.
     #tablewrap.wide is exempt: the 4x5 pipeline grid's entire value is vertical
     digit alignment down a column, which a card destroys. It keeps scrolling. */
  #amb7 .tablewrap{max-height:none;overflow:visible;background:transparent;border:0;border-radius:0;}
  #amb7 .tablewrap.wide{max-height:70vh;overflow:auto;background:var(--panel);
    border:1px solid var(--rule);border-radius:var(--rmd);}
  /* In card mode the row IS the card, so the vertical budget the desktop
     column is clipped for does not exist -- and a clipped descriptor on a
     phone has no hover to recover it. Wrap instead. */
  #amb7 tbody td.condcell{min-width:0;max-width:none;}
  #amb7 td.condcell .ct1{white-space:normal;overflow:visible;}
  #amb7 .tablewrap:not(.wide) thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  #amb7 .tablewrap:not(.wide) table,
  #amb7 .tablewrap:not(.wide) tbody,
  #amb7 .tablewrap:not(.wide) tr,
  #amb7 .tablewrap:not(.wide) td{display:block;width:auto;min-width:0;max-width:none;}
  #amb7 .tablewrap:not(.wide) tr{background:var(--panel);border:1px solid var(--rule);
    border-radius:var(--rmd);padding:12px 14px;margin-bottom:10px;}
  #amb7 .tablewrap:not(.wide) td{border-bottom:0;padding:4px 0;
    display:grid;grid-template-columns:88px 1fr;gap:2px 10px;
    align-items:baseline;justify-items:start;}
  #amb7 .tablewrap:not(.wide) td::before{content:attr(data-label);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink3);line-height:1.7;}
  #amb7 .tablewrap:not(.wide) td.cardhead{display:block;font-size:16px;margin-bottom:7px;
    padding-bottom:8px;border-bottom:1px solid var(--rule);}
  #amb7 .tablewrap:not(.wide) td.cardhead::before{display:none;}
  #amb7 .cardsort{display:flex;}

  /* The drawer takes the whole width: a 640px sheet beside a 375px table
     leaves nothing to read on either side. */
  #amb7 .detail{width:100%;border-radius:0;border-left:0;border-right:0;padding:0 14px 14px;}
  #amb7 .dbar{margin:0 -14px 10px;}
  #amb7 .dgrid{gap:12px;}
  #amb7 .trhist{max-height:none;}

  /* Chrome, measured after the filter bar landed: 768px of the 1,100px above
     the first card was prose and tiles, not controls. Each rule below removes
     a specific piece of that. */
  #amb7 .head h2{font-size:1.15rem;}
  #amb7 .head .sub{font-size:12.5px;}
  #amb7 .lens{padding:10px;gap:10px;}
  /* The lens tag and the hint say the same thing, the hint at more length.
     Two restatements of "one row per molecular entity" cost 60px here. */
  #amb7 .lens-tag{display:none;}
  /* Pipeline detail is a 4x5 grid with a 1180px min-width whose value is
     column alignment. Offering it on a phone offers a sideways drag. */
  #amb7 #colmode{display:none;}
  /* One scrolling row instead of three wrapped ones: 199px -> ~63px, and the
     tiles stay whole rather than being squeezed two-up. */
  #amb7 .summary{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;}
  #amb7 .stat{flex:0 0 auto;min-width:104px;padding:8px 12px;}
  #amb7 .chart{padding:12px;}
  /* Collapsed, not cut: the hint carries real scope caveats, but four lines of
     them before any data is the wrong order. font-size:0 collapses the real
     text (children inherit it) and the label is drawn by ::before, so the
     closed height is exactly one line whatever the hint says. */
  #amb7 .hint{font-size:13px;cursor:pointer;}
  #amb7 .hint:not(.open){font-size:0;padding:10px 12px;}
  #amb7 .hint:not(.open)::before{content:"What am I looking at?";font-size:13px;color:var(--orangeB);font-weight:600;}
  #amb7 .hint:not(.open)::after{content:" \25BE";font-size:13px;color:var(--ink3);}
  #amb7 .fchip button{padding:5px 9px;}
  /* The last two sub-24px controls: the clamped-cell "more" link. */
  #amb7 :is(.morebtn,.namesmore){padding:6px 0;min-height:24px;font-size:13px;}
  #amb7 .filterbar.hasfilters .fbchips{flex:1 1 100%;}
}

/* The only width @media in the file, and only because an element cannot query
   its own container. It does two things.

   1. On a 390px screen the 22px padding plus the 22px radius cost about 20px
      of usable content width for pure decoration.
   2. FULL BLEED. Measured on the live page at a 375px viewport (2026-09-09):
      the Kadence row contributes 25px of padding and its column 8px of
      margin PER SIDE, so 66px of a 375px screen -- 17.6% -- is spent before
      the tool's own 13px. #amb7 cannot shrink an ancestor, but it can escape
      one: width:100vw with margin-inline:calc(50% - 50vw) pulls it back out
      to the viewport edges. Verified in the live DOM, not computed: content
      box 284 -> 351px, +23.6%, left edge 0, and documentElement gained no
      horizontal scroll. The side borders go with it -- at full bleed they sit
      on the screen edge, 2px of decoration and nothing else.

   700, NOT 640, and this is the part to preserve if the number is ever
   touched. Below the breakpoint the container is (viewport - 24); above it,
   (viewport - 112) -- 66px of theme inset plus the DESKTOP 22px padding,
   which is still in force one pixel above the line. A breakpoint anywhere in
   ~585..672 therefore puts those two values on OPPOSITE sides of the 560px
   @container breakpoint, and the page renders the compact layout at 661px
   but the roomier 560-900 one at 660px -- getting WIDER as the screen gets
   NARROWER. 640 and 660 both land in that trap; MEASURED at 660, not
   reasoned about: 549 compact at 661 against 636 mid at 660. At 700 both
   sides land in the 560-900 band (676 and 589). isNarrow() needs no matching
   edit; it measures the live element rather than hardcoding a viewport.

   Caveat: 100vw counts a classic scrollbar. Phones overlay theirs and this
   applies only under 700px, so the exposure is a desktop window dragged
   narrower than 700 -- about 15px of horizontal scroll there, never on a
   phone. */
@media (max-width:700px){
  #amb7{padding:12px;border-radius:0;margin:12px auto;
        width:100vw;max-width:100vw;
        margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
        border-left:0;border-right:0;}
  #amb7 .dhost{margin:0 -12px;}
}

/* B34 standalone page (data/web/index.html, generated by
   extract_web_assets.py). The page owns the viewport, so the WordPress card
   styling and the phone breakout above both go: body.amb-page outranks them
   on specificity, which is why these rules carry the body selector. */
body.amb-page{margin:0;background:#0b2a31;}
body.amb-page .amb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 22px;background:#08222a;border-bottom:1px solid #1d454d;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;}
body.amb-page .amb-logo img{display:block;height:34px;width:auto;}
body.amb-page .amb-about{color:#ff7d29;}
body.amb-page #amb7{max-width:none;width:auto;margin:0;border:0;border-radius:0;box-shadow:none;min-height:100vh;box-sizing:border-box;}
@media (max-width:700px){
  body.amb-page #amb7{width:auto;max-width:none;margin:0;}
  body.amb-page .amb-top{padding:8px 12px;}
}