/* =========================================================================
   The Big Book of Modules — stylesheet
   -------------------------------------------------------------------------
   A leather-bound spellbook lying open on a dark table.
   Sibling of site-build/styles.css (Contributors Quest): same fonts, same
   accent gold, same parchment, same dark radial background — but the CRT
   frame, fake title bar and scanlines are gone, because a book has none.

   Sections, in order:
     1. Fonts + design tokens
     2. Page background (the dark table)
     3. The book: cover, spine, facing pages, gutter
     4. Titles + screens (route containers)
     5. Menu (category list on the cover page)
     6. Back link + screen headings
     7. Module list (category submenu)
     8. Module page: name, summary, use cases, link buttons
     9. Footer / colophon
    10. Responsive: 700px (roomier single page) and 900px (two facing pages)
    11. Reduced motion + forced colours
   ========================================================================= */


/* =========================================================================
   1. FONTS + DESIGN TOKENS
   Same Google Fonts import the quest site uses. No other external deps.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=VT323&display=swap");

:root {
  /* --- inherited from the quest site --- */
  --accent: #b8863b;              /* gilt gold — decorative use only */
  --ink: #3a2c1a;                 /* body text on parchment */
  --parchment-lo: #d8c090;        /* parchment shadow tone */
  --parchment-hi: #f1e2ba;        /* parchment highlight tone */
  --wood: #1c130c;
  --wood-hi: #2c1e12;
  --glow: rgba(184, 134, 59, 0.55);

  /* --- text colours chosen for contrast, not just for looks ---
     Every one of these clears 4.5:1 against the darkest parchment tone
     that actually sits underneath text (#e8d6ac). Plain --accent does NOT,
     so gold is never used for text on its own — --accent-ink is. */
  --ink-muted: #5c4321;           /* ~6.3:1 on light parchment */
  --accent-ink: #7a4e12;          /* ~4.9:1 — readable gold for text */

  /* --- book-specific --- */
  --leather: #3a2617;
  --leather-dark: #1a110a;
  --leather-edge: #0d0906;
  --page-light: #f7edd4;
  --page-mid: #ecdcb4;
  --rule: rgba(58, 44, 26, 0.32); /* hairline borders on parchment */
  --tint: rgba(255, 248, 227, 0.5);      /* raised paper tile */
  --tint-strong: rgba(255, 248, 227, 0.9);

  --spine-w: 22px;                /* widened at the 900px breakpoint */
  --page-pad: 20px;
  --focus: 3px;                   /* focus ring thickness */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* =========================================================================
   2. THE DARK TABLE
   Same radial gradient as the quest page so the two read as one world.
   ========================================================================= */
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 0%, #241a11, #0c0805 80%);
  background-attachment: fixed;
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  /* VT323 is a pixel face; keep it crisp rather than smeared */
  -webkit-font-smoothing: antialiased;
}


/* =========================================================================
   3. THE BOOK — COVER, SPINE, FACING PAGES
   -------------------------------------------------------------------------
   Structure this CSS expects (see Contract 3):

       <div class="book">
         <div class="book__spine" aria-hidden="true"></div>   <- optional
         <div class="book__page"> ...screens... </div>
         <div class="book__page"> ...more... </div>           <- optional
       </div>

   The spine is absolutely positioned down the left edge, so it does not
   take part in the flex layout. The cover reserves room for it with
   padding-left. Pages are flex items: one page fills the width, two pages
   stack on narrow screens and sit side by side from 900px up.
   ========================================================================= */

