/* Joey Poetry.
   A page of verse should look like a page of verse: paper, a serif, room in
   the margin, and nothing moving. Everything the app adds -- the bar, the
   sheets -- keeps out of the way until it is asked for. */

:root {
  --paper: #f7f3ec;
  --ink: #23201b;
  --faint: #7d766a;
  --rule: #e2dacd;
  --lift: #fffdf8;
  --mark: #9a6a2f;
  --scale: 1;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Songti SC", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"], /* the phone's choice, unless overridden below */
:root[data-theme="auto"] {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --paper: #16151a; --ink: #ded8cd; --faint: #8d8679; --rule: #2e2c33;
    --lift: #201f26; --mark: #c79a5e;
  }
}
:root[data-theme="dark"] {
  --paper: #16151a; --ink: #ded8cd; --faint: #8d8679; --rule: #2e2c33;
  --lift: #201f26; --mark: #c79a5e;
}

* { box-sizing: border-box; }
/* The browser hides a [hidden] element by giving it display:none, and any
   display: of our own outranks it -- so .sheet's display:flex kept every
   sheet on the screen at once, the gloss stacked under the settings, and
   closing one did nothing visible. Everything the app hides, it hides by
   setting this attribute, so it is worth saying once and forcefully. */
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* ---- the bar ---------------------------------------------------------- */

/* Above the scrim, so that the way home is the way home from every page and
   from under every sheet. 32 and not 30: the sheets themselves are 31. */
#bar {
  position: fixed; inset: 0 0 auto 0; z-index: 32;
  display: flex; align-items: center; gap: 4px;
  padding: max(6px, env(safe-area-inset-top)) 6px 6px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
#where {
  flex: 1; min-width: 0; text-align: center; line-height: 1.2;
  /* 2px and not 4: with the title at 19px this block is exactly the 40px
     of the buttons beside it, so the bar stays the height the panes are
     padded to clear -- .pane's top padding is a written-down 62px and
     nothing measures the bar against it. */
  background: none; border: 0; padding: 2px 6px; color: inherit;
  font: inherit; cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
#where:active { background: var(--rule); }
/* The book's name, and on every other page the poet's. It was 15px, which
   is a label's size and not a title's -- and on the cover this line is the
   only place the app is named at all, the picture below it having been left
   without a heading of its own on purpose, so 15px read as a caption under
   somebody else's photograph. 19 is as much as the bar will hold: the row is
   40px of button, and this line at 1.2 with the era line under it at 11px
   comes to 36. */
#who { display: block; font-size: 19px; font-weight: 600;
       letter-spacing: -.01em;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#era { display: block; font-size: 11px; color: var(--faint);
       letter-spacing: .04em;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On the cover this line is empty. Hold its height anyway: an empty block
   collapses, and the header would shrink by a line the moment she swiped
   onto the cover and grow again when she swiped off it. */
#era:empty::before { content: "\00a0"; }
.icon {
  flex: none; width: 40px; height: 40px;
  border: 0; border-radius: 10px; background: none;
  color: var(--ink); font-size: 17px; font-family: var(--sans);
  cursor: pointer;
}
.icon:active { background: var(--rule); }
/* The stop, which is in the bar only while a voice is going. It is set in the
   mark's own colour so that it reads as something happening rather than as a
   third thing the bar has always had -- and [hidden] is spelled out because
   the bar is a flex row and a flex item that is only hidden by the UA sheet
   is one !important away from standing there greyed. */
#hush { color: var(--mark); font-size: 13px; letter-spacing: .06em; }
#hush[hidden] { display: none; }

/* ---- the pager -------------------------------------------------------- */

#pager { position: fixed; inset: 0; z-index: 1; touch-action: pan-y; }
.pane {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 62px) 22px
           calc(env(safe-area-inset-bottom) + 48px);
  will-change: transform;
}
#pager.dragging .pane { transition: none; }
.pane.settling { transition: transform .26s cubic-bezier(.22,.61,.36,1); }

/* ---- a page of verse -------------------------------------------------- */

