/* Dashboard kit: layout on top of Quiet. Tokens only (design-system check.py refuses a literal colour or font). */
.dk-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-2); }
.dk-titles > .ds-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* tile labels wrap rather than cut ("Contribution margin" at 412 px); the label area grows so values line up */
.dk-top .ds-tile-l, .dk-detail .ds-tile-l { flex: 1; display: flex; align-items: flex-end; white-space: normal; overflow: visible; }

/* the filter card: WHEN row, custom dates, WHICH row; chips under it */
.dk-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3); }
.dk-when, .dk-dates, .dk-which { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.dk-dates[hidden] { display: none; }
.dk-period { flex: 1 1 300px; }
.dk-cmp { flex: 1 1 200px; }
.dk-dates > .ds-field { flex: 1 1 150px; }
.dk-dates > .ds-btn { flex: none; }
.dk-which > .ds-field { flex: 1 1 220px; }
.dk-chips { margin-top: var(--space-2); }
.dk-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); color: var(--text-2); }
.dk-note > .ds-i { margin-top: 2px; color: var(--text-3); }

/* hero + tiles: stacked on a phone, side by side on a desk */
.dk-kpi-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dk-kpi .ds-delta { flex-wrap: wrap; }
.dk-tile-na { white-space: normal; }
.dk-spark { display: block; height: 28px; margin-top: 6px; }
.dk-hero-s { font-size: var(--text-2xl); }

/* the chart card */
.dk-chart-card { margin-top: var(--space-6); padding: var(--space-4); }
.dk-chart-card > .ds-chart-head { margin-top: 0; align-items: flex-start; }
.dk-chart-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dk-chart { min-height: 200px; }
.ds-legend > span > i.dk-muted-key { background: var(--chart-muted); }
.dk-chart-table { margin-top: var(--space-2); }

/* tables: the system's table has no side padding, so number columns get a gap of their own */
.ds-table .num { padding-left: var(--space-4); }
.dk-label { padding-right: var(--space-2); }
.dk-rows .ds-badge, .dk-label .ds-badge { margin-left: var(--space-1); vertical-align: middle; }
.dk-rowbtn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--tap);
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dk-rowbtn > .ds-i { color: var(--text-3); flex: none; }
.dk-collapsed tr[data-more] { display: none; }
.dk-showall { margin-top: var(--space-1); min-height: var(--tap); }
.dk-total td { font-weight: 600; }
.dk-sub { display: block; }
.dk-na { margin-top: var(--space-2); }
.dk-unsold { margin: var(--space-2) 0; }
.dk-fold { margin-top: var(--space-6); }
.dk-fold > summary + * { margin-top: var(--space-2); }
.dk-defs td { vertical-align: top; padding: var(--space-3) var(--space-2) var(--space-3) 0; height: auto; }
.dk-first { margin-top: var(--space-4); }
.dk-empty { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* the More sheet */
.dk-wrap { flex-wrap: wrap; }
.dk-full { width: 100%; }
.dk-copy { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-2); font-size: var(--text-s); }
.dk-detail .ds-tiles { margin-bottom: var(--space-2); }
.dk-sheet .dk-chart-card { margin-top: var(--space-4); }
.dk-def { margin-top: var(--space-4); }

/* phone: three pages + More, two number columns; desk: every page in the rail, every column */
@media (max-width: 599px) { .ds-table .dk-wide { display: none; } }
@media (max-width: 899px) { .ds-tabbar > .dk-wide-only { display: none; } }
@media (min-width: 900px) {
  .dk-narrow-only { display: none; }
  /* the title starts where the 1080 px content column starts; the bar's background stays full width */
  .dk-topbar { padding-left: max(var(--space-5), calc((100% - var(--content-wide)) / 2 + var(--space-5)));
    padding-right: max(var(--space-2), calc((100% - var(--content-wide)) / 2 + var(--space-2))); }
  .dk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--space-5); align-items: end; }
  .dk-top > .dk-kpi { margin-bottom: 0; }
  /* WHEN on one row, WHICH fields side by side under it; a page with a single filter keeps it on the WHEN row */
  .dk-when, .dk-which { flex-wrap: nowrap; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) > .dk-when { flex: 2 1 520px; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) > .dk-which { flex: 1 1 260px; }
  .dk-dates { flex: 1 1 100%; }
}
.dk-skel { height: 240px; border-radius: var(--radius-m); }