/* ─── css/phone.css — the minimal phone layout (body.is-phone: ≤ 600 px, or a phone on its side). js/phone.js
   The drawing takes the whole screen; one slim top row, a floating dock,
   everything else one tap away in the More sheet. */

/* body.is-phone is set by js/phone.js (width, or a short touch screen): no width query here */
@media all{
  /* ── top bar: sheet, undo / redo, Export ── */
  body.is-phone .topbar{height:48px;min-height:48px;padding:4px 8px;gap:4px;flex-wrap:nowrap;overflow:hidden}
  body.is-phone .brand-text,body.is-phone .brand .build,body.is-phone #ws-name,
  body.is-phone .cloud-bar,body.is-phone .topbar .ph-hide,body.is-phone .topbar .cmd{display:none!important}
  body.is-phone .brand{flex:0 0 auto;gap:0}
  body.is-phone .st-crumb{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:13px;padding:7px 10px;border-radius:10px}
  body.is-phone .st-crumb{display:flex;align-items:center;gap:6px}
  body.is-phone .st-crumb .st-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.is-phone .st-crumb .st-sub{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  body.is-phone .topbar .st-ib{flex:0 0 auto;min-width:38px;min-height:38px}
  body.is-phone .topbar .st-btn.primary{flex:0 0 auto;padding:0;width:40px;min-height:38px;justify-content:center}
  body.is-phone .topbar .st-btn.primary span{display:none}

  /* ── off the canvas: story bar, snap chips, zoom buttons (pinch zooms) ── */
  body.is-phone .story-bar,body.is-phone .statusbar{display:none!important}
  body.is-phone .nh-cluster .nh-b[title^="Zoom"],body.is-phone .nh-cluster .nh-sep,
  body.is-phone .nh-cluster .nh-b[title^="Showcase"]{display:none}
  body.is-phone .nh-cluster{top:auto!important;left:auto!important;right:12px!important;
    bottom:calc(var(--ph-dock) + 8px)!important;border-radius:14px;padding:3px}
  body.is-phone .nh-cluster .nh-b{width:40px;height:40px}
  body.is-phone .toast{bottom:calc(var(--ph-dock) + 10px);left:12px;right:12px;max-width:none;transform:none}

  /* ── the dock: anchored to the bottom edge, as slim as it can be (--ph-dock = its whole height) ── */
  body.is-phone{--ph-dock:calc(44px + env(safe-area-inset-bottom,0px))}
  body.is-phone .editor{padding-bottom:0}
  body.is-phone .mobile-tabs{left:0;right:0;bottom:0;height:var(--ph-dock);box-sizing:border-box;
    padding:0 4px env(safe-area-inset-bottom,0px);gap:0;border:0;border-top:1px solid var(--line2,var(--line));border-radius:0;
    background:rgba(16,20,28,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none}
  body.is-phone .mtab{border-radius:10px;font-size:9px;gap:0;line-height:1.1;transition:background .15s,color .15s}
  body.is-phone .mtab .mti{font-size:16px;line-height:1.1}
  body.is-phone .mtab.active{background:rgba(255,255,255,.07);color:var(--accent)}
  body.is-phone .mtab.ph-canvas,body.is-phone .mtab.ph-extra{display:none}

  /* ── drawers sit above the dock, as cards ── */
  body.is-phone .left,body.is-phone .right{left:0;right:0;width:auto!important;
    bottom:var(--ph-dock);height:46vh;max-height:46vh;
    border:1px solid var(--line2,var(--line));border-width:1px 0 0;border-radius:16px 16px 0 0}

  body.is-phone .left .panel,body.is-phone .right .panel{flex-direction:column}
  body.is-phone #panel-dock{display:none!important}
  /* Tools as a thumb grid: icon over label, three across */
  body.is-phone .panel[data-tab=tools] .toolbar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  body.is-phone .panel[data-tab=tools] .tool{flex-direction:column;justify-content:center;align-items:center;gap:4px;
    min-height:64px;padding:8px 4px;border-radius:12px;text-align:center;font-size:11px;line-height:1.15}
  body.is-phone .panel[data-tab=tools] .tool .ti{font-size:19px}
  body.is-phone .panel[data-tab=tools] .tool .tl{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  body.is-phone .panel[data-tab=tools] .tool-sep{grid-column:1/-1;margin:8px 2px 2px}
  body.is-phone .panel[data-tab=tools] > h3 .hint,body.is-phone .panel[data-tab=tools] > h3 small{display:none}

  /* ── fade the chrome while a finger is on the drawing ── */
  body.is-phone .topbar,body.is-phone .mobile-tabs,body.is-phone .nh-cluster{transition:opacity .2s ease}
  body.is-phone.ph-busy .mobile-tabs,body.is-phone.ph-busy .nh-cluster{opacity:.12;pointer-events:none}
  body.is-phone.ph-busy .topbar{opacity:.35}
}

/* ── the More sheet (built by phone.js; only ever shown on a phone) ── */
.ph-scrim{position:fixed;inset:0;z-index:74;background:rgba(0,0,0,.35)}
.ph-sheet{position:fixed;left:0;right:0;bottom:var(--ph-dock,44px);z-index:75;
  max-height:60vh;overflow-y:auto;padding:12px 14px 14px;border-radius:16px 16px 0 0;border-width:1px 0 0;
  background:var(--panel,#141922);border:1px solid var(--line2,var(--line));color:var(--ink);
  box-shadow:0 -10px 34px rgba(0,0,0,.55);animation:ph-up .18s ease-out}
.ph-sheet[hidden],.ph-scrim[hidden]{display:none}
@keyframes ph-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ph-sheet{animation:none}}
.ph-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.ph-name{flex:1;min-width:0;font-size:15px;font-weight:600;padding:9px 10px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.ph-x{flex:0 0 40px;height:40px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--mut);font-size:15px}
.ph-sec{margin-top:12px}
.ph-sec-t{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 2px 7px}
.ph-sel{width:100%;min-height:42px;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:14px}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px}
.ph-chip{min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--line);background:none;color:var(--mut);font-size:13px}
.ph-chip.on{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.04)}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:72px;
  border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:12px}
