/* Category directory follows the shared collection and filter components. */
.categories-page .dashboard-heading { align-items:center; flex-direction:row; flex-wrap:wrap; }
.categories-page .category-total { color:var(--color-muted); font-size:17px; font-weight:400; letter-spacing:0; white-space:nowrap; }
.categories-page .filter-toolbar { margin-bottom:18px; }
.categories-page .filter-search { max-width:320px; }
.categories-page .category-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px, 2vw, 24px);
  max-width:850px;
  margin-inline:auto;
}

.categories-page .category-summary {
  container:category-card / inline-size;
  position:relative;
  display:flex;
  flex-direction:column;
}
.categories-page .category-summary:has(.category-open:hover) { border-color:var(--color-primary); }
.categories-page .category-summary:has(.category-open:focus-visible) { outline:2px solid var(--color-primary); outline-offset:3px; }
.categories-page .category-summary-heading {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  padding:12px var(--collection-inset);
  border-radius:calc(var(--collection-radius) - 1px) calc(var(--collection-radius) - 1px) 0 0;
  background:var(--color-soft);
}
.categories-page .category-letter {
  min-width:36px;
  width:auto;
  min-height:36px;
  height:auto;
  padding:4px 8px;
  font-weight:700;
  line-height:1.2;
}
.categories-page .category-letter-age { max-width:76px; font-size:13px; overflow-wrap:anywhere; }
.categories-page .category-summary-name { min-width:0; overflow-wrap:anywhere; }
.categories-page .category-summary-name h2 { font-size:18px; line-height:1.2; letter-spacing:-.35px; }
.categories-page .category-open { color:var(--color-primary); text-decoration:none; }
.categories-page .category-open:hover { text-decoration:underline; }
.categories-page .category-open::after { content:""; position:absolute; inset:0; z-index:1; border-radius:var(--collection-radius); }
.categories-page .category-summary-name p { color:var(--color-muted); font-size:12px; line-height:1.4; margin-top:3px; }
.categories-page .category-settings {
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  color:var(--color-primary);
  text-decoration:none;
}
.categories-page .category-settings:hover { background:var(--color-surface); }
.categories-page .category-settings .icon { width:17px; height:17px; }

.categories-page .category-summary-body {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px var(--collection-inset);
  line-height:1.45;
}
.categories-page .category-summary-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.categories-page .category-summary-details { display:grid; gap:5px; min-width:0; }
.categories-page .category-format, .categories-page .category-preparation { color:var(--color-muted); font-size:12px; }
.categories-page .category-participation {
  display:flex;
  flex-wrap:wrap;
  gap:2px 8px;
  font-size:13px;
}
.categories-page .category-participation strong { color:var(--color-primary); font-weight:700; }
.categories-page .category-participation span { color:var(--color-muted); }
.categories-page :is(.category-match-progress, .category-preparation) { margin-top:auto; padding-top:7px; }
.categories-page .category-progress-label {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  margin-bottom:5px;
  color:var(--color-muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.categories-page .category-progress-label strong { color:var(--color-text); font-weight:600; white-space:nowrap; }
.categories-page .category-progress { display:block; width:100%; height:5px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:var(--color-soft); color:var(--color-primary); }
.categories-page .category-progress::-webkit-progress-bar { background:var(--color-soft); border-radius:3px; }
.categories-page .category-progress::-webkit-progress-value { background:var(--color-primary); border-radius:3px; }
.categories-page .category-progress::-moz-progress-bar { background:var(--color-primary); border-radius:3px; }

.categories-page .category-summary-footer { padding:8px var(--collection-inset); flex-wrap:nowrap; gap:4px; }
.categories-page .category-state { display:inline-flex; align-items:center; gap:6px; padding:3px 7px; border-radius:4px; color:var(--color-muted); background:var(--color-soft); font-size:12px; font-weight:600; line-height:1.5; }
.categories-page .category-state-dot { flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.categories-page .category-state--preparation { color:#694413; background:#fff1dc; }
.categories-page .category-state--scheduled { color:#214979; background:#e5effb; }
.categories-page .category-state--live { color:#1c5238; background:#e0f2e8; }
.categories-page .category-state--finished { color:#34424e; background:#e9edf0; }
.categories-page .category-state .icon { width:15px; height:15px; flex:none; }

@container category-card (width < 208px) {
  .categories-page :is(.category-summary-heading, .category-summary-body, .category-summary-footer) { --collection-inset:8px; }
  .categories-page .category-summary-heading {
    display:flex;
    justify-content:flex-start;
    gap:4px 8px;
    padding-block:8px;
  }
  .categories-page .category-summary-name { flex:1; min-width:min(100%,70px); }
  .categories-page .category-summary-name h2 { font-size:16px; }
  .categories-page .category-summary-heading:has(.category-settings) { justify-content:space-between; }
  .categories-page .category-summary-heading:has(.category-settings) .category-summary-name { flex-basis:100%; order:1; }
  .categories-page .category-summary-heading:has(.category-settings) .category-letter-age { max-width:min(76px,calc(100% - 52px)); }
  .categories-page .category-progress-label { font-size:11px; }
}
@container category-card (180px <= width < 208px) {
  .categories-page .category-summary-heading:has(.category-settings):not(:has(.category-letter-age)) .category-summary-name {
    flex-basis:0;
    min-width:60px;
    order:0;
  }
}
@container category-card (width < 160px) {
  .categories-page .category-state { gap:4px; padding-inline:6px; font-size:11px; }
  .categories-page .category-summary-meta { gap:2px; }
  .categories-page .category-summary-details { overflow-wrap:anywhere; }
  .categories-page .category-progress-label { flex-wrap:wrap; gap:2px 6px; }
}
@media(max-width:768px) {
  .categories-page .dashboard-heading > .button { min-height:44px; }
  .categories-page .category-settings { width:44px; height:44px; }
}
@media(max-width:540px) {
  .categories-page .filter-search { min-width:0; max-width:none; flex-basis:calc(100% - 100px); }
  .categories-page .list-filter-count { flex-basis:100%; margin-inline-start:0; }
}

@media screen {
  :root[data-court-theme^='dark-'] .categories-page .category-state--preparation { color: var(--color-warning-text); background: var(--color-warning-bg); }
  :root[data-court-theme^='dark-'] .categories-page .category-state--scheduled { color: var(--color-info-text); background: var(--color-info-bg); }
  :root[data-court-theme^='dark-'] .categories-page .category-state--live { color: var(--color-success-text); background: var(--color-success-bg); }
  :root[data-court-theme^='dark-'] .categories-page .category-state--finished { color: var(--color-muted); background: var(--color-surface-tint); }
}