/* Member dashboard — shared layout tokens */
@font-face { font-family:'Inter Fallback'; font-display:swap; src:local('Arial'); size-adjust:107.40%; ascent-override:90.20%; descent-override:22.43%; line-gap-override:0%; }
@font-face { font-family:'Playfair Fallback'; font-display:swap; src:local('Georgia'); size-adjust:110.20%; ascent-override:88.20%; descent-override:22.20%; line-gap-override:0%; }
:root {
    --navy: #0A2540;
    --teal: #C1440E;
    /* Text-only accent. --teal stays the brand vermilion everywhere it is a
       fill or a stroke; this token exists solely because #C1440E as TEXT on the
       dark surface measures 3.33:1, under the 4.5:1 AA floor. In light mode it
       is literally --teal (5.12:1 on white, already compliant), so nothing
       shifts; only the dark block below diverges. Do not use it for
       backgrounds or borders - that would change the brand colour. */
    --accent-text: #C1440E;
    --teal-dark: #9E360B;
    /* Brand accent tints — replace the legacy mint-green hover/active
       tints left over from before the accent became vermilion. */
    --accent-tint: rgba(193, 68, 14, .08);
    --accent-tint-strong: rgba(193, 68, 14, .14);
    --accent-line: rgba(193, 68, 14, .35);
    --gold: #9C7A3C;
    /* v6 social-app re-theme: light neutral canvas + white surfaces (the
       FB/X/LinkedIn pattern), near-black ink, soft hairline borders, and
       a signature vermilion accent reserved for live/alert moments. */
    --vermilion: #E2543E;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --border: #e5e8ec;
    --text: #0f1c2e;
    --muted: #5b6b7b;
    /* Heading/label text drawn on a --surface card. Same value as --navy in
       light mode, but its own token so dark mode can flip it independently
       of --navy (which stays the fixed brand navy used for backgrounds,
       gradients, and text-on-gold badges that shouldn't change with theme). */
    --heading: var(--navy);
    --font-sans:'Inter','Inter Fallback',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-display:'Playfair Display','Playfair Fallback',Georgia,'Times New Roman',Times,serif;
    /* Wireframe discipline (WireFramer-inspired) — separation comes from a
       single hairline weight, never from elevation. Two radii only: --radius
       for surfaces that hold content, --radius-sm for controls and chips.
       Varying radius per component is what made the portal read as busy;
       holding it constant is most of what makes a wireframe read as calm.
       Shadows survive in exactly three places, all of them load-bearing:
       focus rings (accessibility), floating overlays that must sit visibly
       above the page (nav dropdown, notification panel, mobile drawer), and
       the day/night toggle's sculpted thumb. */
    --radius: 1rem;
    --radius-sm: .625rem;
    --stroke: 1px;
}

/* Day/night toggle (member-dashboard.html) — dark theme token overrides.
   --navy/--teal/--teal-dark/--gold/--vermilion stay fixed brand colors
   (used for backgrounds, gradients, and self-contained badges like
   text-on-gold avatars, which read fine in either mode unchanged). */
:root[data-theme="dark"] {
    --accent-text: #E26430;   /* 4.96:1 on --surface, vs 3.33:1 for #C1440E */
    --bg: #0b1220;
    --surface: #131c2c;
    --border: #263248;
    --text: #dce3ee;
    --muted: #93a0b4;
    --heading: #eef2f7;
}

.hidden { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    padding-top: var(--dash-header-h, 3.5rem);
}

.heading-font { font-family: var(--font-display); }

.dash-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* Header — fixed; hides on scroll down, returns on scroll up or mouse at top */
.dash-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* White glass app bar — the shared top-nav pattern across FB, X, and
       LinkedIn — with a hairline bottom edge instead of a heavy shadow. */
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    color: var(--heading);
    /* Hairline only — the 0 8px 24px ambient that used to sit under this
       was the single strongest "floating card" cue on the page. */
    box-shadow: 0 1px 0 var(--border);
    border-bottom: none;
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, background .2s ease;
}
.dash-header--hidden {
    transform: translateY(-100%);
    box-shadow: none;
}
.dash-header--visible {
    transform: translateY(0);
}
.dash-header-inner {
    max-width: 1200px; margin: 0 auto; padding: .875rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.dash-logo {
    font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--heading);
    display: flex; align-items: center; gap: .5rem;
}
.dash-logo i { color: var(--gold); }

/* Back button — injected after the logo by vv-member-dashboard.js on
   every portal page except the dashboard home. .dash-user takes
   margin-left:auto so the button hugs the logo instead of being spread
   out by the header's space-between. */
