/* ── Pikselipaja ─────────────────────────────────────────────
   Two themes. Every colour is a token here, because a stylesheet with
   #1d3b32 sprinkled through it can only ever have one theme.

   :root                  the dark palette, and the fallback if JS never runs
   [data-theme="light"]   the light one

   "auto" is resolved in theme.js and written into data-theme, rather than
   living in a prefers-color-scheme block — one palette in one place beats two
   copies that drift apart.
*/
:root{
  color-scheme:dark;

  --bg:#0d0f16;
  --bg2:#12151f;
  --panel:#171b27;
  --panel2:#1d2231;
  --line:#272d3f;
  --line2:#333b52;
  --ink:#e6e9f2;
  --dim:#8b93ab;
  --faint:#7e87a1;
  --fainter:#6b7490;

  --acc:#64e2b7;          /* accent: borders, active text        */
  --acc-bg:#1d3b32;       /* accent: filled background           */
  --acc-ink:#b7f5e0;      /* accent: text on that background     */
  --acc-line:#2f6d5b;
  --acc-bg-hi:#24513f;    /* accent: hover on filled background  */
  --acc2:#ff5c8a;
  --warn:#ffd166;
  --sel-ink:#06231a;      /* text colour inside ::selection      */

  --btn-hover:#252c3e;
  --btn-hover-line:#3f4a67;

  --check-a:#2a3244;      /* transparency checkerboard           */
  --check-b:#1b202c;
  --stage-a:#151a26;      /* the void the canvas floats in       */
  --stage-b:#0b0d13;
  --stage-ink:#7c86a3;

  --bar-a:#171c28;        /* header / dock gradient              */
  --bar-b:#12151f;
  --dock-a:#161b27;
  --dock-b:#0f121a;

  --scrim:rgba(6,8,13,.6);
  --sw-line:rgba(255,255,255,.14);
  --thumb-bg:#0d0f16;
  --layer-on:#1a2b28;
  --scroll:#2a3244;
  --glass:rgba(23,27,39,.94);
  --shadow-lg:rgba(0,0,0,.55);
  --canvas-shadow:rgba(0,0,0,.55);

  --r:6px;
  --dock-h:0px;              /* height the thumb dock steals, phone only */
  --safe-b:env(safe-area-inset-bottom,0px);
  --mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
}

/* Warm paper rather than a plain white, so it reads as a workshop in
   daylight rather than a word processor. */
:root[data-theme="light"]{
  color-scheme:light;

  --bg:#e9e6df;
  --bg2:#f2efe8;
  --panel:#e2ded4;
  --panel2:#fbfaf6;
  --line:#d3cec2;
  --line2:#a9a294;
  --ink:#232630;
  --dim:#4f5563;
  --faint:#5c6170;
  --fainter:#767b8a;

  --acc:#12795a;
  --acc-bg:#cbeade;
  --acc-ink:#0b4c37;
  --acc-line:#3d9a7c;
  --acc-bg-hi:#b8e2d1;
  --acc2:#c8305c;
  --warn:#7d5804;
  --sel-ink:#06231a;

  --btn-hover:#efece5;
  --btn-hover-line:#8e8779;

  --check-a:#cfcabd;
  --check-b:#e6e2d9;
  --stage-a:#dcd9d0;
  --stage-b:#c6c2b8;
  --stage-ink:#635f52;

  --bar-a:#efece4;
  --bar-b:#e4e1d8;
  --dock-a:#efece4;
  --dock-b:#e6e2d9;

  --scrim:rgba(60,57,50,.42);
  --sw-line:rgba(0,0,0,.2);
  --thumb-bg:#f2efe8;
  --layer-on:#d8ebe3;
  --scroll:#bab3a4;
  --glass:rgba(247,245,239,.95);
  --shadow-lg:rgba(70,64,52,.3);
  --canvas-shadow:rgba(70,64,52,.32);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font:12px/1.45 var(--mono);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,output{font:inherit;color:inherit}
button{touch-action:manipulation}
::selection{background:var(--acc);color:var(--sel-ink)}

/* ── header ── */
.bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  min-height:46px;padding:0 10px;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,var(--bar-a),var(--bar-b));
  border-bottom:1px solid var(--line);
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-weight:700;letter-spacing:.18em;font-size:12px;
  white-space:nowrap;
}
/* the same dagger as the home-screen icon, so the app and its icon agree */
.logo-mark{
  width:18px;height:18px;display:block;border-radius:3px;
  image-rendering:pixelated;
}
.bar-group{display:flex;align-items:center;gap:6px}
.bar-spacer{flex:1}
.mini{color:var(--dim);font-size:11px;white-space:nowrap}

