/* Generated by scripts/sync-vista-dashboard-pages.mjs. Edit vista-dashboard.html, then regenerate. */
/* Program tabs and tool row: the same fallback every VISTA page carries until the shared
       stylesheet loads. */
    .progtabs{display:flex;gap:6px;max-width:1320px;margin:12px auto 0;padding:0 14px;flex-wrap:wrap}
    .progtab{display:inline-flex;align-items:center;text-decoration:none;font-weight:800;font-size:14.5px;color:#1f2a44;background:#fff;border:1px solid #e1e6ef;border-radius:12px 12px 0 0;padding:11px 22px;box-shadow:0 1px 4px rgba(20,20,40,.06);position:relative;top:1px}
    .progtab:hover{color:#b8232a;border-color:#f0b8b8}
    .progtab.active{background:#b8232a;border-color:#b8232a;color:#fff}
    .topnav{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:10px 16px;margin-bottom:14px;box-shadow:0 1px 4px rgba(20,20,40,.06);flex-wrap:wrap}
    .topnav .nav-links{display:flex;gap:8px;flex-wrap:wrap}
    .navlink{display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:14px;color:#1f2a44;background:#f3f5f9;border:1px solid #e1e6ef;border-radius:10px;padding:9px 16px}
    .navlink:hover{background:#fdecec;border-color:#f0b8b8;color:#b8232a}
    .navlink.active{background:#b8232a;border-color:#b8232a;color:#fff}
    #featBtn{flex:none!important;white-space:nowrap}

    /* ==========================================================================================
       THE VISTA DASHBOARD, ONE VISUAL LANGUAGE (Anthony, 2026-10-06: "VISTA dashboard looks clunky
       not refined, needs to be revamped visually", and "pages shouldnt have tools you need just
       hidden towards bottom of page, should be able to be seen easily").
       - One surface: white, a 1px line, 12px corners, the same padding. No coloured rails, no grey bands.
       - Status is a small chip in the Members page colours (the shared stylesheet, section 21a). Red is kept for real
         problems and the one main action of a form or sheet; stale updates are one amber chip.
       - Every button is the same small secondary button: it looks 32px tall and is a 44px target
         (a 6px clear border round a 32px face), so a phone thumb and the layout tests get 44px.
       - Every tool sits at the top of its page, section or card. On a laptop the section bar stays
         on screen while the page scrolls.
       The host site cards are the Primary Dashboard's markup, drawn by the shared stylesheet; their
       look on this page is the shared stylesheet's section 21b, never a copy here (test/vista-site-cards.test.js).
       Everything here is prefixed vd- so it cannot collide with a shared class (styles.css already
       styles generic names like .who). ========================================================== */
    .pwrap{max-width:1320px;margin:0 auto;padding:0 18px 40px}
    .vd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .vd-ico{width:15px;height:15px;flex:none;display:inline-block;vertical-align:middle}

    /* ---- the header: title, one summary line, one muted line; the read time and Refresh as a small toolbar */
    html.rrcc-page-vista-dashboard body main .phead.vd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 24px;margin:0 0 16px;padding:22px 0 0}
    html.rrcc-page-vista-dashboard body main .phead.vd-head .phead-copy{display:contents}
    html.rrcc-page-vista-dashboard body main .phead.vd-head .phead-copy > *{grid-column:1 / -1}
    html.rrcc-page-vista-dashboard body main .phead.vd-head .phead-copy > h1{grid-column:1;grid-row:1}
    html.rrcc-page-vista-dashboard body main .phead.vd-head h1{margin:0 0 4px;font:700 28px/1.15 var(--rr-display,inherit);letter-spacing:-.025em;color:var(--rr-navy,#17233d)}
    html.rrcc-page-vista-dashboard body main .phead.vd-head #vdHeadline{margin:0;max-width:none;font-size:14.5px;line-height:1.5;color:var(--rr-body-copy,#3d3733)}
    html.rrcc-page-vista-dashboard body main .phead.vd-head .phead-note{width:auto;max-width:none;margin:2px 0 0;padding:0;border:0;border-radius:0;background:none;font-size:13px;line-height:1.5;color:var(--rr-muted,#5d5551)}
    .vd-headacts{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;position:relative;z-index:1}
    .vd-updated{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--rr-muted,#5d5551)}
    .vd-updated:has(#vdUpdated:empty){display:none}
    html.rrcc-page-vista-dashboard body main .phead.vd-head .vd-headacts{grid-column:2;grid-row:1;justify-content:flex-end;margin:0 -6px 0 0}

    /* ---- buttons: one small secondary button everywhere (and the red main action of a form or sheet) */
    .vd-btn{font:inherit;font-weight:600;font-size:12.5px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box;padding:0 11px;border:6px solid transparent;border-radius:14px;background:#fff;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--rr-line-strong,#d3ccc7);color:var(--rr-ink,#171514);text-decoration:none;text-align:center;cursor:pointer}
    html.rrcc-page-vista-dashboard body .vd-btn,html body button.vd-btn,html body a.vd-btn{min-height:44px;border:6px solid transparent;border-radius:14px;background-color:#fff;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--rr-line-strong,#d3ccc7);color:var(--rr-ink,#171514);font-weight:600;font-size:12.5px;padding:0 11px;text-decoration:none;transform:none}
    html.rrcc-page-vista-dashboard body .vd-btn:hover:not([disabled]):not([aria-disabled="true"]){box-shadow:inset 0 0 0 1px var(--rr-navy,#17233d);color:var(--rr-navy,#17233d);background-color:#f6f7fa}
    html.rrcc-page-vista-dashboard body .vd-btn:focus-visible{outline:2px solid var(--rr-red,#b4232b)!important;outline-offset:-4px!important;box-shadow:inset 0 0 0 1px var(--rr-line-strong,#d3ccc7)!important}
    html.rrcc-page-vista-dashboard body .vd-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--rr-navy,#17233d)!important;color:var(--rr-navy,#17233d);background-color:#f1f3f8}
    html.rrcc-page-vista-dashboard body .vd-btn[disabled],html.rrcc-page-vista-dashboard body .vd-btn[aria-disabled="true"]{opacity:.55;cursor:default}
    html.rrcc-page-vista-dashboard body .vd-btn.vd-go{background-color:var(--rr-red,#b4232b);box-shadow:none;color:#fff}
    html.rrcc-page-vista-dashboard body .vd-btn.vd-go:hover:not([disabled]){background-color:var(--rr-red-hover,#941c23);color:#fff;box-shadow:none}
    html.rrcc-page-vista-dashboard body .vd-btn.vd-go:focus-visible{box-shadow:none!important}
    .vd-btn svg{width:14px;height:14px;flex:none}
    html body button.vd-tap,.vd-tap{min-height:44px}
    .vd-acts{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-left:-6px}

    /* ---- banners: a notice amber, a failure red */
    .vd-banner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 12px;padding:9px 14px;border-radius:10px;border:1px solid var(--rr-amber-line,#efd9b4);background:var(--rr-amber-soft,#fdf3e3);color:var(--rr-amber,#8a5a12);font-size:13.5px;line-height:1.45;font-weight:600}
    .vd-banner.bad{border-color:var(--rr-red-line,#f0cdcd);background:var(--rr-red-soft,#fdf0f0);color:var(--rr-red,#b4232b)}

    /* ---- the section bar (audit, 2026-09-30, made a bar 2026-10-06): above the tiles, so the host site cards still
       come straight after them. On a laptop it stays on screen while the page scrolls, so every section's tools are
       one press away from anywhere on the page. */
    .vd-jumps{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0 0 14px}
    html.rrcc-page-vista-dashboard body .vd-jumps{position:sticky;top:var(--rr-stick,0px);z-index:40;box-sizing:border-box;margin:0 calc(-1 * max(18px,var(--rr-safe-x,0px))) 16px;padding:6px max(12px,var(--rr-safe-x,0px));background:rgba(247,245,244,.94);-webkit-backdrop-filter:saturate(1.3) blur(8px);backdrop-filter:saturate(1.3) blur(8px);border-top:1px solid var(--rr-line,#e5e0dd);border-bottom:1px solid var(--rr-line,#e5e0dd)}
    .vd-jumps a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:9px;color:var(--rr-muted,#5d5551);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
    .vd-jumps a:hover{color:var(--rr-ink,#171514);background:var(--rr-surface-soft,#faf8f7)}
    .vd-jumps a[aria-current]{color:var(--rr-navy,#17233d);background:#fff;box-shadow:inset 0 0 0 1px var(--rr-line,#e5e0dd)}
    .vd-jumps a:focus-visible{outline:2px solid var(--rr-red,#b4232b);outline-offset:-2px}
    /* A jump, and keyboard focus moving back up the page, land just under the bar (review F1, 2026-10-06): the page's
       scroll padding is the header's real height (--rr-stick), the bar's real height (--vd-bar, measured by the script
       below) and 12px of air. No per-section scroll margin: it was added on top of this and put headings 100px down. */
    html.rrcc-ui.rrcc-page-vista-dashboard{scroll-padding-top:calc(var(--rr-stick,0px) + var(--vd-bar,50px) + 12px)}

    /* ---- the numbers: one strip, three groups, each figure with its stage's dot. A stage still filters the Sites
       list below when pressed, exactly as before. The note under it is the strip's own footer. */
    .vd-summary{display:grid;grid-template-columns:2fr 4fr 3fr;margin:0;background:#fff;border:1px solid var(--rr-line,#e5e0dd);border-bottom:0;border-radius:12px 12px 0 0;overflow:hidden}
    .vd-group{min-width:0;padding:12px 12px 10px}
    .vd-group + .vd-group{border-left:1px solid var(--rr-line,#e5e0dd)}
    .vd-group-h{margin:0 4px 6px;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-muted,#5d5551)}
    .vd-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
    .vd-tile{font:inherit;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:64px;padding:8px 10px;border-radius:10px;border:0;background:transparent;color:var(--rr-ink,#171514);box-sizing:border-box;min-width:0}
    /* The shared stylesheet gives every button a border, a height and a pressed look in red at "html.rrcc-ui body"
       strength, some of it !important. These name html, body and the page so they win. */
    html.rrcc-page-vista-dashboard body button.vd-tile,html body button.vd-tile{cursor:pointer;min-height:64px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--rr-ink,#171514);font-weight:400}
    html.rrcc-page-vista-dashboard body button.vd-tile:hover:not(:disabled){background:var(--rr-surface-soft,#faf8f7)}
    html.rrcc-page-vista-dashboard body button.vd-tile[aria-pressed="true"]{background:#eef1f7;box-shadow:inset 0 0 0 2px var(--rr-navy,#17233d)!important}
    html.rrcc-page-vista-dashboard body button.vd-tile:focus-visible{outline-offset:-2px!important}
    html body button.vd-tile:disabled{cursor:default;opacity:1}
    .vd-n{font:600 26px/1 var(--rr-display,inherit);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--rr-navy,#17233d)}
    .vd-l{display:flex;align-items:baseline;gap:6px;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--rr-body-copy,#3d3733)}
    .vd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tc,#9aa1ad);flex:none;align-self:center}
    .t-interested{--tc:#25776f}.t-introcall{--tc:#326eb9}.t-vad{--tc:#7355b7}.t-vadsubmitted{--tc:#b47618}.t-approved{--tc:#4e5faa}.t-placed{--tc:#267648}
    .t-serving{--tc:var(--rr-green,#186b45)}.t-scheduled{--tc:var(--rr-blue,#1f4a9c)}.t-ending{--tc:#c98a1b}
    .vd-hint{margin:0 0 28px;padding:9px 16px;background:#fff;border:1px solid var(--rr-line,#e5e0dd);border-radius:0 0 12px 12px;font-size:12.5px;line-height:1.45;color:var(--rr-muted,#5d5551)}

    /* ---- sections: a heading with its tools on the right, then a toolbar */
    .vd-list-h{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;min-height:44px;margin:0 0 10px}
    .vd-list-h h2{margin:0;font:600 19px/1.3 var(--rr-display,inherit);letter-spacing:-.015em;color:var(--rr-navy,#17233d)}
    .vd-list-h .vd-headacts,.vd-list-h > .vd-btn{margin-right:calc(-1 * max(0px, 6px - var(--rr-safe-x,0px)))}
    #vdSitesWrap{margin:0 0 30px}
    .vd-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
    html.rrcc-page-vista-dashboard body .vd-toolbar input[type=search],html.rrcc-page-vista-dashboard body .vd-toolbar select{font:inherit;font-size:13.5px;min-height:40px;height:40px;padding:0 12px;border:1px solid var(--rr-line-strong,#d3ccc7);border-radius:10px;background-color:#fff;color:var(--rr-ink,#171514);box-sizing:border-box;box-shadow:none}
    .vd-toolbar input[type=search]{flex:1 1 260px;min-width:220px}
    .vd-toolbar select{flex:0 0 auto}
    /* A filter that is on or off is a chip with its box inside, so the box and its words are one target. */
    .vd-toolbar label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--rr-line-strong,#d3ccc7);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--rr-body-copy,#3d3733);cursor:pointer;box-sizing:border-box}
    .vd-toolbar label:has(input:checked){border-color:var(--rr-navy,#17233d);background:#eef1f7;color:var(--rr-navy,#17233d)}
    .vd-toolbar label input{accent-color:var(--rr-navy,#17233d);width:15px;height:15px;margin:0}
    .vd-filterbar{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;margin:-4px 0 10px;font-size:13px;color:var(--rr-body-copy,#3d3733)}
    .vd-filterbar[hidden]{display:none}
    #vdSitesPastWrap[hidden],#vdSitesNote[hidden],#vdSitesRenewWrap[hidden]{display:none}
    [data-members-link][hidden]{display:none}
    #vdSitesNote{margin:0 0 10px}

    /* ---- panels: the same surface as every card */
    .vd-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 30px;align-items:start}
    .vd-panel{background:#fff;border:1px solid var(--rr-line,#e5e0dd);border-radius:12px;padding:18px 20px 20px;box-shadow:none;min-width:0}
    .vd-panel h2{margin:0;font:600 19px/1.3 var(--rr-display,inherit);letter-spacing:-.015em;color:var(--rr-navy,#17233d)}
    .vd-sub{margin:0 0 12px;color:var(--rr-muted,#5d5551);font-size:13.5px;line-height:1.5}
    .vd-empty{color:var(--rr-muted,#5d5551);font-size:14px;margin:6px 0 0}
    /* Links read as links: navy with a light underline. Red stays for problems and the main action. */
    .vd-panel a:not(.vd-btn),.vd-card a:not(.vd-btn):not(.vd-org),.vd-note a:not(.vd-btn){color:var(--rr-navy,#17233d);text-decoration:underline;text-decoration-color:rgba(23,35,61,.28);text-underline-offset:3px}
    .vd-panel a:not(.vd-btn):hover,.vd-card a:not(.vd-btn):not(.vd-org):hover{text-decoration-color:currentColor}
    .vd-link{display:inline-flex;align-items:center;gap:6px;font-weight:600}
    .vd-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--rr-surface-soft,#faf8f7);border:1px solid var(--rr-line,#e5e0dd);font-size:13px;color:var(--rr-body-copy,#3d3733);line-height:1.5}
    .vd-note.vd-cal{display:flex;gap:10px;align-items:flex-start}
    .vd-note.vd-cal .vd-ico{color:var(--rr-muted,#5d5551);margin-top:2px}
    .vd-note.vd-warnnote{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--rr-amber-soft,#fdf3e3);border-color:var(--rr-amber-line,#efd9b4)}
    /* Figures inside a panel: the strip's look, smaller. */
    .vd-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:4px 0 0;background:var(--rr-line,#e5e0dd);border:1px solid var(--rr-line,#e5e0dd);border-radius:10px;overflow:hidden}
    .vd-stat{padding:11px 14px;background:#fff;min-width:0}
    .vd-stat:last-child:nth-child(odd){grid-column:1 / -1}
    .vd-stats + .vd-sub{margin:10px 0 0}
    .vd-stat b{display:block;font:600 21px/1.15 var(--rr-display,inherit);color:var(--rr-navy,#17233d);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
    .vd-stat span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--rr-muted,#5d5551)}
    /* Recruitment going quiet, said out loud: a real problem, so red. */
    .vd-quiet{background:var(--rr-red-soft,#fdf0f0);border:1px solid var(--rr-red-line,#f0cdcd);border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#6d1916}
    .vd-quiet b{color:#5a130f}
    .vd-h3{margin:18px 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-muted,#5d5551)}
    .vd-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
    .vd-next li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--rr-line,#e5e0dd);font-size:13px;line-height:1.45}
    .vd-next li:first-child{border-top:0}
    .vd-next li > :not(.vd-next-act){grid-column:1;min-width:0;overflow-wrap:anywhere}
    .vd-next li > a{justify-self:start;font-weight:600;font-size:13.5px}
    .vd-next li > span{color:var(--rr-muted,#5d5551)}
    .vd-next li > span.vd-next-how{color:var(--rr-body-copy,#3d3733)}
    .vd-next .vd-next-act{grid-column:2;grid-row:1 / span 4;align-self:center}
    .vd-parked{display:inline-flex;align-items:center;min-height:44px;font-size:12.5px;font-weight:700;color:var(--rr-amber,#8a5a12)!important;text-decoration:underline;text-decoration-color:rgba(138,90,18,.35);text-underline-offset:3px}
    .vd-note .vd-parked{font-size:13px;margin:-10px 0 -8px}
    .vd-holds{flex:1 1 100%;margin:2px 0 0 6px;font-size:12.5px;line-height:1.45;color:var(--rr-muted,#5d5551)}

    /* ---- Month by month (2026-09-25): who is set to start in each VMO month, as a tidy grid of small cards */
    #vdMonths{margin:0 0 30px}
    .vd-months{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:10px}
    .vd-month{display:flex;flex-direction:column;gap:4px;padding:12px 14px 10px;border:1px solid var(--rr-line,#e5e0dd);border-radius:12px;background:#fff;min-width:0}
    .vd-month.is-past{background:var(--rr-surface-soft,#faf8f7)}
    .vd-month-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:space-between}
    .vd-month-name{margin:0;font:600 14.5px/1.3 var(--rr-display,inherit);color:var(--rr-navy,#17233d)}
    .vd-month-count{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;border:1px solid var(--rr-line,#e5e0dd);background:var(--rr-surface-soft,#faf8f7);font-size:12px;font-weight:700;line-height:1.3;color:var(--rr-body-copy,#3d3733);white-space:nowrap}
    .vd-month-dates{margin:0;font-size:12.5px;line-height:1.45;color:var(--rr-muted,#5d5551)}
    .vd-month > .vd-btn{align-self:flex-start;margin:2px 0 0 -6px}
    .vd-people{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
    .vd-person{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding:6px 0 4px;border-top:1px solid var(--rr-line,#e5e0dd);font-size:13px;line-height:1.4}
    /* A name opens that member's card on the Members page: a 44px target at every width, drawn as one line. */
    .vd-person-name{font-weight:600;display:inline-flex;align-items:center;min-height:44px;margin:-8px 0;flex:1 1 auto;min-width:0;color:var(--rr-ink,#171514)!important;text-decoration:none!important}
    a.vd-person-name:hover{text-decoration:underline!important;text-decoration-color:rgba(23,35,61,.35)!important}
    .vd-person.is-left .vd-person-name{font-weight:500;color:var(--rr-muted,#5d5551)!important}
    /* Name and status chip on the first line, the meta line under them, then the email lines and the button. */
    .vd-person > :not(.vd-person-name):not(.vd-person-tag):not(.vd-btn){flex:1 1 100%;order:3}
    .vd-person > .vd-person-tag{order:1}
    .vd-person > .vd-person-meta{order:2}
    .vd-person > .vd-btn{order:4}
    .vd-person > .vd-btn{flex:0 0 auto;margin:2px 0 0 -6px}
    .vd-person-meta,.vd-drafted,.vd-remind-note{color:var(--rr-muted,#5d5551);font-size:12.5px;line-height:1.45}
    /* An email a person marked sent (2026-10-06): its own line, never a drafted line, in the Serving green. */
    .vd-sent{color:var(--rr-green,#186b45);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
    .vd-sent svg{flex:none}
    /* ONE STATUS CHIP (review F2): the shape the host site cards' chips have (the shared stylesheet, section 21b): 10.5px capitals, 2px by
       8px inside a 1px line in the status's tint, no dot. These name the page so they win over the shared .vs-chip (11px,
       with a dot); a member status keeps the .vs-chip colours. */
    html.rrcc-ui.rrcc-page-vista-dashboard body .vd-person-tag{flex:0 0 auto;display:inline-block;font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-width:1px;border-style:solid;border-radius:999px}
    html.rrcc-ui.rrcc-page-vista-dashboard body .vd-person-tag.vs-chip::before{content:none;display:none}
    html.rrcc-ui.rrcc-page-vista-dashboard body .vd-person-tag:not(.vs-chip):not(.is-due){color:var(--rr-muted,#5d5551);border-color:var(--rr-line,#e5e0dd);background:transparent}
    html.rrcc-ui.rrcc-page-vista-dashboard body .vd-person-tag.is-due{color:var(--rr-amber,#8a5a12);border-color:var(--rr-amber-line,#efd9b4);background:var(--rr-amber-soft,#fdf3e3)}
    .vd-month-none{margin:4px 0 2px;font-size:12.5px;color:var(--rr-muted,#5d5551)}
    .vd-month-extra{margin-top:18px}
    .vd-month-extra > .vd-month-name{margin:0 0 2px}
    .vd-month-extra .vd-sub{margin:0 0 6px;font-size:13px}
    .vd-month-extra .vd-person{max-width:720px}
    #vdMonthsPast{margin:0 0 0 -6px}

    /* ---- the renewal step that is due, as an amber strip under the site's contact line (2026-10-01) */
    .vd-renew{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding:4px 18px;background:var(--rr-amber-soft,#fdf3e3);border-top:1px solid var(--rr-amber-line,#efd9b4);font-size:13px;line-height:1.45;color:#6d3a07}
    .vd-renew b{color:#5a2f05}
    .vd-renew > span{padding:7px 0}
    .vd-renew a{color:var(--rr-navy,#17233d)!important;font-weight:700;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:rgba(23,35,61,.3);text-underline-offset:3px}
    .vd-welcome{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 10px}
    html body button.vd-tap[disabled]{opacity:.55;cursor:default}

    /* ---- Sites: one card per site on Recruitment and Host Sites, the same surface as everything else. A row of
       cards is one height; each card's flags and one-click fixes sit near its top, its history at its foot. */
    .vd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px;align-items:stretch}
    .vd-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--rr-line,#e5e0dd);border-radius:12px;padding:15px 18px 14px;box-shadow:none;min-width:0}
    .vd-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .vd-org{font:600 15.5px/1.3 var(--rr-display,inherit);letter-spacing:-.01em;color:var(--rr-ink,#171514)!important;text-decoration:none;overflow-wrap:anywhere}
    .vd-org:hover{text-decoration:underline;text-decoration-color:rgba(23,35,61,.35)}
    .vd-stage{display:flex;align-items:center;gap:7px;margin:-5px 0 0;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--rr-muted,#5d5551)}
    .vd-stage::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc,#9aa1ad);flex:none}
    .vd-meta{margin:0;font-size:13.5px;color:var(--rr-body-copy,#3d3733);line-height:1.5;overflow-wrap:anywhere}
    .vd-meta.is-empty{color:var(--rr-muted,#5d5551)}
    a[href^="tel:"]{white-space:nowrap}
    .vd-tags{display:flex;gap:6px;flex-wrap:wrap}
    .vd-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;line-height:1.35;padding:2px 9px;border-radius:999px;border:1px solid var(--rr-line,#e5e0dd);background:var(--rr-surface-soft,#faf8f7);color:var(--rr-body-copy,#3d3733)}
    .vd-tag.e{background:var(--rr-blue-soft,#edf2fd);border-color:var(--rr-blue-line,#c8d7f5);color:var(--rr-blue,#1f4a9c)}
    .vd-tag.ok{background:#eef1f7;border-color:#d5dbe7;color:var(--rr-navy,#17233d)}
    .vd-tag.warn,.vd-facts .quiet{background:var(--rr-amber-soft,#fdf3e3);border-color:var(--rr-amber-line,#efd9b4);color:var(--rr-amber,#8a5a12)}
    .vd-facts{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:9px;border-top:1px solid var(--rr-line,#e5e0dd);font-size:12.5px;line-height:1.45;color:var(--rr-muted,#5d5551)}
    /* No update for a long time: the one amber chip every stale-update warning uses, the same size and light amber line as
       the card's other amber tags (review F3: a bare "border:1px solid" had reset the line to the dark text colour). */
    .vd-facts .quiet{display:inline-flex;align-self:flex-start;align-items:center;padding:2px 9px;border:1px solid var(--rr-amber-line,#efd9b4);border-radius:999px;font-weight:700;font-size:11.5px;line-height:1.35}
    /* One-click fixes, on the card that shows the problem (2026-09-21), next to the flags they clear. */
    .vd-fix{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:-2px 0 0 -6px}
    html body button.vd-fixbtn{min-height:44px}
    .vd-fixform{margin:0}
    .vd-fixf{display:flex;flex-direction:column;gap:9px;padding:12px;border:1px solid var(--rr-line,#e5e0dd);border-radius:10px;background:var(--rr-surface-soft,#faf8f7)}
    .vd-fld{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--rr-body-copy,#3d3733)}
    html.rrcc-page-vista-dashboard body .vd-fld input,html.rrcc-page-vista-dashboard body .vd-fld textarea,.vd-fld input,.vd-fld textarea{font:inherit;font-weight:400;font-size:16px;padding:10px 12px;border:1px solid var(--rr-line-strong,#d3ccc7);border-radius:10px;min-height:44px;box-sizing:border-box;width:100%;background:#fff;color:var(--rr-ink,#171514)}
    .vd-fld textarea{min-height:88px;resize:vertical}
    .vd-fixacts{display:flex;gap:2px 4px;flex-wrap:wrap;margin-left:-6px}
    .vd-fixmsg{margin:0;font-size:13px;color:var(--rr-red,#b4232b);min-height:1.1em}

    @media (max-width:1100px){
      .vd-summary{grid-template-columns:minmax(0,1fr)}
      .vd-group + .vd-group{border-left:0;border-top:1px solid var(--rr-line,#e5e0dd)}
      .vd-cols{grid-template-columns:minmax(0,1fr)}
    }
    @media (max-width:820px){
      /* Nothing pins on a phone (the shared stylesheet, section 38): the bar sits at the top, every link a finger-sized target. */
      html.rrcc-page-vista-dashboard body .vd-jumps{position:static;margin:0 0 14px;padding:4px;gap:2px;background:#fff;border:1px solid var(--rr-line,#e5e0dd);border-radius:12px}
      /* Nothing pins here, so a jump lands its section 12px from the top. */
      html.rrcc-ui.rrcc-page-vista-dashboard{scroll-padding-top:12px}
      .vd-jumps a{min-height:44px;padding:0 11px}
      .vd-jumps a svg{display:none}
      html.rrcc-page-vista-dashboard body main .phead.vd-head .vd-headacts{grid-column:1 / -1;grid-row:auto;justify-content:flex-start;margin:6px 0 0 calc(-1 * max(0px, 6px - var(--rr-safe-x,0px)))}
      .vd-list-h .vd-headacts,.vd-list-h > .vd-btn{margin-left:calc(-1 * max(0px, 6px - var(--rr-safe-x,0px)))}
      .vd-toolbar label{min-height:44px}
      html.rrcc-page-vista-dashboard body .vd-toolbar input[type=search],html.rrcc-page-vista-dashboard body .vd-toolbar select{min-height:44px;height:44px}
    }
    @media (max-width:640px){
      html.rrcc-page-vista-dashboard body main .phead.vd-head{padding-top:16px}
      html.rrcc-page-vista-dashboard body main .phead.vd-head h1{font-size:24px}
      html.rrcc-page-vista-dashboard body main .phead.vd-head #vdHeadline{font-size:14px}
      .vd-tiles{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
      .vd-group:last-child .vd-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
      .vd-n{font-size:24px}
      .vd-cards{grid-template-columns:minmax(0,1fr)}
      .vd-panel{padding:16px 16px 18px}
      /* The search gets its own row: beside the sort menu it was squeezed to two letters. */
      .vd-toolbar input[type=search]{flex:1 1 100%;min-width:0;width:100%;font-size:16px}
      html.rrcc-page-vista-dashboard body .vd-toolbar input[type=search],html.rrcc-page-vista-dashboard body .vd-toolbar select{font-size:16px}
      .vd-toolbar select{flex:1 1 auto}
      /* Organization names in the lists are the thing to tap: give each one a finger-sized target (44px, finding 14). */
      .vd-sub a,.vd-meta a,.vd-next a,.vd-note a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
      /* Contact pieces (review F7): a row that wraps, no dots, so a line never starts with one. Each link is still a 44px
         target, but its box reaches 12px above and below its line instead of making the line 44px tall; the 10px between
         lines keeps one line's target clear of the next line's words. */
      .vd-meta:not(.is-empty),.vd-next-how{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:10px}
      .vd-meta .vd-sep,.vd-next-how .vd-sep{display:none}
      .vd-meta .vd-mi,.vd-next-how .vd-mi{min-width:0;overflow-wrap:anywhere}
      .vd-meta .vd-mi > a,.vd-next-how .vd-mi > a{margin:-12px 0}
      .vd-org{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}
      .vd-stage{margin-top:-2px}
      .vd-months{grid-template-columns:minmax(0,1fr)}
      .vd-person .vd-btn{flex:1 1 100%;justify-content:center}
      .vd-next li{grid-template-columns:minmax(0,1fr)}
      .vd-next .vd-next-act{grid-column:1;grid-row:auto;justify-self:start;margin-left:-6px}
    }

    /* The reminder sheet's base, copied from vista-members.html so the two pages' sheets match. */
    .vd-mailbody{white-space:pre-wrap;font:inherit;font-size:13px;background:var(--rr-surface-soft,#faf8f7);border:1px solid var(--rr-line,#e5e0dd);border-radius:10px;padding:10px 12px;margin:8px 0;max-height:40vh;overflow:auto}
    .vd-remind-acts{display:flex;gap:2px 4px;flex-wrap:wrap;justify-content:flex-end;margin:12px -6px 0 0}
    .pm-back{position:fixed;inset:0;background:rgba(20,20,40,.45);display:none;align-items:flex-start;justify-content:center;z-index:300;padding:36px 14px;overflow:auto}
    .pm-back.open{display:flex}
    .pm{background:#fff;border-radius:14px;max-width:560px;width:100%;box-shadow:0 22px 55px rgba(0,0,0,.28)}
    .pm-h{padding:14px 18px 12px 20px;border-bottom:1px solid var(--rr-line,#e5e0dd);display:flex;justify-content:space-between;align-items:center;gap:10px}
    .pm-h h2{margin:0;font:600 17px/1.3 var(--rr-display,inherit);color:var(--rr-navy,#17233d)}
    .pm-x{border:none;background:#f3f5f9;border-radius:10px;width:32px;height:32px;cursor:pointer;font-size:18px;color:#475569}
    .pm-body{padding:14px 20px 18px;font-size:13.5px;line-height:1.5}
    .pm-body p{margin:0 0 6px}
    /* The close button is a 44px target (the shared stylesheet makes it 40 on a desktop). */
    #vdRemind .pm-x{width:44px;height:44px}
    /* The live pill sits above everything at the bottom left, which is where a phone's sheet shows its words, so it
       steps aside while the sheet is open (member-send.js does the same for its dialog). */
    html:has(#vdRemindBack.open) #rrccLive{visibility:hidden}
    @media (prefers-reduced-motion:no-preference){
      .vd-btn,.vd-tile,.vd-jumps a,.vd-toolbar label{transition:background-color .15s ease,box-shadow .15s ease,color .15s ease}
    }
    /* Four dashboard pages, one surface and equal tiles. The workflow rail above is unchanged. */
    html.rrcc-page-vista-dashboard body [data-dashboard-panel][hidden]{display:none!important}
    html.rrcc-page-vista-dashboard body .vd-cols{display:contents}
    html.rrcc-page-vista-dashboard body .vd-summary{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;background:none;border:0;border-radius:0;overflow:visible}
    html.rrcc-page-vista-dashboard body .vd-group,html.rrcc-page-vista-dashboard body .vd-tiles{display:contents}
    html.rrcc-page-vista-dashboard body .vd-group-h{display:none}
    html.rrcc-page-vista-dashboard body button.vd-tile{min-height:128px!important;height:128px!important;padding:12px;border:1px solid var(--rr-line,#e5e0dd);border-radius:12px;background:#fff;gap:7px}
    .vd-category{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--rr-muted,#5d5551)}
    html.rrcc-page-vista-dashboard body .vd-jumps a{min-height:44px}
    html.rrcc-page-vista-dashboard body .vd-jumps a[aria-current="page"]{color:var(--rr-navy,#17233d);background:#fff;box-shadow:inset 0 0 0 1px var(--rr-line,#e5e0dd)}
    html.rrcc-page-vista-dashboard body .vd-toolbar input[type=search],html.rrcc-page-vista-dashboard body .vd-toolbar select,html.rrcc-page-vista-dashboard body .vd-toolbar label{min-height:44px;height:auto}
    html.rrcc-page-vista-dashboard body #vdMembers a{display:inline-flex;align-items:center;min-height:44px!important}
    html.rrcc-page-vista-dashboard body .vd-meta .vd-mi>a,html.rrcc-page-vista-dashboard body .vd-next-how .vd-mi>a,html.rrcc-page-vista-dashboard body .vd-next li>a,html.rrcc-page-vista-dashboard body .vd-org{display:inline-flex;align-items:center;min-height:44px}
    html.rrcc-page-vista-dashboard body .vd-panel{margin-bottom:24px}
    @media(max-width:1100px){html.rrcc-page-vista-dashboard body .vd-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:600px){html.rrcc-page-vista-dashboard body .vd-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}html.rrcc-page-vista-dashboard body button.vd-tile{padding:10px 8px;min-height:128px}.vd-n{font-size:24px}}
    /* iPhone audit, 28 October 2026. Phones only; a desktop does not change.
       VI-9: the nine figures are a compact strip on every page, as Host sites already was: no category word over each
       figure (its label says what it counts), the number 24px, the label's dot in its first line so the words use the
       tile's width, each tile as tall as its words and all nine equal (grid rows of 1fr). The
       note keeps its first sentence, and the read time and Refresh share a row, so the page's own panel starts higher.
       VI-6 and VI-8: no VISTA word under 12px. Tags 12px, the figures' labels 13px, every other small word 13.5px. The
       Host sites cards' shared pieces (.pill, .cardbtn, .stype, the MOU and contact lines) are the shared stylesheet's
       alone (test/vista-site-cards.test.js), so their phone sizes belong there, with the Primary Dashboard's cards. */
    @media(max-width:600px){
      html.rrcc-ui.rrcc-page-vista-dashboard[data-vista-page] body main #vdSummary{grid-auto-rows:1fr}
      html.rrcc-ui.rrcc-page-vista-dashboard[data-vista-page] body main #vdSummary button.vd-tile{height:auto!important;min-height:64px!important;padding:8px;gap:4px}
      html.rrcc-ui.rrcc-page-vista-dashboard body #vdSummary .vd-category{display:none}
      html.rrcc-ui.rrcc-page-vista-dashboard[data-vista-page] body #vdSummary .vd-n{font-size:24px}
      html.rrcc-page-vista-dashboard body #vdSummary .vd-l{display:block}
      html.rrcc-page-vista-dashboard body #vdSummary .vd-l .vd-dot{margin-right:6px;vertical-align:1px}
      html.rrcc-ui.rrcc-page-vista-dashboard body #vdNote .vd-note-more{display:none}
      html.rrcc-ui.rrcc-page-vista-dashboard[data-vista-page] body main .phead.vd-head .vd-headacts{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;margin-left:0}
      html.rrcc-page-vista-dashboard body main :is(.vd-person-tag,.vd-tag,.vd-h3){font-size:12px!important}
      html.rrcc-page-vista-dashboard body main .vd-l{font-size:13px!important}
      html.rrcc-page-vista-dashboard body main :is(.vd-btn,.vd-hint,#vdUpdated,.vd-stat span,.vd-stage,.vd-facts,.vd-facts span,.vd-month-count,.vd-month-dates,.vd-month-none,.vd-person-meta,.vd-drafted,.vd-remind-note,.vd-parked,.vd-archived,.vd-archived-one,.vd-holds){font-size:13.5px!important}
    }
    /* VI-10: where the four section links would wrap ("Sites" alone on a second row), they are a 2x2 grid of equal cells. */
    @media(max-width:413px){
      html.rrcc-page-vista-dashboard body .vd-jumps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
      html.rrcc-page-vista-dashboard body .vd-jumps a{justify-content:center}
    }