/**
 * Contractors4Christ — App Shell CSS (v18.3 — Mobile Responsive Audit)
 *
 * WHAT CHANGED vs v18.2:
 *  1. html/body overflow-x:hidden — kills theme-caused horizontal scroll.
 *  2. .c4c-app: width:100% + overflow-x:hidden + no border-radius on mobile.
 *  3. .c4c-main: min-width:0 prevents grid-child blowout.
 *  4. .c4c-content: clamp() padding, env(safe-area-inset-bottom) for notch.
 *  5. Stat grid: 2-col everywhere on mobile, align-items:stretch equal heights.
 *  6. All font sizes use clamp() — no cramped text, no huge text.
 *  7. Hover effects gated to @media(hover:hover) — touch devices never fire them.
 *  8. Bottom nav: env(safe-area-inset-bottom), min 48x48 touch targets.
 *  9. FAB: calculated bottom above nav bar, safe-area-aware.
 * 10. Toast: left/right inset offsets, no translateX(-50%) overflow.
 * 11. Forms: font-size:16px prevents iOS auto-zoom on focus.
 * 12. Quick actions: 2-col on all phones, 3-col on tablets.
 * 13. .c4c-grid--2: single col below 600 px (was 320 px min causing overflow).
 * 14. Auth card: calc(100% - 32px) width, always fits viewport.
 * 15. min-width:0 on every flex/grid child that holds text.
 * 16. Removed duplicate padding/gap rules that caused right-shift.
 * 17. Breakpoints: 320 / 360 / 390 / 430 / 601 / 961 px.
 */

