/* =====================================================================
   VaultorNet v30 — loaded last, after v29.css.

   Sections
     1. Wordmark and sign-in brand panel
     2. Top bar order (Compliance / Radar switch before search)
     3. Radar → Exposure: scanner views and quick checks
     4. Vendors: list, wizard, report and the public questionnaire
     5. Consultant workspace
     6. Alignment fixes across pages
     7. Responsive
   ===================================================================== */

/* ---- 1. Wordmark and sign-in brand panel ------------------------------ */
.vn-wordmark { font-size: 24px; }
/* `.nav a { font-size: 14px !important }` (app.css) used to shrink the logo
   to body size — the wordmark is excluded here. */
.nav.vn-topbar .pf-topbar-brand a.vn-wordmark { font-size: 25px !important; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.vn-wordmark-sm { font-size: 17px; }
.vn-wordmark-lg { font-size: 40px; }
.pf-foot .vn-wordmark-sm { font-size: 17px; }

/* The sign-in brand panel is the logo and nothing else, in white. */
.pf-login-brand.vn-login-brand,
[data-theme="dark"] .pf-login-brand.vn-login-brand {
  background: var(--color-accent-700, #1e6b41); color: #fff;
}
[data-theme="dark"] .pf-login-brand.vn-login-brand { background: var(--vn-accent-solid, #1e6b41); }
.pf-login-brand.vn-login-brand.is-consultant { background: var(--color-accent-700, #1e6b41); }
[data-theme="dark"] .pf-login-brand.vn-login-brand.is-consultant { background: var(--vn-accent-solid, #1e6b41); }
.vn-wordmark.vn-wordmark-hero,
.vn-wordmark.vn-wordmark-hero:hover {
  color: #fff !important; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(44px, 5.4vw, 72px); letter-spacing: -0.035em; line-height: 1; text-align: center;
}
/* Both portals use the same sign-in colours now. */
.pf-login-kicker-consultant { color: var(--color-accent-700); background: var(--color-accent-100); }
@media (max-width: 899px) {
  .pf-login { flex-direction: column; }
  .pf-login-brand.vn-login-brand { display: flex; flex: 0 0 auto; padding: 34px 16px; }
  .vn-wordmark.vn-wordmark-hero { font-size: 40px; }
}

/* ---- 2. Top bar ------------------------------------------------------- */
.vn-topbar .pf-topbar-right { gap: 8px; }
.vn-topbar .pf-topbar-right > .vn-modetoggle { margin: 0 4px 0 0; }
.vn-topbar .pf-topbar-right .pf-topbar-extras { display: inline-flex; align-items: center; gap: 4px; }

/* ---- 3. Radar → Exposure ---------------------------------------------- */
.vn-xp-head { margin-bottom: 4px; }
.vn-xp-sub { display: block; margin: 3px 0 0; font-size: 13px; color: var(--vn-soft); max-width: 78ch; line-height: 1.45; }
.vn-xp-groups { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--vn-line);
  border-radius: var(--vn-radius, 14px); background: var(--vn-card); }
.vn-xp-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vn-xp-sep { width: 1px; align-self: stretch; background: var(--vn-line-2); margin: 2px 4px; }
.vn-xp-label { flex: 0 0 70px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vn-soft); }
.vn-xp-group .vn-radar-jump { flex: 1 1 auto; min-width: 0; }
.vn-radar-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  font-weight: 650; border: 1px solid var(--vn-line-2); color: var(--color-text); text-decoration: none; background: transparent; }
.vn-radar-chip:hover { text-decoration: none; }
.vn-radar-chip.is-locked { color: var(--vn-soft); border-style: dashed; }
.vn-xp-tool-h { margin: 6px 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.vn-xp-tool-h + p { display: block !important; }

/* ---- 4. Vendors ------------------------------------------------------- */
/* How it works — four numbered steps in a row. */
.vd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 18px;
  border: 1px solid var(--vn-line); border-radius: 14px; background: var(--vn-card); overflow: hidden; counter-reset: vd; }
.vd-steps > div { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 0; }
.vd-steps > div + div { border-left: 1px solid var(--vn-line); }
.vd-steps > div + div::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-top: 1px solid var(--vn-line); border-right: 1px solid var(--vn-line); background: var(--vn-card); transform: rotate(45deg); }
.vd-steps b { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent-600, #2e9b5a) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-600, #2e9b5a) 30%, transparent); }
.vd-steps span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--vn-soft); line-height: 1.35; }
.vd-steps strong { font-size: 13.5px; color: var(--color-text); font-weight: 700; }

/* List table */
.vd-table td { vertical-align: middle; }
.vd-table td:first-child b { font-size: 14px; }
.vd-score { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; margin-right: 8px; border-radius: 8px;
  font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; vertical-align: middle;
  background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line-2); }
.vd-score.vd-high { color: var(--vn-bad); background: color-mix(in srgb, var(--vn-bad) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vn-bad) 35%, transparent); }
.vd-score.vd-medium { color: var(--vn-warn); background: color-mix(in srgb, var(--vn-warn) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vn-warn) 35%, transparent); }
.vd-score.vd-low { color: var(--vn-ok); background: color-mix(in srgb, var(--vn-ok) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vn-ok) 35%, transparent); }
.vd-acts { white-space: nowrap; text-align: right; }
.vd-acts > * { vertical-align: middle; }
.vd-acts > * + * { margin-left: 6px; }
.vd-more-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: 10px; display: grid; gap: 6px;
  background: var(--vn-raised, var(--color-surface)); border: 1px solid var(--vn-line-2); border-radius: 12px; box-shadow: var(--shadow-lg); text-align: left; white-space: normal; }
