/* Put every available paper first, with optional practice below the grid. */
#practice { padding: 20px 20px calc(110px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
#practice .pinner { max-width: 600px; }
/* Readiness leads: the page's real question is "am I ready", and sixteen
   identical tiles cannot answer it. Same meter and thresholds as Progress,
   from readiness.js, so the two screens cannot disagree. */
.mock-readiness { margin-bottom: 26px; }
.mock-readiness-empty { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; font-weight: 700; line-height: 1.5; }
/* The format never changes, so it annotates the action rather than heading it. */
.mock-format-line { margin: 10px 0 0; text-align: center; color: var(--ink-2); font-size: 12px; font-weight: 750; }
/* Shuffling is the choice you make when you have no reason to prefer a paper,
   so it sits under the grid rather than above it. */
.mock-shuffle { display: block; width: 100%; padding: 12px; border-radius: 12px; background: none; color: var(--brand-ink); font-size: 14px; font-weight: 800; }
.mock-shuffle:hover { background: var(--panel); }
/* The page's primary action, so it runs the full width of the grid. It was
   capped and centred while it was the secondary "shuffle" button at the foot
   of the page, which left it reading as an aside once it became the main one. */
.mock-start-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 14px 16px; border-radius: 16px; font-size: 17px; }
.mock-start-button svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.mock-start-button svg:last-child { margin-left: auto; width: 20px; }
.mock-start-button span { flex: 1; }
.mock-library-heading { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.mock-library-heading .settings-button { margin-left: auto; }
#practice .mock-library-heading h1 { margin: 0; font-size: 30px; letter-spacing: -.4px; line-height: 1.2; }
.mock-library-heading > span { color: var(--ink-2); font-size: 11px; font-weight: 800; padding: 5px 8px; border-radius: 8px; background: var(--panel-2); white-space: nowrap; }
/* A compact, four-wide index: the paper number is the whole tile. */
#practice .mockgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; }
#practice .mocktile {
  --test-face: #27b9ef;
  --test-base: #079ed6;
  --tile-radius: clamp(12px, 2.5vw, 22px);
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  min-width: 0; padding: 0; border: 0; border-radius: 16px;
  background: transparent; box-shadow: none; color: var(--ink);
  text-align: center; touch-action: manipulation;
}
#practice .mocktile .mock-square {
  display: grid; place-items: center; position: relative; isolation: isolate;
  width: 100%; aspect-ratio: 4 / 3; min-height: 44px; overflow: hidden;
  border-radius: var(--tile-radius); background: var(--test-face); color: #fff;
  box-shadow: 0 8px 0 var(--test-base), inset 0 2px 0 #ffffff35;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease);
}
/* White numerals match the learning-path tiles; a small shadow defines the edge. */
#practice .mocktile .mock-number {
  color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / 22%); font-size: clamp(25px, 7.5vw, 38px); font-weight: 850;
  line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
#practice .mocktile .mock-score {
  display: block; min-height: 16px; color: var(--ink-2);
  font-size: 11px; line-height: 16px; font-weight: 750;
}
#practice .mocktile .mock-score:empty { display: none; }
#practice .mocktile.pass { --test-face: #e9ac23; --test-base: #cb8e13; }
#practice .mocktile.pass .mock-score { color: var(--amber-ink); }
/* A passed paper is finished, and gets the finished treatment: the same two
   layers a completed step on the path wears — a lighter inner face set in from
   the rim, with the reflection riding on top of it.
   Only a passed one. A tile still to sit is a plain lit face, as an unfinished
   step is; and the band needs that inner surface beneath it to read as a
   reflection at all — laid on flat colour it was a stripe, and on slate a
   crack across the tile. */
#practice .mocktile.pass .mock-square::before,
#practice .mocktile.pass .mock-square::after {
  content: ''; position: absolute; inset: 5px 5px 7px;
  border-radius: calc(var(--tile-radius) - 5px); pointer-events: none;
}
#practice .mocktile.pass .mock-square::before { background: color-mix(in srgb, var(--test-face) 88%, #fff); }
#practice .mocktile.pass .mock-square::after {
  background: linear-gradient(115deg, transparent 0 40%, #ffffff40 40% 52%, transparent 52%);
  background-size: 250% 100%;
  background-position: 50% 0;
  transition: background-position .55s cubic-bezier(.2, .7, .2, 1);
}
/* The number and the check ride above both layers. */
#practice .mocktile .mock-number { position: relative; z-index: 1; }
#practice .mocktile .mock-square-check {
  position: absolute; right: 6px; bottom: 6px; z-index: 1; display: grid; place-items: center;
  width: 15px; height: 15px; min-height: 0; border-radius: 50%;
  background: #a97712; color: #fff;
}
.mock-square-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* A paper sat and not passed wears the damage: breaks biting in from every
   edge and two chips off the corners, each dark on one side and catching the
   light on the other so they read as fractures in a hard surface rather than
   lines drawn on one. Anchored to the rim — a tile split down the middle looked
   destroyed rather than knocked about, and it can be sat again. */
