/* Learn shares the app's light surfaces and navy text. Topic banners keep
   their distinct colours and white labels; lesson buttons retain their depth. */
:root {
  --sheet-action: #19afe8;
  --sheet-action-lip: #0a97cd;
}
body.today-view {
  background: var(--paper);
}
#today {
  background: var(--paper);
  border-top-color: var(--paper);
  color: var(--ink);
  padding: 0 18px calc(108px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  color-scheme: light dark;
  scroll-padding-top: 220px;
  --today-status-height: 70px;
}
#today .today-inner {
  max-width: 540px;
}
#today .sub {
  color: var(--ink-2);
}
/* Row one's shape is declared once for all four tabs, in progress.css beside
   the controls it lays out. Sticking to the top is the only thing Learn does
   differently, and the only thing left here. */
.today-top {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
}
.today-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The page title is hidden — the banner below is the visible header — so it
   takes no size from the type scale. */
.today-heading h1 {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2;
}
.today-heading p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.today-course-topic {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 8px;
}
.today-chapter-wrap {
  position: sticky;
  top: var(--today-status-height);
  z-index: 3;
  background: var(--paper);
  padding-bottom: 14px;
}
.today-chapter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--topic-banner);
  box-shadow: none;
  color: #fff;
}
.today-chapter > div {
  min-width: 0;
}
.chapter-guidebook {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-radius: 12px;
  background: rgb(255 255 255 / 15%);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.chapter-guidebook svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.chapter-guidebook:hover {
  background: rgb(255 255 255 / 26%);
}
.chapter-guidebook:active {
  transform: translateY(1px);
}
.chapter-guidebook:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
/* Under 400px the word would push the section title onto two lines, so the
   chip keeps its icon and hands the word to the accessible name. */
@media (max-width: 399px) {
  .chapter-guidebook b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .chapter-guidebook {
    padding: 0 10px;
  }
}
/* The label is white on the banner, like the reference: 12px bold, which is
   3:1 rather than the 4.5:1 small text wants. The banner colours are already
   as deep as this palette goes (tests/frontend/contrast.test.mjs), so the label is the
   one place the look costs a level; the title beside it clears 3:1 as large
   text, and every other small label in the app sits on paper. */
.today-unit {
  margin: 0 0 3px;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0.65px;
}
/* The banner title tier, shared with Mock Tests' banner so the two cannot
   drift apart; Mock Tests only recolours it for the full-course banner. */
/* The floor is 19px, not 18px: below 18.66px bold, WCAG stops counting this
   as large text and the white-on-colour bar rises from 3:1 to 4.5:1, which no
   version of these hues can meet. */
#today .today-chapter-title,
.mock-banner-title {
  color: #fff;
  margin: 0;
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.35px;
}
/* The path is drawn about a fifth smaller than it started, so a phone shows
   more of the course at once: coins, their lips, the ring and the zigzag all
   scale together. */
.today-path {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
}
.today-step {
  display: flex;
  justify-content: center;
  min-height: 98px;
}
.today-lesson {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 140px;
  min-height: 88px;
  padding: 0 0 14px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--ink);
  transform: translateX(calc(var(--path-shift) * 0.8));
}
/* The path winds: learn-path.js numbers the steps 0–6 in turn, and each number
   is an offset from the centre line. */
.today-step[data-shift="0"] {
  --path-shift: 0px;
}
.today-step[data-shift="1"] {
  --path-shift: 48px;
}
.today-step[data-shift="2"] {
  --path-shift: 64px;
}
.today-step[data-shift="3"] {
  --path-shift: 26px;
}
.today-step[data-shift="4"] {
  --path-shift: -32px;
}
.today-step[data-shift="5"] {
  --path-shift: -64px;
}
.today-step[data-shift="6"] {
  --path-shift: -48px;
}
.today-lesson,
.today-lesson * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* The progress ring stays on the stationary wrapper; only the inner face
   compresses and springs back during a lesson press. */
/* The path's steps are rounded squares, the same shape as the mock test tiles,
   rather than the circular coins this started as. One radius drives the face,
   its inner gloss and the ring around the current step, so they cannot part
   company the way five separate 50%s could. */
