/* === CLIENT PORTAL === */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS (shared with Greatime app).  Prefix: --gr-*
   Added 2026-04-19. Inert until adopted by refactors in later passes.
   Do NOT alias --salmon (solar engine rewrites it dynamically).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* spacing — 8pt with half-step */
    --gr-space-1: 4px;
    --gr-space-2: 8px;
    --gr-space-3: 12px;
    --gr-space-4: 16px;
    --gr-space-5: 20px;
    --gr-space-6: 24px;
    --gr-space-7: 32px;
    --gr-space-8: 48px;
    --gr-space-9: 64px;
    --gr-space-10: 96px;

    /* type (size / line-height) */
    --gr-font-xs:   10px;     --gr-lh-xs:   1.4;
    --gr-font-sm:   11px;     --gr-lh-sm:   1.45;
    --gr-font-base: 13px;     --gr-lh-base: 1.5;
    --gr-font-md:   15px;     --gr-lh-md:   1.5;
    --gr-font-lg:   18px;     --gr-lh-lg:   1.35;
    --gr-font-xl:   24px;     --gr-lh-xl:   1.25;
    --gr-font-2xl:  32px;     --gr-lh-2xl:  1.15;
    --gr-tracking-tight:  -0.01em;
    --gr-tracking-normal: 0;
    --gr-tracking-wide:   0.04em;
    --gr-tracking-caps:   0.12em;

    /* radius */
    --gr-radius-xs:   4px;
    --gr-radius-sm:   6px;
    --gr-radius-md:   8px;
    --gr-radius-lg:   12px;
    --gr-radius-pill: 999px;

    /* elevation */
    --gr-shadow-1: 0 1px 2px rgba(0,0,0,0.04);
    --gr-shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --gr-shadow-3: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);

    /* stage palette (pinned hex, matches existing templates) */
    --gr-stage-briefing:        #7ea8ff;
    --gr-stage-in-progress:     #a87cff;
    --gr-stage-internal-review: #8b8fa8;
    --gr-stage-client-review:   #c49234;
    --gr-stage-revisions:       #b8685a;
    --gr-stage-approved:        #5fa86a;
    --gr-stage-delivered:       #4a9e6b;
    --gr-stage-invoiced:        #3d7a5a;
    --gr-stage-paid:            #2d5a44;
    --gr-stage-archived:        #555555;

    /* canonical salmon (stays put even when solar engine shifts --salmon) */
    --gr-accent:      #c0624e;
    --gr-accent-soft: rgba(192, 98, 78, 0.14);
    --gr-accent-line: rgba(192, 98, 78, 0.25);

    /* motion */
    --gr-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --gr-ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
    --gr-duration-fast: 120ms;
    --gr-duration:      200ms;
    --gr-duration-slow: 320ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON PRIMITIVE — .gr-btn
   Shared across Greatime app + toshi.agency portal. Added 2026-04-19.
   Coexists with legacy .cp-btn / .cp-pill-btn / .bulk-btn / .pu-btn — those
   are progressively migrated; nothing legacy is deleted in this pass.

   Usage:
     <button class="gr-btn">Default (sm, outline)</button>
     <a     class="gr-btn gr-btn-md gr-btn-solid">Primary CTA</a>
     <button class="gr-btn gr-btn-xs gr-btn-primary">Dense accent</button>
     <button class="gr-btn gr-btn-danger">Delete</button>
     <button class="gr-btn gr-btn-ghost">⋯</button>
   ═══════════════════════════════════════════════════════════════════════════ */
.gr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gr-space-2);
    padding: 6px var(--gr-space-4);           /* sm default */
    border: 1px solid var(--line, rgba(0,0,0,0.14));
    border-radius: var(--gr-radius-sm);
    background: transparent;
    color: var(--text, #1a1a1a);
    font-family: inherit;
    font-size: var(--gr-font-sm);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--gr-tracking-normal);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--gr-duration-fast) var(--gr-ease),
        border-color var(--gr-duration-fast) var(--gr-ease),
        color var(--gr-duration-fast) var(--gr-ease),
        opacity var(--gr-duration-fast) var(--gr-ease);
}
.gr-btn:hover  { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.22); }
.gr-btn:focus-visible {
    outline: 2px solid var(--gr-accent);
    outline-offset: 2px;
}
.gr-btn:active { background: rgba(0, 0, 0, 0.07); }
.gr-btn[disabled], .gr-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* sizes */
.gr-btn-xs { padding: 4px var(--gr-space-3); font-size: var(--gr-font-xs); border-radius: var(--gr-radius-xs); }
.gr-btn-md { padding: 10px var(--gr-space-5); border-radius: var(--gr-radius-pill); }
.gr-btn-lg { padding: 14px var(--gr-space-6); font-size: var(--gr-font-base); border-radius: var(--gr-radius-pill); letter-spacing: var(--gr-tracking-wide); }

/* variants */
.gr-btn-solid   { background: var(--text, #1a1a1a); color: var(--bg, #f5f2ee); border-color: var(--text, #1a1a1a); }
.gr-btn-solid:hover  { background: rgba(0, 0, 0, 0.82); border-color: rgba(0, 0, 0, 0.82); }
.gr-btn-solid:active { background: rgba(0, 0, 0, 0.92); }

.gr-btn-primary { border-color: var(--gr-accent); color: var(--gr-accent); }
.gr-btn-primary:hover { background: var(--gr-accent); color: #fff; border-color: var(--gr-accent); }

.gr-btn-danger  { border-color: var(--gr-accent-line); color: var(--gr-accent); }
.gr-btn-danger:hover { background: var(--gr-accent-soft); border-color: var(--gr-accent); }

.gr-btn-ghost   { border-color: transparent; background: transparent; padding: 6px var(--gr-space-2); color: inherit; opacity: 0.65; }
.gr-btn-ghost:hover { background: rgba(0, 0, 0, 0.05); opacity: 1; }

/* modifiers */
.gr-btn-block { display: inline-flex; width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   ROW PRIMITIVE — .gr-row
   Unified list/card row. Three densities + variants for common row patterns.

   Usage:
     <div class="gr-row">                             — sm default, flex
     <div class="gr-row gr-row-xs">                   — compact (cat/fi-level)
     <a   class="gr-row gr-row-md gr-row-bordered">   — card (file-row-level)
     <a   class="gr-row gr-row-lg gr-row-bordered">   — hero (dropbox-card-level)
     <div class="gr-row gr-row-divided">              — table row (bottom-line only)
     <div class="gr-row gr-row-grid" style="--gr-row-cols: 22px 1fr auto;">
   ═══════════════════════════════════════════════════════════════════════════ */
.gr-row {
    display: flex;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-3);
    border-radius: var(--gr-radius-md);
    font-size: var(--gr-font-sm);
    line-height: var(--gr-lh-sm);
    color: inherit;
    text-decoration: none;
    transition:
        background var(--gr-duration-fast) var(--gr-ease),
        border-color var(--gr-duration-fast) var(--gr-ease);
}

/* ── sizes (density) ── */
.gr-row-xs {
    padding: var(--gr-space-2) var(--gr-space-3);
    gap: var(--gr-space-2);
    font-size: var(--gr-font-xs);
    line-height: var(--gr-lh-xs);
    border-radius: var(--gr-radius-sm);
}
.gr-row-md {
    padding: var(--gr-space-3) var(--gr-space-4);
    font-size: var(--gr-font-base);
    line-height: var(--gr-lh-base);
}
.gr-row-lg {
    padding: var(--gr-space-5) var(--gr-space-6);
    gap: var(--gr-space-5);
    font-size: var(--gr-font-base);
    line-height: var(--gr-lh-base);
}

/* ── variants ── */
.gr-row-bordered {
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    background: transparent;
}
.gr-row-divided {
    border-radius: 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.06));
}
.gr-row-divided:last-child { border-bottom: none; }

/* ── states ── */
.gr-row-clickable { cursor: pointer; }
.gr-row-clickable:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.14);
}
.gr-row-bordered.gr-row-clickable:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.16);
}
.gr-row.is-active {
    border-left: 2px solid var(--gr-accent);
    padding-left: calc(var(--gr-space-3) - 2px);
}
.gr-row-md.is-active { padding-left: calc(var(--gr-space-4) - 2px); }
.gr-row-lg.is-active { padding-left: calc(var(--gr-space-6) - 2px); }

/* ── layout variant: grid columns ── */
.gr-row-grid {
    display: grid;
    grid-template-columns: var(--gr-row-cols, auto 1fr auto);
    align-items: center;
}


/* ── LOGIN PAGE ── */
.cp-login-page {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(20px, 4vw, 60px);
}

.cp-login-card {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.cp-login-brand {
    margin-bottom: 12px;
    color: var(--dim);
}

.cp-login-logo {
    height: 12px;
    width: auto;
    fill: currentColor;
}

.cp-login-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dim);
    margin-bottom: 56px;
}

.cp-login-form {
    text-align: left;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cp-login-form .tl-form-group {
    position: relative;
    margin-bottom: 36px;
    width: 100%;
}

.cp-login-form .tl-form-group label {
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 13px;
    color: var(--dim);
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
}

.cp-login-form .tl-form-group.focused label,
.cp-login-form .tl-form-group.has-value label {
    top: -8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ash);
}

.cp-login-form .tl-form-group input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    padding: 12px 0 10px;
    -webkit-appearance: none;
    appearance: none;
}

.cp-login-form .tl-form-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

.cp-login-form .tl-form-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-login-form .tl-form-group.focused .tl-form-line::after {
    width: 100%;
}

