/* =====================================================================
   Vaultornet Vero — v32 layer (loaded last on every page)

     1. Proper capitalisation: no forced CAPITALS anywhere. Text shows
        exactly as written (sentence case), so it follows normal English
        rules in both light and dark themes.
     2. Smooth transitions across the whole tool: page-to-page cross-fade,
        a thin progress bar while the next page loads, gentle easing on
        every interactive element, panels and accordions that glide.
     3. Setup in four phases (the step bar and phase navigation).
     4. Vero AI — the assistant's thinking animation and typed replies,
        and keeping it clear of the page's own buttons.
     5. "Choose a template" as a sidebar on the policy draft screen.
   ===================================================================== */

:root {
  --v32-ease: cubic-bezier(.22, 1, .36, 1);
  --v32-fast: 160ms;
  --v32-base: 260ms;
  --v32-slow: 420ms;
}

/* ---------------------------------------------------------------------
   1. Proper capitalisation
   --------------------------------------------------------------------- */
html body *,
html body *::before,
html body *::after { text-transform: none !important; }
.u-caps { text-transform: none !important; }

/* The small labels above headings used wide letter-spacing because they
   were in capitals. In sentence case that spacing looks broken. */
.pf-head-kicker, .vn-kicker, .si-kicker, .tr2-kicker, .vo-kicker, .eng-kicker, .dl-kicker,
.pf-navgroup, .vn-kpi .k, .vn-table th, .ui-table th, .pl-table th, .cr-table th, .tm th,
.pf-label, .vn-gl-h .t, .vn-sys h3, .vn-xp-label, .vr-note span, .vr-fix span, .vr-grow td,
.vn-act-day, .qn-impact-t, .dash-fill-t, .cr-steps-t, .pai-group-h, .bx-sugg-h, .ia2-hero-k,
.ia2-closedinfo span, .tq-k, .vn-cn-side-h, .vn-rd-stat .k, .vn-terms-step, .vn-legal-toc-h,
.vn-rq-h, .vn-ag-facts b, .pf-target-popover-kicker, .pf-airec-head span, .pf-airec h5,
.pf-airec-detail-h, .vn-conn-name span {
  letter-spacing: .005em !important;
}
.vn-app .pf-head-kicker { font-size: 12.5px; font-weight: 700; }
.vn-table th, .ui-table th, .pl-table th, .cr-table th { font-size: 12px; }

/* ---------------------------------------------------------------------
   2. Smooth transitions
   --------------------------------------------------------------------- */
/* Page to page: the browser cross-fades between pages (Chrome, Edge,
   Safari 18+). Elsewhere pages simply load as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: v32-fade-out var(--v32-base) var(--v32-ease) both; }
::view-transition-new(root) { animation: v32-fade-in var(--v32-slow) var(--v32-ease) both; }
@keyframes v32-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes v32-fade-in  { from { opacity: 0; transform: translateY(6px); } }

/* Content arrives with a short rise; cards follow in sequence. */
.vn-app .pf-main { animation: v32-rise var(--v32-slow) var(--v32-ease) backwards; }
.vn-app .pf-main > .vn-card,
.vn-app .pf-main > section,
.vn-app .pf-main > .pf-card { animation: v32-rise var(--v32-slow) var(--v32-ease) backwards; }
/* "backwards" only: once the rise has played nothing is left on the
   element, so panels inside it that use position: fixed (the Assign
   panel, pickers) still cover the whole window. */
