/* 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: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; height: 70%; max-height: 600px; z-index: 3; }   /* 2026-10-12: the column holds the live brush, the numbers, the sliders, undo / redo, Move, the color well and the eyedropper */
#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 .sl-btns button.on { background: var(--accentSoft); border-color: var(--accent); } #sliders #colorwell { margin: 6px 0 2px; } #sliders .sl-btns { align-items: center; }
#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: 24px; }

/* 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; } .swatches.mixer { gap: 4px; } .mixer .sw { width: 40px; min-width: 40px; height: 40px; border-radius: 4px; } .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 { display: none; }   /* the name is in Projects; QuickMenu is a one-finger tap; focus is Tab or four fingers; the theme switch stays beside Projects (9.54) */
  #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 */
  /* The brush button is whole at every width (2026-10-07: a copy's 16-letter name left it 32 of its 44 px on a 412 px phone, a
     sliver nobody took for a button). The header closes up, the name is set a little smaller as the screen narrows, and a name
     too long even then gives way with an ellipsis: the quick bar keeps its 46 px. The name is clipped sideways only, so the
     script face's tall strokes are never cut. */
  #top { gap: 3px; padding: 0 6px; }
  #wordmark { font-size: clamp(14px, 4.1vw, 17px); margin: 0 3px 0 1px; flex: 0 1 auto; min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }
  #quickbar { flex: 1 0 46px; padding: 0 1px; }
  #top .icon, #top .filebtn { min-width: 40px; }
  #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-document-off #btn-theme, body.hz-stack-off #btn-undo, body.hz-stack-off #btn-redo, body.hz-stack-off #btn-fit, 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-quick, #btn-focus { display: none; }   /* room for Import and Export: QuickMenu is a one-finger tap or the barrel button, focus is Tab or a four-finger tap (2026-10-12: the theme switch beside Projects keeps its place on every screen wider than a phone, 9.54; QuickMenu gave up its icon instead) */
  #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) */
