/* ============================================================
   COPY OF app/lexicon/lexicon-shelves.css, 2026-08-25.

   The Library room at /resources is a static page and cannot import a
   stylesheet out of app/, so the real shelf's CSS is duplicated here to
   show the Lexicon inside the room. Two copies of a stylesheet is a
   liability: the room would quietly stop looking like the Lexicon and
   nobody would notice until Nina did.

   scripts/check-lexicon-shelf-copy.sh fails the moment they diverge.
   The real fix is to make /resources a Next route so both surfaces
   import one file, then delete this copy and that script. Until then,
   edit app/lexicon/ first and re-copy, never the other way round.
   ============================================================ */
/* === END COPY HEADER === */
/* Lexicon library: shelves of books, PITL brand. Companion to app/lexicon. */

.lex-lib {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 20px 60px;
}
.lex-lib-kicker {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #d9661c;
  margin: 0 0 6px;
}
.lex-lib-head h1 {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0 0 10px;
  color: #111827;
}
.lex-lib-sub {
  color: #6b7280;
  max-width: 58ch;
  margin: 0 0 26px;
}
.lex-lib-error,
.lex-lib-foot {
  color: #6b7280;
  font-size: 0.9rem;
}
.lex-lib-foot {
  border-top: 1px solid #e5e7eb;
  margin-top: 44px;
  padding-top: 18px;
}
.lex-lib a {
  color: #d9661c;
  font-weight: 600;
}

/* controls */
.lex-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 30px;
}
.lex-search {
  flex: 1;
  min-width: 240px;
  font: inherit;
  padding: 12px 16px;
  border: 2px solid #111827;
  border-radius: 12px;
  background: #fff;
}
.lex-search:focus {
  outline: 3px solid #f47a28;
  outline-offset: 1px;
}
.lex-viewtoggle {
  display: flex;
  border: 2px solid #111827;
  border-radius: 12px;
  overflow: hidden;
}
.lex-viewtoggle button {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 11px 16px;
  border: none;
  background: #fff;
  color: #111827;
  cursor: pointer;
}
.lex-viewtoggle button.on {
  background: #111827;
  color: #fff;
}
.lex-count {
  color: #6b7280;
  font-size: 0.9rem;
}

/* ============================================================
   THE SHELVES.

   Same book language as the Reading Room on /resources, with one
   deliberate difference: here the real books face FORWARD, because
   each one is a shelf you can actually open and the title has to be
   readable at a glance. The spine-out books beside them are filler,
   never focusable, never clickable, there so a shelf reads as a shelf
   rather than a row of four.

   ONE COPY IS GUARDED ON PURPOSE. The book primitives here also drive
   the Library room at public/resources.html, which is still static HTML
   and cannot import out of app/. public/assets/lexicon-shelves.css is a
   byte-identical copy, checked by scripts/check-lexicon-shelf-copy.sh
   before every build. Change one, run the guard's --accept, or the build
   fails the moment they diverge.
   ============================================================ */

/* LEATHER, decided 2026-08-25, replacing the navy call below.

   Nina tried five looks for the zoomed shelf and picked leather for
   wherever the real shelf is read: "I like when I open the lexicon and
   go to the actual lexicon page and when it's to look like the leather
   one." Bound volumes, walnut and oxblood with gold foil, warm shelf
   glow instead of the site's navy ground. The room's inline card at
   /resources carries the same palette, scoped under .lex-card in
   assets/library-room.css.

   The paragraph below is the 2026-08-20 decision this supersedes, kept
   for the record rather than deleted, since the reason it existed (brown
   only on the board, not the room) is worth knowing even though the
   newer instruction overrides it: "matching the Reading Room. NAVY, not
   brown. Brown belongs to the shelf board and nothing else, because the
   board is wood and the room is not." */
.lex-shelves {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px clamp(12px, 3vw, 26px) 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a1b0a 0%, #1b1006 62%, #120a03 100%);
  overflow: hidden;
}
.lex-shelves::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(48% 34% at 50% 0%, rgba(255, 196, 110, 0.26), transparent 70%);
}
.lex-shelf { position: relative; }
.lex-shelf-label h2 {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  margin: 0;
  color: #f2e3c6;
}
.lex-shelf-label p {
  color: #9c8967;
  font-size: 0.86rem;
  margin: 3px 0 16px;
  max-width: 60ch;
}

.lex-shelf-row {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  padding: 0 6px;
  min-height: 196px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #2b3d5c transparent;
}

