:root {
  --mat: #2f5d50;
  --mat-line: rgba(255, 255, 255, 0.09);
  --mat-line-strong: rgba(255, 255, 255, 0.18);
  --paper: #f6f7f4;
  --paper-2: #eceee8;
  --ink: #1c2421;
  --muted: #5b6660;
  --rule: #d7dbd3;
  --brass: #c99a3e;
  --brass-dark: #8f6a22;
  --alert: #a8322d;
  --role-underlay: #e0218a;    /* the Stitch types colors (app.js ROLE_COLORS): underlay pink ... */
  --role-travel: #1971c2;      /* ... hidden travel blue ... */
  --role-lock: #1c2421;        /* ... lock stitches near black */
  --surface: #fff;               /* fields, list rows */
  --raised: #fff;                /* dialogs and pop-ups */
  --btn-line: var(--ink);
  --primary-bg: var(--ink);
  --primary-fg: var(--paper);
  --primary-hover: var(--mat);
  --accent-text: var(--brass-dark);
  --brass-darker: #7a5a1c;
  --complement: #2a5db0;         /* opposite the brass accent on the color wheel: the font list's headings */
  --own: #d9480f;                /* a shape's own setting, current row */
  --direction: #d9480f;          /* LetterLab's Direction tool: its button, as its lines and pointer */
  --direction-bg: #fbf0e9;
  --own-strong: #a33f0b;
  --own-bg: #fbf3ee;
  --node: #1d4e89;
  --ok: #2b8a3e;
  --warn: #c92a2a;
  --info: #e67700;
  --drop-hover: #eef4f1;
  --overlay: rgba(28, 36, 33, 0.78);
  --swatch-line: rgba(0, 0, 0, 0.25);
  --shadow: rgba(28, 36, 33, 0.22);
  --preview-filter: none;        /* font previews are drawn in dark ink */
  /* the fabric in the hoop (canvas.js reads these) */
  --fabric: #fbfaf6;
  --fabric-ink: 28, 36, 33;      /* r, g, b of marks drawn on the fabric */
  --fabric-grid: rgba(47, 93, 80, 0.10);
  --fabric-cross: rgba(47, 93, 80, 0.3);
  --hoop-ring: #c99a3e;
  --sel-box: #8f6a22;
  --studio: #ebe8e1;             /* backdrop behind a garment (Realistic view) */
  --studio-2: #cfc9bd;
  --radius-s: 4px;
  --radius-m: 8px;
  --mat-wash: linear-gradient(transparent, transparent);   /* a color wash over the mat (the StitchLab theme) */
  --topbar-bg: none;
  --panel-bg: none;              /* the side panels' ground (the StitchLab theme's soft gradient); none = the page's */
  --brand-font: inherit;
  /* Segoe UI (Windows) / the system font: Atkinson Hyperlegible's footed "l" made "Fill" read as "FiLL" */
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  color-scheme: light;
}

/* StitchLab dark: slate panels, periwinkle and violet highlights */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mat: #262b45;
  --mat-line: rgba(160, 170, 255, 0.07);
  --mat-line-strong: rgba(160, 170, 255, 0.14);
  --paper: #2b2f3d;
  --paper-2: #373c50;
  --ink: #e7e9f3;
  --muted: #a4abc6;
  --rule: #434a64;
  --brass: #8f9dff;
  --brass-dark: #7b5fd9;
  --brass-darker: #6a4ec6;
  --alert: #ff8a80;
  --surface: #232736;
  --raised: #30354a;
  --btn-line: #6b7396;
  --primary-bg: #7b5fd9;
  --primary-fg: #fff;
  --primary-hover: #8f74e8;
  --accent-text: #b7a4ff;
  --complement: #e8c95c;         /* opposite the periwinkle accent on the color wheel */
  --own: #ffa94d;
  --direction: #ffa94d;
  --direction-bg: rgba(255, 169, 77, 0.14);
  --own-strong: #ffc078;
  --own-bg: rgba(255, 169, 77, 0.12);
  --node: #74a7ff;
  --ok: #69db7c;
  --warn: #ff8787;
  --info: #ffc078;
  --drop-hover: #323955;
  --overlay: rgba(18, 20, 30, 0.85);
  --swatch-line: rgba(255, 255, 255, 0.35);
  --shadow: rgba(0, 0, 0, 0.45);
  --preview-filter: invert(0.88);
  --fabric: #3e4353;
  --fabric-ink: 231, 233, 243;
  --fabric-grid: rgba(170, 180, 255, 0.09);
  --fabric-cross: rgba(170, 180, 255, 0.35);
  --hoop-ring: #6f6a9c;
  --sel-box: #b7a4ff;
  --studio: #3b4056;
  --studio-2: #22253a;
}
/* StitchLab (Mike, 2026-10-19: "a theme for stitchlab to match the main page and landing page to make it all look
   seamless initially, then user preference for theme can take over"): the front page's and Home's colors - white
   panels, deep-violet ink, purple buttons, the site's gradient under the top bar, a soft lavender -> sky -> mint ->
   cream wash behind the hoop, cream fabric in a gold ring (the site's hero), Figtree. The theme for anyone who hasn't
   chosen one. */
