/* THE AUTOMATIC DASHBOARD DEMO (/demo/dashboard): THE SPREADSHEET APP ON THE LAPTOP AND THE DASHBOARD THE MODEL DESIGNED ON THE MONITOR.
   THE STAGES, DEVICES, SCREEN BARS AND CLOSING SECTIONS ARE demo-shell.css; THIS FILE ONLY DRAWS WHAT RUNS ON THE TWO SCREENS. */


/* THE CHART PALETTE — CATEGORICAL SLOTS IN A FIXED ORDER, VALIDATED FOR COLOR-VISION DEFICIENCY ON THE WHITE CARD (DATAVIZ VALIDATOR:
   ADJACENT CVD ΔE ≥ 9.1, NORMAL-VISION ΔE ≥ 19.6). SLOTS 1 AND 2 ARE THE BRAND'S BLUE AND ORANGE; THE OTHERS EXIST ONLY FOR THE CHARTS.
   "OUTROS" IS ALWAYS THE NEUTRAL GRAY. EVERY MARK IN THE PALETTE CARRIES A LEGEND OR A VISIBLE LABEL, NEVER COLOR ALONE */

.dd-page {
    --dd-slot-1: var(--color-palette-primary);
    --dd-slot-2: var(--color-palette-accent);
    --dd-slot-3: #1baf7a;
    --dd-slot-4: #eda100;
    --dd-slot-5: #e87ba4;
    --dd-slot-other: color-mix(in srgb, var(--color-muted) 45%, var(--color-surface));
    --dd-grid-line: color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
    --dd-cell-height: var(--space-medium);
}

.dd-page .dd-slot-1 { --dd-color: var(--dd-slot-1); }

.dd-page .dd-slot-2 { --dd-color: var(--dd-slot-2); }

.dd-page .dd-slot-3 { --dd-color: var(--dd-slot-3); }

.dd-page .dd-slot-4 { --dd-color: var(--dd-slot-4); }

.dd-page .dd-slot-5 { --dd-color: var(--dd-slot-5); }

.dd-page .dd-slot-other { --dd-color: var(--dd-slot-other); }

.dd-page .dd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* THE INTRO'S TWO WAYS IN: SEND A FILE, OR DROP IT ANYWHERE */

.dd-page .demo-stage .demo-intro .dd-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small) var(--space-medium);
}

.dd-page .demo-stage .demo-intro .dd-intro__actions .dd-upload {
    cursor: pointer;
}

.dd-page .demo-stage .demo-intro .dd-intro__actions .dd-upload:focus-within {
    outline: 2px solid var(--color-palette-accent);
    outline-offset: 3px;
}

.dd-page .demo-stage .demo-intro .dd-intro__actions .dd-upload .dd-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dd-page .demo-stage .demo-intro .dd-intro__actions .dd-intro__hint {
    color: var(--color-muted);
    font-size: var(--type-size-small);
}


/* THE DASHBOARD'S ROOM, AND A MONITOR AS WIDE AS THE COLUMN: A DASHBOARD READS BEST LARGE, AND ITS SCREEN SCROLLS */

.dd-page main > section.demo-stage.dd-stage--painel {
    --demo-stage-photo: url("/img/demo/gestor-monitoramento.webp");
}

.dd-page .demo-stage.dd-stage--painel .demo-stage__layout {
    --demo-device-width: min(100%, calc((100dvh - var(--space-large) * 3) * var(--demo-screen-ratio)));
}


/* THE DROP LAYER — OVER THE WHOLE WINDOW WHILE A FILE IS DRAGGED OVER THE PAGE */

.dd-page .dd-drop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-large);
    background: color-mix(in srgb, var(--color-palette-primary) 18%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.dd-page .dd-drop[hidden] {
    display: none;
}

.dd-page .dd-drop .dd-drop__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-small);
    width: min(100%, calc(var(--space-large) * 12));
    padding: var(--space-large);
    border: 2px dashed var(--color-palette-primary);
    border-radius: var(--space-medium);
    background: var(--color-surface);
    text-align: center;
}

.dd-page .dd-drop .dd-drop__panel p,
.dd-page .dd-board-app .dd-slot :is(.dd-empty, .dd-progress, .dd-failure) p {
    text-align: center;
    text-align-last: center;
    hyphens: manual;
}

.dd-page .dd-drop .dd-drop__panel .dd-drop__icon {
    display: inline-flex;
    color: var(--color-palette-primary);
}

.dd-page .dd-drop .dd-drop__panel .dd-drop__icon .eicon {
    width: var(--space-large);
    height: var(--space-large);
}

.dd-page .dd-drop .dd-drop__panel .dd-drop__text {
    color: var(--color-text-dark);
    font-size: var(--type-size-heading);
    font-weight: 700;
}

