/* Pering 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;
}
/* Light or dark is the phone's choice and nothing else's. There was a
   `data-theme` on the root and a select in a Settings sheet to set it, and
   the sheet is gone -- *settings doesn't need to exist* -- so the one theme
   is the one the select defaulted to, follow the phone. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --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;
  /* No gap, and the buttons are 34 wide and not 40 (`.icon` below): *shrink
     the distance between the icons*. Three glyphs at 44px pitch is a row
     with air in it; at 34 the three read as one group at each end, which is
     what three-and-three means. */
  display: flex; align-items: center; gap: 0;
  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);
  /* Because it is taken away on the cover and given back when she scrolls off
     the painting. Without this the band snaps in a frame under her thumb. */
  transition: background .18s linear, border-color .18s linear;
}

/* ---- the cover has no band, and nothing standing on it ---------------- */

/* Over the painting the bar is empty. The strip of paper behind it is what a
   bar is for on a page of verse -- it holds the controls off the text -- and
   over a picture it is an inch cut off the top of the picture with a hairline
   drawn across the girl's hair. And the glyphs that stood in its two corners
   are gone as well. They were there on a measurement -- scanning hero.webp
   row by row for runs of flat cream, the top of the picture is plain wash
   from the left edge to 10% of the width and from 86% to the right edge and
   nowhere else, so a corner holds one 40px glyph and the middle holds none --
   and the measurement was true and answered the wrong question. *I have asked
   repeatedly for all functions to be easter eggs in the hero.* A glyph on a
   painting is a control on a painting, however plain the wash under it.

   So every way in is on the paint, on something painted, and the four rules
   at the foot of the cover section below say where: contents on the book in
   her hands, About on the fawn's nose, a poem at random on her own nose, and
   find on the butterfly. None of the six is lost,
   because the same six stand in the bar on every other page of the book, and
   the bar comes back the moment she scrolls off the painting to the doors:
   app.js sets `scrolled` off the pane's own scrollTop. */
/* Pering's cover is a photograph with nothing hidden on it, so the bar is
   drawn there as on every other page; the rules that hid it are in git. */

/* Nothing stands over the painting, and for a while one thing did: a stop,
   while a voice sounded, in the right corner, in a fixed dark ink with a
   cream halo so that it read on the wash in dark theme too. It is gone with
   the stop itself, below at the right-hand group, and the ink and the halo
   are in git log if anything is ever to be drawn on the picture again --
   which nothing is to be.

   The title in the middle says 'Pering Poetry' and is the way home. The cover is
   home, so on this page it is a button that does nothing -- the rule #home is
   already held to -- and over the painting it is a caption stamped
   on a girl's head. `display: none` and not `visibility: hidden`, and on the
   whole of the cover rather than only its unscrolled top, because a button
   that does nothing does nothing after she has scrolled too. */
body.on-cover #where { display: none; }

/* Which takes away the one thing that keeps the two groups apart. Off the
   cover the title sits between them and is `flex: 1`, so the three on the
   right are on the right because the title is in the way; on the scrolled
   cover the title is hidden and the bar is `flex-start`, and the screenshot
   showed all five glyphs packed into the left corner in a row -- ☰ ⌕ Aa ⓘ ⚄
   -- with the right half of the strip empty. So the first of the right-hand
   group carries the margin, and that is the − step now. */
body.on-cover #smaller { margin-left: auto; }

/* Off the cover the right-hand group is the three that are not ways through
   the book -- the type size, what the book is, a poem at random, in that
   order, the type size being two glyphs wide -- and nothing joins it. A
   ❚❚ did, whenever a voice was sounding: for a day in the die's place
   (`body.sounding #surprise { display: none }`), which made the die a
   different button at different moments -- *random poem should always be
   random poem not pause* -- and then for a day beside the die, as one more.
   *pause should not appear beside it! there's already a pause bar below*:
   the listen bar under the poem's title is the play and the pause of the
   reading, and the header's was the same control a second time on the one
   screen, the fault `.onward` had before it went. So the row is the same
   width at every moment and the title between the groups has its 140px on a
   390px phone whatever is sounding. The bar's stop was there for the long
   poem, where the listen bar has scrolled off the top; that is a scroll
   back, and the owner has weighed it. */