/* name of the drawing — editable in place, saved as you type */
.docname{
  flex:0 1 190px;min-width:70px;
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  padding:4px 7px;color:var(--ink);outline:none;
  text-overflow:ellipsis;
}
.docname:hover{border-color:var(--line2)}
.docname:focus{border-color:var(--acc);background:var(--panel2)}

/* ── controls ── */
.ctl{
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);
  padding:4px 6px;outline:none;
}
.ctl:focus{border-color:var(--acc)}
.ctl.num{width:52px;text-align:center}
.ctl.thin{padding:3px 5px;font-size:11px}
.ctl.hex{width:88px;text-transform:uppercase}
.btn{
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);
  padding:5px 9px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,transform .06s;
}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover-line)}
.btn:active{transform:translateY(1px)}
.btn.tiny{padding:2px 6px;font-size:11px}
.btn.icon-btn{padding:7px 12px;font-size:19px;line-height:1}
.btn.iconly{display:grid;place-items:center;padding:6px;width:34px;height:30px}
.btn.iconly svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc-ink)}
.btn.primary:hover{background:var(--acc-bg-hi);border-color:var(--acc)}
.btn.toggle.on,.btn.iconly.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc-ink)}
.btn:disabled{opacity:.35;cursor:default}

.seg{display:flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;flex:0 0 auto}
.seg button{background:var(--panel2);border:0;padding:3px 8px;cursor:pointer;font-size:11px}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--acc-bg);color:var(--acc-ink)}

input[type=range]{
  -webkit-appearance:none;appearance:none;height:14px;background:transparent;flex:1;min-width:60px;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:2px;
  background:var(--acc);border:1px solid var(--acc-line);cursor:pointer;
}
input[type=range]::-moz-range-track{height:4px;background:var(--line2);border-radius:2px}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:2px;background:var(--acc);border:1px solid var(--acc-line)}
output{color:var(--acc);min-width:22px;text-align:right;font-size:11px}

/* ── layout ── */
.app{flex:1;display:grid;grid-template-columns:52px 1fr 272px;min-height:0}

/* ── toolbar ── */
.tools{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 0;background:var(--bg2);border-right:1px solid var(--line);
  overflow-y:auto;
}
.tool{
  width:38px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  color:var(--dim);position:relative;
}
.tool:hover{background:var(--panel2);color:var(--ink)}
.tool.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tool b{position:absolute;right:2px;bottom:0;font-size:8px;color:var(--line2);font-weight:400}
.tool.on b{color:var(--acc-line)}
.tool .tname{display:none}
.tool-sep{width:26px;height:1px;background:var(--line);margin:4px 0}

