/* The shared shell: the one header, sidebar and footer every base draws
   (base.html, base_public.html, base_auth.html). Linked BEFORE the kit and
   base.css, as the <style> block it replaced was (premium redesign Tier 10),
   so later sheets still win. */
:root { --sidebar-w: 250px; --rail-w: 74px; --header-h: 60px; }
html, body { margin:0; padding:0; }
body { background:var(--vem-ground); color:var(--vem-text); font-family:"Vem Sans","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; }
html.dark body { background:var(--vem-ground); color:var(--vem-text); }
:where(a) { color:var(--vem-primary); } :where(html.dark) :where(a) { color:var(--vem-primary); }
input, button, select, textarea { font: inherit; } button { cursor:pointer; }

/* ===== ONE header ===== */
.vh-header { position:sticky; top:0; z-index:60; height:var(--header-h); flex:none;
             display:flex; align-items:center; justify-content:space-between; gap:12px;
             padding:0 clamp(16px,3vw,28px); background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
             border-bottom:1px solid var(--vem-line); }
html.dark .vh-header { background:var(--vem-surface); border-color:rgba(255,255,255,0.08); }
.vh-header-left { display:flex; align-items:center; gap:12px; min-width:0; }
.vh-header-right { display:flex; align-items:center; gap:10px; flex:none; }
@media (max-width: 480px) { .vh-header-right { gap:6px; } }
/* Smallest phones: the page follows the phone's theme, so the header toggle gives way. */
@media (max-width: 360px) { .vh-header-right .vh-theme-btn { display:none; } .vh-header-right .vh-hbtn { padding:8px 9px; font-size:12px; } }
.vh-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-width:0; }
/* A long institution name truncates; it never runs under the buttons on its right. */
.vh-brand-txt { font-weight:700; font-size:18px; letter-spacing:-0.02em; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* On a phone the logo names the institution; with no logo the name stays (two lines, below). */
@media (max-width: 480px) { .vh-brand-txt { font-size:15px; } .vh-brand--logo .vh-brand-txt { display:none; } }
/* Under white label the institution's name shows only here: two lines on a phone, never cut (AUDIT.md F1). */
@media (max-width: 599px) { .vh-brand-txt { font-size:14px; line-height:1.2; white-space:normal; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; } }
.vh-hamburger { display:none; width:38px; height:38px; border:0; background:transparent; border-radius:10px;
                color:var(--vem-text-2); align-items:center; justify-content:center; }
.vh-hamburger:hover { background:var(--vem-subtle); }
.vh-acct { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.vh-acct-av { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
              background:var(--vem-primary); color:var(--vem-on-primary); display:flex;
              align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.vh-acct-name { font-size:13.5px; font-weight:600; color:var(--vem-text-2); white-space:nowrap; }
html.dark .vh-acct-name { color:var(--vem-text-2); }
.vh-hbtn { white-space:nowrap; font-size:13px; font-weight:600; color:var(--vem-text-2); background:var(--vem-subtle); border:0; padding:8px 12px; border-radius:11px; text-decoration:none; }
html.dark .vh-hbtn { background:rgba(255,255,255,0.08); color:var(--vem-text-2); }
.vh-hbtn-brand { color:var(--vem-on-primary); background:var(--vem-primary);  }
.vh-tokens { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--vem-primary);
             text-decoration:none; background:var(--vem-primary-soft); padding:8px 12px; border-radius:11px; }

/* ===== app body: sidebar + main ===== */
.vh-body { flex:1; display:flex; min-height:0; }
.vh-sidebar { width:var(--sidebar-w); flex:none; background:var(--vem-surface); border-right:1px solid var(--vem-line);
              display:flex; flex-direction:column; position:sticky; top:var(--header-h);
              height:calc(100vh - var(--header-h)); overflow:hidden; transition:width .2s ease; z-index:50; }
html.dark .vh-sidebar { background:var(--vem-surface); border-color:rgba(255,255,255,0.08); }
.vh-sidetop { display:flex; align-items:center; justify-content:flex-end; padding:10px 12px 2px; }
.vh-collapse { width:30px; height:30px; border:0; background:transparent; border-radius:8px; color:var(--vem-muted);
               display:flex; align-items:center; justify-content:center; }
.vh-collapse:hover { background:var(--vem-subtle); color:var(--vem-text); }
html.dark .vh-collapse:hover { background:rgba(255,255,255,0.08); color:var(--vem-text); }
.vh-collapse svg { transition:transform .2s ease; }
.vh-navwrap { flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 12px 16px; }
.vh-grp { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--vem-muted);
          padding:0 12px; margin:16px 0 7px; white-space:nowrap; }
.vh-nav { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; text-decoration:none;
          color:var(--vem-text-2); font-size:13.5px; font-weight:500; transition:background .15s, color .15s; white-space:nowrap; }
html.dark .vh-nav { color:var(--vem-text-2); }
.vh-nav svg { flex:none; width:18px; height:18px; color:var(--vem-muted); }
.vh-nav:hover { background:var(--vem-subtle); color:var(--vem-text); }
html.dark .vh-nav:hover { background:rgba(255,255,255,0.06); color:var(--vem-text); }
.vh-nav.active { background:var(--vem-primary-soft); color:var(--vem-on-primary-soft); font-weight:600; }
.vh-nav.active svg { color:var(--vem-primary); }
html.dark .vh-nav.active, html.dark .vh-nav.active svg { color:var(--vem-on-primary-soft); }
.vh-nav .vh-badge { margin-left:auto; font-size:11px; font-weight:700; color:var(--vem-on-primary); background:var(--vem-warning); padding:1px 7px; border-radius:999px; }
.vh-side-foot { border-top:1px solid var(--vem-line); padding:12px; }
html.dark .vh-side-foot { border-color:rgba(255,255,255,0.08); }
.vh-side-prof-row { display:flex; align-items:center; gap:4px; margin-top:4px; }
.vh-side-prof-actions { display:flex; align-items:center; gap:2px; flex:none; }
.vh-side-act { width:30px; height:30px; border:0; background:transparent; border-radius:9px; color:var(--vem-muted);
               display:flex; align-items:center; justify-content:center; font-size:13px; padding:0;
               transition:background .15s, color .15s; }
.vh-side-act:hover { background:var(--vem-subtle); color:var(--vem-text); }
html.dark .vh-side-act:hover { background:rgba(255,255,255,0.08); color:var(--vem-text); }
.vh-side-act-out:hover { background:var(--vem-danger-soft); color:var(--vem-danger); }
html.dark .vh-side-act-out:hover { background:rgba(244,63,94,0.14); color:var(--vem-danger); }
.vh-side-prof { display:flex; align-items:center; gap:10px; padding:8px 10px; flex:1; min-width:0;
                border-radius:12px; text-decoration:none; color:inherit; transition:background .15s; }
.vh-side-prof:hover { background:var(--vem-subtle); }
html.dark .vh-side-prof:hover { background:rgba(255,255,255,0.06); }
.vh-side-prof-av { width:34px; height:34px; border-radius:50%; flex:none; object-fit:cover;
                   background:var(--vem-primary); color:var(--vem-on-primary); display:flex;
                   align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
                   letter-spacing:0.02em; }
.vh-side-prof-meta { min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.vh-side-prof-name { font-size:13.5px; font-weight:600; color:var(--vem-text);
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dark .vh-side-prof-name { color:var(--vem-text); }
.vh-side-prof-sub { font-size:11.5px; color:var(--vem-muted);
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dark .vh-side-prof-sub { color:var(--vem-muted); }

/* collapsed rail */
body.vh-collapsed .vh-sidebar { width:var(--rail-w); }
body.vh-collapsed .vh-grp, body.vh-collapsed .vh-nav span { display:none; }
body.vh-collapsed .vh-nav { justify-content:center; padding:9px; gap:0; position:relative; }
body.vh-collapsed .vh-nav .vh-badge { position:absolute; top:2px; right:6px; margin:0; padding:0 5px; }
body.vh-collapsed .vh-side-prof-row { flex-direction:column; gap:6px; }
body.vh-collapsed .vh-side-prof { justify-content:center; padding:8px 0; gap:0; width:100%; }
body.vh-collapsed .vh-side-prof-meta { display:none; }
body.vh-collapsed .vh-collapse svg { transform:rotate(180deg); }

.vh-scrim { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.4); z-index:55; opacity:0; transition:opacity .25s ease; }

.vh-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.vh-crumbbar { padding:12px clamp(16px,3vw,28px); border-bottom:1px solid var(--vem-line); background:var(--vem-surface); }
html.dark .vh-crumbbar { background:var(--vem-surface); border-color:rgba(255,255,255,0.08); }
.vh-content { padding:clamp(20px,3vw,32px); max-width:1400px; width:100%; }

/* mobile: sidebar becomes a drawer under the header */
@media (max-width: 1023px) {
    .vh-sidebar { position:fixed; left:0; top:var(--header-h); transform:translateX(-100%);
                  box-shadow:0 24px 60px rgba(8,30,35,0.25); }
    body.vh-drawer-open .vh-sidebar { transform:translateX(0); }
    body.vh-drawer-open .vh-scrim { display:block; opacity:1; }
    .vh-hamburger { display:flex; }
    body.vh-collapsed .vh-sidebar { width:var(--sidebar-w); }
    body.vh-collapsed .vh-grp, body.vh-collapsed .vh-nav span { display:revert; }
    body.vh-collapsed .vh-nav { justify-content:flex-start; padding:9px 12px; gap:11px; }
    body.vh-collapsed .vh-side-prof-row { flex-direction:row; gap:4px; }
    body.vh-collapsed .vh-side-prof { justify-content:flex-start; padding:8px 10px; gap:10px; width:auto; }
    body.vh-collapsed .vh-side-prof-meta { display:flex; }
    .vh-acct-name { display:none; }
}

/* auth split + form helpers (used by auth pages) */
.vh-auth { flex:1; min-height:0; display:grid; grid-template-columns:1.02fr 1fr; }
@media (max-width: 900px) { .vh-auth { grid-template-columns:1fr; } .vh-auth-aside { display:none; } }
.vh-form input[type=text], .vh-form input[type=email], .vh-form input[type=password],
.vh-form input[type=tel], .vh-form input[type=number], .vh-form select, .vh-inp {
    width:100%; padding:11px 13px; border:1px solid var(--vem-line); border-radius:12px; font-size:14px;
    background:var(--vem-surface); color:var(--vem-text); outline:none; transition:box-shadow .15s, border-color .15s; }
.vh-form input:focus, .vh-form select:focus, .vh-inp:focus { border-color:var(--vem-primary); box-shadow:0 0 0 3px var(--vem-primary-soft); }
html.dark .vh-form input, html.dark .vh-form select, html.dark .vh-inp { background:var(--vem-ground); color:var(--vem-text); border-color:var(--vem-line); }
.vh-lab { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--vem-text-2); }
html.dark .vh-lab { color:var(--vem-text-2); }
.vh-btn { width:100%; padding:12px; border:0; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--vem-on-primary);
          background:var(--vem-primary); 
          display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.vh-btn:hover { opacity:.95; }
.vh-formcol { display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vw,56px); overflow-y:auto; }
.vh-switch { display:inline-flex; background:var(--vem-subtle); border-radius:999px; padding:3px; }
html.dark .vh-switch { background:rgba(255,255,255,0.08); }
.vh-switch a { text-decoration:none; font-size:13px; font-weight:600; padding:7px 16px; border-radius:999px; color:var(--vem-muted); }
.vh-switch a.on { background:var(--vem-surface); color:var(--vem-primary); box-shadow:0 2px 8px rgba(15,23,42,0.10); }
html.dark .vh-switch a.on { background:var(--vem-primary-soft); color:var(--vem-on-primary-soft); }

/* ---- Tier 10: the frame on the kit (icons from {% icon %}, no inline styles) ---- */
.vh-ico-14 { width: 14px; height: 14px; }
.vh-ico-15 { width: 15px; height: 15px; }
.vh-ico-16 { width: 16px; height: 16px; }
.vh-ico-18 { width: 18px; height: 18px; }
.vh-ico-22 { width: 22px; height: 22px; }
/* Theme buttons hold both icons; html.dark picks which one shows. */
.vh-theme-btn .vh-ico-sun { display: none; }
html.dark .vh-theme-btn .vh-ico-sun { display: inline-block; }
html.dark .vh-theme-btn .vh-ico-moon { display: none; }
/* The brand: a solid tile in the institution's colour (no gradient), or its logo. */
.vh-brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none;
                 width: 34px; height: 34px; border-radius: 11px; background: var(--vem-primary); color: var(--vem-on-primary); }