.dd-page .dd-drop .dd-drop__panel .dd-drop__hint {
    color: var(--color-muted);
}


/* THE SPREADSHEET APP — FILLS THE LAPTOP'S SCREEN: TOOLBAR, FORMULA BAR, THE GRID THAT SCROLLS, THE SHEET TABS */

.dd-page .demo-stage .demo-laptop .demo-laptop__screen.dd-sheet-app {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
}

.dd-page .demo-stage .demo-laptop .demo-laptop__screen.dd-sheet-app .dd-sheet-app__body {
    flex: 1;
    min-height: 0;
    height: calc(100% / var(--demo-screen-zoom));
}

.dd-page .dd-sheet {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-surface);
    color: var(--color-text-dark);
    font-size: var(--type-size-small);
}

.dd-page .dd-sheet .dd-sheet__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
    padding: var(--space-tight) var(--space-small);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-palette-background);
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-tight);
    min-width: calc(var(--space-medium) + var(--space-small));
    height: calc(var(--space-medium) + var(--space-small));
    padding: 0 var(--space-tight);
    border: 0;
    border-radius: var(--space-tight);
    background: transparent;
    color: var(--color-text-dark);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-tool:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-palette-primary) 10%, transparent);
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-tool:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 1px;
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-tool:disabled {
    color: color-mix(in srgb, var(--color-muted) 45%, transparent);
    cursor: default;
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-tool .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-sheet__rule {
    width: 1px;
    height: var(--space-medium);
    margin-inline: var(--space-tight);
    background: var(--color-border);
}

.dd-page .dd-sheet .dd-sheet__toolbar .dd-sheet__grow {
    flex: 1;
}

.dd-page .dd-sheet .dd-sheet__formula {
    display: flex;
    align-items: stretch;
    min-height: calc(var(--space-medium) + var(--space-tight));
    border-bottom: 1px solid var(--color-border);
}

.dd-page .dd-sheet .dd-sheet__formula .dd-sheet__ref {
    display: inline-flex;
    align-items: center;
    width: calc(var(--space-large) + var(--space-medium));
    padding-inline: var(--space-small);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dd-page .dd-sheet .dd-sheet__formula .dd-sheet__fx {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-small);
    border-right: 1px solid var(--color-border);
    color: var(--color-muted);
    font-style: italic;
    font-weight: 700;
}

.dd-page .dd-sheet .dd-sheet__formula .dd-sheet__input {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-small);
    border: 0;
    background: transparent;
    color: var(--color-text-dark);
    font: inherit;
}

.dd-page .dd-sheet .dd-sheet__formula .dd-sheet__input:focus {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: -2px;
}

.dd-page .dd-sheet .dd-sheet__error {
    padding: var(--space-tight) var(--space-small);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-weight: 600;
}

.dd-page .dd-sheet .dd-sheet__error[hidden] {
    display: none;
}

/* THE GRID — LETTERS ON TOP AND ROW NUMBERS ON THE LEFT STAY WHILE THE CELLS SCROLL; THE SELECTION LIGHTS ITS LETTERS AND NUMBERS */

