/* File: css/library.css
   Library page (library.html): a shelf of original publications and a reader
   in which highlighted passages come to life as small SVG animations next to
   the text. The markup is generated by build.mjs from stories-database/library/;
   the look follows the design draft (mathematics-visualized-entwurf-e). */

/* Tokens, mapped onto the site theme. Dark is the default, like everywhere
   on the site. */
.library {
  --surface: #2B2C37;
  --ink: #F2F2F5;
  --muted: var(--text-muted);
  --line: #3A3C4A;
  --tint: #2E3749;

  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: clamp(64px, 7vw, 104px);
  color: var(--ink);
  font-family: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
}

:root[data-theme="light"] .library {
  --surface: #FFFFFF;
  --ink: #22232B;
  --line: #E1E3E8;
  --tint: #E6ECF5;
}

/* The site styles running text justified; the library sets it flush left. */
.library p {
  text-align: left;
}

.library h2,
.library h3,
.library h4 {
  color: inherit;
}

/* --- Shelf --------------------------------------------------------------- */

.lib-shelf-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lib-h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.lib-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 24px;
}

.lib-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(135deg, var(--cover-a), var(--cover-b));
  box-shadow: inset 12px 0 0 rgba(0,0,0,0.28), inset 13px 0 0 rgba(255,255,255,0.06), 0 18px 32px -20px rgba(0,0,0,0.65);
  text-decoration: none;
}
.lib-cover:hover { text-decoration: none; }
.lib-cover.is-current {
  outline: 2px solid #3D7ED3;
  outline-offset: 3px;
}
.lib-cover.is-coming { opacity: 0.62; }

.lib-cover-frame {
  position: absolute;
  inset: 14px 14px 14px 24px;
  border: 1px solid rgba(235,173,31,0.55);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 16px 16px;
  text-align: center;
}
.lib-cover-top { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lib-cover-bottom { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lib-cover-author {
  font: 500 15px 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: #E9C779;
}
.lib-cover-title {
  font: 500 clamp(19px, 1.6vw, 23px)/1.2 'EB Garamond', Garamond, 'Times New Roman', serif;
  color: #F1D48C;
  text-wrap: balance;
}
.lib-cover-rule { width: 36px; height: 1px; background: rgba(235,173,31,0.6); }
.lib-cover-year { font: 400 15px 'EB Garamond', Garamond, 'Times New Roman', serif; color: #E9C779; }
.lib-cover-edition { font: italic 400 13px 'EB Garamond', Garamond, 'Times New Roman', serif; color: #CDB57E; }

.lib-cover-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245,245,245,0.16);
  color: #E6E6EA;
  font: 500 12px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
}
.lib-cover.is-current .lib-cover-badge {
  background: #3D7ED3;
  color: #FFFFFF;
}

/* Phone: two covers per row instead of one huge one, and a little more
   space below the heading. */
@media (max-width: 767px) {
  .lib-shelf-wrap { gap: 28px; }
  .lib-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the covers are about half as wide here, so is everything on them */
  .lib-cover-frame { inset: 10px 10px 10px 18px; padding: 22px 8px 10px; }
  .lib-cover-top { gap: 6px; }
  .lib-cover-author { font-size: 11px; letter-spacing: 0.08em; line-height: 1.3; }
  .lib-cover-title {
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lib-cover-year { font-size: 12px; }
  .lib-cover-edition { font-size: 10.5px; line-height: 1.25; }
  .lib-cover-badge { right: 6px; top: 6px; padding: 2px 7px; font-size: 10px; }
}

.up-card{transition:transform .2s ease,box-shadow .2s ease}
.up-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -22px rgba(16,18,26,.45)}

/* --- Reader -------------------------------------------------------------- */

.lib-reader {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Title, go-to-page field and section buttons above the page */
.lib-reader-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.lib-reader-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.lib-reader-titles { display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
.lib-reader-title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; }
.library .lib-reader-source { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.lib-reader-source strong { font-weight: 500; color: var(--ink); }

/* Original / translation / side by side */
.lib-modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.lib-mode {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: 500 14px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
}
.lib-mode[aria-pressed="true"] { background: #2F6DBF; color: #FFFFFF; }

/* Section buttons left, go-to field right */
.lib-reader-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.lib-goto { display: flex; align-items: center; gap: 8px; }
.lib-goto-input {
  width: 170px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
}
.lib-goto-input::placeholder { color: var(--muted); }
.lib-goto-btn {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #2F6DBF;
  color: #FFFFFF;
  font: 500 15px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
}
.lib-goto-btn:hover { background: #285FA8; }
.library .lib-goto-msg {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--tint);
  font-size: 15px;
  color: var(--ink);
}

.lib-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-tab,
.lib-strip-btn {
  transition: background-color .15s ease, border-color .15s ease;
}
.lib-tab:hover,
.lib-strip-btn:hover { border-color: #3D7ED3; }
.lib-tab {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 400 15px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
}
.lib-tab[aria-pressed="true"] {
  border-color: #3D7ED3;
  background: var(--tint);
}

.lib-reader-body {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
  margin-top: -10px;
}
.lib-book-col { flex: 1.7 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Above a page that follows pages left out of the excerpt */
.lib-gap-note {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}
.lib-gap-note::before,
.lib-gap-note::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--line);
}
.lib-gap-note[hidden],
.lib-goto-msg[hidden] { display: none; }

/* The page itself: one sheet is one printed page, so a page with a lot of
   text simply makes a taller sheet instead of smaller type. */
.lib-book {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3.6vw, 50px) 20px;
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(90deg, #E2D6BA 0%, #F1E8D2 4%, #F6EFDD 55%, #F2E9D4 100%);
  color: #2B241A;
  box-shadow: 2px 2px 0 #E3D8BD, 4px 4px 0 #D7CBAE, 6px 6px 0 #CABD9F, 0 26px 50px -26px rgba(20,16,8,0.55);
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.5;
}
.lib-running-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid #D8CBAE;
  font-size: 14px;
  letter-spacing: 0.1em;
  font-variant-caps: all-small-caps;
  color: #7A6A4F;
}
.lib-title {
  margin: 4px 0 2px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}
.lib-heading {
  margin: 6px 0 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}
/* a second heading on the same page gets more room above it */
.lib-flow > * + .lib-heading,
.lib-rows > .lib-row + .lib-row .lib-heading { margin-top: 18px; }
.lib-flow > .lib-title + .lib-heading,
.lib-rows > .lib-row:has(.lib-title) + .lib-row .lib-heading { margin-top: 6px; }

/* Each page comes three times: the original alone, the translation alone
   (both with the printed paragraphs) and the two side by side in rows, so
   each Greek sentence stays next to its English. The reader's text version
   picks one. */
.lib-reader[data-mode="both"] .lib-flow,
.lib-reader:not([data-mode="both"]) .lib-rows,
.lib-reader[data-mode="trans"] .lib-flow.lib-orig,
.lib-reader[data-mode="orig"] .lib-flow.lib-trans,
.lib-reader[data-mode="trans"] .lib-rh-orig,
.lib-reader[data-mode="orig"] .lib-rh-trans,
.lib-reader:not([data-mode="both"]) .lib-rh-sep { display: none; }
.lib-reader[data-mode="both"] .lib-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
}
.lib-reader[data-mode="both"] .lib-orig {
  height: 100%;
  padding-right: 24px;
  border-right: 1px solid #D8CBAE;
}
.lib-cell:empty { min-height: 1px; }
/* Greek headings as printed: small caps would turn "μζ΄." into capitals */
.lib-orig .lib-title,
.lib-orig .lib-heading { font-variant-caps: normal; letter-spacing: 0.04em; }
.lib-ph { color: #9C8B6B; font-style: italic; font-size: 0.9em; }

.library .lib-book p { margin: 0 0 8px; }
.library .lib-book .lib-item { margin-bottom: 7px; padding-left: 1.5em; text-indent: -1.5em; }
.library .lib-book .lib-enunciation { margin-bottom: 12px; text-align: center; font-style: italic; }
.library .lib-book .lib-gap { margin-top: 4px; text-align: center; color: #8C7B5C; }
.lib-sc { font-variant-caps: small-caps; }
.lib-cite { color: #8C7B5C; font-size: 0.88em; }
.lib-page-no {
  margin-top: auto;
  padding-top: 16px;
  text-align: center;
  font-size: 15px;
  color: #7A6A4F;
}

/* Highlighted passages and the small references; the active one in gold */
.lib-pass,
.lib-ref {
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.lib-pass {
  padding: 1px 2px;
  margin: 0 -2px;
  text-decoration: underline dotted #B8862B;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lib-ref {
  padding: 0 3px;
  color: #8A5F12;
  font-size: 0.88em;
  white-space: nowrap;
}
.bk-pass[aria-pressed="true"] {
  background: rgba(235, 173, 31, 0.38);
}

/* Previous / next page, with the printed page number between them */
.lib-pager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.lib-pager-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 500 15px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lib-pager-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.lib-pager-pos { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lib-pager-folio { font-size: 20px; font-weight: 500; color: var(--ink); }
.lib-pager-count { font-size: 13px; color: var(--muted); }

/* All pages of the excerpt; "…" where pages are left out */
.lib-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.lib-strip-btn {
  min-width: 48px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 500 14px 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
}
.lib-strip-btn[aria-pressed="true"] {
  border-color: #2F6DBF;
  background: #2F6DBF;
  color: #FFFFFF;
}
.lib-strip-gap { padding: 0 4px; font-size: 15px; color: var(--muted); cursor: default; }

/* Animation panel next to the page */
.lib-panel { flex: 1 1 340px; min-width: 0; position: sticky; top: 24px; }
.lib-panel-wrap { position: relative; }
.lib-panel-tail {
  position: absolute;
  left: -14px;
  top: 54px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 14px solid #3D7ED3;
}
.lib-panel-card {
  background: #2E2F39;
  border: 2px solid #3D7ED3;
  border-radius: 16px;
  overflow: hidden;
  color: #F5F5F5;
}
.lib-panel-head { padding: 18px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.lib-panel-where { font-size: 13px; color: #A9ABB8; }
.lib-panel-label { font-size: 18px; font-weight: 500; color: #EBAD1F; }
.lib-stage { height: 330px; padding: 10px 18px; }
/* the wrapper needs the stage's height, or tall drawings (Prop. 47) size
   themselves by width and spill over the note */
.lib-anim { height: 100%; }
.lib-stage svg { display: block; width: 100%; height: 100%; }
.library .lib-panel-note { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: #E3E4EA; }
.library .lib-hint { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.lib-hint-mark { display: inline-block; flex: none; width: 22px; border-bottom: 2px dotted #B8862B; }

/* --- Animations of the passage SVGs (classes used inside the SVG files) ---
   bk-d1 / bk-d2 / bk-d3  draw a line or path, one after the other (pathLength="1")
   bk-dline               draw a line slowly
   bk-sw                  draw a circle (pathLength="1")
   bk-rot                 turn once around (set transform-origin on the element)
   bk-move                move 280px to the right
   bk-f1 … bk-f4          fade in, one after the other
   bk-ring                zoom ring (set transform-origin on the element)
   bk-slide               slide by --dx / --dy (set on the element, in viewBox
                          units) and stay there, e.g. one triangle laid on another
   All of them loop every 5–6 s. */
.bk-pass{transition:background-color .15s ease,box-shadow .15s ease}
.bk-pass:hover{box-shadow:0 0 0 2px rgba(184,134,43,.35)}
.bk-d1,.bk-d2,.bk-d3,.bk-dline,.bk-sw{stroke-dasharray:1}
.bk-d1{animation:bk-d1 6s ease-in-out infinite}
.bk-d2{animation:bk-d2 6s ease-in-out infinite}
.bk-d3{animation:bk-d3 6s ease-in-out infinite}
.bk-dline{animation:bk-dline 5s ease-in-out infinite}
.bk-move{transform-box:view-box;animation:bk-move 5s ease-in-out infinite}
.bk-sw{animation:bk-sw 6s ease-in-out infinite}
.bk-rot{transform-box:view-box;animation:bk-rot 6s ease-in-out infinite}
.bk-f1{animation:bk-f1 6s ease infinite}
.bk-f2{animation:bk-f2 6s ease infinite}
.bk-f3{animation:bk-f3 6s ease infinite}
.bk-f4{animation:bk-f4 6s ease infinite}
.bk-ring{transform-box:view-box;animation:bk-ring 3s ease-out infinite}
.bk-slide{transform-box:view-box;animation:bk-slide 6s ease-in-out infinite}
@keyframes bk-d1{0%{stroke-dashoffset:1;opacity:1}25%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bk-d2{0%,25%{stroke-dashoffset:1;opacity:1}50%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bk-d3{0%,50%{stroke-dashoffset:1;opacity:1}75%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bk-dline{0%{stroke-dashoffset:1;opacity:1}60%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bk-move{0%{transform:translateX(0);opacity:1}60%{transform:translateX(280px)}90%{transform:translateX(280px);opacity:1}100%{transform:translateX(280px);opacity:0}}
@keyframes bk-sw{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bk-rot{0%{transform:rotate(0deg);opacity:1}55%{transform:rotate(360deg);opacity:1}68%,100%{transform:rotate(360deg);opacity:0}}
@keyframes bk-f1{0%{opacity:0}12%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes bk-f2{0%,25%{opacity:0}37%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes bk-f3{0%,50%{opacity:0}62%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes bk-f4{0%,72%{opacity:0}82%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes bk-slide{0%,12%{transform:translate(0,0);opacity:1}55%{transform:translate(var(--dx,0),var(--dy,0))}90%{transform:translate(var(--dx,0),var(--dy,0));opacity:1}100%{transform:translate(var(--dx,0),var(--dy,0));opacity:0}}
@keyframes bk-ring{0%{transform:scale(.2);opacity:0}20%{opacity:.9}100%{transform:scale(4);opacity:0}}
@keyframes bk-turnA{0%{opacity:0;transform:perspective(1800px) rotateY(-12deg) translateX(-10px)}100%{opacity:1;transform:none}}
@keyframes bk-turnB{0%{opacity:0;transform:perspective(1800px) rotateY(-12deg) translateX(-10px)}100%{opacity:1;transform:none}}
.bk-turnA{transform-origin:left center;animation:bk-turnA .5s ease-out}
.bk-turnB{transform-origin:left center;animation:bk-turnB .5s ease-out}
/* Below 992px the container is too narrow for page and panel side by side:
   the panel goes above the page, scrolls away with it instead of sticking
   (so the page never slides underneath it) and loses its tail. */
@media (max-width: 991px) {
  .lib-reader-body { flex-direction: column; align-items: stretch; }
  .lib-book-col { flex: none; width: 100%; }
  .lib-panel { order: -1; position: static; flex: none; width: 100%; }
  .lib-panel-tail { display: none; }
  .lib-stage { height: 220px; }
}

/* Too narrow for two columns: side by side, the Greek goes above its English */
@media (max-width: 760px) {
  .lib-reader[data-mode="both"] .lib-row { grid-template-columns: minmax(0, 1fr); }
  /* a shade lighter, so the two languages stay apart when stacked */
  .lib-reader[data-mode="both"] .lib-orig { height: auto; padding-right: 0; border-right: 0; color: #6B5D45; }
}

/* Phone: a little more room between the page and the previous / next
   buttons, which get narrower so the page number fits between them */
@media (max-width: 767px) {
  .lib-book-col { gap: 26px; }
  .lib-pager { gap: 8px; }
  .lib-pager-btn { padding: 0 10px; gap: 4px; }
  .lib-pager-folio { font-size: 18px; }
}
@media (prefers-reduced-motion:reduce){.bk-d1,.bk-d2,.bk-d3,.bk-dline,.bk-sw{animation:none;stroke-dashoffset:0}.bk-f1,.bk-f2,.bk-f3,.bk-f4{animation:none;opacity:1}.bk-move{animation:none;transform:translateX(280px)}.bk-rot{animation:none;opacity:0}.bk-ring{animation:none;opacity:.5;transform:scale(1.5)}.bk-slide{animation:none;transform:translate(var(--dx,0),var(--dy,0))}.bk-turnA,.bk-turnB{animation:none}}