/* target-id local page. Neutral grays for every surface and every line of text; purple only where something is active or chosen (the wordmark, the step badges, the
   buttons, the selected row, the score bars). The second arm's bar is gray, so a column of bars reads as purple and gray, not as two colours. Dark theme below.
   The dark theme's main text (--ink and --body, in both dark blocks: the visitor's choice and the system's) is one light grey, #D4D8D5: not white, not dark grey (tests/test_dark_theme.py). */
:root{
  --paper:#ECECEE; --panel:#FFFFFF; --ink:#1C1D21; --ink2:#5E6169; --rule:#D5D6DA; --rule2:#E5E6E9;
  --plum:#5B3A9D; --body:#2B2D33; --field:#FAFAFB; --soft:#F3F3F5; --chip:#E7E8EB;
  --hover:#EFEBF7; --sel:#DDD2EE; --best:#F3F0F9; --bad:#FBECEE; --badink:#8E2236; --ghost:#B2B4BA;
  --bar:#6E49B5; --bar2:#8A8F99; --hit:#E3F0E3; --hitink:#2B5B2A; --view:#FFFFFF; --runhover:#44296F; --idc:#0E7C70;
  --hl0:#C3B6E5; --hl1:#F5DAB4; --hl2:#B9DFD9; --hl3:#ECB7C7; --hl4:#ACCAEC; --hl5:#D6DFBA; --hl6:#E5CAB0; --hl7:#D4D6DB;                                    /* the highlights of the shared, extra, elsewhere and swapped atoms and of the fragment arms: soft tints on the light page (web/engine.py PALETTE_LIGHT), the legend's squares */
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --cond:"Barlow Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#1E1F23; --panel:#2A2C31; --ink:#D4D8D5; --ink2:#A9ACB4; --rule:#43464D; --rule2:#34363C;
  --plum:#B99BF0; --body:#D4D8D5; --field:#232529; --soft:#232529; --chip:#383A40;
  --hover:#34323D; --sel:#473A63; --best:#2E2C36; --bad:#4A2E36; --badink:#F2A5B4; --ghost:#767982;
  --bar:#A581E8; --bar2:#8D929C; --hit:#2C4330; --hitink:#A9DDAE; --view:#16171A; --runhover:#D3BCF7; --idc:#52D3C3;
  --hl0:#7A5BC4; --hl1:#E2992D; --hl2:#2D9E8E; --hl3:#D1547A; --hl4:#4C8CD6; --hl5:#8CA53F; --hl6:#B5661C; --hl7:#727A89; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --paper:#1E1F23; --panel:#2A2C31; --ink:#D4D8D5; --ink2:#A9ACB4; --rule:#43464D; --rule2:#34363C;
    --plum:#B99BF0; --body:#D4D8D5; --field:#232529; --soft:#232529; --chip:#383A40;
    --hover:#34323D; --sel:#473A63; --best:#2E2C36; --bad:#4A2E36; --badink:#F2A5B4; --ghost:#767982;
    --bar:#A581E8; --bar2:#8D929C; --hit:#2C4330; --hitink:#A9DDAE; --view:#16171A; --runhover:#D3BCF7; --idc:#52D3C3;
  --hl0:#7A5BC4; --hl1:#E2992D; --hl2:#2D9E8E; --hl3:#D1547A; --hl4:#4C8CD6; --hl5:#8CA53F; --hl6:#B5661C; --hl7:#727A89; color-scheme:dark;
  }
}
[hidden]{display:none !important}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
.top{border-bottom:1px solid var(--rule); background:var(--panel)}
.top .in{max-width:1360px; margin:0 auto; padding:14px 20px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.brand{font-family:var(--cond); font-size:26px; font-weight:600; letter-spacing:.01em; color:var(--plum)}
.brand .id{color:var(--idc)}                                       /* the wordmark: Target- in the page's purple, ID in a second colour (teal), in capitals */
.tag{color:var(--ink2); font-size:13.5px; flex:1}
.top button{background:none; border:1px solid var(--rule); color:var(--ink2); padding:4px 10px; border-radius:6px; font:inherit; font-size:12.5px; cursor:pointer}
.top button:hover{color:var(--ink); background:var(--hover)}
.wrap{max-width:1360px; margin:0 auto; padding:26px 20px 80px}
.grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:20px; align-items:start}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:18px 20px; margin:0 0 20px}
.card h2{margin:0 0 12px; font-family:var(--cond); font-size:21px; font-weight:600; letter-spacing:.01em; display:flex; align-items:center; gap:10px}
.card h2 .n{flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--plum); color:var(--panel); font:600 13px var(--mono)}
label{display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); margin:0 0 4px}
textarea,input[type=text],input[type=number],select{width:100%; font-family:var(--mono); font-size:13px; background:var(--field); color:var(--ink); border:1px solid var(--rule); border-radius:6px; padding:8px 10px}
textarea{resize:vertical; min-height:74px}
textarea:focus,input:focus,select:focus,button:focus-visible{outline:2px solid var(--plum); outline-offset:1px}
.tabs{display:flex; gap:4px; margin:0 0 10px; border-bottom:1px solid var(--rule2)}
.tab{background:none; border:0; border-bottom:3px solid transparent; padding:6px 12px; font:inherit; font-size:14px; color:var(--ink2); cursor:pointer}
.tab.on{color:var(--ink); border-bottom-color:var(--plum); font-weight:600}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 0}
.btn{background:var(--panel); color:var(--ink); border:1px solid var(--rule); border-radius:6px; padding:5px 11px; font:inherit; font-size:13px; cursor:pointer}
.btn:hover{background:var(--hover)}
.btn.sm{padding:3px 8px; font-size:12px}
.run{background:var(--plum); color:var(--panel); border:0; border-radius:7px; padding:9px 26px; font:600 15px var(--sans); cursor:pointer}
.run:hover{background:var(--runhover)} .run:disabled{opacity:.55; cursor:default}
.hint{font-size:12.5px; color:var(--ink2); margin:6px 0 0}
.msg{border-radius:7px; padding:9px 12px; margin:10px 0 0; font-size:13.5px}
.msg.bad{background:var(--bad); color:var(--badink)} .msg.note{background:var(--soft); color:var(--ink2)}
#jsme-box{background:#FFF; border:1px solid var(--rule2); min-height:320px; border-radius:6px; overflow:hidden}
.qwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:14px}
@media (max-width:560px){ .qwrap{grid-template-columns:1fr} }
.dep{background:var(--panel); border:1px solid var(--rule2); border-radius:6px; padding:4px; min-height:190px; display:grid; place-items:center}
.dep img{max-width:100%}
#viewer{height:230px; background:var(--view); border:1px solid var(--rule2); border-radius:6px; position:relative}
.props{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:13px; margin:12px 0 0}
.props dt{color:var(--ink2)} .props dd{margin:0; font-family:var(--mono); font-size:12.5px}
.checks{display:grid; gap:7px; margin:0 0 6px}
.checks label{display:flex; gap:8px; align-items:flex-start; text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--body); margin:0; cursor:pointer}
.checks label small{display:block; color:var(--ink2); font-size:12px}
.checks input{margin-top:4px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0}
@media (max-width:560px){ .opts{grid-template-columns:1fr} }
.strip{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.chip{background:var(--chip); border-radius:999px; padding:3px 11px; font-size:12.5px; color:var(--body)}
.chip b{font-weight:600; color:var(--ink)} .chip.warn{background:var(--bad); color:var(--badink)} .chip.ok{background:var(--hit); color:var(--hitink)}
table.res{width:100%; border-collapse:collapse; font-size:13.5px}
.res th{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink2); text-align:left; padding:6px 8px; border-bottom:1px solid var(--rule); font-weight:600}
.res td{padding:7px 8px; border-bottom:1px solid var(--rule2); vertical-align:middle}
.res tr.pick{cursor:pointer} .res tr.pick:hover td{background:var(--hover)}
.res tr.pick.sel td{background:var(--sel)}
.res tr.exp td{background:var(--best)}
.res tr.exp td:first-child{box-shadow:inset 4px 0 0 var(--plum)}
.res td.rk{font-family:var(--mono); font-size:13px; width:38px; color:var(--ink2)}
.res td.rk.pos{width:30px; padding-right:2px; color:var(--ink); font-weight:600; text-align:right}
.tname{font-weight:600; color:var(--ink)} .tmeta{font-size:12px; color:var(--ink2); font-family:var(--mono)}
.cell{position:relative; min-width:0; height:22px; line-height:22px; border-radius:4px; overflow:hidden; background:var(--soft)}
.cell .bar{position:absolute; inset:0 auto 0 0; background:var(--bar); opacity:.28}
.cell.a2 .bar{background:var(--bar2); opacity:.34}
.cell b{position:relative; font:600 12.5px var(--mono); padding:0 6px; color:var(--ink)} .cell small{position:relative; font-size:11.5px; color:var(--ink2); padding-right:6px; float:right}
.cell.none{background:none; color:var(--ghost); font-size:12px; padding:0 6px}
.evid{background:var(--best); padding:14px 12px}
.evid h4{margin:0 0 8px; font-family:var(--cond); font-size:16px; font-weight:600; color:var(--plum)}
.ecols{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
@media (max-width:760px){ .ecols{grid-template-columns:1fr} }
.lig{position:relative; display:grid; grid-template-columns:118px 1fr; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--rule2); border-radius:7px; padding:6px 8px; margin:0 0 8px}
.lig img{width:118px; height:84px}
.lig .l1{font:600 13px var(--mono)} .lig .l2{font-size:12.5px; color:var(--ink2)} .lig .l3{font-family:var(--mono); font-size:11.5px; color:var(--ink2); word-break:break-all}
.empty{font-size:12.5px; color:var(--ink2); font-style:italic}
.near{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.near .lig{grid-template-columns:1fr; margin:0}
.near .lig img{width:100%; height:120px}
.exp-panel{border:1px solid var(--plum); background:var(--best); border-radius:8px; padding:10px 14px; margin:0 0 14px; font-size:13.5px}
.exp-panel h4{margin:0 0 4px; font-family:var(--cond); font-size:16px; color:var(--plum)}
.exp-panel .e{margin:3px 0}
.foot{font-size:12px; color:var(--ink2); margin-top:30px}
.foot b{color:var(--ink); font-weight:600}
.sub{font-family:var(--cond); font-size:18px; font-weight:600; margin:18px 0 8px}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--rule); border-top-color:var(--plum); border-radius:50%; animation:sp .8s linear infinite; vertical-align:-2px; margin-right:6px}
.spin.sm{width:10px; height:10px; margin-right:0; vertical-align:-1px} .spin.idle{animation:none; opacity:.4}
.ldtext{color:var(--ink2); font-style:italic}
@keyframes sp{to{transform:rotate(360deg)}}

