/* Podcast client account pages in the skyllamaspodcast.com look (switch `podcast-account-shell`,
   docs/features/podcast-accounts.md). The header, MENU, footer, fonts, colors and buttons come from the podcast site's
   own shell.css and site.css (public/podcast-site/, copied by scripts/sync-podcast-shell.py); this file only maps the
   account pages' parts onto that look: the teal "frames" texture, the site's modern glossy boxes and teal pill buttons (no gold buttons),
   bold uppercase Outfit titles and one McLlama per page. */
html[data-look='podcast-site'] {
  --font-display: Outfit, system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ok: #2f6b3a;
  --bad: #9b2c1f;
  /* The modern glossy look of the site's booking and Pricing boxes (skyllamaspodcast.com look-2026.css) */
  --lk-teal-hi: #1d5a78; --lk-teal: #133e54; --lk-teal-lo: #0d2f40;
  --lk-rim: linear-gradient(135deg, #e6d3a6, #ae9863 38%, #f4e7cb 62%, #ae9863);
  --lk-paper: linear-gradient(180deg, #fffdf8, #fbf5e9);
  --lk-shadow: 0 1px 2px rgba(19, 62, 84, 0.06), 0 10px 24px -14px rgba(19, 62, 84, 0.32);
  --lk-panel: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 70px -34px rgba(19, 62, 84, 0.42), 0 10px 24px -16px rgba(19, 62, 84, 0.2);
  --lk-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0) 52%);
  --lk-r: 18px; --lk-r-lg: 26px; --lk-r-sm: 12px;
}
html[data-look='podcast-site'] body { min-height: 100vh; display: flex; flex-direction: column; }
html[data-look='podcast-site'] main { flex: 1; }
html[data-look='podcast-site'] [hidden] { display: none !important; }

