/* EVO TrustGuard — /css/_lib/asgn-collapse.css
 *
 * Purpose:     THE collapsible assignment-block header. Turns the shared
 *              `.asgn-header` into a three-line tap target (positional
 *              title + service type / location or TBD / date range) and
 *              supplies the `.asgn-collapse` wrapper the four assignment
 *              forms expand and collapse. CSS twin of
 *              /js/_lib/asgn-collapse.js.
 * Scope:       Loaded by three consumer pages —
 *                • client-detail.html   (Services inline form, prefix svcf,
 *                                        AND #svcModal, prefix asgn; plus
 *                                        the inline form's Billing SECTION
 *                                        block, prefix svcfSec)
 *                • purchased-lead.html  (Services-tab CIS form, prefix asgn;
 *                                        plus the Client Information Sheet
 *                                        and Billing SECTION blocks, prefix
 *                                        cisSec)
 *                • create-lead.html     (prefix asgn)
 *              SECTION blocks (SVC-FOLD1-FIX, C164) are `.asgn-block`s built
 *              by window.TG.asgnCollapse.sectionHtml(). They use these rules
 *              UNCHANGED, with no section-specific declaration, so they fold
 *              exactly like assignment blocks. `.asgn-section` is a JS hook
 *              only.
 *              Load AFTER tokens.css + base.css and AFTER
 *              /css/_lib/cis-form.css where that file is present, BEFORE
 *              the page-scoped CSS (LOCKED C82-A cascade).
 * Edit policy: Header + collapse rules ONLY. The block chrome
 *              (`.asgn-block`, `.asgn-body`, `.asgn-footer`, the buttons)
 *              stays where it is — in /css/_lib/cis-form.css for the two
 *              pages that link it and in /css/page-create-lead.css for the
 *              one that does not. Do not migrate that chrome here; see the
 *              divergence note below.
 * Cross-ref:   SVC-UI1 (C159) shipped this collapse scoped to
 *              `#servicesList` in page-client-detail.css; SVC-UI2 promoted
 *              it here so all four surfaces share ONE implementation and
 *              deleted the scoped copies.
 * Version:     v1 — created C159 (2026-09-10), SVC-UI2.
 */

/* ── WHY THIS IS ITS OWN MODULE AND NOT PART OF cis-form.css ──────────────
   create-lead.html does NOT link /css/_lib/cis-form.css — it keeps its own
   copies of the `.asgn-*` / `.cis-*` rules in page-create-lead.css. Putting
   the collapse in cis-form.css would therefore have reached three of the
   four surfaces and silently skipped create-lead.

   Linking cis-form.css into create-lead was MEASURED at the SVC-UI2
   pre-exec and rejected: 15 selectors overlap the two files with DIFFERENT
   declarations, and deleting create-lead's copies would have moved nine
   controls (.asgn-add-btn, .asgn-btn-dup, .asgn-btn-rm, .asgn-inline-save,
   .asgn-inline-cancel, .cis-ab-btn, .cis-save-btn, .cis-select and the
   .asgn-body inputs) off the newer --btn-* token system back to
   cis-form.css's older literal-colour treatment — a visible redesign of a
   page this sprint was not redesigning. Merely ADDING the link was no
   cleaner: of the 65 selectors that would newly apply, `[data-theme="dark"]
   .asgn-btn-dup` (0,2,0) outranks create-lead's own `.asgn-btn-dup`
   (0,1,0), so the Duplicate button's dark treatment would change anyway.

   Sean ruled Route C (SVC-UI2 Q2): a focused module carrying ONLY the
   collapse, linked by all three pages, clashing with none of them. That
   divergence between cis-form.css and page-create-lead.css is real and
   still outstanding — it is simply not this sprint's to retire. */

/* ── THE HEADER IS THE COLLAPSE CONTROL ───────────────────────────────────
   `.asgn-header`'s own background, border and `.asgn-title` colour are
   token-driven in /css/_lib/cis-form.css (and its page-create-lead.css
   twin) and already swap for dark; only what this module ADDS needs a dark
   pass, at the bottom of this file. */