.cp-login-form .tl-form-group.has-value .tl-form-line::after {
    width: 100%;
    background: var(--ash);
}

.cp-login-active {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.cp-login-active p {
    font-size: 13px;
    color: var(--dim);
    margin-bottom: 16px;
}

.cp-login-active strong {
    color: var(--text);
}

.cp-login-hint {
    font-size: 11px;
    line-height: 1.7;
    color: var(--dim);
    letter-spacing: 0.01em;
}

.cp-login-hint code {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--ash);
    background: var(--muted);
    padding: 2px 6px;
    border-radius: 3px;
}

.cp-login-status {
    margin-top: 16px;
    font-size: 12px;
    min-height: 20px;
}

.cp-status-error {
    color: #e05050;
}

/* Shake animation */
@keyframes cpShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
}

.cp-shake {
    animation: cpShake 0.6s ease;
}


/* ── BUTTONS ── */
.cp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    border: 1px solid var(--text);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.cp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--text);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.cp-btn:hover::before {
    width: 100%;
}

.cp-btn:hover {
    color: var(--bg);
}

.cp-btn-text,
.cp-btn-arrow {
    position: relative;
    z-index: 1;
}

.cp-btn-arrow {
    transition: transform 0.3s ease;
}

.cp-btn:hover .cp-btn-arrow {
    transform: translateX(4px);
}

.cp-btn.sending {
    pointer-events: none;
    opacity: 0.6;
}


/* ── DASHBOARD ── */
.cp-dashboard {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px) 60px;
}

/* Header */
.cp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 40px;
}

.cp-project-title {
    font-family: var(--display);
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 4px;
}

.cp-client-name {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.04em;
}

.cp-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding-top: 8px;
}

.cp-status-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 14px;
    border-radius: 100px;
    font-weight: 500;
    white-space: nowrap;
}


.cp-status-in-progress { background: rgba(232, 146, 124, 0.15); color: var(--salmon); }


.cp-logout {
    color: var(--dim);
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.cp-logout:hover {
    color: var(--text);
}


/* ── PROGRESS PHASES ── */


/* ── GRID ── */
.cp-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ── FILES ── */


/* ── DROPBOX ── */
.cp-dropbox-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: border-color 0.25s ease, background 0.25s ease;
    text-decoration: none;
}

.cp-dropbox-card:hover {
    border-color: var(--ash);
    background: var(--muted);
}

.cp-dropbox-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--muted);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ash);
}

.cp-dropbox-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-dropbox-label {
    font-size: 13px;
    color: var(--text);
    font-weight: 400;
}

.cp-dropbox-url {
    font-size: 11px;
    color: var(--dim);
}

.cp-dropbox-arrow {
    font-size: 18px;
    color: var(--dim);
    transition: transform 0.25s ease, color 0.25s ease;
}

.cp-dropbox-card:hover .cp-dropbox-arrow {
    transform: translateX(4px);
    color: var(--text);
}


/* ── TIMELINE ── */


/* ── UPDATES ── */


/* ── EMPTY STATE (legacy helper — prefer the .gr-empty primitive below) ── */
.cp-empty {
    padding: var(--gr-space-8) 0;
    text-align: center;
    color: var(--dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gr-space-3);
}
.cp-empty p { font-size: var(--gr-font-base); }