.vd-editrow { background: var(--vn-faint); padding: 16px 18px !important; }
.vd-editform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.vd-editform .field { margin: 0; }
.vd-editbtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.vd-link { max-width: 560px; margin: 18px auto 0; text-align: left; display: grid; gap: 6px; }
.vd-link label { font-size: 12px; font-weight: 700; color: var(--vn-soft); }
.vd-link .input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Wizard: step 1 (new vendor form), step 2 (questions), step 3 (send) */
.vd-newgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.vd-newgrid .field, .vd-sendgrid .field { margin: 0; display: grid; gap: 6px; }
.vd-newgrid .field label, .vd-sendgrid .field label { margin: 0; }
.vd-vlist { grid-template-columns: 1fr; }
.vd-vlist .tr2-opt { align-items: center; }
.vd-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-presets .btn { padding: 6px 12px; font-size: 12.5px; }
.vd-sendgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 18px; padding: 4px 22px 20px; }
.vq2-groups { display: grid; gap: 14px; padding: 6px 22px 20px; }
.vq2-group { border: 1px solid var(--vn-line); border-radius: 12px; overflow: hidden; background: var(--vn-card); }
.vq2-gh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 750; font-size: 13.5px;
  background: var(--vn-faint); border-bottom: 1px solid var(--vn-line); }
.vq2-gh input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent-600); }
.vq2-gh span { flex: 1; }
.vq2-gh em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--vn-faint);
  color: var(--vn-soft); box-shadow: inset 0 0 0 1px var(--vn-line); }
.vq2-q { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--vn-line); }
.vq2-gh + .vq2-q { border-top: 0; }
.vq2-q:hover { background: var(--vn-faint); }
.vq2-q.on { background: color-mix(in srgb, var(--color-accent-600, #2e9b5a) 7%, transparent); }
.vq2-q input { margin-top: 2px; }
.vq2-t { flex: 1; font-size: 13.5px; line-height: 1.45; }
.vq2-core { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent-600, #2e9b5a) 14%, transparent); vertical-align: 1px; }
.vq2-w { flex: 0 0 auto; min-width: 26px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 800;
  color: var(--vn-soft); background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line); }

/* Report */
.vr-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.vr-top > .rp-panel { margin: 0; }
.vr-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 16px; }
.vr-arc { stroke: var(--vn-ok); }
.vr-arc.vr-medium { stroke: var(--vn-warn); }
.vr-arc.vr-high { stroke: var(--vn-bad); }
.vr-score { font-family: var(--font-heading); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: -6px 0 8px; }
.vr-score small { font-size: 15px; color: var(--vn-soft); font-weight: 700; letter-spacing: 0; }
.vr-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.vr-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vr-tally > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--vn-faint);
  box-shadow: inset 0 0 0 1px var(--vn-line); }
.vr-tally b { font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.1; }
.vr-tally span { font-size: 12px; color: var(--vn-soft); font-weight: 650; }
.vr-tally .t-yes b { color: var(--vn-ok); }
.vr-tally .t-partial b { color: var(--vn-warn); }
.vr-tally .t-no b, .vr-tally .t-flag b { color: var(--vn-bad); }
.vr-note { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--color-accent-600, #2e9b5a); background: var(--vn-faint);
  border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.5; }
