/* ============================================================
   visual.css — the visual editor's shell: the sidebar that is the website's rail, the
   top bar, the full-height working area with its inspector column, Site settings, and
   the placeholder a page shows before the canvas is installed.

   Loaded after kit.css, shell.css and editor.css. It overrides shell.css only inside
   `.vrail` and `.vwork`, so the legacy screens under "Advanced" keep their own look.

   THE SIDEBAR COPIES site.css's RAIL, NOT shell.css's. VISUAL-EDITOR-SPEC §9.1 asks for the
   sidebar to be styled exactly like the site's rail, and shell.css deliberately departed
   from it in two places (labels at 78% ink, the active pill one step darker) for the
   admin's sake. Here the site's values win: 52% labels, the active pill in --canvas,
   wrapping labels, the 38 px row. The editor-only affordances — the ⋯ menu, the grip,
   "Hidden pages", "+ New page" — appear on hover or below the site's groups, so at rest
   the top of the sidebar is the visitor's rail, pixel for pixel.

   THE WORKING AREA IS AN APP, NOT A DOCUMENT, on visual routes: .vwork.is-visual is one
   viewport tall and does not scroll; the view inside it decides what scrolls (the canvas
   frame, or the settings form). Legacy routes (.is-legacy) get the old document-scrolling
   layout back unchanged, because their sticky headers depend on it.
   ============================================================ */

/* A stroke icon declares fill="none" on its root (chrome.js's trophy, the editor glyphs in
   siteicons.js). kit.css paints every icon box's svg with fill:currentColor, which would
   turn a stroke into a blob. The attribute is the icon saying what it is; let it win. */
svg[fill="none"]{ fill:none !important }
/* kit.css gives every svg max-width:100%, which inside an auto-sized flex row resolves
   against the row and shrinks an icon to a sliver (measured: a 13 px arrow at 2.7 px). */
.vrail svg,.vtop svg,.vset svg,.vpending svg,.vpub svg{ flex:none; max-width:none }

/* ============================================================
   Sidebar — the site's rail, from the draft
   ============================================================ */
/* The site's body metrics, so every inherited line box in the rail is the site's height. */
.vrail{ font-size:16px; line-height:1.65 }
.vrail .rail-brand{ position:relative; padding:18px; margin:10px 10px 4px }
.vrail .rail-brand em{ color:color-mix(in srgb, var(--rail-ink) 62%, transparent) }
.vr-badge{
  position:absolute; top:9px; right:9px;
  padding:3px 7px 2px; border-radius:999px;
  font-family:var(--font-display); font-weight:500; font-size:.54rem; line-height:1.2;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--canvas); color:var(--on-canvas);
}

.vrail .rail-scroll{ padding:10px 10px 16px; scrollbar-width:thin; overscroll-behavior:contain }
.vrail .rail-label{
  margin:16px 0 6px; padding-left:10px;
  font-family:var(--font-display); font-weight:500; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--rail-ink) 52%, transparent);
}
.vrail .rail-group{ display:flex; flex-direction:column; gap:1px }

/* One page = one .vr-page (the drag item); one row in it per rail entry. Scoped by
   .vr-page rather than .vrail so the drag ghost — a clone parked on <body> — is styled
   the same as the row it came from. */
.vr-page{ position:relative; border-radius:9px; display:flex; flex-direction:column; gap:1px }
.vr-entry{ position:relative }
/* A tabbed page's entries are ONE page: a thin rule joins them down the left edge, so they
   read as one thing that drags together (sidebar.js header). */