.page { max-width: 34em; margin: 0 auto; }
.page h1 {
  font-family: var(--serif);
  font-size: calc(23px * var(--scale)); font-weight: 600;
  line-height: 1.25; margin: 6px 0 2px;
}
.page .byline {
  font-size: 12px; color: var(--faint); letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 20px;
}
/* The metre under the byline, which steps through the views: the poem's
   foot in a chip that looks pressable and says which view it is showing
   (› for none, then / ˘, feet, CAPS), and the rest of the tags beside it,
   plain. A bare line of faint text with '/ ˘' in front was not read as
   something to press -- Julie's *no indication there's anything to click!* */
.page .metre-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  margin: -14px 0 16px;
}
.page .metre-ask {
  display: inline-block; margin: 0; padding: 3px 12px;
  border: 1px solid var(--mark); border-radius: 999px;
  background: none; cursor: pointer; text-align: left; white-space: pre;
  font: calc(13px * var(--scale))/1.4 var(--sans); color: var(--mark);
  -webkit-tap-highlight-color: transparent;
}
.page .metre-ask.on {
  background: color-mix(in srgb, var(--mark) 14%, transparent);
}
.page .metre-rest {
  font: calc(13px * var(--scale))/1.4 var(--sans); color: var(--faint);
}
/* The marks over the syllables. The line is opened up so that they have
   room and do not sit on the descenders of the line above. */
.verse ruby { ruby-position: over; }
.verse rt {
  font: 600 .8em/1 var(--serif); color: var(--mark);
  letter-spacing: 0; user-select: none;
}
.verse .l .t:has(ruby) { line-height: 2.3; }
.verse .hy { color: var(--faint); }
.verse ruby:has(.foot) { position: relative; }
/* The bar before a foot, in the verse line: in a hyphen's place inside a
   word, before the word between two. */
.verse .bar { color: var(--mark); margin: 0 .12em; user-select: none; }
.verse .bar.between { margin: 0 .3em 0 0; }
.verse .foot {
  position: absolute; left: 0; top: -1.2em; white-space: nowrap;
  text-indent: 0; font: italic calc(11px * var(--scale))/1 var(--sans);
  color: var(--mark); user-select: none;
}

.verse {
  font-family: var(--serif);
  font-size: calc(17.5px * var(--scale)); line-height: 1.62;
  hyphens: none;
}
.verse { padding-left: 19px; }
.verse .l { display: block; position: relative; }
.verse .l .t { display: block; text-indent: -1.4em; padding-left: 1.4em; }
.verse .gap { height: .85em; }
/* A speaker on every line, standing in a margin of its own so that no line of
   verse is shortened by it and nothing is set between the lines. Faint, since
   there is one on every line of a poem that may run to five hundred: it is a
   thing to be found when it is wanted, not a column of arrows down the page.
   The mark is small, so the button around it is made a whole line high and out
   to the edge of its margin -- that is the part a thumb has to hit. */
.verse .say {
  position: absolute; left: -19px; top: .1em; width: 19px; height: 1.62em;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0; border: 0; background: none; color: var(--mark);
  font-size: .52em; line-height: 1; opacity: .3; cursor: pointer;
  transition: opacity .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.verse .say:active { opacity: 1; }
/* The line the recording has reached. The same mark that offers to read the
   line says which line is being read, filled instead of faint, and the line
   itself is lit -- enough to be found at a glance from across the room, not
   enough to be read as a colour the poem is printed in. */
.verse .l.now .say { opacity: 1; }
.verse .l.now .t {
  background: color-mix(in srgb, var(--mark) 13%, transparent);
  border-radius: 3px; box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--mark) 13%, transparent);
}
.verse .l .t { transition: background .2s; }

/* The Chinese crib, under the line it cribs. In the page always and shown
   only when she asks for it: turning it on is a class on the verse, so a
   line she has already found does not move under her while it is drawn.
   Set small, in the sans, and set in from the verse, so that at a glance
   down the page the poem is still the English and the crib is apparatus.

   A line can also be opened or closed on its own, against the grain of the
   poem's own switch -- zh-show lights one line while the rest stay off,
   zh-hide dims one while the rest stay on -- so the two selectors below are
   the whole of the four states and neither can be read alone. */