.today-node-wrap {
  --node-radius: clamp(10px, 1.7vw, 14px);
  position: relative;
  display: block;
  flex: 0 0 52px;
  width: 60px;
  height: 52px;
}
.today-node {
  --node-lip: var(--topic-rest-lip);
  --node-face: var(--topic-rest);
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 52px;
  border-radius: var(--node-radius);
  background: var(--topic-rest);
  box-shadow:
    0 6px 0 var(--node-lip),
    inset 0 2px 0 #ffffff05;
  color: var(--topic-icon);
  transform-origin: center bottom;
  transition:
    transform 0.1s var(--ease),
    box-shadow 0.1s var(--ease);
}
/* Every coin icon -- star, play, book, review, medal -- at one size. */
.today-node svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}
.today-lesson-title {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
  max-width: 140px;
  text-wrap: balance;
}
.is-current .today-node {
  --node-lip: var(--topic-lip);
  --node-face: var(--topic-node);
  background: var(--topic-node);
  color: #fff;
  box-shadow:
    0 6px 0 var(--node-lip),
    inset 0 2px 0 #ffffff35;
}
/* The active coin sits inside a thick light-grey ring, like the reference. */
.is-current .today-node-wrap::after {
  content: "";
  position: absolute;
  inset: -12px -11px -17px;
  border: 6px solid var(--line-2);
  border-radius: calc(var(--node-radius) + 12px);
  pointer-events: none;
}
.is-current .today-lesson {
  gap: 22px;
  margin-bottom: 8px;
}
.today-start {
  position: absolute;
  bottom: calc(100% + 19px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border: 2px solid var(--topic-rest-lip);
  border-radius: 10px;
  background: var(--paper);
  color: var(--topic-icon);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.75px;
}
/* The callout breathes, so the eye finds where to start without anything
   having to shout. Uses translate rather than transform, because the bubble is
   centred with transform: translateX(-50%) and would jump sideways otherwise. */
.today-start {
  animation: start-bob 1.9s ease-in-out infinite;
}
@keyframes start-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}
.today-start::after {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  bottom: -6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--topic-rest-lip);
  border-bottom: 2px solid var(--topic-rest-lip);
  background: var(--paper);
  transform: rotate(45deg);
}
/* The START callout stands about 55px above its coin and breathes another 4px
   on top of that, so the step has to reserve the room. With less, the callout
   overflows its own row and the sticky chapter header paints over it. */
.today-step.is-current {
  padding-top: 60px;
}
/* Completed lessons become glossy star coins. The inset face and diagonal
   highlights travel with the pressed button; the current-step ring stays put. */
/* Completed coins keep the solid section colour and gain one soft gloss across the face; the icon is a white tick. */
.is-complete .today-node {
  --node-lip: var(--topic-lip);
  --node-face: var(--topic-node);
  isolation: isolate;
  color: #fff;
  background: var(--topic-node);
  box-shadow:
    0 6px 0 var(--node-lip),
    inset 0 2px 0 #ffffff40;
}
/* Game-app finish: a lighter inner face sits on the solid rim, and one wide
   diagonal light band crosses it from top-left to bottom-right. */
