/* Catalog presentation only. Filtering, ranking and shareable state stay in
   the existing Explore engine. All rules are scoped to this page. */
body.tvi-explore {
  --ex-width: 1180px;
  --ex-gutter: clamp(20px, 4vw, 48px);
  --ex-muted: #bbb6ae;
  --ex-accent: #dda36b;
}
.tvi-explore [hidden] { display: none !important; }
.tvi-explore :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--ex-accent);
  outline-offset: 4px;
}
.tvi-explore .ex-skip {
  position: fixed; z-index: 300; top: 12px; left: 16px;
  padding: 12px 18px; background: var(--ivory); color: var(--ink);
  transform: translateY(-160%);
}
.tvi-explore .ex-skip:focus { transform: none; }
.tvi-explore .ex-wrap {
  width: min(var(--ex-width), calc(100% - var(--ex-gutter) * 2));
  max-width: none; padding: 0 0 64px;
}
.tvi-explore .ex-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center; gap: 48px; padding: 46px 0 30px;
}
.tvi-explore .ex-hero { padding: 0; text-align: left; min-width: 0; }
.tvi-explore .ex-hero h1 {
  font-size: clamp(36px, 4.3vw, 54px); line-height: 1.06;
  letter-spacing: -.02em; max-width: none; margin-bottom: 16px;
}
.tvi-explore .ex-hero p {
  max-width: 590px; margin: 0; font-size: 16px; line-height: 1.65;
  font-weight: 400; color: var(--ex-muted);
}
.tvi-explore .ex-search-bar { margin: 24px 0 16px; }
.tvi-explore .ex-filters { justify-content: flex-start; }
.tvi-explore .ex-tonight-door {
  display: block; margin: 0; padding: 4px 0 4px 26px;
  border: 0; border-left: 1px solid #5b4936; border-radius: 0; background: none;
}
.tvi-explore .ex-tonight-door small {
  font-size: 11px; line-height: 1.6; letter-spacing: .08em; color: var(--ex-accent);
}
.tvi-explore .ex-tonight-door strong { font-size: 23px; line-height: 1.2; margin: 6px 0 8px; }
.tvi-explore .ex-tonight-door p { font-size: 13px; line-height: 1.6; color: var(--ex-muted); }
.tvi-explore .ex-tonight-door a {
  display: inline-flex; padding: 8px 0; margin-top: 4px; min-height: 44px;
  background: none; border: 0; color: var(--ex-accent); font-size: 14px;
  text-decoration: underline; text-decoration-color: #755437; text-underline-offset: 5px;
}
.tvi-explore .ex-tonight-door a:hover { color: var(--ivory); background: none; }
.tvi-explore .cr-root { margin: 0; border-top: 1px solid #39352e; padding-top: 22px; }
.tvi-explore .cr-bar { gap: 24px; align-items: flex-end; margin: 0 0 18px; }
.tvi-explore .cr-search-label { display: block; font-size: 14px; margin-bottom: 10px; color: #ded9d1; }
.tvi-explore .cr-bar-shell input {
  min-height: 56px; padding: 15px 18px; font-size: 16px;
  background: #211f1c; border-color: #82715b; border-radius: 8px;
}
.tvi-explore .cr-bar-shell input::placeholder { color: #bdb6ac; }
.tvi-explore .cr-bar-shell input:focus { border-color: var(--ex-accent); background: #25221e; }
.tvi-explore .cr-views { gap: 4px; padding: 4px; border: 1px solid #49443c; border-radius: 8px; }
.tvi-explore .cr-view { min-height: 44px; padding: 10px 14px; font-size: 14px; border: 0; color: #c4beb5; }
.tvi-explore .cr-view.active { color: var(--ivory); background: #423326; }
.tvi-explore .legacy-notice {
  font-size: 13px !important; color: var(--ex-muted) !important;
  line-height: 1.65 !important; margin: 0 0 28px !important; max-width: 940px;
}
.tvi-explore .legacy-notice a { color: var(--ex-accent) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.tvi-explore .cr-layout { grid-template-columns: 214px minmax(0, 1fr); gap: 32px; align-items: start; }
.tvi-explore .cr-rail {
  position: sticky; top: 90px; max-height: calc(100dvh - 112px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #65523e transparent;
  gap: 24px; padding: 2px 14px 16px 0;
}
.tvi-explore .cr-grp-label { color: #c7c0b6; font-size: 12px; letter-spacing: .08em; margin-bottom: 10px; }
.tvi-explore .cr-chips { gap: 6px; }
.tvi-explore .cr-chip {
  min-height: 40px; padding: 8px 11px; font-size: 13px; line-height: 1.35;
  color: #c7c0b6; border-color: #474138; border-radius: 6px;
}
.tvi-explore .cr-chip.active { color: #f2c699; background: #36291e; border-color: #a37a50; }
.tvi-explore .cr-sel { min-height: 44px; max-width: 100%; font-size: 14px; padding: 10px; color: #ddd6cd; border-color: #575047; }
.tvi-explore .cr-main { min-width: 0; }
.tvi-explore .cr-count { min-height: 40px; margin-bottom: 16px; font-size: 14px; gap: 12px; color: #c7c0b6; }
.tvi-explore .cr-reset { min-height: 40px; font-size: 14px; color: var(--ex-accent); }
.tvi-explore .cr-results.gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.tvi-explore .cr-card { min-width: 0; background: #1d1c1a; border-color: #3e3932; border-radius: 8px; }
.tvi-explore .cr-card:hover { border-color: #997049; transform: translateY(-2px); }
.tvi-explore .cr-body { padding: 14px; gap: 9px; }
.tvi-explore .cr-name { font-size: 23px; line-height: 1.13; overflow-wrap: anywhere; }
.tvi-explore .cr-meta { font-size: 12px; line-height: 1.5; color: #bab4ab; }
.tvi-explore .cr-context { font-size: 12px; line-height: 1.5; color: #e0ad7d; }
.tvi-explore .cr-tier { font-size: 10px; line-height: 1.5; letter-spacing: .06em; padding: 4px 7px; }
.tvi-explore .cat-masterclass { color: #dda36b; }
.tvi-explore .cat-stimulating { color: #acc7d8; }
.tvi-explore .cat-competent { color: #afc29f; }
.tvi-explore .cat-passive { color: #c1c1b8; }
.tvi-explore .cat-numbing { color: #e19b97; }
.tvi-explore .cr-prov { font-size: 11px; line-height: 1.5; padding: 3px 6px; color: #c7c0b6; border-color: #514b42; }
.tvi-explore .cr-badge-iq { font-size: 19px; background: #181511; padding: 7px 9px; }
.tvi-explore .cr-badge-age { font-size: 11px; background: #ed9b82; color: #261914; font-weight: 600; }
.tvi-explore .cr-personal-mark { font-size: 10px; line-height: 1.35; }
.tvi-explore .cr-personal-note { font-size: 12px; line-height: 1.5; color: #c4bdb2; }
.tvi-explore .cr-bars { margin-top: 4px; }
.tvi-explore .cr-results.list { gap: 0; }
.tvi-explore .cr-results.list .cr-card { padding: 16px 10px; border-bottom-color: #3d3831; }
.tvi-explore .cr-results.list .cr-pwrap { width: 60px; height: 90px; }
.tvi-explore .cr-results.list .cr-body { display: grid; grid-template-columns: minmax(0, 1fr) 44px 106px; }
.tvi-explore .cr-results.list .cr-name { font-size: 24px; }
.tvi-explore .cr-results.list .cr-tier { justify-self: start; }
.tvi-explore .cr-results.list .cr-context,
.tvi-explore .cr-results.list .cr-personal-note { grid-column: 1 / -1; order: 5; }
.tvi-explore .cr-li-iq { font-size: 24px; }
.tvi-explore .cr-results.editorial .cr-card { padding: 20px; gap: 22px; }
.tvi-explore .cr-results.editorial .cr-pwrap { width: 104px; height: 156px; }
.tvi-explore .cr-results.editorial .cr-name { font-size: 28px; }
.tvi-explore .cr-rat { font-size: 15px; line-height: 1.7; font-weight: 400; color: #c7c1b7; }
.tvi-explore .cr-capture { padding: 16px; gap: 14px; border-radius: 8px; }
.tvi-explore .cr-capture-h { font-size: 14px; line-height: 1.6; }
.tvi-explore .cr-capture form { flex-wrap: wrap; }
.tvi-explore .cr-capture :is(input, button) { min-height: 44px; font-size: 14px; }
.tvi-explore .cr-capture input { min-width: 0; max-width: 100%; }
.tvi-explore .cr-capture button { background: #dda36b; }
.tvi-explore .cr-entity-copy span,
.tvi-explore .cr-entity-role { font-size: 12px; color: #c6bfb5; }
.tvi-explore .cr-entity-actions :is(a, button) { min-height: 40px; font-size: 13px; }
.tvi-explore .cr-more-btn { min-height: 48px; font-size: 15px; }
.tvi-explore .cr-miss-note { font-size: 13px; line-height: 1.65; color: var(--ex-muted); }
.tvi-explore .cr-suggest { background: #23211e; border-color: #69553f; max-height: min(470px, 65dvh); overflow-y: auto; overscroll-behavior: contain; }
.tvi-explore .cr-suggest-row[aria-selected="true"] { background: #443426; outline: 2px solid #dda36b; outline-offset: -2px; }
.tvi-explore .cr-suggest-row { min-height: 48px; padding: 12px 14px; }
.tvi-explore .cr-suggest-head { color: #c3b8a8; font-size: 11px; padding: 12px 14px 5px; }
.tvi-explore .cr-suggest-name { font-size: 15px; }
.tvi-explore .cr-suggest-kind { font-size: 10px; color: #e5c29e; }
.tvi-explore .cr-suggest-meta { font-size: 12px; color: #c0b8ae; }
.tvi-explore .cr-filter-toggle { display: none; }
.tvi-explore #crSearch { scroll-margin-top: 100px; }
@media (max-width: 1100px) {
  .tvi-explore .ex-intro { gap: 28px; grid-template-columns: minmax(0, 1fr) 265px; }
  .tvi-explore .cr-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
  .tvi-explore .cr-results.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .tvi-explore .ex-intro { grid-template-columns: 1fr; gap: 20px; padding: 30px 0 24px; }
  .tvi-explore .ex-hero h1 { max-width: 22ch; font-size: clamp(35px, 6vw, 44px); }
  .tvi-explore .ex-tonight-door { padding: 0; border: 0; }
  .tvi-explore .ex-tonight-door > div { display: none; }
  .tvi-explore .ex-tonight-door a { margin: 0; padding: 0; min-height: 32px; }
  .tvi-explore .cr-bar { flex-wrap: wrap; gap: 14px; }
  .tvi-explore .cr-bar-shell { flex-basis: 100%; }
  .tvi-explore .cr-views { width: auto; }
  .tvi-explore .cr-view { min-height: 40px; padding: 8px 16px; }
  .tvi-explore .legacy-notice { margin-bottom: 20px !important; }
  .tvi-explore .cr-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tvi-explore .cr-rail {
    position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px; overflow: visible; padding: 22px 0; margin: 0 0 10px;
    border-top: 1px solid #4d4438; border-bottom: 1px solid #4d4438;
  }
  .tvi-explore .cr-rail .cr-grp { min-width: 0; }
  .tvi-explore .cr-chip { min-height: 44px; }
  .tvi-explore .cr-root.filters-ready .cr-filter-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 12px 16px; margin: 0 0 14px;
    font: 500 14px 'DM Sans', sans-serif; color: #e5c5a2; background: #27221c;
    border: 1px solid #65513c; border-radius: 6px; cursor: pointer;
  }
  .tvi-explore .cr-filter-toggle span { font-size: 22px; line-height: 1; }
  .tvi-explore .cr-root.filters-ready:not(.filters-open) .cr-rail { display: none; }
  .tvi-explore .cr-count { margin-bottom: 12px; }
}
@media (max-width: 540px) {
  .tvi-explore .ex-intro { gap: 12px; }
  .tvi-explore .ex-tonight-door a { min-height: 44px; width: auto; }
  .tvi-explore .ex-hero p { font-size: 15px; }
  .tvi-explore .cr-results.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .tvi-explore .cr-body { padding: 12px; gap: 8px; }
  .tvi-explore .cr-name { font-size: 22px; }
  .tvi-explore .cr-badge-iq { font-size: 17px; }
  .tvi-explore .cr-rail { grid-template-columns: 1fr; }
  .tvi-explore .cr-grp-label { font-size: 13px; }
  .tvi-explore .cr-views { width: 100%; }
  .tvi-explore .cr-view { flex: 1; padding-inline: 10px; }
  .tvi-explore .cr-results.list .cr-body { gap: 8px; grid-template-columns: minmax(0, 1fr) 40px; }
  .tvi-explore .cr-results.list .cr-tier { grid-column: 1 / -1; }
  .tvi-explore .cr-results.list .cr-name { font-size: 22px; }
  .tvi-explore .cr-results.editorial .cr-card { padding: 16px; gap: 14px; }
  .tvi-explore .cr-results.editorial .cr-pwrap { width: 64px; height: 96px; }
  .tvi-explore .cr-results.editorial .cr-name { font-size: 24px; }
  .tvi-explore .cr-results.editorial .cr-rat { font-size: 14px; }
  .tvi-explore .cr-suggest-row { flex-wrap: wrap; gap: 8px; }
  .tvi-explore .cr-suggest-main { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.tvi-explore) { scroll-behavior: auto; }
  .tvi-explore *, .tvi-explore *::before, .tvi-explore *::after { transition: none !important; animation: none !important; }
  .tvi-explore .cr-card:hover { transform: none; }
}
