/* The reader: Librat on the left, the text with its view switch in the middle, the verse panel on the right.
   Built from design/mockups/web-reader.html; colours come from tokens.css. */
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/literata-normal.woff2) format('woff2') }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/literata-italic.woff2) format('woff2') }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body.rbody { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-ui); overflow: hidden }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
a { color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2 { text-wrap: balance }
[hidden] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.reader {
  position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 15px; overflow: hidden;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.r-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); min-height: 58px; position: relative; z-index: 26 }
.tb { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; white-space: nowrap; color: var(--ink) }
.tb:hover { border-color: var(--muted) }
.tb[aria-expanded="true"], .tb[aria-pressed="true"] { background: var(--sel); border-color: var(--accent) }
.tb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ghost { border-color: transparent; background: transparent }
.logo { display: flex; align-items: center; gap: 8px; font: 600 16px var(--f-read); white-space: nowrap; margin: 0 4px; text-decoration: none; color: var(--ink); border-radius: 8px }
.logo img { width: 30px; height: 30px; border-radius: 8px; display: block }
.ref { flex: 1 1 200px; max-width: 300px; min-width: 120px; margin: 0 }
.ref input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 12px; font-size: 14px }
.ref input::placeholder { color: var(--muted) }
.crumb { display: flex; align-items: center; gap: 2px }
.crumb .tb { font: 600 15px var(--f-read) }
.pw { position: relative }
#planDate::before { content: "·"; margin-right: 7px }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer }
.theme-btn:hover { background: var(--sel) }
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.theme-btn .i-sun, .theme-btn.is-dark .i-moon { display: none }
.theme-btn.is-dark .i-sun { display: block }
/* Phones: ☰ opens the site's links under the bar. */
.menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--ink) }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--sel) }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.s-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: flex; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -20px var(--shade); padding: 4px 16px 8px }
.s-menu a, .s-menu button { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; text-align: left; text-decoration: none }
.s-menu > :last-child { border-bottom: 0 }
#toolsBtn { display: none }
.ib { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex: none; color: var(--ink) }
.ib:hover { background: var(--sel) }
.ib:disabled { opacity: .3; cursor: default; background: transparent }
.spacer { flex: 1 }
.aa { font: 600 16px var(--f-read) }

.r-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--lw, 0px) minmax(0, 1fr) var(--sw, 0px); transition: grid-template-columns .2s ease }

/* Fixed cells, so a panel that slides over the text never moves the text out of its column. */
.lib { grid-column: 1; grid-row: 1 } .main { grid-column: 2; grid-row: 1 } .side { grid-column: 3; grid-row: 1 }

/* left: the book list */
.lib { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column }
.reader:not(.lib-docked):not(.lib-drawer) .lib { visibility: hidden; border: 0 }
.reader.lib-drawer .lib { position: absolute; top: 0; bottom: 0; left: 0; width: min(300px, 88%); z-index: 20; box-shadow: 16px 0 40px -20px var(--shade) }
.lib-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 14px }
.lib-head b { flex: 1; font: 600 15px var(--f-read) }
.tabs { display: flex; gap: 4px; padding: 4px 12px 8px }
.tabs button { flex: 1; min-height: 36px; border: 1px solid var(--line); background: transparent; border-radius: 9px; font-size: 13px }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.filter { margin: 0 12px 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 0 10px; font-size: 13.5px }
.blist { flex: 1; overflow-y: auto; padding: 0 6px 8px }
.brow { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 8px; padding: 7px 10px; min-height: 36px; text-align: left; font-size: 14px }
.brow:hover { background: var(--sel) }
.brow .n { flex: 1 }
.brow .c { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }
.brow.cur { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); background: var(--sel) }
.back { border: 0; background: transparent; color: var(--accent); min-height: 34px; padding: 0 8px; font-size: 13.5px }
.bname { padding: 2px 10px 4px; font: 600 15px var(--f-read) }
.cgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 6px 8px }
.cgrid button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; font-variant-numeric: tabular-nums }
.cgrid button:hover { border-color: var(--accent) }
.cgrid button.cur { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.nobook { padding: 8px 12px; color: var(--muted); font-size: 13.5px; margin: 0 }
.planc { margin: 6px 12px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--muted); background: var(--bg) }
.planc b { display: block; color: var(--ink); font-size: 12.5px; margin-bottom: 4px }
.planc i, .plan-li i { width: 7px; height: 7px; border-radius: 50%; flex: none }
.planc .pl { display: flex; gap: 7px; align-items: center; width: 100%; border: 0; background: transparent; text-align: left; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; font-size: 13px; color: var(--ink) }
.planc .pl:hover { background: var(--sel) }
.app-line { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted) }
.get { display: inline-block; margin-top: 4px; line-height: 0 }
.get img { display: block; height: 50px; width: auto }
.v.today, .iv.today { box-shadow: inset 3px 0 0 var(--muted) }
.crow.today .num { box-shadow: inset 3px 0 0 var(--muted) }
.v.today.sel, .iv.today.sel, .crow.today.sel { box-shadow: inset 3px 0 0 var(--accent) }
.today-note { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; font: 13px/1.4 var(--f-ui); color: var(--muted) }
.today-note i { width: 8px; height: 8px; border-radius: 50%; flex: none }

