/* ============================================================
   visual-canvas.css — the page view: the canvas area, the device box, the loading and
   "missing" states, the inspector column and panel, and the page view's dialogs
   (VISUAL-EDITOR-SPEC §9.3).

   Loaded last (index.html), after visual.css. Everything here is scoped to classes the page
   view creates (.vcanvas, .vstage, .vdev, .vframe, .vnote-*, .vsk-*, .vinsp-*, .vdlg-*) or to
   the inspector slot on visual routes, so the legacy screens under "Advanced" are untouched.

   THE CANVAS IS THE SITE'S OWN DARK. The page in the frame paints the site's #16181c canvas;
   the stage behind it, the first-load skeleton and the empty states use the same value, so a
   re-render, a slow first load or a narrow device never flashes a different colour around
   the page. Only device mode changes the backdrop — to a deeper, dotted neutral — so the
   820/390 px box reads as a device sitting on a desk rather than as a cropped page.

   THE INSPECTOR FLOATS. It sits over the right edge of the canvas as a pale panel instead of
   pushing the canvas narrower: a canvas that changed width whenever something was selected
   would reflow the page under the pointer and cross the site's own breakpoints, and "exactly
   the same as that displayed" would stop being true the moment the operator clicked. Pale,
   because it is the editor's furniture like the sidebar, and because the kit's forms are
   drawn for the panel context (the same tokens as .modal and .drawer-panel are bound here).

   The overlay INSIDE the frame (hover outlines, toolbars) is canvas/canvas.css, a different
   document; its accent #3D7BFF is reused below for the progress line so both read as "the
   editor is doing something".
   ============================================================ */

.vcanvas{
  --vc-site:#16181c;                 /* site.css --canvas: what the frame paints */
  --vc-desk:#0c0d10;                 /* device-mode backdrop */
  --vc-accent:#3D7BFF;               /* canvas.css's editor accent */
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--vc-site);
  overflow:hidden;
}
.vcanvas svg{ flex:none; max-width:none }

/* ---------------------------------------------------------------- stage + device box */
.vstage{
  position:relative; flex:1; min-height:0; overflow:hidden;
  background:var(--vc-site);
  transition:background-color .3s var(--ease);
}
.vstage.is-device{
  background-color:var(--vc-desk);
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--on-canvas) 9%, transparent) 1px, transparent 1.4px);
  background-size:22px 22px;
}

/* canvas-host.js sets width, height and the transform: translate(x, y) [scale(s)]. On
   Desktop x is minus the site rail's width (the column the page reserves for it is slid out
   of view, canvas-host.js WIDTH); in device mode it centres the box. */
.vdev{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  background:var(--vc-site);
  overflow:hidden;
  border-radius:0;
  box-shadow:none;
  transition:width .34s var(--ease), height .34s var(--ease),
             transform .34s var(--ease), border-radius .34s var(--ease), box-shadow .34s var(--ease);
}
.vdev.is-snap{ transition:none }
.vdev.is-device{
  border-radius:22px;
  /* hairline, bezel, outer hairline, drop shadow: a device without a picture of one */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--on-canvas) 10%, transparent),
    0 0 0 9px #1b1e24,
    0 0 0 10px color-mix(in srgb, var(--on-canvas) 7%, transparent),
    0 44px 90px -34px rgba(0,0,0,.9);
}
.vframe{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; border:0; margin:0; padding:0;
  background:var(--vc-site);
  z-index:1;
}
/* The buffer: laid out at full size (edit.js measures and restores scroll in it), never
   seen, never hit, never focused. */
.vframe.is-buffer{ visibility:hidden; pointer-events:none; z-index:0 }
.vframe:focus{ outline:none }

.vdev-cap{
  position:absolute; left:0; right:0; top:15px; margin:0;
  text-align:center; pointer-events:none;
  font-family:var(--font-display); font-weight:500; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-canvas) 46%, transparent);
  opacity:0; transition:opacity .25s var(--ease);
}
.vstage.is-device .vdev-cap{ opacity:1 }

/* ---------------------------------------------------------------- loading */

/* A 2 px line under the top bar, only for a re-render that is taking a while (view.js waits
   ~240 ms before turning it on), so a quick redraw shows nothing at all. */