:root[data-theme="bright"] {
  color-scheme: light;
  font-family: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --brand-font: "Bricolage Grotesque", "Figtree", "Segoe UI", sans-serif;
  --mat: #ebe6fb;
  --mat-line: rgba(75, 43, 214, 0.05);
  --mat-line-strong: rgba(75, 43, 214, 0.10);
  --mat-wash: linear-gradient(160deg, #ece4ff 0%, #e4edff 40%, #e0f6f3 75%, #fff4e4 100%);
  /* the top bar and side panels: a faint version of the hoop's wash (Mike: "can the side bars have a slight gradient
     ... same with the top bar"), white fields and cards on it */
  --topbar-bg: linear-gradient(115deg, #5b21b6 0%, #4338ca 32%, #2563eb 58%, #06b6d4 100%) left bottom / 100% 3px no-repeat,
    linear-gradient(100deg, #f4efff 0%, #ebefff 50%, #e8f6f2 100%);
  --panel-bg: linear-gradient(175deg, #f7f3ff 0%, #eee9ff 45%, #e8f0fd 75%, #e8f6f2 100%);
  --paper: #ffffff;
  --paper-2: #f3effd;
  --ink: #1b1530;
  --muted: #5a5370;
  --rule: #e4dcf3;
  --brass: #7c3aed;
  --brass-dark: #4b2bd6;
  --brass-darker: #3b1e8f;
  --alert: #b4234a;
  --surface: #ffffff;
  --raised: #ffffff;
  --btn-line: #3b3355;
  --primary-bg: #4b2bd6;
  --primary-fg: #ffffff;
  --primary-hover: #3b1e8f;
  --accent-text: #4b2bd6;
  --complement: #0e7490;         /* the site's teal beside its purple: the font list's headings */
  --own: #db2777;
  --direction: #d9480f;
  --direction-bg: #fdeee5;
  --own-strong: #a1124f;
  --own-bg: #ffeff5;
  --node: #1d4ed8;
  --ok: #15803d;
  --warn: #c92a2a;
  --info: #c2410c;
  --drop-hover: #f3eeff;
  --overlay: rgba(27, 21, 48, 0.72);
  --swatch-line: rgba(27, 21, 48, 0.28);
  --shadow: rgba(20, 12, 50, 0.18);
  --fabric: #fffcf5;
  --fabric-ink: 27, 21, 48;
  --fabric-grid: rgba(75, 43, 214, 0.08);
  --fabric-cross: rgba(75, 43, 214, 0.28);
  --hoop-ring: #c9993e;
  --sel-box: #4b2bd6;
  --studio: #efeafb;
  --studio-2: #d9d1f2;
}
/* High contrast: black on white, black lines, a black mat round a white hoop in a yellow ring */
:root[data-theme="contrast"] {
  color-scheme: light;
  --mat: #000000;
  --mat-line: rgba(255, 255, 255, 0.10);
  --mat-line-strong: rgba(255, 255, 255, 0.22);
  --paper: #ffffff;
  --paper-2: #ececec;
  --ink: #000000;
  --muted: #1f1f1f;
  --rule: #000000;
  --brass: #0040c0;
  --brass-dark: #002e8a;
  --brass-darker: #001f5e;
  --alert: #b00020;
  --surface: #ffffff;
  --raised: #ffffff;
  --btn-line: #000000;
  --primary-bg: #000000;
  --primary-fg: #ffffff;
  --primary-hover: #0040c0;
  --accent-text: #0040c0;
  --complement: #6a00a8;
  --own: #b00020;
  --direction: #b33d00;
  --direction-bg: #fff0e6;
  --own-strong: #7a0016;
  --own-bg: #ffe5ea;
  --node: #0040c0;
  --ok: #006b1f;
  --warn: #b00020;
  --info: #8a4b00;
  --drop-hover: #e8eeff;
  --overlay: rgba(0, 0, 0, 0.88);
  --swatch-line: #000000;
  --shadow: rgba(0, 0, 0, 0.5);
  --fabric: #ffffff;
  --fabric-ink: 0, 0, 0;
  --fabric-grid: rgba(0, 0, 0, 0.14);
  --fabric-cross: rgba(0, 0, 0, 0.5);
  --hoop-ring: #ffd400;
  --sel-box: #0040c0;
  --studio: #ffffff;
  --studio-2: #bdbdbd;
}
/* fabric on screen, chosen in Settings (after the themes so it wins) */
:root[data-fabric="linen"] { --fabric: #fbfaf6; --fabric-ink: 28, 36, 33;
  --fabric-grid: rgba(47, 93, 80, 0.10); --fabric-cross: rgba(47, 93, 80, 0.3); }
:root[data-fabric="white"] { --fabric: #ffffff; --fabric-ink: 28, 36, 33;
  --fabric-grid: rgba(60, 70, 90, 0.09); --fabric-cross: rgba(60, 70, 90, 0.3); }
:root[data-fabric="slate"] { --fabric: #3e4353; --fabric-ink: 231, 233, 243;
  --fabric-grid: rgba(170, 180, 255, 0.09); --fabric-cross: rgba(170, 180, 255, 0.35); }
:root[data-fabric="black"] { --fabric: #15171c; --fabric-ink: 231, 233, 243;
  --fabric-grid: rgba(255, 255, 255, 0.07); --fabric-cross: rgba(255, 255, 255, 0.3); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }

h1, h2 { margin: 0; font-weight: 700; }
h1 { font-size: 1.35rem; letter-spacing: -0.01em; }
h2 { font-size: 0.95rem; margin-bottom: 0.6rem; }

button, .button, select, input { font: inherit; color: inherit; }
button, .button {
  border: 1px solid var(--btn-line);
  background: transparent;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); }
button.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
button.ghost:hover, .button.ghost:hover { background: var(--paper-2); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  background: var(--topbar-bg);
}
.brand { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.machine { color: var(--muted); font-size: 0.9rem; }
/* the top bar's machine button: framed and sized as the Help (?) and Settings buttons beside it (Mike, 2026-10-30), its
   icon a little larger than the bar's other icons to match their symbols' weight */
button.machine { border: 1px solid var(--btn-line); background: transparent; padding: 0.22rem 0.42rem;
  border-radius: var(--radius-s); color: var(--ink); line-height: 0; }
button.machine:hover { background: var(--paper-2); }
button.machine svg { width: 21px; height: 21px; }
/* Settings > Machine (machines.js) */
.machine-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.machine-hoops { margin: 0.4rem 0 0.6rem; }
.machine-hoops .sub-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.machine-hoops .sub-head small { color: var(--muted); }
.hoop-list { list-style: none; margin: 0 0 0.4rem; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-s); }
.hoop-list li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.6rem;
  padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.9rem; }
.hoop-list li + li { border-top: 1px solid var(--rule); }
.hoop-list li:hover { background: var(--paper-2); }
.hoop-list li.current { font-weight: 700; box-shadow: inset 3px 0 0 var(--brass); }
.hoop-list li.hint { cursor: default; grid-template-columns: 1fr; }
.hoop-list .hoop-size { font-variant-numeric: tabular-nums; }
.hoop-list .hoop-kind { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.hoop-add { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.hoop-add input[type=text] { flex: 1 1 8rem; min-width: 6rem; }
.hoop-add input[type=number] { width: 5.2rem; }
.machine-own { margin: 0.5rem 0; }
.machine-own summary { cursor: pointer; font-weight: 600; }
.machine-files { gap: 0.4rem; flex-wrap: wrap; }
.top-actions { display: flex; align-items: center; gap: 0.8rem; }

/* layout */
.layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 290px 1fr 320px;
}
.panel { overflow-y: auto; padding: 1rem 1.1rem 2rem; background: var(--panel-bg); }
.panel.left { border-right: 1px solid var(--rule); }
.panel.right { border-left: 1px solid var(--rule); }
.panel section, .panel details { margin-bottom: 1.4rem; }

.field { display: grid; gap: 0.2rem; margin-bottom: 0.65rem; }
.field span { font-size: 0.85rem; color: var(--muted); }
.field.inline { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.field input, .field select {
  width: 100%; padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface);
}
.field.inline select { width: auto; }
.check { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.check.small { font-size: 0.85rem; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; }
.row { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }

.drop {
  display: grid; place-items: center; gap: 0.15rem; text-align: center;
  padding: 1.3rem 0.8rem; cursor: pointer;
  border: 2px dashed var(--muted); border-radius: var(--radius-m);
  background: var(--surface);
}
.drop:hover, .drop.over { border-color: var(--mat); background: var(--drop-hover); }
.drop span { color: var(--muted); font-size: 0.85rem; }

/* cutting mat */
.mat {
  position: relative; min-width: 0; min-height: 360px;
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px),
    var(--mat-wash);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, auto;
}
/* the plain arrow, like Inkscape's selector (Mike, 2026-09-29): over shapes and while dragging too;
   the hand only while panning (right / middle drag, Ctrl+drag) */
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; touch-action: none; }
#canvas.panning { cursor: grabbing; }
#canvas.can-move { cursor: default; }
#canvas.moving { cursor: default; }
#canvas.trace-moving, #canvas.trace-moving.moving { cursor: move; }   /* Move picture (trace.js) */
.zoom {
  position: absolute; top: 0.8rem; right: 0.8rem; display: flex;
  background: var(--paper); border-radius: var(--radius-m); overflow: hidden;
}
.zoom button {
  border: none; border-radius: 0; padding: 0.35rem 0.75rem; min-width: 2.4rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.zoom button:hover { background: var(--paper-2); }
.zoom button + button { border-left: 1px solid var(--rule); }
.size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.edit-bar {
  position: absolute; top: 0.8rem; left: 64px; right: 17.5rem;   /* clear of the drawing tools, zoom + view switch */
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--paper); padding: 0.5rem 0.8rem; border-radius: var(--radius-m);
  border-left: 4px solid var(--brass);
}
.edit-bar p { margin: 0; flex: 1 1 18rem; font-size: 0.85rem; }
.edit-bar strong { display: block; font-size: 0.95rem; }
.edit-bar .legend { display: block; margin-top: 0.25rem; }
.spine-key { display: inline-block; width: 1.6rem; height: 0; vertical-align: middle;
  border-top: 2px dashed #9c36b5; }
.edit-bar .row { margin: 0; }
#canvas.editing { cursor: crosshair; }
.mat.drop-target::after {
  content: "Drop to add it here"; position: absolute; inset: 0.5rem; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border: 3px dashed var(--brass); border-radius: var(--radius-m);
  background: rgba(201, 154, 62, 0.12); color: #fff; font-weight: 700; font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.viewmode {
  position: absolute; top: 3.4rem; right: 0.8rem; display: flex;
  background: var(--paper); border-radius: var(--radius-m); overflow: hidden;
}
.viewmode button {
  border: none; border-radius: 0; padding: 0.3rem 0.65rem; font-size: 0.85rem; background: var(--paper);
}
.viewmode button + button { border-left: 1px solid var(--rule); }
.viewmode button[aria-pressed="true"] { background: var(--brass-dark); color: #fff; border-color: var(--brass-dark); }
.node-bar { border-left-color: var(--node); }
.node-bar .row { flex-wrap: wrap; gap: 0.3rem; }
.shapes li.current { box-shadow: inset 3px 0 0 var(--own); background: var(--own-bg); }
.shapes .name { cursor: pointer; }
#text-convert { margin: 0.2rem 0 0.6rem; }
#canvas.on-handle { cursor: pointer; }
.shapes .dir-btn { font-size: 0.8rem; padding: 0.2rem 0.5rem; }
.shapes li.editing { background: var(--paper-2); }
.empty {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--overlay); color: #f6f7f4;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-s); pointer-events: none;
}
.empty p { margin: 0; }
.player {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  background: var(--paper); padding: 0.5rem 0.8rem;
  border-radius: var(--radius-m);
}
.player label[for] { font-weight: 700; font-size: 0.9rem; }
.player input[type=range] { flex: 1; accent-color: var(--brass-dark); }
/* the sew-out's track with a dot in each thread's color where its color starts (no color text in the readout) */
.player .progress-wrap { position: relative; flex: 1; min-width: 6rem; display: flex; align-items: center; }
.player .progress-wrap input[type=range] { width: 100%; margin: 0; }
.progress-marks { position: absolute; left: 8px; right: 8px; top: 50%; height: 0; pointer-events: none; }
.progress-marks .color-mark { position: absolute; top: -0.85rem; width: 0.55rem; height: 0.55rem; margin-left: -0.275rem;
  border-radius: 50%; border: 1px solid var(--ink); pointer-events: auto; cursor: help; }
.player .stitch-info { flex-basis: 100%; text-align: left; min-height: 1.1em; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.6rem; }
.player .stitch-info button { flex: none; padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.stitch-bar .stitch-info-bar { display: block; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.player-view { display: flex; align-items: center; gap: 0.6rem; }
.player-view input[type=range] { width: 5rem; flex: none; vertical-align: middle; }
.player-view [hidden] { display: none; }
/* Top / Underlay / Travel opacity, stacked (the bar grows taller, never wider) */
.opacity-stack { display: grid; gap: 0.05rem; justify-items: end; }
.opacity-stack label { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1.1; }
.opacity-stack input[type=range] { width: 4.6rem; }
.swatch-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.underlay-dot { background: var(--role-underlay); }
.travel-dot { background: var(--role-travel); }
.lock-dot { background: var(--role-lock); box-shadow: 0 0 0 1px var(--surface); }
.player output { min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
/* fixed widths in the slim bar: the counter and the stitch readout never resize the track while it plays */
.player #progress-out { flex: none; width: 9.5rem; min-width: 9.5rem; white-space: nowrap; }
.vcr { display: flex; border: 1px solid var(--rule); border-radius: var(--radius-s); overflow: hidden; }
.vcr button {
  border: none; border-radius: 0; background: var(--surface); padding: 0.25rem 0.5rem; min-width: 2.1rem;
  font-size: 0.95rem; line-height: 1.2; cursor: pointer; color: var(--ink);
  font-family: "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;
}
.vcr button + button { border-left: 1px solid var(--rule); }
.vcr button:hover { background: var(--paper-2); }
.vcr button.play { background: var(--brass-dark); color: #fff; min-width: 2.6rem; }
.vcr button.play:hover { background: var(--brass-darker); }
#speed { padding: 0.2rem 0.3rem; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); font-size: 0.85rem; }

/* summary */
/* the Summary: compact (Mike, 2026-10-09), three across */
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.3rem 0.8rem; margin: 0 0 0.6rem; }
.stats dt { font-size: 0.72rem; color: var(--muted); }
.stats dd { margin: 0; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats .dev dd { font-weight: 400; color: var(--muted); }
.speed-row { display: flex; align-items: center; gap: 0.35rem; margin: -0.2rem 0 0.6rem; }
.speed-row input[type=range] { flex: 1; min-width: 4rem; }
.speed-row .spm-box { width: 4.2rem; }
.speed-row .spm-unit { color: var(--muted); }
/* the right panel's sections apart: a line between Summary, Stitch check, Notes and Layers */
.panel.right > section + section { border-top: 2px solid var(--rule); padding-top: 1rem; }
.panel.right > section { margin-bottom: 1rem; }
/* Threads: each thread once, under its fold */
.threads-head { display: flex; align-items: center; gap: 0.4rem; border-top: 1px solid var(--rule); margin: 0 0 0.3rem; }
.threads-head[hidden] { display: none; }
.threads-head .group-toggle { flex: 1; padding: 0.35rem 0; }
.threads-list { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.threads-list li { display: flex; align-items: center; gap: 0.45rem; margin: 0.25rem 0; }
.threads-list .thread-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.threads-list .thread-use { font-size: 0.72rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.colors { margin: 0; padding-left: 1.3rem; }
.colors li { margin: 0.25rem 0; }
.swatch {
  display: inline-block; width: 0.95rem; height: 0.95rem; vertical-align: -0.15rem;
  border-radius: 50%; margin-right: 0.4rem; border: 1px solid var(--swatch-line);
}
.warnings { margin: 0; padding-left: 1.1rem; color: var(--alert); font-size: 0.88rem; }
.warnings li { margin-bottom: 0.35rem; }

.shapes { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.shapes li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.5rem;
  padding: 0.55rem 0; border-top: 1px solid var(--rule);
}
.shapes .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shapes .meta { grid-column: 2; font-size: 0.8rem; color: var(--muted); }
.shapes .controls { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* a LetterLab font's letter piece: its own satin density and underlay (app.js pieceLook) */
.shapes .piece-look { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin-top: 0.3rem; }
.shapes .piece-look input { width: 4.5rem; }
.shapes .route { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.shapes .route select { font-size: 0.8rem; }
.pick-group { display: inline-flex; }
.pick-btn { font-size: 0.8rem; padding: 0.15rem 0.5rem; }
.pick-btn.set { font-weight: 700; }
.pick-btn[aria-pressed="true"] { background: var(--brass-dark); color: #fff; }
.pick-clear { font-size: 0.8rem; padding: 0.15rem 0.4rem; margin-left: 0.15rem; }
#canvas.picking { cursor: crosshair; }
.flip-btn { padding: 0.15rem 0.45rem; }
.xf-reset { font-size: 0.8rem; padding: 0.15rem 0.5rem; }
.shapes .route .check { margin: 0; gap: 0.3rem; }
.shapes .route input[type=checkbox] { width: auto; }
.shapes select, .shapes input {
  padding: 0.25rem 0.35rem; border: 1px solid var(--rule); border-radius: var(--radius-s);
  background: var(--surface); font-size: 0.85rem;
}
.shapes input { width: 4.6rem; }
.shapes li.skipped .name { text-decoration: line-through; color: var(--muted); }

/* shapes panel groups */
.section-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.section-head h2 { margin: 0 auto 0 0; }
.shapes li.group {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0; border-top: 1px solid var(--rule);
}
.shapes li.group.design { padding: 0.5rem 0; border-top: 2px solid var(--rule); }
.shapes li.group.design.selected .group-title { color: var(--accent-text); }
.shapes li.group.thread { padding-left: 1rem; }
.shapes li.nested { padding-left: 2rem; }
.group-toggle {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.4rem;
  border: none; background: none; padding: 0.15rem 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.group-toggle:hover .group-title { text-decoration: underline; }
.group-toggle .chevron { width: 0.8rem; color: var(--muted); }
.group-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shapes li.group.thread .group-title { font-weight: 400; }
.layers-count { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: -0.3rem 0 0.5rem; }
.layers-count:empty { display: none; }
.group-count { margin-left: auto; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.shapes li.group select { flex: 0 0 auto; }

.status {
  position: fixed; left: 50%; top: 4.2rem; transform: translateX(-50%); z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 0.45rem 0.9rem; border-radius: var(--radius-s);
  font-size: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.status.show { opacity: 1; pointer-events: auto; }
.status { display: flex; align-items: center; gap: 0.6rem; max-width: min(46rem, calc(100vw - 2rem)); }
.status-close { flex: none; background: none; border: 0; color: inherit; font: inherit; font-size: 1.15rem; line-height: 1;
  padding: 0 0.15rem; cursor: pointer; opacity: 0.75; }
.status-close:hover, .status-close:focus-visible { opacity: 1; }
.status.error { background: var(--alert); }

@media (max-width: 1050px) {
  .layout { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mat { order: -1; height: 62vh; }
  .panel.left, .panel.right { border: none; border-top: 1px solid var(--rule); overflow: visible; }
  body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .status { transition: none; }
}

/* color and width controls */
.swatch-btn {
  padding: 0; border: none; background: none; cursor: pointer; line-height: 0;
  border-radius: 50%;
}
.swatch-btn .swatch { width: 1.15rem; height: 1.15rem; margin: 0; }
.swatch-btn:hover .swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brass); }
.colors li { display: flex; align-items: center; gap: 0.45rem; }
.colors li::marker { content: none; }
.colors { list-style: none; padding-left: 0; counter-reset: c; }
.colors-toggle { width: 100%; margin: 0 0 0.3rem; padding: 0.35rem 0; border-top: 1px solid var(--rule); }
.colors li::before { counter-increment: c; content: counter(c) "."; color: var(--muted); min-width: 1.2rem; }
.shapes li { grid-template-columns: auto 1fr; align-items: center; }
.shapes .width { display: flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.shapes .width input { width: 4rem; }

/* settings dialog */
.gear { font-size: 1.15rem; line-height: 1; padding: 0.35rem 0.6rem; }
#open-help { font-weight: 700; line-height: 1; padding: 0.4rem 0.75rem; color: var(--ink); }
/* a ? beside a panel's title or the tool hint: opens the help at that subject (helplinks.js) */
.help-q {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  margin-left: 0.4rem; border: 1px solid var(--rule); border-radius: 50%; vertical-align: middle;
  font-size: 0.72rem; font-weight: 700; line-height: 1; color: var(--muted); text-decoration: none;
  background: var(--surface);
}
.help-q:hover { color: var(--accent-text); border-color: var(--accent-text); }
dialog.settings {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem);
  padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: 0 16px 48px var(--shadow); color: var(--ink); background: var(--raised);
}
dialog.settings::backdrop { background: rgba(28, 36, 33, 0.35); }
dialog.ask { width: min(31rem, calc(100vw - 2rem)); }
#lab-letterlab #letterlab-open { margin-top: 0.3rem; }
/* LetterLab (letterlab.js, 2026-10-25): a page of its own over the design space, as Home is - a top bar, the side with its
   three menus (Page, Letter, Panel) and one panel at a time, the main room for the grid, the views or Font settings */
.ll-page { position: fixed; inset: 0; z-index: 930; display: grid; grid-template-rows: auto 1fr; background: var(--paper);
  color: var(--ink); }
.ll-page[hidden] { display: none; }
body.ll-open { overflow: hidden; }
.ll-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--rule); background: var(--raised); }
.ll-brand { font: 700 1.1rem/1 var(--brand-font, inherit); color: var(--accent-text); letter-spacing: 0.01em; }
/* the font picker as the design area's (Mike, 2026-10-25: "the font sample in its own name"): .font-pick / .font-pop */
.ll-fontpick { width: 22rem; max-width: 100%; }
/* Settings -> Fonts on this computer: the LetterLab fonts kept in this browser */
.ll-kept-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0.4rem; }
.ll-kept { display: inline-flex; align-items: center; gap: 0.1rem; color: var(--ink); }
.ll-kept button { padding: 0 0.35rem; line-height: 1.3; }
.ll-fontpick .font-pick { min-height: 2.1rem; padding: 0.2rem 0.5rem; }
.ll-fontpick .font-pop { right: auto; width: 26rem; max-width: calc(100vw - 2rem); }
.ll-state { font-size: 0.8rem; color: var(--muted); }
.ll-msg { flex: 1 1 12rem; min-width: 0; font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ll-error { color: var(--alert); }
.ll-top-files { display: inline-flex; gap: 0.4rem; margin-left: auto; }
.ll-body { display: grid; grid-template-columns: 20rem 1fr; min-height: 0; }
.ll-side { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem; min-height: 0;
  overflow-y: auto; border-right: 1px solid var(--rule); background: var(--paper-2); }
.ll-crumbs { display: grid; grid-template-columns: auto 1fr; gap: 3px; }
.ll-crumb { display: grid; justify-items: start; gap: 0.05rem; padding: 0.35rem 0.6rem; min-width: 0; text-align: left;
  color: var(--primary-fg); background: var(--primary-bg); border: 0; border-radius: var(--radius-s); cursor: pointer; }
.ll-crumb small { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.ll-crumb span { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ll-crumb:hover, .ll-crumb[aria-expanded=true] { background: var(--primary-hover); }
.ll-panel-btn { opacity: 0.92; }
.ll-crumb[hidden] { display: none; }
.ll-menu { display: grid; gap: 2px; padding: 0.35rem; background: var(--raised); border: 1px solid var(--rule);
  border-radius: var(--radius-m); box-shadow: 0 8px 24px var(--shadow); }
.ll-menu[hidden] { display: none; }
.ll-menu small { padding: 0.35rem 0.5rem 0.1rem; font-size: 0.7rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; }
.ll-menu button { text-align: left; padding: 0.4rem 0.6rem; background: none; border: 0; border-radius: var(--radius-s);
  color: var(--ink); cursor: pointer; font-size: 0.95rem; }
.ll-menu button:hover { background: var(--drop-hover); }
.ll-menu button[aria-current=true] { font-weight: 700; color: var(--accent-text); }
.ll-side-body { display: flex; flex-direction: column; gap: 0.45rem; }
.ll-side-body[hidden], .ll-card[hidden] { display: none; }
.ll-card { padding: 0.6rem 0.7rem; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.ll-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.ll-card p { margin: 0.35rem 0; }
.ll-card .hint:first-child { margin-top: 0; }
.ll-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.ll-row .field { flex: 1 1 7rem; }
.ll-flagtext { color: var(--warn); }
.ll-big-ch { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.ll-big-ch #ll-ch-big { font-size: 3rem; line-height: 1; }
.ll-piece, .ll-cutrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--rule); }
.ll-piece .hint, .ll-cutrow span { margin: 0 0 0 auto; }
.ll-cutrow span { margin: 0; flex: 1; font-size: 0.88rem; }
.ll-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid var(--swatch-line); }
.ll-swatch.line { height: 0.25rem; border: 0; vertical-align: middle; }
.ll-jumps { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ll-note-field textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.ll-prevnext { display: flex; justify-content: space-between; gap: 0.4rem; }
.ll-pages { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.ll-pages button { min-width: 0; padding: 0.1rem 0.35rem; font-size: 0.78rem; }
.ll-pages button[aria-pressed=true] { background: var(--drop-hover); }
.ll-main { position: relative; min-width: 0; min-height: 0; overflow: auto; }
.ll-view { min-height: 100%; box-sizing: border-box; }
.ll-view[hidden] { display: none; }
/* the Font page: the reviewed letters big, then every letter in a grid */
.ll-view[data-ll-view=font] { padding: 1rem 1.2rem; }
.ll-sample { min-height: 4.5rem; padding: 0.2rem 0 0.9rem; font-size: 3.6rem; line-height: 1.1; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule); margin-bottom: 0.9rem; word-break: break-all; }
.ll-sample:empty::before { content: attr(data-empty); font-size: 0.95rem; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.ll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.8rem, 1fr)); gap: 4px; }
.ll-cell { position: relative; display: grid; grid-template-rows: 1fr auto; height: 4.6rem; padding: 0.2rem 0.25rem 0.15rem;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-s); cursor: pointer; color: var(--ink); }
.ll-cell:hover { border-color: var(--accent-text); }
.ll-cell .ll-glyph { align-self: center; font-size: 2rem; line-height: 1; }
.ll-cell .ll-label { justify-self: start; font-size: 0.68rem; color: var(--muted); }
.ll-cell[aria-selected=true] { outline: 2px solid var(--accent-text); outline-offset: -1px; background: var(--drop-hover); }
.ll-cell .ll-mark { position: absolute; top: 2px; right: 4px; font: 600 0.78rem/1 var(--brand-font, sans-serif); }
.ll-cell .ll-mark.done { color: var(--ok); }
.ll-cell .ll-mark.flag { color: var(--warn); }
.ll-cell .ll-cuts { position: absolute; bottom: 2px; right: 4px; font-size: 0.62rem; color: var(--muted); }
/* the Letter menu: the grid over the page */
.ll-letter-fly { position: fixed; z-index: 2; width: min(60rem, calc(100vw - 2rem)); max-height: min(70vh, 40rem);
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: var(--radius-m); box-shadow: 0 16px 48px var(--shadow); }
.ll-letter-fly[hidden] { display: none; }
.ll-fly-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--muted); }
.ll-letter-fly .ll-grid { overflow-y: auto; min-height: 0; }
/* the Letter page: the outline and its stitches, each with its zoom */
.ll-view[data-ll-view=letter] { height: 100%; display: flex; flex-direction: column; padding: 0.5rem 0.7rem 0.7rem; gap: 0.4rem; }
.ll-view[data-ll-view=letter][hidden] { display: none; }
.ll-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.ll-viewmode { display: inline-flex; gap: 0.3rem; align-items: center; }
.ll-viewmode button[aria-pressed=true], .ll-link[aria-pressed=true] { background: var(--drop-hover); border-color: var(--accent-text); }
/* the Direction tool on: its button in the direction lines' orange, as its pointer (Mike: "a visual to know the difference") */
.ll-player { display: inline-flex; align-items: center; gap: 0.3rem; }
.ll-player input[type=range] { width: 9rem; }
#ll-tool-rung[aria-pressed=true] { color: var(--direction); border-color: var(--direction); background: var(--direction-bg); font-weight: 600; }
.ll-viewmode select[hidden], .ll-link[hidden] { display: none; }
.ll-viewhint { margin: 0 0 0 auto; }
.ll-views { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ll-views.single { grid-template-columns: 1fr; }
.ll-views figure { position: relative; margin: 0; min-height: 0; }
.ll-views figure[hidden] { display: none; }
.ll-views canvas { width: 100%; height: 100%; display: block; border: 1px solid var(--rule); border-radius: var(--radius-s);
  cursor: crosshair; touch-action: none; }
.ll-views figure[data-ll-fig=sew] canvas { cursor: grab; }
.ll-zoom { position: absolute; right: 0.4rem; bottom: 0.4rem; display: flex; align-items: center; gap: 0.2rem;
  padding: 0.15rem; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.ll-zoom button { min-width: 1.8rem; }
.ll-zpct { min-width: 3.4rem; text-align: center; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
/* the pages not built yet, and Font settings */
/* Spacing (letterspacing.js): the line across the page, the picked letter's numbers at the side */
.ll-view[data-ll-view=spacing] { height: 100%; display: flex; flex-direction: column; padding: 0.5rem 0.7rem 0.7rem; gap: 0.4rem; }
.ll-view[data-ll-view=spacing][hidden] { display: none; }
.ll-sp-textlabel { display: inline-flex; align-items: center; gap: 0.4rem; }
.ll-sp-textlabel input { width: 16rem; font-size: 1rem; }
.ll-sp-fig { flex: 1; min-height: 0; margin: 0; }
.ll-sp-fig canvas { width: 100%; height: 100%; display: block; border: 1px solid var(--rule); border-radius: var(--radius-s); cursor: pointer; }
.ll-sp-field { margin: 0.35rem 0; }
.ll-sp-num { display: inline-flex; align-items: center; gap: 0.25rem; }
.ll-sp-num input { width: 5rem; }
.ll-sp-close { margin: 0.3rem 0; padding-left: 1.1rem; color: var(--warn); }
/* the Kerning groups fold: a group a row, its name then its letters */
.ll-sp-groups { margin: 0.5rem 0; }
.ll-sp-groups summary { cursor: pointer; font-weight: 600; }
.ll-sp-groups h4 { margin: 0.6rem 0 0.2rem; }
.ll-sp-groups .field { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: 0.4rem; margin: 0.15rem 0; }
.ll-sp-groups .field > span { margin: 0; }
/* Test (lettertest.js) */
.ll-view[data-ll-view=test] { height: 100%; display: flex; flex-direction: column; padding: 0.5rem 0.7rem 0.7rem; }
.ll-view[data-ll-view=test][hidden] { display: none; }
#ll-test-words { width: 100%; box-sizing: border-box; font-size: 0.95rem; }
.ll-test-sizes { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0.4rem 0; }
.ll-test-sizes label { display: inline-flex; align-items: center; gap: 0.2rem; }
.ll-test-row { margin: 0.35rem 0; font-size: 0.85rem; }
.ll-test-row b { display: inline-block; min-width: 3.4rem; }
.ll-exp-sizes { display: flex; gap: 0.3rem; }
.ll-exp-sizes input { width: 4.2rem; }
#ll-exp-progress { width: 100%; }
.ll-exp-show { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.ll-exp-show button.on { background: var(--primary-bg); color: var(--primary-fg); }
/* All letters (letterall.js) */
.ll-view[data-ll-view=all] { padding: 1rem 1.2rem; }
.ll-soon { max-width: 36rem; margin: 4rem auto; padding: 0 1.2rem; }
.ll-soon h2 { margin: 0 0 0.6rem; }
.ll-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); align-items: start; gap: 0.8rem;
  padding: 1rem 1.2rem; height: auto; }
.ll-settings[hidden] { display: none; }
.ll-settings textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.ll-facts { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.3rem 0.6rem; margin: 0; font-size: 0.9rem; }
.ll-facts dt { color: var(--muted); }
.ll-facts dd { margin: 0; overflow-wrap: anywhere; }
.ll-license { display: block; max-height: 7.5rem; overflow-y: auto; white-space: pre-wrap; font-size: 0.85rem; }
.llf-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.15rem 0.6rem; }
.llf-langs label.check, .ll-page label.check { display: flex; justify-content: flex-start; align-items: center; gap: 0.35rem;
  text-align: left; margin: 0.15rem 0; }
.llf-langs label.check input, .ll-page label.check input { margin: 0; flex: none; width: auto; }
.ll-page input[type=checkbox]:disabled + span { color: var(--muted); }
@media (max-width: 760px) {
  .ll-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ll-side { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ll-views { grid-template-columns: 1fr; }
}   /* Send to machine: a name already on the board */
dialog.ask .settings-body p { margin: 0.6rem 0; }
/* a failure in plain words (errors.js): its code and reference small, the technical text only without a clipboard */
dialog.error-box .error-code { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
dialog.error-box textarea { width: 100%; font: 0.75rem/1.35 ui-monospace, Consolas, monospace; }
/* Download with its ▾ (the download dialog: threadcost.js) */
.split-btn { display: inline-flex; }
.split-btn #download { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.45rem; padding-right: 0.45rem;
  border-left: 1px solid var(--surface); }
dialog.export-dialog { width: min(40rem, calc(100vw - 2rem)); }
/* PatchLab's Preview patch…: the patch on the studio backdrop, as large as fits */
dialog.patch-preview { width: auto; max-width: calc(100vw - 2rem); }
#patch-preview-canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; background: var(--studio); border-radius: 6px; }
/* Share to Designs (designshare.js) */
dialog.share-dialog { width: min(40rem, calc(100vw - 2rem)); }
.share-top { display: flex; gap: 0.9rem; align-items: flex-start; }
.share-top img { width: 9rem; height: 9rem; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--radius-m);
  background: var(--fabric); flex: none; }
.share-top .hint { margin-top: 0; }
.share-facts { font-weight: 600; margin: 0.3rem 0 0; }
.share-signin, #share-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.share-signin button { align-self: flex-start; }
.share-who { margin: 0; color: var(--muted); font-size: 0.85rem; }
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
#share-fields textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.share-photos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.share-photos-row small { color: var(--muted); }
.share-photos { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.share-photos figure { margin: 0; position: relative; }
.share-photos img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--rule); display: block; }
.share-photos figure button { position: absolute; top: -0.4rem; right: -0.4rem; padding: 0 0.35rem; background: var(--raised); }
.share-rights { font-weight: 600; }
.share-msg { min-height: 1.2em; margin: 0.5rem 0 0; }
.share-msg.bad { color: var(--warn); }
.share-msg.good { color: var(--ok); }
.share-done p { font-weight: 600; color: var(--ok); }
.share-done a.btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--radius-s); text-decoration: none;
  background: var(--primary-bg); color: var(--primary-fg); }
.share-mine { margin-top: 1rem; }
.share-mine ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.share-mine li { display: flex; align-items: center; gap: 0.6rem; }
.share-mine li img { width: 2.6rem; height: 2.6rem; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--fabric); }
.share-mine li span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.share-mine li small { color: var(--muted); }
@media (max-width: 520px) { .share-top { flex-direction: column; } .share-row { grid-template-columns: 1fr; } }
dialog.export-dialog h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cost-table th, .cost-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--rule); text-align: left; }
.cost-table th { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.cost-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-table .swatch { display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 3px; border: 1px solid var(--rule); vertical-align: -2px; }
.cost-table .thread-code { display: block; font-size: 0.75rem; color: var(--muted); }
.cost-table tr.bobbin td { color: var(--muted); }
.cost-table tfoot td { font-weight: 700; border-bottom: none; }
.price-fold { margin-top: 0.6rem; }
.bobbin-advice { margin: 0.6rem 0 0; font-size: 0.9rem; }
.sheet-options { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; font-size: 0.9rem; margin-bottom: 0.4rem; }
.sheet-options label { display: inline-flex; align-items: center; gap: 0.3rem; }
.price-list { display: grid; gap: 0.35rem; margin: 0.5rem 0; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
.price-row .price-name { min-width: 11rem; font-weight: 600; }
.price-row input { width: 4.6rem; }
.price-row .price-note { color: var(--muted); }
.price-row input[data-k="spools"], .price-row input[data-k="holds"] { width: 3.6rem; }
.price-row input[data-k="stitch"], .price-row input[data-k="trim"], .price-row input[data-k="bobbin"] { width: 3.4rem; }
/* the machine check at Download / Send (machinecheck.js): one item per problem, its fixes below it */
dialog.machine-check { width: min(36rem, calc(100vw - 2rem)); }
.machine-check-list { list-style: none; margin: 0; padding: 0; }
.machine-check-list li { border-left: 3px solid var(--warn); padding: 0.1rem 0 0.4rem 0.7rem; margin: 0.6rem 0 0.9rem; }
.machine-check-list li.check-parked { border-left-color: var(--muted); }
.machine-check-list strong { display: block; }
.machine-check-list p { margin: 0.25rem 0 0.4rem; }
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--raised);
}
.settings-head h2 { margin: 0; font-size: 1.05rem; }
.settings-body { padding: 0.4rem 1rem 1rem; overflow-y: auto; }
.settings-body section { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.settings-body section:last-child { border-bottom: none; }
.settings-body h3 { font-size: 0.95rem; margin: 0.3rem 0 0.6rem; }
.chart-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.chart-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.9rem; }
.chart-list li span { flex: 1; }
.thread-code { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.colors li .thread-text { display: flex; flex-direction: column; line-height: 1.25; }
.group-title .thread-code { font-weight: 400; margin-left: 0.35rem; }

.palette {
  position: fixed; z-index: 1000; width: 292px;   /* above the trace wizard (its Colors table picks threads) */
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: 0 8px 28px var(--shadow); padding: 0.7rem;
}
.palette-head, .palette-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.palette-head { margin-bottom: 0.5rem; }
.palette-foot { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.palette-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.palette-grid button {
  aspect-ratio: 1; padding: 0; border: 1px solid var(--swatch-line); border-radius: 4px;
}
.palette-grid button:hover { transform: scale(1.15); }
.palette-grid button.current { outline: 2px solid var(--ink); outline-offset: 1px; }
button.small { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
.custom-color { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.custom-color input { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--rule); background: none; }

/* history and project */
.history { display: flex; }
.history button:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.history button:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.history button:not(:first-child) { margin-left: -1px; }
.history button:not(:first-child):not(:last-child) { border-radius: 0; }
.parts { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.parts li {
  display: flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--rule); border-radius: var(--radius-s);
  padding: 0.2rem 0.25rem 0.2rem 0.5rem; margin-bottom: 0.3rem; background: var(--surface);
}
.parts li.selected { border-color: var(--brass-dark); box-shadow: inset 3px 0 0 var(--brass); }
.parts .part-name {
  flex: 1; min-width: 0; text-align: left; border: none; padding: 0.3rem 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.parts .icon {
  border: none; padding: 0.2rem 0.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1;
}
.parts .icon:hover:not(:disabled) { color: var(--ink); background: var(--paper-2); }
.test-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.test-row span { flex: 1; font-size: 0.9rem; }
.button.small { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
#part-panel .size-row { margin-top: 0.2rem; }

/* text tool */
textarea {
  font: inherit; width: 100%; padding: 0.4rem 0.5rem; resize: vertical;
  border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface);
}
/* font picker: each name drawn in its own font */
.font-picker { position: relative; }
.font-pick {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.5rem;
  padding: 0.3rem 0.5rem; background: var(--surface); color: var(--ink); font: inherit; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--radius-s); cursor: pointer;
}
.font-pick:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.font-pick img { height: 24px; max-width: 72%; object-fit: contain; object-position: left center; }
.font-pick-name { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.font-pick.no-preview .font-pick-name { font-size: 0.95rem; color: var(--ink); text-align: left; }
.font-pick .chevron { color: var(--muted); font-size: 0.8rem; }
.font-pop {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: 0 10px 28px var(--shadow); padding: 0.4rem;
}
.font-pop input[type=search] { width: 100%; margin-bottom: 0.3rem; font: inherit; padding: 0.3rem 0.45rem;
  border: 1px solid var(--rule); border-radius: var(--radius-s); }
.font-list { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.font-group { position: sticky; top: 0; z-index: 1; background: var(--raised); padding: 0.4rem 0.4rem 0.3rem;
  display: flex; align-items: baseline; gap: 0.45rem; border-top: 2px solid var(--complement); margin-top: 0.3rem; }
.font-group:first-child { margin-top: 0; }
.font-group .font-group-name { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--complement); white-space: nowrap; }
.font-group .font-group-note { flex: 1; min-width: 0; font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.font-group .font-group-count { font-size: 0.72rem; font-weight: 700; color: var(--complement); }
.font-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.3rem; padding: 0.25rem 0.4rem;
  border-radius: var(--radius-s); cursor: pointer; }
.font-row img { height: 24px; max-width: 74%; object-fit: contain; object-position: left center; }
.font-row .font-name { flex: 1; min-width: 0; font-size: 0.72rem; color: var(--muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-row.no-preview .font-name { font-size: 0.9rem; color: var(--ink); text-align: left; }
.font-row.active { background: var(--paper-2); }
.font-row[aria-selected="true"] { box-shadow: inset 3px 0 var(--brass); }
.font-empty { padding: 0.6rem 0.4rem; color: var(--muted); font-size: 0.9rem; }
.font-notice { padding: 0.5rem 0.4rem 0.3rem; margin-top: 0.3rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
#text-panel .size-row { margin-top: 0.6rem; }
#text-panel .density-pair { display: flex; align-items: center; gap: 0.5rem; }
#text-panel .density-pair input[type="range"] { flex: 1; min-width: 0; }
#text-panel .density-pair input[type="number"] { width: 4.6rem; }
.color-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.9rem; font-size: 0.9rem; }
.color-row > span:first-child { color: var(--muted); }
#text-panel { border-bottom: 1px solid var(--rule); margin-bottom: 0.9rem; padding-bottom: 0.3rem; }

/* collapsible panel sections (Size & position, Fill, Satin) */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; font-size: 0.75rem; color: var(--muted); transition: transform 0.15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2, details.fold > summary h3 { margin: 0; }
details.fold[open] > summary { margin-bottom: 0.6rem; }
h3.sub { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.9rem 0 0.4rem; }

/* one shape's own stitch settings */
.shapes .stitchset { grid-column: 2; margin-top: 0.3rem; font-size: 0.8rem; }
.shapes .stitchset > summary { cursor: pointer; color: var(--muted); }
.shapes .stitchset[open] > summary { margin-bottom: 0.3rem; }
.shapes .stitchset .grid { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; }
.shapes .stitchset label { display: inline-flex; align-items: center; gap: 0.3rem; }
.shapes .stitchset input[type=checkbox] { width: auto; }
.shapes .stitchset .own { color: var(--own); }
.shapes .fixed-note { grid-column: 2; font-size: 0.8rem; color: var(--own-strong); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.shapes details.stitchset { margin-bottom: 0; }

/* drawing tools */
.toolbar { position: absolute; left: 12px; top: 64px; display: flex; flex-direction: column; gap: 4px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px; z-index: 3; }
.toolbar button, .shape-flyout button { width: 34px; height: 34px; padding: 5px; border: 1px solid transparent; display: grid; place-items: center; }
.toolbar button svg, .shape-flyout button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.shape-flyout button[aria-pressed=true] { background: var(--primary-bg); color: var(--primary-fg); }
/* the Shapes button's flyout (drawtools.js places it beside the button) and the mark that says it has one */
.shape-flyout { position: absolute; z-index: 4; display: flex; gap: 4px; padding: 4px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-s); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.shape-flyout[hidden] { display: none; }
#tool-shapes { position: relative; }
#tool-shapes .tool-more { position: absolute; right: 2px; bottom: 2px; width: 0; height: 0;
  border-left: 5px solid transparent; border-bottom: 5px solid currentColor; opacity: 0.7; }
.toolbar button[data-tool=select] svg { fill: currentColor; stroke: none; }
.toolbar button[aria-pressed=true] { background: var(--primary-bg); color: var(--primary-fg); }
.tool-opts { position: absolute; left: 60px; top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 0.4rem 0.6rem;
  font-size: 0.85rem; z-index: 3; max-width: calc(100% - 340px); }   /* clear of the view buttons */
.tool-opts .seg { display: inline-flex; }
.tool-opts .seg button { padding: 0.2rem 0.55rem; font-size: 0.8rem; border-radius: 0; margin-left: -1px; }
.tool-opts .seg button:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.tool-opts .seg button:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.tool-opts .seg button[aria-pressed=true] { background: var(--primary-bg); color: var(--primary-fg); }
.tool-opts label, .tool-opts .tool-color { display: inline-flex; align-items: center; gap: 0.3rem; }
.tool-opts input { width: 3.6rem; padding: 0.15rem 0.3rem; }
.tool-opts input[type=checkbox] { width: auto; padding: 0; margin: 0; }
.tool-opts .tool-hint { color: var(--muted); }
#canvas.drawing { cursor: crosshair; }
#canvas.dropper { cursor: cell; }
#canvas.knife { cursor: crosshair; }
/* Align & distribute (shapetools.js): on the hoop, right, below the view buttons */
.align-panel { width: 15rem; }
/* the Align flyout beside its toolbar button (shapetools.js places it) */
.align-flyout { position: absolute; z-index: 4; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-s); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); display: grid; gap: 0.5rem; padding: 0.55rem 0.65rem 0.65rem; }
.align-flyout[hidden] { display: none; }
.align-flyout .real-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.align-flyout .real-body { display: grid; gap: 0.45rem; }
.align-panel.align-flyout { width: 17.5rem; }
.align-flyout .real-row { grid-template-columns: 5.4rem 1fr; }
.align-flyout .align-center { display: flex; align-items: center; gap: 0.5rem; }
.align-flyout .align-center .align-btn { width: auto; padding: 0 0.6rem 0 0.4rem; gap: 0.35rem; }
/* My threads (threadlib.js) */
dialog.mythreads { width: min(60rem, 96vw); padding: 0.8rem 1.2rem 1rem; }
.myt-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.myt-cols .row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.myt-cols select { max-width: 16rem; }
.myt-list { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 26rem; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius-s); }
.myt-list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.myt-list li label { display: flex; align-items: center; gap: 0.4rem; width: 100%; cursor: pointer; }
.myt-list .swatch { width: 1rem; height: 1rem; flex: none; }
.myt-list .myt-brand { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.myt-list.mine li button { margin-left: 0.3rem; }
.myt-own { margin-top: 0.5rem; }
.myt-own input[type=text] { width: 6.5rem; }
.myt-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.myt-foot .spacer { flex: 1; }

/* Trace into shapes (trace.js) */
.real-panel.tracer-panel { width: 21rem; }   /* Step by step…, Preview and Create shapes on one row (2026-11-02; as .tracer-panel alone the later .real-panel width won: it was 15.5rem) */
.tracer-panel .real-row input[type=number] { width: 4.2rem; }
.tracer-note { color: var(--muted); font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tracer-preview { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-s); image-rendering: auto; }
.tracer-colors { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.78rem; }
.tracer-colors > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.tracer-colors .swatch { width: 0.8rem; height: 0.8rem; }
.align-panel .real-head { cursor: default; }
.align-row { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.align-btn { width: 2.1rem; height: 2.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.align-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.align-btn svg rect { fill: var(--paper-2); }
.align-note { color: var(--muted); font-size: 0.8rem; }
/* the selected design's center, rotation and flips (moved here from the design panel, 2026-10-20) */
.align-place { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--rule); display: grid; gap: 0.35rem; }
.align-place[hidden] { display: none; }
.align-place .size-row { display: flex; gap: 0.5rem; margin: 0; }
.align-place .field { margin: 0; }
.align-place input[type=number] { width: 5rem; }
.align-place .row { margin: 0; gap: 0.3rem; }
/* the text tool's flyout: the selected text's options (the side panel's, moved here while it is open) */
.text-flyout { width: 300px; max-height: calc(100vh - 7rem); overflow: auto; }
.text-flyout #text-panel { display: grid; gap: 0.35rem; }
.text-flyout #text-panel[hidden] { display: none; }
.align-note.warn { color: var(--warn); }
/* Settings: Prepare a USB stick or SD card (Janome) */
.prep-only { color: var(--warn); font-weight: 600; }
.prep-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0 0.6rem; }
.prep-list label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.88rem; }
.prep-list label.off { color: var(--muted); }
.prep-list small { color: var(--muted); }
button.prep-go:not(:disabled) { border-color: var(--warn); color: var(--warn); }
#prep-status.busy { color: var(--warn); font-weight: 600; }
/* Board Wi-Fi (boardwifi.js) */
.bw-ways { display: grid; gap: 0.3rem; margin: 0.6rem 0; }
.bw-ways label { display: grid; grid-template-columns: auto 1fr; column-gap: 0.45rem; align-items: baseline;
  padding: 0.4rem 0.55rem; border: 1px solid var(--rule); border-radius: var(--radius-m); cursor: pointer; }
.bw-ways label:has(input:checked) { border-color: var(--accent-text); }
.bw-ways label.off { color: var(--muted); }
.bw-ways small { grid-column: 2; color: var(--muted); font-size: 0.8rem; }
.bw-status { margin: 0.4rem 0 0.6rem; }
.bw-status.warn, #bw-net-note.warn { color: var(--warn); }
.bw-status.busy { font-weight: 600; }
.bw-form[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.bw-net-row { display: flex; align-items: end; gap: 0.5rem; }
.bw-net-row .field { flex: 1; }
.bw-net-row button { margin-bottom: 0.65rem; }
#bw-net-note { margin: -0.3rem 0 0.6rem; font-size: 0.82rem; }
#bw-net-note:empty { display: none; }
.bw-advanced { margin: 0.4rem 0 0.6rem; }
.bw-advanced summary { cursor: pointer; font-weight: 600; margin-bottom: 0.4rem; }
.bw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.5rem; }
@media (max-width: 30rem) { .bw-grid { grid-template-columns: 1fr; } }
.bw-actions { flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.bw-screen .row { gap: 1.2rem; }
.bw-screen .check { margin: 0; }
/* Offset (Ctrl+J): distance, corners, one outline or one each, sew as */
.real-panel.offset-panel { width: 17.5rem; overflow: auto; }
.offset-panel .real-row input[type=number] { width: 4.2rem; }
.offset-panel .off-dist { display: inline-flex; align-items: center; gap: 0.35rem; }
.offset-panel .off-check { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.offset-panel .off-thread { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.offset-panel .off-thread-name { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hoopings (hooping.js): the hooping list, each number in its hoop position's colour (set by the script) */
.real-panel.hooping-panel { width: 20rem; }
.hooping-panel .off-check { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.hooping-panel .hoop-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin: 0.35rem 0; }
.hooping-panel .hoop-tools.one { grid-template-columns: 1fr; }
.hooping-panel .hoop-tools button { white-space: nowrap; }
.hooping-panel .hooping-list { list-style: none; margin: 0.2rem 0; padding: 0; font-size: 0.82rem; }
.hooping-panel .hooping-list li { display: flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0.3rem; border-radius: 4px; cursor: pointer; }
.hooping-panel .hooping-list li:hover, .hooping-panel .hooping-list li.on { background: var(--drop-hover); }
.hooping-panel .hoop-num { min-width: 1.3rem; text-align: center; border-radius: 4px; font-weight: 700; font-size: 0.75rem; padding: 0.05rem 0.2rem; }
/* the color picker's sample, beside its hint */
.tool-opts .drop-swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--rule); flex: none; }
.tool-opts .outline-opt { gap: 0.3rem; }
/* Sew as -> Satin line: width and density */
.satin-pop { padding: 0.35rem 0.6rem 0.55rem; display: grid; gap: 0.4rem; min-width: 14rem; }
.satin-pop label { display: grid; grid-template-columns: 4.2rem 4.8rem auto; align-items: center; gap: 0.4rem; font-size: 0.85rem; padding: 0 0.2rem; }
.satin-pop input { width: 4.5rem; }
.satin-pop select { width: 100%; }
.satin-pop label span { display: inline-flex; align-items: center; gap: 0.2rem; }
.satin-pop label span input { width: 3.4rem; }
.satin-pop-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.satin-pop .satin-pop-actions button { width: auto; display: inline-flex; justify-content: center; padding: 0.25rem 0.7rem; }
.satin-pop .satin-pop-actions button.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); }
.satin-pop .satin-pop-actions button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.shapes .drawn-note { grid-column: 2; font-size: 0.8rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.3rem; }

/* stitch check */
.check-list { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.85rem; }
.check-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.3rem; padding: 0.45rem 0.3rem; border-top: 1px solid var(--rule); }
.check-list li.warn .icon { color: var(--warn); }
.check-list li.info .icon { color: var(--info); }
.check-list li.focus { background: var(--own-bg); }
.check-list li.ok { display: block; color: var(--ok); }
.check-list .check-shape { font-weight: 700; margin-right: 0.3rem; }
.check-list .msg { color: var(--ink); }
.check-list .check-show { margin-left: 0.3rem; padding: 0.05rem 0.45rem; font-size: 0.78rem; }
button.link { border: none; padding: 0; background: none; text-decoration: underline; cursor: pointer; }

/* layers list */
.sew-order { margin-bottom: 0.4rem; }
.shapes li.layer { display: block; padding: 0.35rem 0; }
.shapes li.layer.nested { padding-left: 0.9rem; }
.shapes .layer-head { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.shapes .layer-head .name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.shapes .layer-head .name small { font-weight: 400; color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.shapes .swatch-btn.thumb { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius-s);
  background: var(--fabric); color: rgba(var(--fabric-ink), 0.45); display: grid; place-items: center; flex: none; }
.shapes .swatch-btn.thumb svg { width: 100%; height: 100%; }
.shapes .sew-no { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted); min-width: 1.6rem; text-align: right; }
.shapes .eye, .shapes .expand { border: none; padding: 0.15rem; width: 26px; height: 26px; display: grid; place-items: center; }
.shapes .eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.shapes .eye[aria-pressed=false] { color: var(--muted); }
.shapes .eye.mixed { color: var(--muted); opacity: 0.6; }   /* a color run with some of its rows hidden */
/* a picked row (several picked): what changes one shape at a time grayed out (layers.js dimForPicks) */
.shapes li.picked-many [data-pick-dim] { opacity: 0.4; cursor: not-allowed; }
.shapes li.picked-many label:has(> [data-pick-dim]) { color: var(--muted); }
.shapes .pick-note { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
.shapes li.hidden-layer .thumb, .shapes li.hidden-layer .name { opacity: 0.45; }
.shapes .layer-body { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.35rem 0 0.2rem 3.4rem; }
.shapes li.layer:not(.open) .layer-body > :not(.fixed-note:not(.edits), .fixed-note.warn) { display: none; }   /* fixed by hand, or edits that no longer fit: always say so */
.shapes li.layer:not(.open) .layer-body:not(:has(.fixed-note:not(.edits), .fixed-note.warn)) { display: none; }
.shapes .fixed-note.warn { color: var(--warn); }
.shapes .layer-body > * { grid-column: 1 !important; }
.shapes .grip { cursor: grab; color: var(--muted); font-size: 1rem; user-select: none; padding: 0 0.1rem; }
.shapes li.dragging { opacity: 0.4; }
.shapes li.drop-before { box-shadow: inset 0 2px 0 var(--own); }
.shapes li.drop-after { box-shadow: inset 0 -2px 0 var(--own); }
.shapes li.group.run { padding-left: 0; }

.color-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.color-dots .swatch-btn { padding: 0; border: none; background: none; }
.color-dots .swatch { width: 20px; height: 20px; }
.shapes li.run .group-toggle .chevron { display: none; }   /* the arrow sits on the right, like the layers */
.shapes li.run .eye, .shapes li.run .expand { flex: none; }

/* fill patterns (patterns.js) */
.pattern-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.5rem 0.15rem 0.2rem;
  border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); cursor: pointer;
  font: inherit; color: var(--ink); max-width: 100%; }
.pattern-btn:hover, .pattern-btn:focus-visible { border-color: var(--muted); }
.pattern-btn.own span { color: var(--own); }
.pattern-thumb { width: 28px; height: 28px; border-radius: 3px; display: block; flex: none; }
.pattern-field { display: inline-flex; align-items: center; gap: 0.3rem; }
.pattern-field.own { color: var(--own); }
/* the satin underlay's pass list (underlays.js passEditor) */
.passes { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.pass-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.pass-row label { display: inline-flex; align-items: center; gap: 0.2rem; }
.pass-row input[type=number] { width: 3.6em; }
.pass-row select { width: auto; }
.pass-actions { display: flex; gap: 0.4rem; }
.passes-field { flex-direction: column; align-items: stretch; }
.pattern-pop { position: fixed; z-index: 60; width: 332px; max-width: calc(100vw - 16px); padding: 0.6rem;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 28px var(--shadow); }
.pattern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.pattern-tile { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.3rem 0.15rem;
  border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; font: inherit;
  font-size: 0.72rem; color: var(--ink); text-align: center; line-height: 1.15; }
.pattern-tile .pattern-thumb { width: 56px; height: 56px; }
.pattern-tile:hover, .pattern-tile:focus-visible { border-color: var(--rule); background: var(--paper-2); }
.pattern-tile.current { border-color: var(--brass); background: var(--paper-2); }
.pattern-custom { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.pattern-custom input { width: 8.5rem; }
.pattern-custom .hint { flex-basis: 100%; margin: 0; font-size: 0.72rem; }
.font-info { margin-top: 0.3rem; }
.font-info .hint { margin: 0.2rem 0 0.3rem; }

/* font and alphabet previews are dark ink: lightened on dark panels */
.font-pick img, .font-row img { filter: var(--preview-filter); }

/* settings: a sub-group inside a section */
.settings-body .sub-group { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--rule); }
.theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* underlay picker (underlays.js): description of the tile under the pointer, colour key */
.pattern-pop .pop-desc { margin: 0.55rem 0 0; min-height: 4.2em; font-size: 0.78rem; line-height: 1.35; }
.pattern-pop .pop-key { margin: 0.35rem 0 0; font-size: 0.72rem; }
.ul-key, .top-key { display: inline-block; width: 1.3rem; height: 0; vertical-align: middle; }
.ul-key { border-top: 2px solid #e0218a; }
.top-key { border-top: 1px solid #8a93a6; }
.underlay-pop .pattern-tile .pattern-thumb { width: 68px; height: 68px; }
/* realistic view: options panel (realistic.js) */
.real-panel { position: absolute; top: 5.9rem; right: 0.8rem; width: 15.5rem; z-index: 3;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-m); font-size: 0.85rem; }
.real-head { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none;
  padding: 0.4rem 0.7rem; font-weight: 700; font-size: 0.85rem; }
.real-head:hover { background: var(--paper-2); }
.real-panel.closed .real-body { display: none; }
.real-body { display: grid; gap: 0.4rem; padding: 0.2rem 0.7rem 0.7rem; }
.real-row { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 0.4rem; }
.real-row[hidden] { display: none; }
.real-label { color: var(--muted); }
.real-row select { width: 100%; padding: 0.2rem 0.3rem; border: 1px solid var(--rule); border-radius: var(--radius-s);
  background: var(--surface); font-size: 0.85rem; }
.light-dial { width: 56px; height: 56px; cursor: grab; touch-action: none; border-radius: 50%; }
.light-dial:active { cursor: grabbing; }
.light-dial svg { width: 100%; height: 100%; overflow: visible; }
.dial-ring { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; }
.dial-design { fill: var(--muted); opacity: 0.45; }
.dial-sun circle { fill: #f5b82e; stroke: #b7790d; stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(245, 184, 46, 0.8)); }
.light-name { grid-column: 2; color: var(--muted); font-size: 0.78rem; margin-top: -0.2rem; }
.real-row:has(.light-dial) { grid-template-columns: 4.6rem 56px 1fr; }
.real-row:has(.light-dial) .light-name { grid-column: 3; margin: 0; }
.real-bright-wrap { display: flex; align-items: center; gap: 0.35rem; }
.real-bright-wrap input[type=range] { flex: 1; width: 0; min-width: 4rem; margin: 0; accent-color: var(--brass-dark); }
.real-bright-val { flex: none; width: 1.9rem; text-align: right; color: var(--muted); font-size: 0.78rem; }
.real-bright-val.real-width-val { width: 3.4rem; }
.real-colors summary { cursor: pointer; color: var(--muted); }
.real-colors ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.real-colors li { display: grid; grid-template-columns: auto 1fr 6.5rem; align-items: center; gap: 0.35rem; }
.real-colors .swatch { margin: 0; }
.real-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-colors select { font-size: 0.78rem; padding: 0.1rem; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); }
.garment-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.gswatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--swatch-line); cursor: pointer; }
.gswatch.current { outline: 2px solid var(--brass); outline-offset: 1px; }
.gswatch.custom { position: relative; overflow: hidden;
  background: conic-gradient(#e33, #ec3, #3c5, #3ae, #93e, #e33); }
.gswatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.real-body .save-picture { justify-self: start; }
/* PatchLab (patch.js) */
.patch-with { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.25rem; font-size: 0.9rem; }
.patch-with li { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
#patch-attach { width: 100%; padding: 0.3rem 0.4rem; border: 1px solid var(--rule); border-radius: var(--radius-s);
  background: var(--surface); }
.fabric-pick { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--rule); background: none; }
#patch-panel .size-row + .field, #patch-panel h3.sub { margin-top: 0.6rem; }
.shapes li.generated :is(.size-field, .rot-field, .flip-btn, .xf-btn, .xf-reset, .grow-field, .node-btn) { display: none; }
/* groups on the hoop */
.group-bar { position: absolute; top: 0.8rem; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.8rem; font-size: 0.85rem;
  background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--brass); border-radius: var(--radius-m); }
.group-bar[hidden] { display: none; }
/* artwork placed, not stitched yet: Auto trace / Trace by hand */
.trace-choice { position: absolute; top: 3.7rem; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.8rem; font-size: 0.85rem;
  background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--complement); border-radius: var(--radius-m); }
.trace-choice[hidden] { display: none; }
.trace-choice button, .trace-choice label { white-space: nowrap; flex: none; }
.trace-choice > span { min-width: 10rem; }
.trace-choice label.check { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.trace-choice label[hidden] { display: none; }
.palette-sample { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.1rem 0; font-size: 0.8rem; min-height: 2.6rem; }
.palette-sample canvas { width: 140px; height: 40px; flex: none; border-radius: var(--radius-m); border: 1px solid var(--rule); }
.palette-sample span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.font-notice { max-width: 34rem; }
.font-notice ul { margin: 0 0 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.6rem; line-height: 1.5; font-size: 0.98rem; }
.font-notice label.check { font-size: 0.98rem; font-weight: 600; display: flex; align-items: center; gap: 0.45rem; }
.font-notice .row { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }
.error-report { display: grid; gap: 0.4rem; margin: 0.4rem 0 0.6rem; }
.error-report textarea { width: 100%; font: inherit; }
.error-report label.check { display: flex; align-items: center; gap: 0.4rem; }
.trace-choice > .trace-summary { color: var(--muted); font-size: 0.8rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trace-choice .trace-summary[hidden], .trace-choice button[hidden] { display: none; }
/* the import check (importcheck.js, roadmap 36) */
.real-panel.import-panel { width: 18.5rem; max-height: calc(100% - 7rem); overflow-y: auto; }
.import-panel .imp-title { font-weight: 700; display: flex; justify-content: space-between; margin-top: 0.2rem; }
.import-panel .imp-count { font-weight: 400; color: var(--muted); }
.import-panel .imp-swatches { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.import-panel .imp-swatch { width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--sw); position: relative; cursor: pointer; }
.import-panel .imp-swatch.merged { opacity: 0.45; }
.import-panel .imp-swatch.pinned { outline: 2px solid var(--brass-dark); outline-offset: 1px; }
.import-panel .imp-swatch.pinned::after { content: ""; position: absolute; right: -3px; top: -3px; width: 0.45rem; height: 0.45rem;
  border-radius: 50%; background: var(--brass-dark); border: 1px solid var(--paper); }
.import-panel .imp-modes { display: grid; gap: 0.2rem; }
.import-panel .imp-modes label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.import-panel .imp-n { width: 3.4rem; }
.import-panel .imp-range { width: 100%; }
.import-panel .imp-groups { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.import-panel .imp-group { display: inline-flex; padding: 0.15rem 0.25rem; gap: 1px; border: 1px solid var(--rule); border-radius: var(--radius-m);
  background: var(--paper-2); cursor: pointer; }
.import-panel .imp-group span { width: 0.8rem; height: 1rem; border-radius: 2px; }
.import-panel .off-check { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.import-panel .imp-buttons { display: flex; gap: 0.4rem; justify-content: flex-start; }
.group-chip { display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.7rem;
  font-weight: 700; line-height: 1.4; color: var(--accent-text); border: 1px solid currentColor; vertical-align: 0.05em; }
/* right-click menu on the hoop (contextmenu.js) */
.ctx-menu { position: fixed; z-index: 70; min-width: 14rem; padding: 0.3rem; font-size: 0.88rem;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-m); box-shadow: 0 10px 28px var(--shadow); }
.ctx-menu button { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%;
  border: none; border-radius: var(--radius-s); padding: 0.3rem 0.6rem; text-align: left; background: none; }
.ctx-menu button:hover:not(:disabled), .ctx-menu button:focus-visible { background: var(--paper-2); outline: none; }
.ctx-menu button:disabled { opacity: 0.4; }
.ctx-menu kbd { font: inherit; font-size: 0.75rem; color: var(--muted); }
.ctx-heading { padding: 0.25rem 0.6rem 0.15rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.ctx-sep { border: none; border-top: 1px solid var(--rule); margin: 0.25rem 0.2rem; }
/* never taller than the window (it scrolls); submenus open beside their item */
.ctx-menu { max-height: calc(100vh - 12px); overflow-y: auto; }
.ctx-menu .ctx-arrow { color: var(--muted); font-size: 0.8rem; }
.ctx-menu button.ctx-has-sub[aria-expanded=true] { background: var(--paper-2); }
.ctx-sub { z-index: 71; }
#group-info:empty { display: none; }
#group-info { white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
/* beside the toolbar, never under the zoom buttons: a narrow hoop area wraps it onto a second row */
.group-bar { left: 4.6rem; transform: none; max-width: calc(100% - 14rem); flex-wrap: wrap; }
.group-bar .group-size { display: inline-flex; align-items: center; gap: 0.3rem; padding-left: 0.4rem;
  margin-left: 0.2rem; border-left: 1px solid var(--rule); }
.group-bar .group-size[hidden] { display: none; }
.group-bar .group-size label[hidden] { display: none; }   /* a shape's recipe: only its own numbers */
/* node mode's clean-up row (2026-10-22) */
.node-tidy { align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.node-tidy .tidy-label { font-weight: 600; }
.node-tidy label { display: inline-flex; align-items: center; gap: 0.3rem; }
.node-tidy input { width: 3.6rem; }
.node-tidy .tidy-count { color: var(--muted); font-size: 0.85em; }
.node-tidy button[aria-pressed="true"] { background: var(--brass-dark); color: #fff; border-color: var(--brass-dark); }
.group-bar .group-size label { display: inline-flex; align-items: center; gap: 0.25rem; }
.group-bar .group-size input { width: 4.2rem; }
.group-bar .group-size .unit { color: var(--muted); }
/* the W x H ratio lock: a joined chain link locked, a broken one unlocked */
.size-lock { display: inline-grid; place-items: center; padding: 0.15rem 0.25rem; }
.size-lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.size-lock[aria-pressed="true"] .lock-off, .size-lock[aria-pressed="false"] .lock-on { display: none; }
.size-lock[aria-pressed="false"] { color: var(--muted); }
.size-row-lock { grid-template-columns: 1fr auto 1fr; align-items: end; }
.size-row-lock .size-lock { margin-bottom: 0.35rem; }
.group-bar .group-clip { display: inline-flex; gap: 0.25rem; padding-left: 0.4rem; margin-left: 0.2rem; border-left: 1px solid var(--rule); }
.node-bar .row button { white-space: nowrap; }

/* StitchLab Modules (left panel): PatchLab now, more labs later */
#modules .module { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0;
  border-top: 1px solid var(--rule); }
#modules .module:first-of-type { border-top: none; }
#modules .module-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#modules .module-text span { font-size: 0.8rem; color: var(--muted); }
#modules .module.soon strong { color: var(--muted); }
/* Sew right after... waiting for the row to follow (layers.js): the rows offer themselves */
body.sew-after-mode #shapes li.layer { cursor: copy; }
body.sew-after-mode #shapes li.layer:hover { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* a Lab's picture (Mike's art, 480 x 160 shown at 240 x 80): a click opens the Lab */
#modules .module-art { display: block; width: 100%; max-width: 240px; height: auto; margin: 0.1rem 0 0.45rem;
  border: 1px solid var(--rule); border-radius: var(--radius-s); cursor: pointer; }
/* each Lab folds away (details.fold, its state remembered in this browser); its title row keeps a short state */
#modules details.module { display: block; margin: 0; }
#modules details.module > summary { gap: 0.4rem; padding: 0.1rem 0; margin-bottom: 0; }
#modules details.module[open] > summary { margin-bottom: 0.35rem; }
#modules .lab-state { margin-left: auto; min-width: 0; font-size: 0.78rem; color: var(--muted); font-weight: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* New project default settings (Settings): the Fill / Satin / Merrow border folds */
#stitch-defaults details.fold, .test details.fold details.fold { margin: 0.4rem 0; }
#stitch-defaults details.fold > summary h4, .test details.fold > summary h4 { margin: 0; font-size: 0.9rem; }
.test .hoop-tag { color: var(--muted); font-size: 0.75rem; margin-left: 0.25rem; }

/* the gradient flyout (gradient.js): on the hoop, left, below the edit bars */
.grad-panel { right: auto; left: 64px; top: 3.4rem; width: 17rem; max-height: calc(100% - 4.5rem); overflow-y: auto; }
.grad-panel .real-head { cursor: default; }
.grad-panel .real-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grad-panel .real-row { grid-template-columns: 4.2rem 1fr; }
.grad-bar-wrap { position: relative; padding-bottom: 14px; }
.grad-bar, .grad-value { display: block; width: 100%; border: 1px solid var(--rule); }
.grad-bar { height: 22px; border-radius: var(--radius-s) var(--radius-s) 0 0; cursor: copy; }
.grad-value { height: 8px; border-top: none; border-radius: 0 0 var(--radius-s) var(--radius-s); }
.grad-stops { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.grad-stop { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; padding: 0; cursor: ew-resize;
  border: 1.5px solid var(--ink); border-radius: 2px; background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--surface) 0 50%) 0 0 / 6px 6px; }
.grad-stop.current { outline: 2px solid var(--brass); outline-offset: 1px; }
/* a four-corner mesh's threads, as they sit on the shape (gradient.js) */
.grad-mesh { display: grid; grid-template-columns: repeat(2, 2.4rem); gap: 0.35rem; margin: 0.3rem 0 0.4rem 4.6rem; }
.grad-corner { width: 2.4rem; height: 1.6rem; padding: 0; cursor: pointer; border: 1.5px solid var(--ink); border-radius: 3px;
  background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--surface) 0 50%) 0 0 / 6px 6px; }
.grad-corner.current { outline: 2px solid var(--brass); outline-offset: 1px; }
.grad-stop-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.grad-stop-row input[type="number"] { width: 3.6rem; }
.grad-tname { color: var(--muted); font-size: 0.78rem; }
.grad-warn { font-size: 0.78rem; color: var(--warn); }
.grad-cost { font-size: 0.78rem; color: var(--muted); margin: -2px 0 4px; }
.grad-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.grad-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
  margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px solid var(--rule); }
.grad-steps { display: flex; gap: 0.25rem; }
.grad-foot button { white-space: nowrap; padding-left: 0.45rem; padding-right: 0.45rem; }

/* ThreadPaintLab module: the picture to trace */
#modules .module.threadpaint { display: block; }
.trace-panel { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; margin-top: 0.4rem;
  font-size: 0.85rem; }
.trace-panel .trace-name { display: flex; justify-content: space-between; width: 100%; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-panel input[type="number"] { width: 4.2rem; }
.trace-panel input[type="range"] { width: 6rem; vertical-align: middle; }
.trace-panel .row { width: 100%; }

/* PatchLab module: one card per patch, its sewing sequence */
#modules .module.patchlab { display: block; }
#modules .module-head { display: flex; align-items: center; gap: 0.6rem; }
.patch-card { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 0.45rem 0.55rem; margin: 0.5rem 0; }
.patch-card.current { border-color: var(--brass); }
.patch-card-name { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink);
  cursor: pointer; text-align: left; }
.patch-seq { margin: 0.35rem 0 0.45rem; padding-left: 1.3rem; }
.patch-seq li { margin: 0.2rem 0; font-size: 0.88rem; }
.patch-seq li > span, .patch-seq li > .link { font-weight: 600; }
.patch-seq li small { display: block; color: var(--muted); font-size: 0.78rem; }
.patch-edit-slot #patch-panel { border-top: 1px solid var(--rule); margin-top: 0.4rem; padding-top: 0.4rem; }

/* the patch's settings as its layers, top to bottom, each set apart */
#patch-panel .pl-sec { border-top: 2px solid var(--rule); padding: 0.55rem 0 0.35rem; scroll-margin-top: 0.5rem; }
#patch-panel .pl-sec:first-child { border-top: none; padding-top: 0.2rem; }
#patch-panel .pl-sec h3.sub { margin-top: 0; }
#patch-panel .pl-sec h3.sub small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 0.3rem; }
#patch-panel .pl-sec.flash { animation: pl-flash 1.2s ease-out; }
@keyframes pl-flash { from { background: var(--own-bg); } to { background: transparent; } }
.patch-seq li[data-jump] { cursor: pointer; }
.patch-seq li[data-jump]:hover .link { text-decoration: underline; }
.patch-designs { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; }
.patch-designs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; margin: 0.2rem 0; font-size: 0.9rem; }
.patch-designs li small { flex: 1; color: var(--muted); }
.patch-designs li.current .link { color: var(--brass-darker); }
.patch-designs li.hint { display: block; color: var(--muted); font-size: 0.82rem; }
.patch-designs .icon { padding: 0 0.35rem; line-height: 1.2; }
#pl-design .row select { font-size: 0.85rem; max-width: 8rem; }
/* Array (arrays.js): a bar on the hoop */
.array-bar .array-what { font-weight: 400; color: var(--muted); }
.array-mode { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; }
.array-mode button { border: 0; border-radius: 0; background: var(--surface); padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.array-mode button + button { border-left: 1px solid var(--rule); }
.array-mode button[aria-pressed="true"] { background: var(--brass-dark); color: #fff; }
.array-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-size: 0.85rem; }
.array-fields[hidden] { display: none; }
.array-fields input[type="number"] { width: 4.2rem; }
.array-bar label.check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
#arr-pick[aria-pressed="true"] { background: var(--brass-dark); color: #fff; }
.array-note { font-size: 0.8rem; color: var(--muted); flex-basis: 100%; }
.array-note.warn { color: var(--warn); }
.array-bar .row { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* Logins (auth.js): the login screen in front of the app (hosted StitchLab only) and the account button */
.login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: var(--paper); overflow-y: auto; }
.login[hidden] { display: none; }
.login-card { width: min(24rem, 100%); padding: 1.6rem 1.6rem 1.2rem; border: 1px solid var(--rule);
  border-radius: var(--radius-m); background: var(--raised); box-shadow: 0 16px 48px var(--shadow); }
.login-brand { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--accent-text); }
.login-card h2 { margin: 0.3rem 0 1rem; font-size: 1.1rem; }
.login-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
  padding: 0.6rem; font-weight: 600; }
.login-google[hidden], .login-or[hidden], .login-links a[hidden], .login-invite[hidden],
  #login-form .field[hidden] { display: none; }
.login-or { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.6rem; color: var(--muted);
  font-size: 0.85rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.login-card input[type=email], .login-card input[type=password] { width: 100%; }
.login-submit { width: 100%; padding: 0.55rem; margin-top: 0.2rem; }
.login-msg { min-height: 1.2rem; margin: 0.7rem 0 0.3rem; font-size: 0.9rem; }
.login-msg:empty { display: none; }
.login-msg.bad { color: var(--warn); }
.login-msg.good { color: var(--ok); }
.login-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.6rem 0 0; font-size: 0.9rem; }
.login-invite { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.85rem; }
.login-legal { margin: 1rem 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
.login-card a { color: var(--accent-text); }
.account { position: relative; }
.account[hidden] { display: none; }
.account-btn { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; overflow: hidden; font-weight: 700; }
.account-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-menu { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 60; display: grid; gap: 0.25rem;
  min-width: 13rem; padding: 0.7rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--radius-m);
  background: var(--raised); box-shadow: 0 8px 24px var(--shadow); }
.account-menu[hidden] { display: none; }
.account-menu small { color: var(--muted); }
.account-menu button { justify-self: start; margin-top: 0.4rem; }
body:has(> .login:not([hidden])) { overflow: hidden; }   /* nothing scrolls behind the login screen */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 2.6rem; }
.pw-eye { position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); width: 2.1rem; height: 2.1rem;
  padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--muted); }
