/* The palette, lifted from site.css so both themes match exactly. app.html does NOT load site.css:
   that stylesheet is written for the desktop pages and its .card, .row and .field rules fight these. */
:root{
  color-scheme:light;
  --paper:#f7f2e8; --paper-2:#efe7d8; --paper-3:#e4dac6; --paper-4:#d6c9b0;
  --ink:#241f1a; --ink-2:#5a5148; --ink-3:#8c8073;
  --rule:#dccfb9; --rule-2:#c9b99d;
  --accent:#7a2e2a; --accent-soft:#f0dcd6; --accent-ink:#5f221f;
  --amber:#a8781f; --amber-soft:#f2e4c4; --amber-ink:#7d5713;
  --rose:#9c3b2f; --rose-soft:#f1d9d3; --rose-ink:#772a21;
  --green:#3d6b45; --green-soft:#dbe8d9; --green-ink:#2c5133;
  --bar-muted:#cfc2a8;
  --tip-bg:#241f1a; --tip-ink:#f7f2e8;
  --shadow:0 1px 2px rgba(36,31,26,.06), 0 10px 28px -14px rgba(36,31,26,.35);
  --r1:#7a2e2a; --r2:#a8781f; --r3:#3f5f8a; --r4:#3d6b45; --r5:#7a4b8a; --r6:#a05a1f; --r7:#2f6f6a;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1c1814; --paper-2:#26211b; --paper-3:#332c24; --paper-4:#42392f;
  /* --ink-3 was #8f8474, which is 4.35:1 on --paper-2 and 3.75:1 on --paper-3: under the 4.5 that small
     text needs, and the citation sheet is small text on --paper-2. Lightened along its own hue until it
     clears 4.5 on the darkest ground it is used over. Light mode is unaffected -- it was never the
     problem, and the two themes do not have to hold the same value. */
  --ink:#efe6d6; --ink-2:#c2b6a2; --ink-3:#9d9385;
  --rule:#3a322a; --rule-2:#4b4136;
  --accent:#d0786f; --accent-soft:#3d2320; --accent-ink:#e39a92;
  --amber:#d9a94a; --amber-soft:#3d3118; --amber-ink:#ecc271;
  --rose:#d9776a; --rose-soft:#3f2320; --rose-ink:#eda297;
  --green:#7fb489; --green-soft:#223626; --green-ink:#9ccaa4;
  --bar-muted:#4a4137;
  --tip-bg:#efe6d6; --tip-ink:#1c1814;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  --r1:#d0786f; --r2:#d9a94a; --r3:#8fb0e0; --r4:#7fb489; --r5:#c39bd6; --r6:#e09a5a; --r7:#6fc2bc;
}
/* Plain paper, the same white page the desktop offers, so a reader who chose it there does not meet
   the cream again here. Kept beside the dark block, as that one is kept beside the default. */
:root[data-theme="plain"]{
  color-scheme:light;
  --paper:#ffffff; --paper-2:#f7f7f8; --paper-3:#ededf0; --paper-4:#e0e1e5;
  --ink:#15171c; --ink-2:#4a4f58; --ink-3:#5f646e;
  --rule:#e6e6ea; --rule-2:#d3d4d9;
  --accent:#7a2e2a; --accent-soft:#f4e3e0; --accent-ink:#5f221f;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="plain"]){
  color-scheme:dark;
  --paper:#1c1814; --paper-2:#26211b; --paper-3:#332c24; --paper-4:#42392f;
  /* --ink-3 was #8f8474, which is 4.35:1 on --paper-2 and 3.75:1 on --paper-3: under the 4.5 that small
     text needs, and the citation sheet is small text on --paper-2. Lightened along its own hue until it
     clears 4.5 on the darkest ground it is used over. Light mode is unaffected -- it was never the
     problem, and the two themes do not have to hold the same value. */
  --ink:#efe6d6; --ink-2:#c2b6a2; --ink-3:#9d9385;
  --rule:#3a322a; --rule-2:#4b4136;
  --accent:#d0786f; --accent-soft:#3d2320; --accent-ink:#e39a92;
  --amber:#d9a94a; --amber-soft:#3d3118; --amber-ink:#ecc271;
  --rose:#d9776a; --rose-soft:#3f2320; --rose-ink:#eda297;
  --green:#7fb489; --green-soft:#223626; --green-ink:#9ccaa4;
  --bar-muted:#4a4137;
  --tip-bg:#efe6d6; --tip-ink:#1c1814;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  --r1:#d0786f; --r2:#d9a94a; --r3:#8fb0e0; --r4:#7fb489; --r5:#c39bd6; --r6:#e09a5a; --r7:#6fc2bc;
}}


/* common.js builds a desktop nav and footer on DOMContentLoaded and will create the elements if they
   are absent. app.html supplies them already hidden, which keeps the app free of them without
   changing common.js and so without touching any desktop page. */
.nav,footer.site{display:none!important}
/* common.js shows a toast by adding .show and hides it by removing that class again after 2.2s. This
   rule described what a toast LOOKS like and never said that one without .show is invisible -- so in
   the app the first toast ever raised stayed on the screen for the rest of the session, and tapping the
   heart off left 'Removed.' sitting there for good. site.css has always had the pair; this had half. */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 74px);transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:100px;font:500 13px var(--sans);
  opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

/* Laurel on a phone.
   Loaded after site.css, which supplies the palette and both themes, so this file only lays things out.
   Nothing here applies to the desktop pages: app.html is the only page that loads it. */