.asgn-header { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; gap: var(--space-3); min-height: 44px; box-sizing: border-box; }
.asgn-header-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.asgn-header:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* LINE 1 — the positional label and the service type on ONE line.
   SVC-UI2 (Sean-ruled) REVISES the SVC-UI1 decision that REPLACED the
   service-type label with "Assignment N": both appear now. The earlier
   objection was to adding a redundant LINE — on the existing title line the
   type costs zero vertical space, and a fixed three-line shape the eye
   learns once beats variance-optimised density on a repeated list.
   `.asgn-title` is a flex row rather than a text node because its two halves
   are painted independently; `:empty` collapses the gap when no service type
   is picked yet, so line 1 reads "Assignment 3" with no trailing space.

   LINE 1 MUST STAY ONE LINE — the whole point of the fixed shape is that the
   eye learns where to look, and a wrapped title makes that block four lines
   tall while its neighbours are three. So the positional half never shrinks
   (`flex-shrink: 0`) and the type half truncates instead: `min-width: 0` lets
   it shrink inside the flex row, and `white-space: nowrap` is what actually
   ARMS `text-overflow: ellipsis` — without it the declaration is inert and the
   text wraps (frontend-agent catch at the SVC-UI2 close). No `flex-wrap` on
   the row, for the same reason. Not reachable with today's 8-value taxonomy
   (the longest label, "Workplace violence", fits at 375px) — this is the
   guard for the next label someone adds. */
.asgn-title { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.asgn-title-n { flex-shrink: 0; }
.asgn-title-type { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asgn-title-type:empty { display: none; }

/* LINES 2 + 3 — location (or literally "TBD") and the date range. Both are
   secondary weight; the location wraps because a full street address is
   long on a 375px viewport, the date range never needs to. */
.asgn-subtitle { font-size: var(--text-sm); color: var(--mid); line-height: 1.35; word-break: break-word; font-weight: var(--weight-regular); }
.asgn-dates { font-size: var(--text-sm); color: var(--mid); line-height: 1.35; font-weight: var(--weight-regular); }

.asgn-chevron { width: 16px; height: 16px; stroke: var(--mid); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.2s; }
.asgn-block.expanded .asgn-chevron { transform: rotate(180deg); }

/* ── THE COLLAPSE WRAPPER ─────────────────────────────────────────────────
   Class-is-truth / inline-is-transient, the same contract `.svc-details`
   carries: the EXPANDED state is `max-height: none`, so a block that grows
   while open (vehicle fields, extra schedule rows, the add-address form) can
   never clip itself, and the 300ms animation is driven by an inline
   max-height that window.TG.asgnCollapse.animateMaxHeight() sets for the
   duration of the transition and clears on transitionend.

   `display: none` is NOT usable here: every surface's payload builder must
   read collapsed blocks. `max-height: 0` keeps `.value` readable — and is
   exactly why the JS also sets `inert`, which is what actually removes the
   hidden controls from the tab order and the accessibility tree. */
.asgn-collapse { max-height: 0; overflow: hidden; transition: max-height 300ms ease-in-out; }
.asgn-block.expanded .asgn-collapse { max-height: none; overflow: visible; }

/* Dark parity for the three things this module adds. The header surface and
   the `.asgn-title` colour are inherited from the block chrome and already
   swap, so only the secondary text and the chevron stroke need pinning. */
[data-theme="dark"] .asgn-title-type { color: var(--text-muted); }
[data-theme="dark"] .asgn-subtitle { color: var(--text-muted); }
[data-theme="dark"] .asgn-dates { color: var(--text-muted); }
[data-theme="dark"] .asgn-chevron { stroke: var(--text-muted); }

/* Reduced motion. Matches the sibling /css/_lib/ modules (upgrade.css,
   email-compose.css). Safe to suppress: window.TG.asgnCollapse's
   animateMaxHeight() is TIMER-BACKED as well as transitionend-backed
   (transitionend never fires when the two endpoints are equal), so the inline
   max-height / overflow scaffolding is still cleared and the class still ends
   up the source of truth. The collapse itself keeps working — it just snaps
   instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .asgn-collapse { transition: none; }
  .asgn-chevron { transition: none; }
}