/**
 * TubeRaker Classifier — Redesign layer (pages/classifier.css)
 * Loaded AFTER modules/classifier.css so these rules win by source order.
 * All structural markup uses clf-* classes; shared component classes are
 * reused as-is. rem only, tokens only, mobile-first, theme-aware.
 */

/* ---------------------------------------------------------------------------
   Local design token: always-white / on-brand foreground. Unlike
   --text-inverse (which flips to dark navy in the light theme) this stays
   white in both themes, so it is correct on saturated brand surfaces
   (the active filter segment on --color-brand-primary, media scrims).
   Defined here because variables.css is a shared file this sub-app may not
   edit — see shared_requests to promote it into variables.css as the
   canonical home. Mirrors the convention already in voting.css/trends.css.
   --------------------------------------------------------------------------- */
:root {
  --color-white: #ffffff;
}

/* ===== Shared page shell ===== */
.clf-hub,
.classifier-result,
.classifier-compare,
.badge-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--container-padding) var(--spacing-2xl);
}

.clf-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* ===== Index: Analyze bar ===== */
.clf-analyze {
  margin-bottom: var(--spacing-xl);
}

.clf-analyze__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
}

.clf-analyze__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.clf-analyze__field {
  flex: 1;
  min-width: 0;
}

.clf-analyze__btn {
  width: 100%;
}

.clf-analyze .form-hint {
  text-align: left;
  margin-top: var(--spacing-sm);
}

.clf-analyze__caption {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
}

/* Inline progress status while analysis runs */
.clf-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-info);
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  line-height: var(--line-height-normal);
}

.clf-progress[hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .clf-analyze__row {
    flex-direction: row;
    align-items: flex-start;
  }

  .clf-analyze__btn {
    width: auto;
    flex-shrink: 0;
  }
}

/* ===== Index: Stats strip ===== */
.clf-stats {
  margin-bottom: var(--spacing-xl);
}

.clf-stats__scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(11rem, 1fr));
  gap: var(--spacing-md);
}

.clf-stat {
  min-width: 0;
}

@media (max-width: 47.9375rem) {
  .clf-stats__scroll {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 14rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--spacing-xs);
  }

  .clf-stat {
    scroll-snap-align: start;
  }
}

/* ===== Index: Library + toolbar ===== */
.clf-library__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.clf-count {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.clf-toolbar {
  margin-bottom: var(--spacing-lg);
}

.clf-toolbar__scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
}

.clf-toolbar__search {
  flex: 1 1 14rem;
  min-width: 12rem;
}

.clf-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.clf-select {
  min-width: 9rem;
}

.clf-num {
  width: 4.5rem;
  text-align: center;
}

.clf-range {
  gap: var(--spacing-sm);
}

.clf-range__sep {
  color: var(--text-tertiary);
}