/* ── PILL BUTTONS (header) ── */
.cp-header-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.cp-header-actions { display: flex; align-items: center; gap: 8px; }
.cp-pill-btn {
    display: inline-block; padding: 10px 24px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; border-radius: 50px; transition: all 0.25s;
    background: var(--text, #1a1a1a); color: var(--bg, #f5f2ee);
}
.cp-pill-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.cp-pill-outline {
    background: transparent; color: var(--text, #1a1a1a);
    border: 1px solid var(--line, rgba(0,0,0,0.12));
}
.cp-pill-outline:hover { border-color: var(--text, #1a1a1a); }


/* ── INVOICES ── */
.cp-invoice-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.cp-invoice-header .cp-section-title { margin-bottom: 0; }
.cp-invoice-outstanding {
    font-size: 10px; font-weight: 600; color: #b8685a;
    background: rgba(184,104,90,0.08); padding: 3px 10px;
    border-radius: 20px;
}
.cp-invoice-list { display: flex; flex-direction: column; gap: 4px; }
.cp-invoice-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--line, rgba(0,0,0,0.05));
    transition: background 0.15s; gap: 12px;
}
.cp-invoice-row:hover { background: var(--bg-dark, rgba(0,0,0,0.02)); }
.cp-invoice-info { display: flex; flex-direction: column; gap: 2px; }
.cp-invoice-desc { font-size: 13px; font-weight: 500; color: var(--text, #1a1a1a); }
.cp-invoice-meta { font-size: 10px; color: var(--dim, rgba(0,0,0,0.4)); }
.cp-invoice-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cp-invoice-amount { font-size: 14px; font-weight: 600; color: var(--text, #1a1a1a); font-variant-numeric: tabular-nums; }
.cp-invoice-status { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-invoice-summary {
    display: flex; justify-content: space-between;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
    font-size: 11px; color: var(--dim, rgba(0,0,0,0.45));
}

/* ── INFO CARD ── */
.cp-info-card {
    background: var(--bg-dark, rgba(0,0,0,0.02));
    border: 1px solid var(--line, rgba(0,0,0,0.06));
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 32px;
}
.cp-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cp-info-col { display: flex; flex-direction: column; gap: 12px; }
.cp-info-item { display: flex; flex-direction: column; gap: 2px; }
.cp-info-label {
    font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--dim, rgba(0,0,0,0.35));
}
.cp-info-value { font-size: 13px; color: var(--text, #1a1a1a); }
.cp-info-value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line, rgba(0,0,0,0.1)); }
.cp-info-value a:hover { border-color: var(--text); }
.cp-info-dropbox {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cp-dropbox-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--dim, rgba(0,0,0,0.45));
    text-decoration: none; transition: color 0.2s;
}
.cp-dropbox-link:hover { color: var(--text); }

/* ── BILLING CARD (editable) ── */
.cp-billing-card {
    background: var(--bg-dark, rgba(0,0,0,0.02));
    border: 1px solid var(--line, rgba(0,0,0,0.06));
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 32px;
}
.cp-billing-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 16px;
}
.cp-section-title--plain { border: none; padding-bottom: 0; margin-bottom: 4px; }
.cp-billing-sub {
    font-size: 12px; color: var(--dim, rgba(0,0,0,0.45));
    margin: 0;
}
.cp-billing-status {
    flex-shrink: 0;
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cp-billing-status[data-state="incomplete"] {
    color: #b8685a; background: rgba(184,104,90,0.06); border-color: rgba(184,104,90,0.18);
}
.cp-billing-status[data-state="complete"] {
    color: #5fa86a; background: rgba(95,168,106,0.06); border-color: rgba(95,168,106,0.18);
}
.cp-billing-banner {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: rgba(232,112,48,0.06);
    border: 1px solid rgba(232,112,48,0.15);
    border-radius: 8px;
    font-size: 12.5px; color: #8d4a1e;
    line-height: 1.5;
}
.cp-billing-form { display: block; }
.cp-billing-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px 16px;
}
.cp-billing-field { display: flex; flex-direction: column; gap: 6px; }
.cp-billing-field--full { grid-column: 1 / -1; }
.cp-billing-field--city { grid-column: 1 / 2; }
.cp-billing-field--postal { grid-column: 2 / 3; }
.cp-billing-field label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--dim, rgba(0,0,0,0.45));
}
.cp-billing-optional {
    font-weight: 400; letter-spacing: 0; text-transform: none;
    color: var(--dim, rgba(0,0,0,0.35));
}
.cp-billing-field input, .cp-billing-field select {
    appearance: none; -webkit-appearance: none;
    width: 100%; padding: 10px 12px;
    font: inherit; font-size: 13.5px;
    color: var(--text, #1a1a1a);
    background: #fff;
    border: 1px solid var(--line, rgba(0,0,0,0.1));
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-billing-field input:focus, .cp-billing-field select:focus {
    outline: none;
    border-color: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.cp-billing-field input::placeholder { color: rgba(0,0,0,0.25); }
.cp-billing-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.cp-billing-legacy {
    grid-column: 1 / -1;
    margin-top: 4px; padding: 10px 12px;
    background: rgba(0,0,0,0.025);
    border: 1px dashed var(--line, rgba(0,0,0,0.12));
    border-radius: 6px;
}
.cp-billing-legacy-label {
    display: block;
    font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--dim, rgba(0,0,0,0.4));
    margin-bottom: 4px;
}
.cp-billing-legacy pre {
    margin: 0; font-family: inherit; font-size: 12px;
    color: var(--text-mid, #555); white-space: pre-wrap;
}
.cp-billing-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cp-billing-msg { font-size: 12px; color: var(--dim, rgba(0,0,0,0.5)); }
.cp-billing-msg[data-state="success"] { color: #5fa86a; }
.cp-billing-msg[data-state="error"]   { color: #b8685a; }
.cp-billing-msg[data-state="pending"] { color: var(--text-mid, #555); }
.cp-info-dropbox--billing {
    margin: 18px -28px -24px;
    padding: 14px 28px;
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
    background: rgba(0,0,0,0.02);
    border-radius: 0 0 12px 12px;
}
@media (max-width: 600px) {
    .cp-billing-grid { grid-template-columns: 1fr; }
    .cp-billing-field--city, .cp-billing-field--postal { grid-column: 1 / -1; }
    .cp-billing-header { flex-direction: column; align-items: flex-start; }
}

/* ── TWO COLUMN LAYOUT ── */
.cp-two-col {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px;
}
@media (max-width: 800px) { .cp-two-col { grid-template-columns: 1fr; } }

/* ── PROJECT CARDS (enhanced) ── */
.cp-project-card {
    display: flex; align-items: stretch;
    background: var(--bg, #fff);
    border: 1px solid var(--line, rgba(0,0,0,0.06));
    border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: all 0.2s;
    overflow: hidden;
    margin-bottom: 8px;
}
.cp-project-card:hover { border-color: var(--dim, rgba(0,0,0,0.15)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.cp-project-card-bar { width: 4px; flex-shrink: 0; }
.cp-project-card-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cp-project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-project-card-title { font-size: 14px; font-weight: 500; color: var(--text, #1a1a1a); }

.cp-project-card-date { font-size: 11px; color: var(--dim, rgba(0,0,0,0.4)); }
.cp-project-card-files { font-size: 10px; color: var(--dim, rgba(0,0,0,0.35)); }
.cp-project-card-arrow {
    display: flex; align-items: center; padding: 0 16px;
    font-size: 16px; color: var(--dim, rgba(0,0,0,0.2));
    transition: color 0.2s;
}
.cp-project-card:hover .cp-project-card-arrow { color: var(--text, #1a1a1a); }

/* ── FILE ROWS (compact) ── */
.cp-files-list { display: flex; flex-direction: column; gap: 4px; }
.cp-file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--line, rgba(0,0,0,0.04));
    transition: background 0.15s;
}
.cp-file-row:hover { background: var(--bg-dark, rgba(0,0,0,0.02)); }
.cp-file-row-icon { width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-dark, rgba(0,0,0,0.03)); display: flex; align-items: center; justify-content: center; }
.cp-file-row-icon img { width: 100%; height: 100%; object-fit: cover; }
.cp-file-ext-badge { font-size: 8px; font-weight: 700; color: var(--dim); letter-spacing: 0.05em; }
.cp-file-row-info { flex: 1; display: flex; flex-direction: column; }
.cp-file-row-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-file-row-meta { font-size: 10px; color: var(--dim); }
.cp-file-dl {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--dim); font-size: 14px;
    transition: all 0.15s; flex-shrink: 0;
}
.cp-file-dl:hover { border-color: var(--text); color: var(--text); }

/* ── PORTAL FOOTER ── */
.cp-footer {
    margin-top: 80px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    text-align: center;
}

.cp-footer-link {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim);
    transition: color 0.2s;
}

.cp-footer-link strong {
    font-weight: 500;
    color: var(--ash);
}

.cp-footer-link:hover {
    color: var(--text);
}


/* ── BREADCRUMB ── */
.cp-breadcrumb {
    display: inline-block;
    font-size: 11px;
    color: var(--dim);
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.cp-breadcrumb:hover {
    color: var(--text);
}


/* ── CLIENT INFO BAR ── */
.cp-info-bar {
    display: flex;
    gap: 40px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cp-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-info-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim);
}

.cp-info-value {
    font-size: 13px;
    color: var(--text);
}


/* ── QUOTES LIST ── */
.cp-quotes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-quote-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
}

.cp-quote-card:hover {
    border-color: var(--ash);
    transform: translateY(-1px);
}

.cp-quote-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-quote-card-ref {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text);
}


.cp-quote-card-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cp-quote-card-date {
    font-size: 10px;
    color: var(--dim);
}

.cp-status-quote-received  { background: var(--muted); color: var(--dim); }
.cp-status-quote-in_review { background: rgba(232, 146, 124, 0.15); color: var(--salmon); }
.cp-status-quote-quoted    { background: rgba(57, 255, 20, 0.1); color: var(--fluo); }
.cp-status-quote-accepted  { background: rgba(57, 255, 20, 0.15); color: var(--fluo); }


/* ── YEAR GROUPS ── */
.cp-year-group {
    margin-bottom: 28px;
}

.cp-year-group:last-child {
    margin-bottom: 0;
}

.cp-year-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--ash);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}


/* ── SHARED FOLDERS ── */
.cp-folders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ── PROJECT LIST (Client page) ── */
.cp-projects-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-project-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
}

.cp-project-card:hover {
    border-color: var(--ash);
    transform: translateY(-1px);
}

.cp-project-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-project-card-title {
    font-size: 14px;
    font-weight: 500;
}

.cp-project-card-date {
    font-size: 11px;
    color: var(--dim);
}


/* ── RESPONSIVE ── */
@media (max-width: 700px) {
    .cp-header {
        flex-direction: column;
        gap: 16px;
        padding: 32px 0 28px;
    }

    .cp-header-right {
        padding-top: 0;
    }

    

.cp-dropbox-card {
        padding: 18px;
        gap: 14px;
    }

    .cp-grid {
        gap: 36px;
    }
}
/* === Greatime sync additions === */


.cp-file-row-pending {
    opacity: 0.6;
}
.cp-file-row-pending .cp-file-row-meta {
    color: #c49234;
    font-style: italic;
}
.cp-footer-sync {
    margin-left: 16px;
    font-size: 12px;
    color: #8b8fa8;
    opacity: 0.7;
}

/* === 10-stage phase bar (cp-phases-10) === */


@media (max-width: 1100px) {
    /* On narrow / tablet / mobile: stack vertically — much more readable for 10 stages */
    


/* Highlight the active row a little */
    

}

/* On really narrow screens (phones), make the column more compact */


/* === Stage-change rows in unified Updates feed === */


/* === Restructured layout (2026-04-18) === */

/* Header meta row (status pill + last activity) */
.cp-header-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cp-last-activity { font-size: 12px; color: var(--dim, #8b8fa8); }

/* Big folder button in header */


/* Project history sidebar block */
.cp-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-history-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
    font-size: 13px;
}
.cp-history-row:last-child { border-bottom: none; }

.cp-history-label { font-weight: 500; color: var(--text, #1a1a1a); }
.cp-history-date { font-size: 11px; color: var(--dim, #8b8fa8); }

/* Files & folders block: primary dropbox card stands out */
.cp-dropbox-card-primary {
    border: 1px solid var(--text, #1a1a1a) !important;
    background: rgba(0,0,0,0.02);
}
.cp-dropbox-meta { font-size: 11px; color: var(--dim, #8b8fa8); display: block; margin-top: 2px; }
.cp-files-subhead {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim, #8b8fa8);
    margin: 16px 0 8px;
    font-weight: 500;
}

/* Time & cost block */
.cp-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cp-time-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: rgba(0,0,0,0.03); border-radius: 8px; }
.cp-time-value { font-size: 22px; font-weight: 600; color: var(--text, #1a1a1a); }
.cp-time-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim, #8b8fa8); }

/* === Restructured header (2026-04-18 v2) === */
/* (canonical .cp-title now defined once in the project-page polish pass below) */
.cp-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 0;
}
/* Inline Project folder link (replaces the big dark button for better rhythm) */


.cp-folder-inline-arrow { opacity: 0.5; font-size: 12px; }

/* === Phase bar summary row === */


/* === Mobile phase bar: horizontal scroll, auto-center active === */


/* ════════════════════════════════════════════════════════════
   CLIENT PROJECT PAGE — EDITORIAL REDESIGN (2026-04-18 v3)
   Restores big title, kills cramped layout, adds breathing room.
   ════════════════════════════════════════════════════════════ */

/* Reset prior compact-header overrides */
.cp-header { margin-bottom: var(--gr-space-9); }

/* superseded */

/* Header title — sans, moderate size (back to the original clean look) */
.cp-header .cp-title {
    font-family: var(--font, 'Inter', sans-serif) !important;
    font-size: clamp(22px, 2.4vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    margin: 12px 0 16px !important;
    font-weight: 600;
    color: var(--text);
    max-width: 24ch;
}
.cp-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.cp-header-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.cp-breadcrumb {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim, rgba(0,0,0,0.45));
    text-decoration: none;
    transition: color 0.15s ease;
}
.cp-breadcrumb:hover { color: var(--salmon, #c0624e); }

/* Header meta — last activity inline, no divider (Stage section already has one) */
.cp-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 24px;
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
    font-size: 13px;
    color: var(--text);
    max-width: 720px;
}
.cp-meta-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim, rgba(0,0,0,0.45));
    margin-right: 4px;
}
/* Hide the inline folder link in header — it lives in the sidebar */

/* ── PHASE BAR — editorial numeric + single thin progress line ── */


/* Single thin progress bar with positioned nodes */


.cp-phases-node.is-done {
    background: var(--stage-color);
    border-color: var(--stage-color);
}
.cp-phases-node.is-active {
    width: 14px;
    height: 14px;
    background: var(--stage-color);
    border: 2px solid var(--bg, #f5f2ee);
    box-shadow: 0 0 0 1.5px var(--stage-color), 0 0 0 6px rgba(192, 98, 78, 0.08);
    z-index: 2;
}

/* Phase labels positioned under each node */


.cp-phases-label.is-done { color: var(--text); opacity: 0.55; }
.cp-phases-label.is-active {
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.14em;
}

/* ── Section spacing throughout ── */
.cp-section {
    margin-bottom: var(--gr-space-8);     /* 48px */
}

/* Canonical section title — one declaration. Built on --gr-* tokens.
   Also serves as the .gr-section-title primitive for the app.
   Modifiers: .cp-section-title--plain, .cp-section-sub, .cp-section-count. */
.cp-section-title,
.gr-section-title {
    display: flex;
    align-items: center;
    gap: var(--gr-space-3);
    font-family: inherit;
    font-size: var(--gr-font-sm);
    line-height: var(--gr-lh-sm);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    font-weight: 500;
    margin: 0 0 var(--gr-space-5);
    padding-bottom: var(--gr-space-3);
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.cp-section-title--plain,
.gr-section-title--plain {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: var(--gr-space-3);
}

/* ── Updates feed: more breathing room ── */


/* ── Project history: clean typographic timeline (no bullets) ── */
.cp-history-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: hist;
}
.cp-history-row {
    display: grid !important;
    grid-template-columns: 22px 1fr auto !important;
    align-items: baseline !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.06)) !important;
    font-size: 14px;
    --stage-color: var(--salmon);
    counter-increment: hist;
}
.cp-history-row:first-child { padding-top: 4px !important; }
.cp-history-row:last-child { border-bottom: none !important; }
.cp-history-marker {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color) !important;
    margin: 0 !important;
    align-self: center;
    transform: translateY(-1px);
    flex-shrink: 0;
}
.cp-history-marker::before {
    content: counter(hist, decimal-leading-zero);
    display: none;
}
.cp-history-label {
    font-family: var(--font, 'Inter', sans-serif);
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    letter-spacing: -0.005em;
}
.cp-history-date {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--dim, rgba(0,0,0,0.45)) !important;
    font-feature-settings: "tnum" 1;
}

/* ── Time & cost: editorial numerics ── */
.cp-time-section .cp-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
}
.cp-time-section .cp-time-grid-single {
    grid-template-columns: 1fr;
}
.cp-time-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cp-time-stat:last-child { border-right: none; }
.cp-time-grid-single .cp-time-stat { border-right: none; }
.cp-time-value {
    font-family: var(--display, Georgia, serif) !important;
    font-size: 38px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.cp-time-unit {
    font-size: 24px;
    color: var(--dim, rgba(0,0,0,0.45));
    margin-left: 2px;
    font-weight: 400;
}
.cp-time-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--dim, rgba(0,0,0,0.5)) !important;
    font-weight: 500;
}

/* ── Files & folders polish ── */
.cp-folders-section .cp-dropbox-card { margin-bottom: 8px; }
.cp-files-subhead { margin: 28px 0 12px !important; }

/* ── Responsive: tablet & mobile ── */
@media (max-width: 900px) {
    .cp-header { margin-bottom: var(--gr-space-8); }
    .cp-header .cp-title { margin: 12px 0 20px !important; }
    


/* Phase labels: hide all except active and adjacent on small screens */
    
.cp-phases-label.is-active {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0.02em;
        white-space: normal;
        text-align: center;
        max-width: 110px;
    }
    
    .cp-section { margin-bottom: var(--gr-space-7); }
}

@media (max-width: 560px) {
    .cp-header .cp-title { font-size: clamp(28px, 8vw, 36px) !important; }
    


.cp-time-value { font-size: 30px !important; }
    .cp-time-unit { font-size: 18px; }
    .cp-time-section .cp-time-grid { grid-template-columns: 1fr; }
    .cp-time-stat { border-right: none; border-bottom: 1px solid var(--line, rgba(0,0,0,0.06)); }
    .cp-time-stat:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════════
   V4 — Soft pills back, messaging, no-raw aesthetic
   ════════════════════════════════════════════════════════════ */

/* Kill the editorial numeric stage UI from v3 */

/* ── Stage: big soft pill + count + collapsible roadmap ── */
.cp-stage {
    margin: 0 0 64px;
    padding: 28px 0 0;
    border-top: 1px solid var(--line, rgba(0,0,0,0.08));
}
.cp-stage-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cp-stage-count {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--dim, rgba(0,0,0,0.5));
    font-variant-numeric: tabular-nums;
}

.cp-stage-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line, rgba(0,0,0,0.12));
    background: transparent;
    border-radius: 999px;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim, rgba(0,0,0,0.55));
    cursor: pointer;
    transition: all 0.15s ease;
}
.cp-stage-toggle:hover { color: var(--text); border-color: rgba(0,0,0,0.25); }
.cp-stage-toggle-arrow { transition: transform 0.2s ease; }
.cp-stage.is-expanded .cp-stage-toggle-arrow { transform: rotate(180deg); }

.cp-stage-roadmap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-stage.is-expanded .cp-stage-roadmap {
    max-height: 600px;
}
.cp-stage-roadmap-list {
    list-style: none !important;
    padding: 24px 0 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.cp-stage-roadmap-item {
    --stage-color: var(--salmon);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    font-size: 12px;
    color: var(--dim, rgba(0,0,0,0.5));
    transition: all 0.15s ease;
}
.cp-stage-roadmap-item.is-done {
    color: var(--text);
    background: color-mix(in srgb, var(--stage-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--stage-color) 18%, transparent);
}
.cp-stage-roadmap-item.is-active {
    color: var(--stage-color);
    background: color-mix(in srgb, var(--stage-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--stage-color) 35%, transparent);
    font-weight: 600;
}
.cp-stage-roadmap-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--line, rgba(0,0,0,0.2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bg, #f5f2ee);
}
.cp-stage-roadmap-item.is-done .cp-stage-roadmap-dot {
    background: var(--stage-color);
    border-color: var(--stage-color);
}
.cp-stage-roadmap-item.is-active .cp-stage-roadmap-dot {
    background: var(--stage-color);
    border-color: var(--stage-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 22%, transparent);
}
.cp-stage-roadmap-label {
    font-family: var(--font, 'Inter', sans-serif);
    line-height: 1.2;
}

/* (canonical .cp-section-title now defined once, near the top — with gap + flex already baked in) */
.cp-section-count {
    display: inline-block;
    margin-left: auto;
    padding: 2px var(--gr-space-2);
    border-radius: var(--gr-radius-pill);
    background: var(--line, rgba(0,0,0,0.08));
    font-size: var(--gr-font-xs);
    letter-spacing: var(--gr-tracking-wide);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

/* ── Messages (alerts with read receipts) ── */
.cp-messages { display: flex; flex-direction: column; gap: 14px; }
.cp-message {
    position: relative;
    padding: 18px 20px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--salmon, #c0624e) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--salmon, #c0624e) 20%, transparent);
    border-left-width: 3px;
    transition: background 0.25s ease;
}
.cp-message.is-unread {
    background: color-mix(in srgb, var(--salmon, #c0624e) 10%, transparent);
}
.cp-message.is-unread::before {
    content: '';
    position: absolute;
    top: 18px; right: 16px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--salmon, #c0624e);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--salmon) 25%, transparent);
}
.cp-message-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.cp-message-from {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--salmon, #c0624e);
    font-weight: 600;
}
.cp-message-date {
    font-size: 11px;
    color: var(--dim, rgba(0,0,0,0.5));
    letter-spacing: 0.04em;
}
.cp-message-body {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}
.cp-message-body p { margin: 0; }
.cp-message-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--salmon, #c0624e) 18%, transparent);
    font-size: 11px;
    color: var(--dim, rgba(0,0,0,0.5));
    display: flex;
    align-items: center;
    gap: 6px;
}
.cp-message-read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dim, rgba(0,0,0,0.5));
    letter-spacing: 0.02em;
}
.cp-message-read svg { flex-shrink: 0; }
.cp-message-unread {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--salmon, #c0624e);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Remove old alert treatment from the updates feed since it's now in Messages */


/* ── Mobile: stage stacks, pill full width ── */
@media (max-width: 640px) {
    .cp-stage { margin-bottom: 40px; padding-top: 20px; }
    .cp-stage-main { gap: 10px; }
    .cp-stage-toggle { margin-left: 0; }
    .cp-stage-roadmap-list { grid-template-columns: 1fr; }
    .cp-message { padding: 14px 16px 12px; }
    .cp-message.is-unread::before { top: 14px; right: 12px; }
}

/* ════════════════════════════════════════════════════════════
   V5 — Stage as horizontal pill-chain (supersedes v4 stage UI)
   Inspired by release-pipeline dashboards
   ════════════════════════════════════════════════════════════ */

/* v4 stage UI is the chosen design — keep visible (no display:none) */
/* Hide the v5 chain UI instead */

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE PILL PRIMITIVE — .gr-stage-pill (also aliased as .cp-stage-pill)
   Shared across portal + app. Three sizes (xs/sm/default) on the same shape.

   Default `--stage-color` is canonical accent; consumers override it inline:
     <span class="gr-stage-pill" style="--stage-color: var(--gr-stage-in-progress)">In progress</span>

   Variant helper classes auto-set --stage-color from the gr-stage-* tokens:
     <span class="gr-stage-pill is-stage-in-progress">In progress</span>
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-stage-pill,
.gr-stage-pill {
    --stage-color: var(--gr-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--gr-space-2);
    padding: 6px var(--gr-space-3) 6px var(--gr-space-3);
    border-radius: var(--gr-radius-pill);
    background: color-mix(in srgb, var(--stage-color) 14%, transparent);
    color: var(--stage-color);
    font-family: inherit;
    font-size: var(--gr-font-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--gr-tracking-normal);
    border: 1px solid color-mix(in srgb, var(--stage-color) 25%, transparent);
    text-transform: none;
    white-space: nowrap;
}
/* sizes */
.cp-stage-pill-sm,
.gr-stage-pill-sm {
    padding: 4px var(--gr-space-3) 4px var(--gr-space-2);
    gap: var(--gr-space-1);
    font-size: var(--gr-font-xs);
}
.gr-stage-pill-xs {                     /* tray-density (Greatime app) */
    padding: 2px var(--gr-space-2);
    gap: var(--gr-space-1);
    font-size: 9px;
    border-radius: var(--gr-radius-sm);
}
/* dot inside the pill */
.cp-stage-pill-dot,
.gr-stage-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--stage-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 18%, transparent);
    flex-shrink: 0;
}
.cp-stage-pill-sm .cp-stage-pill-dot,
.gr-stage-pill-sm .gr-stage-pill-dot { width: 6px; height: 6px; }
.gr-stage-pill-xs .gr-stage-pill-dot { width: 5px; height: 5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 18%, transparent); }

/* helper variants — auto-set --stage-color from the shared palette */
.is-stage-briefing        { --stage-color: var(--gr-stage-briefing); }
.is-stage-in-progress     { --stage-color: var(--gr-stage-in-progress); }
.is-stage-internal-review { --stage-color: var(--gr-stage-internal-review); }
.is-stage-client-review   { --stage-color: var(--gr-stage-client-review); }
.is-stage-revisions       { --stage-color: var(--gr-stage-revisions); }
.is-stage-approved        { --stage-color: var(--gr-stage-approved); }
.is-stage-delivered       { --stage-color: var(--gr-stage-delivered); }
.is-stage-invoiced        { --stage-color: var(--gr-stage-invoiced); }
.is-stage-paid            { --stage-color: var(--gr-stage-paid); }
.is-stage-archived        { --stage-color: var(--gr-stage-archived); }

/* V5 Stage container — no top border */
.cp-stage {
    --stage-color: var(--salmon, #c0624e);
    margin: 0 0 56px;
    padding: 24px 0 0;
    border-top: none;
}


.cp-stage-count {
    font-size: 11px;
    color: var(--dim, rgba(0,0,0,0.5));
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    letter-spacing: 0.04em;
}


/* Base pill — neutral charcoal, squared-pill like the dashboard */

/* Done: solid dark, filled (like "Develop" "Release candidate" in reference) */

/* Active: brand color with soft glow */

@keyframes cpPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.85); opacity: 0.7; }
}

/* Future: soft outlined, dim */

/* Arrow between pills */

/* Past arrows get emphasis */

/* Mobile: slightly smaller pills + guaranteed scroll */
@media (max-width: 720px) {
    .cp-stage { margin-bottom: 40px; padding-top: 18px; }
    


/* Fade out right edge to hint there's more */
    
}

/* ════════════════════════════════════════════════════════════
   V6 — Folder card refinement (folder name visible)
   ════════════════════════════════════════════════════════════ */
.cp-dropbox-card-primary {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    border: 1px solid var(--line, rgba(0,0,0,0.12)) !important;
    background: rgba(0,0,0,0.025) !important;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cp-dropbox-card-primary:hover {
    background: rgba(0,0,0,0.045) !important;
    border-color: rgba(0,0,0,0.18) !important;
}
.cp-dropbox-card-primary .cp-dropbox-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #0061FF; /* Dropbox blue */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-dropbox-card-primary .cp-dropbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.cp-dropbox-card-primary .cp-dropbox-label {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.cp-dropbox-card-primary .cp-dropbox-meta {
    font-size: 11px !important;
    color: var(--dim, rgba(0,0,0,0.5)) !important;
    letter-spacing: 0.02em;
    margin-top: 0 !important;
    display: block;
}
.cp-dropbox-card-primary .cp-dropbox-arrow {
    font-size: 16px;
    color: var(--dim, rgba(0,0,0,0.4));
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}
.cp-dropbox-card-primary:hover .cp-dropbox-arrow {
    transform: translate(2px, -2px);
    color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   V7 — Messages: sidebar, collapsible cards, mark-on-open
   ════════════════════════════════════════════════════════════ */

/* Hide old message markup from previous versions */
.cp-messages, .cp-message, .cp-message-head, .cp-message-body, .cp-message-foot,
.cp-message-from, .cp-message-date, .cp-message-read, .cp-message-unread,
.cp-message, .cp-messages { display: contents; }

/* Unread badge next to section title */
.cp-msg-unread-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--salmon, #c0624e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: auto !important;
    font-variant-numeric: tabular-nums;
}

/* Message list */
.cp-msgs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 560px;
    overflow-y: auto;
    padding: 2px 2px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.cp-msgs::-webkit-scrollbar { width: 6px; }
.cp-msgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }

/* Card */
.cp-msg {
    border: 1px solid var(--line, rgba(0,0,0,0.10));
    border-radius: 10px;
    background: rgba(255,255,255,0.35);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cp-msg.is-unread {
    border-color: color-mix(in srgb, var(--text, #1a1a1a) 22%, transparent);
    background: #fff;
}
.cp-msg.is-alert {
    border-color: color-mix(in srgb, var(--salmon, #c0624e) 32%, transparent);
}
.cp-msg.is-alert.is-unread {
    border-color: var(--salmon, #c0624e);
    background: color-mix(in srgb, var(--salmon, #c0624e) 5%, #fff);
}
.cp-msg.is-open { background: #fff; border-color: color-mix(in srgb, var(--text, #1a1a1a) 18%, transparent); }

/* Header (always visible) */
.cp-msg-head {
    display: grid;
    grid-template-columns: 22px 1fr 14px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: var(--text);
    transition: background 0.15s ease;
}
.cp-msg-head:hover { background: rgba(0,0,0,0.02); }

/* Status icon col */
.cp-msg-status {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-msg-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line, rgba(0,0,0,0.2));
    transition: all 0.2s ease;
}
.cp-msg.is-unread .cp-msg-dot {
    background: var(--salmon, #c0624e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--salmon) 20%, transparent);
}
.cp-msg.is-read .cp-msg-dot { background: transparent; border: 1.5px solid var(--line, rgba(0,0,0,0.2)); }

/* Summary (preview + meta) */
.cp-msg-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.cp-msg-preview {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.cp-msg.is-read .cp-msg-preview { font-weight: 400; color: var(--dim, rgba(0,0,0,0.6)); }
.cp-msg-meta {
    font-size: 10px;
    color: var(--dim, rgba(0,0,0,0.5));
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

/* Chevron */
.cp-msg-chevron {
    color: var(--dim, rgba(0,0,0,0.35));
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.cp-msg.is-open .cp-msg-chevron { transform: rotate(180deg); }

/* Body (collapsed by default) */
.cp-msg-body-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-msg.is-open .cp-msg-body-wrap {
    max-height: 1200px;
}
.cp-msg-body {
    padding: 4px 14px 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
    margin-top: 2px;
}
.cp-msg-body p { margin: 0 0 10px; }
.cp-msg-body p:last-child { margin-bottom: 0; }
.cp-msg-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0,0,0,0.015);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--dim, rgba(0,0,0,0.55));
    border-top: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cp-msg-from { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.cp-msg-receipt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.cp-msg.is-read .cp-msg-receipt { color: #4a9e6b; }

/* ════════════════════════════════════════════════════════════
   V8 — Updates = auto-events log (activity timeline)
   ════════════════════════════════════════════════════════════ */

.cp-section-sub {
    margin-left: auto;
    font-size: var(--gr-font-xs);
    letter-spacing: var(--gr-tracking-wide);
    color: var(--dim, rgba(0,0,0,0.5));
    text-transform: uppercase;
    font-weight: 400;
}

.cp-events {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
/* Vertical rail connecting events */
.cp-events::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--line, rgba(0,0,0,0.08));
}

.cp-event {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    position: relative;
}
.cp-event-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg, #f5f2ee);
    border: 1px solid var(--line, rgba(0,0,0,0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dim, rgba(0,0,0,0.5));
    z-index: 1;
    position: relative;
    flex-shrink: 0;
}

/* Per-kind accent */
.cp-event-stage .cp-event-icon { color: var(--salmon, #c0624e); border-color: color-mix(in srgb, var(--salmon) 25%, transparent); background: color-mix(in srgb, var(--salmon) 8%, var(--bg, #f5f2ee)); }
.cp-event-export .cp-event-icon { color: #3d7a5a; border-color: color-mix(in srgb, #3d7a5a 25%, transparent); background: color-mix(in srgb, #3d7a5a 8%, var(--bg, #f5f2ee)); }
.cp-event-version .cp-event-icon { color: #7ea8ff; border-color: color-mix(in srgb, #7ea8ff 30%, transparent); background: color-mix(in srgb, #7ea8ff 10%, var(--bg, #f5f2ee)); }

.cp-event-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cp-event-summary {
    font-size: 14px;
    color: var(--text);
    line-height: 1.35;
    font-weight: 500;
}
.cp-event-detail {
    font-size: 11px;
    color: var(--dim, rgba(0,0,0,0.55));
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.cp-event-date {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim, rgba(0,0,0,0.5));
    padding-top: 5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   V9 — Time & Cost spacing fix
   ════════════════════════════════════════════════════════════ */
.cp-time-section .cp-time-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    align-items: stretch;
    padding: 8px 0 4px;
}
.cp-time-section .cp-time-stat {
    padding: 8px 24px 8px 0 !important;
    border-right: 1px solid var(--line, rgba(0,0,0,0.08));
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    gap: 10px !important;
    min-height: 86px;
}
.cp-time-section .cp-time-stat + .cp-time-stat {
    padding: 8px 0 8px 28px !important;
}
.cp-time-section .cp-time-stat:last-child {
    border-right: none;
}
.cp-time-grid-single .cp-time-stat {
    padding: 8px 0 !important;
    border-right: none;
    align-items: flex-start;
}
.cp-time-section .cp-time-value {
    line-height: 1 !important;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.cp-time-section .cp-time-unit {
    font-size: 22px !important;
    font-weight: 400;
    color: var(--dim, rgba(0,0,0,0.45));
    margin: 0 2px;
}

/* Manual note variant inside the unified Updates timeline */
.cp-event-note .cp-event-icon {
    color: var(--text);
    background: var(--bg, #f5f2ee);
    border-color: var(--line, rgba(0,0,0,0.18));
}
.cp-event-note-text,
.cp-event-note .cp-event-body .cp-event-note { display: block; }
.cp-event-note .cp-event-body span.cp-event-note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   V10 — Polish pass: messages + updates
   ════════════════════════════════════════════════════════════ */

/* Empty states (Messages + Updates) */
/* ═══ EMPTY STATE PRIMITIVE ═══
   Unified placeholder for "nothing here yet" sections. Applies to:
     .gr-empty              — generic primitive
     .cp-empty              — legacy portal helper (inherits via .cp-empty, .gr-empty)
     .cp-msgs-empty         — messages sidebar empty
     .cp-updates-empty      — updates column empty
   Use with an icon + <p>Main line<br><span>sub line</span></p> pattern. */
.cp-msgs-empty, .cp-updates-empty, .gr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-7) var(--gr-space-6);
    color: var(--dim, rgba(0, 0, 0, 0.4));
    border: 1px dashed var(--line, rgba(0, 0, 0, 0.1));
    border-radius: var(--gr-radius-md);
    background: rgba(0, 0, 0, 0.01);
}
.cp-msgs-empty svg, .cp-updates-empty svg, .gr-empty svg {
    opacity: 0.45;
}
.cp-msgs-empty p, .cp-updates-empty p, .gr-empty p {
    margin: 0;
    font-size: var(--gr-font-base);
    line-height: var(--gr-lh-base);
    color: var(--text);
}
.cp-msgs-empty p span, .cp-updates-empty p span, .gr-empty p span {
    font-size: var(--gr-font-sm);
    color: var(--dim, rgba(0, 0, 0, 0.45));
    display: block;
    margin-top: var(--gr-space-1);
}

/* Unread badge polish — pulse dot */
.cp-msg-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cp-msg-unread-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
    animation: cpMsgPulse 1.6s ease-out infinite;
}
@keyframes cpMsgPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Smoother card transitions */
.cp-msg {
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.cp-msg:hover { transform: translateY(-1px); }
.cp-msg-head { transition: background 0.15s ease; }
.cp-msg-body-wrap { transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
.cp-msg-chevron { transition: transform 0.25s ease; }

/* Refined alert visual — less screaming */
.cp-msg.is-alert.is-unread {
    background: linear-gradient(180deg, color-mix(in srgb, var(--salmon, #c0624e) 7%, #fff), #fff);
}

/* Receipt color for read state */
.cp-msg.is-read .cp-msg-receipt { color: #4a9e6b; }
.cp-msg.is-read .cp-msg-receipt svg { color: #4a9e6b; }

/* Mobile: tighter cards */
@media (max-width: 720px) {
    .cp-msgs { max-height: none; }
    .cp-msg-head { padding: 14px 14px; }
    .cp-msg-preview { font-size: 14px; }
    .cp-msg-body { padding: 6px 16px 16px; font-size: 14px; }
    .cp-msg-foot { padding: 12px 16px; }
}

/* ── Updates timeline polish ── */
.cp-events-wrap { position: relative; }
.cp-events-bucket {
    margin: 22px 0 8px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dim, rgba(0,0,0,0.4));
    font-weight: 600;
}
.cp-events-bucket:first-child { margin-top: 0; }

/* Tighter rail */
.cp-events::before { left: 9px; top: 14px; bottom: 14px; }
.cp-event { padding: 10px 0; gap: 14px; grid-template-columns: 20px 1fr auto; }
.cp-event-icon { width: 20px; height: 20px; }
.cp-event-summary { font-size: 13.5px; }
.cp-event-note { font-size: 13.5px !important; line-height: 1.5; }
.cp-event-detail { font-size: 11px; opacity: 0.75; }
.cp-event-date {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   V11 — Drop alert visuals, simple read/unread state
   ════════════════════════════════════════════════════════════ */

/* Hide all alert-specific visuals on message cards */
.cp-msg.is-alert,
.cp-msg.is-alert.is-unread {
    background: #fff;
    border-color: var(--line, rgba(0,0,0,0.10)) !important;
}

/* Read/Unread pill in card header */
.cp-msg-state {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.cp-msg-state-unread {
    background: color-mix(in srgb, var(--text, #1a1a1a) 88%, transparent);
    color: #fff;
}
.cp-msg-state-read {
    background: rgba(0,0,0,0.04);
    color: var(--dim, rgba(0,0,0,0.45));
}

/* Unread state on the dot — dim grey when read, salmon when unread */
.cp-msg.is-unread .cp-msg-dot {
    background: var(--salmon, #c0624e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--salmon, #c0624e) 18%, transparent);
}
.cp-msg.is-read .cp-msg-dot {
    background: transparent;
    border: 1px solid var(--line, rgba(0,0,0,0.18));
    box-shadow: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   PROJECT PAGE — POLISH PASS (2026-04-19)
   Targeted visual refinements: tighter type, calmer borders, better rhythm,
   tabular numerics everywhere, smoother hover/focus, refined micro-spacing.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page frame: more generous outer breathing ── */
.cp-dashboard {
    padding-top: var(--gr-space-8);
    padding-bottom: var(--gr-space-9);
    max-width: 1180px;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .cp-dashboard { padding-top: var(--gr-space-6); padding-bottom: var(--gr-space-7); }
}

/* ── Header: clearer hierarchy ── */
.cp-header { padding: 0 0 var(--gr-space-6); }
.cp-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gr-space-5);
}
.cp-header-left { min-width: 0; flex: 1; }
.cp-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--gr-space-1);
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.45));
    margin-bottom: var(--gr-space-3);
    transition: color var(--gr-duration-fast) var(--gr-ease);
}
.cp-breadcrumb:hover { color: var(--text); }
.cp-title {
    font-family: inherit;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.018em;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--gr-space-3);
    /* No truncation. The title gets the full column width and wraps if it
       genuinely doesn't fit at this size. Never an ellipsis with empty
       horizontal space sitting next to it. */
    word-break: normal;
    overflow-wrap: normal;
    max-width: 100%;
}
@media (max-width: 720px) {
    .cp-title { font-size: clamp(22px, 6vw, 28px); }
}
.cp-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gr-space-2) var(--gr-space-4);
}
.cp-last-activity {
    font-size: var(--gr-font-sm);
    color: var(--dim, rgba(0, 0, 0, 0.55));
    font-variant-numeric: tabular-nums;
}
.cp-meta-label {
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.4));
    margin-right: var(--gr-space-1);
}
.cp-header-actions { display: flex; align-items: center; gap: var(--gr-space-2); padding-top: var(--gr-space-1); }

/* ── Stage section ── */
.cp-stage { margin: 0 0 var(--gr-space-8); padding-top: 0; border-top: 0; }
.cp-stage-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gr-space-3);
}
.cp-stage-pill { padding: 6px var(--gr-space-4) 6px var(--gr-space-3); font-size: var(--gr-font-base); }
.cp-stage-pill .cp-stage-pill-dot { width: 8px; height: 8px; }
.cp-stage-count {
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    font-variant-numeric: tabular-nums;
}
.cp-stage-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gr-space-1);
    padding: 6px var(--gr-space-3);
    border-radius: var(--gr-radius-pill);
    background: transparent;
    border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
    color: var(--dim, rgba(0, 0, 0, 0.55));
    font-family: inherit;
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    cursor: pointer;
    transition: all var(--gr-duration-fast) var(--gr-ease);
}
.cp-stage-toggle:hover { color: var(--text); border-color: rgba(0, 0, 0, 0.22); }
.cp-stage-toggle-arrow { transition: transform var(--gr-duration) var(--gr-ease); }
.cp-stage.is-expanded .cp-stage-toggle-arrow { transform: rotate(180deg); }

/* Roadmap when expanded — refined chips */
.cp-stage-roadmap {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--gr-duration-slow) var(--gr-ease);
}
.cp-stage.is-expanded .cp-stage-roadmap { max-height: 600px; }
.cp-stage-roadmap-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gr-space-2);
    padding: var(--gr-space-5) 0 0;
    margin: 0;
    list-style: none;
}
.cp-stage-roadmap-item {
    /* --stage-color is intentionally unset here so .is-stage-* helpers (defined
       earlier in the file) provide the per-stage tint. */
    display: flex;
    align-items: center;
    gap: var(--gr-space-2);
    padding: var(--gr-space-3);
    border-radius: var(--gr-radius-md);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    background: transparent;
    font-size: var(--gr-font-sm);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    transition: all var(--gr-duration-fast) var(--gr-ease);
}
.cp-stage-roadmap-item.is-done {
    border-color: color-mix(in srgb, var(--stage-color) 22%, transparent);
    background: color-mix(in srgb, var(--stage-color) 5%, transparent);
    color: var(--text);
}
.cp-stage-roadmap-item.is-active {
    border-color: var(--stage-color);
    background: color-mix(in srgb, var(--stage-color) 12%, transparent);
    color: var(--stage-color);
    font-weight: 600;
}
.cp-stage-roadmap-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    color: var(--stage-color);
    flex-shrink: 0;
    opacity: 0.55;
}
.cp-stage-roadmap-item.is-done .cp-stage-roadmap-dot,
.cp-stage-roadmap-item.is-active .cp-stage-roadmap-dot {
    opacity: 1;
    background: var(--stage-color);
    border-color: var(--stage-color);
    color: #fff;
}

/* ── Two-column layout: Messages dominant, Updates as info column ── */
.cp-two-col {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
    gap: var(--gr-space-8);
    align-items: start;
}
@media (max-width: 980px) {
    .cp-two-col { grid-template-columns: 1fr; gap: var(--gr-space-7); }
}

/* ── Section title: subtler, more editorial ── */
.cp-section-title {
    font-size: var(--gr-font-xs);
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    margin: 0 0 var(--gr-space-4);
    padding-bottom: var(--gr-space-3);
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.07));
}

/* ── Updates timeline ── */
.cp-events-bucket {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dim, rgba(0, 0, 0, 0.38));
    margin: var(--gr-space-6) 0 var(--gr-space-3);
    font-weight: 500;
}
.cp-events-bucket:first-child { margin-top: 0; }
.cp-events {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.cp-events::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--line, rgba(0, 0, 0, 0.07));
}
.cp-event {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: var(--gr-space-3);
    align-items: flex-start;
    padding: var(--gr-space-3) 0;
    position: relative;
}
.cp-event-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg, #f5f2ee);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dim, rgba(0, 0, 0, 0.5));
    z-index: 1;
    flex-shrink: 0;
}
.cp-event-stage   .cp-event-icon { color: var(--gr-stage-in-progress); border-color: color-mix(in srgb, var(--gr-stage-in-progress) 30%, transparent); background: color-mix(in srgb, var(--gr-stage-in-progress) 8%, var(--bg, #f5f2ee)); }
.cp-event-export  .cp-event-icon { color: var(--gr-stage-delivered);  border-color: color-mix(in srgb, var(--gr-stage-delivered) 30%, transparent); background: color-mix(in srgb, var(--gr-stage-delivered) 8%, var(--bg, #f5f2ee)); }
.cp-event-version .cp-event-icon { color: var(--gr-stage-briefing);   border-color: color-mix(in srgb, var(--gr-stage-briefing) 32%, transparent); background: color-mix(in srgb, var(--gr-stage-briefing) 9%, var(--bg, #f5f2ee)); }
.cp-event-note    .cp-event-icon { color: var(--text); border-color: var(--line, rgba(0, 0, 0, 0.18)); background: var(--bg, #f5f2ee); }
.cp-event-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-event-summary { font-size: var(--gr-font-base); line-height: var(--gr-lh-base); color: var(--text); font-weight: 500; }
.cp-event-detail  { font-size: var(--gr-font-sm); color: var(--dim, rgba(0, 0, 0, 0.55)); }
.cp-event-note .cp-event-body span { font-size: var(--gr-font-base) !important; line-height: var(--gr-lh-base) !important; color: var(--text) !important; font-weight: 400 !important; }
.cp-event-date {
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-wide);
    color: var(--dim, rgba(0, 0, 0, 0.45));
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Messages: softer cards, refined hover ── */
.cp-msgs { display: flex; flex-direction: column; gap: var(--gr-space-2); max-height: 620px; overflow-y: auto; padding-right: 2px; }
.cp-msgs::-webkit-scrollbar { width: 6px; }
.cp-msgs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 999px; }
.cp-msg {
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    border-radius: var(--gr-radius-md);
    background: var(--bg, #f5f2ee);
    overflow: hidden;
    transition: border-color var(--gr-duration) var(--gr-ease), background var(--gr-duration) var(--gr-ease), transform var(--gr-duration-fast) var(--gr-ease), box-shadow var(--gr-duration) var(--gr-ease);
}
.cp-msg:hover {
    border-color: rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
    box-shadow: var(--gr-shadow-2);
}
.cp-msg.is-unread {
    border-color: color-mix(in srgb, var(--text, #1a1a1a) 24%, transparent);
    background: #fff;
}
.cp-msg.is-open { box-shadow: var(--gr-shadow-2); }

.cp-msg-head {
    display: grid;
    grid-template-columns: 20px 1fr 12px;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-3) var(--gr-space-4);
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    transition: background var(--gr-duration-fast) var(--gr-ease);
}
.cp-msg-head:hover { background: rgba(0, 0, 0, 0.015); }
.cp-msg-status { display: inline-flex; align-items: center; justify-content: center; }
.cp-msg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line, rgba(0, 0, 0, 0.18));
    transition: all var(--gr-duration) var(--gr-ease);
}
.cp-msg.is-unread .cp-msg-dot {
    background: var(--gr-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gr-accent) 18%, transparent);
}
.cp-msg.is-read .cp-msg-dot {
    background: transparent;
    border: 1.5px solid var(--line, rgba(0, 0, 0, 0.18));
}

.cp-msg-summary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-msg-preview {
    font-size: var(--gr-font-base);
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-msg.is-read .cp-msg-preview { font-weight: 400; color: var(--dim, rgba(0, 0, 0, 0.62)); }
.cp-msg-meta {
    display: flex;
    align-items: center;
    gap: var(--gr-space-2);
    font-size: var(--gr-font-xs);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-wide);
    font-variant-numeric: tabular-nums;
}
.cp-msg-state {
    padding: 1px var(--gr-space-2);
    border-radius: var(--gr-radius-pill);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.cp-msg-state-unread {
    background: color-mix(in srgb, var(--text, #1a1a1a) 88%, transparent);
    color: #fff;
}
.cp-msg-state-read {
    background: rgba(0, 0, 0, 0.04);
    color: var(--dim, rgba(0, 0, 0, 0.45));
}
.cp-msg-chevron {
    color: var(--dim, rgba(0, 0, 0, 0.32));
    transition: transform var(--gr-duration) var(--gr-ease);
}
.cp-msg.is-open .cp-msg-chevron { transform: rotate(180deg); }

.cp-msg-body-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--gr-duration-slow) var(--gr-ease);
}
.cp-msg.is-open .cp-msg-body-wrap { max-height: 1200px; }
.cp-msg-body {
    padding: var(--gr-space-1) var(--gr-space-4) var(--gr-space-4);
    font-size: var(--gr-font-base);
    line-height: 1.6;
    color: var(--text);
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.06));
    margin-top: 2px;
}
.cp-msg-body p { margin: 0 0 var(--gr-space-2); }
.cp-msg-body p:last-child { margin-bottom: 0; }
.cp-msg-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gr-space-3) var(--gr-space-4);
    background: rgba(0, 0, 0, 0.018);
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-wide);
    color: var(--dim, rgba(0, 0, 0, 0.55));
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.06));
}
.cp-msg-receipt { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.cp-msg.is-read .cp-msg-receipt { color: #4a9e6b; }

.cp-msg-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gr-space-1);
    margin-left: auto;
    padding: 2px var(--gr-space-2);
    border-radius: var(--gr-radius-pill);
    background: var(--gr-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.cp-msg-unread-pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    animation: cpMsgPulse 1.6s ease-out infinite;
}

/* ── Project history: more breathing, refined markers ── */
.cp-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.cp-history-row {
    /* --stage-color comes from .is-stage-* helpers on each row */
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-3) 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.05));
    font-size: var(--gr-font-base);
}
.cp-history-row:last-child { border-bottom: none; }
.cp-history-row:first-child { padding-top: 4px; }
.cp-history-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 16%, transparent);
    margin: 0 auto;
}
.cp-history-label { font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.cp-history-date {
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-wide);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    font-variant-numeric: tabular-nums;
}

/* ── Files & folders: more presence on primary card ── */
.cp-folders-section .cp-dropbox-card {
    display: flex;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-4);
    margin-bottom: var(--gr-space-2);
    border-radius: var(--gr-radius-md);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.10));
    background: var(--bg, #f5f2ee);
    text-decoration: none;
    color: var(--text);
    transition: all var(--gr-duration-fast) var(--gr-ease);
}
.cp-folders-section .cp-dropbox-card:hover {
    border-color: rgba(0, 0, 0, 0.18);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: var(--gr-shadow-1);
}
.cp-dropbox-card-primary {
    background: rgba(0, 0, 0, 0.02) !important;
}
.cp-dropbox-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--gr-radius-sm);
    background: #0061FF;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-dropbox-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cp-dropbox-label {
    font-size: var(--gr-font-base);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-dropbox-meta {
    font-size: var(--gr-font-xs);
    color: var(--dim, rgba(0, 0, 0, 0.5));
    letter-spacing: var(--gr-tracking-wide);
    text-transform: uppercase;
}
.cp-dropbox-arrow {
    font-size: 14px;
    color: var(--dim, rgba(0, 0, 0, 0.4));
    transition: transform var(--gr-duration-fast) var(--gr-ease), color var(--gr-duration-fast) var(--gr-ease);
}
.cp-folders-section .cp-dropbox-card:hover .cp-dropbox-arrow { transform: translate(2px, -2px); color: var(--text); }

