/* ============================================================================
   targeted-practice.css (2026-10-22, Targeted Practice push)
   Shared trust badge (.tp-real-badge, usable on any page) + the dashboard
   Targeted Practice surfaces: Today "Your next targeted set" card, trial card,
   Practice tab next-set lane and free line.
   Colours use the dash3 tokens (dashboard-v3.css) with fallbacks so the badge
   also works on pages that do not load those tokens. Dark mode is the token
   default; light mode = html[data-theme="light"].
   ============================================================================ */

/* ---- Trust badge (shared contract: class tp-real-badge) ---- */
.tp-real-badge {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; box-sizing: border-box;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--d-gold-dark, #B89B2E);
  background: rgba(212, 175, 55, .12);
  color: var(--d-gold-light, #7A6619);
  font-size: 13px; font-weight: 700; line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere;
}
.tp-real-badge > i { flex: 0 0 auto; font-size: 12px; }
html[data-theme="light"] .tp-real-badge { color: #5E4E12; background: #FBF3D5; border-color: #E3CC7A; }
.tp-adaptive-line { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--d-ink-2, #475569); }
.tp-adaptive-line > i { margin-right: 6px; color: var(--d-gold, #7A6619); }
.tp-trust { margin: 8px 0 0; }

/* ---- Today: Your next targeted set ---- */
.tta-studio .tp-next { display: flex; flex-direction: column; gap: 12px; border-color: var(--d-gold-dark); min-width: 0; }
.tta-studio .tp-next p { margin: 0; }
.tta-studio .tp-next-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tta-studio .tp-next-title { font-family: var(--d-font-display); font-size: var(--d-fs-24); line-height: 1.2; color: var(--d-gold); font-weight: 600; overflow-wrap: anywhere; }
.tta-studio .tp-next-meta { font-size: var(--d-fs-16); color: var(--d-ink-2); }
.tta-studio .tp-next-free { font-size: var(--d-fs-14); color: var(--d-ink-2); }
.tta-studio .tp-next-free a { color: var(--d-gold); font-weight: 700; }
.tta-studio .tp-next-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tta-studio .tp-next-start { min-width: 132px; font-size: var(--d-fs-16); }
.tta-studio .tp-next-msg:empty { display: none; }
.tta-studio .tp-next-msg { font-size: var(--d-fs-14); }

/* ---- Today: trial card ---- */
.tta-studio .tp-trial { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tta-studio .tp-trial p { margin: 0; }
.tta-studio .tp-trial-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tta-studio .tp-trial-days { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--d-r-pill); background: var(--d-surface-2); border: 1px solid var(--d-line); color: var(--d-ink); font-size: var(--d-fs-14); font-weight: 700; white-space: nowrap; }
.tta-studio .tp-trial-title { font-family: var(--d-font-display); font-size: var(--d-fs-24); line-height: 1.2; color: var(--d-gold); font-weight: 600; overflow-wrap: anywhere; }
.tta-studio .tp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tta-studio .tp-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--d-r-md); color: var(--d-ink); font-size: var(--d-fs-16); min-width: 0; }
.tta-studio .tp-step-dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--d-line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--d-ink-2); }
.tta-studio .tp-step.is-done .tp-step-dot { background: var(--d-ok-soft); border-color: var(--d-ok); color: var(--d-ok); }
.tta-studio .tp-step.is-done .tp-step-text { color: var(--d-ink-2); text-decoration: line-through; }
.tta-studio .tp-step.is-next { border-color: var(--d-gold-dark); }
.tta-studio .tp-step-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tta-studio .tp-trial-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Practice tab: next set lane + free line ---- */
.tta-studio .d3-prac-sug-grid.tp-sug--one { grid-template-columns: minmax(0, 1fr); }
.tta-studio .tp-sug-next { border-color: var(--d-gold-dark); }
.tta-studio .tp-sug-more { margin-top: 10px; }
.tta-studio .tp-sug-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tta-studio .tp-free-line { font-weight: 700; color: var(--d-ink); }
.tta-studio .d3-prac-drills-cat { color: var(--d-ink-3); font-size: var(--d-fs-14); }

@media (max-width: 1100px) {
  .tta-studio .tp-sug-rest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tta-studio .tp-next-title, .tta-studio .tp-trial-title { font-size: var(--d-fs-18); }
  .tta-studio .tp-next-actions .d-btn, .tta-studio .tp-trial-actions .d-btn { width: 100%; justify-content: center; }
  .tta-studio .tp-step { font-size: var(--d-fs-14); }
}