/* feed.css — the Ideas feed (RR.feed).
   A scrollable feed of coaching inspiration. Built ONLY on the semantic tokens in
   styles.css (+ the fixed intensity hues --i-easy/mid/hard/taper, which always
   carry navy text), so every card reads correctly in BOTH light and dark. Cards
   are flat (no nested cards); every control is a real button/link, so the global
   :focus-visible ring applies for free. Honors prefers-reduced-motion. */

/* ---------- Header bits ------------------------------------------------------ */
.feed-intro { margin: 0 0 var(--sp-2); }

/* The quiet escape hatch to the classic planner + timer (#today). */
.feed-planner-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 var(--sp-4);
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.feed-planner-link:hover { text-decoration: underline; }
.feed-planner-link__arrow { font-weight: 800; }

/* Age picker — reuses the app's .age-picker + .input (identical to the Tips
   screen). Sits directly under the intro as the feed's primary control. */
.feed-age { margin: 0 0 var(--sp-4); }

/* ---------- Filter chip bar (reuses .drills-filters* + .chip from css) ------- */
.feed-filters-wrap { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.feed-chip-panel { margin-top: var(--sp-1); }
.feed-clear {
  align-self: flex-start;
  min-height: var(--tap-min);
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--link);
  font: 600 var(--fs-sm) var(--font-stack);
  cursor: pointer;
}
.feed-clear:hover { text-decoration: underline; }

/* ---------- The feed list ---------------------------------------------------- */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Base feed card: the shared .card chrome + a coloured left "spine" that makes
   each item type instantly recognizable. The drill spotlight keeps the Drills
   card look (styled in drills.css) and gets a spine here too, for consistency. */
.feed-card { border-left: 4px solid var(--line); }
.feed-card--idea      { border-left-color: var(--i-hard); }   /* coral  */
.feed-card--tip       { border-left-color: var(--i-easy); }   /* teal   */
.feed-card--challenge { border-left-color: var(--i-mid); }    /* sun    */
.feed-card--mindset   { border-left-color: var(--i-taper); }  /* purple */
.feed-card--theme     { border-left-color: var(--primary); }
.feed-list > .drill-card-wrap .drill-card { border-left: 4px solid var(--accent); }

/* ---------- Card meta row (kind chip + vibe + theme tag + minutes) ----------- */
.feed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.feed-kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font: 800 var(--fs-xs) var(--font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);   /* navy on the fixed intensity hues clears AA in both themes */
}
.feed-kind--idea      { background: var(--i-hard); }
.feed-kind--tip       { background: var(--i-easy); }
.feed-kind--challenge { background: var(--i-mid); }
.feed-kind--mindset   { background: var(--i-taper); }
.feed-kind--theme     { background: var(--primary-tint); color: var(--text); }
.feed-vibe {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font: 600 var(--fs-xs) var(--font-stack);
}
.feed-tag { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.feed-mins {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ---------- Card body -------------------------------------------------------- */
.feed-card__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
.feed-card__goal,
.feed-card__body { margin: var(--sp-1) 0 var(--sp-3); color: var(--text); }
.feed-card__body { color: var(--text-muted); }

/* Mini-flow block list: role · drill name · minutes. */
.feed-flow { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-flow__row {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr auto;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-input);
}
.feed-flow__role {
  font: 800 var(--fs-xs) var(--font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.feed-flow__name { color: var(--text); font-weight: 600; }
.feed-flow__min { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* One-line tip "hook" that links to the Tips tab. */
.feed-tiphook {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sp-3);
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.feed-tiphook:hover { text-decoration: underline; }
.feed-tiphook__icon { display: inline-flex; color: var(--accent); }

/* Collapsible "how to run it". */
.feed-steps__wrap { margin: 0 0 var(--sp-3); }
.feed-steps__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--link);
  font: 600 var(--fs-sm) var(--font-stack);
  cursor: pointer;
}
.feed-steps__chev { display: inline-flex; transition: transform 0.15s var(--ease); }
.feed-steps__chev.is-open { transform: rotate(180deg); }
.feed-steps { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-3); }
.feed-steps[hidden] { display: none; }
.feed-steps__block { display: flex; flex-direction: column; gap: 4px; }
.feed-steps__list { margin: 0; padding-left: 1.25em; color: var(--text); }
.feed-steps__list li { margin: 2px 0; }

/* ---------- Card footer (Save / Share / Print, or links) --------------------- */
.feed-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
/* The save heart. Outline when off, coral fill when on. */
.feed-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: auto;          /* push the heart to the trailing edge */
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.feed-save:hover { background: var(--overlay); }
.feed-save.is-on { color: var(--primary); }
/* When the heart follows the Share/Print buttons (the idea card), keep it part
   of that group rather than flung to the trailing edge: the auto margin orphans
   it to the far-right corner the instant the row is too tight to fit all three
   and the heart wraps to its own line. The footer's gap handles the spacing. */
.feed-act ~ .feed-save { margin-left: 0; }
/* Share / Print use the shared .btn .btn-ghost; only layout differs here. */
.feed-act { flex: 0 0 auto; }
/* "Open in Tips →" text link in the tip-card footer. */
.feed-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--link);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.feed-link:hover { text-decoration: underline; }

/* ---------- Tip card --------------------------------------------------------- */
.feed-tip__link { display: block; color: inherit; text-decoration: none; }
.feed-tip__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.feed-tip__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--accent);
}
.feed-tip__head .feed-card__title { margin: 0; }
.feed-tip__points { margin: 0; padding-left: 1.2em; color: var(--text-muted); }
.feed-tip__points li { margin: 3px 0; }
.feed-tip__link:hover .feed-card__title { text-decoration: underline; }

