/* Approved ivory-tile atelier. Controls remain native, independent of the art. */
@font-face {
  font-family: FlowerHandwritten;
  src: url('/assets/fonts/FlowerHand-Regular.ttf?v=4eb625265de2') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #8e4b37;
  --soft: #b88875;
  --line: #bd856b4d;
  --cream: #fffdf8;
  font-family: FlowerHandwritten, FlowerSoft, sans-serif;
  letter-spacing: .025em;
  background: #f5f0e8;
}
body { background: #f5f0e8; }
.atelier {
  --frame: min(100vw, calc(100dvh * .665), 720px);
  width: var(--frame);
  min-height: max(100dvh, calc(var(--frame) * 1.5));
  color: var(--ink);
  background: #faf6ef url('/assets/ui-v19/atelier-background.svg?v=1') center / 100% 100% no-repeat;
}
.atelier[data-page=arrange]::before, .atelier[data-page=wrap]::before { display: none; }
.paper-panel, .small-paper {
  background: #fffdf9eb url('/assets/ui-v10/paper-grain.svg') repeat;
  border-color: #c58f743d;
}
.atelier[data-page=arrange] { padding: 0; }
.atelier[data-page=arrange] .material-shelf {
  position: absolute;
  inset: 3% 7% auto;
  width: 86%;
  height: 14%;
  padding: calc(var(--frame) * .025) calc(var(--frame) * .047) calc(var(--frame) * .02) calc(var(--frame) * .018);
  border-radius: calc(var(--frame) * .045);
}
.flower-track { gap: calc(var(--frame) * .007); }
.flower-card, .flower-card:nth-child(2n), .flower-card:nth-child(3n) {
  flex-basis: calc((100% - 6 * var(--frame) * .007) / 6.6);
  font-size: clamp(12px, calc(var(--frame) * .033), 24px);
  line-height: 1.2;
  padding: 0;
  color: var(--ink);
}
.card-art { height: calc(100% - var(--frame) * .042); margin-bottom: calc(var(--frame) * .007); }
.card-art img { width: 110%; height: 100%; }
.flower-card > span:last-child { line-height: 1.2; }
.flower-card.active > span:last-child { text-decoration-color: #a96e5866; }
.shelf-next {
  right: 1.5%;
  width: calc(var(--frame) * .047);
  height: calc(var(--frame) * .078);
  border-color: #c58f744d;
  background: #fffdf7aa;
  border-radius: 40%;
}
.shelf-next .icon { width: 100%; height: 60%; stroke-width: 1.3; }
.atelier[data-page=arrange] .editor {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid #b8755b80;
  border-radius: calc(var(--frame) * .03);
  background: #fffdf9ec;
}
.editor .tool-row { flex: 0 1 auto; height: auto; min-height: 0; grid-template-columns: 1fr; overflow-y: auto; scrollbar-width: thin; }
.editor .drawing-tool {
  height: max(36px, calc(var(--frame) * .073));
  min-height: 36px;
  gap: 4px;
  font-size: clamp(12px, calc(var(--frame) * .029), 18px);
  padding: 3px 0;
  border-radius: 8px;
}
.editor .tool-icon { width: 15px; height: 15px; stroke-width: 1.6; }
.editor .tool-row > :not(:last-child)::after { content: ''; position: absolute; top: auto; bottom: 0; left: 8px; right: 8px; width: auto; height: 1px; background: #c58f7426; transform: none; pointer-events: none; }
.editor .drawing-tool.active, .editor .drawing-tool.is-toggled { background: #e9d9cd40; }
.editor .inline-adjustment { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; min-width: 0; min-height: max(36px, calc(var(--frame) * .073)); border-radius: 8px; font-size: clamp(12px, calc(var(--frame) * .029), 18px); }
.editor .adjust-label { min-width: 0; text-align: center; white-space: nowrap; line-height: 1.2; }
.editor .adjust-step { display: grid; place-items: center; width: 28px; min-width: 28px; min-height: 36px; padding: 0; border-radius: 6px; font-size: 18px; line-height: 1; letter-spacing: 0; }
.editor .adjust-step:disabled { opacity: .28; }
.atelier[data-page=arrange] .workbench {
  position: absolute;
  top: 27.5%; left: 7%;
  width: 86%; height: 58%;
  margin: 0;
}
.atelier[data-page=arrange] .workbench .scene {
  inset: auto auto 0 -2%;
  width: 100%; height: auto;
  aspect-ratio: 600 / 620;
  overflow: visible;
}
.flower-selection { opacity: 0; }
.scene.dragging .flower-selection { opacity: .35; }
.flower-art { pointer-events: visiblePainted; }
.layers-panel {
  top: 3.2%; right: -.4%;
  width: 17.5%; min-width: 54px;
  max-height: 81%;
  padding: calc(var(--frame) * .014) calc(var(--frame) * .009) calc(var(--frame) * .009);
  border: 1px solid #b8755b80;
  border-radius: calc(var(--frame) * .03);
  background: #fffdf9f2;
}
.layers-heading { padding: 0 1px calc(var(--frame) * .012); }
.layers-heading strong { font-size: clamp(14px, calc(var(--frame) * .034), 25px); }
.layers-heading > button { min-width: 18px; min-height: 23px; }
.layers-heading .icon { width: calc(var(--frame) * .021); height: calc(var(--frame) * .021); }
.layer-list { max-height: calc(var(--frame) * .63); padding: 0; scrollbar-width: thin; scrollbar-color: #d4b7a666 transparent; }
.layer-row { height: calc(var(--frame) * .088); min-height: 34px; border: 1px solid #c58f742b; border-radius: calc(var(--frame) * .023); margin-bottom: 2px; }
.layer-row.selected { border-color: #c58f744d; background: #eee1d733; }
.layer-row:last-child { border-bottom: 1px solid #c58f742b; }
.layer-grip { width: calc(var(--frame) * .025); min-height: 30px; opacity: .65; }
.layer-grip .icon { width: 8px; height: 15px; }
.layer-select { min-height: 30px; height: 100%; }
.layer-select img { width: calc(var(--frame) * .065); height: 90%; }
.layer-toggle { top: 3.2%; right: 0; border-color: #b8755b80; background: #fffdf9f2; }
.atelier[data-page=arrange] .bottom-bar {
  position: absolute;
  top: 89%; left: 7%;
  width: 86%; height: 7.2%;
  min-height: 0; margin: 0;
}
.stage-button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: min(clamp(140px, calc(var(--frame) * .375), 210px), calc(var(--frame) * .43 - 6px));
  min-width: 0;
  height: clamp(46px, calc(var(--frame) * .118), 66px);
  min-height: 0;
  padding: 4px 10px;
  gap: clamp(7px, calc(var(--frame) * .02), 14px);
  font-family: inherit;
  font-weight: 400;
  white-space: nowrap;
  font-size: clamp(18px, calc(var(--frame) * .047), 30px);
  line-height: 1;
  color: var(--ink);
  border: 1px solid #c58f744d;
  border-radius: clamp(9px, calc(var(--frame) * .023), 16px);
  background: #fffdf9f2 url('/assets/ui-v10/paper-grain.svg') repeat;
  background-size: 256px 256px;
  box-shadow: 0 2px 2px #a8795c14;
  letter-spacing: .04em;
  transform: none;
}
.stage-button .icon { flex: none; width: clamp(16px, calc(var(--frame) * .036), 24px); height: clamp(16px, calc(var(--frame) * .036), 24px); stroke-width: 1.5; }
.stage-button:hover:not(:disabled) { background-color: #fffefa; }
.stage-button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 1px #a8795c14; }
.history { left: -1%; bottom: 12%; gap: calc(var(--frame) * .026); }
.history button { min-width: 26px; min-height: 35px; }
.history .icon { width: calc(var(--frame) * .035); height: calc(var(--frame) * .035); }
.empty-nudge { top: 27%; left: 47%; }
.atelier[data-page=wrap] .workbench .scene { width: 100%; left: 0; bottom: calc(var(--frame) * .06); }
.atelier[data-page=wrap] .wrap-workbench { height: calc(var(--frame) * .89); flex: none; margin-top: 0; }

/* Four paper silhouettes and two independently painted material regions. */
.wrap-shelf { padding: 10px 12px 13px; }
.wrap-shelf .wrap-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  overflow: visible;
}
.wrap-shelf .wrap-card {
  min-width: 0;
  width: 100%;
  padding: 4px 0 7px;
  gap: 4px;
  font-family: inherit;
  font-size: clamp(12px, calc(var(--frame) * .032), 18px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  transform: none;
}
.wrap-shelf .wrap-card > span:nth-child(2) {
  display: block;
  width: 100%;
  height: 1.2em;
  font: inherit;
  letter-spacing: inherit;
  text-align: center;
  transform: none;
}
.wrap-shelf .wrap-mini {
  width: 100%;
  max-width: 80px;
  height: clamp(73px, calc(var(--frame) * .19), 112px);
  margin: 0;
  transform: none;
}
.wrap-shelf .paper-colors {
  display: grid;
  gap: 10px;
  margin: 6px 1px 0;
  padding-top: 10px;
  font-size: clamp(14px, calc(var(--frame) * .035), 20px);
}
.wrap-color-group { min-width: 0; }
.wrap-color-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px;
  line-height: 1.3;
}
.wrap-color-heading > span:first-child { white-space: nowrap; }
.wrap-color-region {
  font-size: .82em;
  color: var(--soft);
  text-align: right;
}
.wrap-shelf .swatches { justify-content: space-between; gap: 8px; padding: 2px 4px; }
.wrap-shelf .swatch { flex: none; width: 31px; height: 30px; }
.wrap-shelf .swatch.active::after { inset: -3px; }
.wrap-shelf .swatch .icon { width: 15px; height: 15px; color: var(--swatch-ink, var(--ink)); }
@media (max-width: 380px) {
  .wrap-shelf { padding: 9px 10px 12px; }
  .wrap-shelf .wrap-track { gap: 3px; }
  .wrap-shelf .wrap-card { font-size: 12px; }
  .wrap-shelf .paper-colors { gap: 9px; }
  .wrap-shelf .swatch { width: 29px; height: 28px; }
}
.finished-card { border-color: #fffdf9; }
.toast { background: #fffdf9; border-color: #c58f7480; }
button:focus-visible, input:focus-visible { outline: 2px solid #9f6653; outline-offset: 3px; }
@media (max-aspect-ratio: 3 / 5) {
  .atelier[data-page=arrange] .workbench { height: 56%; }
  .atelier[data-page=arrange] .workbench .scene { width: 110%; left: -7%; }
}
@media (max-aspect-ratio: 1 / 2) {
  .atelier[data-page=arrange] .workbench { height: 53%; }
  .atelier[data-page=arrange] .workbench .scene { width: 125%; left: -14.5%; }
}
@media (max-width: 380px) {
  .editor .drawing-tool { gap: 3px; }
  .editor .tool-icon { width: 13px; height: 13px; }
  .layers-panel { padding: 5px 3px; }
  .history { gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color .16s ease, opacity .16s ease; }
}

/* Keep long cultivar names within the existing flower shelf. */
.flower-card > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A single shelf entry per species, with painted color choices below it. */
.material-shelf { z-index: 25; }
.flower-colors {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: max-content;
  max-width: calc(100% - 8px);
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 2px 5px;
  border: 1px solid #c58f744d;
  border-radius: 15px 13px 16px 14px;
  background-color: #fffdf9f2;
}
.flower-colors[hidden] { display: none; }
.flower-color-options { display: flex; align-items: center; gap: 2px; }
.flower-color { display: grid; place-items: center; min-width: 42px; min-height: 40px; padding: 4px; border-radius: 8px; }
.flower-color-paint {
  position: relative;
  display: grid;
  place-items: center;
  width: 31px;
  height: 23px;
  background: linear-gradient(135deg, #ffffff50, #ffffff00 65%), url('/assets/ui-v10/paper-grain.svg') center / 95px, var(--flower-color);
  mask: url('/assets/ui-v14/watercolor-swatch.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/ui-v14/watercolor-swatch.svg') center / contain no-repeat;
  transform: rotate(-12deg);
}
.flower-color-paint .icon { width: 15px; height: 15px; color: #684e42; stroke-width: 1.8; opacity: 0; transform: rotate(12deg); }
.flower-color.active .flower-color-paint .icon { opacity: 1; }

/* Align the two compact control columns across the canvas. */
.editing-rail {
  position: absolute;
  top: 3.2%;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 94%;
  max-height: 94%;
  pointer-events: none;
}
.editor-dock, .layers-dock { max-height: 100%; }
.editor-dock { position: relative; flex: none; width: max(94px, calc(var(--frame) * .17)); height: 100%; pointer-events: none; }
.layers-dock { width: max(68px, calc(var(--frame) * .15)); pointer-events: auto; }
.editor-dock > * { pointer-events: auto; }
.editor-toggle, .editing-rail .layer-toggle {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 36px;
  padding: 6px 4px;
  border: 1px solid #b8755b80;
  border-radius: 12px 10px 12px 11px;
  font-size: clamp(13px, calc(var(--frame) * .03), 18px);
  background-color: #fffdf9f2;
}
.expand-label { font-size: 11px; color: var(--soft); }
.atelier[data-page=arrange] .editor[hidden], .editor-toggle[hidden], .editing-rail .layer-toggle[hidden] { display: none; }
.editor-heading { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 26px; padding-left: 3px; font-size: clamp(13px, calc(var(--frame) * .03), 18px); }
.editor-heading button { display: grid; place-items: center; min-width: 24px; min-height: 26px; padding: 3px; }
.editor-heading .icon { width: 11px; height: 11px; }
.editor-empty { font-size: 10px; color: var(--soft); text-align: center; padding: 4px 0; white-space: nowrap; }
.layers-dock { display: flex; flex-direction: column; min-height: 0; }
.editing-rail .layers-panel { position: relative; inset: auto; display: flex; flex-direction: column; width: 100%; min-width: 0; max-width: none; max-height: 100%; min-height: 0; padding: 6px 4px 4px; }
.editing-rail .layers-panel[hidden] { display: none; }
.editing-rail .layers-heading { flex: none; }
.editing-rail .layer-list { min-height: 0; max-height: calc(var(--frame) * .63); }
.editing-rail .layer-count { display: inline; }
.editing-rail .layers-empty { font-size: 12px; padding: 12px 0; }
.layer-select { position: relative; }
.layer-warning, .layer-warning-count {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid #bc784f;
  border-radius: 50%;
  background: #fff3d9;
  color: #a45334;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.layer-select .layer-warning { display: inline-grid; position: absolute; top: 2px; right: 1px; pointer-events: none; }
.layer-warning-count { border-radius: 8px; font-size: 10px; }
.layer-warning-count[hidden] { display: none; }
.editing-rail .layer-count[hidden] { display: none; }
.layer-row.placement-invalid { border-color: #bc784f80; }
.placement-note {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: 0;
  color: #a45334;
  font-size: clamp(11px, calc(var(--frame) * .028), 15px);
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}
.stage-button:disabled { opacity: .45; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .flower-color:hover { background: #e9d9cd33; }
  .editor .adjust-step:hover:not(:disabled) { background-color: #e9d9cd66; }
  .editor-toggle:hover, .editor-heading button:hover { background-color: #eee1d7; }
}

.editor [data-action="cycle-facing"]:disabled { filter: grayscale(1); opacity: .35; cursor: default; }

/* Fine pencil edges. Keep native border space so the artwork never moves. */
:root {
  --pencil-ink: #b13c28;
  --pencil-soft: #bc6650;
  --pencil-grain: url('/assets/ui-v19/border-grain.svg?v=2');
}
.paper-panel, .small-paper, .shelf-next, .stage-button, .layer-row,
.wrap-card.active, .wrap-card .picked, .swatch, .layer-warning,
.layer-warning-count, .toast {
  border-color: transparent;
}
.stage-button, .layer-warning-count { position: relative; }
.paper-panel, .small-paper {
  --pencil-inset: -1.25px;
  --pencil-width: clamp(1.1px, calc(var(--frame) * .0028), 2px);
  --pencil-color: var(--pencil-ink);
}
.atelier[data-page=arrange] .material-shelf, .wrap-shelf {
  border-radius: 21px 20px 21px 20px / 20px 21px 20px 21px;
}
.atelier[data-page=arrange] .editor, .editing-rail .layers-panel {
  --pencil-inset: -1px;
  border-color: transparent;
  border-radius: 16px 15px 16px 15px / 15px 16px 15px 16px;
}
.editor-toggle, .editing-rail .layer-toggle {
  --pencil-inset: -1px;
  border-color: transparent;
  border-radius: 11px 10px 11px 10px / 10px 11px 10px 11px;
}
.flower-colors {
  --pencil-inset: -1px;
  border-radius: 14px 13px 14px 13px / 13px 14px 13px 14px;
}
.shelf-next {
  --pencil-inset: -1.1px;
  --pencil-width: 1.2px;
  border-radius: 11px 10px 11px 10px / 10px 11px 10px 11px;
}
.stage-button {
  --pencil-inset: -1px;
  --pencil-width: clamp(1.1px, calc(var(--frame) * .0028), 2px);
  border-radius: 12px 11px 12px 11px / 11px 12px 11px 12px;
}
.save-button { border-radius: 12px 11px 12px 11px; }
.layer-row, .layer-row:last-child {
  --pencil-inset: -1px;
  --pencil-width: .85px;
  --pencil-color: var(--pencil-soft);
  border-color: transparent;
  border-radius: 10px 9px 10px 9px / 9px 10px 9px 10px;
}
.layer-row.selected, .layer-row.placement-invalid {
  --pencil-width: 1.1px;
  --pencil-color: var(--pencil-ink);
  border-color: transparent;
}
.wrap-card.active {
  --pencil-inset: -1px;
  --pencil-width: 1.1px;
  border-radius: 11px 10px 11px 10px / 10px 11px 10px 11px;
}
.wrap-card .picked, .layer-warning, .layer-warning-count {
  --pencil-inset: -1px;
  --pencil-width: .8px;
}
.swatch {
  --pencil-inset: -1.1px;
  --pencil-width: .9px;
  --pencil-color: var(--pencil-soft);
  border-radius: 48% 50% 46% 49% / 49% 47% 50% 48%;
}
.swatch.active { --pencil-color: var(--pencil-ink); }
.swatch.active::after {
  border-width: 1px;
  border-color: var(--pencil-ink);
  border-radius: 49% 47% 50% 48% / 47% 50% 48% 49%;
  -webkit-mask-image: var(--pencil-grain);
  mask-image: var(--pencil-grain);
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
}
.finished-card {
  --pencil-inset: -7px;
  --pencil-width: clamp(1.1px, calc(var(--frame) * .0028), 2px);
  border-radius: 13px 12px 13px 12px / 12px 13px 12px 13px;
}
.toast {
  --pencil-inset: -1px;
  --pencil-width: 1.1px;
  border-radius: 13px 12px 13px 12px;
}
.paper-panel::before, .small-paper::before, .shelf-next::before,
.stage-button::before, .layer-row::before, .wrap-card.active::before,
.wrap-card .picked::before, .swatch::before, .layer-warning::before,
.layer-warning-count::before, .finished-card::before, .toast::before {
  content: '';
  position: absolute;
  inset: var(--pencil-inset, -1px);
  z-index: 1;
  border: 0;
  box-shadow: inset 0 0 0 var(--pencil-width, 1px) var(--pencil-color, var(--pencil-ink));
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: var(--pencil-grain);
  mask-image: var(--pencil-grain);
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
}
.wrap-shelf .paper-colors { position: relative; border-top-color: transparent; }
.wrap-shelf .paper-colors::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #bc66504d;
  pointer-events: none;
}
.wrap-shelf .paper-colors::before,
.editor .tool-row > :not(:last-child)::after {
  -webkit-mask-image: var(--pencil-grain);
  mask-image: var(--pencil-grain);
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
}
.editor .tool-row > :not(:last-child)::after { background-color: #bc665059; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--pencil-ink); }

/* The finished picture and the page around it share one plain colour. */
@font-face {
  font-family: FlowerMessage;
  src: url('/assets/fonts/FlowerMessage-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
body[data-page=finish] { background: var(--finish-background, #ded8cc); }
.atelier[data-page=finish] {
  background: var(--finish-background, #ded8cc);
  color: var(--finish-ink, #493d35);
  font-family: FlowerHandwritten, FlowerMessage, sans-serif;
  --pencil-ink: var(--finish-ink, #493d35);
  --pencil-soft: var(--finish-ink, #493d35);
}
.atelier[data-page=finish] .finish-title,
.atelier[data-page=finish] .finish-actions .text-button { color: inherit; }
.atelier[data-page=finish] .save-button {
  --pencil-color: #b13c28;
  color: #8e4b37;
}
.atelier[data-page=finish] .finished-card {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--finish-background);
  box-shadow: none;
  transform: none;
}
.atelier[data-page=finish] .finished-card::before { display: none; }
.atelier[data-page=finish] .finished-card .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.atelier[data-page=finish] .bouquet-poster { display: block; width: 100%; height: 100%; }
.atelier[data-page=finish] .finished-card .scene,
.atelier[data-page=finish] .bouquet-poster,
.atelier[data-page=finish] .poster-bouquet-scene { touch-action: pan-y; }
.atelier[data-page=finish] .flower-item { touch-action: pan-y !important; cursor: default !important; }
.finish-customization { margin-top: 20px; }
.atelier[data-page=finish] .background-picker {
  display: block;
  margin: 0;
  color: inherit;
  font-size: 15px;
}
.finish-control-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.atelier[data-page=finish] .background-picker .color-name { display: inline; color: inherit; font-size: 13px; opacity: .75; }
.atelier[data-page=finish] .background-picker .swatches { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }
.atelier[data-page=finish] .background-picker .swatch { width: 28px; height: 28px; }
.atelier[data-page=finish] .background-picker .swatch .icon { color: var(--swatch-ink); }
.message-editor { display: block; margin-top: 20px; font-size: 15px; }
.message-editor textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 108px;
  padding: 12px 14px;
  border: 1px solid #b13c2866;
  border-radius: 12px 11px 12px 11px;
  background: #fffdf9ed;
  color: #493d35;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .025em;
  resize: vertical;
}
.message-editor textarea::placeholder { color: #8a786b; }
.message-editor textarea:focus-visible { outline: 1px solid var(--finish-ink, #493d35); outline-offset: 3px; }
#message-count { font-size: 12px; opacity: .7; white-space: nowrap; }
.atelier[data-page=finish] .export-note { margin-top: 12px; color: inherit; opacity: .7; line-height: 1.5; }

/* Identify the selected individual even among identical flowers. */
.layer-row.selected {
  --pencil-width: 1.5px;
  --pencil-color: var(--pencil-ink);
  background: #e8c69dcc;
}
.layer-row.selected .layer-grip { color: #a33c28; }


/* Leave a little air above the shelves and place the paper on the tabletop. */
.atelier[data-page=arrange] .material-shelf { top: calc(3% + var(--frame) * .012); }
.atelier[data-page=wrap] { padding-top: calc(var(--frame) * .07); }
.atelier[data-page=wrap] .wrap-workbench {
  position: absolute;
  top: auto;
  bottom: 19.7%;
  left: 7%;
  width: 86%;
  height: 41%;
  margin: 0;
}
.atelier[data-page=wrap] .workbench .scene { bottom: 0; }
.atelier[data-page=finish] { padding-top: calc(var(--frame) * .065); }

/* The photograph sits inside a white, preview-only paper frame. */
.atelier[data-page=finish] .finished-card {
  aspect-ratio: auto;
  padding: 10px 10px 16px;
  background: #fff;
  box-shadow: 0 2px 8px #493d351a;
}
.atelier[data-page=finish] .finished-card .scene {
  position: relative;
  inset: auto;
  top: auto; right: auto; bottom: auto; left: auto;
  height: auto;
  aspect-ratio: auto;
}
.atelier[data-page=finish] .finished-card .scene::before { content: ''; display: block; padding-top: 125%; }
.atelier[data-page=finish] .finished-card .bouquet-poster {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
}

@media (min-aspect-ratio: 1 / 2) {
  .atelier[data-page=wrap] { min-height: calc(var(--frame) * 2.35); }
}