/* lJWILLYl Kubrow Companion — Version 3.2 Mobile UI */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
img,canvas,video,svg{max-width:100%}
main,.shell,.hero,.panel,.card,.wizardShell{min-width:0}

/* Shared menu button */
.mobileMenuButton{display:none;width:46px;height:42px;min-width:46px;padding:0;border:1px solid #294760;border-radius:12px;background:#102338;color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;box-shadow:none}
.mobileMenuButton span{display:block;width:21px;height:2px;border-radius:4px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.mobileMenuButton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobileMenuButton[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobileMenuButton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobileNavBackdrop{display:none}

/* Prevent wide child content */
.actions,.head,.panelHead,.appHeader,.top,.toolbar{max-width:100%}
.actions>*{max-width:100%}
input,select,textarea,button,.button{font-size:16px}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}

@media(max-width:860px){
  .top,.appHeader{position:sticky!important;top:0!important;z-index:50!important;width:100%;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:11px 14px!important;border-radius:0!important;margin:0!important;background:rgba(5,13,23,.97)!important;backdrop-filter:blur(18px)}
  .appHeader{border-left:0!important;border-right:0!important;border-top:0!important}
  .brand,.appBrand{min-width:0;flex:1}
  .brand span,.appBrand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobileMenuButton{display:inline-flex}
  .top nav,.appHeader nav{display:none!important;position:fixed!important;top:65px!important;left:12px!important;right:12px!important;z-index:60!important;max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;padding:10px!important;margin:0!important;border:1px solid #294760!important;border-radius:16px!important;background:#071522!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .top nav.mobileOpen,.appHeader nav.mobileOpen{display:grid!important}
  .top nav a,.appHeader nav a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;width:100%!important;padding:11px 8px!important;margin:0!important;text-align:center!important;border:1px solid #294760!important;border-radius:11px!important;background:#0d2032!important;color:#e9f4ff!important;font-size:.9rem!important;line-height:1.2!important}
  .top nav a.active,.appHeader nav a.active{border-color:#63decf!important;background:#163249!important;color:#fff!important}
  .mobileNavBackdrop.active{display:block;position:fixed;inset:0;z-index:45;background:rgba(0,5,10,.62);backdrop-filter:blur(2px)}
  body.menuOpen{overflow:hidden}

  main{width:100%;padding:18px 13px 58px}
  .shell{width:100%;padding:0 12px 55px}
  .hero{padding:22px 17px!important;border-radius:17px!important}
  .hero h1{font-size:clamp(2rem,11vw,3.3rem)!important;line-height:1.02!important;overflow-wrap:anywhere}
  .hero p{font-size:1rem;line-height:1.55}
  .panel,.card{padding:16px!important;border-radius:17px!important}
  .cards{grid-template-columns:1fr!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .filters,.two,.three,.results,.traits,.profileGrid,.imageStage{grid-template-columns:1fr!important}
  .shot{height:auto;aspect-ratio:16/10}
  .profileShot{min-height:0!important;height:auto!important;aspect-ratio:4/3}
  .profileBody{padding:18px!important}
  .profileBody h2{font-size:clamp(2rem,10vw,2.8rem)!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .actions button,.actions .button,.actions a{width:100%!important;min-height:47px}
  .panelHead{align-items:flex-start!important}
  .panelHead>*{max-width:100%}
  .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .toolbar>*{width:100%!important;margin:0!important}
  .wizardTop{align-items:flex-start!important}
  .wizardTop h2{font-size:1.45rem}
  .wizardCount{white-space:nowrap}
  .wizardProgress{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .wizardDot{min-width:0;font-size:.68rem;overflow:hidden}
  .wizardNav{left:8px;right:8px;bottom:7px;padding:8px}
  .wizardNav button{min-width:0!important;flex:1;padding:12px 8px}
  .compactPrimary{width:100%!important;margin-left:0!important}
  .placementSteps{grid-template-columns:1fr!important}
  .samplerButtons,.modeTabs{grid-template-columns:1fr!important}
  .magnifierCard{position:static!important}
  .result{min-width:0}
  .colourRow{font-size:1rem;overflow-wrap:anywhere}
  .reviewRow,.gene{align-items:flex-start;flex-direction:column;gap:4px}
  dialog{width:calc(100% - 20px)!important;max-width:none!important;margin:auto!important;padding:14px!important;max-height:92dvh!important}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
  .top nav,.appHeader nav{grid-template-columns:1fr!important}
  .stats{grid-template-columns:1fr!important}
  .brandMark{width:36px;height:36px;min-width:36px}
  .brand b{font-size:.9rem}.brand span{font-size:.68rem}
  .appBrand strong{font-size:.92rem}.appBrand small{font-size:.7rem}
  .hero{padding:19px 15px!important}
  .hero h1{font-size:clamp(1.9rem,12vw,2.8rem)!important}
  .wizardProgress{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wizardTop{display:grid!important;grid-template-columns:1fr auto!important}
  .wizardTop .eyebrow{grid-column:1/-1}
  .wizardCount{font-size:.82rem;padding:7px 10px}
  .card,.panel{margin-top:12px!important}
  .trait{font-size:.82rem}
}

/* Safe areas for modern phones */
@supports(padding:max(0px)){
  .top,.appHeader{padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
  main,.shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}



/* ============================================================
   Kubrow Companion v6.2.7 — Mobile Sampler Mode
   ============================================================ */
.mobileSamplerDock,
.mobileSamplerLaunch{display:none}

@media(max-width:860px){
  #paletteWorkspace.mobileSamplerEnabled{
    padding-bottom:20px!important;
  }

  #paletteWorkspace .mobileSamplerLaunch{
    display:block;
    width:100%;
    min-height:48px;
    margin:0 0 12px;
    border:1px solid rgba(91,224,206,.36);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(91,224,206,.14),rgba(74,132,190,.10));
    color:var(--text,#eef4ff);
    font-weight:800;
  }

  #paletteWorkspace.mobileSamplerEnabled .imageStage{
    display:block!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:none;
    padding-bottom:8px;
  }

  #paletteWorkspace.mobileSamplerEnabled #paletteImageWrap{
    width:var(--kc-mobile-zoom,100%)!important;
    min-width:var(--kc-mobile-zoom,100%)!important;
    max-width:none!important;
    margin:0!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #paletteCanvas{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    touch-action:pan-x pan-y!important;
  }

  /* Make the target easy to grab without making the visible crosshair huge. */
  #paletteWorkspace.mobileSamplerEnabled .marker{
    width:52px!important;
    height:52px!important;
    margin-left:0!important;
    margin-top:0!important;
    border:none!important;
    border-radius:50%!important;
    background:transparent!important;
    touch-action:none!important;
    z-index:12!important;
    box-shadow:none!important;
  }

  #paletteWorkspace.mobileSamplerEnabled .marker::before,
  #paletteWorkspace.mobileSamplerEnabled .marker::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  #paletteWorkspace.mobileSamplerEnabled .marker::before{
    width:18px;
    height:18px;
    border:2px solid #fff;
    border-radius:50%;
    background:rgba(4,14,22,.32);
    box-shadow:0 0 0 3px rgba(54,223,197,.22),0 2px 10px rgba(0,0,0,.65);
  }

  #paletteWorkspace.mobileSamplerEnabled .marker::after{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#5be0ce;
    box-shadow:0 0 9px #5be0ce;
  }

  #paletteWorkspace.mobileSamplerEnabled .marker.locked::before{
    border-color:#84f2b8;
    box-shadow:0 0 0 4px rgba(132,242,184,.18);
  }

  .mobileSamplerDock{
    display:block;
    position:sticky;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:50;
    margin:12px -2px 0;
    padding:14px;
    border:1px solid rgba(91,224,206,.30);
    border-radius:18px;
    background:rgba(6,17,29,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 18px 45px rgba(0,0,0,.42);
  }

  .mobileSamplerDock[hidden]{display:none!important}

  .mobileSamplerTop{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:12px;
  }

  .mobileSamplerTop strong{
    display:block;
    font-size:1.05rem;
    margin:2px 0;
  }

  .mobileSamplerTop small{
    display:block;
    color:var(--muted,#9fb0c6);
    line-height:1.35;
  }

  .mobileSamplerKicker{
    display:block;
    color:#68e4cf;
    font-size:.66rem;
    letter-spacing:.12em;
    font-weight:900;
  }

  .mobileSamplerMini{
    flex:none;
    min-height:36px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:.76rem!important;
  }

  .mobileSamplerSlotRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-bottom:12px;
  }

  .mobileSamplerSlotRow button,
  .mobileStepPicker button,
  .mobileZoomPicker button{
    min-height:42px!important;
    padding:8px!important;
    border-radius:11px!important;
    font-size:.76rem!important;
  }

  .mobileSamplerSlotRow button.active,
  .mobileStepPicker button.active,
  .mobileZoomPicker button.active{
    border-color:#5be0ce!important;
    background:rgba(91,224,206,.15)!important;
    color:#b9fff5!important;
  }

  .mobileSamplerSlotRow button.locked{
    color:#91f2b9!important;
  }

  .mobileNudgePad{
    width:min(232px,72vw);
    margin:0 auto 12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }

  .mobileNudgePad button{
    aspect-ratio:1.3/1;
    min-height:52px!important;
    padding:8px!important;
    border-radius:14px!important;
    font-size:1.45rem!important;
    font-weight:900!important;
    background:rgba(255,255,255,.055)!important;
  }

  #mobileSamplerCenter{
    font-size:.88rem!important;
    color:#7ce9d9!important;
  }

  .mobileSamplerAdjust{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px;
  }

  .mobileStepPicker,
  .mobileZoomPicker{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }

  .mobileSamplerActions{
    display:grid;
    grid-template-columns:.75fr 1.75fr;
    gap:8px;
  }

  .mobileSamplerActions button{
    min-height:50px!important;
    margin:0!important;
  }

  body.mobileSamplerOpen{
    scroll-padding-bottom:290px;
  }
}

@media(max-width:430px){
  .mobileSamplerDock{padding:12px}
  .mobileSamplerSlotRow button{font-size:.7rem!important}
  .mobileSamplerAdjust{grid-template-columns:1fr}
  .mobileNudgePad{width:min(220px,78vw)}
}



/* v6.2.8 target alignment hotfix:
   The base .marker rule already uses transform:translate(-50%,-50%).
   Do not add negative margins here or the touch target will be centred twice. */
@media(max-width:860px){
  #paletteWorkspace.mobileSamplerEnabled .marker{
    margin:0!important;
  }
}



