/* NaviDerece (mentors.js, nd-), Dokümanlar (documents.js, gd-) and Kullanım kılavuzu (manual.js, gm-). */

/* level track: a row of steps, each a dot in its level color */
.nd-track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none; padding-top: 12px; margin-top: -10px; }
.nd-track::-webkit-scrollbar { display: none; }
.nd-step { position: relative; flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; text-align: center; }
.nd-step::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.nd-step:first-child::before { display: none; }
.nd-dot { position: relative; z-index: 1; flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--lv, var(--gray-200)); box-shadow: 0 0 0 4px var(--surface-raised); }
.nd-when { margin-top: 4px; font: 500 12px/18px var(--font); color: var(--ink-muted); }
.nd-level { font: 500 14px/20px var(--font); }
.nd-step.is-now .nd-dot { box-shadow: 0 0 0 4px var(--surface-raised), 0 0 0 6px var(--ink); }
.nd-step.is-now .nd-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); animation: nd-here 2.2s ease-out infinite; }
@keyframes nd-here { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .nd-step.is-now .nd-dot::after { animation: none; opacity: 0; } }
.nd-step.is-now .nd-when { color: var(--ink); font-weight: 800; }
.nd-step.is-goal .nd-dot { border-radius: 6px; }

.nd-intro { margin-top: 8px; max-width: 640px; }
.nd-progress { gap: 20px; }
.nd-progress-head { align-items: flex-end; }
.nd-list { gap: 16px; }
.nd-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nd-tabs::-webkit-scrollbar { display: none; }
.nd-tabs button { padding: 8px 16px; white-space: nowrap; }
.nd-ranks .chip.is-active { background: var(--coach-surface); color: var(--on-coach); box-shadow: none; }
.nd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; grid-auto-flow: dense; }
.nd-card { gap: 12px; }
.nd-card.is-open { grid-column: 1 / -1; }
.nd-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.nd-av { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; font: 500 16px/1 var(--font); object-fit: cover; }
.nd-who { display: flex; flex-direction: column; min-width: 0; }
.nd-name { font: 500 16px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-rank { display: flex; flex-direction: column; align-items: flex-end; }
.nd-rank b { font: 800 22px/28px var(--font); }
.nd-scores { gap: 8px; }
.nd-score { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); }
.nd-score .nd-dot { width: 10px; height: 10px; box-shadow: none; }
.nd-score b { font: 800 14px/20px var(--font); }
.nd-score .muted { font-size: 12px; line-height: 18px; }
.nd-toggle { align-self: flex-start; }
.nd-detail { gap: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.nd-detail .nd-dot { box-shadow: 0 0 0 4px var(--surface-raised); }
.nd-detail .nd-step.is-now .nd-dot { box-shadow: 0 0 0 4px var(--surface-raised), 0 0 0 6px var(--ink); }
.nd-exam { gap: 12px; }
.nd-more { justify-content: center; }

/* documents */
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gd-card { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.gd-badge { flex: none; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface); display: grid; place-items: center; font: 500 11px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); object-fit: cover; }
.gd-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gd-title { font: 500 15px/21px var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gd-open { flex: none; font: 500 13px/18px var(--font); color: var(--ink-muted); }
a.gd-card:hover .gd-title { text-decoration: underline; }
a.gd-card:hover .gd-open { color: var(--ink); }

/* user manual */
.gm-intro { margin-top: 8px; }
.gm-off { margin-left: 12px; font-size: 13px; }

@media (max-width: 900px) {
  .nd-grid, .gd-grid { grid-template-columns: minmax(0, 1fr); }
  .nd-step { flex-basis: 76px; }
}

/* seven sections: between the phone layout and a wide screen the nav drops its icons to stay on one row */
@media (min-width: 901px) and (max-width: 1480px) {
  .top-nav { gap: 0; }
  .top-nav a { padding: 10px 12px; }
  .top-nav a svg { display: none; }
  .ask { min-width: 150px; }
}