:root{ --tab-h:58px; --serif:"Fraunces",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.app{max-width:560px;margin:0 auto;position:relative;min-height:100%}
/* Room for the tab bar, and for the now-playing bar only when there is one. The 82px was reserved
   always, so a short screen -- the three books the survey gives you -- ended in a hand's width of
   empty paper with the navigation floating in the middle of it. */
/* ...and a screen must clear the whole of it, bar plus reserved strip, or its last row is cut off --
   which is what happened to 'Support Laurel' at the foot of the You list when this padding was trimmed
   from 140px without allowing for the strip. */
/* ...and then it was trimmed wrong a third time, so stop counting by hand. app.js measures the bars
   that are actually on the screen -- the tab bar, and the now-playing bar when there is one -- and
   publishes the total as --pad-bottom. The calc below is the fallback for the instant before the first
   measurement, and for anything that never runs the script. Too little padding cuts off the last row;
   too much leaves a hand's depth of empty paper you can scroll into, which is what the foot of the home
   screen was doing, and both faults come from a number written down in two places and kept in neither. */
.screen{display:none;padding-bottom:var(--pad-bottom,calc(var(--tab-h) + 22px + env(safe-area-inset-bottom,0px)))}
.screen.on{display:block}
.spin{padding:60px 0;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- headings and shelves ---------- */
.hello{padding:26px 18px 4px;font:600 27px/1.15 var(--serif);letter-spacing:-.01em}
.hello span{display:block;font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.shelf{margin:26px 0 0}
.shelf h2{font:600 18px/1.2 var(--serif);margin:0 0 2px;padding:0 18px;letter-spacing:-.01em}
.shelf p{margin:0 0 12px;padding:0 18px;font-size:12.5px;color:var(--ink-3)}
.rail{display:flex;align-items:flex-start;gap:13px;overflow-x:auto;padding:0 18px 4px;scroll-snap-type:x proximity;
  scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.card{flex:none;width:143px;scroll-snap-align:start;text-align:left;display:flex;flex-direction:column;align-items:stretch}
.card img{width:143px;height:143px;object-fit:cover;border-radius:6px;display:block;
  background:var(--paper-2);border:1px solid var(--rule)}
.card b{display:block;font:600 13.5px/1.3 var(--sans);margin:8px 0 1px}
.card i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.3}
.card.round{width:118px;text-align:center;align-items:center}
.card.round img{border-radius:50%;width:118px;height:118px}
/* The seasonal shelf's cards: a poem title may run to two lines but no more, and the two wide buttons
   under the shelf sit close to it. The rail is as tall as its tallest card, so a wrapped title anywhere
   in the row leaves a blank line under the one-line cards on screen; the tighter padding takes that back. */
.season .card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf.season+.wides{padding-top:6px}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 18px 4px}
.quick button{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-radius:7px;overflow:hidden;min-height:56px;text-align:left}
.quick img{width:56px;height:56px;object-fit:cover;flex:none;background:var(--paper-3)}
.quick b{font:600 12.5px/1.25 var(--sans);padding-right:8px}

.rows{padding:0 18px}
.row{display:flex;align-items:center;gap:13px;padding:9px 0;border-bottom:1px solid var(--rule);width:100%;text-align:left}
.row:last-child{border-bottom:0}
.row .n{font:500 12px var(--sans);color:var(--ink-3);width:20px;flex:none;font-variant-numeric:tabular-nums}
.row .t{min-width:0;flex:1}
.row .t b{display:block;font:600 14.5px/1.3 var(--sans)}
.row .t i{font-style:normal;font-size:12px;color:var(--ink-3)}
.row .len{margin-left:auto;font-size:11.5px;color:var(--ink-3);flex:none;padding-left:8px}

/* ---------- search ---------- */
.field{margin:16px 18px 6px;display:flex;gap:9px;align-items:center;background:var(--paper-2);border-radius:7px;padding:0 14px}
.field input{flex:1;background:none;border:0;padding:12px 0;font:15px var(--sans);color:var(--ink);outline:none;min-width:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:12px 18px}
.tile{aspect-ratio:1.42;border-radius:7px;position:relative;overflow:hidden;text-align:left;display:block;background:var(--paper-2)}
/* The picture carries the category and the word sits on it. Darkened enough that white type holds on any
   plate, since these range from a bright Blake page to a black Dore engraving. */
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.62)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,13,.10) 0%,rgba(20,17,13,.62) 100%)}
.tile span{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;font:600 15.5px/1.2 var(--serif);
  color:#fdfaf4;text-shadow:0 1px 10px rgba(0,0,0,.6);text-wrap:balance}
.tile:active img{filter:saturate(.9) brightness(.72)}

.recents{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px}
.rec{font:500 12.5px var(--sans);color:var(--ink-2);background:var(--paper-2);border-radius:100px;padding:6px 13px}
.rec.clear{background:none;color:var(--ink-3)}
.backcat{font:500 12.5px var(--sans);color:var(--accent);padding:0 18px 10px;display:block}
.field #qclear{font-size:20px;color:var(--ink-3);width:24px;flex:none;line-height:1}

.hits{padding:4px 18px 0}
.hit{display:block;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--rule)}
.hit q{display:block;font:15.5px/1.45 var(--serif);color:var(--ink);quotes:none}
.hit em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.hit mark{background:var(--accent-soft);color:var(--accent-ink);border-radius:2px}

