/* InkForge - the dojo: matte, quiet, one seal-red accent for state, 44 px targets for a pen, no text selection, no
   scroll bounce. Every colour is a token the page sets from engine/theme.js (sumi = dark, washi = light); the values
   here are the dark set so the page is right before the first script runs. */
:root {
  --bg: #1b1b1a; --bgDeep: #141413; --panel: #212120; --panel2: #2a2a29; --line: #363634; --lineStrong: #474744;
  --text: #e8e4dc; --muted: #aaa59b; --faint: #7a766e;
  --accent: #cf5b42; --accentSoft: #3a2824; --ok: #7fb08a; --warn: #cfa84f; --danger: #d3675a;
  --hud: rgba(33,33,32,.82); --scrim: rgba(12,12,11,.72); --stage: #272726;
  --rail: 56px; --panelw: 320px; --top: 48px; --tl: 104px;
  --r: 6px; --r2: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); min-height: 40px; min-width: 40px; padding: 0 12px; cursor: pointer; touch-action: manipulation; transition: border-color .12s, background-color .12s; }
button:hover { border-color: var(--lineStrong); } button:disabled { opacity: .4; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.on { background: var(--accentSoft); border-color: var(--accent); color: var(--text); }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.btn.primary:hover { border-color: var(--text); opacity: .92; }
.btn.danger { color: var(--danger); }
input[type=number], input[type=text], input:not([type]), select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); min-height: 40px; padding: 6px 10px; max-width: 100%; }
input[type=color] { min-height: 40px; width: 56px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); min-height: 40px; width: 100%; }
h2, h3, h4 { margin: 12px 0 6px; font-weight: 600; } h3 { font-size: 15px; letter-spacing: .01em; } h4 { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0; line-height: 1.45; } .readout { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; margin: 4px 0; }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; } .field > * { color: var(--text); }
.check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; margin: 2px 0; } .slider .lbl { font-size: 12.5px; color: var(--muted); grid-column: 1 / 3; } .slider .val { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; font-size: 12.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .chip { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 12.5px; text-transform: capitalize; } .chip.on { background: var(--accentSoft); border-color: var(--accent); color: var(--text); }
pre.keys { font: 12px/1.6 ui-monospace, Consolas, monospace; color: var(--muted); white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: var(--r); }

/* top bar */
#top { height: var(--top); display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
#top .icon { min-width: 44px; height: 40px; font-size: 18px; padding: 0; background: transparent; border-color: transparent; } #top .icon:hover { background: var(--panel2); border-color: var(--line); }
/* 9.1 the wordmark: the device's own script face (offline-first, nothing downloaded) — Snell Roundhand on iPad and Mac, Segoe Script on
   Windows (2026-10-07, the owner: "in clean cursive"; Gabriola, first on Windows before, read as calligraphy, not cursive) */
:root { --script: 'Snell Roundhand', 'Savoye LET', 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', 'Apple Chancery', 'Gabriola', cursive; }
#wordmark { margin: 0 6px 0 2px; font-family: var(--script); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: .2px; color: var(--text); white-space: nowrap; user-select: none; flex: 0 0 auto; }
/* 9.1 the quick bar: eight utensils and the four favourites of the one that is on; scrolls sideways on its own when the window is narrow, never the page */
#quickbar { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 2px; }
#quickbar::-webkit-scrollbar { display: none; }
#utensils { display: flex; gap: 2px; flex: 0 0 auto; }
#utensils button { min-width: 44px; height: 40px; padding: 0 9px; font-size: 12.5px; background: transparent; border-color: transparent; color: var(--muted); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
#utensils button .g { display: none; font-size: 15px; line-height: 1; } #utensils button .l { line-height: 1; }
#utensils button:hover { color: var(--text); background: var(--panel2); } #utensils button.on { color: var(--text); background: var(--accentSoft); border-color: var(--accent); }
#favs { display: flex; gap: 4px; flex: 0 0 auto; padding-left: 10px; border-left: 1px solid var(--line); }
#favs button { width: 72px; height: 40px; min-width: 72px; padding: 0; background: var(--bgDeep); border-color: transparent; border-radius: 8px; position: relative; overflow: hidden; }
#favs button canvas { display: block; width: 72px; height: 36px; margin: 2px 0; } #favs button.on { border-color: var(--accent); background: var(--accentSoft); } #favs button.empty::after { content: '+'; color: var(--muted); font-size: 18px; }
#favs button:hover { border-color: var(--line); } #favs button.hold { transform: scale(.94); }
#proj-name { font-weight: 600; padding: 6px 10px; border-radius: var(--r); outline: none; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #proj-name:focus { background: var(--bg); }
#save-status { font-size: 12px; color: var(--muted); } #save-status[data-state=saved] { color: var(--ok); } #save-status[data-state=error] { color: var(--danger); } #save-status[data-state=unsaved] { color: var(--warn); }
.spacer { flex: 1; }

/* main */
#main { flex: 1; display: flex; min-height: 0; position: relative; }
#tools { width: var(--rail); flex: 0 0 var(--rail); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; background: var(--panel); border-right: 1px solid var(--line); overflow: hidden auto; }   /* never sideways: a child poking 1 px past the rail would summon a scrollbar that eats 15 px of height and moves the colour well under the finger */
#tools button { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 18px; background: transparent; border-color: transparent; color: var(--muted); } #tools button:hover { color: var(--text); background: var(--panel2); }
#tools button.on { background: var(--accentSoft); border-color: var(--accent); color: var(--text); } #tools .gap { height: 8px; }
#colorwell { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--lineStrong); position: relative; background: #000; cursor: pointer; margin: auto 0 4px; }
#colorwell .second { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); background: #fff; pointer-events: none; }
/* the hue ring around the well and the knob that rolls through it (the one place the UI shows the spectrum: it IS the colour control) */
#colorwell .ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); opacity: .85; pointer-events: none; }
#hue-knob { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--text); background: #f00; box-shadow: 0 0 0 1px var(--panel); touch-action: none; cursor: grab; z-index: 2; }
#hue-knob::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }   /* a 24 px hit area for a pencil or a finger; the paint stays 12 px */
#hue-knob.dragging { cursor: grabbing; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
#stage-wrap { flex: 1; position: relative; min-width: 0; min-height: 0; background: var(--stage); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
/* 10.5: the slider rail — a size and an opacity slider that LOOK different (icon + accent), a readout while dragging, and Modify / undo / redo under them */
#sliders { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; height: 56%; max-height: 420px; z-index: 3; }
#sliders .sl-pair { display: flex; gap: 6px; flex: 1 1 auto; min-height: 120px; }
#sliders .sl { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
#sliders .sl-ico { font-size: 12px; line-height: 14px; color: var(--muted); } #sliders .sl-ico.op { color: var(--accent); }
#sliders input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 28px; flex: 1 1 auto; min-height: 0; appearance: auto; accent-color: var(--text); }
#sliders #sl-opacity { accent-color: var(--accent); }
#sliders .sl-btns { display: flex; flex-direction: column; gap: 4px; }
#sliders .sl-btns button { min-width: 40px; width: 40px; height: 40px; padding: 0; font-size: 16px; background: var(--hud); border-color: transparent; color: var(--text); border-radius: 10px; }
#sliders #btn-modify.on { background: var(--accentSoft); border-color: var(--accent); }
#slider-hud { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; padding: 4px 10px; border-radius: 12px; background: var(--hud); color: var(--text); pointer-events: none; }
#slider-hud[hidden] { display: none; } body.left #slider-hud { left: auto; right: 70px; }
#hud { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 12px; color: var(--muted); background: var(--hud); padding: 4px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
#text-editor { position: absolute; z-index: 6; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r2); padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); width: min(420px, 90%); }
#text-editor[hidden] { display: none; } .te-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; } .te-bar select, .te-bar input { min-height: 36px; } .te-bar input { width: 72px; } .te-bar button { min-height: 36px; min-width: 36px; }
#te-text { width: 100%; min-height: 72px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; font-size: 16px; resize: vertical; }
#toast { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -20px); background: var(--panel2); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--r2); opacity: 0; transition: .2s; pointer-events: none; } #toast.show { opacity: 1; transform: translate(-50%, 0); }
#panel { width: var(--panelw); flex: 0 0 var(--panelw); display: none; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; } #panel.open { display: flex; }
/* 9.2 the deep library: utensil chips, a search box, foldable pack sections, cards with a real stroke preview and a star */
.brush-search { width: 100%; min-height: 40px; margin: 6px 0; } .brush-chips .chip { min-height: 34px; padding: 0 9px; font-size: 12px; } .brush-section { margin: 8px 0 2px; } .brush-section h4 { margin: 6px 0 2px; }
.brush { grid-template-columns: 1fr 36px; grid-template-areas: 'prev star' 'meta star'; row-gap: 2px; padding: 6px 6px 6px 6px; } .brush .bprev { grid-area: prev; width: 100%; height: 44px; } .brush .meta { grid-area: meta; } .brush .star { grid-area: star; align-self: center; justify-self: center; width: 32px; height: 32px; min-width: 32px; padding: 0; font-size: 16px; color: var(--muted); background: transparent; border-color: transparent; border-radius: 50%; }
.brush .star.on { color: var(--accent); } .brush .star:hover { background: var(--panel2); } .brush .about { font-size: 11.5px; color: var(--muted); white-space: normal; line-height: 1.3; }
.mockup-canvas { width: 100%; max-width: 512px; display: block; background: var(--bgDeep); border-radius: 6px; touch-action: none; margin: 4px 0; } .mockup-swatch.on { box-shadow: 0 0 0 2px var(--accent); } #mockup-custom { width: 80px; }
/* 9.5 the tattoo templates: a grid of body-part cards (outline, name, real size) */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 6px 0; }
.tpl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 92px; background: var(--bgDeep); border-color: transparent; border-radius: 8px; }
.tpl:hover { border-color: var(--line); } .tpl-thumb { width: 48px; height: 48px; } .tpl-name { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; } .tpl-size { font-size: 10.5px; color: var(--muted); }
h4.flash { color: var(--accent); }
.layer .order button.ref { color: var(--faint); } .layer .order button.ref.on { color: var(--accent); }
.brush.mod .name::after { content: ' ●'; color: var(--accent); font-size: 10px; } .brush-memory { align-items: center; } .mod-dot { font-size: 12px; color: var(--muted); } .mod-dot.on { color: var(--accent); }
#undo-scrub { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--hud); border-radius: 18px; z-index: 4; } #undo-scrub[hidden] { display: none; } #undo-scrub input { width: min(360px, 60vw); } #undo-scrub span { font-size: 12px; color: var(--muted); min-width: 64px; }
#tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); } .tabbtn { flex: 1 1 auto; min-height: 40px; padding: 0 8px; font-size: 12.5px; border-radius: var(--r); background: transparent; border-color: transparent; color: var(--muted); } .tabbtn:hover { color: var(--text); background: var(--panel2); } .tabbtn.on { background: var(--panel2); border-color: var(--line); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 24px; -webkit-overflow-scrolling: touch; }
#panel-body .tab { display: none; } #panel-body .tab.on { display: block; }
#panel-body h4 { cursor: pointer; } #panel-body h4::before { content: '▾'; display: inline-block; width: 12px; color: var(--faint); font-size: 10px; } #panel-body h4.folded::before { content: '▸'; }
#panel-body .brush-params h4 { cursor: default; } #panel-body .brush-params h4::before { content: none; } .fold-hidden { display: none !important; }
/* an unrestricted canvas: focus mode hides every piece of chrome; panels may float; the rail may fold into groups */
body.focus #top, body.focus #tools, body.focus #panel, body.focus #timeline, body.focus #sliders, body.focus #hud { display: none; }
#btn-unfocus { position: absolute; top: 8px; right: 8px; z-index: 7; opacity: .55; background: var(--hud); border-color: var(--line); } #btn-unfocus:hover { opacity: 1; } #btn-unfocus[hidden] { display: none; }
body.left #btn-unfocus { right: auto; left: 8px; }
#tools button { position: relative; } #tools button.folded { display: none; }
#tools button.group::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-right: 5px solid var(--faint); border-top: 5px solid transparent; }
#flyout { position: absolute; z-index: 8; display: flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: 0 6px 20px rgba(0,0,0,.25); } #flyout[hidden] { display: none; }
/* 1.25 QuickMenu: a ring of eight slots around the tap; positioned at the tap in page coords */
#quickmenu { position: fixed; z-index: 9; width: 0; height: 0; } #quickmenu[hidden] { display: none; }
#quickmenu .quick-slot { position: absolute; width: 50px; height: 50px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; background: var(--panel); border: 1px solid var(--lineStrong); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
#quickmenu .quick-slot .glyph { font-size: 17px; line-height: 1; } #quickmenu .quick-slot .lbl { font-size: 8px; line-height: 1; color: var(--muted); max-width: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#quickmenu .quick-slot:hover, #quickmenu .quick-slot:focus-visible { background: var(--accentSoft); border-color: var(--accent); }
#quickmenu .quick-centre { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .8; }
@media (max-width: 600px) { #btn-quick { display: none; } }
#flyout button { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 18px; }
body.overlay-panel #panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; box-shadow: -8px 0 24px rgba(0,0,0,.28); } body.overlay-panel.left #panel { right: auto; left: 0; }
body.left #main { flex-direction: row-reverse; } body.left #tools { border-right: 0; border-left: 1px solid var(--line); } body.left #panel { border-left: 0; border-right: 1px solid var(--line); } body.left #sliders { left: auto; right: 6px; }

/* layers */
.layer-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.layer { display: grid; grid-template-columns: 40px 56px 1fr 40px; gap: 8px; align-items: center; padding: 4px; border-radius: 8px; border: 1px solid transparent; background: var(--panel2); cursor: pointer; }
.layer.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.layer .eye { width: 40px; height: 40px; min-width: 40px; padding: 0; font-size: 16px; background: transparent; border: 0; } .layer .eye.off { opacity: .4; }
.layer .thumb { width: 56px; height: 56px; border-radius: 4px; background: repeating-conic-gradient(#8e8d89 0 25%, #a9a8a3 0 50%) 0 0 / 12px 12px; }
.layer .meta, .brush .meta, .proj .meta { min-width: 0; } .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer .order { display: flex; flex-direction: column; gap: 2px; } .layer .order button { width: 40px; height: 27px; min-height: 27px; min-width: 40px; padding: 0; font-size: 11px; }
.layer-props { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }

/* brushes */
.brush-list { display: flex; flex-direction: column; gap: 4px; }
.brush { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; text-align: left; padding: 4px 8px 4px 4px; min-height: 44px; border-radius: 8px; background: transparent; border-color: transparent; }
.brush:hover { background: var(--panel2); } .brush.on { border-color: var(--accent); background: var(--panel2); } .bprev { width: 96px; height: 32px; border-radius: 4px; background: var(--bgDeep); }
.brush-params { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; } .brush-params h4 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; } .brush-params small { color: var(--muted); font-weight: 400; }

/* colour */
.picker canvas { display: block; width: 100%; border-radius: var(--r); } .pk-sv { height: 180px; aspect-ratio: auto; } .pk-hue { height: 28px; margin-top: 8px; }
.pk-row { display: flex; gap: 6px; align-items: end; margin-top: 8px; flex-wrap: wrap; } .pk-row label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); flex: 1 1 56px; min-width: 56px; }
.pk-row input { width: 100%; padding: 6px; } .pk-hex { font-family: ui-monospace, monospace; } .pk-swatch { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); flex: 0 0 40px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sw { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: var(--r); border: 1px solid var(--line); } .sw.small { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } .swatches .lbl { font-size: 11px; color: var(--muted); width: 100%; margin-top: 4px; }

