/* ============================================================
   ProjectTelemetry — Unified Labor Spine
   assets/labor-spine.css   ·   window.PTLaborSpine
   Shares app tokens (--accent, --ink, --ink-soft, --ink-faint, --bd,
   --white, --bg2, --shadow). House style matches the Curves /
   Production / Cost Codes dashboards.

   The four layers get ONE colour system, used everywhere (bars,
   legend swatches, tiles, table numbers) so a number's colour always
   tells you which layer it is:
     Plan   = neutral ink   Load = blue
     Earn   = green         Actual = app accent
   ============================================================ */
.ls-root {
  --ls-plan:   var(--ink-soft);
  --ls-load:   #3B82F6;
  --ls-earn:   #16A34A;
  --ls-actual: var(--accent);
  --ls-neg:    #DC2626;
  --ls-pos:    #16A34A;
  --ls-warn:   #D97706;
}
[data-theme="blueprint"] .ls-root {
  --ls-load: #60A5FA;
  --ls-earn: #34D399;
  --ls-neg:  #F87171;
  --ls-pos:  #34D399;
  --ls-warn: #FBBF24;
}

/* ── States ──────────────────────────────────────────────────── */
.ls-load, .ls-empty { text-align:center; padding:48px 20px; color:var(--ink-faint); }
.ls-load i { animation:spin 1s linear infinite; margin-right:6px; }
.ls-empty i { font-size:40px; opacity:.5; }
.ls-empty h3 { margin:12px 0 4px; color:var(--ink-soft); font-size:16px; }
.ls-empty p { margin:0 auto 14px; font-size:13px; max-width:500px; line-height:1.5; }
.ls-empty.sm { padding:28px 16px; }

/* ── Header ──────────────────────────────────────────────────── */
.ls-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.ls-head-l { display:flex; align-items:center; gap:12px; }
.ls-title { font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.ls-sub { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

/* ── Legend ──────────────────────────────────────────────────── */
.ls-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; padding:8px 12px;
  border:1px solid var(--bd); border-radius:10px; background:var(--bg2); }
.ls-lg { font-size:11.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; cursor:default; }
.ls-lg-note { font-size:11px; color:var(--ink-faint); margin-left:auto; }
.ls-sw { display:inline-block; width:11px; height:11px; border-radius:3px; flex:none; }
.ls-sw.plan   { background:var(--ls-plan); }
.ls-sw.load   { background:var(--ls-load); }
.ls-sw.earn   { background:var(--ls-earn); }
.ls-sw.actual { background:var(--ls-actual); }

/* ── KPI tiles ───────────────────────────────────────────────── */
.ls-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.ls-kpi { position:relative; border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:14px 16px; overflow:hidden; box-shadow:var(--shadow); }
.ls-kpi-i { position:absolute; top:12px; right:12px; font-size:18px; color:var(--ink-faint); opacity:.55; }
.ls-kpi-v { font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
.ls-kpi-l { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-top:5px; }
.ls-kpi-s { font-size:11px; color:var(--ink-faint); margin-top:3px; }
.ls-kpi.accent { border-color:color-mix(in srgb,var(--accent) 40%,var(--bd)); }
.ls-kpi.accent .ls-kpi-v, .ls-kpi.accent .ls-kpi-i { color:var(--accent); }
.ls-kpi.pos .ls-kpi-v { color:var(--ls-pos); }
.ls-kpi.neg .ls-kpi-v { color:var(--ls-neg); }
.ls-kpi.warn .ls-kpi-v { color:var(--ls-warn); }

/* ── Vertical 4-bar quad (plan | load | earn | actual) ───────── */
.ls-quad { display:flex; align-items:flex-end; gap:6px; height:70px; }
.ls-quad.big { height:96px; gap:10px; }
.ls-qbar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; flex:1; min-width:0; height:100%; }
.ls-qtrack { position:relative; width:100%; max-width:34px; flex:1; min-height:0; border-radius:4px 4px 0 0;
  background:color-mix(in srgb,var(--ink) 7%,transparent); display:flex; align-items:flex-end; overflow:hidden; }
.ls-qfill { width:100%; border-radius:4px 4px 0 0; min-height:2px; transition:height .3s ease; }
.ls-qfill.plan   { background:var(--ls-plan); opacity:.75; }
.ls-qfill.load   { background:var(--ls-load); }
.ls-qfill.earn   { background:var(--ls-earn); }
.ls-qfill.actual { background:var(--ls-actual); }
.ls-qbar.absent .ls-qtrack { background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--ink) 5%,transparent) 0 4px, transparent 4px 8px); }
.ls-qlab { font-size:10px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }
.ls-qval { font-size:11px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ls-qval.absent { color:var(--ink-faint); font-weight:500; }

/* ── Horizontal mini quad (table rows) ───────────────────────── */
.ls-hquad { display:flex; flex-direction:column; gap:2px; width:100%; min-width:120px; }
.ls-hbar { height:5px; border-radius:3px; min-width:2px; }
.ls-hbar.plan   { background:var(--ls-plan); opacity:.7; }
.ls-hbar.load   { background:var(--ls-load); }
.ls-hbar.earn   { background:var(--ls-earn); }
.ls-hbar.actual { background:var(--ls-actual); }
.ls-hbar.absent { background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--ink) 12%,transparent) 0 3px, transparent 3px 6px); opacity:.6; }

