/* WatuFlex Academy: the five tracks (account/lib-tracks.php) */
.track { margin: 30px 0 10px; }
.track-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.track-h h3 { margin: 0; font-size: 21px; color: var(--ink); }
.track-h .tfor { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); }
.track .tabout { margin: 4px 0 14px; max-width: 820px; }
.tcert { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 14px; margin: 0 0 16px; }
.tcert-h { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.tcert-h img { flex: none; }
.tcert-h div { display: flex; flex-direction: column; gap: 3px; }
.tcert-h .tlvl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tcert-h strong { font-size: 17.5px; color: var(--ink); }
.tcert-h .tag { align-self: flex-start; }
.tcert-h .tapps { font-size: 13.5px; color: var(--muted); }
.tmods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tmod { border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--wash); }
.tmod.done { border-color: #a6dccb; background: #f6fcf9; }
.tmod.done .pbar i { background: #2a9d6e; }
.tmod .pbar { max-width: none; }
.tmod-h { display: flex; flex-direction: column; gap: 3px; }
.tmod-h strong { font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.tmod-s { font-size: 13px; color: var(--muted); }
.tparts { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.tparts li { margin: 3px 0; }
.tparts .muted { font-size: 12.5px; }
.tbtns { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.tfoot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
.tgroup { margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); grid-column: 1 / -1; }
.tracknav { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.tracknav a { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: 14px; text-decoration: none; color: var(--ink); background: #fff; }
.tracknav a:hover { border-color: var(--teal); }
@media (max-width: 560px) { .tcert { padding: 14px 12px 12px; } .tmods { grid-template-columns: 1fr; } }