.vr-page.has-tabs::before{
  content:''; position:absolute; left:3px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:color-mix(in srgb, var(--rail-ink) 18%, transparent); pointer-events:none;
}
.vr-page .rail-item,
.vrail .vr-tool,
.vrail .vr-adv{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border-radius:9px;
  font-family:var(--font-display); font-size:.9rem; font-weight:500; letter-spacing:.03em;
  line-height:1.3; color:var(--rail-ink); text-decoration:none; text-align:left;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.vr-page .rail-item > span,
.vrail .vr-tool > span,
.vrail .vr-adv > span{ flex:1; min-width:0; white-space:normal; overflow:visible; text-overflow:clip }
.vr-page .rail-ico,
.vrail .vr-tool .rail-ico,
.vrail .vr-adv .rail-ico{ display:grid; place-items:center; width:20px; height:20px; flex:none; opacity:.7 }
.vr-page .rail-ico svg,
.vrail .vr-tool .rail-ico svg,
.vrail .vr-adv .rail-ico svg{ width:20px; height:20px; display:block }
.vr-page .rail-out,
.vrail .vr-tool .rail-out{ width:14px; height:14px; opacity:0; flex:none; transition:opacity .16s var(--ease) }
.vr-page .rail-out svg,
.vrail .vr-tool .rail-out svg{ width:14px; height:14px; display:block }

.vr-page .rail-item:hover,
.vr-entry:hover .rail-item:not(.on),
.vrail .vr-tool:hover,
.vrail .vr-adv:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent); text-decoration:none }
.vr-page .rail-item:hover .rail-out,
.vrail .vr-tool:hover .rail-out{ opacity:.5 }
.vr-page .rail-item.on,
.vrail .vr-tool.on{ background:var(--canvas); color:var(--on-canvas) }
.vr-page .rail-item.on .rail-ico,
.vrail .vr-tool.on .rail-ico{ opacity:1 }
.vr-page .rail-item:focus-visible,
.vrail .vr-tool:focus-visible,
.vrail .vr-adv:focus-visible{ outline:2px solid var(--canvas-3); outline-offset:1px }

/* The ⋯ menu sits where the site's hover arrow is, and replaces it while it shows. */
.vr-more{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center;
  color:var(--rail-ink); opacity:0;
  transition:opacity .14s var(--ease), background .14s var(--ease);
}
.vr-more svg{ width:16px; height:16px }
.vr-entry:hover .vr-more,
.vr-more:focus-visible,
.vr-more[aria-expanded="true"]{ opacity:.8 }
.vr-more:hover{ opacity:1; background:color-mix(in srgb, var(--canvas) 14%, transparent) }
.vr-entry:has(.rail-item.on) .vr-more{ color:var(--on-canvas) }
.vr-entry:has(.rail-item.on) .vr-more:hover{ background:color-mix(in srgb, var(--on-canvas) 14%, transparent) }
.vr-entry:has(.vr-more):hover .rail-out{ opacity:0 }
.vr-grip{ display:grid; place-items:center; width:14px; height:20px; margin:0 -6px 0 -4px; opacity:.4; flex:none }
.vr-grip svg{ width:14px; height:18px }
@media (pointer:coarse){ .vr-more{ opacity:.55 } }

/* drag */
body.is-sorting, body.is-sorting *{ cursor:grabbing !important }
.vr-page.is-dragging{ opacity:.32 }
.vr-page.is-over-before::before,
.vr-page.is-over-after::after{
  content:""; position:absolute; left:6px; right:6px; height:2px; border-radius:2px;
  background:var(--canvas); pointer-events:none; z-index:2;
}
.vr-page.is-over-before::before{ top:-1.5px }
.vr-page.is-over-after::after{ bottom:-1.5px }
.vr-page.is-picked{ outline:2px dashed var(--canvas); outline-offset:1px }
.srt-ghost.vr-page{
  background:var(--rail-bg); color:var(--rail-ink); border-radius:9px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06) !important;
}
.srt-ghost.vr-page .vr-more{ display:none }

/* hidden pages: present, dimmed, still editable */
.vr-hidden-label{ display:flex; align-items:center; gap:6px }
.vr-hidden-label i{ display:grid; place-items:center; width:12px; height:12px }
.vr-hidden-label svg{ width:12px; height:12px }
.vr-hidden .rail-item:not(.on){ opacity:.52 }
.vr-hidden .vr-entry:hover .rail-item{ opacity:.85 }

