/* ==========================================================================
   Learning Track component — shared by the Communication and AI Engineering
   track pages. Framework-free, light-first with a dark-mode fallback.
   Per-page accent is set via the CSS var --tk-accent on #track-root.
   ========================================================================== */
.tk {
  --tk-accent: #0e7490;
  --tk-ink: #0b0f17;
  --tk-body: #334155;
  --tk-muted: #64748b;
  --tk-faint: #94a3b8;
  --tk-border: #e2e8f0;
  --tk-surface: #ffffff;
  --tk-surface-2: #f8fafc;
  --tk-good: #15803d;
  --tk-good-bg: #dcfce7;
  --tk-warn: #b45309;
  --tk-bad: #b91c1c;
  --tk-bad-bg: #fee2e2;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--tk-body);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 96px;
}
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; }

/* ---- Overview / readiness ------------------------------------------------ */
.tk-overview {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin: 8px 0 32px;
}
@media (max-width: 760px) { .tk-overview { grid-template-columns: 1fr; } }

.tk-readiness {
  background: var(--tk-surface);
  border: 1.5px solid var(--tk-border);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}
.tk-readiness-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tk-faint); margin-bottom: 10px;
}
.tk-gauge { position: relative; width: 150px; height: 150px; margin: 0 auto 10px; }
.tk-gauge svg { transform: rotate(-90deg); width: 150px; height: 150px; }
.tk-gauge-track { fill: none; stroke: var(--tk-border); stroke-width: 12; }
.tk-gauge-fill  { fill: none; stroke: var(--tk-accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.tk-gauge-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.tk-gauge-num b { font-family: 'Playfair Display', serif; font-size: 40px; color: var(--tk-ink); line-height: 1; }
.tk-gauge-num span { font-size: 12px; color: var(--tk-muted); }
.tk-readiness-verdict { font-weight: 600; color: var(--tk-ink); margin-top: 4px; }
.tk-readiness-sub { font-size: 12.5px; color: var(--tk-muted); margin-top: 4px; }

.tk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
@media (max-width: 480px) { .tk-stats { grid-template-columns: repeat(2, 1fr); } }
.tk-stat {
  background: var(--tk-surface); border: 1.5px solid var(--tk-border);
  border-radius: 12px; padding: 16px;
}
.tk-stat b { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--tk-ink); display: block; }
.tk-stat span { font-size: 12px; color: var(--tk-muted); }
.tk-cta-row { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

.tk-recos { grid-column: 1 / -1; font-size: 13.5px; color: var(--tk-body); }
.tk-recos b { color: var(--tk-ink); }
.tk-reco-chip {
  display: inline-block; background: var(--tk-surface-2); border: 1px solid var(--tk-border);
  border-radius: 999px; padding: 3px 11px; margin: 3px 4px 0 0; font-size: 12.5px;
  cursor: pointer; color: var(--tk-body);
}
.tk-reco-chip:hover { border-color: var(--tk-accent); color: var(--tk-accent); }

/* ---- Buttons ------------------------------------------------------------- */
.tk-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  border: 1.5px solid var(--tk-border); background: var(--tk-surface);
  color: var(--tk-ink); border-radius: 8px; padding: 9px 15px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.tk-btn:hover { border-color: var(--tk-accent); color: var(--tk-accent); }
.tk-btn-primary { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; }
.tk-btn-primary:hover { filter: brightness(1.06); color: #fff; }
.tk-btn:disabled { opacity: .45; cursor: default; }

/* ---- Modules ------------------------------------------------------------- */
.tk-section-head {
  font-family: 'Playfair Display', serif; font-size: 24px; color: var(--tk-ink);
  margin: 34px 0 6px;
}
.tk-section-sub { font-size: 14px; color: var(--tk-muted); margin: 0 0 18px; }

.tk-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tk-module {
  text-align: left; background: var(--tk-surface); border: 1.5px solid var(--tk-border);
  border-radius: 12px; padding: 15px 16px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.tk-module:hover { border-color: var(--tk-accent); box-shadow: 0 6px 18px -12px rgba(15,23,42,.4); }
.tk-module-name { font-weight: 600; color: var(--tk-ink); font-size: 15px; line-height: 1.3; }
.tk-module-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--tk-faint); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.tk-module-acc { color: var(--tk-good); font-weight: 600; }
.tk-module-acc.is-weak { color: var(--tk-warn); }
.tk-bar { height: 6px; background: var(--tk-surface-2); border-radius: 3px; margin-top: 9px; overflow: hidden; }
.tk-bar-fill { height: 100%; background: var(--tk-accent); border-radius: 3px; transition: width .4s; }

/* ---- Filters ------------------------------------------------------------- */
.tk-filters {
  background: var(--tk-surface-2); border: 1px solid var(--tk-border);
  border-radius: 12px; padding: 16px 18px; margin: 22px 0;
}
.tk-filter-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tk-filter-row:last-child { margin-bottom: 0; }
.tk-filter-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tk-faint); width: 74px; flex-shrink: 0; padding-top: 7px;
}
.tk-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tk-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  border: 1.5px solid var(--tk-border); background: var(--tk-surface); color: var(--tk-body);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.tk-chip[aria-pressed="true"] { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; }
.tk-search {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
  border: 1.5px solid var(--tk-border); border-radius: 8px; background: var(--tk-surface); color: var(--tk-ink);
}
.tk-filter-summary { font-size: 13px; color: var(--tk-muted); margin-top: 4px; }
.tk-filter-summary b { color: var(--tk-ink); }

/* ---- Practice card ------------------------------------------------------- */
.tk-practice { margin-top: 6px; }
.tk-card {
  background: var(--tk-surface); border: 1.5px solid var(--tk-border);
  border-radius: 14px; padding: 24px; box-shadow: 0 10px 30px -20px rgba(15,23,42,.5);
}
.tk-card-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.tk-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .5px;
  border-radius: 999px; padding: 3px 9px; background: var(--tk-surface-2);
  border: 1px solid var(--tk-border); color: var(--tk-muted);
}
.tk-pill-topic { color: var(--tk-accent); border-color: var(--tk-accent); }
.tk-star { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--tk-faint); padding: 2px 4px; }
.tk-star.is-on { color: var(--tk-warn); }
.tk-star:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: 2px; border-radius: 4px; }
.tk-prompt { font-size: 18px; line-height: 1.5; color: var(--tk-ink); margin-bottom: 18px; white-space: pre-wrap; }
.tk-prompt code, .tk-answer code, .tk-expl code { font-family: 'JetBrains Mono', monospace; font-size: .88em; background: var(--tk-surface-2); padding: 1px 5px; border-radius: 4px; }