/* ============================================================
   v6.2.9 — Mobile SVG target alignment
   Mobile targets are now drawn in the screenshot's intrinsic
   coordinate system. The legacy HTML markers remain for desktop.
   ============================================================ */
@media(max-width:860px){
  #paletteWorkspace.mobileSamplerEnabled #paletteImageWrap{
    position:relative!important;
  }

  /* Old markers keep their state for app.js, but are not used visually on mobile. */
  #paletteWorkspace.mobileSamplerEnabled .marker{
    opacity:0!important;
    pointer-events:none!important;
  }

  #mobileSamplerOverlay{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:18;
  }

  #mobileSamplerOverlay .mobileSamplerSvgTarget{
    opacity:.72;
  }

  #mobileSamplerOverlay .mobileSamplerSvgTarget.active{
    opacity:1;
  }

  #mobileSamplerOverlay .halo{
    fill:rgba(6,20,29,.20);
    stroke:rgba(91,224,206,.36);
    stroke-width:5;
    vector-effect:non-scaling-stroke;
  }

  #mobileSamplerOverlay .ring{
    fill:rgba(6,20,29,.42);
    stroke:#ffffff;
    stroke-width:4;
    vector-effect:non-scaling-stroke;
  }

  #mobileSamplerOverlay .dot{
    fill:#5be0ce;
    stroke:#12313a;
    stroke-width:2;
    vector-effect:non-scaling-stroke;
  }

  #mobileSamplerOverlay .locked .ring{
    stroke:#8af2b9;
  }

  #mobileSamplerOverlay .locked .dot{
    fill:#8af2b9;
  }

  #mobileSamplerOverlay .active .halo{
    stroke:rgba(91,224,206,.85);
  }
}