.vr-new{
  display:flex; align-items:center; gap:11px; width:100%;
  margin-top:14px; padding:8px 10px; border-radius:9px;
  border:1px dashed color-mix(in srgb, var(--rail-ink) 28%, transparent);
  font-family:var(--font-display); font-size:.86rem; font-weight:500; letter-spacing:.04em;
  color:color-mix(in srgb, var(--rail-ink) 76%, transparent);
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.vr-new .rail-ico{ display:grid; place-items:center; width:20px; height:20px; opacity:.8 }
.vr-new .rail-ico svg{ width:18px; height:18px }
.vr-new:hover{
  background:color-mix(in srgb, var(--canvas) 9%, transparent);
  border-color:color-mix(in srgb, var(--rail-ink) 44%, transparent); color:var(--rail-ink);
}

/* below the site's groups: Site settings, Media library, Advanced */
.vr-tools{
  margin-top:18px; padding-top:2px;
  border-top:1px solid color-mix(in srgb, var(--rail-ink) 12%, transparent);
}
.vr-adv .vr-chev{ display:grid; place-items:center; width:16px; height:16px; opacity:.55; transition:transform .2s var(--ease) }
.vr-adv .vr-chev svg{ width:16px; height:16px }
.vr-adv[aria-expanded="true"] .vr-chev{ transform:rotate(90deg) }
.vr-adv-body{ padding:2px 0 4px }
.vr-adv-sub{
  display:flex; align-items:center; gap:8px; margin:12px 0 4px; padding-left:12px;
  font-family:var(--font-display); font-weight:500; font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--rail-ink) 52%, transparent);
}
.vr-adv-sub i{ display:grid; place-items:center; width:14px; height:14px }
.vr-adv-sub svg{ width:14px; height:14px }
.vr-tables{ display:flex; flex-direction:column; gap:1px; padding-left:30px }
.vr-table{
  display:block; padding:5px 10px; border-radius:7px;
  font-family:var(--font-display); font-weight:500; font-size:.8rem; letter-spacing:.03em; line-height:1.3;
  color:color-mix(in srgb, var(--rail-ink) 80%, transparent); text-decoration:none;
}
.vr-table:hover{ background:color-mix(in srgb, var(--canvas) 10%, transparent); color:var(--rail-ink); text-decoration:none }
.vr-table.on{ background:var(--canvas); color:var(--on-canvas) }

/* states */
.vr-loading{ display:flex; flex-direction:column; gap:7px; padding:30px 4px 0 }
.vr-skel{
  display:block; height:30px; border-radius:9px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rail-ink) 6%, transparent) 0%,
    color-mix(in srgb, var(--rail-ink) 11%, transparent) 50%, color-mix(in srgb, var(--rail-ink) 6%, transparent) 100%);
  background-size:200% 100%; animation:vr-shimmer 1.3s linear infinite;
}
.vr-skel:nth-child(2n){ width:78% }
@keyframes vr-shimmer{ to{ background-position:-200% 0 } }
.vr-error{
  margin:24px 4px 0; padding:12px 12px 14px; border-radius:10px;
  background:color-mix(in srgb, var(--danger) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 24%, transparent);
  font-size:.82rem; line-height:1.45; color:var(--rail-ink);
}
.vr-error p{ margin:0 0 10px }
.vr-retry{
  padding:6px 12px; border-radius:999px; background:var(--canvas-3); color:var(--on-canvas);
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.05em;
}

