/*
 * «قوالبي» (docs/adr/0019): the maker's own templates and the template editor (js/designer.js).
 * The editor is the maker's dialog grown a little: the form on the inline start, the screen on the
 * lit wall at the inline end, with the boxes laid over the preview. All colours are --fm-* tokens
 * from /brand.css; the boxes over the artwork use the fixed art colours, which read on any design.
 */

/* ---------- In the maker: «قوالبي», the new-template tile, managing one ---------- */
.mk-mine-hint { grid-column: 1 / -1; }
.mk-new { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
.mk-new .mk-tpl-art { display: grid; place-items: center; outline: 1px dashed var(--fm-border-strong); color: var(--fm-text-secondary); background: transparent; }
.mk-new .mk-tpl-art .icon { width: 28px; height: 28px; }
.mk-new:focus-visible { outline: none; }
.mk-new:focus-visible .mk-tpl-art { outline: 2px solid var(--fm-focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .mk-new:hover .mk-tpl-art { outline-color: var(--fm-primary-text); color: var(--fm-primary-text); } }
.mk-status { font: var(--type-small); color: var(--fm-primary-text); margin-block-start: calc(-1 * var(--space-3)); }
.mk-manage { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: calc(-1 * var(--space-2)); }
.mk-manage .btn--danger { margin-inline-start: auto; }

/* ---------- The editor dialog ---------- */
.dialog--designer[open] {
  width: min(1320px, calc(100vw - 2 * var(--margin)));
  height: min(980px, calc(100vh - 32px));
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
}
.dz-form { gap: var(--space-5); }
.dz-section { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--fm-border); }
.dz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.dz-art { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dz-art-name { flex: 1 1 160px; min-width: 0; font: var(--type-small); color: var(--fm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-add .btn { padding-inline: var(--space-4); }

/* The layer list: the front-most first. */
.dz-layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.dz-layer { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 40px); align-items: center; gap: 2px; border-radius: var(--fm-radius); }
.dz-layer.is-selected { background: var(--fm-primary-tint); }
.dz-layer-pick { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--fm-radius); background: transparent; color: inherit; text-align: start; cursor: pointer; }
.dz-layer-pick .icon { color: var(--fm-text-secondary); }
.dz-layer.is-selected .dz-layer-pick .icon { color: var(--fm-primary-text); }
.dz-layer-text { display: grid; min-width: 0; }
.dz-layer-text b { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-layer-text small { font: var(--type-small); color: var(--fm-text-secondary); }
.dz-layer .icon-btn:disabled { opacity: .35; cursor: default; }
.dz-layers-empty { padding-block: var(--space-2); }
.icon--down { transform: rotate(90deg); }

/* The properties of the selected element. */
.dz-props { gap: var(--space-4); }
.dz-props textarea.input { min-height: 72px; padding-block: var(--space-2); line-height: 24px; resize: vertical; }
.dz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-num label { font: var(--type-small); font-weight: 600; }
.dz-choice, .dz-colour, .dz-geo { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.dz-choice legend, .dz-colour legend, .dz-geo legend { padding: 0; margin-block-end: var(--space-2); }
.dz-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; padding-block: var(--space-2); font: var(--type-small); cursor: pointer; }
.dz-check input { margin: 3px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--fm-primary); }
.dz-warn { font: var(--type-small); color: var(--fm-warning); }
.dz-warn:empty { display: none; }

.dz-colour-row { display: flex; align-items: center; gap: var(--space-2); }
.dz-colour-row input[type='color'] { flex: none; width: 52px; height: 44px; padding: 2px; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); background: var(--fm-surface-raised); cursor: pointer; }
.dz-hex { max-width: 140px; font-family: 'Inter', var(--fm-font); text-transform: uppercase; }
.dz-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-swatch { width: 32px; height: 32px; padding: 0; border: 1px solid var(--fm-border-strong); border-radius: 50%; cursor: pointer; }
.dz-swatch[aria-pressed='true'] { outline: 2px solid var(--fm-primary-text); outline-offset: 2px; }
.dz-swatch--white { background: var(--fm-art-white); }
.dz-swatch--paper { background: var(--fm-art-paper); }
.dz-swatch--ink { background: var(--fm-art-ink); }
.dz-swatch--slate { background: var(--fm-art-slate); }
.dz-swatch--violet { background: var(--fm-art-violet); }
.dz-swatch--purple { background: var(--fm-art-purple); }
.dz-swatch--indigo { background: var(--fm-art-indigo); }
.dz-swatch--lavender { background: var(--fm-art-lavender); }
.dz-swatch--lilac { background: var(--fm-art-lilac); }
@media (pointer: coarse) { .dz-swatch { width: 40px; height: 40px; } }

.dz-actions .btn--danger { margin-inline-start: auto; }

/* ---------- The screen, with the boxes over it ---------- */
.dz-stage { padding-block-end: var(--space-4); gap: var(--space-3); }
.dz-device { height: min(800px, calc(100vh - 230px)); }
.dz-stage.is-busy .mk-canvas { opacity: .6; }
.dz-overlay { position: absolute; inset: 0; direction: ltr; touch-action: none; user-select: none; -webkit-user-select: none; }
.dz-box {
  position: absolute; box-sizing: border-box; cursor: move;
  outline: 1px dashed var(--fm-art-white); outline-offset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fm-art-ink) 55%, transparent);
}
.dz-box:focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
.dz-box.is-warn { outline: 2px dashed var(--fm-warning); }
.dz-box.is-selected { outline: 2px solid var(--fm-select-frame); box-shadow: 0 0 0 4px var(--fm-select-edge); z-index: 1; }
.dz-tag {
  position: absolute; inset-block-end: 100%; inset-inline-start: -1px; max-width: 100%;
  padding: 1px 6px; border-radius: 2px 2px 0 0;
  font: 600 11px/16px var(--fm-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl;
  background: color-mix(in srgb, var(--fm-art-ink) 72%, transparent); color: var(--fm-art-white);
  pointer-events: none;
}
.dz-box.is-selected .dz-tag { background: var(--fm-select-frame); color: var(--fm-on-primary); }
/* Handles: small to see, large to touch. */
.dz-handle { position: absolute; width: 12px; height: 12px; margin: -6px; background: var(--fm-art-white); border: 2px solid var(--fm-select-frame); border-radius: 2px; }
.dz-handle::before { content: ''; position: absolute; inset: -10px; }
@media (pointer: coarse) { .dz-handle { width: 18px; height: 18px; margin: -9px; } }
.dz-handle--n, .dz-handle--s { left: 50%; cursor: ns-resize; }
.dz-handle--e, .dz-handle--w { top: 50%; cursor: ew-resize; }
.dz-handle--n { top: 0; }
.dz-handle--s { top: 100%; }
.dz-handle--e { left: 100%; }
.dz-handle--w { left: 0; }
.dz-handle--ne, .dz-handle--sw { cursor: nesw-resize; }
.dz-handle--nw, .dz-handle--se { cursor: nwse-resize; }
.dz-handle--ne { top: 0; left: 100%; }
.dz-handle--nw { top: 0; left: 0; }
.dz-handle--se { top: 100%; left: 100%; }
.dz-handle--sw { top: 100%; left: 0; }
/* Snap guides: where the box lined up. */
.dz-guide { position: absolute; z-index: 2; pointer-events: none; background: var(--fm-art-purple); box-shadow: 0 0 6px var(--fm-art-purple); }
.dz-guide--v { top: 0; bottom: 0; width: 1px; }
.dz-guide--h { left: 0; right: 0; height: 1px; }

.dz-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; background: var(--fm-device-bg); }
.dz-empty .hint { max-width: 26ch; }
.dz-tools { display: flex; align-items: center; gap: var(--space-2); }
.dz-tools .icon-btn:disabled { opacity: .4; cursor: default; }
.dz-toggle { min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--fm-border-strong); border-radius: 999px; background: transparent; color: var(--fm-text); font: var(--type-small); font-weight: 600; cursor: pointer; }
.dz-toggle[aria-pressed='true'] { background: var(--fm-primary); border-color: var(--fm-primary); color: var(--fm-on-primary); }
.dz-stage kbd { font: 600 12px/1 'Inter', var(--fm-font); padding: 1px 4px; border: 1px solid var(--fm-border-strong); border-radius: 3px; }
.dz-stage .mk-caption { max-width: 46ch; text-align: center; }

/* ---------- The fit step for an artwork of another size ---------- */
.dialog--fit[open] { width: min(720px, calc(100vw - 2 * var(--margin))); grid-template-columns: minmax(0, 1fr) auto; }
.fit-body { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); }
.fit-body h2 { font: var(--type-h2); }
.fit-preview { display: grid; justify-items: center; align-content: center; gap: var(--space-3); padding: var(--space-5); background: linear-gradient(to bottom, var(--fm-wall-top), var(--fm-wall-bottom)); border-inline-start: 1px solid var(--fm-border); }
.fit-canvas { width: 216px; height: 384px; border: 4px solid var(--fm-device-bezel); border-radius: 6px; box-shadow: var(--fm-device-shadow); background: var(--fm-device-bg); }
#fitFill { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); background: var(--fm-surface-raised); cursor: pointer; }

@media (max-width: 1100px) {
  .dz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .dialog--designer[open] { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 32px); overflow-y: auto; }
  .dz-device { height: auto; width: min(300px, 70vw); }
  .dialog--fit[open] { grid-template-columns: 1fr; }
  .fit-preview { order: -1; border-inline-start: 0; border-block-end: 1px solid var(--fm-border); }
}