/* 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 ELEMENT rule below (the card hairline, the native-select chevron, the reduced-motion
      echo) carries :not(<fence> *). The opt-in grammar classes (.pl-area-*, .pl-ftabs / .pl-ftab, .pl-fchip,
      .pl-areaband) carry no fence clause: a template stamps them on chrome only, and they must NEVER be
      stamped on an element inside the paper 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; }

/* 8. EVERY NATIVE DROPDOWN HAS ROOM INSIDE ITS BOX (owner note 37, 2026-10-19: "the Net 30 terms dropdown rides the line
   of its box; many of the dropdowns are too close"). Chrome draws its native arrow hard against the right border whatever
   padding-right says, so a pass on padding alone moves nothing. Every app select now draws the chevron the contracts page
   already ships (.ct-select): appearance none, two token triangles 12px in from the right, 32px of right padding so text
   never runs under it, 12px on the left, a line-height that keeps the text off the border. Widths, heights and layouts
   are the page's own; only the inner spacing changes. The chevron is the ink-2 token, so dark flips with the theme.
   !important on the chevron's background longhands only: several pages repaint a select with the `background:` shorthand
   at a higher rank (dark-theme blocks), which would wipe the chevron and leave an arrowless box. Excluded: list boxes
   ([multiple], [size]), pl-select's hidden native, selects already drawn by hand (borderless inline pickers, the PDF bay's
   field chips, .ct-select), the print simulation and the paper fence. Dense per-row selects (11-12px tag-sized controls in
   kit rows, section heads and toolbars) take the compact spacing: 10px left, 26px right, a smaller chevron. The contracts
   bay's Auto-fill "From <person>" picker (#pdf-autosrc-sel) is a standalone control, so it takes the full 12px inset (note 65). */
:root[data-pl-look="v2"] select:where(:not([multiple], [size], .pl-select-native, .ct-select, .local-gear-dept-select, .pdf-fi, .pdf-frole select, .pl-print-sim *, :is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) {
  -webkit-appearance: none; appearance: none;
  padding-left: 12px; padding-right: 32px; line-height: 1.3;
  background-image: linear-gradient(45deg, transparent 50%, var(--pl-ink-2) 50%), linear-gradient(135deg, var(--pl-ink-2) 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
:root[data-pl-look="v2"] select:is(.kit-status-select, .kit-cat-select, .kit-line-dept-select, .cr-daytype-select, .ext-home-select, .head-actions select, .bm-market-bar select, .pkv-pick select, .cr-1099-topline select):where(:not([multiple], [size], .pl-select-native, .pl-print-sim *, :is(.preview-shell, .cr-cs-doc, .cr-memo, .hp-sheet) *)) {
  padding-left: 10px; padding-right: 26px;
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55% !important;
  background-size: 4px 4px, 4px 4px !important;
}

}

@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; }
}