/* Worksheet drop — the "photograph your child's list" widget.
   Shared by the landing page and the scan-intent articles. Lifted out of
   landing.html on 03-09-26 rather than copied: four inline copies would drift
   within a week and the drift would be invisible, since every copy still
   "works". Variables fall back to literals so the articles, which do not load
   the landing's token sheet, look the same. */
/* ---- Real worksheet drop (the #ai-magic widget) ---------------------- */
.dropzone{max-width:720px;margin:0 auto 26px;background:#fff;border:3px dashed var(--ink,#1F1145);border-radius:24px;padding:26px 22px;text-align:center;transition:background .15s ease,border-color .15s ease}
.dropzone.is-over{background:#EAF6FF;border-style:solid}
.dropzone .dz-title{font-family:var(--display,'Baloo 2');font-weight:800;font-size:20px;margin:8px 0 4px;color:var(--ink,#1F1145)}
.dropzone .dz-sub{font-size:15px;color:#4A3A7A;margin:0 0 6px}
.dropzone .dz-fine{font-size:13px;color:#7A6FA8;margin:0}
.dropzone .dz-ic{font-size:40px;line-height:1}
.dz-link{font:inherit;font-weight:800;color:#1772CC;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.dz-spin{width:34px;height:34px;margin:0 auto;border:4px solid #DDF1FF;border-top-color:#2E9DFF;border-radius:50%;animation:dzspin .8s linear infinite}
@keyframes dzspin{to{transform:rotate(360deg)}}
/* The CTA carries its own button styling. It used to borrow the host page's
   .btn/.btn-grass, and the Help Center spells those .btn.grass — so on every
   help guide the button rendered as an empty outline with its white label
   invisible on the white card (09-09-26). Literals with var fallbacks, like
   the rest of this file. */
.dz-cta{display:inline-block;margin-top:14px;font-family:var(--display,'Baloo 2'),'Fredoka',system-ui,sans-serif;font-weight:800;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;color:#fff;padding:14px 26px;background:var(--grass,#3DD068);border:3px solid var(--ink,#1F1145);border-radius:16px;box-shadow:0 5px 0 #1FA547,0 8px 0 var(--ink,#1F1145);transition:transform .08s,filter .08s}
.dz-cta:hover{filter:brightness(1.04);color:#fff}
.dz-cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink,#1F1145)}
.dz-cta:focus-visible{outline:3px solid var(--ocean,#2E9DFF);outline-offset:3px}
.dz-again{display:block;margin:10px auto 0;font:inherit;font-size:14px;font-weight:700;color:#4A3A7A;background:none;border:0;cursor:pointer;text-decoration:underline}
.dropzone .wchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.dropzone .wchips .wchip{animation:none;opacity:1}
.dz-thumb{display:block;max-width:190px;max-height:150px;margin:10px auto 12px;border:3px solid var(--ink,#1F1145);border-radius:14px;object-fit:cover}
@media (prefers-reduced-motion:reduce){.dz-spin{animation-duration:2s}}
.dz-qr{margin-top:18px}
.dz-qr-or{position:relative;margin:0 0 14px;color:#7A6FA8;font-size:13px;font-weight:700}
.dz-qr-or::before,.dz-qr-or::after{content:"";position:absolute;top:50%;width:calc(50% - 26px);height:2px;background:#EFE6FF}
.dz-qr-or::before{left:0}.dz-qr-or::after{right:0}
.dz-qr-row{display:flex;gap:14px;align-items:center;justify-content:center;text-align:left;flex-wrap:wrap}
.dz-qr-img{border:3px solid var(--ink,#1F1145);border-radius:14px;background:#fff;flex:none}
.dz-qr-txt{max-width:330px}
.dz-qr-title{font-family:var(--display,'Baloo 2');font-weight:800;font-size:16px;margin:0 0 3px;color:var(--ink,#1F1145)}
.dz-qr-sub{font-size:14px;color:#4A3A7A;margin:0}
.dz-qr-state{font-size:13px;color:#7A6FA8;margin:6px 0 0;font-weight:700}