/* Topics speaks the same visual language as the tabs around it: a white page,
   the shared header row (test date, streak, review, Preferences), one summary
   card, and each section under the banner it wears on the learning path. The
   section colours come from today.css's [data-section] tokens, so a topic here
   and its lessons on the path can never disagree. */
#learn.topic-library,
#learn.topic-detail {
  padding: 20px 20px calc(105px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
/* No top padding on the library: row one carries its own 15px, so the
   controls sit at the same height as on every other tab. The notes view keeps
   the gutter, having no controls row. */
#learn.topic-library {
  padding-top: 0;
}
#learn.topic-library .linner {
  max-width: 600px;
}
#learn.topic-detail .linner {
  max-width: 1020px;
}
.bookshelf-eyebrow {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: 1.4px;
}

/* The row itself is the shared one in progress.css; Topics is the tab that shows
   the plain page title, so only the title tier lives here. */
#learn.topic-library .topics-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.4px;
  outline: none;
}
.topics-intro {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.topics-summary {
  margin: 0 0 28px;
  padding: 16px 18px 18px;
  border: 2px solid var(--brand-soft-2);
  border-radius: 16px;
  background: var(--brand-soft);
}
.topics-summary-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--ink);
}
.topics-summary-line b {
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.topics-summary-line span {
  font-size: 15px;
  font-weight: 800;
}
.topics-summary-line small {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topics-summary-track {
  height: 12px;
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.topics-summary-track i {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #1cb0f6;
}

.topic-group {
  margin: 0 0 28px;
}
.topic-group-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--topic-banner);
  color: #fff;
}
/* The label is white on the banner, as it is on the path and in the app this
   is drawn from. At 12px bold that is 3:1, not the 4.5:1 small text wants —
   the banner colours are already as deep as the palette allows (see
   tests/frontend/contrast.test.mjs), so this is the look costing a level. */
.topic-group-kicker {
  margin: 0 0 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}
#learn .topic-group-banner h2 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
/* Where the guidebook button sits on Learn: the same outlined chip. */
.topic-group-count {
  flex: none;
  padding: 7px 12px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-radius: 12px;
  background: rgb(255 255 255 / 15%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* A row you can obviously press: the same 2px edge and lip as the path's cards. */
.topic-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 12px;
  border: 2px solid var(--line-2);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 3px 0 var(--line-2);
  transition:
    transform 0.1s var(--ease),
    box-shadow 0.1s var(--ease),
    border-color 0.12s var(--ease);
}
.topic-row:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line-2);
}
.topic-row:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.topic-row.is-last {
  border-color: var(--topic-ring);
  box-shadow: 0 3px 0 var(--topic-ring);
}
@media (hover: hover) {
  .topic-row:hover {
    border-color: var(--topic-ring);
  }
}

.topic-row-art {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--topic-rest);
  overflow: hidden;
}
.topic-row-art .book-art {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.topic-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.topic-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.1px;
}
.topic-row-title em {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--topic-banner);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topic-row-meta {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.topic-row-track {
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--topic-rest);
  overflow: hidden;
}
.topic-row-track i {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--topic-node);
}

.topic-row-go {
  justify-self: end;
  color: var(--ink-3);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.topic-row-tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--topic-node);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  .topic-row {
    transition: none;
  }
  .topic-row:active {
    transform: none;
  }
}
.shelf-note {
  margin: 28px 0 18px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Opening a book keeps the cover identity beside its real revision notes. */
.topic-back {
  display: block;
  min-height: 58px;
  padding: 12px 0;
  color: var(--brand-ink);
  font-size: 16px;
  font-weight: 850;
}
/* The notes header pinned its text column to 63% of the card and let a 512x512
   illustration sit loose beside it, so the title broke to one word per line
   — "Values / & / Being / a / Citizen" — while the artwork was sliced through
   the corgi's face at the card edge. It also hardcoded its fill and both ink
   colours, so it was dark-broken like the cards were. Grid, so the title takes
   the room that is left, and the art is a contained square: with the column no
   longer capped at 63%, the title carries the page-title tier. */
/* Each topic takes its section's accent, so the notes header matches the row you
   tapped to get here and the section it belongs to. */
.topic-notes-header {
  --accent: var(--brand);
  display: grid;
  grid-template-columns: 1fr 76px;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--brand)) 26%, var(--line-2));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--paper));
  color: var(--ink);
}
.topic-notes-header[data-topic="places"] {
  --accent: #22c55e;
}
.topic-notes-header[data-topic="dates"],
.topic-notes-header[data-topic="people"] {
  --accent: #ff9600;
}
.topic-notes-header[data-topic="writers"],
.topic-notes-header[data-topic="science"],
.topic-notes-header[data-topic="music"],
.topic-notes-header[data-topic="sport"],
.topic-notes-header[data-topic="art"],
.topic-notes-header[data-topic="festivals"] {
  --accent: #ec4899;
}
.topic-notes-header[data-topic="government"] {
  --accent: #a855f7;
}
.topic-notes-header > div {
  min-width: 0;
}
/* The page title of the notes view, on the same tier as Topics' own h1. */
.topic-notes-header h1 {
  margin: 6px 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-wrap: balance;
}
.topic-notes-header .bookshelf-eyebrow {
  color: var(--ink-2);
}
.topic-notes-header p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 750;
}
.topic-notes-header .book-art {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.topic-blurb {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 22px 0 18px;
}
.topic-study-action .big {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 19px;
  font-size: 19px;
}
.topic-study-action p {
  color: var(--ink-2);
  font-size: 14px;
  margin: 12px 0 24px;
  line-height: 1.5;
}
.topic-fact {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 21px 0;
  border-top: 1px solid var(--line-2);
}
.fact-number {
  flex: none;
  width: 25px;
  padding-top: 3px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 850;
}
/* A fact's name is a section heading inside the notes page, not its own tier. */
.topic-fact h2 {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin: 0 0 8px;
}
.topic-fact p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
.fact-learned {
  flex: none;
  margin-left: auto;
  color: var(--brand-ink);
  font-weight: 950;
}
#learn.topic-detail #lHome {
  margin-top: 20px;
}

@media (max-width: 359px) {
  #learn.topic-library,
  #learn.topic-detail {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 960px) {
  /* The same canvas as Mock Tests and Progress beside the rail. */
  #learn.topic-library,
  #learn.topic-detail {
    padding: var(--desktop-study-top) var(--desktop-study-gutter) 48px;
  }
  #learn.topic-library .linner {
    max-width: var(--desktop-study-width);
  }
  #learn.topic-library .topics-heading h1 {
    font-size: 34px;
  }
  .topic-notes-header h1 {
    font-size: 34px;
  }

  .topic-study-action {
    max-width: 500px;
  }
}