/* ---------- detail ---------- */
.hero{padding:14px 18px 0;text-align:center}
.hero img{width:186px;height:186px;object-fit:cover;border-radius:7px;box-shadow:0 10px 34px rgba(29,26,22,.24)}
.hero h1{font:700 24px/1.16 var(--serif);margin:17px 0 3px;letter-spacing:-.015em;text-wrap:balance}
.hero .by{font-size:13.5px;color:var(--ink-2)}
.hero .fine{font-size:12px;color:var(--ink-3);margin-top:5px}
.actions{display:flex;gap:9px;align-items:center;justify-content:center;margin:16px 0 6px}
.btn{background:var(--accent);color:#fdfaf4;border-radius:100px;padding:11px 27px;font:600 14.5px var(--sans)}
.icon{width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-size:17px;color:var(--ink-2)}

/* ---------- top bar on inner screens ---------- */
/* Clear of the notch. The bar sat at top:0 with a flat 12px of padding, so on a phone with a status
   bar the close and the menu were behind the clock and the battery -- present, tappable in theory, and
   invisible in practice. */
.tbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--paper);z-index:6;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px}
.tbar .mid{flex:1;text-align:center;min-width:0}
.tbar .mid b{display:block;font:600 12.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .mid i{font-style:normal;font-size:11px;color:var(--ink-3)}
.tbar button{font-size:19px;color:var(--ink-2);width:34px;height:34px;flex:none;line-height:1}

/* ---------- the reader ---------- */
#reader{position:fixed;inset:0;background:var(--paper);z-index:40;display:none;flex-direction:column;max-width:560px;margin:0 auto}
#reader.on{display:flex}
.pager{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.pager::-webkit-scrollbar{display:none}
.pane{flex:0 0 100%;scroll-snap-align:start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 34px 150px 22px}
.dots{position:absolute;left:0;right:0;bottom:calc(3px + env(safe-area-inset-bottom,0px));display:flex;
      gap:4px;justify-content:center;pointer-events:none;z-index:5}
.dots i{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.35;transition:opacity .2s,width .2s}
.dots i.on{opacity:.85;width:9px;border-radius:2px;background:var(--accent)}
/* only meaningful while the reader's two pages exist */
body:not(.reading) #nowbar .dots{display:none}

.pane h1{font:700 26px/1.2 var(--serif);margin:6px 0 2px;letter-spacing:-.015em;text-wrap:balance}
.pane .sub{font-size:12.5px;color:var(--ink-3);margin-bottom:14px;line-height:1.45}

/* A line set not to wrap can be wider than the phone, which makes the whole reading pane scroll
   sideways -- and the controls scrolled away with it, so Rhyme sat off the left edge until you
   dragged the page back. The strip stays put at the left however far the verse runs, and wraps
   rather than pushing anything past the edge. */
.strip{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;padding:2px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px;position:sticky;left:0;max-width:100%}
.strip>button{font:500 12px var(--sans);color:var(--ink-3);letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.strip>button.on{color:var(--accent)}
.strip>button::before{content:"";width:7px;height:7px;border-radius:50%;border:1.4px solid currentColor}
.strip>button.on::before{background:currentColor}
.sizer{display:flex;align-items:center;gap:13px;margin-left:auto}
.turned,.tiphint{position:sticky;left:0;max-width:100%}
.sizer button{font:600 13px var(--sans);color:var(--ink-3);width:20px}
.turned{font:500 11.5px/1.4 var(--sans);color:var(--ink-3);margin:-6px 0 16px}

.vs{font-family:var(--serif);font-size:18.5px;line-height:1.62}
.vs .st{margin:0 0 1.35em;position:relative}
.vs .l{display:block;padding:1px 0 1px 1.1em;border-radius:3px;position:relative;text-indent:-1.1em}
.vs.fit .l{text-indent:0;padding-left:0;white-space:nowrap}
.vs .l.sel{background:var(--accent-soft)}
.vs .l.here{box-shadow:-11px 0 0 -9px var(--accent)}
.vs .l .rl{position:absolute;right:-19px;top:3px;font:500 10px var(--sans);color:var(--accent);opacity:0;transition:opacity .15s}
body.rhymes .vs .l .rl{opacity:.85}
body.stress .vs{line-height:2.45}
.vs .sy{position:relative}
body.stress .vs .sy[data-s="1"]::before{content:"/";position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:600 11px var(--sans);color:var(--accent)}
body.stress .vs .sy[data-s="0"]::before{content:"\02D8";position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:600 11px var(--sans);color:var(--ink-3)}
.gw{border-bottom:1px dotted var(--ink-3)}

/* ---------- about-this-poem ---------- */
.about h2{font:600 12px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 10px}
.about h2:first-child{margin-top:8px}
.mapcard{border-radius:8px;overflow:hidden;background:var(--paper-2);position:relative}
.mapcard svg{display:block;width:100%;height:132px}
.mapcard .pin{position:absolute;left:12px;bottom:9px;font:600 12.5px var(--sans);color:#fdfaf4;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tl{position:relative;height:46px;margin:4px 0 2px}
.tl .axis{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--rule)}
.tl .tick{position:absolute;top:16px;width:1px;height:7px;background:var(--rule)}
.tl .tick b{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:500 10px var(--sans);color:var(--ink-3)}
.tl .now{position:absolute;top:13px;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.tl .now b{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:600 10.5px var(--sans);color:var(--accent);white-space:nowrap}
.scheme{display:flex;gap:5px;flex-wrap:wrap;font:600 12px var(--sans)}
.scheme span{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2)}
.scheme span.a{background:var(--accent-soft);color:var(--accent-ink)}
.stat{display:flex;margin:2px 0 4px}
.stat div{flex:1}
.stat b{display:block;font:600 21px var(--serif);color:var(--ink)}
.stat i{font-style:normal;font-size:11px;color:var(--ink-3)}
.echo{padding:11px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.5}
.echo:last-child{border:0}
.echo .q{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);font-style:normal;margin-bottom:3px}
.echo em{font-style:normal;color:var(--ink-3);font-size:12px}
.deeper{display:block;width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--rule);font:500 14px var(--sans);color:var(--ink)}
.deeper span{float:right;color:var(--ink-3)}

/* ---------- the line sheet ---------- */
#scrim{position:fixed;inset:0;background:rgba(20,17,13,.22);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s}
#scrim.on{opacity:1}
body.listening .mini{display:none}
#sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--paper);z-index:51;
  border-radius:16px 16px 0 0;box-shadow:0 -8px 40px rgba(29,26,22,.22);transform:translateY(102%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);max-height:58vh;display:flex;flex-direction:column}
