/* AuntieWoke — custom styles (Bootstrap 5 base) */

/* ── Score badges ──────────────────────────────────────────────────────────── */

.score-badge {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 2.5rem;
  display: inline-block;
  text-align: center;
}

.score-badge-lg {
  font-size: 2.5rem;
  font-weight: 700;
  min-width: 3.5rem;
}

/* ── Woke category cards ───────────────────────────────────────────────────── */

.category-card {
  border-left: 4px solid var(--bs-secondary);
  transition: border-color 0.2s;
}

.category-card.score-low  { border-left-color: var(--bs-success); }
.category-card.score-mid  { border-left-color: var(--bs-warning); }
.category-card.score-high { border-left-color: var(--bs-danger);  }

/* ── Wokeometer ────────────────────────────────────────────────────────────────
   A native <progress> (no inline style under the strict CSP). Tone is set by
   the macro from points / max; the flag beside it comes from the peak
   category score (see wokeometer_meter in _macros.html). */

.wokeometer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.wokeometer-label { color: var(--bs-secondary-color); font-weight: 600; }
.wokeometer-points { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.wokeometer-flag { font-size: 1.1em; line-height: 1; }

.wokeometer-bar {
  width: 6rem;
  height: 0.75rem;
  accent-color: var(--bs-success);
}
.wokeometer-bar--success { accent-color: var(--bs-success); }
.wokeometer-bar--warning { accent-color: var(--bs-warning); }
.wokeometer-bar--danger  { accent-color: var(--bs-danger);  }

.wokeometer--lg { font-size: 1rem; }
.status-icon { width: 1.4em; height: 1.4em; display: inline-block; vertical-align: middle; }
.alert .status-icon { margin-top: 0.05rem; }
.wokeometer--lg .wokeometer-bar { width: 12rem; height: 1.25rem; }

/* ── Content-rating category cards (reuses .category-card) ───────────────────
   none/mild -> tier-low, moderate -> tier-mid, severe -> tier-high, matching
   the same green/yellow/red convention as the woke score-* classes above. */
.category-card.tier-low  { border-left-color: var(--bs-success); }
.category-card.tier-mid  { border-left-color: var(--bs-warning); }
.category-card.tier-high { border-left-color: var(--bs-danger);  }

/* ── Confidence indicator ─────────────────────────────────────────────────── */

.confidence-pip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bs-secondary);
  margin-right: 2px;
}

.confidence-pip.filled { background: var(--bs-primary); }

/* ── Title detail layout ───────────────────────────────────────────────────── */

.title-poster {
  max-height: 360px;
  object-fit: cover;
  border-radius: 0.375rem;
}

.poster-placeholder {
  height: 360px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: #6c757d;
  font-size: 3rem;
}

/* ── Audience feedback ───────────────────────────────────────────────────────
   Verdict buttons (hero "audience woke rating" + content-rating "is this any
   good?") and the smaller per-category yes/no / tier-pick buttons. Bootstrap's
   btn-outline-* already fills the button on .active, so no color rules are
   needed here beyond sizing. */

.verdict-btn {
  font-size: 1rem;
}

.btn-xs {
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.opinion-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.comment-row .form-control {
  font-size: 0.8rem;
}

.opinion-comment-feedback {
  display: inline-block;
  min-height: 1em;
}

/* ── Search result card ────────────────────────────────────────────────────── */

.result-card {
  transition: box-shadow 0.15s;
}
.result-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

/* Credit names (author / director / studio / actor) link to their browse page;
   they sit inside muted text, so keep the colour and underline only on hover. */
.credit-link {
  color: inherit;
  text-decoration: none;
}
.credit-link:hover {
  text-decoration: underline;
}

.result-poster {
  width: 56px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.result-poster--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  font-size: 1.4rem;
}

/* ── Header: search + category band ───────────────────────────────────────── */

.site-header .site-search {
  flex: 1 1 260px;
  max-width: 520px;
  margin: 0 1rem;
  order: 2;
}
.site-header .site-account { order: 3; }
/* Bootstrap makes a dropdown inside .navbar-nav position:static (it assumes a
   collapsed mobile menu) unless the navbar has a navbar-expand-* class. This
   header never collapses, so keep the account menu floating over the page
   instead of pushing the bar down. */
.site-header .site-account .dropdown-menu { position: absolute; }
@media (max-width: 575.98px) {
  /* brand + account on one line, search full-width underneath */
  .site-header .site-search { order: 4; flex-basis: 100%; max-width: none; margin: 0.5rem 0 0; }
}

.category-band {
  background: var(--bs-danger);
}
.category-band-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}
.category-band .nav-link {
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1rem;
}
.category-band .nav-link:hover,
.category-band .nav-link.active {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* ── Landing hero + category buttons ───────────────────────────────────────── */

.hero-search { max-width: 640px; }

.category-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bs-danger);
  font-size: 1.6rem;
}
.category-button { min-width: 90px; }
.category-button:hover .category-button-icon { filter: brightness(1.1); }

/* ── Shelf poster cards ────────────────────────────────────────────────────── */

.poster-card { display: block; }
.poster-card-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.poster-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  font-size: 2.5rem;
}
.poster-card:hover .poster-card-img { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); }
.poster-card-title { line-height: 1.25; }

/* ── AI disclaimer (small, muted, Gemini-style) ──────────────────────────── */

.ai-disclaimer { font-size: 0.8rem; }

/* ── "Search deeper" panel ─────────────────────────────────────────────────── */

.deep-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--bs-danger);
  border-radius: 0.5rem;
  background: #fff5f5;
}
.deep-panel--primary { padding: 1.75rem 1.25rem; border-style: solid; }
.deep-panel-text { flex: 1 1 260px; }

/* ── Pending spinner ───────────────────────────────────────────────────────── */

.pending-section {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 0.375rem;
}

/* ── Admin panel ───────────────────────────────────────────────────────────── */

.admin-comment-card { border-left: 4px solid var(--bs-warning); }

/* ── Fixed-width inline elements (kept as classes so CSP style-src can stay
   strict, with no 'unsafe-inline') ────────────────────────────────────────── */

.trailer-embed { max-width: 640px; }
.form-narrow-480 { max-width: 480px; }
.form-narrow-560 { max-width: 560px; }
.premium-required-poster { width: 96px; }
.woke-category-excluded { opacity: 0.55; }