/* Design Maker (components/design.js, #/disenar). Shared tokens; 8 px corners and 48 px touch targets everywhere in this screen.
   Phone (<= 900px): header, then the canvas with the tool bar right under it (sticky below the app's top bar), then the panel; no horizontal scroll at 375 px.
   Desktop: canvas + vertical tool bar on the left, panel on the right. */
.dm .card, .dm .note, .dm .btn, .dm input, .dm select, .dm textarea { border-radius: 8px; }
.dm .btn { min-height: 48px; }
.dm .btn.sm { min-height: 48px; font-size: 14px; padding: 0 12px; }
.dm .btn[aria-pressed="true"] { border-color: var(--brand); background: #e6f2ee; color: var(--brand); }
.dm .note { margin: 10px 0 0; }
.dm .note.ok { background: #e3f4e8; border-color: #b9e0c4; }
.dm h3 { margin: 0; } .dm h4 { margin: 18px 0 6px; font-size: 14px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.dm .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dm textarea { width: 100%; padding: 10px; font: inherit; border: 1.5px solid var(--line); background: #fff; resize: vertical; min-height: 64px; }
.dm select { min-height: 48px; width: 100%; }
.dm input[type=text] { min-height: 48px; width: 100%; padding: 0 12px; }
.dm-tip { margin: 4px 0 10px; font-size: 13px; } .dm-tip.warn { color: var(--bad); }
.dm-lbl { margin: 10px 0 4px; font-weight: 600; font-size: 14px; }

/* header */
.dm-top { display: grid; gap: 10px; margin-bottom: 12px; }
.dm-name input { font-size: 18px; font-weight: 700; border: 1.5px solid var(--line); background: #fff; }
.dm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-sq { width: 48px; min-width: 48px; padding: 0 !important; font-size: 22px; }
.dm-opts { background: var(--paper); border-radius: 8px; padding: 0 12px; box-shadow: var(--shadow); }
.dm-opts summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.dm-opts[open] { padding-bottom: 10px; }
.dm-aiwarn { border-color: #f2c26b; background: #fff3d6; }

/* canvas + tool bar */
.dm-body { display: grid; gap: 12px; }
.dm-main { background: var(--bg); }
.dm-stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; margin: 0 auto; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; }
.dm-stage.bg-check { background: repeating-conic-gradient(#d9dce1 0 25%, #c8ccd2 0 50%) 0 0 / 24px 24px; }
.dm-stage.bg-white { background: #fff; } .dm-stage.bg-black { background: #14161a; } .dm-stage.bg-green { background: #1f6f5c; }
.dm-cv { display: block; touch-action: none; outline-offset: -3px; cursor: default; -webkit-tap-highlight-color: transparent; }
.dm-cv:focus-visible { outline: 3px solid var(--accent); }
.dm-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center; color: #3b4048; pointer-events: none; font-size: 14px; }
.dm-stage.bg-black .dm-empty, .dm-stage.bg-green .dm-empty { color: #f2f2f2; } .dm-empty b { font-size: 16px; }
.dm-bar { display: flex; gap: 0; margin-top: 6px; overflow-x: auto; background: var(--paper); border-radius: 8px; box-shadow: var(--shadow); scrollbar-width: none; }
.dm-bar::-webkit-scrollbar { display: none; }
.dm-bar button { flex: 1 0 64px; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 0; padding: 4px 2px; background: none; border: 0; border-radius: 8px; color: var(--ink); font-weight: 600; }
.dm-bar button span { font-size: 20px; line-height: 1.1; } .dm-bar button small { font-size: 11px; line-height: 1.2; }
.dm-bar button[aria-pressed="true"] { background: #e6f2ee; color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }

/* panel */
.dm-panel { margin: 0; padding: 14px; }
.dm-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dm-ph h3 { overflow-wrap: anywhere; }
label.dm-range { margin: 6px 0 0; } .dm-range b { color: var(--brand); }
.dm input[type=range] { width: 100%; min-height: 48px; margin: 0; accent-color: var(--brand); }
.dm-check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; font-size: 14px; }
.dm-check input { width: 24px; height: 24px; accent-color: var(--brand); flex: none; }
.dm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dm-fs { border: 0; margin: 6px 0 0; padding: 0; min-width: 0; } .dm-fs legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 2px; }
.dm-sw { display: flex; flex-wrap: wrap; }
.dm-swb { position: relative; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.dm-swb i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c, #fff); border: 2px solid #c3c7cd; font-style: normal; font-weight: 700; color: var(--ink-2); font-size: 16px; }
.dm-swb.none i, .dm-swb.custom i { background: #fff; border-style: dashed; }
.dm-swb[aria-pressed="true"] i { outline: 3px solid var(--brand); outline-offset: 2px; }
.dm-swb.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; }
.dm-swb.custom:focus-within i { outline: 3px solid var(--accent); outline-offset: 2px; }
.dm-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dm-seg button { flex: 1 1 auto; min-height: 48px; padding: 0 10px; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; }
.dm-seg button[aria-pressed="true"], .dm-chip[aria-pressed="true"] { border-color: var(--brand); background: #e6f2ee; color: var(--brand); }
.dm-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
.dm-font { min-height: 56px; padding: 4px 10px; display: grid; justify-items: start; align-content: center; font-size: 17px; line-height: 1.15; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; text-align: left; }
.dm-font small { font: 500 11px var(--font); color: var(--ink-2); }
.dm-font[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #e6f2ee; }
.dm-presets, .dm-grid3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dm-grid3 { grid-template-columns: repeat(3, 1fr); }
.dm-preset, .dm-tile { min-height: 64px; padding: 6px; font-size: 20px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; line-height: 1.1; }
.dm-tile { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 13px; font-weight: 600; } .dm-tile span { font-size: 26px; line-height: 1; }
.dm-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; border: 2px dashed var(--line); border-radius: 8px; background: var(--bg); position: relative; }
.dm-drop.over { border-color: var(--brand); background: #e6f2ee; } .dm-drop .meta { flex: 1 1 200px; margin: 0; }
.dm-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .dm-file:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.dm-drop label.btn { cursor: pointer; }
.dm-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.dm-icon { min-height: 64px; display: grid; place-items: center; padding: 4px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; }
.dm-icon svg { display: block; width: 44px; height: 44px; pointer-events: none; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.dm-chip { min-height: 48px; padding: 0 12px; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; }
.dm-ai { margin-top: 12px; } .dm-ai p { margin: 4px 0; }
.dm-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-layers li { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px 48px; gap: 4px; align-items: stretch; }
.dm-lrow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; text-align: left; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; min-width: 0; }
.dm-lrow[aria-pressed="true"] { border-color: var(--brand); background: #e6f2ee; } .dm-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-ib { min-height: 48px; padding: 0; font-size: 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink); }
.dm-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.dm-tpl { display: grid; gap: 2px; padding: 8px; text-align: left; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; min-height: 48px; }
.dm-tpl canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: repeating-conic-gradient(#e6e8ec 0 25%, #f4f5f7 0 50%) 0 0 / 16px 16px; }
.dm-tpl small { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.dm-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm-saved li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.dm-saved img, .dm-nothumb { width: 56px; height: 56px; border-radius: 6px; background: repeating-conic-gradient(#e6e8ec 0 25%, #f4f5f7 0 50%) 0 0 / 12px 12px; object-fit: contain; }
.dm-saved b { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .dm-main { position: sticky; top: 48px; z-index: 6; padding: 6px 0; } /* 48px = the app's sticky top bar */
  .dm-stage { max-width: min(100%, 40vh); max-width: min(100%, 40dvh); }
  .dm .dm-acts .btn:not(.dm-sq) { flex: 1 1 auto; }
  .dm-saved li { grid-template-columns: 48px minmax(0, 1fr); } .dm-saved li .btn { grid-column: span 1; }
}
@media (min-width: 901px) {
  .dm-body { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .dm-main { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
  .dm-stage { max-width: min(100%, calc(100vh - 250px)); margin: 0; grid-column: 2; }
  .dm-bar { grid-column: 1; grid-row: 1; flex-direction: column; margin-top: 0; overflow: visible; }
  .dm-bar button { flex: none; min-height: 64px; }
  .dm-panel { position: sticky; top: 16px; max-height: calc(100vh - 120px); overflow-y: auto; }
  .dm-top { grid-template-columns: minmax(200px, 1fr) auto; align-items: center; } .dm-opts, .dm-aiwarn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .dm * { transition: none !important; } }

/* 2026-10-06 phone fix: the 2000 px canvas must never widen its grid cell (it overflowed 375 px by ~90 px) */
.dm-body > *, .dm-main, .dm-stage { min-width: 0; }
.dm-cv { max-width: 100%; }
@media (max-width: 900px) { .dm-stage { width: 100%; } }
@media (max-width: 900px) { .dm-body { grid-template-columns: minmax(0, 1fr); } .dm-bar { max-width: 100%; } }