.vn-app .pf-main > :nth-child(2) { animation-delay: 30ms; }
.vn-app .pf-main > :nth-child(3) { animation-delay: 60ms; }
.vn-app .pf-main > :nth-child(4) { animation-delay: 90ms; }
.vn-app .pf-main > :nth-child(5) { animation-delay: 120ms; }
.vn-app .pf-main > :nth-child(n+6) { animation-delay: 150ms; }
@keyframes v32-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Every interactive element eases instead of snapping. */
a, button, .btn, .input, input, select, textarea, label,
.vn-card, .pf-card, .vn-conn, .vn-tab, .vn-choice, .pf-navrow, .vn-nav a, .pf-pill, .vn-dot,
.pf-tpl-box, .vn-picker, .vn-phase a, .vn-tb-btn {
  transition:
    background-color var(--v32-fast) var(--v32-ease),
    border-color var(--v32-fast) var(--v32-ease),
    color var(--v32-fast) var(--v32-ease),
    box-shadow var(--v32-base) var(--v32-ease),
    opacity var(--v32-base) var(--v32-ease),
    transform var(--v32-base) var(--v32-ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.vn-conn:hover, .pf-tpl-box:hover, .vn-picker:hover { transform: translateY(-2px); }
:focus-visible { outline-offset: 2px; transition: outline-offset var(--v32-fast) var(--v32-ease); }

/* Accordions open and close smoothly where the browser supports it. */
:root { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size var(--v32-base) var(--v32-ease), opacity var(--v32-base) var(--v32-ease), content-visibility var(--v32-base) allow-discrete;
}
details[open]::details-content { block-size: auto; opacity: 1; }

/* Drawer, modals and toasts glide. */
.pf-drawer { transition: transform var(--v32-slow) var(--v32-ease) !important; }
.pf-drawer-backdrop { transition: opacity var(--v32-base) var(--v32-ease); }
.vn-pick-modal:not([hidden]) .vn-pick-box { animation: v32-pop var(--v32-base) var(--v32-ease) both; }
.vn-pick-modal:not([hidden]) .vn-pick-scrim { animation: v32-fade-in-plain var(--v32-base) ease both; }
.pf-toast { animation: v32-toast var(--v32-base) var(--v32-ease) both; }
@keyframes v32-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes v32-fade-in-plain { from { opacity: 0; } }
@keyframes v32-toast { from { opacity: 0; transform: translateY(12px); } }

/* Thin bar at the very top while the next page loads (v32.js). */
#v32-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent, #2f8f5b), color-mix(in srgb, var(--color-accent, #2f8f5b) 55%, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent, #2f8f5b) 60%, transparent);
  opacity: 0; transition: width 1.6s cubic-bezier(.1, .7, .2, 1), opacity .3s ease;
}
#v32-progress.is-on { opacity: 1; width: 82%; }
#v32-progress.is-done { opacity: 0; width: 100%; transition: width .2s ease, opacity .35s ease .15s; }

/* ---------------------------------------------------------------------
   3. Setup in four phases
   --------------------------------------------------------------------- */
.vn-phases { margin: 0 0 var(--vn-gap, 20px); position: relative; }
.vn-phases ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vn-phase a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--vn-line, rgba(0,0,0,.1)); background: var(--vn-card, var(--color-surface));
}
.vn-phase a:hover { border-color: var(--vn-line-2, rgba(0,0,0,.18)); transform: translateY(-1px); }
.vn-phase-n {
  flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  border: 2px solid var(--vn-line-2, rgba(0,0,0,.18)); color: var(--vn-soft, #667);
  transition: background-color var(--v32-base) var(--v32-ease), border-color var(--v32-base) var(--v32-ease), color var(--v32-base) var(--v32-ease);
}
.vn-phase-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vn-phase-t small { font-size: 11.5px; color: var(--vn-soft, #667); font-weight: 600; }
.vn-phase-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-phase-t em { font-style: normal; font-size: 12px; color: var(--vn-soft, #667); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-phase.is-done .vn-phase-n { background: color-mix(in srgb, var(--color-accent, #2f8f5b) 16%, transparent); border-color: var(--color-accent, #2f8f5b); color: var(--color-accent-700, var(--color-accent)); }
.vn-phase.is-current a { border-color: var(--color-accent, #2f8f5b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #2f8f5b) 18%, transparent); }
.vn-phase.is-current .vn-phase-n { background: var(--color-accent, #2f8f5b); border-color: var(--color-accent, #2f8f5b); color: #fff; }
.vn-phases-bar { height: 3px; border-radius: 3px; background: var(--vn-line, rgba(0,0,0,.08)); margin-top: 12px; overflow: hidden; }
.vn-phases-bar i { display: block; height: 100%; background: var(--color-accent, #2f8f5b); border-radius: 3px; transition: width var(--v32-slow) var(--v32-ease); }

.vn-phase-stage { animation: v32-phase-in var(--v32-slow) var(--v32-ease) backwards; }
.vn-phase-stage.is-back { animation-name: v32-phase-in-back; }
.vn-phase-stage.is-leaving { animation: v32-phase-out var(--v32-base) var(--v32-ease) both; }
.vn-phase-stage.is-leaving.is-back { animation-name: v32-phase-out-back; }
@keyframes v32-phase-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes v32-phase-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes v32-phase-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes v32-phase-out-back { to { opacity: 0; transform: translateX(24px); } }

.vn-phase-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--vn-line, rgba(0,0,0,.08));
}
.vn-phase-count { font-size: 12.5px; color: var(--vn-soft, #667); }
.vn-phase-next svg, .vn-phase-back svg { vertical-align: -2px; }
.vn-phase-next { min-width: 150px; justify-content: center; }
.vn-pickers-one { grid-template-columns: 1fr !important; }
.vn-held { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.vn-held li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--vn-line, rgba(0,0,0,.08)); border-radius: 10px; font-size: 13.5px; }
.vn-step-n svg { display: block; }

@media (max-width: 900px) {
  .vn-phases ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .vn-phases ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .vn-phase a { flex-direction: column; padding: 10px 4px; gap: 6px; text-align: center; }
  .vn-phase-t small, .vn-phase-t em { display: none; }
  .vn-phase-t b { font-size: 11.5px; white-space: normal; }
}

/* ---------------------------------------------------------------------
   4. Vero AI
   --------------------------------------------------------------------- */
.pf-chatbot-head .v32-vero { display: inline-flex; align-items: center; gap: 8px; }
.pf-chatbot-head .v32-vero small { display: block; font-size: 11px; font-weight: 500; color: var(--vn-soft, #667); }
.v32-vero-avatar {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--color-accent, #2f8f5b) 55%, #fff), var(--color-accent, #2f8f5b));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent, #2f8f5b) 40%, transparent);
}
.pf-chatbot-msg { animation: v32-msg-in var(--v32-base) var(--v32-ease) both; white-space: pre-wrap; }
@keyframes v32-msg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* The thinking card: orbiting dots, a shimmering status line that changes
   ("Reading your question…", "Searching your controls…"), and a progress
   sweep underneath. */
.v32-think {
  align-self: flex-start; display: flex; align-items: center; gap: 10px; max-width: 88%;
  padding: 10px 14px; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--color-accent, #2f8f5b) 8%, var(--vn-card, var(--color-surface, #fff)));
  border: 1px solid color-mix(in srgb, var(--color-accent, #2f8f5b) 22%, transparent);
  position: relative; overflow: hidden; animation: v32-msg-in var(--v32-base) var(--v32-ease) both;
}
.v32-think::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--color-accent, #2f8f5b), transparent);
  animation: v32-sweep 1.4s ease-in-out infinite;
}
@keyframes v32-sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.v32-orbit { position: relative; width: 22px; height: 22px; flex: 0 0 22px; }
.v32-orbit i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--color-accent, #2f8f5b); animation: v32-orbit 1.2s linear infinite;
}
.v32-orbit i:nth-child(2) { animation-delay: -.4s; opacity: .7; }
.v32-orbit i:nth-child(3) { animation-delay: -.8s; opacity: .45; }
@keyframes v32-orbit { from { transform: rotate(0deg) translateX(8px) rotate(0deg); } to { transform: rotate(360deg) translateX(8px) rotate(-360deg); } }
.v32-think-text {
  font-size: 13px; font-weight: 600;
  background: linear-gradient(90deg, var(--vn-soft, #667) 0%, var(--color-text, #111) 45%, var(--vn-soft, #667) 90%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: v32-shimmer 1.8s linear infinite;
}
@keyframes v32-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.v32-caret::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: currentColor; animation: v32-blink .9s steps(1) infinite;
}
@keyframes v32-blink { 50% { opacity: 0; } }
.pf-chatbot-msg-bot .v32-sources { display: block; margin-top: 8px; font-size: 11.5px; color: var(--vn-soft, #667); }

/* Keep the assistant button clear of fixed save bars and the bottom of
   wide tables (the people / departments screen). */
body.v32-has-bottom-bar .pf-chatbot { bottom: 92px !important; }
.pf-main { padding-bottom: 96px; }

/* ---------------------------------------------------------------------
   5. "Choose a template" as a sidebar
   --------------------------------------------------------------------- */
.pd-wrap.v32-pd { max-width: none; }
.v32-tpl-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.v32-tpl-side {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  border: 1px solid var(--vn-line, rgba(0,0,0,.1)); border-radius: 16px; background: var(--vn-card, var(--color-surface));
  overflow: hidden; animation: v32-side-in var(--v32-slow) var(--v32-ease) both;
}
@keyframes v32-side-in { from { opacity: 0; transform: translateX(-16px); } }
.v32-tpl-side-h { padding: 18px 18px 12px; border-bottom: 1px solid var(--vn-line, rgba(0,0,0,.08)); }
.v32-tpl-side-h h2 { margin: 0 0 4px; font-size: 18px; }
.v32-tpl-side-h p { margin: 0; font-size: 12.5px; color: var(--vn-soft, #667); line-height: 1.45; }
.v32-tpl-side-h .v32-tpl-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v32-tpl-side-h .v32-tpl-refs span {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #2f8f5b) 12%, transparent); color: var(--color-accent-700, var(--color-accent));
}
.v32-tpl-list { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.v32-tpl-list .pd-tpl.pf-tpl-box {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; box-shadow: none; overflow: visible;
}
.v32-tpl-list .pd-tpl.pf-tpl-box:hover { background: var(--vn-faint, rgba(0,0,0,.03)); border-color: var(--vn-line, rgba(0,0,0,.08)); transform: none; }
.v32-tpl-list .pd-tpl.pf-tpl-box.is-chosen,
.v32-tpl-list .pd-tpl.pf-tpl-box[aria-pressed="true"] {
  border-color: var(--color-accent, #2f8f5b); background: color-mix(in srgb, var(--color-accent, #2f8f5b) 8%, transparent);
}
.v32-tpl-list .pf-tpl-thumb { width: 64px; height: 82px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid var(--vn-line, rgba(0,0,0,.08)); }
.v32-tpl-list .pf-tpl-thumb { aspect-ratio: auto; padding: 6px; display: grid; place-items: center; }
.v32-tpl-list .pf-tpl-thumb-svg { width: 100%; height: 100%; }
.v32-tpl-preview .pf-tpl-thumb { padding: 16px; display: grid; place-items: center; }
.v32-tpl-preview .pf-tpl-thumb-svg { width: 100%; height: 100%; }
.v32-tpl-list .pf-tpl-badge-custom { display: none; }
.v32-tpl-list .pf-tpl-box-body { border: 0; padding: 0; }
.v32-tpl-list .pf-tpl-box-title { font-size: 13.5px; }
.v32-tpl-list .pf-tpl-box-meta { font-size: 11.5px; opacity: .7; }
.v32-tpl-list .v32-rec { font-size: 10.5px; font-weight: 700; color: var(--color-accent-700, var(--color-accent)); }
.v32-tpl-main { min-width: 0; }
.v32-tpl-preview {
  border: 1px solid var(--vn-line, rgba(0,0,0,.1)); border-radius: 16px; padding: 22px; background: var(--vn-card, var(--color-surface));
  display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 24px; align-items: start;
}
.v32-tpl-preview .pf-tpl-thumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--vn-line, rgba(0,0,0,.08)); aspect-ratio: 3 / 4; }
.v32-tpl-preview .pf-tpl-thumb .pf-tpl-badge-custom { display: none; }
.v32-tpl-preview-meta h3 { margin: 0 0 6px; font-size: 20px; }
.v32-tpl-preview-meta p { margin: 0 0 14px; color: var(--vn-soft, #667); font-size: 13.5px; line-height: 1.55; }
.v32-tpl-preview-anim { animation: v32-msg-in var(--v32-base) var(--v32-ease) both; }
@media (max-width: 900px) {
  .v32-tpl-layout { grid-template-columns: 1fr; }
  .v32-tpl-side { position: static; max-height: none; }
  .v32-tpl-list { max-height: 360px; }
  .v32-tpl-preview { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Respect "reduce motion"
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Inside the Setup picker window: no floating language / theme switch
   (the page behind it already has one). */
body.vn-embed [data-vn-switch] { display: none !important; }
.v32-shake { animation: v32-shake .45s var(--v32-ease); }
@keyframes v32-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Vero AI steps aside while a side panel or dialog is open. */
.pf-chatbot { transition: opacity var(--v32-base) var(--v32-ease), transform var(--v32-base) var(--v32-ease); }
body.v32-overlay-open .pf-chatbot { opacity: 0; pointer-events: none; transform: translateY(16px) scale(.9) !important; }
/* The Assign panel keeps Cancel / Save in view while the list scrolls. */
.vn3-drawer.is-live .vn3-drawer-f {
  position: sticky; bottom: calc(-1 * var(--space-4, 16px)); margin-top: auto;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface);
  border-top: 1px solid var(--vn-line, rgba(0,0,0,.08)); display: flex; justify-content: flex-end; gap: 8px;
}
.v32-lede { color: var(--vn-soft, #667); font-size: 14px; max-width: 70ch; margin: 0 0 var(--space-4, 16px); }