/* ══════════════════════════════════════ 0 · GLOBAL OVERFLOW RESET */
html,
body {
    overflow-x: hidden;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════ 1 · DESIGN TOKENS
   v2.0: these now ALIAS the global design-tokens.css variables (the single
   source of truth used by search/category/profile/guest pages too) rather
   than redefining their own separate values — this is what keeps the
   dashboard/CRM and the rest of the product from silently drifting apart
   over time. Values are unchanged (they already matched), only the source
   changed from hardcoded hex to var(--c4c-*) references. Requires
   c4c-tokens (design-tokens.css) to be enqueued before this file — see
   AssetLoader::enqueue() and JourneyNavController::maybe_enqueue(). */
.c4c-app,
.c4c-auth-card,
.c4c-partner-form {
    --c4c-gold:         var(--c4c-brand-gold, #c99b3f);
    --c4c-gold-strong:  var(--c4c-brand-gold-strong, #b0842a);
    --c4c-gold-soft:    var(--c4c-brand-gold-soft, rgba(201,155,63,.14));
    --c4c-ink:          var(--c4c-text, #101623);
    --c4c-ink-2:        var(--c4c-text-secondary, #475062);
    --c4c-ink-3:        var(--c4c-text-tertiary, #7b8497);
    --c4c-surface:      var(--c4c-bg, #f6f7fa);
    /* NOT var(--c4c-surface, ...) — the line above re-declares
       --c4c-surface on this same element, so that would resolve to the
       page background and make cards invisible against it. */
    --c4c-card:         var(--c4c-surface-base, #ffffff);
    --c4c-line:         var(--c4c-border, #e6e9f0);
    --c4c-sidebar:      #10151D;
    --c4c-sidebar-2:    #1C2333;
    --c4c-sidebar-text: #aab3c5;
    --c4c-green:        var(--c4c-success, #1f9d61);
    --c4c-red:          var(--c4c-danger, #d64545);
    --c4c-blue:         var(--c4c-info, #3b6fd4);
    --c4c-radius:       var(--c4c-radius-lg, 16px);
    --c4c-radius-sm:    var(--c4c-radius-md, 10px);
    --c4c-shadow:       var(--c4c-shadow-sm, 0 1px 2px rgba(16,22,35,.05),0 8px 24px rgba(16,22,35,.06));
    --c4c-shadow-lift:  var(--c4c-shadow-lg, 0 4px 10px rgba(16,22,35,.08),0 18px 40px rgba(16,22,35,.12));
    --c4c-glass:        rgba(255,255,255,.72);
    /* --c4c-font intentionally NOT redeclared here — it already inherits
       from the global --c4c-font set in design-tokens.css's :root block;
       redeclaring it as var(--c4c-font, ...) on the same custom property
       name would create a self-reference (invalid per spec). */
    font-family: var(--c4c-font, -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif);
    color:       var(--c4c-ink);
    box-sizing:  border-box;
}

/* v2.4.6 keyed this ONLY to [data-c4c-theme="dark"], then added a
   .c4c-dark alternative alongside it as a patch rather than a fix — so
   the dashboard had its own separate theme system (localStorage
   'c4c-theme', dataset.c4cTheme) running in parallel with the one every
   other page uses (localStorage 'c4c_dark_mode', the '.c4c-dark' class
   from window.C4CTheme in assets/js/pwa.js). That's what let the
   dashboard show dark while Search/contractor-profile/category pages
   never did — flipping the dashboard's own toggle never touched the key
   or class those pages actually check. v2.5.7 unified the JS side onto
   window.C4CTheme everywhere (see homeowner-dashboard.js and
   contractor-dashboard.js) — [data-c4c-theme="dark"] is dead now, so it's
   removed here rather than kept as an unused second selector. */
.c4c-dark .c4c-app,
.c4c-dark .c4c-auth-card,
.c4c-dark .c4c-partner-form {
    --c4c-ink:     #eef1f7;
    --c4c-ink-2:   #b6bdcc;
    --c4c-ink-3:   #8b93a5;
    --c4c-surface: #0d1119;
    --c4c-card:    #161c28;
    --c4c-line:    #232b3b;
    --c4c-glass:   rgba(22,28,40,.72);
    --c4c-shadow:  0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --c4c-shadow-lift: 0 4px 10px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.45);
}

.c4c-app *,
.c4c-app *::before,
.c4c-app *::after { box-sizing: border-box; }

/* ══════════════════════════════════════ 2 · THEME-BLEED RESET */
.c4c-app a                               { color:inherit;text-decoration:none;box-shadow:none; }
.c4c-app h1,.c4c-app h2,
.c4c-app h3,.c4c-app p                   { margin:0; }
.c4c-app button                          { font-family:inherit; }
.c4c-app .c4c-nav-item,
.c4c-app .c4c-nav-item:visited           { color:var(--c4c-sidebar-text);border:0;background:transparent;box-shadow:none; }
.c4c-app .c4c-nav-item[aria-current="page"] { background:var(--c4c-gold-soft);color:var(--c4c-gold);box-shadow:inset 3px 0 0 var(--c4c-gold); }
.c4c-app .c4c-stat,.c4c-app .c4c-action { color:var(--c4c-ink); }
.c4c-app .c4c-stat__value               { color:var(--c4c-ink); }
.c4c-app .c4c-bottomnav button,
.c4c-app .c4c-bottomnav a               { border:0;box-shadow:none; }
.c4c-app .c4c-icon-btn                  { color:var(--c4c-ink-2); }
.c4c-app .c4c-section-title a           { color:var(--c4c-gold-strong); }
.c4c-app .c4c-ccard__name               { color:var(--c4c-ink); }
.c4c-app .c4c-btn--primary              { color:var(--c4c-gold-ink, #171203); }
.c4c-app .c4c-btn--secondary            { color:var(--c4c-ink); }
.c4c-app .c4c-btn--danger               { color:var(--c4c-red);border:0; }
.c4c-app .c4c-btn--ghost                { border:0; }

/* ══════════════════════════════════════ 3 · APP SHELL */
.c4c-app {
    display:               grid;
    grid-template-columns: var(--c4c-sidebar-w,288px) minmax(0,1fr);
    min-height:            100vh;
    width:                 100%;
    /* v2.16.43 FIX: was `overflow-x: hidden`, which silently DISABLES the
       sidebar's position:sticky (any non-visible overflow on an ancestor
       makes it the sticky containing scroller) — that's why the sidebar
       scrolled away with the page. `clip` gives the same horizontal
       blowout protection without creating a scroll container, so the
       sidebar now stays pinned while the content scrolls. */
    overflow-x:            clip;
    background:            var(--c4c-surface);
    border-radius:         var(--c4c-radius);
}
.c4c-app.c4c-app--collapsed { grid-template-columns:76px minmax(0,1fr); }

/* ── sidebar ── */
.c4c-sidebar {
    background:     linear-gradient(180deg,var(--c4c-sidebar) 0%,var(--c4c-sidebar-2) 100%);
    color:          var(--c4c-sidebar-text);
    display:        flex;
    flex-direction: column;
    padding:        24px 16px;
    gap:            4px;
    position:       sticky;
    top:            0;
    max-height:     100vh;
    overflow-y:     auto;
    /* v2.16.43: hide the scrollbar strip on the sidebar's right edge —
       it can still scroll by wheel/trackpad/touch if the menu ever grows
       taller than the screen, but the bar itself never shows. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}
.c4c-sidebar::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge */
.c4c-sidebar__brand {
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      8px 8px 24px;
    color:        #fff;
    font-weight:  700;
    font-size:    16px;
    white-space:  nowrap;
}
.c4c-sidebar__logo {
    width:64px;height:34px;flex:none;
    display:grid;place-items:center;
    border-radius:10px;
    background:linear-gradient(135deg,var(--c4c-gold),var(--c4c-gold-strong));
    color:var(--c4c-gold-ink, #171203);font-weight:800;font-size:13px;
    box-shadow:0 4px 14px rgba(201,155,63,.4);
}
/* v2.16.57: the logo image sits in the SAME slot the gold mark badge
   does, side by side with the name (<em>) — previously this replaced the
   name entirely and could grow up to 150px wide since nothing shared the
   row with it. Capped at the badge's own width (64px, see
   .c4c-sidebar__logo above) so a wide/rectangular logo can't crowd the
   name text out or overflow the sidebar. */
.c4c-sidebar__logo-img {
    height:34px;width:auto;max-width:64px;flex:none;
    object-fit:contain;display:block;
}
/* The brand block is a link now (it always should have been) — make sure it
   doesn't pick up the theme's underline or link color. */
a.c4c-sidebar__brand { text-decoration:none;color:inherit; }
a.c4c-sidebar__brand:hover { opacity:.9; }
.c4c-nav-item {
    display:       flex;
    align-items:   center;
    gap:           14px;
    width:         100%;
    padding:       13px 14px;
    border:        0;
    border-radius: var(--c4c-radius-sm);
    background:    transparent;
    color:         var(--c4c-sidebar-text);
    font:          inherit;
    font-size:     15px;
    font-weight:   500;
    cursor:        pointer;
    text-decoration: none;
    transition:    background .15s ease,color .15s ease,transform .15s ease;
    white-space:   nowrap;
}
.c4c-nav-item[aria-current="page"] {
    background:  var(--c4c-gold-soft);
    color:       var(--c4c-gold);
    font-weight: 600;
    box-shadow:  inset 3px 0 0 var(--c4c-gold);
}
.c4c-nav-item svg        { width:21px;height:21px;flex:none; }
.c4c-nav-item .c4c-pill  { margin-left:auto; }
.c4c-sidebar__spacer     { flex:1; }
.c4c-sidebar__foot       { border-top:1px solid rgba(255,255,255,.08);padding-top:14px; }
.c4c-app--collapsed .c4c-nav-item span,
.c4c-app--collapsed .c4c-sidebar__brand em { display:none; }
/* v2.16.57: the collapsed rail (76px, ~44px inner width) hides the <em>
   name text the same way it does for the no-logo mark+name case above —
   the shared .c4c-sidebar__brand em rule already covers that. This just
   shrinks the logo image itself to fit the narrower rail. */
.c4c-app--collapsed .c4c-sidebar__logo-img { max-width:44px; }

/* ── main column ── */
.c4c-main {
    min-width:      0;
    display:        flex;
    flex-direction: column;
    overflow-x:     hidden;
}

/* ── topbar ── */
.c4c-topbar {
    position:   sticky;
    top:        0;
    z-index:    40;
    display:    flex;
    align-items: center;
    gap:        16px;
    padding:    16px 32px;
    background: var(--c4c-glass);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter:         blur(14px) saturate(160%);
    border-bottom: 1px solid var(--c4c-line);
    min-width:  0;
    overflow:   hidden;
}
.c4c-topbar__title {
    min-width: 0;
    flex:      1;
}
.c4c-topbar__title h1 {
    font-size:     19px;
    font-weight:   700;
    letter-spacing:-0.2px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.c4c-topbar__title p {
    margin-top:    2px;
    font-size:     12.5px;
    color:         var(--c4c-ink-3);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.c4c-topbar__spacer { display:none; }

.c4c-icon-btn {
    position:      relative;
    width:         40px;height:40px;
    flex:          none;
    display:       grid;place-items:center;
    border:        1px solid var(--c4c-line);
    border-radius: 12px;
    background:    var(--c4c-card);
    color:         var(--c4c-ink-2);
    cursor:        pointer;
    transition:    box-shadow .15s ease,transform .15s ease;
}
.c4c-icon-btn svg { width:18px;height:18px; }
.c4c-avatar {
    width:40px;height:40px;flex:none;
    border-radius:12px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--c4c-gold),var(--c4c-gold-strong));
    color:var(--c4c-gold-ink, #171203);font-weight:700;font-size:14px;
}

/* ══════════════════════════════════════ 4 · CONTENT AREA */
.c4c-content {
    padding:        clamp(16px,3.5vw,32px);
    padding-bottom: calc(clamp(80px,12vh,110px) + env(safe-area-inset-bottom,0px));
    display:        grid;
    gap:            clamp(16px,2.5vw,24px);
    align-content:  start;
    min-width:      0;
    width:          100%;
}
.c4c-view[hidden] { display:none; }
.c4c-view {
    display:   grid;
    gap:       clamp(12px,2.5vw,20px);
    animation: c4c-view-in .28s ease;
    min-width: 0;
    width:     100%;
}
@keyframes c4c-view-in {
    from { opacity:0;transform:translateY(8px); }
    to   { opacity:1;transform:none; }
}

/* ── section heading ── */
.c4c-section-title {
    font-size:   clamp(13px,2.2vw,15px);
    font-weight: 700;
    letter-spacing:-0.1px;
    display:     flex;
    align-items: center;
    justify-content:space-between;
    gap:         8px;
}
.c4c-section-title a { font-size:13px;font-weight:600;color:var(--c4c-gold-strong);white-space:nowrap; }

/* ══════════════════════════════════════ 5 · CARD */
.c4c-card {
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-lg,16px);
    box-shadow:    var(--c4c-shadow);
    padding:       clamp(18px,3vw,28px);
    width:         100%;
    min-width:     0;
}

/* ── generic grids ── */
.c4c-grid   { display:grid;gap:clamp(10px,2vw,16px); }
/* stats: 2-col mobile default; desktop overrides to auto-fit */
.c4c-grid--stats {
    grid-template-columns: repeat(2,1fr);
    gap:           clamp(8px,2vw,12px);
    align-items:   stretch;
}
/* 2-up layout: single col mobile; desktop overrides */
.c4c-grid--2 { grid-template-columns:1fr;gap:clamp(10px,2vw,16px); }
/* 3-up layout (v2.0 — Recommended contractors): single col mobile, desktop overrides */
.c4c-grid--3 { grid-template-columns:1fr;gap:clamp(10px,2vw,16px); }
@media (min-width:601px) { .c4c-grid--3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:961px) { .c4c-grid--3 { grid-template-columns:repeat(3,1fr); } }

/* ══════════════════════════════════════ 6 · STAT CARDS */
.c4c-stat {
    display:       grid;
    align-content: start;
    gap:           clamp(5px,1vw,8px);
    padding:       clamp(10px,2.5vw,18px);
    text-align:    left;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
    background:    var(--c4c-card);
    box-shadow:    var(--c4c-shadow);
    cursor:        pointer;
    font:          inherit;
    color:         var(--c4c-ink);
    min-width:     0;
    width:         100%;
    transition:    transform .18s ease,box-shadow .18s ease;
}
.c4c-stat__icon {
    width:         clamp(28px,5vw,38px);
    height:        clamp(28px,5vw,38px);
    display:       grid;place-items:center;
    border-radius: clamp(8px,1.5vw,11px);
    background:    var(--c4c-gold-soft);
    color:         var(--c4c-gold-strong);
    flex:          none;
}
.c4c-stat__icon svg { width:clamp(13px,2.5vw,19px);height:clamp(13px,2.5vw,19px); }
.c4c-stat__value {
    font-size:     clamp(18px,4vw,26px);
    font-weight:   800;
    letter-spacing:-0.5px;
    line-height:   1.1;
    word-break:    break-word;
}
.c4c-stat__label {
    font-size:     clamp(9.5px,1.8vw,12.5px);
    font-weight:   600;
    color:         var(--c4c-ink-3);
    text-transform:uppercase;
    letter-spacing:0.4px;
    line-height:   1.3;
}
.c4c-stat__break          { display:flex;flex-wrap:wrap;gap:3px;margin-top:2px; }
.c4c-stat__break .c4c-tag { font-size:9px;padding:2px 6px; }

/* ══════════════════════════════════════ 7 · QUICK ACTIONS */
.c4c-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap:     10px;
}
.c4c-action {
    display:       grid;
    justify-items: center;
    gap:           8px;
    padding:       14px 10px;
    border:        1px dashed var(--c4c-line);
    border-radius: var(--c4c-radius);
    background:    var(--c4c-card);
    color:         var(--c4c-ink-2);
    font:          inherit;
    font-size:     13px;
    font-weight:   600;
    text-decoration:none;
    cursor:        pointer;
    min-width:     0;
    width:         100%;
    transition:    border-color .15s ease,color .15s ease,background .15s ease;
}
.c4c-action svg { width:20px;height:20px; }

/* rich actions */
.c4c-actions--rich {
    grid-template-columns: repeat(2,1fr);
    gap:         clamp(8px,2vw,12px);
    align-items: stretch;
}
.c4c-action--rich {
    display:              grid;
    grid-template-columns: auto 1fr;
    align-items:          center;
    gap:                  clamp(8px,2vw,12px);
    justify-items:        start;
    text-align:           left;
    padding:              clamp(10px,2.5vw,14px) clamp(10px,2.5vw,16px);
    border:               1px solid var(--c4c-line);
    border-radius:        var(--c4c-radius);
    background:           var(--c4c-card);
    color:                var(--c4c-ink);
    font:                 inherit;
    font-size:            13px;
    font-weight:          600;
    text-decoration:      none;
    cursor:               pointer;
    width:                100%;
    min-width:            0;
    transition:           border-color .15s ease,background .15s ease;
}
.c4c-action--rich .c4c-action__icon {
    width:         clamp(30px,5vw,38px);
    height:        clamp(30px,5vw,38px);
    display:       grid;place-items:center;
    border-radius: clamp(8px,1.5vw,11px);
    background:    var(--c4c-gold-soft);
    color:         var(--c4c-gold-strong);
    flex:          none;
    transition:    transform .18s ease;
}
.c4c-action--rich .c4c-action__icon svg { width:clamp(14px,2.5vw,19px);height:clamp(14px,2.5vw,19px); }
.c4c-action--rich > span:last-child { min-width:0;overflow:hidden; }
.c4c-action--rich b {
    display:block;
    font-size:     clamp(11.5px,2vw,13.5px);
    font-weight:   700;
    color:         var(--c4c-ink);
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.c4c-action--rich small {
    display:block;
    font-size:     clamp(10px,1.8vw,11.5px);
    color:         var(--c4c-ink-3);
    font-weight:   500;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════ 8 · LIST ROWS */
.c4c-list { display:grid;gap:clamp(8px,1.5vw,10px); }
.c4c-row {
    display:       flex;
    align-items:   center;
    gap:           clamp(10px,2vw,14px);
    padding:       clamp(10px,2.5vw,14px) clamp(12px,2.5vw,16px);
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    min-width:     0;
    width:         100%;
    transition:    box-shadow .15s ease,transform .15s ease;
}
.c4c-row--unread { border-left:3px solid var(--c4c-gold);background:linear-gradient(90deg,var(--c4c-gold-soft),var(--c4c-card) 40%); }
.c4c-row--active { outline: 2px solid var(--c4c-gold); outline-offset: -2px; }
.c4c-row__body {
    min-width: 0;
    flex:      1;
    display:   grid;
    gap:       3px;
}
.c4c-row__title {
    font-weight:   600;
    font-size:     clamp(12.5px,2vw,14px);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.c4c-row__meta {
    font-size:     clamp(11px,1.8vw,12.5px);
    color:         var(--c4c-ink-3);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.c4c-row__icon {
    width:         clamp(28px,5vw,36px);
    height:        clamp(28px,5vw,36px);
    flex:          none;
    display:       grid;place-items:center;
    border-radius: clamp(7px,1.5vw,10px);
    background:    var(--c4c-gold-soft);
    color:         var(--c4c-gold-strong);
}
.c4c-row__icon svg { width:clamp(13px,2.5vw,17px);height:clamp(13px,2.5vw,17px); }

/* ══════════════════════════════════════ 9 · PILLS & TAGS */
.c4c-pill {
    display:       inline-grid;
    place-items:   center;
    min-width:     20px;
    height:        20px;
    padding:       0 6px;
    border-radius: 999px;
    background:    var(--c4c-gold);
    color:         var(--c4c-gold-ink, #171203);
    font-size:     11px;
    font-weight:   700;
}
.c4c-pill[hidden] { display:none; }
.c4c-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 9px;
    border-radius:  999px;
    font-size:      clamp(10px,1.8vw,11.5px);
    font-weight:    700;
    letter-spacing: 0.2px;
    background:     var(--c4c-gold-soft);
    color:          var(--c4c-gold-strong);
    white-space:    nowrap;
}
.c4c-tag--green { background:rgba(31,157,97,.12);color:var(--c4c-green); }
.c4c-tag--red   { background:rgba(214,69,69,.12);color:var(--c4c-red);   }
.c4c-tag--blue  { background:rgba(59,111,212,.12);color:var(--c4c-blue); }
.c4c-tag--gray  { background:var(--c4c-surface);color:var(--c4c-ink-3);  }

/* ══════════════════════════════════════ 10 · BUTTONS */
.c4c-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 18px;
    border-radius:   12px;
    border:          1px solid transparent;
    font:            inherit;
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.c4c-btn:active     { transform:scale(.98); }
.c4c-btn--primary   { background:linear-gradient(135deg,var(--c4c-gold),var(--c4c-gold-strong));color:var(--c4c-gold-ink, #171203);box-shadow:0 6px 16px rgba(201,155,63,.35); }
.c4c-btn--secondary { background:var(--c4c-card);border-color:var(--c4c-line);color:var(--c4c-ink); }
.c4c-btn--ghost     { background:transparent;color:var(--c4c-ink-2); }
.c4c-btn--danger    { background:rgba(214,69,69,.1);color:var(--c4c-red); }
.c4c-btn--small     { padding:7px 12px;font-size:12.5px;border-radius:10px; }

/* ══════════════════════════════════════ 11 · FORMS */
.c4c-form  { display:grid;gap:16px;max-width:560px;width:100%; }
.c4c-field { display:grid;gap:6px; }
.c4c-field label,.c4c-form-row label { font-size:13px;font-weight:600;color:var(--c4c-ink-2); }
.c4c-field small { color:var(--c4c-ink-3);font-weight:400; }

/* 16 px font-size prevents iOS auto-zoom on focus */
/* v2.16.69: excluded radio/checkbox — [c4c_partner_signup] (Frontend\
   ShortcodeController::render_partner_signup()) is the first form to nest
   an actual <input type="radio">/<input type="checkbox"> inside a
   .c4c-form-row, and this rule's un-scoped "input" selector was stretching
   them to width:100% with pill-shaped padding/border-radius — a native
   round radio button rendered as a wide empty oval, a checkbox as an
   empty full-width bar, in both cases pushing their label text away
   instead of sitting inline next to it. See .c4c-radio-group /
   .c4c-checkbox-row below for their actual (correct, small, native-sized)
   styling. */
.c4c-field input:not([type="radio"]):not([type="checkbox"]),.c4c-field textarea,.c4c-field select,
.c4c-form-row input:not([type="radio"]):not([type="checkbox"]),.c4c-form-row textarea,.c4c-form-row select {
    width:         100%;
    max-width:     100%;
    padding:       11px 14px;
    border:        1px solid var(--c4c-line);
    border-radius: 12px;
    background:    var(--c4c-card);
    color:         var(--c4c-ink);
    font:          inherit;
    font-size:     16px;
    box-sizing:    border-box;
    transition:    border-color .15s ease,box-shadow .15s ease;
}
.c4c-field input:focus:not([type="radio"]):not([type="checkbox"]),.c4c-field textarea:focus,.c4c-field select:focus,
.c4c-form-row input:focus:not([type="radio"]):not([type="checkbox"]),.c4c-form-row textarea:focus,.c4c-form-row select:focus {
    outline:    none;
    border-color: var(--c4c-gold);
    box-shadow: 0 0 0 3px var(--c4c-gold-soft);
}
.c4c-form-row   { display:grid;gap:6px; }
.c4c-form-message { min-height:18px;font-size:13px;color:var(--c4c-ink-2);margin:0; }
.c4c-form-note    { font-size:12.5px;color:var(--c4c-ink-3); }
.c4c-form-error   { margin:0;padding:12px 14px;border-radius:12px;background:rgba(214,69,69,.1);color:var(--c4c-red);font-size:13.5px;font-weight:600; }
/* v2.16.54: the login page's error text now carries a link (sign up / reset
   password) — the whole point is that it's clickable, so make it visibly so
   against the tinted background. */
.c4c-form-error a { color:inherit;text-decoration:underline; }
/* v2.16.54: the "your account is ready, now sign in" confirmation shown after
   registration. Same shape as the error notice, opposite meaning. */
.c4c-form-success { margin:0 0 4px;padding:12px 14px;border-radius:12px;background:rgba(23,145,86,.1);color:var(--c4c-green,#179156);font-size:13.5px;font-weight:600;line-height:1.5; }
.c4c-form-success strong { display:block;margin-bottom:2px; }
.c4c-form-success a { color:inherit;text-decoration:underline; }

/* ══════════════════════════════════════ 11b · PAYMENTS TAB (contractor) */
/* Stripe Elements renders its own iframe here — this just gives it the
   same bordered/padded look as our own text inputs (.c4c-filter-group
   input etc.) so the card field doesn't look visually foreign next to the
   rest of the form. */
.c4c-stripe-card-element {
    padding:       13px 14px;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    background:    var(--c4c-card);
}
.c4c-payments-card-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     14px;
    border:      1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    background:  var(--c4c-card);
}
.c4c-payments-card-row svg { width:22px;height:22px;flex:none;color:var(--c4c-ink-2); }

/* ══════════════════════════════════════ 12 · CONTRACTOR CARDS */
.c4c-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill,minmax(min(260px,100%),1fr));
    gap:                   clamp(10px,2vw,16px);
}
.c4c-ccard {
    display:       grid;
    gap:           12px;
    padding:       clamp(14px,3vw,18px);
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
    box-shadow:    var(--c4c-shadow);
    min-width:     0;
    width:         100%;
    transition:    transform .18s ease,box-shadow .18s ease;
}
.c4c-ccard__head    { display:flex;align-items:center;gap:12px;min-width:0; }
.c4c-ccard__name    { font-weight:700;font-size:15px;color:var(--c4c-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.c4c-ccard__meta    { display:flex;flex-wrap:wrap;gap:6px; }
.c4c-ccard__actions { display:flex;flex-wrap:wrap;gap:8px; }
.c4c-rating         { color:var(--c4c-gold-strong);font-weight:700;font-size:13px; }
/* v2.16.53: saved-contractor cards now print a review count beside the
   rating. The class already existed in search.css, but that stylesheet
   isn't loaded on the dashboard, so it needs its own definition here. */
.c4c-rating-count   { color:var(--c4c-text-tertiary);font-weight:400; }

/* ══════════════════════════════════════ 13 · CHARTS */
.c4c-chart svg       { width:100%;height:auto;display:block; }
.c4c-chart__legend   { display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--c4c-ink-3);margin-top:10px; }
.c4c-chart__legend i { width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;background:var(--c4c-gold); }

/* ══════════════════════════════════════ 14 · PROGRESS BAR */
.c4c-bar   { height:8px;border-radius:999px;background:var(--c4c-surface);overflow:hidden; }
.c4c-bar i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c4c-gold),var(--c4c-gold-strong));transition:width .6s ease; }

/* ══════════════════════════════════════ 15 · SKELETONS */
.c4c-skel { position:relative;overflow:hidden;background:var(--c4c-line);border-radius:8px;min-height:14px; }
.c4c-skel::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:c4c-shimmer 1.4s infinite; }
@keyframes c4c-shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.c4c-skel--row  { height:62px;border-radius:var(--c4c-radius-sm); }
.c4c-skel--stat { height:110px;border-radius:var(--c4c-radius); }
.c4c-skel--card { height:160px;border-radius:var(--c4c-radius); }

/* ══════════════════════════════════════ 16 · EMPTY STATES */
.c4c-empty {
    display:       grid;
    justify-items: center;
    gap:           10px;
    padding:       clamp(28px,6vw,44px) 20px;
    text-align:    center;
    color:         var(--c4c-ink-3);
    border:        1px dashed var(--c4c-line);
    border-radius: var(--c4c-radius);
    background:    var(--c4c-card);
}
.c4c-empty strong { color:var(--c4c-ink-2);font-size:15px; }
.c4c-empty svg    { width:34px;height:34px;opacity:.5; }

/* ══════════════════════════════════════ 17 · DRAWER */
.c4c-drawer {
    position:fixed;top:0;right:0;bottom:0;
    width:min(400px,92vw);z-index:90;
    background:var(--c4c-glass);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
    border-left:1px solid var(--c4c-line);
    box-shadow:-20px 0 60px rgba(16,22,35,.18);
    transform:translateX(105%);transition:transform .28s ease;
    display:flex;flex-direction:column;
}
.c4c-drawer.is-open  { transform:none; }
.c4c-drawer__head    { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--c4c-line);font-weight:700; }
.c4c-drawer__body    { overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start; }
.c4c-scrim           { position:fixed;inset:0;z-index:80;background:rgba(10,13,20,.35);opacity:0;pointer-events:none;transition:opacity .25s ease; }
.c4c-scrim.is-open   { opacity:1;pointer-events:auto; }

/* ══════════════════════════════════════ 18 · TOAST
 * Part 3 (Shared Component Library): this used to define its own
 * competing .c4c-toast — a single fixed element toggled via .is-visible —
 * which collided with components.css's .c4c-toast (a stackable, multi-
 * variant version that nothing in the JS actually used, because this
 * rule's later position in the cascade silently won instead). Both
 * dashboards' toast() functions now go through the shared
 * assets/js/c4c-ui.js, which uses components.css's version — the more
 * capable of the two. Nothing left to declare here.
 */

/* ══════════════════════════════════════ 19 · BOTTOM NAV */
.c4c-bottomnav {
    display:      none;
    position:     fixed;
    left:         8px;right:8px;
    bottom:       calc(8px + env(safe-area-inset-bottom,0px));
    z-index:      70;
    background:   var(--c4c-glass);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    border:       1px solid var(--c4c-line);
    border-radius:20px;
    box-shadow:   var(--c4c-shadow-lift);
    padding:      6px;
    grid-auto-flow:   column;
    grid-auto-columns:1fr;
    justify-items:    center;
}
.c4c-bottomnav button,
.c4c-bottomnav a {
    display:        grid;
    justify-items:  center;
    gap:            3px;
    min-width:      48px;
    min-height:     48px;
    padding:        6px 8px;
    border:         0;
    background:     none;
    color:          var(--c4c-ink-3);
    font:           inherit;
    font-size:      10px;
    font-weight:    600;
    cursor:         pointer;
    border-radius:  12px;
    text-decoration:none;
    align-content:  center;
    transition:     color .15s ease,background .15s ease;
}
.c4c-bottomnav [aria-current="page"] { color:var(--c4c-gold-strong);background:var(--c4c-gold-soft); }
.c4c-bottomnav svg { width:20px;height:20px; }

/* ══════════════════════════════════════ 20 · FAB
   v2.5.2: for the homeowner shell this slot is Deals ONLY now — the
   original "+ find a contractor" FAB was removed here per explicit
   request (finding a contractor is still one tap away via the Search item
   in the bottom nav, so nothing is lost). The contractor shell has no
   Deals view, so it keeps the plain + .c4c-fab below unmodified — see the
   `.c4c-fab--deals` modifier for the homeowner variant. */
.c4c-fab {
    display:       none;
    position:      fixed;
    right:         16px;
    bottom:        calc(80px + env(safe-area-inset-bottom,0px));
    z-index:       71;
    width:         48px;height:48px;
    border:        0;
    border-radius: 16px;
    background:    linear-gradient(135deg,var(--c4c-gold),var(--c4c-gold-strong));
    color:         var(--c4c-gold-ink, #171203);
    box-shadow:    0 10px 26px rgba(201,155,63,.5);
    cursor:        pointer;
    place-items:   center;
    transition:    transform .18s ease;
}
.c4c-fab svg { width:20px;height:20px; }

/* Deals variant — same position/prominence the + used to have, but a
   pill (auto width, icon + label) rather than a round icon-only button,
   since "Deals" alone isn't self-explanatory as a glyph the way a + is. */
.c4c-fab--deals {
    width:   auto;
    height:  auto;
    padding: 14px 20px;
    gap:     8px;
    display: none;
}
.c4c-fab--deals span { font:700 15px/1 var(--c4c-font); }
.c4c-fab--deals:hover { transform:scale(1.05); }

/* ══════════════════════════════════════ 21 · PROFILE PROGRESS */
.c4c-profile-progress {
    display:         flex;
    align-items:     center;
    gap:             clamp(10px,3vw,20px);
    justify-content: space-between;
    padding:         clamp(12px,2.5vw,16px) clamp(14px,3vw,20px);
    flex-wrap:       wrap;
}
.c4c-profile-progress__text        { display:grid;gap:3px;flex:1;min-width:0; }
.c4c-profile-progress__text strong { font-size:clamp(13px,2vw,14px); }
.c4c-profile-progress__text span   { font-size:clamp(11px,1.8vw,12.5px);color:var(--c4c-ink-3); }
.c4c-profile-progress__meter       { display:grid;gap:6px;min-width:clamp(100px,25vw,180px); }
.c4c-profile-progress__pct         { font-size:clamp(16px,3vw,20px);font-weight:800;text-align:right;color:var(--c4c-gold-strong); }

/* ══════════════════════════════════════ 22 · TIMELINE */
.c4c-timeline { display:grid;position:relative; }
.c4c-tl-item {
    display:        flex;
    gap:            clamp(8px,2vw,14px);
    position:       relative;
    padding-bottom: clamp(12px,2.5vw,18px);
}
.c4c-tl-item:last-child { padding-bottom:0; }
.c4c-tl-item::before {
    content:"";position:absolute;
    left:  clamp(13px,2.5vw,17px);
    top:   clamp(28px,5vw,36px);
    bottom:0;width:2px;background:var(--c4c-line);
}
.c4c-tl-item:last-child::before { display:none; }
.c4c-tl-item__dot {
    width:         clamp(28px,5vw,36px);
    height:        clamp(28px,5vw,36px);
    flex:          none;
    display:       grid;place-items:center;
    border-radius: 50%;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    color:         var(--c4c-gold-strong);
    box-shadow:    var(--c4c-shadow);
    z-index:       1;
}
.c4c-tl-item__dot svg { width:clamp(12px,2.2vw,16px);height:clamp(12px,2.2vw,16px); }
.c4c-tl-item__body    { display:grid;gap:2px;padding-top:4px;min-width:0;flex:1; }
.c4c-tl-item__text    { font-size:clamp(12px,2vw,13.5px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.c4c-tl-item__date    { font-size:clamp(10.5px,1.8vw,12px);color:var(--c4c-ink-3); }

/* ══════════════════════════════════════ 23 · FILTER CHIPS */
.c4c-chips { display:flex;flex-wrap:wrap;gap:clamp(6px,1.5vw,8px); }
.c4c-chip {
    padding:       clamp(5px,1.2vw,7px) clamp(10px,2vw,14px);
    border:        1px solid var(--c4c-line) !important;
    border-radius: 999px;
    background:    var(--c4c-card) !important;
    color:         var(--c4c-ink-2) !important;
    font:          inherit;
    font-size:     clamp(12.5px,2vw,14px);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    all .15s ease;
}
.c4c-chip .c4c-chip__count { opacity:.7;margin-left:4px; }
/* FIX (v2.4.6, hardened v2.5.3, ROOT-CAUSE FIXED v2.5.4) — the My Requests
   filter tabs (All / Pending / Viewed / Accepted / Completed / Cancelled,
   rendered by assets/js/homeowner-dashboard.js renderRequestFilters()).
   v2.4.6/2.5.3 pointed this at --c4c-ink + --c4c-on-inverse, which fixed
   the literal white-on-white text but replaced it with a new problem:
   --c4c-ink is near-white in dark mode, so the "selected" pill itself
   became a bright white blob sitting in the middle of an otherwise dark
   screen — legible, but visibly broken. --c4c-active-bg/--c4c-active-ink
   are a dedicated pair (design-tokens.css) that render as a confident gold
   accent in dark mode instead of an inverted copy of body text. */
.c4c-chip.is-active {
    background:   var(--c4c-active-bg) !important;
    border-color: var(--c4c-active-bg) !important;
    color:        var(--c4c-active-ink, #fff) !important;
}
.c4c-view-toolbar { display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,12px);flex-wrap:wrap; }

/* ══════════════════════════════════════ 24 · TOGGLE SWITCH */
.c4c-toggle-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--c4c-line); }
.c4c-toggle-row:last-child  { border-bottom:0; }
.c4c-toggle-row__text       { display:grid;gap:2px;min-width:0;flex:1; }
.c4c-toggle-row__text b     { font-size:15px; }
.c4c-toggle-row__text small { font-size:13px;color:var(--c4c-ink-3); }
.c4c-switch       { position:relative;width:44px;height:25px;flex:none;cursor:pointer; }
.c4c-switch input { position:absolute;opacity:0;inset:0;margin:0;cursor:pointer; }
.c4c-switch i     { position:absolute;inset:0;border-radius:999px;background:var(--c4c-line);transition:background .2s ease; }
.c4c-switch i::after { content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease; }
.c4c-switch input:checked + i          { background:var(--c4c-gold); }
.c4c-switch input:checked + i::after   { transform:translateX(19px); }
.c4c-switch input:focus-visible + i    { outline:2px solid var(--c4c-gold);outline-offset:2px; }

/* ══════════════════════════════════════ 25 · MODAL */
.c4c-modal { position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:rgba(10,13,20,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:clamp(14px,4vw,18px); }
.c4c-modal[hidden] { display:none; }
.c4c-modal__card { width:min(480px,100%);max-height:86vh;overflow-y:auto;background:var(--c4c-card);border-radius:20px;box-shadow:var(--c4c-shadow-lift);padding:clamp(18px,4vw,26px);display:grid;gap:16px;animation:c4c-view-in .22s ease; }
.c4c-modal__title { font-size:18.5px;font-weight:700; }
.c4c-modal__foot  { display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap; }

/* ══════════════════════════════════════ 25b · KANBAN PIPELINE (contractor) */
/* Toolbar (search / filter / sort) + 4 summary cards, sitting directly
   above the board — kept deliberately minimal per the "simple task board,
   not a CRM dashboard" brief: no charts, no extra stats beyond these 4. */
.c4c-pipeline-toolbar {
    display:      flex;
    align-items:  center;
    gap:          10px;
    margin-bottom: 14px;
    flex-wrap:    wrap;
}
.c4c-pipeline-search {
    flex:          1 1 200px;
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 14px;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-full);
    min-width:     0;
}
.c4c-pipeline-search svg { width:17px;height:17px;flex:none;color:var(--c4c-ink-3); }
.c4c-pipeline-search input {
    border:    0;
    outline:   0;
    background: none;
    flex:      1;
    min-width: 0;
    font-size: 14.5px;
    color:     var(--c4c-ink);
}
.c4c-pipeline-sort {
    flex:          none;
    padding:       10px 14px;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-full);
    background:    var(--c4c-card);
    font-size:     13.5px;
    color:         var(--c4c-ink);
}
.c4c-pipeline-filter-panel {
    display:       flex;
    align-items:   center;
    gap:           8px;
    flex-wrap:     wrap;
    margin-bottom: 14px;
    padding:       10px 14px;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
}
.c4c-pipeline-filter-panel__label { font-size:13px;font-weight:600;color:var(--c4c-ink-2); }
.c4c-pipeline-filter-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       6px 12px;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-full);
    font-size:     13px;
    cursor:        pointer;
}
.c4c-pipeline-filter-chip:has(input:checked) {
    background:  var(--c4c-gold-soft);
    border-color: var(--c4c-gold);
    font-weight: 600;
}

.c4c-pipeline-summary {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    margin-bottom:         18px;
}
@media (max-width: 640px) {
    /* Horizontally scrollable rather than squeezed to fit 4-across on a
       narrow phone — matches the brief's "scroll horizontally if
       necessary" for the summary row, same pattern as the board itself. */
    .c4c-pipeline-summary {
        display:        flex;
        overflow-x:     auto;
        -webkit-overflow-scrolling: touch;
    }
    .c4c-pipeline-summary__card { flex: 0 0 auto; min-width: 120px; }
}
.c4c-pipeline-summary__card {
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
    padding:       14px 16px;
    display:       flex;
    flex-direction: column;
    gap:           2px;
}
.c4c-pipeline-summary__value { font-size:24px;font-weight:800;color:var(--c4c-ink);line-height:1.1; }
.c4c-pipeline-summary__label { font-size:12.5px;color:var(--c4c-ink-3);font-weight:600; }

/* Card three-dot menu button + the popover it opens (appended to <body>,
   positioned via JS — see openCardMenu()/openStagePicker() in
   contractor-dashboard.js) so it isn't clipped by the column's own
   overflow-y:auto scroll region. */
.c4c-kanban-card { position: relative; padding-right: 34px; }
.c4c-kanban-card__menu-btn {
    position:      absolute;
    top:           8px;
    right:         8px;
    width:         26px;
    height:        26px;
    display:       grid;
    place-items:   center;
    border:        0;
    background:    transparent;
    border-radius: 8px;
    color:         var(--c4c-ink-3);
    cursor:        pointer;
}
.c4c-kanban-card__menu-btn:hover { background: var(--c4c-line); color: var(--c4c-ink); }
.c4c-kanban-card__menu-btn svg { width: 16px; height: 16px; }

.c4c-card-menu {
    position:      absolute;
    z-index:       130;
    min-width:     190px;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
    box-shadow:    var(--c4c-shadow-lift);
    padding:       6px;
    display:       grid;
    gap:           2px;
    max-height:    280px;
    overflow-y:    auto;
    animation:     c4c-view-in .15s ease;
}
.c4c-card-menu__item {
    text-align:    left;
    padding:       10px 12px;
    border:        0;
    background:    none;
    border-radius: 10px;
    font-size:     14px;
    color:         var(--c4c-ink);
    cursor:        pointer;
}
.c4c-card-menu__item:hover:not(:disabled) { background: var(--c4c-line); }
.c4c-card-menu__item:disabled { color: var(--c4c-ink-3); cursor: not-allowed; }

/* Trello-style horizontal-scrolling columns — each column is a native
   HTML5 drag-and-drop target (desktop) plus every card is independently
   clickable/keyboard-focusable to open the detail drawer, which also has
   its own stage <select> — the reliable way to move a card on touch
   devices, where native HTML5 DnD isn't consistently supported. */
.c4c-kanban-board {
    display:        flex;
    gap:            14px;
    overflow-x:     auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
/* Desktop/tablet: 4 columns × 2 rows instead of one long horizontally-
   scrolling row — with exactly 8 fixed stages, `repeat(4, 1fr)` on a grid
   with `grid-auto-flow: row` (the default) naturally wraps the 5th column
   onto a second row, so both rows always add up to all 8 without any
   per-item positioning math. Mobile keeps the flex/horizontal-scroll
   version above — a swipeable single row is the natural touch pattern
   there, and 4-across would make each column too narrow to use. */
@media (min-width: 900px) {
    .c4c-kanban-board {
        display:               grid;
        grid-template-columns: repeat(4, 1fr);
        overflow-x:            visible;
    }
    .c4c-kanban-col { width: auto; max-height: none; }
    .c4c-kanban-col__body { max-height: 46vh; }
}
.c4c-kanban-col {
    flex:            0 0 auto;
    width:           min(280px, 82vw);
    display:         flex;
    flex-direction:  column;
    background:      var(--c4c-surface-2, var(--c4c-card));
    border:          1px solid var(--c4c-line);
    border-radius:   var(--c4c-radius);
    max-height:      calc(100dvh - 220px);
    overflow:        hidden; /* clips a custom header color (admin-set, Settings → Lead Pipeline — Stage Colors) to the column's own rounded corners */
}
.c4c-kanban-col__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 14px;
    font-weight:     700;
    font-size:       14px;
    border-bottom:   1px solid var(--c4c-line);
}
.c4c-kanban-col__count {
    background:    var(--c4c-line);
    color:         var(--c4c-ink-2);
    border-radius: var(--c4c-radius-full);
    padding:       1px 9px;
    font-size:     12px;
    font-weight:   600;
}
.c4c-kanban-col__body {
    flex:      1;
    overflow-y: auto;
    padding:   10px;
    display:   flex;
    flex-direction: column;
    gap:       8px;
    min-height: 60px;
    transition: background .12s ease;
}
.c4c-kanban-col__body--over { background: var(--c4c-gold-soft); }
.c4c-kanban-col__empty {
    font-size:  13px;
    color:      var(--c4c-ink-3);
    text-align: center;
    padding:    16px 4px;
    margin:     0;
}
.c4c-kanban-card {
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    padding:       11px 12px;
    cursor:        grab;
    box-shadow:    var(--c4c-shadow-sm);
    transition:    box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.c4c-kanban-card:hover  { box-shadow: var(--c4c-shadow-md); transform: translateY(-1px); }
.c4c-kanban-card:focus-visible { outline: 2px solid var(--c4c-gold); outline-offset: 2px; }
.c4c-kanban-card--dragging { opacity: .4; }
.c4c-kanban-card__title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.c4c-kanban-card__meta  { font-size: 12.5px; color: var(--c4c-ink-2); margin-bottom: 8px; }
.c4c-kanban-card__foot  {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   11.5px;
    color:       var(--c4c-ink-3);
}
.c4c-kanban-card__foot svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Lead detail drawer contents (notes / files / activity timeline) — reuses
   the .c4c-modal shell already defined above. */
/* ══════════════════════════════════════ 25c · INBOX (split-pane chat, team + homeowner) */
/* Replaces the earlier modal-per-conversation approach — the conversation
   list and the active thread live in the SAME view at once (like a real
   inbox app / Tawk.to's own dashboard), not a popup you open and close
   per conversation. Desktop: side-by-side. Mobile: single pane at a time,
   toggled by .c4c-inbox--thread-open (added when a conversation is
   opened, removed by the thread's own Back button) — see
   openConversation()/closeThread() in contractor/team/homeowner-dashboard.js. */
.c4c-inbox {
    display:        grid;
    grid-template-columns: 320px 1fr;
    gap:            14px;
    height:         calc(100dvh - 260px);
    min-height:     420px;
}
.c4c-inbox__list {
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding-right:  2px;
}
.c4c-inbox__thread {
    display:        flex;
    flex-direction: column;
    border:         1px solid var(--c4c-line);
    border-radius:  var(--c4c-radius);
    background:     var(--c4c-card);
    overflow:       hidden;
}
.c4c-inbox__thread-empty {
    flex:        1;
    display:     grid;
    place-items: center;
    color:       var(--c4c-ink-3);
    font-size:   14px;
    padding:     20px;
    text-align:  center;
}
.c4c-inbox__thread-head {
    padding:       14px 16px;
    border-bottom: 1px solid var(--c4c-line);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.c4c-inbox__thread-back {
    display: none; /* shown only on mobile, see the media query below */
    flex:    none;
    border:  0;
    background: none;
    cursor:  pointer;
    color:   var(--c4c-ink-2);
    padding: 4px;
}
.c4c-inbox__thread-who {
    flex:      1;
    min-width: 0;
}
.c4c-inbox__thread-name { font-weight: 700; font-size: 15px; }
.c4c-inbox__thread-contact { font-size: 12.5px; color: var(--c4c-ink-3); }
.c4c-inbox__thread-messages {
    flex:      1;
    overflow-y: auto;
    padding:   14px 16px;
    display:   flex;
    flex-direction: column;
    gap:       8px;
}

/* Chat message rows with sender avatar — "so they can see their profile
   like agent is typing/replied, a small icon with their message" per the
   admin's own request. Avatar always comes first in the markup;
   .c4c-chat-row--mine just reverses the flex direction, which naturally
   puts your own avatar on the right without needing separate markup for
   each side. */
.c4c-chat-row {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    max-width:   85%;
}
.c4c-chat-row--mine {
    flex-direction: row-reverse;
    align-self:     flex-end;
}
.c4c-chat-avatar {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    object-fit:    cover;
    flex:          none;
    background:    var(--c4c-line);
}
.c4c-chat-bubble--mine { background: var(--c4c-gold-soft); }
.c4c-inbox__thread-controls {
    padding:       10px 16px;
    border-top:    1px solid var(--c4c-line);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.c4c-inbox__thread-form {
    display:       flex;
    gap:           8px;
    padding:       12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
    border-top:    1px solid var(--c4c-line);
}
.c4c-inbox__thread-form input { flex: 1; }

@media (max-width: 800px) {
    .c4c-inbox {
        display:    block;
        height:     auto;
    }
    .c4c-inbox__list { display: flex; }
    .c4c-inbox__thread { display: none; }
    .c4c-inbox--thread-open .c4c-inbox__list { display: none; }
    .c4c-inbox--thread-open .c4c-inbox__thread {
        display:  flex;
        position: fixed;
        inset:    0;
        z-index:  90; /* above .c4c-bottomnav (70) and the FAB — an open conversation takes over the whole screen, same as most chat apps, so its own reply box is never hidden behind the tab bar */
        border-radius: 0;
        border:   0;
    }
    .c4c-inbox__thread-back { display: block; }
    .c4c-inbox__thread-messages { max-height: none; }
}

.c4c-lead-note {
    padding:       9px 11px;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    margin-bottom: 8px;
}
.c4c-lead-note__meta { font-size: 11.5px; color: var(--c4c-ink-3); margin-bottom: 3px; }
.c4c-lead-note__body { font-size: 13.5px; }
.c4c-lead-files {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap:                   8px;
}
.c4c-lead-file {
    display:       block;
    border-radius: var(--c4c-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--c4c-line);
    aspect-ratio:  1;
}
.c4c-lead-file img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c4c-lead-timeline {
    list-style:    none;
    margin:        0;
    padding:       0;
    display:       grid;
    gap:           10px;
    border-left:   2px solid var(--c4c-line);
    padding-left:  14px;
}
.c4c-lead-timeline li { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }

.c4c-stars-input  { display:flex;gap:4px; }
.c4c-stars-input button { border:0;background:none;cursor:pointer;font-size:26px;line-height:1;color:var(--c4c-line);transition:transform .12s ease,color .12s ease;padding:4px; }
.c4c-stars-input button.is-on { color:var(--c4c-gold); }

/* ══════════════════════════════════════ 26 · MISC COMPONENTS */
.c4c-review-card          { display:grid;gap:8px; }
.c4c-review-card__head    { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.c4c-review-card__actions { display:flex;gap:6px;flex-wrap:wrap; }
.c4c-announce__type       { flex:none; }
.c4c-account-head          { display:flex;align-items:center;gap:16px;margin-bottom:6px; }
.c4c-account-head img      { width:64px;height:64px;border-radius:18px;object-fit:cover;box-shadow:var(--c4c-shadow); }
.c4c-account-head .c4c-avatar { width:64px;height:64px;font-size:22px;border-radius:18px; }

/* ══════════════════════════════════════ 27 · AUTH CARD */
.c4c-auth-card {
    max-width:     440px;
    width:         calc(100% - 32px);
    margin:        40px auto;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: 20px;
    box-shadow:    var(--c4c-shadow-lift);
    padding:       clamp(20px,5vw,32px);
    display:       grid;
    gap:           18px;
}
.c4c-auth-card h2        { font-size:clamp(18px,4vw,22px);letter-spacing:-0.4px; }
.c4c-auth-card .c4c-form { max-width:100%; }
.c4c-auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--c4c-surface);border-radius:14px; }
.c4c-auth-tab  { padding:12px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--c4c-ink-3);cursor:pointer;transition:background .15s ease,color .15s ease; }
.c4c-auth-tab--active { background:var(--c4c-card);color:var(--c4c-ink);box-shadow:var(--c4c-shadow); }
.c4c-auth-form   { display:grid;gap:14px; }
.c4c-auth-switch { font-size:14.5px;color:var(--c4c-ink-3);text-align:center;margin:0; }
.c4c-auth-switch a { color:var(--c4c-gold-strong);font-weight:600;text-decoration:none; }
.c4c-role-toggle { display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--c4c-surface);border-radius:14px; }
.c4c-role-toggle button { padding:11px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--c4c-ink-3);cursor:pointer; }
.c4c-role-toggle button.is-active { background:var(--c4c-card);color:var(--c4c-ink);box-shadow:var(--c4c-shadow); }

/* ══════════════════════════════════════ 27b · PARTNER SIGNUP (v2.16.68) —
   wider than .c4c-auth-card (that's a compact 440px card meant for a
   4-field quick signup; this is a long, sectioned application) but
   shares the exact same input/label/button styling via the shared
   .c4c-form-row rules above and .c4c-btn/.c4c-form-note/.c4c-form-message
   rules elsewhere in this file, so the two forms still feel like the same
   product. */
.c4c-partner-form {
    max-width: 720px;
    width:     calc(100% - 32px);
    margin:    40px auto;
    display:   grid;
    gap:       28px;
}
.c4c-partner-form__intro h1 { font-size:clamp(24px,5vw,32px);letter-spacing:-0.6px;margin:0 0 12px; }
.c4c-partner-form__intro p  { color:var(--c4c-ink-2);font-size:15px;line-height:1.6;margin:0; }
.c4c-partner-form__form {
    display:       grid;
    gap:           28px;
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: 20px;
    box-shadow:    var(--c4c-shadow-lift);
    padding:       clamp(20px,5vw,36px);
}
.c4c-partner-form__form fieldset {
    display:       grid;
    gap:           14px;
    border:        0;
    border-top:    1px solid var(--c4c-line);
    padding:       24px 0 0;
    margin:        0;
}
.c4c-partner-form__form fieldset:first-of-type { border-top:0;padding-top:0; }
.c4c-partner-form__form legend {
    font-size:     13px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:         var(--c4c-gold-strong);
    padding:       0 0 4px;
}
.c4c-form-row-group { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px; }
.c4c-form-hint       { font-size:12.5px;color:var(--c4c-ink-3);margin:-2px 0 2px; }
.c4c-radio-group     { display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;font-weight:400; }
.c4c-radio-group label { display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer;white-space:nowrap; }
.c4c-radio-group input[type="radio"] { width:17px;height:17px;flex:none;margin:0;accent-color:var(--c4c-gold-strong); }
.c4c-checkbox-row label { display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.5;cursor:pointer; }
.c4c-checkbox-row input[type="checkbox"] { width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--c4c-gold-strong); }
.c4c-partner-form input[type="file"] {
    font-size:  14px;
    padding:    8px 0;
    background: transparent;
    border:     0;
}

/* v2.16.72: the pitch/story section above the application form —
   deliberately NOT an FAQ accordion (nothing collapses; every "beat"
   reads top to bottom like a short narrative) even though the content is
   shaped as question-and-answer. Lives inside .c4c-partner-form's own
   720px column rather than a separate wider layout, so the page reads as
   one continuous piece rather than a wide hero dropping into a narrow
   form. */
.c4c-partner-pitch { margin-bottom: 8px; }
.c4c-partner-pitch__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c4c-gold-strong);
    margin-bottom: 10px;
}
.c4c-partner-pitch h1 {
    font-size: clamp(26px, 5vw, 34px);
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin: 0 0 16px;
}
.c4c-partner-pitch__lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--c4c-ink-2);
    margin: 0 0 8px;
}
.c4c-partner-pitch__beat {
    padding: 28px 0;
    border-top: 1px solid var(--c4c-line);
}
.c4c-partner-pitch__beat h2 {
    font-size: 21px;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
}
.c4c-partner-pitch__beat p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--c4c-ink-2);
    margin: 0 0 12px;
}
.c4c-partner-pitch__beat p:last-child { margin-bottom: 0; }
.c4c-partner-pitch__beat--highlight {
    background: linear-gradient(135deg, rgba(201,162,74,.09), rgba(201,162,74,.02));
    border-top-color: transparent;
    border-radius: 16px;
    padding: 28px 24px;
    margin: 8px 0;
}
.c4c-partner-pitch__callout {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    line-height: 1.5;
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-line);
    border-left: 3px solid var(--c4c-gold-strong);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.c4c-partner-pitch__badge {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    background: var(--c4c-gold);
    border-radius: 999px;
    padding: 8px 20px;
}
.c4c-partner-pitch__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.c4c-partner-pitch__examples li {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c4c-ink);
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-line);
    border-radius: 999px;
    padding: 7px 16px;
}
.c4c-partner-pitch__cta {
    text-align: center;
    background: #101828;
    color: #ffffff;
    border-radius: 18px;
    padding: 36px 28px;
    margin-top: 8px;
}
.c4c-partner-pitch__cta h2 { color: #ffffff;margin:0 0 12px; }
.c4c-partner-pitch__cta p { color: rgba(255,255,255,.78);max-width:520px;margin:0 auto 22px; }
.c4c-partner-pitch__cta .c4c-btn { display:inline-block;text-decoration:none; }

/* v2.16.73: [c4c_install] — a plain, standalone "here's how to install"
   page meant to be linked directly (texted, DM'd, put in a QR code), not
   part of the app shell — deliberately its own simple centered layout
   rather than reusing .c4c-partner-form's wider sectioned-form styling. */
.c4c-install-page {
    max-width: 420px;
    width:     calc(100% - 32px);
    margin:    60px auto;
    text-align: center;
}
.c4c-install-page__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 20px;
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.c4c-install-page__icon img { width:100%;height:100%;object-fit:contain; }
.c4c-install-page__icon span { font-size:26px;font-weight:800;color:var(--c4c-gold-strong); }
.c4c-install-page h1 { font-size:26px;letter-spacing:-0.5px;margin:0 0 10px; }
.c4c-install-page__sub { font-size:15px;line-height:1.6;color:var(--c4c-ink-2);margin:0 0 28px; }
.c4c-install-page__cta { width:100%;display:block; }
.c4c-install-page__steps {
    text-align: left;
    list-style: decimal;
    list-style-position: outside;
    margin: 0 0 16px;
    padding: 0 0 0 22px;
}
.c4c-install-page__steps li { font-size:15px;line-height:1.6;margin-bottom:10px; }
.c4c-install-page__steps li:last-child { margin-bottom:0; }

/* ══════════════════════════════════════ 28 · NOTICE */
.c4c-notice {
    max-width:   560px;
    width:       calc(100% - 32px);
    margin:      30px auto;
    padding:     22px 26px;
    background:  var(--c4c-card,#fff);
    border:      1px solid #e6e9f0;
    border-left: 4px solid #c99b3f;
    border-radius:14px;
    font-family: var(--c4c-font,sans-serif);
    font-size:   14.5px;
    color:       #475062;
    box-shadow:  0 8px 24px rgba(16,22,35,.06);
}

/* ══════════════════════════════════════ 29 · FOCUS */
.c4c-app :focus-visible,
.c4c-auth-card :focus-visible,
.c4c-partner-form :focus-visible { outline:2px solid var(--c4c-gold);outline-offset:2px;border-radius:6px; }

/* ══════════════════════════════════════ 30 · HOVER — desktop pointer only */
@media (hover:hover) {
    .c4c-nav-item:hover                       { background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px); }
    .c4c-stat:hover                           { transform:translateY(-3px);box-shadow:var(--c4c-shadow-lift); }
    .c4c-action:hover                         { border-color:var(--c4c-gold);color:var(--c4c-gold-strong);background:var(--c4c-gold-soft); }
    .c4c-action--rich:hover                   { border-color:var(--c4c-gold);background:var(--c4c-gold-soft); }
    .c4c-action--rich:hover .c4c-action__icon { transform:scale(1.1) rotate(-4deg); }
    .c4c-row:hover                            { box-shadow:var(--c4c-shadow);transform:translateY(-1px); }
    .c4c-ccard:hover                          { transform:translateY(-3px);box-shadow:var(--c4c-shadow-lift); }
    .c4c-btn--primary:hover                   { box-shadow:0 8px 22px rgba(201,155,63,.45);transform:translateY(-1px); }
    .c4c-btn--secondary:hover                 { box-shadow:var(--c4c-shadow); }
    .c4c-icon-btn:hover                       { box-shadow:var(--c4c-shadow);transform:translateY(-1px); }
    .c4c-fab:hover                            { transform:scale(1.06); }
    .c4c-ccard__name:hover                    { color:var(--c4c-gold-strong); }
    .c4c-stars-input button:hover             { transform:scale(1.2); }
}

/* ══════════════════════════════════════ 31 · DESKTOP ≥ 961 px */
@media (min-width:961px) {
    .c4c-topbar         { padding:14px 26px;gap:14px; }
    .c4c-topbar__spacer { display:block;flex:1; }
    .c4c-topbar__title  { flex:unset; }
    .c4c-content        { padding:26px; }  /* no bottom-nav offset needed */
    .c4c-view           { gap:22px; }
    .c4c-grid--stats    { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
    .c4c-grid--2        { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
    .c4c-cards          { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
    .c4c-actions--rich  { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
    .c4c-actions        { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .c4c-app            { border-radius:var(--c4c-radius); }
    .c4c-form           { max-width:560px; }
}

/* ══════════════════════════════════════ 32 · TABLET 601–960 px */
@media (min-width:601px) and (max-width:960px) {
    .c4c-grid--stats   { grid-template-columns:repeat(3,1fr); }
    .c4c-actions--rich { grid-template-columns:repeat(3,1fr); }
    .c4c-cards         { grid-template-columns:repeat(2,1fr); }
    .c4c-grid--2       { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════ 33 · MOBILE ≤ 960 px */
@media (max-width:960px) {
    .c4c-app            { grid-template-columns:1fr;border-radius:0;min-height:100dvh; }
    .c4c-bottomnav      { display:grid; }
    .c4c-fab            { display:grid; }
    .c4c-fab--deals     { display:inline-flex; align-items:center; justify-content:center; }
    .c4c-topbar         { padding:10px clamp(12px,4vw,16px);gap:10px; }
    .c4c-topbar__title h1 { font-size:clamp(14px,3.5vw,17px); }
    .c4c-topbar__title p  { font-size:clamp(10px,2.5vw,12px); }
    .c4c-icon-btn       { width:36px;height:36px;border-radius:10px; }
    .c4c-icon-btn svg   { width:16px;height:16px; }
    .c4c-avatar         { width:36px;height:36px;font-size:12px;border-radius:10px; }
    .c4c-grid--stats    { grid-template-columns:repeat(2,1fr); }
    .c4c-cards          { grid-template-columns:1fr; }
    .c4c-form           { max-width:100%; }
    .c4c-ccard__actions { flex-wrap:wrap; }
}

/* 430 px — iPhone Pro Max */
@media (max-width:430px) {
    .c4c-actions--rich { grid-template-columns:repeat(2,1fr); }
}

/* 390 px — iPhone 15 / Pixel 8 */
@media (max-width:390px) {
    .c4c-grid--stats { gap:8px; }
    .c4c-skel--stat  { height:96px; }
}

/* 360 px — mid-range Android */
@media (max-width:360px) {
    .c4c-stat__value  { font-size:16px; }
    .c4c-action--rich small { display:none; }
    .c4c-chip         { padding:4px 8px; }
    .c4c-btn--small   { padding:6px 10px;font-size:11.5px; }
}

/* 320 px — iPhone SE 1st gen (minimum supported) */
@media (max-width:320px) {
    .c4c-grid--stats   { grid-template-columns:1fr; }
    .c4c-actions--rich { grid-template-columns:1fr; }
    .c4c-topbar        { padding:8px 10px; }
}

/* ══════════════════════════════════════ 34 · REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
    .c4c-app *,.c4c-app *::before,.c4c-app *::after { animation:none !important;transition:none !important; }
}

/* ══════════════════════════════════════ 35 · v2.0 MOCKUP MATCH
   Everything below powers the exact homeowner dashboard mockup: topbar
   search+location+messages+bell+account, sidebar widgets (Refer & Earn /
   Need Help), 4 icon-box stat cards, the My Requests / Recent Messages /
   Recommended For You 3-column row, the Quote Progress table, the compact
   Saved Contractors row, and the "Get Better Quotes, Faster" CTA banner. */

/* ---- content page title (moved out of the topbar into the content area,
   so the topbar can be pure chrome like the mockup) ---- */
.c4c-content__title { margin-bottom:8px; }
.c4c-content__title h1 { font-size:clamp(24px,3vw,28px);font-weight:800;letter-spacing:-0.3px; }
.c4c-content__title p  { margin-top:4px;font-size:16px;color:var(--c4c-ink-3); }

/* ---- topbar: hamburger + search/location + messages + bell + account ---- */
.c4c-topbar__menu-btn { display:none; }
/* Part 4 (Layout & Navigation Consistency): this used to style the
   topbar search bar entirely on its own — a completely different visual
   language from the hero widget (rectangular, emoji icons, custom
   shadow) even though both often appear on the same page. That chrome
   now lives in one shared place: assets/css/c4c-search.css
   (.c4c-searchbar / .c4c-searchbar--compact). The .c4c-topbar__search*
   classes remain in the markup as stable hooks for topbar-search.js —
   only the CSS that used to style them moved. */
@media (max-width:768px) {
    .c4c-topbar__search-submit-text { display:none; }
}
.c4c-topbar__account {
    display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;
    border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;
    transition:background .15s ease,border-color .15s ease;
}
.c4c-topbar__account:hover { background:var(--c4c-surface);border-color:var(--c4c-line); }
.c4c-topbar__account-text { display:flex;flex-direction:column;text-align:left;line-height:1.25; }
.c4c-topbar__account-text strong { font-size:13px;font-weight:700;color:var(--c4c-ink); }
.c4c-topbar__account-text small { font-size:11.5px;color:var(--c4c-ink-3); }
.c4c-topbar__account svg { width:14px;height:14px;color:var(--c4c-ink-3); }

/* ---- sidebar widgets: Refer & Earn / Need Help ---- */
.c4c-sidebar__widgets { display:flex;flex-direction:column;gap:12px;padding:4px 4px 14px; }
.c4c-sidebar-widget {
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
    border-radius:14px;padding:14px;color:var(--c4c-sidebar-text);
}
.c4c-sidebar-widget--refer {
    background:linear-gradient(135deg,rgba(201,155,63,.18),rgba(201,155,63,.06));
    border-color:rgba(201,155,63,.28);
}
.c4c-sidebar-widget__icon {
    display:inline-flex;width:32px;height:32px;border-radius:10px;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);margin-bottom:8px;
}
.c4c-sidebar-widget__icon svg { width:17px;height:17px; }
.c4c-sidebar-widget strong { display:block;color:#fff;font-size:14.5px;margin-bottom:4px; }
.c4c-sidebar-widget p { font-size:12px;line-height:1.4;margin:0 0 10px;color:var(--c4c-sidebar-text); }
.c4c-app--collapsed .c4c-sidebar__widgets { display:none; }

/* ---- 4-up icon-box stat cards ---- */
.c4c-grid--stats-4 { grid-template-columns:repeat(4,1fr); }
.c4c-stat--boxed {
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    text-align:left;padding:24px;border-radius:var(--c4c-radius-lg,16px);
}
.c4c-stat__row { display:flex;align-items:center;justify-content:space-between;width:100%; }
.c4c-stat--boxed .c4c-stat__value { font-size:34px;font-weight:800;letter-spacing:-0.5px; }
.c4c-stat__iconbox {
    width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
}
.c4c-stat__iconbox svg { width:20px;height:20px; }
.c4c-stat__iconbox--success { background:var(--c4c-gold-soft);color:var(--c4c-gold-strong); }
.c4c-stat__iconbox--danger  { background:rgba(214,69,69,.12);color:var(--c4c-red); }
.c4c-stat__iconbox--info    { background:rgba(59,111,212,.12);color:var(--c4c-blue); }
.c4c-stat--boxed .c4c-stat__label { font-size:14px;font-weight:600;color:var(--c4c-ink-2); }
.c4c-stat__sub { font-size:12.5px;font-weight:700; }
.c4c-stat__sub--success { color:var(--c4c-green); }
.c4c-stat__sub--danger  { color:var(--c4c-red); }
.c4c-stat__sub--info    { color:var(--c4c-blue); }

/* ---- 3-column row: My Requests / Recent Messages / Recommended ---- */
.c4c-grid--3col { grid-template-columns:1fr; }
@media (min-width:961px) { .c4c-grid--3col { grid-template-columns:repeat(3,1fr); } }

.c4c-mini-panel__head {
    display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.c4c-mini-panel__head h2 { font-size:18px;font-weight:700;margin:0;letter-spacing:-0.2px; }
.c4c-mini-panel__viewall {
    background:none;border:0;padding:0;cursor:pointer;font:inherit;
    font-size:13px;font-weight:600;color:var(--c4c-gold-strong);
}
.c4c-mini-panel__viewall:hover { text-decoration:underline; }

.c4c-mini-list { display:flex;flex-direction:column;gap:4px; }
.c4c-mini-row {
    display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px;
    text-decoration:none !important;color:inherit;transition:background .15s ease;
}
.c4c-mini-row:hover { background:var(--c4c-surface); }
.c4c-mini-row__thumb {
    width:44px;height:44px;border-radius:12px;flex:none;overflow:hidden;
    display:flex;align-items:center;justify-content:center;background:var(--c4c-surface);color:var(--c4c-ink-3);
}
.c4c-mini-row__thumb img { width:100%;height:100%;object-fit:cover; }
.c4c-mini-row__thumb svg { width:18px;height:18px; }
.c4c-mini-row__body { flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px; }
.c4c-mini-row__body strong { font-size:13.5px;font-weight:700;color:var(--c4c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.c4c-mini-row__body small { font-size:12px;color:var(--c4c-ink-3); }
.c4c-mini-row__body .c4c-badge { align-self:flex-start;margin-top:2px; }
.c4c-mini-row__chevron { flex:none;font-size:20px;color:var(--c4c-ink-3); }
.c4c-mini-row__heart { flex:none;font-size:17px;color:var(--c4c-ink-3);cursor:pointer; }
.c4c-mini-row__heart.is-on { color:var(--c4c-red); }
.c4c-mini-row__heart:hover { color:var(--c4c-red); }

/* ---- Quote Progress table + Saved Contractors row ---- */
.c4c-grid--2-wide { grid-template-columns:1fr; }
@media (min-width:961px) { .c4c-grid--2-wide { grid-template-columns:1.6fr 1fr; } }
.c4c-table-scroll { overflow-x:auto; }
.c4c-table-scroll .c4c-table { min-width:520px; }
.c4c-table-scroll .c4c-table th { color:var(--c4c-ink-3);font-size:12px; }
.c4c-table-scroll .c4c-table td { color:var(--c4c-ink);font-size:14.5px; }

/* ---- Get Better Quotes, Faster CTA banner ---- */
.c4c-cta-banner {
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    background:linear-gradient(135deg,rgba(201,155,63,.14),rgba(201,155,63,.05));
    border:1px solid rgba(201,155,63,.28);border-radius:var(--c4c-radius);
    padding:22px 24px;
}
.c4c-cta-banner__icon {
    width:52px;height:52px;border-radius:16px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--c4c-gold),var(--c4c-gold-strong));color:var(--c4c-gold-ink, #171203);
}
.c4c-cta-banner__icon svg { width:26px;height:26px; }
.c4c-cta-banner__text { flex:1 1 260px;min-width:0; }
.c4c-cta-banner__text strong { display:block;font-size:16px;font-weight:800;margin-bottom:4px; }
.c4c-cta-banner__text span { font-size:13.5px;color:var(--c4c-ink-2);line-height:1.4; }
.c4c-cta-banner__action { display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none; }
.c4c-cta-banner__meter { font-size:12px;font-weight:700;color:var(--c4c-ink-2);width:160px; }
.c4c-cta-banner__meter .c4c-bar { margin-top:4px; }
@media (max-width:640px) {
    .c4c-cta-banner { flex-direction:column;align-items:flex-start; }
    /* v2.16.28 FIX (Pattern 6.1, Claude Code audit): __action and
       __meter were correctly reset here, but __text (flex: 1 1 260px on
       the desktop row, above) was missed — same bug as the hero search
       bar fix in hero-search.css: once flex-direction goes column, that
       260px flex-basis becomes a forced 260px of empty vertical space
       instead of the text just wrapping its own content. */
    .c4c-cta-banner__text { flex:0 0 auto;width:100%; }
    .c4c-cta-banner__action { align-items:flex-start;width:100%; }
    .c4c-cta-banner__meter { width:100%; }
}

/* ---- bottom-nav badge (Messages icon, matches mockup's "3" badge) ---- */
.c4c-bottomnav button,.c4c-bottomnav a { position:relative; }
.c4c-pill--bottomnav {
    position:absolute;top:2px;right:calc(50% - 20px);
    background:var(--c4c-red);color:#fff;border-radius:999px;
    min-width:16px;height:16px;padding:0 4px;font-size:9px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
}

/* ---- mobile: hamburger + off-canvas sidebar, search bar collapses ---- */
@media (max-width:960px) {
    .c4c-topbar__menu-btn { display:flex; }
    .c4c-topbar__search-field { display:none; }
    .c4c-topbar__zip-field { display:none; }
    .c4c-topbar__search-submit { display:none; }
    .c4c-topbar__account-text { display:none; }

    .c4c-sidebar {
        position:fixed;top:0;left:0;bottom:0;z-index:120;
        width:var(--c4c-sidebar-w,288px);transform:translateX(-100%);transition:transform .22s ease;
        box-shadow:0 0 0 2000px rgba(0,0,0,0);
    }
    .c4c-app--sidebar-open .c4c-sidebar {
        transform:translateX(0);
        box-shadow:20px 0 60px rgba(0,0,0,.35);
    }
    .c4c-app--sidebar-open::before {
        content:'';position:fixed;inset:0;background:rgba(8,10,16,.55);z-index:110;
    }
    .c4c-app { grid-template-columns:1fr; }

    .c4c-grid--stats-4 { grid-template-columns:repeat(2,1fr); }
}

/* ---- 36 · v2.2 static/smooth + text-box polish pass ----
   Sidebar/topbar are `position:fixed` by design (works regardless of where
   in the DOM they're injected — see AppShellRenderer/JourneyNavController
   notes), so the page body never has to reflow around them; this block just
   makes the fixed chrome + content area transition consistently instead of
   snapping, and tightens up spacing/typography so cards/boxes read as one
   family across the dashboard, Find Contractors, and profile pages. */
html { scroll-behavior:smooth; }
.c4c-app,.c4c-main,.c4c-content { min-width:0; }
.c4c-sidebar,.c4c-topbar,.c4c-bottomnav {
    will-change:transform;
    backface-visibility:hidden;
}
.c4c-content > * { animation:c4cFadeIn .18s ease both; }
@keyframes c4cFadeIn {
    from { opacity:0;transform:translateY(4px); }
    to   { opacity:1;transform:translateY(0); }
}
.c4c-card,.c4c-mini-panel,.c4c-stat--boxed,.c4c-cta-banner,.c4c-sidebar-widget {
    box-shadow:var(--c4c-shadow-sm,0 1px 2px rgba(16,24,40,.06));
    transition:box-shadow .15s ease,transform .15s ease;
}
.c4c-card:hover,.c4c-mini-panel:hover { box-shadow:var(--c4c-shadow-md,0 4px 12px rgba(16,24,40,.08)); }
.c4c-content__title h1,.c4c-search-header h1,.c4c-service-list-title {
    letter-spacing:-0.3px;
}
.c4c-search-subtitle,.c4c-content__title p {
    color:var(--c4c-ink-3);line-height:1.5;
}
.c4c-service-list-row,.c4c-mini-row,.c4c-contractor-card {
    transition:background .15s ease,box-shadow .15s ease,transform .12s ease;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .c4c-content > *,.c4c-service-list-row,.c4c-mini-row,.c4c-contractor-card,
    .c4c-card,.c4c-mini-panel,.c4c-stat--boxed,.c4c-cta-banner,.c4c-sidebar-widget {
        animation:none !important;transition:none !important;
    }
}

/* ══════════════════════════════════════ v2.3.3 FIX — DESKTOP STANDALONE PWA
 *
 * Issue: When the app is installed as a desktop PWA and the window width is
 * < 960px, the mobile breakpoints hide the topbar search fields:
 *   .c4c-topbar__search-field { display:none; }  (section 35)
 *   .c4c-app .c4c-topbar { display:none; }       (pwa-header.css, max-width:900px)
 *
 * On desktop standalone, the topbar IS the right chrome — the native header
 * is mobile-only. Keep the topbar and its search visible in standalone desktop.
 *
 * We detect standalone via CSS display-mode. The media query
 * (display-mode: standalone) AND (min-width: 901px) targets desktop app only.
 */
@media (display-mode: standalone) and (min-width: 901px) {
    /* Restore topbar search fields that the mobile breakpoint hid */
    .c4c-topbar__search-field { display: flex !important; }
    .c4c-topbar__zip-field    { display: flex !important; }
    .c4c-topbar__search-submit { display: flex !important; }
    .c4c-topbar__account-text  { display: flex !important; }
    /* Ensure the topbar itself is shown (pwa-header.css may hide it) */
    .c4c-app .c4c-topbar       { display: flex !important; }
}

/* ══════════════════════════════════════ SEARCH SUGGESTIONS
 * Suggestion dropdown styling now lives in one shared place —
 * assets/css/c4c-search.css (.c4c-search-suggestions / .c4c-search-suggestion)
 * — used by every search box in the product (hero, this topbar, and the
 * mobile home search below), not redeclared per-context. See that file's
 * header comment for why.
 */

/* ══════════════════════════════════════ v2.3.7 — MOBILE HOME HEADER + SEARCH
 * Sits directly inside the dashboard's own .c4c-content, right above the
 * greeting — guaranteed to render in the normal document flow (not a
 * separately injected fixed header), so it can't silently fail to show the
 * way the old native header did. Hidden on desktop, where the topbar
 * already carries the logo/branding + search.
 *
 * v2.10.4: the header/logo half (.c4c-mobile-home-header) is gone — see
 * Frontend\PwaHeaderRenderer's updated docblock. Only the search bar
 * (.c4c-mobile-home-search below) is still this dashboard's own; the
 * header is now the one shared native header every mobile page uses. */

.c4c-mobile-home-search {
    display: none;
    margin-bottom: 20px;
}
/* Elevate the reused .c4c-topbar__search form to a bigger, more prominent
   "modern and smart" mobile search bar — same functional markup/classes as
   the desktop topbar search (so assets/js/topbar-search.js's autocomplete
   attaches automatically with zero extra JS), just restyled larger here. */
.c4c-mobile-home-search .c4c-topbar__search {
    height: 56px;
    max-width: none;
    box-shadow: var(--c4c-shadow-sm, 0 2px 8px rgba(16,24,40,.06));
}
.c4c-mobile-home-search .c4c-topbar__search-field {
    padding: 0 8px 0 16px;
}
.c4c-mobile-home-search .c4c-topbar__search-field svg {
    width: 18px;
    height: 18px;
}
.c4c-mobile-home-search .c4c-topbar__search-field input {
    /* 16px minimum — under that, iOS Safari zooms the whole page in on
       focus, which on this full-width bar is very noticeable. */
    font-size: 16px;
}
.c4c-mobile-home-search .c4c-topbar__zip-field {
    flex: 0 0 120px;
    padding: 0 12px;
}
.c4c-mobile-home-search .c4c-topbar__zip-label {
    font-size: 13px;
}
.c4c-mobile-home-search .c4c-topbar__zip-field input {
    font-size: 16px;
}
.c4c-mobile-home-search .c4c-topbar__search-submit {
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 4px;
    border-radius: 999px;
}
.c4c-mobile-home-search .c4c-topbar__search-submit-text {
    display: none;
}
.c4c-mobile-home-search .c4c-topbar__search-submit svg {
    width: 18px;
    height: 18px;
}
/* The autocomplete dropdown (assets/js/c4c-search-core.js via
   topbar-search.js) anchors to .c4c-topbar__search-field, already
   position:relative from the shared rule — just widen its font slightly
   to match this bigger bar. */
.c4c-mobile-home-search .c4c-search-suggestions {
    font-size: 15.5px;
}

/* FIX: an older rule (a few sections up, @media max-width:960px) hides
   .c4c-topbar__search-field / .c4c-topbar__zip-field / .c4c-topbar__search-submit
   to collapse the DESKTOP topbar's compact search bar down to just a
   hamburger icon on narrower viewports. Since those exact class names are
   also kept on this mobile-home-search's own elements (as stable hooks
   for topbar-search.js — see that file's header comment), that older rule
   was silently hiding this search bar's input, ZIP field, and submit
   button too — the outer box still showed, but everything inside it had
   display:none, which is exactly what "I can't see a search bar" looks
   like. Restoring visibility specifically within this context. */
@media (max-width: 960px) {
    .c4c-mobile-home-search .c4c-topbar__search-field,
    .c4c-mobile-home-search .c4c-topbar__zip-field,
    .c4c-mobile-home-search .c4c-topbar__search-submit {
        display: flex !important;
    }
}

@media (max-width: 900px) {
    .c4c-mobile-home-search {
        display: flex;
    }
}

/* ══════════════════════════════════════ 34 · FIND DEALS NEAR YOU
   Offer cards for the homeowner's "Find Deals Near You" view (see
   REST\DealController + the deals view in ShortcodeController). Built from
   the same tokens as every other card here, so it inherits dark mode and
   any Branding color change automatically. */
.c4c-deals-zipbar {
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-wrap:     wrap;
    margin-bottom: clamp(14px,3vw,20px);
    padding:       clamp(12px,3vw,16px);
    background:    var(--c4c-card);
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius);
    box-shadow:    var(--c4c-shadow);
}
.c4c-deals-zipbar__label { font-size:14px;font-weight:600;color:var(--c4c-ink-2); }
.c4c-deals-zipbar__input {
    flex:          1 1 140px;
    min-width:     0;
    /* 16px so iOS doesn't zoom the page when this gets focus. */
    font-size:     16px;
    padding:       10px 12px;
    border:        1px solid var(--c4c-line);
    border-radius: var(--c4c-radius-sm);
    background:    var(--c4c-surface);
    color:         var(--c4c-ink);
}
.c4c-deals-zipbar__input:focus {
    outline:      none;
    border-color: var(--c4c-gold);
    box-shadow:   0 0 0 3px var(--c4c-gold-soft);
}

.c4c-deals-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   clamp(12px,3vw,18px);
    align-items:           start;
}

.c4c-deal {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        clamp(14px,3.5vw,20px);
    background:     var(--c4c-card);
    border:         1px solid var(--c4c-line);
    border-radius:  var(--c4c-radius);
    box-shadow:     var(--c4c-shadow);
    min-width:      0;
}
.c4c-deal--featured { border-color:var(--c4c-gold);box-shadow:var(--c4c-shadow-lift); }

.c4c-deal__head { display:flex;align-items:center;gap:12px;min-width:0; }
/* Company/location hidden via the "Show Company & Location on Card"
   backend toggle — only the Featured tag (if any) remains, right-aligned
   instead of the empty gap a logo/name row would otherwise leave. */
.c4c-deal__head--anon { justify-content:flex-end; }
.c4c-deal__logo {
    flex:          none;
    width:         44px;
    height:        44px;
    border-radius: 12px;
    object-fit:    cover;
    background:    var(--c4c-surface);
}
.c4c-deal__logo--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     800;
    font-size:       18px;
    color:           var(--c4c-ink-3);
    text-transform:  uppercase;
}
.c4c-deal__id { display:grid;gap:2px;min-width:0;flex:1; }
.c4c-deal__company {
    font-size:     15.5px;
    font-weight:   700;
    color:         var(--c4c-ink);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.c4c-deal__where { font-size:12.5px;color:var(--c4c-ink-3); }

.c4c-deal__offer { font-size:16.5px;font-weight:700;line-height:1.35;color:var(--c4c-ink); }
.c4c-deal__desc  { font-size:14px;line-height:1.5;color:var(--c4c-ink-2); }
.c4c-deal__terms { font-size:12px;line-height:1.45;color:var(--c4c-ink-3);margin-top:2px; }

/* Tap-to-copy coupon. Dashed border reads as "this is a code to take with
   you" rather than a normal button, and it's a <button> not a <div> so it's
   reachable by keyboard and screen readers. */
.c4c-deal__coupon {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    width:           100%;
    padding:         11px 14px;
    border:          1.5px dashed var(--c4c-gold);
    border-radius:   var(--c4c-radius-sm);
    background:      var(--c4c-gold-soft);
    cursor:          pointer;
    font:            inherit;
    transition:      background .15s ease,border-color .15s ease;
}
.c4c-deal__coupon:hover { background:var(--c4c-gold);color:var(--c4c-gold-ink,#171203); }
.c4c-deal__coupon.is-copied { border-style:solid;border-color:var(--c4c-green);background:var(--c4c-green);color:#fff; }
.c4c-deal__coupon-code {
    font-family:    ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:      15px;
    font-weight:    700;
    letter-spacing: .06em;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}
.c4c-deal__coupon-hint { display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;flex:none; }
.c4c-deal__coupon-hint svg { width:14px;height:14px; }

.c4c-deal__foot {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            10px;
    margin-top:     auto;
    padding-top:    4px;
}
.c4c-deal__expires { font-size:12.5px;font-weight:600;color:var(--c4c-red); }
.c4c-deal__foot-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

.c4c-tag--gold { background:var(--c4c-gold-soft);color:var(--c4c-gold-strong);flex:none; }

/* Card photo (Deal Details -> "Deal Photo") — a plain <button> wrapper, not
   an <img> alone, so tapping the photo opens the same detail modal as the
   "View details" link below without needing its own focus ring styling. */
.c4c-deal__image-btn {
    display:       block;
    width:         calc(100% + clamp(28px,7vw,40px));
    margin:        calc(-1 * clamp(14px,3.5vw,20px)) calc(-1 * clamp(14px,3.5vw,20px)) 0;
    padding:       0;
    border:        0;
    background:    none;
    cursor:        pointer;
    line-height:   0;
}
.c4c-deal__image {
    width:      100%;
    max-height: 220px;
    object-fit: contain;
    background: var(--c4c-surface);
    display:    block;
}

.c4c-deal__cats { display:flex;flex-wrap:wrap;gap:6px; }
.c4c-deal__cat {
    font-size:     11.5px;
    font-weight:   600;
    padding:       3px 9px;
    border-radius: 999px;
    background:    var(--c4c-surface);
    border:        1px solid var(--c4c-line);
    color:         var(--c4c-ink-2);
}

@media (max-width: 480px) {
    .c4c-deals-grid { grid-template-columns:1fr; }
    .c4c-deals-zipbar__label { flex:1 1 100%; }
}

/* ---- Deal detail modal (openModal/c4c-modal__card shell) ------------- */
.c4c-deal-modal__image {
    width:         calc(100% + clamp(36px,8vw,52px));
    margin:        calc(-1 * clamp(18px,4vw,26px)) calc(-1 * clamp(18px,4vw,26px)) 0;
    max-height:    260px;
    object-fit:    contain;
    background:    var(--c4c-surface);
    border-radius: 20px 20px 0 0;
    display:       block;
}
.c4c-deal-modal__company { font-size:14px;color:var(--c4c-ink-3);margin:-6px 0 0; }
.c4c-deal-modal__desc    { font-size:14.5px;line-height:1.55;color:var(--c4c-ink-2); }
.c4c-deal-modal__subhead { font-size:14px;font-weight:700;color:var(--c4c-ink);margin:4px 0 0; }

.c4c-deal-locations { display:grid;gap:10px; }
.c4c-deal-location {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
    padding:         12px 14px;
    border:          1px solid var(--c4c-line);
    border-radius:   var(--c4c-radius-sm);
    background:      var(--c4c-surface);
}
.c4c-deal-location__body { display:grid;gap:2px;min-width:0; }
.c4c-deal-location__name { display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--c4c-ink); }
.c4c-deal-location__addr { font-size:13px;color:var(--c4c-ink-2); }
.c4c-deal-location__dist { font-size:12.5px;font-weight:600;color:var(--c4c-gold-strong); }
.c4c-deal-location__actions { display:flex;gap:8px;flex:none; }

/* ══════════════════════════════════════ 35 · HEADING RESET (v2.5.1)
   The active WordPress theme (Twenty Twenty-Four and most block themes)
   colors and font-families every h1-h6 through theme.json global styles.
   Those rules target the heading elements directly, so they beat plain
   inheritance from .c4c-app — which meant our panel titles rendered in the
   theme's serif at the theme's fixed near-black, invisible against the
   app's dark surfaces. Headings inside a c4c container follow the c4c
   tokens, full stop. */
.c4c-app h1, .c4c-app h2, .c4c-app h3,
.c4c-app h4, .c4c-app h5, .c4c-app h6,
.c4c-auth-card h1, .c4c-auth-card h2, .c4c-auth-card h3 {
    color:       var(--c4c-ink);
    font-family: var(--c4c-font);
}

/* The muted secondary lines keep their own softer ink. */
.c4c-content__title p,
.c4c-mini-panel__head p,
.c4c-search-subtitle { color: var(--c4c-ink-3); }

/* Same leak on the standalone (non-dashboard) pages: search results,
   category browse, contractor profiles. These live outside .c4c-app and
   read the global tokens directly. */
.c4c-search-app h1, .c4c-search-app h2, .c4c-search-app h3,
.c4c-search-app h4, .c4c-search-app h5, .c4c-search-app h6,
.c4c-profile h1, .c4c-profile h2, .c4c-profile h3,
.c4c-profile h4, .c4c-profile h5, .c4c-profile h6,
.c4c-hero-search-wrap h1, .c4c-hero-search-wrap h2,
.c4c-nav-card-title, .c4c-service-list-title {
    color:       var(--c4c-text);
    font-family: var(--c4c-font);
}

/* ══════════════════════════════════════ v2.16.74 · SELF-SERVE BUSINESS PROFILE */
.c4c-profile-form { max-width:760px;gap:18px; }
.c4c-pf-section { display:grid;gap:16px; }
.c4c-pf-section .c4c-section-title { margin:0; }
.c4c-pf-section .c4c-section-title small { font-size:12.5px;font-weight:500;color:var(--c4c-ink-3); }
.c4c-pf-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px; }
.c4c-section-label { font-size:13px;font-weight:600;color:var(--c4c-ink-2); }
.c4c-pf-checks { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px; }
.c4c-pf-check { display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c4c-line);border-radius:12px;cursor:pointer;font-size:14px;color:var(--c4c-ink);background:var(--c4c-card);transition:border-color .15s,background .15s; }
.c4c-pf-check:hover { border-color:var(--c4c-gold); }
.c4c-pf-check input { width:18px;height:18px;margin:0;accent-color:var(--c4c-gold);flex:0 0 auto; }
.c4c-pf-check:has(input:checked) { border-color:var(--c4c-gold);background:var(--c4c-gold-soft); }
.c4c-pf-filter { width:100%;padding:10px 14px;border:1px solid var(--c4c-line);border-radius:12px;background:var(--c4c-card);color:var(--c4c-ink);font:inherit;font-size:16px;box-sizing:border-box; }
.c4c-pf-services { display:grid;gap:14px;max-height:460px;overflow:auto;padding-right:4px; }
.c4c-pf-svc-group { border:0;margin:0;padding:0; }
.c4c-pf-svc-group legend { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c4c-ink-3);margin-bottom:8px;padding:0; }
.c4c-pf-zipbox { display:flex;gap:8px; }
.c4c-pf-zipbox input { flex:1; }
.c4c-pf-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px; }
.c4c-pf-chip { display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--c4c-gold-soft);color:var(--c4c-ink);font-size:13px;font-weight:600; }
.c4c-pf-chip button { border:0;background:transparent;color:var(--c4c-ink-2);font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;cursor:pointer; }
.c4c-pf-chip button:hover { background:rgba(0,0,0,.08); }
.c4c-pf-images { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px; }
.c4c-pf-images--logo { grid-template-columns:120px; }
.c4c-pf-img { position:relative;aspect-ratio:1/1;border:1.5px dashed var(--c4c-line);border-radius:14px;overflow:hidden;background:var(--c4c-card);display:flex;align-items:center;justify-content:center; }
.c4c-pf-img:hover { border-color:var(--c4c-gold); }
.c4c-pf-img.has-img { border-style:solid; }
.c4c-pf-img img { width:100%;height:100%;object-fit:cover;display:block; }
.c4c-pf-img input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer; }
.c4c-pf-img.has-img input[type="file"] { z-index:1; }
.c4c-pf-img__add { display:flex;flex-direction:column;align-items:center;font-size:26px;font-weight:300;color:var(--c4c-ink-3);line-height:1.1; }
.c4c-pf-img__add small { font-size:12px;font-weight:500; }
.c4c-pf-img__remove { position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;border-radius:50%;border:0;background:rgba(17,24,39,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer; }
.c4c-pf-img.is-loading::after { content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) center/28px no-repeat;animation:c4c-pf-pulse 1s ease-in-out infinite; }
@keyframes c4c-pf-pulse { 50% { opacity:.4; } }
.c4c-pf-savebar { position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 14px;border:1px solid var(--c4c-line);border-radius:16px;background:var(--c4c-card);box-shadow:0 10px 30px rgba(17,24,39,.12); }
.c4c-pf-savebar .c4c-form-message { flex:1; }

/* Profile completeness card (overview + profile) */
.c4c-completeness { display:grid;gap:12px;margin-bottom:18px;border:1px solid var(--c4c-gold);background:linear-gradient(0deg,var(--c4c-gold-soft),var(--c4c-gold-soft)),var(--c4c-card); }
.c4c-completeness__head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.c4c-completeness__bar { height:8px;border-radius:999px;background:var(--c4c-line);overflow:hidden; }
.c4c-completeness__bar span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c4c-gold),var(--c4c-gold-strong));transition:width .4s ease; }
.c4c-completeness__list { display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none; }
.c4c-completeness__item { border:1px solid var(--c4c-line);background:var(--c4c-card);color:var(--c4c-ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer; }
.c4c-completeness__item:hover { border-color:var(--c4c-gold); }

/* v2.16.74 · services tree, agreements, required marker */
.c4c-req { color:var(--c4c-red);font-weight:700; }
.c4c-pf-svc-toolbar { display:flex;align-items:center;gap:12px; }
.c4c-pf-svc-toolbar .c4c-pf-filter { flex:1; }
.c4c-pf-count { font-size:12.5px;font-weight:600;color:var(--c4c-ink-2);white-space:nowrap; }
.c4c-pf-services { max-height:560px; }
.c4c-pf-group { display:grid;gap:8px; }
.c4c-pf-group__title { margin:6px 0 0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c4c-ink-3); }
.c4c-pf-cat { border:1px solid var(--c4c-line);border-radius:12px;background:var(--c4c-card); }
.c4c-pf-cat[open] { border-color:var(--c4c-gold); }
.c4c-pf-cat summary { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--c4c-ink);list-style:none; }
.c4c-pf-cat summary::-webkit-details-marker { display:none; }
.c4c-pf-cat summary::after { content:"›";font-size:18px;color:var(--c4c-ink-3);transition:transform .15s; }
.c4c-pf-cat[open] summary::after { transform:rotate(90deg); }
.c4c-pf-cat__meta { margin-left:auto;font-size:12px;font-weight:500;color:var(--c4c-ink-3); }
.c4c-pf-cat__meta b { color:var(--c4c-gold-strong); }
.c4c-pf-cat__body { display:grid;gap:10px;padding:0 14px 14px; }
.c4c-pf-selectall { justify-self:start;border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--c4c-gold-strong);cursor:pointer; }
.c4c-pf-agree { display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--c4c-line);border-radius:12px;cursor:pointer;font-size:14px;line-height:1.5;color:var(--c4c-ink); }
.c4c-pf-agree input { width:20px;height:20px;margin:2px 0 0;accent-color:var(--c4c-gold);flex:0 0 auto; }
.c4c-pf-agree:has(input:checked) { border-color:var(--c4c-gold);background:var(--c4c-gold-soft); }
.c4c-pf-agree.is-done { cursor:default; }
.c4c-pf-agree__stamp { display:block;margin-top:4px;color:var(--c4c-green);font-weight:600; }
.c4c-pf-agree__notice { display:block;margin-top:6px;color:var(--c4c-red);font-weight:600; }
.c4c-pf-commission { display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:var(--c4c-gold-soft);font-size:13.5px;color:var(--c4c-ink-2); }
.c4c-pf-commission__rate { font-size:26px;font-weight:800;color:var(--c4c-gold-strong);line-height:1; }