/* RIDGE-HUD-02: a measured, stopped-ridge alternative. Native nodes remain in
   their original DOM order; only the reading viewport and positions change. */
#hud-reading-content { display: contents; }
html[data-ridge-reading-dock] #hud-reading-region {
    display: flex; flex-direction: column;
    position: fixed; left: 20px; right: 20px; bottom: 12px; top: auto;
    height: 154px; width: auto; max-height: none; padding: 0; gap: 0;
    z-index: 125; overflow: visible; pointer-events: auto;
}
html[data-ridge-reading-dock] #hud-reading-label {
    display: block; position: static; flex: 0 0 auto;
    padding: 4px 8px; border-radius: 6px;
    background: #fff1d3; color: #563b29; font: 14px Georgia, serif;
}
html[data-ridge-reading-dock] #hud-reading-label[hidden] { display: none; }
html[data-ridge-reading-dock] #hud-reading-content {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 auto; min-height: 0; overflow-y: scroll;
    overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding: 8px;
}
html[data-ridge-reading-dock] #hud-reading-content :is(#goal-card, #info, #run-hud) {
    position: static; inset: auto; flex: 0 0 auto; width: 100%; max-width: none;
    min-width: 0; transition: none; overflow-wrap: anywhere;
}
html[data-ridge-reading-dock] #goal-card { pointer-events: auto; }
html[data-ridge-reading-dock] #journey-controls { display: contents; }
html[data-ridge-reading-dock] #restart-btn { position: fixed; left: 12px; top: 12px; }
html[data-ridge-reading-dock] #journey-actions {
    position: fixed; left: 12px; top: 64px; bottom: auto;
    flex-direction: column; align-items: flex-start;
}
/* Stacking removes the original row stretch. Preserve its measured target. */
html[data-ridge-reading-dock] #stop-btn { min-height: var(--ridge-stop-height); }
html[data-ridge-reading-dock] #character-btn { left: 144px; right: auto; top: 12px; }
html[data-ridge-reading-dock] #ui {
    position: fixed; left: auto; right: 12px; top: 12px; bottom: auto;
    transform: none; transition: none;
}
html[data-ridge-reading-dock] #hud-reading-content:focus-visible {
    outline: 3px solid #1c6877; outline-offset: 2px;
}
html[data-ridge-reading-dock] #hud-reading-content::-webkit-scrollbar { width: 12px; }
html[data-ridge-reading-dock] #hud-reading-content::-webkit-scrollbar-track { background: #ead9bd; border-radius: 6px; }
html[data-ridge-reading-dock] #hud-reading-content::-webkit-scrollbar-thumb {
    background: #785335; border: 3px solid #ead9bd; border-radius: 6px; min-height: 32px;
}