/* read.ooh.tw — a reading surface first, a website second.
 *
 * Every rule here answers one of CYC's three complaints about the site he reads on now:
 * he cannot jump to a chapter and verse quickly, the type is punishing for older eyes, and
 * it was not built for a phone.
 */
:root {
  /* Three grounds, not two: paper for daylight, sepia for long evenings, dark for night.
     Presbyopic eyes lose contrast sensitivity before they lose acuity, so every pairing
     here is well past the minimum rather than exactly at it. */
  --paper: #faf7f0;
  --raised: #fffdf8;
  --ink: #1a1714;
  --soft: #5c554a;
  --line: #e3dccd;
  --accent: #a83a26;
  --accent-ink: #fffdf8;
  --mark: #fbe8a6;

  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;

  /* The reader's own type scale. Set by the size stepper and remembered, so nobody has to
     reach for browser zoom — which also blows up the furniture, not just the text. */
  --size: 19px;
  --lead: 1.95;
  --measure: 34em;
}
:root[data-theme="sepia"] {
  --paper: #f3e9d6; --raised: #fbf4e6; --ink: #3b2f22; --soft: #6b5a44; --line: #ddcdae;
  --accent: #9c3c1c; --mark: #f0d68a;
}
:root[data-theme="dark"] {
  --paper: #14120f; --raised: #1d1a16; --ink: #ece5d8; --soft: #a79d8d; --line: #332e26;
  --accent: #e08a6f; --accent-ink: #14120f; --mark: #4a3d1a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #14120f; --raised: #1d1a16; --ink: #ece5d8; --soft: #a79d8d; --line: #332e26;
    --accent: #e08a6f; --accent-ink: #14120f; --mark: #4a3d1a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--size); line-height: var(--lead);
  /* Never a light weight: thin strokes are the first thing to disappear for older eyes. */
  font-weight: 400;
  padding-bottom: 96px;
}
a { color: inherit; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(12px);
  backdrop-filter: saturate(170%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .in {
  max-width: 62rem; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; min-height: 56px;
}
.bar .home { font-family: var(--serif); font-weight: 900; font-size: 1rem; text-decoration: none; flex: none; }
.bar .where { flex: 1; min-width: 0; font-size: .82rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn {
  font: inherit; font-size: .82rem; cursor: pointer; color: var(--soft);
  background: var(--raised); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; /* a thumb target, not a mouse target */
}
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--soft); }
.btn svg { width: 17px; height: 17px; }
.btn kbd { font-family: var(--sans); font-size: .72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
@media (max-width: 620px) { .btn .label, .btn kbd { display: none; } .btn { padding: 7px 11px; } }

/* ---------- the page of text ---------- */
main { max-width: 62rem; margin: 0 auto; padding: 0 16px; }
.reader { max-width: var(--measure); margin: 0 auto; padding: 40px 0 24px; }
.reader .kicker { font-size: .78rem; letter-spacing: .16em; color: var(--accent); font-weight: 700; }
.reader h1 { font-family: var(--serif); font-weight: 900; font-size: 1.7rem; line-height: 1.4; margin: 10px 0 28px; }

/* One verse, one paragraph, one anchor. The number sits in the margin so it never breaks
   the run of the sentence, and drops above the text when there is no margin to sit in. */
.v { position: relative; margin: 0 0 1.1em; padding-left: 3.2em; scroll-margin-top: 72px; }
.v > .n {
  position: absolute; left: 0; top: .15em; width: 2.6em; text-align: right;
  font-family: var(--sans); font-size: .74em; font-weight: 700; color: var(--soft);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.v > .n:hover { color: var(--accent); }
.v p { margin: 0; font-family: var(--serif); }
/* Continuation lines of a poetic verse are indented, the way a printed Bible sets them, so
   the eye can tell a new line of poetry from a new verse. */
.v p br + * , .v p { text-indent: 0; }
.v.poem p { padding-left: 0; }
.v.hit { background: var(--mark); border-radius: 4px; }
@media (max-width: 560px) {
  .v { padding-left: 0; }
  .v > .n { position: static; display: block; width: auto; text-align: left; margin-bottom: .2em; }
}

/* ---------- chapter paging ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; }
.pager a { text-decoration: none; font-size: .9rem; color: var(--soft); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pager a:hover { color: var(--accent); }
.pager span { color: var(--line); }

/* ---------- home ---------- */
.hero { padding: 64px 0 8px; max-width: var(--measure); margin: 0 auto; }
.hero h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.15; margin: 0 0 12px; }
.hero p { color: var(--soft); margin: 0 0 8px; }
.works { max-width: var(--measure); margin: 40px auto 0; display: grid; gap: 2px; }
.works a { display: block; text-decoration: none; padding: 18px 2px; border-top: 1px solid var(--line); }
.works a:last-child { border-bottom: 1px solid var(--line); }
.works b { font-family: var(--serif); font-size: 1.15rem; font-weight: 900; }
.works small { display: block; color: var(--soft); font-size: .84rem; margin-top: 4px; }

/* ---------- the jump bar: the answer to "I cannot find chapter and verse" ---------- */
.jx { position: fixed; inset: 0; z-index: 70; display: none; padding: 8vh 16px 16px; }
.jx.open { display: block; }
.jx .scrim { position: absolute; inset: 0; background: rgba(20, 16, 12, .5); }
.jx .box { position: relative; max-width: 34rem; margin: 0 auto; background: var(--raised);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); overflow: hidden; }
.jx .top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.jx .top svg { width: 20px; height: 20px; color: var(--soft); flex: none; }
.jx input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.05rem; outline: none; }
.jx .hint { padding: 10px 16px 14px; color: var(--soft); font-size: .8rem; line-height: 1.8; }
.jx .hint code { font-family: var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.jx ul { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; }
.jx li a { display: block; padding: 12px 16px; text-decoration: none; border-top: 1px solid var(--line); }
.jx li a:hover, .jx li a.on { background: var(--paper); }
.jx li b { display: block; font-size: .8rem; color: var(--accent); font-weight: 700; }
.jx li span { display: block; font-family: var(--serif); margin-top: 2px; }
.jx li em { font-style: normal; background: var(--mark); border-radius: 3px; }
.jx .none { padding: 16px; color: var(--soft); font-size: .9rem; }

/* ---------- reading controls ---------- */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 45;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(12px); backdrop-filter: saturate(170%) blur(12px);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.dock button {
  font: inherit; font-size: .84rem; cursor: pointer; background: none; border: 0; color: var(--soft);
  border-radius: 999px; padding: 8px 13px; min-height: 40px; min-width: 40px;
}
.dock button:hover, .dock button:focus-visible { color: var(--ink); background: var(--paper); }
.dock button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.dock .sep { width: 1px; align-self: stretch; background: var(--line); margin: 6px 2px; }
.dock .size { font-family: var(--serif); font-weight: 900; }
.dock .size.sm { font-size: .78rem; }
.dock .size.lg { font-size: 1.1rem; }

.foot { max-width: var(--measure); margin: 56px auto 0; padding: 20px 0 0; border-top: 1px solid var(--line);
  color: var(--soft); font-size: .8rem; line-height: 1.9; }
.foot a { text-underline-offset: 3px; }

/* ---------- chapter rail: jump by tapping a number, never by typing ---------- */
/* CYC's ask, and the reason behind it: "I do not even want to type." So the whole book sits
   down the edge of the screen as numbers. It lives opposite the scrollbar, scrolls inside
   itself (66 chapters do not fit a viewport), and keeps the chapter you are on in view. */
.rail {
  position: fixed; right: 0; top: 56px; bottom: 0; z-index: 35;
  width: 44px; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 0 88px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 1px solid var(--line);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail a {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--soft); padding: 9px 0; border-radius: 6px; margin: 1px 4px;
  font-variant-numeric: tabular-nums;
}
.rail a:hover { background: var(--raised); color: var(--ink); }
.rail a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
body.has-rail main { padding-right: 52px; }
@media (max-width: 560px) {
  .rail { width: 36px; }
  .rail a { font-size: 11px; padding: 8px 0; }
  body.has-rail main { padding-right: 42px; }
}

/* ---------- tap-first jump bar ---------- */
.jx .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.jx .chips button {
  font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; min-height: 40px;
}
.jx .chips button:hover, .jx .chips button:focus-visible { border-color: var(--accent); color: var(--accent); }
.jx .chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jx .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px; padding: 0 16px 16px; max-height: 44vh; overflow: auto; }
.jx .grid a {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.jx .grid a:hover, .jx .grid a:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jx .lead { padding: 0 16px 6px; color: var(--soft); font-size: .8rem; }