/* site.css — the whole look: dark ground, amber accent, covers as a pile.
   Colours, faces and treatments are the custom properties in :root, so
   retuning the palette is an edit at the top of this file. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --paper: #0e0e10;
  --ink: #f2efe8;
  --muted: #938f87;
  --rule: #26241f;
  --band: #141416;
  --band-ink: #f2efe8;
  --accent: #e9a93c;
  --accent-ink: #16130d;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --font-body: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --font-meta: "IBM Plex Mono", ui-monospace, monospace;

  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-leading: 0.94;
  --meta-tracking: 0.1em;
  --radius: 0;
  --cover-shadow: 0 22px 46px rgba(0, 0, 0, 0.6);
  --cover-tilt: 4deg;

  --gutter: clamp(20px, 5vw, 80px);
  --measure: 62ch;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: 0.02em; color: var(--ink); text-decoration: none;
}
.wordmark-tld { color: var(--accent); }
/* Wraps, because the row grows with the site: a language more, a sign-in
   link, a signed-in name. On a narrow phone the links fall onto a second line
   rather than pushing the page wider than the screen. */
.nav-links {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: clamp(14px, 2.5vw, 34px); row-gap: 10px;
  font-family: var(--font-meta); font-size: 12px;
  letter-spacing: var(--meta-tracking); text-transform: uppercase;
}
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.langswitch { display: flex; gap: 7px; }
.langswitch-on { color: var(--ink); font-weight: 700; }
.langswitch-sep { color: var(--rule); }

/* ---------- signed in ----------
   The account is a back door for the people making the books, not a feature of
   the site, so it sits at the quiet end of the nav and looks like the language
   switch rather than like a call to action. */

.signin { color: var(--muted); }
.signout { display: flex; align-items: center; gap: 8px; }
.signed-in { color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbutton {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); border-bottom: 1px solid var(--rule);
}
.linkbutton:hover { color: var(--ink); }

/* A draft is on screen because the server decided this reader may see it. The
   badge says so; it hides nothing, because there is nothing here to hide. */
.draftbadge {
  align-self: flex-start;
  font-family: var(--font-meta); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent);
}
.draftbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.card-draft .card-cover { opacity: 0.82; }

/* ---------- hero ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
  padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(36px, 5vw, 60px);
}
.hero-text { display: flex; flex-direction: column; gap: 26px; }
.hero-headline {
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
}
.hero-headline em { font-style: normal; color: var(--accent); }
.hero-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.58; color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: var(--radius);
  font-family: var(--font-meta); font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.button:hover { text-decoration: none; }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-ghost { border: 1px solid var(--ink); color: var(--ink); }

/* A fan of three covers, however many titles the catalogue holds: the strip
   is decorative (aria-hidden), and home.html hands it every featured book, so
   the row has to hold its width as the shelf grows rather than the other way
   round.

   The covers share the row instead of each taking `width: 100%` of it. That
   is not a nicety: a flex item's automatic minimum size floors it at its own
   specified width, so `width: 100%` also stops the item shrinking — six
   covers then measure six column widths and the whole page scrolls
   sideways. `min-width: 0` lifts that floor and `flex: 1 1 0` divides the
   space evenly. */
.hero-covers { display: flex; gap: clamp(10px, 1.4vw, 18px); align-items: flex-end; }
.hero-covers img {
  flex: 1 1 0; min-width: 0; width: auto; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--cover-shadow);
  transform: rotate(var(--cover-tilt));
}
.hero-covers img:nth-child(even) { transform: rotate(calc(var(--cover-tilt) * -1)); }
.hero-covers img:nth-child(n+4) { display: none; }

/* ---------- spec strip ---------- */

.spec {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.spec-item { background: var(--paper); padding: 22px clamp(14px, 2vw, 28px) 26px; display: flex; flex-direction: column; gap: 8px; }
.spec-label { font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); }
.spec-value { font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; }

/* ---------- steps ---------- */