.vcanvas-progress{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:6;
  overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .2s var(--ease);
}
.vcanvas-progress.is-on{ opacity:1 }
.vcanvas-progress i{
  position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg, transparent, var(--vc-accent) 30%, #8fb3ff 60%, transparent);
  transform:translateX(-100%);
}
.vcanvas-progress.is-on i{ animation:vc-sweep 1.05s cubic-bezier(.45,.05,.4,1) infinite }
@keyframes vc-sweep{ to{ transform:translateX(265%) } }

/* The first load: the shape of a page in the site's colours. It fades in only after a beat,
   so a fast first render goes straight from the shell's skeleton to the page. */
.vcanvas-veil{
  position:absolute; inset:0 0 0 var(--vdev-inset, 0px); z-index:3;
  background:var(--vc-site);
  animation:vc-fade .24s var(--ease) .14s both;
  transition:opacity .28s var(--ease), visibility 0s linear .28s;
}
.vcanvas-veil.is-gone{ opacity:0; visibility:hidden; pointer-events:none; animation:none }
@keyframes vc-fade{ from{ opacity:0 } to{ opacity:1 } }

.vsk-page{
  width:min(1120px, 100%); margin:0 auto;
  padding:clamp(48px, 9vh, 104px) clamp(20px, 5vw, 64px) 0;
  display:flex; flex-direction:column; gap:14px;
}
.vsk{
  display:block; border-radius:6px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--on-canvas) 5%, transparent) 0%,
    color-mix(in srgb, var(--on-canvas) 10%, transparent) 50%,
    color-mix(in srgb, var(--on-canvas) 5%, transparent) 100%);
  background-size:220% 100%;
  animation:vc-shimmer 1.4s linear infinite;
}
.vsk-eyebrow{ width:132px; height:11px; margin-bottom:8px }
.vsk-h1{ width:min(620px, 82%); height:clamp(30px, 5vw, 54px) }
.vsk-h1.is-short{ width:min(380px, 54%) }
.vsk-lede{ width:min(560px, 90%); height:13px; margin-top:8px }
.vsk-lede.is-short{ width:min(420px, 70%); margin-top:0 }
.vsk-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; margin-top:40px }
.vsk-card{ height:190px; border-radius:14px }
@keyframes vc-shimmer{ to{ background-position:-220% 0 } }

/* ---------------------------------------------------------------- notes: missing, failed */
.vcanvas-note{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; padding:24px;
  background:var(--vc-site);
}
.vcanvas-note[hidden]{ display:none }
/* No page to show (or a stale one waiting for its replacement): hide the frames, keep the
   box, so the skeleton inside it can stand in until the fresh render arrives. */
.vstage.is-missing .vframe,.vstage.is-missing .vdev-cap{ visibility:hidden }
.vnote-card{
  width:min(480px, 100%); padding:30px 30px 26px; border-radius:var(--r-lg);
  text-align:center; color:var(--on-canvas);
  background:color-mix(in srgb, var(--on-canvas) 4%, var(--vc-site));
  border:1px solid color-mix(in srgb, var(--on-canvas) 12%, transparent);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
  animation:modal-in .26s var(--ease) both;
}
.vnote-ico{
  display:grid; place-items:center; width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:color-mix(in srgb, var(--on-canvas) 8%, transparent);
  color:color-mix(in srgb, var(--on-canvas) 70%, transparent);
}
.vnote-ico svg{ width:24px; height:24px }
.vnote-card.is-error .vnote-ico{ background:color-mix(in srgb, #ff6b6b 14%, transparent); color:#ff8a8a }
.vnote-title{ margin:0 0 8px; font-size:1.3rem; letter-spacing:.03em }
.vnote-body{ margin:0 auto; max-width:40ch; font-size:.9rem; line-height:1.55; color:color-mix(in srgb, var(--on-canvas) 74%, transparent) }
.vnote-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px }
.vnote-btn{
  display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:999px;
  font-family:var(--font-display); font-weight:500; font-size:.84rem; letter-spacing:.05em;
  color:var(--on-canvas);
  background:color-mix(in srgb, var(--on-canvas) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--on-canvas) 18%, transparent);
  transition:background .16s var(--ease), border-color .16s var(--ease), filter .16s var(--ease);
}
.vnote-btn:hover{ background:color-mix(in srgb, var(--on-canvas) 11%, transparent); border-color:color-mix(in srgb, var(--on-canvas) 30%, transparent) }
.vnote-btn.is-primary{ background:var(--rail-bg); color:var(--canvas-3); border-color:transparent }
.vnote-btn.is-primary:hover{ filter:brightness(1.06); background:var(--rail-bg) }
.vnote-btn:focus-visible{ outline:2px solid var(--vc-accent); outline-offset:2px }

/* A re-render that failed while an older page is still on screen: say so, keep the page. */
.vcanvas-strip{
  /* centred without a transform: the entrance animation owns `transform` */
  position:absolute; z-index:5; left:16px; right:16px; bottom:18px; margin-inline:auto;
  width:fit-content; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 8px 16px; border-radius:999px;
  background:#2a2116; color:#ffd9a0;
  border:1px solid color-mix(in srgb, #f2b84b 30%, transparent);
  box-shadow:0 14px 40px -16px rgba(0,0,0,.8);
  font-size:.82rem; line-height:1.3;
  animation:modal-in .22s var(--ease) both;
}
.vcanvas-strip[hidden]{ display:none }
.vcanvas-strip button{
  flex:none; height:28px; padding:0 12px; border-radius:999px;
  background:#f2b84b; color:#1d1407; font-weight:600; font-size:.78rem;
}

/* Read-only accounts: the page as it is, and a quiet word on why nothing reacts. */
.vcanvas-badge{
  position:absolute; z-index:5; left:14px; bottom:14px; margin:0;
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--canvas-3) 88%, transparent); color:var(--on-canvas);
  border:1px solid color-mix(in srgb, var(--on-canvas) 16%, transparent);
  backdrop-filter:blur(8px);
  font-family:var(--font-display); font-weight:500; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  pointer-events:auto;
}
.vcanvas-badge svg{ width:15px; height:15px }

/* the focus sink an open canvas edit is flushed into (view.js flushEdits) */
.vcanvas-sink{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); outline:none }