/* foot */
.vrail .vr-foot{ gap:6px }
.vr-away{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:10px;
  font-family:var(--font-display); font-size:.8rem; font-weight:500; letter-spacing:.06em;
  color:color-mix(in srgb, var(--rail-ink) 76%, transparent); text-decoration:none;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.vr-away .rail-ico{ display:grid; place-items:center; width:18px; height:18px; opacity:.75 }
.vr-away .rail-ico svg{ width:17px; height:17px }
.vr-away span{ flex:1; min-width:0 }
.vr-out{ display:grid; place-items:center; width:13px; height:13px; opacity:.55 }
.vr-out svg{ width:13px; height:13px }
.vr-away:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent); color:var(--rail-ink); text-decoration:none }
.vr-user{
  display:flex; align-items:center; gap:10px;
  padding:7px 7px 7px 9px; border-radius:12px;
  background:color-mix(in srgb, var(--canvas) 9%, transparent);
}
.vr-avatar{
  display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%;
  background:var(--canvas); color:var(--on-canvas);
  font-family:var(--font-display); font-weight:500; font-size:.74rem; letter-spacing:.06em;
}
.vr-who{ flex:1; min-width:0; line-height:1.2 }
.vr-who b{ display:block; font-size:.84rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vr-who em{
  display:block; margin-top:2px; font-family:var(--font-display); font-style:normal; font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--rail-ink) 62%, transparent);
}
.vr-signout{
  display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px;
  color:color-mix(in srgb, var(--rail-ink) 78%, transparent);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.vr-signout svg{ width:18px; height:18px }
.vr-signout:hover{ background:color-mix(in srgb, var(--canvas) 13%, transparent); color:var(--rail-ink) }

/* the mobile app bar carries the mark, as the site's does */
.mbar-brand img{ width:24px; height:auto }

/* icon picker in the page dialogs */
.vr-iconpick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:6px }
.vr-iconopt{
  display:grid; place-items:center; height:40px; border-radius:10px;
  background:var(--tint); border:1px solid var(--line); color:var(--ink);
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.vr-iconopt svg{ width:20px; height:20px }
.vr-iconopt:hover{ background:var(--tint-2); border-color:var(--line-2) }
.vr-iconopt.on{ background:var(--canvas-3); border-color:var(--canvas-3); color:var(--on-canvas) }

/* ============================================================
   Working area
   ============================================================ */
.vwork{ --vtop-h:52px }
.vwork.is-visual{ height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column }
.vwork.is-visual #banner:not(:empty){ flex:none; padding:12px 18px 0 }
.vwork.is-legacy .vtop{ display:none }
.vbody{ display:block; min-width:0 }
.vwork.is-visual .vbody{ flex:1; min-height:0; display:flex }
.vwork.is-visual .vview{ flex:1; min-width:0; min-height:0; overflow:auto; position:relative; scrollbar-width:thin }
.vview-pad{ padding:var(--gut) }
.vwork.is-publishing .vview,.vwork.is-publishing .vinsp{ pointer-events:none; opacity:.62; transition:opacity .2s var(--ease) }
.vwork.is-publishing .vview{ cursor:progress }
.vinsp{
  flex:none; width:340px; min-height:0; overflow:auto;
  background:var(--canvas-2); color:var(--on-canvas);
  border-left:1px solid color-mix(in srgb, var(--on-canvas) 12%, transparent);
  scrollbar-width:thin;
}
.vinsp:empty,.vwork.is-legacy .vinsp{ display:none }

/* ============================================================
   Top bar
   ============================================================ */
.vtop{
  flex:none; position:relative; z-index:45;
  /* The toggle is centred while both sides fit; when the actions need more than half,
     their column grows to max-content and the crumbs give way instead of being overlapped. */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr); align-items:center; gap:14px;
  height:var(--vtop-h); padding:0 12px 0 20px;
  background:var(--canvas-3); color:var(--on-canvas);
  border-bottom:1px solid color-mix(in srgb, var(--on-canvas) 11%, transparent);
}
.vtop-l,.vtop-r{ min-width:0; display:flex; align-items:center }
.vtop-r{ justify-content:flex-end; gap:8px }

