/* pl-system.css — the shared redesign foundation (Production Desk × Clear Ledger).
   Owner-directed full-site redesign, 2026-08-12. Canon: docs/redesign/ (coverage matrix,
   design system spec, route specs, overlay spec) + the approved concept images.

   THE RULES THIS FILE LIVES BY (spec §1.1 + §8, and the 07-26 scope-correction lesson):
   1. It NEVER redefines an existing token (--bg, --accent, --ink, …). Every --pl-* alias
      resolves through var() to the page's own token, so the existing dark theme, money
      privacy, and per-page palettes keep working untouched. The ONLY new hex values are the
      public-direction action blue and the paper tint, and those carry their own dark values.
   2. Every selector is class-scoped under .pl- (or a state class on a .pl- element). No bare
      tag styling, no id styling — so nothing here can reach #invoice-preview, the call-sheet
      print surface, or any page's existing markup that hasn't opted in.
   3. Pages ADOPT these classes additively (class="na-list pl-action-queue"); ids, hooks,
      data attributes and test-pinned markup never change for styling's sake.
   4. Print: chrome primitives hide themselves under @media print only when marked
      .pl-print-hide; document surfaces are never styled from here at all. */

:root {
  /* Semantic aliases — resolve to the page's own tokens (dark flips automatically). */
  --pl-canvas: var(--bg, #F7F5F0);
  --pl-surface: var(--surface, #FFFFFF);
  --pl-ink: var(--ink, #0A0E1A);
  --pl-muted: var(--ink-muted, #4A5568);
  --pl-faint: var(--ink-light, var(--ink-placeholder, #8A9BB0));
  --pl-navy: var(--accent, #1E3A5F);
  --pl-navy-soft: var(--accent-soft, #3A5A85);
  --pl-brass: var(--warn, #A8701C);
  --pl-success: var(--success, #2E6B4F);
  --pl-danger: var(--danger, #8B1E1E);
  --pl-rule: var(--border, #D8D4CA);
  --pl-rule-strong: var(--rule, #BDB8A8);
  --pl-highlight: var(--highlight, #D4B896);
  /* New values from the approved public direction (own dark definitions below). */
  --pl-action: #2B6EA6;
  --pl-paper: #F5F3EE;
  --pl-shadow-doc: 0 10px 28px rgba(23, 43, 66, 0.08);
  /* Type roles (spec §1.2). Mono inherits JetBrains Mono where a page loads it. */
  --pl-font-display: var(--font-display, 'DM Serif Display', Georgia, serif);
  --pl-font-body: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  --pl-font-mono: var(--font-mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
}
:root[data-theme="dark"] {
  --pl-action: #7FAFD9;
  --pl-paper: #171A22;
  --pl-shadow-doc: 0 10px 28px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pl-action: #7FAFD9;
    --pl-paper: #171A22;
    --pl-shadow-doc: 0 10px 28px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Page anatomy (spec §2.2) ---------- */

/* Route identity: eyebrow + restrained serif title + context line. */
.pl-pagehead { margin: 0 0 22px; }
.pl-pagehead .pl-eyebrow {
  display: block; font: 700 11px/1 var(--pl-font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--pl-faint); margin: 0 0 8px;
}
.pl-pagehead .pl-title {
  font-family: var(--pl-font-display); font-weight: 400; font-size: 2.35rem;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--pl-ink); margin: 0;
}
.pl-pagehead .pl-context {
  margin: 6px 0 0; font-size: 14.5px; color: var(--pl-muted);
}
@media (max-width: 640px) { .pl-pagehead .pl-title { font-size: 1.85rem; } }

/* Selected-project strip: title, phase, dates, one next action. Never mutates by being shown. */
.pl-context-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.pl-context-strip .pl-cs-title {
  font-family: var(--pl-font-display); font-size: 1.25rem; color: var(--pl-ink); margin: 0;
}
.pl-context-strip .pl-cs-meta { font-size: 12.5px; color: var(--pl-muted); }
.pl-context-strip .pl-cs-spacer { margin-left: auto; }

/* ---------- Information patterns (spec §3) ---------- */

/* FinancialBridge: a left-to-right money derivation. Values come from the page's existing
   canonical functions — this is presentation only, never a calculation layer. */
.pl-financial-bridge {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 10px;
  padding: 4px 6px; overflow-x: auto;
}
.pl-bridge-cell {
  flex: 1 1 120px; min-width: 116px; padding: 12px 14px; position: relative;
}
.pl-bridge-cell { position: relative; }
.pl-bridge-cell + .pl-bridge-cell { border-left: 1px solid var(--pl-rule); }
/* Concept (internal-home / internal-finances): Billed→Collected and →Final are transformations
   (arrow); the middle subtractions get a minus. Position-specific to the 5-cell Billed / Collected
   / Crew committed / Project costs / Final shape both concepts draw identically. A bridge with a
   different cell count (e.g. crew.html's 4-cell job-econ strip) simply never matches nth-child(5)
   and renders with no connector glyphs, which is correct — this mark set is specific to that shape. */
/* Scoped to :not(.cr-jobecon): crew.html's 4-cell job-econ strip (Client balance / Crew payables
   / Project costs / Yours after everything) is NOT a left-to-right waterfall the way Home's and
   Finances' 5-cell Billed…Final bridge is — Client balance isn't subtracted to reach the next
   cell — so it deliberately keeps plain dividers, no connector glyphs. */
.pl-financial-bridge:not(.cr-jobecon) .pl-bridge-cell + .pl-bridge-cell::before {
  content: "\2212"; position: absolute; left: -9px; top: 14px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--pl-surface); color: var(--pl-muted);
  font-size: 12px; line-height: 18px; text-align: center;
}
.pl-financial-bridge:not(.cr-jobecon) .pl-bridge-cell:nth-child(2)::before,
.pl-financial-bridge:not(.cr-jobecon) .pl-bridge-cell:nth-child(5)::before { content: "\2192"; }
@media (max-width: 720px) { .pl-bridge-cell::before { display: none; } }
.pl-bridge-cell .pl-bk {
  display: block; font: 700 10.5px/1.3 var(--pl-font-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--pl-faint); margin-bottom: 6px;
}
.pl-bridge-cell .pl-bv {
  display: block;
  font-family: var(--pl-font-mono); font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pl-ink); white-space: nowrap;
}
.pl-bridge-cell .pl-bd { display: block; font-size: 11.5px; color: var(--pl-muted); margin-top: 3px; line-height: 1.45; }
.pl-bridge-cell.is-positive .pl-bv { color: var(--pl-success); }
.pl-bridge-cell.is-owed .pl-bv { color: var(--pl-brass); }
.pl-bridge-cell.is-final .pl-bv { color: var(--pl-navy); }
@media (max-width: 640px) {
  .pl-financial-bridge { flex-direction: column; }
  .pl-bridge-cell + .pl-bridge-cell { border-left: 0; border-top: 1px solid var(--pl-rule); }
}

/* ActionQueue: ranked "what needs attention" rows. Amber means review; red is reserved for
   genuine failure — never for a normal outstanding balance (spec §3.2). */
.pl-action-queue {
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 10px;
  overflow: hidden;
}
.pl-aq-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--pl-rule); color: inherit; text-decoration: none;
  min-height: 44px;
}
.pl-aq-row:last-child { border-bottom: 0; }
.pl-aq-row:hover { background: var(--pl-canvas); }
.pl-aq-cat {
  flex: 0 0 auto; font: 700 10px/1 var(--pl-font-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--pl-muted); background: var(--pl-canvas);
  border: 1px solid var(--pl-rule); border-radius: 999px; padding: 5px 10px;
}
.pl-aq-body { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--pl-ink); }
.pl-aq-impact {
  font-family: var(--pl-font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13.5px; color: var(--pl-brass); white-space: nowrap;
}
.pl-aq-act {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--pl-navy);
  white-space: nowrap;
}
.pl-aq-act::after { content: " \2192"; }

/* RegisterTable frame: context header + rows + scope footer (spec §3.3). The table itself
   keeps the page's own columns; this is the frame grammar. */
.pl-register {
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 10px;
  overflow: hidden;
}
.pl-reg-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--pl-rule);
}
.pl-reg-title { font: 600 14px/1.3 var(--pl-font-body); color: var(--pl-ink); margin: 0; }
.pl-reg-scope { font-size: 12px; color: var(--pl-muted); }
.pl-reg-foot {
  padding: 10px 16px; border-top: 1px solid var(--pl-rule);
  font-size: 12px; color: var(--pl-muted);
}

/* WorkingRecord: a card ONLY when it represents one real object (spec §3.4). */
.pl-working-record {
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 12px;
  padding: 18px 20px;
}
.pl-working-record.is-selected { box-shadow: var(--pl-shadow-doc); }
.pl-wr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pl-wr-title {
  font-family: var(--pl-font-display); font-weight: 400; font-size: 1.55rem;
  letter-spacing: -0.01em; color: var(--pl-ink); margin: 0;
}
.pl-wr-meta { font-size: 12.5px; color: var(--pl-muted); }

/* SourceLink: a derived datum names where it came from (spec §3.5). */
.pl-source {
  font-size: 11.5px; color: var(--pl-faint);
}
.pl-source a { color: var(--pl-action); text-decoration: none; }
.pl-source a:hover { text-decoration: underline; }

/* ---------- Status vocabulary (spec §5.3) — text-first chips ---------- */
.pl-status {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--pl-font-body); letter-spacing: .02em;
  border-radius: 999px; padding: 4px 10px;
  background: var(--pl-canvas); border: 1px solid var(--pl-rule); color: var(--pl-muted);
}
.pl-status.is-success { background: var(--green-bg, rgba(46,107,79,.1)); color: var(--green-ink, var(--pl-success)); border-color: var(--green-bd, var(--pl-rule)); }
.pl-status.is-review  { background: var(--amber-bg, rgba(168,112,28,.1)); color: var(--amber-ink, var(--pl-brass)); border-color: var(--amber-bd, var(--pl-rule)); }
.pl-status.is-active  { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); }
.pl-status.is-danger  { color: var(--pl-danger); }
.pl-status .pl-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Buttons (spec §5.1) — additive variants, existing buttons untouched ---------- */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 13.5px/1 var(--pl-font-body); border-radius: 8px; padding: 0 16px;
  min-height: 44px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: background .12s ease, border-color .12s ease;
}
.pl-btn:focus-visible { outline: 2px solid var(--pl-action); outline-offset: 2px; }
.pl-btn.is-primary { background: var(--pl-navy); color: #fff; }
.pl-btn.is-primary:hover { background: var(--pl-navy-soft); }
.pl-btn.is-secondary { background: var(--pl-surface); color: var(--pl-navy); border-color: var(--pl-navy); }
.pl-btn.is-secondary:hover { background: var(--pl-canvas); }
.pl-btn.is-quiet { background: none; color: var(--pl-muted); border-color: var(--pl-rule); }
.pl-btn.is-quiet:hover { color: var(--pl-ink); background: var(--pl-canvas); }
.pl-btn.is-danger { background: var(--pl-danger); color: #fff; }
:root[data-theme="dark"] .pl-btn.is-primary { color: #10131A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl-btn.is-primary { color: #10131A; }
}

/* Small square icon button (header affordances — money-privacy eye, etc.). Promoted from
   clients.html's own copy so every page can share one definition (spec §5.1 / owner Section 16,
   2026-08-15: "if the same problem recurs, solve it at the system level"). */
.pl-icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--pl-rule);
  background: var(--pl-surface); color: var(--pl-muted);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: pointer;
}
.pl-icon-btn:hover { color: var(--pl-navy); border-color: var(--pl-navy-soft); }
@media (pointer: coarse) { .pl-icon-btn { min-width: 44px; min-height: 44px; } }

/* ---------- Section rail (invoice editor / settings local nav, spec §4) ---------- */
.pl-section-rail { display: flex; flex-direction: column; gap: 2px; }
.pl-rail-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: 8px; font: 600 13.5px/1.2 var(--pl-font-body); color: var(--pl-muted);
  text-decoration: none; cursor: pointer; border: 0; background: none; text-align: left;
  min-height: 44px;
}
.pl-rail-item:hover { background: var(--pl-canvas); color: var(--pl-ink); }
.pl-rail-item.is-active {
  background: var(--pl-surface); color: var(--pl-navy);
  box-shadow: inset 3px 0 0 var(--pl-navy); border-radius: 4px 8px 8px 4px;
}
.pl-rail-item .pl-rail-note { display: block; font-weight: 400; font-size: 11.5px; color: var(--pl-faint); }

/* ---------- Overlay shell (spec §5.6) — one header/body/footer grammar ---------- */
.pl-drawer, .pl-modal {
  background: var(--pl-surface); color: var(--pl-ink);
  border: 1px solid var(--pl-rule); box-shadow: var(--pl-shadow-doc);
  display: flex; flex-direction: column;
}
.pl-drawer { border-radius: 12px 0 0 12px; }
.pl-modal { border-radius: 12px; }
.pl-ov-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--pl-rule);
}
.pl-ov-title { font: 600 15px/1.3 var(--pl-font-body); color: var(--pl-ink); margin: 0; }
.pl-ov-source { font-size: 12px; color: var(--pl-muted); }
.pl-ov-close {
  margin-left: auto; min-width: 44px; min-height: 44px; border: 0; background: none;
  font-size: 20px; color: var(--pl-muted); cursor: pointer; border-radius: 8px;
}
.pl-ov-close:hover { background: var(--pl-canvas); color: var(--pl-ink); }
.pl-ov-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.pl-ov-foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--pl-rule);
  position: sticky; bottom: 0; background: var(--pl-surface);
}
@media (max-width: 640px) {
  .pl-drawer { border-radius: 14px 14px 0 0; }
}

