/* ============================================================================
   Contour · chart + dashboard layout
   Every rule is scoped under .view-chart. Colours come from css/tokens.css only.
   ========================================================================== */

.view-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--canvas);
  font-size: var(--fs-base);
  color: var(--text);
}

/* ---------------------------------------------------------------- toolbar */

.view-chart .vc-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-soft);
  background: var(--surface);
}

/* Native controls follow the APP theme, not the OS (see the form stylesheet). */
.view-chart { color-scheme: light; }
[data-theme="dark"] .view-chart { color-scheme: dark; }

.view-chart .grow { flex: 1 1 auto; min-width: 0; }
.view-chart .muted { color: var(--text-2); }
.view-chart .faint { color: var(--text-2); }
.view-chart .tnum { font-variant-numeric: tabular-nums; }
.view-chart .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------------------------------------------------------------- layout */

.view-chart .vc-main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}

.view-chart .vc-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-3);
}

.view-chart .vc-stage.vc-single {
  display: flex;
  flex-direction: column;
}

.view-chart .vc-stage.vc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--sp-3);
  align-content: start;
}

/* ---------------------------------------------------------------- tile */

.view-chart .vc-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-3);
  gap: var(--sp-2);
}

.view-chart .vc-single .vc-tile { flex: 1 1 auto; min-height: 320px; min-width: 0; }
/* with the numbers on screen the plot yields height to the table instead of pushing it below the fold */
.view-chart .vc-single .vc-tile:has(.vc-table-wrap) .vc-plot { min-height: 180px; }
.view-chart .vc-single .vc-tile:has(.vc-table-wrap) .vc-table-wrap { max-height: 220px; }

.view-chart .vc-grid .vc-tile[data-span="4"]  { grid-column: span 4; }
.view-chart .vc-grid .vc-tile[data-span="6"]  { grid-column: span 6; }
.view-chart .vc-grid .vc-tile[data-span="12"] { grid-column: span 12; }




.view-chart .vc-tile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.view-chart .vc-tile-title {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: var(--fw-semibold);
  /* two lines beat an ellipsis: the title IS the question the tile answers */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.view-chart .vc-tile-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.view-chart .vc-tile-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  min-width: 0;
}

.view-chart .vc-plot {
  flex: 1 1 auto;
  min-height: 200px;
  min-width: 0;
  position: relative;
}

.view-chart .vc-single .vc-plot { min-height: 240px; }
.view-chart .vc-tile[data-type="kpi"] .vc-plot { min-height: 0; display: flex; }

.view-chart .vc-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- marks */

.view-chart .vc-grid-lines line,
.view-chart .vc-svg .vc-grid line { stroke: var(--line-2); stroke-width: 1; }
.view-chart .vc-svg .vc-grid .vc-axis-line { stroke: var(--line); }

.view-chart .vc-svg text {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  fill: var(--text-2);
}

.view-chart .vc-svg .vc-axis-y,
.view-chart .vc-svg .vc-axis-x { font-variant-numeric: tabular-nums; }
.view-chart .vc-svg .vc-restricted-text { fill: var(--text-2); font-style: italic; }

.view-chart .vc-svg .vc-val {
  fill: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.view-chart .vc-svg .vc-donut-total {
  fill: var(--text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.view-chart .vc-svg .vc-donut-cap { fill: var(--text-2); font-size: var(--fs-xs); }

.view-chart .vc-svg .vc-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.view-chart .vc-svg .vc-dot { stroke-width: 2; }

.view-chart .vc-mark {
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.view-chart .vc-mark:hover { opacity: .82; }
.view-chart .vc-mark:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- kpi */

.view-chart .vc-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-2) 0 var(--sp-1);
}

.view-chart .vc-kpi-value {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 40px;
  line-height: 48px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: left;
}
.view-chart .vc-kpi-value:hover { color: var(--accent); }
.view-chart .vc-kpi-value:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.view-chart .vc-kpi-cap { font-size: var(--fs-sm); color: var(--text-2); }
.view-chart .vc-kpi-sub { font-size: var(--fs-xs); color: var(--text-2); }

.view-chart .vc-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}
.view-chart .vc-kpi-delta[data-dir="up"] { color: var(--success); }
.view-chart .vc-kpi-delta[data-dir="down"] { color: var(--danger); }
.view-chart .vc-kpi-delta[data-dir="flat"] { color: var(--text-2); }
.view-chart .vc-kpi-arrow { display: inline-flex; width: 14px; height: 14px; }
.view-chart .vc-kpi-arrow svg { width: 100%; height: 100%; }
.view-chart .vc-kpi-delta[data-dir="down"] .vc-kpi-arrow { transform: rotate(180deg); }
.view-chart .vc-kpi-delta[data-dir="flat"] .vc-kpi-arrow { transform: rotate(90deg); }
.view-chart .vc-kpi-delta .muted { color: var(--text-2); }

.view-chart .vc-spark { width: 160px; height: 34px; margin-top: var(--sp-1); }

/* ---------------------------------------------------------------- legend */

.view-chart .vc-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  max-height: 96px;
  overflow-y: auto;
}