.verse .l .zh { display: none; }
.verse.cribbed .l:not(.zh-hide) .zh,
.verse .l.zh-show .zh {
  display: block; margin: 1px 0 6px 1.4em;
  font: 400 calc(13px * var(--scale))/1.5 var(--sans); color: var(--faint);
}
/* The per-line switch, in the same margin column as the speaker and below
   it rather than beside it -- .say is absolute against .l's own top, and
   this is absolute against it too, so neither depends on whether the crib
   line beneath them happens to be drawn. Faint until touched or on, the
   same restraint as the speaker mark it sits under. */
.verse .zh-toggle {
  position: absolute; left: -19px; top: 1.55em; width: 19px; height: 1.4em;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0; border: 0; background: none; color: var(--faint);
  font-size: .5em; line-height: 1; opacity: .28; cursor: pointer;
  transition: opacity .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.verse .zh-toggle:active { opacity: 1; }
.verse .zh-toggle.on { opacity: .55; color: var(--mark); }
.crib-on {
  display: block; margin: 0 0 14px; padding: 6px 11px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--lift);
  font: 500 12.5px/1 var(--sans); color: var(--faint); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.crib-on.on { border-color: var(--mark); color: var(--mark); }
/* Bloom's marker: the word next to it is the one his margin explains. It has
   to be visible enough to be a promise and quiet enough not to be read as
   punctuation, so it is set small, raised, and in the gloss's own grey.

   It is pressed, so it needs to be catchable. The mark itself is about four
   pixels wide, which is under any reasonable thumb; the padding widens the
   target without moving the verse, since it is symmetric and the negative
   margin takes back the space it claims. */
.deg {
  font-size: .62em; vertical-align: .45em; color: var(--mark);
  cursor: pointer; padding: .5em .45em; margin: -.5em -.35em;
  -webkit-tap-highlight-color: transparent;
}
.deg[data-g], .deg.loose { text-decoration: none; }
.deg.loose { margin-left: .2em; }
.deg:active { color: var(--ink); }

.verse .l.heading { font-variant: small-caps; color: var(--faint);
                    margin: 1.2em 0 .3em; }
/* The hanging indent lives on .t, so it has to be undone there too -- set on
   the row alone a heading still hung, and 'PART I' sat a space left of the
   verse it heads. */
.verse .l.heading .t { text-indent: 0; padding-left: 0; }

/* The rest of the printed title, under the title: 'A Ballad', 'Or, a Vision
   in a Dream. A Fragment.' Set in the serif so it reads as part of the head
   of the poem rather than as apparatus, and lighter so the title still is
   the title. */
.page .subtitle {
  font-family: var(--serif); font-size: calc(16px * var(--scale));
  font-style: italic; line-height: 1.35; color: var(--faint);
  margin: 0 0 4px;
}
/* The epigraph, which stands between the title and the first line and is not
   in the poem's voice -- Plato's Greek over Adonais, Wordsworth quoting
   himself over the Ode. Indented and smaller, the way a book sets one. */
.page .epigraph {
  font-family: var(--serif); font-size: calc(15px * var(--scale));
  line-height: 1.5; color: var(--faint);
  margin: 0 0 20px; padding-left: 1.6em;
}
/* Hung, like the verse: an epigraph is usually lines of verse itself, and on
   a phone half of them wrap. Set flush, a wrapped tail begins exactly where a
   new line begins and the ten lines of Coleridge above Kubla Khan read as
   fourteen. */
.page .epigraph .l { display: block; text-indent: -1.1em; padding-left: 1.1em; }
/* The source line under it, where the book prints one: PLATO, HORACE. */
.page .epigraph .l.src { font-variant: small-caps; letter-spacing: .04em; }

/* A word is the thing you touch. It carries no decoration until it has been
   touched, or the poem would read as a page of links. */
.w { cursor: pointer; border-radius: 3px; }
.w.on { background: color-mix(in srgb, var(--mark) 22%, transparent); }
.w.done { text-decoration: underline dotted
          color-mix(in srgb, var(--mark) 55%, transparent); text-underline-offset: 3px; }

/* ---- the introduction ------------------------------------------------- */

.intro { font-family: var(--serif); font-size: calc(16.5px * var(--scale));
         line-height: 1.66; }
.intro p { margin: 0 0 1em; }
/* One paragraph and its translation, kept together. The button is small and
   sits at the paragraph's foot rather than beside it, so that turning one
   paragraph over does not shift the rest of the page sideways. */
.intro .para { margin: 0 0 1.1em; }
.intro .para p { margin: 0; }
.intro .para .turn {
  margin-top: .55em; padding-left: .8em;
  border-left: 2px solid var(--rule); color: var(--faint);
}
.intro .para .turn[lang="zh"] { font-size: .95em; line-height: 1.75; }
.turn-b {
  margin-top: .35em; padding: 2px 9px; border: 1px solid var(--rule);
  border-radius: 999px; background: none; color: var(--faint);
  font: 500 11.5px/1.5 var(--sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.turn-b.open { color: var(--mark); border-color: var(--mark); }
.intro .quote {
  margin: 1.2em 0; padding-left: 1em; border-left: 2px solid var(--rule);
  color: var(--faint); white-space: pre-line;
}
/* Bloom quotes critics as well as poets. Prose has no line breaks of its own
   worth keeping -- the ones on the page are just where the column ended --
   so it is allowed to wrap to the screen it is being read on. */
.intro .quote.prose { white-space: normal; }
/* The negative top margin here was pulling the dates up into the poet's name
   and printing the two on top of each other. h1 already leaves only 2px. */
.dates { font-size: 13px; color: var(--faint); margin: 0 0 20px; }
/* Said only on the pages where Bloom's introduction is not that poet's own. */
.from-essay {
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
/* The pages that are ours and not his. Set as a rule down the left rather
   than in the byline's small caps: it has to be legible as a statement, since
   what it says is that Bloom did not choose this, and it has to be quiet
   enough that it is not the first thing on the page. */
.not-bloom {
  font-size: 12.5px; line-height: 1.45; color: var(--faint);
  border-left: 2px solid var(--rule); padding: 1px 0 1px 9px;
  margin: -8px 0 18px;
}
.not-bloom[lang="zh"] { font-size: 13px; letter-spacing: .02em; }
.contents-list { margin-top: 26px; border-top: 1px solid var(--rule); }
.contents-list button {
  display: block; width: 100%; text-align: left; padding: 11px 2px;
  border: 0; border-bottom: 1px solid var(--rule); background: none;
  color: var(--ink); font-family: var(--serif);
  font-size: calc(15.5px * var(--scale)); cursor: pointer;
}
.contents-list small { color: var(--faint); font-family: var(--sans);
                       font-size: 11px; }

/* Bloom's headnote, and the poet's own preface where the book prints one.
   Shut until she asks: they run to four thousand characters, and the poem is
   what she came for. */
.note { margin: 0 0 18px; }
.note summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font: 500 12px/1.4 var(--sans); letter-spacing: .04em;
  text-transform: uppercase; color: var(--mark);
  padding: 8px 0; list-style: none;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: '＋'; margin-left: auto; font-size: 14px; }
.note[open] summary::after { content: '−'; }
.note p, .note .quote {
  margin: 0 0 4px; padding: 2px 0 12px;
  font-family: var(--serif);
  font-size: calc(14.5px * var(--scale)); line-height: 1.65;
  color: var(--faint);
}
/* The rule closes the note off from the poem, so it belongs under the last
   block and not under every one of them. A note that is a single paragraph
   is that paragraph, and looks exactly as it did. */
.note > :last-child { border-bottom: 1px solid var(--rule); }
/* Verse Bloom quotes, set as verse: the breaks are kept, and the rule down
   the left says whose words these are without a caption saying so. */
.note .quote {
  margin: .2em 0 1em; padding: 0 0 0 1em;
  border-left: 2px solid var(--rule); white-space: pre-line;
}
.note .quote.prose { white-space: normal; }
.note > .quote:last-child { padding-bottom: 12px; }

/* ---- the recording ----------------------------------------------------- */

/* Only on poems that have one, and set between the byline and the first line
   so that it reads as part of the poem's own furniture rather than a control
   bolted to the app. */
.listen {
  margin: 2px 0 20px; padding: 10px 12px 11px;
  background: var(--lift); border: 1px solid var(--rule); border-radius: 10px;
}
.listen-row { display: flex; align-items: center; gap: 11px; }
.play {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--mark); background: none; color: var(--mark);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.play:active { background: color-mix(in srgb, var(--mark) 18%, transparent); }
.listen-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.listen-what b {
  font: 500 13px/1.3 var(--sans); color: var(--ink); letter-spacing: .01em;
}
.listen-what small { font: 400 11.5px/1.3 var(--sans); color: var(--faint); }
.listen-bar {
  margin-top: 10px; height: 3px; border-radius: 2px; background: var(--rule);
  cursor: pointer;
}
.listen-bar i { display: block; height: 100%; width: 0; border-radius: 2px;
                background: var(--mark); }
.listen-at { display: block; margin-top: 5px; min-height: 13px;
             font: 400 11px/1.2 var(--sans); color: var(--faint); }
.listen-note {
  margin: 8px 0 0; font-family: var(--serif);
  font-size: calc(13px * var(--scale)); line-height: 1.6; color: var(--faint);
}

/* ---- progress --------------------------------------------------------- */

#progress {
  position: fixed; left: 0; right: 0; z-index: 20;
  bottom: env(safe-area-inset-bottom); height: 2px; background: var(--rule);
}
#progress-fill { height: 100%; width: 0; background: var(--mark);
                 transition: width .2s; }

/* ---- sheets ----------------------------------------------------------- */

/* Over the page, and under the header. The header is the way home from
   anywhere, and with a sheet up it was showing through the dark and doing
   nothing when it was pressed -- which is worse than being hidden, because
   the title is still legible and still looks like the button it is. It stays
   live and stays bright: pressing it shuts whatever is open and goes home.
   Everything else under the scrim is closed by pressing it, as before. */
#scrim { position: fixed; inset: 0; z-index: 30; background: #0007; }
.sheet {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--lift); border-top: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise .2s cubic-bezier(.22,.61,.36,1);
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 8px 12px 18px; border-bottom: 1px solid var(--rule);
}
.sheet-head h2 { flex: 1; margin: 0; font-size: 17px; }
.gloss .sheet-head h2 { font-family: var(--serif); font-size: 21px; }
.sheet-body { overflow-y: auto; padding: 14px 18px 22px; }

