/* Shared design tokens and base typography for the whole site.
   Concatenated ahead of reader.css (the /  card reader) and ahead of
   book.css (every regular URL) so both experiences are one book:
   same paper, same ink, same serif, same ochre. */

:root {
  color-scheme: light dark;

  /* paper — the default */
  --bg:        #faf7f1;
  --fg:        #211f1b;
  --muted:     #6f6b62;
  --accent:    #9a6b12;   /* ochre — rules, marks, hover */
  --accent-fg: #7c550c;   /* ochre as link text: a touch darker to hold contrast on paper */
  --panel:     #efe8da;   /* sunk surfaces: code, quotes, cover */
  --line:      #ddd5c5;
  --sel:       rgba(154,107,18,0.20);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* regular-page reading type — calmer than the reader's card type */
  --fs: clamp(1.16rem, 1.05rem + 0.6vw, 1.38rem);
  --lh: 1.68;
  --measure: 36rem;                 /* ~65 characters of Georgia */
  --pad-x: max(6vw, 1.15rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0e0f12;
    --fg:        #ececec;
    --muted:     #9aa0a6;
    --accent:    #e7b74b;
    --accent-fg: #e7b74b;
    --panel:     #17191d;
    --line:      #2a2d33;
    --sel:       rgba(231,183,75,0.24);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--sel); }

a {
  color: var(--accent-fg);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--accent); }

h1, h2, h3, h4 { line-height: 1.22; text-wrap: balance; font-weight: 700; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; } }
/* The card reader. Palette, serif and reset come from tokens.css, which is
   concatenated ahead of this file; only reader-specific variables and the
   fixed, non-scrolling body live here. */
:root {
  --deck-top: #f3ede1;                /* deck backdrop gradient, top */
  --glass: rgba(250,247,241,0.72);    /* menu / hud pill fill */
  --card-shadow: rgba(60,50,30,0.18);
  --fs: clamp(1.28rem, 1.12rem + 1.15vw, 1.62rem);  /* card type: larger than a regular page */
  --lh: 1.62;
  --turn: 1s;                         /* page-turn animation duration */
  --pad-x: max(6vw, 1.3rem);
  --top-space: calc(env(safe-area-inset-top, 0px) + 3.4rem);
  --bot-space: calc(env(safe-area-inset-bottom, 0px) + 2.6rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --deck-top: #191c22;
    --glass: rgba(20,22,26,0.72);
    --card-shadow: rgba(0,0,0,0.8);
  }
}
html, body { padding: 0; height: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---- deck ---- */
#deck {
  position: fixed; inset: 0; z-index: 1;
  touch-action: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--deck-top) 0%, var(--bg) 60%);
}
.card {
  position: absolute; inset: 0;
  background: var(--bg);
  will-change: transform, opacity;
  box-shadow: 0 -18px 40px -20px var(--card-shadow);
}
.card.animating {
  transition: transform var(--turn) cubic-bezier(.32,.72,0,1),
              opacity calc(var(--turn) * 0.55) ease;
}
.card-body {
  position: absolute; inset: 0;
  padding: var(--top-space) var(--pad-x) var(--bot-space);
  overflow: hidden;
  font-size: var(--fs);
  line-height: var(--lh);
  overflow-wrap: break-word;
  hyphens: auto;
}
.card-body.spill { overflow-y: auto; }           /* a single block taller than one card */
.card-body > :first-child { margin-top: 0; }
.card-body h1 { font-size: 1.5em; line-height: 1.16; margin: 0 0 0.7em; }
.card-body h2 { font-size: 1.22em; }
.card-body h3, .card-body h4 { font-size: 1.06em; }
.card-body h2, .card-body h3, .card-body h4 { line-height: 1.25; margin: 1.1em 0 0.4em; }
.card-body p { margin: 0 0 0.85em; }
.card-body a { color: var(--accent); text-underline-offset: 2px; }
.card-body ul, .card-body ol { margin: 0 0 0.85em; padding-left: 1.3em; }
.card-body li { margin: 0.2em 0; }
/* contents list: full-size text, no markers, roomy rows */
.card-body ul.toc { padding-left: 0; list-style: none; font-size: 1em; }
.card-body ul.toc li { margin: 0.5em 0; }
.card-body img, #measure img {
  max-width: 100%; width: auto; max-height: 70vh; height: auto;
  object-fit: contain; display: block; margin: 0.3em auto;
  border-radius: 6px; background: #fff;
}
.card-body figure, #measure figure { margin: 0.6em 0; }
.card-body figcaption { color: var(--muted); font-size: 0.82em; margin-top: 0.3em; text-align: center; }
.card-body table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.card-body td, .card-body th { border: 1px solid var(--line); padding: 0.35em 0.5em; vertical-align: top; }
.card-body pre { overflow-x: auto; background: var(--panel); padding: 1em; border-radius: 6px; font-size: 0.86em; }
.card-body blockquote { margin: 1em 0; padding-left: 0.9em; border-left: 3px solid var(--line); color: var(--muted); }