/* My sessions / Profile / Sign out, under the site header */
.acct-bar { background: var(--ink-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.acct-bar .wrap { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; min-height: 54px; }
.acct-bar a, .acct-bar button { color: var(--on-dark); text-decoration: none; background: none; border: 0; padding: 14px 0 12px; cursor: pointer;
  font: 700 13px/1 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.acct-bar a:hover, .acct-bar button:hover { color: var(--gold-hi); }
.acct-bar a[aria-current='page'] { color: #fff; border-bottom-color: var(--gold); }
.acct-bar button { margin-left: auto; }

/* The page: cream with the teal diamond texture, the same look as the show About pages on skyllamaspodcast.com
   (Sławek, Oct 8 2026: the faint light texture read as missing). Bold at the sides, calmer behind the content. */
html[data-look='podcast-site'] .page { padding: clamp(40px, 7vw, 88px) 0; background:
  linear-gradient(90deg, rgba(242, 228, 206, 0) 0, rgba(242, 228, 206, 0) 14%, rgba(242, 228, 206, 0.55) 30%, rgba(242, 228, 206, 0.55) 70%, rgba(242, 228, 206, 0) 86%, rgba(242, 228, 206, 0) 100%),
  var(--paper) url(/podcast-site/img/pattern-frames-teal.webp) top center/1024px repeat; }
@media (max-width: 900px) { html[data-look='podcast-site'] .page { background:
  linear-gradient(180deg, rgba(242, 228, 206, 0.4), rgba(242, 228, 206, 0.4)), var(--paper) url(/podcast-site/img/pattern-frames-teal.webp) top center/1024px repeat; } }
html[data-look='podcast-site'] h1 { font-size: clamp(34px, 5vw, 56px); color: var(--teal); margin-bottom: 18px; }
html[data-look='podcast-site'] h2 { font-size: clamp(20px, 2.4vw, 26px); color: var(--teal); margin-bottom: 14px; }
html[data-look='podcast-site'] h3 { font-size: 18px; margin-bottom: 10px; }
html[data-look='podcast-site'] main p { margin: 0 0 1em; }
html[data-look='podcast-site'] .eyebrow { font: 700 13px/1.3 'DM Sans', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 12px; }
.acct-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px clamp(18px, 4vw, 48px); align-items: end; }
.acct-llama { width: clamp(110px, 14vw, 170px); height: auto; }
@media (max-width: 620px) { .acct-head { grid-template-columns: minmax(0, 1fr); } .acct-llama { width: 110px; grid-row: 1; } }
html[data-look='podcast-site'] .muted { color: var(--muted); }
html[data-look='podcast-site'] .small { font-size: 14px; }

/* Boxes: the modern look, soft and rounded with a thin gold rim (like the site's booking and Pricing boxes) */
html[data-look='podcast-site'] .card { border: 1.5px solid transparent; border-radius: var(--lk-r-lg); background: var(--lk-paper) padding-box, var(--lk-rim) border-box; box-shadow: var(--lk-panel); padding: clamp(20px, 3vw, 32px); }
html[data-look='podcast-site'] .tile { background: #fff; border: 1px solid rgba(19, 62, 84, 0.12); border-radius: var(--lk-r); box-shadow: var(--lk-shadow); padding: 16px 20px; }
html[data-look='podcast-site'] .row.past { background: rgba(255, 255, 255, 0.7); box-shadow: none; }

/* Buttons: the site's glossy teal pills (gold ones become teal: no gold buttons) */
html[data-look='podcast-site'] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 30px;
  border: 0; border-radius: 999px; color: #fff; filter: none;
  background: var(--lk-gloss), linear-gradient(180deg, var(--lk-teal-hi), var(--lk-teal) 60%, var(--lk-teal-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -12px rgba(19, 62, 84, 0.75);
  font: 700 14px/1.1 'DM Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, filter 0.2s; }
html[data-look='podcast-site'] .btn:hover, html[data-look='podcast-site'] .btn:focus-visible { color: #fff; transform: translateY(-2px);
  background: var(--lk-gloss), linear-gradient(180deg, #22698b, var(--lk-teal-hi) 60%, var(--lk-teal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 30px -12px rgba(19, 62, 84, 0.8); }
html[data-look='podcast-site'] .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
html[data-look='podcast-site'] .btn.ghost { background: #fff; color: var(--lk-teal); box-shadow: inset 0 0 0 1.5px var(--lk-teal), 0 8px 18px -12px rgba(19, 62, 84, 0.5); }
html[data-look='podcast-site'] .btn.ghost:hover, html[data-look='podcast-site'] .btn.ghost:focus-visible { background: var(--lk-teal); color: #fff; }
html[data-look='podcast-site'] .btn:disabled { transform: none; filter: saturate(0.4); box-shadow: none; opacity: 0.7; cursor: default; }
html[data-look='podcast-site'] .linkish { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; font: inherit; cursor: pointer; }

/* Fields: rounded, like the site's booking forms */
html[data-look='podcast-site'] label.f { display: grid; gap: 6px; font: 700 13px/1.3 'DM Sans', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
html[data-look='podcast-site'] label.f .hint { font: 400 14px/1.5 'Nunito Sans', sans-serif; letter-spacing: 0; text-transform: none; }
html[data-look='podcast-site'] input, html[data-look='podcast-site'] select, html[data-look='podcast-site'] textarea { font: 17px 'Nunito Sans', sans-serif; color: var(--text); background: #fff;
  border: 1px solid rgba(19, 62, 84, 0.2); border-radius: var(--lk-r-sm); box-shadow: inset 0 1px 2px rgba(19, 62, 84, 0.06); padding: 12px 14px; width: 100%; min-height: 50px; letter-spacing: 0; text-transform: none; }
html[data-look='podcast-site'] input:focus, html[data-look='podcast-site'] select:focus, html[data-look='podcast-site'] textarea:focus { outline: 3px solid rgba(29, 90, 120, 0.18); outline-offset: 0; border-color: var(--teal); }
html[data-look='podcast-site'] input:disabled { background: #f6f1e7; color: var(--muted); }
html[data-look='podcast-site'] .status { min-height: 1.4em; margin: 0; font-size: 15px; }
html[data-look='podcast-site'] .status[data-kind='error'] { color: var(--bad); }
html[data-look='podcast-site'] .status[data-kind='ok'] { color: var(--ok); }
html[data-look='podcast-site'] .hp { position: absolute; left: -9999px; }

/* Status labels: small pills, DM Sans */
html[data-look='podcast-site'] .tag { display: inline-block; border-radius: 999px; padding: 4px 10px; font: 700 11px/1.4 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(19, 62, 84, 0.08); color: var(--teal); }
html[data-look='podcast-site'] .tag.ok { background: #e3efe5; color: var(--ok); }
html[data-look='podcast-site'] .tag.wait { background: #f3e6c8; color: var(--gold-text); }
html[data-look='podcast-site'] .tag.off { background: #f3e2df; color: var(--bad); }
.acct-llama.wide { width: clamp(170px, 20vw, 240px); }
html[data-look='podcast-site'] .why .acct-llama { margin-bottom: 18px; }