/* Landing page for the textbook collection.
 *
 * Colour comes entirely from the theme bundles in themes.css, which the books
 * use too — so the landing page matches whichever bundle the reader has chosen,
 * and a change to a bundle reaches the front door as well as the books. Only
 * portal-specific tokens and layout live here.
 *
 * See SHAPE.md ("Theme bundles").
 */

:root {
  --tb-measure: 70ch;
  --tb-radius: 10px;
  /* Portal-only surfaces, derived from the bundle so they follow any palette.
   * Elevation is mixed from the ink token rather than a literal black, so it
   * tracks the reader's bundle; on dark paper the same mix reads as a soft edge
   * rather than a black drop shadow. */
  --tb-card: color-mix(in srgb, var(--tb-ink) 4%, var(--tb-paper));
  --tb-shadow: 0 1px 2px color-mix(in srgb, var(--tb-ink) 7%, transparent),
    0 8px 24px color-mix(in srgb, var(--tb-ink) 5%, transparent);
}

[data-md-color-scheme="slate"] {
  --tb-card: color-mix(in srgb, var(--tb-ink) 7%, var(--tb-paper));
  --tb-shadow: 0 1px 2px color-mix(in srgb, var(--tb-ink) 10%, transparent),
    0 8px 24px color-mix(in srgb, var(--tb-ink) 8%, transparent);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tb-paper);
  color: var(--tb-ink);
  font-family: var(--tb-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 17px;
  line-height: 1.65;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--tb-rule);
  padding: 52px 0 30px;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.masthead__text { min-width: min(100%, 34ch); }

.masthead__title {
  margin: 0 0 8px;
  font-family: var(--tb-font-display, Georgia, serif);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.masthead__lead {
  margin: 0;
  max-width: var(--tb-measure);
  color: var(--tb-ink-soft);
  font-size: 1.05rem;
}

/* --- reader settings ------------------------------------------------------ */

/* The masthead's right-hand actions. One control: the same Settings trigger the
 * books carry, so there is no second pattern to keep in step. */
.masthead__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* `settings.js` reveals it; with scripting off it stays `hidden` in the markup,
 * so a reader never gets a control that does nothing. No colour is declared
 * here: every value is a bundle token, so it follows the reader's theme. */
.tb-settings__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--tb-rule);
  border-radius: 999px;
  background: var(--tb-card);
  color: var(--tb-ink-soft);
  cursor: pointer;
}

.tb-settings__trigger:hover,
.tb-settings__trigger:focus-visible {
  border-color: var(--tb-accent);
  color: var(--tb-accent);
}

.tb-settings__trigger svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --- groups --------------------------------------------------------------- */

.group { margin: 42px 0 0; }

.group__title {
  margin: 0 0 4px;
  font-family: var(--tb-font-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.group__note {
  margin: 0 0 18px;
  max-width: var(--tb-measure);
  color: var(--tb-ink-soft);
  font-size: 0.94rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding-bottom: 8px;
}

/* --- card ----------------------------------------------------------------- */

.card {
  /* A card keeps the book's identity in dark mode rather than darkening the
   * light accent: both variations come from book.yaml. */
  --card-accent-active: var(--card-accent, var(--tb-accent));

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  background: var(--tb-card);
  border: 1px solid var(--tb-rule);
  border-top: 3px solid var(--card-accent-active);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
}

[data-md-color-scheme="slate"] .card {
  --card-accent-active: var(--card-accent-dark, var(--card-accent, var(--tb-accent)));
}

.card__title {
  margin: 0;
  font-family: var(--tb-font-display, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.3;
}

.card__title a { color: inherit; text-decoration: none; }

.card__title a:hover,
.card__title a:focus-visible {
  color: var(--card-accent-active);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card__subject {
  margin: 0;
  font-family: var(--tb-font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tb-ink-soft);
}

.card__body {
  margin: 6px 0 0;
  color: var(--tb-ink-soft);
  font-size: 0.95rem;
}

.card__facts {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.85rem;
  color: var(--tb-ink-soft);
}

.card__facts li { position: relative; }

.card__facts li + li::before {
  content: "·";
  position: absolute;
  left: -9px;
  color: var(--tb-rule);
}

.card__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--card-accent-active);
  border-radius: 999px;
  color: var(--card-accent-active);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.chip:hover,
.chip:focus-visible {
  background: var(--card-accent-active);
  color: var(--tb-accent-ink);
}

.chip--primary {
  background: var(--card-accent-active);
  color: var(--tb-accent-ink);
}

.chip--primary:hover,
.chip--primary:focus-visible { filter: brightness(1.1); }

/* --- footer --------------------------------------------------------------- */

.footer {
  margin-top: 54px;
  padding: 28px 0 48px;
  border-top: 1px solid var(--tb-rule);
  color: var(--tb-ink-soft);
  font-size: 0.9rem;
}

.footer p { margin: 0 0 6px; max-width: var(--tb-measure); }

.footer__fine { font-size: 0.85rem; }

:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}