.dash-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); cursor: pointer; font-size: .8125rem;
    transition: background .15s, color .15s;
}
.dash-back-btn:hover { background: #eef1f4; color: var(--heading); }
.dash-nav {
    display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
}
.dash-nav a {
    color: var(--muted); text-decoration: none; font-size: .8125rem; font-weight: 600;
    padding: .45rem .75rem; border-radius: 999px; transition: background .15s, color .15s;
}
.dash-nav a:hover { color: var(--heading); background: #eef1f4; }
.dash-nav a[aria-current="page"] { color: var(--accent-text); background: var(--accent-tint); }

/* "Resources" nav dropdown (Library / Federal Contracting / Signatures) —
   see initDashResourcesDropdown() in each dash-header page's own script. */
.dash-nav-dropdown { position: relative; }
.dash-nav-dropdown-btn {
    color: var(--muted); background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: .8125rem; font-weight: 600;
    padding: .45rem .75rem; border-radius: 999px; transition: background .15s, color .15s;
    display: inline-flex; align-items: center; gap: .3rem;
}
.dash-nav-dropdown-btn:hover,
.dash-nav-dropdown-btn[aria-expanded="true"],
.dash-nav-dropdown.has-active .dash-nav-dropdown-btn {
    color: var(--heading); background: #eef1f4;
}
.dash-nav-dropdown-btn i.fa-chevron-down { font-size: .625rem; transition: transform .15s; }
.dash-nav-dropdown-btn[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }
.dash-nav-dropdown-panel {
    /* position:fixed with top/left set by vv-dash-nav-dropdown.js at open
       time — the mobile .dash-nav strip scrolls horizontally (overflow-x:
       auto), which per the CSS overflow spec implicitly makes overflow-y
       auto too and would clip an absolutely-positioned panel the moment it
       extends past the strip's edge. Fixed positioning escapes that. */
    position: fixed; min-width: 210px;
    background: #fff; border-radius: .75rem; box-shadow: 0 12px 32px rgba(10,37,64,.28);
    padding: .4rem; z-index: 60; display: none;
}
.dash-nav-dropdown-panel.open { display: block; }
.dash-nav-dropdown-panel a {
    display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: .5rem;
    color: var(--heading); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.dash-nav-dropdown-panel a:hover { background: #f1f5f9; }
.dash-nav-dropdown-panel a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-text); }
.dash-nav-dropdown-label {
    padding: .5rem .7rem .3rem; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
/* Reuses .dash-nav-dropdown's generic button/panel/positioning JS, just
   swapping the "Resources ▾" text label for the avatar+name it was built
   for elsewhere — the base button is already flex+gap, so the avatar
   circle and name slot in without needing their own layout rules. */
.dash-user-nav-dropdown-btn { padding: .3rem .5rem .3rem .3rem; }
.dash-user-nav-dropdown-btn i.fa-chevron-down { color: var(--muted); }

.dash-user {
    display: flex; align-items: center; gap: .5rem;
    padding-left: .75rem; border-left: 1px solid var(--border);
    margin-left: auto;
}
.dash-avatar {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold);
    color: var(--navy); font-weight: 700; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; object-fit: cover;
}
.dash-user-name { font-size: .8125rem; font-weight: 600; color: var(--heading); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-logout { color: var(--muted); padding: .4rem; border-radius: 999px; }
.dash-logout:hover { color: var(--vermilion); background: #fdeeec; }

/* Hero */
.dash-hero {
    padding: 1.25rem 0 1rem;
}
.dash-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.dash-hero-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(193, 68, 14, 0.05) 100%);
    pointer-events: none;
}
.dash-hero h1 {
    font-size: 1.5rem;
    color: var(--heading);
    margin-bottom: .2rem;
    position: relative;
    z-index: 1;
}
.dash-hero p { color: var(--muted); font-size: .9375rem; }
.dash-hero .name { color: var(--accent-text); font-weight: 600; }
.dash-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Buttons — fully-rounded pills, the strongest shared signal across
   X/Instagram/LinkedIn/Threads action buttons, transformed into ours
   with the brand teal/gold instead of a single platform blue. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: 999px; font-size: .8125rem; font-weight: 700;
    text-decoration: none; border: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, filter .15s ease;
}
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn-outline {
    background: var(--surface); color: var(--heading); border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { filter: brightness(.95); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { filter: none; }
.btn-block { width: 100%; }

/* Quick cards */
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.quick-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    /* Hover reads through the hairline and a faint wash, not a lift. Keeping
       the transition short matches the house fast-motion preference. */
    transition: background .15s ease, border-color .15s ease;
    position: relative;
}
.quick-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: .85rem .85rem 0 0;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    opacity: 0;
    transition: opacity 0.2s;
}
.quick-card:hover {
    border-color: var(--accent-line);
    background: var(--accent-tint);
}
.quick-card:hover::before { opacity: 1; }
.quick-card-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;
}
.quick-card-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.quick-card h3 { font-size: .9375rem; font-weight: 700; color: var(--heading); }
.quick-card p { font-size: .8125rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; }
.badge-active {
    font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .25rem .5rem; border-radius: 999px; background: #d1fae5; color: #047857;
}
.tier-pill {
    display: inline-block; margin-top: .35rem;
    background: linear-gradient(135deg, var(--gold), #c69e3f);
    color: #fff; font-size: .75rem; font-weight: 700;
    padding: .35rem .8rem; border-radius: 999px;
}
.meta-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.meta-value { font-size: 1.125rem; font-weight: 700; color: var(--heading); margin-top: .15rem; }

/* Main grid */
.dash-main-grid {
    display: grid; gap: 1.5rem; margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .dash-main-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.panel {
    background: var(--surface); border: var(--stroke) solid var(--border);
    border-radius: var(--radius); padding: 1.25rem 1.5rem;
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: 1rem; font-weight: 700; color: var(--heading);
    display: flex; align-items: center; gap: .5rem;
}
.panel-title i { color: var(--accent-text); }
.panel-link { font-size: .8125rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.panel-link:hover { text-decoration: underline; }

/* Emphasis comes from stroke COLOR, not stroke weight — a 2px border here
   was the only place in the portal where a rule varied the hairline, and it
   made the panel read as a different material. A full-strength vermilion
   hairline says "this one" just as loudly and keeps the grid honest. */
.panel-vault-active { border-color: var(--accent-text); }
.panel-vault-locked { border-style: dashed; background: var(--bg); }

/* Vault file list */
.vault-file-list { list-style: none; margin-top: .75rem; }
.vault-file-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem; flex-wrap: wrap; padding: .65rem 0;
    border-bottom: 1px solid var(--border);
}
.vault-file-row:last-child { border-bottom: none; }
.vault-file-name { flex: 1; min-width: 160px; font-size: .8125rem; color: var(--text); }
.vault-file-meta { color: var(--muted); font-size: .75rem; }
.vault-file-actions { display: flex; gap: .35rem; }
.vault-btn {
    padding: .35rem .65rem; font-size: .6875rem; font-weight: 600;
    border-radius: .5rem; cursor: pointer; border: 1px solid var(--border); background: #fff;
}
.vault-btn:hover { background: #f8fafc; }
:root[data-theme="dark"] .vault-btn { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .vault-btn:hover { background: var(--border); }
.vault-btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.vault-btn-primary:hover { background: var(--teal); border-color: var(--accent-text); }
.vault-btn-danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.vault-btn-danger:hover { background: #fee2e2; border-color: #fca5a5; }
:root[data-theme="dark"] .vault-btn-danger { background: rgba(220,38,38,.12); color: #fca5a5; border-color: rgba(220,38,38,.35); }
:root[data-theme="dark"] .vault-btn-danger:hover { background: rgba(220,38,38,.22); }
#member-vault-status { font-size: .8125rem; margin-top: .65rem; color: var(--muted); }

/* Resources */
.resource-list { display: flex; flex-direction: column; gap: .5rem; }
/* Scrollable variant for the dashboard rail: the widget pulls more than it
   can show, so the list scrolls in place instead of stretching the rail past
   the center column. */
.resource-list.is-scrollable {
    max-height: 21rem; overflow-y: auto; padding-right: .4rem;
}
/* Scroll chaining is contained for mice only. On touch the rail stacks into
   the normal page flow (see the ≤1100px rules below), and a contained
   scroller there traps the swipe: the finger lands on the widget, the page
   underneath refuses to move, and the member has to aim around the panel to
   keep going. Pointer-fine keeps the containment where it's useful — wheel
   over the list shouldn't jump the page once the list bottoms out — and
   leaves phones and tablets with native chaining. */
@media (hover: hover) and (pointer: fine) {
    .resource-list.is-scrollable { overscroll-behavior: contain; }
}
/* Deliberately NOT scrollbar-width/scrollbar-color: setting either makes
   Chrome ignore the ::-webkit-scrollbar rules and fall back to the macOS
   overlay scrollbar, which is invisible until you already scroll. Rows here
   can be one or two lines tall, so a "half-cut row" peek can't be relied on
   to signal overflow — a persistent gutter is the only affordance that
   always shows. Firefox has no equivalent and keeps its native bar. */
.resource-list.is-scrollable::-webkit-scrollbar { width: 8px; }
.resource-list.is-scrollable::-webkit-scrollbar-track {
    background: transparent; margin: .25rem 0;
}
.resource-list.is-scrollable::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 8px;
    border: 2px solid transparent; background-clip: content-box;
}
.resource-list.is-scrollable::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
.resource-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem; border-radius: .75rem; background: #f8fafc;
    border: 1px solid transparent; text-decoration: none; color: inherit;
    transition: border-color .15s, background .15s;
}
.resource-row:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.resource-row-icon {
    width: 2.25rem; height: 2.25rem; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.resource-row-icon.pdf { background: #fee2e2; color: #b91c1c; }
.resource-row-icon.video { background: #fef3c7; color: #b45309; }
.resource-row h4 { font-size: .8125rem; font-weight: 600; color: var(--heading); }
.resource-row span { font-size: .6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Notary */
.notary-dropzone {
    display: block;
    /* Dashed stays 2px on purpose: it reads as an affordance ("drop here"),
       not as a surface edge, so it sits outside the hairline vocabulary
       rather than competing with it. */
    border: 2px dashed var(--border); border-radius: var(--radius);
    padding: 2rem 1.5rem; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s; background: var(--bg);
}
.notary-dropzone:hover, .notary-dropzone.dragover { border-color: var(--accent-text); background: var(--accent-tint); }
.notary-dropzone i { font-size: 1.75rem; color: var(--accent-text); margin-bottom: .5rem; }
.notary-dropzone p { font-size: .875rem; color: var(--text); font-weight: 600; margin-bottom: .2rem; }
.notary-dropzone span { font-size: .75rem; color: var(--muted); }

.notary-list { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.notary-row {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .85rem 1rem; border-radius: .85rem; background: #f8fafc;
    border: 1px solid var(--border);
}
.notary-row-icon {
    width: 2.25rem; height: 2.25rem; border-radius: .5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fee2e2; color: #b91c1c;
}
.notary-row-main { flex: 1; min-width: 160px; }
.notary-row-main h4 { font-size: .8125rem; font-weight: 600; color: var(--heading); }
.notary-row-main span { font-size: .6875rem; color: var(--muted); }
.notary-row-actions { display: flex; gap: .4rem; align-items: center; }

.notary-status {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: .25rem .6rem; border-radius: 999px;
    white-space: nowrap;
}
.notary-status-uploaded, .notary-status-submitted { background: #f1f5f9; color: #475569; }
.notary-status-pending { background: #fef3c7; color: #b45309; }
.notary-status-notarized { background: #d1fae5; color: #047857; }
.notary-status-failed, .notary-status-rejected { background: #fee2e2; color: #b91c1c; }

/* Your Team — real, named formation specialist/advisor cards (Phase 4 item
   1: human-relationship layer). Unscoped so it can be reused on other
   member pages later, not just member-dashboard.html. */
.team-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.team-member { display: flex; gap: 1rem; align-items: flex-start; }
.team-avatar {
    width: 3.5rem; height: 3.5rem; border-radius: .75rem; object-fit: cover;
    flex-shrink: 0;
}
.team-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 1.125rem;
}
.team-member-name { font-weight: 700; color: var(--heading); font-size: .9375rem; }
.team-member-title { color: var(--accent-text); font-weight: 600; font-size: .75rem; margin-top: .1rem; }
.team-member-bio { color: var(--muted); font-size: .8125rem; line-height: 1.5; margin-top: .5rem; }
.team-member-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.team-tag {
    font-size: .6875rem; font-weight: 600; color: var(--muted);
    background: var(--bg); border: 1px solid var(--border);
    padding: .2rem .55rem; border-radius: 999px;
}
.team-contact-row {
    display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
    padding-top: 1.25rem; border-top: 1px solid var(--border);
}

/* Your Team — native <details> dropdown, tucked at the very bottom of the
   dashboard next to the Help CTA rather than shown on every page load (see
   member-dashboard.html for why). No JS needed; the browser handles
   open/close/keyboard natively. */
.team-details {
    background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius);
    padding: .25rem 1.1rem; margin: 2.5rem 0 1.25rem;
}
/* Flex row, not float — the summary now carries a leading monoline icon, and
   a floated marker made the icon wrap onto its own line above the label. */
.team-details summary {
    padding: .75rem 0; cursor: pointer; font-weight: 600; font-size: .9375rem;
    color: var(--heading); list-style: none;
    display: flex; align-items: center; gap: .4rem;
}
.team-details summary::-webkit-details-marker { display: none; }
/* Was content:'\f078' in 'Font Awesome 6 Free' — but member-dashboard.html is
   the only page using .team-details and it doesn't load Font Awesome (the nav
   rail replaced it with the inline monoline sprite in 2026-08), so the marker
   had been rendering as a tofu box. Drawn in CSS at the sprite's own 1.6px
   stroke weight instead: same look, no font dependency. */
.team-details summary::after {
    content: ''; margin-left: auto; width: .45rem; height: .45rem;
    border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
    transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.team-details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.team-details summary .vv-mono-ic {
    width: 15px; height: 15px; flex-shrink: 0; stroke: var(--muted);
}
.team-details .team-grid { margin-top: .5rem; }
.team-details .team-contact-row { padding-bottom: 1rem; }

/* Business Name Generator, sharing the .team-details disclosure surface.
   Only the stacking margins differ: two disclosures in a row want to read as
   a pair, not as two unrelated sections, so the gap between them is tighter
   than the 2.5rem that separates the pair from the grid above. */
.namegen-details { margin: 2.5rem 0 0; }
/* General sibling, not adjacent: the namegen <script> sits between the two
   <details> elements (it's a parse-time IIFE that has to follow its markup),
   and a display:none script still breaks a `+` selector. */
.namegen-details ~ .team-details { margin-top: .75rem; }
.namegen-details .namegen-hint { margin-top: .25rem; }
.namegen-details .namegen-form { margin-bottom: .75rem; }
.namegen-details #namegen-results:empty { display: none; }
/* Bottom padding on the container, not on :last-child — #namegen-results is
   structurally last even while empty-and-hidden, so a :last-child rule would
   land on a display:none element and leave the form flush to the edge. */
.namegen-details[open] { padding-bottom: .9rem; }

/* Help CTA */
.dash-help {
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: #fff; border-radius: var(--radius); padding: 2rem; text-align: center; margin-bottom: 2rem;
}
.dash-help h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.dash-help p { opacity: .92; font-size: .9375rem; margin-bottom: 1.25rem; max-width: 520px; margin-left: auto; margin-right: auto; }
.dash-help-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.dash-help .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.dash-help .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Dashboard-only: the closing help CTA sits under several already-tall
   panels (Quick Tools, Up Next, Brand Deals, Community) — a smaller,
   quieter version here keeps it from reading as another big ask piled
   on top of everything above it. Other pages that share .dash-help as
   their main/only CTA keep the full size. */
body.member-dashboard-v-social .dash-help {
    padding: 1.1rem 1.5rem; margin-bottom: 2.5rem;
}
body.member-dashboard-v-social .dash-help h3 { font-size: 1rem; margin-bottom: .3rem; }
body.member-dashboard-v-social .dash-help p { font-size: .8125rem; margin-bottom: .85rem; }
body.member-dashboard-v-social .dash-help-actions { gap: .5rem; }
body.member-dashboard-v-social .dash-help .btn { padding: .5rem 1rem; font-size: .75rem; }

/* Footer */
.dash-footer {
    background: var(--navy); color: rgba(255,255,255,.75);
    padding: 2rem 0; margin-top: auto; border-top: 3px solid var(--gold);
}
.dash-footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem; margin-bottom: 1.5rem;
}
.dash-footer h4 { color: #B8934A; /* --gold #9C7A3C is 3.89:1 on --navy; this is 5.41:1 */ font-size: .8125rem; margin-bottom: .75rem; }
.dash-footer a {
    display: block; color: rgba(255,255,255,.7); text-decoration: none;
    font-size: .8125rem; margin-bottom: .4rem;
}
.dash-footer a:hover { color: #fff; }
.dash-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem;
    text-align: center; font-size: .75rem;
}

/* =====================================================================
   Wide-viewport layouts. .dash-wrap intentionally stays a readable
   1200px for prose/settings/tool pages (account, letters, signatures,
   support, notary, affiliate, membership-pricing, federal-contracting,
   progress-tracker) — those are single-column forms and short-form text,
   and a wider column there would just be a worse reading/scanning width,
   not "more use" of the space. The two patterns below are what pages with
   genuinely data-dense or multi-pane content opt into instead, so wide
   viewports get *purposeful* extra width rather than either a dead gutter
   or arbitrarily long lines of text.
   ===================================================================== */

/* Wider single column — for pages whose content is itself a dense grid
   (directory business cards, library resource cards): extra width means
   more useful items per row, not longer prose lines. */
.dash-wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 1.25rem; }

/* Main content + persistent contextual rail — for feed-shaped pages.
   Collapses to a single column (rail hidden) below 1100px; the rail's
   content (active conversations, suggested connections) is always still
   reachable from Messages/Network, so hiding it costs nothing on
   narrower viewports, it's a wide-screen bonus, not a feature move. */
.dash-rail-layout {
    max-width: 1600px; margin: 0 auto; padding: 0 1.25rem;
    display: grid; gap: 1.5rem; align-items: start;
}
@media (min-width: 1100px) {
    .dash-rail-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.dash-rail { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--dash-header-h, 3.5rem) + 1.25rem); }
@media (max-width: 1099px) { .dash-rail { display: none; } }

@media (max-width: 640px) {
    .dash-hero-card { padding: 1.25rem; }
    .dash-hero h1 { font-size: 1.375rem; }
    .dash-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
    .dash-user { border-left: none; padding-left: 0; }
}
/* =====================================================================
   2026 refresh — premium-fintech pass (v5): global search, activity-first
   home, compact tool launcher, progress/milestones, glass overlays.
   ===================================================================== */

/* Global search — the rounded gray search pill shared by X and LinkedIn's
   top nav, transformed with our teal focus ring instead of platform blue. */
.gs-wrap { position: relative; flex: 2 1 320px; max-width: 640px; min-width: 200px; }
.gs-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .8125rem; pointer-events: none;
}
.gs-input {
    width: 100%; padding: .7rem 2.3rem .7rem 2.6rem;
    background: #eef1f4; border: 1px solid transparent;
    border-radius: 999px; color: var(--text); font-size: .875rem; font-family: inherit;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.gs-input::placeholder { color: var(--muted); }
.gs-input:focus {
    outline: none; background: var(--surface); border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}
.gs-kbd {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    font-size: .625rem; color: var(--muted); border: 1px solid var(--border);
    border-radius: .3rem; padding: 0 .35rem; font-family: inherit; pointer-events: none;
    background: var(--surface);
}
.gs-dropdown {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; min-width: 300px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(226,232,240,.9); border-radius: .9rem;
    box-shadow: 0 20px 48px rgba(10,37,64,.22); z-index: 70;
    max-height: 70vh; overflow-y: auto; padding: .4rem;
}
.gs-section {
    font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); padding: .5rem .6rem .25rem;
}
.gs-row {
    display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem;
    border-radius: .6rem; text-decoration: none; color: var(--text);
}
.gs-row:hover { background: var(--accent-tint); }
.gs-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-row-title {
    font-size: .8125rem; font-weight: 600; color: var(--heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-row-meta { font-size: .6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-go { font-size: .625rem; color: #cbd5e1; }
.gs-avatar {
    width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.gs-avatar-initials { background: var(--gold); color: var(--navy); font-weight: 700; font-size: .6875rem; }
.gs-avatar-icon { background: var(--accent-tint); color: var(--accent-text); font-size: .75rem; border-radius: .5rem; }
.gs-empty { padding: 1rem .75rem; font-size: .8125rem; color: var(--muted); text-align: center; }
@media (max-width: 760px) {
    .gs-wrap { order: 3; flex-basis: 100%; max-width: none; }
    .gs-kbd { display: none; }
}

/* Activity-first home layout */
.home-grid { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; align-items: start; }
@media (min-width: 960px) { .home-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.home-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.stat-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.stat-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .35rem .8rem; font-size: .75rem; font-weight: 600; color: var(--heading);
    text-decoration: none;
}
.stat-chip i { color: var(--accent-text); font-size: .6875rem; }
.stat-chip .gold { color: var(--gold); }
.stat-chip:hover { border-color: var(--accent-text); }

/* "Up next" milestone rows (dashboard + progress tracker) */
.upnext-row {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem;
    border-radius: var(--radius-sm); text-decoration: none; color: inherit;
    border: 1px solid transparent; background: #f8fafc;
    transition: border-color .15s, background .15s;
}
.upnext-row:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.upnext-row + .upnext-row { margin-top: .5rem; }
.upnext-check {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem;
    border: 2px solid #cbd5e1; color: transparent; background: #fff;
}
.upnext-row.done .upnext-check { background: var(--teal); border-color: var(--accent-text); color: #fff; }
.upnext-row.done .upnext-label { color: var(--muted); text-decoration: line-through; }
.upnext-label { font-size: .8125rem; font-weight: 600; color: var(--heading); flex: 1; }
.upnext-hint { font-size: .6875rem; color: var(--muted); }

/* Up Next progress donut (dashboard only — the panel spans the full grid row
   so the ring can sit beside the milestone list instead of above it). The
   donut replaces the linear bar that used to head this panel: two readouts of
   the same percentage competed for the same glance. Drawn in var(--teal),
   which despite the legacy name holds the brand vermilion (#C1440E) — the
   same accent .panel-title icons and .upnext-check already use, so the ring
   reads as part of the panel rather than as a new colour. */
.upnext-layout { display: flex; align-items: center; gap: 1.5rem; }
.upnext-layout > #home-upnext { flex: 1; min-width: 0; }
.upnext-donut {
    position: relative; flex-shrink: 0; width: 104px; height: 104px;
    display: flex; align-items: center; justify-content: center;
}
.donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track, .donut-ring { fill: none; stroke-width: 3.2; }
.donut-track { stroke: var(--border); }
.donut-ring {
    stroke: var(--teal); stroke-linecap: round;
    /* Circumference is exactly 100 (r = 15.9155), so the offset is the
       percentage still to go and the resting state is a full 100 = empty. */
    stroke-dasharray: 100 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset .6s ease;
}
.donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1; pointer-events: none;
}
.donut-pct { font-size: 1.35rem; font-weight: 800; color: var(--heading); }
.donut-pct i { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--muted); }
.donut-sub { font-size: .625rem; font-weight: 600; color: var(--muted); margin-top: .2rem; }
/* Dark mode doesn't remap --teal, so the ring would stay #C1440E on a #131c2c
   card. Brightened to the same #E87A2E the panel-title icons already switch
   to, rather than inventing a third accent value for dark. */
:root[data-theme="dark"] .donut-ring { stroke: #E87A2E; }
@media (max-width: 560px) {
    .upnext-layout { flex-direction: column; align-items: stretch; gap: 1rem; }
    .upnext-donut { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
    .donut-ring { transition: none; }
}

/* Compliance due-date badges — used by the "What Needs Your Attention" panel
   (member-dashboard.html) and the existing Compliance Deadlines list
   (member-mail.html). Theme-aware unlike the badge's original hardcoded
   colors, so it doesn't repeat the dark-mode coverage gap found elsewhere. */
.compliance-due {
    font-size: .6875rem; font-weight: 700; padding: .25rem .6rem;
    border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.compliance-due--soon { background: #fee2e2; color: #b91c1c; }
.compliance-due--upcoming { background: #fef3c7; color: #b45309; }
.compliance-due--later { background: var(--border); color: var(--muted); }
:root[data-theme="dark"] .compliance-due--soon { background: rgba(220,38,38,.22); color: #fca5a5; }
:root[data-theme="dark"] .compliance-due--upcoming { background: rgba(180,83,9,.25); color: #fbbf7d; }

/* Compliance deadline rows and the generic panel empty-state — shared by
   member-compliance.html and member-mail.html; promoted here from
   member-mail.html's page-local <style> block so both pages use one
   source of truth. */
.compliance-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.compliance-row:last-child { border-bottom: none; }
.compliance-name { font-weight: 700; color: var(--heading); font-size: .875rem; }
.compliance-sub { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.compliance-row-side { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.compliance-href {
  font-size: .75rem; font-weight: 600; color: var(--teal, #C1440E);
  text-decoration: none; white-space: nowrap;
}
.compliance-href:hover { color: #E2543E; text-decoration: underline; }
.compliance-href:focus-visible { outline: 2px solid var(--teal, #C1440E); outline-offset: 2px; }
.setup-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.setup-row:last-child { border-bottom: none; }
.mail-empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.mail-empty i { font-size: 2rem; color: var(--border); margin-bottom: .75rem; display: block; }

/* Entity health rollup cards — member-compliance.html. Status color is the
   only decorative signal used; it always maps to a real soonest due_date
   computed client-side from the same feed the deadline list below shows,
   never a manually-set flag. */
.entity-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: .5rem; }
.entity-health-card { border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }
.entity-health-card--overdue { border-color: #fca5a5; background: #fef2f2; }
.entity-health-card--attention { border-color: #fcd34d; background: #fffbeb; }
.entity-health-card--good { border-color: var(--border); }
:root[data-theme="dark"] .entity-health-card--overdue { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); }
:root[data-theme="dark"] .entity-health-card--attention { background: rgba(180,83,9,.14); border-color: rgba(180,83,9,.35); }
.entity-health-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.entity-health-name { font-weight: 700; color: var(--heading); font-size: .9375rem; }
.entity-health-pill { font-size: .6875rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.entity-health-pill--good { background: #dcfce7; color: #15803d; }
.entity-health-pill--attention { background: #fef3c7; color: #b45309; }
.entity-health-pill--overdue { background: #fee2e2; color: #b91c1c; }
:root[data-theme="dark"] .entity-health-pill--good { background: rgba(21,128,61,.22); color: #86efac; }
:root[data-theme="dark"] .entity-health-pill--attention { background: rgba(180,83,9,.25); color: #fbbf7d; }
:root[data-theme="dark"] .entity-health-pill--overdue { background: rgba(220,38,38,.22); color: #fca5a5; }
.entity-health-next { font-size: .8125rem; color: var(--text); margin-top: .6rem; }
.entity-health-count { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

/* "What Needs Your Attention" is the dashboard's one north-star module —
   give it a touch more visual priority than the panels below it, not a
   fully different treatment. Priority is carried by stroke COLOR at the same
   hairline weight — a 1.5px border was a third stroke value in the system and
   made this panel sit on a different plane than the ones below it. */
.attention-panel { border-color: var(--accent-text); }

/* Shared shimmer placeholder for panels awaiting a Supabase response
   (Up Next, Brand Deals, Community, Recently Added on member-dashboard.html).
   Mirrors the .skeleton-bar/skeletonPulse pattern already used in
   vv-admin-dashboard.css, but themed off this file's own tokens so it
   reads correctly in both day and night mode. */
.skeleton-row { padding: .5rem 0; }
.skeleton-bar {
    display: block;
    height: .875rem;
    border-radius: .375rem;
    background: linear-gradient(90deg, var(--border) 25%, var(--surface) 37%, var(--border) 63%);
    background-size: 400% 100%;
    animation: skeletonPulse 1.4s ease infinite;
}
@keyframes skeletonPulse {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.progress-bar-track {
    height: .5rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; flex: 1;
}
.progress-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Compact tool launcher (demoted feature grid) */
.tool-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem;
}
.tool-tile {
    display: flex; align-items: center; gap: .6rem;
    background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-sm);
    padding: .7rem .8rem; text-decoration: none; color: var(--heading);
    font-size: .8125rem; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.tool-tile:hover {
    border-color: var(--accent-line);
    background: var(--accent-tint);
}
.tool-tile-icon {
    width: 2rem; height: 2rem; border-radius: .55rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem;
}
.tool-tile .tool-badge {
    margin-left: auto; font-size: .5625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .15rem .4rem; border-radius: 999px;
    background: var(--accent-tint); color: var(--teal-dark);
}

/* The former "premium depth tune-ups" re-applied a double shadow to .panel
   here, overriding the base rule above. Depth is no longer how this portal
   signals a surface — the hairline is. The dropdown's glass stays: it is a
   floating overlay, and overlays are allowed to read as above the page. */
.dash-nav-dropdown-panel {
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* =====================================================================
   "V Social" restyle — member-dashboard.html ONLY. Every rule below is
   scoped under body.member-dashboard-v-social so the other pages that
   share this stylesheet (directory, business-profile, messages, letters,
   account, federal-contracting, signatures, affiliate, resources-library,
   support, notary, email, membership-pricing, community-forum,
   progress-tracker) render exactly as before — nothing here leaks out.
   ===================================================================== */
body.member-dashboard-v-social { background: #f3f2ef; }

/* Header (.dash-header, .dash-logo, .dash-nav, .dash-user, notif bell) is
   intentionally NOT overridden here anymore — it renders from the same
   base rules as every other member page, so the nav bar looks and behaves
   identically site-wide. The only dashboard-specific addition is the
   sidebar's mobile toggle button below, since this is the one page with a
   left tools sidebar to open/close. */
body.member-dashboard-v-social .vsoc-menu-toggle {
    display: none; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--heading);
    font-size: 1.1rem; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; flex-shrink: 0;
}
body.member-dashboard-v-social .vsoc-menu-toggle:hover { background: #f3f6f8; }

/* ---- 3-column shell ---- */
/* No max-width — fills the viewport edge to edge (minus the small side
   padding below) instead of capping out and leaving dead gutters on wide
   screens, same reasoning as .dash-wrap-wide/.dash-rail-layout elsewhere. */
body.member-dashboard-v-social .vsoc-shell {
    margin: 0; padding: 1.25rem 1.5rem 0;
    display: grid; grid-template-columns: 260px minmax(0,1fr) 320px;
    gap: 1.25rem; align-items: start;
}
/* Pinned side column. `height` (not max-height) is deliberate: it gives the
   column a definite box that runs from just under the header down to the
   bottom of the viewport, so the nav card below can flex into whatever is
   left over instead of stopping at its content height and leaving a dead
   gap under it. The nav then scrolls inside itself — the sidebar stays put
   while the main column scrolls past. */
body.member-dashboard-v-social .vsoc-sidebar {
    position: sticky; top: calc(var(--dash-header-h, 3.5rem) + 1.25rem);
    display: flex; flex-direction: column; gap: .85rem;
    height: calc(100vh - var(--dash-header-h, 3.5rem) - 2.5rem);
    height: calc(100dvh - var(--dash-header-h, 3.5rem) - 2.5rem);
}
body.member-dashboard-v-social .vsoc-card {
    background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
body.member-dashboard-v-social .vsoc-profile-cover {
    height: 52px;
    background: linear-gradient(135deg, rgba(193, 68, 14,.92), rgba(10,37,64,.95));
}
body.member-dashboard-v-social .vsoc-profile-body { padding: 0 1rem 1rem; text-align: center; margin-top: -32px; }
body.member-dashboard-v-social .vsoc-avatar-lg {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .6rem;
    background: var(--gold); color: var(--navy); font-weight: 700; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    /* Knockout ring, not a lift. Tokenized so it stays a knockout in dark
       mode instead of punching a white circle out of a navy card. */
    border: 3px solid var(--surface);
    overflow: hidden;
}
body.member-dashboard-v-social .vsoc-profile-body h2 { font-size: .95rem; font-weight: 700; color: var(--heading); }

body.member-dashboard-v-social .vsoc-profile-card,
body.member-dashboard-v-social .vsoc-help-card { flex-shrink: 0; }
/* Takes every pixel the profile card leaves behind, then scrolls its own
   overflow. `overscroll-behavior: contain` stops a flick at the end of the
   list from scrolling the page underneath it, and the slim always-visible
   thumb is the cue that there is more menu below the fold. */
body.member-dashboard-v-social .vsoc-nav {
    padding: .5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar { width: 6px; }
body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar-track { background: transparent; }
body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 999px;
}
body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
body.member-dashboard-v-social .vsoc-nav-label {
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #94a3b8; padding: .55rem .65rem .3rem;
}
body.member-dashboard-v-social .vsoc-nav-item {
    width: 100%; display: flex; align-items: center; gap: .65rem;
    padding: .6rem .7rem; border-radius: .5rem;
    color: var(--text); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
body.member-dashboard-v-social .vsoc-nav-item i { width: 20px; text-align: center; color: var(--muted); font-size: .9rem; }
body.member-dashboard-v-social .vsoc-nav-item:hover { background: #f3f6f8; }
body.member-dashboard-v-social .vsoc-nav-item:hover i { color: var(--accent-text); }
body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] { background: var(--accent-tint); color: var(--teal-dark); }
body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] i { color: var(--accent-text); }
body.member-dashboard-v-social .vsoc-nav-divider { height: 1px; background: #ebebeb; margin: .4rem .5rem; }
body.member-dashboard-v-social .vsoc-nav-pill {
    margin-left: auto; font-size: .62rem; font-weight: 700; padding: .15rem .4rem;
    border-radius: 999px; background: var(--accent-tint); color: var(--teal-dark);
}

body.member-dashboard-v-social .vsoc-help-card {
    padding: .9rem 1rem; color: #fff;
    background: linear-gradient(160deg, var(--navy) 0%, var(--teal-dark) 100%);
}
body.member-dashboard-v-social .vsoc-help-card h4 { font-size: .85rem; margin-bottom: .3rem; }
body.member-dashboard-v-social .vsoc-help-card p { font-size: .75rem; color: rgba(255,255,255,.75); margin-bottom: .7rem; }
body.member-dashboard-v-social .vsoc-help-btn { background: #fff; color: var(--navy); width: 100%; }
body.member-dashboard-v-social .vsoc-help-btn:hover { background: #f8fafc; }

/* Bento-style grid: most panels span the full width, but .panel--half
   (Up Next, Brand Deals) pair up side by side instead of stacking, so the
   main column reads as a hierarchy of different-weight tiles rather than a
   uniform single-column stack of identical full-width cards. */
body.member-dashboard-v-social .vsoc-main {
    min-width: 0; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem; align-items: start;
}
body.member-dashboard-v-social .vsoc-main > * { grid-column: 1 / -1; }
body.member-dashboard-v-social .vsoc-main > .panel--half {
    grid-column: span 1;
    /* Fill the row: the grid stretches each row to its tallest panel, so a
       shorter neighbor otherwise leaves a page-background hole (reported
       twice with different panel pairings). Whitespace inside a panel
       reads as intentional; a hole between panels reads as broken. */
    align-self: stretch;
}
@media (max-width: 640px) {
    body.member-dashboard-v-social .vsoc-main { grid-template-columns: 1fr; }
}
body.member-dashboard-v-social .vsoc-rail {
    position: sticky; top: calc(var(--dash-header-h, 3.5rem) + 1.25rem);
    display: flex; flex-direction: column; gap: .85rem;
}

.vsoc-sidebar-close {
    display: none; position: absolute; top: .55rem; right: .55rem; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(15, 28, 46, .32); color: #fff; font-size: .95rem;
    align-items: center; justify-content: center;
}
.vsoc-sidebar-close:hover { background: rgba(15, 28, 46, .5); }

body.member-dashboard-v-social .vsoc-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 70;
}
body.member-dashboard-v-social .vsoc-backdrop.show { display: block; }

/* ---- Day/Night toggle switch ----
   Replica of the paper-cut "day and night" switch the user supplied
   (2026-08-11): layered sky arcs + clouds behind a dimensional sun;
   starfield arcs + cratered moon at night. Pure CSS over the existing
   markup (same classes on ~20 pages), art inlined as SVG data URIs;
   the two track scenes crossfade via ::before/::after. */
.theme-toggle { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.theme-toggle-track {
    position: relative; display: inline-block; width: 54px; height: 24px; border-radius: 999px;
    overflow: hidden; vertical-align: middle; background: #cfe7fb;
    box-shadow: inset 0 2px 4px rgba(8, 16, 32, .45), inset 0 -1px 1px rgba(255, 255, 255, .25), 0 1px 0 rgba(255, 255, 255, .18);
}
.theme-toggle-track::before, .theme-toggle-track::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background-size: cover; background-position: center; transition: opacity .18s ease-out;
    box-shadow: inset 0 2px 4px rgba(4, 10, 24, .6), inset 0 3px 8px rgba(4, 10, 24, .35), inset 0 -1px 2px rgba(255, 255, 255, .22);
}
.theme-toggle-track::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 60'%3E%3Crect width='132' height='60' fill='%23cfe7fb'/%3E%3Ccircle cx='30' cy='30' r='104' fill='%23aacff5'/%3E%3Ccircle cx='30' cy='30' r='84' fill='%238dbdee'/%3E%3Ccircle cx='30' cy='30' r='65' fill='%2372ace8'/%3E%3Ccircle cx='30' cy='30' r='48' fill='%235c9ce1'/%3E%3Ccircle cx='30' cy='30' r='33' fill='%234a8ed9'/%3E%3Cg fill='%23e9f2fb'%3E%3Ccircle cx='66' cy='64' r='18'/%3E%3Ccircle cx='88' cy='56' r='16'/%3E%3Ccircle cx='112' cy='62' r='18'/%3E%3Ccircle cx='128' cy='54' r='14'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='58' cy='68' r='16'/%3E%3Ccircle cx='76' cy='61' r='13'/%3E%3Ccircle cx='96' cy='65' r='15'/%3E%3Ccircle cx='116' cy='59' r='13'/%3E%3Ccircle cx='130' cy='65' r='12'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-toggle-track::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 60'%3E%3Crect width='132' height='60' fill='%23151a24'/%3E%3Ccircle cx='102' cy='30' r='104' fill='%231d2330'/%3E%3Ccircle cx='102' cy='30' r='84' fill='%23272e3d'/%3E%3Ccircle cx='102' cy='30' r='65' fill='%23323a4b'/%3E%3Ccircle cx='102' cy='30' r='48' fill='%233e4759'/%3E%3Ccircle cx='102' cy='30' r='33' fill='%234b5468'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='26' cy='40' r='2'/%3E%3Ccircle cx='44' cy='22' r='1.6'/%3E%3Ccircle cx='36' cy='52' r='1.4'/%3E%3Ccircle cx='58' cy='44' r='1.6'/%3E%3Ccircle cx='66' cy='14' r='1.5'/%3E%3Cpath d='M16 12l1.5 3.8 3.8 1.5-3.8 1.5-1.5 3.8-1.5-3.8-3.8-1.5 3.8-1.5z'/%3E%3Cpath d='M52 30l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z'/%3E%3Cpath d='M70 46l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1z'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; }
.theme-toggle[aria-pressed="true"] .theme-toggle-track::before { opacity: 0; }
.theme-toggle[aria-pressed="true"] .theme-toggle-track::after { opacity: 1; }
.theme-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle at 35% 30%, #ffd744, #f6bd1f 62%, #eaa915 100%);
    box-shadow: inset 0 -3px 3px rgba(146, 90, 7, .4), inset 0 2px 2px rgba(255, 255, 255, .5), 0 1px 3px rgba(20, 30, 50, .35);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), background .18s ease-out, box-shadow .18s ease-out, scale .12s ease;
}
/* The scene art IS the iconography — the old FA sun/moon glyphs retire. */
.theme-toggle-thumb .fa-sun, .theme-toggle-thumb .fa-moon { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
    transform: translateX(30px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='26' fill='%23c9ced8'/%3E%3Ccircle cx='21' cy='20' r='22' fill='%23d7dbe4' opacity='.5'/%3E%3Ccircle cx='33' cy='21' r='8.5' fill='%23aab1c0'/%3E%3Ccircle cx='19' cy='33' r='5' fill='%23aab1c0'/%3E%3Ccircle cx='34' cy='37' r='4' fill='%23b3b9c7'/%3E%3C/svg%3E") center/cover, #c9ced8;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .35), inset 0 -3px 3px rgba(40, 48, 66, .35), 0 1px 3px rgba(0, 0, 0, .45);
}
/* Press feedback — quick dip on press, fast decisive slide (user
   preferred the mock's instant feel over a slower spring). `scale` is
   its own property so it stacks cleanly on the translateX transform. */
.theme-toggle:active .theme-toggle-thumb { scale: .88; }
.theme-toggle:hover .theme-toggle-thumb { box-shadow: inset 0 -3px 3px rgba(146, 90, 7, .4), inset 0 2px 2px rgba(255, 255, 255, .5), 0 2px 6px rgba(20, 30, 50, .5); }
.theme-toggle[aria-pressed="true"]:hover .theme-toggle-thumb { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .35), inset 0 -3px 3px rgba(40, 48, 66, .35), 0 2px 6px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle-thumb, .theme-toggle-track::before, .theme-toggle-track::after { transition-duration: .01s; }
}
.theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; }
@media (max-width: 640px) {
    .theme-toggle-track { width: 46px; height: 20px; }
    .theme-toggle-thumb { width: 16px; height: 16px; }
    .theme-toggle[aria-pressed="true"] .theme-toggle-thumb { transform: translateX(26px); }
}

/* ---- Quick Tools grid (home dashboard) ---- */
.dash-quick-tools {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem;
}
.qt-tile {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: .85rem .5rem; border-radius: .75rem; border: 1px solid var(--border);
    color: var(--heading); text-decoration: none; text-align: center;
    font-size: .75rem; font-weight: 600; transition: background .15s, border-color .15s, transform .12s ease;
}
.qt-tile i { font-size: 1.15rem; color: var(--accent-text); }
.qt-tile:hover { background: #f3f6f8; border-color: #d7dde3; }
@media (max-width: 640px) {
    .dash-quick-tools { grid-template-columns: repeat(3, 1fr); }

    .panel {
        padding: 1rem 1.125rem;
    }

    .panel-head {
        margin-bottom: 0.75rem;
        padding-bottom: 0.6rem;
    }

    .panel-title {
        font-size: 0.9375rem;
    }
}

/* Below 1100px there's no room for a third 320px column, but the rail
   (current tier/member-since, Recently Added) shouldn't just disappear —
   it used to be display:none here, silently losing that content on every
   tablet and phone. Instead it drops out of the sticky side column and
   rejoins the normal top-to-bottom flow, after the main column. */
@media (max-width: 1100px) {
    body.member-dashboard-v-social .vsoc-shell { grid-template-columns: 260px minmax(0,1fr); }
    body.member-dashboard-v-social .vsoc-rail {
        position: static; grid-column: 2; grid-row: 2;
    }
}
/* Tablet band only (sidebar still a real column, not yet the mobile
   drawer): lay the two rail cards side by side across the main column's
   width instead of stacking them full-height under each other. */
@media (max-width: 1100px) and (min-width: 821px) {
    body.member-dashboard-v-social .vsoc-rail { flex-direction: row; }
    body.member-dashboard-v-social .vsoc-rail .panel { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 820px) {
    body.member-dashboard-v-social .vsoc-menu-toggle { display: inline-flex; }
    body.member-dashboard-v-social .dash-nav { display: none; }
    body.member-dashboard-v-social .vsoc-shell { grid-template-columns: 1fr; padding: 1rem .9rem 0; }
    body.member-dashboard-v-social .vsoc-rail { grid-column: 1; grid-row: 2; }
    body.member-dashboard-v-social .vsoc-sidebar {
        /* Full height: top 0 (over the header, z 80 > header's 50) to the
           bottom safe-area — maximum room for the menu on a phone. */
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(300px, 86vw); z-index: 80; background: #f3f2ef;
        transform: translateX(-105%); transition: transform .25s ease;
        padding: .85rem .85rem calc(.85rem + env(safe-area-inset-bottom));
        /* Drop the desktop fixed height — the drawer is already pinned
           top:0/bottom:0 and scrolls as one piece, so the nav card must go
           back to sizing on its content. */
        overflow-y: auto; max-height: none; height: auto;
        box-shadow: 8px 0 24px rgba(0,0,0,.12);
    }
    /* The drawer itself is the scroller here, so the nav card sizes to its
       content and hands its overflow up to the aside — otherwise you get two
       nested scroll areas fighting each other on a phone. */
    body.member-dashboard-v-social .vsoc-nav { flex: 0 0 auto; overflow-y: visible; }
    body.member-dashboard-v-social .vsoc-sidebar-close { display: flex; }
    body.member-dashboard-v-social .vsoc-sidebar.open { transform: translateX(0); }
}

/* =====================================================================
   Day/Night toggle — dark theme overrides (member-dashboard.html only).
   Root token flips (--bg/--surface/--border/--text/--muted/--heading)
   cover most of the page since components consistently draw from those
   variables. What's below patches the handful of rules on this specific
   page that hardcode a light-mode hex color instead of a variable, so
   nothing goes low-contrast (light text on light bg, or vice versa) once
   the page background flips dark.
   ===================================================================== */
:root[data-theme="dark"] .dash-header {
    background: rgba(11, 18, 32, .86);
    /* Hairline only, matching the light header — the ambient drop was the
       last piece of resting elevation left in the page chrome. */
    box-shadow: 0 1px 0 var(--border);
}
:root[data-theme="dark"] .dash-nav a:hover,
:root[data-theme="dark"] .dash-nav-dropdown-btn:hover,
:root[data-theme="dark"] .dash-nav-dropdown.has-active .dash-nav-dropdown-btn,
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-menu-toggle:hover,
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item:hover {
    background: #1b2537;
}
:root[data-theme="dark"] .dash-nav-dropdown-panel {
    background: rgba(19, 28, 44, .97); border: 1px solid var(--border);
}
:root[data-theme="dark"] .dash-nav-dropdown-panel a:hover { background: #1b2537; }
:root[data-theme="dark"] .gs-dropdown {
    background: rgba(19, 28, 44, .97); border-color: var(--border);
}
:root[data-theme="dark"] .gs-input { background: #1b2537; }
:root[data-theme="dark"] .gs-row:hover { background: #16253a; }
:root[data-theme="dark"] .stat-chip { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .resource-row,
:root[data-theme="dark"] .upnext-row,
:root[data-theme="dark"] .notary-row {
    background: #1a2534;
}
:root[data-theme="dark"] .notary-dropzone { background: #1a2534; }
:root[data-theme="dark"] .notary-dropzone:hover,
:root[data-theme="dark"] .notary-dropzone.dragover { background: #16253a; }
:root[data-theme="dark"] .resource-row:hover,
:root[data-theme="dark"] .upnext-row:hover {
    background: #16253a; border-color: var(--teal-dark);
}
:root[data-theme="dark"] .upnext-check { background: #1b2537; border-color: var(--border); }
:root[data-theme="dark"] .qt-tile:hover { background: #1b2537; border-color: var(--teal-dark); }
:root[data-theme="dark"] .dash-logout:hover { background: rgba(226, 84, 62, .15); }
:root[data-theme="dark"] .progress-bar-track { background: #1b2537; }
:root[data-theme="dark"] body.member-dashboard-v-social { background: var(--bg); }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-divider { background: var(--border); }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] {
    background: rgba(193, 68, 14, .18); color: #ff8a5c;
}
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-sidebar {
    background: var(--bg);
}
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav {
    scrollbar-color: #3a4759 transparent;
}
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar-thumb { background: #3a4759; }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav::-webkit-scrollbar-thumb:hover { background: #4d5c72; }
:root[data-theme="dark"] .dash-nav-dropdown-panel a[aria-current="page"] {
    background: rgba(193, 68, 14, .18);
}

/* =====================================================================
   Page rhythm — the simple stacked pages (Mail, Domains, Orders, …) had
   their last panel touching the footer, and sibling panels touching each
   other. The social dashboard spaces its own closing section, so it's
   excluded from the footer padding.
   ===================================================================== */
body:not(.member-dashboard-v-social) main { padding-bottom: 2.5rem; }
.dash-wrap > .panel + .panel { margin-top: 2rem; }
#bp-view .panel + .panel { margin-top: 2rem; }

/* =====================================================================
   Dark-mode baseline for form controls. Browsers default text controls
   to a white background; pages that never set one were rendering white
   glare boxes in dark mode (the Domains transfer form was the reported
   case, but Account, Email, and Federal Contracting had the same gap).
   Any page rule that themes a control explicitly still wins on
   specificity. Checkbox/radio/file/etc. keep their native rendering.
   ===================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); }

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
    border-color: #E87A2E;
    box-shadow: 0 0 0 3px rgba(232, 122, 46, 0.12);
}

/* Business Name Ideas widget (member-dashboard.html) */
.namegen-hint { font-size: .8125rem; color: var(--muted); margin-bottom: .75rem; }
.namegen-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.namegen-form input {
    flex: 1; min-width: 180px; padding: .6rem .85rem;
    border: 1px solid var(--border); border-radius: .65rem;
    font-size: .875rem; font-family: inherit;
    background: var(--surface); color: var(--text);
}
.namegen-form input:focus {
    outline: none; border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}
.namegen-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; flex-wrap: wrap; padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}
.namegen-row:last-child { border-bottom: none; }
.namegen-main { flex: 1; min-width: 180px; }
.namegen-main strong { display: block; font-size: .9375rem; color: var(--heading); }
.namegen-main span { font-size: .75rem; color: var(--muted); }
.namegen-domains { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.namegen-check-btn {
    padding: .35rem .7rem; font-size: .6875rem; font-weight: 600;
    border-radius: 999px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    transition: border-color .15s, color .15s;
}
.namegen-check-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.namegen-tld {
    font-size: .6875rem; font-weight: 700; text-decoration: none;
    padding: .3rem .6rem; border-radius: 999px;
    background: rgba(4, 120, 87, .12); color: #047857;
}
:root[data-theme="dark"] .namegen-tld { background: rgba(4, 120, 87, .22); color: #6ee7b7; }
.namegen-checking, .namegen-taken { font-size: .75rem; color: var(--muted); }
.namegen-error { font-size: .8125rem; color: #b91c1c; }
:root[data-theme="dark"] .namegen-error { color: #fca5a5; }

/* ===== Monoline icon set (sidebar + account dropdown) =====
   Custom inline-SVG sprite defined in member-dashboard.html — replaces
   Font Awesome in the nav rail per the approved 2026-08-11 icon mock.
   Treatment: neutral gray rail; the accent orange is reserved for the
   active page and hover (an all-accent rail flattens hierarchy). */
.vv-mono-ic {
    width: 22px; height: 22px; flex-shrink: 0;
    fill: none; stroke: #64748b; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.vv-mono-ic .dot { fill: #64748b; stroke: none; }
body.member-dashboard-v-social .vsoc-nav-item:hover .vv-mono-ic,
body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] .vv-mono-ic,
.dash-nav-dropdown-panel a:hover .vv-mono-ic,
.dash-nav-dropdown-panel a[aria-current="page"] .vv-mono-ic { stroke: #C45A1A; }
body.member-dashboard-v-social .vsoc-nav-item:hover .vv-mono-ic .dot,
body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] .vv-mono-ic .dot,
.dash-nav-dropdown-panel a:hover .vv-mono-ic .dot,
.dash-nav-dropdown-panel a[aria-current="page"] .vv-mono-ic .dot { fill: #C45A1A; }
.dash-nav-dropdown-panel .vv-mono-ic { width: 18px; height: 18px; }
:root[data-theme="dark"] .vv-mono-ic { stroke: #8b99ad; }
:root[data-theme="dark"] .vv-mono-ic .dot { fill: #8b99ad; }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item:hover .vv-mono-ic,
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] .vv-mono-ic,
:root[data-theme="dark"] .dash-nav-dropdown-panel a:hover .vv-mono-ic,
:root[data-theme="dark"] .dash-nav-dropdown-panel a[aria-current="page"] .vv-mono-ic { stroke: #E87A2E; }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item:hover .vv-mono-ic .dot,
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-nav-item[aria-current="page"] .vv-mono-ic .dot,
:root[data-theme="dark"] .dash-nav-dropdown-panel a:hover .vv-mono-ic .dot,
:root[data-theme="dark"] .dash-nav-dropdown-panel a[aria-current="page"] .vv-mono-ic .dot { fill: #E87A2E; }

/* Quick Tools tiles keep the full accent — this is the icon set's
   showcase moment (mock: 30px, accent orange in both modes). */
.qt-tile .vv-mono-ic { width: 30px; height: 30px; stroke: #C45A1A; }
.qt-tile .vv-mono-ic .dot { fill: #C45A1A; }
:root[data-theme="dark"] .qt-tile .vv-mono-ic { stroke: #E87A2E; }
:root[data-theme="dark"] .qt-tile .vv-mono-ic .dot { fill: #E87A2E; }

/* ===== Cohesion & feel pass (design audit 2026-08-12, items 1/2/5) ===== */
/* Press feedback — every pressable element dips slightly under the click. */
.btn:active:not(:disabled), .qt-tile:active, .vault-btn:active, .tool-tile:active,
.namegen-check-btn:active, .dash-back-btn:active { transform: scale(.97); }
/* Dark-mode stragglers */
:root[data-theme="dark"] .dash-back-btn:hover { background: #1b2537; }
:root[data-theme="dark"] body.member-dashboard-v-social .vsoc-avatar-lg { border-color: var(--surface); }
/* Post-purchase banner — was inline mint-on-light, brightest object on a
   dark page at a new member's first moment. Brand tint in both themes. */
.purchase-banner {
    padding: 1rem 1.25rem; border-radius: var(--radius);
    background: var(--accent-tint); border: var(--stroke) solid var(--accent-line);
    color: var(--text); font-size: .9rem; line-height: 1.6;
}
:root[data-theme="dark"] .purchase-banner { background: #1b2537; border-color: rgba(232, 122, 46, .35); }

/* ===== FA-free dashboard (design audit phase 2) — icon contexts ===== */
.panel-title .vv-mono-ic { width: 17px; height: 17px; stroke: var(--teal); vertical-align: -3px; margin-right: .15rem; }
.panel-title .vv-mono-ic .dot { fill: var(--teal); }
:root[data-theme="dark"] .panel-title .vv-mono-ic { stroke: #E87A2E; }
:root[data-theme="dark"] .panel-title .vv-mono-ic .dot { fill: #E87A2E; }
.vv-ic-sm { width: 15px; height: 15px; stroke: currentColor; vertical-align: -2.5px; }
.vv-ic-sm .dot { fill: currentColor; }
/* The dark-theme rail rule above (0,2,0) would out-specify .vv-ic-sm (0,1,0)
   and paint gray glyphs on accent buttons — keep these on currentColor. */
:root[data-theme="dark"] .vv-ic-sm { stroke: currentColor; }
:root[data-theme="dark"] .vv-ic-sm .dot { fill: currentColor; }
.dash-logo .vv-mono-ic { width: 19px; height: 19px; stroke: currentColor; vertical-align: -3px; }
.notif-bell .vv-mono-ic { width: 19px; height: 19px; stroke: currentColor; }
.vsoc-menu-toggle .vv-mono-ic { width: 20px; height: 20px; stroke: currentColor; }
.namegen-tld .vv-mono-ic { width: 11px; height: 11px; stroke: currentColor; vertical-align: -1.5px; }
/* Spinner replacing fa-spinner/fa-spin — plain CSS, honors reduced motion */
.vv-spin {
    display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: vvspin .7s linear infinite;
}
@keyframes vvspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vv-spin { animation-duration: 1.6s; } }

/* ===== Daily Insight + Business News (audit follow-up 2026-08-12) ===== */
.daily-tip-day { font-size: .6875rem; font-weight: 700; color: var(--muted); }
.daily-tip-cat {
    font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--gold); margin-bottom: .35rem;
}
.daily-tip-text { font-size: .875rem; line-height: 1.55; color: var(--text); margin-bottom: .7rem; }
.daily-tip-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 700; color: var(--accent-text); text-decoration: none;
}
.daily-tip-link:hover { text-decoration: underline; }
.biznews-row { display: block; padding: .5rem 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.biznews-row:last-child { border-bottom: none; }
.biznews-row:hover .biznews-title { color: var(--accent-text); }
.biznews-title { display: block; font-size: .8125rem; font-weight: 600; color: var(--heading); line-height: 1.4; }
.biznews-meta { font-size: .6875rem; color: var(--muted); }

/* =====================================================================
   Trailing "Meet your team" / "Need Help" block (member-dashboard only).
   It sits after .vsoc-shell as a plain .dash-wrap, so it was inheriting
   that class's centred max-width:1200 — which on a wide screen made it
   both wider than the dashboard's centre column AND offset to the left of
   it (measured 1200px starting at x=120, against the centre column's
   772px starting at x=304). Line it up with that column exactly instead,
   so the page ends on the same vertical rhythm it keeps all the way down.

   The offsets are the shell's own geometry, not magic numbers:
   left  = shell side padding + rail track + grid gap
   right = same, using the right rail's 320px track (>=1101px only, since
           below that the third column doesn't exist).
   Scoped to `main >` so the footer's own .dash-wrap is untouched.
   ===================================================================== */
@media (min-width: 821px) {
    body.member-dashboard-v-social main > .dash-wrap {
        max-width: none;
        margin-left: calc(1.5rem + 260px + 1.25rem);
        margin-right: 1.5rem;
        padding: 0;
    }
}
@media (min-width: 1101px) {
    body.member-dashboard-v-social main > .dash-wrap {
        margin-right: calc(1.5rem + 320px + 1.25rem);
    }
}

/* =====================================================================
   Form validation feedback
   ===================================================================== */
.bp-handle-status {
    font-size: 0.8rem;
    min-height: 1.1em;
    color: var(--muted);
}

.bp-handle-status.ok {
    color: #16a34a;
}

.bp-handle-status.bad {
    color: #dc2626;
}

:root[data-theme="dark"] .bp-handle-status.ok {
    color: #4ade80;
}

:root[data-theme="dark"] .bp-handle-status.bad {
    color: #fca5a5;
}

/* Save status message */
.save-status {
    font-size: 0.85rem;
    color: var(--muted);
    min-height: 1.5em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.save-status.success {
    color: #16a34a;
    font-weight: 500;
}

.save-status.error {
    color: #dc2626;
    font-weight: 500;
}

:root[data-theme="dark"] .save-status.success {
    color: #4ade80;
}

:root[data-theme="dark"] .save-status.error {
    color: #fca5a5;
}

/* Census market stats — shared by the Business Snapshot panel on
   member-dashboard.html and the market card on member-resources-library.html.
   Lives here because vv-member-dashboard.css is the one stylesheet BOTH pages
   load. The card previously emitted .cd-stat/.biz-card-qr-wrap, which are
   defined in vv-credit-dispute.css (scoped to body.cd-page) and
   vv-member-social.css respectively — neither of which the resources library
   loads, so every stat rendered completely unstyled. Same visual language as
   .cd-stat, just not tied to another page's body class. */
.market-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.market-stat {
    flex: 1 1 7rem; background: var(--surface);
    border: var(--stroke) solid var(--border);
    border-radius: var(--radius); padding: .8rem 1rem;
}
.market-stat .n {
    font-size: 1.5rem; font-weight: 800; color: var(--heading);
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
.market-stat .l {
    font-size: .7rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700; margin-top: .15rem;
}

/* Text inputs on member pages outside the credit-dispute and admin sheets.
   .input-field and .ein-actions were defined ONLY in vv-admin-dashboard.css /
   vv-member-social.css, neither of which member-compliance.html loads — so the
   trademark serial box rendered as an unstyled browser-default input inside a
   wrapper with no flex. Reported as "I didn't even know we needed to input a
   number". Tokened for both themes rather than copying the admin sheet's
   hardcoded background:#fff, which renders as a white box in dark mode. */
.ein-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.input-field {
    border: var(--stroke) solid var(--border);
    border-radius: .75rem;
    padding: .6875rem .875rem;
    font-size: .875rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.input-field:focus {
    outline: none;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}

/* Draws the eye to the one field the panel exists for. Uses the accent ring
   the flattening pass explicitly KEPT as an accessibility affordance
   (HANDOFF §2a) — not a reintroduced card shadow. The pulse runs three times
   then stops, so it attracts attention without becoming permanent noise, and
   is dropped entirely under prefers-reduced-motion. */
.input-field--attention {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(193, 68, 14, .1);
}
@media (prefers-reduced-motion: no-preference) {
    .input-field--attention { animation: tmAttention 1.8s ease-out 3; }
    @keyframes tmAttention {
        0%, 100% { box-shadow: 0 0 0 3px rgba(193, 68, 14, .1); }
        50%      { box-shadow: 0 0 0 6px rgba(193, 68, 14, .2); }
    }
}
.tm-prompt { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }

/* "I don't have a serial number yet" — native <details>, same pattern as
   .team-details. Collapsed by default so the panel still leads with the
   check-status action for members who already filed. */
.tm-help { margin-top: .9rem; border-top: var(--stroke) solid var(--border); padding-top: .75rem; }
.tm-help summary {
    cursor: pointer; font-size: .8125rem; font-weight: 700;
    color: var(--accent-text); list-style: none;
}
.tm-help summary::-webkit-details-marker { display: none; }
.tm-help summary::after { content: " \25BE"; }
.tm-help[open] summary::after { content: " \25B4"; }
.tm-help ol { margin: .7rem 0 0; padding-left: 1.15rem; }
.tm-help li { font-size: .8125rem; color: var(--muted); margin-bottom: .55rem; line-height: 1.5; }
.tm-help li a { color: var(--accent-text); font-weight: 600; }
.tm-help .tm-help-note { font-size: .75rem; color: var(--muted); margin-top: .5rem; }