/* /training/training.css (UPDATED for the new simplified Training HTML) */

:root{
  --gold:#d8b15a;

  --tr-bgTop: rgba(120,160,255,.18);
  --tr-bgTop2: rgba(0,255,140,.12);
  --tr-bgTop3: rgba(255,80,160,.10);

  --tr-barA: rgba(120,160,255,.95);
  --tr-barB: rgba(0,255,140,.90);
  --tr-barC: rgba(255,80,160,.90);

  --tr-surface: rgba(255,255,255,.02);
  --tr-surface-br: rgba(255,255,255,.10);
  --tr-shadow: 0 14px 30px rgba(0,0,0,.18);

  --tr-chip-bg: rgba(255,255,255,.03);
  --tr-chip-br: rgba(255,255,255,.12);

  --tr-balA: rgba(120,160,255,.90);
  --tr-fastA: rgba(0,255,140,.90);
  --tr-thinkA: rgba(255,80,160,.90);
}

:root[data-theme="light"]{
  --tr-bgTop: rgba(0,120,255,.18);
  --tr-bgTop2: rgba(0,160,90,.14);
  --tr-bgTop3: rgba(255,80,160,.10);

  --tr-barA: rgba(0,120,255,.92);
  --tr-barB: rgba(0,160,90,.88);
  --tr-barC: rgba(255,80,160,.82);

  --tr-surface: rgba(255,255,255,.72);
  --tr-surface-br: rgba(11,15,20,.14);
  --tr-shadow: 0 14px 26px rgba(0,0,0,.10);

  --tr-chip-bg: rgba(255,255,255,.82);
  --tr-chip-br: rgba(11,15,20,.14);

  --tr-balA: rgba(0,120,255,.92);
  --tr-fastA: rgba(0,160,90,.88);
  --tr-thinkA: rgba(255,80,160,.78);
}

/* Wider layout on desktop */
.section-training .wrap{ max-width: 1120px; }

/* Background glow (fix stacking so it NEVER covers content) */
body.section-training{ position: relative; }
body.section-training::before{
  content:"";
  position: fixed;
  inset: -20vh -10vw auto -10vw;
  height: 54vh;
  pointer-events: none;
  background:
    radial-gradient(820px circle at 18% 28%, var(--tr-bgTop), transparent 60%),
    radial-gradient(820px circle at 52% 22%, var(--tr-bgTop2), transparent 62%),
    radial-gradient(820px circle at 84% 34%, var(--tr-bgTop3), transparent 62%);
  filter: blur(18px);
  opacity: .85;
  z-index: 0;
}
:root[data-theme="light"] body.section-training::before{ opacity: .95; }

/* IMPORTANT: header + main must be above the glow */
.section-training header.wrap,
.section-training main.wrap{
  position: relative;
  z-index: 1;
}

/* Top tip */
.section-training .sub{
  margin: 8px 0 0;
  font-size: 13px;
  opacity: .82;
}

/* --- TOP CARD (Pick a pathway / Spotlight / Progress) --- */
.section-training .card{
  border: 1px solid var(--tr-surface-br);
  background: var(--tr-surface);
  box-shadow: var(--tr-shadow);
}

.trTopCard{ padding: 16px; }

.trTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.trToday{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--tr-surface-br);
  background: color-mix(in oklab, var(--tr-chip-bg), transparent 20%);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  min-width: 0;
}

.trPickRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: 14px;
  align-items: start;
}

.trPickTitle{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .01em;
}
.trPickLeft .muted{ margin-top: 4px; }

.trPickRight{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

/* Spotlight card */
.trSpotCard{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--gold), var(--tr-surface-br) 55%);
  background:
    radial-gradient(640px circle at 20% 30%, rgba(216,177,90,.22), transparent 60%),
    radial-gradient(640px circle at 82% 70%, rgba(120,160,255,.12), transparent 62%),
    var(--tr-surface);
  box-shadow: 0 16px 30px rgba(0,0,0,.10);
  min-width: 0;
}

.trSpotTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.trSpotTitle{
  font-weight: 950;
  opacity: .92;
}
.trSpotPill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold), transparent 30%);
  background: color-mix(in oklab, rgba(216,177,90,.18), transparent 40%);
  font-size: 12px;
  letter-spacing: .10em;
  white-space: nowrap;
}

.trSpotBody{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
}

.trSpotLogo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  padding: 8px;
  border: 1px solid var(--tr-chip-br);
  background: var(--tr-chip-bg);
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
  flex: 0 0 auto;
}

