/* ---------------------------------------------------------------------------
   AI Scheduling Studio - the sheet.

   The direction is a plotted schedule, not a dashboard: one sheet of drafting
   paper with hairline rules running edge to edge across both panes, so a row
   can be tracked from its ID to its bar without the eye crossing a border.

   Colour is data here, never decoration. The palette is a draughtsman's:
   black ink, red lead for the critical path, blue lead for baseline and
   selection, yellow trace for what-if overlays. If a hue appears it means
   something - which is also why the chrome is achromatic.

   The canvas renderers read these same custom properties, so the chart and the
   grid can never drift apart on colour or row height.
--------------------------------------------------------------------------- */

/* ScheduleInsight's design system, so Studio and the viewer look like one
   product. Token values are lifted from the viewer's own :root rather than
   approximated by eye - dark-indigo is the primary surface there, and light is
   the alternate. */

:root {
  /* light surface */
  --paper:      #FFFFFF;
  --paper-sunk: #F6F7F9;
  --ink:        #1C1E26;
  --ink-soft:   #6B7280;
  --ink-faint:  #9AA0AA;
  --rule:       #E6E8EF;
  --rule-firm:  #D3D7E0;

  --acc:        #5662E0;   /* ScheduleInsight indigo */
  --red-lead:   #E5604A;   /* --danger */
  --blue-lead:  #5662E0;   /* selection, data date */
  --trace:      #E0A23A;   /* --acc3, what-if overlays */
  --green:      #3FB57F;   /* --acc2, complete */
  --crit-bg:    rgba(229, 96, 74, .07);
  --bl-bar:     #94A3B8;   /* --blbar, baseline ghost */

  --chart-a:    #1B5FB0;
  --chart-b:    #B0761A;

  --row-h: 26px;           /* --row */
  --bar-h: 14px;           /* --bar */
  --head-h: 46px;
  --sidebar-w: 244px;      /* --sw */
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cond: "Inter", var(--sans);
}

:root[data-theme="dark"] {
  --paper:      #0C0D0F;   /* --s1 */
  --paper-sunk: #101114;   /* --s2 */
  --ink:        #ECECEE;   /* --txt */
  --ink-soft:   #A0A2A8;   /* --txt2 */
  --ink-faint:  #6B6D74;   /* --txt3 */
  --rule:       #17191D;   /* --hairSoft */
  --rule-firm:  #2A2C31;   /* --bd2 */

  --acc:        #6E7BFF;
  --red-lead:   #E5604A;
  --blue-lead:  #6E7BFF;
  --trace:      #E0A23A;
  --green:      #3FB57F;
  --crit-bg:    rgba(229, 96, 74, .08);
  --bl-bar:     #94A3B8;

  --chart-a:    #6E7BFF;
  --chart-b:    #E0A23A;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* --- app frame ---------------------------------------------------------- */

.app { display: flex; flex-direction: column; height: 100%; }

.toolbar {
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--rule-firm);
  background: var(--paper);
  flex: none;
}

.brand {
  font: 600 14px/1 var(--cond);
  letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.brand svg { display: block; }

.doc-name {
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  border: 1px solid transparent; border-radius: 3px;
  padding: 5px 7px; margin-left: 2px; min-width: 120px;
  background: none;
}
.doc-name:hover { border-color: var(--rule); }
.doc-name:focus { outline: none; border-color: var(--blue-lead); background: var(--paper-sunk); }

.spacer { flex: 1; }

.btn {
  font: 500 12px/1 var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--paper-sunk); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--blue-lead); outline-offset: 1px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--rule); }

.group { display: flex; gap: 4px; align-items: center; }
.group.tight { gap: 0; }
.group.tight .btn { border-radius: 0; margin-left: -1px; }
.group.tight .btn:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.group.tight .btn:last-child  { border-radius: 0 3px 3px 0; }

kbd {
  font: 500 10px/1 var(--mono);
  color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 2px 4px;
}

/* --- the sheet ---------------------------------------------------------- */

.sheet { flex: 1; display: flex; min-height: 0; position: relative; }

.pane-grid {
  flex: none; width: var(--grid-w, 520px);
  display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--rule-firm);
}
.pane-chart { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* column headers and the timescale share one band, so the two panes line up */
.head {
  height: var(--head-h); flex: none;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-firm);
  position: relative; overflow: hidden;
}