.ph-tile .ph-g{font-size:20px;line-height:1;color:var(--accent)}
.ph-tile:active,.ph-chip:active,.ph-x:active{transform:scale(.97)}
.ph-foot{margin-top:12px;font-size:11px;color:var(--mut);text-align:center}

/* ── touch.js: the aiming reticle of press-and-hold, above the finger ── */
.tc-aim{position:absolute;left:0;top:0;z-index:58;width:0;height:0;pointer-events:none}
.tc-aim[hidden]{display:none}
.tc-aim::before{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:2px solid #1f6fff;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(0,0,0,.35)}
.tc-aim i{position:absolute;left:-1px;top:17px;width:2px;height:calc(var(--tail,72px) - 36px);
  background:linear-gradient(#1f6fff,rgba(31,111,255,0));border-radius:1px}
.tc-aim::after{content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#1f6fff}

/* ── landscape: the dock is a rail on the right, drawers open beside it ── */
body.is-phone.ph-land .topbar{height:42px;min-height:42px;padding:3px 8px}
body.is-phone.ph-land{--ph-dock:0px}
body.is-phone.ph-land .mobile-tabs{left:auto;right:0;top:42px;bottom:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)) 4px;
  width:calc(54px + env(safe-area-inset-right,0px));height:auto;flex-direction:column;justify-content:center;border-width:0 0 0 1px}
body.is-phone.ph-land .mtab{flex:0 0 auto;height:auto;min-height:44px;width:100%}
body.is-phone.ph-land .left,body.is-phone.ph-land .right{left:auto;right:calc(54px + env(safe-area-inset-right,0px));top:42px;
  bottom:0;width:min(360px,58vw)!important;height:auto;max-height:none;border-radius:0;border-width:0 1px 0 1px}
body.is-phone.ph-land .ph-sheet{left:auto;right:calc(54px + env(safe-area-inset-right,0px));top:42px;bottom:0;
  width:min(380px,60vw);max-height:none;border-radius:0}
body.is-phone.ph-land .nh-cluster{right:calc(64px + env(safe-area-inset-right,0px))!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
body.is-phone.ph-land .toast{bottom:calc(12px + env(safe-area-inset-bottom,0px));left:12px;right:74px}
body.is-phone.ph-land .joy{bottom:14px!important}
body.is-phone.ph-land .walk-btns{right:calc(66px + env(safe-area-inset-right,0px))!important}

/* ── touch screens: nothing highlights or drags by accident while you navigate ── */
body.is-touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body.is-touch img,body.is-touch canvas,body.is-touch svg{-webkit-user-drag:none;user-drag:none}
body.is-touch input,body.is-touch textarea,body.is-touch select,body.is-touch [contenteditable="true"],body.is-touch .txt{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body.is-phone.ph-land .left::before,body.is-phone.ph-land .right::before{display:none}
body.is-phone.ph-land .ph-grid{grid-template-columns:repeat(4,1fr)}
body.is-phone.ph-land .ph-tile{min-height:60px}

/* ── a 3D view on a phone: ONE slim icon row under the top bar (no scrolling), panels as bottom sheets ── */
.sp-advbtn{display:none}
body.is-phone .sheet3d-bar{top:0;left:0;right:0;transform:none;max-width:none;overflow:visible;box-sizing:border-box;
  flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:2px;padding:2px 6px;
  border-radius:0;border-width:0 0 1px 0;background:rgba(14,18,25,.78)}
body.is-phone .sheet3d-bar .s3-ic{flex:1 1 0;min-width:0;width:auto;height:38px;font-size:15px;justify-content:center}
body.is-phone .sheet3d-bar .s3-final{flex:0 0 auto;height:28px;min-height:0;padding:0 10px;font-size:12px;margin-right:4px}
body.is-phone .sheet3d-bar .s3-go{flex:0 0 auto;height:28px;min-width:0;padding:0 8px;font-size:12px}
body.is-phone .sheet3d-bar .s3-status{display:none}
body.is-phone .nh-size{display:none}
body.is-phone #stage > .site-pop{position:fixed;left:0;right:0;top:auto;bottom:var(--ph-dock);width:auto;max-height:44vh;transform:none;
  box-sizing:border-box;padding:0 12px 10px;gap:4px;border-radius:16px 16px 0 0;border-width:1px 0 0;
  background:rgba(14,18,25,.95);z-index:76;overscroll-behavior:contain}
body.is-phone.ph-land #stage > .site-pop{left:auto;right:calc(54px + env(safe-area-inset-right,0px));top:78px;bottom:0;width:min(360px,58vw);max-height:none;border-radius:0;border-width:0 1px}
body.is-phone #stage > .site-pop .sp-head,body.is-phone #stage > .site-pop .rp-head{position:sticky;top:0;z-index:3;
  margin:0 -12px;padding:8px 12px;background:rgba(14,18,25,.97)}
body.is-phone #stage > .site-pop .hint,body.is-phone #stage > .site-pop .sp-skybox,body.is-phone #stage > .site-pop .sp-readout{display:none}
body.is-phone #stage > .site-pop:not(.sp-adv-open) .sp-adv{display:none}
body.is-phone #stage > .site-pop .sp-advbtn{display:block;align-self:flex-start;margin-top:6px}
body.is-phone #stage > .site-pop .sp-row{min-height:34px}

/* ── touch targets ≥ 36 px (fit audit 2026-10-12, dev/fit-audit.js): every control a finger can hit ───────── */
body.is-touch .lt-btn,body.is-touch .lt-car{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
body.is-touch .st-group{height:auto;min-height:40px}
body.is-touch .st-ib,body.is-touch.studio .panel>h3 .st-ib{width:auto;height:auto;min-width:38px;min-height:38px}
body.is-touch .st-crumb{height:40px}
body.is-touch.studio .sheet3d-bar .s3-ic,body.is-touch .s3-ic{min-width:38px;height:38px;font-size:15px}
body.is-touch .sheet3d-bar .mbtn{min-height:38px}
body.is-touch input[type=checkbox],body.is-touch input[type=radio]{width:20px;height:20px;min-width:20px}
/* form controls in panels and sheets: a finger's height; a slider gets a 36 px hit area (its track and thumb unchanged) */
body.is-touch select,body.is-touch .sel,body.is-touch .numbox,body.is-touch .txt,
body.is-touch input[type=text],body.is-touch input[type=number],body.is-touch input[type=search],body.is-touch input[type=color],body.is-touch .colbox{min-height:38px}
body.is-touch input[type=range]{min-height:36px}
body.is-touch .s3-opt{min-height:36px}
body.is-touch .site-pop .mini,body.is-touch .mm-panel .mini{min-width:38px;min-height:38px}
body.is-touch .rp-reset{min-width:36px;min-height:36px}
/* a row of buttons: each as wide as its label, wrapping — flex-basis 0 squeezed '★ Save to global library' */
body.is-touch .btnrow>*{flex:1 1 auto}
body.is-touch .btnrow{flex-wrap:wrap}
body.is-touch .rp-item{min-height:40px}
/* the time-of-day dial (daydial.js): its time, play and the six moments of the day as finger-sized chips */
body.is-touch .dd-time,body.is-touch .dd-btn{min-width:40px;min-height:36px}
body.is-touch .dd-p{min-height:36px;padding:0 9px;display:inline-flex;align-items:center}
body.is-mobile .site-pop .sp-head{background:#0e1219}           /* solid: what scrolls under the sticky title must not ghost through it */
body.is-mobile .site-pop>*,body.is-mobile .lens-pop>*{flex-shrink:0}      /* a min-height on a row of this column replaced its content minimum: squeezed rows drew their fields over the next label */

/* ── rendering on a phone / tablet: no accent (it is heavy work, not the main thing to do there) + the warning (render/output.js) ── */
body.is-touch .sheet3d-bar .s3-final,body.is-mobile .sheet3d-bar .s3-final,body.is-touch .rp-btns .mini.primary,body.is-mobile .rp-btns .mini.primary{
  background:transparent;border:1px solid var(--line2,var(--line));color:var(--ink);font-weight:500;box-shadow:none}
.rw-wrap{position:fixed;inset:0;z-index:9700;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);padding:0 0 env(safe-area-inset-bottom,0px)}
.rw-card{width:min(440px,100%);margin:12px;padding:18px 18px 14px;border-radius:18px;background:rgba(20,24,31,.97);border:1px solid rgba(255,255,255,.1);color:#e7ebf0;font:14px/1.5 var(--sans,system-ui);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.rw-card b{display:block;font-size:16px;margin-bottom:6px;color:#ffd60a}
.rw-card p{margin:0 0 8px;color:#b9c3cf}.rw-card .rw-size{font-size:12.5px;color:#8b96a5}
.rw-btns{display:flex;gap:10px;margin-top:12px}
.rw-btns button{flex:1;min-height:44px;border-radius:12px;font:600 14px var(--sans,system-ui);cursor:pointer}
.rw-no{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e7ebf0}
.rw-go{background:#2a303b;border:1px solid #3a4150;color:#fff}

/* ── menus over a 3D view float like the desktop's (studio.css body.ov3d): see-through and blurred, so the picture stays in sight ── */
body.is-mobile.ov3d .left,body.is-mobile.ov3d .right{background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
body.is-mobile.ov3d .left>.panel,body.is-mobile.ov3d .right>.panel{background:transparent}
body.is-mobile.ov3d .left>.panel>h3,body.is-mobile.ov3d .right>.panel>h3{background:color-mix(in srgb,var(--panel) 70%,transparent)}
body.is-phone.ov3d #stage > .site-pop{background:color-mix(in srgb,#0e1219 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
body.is-phone.ov3d #stage > .site-pop .sp-head,body.is-phone.ov3d #stage > .site-pop .rp-head{background:color-mix(in srgb,#0e1219 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.is-phone.ov3d .ph-sheet{background:color-mix(in srgb,var(--panel,#141922) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* a phone on its side: the LEFT menus (Tools, Layers, Sheets) open at the left edge, the right ones beside the dock — like the desktop */
body.is-phone.ph-land .left{left:env(safe-area-inset-left,0px);right:auto;border-width:0 1px 0 0;box-shadow:12px 0 34px rgba(0,0,0,.35)}
body.is-phone.ph-land .right{box-shadow:-12px 0 34px rgba(0,0,0,.35)}
/* tighter: less padding in the drawers and sheets */
body.is-mobile .panel{padding:9px 12px}
body.is-phone #stage > .site-pop{gap:2px}
body.is-mobile .left>.sp-panel:not(.st-on),body.is-mobile .right>.sp-panel:not(.st-on){display:none}      /* inactive side panels (File, Import, Team, Assist, AI) stacked their headers under the open one */
/* a phone on its side, 3D view: the side menus start under the view's icon row (like the 3D panels at top:78px), never over it */
body.is-phone.ph-land.ov3d .left,body.is-phone.ph-land.ov3d .right{top:80px}
/* every text-like field a finger's height (the AI panel's key / URL fields were 21 px) */
body.is-touch input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]){min-height:38px}