.steps { padding: clamp(44px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 46px); }
.steps-heading {
  font-size: clamp(28px, 3.6vw, 46px); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); line-height: 1.04; max-width: 18ch;
}
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.step { display: flex; flex-direction: column; gap: 12px; }
.step-number { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: var(--display-weight); letter-spacing: -0.05em; line-height: 1; color: var(--rule); }
.step:first-child .step-number { color: var(--accent); }
.step-rule { height: 1px; background: var(--ink); }
.step-label { font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
.step-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.step-text { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- catalogue ---------- */

.catalogue { padding: 0 var(--gutter) clamp(44px, 6vw, 72px); display: flex; flex-direction: column; gap: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.section-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--display-weight); letter-spacing: -0.03em; }
.section-more { font-family: var(--font-meta); font-size: 11px; font-weight: 700; letter-spacing: var(--meta-tracking); }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.card { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.card:hover { text-decoration: none; }
.card:hover .card-title { color: var(--accent); }
.card-cover { width: 100%; border-radius: var(--radius); box-shadow: var(--cover-shadow); }
.card-body { display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.card-summary { font-size: 14px; line-height: 1.5; color: var(--muted); }
.card-meta { font-family: var(--font-meta); font-size: 11px; font-weight: 700; letter-spacing: var(--meta-tracking); color: var(--accent); }

.empty { color: var(--muted); }

/* ---------- page heads, filters ---------- */

.page-head { padding: clamp(36px, 5vw, 60px) var(--gutter) 26px; display: flex; flex-direction: column; gap: 18px; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.06; max-width: 20ch; }
.page-lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: var(--measure); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--rule); border-radius: 100px;
  font-family: var(--font-meta); font-size: 13px; color: var(--ink);
}
.chip:hover { text-decoration: none; border-color: var(--ink); }
.chip-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- book page ---------- */

.book {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(36px, 5vw, 56px);
  align-items: start;
}
.book-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--cover-shadow); }
.book-text { display: flex; flex-direction: column; gap: 16px; }
.book-title { font-size: clamp(30px, 4vw, 46px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.06; }
.book-subtitle { font-size: 19px; color: var(--muted); }
.book-author { font-family: var(--font-meta); font-size: 12px; letter-spacing: var(--meta-tracking); text-transform: uppercase; color: var(--accent); }

.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1em; }
.prose p { line-height: 1.68; }
.prose h2 { font-size: 24px; margin-top: 0.4em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; line-height: 1.68; }

.editions { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin-top: 12px; }
.edition {
  display: grid; grid-template-columns: 44px 130px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--rule); font-size: 15px;
}
.edition-lang { font-family: var(--font-meta); font-size: 11px; font-weight: 700; letter-spacing: var(--meta-tracking); color: var(--accent); }
.edition-format { color: var(--muted); font-size: 14px; }
.edition-link { font-family: var(--font-meta); font-size: 13px; font-weight: 600; }
.back { font-family: var(--font-meta); font-size: 13px; margin-top: 12px; }

/* ---------- the sales page ---------- */

/* connexum.ch/letstalk — cover on the left, everything needed to buy on the
   right, and the argument for it underneath. */
.sell {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(36px, 5vw, 70px) var(--gutter) clamp(28px, 4vw, 44px);
  align-items: start;
}
.sell-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--cover-shadow); }
.sell-text { display: flex; flex-direction: column; gap: 14px; }
.sell-eyebrow { font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); }
.sell-title {
  font-size: clamp(36px, 5.2vw, 62px); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); line-height: 1.02; text-wrap: balance;
}
.sell-subtitle { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; color: var(--muted); max-width: 40ch; }
.sell-summary { font-size: 17px; line-height: 1.6; max-width: 52ch; margin-top: 4px; }
.sell-author { font-family: var(--font-meta); font-size: 12px; letter-spacing: var(--meta-tracking); text-transform: uppercase; }
.sell-sample { font-family: var(--font-meta); font-size: 13px; }
.sell-link { align-self: flex-start; margin-top: 4px; }

/* The buy panel: one row per way to have the book. The PDF row is ours and
   posts to Stripe; the rest are links to whoever sells that edition. */
