:root {
  --paper: #fff6e5;
  --ink: #2b2140;
  --soft: #6b6080;
  --card: #ffffff;
  --orange: #ff7a3d;
  --orange-dark: #e25e22;
  --teal: #17a398;
  --yellow: #ffd23f;
  --red: #e63946;
  --line: #eadfca;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.45 ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; display: grid; gap: 16px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 20px;
}
.challenge { border-color: var(--yellow); background: #fffdf4; position: relative; }
.challenge .label { color: var(--soft); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.challenge .text { font-size: 1.9rem; line-height: 1.15; font-weight: 800; margin: 6px 0 4px; overflow-wrap: anywhere; }
.challenge .due { color: var(--soft); font-size: 0.95rem; }
.new-dot {
  position: absolute; top: -10px; right: -6px;
  background: var(--red); color: #fff; font-weight: 800; font-size: 0.8rem;
  padding: 4px 12px; border-radius: 999px; transform: rotate(6deg);
}
button, .button {
  font: inherit; font-weight: 800; border: 0; border-radius: 18px;
  padding: 16px 18px; min-height: 56px; width: 100%; cursor: pointer;
  background: var(--orange); color: #fff; display: block; text-align: center;
}
button:active, .button:active { background: var(--orange-dark); }
button.secondary, .button.secondary { background: #fff; color: var(--ink); border: 2px solid var(--line); }
button.go { background: var(--teal); }
button.link { background: none; color: var(--soft); width: auto; min-height: 44px; padding: 8px 10px; font-weight: 600; text-decoration: underline; }
button:disabled { opacity: 0.55; cursor: default; }
.stack { display: grid; gap: 12px; }
/* a caption on the button below it, not a statement of its own */
.tight { margin-bottom: -10px; }
label { display: grid; gap: 6px; font-weight: 700; }
input[type="text"], input[type="password"], input[type="date"], select, textarea {
  font: inherit; padding: 14px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); width: 100%; min-height: 52px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .button:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px;
}
.preview { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 14px; background: #f3ecdc; }
.note { color: var(--soft); font-size: 0.92rem; }
.error { color: var(--red); font-weight: 700; }
.ok { color: var(--teal); font-weight: 800; }
.big { font-size: 3rem; text-align: center; line-height: 1; margin-bottom: 8px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
dt { color: var(--soft); }
dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* --- trimming the photo -------------------------------------------------- */
/* The dimmed surround is one huge box-shadow spread, clipped by .shot. */
/* The padding is what lets the grips sit OUTSIDE the frame without being cut
   off by the clip. Without it they have to sit inside, over the corners of the
   picture, which is exactly where a child is trying to look while trimming. */
.shot {
  position: relative; overflow: hidden; border-radius: 14px;
  line-height: 0; touch-action: none; padding: 30px; background: #2b2140;
}
.shot .preview { border-radius: 0; }
.crop {
  position: absolute; border: 3px solid #fff; border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(43, 33, 64, 0.55);
}
/* A ring, not a disc: most of it sits outside the frame, and what does overlap
   the picture can be seen through. */
.handle {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 5px solid var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.45);
}
/* 62% of each grip hangs outside the frame, 38% over the corner. */
.handle.tl { left: 0; top: 0; transform: translate(-62%, -62%); }
.handle.tr { right: 0; top: 0; transform: translate(62%, -62%); }
.handle.bl { left: 0; bottom: 0; transform: translate(-62%, 62%); }
.handle.br { right: 0; bottom: 0; transform: translate(62%, 62%); }