/*
Theme Name: PIXELCOST
Theme URI: https://pixelcost.com.my
Author: Pixelworx Studio Malaysia
Author URI: https://pixelworxstudio.com.my
Description: PIXELCOST — project costing, pricing, quotation & profit-margin control for Malaysian SMEs. Quote faster, price smarter: build an accurate project cost, set markup and margin deliberately, and send a branded quotation in minutes. Multi-entity, SST-ready, with portfolio reporting, CSV export and profit projection. A Pixelworx Studio Malaysia brand.
Version: 2.58.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixelplus-costing
*/

/* ============================================================
   FONTS — self-hosted WOFF2 (2.58.4). Licences: assets/fonts/FONT-LICENSES.txt
   Inter = interface text, figures and minor headings.
   Fraunces = H1 / H2 only (--display). JetBrains Mono = tabular figures.
   ============================================================ */
@font-face{font-family:'Inter';src:url('assets/fonts/inter-var.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrainsmono-var.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS  — PIXELCOST brand (2.58.3): Midnight Navy, PixelCost Orange,
   Teal (secondary), Charcoal text, Cloud White canvas
   ============================================================ */
:root{
  --bg:        #f3f6fa;   /* Cloud White canvas */
  --surface:   #ffffff;   /* card */
  --surface-2: #f4f4f5;
  --ink:       #1c1a1b;   /* Charcoal */
  --heading:   #14263d;   /* Midnight Navy — H1/H2 */
  --ink-2:     #55565b;
  --muted:     #6b6c72;   /* AA-compliant on white (~5:1) */
  --line:      #ececed;   /* hairline */
  --line-2:    #f3f3f4;

  --shell:     #14263d;   /* Midnight Navy sidebar */
  --shell-2:   #1c3350;
  --shell-line:#2a405e;
  --shell-ink: #c9d3e0;
  --shell-mut: #8a9bb0;

  --clay:      #f86e26;   /* PixelCost Orange — primary accent */
  --clay-deep: #c2480c;   /* text/links on light (AA 4.97:1 on white) */
  --clay-soft: rgba(248,110,38,.10);
  --gold:      #fb8a4c;   /* accent-light — totals/emphasis */

  --on-clay:   #1c1a1b;   /* text ON PixelCost Orange (Charcoal, AA 5.98:1) — 2.58.5 */
  --teal:      #007f78;   /* secondary actions (AA 4.88:1 on white) */
  --teal-soft: rgba(0,127,120,.10);

  --pos:       #16a34a;   /* profit */
  --pos-soft:  #dcfce7;
  --neg:       #dc2626;   /* loss */
  --neg-soft:  #fee2e2;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;   /* H1 / H2 */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--sans);   /* legacy token: figures, card titles, minor headings now use Inter */
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r:   12px;
  --r-lg:20px;
  --sidebar-w: 256px;

  /* elevation — clean neutral layering */
  --shadow-xs: 0 1px 2px rgba(17,18,20,.05);
  --shadow-sm: 0 1px 2px rgba(17,18,20,.05), 0 2px 6px -2px rgba(17,18,20,.07);
  --shadow-md: 0 4px 14px -6px rgba(17,18,20,.12), 0 2px 6px -3px rgba(17,18,20,.08);
  --shadow-lg: 0 20px 44px -20px rgba(17,18,20,.22), 0 6px 16px -10px rgba(17,18,20,.10);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--clay-deep);   /* 2.58.5: solid AA focus ring (4.97:1) */
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--clay-deep);text-decoration:none}
a:hover{color:var(--heading)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ============================================================
   APP SHELL
   ============================================================ */
.pxc-app{display:flex;min-height:100vh}

.pxc-side{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:linear-gradient(190deg,#1b3150 0%,var(--shell) 46%,#0e1c2e 100%);
  color:var(--shell-ink);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid var(--shell-line);
}
.pxc-logo{
  padding:26px 22px 22px;
  border-bottom:1px solid var(--shell-line);
}
.pxc-logo .mark{
  font-family:var(--serif);
  font-size:25px;
  font-weight:500;
  letter-spacing:-.02em;
  color:#fff;
  display:flex;align-items:baseline;gap:3px;
}
.pxc-logo .mark b{color:var(--clay);font-weight:600}
.pxc-logo-img{width:100%;max-width:190px;height:auto;display:block}
.pxc-logo .tag{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--shell-mut);margin-top:6px;font-weight:600;
}
.pxc-navlist{list-style:none;margin:0;padding:14px 12px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--shell-line) transparent}
.pxc-navlist::-webkit-scrollbar{width:6px}
.pxc-navlist::-webkit-scrollbar-thumb{background:var(--shell-line);border-radius:3px}
.pxc-navlist a{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;
  color:var(--shell-ink);font-size:14px;font-weight:500;
  margin-bottom:3px;transition:background .15s,color .15s,box-shadow .15s;
}
.pxc-navlist a:hover{background:var(--shell-2);color:#fff}
.pxc-navlist a.is-active{background:linear-gradient(100deg,rgba(248,110,38,.20),rgba(28,51,80,.95) 62%);color:#fff;box-shadow:inset 0 0 0 1px rgba(248,110,38,.30),var(--shadow-sm)}
.pxc-navlist a.is-active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--clay)}
.pxc-navlist a.is-active .ic{color:var(--clay)}
.pxc-navlist .ic{width:17px;height:17px;flex:0 0 17px;color:var(--shell-mut)}
.pxc-navlist a:hover .ic{color:#fff}
.pxc-badge{margin-left:auto;background:var(--clay);color:var(--on-clay);font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
/* sidebar dropdown group (Documents) */
.pxc-nav-group{list-style:none}
.pxc-navdd{margin-bottom:2px}
.pxc-navdd summary{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--shell-ink);font-size:14px;font-weight:500;list-style:none;transition:background .15s,color .15s}
.pxc-navdd summary::-webkit-details-marker{display:none}
.pxc-navdd summary:hover{background:var(--shell-2);color:#fff}
.pxc-navdd summary .ic{width:17px;height:17px;flex:0 0 17px;color:var(--shell-mut)}
.pxc-navdd summary:hover .ic{color:#fff}
.pxc-dd-caret{width:14px;height:14px;margin-left:auto;color:var(--shell-mut);transition:transform .15s}
.pxc-navdd[open] summary .pxc-dd-caret{transform:rotate(180deg)}
.pxc-subnav{list-style:none;margin:2px 0 4px;padding:0 0 0 40px}
.pxc-subnav a{display:block;padding:8px 12px;border-radius:8px;margin-bottom:2px;color:var(--shell-mut);font-size:13.5px;font-weight:500;transition:background .15s,color .15s}
.pxc-subnav a:hover{background:var(--shell-2);color:#fff}
.pxc-subnav a.is-active{background:var(--shell-2);color:#fff}

/* worth field (form anchor) */
.pxc-card.pxc-worth-card{background:var(--shell);border-color:var(--shell-line)}
.pxc-worth-card .pxc-card-body{padding:22px}
.pxc-worth-label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--shell-mut);font-weight:700;margin:0}
.pxc-worth-card .pxc-sec-hint{color:var(--shell-mut)}
.pxc-worth-input{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.pxc-worth-cur{font-family:var(--serif);font-size:24px;color:var(--gold);font-weight:500}
.pxc-worth-input input{flex:1;background:transparent;border:0;border-bottom:2px solid var(--shell-line);color:#fff;font-family:var(--serif);font-size:34px;font-weight:500;padding:2px 0;letter-spacing:-.01em}
.pxc-worth-input input:focus{outline:none;border-bottom-color:var(--gold)}
.pxc-worth-input input::placeholder{color:var(--shell-mut)}
.pxc-worth-input input::selection{background:var(--clay);color:var(--on-clay)}
.pxc-worth-input input::-moz-selection{background:var(--clay);color:var(--on-clay)}

/* burn-down bar */
.pxc-burnbar{height:8px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin:14px 0 8px}
.pxc-burnbar-fill{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .25s ease}
.pxc-burnbar-fill.over{background:#f0928a}
.pxc-burn-meta{font-size:12px;color:var(--shell-mut)}

/* category dropdown inside repeater */
.pxc-rep-row .pxc-cat{padding:9px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-family:var(--sans);min-width:0}
.pxc-rep-row .pxc-cat:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}

/* ledger opening/closing rows */
.pxc-ledger-start td{background:var(--surface-2)}
.pxc-ledger-end td{background:var(--surface-2);border-top:2px solid var(--line)}
.pxc-side-foot{
  padding:16px 18px;border-top:1px solid var(--shell-line);
  font-size:12.5px;color:var(--shell-mut);
}
.pxc-side-foot .who{color:var(--shell-ink);font-weight:600;font-size:13px}
.pxc-side-foot .role{
  display:inline-block;margin-top:4px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--shell-mut);
}
.pxc-side-foot a{color:var(--shell-mut);font-size:12px}
.pxc-side-foot a:hover{color:#fff}

.pxc-content{flex:1;min-width:0;display:flex;flex-direction:column}

/* topbar */
.pxc-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 36px;border-bottom:1px solid var(--line);
  background:rgba(250,247,240,.82);backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  position:sticky;top:0;z-index:20;
}
.pxc-topbar .crumb{display:flex;align-items:center;gap:10px;min-width:0;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pxc-topbar .crumb b{color:var(--ink-2);font-weight:600}
.pxc-topbar > .crumb:first-child{flex:1 1 auto;overflow:hidden}
.pxc-topbar > .crumb:last-child{flex:0 1 auto;white-space:nowrap;min-width:0}
.pxc-topbar .crumb-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pxc-canvas{padding:34px 36px 60px;max-width:1180px;width:100%}
/* Quotation line editor sits on the full-bleed document page; keep it capped and centred like the app canvas. */
.pxc-doc-editor{max-width:1180px;margin:0 auto;padding:34px 36px 60px}
@media (max-width:860px){ .pxc-doc-editor{padding:24px 20px 50px} }

/* ============================================================
   BUTTONS
   ============================================================ */
.pxc-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:10px 17px;border-radius:9px;border:1px solid transparent;
  cursor:pointer;line-height:1;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;
}
.pxc-btn:active{transform:translateY(.5px)}
.pxc-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.pxc-btn-primary{background:var(--clay);color:var(--on-clay);box-shadow:0 1px 2px rgba(210,77,23,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.pxc-btn-primary:hover{background:var(--clay-deep);color:#fff;box-shadow:0 4px 12px -4px rgba(210,77,23,.45)}
.pxc-btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2);box-shadow:var(--shadow-xs)}
.pxc-btn-ghost:hover{background:var(--surface-2);border-color:var(--muted);color:var(--ink)}
.pxc-btn-danger{background:var(--surface);border-color:var(--line);color:var(--neg);box-shadow:var(--shadow-xs)}
.pxc-btn-danger:hover{background:var(--neg-soft);border-color:var(--neg)}
.pxc-btn .ic{width:15px;height:15px}

/* ============================================================
   PAGE HEADINGS
   ============================================================ */
.pxc-head{margin:4px 0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pxc-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);font-weight:700;margin:0 0 10px;
}
.pxc-eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--clay);opacity:.6}
.pxc-h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(30px,3.9vw,44px);line-height:1.03;letter-spacing:-.025em;
  margin:0;color:var(--heading);
}
.pxc-lede{color:var(--ink-2);margin:11px 0 0;max-width:60ch;font-size:15.5px}
.pxc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============================================================
   KPI STATS
   ============================================================ */
.pxc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px}
.pxc-kpi{
  background:linear-gradient(180deg,var(--surface),rgba(244,244,245,.6));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px 24px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.pxc-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--gold));opacity:.35;transition:opacity .2s ease}
