/* Compact workspace overrides. Keep the accepted grid drawing unchanged. */
[hidden] { display: none !important; }
header { height: 64px; padding-top: 12px; padding-bottom: 12px; }
main { padding-top: 22px; }
.fieldgrid:has(#colors) { grid-template-columns: 1fr; }
.intro { padding: 12px 0 24px; text-align: left; }
.intro h1 { font-size: 28px; margin: 0 0 7px; letter-spacing: -.5px; }
.intro p { font-size: 13px; margin: 0; }
.workspace { gap: 20px; grid-template-columns: 300px minmax(0,1fr); }
aside section { padding: 20px; }
.section-title { margin-bottom: 16px; }
.section-title > span, .live-dot { display: none; }
.section-title h2 { font-size: 14px; }
.advanced { margin-top: 14px; font-size: 12px; }
.advanced summary { cursor: pointer; color: var(--green); padding: 8px 0; }
.advanced[open] > summary { margin-bottom: 10px; }
.advanced select, .advanced button { max-width: 100%; }
.upload { padding: 18px 8px; }
.upload-icon { font-size: 22px; margin-bottom: 4px; }
.canvas-editor { border-top: 1px solid var(--line); padding: 12px 18px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tool-row button, .replace-row button, #compareSource { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--green); padding: 7px 12px; font-size: 12px; }
.tool-row button[aria-pressed=true] { background: var(--green); color: white; border-color: var(--green); }
.tool-row button:disabled { opacity: .4; }
#undo { margin-left: auto; }
.replace-row { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.replace-row > div { min-width: 0; }
.replace-row label { display: block; font-size: 11px; color: #65766b; margin-bottom: 5px; }
.replace-row select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px; height: 36px; color: var(--ink); background: white; font-size: 12px; }
.replace-row > span { padding-bottom: 10px; }
.replace-row button { background: #edf4ee; font-size: 11px; max-width: 210px; }
.replace-row button:disabled { opacity: .5; }
#editHint { margin: 9px 0 0; font-size: 11px; }
.brush-status { display: none; }
.canvas-wrap { height: 460px; position: relative; }
#canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
#originalPreview { width: 100%; height: 100%; object-fit: contain; }
.color-tip { position: fixed; display: flex; align-items: center; gap: 9px; pointer-events: none; z-index: 100; background: #203d32; color: white; padding: 10px 12px; border-radius: 9px; box-shadow: 0 5px 20px #0003; font-size: 12px; max-width: calc(100vw - 16px); }
.color-tip i { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #fff8; border-radius: 5px; }
.color-tip small { display: block; margin-top: 4px; opacity: .8; font-size: 10px; }
.palette-card { padding-top: 20px; }
.stats { margin: 14px 0; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 950px) {
  .workspace { grid-template-columns: 260px minmax(0,1fr); }
  .replace-row { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); }
  .replace-row button { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 760px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
  .intro { padding-bottom: 14px; }
  .intro h1 { font-size: 24px; }
  aside section { padding: 16px; }
  .canvas-editor { padding: 12px; }
  .canvas-wrap { height: 350px; padding: 12px; }
  .tool-row button { padding: 7px 9px; }
  .zoom-bar { gap: 8px; }
  #compareSource { font-size: 11px; padding: 6px; }
  .preview-top { flex-wrap: wrap; gap: 10px; }
}

#viewport { touch-action: none; }
/* Visible swatches in both the selected value and every dropdown option. */
.color-control { position: relative; min-width: 0; }
.replace-row .color-choice { display:flex; align-items:center; gap:8px; width:100%; max-width:none; padding:7px 9px; background:white; color:var(--ink); font-size:12px; text-align:left; }
.color-choice i, .color-option i, .outline-color i { display:inline-block; width:22px; height:22px; border:1px solid #0003; border-radius:5px; flex-shrink:0; }
.color-choice small { margin-left:auto; }
.color-menu { position:absolute; top:calc(100% + 6px); left:0; width:290px; max-width:calc(100vw - 44px); z-index:30; padding:12px; background:white; border:1px solid #a7bbae; border-radius:10px; box-shadow:0 10px 30px #203d3233; }
#brushMenu { left:auto; right:0; }
.color-menu input { width:100%; min-width:0; padding:9px; margin:4px 0 9px; border:1px solid var(--line); border-radius:6px; font-size:12px; }
.color-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-height:240px; overflow:auto; }
.replace-row .color-option { width:100%; max-width:none; display:flex; align-items:center; gap:8px; background:white; border:1px solid transparent; text-align:left; padding:8px; color:var(--ink); }
.color-option[aria-pressed=true] { border-color:var(--green); background:#edf4ee; }
.color-option span { min-width:0; }
.color-option b, .color-option small { display:block; overflow-wrap:anywhere; font-size:11px; }
.color-option small { color:#65766b; font-size:10px; margin-top:3px; }
.background-tools { margin-top:10px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; }
.background-tools > button, #applyOutline { min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--green); font-size:11px; }
.background-tools > button:disabled { opacity:.5; }
.outline-settings { flex:1; min-width:200px; font-size:12px; }
.outline-settings summary { cursor:pointer; padding:9px 0; color:var(--green); }
.outline-settings[open] { flex-basis:100%; border:1px solid var(--line); padding:10px; border-radius:8px; }
.outline-grid { display:grid; grid-template-columns:2fr 1fr 2fr; gap:8px; margin:10px 0; }
.outline-grid > div { min-width:0; }
.outline-grid label { display:block; font-size:11px; margin-bottom:5px; }
.outline-grid select { width:100%; min-width:0; padding:8px 4px; background:white; border:1px solid var(--line); border-radius:6px; font-size:11px; }
.outline-color { display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:#65766b; font-size:11px; }
@media(max-width:760px) { .outline-grid { grid-template-columns:1fr; } .color-menu { width:280px; } }

#viewport { scrollbar-gutter: stable both-edges; }

/* Mobile prioritizes the drawing; desktop layout and grid rendering stay intact. */
.preview-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto; }
#fullscreen, #viewerTools { min-height:36px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--green); padding:7px 10px; font-size:12px; }
#viewport { overflow-anchor:none; }
@media(max-width:760px) {
  .workspace { display:grid; grid-template-columns:minmax(0,1fr); }
  .right { display:contents; }
  #previewPanel { order:1; display:flex; flex-direction:column; min-width:0; }
  #settingsPanel { order:2; }
  .stats { order:3; }
  .palette-card { order:4; min-width:0; }
  .preview-top { order:0; padding:12px; }
  .preview-actions { gap:5px; }
  .tabs button { padding:7px; }
  .zoom-bar { order:1; padding:9px 12px; }
  .canvas-wrap { order:2; flex:none; }
  .preview-bottom { order:3; }
  .canvas-editor { order:4; }
}

.preview-card.viewer-fullscreen {
  position:fixed; inset:0; z-index:1000; width:100%; height:100vh; height:100dvh;
  display:flex; flex-direction:column; margin:0; border-radius:0; background:white;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.viewer-fullscreen .preview-top { order:0; flex-shrink:0; }
.viewer-fullscreen .zoom-bar { order:1; flex-shrink:0; }
.viewer-fullscreen .canvas-editor { display:none; order:2; }
.viewer-fullscreen.viewer-editing .canvas-editor { display:block; max-height:40vh; max-height:40dvh; overflow:auto; flex-shrink:0; }
.viewer-fullscreen .canvas-wrap { order:3; flex:1 1 0; min-height:80px; height:auto; }
.viewer-fullscreen .preview-bottom { order:4; flex-shrink:0; }
.viewer-fullscreen .color-menu { position:relative; top:auto; max-width:100%; }