/* Media kit generator (views/media-kit-generator.cjs). Borders are 1px hairlines.
 * Print: while html.vt-mk-printing is set, the surface (a direct child of <body> holding the A4 picture) is the only
 * thing on paper, the same way css/_print-kit.css does it for the print kit. */
#visu-tools.vt-media-kit-generator .vt-in > * + * { margin-top: 16px; }
#visu-tools.vt-media-kit-generator .vt-mk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#visu-tools.vt-media-kit-generator .vt-fields { align-items: start; }
#visu-tools.vt-media-kit-generator .vt-mk-set { margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid var(--vt-line) !important; }
#visu-tools.vt-media-kit-generator .vt-mk-set > legend { float: left; width: 100%; margin-bottom: 4px; font-size: 15px; font-weight: 680; }
#visu-tools.vt-media-kit-generator .vt-mk-set > legend + * { clear: both; }
#visu-tools.vt-media-kit-generator .vt-mk-set > * + * { margin-top: 10px; }
#visu-tools.vt-media-kit-generator .vt-mk-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: center; }
#visu-tools.vt-media-kit-generator .vt-mk-row[hidden] { display: none; }
#visu-tools.vt-media-kit-generator .vt-mk-head { margin-top: 12px; }
#visu-tools.vt-media-kit-generator .vt-mk-head .vt-label { font-size: 13px; color: var(--vt-muted); }
#visu-tools.vt-media-kit-generator .vt-mk-pct { position: relative; display: block; }
#visu-tools.vt-media-kit-generator .vt-mk-pct > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--vt-muted); font-size: 15px; pointer-events: none; }
#visu-tools.vt-media-kit-generator .vt-mk-pct > input { padding-right: 34px !important; }
#visu-tools.vt-media-kit-generator .vt-mk-photo-on { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
#visu-tools.vt-media-kit-generator .vt-mk-opts { display: grid; gap: 16px; margin-top: 16px; }
#visu-tools.vt-media-kit-generator .vt-seg-item span { min-height: 36px; padding: 6px 14px; font-size: 14px; }
#visu-tools.vt-media-kit-generator .vt-mk-accent .vt-color-row { align-items: center; gap: 14px; }
#visu-tools.vt-media-kit-generator .vt-mk-headline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
#visu-tools.vt-media-kit-generator .vt-mk-stage { display: grid; place-items: center; padding: 14px; border-radius: 16px; background: var(--vt-bg); border: 1px solid var(--vt-line); }
#visu-tools.vt-media-kit-generator .vt-mk-stage canvas { display: block; width: 100%; max-width: 420px; height: auto; border-radius: 4px; box-shadow: 0 8px 28px rgba(10, 19, 36, .14); }
#visu-tools.vt-media-kit-generator .vt-mk-stage[data-format="a4"] canvas { max-width: 380px; }
#visu-tools.vt-media-kit-generator .vt-mk-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; margin-top: 22px; }
#visu-tools.vt-media-kit-generator .vt-mk-guide h3 { font-size: 17px !important; font-weight: 680 !important; margin-bottom: 6px !important; }
#visu-tools.vt-media-kit-generator .vt-mk-guide p { color: var(--vt-text); line-height: 1.6; }
@media (max-width: 860px) { #visu-tools.vt-media-kit-generator .vt-mk-guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { #visu-tools.vt-media-kit-generator .vt-mk-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; } }

.vt-mk-surface { display: none; }
@media print {
  html.vt-mk-printing, html.vt-mk-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html.vt-mk-printing body > *:not(.vt-mk-surface) { display: none !important; }
  html.vt-mk-printing .vt-mk-surface { display: block !important; margin: 0; padding: 0; width: 210mm; height: 296.7mm; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.vt-mk-printing .vt-mk-surface img { display: block; width: 210mm; height: 296.7mm; }
}
#visu-tools.vt-media-kit-generator .vt-seg { min-width: 0; max-width: 100%; }
/* Few options: on a phone they wrap, so every choice is in sight (the shared rule scrolls them sideways). */
@media (max-width: 600px) { #visu-tools.vt-media-kit-generator .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; } }