:root {
  --ink: #2b2822;
  --muted: #8c8578;
  --line: #ddd6c4;
  --bg: #f3eee2;        /* ecru */
  --reader-bg: #e9e2d1;  /* a shade deeper, so white pages sit on top of it */
}

* { box-sizing: border-box; }

/* [hidden] is only as specific as a class, so any display rule of ours would
   quietly beat it and leave "hidden" elements on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Labels stay for screen readers even where the design shows only a placeholder. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

img.page { -webkit-user-drag: none; user-select: none; pointer-events: none; }

@media print {
  body::before {
    content: "This library is for on-screen use.";
    display: block; padding: 5rem 2rem; font-size: 18pt; text-align: center;
  }
  body > * { display: none !important; }
}

.btn {
  border: 0; border-radius: 2px; padding: .55rem 1rem;
  background: var(--ink); color: #fff;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.btn:hover { opacity: .82; }

.wrap { max-width: 560px; margin: 0 auto; padding: 6rem 1.75rem; }
.empty { color: var(--muted); font-size: .9rem; }

/* Shown when a reader has no subscription yet. Deliberately quiet: the books
   themselves are the argument, not a banner shouting over them. */
.notice {
  margin: 0 0 2.5rem; padding: 1.25rem 1.4rem;
  background: var(--reader-bg); border-radius: 4px;
}
.notice p { margin: 0 0 .9rem; font-size: .92rem; }
.notice p:last-child { margin-bottom: 0; }
.notice .btn { display: inline-block; text-decoration: none; }
.buys { display: flex; flex-wrap: wrap; gap: .6rem; }
.buy {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem 1rem; border-radius: 3px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font-size: .85rem;
}
.buy:hover { opacity: .85; }
.buy .dim { color: var(--bg); opacity: .6; font-size: .72rem; }
.notice .dim { color: var(--muted); font-size: .85rem; }
.reader .notice { max-width: 26rem; margin: 20vh auto; background: var(--bg); }

/* ---- shelf: titles, and nothing else ---- */
.shelf h2 {
  margin: 3rem 0 0;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
a.book {
  display: block; padding: .55rem 0;
  color: var(--ink); text-decoration: none; font-size: 1rem;
}
a.book:hover { color: var(--muted); }

.foot {
  display: flex; gap: 1.25rem; align-items: baseline;
  margin-top: 6rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .75rem;
}
.foot a, .foot button {
  border: 0; padding: 0; background: none;
  color: var(--muted); font: inherit; text-decoration: none; cursor: pointer;
}
.foot a:hover, .foot button:hover { color: var(--ink); }
.foot button { margin-left: auto; }

/* ---- login: two fields ---- */
.login { max-width: 260px; margin: 24vh auto; }
.login input {
  width: 100%; margin-bottom: 1.25rem; padding: .5rem 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; font: inherit;
}
.login input::placeholder { color: var(--muted); }
.login input:focus { outline: 0; border-bottom-color: var(--ink); }
.login .btn { width: 100%; }
.err { margin: 0 0 1.25rem; color: #b3261e; font-size: .82rem; }

.gbtn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 2px;
  background: #fffdf8; color: var(--ink);
  font: inherit; font-size: .85rem; text-decoration: none;
}
.gbtn:hover { border-color: var(--muted); }
#google, #microsoft { margin-bottom: .6rem; }
.alt {
  display: block; width: 100%; margin-top: 1.5rem;
  border: 0; background: none; padding: 0;
  color: var(--muted); font: inherit; font-size: .78rem; text-align: center; cursor: pointer;
}
.alt:hover { color: var(--ink); }

/* ---- reader: the page is the whole interface ---- */
/* The html element needs it too, or overscroll shows the shelf tone behind. */
html.reader, body.reader { background: var(--reader-bg); }
body.reader { min-height: 100vh; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 1.25rem .75rem 4rem; }
.page-slot {
  width: min(100%, var(--page-w, 900px));
  background: #fff;
  box-shadow: 0 1px 4px rgba(70,60,40,.13);
}
.page-slot { position: relative; }
.page-slot img { display: block; width: 100%; height: auto; }
/* Invisible anchors over a contents page the author made clickable. */
.hotspot { position: absolute; display: block; border-radius: 2px; }
.hotspot:hover { background: rgba(43,40,34,.07); }
.hotspot:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.page-slot.pending { aspect-ratio: 1 / 1.414; }

.retry {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  color: var(--muted); font-size: .85rem; text-align: center; padding: 1rem;
}
.retry p { margin: 0; }
.retry button {
  border: 1px solid var(--line); border-radius: 2px; padding: .4rem .9rem;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer;
}
.retry button:hover { border-color: var(--muted); }

.chrome {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .45rem 1.1rem; border-radius: 100px;
  background: rgba(249,246,238,.92);
  box-shadow: 0 1px 10px rgba(70,60,40,.15);
  backdrop-filter: blur(10px);
  color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.chrome.awake { opacity: 1; pointer-events: auto; }
.chrome a, .chrome button {
  border: 0; padding: 0; background: none;
  color: var(--muted); font: inherit; font-size: .95rem; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.chrome a:hover, .chrome button:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .chrome { transition: none; }
}

/* ---- search and contents: one panel behind one control ---- */
/* Docked to the left margin so the page stays readable beside it, rather than
   sitting over the middle of what you are trying to read. */
.panel {
  position: fixed; z-index: 40;
  left: 1rem; top: 1rem; bottom: 1rem; width: 19rem;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 4px 24px rgba(70,60,40,.16);
  overflow: hidden;
}
.panel-top {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.panel input {
  flex: 1; min-width: 0;
  border: 0; border-radius: 0; padding: .75rem .9rem;
  background: none; font: inherit; font-size: .88rem; color: var(--ink);
}
.panel input::placeholder { color: var(--muted); }
.panel input:focus { outline: 0; }
.panel input::-webkit-search-cancel-button { display: none; }
.close {
  border: 0; background: none; padding: 0 .9rem;
  color: var(--muted); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.close:hover { color: var(--ink); }
.close:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.results { overflow-y: auto; padding: .3rem 0; }
.hit {
  display: flex; align-items: baseline; gap: .7rem; width: 100%;
  padding: .45rem .9rem; border: 0; background: none;
  font: inherit; font-size: .82rem; text-align: left; color: var(--ink); cursor: pointer;
}
.hit:hover, .hit:focus-visible { background: var(--reader-bg); outline: 0; }
.hit .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit .pg { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.hit mark { background: none; color: var(--ink); font-weight: 600; }
.none { margin: 0; padding: 1rem .9rem; color: var(--muted); font-size: .82rem; }

/* While the panel is docked, the pages recentre in what is left, so the panel
   never sits on top of what you are reading. */
@media (min-width: 781px) {
  body.reader.panel-open .pages { padding-left: 21rem; }
}
.pages { transition: padding-left .25s ease; }
@media (prefers-reduced-motion: reduce) { .pages { transition: none; } }

/* Too narrow to dock beside the page: become a bottom sheet instead. */
@media (max-width: 780px) {
  .panel {
    left: .6rem; right: .6rem; width: auto;
    top: auto; bottom: 4.25rem; max-height: 55vh;
  }
}

.chrome svg { display: block; }
/* [hidden] on an SVG group needs the same help as it does on an element. */
.chrome svg g[hidden] { display: none; }