/* ── stage ── */
.stage{
  position:relative;overflow:hidden;min-width:0;
  background:radial-gradient(120% 120% at 50% 0%,var(--stage-a) 0%,var(--stage-b) 100%);
  cursor:crosshair;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.stage.panning{cursor:grab}
.stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.stage-hint{
  position:absolute;left:10px;bottom:8px;color:var(--stage-ink);font-size:10px;
  pointer-events:none;letter-spacing:.04em;
}
/* live selection indicator, with the way out attached to it */
.selchip{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:7px;
  padding:5px 6px 5px 11px;border-radius:20px;white-space:nowrap;
  background:var(--glass);border:1px solid var(--acc);color:var(--ink);
  font-size:11px;box-shadow:0 8px 22px var(--shadow-lg);backdrop-filter:blur(8px);
}
.selchip[hidden]{display:none}

/* ── side ── */
.side{
  background:var(--bg2);border-left:1px solid var(--line);
  overflow-y:auto;overflow-x:hidden;
}
.side::-webkit-scrollbar,.tools::-webkit-scrollbar,.layer-list::-webkit-scrollbar,
.gal-grid::-webkit-scrollbar{width:9px}
.side::-webkit-scrollbar-thumb,.tools::-webkit-scrollbar-thumb,
.layer-list::-webkit-scrollbar-thumb,.gal-grid::-webkit-scrollbar-thumb{
  background:var(--scroll);border-radius:5px;border:2px solid var(--bg2)}
.panel{border-bottom:1px solid var(--line)}
.panel-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;background:var(--panel);cursor:pointer;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  -webkit-user-select:none;user-select:none;
}
.panel-head::after{content:'▾';font-size:9px;color:var(--line2);letter-spacing:0}
.panel.collapsed .panel-head::after{content:'▸'}
.panel.collapsed .panel-body{display:none}
.fold{display:none}
.head-actions{display:flex;gap:4px;margin-left:auto}
.panel-head>.badge{margin-left:auto}
.panel-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.sub{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:2px;
}
.hint{margin:0;font-size:10.5px;line-height:1.5;color:var(--faint)}
.hint b{color:var(--dim)}
/* a backup that is old, or was never made, should catch your eye */
.hint.warn{color:var(--warn)}
.hint.warn::before{content:'⚠ ';}
.badge{
  background:var(--panel2);border:1px solid var(--line2);border-radius:20px;
  padding:1px 7px;font-size:10px;letter-spacing:0;text-transform:none;color:var(--dim);
}
.opt-row{display:flex;align-items:center;gap:8px}
.opt-row>.mini{width:60px}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.btn-grid .btn{padding:5px 4px;font-size:11px}
.btn-grid .btn.wide{grid-column:1/-1}

/* ── colour ── */
.swap-row{display:flex;align-items:center;gap:8px}
.chip-stack{display:flex;gap:6px}
.chip{
  width:34px;height:34px;padding:0;border-radius:var(--r);cursor:pointer;
  border:2px solid var(--line2);
  background-image:linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%),
                   linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%);
  background-size:10px 10px;background-position:0 0,5px 5px;background-color:var(--check-b);
}
.chip span{display:block;width:100%;height:100%;border-radius:3px}
.chip.active{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-bg)}

/* the wheel: hue ring + inscribed saturation/brightness square */
.wheel-wrap{
  position:relative;width:100%;max-width:340px;margin:2px auto 4px;
  touch-action:none;
}
#wheel{display:block;touch-action:none;border-radius:50%}
/* The two picker handles stay black-on-white in both themes: they sit on the
   wheel and the alpha ramp, not on any themed surface, so they have to work
   against every colour there is rather than against the UI. */
.wcur{
  position:absolute;width:19px;height:19px;border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 2px 5px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);pointer-events:none;
}

.slider{
  position:relative;height:14px;border-radius:var(--r);border:1px solid var(--line2);
  cursor:pointer;touch-action:none;flex:1;
}
.slider.alpha{
  background-image:linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%),
                   linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;background-color:var(--check-b);
  overflow:hidden;
}
#alphaFill{position:absolute;inset:0}
.knob{
  position:absolute;top:50%;width:8px;height:20px;border-radius:3px;
  background:#fff;border:1px solid #000;transform:translate(-50%,-50%);pointer-events:none;
}
.rgb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.rgb-row label,.hex-row label{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--dim)}
.rgb-row .num{width:100%;padding:3px 2px}
.hex-row{display:flex;align-items:center;gap:8px}
#nativePick,.color-input{
  width:28px;height:24px;padding:0;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--panel2);cursor:pointer;flex:0 0 auto;
}
.bg-presets{display:flex;gap:4px}
.bg-presets button{
  width:20px;height:20px;padding:0;cursor:pointer;border-radius:3px;
  border:1px solid var(--sw-line);
}
.bg-presets button:hover{outline:1px solid var(--acc);outline-offset:1px}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.sw{
  aspect-ratio:1;border-radius:3px;border:1px solid var(--sw-line);cursor:pointer;padding:0;
  position:relative;
}
.sw:hover{outline:1px solid var(--acc);outline-offset:1px}
.sw.empty{border-style:dashed;border-color:var(--line2);background:transparent;cursor:default}

