/* feed-extras.css — Bottom navigation extras and the locked video card.
   Split from app.module.css; load order in app.html preserves the original cascade. */

/* ---------- bottom navigation ---------- */

/* Icon-only on the phone, 72px tall, the kit's colourful glyphs at 36px; the
   active one sits in the pale-blue pill with a brand outline. The labels are
   plain text nodes (a test pins that shape), so the phone hides them with a
   zero font size — still announced by screen readers — and the desktop rail
   brings them back beside the icons. */

/* every scrollable surface clears the nav bar */
#home,
#practice,
#learn,
#cards {
  padding-bottom: calc(96px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

.card {
  padding-bottom: calc(150px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* The cue lives inside the reel, so its own z-index can never beat the nav's.
   It has to sit above the nav instead of trying to stack over it. */
.hint {
  bottom: calc(90px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ---------- locked video card ---------- */

.vstate .sub {
  max-width: 34rem;
  margin-inline: auto;
}

.vstate .actions {
  margin-top: 24px;
}

.state-link {
  text-decoration: none;
}

.sampler-note {
  max-width: 34rem;
  margin-inline: auto;
}

/* The card sits on the black video ground, so its text is light in both
   themes rather than following the paper palette. */
.locked {
  padding: 0 24px;
}

.locked .lockicon {
  font-size: 2.4rem;
  margin-bottom: 14px;
}

.locked .q {
  margin-bottom: 8px;
  color: #fff;
}

.locked .sub {
  color: rgb(255 255 255 / 72%);
}