/* The notebook: the frame, the book, its pages and the page turn.
   Colors come from the dlybeck design tokens (tokens.css). Light theme only for now. */

:root {
  --nb-edge: rgba(20, 28, 43, 0.55);
  --nb-paper: color-mix(in srgb, var(--paper-note) 45%, #f7eed6);
  --nb-ink: var(--ink-fixed);
  --nb-pen: #0b4f9c; /* the blue that reads on paper */
  --nb-spine: #2b2f38;
  --nb-kraft: #b58b55;
  /* One cover board. The front cover, the back board and the inside of the front cover are all this one board, the same size
     (the pages sit inside it, smaller by the rim), with one corner radius and one border. Desktop's rim is 12px all round; a
     phone's book fills the screen on the left, so its rim is the 6px on the right and bottom. */
  --nb-rim: 6px;
  --nb-board-r: 6px;
  --nb-turn: 720ms;
  --nb-turn-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
  --nb-wheel-room: 138px; /* the part of the screen the wheel takes on a phone */
  /* The book opening and closing is one move on one curve: the cover's swing, the book's slide, the back board's
     clip, the tabs and the band all read these two values. cover.js reads them from here too. */
  --nb-open-ms: 800ms;
  --nb-open-ease: cubic-bezier(0.65, 0, 0.35, 1); /* ease-in-out */
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* no blue flash on a tap; keyboard focus keeps its ring below */
html, body { margin: 0; }
body {
  background: var(--ground);
  background-image: linear-gradient(var(--ground), color-mix(in srgb, var(--ground) 80%, #dfe6f1));
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2.5px solid var(--action); outline-offset: 3px; }

/* ---------- the frame ---------- */
.nb { position: relative; min-height: 100vh; }
.nb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
}
.nb-brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 800 1.15rem/1 var(--font-sans); letter-spacing: -0.01em;
}
.nb-brand img { display: block; }

/* ---------- the plain page (no scripts) ---------- */
.nb-sources { max-width: 46rem; margin: 0 auto; padding: 8px 16px 64px; display: grid; gap: 28px; }
.nb-sources .page { background: var(--nb-paper); color: var(--nb-ink); border: var(--edge) solid var(--nb-edge); border-radius: var(--radius-paper); padding: 22px 22px 26px; }
.js .nb-sources { display: none; }
.js-only { display: none; }
.js .js-only { display: block; }

/* ---------- with scripts: the book fills the screen ---------- */
.js .nb { position: fixed; inset: 0; min-height: 0; overflow: clip; }
.js .nb-top { position: absolute; inset: 0 0 auto 0; z-index: 20; height: 62px; padding-top: 14px; }

/* The book is always a 5 by 8 notebook (one page on a phone, two side by side on desktop), as big as fits. */
.nb-book {
  --avail-h: calc(100vh - 70px - var(--nb-wheel-room) - env(safe-area-inset-bottom, 0px));
  --bw: min(calc(100vw - 34px), calc(var(--avail-h) * 0.625));
  position: absolute; width: var(--bw); height: calc(var(--bw) / 0.625); left: 50%; margin-left: calc(var(--bw) / -2 - 3px);
  top: calc(70px + (var(--avail-h) - var(--bw) / 0.625) / 2);
  perspective: 2400px; z-index: 1; touch-action: pan-y;
}
/* a thin stack of pages already turned, behind the left edge of the phone book */
.nb--phone .nb-book::before {
  content: ""; position: absolute; right: 100%; top: 5px; bottom: 5px; width: 0; margin-right: 1px;
  border-radius: 3px 0 0 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--paper-note) 0 2px, #cfc6b0 2px 3px);
  box-shadow: -1px 1px 0 rgba(20, 28, 43, 0.25); transition: width 0.35s ease;
}
.nb--phone.is-turned:not(.is-closed) .nb-book::before { width: 11px; }

.nb-back { /* the back board: the cover board seen from behind, the same size as the front cover, a rim larger than the pages */
  position: absolute; inset: 0 calc(var(--nb-rim) * -1) calc(var(--nb-rim) * -1) 0; border-radius: var(--nb-board-r); background: var(--nb-kraft);
  border: var(--edge) solid var(--ink-fixed); box-shadow: var(--lift);
}
.nb-page, .nb-leaf .face, .cover-page {
  background-color: var(--nb-paper); color: var(--nb-ink); border: var(--edge) solid var(--nb-edge);
  background-image:
    linear-gradient(90deg, transparent 11px, rgba(200, 64, 52, 0.42) 11px, rgba(200, 64, 52, 0.42) 12.5px, transparent 12.5px),
    repeating-linear-gradient(transparent 0 25px, rgba(60, 104, 170, 0.2) 25px 26px);
  background-size: 100% 100%, 100% 26px; background-position: 0 0, 0 14px;
  overflow: hidden;
}
.nb-page { position: absolute; inset: 0; border-radius: 3px; }
.nb-gutter { display: none; }
.nb-band { /* the elastic band round the spine side */
  position: absolute; top: -6px; bottom: -6px; right: 22px; width: 11px; z-index: 70; pointer-events: none;
  background: var(--nb-spine); border: var(--edge) solid var(--ink-fixed); border-radius: 3px;
  transition: right var(--nb-open-ms) var(--nb-open-ease), width var(--nb-open-ms) var(--nb-open-ease), opacity var(--nb-open-ms) var(--nb-open-ease),
    top var(--nb-open-ms) var(--nb-open-ease), bottom var(--nb-open-ms) var(--nb-open-ease);
}
.nb.is-closed .nb-band { opacity: 0; }
.nb:not(.is-closed) .nb-band { right: -5px; width: 5px; top: 14%; bottom: 14%; opacity: 0.4; z-index: 2; border-width: 1px; border-radius: 2px; }
/* Open, the band is only a faint strap on the back board's edge. It rides under the section tabs (z-index 3), never over them: at 70 it was
   painted across their inner edges (pointer-events: none hid it from hit tests, but not from the eye). */

.nb-in {
  overflow-anchor: none; /* the engine keeps a named part in place itself */
  position: absolute; inset: 0; padding: 22px 44px 50px 26px; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  touch-action: pan-y; /* up and down scroll the page; sideways strokes reach the book, which turns the page */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 52px), transparent calc(100% - 26px));
  mask-image: linear-gradient(#000 calc(100% - 52px), transparent calc(100% - 26px));
}
.nb-in:focus-visible { outline-offset: -4px; }

