/* ============================================================
   FLASH TV — APP STATES (loading · empty · offline)
   index-m3.html only
   ------------------------------------------------------------
   M3 + Flash full-screen states with a working retry action,
   driven by mock API + network flags, plus an always-visible
   state switcher so every state is reachable in mock tests.
   Loading visual = the shimmer (window.Shimmer).
   ============================================================ */

#state-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 168px; z-index: 36;
  display: flex; align-items: center; justify-content: center;
  background: var(--m3-surface);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-out-quart, ease);
}
#state-layer.on { opacity: 1; visibility: visible; }

/* While a state screen is active, hide the underlying screen entirely so no
   overflowing rail/thumbnail can peek past the state layer. */
#stage.state-active .screen:not([hidden]) { visibility: hidden; }

.state-box {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 560px; padding: 0 56px;
}
.state-icon {
  width: 120px; height: 120px; border-radius: 999px;
  display: grid; place-items: center; margin-bottom: 36px;
  background: var(--m3-surface-variant);
  color: var(--m3-on-surface-variant);
}
.state-icon .material-symbols-outlined { font-size: 60px; width: 60px; height: 60px; }
/* Offline = a real failure → M3 error treatment */
.state-icon--error { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.state-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: 42px; line-height: 1.05;
  color: var(--m3-on-surface); margin: 0 0 14px;
}
.state-sub {
  font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.5;
  color: var(--m3-on-surface-variant); margin: 0 0 36px; max-width: 440px;
}
.state-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 36px; border: none; border-radius: 999px;
  background: var(--m3-primary); color: var(--m3-on-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: transform 120ms var(--ease-out-quart, ease), filter 180ms ease;
}
.state-btn .material-symbols-outlined { font-size: 24px; width: 24px; height: 24px; }
.state-btn:hover { filter: brightness(1.06); }
.state-btn:active { transform: scale(.97); }
.state-btn.focused { box-shadow: 0 0 0 4px color-mix(in srgb, var(--m3-primary) 40%, transparent); }

/* The standalone shimmer chip is superseded by the state switcher */
#shimmer-toggle { display: none !important; }

/* Always-visible state switcher (dev / mock-test control) */
#state-switcher {
  position: absolute; left: 200px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 14px; border-radius: 999px;
  background: var(--m3-surface-variant); border: 1px solid var(--m3-border-variant);
  box-shadow: var(--shadow-md);
}
#state-switcher .ss-label {
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--m3-on-surface-variant);
  margin-right: 4px;
}
.ss-btn {
  border: none; cursor: pointer;
  height: 30px; padding: 0 14px; border-radius: 999px;
  background: transparent; color: var(--m3-on-surface-variant);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  transition: all 160ms var(--ease-out-quart, ease);
}
.ss-btn:hover { background: var(--m3-surface-variant); color: var(--m3-on-surface); }
.ss-btn.active { background: var(--m3-primary); color: var(--m3-on-primary); }