/* Results: the query stays in view, at eye level, while the ranks and their evidence scroll past. */
.resgrid{display:grid; grid-template-columns:262px minmax(0,1fr); gap:20px; align-items:start}
.qside{position:sticky; top:14px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,.08)}
.qside .qlabel{font-family:var(--cond); font-size:16px; font-weight:600; color:var(--plum); margin:0 0 6px}
.qside .dep{min-height:0; padding:2px; background:var(--panel)}
.qside .props{margin:10px 0 0}
.qside .qexp{margin:10px 0 0; padding:6px 8px; border-left:3px solid var(--plum); background:var(--best); font-size:12.5px; color:var(--body)}
.qside .qsmi{margin:10px 0 0; font:11px var(--mono); color:var(--ink2); word-break:break-all; max-height:4.6em; overflow:hidden}
@media (max-width:1000px){
  .resgrid{grid-template-columns:minmax(0,1fr)}
  .qside{top:0; z-index:6; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:8px 10px; margin:0 -4px}
  .qside .qlabel{grid-column:1 / -1; margin:0}
  .qside .dep img{height:96px; width:auto}
  .qside .props, .qside .qsmi, .qside .qshare{display:none}
  .qside .qexp{margin:0}
}
/* the common part of a ligand and the query: the line under a card, and a card whose shared atoms are drawn */
.lig .mcs{color:var(--plum); font-size:12px; min-height:1em}
.lig.shared{cursor:pointer} .lig.shared:hover, .lig.shared:focus{border-color:var(--plum); outline:none} .lig.picked{border-color:var(--plum); box-shadow:0 0 0 1px var(--plum); background:var(--best)}
.qside .qshare{font-size:12px; color:var(--plum); min-height:1.3em; margin:6px 0 0; line-height:1.3}
/* the arm picker: ligands that count (rows) by how a molecule is compared with them (columns) */
.res td.rk .eq{color:var(--plum); font-weight:600; margin-left:1px}
.qside .dep2{margin-top:6px}
@media (max-width:760px){ .qside .dep2{display:none} }
.qside .lleg{font-size:11.5px; color:var(--ink2); margin:2px 0 0; text-align:center}
.sw{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px}