.pw-eye:hover, .pw-eye.on { color: var(--accent-text); background: none; }
.pw-eye.on svg { stroke-width: 2.6; }

/* ---- more room for the hoop (Mike, 2026-10-14: "maximize the design space ... mainly when you need to zoom in"):
   the active tool's options and the selection's actions in the header, one small line; the sew-out bar one slim row
   with the rest folded; the side panels fold away (app.js initPanelFolds) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.topbar { gap: 0.8rem; padding: 0.45rem 1rem; }
.brand { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; }      /* the machine's name gives way first */
.brand .machine { flex: none; }                        /* an icon now (2026-10-22): its name in the tip */
.hoop-field select { max-width: 11rem; }
/* Keep in hoop, beside the Hoop menu (2026-10-22): a small tick box */
.keep-hoop { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; cursor: pointer; color: var(--ink); }
.keep-hoop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.hoop-turn svg { transition: transform .25s ease; }
.hoop-turn.landscape svg { transform: rotate(90deg); }
.keep-hoop input { margin: 0; }
.top-actions { flex: none; gap: 0.35rem; }
.icon-btn { display: inline-grid; place-items: center; padding: 0.3rem 0.4rem; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.context-bar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; white-space: nowrap; }
.context-bar .tool-opts, .context-bar .group-bar {
  position: static; transform: none; max-width: none; flex: none; flex-wrap: nowrap; display: flex; align-items: center;
  gap: 0.45rem; padding: 0.15rem 0.45rem; font-size: 0.78rem; z-index: auto; box-shadow: none;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.context-bar .group-bar { border-left: 3px solid var(--brass); }
.context-bar input[type=number] { width: 3.4rem; padding: 0.1rem 0.25rem; font-size: 0.78rem; }
.context-bar .group-bar .group-size input { width: 3.5rem; }
.context-bar .group-bar .shape-props input { width: 3.1rem; }
.shape-props .sp-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.context-bar .seg button { padding: 0.12rem 0.3rem; display: inline-grid; place-items: center; }
.context-bar .seg button svg, .context-bar .group-bar .icon-btn svg { width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.context-bar .group-bar .icon-btn { padding: 0.12rem 0.25rem; }
.context-bar .group-bar #group-info { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.context-bar .help-q { flex: none; }
/* the tool's hint: a small caption at the foot of the hoop, above the sew-out bar */
.tool-hint { position: absolute; left: 4.4rem; bottom: 3.9rem; z-index: 3; pointer-events: none;
  max-width: calc(100% - 6rem); padding: 0.15rem 0.5rem; border-radius: var(--radius-s); font-size: 0.78rem;
  color: var(--ink); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.mat:has(> .player[hidden]) .tool-hint { bottom: 1rem; }
.toolbar { top: 0.8rem; left: 18px; }
/* the sew-out bar: one slim row; speed, colors, opacity, dim others and needle points behind its ▴ */
.player { flex-wrap: nowrap; gap: 0.6rem; padding: 0.3rem 0.6rem; }
.player .stitch-info { flex: none; width: 17rem; min-width: 0; min-height: 0; white-space: nowrap; overflow: hidden; }
.player #stitch-info-text { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.player .check.small { margin: 0; white-space: nowrap; }
.player-more-btn[aria-expanded=true] svg { transform: rotate(180deg); }
.player-more { position: absolute; right: 0; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 0.7rem;
  padding: 0.35rem 0.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.player-more .player-view { flex-wrap: nowrap; }
/* the side panels folded away: the hoop takes their room; the tabs on the hoop's edges bring them back */
.layout { transition: grid-template-columns 0.15s; }
.layout.fold-left { grid-template-columns: 0 1fr 320px; }
.layout.fold-right { grid-template-columns: 290px 1fr 0; }
.layout.fold-left.fold-right { grid-template-columns: 0 1fr 0; }
.layout.fold-left > .panel.left, .layout.fold-right > .panel.right { overflow: hidden; padding: 0; border: 0; visibility: hidden; }
.panel-fold { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 14px; height: 56px; padding: 0;
  display: grid; place-items: center; color: var(--muted); background: var(--paper); border: 1px solid var(--rule);
  opacity: 0.8; }
.panel-fold svg { width: 10px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.panel-fold.left { left: 0; border-left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.panel-fold.right { right: 0; border-right: 0; border-radius: var(--radius-s) 0 0 var(--radius-s); }
.panel-fold:hover { opacity: 1; color: var(--ink); }
.panel-fold[aria-expanded=false] svg { transform: scaleX(-1); }
/* the selection bar left the hoop: "placed, not stitched yet" takes its place, clear of the view buttons */
.trace-choice { top: 0.8rem; }
/* the toolbar moves (drawtools.js initToolbarDrag): its grip, flat along the top or bottom edge */
.tool-grip { width: 34px; height: 12px; cursor: grab; touch-action: none; border-radius: var(--radius-s);
  background-image: radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px); background-size: 6px 6px;
  background-position: center; opacity: 0.7; }
.tool-grip:hover { opacity: 1; background-color: var(--paper-2); }
.toolbar.dragging, .toolbar.dragging .tool-grip { cursor: grabbing; }
.toolbar.dragging { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
.toolbar.flat { flex-direction: row; }
.toolbar.flat .tool-grip { width: 12px; height: 34px; align-self: center; }
.mat.tb-moved .tool-hint { left: 1rem; }
.mat.tb-bottom .tool-hint { bottom: calc(3.9rem + var(--tb-h, 44px) + 6px); }
/* the zoom in the top bar, the view buttons up in the hoop's corner (2026-10-14) */
.topbar .zoom { position: static; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); }
.topbar .zoom button { padding: 0.25rem 0.45rem; min-width: 1.8rem; font-size: 0.85rem; }
.viewmode { top: 0.8rem; }
.real-panel { top: 3.4rem; }

/* ---------------------------------------------------------------- Home and the trace wizard (home.js, 2026-10-19)
   Bright in every theme (Mike, 2026-10-16: "once in the design space the themes rule"): these tokens are on :root only,
   never redefined for dark. Fonts: Bricolage Grotesque (headings) and Figtree (text), both SIL OFL, in static/fonts/. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); }
:root {
  --home-ground: linear-gradient(160deg, #efe8ff 0%, #e8f0ff 40%, #e4f8f6 75%, #fff8ec 100%);
  --home-ink: #1b1530;
  --home-muted: #5a5370;
  --home-card: #ffffff;
  --home-line: #e4dcf3;
  --home-chip: #f3eeff;
  --home-cream: #fff6e6;
  --home-accent: #8b5cf6;
  --home-accent-ink: #ffffff;
  --home-teal: #0e7490;
  --home-teal-soft: #ddf7f8;
  --home-teal-deep: #0e5566;
  --home-pink: #db2777;
  --home-pink-soft: #ffe3ee;
  --home-purple: #6d28d9;
  --home-purple-soft: #ede6ff;
  --home-gold: #ffc53d;
  --home-gold-ink: #1b1530;
  --home-gold-soft: #4a3a10;
  --home-blue: #1d4ed8;
  --home-blue-soft: #e2ebff;
  --home-shadow: rgba(20, 12, 50, 0.18);
  --home-focus: #ffc53d;
  --home-wiz-ground: rgba(18, 48, 58, 0.45);
  --home-wiz-soft: #eaf7f8;
  --home-wiz-line: #bfe3e7;
  --home-wiz-ink: #12303a;
  --home-wiz-muted: #42606a;
  --home-error: #a3122f;
  --home-on-color: #ffffff;     /* text on the colored tiles */
}
.brand-home { font: inherit; font-family: var(--brand-font); color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-s); }
.brand-home:hover { color: var(--accent-text); }
/* RedworkLab (redworklab.js) */
.rw-for { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0; overflow-wrap: anywhere; }
.rw-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem; margin: 0.3rem 0 0.5rem; font-size: 0.85rem; }
.rw-options label { display: flex; flex-direction: column; gap: 0.15rem; }
.rw-options input[type="number"] { width: 4.5rem; }
.rw-options input[type="color"] { width: 3rem; height: 1.7rem; padding: 0.1rem; }
#rw-current { margin-top: 0.5rem; }
.rw-summary { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.rw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.4rem; font-size: 0.85rem; }
.rw-connect { margin-top: 0.4rem; padding: 0.4rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; font-size: 0.85rem; }
.rw-connect input[type="number"] { width: 4.5rem; }
.rw-tips { margin-top: 0.5rem; font-size: 0.85rem; }
.rw-tips summary { cursor: pointer; color: var(--accent-text); }
.rw-tips ul { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.tracer-lineart { display: grid; gap: 0.35rem; border-left: 3px solid var(--accent-text); padding-left: 0.5rem; }
.tracer-lineart button { justify-self: start; }
.tracer-warn { color: var(--warn); }
/* the design page's logo: one of Home's sewn StitchLab patches, the same one always (Mike, 2026-10-30: "an embroidered
   type patch logo up there similar to the home page but static not changing"); as tall as the top bar's buttons */
.brand-patch { display: block; height: 2.15rem; width: auto; margin: -0.15rem 0; transition: transform 0.12s ease, filter 0.12s ease; }
.brand-home:hover .brand-patch { transform: translateY(-1px); filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25)); }
.brand-home:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.home { position: fixed; inset: 0; z-index: 900; overflow-y: auto; background: var(--home-ground); color: var(--home-ink);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; }
.home[hidden] { display: none; }
body.home-open { overflow: hidden; }
.home :focus-visible { outline: 3px solid var(--home-focus); outline-offset: 3px; }
.home-head { max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; }
.home-brand { display: flex; align-items: center; gap: 10px; font-family: "Bricolage Grotesque", "Figtree", sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.home-tools { display: flex; gap: 12px; align-items: center; }
.home-search { display: flex; align-items: center; gap: 8px; background: var(--home-card); border: 1px solid var(--home-line);
  border-radius: 999px; padding: 9px 16px; min-width: 220px; color: var(--home-muted); }
.home-search svg { width: 18px; height: 18px; flex: none; }
.home-search input { border: 0; outline: none; background: transparent; color: var(--home-ink); font: inherit; font-size: 15px; width: 100%; }
.home-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--home-line); background: var(--home-card);
  color: var(--home-ink); font: inherit; font-weight: 700; font-size: 17px; display: grid; place-items: center;
  text-decoration: none; cursor: pointer; }