.view-chart .vc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 0;
  background: transparent;
  padding: 2px var(--sp-1);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  max-width: 260px;
}
.view-chart .vc-legend-item:hover { background: var(--hover); color: var(--text); }
.view-chart .vc-legend-item:disabled { cursor: default; }
.view-chart .vc-legend-item:disabled:hover { background: transparent; }
.view-chart .vc-legend-val { color: var(--text-2); font-variant-numeric: tabular-nums; }

.view-chart .vc-swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--c, var(--accent));
}

/* ---------------------------------------------------------------- notes */

.view-chart .vc-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.view-chart .vc-note {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

.view-chart button.vc-note {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.view-chart button.vc-note:hover { color: var(--text); }
.view-chart .vc-note.warn { color: var(--warning); }

.view-chart .chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: var(--border-w) solid var(--accent-line);
  font-size: var(--fs-xs);
  flex: none;
}

.view-chart .vc-restricted {
  color: var(--text-2);
  font-style: italic;
}

/* ---------------------------------------------------------------- table */

.view-chart .vc-table-wrap {
  max-height: 260px;
  overflow: auto;
  border: var(--border-soft);
  border-radius: var(--radius);
}

.view-chart .vc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.view-chart .vc-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.view-chart .vc-table th,
.view-chart .vc-table td {
  padding: var(--sp-1) var(--sp-2);
  border-bottom: var(--border-soft);
  text-align: left;
  white-space: nowrap;
}

.view-chart .vc-table thead th {
  position: sticky;
  top: 0;
  background: var(--sunken);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  z-index: 1;
}

.view-chart .vc-table td.tnum,
.view-chart .vc-table th.tnum { text-align: right; font-variant-numeric: tabular-nums; }
.view-chart .vc-table tbody tr:hover { background: var(--hover); }

/* ---------------------------------------------------------------- editor */

.view-chart .vc-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--sunken);
  border: var(--border-soft);
  border-radius: var(--radius);
}

.view-chart .vc-row { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }

.view-chart .vc-row > .label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.view-chart .vc-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.view-chart .vc-checks { display: flex; flex-direction: column; gap: var(--sp-2); }

.view-chart .vc-editor-foot { display: flex; justify-content: flex-end; }

.view-chart .vc-row .seg { flex-wrap: wrap; }

/* the config rail copy of the editor sits flush in the rail */
.view-chart.vc-config {
  height: auto;
  background: transparent;
  gap: var(--sp-3);
  display: flex;
  flex-direction: column;
}

.view-chart.vc-config .vc-editor { background: transparent; border: 0; padding: 0; }

.view-chart.vc-config .vc-config-tile {
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-2);
  background: var(--surface);
}

.view-chart.vc-config .vc-config-tile > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.view-chart.vc-config .vc-config-tile[open] > summary { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------- empty */

.view-chart .vc-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.view-chart .vc-empty-lg {
  grid-column: span 12;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.view-chart .vc-empty-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent);
}
.view-chart .vc-empty-mark .icon { width: 20px; height: 20px; }

.view-chart .vc-empty-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
}

.view-chart .vc-empty-body {
  margin: 0;
  max-width: 460px;
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

.view-chart .vc-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  max-width: 720px;
}

.view-chart .vc-suggest .btn { max-width: 320px; }

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

.view-chart .vc-drawer {
  flex: none;
  width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: var(--border);
  background: var(--surface);
}



.view-chart .vc-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: var(--border-soft);
}

.view-chart .vc-drawer-h { font-weight: var(--fw-semibold); }
.view-chart .vc-drawer-sub { font-size: var(--fs-sm); color: var(--text-2); }

.view-chart .vc-drawer-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-1);
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.view-chart .vc-drawer-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.view-chart .vc-drawer-row:hover { background: var(--hover); }

.view-chart .vc-drawer-title { flex: 1 1 auto; }
.view-chart .vc-drawer-val { color: var(--text-2); flex: none; }

.view-chart .vc-drawer-empty { padding: var(--sp-4); color: var(--text-2); }

.view-chart .vc-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: var(--border-soft);
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------- tooltip */

.view-chart .vc-tip {
  position: absolute;
  z-index: var(--z-popover);
  pointer-events: none;
  max-width: 260px;
  padding: var(--sp-2);
  border-radius: var(--radius);
  border: var(--border);
  background: var(--raised);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view-chart .vc-tip[hidden] { display: none; }
.view-chart .vc-tip-h { font-weight: var(--fw-semibold); }
.view-chart .vc-tip-s { display: flex; align-items: center; gap: var(--sp-1); color: var(--text-2); }
.view-chart .vc-tip-v { color: var(--text); font-variant-numeric: tabular-nums; }
.view-chart .vc-tip-n { color: var(--text-2); font-size: var(--fs-xs); }