/* ── layers ── */
.layer-list{display:flex;flex-direction:column;gap:3px;max-height:170px;overflow-y:auto}
.layer{
  display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;
  background:var(--panel2);border:1px solid transparent;border-radius:var(--r);
}
.layer:hover{border-color:var(--line2)}
.layer.on{border-color:var(--acc);background:var(--layer-on)}
.layer .eye{
  width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--dim);font-size:11px;
}
.layer.hidden-l .lname{opacity:.4;text-decoration:line-through}
.layer .thumb{
  width:22px;height:22px;flex:0 0 auto;border:1px solid var(--line2);border-radius:3px;
  image-rendering:pixelated;background:var(--thumb-bg);
}
.lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.lop{font-size:10px;color:var(--dim)}

/* ── status ── */
.status{
  flex:0 0 24px;display:flex;align-items:center;gap:16px;padding:0 12px;
  background:var(--panel);border-top:1px solid var(--line);
  font-size:10.5px;color:var(--dim);
}
.status .dim{color:var(--fainter)}
#stTool{color:var(--acc);min-width:74px}
#stPos{min-width:64px}
#stSel{color:var(--warn)}

/* ── contextual strip + thumb dock (phone only) ── */
.quickbar,.dock{display:none}
.quickbar[hidden],.qgroup[hidden]{display:none}

/* ── timeline ──
   A strip of frames above the dock. Hidden until you ask for it, because on
   a phone every row it takes is a row of canvas you don't get. */
.timeline{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  background:var(--bg2);border-top:1px solid var(--line);
}
.timeline[hidden]{display:none}
.tl-btn{
  flex:0 0 auto;width:38px;height:46px;cursor:pointer;line-height:1;font-size:14px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--dim);
}
.tl-btn:hover{color:var(--ink);border-color:var(--btn-hover-line)}
.tl-btn.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc-ink)}
.tl-frames{
  flex:1;min-width:0;display:flex;gap:5px;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:1px;
}
.tl-frames::-webkit-scrollbar{display:none}
.tlf{
  position:relative;flex:0 0 auto;width:46px;height:46px;padding:2px;cursor:pointer;
  background:repeating-conic-gradient(var(--check-b) 0 25%,var(--check-a) 0 50%) 0 0/8px 8px;
  border:1px solid var(--line2);border-radius:var(--r);
}
.tlf canvas{
  display:block;width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;
}
.tlf b{
  position:absolute;left:1px;bottom:0;font-size:8px;font-weight:400;
  color:var(--ink);background:var(--bg2);padding:0 2px;border-radius:2px;opacity:.85;
}
.tlf.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
/* the canvas is the only thing worth looking at mid-playback */
body.playing .stage-hint{opacity:0}

/* ── reference photo ── */
.refbox{
  position:fixed;z-index:35;
  border:1px solid var(--line2);border-radius:8px;overflow:hidden;
  background:var(--bg);box-shadow:0 12px 34px var(--shadow-lg);
  touch-action:none;cursor:move;
}
.refbox[hidden]{display:none}
.refbox img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ref-resize{
  position:absolute;right:0;bottom:0;width:30px;height:30px;cursor:nwse-resize;
  background:linear-gradient(315deg,var(--acc) 0 36%,transparent 36%);opacity:.9;
}
/* trace mode: welded to the canvas, and completely transparent to touch */
.refbox.trace{
  z-index:6;border:0;border-radius:0;box-shadow:none;background:transparent;
  pointer-events:none;
}
.refbox.trace img{image-rendering:auto}
.refbox.trace .ref-resize{display:none}
.ref-grip{display:none}

