/*
 * SPORT-FIT PHYSIO CARE — Pain & Movement Assessment modal skin
 *
 * UI-BEHAVIOUR-ONLY layer on top of pain-assessment.css:
 *   - restyles the homepage into left features + centered body + right features
 *   - turns the 7-step engine (unchanged content/markup/JS) into a modal dialog
 *   - restyles step badges / option cards / nav buttons to the requested
 *     pill + step-badge + icon-card look
 * The anatomy stage (#anatomyStage / #anatomyImage / hotspots) is untouched
 * here on purpose: no width/height/position rule is set for it below, so
 * the body model keeps its exact existing size and hotspot geometry —
 * only its position within the page grid changes (left -> centered).
 */
#pain-check .pain-homepage-intro{max-width:760px;margin:0 auto 18px;text-align:center}
#pain-check .pain-homepage-intro .eyebrow{display:inline-block}
#pain-check .pain-homepage-intro h2{letter-spacing:-.03em;margin:8px 0 6px}
#pain-check .pain-homepage-intro p{margin:0;color:var(--muted);line-height:1.5}

#pain-check .pain-homepage-grid{display:grid;grid-template-columns:minmax(0,1fr) 632px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:8px}
#pain-check .pain-feature-col{display:flex;flex-direction:column;gap:14px}
#pain-check .pain-feature-col-right{align-items:flex-end}
#pain-check .pain-feature-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);max-width:280px}
#pain-check .pain-feature-col-right .pain-feature-item{flex-direction:row-reverse;text-align:right}
#pain-check .pain-feature-icon{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:linear-gradient(180deg,#f7fbff,#edf6fc);border:1px solid #dbe9f4;display:flex;align-items:center;justify-content:center;font-size:18px}
#pain-check .pain-feature-item strong{display:block;font-size:13px}
#pain-check .pain-feature-item small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.3}
#pain-check .pain-anatomy-panel{width:100%}
#pain-check .pain-tap-hint{text-align:center;color:var(--muted);font-size:12px;font-weight:750;margin:10px 0 0}

@media(max-width:1080px){
  #pain-check .pain-homepage-grid{grid-template-columns:1fr;justify-items:center}
  #pain-check .pain-feature-col{flex-direction:row;flex-wrap:wrap;justify-content:center;order:2;width:100%}
  #pain-check .pain-feature-col-right{align-items:stretch;order:3}
  #pain-check .pain-anatomy-panel{order:1;max-width:632px;width:100%}
  #pain-check .pain-feature-col-right .pain-feature-item{flex-direction:row;text-align:left}
  #pain-check .pain-feature-item{max-width:none;flex:1 1 240px}
}

/* ---------- Modal shell ---------- */
#pain-check .pain-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px}
#pain-check .pain-modal.hidden{display:none!important}
#pain-check .pain-modal-backdrop{position:absolute;inset:0;background:rgba(9,30,48,.56);backdrop-filter:blur(2px)}
#pain-check .pain-modal-dialog{position:relative;z-index:1;background:#fff;border-radius:26px;width:min(760px,100%);max-height:min(92vh,880px);box-shadow:0 30px 70px rgba(8,35,58,.32);display:flex;flex-direction:column;overflow:hidden}
#pain-check .pain-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#33546c;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(12,63,99,.14)}
#pain-check .pain-modal-close:hover{background:#f2f8fc}
#pain-check .pain-modal-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px;scrollbar-width:thin}
body.sf-pain-modal-open{overflow:hidden}

/* ---------- Step badge / pill + card restyle (content unchanged, look only) ---------- */
/* Requested: the title/pills/1-7 progress-bar header is not shown inside
   the modal on any step. The element is only hidden (not removed) because
   pain-assessment.js writes into #conditionTitle / #progressBar / .progress-node
   on every step change — deleting the nodes would throw and break the script. */
