/* topics: ordered source sections, combined by the asset build. */
/* Topics is laid out as Practice Tests and wears its classes (practice.css):
   the shared header row, a header on Practice Tests' blue holding the topic to
   read next, then plain rows under small section labels. Only what is Topics'
   own lives here: the gutters, the rows' list, and the picture at a row's end. */
#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;
}
/* Learn's pane spaces every big button from what is above it; the header's
   button sits in its card, as on Practice Tests. */
#learn .mock-hub-start {
  margin-top: 0;
}
/* Topics are picture tiles, two across on a phone (owner, 2 Oct 2026): the
   picture over the name, with no fact counts. A tile keeps Practice Tests' row
   edge (.mock-row) and stacks what that row lays side by side. */
.topic-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.topic-tiles li {
  display: flex;
}
.topic-tiles .topic-tile {
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 16px 10px 14px;
  text-align: center;
}
.topic-tiles .topic-tile-name {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
.topic-tile-art {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
}
.topic-tile-art .book-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The tile and its illustration respond as one control; no persistent
   highlight is needed to show where the learner tapped. */
@media (prefers-reduced-motion: no-preference) {
  #learn .topic-tile {
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #learn .topic-tile .book-art {
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #learn .topic-tile:active {
    transform: translateY(2px) scale(0.985);
  }
  #learn .topic-tile:active .book-art {
    transform: scale(0.96);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #learn .topic-tile:hover:not(:active) {
    transform: translateY(-2px);
  }
  #learn .topic-tile:hover:not(:active) .book-art {
    transform: scale(1.045);
  }
}
/* Every fact learned: a gold tick on the picture, white on the gold with the
   gold's own drop, like the Unlock coin's. */
.topic-tile-tick {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #e9ac23;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #b8790a;
}
/* The way back from a topic's notes to the shelf. */
.topic-back {
  display: block;
  min-height: 58px;
  padding: 12px 0;
  color: var(--brand-ink);
  font-size: 16px;
  font-weight: 850;
}
/* A topic's notes open on its name alone (owner, 2 Oct 2026: no tinted box,
   label, fact count or picture), on the same tier as Topics' own h1. */
.topic-notes-title {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-wrap: balance;
}
.topic-blurb {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 22px 0 18px;
}
#learn .big {
  margin-top: 20px;
}
.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);
  }
  .topic-notes-title {
    font-size: 34px;
  }

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