/* Worksheet drop, v2 skin. Same class names the widget renders; literals with
   var() fallbacks so the help guides, which do not load v2.css, match.
   Baloo 2 only. The CTA carries its own styling and never borrows .btn. */

/* ---- the box ---- */
.dropzone{position:relative;max-width:760px;margin:0 auto 26px;background:#fff;border:3px solid var(--ink,#1F1145);border-radius:28px;box-shadow:0 8px 0 var(--ink,#1F1145);padding:30px 26px 26px;text-align:center;color:var(--ink,#1F1145);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.dropzone.is-over{background:#FFF9E5;transform:translateY(4px);box-shadow:0 4px 0 var(--ink,#1F1145)}
/* dashed inner frame: the "drop here" cue lives inside the solid card, so the
   box itself still reads as a Spelly card rather than a file input */
.dropzone .dz-idle{border:3px dashed rgba(31,17,69,.28);border-radius:20px;padding:22px 18px 20px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dropzone.is-over .dz-idle{border-color:var(--ink,#1F1145);background:#fff}
.dropzone .dz-busy,.dropzone .dz-done,.dropzone .dz-err{padding:6px 0 2px}

/* ---- type ---- */
.dropzone .dz-title{font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1.1;margin:10px 0 6px;color:var(--ink,#1F1145)}
.dropzone .dz-sub{font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.4;color:#4A3A7A;margin:0 0 8px}
.dropzone .dz-fine{display:none}
.dz-link{display:inline-block;font:inherit;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:15px;line-height:1;color:var(--ink,#1F1145);background:#FFC42D;border:3px solid var(--ink,#1F1145);border-radius:999px;padding:5px 12px;margin:0 2px;box-shadow:0 3px 0 var(--ink,#1F1145);cursor:pointer;text-decoration:none;vertical-align:baseline;transition:transform .08s,box-shadow .08s}
.dz-link:hover{background:#FFD35A}
.dz-link:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink,#1F1145)}
.dz-link:focus-visible,.dz-again:focus-visible{outline:3px solid #2E9DFF;outline-offset:2px}

/* ---- icon: a letter tile, not an emoji on a coloured fill ---- */
.dropzone .dz-ic{display:inline-grid;place-items:center;width:64px;height:64px;font-size:34px;line-height:1;background:#FFF9E5;border:3px solid var(--ink,#1F1145);border-radius:18px;box-shadow:0 5px 0 var(--ink,#1F1145);transform:rotate(-6deg);margin-bottom:6px}
.dropzone.is-over .dz-ic{transform:rotate(0) translateY(-4px)}

/* ---- busy ---- */
.dz-spin{width:40px;height:40px;margin:6px auto 0;border:5px solid #FFF9E5;border-top-color:#3DD068;border-right-color:#FFC42D;border-radius:50%;box-shadow:inset 0 0 0 3px var(--ink,#1F1145);animation:dzspin .9s linear infinite}
@keyframes dzspin{to{transform:rotate(360deg)}}

/* ---- done ---- */
.dz-thumb{display:block;max-width:200px;max-height:160px;margin:8px auto 14px;border:3px solid var(--ink,#1F1145);border-radius:16px;box-shadow:0 5px 0 var(--ink,#1F1145);object-fit:cover;transform:rotate(-2deg);background:#fff}
.dz-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;margin-top:14px;padding:0 28px;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:18px;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;color:#fff;background:var(--grass,#3DD068);border:3px solid var(--ink,#1F1145);border-radius:999px;box-shadow:0 5px 0 #1FA547,0 8px 0 var(--ink,#1F1145);transition:transform .08s,box-shadow .08s,filter .08s}
.dz-cta:hover{filter:brightness(1.04);color:#fff}
.dz-cta:active{transform:translateY(5px);box-shadow:0 0 0 #1FA547,0 3px 0 var(--ink,#1F1145)}
.dz-cta:focus-visible{outline:3px solid #2E9DFF;outline-offset:3px}
.dz-again{display:block;margin:12px auto 0;font:inherit;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-size:15px;font-weight:700;color:#4A3A7A;background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.dz-again:hover{color:var(--ink,#1F1145)}

/* word chips: letter-tile logic, one word per tile */
.dropzone .wchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.dropzone .wchips .wchip{animation:none;opacity:1;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:16px;color:var(--ink,#1F1145);background:#FFF9E5;border:3px solid var(--ink,#1F1145);border-radius:12px;box-shadow:0 3px 0 var(--ink,#1F1145)}

/* ---- error ---- */
.dropzone .dz-err .dz-title{color:#C92072}

/* ---- phone hand-off ---- */
.dz-qr{margin-top:22px}
.dz-qr-or{position:relative;margin:0 0 16px;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7A6FA8}
.dz-qr-or span{position:relative;background:#fff;padding:0 10px}
.dropzone.is-over .dz-qr-or span{background:#FFF9E5}
.dz-qr-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:rgba(31,17,69,.16);border-radius:2px}
.dz-qr-row{display:flex;gap:16px;align-items:center;justify-content:center;text-align:start;flex-wrap:wrap}
.dz-qr-img{border:3px solid var(--ink,#1F1145);border-radius:16px;background:#fff;box-shadow:0 5px 0 var(--ink,#1F1145);padding:4px;flex:none}
.dz-qr-txt{max-width:340px}
.dz-qr-title{font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:17px;line-height:1.15;margin:0 0 4px;color:var(--ink,#1F1145)}
.dz-qr-sub{font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.4;color:#4A3A7A;margin:0}
.dz-qr-state{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:4px 12px 4px 8px;font-family:var(--display,'Baloo 2'),system-ui,sans-serif;font-weight:800;font-size:13px;color:var(--ink,#1F1145);background:#FFF9E5;border:2px solid var(--ink,#1F1145);border-radius:999px}
.dz-qr-state:empty{display:none}
.dz-qr-state::before{content:"";width:10px;height:10px;border-radius:50%;background:#3DD068;border:2px solid var(--ink,#1F1145);animation:dzpulse 1.6s ease-in-out infinite}
@keyframes dzpulse{0%,100%{transform:scale(1)}50%{transform:scale(.7)}}

@media (max-width:520px){
  .dropzone{padding:22px 16px 18px;border-radius:22px}
  .dropzone .dz-idle{padding:18px 12px 16px}
  .dropzone .dz-title{font-size:21px}
  .dz-qr-row{text-align:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dz-spin{animation-duration:2s}.dz-qr-state::before{animation:none}.dropzone,.dropzone .dz-ic{transition:none}}