#pain-check .pain-modal-scroll .hero{display:none}
/* The single anatomy panel (same #anatomyStage markup, unchanged) is moved
   in and out of #painAnatomyModalSlot by pain-assessment.js when the modal
   opens/closes, so it always sits on top of the step content ("front
   layer") and Back/Continue stay reachable below it in the same scroll. */
#pain-check .pain-modal-scroll #painAnatomyPanel{margin:16px 0 0;box-shadow:none;border:1px solid var(--line)}
/* Requested: no Male/Female or Front/Back controls while the body is shown
   inside the Symptom Spread step — only the anatomy stage itself (same
   #anatomyStage markup, unchanged). This only hides the controls while the
   panel sits inside the modal; on the homepage (before the modal opens)
   they still show, unaffected. */
#pain-check .pain-modal-scroll #painAnatomyPanel .model-picker,
#pain-check .pain-modal-scroll #painAnatomyPanel .view-tabs{display:none}
#pain-check #painAnatomyHomeSlot,#pain-check #painAnatomyModalSlot{display:none}

/* Anatomy viewport scroll shortcut (Symptom Spread step only): lets the
   tall anatomy stage scroll within its own panel instead of the whole
   modal, via a single always-visible button. Draw Path/Undo/Clear/No
   Radiation and all pointer/drawing logic on #anatomyStage are untouched. */
#pain-check .anatomy-scroll-toggle{display:none}
#pain-check .pain-modal-scroll #painAnatomyPanel{position:relative}
#pain-check .pain-modal-scroll #painAnatomyPanel .anatomy-scroll-toggle{display:flex;align-items:center;justify-content:center;gap:5px;position:sticky;top:6px;z-index:30;width:max-content;margin:0 0 8px auto;min-height:34px;padding:7px 13px;border:0;border-radius:999px;background:linear-gradient(135deg,#2d8ae3,#0b5fc4);color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em;box-shadow:0 8px 18px rgba(14,95,192,.32);cursor:pointer}
#pain-check .pain-modal-scroll #painAnatomyPanel .anatomy-scroll-toggle:active{transform:translateY(1px)}
/* The shortcut is switched off: on phones/tablets the whole body now fits the
   screen (rule below) and a finger on the body scrolls the step. The button,
   its styles above and its click handler are all kept - delete this one line
   to bring it back. */
#pain-check .pain-modal-scroll #painAnatomyPanel .anatomy-scroll-toggle{display:none}

/* Symptom Spread on phones and tablets: the body stage is sized to the space
   between the step's tools and the Back/Continue bar, so head to feet is
   visible without scrolling. --sf-stage-h is measured by fitSpreadStage() in
   pain-assessment.js; the calc() is only the fallback before it runs. The
   figure keeps its aspect ratio (object-fit:contain) and never drops below
   360px tall - on very short screens the step scrolls a little instead.
   Desktop keeps the full-size stage. */
@media (max-width:1080px),(hover:none) and (pointer:coarse){
  #pain-check .pain-modal-scroll #painAnatomyPanel .anatomy-stage{min-height:0!important;height:clamp(360px,var(--sf-stage-h,calc(100vh - 380px)),760px)!important}
}

/* Symptom Spread on phones: the body stage is small here, so the two drawing
   hints are compact and stay clear of the figure. The "How to draw" card
   becomes a small corner thumbnail (label + animation, no caption) and the
   "Draw your pain path" prompt becomes a slim one-line pill. Same elements,
   same animations, same JS positioning - only their size changes. Tablets and
   desktop keep the full-size hints. */