/* ---------- Theme card ------------------------------------------------------- */
/* "See ideas" uses the shared .btn .btn-ghost; only its placement differs. */
.feed-theme__cta { align-self: flex-start; }

/* ---------- "More ideas" button ---------------------------------------------- */
/* Uses the shared .btn .btn-ghost; centred under the feed with a spinning glyph. */
.feed-more { align-self: center; margin: var(--sp-5) auto 0; }
.feed-more__icon { transition: transform 0.4s var(--ease); }
.feed-more:hover .feed-more__icon { transform: rotate(180deg); }

/* ---------- Inline drill detail (opened from a spotlight) -------------------- */
.feed-detail-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.feed-back { align-self: flex-start; }
.feed-back__icon { display: inline-flex; }

/* ---------- The Ideas deck (js/feed-deck.js) --------------------------------- */
/* One card at a time. The stage owns the swipe gesture: touch-action keeps
   vertical panning with the browser (cards can be tall), while horizontal
   drags move the card via inline transforms written by JS. */
.deck { display: flex; flex-direction: column; gap: var(--sp-3); }

.deck-stage { touch-action: pan-y; }
.deck-card { position: relative; }
.deck-stage--dragging .deck-card {
  transition: none;
  will-change: transform;
  cursor: grabbing;
  user-select: none;
}

/* Swipe hints, faded in by drag distance (opacity written inline by JS). */
.deck-hint {
  position: absolute;
  top: var(--sp-3);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 2px solid currentColor;
  font: 800 var(--fs-sm) var(--font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface);
  opacity: 0;
  pointer-events: none;
}
.deck-hint--save { right: var(--sp-3); color: var(--primary); transform: rotate(6deg); }
.deck-hint--skip { left: var(--sp-3); color: var(--text-muted); transform: rotate(-6deg); }

/* Progress: digits for the eye; .deck-sr carries the spoken version. */
.deck-progress {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font: 700 var(--fs-sm) var(--font-stack);
  letter-spacing: 0.05em;
}
.deck-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* Back / ✗ Skip / ♥ Save. Save is the headline action (biggest thumb target). */
.deck-controls { display: flex; gap: var(--sp-2); }
.deck-btn { min-height: var(--tap-min); }
.deck-btn--skip { flex: 1; }
.deck-btn--save { flex: 1.4; }
.deck-swipe-tip {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* End-of-deck card: stacked full-width actions. */
.deck-end__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.deck-end__actions .btn { width: 100%; }

/* Footer escape hatches (the browse link reuses the planner-link look). */
.deck-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.deck-footer .feed-planner-link { margin: 0; }

/* The browse view's way back to the deck. */
.feed-deck-return { margin: 0 0 var(--sp-3); }

/* Motion: snap-back after an under-threshold drag, the off-screen fling on a
   commit, and a small slide-in for each fresh card — all gated so reduced
   motion gets instant, animation-free flips. */
@media (prefers-reduced-motion: no-preference) {
  .deck-stage:not(.deck-stage--dragging) .deck-card {
    transition: transform 0.2s var(--ease);
  }
  .deck-card--fling {
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease) !important;
  }
  .deck-stage:not(.deck-stage--dragging) .deck-hint { transition: opacity 0.2s var(--ease); }
  @keyframes deck-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .deck-stage .deck-card { animation: deck-in 0.18s var(--ease); }
}

/* ---------- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .feed-steps__chev,
  .feed-more__icon { transition: none; transform: none; }
  .deck-card,
  .deck-card--fling,
  .deck-hint { transition: none !important; animation: none !important; }
}