/* tattoo / 3d / export */
.stencil-preview { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: var(--r); background: #f4efe6; margin: 6px 0; }
.gl { display: block; width: 100%; height: 300px; border-radius: var(--r2); background: var(--stage); touch-action: none; }

/* timeline */
#timeline { height: var(--tl); flex: 0 0 var(--tl); display: flex; align-items: stretch; gap: 8px; padding: 6px 8px; background: var(--panel); border-top: 1px solid var(--line); } #timeline[hidden] { display: none; }
.tl-controls { display: flex; flex-direction: column; flex-wrap: wrap; gap: 4px; align-content: start; } .tl-controls button { width: 40px; height: 40px; min-width: 40px; padding: 0; }
.tl-frames { flex: 1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.tl-frame.dragging { opacity: .5; } .tl-frame.drop { outline: 2px solid var(--accent); }
#version-bar { margin-left: 6px; } #version-bar[hidden] { display: none; }
.tl-frame { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; border: 2px solid transparent; background: var(--panel2); cursor: pointer; } .tl-frame.on { border-color: var(--accent); }
.tl-thumb { width: 72px; height: 54px; object-fit: contain; border-radius: 4px; background: #fff; } .tl-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); } .tl-meta .hold { min-height: 22px; height: 22px; min-width: 32px; padding: 0 6px; font-size: 11px; border-radius: 4px; }

/* modal / gallery */
.modal { position: fixed; inset: 0; background: var(--scrim); display: none; align-items: center; justify-content: center; padding: 12px; z-index: 20; } .modal.open { display: flex; }
.studio-card { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 40px); } .studio-head h3 { margin: 0 8px 0 0; } .studio-head input { flex: 1 1 160px; min-width: 120px; }   /* T2 */
.studio-nav { position: sticky; top: -18px; background: var(--panel); padding: 6px 0; z-index: 1; } .studio-body { display: flex; flex-direction: column; gap: 4px; } #studio-pad canvas { width: 100%; height: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 100%; max-height: 100%; overflow: auto; width: 420px; } .card.wide { width: 760px; }
.gallery-list { display: flex; flex-direction: column; gap: 6px; }
.proj { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; background: var(--panel2); border-radius: 8px; padding: 6px; } .pthumb { width: 72px; height: 54px; border-radius: 4px; background: #fff center / cover no-repeat; }
#gallery input[type=text], #gallery input:not([type]) { min-width: 140px; }
/* 2026-10-07 (the sweep): a button styled with display (a.btn is inline-flex) ignored the hidden attribute, so a link the
   tablet app hides (the PC's capture page) still showed; hidden always wins */
.btn[hidden], a.btn[hidden], .row[hidden] { display: none !important; }
.backup-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 8px 10px; border-radius: var(--r); background: var(--accentSoft); border: 1px solid var(--line); color: var(--text); } .backup-nudge[hidden] { display: none; }
#backup-line:empty { display: none; }

/* tablets and phones: the panel becomes a drawer, nothing may scroll sideways */
/* the header budget (measured, 2026-10-06: at 1280 the full labels left the quick bar 571 px for 751 px of content and the last favourites were clipped) */
@media (max-width: 1400px) {
  #utensils button { flex-direction: column; gap: 1px; min-width: 42px; width: 42px; padding: 0 2px; } #utensils button .g { display: block; } #utensils button .l { font-size: 9.5px; }
  #favs button, #favs button canvas { width: 58px; min-width: 58px; } #proj-name { max-width: 120px; } #wordmark { font-size: 19px; }
  #btn-fit { display: none; } #top .icon { min-width: 40px; }   /* fit is the 0 key or a pinch; the theme toggle stays (measured: 32 px of slack at 1280 with 40 px icons) */
  #save-status { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* measured 2026-10-06: the full "scratch (not saved)" label was 108 px of header */
}
@media (max-width: 1100px) {
  #favs button, #favs button canvas { width: 56px; min-width: 56px; } #proj-name, #btn-quick, #btn-focus, #btn-theme { display: none; }   /* the name is in Projects; QuickMenu is a one-finger tap; focus is Tab or four fingers; the theme lives in Settings */
  #wordmark { font-size: 18px; } #save-status { max-width: 22px; }   /* the glyph alone; the words are in its tooltip */
}
@media (max-width: 1000px) {
  #panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, calc(100vw - var(--rail))); z-index: 5; box-shadow: -8px 0 24px rgba(0,0,0,.28); }
  body.left #panel { right: auto; left: 0; }
  #proj-name { max-width: 28vw; }
}
@media (max-width: 600px) {
  :root { --rail: 52px; }
  #btn-theme, #btn-fit { display: none; }   /* a phone's top bar holds five icons: theme lives in Settings, fit is the 0 key or a pinch */
  #favs, #proj-name, #save-status { display: none; }   /* a phone's header: the wordmark, the utensils and five icons; the favourites live in the Brushes tab there */
  #wordmark { font-size: 17px; }
  #tools button { width: 42px; height: 42px; min-width: 42px; }
  .proj { grid-template-columns: 1fr; } .card.wide { width: 100%; }
  #sliders { height: 36%; }
  .layer { grid-template-columns: 36px 48px 1fr 40px; } .layer .thumb { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { button, #toast { transition: none; } }
@media print { body > * { display: none !important; } }

/* 1.21 wave 4c: the drawn curve widget (pressure curve + bindings) and the bindings editor */
.curve-widget { margin: 6px 0; } .curve-widget canvas.curve { display: block; width: 100%; max-width: 360px; height: 150px; border-radius: 6px; background: var(--bgDeep); border: 1px solid var(--line); touch-action: none; cursor: crosshair; } .curve-readout { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; margin: 4px 0; min-height: 16px; } .curve-presets .chip { min-height: 30px; padding: 0 10px; text-transform: none; } .bind-editor { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; } .bind-chips .chip { text-transform: none; }
/* 8.8: the repeat tile preview */
.repeat-preview { display: block; width: 100%; max-width: 360px; border: 1px solid var(--line); border-radius: 6px; background: var(--bgDeep); margin: 6px 0; }
/* 10.14 the floating reference window: over the canvas, moved by its header, resized from the corner */
.refwin { position: fixed; z-index: 40; display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); overflow: hidden; touch-action: none; }
.refwin-head { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 10px; background: var(--panel2); cursor: move; user-select: none; flex: none; }
.refwin-title { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refwin-btn { min-width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; font-size: 15px; }
.refwin-btn:hover { background: var(--panel); }
.refwin-body { position: relative; flex: 1; min-height: 0; background: var(--bgDeep); cursor: grab; }
.refwin-canvas { position: absolute; inset: 0; display: block; }
.refwin-grip { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--lineStrong) 50%, var(--lineStrong) 60%, transparent 60%, transparent 70%, var(--lineStrong) 70%, var(--lineStrong) 80%, transparent 80%); }
/* 10.20 the layer-budget table */
.budget-box { margin: 4px 0 10px; overflow-x: auto; } table.budget { border-collapse: collapse; font-size: 12px; width: 100%; }
table.budget th, table.budget td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } table.budget th:first-child, table.budget td:first-child { text-align: left; white-space: normal; }
table.budget .device { color: var(--accent); font-weight: 600; }
/* 10.12 the gradient stop bar: the bar, the handles under it (each shows its color), the selected stop's controls */
.grad-bar { margin: 4px 0 8px; } .grad-track { position: relative; max-width: 320px; padding-bottom: 22px; }
.grad-bar-canvas { display: block; width: 100%; height: 28px; border-radius: 4px; border: 1px solid var(--line); cursor: copy; touch-action: none; }
.grad-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; }
.grad-stop { position: absolute; top: 2px; width: 18px; height: 18px; min-width: 0; padding: 0; margin-left: -9px; border-radius: 50% 50% 4px 4px; background: var(--stop, #888); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--lineStrong); touch-action: none; cursor: ew-resize; }
.grad-stop.on { box-shadow: 0 0 0 2px var(--accent); }
.grad-op { min-width: 160px; }
/* 10.10 the selection strip (under the selection, or where three fingers swiped down) and the saved selections */
.sel-strip { position: fixed; z-index: 35; display: flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--lineStrong); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.sel-strip .btn { min-height: 36px; padding: 0 10px; }
.saved-sel { display: inline-flex; gap: 2px; } .btn.icon-sm { min-width: 32px; padding: 0; }
/* 10.8 QuickMenu v2: slot kinds, the glow under a dragging finger, the profile button in the center */
.quick-slot.hot { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.08); }
.quick-slot.kind-color-ring { border-color: var(--panel); }
.recent-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 34px; height: 34px; }
.recent-swatch { display: block; border-radius: 4px; border: 1px solid var(--line); }
#quickmenu .quick-profile { position: absolute; left: -48px; width: 96px; min-height: 30px; padding: 0 8px; border-radius: 15px; background: var(--panel2); border: 1px solid var(--accent); color: var(--text); font-size: 12px; }
/* 10.13 the color popover beside the well */
.colorpop { position: fixed; z-index: 45; width: 268px; max-height: calc(100vh - 16px); overflow: auto; padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.colorpop .picker canvas { width: 100%; height: auto; }
.colorpop-label { margin: 8px 0 4px; font-size: 12px; color: var(--muted); }
.colorpop-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.colorpop-swatch { width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 6px; border: 1px solid var(--line); }
.colorpop select { margin: 2px 0 6px; }
.colorpop-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* 10.21 the drawing pad in the Brushes tab */
.brush-pad-canvas { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 300 / 120; background: var(--bgDeep); border: 1px solid var(--line); border-radius: 8px; touch-action: none; margin: 4px 0; }
/* 11.3 find a command */
.cmdk { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(0, 0, 0, 0.25); }
.cmdk[hidden] { display: none; }
.cmdk input { width: min(560px, 92vw); min-height: 48px; font-size: 18px; padding: 0 14px; border-radius: 12px 12px 0 0; border: 1px solid var(--lineStrong); background: var(--panel); color: var(--text); }
.cmdk ul { position: absolute; top: calc(12vh + 48px); width: min(560px, 92vw); margin: 0; padding: 4px 0; list-style: none; background: var(--panel); border: 1px solid var(--lineStrong); border-top: 0; border-radius: 0 0 12px 12px; max-height: 50vh; overflow: auto; }
.cmdk li { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; align-items: center; padding: 0 14px; cursor: pointer; }
.cmdk li.on { background: var(--panel2); } .cmdk .cmdk-kind { color: var(--muted); font-size: 12px; } .cmdk .cmdk-none { color: var(--muted); cursor: default; }
/* 11.4 the History panel */
.history-list { list-style: none; margin: 4px 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.history-list li { min-height: 34px; display: flex; align-items: center; padding: 0 10px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px; }
.history-list li.on { background: var(--panel2); font-weight: 600; } .history-list li.undone { color: var(--muted); font-style: italic; }
/* 11.4 the properties strip: the active tool's options over the top of the canvas */
.props-strip { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; align-items: center; max-width: calc(100% - 160px); overflow-x: auto; padding: 4px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.props-strip:empty { display: none; } .props-strip select, .props-strip input[type=range] { min-height: 32px; } .props-strip .lbl { color: var(--muted); }
/* 11.1 workspaces: what a layout hides, the popover panel of Simple, the Studio menu */
.ws-off { display: none !important; }
body.hz-document-off #btn-gallery, body.hz-document-off #proj-name, body.hz-document-off #save-status { display: none; }
body.hz-stack-off #btn-undo, body.hz-stack-off #btn-redo, body.hz-stack-off #btn-fit, body.hz-stack-off #btn-theme, body.hz-stack-off #btn-focus, body.hz-stack-off #btn-quick, body.hz-stack-off #btn-panel { display: none; }
.pop-btn { min-height: 36px; padding: 0 12px; }
body.popover-panel #panel { position: absolute; top: 8px; right: 8px; bottom: 8px; z-index: 30; border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
body.popover-panel.left #panel { right: auto; left: 8px; }
body.timeline-on #timeline { display: flex !important; }
.studio-menu { position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 4px; min-width: 210px; padding: 8px; background: var(--panel); border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.studio-menu .btn { justify-content: flex-start; text-align: left; } .studio-menu .btn.on { border-color: var(--accent); }
#tabs { display: flex; flex-wrap: wrap; }
/* 11.5 interface size: the chrome scales, the canvas does not */
#top, #tools, #panel, #sliders, #timeline { zoom: var(--ui, 1); }
/* 11.5 the touch shortcut */
.touch-mod { position: absolute; left: 96px; bottom: 74px; z-index: 7; width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 50%; background: var(--panel); border: 2px solid var(--lineStrong); color: var(--text); font-weight: 600; touch-action: none; }
.touch-mod.on { background: var(--accent); color: var(--bg); } .touch-mod.locked { box-shadow: 0 0 0 3px var(--accent); }
body.left .touch-mod { left: auto; right: 96px; }
/* 11.2 the header's pinned tools */
.pins { display: flex; gap: 2px; flex: 0 0 auto; } .pins:empty { display: none; } .pins .pin.on { background: var(--panel2); border-color: var(--accent); }

/* the brush menu (app/ui/brushmenu.js): its button leads the quick bar; on a phone it IS the quick bar */
#brush-menu-btn { flex: 0 0 auto; height: 40px; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; border-radius: 8px; position: relative; }
#brush-menu-btn .g, #brush-menu-btn .u, #brush-menu-btn .n { display: none; }
#brush-menu-btn .c { font-size: 11px; color: var(--muted); line-height: 1; }
#brush-menu-btn.on { background: var(--accentSoft); border-color: var(--accent); }
@media (max-width: 1400px) {
  #brush-menu-btn { flex-direction: column; gap: 1px; width: 44px; padding: 0 2px; }
  #brush-menu-btn .g { display: block; font-size: 15px; line-height: 1; } #brush-menu-btn .l { font-size: 9.5px; line-height: 1; }
  #brush-menu-btn .c { position: absolute; right: 3px; top: 2px; font-size: 9px; }
}
@media (max-width: 1000px) { #favs button, #favs button canvas { width: 52px; min-width: 52px; } }   /* measured: at 1000 the bar was 3 px short */
@media (max-width: 980px) { #favs { display: none; } }   /* below this the four favourites were clipped (at 800: 462 px of room for 665); the menu shows them */
@media (max-width: 720px) {
  #utensils, #favs { display: none; }   /* measured 2026-10-06: at 390 px the bar showed 2 of the 8 utensils; the menu holds them all */
  #brush-menu-btn { flex-direction: row; width: auto; min-width: 44px; max-width: 100%; padding: 0 8px; gap: 5px; }
  #brush-menu-btn .g, #brush-menu-btn .l { display: none; }
  #brush-menu-btn .u { display: inline; font-size: 16px; line-height: 1; }
  #brush-menu-btn .n { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #brush-menu-btn .c { position: static; font-size: 11px; }
}
/* the brush menu, version 2 (owner, 2026-10-06: "better categorisation and a more expansive menu instead of one row that scrolls
   through the full list ... a bolder and easier to navigate menu"): bold categories down the side, pack cards, a grid of brushes */
.brush-menu { position: fixed; z-index: 55; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--lineStrong); border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.5); overflow: hidden; outline: none; -webkit-user-select: none; user-select: none; }
.brush-menu[hidden] { display: none; }
.bm-head { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.bm-head input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 15px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.bm-head .icon { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border-color: transparent; font-size: 18px; }
.bm-head #bm-settings { min-height: 44px; font-weight: 700; }
.bm-back { display: none; min-height: 44px; min-width: 64px; white-space: nowrap; font-weight: 800; font-size: 15px; }
.bm-body { display: flex; flex: 1 1 auto; min-height: 0; }
.bm-cats { flex: 0 0 252px; overflow-y: auto; padding: 4px 8px 16px; border-right: 1px solid var(--line); background: var(--bgDeep); overscroll-behavior: contain; }
.bm-nav-sec { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bm-nav-cats { display: flex; flex-direction: column; gap: 3px; }
.bm-cat { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-align: left; font-size: 15px; font-weight: 700; background: transparent; border: 2px solid transparent; border-radius: 10px; }
.bm-cat .g { font-size: 18px; text-align: center; line-height: 1; } .bm-cat .n { line-height: 1.15; overflow-wrap: anywhere; padding: 4px 0; }   /* a long name wraps rather than losing its end */
.bm-cat .k { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bm-cat .smp { display: none; }
.bm-cat:hover { background: var(--panel2); border-color: var(--line); }
.bm-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; } .bm-cat.on .k { color: rgba(255,255,255,.88); }
.bm-cat.empty { opacity: .4; }
.bm-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 0 16px 20px; overscroll-behavior: contain; position: relative; }
.bm-title { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0 10px; margin-bottom: 10px; background: var(--panel); border-bottom: 2px solid var(--line); }
.bm-title h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; } .bm-title h3 .g { margin-right: 10px; }
.bm-title .k { font-size: 13px; font-weight: 700; color: var(--muted); } .bm-title .about { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.bm-favs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.bm-favs[hidden] { display: none; }
.bm-favs .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.bm-favs button { flex: 0 0 auto; width: 84px; height: 44px; padding: 0; background: var(--bgDeep); border: 2px solid transparent; border-radius: 10px; }
.bm-favs button canvas { display: block; width: 72px; height: 36px; margin: 2px auto; } .bm-favs button.on { border-color: var(--accent); background: var(--accentSoft); }
.bm-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; margin: 0 0 16px; }
.bm-packs[hidden] { display: none; }
.bm-pack { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; min-height: 96px; padding: 9px 10px 8px; text-align: left; background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; }
.bm-pack:hover { border-color: var(--lineStrong); }
.bm-pack .pt { font-size: 15px; font-weight: 800; line-height: 1.2; } .bm-pack .pk { font-size: 12px; font-weight: 700; color: var(--muted); }
.bm-pack canvas { display: block; width: 100%; height: auto; aspect-ratio: 200 / 44; }
.bm-pack.all { background: var(--bgDeep); } .bm-pack.on { border-color: var(--accent); background: var(--accentSoft); }
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; outline: none; }
.bm-sec { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; padding-bottom: 5px; border-bottom: 2px solid var(--line); font-size: 16px; font-weight: 800; }
.bm-sec:first-child { margin-top: 0; } .bm-sec small { font-size: 12px; font-weight: 700; color: var(--muted); }
.bm-item { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 8px 8px 7px; background: var(--panel2); border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.bm-item canvas { display: block; width: 100%; height: auto; aspect-ratio: 200 / 44; background: var(--bgDeep); border-radius: 8px; }
.bm-item .bm-name { padding-right: 34px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-item .bm-tags { padding-right: 34px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-item.hi { border-color: var(--lineStrong); }
.bm-item.cur { border-color: var(--accent); background: var(--accentSoft); }
.bm-item.cur .bm-name::after { content: '  \2713'; color: var(--accent); }
.bm-star { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 18px; color: var(--faint); }
.bm-star:hover { color: var(--text); background: var(--panel); } .bm-star.on { color: var(--warn); }
.bm-none { grid-column: 1 / -1; padding: 16px 4px; font-size: 14px; }
.bm-foot { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .bm-cats { flex-basis: 204px; } .bm-cat { font-size: 14px; } }
@media (max-width: 720px) {
  .brush-menu { border-radius: 12px; }
  .brush-menu[data-level="grid"] .bm-back { display: inline-flex; align-items: center; }
  .brush-menu[data-level="cats"] .bm-main { display: none; }
  .brush-menu[data-level="grid"] .bm-cats { display: none; }
  .bm-head #bm-settings .t { display: none; }   /* the gear says it */
  .bm-cats { flex: 1 1 auto; border-right: 0; padding: 0 8px 14px; }
  .bm-nav-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bm-cat { grid-template-columns: 24px minmax(0, 1fr) auto; align-content: start; min-height: 86px; padding: 8px 10px; background: var(--panel2); border-color: var(--line); }
  .bm-cat .smp { display: block; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 200 / 44; }
  .bm-main { padding: 0 10px 16px; }
  .bm-title h3 { font-size: 21px; }
  .bm-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bm-pack { min-height: 80px; } .bm-pack canvas + canvas { display: none; }
  .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }   /* minmax(0, ...): a long one-line name must not widen its column (measured: 239 + 254 px in a 356 px panel) */ .bm-item { min-height: 84px; } .bm-item .bm-name { font-size: 13px; }
  .bm-favs .lbl { display: none; } .bm-favs button { width: 76px; }
  .bm-foot { display: none; }
}
@media (pointer: coarse) { .bm-foot { display: none; } }
/* found 2026-10-06 while building the menu: these two set display: flex and so showed while hidden (an empty outlined box over
   the wordmark that caught its clicks, and a 10 px box under it), as did the Clothing tab's photo-mockup canvas (an empty 512 x 384
   block before any photo); test/browser-ids.test.js now fails any [hidden] that shows */
.studio-menu[hidden], .sel-strip[hidden], .mockup-canvas[hidden] { display: none; }
/* Import and Export, top right (app/ui/filemenus.js) */
#top .filebtn { flex: 0 0 auto; height: 40px; min-width: 44px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; border-radius: 8px; }
#top .filebtn .g { font-size: 16px; line-height: 1; } #top .filebtn.on { background: var(--accentSoft); border-color: var(--accent); }
@media (max-width: 1400px) {
  #top .filebtn { flex-direction: column; justify-content: center; gap: 1px; width: 44px; padding: 0 2px; } #top .filebtn .l { font-size: 9.5px; font-weight: 600; line-height: 1; }
  #btn-theme, #btn-focus { display: none; }   /* room for Import and Export: the theme is in Settings, focus is Tab or a four-finger tap */
  #save-status { max-width: 22px; }   /* the glyph alone, as under 1100 (measured: 4 px short at 1280 with the words) */
}
@media (max-width: 1260px) { #btn-undo, #btn-redo, #proj-name { display: none; } }   /* undo and redo sit in the slider column by the canvas, the name is in Projects; Import and Export take their room (measured: 51 px short at 1180, 79 at 1024) */
.file-menu { position: fixed; z-index: 56; overflow-y: auto; padding: 6px 6px 10px; background: var(--panel); border: 1px solid var(--lineStrong); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.45); outline: none; overscroll-behavior: contain; }
.file-menu[hidden] { display: none; }
.fm-title { padding: 8px 10px 0; font-size: 21px; font-weight: 800; }
.fm-sec { padding: 12px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fm-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; width: 100%; min-height: 52px; padding: 6px 10px; text-align: left; background: transparent; border: 2px solid transparent; border-radius: 10px; }
.fm-item .g { grid-row: 1 / 3; align-self: center; text-align: center; font-size: 18px; font-weight: 800; } .fm-item .n { font-size: 15px; font-weight: 700; } .fm-item .a { font-size: 12px; line-height: 1.3; color: var(--muted); }
.fm-item:hover, .fm-item:focus-visible { background: var(--panel2); border-color: var(--line); }
/* 9.8 Grids: pack chips, cards drawn by the engine's own thumbnails, and the tap layer that maps out a custom grid */
.grid-packs .chip { min-height: 34px; padding: 0 10px; font-size: 12px; text-transform: none; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 6px 0; }
.grid-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; min-width: 0; min-height: 0; height: auto; font-size: 12px; line-height: 1.2; text-align: center; }
.grid-card span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.grid-card canvas { display: block; width: 72px; height: 72px; background: var(--bgDeep); border-radius: 6px; }
.grid-taps { position: absolute; inset: 0; z-index: 30; cursor: crosshair; touch-action: none; }
.grid-taps-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: calc(100% - 16px); padding: 6px 8px 6px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.grid-taps-bar span { font-size: 13px; }
.grid-tap-mark { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accentSoft); pointer-events: none; }
/* 9.9 The to-scale 3D studio: its view covers the canvas area (the size / opacity sliders stay above it), a mode bar on top */
.s3d { position: absolute; inset: 0; z-index: 2; background: var(--bgDeep); }
.s3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.s3d-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: calc(100% - 16px); padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.s3d-bar .btn { min-height: 40px; padding: 0 10px; font-size: 13px; }
.s3d-info { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 24px); white-space: pre-line; font-size: 12.5px; line-height: 1.35; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; pointer-events: none; }
.s3d-info:empty { display: none; }
body.s3d-open #toast { z-index: 40; }
.s3d-report { white-space: pre-wrap; font: 12.5px/1.4 system-ui, sans-serif; background: var(--bgDeep); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; }
.s3d-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.s3d-fields .field input { width: 100%; }
.s3d-source { grid-column: 1 / -1; }
.s3d-photo { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bgDeep); }
.s3d-photo-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 8px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; }
.s3d-photo-bar input { width: 84px; }
.s3d-photo-area { position: relative; flex: 1; min-height: 0; touch-action: none; cursor: crosshair; }
.s3d-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.s3d-photo-marks { position: absolute; inset: 0; pointer-events: none; }
.grid-tap-mark.edge { border-color: var(--ok); }
.s3d-scans { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.s3d-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bgDeep); }
.s3d-scan-name { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.s3d-scan-state { font-size: 12px; color: var(--muted); } .s3d-scan-state.ready { color: var(--ok); } .s3d-scan-state.failed { color: var(--danger); }
a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel2); color: var(--text); text-decoration: none; }
a.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.grid-card-new b { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 6px; border: 1px dashed var(--lineStrong); font-size: 30px; font-weight: 400; color: var(--muted); }
/* 2026-10-07 the first-run welcome, the setup wizard and the guided tour (app/ui/tour.js): theme tokens only, 44 px targets or more */
.tour-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); }
.tour-sheet[hidden], .tour-layer[hidden], .tour-ring[hidden], .tour-card [hidden] { display: none !important; }
.tour-sheet-card { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 22px 18px; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 14px; box-shadow: 0 22px 60px var(--scrim); }
.tour-h { margin: 4px 0 8px; font-size: 22px; line-height: 1.25; }
.tour-lead { font-size: 15.5px; line-height: 1.5; margin: 8px 0; }
.tour-step { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tour-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.tour-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 56px; padding: 10px 14px; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.tour-option.on { background: var(--accentSoft); border-color: var(--accent); }
.tour-option-label { font-weight: 600; font-size: 15px; } .tour-option-about { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tour-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tour-btn { min-height: 48px; padding: 0 16px; }
.tour-layer { position: fixed; inset: 0; z-index: 75; touch-action: none; }
.tour-layer.dim { background: var(--scrim); }
.tour-layer.dim .tour-ring { display: none; }
.tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 9999px var(--scrim); pointer-events: none; }
.tour-card { position: fixed; left: 10px; top: 10px; width: min(360px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow-y: auto; padding: 14px 16px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 18px 48px var(--scrim); }
.tour-card h3 { margin: 8px 0 4px; font-size: 17px; }
.tour-card p { margin: 4px 0; line-height: 1.45; }
.tour-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tour-bar { height: 3px; margin-top: 6px; background: var(--line); border-radius: 2px; overflow: hidden; } .tour-bar span { display: block; height: 100%; background: var(--accent); }
.tour-card .tour-nav { margin-top: 10px; gap: 6px; } .tour-card .tour-btn { min-height: 44px; padding: 0 12px; }
#tour-where { color: var(--warn); }
#welcome-row .lbl { flex: 1 1 100%; color: var(--muted); font-size: 12.5px; }

/* 2026-10-07: a copy's opening letter (its brand profile's dedication, engine/brand.js), in the wordmark's script */
.tour-letter { font-family: var(--script); font-size: 22px; line-height: 1.5; color: var(--text); max-width: 34em; margin: 4px auto 8px; }
.tour-letter p { margin: 0 0 .7em; }
.tour-letter-greeting { font-size: 30px; margin-bottom: .5em !important; }
.tour-letter-closing { font-size: 28px; text-align: right; margin-top: .8em !important; }
.tour-letter-heart { color: var(--accent); font-family: system-ui, sans-serif; font-size: .9em; }
#gallery h2.app-name { font-family: var(--script); font-weight: 400; font-size: 34px; letter-spacing: .2px; }
@media (max-width: 700px) { .tour-letter { font-size: 19px; } .tour-letter-greeting { font-size: 25px; } .tour-letter-closing { font-size: 23px; } }

/* 2026-10-07 (the sweep, measured on the tablet build): 63 panel controls were under a 40 px touch target (34-37 px chips,
   28 px swatches, 27 px layer arrows). On a touch device (a finger or an Apple Pencil is a coarse pointer) the chips and the
   swatches are 40 px; with a mouse the compact sizes stay. The layer row's three buttons were 40 x 27 stacked; they are
   re-laid as one over two at 40 px (below), so the row is no taller. */
@media (pointer: coarse) {
  #panel-body .chip, #panel-body .brush-chips .chip, #panel-body .grid-packs .chip { min-height: 40px; }
  #panel-body .sw.small { width: 40px; height: 40px; min-width: 40px; }
  /* the layer row: the fill-reference button across the top, up and down side by side under it, each 40 px, in the same
     82 px the three stacked 27 px buttons took (the row is no taller; the name gives up 42 px) */
  .layer { grid-template-columns: 40px 56px 1fr 82px; }
  .layer .order { display: grid; grid-template-columns: 40px 40px; gap: 2px; }
  .layer .order button { width: 40px; height: 40px; min-height: 40px; }
  .layer .order button.ref { grid-column: 1 / -1; width: auto; }
  /* a gradient stop is an 18 px handle on a bar; a finger gets a 40 px wide place to land on it */
  .grad-stop::before { content: ''; position: absolute; top: -6px; bottom: -16px; left: -11px; right: -11px; }
}