/* Pink Binder.
   Pink sampled from the up&up 2" Clear View 3-ring binder (Target A-51463830):
   rgb(218, 94, 136). */

:root{
  --pink:#DA5E88;
  --pink-dark:#B04068;
  --pink-deep:#8E2F52;
  --pink-pale:#FBE7EE;
  --desk:#F1EBED;
  --ink:#242022;
  --dim:#6E6068;
  --line:#E4DCDF;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --page-w:400px; --page-h:518px; --gutter:56px; --panel-w:380px; --panel-w-l:380px; --panel-w-r:380px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow:hidden}
body{margin:0; background:var(--desk); color:var(--ink); font-family:var(--ui);
  overflow:hidden}

/* ───────────────────────────── toolbar ─────────────────────────────── */
#bar{
  height:48px; display:flex; align-items:center; gap:.4rem; padding:0 .6rem;
  background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.btn{
  font:600 .78rem var(--ui); color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:.35rem; padding:.36rem .6rem;
  cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--pink-pale)}
.btn.icon{padding:.34rem .45rem; display:inline-flex; align-items:center}
.btn.icon svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; fill:none; display:block}
.btn[aria-expanded="true"]{background:var(--pink); border-color:var(--pink); color:#fff}
#pager{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.5rem;
}
.arrow{
  font:400 1.1rem/1 var(--ui); width:1.7rem; height:1.7rem; border-radius:.35rem;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
}
.arrow:hover:not(:disabled){background:var(--pink-pale)}
.arrow:disabled{opacity:.3; cursor:default}
#where{display:flex; align-items:center; gap:.3rem; font-size:.75rem;
  color:var(--dim); font-variant-numeric:tabular-nums}
#pageno{
  font:inherit; font-size:.75rem; font-variant-numeric:tabular-nums;
  /* room for every digit the binder can reach, plus its own padding — the
     box-sizing is border-box, so a bare `ch` width clips the number */
  width:calc(var(--pageno-ch, 3ch) + .95rem);
  text-align:center; padding:.22rem .2rem; color:var(--ink);
  background:#F7F4F5; border:1px solid transparent; border-radius:.25rem;
}
#pageno:hover{background:#fff; border-color:var(--line)}
#pageno:focus{background:#fff; outline:2px solid var(--pink); outline-offset:-1px}
#oftotal{white-space:nowrap; letter-spacing:.01em}
#q{
  font:400 .78rem var(--ui); width:min(20vw,190px); margin-left:auto;
  padding:.36rem .55rem;
  border:1px solid var(--line); border-radius:.35rem; background:#fff; color:var(--ink);
}
#q:focus{outline:2px solid var(--pink); outline-offset:-1px; border-color:transparent}
.round{
  flex:none; width:1.75rem; height:1.75rem; border-radius:50%; cursor:pointer;
  font:700 .82rem/1 var(--ui); color:var(--ink); background:#fff;
  border:1px solid var(--line); display:grid; place-items:center; padding:0;
}
.round:hover{background:var(--pink-pale)}

/* ───────────────────────────── the binder ──────────────────────────── */
#desk{
  height:var(--desk-h,70vh); display:flex; align-items:center;
  justify-content:center;
  padding:.8rem calc(.8rem + var(--pad-r,0px)) .8rem calc(.8rem + var(--pad-l,0px));
  /* The boards sit 14px outside the paper and the sheet stacks reach further
     still, so the binder is wider than the window it is centred in. That made
     the document horizontally scrollable — invisible on a desktop, but on iOS
     it is pannable, and after a pinch a swipe would drag the page sideways as
     well as turning it. Clipping here means the overflow simply isn't there. */
  overflow:hidden;
}
#book{position:relative; display:flex; align-items:center; justify-content:center}
/* everything that has to line up lives inside #paper, so 50% means one thing */
#paper{position:relative; width:calc(var(--page-w)*2 + var(--gutter));
  height:var(--page-h)}

/* One slab, one gradient. Two boards each painting their own gradient met at
   two different shades, which put a tonal step next to the true centre and made
   the crease look off. */
