/* Drug library: a scannable two-column reference with expanded detail. */
#view-drugs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
#view-drugs[hidden], #view-rules[hidden] { display:none; }
#view-drugs > .pagehead { grid-column:1/-1; margin-bottom:8px; }
#view-drugs .drug { min-width:0; border-radius:14px; border-color:var(--line-strong); box-shadow:0 2px 7px rgba(30,43,67,.05); transition:border-color .18s,box-shadow .18s; }
#view-drugs .drug:hover { border-color:var(--accent-2); box-shadow:0 8px 20px rgba(30,43,67,.1); }
#view-drugs .drug[open] { grid-column:1/-1; border-color:var(--accent-2); box-shadow:0 10px 26px rgba(28,48,72,.1); }
#view-drugs .drug > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; padding:18px 20px; position:relative; }
#view-drugs .drug > summary::after { content:'⌄'; position:absolute; right:16px; top:15px; color:var(--muted); font-size:22px; transition:transform .18s; }
#view-drugs .drug[open] > summary::after { transform:rotate(180deg); }
#view-drugs .drug > summary h3 { font-size:17px; color:var(--ink); padding-right:24px; }
#view-drugs .drug > summary > div:nth-child(2) { grid-column:1; color:var(--muted); font-weight:600; }
#view-drugs .drug > summary .dz { grid-column:2; grid-row:2; justify-self:end; }
#view-drugs .drug > summary .form-toggle { grid-column:1/-1; margin-top:5px; border-top:1px solid var(--line); padding-top:10px; font-size:12px; color:var(--muted); }
#view-drugs .drugbody { padding:20px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
#view-drugs .kv { padding:12px 0; border-bottom:1px solid var(--line); }
#view-drugs .kv dd { line-height:1.5; }
#view-drugs .wins { border-collapse:collapse; }
#view-drugs .wins th { background:var(--sunk); }
/* Rules: clearer hierarchy and a readable, sticky table. */
#view-rules > .pagehead { margin-bottom:20px; }
#view-rules .panel { border-radius:14px; border-color:var(--line-strong); box-shadow:0 3px 12px rgba(30,43,67,.05); margin-bottom:18px; }
#view-rules .panel-h { background:var(--sunk); padding:17px 20px; }
#view-rules .panel-h h3 { font-size:17px; color:var(--ink); }
#view-rules .panel-b { padding:20px; }
#view-rules .rules { border-collapse:collapse; width:100%; }
#view-rules .rules th { position:sticky; top:0; background:var(--sunk); color:var(--ink); z-index:1; padding:12px 10px; }
#view-rules .rules td { padding:11px 10px; line-height:1.45; }
#view-rules .rules tbody tr:nth-child(even) { background:var(--ground); }
#view-rules .rules tbody tr:hover { background:var(--accent-soft); }
#view-rules .list li { padding-block:9px; border-bottom:1px solid var(--line); }
@media(max-width:850px) { #view-drugs { grid-template-columns:1fr; } #view-drugs .drug[open] { grid-column:1; } #view-rules .two { grid-template-columns:1fr; } }
@media(max-width:540px) { #view-drugs .drugbody { grid-template-columns:1fr; } #view-drugs .drug > summary { padding:16px; } #view-rules .panel-b { padding:16px; } }
@media(prefers-reduced-motion:reduce) { #view-drugs .drug, #view-drugs .drug > summary::after { transition:none; } }