.cols { display: flex; height: 100%; align-items: flex-end; }
.col-h {
  font: 500 10px/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px 7px; flex: none;
  border-left: 1px solid var(--rule);
  height: 100%; display: flex; align-items: flex-end;
  user-select: none;
}
.col-h:first-child { border-left: none; }
.col-h.num { justify-content: flex-end; }

/* the grid owns the vertical scrollbar; the chart follows it */
.scroll-y { flex: 1; overflow: auto; position: relative; }

.rows { position: relative; }

.row {
  display: flex; height: var(--row-h); align-items: center;
  border-bottom: 1px solid var(--rule);
  position: absolute; left: 0; right: 0;
  contain: layout paint;
}
.row.sel { background: color-mix(in srgb, var(--acc) 12%, transparent); }
.row.critrow { background: var(--crit-bg); }
.row.sel .cell { border-left-color: color-mix(in srgb, var(--blue-lead) 22%, var(--rule)); }

.cell {
  padding: 0 8px; flex: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  border-left: 1px solid var(--rule);
  height: 100%; display: flex; align-items: center;
}
.cell:first-child { border-left: none; }
.cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11px; }
.cell.id  { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.cell.crit { color: var(--red-lead); }
.cell.editing {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blue-lead);
  overflow: visible; text-overflow: clip; outline: none;
}

.row.wbs { font-weight: 600; }
.row.wbs .cell { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* --- chart -------------------------------------------------------------- */

.chart-canvas, .scale-canvas { display: block; position: absolute; top: 0; left: 0; }

/* --- status bar --------------------------------------------------------- */

.status {
  height: 26px; flex: none;
  display: flex; align-items: center;
  border-top: 1px solid var(--rule-firm);
  background: var(--paper-sunk);
  font: 400 11px/1 var(--sans); color: var(--ink-soft);
  padding: 0 12px;
}
.status b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.status .item { padding: 0 12px; border-left: 1px solid var(--rule); }
.status .item:first-child { padding-left: 0; border-left: none; }
.status .item.warn, .status .item.warn b { color: var(--red-lead); }

/* --- empty state / drop target ------------------------------------------ */

.empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--paper); z-index: 5; text-align: center;
}
.empty h1 { font: 600 22px/1.2 var(--cond); letter-spacing: .01em; margin: 0; }
.empty p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.empty .hint { font-size: 12px; color: var(--ink-faint); }
.drop-lit { box-shadow: inset 0 0 0 2px var(--blue-lead); }

/* --- toast -------------------------------------------------------------- */

.toast {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font: 400 12px/1.4 var(--sans);
  padding: 9px 14px; border-radius: 4px;
  max-width: 60ch; z-index: 20;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.toast.err { background: var(--red-lead); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .16s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translate(-50%, 5px); } }
}

/* --- splitter ----------------------------------------------------------- */

.splitter {
  position: absolute; top: 0; bottom: 0; width: 7px; margin-left: -4px;
  cursor: col-resize; z-index: 6;
}
.splitter:hover { background: color-mix(in srgb, var(--blue-lead) 20%, transparent); }


/* --- resource panel ------------------------------------------------------ */

.res {
  flex: none; height: var(--res-h, 210px);
  display: flex; min-height: 0;
  border-top: 1px solid var(--rule-firm);
  background: var(--paper);
}
.res[hidden] { display: none; }

.res-list {
  flex: none; width: var(--grid-w, 606px);
  border-right: 1px solid var(--rule-firm);
  display: flex; flex-direction: column; min-width: 0;
}

.res-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; flex: none;
  border-bottom: 1px solid var(--rule);
  font: 500 10px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

.res-rows { flex: 1; overflow: auto; }

.res-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 28px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.res-row:hover { background: var(--paper-sunk); }
.res-row[aria-selected="true"] { background: color-mix(in srgb, var(--chart-a) 12%, transparent); }
.res-row .swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--chart-a); flex: none; }
.res-row[aria-selected="true"] .swatch { box-shadow: 0 0 0 2px color-mix(in srgb, var(--chart-a) 35%, transparent); }
.res-row .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.res-row .rpeak { font: 400 11px/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.res-row.over .rpeak { color: var(--red-lead); font-weight: 500; }

.res-row input.lim {
  width: 54px; flex: none; text-align: right;
  font: 400 11px/1 var(--mono); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 3px 5px;
}
.res-row input.lim:focus { outline: none; border-color: var(--chart-a); }
.res-row input.lim::placeholder { color: var(--ink-faint); }

.res-charts { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.res-charts canvas { display: block; position: absolute; left: 0; }

.res-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-faint); font-size: 12px; text-align: center; padding: 0 20px;
}

