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

#bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  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;
  background: none; border: 0; padding: 4px 6px; color: inherit;
  font: inherit; cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
#where:active { background: var(--rule); }
#who { display: block; font-size: 15px; font-weight: 600;
       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; }
.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 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 .l { display: block; }
.verse .l .t { display: block; text-indent: -1.4em; padding-left: 1.4em; }
.verse .gap { height: .85em; }
/* 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; text-indent: 0; padding-left: 0; }

/* 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 {
  margin: 0 0 4px; padding: 2px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: calc(14.5px * var(--scale)); line-height: 1.65;
  color: var(--faint);
}

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

#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); }
#toc-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 { 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 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 so that what is under the fold is
   only the colophon, which is there to be found rather than read first. */
.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;
}
.cover-book .s {
  font-size: calc(14.5px * var(--scale));
  color: var(--faint); margin-top: 6px;
}

/* 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; text-align: left;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--lift); color: var(--ink);
  cursor: pointer;
}
.cover-go button.primary {
  background: var(--mark); border-color: var(--mark); color: #fffdf8;
}
.cover-go small {
  display: block; font-size: 12.5px; opacity: .72; margin-top: 3px;
}

/* 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: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cover-secs button {
  text-align: left; padding: 9px 11px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--paper); color: var(--ink);
  font: inherit; cursor: pointer;
}
.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: 3px; color: var(--faint);
  font: 400 11.5px/1.35 var(--sans);
}

.cover-size {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-top: 30px;
}
.colophon {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55;
  color: var(--faint);
  border-top: 1px solid var(--rule);
  margin-top: 14px; padding-top: 14px;
}
.colophon p { margin: 0 0 .7em; }
.colophon p:last-child { margin-bottom: 0; }

/* A button that is a line of text: About, on the cover and 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); }
}