/* ==========================================================================
   features/theater_link.css — Main-window Theater header button & remote bar (F4)
   Tokens only (see tokens.css). No hex colors.
   ========================================================================== */

/* ---- Header slot button ---- */
.theater-header-btn {
  gap: 6px;
}

.theater-header-btn__dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--seen);
}

.theater-header-btn.is-connected {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-1);
}

.theater-header-btn.is-connected .theater-header-btn__dot {
  display: inline-block;
}

/* ---- "Now playing on Theater" remote bar (#theater-bar) ---- */
.theater-bar {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-sticky) + 2);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border-bottom: 1px solid var(--border-strong);
  -webkit-backdrop-filter: var(--blur-backdrop);
  backdrop-filter: var(--blur-backdrop);
}

.theater-bar:empty {
  display: none;
}

/* Offset sticky filterbar/view header below the theater bar when connected */
body.is-theater .filterbar,
body.is-theater .view__header {
  top: calc(var(--header-h) + 64px);
}

.theater-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--space-6);
}

.theater-bar__media {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.theater-bar__thumb {
  width: 36px;
  height: 54px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex: none;
}

.theater-bar__thumb--empty {
  display: grid;
  place-items: center;
  color: var(--text-3);
}

.theater-bar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.theater-bar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.theater-bar__pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--seen);
}

.theater-bar__title {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  text-align: left;
}

.theater-bar__title--idle {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}

.theater-bar__year {
  font-weight: var(--fw-regular);
  color: var(--text-2);
}

.theater-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.theater-bar__controls [aria-pressed='true'][data-theater-bar='seen'] {
  color: var(--seen);
}

.theater-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--space-1);
}

.theater-bar__disconnect {
  color: var(--text-2);
}

.theater-bar__disconnect:hover {
  color: var(--text-1);
}

@media (max-width: 899px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .theater-bar,
  #header-theater-slot {
    display: none !important;
  }
}

/* ---- Focus visible rings ---- */
.theater-header-btn:focus-visible,
.theater-bar__controls .btn:focus-visible,
.theater-bar__title:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .theater-bar,
  .theater-bar__pulse,
  .theater-header-btn {
    transition: none !important;
    animation: none !important;
  }
}