/* Artwork belongs to the palette, in ordinary document flow. */
.colorways-page .colorway-controls { margin-bottom:14px; }
.colorways-page .palette-action { margin:0 0 20px; padding:0; }
.palette-action-surface { position:relative; }
.palette-action .palette-action-canvas { display:block; width:100%; height:auto; aspect-ratio:8/5; }
.palette-action[data-overview="true"] .palette-action-canvas { visibility:hidden; }
.palette-action-meta { display:grid; grid-template-columns:minmax(64px,1fr) minmax(0,152px) minmax(64px,1fr); align-items:center; gap:2px; min-height:52px; }
.palette-action-choice { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; width:100%; align-items:center; }
.palette-action-controls { display:flex; align-items:center; gap:0; min-width:0; }
.palette-action-save { position:relative; justify-content:flex-end; }
.palette-action-meta button { min-width:28px; min-height:44px; padding:0; font:inherit; font-size:12px; color:var(--ink); background:none; border:0; cursor:pointer; touch-action:manipulation; }
.palette-action-controls button { flex:none; }
.palette-action-controls>button { width:32px; }
.palette-action-meta svg { display:block; width:16px; height:16px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.palette-action-meta .palette-action-picker { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; }
.palette-action-picker span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palette-action-exports:not([hidden]) { display:flex; flex-direction:column; position:absolute; right:32px; bottom:100%; z-index:2; min-width:128px; padding:4px; background:var(--paper,#f4f0ec); border:1px solid color-mix(in srgb,var(--ink) 24%,transparent); box-shadow:0 4px 20px #0002; }
.palette-action-exports button { width:100%; padding:0 14px; text-align:left; white-space:nowrap; }
.palette-action-meta [data-action-save] { position:relative; }
.palette-action-meta [data-action-save][data-state="recording"]::after,.palette-action-meta [data-action-save][data-state="ready"]::after { content:''; position:absolute; top:8px; right:4px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.palette-action-meta button:hover { opacity:.65; }
.palette-action-meta button:disabled { opacity:.35; cursor:default; }
.palette-action-meta button:focus-visible,.palette-action-tile:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
.palette-action-overview:not([hidden]) { display:grid; position:absolute; inset:0; grid-template-columns:repeat(var(--action-columns,4),minmax(0,1fr)); grid-template-rows:repeat(var(--action-rows,4),minmax(44px,1fr)); gap:6px; padding:2px; overflow:auto; }
.palette-action-tile { display:grid; grid-template-rows:minmax(0,1fr) 24px; min-width:0; min-height:44px; padding:3px; gap:2px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; font:inherit; }
.palette-action-tile[aria-pressed="true"] { border-color:currentColor; }
.palette-action-tile:hover { border-color:currentColor; }
.palette-action-tile canvas { display:block; width:100%; height:100%; min-height:0; }
.palette-action-tile span { align-self:center; font-size:10px; line-height:12px; text-align:center; }
.palette-action-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.palette-action-status { font-size:12px; line-height:1.5; opacity:.65; margin:0 0 8px; }
.palette-action-status:empty { display:none; }
@media(max-width:700px) {
  .palette-action .palette-action-canvas { aspect-ratio:7/8; }
}