/* page turn */
.nb-leaf { position: absolute; top: 0; bottom: 0; display: none; z-index: 8; transform-style: preserve-3d; }
.nb-leaf.is-flying { display: block; }
.nb-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nb-leaf .back { transform: rotateY(180deg); }
.nb--phone .nb-leaf .back { background-image: linear-gradient(90deg, #d6cdb6, #fbf7ec 45%, #e4dccb); }
.nb-leaf.is-riffle .face { box-shadow: 0 0 0 1px rgba(20, 28, 43, 0.06); }

/* A page's folio and corner fold belong to the page. The live ones (.nb-pn, .nb-ear) sit on the book; a turning leaf carries its own copies
   (.face-pn, .face-ear, drawn the same) on each face, so they turn with the page and the landed page matches the leaf's last frame. */
.nb-pn, .face-pn { position: absolute; bottom: 14px; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(20, 28, 43, 0.65); z-index: 7; pointer-events: none; }
.nb-pn.rgt, .face-pn.rgt { right: 48px; }
.nb-pn.lft, .face-pn.lft { left: 26px; }
.nb--phone .nb-pn.lft, .nb--phone .face-pn.lft { display: none; }

.nb-ear, .face-ear { /* a folded page corner you can tap to turn */
  position: absolute; bottom: 0; width: 48px; height: 48px; border: 0; padding: 0; cursor: pointer; z-index: 7; background: none;
}
.nb-ear::before, .face-ear::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, transparent 50%, var(--nb-edge) 50%, var(--nb-edge) calc(50% + 1.5px), color-mix(in srgb, var(--paper-note) 86%, #141c2b) calc(50% + 1.5px));
}
.nb-ear.next, .face-ear.next { right: 0; }
.nb-ear.prev, .face-ear.prev { left: 0; transform: scaleX(-1); }
.face-ear { display: block; pointer-events: none; cursor: default; }
/* a face has a border, which insets what is positioned in it; the live ones sit on the book, so pull the copies out by the border to match */
.face-pn, .face-ear { margin-bottom: calc(var(--edge) * -1); }
.face-pn.lft, .face-ear.prev { margin-left: calc(var(--edge) * -1); }
.face-pn.rgt, .face-ear.next { margin-right: calc(var(--edge) * -1); }
.nb-ear[disabled] { display: none; }
.nb-hint-flip { position: absolute; right: 52px; bottom: 40px; rotate: -6deg; color: var(--nb-pen); pointer-events: none; z-index: 7; font: 700 1.25rem/1 var(--font-hand); transition: opacity 0.4s; }

/* browsers that know the dynamic viewport height use it, so the phone's toolbar does not cover the wheel */
@supports (height: 100dvh) {
  .nb-book { --avail-h: calc(100dvh - 70px - var(--nb-wheel-room) - env(safe-area-inset-bottom, 0px)); }
  @media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) { .nb-book { --avail-h: calc(100dvh - 32px); } }
}

/* ---------- desktop: an open book, two pages ---------- */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .nb-top { padding: 14px 28px; }
  .nb-book {
    --avail-h: calc(100vh - 124px);
    --bw: min(calc(var(--avail-h) * 1.25), calc(100vw - 340px), 1280px);
    left: calc(300px + (100vw - 340px - var(--bw)) / 2); margin-left: 0; width: var(--bw); height: calc(var(--bw) / 1.25);
    --nb-rim: 12px; --nb-board-r: 10px;
    --book-top: calc(84px + (var(--avail-h) - var(--bw) / 1.25) / 2); /* the tab column measures from it */
    top: var(--book-top);
  }
  /* Opening is one move: the book slides from its shut, centred spot to its open spot while the cover swings on
     the spine. Nothing is scaled. The back board is always full size; the shut book just shows its right half.
     The slide, the cover's swing and the board's clip are not transitions: swing.js sets all three every frame from the
     cover's one angle, so the board's edge stays under the cover's free edge (which moves with cos and perspective, not
     with the easing). The two rules below are the resting states it hands back to. */
  .nb--desktop.is-closed .nb-book { transform: translateX(calc(var(--bw) * -0.25)); }
  .nb-back { inset: calc(var(--nb-rim) * -1); clip-path: inset(calc(var(--nb-rim) * -1)); }
  .nb--desktop.is-closed .nb-back { clip-path: inset(calc(var(--nb-rim) * -1) calc(var(--nb-rim) * -1) calc(var(--nb-rim) * -1) 50%); } /* shut: only the cover's half, flush at the spine */
  .nb--desktop .nb-page.l { right: 50%; border-radius: 3px 0 0 3px; border-right-color: rgba(20, 28, 43, 0.25); }
  .nb--desktop .nb-page.r { left: 50%; border-radius: 0 3px 3px 0; border-left: 0; }
  /* a turning leaf's faces are the same pages: a right page has no left border (so its text keeps the same width and wraps the same way once it lands) */
  .nb--desktop .nb-leaf:not(.cover) .face.r-face { border-left: 0; border-radius: 0 3px 3px 0; }
  .nb--desktop .nb-leaf:not(.cover) .face:not(.r-face) { border-radius: 3px 0 0 3px; border-right-color: rgba(20, 28, 43, 0.25); }
  /* the left page does not exist while the book is shut or the cover is still swinging: the cover's back face IS the
     left page, and lands exactly where it is, so there is no second flip or fade at the end */
  .nb--desktop.is-closed .nb-page.l, .nb--desktop.is-closed .nb-gutter,
  .nb--desktop.is-opening .nb-page.l, .nb--desktop.is-opening .nb-gutter,
  .nb--desktop.is-opening .nb-pn.lft, .nb--desktop.is-opening .nb-ear.prev, .nb--desktop.is-opening .nb-hint-flip { visibility: hidden; }
  /* The cover's back face is the inside of the same board: kraft, board-sized, with the left page set into it exactly where the real
     page lands (a rim in from the outer edge, flush at the spine), so there is no jump when the swung cover is swapped for the page. */
  .nb--desktop .nb-leaf.cover .face.back {
    background: var(--nb-kraft); border: var(--edge) solid var(--ink-fixed); border-right-width: 0; border-radius: var(--nb-board-r) 0 0 var(--nb-board-r);
  }
  .nb--desktop .cover-page { position: absolute; right: 0; top: var(--nb-rim); bottom: var(--nb-rim); left: var(--nb-rim); border-radius: 3px 0 0 3px; border-right-color: rgba(20, 28, 43, 0.25); }
  .nb--desktop .nb-page, .nb--desktop .nb-leaf .face, .nb--desktop .cover-page {
    background-image:
      linear-gradient(90deg, transparent 28px, rgba(200, 64, 52, 0.42) 28px, rgba(200, 64, 52, 0.42) 29.5px, transparent 29.5px),
      repeating-linear-gradient(transparent 0 25px, rgba(60, 104, 170, 0.2) 25px 26px);
  }
  .nb--desktop .nb-page.r, .nb--desktop .nb-leaf .r-face { background-image: repeating-linear-gradient(transparent 0 25px, rgba(60, 104, 170, 0.2) 25px 26px); background-size: 100% 26px; background-position: 0 14px; }
  .nb--desktop .nb-gutter {
    display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 36px; margin-left: -18px; pointer-events: none; z-index: 4;
    background: linear-gradient(90deg, transparent, rgba(20, 28, 43, 0.07) 45%, rgba(20, 28, 43, 0.12) 50%, rgba(20, 28, 43, 0.07) 55%, transparent);
  }
  .nb--desktop .nb-band { right: 56px; }
  .nb--desktop:not(.is-closed) .nb-band { right: -9px; }
  .nb--desktop .nb-in { padding: 34px 40px 52px 44px; }
  /* the right page keeps room for its folio and corner fold, but gives words the width back as the book shrinks (88px at full size, ~50px at 1024 wide) */
  .nb--desktop .nb-page.r .nb-in, .nb--desktop .nb-leaf .r-face .nb-in { padding: 34px max(48px, min(88px, calc(var(--bw) * 0.13 - 38px))) 52px 42px; }
  .nb--desktop .nb-pn.lft, .nb--desktop .face-pn.lft { left: 46px; }
  .nb--desktop .nb-pn.rgt, .nb--desktop .face-pn.rgt { right: 90px; }
  .nb--desktop .nb-hint-flip { right: 98px; }
}