/* And the picture runs to the top edge. The 62px below is the bar's height;
   with no bar there is nothing to clear, and a picture that stops an inch
   short of the top with nothing in the gap reads as one that failed to load
   above itself. */
.pane.is-cover { padding-top: 0; }
#where {
  flex: 1; min-width: 0; text-align: center; line-height: 1.2;
  /* 2px and not 4: with the title at 19px this block was exactly the 40px
     of the buttons beside it; at 16 it is under, and the buttons hold the
     row at 40, 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 was as much as the bar would hold, and it
   was more than the column would: between three buttons at each end this
   line has 162px on a 390px phone, and 'Nursery Rhymes' at 19 came out as
   'Nursery R...' -- *shrink the font on the section title?* At 16 it fits,
   and so does every section name in the book; a poet's name may still be
   cut, and the ellipsis says so. */
#who { display: block; font-size: 16px; 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"; }
/* 34 wide and 40 high. The height is what the panes are padded to clear
   and does not move; the width is the pitch of the row, and 40 with a 4px
   gap put a thumb's width of nothing between glyphs that belong together.
   34 is still a whole glyph's worth of button either side of the mark. */
.icon {
  flex: none; width: 34px; 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); }
/* − and +, the type size. Aa stood between them for one build as a label
   that pressed nothing -- *+-, NO NEED FOR Aa!* -- and two signs either
   side of nothing read as what they are without it. The steps are narrower
   than a glyph's button because they are a pair and not two things: at 28
   the two together are under the width of two of the others, and the row
   still holds the title between the groups on a 390px phone. A step with
   nowhere left to go is greyed and stays in the row: hidden, it would move
   its partner. Flex-centred so the sign sits on the row's own axis. */
.icon.step { display: flex; align-items: center; justify-content: center;
             width: 28px; font-size: 19px; line-height: 1; }
.icon.step:disabled { color: var(--faint); opacity: .45; cursor: default; }
.icon.step:disabled:active { background: none; }
/* The die is drawn small inside its own em -- it is a glyph of a whole object
   where the marks either side of it are strokes, so at the row's 17px it reads
   as a fleck rather than as a button, and the screenshot is where that shows.
   Sized up until its face is the height of the bar of the contents mark beside
   it, which is what makes the six read as one row. */
#surprise { font-size: 22px; }

/* ---- 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;
}
.page .byline { margin-bottom: 8px; }
/* The question under the byline, and the way to the poet's page. It is a
   line of words in ink and not a rule under the name: the name carried a
   dotted underline for one build and *let the reader know it's there!* --
   a mark is not a message. Set in the poem's face, one size under the
   verse, so it reads as the page speaking and not as a control on it; the
   tap target is padded out, not drawn. */
.page .poet-ask {
  display: block; margin: 0 0 20px; padding: 6px 0; border: 0;
  background: none; cursor: pointer; text-align: left;
  font: italic calc(15px * var(--scale))/1.4 var(--serif); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.page .poet-ask::after { content: '  ›'; color: var(--faint); }
/* The metre under the byline, which turns the marks on and off. Set small
   like the byline, with the two marks in front of it as the sign of what a
   tap does; in the mark colour when they are on. */
.page .metre-ask {
  display: inline-block; margin: 4px 0 2px; 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-box { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.page .metre-rest {
  font: calc(13px * var(--scale))/1.4 var(--sans); color: var(--faint);
}
.page .metre-ask.on {
  background: color-mix(in srgb, var(--mark) 14%, transparent);
}
/* 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;
}
.page .poet-ask:active { color: var(--faint); }
/* The poet's page. The paragraph is set in the poem's face, because it is
   there to be read and not consulted; the list under it is the section
   card's list, and the small line under each title is the subject it is in. */
#poet .bio {
  font-family: var(--serif); font-size: calc(16px * var(--scale));
  line-height: 1.62; margin: 0 0 18px; color: var(--ink);
}
#poet .dates { margin: 0 0 10px; }
#poet .section-list { margin-top: 0; }
.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 gloss mark: the word next to it is the one a printed edition explains
   in its margin. 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; }

/* Gutenberg marks italics with underscores and the parser leaves them in the
   line, because nothing downstream edits the text. They are markup, so the
   app renders them instead of printing them -- 202 lines in 71 poems reached
   her reading 'What a _great_ sea that would be!'. */
.em { font-style: italic; }

/* ---- 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);
}
.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;
}
/* A note may quote prose as well as verse. 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; }
/* Under a section heading this counts what is behind it. The negative top
   margin it used to carry printed it on top of the heading; h1 already leaves
   only 2px. */
.dates { font-size: 13px; color: var(--faint); margin: 0 0 20px; }
.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; }

