/* ============================================================================
   LIVE DASHBOARD PREVIEW - ERP.AI app preview module
   Scoped SaaS-style product preview styles. Loaded separately from the global
   components stylesheet and governed by components.ownership.json.
   ============================================================================ */

@layer components {
  /* -- Live-dashboard app preview boundary -------------------------------- *
   * Embedded SaaS-style product preview rendered inside the ERP + CRM
   * marketing pages. The `.live-dashboard` scope is an explicit documented
   * design boundary (DESIGN.md §7 → "Live-Dashboard Preview Boundary"):
   * rounded surfaces, soft shadows, and the `--ld-*` token namespace are
   * allowed *inside* `.live-dashboard` but must not leak outside.
   * Migrated from src/_includes/sections/shared/live-dashboard-style.njk
   * per AGENTS.md rule #11.
   * ───────────────────────────────────────────────────────────────────── */

  /* Local token aliases + outer frame — same token values as
     apps/web-work's tokens.css. Defined inside the .live-dashboard
     scope so they don't bleed into the rest of the (brutalist)
     marketing page. */
  .live-dashboard {
    --ld-bg: oklch(99% 0.005 78);
    --ld-fg: oklch(14.1% 0.005 285.823);
    --ld-card: oklch(99% 0.005 78);
    --ld-muted: oklch(96.7% 0.001 286.375);
    --ld-muted-fg: oklch(55.2% 0.016 285.938);
    --ld-accent: oklch(96.7% 0.001 286.375);
    --ld-border: oklch(92% 0.004 286.32);
    --ld-sidebar: oklch(98.5% 0.005 78);
    --ld-brand: oklch(55% 0.21 25);
    --ld-radius: 8px;
    --ld-radius-card: 12px;
    --ld-ring-card: 0 0 0 1px oklch(14.1% 0.005 285.823 / 0.08);
    --ld-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);

    /* Outer frame — embedded SaaS preview look */
    border-radius: 14px;
    background: var(--ld-bg);
    box-shadow:
      0 0 0 1px var(--ld-border),
      0 1px 3px 0 rgb(15 23 42 / 0.04),
      0 8px 24px -6px rgb(15 23 42 / 0.08),
      0 24px 64px -16px rgb(15 23 42 / 0.1);
    overflow: hidden;
    transform: translateY(0) scale(1);
    transition:
      transform 400ms cubic-bezier(0.2, 0, 0.1, 1),
      box-shadow 400ms cubic-bezier(0.2, 0, 0.1, 1);
    will-change: transform;
    color: var(--ld-fg);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
  }
  .live-dashboard:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow:
      0 0 0 1px var(--ld-border),
      0 1px 3px 0 rgb(15 23 42 / 0.05),
      0 16px 40px -8px rgb(15 23 42 / 0.12),
      0 40px 96px -20px rgb(15 23 42 / 0.14);
  }
  @media (prefers-reduced-motion: reduce) {
    .live-dashboard,
    .live-dashboard:hover {
      transform: none;
      transition: none;
    }
  }

  /* Browser-style window chrome */
  .live-dashboard .ld-tabbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ld-sidebar);
    border-bottom: 1px solid var(--ld-border);
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-tabbar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
  .live-dashboard .ld-tabbar .dot-r {
    background: #ec6a5e;
  }
  .live-dashboard .ld-tabbar .dot-y {
    background: #f5be4f;
  }
  .live-dashboard .ld-tabbar .dot-g {
    background: #61c454;
  }
  .live-dashboard .ld-tabbar .ld-url {
    flex: 1;
    text-align: center;
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-tabbar .ld-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .live-dashboard .ld-tabbar .ld-live .pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: oklch(55% 0.21 28);
    animation: ld-pulse 1.6s ease-in-out infinite;
  }
  @keyframes ld-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.45;
      transform: scale(0.85);
    }
  }

  /* Body — sidebar + main. Pages can override .ld-body height via
     .live-dashboard--crm to lock the frame. */
  .live-dashboard .ld-body {
    display: grid;
    grid-template-columns: 224px 1fr;
  }
  @media (max-width: 900px) {
    .live-dashboard .ld-body {
      grid-template-columns: 1fr;
    }
    .live-dashboard .ld-side {
      display: none;
    }
  }

  .live-dashboard .ld-side {
    background: var(--ld-sidebar);
    border-right: 1px solid var(--ld-border);
    padding: 12px 8px;
  }
  .live-dashboard .ld-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--ld-fg);
    padding: 8px 8px 14px;
  }
  .live-dashboard .ld-brand .ld-mark {
    width: 24px;
    height: 24px;
    background: var(--ld-brand);
    border-radius: var(--ld-radius);
  }
  .live-dashboard .ld-brand img.ld-mark {
    background: transparent;
    border-radius: 0;
    object-fit: contain;
  }
  .live-dashboard .ld-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .live-dashboard .ld-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ld-fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    transition:
      background-color 100ms,
      color 100ms;
  }
  .live-dashboard .ld-nav-item[data-panel] {
    cursor: pointer;
  }
  .live-dashboard .ld-nav-item:not([data-panel]) {
    cursor: default;
    opacity: 0.6;
  }
  .live-dashboard .ld-nav-item:hover {
    background: var(--ld-accent);
  }
  .live-dashboard .ld-nav-item .ld-nav-icon {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ld-muted-fg);
    opacity: 0.5;
    flex-shrink: 0;
  }
  .live-dashboard .ld-nav-item.active {
    background: var(--ld-accent);
    font-weight: 500;
  }
  .live-dashboard .ld-nav-item.active .ld-nav-icon {
    background: var(--ld-brand);
    opacity: 1;
  }

  /* Main column */
  .live-dashboard .ld-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .live-dashboard .ld-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--ld-border);
    background: var(--ld-bg);
  }
  .live-dashboard .ld-crumb {
    font-size: 12px;
    color: var(--ld-muted-fg);
    flex-shrink: 0;
  }
  .live-dashboard .ld-crumb span {
    margin: 0 6px;
    color: var(--ld-border);
  }
  .live-dashboard .ld-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-bg);
    box-shadow: 0 0 0 1px var(--ld-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--ld-muted-fg);
    font-size: 13px;
    height: 32px;
  }
  .live-dashboard .ld-search svg {
    color: var(--ld-muted-fg);
    flex-shrink: 0;
  }
  .live-dashboard .ld-search span:nth-child(2) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .live-dashboard .ld-kbd {
    background: var(--ld-muted);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-actions {
    display: flex;
    gap: 6px;
  }
  .live-dashboard .ld-btn {
    background: var(--ld-bg);
    box-shadow: 0 0 0 1px var(--ld-border);
    color: var(--ld-fg);
    padding: 0 12px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border: 0;
  }
  .live-dashboard .ld-btn:hover {
    background: var(--ld-accent);
  }
  .live-dashboard .ld-btn-primary {
    background: var(--ld-fg);
    color: var(--ld-bg);
    box-shadow: var(--ld-shadow-sm);
  }
  /* Signup CTA — kept as the only "marketing accent" inside the
     dashboard chrome. Yellow-on-dark so it reads as a "this is a
     preview · click to make it yours" handle. Aesthetic exception. */
  .live-dashboard .ld-signup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    background: var(--ld-fg);
    color: var(--ld-bg);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
  }
  .live-dashboard .ld-signup::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: oklch(94% 0.18 95);
  }
  .live-dashboard .ld-signup:hover {
    opacity: 0.9;
  }

  /* Preview ribbon banner above the dashboard, sits on the URL bar line */
  .live-dashboard .ld-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 10px;
    background: oklch(94% 0.18 95);
    color: var(--ld-fg);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
  }
  .live-dashboard .ld-preview-pill::before {
    content: '▸';
    color: var(--ld-fg);
    font-size: 10px;
  }
  @media (max-width: 520px) {
    .live-dashboard .ld-topbar {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 12px;
    }
    .live-dashboard .ld-crumb,
    .live-dashboard .ld-preview-pill {
      max-width: 100%;
      min-width: 0;
    }
    .live-dashboard .ld-preview-pill {
      margin-left: 0;
    }
    .live-dashboard .ld-actions {
      flex-wrap: wrap;
      min-width: 0;
    }
    .live-dashboard .ld-btn,
    .live-dashboard .ld-signup {
      padding-inline: 9px;
      font-size: 11px;
    }
  }

  .live-dashboard .ld-content {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Panel switcher — only the active panel is visible. Sidebar nav
     items with data-panel toggle which one shows. */
  .live-dashboard .ld-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: ld-panel-in 280ms ease-out;
  }
  .live-dashboard .ld-panel.active {
    display: flex;
  }
  @keyframes ld-panel-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .live-dashboard .ld-panel {
      animation: none;
    }
  }

  /* Generic card — ring shadow instead of 1px border, 12px radius */
  .live-dashboard .ld-card {
    background: var(--ld-card);
    border-radius: var(--ld-radius-card);
    box-shadow: var(--ld-ring-card);
    padding: 20px;
    min-width: 0;
  }
  .live-dashboard .ld-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .live-dashboard .ld-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ld-fg);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    line-height: 24px;
  }
  .live-dashboard .ld-card-head .ld-card-title {
    margin-bottom: 0;
  }
  .live-dashboard .ld-pill {
    display: inline-flex;
    align-items: center;
    background: var(--ld-muted);
    color: var(--ld-muted-fg);
    padding: 0 10px;
    height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
  }

  /* KPI grid with sparklines */
  .live-dashboard .ld-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-kpis {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .live-dashboard .ld-kpi {
    background: var(--ld-card);
    border-radius: var(--ld-radius-card);
    box-shadow: var(--ld-ring-card);
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .live-dashboard .ld-kpi-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ld-muted-fg);
    font-weight: 500;
  }
  .live-dashboard .ld-kpi-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ld-fg);
    line-height: 36px;
    margin-top: 2px;
  }
  .live-dashboard .ld-kpi-sub {
    font-size: 12px;
    color: var(--ld-muted-fg);
    margin-top: 2px;
    line-height: 16px;
  }
  .live-dashboard .ld-trend-up {
    color: oklch(50% 0.13 165);
  }
  .live-dashboard .ld-trend-down {
    color: oklch(45% 0.21 25);
  }
  .live-dashboard .ld-spark {
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 12px;
  }
  .live-dashboard .ld-spark-teal {
    color: oklch(60% 0.13 175);
  }
  .live-dashboard .ld-spark-indigo {
    color: oklch(55% 0.18 270);
  }
  .live-dashboard .ld-spark-blue {
    color: oklch(60% 0.18 240);
  }
  .live-dashboard .ld-spark-amber {
    color: oklch(70% 0.16 70);
  }

  /* Mid row — donut + bars + gauge */
  .live-dashboard .ld-mid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-mid {
      grid-template-columns: 1fr;
    }
  }
  .live-dashboard .ld-donut-wrap {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
  }
  .live-dashboard .ld-donut {
    width: 120px;
    height: 120px;
  }
  .live-dashboard .ld-donut-v {
    font-size: 16px;
    font-weight: 700;
    fill: var(--ld-fg);
    letter-spacing: -0.01em;
  }
  .live-dashboard .ld-donut-l {
    font-size: 9px;
    fill: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }
  .live-dashboard .ld-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
  }
  .live-dashboard .ld-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .live-dashboard .ld-legend .sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .live-dashboard .ld-legend em {
    font-style: normal;
    margin-left: auto;
    color: var(--ld-muted-fg);
    font-family: var(--font-mono);
    font-size: 12px;
  }

  /* Bar chart */
  .live-dashboard .ld-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .live-dashboard .ld-bars li {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }
  .live-dashboard .ld-bar-name {
    color: var(--ld-fg);
  }
  .live-dashboard .ld-bar-track {
    background: var(--ld-muted);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
  }
  .live-dashboard .ld-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 600ms ease-out;
  }
  .live-dashboard .ld-bar-pct {
    color: var(--ld-muted-fg);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
  }

  /* Gauge */
  .live-dashboard .ld-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .live-dashboard .ld-gauge {
    width: 100%;
    max-width: 180px;
    height: auto;
  }
  .live-dashboard .ld-gauge-meta {
    text-align: center;
  }
  .live-dashboard .ld-gauge-v {
    font-size: 28px;
    font-weight: 700;
    color: var(--ld-fg);
    letter-spacing: -0.02em;
    line-height: 36px;
  }
  .live-dashboard .ld-gauge-v span {
    font-size: 13px;
    font-weight: 500;
    color: var(--ld-muted-fg);
    margin-left: 4px;
  }
  .live-dashboard .ld-gauge-l {
    font-size: 11px;
    color: var(--ld-muted-fg);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* Bottom row — area chart + vendor list */
  .live-dashboard .ld-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-bottom {
      grid-template-columns: 1fr;
    }
  }
  .live-dashboard .ld-area {
    display: block;
    width: 100%;
    height: 180px;
  }
  .live-dashboard .ld-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--ld-muted-fg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Vendor list */
  .live-dashboard .ld-vendors {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .live-dashboard .ld-vendor-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
  }
  .live-dashboard .ld-vendor-name {
    color: var(--ld-fg);
  }
  .live-dashboard .ld-vendor-amount {
    color: var(--ld-fg);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  .live-dashboard .ld-vendor-track {
    background: var(--ld-muted);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
  }
  .live-dashboard .ld-vendor-fill {
    height: 100%;
    border-radius: 999px;
    background: oklch(55% 0.18 270);
    transition: width 700ms ease-out;
  }

  /* Data table */
  .live-dashboard .ld-card-table {
    padding: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .live-dashboard .ld-card-table:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .live-dashboard .ld-card-table .ld-card-head {
    padding: 16px 20px;
    margin-bottom: 0;
  }
  .live-dashboard .ld-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 13px;
  }
  .live-dashboard .ld-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .live-dashboard .ld-table th {
    text-align: left;
    padding: 8px 20px;
    border-top: 1px solid var(--ld-border);
    border-bottom: 1px solid var(--ld-border);
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ld-muted-fg);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .live-dashboard .ld-table th.num {
    text-align: right;
  }
  .live-dashboard .ld-table td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--ld-border);
    color: var(--ld-fg);
  }
  .live-dashboard .ld-table td.num {
    text-align: right;
  }
  .live-dashboard .ld-table tr:last-child td {
    border-bottom: 0;
  }
  .live-dashboard .ld-table tr:hover td {
    background: var(--ld-muted);
  }
  @media (max-width: 520px) {
    .live-dashboard .ld-table {
      min-width: 0;
      table-layout: fixed;
      font-size: 10px;
    }
    .live-dashboard .ld-table th,
    .live-dashboard .ld-table td {
      overflow: hidden;
      padding: 7px 6px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .live-dashboard .ld-table th:nth-child(n + 5),
    .live-dashboard .ld-table td:nth-child(n + 5) {
      display: none;
    }
  }
  .live-dashboard .ld-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .live-dashboard .ld-approved,
  .live-dashboard .ld-shipped {
    background: oklch(94% 0.06 165);
    color: oklch(45% 0.13 165);
  }
  .live-dashboard .ld-pending {
    background: oklch(94% 0.08 80);
    color: oklch(50% 0.15 70);
  }
  .live-dashboard .ld-invoiced {
    background: oklch(94% 0.05 240);
    color: oklch(50% 0.16 245);
  }
  .live-dashboard .ld-hold {
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
  }

  /* Checklist */
  .live-dashboard .ld-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .live-dashboard .ld-checklist li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ld-border);
  }
  .live-dashboard .ld-checklist li:last-child {
    border-bottom: 0;
  }
  .live-dashboard .ld-cl-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
  }
  .live-dashboard .ld-cl-done .ld-cl-icon {
    background: oklch(94% 0.06 165);
    color: oklch(45% 0.13 165);
  }
  .live-dashboard .ld-cl-progress .ld-cl-icon {
    background: oklch(94% 0.08 80);
    color: oklch(50% 0.15 70);
  }
  .live-dashboard .ld-cl-todo .ld-cl-icon {
    background: var(--ld-muted);
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-cl-blocked .ld-cl-icon {
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
  }
  .live-dashboard .ld-cl-name {
    font-size: 14px;
    color: var(--ld-fg);
    font-weight: 500;
  }
  .live-dashboard .ld-cl-meta {
    font-size: 12px;
    color: var(--ld-muted-fg);
    margin-top: 2px;
  }
  .live-dashboard .ld-cl-status {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ld-muted);
    color: var(--ld-muted-fg);
    white-space: nowrap;
  }
  .live-dashboard .ld-cl-done .ld-cl-status {
    background: oklch(94% 0.06 165);
    color: oklch(45% 0.13 165);
  }
  .live-dashboard .ld-cl-progress .ld-cl-status {
    background: oklch(94% 0.08 80);
    color: oklch(50% 0.15 70);
  }
  .live-dashboard .ld-cl-blocked .ld-cl-status {
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
  }

  /* Kanban */
  .live-dashboard .ld-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-kanban {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .live-dashboard .ld-kan-col {
    background: var(--ld-muted);
    border-radius: var(--ld-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 220px;
  }
  .live-dashboard .ld-kan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-muted-fg);
    font-weight: 500;
    padding: 4px 6px 8px;
  }
  .live-dashboard .ld-kan-head .ld-kan-count {
    background: var(--ld-bg);
    box-shadow: 0 0 0 1px var(--ld-border);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--ld-fg);
    font-family: var(--font-mono);
  }
  .live-dashboard .ld-kan-card {
    background: var(--ld-bg);
    border-radius: 6px;
    box-shadow: var(--ld-ring-card);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .live-dashboard .ld-kan-card .ld-kan-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-kan-card .ld-kan-cust {
    font-size: 13px;
    color: var(--ld-fg);
    font-weight: 500;
  }
  .live-dashboard .ld-kan-card .ld-kan-amt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ld-muted-fg);
  }

  /* Gantt */
  .live-dashboard .ld-gantt {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .live-dashboard .ld-gantt-head {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ld-border);
  }
  .live-dashboard .ld-gantt-head .ld-gantt-scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .live-dashboard .ld-gantt-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ld-border);
  }
  .live-dashboard .ld-gantt-row:last-child {
    border-bottom: 0;
  }
  .live-dashboard .ld-gantt-name {
    font-size: 13px;
    color: var(--ld-fg);
    padding-right: 12px;
  }
  .live-dashboard .ld-gantt-name small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 1px;
  }
  .live-dashboard .ld-gantt-track {
    position: relative;
    height: 18px;
    background: linear-gradient(
      to right,
      transparent calc(10% - 1px),
      var(--ld-border) calc(10% - 1px),
      var(--ld-border) 10%
    );
    background-size: 10% 100%;
    border-radius: 4px;
  }
  .live-dashboard .ld-gantt-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
  }
  .live-dashboard .ld-gantt-bar[data-tone='ok'] {
    background: oklch(60% 0.13 175);
  }
  .live-dashboard .ld-gantt-bar[data-tone='warn'] {
    background: oklch(70% 0.16 70);
  }
  .live-dashboard .ld-gantt-bar[data-tone='late'] {
    background: oklch(60% 0.2 25);
  }
  .live-dashboard .ld-gantt-bar[data-tone='plan'] {
    background: oklch(55% 0.18 270);
  }

  /* Aging buckets */
  .live-dashboard .ld-aging {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-aging {
      grid-template-columns: 1fr;
    }
  }
  .live-dashboard .ld-bucket-row {
    display: grid;
    grid-template-columns: 88px 1fr 96px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
  }
  .live-dashboard .ld-bucket-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .live-dashboard .ld-bucket-track {
    background: var(--ld-muted);
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
  }
  .live-dashboard .ld-bucket-fill {
    height: 100%;
    transition: width 600ms ease-out;
  }
  .live-dashboard .ld-bucket-fill[data-age='current'] {
    background: oklch(60% 0.13 165);
  }
  .live-dashboard .ld-bucket-fill[data-age='30'] {
    background: oklch(55% 0.18 270);
  }
  .live-dashboard .ld-bucket-fill[data-age='60'] {
    background: oklch(70% 0.16 70);
  }
  .live-dashboard .ld-bucket-fill[data-age='90'] {
    background: oklch(60% 0.2 25);
  }
  .live-dashboard .ld-bucket-amt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ld-fg);
    text-align: right;
  }

  /* Entity tree */
  .live-dashboard .ld-tree {
    font-size: 13px;
    color: var(--ld-fg);
  }
  .live-dashboard .ld-tree-node {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ld-border);
  }
  .live-dashboard .ld-tree-node:last-child {
    border-bottom: 0;
  }
  .live-dashboard .ld-tree-node[data-depth='0'] .ld-tree-name {
    font-weight: 600;
  }
  .live-dashboard .ld-tree-node[data-depth='1'] .ld-tree-name {
    padding-left: 20px;
    color: var(--ld-fg);
  }
  .live-dashboard .ld-tree-node[data-depth='2'] .ld-tree-name {
    padding-left: 40px;
    color: var(--ld-muted-fg);
    font-size: 12px;
  }
  .live-dashboard .ld-tree-rev {
    font-family: var(--font-mono);
    color: var(--ld-fg);
    font-size: 12px;
  }
  .live-dashboard .ld-tree-flag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .live-dashboard .ld-tree-flag[data-flag='ok'] {
    background: oklch(94% 0.06 165);
    color: oklch(45% 0.13 165);
  }
  .live-dashboard .ld-tree-flag[data-flag='fx'] {
    background: oklch(94% 0.08 80);
    color: oklch(50% 0.15 70);
  }
  .live-dashboard .ld-tree-flag[data-flag='elim'] {
    background: var(--ld-muted);
    color: var(--ld-muted-fg);
  }

  /* Report tiles */
  .live-dashboard .ld-reports {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-reports {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .live-dashboard .ld-report-tile {
    background: var(--ld-bg);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-ring-card);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition:
      box-shadow 100ms,
      transform 100ms;
  }
  .live-dashboard .ld-report-tile:hover {
    box-shadow:
      0 0 0 1px var(--ld-border),
      var(--ld-shadow-sm);
    transform: translateY(-1px);
  }
  .live-dashboard .ld-report-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
  }
  .live-dashboard .ld-report-tile[data-cat='finance'] .ld-report-icon {
    background: oklch(94% 0.05 200);
    color: oklch(45% 0.13 200);
  }
  .live-dashboard .ld-report-tile[data-cat='sales'] .ld-report-icon {
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
  }
  .live-dashboard .ld-report-tile[data-cat='ops'] .ld-report-icon {
    background: oklch(94% 0.08 60);
    color: oklch(50% 0.15 60);
  }
  .live-dashboard .ld-report-tile[data-cat='tax'] .ld-report-icon {
    background: oklch(94% 0.06 290);
    color: oklch(50% 0.18 290);
  }
  .live-dashboard .ld-report-tile[data-cat='hr'] .ld-report-icon {
    background: oklch(94% 0.05 240);
    color: oklch(50% 0.16 245);
  }
  .live-dashboard .ld-report-tile[data-cat='exec'] .ld-report-icon {
    background: var(--ld-muted);
    color: var(--ld-fg);
  }
  .live-dashboard .ld-report-name {
    font-size: 14px;
    color: var(--ld-fg);
    font-weight: 500;
  }
  .live-dashboard .ld-report-meta {
    font-size: 12px;
    color: var(--ld-muted-fg);
  }
  .live-dashboard .ld-report-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 8px;
    border-top: 1px solid var(--ld-border);
    margin-top: auto;
  }

  /* Settings (users + roles) */
  .live-dashboard .ld-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 1100px) {
    .live-dashboard .ld-settings-grid {
      grid-template-columns: 1fr;
    }
  }
  .live-dashboard .ld-user-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ld-border);
  }
  .live-dashboard .ld-user-row:last-child {
    border-bottom: 0;
  }
  .live-dashboard .ld-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }
  .live-dashboard .ld-user-name {
    font-size: 13px;
    color: var(--ld-fg);
    font-weight: 500;
  }
  .live-dashboard .ld-user-email {
    font-size: 11px;
    color: var(--ld-muted-fg);
    font-family: var(--font-mono);
  }
  .live-dashboard .ld-user-role {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .live-dashboard .ld-user-role[data-r='admin'] {
    background: oklch(94% 0.05 25);
    color: oklch(45% 0.21 25);
  }
  .live-dashboard .ld-user-role[data-r='finance'] {
    background: oklch(94% 0.05 200);
    color: oklch(45% 0.13 200);
  }
  .live-dashboard .ld-user-role[data-r='ops'] {
    background: oklch(94% 0.08 60);
    color: oklch(50% 0.15 60);
  }
  .live-dashboard .ld-user-role[data-r='viewer'] {
    background: var(--ld-muted);
    color: var(--ld-muted-fg);
  }

  /* Compact KPI strip — mini-kpis */
  .live-dashboard .ld-mini-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ld-border);
  }
  @media (max-width: 900px) {
    .live-dashboard .ld-mini-kpis {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .live-dashboard .ld-mini-kpi {
    padding: 8px 0;
  }
  .live-dashboard .ld-mini-kpi-l {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ld-muted-fg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .live-dashboard .ld-mini-kpi-v {
    font-size: 24px;
    font-weight: 700;
    color: var(--ld-fg);
    letter-spacing: -0.02em;
    line-height: 32px;
    margin-top: 2px;
  }
  .live-dashboard .ld-mini-kpi-s {
    font-size: 12px;
    color: var(--ld-muted-fg);
    margin-top: 2px;
    line-height: 16px;
  }

  /* CRM-only override: fixed dashboard frame so it doesn't grow / shrink
     as panels switch. Sidebar and main column both honour 820px; main
     column scrolls internally only when content exceeds the cap (longer
     panels like Pipeline / Renewals). Calibrated for 13" laptop viewports
     (1280×800). Migrated from live-dashboard-crm.njk. */
  .live-dashboard--crm .ld-body {
    height: 820px;
  }
  @media (max-width: 900px) {
    .live-dashboard--crm .ld-body {
      height: auto;
    }
  }
  .live-dashboard--crm .ld-side {
    overflow-y: auto;
  }
  .live-dashboard--crm .ld-main {
    min-height: 0;
  }
  .live-dashboard--crm .ld-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}