.is-complete .today-node::before {
  content: "";
  position: absolute;
  inset: 4px 4px 6px;
  border-radius: calc(var(--node-radius) - 4px);
  background: color-mix(in srgb, var(--topic-node) 88%, #fff);
  pointer-events: none;
}
.is-complete .today-node::after {
  content: "";
  position: absolute;
  inset: 4px 4px 6px;
  border-radius: calc(var(--node-radius) - 4px);
  background: linear-gradient(115deg, transparent 0 40%, #ffffff40 40% 52%, transparent 52%);
  background-size: 250% 100%;
  background-position: 50% 0;
  pointer-events: none;
  transition: background-position 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-complete .today-node svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
}
/* The permanent gloss stays in place. A separate light reflection crosses it
   during completion and disappears before the coin settles. */
.today-node-shine {
  position: absolute;
  z-index: 2;
  inset: 4px 4px 6px;
  border-radius: calc(var(--node-radius) - 4px);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent 36%, #ffffff30 43%, #ffffffbd 49%, #ffffff75 53%, transparent 62%)
    100% 50% / 250% 100% no-repeat;
}
.is-celebrating .today-lesson:not(.is-pressed) .today-node {
  animation: lesson-finish 0.9s ease-in-out both;
}
.is-celebrating .today-node-shine {
  animation: lesson-shine 0.9s ease-in-out both;
}
.is-awaiting-reveal .today-start,
.is-awaiting-reveal .today-node-wrap::after {
  visibility: hidden;
}
.is-awaiting-reveal .today-node {
  background: var(--topic-rest);
  color: var(--topic-icon);
  --node-lip: var(--topic-rest-lip);
  --node-face: var(--topic-rest);
}
.is-next-cue .today-start {
  animation: next-lesson-label 0.25s ease-out;
}
.is-next-cue .today-lesson:not(.is-pressed) .today-node {
  animation: next-lesson-nudge 1.4s ease-in-out 3;
}
@keyframes lesson-finish {
  0%,
  78%,
  100% {
    transform: none;
  }
  18% {
    transform: translateY(2px) scale(0.97);
  }
  42% {
    transform: translateY(-3px) scale(1.045);
  }
}
@keyframes lesson-shine {
  0%,
  12% {
    background-position: 100% 50%;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  68% {
    background-position: 0% 50%;
    opacity: 0.85;
  }
  82%,
  100% {
    background-position: 0% 50%;
    opacity: 0;
  }
}
@keyframes next-lesson-label {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes next-lesson-nudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
@media (hover: hover) and (pointer: fine) {
  /* Hover reads as a light press: the coin sinks a little into its lip. No colour change. */
  .today-lesson:hover .today-node {
    transform: translateY(2px);
    box-shadow:
      0 4px 0 var(--node-lip),
      inset 0 2px 0 #ffffff05;
  }
  .is-current .today-lesson:hover .today-node,
  .is-complete .today-lesson:hover .today-node,
  .is-upcoming .today-lesson:hover .today-node {
    box-shadow:
      0 4px 0 var(--node-lip),
      inset 0 2px 0 #ffffff35;
  }
  /* The reflection reacts to the mouse: the band glides across the face and settles back on leave. */
  .is-complete .today-lesson:hover .today-node::after {
    background-position: 12% 0;
  }
}
/* A press, not a squash. The face sinks the full depth of its lip and the
   lip closes to match, so the bottom edge never moves. */
.today-step .today-lesson.is-pressed .today-node {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 var(--node-lip),
    inset 0 2px 0 #ffffff20;
}
.today-lesson:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 5px;
}
.today-lesson-title b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
/* Every lesson coin is a solid block of its section colour; the current one adds the ring and label. */
/* Everything still ahead of you sits grey, so the colour is an invitation
   rather than wallpaper: where you are now, and the first step of each group —
   somewhere to start if you would rather not pick up where you left off. */
.is-upcoming .today-node {
  --node-lip: var(--disabled);
  --node-face: var(--panel-2);
  background: var(--panel-2);
  color: var(--ink-3);
  box-shadow:
    0 6px 0 var(--node-lip),
    inset 0 2px 0 #ffffff55;
}
.is-upcoming.is-entry .today-node {
  --node-lip: var(--topic-lip);
  --node-face: var(--topic-node);
  background: var(--topic-node);
  color: #fff;
  box-shadow:
    0 6px 0 var(--node-lip),
    inset 0 2px 0 #ffffff35;
}
.is-upcoming:not(.is-entry) .today-guided-kind {
  color: var(--ink-3);
}
.today-load-notice {
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
}
.today-load-notice p {
  color: var(--ink-2);
}
.today-load-notice button {
  color: var(--brand-ink);
}
.today-extras {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 380px;
}
.today-extras button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 78px;
  padding: 13px 16px;
  border: 2px solid var(--line-2);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}
.today-extra-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--brand-ink);
}
.today-extra-icon svg {
  width: 29px;
  height: 29px;
  fill: currentColor;
}
.today-extras button > span:nth-child(2) {
  flex: 1;
}
.today-extras b,
.today-extras small {
  display: block;
  color: var(--ink);
}
.today-extras b {
  font-size: 16px;
  font-weight: 900;
}
.today-extras small {
  color: var(--ink-2);
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
}
.today-extras button > span:last-child {
  font-size: 30px;
}
#today .big {
  color: #fff;
  background: #1cb0f6;
}
@media (max-width: 359px) {
  #today {
    padding-left: 14px;
    padding-right: 14px;
  }
  .today-chapter {
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .today-unit {
    font-size: 11px;
  }
  .today-lesson {
    transform: translateX(calc(var(--path-shift) * 0.65));
  }
}
@media (min-width: 960px) {
  .today-chapter {
    min-height: 76px;
    padding: 14px 22px;
  }
  #today .today-chapter-title,
  .mock-banner-title {
    font-size: 23px;
  }
  .today-step {
    min-height: 112px;
  }
  .today-node-wrap {
    flex-basis: 60px;
    width: 68px;
    height: 60px;
  }
  .today-node {
    width: 68px;
    height: 60px;
  }
  .today-node svg {
    width: 35px;
    height: 35px;
  }
  .is-complete .today-node svg {
    width: 31px;
    height: 31px;
  }
  .today-lesson-title b {
    font-size: 14px;
  }
  /* Specificity beats the base rules declared after this block. */
  #today .today-group-notes {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 40px;
    gap: 6px;
    padding: 0 14px 0 10px;
    font-size: 13px;
    font-weight: 800;
  }
  #today .today-group-notes .today-notes-label {
    display: inline;
  }
}
/* The path eases up into place whenever it is shown, including on return from a lesson. */
.today-inner.today-enter {
  animation: today-enter 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes today-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-inner.today-enter {
    animation: none;
  }
  .is-complete .today-node::after {
    transition: none;
  }
  .today-node {
    transition: none;
  }
  .is-celebrating .today-lesson:not(.is-pressed) .today-node,
  .is-celebrating .today-node-shine,
  .today-start,
  .is-next-cue .today-start,
  .is-next-cue .today-lesson:not(.is-pressed) .today-node {
    animation: none;
  }
  .today-step .today-lesson.is-pressed .today-node {
    transform: none;
    filter: brightness(0.92);
  }
}

