/* ============================================================================
   components-ext-data.css — MMD Central Design System, CDS expansion round
   (2026-09-02). Ben named this explicitly: "gantt charts". Kanban board
   (.ds-kanban*) already ships in components.css with live consumers and a
   full drag/drop state set -- it is NOT redeclared here, only wired into
   the gallery. This file adds the genuinely missing Gantt chart.
   ========================================================================= */

/* ---- Gantt chart: fixed task sidebar + scrollable date grid ---- */

.ds-gantt {
  display: flex; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm);
  overflow: hidden; background: var(--paper); font-family: var(--font-ui);
}

.ds-gantt-sidebar { flex: none; width: 200px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; }
.ds-gantt-sidebar-head {
  height: 34px; display: flex; align-items: center; padding: 0 10px;
  background: var(--rp-silver, var(--paper-2)); border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ds-gantt-task-row {
  height: 30px; flex: none; display: flex; align-items: center; padding: 0 10px;
  border-bottom: 1px solid var(--hairline); font-size: 11.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-gantt-task-row--group {
  font-weight: 700; background: var(--paper-2); text-transform: uppercase;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-soft);
}

.ds-gantt-grid { flex: 1; min-width: 0; overflow-x: auto; position: relative; }
.ds-gantt-grid-head {
  height: 34px; display: flex; background: var(--rp-silver, var(--paper-2)); border-bottom: 1px solid var(--hairline);
}
.ds-gantt-grid-col-head {
  flex: none; width: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute);
  border-right: 1px solid var(--rp-line-2, var(--hairline));
}
.ds-gantt-grid-col-head--weekend { background: var(--paper); }
.ds-gantt-grid-body { position: relative; }
.ds-gantt-grid-row {
  height: 30px; display: flex; border-bottom: 1px solid var(--hairline); position: relative;
}
.ds-gantt-grid-cell {
  flex: none; width: 34px; border-right: 1px solid var(--rp-line-2, var(--hairline));
}
.ds-gantt-grid-cell--weekend { background: var(--paper-2); }

.ds-gantt-bar {
  position: absolute; top: 5px; height: 20px; border-radius: 3px;
  background: var(--ink-soft); display: flex; align-items: center; padding: 0 8px;
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-inset-hairline);
}
.ds-gantt-bar-label {
  font-size: 10px; font-weight: 600; color: var(--paper); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ds-gantt-bar--done { background: var(--signal-grass); }
.ds-gantt-bar--active { background: var(--baobab); }
.ds-gantt-bar--blocked { background: var(--signal-amber); }
.ds-gantt-bar.ds-gantt-bar--milestone {
  width: 16px; height: 16px; border-radius: 3px; transform: rotate(45deg);
  background: var(--rp-black, var(--ink)); top: 7px;
}

/* Bar position/width: zero inline styles, so this reuses the CDS's own
   established data-driven-sizing convention (see components.css's global
   [data-pct="N"]{width:N%} steps for .ds-meter-fill/.ds-progress-fill) --
   [data-pct] already exists and is reused verbatim for bar WIDTH; this file
   only adds the matching [data-ds-left] step family for bar LEFT offset,
   since a Gantt bar (unlike a meter fill) needs both. Callers pick the
   nearest 5% step to the real date range; this is the same precision
   tradeoff the existing meter/progress components already ship with. */
.ds-gantt-bar[data-ds-left="0"] { left: 0%; }
.ds-gantt-bar[data-ds-left="5"] { left: 5%; }
.ds-gantt-bar[data-ds-left="10"] { left: 10%; }
.ds-gantt-bar[data-ds-left="15"] { left: 15%; }
.ds-gantt-bar[data-ds-left="20"] { left: 20%; }
.ds-gantt-bar[data-ds-left="25"] { left: 25%; }
.ds-gantt-bar[data-ds-left="30"] { left: 30%; }
.ds-gantt-bar[data-ds-left="35"] { left: 35%; }
.ds-gantt-bar[data-ds-left="40"] { left: 40%; }
.ds-gantt-bar[data-ds-left="45"] { left: 45%; }
.ds-gantt-bar[data-ds-left="50"] { left: 50%; }
.ds-gantt-bar[data-ds-left="55"] { left: 55%; }
.ds-gantt-bar[data-ds-left="60"] { left: 60%; }
.ds-gantt-bar[data-ds-left="65"] { left: 65%; }
.ds-gantt-bar[data-ds-left="70"] { left: 70%; }
.ds-gantt-bar[data-ds-left="75"] { left: 75%; }
.ds-gantt-bar[data-ds-left="80"] { left: 80%; }
.ds-gantt-bar[data-pct] { position: absolute; }
.ds-gantt-today-line[data-ds-left="0"] { left: 0%; }
.ds-gantt-today-line[data-ds-left="10"] { left: 10%; }
.ds-gantt-today-line[data-ds-left="20"] { left: 20%; }
.ds-gantt-today-line[data-ds-left="30"] { left: 30%; }
.ds-gantt-today-line[data-ds-left="40"] { left: 40%; }
.ds-gantt-today-line[data-ds-left="50"] { left: 50%; }
.ds-gantt-today-line[data-ds-left="60"] { left: 60%; }
.ds-gantt-today-line[data-ds-left="70"] { left: 70%; }
.ds-gantt-today-line[data-ds-left="80"] { left: 80%; }
.ds-gantt-today-flag[data-ds-left="0"] { left: 0%; }
.ds-gantt-today-flag[data-ds-left="10"] { left: 10%; }
.ds-gantt-today-flag[data-ds-left="20"] { left: 20%; }
.ds-gantt-today-flag[data-ds-left="30"] { left: 30%; }
.ds-gantt-today-flag[data-ds-left="40"] { left: 40%; }
.ds-gantt-today-flag[data-ds-left="50"] { left: 50%; }
.ds-gantt-today-flag[data-ds-left="60"] { left: 60%; }
.ds-gantt-today-flag[data-ds-left="70"] { left: 70%; }
.ds-gantt-today-flag[data-ds-left="80"] { left: 80%; }

.ds-gantt-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--baobab); z-index: 3;
}
.ds-gantt-today-flag {
  position: absolute; top: -1px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--baobab-on, var(--paper)); background: var(--baobab);
  padding: 1px 4px; border-radius: 2px; white-space: nowrap;
}