.qside .qcap1{font-weight:600}
.sure, .top button.sure{background:var(--bad); color:var(--badink); border-color:var(--badink)} .run.sure{border:1px solid var(--badink)}
.ld{background:var(--soft); border-radius:6px; animation:pulse 1.1s ease-in-out infinite} @keyframes pulse{50%{opacity:.45}}
.busy{cursor:progress} .busy::before{content:""; display:inline-block; width:11px; height:11px; margin-right:7px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:sp .8s linear infinite; vertical-align:-1px} .run.busy:disabled{opacity:1}

/* the section bar: numbered squares, the section being read filled, those above it marked, those not there yet (before a search) dim. Sticky under the header. */
:root{--nav:49px}
.stepnav{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--rule)}
.stepnav ol{list-style:none; margin:0 auto; padding:0 20px; max-width:1360px; display:flex}
.stepnav li{flex:1 1 auto; min-width:0}
.stepnav a{display:flex; align-items:center; gap:9px; padding:10px 8px; text-decoration:none; color:var(--ink2); line-height:1.2}
.stepnav a:hover{color:var(--ink)}
.stepnav b{flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; font:600 12px var(--mono); color:var(--ink2); background:var(--panel); border:2px solid var(--rule); transition:background .18s, border-color .18s, color .18s}
.stepnav span{font-family:var(--cond); font-size:17px; font-weight:500; letter-spacing:.01em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stepnav li.done b{border-color:var(--plum); color:var(--plum)}
.stepnav li.done a{color:var(--ink)}
.stepnav li.on b{background:var(--plum); border-color:var(--plum); color:var(--panel)}
.stepnav li.on a{color:var(--ink)}
.stepnav li.on span{font-weight:700}
.stepnav li.off a{pointer-events:none; opacity:.45}
.stepnav a:focus-visible{outline:2px solid var(--plum); outline-offset:2px}
@media (max-width:940px){ .stepnav span{display:none} .stepnav li.on span{display:block} .stepnav li.on{flex:2 1 0} }
@media print{ .stepnav{display:none} }
section.card, .foot{scroll-margin-top:calc(var(--nav) + 8px)}
.qside{top:calc(var(--nav) + 14px)}
@media (max-width:1000px){ .qside{top:var(--nav)} }

.npfind{display:flex; align-items:center; gap:10px; margin:10px 0 6px}
#npnear{margin-top:6px}
.npway{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-weight:600; font-size:14px; color:var(--plum); margin:14px 0 6px}
.nphead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:2px 0 4px}
.npchip{font:600 11px var(--mono); padding:1px 9px; border-radius:10px; border:1px solid var(--plum); color:var(--plum)}
.npchip.skeleton{border-style:dashed}
.npchip.none{border:1px dashed var(--ghost); color:var(--ink2); font-weight:400}
.npname{font-weight:600; font-size:14px; overflow-wrap:anywhere}
.npline{font-size:13px; color:var(--body); overflow-wrap:anywhere}
.npline:first-of-type{font:12px var(--mono); color:var(--ink2)}

