/* Keeping your things, under the Privacy page (keep.js). */
.keep { margin-block-start: 3rem; }
.keep [hidden] { display: none !important; }
.keep h2 { margin-block: 0 0.25rem; }
.keep__lede { margin-block: 0 1rem; color: var(--ink-soft); }

.keep__card {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.25rem;
  padding: 1.1rem clamp(1rem, 4vw, 1.5rem) 1.25rem;
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.keep__card:nth-child(odd) { rotate: -0.3deg; }
.keep__card:nth-child(even) { rotate: 0.3deg; }
.keep__card h3 { margin: 0; font-size: var(--step-1); }
.keep__card p { margin: 0; }
.keep__card label { font-family: var(--font-display); font-weight: 500; }
.keep__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.keep__btn {
  justify-self: start;
  padding: 0.55rem 1.4rem;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  color: #3a1636;
  background: var(--candyfloss);
  border: 2px solid var(--candyfloss);
  border-radius: 999px;
  cursor: pointer;
}
.keep__btn--quiet { color: var(--ink); background: transparent; border-color: var(--rule); }
.keep__btn:disabled { opacity: 0.5; cursor: default; }
.keep__btn:focus-visible, .keep__link:focus-visible { outline: 3px solid var(--candyfloss-deep); outline-offset: 2px; }
.keep__link {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--candyfloss-deep);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.keep input {
  font: inherit;
  color: inherit;
  padding: 0.6rem 0.9rem;
  background: var(--meringue);
  border: 2px solid var(--rule);
  border-radius: 1rem;
}
.keep input:focus-visible { outline: none; border-color: var(--candyfloss-deep); }

.keep__code { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
/* White behind the square in both themes, so cameras can read it. */
.keep__qr { width: 9.5rem; padding: 0.5rem; background: #fff; border-radius: 0.75rem; line-height: 0; }
.keep__qr svg { width: 100%; height: auto; }
.keep__big { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: 0.08em; }
.keep__words {
  padding: 0.75rem 1rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  word-spacing: 0.3em;
  background: var(--meringue);
  border: 2px dashed var(--rule);
  border-radius: 1rem;
}
.keep__soft { color: var(--ink-soft); }
.keep__msg { min-height: 1.5em; color: var(--ink-soft); }
.keep__msg.is-bad { color: var(--candyfloss-deep); }
.keep__msg.is-good { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .keep__card { rotate: none !important; } }

/* The save card, only when printing. */
.savecard { display: none; }
@media print {
  body.printing-card { background: #fff !important; }
  body.printing-card > *:not(.savecard) { display: none !important; }
  body.printing-card .savecard {
    display: block;
    max-width: 14cm;
    margin: 1cm auto;
    padding: 0.8cm 1cm;
    color: #4a2545;
    background: #fff;
    border: 3px dashed #c2337f;
    border-radius: 0.6cm;
    font-family: var(--font-body);
  }
  .savecard__title { margin: 0 0 0.4cm; font-family: var(--font-display); font-size: 18pt; }
  .savecard__words { margin: 0 0 0.4cm; font-family: var(--font-display); font-size: 22pt; word-spacing: 0.3em; }
}