/* ── Portfolio project list ──────────────────────────────────── */
.ls-list-hd { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:4px 0 10px; }
.ls-list-note { font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-faint); opacity:.8; }
.ls-plist { display:flex; flex-direction:column; gap:10px; }
.ls-prow { display:flex; align-items:center; gap:16px; border:1px solid var(--bd); border-radius:12px; background:var(--white);
  padding:12px 16px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .15s, transform .1s; }
.ls-prow:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--bd)); transform:translateY(-1px); }
.ls-prow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ls-prow-main { flex:1 1 200px; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.ls-prow-name { font-size:14.5px; font-weight:700; color:var(--ink); }
.ls-prow-quad { flex:0 0 auto; }
.ls-prow-quad .ls-quad { height:56px; }
.ls-prow-pf { text-align:center; min-width:52px; }
.ls-pf-v { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); }
.ls-pf-v.pos { color:var(--ls-pos); } .ls-pf-v.neg { color:var(--ls-neg); } .ls-pf-v.warn { color:var(--ls-warn); }
.ls-pf-l { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.ls-prow-go { color:var(--ink-faint); flex:none; }

/* ── Health badge ────────────────────────────────────────────── */
.ls-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; width:fit-content; }
.ls-badge i { font-size:12px; }
.ls-badge.pos   { color:var(--ls-pos);  background:color-mix(in srgb,var(--ls-pos) 12%,transparent); }
.ls-badge.neg   { color:var(--ls-neg);  background:color-mix(in srgb,var(--ls-neg) 12%,transparent); }
.ls-badge.warn  { color:var(--ls-warn); background:color-mix(in srgb,var(--ls-warn) 14%,transparent); }
.ls-badge.muted { color:var(--ink-faint); background:color-mix(in srgb,var(--ink) 7%,transparent); }

/* ── Jump links (actionable-links standard) ──────────────────── */
.ls-jumps { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--bd); }
.ls-jumps-l { font-size:11.5px; font-weight:600; color:var(--ink-faint); }
.ls-jump { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; border:1px solid var(--bd); border-radius:8px; padding:5px 11px; background:var(--bg2); transition:border-color .15s,color .15s; }
.ls-jump:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--bd)); }
.ls-jump i { font-size:14px; }
.ls-jump.build { border-style:dashed; color:var(--ink-faint); }
.ls-build { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--bd)); border-radius:5px; padding:0 4px; }

