/* Hallmark · genre: atmospheric · macrostructure: catalogue / cinematic story spotlight
 * design-system: site_web/design.md · designed-as-app
 * Pre-emit critique: P4 H4 E4 S5 R5 V4. Live deployment and playback QA are separate. */
html, body { overflow-x: clip; }
html { scroll-padding-top: 144px; }
.sp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3, .sp-card-title { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
.masthead { background: var(--color-paper); border-bottom: var(--rule-width) solid var(--color-rule); }
.header-inner { flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-md); }
.header-actions { width: 100%; min-width: 0; }
.sp-header-search { display: flex; width: 100%; max-width: none; align-items: center; gap: var(--space-xs); margin: 0; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); }
.sp-header-search:focus-within { border-color: var(--color-focus); }
.sp-header-search input { flex: 1 1 auto; width: 0; min-width: 0; min-height: 44px; border: 0; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: inherit; color: inherit; font: inherit; font-size: var(--text-md); }
.sp-header-search input::placeholder { color: var(--color-muted); opacity: 1; }
.sp-header-search .icon-button { width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: var(--radius-pill); background: inherit; color: var(--color-accent); }
.sp-header-search input:focus-visible { outline-offset: 0; border-radius: var(--radius-pill); }
.sp-header-search[aria-busy="true"], .sp-filter-form[aria-busy="true"] { opacity: .7; }
.sp-home { margin-top: var(--space-lg); }
.sp-home-heading { margin-bottom: var(--space-lg); gap: var(--space-sm); }
.sp-home-heading p { max-width: 76ch; }
.sp-discovery { margin-top: 0; padding-bottom: var(--space-lg); }
.sp-discovery .sp-search { display: none; margin-bottom: var(--space-md); }
.sp-filter-entry { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-size: var(--text-sm); color: var(--color-accent); white-space: nowrap; }
.sp-personal { min-width: 0; }
.sp-home > .sp-personal { margin-block: var(--space-xl); }
.sp-hero { margin-top: var(--space-xl); grid-template-columns: minmax(76px, .34fr) minmax(0, 1fr); align-items: start; }
.sp-hero-art { padding: var(--space-lg) 0 var(--space-lg) var(--space-lg); }
.sp-hero-poster { width: 100%; max-width: 160px; }
.sp-hero-copy { padding: var(--space-lg); }
.sp-hero-lead { display: none; }
.sp-hero-badges { margin-bottom: var(--space-sm); gap: var(--space-xs); line-height: 1.6; }
.sp-hero h2 { font-size: clamp(1rem, 4.6vw, 1.375rem); line-height: 1.65; }
.sp-hero-synopsis { display: none; }
.sp-hero-ctas { margin-top: var(--space-md); gap: var(--space-sm); }
.sp-hero-ctas .button { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-xs); }
body[data-site="rongseries"] .sp-hero-copy { text-align: start; }
body[data-site="rongseries"] .sp-hero-badges, body[data-site="rongseries"] .sp-hero-ctas { justify-content: flex-start; }
.sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
.sp-track { grid-auto-columns: minmax(128px, 42%); }
.poster-meta { flex-wrap: wrap; line-height: 1.8; }
.sp-card-title { -webkit-line-clamp: 2; }
.sp-cover-missing { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-lg); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-sm); text-align: center; }
.sp-progress { display: block; width: 100%; height: 4px; margin-top: var(--space-sm); border: 0; border-radius: var(--radius-pill); overflow: clip; background: var(--color-subtle); color: var(--color-accent); accent-color: var(--color-accent); }
.sp-progress::-webkit-progress-bar { background: var(--color-subtle); border-radius: var(--radius-pill); }
.sp-progress::-webkit-progress-value { background: var(--color-accent); border-radius: var(--radius-pill); }
.sp-progress::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-pill); }
.sp-history-meta { display: block; color: var(--color-muted); line-height: 1.7; }
.sp-filters { border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); margin-block: var(--space-xl); }
.sp-filters > summary { padding: var(--space-lg); min-height: 56px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.sp-filters > summary > span { margin-inline-start: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.sp-filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); max-width: none; padding: 0 var(--space-lg) var(--space-lg); }
.sp-filter-field { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; font-size: var(--text-sm); }
.sp-filter-field > span { color: var(--color-muted); }
.sp-filter-query, .sp-filter-actions { grid-column: 1 / -1; }
.sp-filter-field input, .sp-filter-field select { min-width: 0; width: 100%; min-height: 44px; padding: var(--space-sm) var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: var(--text-md); }
.sp-filter-field input::placeholder { color: var(--color-muted); opacity: 1; }
.sp-filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sp-filter-actions .button { min-height: 44px; font-size: var(--text-sm); }
.sp-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-xl); }
.sp-filter-chip { display: inline-flex; align-items: center; gap: var(--space-md); max-width: 100%; min-height: 44px; padding: var(--space-sm) var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-xs); white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.sp-filter-chip > span { color: var(--color-accent); font-size: var(--text-lg); }
.sp-intro, .sp-category-guide p { max-width: 78ch; color: var(--color-muted); line-height: 2; }
.sp-category-guide { max-width: 880px; margin-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-width) solid var(--color-rule); padding-top: var(--space-xl); }
.sp-category-guide h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.sp-category-guide .button { margin-top: var(--space-lg); }
.sp-pager { gap: var(--space-md); flex-wrap: wrap; }
.sp-controls { gap: var(--space-sm); }
.sp-controls .button { padding-inline: var(--space-md); font-size: var(--text-xs); min-height: 44px; }
.player-current { min-width: 0; white-space: nowrap; font-size: var(--text-xs); }
#watch-status:not(:empty) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); min-height: 48px; padding: var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.8; }
#watch-status[data-state="loading"] { color: var(--color-muted); }
#watch-status[data-state="error"] { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }
#watch-status[data-state="success"] { color: var(--color-ink); }
#watch-retry { flex-shrink: 0; min-height: 44px; }
.sp-episode-jump { padding: var(--space-lg); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); }
.sp-episode-jump input { font-size: var(--text-md); }
#episode-jump-help { flex-basis: 100%; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.8; }
.sp-eplist { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: var(--space-sm); }
.sp-eplist a { min-height: 48px; border-radius: var(--radius-sm); }
.sp-eplist a[aria-current="true"] { outline: 2px solid var(--color-accent); outline-offset: -2px; font-weight: 600; }
.sp-variants { flex-wrap: wrap; }
.sp-variants a { min-height: 44px; }
.sp-facts th { min-width: 84px; }
.sp-stage { max-height: 58dvh; }
.sp-info { min-width: 0; }
.sp-section-head { flex-direction: column; align-items: flex-start; }
.sp-bottom { padding-bottom: env(safe-area-inset-bottom); }
@media (hover: hover) and (pointer: fine) {
  .sp-filter-chip:hover { border-color: var(--color-accent); }
  .sp-filters > summary:hover { color: var(--color-accent); }
}
@media (min-width: 26rem) {
  .sp-hero-synopsis { display: -webkit-box; -webkit-line-clamp: 2; font-size: var(--text-xs); }
  .sp-track { grid-auto-columns: minmax(136px, 34%); }
}
@media (min-width: 40rem) {
  .header-inner { flex-wrap: nowrap; }
  .header-actions { width: 50%; margin-inline-start: auto; }
  .sp-home { margin-top: var(--space-xl); }
  .sp-discovery { align-items: center; }
  .sp-discovery .sp-search { display: grid; margin-bottom: 0; }
  .sp-hero { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); align-items: center; }
  .sp-hero-art { padding: var(--space-xl); }
  .sp-hero-poster { max-width: 230px; }
  .sp-hero-copy { padding: var(--space-xl); padding-inline-start: 0; }
  .sp-hero-lead { display: block; }
  .sp-hero h2 { font-size: var(--text-display); }
  .sp-hero-synopsis { display: -webkit-box; -webkit-line-clamp: 3; font-size: var(--text-sm); }
  .sp-hero-ctas .button { padding-inline: var(--space-lg); font-size: var(--text-sm); }
  .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-track { grid-auto-columns: minmax(150px, 23%); }
  .sp-filter-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-filter-query { grid-column: 1 / -1; }
  .sp-section-head { flex-direction: row; align-items: center; }
  .sp-stage { max-height: 65dvh; }
}
@media (min-width: 60rem) {
  html { scroll-padding-top: 108px; }
  .header-inner { padding-block: var(--space-sm); }
  .header-actions { width: min(30%, 320px); margin-inline-start: var(--space-xl); }
  .sp-desktop-nav { gap: var(--space-xl); }
  .sp-header-search input { font-size: var(--text-sm); }
  .sp-home { margin-top: var(--space-2xl); }
  .sp-hero { min-height: 420px; }
  .sp-hero-art { padding: var(--space-2xl); }
  .sp-hero-copy { padding: var(--space-2xl); padding-inline-start: 0; }
  .sp-hero-poster { max-width: 260px; }
  .sp-hero-synopsis { font-size: var(--text-md); }
  .sp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sp-track { grid-auto-columns: minmax(150px, 15.5%); }
  .sp-filter-form { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .sp-filter-query { grid-column: auto; }
  body[data-site="rongseries"] .sp-hero { min-height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .sp-header-search, .sp-filter-chip, .sp-progress { transition: none; }
}