.home-account { background: var(--home-accent); color: var(--home-accent-ink); border-color: var(--home-accent); }
.home-designs { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--home-line); background: var(--home-card);
  color: var(--home-ink); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.home-designs svg { width: 18px; height: 18px; flex: none; }
.home-designs:hover { border-color: var(--home-accent); }
.home-main { max-width: 1240px; margin: 0 auto; padding: 8px 24px 56px; display: flex; flex-direction: column; gap: 28px; }
.home-main h1 { margin: 0; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -1px; line-height: 1.1; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.home-tile { font: inherit; text-align: left; color: inherit; border: 1px solid transparent; border-radius: 28px; padding: 22px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.home-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--home-shadow); }
.home-tile strong { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 24px; line-height: 1.15; }
.home-tile > span { font-size: 15px; line-height: 1.4; }
.home-muted { color: var(--home-muted); }
.home-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 18px; padding: 14px 18px;
  background: var(--home-card); border: 1px solid var(--home-line); border-radius: 18px; color: var(--home-ink); }
.home-folder > span { flex: 1 1 320px; }
.home-folder .home-pill { margin-top: 0; align-self: center; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.home-folder-later { background: none; border: 0; color: var(--home-muted); cursor: pointer; font: inherit; text-decoration: underline; }
.home-pill { align-self: flex-start; margin-top: auto; background: var(--home-accent); color: var(--home-accent-ink);
  font-weight: 700; padding: 11px 20px; border-radius: 999px; }
.home-pill.light { background: var(--home-card); color: var(--home-teal-deep); }
.home-icon { margin-top: auto; }
.home-icon svg { width: 52px; height: 52px; display: block; }
.home-icon.wide svg { width: 70px; height: 42px; }
.home-continue { grid-column: span 2; grid-row: span 2; background: var(--home-card); border-color: var(--home-line);
  flex-direction: row; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.home-thumb { flex: 1 1 220px; min-width: 0; min-height: 220px; border-radius: 20px; background: var(--home-cream); display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.home-thumb img { width: 100%; height: 100%; object-fit: contain; }
.home-thumb svg { width: 86%; }
.home-continue-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.home-continue-text strong { font-size: 30px; overflow-wrap: anywhere; }
.home-kicker { font-size: 14px; font-weight: 700; color: var(--home-muted); text-transform: uppercase; letter-spacing: 1px; }
.home-continue-text .home-pill { margin-top: 6px; }
.home-picture { grid-row: span 2; background: var(--home-teal); color: var(--home-on-color); }
.home-picture > span:not(.home-pill) { color: var(--home-teal-soft); }
.home-picture .home-icon { margin-top: 0; }
.home-letters { background: var(--home-pink); color: var(--home-on-color); }
.home-letters > span { color: var(--home-pink-soft); }
.home-aa { margin-top: auto; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 34px !important; font-weight: 800;
  letter-spacing: -1px; color: var(--home-on-color) !important; }
.home-patch { background: var(--home-purple); color: var(--home-on-color); }
.home-patch > span { color: var(--home-purple-soft); }
.home-draw { background: var(--home-gold); color: var(--home-gold-ink); }
.home-draw > span { color: var(--home-gold-soft); }
.home-open { background: var(--home-card); border-color: var(--home-line); }
.home-chips { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.home-chips span { background: var(--home-chip); padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.home-big { background: var(--home-blue); color: var(--home-on-color); }
.home-big > span { color: var(--home-blue-soft); }
.home-letterlab { background: var(--home-card); border-color: var(--home-line); grid-column: 1 / -1; }   /* the last row, whole: even rows at any width */
.home-redwork { background: var(--home-card); border-color: var(--home-line); }
.home-letterlab .home-aa { color: var(--home-ink) !important; }
.home-recent { display: flex; flex-direction: column; gap: 14px; }
.home-recent h2 { margin: 0; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 26px; }
.home-recent-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.home-recent-item.is-open .home-tile { border-color: var(--home-ink); border-width: 2px; }
.home-recent-item .home-kicker { margin-bottom: -2px; }
@media (max-width: 1100px) { .home-recent-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.home-recent-item { position: relative; display: flex; }
.home-recent-item .home-tile { flex: 1; background: var(--home-card); border-color: var(--home-line); border-radius: 20px; padding: 12px; gap: 6px; }
.home-recent-item strong { font-size: 16px; font-family: "Figtree", sans-serif; overflow-wrap: anywhere; }
.home-recent-item .home-muted { font-size: 14px; }
.home-recent-thumb { height: 120px; border-radius: 14px; background: var(--home-cream); overflow: hidden; display: block; }
.home-recent-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.home-forget { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--home-line);
  background: var(--home-card); color: var(--home-ink); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity 0.15s ease; }
.home-recent-item:hover .home-forget, .home-forget:focus-visible { opacity: 1; }
.home-note { margin: 0; font-size: 14px; color: var(--home-muted); }
@media (max-width: 640px) {
  .home-continue { grid-column: auto; }
  .home-search { min-width: 0; flex: 1; }
  .home-tools { flex: 1; }
  .home-designs span { display: none; }
  .home-designs { width: 44px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .home-tile, .home-forget { transition: none; } .home-tile:hover { transform: none; } }

.trace-wizard { position: fixed; inset: 0; z-index: 950; background: var(--home-wiz-ground); display: grid; place-items: center;
  padding: 16px; font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--home-wiz-ink); }
.trace-wizard[hidden] { display: none; }
.trace-wizard :focus-visible { outline: 3px solid var(--home-focus); outline-offset: 2px; }
.tw-card { width: min(1040px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: var(--home-card);
  border-radius: 32px; box-shadow: 0 20px 60px var(--home-shadow); padding: 30px 36px; display: flex; flex-direction: column; gap: 20px; }
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tw-head h2 { margin: 0; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-weight: 800; font-size: 30px; }
.tw-back-home { font: inherit; font-weight: 700; border: 0; padding: 10px 16px; border-radius: 999px; background: var(--home-wiz-soft);
  color: var(--home-teal-deep); cursor: pointer; }
.tw-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.tw-steps li { flex: 1 1 120px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--home-wiz-soft); font-weight: 700; font-size: 15px; }
.tw-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: var(--home-wiz-line); color: var(--home-wiz-ink); }
.tw-steps li.done span { background: var(--home-teal); color: var(--home-on-color); }
.tw-steps li.now { background: var(--home-teal); color: var(--home-on-color); }
.tw-steps li.now span { background: var(--home-on-color); color: var(--home-teal); }
.tw-body { min-height: 360px; display: flex; }
.tw-two { flex: 1; display: flex; gap: 24px; flex-wrap: wrap; }
.tw-two > * { flex: 1 1 300px; min-width: 0; }
.tw-drop { border: 3px dashed var(--home-wiz-line); border-radius: 24px; background: var(--home-wiz-soft); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--home-teal); }
.tw-drop.over { border-color: var(--home-teal); }
.tw-drop svg { width: 60px; height: 60px; }
.tw-drop strong { font-size: 20px; color: var(--home-wiz-ink); }
.tw-drop span { color: var(--home-wiz-muted); }
.tw-side { display: flex; flex-direction: column; gap: 10px; }
.tw-label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.tw-sample { flex: 1; font: inherit; color: inherit; border: 3px solid var(--home-teal); border-radius: 22px; background: var(--home-cream);
  cursor: pointer; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tw-sample img { width: 100%; border-radius: 12px; display: block; }
.tw-choice { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 3px solid var(--home-wiz-line); background: var(--home-card);
  border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tw-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px var(--home-shadow); }
.tw-choice.on { border-color: var(--home-teal); background: var(--home-wiz-soft); }
.tw-choice:disabled { opacity: 0.6; cursor: not-allowed; }
.tw-choice svg { width: 50px; height: 50px; color: var(--home-teal); }
.tw-choice strong, .tw-big { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 26px; }
.tw-choice span, .tw-hint { color: var(--home-wiz-muted); line-height: 1.45; }
.tw-hint { font-size: 14px; font-weight: 400; }
.tw-form { display: flex; flex-direction: column; gap: 16px; }
.tw-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.tw-form input[type="number"], .tw-form select { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--home-wiz-line);
  border-radius: 12px; background: var(--home-card); color: var(--home-wiz-ink); }
.tw-form input[type="number"] { width: 100px; }
.tw-form input[type="range"] { width: 100%; accent-color: var(--home-teal); }
.tw-check { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tw-check input { width: 22px; height: 22px; accent-color: var(--home-teal); }
.tw-preview { flex: 1; min-height: 260px; border-radius: 22px; background: var(--home-cream); display: flex; align-items: center;
  justify-content: center; padding: 14px; }
.tw-preview img { max-width: 100%; max-height: 340px; display: block; }
.tw-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-swatches span { display: flex; align-items: center; gap: 6px; font-size: 14px; background: var(--home-wiz-soft); padding: 4px 10px 4px 4px;
  border-radius: 999px; }
.tw-swatches i { width: 20px; height: 20px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--home-wiz-line); }
.tw-pin { font: inherit; font-size: 14px; color: inherit; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border: 2px dashed var(--home-wiz-line); background: var(--home-card); cursor: pointer; }
.tw-pin:hover { border-color: var(--home-teal); }
.tw-pin.on { border: 2px solid var(--home-teal); background: var(--home-wiz-soft); }
/* the trace wizard's Colors table, Ready's numbers and its Fewer trims slider (2026-11-02) */
.tw-sub { font-weight: 400; font-size: 15px; }
.tw-table-wrap { max-height: 46vh; overflow-y: auto; border: 2px solid var(--home-wiz-line); border-radius: 12px; }
.tw-colors { width: 100%; border-collapse: collapse; font-size: 15px; }
.tw-colors th { position: sticky; top: 0; background: var(--home-wiz-soft); text-align: left; font-size: 13px; padding: 8px 10px; }
.tw-colors td { padding: 6px 10px; border-top: 1px solid var(--home-wiz-line); vertical-align: middle; }
.tw-colors .num { text-align: right; white-space: nowrap; }
.tw-colors small { display: block; font-size: 12px; opacity: 0.75; }
.tw-colors tr.merged td:not(:last-child) { opacity: 0.45; }
.tw-colors select { font: inherit; font-size: 14px; padding: 4px 6px; border: 2px solid var(--home-wiz-line); border-radius: 8px;
  background: var(--home-card); color: inherit; max-width: 200px; }
.tw-colors .swatch-btn .swatch { width: 26px; height: 26px; }
.tw-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; padding: 10px 12px; border-radius: 12px;
  background: var(--home-wiz-soft); }
.tw-stats b { font-size: 18px; }
.tw-ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 400; opacity: 0.8; }
.tw-ready { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.tw-ready span { max-width: 52ch; }
.tw-spin { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--home-wiz-line); border-top-color: var(--home-teal);
  animation: tw-spin 0.9s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-spin { animation: none; } .tw-choice { transition: none; } }
.tw-error { margin: 0; color: var(--home-error); font-weight: 600; }
/* the wizard: a line-art picture offered to RedworkLab; a very big trace's warning (redworklab.js) */
.tw-col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; width: 100%; }
.tw-lineart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px;
  border-radius: 14px; border: 2px dashed var(--home-pink); background: var(--home-card); }