.tk-options { display: flex; flex-direction: column; gap: 9px; }
.tk-option {
  text-align: left; font: inherit; font-size: 15px; line-height: 1.45;
  border: 1.5px solid var(--tk-border); background: var(--tk-surface); color: var(--tk-body);
  border-radius: 10px; padding: 12px 15px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
}
.tk-option:hover { border-color: var(--tk-accent); }
.tk-option .tk-opt-key {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--tk-faint);
  border: 1px solid var(--tk-border); border-radius: 5px; padding: 1px 7px; flex-shrink: 0;
}
.tk-option[aria-pressed="true"] { border-color: var(--tk-accent); background: var(--tk-surface-2); }
.tk-option.is-correct { border-color: var(--tk-good); background: var(--tk-good-bg); }
.tk-option.is-wrong { border-color: var(--tk-bad); background: var(--tk-bad-bg); }
.tk-option.is-correct .tk-opt-key { border-color: var(--tk-good); color: var(--tk-good); }
.tk-option.is-wrong .tk-opt-key { border-color: var(--tk-bad); color: var(--tk-bad); }

.tk-open-hint { font-size: 13px; color: var(--tk-muted); font-style: italic; margin: 4px 0 14px; }

.tk-reveal { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--tk-border); }
.tk-answer-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tk-accent); margin: 12px 0 4px;
}
.tk-answer { font-size: 15px; line-height: 1.55; color: var(--tk-ink); white-space: pre-wrap; }
.tk-keypoints { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--tk-body); }
.tk-keypoints li { margin: 3px 0; }
.tk-expl { font-size: 14px; line-height: 1.6; color: var(--tk-body); margin-top: 10px; }
.tk-extra { font-size: 13.5px; line-height: 1.55; color: var(--tk-body); margin-top: 7px; }
.tk-extra-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--tk-warn); margin-right: 6px;
}
.tk-extra-list { margin: 4px 0 0; padding-left: 20px; }
.tk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tk-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--tk-muted); background: var(--tk-surface-2); border: 1px solid var(--tk-border); border-radius: 999px; padding: 2px 9px; }

.tk-selfrate { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.tk-selfrate span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tk-muted); }

.tk-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.tk-progress-text { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--tk-muted); margin-left: auto; }

.tk-empty { text-align: center; padding: 40px 20px; color: var(--tk-muted); }
.tk-loading { text-align: center; padding: 60px 20px; color: var(--tk-muted); font-family: 'JetBrains Mono', monospace; }

.tk a.tk-inline { color: var(--tk-accent); }

/* ---- Focus visibility (keyboard nav) ------------------------------------- */
.tk-btn:focus-visible, .tk-chip:focus-visible, .tk-option:focus-visible,
.tk-module:focus-visible, .tk-reco-chip:focus-visible, .tk-search:focus-visible {
  outline: 3px solid var(--tk-accent); outline-offset: 2px;
}

/* ---- Dark-mode fallback -------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk {
    --tk-ink: #f1ebe0; --tk-body: #c8bfae; --tk-muted: #9c9284; --tk-faint: #6f675a;
    --tk-border: #3a3023; --tk-surface: #1f1a13; --tk-surface-2: #271f16;
    --tk-good: #86efac; --tk-good-bg: #14311c; --tk-bad: #fca5a5; --tk-bad-bg: #3a1616;
  }
}
:root[data-theme="dark"] .tk {
  --tk-ink: #f1ebe0; --tk-body: #c8bfae; --tk-muted: #9c9284; --tk-faint: #6f675a;
  --tk-border: #3a3023; --tk-surface: #1f1a13; --tk-surface-2: #271f16;
  --tk-good: #86efac; --tk-good-bg: #14311c; --tk-bad: #fca5a5; --tk-bad-bg: #3a1616;
}