/* Link preview image (OG image) generator (2026-10-11). Shared pieces come from css/_image-kit.css.
 * Layout: form | preview (wider, sticky), then the meta tags panel and the VISU box across both columns. On one column
 * the form keeps a small sticky copy of the preview (.vt-ogi-mini) so the card is in view while typing.
 * Borders are 1px hairlines; every touch target is 40px or more. */
#visu-tools.vt-og-image-generator .vt-app { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
#visu-tools.vt-og-image-generator :is(.vt-ogi-meta, .vt-ogi-visu) { grid-column: 1 / -1; }
#visu-tools.vt-og-image-generator .vt-ogi-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; }
#visu-tools.vt-og-image-generator .vt-link-btn { min-height: 40px; }
#visu-tools.vt-og-image-generator .vt-ogi-fields { margin-top: 8px; }
#visu-tools.vt-og-image-generator .vt-ogi-fields textarea { resize: vertical; min-height: 0; }
#visu-tools.vt-og-image-generator .vt-ogi-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#visu-tools.vt-og-image-generator :is(.vt-ogi-pane, .vt-ogi-info, .vt-ogi-guide, .vt-ogi-over, #vt-ogi-pos-row)[hidden] { display: none; }
#visu-tools.vt-og-image-generator .vt-hint[data-kind="error"] { color: var(--vt-err); }
#visu-tools.vt-og-image-generator .vt-hint[data-kind="warn"], #visu-tools.vt-og-image-generator .vt-ogi-over { color: var(--vt-warn); }

/* gradient presets */
#visu-tools.vt-og-image-generator .vt-ogi-swatches { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
#visu-tools.vt-og-image-generator .vt-ogi-swatch { position: relative; display: block; width: 44px; height: 44px; }
#visu-tools.vt-og-image-generator .vt-ogi-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#visu-tools.vt-og-image-generator .vt-ogi-swatch span:first-of-type { display: block; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--vt-line-2); transition: box-shadow .15s; }
#visu-tools.vt-og-image-generator .vt-ogi-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--vt-ink); }
#visu-tools.vt-og-image-generator .vt-ogi-swatch input:focus-visible + span { outline: 2px solid var(--vt-accent-text); outline-offset: 4px; }

/* photo and logo */
#visu-tools.vt-og-image-generator .vt-ogi-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 14px; color: var(--vt-ink); font-variant-numeric: tabular-nums; }
#visu-tools.vt-og-image-generator .vt-ogi-logo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--vt-line); }
#visu-tools.vt-og-image-generator .vt-ogi-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
#visu-tools.vt-og-image-generator .vt-ogi-file { position: relative; cursor: pointer; }
#visu-tools.vt-og-image-generator .vt-ogi-file:focus-within { outline: 2px solid var(--vt-accent-text); outline-offset: 2px; }

/* preview */
#visu-tools.vt-og-image-generator .vt-ogi-stage { padding: 14px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-bg); }
#visu-tools.vt-og-image-generator .vt-ogi-frame { position: relative; line-height: 0; box-shadow: 0 1px 2px rgba(10, 19, 36, .14), 0 10px 28px rgba(10, 19, 36, .10); }
#visu-tools.vt-og-image-generator .vt-ogi-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
#visu-tools.vt-og-image-generator .vt-ogi-guide { position: absolute; box-sizing: border-box; pointer-events: none; border: 1px dashed rgba(255, 255, 255, .95); outline: 1px dashed rgba(10, 19, 36, .6); }
#visu-tools.vt-og-image-generator .vt-out .vt-check { min-height: 40px; align-self: start; }
#visu-tools.vt-og-image-generator .vt-ogi-mini { display: none; }

/* meta tags */
#visu-tools.vt-og-image-generator .vt-ogi-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#visu-tools.vt-og-image-generator .vt-ogi-meta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 20px; align-items: start; }
#visu-tools.vt-og-image-generator :is(.vt-ogi-meta-in, .vt-ogi-meta-out) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
#visu-tools.vt-og-image-generator .vt-ogi-code { margin: 0; padding: 14px 16px; min-height: 76px; max-height: 340px; overflow: auto; border: 1px solid var(--vt-line); border-radius: 12px; background: var(--vt-bg);
  font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--vt-ink); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
#visu-tools.vt-og-image-generator .vt-ogi-code-empty { font-family: inherit; font-size: 14.5px; color: var(--vt-muted); }
#visu-tools.vt-og-image-generator .vt-ogi-check { font-size: 14.5px; color: var(--vt-ink); }
#visu-tools.vt-og-image-generator .vt-ogi-check a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 650; }

/* VISU Link bridge */
#visu-tools.vt-og-image-generator .vt-ogi-visu { padding: 22px 24px; border: 1px solid var(--vt-line); }
#visu-tools.vt-og-image-generator .vt-ogi-visu h2 { font-size: 20px !important; font-weight: 700 !important; }
#visu-tools.vt-og-image-generator .vt-ogi-visu p { max-width: 72ch; }
#visu-tools.vt-og-image-generator .vt-ogi-visu-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
#visu-tools.vt-og-image-generator .vt-ogi-visu-links .vt-more { align-items: center; min-height: 40px; }
#visu-tools.vt-og-image-generator .vt-ogi-sources td:is(:first-child, :nth-child(2), :last-child) { white-space: nowrap; }
#visu-tools.vt-og-image-generator .vt-ik-opt .vt-seg-item span { min-height: 40px; }

@media (max-width: 860px) {
  #visu-tools.vt-og-image-generator .vt-app, #visu-tools.vt-og-image-generator .vt-ogi-meta-grid { grid-template-columns: minmax(0, 1fr); }
  #visu-tools.vt-og-image-generator .vt-ogi-mini { display: block; position: sticky; top: 8px; z-index: 3; width: min(100%, 320px); margin: 8px auto 4px; padding: 5px; line-height: 0;
    background: #fff; border: 1px solid var(--vt-line-2); border-radius: 10px; box-shadow: 0 8px 22px rgba(10, 19, 36, .12); }
  #visu-tools.vt-og-image-generator .vt-ogi-mini canvas { display: block; width: 100%; height: auto; border-radius: 5px; }
}
@media (max-width: 600px) {
  #visu-tools.vt-og-image-generator .vt-ogi-stage { padding: 8px; }
  #visu-tools.vt-og-image-generator .vt-ogi-visu { padding: 18px 16px; }
  #visu-tools.vt-og-image-generator .vt-ogi-code { font-size: 12.5px; padding: 12px; }
  #visu-tools.vt-og-image-generator .vt-ogi-sources td:is(:first-child, :nth-child(2), :last-child) { white-space: normal; }
}