/* Dependency line between two bars (optional per spec -- a simple elbow
   connector drawn as an absolutely-positioned border pair, no SVG needed
   for the straight/elbow case the gallery specimen shows). */
.ds-gantt-dep-line {
  position: absolute; border-top: 1px dashed var(--ink-faint); border-right: 1px dashed var(--ink-faint);
  pointer-events: none; z-index: 2;
}

.ds-gantt-legend { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--hairline); background: var(--paper-2); }
.ds-gantt-legend-item { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-mute); }
.ds-gantt-legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ds-gantt-legend-swatch--done { background: var(--signal-grass); }
.ds-gantt-legend-swatch--active { background: var(--baobab); }
.ds-gantt-legend-swatch--blocked { background: var(--signal-amber); }

/* ============================================================================
   Batch 2 (2026-09-03) — data views: tree table, timeline/activity feed,
   calendar month+week, stat row, sparkline frame, diff/compare, drag-reorder
   list, plus collapsible/scroll-area/separator (shadcn parity, natural home
   is this data-views family).
   ========================================================================= */

/* ---- Tree table: expand/collapse rows with indent (a DATA TABLE with
   nested rows, distinct from .ds-tree in components-ext-nav.css, which is
   side-nav). Indent is set per-row via data-ds-depth, matching the CDS's
   own established data-driven-sizing convention. ---- */
.ds-tree-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ds-tree-table thead th {
  background: var(--rp-silver, var(--paper-2)); color: var(--rp-ink, var(--ink)); text-align: left;
  font-family: var(--font-mono); font-size: var(--rp-fs-th); font-weight: var(--rp-fw-th); letter-spacing: var(--rp-ls-th);
  text-transform: uppercase; border-bottom: 1px solid var(--rp-line-2, var(--hairline)); padding: 5px 9px;
}
.ds-tree-table tbody tr { border-bottom: 1px solid var(--hairline); }
.ds-tree-table tbody tr:hover { background: var(--paper-2); }
.ds-tree-table tbody tr[hidden] { display: none; }
.ds-tree-table td { padding: 6px 9px; }
.ds-tree-table-row-label { display: flex; align-items: center; gap: 5px; }
.ds-tree-table-toggle {
  flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 9px; transform: rotate(0deg); transition: transform 0.1s ease;
}
.ds-tree-table tr[data-ds-expanded="true"] > td .ds-tree-table-toggle { transform: rotate(90deg); }
.ds-tree-table-toggle--leaf { visibility: hidden; }
[data-ds-depth="0"] .ds-tree-table-row-label, tr[data-ds-depth="0"] .ds-tree-table-row-label { padding-left: 0; }
tr[data-ds-depth="1"] .ds-tree-table-row-label { padding-left: 18px; }
tr[data-ds-depth="2"] .ds-tree-table-row-label { padding-left: 36px; }
tr[data-ds-depth="3"] .ds-tree-table-row-label { padding-left: 54px; }