/* the Targets table: one cell holds a row's scores, in a grid whose columns are the same in every row, so they line up under the header; when they do not fit, the grid wraps under the target */
.res th.arms,.res td.arms{padding:0 8px}
.armsg{display:grid; grid-template-columns:repeat(var(--n,3), minmax(84px,1fr)); gap:8px; align-items:center}
.res thead .armsg span{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink2); font-weight:600; line-height:1.25; padding:6px 0; overflow-wrap:anywhere}
.armcell{min-width:0}
.armcell::before{content:attr(data-label); display:none; font-size:11px; line-height:1.2; color:var(--ink2); margin:0 0 3px; overflow-wrap:anywhere}
table.res.stack, table.res.stack tbody{display:block}
table.res.stack thead{display:none}
table.res.stack tr.pick{display:grid; grid-template-columns:1.9rem 3.4rem minmax(0,1fr); column-gap:8px; padding:6px 4px; border-bottom:1px solid var(--rule2)}
table.res.stack tr.pick td{display:block; border:0; padding:0; background:none}
table.res.stack tr.pick td.rk{width:auto}
table.res.stack tr.pick:hover{background:var(--hover)}
table.res.stack tr.pick.sel{background:var(--sel)}
table.res.stack tr.pick.exp{background:var(--best)}
table.res.stack tr.pick td.arms{grid-column:1 / -1; padding:8px 0 2px}
table.res.stack .armsg{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px 12px}
table.res.stack .armcell::before{display:block}
table.res.stack tr.evrow, table.res.stack tr.evrow td{display:block}