#gloss-en { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
#gloss-zh { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
#reveal {
  margin-top: 16px; padding: 10px 14px; width: 100%;
  border: 1px solid var(--rule); border-radius: 10px;
  background: none; color: var(--ink); font-size: 14px; cursor: pointer;
}
#sentence {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--mark) 10%, transparent);
  font-size: 15px; line-height: 1.65;
}
#sentence .src { display: block; font-family: var(--serif);
                 color: var(--faint); margin-bottom: 8px; white-space: pre-line; }

.pref { display: flex; align-items: center; gap: 14px; padding: 12px 0;
        border-bottom: 1px solid var(--rule); font-size: 15px; }
.pref span { flex: 1; display: flex; flex-direction: column; }
.pref small { color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.pref select, .pref input { font-size: 15px; font-family: var(--sans);
                            color: var(--ink); background: var(--paper);
                            border: 1px solid var(--rule); border-radius: 8px;
                            padding: 6px 8px; }

#toc-body h3 { margin: 18px 0 6px; font-size: 12px; letter-spacing: .08em;
               text-transform: uppercase; color: var(--faint);
               display: flex; align-items: baseline; gap: 10px;
               position: sticky; top: 0; background: var(--lift);
               padding: 6px 0; z-index: 1; }
#toc-body h3 button.go {
  margin-left: auto; width: auto; border: 0; border-bottom: 0;
  padding: 0; font: inherit; color: var(--mark); letter-spacing: .08em;
}
/* The nine sections, across the top, so the far end of the book is one press
   away instead of a hundred and four rows of scrolling away. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.chips button {
  width: auto; padding: 5px 10px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--paper); color: var(--faint);
  font: 500 12px/1.3 var(--sans); cursor: pointer; text-align: center;
}
.chips button.here { color: var(--mark); border-color: var(--mark); }
/* Rhythm, length, rhyme and form over the search results, as chips and not
   rows: the row style below would otherwise make each one full width. */