.vtop-crumbs{ display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap }
/* The parents give way first (shrink 4), the current page last. */
.vtop-crumb{
  font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:color-mix(in srgb, var(--on-canvas) 58%, transparent);
  overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 4 auto;
}
a.vtop-crumb:hover{ color:var(--on-canvas); text-decoration:none }
.vtop-crumb[aria-current="page"]{
  font-size:1rem; letter-spacing:.03em; text-transform:none; color:var(--on-canvas); flex:0 1 auto;
}
.vtop-sep{ display:grid; place-items:center; width:12px; height:12px; flex:none; opacity:.4 }
.vtop-sep svg{ width:12px; height:12px }

.vtop-devices{
  display:inline-flex; gap:2px; padding:3px; border-radius:10px;
  background:color-mix(in srgb, var(--on-canvas) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--on-canvas) 10%, transparent);
}
.vtop-dev{
  display:grid; place-items:center; width:36px; height:28px; border-radius:7px;
  color:color-mix(in srgb, var(--on-canvas) 60%, transparent);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.vtop-dev svg{ width:18px; height:18px }
.vtop-dev:hover{ color:var(--on-canvas); background:color-mix(in srgb, var(--on-canvas) 8%, transparent) }
.vtop-dev.on{ background:var(--rail-bg); color:var(--canvas-3) }
.vtop.is-form .vtop-c{ visibility:hidden }

.vtop-history{ display:flex; gap:2px; margin-right:2px }
.vtop .vtop-hist{ width:32px; height:32px; color:color-mix(in srgb, var(--on-canvas) 82%, transparent) }
.vtop .vtop-hist svg{ width:19px; height:19px }
.vtop .vtop-hist:hover{ background:color-mix(in srgb, var(--on-canvas) 10%, transparent); color:var(--on-canvas) }
.vtop .vtop-hist:disabled{ opacity:.3; cursor:default; background:none }

.vtop-status{
  display:flex; align-items:center; gap:7px; margin:0 6px 0 2px;
  font-size:.78rem; line-height:1; white-space:nowrap;
  color:color-mix(in srgb, var(--on-canvas) 66%, transparent);
}
.vtop-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:#5fbf8c; box-shadow:0 0 0 3px rgba(95,191,140,.14) }
.vtop.has-changes .vtop-dot{ background:#f2b84b; box-shadow:0 0 0 3px rgba(242,184,75,.16) }
.vtop.has-changes .vtop-status{ color:var(--on-canvas) }
.vtop.is-busy .vtop-dot{ animation:vtop-pulse 1s ease-in-out infinite }
@keyframes vtop-pulse{ 50%{ opacity:.3 } }

.vtop-btn{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--on-canvas) 18%, transparent);
  font-family:var(--font-display); font-weight:500; font-size:.8rem; letter-spacing:.05em;
  color:var(--on-canvas); text-decoration:none; white-space:nowrap;
  transition:background .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease);
}
.vtop-btn svg{ width:13px; height:13px }
.vtop-btn:hover{ background:color-mix(in srgb, var(--on-canvas) 9%, transparent); border-color:color-mix(in srgb, var(--on-canvas) 30%, transparent); text-decoration:none }
.vtop-btn:disabled,.vtop-btn.is-off{ opacity:.38; pointer-events:none }
.vtop-discard{ border-color:transparent }

.vtop-publish{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 17px 0 13px;
  border-radius:999px; background:var(--rail-bg); color:var(--canvas-3);
  font-family:var(--font-display); font-weight:500; font-size:.86rem; letter-spacing:.06em;
  transition:filter .16s var(--ease), box-shadow .2s var(--ease), opacity .16s var(--ease), transform .16s var(--ease);
}
.vtop-publish svg{ width:17px; height:17px }
.vtop-publish:hover{ filter:brightness(1.07) }
.vtop-publish:active{ transform:translateY(1px) }
.vtop.has-changes .vtop-publish:not(:disabled){ box-shadow:0 0 0 4px color-mix(in srgb, var(--rail-bg) 14%, transparent) }
.vtop-publish:disabled{
  cursor:default; filter:none;
  background:color-mix(in srgb, var(--on-canvas) 9%, transparent);
  color:color-mix(in srgb, var(--on-canvas) 46%, transparent);
}
.vtop-publish.is-busy{ opacity:.7 }

