/* Crafty Carpets — styles */

/* Layout: a tool rail of square buttons stuck to the left edge (Photoshop-style); the motif library opens beside it; the rug canvas fills the rest.
   Settings that need more than one click open a flyout next to their button. On tablet/phone the rail stays left and motifs become a bottom carousel.
   Deliberately single-theme (dark). */
:root {
  --t-s: 14px;   /* small labels: swatch names, section captions, notes */
  --t-m: 16px;   /* body: panels, menus, tabs, info */
  --t-l: 19px;   /* button labels and headings */
  --t-xl: 24px;  /* large: popup credit line */
  --t-xxl: 30px; /* titles */
  /* the info popup scales its own text with its width: list and credit 15–28px, heading 22–40px */
  --bg: #121212;
  --panel: #161616;
  --pop: #0d0d0d;      /* info popup fill: the panel colour as it looks under the dimming shade */
  --line: #3a3a3a;
  --fg: #f2f2f2;
  --mute: #7a7a7a;
  --dim: #4a4a4a;
  --mono: "VT323", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rb: 44px;
  --gap: 12px;
  --rail: calc(var(--rb) + 2 * var(--gap));
  --sep: var(--sep);      /* hairline between stacked buttons */
  --hover: #222;
  --on-fg: #000;       /* text/icons sitting on a --fg fill */
  --edge: #888;        /* hover outline */
  --tilebg: #222;
  --veil: rgba(10, 10, 10, 0.96);
  --canvas: #000000;   /* behind the rug */
  --ghost: #ffffff;    /* motif preview outline on the rug */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f1ea;
  --panel: #f3f1ea;
  --pop: #f3f1ea;
  --line: #d6d2c6;
  --fg: #141414;
  --mute: #8a877e;
  --dim: #bcb8ad;
  --sep: #e2ded3;
  --hover: #e9e6dd;
  --on-fg: #f3f1ea;
  --edge: #6a6760;
  --tilebg: #e2ded3;
  --veil: rgba(243, 241, 234, 0.97);
  --canvas: #ffffff;
  --ghost: #141414;
  color-scheme: light;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: var(--t-m); overflow: hidden; }
* { box-sizing: border-box; border-radius: 0; }

.app { height: 100%; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); position: relative; }