/* ---------- a forward-facing book ---------- */
.lex-book {
  position: relative;
  flex: 0 0 auto;
  font: inherit;
  cursor: pointer;
  border: none;
  width: 132px;
  min-height: 182px;
  border-radius: 2px 4px 4px 2px;
  /* extra left padding clears the spine, extra right clears the page block */
  padding: 18px 16px 15px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  color: #f3d9a8;
  transform: rotate(var(--lean, 0deg));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.42);
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 0.28s ease;
}
/* the foil border stamped into the cloth */
.lex-book::after {
  content: "";
  position: absolute;
  inset: 9px 9px 9px 19px;
  border: 1px solid rgba(243, 217, 168, 0.32);
  border-radius: 1px;
  pointer-events: none;
}
/* the spine wrapping round the left edge, with its binding bands */
.lex-book::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15px;
  border-radius: 2px 0 0 2px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 20px,
      rgba(255, 255, 255, 0.18) 20px 23px,
      rgba(0, 0, 0, 0.3) 23px 26px,
      transparent 26px 46px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.07) 62%, rgba(0, 0, 0, 0.18));
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.28);
}
.lex-book:hover { transform: translateY(-9px) rotate(var(--lean, 0deg)); }
.lex-book:focus-visible { outline: 3px solid #f0a05c; outline-offset: 3px; }
.lex-book.open {
  transform: translateY(-13px) rotate(var(--lean, 0deg));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 0 0 2px #f0a05c,
    0 18px 34px rgba(0, 0, 0, 0.5);
}
.lex-book-title {
  position: relative;
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  text-wrap: balance;
  color: #f7ecd6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.lex-book-count {
  position: relative;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d8b978;
  opacity: 0.82;
}
.lex-book.placeholder {
  background: repeating-linear-gradient(-45deg, #2a2438 0 8px, #221d2e 8px 16px);
  color: rgba(243, 217, 168, 0.6);
  justify-content: center;
  align-items: center;
  cursor: default;
  padding: 18px 16px;
  box-shadow: inset 0 0 0 1px rgba(243, 217, 168, 0.16);
}
.lex-book.placeholder::before { opacity: 0.3; }
.lex-book.placeholder::after { border-color: rgba(243, 217, 168, 0.18); }

/* cloth colours. The gradient is the cloth, the pseudo-elements do the rest. */
.spine-orange { background: linear-gradient(160deg, #7a2e18, #43170b); }
.spine-pink { background: linear-gradient(160deg, #6b1330, #3a0a1b); }
.spine-purple { background: linear-gradient(160deg, #3b2a5c, #1f1533); }
.spine-teal { background: linear-gradient(160deg, #1b4f49, #0d2b27); }
.spine-green { background: linear-gradient(160deg, #2c4a22, #152710); }
.spine-amber { background: linear-gradient(160deg, #7a5716, #43300b); }
.spine-blue { background: linear-gradient(160deg, #1e3652, #0f1d2e); }

/* ---------- filler: spine-out books, decoration only ---------- */
.lex-filler {
  position: relative;
  flex: 0 0 auto;
  width: var(--w);
  height: var(--h);
  border-radius: 1px;
  transform: rotate(var(--lean, 0deg));
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0.09) 22%,
      rgba(255, 255, 255, 0.03) 62%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(180deg, var(--cloth), var(--cloth2));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.36);
}
/* woven cloth grain */
.lex-filler::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px);
}
/* the two raised binding bands */
.lex-filler::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.34));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 calc(var(--h) - 40px) 0 rgba(255, 255, 255, 0.06),
    0 calc(var(--h) - 43px) 0 rgba(0, 0, 0, 0.26);
}

/* ---------- the board they stand on ---------- */
.lex-shelf-board {
  position: relative;
  height: 22px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #6b4a32 0%, #4e3524 42%, #332217 100%);
  box-shadow:
    0 2px 0 rgba(255, 214, 170, 0.1) inset,
    0 16px 30px rgba(0, 0, 0, 0.5);
}
.lex-shelf-board::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 3px;
  background: linear-gradient(180deg, #8a6142, #5c3f2b);
}

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

/* open book + cards */
.lex-open-book {
  background: #fbf7f0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
}
.lex-open-book h3 {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 800;
  margin: 0 0 12px;
  color: #111827;
}

/* The shelf is dark. What you READ is not (Nina, 2026-08-20). Pull a book off
   a dark shelf and it opens onto paper, so every term card stays cream and
   white like the rest of the site. The only change inside the room is a
   stronger shadow, because a light panel on a dark ground needs to lift. */
.lex-shelves .lex-open-book {
  background: #fbf7f0;
  border: 1px solid #e4dccb;
  border-radius: 4px;
  margin-top: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.lex-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.lex-term {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
}
.lex-term h4 {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 700;
  margin: 0 0 6px;
  color: #111827;
}
.lex-term p {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #111827;
  line-height: 1.5;
}
.lex-analogy {
  color: #6b7280;
  font-style: italic;
}
.lex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lex-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
}
.lex-tag.area {
  background: #fde7d4;
  color: #a04a0d;
}
.lex-tag.shelf {
  background: #f3f4f6;
  color: #6b7280;
}
.lex-explainer a {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #d9661c;
  text-decoration: none;
}
.lex-explainer a:hover {
  text-decoration: underline;
}
.lex-sources {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 8px;
}

/* alphabetical */
.lex-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.lex-alpha a {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px 10px;
  text-decoration: none;
  color: #111827;
}
.lex-alpha a:hover {
  background: #fde7d4;
}
.lex-letter h2 {
  font-family: var(--font-syne, 'Syne'), sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: #d9661c;
  margin: 26px 0 10px;
}

/* On a phone the shelf scrolls sideways rather than wrapping, because a
   wrapped shelf stops reading as a shelf. The books shrink a little so two
   and a bit are visible, which is what signals there is more to scroll. */
@media (max-width: 560px) {
  .lex-shelves { padding: 28px 0 24px; border-radius: 0; }
  .lex-shelf-label { padding: 0 14px; }
  .lex-shelf-row { padding: 0 14px; min-height: 172px; }
  .lex-book { width: 118px; min-height: 158px; padding: 15px 13px 13px 23px; }
  .lex-book-title { font-size: 0.8rem; }
  .lex-shelf-board { margin: 0 14px; }
  .lex-shelves .lex-open-book { margin: 20px 14px 0; }
}