/* Command Palette and entity (Team / Player) pages.
   Uses the CAF navy/gold/green system already defined in scoreplay-library.css
   so these surfaces read as the same product, not as a bolted-on admin tool. */

/* ══════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════════════════════════════ */

.caf-palette {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
}

.caf-palette[hidden] { display: none; }

.caf-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 18, 0.72);
  backdrop-filter: blur(3px);
}

.caf-palette-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  background: #0a1c2e;
  border: 1px solid var(--caf-navy-border);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.caf-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--caf-border);
}

.caf-palette-input-icon { font-size: 15px; opacity: 0.85; }

.caf-palette-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f2f7fb;
  font-size: 16px;
  font-weight: 600;
}

.caf-palette-input::placeholder { color: #7a8ea3; font-weight: 500; }

.caf-palette-esc,
.caf-palette-foot kbd {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 10.5px;
  color: #93a7bb;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 2px 6px;
}

.caf-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.caf-palette-group-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #8fa3b7;
  padding: 10px 10px 6px;
}

.caf-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
}

.caf-palette-item.is-active {
  background: rgba(215, 167, 61, 0.12);
  border-color: rgba(215, 167, 61, 0.34);
}

.caf-palette-thumb {
  width: 42px;
  height: 32px;
  flex: 0 0 42px;
  border-radius: 6px;
  overflow: hidden;
  background: #0d2438;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.caf-palette-thumb img { width: 100%; height: 100%; object-fit: cover; }
.caf-palette-thumb img.is-avatar { object-position: top center; }

.caf-palette-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.caf-palette-item-label {
  font-size: 13px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-palette-item-meta {
  font-size: 11px;
  color: #93a7bb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-palette-note {
  padding: 18px 14px;
  text-align: center;
  font-size: 12.5px;
  color: #93a7bb;
}

.caf-palette-foot {
  display: flex;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--caf-border);
  font-size: 11px;
  color: #7a8ea3;
}

.caf-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }

body.caf-palette-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   TEAM / PLAYER PAGES
   ══════════════════════════════════════════════════════════════════════════ */

.caf-entity { padding: 4px 0 40px; }

.caf-entity-loading,
.caf-entity-empty {
  padding: 26px 4px;
  color: #93a7bb;
  font-size: 13px;
}

.caf-entity-back {
  background: transparent;
  border: 1px solid var(--caf-border);
  color: #dbe6f0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  margin-bottom: 14px;
}

.caf-entity-back:hover { border-color: var(--caf-gold); color: #fff; }

.caf-entity-identity { display: flex; align-items: center; gap: 16px; }

.caf-entity-crest {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(140deg, #10243a, #061423);
  border: 1px solid var(--caf-navy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--caf-gold);
  text-transform: uppercase;
}

/* Sits over the initials, so a portrait the provider cannot serve simply
   falls back to them rather than showing a broken image. */
.caf-entity-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.caf-entity-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caf-gold);
}

.caf-entity-name { margin: 2px 0 0; font-size: 24px; font-weight: 800; color: #f2f7fb; }
.caf-entity-sub { margin: 3px 0 0; font-size: 12.5px; color: #93a7bb; }

.caf-entity-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 16px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.caf-entity-tabs::-webkit-scrollbar { display: none; }

.caf-entity-tab {
  background: transparent;
  border: 1px solid var(--caf-border);
  color: #b9c8d8;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.caf-entity-tab.is-active {
  background: var(--caf-gold);
  border-color: var(--caf-gold);
  color: #061423;
}

.caf-entity-block { margin-bottom: 26px; }

.caf-entity-block-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b9c8d8;
  margin: 0 0 10px;
}

.caf-entity-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.caf-entity-media-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
}

.caf-entity-media-card:hover { border-color: var(--caf-gold); }

.caf-entity-media-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: #0d2438;
}

.caf-entity-media-thumb img { width: 100%; height: 100%; object-fit: cover; }

.caf-entity-media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--caf-gold);
  letter-spacing: 1px;
}

.caf-entity-media-kind,
.caf-entity-media-duration {
  position: absolute;
  bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(6, 20, 35, 0.86);
  color: #dbe6f0;
}

.caf-entity-media-kind { left: 6px; }
.caf-entity-media-duration { right: 6px; }

.caf-entity-media-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.caf-entity-media-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-entity-media-meta {
  font-size: 11px;
  color: #93a7bb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-entity-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.caf-entity-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
}

.caf-entity-player-card:hover { border-color: var(--caf-green); }

.caf-entity-player-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #0d2438;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caf-entity-player-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.caf-entity-player-initials { font-weight: 800; color: var(--caf-gold); text-transform: uppercase; }

.caf-entity-player-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-entity-season-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.caf-entity-season {
  background: rgba(0, 122, 61, 0.14);
  border: 1px solid rgba(0, 122, 61, 0.32);
  border-radius: 999px;
  padding: 5px 12px;
}