.book {
  position: relative;
  width: min(1180px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 16px 16px calc(var(--spine-w) + 16px);
  border-radius: 5px 12px 12px 5px;

  /* Leather: a base gradient plus two faint cross-hatched gradients that
     read as pebbled grain at normal viewing distance. */
  background-color: var(--leather);
  background-image:
    repeating-linear-gradient(52deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-38deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 4px),
    linear-gradient(150deg, #4a3220 0%, var(--leather) 45%, var(--leather-dark) 100%);

  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.7),          /* the book's shadow on the table */
    0 2px 0 rgba(255, 255, 255, 0.05) inset, /* top edge catching light */
    0 0 0 1px var(--leather-edge),           /* cover edge */
    0 0 0 4px rgba(0, 0, 0, 0.35);           /* soft outer bevel */
}

/* Blind-tooled border line inside the cover, like a real binding. */
.book::before {
  content: "";
  position: absolute;
  inset: 7px 7px 7px calc(var(--spine-w) + 7px);
  border: 1px solid rgba(184, 134, 59, 0.22);
  border-radius: 4px;
  pointer-events: none;
}

/* --- The spine ------------------------------------------------------------
   Absolutely positioned strip on the left edge. The horizontal gradient
   fakes the curve of the binding (dark, lit, dark); the repeating gradient
   on top adds the raised bands you get on a sewn hardcover. If the HTML
   agent puts text inside it, it renders vertically and centred. */
.book__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--spine-w);
  border-radius: 5px 0 0 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.65);

  background-image:
    /* raised bands */
    repeating-linear-gradient(
      180deg,
      transparent 0 58px,
      rgba(255, 255, 255, 0.07) 58px 62px,
      rgba(0, 0, 0, 0.45) 62px 68px,
      transparent 68px 126px
    ),
    /* the curve of the binding */
    linear-gradient(90deg, #120c07 0%, #33210f 38%, #4a3220 55%, #1d130b 100%);

  box-shadow: inset -7px 0 12px -7px rgba(0, 0, 0, 0.85);

  /* Optional vertical title text, if any is supplied. */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "IM Fell English SC", serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(226, 181, 99, 0.75);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  overflow: hidden;
  user-select: none;
}

/* --- A page ---------------------------------------------------------------
   flex: 1 1 100% means "one full-width column" by default. The 900px
   breakpoint relaxes it to two equal columns. */
.book__page {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  padding: var(--page-pad);
  border-radius: 3px;
  color: var(--ink);

  /* Parchment. The gradient bottoms out at --page-mid rather than the
     darker --parchment-lo so that muted text keeps its contrast. */
  background-color: var(--page-mid);
  background-image:
    radial-gradient(120% 90% at 50% -10%, var(--page-light), var(--page-mid) 72%);

  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(58, 44, 26, 0.18);
}

/* Paper grain + foxing: a stack of very faint blotches multiplied over the
   page. Purely decorative, never intercepts clicks. */
.book__page::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
  background-image:
    radial-gradient(9px 6px at 14% 22%, rgba(150, 110, 60, 0.28), transparent 70%),
    radial-gradient(6px 5px at 82% 12%, rgba(150, 110, 60, 0.22), transparent 70%),
    radial-gradient(12px 8px at 68% 61%, rgba(140, 100, 55, 0.18), transparent 72%),
    radial-gradient(7px 6px at 28% 78%, rgba(150, 110, 60, 0.24), transparent 70%),
    radial-gradient(5px 4px at 47% 41%, rgba(150, 110, 60, 0.2), transparent 70%),
    radial-gradient(10px 7px at 90% 88%, rgba(140, 100, 55, 0.2), transparent 72%),
    /* fibre grain */
    repeating-linear-gradient(93deg, rgba(120, 90, 50, 0.05) 0 1px, transparent 1px 4px),
    /* edge vignette, kept to the outer margin so text sits on light paper */
    radial-gradient(115% 115% at 50% 50%, transparent 78%, rgba(120, 88, 45, 0.3) 100%);
}

/* Optional explicit modifiers .book__page--left / .book__page--right are
   handled in the 900px breakpoint below. The :first-of-type/:last-of-type
   rules there already do the job, so the HTML only needs the modifiers if
   pages are ever rendered out of source order. */


/* =========================================================================
   4. BOOK TITLE + SCREENS
   -------------------------------------------------------------------------
   .book-title works in either position: gold-foil stamped on the leather if
   it is a direct child of .book, or inked on paper if it sits inside a page.
   ========================================================================= */

.book-title {
  width: 100%;
  flex-basis: 100%;
  margin: 0 0 14px;
  font-family: "IM Fell English SC", serif;
  font-size: clamp(24px, 6vw, 40px);
  font-weight: normal;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 0 18px var(--glow);
}