@media (max-width:640px){
  #pain-check .pain-modal-scroll .draw-howto{top:6px;right:6px;width:clamp(58px,19%,70px);gap:2px;padding:4px 4px 5px;border-width:1px;border-radius:11px;box-shadow:0 6px 14px rgba(10,70,110,.14)}
  #pain-check .pain-modal-scroll .draw-howto-head{gap:0;font-size:6.5px;letter-spacing:.03em;white-space:nowrap}
  #pain-check .pain-modal-scroll .draw-howto-head svg,#pain-check .pain-modal-scroll .draw-howto-foot{display:none}
  #pain-check .pain-modal-scroll .draw-howto-art{border-radius:8px}
  #pain-check .pain-modal-scroll .draw-cta{gap:6px;padding:4px 10px 4px 4px;border-radius:12px;box-shadow:0 8px 18px rgba(11,55,110,.28),0 0 0 3px rgba(20,200,223,.16)}
  #pain-check .pain-modal-scroll .draw-cta:before{top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:2px 0 0 0}
  #pain-check .pain-modal-scroll .draw-cta.is-above:before{top:auto;bottom:-4px;border-radius:0 0 2px 0}
  #pain-check .pain-modal-scroll .draw-cta-icon{width:20px;height:20px}
  #pain-check .pain-modal-scroll .draw-cta-icon svg{width:11px;height:11px}
  #pain-check .pain-modal-scroll .draw-cta-text b{font-size:11px;line-height:1.15;white-space:nowrap}
  #pain-check .pain-modal-scroll .draw-cta-text small{display:none}
}

/* Step 3 (Symptom Spread): single-line tool options, scrollable on narrow
   screens instead of wrapping, so it stays one row on every device. */
#pain-check .pain-modal-scroll [data-step="3"] .tool-buttons{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px}
#pain-check .pain-modal-scroll [data-step="3"] .tool-buttons button{flex:0 0 auto;white-space:nowrap}

/* Step 2 (Symptom Pattern) focused questions: proper heading levels
   (h4 section title / h5 per-question prompt, generated by renderQuestions()
   in pain-assessment.js) and bordered box options in a 2-column grid
   instead of wrapping pills. */
