/* Predicate Atlas — production stylesheet. Zero external dependencies.
   Design language carried over from the verified prototype:
   paper background, teal primary, amber for uncertainty/gaps, serif display type.
   Fonts are system stacks (no webfonts) to honour the zero-dependency rule. */
:root{--bg:#f6f7f3;--paper:#fff;--paper2:#eef2ec;--ink:#17211c;--muted:#5c6b62;--line:#dde3dc;--teal:#0f766e;--teal-d:#115e59;--teal2:#ccfbf1;--navy:#1e3a4c;--amber:#b45309;--amberbg:#fef3c7;--amberline:#f59e0b;--slate:#475569;--slatebg:#e2e8f0;--red:#b91c1c;--redbg:#fee2e2;--radius:18px;--shadow:0 10px 30px rgba(20,40,30,.08);
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#0f1512;--paper:#18211c;--paper2:#1e2a23;--ink:#eef4ef;--muted:#a8b8ad;--line:#2a3830;--teal:#2dd4bf;--teal-d:#5eead4;--teal2:#134e4a;--navy:#7dd3fc;--amber:#fbbf24;--amberbg:#451a03;--slatebg:#1e293b;--redbg:#450a0a;--shadow:none}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55}
a{color:var(--teal)}button{cursor:pointer;font:inherit}input,select{font:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sticky{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.top{padding:14px 0 10px}.brandrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.logo{font-family:var(--serif);font-weight:900;font-size:28px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}.logo span{color:var(--teal)}
.badge{font-size:12px;font-weight:700;background:var(--amberbg);color:var(--amber);padding:6px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--amberline) 40%,transparent)}
.searchbar{display:flex;gap:8px;margin-top:12px}.searchbar input{flex:1;min-width:0;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:16px;outline:none}.searchbar input:focus{border-color:var(--teal)}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;background:var(--teal);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
@media(prefers-color-scheme:dark){.btn{color:#06251f}}
.btn.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line)}.btn.small{padding:8px 12px;font-size:13px}.btn:disabled{opacity:.5;cursor:wait}
.hints{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}.hints button{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:5px 9px;font-weight:600}.hints a{font-weight:700}
nav#mainNav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 12px}nav#mainNav a{white-space:nowrap;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 14px;border-radius:999px;font-weight:700;text-decoration:none}nav#mainNav a.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.view{display:none;padding:22px 0 50px}.view.active{display:block}
h1{font-family:var(--serif);font-size:clamp(30px,6vw,54px);line-height:.98;letter-spacing:-.03em;margin:6px 0 12px}h2{font-family:var(--serif);font-size:28px;line-height:1.08;margin:0 0 10px}h3{margin:0 0 6px;font-size:16px}
.lead{font-size:17px;color:var(--muted);max-width:780px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}.crumb a{font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}.stat b{font-size:27px;display:block;line-height:1.05;font-family:var(--serif)}.stat span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin:14px 0}
.axis{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;align-items:center}.axis .lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:4px}
.axis button{padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:700}.axis button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
@media(prefers-color-scheme:dark){.axis button.active{color:#06251f}}
.svg-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chip{display:inline-flex;padding:4px 9px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);font-size:12px;font-weight:700;margin:2px;color:var(--ink);text-decoration:none}.chip:hover{border-color:var(--teal)}.chip.unset{background:transparent;border-style:dashed;color:var(--muted);cursor:default}
.pathway{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}.p510{background:#ccfbf1;color:#115e59}.pden{background:#fef3c7;color:#92400e}.ppma{background:#e2e8f0;color:#334155}.pother{background:var(--slatebg);color:var(--slate)}
@media(prefers-color-scheme:dark){.p510{background:#134e4a;color:#5eead4}.pden{color:#fcd34d}.ppma{color:#cbd5e1}}
.pccp{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--navy);color:#fff;white-space:nowrap}
@media(prefers-color-scheme:dark){.pccp{background:#0c4a6e;color:#bae6fd}}
.gapchip{display:inline-flex;padding:4px 9px;border-radius:999px;background:var(--amberbg);color:var(--amber);border:1.5px dashed var(--amber);font-size:11px;font-weight:800;white-space:nowrap}
.vsum{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}.vsum .ok{color:var(--teal)}.vsum .flag{color:var(--amber)}
.row{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;margin:10px 0}.row:hover{border-color:var(--teal)}.rowtop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.row a.title{font-weight:800;font-size:17px;color:var(--ink);text-decoration:none}.row a.title:hover{color:var(--teal)}
.mono{font-family:var(--mono);font-size:13px}.muted{color:var(--muted)}.small{font-size:13px}
.search-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.facets{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;position:sticky;top:170px}.facets h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}.facets h3:first-child{margin-top:0}
.facets label{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;padding:2.5px 0;cursor:pointer}.facets label span{flex:1}.facets .cnt{color:var(--muted);font-size:12px}
.facets input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);flex:none;margin-top:2px}
.snippet{font-size:14px;background:var(--paper2);border-radius:10px;padding:10px 12px;margin-top:8px}.snippet mark{background:var(--amberbg);color:inherit;padding:0 2px;border-radius:3px;font-weight:700}
.ifu{border-left:4px solid var(--teal);background:var(--paper2);padding:16px;border-radius:0 14px 14px 0;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.tcbox{background:var(--paper2);padding:16px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.kv>div{background:var(--paper2);border-radius:12px;padding:12px}.kv b{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:2px}
table.vtable{width:100%;border-collapse:collapse;font-size:14px}table.vtable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 10px;border-bottom:2px solid var(--line)}table.vtable td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.vstat{font-weight:800;white-space:nowrap}.vstat.verified{color:var(--teal)}.vstat.corrected{color:var(--navy)}.vstat.uncertain,.vstat.flagged{color:var(--amber)}.vstat.no_source{color:var(--muted)}
.predlist{list-style:none;margin:0;padding:0}.predlist li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:6px 0;background:var(--paper)}.predlist li.ref{border-style:dashed;background:var(--paper2)}
.tree-node{cursor:pointer}.tree-node rect{fill:var(--paper);stroke:var(--line)}.tree-node:hover rect{stroke:var(--teal);stroke-width:2}
.tree-node.root rect{stroke:var(--teal);stroke-width:2}
.gap-node{cursor:pointer}.gap-node rect{fill:#fbf3df;stroke:var(--amber);stroke-width:2;stroke-dasharray:7 4}.gap-node:hover rect{stroke-width:3}
@media(prefers-color-scheme:dark){.gap-node rect{fill:#2b2113}}
.elapsed-label{font-size:11px;font-weight:800;fill:var(--teal)}
.layout-toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}.layout-toggle button{border:0;background:transparent;color:var(--ink);padding:8px 13px;border-radius:999px;font-weight:700;font-size:13px}.layout-toggle button.active{background:var(--teal);color:#fff}
@media(prefers-color-scheme:dark){.layout-toggle button.active{color:#06251f}}
.exportbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.tl-node{cursor:pointer}.tl-node circle{stroke:var(--paper);stroke-width:1.5}.tl-node:hover circle{stroke:var(--ink);stroke-width:2.5}.tl-node.dim{opacity:.15}.tl-node.future{opacity:0;pointer-events:none}
.tl-gap{cursor:pointer}
.rootcard{display:flex;flex-direction:column;gap:6px}.rootcard .big{font-family:var(--serif);font-size:21px;font-weight:800;line-height:1.15}
.picker{display:flex;gap:8px}.picker input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.datalist-note{font-size:12px;color:var(--muted)}
.fatal{background:var(--redbg);color:var(--red);border:1px solid var(--red);border-radius:14px;padding:16px;margin:18px 0;font-weight:600}
.loading{padding:40px 0;color:var(--muted);font-weight:600}
footer{border-top:1px solid var(--line);padding:22px 0 36px;color:var(--muted);font-size:13px;margin-top:10px}footer a{font-weight:700}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:999px;font-weight:700;display:none;z-index:99;max-width:92vw;text-align:center}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:18px 0;flex-wrap:wrap}
details.faq{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:8px 0;background:var(--paper)}details.faq summary{font-weight:800;cursor:pointer}
@media(max-width:900px){.search-layout{grid-template-columns:1fr}.facets{position:static}}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.grid2,.grid3,.kv{grid-template-columns:1fr}.searchbar{flex-wrap:wrap}.searchbar .btn{flex:1}h1{font-size:32px}}
@media(max-width:420px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:22px}.wrap{padding:0 12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ============ network graph + focus graph (2026-10-16) ============ */
.graph-wrap{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden}
.graph-canvas{display:block;width:100%;height:min(74vh,780px);min-height:440px}
.graph-canvas.focus{height:min(68vh,680px);min-height:400px}
.graph-tip{position:absolute;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.4;max-width:290px;box-shadow:var(--shadow);pointer-events:none;color:var(--ink)}
.net-card{padding:16px}
.net-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.net-search{display:flex;gap:8px}.net-search input{flex:1;min-width:0;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.net-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:700}
.net-filters select,.net-filters input[type="text"],.net-filters input:not([type]){padding:7px 9px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600}
.net-filters input[type="range"]{width:90px;accent-color:var(--teal)}
.net-years{display:inline-flex;gap:6px;align-items:center}
.net-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.net-actions label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.net-panel{position:absolute;top:10px;right:10px;width:324px;max-width:calc(100% - 20px);background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;z-index:6;max-height:calc(100% - 20px);overflow:auto;color:var(--ink)}
.net-close{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:15px;color:var(--muted);cursor:pointer}
.btn.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:4px}
.legend .dot.ring{background:transparent;border:2.5px solid var(--ink)}
@media(max-width:760px){
  .sticky{position:static}
  .graph-canvas{height:62vh;min-height:380px}
  .graph-canvas.focus{height:60vh;min-height:360px}
  .net-panel{left:10px;width:auto}
  .net-search{flex-wrap:wrap}.net-search .btn{flex:1}
}
/* Predicate Atlas — facet click-to-expand styles (ADDITIVE ONLY).
   Coordinator: append this block to site/assets/app.css verbatim.
   All classes are facet- prefixed and scoped under .facets where practical;
   no existing rule is modified or overridden in meaning — .facet-hidden is
   the only display utility and it applies solely to rows this feature adds
   filtering to. */

/* The "+ N more — show all" / "Show less" toggle: a real button, styled to
   read like the old dead-end note but visibly actionable. */
.facets .facet-more{display:block;background:none;border:0;padding:6px 0 2px;color:var(--teal);font-size:12.5px;font-weight:800;text-align:left;cursor:pointer}
.facets .facet-more:hover{text-decoration:underline}
.facets .facet-more:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Expanded region: grows inside the sticky facets card; the list itself
   scrolls internally so the sidebar never pushes the results column. */
.facets .facet-scroll{max-height:300px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:10px;padding:6px 8px;margin:4px 0;background:var(--paper)}

/* "Filter this list…" input inside an expanded group. An aid for long
   lists (e.g. product code), never the only way to reach a value. */
.facets .facet-filter{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;margin:2px 0 4px}
.facets .facet-filter:focus{border-color:var(--teal);outline:none}

/* Rows hidden by the within-facet filter (unselected rows only — selected
   rows are pinned and never get this class). */
.facets label.facet-hidden{display:none}

/* Selected (pinned) rows: subtle highlight so a selection that was pinned
   to the top of a collapsed or expanded list is easy to spot. */
.facets label.facet-pinned{background:var(--paper2);border-radius:8px;padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px}

/* "Showing X of Y values…" line under an expanded, filtered list. */
.facets .facet-filter-note{font-size:12px;color:var(--muted);padding:2px 0 0}

/* Group wrapper added around each facet group (heading + values + toggle);
   no visual change beyond keeping the expanded block together. */
.facets .facet-group{min-width:0}

/* Predicate Atlas — Product Codes page styles (ADDITIVE ONLY).
   Coordinator: append this block to frontend/assets/app.css verbatim.
   Every selector is new and codex- prefixed; no existing rule is modified
   or overridden. The page markup also reuses existing .card / .btn /
   .pager / .mono / .muted / .small classes unchanged. */

/* Controls card: search + three filters + clear, wrapping on narrow screens. */
.codex-controls{padding:16px 20px}
.codex-controls-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.codex-ctl{display:flex;flex-direction:column;gap:5px;min-width:0}
.codex-ctl.grow{flex:1 1 240px}
.codex-ctl>span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.codex-ctl input,.codex-ctl select{padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;min-width:0;max-width:100%}
.codex-ctl input:focus,.codex-ctl select:focus{border-color:var(--teal);outline:none}

/* Result rows: one card-like block per code; only one page (100) in the DOM. */
.codex-row{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin:8px 0}
.codex-row:hover{border-color:var(--teal)}
.codex-row.open{border-color:var(--teal)}
.codex-head{display:flex;gap:10px;align-items:baseline;cursor:pointer;min-width:0}
.codex-head:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.codex-code{font-weight:800;font-size:15px;flex:none}
.codex-name{font-weight:700;font-size:15.5px;flex:1;min-width:0;overflow-wrap:anywhere}
.codex-caret{color:var(--muted);flex:none;font-size:13px}
.codex-meta{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:13px;color:var(--muted)}

/* Atlas tie-in badge: a real link to the search view's product-code facet. */
.codex-badge{display:inline-flex;padding:3px 9px;border-radius:999px;background:var(--teal2);color:var(--teal-d);border:1px solid var(--teal);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.codex-badge:hover{text-decoration:underline}

/* Expanded detail: all 18 FDA fields verbatim, definition full width. */
.codex-detail{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.codex-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.codex-field{background:var(--paper2);border-radius:10px;padding:9px 12px;min-width:0}
.codex-field.wide{grid-column:1/-1}
.codex-field dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin-bottom:2px}
.codex-field dd{margin:0;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.codex-atlasline{font-size:13.5px;margin:12px 0 0}
.codex-atlasline a{font-weight:700}

/* Provenance footer card. */
.codex-prov h3{margin-bottom:6px}

@media(max-width:760px){
  .codex-fields{grid-template-columns:1fr}
  .codex-ctl{flex:1 1 100%}
  .codex-controls-grid .btn{flex:1}
  .codex-name{font-size:14.5px}
}