/* the side-by-side layout of the natural products and of the selection: your molecule stays beside the cards */
.lead{font-size:14.5px; margin:0 0 8px; color:var(--body)}
.pmain{min-width:0}
.pwrap{display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:760px){ .pwrap{grid-template-columns:1fr} .pwrap .pyou{position:static; max-height:none} .pwrap .pyou .pdep2{display:none} }      /* (more specific than .pyou below, which comes after: a phone gets the panel on top, not stuck over the list) */
.pyou{position:sticky; top:calc(var(--nav) + 14px); max-height:calc(100vh - var(--nav) - 28px); overflow:auto; border:1px solid var(--rule); border-radius:10px; padding:10px; background:var(--soft)}
.pylabel{font-family:var(--cond); font-size:16px; font-weight:600; color:var(--plum); margin:0 0 6px}
.pyou img{display:block; width:100%; height:auto; border-radius:6px; background:var(--panel)}
.pyou .pdep2{margin-top:6px}
.pyou .qshare{font-size:12px; color:var(--plum); line-height:1.3; margin:6px 0 0} .pyou .qshare:empty{display:none} .pyou .qcap1{font-weight:600}
.pyou .lleg{font-size:11.5px; color:var(--ink2); margin:2px 0 0; text-align:center}
.pyfacts{font:12px var(--mono); color:var(--ink2); margin:6px 0 0}
table.res.stack td.rk.pos::before, table.res.stack td.rk:not(.pos)::before{display:block; font:10px var(--sans); color:var(--ink2); letter-spacing:.04em}
table.res.stack td.rk.pos::before{content:'No.'}
table.res.stack td.rk:not(.pos)::before{content:'Rank'}
.resmain{min-width:0}
/* the optional fragment arms: their group in the arm list, the legend under the query, the colour swatches */
.armgroup{margin:6px 0 0; border:1px solid var(--rule2); border-radius:7px; padding:6px 10px; background:var(--soft)}
.armgroup > summary{cursor:pointer; font-size:13.5px; color:var(--body); font-weight:600}
.armgroup .checks{margin:8px 0 0}
.sw{display:inline-block; width:12px; height:12px; border-radius:3px; flex:none; border:1px solid var(--rule)}                  /* (an edge: a soft tint on a white card needs one) */
.legend{margin:10px 0 0; display:grid; gap:5px; font-size:12px}
.legend .qlabel{font-size:14px; margin:0}
.legend .pc{display:grid; grid-template-columns:12px 1fr; gap:7px; align-items:start}
.legend .pc .sw{margin-top:3px}
.legend .pc.off{color:var(--ghost)} .legend .pc.off .sw{border:1px dashed var(--ghost)}
.legend code{font:11.5px var(--mono); word-break:break-all; color:var(--body)} .legend .pc.off code{color:var(--ghost)}
.legend small{display:block; color:var(--ink2); font-size:11.5px}
.lig .cov{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 3px} .lig .cv{display:inline-flex; gap:4px; align-items:center; font:11.5px var(--mono); color:var(--ink2)}
@media (max-width:760px){ .qside .legend{display:none} }
.sbybox{margin:12px 0 4px}
.sby{position:relative; display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0}
.sby label{display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 12px; line-height:1.25; border:1px solid var(--rule); border-radius:16px; background:var(--panel); font-size:13px; text-transform:none; letter-spacing:0; color:var(--body); cursor:pointer}
.sby label:has(input:checked){border-color:var(--plum); background:var(--soft); color:var(--plum); font-weight:600}
.sby input{margin:0; accent-color:var(--plum)}
label.plain{text-transform:none; letter-spacing:0; font-size:13px}      /* a label that names a unit keeps its case: pActivity, not PACTIVITY */
.pickbox{position:absolute; top:5px; right:7px; display:flex; margin:0; padding:2px; cursor:pointer; line-height:1}
.pickbox input{margin:0; width:16px; height:16px; accent-color:var(--plum); cursor:pointer}
.lig:has(.pickbox input:checked){border-color:var(--plum)}
.lig .pickfrom{color:var(--plum); font-weight:600; padding-right:22px}
.pickgroup{margin:0 0 22px} .pickgroup:last-child{margin-bottom:0}
.pickhead{display:flex; gap:14px; align-items:center; margin:0 0 10px; padding:8px 10px; background:var(--soft); border:1px solid var(--rule2); border-left:3px solid var(--plum); border-radius:8px}
.pickhead img{width:150px; height:100px; flex:none; background:var(--panel); border-radius:6px}
.pickhead .pklabel{font-family:var(--cond); font-size:15px; font-weight:600; color:var(--plum)} .pickhead .qsmi{margin:2px 0; font:11.5px var(--mono); color:var(--ink2); word-break:break-all}
.pickgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:10px} .pickgrid .lig{margin:0}
.pickgroup .near{margin-top:10px}
@media (max-width:760px){ .pickhead{flex-direction:column; align-items:flex-start} }
.sbymin{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:8px 0 0} .sbymin label{margin:0} .sbymin input{width:64px; padding:5px 8px} .sbymin input + label{margin-left:12px} .sbymin:has(input:disabled){opacity:.55}
a.pdbl{color:var(--idc); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
a.pdbl:hover,a.pdbl:focus-visible{text-decoration-thickness:2px}
a.pdbl::after{content:' \2197'; font-size:.85em; text-decoration:none; display:inline-block}      /* an arrow: it leaves the page, into a new tab */
.pdbc{white-space:nowrap}                                                      /* a code and its two views stay together when the line wraps */
a.pdbv{margin-left:.4em; padding:1px 2px; font-size:.82em; color:var(--ink2); text-decoration:none; border-radius:3px; cursor:pointer}      /* muted like the line, not the second colour of the code */
a.pdbv:hover,a.pdbv:focus-visible{color:var(--ink); text-decoration:underline}
@media (pointer:coarse){ a.pdbv{display:inline-block; margin-left:.2em; padding:7px 7px} }      /* a finger: room around each */
.aff{color:var(--idc)}                                                       /* the affinity on a ligand card: the second colour is used for this, the PDB codes and the wordmark's ID, and nothing else */
.laybar{margin:8px 0 0} .laybar .btn{font-size:12px}

/* the Data panel: every database in the page and its counts (a dialog over the page) */
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--plum); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; cursor:pointer}
.linkbtn:hover{text-decoration-style:solid}
#datainfo{width:min(1040px,calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--rule); border-radius:12px; background:var(--panel); color:var(--ink); overflow:auto}
#datainfo::backdrop{background:rgba(20,20,24,.55)}
#datainfo .dihead{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--rule)}
#datainfo .dihead h2{margin:0; font-family:var(--cond); font-size:24px; font-weight:600; color:var(--plum)}
#di-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px; padding:18px 20px 22px; align-items:start}
.dsec{background:var(--soft); border:1px solid var(--rule2); border-radius:9px; padding:12px 14px}
.dsec-tables, .dsec-pubchem, .dtiles{grid-column:1 / -1}
.dsec-natural{grid-row:span 2}
.dsec-tables .dgroups{grid-template-columns:1fr}                       /* four columns of numbers want the whole width */
.dsec h3{margin:0 0 8px; font-family:var(--cond); font-size:19px; font-weight:600; color:var(--ink)}
.dgroups{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:6px 22px}
.dgroup h4{margin:6px 0 4px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink2)}
.dgroup table{width:100%; border-collapse:collapse; font-size:13.5px}
.dgroup th, .dgroup td{padding:3px 8px 3px 0; text-align:left; border-bottom:1px solid var(--rule2); vertical-align:baseline}
.dgroup thead th{font-size:12px; font-weight:600; color:var(--ink2)}
.dgroup tbody th{font-weight:500; color:var(--ink); white-space:nowrap}
.dgroup td.dnum{font-family:var(--mono); font-size:12.5px; text-align:right; padding-right:10px}
.dgroup td.dnote{color:var(--ink2); font-size:12.5px}
.dgroup thead th:not(:first-child){text-align:right; padding-right:10px}
.dgroup tr.dtot th, .dgroup tr.dtot td{font-weight:700; border-bottom:0; border-top:1px solid var(--rule)}
.dbar{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--chip); margin:2px 0 6px}
.dseg{display:block; height:100%; min-width:2px}
.dseg.s0{background:var(--plum)} .dseg.s1{background:var(--plum); opacity:.55} .dseg.s2{background:var(--bar2)} .dseg.s3{background:var(--ghost)}
@media (max-width:560px){
  #di-body{padding:12px} .dgroup table{font-size:12.5px} .dgroup th, .dgroup td{padding-right:6px} .dgroup tbody th{white-space:normal} .dgroup td.dnum{font-size:11.5px; padding-right:6px}
  .dtiles{grid-template-columns:repeat(2,1fr)} .dtile{padding:8px 10px} .dtile b{font-size:23px}
}
.dgroup{overflow-x:auto}
.dtiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.dtile{background:var(--best); border:1px solid var(--rule2); border-radius:9px; padding:10px 14px; display:flex; flex-direction:column; gap:2px}
.dtile b{font-family:var(--cond); font-size:30px; line-height:1.1; font-weight:600; color:var(--plum)}
.dtile span{font-size:12.5px; color:var(--ink2)}
.dsw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:baseline}
.dsw.s0{background:var(--plum)} .dsw.s1{background:var(--plum); opacity:.55} .dsw.s2{background:var(--bar2)} .dsw.s3{background:var(--ghost)}

