/* ASE Sponsor Schedule Viewer — implements approved design v0.9.
   Tokens sampled from the canonical prototype (SHA-256 5690CB3C…5C5817).

   ISOLATION CONTRACT:
   - Every rule is scoped under .assv-root. Nothing here styles html or body.
   - Every class is prefixed assv-. This site enqueues Bootstrap globally, so
     bare .btn/.card/.badge/.panel/.container already belong to something else.
   - Selectors carry enough specificity (.assv-root .assv-x) to survive the
     theme's own heading/link/button rules without needing !important.
   - No site chrome: no header, nav or footer is styled or assumed. */

.assv-root {
  --assv-bg:        #04070f;
  --assv-shell:     #050b18;                     /* rounded card the Viewer sits in */
  --assv-panel:     rgba(8, 20, 42, 0.60);
  --assv-hairline:  rgba(255, 255, 255, 0.10);   /* card edges, per prototype */
  --assv-line:      rgba(127, 168, 217, 0.22);
  --assv-line-2:    rgba(127, 168, 217, 0.40);
  --assv-daybar:    rgba(10, 26, 51, 0.95);      /* date-group header */
  --assv-rowbg:     rgba(7, 17, 36, 0.55);       /* airing rows */
  --assv-rowline:   rgba(255, 255, 255, 0.07);
  --assv-white:     #ffffff;
  --assv-muted:     #8598bc;
  --assv-intro:     #bbd4ee;
  --assv-soft-red:  #f08a8b;
  --assv-red:       #d93233;
  --assv-blue:      #004587;
  --assv-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --assv-body: "Barlow", system-ui, -apple-system, sans-serif;
  --assv-radius: 10px;

  box-sizing: border-box;
  width: min(100%, 1440px);
  margin-inline: auto;
  /* The rounded shell the whole Viewer sits in — the signature curve from the
     approved prototype (14px at desktop, softening to 20px on narrow widths). */
  margin-block: clamp(1rem, 2.5vw, 2rem);
  border-radius: clamp(14px, 1.4vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--assv-shell);
  padding-inline: clamp(1rem, 3.2vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  color: var(--assv-white);
  font-family: var(--assv-body);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  overflow: clip;   /* keeps children inside the rounded corners */
}

.assv-root *,
.assv-root *::before,
.assv-root *::after { box-sizing: border-box; }

/* Neutralise theme/Bootstrap defaults on our own elements. */
.assv-root p,
.assv-root h1,
.assv-root h2,
.assv-root h3,
.assv-root figure { margin: 0; padding: 0; }

.assv-root img { max-width: 100%; height: auto; display: block; }

.assv-root a { text-decoration: none; }

.assv-root :focus-visible { outline: 3px solid #7fb2ff; outline-offset: 3px; }

/* --- staging notice ------------------------------------------------------ */
.assv-root .assv-staging {
  background: #3a1418;
  border: 1px solid #6d2329;
  border-radius: 8px;
  color: #ffb3b5;
  font: 600 12px/1.5 var(--assv-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- optional brand mark (component-test harness only) ------------------- */
.assv-root .assv-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.assv-root .assv-brand img { width: clamp(84px, 9vw, 120px); height: auto; }

/* --- intro (centered per V5) --------------------------------------------- */
.assv-root .assv-intro {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto clamp(1.6rem, 3.5vw, 2.6rem);
}

.assv-root .assv-badge {
  display: inline-block;
  font: 600 12px/1 var(--assv-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--assv-soft-red);
  background: rgba(217, 50, 51, 0.14);
  border: 1px solid rgba(217, 50, 51, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 1.1rem;
}
.assv-root .assv-badge::before { content: "\25CF"; margin-right: 8px; font-size: 9px; vertical-align: 1px; }

.assv-root .assv-h1 {
  font: 700 clamp(2.1rem, 5.4vw, 3.9rem)/1.02 var(--assv-cond);
  color: var(--assv-white);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.assv-root .assv-lede {
  font: 600 clamp(1rem, 1.5vw, 1.3rem)/1.45 var(--assv-body);
  color: var(--assv-intro);
  margin-top: 0.85rem;
}

/* --- selector ------------------------------------------------------------ */
.assv-root .assv-selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  background: linear-gradient(rgba(10, 26, 51, 0.9) 0%, rgba(7, 17, 36, 0.9) 100%);
  border: 1px solid var(--assv-hairline);
  border-radius: 12px;
  padding: clamp(1.15rem, 2vw, 1.75rem) clamp(1.15rem, 2.2vw, 1.9rem);
}

.assv-root .assv-field { display: grid; gap: 0.45rem; min-width: 0; }

.assv-root .assv-label {
  font: 600 12px/1 var(--assv-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--assv-muted);
  margin: 0;
}

.assv-root .assv-select-wrap { position: relative; display: block; }

.assv-root .assv-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--assv-intro);
  border-bottom: 2px solid var(--assv-intro);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.assv-root .assv-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 56px;
  background: rgb(8, 20, 42);
  color: var(--assv-white);
  border: 1px solid rgba(44, 109, 181, 0.55);
  border-radius: 8px;
  padding: 0 40px 0 14px;
  font: 400 16px/1.4 var(--assv-body);
  box-shadow: none;
}

.assv-root .assv-select:disabled { color: var(--assv-muted); opacity: 1; }

/* --- buttons ------------------------------------------------------------- */
.assv-root .assv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 8px;
  border: 1px solid var(--assv-line-2);
  background: transparent;
  color: var(--assv-white);
  font: 700 15px/1 var(--assv-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.assv-root .assv-btn:hover,
.assv-root .assv-btn:focus-visible {
  background: rgba(0, 69, 135, 0.35);
  border-color: var(--assv-blue);
  color: var(--assv-white);
}

.assv-root .assv-btn-primary { background: var(--assv-red); border-color: var(--assv-red); }
.assv-root .assv-btn-primary:hover,
.assv-root .assv-btn-primary:focus-visible { background: var(--assv-blue); border-color: var(--assv-blue); }

.assv-root .assv-btn-ghost { border-color: rgba(127, 168, 217, 0.45); }

/* --- status -------------------------------------------------------------- */
.assv-root .assv-status {
  min-height: 1.5rem;
  margin-top: 0.9rem;
  color: var(--assv-muted);
  font-size: 15px;
}

/* --- state panels -------------------------------------------------------- */
.assv-root .assv-panel {
  background: var(--assv-panel);
  border: 1px solid var(--assv-line);
  border-radius: var(--assv-radius);
  padding: clamp(1.2rem, 3vw, 2rem);
  margin-top: 1.4rem;
  display: grid;
  gap: 0.7rem;
}

.assv-root .assv-panel-h {
  font: 700 clamp(1.25rem, 2.4vw, 1.7rem)/1.1 var(--assv-cond);
  color: var(--assv-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.assv-root .assv-panel p { color: var(--assv-intro); }

.assv-root .assv-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }

/* --- two-column layout (desktop rule) ------------------------------------ */
.assv-root .assv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  align-items: start;
}

.assv-root .assv-col-main { min-width: 0; }
.assv-root .assv-col-side { min-width: 0; display: grid; gap: 0.85rem; align-content: start; }

/* The inner wrapper is transparent to layout at every width — the whole side
   column pins as one unit, so nothing scrolls over anything else. */
.assv-root .assv-side-pin { display: contents; }

/* Pin the ENTIRE side column: SalemNOW, poster, share buttons and the platform
   grid all travel together alongside the scrolling schedule.
   align-self:start is required — an item stretched to its full containing block
   has nowhere to travel and sticky silently does nothing. */
@media (min-width: 901px) {
  .assv-root .assv-col-side {
    position: sticky;
    /* Clears a host site header that becomes fixed on scroll. The streamit theme
       does this via its has-sticky script, so a smaller offset leaves the site
       menu sitting on top of the SalemNOW mark. */
    top: 6.25rem;
    align-self: start;
  }
}

/* --- schedule head ------------------------------------------------------- */
.assv-root .assv-eyebrow {
  font: 600 14px/1 var(--assv-cond);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--assv-soft-red);
  margin-bottom: 0.5rem;
}

.assv-root .assv-sched-h {
  font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--assv-cond);
  color: var(--assv-white);
  text-transform: uppercase;
}

.assv-root .assv-season-line {
  font: 700 clamp(1rem, 1.6vw, 1.25rem)/1.2 var(--assv-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--assv-intro);
  margin-top: 0.3rem;
}

/* "All Times Eastern" sub-head, per the approved prototype. */
.assv-root .assv-et-chip {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font: 600 12px/1 var(--assv-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--assv-intro);
}

.assv-root .assv-check { color: var(--assv-muted); font-size: 14px; margin-top: 0.6rem; }

/* --- date groups + airings ----------------------------------------------- */
.assv-root .assv-schedule { margin-top: 1.6rem; }

/* Each date group is one rounded card: the day bar caps the top, the airing
   rows sit inside it, and the final row closes the bottom corners. Individual
   rows are still unboxed, so a long list reads as abundance rather than 300
   separate cards. */
.assv-root .assv-group { margin-bottom: 1.25rem; }

.assv-root .assv-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--assv-daybar);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px 10px 0 0;
}

