/* Task 1.60 §8: minimal favourite-button/panel styling - tokens only,
   no new colours/spacing/radii (CLAUDE.md "Never hard-code a color/
   space/radius value").
 *
 * Task 1.72A: redesigned as an always-yellow-accented "like" button with
 * a raised 3D edge - Yellow is the Design System's scarce priority-action
 * accent (CLAUDE.md "Locked palette"), and a favourite toggle is exactly
 * that kind of priority/selected action. Text/icon stay the normal
 * legible --color-text-primary at rest (small yellow text on a light
 * surface fails contrast, which is also why --color-primary itself never
 * resolves to yellow in light theme - see tokens.css) - yellow is used as
 * the border accent at rest, then as a full navy-on-yellow fill on hover
 * and once favourited, which is legible in both themes since
 * --color-accent/--color-accent-contrast/--color-accent-hover/--shadow-3d
 * are all theme-invariant tokens (no [data-theme="dark"] override needed
 * here). Every interactive state restates its own color/background
 * explicitly - never relying on winning the cascade fight against
 * Bootstrap's own higher-specificity .btn:hover (see the .btn-ghost:hover
 * comment in components.css for the full history of this exact bug). The
 * raised-edge box-shadow and its :active collapse are now the global
 * .btn/.btn:active rule (components.css, every button site-wide) -
 * .favourite-button only ever needed to override border/background/color,
 * never box-shadow/transform, so nothing button-3D-specific is restated
 * here any more. */

.favourite-button-form {
  margin-left: auto;
}

.favourite-button {
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.favourite-button:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
  text-decoration: none;
}

.favourite-button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.favourite-button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--color-accent-hover);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent-hover);
}

.favourites-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.favourites-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.favourites-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.favourites-panel__row:last-child {
  border-bottom: none;
}

/* Task 1.72A V2 (Stage 11): `templates/slips/saved_slip_detail.html`
   applies this class to the one selection blocking a saved slip's
   combined-odds calculation, but no rule ever styled it - the row was
   visually identical to any other, undermining its own "blocking
   combined odds" text. Same established treatment as the active
   Prediction Slip's own equivalent indicator
   (`.prediction-slip__row--blocking`, prediction-slip.css): a left
   accent border only, never color alone (WCAG 2.1 AA) - the row's own
   text already states the reason in words. `padding-left` gives the
   border room to breathe, since (unlike that other row) this one has no
   horizontal padding of its own to begin with. */
.favourites-panel__row--blocking {
  border-left: 3px solid var(--color-warning);
  padding-left: var(--space-8);
}