/* ── Project header ──────────────────────────────────────────── */
.ls-phdr { display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; margin-bottom:12px; }
.ls-bigs { flex:1 1 420px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ls-big { border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:12px 14px; box-shadow:var(--shadow);
  border-top:3px solid var(--ls-plan); }
.ls-big.load   { border-top-color:var(--ls-load); }
.ls-big.earn   { border-top-color:var(--ls-earn); }
.ls-big.actual { border-top-color:var(--ls-actual); }
.ls-big.absent { opacity:.7; border-top-style:dashed; }
.ls-big-l { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px; }
.ls-big-v { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:4px; }
.ls-big-v .ls-u { font-size:13px; font-weight:600; color:var(--ink-faint); margin-left:2px; }
.ls-na { font-size:13px; font-weight:600; color:var(--ink-faint); font-style:italic; }
.ls-phdr-r { flex:0 0 auto; border:1px solid var(--bd); border-radius:12px; background:var(--white); box-shadow:var(--shadow);
  padding:12px 16px; display:flex; align-items:center; }

.ls-xnote { margin:2px 0 12px; }
.ls-xcheck { font-size:12px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.ls-xcheck i { color:var(--ls-plan); }
.ls-xcheck.absent { color:var(--ink-faint); }
.ls-xcheck b { color:var(--ink); }

/* ── Variance chips ──────────────────────────────────────────── */
.ls-vrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:18px; }
.ls-vchip { border:1px solid var(--bd); border-radius:10px; background:var(--white); padding:10px 14px; box-shadow:var(--shadow); }
.ls-vchip-v { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); }
.ls-vchip-l { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-top:3px; }
.ls-vchip.pos .ls-vchip-v { color:var(--ls-pos); }
.ls-vchip.neg .ls-vchip-v { color:var(--ls-neg); }
.ls-vchip.pf { border-color:color-mix(in srgb,var(--accent) 35%,var(--bd)); }
.ls-vchip.pf.pos .ls-vchip-v { color:var(--ls-pos); }
.ls-vchip.pf.neg .ls-vchip-v { color:var(--ls-neg); }
.ls-vchip.pf.warn .ls-vchip-v { color:var(--ls-warn); }

/* ── Per-cost-code table ─────────────────────────────────────── */
.ls-tblwrap { border:1px solid var(--bd); border-radius:12px; background:var(--white); box-shadow:var(--shadow); overflow-x:auto; }
.ls-tbl { width:100%; border-collapse:collapse; font-size:13px; min-width:720px; }
.ls-tbl thead th { text-align:right; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); padding:11px 12px; border-bottom:1px solid var(--bd); white-space:nowrap; background:var(--bg2); position:sticky; top:0; }
.ls-tbl thead th.ls-c-code, .ls-tbl thead th.ls-c-bar { text-align:left; }
.ls-tbl tbody td { padding:10px 12px; border-bottom:1px solid color-mix(in srgb,var(--bd) 60%,transparent); vertical-align:middle; }
.ls-tbl tbody tr:last-child td { border-bottom:none; }
.ls-tbl tbody tr:hover td { background:color-mix(in srgb,var(--accent) 4%,transparent); }
.ls-tbl tr.ls-unalloc td { background:color-mix(in srgb,var(--ls-warn) 6%,transparent); }
.ls-c-code { min-width:180px; }
.ls-code { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ls-desc { font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
.ls-c-bar { width:160px; }
.ls-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap; }
.ls-num.plan   { color:var(--ls-plan); }
.ls-num.load   { color:var(--ls-load); }
.ls-num.earn   { color:var(--ls-earn); }
.ls-num.actual { color:var(--ls-actual); }
.ls-num.pos { color:var(--ls-pos); } .ls-num.neg { color:var(--ls-neg); } .ls-num.warn { color:var(--ls-warn); }
.ls-num .ls-na { font-size:11px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:720px){
  .ls-bigs { grid-template-columns:repeat(2,1fr); }
  .ls-phdr-r { flex:1 1 100%; justify-content:center; }
  .ls-prow { flex-wrap:wrap; }
  .ls-prow-quad { order:3; flex:1 1 100%; }
  .ls-prow-quad .ls-quad { height:48px; }
}