/* ==========================================================================
   HTMS Signage — template gallery, editor and the sign component itself.

   Real paper sizes (ISO 216, mm): A3 297x420, A2 420x594, A1 594x841.
   The sign is authored once at those true proportions; the on-screen preview
   scales the whole block down with a CSS transform so nothing about the
   layout is re-flowed at a "tiny" size — it is the real design, shrunk.
   ========================================================================== */

.signage-template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.signage-template-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border: 1px solid var(--border-subtle); border-radius: 12px;
  cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s;
  text-align: center;
}
.signage-template-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent-300, var(--accent-400)); transform: translateY(-2px); }
.signage-template-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #fff;
}
.signage-template-label { font-size: 11.5px; font-weight: 650; color: var(--text-primary); }
.signage-template-category { font-size: 10px; color: var(--text-tertiary); }

.signage-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.signage-design-card { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.signage-design-card-preview { background: var(--surface-sunken); display: grid; place-items: center; padding: 10px; height: 160px; overflow: hidden; }
.signage-design-card-body { padding: 10px 12px; }
.signage-design-card-title { font-size: 12.5px; font-weight: 650; }
.signage-design-card-meta { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.signage-design-card-actions { display: flex; gap: 6px; margin-top: 8px; }

.signage-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.signage-editor-preview { display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); border-radius: 10px; padding: 12px; overflow: hidden; }

/* ---- The sign itself ---- */
.signage-sign {
  --sign-w: 297mm; --sign-h: 420mm; /* A3 portrait default */
  width: var(--sign-w); height: var(--sign-h);
  background: #fff; color: #101828;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  /* cqmin-based padding, not %, so landscape (wider box) doesn't inherit fatter
     padding than portrait just because width%/height% is always measured
     against the box's inline size. See note on cqmin below. */
  padding: 5cqmin 6cqmin; box-sizing: border-box;
  border: 6px solid var(--sign-accent, #1E40AF);
  font-family: var(--font-body, sans-serif);
  flex-shrink: 0;
}
.signage-sign[data-size="A2"] { --sign-w: 420mm; --sign-h: 594mm; }
.signage-sign[data-size="A1"] { --sign-w: 594mm; --sign-h: 841mm; }
.signage-sign[data-orientation="landscape"] { --sign-w-tmp: var(--sign-w); }
.signage-sign[data-orientation="landscape"] { width: var(--sign-h); height: var(--sign-w); }

.sign-category-bar {
  align-self: stretch; text-align: center; padding: 1.8cqmin 0; border-radius: 6px;
  background: var(--sign-accent, #1E40AF); color: #fff;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 3.2cqmin;
}
.sign-icon-circle {
  width: 30cqmin; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--sign-accent, #1E40AF); color: #fff; font-size: 12.5cqmin; margin: 3.5cqmin 0;
  flex-shrink: 0;
}
.sign-title {
  font-size: clamp(3cqmin, 5.5cqmin, 7cqmin); font-weight: 800; text-align: center; line-height: 1.08;
  flex: 0 1 auto; min-height: 0; overflow-wrap: break-word;
}
.sign-subtitle {
  font-size: clamp(2cqmin, 3cqmin, 4cqmin); text-align: center; color: #444; margin-top: 1.2cqmin;
  flex: 0 1 auto; min-height: 0; overflow-wrap: break-word;
}
.sign-instruction {
  font-size: clamp(1.7cqmin, 2.6cqmin, 3.4cqmin); text-align: center; color: #333; margin-top: 3cqmin;
  max-width: 90%; line-height: 1.3; flex: 0 1 auto; min-height: 0; overflow-wrap: break-word;
}
/* Last-resort clamp — only applied by signage-render.js when instruction text is
   genuinely excessive (well beyond a realistic sign instruction), so a runaway
   paragraph truncates gracefully with an ellipsis instead of overflowing the
   fixed-height sign or pushing the footer out of position. Never applied to
   normal long-but-reasonable copy. */
.sign-instruction--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; text-overflow: ellipsis;
}
.sign-footer {
  align-self: stretch; display: flex; justify-content: space-between; font-size: 2cqmin; color: #667;
  border-top: 1px solid #ddd; padding-top: 1.5cqmin; flex-shrink: 0;
}

/* Container-query-driven scaling requires the sign to establish a container.
   container-type: size (not inline-size) so cqmin/cqh track the block axis
   too — critical for landscape, whose height is the short (constraining)
   side. Safe because width/height are always explicit (mm custom
   properties), never content-derived. */
.signage-sign { container-type: size; }

/* On-screen scaling wrapper — shrinks the true-size sign to fit its box.
   Uses `zoom`, not `transform: scale()`: a transform repaints the element
   smaller but leaves its LAYOUT box at full A3/A2/A1 size, so the flex
   centering in .signage-editor-preview / .signage-design-card-preview
   centers a box hundreds of px wider than the panel and — combined with
   transform-origin: top left — paints the shrunk sign entirely outside the
   visible, overflow:hidden preview (i.e. the preview renders blank). zoom
   shrinks the actual layout box, so centering and overflow clipping both
   work against the real, small, visible size. Container-query units
   (cqmin/cqw) are unaffected: they resolve against the element's own
   post-zoom box, which still has the correct A3/A2/A1 proportions. */
.signage-scale-sm .signage-sign { zoom: 0.10; }
/* .signage-scale-md is the live editor preview panel (fixed box). A3's max
   side (420mm) fits it at 0.22; A2 (594mm) and A1 (841mm) are proportionally
   larger, so without a per-size zoom the panel's overflow:hidden would crop
   the sign instead of showing the whole design — sized down so every size's
   long edge still fits inside the same panel. */
.signage-scale-md .signage-sign { zoom: 0.22; }
.signage-scale-md .signage-sign[data-size="A2"] { zoom: 0.155; }
.signage-scale-md .signage-sign[data-size="A1"] { zoom: 0.11; }

@media print {
  @page { margin: 0; }
  body > .app-shell { display: none !important; }
  .print-only { display: block !important; }
  .signage-sign { transform: none !important; zoom: 1 !important; }
}