/* A note on the poem, where one is written. Shut until she asks: the poem is
   what she came for, and a headnote above it reads as something to get past
   before she is allowed to start. */
.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 a note 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); }
/* Where the reading came from, linked. Underlined rather than coloured: the
   credit sits in the faint grey that everything secondary on this page uses,
   and a blue word in it would pull the eye off the poem to make a courtesy
   look like the point. Padded a little so a thumb can hit eleven-point type. */
.listen-what small a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--rule);
  padding: 2px 0;
}
.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); }
/* 'Again' beside her own reading, and 'Record it' where there is no reading at
   all. This had no rule in this file at all and was drawn as whatever the
   browser draws a bare <button> as -- a grey system chip in a book set in a
   serif, on the one control in the app that is hers. Pushed to the right of
   the row by the margin, because the bar's own text is variable-width and a
   button that moves with the length of a title is a button she has to look
   for. */
.mine-again {
  flex: none; margin-left: auto; padding: 7px 11px; cursor: pointer;
  font: 500 12.5px/1 var(--sans); color: var(--mark);
  background: none; border: 1px solid var(--mark); border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.mine-again:active { background: color-mix(in srgb, var(--mark) 18%, transparent); }

.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; }
#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; }


#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); }
/* The same chips over the search results, where the row style below would
   otherwise make each one a full-width row. */
/* 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 {
  margin: 4px 0 6px; align-items: center; flex-wrap: nowrap;
  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;
}

/* The painting. No frame, no shadow, no corner radius and no margin at the top
   of it: it is not a picture in the book, it is the front of the book, and
   every one of those would be an edge drawn around it. It had the section
   doors' 14px radius while it sat under a header band, where it was one panel
   among several; with the band gone it runs off all three edges of the screen
   and a rounded corner against the top of the phone would be the only rounding
   visible.

   The negative margin is the pane's own 22px of side padding, given back, so
   the painting runs off both side edges as well: it is the front of the book
   and the front of a book has no margin round it.

   **The picture goes to the edge**, and it was narrowed to the column once,
   for one build, on the reader's own next sentence -- that the painting and
   the buttons should be the same width. That is a sentence about the buttons.
   Read the other way it puts a 22px strip of page down each side of the
   painting, which is the whole of what a front cover cannot have, and the
   answer came back inside a minute: revert the hero, make it wider. So this
   rule is not to be touched again without her saying the picture itself is
   too wide; anything else about it being 'the same width as' something is an
   instruction about the something.

   No corner radius for the same reason there is no top margin: a rounded
   corner is only visible on an edge that is not the screen's own, and on a
   phone all three of these are the screen's. */
/* The bleed moved off the picture and onto the frame around it, and the
   picture is 100% of the frame -- same pixels on the screen, and now there is
   an element whose box IS the painting, which is what an overlay printed on
   the book in it has to be positioned against. `container-type: inline-size`
   so the lettering can be sized in `cqw`: a line of type on a painted cover
   has to scale with the painting and not with the phone, or it is 14px of
   sans-serif sitting on a plate that has been resized under it. */
.cover-plate {
  position: relative; container-type: inline-size;
  width: calc(100% + 44px); margin: 0 -22px 20px;
}
.cover-art {
  display: block;
  width: 100%; height: auto;
}

/* On a dark page the painting is a slab of daylight -- it is a watercolour on
   cream, and every other surface here has gone to #16151a around it. Taken
   down a little rather than left alone, and by brightness and contrast
   together: brightness alone leaves it grey and switched off, and it is the
   contrast that stops the picture's white being brighter than anything else
   on the screen. Not a sepia or a blend mode, because what is being read here
   is a face. */