/* Segmented facet control */
.clf-seg {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.clf-seg__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.clf-seg__btn {
  min-width: 2.75rem;
}

.clf-seg__btn[aria-pressed="true"] {
  background: var(--color-brand-primary);
  color: var(--color-white); /* white on saturated brand blue, matching shared .btn--primary convention */
  border-color: var(--color-brand-primary);
}

@media (max-width: 47.9375rem) {
  .clf-toolbar {
    overflow-x: auto;
  }

  .clf-toolbar__scroll {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  .clf-library__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
}

/* ===== Index: Analyses grid overrides ===== */
.clf-grid.analyses-grid {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

@media (max-width: 22.5rem) {
  .clf-grid.analyses-grid {
    grid-template-columns: 1fr;
  }
}

/* Delete button touch target on cards */
.analyses-grid .analysis-delete {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* ===== Result page ===== */
.clf-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.clf-result-main,
.clf-result-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

@media (min-width: 64rem) {
  .clf-result-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* Gauge: viewBox + rem sizing, scales down on mobile */
.density-gauge {
  display: block;
  width: clamp(9rem, 40vw, 12.5rem);
  height: auto;
  margin: 0 auto;
}

/* Metrics 2x2, collapse to 1 col on very narrow */
.clf-metrics.metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 22.5rem) {
  .clf-metrics.metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Score breakdown disclosure */
.clf-breakdown {
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}

.clf-breakdown__summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  min-height: 2.75rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.clf-breakdown__summary::-webkit-details-marker {
  display: none;
}

.clf-breakdown__chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
  color: var(--text-tertiary);
}

.clf-breakdown[open] .clf-breakdown__chevron {
  transform: rotate(180deg);
}

.clf-breakdown__body {
  padding: 0 var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.clf-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 0.0625rem solid var(--border-primary);
}

.clf-breakdown__row:last-child {
  border-bottom: 0;
}

.clf-breakdown__row span {
  color: var(--text-secondary);
}

.clf-breakdown__row strong {
  color: var(--text-primary);
}

/* Actions: stack on mobile; danger separated */
.result-actions .clf-action-danger {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 0.0625rem solid var(--border-primary);
}

@media (min-width: 48rem) {
  .clf-actions-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .clf-actions-cluster .btn-block {
    width: 100%;
  }

  .result-actions .clf-action-danger {
    grid-column: 1 / -1;
  }
}

/* ===== Compare page ===== */
.clf-selected-count {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-right: auto;
}

.compare-actions {
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: space-between;
}

.video-select-label {
  min-height: 2.75rem;
}

@media (max-width: 22.5rem) {
  .video-selector {
    grid-template-columns: 1fr;
  }
}

/* Dependency-free comparison bars (Chart view) */
.clf-bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.clf-bars__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.clf-bars__metric {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.clf-bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  align-items: center;
  gap: var(--spacing-sm);
}

.clf-bar-row__label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clf-bar-row__track {
  position: relative;
  height: 1.5rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.clf-bar-row__fill {
  height: 100%;
  min-width: 0.25rem;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.clf-bar-row__value {
  position: absolute;
  top: 50%;
  right: var(--spacing-sm);
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.clf-bars__note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* ===== Badge page (shareable artifact) ===== */
.badge-page {
  max-width: 30rem;
}

.badge-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.badge-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.badge-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}

.badge-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  /* Dark scrim behind the play glyph; --bg-modal-overlay is dark in both
     themes so a light glyph/border stay legible over any thumbnail. */
  background: var(--bg-modal-overlay);
  border: 0.0625rem solid color-mix(in srgb, var(--color-white) 40%, transparent);
}

.badge-play-overlay svg {
  width: 1.5rem;
  height: 1.5rem;
}

.badge-score-display {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.badge-score-value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--text-primary);
}

.badge-score-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-call-number {
  display: inline-block;
  align-self: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
}

.badge-video-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

.badge-metrics.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.badge-metrics .metric-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
}

.badge-metrics .metric-label {
  margin-bottom: 0;
}

@media (max-width: 30rem) {
  .badge-metrics.metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.badge-branding {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 0.0625rem solid var(--border-primary);
}

.badge-branding-text {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-logo {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-light);
}

.badge-cta {
  margin-top: var(--spacing-sm);
}

.badge-footer-info {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: var(--line-height-normal);
}

.badge-footer-info p {
  margin: 0;
}

/* Graceful unavailable state (non-owner / missing data) */
.badge-unavailable {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  text-align: center;
}

.badge-unavailable__icon {
  font-size: var(--font-size-4xl);
  color: var(--text-tertiary);
  opacity: 0.6;
}

.badge-page.is-unavailable .badge-card,
.badge-page.is-unavailable .badge-footer-info {
  display: none;
}

.badge-page.is-unavailable .badge-unavailable {
  display: flex;
}

/* ===== Modal overlay (used by delete + share modals) =====
 * The module toggles inline display on the .modal element and hides all
 * .modal via closeModals(). We add .clf-modal for overlay behaviour and
 * style the dialog/backdrop/content wrappers the spec requires. Higher
 * specificity (.modal.clf-modal) beats modals.css box styling. */
.modal.clf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  max-width: none;
  max-height: none;
  width: auto;
  margin: 0;
  padding: var(--spacing-md);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  transform: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-modal-overlay);
}

.modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  margin: auto;
}

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

.modal-content .modal-body {
  max-height: 85vh;
}

@media (max-width: 47.9375rem) {
  .modal.clf-modal {
    padding: 0;
    align-items: flex-end;
  }

  .modal-dialog {
    max-width: 100%;
  }

  .modal-content {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}