.tw-lineart span { flex: 1 1 260px; color: var(--home-wiz-muted); line-height: 1.45; }
.tw-lineart strong { color: inherit; }
.tw-warn { color: var(--home-error); font-weight: 600; line-height: 1.45; }
.tw-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tw-foot [hidden] { visibility: hidden; display: block; }
.tw-primary { font: inherit; font-weight: 700; font-size: 17px; border: 0; padding: 13px 28px; border-radius: 999px; cursor: pointer;
  background: var(--home-teal); color: var(--home-on-color); }
.tw-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.tw-secondary { font: inherit; font-weight: 700; font-size: 16px; border: 2px solid var(--home-wiz-ink); background: var(--home-card);
  color: var(--home-wiz-ink); padding: 11px 24px; border-radius: 999px; cursor: pointer; }
/* the machine wizard (machinewizard.js, roadmap 43): the trace wizard's card */
.mw-wide { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mw-why { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--home-wiz-soft); border: 2px solid var(--home-wiz-line);
  font-size: 16px; line-height: 1.45; }
.mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mw-pick { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 3px solid var(--home-wiz-line); background: var(--home-card);
  border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.mw-pick:hover { border-color: var(--home-teal); }
.mw-pick.on { border-color: var(--home-teal); background: var(--home-wiz-soft); }
.mw-pick strong { font-size: 17px; }
.mw-pick span { color: var(--home-wiz-muted); font-size: 14px; }
.mw-link { font: inherit; font-weight: 700; border: 0; background: none; color: var(--home-teal-deep); padding: 0; cursor: pointer; text-decoration: underline; }
.mw-search { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--home-wiz-line); border-radius: 12px;
  background: var(--home-card); color: var(--home-wiz-ink); max-width: 360px; }