/* On the plate and not on the img, so that the lettering standing on the
   painted book goes down with the paint under it. It is printed on that
   cover, so it is part of the picture, and a pale line of type left at full
   strength over a painting taken down 14% is a caption floating above it. */
@media (prefers-color-scheme: dark) {
  .cover-plate { filter: brightness(.86) contrast(.94); }
}

/* No .cover h1 rule here any more, and that is not tidying: this page has no
   heading. The title was set in 38px serif over the block below until the
   painting arrived with the same six words lettered on the book in it. A rule
   for an element nothing draws is the next session's evidence that something
   is missing. */

/* And no line above the caption. The border was the join between the title
   block and what stood over it, and what stands over it now is a plate that
   bleeds off both edges of the screen -- so the hairline was a 22px-inset rule
   under a full-width picture, which reads as a mistake in the picture. The
   painting's own 20px of bottom margin is the whole of the space now. */
.cover-book {
  font-family: var(--serif);
}
/* The credit, and now the only line in this block: the title above it went
   when the painting arrived lettered with it. Set in sans against the page's
   serif, which is what makes it read as the line under the picture rather
   than as a title of its own. The top margin went with the title -- it was
   the gap between the two of them, and there is nothing above it now but the
   rule. Centred, because it is a dedication under a plate and not the first
   line of a paragraph: set flush left it began at the page margin under a
   picture that runs past both edges, which read as the top of a column of
   text that never came -- *CENTER THE A TREASURY OF ENGLISH VERSE*. */
.cover-book .s {
  font-family: var(--sans);
  font-size: calc(13.5px * var(--scale)); line-height: 1.45;
  color: var(--faint);
  text-align: center;
}

/* 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: while
     poems are waiting for a voice it is the press that hands over one of
     them, and after that the 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 eighteen subjects, named by what is behind it.
   Two columns, because eighteen full-width rows are a scroll and not a
   cover -- the whole book has to be visible at once for the cover to be a
   way in rather than a list. */
.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: eighteen 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; }
}

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

/* Everything the book says about itself rather than about the poems in it:
   how many sections, how many poems, how many of them a person has read
   aloud, how big the type is set, and when this copy was built.

   It is a *panel*, and that is the whole of what she asked for twice. The
   things on it were four loose blocks standing on the page under the last row
   of doors, and the size control among them was a bordered button -- a square
   floating in the run-off at the bottom of a list. Her words: get it out of
   there, it should be on the back cover, rendered as if it is on the back
   cover. So the back of the book is drawn as the front of it is: the same
   width as the painting, because they are two faces of one board, and the
   same 14px corner. The painting is cut off at the top of the screen and this
   is closed on all four sides, which is what a front and a back look like in
   a stack of one.

   `align-items: flex-start` because `.cover` is a flex column and a child of
   it stretches to the full width whatever its display is -- which is how the
   size control came to be drawn as a 346px band across the foot of the page,
   the exact shape it had been moved off the row of ways in to stop being. */
.backcover {
  margin-top: 34px; padding: 20px 22px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--lift); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(35, 32, 27, .04);
}
.cover-size {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
}
.cover-size + .cover-size { margin-top: 8px; }
/* THE BACK COVER OF THE BOOK SHE IS HOLDING IN HER HAND -- and there is
   nothing lettered on it any more.

   Six builds went into finding that surface, and the note is kept because the
   finding was the expensive part. *The back cover* was read five times as a
   figure of speech about the foot of a scroll, and it is not one: the girl is
   holding an open book with its outside towards us, the lettered panel on the
   right is its front, and the plain slab on the left is the back of that same
   book -- the only surface in this app with nothing printed on it. The plane
   was measured off `app/hero.webp` rather than eyeballed. Walking down each
   column through the pale fore-edge of the page block to the board under it
   puts its top edge at (300, 483) and (500, 556) in the painting's own
   1100x733, a slope of 0.365 which is 20 degrees; its left edge runs
   (278, 545) to (310, 665); the spine stands at x=502 and the hand comes in
   over the bottom corner at y=670. The board is (133, 101, 73), so lettering
   on it has to be pale -- the painting's own dark ink reaches a contrast ratio
   of 3.0 there and the cream of its pages 4.3.

   Two things stood in that plane. The words *Text size*, which opened the
   Settings sheet: *it looks awful*, *you just need a + and a - and Aa*, *it
   should not be a portal to settings*. Then Aa with a minus and a plus, which
   did the thing on the spot and was still wrong: *Aa - + really fucking
   awful*, and then the reason under the typography -- *that only works for one
   little bit of text on the screen, and disappears everywhere else where we
   might want it*. A size control on the cover is a size control on the one
   page in this app with no poem on it. She found the Aa in the top right of
   the bar herself -- *oh it's top right. all right* -- and that one stands over
   every page of verse in the book. *Cut the Aa +- on the cover. Just have it
   in the poetry part.*

   So the control is gone and the measurement stays, because the measurement is
   a fact about the painting and the next thing lettered there will want it.
   What is on the paint now is the two things worth hiding rather than worth
   reaching: the butterfly and the fawn's nose, both below. */
