/* ─── 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(84px + env(safe-area-inset-bottom,0px))!important;border-radius:14px;padding:3px}
  body.is-phone .nh-cluster .nh-b{width:40px;height:40px}
  body.is-phone .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px));left:12px;right:12px;max-width:none;transform:none}

  /* ── the dock: a floating pill instead of a full-width bar ── */
  body.is-phone .editor{padding-bottom:0}
  body.is-phone .mobile-tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:60px;
    padding:4px;gap:2px;border:1px solid var(--line2,var(--line));border-radius:20px;
    background:rgba(16,20,28,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.45)}
  body.is-phone .mtab{border-radius:15px;font-size:10px;gap:3px;transition:background .15s,color .15s}
  body.is-phone .mtab .mti{font-size:18px}
  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:8px;right:8px;width:auto!important;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));height:52vh;max-height:52vh;
    border:1px solid var(--line2,var(--line));border-radius:18px}

  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:8px;right:8px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:75;
  max-height:70vh;overflow-y:auto;padding:12px 14px 14px;border-radius:18px;
  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 .mobile-tabs{left:auto;right:calc(8px + env(safe-area-inset-right,0px));top:50px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
  width:62px;height:auto;flex-direction:column;justify-content:center;border-radius:18px}
body.is-phone.ph-land .mtab{flex:0 0 auto;height:auto;min-height:50px;width:100%}
body.is-phone.ph-land .left,body.is-phone.ph-land .right{left:auto;right:calc(78px + env(safe-area-inset-right,0px));top:50px;
  bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(360px,58vw)!important;height:auto;max-height:none}
body.is-phone.ph-land .ph-sheet{left:auto;right:calc(78px + env(safe-area-inset-right,0px));top:50px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
  width:min(380px,60vw);max-height:none}
body.is-phone.ph-land .nh-cluster{right:calc(80px + 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:90px}
body.is-phone.ph-land .joy{bottom:14px!important}
body.is-phone.ph-land .walk-btns{right:calc(86px + 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}