/* Shared on-screen zoom control (Bob 66, 30 Sep 2026). See zoom-control.js. */
.zc{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;font-family:Arial,Helvetica,sans-serif;}
.zc-top-left{left:12px;top:12px;}
.zc-top-right{right:12px;top:12px;}
.zc-bottom-left{left:12px;bottom:12px;}
.zc-bottom-right{right:12px;bottom:12px;}
.zc-top-left,.zc-top-right{flex-direction:column-reverse;}
.zc-bottom-left,.zc-bottom-right{flex-direction:column;}

.zc[data-theme="dark"]{--zc-bg:rgba(16,13,9,.82);--zc-bg-hover:rgba(239,229,207,.14);--zc-ink:#efe5cf;--zc-border:rgba(239,229,207,.38);--zc-track:rgba(239,229,207,.28);}
.zc[data-theme="cream"]{--zc-bg:rgba(255,254,244,.94);--zc-bg-hover:rgba(23,63,53,.08);--zc-ink:#173f35;--zc-border:rgba(23,63,53,.32);--zc-track:rgba(23,63,53,.2);}

.zc-toggle{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--zc-border);background:var(--zc-bg);color:var(--zc-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.28);backdrop-filter:blur(3px);cursor:pointer;
}
.zc-toggle:hover{background:var(--zc-bg-hover);}
.zc-toggle:focus-visible{outline:2px solid var(--zc-ink);outline-offset:2px;}
.zc-toggle[aria-expanded="true"]{background:var(--zc-bg-hover);}

.zc-panel{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;
  border-radius:24px;border:1px solid var(--zc-border);background:var(--zc-bg);
  box-shadow:0 8px 22px rgba(0,0,0,.3);backdrop-filter:blur(3px);
  opacity:0;transform:scale(.92);transition:opacity .18s ease,transform .18s ease;
}
.zc-top-left .zc-panel,.zc-top-right .zc-panel{transform-origin:50% 0;margin-top:8px;transform:translateY(-6px) scale(.92);}
.zc-bottom-left .zc-panel,.zc-bottom-right .zc-panel{transform-origin:50% 100%;margin-bottom:8px;transform:translateY(6px) scale(.92);}
.zc.zc-open .zc-panel{opacity:1;transform:none;}

.zc-step{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--zc-border);background:transparent;color:var(--zc-ink);
  font-size:20px;line-height:1;cursor:pointer;
}
.zc-step:hover{background:var(--zc-bg-hover);}
.zc-step:focus-visible{outline:2px solid var(--zc-ink);outline-offset:2px;}
.zc-step:disabled{opacity:.35;cursor:default;}

.zc-track{position:relative;width:44px;height:120px;margin:2px 0;}
.zc-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);border-radius:2px;background:var(--zc-track);}
.zc-fill{position:absolute;left:50%;bottom:0;width:4px;transform:translateX(-50%);border-radius:2px;background:var(--zc-ink);}
.zc-thumb{position:absolute;left:50%;top:0;width:44px;height:44px;transform:translate(-50%,-50%);touch-action:none;cursor:grab;}
.zc-thumb::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--zc-ink);border:2px solid var(--zc-bg);box-shadow:0 1px 4px rgba(0,0,0,.45);}
.zc-thumb:active{cursor:grabbing;}
.zc-thumb:focus-visible::before{outline:2px solid var(--zc-ink);outline-offset:3px;}

@media(prefers-reduced-motion:reduce){
  .zc-panel{transition:none;}
  .zc-top-left .zc-panel,.zc-top-right .zc-panel,.zc-bottom-left .zc-panel,.zc-bottom-right .zc-panel{transform:none;}
}