/* ─────────────────────────────────────────────────────────────────
   Castcore embeddable player.

   CANONICAL SOURCE: internal/service/ui/player/player.css — embedded
   into the podcore-publish binary (//go:embed in internal/service/
   player.go). The copy at hugo/static/player.css is GENERATED from this
   file by scripts/sync-player.sh (Dockerfile.sitegen repeats the copy at
   image build time) — DO NOT edit that copy.

   This stylesheet is a citizen of the Castcore SPA design system: it
   reads the same --pc-* tokens defined in Podcore.html, with local
   fallbacks so the iframe embed still renders correctly on hosts that
   don't ship those tokens.

   Two layouts:
     .cc-player.cc-embed         — square card for iframe embeds
     .cc-player.cc-bar           — bottom-fixed bar for show pages
     .cc-player.cc-bar.cc-float  — same bar, floating with margin + blur

   Accent variants (apply to root):
     [data-accent="blue"]   — Castcore SPA accent (default)
     [data-accent="brand"]  — brand purple/violet gradient
     [data-accent="mono"]   — high-contrast fg on bg (no color)

   Themes (apply to root):
     [data-theme="light"]   — force light
     [data-theme="dark"]    — force dark
     (none)                 — follows prefers-color-scheme
   ───────────────────────────────────────────────────────────────── */

