/* Design system: Cotton Traders' look (14 October 2026), from cottontraders.com and the UI UX Pro Max guidance: square
   corners, flat (no shadows), black outline buttons, a high-contrast serif for headings over a clean sans for text, and
   the brand's navy for main actions and red for the mark. The site's own fonts (IvyPresto Display, Puffin) are licensed
   through Adobe Fonts for cottontraders.com; Playfair Display and Inter stand in for them. Retune here. */
:root {
  --bg: #f6f6f4;           /* page: off-white */
  --panel: #ffffff;        /* cards, header */
  --ink: #111111;          /* text */
  --muted: #4f4f4f;        /* secondary text (7:1 on white) */
  --line: #d6d6d6;         /* borders */
  --subtle: #f0f0ee;       /* hover, tab list, badges */
  --accent: #062a39;       /* Cotton Traders navy: primary buttons, selection */
  --accent-hover: #0d4157;
  --accent-ink: #ffffff;
  --brand: #c9252c;        /* Cotton Traders red: the mark in the header */
  --ring: #062a39;
  --ok: #1d7a3a;
  --warn: #9a5b00;
  --bad: #c9252c;
  --radius: 0px;           /* cards: square, as on the site */
  --radius-sm: 0px;        /* buttons, inputs */
  --shadow: none;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules below must not override the hidden attribute */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }
h2 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 600; }
h2:focus { outline: none; }
a { color: var(--ink); }
.file-label { margin-top: 14px; }
main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 48px; }

/* the header: one bar across the top; on a phone the tools fold into a menu */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; height: 56px; margin: 0 auto; padding: 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.brand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.header-actions { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-menu { display: flex; align-items: center; gap: 4px; }
.menu-item { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 0.875rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--subtle); }
.menu-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-account { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; min-width: 0; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--subtle); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; }
.header-email { font-size: 0.875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.icon-button.menu-toggle { display: none; }
@media (max-width: 760px) {
  .icon-button.menu-toggle { display: inline-grid; }
  .header-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 2px; min-width: 240px; max-width: calc(100vw - 32px); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow-lg); }
  .header-menu.open { display: flex; }
  .header-menu .menu-item { width: 100%; justify-content: flex-start; }
  .header-account { order: -1; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .header-email { max-width: none; }
}

/* cards: every step, project, garment and drawing choice */
.panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel { padding: 20px; margin: 16px 0; }
.card { padding: 16px; }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 0; background: var(--subtle); color: var(--ink); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pager-text { font-size: 0.875rem; color: var(--muted); }
.panel.error { border-color: #fecaca; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.875rem; overflow-wrap: anywhere; }
.banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.9rem; }
.error-text { color: var(--bad); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons: primary (default), outline (.secondary), destructive (.danger, .danger-solid), small (.btn-sm) */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  font: 500 0.875rem/1.2 var(--font);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
button:hover, .button:hover { background: var(--accent-hover); }
button.secondary, .button.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
button.secondary:hover, .button.secondary:hover { background: var(--subtle); }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 0.8125rem; }
button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .menu-item:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ring); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* upload */
.file-label {
  display: block;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.file-label:hover, .file-label:focus-within { border-color: var(--accent); }
.file-cta { display: block; font-weight: 600; margin-bottom: 4px; }
.file-label input { display: block; margin: 10px auto 0; }
.fields { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fields { grid-template-columns: 1fr; align-items: end; } }
fieldset { border: 1px solid var(--line); border-radius: 0; padding: 8px 12px; margin: 0; }
legend { padding: 0 4px; color: var(--muted); font-size: 0.9rem; }
fieldset label { margin-right: 12px; }
label { display: block; font-size: 0.875rem; font-weight: 500; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-top: 6px;
  padding: 7px 12px;
  font: 0.875rem/1.4 var(--font);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* checks */
.checks-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .checks-grid { grid-template-columns: 220px 1fr; } }
#preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: 0; background: #eee; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check .icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.check.pass .icon { background: var(--ok); }
.check.warn .icon { background: var(--warn); }
.check.fail .icon { background: var(--bad); }
.check.pass .icon::before { content: "✓"; }
.check.warn .icon::before { content: "!"; }
.check.fail .icon::before { content: "✕"; }
.check-label { font-weight: 600; }

/* progress */
.stage { font-size: 1.1rem; margin: 0 0 4px; }
/* a spinner while a job runs */
.stage { display: flex; align-items: center; gap: 10px; }
.spinner { flex: none; width: 20px; height: 20px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Back at the top left of a step, beside its heading */
.panel-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-title h2 { margin: 0; }
.panel-head .panel-title { margin-bottom: 0; }
.back-button { padding: 6px 12px; font-size: 0.95rem; }

/* panel heading with actions on the right */
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.panel-head h2 { margin: 0; }
.panel-head .actions { margin-top: 0; }

/* debug mode: extra information, shown only with the Debug switch on */
body:not(.debug-mode) .debug-only { display: none !important; }
.debug-switch { color: var(--warn); }
.debug-switch input { margin: 0; accent-color: var(--warn); }
.drawing .actions { justify-content: center; }

/* debug tools */
.debug { margin-top: 16px; border: 1px dashed var(--warn); border-radius: 0; padding: 12px; background: #fffaf2; }
.debug-title { margin: 0 0 8px; font-weight: 600; color: var(--warn); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.debug-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 10px; }
.debug-row select { width: auto; }
label.inline { display: inline-flex; gap: 6px; align-items: center; }
.drawing .actions { justify-content: center; margin-top: 6px; }
.drawing figcaption.error-text { color: var(--bad); }

/* start-up: "Loading…", and after 8 seconds a hint to reload */
#loading p { margin: 0; }
.loading-slow { margin-top: 6px !important; font-size: 0.9rem; visibility: hidden; animation: loading-slow 0s 8s forwards; }
@keyframes loading-slow { to { visibility: visible; } }

/* result */
figure { margin: 0; }
figure img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 0; }
/* the three line drawings to choose from */
.drawings-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .drawings-grid { grid-template-columns: repeat(3, 1fr); } }
.drawings-grid figure { min-width: 0; text-align: center; }
/* a line drawing's buttons (Choose this one, Generate final drawing) stay inside its box: the text wraps rather than
   pushing the button past the box's edges (15 October 2026: on a phone they ran out by up to 33 px and were cut off) */
.drawings-grid figure button { max-width: 100%; white-space: normal; text-align: center; }
/* the SVG on its own, as large as fits */
.result-main { margin: 20px 0 0; text-align: center; } /* space between the heading row (name, Rename, Delete) and the SVG */
@media (min-width: 720px) { .result-main img { height: min(70vh, 640px); aspect-ratio: auto; } }
.drawing { margin: 0; }
figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 4px; text-align: center; }

