/* Placement for the archive; shared appearance comes from hud-components.css. */
#loreDialog{width:min(680px,calc(100vw - 2 * max(var(--hud-space-3),var(--sal),var(--sar))));max-width:none;max-height:calc(100dvh - 2 * max(var(--hud-space-3),var(--sat),var(--sab)));box-sizing:border-box;overflow:hidden;}
#loreDialog[open]{display:flex;flex-direction:column;gap:var(--hud-space-4);}
#loreDialog>header{position:static;flex:none;justify-content:space-between;flex-wrap:wrap;}
#loreDialog :is(h2,h3,p){margin:0;}
#loreScroll{overflow:auto;min-height:0;overscroll-behavior:contain;padding:var(--hud-space-1);}
#loreScroll>section{display:flex;flex-direction:column;gap:var(--hud-space-3);}
#loreSelect{width:100%;min-height:var(--hud-target);}
#loreHero .heroPortrait{width:80px;height:80px;flex:0 0 80px;}
#loreHero .hud-row{align-items:center;}
#loreClose{min-height:var(--hud-target);}
[data-lore]{min-height:var(--hud-target);}
#heroDetail [data-lore]{align-self:flex-start;width:fit-content;}