@media(min-width:861px){
  #mobileSamplerOverlay{display:none!important}
}


/* ============================================================
   Kubrow Companion v6.3.2 — Mobile Pinch Zoom Scanner
   ============================================================ */
@media(max-width:860px){
  #paletteWorkspace.mobileSamplerEnabled .imageStage{
    position:relative!important;
    overflow:auto!important;
    max-height:min(62vh,620px);
    touch-action:pan-x pan-y!important;
    scrollbar-width:thin;
    overscroll-behavior:contain;
    background:#030b13;
    border-radius:14px;
  }
  #paletteWorkspace.mobileSamplerEnabled #paletteImageWrap{
    transform-origin:top left!important;
    will-change:width;
  }
  #paletteWorkspace.mobileSamplerEnabled #paletteCanvas{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  body.mobilePinching #paletteWorkspace.mobileSamplerEnabled .imageStage{touch-action:none!important}
  .mobileSamplerActions{grid-template-columns:.9fr .9fr 1.6fr!important}
  #mobileSamplerResetView{border-color:rgba(91,224,206,.28)!important}
}
@media(max-width:470px){
  .mobileSamplerActions{grid-template-columns:1fr 1fr!important}
  #mobileSamplerLock{grid-column:1 / -1}
}



/* ============================================================
   Kubrow Companion v6.3.3 — Large Mobile Screenshot Workspace
   ============================================================ */