.res-tip {
  position: absolute; z-index: 12; pointer-events: none;
  background: var(--ink); color: var(--paper);
  font: 400 11px/1.45 var(--sans);
  padding: 6px 8px; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 4px 14px rgb(0 0 0 / .2);
}
.res-tip b { font-family: var(--mono); font-weight: 500; }
.res-tip .over { color: #FF9A8E; }

/* levelling banner */
.level-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 32px; flex: none;
  background: color-mix(in srgb, var(--trace) 16%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--trace) 40%, var(--rule));
  font-size: 12px;
}
.level-bar[hidden] { display: none; }
.level-bar .spacer { flex: 1; }
.level-bar b { font-variant-numeric: tabular-nums; }


/* --- AI drawer ----------------------------------------------------------- */

.ai {
  position: absolute; top: 0; right: 0; bottom: 0; width: 420px; z-index: 14;
  background: var(--paper); border-left: 1px solid var(--rule-firm);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgb(0 0 0 / .07);
}
.ai[hidden] { display: none; }

.ai-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none;
  border-bottom: 1px solid var(--rule);
}
.ai-head h2 {
  margin: 0; font: 600 12px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); flex: 1;
}

.ai-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }

.ai-task { display: flex; flex-direction: column; gap: 6px; }
.ai-task label { font: 500 11px/1 var(--sans); color: var(--ink-soft); }
.ai-task textarea, .ai-task input[type=text], .ai-task input[type=password], .ai-task select {
  font: 400 12px/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 7px 8px; width: 100%; resize: vertical;
}
.ai-task textarea:focus, .ai-task input:focus, .ai-task select:focus {
  outline: none; border-color: var(--chart-a);
}
.ai-task .row { display: flex; gap: 6px; }
.ai-task .row > * { flex: 1; min-width: 0; }

.ai-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }

.ai-status {
  font-size: 12px; color: var(--ink-soft);
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper-sunk);
}
.ai-status.err { color: var(--red-lead); border-color: color-mix(in srgb, var(--red-lead) 40%, var(--rule)); }
.ai-status.busy::after { content: ''; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.ai-result { border: 1px solid var(--rule-firm); border-radius: 4px; overflow: hidden; }
.ai-result .sum {
  padding: 10px; font-size: 12px; line-height: 1.55;
  border-bottom: 1px solid var(--rule); background: var(--paper-sunk);
}
.ai-result ul { margin: 0; padding: 8px 10px 8px 26px; max-height: 260px; overflow: auto; }
.ai-result li { font-size: 12px; line-height: 1.6; }
.ai-result li.bad { color: var(--red-lead); list-style: none; margin-left: -14px; }
.ai-result li.bad::before { content: '! '; font-weight: 600; }
.ai-result .foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--rule); }
.ai-result .foot .spacer { flex: 1; }

.ai-usage { font: 400 10px/1 var(--mono); color: var(--ink-faint); }


/* --- details panel ------------------------------------------------------- */

.details {
  position: relative;
  flex: none; height: var(--dt-h, 226px);
  border-top: 1px solid var(--rule-firm);
  background: var(--paper);
  display: flex; flex-direction: column;
}
.details[hidden] { display: none; }
.details .dt-scroll { flex: 1; overflow: auto; padding: 10px 14px; }

/* P6 puts activity details in a docked bottom pane with tabs; so do we. */
.dt-tabs {
  display: flex; gap: 0; flex: none; align-items: stretch;
  border-bottom: 1px solid var(--rule); background: var(--paper-sunk);
  padding: 0 8px; overflow-x: auto;
}
.dt-tab {
  font: 500 11px/1 var(--sans); color: var(--ink-soft);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.dt-tab:hover { color: var(--ink); }
.dt-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue-lead); background: var(--paper); }
.dt-tab .n { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; margin-left: 4px; }
.dt-title {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 0 4px; font: 500 11px/1 var(--sans); color: var(--ink-soft);
}
.dt-title .code { font-family: var(--mono); color: var(--ink); }