/* One line to a row: *make it one line.* A row longer than the phone
   slides sideways rather than wrapping onto a second. */
#find-body .chips { display: flex; flex-wrap: nowrap; gap: 6px;
  margin: 4px 0 6px; align-items: center; overflow-x: auto;
  scrollbar-width: none; }
#find-body .chips::-webkit-scrollbar { display: none; }
#find-body .chips button { flex: none; }
/* The name of the row, on a line of its own above its chips. */
#find-body .kind {
  margin-top: 12px; color: var(--faint);
  font: 600 11px/1.3 var(--sans); letter-spacing: .04em;
}
#find-body .chips button {
  display: inline-block; width: auto; padding: 5px 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--faint);
  font: 500 12px/1.3 var(--sans); text-align: center;
}
#find-body .chips button.here { color: var(--mark); border-color: var(--mark); }
/* Tapped twice: only this, so bold and filled and not just outlined. */
#find-body .chips button.only {
  background: var(--mark); color: var(--paper); font-weight: 700;
}
/* A found poem is listed the way the contents lists one, because it is the
   same list arrived at from the other end, and a row that looked different
   would have to be learnt twice. */
#toc-body button, #find-body button {
  display: flex; width: 100%; gap: 10px; align-items: baseline;
  padding: 10px 2px; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); font-size: 15.5px; text-align: left;
  font-family: var(--serif); cursor: pointer;
}
#toc-body button small, #find-body button small {
  margin-left: auto; color: var(--faint);
  font-family: var(--sans); font-size: 11px; white-space: nowrap; }