/* projects */
.project-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.projects-head { margin-bottom: 8px; }
.search { flex: 0 1 320px; }
.search input { margin-top: 0; }
#projects-summary { margin: 0 0 12px; font-size: 0.9rem; }
.project-form label { flex: 1 1 280px; }
.project-list { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.project-card { position: relative; display: flex; flex-direction: column; min-height: 132px; }
.project-open { margin-top: auto; padding-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.project-card:hover, .project-card:focus-within { border-color: var(--accent); }
.project-link { font-weight: 600; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.project-link::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.project-card p { margin: 6px 0 0; font-size: 0.9rem; }
.project-link { font-size: 1.05rem; }
.project-head { margin: 12px 0 0; }
.back-link { color: var(--accent); text-decoration: none; font-size: 0.95rem; }
.back-link:hover, .back-link:focus-visible { text-decoration: underline; }
.project-title-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.project-title { margin: 0; min-width: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.project-head p { margin: 2px 0 0; }
.rename-form { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* small icon buttons (rename, delete): quiet until hovered */
.icon-button { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); box-shadow: none; }
.icon-button[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.icon-button:hover { background: var(--subtle); color: var(--ink); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-danger { margin-left: auto; } /* the bin sits at the right of the header */
.icon-danger:hover { border-color: var(--bad); color: var(--bad); }
.rename-form input { flex: 1 1 260px; margin-top: 0; font-size: 1.1rem; }
/* "In this project": a card per garment with three equal tiles (photo, line drawing, SVG) and one Open */
.garment-card { display: flex; flex-direction: column; gap: 10px; }
.garment-card.current { border-color: var(--accent); }
.garment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.garment-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.garment-title-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.garment-title-row .icon-button { width: 30px; height: 30px; }
.garment-title-row .icon-button svg { width: 17px; height: 17px; }
.garment-title-row:has(form:not([hidden])) { flex-basis: 100%; }
.garment-rename-form { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.garment-rename-form input { flex: 1 1 100%; margin-top: 0; }
.garment-rename-form button { padding: 6px 12px; font-size: 0.9rem; }
.garment-head p { flex-basis: 100%; margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { margin: 0; min-width: 0; }
.tile-frame { aspect-ratio: 3 / 4; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.tile-frame img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; }
.tile-empty { font-size: 0.8rem; padding: 4px; text-align: center; }
.tile figcaption { font-size: 0.8rem; text-align: left; margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
.garment-running, .garment-debug { margin: 0; font-size: 0.85rem; }
.garment-actions { margin-top: auto; display: flex; gap: 8px; }
.garment-open { flex: 1; }
button.danger { color: var(--bad); }
button.danger:hover { background: #fef2f2; }
.danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.danger-solid:hover { background: #b91c1c; }

/* lace (Layer 3) */
.lace-box { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.detail-found { font-size: 0.9rem; }
/* Finish this garment: adjust the shape, Layer 3, finish */
.lace-box > h3 { margin: 0 0 4px; font-size: 1.05rem; }
.finish-step { margin-top: 14px; }
.finish-step h4 { margin: 0 0 4px; font-size: 0.95rem; }
.adjust-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.adjust-form input { flex: 1 1 260px; margin-top: 0; }
.adjust-hint { font-size: 0.85rem; margin: 4px 0 0 !important; }
.adjust-list { margin: 4px 0 6px; padding-left: 22px; }
.adjust-list li { margin: 2px 0; }
.adjust-list button { margin-left: 8px; padding: 2px 10px; font-size: 0.85rem; }
.adjust-note { font-size: 0.85rem; }
.finish-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
/* the details step stays greyed out until the shape is saved */
.finish-step.locked > :not(h4):not(.detail-locked) { opacity: 0.45; filter: grayscale(1); pointer-events: none; }
.detail-locked { margin: 4px 0 8px; padding: 8px 10px; border-radius: 0; background: #f3f2ee; font-size: 0.9rem; }
.finish-step:not(.locked) .detail-locked { display: none; }
.finished-note { margin: 16px 0 0; padding: 10px 12px; border-radius: 0; background: #eef5ee; color: var(--ok); font-size: 0.95rem; }
.lace-box h3 { margin: 0 0 6px; font-size: 1rem; }
.detail-section { margin-top: 16px; }
.detail-section h4 { margin: 0 0 4px; font-size: 0.95rem; }
.lace-option .lace-none { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 0; background: #f3f2ee; font-size: 0.85rem; color: var(--muted); padding: 8px; text-align: center; }
.lace-box p { margin: 4px 0; }
.lace-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); margin: 10px 0; }
.lace-option { position: relative; border: 2px solid var(--line); border-radius: 0; padding: 6px; cursor: pointer; text-align: center; }
.lace-option:has(input:checked) { border-color: var(--accent); }
.lace-option:has(input:focus-visible) { outline: 3px solid #7fb3e8; outline-offset: 2px; }
.lace-option input { position: absolute; opacity: 0; }
.lace-option img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; background: #fff; }
.lace-option .lace-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 0; background: #f3f2ee; font-size: 0.9rem; padding: 8px; }
.lace-name { display: block; font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.lace-note { display: block; font-size: 0.8rem; }
.lace-option button { margin-top: 6px; padding: 6px 10px; font-size: 0.85rem; }
.lace-pieces { margin-top: 6px; }
.lace-piece-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lace-piece-list label { display: inline-flex; gap: 6px; align-items: center; }


/* debug dialogs: prompts, anchor points */
dialog.wide-dialog { width: min(1200px, calc(100vw - 32px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2 { margin: 0; }
.prompt-block { margin-top: 16px; }
.prompt-block h3 { margin: 0 0 4px; font-size: 1rem; }
.prompt-block pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f6f5f2; border: 1px solid var(--line); border-radius: 0; padding: 10px; font-size: 0.8rem; max-height: 50vh; overflow: auto; margin: 6px 0 0; }
.prompt-block details { margin-top: 8px; }
.prompt-block summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.anchor-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0; font-size: 0.9rem; }
.anchor-zoom button { padding: 4px 10px; font-size: 0.85rem; }
.anchor-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.key-smooth, .key-corner { display: inline-block; width: 10px; height: 10px; }
.key-smooth { border-radius: 50%; background: #1f6fd1; }
.key-corner { background: #d1301f; }
.anchor-scroll { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.anchor-canvas { position: relative; width: 100%; }
.anchor-canvas img { display: block; width: 100%; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; }
#anchor-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.garment-debug-actions { display: flex; gap: 8px; }
.garment-debug-actions button { flex: 1; padding: 6px 10px; font-size: 0.85rem; }

/* dialogs */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

/* the marking form */
.mark-comment { display: block; margin-top: 12px; }
.mark-comment textarea { width: 100%; margin-top: 4px; }

/* the feedback page (debug mode) */
.feedback-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.feedback-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.feedback-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.feedback-thumb { display: block; aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.feedback-thumb img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; border: 0; border-radius: 0; }
.feedback-body p { margin: 0 0 4px; overflow-wrap: anywhere; }
.feedback-where a { color: var(--accent); font-weight: 600; text-decoration: none; }
.feedback-where a:hover, .feedback-where a:focus-visible { text-decoration: underline; }
.feedback-version, .feedback-by { font-size: 0.85rem; }
.feedback-usable.no { background: #f6e3e1; color: var(--bad); }
.feedback-comment { white-space: pre-wrap; margin-top: 6px !important; }
.feedback-comment.empty { color: var(--muted); font-style: italic; }

/* garments found by the landing page's search */
.garment-search { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.garment-search h3 { margin: 0 0 4px; font-size: 1.05rem; }
.garment-search-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.garment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.garment-row-thumbs { display: flex; gap: 6px; text-decoration: none; }
.garment-row-thumb { display: grid; place-items: center; width: 60px; aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.garment-row-thumb img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; border: 0; border-radius: 0; }
.garment-row-none { font-size: 0.7rem; text-align: center; padding: 2px; }
.garment-row-body { min-width: 0; }
.garment-row-body p { margin: 2px 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.garment-row-name { font-weight: 600; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.garment-row-name:hover, .garment-row-name:focus-visible { text-decoration: underline; }
.garment-row-actions { display: flex; align-items: center; gap: 4px; }
.garment-row-open { padding: 6px 14px; font-size: 0.9rem; }
@media (max-width: 560px) {
  .garment-row { grid-template-columns: auto minmax(0, 1fr); }
  .garment-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* notifications */
.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.link-button:hover, .link-button:focus-visible { text-decoration: underline; }
.notify-status { font-weight: 600; }

/* batch upload */
.batch-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.batch-row { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.batch-row.flagged { border-color: var(--warn); background: #fff8ec; }
.batch-row.broken { opacity: 0.6; }
.batch-keep input { width: 20px; height: 20px; margin: 0; }
.batch-thumb { width: 52px; height: 64px; object-fit: contain; aspect-ratio: auto; background: #fff; border: 1px solid var(--line); border-radius: 0; }
.batch-body p { margin: 0; overflow-wrap: anywhere; }
.batch-name { font-weight: 600; font-size: 0.9rem; }
.batch-state { font-size: 0.85rem; }
.batch-row.flagged .batch-state { color: var(--warn); }
.batch-row.broken .batch-state { color: var(--bad); }
.items-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.items-head h2 { margin-right: auto; }
.batch-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 0; background: #eef3f8; }
.batch-progress p { margin: 0; }
.batch-note { font-weight: 600; color: var(--accent); }
.file-label.dragging { border-color: var(--accent); background: #eef3f8; }

/* Layer 3 in a single row under the SVG: one detail at a time, arrows either side */
.result-applied { text-align: center; margin: 4px 0 0; }
.detail-strip { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; }
.detail-strip.locked #strip-body { opacity: 0.45; filter: grayscale(1); pointer-events: none; }
.detail-strip:not(.locked) .detail-locked { display: none; }
.strip-head { display: flex; align-items: center; gap: 8px; }
.strip-label { flex: 1; margin: 0; min-width: 0; }
.strip-dots { display: inline-flex; gap: 5px; }
.strip-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
.strip-dot.chosen { background: var(--accent); border-color: var(--accent); }
.strip-dot.current { outline: 2px solid #7fb3e8; outline-offset: 1px; }
.strip-track .detail-section { margin-top: 6px; }
.strip-track .detail-title { display: none; } /* the row's own title says which detail this is */
.strip-track .lace-options { display: flex; gap: 10px; overflow-x: auto; margin: 6px 0; padding-bottom: 4px; }
.strip-track .lace-option { flex: 0 0 110px; }
.strip-track .lace-pieces { margin-top: 2px; border: 0; padding: 0; }
.strip-track .lace-pieces legend { font-size: 0.85rem; color: var(--muted); padding: 0; }

/* the slim adjust row under the SVG; greyed while it can't be used */
.adjust-row { margin-top: 10px; }
.adjust-row .adjust-form { margin-top: 0; }
.adjust-row.locked .adjust-form, .adjust-row.locked .undo-button { opacity: 0.5; }

/* the garment open: name, a tab per view, its step button and Export */
.garment-bar-title { display: flex; align-items: center; gap: 6px; }
.garment-bar-title h2 { margin: 0; }
.view-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 4px; background: var(--subtle); border-radius: 0; }
.view-tab { min-height: 30px; padding: 4px 12px; background: transparent; color: var(--muted); border: 0; box-shadow: none; }
.view-tab:hover { background: transparent; color: var(--ink); }
.view-tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.view-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.view-dot.ready { background: var(--ok, #2e7d32); }
.view-dot.choose { background: var(--accent); }
.view-dot.failed { background: #c62828; }
.spinner.small { width: 12px; height: 12px; border-width: 2px; }
.garment-bar-actions { margin-top: 10px; }
/* drawings: the chosen one stands out, the others are greyed (still clickable to switch) */
.drawing.chosen { outline: 3px solid var(--accent); outline-offset: 2px; }
.drawing.not-chosen img { opacity: 0.45; filter: grayscale(1); }
/* a garment card: a tile per view, each opening it */
/* a garment card: one image per view (its latest step), centred; a one-view garment's image larger */
.view-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.view-tiles .view-tile { flex: 1 1 110px; max-width: 170px; }
.view-tiles .view-tile:only-child { flex-basis: 240px; max-width: 240px; }
.view-tiles .view-tile figcaption { text-align: center; color: var(--muted); }
.tile-open { display: grid; place-items: center; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; }
/* the garment's actions: the main ones, then the small ones on a row of their own */
.garment-bar-actions { align-items: center; }
/* Add photos sits on the name's row, at the right; the row wraps on a narrow screen */
.garment-bar-title { flex-wrap: wrap; }
.garment-bar-title #add-views { margin-left: auto; }
/* the step button's row only when it shows */
.garment-bar-actions:not(:has(> :not([hidden]))) { display: none; }
@media (max-width: 760px) { .garment-bar-title #add-views { margin-left: 0; flex: 1 1 100%; } .garment-bar-actions > * { flex: 1 1 100%; } }

/* a spinner while photos upload and are checked */
.busy-line { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Rename garment / Delete garment, in the box showing the image: pushed to the end of its row of actions */
.garment-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Compare with photo: a full-screen lightbox, the photo and the SVG side by side (stacked on a phone held upright) */
dialog.lightbox { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; display: none; } /* the visible window exactly (100vw would run under a scrollbar) */
dialog.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.lightbox-head h2 { margin: 0; margin-right: auto; font-size: 1rem; }
.compare-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; }
.compare-zoom { display: inline-flex; gap: 4px; }
.compare-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); min-height: 0; }
@media (max-width: 760px) and (orientation: portrait) { .compare-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
.compare-pane { position: relative; overflow: hidden; background: #fff; touch-action: none; cursor: grab; min-height: 0; }
.compare-pane:active { cursor: grabbing; }
.compare-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; pointer-events: none; }
.compare-label { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 10px; border-radius: 0; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; }
@media (max-width: 760px) {
  /* a phone: the title and close on the first row, Zoom together and the zoom buttons on the second */
  .lightbox-head h2 { order: 0; flex: 1 1 calc(100% - 52px); }
  #compare-close { order: 1; }
  .compare-link { order: 2; }
  .compare-zoom { order: 3; margin-left: auto; }
}

/* The rename dialog: the name field full width under its label */
.name-field { display: grid; gap: 6px; margin-top: 12px; }
.name-field input { width: 100%; }
#name-dialog { width: min(440px, calc(100vw - 32px)); }
#name-hint { margin: 6px 0 0; font-size: 0.8125rem; }

/* The collection's page: its garments with a search, the zip and New garment in the heading row */
.items-head .search { flex: 0 1 280px; }
#project-items .items-head { margin-bottom: 20px; } /* space between the heading row (search, zip, New garment) and the cards */
#new-garment { width: min(560px, calc(100vw - 32px)); }
#new-garment h2 { margin-top: 0; }
/* A garment's own page: the way back to its collection, above the garment */
.garment-nav { margin: 4px 0 12px; }
/* Rename photo / Delete photo at the top right of the pane showing the photo */
.panel-head .pane-tools:empty { display: none; }
.panel-head .garment-tools { margin-left: 0; }
@media (max-width: 760px) {
  /* a phone: the heading with New garment beside it, then the search, then the zip */
  .items-head h2 { order: 0; flex: 1 1 auto; }
  #new-garment-button { order: 1; }
  .items-head .search { order: 2; flex: 1 1 100%; }
  #download-zip { order: 3; }
}

/* UX review (13 October 2026): bigger text and touch targets (16px text, 44px buttons), darker hint text */
:root { --muted: #52525b; }
body { font-size: 16px; }
button, .button { min-height: 44px; padding: 10px 18px; font-size: 1rem; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 0.9375rem; }
.icon-button { width: 44px; height: 44px; }
.menu-item { height: 44px; font-size: 0.9375rem; }
label { font-size: 1rem; }
/* 16px in every box, so an iPhone doesn't zoom in when one is tapped */
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea { min-height: 44px; font-size: 1rem; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
.compare-zoom button { min-width: 44px; min-height: 44px; }
/* icon buttons with their word beside the icon */
.btn-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-title-row { gap: 8px; flex-wrap: wrap; }
/* the photo tabs: the one on screen stands out, and each says where it is */
.view-tab { min-height: 40px; }
.view-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.view-tab[aria-selected="true"] .view-dot { box-shadow: 0 0 0 2px var(--panel); }
.tab-stage { margin-left: 6px; font-size: 0.8125rem; opacity: 0.85; }
.tab-stage::before { content: "\00b7  "; }
/* the photo picker: a big button rather than the browser's own control */
.file-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 28px; margin: 0 auto 10px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); }
.file-label:focus-within .file-cta { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ring); }
.file-label > .muted { display: block; }
/* the details picked: always one line tall, so picking one doesn't move the page */
.result-applied { min-height: 1.5em; }
/* the final drawing, with the anchor points over it on a phone (both fit the same box the same way) */
.result-stage { position: relative; display: block; }
.result-anchors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.export-note { margin: 8px 0 0; font-size: 0.875rem; }
.adjust-help { margin: 0 0 8px; }
/* the line drawings, with the photo first */
@media (min-width: 720px) { .drawings-grid { grid-template-columns: repeat(4, 1fr); } }
.drawing-photo figcaption { font-weight: 600; }

@media (max-width: 760px) {
  /* a phone: two across, so the photo sits beside a drawing; a drawing's buttons fill its width */
  .drawings-grid { grid-template-columns: 1fr 1fr; }
  .drawings-grid figure button { width: 100%; padding-left: 8px; padding-right: 8px; }
  /* detail options in a grid rather than a row running off the edge */
  .strip-track .lace-options { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .strip-track .lace-option { flex: none; }
  /* buttons full width, the main one first */
  #result > .actions > button { flex: 1 1 100%; }
  /* the garment's buttons and Rename / Delete photo: under the drawing, set apart */
  .panel > .garment-bar-actions, .panel > .garment-tools { display: flex; width: 100%; margin-left: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .panel > .garment-bar-actions > button, .panel > .garment-tools > button { flex: 1 1 auto; }
}

/* Quality round (13 October 2026) */
/* 1. the details row: Previous / Next detail under the options, the dots between them */
.strip-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
/* 2. a short message at the bottom when something finishes */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 0; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-lg); font-size: 0.9375rem; animation: toast-in 0.18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* 4. a garment's pictures look like what they are: buttons that open it */
.tile-open { transition: border-color 0.15s, transform 0.1s; }
.tile-open:hover { border-color: var(--accent); }
.tile-open:active { transform: scale(0.98); }
/* 5. a phone, no Debug: Notifications and Sign out in the bar, icon over a short word, no menu */
@media (max-width: 760px) {
  .simple-header .icon-button.menu-toggle { display: none; }
  .simple-header .header-menu { display: flex; position: static; flex-direction: row; gap: 2px; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .simple-header .header-menu .menu-item { flex-direction: column; justify-content: center; gap: 2px; width: auto; height: 48px; padding: 0 8px; font-size: 0.75rem; }
  .simple-header .header-account { display: none; }
}
/* 6. less motion for people who asked for it */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .tile-open { transition: none; }
  .tile-open:active { transform: none; }
}

/* None of these are right: the two ways on, one under the other, each with a line saying what it does */
#none-dialog { width: min(480px, calc(100vw - 32px)); }
#none-dialog h2 { margin-top: 0; }
.choice-list { display: grid; gap: 10px; margin-top: 12px; }
.choice { display: grid; justify-items: start; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; white-space: normal; }
.choice .muted { font-weight: 400; font-size: 0.9375rem; }
.none-row { justify-content: center; }

/* Cotton Traders' look: headings in the display serif, the red stitched mark, black outline buttons */
h1, h2, .project-title, #garment-bar-name, dialog h2, .garment-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: lining-nums; }
h2 { font-size: 1.375rem; }
.project-title { font-size: 1.875rem; line-height: 1.2; }
.garment-title { font-size: 1.125rem; }
.brand { gap: 12px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.brand svg { box-sizing: content-box; width: 20px; height: 20px; padding: 7px; background: var(--brand); color: #fff; outline: 1px dashed rgba(255, 255, 255, 0.75); outline-offset: -4px; }
button.secondary, .button.secondary { border-color: var(--ink); }
button, .button { font-weight: 600; letter-spacing: 0.01em; }
button.secondary.danger, button.danger { border-color: var(--bad); color: var(--bad); }
.panel { border-color: var(--line); }
.site-header { border-bottom-color: var(--line); }
.view-tabs { background: transparent; padding: 0; gap: 8px; }
.view-tab { border: 1px solid var(--ink); color: var(--ink); background: var(--panel); }
.view-tab:hover { background: var(--subtle); }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea { border-color: #8c8c8c; }
.file-label { border-radius: 0; border-color: #9a9a9a; }
.lace-option:has(input:checked), .drawing.chosen { border-color: var(--accent); }
.project-link { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: lining-nums; }

/* Breathing room (14 October 2026): more space inside the boxes and around their heading rows */
.panel { padding: 28px; }
@media (max-width: 760px) { .panel { padding: 20px; } }
/* the home page: the heading on the left, the search and New collection together on the right */
.projects-head { justify-content: flex-start; gap: 12px; margin-bottom: 24px; }
.projects-head h2 { margin-right: auto; }
.projects-head .search { flex: 0 1 300px; }
#project-items .items-head { gap: 12px; margin-bottom: 28px; }
/* a collection's page: the back link, the name with small Rename / Delete beside it, then who made it */
.project-head { margin: 20px 0 24px; }
.project-head .back-link { margin-bottom: 8px; }
.project-title-row { align-items: center; gap: 12px; margin-top: 4px; }
.project-head p#project-meta { margin-top: 8px; }
/* Rename / Delete beside a name: quiet and small, in line with it (still a comfortable tap) */
#rename-project, #delete-project, #garment-bar-rename { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; font-weight: 500; border-color: var(--line); }
#delete-project { border-color: #e7b9bb; }
/* a garment's box: its name and Rename on one line, then the photo tabs and its buttons, with room between */
.garment-bar-title { gap: 12px; }
.garment-bar .view-tabs { margin-top: 18px; }
.garment-bar-actions { margin-top: 18px; }
@media (max-width: 760px) {
  .projects-head h2 { flex: 1 1 100%; }
  .projects-head .search { flex: 1 1 auto; }
}

/* The home page: the heading, search and New collection in their own card, the collections in the next */
.projects-bar .projects-head { margin-bottom: 0; }
#projects-summary:empty { display: none; }
/* A collection's page: more room above "Created by" */
.project-head p#project-meta { margin-top: 16px; }
/* A garment's page: "Back to <collection>" where "All collections" sits on a collection's page */
.garment-nav { margin: 20px 0 8px; }

/* A garment's page: a little more room between its boxes (the garment, then the step on screen) */
#garment-head, #checks, #drawings, #progress, #result, #error { margin: 24px 0; }
/* the narrowest phones: the details row's buttons fit without the dots between them */
@media (max-width: 400px) { .strip-dots { display: none; } .strip-nav button { padding: 8px 10px; } }

/* Small fixes (14 October 2026) */
/* Take a photo: only where there is a camera to hand (a touch screen) */
.camera-row { display: none; margin-top: 12px; }
.camera-row button { width: 100%; }
@media (pointer: coarse) { .camera-row { display: block; } }
/* the SVG pane: the same 24px between its parts as between boxes */
#result .adjust-row, #result .detail-strip, #result > .actions { margin-top: 24px; }
/* the drawing opens Compare with photo */
#result-svg { cursor: zoom-in; }

/* The user guide: the full width of the page like the other boxes (it was a 760px column), plain headings, the
   buttons' names picked out */
.guide h2 { font-size: 1.875rem; margin: 8px 0 12px; }
.guide h3 { font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: 1.3rem; margin: 36px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.guide p, .guide li { line-height: 1.65; }
.guide ol, .guide ul { padding-left: 1.4em; }
.guide li { margin: 6px 0; }
.guide-lead { font-size: 1.125rem; }
.guide-contents { margin: 20px 0 8px; padding: 16px 20px; background: var(--subtle); }
.guide-contents ol { margin: 0; columns: 3; column-gap: 32px; }
@media (max-width: 960px) { .guide-contents ol { columns: 2; } }
@media (max-width: 760px) { .guide-contents ol { columns: 1; } }
.guide-contents a { color: var(--accent); }
.guide .ui { display: inline-block; padding: 0 6px; border: 1px solid var(--ink); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.guide-tip { margin: 14px 0; padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--subtle); }
.guide-back { margin-top: 32px; }
/* a narrow phone without the menu: Guide, Notifications and Sign out fit beside the red mark alone */
@media (max-width: 420px) { .simple-header .brand span { display: none; } }

/* The sign-in page (20 October 2026): one card in the middle, the email form first, Google under a rule */
/* the white box is the card itself (20 October 2026: it filled the screen with the form floating in it): as wide as
   the form on a desktop, centred; the page's full width on a phone */
.signin { width: min(480px, 100%); margin: 24px auto 0; padding: 28px; }
@media (max-width: 760px) { .signin { margin-top: 16px; padding: 24px 20px; } }
.signin-card { width: 100%; }
.signin-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; background: var(--brand); outline: 1px dashed rgba(255, 255, 255, 0.75); outline-offset: -4px; }
.signin-mark svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.signin h2 { margin: 0 0 14px; font-size: 1.625rem; }
.signin h3 { margin: 0 0 8px; font-size: 1.25rem; font-family: var(--font-display); font-weight: 700; }
.signin-lead { margin: 0 0 16px; font-size: 1.0625rem; }
.signin label { margin-top: 4px; }
.signin input[type="email"] { min-height: 48px; font-size: 1.0625rem; }
.signin-primary { width: 100%; min-height: 48px; margin-top: 14px; font-size: 1.0625rem; }
.signin #signin-error, .signin #signin-confirm-error { margin: 10px 0 0; }
#signin-sent p { margin: 0 0 10px; font-size: 1.0625rem; }
#signin-sent .actions { margin-top: 16px; }
.signin-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--muted); font-size: 0.9375rem; }
.signin-divider::before, .signin-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin-google { width: 100%; min-height: 48px; gap: 10px; }
.signin-google svg { width: 20px; height: 20px; }
.signin-help { margin: 14px 0 0; font-size: 0.9375rem; line-height: 1.5; }

/* The picture guide (20 October 2026): a phone screenshot per step with one or two lines beside it. On a phone the
   picture comes first, as wide as the page; on a wider screen it sits on the left at phone size, the words beside it. */
.guide-steps { list-style: none; margin: 24px 0 0; padding: 0; }
.guide-step { display: grid; gap: 14px 28px; padding: 24px 0; border-top: 1px solid var(--line); }
.guide-step img { display: block; width: 100%; max-width: 375px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.guide-words h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 1.375rem; scroll-margin-top: 72px; }
.guide-words p { margin: 0; font-size: 1.0625rem; }
.guide-num { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 1.125rem/1 var(--font); vertical-align: middle; }
.guide-words b.ui { font-size: 1rem; }
@media (min-width: 720px) {
  .guide-step { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .guide-step img { margin: 0; }
}
.guide-h { margin-top: 36px; }
.guide-plain li { margin: 10px 0; font-size: 1.0625rem; }
.guide .guide-lead { font-size: 1.1875rem; }

/* the photo section's sub-headings and its checklist */
.guide h4 { font-size: 1.0625rem; margin: 20px 0 6px; }
.guide-check { margin: 20px 0 8px; padding: 16px 20px; border: 1px solid var(--ink); }
.guide-check p { margin: 6px 0; }
.guide .checklist { list-style: none; padding-left: 0; }
.guide .checklist li { position: relative; padding-left: 30px; }
.guide .checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border: 1.5px solid var(--ink); }

/* Compare: change the shape while comparing, along the bottom */
.compare-adjust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.compare-adjust input { flex: 1 1 320px; margin-top: 0; }
.compare-adjust p { flex: 1 1 100%; margin: 0; font-size: 0.9375rem; }
.compare-adjust p:empty { display: none; }

/* the Downloaded dialog: the file names stand out; the steps to open them in Illustrator */
#downloaded-dialog { width: min(520px, calc(100vw - 32px)); }
#downloaded-dialog h3 { font-size: 1.0625rem; margin: 20px 0 6px; }
.downloaded-files { list-style: none; padding: 10px 14px; margin: 6px 0 10px; background: var(--bg); border: 1px solid var(--line); }
.downloaded-files li { font-weight: 600; overflow-wrap: anywhere; }
.downloaded-steps { padding-left: 22px; margin: 0; }
.downloaded-steps li { margin: 6px 0; }

/* a collection just made: its card outlined for a few seconds, then back to normal */
.project-card { transition: outline-color 0.8s ease; outline: 3px solid transparent; outline-offset: 2px; }
.project-card.is-new { outline-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .project-card { transition: none; } }

/* Which garment should we draw? */
/* Which garment should we draw?, on the checks page: the chosen one dark with a tick, the others outlined */
.pick-garment { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.pick-garment h3 { margin: 0 0 4px; font-size: 1.125rem; }
.pick-garment p { margin: 0 0 10px; }
.pick-options { display: flex; flex-wrap: wrap; gap: 10px; }
.pick-options button[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* Mobile review (20 October 2026): the app is used on phones by people who aren't technical. Nothing to read below
   16px, nothing to tap below 44px, no sideways scrolling, and Delete kept away from the button next to it. */
/* 1. a long photo name made the tabs run off the screen (the page could be dragged sideways): the text wraps instead */
.view-tabs { max-width: 100%; }
.view-tab { white-space: normal; text-align: left; max-width: 100%; min-height: 44px; }
.tab-stage { white-space: nowrap; }
/* 2. text that was 13–14px: the detail names, captions, dates, notes and the pager */
.lace-name, figcaption, .project-card p, .pager-text, .adjust-note, .adjust-hint, .guide .ui, .detail-locked { font-size: 1rem; }
.lace-note, .garment-head p, .garment-running, .garment-debug, .tile figcaption, .tile-empty, .garment-row-body p, .feedback-version, .feedback-by, #name-hint, .banner, .check-message { font-size: 0.9375rem; }
.lace-option .lace-none { font-size: 0.9375rem; }
@media (max-width: 760px) { .simple-header .header-menu .menu-item { font-size: 0.8125rem; } }
/* 3. taps: the pen on a garment card, Rename and Delete beside a name, and small buttons, all 44px */
.garment-title-row .icon-button { width: 44px; height: 44px; }
.garment-title-row .icon-button svg { width: 18px; height: 18px; }
#rename-project, #delete-project, #garment-bar-rename { min-height: 44px; padding: 8px 14px; }
.btn-sm { min-height: 44px; }
.adjust-list button { min-height: 40px; }
.garment-actions { gap: 16px; }
/* 4. Delete photo on its own line under Rename photo, so a thumb aiming at one can't land on the other */
@media (max-width: 760px) {
  .panel > .garment-tools { flex-direction: column; align-items: stretch; }
  .panel > .garment-tools > #view-delete { flex: none; align-self: flex-end; margin-top: 12px; width: auto; }
  .panel > .garment-tools > #view-delete:only-child { margin-top: 0; }
}
/* 5. the three drawings: one across on a phone held upright, each as wide as the screen; the photo first, no taller
   than half the screen so a drawing is always close to it. Tapping a drawing opens it large beside the photo. */
@media (max-width: 560px) {
  .drawings-grid { grid-template-columns: 1fr; }
  .drawings-grid .drawing-photo img { aspect-ratio: auto; max-height: 50vh; }
  .drawings-grid .drawing img { aspect-ratio: auto; max-height: 70vh; }
}
.drawings-grid .drawing:not(.drawing-photo) img { cursor: zoom-in; }
.drawings-grid .drawing img:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ring); }
/* 6. the details: a phone shows four styles, then "Show all 9 styles"; a wide screen shows them all */
.show-all { display: none; margin: 4px 0 8px; }
@media (max-width: 760px) {
  .show-all { display: inline-flex; }
  .strip-track .lace-options:not(.all) .lace-option:nth-child(n + 5) { display: none; }
}
/* 7. a garment card says where it is in words: "Ready for Illustrator" in green, else what to do next */
.garment-running { font-weight: 600; }
.garment-running.is-ready { color: var(--ok); }

/* Mobile review, round two (20 October 2026) */
/* 1. a collection's card says how many garments it holds and how many are ready */
.project-counts { margin: 8px 0 0; font-weight: 600; }
/* 2. common changes to the shape, as buttons above the box */
.adjust-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.adjust-suggestions-label { flex: 0 0 auto; }
.adjust-row.locked .adjust-suggestions { opacity: 0.5; }
@media (max-width: 760px) { .adjust-suggestions-label { flex-basis: 100%; } }

/* Names on their own line (20 October 2026): Rename and Delete collection sat beside the name and a long name split
   them over two lines; now the name takes the first line and the buttons the next, on every screen. The same for a
   garment's name and its Rename. */
.project-title-row { flex-wrap: wrap; gap: 10px 12px; }
.project-title, .project-title-row .rename-form { flex: 1 1 100%; }
.garment-bar-title { flex-wrap: wrap; }
.garment-bar-title h2 { flex: 1 1 100%; }

/* Download on a phone or tablet (20 October 2026): the file lands on the phone, where Illustrator isn't; the page
   says to download on the computer, where the collection is too */
.export-note { max-width: 60ch; }
#result > .actions > #export-phone-note { flex: 1 1 100%; margin: -2px 0 8px; } /* its own line, under Download */
.downloaded-phone { margin: 10px 0 0; }

/* Delete collection (20 October 2026): the name to type, under what goes */
.delete-confirm { display: block; margin-top: 14px; font-weight: 400; }
.delete-confirm input { margin-top: 8px; }

/* Confirmations stay (20 October 2026): the message at the bottom has a × and keeps until it's pressed */
.toast { display: flex; align-items: center; gap: 4px; width: max-content; padding: 6px 6px 6px 18px; font-size: 1rem; }
#toast-text { flex: 1 1 auto; min-width: 0; }
.toast-close { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border-color: transparent; background: transparent; color: var(--accent-ink); font-size: 1.5rem; line-height: 1; }
.toast-close:hover { background: rgba(255, 255, 255, 0.15); }
.toast-close:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-ink); }
body.has-toast main { padding-bottom: 120px; } /* the page's last button stays clear of the message */

/* Mobile review, round three (20 October 2026) */
/* 1. start here: one line under the Collections heading */
.projects-lead { margin: 16px 0 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; }
.projects-lead a { color: var(--accent); }
/* 2. Compare on a phone: one row of controls (Zoom together, the zoom buttons, close) instead of two, the title read
   out but not shown (the panes say Photo and Drawing), and the adjust box with its button beside it, so the photo and
   the drawing get the height */
@media (max-width: 760px) {
  .lightbox-head { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .lightbox-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-link { order: 0; margin-right: auto; }
  .compare-zoom { order: 1; margin-left: 0; }
  .compare-zoom button { min-width: 40px; padding-left: 6px; padding-right: 6px; }
  #compare-close { order: 2; }
  .compare-adjust { padding: 8px 12px; gap: 8px; }
  .compare-adjust input { flex: 1 1 120px; }
}