#pain-check .pain-modal-scroll .condition-questions h4{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--ink)}
#pain-check .pain-modal-scroll .condition-questions>p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.4}
#pain-check .pain-modal-scroll .logic-question h5{display:block;font-weight:850;line-height:1.4;margin:0 0 8px;color:var(--ink)}
#pain-check .pain-modal-scroll .logic-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#pain-check .pain-modal-scroll .logic-options button{border:1px solid var(--line);border-radius:14px;background:#fff;padding:11px 12px;font-size:12.5px;font-weight:800;color:#34566f;text-align:left;line-height:1.35;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
#pain-check .pain-modal-scroll .logic-options button:hover{border-color:#9bcdec;transform:translateY(-1px)}
#pain-check .pain-modal-scroll .logic-options button.selected{border-color:#43c6df;background:#eafbff;color:#076c91;box-shadow:0 5px 14px rgba(24,169,204,.12)}
@media(max-width:380px){#pain-check .pain-modal-scroll .logic-options{grid-template-columns:1fr}}
#pain-check .pain-modal-scroll [data-step] > .eyebrow{display:inline-block;background:linear-gradient(180deg,#eef7fd,#e3f2fb);border:1px solid #cfe6f4;color:#0c5f9f;border-radius:999px;padding:6px 12px;letter-spacing:.14em}
#pain-check .pain-modal-scroll .panel{border:0;box-shadow:none;border-radius:0;padding:4px 0 0}
#pain-check .pain-modal-scroll .nav{position:sticky;bottom:-4px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);padding-top:14px;margin-top:16px}
#pain-check .pain-modal-scroll .next{box-shadow:0 10px 22px rgba(22,111,206,.22)}

/* Requested: Download Report button uses the same blue gradient as the
   Next/primary buttons instead of the plain outline style. Scoped to only
   this one button via its data-action, so the Share on WhatsApp / Back
   buttons (also .outline) are unaffected. */
#pain-check .outline[data-action="download"]{border:0;background:linear-gradient(180deg,#2d8ae3,#166fce);color:#fff;box-shadow:0 10px 22px rgba(22,111,206,.22)}
#pain-check .outline[data-action="download"]:hover{box-shadow:0 12px 26px rgba(22,111,206,.3)}

@media(max-width:640px){
  #pain-check .pain-modal{padding:0}
  #pain-check .pain-modal-dialog{width:100%;height:100%;max-height:none;border-radius:0}
  #pain-check .pain-modal-scroll{padding:16px}
}

/* ============================================================================
   FREE-FORM BODY PICKING (homepage body map)
   The whole body is tappable - no predefined dots. Driven by the "free-form
   body picking" block in assets/js/pain-assessment.js. Homepage-only: every
   piece here is hidden while the anatomy panel is inside the modal (step 3).
   ========================================================================== */
#pain-check{--pain:#ff4d6a;--navy:#0e2f5a}
#pain-check .pain-modal .pain-tap-cue,#pain-check .pain-modal .pain-pick{display:none}
/* The confirmation card below replaces the banner on the homepage only. */
#pain-check #painAnatomyHomeSlot + .pain-anatomy-panel .selection-banner{display:none}

/* Instruction - primary interaction cue, sits directly above the body */
/* Compact pill: an animated brand-gradient border, a soft breathing glow and
   a light sweep across the text keep it eye-catching without taking space. */
#pain-check .pain-tap-cue{display:flex;flex-direction:column;align-items:center;gap:6px;margin:18px 0 12px;padding:0 12px;text-align:center;animation:sfCueIn .7s cubic-bezier(.2,.9,.3,1) both}
#pain-check .pain-tap-cue-pill{position:relative;display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0;padding:5px 16px 5px 5px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(#fff,#f5fcff) padding-box,linear-gradient(90deg,#14c8df,#1a64b8,#ff4d6a,#1a64b8,#14c8df) 0 0/300% 100% border-box;box-shadow:0 8px 22px rgba(14,47,90,.12),0 0 0 4px rgba(20,200,223,.08);animation:sfCueGlow 3.2s ease-in-out 1s infinite,sfCueBorder 6s linear infinite}
#pain-check .pain-tap-cue-icon{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--navy),#1a64b8 60%,#14a9d6);color:#fff;box-shadow:0 4px 10px rgba(20,90,170,.3)}
#pain-check .pain-tap-cue-icon i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(20,200,223,.75);animation:sfCuePing 2.2s ease-out infinite}
#pain-check .pain-tap-cue-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:sfCueTap 2.2s ease-in-out infinite}
#pain-check .pain-tap-cue-text{color:var(--navy);font-size:clamp(13.5px,1.1vw,15px);font-weight:800;line-height:1.3;letter-spacing:-.005em;text-align:left}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #pain-check .pain-tap-cue-text{background:linear-gradient(100deg,var(--navy,#0e2f5a) 0 42%,#14b6d6 50%,var(--navy,#0e2f5a) 58% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sfCueShine 3.6s ease-in-out 1.2s infinite}
}
#pain-check .pain-tap-cue-arrow{width:9px;height:9px;border-right:2px solid #14a9d6;border-bottom:2px solid #14a9d6;transform:rotate(45deg);opacity:.85;animation:sfCueArrow 1.8s ease-in-out infinite}

/* Tapping the body opens the assessment directly, so the location /
   Change / Continue card is not shown. It stays only for the
   "Choose from a list" path, which has no automatic open. */
#pain-check .pain-pick.has-pick:has(.pain-pick-list:not([hidden])) .pain-pick-idle{display:none}
#pain-check .pain-pick.has-pick:has(.pain-pick-list:not([hidden])) .pain-pick-confirm{display:flex}
#pain-check .pain-pick.has-pick:has(.pain-pick-list:not([hidden])){border-color:rgba(255,77,106,.32);box-shadow:0 16px 38px rgba(214,40,74,.11),0 0 0 4px rgba(255,77,106,.05)}

