/* clinical pearls inside High-yield summaries (pearllinks_ui.js) — same rules in the hosted app and the artifacts.
   Uses the .pg tokens (pages_ui.css) and the pearl list styles (pearls_ui.css). */
button.pll{all:unset;cursor:pointer;color:inherit;border-bottom:1.5px dotted color-mix(in srgb,var(--accent,var(--brass)) 70%,transparent);
  text-decoration:none;border-radius:2px;transition:background .12s}
button.pll:hover,button.pll:focus-visible{background:color-mix(in srgb,var(--accent,var(--brass)) 14%,transparent);border-bottom-style:solid}
button.pll:focus-visible{outline:2px solid var(--accent,var(--brass));outline-offset:1px}
button.pll.pll-dx{border-bottom-color:color-mix(in srgb,var(--ok) 75%,transparent)}
button.pll.pll-dx:hover,button.pll.pll-dx:focus-visible{background:color-mix(in srgb,var(--ok) 14%,transparent)}
/* side sheet */
.pll-wrap{position:fixed;inset:0;z-index:9990}
.pll-back{position:absolute;inset:0;background:rgba(10,12,16,.38)}
.pll-sheet{position:absolute;top:0;right:0;bottom:0;width:min(560px,94vw);display:flex;flex-direction:column;background:var(--p-card);
  color:var(--p-ink);border-left:1px solid var(--p-line);box-shadow:-18px 0 42px rgba(0,0,0,.28);animation:pllin .18s ease-out}
@keyframes pllin{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.pll-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 10px;border-bottom:1px solid var(--p-line)}
.pll-h h2{font:400 22px/1.25 var(--display,var(--serif));margin:2px 0 0;color:var(--p-ink);text-transform:none;letter-spacing:0}
.pll-kind{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-acc)}
.pll-x{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--p-line);background:none;color:var(--p-mut);cursor:pointer;font-size:14px}
.pll-x:hover{color:var(--p-ink);border-color:var(--p-acc)}
.pll-ctl{padding:12px 18px 0}.pll-ctl .hc-q{display:block}
.pll-n{padding:0 18px}
.pll-body{flex:1;overflow-y:auto;padding:0 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch}
.pll-also{margin:10px 0 2px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-dim)}
.pll-alsol .pl-p{opacity:.9}
.pll-inbook{margin:8px 0 2px}
.pl-fix{padding:1px 8px;border-radius:999px;border:1px solid var(--p-ok);color:var(--p-ok);font-weight:600;font-size:11px;letter-spacing:.03em;cursor:help}
/* panel on heading / topic pages */
.pll-panel{margin:0 0 16px;border:1px solid var(--p-line);border-left:3px solid var(--p-acc);border-radius:12px;background:var(--p-card)}
.pll-panel>summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;cursor:pointer;list-style:none;color:var(--p-ink)}
.pll-panel>summary::-webkit-details-marker{display:none}
.pll-panel>summary::before{content:"›";display:inline-block;width:12px;color:var(--p-dim);transition:transform .15s}
.pll-panel[open]>summary::before{transform:rotate(90deg)}
.pll-pt{font-weight:600;font-size:14.5px}
.pll-ps{font-size:12.5px;color:var(--p-mut)}
.pll-pin{padding:0 14px 12px}.pll-pin .hc-q{display:block;max-width:520px;margin:0 0 8px}
.pll-pbody{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){
  .pll-sheet{top:auto;left:0;right:0;width:auto;max-height:86vh;border-left:0;border-top:1px solid var(--p-line);border-radius:14px 14px 0 0;
    box-shadow:0 -18px 42px rgba(0,0,0,.34);animation:pllup .18s ease-out}
  @keyframes pllup{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.pll-sheet{animation:none}}
/* near-duplicates folded under one pearl */
.pll-dup{all:unset;cursor:pointer;align-self:flex-start;margin-top:2px;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:500;
  color:var(--p-mut);border:1px dashed var(--p-line)}
.pll-dup:hover,.pll-dup[aria-expanded="true"]{color:var(--p-acc);border-color:var(--p-acc)}
.pll-dup:focus-visible{outline:2px solid var(--p-acc);outline-offset:1px}
.pll-dups{margin:4px 0 0 12px!important;padding-left:10px!important;border-left:2px solid var(--p-line)}
.pll-dups .pl-p{font-size:13.5px;color:var(--p-mut)}