#practice .mocktile.fail .mock-square::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ffffff4a' stroke-width='3.1' transform='translate(1.4 1.4)'%3E%3Cpath d='M0 30 L14 27 L9 20 L20 16'/%3E%3Cpath d='M120 50 L104 55 L110 63 L98 68'/%3E%3Cpath d='M74 0 L69 12 L79 17 L72 27'/%3E%3Cpath d='M40 90 L46 77 L35 71 L44 63'/%3E%3Cpath d='M0 11 L10 14 L6 5'/%3E%3Cpath d='M120 79 L109 76 L113 86'/%3E%3C/g%3E%3Cg stroke='%2354647a' stroke-width='1.9'%3E%3Cpath d='M0 30 L14 27 L9 20 L20 16'/%3E%3Cpath d='M120 50 L104 55 L110 63 L98 68'/%3E%3Cpath d='M74 0 L69 12 L79 17 L72 27'/%3E%3Cpath d='M40 90 L46 77 L35 71 L44 63'/%3E%3Cpath d='M0 11 L10 14 L6 5'/%3E%3Cpath d='M120 79 L109 76 L113 86'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}

/* Sat but not passed. This used to render exactly like a paper never opened
   — same blue square, only the small score differing — which camouflaged the
   very tests worth retaking. Slate reads as "done, not done with", and the
   score carries the warning rather than the whole tile. */
#practice .mocktile.fail .mock-square { --test-face: #7d8fa3; --test-base: #66788c; }
#practice .mocktile.fail .mock-score { color: var(--wrong-ink); font-weight: 850; }
#practice .mocktile:focus-visible { outline: 3px solid #1289b9; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  /* Hover is a light press, exactly as on the learning path: the tile sinks
     into its lip and the reflection glides across the face. No colour change. */
  #practice .mocktile:hover { background: transparent; }
  #practice .mocktile:hover .mock-square { transform: translateY(2px); box-shadow: 0 6px 0 var(--test-base), inset 0 2px 0 #ffffff35; }
  #practice .mocktile.pass:hover .mock-square::after { background-position: 12% 0; }
}
#practice .mocktile:active { transform: none; box-shadow: none; }
#practice .mocktile:active .mock-square,
#practice .mocktile.is-pressed .mock-square { transform: translateY(6px); box-shadow: 0 2px 0 var(--test-base), inset 0 2px 0 #ffffff35; }
@media (prefers-reduced-motion: reduce) {
  #practice .mocktile .mock-square,
  #practice .mocktile .mock-square::after { transition: none; }
 }
.mock-extras { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line-2); }
@media (max-width: 359px) {
  #practice { padding-left: 16px; padding-right: 16px; }
  #practice .mockgrid { gap: 12px 10px; }
}
@media (min-width: 960px) {
  .mock-start-button { min-height: 64px; font-size: 19px; }
  #practice .mockgrid { gap: 18px; }
  #practice .mocktile .mock-number { font-size: 44px; }
  #practice .mocktile .mock-score { font-size: 13px; }
  #practice .mocktile .mock-square-check { width: 20px; height: 20px; right: 9px; bottom: 9px; }
  .mock-square-check svg { width: 15px; height: 15px; }
}

/* Names the numbered grid, which shipped as sixteen bare digits beside a button
   that opens a different kind of test entirely. */
.mockgrid-heading { margin: 22px 0 10px; }
.mockgrid-heading h2 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.1px; color: var(--ink); }
.mockgrid-heading p { margin: 3px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink-2); }
/* Unavailable papers are muted; their accessible names retain the locked state. */
#practice .mocktile.locked { --test-face: #a9b6c4; --test-base: #8797a8; }
#practice .mocktile.locked[aria-disabled="true"] { cursor: default; }
.mock-locked-note { margin: 16px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink-2); }
.mock-locked-actions { margin-top: 12px; }