/* ===========================
   Soundbites Embed Styles
   (borderless Listen/Vote buttons)
   =========================== */

:root{
  --bg:#f7f7f8;
  --panel:#ffffff;
  --border:#e8e8ea;
  --text:#101113;
  --muted:#61646b;
  --shadow:0 6px 16px rgba(16,17,19,.06);
  --radius:16px;

  /* Buttons */
  --btn-bg:#fff;
  --btn-hover:#f7f8fa;
  --btn-ring:#5b9dd9;
}

/* container */
#embed{
  max-width:820px;
  margin:0 auto;
  padding:12px 0 48px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-tap-highlight-color:transparent;
}

/* sticky header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(8px);background:rgba(247,247,248,.9);border-bottom:1px solid rgba(0,0,0,.04);}
.inner{max-width:820px;margin:0 auto;padding:12px 16px 10px;}
.h1{margin:0 0 8px;font-size:clamp(20px,3.6vw,28px);font-weight:800;letter-spacing:-.01em;}
.top-cta{margin:8px 0 6px;}
@media (max-width:640px){.top-cta{margin:6px 0 6px;}}
.sub{display:flex;justify-content:flex-end;padding-top:4px;}

/* spacing below header */
.list{list-style:none;margin:0;padding:0 16px;}
.list li:first-child{margin-top:28px;}
.list li+li{margin-top:28px;}
.header-spacer{height:12px;}

/* pills */
.pillbar{display:inline-flex;gap:8px;background:#f0f1f3;padding:5px;border-radius:999px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.pill{display:inline-block;font-size:12px;line-height:1;padding:8px 12px;border-radius:999px;text-decoration:none;color:#2f3238;background:transparent;border:1px solid transparent;}
.pill+.pill{margin-left:8px;}
.pill.active{color:#101113;background:#fff;border-color:#dcdde1;}
.pill:focus-visible{outline:2px solid var(--btn-ring);outline-offset:2px;}

/* cards */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.header{display:flex;align-items:center;gap:14px;}
.title{display:inline-flex;align-items:center;font-weight:800;font-size:clamp(15px,2.6vw,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:72%;}

/* badges */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 8px;border-radius:999px;vertical-align:middle;border:1px solid transparent;margin-left:8px;}
.chip--ok{background:#e6f7ee;color:#0b6;border:1px solid #cdeee0;}
.chip--muted{background:#f2f2f2;color:#666;border:1px solid #e6e6e6;}

/* transcript + actions row */
.transcript{margin:12px 0 14px;color:#30343a;font-size:clamp(14px,2.7vw,16px);}
.actions{display:flex;justify-content:space-between;align-items:center;gap:10px;}

/* ---------------------------------------------
   BUTTONS (Listen + Vote): baseline (no borders)
   --------------------------------------------- */

/* reset native look that can add borders (Safari/iOS) */
.open,.btn-listen,.vote-btn{ -webkit-appearance:none; appearance:none; }

/* baseline visuals */
.open,.btn-listen,.vote-btn{
  background:var(--btn-bg);
  border:0;
  box-shadow:none;
  border-radius:10px;
  padding:8px 12px;
  line-height:1;
  color:inherit;
  cursor:pointer;
  transition:background .15s ease, transform .02s ease;
}

/* place the Listen button at the end of the header row */
.open,.btn-listen{ margin-left:auto; font-size:12px; text-decoration:none; }

/* vote row layout */
.actions .vote,.vote{display:flex;gap:10px;}
.vote-btn{display:inline-flex;align-items:center;gap:8px;}

/* hovers / focus / disabled */
.open:hover,.btn-listen:hover,.vote-btn:hover{ background:var(--btn-hover); }
.open:focus-visible,.btn-listen:focus-visible,.vote-btn:focus-visible{ outline:2px solid var(--btn-ring); outline-offset:2px; }
.vote-btn[disabled],.open[disabled],.btn-listen[disabled]{ opacity:.6; cursor:not-allowed; }

/* inline player */
.player{margin-top:12px;padding-top:10px;border-top:1px solid #eee;}
.player .dl{margin-top:8px;}
.player .dl a{font-size:12px;color:#2f66ff;text-decoration:underline;}
.player .tx{margin-top:12px;line-height:1.6;color:#2a2a2a;}
.player-msg{margin-top:8px;color:#666;font-size:14px;}

/* states */
.error{color:#b00020;padding:12px;background:#fff3f3;border:1px solid #ffd6d6;border-radius:12px;}
.loading{padding:28px 8px;text-align:center;color:#666;}
.empty{padding:24px 16px;color:#61646b;}

/* mobile tweaks */
@media (max-width:640px){
  .list{padding:8px 12px 16px;}
  .card{padding:14px;border-radius:14px;}
  .title{max-width:68%;}
  .open,.btn-listen{padding:8px 12px;}
}

/* =========================================================
   NUCLEAR RESET — Listen/Vote ABSOLUTELY BORDERLESS
   (wins against UA styles and any earlier rules)
   ========================================================= */

:root { --btn-ring: #5b9dd9; }

/* Reset + rebuild the buttons */
.open, .btn-listen, .vote-btn,
button.open, button.btn-listen, button.vote-btn {
  all: unset !important;                 /* wipe UA & previous rules */
  -webkit-appearance: none !important;   /* Safari/iOS */
  appearance: none !important;

  /* re-apply only what we want */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  color: inherit !important;
  text-decoration: none !important;

  /* kill every stroke variant */
  border: 0 !important;
  border-color: transparent !important;
  border-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-image: none !important;
  filter: none !important;
}

/* Generic guard in case a plain <button> sneaks in */
.card button {
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Hover, active, focus (no borders) */
.open:hover, .btn-listen:hover, .vote-btn:hover { background: #f7f8fa !important; }
.open:active, .btn-listen:active, .vote-btn:active { transform: translateY(.5px); }
.open:focus-visible, .btn-listen:focus-visible, .vote-btn:focus-visible {
  outline: 2px solid var(--btn-ring) !important;
  outline-offset: 2px !important;
}

/* Firefox’s inner focus ring adds a tiny border/padding by default */
button::-moz-focus-inner,
.open::-moz-focus-inner,
.btn-listen::-moz-focus-inner,
.vote-btn::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* little numeric nicety */
.tabular-nums{ font-variant-numeric: tabular-nums; }

/* =========================================================
   GOLD "Listen" PILL — borderless, specific to header button
   (placed at the end to override generic reset/hover)
   ========================================================= */

:root{
  --gold:#FBBC56;
  --gold-hover:#f3a846; /* slight darken on hover */
}

/* target the Listen control in each card header only */
.card .header .open,
.card .header .btn-listen{
  background:var(--gold) !important;
  color:#101113 !important;        /* contrast on gold */
  border-radius:999px !important;  /* pill shape */
  padding:8px 14px !important;     /* a little wider */
  font-weight:700 !important;
  text-decoration:none !important;
}

/* hover/active (still borderless) */
.card .header .open:hover,
.card .header .btn-listen:hover{
  background:var(--gold-hover) !important;
}
.card .header .open:active,
.card .header .btn-listen:active{
  transform:translateY(.5px);
}