.vr-note span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--vn-soft); margin-bottom: 4px; }
.vr-area .rp-bar-t i.t-good { background: var(--vn-ok); }
.vr-area .rp-bar-t i.t-warn { background: var(--vn-warn); }
.vr-area .rp-bar-t i.t-bad { background: var(--vn-bad); }
.vr-flag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 18px; border-top: 1px solid var(--vn-line); }
.vr-flag b { font-size: 13.5px; font-weight: 650; line-height: 1.45; }
.vr-fix { margin-top: 6px; font-size: 13px; color: var(--vn-soft); line-height: 1.45; }
.vr-fix span { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-700); }
.vr-cmt { margin-top: 6px; font-size: 13px; font-style: italic; color: var(--vn-soft); }
.vr-w { min-width: 26px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--vn-soft);
  background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line); }
.vr-grow td { background: var(--vn-faint); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vn-soft); }

/* The public questionnaire a vendor opens (vendor_open.php) */
.vo-body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.vo-brand { max-width: 820px; margin: 0 auto; padding: 22px 20px 0; }
.vo-wrap { max-width: 820px; margin: 0 auto; padding: 18px 20px 60px; }
.vo-card { background: var(--vn-card, #fff); border: 1px solid var(--vn-line, rgba(0,0,0,.1)); border-radius: 16px; padding: 28px; }
.vo-center { text-align: center; padding: 48px 28px; margin-top: 30px; }
.vo-center h2 { margin: 12px 0 8px; font-size: 24px; }
.vo-center .tr2-done-ico { margin: 0 auto; }
.vo-head { margin: 8px 0 22px; }
.vo-kicker { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px; }
.vo-head h1 { margin: 0 0 8px; font-size: 27px; line-height: 1.2; letter-spacing: -0.02em; }
.vo-head p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.vo-msg { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--color-accent-600, #2e9b5a); background: var(--vn-faint, rgba(0,0,0,.03));
  border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.55; }
.vo-form { display: grid; gap: 18px; }
.vo-group { background: var(--vn-card, #fff); border: 1px solid var(--vn-line, rgba(0,0,0,.1)); border-radius: 16px; overflow: hidden; }
.vo-group h2 { margin: 0; padding: 14px 20px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--vn-line, rgba(0,0,0,.1));
  background: var(--vn-faint, rgba(0,0,0,.02)); }
.vo-q { padding: 16px 20px; display: grid; gap: 12px; }
.vo-q + .vo-q { border-top: 1px solid var(--vn-line, rgba(0,0,0,.08)); }
.vo-qt { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.vo-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent-600, #2e9b5a) 13%, transparent); }
.vo-ans { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 36px; }
.vo-opt { position: relative; cursor: pointer; }
.vo-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vo-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; height: 36px; padding: 0 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; border: 1px solid var(--vn-line-2, rgba(0,0,0,.18)); background: var(--vn-card, #fff); transition: background .15s, border-color .15s; }
.vo-opt:hover span { border-color: var(--color-accent-500, #2e9b5a); }
.vo-opt input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-accent-600, #2e9b5a) 40%, transparent); outline-offset: 2px; }
.vo-yes input:checked + span { background: var(--vn-ok, #2e9b5a); border-color: var(--vn-ok, #2e9b5a); color: #fff; }
.vo-partial input:checked + span { background: var(--vn-warn, #d99a2b); border-color: var(--vn-warn, #d99a2b); color: #1d1404; }
.vo-no input:checked + span { background: var(--vn-bad, #d4574a); border-color: var(--vn-bad, #d4574a); color: #fff; }
.vo-c { padding-left: 36px; }
.vo-c summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--color-accent-700); }
.vo-c textarea { margin-top: 8px; width: 100%; }
.vo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vo-submit { justify-self: start; min-width: 200px; justify-content: center; height: 44px; font-size: 15px; }
.vo-foot { margin: 0; font-size: 12.5px; }
.rp-bar.vr-area { grid-template-columns: 210px minmax(0, 1fr) 96px; }
@media (max-width: 700px) { .rp-bar.vr-area { grid-template-columns: 120px minmax(0, 1fr) 70px; } }

/* ---- 5. Consultant workspace ------------------------------------------ */
.cn-kpis { margin-bottom: var(--vn-gap); }
.cn-home-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--vn-gap); align-items: stretch; }
.cn-home-top > .vn-card + .vn-card { margin-top: 0; }
.cn-queue .vn-card-h { margin-bottom: 8px; }
.cn-qlist { list-style: none; margin: 0; padding: 0; }
.cn-qlist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vn-line); }
.cn-qlist li:first-child { border-top: 0; }
.cn-qdot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--vn-low); }
.cn-qlist .t-bad .cn-qdot { background: var(--vn-bad); }
.cn-qlist .t-warn .cn-qdot { background: var(--vn-warn); }
.cn-qlist .t-info .cn-qdot { background: var(--color-accent-500, var(--vn-ok)); }
.cn-qtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-qtxt b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-qtxt span { font-size: 12.5px; color: var(--vn-soft); }
.cn-score { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 10px; }
.cn-score .vn-kicker { align-self: stretch; text-align: left; }
.cn-score-big .cn-ring b { font-size: 24px; }
.cn-empty { padding: 18px 20px; font-size: 13.5px; color: var(--vn-soft); }
.cn-empty b { color: var(--color-text); }

.cn-ring { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.cn-ring svg { position: absolute; inset: 0; }
.cn-ring b { position: relative; font-family: var(--font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; }

.cn-fw, .cn-fws .cn-fw { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin: 0 4px 2px 0; border-radius: 6px;
  font-size: 11px; font-weight: 750; letter-spacing: .01em; color: var(--color-text); background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line-2); white-space: nowrap; }
.cn-sub { font-size: 12.5px; color: var(--vn-soft); line-height: 1.4; }
.cn-bad { color: var(--vn-bad) !important; }
.cn-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; }
.cn-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--vn-line); }
.cn-card-h .vn-kicker { margin: 0; }
.cn-table { width: 100%; }
.cn-table td { vertical-align: middle; }
.cn-table tr.is-off td { opacity: .62; }
.cn-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cn-acts { white-space: nowrap; text-align: right; }
.cn-acts > * { vertical-align: middle; display: inline-block; }
.cn-acts > * + * { margin-left: 6px; }
.cn-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cn-inline .input { min-width: 200px; }
.cn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cn-toolbar .vn-tabs { margin: 0; }

/* Home: the engagement filter, one row */
.cn-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; margin: 0 0 14px;
  background: var(--vn-card); border: 1px solid var(--vn-line); border-radius: var(--vn-radius); }
.cn-filter .input { height: 38px; padding: 0 10px; font-size: 13.5px !important; width: auto; min-width: 0; flex: 1 1 120px; }
.cn-filter .cn-filter-q { flex: 2 1 200px; }
.cn-filter .btn { height: 38px; }
.cn-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 0 6px; cursor: pointer; }
.cn-check input { width: 16px; height: 16px; accent-color: var(--color-accent-600); margin: 0; }

/* Questionnaires */
.cn-list { display: grid; gap: var(--vn-gap); }
.cn-list > .vn-card + .vn-card { margin-top: 0; }
.cn-row-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cn-row-t { flex: 1 1 260px; min-width: 0; }
.cn-row-t h3 { margin: 0 0 4px; font-size: 16px; }
.cn-row-t h3 a { color: inherit; }
.cn-row-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--vn-soft); }
.cn-row-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cn-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vn-line); }
.cn-dept { display: grid; grid-template-columns: minmax(0, 1fr) 70px 54px; gap: 10px; align-items: center; font-size: 12.5px; }
.cn-dept .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cn-dept .p { text-align: right; color: var(--vn-soft); font-variant-numeric: tabular-nums; }
.cn-dept.is-bad .p { color: var(--vn-bad); font-weight: 700; }

/* Controls / shared lists */
.cn-shared { list-style: none; margin: 0; padding: 0; }
.cn-shared li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--vn-line); }
.cn-shared li:first-child { border-top: 0; }
.cn-shared .code { flex: 0 0 auto; min-width: 58px; padding: 3px 8px; border-radius: 7px; text-align: center; font-size: 11.5px; font-weight: 800;
  background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line-2); }
.cn-shared .code.t-bad { color: var(--vn-bad); }
.cn-shared .code.t-warn { color: var(--vn-warn); }
.cn-shared .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-shared .t b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-shared .t span { font-size: 12px; color: var(--vn-soft); }
.cn-shared .n { flex: 0 0 auto; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 12.5px;
  background: var(--vn-faint); box-shadow: inset 0 0 0 1px var(--vn-line-2); }
.cn-shared .n.t-good { color: var(--vn-ok); } .cn-shared .n.t-warn { color: var(--vn-warn); } .cn-shared .n.t-bad { color: var(--vn-bad); }

/* Privacy */
.cn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.cn-checks li { position: relative; padding-left: 13px; line-height: 1.35; }
.cn-checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--vn-warn); }
.cn-checks li.t-bad::before { background: var(--vn-bad); }
.cn-checks li.more { color: var(--vn-soft); padding-left: 13px; }
.cn-checks li.more::before { display: none; }
.cn-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cn-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.cn-checklist .dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--vn-ok); }
.cn-checklist .t-warn .dot { background: var(--vn-warn); }
.cn-checklist .t-bad .dot { background: var(--vn-bad); }
.cn-checklist li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--vn-soft); line-height: 1.45; }
.cn-checklist b { font-size: 13.5px; color: var(--color-text); }

