/*!
 * enw-catalog.css — the catalogue surfaces the design system never grew a
 * component for.
 *
 * Loaded LAST, and only by the pages that still carry the markup it names:
 *
 *   index.php          the home page      .stats-strip / .cat-pills / .search-tags
 *                                          / .contact-grid / .pdf-hero / .feature-banner
 *   ebooks/index.php   a PDF topic page   .pdf-link-list / .book-list
 *   addbook/index.php  the add-a-book page .wrap / .sidebar / .scard / .field
 *   authors.php        an author page      .results-meta
 *   publishers.php     a publisher page    .results-meta
 *   book_detail.php    a book page         §10 only — its radii (§10 explains
 *                                          why the rest of that page is not here)
 *
 * It is wired in through `$ebnExtraCss` (see h2.php), so it lands after the four
 * shared sheets and a page that does not set it does not download it.
 *
 * WHY IT EXISTS
 *
 * `enw-legacy.css` migrated the legacy catalogue to the design system — the book
 * card, the section heading, the shelf grid, the price. It did not migrate
 * everything, and what it left behind is the part that has no counterpart in the
 * design system at all: the statistics strip, the category pill wall, the
 * recent-search chips, the contact cards, the two dark bands, and the entirely
 * separate component sets that `ebooks/index.php` and `addbook/index.php` were
 * written with. Those still paint themselves out of `style.css`, which means
 * they follow the palette but not the design system: five different gradient
 * treatments for one row of numbers, a pill wall that wraps to a ragged edge,
 * and radii on four different scales.
 *
 * THE RULES THIS FILE FOLLOWS
 *
 *   · nothing invents a colour — every value is a palette token, which is what
 *     makes all nine themes work here too;
 *   · nothing hard-codes a size the scales already define — spacing is
 *     `--enw-sp-*`, radii are `--enw-r-*`, type is `--enw-fs-*`;
 *   · every rule is scoped to a component these pages own, so no migrated page
 *     changes appearance because this file exists;
 *   · the flat surfaces stay flat: the design system sets every `--enw-shadow-*`
 *     to `0 0 #0000` on purpose, and a card here does not reintroduce one.
 *
 * MEASURED, AT 1440×900 ON THE LIVE PAGE (palette `Rose`), before this file:
 *
 *   .stats-strip        5 × .stat-num, each with its OWN gradient — gold→red,
 *                       primary→danger, accent→muted, danger→accent,
 *                       muted→primary — four roles mixed into five unrelated
 *                       pairs, and each number painted with
 *                       `-webkit-text-fill-color: transparent` so the ink token
 *                       was replaced by a background-clip.
 *   .cat-pills          1381 × 937px: 102 chips in a wrapping flex row, 163px
 *                       wide and every width different, so the right edge of
 *                       every row was ragged.
 *   .search-tags        20 chips, same wrap, same ragged edge.
 *   .contact-card       radius 18px — not on the scale (6/10/14/20/28/999).
 *   .pdf-search-form    `box-shadow: 0 0 0 4px #d4a0174d` — a hard-coded gold
 *                       ring, the one colour in the hero that ignores the palette.
 *
 * AND ONE THING THE PAGES THEMSELVES GET WRONG
 *
 * The shipped HTML still carries inline `style="color:var(--accent)"` (5 ×),
 * `var(--muted2)` (2 ×), `var(--muted)` and `var(--green)`. **Not one of those
 * four properties is defined anywhere in the four shared sheets** — the
 * declarations are invalid at computed-value time and the colour falls back to
 * whatever it would have inherited. §9 defines them as aliases of the palette
 * roles they were standing in for, which repairs every one of those inline
 * styles without editing four templates to fix four names.
 */