.pxc-kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--line-2)}
.pxc-kpi:hover::before{opacity:1}
.pxc-kpi .k-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700;margin:0 0 15px}
.pxc-kpi .k-value{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.025em;line-height:1}
.pxc-kpi .k-value.sm{font-size:26px}
.pxc-kpi .k-sub{font-size:12.5px;color:var(--muted);margin-top:9px}
.pxc-kpi.pos .k-value{color:var(--pos)}
.pxc-kpi.neg .k-value{color:var(--neg)}
.pxc-kpi.pos::before{background:linear-gradient(90deg,var(--pos),#5aa886);opacity:.9}
.pxc-kpi.neg::before{background:linear-gradient(90deg,var(--neg),#d1795f);opacity:.9}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.pxc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.pxc-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:19px 24px;border-bottom:1px solid var(--line-2);
  background:var(--surface);
}
.pxc-card-head h2,.pxc-card-head h3{
  font-family:var(--serif);font-weight:500;margin:0;font-size:18px;letter-spacing:-.015em;
}
.pxc-card-head .hint{font-size:12.5px;color:var(--muted);font-weight:500}
.pxc-card-body{padding:24px}

/* ============================================================
   DATA TABLE
   ============================================================ */
.pxc-table{width:100%;border-collapse:collapse}
.pxc-table th,.pxc-table td{padding:15px 22px;text-align:left;border-bottom:1px solid var(--line-2);font-size:14px}
.pxc-table thead th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-weight:700;background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-top:12px;padding-bottom:12px;
}
.pxc-table tbody tr{transition:background .12s,box-shadow .12s}
.pxc-table tbody tr:hover{background:var(--surface-2)}
.pxc-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--clay)}
.pxc-table tbody tr:last-child td{border-bottom:0}
.pxc-table .r{text-align:right}
.pxc-table td.num,.pxc-table td.r,.pxc-table th.r{white-space:nowrap}
.pxc-table td:first-child,.pxc-table th:first-child{min-width:140px}
.pxc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pxc-table .proj{font-weight:600}
.pxc-table .proj a{color:var(--ink)}
.pxc-table .proj a:hover{color:var(--clay-deep)}
.pxc-table .sub{color:var(--muted);font-size:12px;margin-top:2px}
.pxc-pos{color:var(--pos);font-weight:600}
.pxc-neg{color:var(--neg);font-weight:600}

.pxc-tag{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  font-weight:600;letter-spacing:.01em;white-space:nowrap;
}

/* ============================================================
   BARS & DONUT
   ============================================================ */
