/* tips.css — styles for the Tips / coaching screen (renderTips).
   Split out of styles.css to keep every file under 800 lines. Uses ONLY the
   semantic tokens defined in styles.css, so the screen renders correctly in
   BOTH light and dark themes; the disclosures reuse the app's :focus-visible
   ring and respect prefers-reduced-motion. No nested cards. */

/* Intro line under the screen title — full --text (not muted) since it sits on
   --bg, where muted text would miss AA. */
.tips-intro {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  color: var(--text);
}

/* ---- Dropdown pickers (age group + jump-to-position) --------------------- */
/* A labelled select that sits on its own row inside the top cards, so the
   coach can browse any age band's notes or jump straight to a role's guide. */
.age-picker,
.pos-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-4);
}
.age-picker > .eyebrow,
.pos-picker > .eyebrow { display: block; }
.age-select,
.pos-select { width: 100%; }
.age-ref { margin-top: var(--sp-2); }

/* ---- Category section headings (group the larger tip library) ------------ */
/* A light divider-style header that splits the accordion into themed sections
   so the screen reads as a tidy set of groups, not one endless list. */
.tips-cat {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tips-cat:first-of-type { margin-top: var(--sp-2); border-top: none; padding-top: 0; }

/* ---- Top age card: guidance + reference ---------------------------------- */
.age-guide__text {
  margin: 0 0 var(--sp-4);
  color: var(--text);
}
/* The league caveat under the reference grid. .muted carries the colour; this
   only handles spacing/size. */
.ref-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}

/* All-bands fallback table (shown until a team is set up). */
.ref-rows { margin-top: var(--sp-2); }
.ref-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.ref-row:last-child { border-bottom: none; }
.ref-row__band { font-weight: 700; color: var(--text); }
.ref-row__spec { color: var(--text-muted); text-align: right; }
.tips-setup-link { margin-top: var(--sp-4); }

/* ---- Disclosure (accordion) tip cards ------------------------------------ */
/* The card itself carries no padding; the toggle and panel own their spacing,
   so the clickable header fills the whole card width. */
.tip { padding: 0; overflow: hidden; }

.tip__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-4) var(--sp-5);
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

/* Icon chip — tinted brand fill with full-contrast --text glyph (navy on light
   coral / near-white on dark coral both clear the 3:1 icon bar). */
.tip__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--text);
}
.tip__title { flex: 1 1 auto; min-width: 0; }
.tip__chev {
  flex: none;
  display: inline-flex;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}
.tip__chev.is-open { transform: rotate(180deg); }

.tip__panel { padding: 0 var(--sp-5) var(--sp-5); }
.tip__panel[hidden] { display: none; }

/* Bullet points — custom coral marker so meaning never rests on the dot alone
   (the text is the content); --text on --surface passes AA in both themes. */
.tip__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tip__points li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--text);
}
.tip__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--focus);   /* deepened coral: clears 3:1 on the card in both themes */
}