/* ===========================================================================
   1. The statistics strip — one treatment, not five
   ===========================================================================

   `.stats-strip` is a five-cell band under the home hero: a number and a label
   per cell, separated by hairlines. It is the most-read row on the page and the
   least consistent thing on it: five `.stat-num` gradients built from four
   different role tokens, in five arbitrary pairings, none of which relates to
   what the cell means (`5M+ books` and `500+ categories` were different
   colours for no reason a reader can see).

   The design system's answer is already written down: a number is bold text with
   tabular figures (`.enw-price` makes the same argument for a price). So the
   number takes the ink token, the label takes the muted one, and the only
   ornament left is the hairline between cells. */

.stats-strip {
  display: grid;
  /* Every grid in this file uses `minmax(min(<floor>, 100%), 1fr)`, not
     `minmax(<floor>, 1fr)`. A bare floor is a track that CANNOT shrink: below
     it the grid overflows its container instead of collapsing to one column, and
     with `body { overflow-x: clip }` the excess is clipped away rather than
     scrolled to — so a 320px floor inside a 300px phone silently loses 20px of
     the card. `min()` against 100% lets the track give way at the last step and
     changes nothing at any width above the floor. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0;
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  overflow: hidden;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--enw-sp-1, 0.25rem);
  min-inline-size: 0;
  padding: var(--enw-sp-5, 1.25rem) var(--enw-sp-4, 1rem);
  /* The separators are drawn as inset shadows rather than a border on each cell,
     so the cell that lands at the end of a row does not carry a trailing rule
     into the next one when the grid wraps to two rows on a narrow screen. */
  box-shadow: inset 1px 0 0 var(--enw-border, #e3e8ef);
}

.stat-item:first-child {
  box-shadow: none;
}

.stat-num {
  /* style.css paints these with `-webkit-text-fill-color: transparent` and a
     `background-clip: text` gradient, per-child. Both go, along with every
     gradient, so the number is ink again. */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: var(--enw-lh-tight, 1.15);
  text-align: center;
}

/* The one cell that was given its own class to be a different colour gets the
   accent — the same "this one is the other thing" signal, from a token. */
.stat-num.blue {
  color: var(--enw-accent-ink, #117a6f);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.stat-label {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  letter-spacing: 0.02em;
  line-height: var(--enw-lh-snug, 1.35);
  text-align: center;
}

@media (max-width: 640px) {
  .stat-item {
    box-shadow: inset 0 1px 0 var(--enw-border, #e3e8ef);
  }

  .stat-item:nth-child(-n + 2) {
    box-shadow: none;
  }

  .stat-item:nth-child(odd) {
    box-shadow: inset 1px 0 0 var(--enw-border, #e3e8ef);
  }
}

/* ===========================================================================
   2. The category pills — aligned columns instead of a ragged wall
   ===========================================================================

   102 chips in one wrapping flex row is a wall; wrapping a wall only makes it a
   *ragged* wall, because a flex row sizes each chip to its own text and the last
   chip in every row ends somewhere different from the one above it. Measured:
   1381 × 937px, every chip a different width between roughly 120 and 220px.

   A grid fixes the alignment without touching the content: the template columns
   decide the width, so every chip in a column is identical and every row ends on
   the same edge. The count is `auto-fill` with a small floor, which keeps the
   chip count per row close to what the flex row produced — this is a tidying
   pass, not a decision to show fewer categories. */

.cat-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--enw-sp-2, 0.5rem);
}

.cat-pill {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  /* One height for every chip in the wall. The old row let each chip grow to
     its own line-height, which is a second source of raggedness inside a row. */
  min-block-size: 2.375rem;
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text-muted, #6b7787);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  font-size: var(--enw-fs-sm, 0.8125rem);
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease),
              border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.cat-pill:hover {
  color: var(--enw-text, #10131a);
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
  box-shadow: none;
}

.cat-pill-icon {
  flex: none;
  font-size: var(--enw-fs-md, 1rem);
  line-height: 1;
}

/* The name is the only part allowed to be long, so it is the only part that
   truncates — the count beside it keeps its own width. */
.cat-pill-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cat-pill-count {
  flex: none;
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  font-variant-numeric: tabular-nums;
}

.cat-pill:hover .cat-pill-count {
  color: inherit;
}

/* ===========================================================================
   3. The recent-search chips — the same shape, the same grid
   =========================================================================== */

.search-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--enw-sp-2, 0.5rem);
}

.search-tag {
  display: flex;
  align-items: center;
  min-block-size: 2.375rem;
  padding: 0 var(--enw-sp-4, 1rem);
  /* A search term is a sentence, not a label: it wraps to two lines inside a
     fixed-height chip rather than being cut off at the ellipsis. The chip grows
     for the two-line case and no further. */
  color: var(--enw-text-muted, #6b7787);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
  line-height: var(--enw-lh-snug, 1.35);
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease),
              border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.search-tag:hover {
  color: var(--enw-text, #10131a);
  background: var(--enw-primary-tint, #eaf1ff);
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
}

/* ===========================================================================
   4. The contact cards — on the design system's card, and on its radius scale
   ===========================================================================

   Two cards side by side. `style.css` drew them at 18px, which is not a step on
   the scale the rest of the site uses (6 / 10 / 14 / 20 / 28 / 999), so the one
   page with a contact block had the one radius nothing else had. They are cards,
   so they take the card token. */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--enw-sp-5, 1.25rem);
}

.contact-card,
.contact-info,
.contact-form-wrap {
  padding: var(--enw-sp-6, 1.5rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  box-shadow: none;
}

.contact-card h3,
.contact-info h3,
.contact-form-wrap h3 {
  margin: 0 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contact-card p,
.contact-info p {
  margin: 0 0 var(--enw-sp-2, 0.5rem);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-body, 1.6);
}

.contact-card p strong,
.contact-info p strong {
  color: var(--enw-text, #10131a);
}

/* ===========================================================================
   5. The two dark bands — same geometry, palette-only colour
   ===========================================================================
 *
 * `.pdf-hero` (the Free PDF search band) and `.feature-banner` (the "The
 * World's Books, One Search Away" band) are both full-bleed dark blocks with a
 * centred search box or button pair. Their backgrounds already follow the header
 * tokens, so they recolour with the palette; what does not is the focus ring on
 * the PDF search box — `box-shadow: 0 0 0 4px #d4a0174d`, a hard-coded gold that
 * is the only palette-independent colour left on the home page.
 *
 * The ring is also doubled up with the border, so the box reads as a box inside
 * a box. It becomes a single hairline in the border token plus a primary ring on
 * focus, which is the same treatment every other field on the site gets. */

.pdf-search-form {
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-lg, 20px);
  box-shadow: none;
}

.pdf-search-form:focus-within {
  border-color: var(--enw-primary, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--enw-primary, #2f6fed) 32%, transparent);
}

.pdf-search-form button {
  background: var(--enw-accent, #16a394);
  color: var(--enw-on-accent, #10131a);
  border-radius: 0 var(--enw-r-lg, 20px) var(--enw-r-lg, 20px) 0;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-search-form button:hover {
  background: color-mix(in oklab, var(--enw-accent, #16a394) 85%, var(--enw-text, #10131a));
}

/* Both bands are promoted to the same two-step radius and the same vertical
   rhythm as a `.section`, so the home page stops changing measure every 400px. */
.pdf-hero {
  border-radius: 0;
  padding: var(--enw-sp-12, 3rem) var(--enw-sp-6, 1.5rem) var(--enw-sp-10, 2.5rem);
}

.feature-banner {
  border-radius: 0;
  padding: var(--enw-sp-12, 3rem) var(--enw-sp-6, 1.5rem);
}

/* ===========================================================================
   6. The ebooks topic page — the PDF download list
   ===========================================================================

   Ninety-nine rows: a PDF glyph, a title with a topic line under it, and an
   "Open PDF" button pushed to the right edge. It is the densest list on the
   site and it had no rules beyond `style.css`, so each row sized itself, the
   button never lined up between rows, and there was no separator to follow.

   The rows become one surface with hairline dividers, a fixed geometry for the
   icon and the button, and the button on the token scale. */

.pdf-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  overflow: hidden;
}

.pdf-link-item {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-4, 1rem);
  padding: var(--enw-sp-3, 0.75rem) var(--enw-sp-4, 1rem);
  box-shadow: inset 0 1px 0 var(--enw-border, #e3e8ef);
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-link-item:first-child {
  box-shadow: none;
}

.pdf-link-item:hover {
  background: var(--enw-surface-2, #eaf1ff);
}

.pdf-link-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--enw-danger, #e0463e);
  background: var(--enw-danger-tint, #fcebea);
  border-radius: var(--enw-r-sm, 10px);
}

.pdf-link-icon .ico {
  inline-size: 1rem;
  block-size: 1rem;
}

.pdf-link-info {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.pdf-link-title {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
  line-height: var(--enw-lh-snug, 1.35);
  /* One line. The full string is still in the element's `title`, which is where
     a 140-character filename belongs — not in the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-link-topic {
  margin-block-start: var(--enw-sp-1, 0.25rem);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-open-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  /* The same floor the rest of the site's small buttons use, so the button
     column lines up from the first row to the last. */
  min-block-size: 2.25rem;
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-sm, 10px);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.pdf-open-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

.pdf-open-btn .ico {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}

@media (max-width: 640px) {
  .pdf-link-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pdf-link-info {
    flex-basis: calc(100% - 2.25rem - var(--enw-sp-4, 1rem));
  }

  .pdf-open-btn {
    margin-inline-start: calc(2.25rem + var(--enw-sp-4, 1rem));
  }
}

/* ===========================================================================
   7. The ebooks topic page — the book list
   ===========================================================================

   Thirty-two books below the PDFs: a 64×96 thumbnail, title, author, publisher,
   price, and a "View book" button. Same story as the PDF list — no rules beyond
   `style.css`, so nothing lined up.

   The thumbnail keeps its 64×96 ratio; it is a list, not a card. */

.book-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--enw-sp-3, 0.75rem);
}

.book-item {
  display: flex;
  align-items: flex-start;
  gap: var(--enw-sp-4, 1rem);
  padding: var(--enw-sp-4, 1rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  transition: border-color var(--enw-t-fast, 120ms) var(--enw-ease);
  box-shadow: none;
}

.book-item:hover {
  border-color: color-mix(in oklab, var(--enw-primary, #2f6fed) 34%, var(--enw-border, #e3e8ef));
}

.book-item .book-cover {
  flex: none;
  inline-size: 4rem;
  block-size: 6rem;
  overflow: hidden;
  background: var(--enw-bg, #f4f6fa);
  border-radius: var(--enw-r-sm, 10px);
}

.book-item .book-cover img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.book-item .book-info {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--enw-sp-1, 0.25rem);
}

.book-item .book-title {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 700;
  line-height: var(--enw-lh-snug, 1.35);
  /* Two lines, then ellipsis — the same clamp the book card uses, so a list row
     and a shelf card cannot disagree about how much of a title fits. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-item .book-title a {
  color: inherit;
  text-decoration: none;
}

.book-item .book-title a:hover {
  text-decoration: underline;
}

.book-item .book-author,
.book-item .book-publisher {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-item .book-author a,
.book-item .book-publisher a {
  color: var(--enw-ink, #2f6fed);
  text-decoration: none;
}

.book-item .book-author a:hover,
.book-item .book-publisher a:hover {
  text-decoration: underline;
}

/* The price is bold tabular text, not a chip — the same call `.book-card-price`
   makes, so a price looks the same wherever it is printed. */
.book-item .book-price {
  margin-block-start: var(--enw-sp-1, 0.25rem);
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-md, 1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.book-item .book-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  margin-block-start: var(--enw-sp-2, 0.5rem);
  padding: 0 var(--enw-sp-4, 1rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-sm, 10px);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.book-item .book-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

/* ===========================================================================
   8. The add-a-book page — its own layout, put on the same scales
   ===========================================================================

   `addbook/index.php` was written as a standalone page: a `.wrap` holding a
   `.sidebar` beside the content, `.scard` panels, a numbered `.step-row`, and a
   `.field` form. It sets its own `$ebnExtraCss` (enw-codes.css) and shares none
   of the catalogue classes, so nothing in `enw-legacy.css` reaches it.

   What it needs is not a new design — it is the design system's own values for
   the things it already has: a card, a numbered step, a field, a submit button. */

.wrap {
  max-inline-size: var(--enw-container, 1440px);
  margin-inline: auto;
  padding: var(--enw-sp-6, 1.5rem) clamp(0.75rem, 3vw, 1.5rem) var(--enw-sp-16, 4rem);
}

.sidebar {
  padding: var(--enw-sp-5, 1.25rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
}

.scard {
  padding: var(--enw-sp-5, 1.25rem);
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 14px);
  box-shadow: none;
}

.scard h3 {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2, 0.5rem);
  margin: 0 0 var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The success variant is the same panel with the accent role, which is how the
   design system says "this one went well" everywhere else. */
.scard--success {
  border-color: color-mix(in oklab, var(--enw-accent, #16a394) 40%, var(--enw-border, #e3e8ef));
  background: linear-gradient(180deg, var(--enw-accent-tint, #e4f7f4), var(--enw-surface, #fff) 62%);
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: var(--enw-sp-3, 0.75rem);
  margin-block-start: var(--enw-sp-3, 0.75rem);
}

.snum {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border-radius: var(--enw-r-pill, 999px);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
}

.stext {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-body, 1.6);
}

.stext em {
  color: var(--enw-text, #10131a);
  font-style: normal;
  font-weight: 600;
}

/* The form. `.field`, `.field-hint` and `.submit-btn` had no rule in any sheet,
   so the labels, the inputs and the hint text were all browser defaults sitting
   inside a styled card. */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--enw-sp-2, 0.5rem);
  margin-block-end: var(--enw-sp-5, 1.25rem);
}

.field label {
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.8125rem);
  font-weight: 600;
}

.field input[type='text'],
.field input[type='email'],
.field textarea,
.field select {
  inline-size: 100%;
  padding: var(--enw-sp-3, 0.75rem) var(--enw-sp-4, 1rem);
  color: var(--enw-text, #10131a);
  background: var(--enw-bg, #f4f6fa);
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm, 10px);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-base, 0.9375rem);
  line-height: var(--enw-lh-snug, 1.35);
  transition: border-color var(--enw-t-fast, 120ms) var(--enw-ease),
              background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.field textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--enw-surface, #fff);
  border-color: var(--enw-primary, #2f6fed);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--enw-primary, #2f6fed) 32%, transparent);
}

.field-hint {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  line-height: var(--enw-lh-body, 1.6);
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0 var(--enw-sp-6, 1.5rem);
  color: var(--enw-on-primary, #fff);
  background: var(--enw-primary, #2f6fed);
  border: 0;
  border-radius: var(--enw-r-sm, 10px);
  font-family: var(--enw-font);
  font-size: var(--enw-fs-base, 0.9375rem);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--enw-t-fast, 120ms) var(--enw-ease);
}

.submit-btn:hover {
  background: var(--enw-primary-dark, #1f52c4);
}

/* ===========================================================================
   9. Two repairs to the pages' own inline styles
   ===========================================================================
 *
 * The shipped HTML carries inline `style="color:var(--accent)"` (5 ×),
 * `var(--muted2)` (2 ×), `var(--muted)` and `var(--green)`. None of those four
 * properties is defined in any sheet the site loads, so each declaration is
 * invalid at computed-value time and the colour silently falls back to the
 * inherited one. Defining them here — as the palette roles they were standing in
 * for — repairs all nine inline styles without editing a template.
 *
 * They are scoped to the pages this sheet loads on, and none of the four names
 * is referenced by any other stylesheet, so nothing else can be affected. */

:root {
  --accent: var(--enw-accent);
  --green: var(--enw-accent);
  --muted: var(--enw-text-muted);
  --muted2: var(--enw-text-muted);
}

/* `.results-meta` — the "N books" line above a catalogue grid on the author and
   publisher pages. It had a rule in `enw-legacy.css`, but at the `style.css`
   size, which is the smaller of the two the site uses for the same sentence. */
.results-meta {
  color: var(--enw-text-muted, #6b7787);
  font-family: var(--enw-font-mono, monospace);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   10. The book page — its radii, on the scale
   ===========================================================================
 *
 * `book_detail.php` is the largest un-migrated page on the site: its own `.bd-*`
 * component set is still drawn by `style.css`, and the design system reaches it
 * only through the bridge and a handful of appended fixes in `enw.css` (the
 * breadcrumb, the related-books header, three contrast repairs). Migrating the
 * whole set is a page-sized job of its own and is deliberately NOT attempted
 * here — this file is scoped to the components it names in its own selectors.
 *
 * What IS worth fixing now is the one property the page has drifted furthest on.
 * The design system defines six radii (`--enw-r-xs/sm/md/lg/xl/pill`):
 *
 *     6px   10px   14px   20px   28px   999px
 *
 * Measured on `/books_detail-1944762094.html`, the page paints TEN different
 * border radii, and six of them are on no step of that scale:
 *
 *     .bd-price-box           18px       →  r-md (14px)
 *     .bd-desc / .bd-reviews / .bd-similar / .bd-specs / .bd-cover-link
 *                             16px       →  r-md (14px)
 *     .bd-sim-card            12px       →  r-md (14px)
 *     .bd-social-btn / .bd-qr-btn
 *                              9px       →  r-sm (10px)
 *     .bd-spec-mono            8px       →  r-xs  (6px)
 *     .bd-wishlist-btn / .bd-login-toggle-btn
 *                            100px       →  r-pill (999px)
 *
 * So the book page's panels were all 2px rounder than the design system's card,
 * and its two pill buttons were 100px where every other pill on the site is
 * 999px — the same pill, rounded two different ways depending on the page. Both
 * are 2px-and-visible: a 16px panel beside a 14px card reads as a different
 * component rather than a different module.
 *
 * `.bd-pill`, `.bd-meta-chip-value` and `.bd-follow` are left alone: 20px is
 * `--enw-r-lg`, which is already a step on the scale. `.bd-breadcrumb` is left
 * alone too — `enw.css` has already stripped it back to a plain text trail, so
 * its radius is no longer painted. */

.bd-price-box,
.bd-desc,
.bd-reviews,
.bd-similar,
.bd-specs,
.bd-cover-link {
  border-radius: var(--enw-r-md, 14px);
}

/* The related-books card needs one more class of specificity than the rest of
   this list, and the reason is worth writing down: `book_detail.php` carries its
   OWN `<style id="bd-pro-css">` block — 30 rules, 8,098 bytes, emitted into the
   body *after* this file's `<link>`. For `.bd-sim-card` that block sets the same
   property at the same specificity (one class), so document order decides it and
   the page's own rule wins. Two classes settle it without `!important`.

   (That block is the bigger finding, and it is a separate pass: it paints 24
   hard-coded colours — including eight copies of `#E11D48`, which is the Rose
   palette's `--enw-primary` written out as a literal — so the book page does not
   actually follow the reader's palette. Replacing those literals with the tokens
   they were copied from is not something to bundle into a radii rule.) */
.bd-sim-grid .bd-sim-card,
.bd-sim-shelf .bd-sim-card {
  border-radius: var(--enw-r-md, 14px);
}

.bd-social-btn,
.bd-qr-btn {
  border-radius: var(--enw-r-sm, 10px);
}

.bd-spec-mono {
  border-radius: var(--enw-r-xs, 6px);
}

.bd-wishlist-btn,
.bd-login-toggle-btn {
  border-radius: var(--enw-r-pill, 999px);
}