.pxc-bar{display:inline-block;width:100%;max-width:160px;height:7px;background:var(--line-2);border-radius:99px;overflow:hidden;vertical-align:middle}
.pxc-bar-fill{display:block;height:100%;background:var(--ink-2);border-radius:99px}
.pxc-bar.trainers .pxc-bar-fill{background:#3f6b5a}
.pxc-bar.expenses .pxc-bar-fill{background:#b5532b}
.pxc-bar.dev .pxc-bar-fill{background:#7a6224}
.pxc-bar.hosting .pxc-bar-fill{background:#54707e}
.pxc-bar.salary .pxc-bar-fill{background:#8a5a7a}
.pxc-bar.contingency .pxc-bar-fill{background:#a0a59c}

.pxc-donut{width:148px;height:148px}
.pxc-donut-num{font-family:var(--serif);font-size:24px;font-weight:600;fill:var(--ink)}
.pxc-donut-lab{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}

/* ============================================================
   SINGLE PROJECT
   ============================================================ */
.pxc-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start} /* v2.58.7 (F3): minmax(0,…) so a wide child can't stretch the page */
.pxc-stack{display:grid;gap:18px}
.pxc-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pxc-block .bh{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 20px;border-bottom:1px solid var(--line-2);background:var(--surface-2);
}
.pxc-block .bh h3{font-family:var(--serif);font-weight:500;font-size:15px;margin:0}
.pxc-block .bh .bt{font-family:var(--mono);font-size:14px;color:var(--ink)}
.pxc-lines{width:100%;border-collapse:collapse}
.pxc-lines td{padding:11px 20px;border-bottom:1px solid var(--line-2);font-size:14px}
.pxc-lines tr:last-child td{border-bottom:0}
.pxc-lines .r{text-align:right;font-family:var(--mono)}
.pxc-lines .calc{color:var(--muted);font-size:12px;font-family:var(--mono);margin-top:2px}
.pxc-empty{padding:16px 20px;color:var(--muted);font-size:13.5px}

/* profit summary card (sticky) */
.pxc-summary{position:sticky;top:90px;background:var(--shell);color:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pxc-summary .sh{padding:20px 22px 16px;border-bottom:1px solid var(--shell-line)}
.pxc-summary .sh .c{font-size:12.5px;color:var(--shell-mut)}
.pxc-summary .sh .t{font-family:var(--serif);font-size:20px;font-weight:500;margin-top:2px}
.pxc-summary .rows{padding:8px 22px}
.pxc-srow{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--shell-ink)}
.pxc-srow:last-child{border-bottom:0}
.pxc-srow .v{font-family:var(--mono)}
.pxc-srow.tot{font-weight:700;color:#fff}
.pxc-srow.tot .v{color:var(--gold)}
.pxc-profit{margin:8px 22px 20px;padding:18px;border-radius:10px;background:rgba(255,255,255,.05)}
.pxc-profit .pl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--shell-mut)}
.pxc-profit .pv{font-family:var(--serif);font-size:32px;font-weight:600;margin-top:3px}
.pxc-profit .pv.pos{color:#6cd6a0}
.pxc-profit .pv.neg{color:#f0928a}
.pxc-profit .pm{font-size:13px;color:var(--shell-ink);margin-top:4px}
.pxc-sugg{margin:0 22px 22px;font-size:13px;color:var(--shell-ink);border-top:1px dashed rgba(255,255,255,.18);padding-top:14px}
.pxc-sugg b{color:var(--gold);font-family:var(--mono)}

/* ============================================================
   FORMS (front-end)
   ============================================================ */
.pxc-form-grid{display:block}
.pxc-form-grid>div{min-width:0}
/* Full-width live summary strip below the form */
.pxc-summary-strip{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--shell);color:#fff;border-radius:var(--r-lg);margin-top:20px;padding:14px 8px}
.pxc-summary-strip .ss-cell{flex:1;min-width:118px;padding:6px 18px;display:flex;flex-direction:column;justify-content:center}
.pxc-summary-strip .ss-cell+.ss-cell{border-left:1px solid var(--shell-line)}
.pxc-summary-strip .ss-l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--shell-mut)}
.pxc-summary-strip .ss-v{font-family:var(--mono);font-size:15px;margin-top:5px;font-variant-numeric:tabular-nums}
.pxc-summary-strip .ss-v.gold{color:var(--clay)}
.pxc-summary-strip .ss-remain{flex:1.3;border-left:2px solid var(--clay)}
.pxc-summary-strip .ss-remain .ss-v{font-family:var(--serif);font-size:20px}
.pxc-summary-strip .ss-m{font-size:11px;color:var(--shell-mut);margin-top:2px}
.pxc-summary-strip .ss-save{flex:0 0 auto;justify-content:center;align-items:center;flex-direction:row}
.pxc-summary-strip .ss-save .pxc-btn{white-space:nowrap;padding:11px 22px}
.pv.pos{color:#7fd1a3}
.pv.neg{color:#e8846b}
/* Slim sticky bar pinned to the content area bottom */
#pxc-project-form{padding-bottom:78px}
.pxc-stickybar{position:fixed;left:var(--sidebar-w);right:0;bottom:0;z-index:40;background:var(--shell);color:#fff;border-top:2px solid var(--clay);display:flex;align-items:center;gap:18px;padding:11px 24px;box-shadow:0 -6px 22px rgba(0,0,0,.16)}
.pxc-stickybar .sb-remain{display:flex;align-items:baseline;gap:10px;flex:0 1 auto;min-width:0}
.pxc-stickybar .sb-l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--shell-mut)}
.pxc-stickybar .sb-v{font-family:var(--serif);font-size:20px;font-weight:600}
.pxc-stickybar .sb-m{font-size:12px;color:var(--shell-mut)}
.pxc-stickybar .sb-bar{flex:1;max-width:340px;height:5px;background:var(--shell-line);border-radius:3px;overflow:hidden}
.pxc-stickybar .sb-meta{font-size:12px;color:var(--shell-mut);margin-left:auto;font-variant-numeric:tabular-nums}
.pxc-stickybar .sb-save{padding:9px 20px;flex:0 0 auto}
.pxc-field{margin-bottom:16px}
.pxc-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em}
.pxc-field input,.pxc-field select,.pxc-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:14px;
  box-sizing:border-box;box-shadow:var(--shadow-xs);
  transition:border-color .15s,box-shadow .15s;
}
.pxc-field textarea{line-height:1.5;resize:vertical}
.pxc-field input.num{font-family:var(--mono)}
.pxc-field input::placeholder,.pxc-field textarea::placeholder{color:#b3b7af}
.pxc-field input:hover,.pxc-field select:hover,.pxc-field textarea:hover{border-color:#d4ccbc}
.pxc-field input:focus,.pxc-field select:focus,.pxc-field textarea:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}
.pxc-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.pxc-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pxc-sec-title{font-family:var(--serif);font-size:16px;font-weight:500;margin:8px 0 4px;padding-top:8px}
.pxc-sec-hint{font-size:12.5px;color:var(--muted);margin:0 0 12px}

/* repeater */
.pxc-rep{margin-bottom:8px;overflow-x:auto}
.pxc-rep-head{display:flex;gap:10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:0 2px 6px}
.pxc-rep-head .del-col{width:34px;flex:0 0 34px}
.pxc-rep-row{display:flex;gap:10px;margin-bottom:8px;align-items:center}
.pxc-rep-row input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;min-width:0}
.pxc-rep-row input.num{font-family:var(--mono);text-align:right}
.pxc-rep-row input:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}

/* COSTS repeater: fixed grid tracks so hours-mode (Hrs x Rate) never
   collapses into the pay-out date column. Head + rows share tracks. */
.pxc-rep[data-group="pxc_costs"] .pxc-rep-head,
.pxc-rep[data-group="pxc_costs"] .pxc-rep-row{
  display:grid;grid-template-columns:minmax(140px,1fr) 140px 250px 140px 96px 34px;gap:10px;min-width:860px;
}
.pxc-rep[data-group="pxc_costs"] .pxc-rep-head{align-items:end}
.pxc-rep[data-group="pxc_costs"] .pxc-rep-head span{flex:none}
.pxc-rep[data-group="pxc_costs"] .pxc-rep-row{align-items:center}
.pxc-rep[data-group="pxc_costs"] input[type=date]{width:100%}
.pxc-rep[data-group="pxc_costs"] .pxc-rep-row>input,
.pxc-rep[data-group="pxc_costs"] .pxc-rep-row>select{width:100%}

/* Context-aware amount cell: flat amount, or Hours x Rate for labour rows */
.pxc-amtcell{display:flex;gap:5px;align-items:center;min-width:0}
.pxc-amtcell input{padding:9px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;min-width:0}
.pxc-amtcell .pxc-amt{flex:1;min-width:0}
.pxc-amtcell .pxc-hrs,.pxc-amtcell .pxc-rate{flex:0 0 62px;width:62px;display:none;text-align:right}
.pxc-amtcell .pxc-hx{display:none;color:var(--muted);font-size:12px;flex:0 0 auto}
.pxc-rep-row.is-hours .pxc-amtcell .pxc-hrs,.pxc-rep-row.is-hours .pxc-amtcell .pxc-rate{display:block}
.pxc-rep-row.is-hours .pxc-amtcell .pxc-hx{display:inline}
.pxc-rep-row.is-hours .pxc-amtcell .pxc-amt{flex:0 0 84px}
.pxc-amtcell .pxc-amt[readonly]{background:var(--surface-2);color:var(--ink);border-color:var(--line);font-weight:600}
.pxc-del{flex:0 0 34px;width:34px;height:38px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--neg);cursor:pointer;font-size:18px;line-height:1}
.pxc-del:hover{background:var(--neg-soft);border-color:var(--neg)}
.pxc-addrow{margin-top:4px}

.pxc-imp-steps{display:flex;gap:8px;align-items:center;margin:0 0 24px;flex-wrap:wrap}
.pxc-imp-step{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.pxc-imp-step .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600}
.pxc-imp-step.on{background:rgba(181,83,43,.1);border-color:var(--clay);color:var(--clay)}
.pxc-imp-step.on .n{background:var(--clay);color:var(--on-clay)}
.pxc-imp-step.done .n{background:var(--pos);color:#fff}
.pxc-imp-sep{color:var(--line);font-size:15px}
.pxc-drop{border:1.6px dashed var(--line);border-radius:var(--r-lg);padding:34px 20px;text-align:center;background:var(--surface)}
.pxc-file-chip{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pxc-map-head,.pxc-map-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,190px);gap:14px;align-items:center}
.pxc-map-head{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.pxc-map-row{padding:12px 0;border-top:1px solid var(--line)}
.pxc-map-row .src{font-size:14px;color:var(--ink)}
.pxc-map-row .smp{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){ .pxc-map-head{display:none} .pxc-map-row{grid-template-columns:1fr;gap:6px} }
.pxc-notice{padding:12px 16px;border-radius:9px;font-size:13.5px;margin-bottom:20px;font-weight:500}
.pxc-notice.ok{background:var(--pos-soft);color:#1f5e40;border:1px solid #bfe0cc}
.pxc-notice.err{background:var(--neg-soft);color:#8a3424;border:1px solid #e6c4ba}

/* ============================================================
   LOGIN
   ============================================================ */
.pxc-login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.pxc-login-aside{
  color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/54px 54px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/54px 54px,
    radial-gradient(1100px 760px at 26% 16%, #1f3a5c, var(--shell) 68%);
}
/* soft brand glow */
.pxc-login-aside::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(780px 480px at 116% -6%, rgba(248,110,38,.30), transparent 56%),
  radial-gradient(620px 520px at -14% 114%, rgba(248,110,38,.10), transparent 60%);
}
/* SME constellation — line-icons of the trades PIXELCOST serves */
.pxc-login-aside::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(assets/img/sme-motif.svg) center/cover no-repeat;
}
.pxc-login-aside>*{position:relative;z-index:1}
.pxc-login-aside .mark{font-family:var(--serif);font-size:30px;font-weight:500;display:flex;align-items:baseline;gap:4px}
.pxc-login-aside .mark b{color:var(--clay)}
.pxc-login-aside .tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--shell-mut);margin-top:8px;font-weight:600}
.pxc-login-aside .pitch{font-family:var(--serif);font-size:clamp(32px,3.2vw,42px);font-weight:500;line-height:1.16;letter-spacing:-.02em;max-width:15ch}
.pxc-login-aside .foot{font-size:12.5px;color:var(--shell-mut)}
.pxc-login-main{display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.pxc-login-back{position:absolute;top:24px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.75);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-xs);transition:color .15s,border-color .15s,transform .15s,box-shadow .15s}
.pxc-login-back:hover{color:var(--ink);border-color:#d6d6da;transform:translateX(-2px);box-shadow:var(--shadow-sm)}
.pxc-login-back svg{width:15px;height:15px;flex:0 0 15px}
.pxc-login-box{width:100%;max-width:360px}
.pxc-login-box h1{font-family:var(--display);color:var(--heading);font-weight:500;font-size:28px;margin:0 0 6px}
.pxc-login-box p.sub{color:var(--ink-2);margin:0 0 26px;font-size:14px}
.pxc-login-box label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.pxc-login-box input[type=text],.pxc-login-box input[type=password],.pxc-login-box select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font-size:14px;margin-bottom:16px;background:#fff;font-family:var(--sans);box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s;
}
.pxc-login-box input:hover,.pxc-login-box select:hover{border-color:#d4ccbc}
.pxc-login-box input:focus,.pxc-login-box select:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}
.pxc-login-box .submit{width:100%;justify-content:center;padding:12px}
.pxc-login-box .remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:18px}
.pxc-login-box .remember input{width:auto;margin:0}
.pxc-login-err{background:var(--neg-soft);border:1px solid #e6c4ba;color:#8a3424;padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:18px}

/* ============================================================
   MISC
   ============================================================ */
.pxc-blank{text-align:center;padding:60px 20px;color:var(--muted)}
.pxc-blank .pxc-h1{margin-bottom:10px}
.pxc-reports-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pxc-mix-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.pxc-mix-row:last-child{border-bottom:0}
.pxc-mix-row .lab{flex:0 0 120px;color:var(--ink-2);font-weight:500}
.pxc-mix-row .amt{flex:0 0 120px;text-align:right;font-family:var(--mono)}

@media print{
  .pxc-side,.pxc-topbar,.pxc-actions,.pxc-stickybar{display:none!important}
  .pxc-content{display:block}
  .pxc-summary{position:static}
  #pxc-project-form{padding-bottom:0}
  body{background:#fff}
  .pxc-card,.pxc-block,.pxc-kpi{border-color:#ccc}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pxc-kpis{grid-template-columns:repeat(2,1fr)}
  .pxc-split,.pxc-form-grid,.pxc-reports-grid{grid-template-columns:minmax(0,1fr)} /* v2.58.7 (F3) */
  .pxc-summary{position:static}
}
@media (max-width:860px){
  :root{--sidebar-w:0px}
  .pxc-side{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:50;width:248px;flex-basis:248px;transition:transform .2s}
  .pxc-app.nav-open .pxc-side{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.4)}
  .pxc-content{width:100%}
  .pxc-menu-toggle{display:inline-flex!important}
  .pxc-canvas{padding:24px 20px 50px}
  .pxc-topbar{padding:16px 20px}
  .pxc-stickybar .sb-bar,.pxc-stickybar .sb-meta{display:none}
  .pxc-stickybar .sb-remain{margin-right:auto}
  .pxc-summary-strip .ss-cell{min-width:46%}
  .pxc-summary-strip .ss-remain{min-width:100%}
}
@media (min-width:861px){
  .pxc-menu-toggle{display:none}
}
@media (max-width:560px){
  .pxc-kpis{grid-template-columns:1fr}
  .pxc-login-wrap{grid-template-columns:1fr}
  .pxc-login-aside{display:none}
  .pxc-row3,.pxc-row2{grid-template-columns:1fr}
  .pxc-card-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pxc-table{min-width:480px}
  .pxc-table th,.pxc-table td{padding:11px 14px;font-size:13px}

  /* Projects table -> stacked cards on phones (scoped via .pxc-cards; every
     other .pxc-table keeps its horizontal-scroll behaviour untouched). */
  .pxc-table.pxc-cards{min-width:0;width:100%}
  .pxc-table.pxc-cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pxc-table.pxc-cards tbody,
  .pxc-table.pxc-cards tr,
  .pxc-table.pxc-cards td{display:block;width:auto}
  .pxc-table.pxc-cards tr{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:6px 16px 12px;margin-bottom:12px;box-shadow:var(--shadow-xs)}
  .pxc-table.pxc-cards td{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border:0;text-align:right;font-size:14px}
  .pxc-table.pxc-cards td:empty{display:none}
  .pxc-table.pxc-cards td::before{content:attr(data-label);flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left}
  .pxc-table.pxc-cards td.proj{display:block;text-align:left;padding:12px 0 11px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
  .pxc-table.pxc-cards td.proj::before{display:none}
  .pxc-table.pxc-cards td.proj a{font-size:15.5px;font-weight:600}
  .pxc-table.pxc-cards .pxc-row-dim{opacity:.6}

  .pxc-topbar{padding:14px 16px}
  .pxc-crumb-sub{display:none}

  /* Topbar: date is decoration — drop it, and let the entity chip truncate. */
  .pxc-topbar-date{display:none}
  .pxc-entsw{min-width:0;max-width:100%}
  .pxc-entsw>summary{min-width:0;max-width:100%;overflow:hidden}
  .pxc-entsw>summary svg{flex:0 0 auto}
  .pxc-entsw-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

  /* Sticky bar: stack figures over a full-width Save so the action is always tappable. */
  .pxc-stickybar{
    flex-direction:column;align-items:stretch;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .pxc-stickybar .sb-remain{flex-wrap:wrap;gap:8px}
  .pxc-stickybar .sb-save{width:100%;min-height:46px;padding:11px 20px;justify-content:center}
  #pxc-project-form{padding-bottom:132px}
}

/* ============================================================
   QUOTATION (A4 print document)
   ============================================================ */
.pxc-quote-toolbar{
  max-width:794px;margin:24px auto 0;padding:0 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pxc-sheet{
  background:#fff;color:#1b211f;
  width:794px;min-height:1123px;        /* A4 at 96dpi */
  margin:18px auto 40px;padding:54px 56px;
  box-shadow:0 24px 60px -24px rgba(27,33,31,.32),0 4px 14px -8px rgba(27,33,31,.14);
  border-radius:4px;
  font-family:var(--sans);font-size:13px;line-height:1.5;
  box-sizing:border-box;
}
.pxc-q-head{display:table;width:100%;border-bottom:2px solid var(--ink);padding-bottom:22px;border-collapse:collapse}
.pxc-q-brand{display:table-cell;vertical-align:top;width:60%;padding-right:24px}
.pxc-q-logo{height:auto;width:auto;max-height:80px;max-width:280px;object-fit:contain;object-position:left;display:block;margin-bottom:16px}
.pxc-q-wordmark{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--ink);line-height:1.12;max-width:340px;margin-bottom:16px;overflow-wrap:break-word}
.pxc-q-wordmark.is-long{font-size:23px;letter-spacing:.005em}
.pxc-q-company{font-size:12px;color:var(--ink-2);line-height:1.55}
.pxc-q-company strong{color:var(--ink);font-size:13px}
.pxc-q-meta{display:table-cell;vertical-align:top;text-align:right;width:40%}
.pxc-q-title{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.04em;color:var(--clay);margin-bottom:12px}
.pxc-q-metatable{margin-left:auto;border-collapse:collapse;font-size:12.5px}
.pxc-q-metatable td{padding:3px 0 3px 16px;text-align:right;color:var(--ink-2)}
.pxc-q-metatable td:first-child{color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;font-weight:700;padding-top:5px}
.pxc-q-metatable td:last-child{color:var(--ink);font-family:var(--mono);font-weight:600}

.pxc-q-parties{display:flex;justify-content:space-between;gap:30px;margin:26px 0 10px}
.pxc-q-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:5px}
.pxc-q-billto{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink)}
.pxc-q-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px}

.pxc-q-intro{margin:22px 0 4px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.pxc-q-table{width:100%;border-collapse:collapse;margin-top:20px}
.pxc-q-table thead th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;background:var(--shell);padding:11px 16px;font-weight:700;
}
.pxc-q-table thead th.r{text-align:right}
.pxc-q-table tbody td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.pxc-q-table tbody td.r,.pxc-q-table tfoot td.r{text-align:right;font-family:var(--mono)}
.pxc-q-sub-row td{padding:8px 16px;font-size:12.5px;color:var(--ink-2);border:0}
.pxc-q-sub-row td.r:last-child{color:var(--ink)}
.pxc-q-total-row td{padding:14px 16px;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);border-top:2px solid var(--ink)}
.pxc-q-total-row td.r:last-child{color:var(--clay)}