/* the bottom pane lays its sections out in columns, like P6's detail tabs */
.dt-cols { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.dt-cols > * { min-width: 210px; }
.dt-rels { flex: 1; min-width: 320px; }

.dt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dt-head .code { font: 600 13px/1 var(--mono); }
.dt-head .flag {
  font: 600 9px/1 var(--cond); letter-spacing: .08em;
  padding: 3px 6px; border-radius: 2px;
  color: var(--ink-soft); background: var(--paper-sunk);
}
.dt-head .flag.crit { color: #fff; background: var(--red-lead); }

.dt-section { margin: 0 0 12px; }
.dt-section h3 {
  margin: 0 0 6px; font: 600 10px/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 5px;
}
.dt-field { margin: 7px 0; }
.dt-field label { display: block; font: 500 10px/1.6 var(--sans); color: var(--ink-faint); }
.dt-field input, .dt-field select {
  width: 100%; font: 400 12px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 5px 7px;
}
.dt-field input:focus, .dt-field select:focus { outline: none; border-color: var(--blue-lead); }
.dt-dates { font: 400 11px/1.6 var(--mono); color: var(--ink-soft); margin-top: 4px; }
.dt-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 6px; }
.dt-kv { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.dt-kv b { font-variant-numeric: tabular-nums; }

.dt-rel {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 0; border-bottom: 1px solid var(--rule);
}
.dt-rel.crit .code { color: var(--red-lead); }
.dt-rel-who {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  border-radius: 3px; text-align: left; color: var(--ink);
}
.dt-rel-who:hover { background: var(--paper-sunk); }
.dt-rel-who .code { font: 500 10px/1.3 var(--mono); }
.dt-rel-who .nm {
  font: 400 11px/1.3 var(--sans); color: var(--ink-soft);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dt-rel-type { font: 400 10px/1 var(--mono); border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink); padding: 3px 1px; }
.dt-rel-lag {
  width: 34px; text-align: right; font: 400 10px/1 var(--mono);
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  color: var(--ink); padding: 4px 4px;
}
.dt-rel-x {
  border: none; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: 3px;
}
.dt-rel-x:hover { color: var(--red-lead); background: var(--paper-sunk); }

.dt-addrel { display: flex; gap: 4px; margin-top: 6px; }
.dt-addrel input[type=text] {
  flex: 1; min-width: 0; font: 400 11px/1.4 var(--sans);
  border: 1px solid var(--rule); border-radius: 3px; padding: 5px 6px;
  background: var(--paper); color: var(--ink);
}
.dt-addrel select { font: 400 10px/1 var(--mono); border: 1px solid var(--rule);
  border-radius: 3px; background: var(--paper); color: var(--ink); }
.dt-addrel .btn { padding: 4px 8px; }

/* --- find / filter / columns --------------------------------------------- */

.find {
  font: 400 12px/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 6px 8px; width: 150px;
}
.find:focus { outline: none; border-color: var(--blue-lead); width: 200px; }
.find::placeholder { color: var(--ink-faint); }

.btn[aria-pressed="true"].chip { background: color-mix(in srgb, var(--red-lead) 12%, var(--paper)); border-color: var(--red-lead); color: var(--red-lead); }

.col-h.sortable { cursor: pointer; }
.col-h.sortable:hover { color: var(--ink); }
.col-h .dir { margin-left: 3px; }

.colmenu {
  position: absolute; z-index: 30; top: 40px; right: 10px;
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: 6px; min-width: 160px;
}
.colmenu label {
  display: flex; gap: 8px; align-items: center;
  font: 400 12px/1 var(--sans); padding: 6px 8px; border-radius: 3px; cursor: pointer;
}
.colmenu label:hover { background: var(--paper-sunk); }

.addmenu { min-width: 180px; }


/* --- ribbon -------------------------------------------------------------- */

.ribbon { flex: none; border-bottom: 1px solid var(--rule-firm); background: var(--paper); }
.ribbon-top {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 12px; border-bottom: 1px solid var(--rule);
}
.rtabs { display: flex; gap: 2px; margin-left: 6px; }
.rtab {
  font: 500 11px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: none;
  padding: 10px 12px 9px; cursor: pointer; border-bottom: 2px solid transparent;
}
.rtab:hover { color: var(--ink); }
.rtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red-lead); }