.dd-page .dd-sheet .dd-sheet__grid {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    outline: none;
    scrollbar-width: thin;
    user-select: none;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    cursor: cell;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid :is(th, td) {
    height: var(--dd-cell-height);
    max-width: calc(var(--space-large) * 4);
    padding: 0 var(--space-tight);
    border-right: 1px solid var(--dd-grid-line);
    border-bottom: 1px solid var(--dd-grid-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 400;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td {
    min-width: calc(var(--space-large) * 2);
    background: var(--color-surface);
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td.is-number {
    text-align: right;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-palette-background);
    color: var(--color-muted);
    text-align: center;
    font-weight: 600;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: calc(var(--space-large) - var(--space-tight));
    background: var(--color-palette-background);
    color: var(--color-muted);
    text-align: center;
    font-weight: 600;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid thead th.dd-grid__corner {
    left: 0;
    z-index: 3;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid tbody tr.dd-grid__titles td {
    font-weight: 700;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid :is(thead th, tbody th).is-lit {
    background: color-mix(in srgb, var(--color-palette-primary) 16%, var(--color-palette-background));
    color: var(--color-text-dark);
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td.is-selected {
    background: color-mix(in srgb, var(--color-palette-primary) 10%, var(--color-surface));
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td.is-active {
    box-shadow: inset 0 0 0 2px var(--color-palette-primary);
    background: var(--color-surface);
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td.is-changed {
    background-image: linear-gradient(225deg, var(--color-palette-accent) var(--space-tight), transparent var(--space-tight));
}

/* THE EDITOR OPENS INSIDE THE CELL BEING EDITED, OVER ITS TEXT, AND MAY GROW PAST ITS RIGHT EDGE */

.dd-page .dd-sheet .dd-sheet__grid .dd-grid td.is-editing {
    position: relative;
    overflow: visible;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid__editor {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 4;
    box-sizing: border-box;
    min-width: calc(100% + 2px);
    width: calc(var(--space-large) * 3);
    height: calc(100% + 2px);
    padding: 0 var(--space-tight);
    border: 2px solid var(--color-palette-primary);
    background: var(--color-surface);
    color: var(--color-text-dark);
    font: inherit;
    box-shadow: 0 var(--space-tight) var(--space-small) color-mix(in srgb, var(--color-text-dark) 18%, transparent);
    outline: none;
}

.dd-page .dd-sheet .dd-sheet__grid .dd-grid__editor[hidden] {
    display: none;
}

.dd-page .dd-sheet .dd-sheet__foot {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-small);
    min-height: calc(var(--space-medium) + var(--space-small));
    padding-inline: var(--space-small);
    border-top: 1px solid var(--color-border);
    background: var(--color-palette-background);
}

.dd-page .dd-sheet .dd-sheet__foot .dd-sheet__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    padding-inline: var(--space-small);
    border-bottom: 2px solid var(--color-palette-primary);
    background: var(--color-surface);
    color: var(--color-palette-primary);
    font-weight: 700;
}

.dd-page .dd-sheet .dd-sheet__foot .dd-sheet__stat {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* THE DASHBOARD APP — THE MONITOR'S SCREEN: ITS BAR WITH THE FULL-SCREEN CONTROL AND THE SLOT THE PANELS ARE SWAPPED INTO */

.dd-page .demo-stage .demo-monitor .demo-monitor__screen.dd-board-app {
    background: var(--color-palette-background);
}

.dd-page .dd-board-app:fullscreen {
    aspect-ratio: auto;
    border-radius: 0;
    overflow-y: auto;
}

.dd-page .dd-board-app .dd-board-app__bar .dd-board-app__full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-medium) + var(--space-small));
    height: calc(var(--space-medium) + var(--space-small));
    border: 0;
    border-radius: var(--space-tight);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.dd-page .dd-board-app .dd-board-app__bar .dd-board-app__full:hover {
    background: color-mix(in srgb, var(--color-palette-primary) 10%, transparent);
    color: var(--color-palette-primary);
}

.dd-page .dd-board-app .dd-board-app__bar .dd-board-app__full .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}

.dd-page .dd-board-app .dd-slot {
    padding: var(--space-medium);
    transition: opacity var(--motion-quick) var(--ease-state);
}

.dd-page .dd-board-app .dd-slot.is-busy > .dd-board {
    opacity: 0.4;
}

/* EMPTY, WORKING AND FAILED STATES OF THE SLOT */

.dd-page .dd-board-app .dd-slot :is(.dd-empty, .dd-progress, .dd-failure) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-small);
    min-height: calc(var(--space-large) * 8);
    text-align: center;
}

.dd-page .dd-board-app .dd-slot .dd-empty .dd-empty__icon,
.dd-page .dd-board-app .dd-slot .dd-failure .dd-failure__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-large) + var(--space-medium));
    height: calc(var(--space-large) + var(--space-medium));
    border-radius: var(--radius-pill);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.dd-page .dd-board-app .dd-slot .dd-failure .dd-failure__icon {
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.dd-page .dd-board-app .dd-slot :is(.dd-empty__icon, .dd-failure__icon) .eicon {
    width: var(--space-medium);
    height: var(--space-medium);
}

.dd-page .dd-board-app .dd-slot .dd-empty .dd-empty__title {
    color: var(--color-text-dark);
    font-size: var(--type-size-heading);
    font-weight: 700;
}

.dd-page .dd-board-app .dd-slot :is(.dd-empty__text, .dd-progress__text) {
    color: var(--color-muted);
}

.dd-page .dd-board-app .dd-slot .dd-failure .dd-failure__text {
    max-width: calc(var(--space-large) * 12);
    color: var(--color-danger);
    font-weight: 600;
}

/* A FAILURE WHILE A DASHBOARD IS ON SCREEN: A LINE ABOVE IT, THE DASHBOARD STAYS */

.dd-page .dd-board-app .dd-slot .dd-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small);
    margin-bottom: var(--space-medium);
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--radius-standard);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-weight: 600;
}

.dd-page .dd-board-app .dd-slot .dd-notice .dd-notice__icon {
    display: inline-flex;
}

.dd-page .dd-board-app .dd-slot .dd-notice .dd-notice__icon .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}

.dd-page .dd-board-app .dd-slot .dd-notice .dd-notice__text {
    flex: 1;
    min-width: 0;
}


/* WHAT THE SERVER READ, WHILE THE MODEL DESIGNS */

