/* ==========================================================================
   Feature stage marks
   --------------------------------------------------------------------------
   The small pieces a story adds on top of the authored artwork: rings,
   spinners, packets, pens, badges. Every one is created by feature-stage.js
   with [data-stage-overlay] and removed when its scene stops, so none of
   this paints in the static, reduced-motion, or printed page.
   ========================================================================== */
.ppc {
    --stage-ink: var(--title-color, #19364b);
    --stage-paper: var(--background-brightest, #fffdf7);
    --stage-gold: var(--ppc-highlight, #ebcd91);
    --stage-gold-deep: var(--stage-gold-deep-color, #b28b47);
    --stage-success: var(--stage-success-color, #2b7658);
    --stage-info: var(--stage-info-color, #315c74);
    --stage-muted: var(--stage-muted-color, #5f7381);
    --stage-shadow: 0 6px 16px rgb(19 48 65 / 18%);
}
.ppc .stage-anchor { position: relative; }
.ppc [data-stage-overlay] { pointer-events: none; }

/* Example statuses that change during a story. */
.ppc .stage-label { transition: color 240ms ease-out; }
.ppc .stage-label[data-stage-state="pending"] { color: var(--stage-muted); }
.ppc .stage-label[data-stage-state="complete"] { color: var(--stage-success); }

/* A short expanding ring: a tap, a ping, a confirmation. */
.ppc .stage-ring {
    position: absolute;
    inset: -3px;
    border: 2px solid var(--stage-info);
    border-radius: inherit;
    opacity: 0;
    z-index: 2;
}
.ppc .stage-ring--gold { border-color: var(--stage-gold-deep); }
.ppc .stage-ring--success { border-color: var(--stage-success); }
.ppc .stage-ring--info { border-color: var(--stage-info); }
.ppc i > .stage-ring,
.ppc :is(.invoice-payment__check, .portal-update__icon, .aw-agent__avatar, .crm-focus__avatar, .ps-checkbook__icon, .portal-calendar) > .stage-ring { border-radius: 50%; }

/* Working and done, on round badges. */
.ppc .stage-spinner {
    position: absolute;
    inset: -5px;
    border: 2.5px solid transparent;
    border-top-color: var(--stage-gold);
    border-right-color: var(--stage-gold);
    border-radius: 50%;
    opacity: 0;
}
.ppc .stage-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgb(43 118 88 / 35%);
    opacity: 0;
}
.ppc .stage-check { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ppc .stage-check path {
    fill: none;
    stroke: var(--stage-paper);
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A highlight drawn under a line of text. */
.ppc .stage-sweep {
    position: absolute;
    inset: auto 0 -3px;
    height: 2px;
    border-radius: var(--border-radius-half, 5px);
    background: var(--stage-gold);
    transform-origin: left center;
}
.ppc .stage-progress {
    position: absolute;
    inset: auto 12px 0;
    height: 3px;
    border-radius: var(--border-radius-half, 5px);
    background: var(--stage-gold);
    transform-origin: left center;
    opacity: 0;
}
.ppc .stage-loadbar {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--stage-gold);
    transform-origin: left center;
    opacity: 0;
}
.ppc .stage-clip { overflow: hidden; }
.ppc .stage-sway { transform-origin: 50% 100%; }
.ppc .stage-bar { transform-origin: left center; }
.ppc .stage-bar-v { transform-box: fill-box; transform-origin: center; }

/* Typing indicator. */
.ppc .stage-typing {
    position: absolute;
    inset: 0 auto auto 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 1.4em;
    opacity: 0;
}
.ppc .stage-typing > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stage-muted);
    animation: stage-typing 1s ease-in-out infinite;
}
.ppc .stage-typing > i:nth-child(2) { animation-delay: 150ms; }
.ppc .stage-typing > i:nth-child(3) { animation-delay: 300ms; }
@keyframes stage-typing {
    0%, 60%, 100% { translate: 0 0; opacity: .45; }
    30% { translate: 0 -4px; opacity: 1; }
}

/* CRM */
.ppc .crm-token.stage-lifted { position: relative; z-index: 3; }
/* Landed: above the lanes it crossed, under its opened record. */
.ppc .crm-token.stage-token-active { position: relative; z-index: 1; border-color: var(--stage-gold-deep); box-shadow: 0 0 0 1px var(--stage-gold); }

/* Documents: the pen that writes the signature, and the filed copy. */
.ppc .stage-pen__body { fill: var(--stage-ink); stroke: var(--stage-paper); stroke-width: .8; }
.ppc .stage-pen__nib { fill: var(--stage-gold); }
.ppc .docs-signature.stage-awaiting { box-shadow: inset 0 0 0 1.5px var(--stage-gold); }
.ppc .stage-flyer {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 28px;
    height: 34px;
    margin: -17px 0 0 -14px;
    border: 1px solid var(--border-color, #e7e7e7);
    border-radius: var(--border-radius-half, 5px);
    background: var(--stage-paper);
    box-shadow: var(--stage-shadow);
    color: var(--error-color, #a50b00);
    font-size: 14px;
}

/* Invoices: waiting for payment, then paid. */
@media (prefers-reduced-motion: no-preference) {
    .ppc .invoice-payment__check { transition: background-color 300ms ease-out; }
}
.ppc .invoice-payment__check.stage-check-waiting { background: var(--stage-ink); }
.ppc .stage-check-amount {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--stage-paper);
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1;
}

/* Job Site Camera: viewfinder, shutter, saved badge. */
.ppc .stage-viewfinder {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: repeating-linear-gradient(135deg, rgb(25 54 75 / 6%) 0 8px, rgb(25 54 75 / 10%) 8px 16px);
    color: var(--stage-muted);
    font-size: 20px;
}
.ppc .stage-corners { position: absolute; z-index: 2; overflow: visible; }
.ppc .stage-corners path { fill: none; stroke: var(--stage-gold); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ppc .stage-flash { position: absolute; z-index: 3; background: var(--stage-paper); opacity: 0; }
.ppc .stage-badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 12px);
    padding: 4px 8px;
    border-radius: var(--border-radius-pill, 9999px);
    background: var(--stage-paper);
    box-shadow: var(--stage-shadow);
    color: var(--stage-success);
    font-size: 12px; /* noqa: UI-002 - metadata badge on a photo thumbnail */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* Insights: the current month keeps a quiet beacon. */
.ppc .stage-beacon {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--stage-info);
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce), print {
    .ppc [data-stage-overlay] { display: none; }
}

/* Scheduling: the crew's drive, drawn over the artwork's own route. */
.ppc .stage-route { position: absolute; z-index: 1; overflow: visible; pointer-events: none; }
.ppc .stage-route__mask { fill: none; stroke: white; stroke-linejoin: round; }
/* The street past the painted route: grey while ahead, gold once driven,
   matching the artwork's own route on either side of it. */
.ppc .stage-route__plan, .ppc .stage-route__driven { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ppc .stage-route__plan { stroke: rgb(214 220 230); filter: drop-shadow(0 0 4px rgb(214 220 230 / 70%)); }
.ppc .stage-route__driven { stroke: rgb(255 236 170); filter: drop-shadow(0 0 5px rgb(255 168 40 / 95%)); }
.ppc .stage-route__body, .ppc .stage-route__ping { transform-box: fill-box; transform-origin: center; }
.ppc .stage-route__halo { fill: rgb(235 205 145 / 45%); }
.ppc .stage-route__dot { fill: var(--primary-color, #123456); stroke: var(--stage-paper); stroke-width: 5; }
.ppc .stage-route__truck { fill: var(--stage-paper); font: 900 24px 'Font Awesome 6 Free'; }
.ppc .stage-route__ping { fill: none; stroke: var(--stage-success); stroke-width: 6; opacity: 0; }
.ppc .stage-progress--eta { inset: auto 16px 8px; }
/* The phone card is tighter: the bar runs along its bottom edge, clear of the text. */
.ppc .pm-dispatch__location .stage-progress--eta { inset: auto 12px 0; border-radius: var(--border-radius-half, 5px) var(--border-radius-half, 5px) 0 0; }
.ppc .stage-progress--eta.is-done { background: var(--stage-success); transition: background-color 300ms ease-out; }

/* Scheduling: the dispatch chip reads as a status at every step. */
.ppc :is(.ppf-chip, .pm-dispatch__status).stage-label[data-stage-state="pending"] { color: var(--stage-muted); background: var(--light-darker-color, #e9ecef); }
.ppc :is(.ppf-chip, .pm-dispatch__status).stage-label[data-stage-state="complete"] { color: var(--stage-paper); background: var(--stage-success); }

/* Ongoing life once a story has played. */
.ppc .stage-unread {
    position: absolute;
    top: -3px;
    right: -9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-gold);
}
.ppc .stage-ink-glint {
    fill: none;
    stroke: var(--stage-paper);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: .07 1.2;
    opacity: 0;
    mix-blend-mode: overlay;
}
/* Light travels along the current stage's bar only, never over its label. */
.ppc .stage-shimmer {
    position: absolute;
    inset: 0 auto auto 0;
    width: 40%;
    height: 4px;
    border-radius: var(--border-radius-half, 5px);
    background: linear-gradient(90deg, transparent, rgb(235 205 145 / 55%), transparent);
}
.ppc .portal-progress__current { position: relative; overflow: hidden; }
/* Invoices: the PAID stamp, carried from the payment to the office's copy. */
.ppc .stage-stamp-flyer { position: absolute; z-index: 5; top: 0; left: 0; box-sizing: border-box; margin: 0; text-align: center; background: var(--ppc-surface, #fff); opacity: 0; pointer-events: none; box-shadow: 0 14px 24px -10px rgb(22 57 43 / 40%); }