/* ============================================================
   Decks#index

   Page shell uses .container-center; only the bits unique to
   decks#index live here.
   ============================================================ */

/* Header nav toggle (Recommended / All / Bookmark).
   Lives in @layer layouts to override section-header.css which sets
   .s-options-nav-link to --color-link by default. Selector chains through
   .s-header to beat the nested .s-header .s-options-nav-link rule from
   section-header.css on cascade order. */
@layer layouts {
  .s-header .decks-nav .s-options-nav-item-active {
    color: var(--color-link);
  }
  .s-header .decks-nav .s-options-nav-link {
    color: var(--color-ink);
  }
  .s-header .decks-nav .s-options-nav-link:hover {
    color: var(--color-link);
  }
}

@layer components {
  /* ---------- Stats grid (5 cols: name | new | learn | due | bm) ---------- */
  .decks-legend,
  .decks-row {
    display: grid;
    grid-template-columns: 1fr 4.5rem 4.5rem 4.5rem 2.25rem;
    align-items: center;
    gap: 0;
  }

  .decks-legend {
    padding: 0.5rem 0.5rem 0.375rem;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
  }
  .decks-legend-col {
    text-align: center;
  }

  .decks-row {
    position: relative;
    padding: 0.6875rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--transition-fast);
  }
  .decks-row:hover {
    background: var(--color-bg-subtle);
  }
  .decks-row:hover .decks-name-target {
    text-decoration: underline;
  }
  .decks-row.is-indented .decks-name {
    padding-left: 1.5rem;
  }

  /* Recommended rows: simpler grid (name | items count | copy action) */
  .decks-row.decks-row-recommended {
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
  }
  .decks-row-recommended > .decks-row-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
  .decks-row-recommended > .decks-name {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  .decks-row-recommended > .decks-meta {
    position: relative;
    z-index: 1;
    pointer-events: none;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .decks-row-recommended > .decks-action {
    position: relative;
    z-index: 2;
    justify-self: end;
    display: grid;
    place-items: center;
  }
  .decks-row-recommended .decks-copy-btn {
    white-space: nowrap;
  }

  @media (max-width: 639.98px) {
    .decks-row.decks-row-recommended {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "name action"
        "meta action";
      column-gap: 0.75rem;
      row-gap: 0.125rem;
    }
    .decks-row-recommended > .decks-name { grid-area: name; }
    .decks-row-recommended > .decks-meta { grid-area: meta; }
    .decks-row-recommended > .decks-action { grid-area: action; align-self: center; }
  }

  /* Deck rows: full-row clickable link overlay so the bookmark stays clickable */
  .decks-row-deck > .decks-row-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
  .decks-row-deck > .decks-name,
  .decks-row-deck > .decks-num {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  .decks-row-deck > .decks-bookmark {
    position: relative;
    z-index: 2;
    justify-self: end;
    display: grid;
    place-items: center;
  }

  .decks-name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .decks-name-target {
    color: var(--color-ink);
    font-weight: 500;
    font-size: 1rem;
  }
  .decks-name-gloss {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  /* Folder rows: chevron + slightly heavier name so folders read as headers. */
  .decks-row-folder .decks-name-target {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
  }
  .decks-chev {
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    width: 0.75rem;
    text-align: center;
  }
  .decks-row-folder:hover .decks-chev {
    color: var(--color-ink);
  }

  /* Stat numbers */
  .decks-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 0.9375rem;
  }
  .decks-num-new {
    color: var(--color-link);
  }
  .decks-num-learn {
    color: var(--color-negative);
  }
  .decks-num-due {
    color: var(--color-positive);
  }
  .decks-num.is-zero {
    color: var(--color-ink-muted);
    font-weight: 400;
  }

  /* Bookmark icon (shared partial renders an <a> inside a turbo-frame) */
  .decks-bookmark,
  .decks-bookmark turbo-frame {
    display: grid;
    place-items: center;
  }
  .decks-bookmark a {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
  }
  .decks-bookmark a:hover {
    color: var(--color-link);
    background: var(--color-bg-subtle);
  }
  .decks-bookmark .fas.fa-bookmark,
  .decks-bookmark .fa.fa-bookmark {
    color: var(--color-link);
  }

  /* Mobile: drop the legend, tighten columns */
  @media (max-width: 639.98px) {
    .decks-legend {
      display: none;
    }
    .decks-row {
      grid-template-columns: 1fr 2.25rem 2.25rem 2.25rem 1.75rem;
      padding: 0.75rem 0.25rem;
      margin: 0 -0.25rem;
    }
    .decks-num {
      font-size: 0.875rem;
    }
    .decks-bookmark a {
      width: 1.75rem;
      height: 1.75rem;
      font-size: 0.8125rem;
    }
    .decks-row.is-indented .decks-name {
      padding-left: 1rem;
    }
  }
}