.dd-page .dd-board-app .dd-slot .dd-reading {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    min-height: calc(var(--space-large) * 8);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-small);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__head .dd-reading__file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
    color: var(--color-text-dark);
    font-size: var(--type-size-heading);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__head .dd-reading__file .eicon {
    width: var(--space-medium);
    height: var(--space-medium);
    color: var(--color-success);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__head .dd-reading__facts,
.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--color-muted);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-large) * 4), 1fr));
    gap: var(--space-small);
    padding: 0;
    list-style: none;
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-small);
    padding: var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column .dd-reading__kind {
    display: inline-flex;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-medium) + var(--space-small));
    height: calc(var(--space-medium) + var(--space-small));
    border-radius: var(--space-tight);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column--date .dd-reading__kind {
    background: color-mix(in srgb, var(--dd-slot-3) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--dd-slot-3) 70%, var(--color-text-dark));
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column--category .dd-reading__kind {
    background: color-mix(in srgb, var(--color-palette-accent) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-palette-accent) 70%, var(--color-text-dark));
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column--text .dd-reading__kind {
    background: var(--color-palette-background);
    color: var(--color-muted);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column .dd-reading__name {
    overflow: hidden;
    color: var(--color-text-dark);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__columns .dd-reading__column .dd-reading__type {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__wait {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding: var(--space-medium);
    border-radius: var(--radius-standard);
    background: var(--color-palette-primary-surface);
    color: var(--color-text-dark);
}

.dd-page .dd-board-app .dd-slot .dd-reading .dd-reading__wait .dd-reading__elapsed {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}


/* THE DASHBOARD — HEADER, HEADLINE NUMBERS, SENTENCES, THEN THE CHARTS ON TWELVE COLUMNS */

.dd-page .dd-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    color: var(--color-text-dark);
}

.dd-page .dd-board .dd-board__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-small) var(--space-large);
}

.dd-page .dd-board .dd-board__head .dd-board__titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    max-width: calc(var(--space-large) * 16);
}

.dd-page .dd-board .dd-board__head .dd-board__titles .dd-board__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--color-palette-primary);
    font-size: var(--type-size-small);
    font-weight: 700;
}

.dd-page .dd-board .dd-board__head .dd-board__titles .dd-board__title {
    color: var(--color-text-dark);
    font-size: var(--type-size-page);
    font-weight: 700;
    line-height: 1.15;
}

.dd-page .dd-board .dd-board__head .dd-board__titles .dd-board__summary {
    color: var(--color-muted);
}

.dd-page .dd-board .dd-board__head .dd-board__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    padding: 0;
    list-style: none;
}

.dd-page .dd-board .dd-board__head .dd-board__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    padding: var(--space-tight) var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    font-weight: 600;
}

.dd-page .dd-board .dd-board__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--color-muted);
}

/* HEADLINE NUMBERS — THE FIRST ONE IS THE HERO: WIDER, IN THE BRAND'S BLUE, WITH ITS NUMBER IN FULL */

/* FIVE NUMBERS: THE HERO TALL ON THE LEFT, THE OTHER FOUR TWO BY TWO; FEWER: ONE ROW */

.dd-page .dd-board .dd-kpis {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
    gap: var(--space-medium);
}

.dd-page .dd-board .dd-kpis.dd-kpis--1 { grid-template-columns: minmax(0, 1fr); }

.dd-page .dd-board .dd-kpis.dd-kpis--2 { grid-template-columns: 1.3fr minmax(0, 1fr); }

.dd-page .dd-board .dd-kpis.dd-kpis--3 { grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); }

.dd-page .dd-board .dd-kpis.dd-kpis--5 { grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); }

.dd-page .dd-board .dd-kpis.dd-kpis--5 .dd-kpi.dd-kpi--hero {
    grid-row: span 2;
}

.dd-page .dd-board .dd-kpis .dd-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    min-width: 0;
    padding: var(--space-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    box-shadow: 0 var(--space-small) var(--space-medium) color-mix(in srgb, var(--color-text-dark) 6%, transparent);
    overflow: hidden;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__top {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-width: 0;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__top .dd-kpi__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-medium) + var(--space-tight));
    height: calc(var(--space-medium) + var(--space-tight));
    border-radius: var(--space-tight);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__top .dd-kpi__icon .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__top .dd-kpi__label {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--type-size-small);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__value {
    color: var(--color-text-dark);
    font-size: var(--type-size-page);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__delta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__delta .dd-kpi__change {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-tight) / 2);
    padding: 2px var(--space-tight);
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__delta.is-good .dd-kpi__change {
    background: var(--color-success-surface);
    color: color-mix(in srgb, var(--color-success) 70%, var(--color-text-dark));
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__delta.is-bad .dd-kpi__change {
    background: var(--color-danger-surface);
    color: color-mix(in srgb, var(--color-danger) 80%, var(--color-text-dark));
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__delta .dd-kpi__against {
    color: var(--color-muted);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__spark {
    position: relative;
    height: calc(var(--space-large) - var(--space-small));
    margin-top: auto;
    padding-top: var(--space-tight);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__spark .dd-kpi__spark-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__spark .dd-kpi__spark-area {
    fill: color-mix(in srgb, var(--color-palette-primary) 12%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__spark .dd-kpi__spark-line {
    fill: none;
    stroke: color-mix(in srgb, var(--color-palette-primary) 55%, var(--color-surface));
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dd-page .dd-board .dd-kpis .dd-kpi .dd-kpi__spark .dd-kpi__spark-dot {
    position: absolute;
    width: var(--space-small);
    height: var(--space-small);
    margin: calc(var(--space-tight) * -1) 0 0 calc(var(--space-tight) * -1);
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-palette-primary);
    box-sizing: border-box;
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero {
    border-color: transparent;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-palette-secondary) 55%, transparent), transparent 60%),
        linear-gradient(135deg, var(--color-palette-primary), color-mix(in srgb, var(--color-palette-primary) 70%, var(--color-canvas-dark)));
    box-shadow: 0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-palette-primary) 30%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero :is(.dd-kpi__label, .dd-kpi__against) {
    color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__value {
    color: var(--color-surface);
    font-size: var(--type-size-display);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__icon {
    background: color-mix(in srgb, var(--color-surface) 20%, transparent);
    color: var(--color-surface);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__delta .dd-kpi__change {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__spark {
    flex: 1 1 0;
    height: auto;
    min-height: var(--space-large);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__spark .dd-kpi__spark-area {
    fill: color-mix(in srgb, var(--color-surface) 18%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__spark .dd-kpi__spark-line {
    stroke: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

.dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__spark .dd-kpi__spark-dot {
    border-color: var(--color-palette-primary);
    background: var(--color-surface);
}

/* WHAT THE CHARTS SAY, ONE SENTENCE EACH */

.dd-page .dd-board .dd-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-large) * 4), 1fr));
    gap: var(--space-small);
    padding: 0;
    list-style: none;
}

.dd-page .dd-board .dd-insights .dd-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-small);
    padding: var(--space-small) var(--space-medium) var(--space-small) var(--space-small);
    border-radius: var(--radius-standard);
    background: color-mix(in srgb, var(--color-palette-primary) 7%, var(--color-surface));
    color: var(--color-text-dark);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: 1.45;
}

.dd-page .dd-board .dd-insights .dd-insight .dd-insight__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-medium);
    height: var(--space-medium);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-palette-primary);
}

.dd-page .dd-board .dd-insights .dd-insight .dd-insight__icon .eicon {
    width: var(--space-small);
    height: var(--space-small);
}

/* THE CHARTS — TWELVE COLUMNS; EACH CARD SAYS HOW MANY IT TAKES */

.dd-page .dd-board .dd-charts {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-medium);
}

.dd-page .dd-board .dd-charts .dd-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    grid-column: span var(--dd-span, 6);
    min-width: 0;
    margin: 0;
    padding: var(--space-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    box-shadow: 0 var(--space-small) var(--space-medium) color-mix(in srgb, var(--color-text-dark) 6%, transparent);
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__head .dd-card__title {
    color: var(--color-text-dark);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: 1.35;
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__head .dd-card__subtitle {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    line-height: 1.4;
    text-align: left;
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__body {
    flex: 1;
    min-width: 0;
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__note {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__numbers summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--color-palette-primary);
    font-size: var(--type-size-xs);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__numbers summary::-webkit-details-marker {
    display: none;
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__numbers[open] summary {
    margin-bottom: var(--space-small);
}

.dd-page .dd-board .dd-charts .dd-card .dd-card__numbers .eesier-table-wrap,
.dd-page .dd-board .dd-charts .dd-card .dd-card__numbers table {
    font-size: var(--type-size-xs);
}

/* LEGEND KEYS — A SHORT STROKE FOR A LINE, A SMALL SQUARE FOR A FILL; THE TEXT STAYS IN INK */

.dd-page .dd-board .dd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight) var(--space-medium);
    padding: 0;
    color: var(--color-text-dark);
    font-size: var(--type-size-xs);
    font-weight: 600;
    list-style: none;
}

.dd-page .dd-board .dd-legend .dd-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}

.dd-page .dd-board .dd-key {
    display: inline-block;
    flex-shrink: 0;
    background: var(--dd-color);
}

.dd-page .dd-board .dd-key.dd-key--line {
    width: var(--space-small);
    height: 3px;
    border-radius: var(--radius-pill);
}

.dd-page .dd-board .dd-key.dd-key--box {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* TREND — GRIDLINES WITH THEIR VALUE ABOVE, THE AREA OR THE LINES, THE LAST POINT LABELED, A RULE AND A CARD FOLLOWING THE POINTER */

.dd-page .dd-board .dd-trend {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}

.dd-page .dd-board .dd-trend .dd-plot {
    position: relative;
    height: calc(var(--space-large) * 6);
    margin: var(--space-small) calc(var(--space-large) + var(--space-small)) 0 calc(var(--space-large) + var(--space-small));
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__tick {
    position: absolute;
    right: 0;
    left: 0;
    height: 0;
    border-top: 1px solid var(--dd-grid-line);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__tick:first-child {
    border-top-color: var(--color-border);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__tick span {
    position: absolute;
    right: calc(100% + var(--space-small));
    white-space: nowrap;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    font-variant-numeric: tabular-nums;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__svg .dd-plot__area {
    fill: color-mix(in srgb, var(--dd-color) 14%, transparent);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__svg .dd-plot__line {
    fill: none;
    stroke: var(--dd-color);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__dot {
    position: absolute;
    z-index: 1;
    width: var(--space-small);
    height: var(--space-small);
    margin: calc(var(--space-tight) * -1) 0 0 calc(var(--space-tight) * -1);
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--dd-color);
    box-sizing: border-box;
    pointer-events: none;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__end {
    position: absolute;
    left: calc(100% + var(--space-small));
    color: var(--color-text-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    white-space: nowrap;
    transform: translateY(-50%);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    outline: none;
    cursor: crosshair;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-hit__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: color-mix(in srgb, var(--color-text-dark) 35%, transparent);
    opacity: 0;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-tip {
    position: absolute;
    top: 0;
    left: calc(50% + var(--space-small));
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: calc(var(--space-large) * 2);
    padding: var(--space-tight) var(--space-small);
    border-radius: var(--space-tight);
    background: var(--color-canvas-dark);
    color: var(--color-surface);
    font-size: var(--type-size-xs);
    white-space: nowrap;
    box-shadow: 0 var(--space-tight) var(--space-medium) color-mix(in srgb, var(--color-canvas-dark) 30%, transparent);
    opacity: 0;
    pointer-events: none;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit.dd-hit--left .dd-tip {
    right: calc(50% + var(--space-small));
    left: auto;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-tip .dd-tip__title {
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
    font-weight: 600;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-tip .dd-tip__row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-tip .dd-tip__row strong {
    font-weight: 700;
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit .dd-tip .dd-tip__row span:last-child:not(.dd-key) {
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

.dd-page .dd-board .dd-trend .dd-plot .dd-plot__hits .dd-hit:is(:hover, :focus-visible) :is(.dd-hit__rule, .dd-tip) {
    opacity: 1;
}

.dd-page .dd-board .dd-trend .dd-axis {
    position: relative;
    height: var(--space-medium);
    margin-inline: calc(var(--space-large) + var(--space-small));
}

.dd-page .dd-board .dd-trend .dd-axis .dd-axis__label {
    position: absolute;
    top: var(--space-tight);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    white-space: nowrap;
    transform: translateX(-50%);
}

/* RANKING — THIN BARS FROM ONE BASELINE, THE VALUE AT THE TIP, THE LEADER IN THE ACCENT HUE AND THE REST IN THE FIRST SLOT */

.dd-page .dd-board .dd-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    padding: 0;
    list-style: none;
}

.dd-page .dd-board .dd-ranking .dd-ranking__row {
    display: grid;
    grid-template-columns: minmax(0, 32%) 1fr auto;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-ranking .dd-ranking__row .dd-ranking__label {
    overflow: hidden;
    color: var(--color-text-dark);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board .dd-ranking .dd-ranking__row .dd-ranking__track {
    display: block;
    height: var(--space-small);
}

.dd-page .dd-board .dd-ranking .dd-ranking__row .dd-ranking__track .dd-ranking__bar {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: color-mix(in srgb, var(--dd-slot-1) 70%, var(--color-surface));
    transition: background var(--motion-quick) var(--ease-state);
}

.dd-page .dd-board .dd-ranking .dd-ranking__row.is-first .dd-ranking__track .dd-ranking__bar {
    background: var(--dd-slot-1);
}

.dd-page .dd-board .dd-ranking .dd-ranking__row:hover .dd-ranking__track .dd-ranking__bar {
    background: var(--dd-slot-2);
}

.dd-page .dd-board .dd-ranking .dd-ranking__row .dd-ranking__value {
    min-width: calc(var(--space-large) + var(--space-small));
    color: var(--color-text-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* DONUT — THE RING WITH A GAP BETWEEN SLICES, THE TOTAL IN THE MIDDLE, THE LEGEND WITH EACH SHARE; A LEGEND ROW LIGHTS ITS SLICE */

.dd-page .dd-board .dd-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-medium);
}

.dd-page .dd-board .dd-donut .dd-donut__ring {
    position: relative;
    width: min(100%, calc(var(--space-large) * 5));
    aspect-ratio: 1;
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__svg circle {
    fill: none;
    stroke-width: 5.5;
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__svg .dd-donut__track {
    stroke: var(--color-palette-background);
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__svg .dd-donut__slice {
    stroke: var(--dd-color);
    transition: stroke-width var(--motion-quick) var(--ease-state), opacity var(--motion-quick) var(--ease-state);
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__center strong {
    max-width: 62%;
    color: var(--color-text-dark);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: 1.1;
}

.dd-page .dd-board .dd-donut .dd-donut__ring .dd-donut__center span {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-donut .dd-donut__legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    width: 100%;
    padding: 0;
    list-style: none;
}

.dd-page .dd-board .dd-donut .dd-donut__legend .dd-donut__item {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding: 2px var(--space-tight);
    border-radius: var(--space-tight);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-donut .dd-donut__legend .dd-donut__item:hover {
    background: var(--color-palette-background);
}

.dd-page .dd-board .dd-donut .dd-donut__legend .dd-donut__item .dd-donut__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-dark);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board .dd-donut .dd-donut__legend .dd-donut__item .dd-donut__share {
    color: var(--color-text-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dd-page .dd-board .dd-donut:has(.dd-donut__item:hover) .dd-donut__slice {
    opacity: 0.35;
}

.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="0"]:hover) .dd-donut__slice[data-dd-slice="0"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="1"]:hover) .dd-donut__slice[data-dd-slice="1"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="2"]:hover) .dd-donut__slice[data-dd-slice="2"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="3"]:hover) .dd-donut__slice[data-dd-slice="3"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="4"]:hover) .dd-donut__slice[data-dd-slice="4"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="5"]:hover) .dd-donut__slice[data-dd-slice="5"],
.dd-page .dd-board .dd-donut:has(.dd-donut__item[data-dd-slice="6"]:hover) .dd-donut__slice[data-dd-slice="6"] {
    opacity: 1;
    stroke-width: 7;
}

/* STACKED — 100% BARS, A 2PX SURFACE GAP BETWEEN PARTS, THE SHARE INSIDE A PART ONLY WHEN IT FITS */

.dd-page .dd-board .dd-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}

.dd-page .dd-board .dd-stacked .dd-stacked__row {
    display: grid;
    grid-template-columns: minmax(0, 26%) 1fr auto;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__label {
    overflow: hidden;
    color: var(--color-text-dark);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar {
    display: flex;
    gap: 2px;
    height: var(--space-medium);
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part {
    display: flex;
    flex-basis: 0;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    background: var(--dd-color);
    color: var(--color-surface);
    font-weight: 700;
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part:first-child {
    border-radius: 4px 0 0 4px;
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part:last-child {
    border-radius: 0 4px 4px 0;
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part:only-child {
    border-radius: 4px;
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part:is(.dd-slot-3, .dd-slot-4, .dd-slot-5, .dd-slot-other) {
    color: var(--color-text-dark);
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part:hover {
    filter: brightness(1.08);
}

.dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__total {
    min-width: calc(var(--space-large) + var(--space-small));
    color: var(--color-text-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* HEATMAP — ONE HUE, FAINT TO FULL; INK FLIPS TO WHITE ON THE STRONG CELLS */

.dd-page .dd-board .dd-heat {
    display: grid;
    grid-template-columns: minmax(calc(var(--space-large) * 2), auto) repeat(var(--dd-columns), minmax(0, 1fr));
    gap: 2px;
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-heat :is(.dd-heat__head, .dd-heat__label) {
    overflow: hidden;
    color: var(--color-muted);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-page .dd-board .dd-heat .dd-heat__head {
    padding-bottom: var(--space-tight);
    text-align: center;
}

.dd-page .dd-board .dd-heat .dd-heat__label {
    align-self: center;
    padding-right: var(--space-small);
    color: var(--color-text-dark);
}

.dd-page .dd-board .dd-heat .dd-heat__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space-medium) + var(--space-small));
    border-radius: 4px;
    background: color-mix(in srgb, var(--dd-slot-1) var(--dd-heat), var(--color-surface));
    color: var(--color-text-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dd-page .dd-board .dd-heat .dd-heat__cell.is-strong {
    color: var(--color-surface);
}

.dd-page .dd-board .dd-heat .dd-heat__cell:hover {
    box-shadow: inset 0 0 0 2px var(--color-text-dark);
}

.dd-page .dd-board .dd-heat__scale {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-tight);
    margin-top: var(--space-small);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

.dd-page .dd-board .dd-heat__scale .dd-heat__ramp {
    width: calc(var(--space-large) * 2);
    height: var(--space-tight);
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, color-mix(in srgb, var(--dd-slot-1) 12%, var(--color-surface)), var(--dd-slot-1));
}

/* COLUMNS — THIN COLUMNS FROM ONE BASELINE, THE VALUE ON EACH CAP, THE NAME UNDER IT */

.dd-page .dd-board .dd-columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}

.dd-page .dd-board .dd-columns .dd-columns__plot {
    display: grid;
    grid-template-columns: repeat(var(--dd-count), minmax(0, 1fr));
    align-items: end;
    gap: var(--space-small);
    height: calc(var(--space-large) * 4);
    border-bottom: 1px solid var(--color-border);
}

.dd-page .dd-board .dd-columns .dd-columns__plot .dd-columns__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-tight);
    height: 100%;
}

.dd-page .dd-board .dd-columns .dd-columns__plot .dd-columns__item .dd-columns__value {
    color: var(--color-text-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.dd-page .dd-board .dd-columns .dd-columns__plot .dd-columns__item .dd-columns__bar {
    width: min(100%, var(--space-medium));
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--dd-slot-1);
    transition: background var(--motion-quick) var(--ease-state);
}

.dd-page .dd-board .dd-columns .dd-columns__plot .dd-columns__item:hover .dd-columns__bar {
    background: var(--dd-slot-2);
}

.dd-page .dd-board .dd-columns .dd-columns__labels {
    display: grid;
    grid-template-columns: repeat(var(--dd-count), minmax(0, 1fr));
    gap: var(--space-small);
}

.dd-page .dd-board .dd-columns .dd-columns__labels span {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A NEW DASHBOARD FADES IN IN PLACE; NOTHING TRAVELS */

.dd-page .dd-board-app .dd-slot > :is(.dd-board, .dd-reading) {
    animation: dd-arrive var(--motion-standard) var(--ease-state);
}

@keyframes dd-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* NARROWER SCREENS: FEWER COLUMNS FOR THE HEADLINE NUMBERS AND THE CHARTS */

@media (max-width: 1200px) {

    .dd-page .dd-board .dd-kpis,
    .dd-page .dd-board .dd-kpis:is(.dd-kpis--3, .dd-kpis--4, .dd-kpis--5) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero,
    .dd-page .dd-board .dd-kpis.dd-kpis--5 .dd-kpi.dd-kpi--hero {
        grid-row: auto;
        grid-column: 1 / -1;
    }

}

@media (max-width: 900px) {

    .dd-page .demo-stage .demo-laptop .demo-laptop__screen.dd-sheet-app {
        height: 70dvh;
    }

    .dd-page .demo-stage .demo-laptop .demo-laptop__screen.dd-sheet-app .dd-sheet-app__body {
        height: auto;
    }

    .dd-page .dd-board-app .dd-slot {
        padding: var(--space-small);
    }

    .dd-page .dd-board .dd-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    .dd-page .dd-board .dd-charts .dd-card {
        grid-column: 1 / -1;
    }

    .dd-page .dd-board .dd-kpis .dd-kpi.dd-kpi--hero .dd-kpi__value {
        font-size: var(--type-size-page);
    }

    .dd-page .dd-sheet .dd-sheet__toolbar .dd-tool.dd-tool--text .dd-tool__verb {
        display: none;
    }

}

@media (max-width: 600px) {

    .dd-page .dd-board .dd-kpis,
    .dd-page .dd-board .dd-kpis:is(.dd-kpis--2, .dd-kpis--3, .dd-kpis--4, .dd-kpis--5) {
        grid-template-columns: minmax(0, 1fr);
    }

    .dd-page .dd-board .dd-heat .dd-heat__cell {
        color: transparent;
    }

    .dd-page .dd-board .dd-heat .dd-heat__cell.is-strong {
        color: transparent;
    }

    .dd-page .dd-board .dd-stacked .dd-stacked__row .dd-stacked__bar .dd-stacked__part span {
        display: none;
    }

    .dd-page .dd-board :is(.dd-ranking .dd-ranking__row, .dd-stacked .dd-stacked__row) {
        grid-template-columns: minmax(0, 38%) 1fr auto;
    }

    .dd-page .dd-board .dd-trend .dd-plot {
        margin-right: var(--space-large);
    }

    .dd-page .dd-board .dd-trend .dd-axis {
        margin-right: var(--space-large);
    }

}

@media (prefers-reduced-motion: reduce) {

    .dd-page .dd-board-app .dd-slot > :is(.dd-board, .dd-reading) {
        animation: none;
    }

    .dd-page .dd-board :is(.dd-ranking__bar, .dd-donut__slice, .dd-columns__bar) {
        transition: none;
    }

}