.pxc-q-cols{display:flex;gap:32px;margin-top:30px}
.pxc-q-block{flex:1}
.pxc-q-block h3{font-family:var(--serif);font-size:14px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.pxc-q-block p{margin:0 0 8px;font-size:12px;color:var(--ink-2);line-height:1.55}
.pxc-q-bank{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:var(--mono);font-size:11.5px}
.pxc-q-terms{font-size:11.5px;color:var(--ink-2);line-height:1.7}

.pxc-q-signoff{display:flex;gap:48px;margin-top:54px}
.pxc-q-sign{flex:1;display:flex;flex-direction:column}
.pxc-q-sigline{border-bottom:1.5px solid var(--ink);height:42px;margin-bottom:8px}
.pxc-q-sign strong{font-size:13px;color:var(--ink)}
.pxc-q-sign span{font-size:11.5px;color:var(--muted)}
.pxc-q-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:11.5px;color:var(--muted)}

/* Print: emit only the sheet at true A4 */
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;margin:0!important}
  .no-print,.pxc-quote-toolbar{display:none!important}
  .pxc-sheet{box-shadow:none;margin:0;width:auto;min-height:auto;padding:0}
  .pxc-q-head{display:table!important;width:100%!important}
  .pxc-q-brand{display:table-cell!important;width:60%!important;vertical-align:top!important}
  .pxc-q-meta{display:table-cell!important;width:40%!important;vertical-align:top!important;text-align:right!important}
  .pxc-q-logo{height:auto!important;width:auto!important;max-height:80px!important;max-width:280px!important}
  .pxc-q-table thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* v2.58.7 (F1): keep blocks whole on paper */
  .pxc-q-head,.pxc-q-parties,.pxc-q-cols,.pxc-q-signoff,.pxc-q-total-row,.pxc-q-table tr{break-inside:avoid;page-break-inside:avoid}
  .pxc-q-foot{break-before:avoid;page-break-before:avoid}
}
/* v2.58.7 (F1): screen only — A4 print (~700px wide) used to pick up this
   tablet layout, stacking Payment/Notes and splitting the signature block. */
@media screen and (max-width:840px){
  /* v2.58.7: "body >" = the on-screen sheet only, never the copy html2pdf captures. */
  body > .pxc-sheet{width:auto;padding:32px 22px}
  body > .pxc-sheet .pxc-q-parties,body > .pxc-sheet .pxc-q-cols,body > .pxc-sheet .pxc-q-signoff{flex-direction:column;gap:18px}
}

/* ============================================================
   INVOICING
   ============================================================ */