/* middle: tools and text. Aa → Ngjyra recolours this area only. */
.main { min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); color: var(--ink) }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 4 }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface) }
.seg button { border: 0; background: transparent; min-height: 36px; padding: 0 12px; font-size: 13.5px; border-left: 1px solid var(--line); white-space: nowrap }
.seg button:first-child { border-left: 0 }
.seg button:hover { background: var(--sel) }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); font-weight: 600 }
.seg button[aria-disabled="true"] { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px }
.vers { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted) }
.verbtn { min-height: 36px; font-size: 13.5px; gap: 5px; color: var(--muted) }
.verbtn b { color: var(--ink); font-weight: 600 }
.verbtn .car { font-size: 11px; color: var(--muted) }
/* the translation list: one row each, with its full name */
.pop.left { left: 0; right: auto; max-height: min(70vh, 520px); overflow-y: auto }
.vrow { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink) }
.vrow:hover:not(:disabled) { background: var(--sel) }
.vrow:disabled { opacity: .6; cursor: not-allowed }
.vrow .k { width: 16px; height: 16px; margin-top: 2px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--muted); border-radius: 4px; font-size: 11px; line-height: 1 }
.vrow.radio .k { border-radius: 50% }
.vrow[aria-checked="true"] .k { border-color: var(--accent); background: var(--accent); color: var(--btn-ink) }
.vrow.radio[aria-checked="true"] .k { background: radial-gradient(circle, var(--accent) 45%, transparent 50%) }
.vt { display: flex; flex-direction: column; min-width: 0 }
.vt b { font-size: 14px; font-weight: 600 }
.vt b small { font-weight: 400; font-size: 11.5px; color: var(--muted) }
.vt > span { font-size: 12.5px; color: var(--muted) }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink) }
.chip:hover:not(:disabled) { border-color: var(--accent) }
.chip .k { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--muted); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1 }
.chip.radio .k { border-radius: 50% }
.chip[aria-checked="true"] { border-color: var(--accent) }
.chip[aria-checked="true"] .k { border-color: var(--accent); background: var(--accent); color: var(--btn-ink) }
.chip.radio[aria-checked="true"] .k { background: radial-gradient(circle, var(--accent) 45%, transparent 50%) }
.chip small { font-weight: 400; color: var(--muted); font-size: 11.5px }
.chip:disabled { opacity: .55; cursor: not-allowed; font-weight: 400; border-style: dashed }
.swap { min-height: 32px; min-width: 32px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 14px }
.swap:hover { background: var(--sel) }
.tog { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px }
.tog .sw { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s }
.tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px var(--shade); transition: left .15s }
.tog[aria-pressed="true"] { border-color: var(--accent) }
.tog[aria-pressed="true"] .sw { background: var(--accent) }
.tog[aria-pressed="true"] .sw::after { left: 14px }
.status { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12.5px; color: var(--muted) }
.status:empty { display: none }
.status .key { display: inline-flex; align-items: center; gap: 5px }
mark.df { background: var(--hl); color: var(--hl-ink); text-decoration: underline 2px; text-underline-offset: 3px; border-radius: 2px; padding: 0 1px }

.scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain }
.col { max-width: 38em; margin: 0 auto; padding: 22px 28px 48px; font-family: var(--f-read); font-size: var(--fs, 19px); line-height: 1.62 }
.ch-head { display: flex; align-items: flex-end; gap: 14px; margin: 4px 0 18px; font-family: var(--f-ui) }
.ch-num { font: 500 60px/0.9 var(--f-read) }
.ch-book { font: 600 18px/1.2 var(--f-read); margin: 0 }
.ch-ver { font-size: 12.5px; color: var(--muted); margin-top: 3px }
.v { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 2px 8px; margin: 0 -8px .4em; font: inherit; line-height: inherit; color: var(--ink); border-radius: 5px }
.v:hover { background: var(--sel) }
.vn { font: 600 .58em/0 var(--f-ui); color: var(--muted); vertical-align: .6em; margin-right: .28em }
.v.sel, .iv.sel, .crow.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent) }
.banner { font: 13px/1.5 var(--f-ui); color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 16px; background: var(--surface) }
.empty { font: 15px/1.6 var(--f-ui); color: var(--muted); padding: 20px 0 }
.empty .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.empty .row button { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; min-height: 36px; padding: 0 12px }
.ch-nav { display: flex; gap: 10px; margin-top: 26px; font-family: var(--f-ui); font-size: 14px }
.ch-nav button { flex: 1; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: transparent; padding: 0 10px }
.ch-nav button:hover:not(:disabled) { background: var(--sel) }
.ch-nav button:disabled { visibility: hidden }

/* Varg pas vargu: each verse with its translations under it */
.iv { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px 10px; margin: 0 -10px 6px; border-radius: 6px; font: inherit; line-height: inherit; color: var(--ink) }
.iv:hover { background: var(--sel) }
.iv .t { display: block }
.iv .o { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 2px 8px; margin-top: 6px; font-size: .86em; line-height: 1.55 }
.iv .o .code { font: 600 11.5px/2.1 var(--f-ui); color: var(--muted) }
.iv .o .tx { color: var(--ink) }
.missing { font-style: italic; color: var(--muted) }

/* Kolona: a verse-aligned table */
.ctable { padding: 0 16px 8px; font-family: var(--f-read); font-size: calc(var(--fs, 19px) - 1px); line-height: 1.58 }
.chead, .crow { display: grid; grid-template-columns: 2.4em repeat(var(--nc), minmax(0, 1fr)); gap: 0 22px }
.chead { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 10px 8px; z-index: 2; font-family: var(--f-ui) }
.chead div { font-size: 13px; font-weight: 600 }
.chead small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.crow { width: 100%; border: 0; background: transparent; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font: inherit; line-height: inherit; color: var(--ink); border-radius: 0 }
.crow:hover { background: var(--sel) }
.crow .num { font: 600 12px/2 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums }
.crow > div { min-width: 0 }
.crow .missing { font-size: .9em }
.chpad { padding: 16px 26px 0 }

/* right: the verse panel */
.side { min-width: 0; border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; overflow: hidden }
.reader:not(.side-docked):not(.side-sheet):not(.side-over) .side { visibility: hidden; border: 0 }
.reader.side-over .side { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 92%); z-index: 16; box-shadow: -18px 0 40px -18px var(--shade) }
.s-sec { font: 600 11.5px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 0 2px }
.s-more { border-top: 1px solid var(--line); margin-top: 6px }
.s-more summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; color: var(--accent); list-style: none }
.s-more summary::-webkit-details-marker { display: none }
.s-more summary::before { content: "▸ " }
.s-more[open] summary::before { content: "▾ " }
/* grid-column spans the whole body: an absolute grid item otherwise takes its width from its own (empty) column */
.reader.side-sheet .side { grid-column: 1 / -1; position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; z-index: 22; box-shadow: 0 -16px 40px -20px var(--shade); padding-bottom: env(safe-area-inset-bottom, 0px) }
.s-grab { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0 }
.reader.side-sheet .s-grab { display: block }
.s-head { display: flex; align-items: center; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line) }
.s-ref { flex: 1; text-align: center; font: 600 16px var(--f-read); outline-offset: -2px; margin: 0 }
.s-sub { padding: 8px 18px 0; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.s-body { flex: 1; overflow-y: auto; padding: 2px 18px 12px; overscroll-behavior: contain }
.cmp { padding: 12px 0; border-bottom: 1px solid var(--line) }
.cmp:last-child { border-bottom: 0 }
.cmp-ver { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; flex-wrap: wrap }
.cmp-ver .cur { font-weight: 400; color: var(--accent) }
.cmp-ver .cnt { font-weight: 400 }
.cmp-ver .copy { margin-left: auto; border: 1px solid var(--line); background: transparent; border-radius: 8px; min-height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--ink) }
.cmp-ver .copy:hover { background: var(--sel) }
.cmp-text { font: 16.5px/1.6 var(--f-read); margin: 0 }
.cmp-full { font-size: 11.5px; color: var(--muted); margin-top: 3px }
.cmp.off { opacity: .8 }
.cmp.off .cmp-text { font-size: 14.5px }
.s-foot { padding: 10px 18px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px }
.s-foot .add { width: 100%; min-height: 38px; border: 1px dashed var(--line); background: transparent; border-radius: 10px; color: var(--muted); font-size: 13px; cursor: not-allowed }
.s-foot .all { width: 100%; min-height: 38px; border: 1px solid var(--line); background: transparent; border-radius: 10px; font-size: 13px }
.s-foot .all:hover { background: var(--sel) }

.scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--brand-tile) 38%, transparent); z-index: 18; border: 0; padding: 0 }
.pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(330px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -18px var(--shade); padding: 12px; font-size: 14px }
.pop h5 { margin: 4px 2px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.pop .row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center }
.pop .sg { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 9px; font-size: 13.5px }
.pop .sg[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.fsv { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums }
.plan-li { display: flex; gap: 8px; align-items: center; padding: 5px 2px; font-size: 14px; width: 100%; border: 0; background: transparent; text-align: left; border-radius: 8px; min-height: 38px; color: var(--ink) }
.plan-li:hover { background: var(--sel) }
.plan-li span { color: var(--muted); font-size: 12px; min-width: 7.5em }
.keys { width: 100%; border-collapse: collapse; font-size: 13.5px }
.keys td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top }
kbd { font: 600 12px ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--bg); white-space: nowrap }
.toast { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--btn); color: var(--btn-ink); border-radius: 10px; padding: 8px 14px; font-size: 13.5px; z-index: 40; max-width: 90% }

/* narrow reader: hide words, keep controls */
.reader.m .logo span, .reader.s .logo span { display: none }
.reader.s .ref { max-width: none; min-width: 0 }
/* phone: one slim bar (☰, chapter, view and translations, Aa, light/dark) that slides away while reading down
   and comes back on the way up; the view switch and the translations open from the bar */
.reader.s .r-top { gap: 2px; padding: 6px 8px; min-height: 52px; transition: margin-top .2s ease }
.reader.s.bar-hidden .r-top { margin-top: calc(-1 * var(--bar, 53px)) }
.reader.s #menuBtn, .reader.s #toolsBtn { display: inline-flex }
.reader.s #libBtn, .reader.s .logo, .reader.s .spacer, .reader.s #planWrap, .reader.s #keysWrap, .reader.s .s-foot .add { display: none }
.reader.s .crumb { flex: 1 1 auto; min-width: 0 }
.reader.s .crumb .ib { width: 30px }
.reader.s #crumbBtn { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 40px }
.reader.s #toolsBtn { gap: 5px; padding: 0 8px; font: 600 13px var(--f-ui); flex: none }
.reader.s #aaBtn { padding: 0 9px }
.reader.s #toolsLbl { overflow: hidden; text-overflow: ellipsis }
.reader.s .tb .lbl { display: none }
.reader.s .lib .ref { flex: none; max-width: none; margin: 0 12px 8px }
.reader.s .main { position: relative }
@media (max-width: 370px) { .reader.s #toolsBtn svg { display: none } }
.reader.s .tools { position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: none; padding: 12px; box-shadow: 0 18px 30px -20px var(--shade) }
.reader.s.tools-open .tools { display: flex }
.selbar { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 10; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px -14px var(--shade); font-size: 13.5px }
.selbar b { flex: 1; font: 600 15px var(--f-read) }
.selbar .chip { font-weight: 500 }
.reader.s .col { padding: 16px 18px 40px }
.reader.s .ch-num { font-size: 48px }
.reader.s .chpad { padding: 12px 18px 0 }
.reader.s .s-head { padding: 4px 8px }
.reader.s .cmp { padding: 9px 0 }
.reader.s .s-foot { padding: 8px 18px 10px }
.reader.s .ctable { padding: 0 8px 8px }
@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; scroll-behavior: auto !important } }