/* boksen overrides on top of Pico. Kept in a file (not an inline <style>) so the
   CSP can use style-src 'self' without 'unsafe-inline'. Loaded after pico.min.css. */

/* Pico gives buttons/[type=submit] a bottom margin that <a role="button"> lacks;
   zero it so mixed action rows (e.g. Delete / Cancel) line up in a .grid. */
.grid > button,
.grid > [type="submit"],
.grid > [type="button"],
.grid > [type="reset"] {
  margin-bottom: 0;
}

/* "Edit this card" sits under the Again/Good/Easy row. Push it well clear of
   Easy so a thumb aiming for the grade buttons can't catch it, and keep the tap
   target itself small and left-aligned so it reads as secondary to grading. */
.card-edit {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

/* Sign-in CAPTCHA: the image and its audio alternative sit side by side, and
   wrap to a single column when there isn't room for both (narrow phones). */
.captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--pico-spacing, 1rem);
}

.captcha > img {
  max-width: 100%;
  height: auto;
}

.captcha-alt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Secondary to the image: smaller and dimmer, so it reads as the alternative
   rather than a second instruction competing with "Type the digits shown". */
.captcha-alt-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--pico-muted-color, #646b79);
}

/* Native audio controls are wide by default and would push the row past the
   form on a phone. */
.captcha-alt audio {
  max-width: 100%;
  width: 15rem;
  height: 2.25rem;
}

/* Terms / Privacy links plus the date they were last updated, on every page.
   Muted and centred so they read as site chrome rather than as part of the
   page's own content, and pulled up tight under <main>, which Pico already pads
   generously at the bottom. The colour sits on the container, not just the
   links, so the plain-text date doesn't end up darker — and so louder — than
   the links beside it. */
.site-footer {
  padding-top: 0;
  text-align: center;
  color: var(--pico-muted-color, #646b79);
}

.site-footer a {
  color: var(--pico-muted-color, #646b79);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}