#boards{
  position:absolute; top:-13px; bottom:-13px; left:-14px; right:-14px; z-index:0;
  border-radius:9px;
  background:linear-gradient(170deg,#E4718F,var(--pink) 40%,#C75179);
  box-shadow:inset 0 0 0 1px rgba(94,31,55,.24), 0 13px 26px rgba(94,31,55,.2);
}
/* the spine well; the crease is its exact middle, by construction */
#spine{
  position:absolute; top:-13px; bottom:-13px; z-index:1; pointer-events:none;
  left:calc(50% - var(--gutter) / 2); width:var(--gutter);
  background:linear-gradient(90deg,rgba(60,20,36,.34),rgba(94,31,55,.12) 40%,
    rgba(94,31,55,.12) 60%,rgba(60,20,36,.34));
}
#spine::after{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(50% - 1px); width:2px;
  background:linear-gradient(90deg,rgba(60,20,36,.3),rgba(255,255,255,.1));
}

/* the sheets stacked behind the two on show */
#stacks{position:absolute; inset:0; z-index:2; pointer-events:none}
#stacks i{
  position:absolute; background:#FBF8F6; border-radius:2px;
  box-shadow:0 0 0 1px rgba(92,62,72,.16), 0 1px 1px rgba(92,62,72,.07);
}

.page{
  position:absolute; top:0; height:100%; width:var(--page-w); z-index:3;
  background:#fff; overflow:hidden;
}
.page-l{left:0; box-shadow:-1px 2px 6px rgba(60,30,45,.2)}
.page-r{right:0; box-shadow:1px 2px 6px rgba(60,30,45,.2)}
/* the rendered PDF page, sized to its own aspect and centred in the sheet box */
.sheet{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.sheet canvas{display:block; width:100%; height:100%; background:#fff;
  user-select:none; -webkit-user-drag:none}
.page.blank{background:transparent; box-shadow:none}
.page.blank .sheet{display:none}

/* PDF.js's own text layer: the PDF's characters, invisible but selectable.
   These rules are the ones PDF.js's viewer ships; the spans it builds size
   themselves from --scale-factor, which is set per page as it renders. */
.textLayer{
  position:absolute; inset:0; overflow:clip; line-height:1; cursor:text;
  z-index:2; text-size-adjust:none; forced-color-adjust:none;
  transform-origin:0 0; caret-color:CanvasText;
}
.textLayer span,.textLayer br{
  position:absolute; white-space:pre; transform-origin:0 0; color:transparent;
}
.textLayer span.markedContent{top:0; height:0}
.textLayer ::selection{background:rgba(84,132,255,.34)}
.textLayer br::selection{background:transparent}
/* The span that catches the gaps. While a drag is in progress this is stretched
   over the whole layer, behind the text, so that a pointer between two lines
   lands on the *last* node in document order instead of whatever span happens
   to be nearest — which is what makes a selection run backwards. */
.textLayer .endOfContent{
  display:block; position:absolute; inset:100% 0 0; z-index:-1;
  cursor:default; user-select:none;
}
.textLayer.selecting .endOfContent{top:0}
/* The PDF's own hyperlinks, over the text so they stay clickable. The layer
   itself must not take the pointer — it covers the whole page, and as a solid
   box it swallows every attempt to select text. Only the links do. */
.ll{position:absolute; inset:0; z-index:3; pointer-events:none}
.ll a{position:absolute; display:block; border-radius:2px; pointer-events:auto}
.ll a:hover{background:rgba(84,132,255,.16); box-shadow:0 0 0 1px rgba(84,132,255,.4)}
.hl{position:absolute; inset:0; pointer-events:none; z-index:1}
.hl i{position:absolute; background:rgba(255,209,0,.45); border-radius:1px}

/* holes are punched in paper, so they go where there is paper */
#holes{position:absolute; inset:0; pointer-events:none; z-index:4}
#paper.no-l #holes .h-l,#paper.no-r #holes .h-r{display:none}
#holes i{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#E9E3E3,#D2C7CC 60%,#B6A8AE);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}

/* ─────────────── the closed binder, flat and unmarked ──────────────── */
#closed{
  position:absolute; top:-13px; bottom:-13px; left:50%; z-index:6; display:none;
  /* a shut binder is wider than a sheet of paper, so it gets its own shape */
  width:min(calc((var(--page-h) + 26px) * .88), 100%); transform:translateX(-50%);
  border-radius:3px 8px 8px 3px;
  background:linear-gradient(97deg,#D4577F 0 3%,var(--pink) 10%,#E06E93 55%,
    var(--pink) 88%,#CB5680);
  box-shadow:0 10px 26px rgba(94,31,55,.26), inset 0 0 0 1px rgba(94,31,55,.22);
}
body.closed #closed{display:block}
/* the back board is the same board seen from the other side, so the spine and
   the sheen's highlight fall on the right instead of the left */
body.back #closed{transform:translateX(-50%) scaleX(-1)}
body.closed .page,body.closed #stacks,body.closed #holes,
body.closed #boards,body.closed #spine{visibility:hidden}
#closed .spine{
  position:absolute; left:0; top:0; bottom:0; width:6.5%; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#A83E63,#C2517A 60%,#D45C85);
  box-shadow:inset -2px 0 4px rgba(60,20,36,.28);
}
#closed .sleeve{
  position:absolute; inset:1.7% 1.7% 1.7% 9.6%; border-radius:1px;
  background:linear-gradient(104deg,rgba(255,255,255,.3) 0 12%,
    rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 46%,
    rgba(255,255,255,.12) 74%,rgba(255,255,255,0) 90%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 1px rgba(94,31,55,.1);
}