.cc-player {
  /* Aliases onto SPA tokens, with offline fallbacks. The fallback
     chain means: if --pc-* exists on :root we inherit it; if not, we
     render with the literal that matches Castcore's light theme. */
  --cc-bg:          var(--pc-bg, #ffffff);
  --cc-bg-elev:     var(--pc-bg-elev, #ffffff);
  --cc-bg-sunken:   var(--pc-bg-sunken, #f5f5f7);
  --cc-fg:          var(--pc-fg, #1d1d1f);
  --cc-fg-2:        var(--pc-fg-2, #424245);
  --cc-fg-muted:    var(--pc-fg-muted, #6e6e73);
  --cc-fg-faint:    var(--pc-fg-faint, #a1a1a6);
  --cc-rule:        var(--pc-rule, #d2d2d7);
  --cc-rule-soft:   var(--pc-rule-soft, #ebebef);
  --cc-accent:      var(--pc-accent, #006edb);
  --cc-accent-hover:var(--pc-accent-hover, #1f7ee0);
  --cc-accent-soft: var(--pc-accent-soft, rgba(0,110,219,0.10));
  --cc-on-accent:   var(--pc-fg-on-accent, #ffffff);
  --cc-focus-ring:  var(--pc-focus-ring, rgba(0,110,219,0.35));

  /* Track is rule-soft at rest; progress is accent. */
  --cc-track:       var(--pc-rule-soft, #ebebef);

  /* Brand: used by [data-accent="brand"]. Two-stop gradient lifted
     straight from castcore-logo.svg. */
  --cc-brand-1: #5a44c4;
  --cc-brand-2: #3a2a82;

  --cc-r-panel: 12px;
  --cc-r-tile:  8px;
  --cc-r-pill:  980px;

  --cc-shadow-lift:
    0 1px 0 rgba(0,0,0,0.04),
    0 10px 30px -12px rgba(15, 17, 26, 0.22);

  font-family: var(--pc-font, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--cc-fg);
  background: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum";
}

@media (prefers-color-scheme: dark) {
  .cc-player:not([data-theme="light"]) {
    /* Re-alias every --cc-* token from the dark --pc-* fallbacks, so
       a player marked data-theme="dark" in a light-rooted host (or in
       an iframe with no --pc-* tokens at all) still renders dark. */
    --cc-bg:          var(--pc-bg, #000000);
    --cc-bg-elev:     var(--pc-bg-elev, #1c1c1e);
    --cc-bg-sunken:   var(--pc-bg-sunken, #161618);
    --cc-fg:          var(--pc-fg, #f5f5f7);
    --cc-fg-2:        var(--pc-fg-2, #d6d6d9);
    --cc-fg-muted:    var(--pc-fg-muted, #a1a1a6);
    --cc-fg-faint:    var(--pc-fg-faint, #6e6e73);
    --cc-rule:        var(--pc-rule, #2a2a2c);
    --cc-rule-soft:   var(--pc-rule-soft, #1f1f21);
    --cc-accent:      var(--pc-accent, #4ca5fe);
    --cc-accent-hover:var(--pc-accent-hover, #6cb5fe);
    --cc-accent-soft: var(--pc-accent-soft, rgba(76,165,254,0.16));
    --cc-focus-ring:  var(--pc-focus-ring, rgba(76,165,254,0.4));

    --cc-track: rgba(255,255,255,0.10);
    --cc-shadow-lift:
      0 1px 0 rgba(255,255,255,0.04),
      0 12px 36px -14px rgba(0, 0, 0, 0.6);
  }
}
.cc-player[data-theme="dark"] {
  --cc-bg:          #000000;
  --cc-bg-elev:     #1c1c1e;
  --cc-bg-sunken:   #161618;
  --cc-fg:          #f5f5f7;
  --cc-fg-2:        #d6d6d9;
  --cc-fg-muted:    #a1a1a6;
  --cc-fg-faint:    #6e6e73;
  --cc-rule:        #2a2a2c;
  --cc-rule-soft:   #1f1f21;
  --cc-accent:      #4ca5fe;
  --cc-accent-hover:#6cb5fe;
  --cc-accent-soft: rgba(76,165,254,0.16);
  --cc-focus-ring:  rgba(76,165,254,0.4);

  --cc-track: rgba(255,255,255,0.10);
  --cc-shadow-lift:
    0 1px 0 rgba(255,255,255,0.04),
    0 12px 36px -14px rgba(0, 0, 0, 0.6);
}
.cc-player[data-theme="light"] {
  /* Explicit light override pins to the literal light palette, so a
     player marked data-theme="light" inside a dark host still renders
     light without re-reading host --pc-* tokens. */
  --cc-bg:          #ffffff;
  --cc-bg-elev:     #ffffff;
  --cc-bg-sunken:   #f5f5f7;
  --cc-fg:          #1d1d1f;
  --cc-fg-2:        #424245;
  --cc-fg-muted:    #6e6e73;
  --cc-fg-faint:    #a1a1a6;
  --cc-rule:        #d2d2d7;
  --cc-rule-soft:   #ebebef;
  --cc-accent:      #006edb;
  --cc-accent-hover:#1f7ee0;
  --cc-accent-soft: rgba(0,110,219,0.10);
  --cc-focus-ring:  rgba(0,110,219,0.35);

  --cc-track: #ebebef;
}

.cc-player *,
.cc-player *::before,
.cc-player *::after { box-sizing: border-box; }

/* ── Accent variants ─────────────────────────────────────────── */

/* Default (no attribute) = accent blue. */
.cc-player[data-accent="brand"] {
  --cc-accent: var(--cc-brand-1);
  --cc-accent-hover: #6b54d8;
  --cc-accent-soft: rgba(90, 68, 196, 0.14);
  --cc-on-accent: #ffffff;
  --cc-focus-ring: rgba(90, 68, 196, 0.4);
  --cc-play-bg: linear-gradient(160deg, var(--cc-brand-1) 0%, var(--cc-brand-2) 100%);
}

.cc-player[data-accent="mono"] {
  --cc-accent: var(--cc-fg);
  --cc-accent-hover: var(--cc-fg-2);
  --cc-accent-soft: var(--pc-bg-hover, rgba(0,0,0,0.06));
  --cc-on-accent: var(--cc-bg);
  --cc-focus-ring: var(--pc-focus-ring, rgba(0,110,219,0.35));
}

/* Warm amber — complements the brand purple, reads well in both
   themes. Maps to --pc-amber when present. */
.cc-player[data-accent="amber"] {
  --cc-accent: var(--pc-amber, #b87300);
  --cc-accent-hover: #d18505;
  --cc-accent-soft: var(--pc-amber-soft, rgba(184, 115, 0, 0.14));
  --cc-on-accent: #ffffff;
  --cc-focus-ring: rgba(184, 115, 0, 0.4);
}
.cc-player[data-accent="amber"][data-theme="dark"],
.cc-player[data-accent="amber"]:not([data-theme="light"]) {
  /* In dark, the SPA's amber is a brighter HIG-style #ff9f0a. */
}
@media (prefers-color-scheme: dark) {
  .cc-player[data-accent="amber"]:not([data-theme="light"]) {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb12c;
    --cc-accent-soft: rgba(255, 159, 10, 0.16);
    --cc-on-accent: #1d1d1f;
    --cc-focus-ring: rgba(255, 159, 10, 0.4);
  }
}
.cc-player[data-accent="amber"][data-theme="dark"] {
  --cc-accent: #ff9f0a;
  --cc-accent-hover: #ffb12c;
  --cc-accent-soft: rgba(255, 159, 10, 0.16);
  --cc-on-accent: #1d1d1f;
  --cc-focus-ring: rgba(255, 159, 10, 0.4);
}

/* ─────────────────────────────────────────────────────────────
   Episode embed (square card)
   ───────────────────────────────────────────────────────────── */

.cc-player.cc-embed {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: var(--cc-bg);
  overflow: hidden;
  isolation: isolate;
}

.cc-player.cc-embed .cc-art {
  flex: 0 0 auto;
  align-self: stretch;
  /* Flex resolves aspect-ratio against the stretched cross-axis
     height, so the tile is always a square equal to the row height. */
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  /* Cap art width in case the host iframe is unusually tall, and
     a floor so very short embeds still show a usable tile. */
  max-width: 240px;
  min-width: 120px;
  position: relative;
  background: var(--cc-bg-sunken);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.04),
    inset -1px 0 0 var(--cc-rule-soft);
}

.cc-player.cc-embed .cc-body {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-player.cc-embed .cc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  min-width: 0;
  gap: 14px;
  justify-content: space-between;
}

.cc-player.cc-embed .cc-meta { min-width: 0; }

.cc-player.cc-embed .cc-show {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--cc-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The brand mark is absolutely positioned in the body's top-right,
     outside the flow — reserve its footprint (18px + inset beyond the
     body padding) so a long show name ellipsizes before sliding under it. */
  padding-right: 24px;
}

.cc-player.cc-embed .cc-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: var(--cc-fg);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.cc-player.cc-embed .cc-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--cc-fg-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.cc-player.cc-embed .cc-sub .cc-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--cc-fg-faint);
  flex: 0 0 auto;
}

/* Tiny brand whisper in the top-right of the embed body. */
.cc-player.cc-embed .cc-brand {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 18px;
  height: 18px;
  color: var(--cc-fg-faint);
  opacity: 0.55;
  pointer-events: none;
}
.cc-player.cc-embed .cc-brand svg { width: 100%; height: 100%; display: block; }

/* ─────────────────────────────────────────────────────────────
   Narrow embed (host iframes squeezed by responsive layouts)

   Embedders paste fixed-size iframe snippets, but responsive host
   pages routinely shrink them to ~300–400px on mobile. player.js
   toggles cc-narrow (≤520px) and cc-tiny (≤360px) on the embed root
   from its measured width (ResizeObserver — works inside iframes and
   for inline mounts alike). cc-tiny implies cc-narrow.

   Everything here is scoped to .cc-embed; the bar layout is untouched.
   ───────────────────────────────────────────────────────────── */

/* ≤520px — tighten chrome and move the time labels onto their own
   row under the seek bar (elapsed left, total right), so the bar
   itself gets the full scrub width and the labels can never collide. */
.cc-player.cc-embed.cc-narrow .cc-art {
  max-width: 128px;
  min-width: 84px;
}
.cc-player.cc-embed.cc-narrow .cc-body {
  padding: 14px 16px 12px;
  gap: 10px;
}
.cc-player.cc-embed.cc-narrow .cc-brand { top: 12px; right: 14px; }
.cc-player.cc-embed.cc-narrow .cc-title { font-size: 15px; }
.cc-player.cc-embed.cc-narrow .cc-controls { gap: 10px; }
.cc-player.cc-embed.cc-narrow .cc-play { --size: 40px; }

.cc-player.cc-embed.cc-narrow .cc-scrub {
  flex-wrap: wrap;
  row-gap: 2px;
}
.cc-player.cc-embed.cc-narrow .cc-scrub .cc-range {
  /* First row, full width — the times wrap beneath it. */
  order: -1;
  flex-basis: 100%;
}
.cc-player.cc-embed.cc-narrow .cc-scrub .cc-time-dur { margin-left: auto; }

/* ≤360px — the scrub group drops to a full-width row below the
   play/speed buttons, keeping a usable bar length down to 280px. */
.cc-player.cc-embed.cc-tiny .cc-art {
  max-width: 96px;
  min-width: 64px;
}
.cc-player.cc-embed.cc-tiny .cc-body { padding: 12px 14px 10px; }
.cc-player.cc-embed.cc-tiny .cc-sub { display: none; }
.cc-player.cc-embed.cc-tiny .cc-controls { flex-wrap: wrap; gap: 8px; }
.cc-player.cc-embed.cc-tiny .cc-play { --size: 38px; }
.cc-player.cc-embed.cc-tiny .cc-scrub {
  order: 1;
  flex-basis: 100%;
}
.cc-player.cc-embed.cc-tiny .cc-speed {
  margin-left: auto;
  min-width: 40px;
  padding: 3px 8px;
}

/* ─────────────────────────────────────────────────────────────
   Bottom-fixed bar
   ───────────────────────────────────────────────────────────── */

.cc-player.cc-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--pc-z-bar, 9999);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--cc-rule);
  background: var(--cc-bg);
  box-shadow: 0 -8px 28px -16px rgba(15,17,26,0.18);
}

.cc-player.cc-bar.cc-float {
  left: 16px; right: 16px; bottom: 16px;
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r-panel);
  background: color-mix(in srgb, var(--cc-bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--cc-shadow-lift);
  padding: 10px 14px 10px 10px;
}

.cc-player.cc-bar .cc-art {
  width: 48px;
  height: 48px;
  border-radius: var(--cc-r-tile);
  background: var(--cc-bg-sunken);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.cc-player.cc-bar .cc-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.cc-player.cc-bar .cc-show {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--cc-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-player.cc-bar .cc-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cc-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* In the bar, scrubber sits below the title row spanning the body. */
.cc-player.cc-bar .cc-scrub-row {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Controls (shared)
   ───────────────────────────────────────────────────────────── */

.cc-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-player.cc-embed .cc-controls { width: 100%; }
.cc-player.cc-bar  .cc-controls { flex: 0 0 auto; }

/* Play button — solid, weighty, 44px (embed) / 38px (bar). */
.cc-play {
  --size: 44px;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 0;
  background: var(--cc-play-bg, var(--cc-accent));
  color: var(--cc-on-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .12s cubic-bezier(.4,.0,.2,1),
              box-shadow .15s, background .12s, opacity .12s;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.06),
    0 2px 8px -2px color-mix(in srgb, var(--cc-accent) 40%, transparent);
}
.cc-player.cc-bar .cc-play { --size: 38px; }

.cc-play:hover {
  transform: scale(1.04);
  background: var(--cc-accent-hover);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.08),
    0 6px 16px -4px color-mix(in srgb, var(--cc-accent) 55%, transparent);
}
.cc-play[data-accent="brand"]:hover,
.cc-player[data-accent="brand"] .cc-play:hover {
  background: var(--cc-play-bg);
  filter: brightness(1.08);
}
.cc-play:active { transform: scale(0.97); }
.cc-play:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.cc-play:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--cc-bg),
    0 0 0 5px var(--cc-focus-ring),
    0 2px 8px -2px color-mix(in srgb, var(--cc-accent) 40%, transparent);
}
.cc-play svg {
  width: calc(var(--size) * 0.38);
  height: calc(var(--size) * 0.38);
  fill: currentColor;
  display: block;
  /* Optical centering for the play triangle. */
  transform: translateX(1px);
}
.cc-play[data-state="playing"] svg,
.cc-player.cc-playing .cc-play svg { transform: none; }

/* Scrubber group: time / range / time. */
.cc-scrub {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cc-time {
  font-family: var(--pc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  color: var(--cc-fg-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}

/* Native range, restyled. Track is 3px, thumb scales in on hover. */
.cc-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  /* Never collapse to a sliver when siblings crowd the row. */
  min-width: 48px;
  height: 16px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.cc-range:focus { outline: none; }

.cc-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--cc-accent) 0%,
      var(--cc-accent) var(--cc-progress, 0%),
      var(--cc-track) var(--cc-progress, 0%),
      var(--cc-track) 100%);
  transition: height .15s ease;
}
.cc-range::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--cc-accent) 0%,
      var(--cc-accent) var(--cc-progress, 0%),
      var(--cc-track) var(--cc-progress, 0%),
      var(--cc-track) 100%);
  transition: height .15s ease;
}
.cc-range:hover::-webkit-slider-runnable-track,
.cc-range:focus-visible::-webkit-slider-runnable-track { height: 5px; }
.cc-range:hover::-moz-range-track,
.cc-range:focus-visible::-moz-range-track { height: 5px; }

.cc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cc-accent);
  border: 2px solid var(--cc-bg);
  margin-top: -5px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cc-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cc-accent);
  border: 2px solid var(--cc-bg);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cc-range:hover::-webkit-slider-thumb,
.cc-range:focus-visible::-webkit-slider-thumb,
.cc-range:active::-webkit-slider-thumb { opacity: 1; transform: scale(1); }
.cc-range:hover::-moz-range-thumb,
.cc-range:focus-visible::-moz-range-thumb,
.cc-range:active::-moz-range-thumb { opacity: 1; transform: scale(1); }

.cc-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 0 0 4px var(--cc-focus-ring);
}
.cc-range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 0 0 4px var(--cc-focus-ring);
}

/* Speed: pill-shaped button that cycles on click. No more native <select>. */
.cc-speed {
  flex: 0 0 auto;
  font-family: var(--pc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cc-fg-muted);
  background: transparent;
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r-pill);
  padding: 4px 10px;
  min-width: 44px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  letter-spacing: 0.01em;
}
.cc-speed:hover {
  border-color: color-mix(in srgb, var(--cc-rule) 50%, var(--cc-fg-muted));
  color: var(--cc-fg);
}
.cc-speed:active { background: var(--pc-bg-active, rgba(0,0,0,0.06)); }
.cc-speed[data-active="true"] {
  color: var(--cc-accent);
  border-color: color-mix(in srgb, var(--cc-accent) 40%, var(--cc-rule));
  background: var(--cc-accent-soft);
}
.cc-speed:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Status / loading panels
   ───────────────────────────────────────────────────────────── */

.cc-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  font-size: 13px;
  color: var(--cc-fg-muted);
  text-align: center;
  gap: 4px;
}
.cc-status[data-kind="error"] { color: var(--cc-fg); }
.cc-status .cc-status-sub {
  font-size: 11.5px;
  color: var(--cc-fg-faint);
}
.cc-status .cc-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cc-rule);
  border-top-color: var(--cc-accent);
  animation: cc-spin .8s linear infinite;
  margin-bottom: 8px;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* When the embed is the only thing on the page (iframe), strip body. */
html.cc-page,
html.cc-page body,
html.cc-page #cc-root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
}
html.cc-page { overscroll-behavior: contain; }