/* Shelf v22 — small details (all platforms). Loaded last; only low-risk visual fixes, nothing that moves the reader's page geometry. */

/* closed bottom sheets sat 5% below the screen: their upward shadow bled in as a grey smudge, and their buttons were still reachable with Tab */
.sheet:not(.open){transform:translate(-50%,calc(100% + 72px));visibility:hidden;transition:transform var(--m-slow,320ms) var(--m-ease,ease),visibility 0s linear var(--m-slow,320ms)}
.sheet.open{visibility:visible;transition:transform var(--m-slow,320ms) var(--m-ease,ease),visibility 0s}

/* highlight lists: a long unbreakable string (URL, code) widened the grid column and pushed cards off the right edge */
.hllist{grid-template-columns:minmax(0,1fr)}
.hl{min-width:0;overflow-wrap:anywhere}

/* swipe-to-delete cards: no double colour stripe, no red showing through the rounded corners */
.hl.swipe{border-left:0;background:transparent}
.hl.swipe .swbg{inset:1px;background:#e11d48;border-radius:inherit}

/* dark theme: white on the light accent was ~2.4:1 — dark text reads at ~8:1 */
[data-theme=dark] button.primary,[data-theme=dark] .badge,[data-theme=dark] .rr-run{color:#1c1a17}
[data-theme=dark] .rr-run kbd{background:rgba(0,0,0,.14)}
/* dark theme: the selected tab barely separated from its track */
[data-theme=dark] .tab.on{background:#2c2c30;box-shadow:inset 0 0 0 1px #3d3d42}

/* placeholders were browser-default light grey (~2:1 on the filled inputs) */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}

/* keyboard focus: one accent ring instead of the browser's blue box */
.book:focus{outline:none}
.book:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:8px}
.switch input:focus-visible+i{outline:2px solid var(--acc);outline-offset:3px}
button:focus-visible,.pill:focus-visible,.chip:focus-visible,.tab:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:2px}

/* empty states */
.empty .linkbtn{display:inline;margin-left:4px;padding:0;border:0;background:none;font:inherit;color:var(--acc);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:0}
#searchStatus{font-variant-numeric:tabular-nums}
/* upload hint: say "tap" on touch screens, "click / drop" with a mouse */
.t-mouse{display:none}
@media (hover:hover) and (pointer:fine){.t-touch{display:none}.t-mouse{display:inline}}

/* login: reserve the error line so the card doesn't jump */
#loginErr{min-height:1.5em}

/* toasts: in the library there is no bottom bar to clear, so sit near the bottom; long messages wrap instead of overflowing */
.toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;overflow-wrap:anywhere}
body:has(#library:not(.hidden)) .toast{bottom:calc(24px + env(safe-area-inset-bottom))}

/* touch screens: 44 px tap targets (visual size mostly unchanged) */
@media (pointer:coarse){
  .tab{min-height:44px}
  #closePanel{min-width:44px;min-height:44px}
  .chip{min-height:44px}.chip.sw{width:44px;height:44px;min-width:44px;flex:none}
  .hlchips .chip{min-height:40px}
  .hl .meta button{min-height:40px;min-width:40px}
  .hlgroup h3 .pill{min-height:40px}
  .seg button{min-height:42px}.seg button.dot{width:42px;min-width:42px}
  .book .more::after{content:"";position:absolute;inset:-6px}
  .switch{position:relative}.switch::after{content:"";position:absolute;inset:-8px -4px}
  .sectionhead input{min-height:44px}
}
.hlgroup h3 .pill{font-family:var(--sans);font-weight:600;flex-shrink:0}

/* tall sheets (Settings on a phone) ran off the bottom with no way to reach the last rows: cap and scroll */
.sheet{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}