.vtoast-link{ color:inherit; font-weight:600; text-decoration:underline; white-space:nowrap }

/* publish dialog */
.vpub > p{ margin:0 0 10px }
.vpub-units{ display:flex; flex-direction:column; gap:4px; margin:0 0 14px }
.vpub-unit{
  display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:var(--r-sm);
  background:var(--tint); font-size:.9rem;
}
.vpub-tick{ display:grid; place-items:center; width:16px; height:16px; color:var(--ok) }
.vpub-tick svg{ width:16px; height:16px }
.vpub-unit.is-destructive{ background:color-mix(in srgb, var(--warn) 12%, transparent) }
.vpub-unit.is-destructive .vpub-tick{ color:var(--warn) }
.vpub .note p{ margin:0 0 8px }
.vpub-foot{ font-size:.8rem; margin:0 0 4px }

/* ============================================================
   Before the canvas exists
   ============================================================ */
.vpending{ min-height:100%; display:grid; place-items:center; padding:clamp(24px, 6vh, 72px) var(--gut) }
.vpending-card{
  width:min(640px, 100%); padding:30px 32px 26px; border-radius:var(--r-lg);
  background:var(--canvas-2); color:var(--on-canvas);
  border:1px dashed color-mix(in srgb, var(--on-canvas) 22%, transparent);
}
.vpending-eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-canvas) 60%, transparent);
}
.vpending-eyebrow svg{ width:16px; height:16px }
.vpending-title{ font-size:clamp(1.6rem, 3vw, 2.2rem); letter-spacing:.03em; margin:0 0 10px }
.vpending-lede{ color:color-mix(in srgb, var(--on-canvas) 80%, transparent); max-width:52ch }
.vpending-blocks{ margin:20px 0 4px }
.vpending-blocks .f-label{ color:color-mix(in srgb, var(--on-canvas) 60%, transparent); margin:0 0 8px }
.vpending-blocks ol{ display:flex; flex-wrap:wrap; gap:6px; counter-reset:vb }
.vpending-blocks li{
  counter-increment:vb; display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 6px; border-radius:999px; font-size:.8rem;
  background:color-mix(in srgb, var(--on-canvas) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--on-canvas) 10%, transparent);
}
.vpending-blocks li::before{
  content:counter(vb); display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  font-family:var(--font-display); font-size:.7rem;
  background:color-mix(in srgb, var(--on-canvas) 12%, transparent);
}
.vpending-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.vpending-actions .btn-ghost{ --ink:var(--on-canvas); --tint:color-mix(in srgb, var(--on-canvas) 7%, transparent); --line:color-mix(in srgb, var(--on-canvas) 20%, transparent) }
.vpending-actions .btn-quiet{ color:color-mix(in srgb, var(--on-canvas) 72%, transparent) }
.vpending-why{ margin-top:18px; font-size:.78rem; color:color-mix(in srgb, var(--on-canvas) 62%, transparent) }
.vpending-why summary{ cursor:pointer }
.vpending-why p{ margin:8px 0 0; overflow-wrap:anywhere }

/* ============================================================
   Site settings
   ============================================================ */
.vset{ width:min(940px, 100%); margin:0 auto; padding:30px var(--gut) 120px; display:flex; flex-direction:column; gap:18px }
.vset-head{ padding:6px 2px 6px; color:var(--on-canvas) }
.vset-eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-canvas) 60%, transparent);
}
.vset-eyebrow svg{ width:16px; height:16px }
.vset-title{ font-size:clamp(1.7rem, 3vw, 2.3rem); letter-spacing:.04em; margin:0 0 8px }
.vset-lede{ color:color-mix(in srgb, var(--on-canvas) 78%, transparent); max-width:62ch; margin:0 0 16px }
.vset-index{ display:flex; flex-wrap:wrap; gap:6px }
.vset-index a{
  padding:6px 12px; border-radius:999px;
  font-family:var(--font-display); font-weight:500; font-size:.76rem; letter-spacing:.05em;
  color:color-mix(in srgb, var(--on-canvas) 82%, transparent);
  background:color-mix(in srgb, var(--on-canvas) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--on-canvas) 11%, transparent);
}
.vset-index a:hover{ color:var(--on-canvas); background:color-mix(in srgb, var(--on-canvas) 11%, transparent); text-decoration:none }

