/* ─── css/sketch.css — the Sketch tool's palette (js/sketch.js) ── */
.sk-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;
  padding:6px 10px;max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none;
  background:rgba(16,20,28,.92);border:1px solid var(--line2,var(--line));border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);color:var(--ink);font-size:12px;white-space:nowrap}
.sk-bar::-webkit-scrollbar{display:none}
.sk-bar[hidden]{display:none}
.sk-group{display:flex;align-items:center;gap:4px}
.sk-b{width:34px;height:34px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink);font-size:17px;cursor:pointer;position:relative}
.sk-b::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;height:3px;border-radius:2px;background:var(--sk,transparent)}
.sk-b.sk-er::after{display:none}
.sk-b:hover{background:rgba(255,255,255,.06)}
.sk-b.on{background:rgba(255,255,255,.1);border-color:var(--accent,#d8a55a)}
.sk-cols{gap:3px}
.sk-sw{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.18);cursor:pointer;padding:0}
.sk-sw.on{border-color:var(--accent,#d8a55a);transform:scale(1.12)}
.sk-pick{width:26px;height:24px;padding:0;border:none;background:none;cursor:pointer}
.sk-size input{width:96px}
.sk-lab{color:var(--mut)}
.sk-val{font-family:var(--mono,monospace);color:var(--mut);min-width:28px;text-align:right}
.sk-pen{color:var(--mut);font-size:11px}
/* on a phone: under the top bar, three rows - brushes, colours, size - that fit the width */
body.is-phone .sk-bar{top:6px;left:8px;right:8px;transform:none;max-width:none;border-radius:16px;
  flex-wrap:wrap;overflow:visible;gap:6px;padding:6px 8px;white-space:normal}
body.is-phone .sk-group{flex:1 1 100%;justify-content:space-between;min-width:0}
body.is-phone .sk-b{width:36px;height:36px;flex:0 0 auto}
body.is-phone .sk-cols{gap:0}
body.is-phone .sk-sw{width:22px;height:22px;flex:0 0 auto}
body.is-phone .sk-pick{width:24px;flex:0 0 auto}
body.is-phone .sk-size input{flex:1 1 auto;width:auto;min-width:0}
body.is-phone .sk-pen{display:none}
.sk-finger{font-size:13px;width:auto;padding:0 8px}
body:not(.is-mobile) .sk-finger{display:none}