/* ---- Terms glossary (definition list) ------------------------------------ */
.terms { margin: 0; }
.terms dt {
  font-weight: 800;
  color: var(--text);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.terms dt:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.terms dt.has-glyph { display: flex; align-items: center; gap: var(--sp-2); }
.terms dd {
  margin: 2px 0 0;
  color: var(--text-muted);   /* AA on --surface in both themes */
}
.terms dt.has-glyph + dd { padding-left: calc(44px + var(--sp-2)); }

/* Tiny schematic glossary glyphs (RR.termGlyphs). Same brand tokens as the
 * court diagrams, so a glyph reads the same in light AND dark. */
.terms__defs { display: none; }
.term-glyph { flex: none; display: inline-flex; }
.term-glyph .tg { width: 44px; height: 37px; display: block; }
.tg-court { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1; }
.tg-net  { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 2 2; fill: none; }
.tg-line { stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 2 2; fill: none; }
.tg-rod  { stroke: var(--text); stroke-width: 1.6; }
.tg-arr  { stroke: var(--coral); stroke-width: 1.9; fill: none; stroke-linecap: round; }
.tg-ah-fill { fill: var(--coral); }
.tg-foot { fill: var(--text-muted); opacity: 0.5; }
.tg-a { fill: var(--coral); }
.tg-b { fill: var(--teal); }
.tg-n { fill: var(--slate); }
.tg-ball-face { fill: var(--white); stroke: var(--navy); stroke-width: 1; }
.tg-ball-seam { fill: none; stroke: var(--navy); stroke-width: 0.8; }

/* ---- Equipment list ------------------------------------------------------- */
.equip-group { margin-top: var(--sp-5); }
.equip-group:first-child { margin-top: 0; }
.equip-list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.equip-list li { color: var(--text-muted); }
.equip-list li strong { color: var(--text); font-weight: 700; }

/* ---- Motion: gentle expand, disabled under reduced-motion ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .tip__panel:not([hidden]) { animation: tip-open 0.22s var(--ease) both; }
  @keyframes tip-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Romanian <-> English terms reference (Tips screen). The pair list itself is
   marked data-no-i18n so the translator leaves the English column intact. */
.rr-terms__intro { margin: 0 0 var(--sp-3); }
.rr-bi { list-style: none; margin: 0; padding: 0; }
.rr-bi__row {
  padding: var(--sp-2) 0;
  border-bottom: var(--border-w) solid var(--line);
}
.rr-bi__row:last-child { border-bottom: none; }
.rr-bi__pair {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.rr-bi__ro { font-weight: 700; color: var(--text); }
.rr-bi__arrow { color: var(--text-muted); opacity: 0.7; }
.rr-bi__en { color: var(--text-muted); }
.rr-bi__note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Read-aloud (TTS): per-card Listen button + its speed popup ----------- */
/* The card header lays the toggle and the Listen control side by side. The
   toggle gets min-width:0 so a long title shrinks/wraps instead of shoving the
   speaker off the right edge of the card; the Listen control never shrinks. */
.tip__head { display: flex; align-items: stretch; }
.tip__head .tip__toggle { flex: 1 1 auto; min-width: 0; }

/* Right cluster of a card head (e.g. the age card): band pill + Listen speaker,
   kept together and anchored to the card's right edge. */
.card-head__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* The age card pairs a long title ("For your age group") with a wide right
   cluster (the band pill + the Listen speaker). On a narrow phone the two can't
   share one row: the title gets crushed to a sliver and the Listen pill spills
   off the card edge. Let the head wrap so the right cluster drops onto its own
   row beneath the title when space is tight, while staying side-by-side on
   wider screens. The right cluster never shrinks, so its contents stay legible. */
.card-head--age { flex-wrap: wrap; }
.card-head--age > h2 { flex: 1 1 auto; }
.card-head--age .card-head__end { margin-left: auto; }

/* The Listen control is a positioning context for its speed popup, so the popup
   can anchor to the speaker (right-aligned, so it can't spill off the screen). */
.tip__listen {
  position: relative;
  flex: none;
  align-self: center;
  margin-right: var(--sp-4);
}
/* In a card head the card's own padding already provides the right inset. */
.card-head__end .tip__listen { margin-right: 0; }

/* Speaker pill — tap to start/stop. Icon + short label keep the tap target wide
   enough on touch while staying compact beside the title. */
.tip__listen-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  min-height: var(--tap-min);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.tip__listen-btn:hover { color: var(--text); border-color: var(--border); }
.tip__listen-btn.is-playing {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-tint);
}
.tip__listen-ic { display: inline-flex; }

/* Speed popup — floats just under the speaker while it reads. Right-aligned and
   width-capped so it stays on-screen even when the speaker sits at the card edge. */
.tip__speed {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--sp-2));
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(72vw, 240px);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.tip__speed[hidden] { display: none; }
.tip__speed-label {
  flex: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
/* Compact the shared segmented control to fit the popup. */
.tip__speed .segmented {
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-1);
}
.tip__speed .seg { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: no-preference) {
  .tip__speed:not([hidden]) { animation: tip-speed-in 0.16s var(--ease) both; }
  @keyframes tip-speed-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tip__listen-btn { transition: none; }
}