/* ---------------------------------------------------------------------
   MyDeals — site styles, layered on top of Pico.css

   Pico is "classless": it styles plain semantic HTML (h1, table, form,
   article…) with no classes needed. This file only adds the bits Pico
   can't know about — our deal cards, thumbnails, and progress log.

   DESIGN TOKENS
   Everything below references a token, never a raw value. Change a token
   here and it propagates across the whole site — this is how a design
   system stays consistent (and how a company rebrands in one commit).
   --------------------------------------------------------------------- */
:root {
  --thumb-size: 64px;
  --thumb-radius: 6px;
  --card-gap: 1rem;
  --price-color: #1f8b4c;
  --was-price-color: #8a8a8a;
  --progress-color: #6b7280;
}

/* Pico auto-switches to dark mode; re-point our tokens so they follow. */
@media (prefers-color-scheme: dark) {
  :root {
    --price-color: #4ade80;
    --was-price-color: #9aa0a6;
    --progress-color: #9aa0a6;
  }
}

/* --- collection controls (Reload button + freshness line) ------------ */
#collect {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  flex-wrap: wrap;
  margin-bottom: var(--card-gap);
}

#collect button {
  width: auto;
  margin: 0;
}

#status-text {
  color: var(--progress-color);
}

/* --- search form ---------------------------------------------------- */
#search {
  margin-bottom: var(--card-gap);
}

/* --- live progress log (streams in while the AI search runs) --------- */
#progress {
  color: var(--progress-color);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* --- deal cards (Pico already renders <article> as a card for us) ---- */
.deal {
  display: flex;
  gap: var(--card-gap);
  align-items: flex-start;
}

.deal img {
  flex: 0 0 var(--thumb-size);
  width: var(--thumb-size);
  height: var(--thumb-size);
  object-fit: cover;
  border-radius: var(--thumb-radius);
}

.deal-body {
  flex: 1;
  min-width: 0;
}

.deal-reason {
  color: var(--progress-color);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* --- prices --------------------------------------------------------- */
.price {
  color: var(--price-color);
  font-weight: 600;
}

.was-price {
  color: var(--was-price-color);
  text-decoration: line-through;
  margin-left: 0.35rem;
  font-weight: 400;
}

/* --- coupon / terms badge ------------------------------------------- */
/* Many deals need a code or a "clip coupon" step to reach the price. When the
   link jumps straight to the retailer (techbargains does), this is the only
   place the user learns how the price is actually obtained. */
.deal-terms {
  display: inline-block;
  color: var(--price-color);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* A softer, non-committal note (vs. the confident green coupon badge) — used
   when we can't see the coupon and are only warning the price may need one. */
.deal-hint {
  display: inline-block;
  color: var(--progress-color);
  font-size: 0.8125rem;
}

/* --- deal table ----------------------------------------------------- */
table img {
  width: var(--thumb-size);
  height: var(--thumb-size);
  object-fit: cover;
  border-radius: var(--thumb-radius);
}

/* --- Ask agent: the ReAct thinking trace + answer card -------------- */
/* The trace makes the loop visible — each step the agent reasons, acts,
   and observes. Monospace + a left rule reads as "machine thinking". */
#ask-trace {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  margin: 0.5rem 0;
}
#ask-trace > div {
  padding: 0.15rem 0 0.15rem 0.75rem;
  border-left: 2px solid var(--progress-color);
}
#ask-trace .think { color: var(--progress-color); }
#ask-trace .act   { color: var(--price-color); font-weight: 600; }
#ask-trace .obs   { color: var(--was-price-color); }
#ask-trace .err   { color: #c0392b; }

.answer {
  border-left: 3px solid var(--price-color);
}
.answer p:first-child {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0;
}
.ans-deal {
  padding: 0.35rem 0;
  border-top: 1px solid var(--progress-color);
}

/* --- Reviews: the "should I buy this?" verdict card ------------------- */
/* Pros / cons / watch-outs. Colour carries the meaning at a glance, but each
   point is still text — the verdict is a synthesis of retrieved reviews, never
   a rating we invented. */
.answer h4 {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.9rem;
}
.deal-pros, .deal-cons, .deal-watch {
  margin: 0 0 0.3rem;
  padding-left: 1.1rem;
}
.deal-pros li { color: #1e8449; }
.deal-cons li { color: #c0392b; }
.deal-watch li { color: var(--price-color); }
.deal-pros li, .deal-cons li, .deal-watch li {
  margin: 0.1rem 0;
}
/* The citations under a verdict: what it was actually grounded in. Deliberately
   plain and always shown, so "0 sources" reads as loudly as ten. */
.review-sources {
  margin: 0.2rem 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
}
.review-sources li { margin: 0.15rem 0; }