/* ---------- a short landscape window (a phone on its side) ----------
   The spread keeps its two 5 by 8 pages, but the book takes the whole height, the logo shrinks to its mark so the book
   and the (smaller) wheel have the room, and the pages use tighter padding and smaller type so words fit. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
  .nb-top { padding: 10px 14px; height: auto; }
  .nb-brand { font-size: 0; gap: 0; } /* the mark stays; the name stays for screen readers through the link's logo alt */
  .nb-brand img { width: 34px; height: 34px; }
  .nb-book {
    --avail-h: calc(100vh - 32px);
    --bw: min(calc(var(--avail-h) * 1.25), calc(100vw - 190px), 1280px);
    left: calc(150px + (100vw - 190px - var(--bw)) / 2);
    --book-top: calc(16px + (var(--avail-h) - var(--bw) / 1.25) / 2);
  }
  .nb--desktop .nb-in { padding: 18px 22px 40px 28px; }
  .nb--desktop .nb-page.r .nb-in, .nb--desktop .nb-leaf .r-face .nb-in { padding: 18px 40px 40px 24px; }
  .nb--desktop .nb-pn.rgt, .nb--desktop .face-pn.rgt { right: 44px; }
  .nb--desktop .nb-hint-flip { right: 52px; bottom: 30px; font-size: 1rem; }
}

.nb.is-closed .nb-ear, .nb.is-closed .nb-pn, .nb.is-closed .nb-hint-flip { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nb-book, .nb-back, .nb-band, .nb-page.l, .nb-gutter, .nb-tab { transition: none !important; }
  .nb-in { scroll-behavior: auto; }
}

/* Phone: the tab strip overlaps the paper's right edge, so the scroller stops 10px short of it. The page's own scroll bar
   then sits on the paper, never over a tab; the padding keeps the text exactly where it was. */
.nb--phone .nb-in { right: 10px; padding-right: 34px; }

/* A portrait tablet gets the one-page book (below 900px wide and not landscape), and that page is big: 16px words look small on it.
   Everything on the notebook is sized in rem, so raising the root size lifts body text to 18px and the headings and labels with it.
   Phones (under 700px) and every desktop and landscape layout keep the normal size. */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  html { font-size: 112.5%; }
}