.buy { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid var(--rule); }
.buy-row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; margin: 0; padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.buy-row-pdf { background: linear-gradient(90deg, rgba(233, 169, 60, 0.07), transparent 62%); }
.buy-format { font-family: var(--font-meta); font-size: 12px; font-weight: 700; letter-spacing: var(--meta-tracking); text-transform: uppercase; }
.buy-row-pdf .buy-format { color: var(--accent); }
.buy-note { font-size: 14px; color: var(--muted); }
.buy-button { min-height: 44px; padding: 0 22px; font-size: 14px; border: 0; cursor: pointer; font-family: var(--font-meta); }
.button-ghost.buy-button { border: 1px solid #3a372f; background: transparent; }
.buy-empty { padding: 16px 0; color: var(--muted); font-size: 15px; }
.buy-test { padding: 12px 0 0; font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); }
/* The publisher's own row: the door an admin gets to a book that is not for
   sale. Dashed, so it never reads as one of the ways a reader buys. */
.buy-row-own { border-bottom-style: dashed; }
.buy-row-own .buy-format { color: var(--muted); }
/* The print row carries two files, not one — the interior and the cover. */
.buy-files { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.buy-own-note { padding: 12px 0 0; font-size: 13px; color: var(--muted); }
.edition-price { font-family: var(--font-meta); font-size: 13px; font-weight: 600; color: var(--accent); }

/* The four numbers under the fold: pages, languages, formats, year. */
.sell-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.fact { background: var(--paper); padding: 20px clamp(14px, 2vw, 28px) 24px; display: flex; flex-direction: column; gap: 6px; }
.fact-label { font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
.fact-value { font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; }

.sell-blurb { padding: clamp(34px, 5vw, 58px) var(--gutter); display: flex; flex-direction: column; gap: 20px; }

/* ---------- the download after a sale ---------- */

.grab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.grab-book { display: flex; align-items: center; gap: 16px; }
.grab-book img { width: 74px; box-shadow: var(--cover-shadow); }
.grab-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.grab-meta { font-family: var(--font-meta); font-size: 11px; letter-spacing: var(--meta-tracking); text-transform: uppercase; color: var(--muted); }
.grab-note { font-size: 14px; color: var(--muted); }

/* ---------- services + form ---------- */

.services {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
  padding: 0 var(--gutter) clamp(40px, 5vw, 64px);
}
.service h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.service p { font-size: 15px; line-height: 1.58; color: var(--muted); }

.enquiry { background: var(--band); color: var(--band-ink); padding: clamp(36px, 5vw, 56px) var(--gutter); display: flex; flex-direction: column; gap: 22px; }
.enquiry h2 { font-size: clamp(24px, 3vw, 34px); font-weight: var(--display-weight); letter-spacing: -0.03em; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 780px; }
.field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-meta); font-size: 13px; }
.field-wide { grid-column: 1 / -1; }
/* The height, padding and border here are for something you type in, so a
   checkbox or a radio must not collect them: it would come out 48px tall with
   the label stranded underneath. */
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea {
  font: inherit; font-size: 16px; font-family: var(--font-body);
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.form .button { grid-column: 1 / -1; justify-self: start; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notice { font-size: 15px; padding: 12px 16px; border-left: 3px solid var(--accent); }
.notice-ok { border-color: var(--accent); }
.notice-bad { border-color: var(--accent); font-weight: 600; }

/* ---------- cta + footer ---------- */

.cta {
  background: var(--accent); color: var(--accent-ink);
  padding: clamp(36px, 5vw, 56px) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px;
}
.cta-headline { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 44px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; }
.cta-headline em { font-style: normal; }
.cta-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 30px; background: var(--accent-ink); color: var(--accent); font-family: var(--font-meta); font-weight: 700; border-radius: var(--radius); }
.cta-button:hover { text-decoration: none; }
.cta-note { font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; opacity: 0.75; }

.textpage { padding: clamp(36px, 5vw, 64px) var(--gutter); display: flex; flex-direction: column; gap: 18px; max-width: calc(var(--measure) + 2 * var(--gutter)); }
.textpage-narrow { max-width: calc(480px + 2 * var(--gutter)); }
.form-narrow { grid-template-columns: 1fr; max-width: 420px; }
.textpage h1 { font-size: clamp(30px, 4vw, 46px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }

.footer {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding: 24px var(--gutter) 36px; border-top: 1px solid var(--rule);
  font-family: var(--font-meta); font-size: 11px; letter-spacing: var(--meta-tracking);
  text-transform: uppercase; color: var(--muted);
}
.footer-right { display: flex; flex-wrap: wrap; gap: 22px; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-covers { order: -1; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book { grid-template-columns: 1fr; }
  .book-cover { max-width: 300px; }
  .sell { grid-template-columns: 1fr; }
  .sell-cover { max-width: 280px; }
  .sell-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .nav { gap: 12px; }
  .steps-grid, .cards, .services, .form { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .edition { grid-template-columns: 44px 1fr; row-gap: 4px; }
  .edition-title { grid-column: 1 / -1; }
  .sell-facts { grid-template-columns: 1fr; }
  .buy-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .buy-note { grid-column: 1 / -1; }
}

/* ---------- dark-ground treatments ---------- */

.button-ghost { border-color: #3a372f; color: var(--ink); }
.chip { border-color: #3a372f; }
.chip-on { background: var(--ink); color: var(--paper); }
.field input, .field textarea { background: #17171a; border-color: #3a372f; color: var(--ink); }
.step-rule { background: #3a372f; }
.step:first-child .step-rule { background: var(--accent); height: 2px; }
.section-head { border-bottom-color: var(--ink); }
.cta-note { color: #5c4b22; opacity: 1; }

/* ---------- accounts ----------
   The one admin surface. It borrows the form and button styles the rest of
   the site already has; what is new here is a table and two fieldsets. */

.adminlink { font-family: var(--font-meta); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-back { font-size: 14px; margin-bottom: 8px; }
.admin-email { font-size: clamp(22px, 3vw, 30px); word-break: break-all; }
.admin-subheading { margin-top: 48px; }

.admin-table { width: 100%; border-collapse: collapse; margin: 24px 0 8px; font-size: 15px; }
.admin-table th {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-meta); font-size: 11px; font-weight: 700;
  letter-spacing: var(--meta-tracking); text-transform: uppercase; color: var(--muted);
}
.admin-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-name { display: block; font-size: 13px; color: var(--muted); }
.admin-you { font-size: 12px; color: var(--accent); }
.admin-scope { font-size: 14px; color: var(--muted); }
.admin-actions { text-align: right; }
.button-small { min-height: 34px; padding: 0 14px; font-size: 13px; }

.admin-role {
  font-family: var(--font-meta); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.admin-role-admin { color: var(--accent); }
.admin-role-reviewer { color: var(--muted); }

.admin-form { margin-top: 20px; }
/* Deliberately not .field: that is the column a label and a text input make,
   and its display:flex also unsettles where a browser draws a <legend>. */
.admin-roles, .admin-scope-field {
  border: 1px solid var(--rule); padding: 16px; margin: 0 0 20px;
  font-family: var(--font-meta);
}
.admin-roles legend, .admin-scope-field legend {
  padding: 0 8px; font-family: var(--font-meta); font-size: 11px; font-weight: 700;
  letter-spacing: var(--meta-tracking); text-transform: uppercase; color: var(--muted);
}
/* A control and its label. flex-start rather than baseline, because a form
   control has no text baseline of its own — the browser uses its bottom edge
   and drops the label below it — and because a long book title wraps to a
   second line that must not drag the box down with it. The nudge sits the box
   on the middle of the first line. */
.admin-choice { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; }
.admin-choice input, .admin-book input { flex: none; width: 15px; height: 15px; margin: 0.28em 0 0; accent-color: var(--accent); }
.admin-books {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 20px; margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.admin-book { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 3px 0; }
.admin-draft { font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

.admin-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-remove { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.button-danger { color: #8c2f22; border-color: #8c2f22; }
.admin-password { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.admin-once { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.field-note { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

@media (max-width: 640px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .admin-table td { border: 0; padding: 0; }
  .admin-actions { text-align: left; margin-top: 8px; }
}