/* Stamped straight onto the cover. */
.book > .book-title {
  margin: 2px 0 12px;
  color: #e0b869;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 22px rgba(184, 134, 59, 0.35);
}

/* Screens are the route containers. app.js toggles the `hidden` attribute,
   exactly as site-build/app.js does. */
.screen {
  display: block;
  width: 100%;
}

.screen[hidden] {
  display: none;
}

/* Page-turn feel: a short, shallow flip as a screen appears. It never
   delays reading — the text is already at full opacity by 0.3s, and the
   whole thing is switched off under prefers-reduced-motion. */
.screen:not([hidden]) {
  animation: page-turn-in 0.34s ease-out both;
  transform-origin: left center;
}

@keyframes page-turn-in {
  from {
    opacity: 0.25;
    transform: perspective(1400px) rotateY(-7deg) translateX(-6px);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateY(0) translateX(0);
  }
}


/* =========================================================================
   5. THE MENU — the seven categories on the cover page
   ========================================================================= */

.menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  font-family: "VT323", monospace;
  font-size: 22px;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.menu__item:hover {
  background: var(--tint-strong);
  border-color: var(--accent);
  transform: translateX(4px);
}

.menu__item:focus-visible {
  outline: var(--focus) solid var(--accent-ink);
  outline-offset: 2px;
  background: var(--tint-strong);
}

/* The gilt index letter/number at the start of each entry. */
.menu__key {
  flex: 0 0 auto;
  min-width: 1.2em;
  font-family: "IM Fell English SC", serif;
  font-size: 0.9em;
  color: var(--accent-ink);
  text-align: center;
}


/* =========================================================================
   6. BACK LINK + SCREEN HEADINGS
   ========================================================================= */

.back-link {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 2px;
  font-family: "VT323", monospace;
  font-size: 18px;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.back-link:hover {
  color: var(--ink);
  transform: translateX(-3px);
}

.back-link:focus-visible {
  outline: var(--focus) solid var(--accent-ink);
  outline-offset: 2px;
  color: var(--ink);
}

.screen-heading {
  margin: 0 0 14px;
  font-family: "IM Fell English SC", serif;
  font-size: clamp(21px, 4vw, 27px);
  font-weight: normal;
  line-height: 1.2;
  color: var(--ink);
}

/* Hand-ruled line under the heading, gold in the middle, fading at the ends. */
.screen-heading::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}


/* =========================================================================
   7. MODULE LIST — the category submenu
   ========================================================================= */

.module-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-list__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: "VT323", monospace;
  font-size: 19px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.module-list__item:hover {
  background: var(--tint-strong);
  border-color: var(--accent);
  transform: translateX(3px);
}

.module-list__item:focus-visible {
  outline: var(--focus) solid var(--accent-ink);
  outline-offset: 2px;
  background: var(--tint-strong);
}


/* =========================================================================
   8. MODULE PAGE — name, summary, use cases, links
   ========================================================================= */

.module-name {
  margin: 0 0 6px;
  font-family: "IM Fell English SC", serif;
  font-size: clamp(22px, 4.5vw, 30px);
  font-weight: normal;
  line-height: 1.15;
  color: var(--ink);
}

.module-summary {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Use cases: an illuminated list. Works as <ul>/<ol> or as a wrapper div
   containing one — descendant selectors keep the HTML free of extra classes. */
.use-cases {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px dashed rgba(58, 44, 26, 0.4);
  border-radius: 6px;
  background: rgba(255, 248, 227, 0.38);
}

.use-cases ul,
.use-cases ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.use-cases li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}

.use-cases li:last-child {
  margin-bottom: 0;
}

/* A small gold fleuron instead of a bullet. */
.use-cases li::before {
  content: "\276F";               /* ❯ */
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--accent-ink);
}