#sheet.on{transform:none}
.grab{width:34px;height:4px;border-radius:2px;background:var(--rule);margin:9px auto 4px;flex:none}
.sline{padding:6px 20px 12px;font-family:var(--serif);font-size:16.5px;line-height:1.45;border-bottom:1px solid var(--rule);flex:none}
.stabs{display:flex;gap:22px;padding:11px 20px 0;border-bottom:1px solid var(--rule);flex:none}
.stabs button{font:600 12.5px var(--sans);color:var(--ink-3);padding-bottom:9px;border-bottom:2px solid transparent;letter-spacing:.02em}
.stabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.spane{padding:16px 20px 30px;overflow-y:auto;font-size:14px;line-height:1.6;color:var(--ink-2)}
.spane.off{display:none}
.spane b{color:var(--ink)}
.spane .big{font-family:var(--serif);font-size:19px;color:var(--ink);letter-spacing:.05em;margin:2px 0 12px;line-height:1.5}
.spane dl{display:grid;grid-template-columns:auto 1fr;gap:5px 15px;margin:0}
.spane dt{font-family:var(--serif);font-weight:600;color:var(--ink)}
.spane dd{margin:0}
.spane .rw{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
.spane .rw:last-child{border:0}
.chip{display:inline-block;font:500 11px var(--sans);color:var(--accent-ink);background:var(--accent-soft);padding:3px 9px;border-radius:100px;margin:0 5px 5px 0}
.spane textarea{width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:10px;font:15px var(--serif);color:var(--ink);resize:none}
.menu{padding:6px 0 26px}
.menu button{display:flex;align-items:center;gap:14px;width:100%;padding:13px 20px;font:500 14.5px var(--sans);color:var(--ink);text-align:left}
.menu button em{font-style:normal;width:20px;text-align:center;color:var(--ink-3);font-size:15px}
.menu button i{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.menu hr{border:0;border-top:1px solid var(--rule);margin:7px 20px}

/* ---------- mini bar and tabs ---------- */
/* Above the whole tab bar, strip included -- the same correction #nowbar needed. Any element pinned
   to var(--tab-h) alone now sits inside the bar on a phone with a home indicator. */
/* The 'reading now' strip and the now-playing bar are pinned to the same place, so when a reading is
   going they were drawn one on top of the other and the strip's play control sat underneath. They
   say much the same thing; the bar is the fuller of the two, so it wins. */
.mini{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;background:var(--paper-2);
  display:none;align-items:center;gap:11px;padding:8px 12px;z-index:30;border-radius:7px 7px 0 0}
.mini.on{display:flex}
.mini img{width:40px;height:40px;border-radius:4px;object-fit:cover;flex:none}
.mini .t{flex:1;min-width:0}
.mini b{display:block;font:600 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
/* 44px is what a thumb needs; this was 27 wide and 24 tall, and the audit found it both too small and
   liable to sit under the bars. The glyph is unchanged -- only the area that answers to it. */
.mini .go{font-size:19px;color:var(--accent);min-width:44px;min-height:44px;display:flex;
  align-items:center;justify-content:center;padding:0}
.mini .bar{height:3px;background:var(--rule);position:absolute;left:0;right:0;bottom:0}
.mini .bar span{display:block;height:100%;background:var(--accent)}
/* The bar has to stand ON the home indicator's strip, not in it: the buttons keep their own height and
   the bar grows downward by whatever the phone reserves at the bottom. Without this the row of labels
   sat in the same band as the indicator on every iPhone. */
.tabs{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;height:var(--tab-h);
  padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:content-box;
  background:var(--paper);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr);z-index:31}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 10.5px var(--sans);color:var(--ink-3);letter-spacing:.02em}
.tabs button.on{color:var(--accent)}
.tabs svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}


/* ---------- an inferred stress mark is drawn paler than one the words themselves fix ---------- */
body.stress .vs .sy[data-inf="1"]::before{opacity:.45}
body.stress .vs .sy[data-bent="1"]::before{text-decoration:underline dotted;text-underline-offset:3px}
.spane .big .inf{opacity:.42}
.spane .big .bent,#p-sound .big .bent{text-decoration:underline dotted;text-underline-offset:4px}
.spane .big.alt,#p-sound .big.alt{margin-top:6px;opacity:.75}
.spane .big .diff,#p-sound .big .diff{opacity:1;text-decoration:underline dotted;text-underline-offset:4px}
.chip.soft{background:transparent;border:1px solid var(--rule);color:var(--ink-3)}