/* ---- Timeline / activity feed ---- */
.ds-timeline { display: flex; flex-direction: column; }
.ds-timeline-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.ds-timeline-item:last-child { padding-bottom: 0; }
.ds-timeline-rail { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.ds-timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rp-ink, var(--ink)); flex: none; margin-top: 3px; }
.ds-timeline-item--done .ds-timeline-dot { background: var(--signal-grass); }
.ds-timeline-item--blocked .ds-timeline-dot { background: var(--signal-amber); }
.ds-timeline-line { flex: 1; width: 1px; background: var(--hairline); margin-top: 2px; }
.ds-timeline-item:last-child .ds-timeline-line { display: none; }
.ds-timeline-body { flex: 1; min-width: 0; padding-top: 0; }
.ds-timeline-head { display: flex; align-items: baseline; gap: 8px; }
.ds-timeline-title { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ds-timeline-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
.ds-timeline-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---- Calendar: month + week view ---- */
.ds-calendar { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ds-calendar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  background: var(--rp-silver, var(--paper-2)); border-bottom: 1px solid var(--rp-line-2, var(--hairline));
}
.ds-calendar-head-label { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ds-calendar-nav { border: 1px solid var(--hairline-dark); background: var(--rp-white, var(--paper)); color: var(--ink); cursor: pointer; width: 22px; height: 22px; border-radius: 3px; }
.ds-calendar-nav:hover { border-color: var(--baobab); color: var(--baobab); }
.ds-calendar-today-btn {
  border: 1px solid var(--hairline-dark); background: var(--rp-white, var(--paper)); color: var(--ink); cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 3px;
}
.ds-calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ds-calendar-weekday {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center; padding: 5px 0; border-bottom: 1px solid var(--hairline);
}
.ds-calendar-day {
  min-height: 68px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 11px;
}
.ds-calendar-month-grid .ds-calendar-day:nth-child(7n) { border-right: 0; }
.ds-calendar-day-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
.ds-calendar-day--muted { background: var(--paper-2); }
.ds-calendar-day--muted .ds-calendar-day-num { color: var(--ink-faint, var(--ink-mute)); }
.ds-calendar-day--today .ds-calendar-day-num {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--baobab); color: var(--baobab-on, var(--paper)); font-weight: 700;
}
.ds-calendar-event {
  font-size: 9.5px; padding: 1px 4px; border-radius: 2px; background: var(--rp-ink, var(--ink));
  color: var(--rp-white, var(--paper)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-calendar-event--blocked { background: var(--signal-amber); color: var(--ink); }
.ds-calendar-week-grid { display: grid; grid-template-columns: 44px repeat(7, 1fr); }
.ds-calendar-week-grid .ds-calendar-weekday { grid-row: 1; }
.ds-calendar-hour-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); text-align: right; padding: 2px 6px 0 0;
  border-right: 1px solid var(--hairline); border-top: 1px solid var(--hairline);
}
.ds-calendar-hour-cell { min-height: 30px; border-right: 1px solid var(--hairline); border-top: 1px solid var(--hairline); position: relative; }
.ds-calendar-week-grid > .ds-calendar-hour-cell:nth-child(9n) { border-right: 0; }

/* ---- Stat row: dense, mono numbers, NO dashboard tiles ---- */
.ds-stat-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.ds-stat-row-item { display: flex; align-items: baseline; gap: 6px; }
.ds-stat-row-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.ds-stat-row-value { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-stat-row-value--danger { color: var(--baobab); }
.ds-stat-row-value--good { color: var(--signal-grass); }

/* ---- Sparkline frame (host for an inline SVG polyline the consumer
   draws; this only supplies the frame/baseline, no charting library). ---- */
.ds-sparkline { display: inline-flex; align-items: flex-end; width: 90px; height: 24px; position: relative; }
.ds-sparkline svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ds-sparkline-baseline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); }