/* The last line on the last page, which is where a printed book puts the one
   about itself. It is in Settings too and that is where it has been living;
   she went looking for it here twice, which is the answer to whether one place
   is enough. Smaller and fainter than the lines above it, because it is not
   for her -- it is for the person she is describing a fault to, who cannot
   otherwise tell a bug from a cached copy of last week's file. */
.cover-built {
  margin-top: 18px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .05em;
  color: var(--faint); opacity: .75;
}
/* No .built-line here any more: the stamp had a second copy in the Settings
   sheet, and the sheet is gone. `.cover-built` above is the only copy. The
   history of the foot of the cover -- the touch-probe button that stood there
   and threw diagnostics over the book, *ever time i touch it it makes a
   note* -- is in CLAUDE.md under 'a tool that has done its work and stayed'. */
/* ---- another poem, at the end of one ---------------------------------- */

/* There is nothing here now. `.onward` was one wide, quiet button under the
   last line of every poem saying *Surprise me*, on the argument that the foot
   of a poem is where somebody who has finished one is; then the die went into
   the bar of every page and the same control stood twice on one screen. *I
   STILL SEE SURPRISE ME AT THE BOTTOM. REMOVE IT!* The die is the copy that
   stays, and on the cover it is her nose. The rules are in `git log` under
   this note if the foot of a poem ever wants something again. */

/* ---- the star -------------------------------------------------------- */

/* Beside the title of a poem nobody has read aloud, one poem in five.
   Hollow while it is only a gap, filled once anybody has read it -- on this
   phone, or into the book's store from any other.

   On the poem's own page it is a button and opens the recorder. In a section
   list it is a mark and nothing else -- each row of that list is already a
   button, a button inside a button is not markup a browser will honour, and
   what the list is for is seeing at a glance which poems are still waiting. */
.star {
  background: none; border: 0; padding: 0 0 0 .34em; cursor: pointer;
  color: var(--faint); font-size: .62em; line-height: 1;
  vertical-align: .22em; -webkit-tap-highlight-color: transparent;
}
.star.full { color: var(--mark); }
.star:active { color: var(--mark); }
span.star { cursor: default; opacity: .5; }

/* ---- the recorder ----------------------------------------------------- */

/* A strip along the foot of the page, and not a sheet. The recorder was a
   sheet for one build -- the thing every other panel in this app is -- and a
   sheet stands over the page: *THE RECORD FUNCTION GOES OVER THE POEM!!! HOW
   DO YOU EXPECT ME TO RECORD IT!* A reading is made by reading, so the poem
   has to be on the screen with the button. No scrim, so the page behind it is
   live and scrolls; `body.voicing` pads the pane by the strip's height so
   the last line of the poem can be brought clear of it. It sits at the
   sheets' z-index and later in the DOM than none of them, so a gloss opened
   mid-reading paints over it and shuts back to it. */
.strip {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  background: var(--lift); border-top: 1px solid var(--rule);
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  box-shadow: 0 -8px 20px #0002;
  animation: rise .2s cubic-bezier(.22,.61,.36,1);
}
body.voicing .pane { padding-bottom: calc(env(safe-area-inset-bottom) + 210px); }
/* Who is reading, above the buttons. A line of text and not a sheet, for
   the reason the strip is not one: the poem stays on the screen. 16px in
   the input so that iOS does not zoom the page when it is tapped. */