.ribbon-body { min-height: 54px; }
.rpane { display: flex; align-items: stretch; gap: 0; padding: 0 6px; }
.rpane[hidden] { display: none; }
.rgroup {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px 3px; border-right: 1px solid var(--rule);
}
.rgroup:last-child { border-right: none; }
.rgroup-btns { display: flex; align-items: center; gap: 4px; }
.rgroup-label {
  font: 500 9px/1 var(--cond); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- variance ------------------------------------------------------------ */

.cell.late  { color: var(--red-lead); }
.cell.early { color: var(--green); }

.bl-menu { min-width: 240px; }
.bl-menu .bl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.bl-menu .bl-row:hover { background: var(--paper-sunk); }
.bl-menu .bl-row[aria-selected="true"] { background: color-mix(in srgb, var(--blue-lead) 12%, transparent); }
.bl-menu .bl-row .when { margin-left: auto; font: 400 10px/1 var(--mono); color: var(--ink-faint); }
.bl-menu .bl-row .x { color: var(--ink-faint); padding: 0 2px; }
.bl-menu .bl-row .x:hover { color: var(--red-lead); }
.bl-menu hr { border: none; border-top: 1px solid var(--rule); margin: 5px 0; }

.status .item.var b.late { color: var(--red-lead); }
.status .item.var b.early { color: var(--green); }

/* --- activity detail tabs: steps, resources, notebook -------------------- */

.dt-steprow {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0; border-bottom: 1px solid var(--rule);
}
.dt-steprow.head {
  font: 500 9px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule-firm); padding-bottom: 5px;
}
.dt-steprow.done .c0 { color: var(--ink-soft); text-decoration: line-through; }
.dt-steprow .c0 { flex: 1; min-width: 120px; }
.dt-steprow .c1, .dt-steprow .c2, .dt-steprow .c3 { width: 78px; flex: none; }
.dt-steprow .c4 { width: 40px; flex: none; }
.dt-steprow .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-steprow input[type=text] {
  font: 400 12px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid transparent; border-radius: 3px; padding: 4px 6px;
}
.dt-steprow input[type=text]:hover { border-color: var(--rule); }
.dt-steprow input[type=text]:focus { outline: none; border-color: var(--blue-lead); }
.dt-steprow span.num { font: 400 11px/1 var(--mono); color: var(--ink-soft); }

.dt-prog {
  position: relative; height: 16px; border-radius: 3px;
  background: var(--paper-sunk); border: 1px solid var(--rule); overflow: hidden; margin-top: 4px;
}
.dt-prog-fill { position: absolute; inset: 0 auto 0 0; background: var(--green); opacity: .75; }
.dt-prog-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 500 10px/1 var(--mono); color: var(--ink);
}

.dt-note-item { margin-bottom: 8px; }
.dt-note-head { display: flex; align-items: center; gap: 6px; }
.dt-note-head .topic {
  font: 600 10px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  flex: 1;
}
.dt-note-item textarea {
  width: 100%; font: 400 12px/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 6px 8px; resize: vertical;
}
.dt-note-item textarea:focus { outline: none; border-color: var(--blue-lead); }


/* --- organise bar + stat tiles ------------------------------------------- */

.organise {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 12px; height: 38px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
  overflow-x: auto;
}
.organise[hidden] { display: none; }
.organise label {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 500 10px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.organise select {
  font: 400 11px/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 4px 5px;
}
.organise select:focus { outline: none; border-color: var(--blue-lead); }
.btn.tiny { padding: 4px 7px; font-size: 11px; }

.tiles { display: flex; gap: 0; align-items: stretch; }
.tile {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 0 12px; border-left: 1px solid var(--rule); white-space: nowrap;
}
.tile b { font: 600 14px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tile span {
  font: 500 8px/1 var(--cond); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tile.crit b { color: var(--red-lead); }
.tile.done b { color: var(--green); }
.tile.window { align-items: flex-end; }
.tile.window b { font-size: 10px; font-weight: 500; }

/* --- DCMA panel ---------------------------------------------------------- */

.dcma-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dcma-score b { font: 600 26px/1 var(--mono); }
.dcma-score b.good { color: var(--green); }
.dcma-score b.poor { color: var(--red-lead); }
.dcma-score span { font-size: 12px; color: var(--ink-soft); }

.dcma-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12px;
}
.dcma-row .n { font: 500 10px/1 var(--mono); color: var(--ink-faint); width: 18px; flex: none; }
.dcma-row .nm { flex: 1; min-width: 120px; }
.dcma-row .val { font: 400 11px/1 var(--mono); color: var(--ink-soft); }
.dcma-row .lim { font-size: 10px; color: var(--ink-faint); width: 90px; text-align: right; flex: none; }
.dcma-row .st {
  font: 600 9px/1 var(--cond); letter-spacing: .07em;
  padding: 3px 6px; border-radius: 2px; width: 42px; text-align: center; flex: none;
}
.dcma-row .st.pass { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.dcma-row .st.fail { color: #fff; background: var(--red-lead); }
.dcma-row .st.na { color: var(--ink-faint); background: var(--paper-sunk); }
.dcma-note { font-size: 11px; color: var(--ink-faint); padding: 0 0 6px 26px; }


/* --- relationship panes: driving, chain depth ---------------------------- */

.dt-rel.head {
  font: 500 9px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule-firm); padding-bottom: 5px;
}
.dt-rel.head > span { background: none; border: none; padding: 0; }
.dt-rel.drv { background: color-mix(in srgb, var(--acc) 6%, transparent); }

.dt-rel-chain {
  width: 34px; flex: none; text-align: right;
  font: 400 10px/1 var(--mono); color: var(--ink-faint);
}
.dt-rel-drv {
  width: 26px; flex: none; text-align: center;
  font-size: 11px; color: var(--rule-firm);
}
.dt-rel-drv.on { color: var(--green); }

.dt-chain-badge {
  margin-left: 8px; font: 500 9px/1 var(--cond); letter-spacing: .06em;
  color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent);
  padding: 3px 6px; border-radius: 3px; text-transform: none;
}


/* --- left navigator: WBS / Codes tree ------------------------------------ */

.sidebar {
  flex: none; width: var(--sidebar-w, 244px);
  border-right: 1px solid var(--rule-firm);
  background: var(--paper);
  display: flex; flex-direction: column; min-width: 0;
}
.sidebar[hidden] { display: none; }

.sb-tabs { display: flex; flex: none; border-bottom: 1px solid var(--rule); background: var(--paper-sunk); }
.sb-tab {
  flex: 1; font: 500 10px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 0 9px; cursor: pointer;
}
.sb-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--acc); background: var(--paper); }

