/* Podcast: app-specific components only. The frame, tokens, buttons, fields and
 * sign-in all come from the house shell (shell.css + the pack). Never restate the
 * body/frame here: shell.css owns it (house-check enforces this). UK English, no em dashes. */

.row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } }

.rowbtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { font-size: 13px; color: var(--sh-muted); }
.status.err { color: #f87171; }
.muted { color: var(--sh-muted); font-size: 14px; }
.muted.err { color: #f87171; }

.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bar select { width: auto; min-width: 180px; }

.list { display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--sh-surface); border: 1px solid var(--sh-rule); border-radius: var(--sh-radius);
  padding: 18px 20px; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.card__meta { color: var(--sh-muted); font-size: 12.5px; margin-top: 3px; }
.card__blurb { color: var(--sh-fog); font-size: 14px; margin: 10px 0 0; opacity: .9; }
.card .row2 { margin-top: 14px; }

/* status pills echo the episode lifecycle */
.pill { font-family: var(--sh-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 7px; padding: 2px 7px;
  background: var(--sh-surface-2); color: var(--sh-muted); }
.pill--scripted { background: var(--sh-accent-soft); color: var(--sh-accent-2); }
.pill--rendered { background: color-mix(in srgb, #34d399 20%, transparent); color: #6ee7b7; }
.pill--published { background: color-mix(in srgb, var(--sh-accent) 28%, transparent); color: var(--sh-on-accent); }

/* audio player row */
.player { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.player audio { height: 40px; max-width: 100%; }

#cr-script { font-family: var(--sh-mono); font-size: 13px; line-height: 1.6; min-height: 320px; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--sh-surface); border: 1px solid var(--sh-rule); color: var(--sh-fog);
  padding: 11px 18px; border-radius: 11px; box-shadow: var(--sh-shadow); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }