/* pl-areas.css — C2 CLAY: money-area color and the banded-page grammar for the signed-in app.
   Owner pick 2026-10-11. Canon: PL-design/color-c2-clay-build-plan.md section 1e; the tokens it
   reads (--pl-area-*, --pl-band*, --pl-page, --pl-ease, --pl-dur, ...) are defined in pl-system.css.

   WHERE IT LOADS: right after pl-system.css on the 16 signed-in app pages ONLY (home, invoices, app,
   projects, crew, crew-profile, clients, calendar, kit, rentals, contracts, me, notifications, messages,
   profile, jobs). Never on ops-metrics, sign or a public page: pl-system.css and pl-accent.js reach those
   (see the comment at the top of pl-system.css), this file must not. Pinned by tests/areas-css-safety.

   THREE RULES THIS FILE LIVES BY:
   1. NO COLOR LITERALS. Tokens only. A hue lives in pl-system.css next to its contrast proof
      (tests/area-tokens); a rule here that needs a color names the token.
   2. NO PAGE IDS AND NO POSITION. Nothing is found by id or nth-child. A template stamps data-area on the
      element (inv | paid | owed | crew | tax) and adds the pl-area-* / pl-seclabel / pl-ftab / pl-areaband
      classes itself, so a user-rearranged Home can never paint the wrong block.
   3. NOTHING INSIDE THE PAPER FENCE (.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet). No data-area there,
      and every page-wide rule below carries :not(<fence> *).

   EVERY RULE SITS INSIDE @media screen AND UNDER :root[data-pl-look="v2"]. The server PDF renders a
   standalone document that has a bare <html> (no v2 flag) and inlines every readable sheet, and print is not
   screen, so nothing here can reach a printed or PDF page.

   ORDER IS LOAD-BEARING: the card hairline rule sits BEFORE the grammar classes, so a card that wears an
   edge keeps it (equal specificity, later wins). Equipment stays quick (owner 2026-10-11, tests/kit-serious
   180ms budget): .kit-page is excluded from the --pl-dur rule and gets only the shared curve. */

@media screen {

/* 1. AREA LABELLING. The element opts in; descendants read --pl-area (text) and --pl-area-bar (fills, edges). */
:root[data-pl-look="v2"] [data-area="inv"] { --pl-area: var(--pl-area-inv-ink); --pl-area-bar: var(--pl-area-inv-bar); }
:root[data-pl-look="v2"] [data-area="paid"] { --pl-area: var(--pl-area-paid-ink); --pl-area-bar: var(--pl-area-paid-bar); }
:root[data-pl-look="v2"] [data-area="owed"] { --pl-area: var(--pl-area-owed-ink); --pl-area-bar: var(--pl-area-owed-bar); }
:root[data-pl-look="v2"] [data-area="crew"] { --pl-area: var(--pl-area-crew-ink); --pl-area-bar: var(--pl-area-crew-bar); }
:root[data-pl-look="v2"] [data-area="tax"] { --pl-area: var(--pl-area-tax-ink); --pl-area-bar: var(--pl-area-tax-bar); }
:root[data-pl-look="v2"] [data-area] { --pl-area-tint: color-mix(in srgb, var(--pl-area-bar) var(--pl-area-tint-pct), var(--surface)); }

/* 7. PAGE-WIDE. A white ground so the bands read as bands; cards keep a hairline instead of a shadow. */
:root[data-pl-look="v2"] :is(body, .app-main) { background: var(--pl-page); overflow-x: clip; }
:root[data-pl-look="v2"] :is(.card, .f2-card, .f2-attn-card, .f2-truth, .f2-pulse, .f2-job, .otable, .cl-card, .cl-stat, .pcard, .crb):where(:not(:is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) {
  box-shadow: none; border-color: var(--pl-band-line);
}

/* 2. SHARED GRAMMAR (additive classes; they read the area their nearest data-area ancestor set). */
:root[data-pl-look="v2"] .pl-area-ink { color: var(--pl-area); }
:root[data-pl-look="v2"] .pl-area-edge-top { border-top: 3px solid var(--pl-area-bar); }
:root[data-pl-look="v2"] .pl-area-edge-left { box-shadow: inset 4px 0 0 var(--pl-area-bar); }
:root[data-pl-look="v2"] .pl-area-tag { background: var(--pl-area-tint); color: var(--pl-area); }
:root[data-pl-look="v2"] .pl-area-btn {
  color: var(--pl-area); background: transparent;
  border: 1px solid color-mix(in srgb, var(--pl-area-bar) 60%, transparent);
}
:root[data-pl-look="v2"] .pl-area-btn:hover { background: color-mix(in srgb, var(--pl-area-bar) 12%, var(--surface)); }
:root[data-pl-look="v2"] .pl-area-sq::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 7px; vertical-align: 1px; background: var(--pl-area-bar);
}

/* 3. THE OUTLINED SECTION LABEL. Neutral by default; inside a data-area it takes the area tint, ink and outline. */
:root[data-pl-look="v2"] :is(.pl-seclabel, .pl-pagehead .pl-eyebrow) {
  display: inline-flex; align-items: center; width: fit-content; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--pl-label-line); border-radius: 99px; background: transparent;
  font: 700 10.5px/1.15 var(--pl-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pl-ink-2);
}
:root[data-pl-look="v2"] :is([data-area] :is(.pl-seclabel, .pl-pagehead .pl-eyebrow), :is(.pl-seclabel, .pl-pagehead .pl-eyebrow)[data-area]) {
  background: var(--pl-area-tint); color: var(--pl-area);
  border-color: color-mix(in srgb, var(--pl-area-bar) 55%, transparent);
}

/* 4. THE ATTACHED FOLDER TAB. The container must be a flex row; each tab keeps its page's own height and
   44px coarse-pointer floor (no padding or min-height here). The selected tab sits on the container's
   hairline in --pl-ftab-bg (a page sets it to the band the tab joins), with the accent edge on top. */
:root[data-pl-look="v2"] .pl-ftabs {
  align-items: flex-end; gap: 2px; padding: 0; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--pl-band-line);
}
:root[data-pl-look="v2"] .pl-ftab {
  background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
  margin-bottom: -1px; color: var(--pl-ink-2);
}
:root[data-pl-look="v2"] .pl-ftab:hover { background: none; color: var(--pl-accent-ink); }
:root[data-pl-look="v2"] .pl-ftab:is(.active, .on, [aria-pressed="true"], [aria-selected="true"], :has(input:checked)) {
  background: var(--pl-ftab-bg, var(--surface)); border-color: var(--pl-band-line);
  box-shadow: inset 0 2px 0 var(--pl-accent-ink); color: var(--pl-accent-ink);
}

/* 5. A PRESSED FILTER CHIP wears the shared selection tokens (never ink-filled, never the accent text on
   an accent fill: accent ink measures 4.39:1 on the 22% fill, ink-1 on --pl-select-bg passes). */
:root[data-pl-look="v2"] .pl-fchip:is(.on, .active, [aria-pressed="true"]) {
  background: var(--pl-select-bg); border-color: var(--pl-select-edge); color: var(--pl-select-ink);
}

/* 6. THE FULL-BLEED BAND. A 100vw layer behind the section; the content stays in its column.
   --pl-areaband-fill / -top / -bottom are the hooks (Home pulls the layer 12px past its block). */
:root[data-pl-look="v2"] .pl-areaband { position: relative; isolation: isolate; }
:root[data-pl-look="v2"] .pl-areaband::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: var(--pl-areaband-top, 0); bottom: var(--pl-areaband-bottom, 0); left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--pl-areaband-fill, var(--pl-band));
  border-top: 1px solid var(--pl-band-line); border-bottom: 1px solid var(--pl-band-line);
}
:root[data-pl-look="v2"] .pl-areaband.is-hero { --pl-areaband-fill: var(--pl-band-hero); }

/* 7 (cont). ONE CURVE, ONE DURATION; a hover changes color, never position. The paper fence is excluded
   so a call sheet's inputs never animate; .kit-page keeps its own short durations (kit-serious, 180ms)
   and takes only the shared curve. */
:root[data-pl-look="v2"] :is(a, button, [role="tab"], .pl-ftab, .pl-pill, input, select, textarea):where(:not(.kit-page *, :is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) {
  transition: color var(--pl-dur) var(--pl-ease), background-color var(--pl-dur) var(--pl-ease),
              border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease), opacity var(--pl-dur) var(--pl-ease);
}
:root[data-pl-look="v2"] .kit-page :is(a, button, [role="tab"], .pl-ftab, .pl-pill, input, select, textarea) { transition-timing-function: var(--pl-ease); }
:root[data-pl-look="v2"] :is(button, .btn, .f2-btn):is(:hover, :active):where(:not(:is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) { transform: none; }

}

@media screen and (prefers-reduced-motion: reduce) {
:root[data-pl-look="v2"] :is(a, button, [role="tab"], .pl-ftab, .pl-pill, input, select, textarea):where(:not(.kit-page *, :is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) { transition: none; }
}