/* below: an ordinary layout box under the stage, so nothing overlaps the
   canvas and the stage simply gets shorter */
.refbox.below{
  position:static;flex:0 0 auto;width:auto;
  border:0;border-top:1px solid var(--line2);border-radius:0;
  box-shadow:none;background:var(--bg2);cursor:default;
  padding-top:9px;
}
.refbox.below img{height:100%;object-fit:contain}
.refbox.below .ref-resize{display:none}
.refbox.below .ref-grip{
  display:block;position:absolute;left:0;right:0;top:0;height:14px;
  cursor:ns-resize;touch-action:none;
}
.refbox.below .ref-grip::after{
  content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:38px;height:4px;border-radius:2px;background:var(--line2);
}

.refctl{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--dock-h) + var(--safe-b) + 32px);
  z-index:37;display:flex;align-items:center;gap:6px;
  padding:6px 9px;border-radius:24px;
  background:var(--glass);border:1px solid var(--line2);
  box-shadow:0 12px 32px var(--shadow-lg);
  backdrop-filter:blur(8px);
}
.refctl[hidden]{display:none}
.refctl.dimmed{opacity:.55}
.refctl input[type=range]{width:72px;flex:0 0 auto;min-width:0}
.refctl .btn.tiny{padding:5px 8px}

/* ── your drawings ── */
.gallery{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.gallery[hidden]{display:none}
.gal-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,var(--bar-a),var(--bar-b));border-bottom:1px solid var(--line);
}
.gal-title{flex:1;display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.gal-grid{
  flex:1;overflow-y:auto;align-content:start;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;padding:12px;
}
.gal-empty{grid-column:1/-1;padding:24px 4px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gal-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:9px 14px calc(11px + var(--safe-b));border-top:1px solid var(--line);
}
.gal-foot .hint{flex:1;min-width:0}
.gal-foot .btn{flex:0 0 auto}
.gcard{position:relative}
.gopen{
  display:block;width:100%;padding:0;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
}
.gcard.on .gopen{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-bg)}
.gthumb{
  aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:repeating-conic-gradient(var(--check-b) 0 25%,var(--check-a) 0 50%) 0 0/16px 16px;
}
.gthumb img{max-width:100%;max-height:100%;image-rendering:pixelated}
.gthumb.blank::after{content:'empty';font-size:10px;color:var(--line2)}
.gmeta{display:flex;flex-direction:column;gap:2px;padding:7px 9px 9px}
.gname{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsub{font-size:10px;color:var(--dim)}
.gmenu{
  position:absolute;top:5px;right:5px;width:30px;height:30px;line-height:1;
  border-radius:8px;cursor:pointer;color:var(--ink);
  background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(4px);
}
.gpop{
  position:absolute;top:38px;right:5px;z-index:2;
  display:flex;flex-direction:column;gap:4px;padding:6px;min-width:112px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 14px 34px var(--shadow-lg);
}

/* ── modal ── */
.modal{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:50;
}
/* author `display` beats the UA stylesheet's [hidden]{display:none} — restore it */
.modal[hidden]{display:none}
.modal-card{
  width:min(560px,92vw);max-height:80vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 24px 60px var(--shadow-lg);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.modal-foot{
  display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);
  padding-bottom:calc(10px + var(--safe-b));
}
.modal-foot .btn{flex:1;padding:11px}

/* ── canvas size dialog ── */
.chip-size{
  flex:0 0 auto;font-size:11px;padding:5px 8px;color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.chip-size:hover{color:var(--ink)}
.size-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.size-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:6px 4px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--dim);
}
.size-opt:hover{border-color:var(--btn-hover-line);color:var(--ink)}
.size-opt.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc-ink)}
.size-dim{font-size:12px;font-variant-numeric:tabular-nums}
.size-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* nine-way picker for where the art sits after a resize */
.anchor{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:96px}
.anchor button{
  aspect-ratio:1;padding:0;cursor:pointer;border-radius:3px;
  background:var(--panel2);border:1px solid var(--line2);
}
.anchor button:hover{border-color:var(--acc)}
.anchor button.on{background:var(--acc);border-color:var(--acc)}