/* ──────────────────────────── panel ────────────────────────────────── */
/* A panel opens on the side of the control that opened it: Contents from the
   hamburger on the left, results from the search box on the right. They are
   separate elements, so both can be open together — and when they are, the desk
   is padded by the same amount so the binder sits between them rather than
   behind them. */
.panel{
  position:fixed; top:48px; bottom:0;
  background:#fff; z-index:30; display:flex; flex-direction:column;
}
.panel.at-left{width:var(--panel-w-l)}
.panel.at-right{width:var(--panel-w-r)}
.panel.at-left{
  left:0; border-right:1px solid var(--line);
  box-shadow:10px 0 30px rgba(94,31,55,.14);
}
.panel.at-right{
  right:0; border-left:1px solid var(--line);
  box-shadow:-10px 0 30px rgba(94,31,55,.14);
}
.panel[hidden]{display:none}

/* the inner edge is a drag handle; it sits just outside the panel so the
   pointer finds it before it finds the page underneath */
.grip{
  position:absolute; top:0; bottom:0; width:11px; z-index:2;
  cursor:col-resize; touch-action:none;
}
.panel.at-left .grip{right:-5px}
.panel.at-right .grip{left:-5px}
.grip::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-50%); background:transparent; transition:background .12s;
}
.grip:hover::after,.panel.resizing .grip::after{background:var(--pink)}
body.resizing{cursor:col-resize; user-select:none}
body.resizing .tl{pointer-events:none}
.panel-top{display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; border-bottom:1px solid var(--line)}
.panel-top .panel-title{font-size:.82rem}
.x{font:400 1.3rem/1 var(--ui); background:none; border:none; cursor:pointer;
  color:var(--dim); padding:0 .2rem}
.x:hover{color:var(--ink)}
.panel-body{overflow:auto; flex:1; padding:0 0 2rem}