.assv-root .assv-day {
  font: 700 clamp(1.05rem, 1.8vw, 1.25rem)/1 var(--assv-cond);
  color: var(--assv-white);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.assv-root .assv-date { color: var(--assv-intro); font-size: 15px; }

.assv-root .assv-count {
  margin-left: auto;
  font: 600 13px/1 var(--assv-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--assv-muted);
}

.assv-root .assv-airing {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: 14px 20px;
  background: var(--assv-rowbg);
  border-bottom: 1px solid var(--assv-rowline);
}

/* Close the card on the last row of each group. */
.assv-root .assv-airing:last-child {
  border-bottom: 0;
  border-radius: 0 0 10px 10px;
}

.assv-root .assv-time { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }

.assv-root .assv-t {
  font: 700 clamp(1rem, 1.5vw, 1.13rem)/1 var(--assv-cond);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.assv-root .assv-tz {
  font: 600 11px/1 var(--assv-cond);
  letter-spacing: 0.12em;
  color: var(--assv-muted);
}

.assv-root .assv-program {
  font: 600 clamp(0.95rem, 1.35vw, 1.05rem)/1.35 var(--assv-cond);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.assv-root .assv-disclaimer { color: var(--assv-muted); font-size: 14px; margin-top: 1.2rem; }

/* --- SalemNOW ------------------------------------------------------------ */
.assv-root .assv-salem {
  background: linear-gradient(150deg, rgba(217, 50, 51, 0.18) 0%, rgba(10, 26, 51, 0.9) 70%);
  border: 1px solid rgba(217, 50, 51, 0.35);
  border-radius: 12px;
  padding: clamp(1.2rem, 2.2vw, 1.65rem) clamp(1.1rem, 2vw, 1.5rem);
  display: grid;
  gap: 0.6rem;
}

/* Blue + gold + white artwork on transparency — reads correctly on the navy
   panel, so it needs no plate behind it. */
.assv-root .assv-salem-logo {
  width: auto;
  height: clamp(26px, 3vw, 32px);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.15rem;
}

.assv-root .assv-salem-h {
  font: 700 clamp(1.25rem, 2.2vw, 1.55rem)/1.05 var(--assv-cond);
  color: var(--assv-white);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.assv-root .assv-salem-p { color: var(--assv-intro); font-size: 15px; }

.assv-root .assv-salem-cta { min-height: 56px; font-size: 16px; }

/* --- poster -------------------------------------------------------------- */
.assv-root .assv-poster-wrap { display: flex; justify-content: center; }

/* Poster is sized from the viewport, not a fixed pixel cap. That keeps the
   pinned pair (SalemNOW + poster) shorter than the screen on every display, so
   it can stay alongside the schedule without ever needing to clip or scroll.
   Proportions follow the approved prototype, where the poster is a modest
   portrait rather than a full-width block. */
.assv-root .assv-poster {
  /* Height is the definite dimension and width derives from it. With both axes
     auto, an aspect-ratio image inside a flex parent collapses to 2x3px. */
  height: min(28vh, 18rem);
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 20, 42, 0.9);
}

.assv-root .assv-poster-ph {
  width: calc(min(28vh, 18rem) * 2 / 3);   /* match the image's derived width */
  height: min(28vh, 18rem);
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
  border-color: var(--assv-line-2);
  color: var(--assv-muted);
  font: 600 14px/1.5 var(--assv-cond);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 1rem;
  height: auto;
}

.assv-root .assv-side-actions { margin-top: 0; }
.assv-root .assv-side-actions .assv-btn { flex: 1 1 auto; }

/* Collapses to nothing until the copy action reports, so it costs no height in
   the pinned column. */
.assv-root .assv-copy-status { color: var(--assv-muted); font-size: 14px; min-height: 0; }
.assv-root .assv-copy-status:empty { display: none; }

/* --- platforms ----------------------------------------------------------- */
.assv-root .assv-platforms {
  background: rgba(8, 20, 42, 0.55);
  border: 1px solid var(--assv-hairline);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.assv-root .assv-platforms-h {
  font: 700 clamp(1.05rem, 1.7vw, 1.35rem)/1.15 var(--assv-cond);
  color: var(--assv-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Desktop rule: nine positions, three columns x three rows. */
.assv-root .assv-plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

.assv-root .assv-plat {
  min-height: 62px;
  display: grid;
  place-items: center;
  padding: 10px 8px;
  background: rgba(8, 20, 42, 0.6);
  border: 1px solid var(--assv-hairline);
  border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease;
}

.assv-root .assv-plat:hover,
.assv-root .assv-plat:focus-visible { background: rgba(0, 69, 135, 0.34); border-color: var(--assv-blue); }

.assv-root .assv-plat img { max-height: 34px; width: auto; object-fit: contain; }

/* ------------------------------------------------------------------------- */
/* Phone rule: SalemNOW before the schedule, platforms after the complete      */
/* schedule in two columns x five rows (nine items, one in the final row).     */
/* ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .assv-root .assv-layout { grid-template-columns: 1fr; }

  /* Both wrappers dissolve so SalemNOW, the poster and the platform grid become
     direct grid items and the approved phone ordering below still applies. */
  .assv-root .assv-col-side,
  .assv-root .assv-side-pin { display: contents; }

  .assv-root .assv-salem        { order: 1; }
  .assv-root .assv-poster-wrap  { order: 2; }
  .assv-root .assv-col-main     { order: 3; }
  .assv-root .assv-side-actions { order: 4; }
  .assv-root .assv-copy-status  { order: 5; }
  .assv-root .assv-platforms    { order: 6; }

  .assv-root .assv-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assv-root .assv-poster { max-width: 19rem; }
}

@media (max-width: 640px) {
  .assv-root .assv-selector { grid-template-columns: 1fr; }
  .assv-root .assv-selector .assv-btn { width: 100%; }

  .assv-root .assv-airing { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.85rem 0; }
  .assv-root .assv-count { margin-left: 0; width: 100%; }

  .assv-root .assv-actions { flex-direction: column; align-items: stretch; }
  .assv-root .assv-actions .assv-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .assv-root * { transition: none !important; animation: none !important; }
}