/* ============================================================================
   COMPONENT LIBRARY  -  every viewer component, one block each.
   Consumes design-tokens.css. Load order: design-tokens.css THEN this file.
   To restyle globally, edit a token. To change one component, edit its block.
   ============================================================================ */

/* === ICONS === */
.msym{font-family:var(--font-icon);font-weight:var(--fw-regular);font-style:normal;font-size:var(--fs-xl);line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20;user-select:none}
#dclose .msym{font-size:var(--fs-xl)}

/* === BASE / RESET === */
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
 font:var(--fs-md)/var(--lh-normal) var(--font-sans);overflow:hidden;-webkit-font-smoothing:antialiased}
svg text{font-family:var(--font-sans)}
#app{position:relative;height:100%}
#app.nopanel{}

/* === SIDE PANEL (legacy, retained for compatibility) === */
.side{position:absolute;left:8px;top:8px;height:calc(100% - 16px);width:290px;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-7);box-shadow:var(--shadow-1);z-index:6;display:flex;flex-direction:column;overflow:hidden;transition:width var(--dur-6) var(--ease-standard),height var(--dur-6) var(--ease-standard)}
.side.collapsed{width:42px;height:42px}
.side-head{display:flex;align-items:center;gap:9px;padding:11px 11px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand-t{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-tight);white-space:nowrap}
.brand-s{font-size:var(--fs-xs);color:var(--mut);white-space:nowrap;margin-top:1px}
.icon-btn{display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--md-shape-full);color:var(--mut);cursor:pointer;line-height:1;padding:0;font-size:var(--fs-lg);transition:background var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard)}
.icon-btn:hover{background:color-mix(in srgb, var(--ink) var(--md-state-hover), transparent);color:var(--ink)}
.icon-btn.on{color:var(--acc);background:none}
#sideToggle{width:26px;height:26px;flex:0 0 auto;font-size:var(--fs-lg)}
.side-body{flex:1;overflow:auto;padding:12px 12px 16px}
.side .brand,.side .side-body{transition:opacity var(--dur-3) ease}
.side.collapsed .brand,.side.collapsed .side-body{opacity:0;pointer-events:none}
.side.collapsed .side-head{padding:8px;border-bottom:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);background:none;border:0;padding:0;gap:2px;margin-bottom:10px}
.seg button{background:none;border:0;border-radius:var(--r-2);color:var(--mut);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:6px 2px;cursor:pointer;white-space:nowrap;transition:background var(--dur-1) ease,color var(--dur-1) ease}
.seg button:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) var(--md-state-hover), transparent)}
.seg button.on{background:none;color:var(--acc)}
.actions{display:flex;gap:6px;margin-bottom:15px}
.actions .icon-btn{flex:1;height:30px;font-size:var(--fs-lg)}
.grp{margin-bottom:13px}
.grp-h{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-13);text-transform:uppercase;color:var(--mut);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.grp-sub{font-weight:var(--fw-medium);letter-spacing:var(--tr-3);text-transform:none;opacity:.85}
.layers{display:flex;flex-direction:column;gap:4px}
.lyr{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);color:var(--ink)}
.lyr b{color:var(--acc);font-weight:var(--fw-bold);font-size:var(--fs-xs);width:24px;flex:0 0 auto}
details.grp>summary{list-style:none;cursor:pointer}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::after{content:"\25be";margin-left:auto;font-size:var(--fs-2xs);opacity:.7}
details.grp[open]>summary::after{content:"\25b4"}
.subh{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-10);text-transform:uppercase;color:var(--mut);margin:11px 0 5px}
.leg{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);padding:3px 0;color:var(--mut)}
.leg .g{width:20px;height:0;border-top-width:2px;border-top-style:solid;flex:0 0 auto}
.leg svg{flex:0 0 auto}

/* === TOP CONTROL BAR === */
.topbar{position:absolute;top:8px;left:8px;z-index:6;display:flex;align-items:center;gap:7px;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-6);padding:6px;box-shadow:var(--shadow-1)}
.topbar .seg{margin:0;grid-template-columns:repeat(4,auto)}
.topbar .seg button{padding:6px 13px}
.topbar .sep{width:1px;align-self:stretch;background:var(--line);margin:2px}
.topbar .icon-btn{width:40px;height:40px;font-size:var(--fs-lg)}