.trSpotName{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trSpotSub{ margin-top: 3px; font-size: 12px; opacity: .78; }

/* Progress card */
.trProgCard{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid var(--tr-surface-br);
  background: var(--tr-surface);
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
  min-width: 0;
}
.trProgTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.trProgTitle{ font-weight: 950; opacity: .92; }
.trProgPill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--tr-chip-br);
  background: var(--tr-chip-bg);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.trProgSub{ margin-top: 6px; font-size: 12px; opacity: .75; }

/* --- PATHWAYS GRID --- */
.trGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.trPath{
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 16px;
}

.trPath::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
}
.trDaily::before{ background: linear-gradient(90deg, var(--tr-balA), transparent); }
.trSpeed::before{ background: linear-gradient(90deg, var(--tr-fastA), transparent); }
.trLogic::before{ background: linear-gradient(90deg, var(--tr-thinkA), transparent); }

.trPathTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.trKicker{
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .75;
}
.trBadgeWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.trBadge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--tr-chip-br);
  background: var(--tr-chip-bg);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.trWeek{ display:flex; gap:6px; align-items:center; }
.trDot{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 1px solid var(--tr-chip-br);
  background: transparent;
  opacity: .9;
}
.trDot.on{
  background: color-mix(in oklab, var(--tr-fastA), transparent 55%);
  border-color: color-mix(in oklab, var(--tr-fastA), white 12%);
}

.trH2{ margin: 8px 0 0; font-size: 26px; line-height: 1.05; }
.trDesc{ margin: 8px 0 0; font-size: 13px; opacity: .82; }

/* --- STEPS (desktop stability + no “drift/wrap chaos”) --- */
.trSteps{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.trStep{
  border: 1px solid var(--tr-surface-br);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
:root[data-theme="light"] .trStep{ background: rgba(255,255,255,.74); }

.trStepLeft{ min-width: 0; }

.trStepTop{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.trStepName{
  font-weight: 950;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trStepMeta{
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}

.trStepHint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
  max-width: 52ch;
}

.trStepRight{
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.trCheck{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--tr-chip-br);
  background: var(--tr-chip-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  flex: 0 0 auto;
}
.trCheck.on{
  border-color: color-mix(in oklab, var(--tr-fastA), white 12%);
  background: color-mix(in oklab, var(--tr-fastA), transparent 60%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tr-fastA), transparent 78%);
}

/* Actions under each pathway */
.trActions{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- OTHER DAILIES (bottom) --- */
.trOther{ padding: 14px; border-radius: 16px; }
.trOtherTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.trOtherH2{ margin: 0; font-size: 18px; }
.trPills{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trPill{
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--tr-chip-br);
  background: var(--tr-chip-bg);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
}
.trPillIcon{ width: 18px; height: 18px; opacity: .95; }
.trPillText{ white-space: nowrap; }

/* --- RESPONSIVE --- */
@media (max-width: 1100px){
  .trPickRow{ grid-template-columns: 1fr; }
  .trPickRight{ grid-template-columns: 1fr 1fr; }
  .trGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .trPickRight{ grid-template-columns: 1fr; }
  .trGrid{ grid-template-columns: 1fr; }

  /* Mobile steps: stack controls under text */
  .trStep{ grid-template-columns: 1fr; }
  .trStepRight{ justify-content: flex-start; flex-wrap: wrap; }
  .trStepMeta{ max-width: 100%; }
}

/* Mobile wrapping fixes (your screenshot issue) */
@media (max-width: 520px){
  .trStep{ padding: 10px; gap: 10px; }
  .trStepTop{ gap: 2px; }

  .trStepName{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
  }
  .trStepMeta{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    line-height: 1.2;
    opacity: .82;
  }
  .trStepHint{ max-width: 100%; line-height: 1.25; }

  .trStepRight{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
  }

  /* Keep the check to the far right if there's room */
  .trCheck{ margin-left: auto; }
}

/* Extra tiny phones: reduce dots so the badge never wraps */
@media (max-width: 360px){
  .trWeek .trDot:nth-child(n+6){ display:none; } /* show 5 dots */
}

/* Help dialog (still compatible) */
.trHelpDlg{
  padding: 0;
  border: 0;
  background: transparent;
  width: fit-content;
  max-width: calc(100vw - 24px);
  margin: auto;
}
.trHelpDlg::backdrop{ background: rgba(0,0,0,.55); }
:root[data-theme="light"] .trHelpDlg::backdrop{ background: rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}