.pxc-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:999px;text-transform:uppercase}
.pxc-pill-unpaid{background:var(--neg-soft);color:#8a3424;border:1px solid #e6c4ba}
.pxc-pill-partial{background:#fbf1dd;color:#8a6411;border:1px solid #ecd9ad}
.pxc-pill-paid{background:var(--pos-soft);color:#1f5e40;border:1px solid #bfe0cc}

.pxc-bill-rollup{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.pxc-bill-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.pxc-bill-stat .l{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:6px}
.pxc-bill-stat .v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink)}

.pxc-bill-actions{margin-top:18px}
.pxc-inv-create{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* payment panel under the invoice sheet */
.pxc-pay-panel{max-width:794px;margin:20px auto 60px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pxc-pay-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.pxc-pay-card h3{font-family:var(--serif);font-weight:500;font-size:16px;margin:0 0 14px}
.pxc-pay-form .pxc-field{margin-bottom:12px}
.pxc-pay-history td{padding:10px 0}
.pxc-pay-tot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;margin-top:6px;border-top:2px solid var(--line);font-size:14px}
.pxc-pay-tot strong{font-family:var(--mono);font-size:16px}
.pxc-paid-note{color:var(--pos);font-weight:600}

@media (max-width:840px){
  .pxc-bill-rollup{grid-template-columns:1fr 1fr}
  .pxc-pay-panel{grid-template-columns:1fr;padding:0 16px}
}
@media print{ .pxc-pay-panel{display:none!important} }

/* ============================================================
   LEDGER DOCUMENTS (cost ledger + statement of account)
   ============================================================ */
.pxc-link{color:var(--clay);text-decoration:none;font-weight:600}
.pxc-link:hover{text-decoration:underline}
.pxc-led-internal{margin:18px 0 4px;padding:8px 14px;background:var(--neg-soft);border:1px solid #e6c4ba;border-radius:8px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#8a3424;text-transform:uppercase}
.pxc-led-table{margin-top:18px}
.pxc-led-table tbody td{padding:11px 16px}
.pxc-led-cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-top:3px}
.pxc-led-minus{color:var(--neg)}
.pxc-led-mix{width:100%;border-collapse:collapse;font-size:12.5px}
.pxc-led-mix td{padding:5px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.pxc-led-mix td.r{font-family:var(--mono);color:var(--ink);text-align:right}
@media print{ .pxc-led-internal{-webkit-print-color-adjust:exact;print-color-adjust:exact} }

/* ============================================================
   CASH FLOW
   ============================================================ */
.pxc-cf-flag{margin:0 0 20px;padding:12px 16px;background:var(--neg-soft);border:1px solid #e6c4ba;border-radius:10px;color:#8a3424;font-size:13.5px}
.pxc-cf-letterhead{margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.pxc-cf-letterhead .lh-co{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.pxc-cf-letterhead .lh-meta{font-size:12px;color:var(--ink-2);margin-top:2px}
.pxc-print-only{display:none}
@media print{
  .pxc-side,.pxc-topbar,.pxc-head .pxc-actions{display:none!important}
  .pxc-app,.pxc-content{display:block!important;margin:0!important;padding:0!important;background:#fff!important}
  .pxc-print-only{display:block!important}
  .pxc-kpi,.pxc-card,.pxc-cf-flag{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
  #pxc-cf-chart{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.pxc-cf-legend{display:flex;gap:18px;margin-bottom:12px;font-size:12.5px;color:var(--ink-2)}
.pxc-cf-legend span{display:flex;align-items:center;gap:6px}
.pxc-cf-legend .sw{width:14px;height:10px;border-radius:2px;background:var(--ink)}
.pxc-cf-legend .sw.dash{height:0;border-top:2px dashed var(--muted);border-radius:0}
.pxc-kpi .k-value.neg{color:var(--neg)}

/* ============================================================
   MANAGEMENT P&L + ANALYTICS
   ============================================================ */
.pxc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.pxc-pnl{width:100%;border-collapse:collapse;font-size:14px}
.pxc-pnl td{padding:9px 0;border-bottom:1px solid var(--line)}
.pxc-pnl td.num{font-family:var(--mono);text-align:right;color:var(--ink)}
.pxc-pnl .calc{font-family:var(--sans);font-size:11px;color:var(--muted);font-weight:400}
.pxc-pnl-sub td{font-weight:600;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--surface-2)}
.pxc-pnl-total td{font-weight:700;font-size:15px;border-top:2px solid var(--ink);border-bottom:none;padding-top:12px}
.pxc-pnl-total td.pxc-pos{color:var(--pos)}
.pxc-oh-form{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.pxc-oh-form label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.pxc-oh-row{display:flex;gap:8px;max-width:320px}
.pxc-oh-row input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono)}
.pxc-fineprint{font-size:11.5px;color:var(--muted);margin:8px 4px 32px;line-height:1.5}
td.pxc-neg,.num.pxc-neg{color:var(--neg)}
.num.pxc-pos{color:var(--pos)}
@media(max-width:900px){.pxc-grid-2{grid-template-columns:1fr}}

/* ============================================================
   PROJECT STATUS (pipeline)
   ============================================================ */
.pxc-pill{white-space:nowrap}
.pxc-pill-lead{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.pxc-pill-quoted{background:#e7eef6;color:#1c4e80;border:1px solid #c7dbef}
.pxc-pill-won{background:#e3f1ee;color:#1f6b5e;border:1px solid #bfe0d8}
.pxc-pill-inprog{background:#fdece2;color:#b8451a;border:1px solid #f6d3c1}
.pxc-pill-complete{background:var(--pos-soft);color:#1f5e40;border:1px solid #bfe0cc}
.pxc-pill-lost{background:#f0eceb;color:#8a6b66;border:1px solid #e0d6d4}
.pxc-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pxc-chip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;box-shadow:var(--shadow-xs);transition:border-color .15s,color .15s,background .15s}
.pxc-chip:hover{border-color:var(--muted);color:var(--ink)}
/* document registers: search + status filter + status pills */
.pxc-doc-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.pxc-doc-search{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;font-family:inherit}
.pxc-doc-search:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}
.pxc-doc-chips{display:flex;flex-wrap:wrap;gap:7px}
.pxc-doc-chips .pxc-chip{cursor:pointer;font-family:inherit}
.pxc-doc-chips .pxc-chip.is-on{background:var(--shell);color:#fff;border-color:var(--shell)}
.pxc-doc-empty{padding:28px;text-align:center;color:var(--muted);font-size:14px}
.pxc-ipill{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 11px;border-radius:999px}
.pxc-ipill-paid{background:#e6f4ec;color:#1f7a4d}
.pxc-ipill-partial{background:#fdf1dd;color:#8a5a12}
.pxc-ipill-unpaid{background:#fdecec;color:#b0432f}
/* Billplz payment box (invoice) */
.pxc-bp-box{margin-bottom:20px}
.pxc-bp-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pxc-bp-head strong{font-size:15px}
.pxc-bp-mode{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px}
.pxc-bp-mode.sandbox{background:#fdf1dd;color:#8a5a12}
.pxc-bp-mode.live{background:#e6f4ec;color:#1f7a4d}
.pxc-bp-hint{font-size:13px;color:var(--muted);margin:0}
.pxc-bp-linkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pxc-bp-linkrow input{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:var(--mono);background:var(--surface-2)}
.pxc-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pxc-row-dim{opacity:.55}
.pxc-qs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.pxc-qs .lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pxc-stage{font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;font-family:var(--sans)}
.pxc-stage:hover{border-color:var(--muted)}
.pxc-stage.is-cur{background:var(--clay);color:var(--on-clay);border-color:var(--clay)}

/* Invoice editor (unpaid) */
.pxc-inv-editor .pxc-il-row{margin-bottom:8px}

/* Quote acceptance */
.pxc-btn-accept{background:var(--pos);color:#fff;border:1px solid var(--pos)}
.pxc-btn-accept:hover{filter:brightness(.95)}

/* AR aging / collections */
.pxc-aging-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 22px}
.pxc-akpi{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:15px 17px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm)}
.pxc-akpi .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pxc-akpi .v{font-family:var(--serif);font-size:19px;color:var(--ink)}
.pxc-akpi.total{background:var(--ink);border-color:var(--ink)}
.pxc-akpi.total .k{color:rgba(255,255,255,.7)}
.pxc-akpi.total .v{color:#fff}
.pxc-akpi.late{border-color:#e6c4ba;background:var(--neg-soft)}
.pxc-akpi.late .v{color:var(--neg)}
.pxc-row-late{background:var(--neg-soft)}
@media(max-width:900px){.pxc-aging-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.pxc-aging-kpis{grid-template-columns:repeat(2,1fr)}}

/* Receipts / proof of purchase */
.pxc-rcpt{display:flex;align-items:center}
.pxc-rcpt-attach{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:8px 12px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);background:#fff;cursor:pointer;width:100%;justify-content:center;box-sizing:border-box}
.pxc-rcpt-attach:hover{border-color:var(--muted);color:var(--ink-2)}
.pxc-rcpt-attach.is-set{border-style:solid;border-color:#bfe0d8;background:#e3f1ee;color:#1f6b5e}
.pxc-rcpt-attach .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.pxc-rcpt-have{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:7px 10px;border:1px solid #bfe0d8;background:#e3f1ee;color:#1f6b5e;border-radius:8px;width:100%;box-sizing:border-box}
.pxc-rcpt-have .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxc-rcpt-have .rm{cursor:pointer;color:#8a3424;font-weight:700;display:inline-flex;align-items:center;gap:2px}
.pxc-rcpt-have .rm input{margin:0}
.pxc-rcpt-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#185FA5;text-decoration:none;font-weight:600}
.pxc-rcpt-link:hover{text-decoration:underline}
.pxc-led-rcpt{font-size:10px;color:#1f6b5e;border:1px solid #bfe0d8;border-radius:4px;padding:1px 5px;white-space:nowrap}

/* Insights */
.pxc-akpi .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:500}
.pxc-stage-row{display:flex;gap:10px;flex-wrap:wrap}
.pxc-stage{flex:1;min-width:96px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pxc-stage .n{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink)}
.pxc-pl-pos{color:#1f6b5e;font-weight:600}
.pxc-pl-neg{color:#b4502e;font-weight:700}
.pxc-pl-thin{color:#9a6a1f;font-weight:600}
.pxc-conc{margin:0 20px 4px;padding:11px 14px;border-radius:9px;font-size:13px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.pxc-conc.warn{background:#fbf0e7;border-color:#e6c9ad;color:#8a5a24}
.pxc-entsw{position:relative}
.pxc-entsw>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.pxc-entsw>summary::-webkit-details-marker{display:none}
.pxc-entsw[open]>summary{border-color:var(--clay);color:var(--clay)}
.pxc-entsw-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;z-index:60;box-shadow:0 10px 28px rgba(0,0,0,.1)}
.pxc-entsw-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);text-decoration:none}
.pxc-entsw-menu a:hover{background:var(--surface-2)}
.pxc-entsw-menu a.on{color:var(--clay);font-weight:600}
.pxc-entsw-sep{border-top:1px solid var(--line);margin:6px 4px}

/* ============================================================
   GLASSMORPHISM + MOTION  (2.50 visual system)
   Frosted translucent surfaces over an ambient colour field,
   with tasteful entrance + hover motion. Brand colours unchanged.
   ============================================================ */
:root{
  --glass:        rgba(255,255,255,.82);
  --glass-2:      rgba(255,255,255,.66);
  --glass-line:   rgba(17,18,20,.08);
  --glass-blur:   saturate(120%) blur(14px);
  --glass-shadow: 0 10px 30px -16px rgba(17,18,20,.18), 0 2px 8px -4px rgba(17,18,20,.08);
  --ease-out:     cubic-bezier(.22,.68,.16,1);
}

/* Minimal ambient: a single faint accent whisper, nothing more */
body::before{
  content:"";position:fixed;inset:-25vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 100% -6%, rgba(248,110,38,.05), transparent 58%);
  animation:pxc-drift 24s ease-in-out infinite alternate;
}
@keyframes pxc-drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-2.5%,0) scale(1.08)}
}

/* ---- Frosted glass surfaces ---- */
.pxc-card,
.pxc-block{
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.55);
}
.pxc-card-head{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14));
  border-bottom:1px solid rgba(230,224,211,.7);
}

.pxc-kpi{
  background:linear-gradient(158deg,rgba(255,255,255,.62),var(--glass-2) 70%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
/* single-accent top line, subtle shimmer */
.pxc-kpi::before{
  height:2px;opacity:.7;
  background:linear-gradient(90deg,var(--clay),var(--clay-deep),var(--clay));
  background-size:200% 100%;
  animation:pxc-shimmer 6s linear infinite;
}
.pxc-kpi:hover::before{opacity:1}
@keyframes pxc-shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

.pxc-akpi{
  background:linear-gradient(158deg,rgba(255,255,255,.6),var(--glass-2) 72%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}

/* Topbar + entity switcher: stronger frost */
.pxc-topbar{
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(17,18,20,.08);
}
.pxc-entsw>summary{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:var(--glass-line);
}
.pxc-entsw-menu{
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line);box-shadow:var(--shadow-lg);
}

/* Dark glass on the forest summary + login aside */
.pxc-summary{
  background:linear-gradient(165deg,rgba(30,31,35,.94),rgba(20,21,24,.9));
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Login card floats as glass over the ambient field */
.pxc-login-main{
  background:
    radial-gradient(circle at 1px 1px, rgba(17,18,20,.11) 1.5px, transparent 2px) 0 0/23px 23px,
    radial-gradient(680px 560px at 10% 98%, rgba(248,110,38,.12), transparent 58%),
    radial-gradient(640px 540px at 55% 42%, rgba(255,255,255,.78), transparent 70%);
}
.pxc-login-box{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.64));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:22px;
  padding:34px 32px;box-shadow:var(--glass-shadow);
}

/* ---- Motion: entrance + physics ---- */
@keyframes pxc-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pxc-fade{from{opacity:0}to{opacity:1}}

.pxc-head{animation:pxc-rise .55s var(--ease-out) both}
.pxc-kpi{animation:pxc-rise .6s var(--ease-out) both}
.pxc-kpis .pxc-kpi:nth-child(1){animation-delay:.05s}
.pxc-kpis .pxc-kpi:nth-child(2){animation-delay:.12s}
.pxc-kpis .pxc-kpi:nth-child(3){animation-delay:.19s}
.pxc-kpis .pxc-kpi:nth-child(4){animation-delay:.26s}
.pxc-card{animation:pxc-rise .6s var(--ease-out) both;animation-delay:.28s}
.pxc-split>*{animation:pxc-rise .6s var(--ease-out) both;animation-delay:.34s}

/* keep the hover-lift but give it spring-like easing */
.pxc-kpi{transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out),border-color .25s var(--ease-out)}
.pxc-kpi:hover{transform:translateY(-4px) scale(1.012)}

.pxc-btn{transition:background .15s,border-color .15s,color .15s,box-shadow .2s var(--ease-out),transform .12s var(--ease-out)}
.pxc-btn-primary:hover{transform:translateY(-1px)}

/* sidebar active marker grows in */
.pxc-navlist a.is-active::before{animation:pxc-bar .3s var(--ease-out) both}
@keyframes pxc-bar{from{transform:translateY(-50%) scaleY(0)}to{transform:translateY(-50%) scaleY(1)}}
.pxc-navlist a{transition:background .18s,color .18s,box-shadow .18s,padding-left .18s var(--ease-out)}
.pxc-navlist a:hover{padding-left:15px}

.pxc-table tbody tr{transition:background .16s var(--ease-out)}
.pxc-chip,.pxc-tag,.pxc-pill{transition:transform .15s var(--ease-out),border-color .15s,background .15s,color .15s,box-shadow .15s}
.pxc-chip:hover{transform:translateY(-1px)}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body::before{animation:none}
}

/* Print: drop glass so documents stay crisp white */
@media print{
  body::before{display:none!important}
  .pxc-card,.pxc-block,.pxc-kpi,.pxc-akpi{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important;box-shadow:none!important;animation:none!important}
}

/* ============================================================
   LEGAL / GENERIC PAGE (page.php) — Terms, Privacy, etc.
   Clean, readable public document; no app shell.
   ============================================================ */
body.pxc-doc-page{background:var(--bg)}
.pxc-legal{max-width:760px;margin:0 auto;padding:34px 24px 80px}
.pxc-legal-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 26px;border-bottom:1px solid var(--line);margin-bottom:40px}
.pxc-legal-logo img{height:28px;width:auto;display:block}
.pxc-legal-back{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .15s}
.pxc-legal-back:hover{color:var(--clay)}
.pxc-legal-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1.05;letter-spacing:-.025em;margin:0;color:var(--ink)}
.pxc-legal-updated{font-size:13px;color:var(--muted);margin:12px 0 0}
.pxc-legal-content{font-size:16px;line-height:1.72;color:var(--ink-2);margin-top:32px}
.pxc-legal-content > *:first-child{margin-top:0}
.pxc-legal-content h2{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.01em;color:var(--ink);margin:40px 0 12px}
.pxc-legal-content h3{font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 10px}
.pxc-legal-content p{margin:0 0 16px}
.pxc-legal-content ul,.pxc-legal-content ol{margin:0 0 18px;padding-left:22px}
.pxc-legal-content li{margin:0 0 8px}
.pxc-legal-content a{color:var(--clay);text-decoration:underline;text-underline-offset:2px}
.pxc-legal-content strong{color:var(--ink)}
.pxc-legal-content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.pxc-legal-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.pxc-legal-content th,.pxc-legal-content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.pxc-legal-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-align:center}
@media (max-width:560px){ .pxc-legal{padding:24px 18px 64px} .pxc-legal-content{font-size:15.5px} }

/* ── v2.53.0 — Unit pricing (price per unit × quantity) ─────────────── */
.pxc-unit-toggle{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;font-weight:600;color:var(--ink,#1a1a1a);cursor:pointer;user-select:none}
.pxc-unit-toggle input{width:16px;height:16px;accent-color:var(--brand,#f86e26);cursor:pointer}
.pxc-unit-fields{margin-top:12px;padding:14px;border:1px solid var(--line,#e6e6e6);border-radius:10px;background:rgba(242,101,34,.03)}
.pxc-unit-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.pxc-unit-grid .pxc-field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--muted,#6a6a6a)}
.pxc-unit-grid .pxc-field input{width:100%;padding:9px 11px;border:1px solid var(--line,#e6e6e6);border-radius:8px;font-size:14px}
.pxc-unit-fields [data-unit-preview]{font-weight:600;color:var(--brand,#f86e26)}
.pxc-worth-card.is-unit .pxc-worth-input input{background:#f4f4f4;color:#555}
/* v2.57.2: the worth card is dark — give its unit-pricing controls dark-card colours
   (the toggle label and panel were dark-on-dark and unreadable). */
.pxc-worth-card{color-scheme:dark}
.pxc-worth-card .pxc-unit-toggle{color:var(--shell-ink);margin-top:16px}
.pxc-worth-card .pxc-unit-toggle:hover{color:#fff}
.pxc-worth-card .pxc-unit-fields{border-color:var(--shell-line);background:rgba(255,255,255,.04)}
.pxc-worth-card .pxc-unit-grid .pxc-field label{color:var(--shell-mut)}
.pxc-worth-card .pxc-unit-grid .pxc-field input{background:rgba(255,255,255,.06);border-color:var(--shell-line);color:#fff}
.pxc-worth-card .pxc-unit-grid .pxc-field input::placeholder{color:var(--shell-mut)}
.pxc-worth-card .pxc-unit-grid .pxc-field input:focus{outline:none;border-color:var(--clay-deep);box-shadow:var(--ring)}
.pxc-worth-card .pxc-unit-fields [data-unit-preview]{color:var(--gold)}
.pxc-worth-card.is-unit .pxc-worth-input input{background:transparent;color:var(--shell-ink)}
/* Per-unit cost toggle inside the amount cell */
.pxc-perunit{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:11px;color:var(--muted,#6a6a6a);white-space:nowrap;cursor:pointer}
.pxc-perunit input{width:13px;height:13px;accent-color:var(--brand,#f86e26);cursor:pointer}
.pxc-rep-row.is-hours .pxc-perunit{display:none}
/* Per-unit summary cell */
.ss-cell.ss-unit .ss-v.pos{color:#1a7f37}
.ss-cell.ss-unit .ss-v.neg{color:#c0392b}
@media (max-width:640px){.pxc-unit-grid{grid-template-columns:1fr 1fr}.pxc-unit-grid .pxc-field:first-child{grid-column:1 / -1}}

/* ============================================================
   v2.57.4 — Team & invitations, accept page
   ============================================================ */
.pxc-notice.warn{background:#fbf1dd;color:#7a5610;border:1px solid #ecd9ad}
.pxc-seats{margin:0 0 20px}
.pxc-seats-bar{display:flex;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.pxc-seats-bar .used{background:var(--clay)}
.pxc-seats-bar .held{background:repeating-linear-gradient(45deg,var(--gold) 0 4px,#f9b88f 4px 8px)}
.pxc-seats-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.pxc-seats-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.pxc-seats-legend .dot.used{background:var(--clay)}
.pxc-seats-legend .dot.held{background:var(--gold)}
.pxc-seats-legend .free{margin-left:auto;font-weight:600;color:var(--ink-2)}

.pxc-invite{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:0 0 24px}
.pxc-invite-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.pxc-invite-head h3{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--ink)}
.pxc-invite-head p{margin:0;font-size:13px;color:var(--muted)}
.pxc-invite-ic{width:38px;height:38px;border-radius:10px;background:var(--clay-soft);color:var(--clay);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pxc-invite-ic svg{width:18px;height:18px}
.pxc-invite-form .pxc-field input,.pxc-invite-form .pxc-field textarea{background:#fff}
.pxc-invite-form .pxc-field label .opt{font-weight:500;color:var(--muted)}
.pxc-role-pick{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pxc-role-pick legend{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.pxc-role-tile{position:relative;display:block;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px 12px 40px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pxc-role-tile:hover{border-color:#d4ccbc}
.pxc-role-tile input{position:absolute;left:14px;top:14px;margin:0;accent-color:var(--clay);width:16px;height:16px}
.pxc-role-tile .t{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.pxc-role-tile .d{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.pxc-role-tile:has(input:checked){border-color:var(--clay-deep);box-shadow:var(--ring)}
.pxc-role-tile input:focus-visible{outline:2px solid var(--clay-deep);outline-offset:2px}
.pxc-invite-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pxc-invite-actions .pxc-btn:disabled{opacity:.65;cursor:progress}
.pxc-invite-full{font-size:13.5px;color:#7a5610;background:#fbf1dd;border:1px solid #ecd9ad;border-radius:9px;padding:12px 14px}
.pxc-invite-full a{font-weight:600;color:var(--clay-deep);margin-left:4px}

.pxc-team-sub{margin:26px 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}
.pxc-team-sub span{font-size:11px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink-2)}
.pxc-role-owner{background:var(--clay-soft);color:var(--clay-deep);border:1px solid rgba(248,110,38,.25)}
.pxc-role-manager{background:#e7eef6;color:#1c4e80;border:1px solid #c7dbef}
.pxc-role-viewer{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.pxc-inv-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.pxc-inv-status::before{content:"";width:7px;height:7px;border-radius:50%}
.pxc-inv-status.pending{color:#8a6411}.pxc-inv-status.pending::before{background:var(--gold)}
.pxc-inv-status.expired{color:var(--muted)}.pxc-inv-status.expired::before{background:#b9bbc0}
.pxc-team-table tr.is-expired td.proj{color:var(--muted)}
.pxc-inv-actions{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.pxc-inv-actions form{margin:0}
.pxc-inv-actions .pxc-btn{padding:6px 11px;font-size:12.5px}
@media (max-width:700px){
  .pxc-role-pick{grid-template-columns:1fr}
  .pxc-invite{padding:16px}
  .pxc-seats-legend .free{margin-left:0}
}

/* Accept invitation page */
.pxc-accept-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin:0 0 8px}
.pxc-accept-role{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:-8px 0 16px;font-size:13px;color:var(--ink-2);line-height:1.45}
.pxc-accept-role .pxc-pill{flex-shrink:0;margin-top:1px}
.pxc-accept-note{margin:0 0 18px;padding:12px 14px;background:#fdf3ee;border-left:3px solid var(--clay);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink);line-height:1.55}
.pxc-accept-note cite{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--muted)}
.pxc-accept-warn{background:#fbf1dd;border:1px solid #ecd9ad;color:#7a5610;padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.pxc-accept-hint{font-weight:500;color:var(--muted)}
.pxc-login-box input[type=email]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font-size:14px;margin-bottom:16px;background:#fff;font-family:var(--sans);box-shadow:var(--shadow-xs)}
.pxc-login-box input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.pxc-login-box .pxc-accept-help{margin:24px 0 0;text-align:center;font-size:13px}

/* ============================================================
   v2.58.0 — Owner + Employees, passwordless sign-in, onboarding
   ============================================================ */
.pxc-side-plan{font-size:11.5px;color:var(--shell-mut);margin:2px 0 8px;line-height:1.4}
.pxc-people{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.pxc-people-box{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface)}
.pxc-people-box .k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pxc-people-box .v{display:block;font-family:var(--serif);font-size:28px;font-weight:500;color:var(--ink);line-height:1.2;margin:2px 0}
.pxc-people-box .v small{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:500}
.pxc-people-box .s{display:block;font-size:12.5px;color:var(--muted)}
.pxc-people-note{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted)}
.pxc-invite-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 14px}
.pxc-invite-more[open] summary{margin-bottom:0}
.pxc-invite-form .pxc-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pxc-role-form{margin:0}
.pxc-role-form select{padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:8px;font-family:var(--sans);font-size:13px;background:#fff}
.pxc-team-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:18px!important}
@media (max-width:700px){.pxc-people,.pxc-invite-form .pxc-row2{grid-template-columns:1fr}}

.pxc-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:4px;margin:0 0 18px}
.pxc-auth-tabs button{border:0;background:transparent;border-radius:7px;padding:9px 8px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.pxc-auth-tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.pxc-auth-hint{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.pxc-login-box .pxc-code-input{font-family:var(--mono);font-size:24px!important;letter-spacing:.35em;text-align:center;padding:14px!important}
.pxc-accept-who{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:0 0 14px;font-size:13px}
.pxc-accept-who .k{color:var(--muted)}
.pxc-accept-who .v{font-weight:600;color:var(--ink);word-break:break-all;text-align:right}

.pxc-onboard{position:relative;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:var(--r-lg);padding:20px 24px;margin:0 0 24px;box-shadow:var(--shadow-sm)}
.pxc-onboard-welcome{border-left-color:var(--pos)}
.pxc-onboard-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.pxc-onboard h2{font-family:var(--display);font-weight:500;font-size:21px;margin:0}
.pxc-onboard p{margin:6px 0 0;color:var(--ink-2);font-size:14px}
.pxc-onboard-eyebrow{font-size:11px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)!important;margin:0 0 4px!important}
.pxc-onboard-plan{font-size:12px;font-weight:700;color:var(--clay-deep);background:var(--clay-soft);border-radius:999px;padding:5px 12px}
.pxc-onboard-steps{list-style:none;margin:0;padding:0}
.pxc-onboard-steps li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.pxc-onboard-steps li:first-child{border-top:0}
.pxc-onboard-steps .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:#fff}
.pxc-onboard-steps li.done .tick{background:var(--pos);border-color:var(--pos)}
.pxc-onboard-steps li.done strong{text-decoration:line-through;color:var(--muted)}
.pxc-onboard-steps .txt{flex:1;color:var(--ink)}
.pxc-onboard-steps .txt span{color:var(--muted);font-size:12.5px}
.pxc-onboard-steps em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 7px;margin-left:4px}
.pxc-onboard-steps .pxc-btn{padding:6px 12px;font-size:12.5px}
.pxc-onboard-dismiss{text-align:right;margin:4px 0 0}
.pxc-onboard-dismiss button{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}

/* ============================================================
   BRAND 2.58.3/2.58.4 — Option C type (Inter) + brand palette
   H1/H2 in Fraunces (navy where on light); secondary actions in Teal.
   ============================================================ */
h1,h2{font-family:var(--display)}
.pxc-card-head h2{font-family:var(--display);color:var(--heading)}
.pxc-onboard h2,.pxc-legal-title,.pxc-legal-content h2{color:var(--heading)}
.pxc-chip.is-on,.pxc-doc-chips .pxc-chip.is-on{background:var(--teal);color:#fff;border-color:var(--teal)}
.pxc-btn-ghost{color:var(--teal);border-color:var(--teal)}
.pxc-btn-ghost:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}

/* ============================================================
   WCAG AA 2.58.5 — PixelCost Orange (#F86E26) stays the background colour;
   text ON it is Charcoal (5.98:1). Hover/pressed uses #C2480C with white text
   (4.97:1). Orange used AS text/icons switches to #C2480C (4.97:1 on white).
   ============================================================ */
.pxc-btn-primary:hover,.pxc-btn-primary:active{background:var(--clay-deep);color:#fff}
.pxc-imp-step.on,.pxc-entsw[open]>summary,.pxc-q-title,.pxc-invite-ic,.pxc-accept-eyebrow,.pxc-unit-fields [data-unit-preview]{color:var(--clay-deep)}
.pxc-onboard-eyebrow{color:var(--clay-deep)!important}
/* Template inline styles that set orange text (tags, small links) */
[style*="color:var(--clay)"]{color:var(--clay-deep)!important}
/* Keyboard focus: visible everywhere, white on dark surfaces */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--clay-deep);outline-offset:2px}
.pxc-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.pxc-side a:focus-visible,.pxc-side button:focus-visible,.pxc-side summary:focus-visible,.pxc-login-aside a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}

/* ============================================================
   v2.58.7 — PRE-LAUNCH FIXES (F1–F4). Screen-only unless noted.
   ============================================================ */

/* F1: Download PDF. html2pdf copies the sheet into .html2pdf__container and
   captures that copy: it keeps its desktop A4 layout on every device (the
   phone rules below only target the on-screen sheet, "body > .pxc-sheet") and
   drops the on-screen margin, shadow and fixed A4 min-height that produced a
   blank trailing page. */
.html2pdf__container .pxc-sheet{width:794px!important;min-height:0!important;margin:0!important;box-shadow:none!important;border-radius:0!important}

/* F2: documents on phones (quotation, invoice, receipt, statement). */
@media screen and (max-width:600px){
  .pxc-quote-toolbar{flex-wrap:wrap;gap:8px;margin-top:14px;padding:0 10px}
  .pxc-quote-toolbar > div{flex-wrap:wrap;justify-content:flex-start!important;gap:8px!important;width:100%}
  .pxc-quote-toolbar .pxc-btn{padding:8px 12px;font-size:13px;white-space:nowrap}
  .pxc-quote-toolbar form{flex-wrap:wrap}
  body > .pxc-sheet{margin:12px 10px 28px;padding:24px 14px;min-height:0}
  body > .pxc-sheet .pxc-q-head{display:block}
  body > .pxc-sheet .pxc-q-brand,body > .pxc-sheet .pxc-q-meta{display:block;width:auto;padding-right:0}
  body > .pxc-sheet .pxc-q-meta{text-align:left;margin-top:18px}
  body > .pxc-sheet .pxc-q-wordmark{font-size:26px;max-width:none}
  body > .pxc-sheet .pxc-q-wordmark.is-long{font-size:20px}
  body > .pxc-sheet .pxc-q-logo{max-width:200px;max-height:64px}
  body > .pxc-sheet .pxc-q-title{font-size:22px;margin-bottom:8px}
  body > .pxc-sheet .pxc-q-metatable{margin-left:0;width:100%}
  body > .pxc-sheet .pxc-q-metatable td{padding:4px 0;text-align:left;vertical-align:top}
  body > .pxc-sheet .pxc-q-metatable td:first-child{width:36%;padding-right:12px}
  body > .pxc-sheet .pxc-q-metatable td:last-child{text-align:right;overflow-wrap:anywhere}
  body > .pxc-sheet .pxc-q-billto{font-size:16px}
  body > .pxc-sheet .pxc-q-table thead th{padding:10px 10px}
  body > .pxc-sheet .pxc-q-table tbody td{padding:10px 10px;font-size:12.5px}
  body > .pxc-sheet .pxc-q-sub-row td{padding:7px 10px}
  body > .pxc-sheet .pxc-q-total-row td{padding:12px 10px;font-size:16px}
  body > .pxc-sheet .pxc-q-table td.r,body > .pxc-sheet .pxc-q-table th.r,body > .pxc-sheet .pxc-q-sub-row td,body > .pxc-sheet .pxc-q-total-row td{white-space:nowrap}
  body > .pxc-sheet .pxc-q-signoff{gap:28px;margin-top:36px}
  /* Statement: compact columns; if a very narrow phone still can't fit them,
     the table scrolls sideways inside the sheet (never the whole page). */
  body > .pxc-sheet .pxc-led-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
    /* edge shadow appears only while more columns are off to the side */
    background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left/24px 100% no-repeat local,
               linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right/24px 100% no-repeat local,
               radial-gradient(farthest-side at 0 50%,rgba(20,38,61,.18),transparent) left/10px 100% no-repeat scroll,
               radial-gradient(farthest-side at 100% 50%,rgba(20,38,61,.18),transparent) right/10px 100% no-repeat scroll}
  body > .pxc-sheet .pxc-led-table thead th{padding:9px 4px;font-size:9.5px;letter-spacing:.03em}
  body > .pxc-sheet .pxc-led-table tbody td,body > .pxc-sheet .pxc-led-table tfoot td{padding:9px 4px;font-size:11px}
  body > .pxc-sheet .pxc-led-table td.r{white-space:nowrap}
  body > .pxc-sheet .pxc-led-cat{font-size:9px;padding:1px 5px;word-break:break-all}
}
@media screen and (max-width:360px){
  body > .pxc-sheet{margin:10px 6px 24px;padding:20px 10px}
  body > .pxc-sheet .pxc-led-table thead th{padding:8px 3px;font-size:9px}
  body > .pxc-sheet .pxc-led-table tbody td,body > .pxc-sheet .pxc-led-table tfoot td{padding:8px 3px;font-size:10px}
}
/* 2.58.8: invoice item table on phones. The invoice uses the same table as
   the quotation, but its first header ("Description") is one unbreakable
   word and its summary carries Paid to date / Balance due, so its minimum
   width crossed the sheet edge first and amounts ran past the document.
   Tighter cell padding, wrapping column headers and a smaller total size
   keep every column inside the sheet (no amount or total ever wraps).
   Invoice only — the quotation is unchanged. */
@media screen and (max-width:600px){
  body > #pxc-invoice .pxc-q-table th,body > #pxc-invoice .pxc-q-table td{padding-left:5px;padding-right:5px}
  body > #pxc-invoice .pxc-q-table thead th{white-space:normal;letter-spacing:.04em}
  body > #pxc-invoice .pxc-q-total-row td{font-size:14px}
}
@media screen and (max-width:400px){
  body > #pxc-invoice .pxc-q-table th,body > #pxc-invoice .pxc-q-table td{padding-left:3px;padding-right:3px}
  body > #pxc-invoice .pxc-q-table tbody td,body > #pxc-invoice .pxc-q-sub-row td{font-size:11.5px}
  body > #pxc-invoice .pxc-q-total-row td{font-size:13px}
}
/* F2: invoice payment panel — tracks may shrink; its tables don't need the
   480px phone minimum other tables use. */
@media screen and (max-width:840px){
  .pxc-pay-panel{grid-template-columns:minmax(0,1fr);padding:0 10px}
  .pxc-pay-card{min-width:0}
  .pxc-pay-panel .pxc-table{min-width:0}
  .pxc-pay-panel .pxc-table td{padding:10px 6px 10px 0}
}

/* F3: editors on phones — every input stays on screen, no sideways scroll. */
@media screen and (max-width:860px){
  .pxc-worth-input input{min-width:0;width:100%} /* project worth field was ~530px wide on phones */
}
@media screen and (max-width:600px){
  .pxc-rep{overflow-x:visible}
  /* Costs: one compact card per line. */
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-head{display:none}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row{
    min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;gap:8px;
    padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,#f6f8fb);margin-bottom:10px
  }
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>input[type=text]{grid-column:1 / 3;grid-row:1}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>.pxc-del{grid-column:3;grid-row:1;width:38px;height:40px}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>select{grid-column:1 / 2;grid-row:2}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>input[type=date]{grid-column:2 / 4;grid-row:2}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>.pxc-amtcell{grid-column:1 / 4;grid-row:3}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row>.pxc-rcpt{grid-column:1 / 4;grid-row:4}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row.is-hours .pxc-amtcell .pxc-hrs,
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row.is-hours .pxc-amtcell .pxc-rate{flex:1 1 0;width:auto}
  .pxc-rep[data-group="pxc_costs"] .pxc-rep-row.is-hours .pxc-amtcell .pxc-amt{flex:1.4 1 0}
  /* Money in + quotation lines: description on its own row, numbers below. */
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-head,
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-row{flex-wrap:wrap}
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-head>span:first-child,
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-row>input[type=text]:first-of-type{flex:1 1 100%!important}
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-row>input:not([type=text]){flex:1 1 0!important;min-width:0}
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-head .del-col{display:none}
  .pxc-rep:not([data-group="pxc_costs"]) .pxc-rep-row{padding-bottom:10px;border-bottom:1px solid var(--line-2,#eef1f5)}
}

/* F4: mobile menu — close button, real backdrop, scroll lock. */
.pxc-side-close{display:none}
.pxc-nav-backdrop{display:none}
@media (max-width:860px){
  .pxc-side-close{
    display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:10px;z-index:2;
    width:40px;height:40px;border:1px solid var(--shell-line);border-radius:10px;background:transparent;color:#fff;cursor:pointer
  }
  .pxc-side-close:hover{background:var(--shell-2)}
  .pxc-logo{padding-right:60px}
  .pxc-app.nav-open .pxc-side{box-shadow:0 18px 48px rgba(0,0,0,.35)}
  .pxc-app.nav-open .pxc-nav-backdrop{display:block;position:fixed;inset:0;z-index:45;background:rgba(10,18,30,.45)}
  html.pxc-nav-lock,html.pxc-nav-lock body{overflow:hidden}
}


/* ============================================================
   PLAN & BILLING (2.58.9) — page-billing.php only. Light, section-based
   layout. Colours are scoped to .pxc-billing / body.pxc-billing-page so
   the rest of the app is unchanged (teal main action on this page only).
   ============================================================ */
body.pxc-billing-page{background:#f8fafc}
.pxc-billing{
  --pxb-navy:#14263d;--pxb-teal:#007f78;--pxb-teal-deep:#00655f;--pxb-teal-soft:rgba(0,127,120,.09);
  --pxb-line:#e6eaf0;--pxb-hair:#eef1f5;--pxb-text:#4a5566;--pxb-mut:#6b7585;
  max-width:900px;color:var(--pxb-navy);
}
.pxc-billing .pxb-head{margin:4px 0 36px}
.pxc-billing .pxb-sec{margin:0 0 40px}
.pxc-billing .pxb-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;margin:0 0 12px}
.pxc-billing .pxb-title{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--pxb-navy);margin:0}
.pxc-billing .pxb-box{background:#fff;border:1px solid var(--pxb-line);border-radius:14px;box-shadow:0 1px 2px rgba(20,38,61,.04);overflow:hidden}
.pxc-billing p{margin:0}
.pxc-billing .pxb-label{font-size:14.5px;font-weight:600;color:var(--pxb-navy);line-height:1.4;margin:0}
.pxc-billing .pxb-value{font-size:14px;color:var(--pxb-text);line-height:1.55;margin:3px 0 0}
.pxc-billing .pxb-break{overflow-wrap:anywhere}

/* Rows: content left, action right */
.pxc-billing .pxb-line{display:flex;align-items:center;gap:16px;padding:20px 22px}
.pxc-billing .pxb-line + .pxb-line{border-top:1px solid var(--pxb-hair)}
.pxc-billing .pxb-line-main{flex:1;min-width:0}
.pxc-billing .pxb-ic{width:22px;height:22px;flex:0 0 22px;color:var(--pxb-mut)}

/* Current plan */
.pxc-billing .pxb-kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-deep,#c2480c);margin:0 0 6px}
.pxc-billing .pxb-plan-name{font-family:var(--display);font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--pxb-navy)}
.pxc-billing .pxb-sub{font-size:14px;color:var(--pxb-text);margin:6px 0 0}
.pxc-billing .pxb-plan{align-items:flex-start;padding:24px 22px 22px}
.pxc-billing .pxb-status{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--pxb-teal);background:var(--pxb-teal-soft);border-radius:999px;padding:6px 12px;white-space:nowrap}
.pxc-billing .pxb-dot{width:7px;height:7px;border-radius:50%;background:var(--pxb-teal)}
.pxc-billing .pxb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--pxb-hair)}
.pxc-billing .pxb-stats > div{padding:16px 22px}
.pxc-billing .pxb-stats > div + div{border-left:1px solid var(--pxb-hair)}
.pxc-billing .pxb-stats dt{font-size:12.5px;color:var(--pxb-mut);margin:0 0 4px}
.pxc-billing .pxb-stats dd{margin:0;font-size:15px;font-weight:600;color:var(--pxb-navy);font-variant-numeric:tabular-nums}
.pxc-billing .pxb-note{display:block;font-size:12.5px;font-weight:400;color:var(--pxb-mut);margin-top:2px}

/* Stacked label / value list (billing information) */
.pxc-billing .pxb-list{margin:0;padding:0 22px}
.pxc-billing .pxb-item{padding:16px 0}
.pxc-billing .pxb-item + .pxb-item{border-top:1px solid var(--pxb-hair)}
.pxc-billing .pxb-item dd{margin:3px 0 0}
.pxc-billing .pxb-boxnote{font-size:13px;color:var(--pxb-mut);padding:12px 22px;border-top:1px solid var(--pxb-hair);background:#fbfcfd}
.pxc-billing .pxb-empty{padding:22px}

/* Actions */
.pxc-billing .pxb-btn,.pxc-billing .pxb-pill{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.2;border-radius:999px;padding:9px 16px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.pxc-billing .pxb-btn{background:var(--pxb-teal);color:#fff;border:1px solid var(--pxb-teal)}
.pxc-billing .pxb-btn:hover{background:var(--pxb-teal-deep);border-color:var(--pxb-teal-deep);color:#fff}
.pxc-billing .pxb-pill{background:#fff;color:var(--pxb-navy);border:1px solid var(--pxb-line)}
.pxc-billing .pxb-pill:hover{background:#f3f5f8;border-color:#d5dbe3}
.pxc-billing .pxb-btn:focus-visible,.pxc-billing .pxb-pill:focus-visible{outline:none;box-shadow:var(--ring)}

@media screen and (max-width:600px){
  .pxc-billing .pxb-head{margin-bottom:28px}
  .pxc-billing .pxb-sec{margin-bottom:32px}
  .pxc-billing .pxb-line,.pxc-billing .pxb-plan{padding:18px 16px}
  .pxc-billing .pxb-list{padding:0 16px}
  .pxc-billing .pxb-empty,.pxc-billing .pxb-boxnote{padding-left:16px;padding-right:16px}
  .pxc-billing .pxb-plan-name{font-size:24px}
  .pxc-billing .pxb-stats{grid-template-columns:minmax(0,1fr)}
  .pxc-billing .pxb-stats > div{padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .pxc-billing .pxb-stats > div + div{border-left:0;border-top:1px solid var(--pxb-hair)}
  .pxc-billing .pxb-stats dt{margin:0}
  .pxc-billing .pxb-stats dd{text-align:right}
  /* Action rows stack: text, then a full-width button */
  .pxc-billing .pxb-line:not(.pxb-plan){flex-wrap:wrap}
  .pxc-billing .pxb-line .pxb-btn,.pxc-billing .pxb-line .pxb-pill{width:100%;padding:11px 16px}
}