/*
 * カテゴリー一覧 (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 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-4);
}

/* 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);
  margin: 0;
  padding: 0.4rem 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);
}

/* Persistent highlight for whichever category is actually showing on the
   right, not just a transient `:hover`. This generic rule covers the
   "nothing targeted yet" case (fresh page load): the first link in the
   first group lights up, mirroring `.pod-category-explorer__panel:first-of-type`
   below being the panel shown by default. The "a specific category IS
   targeted" case can't be expressed generically — CSS has no way to say
   "the element my own href points to is :target" without naming that id
   literally — so categories_overview() (macros/main.py) emits one small
   `:has()` rule per category alongside the matching panel/link markup,
   using these same two declarations. */
.pod-category-explorer:not(:has(.pod-category-explorer__panel:target))
  .pod-category-explorer__group:first-of-type .pod-category-explorer__link:first-of-type {
  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;
}

/* The overall-default category is deliberately rendered LAST among the
   panels (categories_overview() in macros/main.py moves it there after
   building the list in its normal, nav-visible order) specifically so
   this can be done with the general sibling combinator (`~`) instead of
   `:has()`. `:has()` would need to ask "does some EARLIER-in-the-DOM
   sibling match :target", which only a parent-relationship selector can
   express — `~` alone can only look forward. Putting the default panel
   last flips that: "some earlier sibling is :target" is now a plain
   forward `~` match, so this whole default/override pair works even in
   browsers without `:has()` support (unlike the per-category nav-link
   highlight, which genuinely has no such workaround and stays
   `:has()`-only, see categories_overview()'s generated `<style>`).
   Source order here has no visual effect either way — the panel that's
   actually visible is always the only one taking up space in the
   `.pod-category-explorer__panels` box, regardless of its position among
   the (display:none) rest. */
.pod-category-explorer__panel:last-of-type {
  display: block;
}

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

.pod-category-explorer__panel:target ~ .pod-category-explorer__panel:last-of-type {
  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);
}