.sb-body { flex: 1; overflow: auto; padding: 6px 0; }

.sb-node {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; cursor: pointer; font-size: 12px;
  border-left: 2px solid transparent;
}
.sb-node:hover { background: var(--paper-sunk); }
.sb-node[aria-selected="true"] {
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border-left-color: var(--acc);
}
.sb-node .tw { width: 14px; flex: none; color: var(--ink-faint); font-size: 9px; text-align: center; }
.sb-node .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-node .ct { font: 400 10px/1 var(--mono); color: var(--ink-faint); }
.sb-node .ct .cr { color: var(--red-lead); }
.sb-all { font-weight: 600; }

/* -- risk & top movers ------------------------------------------------------ */

.risk-bar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; flex-wrap: wrap; }
.risk-ctl { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.risk-prog { font: 500 11px/1 var(--mono); color: var(--acc); min-width: 34px; }
.risk-note { font-size: 11px; color: var(--ink-faint); padding: 2px 12px 8px; }

.risk-tiles { display: flex; gap: 10px; padding: 4px 12px; flex-wrap: wrap; }
.risk-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper-sunk); min-width: 96px;
}
.risk-tile .k { font: 600 10px/1 var(--mono); color: var(--ink-faint); letter-spacing: .04em; }
.risk-tile b { font-size: 14px; }
.risk-tile .s { font: 400 10px/1 var(--mono); color: var(--ink-soft); }
.risk-tile.hot { border-color: var(--acc); }
.risk-tile.hot .k, .risk-tile.hot .s { color: var(--acc); }

.risk-crit { padding: 4px 12px 10px; }
.risk-crit h3 { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin: 6px 0; }
.risk-critrow {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 4px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.risk-critrow:hover { background: var(--paper-sunk); }
.risk-critrow .code { font: 500 10px/1 var(--mono); color: var(--ink-soft); width: 76px; flex: none; }
.risk-critrow .nm { flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-critrow .lane { flex: 2; height: 8px; background: var(--paper-sunk); border-radius: 4px; overflow: hidden; }
.risk-critrow .bar { display: block; height: 100%; background: var(--red-lead); border-radius: 4px; }
.risk-critrow .bar.early { background: var(--acc2, var(--green)); }
.risk-critrow .pct { font: 500 10px/1 var(--mono); width: 44px; text-align: right; flex: none; }
.risk-critrow .pct.late { color: var(--red-lead); }
.risk-critrow .pct.early { color: var(--green); }

/* -- details hide control --------------------------------------------------- */

.dt-close {
  position: absolute; top: 4px; right: 6px; z-index: 2;
  border: 0; background: none; color: var(--ink-faint);
  font-size: 14px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 4px;
}
.dt-close:hover { color: var(--ink); background: var(--paper-sunk); }

/* the named-scale picker sits with the zoom buttons */
#tsScale { font-size: 11px; }