/* progress.css — My Progress tracker (DP Design Technology).
   Reuses shared components (site header/footer, prog-hero, hub-group,
   content-table, topic-card-badge); the tr-* classes below are page-local
   and use design tokens only so every theme in themes.css renders them. */

.tr-main { max-width: var(--max-w); margin: 0 auto; padding: 1.75rem 2rem 5rem; }

/* ── Top control block: level toggle + progress summary ──────── */
.tr-top { border-bottom: 1px solid var(--border); padding-bottom: 1.1rem; margin-bottom: 1.5rem; }

.tr-pill-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tr-actions-gap { width: 0.75rem; }

.tr-count-label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}

.tr-pill {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  min-height: 2rem; padding: 0.3rem 0.85rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
}
.tr-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.tr-pill:active { transform: translateY(1px); }
.tr-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-pill[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 700; }
.tr-pill-quiet { color: var(--muted); }
.tr-pill-quiet[aria-pressed="true"] { color: var(--accent); }

.tr-progress { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.9rem; }
.tr-count { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.tr-bar {
  flex: 1 1 12rem; height: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
}
.tr-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 5px; transition: width var(--transition); }
.tr-updated { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); white-space: nowrap; }

/* ── Topic tables ───────────────────────────────────────────────
   Structure comes from the shared .hub-group / .content-table;
   only cell details and the status pills are page-local. */
tr[hidden] { display: none; }

.content-table .tr-code {
  font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap;
}
.content-table .tr-code .topic-card-badge { margin-right: 0.4rem; }

.content-table .tr-topic { min-width: 11rem; }

.content-table .tr-status-row { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.content-table .tr-pill-status {
  min-height: 1.7rem; padding: 0.2rem 0.6rem; font-size: 0.66rem;
}
/* active states: 0 = not started (neutral), 1 = in progress (amber), 2 = complete (green) */
.tr-pill-status.st-0[aria-pressed="true"] { background: var(--surface); border-color: var(--border-strong); color: var(--text); font-weight: 700; }
.tr-pill-status.st-1[aria-pressed="true"] { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); font-weight: 700; }
.tr-pill-status.st-2[aria-pressed="true"] { background: var(--green-bg); border-color: var(--green); color: var(--green); font-weight: 700; }

.content-table .tr-note { min-width: 11rem; }
.content-table .tr-note input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
}
.content-table .tr-note input::placeholder { color: var(--muted); }
.content-table .tr-note input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }