/* =====================================================================
   Profile redesign (2026-07-04) — Decision Hero + Refined Dossier mix
   (design-concepts/profile-redesign prototypes P1 hero + P2 tabs + v2
   Decision Brief AI Summary; NO scorecard strip by direction).
   2026-07-07 — inner tabs (AI / Comments / Messages / Jobs / Events /
   Pre-Screening / Emails) rebuilt as Cobalt cards on the same soft
   canvas as Details (design-system.md §10; tokens from vh-tokens.css).
   ===================================================================== */

.vhp-shell {
    --vhp-section-gap: 12px;
    max-width: 100%;
    position: relative;
    background: var(--vh-surface);
}
.vhp-public-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}
.vhp-public-shell .vhp-hero {
    border-radius: 20px;
}
.vhp-public-shell .vhp-sticky {
    top: 12px;
}
@media (max-width: 700px) {
    .vhp-public-shell { padding: 12px 8px 24px; }
    .vhp-public-shell .vhp-sticky { top: 4px; }
}
.vhp-shell.in-modal {
    padding: 0 16px 16px;
}
.vhp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 35;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vh-line);
    border-radius: 10px;
    background: var(--vh-surface);
    color: var(--vh-muted);
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.vhp-close:hover { color: var(--vh-ink); border-color: var(--vh-line-strong); background: var(--vh-surface-soft); }
.vhp-close:focus-visible { outline: 3px solid rgb(var(--vh-primary-hover-rgb) / .2); outline-offset: 2px; }
.vhp-shell.in-modal .vhp-close { top: 30px; }
.vhp-shell.in-modal .vhp-hero { padding-right: 76px; }

/* ---- hero card: hero + actions strip in ONE rounded container (P1) ---- */
.vhp-hero-card {
    border: 1px solid var(--vh-line);
    border-radius: 20px;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
    margin-bottom: var(--vhp-section-gap);
}
.vhp-hero {
    position: relative;
    border-radius: 20px 20px 0 0;
    padding: 26px 30px 22px;
    background:
        radial-gradient(540px 220px at 88% -40%, var(--vh-profile-hero-glow-a) 0, var(--vh-transparent) 60%),
        radial-gradient(620px 260px at 0% -30%, var(--vh-profile-hero-glow-b) 0, var(--vh-transparent) 60%),
        linear-gradient(180deg, var(--vh-profile-hero-surface), var(--vh-surface));
}
.vhp-hero-top { display: flex; gap: 20px; align-items: flex-start; }
/* Doubled selector so this wins over the base .vh-avatar rule that sits later
   in the file (same single-class specificity otherwise). */
.vh-avatar.vhp-ava {
    flex: 0 0 auto;
    width: 96px; height: 96px;
    margin: 0;                       /* the base .vh-avatar centers itself for the old rail */
    font-size: 1.7rem;
    box-shadow: 0 0 0 4px var(--vh-color-white), 0 0 0 6px var(--vh-blue-tint);
    /* prototype .ava — green gradient behind the initials */
    background: linear-gradient(135deg, var(--vh-profile-success-start), var(--vh-profile-success-end));
    color: var(--vh-color-white);
    font-weight: 800;
}
.vhp-profile-avatar-link { text-decoration: none; cursor: pointer; }
.vhp-profile-avatar-link:focus-visible {
    outline: 3px solid rgb(var(--vh-primary-hover-rgb) / .3);
    outline-offset: 4px;
}
.vhp-id { flex: 1; min-width: 0; padding-top: 2px; text-align: left; }
.vhp-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vhp-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--vh-ink); }
.vhp-name-link,
.vhp-name-link:hover,
.vhp-name-link:visited {
    color: inherit;
    text-decoration: none;
}
.vhp-name-link { cursor: pointer; border-radius: var(--vh-radius); }
.vhp-name-link:focus-visible {
    outline: 3px solid rgb(var(--vh-primary-hover-rgb) / .25);
    outline-offset: 3px;
}
.vhp-status-pill {
    height: 20px;
    border-radius: var(--vh-radius-pill);
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.vhp-status-pill.future {
    background: var(--vh-blue-tint);
    color: var(--vh-blue-deep);
    border: 1px solid var(--vh-line-strong);
}
.vhp-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .9rem;
    color: var(--vh-body);
    margin: 3px 0 10px;
    font-weight: 500;
}
.vhp-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.vhp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--vh-line); background: var(--vh-surface-soft); color: var(--vh-body);
}
.vhp-chip.green { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); border-color: var(--vh-tonal-green-bd); }
.vhp-chip.blue { background: var(--vh-blue-tint); color: var(--vh-blue-deep); border-color: var(--vh-tonal-blue-bd); }
.vhp-chip.amber { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border-color: var(--vh-tonal-amber-bd); }
.vhp-chip.sm { padding: 1px 8px; font-size: .66rem; }

/* conic match gauge (prototype .gauge) */
.vhp-gauge {
    position: relative; width: 92px; height: 92px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    cursor: default;
}
.vhp-gauge::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--g, var(--vh-primary-hover)) calc(var(--p, 0) * 1%), var(--vh-line) 0);
}
.vhp-gauge::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--vh-surface); }
.vhp-gauge-in { position: relative; z-index: 1; text-align: center; line-height: 1; }
.vhp-gauge-in b { font-size: 1.25rem; font-weight: 800; color: var(--vh-ink); display: block; }
.vhp-gauge-in span { font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-muted); }
.vhp-gauge-lg { width: 104px; height: 104px; cursor: default; }
.vhp-gauge-stack {
    flex: 0 0 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.vhp-gauge-updated {
    max-width: 118px;
    color: var(--vh-muted);
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.vhp-gauge-updated.error { color: var(--vh-danger); }

/* ---- actions bar — the P1 strip inside the hero card ---- */
.vhp-actionbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 12px 18px; margin: 0; text-align: left;
    overflow: visible;
    border-top: 1px solid var(--vh-line);
    background: var(--vh-surface);
    border-radius: 0 0 20px 20px;
}
.vhp-spacer { flex: 1; }

/* Prototype .btn look for everything in the strip (including controls
   rendered by child components). primary = blue gradient, secondary =
   ghost (white/blue), light = soft grey, success = soft green. */
.vhp-actionbar .btn,
.vhp-actionbar > .btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    flex: 0 0 auto;
    white-space: nowrap;
}
.vhp-actionbar .btn-primary,
.vhp-actionbar > .btn-primary {
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary));
    border: 0;
    color: var(--vh-color-white);
    box-shadow: 0 10px 20px -8px rgb(var(--vh-primary-hover-rgb) / .6);
}
.vhp-actionbar .btn-primary:disabled { box-shadow: none; opacity: .55; }
.vhp-actionbar .btn-secondary {
    background: var(--vh-surface);
    color: var(--vh-primary);
    border: 1px solid var(--vh-line-strong);
}
.vhp-actionbar .btn-light {
    background: var(--vh-surface-soft);
    color: var(--vh-ink);
    border: 1px solid var(--vh-line);
}
.vhp-actionbar .btn-success {
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
    border: 1px solid var(--vh-tonal-green-bd);
}
.vhp-actionbar .btn-danger {
    background: var(--vh-error-soft);
    color: var(--vh-danger);
    border: 1px solid rgb(var(--vh-bootstrap-danger-rgb) / .3);
}
.vhp-addjob-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.vhp-addjob-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: 460px; max-width: 82vw; background: var(--vh-surface); border: 1px solid var(--vh-line-strong); border-radius: 10px;
    padding: 8px; box-shadow: 0 12px 26px -12px rgb(var(--vh-cobalt-shadow-rgb) / .3);
}
.vhp-addjob-hint {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--vh-muted); padding: 8px 6px 4px;
}
.vhp-addjob-error {
    margin: 8px 4px 4px;
    padding: 8px 10px;
    border-radius: var(--vh-radius-md);
    background: var(--vh-error-soft);
    color: var(--vh-danger);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}
.vhp-addjob-pos { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.vhp-action-picker {
    width: 390px;
    max-height: min(520px, 70vh);
    overflow-y: auto;
}
.vhp-action-picker-section + .vhp-action-picker-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--vh-line);
}
.vhp-action-picker-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 7px;
    border: 0;
    border-radius: 8px;
    background: var(--vh-transparent);
    color: var(--vh-ink);
    text-align: left;
    cursor: pointer;
}
.vhp-action-picker-row:hover {
    background: var(--vh-blue-tint);
}
.vhp-action-picker-row > input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--vh-primary);
}
.vhp-action-picker-row > i {
    width: 18px;
    flex: 0 0 auto;
    color: var(--vh-primary);
    text-align: center;
}
.vhp-action-picker-row > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vhp-action-picker-row strong {
    overflow: hidden;
    color: var(--vh-ink);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vhp-action-picker-row small {
    color: var(--vh-muted);
    font-size: .71rem;
}
.vhp-action-picker-row.event:disabled {
    cursor: default;
    opacity: .72;
}
.vhp-action-picker-row.event.selected > i {
    color: var(--vh-success);
}
.vhp-action-picker-empty {
    padding: 8px 7px;
    color: var(--vh-muted);
    font-size: .78rem;
}
.vhp-action-picker-message {
    margin: 8px 4px 2px;
    padding: 8px 10px;
    border-radius: var(--vh-radius-md);
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
    font-size: .78rem;
    font-weight: 600;
}
.vhp-action-feedback {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 4px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.vhp-action-feedback.success { color: var(--vh-success); }
.vhp-action-feedback.error { color: var(--vh-danger); }
.vhp-move-wrap { position: relative; display: inline-block; }
.vhp-caret { font-size: .7rem; margin-left: 2px; }
.vhp-move-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: min(220px, calc(100vw - 48px)); max-width: calc(100vw - 48px);
    background: var(--vh-surface); border: 1px solid var(--vh-line-strong); border-radius: 10px;
    padding: 6px; box-shadow: 0 12px 26px -12px rgb(var(--vh-cobalt-shadow-rgb) / .3);
    display: flex; flex-direction: column;
}
.vhp-move-menu a {
    padding: 8px 12px; border-radius: 7px; font-size: .85rem; font-weight: 600;
    color: var(--vh-ink); text-decoration: none; cursor: pointer;
}
.vhp-move-menu a:hover { background: var(--vh-blue-tint); color: var(--vh-blue-deep); }
.vhp-move-empty { padding: 8px 12px; font-size: .8rem; color: var(--vh-muted); }
@media (max-width: 900px) {
    .vhp-actionbar { flex-wrap: wrap; overflow-x: visible; }
    .vhp-spacer { display: none; }
    .vhp-move-wrap { flex: 0 0 100%; }
}

/* ---- tab bar (custom pill nav — replaces the Blazorise .nav-tabs so the bar
   can live inside .vhp-sticky and stay pinned with the hero). ---- */
.vhp-tabbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: 12px;
    box-shadow: var(--vh-shadow-surface);
}
.vhp-tab {
    flex: 1 1 0; min-width: 0;
    border: 0; background: var(--vh-transparent); border-radius: 8px;
    padding: 9px 8px; margin: 0;
    font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--vh-body);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; transition: background .12s, color .12s;
}
.vhp-tab:hover:not(.on) { color: var(--vh-ink); }
.vhp-tab.on { background: var(--vh-blue-tint); color: var(--vh-blue-deep); }
.vhp-tab.locked {
    color: var(--vh-muted);
    cursor: not-allowed;
    opacity: .72;
}
.vhp-tab.locked:hover { color: var(--vh-muted); }
.vhp-tab.locked i { margin-right: 5px; font-size: .72rem; }
/* Unread count on the Messages pill — inbound webhook pushes that landed while
   another tab was showing; cleared the moment the thread becomes visible.
   VanHack orange = the design system's non-destructive attention accent. */
.vhp-tab-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px;
    background: var(--vh-secondary); color: var(--vh-color-white);
    font-size: .68rem; font-weight: 700; line-height: 1.5;
}
@media (max-width: 700px) {
    .vhp-tabbar { overflow-x: auto; }
    .vhp-tab { flex: 0 0 auto; }
}

/* ---- sticky header: hero card + tab bar stay pinned to the top of the scroll
   container; only the body below scrolls (user direction 2026-07-07). The
   opaque bg + top padding mask scrolling content behind the card gaps and
   rounded corners. ---- */
.vhp-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--vh-surface);
    padding: 0 0 var(--vhp-section-gap);
    margin: 0;
    box-shadow: var(--vh-shadow-surface);
}
.vhp-shell.in-modal .vhp-sticky {
    padding-top: 16px;
}
/* Keep the hero↔tabbar spacing now that the old .nav-tabs margin is gone. */
.vhp-sticky .vhp-hero-card { margin-bottom: var(--vhp-section-gap); }

/* ---- body: persistent left rail + active-tab content on one soft-grey canvas.
   The rail sits AFTER content in the DOM (mobile stacks content first), so
   `order` pulls it into the left column on desktop. It now shows on EVERY tab. ---- */
.vhp-body { display: grid; grid-template-columns: 340px 1fr; gap: var(--vhp-section-gap); align-items: start; margin-top: 0; }
.vhp-body .vhp-side { order: -1; }
.vhp-content { min-width: 0; display: flex; flex-direction: column; gap: var(--vhp-section-gap); }
@media (max-width: 900px) {
    .vhp-body { grid-template-columns: 1fr; }
    .vhp-body .vhp-side { order: 0; }     /* content first when stacked */
}
.vhp-canvas {
    background: var(--vh-surface);
    border: 0;
    border-radius: 0;
    padding: 0;
}
.vhp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--vhp-section-gap); }
.vhp-side { display: flex; flex-direction: column; gap: var(--vhp-section-gap); }
.vhp-card {
    border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); background: var(--vh-surface);
    padding: 18px 20px; box-shadow: var(--vh-shadow-surface);
    text-align: left;
}

/* Prototype .sec-h — card section header. */
.vhp-sec-h {
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
    color: var(--vh-ink); margin: 0 0 12px;
}
.vhp-sec-sub {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--vh-muted); margin: 14px 0 8px;
}

/* Intro card — compact video on the left, text (bio or AI Summary) beside it. */
.vhp-intro-row { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 760px) { .vhp-intro-row { flex-direction: column; } .vhp-video-frame { width: 100%; } }
.vhp-video-frame {
    position: relative; border-radius: 14px; overflow: hidden;
    background: linear-gradient(135deg, var(--vh-profile-dark-start), var(--vh-profile-dark-end));
    aspect-ratio: 16 / 9;
    flex: 0 0 340px; width: 340px;
    max-width: 100%;
}
.vhp-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vhp-intro-text { flex: 1; min-width: 0; }
.vhp-bio { font-size: .9rem; line-height: 1.6; color: var(--vh-body); margin: 0; }
.vhp-ai-summary.intro { margin-bottom: 0; }
.vhp-ai-summary.intro + .vhp-match-sub { margin-top: 8px; }

/* Experience timeline (prototype .tl/.ti — blue ring dots + rail). */
.vhp-tl { position: relative; padding-left: 26px; }
.vhp-tl::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: var(--vh-line-strong);
}
.vhp-ti { position: relative; margin-bottom: 18px; }
.vhp-ti:last-child { margin-bottom: 0; }
.vhp-ti::before {
    content: ""; position: absolute; left: -26px; top: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--vh-surface); border: 3px solid var(--vh-primary-hover);
}
.vhp-ti.cur::before { background: var(--vh-primary-hover); }
.vhp-ti-role { font-size: .9rem; font-weight: 700; color: var(--vh-ink); }
.vhp-ti-co { font-size: .84rem; color: var(--vh-blue-deep); font-weight: 600; }
.vhp-ti-when {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem; color: var(--vh-muted); margin: 2px 0 4px;
}
.vhp-ti-desc { font-size: .82rem; color: var(--vh-body); line-height: 1.5; }

/* Languages side card — level bars (prototype P1 sidebar). */
.vhp-langs {
    display: grid;
    grid-template-columns: minmax(76px, 1fr) minmax(86px, 110px) 112px;
    align-items: center;
    column-gap: 10px;
    row-gap: 9px;
}
.vhp-lang-row { display: contents; }
.vhp-lang-name { font-size: .82rem; font-weight: 600; color: var(--vh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhp-lang-track { height: 8px; border-radius: 999px; background: var(--vh-surface-soft); overflow: hidden; border: 1px solid var(--vh-transparent); }
.vhp-lang-row.unverified .vhp-lang-track { background: var(--vh-surface); border-color: var(--vh-line); }
.vhp-lang-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vh-primary-hover), var(--vh-primary)); }
.vhp-lang-fill.blue { background: linear-gradient(90deg, var(--vh-primary-hover), var(--vh-primary)); }
.vhp-lang-fill.green { background: linear-gradient(90deg, var(--vh-profile-green-bright), var(--vh-green-600)); }
.vhp-lang-fill.grey { background: linear-gradient(90deg, var(--vh-profile-neutral-start), var(--vh-profile-neutral-end)); }
.vhp-lang-level {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .66rem; color: var(--vh-muted); text-align: right; white-space: nowrap;
}
.vhp-lang-verified {
    display: inline-flex;
    margin-left: 4px;
    color: var(--vh-green-600);
    font-size: .7rem;
    vertical-align: middle;
}

/* Evidence card accents. */
.vhp-good { color: var(--vh-tonal-green-text); }

/* ---- skills as chips-with-years (prototype .skill) ---- */
.vhp-skill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 8px;
    background: var(--vh-surface-soft); border: 1px solid var(--vh-line);
    color: var(--vh-blue-deep); font-size: .8rem; font-weight: 600;
}
.vhp-skill .yr {
    font-size: .64rem; font-weight: 700; color: var(--vh-primary);
    background: var(--vh-blue-tint); border-radius: var(--vh-radius-md); padding: 1px 6px;
}
.vhp-skill.soft { color: var(--vh-body); }
.vhp-skill.sm { padding: 3px 8px; font-size: .72rem; }

/* Completed Code Tests — score plus candidate-population comparison. */
.vhp-code-test-legend {
    color: var(--vh-muted);
    font-size: .78rem;
    line-height: 1.45;
    margin: -4px 0 12px;
}
.vhp-code-tests { display: grid; gap: 10px; }
.vhp-code-test {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--vh-line);
    border-radius: 12px;
    background: var(--vh-surface);
}
.vhp-code-test-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--vh-surface-soft);
    color: var(--vh-blue-deep);
    font-size: 1.45rem;
}
.vhp-code-test-name {
    color: var(--vh-ink);
    font-size: .88rem;
    font-weight: 700;
}
.vhp-code-test-date {
    color: var(--vh-muted);
    font-size: .7rem;
    margin-top: 2px;
}
.vhp-code-test-result {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
}
.vhp-code-test-score {
    color: var(--vh-ink);
    font-size: 1rem;
    font-weight: 800;
}
.vhp-code-test-comparison {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}
.vhp-code-test-comparison.above { color: var(--vh-tonal-green-text); }
.vhp-code-test-comparison.below { color: var(--vh-tonal-red-text); }
@media (max-width: 620px) {
    .vhp-code-test { grid-template-columns: 42px minmax(0, 1fr); }
    .vhp-code-test-result {
        grid-column: 2;
        align-items: flex-start;
    }
}

/* ---- Matching (v2 Decision Brief, now inside Details) ---- */
.vhp-match-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.vhp-match-title { font-size: 1rem; font-weight: 800; color: var(--vh-ink); }
.vhp-match-sub { font-size: .8rem; color: var(--vh-muted); margin-top: 2px; }

.vhp-ai-summary {
    font-size: .89rem; line-height: 1.6; color: var(--vh-profile-copy);
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / .22);
    border-radius: 13px; padding: 14px 17px; margin-bottom: 16px;
}
.vhp-ai-summary-label {
    display: flex; align-items: center; gap: 7px;
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--vh-blue-deep); margin-bottom: 8px;
}

.vhp-match-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
@media (max-width: 760px) { .vhp-match-points { grid-template-columns: 1fr; } }
.vhp-flag {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 9px 12px; border-radius: 11px; margin-bottom: 8px;
    border: 1px solid var(--vh-line); background: var(--vh-surface-soft);
    font-size: .82rem; color: var(--vh-profile-copy); line-height: 1.45;
}
.vhp-flag i { margin-top: 2px; flex: 0 0 auto; }
.vhp-flag.ok { background: rgb(var(--vh-green-500-rgb) / .1); border-color: var(--vh-tonal-green-bd); }
.vhp-flag.ok i { color: var(--vh-tonal-green-text); }
.vhp-flag.warn { background: rgb(var(--vh-amber-500-rgb) / .1); border-color: var(--vh-tonal-amber-bd); }
.vhp-flag.warn i { color: var(--vh-tonal-amber-text); }

.vhp-skillrow { border: 1px solid var(--vh-line); border-radius: 11px; padding: 10px 14px; margin-bottom: 8px; background: var(--vh-surface); }
.vhp-skillrow-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vhp-skillrow-check {
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: .62rem;
}
.vhp-skillrow-check.ok { background: rgb(var(--vh-green-500-rgb) / .14); color: var(--vh-tonal-green-text); }
.vhp-skillrow-check.no { background: rgb(var(--vh-bootstrap-danger-rgb) / .12); color: var(--vh-profile-error); }
.vhp-skillrow-name { font-size: .88rem; font-weight: 700; color: var(--vh-ink); }
.vhp-skillrow-years { font-size: .72rem; color: var(--vh-muted); font-weight: 600; }
.vhp-skillrow-analysis { font-size: .8rem; color: var(--vh-body); line-height: 1.5; margin-top: 5px; }

/* ---- avatar (hero) ---- */
:where(.vhp-shell) .vh-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto .75rem;
    background: var(--vh-profile-soft);
    color: var(--vh-profile-copy-muted);
    font-weight: 600;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

:where(.vhp-shell) .vh-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Realtime presence — green "online now" dot (prototypes `.ava .on`). The
   avatar keeps overflow visible so the dot can sit on the circle's edge; the
   img itself is rounded instead. */
:where(.vhp-shell) .vh-online-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--vh-success);
    border: 3px solid var(--vh-color-white);
    box-shadow: 0 1px 3px rgb(var(--vh-cobalt-shadow-rgb) / .3);
}

/* ---- shared bits still used by the Details cards + the two Blazorise
   modals (reject reasons / screening) ---- */
:where(.vhp-shell) .vh-kv {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    padding: .2rem 0;
}

:where(.vhp-shell) .vh-kv span {
    color: var(--vh-tailwind-gray-500);
}
:where(.vhp-shell) .vh-kv.vhp-kv-stacked {
    flex-direction: column;
    justify-content: flex-start;
    gap: .1rem;
    padding: .35rem 0;
}
.vhp-kv-stacked > b { color: var(--vh-ink); line-height: 1.4; }

:where(.vhp-shell) .vh-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

:where(.vhp-shell) .vh-linkwrap { position: relative; display: inline-flex; }
:where(.vhp-shell) .vh-social-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color, var(--vh-tailwind-gray-200));
    background: var(--vh-transparent);
    color: var(--vh-profile-copy-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}

:where(.vhp-shell) .vh-social-ic:hover {
    background: var(--vh-primary);
    color: var(--vh-color-white);
    border-color: var(--vh-primary);
}
:where(.vhp-shell) .vh-social-ic.available {
    color: var(--vh-primary);
    background: var(--vh-blue-tint);
    border-color: var(--vh-tonal-blue-bd);
}
:where(.vhp-shell) .vh-social-ic.available:hover {
    background: var(--vh-primary);
    color: var(--vh-color-white);
    border-color: var(--vh-primary);
}
:where(.vhp-shell) .vh-social-ic.empty,
:where(.vhp-shell) .vh-social-ic.empty:hover {
    color: var(--vh-muted);
    background: var(--vh-surface-soft);
    border-color: var(--vh-line);
    cursor: default;
    opacity: .7;
}

:where(.vhp-shell) .vh-section-title {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vh-tailwind-gray-500);
    margin: 1.1rem 0 .5rem;
}

:where(.vhp-shell) .vh-skills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

:where(.vhp-shell) .vh-entry {
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color, var(--vh-profile-line));
}

:where(.vhp-shell) .vh-entry-title {
    font-weight: 600;
    font-size: .92rem;
}

:where(.vhp-shell) .vh-entry-sub {
    color: var(--vh-tailwind-gray-500);
    font-size: .82rem;
    margin-top: .1rem;
}

:where(.vhp-shell) .vh-entry-desc {
    color: var(--vh-tailwind-gray-600);
    font-size: .85rem;
    margin-top: .35rem;
    white-space: pre-wrap;
}

/* Rendered '@Name' mentions inside a posted comment body. */
:where(.vhp-shell) .vh-entry-desc a[data-id] { color: var(--vh-primary); font-weight: 600; text-decoration: none; }
:where(.vhp-shell) .vh-entry-desc a[data-id]:hover { text-decoration: underline; }
:where(.vhp-shell) .vh-entry-desc a[data-selfmention] { background: var(--vh-blue-tint); border-radius: var(--vh-radius); padding: 0 .15rem; }

/* ---- flag picker (hero panel + comment composer) ---- */

/* ---- Screening stars (admin card + modal) ---- */
:where(.vhp-shell) .vh-stars span { color: var(--vh-tailwind-gray-300); font-size: .9rem; }
:where(.vhp-shell) .vh-stars span.on { color: var(--vh-rating-star); }
:where(.vhp-shell) .vh-seedetails { color: var(--vh-primary); cursor: pointer; font-size: .78rem; margin-left: .4rem; text-decoration: underline; font-weight: 600; }
:where(.vhp-shell) .vh-star-pick { display: flex; align-items: center; gap: .15rem; }
:where(.vhp-shell) .vh-star-pick > span { color: var(--vh-tailwind-gray-300); font-size: 1.5rem; cursor: pointer; line-height: 1; }
:where(.vhp-shell) .vh-star-pick > span.on { color: var(--vh-rating-star); }
:where(.vhp-shell) .vh-star-label { font-size: .85rem; color: var(--vh-tailwind-gray-600); margin-left: .5rem; font-weight: 600; }

/* ---- @mention dropdown (Add-to-Job popover reuses the same list look) ---- */
:where(.vhp-shell) .vh-mention-list { border: 1px solid var(--bs-border-color, var(--vh-tailwind-gray-200)); border-radius: .4rem; margin-top: .25rem; max-height: 180px; overflow-y: auto; }
:where(.vhp-shell) .vh-mention-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; cursor: pointer; font-size: .85rem; }
:where(.vhp-shell) .vh-mention-item:hover { background: var(--vh-blue-tint); }
:where(.vhp-shell) .vh-mention-item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
:where(.vhp-shell) .vh-mention-type { margin-left: auto; color: var(--vh-profile-meta-muted); font-size: .72rem; }

/* ---- Candidate flag bar (hero) ---- */
/* Hero flag icon (legacy ContactCard): grey = unflagged, colour = current flag.
   Doubles as the small icon-button style for the hero Edit pencil. */
.vhp-flag-wrap { position: relative; display: inline-flex; }
.vhp-flagbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: var(--vh-transparent); color: var(--vh-profile-icon-muted); font-size: .95rem; cursor: pointer;
    transition: background .12s, color .12s;
}
.vhp-flagbtn:hover { background: var(--vh-surface-soft); color: var(--vh-body); }
.vhp-flagbtn.red { color: var(--vh-danger); }
.vhp-flagbtn.yellow { color: var(--vh-warning); }
.vhp-flagbtn.copied { color: var(--vh-success); }
.vhp-menu-backdrop { position: fixed; inset: 0; z-index: 29; }
.vhp-flagmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 190px; background: var(--vh-surface); border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-card-sm); padding: 6px;
    box-shadow: var(--vh-shadow-pop, 0 2px 10px rgb(var(--vh-black-rgb) / .2));
}
.vhp-flagmenu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 0; background: var(--vh-transparent); border-radius: 8px;
    padding: 9px 10px; font-size: .85rem; font-weight: 600;
    color: var(--vh-ink); cursor: pointer; text-align: left;
}
.vhp-flagmenu button:hover { background: var(--vh-blue-tint); }
.vhp-flagmenu i.yellow { color: var(--vh-warning); }
.vhp-flagmenu i.red { color: var(--vh-danger); }
.vhp-flagmenu i.grey { color: var(--vh-profile-icon-muted); }
.vhp-linkmenu { min-width: 170px; white-space: nowrap; }
.vhp-linkmenu i { color: var(--vh-muted); width: 16px; text-align: center; }
:where(.vhp-shell) .vh-addjob { margin-top: .5rem; text-align: left; }

/* =====================================================================
   Tab panes (2026-07-07) — the seven inner tabs, Cobalt-style.
   ===================================================================== */
.vhp-pane { display: flex; flex-direction: column; gap: 16px; }

/* Small conic gauge (AI interview score) — same family as the hero gauge. */
.vhp-gauge-sm { width: 66px; height: 66px; cursor: default; }
.vhp-gauge-sm::after { inset: 5px; }
.vhp-gauge-sm .vhp-gauge-in b { font-size: .95rem; }
.vhp-gauge-sm .vhp-gauge-in span { font-size: .5rem; }

/* Rounded icon tile that anchors card headers and list rows. */
.vhp-tile {
    width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vh-blue-tint); color: var(--vh-primary);
    font-size: .95rem;
}

/* Card header row: tile + title/pills/meta + right accessory (gauge or chip). */
.vhp-rowhead { display: flex; align-items: center; gap: 14px; }
.vhp-rowhead-main { flex: 1; min-width: 0; }
.vhp-rowhead-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vhp-rowhead-title .t { font-size: .95rem; font-weight: 800; color: var(--vh-ink); }
.vhp-rowhead-meta { font-size: .78rem; color: var(--vh-muted); margin-top: 2px; }

/* Counter chip next to section headers / accordion summaries. */
.vhp-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 8px; border-radius: 999px;
    background: var(--vh-blue-tint); color: var(--vh-blue-deep, var(--vh-primary-active));
    font-size: .7rem; font-weight: 700; line-height: 16px;
}

/* Neutral tonal pill — pairs with the global .vh-pill-tonal base class. */
.vhp-pill-neutral {
    background: var(--vh-surface-soft);
    color: var(--vh-body);
    border-color: var(--vh-line);
}
/* Status pill that is also a button (reject-reasons drill-down). */
.vhp-pill-btn { cursor: pointer; }
.vhp-pill-btn:hover { filter: brightness(.96); }
.vhp-pill-btn i { font-size: .68rem; }

/* Small score chip (AI question scores, pre-screening group score). */
.vhp-scorechip {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    padding: 2px 10px; border-radius: 999px; border: 1px solid var(--vh-transparent);
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.vhp-scorechip.green { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); border-color: var(--vh-tonal-green-bd); }
.vhp-scorechip.blue { background: var(--vh-tonal-blue-bg, var(--vh-blue-tint)); color: var(--vh-tonal-blue-text, var(--vh-primary-active)); border-color: var(--vh-tonal-blue-bd, rgb(var(--vh-primary-hover-rgb) / .3)); }
.vhp-scorechip.amber { background: var(--vh-tonal-amber-bg, rgb(var(--vh-amber-500-rgb) / .13)); color: var(--vh-tonal-amber-text, var(--vh-amber-700)); border-color: var(--vh-tonal-amber-bd, rgb(var(--vh-amber-500-rgb) / .32)); }
.vhp-scorechip.red { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); border-color: var(--vh-tonal-red-bd); }
.vhp-scorechip.neutral { background: var(--vh-surface-soft); color: var(--vh-body); border-color: var(--vh-line); }

/* AI card body reuses the Details intro row (video left, AI Summary right).
   `solo` = no summary next to it — let the video breathe a bit wider. */
.vhp-ai-body { margin-top: 14px; }
.vhp-ai-body.solo .vhp-video-frame { flex-basis: 460px; width: 460px; }

/* Styled accordion (AI questions / transcript). */
.vhp-acc { border-top: 1px solid var(--vh-line); margin-top: 14px; padding-top: 12px; }
.vhp-acc summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    font-size: .82rem; font-weight: 700; color: var(--vh-profile-copy); list-style: none;
}
.vhp-acc summary::-webkit-details-marker { display: none; }
.vhp-acc summary:hover { color: var(--vh-blue-deep, var(--vh-primary-active)); }
.vhp-acc-ch { font-size: .66rem; color: var(--vh-muted); transition: transform .15s ease; }
.vhp-acc[open] > summary .vhp-acc-ch { transform: rotate(90deg); }
.vhp-acc-body { padding-top: 4px; }

.vhp-qa { padding: 10px 0; border-bottom: 1px dashed var(--vh-line); }
.vhp-qa:last-child { border-bottom: 0; padding-bottom: 2px; }
.vhp-qa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vhp-qa-q { font-size: .86rem; font-weight: 600; color: var(--vh-ink); }
.vhp-qa-just { font-size: .8rem; color: var(--vh-body); line-height: 1.55; margin-top: 4px; }

.vhp-transcript {
    max-height: 320px; overflow-y: auto; white-space: pre-wrap;
    font-size: .8rem; line-height: 1.55; color: var(--vh-body);
    background: var(--vh-surface-soft); border: 1px solid var(--vh-line);
    border-radius: 10px; padding: 12px 14px; margin-top: 10px;
}

/* Loading / empty states. */
.vhp-section-notice {
    display: flex; align-items: center; gap: 10px;
    min-height: 42px; padding: 9px 12px;
    background: var(--vh-surface-soft); border: 1px solid var(--vh-line); border-radius: 10px;
    color: var(--vh-body); font-size: .8rem; line-height: 1.4;
}
.vhp-section-notice > i { color: var(--vh-primary); flex: 0 0 auto; }
.vhp-section-notice > span { flex: 1; min-width: 0; }
.vhp-section-notice .vhp-minibtn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
    .vhp-section-notice { align-items: flex-start; flex-wrap: wrap; }
    .vhp-section-notice > span { flex-basis: calc(100% - 28px); }
    .vhp-section-notice .vhp-minibtn { margin-left: 24px; }
}
.vhp-loading { text-align: center; color: var(--vh-muted); font-size: .85rem; padding: 22px 16px; }
.vhp-empty { text-align: center; padding: 40px 20px; }
.vhp-empty-ic {
    width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vh-blue-tint); color: var(--vh-primary); font-size: 1.15rem;
}
.vhp-empty-t { font-size: .95rem; font-weight: 800; color: var(--vh-ink); }
.vhp-empty-s { font-size: .82rem; color: var(--vh-muted); margin: 4px auto 0; max-width: 440px; }

/* Compact gradient button (comment composer / message send). */
:where(.vhp-shell) .vh-btn-gradient.vhp-btn-sm { height: 34px; padding: 0 14px; font-size: .82rem; border-radius: 9px; }

/* Ghost icon button (edit / delete / refresh / modal close). */
.vhp-iconbtn {
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--vh-transparent);
    color: var(--vh-muted); cursor: pointer; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: .82rem;
    transition: background .15s, color .15s;
}
.vhp-iconbtn:hover { background: var(--vh-blue-tint); color: var(--vh-blue-deep, var(--vh-primary-active)); }
.vhp-iconbtn.danger:hover { background: var(--vh-error-soft); color: var(--vh-danger-active); }

/* Tiny text buttons for the inline save/confirm flows. */
.vhp-minibtn {
    border: 1px solid var(--vh-line-strong); background: var(--vh-surface); border-radius: 8px;
    padding: 3px 10px; font-size: .74rem; font-weight: 700; color: var(--vh-body); cursor: pointer;
}
.vhp-minibtn:hover { background: var(--vh-surface-soft); }
.vhp-minibtn.primary { background: var(--vh-gradient-primary, linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary))); border: 0; color: var(--vh-color-white); }
.vhp-minibtn.danger { background: var(--vh-error-soft); border-color: rgb(var(--vh-bootstrap-danger-rgb) / .35); color: var(--vh-danger-active); }

/* ---- Comments ---- */
.vhp-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.vhp-comment-head { display: flex; align-items: center; gap: 12px; }
.vhp-cava {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--vh-gradient-primary, linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary))); color: var(--vh-color-white);
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
    overflow: hidden;
}
.vhp-cava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vhp-comment-id { flex: 1; min-width: 0; }
.vhp-comment-author { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .88rem; color: var(--vh-body); }
.vhp-comment-author b { color: var(--vh-ink); font-weight: 700; }
.vhp-comment-co { color: var(--vh-muted); }
.vhp-comment-when { font-size: .72rem; color: var(--vh-muted); margin-top: 1px; }
.vhp-comment-context {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin-top: 3px; color: var(--vh-muted); font-size: .74rem;
}
.vhp-comment-context i { color: var(--vh-primary); font-size: .68rem; }
.vhp-icon-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Body indents to the avatar's text column (50px = 38px avatar + 12px gap). */
.vhp-comment-body { margin: 8px 0 0 50px; font-size: .86rem; }
.vhp-comment-edit { margin: 10px 0 0 50px; width: calc(100% - 50px); }
@media (max-width: 640px) {
    .vhp-comment-body, .vhp-comment-edit { margin-left: 0; width: 100%; }
}

/* ---- List cards (Jobs / Events / Emails) ---- */
.vhp-listhead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vhp-listhead .vhp-sec-h { margin: 0; flex: 1; }
.vhp-lrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--vh-profile-line); }
.vhp-listcard .vhp-lrow:last-child { border-bottom: 0; padding-bottom: 4px; }
.vhp-lrow-main { flex: 1; min-width: 0; }
.vhp-lrow-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9rem; font-weight: 700; }
.vhp-lrow-title a { color: var(--vh-ink); text-decoration: none; }
.vhp-lrow-title a:hover { color: var(--vh-primary); text-decoration: underline; }
.vhp-lrow-title .t { color: var(--vh-ink); }
.vhp-lrow-meta { font-size: .78rem; color: var(--vh-muted); margin-top: 2px; }
.vhp-metasep { margin: 0 6px; color: var(--vh-profile-separator); }
.vhp-lrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.vhp-lrow-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; color: var(--vh-muted); white-space: nowrap;
}
@media (max-width: 640px) {
    .vhp-lrow { flex-wrap: wrap; }
    .vhp-lrow-side { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; padding-left: 54px; }
}

/* ---- Pre-screening ---- */
.vhp-qlist { margin-top: 6px; }
.vhp-q { padding: 14px 0; border-bottom: 1px solid var(--vh-profile-line); }
.vhp-q:last-child { border-bottom: 0; padding-bottom: 4px; }
.vhp-q-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vhp-qnum {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vh-blue-tint); color: var(--vh-blue-deep, var(--vh-primary-active));
    font-size: .7rem; font-weight: 800;
}
.vhp-q-title { font-size: .88rem; font-weight: 700; color: var(--vh-ink); }
.vhp-q-ok { color: var(--vh-green-600); font-size: .9rem; }
.vhp-q-bad { color: var(--vh-red-600); font-size: .9rem; }
/* Answer bodies indent to the question text column (30px = 22px num + 8px gap). */
.vhp-q-body { margin: 10px 0 0 30px; }
@media (max-width: 640px) { .vhp-q-body { margin-left: 0; } }

.vhp-choices { display: flex; flex-direction: column; gap: 6px; }
.vhp-choice {
    display: flex; align-items: center; gap: 10px;
    font-size: .84rem; color: var(--vh-body);
    padding: 8px 12px; border: 1px solid var(--vh-line); border-radius: 10px; background: var(--vh-surface);
}
.vhp-choice-text { flex: 1; min-width: 0; }
.vhp-choice.correct { background: rgb(var(--vh-green-500-rgb) / .07); border-color: rgb(var(--vh-green-500-rgb) / .35); }
.vhp-choice.picked { font-weight: 600; color: var(--vh-ink); }
.vhp-choice.miss { background: rgb(var(--vh-bootstrap-danger-rgb) / .06); border-color: rgb(var(--vh-bootstrap-danger-rgb) / .3); }
/* Pure-CSS check mark — no icon-font dependency for the option state. */
.vhp-choice-mark {
    width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto; position: relative;
    border: 2px solid var(--vh-line-strong); background: var(--vh-surface);
}
.vhp-choice.correct .vhp-choice-mark { border-color: rgb(var(--vh-green-500-rgb) / .55); }
.vhp-choice-mark.on { border-color: var(--vh-primary); background: var(--vh-primary); }
.vhp-choice.correct .vhp-choice-mark.on { border-color: var(--vh-green-600); background: var(--vh-green-600); }
.vhp-choice.miss .vhp-choice-mark.on { border-color: var(--vh-red-600); background: var(--vh-red-600); }
.vhp-choice-mark.on::after {
    content: ""; position: absolute; left: 3px; top: 0; width: 5px; height: 9px;
    border: solid var(--vh-color-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vhp-choice-tag {
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--vh-tonal-green-text); background: var(--vh-tonal-green-bg); border: 1px solid var(--vh-tonal-green-bd);
    padding: 1px 7px; border-radius: 999px; flex: 0 0 auto;
}
.vhp-choice-tag.pick { color: var(--vh-blue-deep, var(--vh-primary-active)); background: var(--vh-blue-tint); border-color: var(--vh-tonal-blue-bd); }

.vhp-answer {
    background: var(--vh-surface-soft); border: 1px solid var(--vh-line);
    border-radius: 10px; padding: 10px 14px; font-size: .84rem; color: var(--vh-body);
    line-height: 1.55; white-space: pre-wrap;
}
.vhp-answer.none { color: var(--vh-muted); font-style: italic; }

/* ---- Emails table (mirrors /email-logs, Cobalt-toned) ----
   Fixed layout: Subject takes the slack, everything else has a set width —
   ellipsis instead of a horizontal scrollbar at normal card widths. */
.vhp-table-wrap { overflow-x: auto; margin-top: 4px; }
.vhp-table { width: 100%; min-width: 460px; table-layout: fixed; border-collapse: collapse; font-size: .82rem; color: var(--vh-body); }
.vhp-table th {
    text-align: left; padding: 8px 10px; white-space: nowrap;
    font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--vh-muted); border-bottom: 1px solid var(--vh-line-strong);
}
.vhp-table th.when { width: 148px; }
.vhp-table th.delivery { width: 118px; }
.vhp-table th.num { width: 62px; }
.vhp-table td { padding: 11px 10px; border-top: 1px solid var(--vh-profile-line); white-space: nowrap; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.vhp-table tbody tr:first-child td { border-top: 0; }
.vhp-table th.num, .vhp-table td.num { text-align: right; }
.vhp-table td.when {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; color: var(--vh-muted);
}
.vhp-table td.subject { font-weight: 600; color: var(--vh-ink); }
.vhp-email-row { cursor: pointer; }
.vhp-email-row:hover td { background: var(--vh-profile-hover); }

.vhp-kv-co { color: var(--vh-muted); font-weight: 500; margin-left: 4px; }

/* Instant tooltip (the native title delay is ~1.5s — too slow for the hero
   pills). Dark bubble above the element, shows in ~.12s on hover. */
:where(.vhp-shell) .vh-tip { position: relative; }
:where(.vhp-shell) .vh-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%);
    background: var(--vh-ink);
    color: var(--vh-color-white);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease .05s;
    z-index: 40;
}
:where(.vhp-shell) .vh-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid var(--vh-transparent);
    border-top-color: var(--vh-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease .05s;
    z-index: 40;
}
:where(.vhp-shell) .vh-tip:hover::after,
:where(.vhp-shell) .vh-tip:hover::before { opacity: 1; }

/* ---- Small Cobalt modal (flag reason / request mock) ---- */
.vhp-modal-sm { width: 460px; margin-top: 4rem; }
.vhp-flagmodal-title { display: flex; align-items: center; gap: 10px; }
.vhp-flagmodal-title i.red { color: var(--vh-danger); }
.vhp-flagmodal-title i.yellow { color: var(--vh-warning); }
.vhp-flagmodal-body { display: flex; flex-direction: column; gap: 14px; }
.vhp-modal-cta {
    width: 100%; height: 42px; border-radius: 10px; border: 0;
    font-size: .9rem; font-weight: 700;
}
.vhp-modal-cta:disabled { opacity: .55; }
.vhp-mock-hint { font-size: .84rem; color: var(--vh-body); }
.vhp-modal-error {
    padding: 9px 11px;
    border-radius: var(--vh-radius-md);
    background: var(--vh-error-soft);
    color: var(--vh-danger);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Stacked Preferences & Visa rows — title above, items below (legacy
   PreferencesCard layout: wins the full card width for long values). */
.vhp-stack { padding: 7px 0; }
.vhp-stack + .vhp-stack { border-top: 1px solid var(--vh-surface-soft); }
.vhp-stack-t {
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--vh-muted); margin-bottom: 2px;
}
.vhp-stack-v { font-size: .85rem; font-weight: 600; color: var(--vh-body); line-height: 1.45; }
.vhp-stack-v.muted { color: var(--vh-muted); font-weight: 500; }

/* ---- Email detail modal ---- */
.vhp-modal-backdrop {
    position: fixed; inset: 0; z-index: 1060;
    background: rgb(var(--vh-cobalt-shadow-rgb) / .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4rem 1rem 2rem; overflow-y: auto;
}
.vhp-modal {
    background: var(--vh-surface); border-radius: var(--vh-radius-card); width: 780px; max-width: 100%;
    box-shadow: 0 24px 60px -12px rgb(var(--vh-cobalt-shadow-rgb) / .45);
    display: flex; flex-direction: column; max-height: calc(100vh - 6rem);
}
.vhp-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; }
.vhp-modal-title {
    flex: 1; min-width: 0; font-size: 1rem; font-weight: 800; color: var(--vh-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vhp-modal-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 0 20px 14px; border-bottom: 1px solid var(--vh-line);
    font-size: .78rem; color: var(--vh-muted);
}
.vhp-modal-meta .when { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.vhp-modal-stat { display: inline-flex; align-items: center; gap: 5px; }
.vhp-modal-body { padding: 16px 20px 20px; overflow-y: auto; }

/* ---- Messages tab (communication hub — SMS/WhatsApp thread) ---- */
:where(.vhp-shell) .vh-msg-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 12px;
}
:where(.vhp-shell) .vh-msg-phone { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--vh-ink); font-weight: 700; }
.vhp-msg-num { letter-spacing: .01em; }
.vhp-msg-nophone { font-size: .84rem; color: var(--vh-muted); font-weight: 500; }

:where(.vhp-shell) .vh-msg-thread {
    display: flex; flex-direction: column; gap: .5rem;
    max-height: 420px; overflow-y: auto;
    padding: 14px; border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm);
    background: var(--vh-surface-soft); margin-bottom: 12px;
}
:where(.vhp-shell) .vh-msg-empty { font-size: .82rem; color: var(--vh-muted); text-align: center; padding: 1.4rem .5rem; }

:where(.vhp-shell) .vh-msg-row { display: flex; }
:where(.vhp-shell) .vh-msg-row.out { justify-content: flex-end; }
:where(.vhp-shell) .vh-msg-row.in { justify-content: flex-start; }

:where(.vhp-shell) .vh-msg-bubble {
    max-width: 78%; padding: .5rem .75rem; border-radius: 14px;
    font-size: .86rem; line-height: 1.45;
}
:where(.vhp-shell) .vh-msg-bubble.out {
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary)); color: var(--vh-color-white);
    border-bottom-right-radius: 4px;
}
:where(.vhp-shell) .vh-msg-bubble.in {
    background: var(--vh-surface); color: var(--vh-ink); border: 1px solid var(--vh-line);
    border-bottom-left-radius: 4px;
}
:where(.vhp-shell) .vh-msg-bubble.failed { background: var(--vh-error-soft); color: var(--vh-error-ink); border: 1px solid rgb(var(--vh-bootstrap-danger-rgb) / .4); }
:where(.vhp-shell) .vh-msg-body { white-space: pre-wrap; word-break: break-word; }
:where(.vhp-shell) .vh-msg-meta {
    display: flex; align-items: center; gap: .35rem;
    margin-top: .28rem; font-size: .68rem; opacity: .82;
}
:where(.vhp-shell) .vh-msg-bubble.in .vh-msg-meta { color: var(--vh-muted); }
:where(.vhp-shell) .vh-msg-meta .fa-whatsapp { font-size: .8rem; }
:where(.vhp-shell) .vh-msg-fail { font-weight: 700; }

:where(.vhp-shell) .vh-msg-composer { text-align: left; }
:where(.vhp-shell) .vh-msg-channel { display: inline-flex; gap: 0; border: 1px solid var(--vh-line-strong); border-radius: 9px; overflow: hidden; margin-bottom: .45rem; }
:where(.vhp-shell) .vh-msg-channel button {
    border: 0; background: var(--vh-surface); color: var(--vh-body); font-size: .78rem; font-weight: 700;
    padding: .35rem .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
:where(.vhp-shell) .vh-msg-channel button + button { border-left: 1px solid var(--vh-line-strong); }
:where(.vhp-shell) .vh-msg-channel button.on { background: var(--vh-blue-tint); color: var(--vh-blue-deep); }
:where(.vhp-shell) .vh-msg-channel button.on.wa { background: rgb(var(--vh-whatsapp-rgb) / .14); color: var(--vh-whatsapp); }
:where(.vhp-shell) .vh-msg-input { resize: vertical; font-size: .87rem; }
:where(.vhp-shell) .vh-msg-input:focus { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / .15); }
:where(.vhp-shell) .vh-msg-sendbar { display: flex; align-items: center; justify-content: space-between; margin-top: .55rem; }
:where(.vhp-shell) .vh-msg-count { font-size: .72rem; color: var(--vh-profile-meta-muted); }

/* Dark-mode exception (design-system §11): the hero wash blends pale blue
   radials over the surface — on dark those tints have no token equivalent, so
   swap the wash for its dark blue-tint counterpart; the avatar ring follows
   the surface instead of staying paper-white. */
.lpx-theme-dark .vhp-hero {
    background:
        radial-gradient(540px 220px at 88% -40%, rgb(var(--vh-primary-hover-rgb) / 0.16) 0, var(--vh-transparent) 60%),
        radial-gradient(620px 260px at 0% -30%, rgb(var(--vh-primary-hover-rgb) / 0.10) 0, var(--vh-transparent) 60%),
        linear-gradient(180deg, var(--vh-surface-soft), var(--vh-surface));
}
.lpx-theme-dark :where(.vhp-shell) .vh-avatar.vhp-ava {
    box-shadow: 0 0 0 4px var(--vh-surface), 0 0 0 6px var(--vh-blue-tint);
}