/* "Profile settings" / "Highlight settings": the route's own panel, one click away */
.vcanvas-routeset{
  position:absolute; z-index:6; right:16px; top:14px; margin:0;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--canvas-3) 90%, transparent); color:var(--on-canvas);
  border:1px solid color-mix(in srgb, var(--on-canvas) 22%, transparent);
  backdrop-filter:blur(8px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.08em;
  cursor:pointer; transition:background .16s var(--ease), border-color .16s var(--ease);
}
.vcanvas-routeset svg{ width:16px; height:16px }
.vcanvas-routeset:hover{ background:var(--canvas-3); border-color:color-mix(in srgb, var(--on-canvas) 40%, transparent) }
.vcanvas-routeset:focus-visible{ outline:2px solid #3D7BFF; outline-offset:2px }
.vwork.is-visual .vinsp:not(:empty) ~ * .vcanvas-routeset,
.vwork.is-visual .vbody:has(.vinsp:not(:empty)) .vcanvas-routeset{ display:none }

/* ---------------------------------------------------------------- the inspector column

   app.js's slot (aside.vinsp#inspector) is empty — and therefore display:none
   (visual.css) — until inspector.js fills it. On visual routes it floats over the canvas. */
.vwork.is-visual .vbody{ position:relative }
.vwork.is-visual .vinsp{
  position:absolute; z-index:30;
  top:12px; right:12px; bottom:12px; left:auto;
  width:min(368px, calc(100% - 24px));
  display:flex; flex-direction:column;
  overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
  border-radius:16px; border:0;
  /* the panel context: the same token set kit.css binds on .modal / .drawer-panel */
  --ink:var(--rail-ink);
  --ink-2:color-mix(in srgb, var(--rail-ink) 80%, transparent);
  --ink-3:color-mix(in srgb, var(--rail-ink) 62%, transparent);
  --line:color-mix(in srgb, var(--rail-ink) 14%, transparent);
  --line-2:color-mix(in srgb, var(--rail-ink) 26%, transparent);
  --tint:color-mix(in srgb, var(--rail-ink) 6%, transparent);
  --tint-2:color-mix(in srgb, var(--rail-ink) 11%, transparent);
  --field:color-mix(in srgb, var(--rail-bg) 55%, #ffffff);
  --link:var(--canvas-3);
  --focus:var(--canvas-3);
  --fill:var(--canvas-3);
  --fill-ink:var(--on-canvas);
  background:var(--panel); color:var(--ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 30px 80px -24px rgba(0,0,0,.75), 0 8px 22px -12px rgba(0,0,0,.5);
  animation:vinsp-in .26s var(--ease) both;
}
.vwork.is-visual .vinsp:empty{ display:none }
@keyframes vinsp-in{ from{ opacity:0; transform:translateX(18px) } to{ opacity:1; transform:none } }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .vwork.is-visual .vinsp{ top:8px; right:8px; bottom:8px; width:min(380px, calc(100% - 16px)) }
}
@media (max-width:560px){
  .vwork.is-visual .vinsp{ top:0; right:0; bottom:0; width:100%; border-radius:0 }
  .vdev.is-device{ border-radius:16px }
  .vnote-card{ padding:24px 20px 20px }
}
@media (prefers-reduced-motion:reduce){
  .vdev,.vstage,.vcanvas-veil{ transition:none }
  .vsk,.vcanvas-progress.is-on i,.vwork.is-visual .vinsp,.vnote-card,.vcanvas-strip,.vcanvas-veil{ animation:none }
  .vcanvas-progress.is-on i{ transform:none; width:100%; opacity:.6 }
}

/* ============================================================
   The inspector panel (visual/inspector.js) and the visual editor's dialogs
   (visual/dialogs.js).

   These rules used to travel inside those two files as template strings, injected as
   <style id="lbn-vinsp-styles"> and <style id="lbn-vdlg-styles"> the first time each was
   used. They live here now so every rule of the page view is in one stylesheet that a
   designer can read, and nothing is added to <head> at run time. They come LAST in this
   file because the injected <style> elements came after every stylesheet in the document:
   this keeps each rule's place in the cascade, so nothing renders differently.

   Both are on the kit's tokens (--ink, --line, --tint, --fill), so a modal — a PANEL
   context — and the pale inspector get dark ink on a light surface without a colour of
   their own written here; the few literal colours are the canvas overlay's accent blue
   (#3D7BFF, canvas/canvas.css) and white marks drawn over photos.
   ============================================================ */

/* ---------------------------------------------------------------- inspector panel */
.vinsp-panel{ display:flex; flex-direction:column; min-height:100%; color:var(--ink) }
.vinsp-head{ position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; gap:10px; padding:16px 12px 12px 18px; background:var(--panel); border-bottom:1px solid var(--line) }
.vinsp-head-txt{ flex:1; min-width:0 }
.vinsp-eyebrow{ display:flex; align-items:center; gap:7px; margin:0 0 4px; font-family:var(--font-display); font-weight:500; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2) }
.vinsp-eyebrow svg{ width:14px; height:14px; color:var(--ink-3) }
.vinsp-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:.03em; line-height:1.25; overflow-wrap:anywhere }
.vinsp-title.is-empty{ color:var(--ink-3); font-style:italic; font-weight:500 }
.vinsp-close{ flex:none; margin:-4px 0 0 0 }
.vinsp-actions{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px 2px }
.vinsp-actions .btn{ border-radius:999px }
.vinsp-body{ display:flex; flex-direction:column; padding:2px 0 28px }
.vinsp-sec{ padding:14px 18px 16px; border-bottom:1px solid var(--line) }
.vinsp-sec:last-child{ border-bottom:0 }
.vinsp-sec-h{ margin:0 0 12px; font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
.vinsp-sec .form{ gap:14px }
.vinsp-panel .f-field.is-hl{ animation:vinsp-hl 1.6s var(--ease) }
@keyframes vinsp-hl{ 0%,35%{ box-shadow:0 0 0 2px #3D7BFF, 0 0 0 6px color-mix(in srgb, #3D7BFF 18%, transparent); border-radius:8px } 100%{ box-shadow:0 0 0 2px transparent } }
.vinsp-panel .f-field[data-locked]{ opacity:.55 }
.vinsp-addr{ display:flex; align-items:center; border-radius:var(--r-sm); background:var(--field); border:1px solid var(--line); overflow:hidden }
.vinsp-addr span{ padding:0 0 0 10px; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-2); white-space:nowrap }
.vinsp-addr .input{ flex:1; min-width:0; border:0; background:transparent; padding-left:1px; font-family:var(--font-mono); font-size:.76rem; box-shadow:none }
.vinsp-addr:focus-within{ border-color:var(--line-2); box-shadow:0 0 0 3px color-mix(in srgb, #3D7BFF 28%, transparent) }
.vinsp-addr-row{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:8px 0 0; font-size:.78rem; color:var(--ink-2) }
.vinsp-addr-row a{ color:var(--ink); font-weight:600 }
.vinsp-img{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center }
.vinsp-img-thumb{ position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--tint-2); display:grid; place-items:center; color:var(--ink-3); border:1px solid var(--line); cursor:pointer; padding:0 }
.vinsp-img-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.vinsp-img-thumb svg{ width:24px; height:24px }
.vinsp-img-thumb:hover{ border-color:var(--line-2); box-shadow:var(--shadow) }
.vinsp-img-thumb:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.vinsp-img-body{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.vinsp-img-path{ margin:0; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vinsp-img-btns{ display:flex; gap:6px; flex-wrap:wrap }
.vinsp-hint{ display:flex; flex-direction:column; gap:12px; padding:20px 18px 18px }
.vinsp-hint-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:color-mix(in srgb, #3D7BFF 13%, transparent); color:#2B5FD9 }
.vinsp-hint-ico svg{ width:22px; height:22px }
.vinsp-hint h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.03em }
.vinsp-hint p{ margin:0; font-size:.86rem; line-height:1.55; color:var(--ink-2) }
.vinsp-tips{ display:flex; flex-direction:column; gap:9px; margin:4px 0 0; padding:0; list-style:none }
.vinsp-tips li{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:start; font-size:.82rem; line-height:1.45; color:var(--ink-2) }
.vinsp-k{ display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 5px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line-2); box-shadow:0 1px 0 var(--line-2); font-family:var(--font-mono); font-size:.68rem; color:var(--ink) }
.vinsp-stat{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.vinsp-stat b{ font-family:var(--font-display); font-weight:700; font-size:2.3rem; line-height:1; letter-spacing:.01em }
.vinsp-stat span{ font-size:.82rem; color:var(--ink-2) }
.vinsp-used{ display:flex; flex-wrap:wrap; gap:6px }
.vinsp-used a{ padding:3px 11px; border-radius:999px; font-size:.78rem; font-weight:500; background:var(--tint); border:1px solid var(--line); color:var(--ink); text-decoration:none }
.vinsp-used a:hover{ background:var(--fill); color:var(--fill-ink); border-color:var(--fill); text-decoration:none }
.vinsp-note{ margin:0; font-size:.8rem; line-height:1.5; color:var(--ink-2) }
.vinsp-link{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px }
.vinsp-link svg{ width:13px; height:13px }
.vinsp-panel .ppanel-head{ display:none }
.vinsp-panel .ppanel{ gap:14px }
.vinsp-panel .ppanel-pos{ margin:0 }
.vinsp-panel .ppanel-desc{ margin:0; font-size:.82rem; color:var(--ink-2); line-height:1.5 }
.vinsp-panel .ppanel-moves,.vinsp-panel .ppanel-foot{ display:flex; flex-wrap:wrap; gap:6px }
.vinsp-panel .ppanel-frame{ border-top:1px solid var(--line); padding-top:8px }
.vinsp-panel .ppanel-frame summary{ cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); padding:6px 0 }
.vinsp-panel .ppanel-frame .form{ margin-top:10px }
.vinsp-count{ margin:0 0 10px; font-size:.84rem; color:var(--ink-2) }
.vinsp-links{ display:flex; flex-direction:column; gap:6px }
.vinsp-lnk{ display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; gap:2px 8px; align-items:center; padding:6px 6px 6px 8px; border-radius:10px; background:var(--tint); border:1px solid var(--line) }
.vinsp-lnk-ico{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--soc); color:#fff }
.vinsp-lnk-ico svg{ width:15px; height:15px }
.vinsp-lnk-txt{ display:flex; flex-direction:column; min-width:0 }
.vinsp-lnk-txt b{ font-size:.84rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vinsp-lnk-txt small{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vinsp-btnrow{ display:flex; flex-wrap:wrap; gap:6px }

/* ---------------------------------------------------------------- dialogs */
.vdlg-img{ display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:20px; min-height:380px }
.vdlg-img.is-multi{ grid-template-columns:minmax(0,1fr) }
.vdlg-main{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.vdlg-tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--tint); border:1px solid var(--line); align-self:flex-start }
.vdlg-tab{ padding:6px 14px; border-radius:7px; font-family:var(--font-display); font-weight:500; font-size:.8rem; letter-spacing:.05em; color:var(--ink-2); background:none; border:0; cursor:pointer }
.vdlg-tab:hover{ color:var(--ink) }
.vdlg-tab[aria-selected="true"]{ background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12) }
.vdlg-tab:focus-visible{ outline:2px solid var(--focus); outline-offset:1px }
.vdlg-pane{ display:flex; flex-direction:column; gap:12px; min-height:0 }
.vdlg-drop{ min-height:220px; flex:1 }
.vdlg-drop .vdlg-drop-ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--panel); color:var(--ink-2); box-shadow:var(--shadow) }
.vdlg-drop .vdlg-drop-ico svg{ width:26px; height:26px }
.vdlg-drop small{ font-size:.76rem; color:var(--ink-3) }
.vdlg-ups{ display:flex; flex-direction:column; gap:8px; max-height:190px; overflow:auto; scrollbar-width:thin }
.vdlg-up{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:6px 8px; border-radius:var(--r-sm); background:var(--tint) }
.vdlg-up img{ width:40px; height:40px; border-radius:6px; object-fit:cover; grid-row:span 2; background:var(--tint-2) }
.vdlg-up b{ font-size:.82rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vdlg-up em{ font-style:normal; font-size:.74rem; color:var(--ink-2); white-space:nowrap }
.vdlg-up .bar{ grid-column:2 / -1 }
.vdlg-up.is-done em{ color:var(--ok) }
.vdlg-up.is-error em{ color:var(--danger) }
.vdlg-libbar{ display:flex; gap:8px; align-items:center }
.vdlg-libbar .input{ flex:1; border-radius:999px; padding-left:14px }
.vdlg-libbar small{ font-size:.76rem; color:var(--ink-2); white-space:nowrap }
/* grid-auto-rows:max-content — a tile clips its picture (overflow:hidden), which makes its
   automatic minimum height 0, and the grid has a definite height (the 330 px cap, as a flex
   item): `auto` rows were squeezed to fit it, and every tile drew as a 14 px strip. */
.vdlg-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows:max-content; max-height:330px; overflow:auto; padding:2px; scrollbar-width:thin; align-content:start }
.vdlg-tile{ position:relative; display:block; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--tint-2); cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease) }
.vdlg-tile:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.vdlg-tile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.vdlg-tile img{ display:block; width:100%; aspect-ratio:1; object-fit:cover }
.vdlg-tile span{ display:block; padding:5px 7px 6px; font-size:.7rem; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--panel); color:var(--ink-2) }
.vdlg-tile[aria-pressed="true"]{ outline:3px solid #3D7BFF; outline-offset:-3px }
.vdlg-tile[aria-pressed="true"]::after{ content:""; position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%; background:#3D7BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow:0 1px 4px rgba(0,0,0,.35) }
.vdlg-empty{ padding:40px 10px; text-align:center; font-size:.86rem; color:var(--ink-2) }
.vdlg-aside{ display:flex; flex-direction:column; gap:12px; min-width:0; padding-left:20px; border-left:1px solid var(--line) }
.vdlg-cap{ margin:0; font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }
.vdlg-prevwrap{ display:grid; place-items:center; min-height:170px; padding:10px; border-radius:var(--r-sm); background:repeating-conic-gradient(var(--tint) 0% 25%, transparent 0% 50%) 50%/16px 16px; border:1px solid var(--line) }
.vdlg-prev{ position:relative; display:inline-block; line-height:0; max-width:100% }
.vdlg-prev img{ display:block; max-width:100%; max-height:240px; border-radius:4px }
.vdlg-prev.is-focusable{ cursor:crosshair }
.vdlg-prev:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:4px }
.vdlg-dot{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:2px solid #fff; background:rgba(61,123,255,.55); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4); pointer-events:none; transition:left .12s var(--ease), top .12s var(--ease) }
.vdlg-noimg{ display:grid; place-items:center; gap:6px; padding:30px 10px; color:var(--ink-3); font-size:.8rem; text-align:center; line-height:1.4 }
.vdlg-noimg svg{ width:30px; height:30px }
.vdlg-crop{ display:flex; gap:10px; align-items:center }
.vdlg-crop i{ display:block; width:56px; aspect-ratio:4/5; border-radius:8px; overflow:hidden; flex:none; background:var(--tint-2); box-shadow:var(--shadow) }
.vdlg-crop i img{ width:100%; height:100%; object-fit:cover; display:block }
.vdlg-crop p{ margin:0; font-size:.76rem; color:var(--ink-2); line-height:1.4 }
.vdlg-crop p b{ display:block; font-family:var(--font-mono); font-weight:500; font-size:.76rem; color:var(--ink) }
.vdlg-meta{ margin:0; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-2); overflow-wrap:anywhere }
.vdlg-left{ margin-right:auto }
.vdlg-link{ display:flex; flex-direction:column; gap:16px }
.vdlg-urlrow{ display:flex; gap:8px; align-items:center }
.vdlg-urlrow .input{ flex:1; font-family:var(--font-mono); font-size:.84rem }
.vdlg-detect{ display:flex; align-items:center; gap:7px; margin:0; min-height:20px; font-size:.8rem; color:var(--ink-2) }
.vdlg-detect i{ display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--soc); color:#fff; flex:none }
.vdlg-detect i svg{ width:12px; height:12px }
.vdlg-kinds{ display:flex; flex-wrap:wrap; gap:6px }
.vdlg-kind{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px 0 5px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:.8rem; cursor:pointer; transition:border-color .14s var(--ease), background .14s var(--ease) }
.vdlg-kind:hover{ border-color:var(--line-2); background:var(--tint) }
.vdlg-kind:focus-visible{ outline:2px solid var(--focus); outline-offset:1px }
.vdlg-kind i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--soc); color:#fff; flex:none }
.vdlg-kind i svg{ width:13px; height:13px }
.vdlg-kind.is-x i{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28) }
.vdlg-kind[aria-checked="true"]{ border-color:var(--soc); background:color-mix(in srgb, var(--soc) 12%, var(--panel)); box-shadow:0 0 0 1px var(--soc) }
.vdlg-kind small{ font-size:.66rem; color:var(--ink-2); letter-spacing:.04em }
.vdlg-groups{ display:flex; flex-direction:column; gap:4px; max-height:300px; overflow:auto; scrollbar-width:thin }
.vdlg-group{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer }
.vdlg-group:hover{ background:var(--tint) }
.vdlg-group:has(input:checked){ background:var(--tint-2); border-color:var(--line-2) }
.vdlg-group input[type="radio"]{ width:16px; height:16px; margin:0; flex:none }
.vdlg-group span{ flex:1; min-width:0; font-size:.9rem }
.vdlg-group small{ font-size:.74rem; color:var(--ink-2) }
.vdlg-group .input{ flex:1 }
.vdlg-palette .palette-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 236px), 1fr)); max-height:min(58vh, 540px); overflow:auto; padding:2px; scrollbar-width:thin }
.vdlg-palette .palette-card{ align-items:flex-start; min-height:96px }
.vdlg-palette .palette-card small{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.vdlg-prompt{ display:flex; flex-direction:column; gap:8px }
@media (max-width:760px){
  .vdlg-img{ grid-template-columns:minmax(0,1fr) }
  .vdlg-aside{ padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:14px }
}

/* a description the owner should write afresh (a replaced photo) */
.vdlg-img .input.is-attn{ border-color:var(--warn, #c98a12); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn, #c98a12) 18%, transparent) }