.entry{padding:.7rem .8rem; border-bottom:1px solid #F2EAED}
.entry .go{
  display:flex; align-items:baseline; gap:.5rem; width:100%; text-align:left;
  background:none; border:none; font:inherit; cursor:pointer; padding:0;
  color:var(--pink-deep); margin-bottom:.2rem;
}
.entry .go:hover .t{text-decoration:underline}
.entry .t{font-weight:700; font-size:.84rem; flex:0 1 auto}
.entry .fill{flex:1 1 auto; border-bottom:1px dotted #D9CCD2;
  transform:translateY(-.2em); min-width:1rem}
.entry .pg{font-size:.72rem; color:var(--dim); font-variant-numeric:tabular-nums;
  white-space:nowrap; flex:0 0 auto}
.entry .by{font-size:.76rem; color:var(--ink); margin:0 0 .15rem}
.entry .meta{font-size:.72rem; color:var(--dim); line-height:1.5; margin:0}
.entry .meta a{color:var(--pink-dark); word-break:break-all}

/* opening the real PDF, which is how printing works */
.entry .pdf{
  display:inline-block; margin-top:.5rem; padding:.26rem .6rem;
  font-size:.72rem; font-weight:600; color:var(--pink-deep); text-decoration:none;
  background:var(--pink-pale); border:1px solid #F0CEDC; border-radius:.3rem;
}
.entry .pdf:hover{background:#F8D5E2; border-color:var(--pink)}
.pdf.all{
  display:block; margin:.9rem .8rem 0; padding:.6rem .8rem; text-align:center;
  font-size:.78rem; font-weight:700; color:#fff; text-decoration:none;
  background:var(--pink); border-radius:.35rem;
}
.pdf.all:hover{background:var(--pink-dark)}

.hit{display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:1px solid #F2EAED; padding:.55rem .8rem; cursor:pointer; font:inherit}
.hit:hover{background:var(--pink-pale)}
.hit .meta{font-size:.66rem; color:var(--pink-dark); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:.15rem}
.hit .snip{font-size:.78rem; line-height:1.45; color:#3A3035}
.hit mark{background:#FFE9A8; color:inherit}
.empty{padding:1rem .8rem; font-size:.8rem; color:var(--dim)}

/* ───────────────────────── narrow screens ──────────────────────────── */
body.single #paper{width:var(--page-w)}
body.single .page-r,body.single #holes,body.single #spine{display:none}
body.single .page-l{left:0; width:100%}

@media (max-width:760px){
  /* iOS zooms the whole page when a focused field is smaller than 16px, and the
     toolbar comes back out of shape. 16px is the threshold that avoids it. */
  #q,#pageno{font-size:16px}
  /* allow pinch, but not double-tap-to-zoom on the controls themselves */
  #bar .btn,#bar .arrow,#bar .round,#q,#pageno{touch-action:manipulation}

  #bar{flex-wrap:wrap; height:auto; padding:.4rem .5rem; gap:.3rem}
  #pager{position:static; transform:none; order:3; width:100%;
    justify-content:center; margin-top:.15rem}
  #q{flex:1; width:auto; min-width:6rem; margin-left:0}
  #desk{padding:.5rem .4rem}
  /* too narrow to have sides: both come up from the bottom, one at a time */
  .grip{display:none}                 /* nothing to drag when it spans the width */
  .panel,.panel.at-left,.panel.at-right{
    top:auto; bottom:0; left:0; right:0; width:100%; height:70vh;
    border-left:none; border-right:none; border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(94,31,55,.14);
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ──────────────────────── about, on first visit ────────────────────── */
#about{
  border:none; border-radius:.7rem; padding:0; width:min(560px,92vw);
  max-height:min(78vh,760px); color:var(--ink); background:#fff;
  box-shadow:0 24px 60px rgba(94,31,55,.3);
}
#about::backdrop{background:rgba(60,26,40,.44)}
#about .x{
  position:absolute; top:.5rem; right:.6rem; z-index:1; line-height:1;
}
/* showModal() focuses the first focusable child, which was the close button —
   so the dialog opened with a focus ring drawn round the X. Focus belongs on
   the text anyway, which is what a screen reader should land on; the ring is
   dropped here because this is a programmatic target, not a control you tab to.
   The X keeps its own ring when actually tabbed to. */
.about-body:focus,.about-body:focus-visible{outline:none}
.about-body{
  padding:1.6rem 1.5rem 1.5rem; overflow:auto;
  max-height:min(78vh,760px);
  font-size:.86rem; line-height:1.6; color:#33292E;
}
.about-body p{margin:0 0 .9em}
.about-body p:last-child{margin-bottom:0}
/* --pink itself is about 3.5:1 on white, which is under the contrast floor for
   text this size; --pink-dark reads as the same accent and clears it */
.about-body strong{color:var(--pink-dark)}
.about-body a{color:var(--pink-dark)}
.about-body h2,.about-body h3,.about-body h4{
  font-size:.92rem; margin:1.2em 0 .4em; color:var(--pink-deep);
}