.vset-sec{ scroll-margin-top:16px; overflow:visible }
.vset-sec-head{ padding:18px 22px 4px }
.vset-sec-title{ font-size:1.12rem; letter-spacing:.03em; margin:0 0 4px }
.vset-sec-sub{ margin:0; font-size:.84rem; color:var(--ink-2); max-width:70ch }
.vset-sec-body{ padding:14px 22px 22px }
.vset-grid{ display:grid; gap:16px 18px; grid-template-columns:repeat(2, minmax(0,1fr)) }
.vset-field{ display:flex; flex-direction:column; gap:6px; min-width:0; border-radius:var(--r-sm) }
.vset-field.is-wide{ grid-column:1 / -1 }
.vset-field .f-label{ min-height:14px }
.vset-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:4px;
  background:#d9962a; box-shadow:0 0 0 3px rgba(217,150,42,.16);
}
.vset-field.is-flash{ animation:vset-flash 1.6s var(--ease) }
@keyframes vset-flash{ 0%,40%{ box-shadow:0 0 0 3px var(--danger) } 100%{ box-shadow:0 0 0 3px transparent } }

.vset-affix{ display:flex; align-items:center; gap:10px; min-width:0 }
.vset-affix .input{ flex:1 }
.vset-soc{
  display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px;
  background:var(--soc); color:#fff;
}
.vset-soc svg{ width:19px; height:19px }

.vset-stats .vset-field.is-counted{ grid-row:span 1 }
.vset-auto{ display:flex; align-items:center; gap:9px }
.vset-switch{
  position:relative; width:36px; height:20px; flex:none; border-radius:999px;
  background:color-mix(in srgb, var(--rail-ink) 22%, transparent);
  transition:background .18s var(--ease);
}
.vset-switch[aria-checked="true"]{ background:var(--canvas-3) }
.vset-knob{
  position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .18s var(--ease);
}
.vset-switch[aria-checked="true"] .vset-knob{ transform:translateX(16px) }
.vset-switch:disabled{ opacity:.5; cursor:not-allowed }
.vset-switch-label{ font-size:.8rem; font-weight:600; color:var(--ink) }
.vset-used{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:2px 0 0 }
.vset-used-k{
  font-family:var(--font-display); font-weight:500; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-right:2px;
}
.vset-used-k.is-none{ letter-spacing:0; text-transform:none; font-family:var(--font-body); font-size:.76rem; font-weight:400 }
.vset-used-p{
  padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:500;
  background:var(--tint-2); color:var(--ink); border:1px solid var(--line);
}
.vset-used-p:hover{ background:var(--canvas-3); color:var(--on-canvas); text-decoration:none }

.vset-ga-status{ display:flex; align-items:flex-start; gap:9px; min-height:40px; margin:0; padding-top:10px; font-size:.9rem; line-height:1.4 }
.vset-ga-status b{ display:block; font-weight:600 }
.vset-ga-status em{ display:block; font-style:normal; font-size:.8rem; color:var(--ink-2) }
.vset-ga-dot{ width:9px; height:9px; margin-top:6px; border-radius:50%; flex:none; background:color-mix(in srgb, var(--rail-ink) 30%, transparent) }
.vset-ga-dot.is-on{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent) }
.vset-help{ margin-top:16px; padding:12px 14px; border-radius:var(--r-sm); background:var(--tint); font-size:.84rem; line-height:1.55 }
.vset-help p{ margin:0 0 6px }
.vset-help p:last-child{ margin:0 }

