/* Pick Winner — Honest Record
 *
 * Layers on top of horses_to_watch_honest_record.css (shared chip
 * vocab: won-flag / placed-flag / pos / pending) and race_paper_
 * honest_record.css (row layout: meta / pick / result / verify).
 *
 * Only page-specific tweaks live here.
 */

/* Primary pick sub-highlight — a subtle outline on rank 1 so the
 * "load-bearing" selection is spotable at a glance. The row tint
 * already conveys the overall result; this adds a second layer of
 * scannability for the reader who wants to know how the PRIMARY
 * (not just any-of-4) did on the day. */
.rp-hr__slot.pw-hr__slot--primary {
  outline: 2px solid rgba(139, 90, 43, 0.35);
  outline-offset: -1px;
}

/* Conviction line — the middle column doesn't carry a horse
 * (that's now in the top-4 strip), so we just show confidence +
 * advised price + SP. Keep the label + line the same visual weight
 * as papers' pick line for consistency. */
.pw-hr__conviction-line {
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 6px;
}

/* Slot body — stacks the horse name on top of the price line so a
 * long horse name doesn't compete with the price for horizontal
 * space. Grid area 2 of the .rp-hr__slot (which is a 3-col grid:
 * rank / body / finish-chip). */
.pw-hr__slot-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Price line — advised at pick time on the left, SP for winners on
 * the right. Muted so the horse name still reads as the primary
 * asset; SP tinted gold to signal "this is what settled". */
.pw-hr__slot-prices {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #6a6a72;
}

.pw-hr__slot-advised {
  font-weight: 600;
}

.pw-hr__slot-sp {
  color: #7a5a10;
  font-weight: 800;
  padding: 1px 6px;
  background: rgba(212, 175, 55, 0.14);
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* ── Date filter bar ──────────────────────────────────────────
 *
 * Pills + native <input type="date"> on the same row. Wraps to
 * multiple lines on narrow viewports. Active pill uses the site's
 * navy for maximum contrast; hover subtle. Native date picker
 * inherits the browser's UI which is a WIN on mobile (system
 * picker beats any bespoke one for touch).
 */

.pw-hr__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
  padding: 12px 14px;
  background: #fbf8f0;
  border: 1px solid #e3ddd0;
  border-radius: 6px;
}

.pw-hr__filter-label {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b5a2b;
  margin-right: 4px;
}

.pw-hr__pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #e3ddd0;
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a4a52;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
  white-space: nowrap;
}

.pw-hr__pill:hover {
  background: #f5efdf;
  border-color: #c8bfa8;
  color: #17171a;
}

.pw-hr__pill.is-active {
  background: #0b1e39;    /* honest-record navy */
  color: #f5e9c5;
  border-color: #0b1e39;
  cursor: default;
  pointer-events: none;
}

/* Date-picker form — sits on the right on desktop, wraps below
 * the pills on mobile. Native input for zero JS + first-class
 * mobile date wheel. */
.pw-hr__date-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pw-hr__date-lbl {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a6a72;
}

.pw-hr__date-input {
  padding: 6px 10px;
  border: 1px solid #c8bfa8;
  border-radius: 5px;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  color: #17171a;
  background: #fff;
  min-width: 130px;
}

.pw-hr__date-input:focus-visible {
  outline: 2px solid #8b5a2b;
  outline-offset: 1px;
  border-color: #8b5a2b;
}

.pw-hr__date-btn {
  padding: 6px 14px;
  background: #8b5a2b;
  color: #fff;
  border: 1px solid #8b5a2b;
  border-radius: 5px;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.pw-hr__date-btn:hover { background: #6a4520; border-color: #6a4520; }

@media (max-width: 640px) {
  .pw-hr__filters {
    padding: 12px;
    gap: 6px;
  }
  .pw-hr__pill {
    padding: 6px 11px;
    font-size: 12px;
  }
  .pw-hr__date-form {
    margin-left: 0;
    flex-basis: 100%;
    padding-top: 8px;
    border-top: 1px solid #e3ddd0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .pw-hr__date-input { min-width: 0; flex: 1 1 auto; }
}