.vh-brand-mark .vem-icon { width: 17px; height: 17px; }
.vh-brand-logo { height: 34px; width: auto; border-radius: 9px; flex: none; }
.vh-inline-form { display: inline; margin: 0; }
.vh-hbtn--select { padding: 8px 10px; }
.vh-hbtn--icon { width: 38px; height: 38px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.vh-tokens .vem-icon { color: var(--vem-primary); }
/* Breadcrumbs the view did not name (the script fills them from the path). */
.vh-crumbs-auto { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; overflow: hidden; flex-wrap: wrap; }
.vh-crumbs-auto .vem-icon { color: var(--vem-line-strong); }
.vh-crumbs-auto__link { color: var(--vem-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.vh-crumbs-auto__link:hover { color: var(--vem-text); }
.vh-crumbs-auto__here { color: var(--vem-text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* The plan grace banner. */
.vh-grace { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vh-grace__text { flex: 1; min-width: 200px; }
/* The footer every base shares. */
.vh-footer { margin-top: 64px; border-top: 1px solid var(--vem-line); background: var(--vem-surface); }
.vh-footer__inner { max-width: 72rem; margin: 0 auto; padding: 48px 24px; }
.vh-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.vh-footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .vh-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; } .vh-footer__brand { grid-column: auto; } }
.vh-footer__name { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: var(--vem-text); }
.vh-footer__name .vh-brand-mark, .vh-footer__name .vh-brand-logo { width: 36px; height: 36px; }
.vh-footer__name .vh-brand-logo { width: auto; }
.vh-footer__line { margin: 0; max-width: 260px; font-size: .875rem; line-height: 1.6; color: var(--vem-text-2); }
.vh-footer__col { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.vh-footer__head { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vem-text); }
.vh-footer__col a { display: inline-flex; align-items: center; min-height: 32px; color: var(--vem-text-2); text-decoration: none; }
.vh-footer__col a:hover, .vh-footer__bottom a:hover { color: var(--vem-primary); }
.vh-footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--vem-line); display: flex; flex-wrap: wrap;
                     align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--vem-muted); }
.vh-footer__bottom a { color: inherit; text-decoration: none; }