/* ---- Diff / compare (two-column) ---- */
.ds-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ds-diff-col { background: var(--rp-white, var(--paper)); padding: 10px 12px; font-size: 12px; }
.ds-diff-col-head { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.ds-diff-row { padding: 2px 0; }
.ds-diff-row--removed { background: color-mix(in srgb, var(--baobab) 10%, transparent); text-decoration: line-through; color: var(--ink-mute); }
.ds-diff-row--added { background: color-mix(in srgb, var(--signal-grass) 14%, transparent); }
.ds-diff-row--changed { background: color-mix(in srgb, var(--signal-amber) 16%, transparent); }

/* ---- Drag-reorder list ---- */
.ds-reorder-list { display: flex; flex-direction: column; gap: 4px; }
.ds-reorder-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm); background: var(--rp-white, var(--paper)); cursor: grab; font-size: 12px;
}
.ds-reorder-item:active { cursor: grabbing; }
.ds-reorder-item.ds-reorder-item-dragging { opacity: 0.4; }
.ds-reorder-handle { flex: none; width: 12px; height: 16px; color: var(--ink-faint, var(--ink-mute)); }
.ds-reorder-drop-line { height: 2px; background: var(--baobab); border-radius: 1px; margin: -1px 0; display: none; }
.ds-reorder-drop-line.ds-reorder-drop-line-active { display: block; }

/* ---- Collapsible (shadcn parity — a single trigger+content pair,
   distinct from .ds-accordion's multi-item group) ---- */
.ds-collapsible { display: flex; flex-direction: column; }
.ds-collapsible-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; background: transparent; cursor: pointer; padding: 6px 0; text-align: left;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--ink);
}
.ds-collapsible-chevron { flex: none; width: 10px; height: 10px; color: var(--ink-mute); transition: transform 0.14s ease; }
.ds-collapsible[data-open="true"] .ds-collapsible-chevron { transform: rotate(180deg); }
.ds-collapsible-content { display: none; padding: 6px 0 2px; font-size: 12px; color: var(--ink-soft); }
.ds-collapsible[data-open="true"] .ds-collapsible-content { display: block; }

/* ---- Scroll-area (shadcn parity — a bounded, thin-scrollbar viewport) ---- */
.ds-scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ink-mute) var(--paper-2); }
.ds-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-scroll-area::-webkit-scrollbar-track { background: var(--paper-2); }
.ds-scroll-area::-webkit-scrollbar-thumb { background: var(--ink-mute); border-radius: 4px; }
.ds-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* ---- Separator (shadcn parity) ---- */
.ds-separator { border: 0; background: var(--hairline); }
.ds-separator--h { height: 1px; width: 100%; margin: 8px 0; }
.ds-separator--v { width: 1px; align-self: stretch; margin: 0 8px; }

/* ---- Resizable panes (shadcn "resizable" parity) — a split-pane group
   with a draggable divider between two panes, distinct from the .ds-window
   edge/corner resize handles (batch-2 family 4): that resizes a floating
   window's own bounds; this resizes the split between two panes sharing
   one fixed container. ---- */
.ds-resizable-group { display: flex; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; height: 160px; }
.ds-resizable-group--vertical { flex-direction: column; }
.ds-resizable-pane { overflow: auto; padding: 10px 12px; font-size: 12px; color: var(--ink-soft); background: var(--rp-white, var(--paper)); }
.ds-resizable-handle {
  flex: none; width: 6px; background: var(--rp-silver, var(--paper-2)); cursor: col-resize;
  position: relative; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
}
.ds-resizable-handle:hover, .ds-resizable-handle.ds-resizable-handle-active { background: var(--baobab-bg); }
.ds-resizable-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px;
  background: var(--ink-mute); transform: translate(-50%, -50%); border-radius: 1px;
}
.ds-resizable-group--vertical .ds-resizable-handle { width: auto; height: 6px; cursor: row-resize; border-left: 0; border-right: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ds-resizable-group--vertical .ds-resizable-handle::after { width: 20px; height: 2px; }