/* offscreen measuring box: identical metrics to .card-body */
#measure {
  position: fixed; left: -10000px; top: 0; visibility: hidden;
  padding: var(--top-space) var(--pad-x) var(--bot-space);
  font-size: var(--fs); line-height: var(--lh);
  overflow-wrap: break-word; hyphens: auto;
  contain: layout paint;
}

/* ---- chrome ---- */
#progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 30; transition: width 0.25s ease;
  pointer-events: none;
}
#menuBtn {
  position: fixed; top: env(safe-area-inset-top, 0); left: 0; z-index: 30;
  margin: 0.55rem; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--glass); backdrop-filter: blur(8px);
  color: var(--fg); font-size: 1.05rem; cursor: pointer;
}
#hud {
  position: fixed; top: env(safe-area-inset-top, 0); right: 0; z-index: 30;
  margin: 0.5rem; padding: 0.32rem 0.7rem; max-width: 62vw;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(8px);
  color: var(--muted); font: 500 0.76rem/1.2 -apple-system, system-ui, sans-serif;
  display: flex; gap: 0.5rem; align-items: baseline;
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
#hud b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#hud span { flex: none; }

/* breadcrumb back to the referrer, shown only for an off-spine page */
#crumb {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: env(safe-area-inset-top, 0); z-index: 30;
  margin: 0.5rem; padding: 0.32rem 0.8rem; max-width: 52vw;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(8px);
  color: var(--muted); font: 500 0.76rem/1.2 -apple-system, system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; text-decoration: none;
}
#crumb[hidden] { display: none; }

#hint {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 5vh);
  transform: translateX(-50%); z-index: 20;
  color: var(--muted); font: 400 0.82rem/1.5 -apple-system, system-ui, sans-serif;
  text-align: center; pointer-events: none; transition: opacity 0.4s ease;
}
#hint .up { animation: bob 1.8s ease-in-out infinite; display: inline-block; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

#splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 0.9rem;
  align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted);
  font: 400 0.9rem/1.4 -apple-system, system-ui, sans-serif;
  transition: opacity 0.3s ease;
}
#splash .bar { width: 40vw; max-width: 220px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
#splash .bar i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.15s linear; }

/* ---- left drawer ---- */
#drawer {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: min(340px, 86vw); height: 100dvh;
  background: var(--panel); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
}
#drawer h2 {
  margin: 0; padding: 1.1rem 1.2rem 0.8rem;
  font: 600 0.8rem/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
#drawer ol { margin: 0; padding: 0.5rem 0; overflow-y: auto; list-style: none; counter-reset: c; }
#drawer li { counter-increment: c; }
#drawer a {
  display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.4rem;
  padding: 0.6rem 1.2rem; color: var(--fg); text-decoration: none;
  font: 400 0.98rem/1.35 Georgia, serif;
}
#drawer a::before { content: counter(c); color: var(--muted); font-size: 0.8rem; }
#drawer a.active { color: var(--accent); }
#drawer a.active::before { color: var(--accent); }
#backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
body.nav-open #drawer { transform: translateX(0); }
body.nav-open #backdrop { opacity: 1; pointer-events: auto; }

/* the reader shell, before reader.js takes over, must not show over the
   server-rendered article; reader.js removes this class once mounted */
body.reader-pending #deck,
body.reader-pending #measure,
body.reader-pending #progress,
body.reader-pending #menuBtn,
body.reader-pending #hud,
body.reader-pending #crumb,
body.reader-pending #hint,
body.reader-pending #drawer,
body.reader-pending #backdrop { display: none; }

/* a chapter is being fetched */
body.loading { cursor: progress; }
body.loading #deck { opacity: 0.55; transition: opacity 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  .card.animating { transition-duration: 0.01s; }
  #hint .up { animation: none; }
}