#toc-body button.here { color: var(--mark); font-weight: 600; }
/* The line that answered, under a title that does not hold what she typed.
   It takes a whole row of its own -- hence the wrap, which the contents rows
   never need because they are only ever two items -- and it is set in the
   book's own face, because it is a line of the poem and not a label about
   one. Clipped to one line: some of these are Whitman's. */
#find-body button { flex-wrap: wrap; }
#find-body button .line {
  flex-basis: 100%; margin-top: 3px;
  font-family: var(--serif); font-size: 12.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The search box. It sits where the sheet's heading sits, and takes the whole
   of that line: the sheet is named by the thing she came to it to do. */
#find-q {
  flex: 1; min-width: 0; font: 16px/1.3 var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px;
  -webkit-appearance: none;
}
/* 16px above is not a taste: iOS zooms the page in on any input smaller than
   that, and the zoom stays after the keyboard has gone. */
#find-q:focus { outline: 2px solid var(--mark); outline-offset: -1px; }
/* What the sheet says when there is nothing to list -- before she has typed,
   when nothing matches, and when the list was cut short. */
.nothing { margin: 14px 2px; color: var(--faint); font-size: 13px;
           line-height: 1.6; }

/* The badge that separates a reading from a definition. A word note is the
   sense the poem wants, and she should be able to see at a glance which of
   the two she is being shown. */
.here-badge {
  font: 600 calc(0.7rem * var(--scale)) / 1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mark);
  margin: 0 0 .35rem;
}

/* ---- the cover -------------------------------------------------------- */

/* A title page, and it should feel like one: the type does the work and
   nothing is boxed. It fills the screen: the title, who it is for and who
   reads it, then the doors. */
.cover {
  min-height: calc(100dvh - env(safe-area-inset-top) - 150px);
  display: flex; flex-direction: column;
  padding-top: 2vh;
}

/* The picture carries the top of the page, so it is given its own width and
   its height is stated in the markup: a hero that arrives late and shoves the
   title down is worse than no hero. */