.mw-hoops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mw-hoop { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: 2px solid var(--home-wiz-line);
  border-radius: 14px; padding: 10px 14px; cursor: pointer; background: var(--home-card); }
.mw-hoop input { width: 20px; height: 20px; accent-color: var(--home-teal); grid-row: span 3; }
.mw-hoop.mine { cursor: default; background: var(--home-wiz-soft); }
.mw-hoop .mw-tick { grid-row: span 3; color: var(--home-teal); font-weight: 800; }
.mw-hoop span, .mw-hoop em { color: var(--home-wiz-muted); font-size: 14px; font-style: normal; }
.mw-add summary { cursor: pointer; font-weight: 700; color: var(--home-teal-deep); }
.mw-add .tw-inline { margin-top: 10px; }
.mw-add input { font: inherit; padding: 8px 10px; border: 2px solid var(--home-wiz-line); border-radius: 10px; background: var(--home-card);
  color: var(--home-wiz-ink); width: 110px; }
.mw-ready { justify-content: center; gap: 12px; }
.mw-ready input[type="number"] { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--home-wiz-line); border-radius: 12px;
  background: var(--home-card); color: var(--home-wiz-ink); width: 110px; }
/* the profile button and its menu (Home's top right), Your profile (home.js, 2026-10-19) */
.home-me { position: relative; }
.home-account { overflow: hidden; padding: 0; }
.home-account img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-account svg { width: 24px; height: 24px; }
.home-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; min-width: 240px; background: var(--home-card);
  border: 1px solid var(--home-line); border-radius: 18px; box-shadow: 0 14px 30px var(--home-shadow); padding: 14px;
  display: flex; flex-direction: column; gap: 4px; }
