/* Runo — page-specific composition.
 *
 * Only rules that belong to exactly one screen. Anything reused twice
 * belongs in components.css instead.
 */

@layer pages {
  /* --- sign in / first run --------------------------------------------- */
  .auth-body {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: var(--space-4);
    /* A faint warm glow behind the card — the only decorative gradient in
     * the product, and the one screen with room for it. */
    background:
      radial-gradient(60rem 40rem at 50% -10%,
                      var(--accent-subtle), transparent 70%),
      var(--bg);
  }

  .auth-card {
    width: 100%;
    max-width: 24rem;
    margin: 0;
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
  }

  .auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .auth-mark { width: 1.75rem; height: 1.75rem; color: var(--accent); }

  .auth-wordmark {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .auth-tagline {
    margin: var(--space-2) 0 var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    text-wrap: balance;
  }

  .auth-intro { margin-bottom: var(--space-4); }

  /* Sits between the last field and the button that records the agreement.
     Small, but never hidden: this is the only place an invited person is
     told what they are agreeing to. */
  .auth-agreement {
    margin: calc(var(--space-2) * -1) 0 var(--space-1);
    text-wrap: pretty;
  }

  /* --- account --------------------------------------------------------- */
  .usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--space-3);
  }

  .usage-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
  }

  .usage-value {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: 1;
  }

  .usage-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  .usage-note { margin-top: var(--space-4); }
  .usage-grid-tight { margin-top: var(--space-4); }

  /* --- library --------------------------------------------------------- */
  /* One route in, so no grid and no divider: there was a second column
   * holding a "paste a link" form until KAN-79. A one-child grid with an
   * "or" separator is a layout waiting for a sibling that is not coming. */
  .import-panel { display: grid; gap: var(--space-5); }

  /* --- import queue ---------------------------------------------------- */
  .import-list { list-style: none; margin: 0; padding: 0; }
  .import-item + .import-item { margin-top: var(--space-3); }
  .import-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .import-name {
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .import-phase {
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* --- book list ------------------------------------------------------- */
  .book-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
  }

  .book-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease);
  }
  .book-card:hover { border-color: var(--border-strong); }

  .book-card-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
  }
  .book-card-title:hover { color: var(--accent); }

  .book-card-meta {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  .book-card-progress {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-2);
  }

  .voice-row {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
  }
  .voice-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
  }
  .voice-row.is-current .voice-row-name { color: var(--text); font-weight: 600; }
  .voice-row-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (max-width: 48rem) {
    .book-card { grid-template-columns: 1fr; }
    .book-card-actions { justify-self: stretch; }
    .book-card-actions .btn { width: 100%; }
    .voice-row { grid-template-columns: 5.5rem 1fr auto; }
  }

  .voice-fold > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
    list-style-position: inside;
  }
  .voice-fold > summary:hover { color: var(--text); }
  .voice-fold[open] > summary { margin-bottom: var(--space-2); }
  .voice-fold .voice-row + .voice-row { margin-top: var(--space-2); }

  /* --- chapter table --------------------------------------------------- */
  /* A disclosure trigger, so a <button> — the old markup used <a href="#">,
   * which announces as a link and navigates nowhere. */
  .chapter-title {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
  }
  .chapter-title:hover { color: var(--accent); }

  .chapter-meta {
    display: none;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  .cell-status { min-width: 9rem; }
  .cell-status .progress { margin-top: var(--space-2); }
  .progress-text { color: var(--text-muted); font-size: var(--text-xs); }
  .error-text:empty { display: none; }
  .error-text {
    margin-top: var(--space-1);
    color: var(--danger);
    font-size: var(--text-xs);
  }

  .audio-group { display: inline-flex; align-items: center; gap: var(--space-1); }
  .cell-actions { white-space: nowrap; }
  .cell-actions .btn + .btn { margin-inline-start: var(--space-1); }

  .rename-input {
    width: min(100%, 24rem);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-sunken);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font: inherit;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
  }

  /* The table becomes a stack of cards on a phone. Columns that repeat
   * information already in the title cell are dropped rather than wrapped. */
  @media (max-width: 48rem) {
    #chapter-table,
    #chapter-table tbody,
    #chapter-table tr,
    #chapter-table td { display: block; width: 100%; }
    #chapter-table thead { display: none; }
    #chapter-table tr {
      margin-bottom: var(--space-3);
      padding: var(--space-4);
      background: var(--surface-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    #chapter-table tr:last-child { margin-bottom: 0; }
    #chapter-table td { padding: 0; border: none; }
    /* Hidden because .chapter-meta already carries both figures in the
       card. **By class, never by position**: these were nth-child(1,3,4)
       against the old column order, and removing the "#" column shifted
       every index by one — so the phone hid the chapter title and the
       status badge and showed a bare word count instead (Toni, 2026-08-05).
       A selector that depends on where a cell sits breaks whenever a column
       moves; one that names what the cell *is* does not. */
    #chapter-table td.cell-words,
    #chapter-table td.cell-length { display: none; }
    #chapter-table .chapter-meta { display: block; }
    #chapter-table .cell-status {
      margin-top: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px solid var(--border);
    }
    #chapter-table .cell-audio:not(:empty) { margin-top: var(--space-2); }
    #chapter-table .cell-actions {
      display: flex;
      gap: var(--space-2);
      margin-top: var(--space-3);
      white-space: normal;
    }
    #chapter-table .cell-actions .btn { flex: 1; margin-inline-start: 0; }
    /* Scoped to *this* wrap. Written bare the first time, it switched off
       scrolling for every table on the site — the admin tables then pushed
       the whole page sideways on a phone. */
    #chapter-table-wrap { overflow-x: visible; }
  }

  /* --- book page toolbar ----------------------------------------------- */
  .book-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }
  .book-toolbar .btn-group { margin-inline-start: auto; }

  @media (max-width: 48rem) {
    .book-toolbar { flex-direction: column; align-items: stretch; }
    .book-toolbar .btn-group { margin-inline-start: 0; }
    .book-toolbar .btn-group .btn { flex: 1 1 8rem; }
  }

  /* --- the plan chooser, on the account page --------------------------- */
  /* The marketing page has its own `.plan-card`, deliberately not shared:
     that one is a sales surface with a hero and room to breathe, this is a
     setting sitting under the allowance it governs. Sharing the class would
     mean loading marketing.css into the app shell for one card. */
  .plan-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin-block: var(--space-4);
  }
  .plan-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .plan-option.is-current {
    border-color: var(--accent);
    background: var(--accent-subtle);
  }
  .plan-option-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .plan-option-name { font-size: var(--text-md); font-weight: 650; }
  .plan-option-price { font-size: var(--text-md); font-weight: 600; white-space: nowrap; }
  .plan-option-price .hint { font-weight: 400; }
  .plan-option-hours { color: var(--text-muted); font-size: var(--text-sm); }
  .plan-option-features {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
  }
  .plan-option-features li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-2);
  }
  .plan-option-features svg { margin-top: 0.2em; color: var(--accent); }
  .plan-option form { margin: 0; }

  /* The primary "open this" control in a card, sized for a thumb. Both are
   * plain text buttons on a desktop, where a pointer is precise; on a phone
   * they are the thing you actually aim at. */
  @media (max-width: 48rem) {
    .book-card-title,
    .chapter-title {
      display: flex;
      align-items: center;
      min-height: var(--tap-min);
      width: 100%;
      text-align: start;
    }
  }
}