.vset-footer{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) }
.vset-cols{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) }
.vset-col{ padding:11px 13px; border-radius:var(--r-sm); background:var(--tint); border:1px solid var(--line) }
.vset-col b{ display:block; font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px }
.vset-col li{ font-size:.84rem; line-height:1.6 }

/* ============================================================
   Responsive
   ============================================================ */
/* The status says how many changes at every width: the sentence where it fits, "3
   changes" where it does not (a lone coloured dot told the owner nothing). Discard keeps
   its icon when its word goes. */
.vtop-status-short{ display:none }
.vtop-discard svg{ width:15px; height:15px }
@media (max-width:1180px){
  .vtop-status-text{ display:none }
  .vtop-status-short{ display:inline }
  .vtop-status{ margin:0 4px }
}
@media (max-width:1199px){
  .vinsp{
    position:fixed; z-index:56; right:0; bottom:0; top:calc(var(--vbar-off, 0px) + var(--vtop-h));
    width:min(380px, 100%); box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
  }
}
@media (max-width:1080px){
  .vwork{ --vbar-off:var(--mbar-h) }
}
/* THE DEVICE TOGGLE STAYS WHILE IT CAN DO SOMETHING. A Tablet or Phone choice is saved per
   browser and stays in force, so hiding the toggle below 960 px (as this bar once did) left
   a narrow window stuck in a device frame with no way back to Desktop. Between 561 and 960
   it is drawn compact, sitting with the actions; at 560 and below it goes — and topbar.js
   stops honouring the saved choice there (NARROW_QUERY), because a window that narrow is
   already about a phone wide: Desktop shows what a phone shows. Keep the two in step. */
@media (max-width:960px){
  .vtop{ grid-template-columns:minmax(0,1fr) auto auto; padding:0 8px 0 14px; gap:8px }
  .vtop-devices{ padding:2px; gap:1px; border-radius:9px }
  .vtop-dev{ width:30px; height:26px; border-radius:7px }
  .vtop-dev svg{ width:16px; height:16px }
  .vtop-live span,.vtop-discard span{ display:none }
  .vtop-live,.vtop-discard{ padding:0 10px }
  .vset-grid,.vset-footer{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .vtop{ grid-template-columns:minmax(0,1fr) auto }
  .vtop-c{ display:none }
  .vtop-r{ gap:4px }
  .vtop-live{ display:none }
  .vtop-status{ font-size:.72rem }
  .vtop-crumb:not([aria-current]),.vtop-sep{ display:none }
  .vtop-publish{ padding:0 13px }
  .vtop .vtop-hist{ width:30px }
  .vset-sec-head{ padding:16px 16px 2px }
  .vset-sec-body{ padding:12px 16px 18px }
}
@media (prefers-reduced-motion:reduce){
  .vr-skel,.vtop.is-busy .vtop-dot{ animation:none }
  .vset-field.is-flash{ animation:none; box-shadow:0 0 0 3px var(--danger) }
}

/* ============================================================
   Page dialogs (sidebar ⋯ → Page settings, + New page)
   ============================================================ */
.vr-settings .form{ gap:18px }
.vr-dlg-sec{ display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px solid var(--line) }
.vr-dlg-sec:first-child{ padding-top:0; border-top:0 }
.vr-dlg-h{
  font-family:var(--font-display); font-weight:500; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); margin:0;
}
.vr-addr{ margin-top:-4px }
.menu-item > svg{ width:18px; height:18px; flex:none }

/* ============================================================
   Fixer round (2026-10-07): publish notes, warning lists in toasts
   ============================================================ */
.vpub-notes ul{ margin:0 0 6px 18px; list-style:disc }
.vpub-notes li{ font-size:.86rem; line-height:1.45; margin:2px 0 }
.vtoast-list{ margin:6px 0 0 16px; list-style:disc }
.vtoast-list li{ margin:3px 0; line-height:1.4 }
.vrestore-list{ margin:4px 0 10px 18px; list-style:disc }
.vrestore-list li{ font-size:.88rem; line-height:1.45; margin:2px 0 }