@media(max-width:860px){
  /* Let the actual screenshot dominate the precision step. */
  #paletteWorkspace.mobileSamplerEnabled .imageStage{
    width:calc(100vw - 18px)!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw + 9px)!important;
    min-height:48vh!important;
    max-height:66vh!important;
    padding:8px!important;
    border-radius:16px!important;
    display:block!important;
    overflow:auto!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #paletteImageWrap{
    width:var(--kc-mobile-zoom,160%)!important;
    min-width:var(--kc-mobile-zoom,160%)!important;
  }

  /* The loupe is now a small confirmation aid, not the main workspace. */
  #paletteWorkspace.mobileSamplerEnabled .magnifierCard{
    display:grid!important;
    grid-template-columns:104px 1fr!important;
    grid-template-areas:
      "loupe label"
      "loupe confidence"
      "loupe lock";
    align-items:center!important;
    gap:7px 10px!important;
    width:100%!important;
    max-width:none!important;
    margin:10px 0 0!important;
    padding:10px!important;
    border-radius:14px!important;
    position:static!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #magnifier{
    grid-area:loupe;
    width:104px!important;
    height:104px!important;
    max-width:104px!important;
    max-height:104px!important;
    border-radius:10px!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #magnifierLabel{
    grid-area:label;
    align-self:end;
    margin:0!important;
    font-size:.86rem!important;
    line-height:1.2!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #liveConfidence{
    grid-area:confidence;
    margin:0!important;
    font-size:.74rem!important;
    line-height:1.25!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #lockSampler{
    grid-area:lock;
    width:auto!important;
    min-height:36px!important;
    padding:7px 10px!important;
    margin:0!important;
    justify-self:start;
    font-size:.76rem!important;
  }

  /* Keep the current Base/Secondary/Tertiary buttons compact. */
  #paletteWorkspace.mobileSamplerEnabled .placementSteps{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }

  #paletteWorkspace.mobileSamplerEnabled .placementSteps .step{
    min-height:46px!important;
    padding:8px 5px!important;
    font-size:.74rem!important;
  }

  /* Hide redundant desktop-size helper controls while precision mode is active. */
  #paletteWorkspace.mobileSamplerEnabled .samplerControls{
    margin-bottom:10px!important;
  }
}

@media(max-width:470px){
  #paletteWorkspace.mobileSamplerEnabled .imageStage{
    width:calc(100vw - 10px)!important;
    margin-left:calc(50% - 50vw + 5px)!important;
    min-height:52vh!important;
    max-height:69vh!important;
    padding:5px!important;
  }

  #paletteWorkspace.mobileSamplerEnabled .magnifierCard{
    grid-template-columns:88px 1fr!important;
  }

  #paletteWorkspace.mobileSamplerEnabled #magnifier{
    width:88px!important;
    height:88px!important;
    max-width:88px!important;
    max-height:88px!important;
  }
}


/* ============================================================
   Kubrow Companion v6.3.4 — Persistent Mobile Scanner State
   ============================================================ */