.caf-entity-season-name { font-size: 12px; font-weight: 700; color: #7fd8a8; }

.caf-entity-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.caf-entity-pager-label { font-size: 12px; color: #93a7bb; }

@media (max-width: 560px) {
  .caf-palette { padding: 6vh 10px 10px; }
  .caf-palette-panel { max-height: 82vh; }
  .caf-entity-name { font-size: 20px; }
  .caf-entity-crest,
  .caf-entity-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: 20px; }
  .caf-entity-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .caf-entity-player-grid { grid-template-columns: 1fr; }
}

/* Palette result visuals — small, real, and consistent with every other surface. */
.caf-palette-visual {
  flex: 0 0 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caf-palette-visual .caf-thumb { border-radius: 6px; }
.caf-palette-visual.is-artwork .caf-artwork { border-radius: 6px; }

/* Entity hero: compact enough that a phone still shows content below it. */
.caf-entity-identity-text { min-width: 0; }

@media (max-width: 560px) {
  .caf-entity-identity { gap: 12px; }
  .caf-entity-identity .caf-avatar-lg,
  .caf-entity-identity .caf-crest-lg { width: 56px; height: 56px; font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DISCOVER — tag explorer and video action discovery
   ══════════════════════════════════════════════════════════════════════════ */

.caf-discover { padding: 4px 0 48px; max-width: 1180px; }

.caf-discover-head { margin-bottom: 18px; }
.caf-discover-title { margin: 0; font-size: 26px; font-weight: 800; color: #f2f7fb; }
.caf-discover-sub { margin: 5px 0 0; font-size: 13px; color: #93a7bb; }

.caf-discover-tabs { display: flex; gap: 6px; margin-bottom: 20px; }

.caf-discover-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 12px;
}

.caf-discover-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f2f7fb;
  font-size: 15px;
  font-weight: 600;
}

.caf-discover-input::placeholder { color: #7a8ea3; font-weight: 500; }

.caf-discover-hint { margin: 10px 2px 18px; font-size: 12px; color: #7a8ea3; }
.caf-discover-note { margin: 22px 2px; font-size: 13px; color: #93a7bb; max-width: 62ch; line-height: 1.55; }

.caf-discover-group { margin-bottom: 24px; }

.caf-discover-group-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #b9c8d8;
  margin: 0 0 10px;
}

.caf-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.caf-tag-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.caf-tag-card:hover { border-color: var(--caf-gold); }

.caf-tag-art { width: 34px; flex: 0 0 34px; display: block; }
.caf-tag-glyph { font-size: 17px; width: 30px; flex: 0 0 30px; text-align: center; }

.caf-tag-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.caf-tag-label {
  font-size: 13px;
  font-weight: 700;
  color: #f2f7fb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caf-tag-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--caf-gold); }

/* Scope chooser */
.caf-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.caf-scope-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}

.caf-scope-card:hover { border-color: var(--caf-gold); transform: translateY(-2px); }
.caf-scope-card .caf-artwork { border-radius: 8px; }
.caf-scope-name { font-size: 12.5px; font-weight: 700; color: #f2f7fb; line-height: 1.3; }

.caf-discover-scopebar { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.caf-discover-scope-name { margin: 0; font-size: 18px; font-weight: 800; color: #f2f7fb; }
.caf-discover-scope-note { margin: 3px 0 0; font-size: 12px; color: #93a7bb; }

.caf-action-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.caf-action-filter {
  background: transparent;
  border: 1px solid var(--caf-border);
  color: #b9c8d8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.caf-action-filter.is-active { background: var(--caf-gold); border-color: var(--caf-gold); color: #061423; }

.caf-action-list { display: flex; flex-direction: column; gap: 10px; }

.caf-action-card {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-gold);
  border-radius: 11px;
}

.caf-action-visual { display: block; }
.caf-action-body { min-width: 0; }

.caf-action-name { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #f2f7fb; line-height: 1.3; }

.caf-action-players { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }

.caf-action-player {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #b9c8d8;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
}

.caf-action-player:hover { border-color: var(--caf-gold); color: #fff; }

.caf-action-match { margin: 0; font-size: 12px; color: #dbe6f0; font-weight: 600; }
.caf-action-context { margin: 2px 0 0; font-size: 11.5px; color: #93a7bb; }

.caf-action-law {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--caf-gold);
  background: rgba(215, 167, 61, 0.12);
  border: 1px dashed rgba(215, 167, 61, 0.45);
  padding: 2px 9px;
  border-radius: 999px;
}

.caf-action-actions { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 720px) {
  .caf-action-card { grid-template-columns: 1fr; }
  .caf-action-visual { max-width: 100%; }
  .caf-action-actions { flex-direction: row; }
  .caf-tag-grid { grid-template-columns: 1fr; }
  .caf-scope-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .caf-discover-title { font-size: 21px; }
}

.caf-discover-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   COLLECTIONS — rules with a visual identity
   ══════════════════════════════════════════════════════════════════════════ */

.caf-collections-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.caf-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
}

.caf-collection-card {
  display: flex;
  flex-direction: column;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 13px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.caf-collection-card:hover { border-color: var(--caf-gold); transform: translateY(-2px); }

.caf-collection-open {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.caf-collection-open .caf-mosaic { border-radius: 0; }

.caf-collection-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 6px; }

.caf-collection-name { font-size: 14.5px; font-weight: 800; color: #f2f7fb; line-height: 1.3; }
.caf-collection-rule { font-size: 11.5px; color: #93a7bb; }
.caf-collection-count { font-size: 11.5px; font-weight: 700; color: var(--caf-gold); }

.caf-collection-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px 12px;
}

.caf-collection-kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #7fd8a8;
  background: rgba(0, 122, 61, 0.16);
  border: 1px solid rgba(0, 122, 61, 0.34);
  padding: 2px 8px;
  border-radius: 999px;
}

.caf-collection-pin {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #b9c8d8;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.caf-collection-pin.is-pinned { border-color: var(--caf-gold); color: var(--caf-gold); }

/* Detail hero */
.caf-collection-hero { display: flex; gap: 18px; margin-bottom: 22px; align-items: flex-start; }
.caf-collection-hero-visual { flex: 0 0 260px; max-width: 260px; display: block; }
.caf-collection-hero-body { min-width: 0; }
.caf-collection-hero-name { margin: 8px 0 0; font-size: 22px; font-weight: 800; color: #f2f7fb; }
.caf-collection-hero-desc { margin: 5px 0 0; font-size: 13px; color: #b9c8d8; }
.caf-collection-hero-rule { margin: 6px 0 0; font-size: 12.5px; color: #93a7bb; }
.caf-collection-hero-coverage { margin: 4px 0 0; font-size: 12px; color: var(--caf-gold); font-weight: 700; }
.caf-collection-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.caf-collection-ref {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-green);
  border-radius: 10px;
  margin-bottom: 8px;
}

.caf-collection-ref-law { font-size: 12.5px; font-weight: 700; color: #f2f7fb; }
.caf-collection-ref-topic { flex: 1; font-size: 11.5px; color: #93a7bb; }

/* Rule builder */
.caf-builder { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.caf-builder-field { display: flex; flex-direction: column; gap: 5px; }

.caf-builder-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #b9c8d8;
}

.caf-builder-input {
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 9px;
  color: #f2f7fb;
  font-size: 13.5px;
  padding: 9px 12px;
  outline: none;
}

.caf-builder-input:focus { border-color: var(--caf-gold); }
.caf-builder-hint { font-size: 11.5px; color: #7a8ea3; }
.caf-builder-actions { display: flex; gap: 8px; margin-top: 4px; }

.caf-builder-preview {
  padding: 14px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 11px;
}

.caf-builder-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .caf-collection-grid { grid-template-columns: 1fr; }
  .caf-collection-hero { flex-direction: column; }
  .caf-collection-hero-visual { flex-basis: auto; max-width: 100%; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LEARNING — Law hub, Topic hub, Coverage
   ══════════════════════════════════════════════════════════════════════════ */

.caf-law-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

/* The provider has no Law artwork, so a Law is given a CAF treatment built
   from its own number rather than borrowed imagery. */
.caf-law-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(140deg, #0c2540 0%, #071627 72%);
  border: 1px solid var(--caf-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}

.caf-law-card:hover { border-color: var(--caf-gold); transform: translateY(-2px); }
.caf-law-card.has-content { border-left: 3px solid var(--caf-green); }

.caf-law-number {
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--caf-gold);
  min-width: 44px;
}

.caf-law-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.caf-law-name { font-size: 14px; font-weight: 800; color: #f2f7fb; }
.caf-law-stats { font-size: 11.5px; color: #93a7bb; }
.caf-law-card.has-content .caf-law-stats { color: #7fd8a8; font-weight: 700; }

.caf-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.caf-topic-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.caf-topic-card:hover { border-color: var(--caf-gold); }
.caf-topic-card.has-content { border-left: 3px solid var(--caf-green); }
.caf-topic-name { font-size: 13.5px; font-weight: 800; color: #f2f7fb; }
.caf-topic-stats { font-size: 11.5px; color: #93a7bb; }
.caf-topic-card.has-content .caf-topic-stats { color: #7fd8a8; font-weight: 700; }
.caf-topic-laws { font-size: 11px; color: var(--caf-gold); }

/* Coverage */
.caf-coverage-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.caf-coverage-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 11px;
}

.caf-coverage-value { font-size: 24px; font-weight: 800; color: var(--caf-gold); }
.caf-coverage-label { font-size: 11.5px; color: #93a7bb; }

.caf-coverage-table { width: 100%; border-collapse: collapse; }

.caf-coverage-table th,
.caf-coverage-table td {
  text-align: left;
  padding: 9px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.caf-coverage-table thead th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #8fa3b7;
}

.caf-coverage-table tbody th { font-weight: 700; color: #f2f7fb; }
.caf-coverage-table td { color: #b9c8d8; }
.caf-coverage-table tr.is-empty td,
.caf-coverage-table tr.is-empty th button { color: #6f8296; }

.caf-coverage-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.caf-coverage-link:hover { color: var(--caf-gold); }

.caf-coverage-bar {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.caf-coverage-bar span { display: block; height: 100%; background: var(--caf-green); border-radius: 999px; }

/* Learning moments */
.caf-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.caf-moment-card {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-green);
  border-radius: 11px;
  margin-bottom: 10px;
}

.caf-moment-visual { display: block; }
.caf-moment-body { min-width: 0; }
.caf-moment-title { margin: 0 0 5px; font-size: 14px; font-weight: 800; color: #f2f7fb; }
.caf-moment-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }

/* A confirmed classification: solid CAF green, deliberately unlike the dashed
   gold used for a provider suggestion. */
.caf-moment-confirmed {
  font-size: 10.5px;
  font-weight: 700;
  color: #061423;
  background: var(--caf-green-vibrant, #00b86b);
  padding: 2px 9px;
  border-radius: 999px;
}

.caf-moment-topic {
  font-size: 10.5px;
  font-weight: 700;
  color: #7fd8a8;
  background: rgba(0, 122, 61, 0.16);
  border: 1px solid rgba(0, 122, 61, 0.34);
  padding: 2px 9px;
  border-radius: 999px;
}

.caf-moment-topic.is-link { cursor: pointer; }
.caf-moment-context { margin: 0; font-size: 11.5px; color: #93a7bb; }
.caf-moment-notes { margin: 4px 0 0; font-size: 12px; color: #b9c8d8; }

.caf-usage-chip {
  font-size: 11px;
  font-weight: 700;
  color: #dbe6f0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 10px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .caf-law-grid, .caf-topic-grid { grid-template-columns: 1fr; }
  .caf-moment-card { grid-template-columns: 1fr; }
  .caf-coverage-table thead { display: none; }
  .caf-coverage-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; }
  .caf-coverage-table th, .caf-coverage-table td { border: 0; padding: 2px 0; }
  .caf-coverage-table tbody th { grid-column: 1 / -1; }
  .caf-coverage-bar { max-width: 100%; }
}

/* Choosing what to attach — never everything at once. */
.caf-select-list { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }

.caf-select-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-radius: 9px;
  cursor: pointer;
}

.caf-select-row:hover { border-color: var(--caf-gold); }
.caf-select-row input { width: 16px; height: 16px; accent-color: #007a3d; flex: 0 0 auto; }
.caf-select-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.caf-select-label { font-size: 12.5px; font-weight: 700; color: #f2f7fb; }
.caf-select-meta { font-size: 11px; color: #93a7bb; }

/* ══════════════════════════════════════════════════════════════════════════
   LEARNING MOMENT DETAIL, RESOURCES, MY LEARNING
   ══════════════════════════════════════════════════════════════════════════ */

.caf-moment-modal { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.caf-moment-modal[hidden] { display: none; }
body.caf-moment-open { overflow: hidden; }

.caf-moment-backdrop { position: absolute; inset: 0; background: rgba(3, 10, 18, 0.76); backdrop-filter: blur(3px); }

.caf-moment-dialog {
  position: relative;
  width: min(940px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: #0a1c2e;
  border: 1px solid var(--caf-navy-border);
  border-radius: 15px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  padding: 22px;
}

.caf-moment-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #dbe6f0;
  cursor: pointer;
}

.caf-moment-hero { display: flex; gap: 20px; margin-bottom: 22px; align-items: flex-start; }
.caf-moment-hero-visual { flex: 0 0 320px; max-width: 320px; display: block; }
.caf-moment-hero-body { min-width: 0; flex: 1; }
.caf-moment-hero-title { margin: 8px 0 12px; font-size: 21px; font-weight: 800; color: #f2f7fb; line-height: 1.25; }

/* The instructor's classification and the provider's suggestion sit side by
   side and never blur into one another. */
.caf-moment-classification { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.caf-class-block { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.caf-class-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8fa3b7;
}

.caf-class-block.is-confirmed { padding-left: 10px; border-left: 3px solid var(--caf-green-vibrant, #00b86b); }
.caf-class-block.is-suggested { padding-left: 10px; border-left: 3px dashed rgba(215, 167, 61, 0.55); }

.caf-moment-context-row { margin: 10px 0; }
.caf-moment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.caf-moment-usecount { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--caf-gold); }
.caf-usage-chip.is-link { cursor: pointer; }
.caf-usage-chip.is-link:hover { border-color: var(--caf-gold); color: #fff; }

/* Attached resources, shared by workshops, tests and sessions */
.caf-resource-list { display: flex; flex-direction: column; gap: 10px; }

.caf-resource-card {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: #091b2c;
  border: 1px solid var(--caf-border);
  border-left: 3px solid var(--caf-green);
  border-radius: 11px;
}

.caf-resource-visual { display: block; }
.caf-resource-body { min-width: 0; }
.caf-resource-title { margin: 0 0 5px; font-size: 13.5px; font-weight: 800; color: #f2f7fb; }

.ws-caf-learning { margin-bottom: 20px; }

@media (max-width: 720px) {
  .caf-moment-dialog { padding: 16px; max-height: 92vh; }
  .caf-moment-hero { flex-direction: column; }
  .caf-moment-hero-visual { flex-basis: auto; max-width: 100%; width: 100%; }
  .caf-resource-card { grid-template-columns: 1fr; }
  .caf-moment-classification { flex-direction: column; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DISCOVER — zero-query landing
   Search stays the primary control. This is what sits under it so the page is
   useful before anything is typed: real provider facets, no invented ranking.
   ══════════════════════════════════════════════════════════════════════════ */

.caf-explore-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.caf-explore-facet {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--caf-border);
  background: #0a1b2b;
  color: #cbd8e6;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.caf-explore-facet:hover { border-color: var(--caf-gold); color: #ffffff; }

.caf-explore-facet.is-active {
  background: var(--caf-gold);
  border-color: var(--caf-gold);
  color: #061423;
}

.caf-explore-facet:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

/* Deliberately smaller than the Competitions page cards: this is a way in,
   not the catalogue itself. */
.caf-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 12px;
}

.caf-explore-card {
  display: block;
  padding: 0;
  border: 1px solid var(--caf-border);
  border-radius: 12px;
  background: #0a1b2b;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.caf-explore-card:hover { border-color: var(--caf-gold); transform: translateY(-2px); }

.caf-explore-card:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

.caf-explore-card .caf-artwork { border-radius: 0; }

/* Margin, not padding, around the clamped text. `overflow: hidden` clips at the
   padding box, so with bottom padding the line beyond the clamp still painted
   into that padding — "African Schools Football Championship -… / Zimbabwe
   2026" showed a half-cut third line under its own ellipsis. Margin sits
   outside the clip, so the clamp cuts exactly where it says it does. */
.caf-explore-card-text { display: block; margin: 9px 12px 11px; }

.caf-explore-card-qualifier {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #93a7bb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caf-explore-card-name {
  display: -webkit-box;
  font-size: 12.5px;
  font-weight: 700;
  color: #dbe6f0;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES — one pattern, used everywhere
   what is empty · why it might be · what to do next. Compact by design.
   ══════════════════════════════════════════════════════════════════════════ */

.caf-empty {
  border: 1px dashed var(--caf-border);
  border-radius: 12px;
  background: rgba(10, 27, 43, 0.55);
  padding: 18px 20px;
  max-width: 62ch;
}

.caf-empty-what {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #e8eff7;
}

.caf-empty-why {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #93a7bb;
}

.caf-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.caf-empty-action {
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid rgba(215, 167, 61, 0.45);
  background: transparent;
  color: var(--caf-gold-light);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.caf-empty-action:hover { background: rgba(215, 167, 61, 0.16); color: #ffffff; }

.caf-empty-action:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .caf-explore-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .caf-empty { padding: 15px 16px; }
}

/* The Upcoming tab wraps its list in a bordered panel. An empty state inside
   that panel would draw a second box within the first, so it sits flush. */
#upcoming-schedule > .caf-empty {
  border: 0;
  background: transparent;
  max-width: none;
}

/* An empty state that lands inside a card grid takes the whole row rather
   than being squeezed into one column's width. */
.lib-grid > .caf-empty,
.caf-event-media-grid > .caf-empty,
.caf-explore-grid > .caf-empty,
.caf-tag-grid > .caf-empty,
.caf-comp-stage-grid > .caf-empty,
.caf-collection-grid > .caf-empty {
  grid-column: 1 / -1;
}

/* ── Referee Learning: refinement only, the layout is accepted ────────────
   Keyboard users had no visible focus ring on a Law card, and hover moved the
   card without a transition. The Laws that genuinely carry confirmed CAFlirary
   content keep their green edge — made a touch more present, since that
   distinction is the page's whole point — and nothing about the grid,
   wording or counts changes. */
.caf-law-card {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.caf-law-card:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

.caf-law-card.has-content {
  border-left-width: 4px;
  background: linear-gradient(140deg, #0d2b3a 0%, #071a22 72%);
}

.caf-law-card.has-content:hover {
  box-shadow: 0 8px 22px rgba(0, 122, 61, 0.22);
}

.caf-topic-card:focus-visible,
.caf-moment-card:focus-visible {
  outline: 2px solid var(--caf-gold-light);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .caf-law-card { padding: 12px 13px; gap: 11px; }
  .caf-law-number { font-size: 25px; min-width: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETONS — a loading page keeps its shape
   A centred "Loading CAF competitions…" on an otherwise blank screen reads as
   a broken page, and the layout then jumps when content lands. These hold the
   shape of what is coming. They are decorative and aria-hidden; the surface's
   own role="status" text is what assistive technology hears.
   ══════════════════════════════════════════════════════════════════════════ */
.caf-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 12px;
}

.caf-skel-card {
  border: 1px solid var(--caf-border);
  border-radius: 12px;
  background: #0a1b2b;
  padding: 0 0 12px;
  overflow: hidden;
}

.caf-skel-visual { aspect-ratio: 16 / 8; background: #10243a; }

.caf-skel-line {
  height: 9px;
  margin: 9px 12px 0;
  border-radius: 5px;
  background: #10243a;
}

.caf-skel-line-wide { width: 78%; }
.caf-skel-line + .caf-skel-line { width: 52%; }

.caf-skel-rows { display: flex; flex-direction: column; gap: 8px; }

.caf-skel-row {
  height: 58px;
  border-radius: 10px;
  border: 1px solid var(--caf-border);
  background: #0a1b2b;
}

.caf-skel-visual,
.caf-skel-line,
.caf-skel-row {
  position: relative;
  overflow: hidden;
}

.caf-skel-visual::after,
.caf-skel-line::after,
.caf-skel-row::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: caf-skel-sweep 1.35s ease-in-out infinite;
}

@keyframes caf-skel-sweep { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .caf-skel-visual::after,
  .caf-skel-line::after,
  .caf-skel-row::after { animation: none; }
}

/* Live tab grouping */
.caf-live-group-title {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caf-text-muted);
}

.caf-live-group-title:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DENSITY — CAFlirary is a working tool, not a landing page
   ══════════════════════════════════════════════════════════════════════════
   The owner's report was that everything reads too big, and comparing the
   screens against the provider's own console makes the gap obvious: CAFlirary
   was spending a third of a 1080p viewport on a hero and fitting four media
   cards where six belong. Nothing here changes what a screen says or does —
   it reduces the scale of the largest elements and tightens spacing so more
   real content reaches the screen at once.

   Deliberately not shrunk: body copy stays at or above 12.5px, chip and
   button hit targets stay usable, and the contrast work from the previous
   pass is untouched. This sheet loads last, so it settles the scale.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page frame ──────────────────────────────────────────────────────────── */
body.caflirary-page .section { padding: 14px 18px 22px; }
body.caflirary-page .page-title { font-size: 19px; margin-bottom: 3px; }
body.caflirary-page .page-sub { font-size: 12.5px; margin-bottom: 14px; }

/* ── Sidebar: a navigation list, not a menu of buttons ───────────────────── */
body.caflirary-page .sb-item { padding: 7px 14px; font-size: 12.5px; gap: 9px; }
body.caflirary-page .sb-item .sb-icon { font-size: 14.5px; width: 19px; }
body.caflirary-page .sb-section-label { font-size: 9.5px; padding: 12px 14px 3px; }

/* ── Hero: the search is the point, not the headline ─────────────────────── */
body.caflirary-page .caflib-hero-container { padding: 22px 22px 18px; margin-bottom: 20px; }
body.caflirary-page .caflib-hero-title { font-size: 25px; margin-bottom: 6px; }
body.caflirary-page .caflib-hero-subtitle { font-size: 13px; margin-bottom: 16px; }
body.caflirary-page .caflib-hero-badge { font-size: 10px; padding: 3px 10px; margin-bottom: 9px; }

/* style.css gives every input a 46px minimum for the marketing pages. Inside a
   dense working tool that is a third taller than the control needs to be. */
body.caflirary-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.caflirary-page select { min-height: 38px; }
body.caflirary-page textarea { min-height: 72px; }

/* ── Section headings ────────────────────────────────────────────────────── */
body.caflirary-page .caf-home-section-title { font-size: 15px; }
body.caflirary-page .caf-discover-title { font-size: 21px; }
body.caflirary-page .caf-discover-sub { font-size: 12.5px; }
body.caflirary-page .caf-entity-name { font-size: 20px; }
body.caflirary-page .caf-comp-catalogue-head h2 { font-size: 19px; }
body.caflirary-page .caf-comp-detail-head h2 { font-size: 20px; }

/* ── Grids: more real content per row ────────────────────────────────────── */
body.caflirary-page .caf-comp-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 13px; }
body.caflirary-page .caf-explore-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 11px; }
body.caflirary-page .caf-entity-media-grid,
body.caflirary-page .caf-event-media-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 11px; }
body.caflirary-page .caf-skel-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
body.caflirary-page .caf-comp-card-body { padding: 11px 13px 3px; }
body.caflirary-page .caf-comp-card-name { font-size: 15px; }
body.caflirary-page .caf-comp-card-open { padding: 6px 13px 12px; font-size: 12px; }
body.caflirary-page .caf-comp-card-visual .caf-artwork-text { font-size: clamp(14px, 1.25vw, 18px); }
body.caflirary-page .caf-entity-media-card { padding: 7px; gap: 6px; }

/* ── Chips, tabs and buttons ─────────────────────────────────────────────── */
body.caflirary-page .caf-entity-tab { padding: 6px 12px; font-size: 11.5px; }
body.caflirary-page .caf-explore-facet { padding: 5px 12px; font-size: 12px; }
body.caflirary-page .caf-comp-fact { padding: 5px 12px; font-size: 12px; }
body.caflirary-page .caf-comp-tab { padding: 8px 12px; font-size: 12.5px; }
body.caflirary-page .btn-sm { padding: 5px 11px; font-size: 11.5px; }

/* ── Section rhythm ──────────────────────────────────────────────────────── */
body.caflirary-page .caf-comp-module { margin-top: 18px; }
body.caflirary-page .caf-discover-group { margin-bottom: 18px; }
body.caflirary-page .caf-entity-block { margin-bottom: 20px; }
body.caflirary-page .caf-empty { padding: 15px 17px; }

/* On a phone the density above is already right; only the hero needs holding
   back further, since it competes with the whole first screen. */
@media (max-width: 640px) {
  body.caflirary-page .section { padding: 12px 13px 20px; }
  body.caflirary-page .caflib-hero-container { padding: 17px 15px 15px; margin-bottom: 15px; }
  body.caflirary-page .caflib-hero-title { font-size: 21px; }
}

/* The scope a result count actually covers, so a filtered total is never
   mistaken for the size of the whole CAF archive. */
.sp-result-scope {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--caf-text-muted);
}

/* The competition catalogue skeleton matches the real card's proportions so
   nothing shifts when the cards arrive. */
.caf-skel-comp .caf-skel-visual { aspect-ratio: 16 / 9; }
.caf-comp-grid > .caf-skel-card { padding-bottom: 14px; }

/* My CAFlirary "where to next" — links onward, not invented content. */
.caf-my-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.caf-my-quick { margin-top: 6px; }

/* An empty state dropped into a container that already draws its own panel
   would paint a second box inside the first. These sit flush instead. */
#upcoming-schedule > .caf-empty,
#rank-table > .caf-empty,
#tests-list > .caf-empty,
#playlist-content > .caf-empty,
.rank-table > .caf-empty {
  border: 0;
  background: transparent;
  max-width: none;
  padding: 14px 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICON SYSTEM — one weight, one alignment, one state model
   ══════════════════════════════════════════════════════════════════════════
   Navigation and professional actions used emoji, which render differently on
   every operating system, cannot take a state colour, and made official CAF
   screens read as a consumer app. The set in js/caflirary-icons.js is a single
   24-unit stroke family; these rules give it consistent sizing, alignment and
   state colour wherever it appears.
   ══════════════════════════════════════════════════════════════════════════ */
.caf-icon {
  display: block;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: middle;
}

/* Navigation: the icon inherits the item's colour, so active, hover and
   resting states tint it without a second rule per state. */
body.caflirary-page .sb-item .sb-icon,
body.caflirary-page .bn-item .bn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

body.caflirary-page .sb-item .sb-icon { width: 20px; height: 20px; }
body.caflirary-page .bn-item .bn-icon { width: 22px; height: 22px; }

/* Resting nav icons sit slightly back from their label so the wordmark leads;
   the active item brings its icon fully forward. */
body.caflirary-page .sb-item .sb-icon .caf-icon { opacity: 0.78; }
body.caflirary-page .sb-item:hover .sb-icon .caf-icon,
body.caflirary-page .sb-item.active .sb-icon .caf-icon { opacity: 1; }
body.caflirary-page .bn-item.active .bn-icon .caf-icon { opacity: 1; }

/* The bottom bar previously scaled the emoji on activation; a stroke icon
   states it with weight instead, which stays crisp. */
body.caflirary-page .bn-item.active .bn-icon .caf-icon { stroke-width: 2.1; }
body.caflirary-page .sb-item.active .sb-icon .caf-icon { stroke-width: 2; }

/* An icon inside a button lines up with the label rather than sitting on the
   text baseline. */
.caf-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.caf-btn-icon .caf-icon { margin-top: -1px; }

/* Disabled controls grey the icon with the label, not separately. */
button[disabled] .caf-icon,
.is-unavailable .caf-icon { opacity: 0.5; }

/* ══════════════════════════════════════════════════════════════════════════
   LIBRARY FILTER TIERS — three questions, each named
   ══════════════════════════════════════════════════════════════════════════
   The filter area had two unlabelled rows that both read as "everything": a
   content-scope row saying "All Content" above a media-type row saying "All
   Media". Nothing said which was which, so they looked like duplicates of one
   control. Naming each tier for the question it answers — which library, what
   kind of file, which competition/team/tag — is the whole fix; the controls,
   their ids and their handlers are untouched.
   ══════════════════════════════════════════════════════════════════════════ */
.sp-filter-tier {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 0;
}

.sp-filter-tier + .sp-filter-tier {
  border-top: 1px solid var(--caf-border);
}

.sp-filter-tier-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--caf-text-muted);
}

.sp-filter-tier-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sp-filter-tier-controls > * { min-width: 0; }

/* On a phone the tiers stack full width inside the existing filter sheet, so
   the hierarchy stays legible instead of becoming one long sideways scroll. */
@media (max-width: 640px) {
  .sp-filter-tier { padding: 10px 0; }
  .sp-filter-tier-controls { flex-direction: column; align-items: stretch; }
  .sp-filter-tier-controls > * { width: 100%; }
  .sp-type-group { flex-wrap: wrap; }
  .sp-type-group .sp-type-btn { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TECHNICAL ASSETS — supporting data, not football
   ══════════════════════════════════════════════════════════════════════════
   XML sidecars and similar files were drawn as football media cards with a
   large empty thumbnail and a folder emoji, which invited a reader to treat
   them as playable footage. A technical asset gets a compact document
   treatment instead: it is obviously supporting data, and it takes a third of
   the vertical space a video card does.
   ══════════════════════════════════════════════════════════════════════════ */
.lib-card.is-technical {
  background: linear-gradient(160deg, #0b1a29 0%, #081420 100%);
  border-color: rgba(255, 255, 255, 0.09);
}

.lib-card.is-technical .sp-thumb-wrap {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  padding: 14px 14px 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}

.caf-tech-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 9px;
  background: rgba(143, 164, 184, 0.12);
  border: 1px solid rgba(143, 164, 184, 0.28);
  color: #9fb2c5;
}

.caf-tech-kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8fa4b8;
}

.caf-tech-format {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #061423;
  background: #8fa4b8;
  padding: 2px 7px;
  border-radius: 4px;
}

.lib-card.is-technical .lib-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #cbd8e6;
}

.lib-card.is-technical .lib-meta-row { gap: 6px; }

/* For a sidecar the provider file name IS the identifier — the trailing index
   is what distinguishes one from the next — so it wraps rather than truncating
   to a fragment that identifies nothing. */
.lib-card.is-technical .lib-title {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.lib-card.is-technical .sp-event-tag {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA DETAIL — one scrolling area, not three
   ══════════════════════════════════════════════════════════════════════════
   The viewer had .sp-modal-body and .sp-details-panel both set to overflow-y:
   auto, nested inside each other, with the page scrolling behind them. Three
   scroll surfaces meant a wheel gesture did something different depending on
   which pixel the pointer happened to be over, and the video could scroll out
   of view while the reader was reading about it.

   Desktop: the media stage is fixed and the side panel is the single scroller,
   so the video stays visible while its context is read — which is the whole
   point of the panel being beside it rather than under it.

   Mobile: one column and one scroller, media first, so the page reads as a
   document rather than a squeezed two-column desktop layout.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  body.caflirary-page .sp-modal-body {
    overflow: hidden;
    min-height: 0;
  }

  body.caflirary-page .sp-stage {
    overflow: hidden;
    min-height: 0;
  }

  /* The one scroller. */
  body.caflirary-page .sp-details-panel {
    overflow-y: auto;
    min-height: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  /* One column, one scroller: the body scrolls and the panel simply flows. */
  body.caflirary-page .sp-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.caflirary-page .sp-details-panel {
    overflow: visible;
    padding: 16px 15px 22px;
  }

  /* The order a reader wants on a phone: the media, then where it sits in
     football, then the learning, then the technical facts. The source order
     already matches this — these keep it explicit so a future insertion
     cannot quietly put the file details above the video. */
  body.caflirary-page .sp-details-panel > * { order: 5; }
  body.caflirary-page .sp-details-panel .sp-context-kicker,
  body.caflirary-page .sp-details-panel .sp-meta-list { order: 1; }
  body.caflirary-page .sp-details-panel .sp-context { order: 2; }
  body.caflirary-page .sp-details-panel .sp-incidents,
  body.caflirary-page .sp-details-panel .sp-learning-moments { order: 3; }
  body.caflirary-page .sp-details-panel .sp-transcript,
  body.caflirary-page .sp-details-panel .sp-related { order: 4; }
  body.caflirary-page .sp-details-panel .sp-mediainfo { order: 6; }
  body.caflirary-page .sp-details-panel .sp-actions-bar { order: 7; }

  body.caflirary-page .sp-stage { min-height: 210px; }
}

/* A section heading with an action beside it. Workshops and Reports both had
   their own heading treatments; this is the one the rest of the product uses. */
.caf-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.caf-section-head .page-sub { margin-bottom: 0; max-width: 72ch; }

/* Report and backup card marks: the shared stroke set at card scale, tinted
   with the CAF gold the surface already uses for section marks. */
body.caflirary-page .rc-icon,
body.caflirary-page .backup-card-icon {
  display: inline-flex;
  color: var(--caf-gold);
  margin-bottom: 10px;
}

/* The content-scope tier names itself, so it no longer reads as a second
   unlabelled "All" control beside the media-type row. */
.caf-scope-label { display: block; margin-bottom: 6px; }

/* A one-word kind reads well in caps; a clip's range and match do not. */
.caf-tag-group.caf-tag-group-plain {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   INLINE ICONS IN TITLES, TABS AND BUTTONS
   The sidebar got the icon system first; page titles, tabs and buttons kept
   their emoji, so the navigation read as a product and the pages inside it
   read as a prototype. These slots are filled by CAFIcons.paintSlots().
   Sized in em so an icon tracks whatever type it sits beside.
   ══════════════════════════════════════════════════════════════════════════ */

.caf-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.14em;
  flex: none;
}

.caf-inline-icon .caf-icon { display: block; }

/* A title's icon carries the title's own colour rather than competing with it. */
.page-title .caf-inline-icon { color: var(--caf-gold, #d7a73d); margin-right: 2px; }

/* Tabs and buttons already set a colour for their state; the icon inherits it
   so an active tab and an idle tab differ in the icon too, which emoji never
   managed. */
.rank-tab .caf-inline-icon,
.ws-dtab .caf-inline-icon,
.btn .caf-inline-icon,
.lib-reset-btn .caf-inline-icon,
.si .caf-inline-icon { color: currentColor; }

.upload-icon .caf-inline-icon { color: var(--caf-gold, #d7a73d); }

/* The live dot replaces a red-circle emoji, so "Live Now" pulses like a live
   indicator instead of printing a picture of one. */
.rank-tab .caf-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  vertical-align: 0.02em;
  margin-right: 2px;
}

/* A saved state fills the same star outline rather than swapping to a
   different picture, so the two states are obviously the same control. */
.caf-icon.is-filled { fill: currentColor; }

.caf-modal-title-icon {
  display: inline-flex;
  vertical-align: -0.18em;
  margin-right: 4px;
  color: var(--caf-gold, #d7a73d);
}

/* The library's own live dot, used where a red-circle emoji previously stood
   in for a live indicator. */
.caflib-live-card .caf-live-dot,
.caf-growing-badge .caf-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05em;
  margin-right: 3px;
}