/* ---------- what comes next, at the foot of the poem ---------- */
.endcard{margin:38px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.endcard .done{font:500 12.5px var(--sans);color:var(--ink-3);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.endcard .done b{color:var(--ink-2);font-weight:600}
.endcard .done .tick{width:17px;height:17px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;font-size:10px;color:var(--ink-3);flex:none}
.endcard.lit .done .tick{background:var(--green);border-color:var(--green);color:var(--paper)}
.nextup{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--paper-2);border-radius:8px;padding:11px;overflow:hidden}
.nextup img{width:52px;height:52px;border-radius:5px;object-fit:cover;flex:none;border:1px solid var(--rule)}
.nextup .t{flex:1;min-width:0}
.nextup .t i{display:block;font-style:normal;font:500 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.nextup .t b{display:block;font:600 14.5px/1.3 var(--sans)}
.nextup .go{font-size:19px;color:var(--accent);flex:none;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;padding:0}
.endcard .small{font-size:12.5px;color:var(--ink-3)}

/* ---------- read / unread ---------- */
.row .tick{width:18px;flex:none;font-size:11px;color:var(--green);text-align:center}
.row.read .t b{color:var(--ink-3)}
.tbar #rPrev,.tbar #rNext{font-size:22px}

.seg{display:flex;gap:3px;margin:0 18px;background:var(--paper-2);border-radius:8px;padding:3px}
.seg button{flex:1;font:500 13px var(--sans);color:var(--ink-3);padding:8px 0;border-radius:6px;min-height:40px}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.segnote{margin:8px 18px 0;font-size:12px;color:var(--ink-3)}

.foot{padding:26px 18px 6px;font-size:11.5px;color:var(--ink-3);line-height:1.55;border-top:1px solid var(--rule);margin-top:30px}
.foot a{text-decoration:underline}

@media (prefers-reduced-motion:reduce){ #sheet{transition:none} .dots i{transition:none} }

/* ---------- the two wide entries on Home, cut like the category tiles ---------- */
.wides{display:flex;flex-direction:column;gap:9px;padding:18px 18px 0}
.wide{position:relative;height:84px;border-radius:8px;overflow:hidden;text-align:left;display:block;background:var(--paper-2)}
.wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(.8) brightness(.55)}
.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,13,.72) 0%,rgba(20,17,13,.38) 100%)}
.wide span{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 16px}
.wide b{font:600 17px/1.2 var(--serif);color:#fdfaf4;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.wide i{font-style:normal;font:500 12px var(--sans);color:rgba(253,250,244,.82);margin-top:3px;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- the survey ---------- */
.askprog{display:flex;gap:5px;padding:0 18px}
.askprog i{flex:1;height:3px;border-radius:2px;background:var(--rule)}
.askprog i.done{background:var(--accent);opacity:.5}
.askprog i.now{background:var(--accent)}
.askopts{display:flex;flex-direction:column;gap:9px;padding:6px 18px 0}
.askopts button{text-align:left;background:var(--paper-2);border-radius:8px;padding:14px 16px}
.askopts button:active{background:var(--paper-3)}
.askopts b{display:block;font:600 15.5px/1.3 var(--sans)}
.askopts i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.saidyou{padding:2px 18px 6px;font-size:12px;color:var(--ink-3)}
.pick{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--rule)}
.pick img{width:72px;height:72px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--rule)}
.pick .pb{flex:1;min-width:0}
.pick .pb b{display:block;font:600 16px/1.25 var(--serif)}
.pick .pb i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.pick .why{font-size:13px;line-height:1.5;color:var(--ink-2);margin:8px 0 0}
.pick .why b{display:inline;font-family:var(--sans);font-size:13px}
.pick .nums{font-size:11.5px;color:var(--ink-3);margin:6px 0 9px}
.btn.small{padding:7px 16px;font-size:13px}

/* ---------- the dictionary ---------- */
.sline .dw{border-radius:2px}
.sline .dw:active{background:var(--accent-soft)}
.dict h5{font:600 20px var(--serif);margin:0 0 8px;color:var(--ink)}
.dict .pos{font:italic 13px var(--serif);color:var(--ink-3);margin:0 0 6px}
.dict .ed{background:var(--paper-2);border-radius:6px;padding:9px 11px;margin:0 0 10px;font-size:13.5px}
.dict .etym{font-size:13px;color:var(--ink-3);margin-top:9px}
.dict .src{font-size:11.5px;color:var(--ink-3);margin-top:10px}
.dictloading{color:var(--ink-3);font-size:13px}

/* ---------- a chapter of the course ---------- */
.lesson{padding:8px 20px 40px;font-size:15.5px;line-height:1.66;color:var(--ink-2)}
.lesson p{margin:0 0 15px;max-width:38em}
.lesson b,.lesson strong{color:var(--ink)}
.lesson h3{font:600 17px/1.3 var(--serif);color:var(--ink);margin:26px 0 8px}
.lesson ul,.lesson ol{margin:0 0 15px;padding-left:20px}
.lesson li{margin:0 0 6px}
.lesson table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px;display:block;overflow-x:auto}
.lesson th,.lesson td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.lesson th{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lesson .ex,.lesson blockquote{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink);
  border-left:2px solid var(--accent-soft);padding:2px 0 2px 14px;margin:0 0 16px}
.lesson code,.lesson .mark{font:13px "IBM Plex Mono",ui-monospace,monospace;color:var(--accent-ink);background:var(--accent-soft);padding:1px 5px;border-radius:3px}
.lesson a{color:var(--accent);text-decoration:underline}
.lesson img{border-radius:6px}
.chnav{display:flex;gap:10px;justify-content:space-between;padding:0 20px 30px}
.chnav button{font:500 12.5px var(--sans);color:var(--accent);text-align:left;max-width:46%}

