/* Topic library: a subject's strands as columns, topics top to bottom from
   foundational to advanced. Visual_Token_Set values only. The whole map fits one
   desktop screen; on a phone the strands stack and the page scrolls normally. */
.topic-library { gap: var(--space-2); }
/* One line: title, then the counts beside it. The map below is the content. */
.topic-library-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); row-gap: 0; }
.topic-library-heading .kicker { flex-basis: 100%; }
.topic-library-heading p:not(.kicker) { color: var(--muted); font-size: var(--text-small); }
.topic-strands { display: grid; grid-template-columns: repeat(var(--strand-count, 4), minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.topic-strand { display: grid; gap: var(--space-2); align-content: start; }
.topic-strand h2 { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.2; color: var(--blue-dark); border-bottom: 2px solid var(--line); padding-bottom: var(--space-1); }
.topic-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

.topic-soon { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 34px; padding: var(--space-1) var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-small); line-height: 1.25; }
.topic-soon { flex-wrap: wrap; row-gap: 2px; }
.topic-soon-name { flex: 1 1 auto; }
/* With test tags, the name takes its own line and tags sit under it, badge right. */
.topic-soon:has(.topic-tags) .topic-soon-name { flex-basis: 100%; }
.topic-soon .topic-tags { flex: 1 1 auto; }
.topic-soon-badge { flex: 0 0 auto; margin-left: auto; font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.topic-live { display: grid; gap: 2px; background: var(--paper); border: 2px solid var(--blue); border-radius: var(--radius-md); padding: var(--space-2); box-shadow: var(--elevation-soft); }
.topic-live h3 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.topic-of { color: var(--blue-dark); font-size: 13px; font-weight: 700; line-height: 1.25; }
.topic-covers { color: var(--muted); font-size: 13px; line-height: 1.35; }
.topic-status { color: var(--ink); font-size: 13px; font-weight: 700; }
.topic-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.topic-tag { border-radius: var(--radius-sm); background: var(--cream); border: 1px solid var(--line); padding: 0 var(--space-1); font-size: var(--text-caption); font-weight: 700; color: var(--ink); }
.topic-actions { display: grid; gap: var(--space-1); margin-top: var(--space-1); }
.topic-actions .button { width: 100%; justify-content: center; text-align: center; min-height: var(--target-min); padding: var(--space-1) var(--space-2); font-size: 15px; }
.topic-live.is-locked { border-color: var(--line); box-shadow: none; }
.topic-live.is-done { border-color: var(--green-strong); }

@media (max-width: 1100px) {
  .topic-strands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topic-strands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .topic-strands { grid-template-columns: 1fr; }
}
/* Short laptop screens (1280x720): spacing gives way, text and targets do not. */
@media (min-width: 761px) and (max-height: 760px) {
  .page-shell:has(> div > .topic-library), .page-shell:has(.topic-library) { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .topic-strands, .topic-list { gap: var(--space-1); }
  .topic-strand { gap: var(--space-1); }
  .topic-soon { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
  .topic-live.topic-compact { padding: var(--space-1) var(--space-2); }
}

/* Chapter rows (a course whose chapters unlock in order, e.g. Physics). The row
   is the button; the number badge keeps the unlock order readable. */
.topic-strand-count { margin-left: var(--space-1); color: var(--muted); font-family: var(--font-reading); font-size: 13px; font-weight: 700; }
.chapter-row { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.chapter-row .chapter-number { width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 15px; }
.chapter-row-title { font-family: var(--font-display); font-size: 15px; line-height: 1.2; }
.chapter-row-meta { color: var(--muted); font-size: var(--text-caption); font-weight: 700; white-space: nowrap; }
.chapter-row:disabled { cursor: default; }
.chapter-row.is-locked .chapter-row-title { color: var(--muted); }
.chapter-row:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }

/* Compact live topic: one row, the row is the button. */
.topic-compact { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-1) var(--space-2); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.topic-compact:hover { background: var(--cream); }
.topic-compact:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
.topic-compact-text { display: grid; gap: 1px; min-width: 0; }
.topic-compact-name { font-family: var(--font-display); font-size: 15px; line-height: 1.2; }
.topic-grades { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
.topic-soon .topic-grades { flex-basis: 100%; }
.topic-compact-go { flex: 0 0 auto; color: var(--blue-dark); font-size: 18px; font-weight: 700; white-space: nowrap; }
.topic-extra-link { justify-self: center; min-height: 32px; padding: 0 var(--space-2); border: 0; background: var(--transparent); color: var(--blue-dark); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.topic-extra-link:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
/* A free learner's first quiz of this topic is free: a quiet chip beside the arrow. */
.topic-tag-taste { display: inline-block; margin-left: 2px; background: var(--paper); border-color: var(--green-strong); color: var(--green-text); line-height: 1.3; white-space: nowrap; }