.hero {
  display: block; width: 100%; height: auto;
  border-radius: 14px; margin: 0 0 20px;
  background: var(--rule);
}
.cover h1 {
  font-size: calc(38px * var(--scale));
  letter-spacing: -.015em;
  margin: 0 0 18px;
}
.cover-book {
  font-family: var(--serif);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.cover-book .t {
  font-size: calc(19px * var(--scale)); line-height: 1.3;
}
/* The credit in the other face. Set in the same serif it read as more of the
   title, wrapped; in sans it reads as what it is, the line under the title. */
.cover-book .s {
  font-family: var(--sans);
  font-size: calc(13.5px * var(--scale)); line-height: 1.45;
  color: var(--faint); margin-top: 10px;
}

/* The way in. Pushed down by the auto margin so it sits near the middle of
   the screen however tall the phone is, rather than crowding the title. */
.cover-go { margin: 34px 0 auto; display: grid; gap: 10px; }
.cover-go button {
  font: inherit; font-family: var(--sans);
  font-size: 15px; font-weight: 600; text-align: left;
  padding: 15px 17px; border-radius: 14px;
  border: 1px solid var(--rule); background: var(--lift); color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 32, 27, .05);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cover-go button.primary {
  /* The one warm thing on the page, and the only button that is filled: it is
     the one press that takes her back to where she stopped reading. */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--mark) 88%, #fff) 0%, var(--mark) 100%);
  border-color: color-mix(in srgb, var(--mark) 80%, #000);
  color: #fffdf8;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mark) 28%, transparent);
}
.cover-go small {
  display: block; font-size: 12.5px; font-weight: 400;
  opacity: .8; margin-top: 4px;
}

/* A door into each of the nine, named by who is behind it. Two columns,
   because nine full-width rows push everything else off the cover. */
.cover-secs {
  margin-top: 28px; display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cover-secs button {
  position: relative; overflow: hidden;
  text-align: left; padding: 11px 13px 11px 15px;
  border: 1px solid var(--rule);
  border-radius: 12px; background: var(--lift); color: var(--ink);
  font: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 32, 27, .04);
  transition: transform .12s ease, box-shadow .12s ease,
              border-color .12s ease;
}
/* A gold edge down the inside of each door, the same gold as the gloss
   marker: nine identical grey rectangles read as a form to be filled in, and
   one warm stripe is enough to make them doors. */
.cover-secs button::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--mark); opacity: .55;
}
.cover-secs button b {
  display: block; font: 600 13.5px/1.25 var(--sans); letter-spacing: .01em;
}
.cover-secs button small {
  display: block; margin-top: 4px; color: var(--faint);
  font: 400 11.5px/1.4 var(--sans);
}

/* Both sets press the same way: down and in, and no hover state at all --
   she is reading this on a phone, where hover is a mouse's idea. */
.cover-go button:active, .cover-secs button:active {
  transform: translateY(1px) scale(.995);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.cover-secs button:active { border-color: var(--mark); }
.cover-go button.primary:active { filter: brightness(1.06); }
@media (hover: hover) {
  .cover-go button:hover, .cover-secs button:hover {
    box-shadow: 0 3px 10px rgba(35, 32, 27, .08);
  }
  .cover-secs button:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-go button, .cover-secs button { transition: none; }
}

.cover-size {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-top: 30px;
}
/* When this copy of app.js was built, at the very foot of the cover and
   quieter than anything else on it. It is not for her. It is for the person
   she is describing a fault to, who otherwise cannot tell a bug from a cached
   copy of last week's file -- and pressing it opens the gesture readout,
   which is the same question asked of the touch instead of the build. */
/* The same stamp in Settings, where it is actually found: a plain line under
   About, quiet but not hidden. */
.built-line {
  display: block; width: 100%; margin-top: 14px; padding: 10px 0;
  background: none; border: 0; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
  color: var(--faint); text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cover-built {
  display: block; margin: 14px auto 0; padding: 4px 8px;
  background: none; border: 0; font-family: var(--sans); font-size: 11px;
  letter-spacing: .04em; color: var(--faint); opacity: .55;
  -webkit-tap-highlight-color: transparent;
}
/* The readout itself. pointer-events: none is load-bearing rather than tidy:
   it sits over the pager, and a panel that measures a swipe must not be a
   thing the swipe can land on. */
#probe {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40;
  pointer-events: none; white-space: pre-line; border-radius: 8px;
  padding: 8px 10px; background: var(--lift); border: 1px solid var(--rule);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  line-height: 1.5; color: var(--ink); opacity: .92;
}
/* A button that is a line of text: About, in Settings. */
.plain {
  display: block; width: 100%; margin: 4px 0 0; padding: 8px 0;
  background: none; border: 0; color: var(--mark); cursor: pointer;
  font: 500 13px/1.4 var(--sans); text-align: left;
}
#prefs .plain { border-top: 1px solid var(--rule); margin-top: 10px;
                padding-top: 14px; }

.sheet-body.about p { margin: 0 0 .9em; font-size: 14px; line-height: 1.6;
                      color: var(--faint); font-family: var(--sans); }
.sheet-body.about p.t { color: var(--ink); font-family: var(--serif);
                        font-size: 18px; margin-bottom: .2em; }
.sheet-body.about p.s { margin-bottom: 1.4em; }

:root[data-theme="dark"] .hero { filter: brightness(.82) saturate(.92); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .hero { filter: brightness(.82) saturate(.92); }
}

/* <<word-review */
/* ---- Word Review --------------------------------------------------------
   Munro's review screen in this book's paper and gold: the same card, the
   same four grades with the same coloured edges, the same "N left". No title
   and no introduction -- the word is the first thing on the screen. */
.wr-add { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.wr-add button {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mark); background: none; color: var(--mark);
  font: 600 14px/1.2 var(--sans);
}
.wr-note { color: var(--faint); font: 14px/1.2 var(--sans); }

#wr {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--paper); color: var(--ink); font-family: var(--sans);
}
#wr .wr-in {
  max-width: 34rem; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 4px) 16px
           calc(env(safe-area-inset-bottom) + 40px);
}
#wr .rtop { display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0 14px; }
#wr .rtop span { color: var(--faint); font-size: 14px; }
#wr .wr-back { font: 600 15px/1 var(--sans); color: var(--mark); background: none;
               border: 0; padding: 8px 0; cursor: pointer; }
#wr .rcard {
  background: var(--lift); border: 1px solid var(--rule); border-radius: 14px;
  padding: 26px 20px; text-align: center;
  box-shadow: 0 1px 2px rgba(35, 32, 27, .05);
}
#wr .rword { font: 600 2.2rem/1.2 var(--serif); margin: .1em 0 .3em;
             word-break: break-word; }
#wr .wr-answer { border-top: 1px solid var(--rule); margin-top: 12px;
                 padding-top: 12px; }
#wr .rzh { font-size: 1.5rem; line-height: 1.4; color: var(--mark); }
#wr .ren { font-size: 15px; line-height: 1.5; color: var(--ink); }
#wr .rex { text-align: left; margin-top: 18px; }
#wr .rex .en { font: italic 18px/1.6 var(--serif); margin: 0 0 .3em; }
#wr .rex mark.hit {
  font-style: normal; font-weight: 600; color: var(--ink); border-radius: 3px;
  background: color-mix(in srgb, var(--mark) 24%, transparent); padding: 0 2px;
}
#wr .rex .zh { font-size: 15px; line-height: 1.7; color: var(--faint); margin: 0; }
#wr .wr-video { margin-top: 14px; aspect-ratio: 16 / 9; border-radius: 10px;
                overflow: hidden; background: #000; color: #fff; font-size: 14px; }
#wr .wr-video iframe, #wr .wr-video > div { width: 100%; height: 100%; display: block; }
#wr .rrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
            margin-top: 16px; }
#wr .rrow button {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font: 14px/1.2 var(--sans);
}
#wr .ractions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
                margin-top: 16px; }
#wr .ract {
  font: 600 15px/1.2 var(--sans); border-radius: 12px; padding: 12px 4px;
  cursor: pointer; border: 1px solid var(--rule); background: var(--lift);
  color: var(--ink);
}
#wr .ract span { display: block; color: var(--faint); font-size: 12px;
                 font-weight: 400; margin-top: 3px; }
#wr .ract.show { grid-column: 1 / -1; border-color: var(--mark); padding: 14px; }
#wr .ract.again { border-color: #a8473a; }
#wr .ract.hard  { border-color: #a8873a; }
#wr .ract.good  { border-color: #3f8a5c; }
#wr .ract.easy  { border-color: #3a7aa8; }
#wr .rdone { text-align: center; padding: 60px 0; }
#wr .rdone .m { font: 600 20px/1.4 var(--serif); margin: 0 0 8px; }
#wr .rdone .s { color: var(--faint); margin: 0; }
/* The cover's own .cover-go is pushed to the middle of the screen by an auto
   margin, which was for one button standing alone; here it opened a hole
   between the door and the sections. */
.cover-go.wr-go { margin: 28px 0 0; }
/* word-review>> */