/* Hover preview (mouse only) */
#pain-check .anatomy-stage.is-over-body{cursor:pointer}
#pain-check .pain-hover{position:absolute;left:0;top:0;width:0;height:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .16s ease}
#pain-check .pain-hover.show{opacity:1}
/* Target ring: thick brand-cyan ring, framed by a white halo and a thin navy
   hairline so it reads clearly on skin, on the white shorts and on the pale
   stage alike; a solid centre dot marks the exact spot, and a soft pulse
   draws the eye. */
#pain-check .pain-hover i{position:absolute;left:0;top:0;width:24px;height:24px;box-sizing:border-box;border-radius:50%;transform:translate(-50%,-50%);background:rgba(20,200,223,.28);border:2.5px solid #0fb4d0;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(10,45,85,.45),0 3px 10px rgba(8,52,96,.28),0 0 12px rgba(20,200,223,.45)}
#pain-check .pain-hover i::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:#0a8fb0;box-shadow:0 0 0 1.5px #fff}
#pain-check .pain-hover i::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:1.5px solid rgba(20,200,223,.85);opacity:0}
#pain-check .pain-hover.show i::after{animation:sfHoverPulse 1.6s ease-out infinite}
@keyframes sfHoverPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
#pain-check .pain-hover span{position:absolute;left:16px;top:-40px;white-space:nowrap;padding:6px 12px;border-radius:999px;background:#fff;border:1.5px solid rgba(20,200,223,.6);color:var(--navy);font-size:12px;font-weight:800;box-shadow:0 10px 22px rgba(10,49,84,.18)}
#pain-check .pain-hover.flip span{left:auto;right:16px}
/* Condition pages: a spot outside this condition's areas. */
#pain-check .pain-hover.is-off i{background:rgba(120,140,160,.2);border-color:#8497ab;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(60,80,100,.3),0 3px 8px rgba(40,60,80,.16)}
#pain-check .pain-hover.is-off i::before{background:#8497ab}
#pain-check .pain-hover.is-off i::after{animation:none}
#pain-check .pain-hover.is-off span{color:#6b8196;font-weight:700;border-color:#d3e0ea}
/* Smaller screens with a mouse or trackpad (tablets, small laptops). */
@media(max-width:820px){
  #pain-check .pain-hover i{width:22px;height:22px;border-width:2px}
  #pain-check .pain-hover i::before{width:5px;height:5px}
  #pain-check .pain-hover span{left:14px;top:-36px;font-size:11.5px;padding:5px 10px}
  #pain-check .pain-hover.flip span{right:14px}
}
@media(prefers-reduced-motion:reduce){#pain-check .pain-hover.show i::after{animation:none}}

/* Pain pin - lives in #hotspotOverlay (flat figure) or inside <model-viewer>
   as a surface-anchored hotspot (3D), where it turns with the body. */
#pain-check .pain-pin{position:absolute;left:0;top:0;width:0;height:0;z-index:6;pointer-events:none;transition:opacity .2s ease}
#pain-check .pain-pin[data-visibility-attribute]:not([data-visible]){opacity:0}
#pain-check .pain-pin>span{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
#pain-check .pain-pin-glow{width:88px;height:88px;background:radial-gradient(circle,rgba(255,77,106,.52) 0,rgba(255,77,106,.24) 34%,rgba(255,77,106,0) 70%);animation:sfPainGlow 2.4s ease-in-out infinite}
#pain-check .pain-pin-ring{width:18px;height:18px;border:2px solid rgba(255,77,106,.75);animation:sfPainRipple 2.4s cubic-bezier(.2,.6,.3,1) infinite}
#pain-check .pain-pin-ring.r2{animation-delay:1.2s}
#pain-check .pain-pin-core{width:15px;height:15px;background:radial-gradient(circle at 35% 35%,#fff 0,#ffe1e7 45%,#ff6b83 100%);border:2.5px solid #fff;box-shadow:0 0 0 2px var(--pain),0 4px 12px rgba(214,40,74,.45),0 0 18px rgba(255,77,106,.7)}
#pain-check .pain-pin.pop .pain-pin-core{animation:sfPinPop .5s cubic-bezier(.2,1.4,.4,1)}
#pain-check .pain-pin-tag{position:absolute;left:0;bottom:20px;transform:translateX(-50%);pointer-events:none;white-space:nowrap;padding:6px 12px;border:1px solid rgba(142,247,255,.35);border-radius:999px;background:linear-gradient(135deg,rgba(14,47,90,.95),rgba(26,100,184,.95));color:#fff;font-size:12.5px;font-style:normal;font-weight:800;line-height:1.2;box-shadow:0 12px 26px rgba(8,40,78,.28),0 0 0 4px rgba(20,200,223,.12)}
#pain-check .pain-pin.tag-below .pain-pin-tag{bottom:auto;top:20px}
#pain-check .pain-pin.pop .pain-pin-tag{animation:sfTagIn .45s cubic-bezier(.2,.9,.3,1)}

/* Instruction / confirmation card under the body */
#pain-check .pain-pick{margin-top:14px;padding:12px 14px;border-radius:18px;border:1px solid #dcebf4;background:linear-gradient(180deg,#fff,#f6fbfe);box-shadow:0 14px 34px rgba(12,63,99,.07);transition:border-color .25s ease,box-shadow .25s ease}
#pain-check .pain-pick-idle,#pain-check .pain-pick-confirm{display:flex;align-items:center;gap:12px}
#pain-check .pain-pick-confirm{display:none}
#pain-check .pain-pick.is-new .pain-pick-confirm{animation:sfPickIn .45s cubic-bezier(.2,.9,.3,1)}
#pain-check .pain-pick-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#eafcff,#e4f1fb);border:1px solid #cfe7f2;color:#0a7ea3}
#pain-check .pain-pick-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pain-check .pain-pick-idle-copy{min-width:0}
#pain-check .pain-pick-idle strong{display:block;color:var(--navy);font-size:13.5px}
#pain-check .pain-pick-idle small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;line-height:1.35}
#pain-check .pain-pick-list-toggle{flex:none;margin-left:auto;padding:6px 2px;border:0;background:none;color:var(--blue);font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#pain-check .pain-pick-dot{flex:none;width:14px;height:14px;margin:0 4px;border-radius:50%;background:var(--pain);animation:sfPainDot 2s ease-in-out infinite}
#pain-check .pain-pick-copy{flex:1;min-width:0}
#pain-check .pain-pick-copy small{display:block;color:#d23a57;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
#pain-check .pain-pick-copy strong{display:block;overflow:hidden;color:var(--navy);font-size:19px;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
#pain-check .pain-pick-copy em{display:block;margin-top:1px;color:var(--muted);font-size:11.5px;font-style:normal}
#pain-check .pain-pick-actions{flex:none;display:flex;align-items:center;gap:8px}
#pain-check .pain-pick-change{min-height:40px;padding:0 14px;border:1px solid #d6e5ef;border-radius:999px;background:#fff;color:#31546e;font-size:12px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease}
#pain-check .pain-pick-change:hover{background:#f1f8fc;border-color:#b9d5e6}
#pain-check .pain-pick-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--navy),#1a64b8 60%,#14a9d6);color:#fff;font-size:13.5px;font-weight:850;cursor:pointer;box-shadow:0 10px 22px rgba(20,90,170,.28);transition:transform .18s ease,box-shadow .18s ease}
#pain-check .pain-pick-go:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(20,90,170,.34)}
#pain-check .pain-pick-go span{transition:transform .18s ease}
#pain-check .pain-pick-go:hover span{transform:translateX(3px)}
#pain-check .pain-pick-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#pain-check .pain-pick-list[hidden]{display:none}
#pain-check .pain-pick-list span{color:#31546e;font-size:12px;font-weight:800}
#pain-check .pain-pick-list select{width:100%;padding:10px 12px;border:1px solid #cfe0ec;border-radius:12px;background:#fff;color:var(--navy);font:inherit;font-size:14px}
#pain-check .pain-pick button:focus-visible,#pain-check .pain-pick select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media(max-width:560px){
  #pain-check .pain-tap-cue{margin:14px 0 10px;gap:5px;padding:0 8px}
  #pain-check .pain-tap-cue-pill{gap:8px;padding:4px 13px 4px 4px}
  #pain-check .pain-tap-cue-icon{width:28px;height:28px}
  #pain-check .pain-tap-cue-icon svg{width:15px;height:15px}
  #pain-check .pain-tap-cue-text{font-size:13px}
  #pain-check .pain-pick{padding:12px}
  #pain-check .pain-pick-idle{flex-wrap:wrap}
  #pain-check .pain-pick-list-toggle{margin-left:52px}
  #pain-check .pain-pick-confirm{flex-wrap:wrap}
  #pain-check .pain-pick-actions{width:100%}
  #pain-check .pain-pick-go{flex:1}
  #pain-check .pain-pin-tag{font-size:12px;padding:5px 10px}
}

