/* gita: the one stylesheet. One rule per line; sections: fonts · themes · first paint · frame · header · headings and
   verse · commentary · lists · chapter columns · pager · forms · your comments · highlights · settings · print. Rules
   of equal specificity that override each other (a media query over its base rule, :hover before [aria-pressed]) rely
   on order. Hover styles apply only where there is a hover (a mouse or trackpad): on a touch screen a tapped element
   keeps :hover until the next tap, so a hover style there sticks to whatever was touched last. */

/* ---- fonts: two sets, chosen in settings. serif (the default): Tiro throughout (Tiro Devanagari Sanskrit's Latin and
   Devanagari, Tiro Kannada). sans serif: IBM Plex Sans for Latin, IBM Plex Sans Devanagari, Noto Sans Kannada. Within a
   set the browser picks a font per character by unicode-range, and a file loads only when its script shows; boot.js
   preloads the chosen set's Latin and Devanagari. The first paint waits until the page's fonts have loaded (boot.js,
   app.js); Kannada, needed later (when a commentary opens), stays invisible for up to 0.1s instead of flashing a
   stand-in. There are no bold or italic faces: nothing is set in either. */
@font-face{font-family:'Plex Sans';font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Sans Devanagari';font-display:swap;src:url(/fonts/ibm-plex-sans-devanagari.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}
@font-face{font-family:'Noto Sans Kannada';font-display:fallback;src:url(/fonts/noto-sans-kannada.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0B83,U+0C80-0CF3,U+1CD0,U+1CD2-1CD3,U+1CDA,U+1CF2,U+1CF4,U+200C-200D,U+20B9,U+25CC,U+A830-A835}
@font-face{font-family:Tiro;font-display:swap;src:url(/fonts/tiro-devanagari-sanskrit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tiro Devanagari';font-display:swap;src:url(/fonts/tiro-devanagari-sanskrit.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}
@font-face{font-family:'Tiro Kannada';font-display:fallback;src:url(/fonts/tiro-kannada.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0B83,U+0C80-0CF3,U+1CD0,U+1CD2-1CD3,U+1CDA,U+1CF2,U+1CF4,U+200C-200D,U+20B9,U+25CC,U+A830-A835}
/* A set is the variables below, on <html> (boot.js sets data-font=sans before the first paint; absent = serif) or on
   any element, as the settings previews do. --dv scales Devanagari-only text so both sets show it at one size: Tiro's
   Devanagari is 13% smaller on the em than Plex's and 13% narrower, so a line that fits a phone in one set fits in the
   other. Lines that mix scripts (titles, the chapter list) keep one size: each set's Latin and Devanagari match. */
:root,[data-font=serif]{--latin:Tiro;--deva:'Tiro Devanagari';--knda:'Tiro Kannada';--generic:serif;--dv:1.13}
[data-font=sans]{--latin:'Plex Sans';--deva:'Plex Sans Devanagari';--knda:'Noto Sans Kannada';--generic:sans-serif;--dv:1}
[data-font]{font-family:var(--latin),var(--deva),var(--knda),var(--generic)}

/* ---- themes. Every theme is e-ink: a paper, an ink and greys mixed from the two, no second colour, no faux bold or
   italic, selection shown inverted. light and dark (and system, which picks between them by the device's mode) are
   greyscale: the light paper is a soft grey and the ink a soft black, to go easy on the eyes. The colour themes are the
   same on tinted paper with a tinted ink, so their greys carry the tint.
   Each theme is a paper and an ink, and the rest is solved from those two, with greys mixed from them in OKLab like ink
   thinned into the paper: ink2 8:1 on the paper (8.5:1 on dark paper), ink3 5:1 (5.4:1), panel a quiet 1.12 step off
   the paper (1.14), panel3 5.4:1 on the panel, line (borders of inputs and buttons) ink3 thinned to 3:1, hl a 1.3 step
   (1.6) to mark changed words. Your highlights are the one place a theme takes colour, as a highlighter's ink is
   coloured whatever the paper: five of them (--pen-yellow, green, blue, pink, purple), in Apple Books' hues (purple
   turned toward pink, to stand as far from blue as from pink), with highlighted text in ink. On light paper each sits
   0.17 from the paper in OKLab (as far as Books' own do on this paper), as colourful as sRGB allows, no lighter than
   the paper; on dark paper all five are a 2.0 step lighter than the paper, with one chroma, as much as all five hues
   allow there. Ink on them: 7:1 or more on light paper, 5:1 or more on dark (half its contrast on the paper).
   Any element can wear a theme through data-theme; that is how settings draws its live previews. */
:root,[data-theme=light]{--paper:#e2e2e2;--panel:#d6d6d6;--ink:#1c1c1c;--ink2:#404040;--ink3:#5e5e5e;--panel3:#525252;--line:#818181;--hl:#c6c6c6;--pen-yellow:#ffde3e;--pen-green:#a2fe8e;--pen-blue:#8fb9fe;--pen-pink:#ff9ab6;--pen-purple:#d9a7fe;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--paper:#161616;--panel:#222;--ink:#e0e0e0;--ink2:#b2b2b2;--ink3:#8c8c8c;--panel3:#969696;--line:#636363;--hl:#3a3a3a;--pen-yellow:#604400;--pen-green:#2c5124;--pen-blue:#2d4976;--pen-pink:#703648;--pen-purple:#5a3d6c;color-scheme:dark}}
[data-theme=dark]{--paper:#161616;--panel:#222;--ink:#e0e0e0;--ink2:#b2b2b2;--ink3:#8c8c8c;--panel3:#969696;--line:#636363;--hl:#3a3a3a;--pen-yellow:#604400;--pen-green:#2c5124;--pen-blue:#2d4976;--pen-pink:#703648;--pen-purple:#5a3d6c;color-scheme:dark}
[data-theme=red-sands]{--paper:#430b0a;--panel:#501811;--ink:#ffbf83;--ink2:#eeaf78;--ink3:#c5875c;--panel3:#d19263;--line:#975b3e;--hl:#6a3121;--pen-yellow:#684a00;--pen-green:#315928;--pen-blue:#324f80;--pen-pink:#7a3c4f;--pen-purple:#634376;color-scheme:dark}
[data-theme=solarized-dark]{--paper:#002b36;--panel:#073642;--ink:#eee8d5;--ink2:#c2c5b8;--ink3:#93a1a1;--panel3:#9faaa2;--line:#5d7478;--hl:#2e4b51;--pen-yellow:#6f4f00;--pen-green:#345e2b;--pen-blue:#355588;--pen-pink:#814054;--pen-purple:#69477d;color-scheme:dark}
[data-theme=palm-leaf]{--paper:#eeddb3;--panel:#e2d1a9;--ink:#322313;--ink2:#4a3b27;--ink3:#6a5942;--panel3:#5d4c37;--line:#8e7c60;--hl:#d4c29c;--pen-yellow:#ceb106;--pen-green:#90fe77;--pen-blue:#a1c5ff;--pen-pink:#ff9ab6;--pen-purple:#dfb5ff;color-scheme:light}
[data-theme=midnight]{--paper:#0d172f;--panel:#1a243a;--ink:#efe6d0;--ink2:#abb4c4;--ink3:#868e9e;--panel3:#9199a9;--line:#5b6578;--hl:#333c4e;--pen-yellow:#614500;--pen-green:#2d5325;--pen-blue:#2e4a78;--pen-pink:#723749;--pen-purple:#5c3e6e;color-scheme:dark}
[data-theme=deep-midnight]{--paper:#090918;--panel:#191a27;--ink:#e4dbc5;--ink2:#a8aab5;--ink3:#858590;--panel3:#8f909a;--line:#5c5c6a;--hl:#34343d;--pen-yellow:#593e00;--pen-green:#294c21;--pen-blue:#2a436e;--pen-pink:#683243;--pen-purple:#543864;color-scheme:dark}
:root{background:var(--paper)}

/* ---- first paint (boot.js): the page stays transparent until the app has drawn it, or 1s at most. Transparent, not
   hidden: once a body has been hidden, Safari holds back the first paint until the page has finished loading, fonts
   included, however slow. */
.wait body>*{opacity:0;animation:show 0s 1s forwards}
@keyframes show{to{opacity:1}}

/* ---- frame: one centred 760px frame on every page, with side margins (--side) that grow on wider screens.
   Everything starts on the frame's left edge (the navbar's starting line) and ends on its right edge. Boxes (panels,
   comments, inputs) align by their edges; marks (a hovered verse, the selected edition) bleed past the line so the
   text inside stays on it. --gutter is where a disclosure triangle hangs; --num is a numbered list's number column. */
:root{--side:max(16px,4vw);--gutter:20px;--num:36px}
body{margin:0 auto;max-width:760px;padding:0 var(--side) 64px;color:var(--ink);font:15px/1.5 var(--latin),var(--deva),var(--knda),var(--generic);font-synthesis:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a{color:inherit;text-decoration:none}
p a,.g a{text-decoration:underline 1px;text-underline-offset:3px}
@media (hover:hover){a:hover{text-decoration:underline 1px;text-underline-offset:3px}}
b{font-weight:inherit}
.g{color:var(--ink3)}
main>:first-child{margin-top:0}

/* ---- header: the logo, the 18 chapters, then two tools: the pen (your highlights) and the gear (settings). A tool is
   inverted on its own page, like a selected chapter. */
header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 0 6px;border-bottom:1px solid var(--ink);margin-bottom:14px}
/* a Home Screen app on a phone or tablet: iOS 26 on blurs the top ~36px under its status bar, so the logo starts below */
@media (display-mode:standalone) and (pointer:coarse){header{padding-top:40px}}
header nav{display:flex;flex-wrap:wrap;flex:1}
header nav a{padding:0 4px}
.tools{align-self:flex-start;display:flex;gap:4px}
.pen,.gear{display:flex;padding:2px 3px}
.tools svg{width:18px;height:18px}
/* phones: the chapters in two rows of nine, 10 under 1, rather than one row that wraps raggedly */
@media (max-width:479.98px){header nav{display:grid;grid-template-columns:repeat(9,auto);justify-content:space-between;justify-items:center}}
.logo{padding:0 6px;letter-spacing:.06em}
.logo,.on,.pick button.on{background:var(--ink);color:var(--paper)}

/* ---- headings and the verse */
h1{font:inherit;font-size:22px;margin:0 0 12px}
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 10px}  /* a page's heading row: title, pager */
.top>h1{margin:0}
.ref{font-size:15px;color:var(--ink3)}  /* a verse page's number */
h2{font:inherit;margin:0 0 8px}  /* settings' column headings (FAQs, theme, font): set like the text */
/* The verse: 24px, and on phones as large as the screen allows: a line of 18em fits, which 99% of lines are. The rest
   wrap with a hanging indent, here and in a chapter's list. */
.v{font-size:calc(var(--dv) * clamp(18px,calc((100vw - 2 * var(--side)) / 18),24px));line-height:1.6;white-space:pre-wrap;margin:4px 0 18px}
.v>div,.vl [lang=sa]>div{padding-left:1em;text-indent:-1em}
.v .u{font-size:calc(15px * var(--dv));color:var(--ink2)}  /* a speaker line (… उवाच ।) */
.v mark{background:var(--hl);color:inherit}  /* a word another edition reads differently */
.ed{font-size:13px;color:var(--ink3);margin:-14px 0 16px -4px}  /* the edition picker under a verse */
.pick button{color:inherit;background:none;border:0;padding:0 4px;margin:0}
.col{white-space:pre-wrap;color:var(--ink3);font-size:calc(16px * var(--dv));margin:14px 0}  /* a chapter's colophon */

/* ---- commentary: a disclosure triangle, ▸ turning to ▾ when open, hangs in the gutter: a scholar's name, its wrapped
   lines and its commentary all start --gutter in. It is drawn rather than typed (Tiro has no such glyph), so it looks
   the same everywhere. */
details{margin:3px 0}
summary{cursor:pointer;list-style:none;padding-left:var(--gutter);text-indent:calc(-1 * var(--gutter))}
summary::-webkit-details-marker{display:none}
summary::before,.tri{content:'';display:inline-block;border:solid transparent;border-width:.28em 0 .28em .48em;border-left-color:var(--ink3);margin-right:calc(var(--gutter) - .48em);transition:transform .15s}
@media (hover:hover){summary:hover::before{border-left-color:var(--ink)}}
details[open]>summary::before{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){summary::before{transition:none}}
details>div{margin-left:var(--gutter)}
.c{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px;margin-bottom:14px}
[lang=kn]{font-family:var(--knda),var(--latin),var(--deva),var(--generic)}  /* Kannada first: its dandas are Kannada's */
.c[lang=kn]{font-size:16px;line-height:1.75}
.c[lang=sa]{font-size:calc(16px * var(--dv));line-height:1.7}
.w::before{content:' · '}  /* a scholar's work, after the name */

/* ---- numbered lists: the number starts on the line, the text --num in (home's chapters and a chapter's verses) */
ol{list-style:none;margin:8px 0;padding:0}
li{padding:1px 0}
.ch{font-size:19px}
.ch li>span:first-child{display:inline-block;width:var(--num);color:var(--ink3)}
.n::after{content:' •'}  /* a verse you have commented on */
.vl{margin:0}
.vl li{display:grid;grid-template-columns:var(--num) minmax(0,1fr);align-items:baseline;padding:4px 8px;margin:0 -8px 6px;font-size:calc(var(--dv) * clamp(15px,calc((100vw - 2 * var(--side) - var(--num)) / 19.6),18px));line-height:1.55;cursor:pointer}
@media (hover:hover){.vl li:hover{--ink3:var(--panel3);background:var(--panel)}}
.vl li:focus-within,.vl .here{--ink3:var(--panel3);background:var(--panel)}
@media (hover:none){.vl .here{animation:settle .8s ease-out 1.2s forwards}}  /* touch: the verse you came from shows, then settles (no hover to tell it from) */
@keyframes settle{to{background-color:transparent}}
@media (prefers-reduced-motion:reduce){.vl .here{animation-duration:0s}}
.vl li>a{color:var(--ink3);font-size:14px}
.vl [data-color]>a{justify-self:start;margin-left:-3px;padding:0 3px;background:var(--pen);color:var(--ink)}  /* a verse with a highlight on its page: its number highlighted, in the colour of one there */
.vl .u{font-size:calc(14px * var(--dv));color:var(--ink2)}

/* ---- columns: a chapter's commentary panel beside its verses from 840px (above them on narrower screens); settings'
   backup and appearance columns use the same grid */
.cols{display:grid;gap:0 32px}
.cols>*>:first-child{margin-top:0}
.cols>section>:last-child{margin-bottom:0}
.cols>section+section{margin-top:24px}
aside{--ink3:var(--panel3);background:var(--panel);padding:6px 14px;margin:0 0 14px}
aside>details>summary{color:var(--ink3);font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px;padding-bottom:4px}
aside .w{display:block;text-indent:0}  /* the narrow panel puts the work on its own line */
aside .w::before{content:none}
aside .c[lang=kn]{font-size:14.5px}
aside .c[lang=sa]{font-size:calc(15px * var(--dv))}
aside .c[lang=en]{font-size:14px}
@media (min-width:840px){.cols{grid-template-columns:400px minmax(0,1fr)}.cols>section+section{margin-top:0}.cols>aside{grid-column:2;grid-row:1;position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow:auto}}

/* ---- pager: prev and next, quiet, at the right of the heading row, where every page starts. The foot pager repeats
   them, prev on the left edge and next on the right, where a page runs long: on a chapter page always, on a verse page
   only when it runs past the screen (reading.js sets main.long), so the two are never in view together. */
.pager{display:flex;flex-wrap:wrap;gap:4px 16px}
.pager a{padding:4px 0}
.top>.pager{margin-left:auto;color:var(--ink3)}
.foot{margin-top:28px}
.foot [rel=next]{margin-left:auto;text-align:right}
.foot.if-long{display:none}
main.long .foot.if-long{display:flex}

/* ---- forms: inputs and buttons share the quiet --line border; a focused input darkens it */
textarea{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:6px 8px;font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:0;resize:vertical;field-sizing:content;min-height:4.5em}
textarea::placeholder{color:var(--ink3)}
textarea:focus{outline:0;border-color:var(--ink2)}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:0;padding:1px 12px;margin:0 0 4px;cursor:pointer}
button:active:not(:disabled){background:var(--ink);color:var(--paper)}
button:disabled{color:var(--ink3);cursor:default}
button+button{margin-left:6px}

/* ---- your comments on a verse: the box for a new one is a single line that grows with what you type, and nothing else
   (it never changes size on focus: a box that shrank on blur moved the save button out from under the click), and its
   save button shows once there is something to save. A saved comment is the same box as its textarea (border, padding),
   so the text stays put when you edit it. */
#notes{margin-top:16px}
#notes textarea{min-height:0;resize:none}
#notes textarea:placeholder-shown+button:last-child{display:none}
.note{--ink3:var(--panel3);background:var(--panel);border:1px solid var(--panel);padding:6px 8px;margin:6px 0}
.note>div:first-child{white-space:pre-wrap;overflow-wrap:anywhere}
.acts{font-size:13px;margin-top:2px}  /* date · edit · delete */
#notes>.acts{margin:6px 0}
.acts button{color:inherit;background:none;border:0;padding:0;margin:0;text-decoration:underline 1px;text-underline-offset:3px}

/* ---- highlights: painted over the text with the CSS Custom Highlight API (pen.js), a band of one of the theme's five
   highlighter colours with the text in ink. On a verse page, selecting text you can highlight draws in the pen's colour
   too, so a drag looks like the stroke it leaves.
   --pen is the colour an element stands for: the pen's own on <html> (pen.js sets data-color there), a swatch, a verse
   marked in a chapter's list. */
::highlight(pen-yellow){background-color:var(--pen-yellow);color:var(--ink)}
::highlight(pen-green){background-color:var(--pen-green);color:var(--ink)}
::highlight(pen-blue){background-color:var(--pen-blue);color:var(--ink)}
::highlight(pen-pink){background-color:var(--pen-pink);color:var(--ink)}
::highlight(pen-purple){background-color:var(--pen-purple);color:var(--ink)}
.highlighting [data-pen]::selection,.highlighting [data-pen] ::selection{background:var(--pen);color:var(--ink)}
[data-color=yellow]{--pen:var(--pen-yellow)}
[data-color=green]{--pen:var(--pen-green)}
[data-color=blue]{--pen:var(--pen-blue)}
[data-color=pink]{--pen:var(--pen-pink)}
[data-color=purple]{--pen:var(--pen-purple)}
/* The popover in place: the colours as swatches, the one the highlight is in ringed (like a chosen theme tile), then
   share and delete. It is placed by pen.js, under the line a stroke ended on. After a delete it holds only "deleted ·
   undo", as a deleted comment does. */
#pop{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:7px 10px;background:var(--paper);border:1px solid var(--line);touch-action:manipulation}
#pop[hidden]{display:none}
#pop button{display:block;margin:0;padding:0;border:0;background:none;color:var(--ink3)}
#pop [data-color]{width:20px;height:20px;border-radius:50%;background:var(--pen)}
#pop [aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}
#pop svg{display:block;width:20px;height:20px}
@media (hover:hover){#pop button:not([data-color]):hover{color:var(--ink)}}
#pop .gone{display:none;font-size:13px;color:var(--ink3)}
#pop.deleted>button{display:none}
#pop.deleted .gone{display:block}
#pop .gone button{display:inline;color:inherit;text-decoration:underline 1px;text-underline-offset:3px}
/* The highlights page is a numbered list like a chapter's: the verse number on the edge, each highlight in its own
   words and colour, a click anywhere on one going to it, and its share button on the right edge. "select" turns the
   share buttons into checkboxes (a filled square when picked), and a picked highlight is marked like a hovered one. */
.top>.do{margin-left:auto;color:var(--ink3)}
.do button{color:inherit;background:none;border:0;padding:4px 0;margin:0}
.do button:disabled{color:var(--line)}
@media (hover:hover){.do button:hover:not(:disabled){color:var(--ink)}}
.hls{--num:52px}
.hls li{display:grid;grid-template-columns:var(--num) minmax(0,1fr) auto;align-items:baseline;padding:4px 8px;margin:0 -8px 6px;cursor:pointer}
.hls li>a{color:var(--ink3);font-size:14px}
.hls .g{font-size:13px}
.hls .q{white-space:pre-wrap;overflow-wrap:anywhere}
.hls .q[lang=sa]{font-size:calc(18px * var(--dv));line-height:1.55}
.hls .q[lang=kn]{font-size:16px;line-height:1.75}
.hls .share{align-self:start;margin:3px 0 0 12px;padding:0;border:0;background:none;color:var(--ink3)}
.hls .share svg{display:block;width:18px;height:18px}
.hls input{align-self:start;appearance:none;width:16px;height:16px;margin:5px 1px 0 13px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.hls input:checked{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
@media (hover:hover){.hls li:hover{--ink3:var(--panel3);background:var(--panel)}.hls .share:hover{color:var(--ink)}}
.hls li:focus-within,.hls li:has(:checked){--ink3:var(--panel3);background:var(--panel)}

/* ---- settings: FAQs, which open like a commentary. Their answers hold what they speak of: the backup to save and the
   file to choose. */
.faq details{margin:6px 0}
.faq p{margin:4px 0 8px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}

/* ---- settings: theme and font tiles. A theme tile is a live miniature of the site drawn in that theme (system: light,
   with dark in the lower right triangle); a font tile shows the three scripts in that set. The chosen tile is ringed
   and its name inverted; names bleed like the edition chips. Two to a row in the narrow right column and on phones,
   four to a row when settings is a single wide column. */
.cols h2:not(:first-child){margin-top:24px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:8px 0 10px}
@media (min-width:680px) and (max-width:839.98px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tiles button{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;text-align:left}
.tiles button:active:not(:disabled){background:none;color:inherit}
@media (hover:hover){.tiles button:hover .sw{outline:1px solid var(--ink3);outline-offset:3px}}
.tiles button[aria-pressed=true] .sw{outline:2px solid var(--ink);outline-offset:3px}  /* after :hover, same weight: wins */
.tiles button>span:last-child{display:inline-block;margin:5px 0 0 -4px;padding:0 4px}
.tiles [aria-pressed=true]>span:last-child{background:var(--ink);color:var(--paper)}
.sw{position:relative;display:block;height:86px;background:var(--hl)}
.sw>span{position:absolute;inset:1px;padding:6px 8px;background:var(--paper);color:var(--ink);overflow:hidden}
.sw>span+span{clip-path:polygon(100% 0,100% 100%,0 100%)}
.sw>span>*{display:block;white-space:nowrap}
.sw b{display:block;width:max-content;padding:0 3px;background:var(--ink);color:var(--paper);font-size:10px;line-height:1.5;letter-spacing:.06em}
.sw i{border-top:1px solid var(--ink);margin:2px 0 4px}
.sw .u{font-size:9px;line-height:1.5;color:var(--ink2)}
.sw [lang=sa]+[lang=sa]{font-size:13px;line-height:1.35}
.sw .p{margin-top:4px;padding:0 4px;background:var(--panel);color:var(--panel3);font-size:9px;line-height:1.6}
.sw .tri{margin-right:4px;border-left-color:var(--panel3)}
.sw .f [lang=en]{font-size:12px;line-height:1.5}
.sw .f [lang=sa]{font-size:calc(17px * var(--dv));line-height:1.4}
.sw .f [lang=kn]{font-size:13px;line-height:1.6}

/* ---- print: a printout (or a PDF) is the page as it looks on screen, in its theme, to the sheet's edges. Browsers
   print on white and leave out backgrounds (WebKit darkens light text to suit), so print-color-adjust keeps every
   colour as it is. Pages have no margins, since Safari can't paint a page's margins (Chrome paints @page's background
   there): the paper reaches every edge, and the body's padding stands in for margins, at every page break where the
   browser repeats it (Chrome; Safari pads only the first sheet's top and the last one's foot). WebKit paints the
   root's background only as far as the text runs (a fixed layer too: it sizes one to the text, not the sheet), so a
   shadow under <main> carries the paper on to the foot of the last sheet. It starts at main's top, so it can't cover
   the header's rule, and it overlaps the root's background rather than meeting it, so no seam shows where one ends.
   Safari lays a print out at least 1.25 times wider than the sheet but answers media queries for the window, so a
   chapter's commentary panel can keep its column: in print it is neither stuck nor cut to a screen's height. While a
   print is made, settings.js pins the theme on screen (print reads the device's mode as light) and pen.js turns
   highlights into elements (.lit): WebKit leaves the Custom Highlight API's out of a print. */
@media print{:root{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@page{margin:0;background:var(--paper)}
@media print{main{box-shadow:0 2000px 0 2000px var(--paper)}}
@media print{body{padding-top:40px;padding-bottom:40px;-webkit-box-decoration-break:clone;box-decoration-break:clone}}
@media print{.cols>aside{position:static;max-height:none;overflow:visible}}
@media print{.vl li,.hls li,.note{break-inside:avoid}}  /* a verse, a highlight or a comment on one sheet */
@media print{#pop{display:none}}
.lit{background:var(--pen);color:var(--ink)}  /* a highlight while a print is made (pen.js) */