/* podsum — chips, pills, and stock cards */

.chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Sentiment */
.chip-bullish  { background: #1f6f43; color: #e8f7ee; }
.chip-bearish  { background: #8a2a2a; color: #fbe8e8; }
.chip-mixed    { background: #7a5d1f; color: #fbf3dc; }
.chip-neutral  { background: #4a4f57; color: #eceef1; }

/* Status (used both in list and detail) */
.chip-status-ready        { background: #1f6f43; color: #e8f7ee; }
.chip-status-failed       { background: #8a2a2a; color: #fbe8e8; }
.chip-status-summarizing  { background: #2c5d8a; color: #e3eef9; }
.chip-status-transcribing { background: #2c5d8a; color: #e3eef9; }
.chip-status-discovered   { background: #4a4f57; color: #eceef1; }

/* Transcript-source chips: which cascade stage produced the transcript.
   Color-coded by cost: cheap → expensive (RSS free → ASR compute-heavy). */
.chip-source-rss          { background: #2a5a7a; color: #e3eef9; }   /* blue   — free RSS tag */
.chip-source-youtube      { background: #a8390a; color: #ffe6d5; }   /* orange — yt-dlp captions */
.chip-source-thirdparty   { background: #6a3aa6; color: #efe1ff; }   /* purple — site scrape */
.chip-source-asr          { background: #c93c3c; color: #ffe1e1; }   /* red    — compute-heavy */

.chip-pick {
  margin-left: 0.4rem;
  background: #c9a227;
  color: #1f1306;
}

.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.stock-card {
  border: 1px solid var(--pico-muted-border-color, #2c333d);
  border-radius: 0.6rem;
  padding: 1rem;
  background: var(--pico-card-background-color, #181c22);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stock-card.is-pick {
  border-color: #c9a227;
  box-shadow: 0 0 0 1px #c9a22755 inset;
}

.stock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stock-ticker {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stock-company {
  color: var(--pico-muted-color, #98a2af);
  font-size: 0.85rem;
}

.stock-quote {
  font-style: italic;
  color: var(--pico-muted-color, #98a2af);
  border-left: 2px solid var(--pico-muted-border-color, #2c333d);
  padding-left: 0.6rem;
  margin: 0;
}

.stock-links {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.stock-links a {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--pico-muted-border-color, #2c333d);
  font-size: 0.85rem;
  text-decoration: none;
}

.muted { color: var(--pico-muted-color, #98a2af); }

.filter-row {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filter-row > * { margin: 0; }
.filter-row label { display: block; font-size: 0.85rem; }

.detail-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--pico-muted-color, #98a2af);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Usage dashboard */
.usage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.usage-cards article {
  margin: 0;
  padding: 0.85rem 1rem;
}
.usage-cards article header {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.usage-cards article strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0.25rem 0;
}
.usage-cards article small {
  font-size: 0.75rem;
}

.usage-chart {
  margin-top: 0.5rem;
  overflow-x: auto;
}
.usage-chart svg { display: block; max-width: 100%; }

.usage-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--pico-muted-color, #98a2af);
}
.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.usage-banner {
  border-left: 3px solid #c9a227;
  background: #2a2310;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.usage-purpose-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.usage-purpose-strip article {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px dashed var(--pico-muted-border-color, #2c333d);
  background: transparent;
}
.usage-purpose-strip article header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.usage-purpose-strip article strong {
  display: block;
  font-size: 1rem;
  margin: 0.15rem 0;
}
.usage-purpose-strip article small {
  font-size: 0.72rem;
  display: block;
}

/* Star button — neutral idle, gold when active. Used on /stocks list (compact)
   and /stocks/{ticker} detail (with label). */
.star-btn {
  background: transparent;
  border: 1px solid var(--pico-muted-border-color, #2c333d);
  color: var(--pico-muted-color, #98a0aa);
  padding: 0.15rem 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
  transition: color 80ms ease, border-color 80ms ease;
}
.star-btn:hover {
  color: #d8a73b;
  border-color: #d8a73b;
}
.star-btn-on {
  color: #d8a73b;
  border-color: #d8a73b;
}

/* Floating feedback widget — `<details>` element so open/close needs no JS.
   Sits in the bottom-right of every page; the popover panel grows up-and-
   to-the-left when opened. */
.feedback-fab {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--pico-card-background-color, #1c2028);
  border: 1px solid var(--pico-muted-border-color, #3a4150);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
  max-width: 320px;
}
.feedback-fab summary.feedback-fab-handle {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0.85rem;
  user-select: none;
  color: var(--pico-color, #d6dae0);
}
.feedback-fab summary.feedback-fab-handle::-webkit-details-marker {
  display: none;
}
.feedback-fab summary.feedback-fab-handle:hover {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.feedback-fab[open] {
  width: 320px;
}
.feedback-fab[open] summary.feedback-fab-handle {
  border-bottom: 1px solid var(--pico-muted-border-color, #3a4150);
}
.feedback-fab-panel {
  padding: 0.7rem 0.85rem;
}
.feedback-fab textarea {
  resize: vertical;
}

/* Mark-listened toggle. Same pattern as .star-btn — neutral idle, accent on. */
.listened-btn {
  background: transparent;
  border: 1px solid var(--pico-muted-border-color, #2c333d);
  color: var(--pico-muted-color, #98a0aa);
  padding: 0.15rem 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
  transition: color 80ms ease, border-color 80ms ease;
}
.listened-btn:hover {
  color: #4a8db8;
  border-color: #4a8db8;
}
.listened-btn-on {
  color: #4a8db8;
  border-color: #4a8db8;
}