.voice-who { display: flex; align-items: center; gap: 10px;
             max-width: 34em; margin: 0 auto 8px; }
.voice-who label { flex: none; font: 500 13px/1.2 var(--sans);
                   color: var(--faint); letter-spacing: .02em; }
.voice-who input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  font: 400 16px/1.2 var(--sans); color: var(--ink);
}
.voice-who input:focus { outline: none; border-color: var(--mark); }
.voice-who input:disabled { color: var(--faint); }
.voice-row { display: flex; align-items: center; gap: 8px;
             max-width: 34em; margin: 0 auto; }
/* The one control that matters, widest in the row and coloured so that
   recording and not-recording are two different-looking states rather than
   two labels on one button. */
.voice-do {
  flex: 1; min-width: 0; padding: 12px 0;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--paper);
  font: 600 15px/1.2 var(--sans); color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice-do.on { background: #8c2f2f; border-color: #8c2f2f; color: #fdf6f2; }
.voice-do:active { filter: brightness(1.05); }
/* The seconds, because a reader with no clock either stops after four lines
   or talks into a microphone that was never listening. */
.voice-time { min-width: 3.2em; text-align: center; font-variant-numeric:
              tabular-nums; font: 500 14px/1.2 var(--sans); color: var(--faint);
              letter-spacing: .04em; }
.voice-row button.side {
  width: auto; flex: none; padding: 11px 12px;
  border: 1px solid var(--rule); border-radius: 12px; background: none;
  font: 500 14px/1.2 var(--sans); color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice-row button.warn { color: #8c2f2f; }
.voice-row button.side:active { border-color: var(--mark); }
.voice-row .close { flex: none; }
/* One line: what to do, or where the take is now. */
.voice-note { max-width: 34em; margin: 8px auto 0;
              font: 400 12.5px/1.45 var(--sans); color: var(--faint); }

/* 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; }

/* ---- the section card -------------------------------------------------- */

/* The page in front of each subject. It carries no essay: the anthology it
   stands in for prints none, and writing one for it would be putting words in
   a book's mouth. So it is the heading, what is in there, and the way in. */
.section-card h1 {
  font-size: calc(30px * var(--scale));
  letter-spacing: -.012em; margin: 0 0 12px;
}
/* Every poem in the subject, in one press each. A section runs to a hundred
   and ninety at the widest, so this is a long list on purpose: paging through
   is for reading, and this is for finding. */
.section-list { margin-top: 22px; border-top: 1px solid var(--rule); }
.section-list button {
  display: block; width: 100%; text-align: left; padding: 12px 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)); line-height: 1.35;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.section-list button small {
  display: block; margin-top: 3px;
  font: 400 11.5px/1.4 var(--sans); color: var(--faint);
}
.section-list button:active { background: var(--lift); }
@media (hover: hover) {
  .section-list button:hover { background: var(--lift); }
}

/* ---- the Chinese crib (Joey Poetry) ------------------------------------ */

/* Under the line it translates, small and in the sans and set in, so the
   poem is still the English and the crib is apparatus. zh-show lights one
   line while the rest are off, zh-hide dims one while the rest are on: the
   two selectors are the four states together. */
.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(14px * var(--scale))/1.5 var(--sans); color: var(--faint);
}
.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); }

/* ---- a poem read in a video --------------------------------------------- */

/* The player bleeds to both edges of the phone like the cover photograph,
   because a video 44px narrower than the screen is a video in a box. Held at
   16:9 before the player arrives, so the poem does not jump down under the
   thumb when it does. */
.watch { margin: 0 0 18px; }
.watch-frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  width: calc(100% + 44px); margin: 0 -22px 10px;
}
.watch-frame iframe, .watch-frame > div {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.watch-off {
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font: 400 14px/1.4 var(--sans);
}

/* Chinese above the English: it is the line Pering reads first. One sense a
   line, as ECDICT sets them. */
#gloss-zh { margin: 0 0 8px; font-size: 18px; line-height: 1.55; white-space: pre-line; }
#gloss-zh:empty { display: none; }

/* <<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>> */