/*
 * カテゴリー一覧 (docs/categories/index.md) — a master/detail explorer:
 * grouped category list on the left, matching episodes on the right.
 * Panel visibility is driven entirely by the `:target` pseudo-class (each
 * left-hand link is `<a href="#cat-NAME">`, each right-hand panel is
 * `<div id="cat-NAME">`) — no JS, and clicking a link just works even with
 * CSS disabled (browser jumps straight to the matching panel).
 */

.pod-category-explorer {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: start;
  gap: var(--space-6);
}

@media screen and (max-width: 60em) {
  .pod-category-explorer {
    grid-template-columns: 1fr;
  }
}

/* Drawer chrome (toggle checkbox + "カテゴリー" open button + backdrop +
   in-drawer close button) — desktop keeps the plain always-visible
   sidebar from the two rules above, so none of this is needed there. */
.pod-category-explorer__drawer-toggle {
  display: none;
}

.pod-category-explorer__drawer-button,
.pod-category-explorer__drawer-backdrop,
.pod-category-explorer__drawer-close {
  display: none;
}

@media screen and (max-width: 60em) {
  .pod-category-explorer__drawer-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    padding: 0.6rem 1.1rem;
    margin-bottom: var(--space-5);
    border: 1px solid var(--pod-border-strong);
    border-radius: var(--radius-pill);
    background: var(--pod-bg-elevated);
    color: var(--pod-ink);
    font-weight: 600;
    cursor: pointer;
  }

  .pod-category-explorer__drawer-button .pod-icon {
    width: 0.9em;
    height: 0.9em;
    color: var(--pod-accent-warm);
  }

  /* Below the sidebar's own breakpoint, the "list" nav becomes a
     fixed off-canvas panel instead of the block that used to push every
     group's every category down the page ahead of any article. */
  .pod-category-explorer__list {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: block;
    width: min(85vw, 320px);
    height: 100%;
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--pod-bg-elevated);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .pod-category-explorer__drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(20, 20, 15, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .pod-category-explorer__drawer-close {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
    color: var(--pod-ink-soft);
    cursor: pointer;
  }

  .pod-category-explorer__drawer-close .pod-icon {
    width: 1.1em;
    height: 1.1em;
  }

  .pod-category-explorer__drawer-toggle:checked ~ .pod-category-explorer__list {
    display: block;
    transform: translateX(0);
  }

  .pod-category-explorer__drawer-toggle:checked ~ .pod-category-explorer__drawer-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

body:has(#pod-category-drawer:checked) {
  overflow: hidden;
}

.pod-category-explorer__group {
  margin-bottom: var(--space-5);
}

/* Double-class selector deliberately: typography.css's `.md-typeset h2`
   (a class + a type = higher specificity than a single class) sets a big
   `margin-top`/`padding-top`/`border-top` for editorial section breaks
   elsewhere on the page, which otherwise wins over a plain
   `.pod-category-explorer__group-title` rule regardless of source order
   and shoves this first heading out of alignment with the panel box next
   to it. */
.pod-category-explorer__group .pod-category-explorer__group-title {
  margin: 0 0 var(--space-2);
  padding-top: 0;
  border-top: none;
  font-size: 0.95rem;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--pod-border-strong);
}

.pod-category-explorer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--pod-ink-soft);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pod-category-explorer__link:hover {
  background: var(--pod-bg-sunken);
  color: var(--pod-accent);
}

.pod-category-explorer__count {
  padding: 0.05rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--pod-bg-sunken);
  color: var(--pod-ink-faint);
  font-size: 0.78rem;
  font-weight: 400;
}

.pod-category-explorer__panel {
  display: none;
}

/* First category is shown by default — generic rules (no per-category
   CSS needed, even as categories.yml grows): the first panel is visible
   by default, any explicitly `:target`-ed panel is visible, and the
   default first panel hides itself once some *other* panel is targeted. */
.pod-category-explorer__panel:first-of-type {
  display: block;
}

.pod-category-explorer__panel:target {
  display: block;
}

.pod-category-explorer__panels:has(.pod-category-explorer__panel:target)
  .pod-category-explorer__panel:first-of-type:not(:target) {
  display: none;
}

/* Double-class selector: same specificity note as __group-title above —
   `.md-typeset h3` otherwise wins and this reads as a plain paragraph-ish
   heading instead of a distinct block. A left accent bar (this site's
   vermillion "storefront" color, see header.css) plus a tint reads as its
   own titled block, not just underlined text. */
.pod-category-explorer__panel .pod-category-explorer__panel-title {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--pod-accent-warm);
  background: var(--pod-accent-warm-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.15rem;
}

/* Not .pod-grid--2: its auto-fill minmax(320px, 1fr) needs 2×320px+gap
   available before it grants a 2nd column — comfortably true for a
   full-width article body, but this grid shares its row with the 320px
   nav column next to it, so at plenty of ordinary desktop widths
   (roughly 960–1350px) there isn't 656px left for it and it silently
   collapses to 1 column despite the two-column explorer layout still
   being active. A *fixed* 2-column grid instead sizes each card as a
   fraction of whatever width remains, so it never collapses — it only
   ever gets narrower. */
.pod-category-explorer__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media screen and (max-width: 40em) {
  .pod-category-explorer__cards {
    grid-template-columns: 1fr;
  }
}

.pod-category-explorer__empty-cat {
  color: var(--pod-ink-faint);
}