.cp-files-subhead {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dim, rgba(0, 0, 0, 0.4));
    margin: var(--gr-space-5) 0 var(--gr-space-2);
    font-weight: 500;
}
.cp-files-list { display: flex; flex-direction: column; gap: 1px; }
.cp-file-row {
    display: grid;
    grid-template-columns: 32px 1fr 22px;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-2) var(--gr-space-3);
    border-radius: var(--gr-radius-sm);
    transition: background var(--gr-duration-fast) var(--gr-ease);
}
.cp-file-row:hover { background: rgba(0, 0, 0, 0.025); }
.cp-file-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--gr-radius-sm);
    background: rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cp-file-row-icon img { width: 100%; height: 100%; object-fit: cover; }
.cp-file-ext-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dim, rgba(0, 0, 0, 0.55));
}
.cp-file-row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-file-row-name {
    font-size: var(--gr-font-sm);
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-file-row-meta {
    font-size: var(--gr-font-xs);
    color: var(--dim, rgba(0, 0, 0, 0.45));
    letter-spacing: var(--gr-tracking-wide);
    text-transform: uppercase;
}
.cp-file-row-pending { opacity: 0.65; }
.cp-file-row-pending .cp-file-row-meta { color: var(--gr-stage-client-review); font-style: normal; }
.cp-file-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--gr-radius-sm);
    color: var(--dim, rgba(0, 0, 0, 0.4));
    text-decoration: none;
    transition: all var(--gr-duration-fast) var(--gr-ease);
    opacity: 0;
}
.cp-file-row:hover .cp-file-dl { opacity: 1; }
.cp-file-dl:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }

/* ── Time & cost: bigger, more elegant ── */
.cp-time-section { padding-top: var(--gr-space-2); }
.cp-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: var(--gr-space-3) 0; }
.cp-time-grid-single { grid-template-columns: 1fr; }
.cp-time-stat {
    display: flex;
    flex-direction: column;
    gap: var(--gr-space-2);
    padding: 0 var(--gr-space-5);
    border-right: 1px solid var(--line, rgba(0, 0, 0, 0.07));
    min-height: 84px;
    justify-content: center;
}
.cp-time-stat:first-child { padding-left: 0; }
.cp-time-stat:last-child  { border-right: none; padding-right: 0; }
.cp-time-grid-single .cp-time-stat { border-right: none; padding-left: 0; padding-right: 0; }

.cp-time-value {
    font-family: inherit;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums lining-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.cp-time-unit {
    font-size: 18px;
    font-weight: 400;
    color: var(--dim, rgba(0, 0, 0, 0.45));
}
.cp-time-label {
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim, rgba(0, 0, 0, 0.5));
}

/* ── Invoices: cleaner row layout ── */
.cp-invoice-list { display: flex; flex-direction: column; gap: 1px; }
.cp-invoice-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-3);
    border-radius: var(--gr-radius-sm);
    transition: background var(--gr-duration-fast) var(--gr-ease);
}
.cp-invoice-row:hover { background: rgba(0, 0, 0, 0.025); }
.cp-invoice-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-invoice-desc { font-size: var(--gr-font-sm); color: var(--text); font-weight: 500; }
.cp-invoice-meta { font-size: var(--gr-font-xs); color: var(--dim); letter-spacing: var(--gr-tracking-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.cp-invoice-right { display: inline-flex; align-items: center; gap: var(--gr-space-3); }
.cp-invoice-amount { font-size: var(--gr-font-base); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-invoice-status { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.cp-invoice-summary {
    display: flex;
    justify-content: space-between;
    margin-top: var(--gr-space-3);
    padding-top: var(--gr-space-3);
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.07));
    font-size: var(--gr-font-sm);
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}

/* ── Footer: calmer ── */
.cp-footer {
    margin-top: var(--gr-space-9);
    padding-top: var(--gr-space-5);
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gr-space-3);
    font-size: var(--gr-font-xs);
    color: var(--dim, rgba(0, 0, 0, 0.45));
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
}
.cp-footer-link { color: inherit; text-decoration: none; transition: color var(--gr-duration-fast) var(--gr-ease); }
.cp-footer-link:hover { color: var(--text); }
.cp-footer-link strong { font-weight: 600; letter-spacing: 0.16em; }
.cp-footer-sync { font-variant-numeric: tabular-nums; }

/* ── Empty states: refine borders ── */
.cp-msgs-empty, .cp-updates-empty, .gr-empty {
    padding: var(--gr-space-7) var(--gr-space-5);
    border: 1px dashed var(--line, rgba(0, 0, 0, 0.10));
    background: transparent;
}


/* ════════════════════════════════════════════════════════════════════════════
   POLISH PASS V2 (2026-04-19)
   - Messages = primary column → bigger cards, clear hover affordances
   - Updates  = secondary info column → denser, subtler rail
   - Stage section → cleaner alignment
   - Hero KPIs → larger
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Stage section: cleaner three-part layout, count center-aligned ── */
.cp-stage-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gr-space-4);
}
.cp-stage-pill { padding: 7px var(--gr-space-4) 7px var(--gr-space-3); font-size: var(--gr-font-base); }
.cp-stage-count {
    text-align: center;
    font-size: var(--gr-font-xs);
    text-transform: uppercase;
    letter-spacing: var(--gr-tracking-caps);
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}
.cp-stage-toggle { margin-left: 0; }   /* grid handles placement now */
@media (max-width: 720px) {
    .cp-stage-main { grid-template-columns: 1fr; }
    .cp-stage-count { text-align: left; }
}