/* Optional heading inside the box, if the HTML agent adds one. */
.use-cases h3,
.use-cases h4 {
  margin: 0 0 8px;
  font-family: "IM Fell English SC", serif;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* --- Link buttons (Docs / Tutorial / Source) --- */
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 130px;
  justify-content: center;
  padding: 11px 16px;
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: rgba(184, 134, 59, 0.18);
  border: 1px solid var(--accent);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.link-btn:hover {
  background: rgba(184, 134, 59, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(184, 134, 59, 0.32);
}

.link-btn:focus-visible {
  outline: var(--focus) solid var(--accent-ink);
  outline-offset: 2px;
  background: rgba(184, 134, 59, 0.32);
}


/* =========================================================================
   9. FOOTER / COLOPHON
   Styled for parchment by default; the .book > override handles the case
   where it is placed on the leather below the pages.
   ========================================================================= */

.book-footer {
  width: 100%;
  flex-basis: 100%;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-muted);
}

.book-footer a {
  color: var(--ink-muted);
  text-decoration: underline;
}

.book-footer a:hover {
  color: var(--ink);
}

.book-footer a:focus-visible {
  outline: var(--focus) solid var(--accent);
  outline-offset: 2px;
}

/* On the leather, the parchment ink would vanish — go pale instead. */
.book > .book-footer {
  margin: 4px 0 2px;
  color: #c2ab84;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.book > .book-footer a,
.book > .book-footer a:hover {
  color: #e0b869;
}


/* =========================================================================
   10. RESPONSIVE
   -------------------------------------------------------------------------
   360px  — one page, 12px margins, spine 22px. Menu items are full width and
            ~44px tall, link buttons wrap to one per row.
   768px  — still one page (a second column would be ~330px, too cramped for
            VT323 at 19px), but the paper margins open up and type grows.
   1400px — book capped at 1180px, two facing pages of ~540px each with the
            gutter seam between them.
   ========================================================================= */

@media (min-width: 700px) {
  body {
    padding: 28px;
  }

  .book {
    padding: 20px 20px 20px calc(var(--spine-w) + 20px);
  }

  .book__page {
    padding: 30px 34px;
  }
}

@media (min-width: 900px) {
  :root {
    --spine-w: 34px;
  }

  .book__spine {
    font-size: 15px;
  }

  /* Two facing pages. gap: 0 so they meet at the gutter. */
  .book {
    gap: 0;
  }

  .book__page {
    flex: 1 1 0;
  }

  /* --- The gutter -------------------------------------------------------
     Built from two inset shadows facing each other across the seam: the
     right edge of the left page and the left edge of the right page. Each
     page also loses the border radius on its inner corners so the two
     read as one sheet folded down the middle.
     :not(:only-child) means a single-page screen never gets a stray
     shadow along an edge with nothing next to it. */
  .book__page:not(:only-child):first-of-type,
  .book__page--left {
    border-radius: 3px 0 0 3px;
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(58, 44, 26, 0.18),
      inset -26px 0 30px -22px rgba(58, 32, 10, 0.85);
  }

  .book__page:not(:only-child):last-of-type,
  .book__page--right {
    border-radius: 0 3px 3px 0;
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(58, 44, 26, 0.18),
      inset 26px 0 30px -22px rgba(58, 32, 10, 0.85);
  }

  /* The dark hairline of the fold itself. */
  .book__page:not(:only-child):first-of-type::after,
  .book__page--left::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(30, 18, 8, 0.55) 12%,
      rgba(30, 18, 8, 0.55) 88%,
      transparent
    );
    pointer-events: none;
  }

  /* Roomier reading measure once there is space for it. */
  .module-list {
    gap: 9px;
  }
}

@media (min-width: 1200px) {
  .book__page {
    padding: 38px 42px;
  }

  .module-summary {
    font-size: 20px;
  }
}


/* =========================================================================
   11. REDUCED MOTION + FORCED COLOURS
   Every animation and transition in this file is cancelled here. Focus
   rings and hover colour changes survive, because they are the feedback
   people actually need.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .screen:not([hidden]) {
    animation: none;
    transform: none;
  }

  .menu__item:hover,
  .module-list__item:hover,
  .back-link:hover,
  .link-btn:hover {
    transform: none;
  }
}

/* Windows high-contrast mode: keep the focus ring visible when our colours
   are thrown away. */
@media (forced-colors: active) {
  .menu__item:focus-visible,
  .module-list__item:focus-visible,
  .back-link:focus-visible,
  .link-btn:focus-visible,
  .book-footer a:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}