/* practice: ordered source sections, combined by the asset build. */
/* Mock Tests, laid out as Duolingo's practice tab: a header on its own blue with
   the paper to sit next and one START, then plain rows under small labels. */
/* No top padding: row one carries its own 15px, so the controls sit at the
   same height here as on every other tab. */
#practice {
  padding: 0 20px calc(110px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
#practice .pinner {
  max-width: 600px;
}
/* .mock-library-heading is the shared controls row declared in progress.css. Its
   title is for screen readers only, as on Learn, so the four header buttons
   are the whole row. */
/* ---------- the header ---------- */
/* The page's name and score on the blue, with Maple standing behind the white
   card that holds the paper to sit next, as the practice tab's character
   stands behind the session it suggests. */
.mock-hub {
  position: relative;
  isolation: isolate;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: var(--topic-banner);
  color: #fff;
}
.mock-hub-head {
  min-height: 78px;
  padding-right: 104px;
}
.mock-hub .mock-banner-title {
  margin: 0;
}
/* The caption stays in the text column, clear of Maple, and wraps on
   smaller screens. Its deeper blue clears 4.5:1 for the white text. */
.mock-hub-score {
  display: inline-block;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #a32f36;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.mock-readiness-moose {
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 8px;
  width: 112px;
  height: 112px;
  object-fit: contain;
}
.mock-hub-card {
  padding: 14px 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
}
.mock-hub-paper {
  margin: 0 0 12px;
}
.mock-hub-paper b {
  display: block;
  font-size: 17px;
  font-weight: 900;
}
.mock-hub-paper .mock-group-format {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
/* The practice tab's button words: capitals, spaced out. */
.mock-hub-start {
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
@media (min-width: 600px) {
  /* The paper and START share a line, the button as wide as its word. */
  .mock-hub-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .mock-hub-paper {
    margin: 0;
  }
  .mock-hub-start {
    width: auto;
    min-width: 200px;
  }
}
/* ---------- rows under small labels ---------- */
.mock-group {
  margin-top: 26px;
}
/* The practice tab's small label over each list. */
.mock-section-label {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
/* One row per choice: white, with Topics' border and lip, its name, then its
   score and an icon at the end. The whole row is the button. */
.mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 8px 10px 8px 16px;
  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);
}
.mockgrid + .mock-row {
  margin-top: 10px;
}
.mock-row:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line-2);
}
.mock-row:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.mock-row > b,
.mock-row-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.mock-row-name b,
.mock-row-name small {
  display: block;
  font-weight: 700;
}
.mock-row-name small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.mock-score b {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Shuffle's round icon, in the brand's colour. */
.mock-row-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}
.mock-row-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.mock-row-coin {
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
}
/* Mock Tests keeps its own blue, the one Learn's first section wore before the
   sections became lines in their own colours. It sets the same tokens as a
   section (today-today-saved-icon.css), so the header, rows and coins read it. */
[data-section="mocks"] {
  --topic-banner: #c52b3b;
  --topic-lip: #ad1e2e;
  --topic-node: #d52b3a;
  --topic-ring: #f3a2ab;
  --topic-rest: #fff0f1;
  --topic-rest-lip: #ffd3d8;
  --topic-icon: #9d1627;
}
[data-theme="dark"] [data-section="mocks"] {
  --topic-rest: #311a22;
  --topic-rest-lip: #201016;
  --topic-icon: #f5a0aa;
}
/* ---------- the papers ---------- */
#practice .mockgrid {
  gap: 10px;
}
/* A paper's row ends in Learn's coin, drawn smaller: lit before it is sat, pale
   once sat below the pass mark, gold with the path's trophy once passed. */
#practice .mocktile .mock-node {
  --node-face: var(--topic-node, #d52b3a);
  --node-lip: var(--topic-lip, #ad1e2e);
  --node-ink: #fff;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--node-face);
  color: var(--node-ink);
  box-shadow:
    0 4px 0 var(--node-lip),
    inset 0 2px 0 rgb(255 255 255 / 20%);
}
#practice .mocktile .mock-node svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* Sat and not passed: the path's pale resting face, done but not done with.
   The score beside it says how far off, without a warning colour. */
#practice .mocktile.fail .mock-node {
  --node-face: var(--topic-rest, #fff0f1);
  --node-lip: var(--topic-rest-lip, #ffd3d8);
  --node-ink: var(--topic-icon, #9d1627);
}
/* Passed: gold with the trophy in white, and its score in the gold's ink. */
#practice .mocktile.pass .mock-node {
  --node-face: #e9ac23;
  --node-lip: #cb8e13;
  --node-ink: #fff;
}
#practice .mocktile.pass .mock-score b {
  color: var(--amber-ink);
}
/* The paper to sit next, the one START opens: its row takes Learn's ring colour,
   as the topic last read does in Topics. */
#practice .mocktile.is-next {
  border-color: var(--topic-ring);
  box-shadow: 0 3px 0 var(--topic-ring);
}
@media (prefers-reduced-motion: reduce) {
  .mock-row {
    transition: none;
  }
  .mock-row:active {
    transform: none;
    filter: brightness(0.96);
  }
}
@media (max-width: 359px) {
  #practice {
    padding-left: 16px;
    padding-right: 16px;
  }
  .mock-row {
    padding-left: 14px;
  }
  .mock-hub-head {
    padding-right: 88px;
  }
  .mock-readiness-moose {
    width: 96px;
    height: 96px;
  }
}
@media (min-width: 600px) {
  .mock-hub-head {
    padding-right: 140px;
  }
  .mock-readiness-moose {
    top: 4px;
    right: 16px;
    width: 128px;
    height: 128px;
  }
}