/* ── Updates timeline: secondary, denser ── */
.cp-updates-section .cp-events { margin-top: var(--gr-space-2); }
.cp-events-bucket {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dim, rgba(0, 0, 0, 0.36));
    margin: var(--gr-space-5) 0 var(--gr-space-2);
    font-weight: 600;
}
.cp-events-bucket:first-child { margin-top: var(--gr-space-2); }
.cp-event { padding: var(--gr-space-2) 0; gap: var(--gr-space-2); grid-template-columns: 18px 1fr auto; }
.cp-event-icon { width: 18px; height: 18px; }
.cp-event-summary { font-size: var(--gr-font-sm); font-weight: 500; }
.cp-event-detail  { font-size: 10px; opacity: 0.7; }
.cp-event-note .cp-event-body span { font-size: var(--gr-font-sm) !important; line-height: 1.5 !important; }
.cp-event-date { font-size: 10px; padding-top: 3px; }
.cp-events::before { left: 8px; top: 12px; bottom: 12px; }

/* ── Messages: PRIMARY surface, presence + breathing ── */
.cp-messages-section { padding-top: 0; }
.cp-msgs {
    gap: var(--gr-space-3);
    max-height: none;          /* let it breathe — it's the main column */
    overflow-y: visible;
}
.cp-msg {
    border-radius: var(--gr-radius-lg);
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--line, rgba(0, 0, 0, 0.07));
}
.cp-msg.is-unread {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: var(--gr-shadow-1);
}
.cp-msg.is-open {
    box-shadow: var(--gr-shadow-2);
    background: #fff;
}
.cp-msg-head {
    grid-template-columns: 24px 1fr 14px;
    gap: var(--gr-space-3);
    padding: var(--gr-space-4) var(--gr-space-5);
}
.cp-msg-dot { width: 9px; height: 9px; }
.cp-msg.is-unread .cp-msg-dot {
    background: var(--gr-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--gr-accent) 16%, transparent);
}
.cp-msg-summary { gap: 6px; }
.cp-msg-preview {
    font-size: var(--gr-font-md);    /* 15px — bigger than before */
    line-height: 1.4;
    font-weight: 500;
}
.cp-msg.is-read .cp-msg-preview { font-weight: 400; }
.cp-msg-meta { gap: var(--gr-space-3); }