.home-menu strong { font-size: 16px; overflow-wrap: anywhere; }
.home-menu small { color: var(--home-muted); font-size: 13px; margin-bottom: 6px; overflow-wrap: anywhere; }
.home-menu button { font: inherit; font-weight: 600; text-align: left; border: 0; background: none; color: var(--home-ink);
  padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.home-menu button:hover { background: var(--home-chip); }
.profile-panel { z-index: 960; }
.profile-card { width: min(980px, 100%); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.profile-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--home-wiz-soft);
  border-radius: 22px; padding: 20px; }
.profile-box > strong { font-size: 17px; }
.profile-box .tw-secondary, .profile-box .tw-primary { font-size: 15px; padding: 10px 18px; }
.profile-box .tw-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.profile-face { width: 72px; height: 72px; border-radius: 50%; background: var(--home-accent); color: var(--home-accent-ink);
  display: grid; place-items: center; font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-weight: 800; font-size: 32px;
  overflow: hidden; }
.profile-face img { width: 100%; height: 100%; object-fit: cover; }
.profile-face svg { width: 40px; height: 40px; }
.profile-plan { background: var(--home-gold); color: var(--home-gold-ink); font-weight: 700; font-size: 14px; padding: 5px 12px;
  border-radius: 999px; }
.profile-note { margin: 0; font-weight: 600; color: var(--home-teal-deep); }
/* Home from the first paint while StitchLab loads (index.html's head script sets html.home-boot) */
html.home-boot #home[hidden] { display: block; }
html.home-boot body { overflow: hidden; }
/* the cover itself comes from here, before the page below the top bar is even read */
html.home-boot body::before { content: ""; position: fixed; inset: 0; z-index: 899; background: var(--home-ground); }
/* Home's sewn StitchLab mark (static/brand/, tools/make_brand_marks.py): a different font each visit */
.home-mark { height: 52px; width: auto; display: block; }
@media (max-width: 640px) { .home-mark { height: 40px; } }
/* Layers: rows picked together (Ctrl / Shift+click, layers.js pickLayer); Group / Ungroup dimmed when they can't act */
.shapes li.picked { box-shadow: inset 3px 0 0 var(--own); background: var(--own-bg); }
.group-bar .icon-btn[aria-disabled="true"] { opacity: 0.4; }

