/* Beyond the Arches hub header (Daniel 2026-10-10): the real, full-colour graffiti and the show's own logo,
   more colour and personality than the rest of the site. Claude lane. */
section.pod-hero.bta-color{background:#1d3442;padding:44px 0 40px}
section.pod-hero.bta-color>.pattern{display:none}
.bta-graffiti{position:absolute;inset:0;z-index:-2;background:url('assets/graffiti-color.jpg') 60% 45%/cover no-repeat}
.bta-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,40,52,.92) 0%,rgba(23,40,52,.82) 34%,rgba(23,40,52,.35) 62%,rgba(23,40,52,.08) 100%),linear-gradient(180deg,rgba(23,40,52,.15),rgba(23,40,52,.45))}
.bta-logo-h1{margin:6px 0 18px;line-height:0}
.bta-sticker{display:inline-block;transform:rotate(-2deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))} /* the logo's own white outline carries it on dark; no card (Daniel 2026-10-10) */
.bta-sticker img{display:block;width:clamp(220px,30vw,360px);height:auto}
section.pod-hero.bta-color .eyebrow{color:#cfe3b1;letter-spacing:.14em}
section.pod-hero.bta-color .wrap>p:not(.eyebrow){color:#f1f5f7;text-shadow:0 1px 2px rgba(0,0,0,.35)}
section.pod-hero.bta-color .listen-row a{background:rgba(23,40,52,.55);border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
section.pod-hero.bta-color .listen-row a:hover,section.pod-hero.bta-color .listen-row a:focus-visible{border-color:#8dc63f}
@media(max-width:700px){
  .bta-scrim{background:linear-gradient(180deg,rgba(23,40,52,.55) 0%,rgba(23,40,52,.85) 55%,rgba(23,40,52,.92) 100%)}
}

/* The show's palette on the episode list: each kind of episode has its colour (from the Beyond the Arches logo). */
:root{--bta-lime:#8dc63f;--bta-blue:#2e6fa7;--bta-orange:#ed873c;--bta-navy:#203846}
.ep-tag[data-kind]{display:inline-block;padding:2px 9px;border-radius:999px;font-weight:600;letter-spacing:.02em}
.ep-tag[data-kind=patient]{background:#fdeee2;color:#9a4a12}
.ep-tag[data-kind=answers]{background:#e3eef8;color:#1f5486}
.ep-tag[data-kind=doctor]{background:#ecf6df;color:#3d6614}
.ep-tag[data-kind=talk]{background:#e8edf0;color:#203846}
#start-here-cards .start-card[data-kind]{box-shadow:inset 0 4px 0 var(--k,var(--bta-navy))}
#start-here-cards .start-card[data-kind=patient]{--k:var(--bta-orange)}
#start-here-cards .start-card[data-kind=answers]{--k:var(--bta-blue)}
#start-here-cards .start-card[data-kind=doctor]{--k:var(--bta-lime)}
#start-here-cards .start-card[data-kind] .start-tag{color:var(--k)}
#start-here-cards .start-card[data-kind=doctor] .start-tag{color:#4f7f1c}

/* Episode cards (Daniel 2026-10-10: the list "feels like a calendar listing"). Colour by kind, show palette. */
#eps.eps{max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:18px 0 8px}
#eps .ep{margin:0;border:0;padding:0}
.bta-card{--bg:#203846;--ink:#fff;--sub:rgba(255,255,255,.78);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:220px;height:100%;padding:18px 18px 16px;border-radius:14px;
  background:var(--bg);color:var(--ink);text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -16px rgba(16,32,42,.6);transition:transform .25s ease,box-shadow .25s ease}
.bta-card::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/graffiti-color.jpg') center/cover;opacity:.22;mix-blend-mode:soft-light}
.bta-card[data-kind=patient]{--bg:#ed873c;--ink:#1c2e3a;--sub:rgba(28,46,58,.78)}
.bta-card[data-kind=answers]{--bg:#2e6fa7}
.bta-card[data-kind=doctor]{--bg:#8dc63f;--ink:#1c2e3a;--sub:rgba(28,46,58,.78)}
.bta-card[data-kind=talk]{--bg:#203846}
.bta-card:hover,.bta-card:focus-visible{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 28px -16px rgba(16,32,42,.7)}
.bta-card[data-patient-account]:hover{transform:none}
.bta-card:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.bta-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bta-ep{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.16)}
.bta-len{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(0,0,0,.16);color:var(--ink)}
.bta-len svg{stroke:currentColor}
.bta-title{font-size:clamp(21px,1.6vw + 12px,26px);line-height:1.18;font-weight:700;letter-spacing:-.01em;flex:1;margin-top:6px}
.bta-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.bta-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.bta-kind{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bta-sub{font-size:13px;color:var(--sub)}
.bta-play{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:15px;padding-left:3px;color:var(--bg);background:var(--ink);box-shadow:0 4px 10px -4px rgba(0,0,0,.45)}
@media(max-width:900px){#eps.eps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#eps.eps{grid-template-columns:1fr}.bta-card{min-height:0}}
@media(prefers-reduced-motion:reduce){.bta-card{transition:none}.bta-card:hover{transform:none}}

/* Start here: the same palette, as larger feature cards */
#start-here-cards .start-card[data-kind]{--bg:#203846;--ink:#fff;--sub:rgba(255,255,255,.8);position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:16px;padding:22px 22px 18px;background:var(--bg);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 26px -18px rgba(16,32,42,.7)}
#start-here-cards .start-card[data-kind]::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/graffiti-color.jpg') 30% 40%/cover;opacity:.24;mix-blend-mode:soft-light}
#start-here-cards .start-card[data-kind=patient]{--bg:#ed873c;--ink:#1c2e3a;--sub:rgba(28,46,58,.8)}
#start-here-cards .start-card[data-kind=answers]{--bg:#2e6fa7}
#start-here-cards .start-card[data-kind=doctor]{--bg:#8dc63f;--ink:#1c2e3a;--sub:rgba(28,46,58,.8)}
#start-here-cards .start-card[data-kind] .start-tag,#start-here-cards .start-card[data-kind=doctor] .start-tag{color:var(--ink);opacity:.9}
#start-here-cards .start-card[data-kind] h3 a{color:var(--ink);font-size:22px;line-height:1.25;text-decoration:none}
#start-here-cards .start-card[data-kind] .start-gist,#start-here-cards .start-card[data-kind] .start-meta{color:var(--sub)}
#start-here-cards .start-card[data-kind] .start-meta svg{stroke:currentColor}
#start-here-cards .start-card[data-kind] .start-meta,#start-here-cards .start-card[data-kind] .start-meta *{color:var(--ink)!important;opacity:.85}
/* 2026-11-11 audit: the smallest text on the orange and blue cards was the faintest (80% ink, and the length line 85% twice over).
   Solid dark ink on orange, solid white on blue. The green card is left as approved. */
#start-here-cards .start-card[data-kind=patient]{--sub:#1c2e3a}
#start-here-cards .start-card[data-kind=answers]{--sub:#fff}
#start-here-cards .start-card:is([data-kind=patient],[data-kind=answers]) :is(.start-tag,.start-meta,.start-meta *){opacity:1}

/* Filters first, search beside them as a matching silver-aluminium capsule (Daniel 2026-10-10). */
.tools.bta-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.bta-tools .filters{flex:0 1 auto}
.bta-tools .search{position:relative;flex:1 1 220px;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),inset 0 2px 5px rgba(20,40,52,.10),0 6px 14px -8px rgba(16,32,42,.35)}
.bta-tools .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:#1c3341;padding:14px 0}
.bta-tools .search input::placeholder{color:#526773}
.bta-tools .search:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),0 0 0 3px #fff,0 0 0 5px #2e6fa7}
@media(max-width:700px){.bta-tools .search{flex-basis:100%}}

/* One integrated control (Daniel 2026-10-10: "make it where it's integrated"): a single silver capsule holds the
   filter pills (left) and the search field (right), divided by a thin engraved line. */
.tools.bta-tools{gap:0;flex-wrap:nowrap;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),0 8px 18px -10px rgba(16,32,42,.4);margin-top:22px}
.bta-tools .search{flex:1 1 auto;min-height:48px;padding:0 16px 0 18px;margin-left:6px;background:none;box-shadow:none;border-radius:999px;position:relative}
.bta-tools .search::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(20,40,52,.22);box-shadow:1px 0 0 rgba(255,255,255,.7)}
.bta-tools .search:focus-within{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px #2e6fa7}
.bta-tools .search:focus-within::before{opacity:0}
@media(max-width:820px){
  .tools.bta-tools{flex-wrap:wrap;border-radius:26px;padding:6px}
  .bta-tools .filters{width:100%}
  .bta-tools .search{flex-basis:100%;margin:6px 0 0}
  .bta-tools .search::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
}

/* Finder: the bar's right end is a pill that opens a big grey drawer from the bar's body (Daniel 2026-10-10). */
.bta-finder{position:relative;margin-top:22px}
.bta-finder .tools.bta-tools{margin-top:0;position:relative;z-index:2}
.bta-find{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-left:6px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:600;color:#1c3341;background:transparent;position:relative;transition:background .25s,color .25s}
.bta-find::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(20,40,52,.22);box-shadow:1px 0 0 rgba(255,255,255,.7)}
.bta-find .chev{transition:transform .38s cubic-bezier(.3,.7,.2,1)}
.bta-find:hover{background:rgba(255,255,255,.45)}
.bta-finder.is-open .bta-find{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.28);background:linear-gradient(180deg,#68869a 0%,#56737f 40%,#4a6573 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.35)}
.bta-finder.is-open .bta-find::before{opacity:0}
.bta-finder.is-open .bta-find .chev{transform:rotate(180deg)}
.bta-find:focus-visible{outline:3px solid #2e6fa7;outline-offset:2px}
/* the drawer grows out of the bar: same silver, joined under it */
.bta-drawer{position:relative;z-index:1;margin:-28px 14px 0;padding-top:28px;border-radius:0 0 26px 26px;overflow:hidden;
  background:linear-gradient(180deg,#d4d7d7 0%,#dfe2e2 30%,#e4e6e6 100%);box-shadow:inset 0 -1px 0 rgba(20,40,52,.2),0 18px 30px -18px rgba(16,32,42,.45);
  max-height:0;opacity:0;transition:max-height .42s cubic-bezier(.3,.7,.2,1),opacity .25s ease}
.bta-drawer.is-open{max-height:420px;opacity:1}
.bta-drawer-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px 22px;padding:20px 24px 22px}
.bta-drawer .search{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:inset 0 2px 4px rgba(20,40,52,.12),0 1px 0 rgba(255,255,255,.8);margin:0}
.bta-drawer .search::before{display:none}
.bta-drawer .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:#1c3341;padding:14px 0}
.bta-drawer .search:focus-within{box-shadow:inset 0 2px 4px rgba(20,40,52,.12),0 0 0 3px #2e6fa7}
.bta-drawer .episode-discovery{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:14px;align-items:end;margin:0;padding:0;background:none;clip-path:none}
.bta-drawer .episode-discovery label{display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3b5361}
.bta-drawer .episode-discovery select{min-height:48px;padding:0 14px;border:0;border-radius:14px;font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:#1c3341;background:#fff;box-shadow:inset 0 2px 4px rgba(20,40,52,.10)}
.bta-drawer #episode-reset{min-height:48px;padding:0 18px;border:1px solid rgba(20,40,52,.25);border-radius:999px;background:transparent;font:inherit;font-size:15px;color:#1c3341;cursor:pointer}
@media(max-width:820px){
  .bta-find{flex-basis:100%;margin:6px 0 0}
  .bta-find::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
  .bta-drawer{margin:-22px 8px 0;padding-top:22px}
  .bta-drawer.is-open{max-height:560px}
  .bta-drawer .episode-discovery{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bta-drawer,.bta-find,.bta-find .chev{transition:none}}
.bta-find{min-width:250px}
@media(max-width:1180px){.tools.bta-tools{flex-wrap:wrap;border-radius:26px}.bta-tools .filters{width:100%}.bta-find{flex-basis:100%;margin:6px 0 0}.bta-find::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}}

/* "Find a topic" is now the slider's 4th pill (Daniel 2026-10-10); the bar is just the slider again. */
.tools.bta-tools{display:block;padding:0;background:none;box-shadow:none;border-radius:0}
.bta-tools .filters{width:auto!important}
.chip-find{display:inline-flex;align-items:center;gap:7px}
.chip-find svg{flex:0 0 auto}
.bta-drawer{margin:-26px 0 0;max-width:max-content;min-width:min(100%,640px)}
@media(max-width:820px){.bta-drawer{min-width:0;max-width:none;margin:-22px 0 0}}
.bta-drawer{margin-left:10px;margin-right:10px}
.bta-tools .filters{width:max-content!important;max-width:100%}

/* Full-width bar aligned to the card grid; the four pills share it evenly (Daniel 2026-10-10: "awkward width"). */
@media(min-width:821px){
  .bta-tools .filters{width:100%!important;max-width:none;display:flex!important}
  .bta-tools .filters>button{flex:1 1 0!important;justify-content:center!important;white-space:nowrap;min-width:0}
  .bta-drawer{max-width:none;min-width:0;margin-left:14px;margin-right:14px}
}
section.pod-hero.bta-color>.dio-field-pattern{display:none!important}

/* Keep full filter labels; visible phone arrows expose the horizontal rail. */
.dio-filter-scroll{display:none}
@media(max-width:820px){
 .dio-filter-rail{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
 .bta-tools .dio-filter-rail .filters{flex:1 1 0;width:0!important;min-width:0;max-width:none;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#8ca4b3 transparent}
 .dio-filter-scroll{display:flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:48px;border:1px solid #aebfc7;border-radius:12px;background:#e5e9e9;color:#203846;font:28px/1 var(--font);cursor:pointer}
 .dio-filter-scroll:disabled{opacity:.35;cursor:default}
 .dio-filter-scroll:focus-visible{outline:3px solid #203846;outline-offset:2px}
}
/* 2026-11-11 audit: the two square arrows took 100px from the phone rail, cut "Patient stories" mid-word and left one filter in view.
   The rail now has the full width and fades on the side that still hides filters (podcast.js sets data-more-left / data-more-right),
   the same cue as the Patient stories topic row. The padding keeps the capsule's shadow inside the mask. */
@media(max-width:820px){
 .dio-filter-scroll{display:none}
 .dio-filter-rail{padding-bottom:16px;margin-bottom:-16px}
 .dio-filter-rail[data-more-right]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent calc(100% - 4px));mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent calc(100% - 4px))}
 .dio-filter-rail[data-more-left]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent calc(100% - 4px));mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent calc(100% - 4px))}
 .dio-filter-rail[data-more-left][data-more-right]{-webkit-mask-image:linear-gradient(to right,transparent 4px,#000 64px,#000 calc(100% - 64px),transparent calc(100% - 4px));mask-image:linear-gradient(to right,transparent 4px,#000 64px,#000 calc(100% - 64px),transparent calc(100% - 4px))}
}

/* Search results (Daniel 2026-10-12): how often the searched subject comes up in the episode. */
.bta-hits{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(0,0,0,.18);color:var(--ink);width:max-content}
.episode-discovery{grid-template-columns:minmax(0,1fr) auto!important}