/* === VIEW DROPDOWN === */
.viewdd{position:relative;display:inline-flex}
.viewdd-btn{display:flex;align-items:center;gap:5px;background:none;border:0;color:var(--ink);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);padding:6px 7px 6px 10px;border-radius:var(--r-3);cursor:pointer;white-space:nowrap;max-width:250px;transition:background var(--dur-1) ease}
.viewdd-btn:hover,.viewdd.open .viewdd-btn{background:color-mix(in srgb, var(--ink) var(--md-state-hover), transparent)}
#viewLabel{overflow:hidden;text-overflow:ellipsis}
.viewdd-chev{color:var(--mut);font-size:var(--fs-xl);transition:transform var(--dur-4) ease}
.viewdd.open .viewdd-chev{transform:rotate(180deg)}
.viewdd-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:20;min-width:max(100%,236px);background:var(--pan);border:1px solid var(--line);border-radius:var(--r-6);padding:5px;box-shadow:var(--shadow-4);display:flex;flex-direction:column;gap:1px;animation:ddin var(--dur-2) ease}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.viewdd-menu.hidden{display:none}
.viewdd-opt{display:flex;align-items:center;gap:8px;text-align:left;background:none;border:0;border-radius:var(--r-3);color:var(--ink);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);padding:8px 10px;cursor:pointer;white-space:nowrap;transition:background var(--dur-1) ease}
.viewdd-opt:hover{background:color-mix(in srgb, var(--ink) var(--md-state-hover), transparent)}
.viewdd-opt.on{color:var(--acc);font-weight:var(--fw-semibold)}
.viewdd-opt.on::after{font-family:var(--font-icon);content:"\e5ca";margin-left:auto;font-size:var(--fs-xl)}

/* === LEGEND: FAB + POPOVER === */
.fab{position:absolute;right:16px;bottom:16px;z-index:7;width:56px;height:56px;border-radius:var(--md-shape-lg);background:var(--md-sys-color-primary-container);border:0;color:var(--md-sys-color-on-primary-container);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--md-elevation-3);transition:right var(--dur-4) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard),filter var(--dur-1) var(--ease-standard)}
.fab:hover{box-shadow:var(--md-elevation-4);filter:brightness(1.05)}.fab.on{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.legendpop{position:absolute;right:16px;bottom:84px;z-index:7;width:252px;max-height:72vh;overflow:auto;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-7);padding:14px;box-shadow:var(--shadow-3);transition:right var(--dur-5) ease}
.legendpop.hidden{display:none}
.legendpop .subh:first-child,.legendpop .grp-h:first-child{margin-top:0}
#app:has(#detail:not(.hidden)) .fab,#app:has(#detail:not(.hidden)) .legendpop{right:432px}
#stage{position:absolute;inset:0;overflow:hidden}#svg{width:100%;height:100%;display:block;cursor:grab}#svg:active{cursor:grabbing}

/* === GRAPH: bands, nodes, edges, hover labels === */
text.axband{fill:var(--mut);font-size:var(--fs-xs);letter-spacing:var(--tr-8)}
.node{cursor:pointer;stroke:var(--nstroke);stroke-width:1.2}
.node.frontier{fill:var(--bg)!important;stroke-width:1.9}
.node.sel{stroke:var(--sel);stroke-width:2.6}
.node.dim{opacity:.12}.lk.dim{opacity:.05}
line.band{stroke:var(--band)}
g.lab{pointer-events:none}
.labbg{fill:var(--pan);opacity:.92;stroke:var(--line);stroke-width:1}
text.lbl{fill:var(--lbl);font-size:var(--fs-sm);font-weight:var(--fw-semibold);pointer-events:none;dominant-baseline:middle}

/* === DETAIL PANEL === */
#detail{position:absolute;right:8px;top:8px;bottom:8px;width:412px;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-7);overflow:auto;box-shadow:var(--shadow-1);z-index:5}#detail.hidden{display:none}
#detail .hd{position:sticky;top:0;z-index:3;background:var(--pan);border-bottom:1px solid var(--line);padding:14px 40px 14px 16px;border-radius:var(--r-7) var(--r-7) 0 0}
#dclose{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--mut);width:26px;height:26px;border-radius:var(--r-2);cursor:pointer;font-size:var(--fs-lg);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--dur-1) ease,color var(--dur-1) ease}
#dclose:hover{color:var(--ink);background:var(--pan2)}
#detail .pill{display:inline-block;font-size:var(--fs-xs);letter-spacing:var(--tr-9);padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase}
#detail h3{margin:8px 0 2px;font-size:var(--fs-lg)}#detail .cite{color:var(--mut);font-size:var(--fs-sm);margin-top:6px;border-left:2px solid var(--line);padding-left:8px}
#detail .cite a{color:var(--acc);text-decoration:none;border-bottom:1px dotted var(--acc)}

/* === DETAIL: markdown body === */
#md{padding:16px 18px;font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--ink)}
#md>h1:first-child{margin-top:0}#md h1{font-size:var(--fs-xl);font-weight:var(--fw-regular);margin:2px 0 10px;line-height:var(--lh-snug);letter-spacing:0}
#md h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--tr-9);color:var(--mut);font-weight:var(--fw-bold);margin:18px 0 7px}
#md h3{font-size:var(--fs-md);margin:14px 0 5px}#md p{margin:0 0 11px}
#md ul,#md ol{margin:0 0 11px;padding-left:19px}#md li{margin:3px 0}
#md a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}#md a:hover{border-bottom-color:var(--acc)}#md a.x{cursor:pointer}
#md sup.cite{font-size:var(--fs-2xs);line-height:0;font-weight:var(--fw-bold);color:var(--acc);margin-left:1px;cursor:pointer;padding:0 1px}
#md code{background:var(--pan2);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 5px;font-size:var(--fs-md);font-family:var(--font-mono)}
#md blockquote{border-left:3px solid var(--line);margin:9px 0;padding:3px 12px;color:var(--mut)}
#md table{border-collapse:separate;border-spacing:0;width:100%;margin:12px 0;font-size:var(--fs-md);border:1px solid var(--line);border-radius:var(--r-4);overflow:hidden}
#md th,#md td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
#md th:last-child,#md td:last-child{border-right:0}#md tbody tr:last-child td{border-bottom:0}
#md thead th{background:var(--pan2);font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tr-4);color:var(--mut)}
#md tbody tr:nth-child(even){background:rgba(127,127,127,.05)}

/* === DETAIL: relations list === */
.rel{padding:12px 14px 24px;border-top:1px solid var(--line)}
.rel .t{font-size:var(--fs-xs);letter-spacing:var(--tr-10);text-transform:uppercase;color:var(--mut);font-weight:var(--fw-bold);margin:14px 4px 7px;display:flex;align-items:center;gap:7px}.rel .t:first-child{margin-top:0}
.rel .cnt{background:var(--pan2);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 6px;font-size:var(--fs-xs);color:var(--mut);letter-spacing:0}
.rel .relnone{color:var(--mut);font-size:var(--fs-md);padding:2px 4px}
.rel ol.relnum{list-style:none;margin:0;padding:0;counter-reset:rel}
.rel ol.relnum li{counter-increment:rel;margin:0 0 5px}
.rel ol.relnum a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-3);background:none;border:0;color:var(--ink);cursor:pointer;text-decoration:none;transition:background var(--dur-1) ease}
.rel ol.relnum a:hover{background:color-mix(in srgb, var(--ink) var(--md-state-hover), transparent)}
.rel ol.relnum a::before{content:counter(rel);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--mut);min-width:15px;text-align:center;flex:0 0 auto}
.rel .etype{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-2);flex:0 0 auto}
.rel .rtitle{flex:1;font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel .arrow{color:var(--mut);font-size:var(--fs-lg);flex:0 0 auto;opacity:.4;transition:opacity var(--dur-1) ease}
.rel ol.relnum a:hover .arrow{opacity:.85}

/* === MISC: tip + loader === */
.tip{position:absolute;left:252px;bottom:12px;color:var(--mut);font-size:var(--fs-sm)}
#load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--bg);z-index:10;text-align:center;padding:30px}
.err{max-width:520px;color:var(--mut)}.err code{background:var(--pan2);color:var(--ink);padding:2px 7px;border-radius:var(--r-1)}

/* === DETAIL: clickable [n] citation jumps === */
#md a.refjump{color:var(--acc);font-weight:var(--fw-semibold);text-decoration:none;cursor:pointer;white-space:nowrap}
#md a.refjump:hover{text-decoration:underline}
#md li.refhit{animation:refflash 1.3s var(--ease-standard)}
@keyframes refflash{0%{background:color-mix(in srgb, var(--acc) 24%, transparent)}100%{background:transparent}}