:root{
    color-scheme: light;
    --page:        #f9f9f7;
    --surface:     #fcfcfb;
    --surface-2:   #f3f2ee;
    --ink:         #0b0b0b;
    --ink-2:       #52514e;
    --ink-muted:   #898781;
    --grid:        #e1e0d9;
    --baseline:    #c3c2b7;
    --border:      rgba(11,11,11,0.10);
    --accent:      #2a78d6;
    --accent-soft: #cde2fb;
    --accent-wash: rgba(42,120,214,0.10);
    --good:        #0ca30c;
    --good-wash:   rgba(12,163,12,0.13);
    --warn:        #fab219;
    --warn-wash:   rgba(250,178,25,0.20);
    --crit:        #d03b3b;
    --crit-wash:   rgba(208,59,59,0.12);
    --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 8px 24px -12px rgba(11,11,11,0.12);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --page:        #0d0d0d;
      --surface:     #1a1a19;
      --surface-2:   #212120;
      --ink:         #ffffff;
      --ink-2:       #c3c2b7;
      --ink-muted:   #8f8d86;
      --grid:        #2c2c2a;
      --baseline:    #383835;
      --border:      rgba(255,255,255,0.10);
      --accent:      #3987e5;
      --accent-soft: #184f95;
      --accent-wash: rgba(57,135,229,0.16);
      --good:        #0ca30c;
      --good-wash:   rgba(12,163,12,0.20);
      --warn:        #fab219;
      --warn-wash:   rgba(250,178,25,0.16);
      --crit:        #e66767;
      --crit-wash:   rgba(230,103,103,0.16);
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --page:        #0d0d0d;
    --surface:     #1a1a19;
    --surface-2:   #212120;
    --ink:         #ffffff;
    --ink-2:       #c3c2b7;
    --ink-muted:   #8f8d86;
    --grid:        #2c2c2a;
    --baseline:    #383835;
    --border:      rgba(255,255,255,0.10);
    --accent:      #3987e5;
    --accent-soft: #184f95;
    --accent-wash: rgba(57,135,229,0.16);
    --good:        #0ca30c;
    --good-wash:   rgba(12,163,12,0.20);
    --warn:        #fab219;
    --warn-wash:   rgba(250,178,25,0.16);
    --crit:        #e66767;
    --crit-wash:   rgba(230,103,103,0.16);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--page);
    color:var(--ink);
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.45;
  }
  h1,h2,h3{
    font-family:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
    font-weight:600;
    text-wrap:balance;
    margin:0;
  }
  .mono{ font-family:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace; }
  .tnum{ font-variant-numeric: tabular-nums; }

  .wrap{ max-width:1240px; margin:0 auto; padding:28px 20px 64px; }

  /* header */
  .topbar{
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    flex-wrap:wrap;
    padding-bottom:22px; margin-bottom:22px;
    border-bottom:1px solid var(--border);
  }
  .brand{ display:flex; align-items:center; gap:14px; }
  .brand-mark{
    width:44px; height:44px; border-radius:10px; flex:none;
    background:linear-gradient(155deg, var(--accent), var(--good) 130%);
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow);
  }
  .brand-mark svg{ width:24px; height:24px; }
  .brand h1{ font-size:22px; letter-spacing:-0.01em; }
  .brand .sub{ color:var(--ink-2); font-size:13px; margin-top:3px; }
  .asof{
    display:flex; flex-direction:column; align-items:flex-end; gap:6px;
    font-size:12.5px; color:var(--ink-muted);
  }
  .asof .badge{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--surface-2); border:1px solid var(--border);
    padding:6px 12px; border-radius:999px;
    color:var(--ink-2); font-weight:600; font-size:12.5px;
  }
  .asof .dot{ width:7px; height:7px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 3px var(--warn-wash); }
  .asof .last-edited{ font-size:11px; color:var(--ink-muted); }

  /* KPI row */
  .kpi-grid{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:22px;
  }
  @media (max-width:980px){ .kpi-grid{ grid-template-columns:repeat(3, 1fr);} }
  @media (max-width:600px){ .kpi-grid{ grid-template-columns:repeat(2, 1fr);} }
  .kpi{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:16px 16px 14px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:8px; min-width:0;
  }
  .kpi .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; }
  .kpi .value{ font-size:26px; font-weight:700; letter-spacing:-0.01em; }
  .kpi .value .unit{ font-size:14px; font-weight:600; color:var(--ink-2); margin-left:2px;}
  .kpi .foot{ font-size:12px; color:var(--ink-2); }
  .kpi .foot.warn{ color:var(--ink-2); font-weight:700; display:flex; align-items:center; gap:6px; }
  .kpi .foot.warn::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--warn); flex:none; box-shadow:0 0 0 3px var(--warn-wash); }
  .kpi .foot.good{ color:var(--good); font-weight:600; }
  .kpi .mini-track{ height:5px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:2px;}
  .kpi .mini-fill{ height:100%; border-radius:4px; background:var(--accent); }
  .kpi .mini-fill.good{ background:var(--good); }

  /* card shell */
  .grid2{ display:grid; grid-template-columns: 1.55fr 1fr; gap:16px; margin-bottom:16px; }
  @media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:20px 22px 22px; box-shadow:var(--shadow); margin-bottom:16px;
  }
  .card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap;}
  .card-head h2{ font-size:16px; }
  .card-head .desc{ font-size:12.5px; color:var(--ink-muted); }
  .legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
  .legend .item{ display:flex; align-items:center; gap:7px; }
  .legend .swatch{ width:12px; height:3px; border-radius:2px; }
  .legend .swatch.dot{ width:9px; height:9px; border-radius:50%; }

  /* s-curve */
  #scurveSvg{ width:100%; height:auto; display:block; margin-top:6px; overflow:visible; }
  .axis-label{ fill:var(--ink-muted); font-size:11px; font-family:"IBM Plex Mono",monospace; }
  .gridline{ stroke:var(--grid); stroke-width:1; }
  .baseline{ stroke:var(--baseline); stroke-width:1; }
  .line-plan{ fill:none; stroke:var(--ink-muted); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
  .line-actual{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
  .area-actual{ fill:var(--accent); opacity:0.09; }
  .ref-line{ stroke:var(--ink-muted); stroke-width:1; opacity:0.55; }
  .crosshair{ stroke:var(--ink-muted); stroke-width:1; opacity:0; pointer-events:none; }
  .hover-dot{ opacity:0; pointer-events:none; }
  .hover-dot circle{ stroke:var(--surface); stroke-width:2; }
  .end-label{ font-size:12px; font-weight:700; font-family:"IBM Plex Mono",monospace; }
  .ref-label{ font-size:10.5px; fill:var(--ink-muted); font-family:"Plus Jakarta Sans",sans-serif; }

  /* donut */
  .donut-wrap{ display:flex; align-items:center; gap:20px; margin-top:10px; flex-wrap:wrap; }
  #donutSvg{ flex:none; }
  .donut-center-val{ font-size:26px; font-weight:700; font-family:"Sora",sans-serif; }
  .donut-center-lbl{ font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
  .donut-legend{ display:flex; flex-direction:column; gap:10px; font-size:13px; flex:1; min-width:160px; }
  .donut-legend .row{ display:flex; align-items:center; gap:9px; cursor:default; }
  .donut-legend .sw{ width:10px; height:10px; border-radius:3px; flex:none; }
  .donut-legend .txt{ color:var(--ink-2); }
  .donut-legend .num{ margin-left:auto; font-weight:700; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:12.5px; }

  /* phase meters */
  .phase-row{ display:grid; grid-template-columns: 190px 1fr 120px; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--border); }
  .phase-row:last-child{ border-bottom:none; }
  .phase-name{ font-size:13px; font-weight:600; }
  .phase-name .wt{ display:block; font-size:11px; font-weight:500; color:var(--ink-muted); margin-top:1px; }
  .meter-track{ position:relative; height:10px; border-radius:6px; background:var(--surface-2); cursor:pointer; }
  .meter-fill{ position:absolute; inset:0; height:100%; border-radius:6px; background:var(--accent); transition:filter .12s; }
  .meter-fill.good{ background:var(--good); }
  .meter-fill.warn{ background:var(--warn); }
  .meter-track:hover .meter-fill{ filter:brightness(1.08); }
  .phase-pct{ text-align:right; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:700; }
  .phase-pct .of{ display:block; font-size:10.5px; font-weight:500; color:var(--ink-muted); font-family:"Plus Jakarta Sans",sans-serif;}

  /* district bars */
  .dist-row{ display:grid; grid-template-columns: 96px 1fr 64px; align-items:center; gap:12px; padding:7px 0; }
  .dist-name{ font-size:12.5px; font-weight:600; }
  .dist-bar{ position:relative; height:16px; border-radius:4px; background:var(--surface-2); overflow:hidden; display:flex; }
  .dist-seg{ height:100%; cursor:pointer; }
  .dist-seg + .dist-seg{ box-shadow: -2px 0 0 var(--surface); }
  .dist-total{ text-align:right; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); }
  .dist-total b{ color:var(--ink); }

  /* materials meters */
  .mat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
  @media (max-width:820px){ .mat-grid{ grid-template-columns:1fr; } }
  .mat-item .mh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .mat-item .mh .t{ font-size:13px; font-weight:700; }
  .mat-item .mh .p{ font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:15px; }
  .mat-track{ height:12px; border-radius:7px; background:var(--surface-2); overflow:hidden; }
  .mat-fill{ height:100%; border-radius:7px; background:var(--accent); }
  .mat-fill.over{ background:var(--warn); }
  .mat-sub{ font-size:11.5px; color:var(--ink-muted); margin-top:7px; }

  /* milestones */
  .mile-table{ margin-top:8px; }
  .mile-row{ display:grid; grid-template-columns: 88px 1.4fr 1fr 150px; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); align-items:center; }
  .mile-row:last-child{ border-bottom:none; }
  .mile-date{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-muted); }
  .mile-act{ font-size:13px; font-weight:600; }
  .mile-loc{ font-size:12px; color:var(--ink-2); }
  .chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; width:fit-content; }
  .chip .d{ width:6px; height:6px; border-radius:50%; }
  .chip.good{ background:var(--good-wash); color:var(--good); }
  .chip.good .d{ background:var(--good); }
  .chip.progress{ background:var(--accent-wash); color:var(--accent); }
  .chip.progress .d{ background:var(--accent); }
  .chip.planned{ background:var(--warn-wash); color:var(--ink-2); font-weight:700; }
  .chip.planned .d{ background:var(--warn); }
  .chip.pending{ background:var(--surface-2); color:var(--ink-muted); }
  .chip.pending .d{ background:var(--ink-muted); }

  .foot-note{ margin-top:26px; padding-top:16px; border-top:1px solid var(--border); font-size:12px; color:var(--ink-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

  /* tooltip */
  #tooltip{
    position:fixed; pointer-events:none; z-index:50;
    background:var(--ink); color:var(--page);
    border-radius:9px; padding:9px 12px; font-size:12.5px;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    opacity:0; transform:translate(-50%,-115%); transition:opacity .08s;
    max-width:240px;
  }
  #tooltip .tt-title{ font-weight:700; margin-bottom:4px; font-family:"Sora",sans-serif; }
  #tooltip .tt-row{ display:flex; gap:10px; justify-content:space-between; }
  #tooltip .tt-row + .tt-row{ margin-top:2px; }
  #tooltip .tt-key{ display:flex; align-items:center; gap:6px; opacity:.85; }
  #tooltip .tt-line{ width:10px; height:2px; border-radius:2px; }
  #tooltip .tt-val{ font-weight:700; font-family:"IBM Plex Mono",monospace; }

  /* staff link */
  .staff-link{
    font-size:11.5px; color:var(--ink-muted); text-decoration:none;
    border:1px solid var(--border); border-radius:999px; padding:5px 12px;
    transition:color .12s, border-color .12s;
  }
  .staff-link:hover{ color:var(--accent); border-color:var(--accent); }

  /* tasks / checklist page */
  .task-group{ margin-bottom:8px; }
  .task-group-title{ font-size:13px; font-weight:700; margin:18px 0 8px; color:var(--ink); }
  .task-group-title:first-child{ margin-top:0; }
  .task-row{
    display:grid; grid-template-columns: 20px 1fr 120px 120px;
    gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border);
    font-size:13px;
  }
  .task-row:last-child{ border-bottom:none; }
  .task-check{
    width:18px; height:18px; border-radius:5px; flex:none;
    border:1.5px solid var(--baseline); display:flex; align-items:center; justify-content:center;
  }
  .task-check.done{ background:var(--good); border-color:var(--good); }
  .task-check.done svg{ width:11px; height:11px; }
  .task-name{ font-weight:600; }
  .task-date{ font-size:12px; color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; }
  .task-status{ font-size:12px; color:var(--ink-2); text-align:right; }

  .tracker-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }

  .back-link{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
    color:var(--accent); text-decoration:none; margin-bottom:18px;
  }
  .back-link:hover{ text-decoration:underline; }

  .empty-note{ color:var(--ink-muted); font-size:13px; padding:12px 0; }

  /* portal (site root) */
  .portal-wrap{ max-width:1080px; padding-top:48px; }
  .portal-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; margin-top:8px; }
  .project-card{
    display:block; background:var(--surface); border:1px solid var(--border);
    border-radius:18px; padding:26px 28px 24px; box-shadow:var(--shadow);
    text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease;
  }
  .project-card:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(11,11,11,0.06), 0 16px 32px -14px rgba(11,11,11,0.18); }
  .project-card-top{ margin-bottom:14px; }
  .project-card h2{ font-size:20px; margin-bottom:8px; }
  .project-card-desc{ color:var(--ink-2); font-size:13.5px; line-height:1.5; max-width:560px; }
  .project-card-stat{ display:flex; align-items:baseline; gap:8px; margin-top:18px; }
  .project-card-stat .value{ font-size:32px; font-weight:700; font-family:"Sora",sans-serif; }
  .project-card-stat .value .unit{ font-size:16px; font-weight:600; color:var(--ink-2); margin-left:1px; }
  .project-card-stat .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; }
  .project-card-cta{ margin-top:18px; font-size:13.5px; font-weight:700; color:var(--accent); }
  .portal-footer{ margin-top:22px; font-size:12.5px; color:var(--ink-muted); text-align:center; }

  /* nixndc: WBS task breakdown (reuses .phase-row shape, indented for sub-tasks) */
  .phase-row.wbs-phase .phase-name{ font-weight:700; font-size:14px; }
  .phase-row.wbs-task{ padding-left:18px; }
  .phase-row.wbs-task .phase-name{ font-weight:500; color:var(--ink-2); font-size:12.5px; }

  /* nixndc: materials & procurement list */
  .material-group-title{ font-size:13px; font-weight:700; margin:18px 0 8px; color:var(--ink); }
  .material-group-title:first-child{ margin-top:0; }
  .material-row{
    display:grid; grid-template-columns: 1fr 90px 110px; gap:12px; align-items:center;
    padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
  }
  .material-row:last-child{ border-bottom:none; }
  .material-name{ font-weight:600; }
  .material-name .qty{ font-weight:500; color:var(--ink-muted); margin-left:4px; }
  .material-lead{ font-size:11.5px; color:var(--ink-muted); text-align:right; }
  .status-pill{ display:inline-block; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; text-align:center; white-space:nowrap; }
  .status-pill.delivered{ background:var(--good-wash); color:var(--good); }
  .status-pill.ordered{ background:var(--warn-wash); color:var(--warn); }
  .status-pill.waiting{ background:var(--surface-2); color:var(--ink-muted); }

  .stat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
  .stat-block{ flex:1; min-width:120px; background:var(--surface-2); border-radius:12px; padding:12px 14px; }
  .stat-block .stat-value{ font-size:22px; font-weight:700; font-family:"Sora",sans-serif; }
  .stat-block .stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); font-weight:600; margin-top:2px; }
  .stat-block.delivered .stat-value{ color:var(--good); }
  .stat-block.ordered .stat-value{ color:var(--warn); }
  .stat-block.waiting .stat-value{ color:var(--ink-muted); }

.completed-sites-list{ display:flex; flex-direction:column; max-height:420px; overflow-y:auto; }
.completed-site-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:10px 4px; border-bottom:1px solid var(--border); font-size:13px;
}
.completed-site-row:last-child{ border-bottom:none; }
.completed-site-name{ color:var(--ink-2); font-weight:600; }
.completed-site-loc{ color:var(--ink-muted); font-size:12.5px; white-space:nowrap; }
.completed-site-date{ color:var(--ink-muted); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:700px){
  .completed-site-row{ grid-template-columns:1fr; gap:2px; }
}