/* ---------- tool rail ---------- */
.rail { grid-column: 1; grid-row: 1; align-self: stretch; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); background: transparent; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; z-index: 12; position: relative; }
.rail::-webkit-scrollbar { display: none; }
.rb { width: var(--rb); height: var(--rb); flex: none; display: grid; place-items: center; padding: 0; margin: 0; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: var(--t-l); cursor: pointer; position: relative; }
.rb:hover { background: var(--hover); }
.rb:hover { border-color: var(--edge); }
.rb[aria-pressed="true"], .rb[aria-expanded="true"] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.rb:focus-visible { outline: 1px solid var(--fg); outline-offset: -3px; }
.rb svg { display: block; }
#railLib { padding: 0; height: var(--rb); overflow: hidden; }
#railLib[aria-pressed="true"] { background: var(--panel); border-color: var(--line); }  /* no white frame round the motif while the library is open */
#railLib canvas { aspect-ratio: 1; }
/* tool groups: square buttons joined into one panel; motif on top, save + download at the bottom */
.rail #gTools, .rail #gOut { margin-top: auto; }
.grp { flex: none; display: flex; flex-direction: column; width: var(--rb); border: 1px solid var(--line); background: var(--panel); }
.grp .rb { width: 100%; height: calc(var(--rb) - 2px); border: 0; }
.grp .rb + .rb { border-top: 1px solid var(--line); }
.grp .rb:hover { border-color: var(--line); }
.grp .rb[aria-pressed="true"], .grp .rb[aria-expanded="true"] { border-color: var(--line); }
/* transform only where there are no keyboard shortcuts to hand: touch screens and narrow windows */
/* every icon pixel is 1.5 css px (3 screen px on retina); phones 4/3 css px (4 screen px on 3x) — 15- and 16-pixel icons alike */
.grp .rb svg, .xform svg { width: 22.5px; height: 22.5px; }
.grp .rb svg[viewBox="0 0 16 16"] { width: 24px; height: 24px; }
@media (max-width: 700px) { .grp .rb svg, .xform svg { width: 20px; height: 20px; } .grp .rb svg[viewBox="0 0 16 16"] { width: 21.333px; height: 21.333px; } }
/* save: an empty heart until the collection has a carpet in it */
#bSaved .h1 { display: none; }
#bSaved.has .h1 { display: block; }
#bSaved.has .h0 { display: none; }
:root { --icon: #c4bfb4; }   /* icons a touch softer than text */
.grp .rb:not([aria-pressed="true"]):not([aria-expanded="true"]), .xform button { color: var(--icon); }
.rail:has(.rb[aria-expanded="true"], #bSaved[aria-pressed="true"], #bXform[aria-pressed="true"], #railLib[aria-pressed="true"]) .grp .rb[data-tool][aria-pressed="true"] { background: var(--panel); color: var(--icon); }
.grp #bXform { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 700px) { .grp #bXform { display: grid; } }
#railLib canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* ---------- info: a stepped pixel panel centred on the carpet ---------- */
.infoShade { position: absolute; inset: 0; z-index: 29; background: rgba(8, 8, 8, 0.62); }
.infoShade[hidden] { display: none; }
/* centred in the space right of the toolbar, with the same margin to the toolbar and to the screen edge */
.info { position: absolute; z-index: 30; top: 50%; --railR: calc(var(--gap) + var(--rb)); --m: calc(2 * var(--gap));
  left: calc(var(--railR) + (100% - var(--railR)) / 2); transform: translate(-50%, -50%);
  width: min(900px, calc(100% - var(--railR) - 2 * var(--m))); max-height: calc(100% - 2 * var(--gap)); display: flex; flex-direction: column;
  --s: calc(var(--rb) / 2); --px: calc(2 * var(--s) + 16px); --aw: calc(100cqi - 2 * var(--px)); container-type: inline-size; }
.info[hidden] { display: none; }
.infoBox { position: relative; isolation: isolate; background: var(--line); color: var(--fg); padding: calc(var(--s) + 24px) var(--px); text-align: center; min-height: 0; overflow: auto;
  --f: clamp(16px, min(calc(var(--aw) / 28.5), calc((100dvh - 300px) / 11)), 24px);
  clip-path: polygon(0 calc(4 * var(--s)), var(--s) calc(4 * var(--s)), var(--s) calc(3 * var(--s)), calc(2 * var(--s)) calc(3 * var(--s)), calc(2 * var(--s)) calc(2 * var(--s)), calc(3 * var(--s)) calc(2 * var(--s)), calc(3 * var(--s)) var(--s), calc(4 * var(--s)) var(--s), calc(4 * var(--s)) 0, calc(100% - 4 * var(--s)) 0, calc(100% - 4 * var(--s)) var(--s), calc(100% - 3 * var(--s)) var(--s), calc(100% - 3 * var(--s)) calc(2 * var(--s)), calc(100% - 2 * var(--s)) calc(2 * var(--s)), calc(100% - 2 * var(--s)) calc(3 * var(--s)), calc(100% - var(--s)) calc(3 * var(--s)), calc(100% - var(--s)) calc(4 * var(--s)), 100% calc(4 * var(--s)), 100% calc(100% - 4 * var(--s)), calc(100% - var(--s)) calc(100% - 4 * var(--s)), calc(100% - var(--s)) calc(100% - 3 * var(--s)), calc(100% - 2 * var(--s)) calc(100% - 3 * var(--s)), calc(100% - 2 * var(--s)) calc(100% - 2 * var(--s)), calc(100% - 3 * var(--s)) calc(100% - 2 * var(--s)), calc(100% - 3 * var(--s)) calc(100% - var(--s)), calc(100% - 4 * var(--s)) calc(100% - var(--s)), calc(100% - 4 * var(--s)) 100%, calc(4 * var(--s)) 100%, calc(4 * var(--s)) calc(100% - var(--s)), calc(3 * var(--s)) calc(100% - var(--s)), calc(3 * var(--s)) calc(100% - 2 * var(--s)), calc(2 * var(--s)) calc(100% - 2 * var(--s)), calc(2 * var(--s)) calc(100% - 3 * var(--s)), var(--s) calc(100% - 3 * var(--s)), var(--s) calc(100% - 4 * var(--s)), 0 calc(100% - 4 * var(--s))); }
/* the border: the box itself is border-coloured; a copy inset 1px on every edge and step carries the dark fill */
.infoBox::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pop); clip-path: polygon(1px calc(4 * var(--s) + 1px), calc(var(--s) + 1px) calc(4 * var(--s) + 1px), calc(var(--s) + 1px) calc(3 * var(--s) + 1px), calc(2 * var(--s) + 1px) calc(3 * var(--s) + 1px), calc(2 * var(--s) + 1px) calc(2 * var(--s) + 1px), calc(3 * var(--s) + 1px) calc(2 * var(--s) + 1px), calc(3 * var(--s) + 1px) calc(var(--s) + 1px), calc(4 * var(--s) + 1px) calc(var(--s) + 1px), calc(4 * var(--s) + 1px) 1px, calc(100% - 4 * var(--s) - 1px) 1px, calc(100% - 4 * var(--s) - 1px) calc(var(--s) + 1px), calc(100% - 3 * var(--s) - 1px) calc(var(--s) + 1px), calc(100% - 3 * var(--s) - 1px) calc(2 * var(--s) + 1px), calc(100% - 2 * var(--s) - 1px) calc(2 * var(--s) + 1px), calc(100% - 2 * var(--s) - 1px) calc(3 * var(--s) + 1px), calc(100% - var(--s) - 1px) calc(3 * var(--s) + 1px), calc(100% - var(--s) - 1px) calc(4 * var(--s) + 1px), calc(100% - 1px) calc(4 * var(--s) + 1px), calc(100% - 1px) calc(100% - 4 * var(--s) - 1px), calc(100% - var(--s) - 1px) calc(100% - 4 * var(--s) - 1px), calc(100% - var(--s) - 1px) calc(100% - 3 * var(--s) - 1px), calc(100% - 2 * var(--s) - 1px) calc(100% - 3 * var(--s) - 1px), calc(100% - 2 * var(--s) - 1px) calc(100% - 2 * var(--s) - 1px), calc(100% - 3 * var(--s) - 1px) calc(100% - 2 * var(--s) - 1px), calc(100% - 3 * var(--s) - 1px) calc(100% - var(--s) - 1px), calc(100% - 4 * var(--s) - 1px) calc(100% - var(--s) - 1px), calc(100% - 4 * var(--s) - 1px) calc(100% - 1px), calc(4 * var(--s) + 1px) calc(100% - 1px), calc(4 * var(--s) + 1px) calc(100% - var(--s) - 1px), calc(3 * var(--s) + 1px) calc(100% - var(--s) - 1px), calc(3 * var(--s) + 1px) calc(100% - 2 * var(--s) - 1px), calc(2 * var(--s) + 1px) calc(100% - 2 * var(--s) - 1px), calc(2 * var(--s) + 1px) calc(100% - 3 * var(--s) - 1px), calc(var(--s) + 1px) calc(100% - 3 * var(--s) - 1px), calc(var(--s) + 1px) calc(100% - 4 * var(--s) - 1px), 1px calc(100% - 4 * var(--s) - 1px)); }
.infoTitle { margin: 0 0 calc(var(--s) + 14px); line-height: 1; font-size: clamp(22px, min(calc(var(--aw) / 7), calc(var(--f) * 1.45)), 36px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
/* text scales with the popup's width: four columns while they fit at 18px+, then two, with long descriptions wrapping */
.info dl { margin: 0 auto; width: max-content; max-width: 100%; display: grid; grid-template-columns: repeat(4, auto); gap: 0.45em 1.1em; line-height: 1.1; font-size: var(--f); text-align: left; }
.info dt { color: var(--fg); white-space: nowrap; }
.info dd { margin: 0; color: var(--mute); white-space: nowrap; }
@container (max-width: 640px) {
  .infoBox { --f: clamp(min(16px, calc(var(--aw) / 9.5)), min(calc(var(--aw) / 14.6), calc((100dvh - 300px) / 22)), 22px); }
  .info dl { grid-template-columns: auto auto; gap: 0.3em 0.8em; }
  .infoBy { line-height: 1.15; }
  .info dd { white-space: normal; }
  .infoBy span { display: block; }   /* credit on two lines: A Maybe Machine / by Ravi Popat */
}
.infoBy { margin: calc(var(--s) + 20px) 0 0; line-height: 1.25; font-size: var(--f); color: var(--fg); }
.infoBy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mute); }
.infoBy span, .infoBy a { white-space: nowrap; }
.infoBy a:hover { text-decoration-color: var(--fg); }
/* the close button sits in the cut-away top-right corner, above the staircase: each step is half a button */
.infoClose { position: absolute; top: 0; right: 0; width: var(--rb); height: var(--rb); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--pop); color: var(--icon, var(--fg)); cursor: pointer; }
.infoClose:hover { background: var(--fg); color: var(--on-fg); }
.infoClose svg { width: 22.5px; height: 22.5px; }
@media (max-width: 700px) {
  /* phones: the same margin on all four sides; content centred in the space */
  .info { position: fixed; inset: 10vw; width: auto; max-height: none; transform: none; --px: calc(var(--s) + 14px); }
  .info[hidden] { display: none; }
  .infoBox { flex: 1; display: flex; flex-direction: column; justify-content: safe center; }
  .infoBox { padding-top: calc(var(--s) + 10px); padding-bottom: calc(var(--s) + 10px); }
  .infoClose svg { width: 20px; height: 20px; }
}
.infoBtn { position: absolute; right: var(--gap); bottom: var(--gap); width: var(--rb); height: var(--rb); display: grid; place-items: center; padding: 0; background: var(--panel); color: var(--fg); border: 1px solid var(--line); cursor: pointer; z-index: 6; }
.infoBtn .i { font-family: var(--mono); font-size: var(--t-l); letter-spacing: 0.02em; line-height: 1; }
.infoBtn:hover { color: var(--fg); border-color: var(--fg); }
.infoBtn[aria-expanded="true"] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); z-index: 31; }   /* inverted while the popup is open */
.corner.qm { position: fixed; right: auto; bottom: auto; box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 30; }
.corner { position: absolute; right: 12px; bottom: 12px; display: flex; background: var(--panel); border: 1px solid var(--line); z-index: 6; }
.corner .rb { width: 38px; height: 38px; border-bottom: 0; }
.corner .rb + .rb { border-left: 1px solid var(--sep); }
.corner .rb:disabled { color: var(--dim); cursor: default; background: transparent; }
.corner .val { cursor: default; display: grid; place-items: center; font-size: var(--t-m); }
.corner .val:hover { background: transparent; }
.corner .csep { width: 1px; background: var(--line); }
.corner .csep + .rb { border-left: 0; }
.rb .val { font-size: var(--t-m); font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.rb .mini { display: grid; grid-template-columns: 1fr 1fr; width: 16px; height: 16px; border: 0.75px solid currentColor; overflow: hidden; }
.rb .mini i { display: block; }
.rail .gap { flex: none; height: 9px; border-bottom: 1px solid var(--line); }

/* ---------- flyout ---------- */
/* touch screens only: transform button opens the rotate / size row */
.xform { position: fixed; z-index: 26; display: flex; height: var(--rb); background: var(--panel); border: 1px solid var(--line); }
.xform[hidden] { display: none; }
.xform button { all: unset; box-sizing: border-box; width: calc(var(--rb) - 2px); height: 100%; display: grid; place-items: center; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xform button + button { border-left: 1px solid var(--line); width: calc(var(--rb) - 1px); }
.xform .xval { display: grid; place-items: center; min-width: calc(var(--rb) - 1px); padding: 0 4px; box-sizing: border-box; border-left: 1px solid var(--line); font-size: var(--t-l); letter-spacing: 0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.xform .xval + button { border-left: 1px solid var(--line); }
.xform button:active { background: var(--fg); color: var(--on-fg); }
.fly { position: fixed; z-index: 25; background: var(--panel); border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.fly .cl { color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-s); }
.fly [data-fly] { display: flex; flex-direction: column; gap: 8px; }
.fly[data-show="tile"] [data-fly]:not([data-fly="tile"]),
.fly[data-show="rug"] [data-fly]:not([data-fly="rug"]),
.fly[data-show="colour"] [data-fly]:not([data-fly="colour"]),
.fly[data-show="zoom"] [data-fly]:not([data-fly="zoom"]),
.fly[data-show="export"] [data-fly]:not([data-fly="export"]) { display: none; }
.side[data-show="lib"] .collection, .side[data-show="saved"] .library { display: none; }
.side[data-show="saved"] { width: 240px; bottom: calc(var(--rb) - 1px + var(--gap)); }   /* level with the bookmark button's bottom edge */
.collection { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.savebar { display: flex; flex: none; height: var(--rb); background: #1f1f1f; }
.savebar .mi.close { flex: 0 0 var(--rb); font-size: var(--t-l); border-left: 1px solid var(--sep); }
.savebar .mi { text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 0; flex: 1; justify-content: center; text-align: center; white-space: nowrap; padding: 0 6px; height: 100%; }
.savebar .mi + .mi { border-left: 0; }
.coll { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; padding: 10px; overflow-y: auto; align-content: end; }
.coll .empty { grid-column: 1 / -1; color: var(--mute); padding: 18px 4px; text-align: center; line-height: 1.35; font-size: var(--t-m); }
.coll .empty b { display: block; color: var(--mute); font-weight: 500; margin-bottom: 2px; }
.rug { position: relative; padding: 0; border: 1px solid var(--sep); background: var(--bg); cursor: pointer; overflow: hidden; display: block; }
.rug img { width: 100%; height: auto; display: block; }
.rug.wide { grid-column: 1 / -1; }   /* horizontal rugs take the full row */
.rug:hover { border-color: var(--edge); }
.rug[aria-current="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.rug .del { position: absolute; top: 0; right: 0; min-width: 26px; height: 26px; padding: 0 8px; font: inherit; font-size: var(--t-m); display: none; place-items: center; background: var(--panel); color: var(--fg); border: 0; border-left: 1px solid var(--sep); border-bottom: 1px solid var(--sep); cursor: pointer; }
.rug:hover .del, .rug:focus-within .del { display: grid; }
.rug .del:hover, .rug .del.arm { background: var(--fg); color: var(--on-fg); }
.rug .del.arm { display: grid; }
@media (hover: none) { .rug .del { display: grid; } }
.collnote { padding: 0 10px 10px; color: var(--mute); font-size: var(--t-s); }
.fly[data-show="export"] { min-width: 0; width: auto; padding: 0; gap: 0; }
.fly [data-fly="export"] { gap: 0; flex-direction: row; height: calc(var(--rb) - 2px); }
.fly [data-fly="export"] .mi { font-size: var(--t-l); width: calc(var(--rb) - 2px); height: 100%; padding: 0; justify-content: center; border-bottom: 0; }
.fly [data-fly="export"] .mi + .mi { border-left: 1px solid var(--line); }
.mi { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 12px; background: none; border: 0; border-bottom: 1px solid var(--sep); color: var(--fg); font: inherit; font-size: var(--t-m); text-align: left; cursor: pointer; }
.mi:last-child { border-bottom: 0; }
.mi:hover { background: var(--fg); color: var(--on-fg); }
.mi:focus-visible { outline: 1px solid var(--fg); outline-offset: -3px; }
.mi .k { color: var(--mute); }
.mi:hover .k { color: var(--on-fg); }
.fly [data-fly="colour"] > .cl { padding: 0 2px; }
.fly[data-show="colour"] { width: auto; max-width: calc(100vw - var(--rail) - 12px); }

/* ---------- motif library ---------- */
.side { position: absolute; top: var(--gap); bottom: var(--gap); left: var(--rail); z-index: 15; width: clamp(320px, 30vw, 460px); max-width: calc(100vw - var(--rail) - var(--gap)); display: flex; min-height: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.side[data-show="none"] { display: none; }
.library { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.libhead { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: var(--rb); border-bottom: 1px solid var(--line); flex: none; }
.libhead h1 { margin: 0; font-size: var(--t-l); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.libhead .count { color: var(--mute); margin-left: auto; }
.lib { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 10px; align-content: start; }
.tile { aspect-ratio: 1; padding: 0; border: 0; cursor: pointer; position: relative; background: var(--tilebg); }
.tile canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tile:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.tile[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--fg); pointer-events: none; }
.tile:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; z-index: 3; }
#libToggle { display: none; }
.tabs { display: flex; gap: 16px; overflow-x: auto; flex: none; padding: 0 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font: inherit; font-size: var(--t-m); letter-spacing: 0.02em; color: var(--mute); background: none; border: 0; padding: 13px 0 11px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.tab:hover { color: var(--fg); }
.tab[aria-pressed="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.tab:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* ---------- shared control pieces ---------- */
button.b {
  font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: 1px solid var(--line);
  padding: 5px 4px; margin: 0 0 0 -1px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; min-width: 0;
}
button.b:hover { border-color: var(--edge); z-index: 1; }
button.b[aria-pressed="true"] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); z-index: 2; }
button.b:focus-visible, .pal:focus-visible, .swatch:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; z-index: 3; }
.stepper { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; }
.stepper button.b { margin: 0; }
.scrub { border: 1px solid var(--line); border-width: 1px 0; text-align: center; line-height: 25px; cursor: ew-resize; font-variant-numeric: tabular-nums; user-select: none; touch-action: none; padding: 0 6px; }
.scrub:hover, .scrub.active { background: var(--fg); color: var(--on-fg); }
.zoomrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px 44px; }
.zoomrow button.b { margin: 0 0 0 -1px; }
.zoomrow button.b:first-child { margin: 0; }
#zoomPct { border: 1px solid var(--line); border-width: 1px 0; text-align: center; line-height: 25px; color: var(--mute); font-variant-numeric: tabular-nums; }
.swatches { display: grid; grid-template-columns: repeat(2, 34px) 9px repeat(5, 34px); justify-content: start; column-gap: 0; row-gap: 3px; }
.swsep { width: 1px; height: 18px; margin: 6px auto 0; background: var(--line); }
.swatch { all: unset; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; overflow: visible; white-space: nowrap; color: var(--mute); font-size: var(--t-s); text-align: center; }
.swatch .chip { width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--line); display: block; margin: 0 auto; }
.swatch:hover .chip, .swatch[aria-expanded="true"] .chip { border-color: var(--fg); }
.pals { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; row-gap: 6px; padding: 0 2px; }
.pal { display: flex; height: 15px; width: max-content; box-sizing: content-box; border: 1px solid var(--line); padding: 0; cursor: pointer; background: none; }
.pal .sw { display: flex; }
.pal .sw i { flex: none; width: 15px; height: 15px; }
.pal .sw i.fr { flex: 0 0 4px; }
.pal > span:last-child { display: none; }
.pal:hover { border-color: var(--edge); }
.pal[aria-pressed="true"] { border-color: var(--fg); outline: 1px solid var(--fg); }

/* ---------- canvas ---------- */
.view { grid-column: 1 / -1; grid-row: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cur { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); background: var(--panel); cursor: pointer; z-index: 6; }
.cur canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cur:hover { border-color: var(--fg); }
.cur:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* ---------- colour picker & export ---------- */
.picker { position: fixed; z-index: 30; background: var(--panel); border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; width: 248px; }
.picker canvas { display: block; width: 100%; cursor: crosshair; touch-action: none; border: 1px solid var(--line); }
#pkSV { flex: 1; min-height: 60px; }
#pkH { height: 14px; flex: none; }
.pkrow { display: grid; grid-template-columns: 1fr 9ch; gap: 6px; align-items: center; }
.pkrow span { color: var(--mute); text-transform: uppercase; }
.pkrow input { font: inherit; font-size: var(--t-m); color: var(--fg); background: var(--bg); border: 1px solid var(--line); padding: 4px 6px; text-transform: uppercase; width: 100%; }
.pkrow input:focus { outline: none; border-color: var(--fg); }
.overlay { position: fixed; inset: 0; z-index: 40; background: var(--veil); display: flex; align-items: center; justify-content: center; padding: 24px; }
.overlay .sheet { max-width: min(1200px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.overlay .bar { display: flex; gap: 8px; align-items: center; }
.overlay .bar span { flex: 1; color: var(--mute); }
.overlay img { max-width: 100%; height: auto; display: block; }

/* ---------- tablet & phone ---------- */
@media (max-width: 1023px) {
  :root { --rb: 42px; }
  .side { width: min(380px, calc(100vw - var(--rail) - var(--gap))); }
  .side[data-show="saved"] { width: min(260px, calc(100vw - var(--rail) - var(--gap))); }
}
@media (max-width: 700px) { :root { --rb: 36px; } }
@media (max-width: 520px) { .lib { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.themeBtn { position: absolute; top: 12px; right: 12px; width: var(--rb); height: var(--rb); display: grid; place-items: center; padding: 0; background: var(--panel); color: var(--fg); border: 1px solid var(--line); cursor: pointer; z-index: 6; }
.themeBtn:hover { background: var(--hover); }
.themeBtn:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.themeBtn svg { display: block; }
:root[data-theme="light"] .themeBtn .i-sun, :root:not([data-theme="light"]) .themeBtn .i-moon { display: none; }

.savebar .mi { font-size: var(--t-l); }   /* SAVE CARPET is a button label */