/* Vendors */
.cn-flags { display: inline-block; vertical-align: middle; }
.cn-flags summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--color-accent-700); }
.cn-flags ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 420px; font-size: 12.5px; line-height: 1.4; }

/* Engagement view */
.cn-fws { display: inline-flex; flex-wrap: wrap; }
.eng-tabs { overflow-x: auto; scrollbar-width: thin; }
.eng-tab { white-space: nowrap; }

.vn-grid-2.cn-top, .cn-page-grid { align-items: start; }

/* Product tour: a step inside the My Compliance / Compliance dropdown
   lifts the whole open panel above the dimming wash, so the item it
   points at is visible (the panel's own z-index used to trap it). */
.pf-navdrop[open] > .pf-navdrop-panel:has(.pf-tour-spotlight) { z-index: 949; }
.pf-navdrop.pf-tour-spotlight[open] > .pf-navdrop-panel { z-index: 948; }

/* ---- 6. Alignment fixes across pages ---------------------------------- */
/* Sticky save bars kept their button under the AI assistant button. */
.vn-save-bar, .vn-as-formbar, .vn-au-save { padding-right: 88px !important; }
@media (max-width: 640px) { .vn-save-bar, .vn-as-formbar, .vn-au-save { padding-right: 76px !important; } }
/* Room under the last card so nothing ends beneath the assistant button. */
.vn-app .pf-main { padding-bottom: 96px; }
/* One heading size for every page title, whichever markup the page uses
   (page_head(), the report-style header, or a plain h1). */
.vn-app .pf-main h1:not(.eng-title):not(.vo-h) { font-size: 24px !important; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.vn-app .rp-head { align-items: center; border-bottom: 1px solid var(--vn-line); padding-bottom: 18px; margin-bottom: 22px; }
.vn-app .tr2-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }

/* ---- 7. Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  .cn-home-top { grid-template-columns: 1fr; }
  .vd-editform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-steps > div:nth-child(3) { border-left: 0; }
  .vd-steps > div:nth-child(n+3) { border-top: 1px solid var(--vn-line); }
  .vd-steps > div:nth-child(3)::before { display: none; }
  .vr-top { grid-template-columns: 1fr; }
  .vr-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-newgrid, .vd-sendgrid, .vo-two { grid-template-columns: 1fr; }
  .vn-xp-group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vn-xp-label { flex: none; }
  .vn-xp-group .vn-radar-jump { width: 100%; }
  .vn-xp-sep { display: none; }
  .cn-table { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .vn-topbar .pf-topbar-right { gap: 2px; flex-wrap: nowrap; }
  .vn-topbar .vn-target, .vn-topbar .pf-icon-btn[data-tour="calendar"] { display: none; }
  .nav.vn-topbar .pf-topbar-brand a.vn-wordmark { font-size: 21px !important; }
  .vd-steps { grid-template-columns: 1fr; }
  .vd-steps > div + div { border-left: 0; border-top: 1px solid var(--vn-line); }
  .vd-steps > div + div::before { display: none; }
  .vd-editform { grid-template-columns: 1fr; }
  .vo-ans, .vo-c { padding-left: 0; }
  .cn-filter .input, .cn-filter .cn-filter-q { flex: 1 1 100%; }
  .cn-dept { grid-template-columns: minmax(0, 1fr) 60px 50px; }
}