@media(max-width:860px){
  /* Keep gestures away from Android/Samsung back-swipe hot zones. */
  #paletteWorkspace.mobileSamplerEnabled .imageStage{
    width:calc(100vw - 34px)!important;
    margin-left:calc(50% - 50vw + 17px)!important;
    border-left:8px solid transparent!important;
    border-right:8px solid transparent!important;
    box-sizing:border-box!important;
    overscroll-behavior:contain!important;
  }

  .mobilePersistentLocks{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin:10px 0;
    padding:7px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    background:rgba(255,255,255,.025);
  }
  .mobilePersistentLocks button{
    min-height:48px!important;
    padding:7px 4px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border-radius:10px!important;
    font-size:.7rem!important;
  }
  .mobilePersistentLocks button span{white-space:nowrap}
  .mobilePersistentLocks button b{font-size:1rem;color:#91a6bd}
  .mobilePersistentLocks button.active{border-color:rgba(91,224,206,.58)!important;background:rgba(91,224,206,.08)!important}
  .mobilePersistentLocks button.locked{border-color:rgba(132,242,184,.55)!important;background:rgba(132,242,184,.08)!important;color:#b8ffd4!important}
  .mobilePersistentLocks button.locked b{color:#8af2b9}

  /* The sampler dock should remain reachable without hiding behind bottom nav. */
  .mobileSamplerDock{
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
    max-height:44vh;
    overflow:auto;
  }
  body.mobileSamplerOpen{scroll-padding-bottom:430px!important}
}
@media(max-width:430px){
  .mobilePersistentLocks button{font-size:.64rem!important}
}



/* ============================================================
   Kubrow Companion v6.3.5 — Scroll Mode + Position Sliders
   ============================================================ */
@media(max-width:860px){
  .mobileInteractionMode{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:10px 0;
    padding:6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.025);
  }
  .mobileInteractionMode button{
    min-height:46px!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    font-size:.78rem!important;
    font-weight:850!important;
  }
  .mobileInteractionMode button.active{
    border-color:#63decf!important;
    background:rgba(99,222,207,.13)!important;
    color:#bafff5!important;
  }

  .mobileTargetSliders{
    display:grid;
    gap:10px;
    margin:10px 0 12px;
    padding:12px;
    border:1px solid rgba(99,222,207,.16);
    border-radius:14px;
    background:rgba(2,12,22,.38);
  }
  .mobileTargetSliders label{
    display:block!important;
    margin:0!important;
  }
  .mobileTargetSliders label>span{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
    color:var(--text,#eef4ff);
    font-size:.78rem;
  }
  .mobileTargetSliders small{
    color:#79e8d8;
    font-variant-numeric:tabular-nums;
  }
  .mobileTargetSliders input[type="range"]{
    width:100%!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    accent-color:#63decf;
    touch-action:pan-y!important;
  }
  .mobileTargetSliders input[type="range"]::-webkit-slider-runnable-track{
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(99,222,207,.28),rgba(75,129,181,.30));
    border:1px solid rgba(255,255,255,.10);
  }
  .mobileTargetSliders input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:32px;
    height:32px;
    margin-top:-12px;
    border-radius:50%;
    border:3px solid #fff;
    background:#63decf;
    box-shadow:0 3px 12px rgba(0,0,0,.45);
  }

  /* Default state: the screenshot is view-only, so vertical swipes scroll the page. */
  #paletteWorkspace.mobileSamplerEnabled.mobileScrollMode .imageStage{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    touch-action:pan-y pan-x!important;
    overscroll-behavior-y:auto!important;
  }
  #paletteWorkspace.mobileSamplerEnabled.mobileScrollMode #paletteCanvas{
    touch-action:pan-y!important;
  }

  /* Only explicit Place Target mode captures screenshot interaction. */
  #paletteWorkspace.mobileSamplerEnabled.mobilePlaceMode .imageStage{
    overflow:auto!important;
    touch-action:pan-x pan-y!important;
    outline:2px solid rgba(99,222,207,.52);
    outline-offset:-2px;
  }
  #paletteWorkspace.mobileSamplerEnabled.mobilePlaceMode #paletteCanvas{
    touch-action:none!important;
  }
  #paletteWorkspace.mobileSamplerEnabled.mobilePlaceMode::before{
    content:"PLACE TARGET MODE — tap a colour box";
    display:block;
    position:sticky;
    top:6px;
    z-index:55;
    width:max-content;
    max-width:90%;
    margin:0 auto 7px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(14,68,62,.96);
    border:1px solid #63decf;
    color:#c7fff6;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.04em;
  }
}

@media(max-width:430px){
  .mobileTargetSliders{padding:10px}
  .mobileInteractionMode button{font-size:.72rem!important}
}