/* Julie Poesy.
   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;
}
.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); }
/* 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; }

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

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

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

/* ---- 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 4px;
}
.section-zh {
  font-family: var(--serif);
  font-size: calc(21px * var(--scale)); line-height: 1.3;
  color: var(--mark); margin: 0 0 12px; letter-spacing: .04em;
}

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