/* 9.54 the top bar fits what it holds. The light / dark switch stands beside Projects on every screen wider than a phone, and its 46 px come from spacing, never from a control: app/ui/headerfit.js measures the quick bar, engine/panelnav.js pickHeaderLevel takes the first level that fits, and the levels are cumulative. Measured at interface size 1 with the switch showing: 1024 px was 25 px short and fits at level 1 with its favorites untouched; 744 px (a small iPad upright) was 48 px short and fits at level 3. A width rule cannot do this: the bar is zoomed by the interface size and a client's copy has a longer name in the corner. */
#top.fit-1 { gap: 4px; padding: 0 6px; } #top.fit-1 #quickbar { gap: 6px; } #top.fit-1 #favs { padding-left: 6px; gap: 3px; } #top.fit-1 #utensils { gap: 1px; }
#top.fit-2 #favs button, #top.fit-2 #favs button canvas { width: 50px; min-width: 50px; } #top.fit-2 #wordmark { font-size: 17px; margin: 0 2px 0 0; }
#top.fit-3 #favs button, #top.fit-3 #favs button canvas { width: 46px; min-width: 46px; } #top.fit-3 #utensils button { min-width: 41px; width: 41px; } #top.fit-3 .filebtn { width: 40px; min-width: 40px; }
.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; }
}
/* The symmetry library (ui/symmetry-panel.js): each kind is a small picture of what it does to one stroke. */
.sym-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 6px 0; color: var(--text); }
.sym-kind { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; min-height: 86px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2, transparent); color: var(--text); font: inherit; font-size: 11.5px; line-height: 1.2; text-align: center; cursor: pointer; }
.sym-kind .sym-thumb { width: 56px; height: 56px; display: block; }
.sym-kind.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#sym-numbers .slider[hidden] { display: none; }
#sym-mode { width: 100%; }
#sym-families .chip, #sym-presets .chip { text-transform: none; }
/* the narrowest phones: Import and Export give 4 px each to the name (see the phone header above) */
@media (max-width: 400px) { #top .filebtn { width: 40px; min-width: 40px; } #wordmark { font-size: clamp(14px, 3.75vw, 15px); } }   /* measured: a 16-character name needs 152 px at 16 px and a 390 px phone has 150 */
/* The curve library (ui/curves-panel.js): the same small pictures as the symmetry kinds. */
.curve-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 6px 0; color: var(--text); }
#curve-groups .chip { text-transform: none; }
/* Color a line drawing (ui/flats-panel.js): the light dial is a ball lit from where its sun sits. */
.shade-row { align-items: center; gap: 14px; } .shade-sliders { flex: 1 1 180px; min-width: 0; }
.shade-dial { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--line); touch-action: none; cursor: grab; background: radial-gradient(circle at var(--lx, 34%) var(--ly, 34%), #fff 0, #cfcfd6 22%, #6f6f86 62%, #3a3550 100%); }
.shade-dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shade-sun { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #ffd24a; border: 2px solid #7a5a00; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); pointer-events: none; }
#rainbow-length[hidden] { display: none; } #rainbow-mode { width: 100%; }

/* P.26 the iPad pass (2026-10-10): the canvas owns its touches (no page pinch or scroll from it), buttons never double-tap-zoom,
   the page clears the status bar and the home indicator of an installed app, small viewports measure the visible height, and
   the trouble bar, the home-screen nudge and the what's-new / report sheets */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
#view, #stage-wrap, .gl, .s3d canvas, .grid-taps, .mockup-canvas, .brush-pad-canvas, .curve-widget canvas.curve { touch-action: none; }
button, .tabbtn, select, label.field, .bm-cat, .brush-list button { touch-action: manipulation; }
#sliders input[type=range] { touch-action: none; }
@supports (height: 100dvh) { .studio-card { max-height: calc(100dvh - 40px); } .colorpop { max-height: calc(100dvh - 16px); } .tour-sheet-card { max-height: calc(100dvh - 32px); } .tour-card { max-height: calc(100dvh - 20px); } }
#trouble-bar { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 8px; max-width: min(92%, 640px); padding: 6px 6px 6px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 13px; }
#trouble-bar[hidden] { display: none; } #trouble-bar .trouble-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trouble-bar .btn { min-height: 36px; } #trouble-bar .icon { min-width: 36px; height: 36px; padding: 0; }
#home-nudge { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; max-width: min(92%, 560px); padding: 10px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 14px; line-height: 1.35; }
#home-nudge .btn { flex: 0 0 auto; }
.care-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--scrim); }
.care-sheet[hidden] { display: none; }
.care-card { width: min(640px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
@supports (height: 100dvh) { .care-card { max-height: calc(100dvh - 24px); } }
.care-card h3 { margin: 0 0 8px; } .care-card ul { margin: 6px 0 12px; padding-left: 20px; } .care-card li { margin: 4px 0; line-height: 1.4; }
.care-card textarea { width: 100%; min-height: 200px; margin: 6px 0 10px; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; resize: vertical; -webkit-user-select: text; user-select: text; }
.care-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 9.37 (2026-10-12) the panel's organisation (app/ui/panelnav.js): its head, its section bar, its grips, its three modes, its columns */
@media (min-width: 1001px) { body:not(.overlay-panel):not(.popover-panel) #panel:not(.float):not(.sheet) { position: relative; } }   /* docked beside the canvas: the grip positions against it; the drawer (≤ 1000 px), the floating-panels setting and Simple's popover stay absolute */
.panel-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 0; min-height: 44px; }
.panel-head .btn { min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } .panel-head .btn .g { font-size: 14px; line-height: 1; }
.panel-head .icon { min-width: 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 15px; background: transparent; border-color: transparent; color: var(--muted); } .panel-head .icon:hover { color: var(--text); background: var(--panel2); }
.panel-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .spacer { flex: 0 0 2px; }
#panel-dock { display: none; } #panel.float #panel-dock, #panel.sheet #panel-dock { display: inline-flex; } #panel.float #panel-float, #panel.sheet #panel-sheet { display: none; }
#panel.float .panel-head { cursor: grab; touch-action: none; } #panel.float.moving .panel-head { cursor: grabbing; }
.section-bar { display: flex; gap: 4px; padding: 4px 6px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .section-bar::-webkit-scrollbar { display: none; } .section-bar[hidden] { display: none; }
.section-bar .chip { flex: 0 0 auto; min-height: 32px; padding: 0 10px; font-size: 12px; text-transform: none; white-space: nowrap; background: transparent; } .section-bar .chip.fold-all { color: var(--muted); border-style: dashed; }
.panel-grip { position: absolute; top: 0; bottom: 0; left: -5px; width: 11px; cursor: ew-resize; touch-action: none; z-index: 3; } body.left .panel-grip { left: auto; right: -5px; }
.panel-grip::after { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--lineStrong); opacity: 0; transition: opacity .12s; } .panel-grip:hover::after, #panel.sizing .panel-grip::after { opacity: 1; }
.panel-corner { display: none; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; cursor: nwse-resize; touch-action: none; z-index: 3; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 55%, var(--lineStrong) 55%, var(--lineStrong) 65%, transparent 65%, transparent 78%, var(--lineStrong) 78%, var(--lineStrong) 88%, transparent 88%); }
#panel.float { position: absolute; z-index: 30; border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); flex: none; } #panel.float .panel-corner { display: block; } #panel.float .panel-grip { display: none; } #panel.float #panel-body { border-radius: 0 0 12px 12px; }
#panel.sheet { position: absolute; inset: 0; width: auto; flex: none; z-index: 30; border-left: 0; } #panel.sheet .panel-grip, #panel.sheet .panel-corner { display: none; }
#panel[data-cols="2"] #panel-body .tab.on, #panel[data-cols="3"] #panel-body .tab.on { column-width: 300px; column-gap: 24px; column-rule: 1px solid var(--line); }
#panel[data-cols] #panel-body .tab.on > h3 { column-span: all; }
#panel-body h4 { break-after: avoid; break-inside: avoid; } #panel-body .tab.on > * { break-inside: avoid; } #panel-body .brush-list, #panel-body .brush-pane, #panel-body .brush-params { break-inside: auto; }
/* the Brushes tab in a wide panel: the library beside the brush in hand */
.brush-pane { min-width: 0; }
/* In a one-column panel the editor of the brush in hand lies under the whole library (30,000 px down with 775 brushes), and every
   pick of a brush rebuilds it: the browser leaves it unstyled and unlaid until it is scrolled near (30 ms of each pick, measured
   2026-10-12). Nothing may ask a measurement of something inside it while it is off screen, or the browser lays it out after all:
   the curve widget did, every frame (app/ui/curve.js). Beside the library (two and three columns) it is in sight and is left alone. */
#panel[data-cols="1"] .brush-pane-editor { content-visibility: auto; contain-intrinsic-block-size: auto 6000px; }
#panel[data-cols="2"] #panel-body .tab[data-tab="brushes"].on, #panel[data-cols="3"] #panel-body .tab[data-tab="brushes"].on { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr); gap: 0 20px; column-width: auto; column-rule: none; align-items: start; }
#panel[data-cols="2"] .tab[data-tab="brushes"] > h3, #panel[data-cols="3"] .tab[data-tab="brushes"] > h3 { grid-column: 1 / -1; }
#panel[data-cols="3"] .brush-pane-editor { column-width: 300px; column-gap: 24px; }
#panel-body .brush-params h4.grp { cursor: pointer; text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; color: var(--muted); margin-top: 14px; } #panel-body .brush-params h4.grp::before { content: '▾'; display: inline-block; width: 12px; color: var(--faint); font-size: 10px; } #panel-body .brush-params h4.grp.folded::before { content: '▸'; }
#panel-body h5 { margin: 10px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.brush-params .brush-name { margin: 12px 0 6px; font-weight: 600; font-size: 13px; } .brush-params .brush-name small { color: var(--muted); font-weight: 400; }
/* 9.38 the brush maker (app/ui/brushmaker.js) */
.maker-kinds .chip.maker-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 6px 10px; text-transform: none; border-radius: 10px; } .maker-kind .mk-name { font-size: 12.5px; font-weight: 600; } .maker-kind .mk-sample { display: block; width: 96px; height: 24px; border-radius: 4px; background: var(--bgDeep); }
.maker-tip-row { align-items: center; gap: 10px; } .maker-tip-preview { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; background: var(--bgDeep); border: 1px solid var(--line); } #maker-tip-pad canvas, #maker-pad canvas { width: 100%; max-width: 360px; height: auto; display: block; background: var(--bgDeep); border-radius: 6px; border: 1px solid var(--line); touch-action: none; }
.maker-card { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 6px; background: var(--bgDeep); border: 1px solid var(--line); margin: 6px 0; }
.maker-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .maker-marks:empty { display: none; }
.maker-mark { position: relative; width: 64px; height: 64px; min-width: 64px; padding: 3px; border-radius: 8px; background: var(--bgDeep); } .maker-mark canvas { display: block; width: 56px; height: 56px; } .maker-mark .mk-n { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: var(--muted); } .maker-mark.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#maker-set-name { width: 160px; } #maker-name { min-width: 180px; }
/* 2026-10-12 the rail popovers (app/ui/railpop.js): symmetry and grids beside the rail, or a window dragged out; Advanced at the foot */
.rail-pop { position: absolute; z-index: 31; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--lineStrong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); overflow: hidden; } .rail-pop[hidden] { display: none; }
.rail-pop-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; } .rail-pop.moving .rail-pop-head { cursor: grabbing; } .rail-pop-head .g { color: var(--muted); } .rail-pop-title { font-weight: 600; font-size: 13px; } .rail-pop-head .spacer { flex: 1; } .rail-pop-head .btn { min-height: 34px; } .rail-pop-head .icon { min-width: 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; }
.rail-pop-body { overflow: auto; padding: 6px 12px 14px; min-height: 0; -webkit-overflow-scrolling: touch; }
#tools button.menu-on { box-shadow: inset 0 0 0 2px var(--accent); }
.rail-pop-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--line); } .rail-pop-foot .btn { min-height: 36px; font-size: 12.5px; }
.rail-pop-body > h3 { display: none; }
/* 2026-10-12 the 2D / 3D half switch at the top of the rail */
#tools #btn-half { font-weight: 800; font-size: 12.5px; letter-spacing: .04em; color: var(--text); background: var(--panel2); border-color: var(--lineStrong); } #tools #btn-half[aria-pressed="true"] { background: var(--accentSoft); border-color: var(--accent); }
.pm-half-lbl { margin-left: 10px; }
/* 2026-10-12 the Symmetry tab's Build your own (app/ui/symmetry-tab.js) */
.sym-custom-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.sym-copy { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); } .sym-copy .sc-n { font-weight: 700; color: var(--muted); min-width: 18px; align-self: center; } .sym-copy .sc-num input { width: 84px; } .sym-copy .sc-remove { min-width: 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; align-self: center; margin-left: auto; }
/* 2026-10-12 the Adjust tab: groups, the before / after histogram, Compare and Reset */
.adjust-groups h4 { margin-top: 10px; } .adjust-chips .chip { text-transform: none; }
.adjust-hist { display: block; width: 100%; max-width: 360px; height: 56px; border-radius: 6px; background: var(--bgDeep); border: 1px solid var(--line); margin: 6px 0; }
.adjust-tools { align-items: center; } .adjust-tools .btn.compare { touch-action: none; user-select: none; }
/* 2026-10-12 the slider column's scale (app/ui/sliderscale.js): the brush in hand live, the numbers you can type, the ticks */
#sliders .sl-live { width: 112px; height: 72px; flex: 0 0 auto; align-self: flex-start; border-radius: 8px; background: var(--hud); border: 1px solid var(--line); cursor: pointer; } #sliders { width: 80px; } body.left #sliders .sl-live { align-self: flex-end; } #sliders .sl-live.making { border-color: var(--accent); }   /* 9.56: larger (80 x 28 before), so a change to the brush shows; it reaches 32 px past the column toward the canvas, the sliders and the numbers stay where they were; while the Brush Maker is open it shows the brush being made */
/* 2026-10-13: the two numbers are buttons ("tap to type one") and a finger's target is 40 x 40 (the sweep found them 38 x 24): the
   chip still LOOKS 38 x 24, the rest of its 40 x 40 is a clear border that takes the tap, and two of them fill the 80 px column */