.cp-msg-body {
    padding: var(--gr-space-2) var(--gr-space-5) var(--gr-space-5);
    font-size: var(--gr-font-md);
    line-height: 1.65;
}
.cp-msg-foot {
    padding: var(--gr-space-3) var(--gr-space-5);
    background: rgba(0, 0, 0, 0.014);
}

/* Hover: bigger, more present */
.cp-msg:hover {
    transform: translateY(-2px);
    box-shadow: var(--gr-shadow-2);
    border-color: rgba(0, 0, 0, 0.18);
}

/* ── Messages section title gets a count badge styled boldly ── */
.cp-messages-section .cp-section-title { margin-bottom: var(--gr-space-4); }
.cp-msg-unread-badge {
    padding: 3px var(--gr-space-2);
    font-size: 10px;
    letter-spacing: 0.06em;
}
.cp-msg-unread-pulse { width: 6px; height: 6px; }

/* ── Project history: compact, secondary ── */
.cp-history-list { gap: 0; }
.cp-history-row {
    grid-template-columns: 12px 1fr auto;
    padding: var(--gr-space-2) 0;
    font-size: var(--gr-font-sm);
    border-bottom: none;        /* let breathing space do the dividing */
}
.cp-history-row + .cp-history-row { border-top: 1px solid var(--line, rgba(0,0,0,0.04)); }
.cp-history-marker {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 20%, transparent);
}
.cp-history-label { font-size: var(--gr-font-sm); font-weight: 500; }
.cp-history-date  { font-size: 10px; }

/* ── Files: cleaner card ── */
.cp-folders-section .cp-dropbox-card {
    padding: var(--gr-space-4);
    border-radius: var(--gr-radius-md);
    background: var(--bg, #f5f2ee);
    border-color: var(--line, rgba(0, 0, 0, 0.10));
}
.cp-folders-section .cp-dropbox-card:hover {
    background: #fff;
    box-shadow: var(--gr-shadow-1);
}
.cp-dropbox-card-primary { background: rgba(0, 0, 0, 0.02) !important; }

/* ── Time & cost: hero KPIs ── */
.cp-time-section { padding: var(--gr-space-2) 0; }
.cp-time-stat {
    padding: var(--gr-space-4) var(--gr-space-5);
    gap: var(--gr-space-2);
    min-height: 96px;
    border-right: 1px solid var(--line, rgba(0, 0, 0, 0.06));
}
.cp-time-stat:first-child { padding-left: 0; }
.cp-time-stat:last-child  { border-right: none; padding-right: 0; }
.cp-time-value {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -0.025em;
}
.cp-time-unit { font-size: 22px; }
.cp-time-label {
    font-size: 10px;
    letter-spacing: 0.14em;
}