@keyframes sfCueIn{0%{opacity:0;transform:translateY(12px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes sfCueGlow{0%,100%{box-shadow:0 8px 22px rgba(14,47,90,.12),0 0 0 4px rgba(20,200,223,.08)}50%{box-shadow:0 10px 26px rgba(14,47,90,.16),0 0 0 7px rgba(20,200,223,.14),0 0 18px rgba(20,200,223,.28)}}
@keyframes sfCueBorder{to{background-position:0 0,300% 0}}
@media(max-width:360px){
  #pain-check .pain-tap-cue-pill{padding-right:11px}
  #pain-check .pain-tap-cue-text{font-size:12.5px}
}
@keyframes sfCueShine{0%,55%{background-position:100% 0}90%,100%{background-position:0 0}}
@keyframes sfCuePing{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(1.55);opacity:0}}
@keyframes sfCueTap{0%,60%,100%{transform:none}70%{transform:translateY(2px) scale(.92)}80%{transform:none}}
@keyframes sfCueArrow{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.45}50%{transform:translateY(3px) rotate(45deg);opacity:1}}
@keyframes sfPainGlow{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes sfPainRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(3.6);opacity:0}}
@keyframes sfPinPop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes sfTagIn{0%{opacity:0;transform:translate(-50%,6px) scale(.94)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes sfPickIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes sfPainDot{0%,100%{box-shadow:0 0 0 5px rgba(255,77,106,.16),0 0 16px rgba(255,77,106,.5)}50%{box-shadow:0 0 0 9px rgba(255,77,106,.07),0 0 24px rgba(255,77,106,.7)}}
@media(prefers-reduced-motion:reduce){
  #pain-check .pain-tap-cue,#pain-check .pain-tap-cue-pill,#pain-check .pain-tap-cue-text,#pain-check .pain-tap-cue-icon i,#pain-check .pain-tap-cue-icon svg,#pain-check .pain-tap-cue-arrow,#pain-check .pain-pin-glow,#pain-check .pain-pin-ring,#pain-check .pain-pick-dot,
  #pain-check .pain-pin.pop .pain-pin-core,#pain-check .pain-pin.pop .pain-pin-tag,#pain-check .pain-pick.is-new .pain-pick-confirm{animation:none}
  #pain-check .pain-pin-ring{opacity:0}
}

/* "How to start" card on the homepage body (same family as the step-3 "How to draw" card).
   A demo that loops forever: drag to turn the body, then tap a pain point. Decorative only -
   it never takes a tap, and it is hidden while the panel is inside the modal. */
#pain-check .tap-howto{position:absolute;left:12px;bottom:14%;z-index:9;width:clamp(96px,20%,132px);display:flex;flex-direction:column;gap:4px;background:#fff;border:1.5px solid #7fdcec;border-radius:16px;padding:7px 7px 8px;box-shadow:0 14px 30px rgba(10,70,110,.16);pointer-events:none;animation:sfTapHowtoIn .5s ease .4s both;transition:opacity .3s ease,visibility .3s ease}
#pain-check .tap-howto-head{display:flex;align-items:center;justify-content:center;gap:4px;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#0b6d93}
#pain-check .tap-howto-head svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#pain-check .tap-howto-art{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:11px;background:#f6fcff;overflow:hidden}
#pain-check .tap-howto-foot{text-align:center;font-size:10px;font-weight:800;line-height:1.25;color:#31546e}
#pain-check .tap-howto-foot b{color:#0a9cc0}
#pain-check .tap-howto-body{animation:sfTapBody 5.6s ease-in-out infinite}
#pain-check .tap-howto-swipe{opacity:0;animation:sfTapSwipe 5.6s ease-in-out infinite}
#pain-check .tap-howto-finger{animation:sfTapFinger 5.6s ease-in-out infinite}
#pain-check .tap-howto-ring{opacity:0;animation:sfTapRing 5.6s ease-out infinite}
#pain-check .tap-howto-pin{opacity:0;animation:sfTapPin 5.6s ease-out infinite}
#pain-check .pain-modal .tap-howto{display:none}
@keyframes sfTapHowtoIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes sfTapBody{0%,6%{transform:translateX(50px) scaleX(1) translateX(-50px)}14%{transform:translateX(50px) scaleX(.28) translateX(-50px)}23%,100%{transform:translateX(50px) scaleX(1) translateX(-50px)}}
@keyframes sfTapSwipe{0%,4%{opacity:0}8%,20%{opacity:.9}26%,100%{opacity:0}}
@keyframes sfTapFinger{0%{opacity:0;transform:translate(38px,40px) scale(1)}5%{opacity:1;transform:translate(38px,40px) scale(.9)}22%{opacity:1;transform:translate(62px,40px) scale(.9)}26%{opacity:1;transform:translate(62px,40px) scale(1)}40%{opacity:1;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}43%{transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(.84)}47%{transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}84%{opacity:1;transform:translate(calc(var(--tap-x,45px) + 2.5px),calc(var(--tap-y,71.5px) + 5.5px)) scale(1)}92%,100%{opacity:0;transform:translate(calc(var(--tap-x,45px) + 2.5px),calc(var(--tap-y,71.5px) + 5.5px)) scale(1)}}
@keyframes sfTapRing{0%,42%{opacity:0;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}44%{opacity:.95;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}62%,100%{opacity:0;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(4.2)}}
@keyframes sfTapPin{0%,43%{opacity:0;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(0)}48%{opacity:1;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1.3)}53%{opacity:1;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}86%{opacity:1;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}95%,100%{opacity:0;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px)) scale(1)}}
@media(max-width:820px){#pain-check .tap-howto{left:8px}}
@media(max-width:340px){#pain-check .tap-howto{bottom:calc(14% + 22px)}}
@media(max-width:430px){#pain-check .tap-howto{width:88px;padding:5px 5px 6px;border-radius:14px;gap:3px}#pain-check .tap-howto-head{font-size:8px;letter-spacing:.04em}#pain-check .tap-howto-head svg{width:10px;height:10px}#pain-check .tap-howto-foot{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){
  #pain-check .tap-howto,#pain-check .tap-howto-body,#pain-check .tap-howto-swipe,#pain-check .tap-howto-ring{animation:none}
  #pain-check .tap-howto-finger{animation:none;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px))}
  #pain-check .tap-howto-pin{animation:none;opacity:1;transform:translate(var(--tap-x,45px),var(--tap-y,71.5px))}
}