#sliders .sl-vals { display: flex; gap: 0; flex: 0 0 auto; } #sliders .sl-val { box-sizing: border-box; min-width: 40px; width: 40px; height: 40px; min-height: 40px; padding: 0 2px; border: 8px solid transparent; border-left-width: 1px; border-right-width: 1px; border-radius: 9px / 16px; background-clip: padding-box; font-size: 10px; font-variant-numeric: tabular-nums; background-color: var(--hud); color: var(--text); } #sliders .sl-val.op { color: var(--accent); }
#sliders .sl-edit { width: 48px; min-height: 24px; height: 24px; padding: 0 3px; font-size: 11px; }
#sliders .sl { position: relative; } #sliders .sl-ticks { position: absolute; left: calc(100% + 1px); top: 16px; bottom: 0; width: 24px; pointer-events: none; } #sliders .sl-ticks span { position: absolute; left: 0; transform: translateY(-50%); font-size: 8.5px; line-height: 1; color: var(--faint); white-space: nowrap; } #sliders .sl-ticks span::before { content: ''; display: inline-block; width: 4px; height: 1px; background: var(--faint); margin-right: 2px; vertical-align: middle; }
#sliders .sl-ticks.size { left: auto; right: calc(100% + 1px); text-align: right; } #sliders .sl-ticks.size span { left: auto; right: 0; } #sliders .sl-ticks.size span::before { margin: 0 0 0 2px; }
#sliders .sl-pair { gap: 8px; }
/* 2026-10-12: the ticks face OUTWARD with either hand (size left, opacity right); a left-handed flip once laid the size ticks over the opacity slider. The column stands 24 px off the rail (his words: "just a tad so the numbers don't bleed into the left side tool bar"): the size ticks hang 17 px left of the column, so they end 7 px clear of the rail; the same 24 px with the rail on the right; canvas.js fitView clears it. */
/* The column takes the pen only where a control is: its own box (80 px wide, most of the stage tall) was a dead strip on the canvas, and a stroke begun beside the sliders went nowhere (nine suites that pin the view at the left edge found it the night the column moved). */
#sliders { pointer-events: none; } #sliders > * { pointer-events: auto; }
@media (max-width: 600px) { #sliders .sl-live, #sliders .sl-ticks { display: none; } #sliders { left: 6px; } body.left #sliders { left: auto; right: 6px; } }
/* A short panel gives its chrome up before its body (engine/panelnav.js panelChrome): the section bar goes first, then the tab buttons fold to one scrolling row. */
#section-bar.squeezed { display: none; }
#panel.compact-tabs #tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 4px 6px; } #panel.compact-tabs #tabs::-webkit-scrollbar { display: none; }
#panel.compact-tabs .tabbtn { flex: 0 0 auto; min-height: 34px; }
/* The Panels menu stacks above the panel in every mode: Expand and Pop out lift #panel to 30, and a modal at 20 sat under it (the search hit's click landed on a Settings control). */
#panels-menu.modal { z-index: 34; }
/* The eyedropper's icon: an eye whose iris is a rainbow (his words). The six wedge colors are the icon's subject, not UI greys, so they stay in the markup. */
/* 9.53 comments and update requests (Settings > Help & care): the form, the kept notes, the PC's inbox */
.fb-kinds .chip.on { background: var(--accentSoft); border-color: var(--accent); }
#fb-body { width: 100%; min-height: 96px; resize: vertical; }
#fb-title, #fb-who { flex: 1 1 160px; min-width: 0; }
.fb-list, .fb-inbox { display: flex; flex-direction: column; gap: 8px; } .fb-inbox[hidden] { display: none; }
.fb-note { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--hud); }
.fb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fb-kind { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.fb-kind[data-kind="request"] { color: var(--accent); border-color: var(--accent); }
.fb-when { font-size: 11px; color: var(--muted); margin-left: auto; }
.fb-body { white-space: pre-wrap; margin: 6px 0; }
.fb-sent { font-size: 11px; color: var(--muted); }
.fb-actions .btn { min-height: 32px; }
#sliders .sl-btns button.eye-tool { display: grid; place-items: center; } #sliders .sl-btns button.eye-tool svg { display: block; width: 26px; height: 26px; } #sliders .sl-btns button.eye-tool.on .lid { stroke: var(--accent); }
/* 2026-10-12 the pen toolbox (app/ui/pentoolbox.js) */
.pen-live, .pen-lag { font-variant-numeric: tabular-nums; } .pen-live[data-pressure] { color: var(--text); } .pen-curves .chip { text-transform: none; } .curve-widget.dim { opacity: .55; }
/* 2026-10-12 the Brush Studio as a window: no scrim, moved by its head, minimised to its head and its live stroke */
#brush-studio.float { background: transparent; pointer-events: none; display: none; } #brush-studio.float.open { display: block; }
#brush-studio.float .studio-card { pointer-events: auto; position: absolute; max-height: calc(100vh - 32px); box-shadow: 0 14px 40px rgba(0, 0, 0, .4); border-color: var(--lineStrong); }
#brush-studio .studio-head { cursor: grab; touch-action: none; user-select: none; } #brush-studio .studio-head .icon { min-width: 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; }
#brush-studio .studio-live { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--bgDeep); border: 1px solid var(--line); }
#brush-studio .studio-card.min { max-height: none; overflow: hidden; } #brush-studio .studio-card.min > :not(.studio-head):not(.studio-live) { display: none; }
@supports (height: 100dvh) { #brush-studio.float .studio-card { max-height: calc(100dvh - 32px); } }
/* the rail's group flyout: a grip to drag it out as a palette, Advanced at its foot */
#flyout.float { position: absolute; flex-direction: column; z-index: 31; border-color: var(--lineStrong); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
#flyout .fly-head { display: none; align-items: center; gap: 4px; padding: 2px 4px; cursor: grab; touch-action: none; color: var(--muted); font-size: 11.5px; } #flyout.float .fly-head { display: flex; } #flyout .fly-head .spacer { flex: 1; } #flyout .fly-head .icon { min-width: 30px; width: 30px; height: 30px; min-height: 30px; padding: 0; font-size: 13px; }
#flyout .fly-tools { display: flex; gap: 4px; } #flyout.float .fly-tools { flex-wrap: wrap; max-width: 212px; }
#flyout .fly-foot { display: none; } #flyout.float .fly-foot { display: flex; padding: 4px; } #flyout .fly-foot .btn { min-height: 34px; font-size: 12px; width: 100%; }
#flyout .fly-more { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 12px; color: var(--muted); }
/* 2026-10-12 the layer strip under the top bar (app/ui/layerstrip.js) and a layer's menu */
#layer-strip { display: flex; align-items: center; gap: 4px; padding: 3px 6px; min-height: 42px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; zoom: var(--ui, 1); } #layer-strip::-webkit-scrollbar { display: none; } #layer-strip[hidden], body.focus #layer-strip { display: none; }
.ls-layer { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 36px; min-height: 36px; min-width: 36px; max-width: 190px; padding: 0 8px 0 3px; border-radius: 8px; background: transparent; border-color: transparent; } .ls-layer:hover { background: var(--panel2); }
.ls-layer .ls-thumb { width: 44px; height: 32px; border-radius: 4px; background: #fff; flex: 0 0 44px; } .ls-layer .ls-name { font-size: 12px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-layer .ls-badges { font-size: 10px; color: var(--muted); letter-spacing: .05em; } .ls-layer .ls-badges:empty { display: none; }
.ls-layer.on { background: var(--panel2); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .ls-layer.off { opacity: .55; }
.ls-add, .ls-opts { flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 16px; }
.layer-menu { width: 420px; max-height: 70vh; overflow: auto; } .layer-menu .lm-head { display: flex; align-items: center; gap: 6px; } .layer-menu .lm-title { font-weight: 600; } .layer-menu .lm-head .spacer { flex: 1; } .layer-menu .lm-head .icon { min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; } .layer-menu .btn { justify-content: center; text-align: center; }
@media (max-width: 600px) { .ls-layer .ls-name { display: none; } .ls-layer .ls-thumb { width: 36px; height: 28px; flex-basis: 36px; } }
/* 2026-10-12 the stencil over the whole screen (app/tattoo.js openStencilViewer) */
.stencil-viewer { padding: 0; align-items: stretch; justify-content: stretch; z-index: 60; } .stencil-viewer.open { display: flex; flex-direction: column; }
.stencil-viewer .sv-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); } .stencil-viewer .sv-title { font-weight: 600; } .stencil-viewer .sv-stats { color: var(--muted); font-size: 12.5px; } .stencil-viewer .sv-head .spacer { flex: 1; } .stencil-viewer .sv-head .icon { min-width: 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; }
.stencil-viewer .sv-body { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: flex-start; padding: 12px; background: #f4efe6; } .stencil-viewer.fit .sv-body { align-items: center; justify-content: center; }
.stencil-viewer .sv-img { display: block; image-rendering: pixelated; cursor: zoom-in; } .stencil-viewer.fit .sv-img { image-rendering: auto; } .stencil-viewer:not(.fit) .sv-img { cursor: zoom-out; }
@media (max-width: 1000px) { .panel-grip { display: none; } #panel.sheet { width: auto; } }
/* the Panels menu */
.panels-card { width: 720px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 8px; } .panels-card h3 { margin: 0; } .pm-head { margin: 0; }
#panels-search { width: 100%; min-height: 42px; font-size: 14px; }
.pm-modes .lbl { color: var(--muted); font-size: 12.5px; } .pm-modes .chip { text-transform: none; }
.pm-list { overflow: auto; min-height: 0; padding-right: 2px; }
.pm-group { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px; } .pm-group-name { margin: 0; } .pm-group-about { color: var(--faint); font-size: 12px; }
.pm-tab { padding: 4px 0 6px; border-bottom: 1px solid var(--line); } .pm-tab.on .pm-open { border-color: var(--accent); }
.pm-open, .pm-hit { display: grid; grid-template-columns: 28px 1fr; grid-template-areas: 'g n' 'g a'; column-gap: 8px; align-items: center; text-align: left; width: 100%; min-height: 48px; padding: 6px 10px; background: var(--panel2); border-radius: 8px; }
.pm-open .g, .pm-hit .g { grid-area: g; font-size: 18px; color: var(--muted); } .pm-open .n, .pm-hit .n { grid-area: n; font-weight: 600; font-size: 13.5px; } .pm-open .a, .pm-hit .a { grid-area: a; font-size: 12px; color: var(--muted); white-space: normal; line-height: 1.3; }
.pm-hit { margin: 4px 0; }
.pm-secs { margin: 6px 0 0; padding-left: 4px; } .pm-secs .chip { min-height: 32px; padding: 0 10px; font-size: 12px; text-transform: none; }
@supports (height: 100dvh) { .panels-card { max-height: calc(100dvh - 32px); } }
@media (pointer: coarse) { .section-bar .chip, .pm-secs .chip { min-height: 40px; } .panel-grip { width: 18px; left: -9px; } body.left .panel-grip { right: -9px; } .panel-corner { width: 36px; height: 36px; } }

/* 9.55 the first screen of a tab (2026-10-12, measured after his "continue optimisation"): on an iPad in landscape the Brushes tab opened with its first brush card at 662 px of 820 and two cards in view. The layer strip, the panel head, a third row of tab buttons and the section chips had stacked 250 px above the list in one day, against his first message of that day ("not have to scroll so much"). Nothing is taken away: the tab buttons stand in a grid (ten in two rows at 320 px, one row in a wide panel); a tab's own title is not said twice (the head says it); the library's filter chips ride one row that scrolls; the stand-in filter sits beside the search; a card is its preview and its name (what the brush in hand is and does is one line above the cards; every card's tooltip says it too). test/browser-firstscreen.test.js holds the count of cards in view. */
#tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.tabbtn { min-width: 0; padding: 0 2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.compact-tabs #tabs { display: flex; } #panel.compact-tabs .tabbtn { padding: 0 8px; overflow: visible; }
#panel-body .tab > h3:first-child { display: none; }
.brush-chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .brush-chips::-webkit-scrollbar { display: none; } .brush-chips .chip { flex: 0 0 auto; }
.brush-find { display: flex; align-items: center; gap: 6px; } .brush-find .brush-search { flex: 1 1 auto; min-width: 0; width: auto; } .brush-find label.check { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
/* the library is a grid of cards: two across in the docked panel, more in a wide one. A card is its stroke at its true proportions, its name and its star, and every card is one height. 775 brushes at 148 px a card was 115,000 px of scrolling; this is a fifth of it. */
.brush-list .brush-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 4px; align-items: start; content-visibility: auto; contain-intrinsic-size: auto 240px; }   /* a section far from the screen is not laid out or painted until it comes near: laying out 775 cards at once was 174 ms of the tab's first opening (profiled 2026-10-12); a browser without the property lays them all out as before */ .brush-list .brush-section h4 { grid-column: 1 / -1; }
.brush-list .brush { position: relative; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: 'prev prev' 'meta star'; gap: 1px 2px; padding: 4px 4px 2px; min-height: 0; }
.brush-list .brush .bprev { height: auto; aspect-ratio: 200 / 44; } .brush-list .brush .meta { align-self: center; } .brush-list .brush .name { font-size: 12.5px; }
.brush-list .brush .tags, .brush-list .brush .about { display: none; }   /* said on the line above the cards for the brush in hand, and in every card's tooltip: a card that grew when it was picked moved the cards under the pen */
.brush-inhand { font-size: 11.5px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px; cursor: pointer; } .brush-inhand strong { color: var(--text); font-weight: 600; } .brush-inhand.open { white-space: normal; }
.brush-list .brush .star { width: 30px; height: 30px; min-width: 30px; }
.brush-list .brush .set-op { position: absolute; top: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 13px; background: var(--panel); border: 1px solid var(--line); font-size: 11px; } .brush-list .brush .set-up { right: 62px; } .brush-list .brush .set-down { right: 34px; } .brush-list .brush .set-out { right: 6px; }

/* 9.56 the Brush Maker's window (app/ui/brushmaker.js; engine/brushmaker.js decides its box and its layout). Two panes in sight at once: the settings scroll on one side, the live sheet and the pad stand still on the other; side by side in a wide window, the sheet and pad on top in a narrow one. It floats where it is put, fills the screen when asked, and is the screen on a small one. */
.maker-win { position: fixed; z-index: 36; display: flex; flex-direction: column; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--lineStrong); border-radius: 14px; box-shadow: 0 18px 54px rgba(0, 0, 0, .45); overflow: hidden; } .maker-win[hidden] { display: none; }
.maker-win[data-mode="full"] { border-radius: 0; border: 0; box-shadow: none; }
.mw-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; min-height: 48px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; } .maker-win[data-mode="full"] .mw-head { cursor: default; }
.mw-title { font-weight: 700; font-size: 14px; white-space: nowrap; } .mw-name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mw-head .spacer { flex: 1 1 auto; }
.mw-head .icon { min-width: 40px; width: 40px; height: 40px; padding: 0; font-size: 16px; background: transparent; border-color: transparent; color: var(--muted); } .mw-head .icon:hover { color: var(--text); background: var(--panel2); } .mw-head .icon[hidden] { display: none; }
.mw-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
.maker-win[data-layout="tall"] .mw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(230px, 46%) minmax(0, 1fr); } .maker-win[data-layout="tall"] .mk-stage { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
.maker-win.min .mw-body, .maker-win.min .mw-corner { display: none; } .maker-win.min .mw-head { border-bottom: 0; }
.mw-corner { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--lineStrong) 50%); border-radius: 0 0 13px 0; opacity: .7; } .maker-win[data-mode="full"] .mw-corner { display: none; }
.mk-controls { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 20px; position: relative; }
.mk-nav { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 8px 0; margin-bottom: 4px; background: var(--panel); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); } .mk-nav::-webkit-scrollbar { display: none; } .mk-nav .chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-size: 12.5px; text-transform: none; }
.mk-sec { padding: 2px 0 10px; } .mk-sec h5 { margin: 10px 0 6px; font-size: 13px; }
.mk-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; border-left: 1px solid var(--line); background: var(--panel2); }
.mk-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .mk-bar strong { font-size: 12.5px; } .mk-bar .btn { min-height: 34px; padding: 0 10px; font-size: 12px; } .mk-replay { font-size: 12px; }
.mk-zoom { margin: 0; gap: 3px; } .mk-zoom .chip { min-height: 32px; padding: 0 9px; font-size: 11.5px; text-transform: none; } .mk-note { font-size: 11.5px; color: var(--muted); }
.mk-sheet-box { flex: 4 1 0; min-height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bgDeep); } .mk-sheet { display: block; width: 100%; height: 100%; }
.mk-stage #maker-pad { flex: 5 1 0; min-height: 120px; overflow: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--bgDeep); margin: 0; }
.mk-stage #maker-pad canvas { display: block; width: 100%; max-width: none; height: auto; margin: 0; border: 0; border-radius: 0; touch-action: none; }
/* a setting: its name, the number you can type and its unit, a way back; the slider under them; what the engine now has under that */
.mk-dial { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name box reset' 'range range range' 'spec spec spec'; align-items: center; gap: 2px 6px; padding: 6px 0 8px; border-bottom: 1px solid var(--line); } .mk-dial.off { opacity: .5; }
.mk-dial .mk-name { grid-area: name; font-size: 12.5px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-dial.changed .mk-name { color: var(--accent); }
.mk-dial .mk-range { grid-area: range; width: 100%; min-height: 32px; margin: 0; touch-action: pan-y; accent-color: var(--accent); }
.mk-dial .mk-box { grid-area: box; display: inline-flex; align-items: center; gap: 3px; } .mk-num { width: 60px; min-height: 32px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; } .mk-num.bad { border-color: var(--danger); } .mk-unit { font-size: 11.5px; color: var(--muted); min-width: 14px; }
.mk-reset { grid-area: reset; min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 14px; background: transparent; border-color: transparent; color: var(--muted); } .mk-reset[hidden] { display: none; }
.mk-spec { grid-area: spec; font-size: 11.5px; line-height: 1.3; color: var(--muted); min-height: 15px; }
.mk-fine-group { border-bottom: 1px solid var(--line); } .mk-fine-group summary { cursor: pointer; padding: 11px 2px; font-size: 13px; font-weight: 600; } .mk-fine-group summary small { color: var(--accent); font-weight: 400; } .mk-fine-rows { padding: 0 0 6px 8px; } .mk-fine-rows .mk-dial:last-child { border-bottom: 0; }
/* the photo cutter */
.mk-photo { display: block; width: 100%; height: 260px; border-radius: 10px; border: 1px solid var(--line); background: var(--bgDeep); touch-action: none; cursor: crosshair; margin: 6px 0; }
.mk-cut-views { align-items: flex-start; gap: 10px; } .mk-cut-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); flex: 0 0 auto; } .mk-cut-view { width: 72px; height: 72px; border-radius: 8px; border: 1px solid var(--line); background: var(--bgDeep); } #maker-cut-note { flex: 1 1 0; min-width: 0; margin: 0; }
.mk-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; } .mk-colors:empty { display: none; } .mk-color { position: relative; width: 44px; min-width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 2px solid var(--line); } .mk-color.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accentSoft); }
.mk-color-tag { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-size: 9px; line-height: 1.2; padding: 0 4px; border-radius: 6px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.maker-door .maker-card { margin: 4px 0 8px; }
.maker .chips .chip, .maker .mk-nav .chip { text-transform: none; }
.mk-dial.silent .mk-spec { font-style: italic; }
.maker-win[data-mode="full"] { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }   /* on a tablet or a phone the window is the screen: it keeps clear of the notch and the home bar */
@media (pointer: coarse) { .mk-num, #maker-name, #maker-set-name { font-size: 16px; } .mk-num { width: 66px; min-height: 38px; } .mk-reset { width: 38px; min-width: 38px; height: 38px; } .mk-zoom .chip { min-height: 38px; } }   /* a field under 16 px makes a phone zoom the page when it is tapped */
#sliders[data-fit="1"] .sl-live { height: 40px; } #sliders[data-fit="1"] .sl-pair, #sliders[data-fit="2"] .sl-pair { min-height: 90px; } #sliders[data-fit="2"] .sl-live { display: none; }   /* the column fits the stage (app/ui/sliderscale.js fitColumn): on a short stage the live stroke is shorter, then gone, before the color well can come down over the timeline */