/* Saved lessons sits above the path, and only once something is saved.
   Theme tokens throughout, so the card keeps its contrast in dark mode. */
.today-saved {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 2px solid var(--brand-soft-2);
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 3px 0 var(--brand-soft-2);
}
.today-saved:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--brand-soft-2);
}
.today-saved-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1cb0f6;
  color: #fff;
}
.today-saved-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.today-saved-copy {
  flex: 1;
  min-width: 0;
}
.today-saved-copy b {
  display: block;
  font-size: 16px;
  font-weight: 900;
}
.today-saved-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.today-saved-go {
  color: var(--ink-2);
  font-size: 24px;
}
/* The ribbon hangs off a bookmarked coin's top corner, above its shine. */
.today-bookmark {
  position: absolute;
  top: -6px;
  right: -3px;
  z-index: 2;
  width: 18px;
  height: 23px;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 #c73636);
}
.today-bookmark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ff5c5c;
}

/* The list behind the card: a row per lesson, its ribbon at the right to unsave it. */
.saved-lessons-panel h2 {
  margin: 0 0 12px;
}
.saved-lessons {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
.saved-lesson {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.saved-lesson-open {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.saved-lesson-open:hover {
  border-color: var(--brand-line);
}
.saved-lesson-open b {
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.saved-lesson-kind {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.saved-lesson-remove {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  min-height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #1cb0f6;
}
.saved-lesson-remove:hover {
  background: var(--panel);
}
.saved-lesson-remove svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
#savedLessonsModal .panel > .big {
  display: block;
  width: 100%;
  margin: 0;
  min-height: 52px;
  border-radius: 14px;
  background: var(--sheet-action);
  color: #fff;
  box-shadow: 0 4px 0 var(--sheet-action-lip);
  font-weight: 800;
}

/* The five syllabus sections keep their colour through every group and coin. */
/* Section palette: five saturated hues with strongly darker lips, so coins and
   banners read as bright, pressable game pieces. */
/* Two of the five tokens carry text, so they are set by contrast rather than
   by eye. --topic-banner is behind the white banner title (18px+ bold, so
   3:1), and every hue was under it: blue 2.44, green 2.09, orange 2.18, pink
   2.80. Each is the same hue taken down until it reaches 3:1; purple already
   passed at 3.24 and is untouched. --topic-icon is the small text that sits on
   paper or on a pale --topic-rest face — the START callout, the section pill,
   a paper's number — so it has to reach 4.5:1 on white, which the old lip
   colours did not (blue was 3.20). Both are checked by tests/frontend/contrast.test.mjs. */
[data-section="values"] {
  --topic-banner: #199edd;
  --topic-lip: #1899d6;
  --topic-node: #1cb0f6;
  --topic-ring: #84d8ff;
  --topic-rest: #ddf4ff;
  --topic-rest-lip: #b3e5fc;
  --topic-icon: #147daf;
}
[data-section="uk"] {
  --topic-banner: #49a902;
  --topic-lip: #46a302;
  --topic-node: #58cc02;
  --topic-ring: #b5ec78;
  --topic-rest: #e6f8d6;
  --topic-rest-lip: #c1eb9d;
  --topic-icon: #3a8701;
}
[data-section="history"] {
  --topic-banner: #d67e00;
  --topic-lip: #cc7800;
  --topic-node: #ff9600;
  --topic-ring: #ffd08a;
  --topic-rest: #fff1dc;
  --topic-rest-lip: #ffd9a6;
  --topic-icon: #ab6500;
}
[data-section="society"] {
  --topic-banner: #f55ba7;
  --topic-lip: #d94590;
  --topic-node: #ff5fae;
  --topic-ring: #ffb3d9;
  --topic-rest: #ffe6f2;
  --topic-rest-lip: #ffc4e0;
  --topic-icon: #c44986;
}
[data-section="government"] {
  --topic-banner: #b26ff5;
  --topic-lip: #9052d6;
  --topic-node: #ce82ff;
  --topic-ring: #e2c0ff;
  --topic-rest: #f3e8ff;
  --topic-rest-lip: #e0c8ff;
  --topic-icon: #945ccb;
}
/* The section hues stay saturated in dark — banners, coins and rings read on
   either ground. What cannot survive is --topic-rest and --topic-rest-lip: they
   are the pale resting surface of every not-yet-started coin and its 8px lip,
   so left alone they would be five bright pastel blobs on a dark path. Each
   becomes a deep tint of its own hue, keeping the section colour-coding. */
[data-theme="dark"] [data-section="values"] {
  --topic-rest: #0e2b3d;
  --topic-rest-lip: #08202f;
  --topic-icon: #7cd4fd;
}
[data-theme="dark"] [data-section="uk"] {
  --topic-rest: #16290a;
  --topic-rest-lip: #101e07;
  --topic-icon: #9be15d;
}
[data-theme="dark"] [data-section="history"] {
  --topic-rest: #2e1f08;
  --topic-rest-lip: #221605;
  --topic-icon: #ffc06a;
}
[data-theme="dark"] [data-section="society"] {
  --topic-rest: #2e1122;
  --topic-rest-lip: #220c19;
  --topic-icon: #ffb3d9;
}
[data-theme="dark"] [data-section="government"] {
  --topic-rest: #241a33;
  --topic-rest-lip: #1a1226;
  --topic-icon: #d9b4ff;
}
.today-path-group + .today-path-group {
  margin-top: 16px;
}
.today-group-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 10px;
}
.today-group-heading::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--topic-rest);
}
#today .today-group-heading h3 {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
  margin: 0;
}
.today-group-notes {
  display: grid;
  place-items: center;
  order: 1;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  color: var(--topic-icon);
  background: var(--topic-rest);
}
.today-group-notes svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.today-notes-label {
  display: none;
}
.today-section-empty {
  margin: 12px 16px 32px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
/* Steps behind the paywall: a plain light-grey coin with a mid-grey icon and a
   slightly darker grey edge, quieter than every coloured step around it. */
.is-locked .today-node {
  --node-lip: #cfcfcf;
  --node-face: #e5e5e5;
  background: #e5e5e5;
  color: #afafaf;
  box-shadow: 0 6px 0 var(--node-lip);
}
[data-theme="dark"] .is-locked .today-node {
  --node-lip: #262e37;
  --node-face: #36404b;
  background: #36404b;
  color: #6b7785;
}
.is-locked .today-lesson-title b {
  color: var(--ink-2);
}