/* learn.html's own structures, laid out for a narrow screen. The markup is its; only the arrangement is ours. */
.lesson .feet,.lesson .grid,.lesson .cols{display:flex;flex-direction:column;gap:0}
.lesson .foot{padding:13px 0;border-bottom:1px solid var(--rule);margin:0}
.lesson .foot:last-child{border-bottom:0}
.lesson .foot .pat{font:600 12.5px "IBM Plex Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.14em;margin-bottom:4px}
.lesson .foot b{color:var(--ink);margin-right:.4em}
.lesson .foot span{color:var(--ink-2)}
.lesson .foot i{font-style:italic;color:var(--ink)}

/* double tap must reach us, so the browser cannot spend it on zoom */
.vs,.vs .l{touch-action:manipulation}
.tiphint{font:500 11.5px/1.45 var(--sans);color:var(--ink-3);margin:-4px 0 18px}

/* ---------- games: a tight grid, not eight near-identical cards down a rail ---------- */
.gbox{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 18px}
.gtile{position:relative;aspect-ratio:2.1;border-radius:7px;overflow:hidden;text-align:left;display:block;background:var(--paper-2)}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.5)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,13,.12),rgba(20,17,13,.6))}
.gtile span{position:absolute;left:11px;right:11px;bottom:9px;z-index:2;font:600 13.5px/1.2 var(--serif);color:#fdfaf4;text-shadow:0 1px 8px rgba(0,0,0,.65)}

/* ---------- reading history you can prune ---------- */
.shelf h2 .hclear,.hclear{float:right;font:500 11.5px var(--sans);color:var(--accent);letter-spacing:0;text-transform:none}
.row .t{background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.row .drop{width:28px;flex:none;font-size:19px;color:var(--ink-3);line-height:1}
.row .drop:active{color:var(--rose)}

/* ---------- swipe a row away ---------- */
.swipe{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);transition:height .2s,opacity .2s}
.swipe:last-child{border-bottom:0}
.swipe.gone{height:0!important;opacity:0}
.swipe .sw-card{border-bottom:0;position:relative;z-index:2;background:var(--paper);width:100%;touch-action:pan-y}
.swipe .sw-del{position:absolute;right:0;top:0;bottom:0;width:84px;z-index:1;background:var(--rose);
  color:#fff;font:600 13px var(--sans);display:grid;place-items:center}

/* the word being looked up, marked in the line above the definition */
.sheet #sline .dw.on{background:var(--mark,rgba(180,140,40,.22));border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.06)}

/* ---- listening while reading.
   The line being read is marked, not boxed: a rule down its left edge and a wash behind it, so the eye
   is led rather than interrupted. The controls sit above the poem and disappear when nothing is playing. */
#playerHost:empty{display:none}
.player{display:none;align-items:center;gap:12px;padding:9px 12px;margin:0 0 8px;
        border:1px solid var(--rule);border-radius:999px;background:var(--paper-2,transparent)}
.player.on{display:flex}
.player button{font-size:13px;line-height:1;width:30px;height:30px;border-radius:50%;
               border:1px solid var(--rule);color:var(--ink);flex:0 0 auto}
.player input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--accent);height:18px}
.player .at{font:500 11.5px/1 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.credit{font:400 11.5px/1.5 var(--sans);color:var(--ink-3);margin:0 0 14px;max-width:100%}
.credit a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.vs .l.now{background:var(--nowbg,rgba(180,140,40,.13));box-shadow:-3px 0 0 0 var(--accent)}
@media (prefers-color-scheme:dark){.vs .l.now{background:rgba(212,175,90,.14)}}
#listenBtn::before{border-radius:0;width:0;height:0;border:5px solid transparent;border-left-color:currentColor;border-right:0}

/* ---- what can be heard, and what has been kept.
   The mark is a note set small and quiet beside a title: enough to notice while scanning a list,
   not enough to compete with the title itself. */
.ear{font-size:.72em;color:var(--accent);margin-left:.45em;vertical-align:.08em;letter-spacing:0}
.actions .btn.listen{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.actions .icon.on{color:var(--accent)}
.fine.heard{margin-top:8px;color:var(--ink-3)}

.player .who{font:400 11px/1 var(--sans);color:var(--ink-3);max-width:34%;overflow:hidden;
             text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.player #playDone{font-size:15px;width:24px;height:24px;border:0;color:var(--ink-3);flex:0 0 auto}
.playnote{font:400 11.5px/1.5 var(--sans);color:var(--ink-3);margin:0 0 12px}
.playnote:empty{display:none}

/* The controls stay within reach while a reading plays, without covering the verse when it is not. */
/* No longer pinned over the verse: the bar along the bottom is where pause lives now. */
@media (prefers-color-scheme:dark){.player.live{background:var(--paper)}}

/* ---- what is playing, above the tabs, reachable from anywhere in the app */
/* It sits ON the tab bar, not near it. The variable was misspelled (--tabh for --tab-h), so it fell back
   to a guessed 56px that matched nothing and left a strip of the page showing underneath. In the reader
   there are no tabs to sit on -- the reader covers them -- so there it goes to the floor. Same width as
   the tabs, or the two do not line up on a wide screen. */
/* Above the tab bar -- ALL of it. The bar grows downward by the home indicator's strip, so an offset
   of --tab-h alone left this sitting 34px inside it on any phone that has one. Found by the UI
   audit, as a regression from making the bar respect that strip an hour earlier. */
#nowbar{position:fixed;left:0;right:0;bottom:calc(var(--tab-h,58px) + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;
        gap:10px;padding:9px 12px;max-width:560px;margin:0 auto;background:var(--paper);
        border-top:1px solid var(--rule);box-shadow:0 -10px 24px -20px rgba(0,0,0,.6)}
body.reading #nowbar{bottom:0;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
#nowbar[hidden]{display:none}
#nowbar .nb-prog{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule)}
#nowbar .nb-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
#nowbar .nb-open{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;text-align:left}
#nowbar img{width:34px;height:34px;border-radius:3px;object-fit:cover;flex:0 0 auto;background:var(--rule)}
#nowbar .nb-t{display:flex;flex-direction:column;min-width:0;gap:1px}
#nowbar .nb-t b{font:600 13px/1.25 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nowbar .nb-t i{font:400 11px/1.2 var(--sans);color:var(--ink-3);font-style:normal;
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nowbar .nb-play{font-size:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);
                 color:var(--ink);flex:0 0 auto}
#nowbar .nb-x{font-size:17px;width:26px;height:36px;color:var(--ink-3);flex:0 0 auto}
/* the reader is a full-screen layer; the bar sits above it too, and the verse ends clear of both */
#reader.on ~ #nowbar{z-index:80}
body.listening #rbody{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

/* ---- the now page: the thing itself, large, and everything either side of it */
#nowbar .nb-step{font-size:19px;width:26px;height:36px;color:var(--ink-2,var(--ink));flex:0 0 auto}
#nowbar .nb-play[hidden],#nowbar .nb-x[hidden]{display:none}
.nowart{padding:22px 18px 0;display:flex;justify-content:center}
.nowart img{width:min(62vw,240px);aspect-ratio:1;object-fit:cover;border-radius:5px;background:var(--rule)}
.nowhead{padding:18px 18px 4px;text-align:center}
.nowhead h1{font:600 21px/1.25 var(--serif);margin:0 0 5px;text-wrap:balance}
.nowhead p{font:400 12.5px/1.4 var(--sans);color:var(--ink-3);margin:0}
.nowseek{padding:14px 18px 0}
.nowseek input{width:100%;accent-color:var(--accent)}
.nowtimes{display:flex;justify-content:space-between;font:500 11px var(--sans);color:var(--ink-3);
          font-variant-numeric:tabular-nums;margin-top:2px}
.nowctl{display:flex;align-items:center;justify-content:center;gap:26px;padding:16px 0 6px}
.nowctl button{font-size:26px;color:var(--ink);width:44px;height:44px}
.nowctl button[disabled]{opacity:.25}
.nowctl .big{font-size:17px;width:58px;height:58px;border-radius:50%;border:1px solid var(--rule)}
#s-now .credit{padding:0 18px;text-align:center}
#s-now .row.here b{color:var(--accent)}

/* ---- hit targets. A control you have to aim at is a control that gets missed: everything tappable is
   at least 44px in the direction a thumb travels, even where the mark it draws is small. */
.tbar button{width:44px;height:44px;font-size:21px;margin:-5px 0}
.tbar{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px}
#nowbar .nb-step{font-size:24px;width:40px;height:44px}
#nowbar .nb-play{font-size:15px;width:44px;height:44px}
/* 44 square is the smallest target a thumb reliably hits, and this one is the way out of the bar. */
#nowbar .nb-x{font-size:19px;width:44px;height:44px}
#nowbar{gap:6px;padding-top:9px}
.player button{width:38px;height:38px}
.player #playDone{width:34px;height:38px;font-size:17px}
.strip>button{min-height:40px}
.sizer button{width:40px;height:40px;font-size:15px}
.nowctl button{width:56px;height:56px;font-size:30px}
.nowctl .big{width:64px;height:64px;font-size:19px}

/* the book's name inside a poem: part of the line, not a button stuck onto it */
/* the title in the reader's own bar is the way back into the book; nothing louder is needed */
#reader .tbar .mid.up{cursor:pointer}
#reader .tbar .mid b{overflow:hidden}
#reader .tbar .mid b span{display:inline-block;white-space:nowrap}
#reader .tbar .mid b.roll span{animation:rolltitle var(--rt,12s) ease-in-out infinite alternate}
@keyframes rolltitle{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--rd,0))}}
@media (prefers-reduced-motion:reduce){#reader .tbar .mid b.roll span{animation:none}}

/* A line opened in the sheet owns the bottom of the screen. The bar stands above everything, the sheet
   included, so a tapped line came out with its head cut off. Taken out of the layout rather than faded:
   a fade leaves it there for the length of the transition, and on a slow phone that is long enough to
   see the sheet arrive underneath it. */
body.sheeting #nowbar{display:none}
#rbody h1.tapup{cursor:pointer}

/* ---- the now page is the player opened out: nothing else on screen competes with it.
   The poem, its cover and its controls hold the first screenful; the book's contents begin below the
   fold, so a scroll reveals them rather than a list crowding the thing you are listening to. */
body.nowpage #nowbar{display:none}
/* The poem, its cover and its controls take the first screenful; the contents are pushed to the foot of
   it, so the top of the list just shows above the fold and a scroll brings the rest up. Laid out with
   margin-top:auto rather than a guessed height, so it lands right on any phone. */
/* --tab-h is the bar's own height and not the room it takes: on a phone with a home indicator the bar
   is that much taller again, and this reserved the bare 58 for it, so the last row of the queue sat
   under the navigation. Use the measured figure like every other screen rather than naming a number. */
body.nowpage #s-now{padding-bottom:var(--pad-bottom,calc(var(--tab-h,58px) + 12px))}
/* The player holds the first screen, less a strip of the contents showing at the foot so it is plain
   there is more below. A minimum height on the block rather than a pushed-down list, because a long
   book's contents are taller than the space left and there is then nothing to push with. */
#s-now .nowtop{min-height:calc(100vh - var(--tab-h,58px) - 92px);
  display:flex;flex-direction:column;justify-content:center}
#s-now .nowart{padding-top:10px}
#s-now .nowart img{width:min(76vw,300px)}
#s-now .nowctl{padding-bottom:8px}
#s-now .shelf{margin-top:auto;border-top:1px solid var(--rule);padding-top:16px}
#s-now .shelf h2{font-size:15px}
#s-now .shelf>p{margin-bottom:10px}

/* The sheet's own close, at its top corner: a full 44px target that sits clear of the line above it
   and of the tabs below, so getting out never means aiming between two lines of verse. */
.shead{position:relative;height:36px;flex:0 0 auto}
.shead .grab{position:absolute;left:50%;transform:translateX(-50%);top:9px;margin:0}
/* It has to read as a button. Set faint and tight into the corner it looked like a stray mark, which
   is no better than having no way out at all -- a control nobody can see is a control nobody uses. */
.shead{height:42px}
#sheetClose{position:absolute;top:4px;right:10px;width:34px;height:34px;z-index:3;
  font:400 19px/1 var(--sans);color:var(--ink-2,var(--ink));border:0;border-radius:50%;
  background:var(--chip,rgba(128,110,80,.16));display:flex;align-items:center;justify-content:center}
#sheetClose:active{background:var(--accent);color:var(--paper)}

/* the reference, in the sheet */
.citem h5{font:600 14px var(--sans);margin:0 0 10px}
.citem dl{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:0 0 10px}
.citem dt{font:500 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.citem dd{margin:0;font-size:13px;line-height:1.5}
.citem dd.mono{font-family:ui-monospace,"IBM Plex Mono",monospace;font-size:11.5px;word-break:break-all;color:var(--ink-2,var(--ink))}
.citem .small{color:var(--ink-3);font-size:11.5px;margin:0 0 12px}

/* Modals in the app.
   Every dialog the site opens -- sign in, your account, the edition note, reporting a mistake -- is
   markup from common.js carrying class="modal". Its styling has always lived in site.css, which the app
   does not load, so in here they rendered with position:static and no z-index: the dialog dropped into
   the page flow somewhere below the content instead of over it, and looked broken rather than absent.
   Sign in was simply unusable on a phone.

   Shaped like the app's own sheet rather than the desktop's centred box: it comes up from the bottom,
   is bounded so a long one scrolls inside itself, and keeps clear of the home indicator. */
/* Pinned to the VISUAL viewport, not the layout one. A dialog here is a bottom sheet, and when the
   keyboard comes up to type in it iOS does not shrink the layout viewport -- it leaves the page the
   same height and scrolls what you can see. A sheet anchored to the bottom of the layout viewport is
   then anchored behind the keyboard, and its top, which is where the heading and the field label are,
   goes off the top of the screen. app.js measures window.visualViewport and publishes it as these two
   variables; the fallbacks are what a browser without it, or a page with no keyboard open, gets. */
.modal{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100%);
  z-index:1600;background:rgba(20,17,13,.42);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal .box{background:var(--paper);width:100%;max-width:560px;
  border-radius:16px 16px 0 0;box-shadow:0 -8px 40px rgba(29,26,22,.28);
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  max-height:86%;overflow:auto;overscroll-behavior:contain}
.modal .box.tall{display:flex;flex-direction:column;padding:0;overflow:hidden}
.modal .box.tall > .mhead{padding:20px 20px 0;flex:none}
.modal .box.tall > .mbody{padding:0 20px 10px;overflow:auto;overscroll-behavior:contain;flex:1 1 auto}
.modal .box.tall > .mfoot{padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule);background:var(--paper);flex:none}
/* The inputs and buttons a dialog contains are desktop-sized; on a phone they need a thumb's worth of
   height and a font the browser will not zoom into on focus. */
.modal input,.modal select,.modal textarea{width:100%;font-size:16px;padding:11px 12px;
  border:1px solid var(--rule-2);border-radius:9px;background:var(--paper-2);color:var(--ink)}
.modal .btn,.modal button{min-height:44px}

/* 'Three more like these' under the survey's three books. It sits where a list row would, takes the
   full width so it is not left hanging beside the cards, and is lettered rather than filled -- the
   coloured button on this screen is 'Open it', and there should only be one of those. */
.askmore{display:block;width:100%;background:transparent;border:0;border-top:1px solid var(--rule);
  padding:16px 20px;text-align:center;color:var(--accent-ink);font:600 14.5px var(--sans);
  letter-spacing:.01em}
.askmore:active{background:var(--paper-2)}
/* A metre's name is a quiet dotted link that opens its note; site.css has the same rule, and the app
   does not load site.css, so it lives here too. */
.metre-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;min-height:0}
.metre-btn:hover{text-decoration-style:solid}
.metre-modal .beat{font:500 14px "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink-2);margin:6px 0}
.metre-modal .eg{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:16.5px;line-height:1.5;margin:8px 0 4px}