.keys{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.keys div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--dim)}
.keys kbd{
  background:var(--panel2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;
  padding:1px 5px;font:inherit;color:var(--ink);font-size:10px;
}
.toast{
  position:fixed;left:50%;bottom:calc(var(--dock-h) + var(--safe-b) + 44px);
  transform:translateX(-50%);
  background:var(--acc-bg);border:1px solid var(--acc);color:var(--acc-ink);
  padding:7px 14px;border-radius:20px;font-size:11px;z-index:62;
  animation:pop .25s ease-out;pointer-events:none;
  box-shadow:0 8px 24px var(--shadow-lg);
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(6px)}}

@media (max-width:1080px){
  .app{grid-template-columns:52px 1fr 240px}
}

/* ── touch / phone hint text, hidden by default (desktop wins) ── */
.hint-touch{display:none}
.btn.phone{display:none}
.side-head{display:none}
.side-backdrop{display:none}
.share-btn{flex:1}
.phone-view-acts{display:none}

/* ── phone layout ──
   Below this width there is no room for a 52px tool rail, a 272px side
   column and a canvas. So: the tools become a slide-up tray, the panels a
   sheet, and the six things you actually keep touching — undo, redo, brush,
   eraser, colour, tools — move to a dock under your thumb. */
@media (max-width:860px), (pointer:coarse){
  :root{--dock-h:66px}

  .hint-mouse{display:none}
  .hint-touch{display:inline}
  .desk{display:none !important}
  .btn.phone{display:grid}
  .phone-view-acts{display:grid}

  .bar{flex-wrap:nowrap;gap:6px;padding:0 8px;padding-top:env(safe-area-inset-top,0px)}
  .docname{flex:1 1 auto;max-width:none;font-size:15px;padding:6px 8px}
  .btn.iconly{width:38px;height:36px}
  .btn.iconly svg{width:21px;height:21px}

  /* keep iOS from zooming the page when a field takes focus */
  .ctl,.docname{font-size:16px}
  .ctl.thin,.ctl.num{font-size:15px}

  .app{grid-template-columns:1fr;grid-template-rows:1fr}
  .stage{grid-column:1;grid-row:1}
  .status{display:none}

  /* tool tray — slides up over the dock, closes when you pick something */
  .tools{
    position:fixed;left:0;right:0;bottom:0;z-index:41;
    display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:stretch;
    padding:16px 12px calc(16px + var(--safe-b));
    background:var(--panel);border:0;border-top:1px solid var(--line2);
    border-radius:16px 16px 0 0;overflow:visible;
    box-shadow:0 -16px 44px var(--shadow-lg);
    transform:translateY(106%);
    transition:transform .24s cubic-bezier(.32,.72,0,1);
  }
  .tools.open{transform:translateY(0)}
  .tool{
    width:auto;height:62px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;
    background:var(--panel2);border-color:var(--line2);
  }
  .tool svg{width:24px;height:24px}
  .tool b{display:none}
  .tool .tname{display:block;font-size:9.5px;font-style:normal;letter-spacing:.02em}
  .tool-sep{display:none}

  /* side panels → bottom sheet */
  .side-backdrop{
    display:block;position:fixed;inset:0;background:var(--scrim);
    z-index:39;opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .side-backdrop.show{opacity:1;pointer-events:auto}
  .side{
    position:fixed;left:0;right:0;bottom:0;
    max-height:86dvh;width:auto;
    border-left:0;border-top:1px solid var(--line2);
    border-radius:16px 16px 0 0;
    padding-bottom:var(--safe-b);
    box-shadow:0 -16px 50px var(--shadow-lg);
    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    z-index:40;
  }
  .side.open{transform:translateY(0)}
  .side-head{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:1;
    padding:10px 12px 8px;background:var(--bg2);
    border-bottom:1px solid var(--line);
  }
  .side-head .mini{flex:1;text-align:center}
  .grabber{width:36px;height:4px;border-radius:2px;background:var(--line2)}
  .panel-head{padding:13px 12px}
  .layer-list{max-height:210px}
  .layer{padding:7px 8px}
  .layer .thumb{width:30px;height:30px}
  .layer .eye{width:26px;height:26px;font-size:14px}

  /* comfier touch targets throughout the sheet */
  .btn{padding:8px 12px}
  .btn.tiny{padding:6px 10px}
  .btn-grid .btn{padding:11px 4px;font-size:12px}
  .sw{min-height:34px}
  .chip{width:44px;height:44px}
  .slider{height:22px}
  .knob{height:30px;width:10px}
  input[type=range]{height:26px}
  input[type=range]::-webkit-slider-runnable-track{height:5px}
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8.5px;border-radius:11px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:11px}
  .swatches{grid-template-columns:repeat(8,1fr);gap:5px}

  /* ── contextual strip: only what the current tool needs ── */
  .quickbar{
    display:flex;flex:0 0 auto;align-items:center;gap:12px;
    padding:5px 12px;min-height:38px;
    background:var(--bg2);border-top:1px solid var(--line);
    overflow-x:auto;scrollbar-width:none;
  }
  .quickbar::-webkit-scrollbar{display:none}
  .qgroup{display:flex;align-items:center;gap:7px;flex:0 0 auto}
  #qgSize,#qgTol{flex:1 1 130px;min-width:120px}
  .qgroup .seg button{padding:6px 12px;font-size:12px}
  .quickbar output{font-size:12px}

  /* ── thumb dock ── */
  .dock{
    display:grid;flex:0 0 auto;grid-template-columns:repeat(6,1fr);gap:3px;
    padding:5px 6px calc(5px + var(--safe-b));
    background:linear-gradient(180deg,var(--dock-a),var(--dock-b));
    border-top:1px solid var(--line);
  }
  .dk{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;padding:2px;cursor:pointer;
    background:transparent;border:1px solid transparent;border-radius:11px;color:var(--dim);
  }
  .dk svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .dk b{font-size:9px;font-weight:400;letter-spacing:.04em}
  .dk.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}
  .dk:active{background:var(--panel2)}
  .dk:disabled{opacity:.26}
  .dk-swatch{
    width:25px;height:25px;border-radius:50%;border:2px solid var(--line2);
    background-image:linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%),
                     linear-gradient(45deg,var(--check-a) 25%,transparent 25%,transparent 75%,var(--check-a) 75%);
    background-size:10px 10px;background-position:0 0,5px 5px;
  }
  .dk-swatch.pale{border-color:var(--faint)}

  .timeline{padding:6px 8px calc(6px)}
  .tlf{width:52px;height:52px}
  .tl-btn{width:44px;height:52px;font-size:16px}

  .size-grid{gap:7px}
  .size-opt{min-height:60px}
  .size-dim{font-size:13px}
  .anchor{width:116px}
  .chip-size{font-size:12px;padding:6px 8px}

  .stage-hint{bottom:6px;font-size:9.5px}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(45%,1fr))}
  .keys{grid-template-columns:1fr}
  .refctl{gap:5px;padding:6px 8px}
  .refctl input[type=range]{width:60px;height:22px}
}

/* very narrow phones: the dock labels are the first thing to go */
@media (max-width:360px){
  .dk b{display:none}
  .dk{min-height:48px}
  .tools{grid-template-columns:repeat(4,1fr)}
}