/*
 * App pages: blocks used only by the Django templates. The design system in
 * main.css stays the source of tokens, compositions and shared blocks.
 */

@layer blocks {
  body {
    font-family: var(--font-serif);
    font-size: var(--step-0);
    line-height: var(--leading-body);
  }

  /* ── Masthead: the wordmark and the account ─────────── */
  .masthead {
    padding-block: var(--space-s);
    border-block-end: var(--border-hair) solid var(--color-rule);
    font-family: var(--font-sans);
    font-size: var(--step--1);
  }

  .wordmark {
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    text-decoration: none;
  }

  .wordmark i {
    font-weight: 300;
    color: var(--color-accent);
  }

  .messages {
    padding-block: var(--space-xs);
    font-family: var(--font-sans);
    color: var(--color-success);
  }

  .page-head {
    padding-block: var(--space-xl) var(--space-l);
  }

  .page-head h1 {
    font-size: var(--step-5);
    text-wrap: balance;
  }

  /* ── Auth: login and password pages ─────────────────── */
  .auth {
    max-width: 30rem;
    padding-block: var(--space-2xl);
  }

  .auth h1 {
    font-size: var(--step-4);
  }

  .form-error {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--color-danger);
  }

  /* ── Library: bookcases and the loose tray ──────────── */
  .bookcase {
    padding-block-end: var(--space-xl);
  }

  .bookcase h2,
  .loose h2 {
    font-size: var(--step-2);
  }

  .bookcase .shelf .spine {
    --mm: 1.1px;
  }

  .bookcase .shelf .label {
    max-width: none;
  }

  .bookcase .shelf .spine[data-estimated] {
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }

  .loose {
    padding-block-end: var(--space-2xl);
  }

  .loose-list {
    display: grid;
    gap: var(--space-2xs);
    padding: 0;
    margin: 0;
    max-width: var(--measure);
  }

  .loose-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-s);
    align-items: baseline;
  }

  .loose-list .swatch {
    grid-row: span 2;
    align-self: center;
    width: 0.9rem;
    height: 2.4rem;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.25), transparent 50%, rgb(0 0 0 / 0.3)), var(--spine-bg);
  }

  .loose-list .title {
    font-weight: 600;
  }

  .loose-list .author {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--color-ink-soft);
  }
}