/* CF-174 Product Experience — shared public/account/workspace/owner visual system. */
:root {
    --px-ink: #283a34;
    --px-ink-strong: #20312c;
    --px-muted: #64756e;
    --px-sage: #607f73;
    --px-sage-strong: #3d6255;
    --px-sage-soft: #eaf0ec;
    --px-paper: #f4f5f0;
    --px-surface: #fffefa;
    --px-surface-soft: #f7f8f4;
    --px-line: #d8dfd9;
    --px-line-strong: #bdcbc3;
    --px-shadow: 0 12px 34px rgba(39, 61, 53, .07);
    --px-shadow-soft: 0 6px 20px rgba(39, 61, 53, .055);
}

/* Landing already owns a strong composition. CF-174 only keeps its entry chrome
   aligned with the authenticated product rather than applying a second redesign. */
.landing-v2 .landing-header .brand,
.landing-v2 .landing-footer .brand { color: var(--px-ink); }
.landing-v2 .landing-login { border-color: #cfd9d2; background: #fbfcf8; color: var(--px-ink); }
.landing-v2 .landing-login:hover { border-color: #aebfb5; background: #f0f4f0; }

/* Shared application palette. Semantic warning/danger colors remain untouched. */
.account-page,
.customer-page,
.owner-page,
.integrations-page {
    --bg: var(--px-paper);
    --bg-accent: #e8eee9;
    --surface: var(--px-surface);
    --surface-strong: #fffefa;
    --surface-muted: var(--px-surface-soft);
    --border: var(--px-line);
    --border-strong: var(--px-line-strong);
    --line: var(--px-line);
    --text: var(--px-ink);
    --muted: var(--px-muted);
    --primary: var(--px-sage-strong);
    --primary-dark: #2f5145;
    --accent: var(--px-sage);
    --accent-deep: var(--px-sage-strong);
    --focus: #557d6e;
    --shadow: var(--px-shadow);
    color: var(--px-ink);
    background:
        radial-gradient(circle at 10% 0, rgba(116, 151, 136, .09), transparent 27rem),
        linear-gradient(180deg, #f4f5f0 0%, #f1f3ee 100%);
}
.account-page::before,
.customer-page::before,
.owner-page::before,
.integrations-page::before {
    height: 220px;
    background: linear-gradient(135deg, rgba(112, 148, 133, .09), rgba(205, 216, 208, .05) 56%, transparent);
}
.account-page .card,
.customer-page .card,
.owner-page .card,
.integrations-page .card {
    border-color: var(--px-line);
    background: rgba(255, 254, 250, .96);
    box-shadow: var(--px-shadow-soft);
}
.account-page .brand-mark,
.customer-page .brand-mark,
.owner-page .brand-mark,
.integrations-page .brand-mark { background: #385149; }
.account-page .button.primary,
.customer-page .button.primary,
.owner-page .button.primary,
.integrations-page .button.primary {
    border-color: var(--px-sage-strong);
    background: var(--px-sage-strong);
    color: #fff;
    box-shadow: 0 7px 18px rgba(61, 98, 85, .14);
}
.account-page .button.primary:hover,
.customer-page .button.primary:hover,
.owner-page .button.primary:hover,
.integrations-page .button.primary:hover {
    border-color: #4b7163;
    background: #4b7163;
}
.account-page .button.secondary,
.customer-page .button.secondary,
.owner-page .button.secondary,
.integrations-page .button.secondary {
    border-color: #c7d4cc;
    background: #f5f8f5;
    color: #33584b;
}
.account-page .button.secondary:hover,
.customer-page .button.secondary:hover,
.owner-page .button.secondary:hover,
.integrations-page .button.secondary:hover { border-color: #aebfb5; background: #edf3ef; }
.account-page input:focus,
.account-page select:focus,
.account-page textarea:focus,
.customer-page input:focus,
.customer-page select:focus,
.customer-page textarea:focus,
.owner-page input:focus,
.owner-page select:focus,
.owner-page textarea:focus,
.integrations-page input:focus,
.integrations-page select:focus,
.integrations-page textarea:focus { border-color: #789889; box-shadow: 0 0 0 3px rgba(96, 127, 115, .12); }

/* Account is the bridge between public promise and product: same paper/sage tone,
   less "generic auth form" separation. */
.account-page .site-header { background: rgba(249, 249, 245, .92); border-bottom-color: var(--px-line); backdrop-filter: blur(14px); }
.account-page .auth-benefits li > span { background: #e8efea; color: #46695b; }
.account-page .auth-card { border-radius: 20px; }
.account-page .auth-tabs { background: #e9eeea; }
.account-page .auth-tab.active { color: var(--px-ink); box-shadow: 0 2px 8px rgba(39,61,53,.08); }

/* Contractor workspace shell: compact, branded and clearly object-first. */
.customer-page .customer-header {
    margin-bottom: 14px;
    border-bottom-color: #dbe2dc;
}
.customer-page .customer-heading .eyebrow { color: #537b6c; }
.customer-page .customer-heading h1 { color: var(--px-ink-strong); }
.customer-page .project-context-bar {
    border-color: #d2ddd6;
    background: linear-gradient(135deg, #fffefa, #f4f7f3);
    box-shadow: 0 8px 24px rgba(39,61,53,.055);
}
.customer-page .project-context-summary strong { color: var(--px-ink-strong); }
.customer-page .customer-task-nav {
    border-color: #d7dfd9;
    background: rgba(255,254,250,.95);
    box-shadow: 0 6px 18px rgba(39,61,53,.05);
}
.customer-page .customer-task-nav a { color: #52655d; }
.customer-page .customer-task-nav a:hover { background: #edf2ee; color: #304e43; }
.customer-page .customer-task-nav a.active {
    border-color: #c8d6ce;
    background: #e7efea;
    color: #335b4d;
    box-shadow: inset 0 0 0 1px rgba(96,127,115,.05);
}
.customer-page .overview-heading { align-items: flex-end; }
.customer-page .overview-role-hint { max-width: 62ch; margin-top: 5px; }
.customer-page .quick-actions { justify-content: flex-end; }

/* The role queue is the daily command surface, not another neutral white card. */
.customer-page .role-workday {
    position: relative;
    overflow: hidden;
    border-color: #bfd0c6;
    background:
        radial-gradient(circle at 100% 0, rgba(120,152,137,.14), transparent 18rem),
        linear-gradient(145deg, #fbfcf8, #f4f8f5 68%);
    box-shadow: 0 12px 28px rgba(45,75,64,.075);
}
.customer-page .role-workday::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #688b7c;
}
.customer-page .role-workday-head { position: relative; }
.customer-page .role-workday-stat { border-color: #d4ded7; background: rgba(255,254,250,.88); }
.customer-page .role-workday-item {
    border-color: #d4ded7;
    background: rgba(255,254,250,.96);
    box-shadow: 0 3px 10px rgba(39,61,53,.035);
}
.customer-page .role-workday-item:hover { border-color: #afc2b7; background: #fff; }
.customer-page .role-workday-overflow { border-color: #c8d5ce; background: #f0f5f1; }

/* First success is a guided launch sequence, visually distinct from the daily queue. */
.customer-page .first-success-card {
    border-color: #d8d6c7;
    background: linear-gradient(145deg, #fffdf7, #f8f6ed 72%);
    box-shadow: 0 10px 25px rgba(69,65,42,.055);
}
.customer-page .first-success-head { margin-bottom: 12px; }
.customer-page .first-success-head h3 { margin-bottom: 4px; }
.customer-page .first-success-head .section-description { max-width: 720px; }
.customer-page #firstSuccessProgress { flex: 0 0 auto; white-space: nowrap; }
.customer-page .first-success-progress {
    height: 6px;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6e6dc;
}
.customer-page #firstSuccessProgressFill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #688b7c;
    transition: width .25s ease;
}
.customer-page .first-success-item { border-color: #dedfd5; background: rgba(255,255,252,.86); }
.customer-page .first-success-item.done { min-height: 56px; background: #f1f4ef; color: #5b6a63; }
.customer-page .first-success-item.done .first-success-state {
    border-color: #789889;
    background: #688b7c;
    color: #fff;
}
.customer-page .first-success-item.next {
    border-color: #9fb8aa;
    background: linear-gradient(90deg, #f7faf7, #fff 42%);
    box-shadow: 0 5px 14px rgba(61,98,85,.07);
}
.customer-page .first-success-item.next .first-success-state {
    border-color: #3d6255;
    background: #edf3ef;
    color: #3d6255;
}
.customer-page .first-success-item.next .button { border-color: #3d6255; background: #3d6255; color: #fff; }
.customer-page .work-entry-guide {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid #bfd0c6;
    border-radius: 12px;
    background: #eef4f0;
    color: #385149;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.4;
}

.customer-page .metric-card { border-color: #d9e0da; background: #fffefa; }
.customer-page .metric-card::before { opacity: .72; }

/* Owner portal must look like the same product, without contractor cockpit density. */
.owner-page { background: var(--px-paper); color: var(--px-ink); }
.owner-page .owner-shell { width: min(1180px, calc(100% - 32px)); }
.owner-page .owner-header {
    border-color: var(--px-line);
    background: rgba(255,254,250,.95);
    box-shadow: var(--px-shadow-soft);
}
.owner-page .owner-heading p:last-child,
.owner-page .owner-security-note { color: var(--px-muted); }
.owner-page .owner-property-context { border-color: var(--px-line); background: #fffefa; }
.owner-page .owner-nav { background: linear-gradient(#f4f5f0 78%, rgba(244,245,240,0)); }
.owner-page .owner-nav button { border-color: #d2dcd5; background: #fffefa; color: #4a5f56; }
.owner-page .owner-nav button:hover { border-color: #789889; color: #3d6255; }
.owner-page .owner-nav button.active { border-color: #385149; background: #385149; color: #fff; }
.owner-page .owner-metric,
.owner-page .owner-stage,
.owner-page .owner-commercial-columns > section { border-color: #dce3dd; background: #f7f8f4; }
.owner-page .owner-item { border-color: #dce3dd; background: #fffefa; }
.owner-page .owner-item-meta span { background: #edf2ee; }
.owner-page .owner-line-details summary { color: #456f60; }

/* Narrow screens: preserve product identity but spend almost no vertical height on chrome. */
@media (max-width: 700px) {
    .account-page .shell,
    .customer-page .shell,
    .integrations-page .shell { width: min(100% - 16px, 1180px); }

    .customer-page .customer-header {
        grid-template-columns: auto minmax(0,1fr) !important;
        gap: 8px 10px !important;
        align-items: center !important;
        padding: 4px 0 12px !important;
    }
    .customer-page .customer-header .brand {
        display: inline-flex !important;
        grid-column: 1;
        align-self: start;
        min-height: 40px;
    }
    .customer-page .customer-header .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .customer-page .customer-header .brand > span:last-child { display: none; }
    .customer-page .customer-heading { grid-column: 2; min-width: 0; }
    .customer-page .customer-heading .eyebrow { font-size: 9px; letter-spacing: .11em; }
    .customer-page .customer-heading h1 { font-size: 1.08rem; line-height: 1.1; }
    .customer-page .customer-header .header-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100%;
        gap: 6px !important;
        align-items: center;
        justify-content: flex-start !important;
        overflow: visible;
        padding-bottom: 0;
    }
    .customer-page .customer-header .header-actions::-webkit-scrollbar { display: none; }
    .customer-page .customer-header .header-actions .badge {
        grid-column: auto !important;
        flex: 0 1 auto;
        max-width: 100% !important;
        min-height: 34px;
        justify-content: center;
    }
    .customer-page .customer-header .header-actions .button {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
        min-height: 40px;
        padding: 7px 10px;
        font-size: .78rem;
    }
    .customer-page #customerApp,
    .customer-page .project-context-bar,
    .customer-page .project-context-heading,
    .customer-page .project-context-controls,
    .customer-page .project-context-select,
    .customer-page .customer-overview { min-width: 0; max-width: 100%; }
    .customer-page .project-context-bar { margin-top: 0; width: 100%; }
    .customer-page .project-context-controls { grid-template-columns: minmax(0, 1fr) !important; }
    .customer-page .project-context-select select { width: 100%; min-width: 0; }
    .customer-page .customer-task-nav { width: 100%; max-width: 100%; }
    .customer-page .overview-heading { align-items: stretch; }
    .customer-page .overview-heading .quick-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .customer-page .overview-heading .quick-actions .button { min-width: 0; min-height: 44px; padding-inline: 9px; }
    .customer-page .overview-heading .quick-actions #quickWorkLink:not(.hidden) { grid-column: 1 / -1; }
    .customer-page .overview-heading .quick-actions .button:only-child { grid-column: 1 / -1; }
    .customer-page .overview-role-hint { font-size: .8rem; }
    .customer-page .role-workday { padding: 14px 13px 13px; }
    .customer-page .first-success-progress { margin-bottom: 11px; }
    .customer-page .first-success-item.done .first-success-copy small { display: none; }

    .owner-page .owner-shell { width: min(100% - 16px, 1180px); }
    .owner-page .owner-header {
        grid-template-columns: auto minmax(0,1fr) !important;
        gap: 8px 10px !important;
        padding: 11px 12px;
    }
    .owner-page .owner-header .brand { display: inline-flex !important; align-self: start; }
    .owner-page .owner-header .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .owner-page .owner-header .brand > span:last-child { display: none; }
    .owner-page .owner-heading { min-width: 0; }
    .owner-page .owner-heading h1 { font-size: 1.15rem; }
    .owner-page .owner-heading p:last-child { font-size: .82rem; line-height: 1.35; }
    .owner-page .owner-header-actions {
        grid-column: 1 / -1 !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .owner-page .owner-header-actions::-webkit-scrollbar { display: none; }
}

@media (max-width: 430px) {
    .customer-page .overview-heading .quick-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .customer-page .overview-heading .quick-actions .button { grid-column: auto !important; }
    .customer-page .overview-heading .quick-actions #quickWorkLink:not(.hidden) { grid-column: 1 / -1 !important; }
    .customer-page .first-success-card { order: -3; padding: 13px; }
    .customer-page .first-success-head { align-items: flex-start; }
    .customer-page #firstSuccessProgress { align-self: flex-start; }
    .owner-page .owner-property-context { padding: 12px; }
}

@media (max-width: 360px) {
    .customer-page .customer-header .header-actions .badge { max-width: 100% !important; }
    .customer-page .customer-task-nav { margin-inline: -4px; }
    .customer-page .role-workday-stat { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .customer-page #firstSuccessProgressFill { transition: none; }
}