/* croqi app, the work screens: one part, one pattern, and the three generation pages. They share one skeleton:
   inputs on the left, the sheet in the middle, what came before on the right. */

.part {
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 286px; grid-template-rows: auto minmax(0, 1fr);
  gap: 16px; width: min(100% - 40px, 1680px); margin: 0 auto; padding: 18px 20px 24px;
  min-height: 100%;
}

.part-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.part-head .btn-quiet { margin-left: auto; }
.back {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 7px; color: var(--ink-muted); text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.back:hover { background: #ffffff0d; color: var(--ink); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-muted); font-size: 12px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumb { color: var(--ink-muted); font-size: 12px; }
.part-name {
  flex: 0 1 auto; min-width: 0; max-width: 340px; height: 34px; padding: 0 9px;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; font-size: 20px; font-weight: 600; text-overflow: ellipsis;
}
.part-name:hover { border-color: var(--line); }
.part-name:focus { border-color: var(--accent); background: var(--surface); }
.gen-title { flex: 0 1 auto; padding: 0 9px; font-size: 20px; }
.gen-sub { margin-left: 4px; min-width: 0; }
.pager { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ink-muted); font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.pager:not([hidden]) ~ .btn-quiet { margin-left: 8px; }
.sample-banner { grid-column: 1 / -1; margin: 0; padding: 9px 13px; border: 1px solid #e6b85766; border-radius: var(--r-1); background: #e6b85714; color: var(--amber); font-size: 12px; }

/* which output of this garment: the panels below change, nothing else does */
.tools { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #ffffff0d; }
.tool-tab {
  padding: 0 12px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-muted); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tools .tool-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #12181d1a; }
.tool-tab:hover { color: var(--ink); }
.tool-tab.is-active { border-bottom-color: var(--accent); color: var(--accent); }

.panel { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.input-panel { display: grid; align-content: start; gap: 16px; padding: 18px; }
.ref { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; }
/* Buket, 2026-09-29: a reference photo is shown whole, never cropped */
.reference {
  width: 100px; height: 125px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; background: #ffffff0a;
}
.ref-meta { margin: 0 0 10px; color: var(--ink-muted); font-size: 12px; }
.hint { margin: -6px 0 0; color: var(--ink-muted); font-size: 12px; }
.generate { height: 40px; font-size: 14px; }
.generate-again { height: 34px; font-size: 13px; }
.generate small { font-weight: 500; opacity: .8; }

/* the chip wall of the earlier product and shoot panels */
.settings { border: 1px solid var(--line); border-radius: var(--r-1); background: var(--page); }
.settings summary {
  padding: 8px 11px; color: var(--ink-muted); cursor: pointer;
  font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.settings[open] summary { border-bottom: 1px solid var(--line); }
.chips { display: grid; gap: 12px; padding: 12px; }
.chip-group > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip {
  padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 99px;
  background: var(--surface); color: var(--ink-muted); font-size: 12px;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-chosen { border-color: #6ea9e380; background: var(--accent-wash); color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chips.frames > div { display: flex; flex-wrap: wrap; gap: 5px; }

/* the output side: a floating toolbar over a dot-grid table, the sheet on it, the title block under it */
.output-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; padding: 0; overflow: hidden; }
.canvas-tools {
  position: absolute; left: 50%; top: 12px; z-index: 3; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface);
  box-shadow: 0 10px 26px -14px #12181d59;
}
.tool-sep { width: 1px; height: 18px; background: var(--line); }
.zoom { display: inline-flex; align-items: center; gap: 4px; }
.zoom-value { min-width: 42px; text-align: center; color: var(--ink-muted); font: 500 11px var(--font-mono); }

.sheet { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; margin: 0; min-height: 0; }
.sheet-canvas {
  position: relative; display: grid; place-items: center; min-height: 0; padding: 58px 22px 18px; overflow: auto;
  border: 0; background-color: var(--paste);
  background-image: radial-gradient(circle, #ffffff12 1px, transparent 1px);
  background-size: 20px 20px;
}
.sheet-canvas.no-grid { background-image: none; }
.sheet-empty { display: grid; gap: 6px; max-width: 420px; padding: 24px; text-align: center; color: var(--ink-muted); }
.sheet-empty strong { color: var(--ink); }
.sheet-empty-sub { margin: 0; font-size: 12px; }
.drawing { display: grid; place-items: center; padding: 16px; transform-origin: center; background: #fff; box-shadow: 0 18px 40px -26px #12181d73; }
.drawing svg { display: block; width: auto; height: auto; max-width: 100%; max-height: min(72svh, 780px); }
.drawing.show-panels svg #panels > * { fill-opacity: 1; }
.shot { max-width: 100%; max-height: 68vh; border-radius: var(--r-1); }
.frames-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; padding: 14px; }
.frames-out figure { margin: 0; display: grid; gap: 6px; }
.frames-out img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-1); }
.frames-out figcaption { color: var(--ink-muted); font: 500 11px var(--font-mono); }

/* two versions of one drawing, side by side or one over the other */
.compare-bar {
  position: absolute; left: 50%; top: 58px; z-index: 3; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 5px 8px;
  border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); box-shadow: 0 10px 26px -14px #12181d59;
}
.compare-bar label { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font: 500 11px var(--font-mono); }
.compare-bar select { width: auto; height: 26px; }
.compare-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; place-items: center; }
.compare-view > * { display: grid; place-items: center; width: 100%; padding: 12px; background: #fff; box-shadow: 0 18px 40px -26px #12181d73; }
.compare-view svg { display: block; width: auto; height: auto; max-width: 100%; max-height: min(64svh, 700px); }
.compare-view[data-mode="overlay"] { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.compare-view[data-mode="overlay"] > * { grid-area: 1 / 1; }
.compare-view[data-mode="overlay"] > :last-child { background: transparent; box-shadow: none; opacity: .6; }
.compare-view[data-mode="overlay"] > :last-child svg * { stroke: var(--accent); }
.compare-view[data-mode="overlay"] > :last-child svg #panels * { fill: none; }

.progress { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; background: #28292ceb; }
.steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 13px; }
.steps li { display: flex; align-items: center; gap: 9px; }
.steps li::before { content: '·'; width: 14px; text-align: center; color: var(--line-strong); }
.steps li.is-active { color: var(--ink); font-weight: 600; }
.steps li.is-active::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
.steps li.is-done::before { content: '✓'; color: var(--ok); }
.spinner { display: inline-block; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
.progress .spinner { width: 22px; height: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-label { margin: 0; color: var(--ink); font-weight: 600; }
.elapsed { margin: 0; color: var(--ink-muted); font: 500 12px var(--font-mono); }
.slow { margin: 0; color: var(--ink); font-size: 12px; }

.title-block { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); background: var(--surface); }
.title-block div { min-width: 0; padding: 8px 11px; border-left: 1px solid var(--line); }
.title-block div:first-child { border-left: 0; }
.title-block span { display: block; color: var(--ink-muted); font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.title-block strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.title-block.cols-render { grid-auto-flow: row; grid-template-columns: 1.4fr 1.6fr .8fr .7fr; }
.title-block.cols-product { grid-auto-flow: row; grid-template-columns: 1.2fr 1.8fr .8fr .7fr .7fr; }

.after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; color: var(--ink-muted); font-size: 12px; }
.after .btn { height: 28px; color: var(--ink-muted); font-size: 12px; font-weight: 500; }
.failure { margin: 0; padding: 11px 13px; border: 1px solid #ff807866; border-radius: var(--r-1); background: #ff807814; color: #ffc4be; }
.failure button { margin-left: 10px; border: 0; background: transparent; color: var(--danger); font-weight: 700; text-decoration: underline; }
.output-panel > .failure { margin: 0 14px 14px; }

/* what came before: versions of a part, generations of a page */
.versions {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0;
  padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
}
.versions-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 3px; }
.version-count { color: var(--ink-muted); font: 500 11px var(--font-mono); }
.versions ul { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.version { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: var(--r-1); }
button.version { width: 100%; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.version-thumb { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-1); background: #fff; }
.version-text { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 7px; min-width: 0; }
.version-note { grid-column: 1 / -1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.version-note.is-plain { font-style: italic; }
.version-no { font: 500 12px var(--font-mono); color: var(--accent); }
.version-time, .version-from { color: var(--ink-muted); font: 500 11px var(--font-mono); }
.version:hover { border-color: var(--line); }
.version.is-active { background: var(--accent-wash); }
.version button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; }
.versions .hint { margin: 0; padding: 0 3px; }
.export { position: relative; }
.versions .export { display: grid; gap: 8px; }
.versions .export .btn { width: 100%; justify-content: center; }
.versions .menu { right: 0; bottom: calc(100% + 6px); top: auto; transform-origin: bottom right; }

.ver { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 11px; align-items: center; width: 100%; padding: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; }
.ver.is-active { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.ver img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ver img.cover { object-fit: cover; }
.ver b { color: var(--accent); font: 500 12px var(--font-mono); }
.ver time { margin-left: 6px; color: var(--ink-muted); font: 500 11px var(--font-mono); }
.ver p { margin: 2px 0 0; overflow: hidden; color: var(--ink-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ver-actions { display: flex; gap: 4px; margin-top: 6px; }
.mini { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink-muted); font-size: 11px; font-weight: 500; }
.mini .i { width: 13px; height: 13px; }

/* ---------- the generation pages ---------- */
.slot {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--page);
}
.slot-image { width: 112px; height: 132px; padding: 8px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.slot[data-fit="cover"] .slot-image { padding: 0; object-fit: cover; }
.slot-name { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.slot-meta { display: block; margin: 2px 0 10px; color: var(--ink-muted); font: 500 11px var(--font-mono); }
.slot-note { display: none; }
.slot-note .i { width: 22px; height: 22px; color: var(--accent); }
.slot-note strong { color: var(--ink); font-size: 13px; }
.slot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.slot[data-state="empty"] { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 26px 16px; border: 1.5px dashed var(--line-strong); background: transparent; text-align: center; }
.slot[data-state="empty"] .slot-image, .slot[data-state="empty"] .slot-name, .slot[data-state="empty"] .slot-meta { display: none; }
.slot[data-state="empty"] .slot-note { display: grid; justify-items: center; gap: 6px; margin-bottom: 8px; color: var(--ink-muted); font-size: 12px; }
.slot[data-state="empty"] .slot-actions { justify-content: center; }
.slot.is-dragging { border-color: var(--accent); background: var(--accent-wash); }

.enrich {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--accent); font: 500 11.5px/1 var(--font-ui);
}
.enrich .i { width: 13px; height: 13px; }
.enrich[aria-busy="true"] { color: var(--ink-muted); cursor: progress; }
.enrich:disabled:not([aria-busy="true"]) { opacity: .45; cursor: not-allowed; }
.enrich[aria-busy="true"] .i { animation: spin .7s linear infinite; }
.undo { padding: 0; border: 0; background: transparent; color: var(--ink-muted); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.enrich-message { margin: 0; color: var(--danger); font-size: 12px; }
.prompt-text[readonly] { color: var(--ink-muted); }
.prompt-text { min-height: 96px; field-sizing: content; }

.adv { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--page); }
.adv summary { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 11px; color: var(--ink-muted); font: 500 12px var(--font-ui); cursor: pointer; list-style: none; }
.adv summary::-webkit-details-marker { display: none; }
.adv summary .i { width: 15px; height: 15px; }
.adv-sum { margin-left: auto; color: var(--ink-muted); font: 500 11px var(--font-mono); }
.adv .chev { width: 14px; height: 14px; transition: transform 160ms var(--ease-out); }
.adv[open] .chev { transform: rotate(180deg); }
.adv[open] summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.adv-body { display: grid; gap: 14px; padding: 13px 11px 14px; }
.adv-body .chip { height: 26px; padding: 0 10px; }

.ghost { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 260px; }
.ghost img { width: 100%; height: 100%; max-height: 60vh; object-fit: contain; opacity: .15; filter: grayscale(1); }
.ghost .note { position: absolute; left: 50%; bottom: 15%; translate: -50% 0; max-width: 34ch; text-align: center; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.ghost .note b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 14px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; width: 100%; max-width: 920px; align-content: center; transform-origin: center; }
.shots[data-n="1"] { grid-template-columns: minmax(0, 520px); justify-content: center; }
.shots[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.shots[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; }
.shots img, .source-img { width: 100%; min-width: 0; max-height: min(66svh, 720px); object-fit: contain; border: 1px solid var(--line); background: #fff; }
/* Buket, 2026-09-29: a tall picture in a wide cell showed white bands either side - the frame hugs the
   picture instead, whatever its ratio */
.shots img { width: auto; max-width: 100%; height: auto; justify-self: center; align-self: center; }
.source-img { display: none; }
.sheet-canvas[data-state="empty"] .shots { display: none; }
.sheet-canvas[data-state="ready"] .ghost { display: none; }
.sheet-canvas[data-view="single"] .shots { grid-template-columns: minmax(0, 560px); justify-content: center; }
.sheet-canvas[data-view="single"] .shots > :not(:first-child) { display: none; }
.sheet-canvas[data-view="compare"] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 14px; }
.sheet-canvas[data-view="compare"] .source-img { display: block; }
.sheet-canvas[data-view="compare"] .shots { grid-template-columns: minmax(0, 1fr); }
.sheet-canvas[data-view="compare"] .shots > :not(:first-child) { display: none; }
/* "önce · sonra" on Ürün görseli / Fotoğraf stüdyosu: the source photo instead of the grid of results */
.sheet-canvas[data-view="before"] .shots { display: none; }
.sheet-canvas[data-view="before"] .source-img { display: block; max-width: 560px; margin: 0 auto; }

/* what the generation shell paints on top of that skeleton: the framed sheet (dashed until there is a picture),
   the faded title block, and the rows of the list of what came before */
.gen .sheet { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 22px 46px -28px #12181d66; }
.gen .sheet:has(> .sheet-canvas[data-state="empty"]) { border-style: dashed; box-shadow: none; }
.sheet-canvas[data-state="empty"] + .title-block { opacity: .45; }
li > .ver-actions { margin: 2px 0 8px 74px; }
.ver { cursor: pointer; }
.mini[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.mini[aria-pressed="true"] .i { fill: currentColor; }

/* ---------- the pattern screen: one tile, or the repeat that shows whether the edges meet ---------- */
/* a tile is cut to whole repeats of its motif on the server, so it need not be square: 'auto' keeps its shape */
.tile { width: min(520px, 100%); aspect-ratio: 1; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid var(--line); }
.tile.is-repeat { width: min(558px, 100%); background-size: 33.333% auto; background-position: 0 0; background-repeat: repeat; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { position: relative; width: 44px; height: 34px; }
.swatch input[type="color"] {
  width: 100%; height: 100%; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: none; cursor: pointer;
}
.swatch-remove {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  color: var(--ink-muted); font-size: 11px; line-height: 1;
}
.swatch-remove:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 1340px) {
  .part { grid-template-columns: 300px minmax(0, 1fr); }
  .versions { grid-column: 1 / -1; grid-template-rows: auto auto auto auto; }
  .versions ul { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
@media (max-width: 1000px) {
  .part { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .part-head { flex-wrap: wrap; }
  .sheet-canvas { min-height: 320px; }
  .gen-sub { flex: 1 1 100%; margin-left: 0; }
  .title-block.cols-render, .title-block.cols-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block.cols-render div:nth-child(odd), .title-block.cols-product div:nth-child(odd) { border-left: 0; }
}
@media (max-width: 620px) {
  .canvas-tools { width: calc(100% - 24px); justify-content: space-between; flex-wrap: wrap; }
  .compare-bar { flex-wrap: wrap; width: calc(100% - 24px); }
  .sheet-canvas { padding-top: 96px; }
  .sheet-canvas[data-view="compare"] { grid-template-columns: minmax(0, 1fr); }
  .shots[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- v7: the part screen, laid out like Illustrator ----------
   a part bar across the top; the pasteboard with the white artboard and the versions along its foot;
   one side panel on the right for what to change. Scoped to #part: the generation pages keep their own. */
#part.part {
  grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); gap: 0;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
}
#part .part-head {
  gap: 10px; min-height: 48px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface);
}
#part .part-name { font-size: 16px; height: 32px; }
#part .tools { margin-left: 8px; }
#part .pager { margin-left: auto; }
#part .export { display: flex; gap: 6px; margin-left: 12px; }
#part .pager[hidden] + .export { margin-left: auto; }
#part .export .btn { height: 30px; }
#part .export .menu { top: calc(100% + 6px); right: 0; }

#part .output-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto; border: 0; border-radius: 0; background: var(--paste);
}
#part .sample-banner { margin: 10px 14px 0; }
/* every row placed by hand: auto-placement put the sheet in the 'auto' row whenever the banner was hidden,
   so with no drawing yet the sheet was only its padding tall and the progress overlay sat on the toolbar */
#part .sample-banner { grid-row: 1; }
#part .sheet { grid-row: 2; min-height: 0; }
#part .output-panel > .failure { grid-row: 3; }
#part .output-panel > .versions { grid-row: 4; }
#part .sheet-canvas { padding: 64px 28px 28px; overflow: auto; }
#part .canvas-tools { top: 12px; }
#part .sample-banner:not([hidden]) ~ .canvas-tools { top: 56px; }

/* the artboard: white paper, the drawing on it, the title block along its foot; zoomed as one */
.artboard {
  position: relative; display: grid; justify-items: center; background: #fff; transform-origin: center top;
  box-shadow: 0 1px 0 #00000026, 0 18px 40px -20px #000000b3; transition: transform var(--dur-ui) var(--ease-out);
}
.artboard:not(:has(> .drawing:not([hidden]), > .compare-view:not([hidden]), > .shot:not([hidden]), > .frames-out:not([hidden]))) { display: none; }
#part .drawing { padding: 26px 30px 18px; background: transparent; box-shadow: none; }
#part .drawing svg { max-height: min(calc(100dvh - 400px), 820px); }
#part .compare-view > * { box-shadow: none; }
#part .shot { max-height: calc(100dvh - 360px); border-radius: 0; }
#part .title-block { width: 100%; border-top: 1px solid #1a1c1e24; background: transparent; color: #1a1c1e; }
#part .title-block div { border-left-color: #1a1c1e1f; }
#part .title-block span { color: #5d646b; }
/* ızgara: a tenth-of-the-drawing grid and the centre axis laid over the drawing, never under it */
#part .drawing { position: relative; }
.artboard.show-grid .drawing::after {
  content: ''; position: absolute; inset: 26px 30px 18px; pointer-events: none;
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), #2f7fd0b3 calc(50% - .5px), #2f7fd0b3 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to right, #6ea9e340 1px, transparent 1px),
    linear-gradient(to bottom, #6ea9e340 1px, transparent 1px);
  background-size: 100% 100%, 10% 10%, 10% 10%;
  border: 1px solid #6ea9e340;
}

/* pins: red, like the pattern maker's correction pen, and the only red on the sheet */
.pin-layer { position: absolute; inset: 0; pointer-events: none; }
.pin-marker {
  position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: -24px 0 0 -2px; padding: 0;
  border: 2px solid #fff; border-radius: 50% 50% 50% 2px; background: #d43d22; color: #fff; pointer-events: auto;
  box-shadow: 0 3px 8px -2px #00000073; transform: rotate(-45deg); transform-origin: 2px 22px; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.pin-marker span { transform: rotate(45deg); font: 700 11px/1 var(--font-ui); }
.pin-marker:hover { transform: rotate(-45deg) scale(1.12); }
.sheet-canvas.is-pinning .drawing { cursor: crosshair; }
.sheet-canvas.is-pinning .drawing > svg { outline: 1.5px dashed #d43d2280; outline-offset: 6px; }
.pin-pop {
  position: absolute; z-index: 5; display: grid; gap: 8px; width: 260px; padding: 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop);
}
.pin-where { color: var(--ink-muted); font-size: 11.5px; }
.pin-pop textarea { min-height: 54px; font-size: 13px; }
.pin-pop-actions { display: flex; justify-content: flex-end; gap: 6px; }
/* a pin on an area: the box the designer dragged round it, in the same correction red */
.pin-area { position: absolute; border: 1.5px dashed #d43d22; border-radius: 3px; background: #d43d2214; pointer-events: none; }
.pin-area.is-new { background: #d43d2226; }

/* the versions: a strip along the foot of the pasteboard, never deleted, always in sight */
#part .versions {
  grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 12px;
  padding: 10px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface);
}
#part .versions-head { display: grid; gap: 2px; padding: 0; }
#part .versions-head h3 { font: 600 12.5px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
#part .version-count { display: none; }
.versions-sub { color: var(--ink-muted); font-size: 11.5px; }
#part .versions .hint { grid-column: 2; }
#part #versionList { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
#part .version { flex: none; grid-template-columns: 46px minmax(0, 1fr); width: 230px; padding: 5px 8px 5px 5px; border: 1px solid var(--line); background: var(--raise); }
#part .version.is-active { border-color: var(--accent); background: #2c3440; box-shadow: none; }
#part .version-thumb { width: 46px; height: 46px; border: 0; border-radius: 4px; }
#part .version-note { color: var(--ink); }
#part .version-note.is-plain { color: var(--ink-muted); }
#part .output-panel > .failure { margin: 0 14px 10px; }

/* the side panel: pins first, then the note and the run, then where it came from and where it lives */
#part .input-panel {
  gap: 0; padding: 0; overflow-y: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0;
}
#part .input-panel > * { margin: 0 16px; }
#part .input-panel > .field, #part .input-panel > .quiet, #part .input-panel > .summary { margin-top: 12px; }
#part .input-panel > .generate { margin-top: 14px; }
#part .input-panel > .generate-again { margin-top: 6px; }
#part .input-panel > #versionsNote { margin-top: 10px; margin-bottom: 16px; }
#part .input-panel > #productFields, #part .input-panel > #shootFields { display: grid; gap: 12px; margin-top: 16px; margin-bottom: 16px; }
#part .input-panel > #productFields[hidden], #part .input-panel > #shootFields[hidden] { display: none; }
.side-sec { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
#part .input-panel > .side-sec:first-of-type { padding-top: 16px; }
#part .input-panel > .side-sec + .side-sec, #part .input-panel > #versionsNote + .side-sec { border-top: 1px solid var(--line); }
#part .input-panel > .side-sec:last-child { border-bottom: 0; }
.side-sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.side-sec-head h3 { margin: 0; }
.side-sec-aux { color: var(--ink-muted); font-size: 11.5px; }
.pin-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pin-list:empty { display: none; }
.pin-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--raise); font-size: 12.5px; }
.pin-no { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #d43d22; color: #fff; font: 700 11px/1 var(--font-ui); }
.pin-text small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 11.5px; }
.pin-list .icon-btn { width: 22px; height: 22px; }
.pin-add { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 7px; background: transparent; color: var(--ink-muted); font-size: 12.5px; text-align: left; }
.pin-add kbd { margin-left: auto; }
.pin-add:hover:not(:disabled) { border-color: #d43d2299; color: var(--ink); }
.pin-add[aria-pressed="true"] { border-style: solid; border-color: #d43d2299; background: #d43d2226; color: #ffb4a4; }
#stitch { display: flex; }
#stitch button { flex: 1; white-space: nowrap; }
.delete-part { justify-self: start; padding: 0; color: var(--ink-muted); }
.delete-part:hover:not(:disabled) { border-color: transparent; color: var(--danger); }

@media (max-width: 1000px) {
  #part.part { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; }
  #part .part-head { flex-wrap: wrap; padding: 8px 12px; }
  #part .export { margin-left: 0; }
  #part .sheet-canvas { min-height: 360px; padding: 96px 12px 16px; }
  #part .input-panel { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  #part .versions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- v7: the generation pages and the intake, in the part screen's grammar ----------
   the table in the middle, the settings on the right, what came before along the foot of the table */
.part.gen {
  grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
}
.gen .part-head { grid-column: 1 / -1; grid-row: 1; min-height: 48px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.gen .gen-title { font-size: 16px; }
.gen .input-panel { grid-column: 2; grid-row: 2 / 4; gap: 14px; padding: 16px; overflow-y: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.gen .output-panel { grid-column: 1; grid-row: 2; border: 0; border-radius: 0; background: var(--paste); }
.gen .output-panel .sheet { height: 100%; border: 0; background: transparent; box-shadow: none; }
.gen .sheet:has(> .sheet-canvas[data-state="empty"]) { border: 0; }
.gen .sheet-canvas { padding: 64px 28px 24px; }
.gen .title-block { border-top: 1px solid var(--line); background: var(--surface); }
.gen .versions {
  grid-column: 1; grid-row: 3; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 12px;
  padding: 10px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface);
}
.gen .versions-head { display: grid; gap: 2px; padding: 0; }
.gen .versions-head h3 { font: 600 12.5px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.gen .versions .hint { margin: 0; }
.gen .versions ul { display: flex; gap: 8px; overflow-x: auto; }
.gen .versions ul li { flex: none; width: 260px; }
.gen .ver { border: 1px solid var(--line); background: var(--raise); }
.gen .ver.is-active { border-color: var(--accent); background: #2c3440; box-shadow: none; }
.gen li > .ver-actions { margin: 4px 0 0; }
.gen .versions .export { display: block; grid-column: 3; grid-row: 1; }
.gen .versions .hint, .gen .versions ul { grid-column: 2; grid-row: 1; }
.gen .versions .export .btn { width: auto; }
/* the empty sheet says what will appear, without borrowing a marketing photo */
.ghost { min-height: 300px; border: 1.5px dashed #ffffff29; border-radius: 4px; }
.ghost .note { position: static; translate: none; max-width: 36ch; }

/* the pattern screen: the tile on the table, its versions under it inside the same panel */
#patternScreen .output-panel { grid-row: 2 / 4; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
#patternScreen .output-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
#patternScreen .output-head .canvas-tools { position: static; translate: none; }
#patternScreen .output-panel .versions { padding: 10px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); }
#patternScreen #patternVersionList { display: flex; gap: 8px; overflow-x: auto; }
#patternScreen .version { flex: none; width: 230px; border: 1px solid var(--line); background: var(--raise); }
#patternScreen .input-panel h2 { font-size: 14px; }

/* Teknik çizim oluştur: the photo's board and the two sheets the drawing will fill */
#flatScreen .versions { display: none; }
#flatScreen .output-panel { grid-row: 2 / 4; }
.intake-boards { display: flex; align-items: flex-start; justify-content: center; gap: 28px; padding: 56px 28px; overflow: auto; }
.intake-boards .board { position: relative; display: grid; flex: 0 1 300px; min-width: 200px; }
.intake-boards .board-name { position: absolute; left: 0; top: -20px; color: var(--ink-muted); font: 500 11px var(--font-mono); }
.ref-drop {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1.5px dashed #ffffff40; border-radius: 2px; background: #ffffff06; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.ref-drop:hover, #flatScreen:has(.slot.is-dragging) .ref-drop { border-color: var(--accent); background: var(--accent-wash); }
.ref-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intake-boards[data-state="filled"] .ref-drop { border: 0; background: #fff; box-shadow: 0 18px 40px -20px #000000b3; }
.intake-boards[data-state="filled"] .drop-note { display: none; }
.drop-note { display: grid; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: var(--ink-muted); font-size: 12px; }
.drop-note b { color: var(--ink); font-size: 14px; }
.drop-note .i { width: 22px; height: 22px; color: var(--ink-muted); }
.ghost-board { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px dashed #ffffff26; color: var(--ink-muted); font-size: 12px; }

@media (max-width: 1000px) {
  .part.gen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; height: auto; }
  .gen .input-panel { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .gen .output-panel { grid-row: 2; }
  .gen .versions { grid-row: 4; grid-template-columns: minmax(0, 1fr); }
  #flatScreen .output-panel { grid-row: 2; }
  #flatBoards { display: none; }                 /* the side panel's own drop zone is the one a phone needs */
  #flatScreen .output-panel { display: none; }
}

/* ---------- feel ---------- */
.chip, .tool-tab, .version, .swatch-remove, .slot, .enrich, .mini, .ver {
  transition: transform var(--dur-press) var(--ease-out), border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow var(--dur-ui) var(--ease-out);
}
.chip:active, .swatch-remove:active, .enrich:active, .mini:active { transform: scale(.97); }
.counter, .zoom-value, .elapsed, .version-no, .version-time, .title-block strong, .card-meta { font-variant-numeric: tabular-nums; }

/* the active tool is a line that grows from its own centre, not a border that blinks on */
.tool-tab { position: relative; }
.tool-tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform 160ms var(--ease-out);
}
.tool-tab.is-active { border-bottom-color: transparent; }
.tool-tab.is-active::after { transform: scaleX(1); }
.version.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.progress { transition: opacity var(--dur-ui) var(--ease-out); }
.version { transition-property: transform, opacity, border-color, background-color, box-shadow; transition-duration: 200ms; transition-timing-function: var(--ease-out); }
@starting-style {
  .progress { opacity: 0; }
  .version { opacity: 0; transform: translateY(4px); }
}

/* the one authored moment: after a minute or two of waiting, the drawing comes into focus */
.drawing svg, .shot, .frames-out img, .shots img, .tile {
  transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
}
@starting-style {
  .drawing svg, .shot, .frames-out img, .shots img, .tile { opacity: 0; filter: blur(6px); }
}

@media (hover: hover) and (pointer: fine) {
  .enrich:hover { border-color: var(--accent); background: var(--accent-wash); }
  .undo:hover { color: var(--ink); }
  .mini:hover { border-color: var(--accent); color: var(--accent); }
  .ver:hover { background: #ffffff08; }
}
@media (prefers-reduced-motion: reduce) {
  .steps li.is-active::before, .enrich[aria-busy="true"] .i { animation: none; }
  .chip, .tool-tab, .tool-tab::after, .version, .swatch-remove, .slot, .enrich, .mini, .ver { transition-property: opacity, border-color, background-color, color; }
  .chip:active, .swatch-remove:active, .enrich:active, .mini:active { transform: none; }
  .drawing svg, .shot, .frames-out img, .shots img, .tile { transition: opacity 200ms ease; filter: none; }
}

/* Kırp: the photo with a box dragged round the garment to draw; everything outside it is dimmed */
.crop-dialog { width: min(92vw, 720px); }
.crop-stage { position: relative; width: fit-content; margin: 0 auto 16px; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.crop-stage img { display: block; max-width: 100%; max-height: 62vh; }
.crop-box { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px #000000a6; pointer-events: none; }

/* the grip that moves a floating canvas toolbar; double-click puts the bar back */
.tool-grip {
  align-self: stretch; width: 10px; margin: 2px 0 2px 2px; border-radius: 3px; cursor: grab; touch-action: none;
  background-image: radial-gradient(circle, var(--ink-muted) 1px, transparent 1.3px); background-size: 5px 5px; opacity: .6;
}
.tool-grip:hover { opacity: 1; }
.canvas-tools.is-moving { cursor: grabbing; }
.canvas-tools.is-moving .tool-grip { cursor: grabbing; }

/* small picture rows: a pattern's reference, a shoot's outfit pieces and model */
.pattern-ref, .thumb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pattern-ref label.btn, #outfitAddShoot, #modelAddShoot { position: relative; justify-self: start; }
.pattern-ref-image, .thumb img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-1); background: #fff; }
.thumb { position: relative; margin: 0; }
.thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); }
.thumb-x .i { width: 11px; height: 11px; }
.thumb-row:empty { display: none; }