/* ──────────────────────────────────────────────────────────────────
   Renovation Pro · Standardized Category Selector (RPCS)
   V9.1 only.

   A reusable category bar that lives in a dedicated, pre-reserved
   space directly under the page header. Hover the header to fade
   the buttons in (smooth, subtle); click the bar to freeze it open;
   pick a category to collapse the bar and promote the choice into
   the top-right of the header as a title chip. If a view exposes
   sub-categories, a second row of pills appears in the same style
   as soon as a top-level category is picked.

   Style/behaviour modeled after the V9.1 measurement category bar
   (mv2-cat-bar) so the look is already familiar across the app.
   ────────────────────────────────────────────────────────────────── */

/* The shell carves out its own permanent slice of vertical space.
   Pills are always visible; only the sub-row animates (when a
   category is selected and sub-categories become available). */
.rpcs-shell {
    --rpcs-pad-x: 24px;
    --rpcs-row-h: 44px;
    --rpcs-stagger: 14ms;

    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px var(--rpcs-pad-x) 0;
    /* Sit flush at the very top of .page-content. The negative top/
       horizontal margins re-claim the page-content's own padding so
       the bar truly hugs the underside of the sticky header. */
    margin: -56px -64px 14px;
    position: relative;
    z-index: 5;
    background: transparent;
    /* Don't intercept clicks on the empty padding strip. The pills
       opt back into pointer-events when they're visible. */
    pointer-events: none;
}

.rpcs-row {
    pointer-events: auto;
    height: var(--rpcs-row-h);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}

.rpcs-row::-webkit-scrollbar { display: none; }

/* The sub-row is collapsed by default (zero-height, no pointer
   events). When the parent shell flips to .has-subs the row
   smoothly expands to its full row height. */
.rpcs-row-subs {
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.rpcs-shell.has-subs .rpcs-row-subs {
    height: var(--rpcs-row-h);
    padding: 2px 0;
    pointer-events: auto;
}

/* Pills — only buttons are animated. Mirrors mv2-pill nearly
   exactly so the visual language is consistent between Tasks,
   Measurements, Materials, Timeline, and Scope. */
.rpcs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 234, 216, 0.65);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;

    /* Always visible — no hover reveal needed. */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.rpcs-pill i { font-size: 10px; opacity: 0.7; }

.rpcs-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
    color: #f0ead8;
}

.rpcs-pill:active { transform: scale(0.96); }

.rpcs-pill.is-active {
    background: rgba(196, 144, 104, 0.18);
    border-color: rgba(196, 144, 104, 0.55);
    color: #C49068;
    box-shadow: 0 0 0 3px rgba(196, 144, 104, 0.10);
}

.rpcs-pill.is-active i { opacity: 1; color: #C49068; }

.rpcs-pill-count {
    font-size: 10px;
    opacity: 0.55;
    margin-left: 3px;
    font-weight: 700;
}

.rpcs-pill.is-active .rpcs-pill-count { opacity: 0.85; }

/* Sub-pills — same style, slightly subdued so they read as a
   secondary layer beneath the main category row. */
.rpcs-pill-sub {
    font-size: 11px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
}

.rpcs-pill-sub.is-active {
    background: rgba(196, 144, 104, 0.18);
    border-color: rgba(196, 144, 104, 0.45);
    color: #C49068;
}

/* Header title chip — appears in the page header's right slot the
   moment a category is selected. Click the chip body to re-open
   the picker; click the × to clear the selection entirely. */
.rpcs-header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(196, 144, 104, 0.38);
    background: rgba(196, 144, 104, 0.10);
    color: #C49068;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease,
        opacity 0.22s ease;
    font-family: inherit;
    flex-shrink: 0;
    /* Soft entrance so the promotion from picker → header chip
       doesn't pop. */
    animation: rpcsChipIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rpcsChipIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.rpcs-header-title:hover {
    background: rgba(196, 144, 104, 0.18);
    border-color: rgba(196, 144, 104, 0.60);
}

.rpcs-header-title:active { transform: scale(0.98); }

.rpcs-header-title i { font-size: 12px; opacity: 0.9; }

.rpcs-header-title-sep {
    color: rgba(196, 144, 104, 0.45);
    font-weight: 500;
    font-size: 12px;
    margin: 0 -1px;
}

.rpcs-header-title-x {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 144, 104, 0.20);
    color: #C49068;
    font-size: 9px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    margin-left: 2px;
}

.rpcs-header-title-x:hover { background: rgba(196, 144, 104, 0.36); }
.rpcs-header-title-x:active { transform: scale(0.92); }

/* The mount point lives at the very top of .page-content. Reserve
   no extra space here — the .rpcs-shell uses negative margins to
   tuck itself flush against the sticky header. */
.rpcs-mount { display: block; }


/* ── Sub-row pill entrance ──────────────────────────────────────
   Fires only when .subs-is-opening is present, so repeated
   re-renders (count updates) don't re-animate pills that were
   already visible. Each pill staggers in using --rpcs-i. */
@keyframes rpcsSubPillIn {
    from { opacity: 0; transform: translateX(-8px) scale(0.92); }
    to   { opacity: 1; transform: none; }
}

.rpcs-shell.has-subs.subs-is-opening .rpcs-row-subs .rpcs-pill {
    animation: rpcsSubPillIn 0.30s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--rpcs-i, 0) * 38ms);
}


/* ── Task-card filter animations ────────────────────────────────
   .v91-hiding  — exit animation (card is about to become display:none)
   .v91-entering — entrance animation (card just became visible)
   .v91-section-entering — category section fades back in

   Duration of .v91-hiding MUST match FILTER_EXIT_MS in app.js (190ms). */

@keyframes rpcsCardOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

@keyframes rpcsCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes rpcsSectionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.tasks-container .task-card.v91-hiding {
    animation: rpcsCardOut 0.19s cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

.tasks-container .task-card.v91-entering {
    animation: rpcsCardIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--rpcs-ci, 0) * 32ms);
}

.tasks-container .category-section.v91-section-entering {
    animation: rpcsSectionIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .rpcs-shell.has-subs.subs-is-opening .rpcs-row-subs .rpcs-pill,
    .tasks-container .task-card.v91-hiding,
    .tasks-container .task-card.v91-entering,
    .tasks-container .category-section.v91-section-entering {
        animation: none !important;
        transition: none !important;
    }
}