/* Set properties for several shapes (multiset.js): a panel under the selection bar */
.multi-panel { position: fixed; z-index: 60; width: 22rem; max-height: calc(100vh - 8rem); overflow-y: auto;
  padding: 0.6rem 0.7rem; font-size: 0.86rem; background: var(--raised); border: 1px solid var(--rule);
  border-radius: var(--radius-m); box-shadow: 0 10px 28px var(--shadow); }
.multi-panel[hidden] { display: none; }
/* the undo history window (history.js) */
.history-panel { position: fixed; z-index: 60; width: 20rem; max-height: calc(100vh - 8rem); display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-m); box-shadow: 0 10px 28px var(--shadow); padding: 0.6rem 0.7rem; }
.history-panel[hidden] { display: none; }
.history-panel .history-head { display: flex; align-items: center; justify-content: space-between; }
.history-panel .history-count, .history-panel .history-tip { font-size: 0.78rem; color: var(--muted); margin: 0.2rem 0; }
.history-panel ol { list-style: none; margin: 0.3rem 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--rule); }
.history-panel li { padding: 0.28rem 0.45rem; font-size: 0.85rem; cursor: pointer; border-bottom: 1px solid var(--rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-panel li:hover, .history-panel li:focus-visible { background: var(--drop-hover); outline: none; }
.history-panel li.current { font-weight: 600; box-shadow: inset 3px 0 0 var(--mat); }
.history-panel li.undone { color: var(--muted); font-style: italic; }
.history-panel li.first { color: var(--muted); }
#history-btn { width: 1.6rem; padding: 0; font-size: 0.8rem; }
#history-btn[aria-pressed=true] { background: var(--drop-hover); }
.multi-panel .multi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.multi-panel .multi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-bottom: 0.5rem; }
.multi-panel .multi-row > span, .multi-panel .multi-row > label { display: inline-flex; align-items: center; gap: 0.3rem; }
.multi-panel .multi-row small { color: var(--muted); }
.multi-panel details.multi-set { margin-top: 0.3rem; }
.ctx-menu .ctx-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.45rem;
  vertical-align: -0.1rem; border: 1px solid var(--rule); }
.layers-bar { display: flex; align-items: center; gap: 0.5rem; margin: -0.3rem 0 0.5rem; }
.layers-bar .layers-count { margin: 0; }
.layers-bar .layers-count { flex: 1 1 auto; }
#layers-select { flex: none; white-space: nowrap; }
.multi-panel .stitchset > summary { cursor: pointer; color: var(--muted); }
.multi-panel .stitchset[open] > summary { margin-bottom: 0.3rem; }
.multi-panel .stitchset .grid { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; }
.multi-panel .stitchset label { display: inline-flex; align-items: center; gap: 0.3rem; }
.multi-panel .stitchset input[type=number] { width: 4.2rem; }
.multi-panel .own { color: var(--own); }