/* extras.css: chapter swipe toast, personal highlights (bar, marks, My highlights page) and popovers that stay on screen.
   Dark (cinematic) is the default; html.light is the parchment look. Loaded after theme.css. */
:root { --hl-gold: rgba(232, 190, 92, .34); --hl-green: rgba(120, 196, 140, .30); --hl-blue: rgba(110, 165, 230, .32); --hl-rose: rgba(232, 128, 150, .32); --hl-violet: rgba(170, 135, 230, .34);
  --hl-gold-s: #e8be5c; --hl-green-s: #78c48c; --hl-blue-s: #6ea5e6; --hl-rose-s: #e88096; --hl-violet-s: #aa87e6; }
html.light { --hl-gold: rgba(240, 200, 80, .45); --hl-green: rgba(130, 200, 140, .42); --hl-blue: rgba(120, 175, 235, .40); --hl-rose: rgba(240, 150, 170, .42); --hl-violet: rgba(185, 150, 235, .40);
  --hl-gold-s: #c99a22; --hl-green-s: #4f9a62; --hl-blue-s: #3f7cc4; --hl-rose-s: #c4566f; --hl-violet-s: #7d5bc0; }
mark.hl { color: inherit; border-radius: 3px; padding: .02em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl-gold, .hl-v.hl-gold { background: var(--hl-gold); } mark.hl-green, .hl-v.hl-green { background: var(--hl-green); }
mark.hl-blue, .hl-v.hl-blue { background: var(--hl-blue); } mark.hl-rose, .hl-v.hl-rose { background: var(--hl-rose); } mark.hl-violet, .hl-v.hl-violet { background: var(--hl-violet); }
.rd-v.hl-v, .sr-hit.hl-v, tr.hl-v { border-radius: 6px; }
.rd-v.hl-v.hl-gold { box-shadow: inset 3px 0 0 var(--hl-gold-s); } .rd-v.hl-v.hl-green { box-shadow: inset 3px 0 0 var(--hl-green-s); } .rd-v.hl-v.hl-blue { box-shadow: inset 3px 0 0 var(--hl-blue-s); }
.rd-v.hl-v.hl-rose { box-shadow: inset 3px 0 0 var(--hl-rose-s); } .rd-v.hl-v.hl-violet { box-shadow: inset 3px 0 0 var(--hl-violet-s); }
.hl-ni { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin-left: .25em; padding: 0 .3em; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent); font: 600 .8rem var(--sans); cursor: pointer; }
@media (pointer: coarse) { .hl-ni { min-width: 44px; min-height: 36px; } }
/* the bar */
.hl-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1600; margin: 0 auto; max-width: min(620px, calc(100vw - 24px)); box-sizing: border-box;
  padding: .55rem .6rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(21, 16, 11, .96); color: var(--ink);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: .9rem var(--sans); animation: hlUp .2s ease both; }
html.light .hl-bar { background: rgba(255, 252, 244, .97); box-shadow: 0 10px 32px rgba(60, 40, 10, .25); }
.hl-bar[hidden] { display: none; }
@keyframes hlUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.hl-lab { flex: 1 1 100%; font: 500 1.02rem var(--serif); color: var(--gold2, var(--accent)); padding: 0 .2rem; }
html.light .hl-lab { color: var(--year); }
.hl-sws, .hl-acts { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.hl-acts { margin-left: auto; }
.hl-sw { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; padding: 0; cursor: pointer; display: inline-grid; place-items: center; }
.hl-sw i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.hl-sw.hl-gold i { background: var(--hl-gold-s); } .hl-sw.hl-green i { background: var(--hl-green-s); } .hl-sw.hl-blue i { background: var(--hl-blue-s); } .hl-sw.hl-rose i { background: var(--hl-rose-s); } .hl-sw.hl-violet i { background: var(--hl-violet-s); }
.hl-sw[aria-pressed="true"] { border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--gold, var(--accent)); }
.hl-btn { min-height: 44px; padding: 0 .8rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(217, 179, 106, .08); color: var(--gold2, var(--accent)); font: 600 .85rem var(--sans); cursor: pointer; }
html.light .hl-btn { background: #f8f1e0; color: var(--accent); }
.hl-btn:disabled { opacity: .45; cursor: default; }
.hl-x { min-width: 44px; padding: 0; }
.hl-noterow { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.hl-noterow[hidden] { display: none; }
.hl-noterow textarea { width: 100%; box-sizing: border-box; min-height: 4.5em; max-height: 30vh; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--ink); font: 1rem/1.4 var(--sans); }
html.light .hl-noterow textarea { background: #fff; }
.hl-save { align-self: flex-end; }
body.hl-baron .app-footer { padding-bottom: 180px; }
/* My highlights page */
.hl-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.hl-tools .rd-btn { min-height: 44px; }
.hl-imp { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.hl-imp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.hl-imp:focus-within { outline: 2px solid var(--gold2, var(--accent)); outline-offset: 2px; }
.hl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.hl-item { border: 1px solid var(--line); border-radius: 14px; padding: .55rem .75rem; background: rgba(255, 255, 255, .02); border-left-width: 4px; }
html.light .hl-item { background: #fffdf8; }
.hl-item.hl-gold { border-left-color: var(--hl-gold-s); } .hl-item.hl-green { border-left-color: var(--hl-green-s); } .hl-item.hl-blue { border-left-color: var(--hl-blue-s); }
.hl-item.hl-rose { border-left-color: var(--hl-rose-s); } .hl-item.hl-violet { border-left-color: var(--hl-violet-s); }
.hl-ihead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hl-ref { font: 500 1.1rem var(--serif); min-height: 44px; display: inline-flex; align-items: center; }
.hl-del { margin-left: auto; }
.hl-text { margin: .2rem 0; font: 1.02rem/1.55 var(--serif); }
.hl-inote { margin: .2rem 0; font-size: .9rem; color: var(--ink-soft); white-space: pre-wrap; }
.hl-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .4em; vertical-align: middle; }
.hl-dot.hl-gold { background: var(--hl-gold-s); } .hl-dot.hl-green { background: var(--hl-green-s); } .hl-dot.hl-blue { background: var(--hl-blue-s); } .hl-dot.hl-rose { background: var(--hl-rose-s); } .hl-dot.hl-violet { background: var(--hl-violet-s); }
.hl-msg { min-height: 1.2em; font-size: .9rem; color: var(--ink-soft); }
/* chapter swipe toast */
.rd-toast { position: fixed; left: 50%; top: 42%; z-index: 1700; transform: translate(-50%, -50%) scale(.96); pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s;
  padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(13, 10, 7, .9); color: var(--gold2, #f0d69e); font: 500 1.35rem var(--serif); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
html.light .rd-toast { background: rgba(255, 252, 244, .96); color: var(--year); box-shadow: 0 8px 26px rgba(60, 40, 10, .2); }
.rd-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#rd-text { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .rd-toast, .hl-bar { transition: none; animation: none; } }
/* popovers stay inside the screen: the display (Aa) panel becomes a bottom sheet on phones; on wider screens ui-fit.js clamps it */
.dp-panel, .dp-menu { max-width: calc(100vw - 24px); box-sizing: border-box; }
@media (max-width: 700px), (max-height: 500px) {
  .dp-gear[open] .dp-panel, html:not(.light) .dp-gear[open] .dp-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; margin: 0;
    max-height: min(70vh, calc(100vh - 100px)); overflow: auto; z-index: 1450; border-radius: 18px; padding: .8rem 1rem 1rem; }
  .dp-gear[open] .dp-panel .dp-opt { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
}
.dp-sheetx { display: none; }
@media (max-width: 700px), (max-height: 500px) { .dp-gear[open] .dp-sheetx { display: inline-flex; float: right; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--accent); font: 600 .9rem var(--sans); cursor: pointer; } }
/* a sideways swipe in the reader turns the chapter, not the browser's history */
html, body { overscroll-behavior-x: none; }
/* the page fade-in must not leave a transform/filter behind: that would make fixed pop-ups (bottom sheets) inside the page
   position against the page instead of the screen. Same look; the animation just doesn't hold its last frame. */
html:not(.light) #views > section:not([hidden]), html:not(.light) #views > div:not([hidden]):not(#views-end) { animation-fill-mode: backwards; }