/* ---------- Universal states (spec §5.5 / matrix §D) ---------- */
.pl-state {
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 12px;
  padding: 30px 26px; text-align: center; color: var(--pl-muted);
}
.pl-state .pl-state-title {
  font-family: var(--pl-font-display); font-weight: 400; font-size: 1.3rem;
  color: var(--pl-ink); margin: 0 0 6px;
}
.pl-state .pl-state-body { font-size: 13.5px; margin: 0 0 14px; }
.pl-state.is-error { border-color: var(--amber-bd, var(--pl-rule)); }
.pl-state-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--amber-bg, rgba(168,112,28,.08)); color: var(--amber-ink, var(--pl-brass));
  border: 1px solid var(--amber-bd, var(--pl-rule)); border-radius: 10px;
  padding: 11px 14px; font-size: 13px;
}

/* Money figure: aligned mono numerals everywhere the page opts in. */
.pl-money {
  font-family: var(--pl-font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
}

/* ---------- Typographic law (Unified_Internal_Design_System.md §1.2, applied 2026-08-13) ------
   THE RULE THAT MATTERS: "never use display serif inside a data cell, input, button, tab, local
   rail item, or money figure." The pages predate the spec and several put DM Serif Display on
   figures and controls, which is what makes dense screens hard to scan. Enforced here because
   this sheet is linked LAST on all 27 pages, so one declaration corrects every surface.
   ⚠ Deliberately NOT touched: h1/h2/h3 and .kl/.section-eyebrow — the editorial voice is the
   approved look. This only pulls serif OFF operational chrome. */
input, select, textarea, button,
table td, table th,
.pl-money, .pl-rail-item, .pl-status, .pl-btn {
  font-family: var(--pl-font-body, var(--font-body, Inter, system-ui, sans-serif));
}
/* Money and dense numerics: tabular everywhere, so columns line up down the page. */
.pl-money, table td, .ot-rung .v, .ot-detail .v {
  font-variant-numeric: tabular-nums;
}

/* ---------- Primary nav: text links, active underline (owner concept set, 2026-08-13) ---------
   Every internal concept (internal-home / finances / invoice-editor / crew / …) draws the top nav
   as quiet TEXT LINKS with a 2px underline under the active one — not filled pills. The pill
   styling lives inline in six pages (crew/home/invoices/kit/profile + the ops dashboard); restyling
   it here hits all of them at once, because this stylesheet is linked LAST on every app page.
   ⚠ Structure is untouched: same <a>'s, same hrefs, same .active class, so plnav.js's mobile
   dropdown (which reads the page's own .pl-nav anchors) keeps working unchanged. */
.pl-nav { gap: 2px; }
.pl-nav a {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 12px;
  color: var(--pl-muted);
  font-weight: 500;
}
.pl-nav a:hover {
  background: none;
  border-color: transparent;
  border-bottom-color: var(--pl-rule);
  color: var(--pl-ink);
}
.pl-nav a.active {
  background: none;
  color: var(--pl-navy);
  border-color: transparent;
  border-bottom-color: var(--pl-navy);
  font-weight: 600;
}
/* The mobile drawer is a stacked list, not a rail — an underline there reads as a divider. */
.pl-navmenu-panel .pl-nav a,
.pl-navmenu-panel a { border-bottom: 0; }

/* ---------- Print discipline ---------- */
@media print {
  .pl-print-hide, .pl-action-queue, .pl-state-banner, .pl-ov-foot { display: none !important; }
}