/* the Report button: its progress is a fill inside it, growing left to right behind the label, in the page's accent; the button is as wide as its widest label ("Report 100%", hidden, reserves it) and
   its digits are the same width, so nothing in the header moves while it works. It is only marked busy and disabled (aria-busy, aria-disabled); it is never hidden or moved. */
#reportbtn{position:relative; overflow:hidden; font-variant-numeric:tabular-nums}
#reportbtn .rb-size{display:block; visibility:hidden; white-space:nowrap}
#reportbtn .rb-label{position:absolute; inset:0; display:grid; place-items:center; white-space:nowrap}
#reportbtn .rb-fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--bar); opacity:.3}
#reportbtn[aria-disabled="true"]{cursor:progress}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* The report (report.js builds it, the Report button prints it): the page as paper. It is on the page only while it prints (html.reporting, set by app.js around the print dialog) and everything else is
   hidden then. Black on white whatever the theme; the body text is black or grey, with thin lines and outlined badges, no fills, no shaded boxes and no shadows. Colour is allowed in two places only (xaba,
   2026-10-09): the drawings, where the hetero atoms have their colours (the engine's `paper` palette), and the brand plum (--rp-plum) on the report's title, the section titles with their numbers, a thin rule
   under the title and under the credits heading, and the score bars. The paper size is the browser's (A4 or Letter); a target's block never splits between two pages. */
#report{display:none}
@page{margin:14mm 12mm 16mm; @bottom-left{content:"Target-ID report"; font:7.5pt sans-serif; color:#555} @bottom-right{content:counter(page) " / " counter(pages); font:7.5pt sans-serif; color:#555}}
@media print{
  html.reporting{color-scheme:light}
  html.reporting body > *:not(#report){display:none !important}
  html.reporting body{background:#fff; margin:0}
  html.reporting #report{display:block; --rp-ink:#000; --rp-mute:#444; --rp-line:#8a8a8a; --rp-plum:#5B3A9D; background:#fff; color:var(--rp-ink); font-family:var(--sans); font-size:8pt; line-height:1.25}
  #report a{color:inherit; text-decoration:underline}
  #report .empty, #report .aff, #report .npchip{color:inherit; font-style:normal}
  #report .empty{color:var(--rp-mute); font-style:italic}
  #report .rp-top{display:flex; justify-content:space-between; align-items:baseline; border-bottom:.8pt solid var(--rp-plum); padding-bottom:2mm; margin-bottom:5mm}
  #report .rp-brand{font-family:var(--cond); font-size:20pt; font-weight:600; color:var(--rp-plum)}
  #report .rp-brand .rp-what{font-size:13pt; font-weight:500}
  #report .rp-meta{text-align:right; font-size:8pt; color:var(--rp-mute)}
  #report .rp-sec{margin:0 0 6mm}
  #report .rp-page{break-before:page}
  #report h2{display:flex; align-items:center; gap:2.5mm; margin:0 0 3mm; padding-bottom:1mm; border-bottom:.5pt solid var(--rp-line); font-family:var(--cond); font-size:15pt; font-weight:600; color:var(--rp-plum); break-after:avoid}
  #report #rp-credits h2{border-bottom:.8pt solid var(--rp-plum)}
  #report h2 .n{display:inline-grid; place-items:center; width:6mm; height:6mm; border:.8pt solid var(--rp-plum); border-radius:50%; font:600 8pt var(--mono)}
  #report h3{margin:4mm 0 2mm; font-family:var(--cond); font-size:12pt; font-weight:600; break-after:avoid}
  #report h4{margin:0 0 1mm; font-family:var(--cond); font-size:9pt; font-weight:600; break-after:avoid}
  #report .rp-dl{display:grid; grid-template-columns:auto 1fr; gap:.8mm 4mm; margin:0}
  #report .rp-dl dt{color:var(--rp-mute)}
  #report .rp-dl dd{margin:0; font:8pt var(--mono)}
  #report .rp-first{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:0 8mm; align-items:start; margin-bottom:6mm}
  #report .rp-first .rp-sec{margin:0}
  #report .rp-first .rp-yours{margin:0 0 3mm}
  #report .rp-qgrid{display:grid; grid-template-columns:62mm minmax(0,1fr); gap:6mm; align-items:start}
  #report .rp-qgrid.sm{grid-template-columns:42mm minmax(0,1fr); margin:0 0 3mm}
  #report .rp-yours img{display:block; width:100%; height:auto; border:.5pt solid var(--rp-line)}
  #report .smi{margin-top:2mm}
  #report .l1{font:600 7.5pt var(--mono)}
  #report .l2{font-size:7pt; color:var(--rp-mute)}
  #report .l3{font:5.8pt var(--mono); color:var(--rp-mute); word-break:break-all}
  #report .rp-strip{margin:0 0 3mm; color:var(--rp-mute)}
  #report .rp-exp{margin:0 0 4mm; padding-left:3mm; border-left:1.2pt solid var(--rp-ink); break-inside:avoid}
  #report .rp-t{padding:1.5mm 0 2mm; border-top:.5pt solid var(--rp-line); break-inside:avoid}
  #report .rp-t > header{display:flex; align-items:baseline; gap:2.5mm}
  #report .rp-t .no{width:7mm; text-align:right; font:600 9pt var(--mono)}
  #report .rp-t .rk{min-width:9mm; font:8pt var(--mono); color:var(--rp-mute)}
  #report .rp-t .name{font-size:10pt}
  #report .rp-t .meta{font:7.5pt var(--mono); color:var(--rp-mute)}
  #report .rp-sc{display:grid; grid-template-columns:repeat(auto-fit,minmax(34mm,1fr)); gap:2mm 4mm; margin:1mm 0 1.5mm 9.5mm}
  #report .sc i{display:block; font-style:normal; font-size:6.5pt; line-height:1.15; color:var(--rp-mute)}
  #report .sc b{font:600 8.5pt var(--mono)}
  #report .sc small{font:7pt var(--mono); color:var(--rp-mute)}
  #report .sc u{display:block; height:0; margin-top:.6mm; border-top:1.2pt solid var(--rp-plum); text-decoration:none}
  #report .rp-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(70mm,1fr)); gap:4mm; margin-left:9.5mm}
  #report .rp-card{display:grid; grid-template-columns:28mm minmax(0,1fr); gap:2mm; align-items:center; margin:0 0 1mm; padding:.7mm 1.5mm; border:.5pt solid var(--rp-line); break-inside:avoid}
  #report .rp-card img{display:block; width:28mm; height:auto}
  #report .rp-card .from{font-weight:600; color:var(--rp-ink)}
  #report .rp-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5mm 4mm}
  #report .rp-grid .rp-card{margin:0}
  #report .rp-near, #report .rp-group{margin-top:5mm}
  #report .npchip{display:inline-block; padding:0 2mm; border:.6pt solid var(--rp-ink); border-radius:3mm; font:600 7.5pt var(--mono)}
  #report .rp-npbody .l2{color:var(--rp-ink)}
  #report .rp-way{margin:3mm 0 1.5mm; font-weight:600}
  #report .rp-cr .cr{margin:0 0 2.4mm; break-inside:avoid}
  #report .rp-dep{margin:2mm 0; font-size:7.5pt}
}