/* DOK-462 — the Painel, rebuilt as an operational cockpit.

   Global on purpose, like dok-cadastro.css and dok-listing.css: the dashboard is now nine
   components that share one visual language, and scoped CSS would force every shared rule to be
   duplicated per component (and would silently drop the few rules that reach MudBlazor internals).

   Everything here consumes the --dok-* tokens from the framework's dok-theme.css and the
   --mud-palette-* variables, so the page re-tints with the tenant palette and follows dark mode.
   No hex literals. */

/* ===== Tone scale =====
   One semantic channel, five values, used by every card in the page. Colour never travels alone:
   each tone is always paired with an icon and a label, per the accessibility rule. */
.dok-dash {
    --dok-dash-tone-neutral: var(--mud-palette-text-secondary);
    --dok-dash-tone-neutral-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
    --dok-dash-tone-info: var(--mud-palette-primary);
    --dok-dash-tone-info-rgb: var(--mud-palette-primary-rgb);
    --dok-dash-tone-warning: var(--mud-palette-warning);
    --dok-dash-tone-warning-rgb: var(--mud-palette-warning-rgb);
    --dok-dash-tone-critical: var(--mud-palette-error);
    --dok-dash-tone-critical-rgb: var(--mud-palette-error-rgb);
    --dok-dash-tone-positive: var(--mud-palette-success);
    --dok-dash-tone-positive-rgb: var(--mud-palette-success-rgb);

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--dok-space-md);
    align-items: start;
    /* The page never scrolls sideways; wide children scroll inside their own card. */
    max-width: 100%;
}

/* Row spans. Every child declares one; the media queries below collapse them. */
.dok-dash__span-12 { grid-column: span 12; min-width: 0; }
.dok-dash__span-8 { grid-column: span 8; min-width: 0; }
.dok-dash__span-4 { grid-column: span 4; min-width: 0; }
.dok-dash__span-3 { grid-column: span 3; min-width: 0; }

/* The right-hand column is a stack of independent cards. `align-content: start` is the whole
   point: without it the column stretches to the height of the priority table and the DOKPilot
   card grows a large empty belly, which is defect 5 in the issue. */
.dok-dash__stack {
    display: grid;
    align-content: start;
    gap: var(--dok-space-md);
}

/* ===== Shared card surface ===== */
.dok-dash-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--dok-space-md);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dok-shadow-sm);
}

.dok-dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-sm);
    margin-bottom: var(--dok-space-sm);
}

.dok-dash-card__heading {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    min-width: 0;
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-bold);
}

.dok-dash-card__subtitle {
    margin-top: var(--dok-space-2xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
    line-height: var(--dok-line-height-normal);
}

.dok-dash-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--dok-space-sm);
}

/* ===== 1. Header ===== */
.dok-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-md);
    padding: var(--dok-space-lg);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--dok-shadow-sm);
}

.dok-dash-header__copy { min-width: 0; }

.dok-dash-header__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    /* 26px — inside the 24-28px the issue asks for. */
    font-size: 1.625rem;
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--dok-line-height-tight);
}

.dok-dash-header__summary {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-2xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
}

.dok-dash-header__summary--critical { color: var(--mud-palette-error); }
.dok-dash-header__summary--positive { color: var(--mud-palette-success); }

.dok-dash-header__actions {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    flex-wrap: wrap;
}

/* DOK-678 — this class now sizes DokDateRangePicker's wrapper, not the MudBlazor picker itself.
   The width is set through the component's own custom property rather than another `flex` rule:
   that is the whole point of the shared control, since a flex-basis that reaches MudBlazor's
   div.mud-input is applied as a HEIGHT. The header picker keeps the 18rem it has always had.
   The adornment fix that used to live here moved into the shared component's rules in
   dok-theme.css, where every date range in the app gets it. */
/* The 18rem override that used to sit here is gone. It clipped the year off both ends —
   "23/07/202…" — because a pt-PT range renders dd/MM/yyyy TWICE plus an arrow plus the 24px
   calendar adornment, and 18rem does not hold it. The shared rule in dok-theme.css already warns
   that MudBlazor "clips the dates mid-year at narrow widths"; narrowing the control below the
   width that warning is about walked straight into it.

   The dashboard now inherits the shared 22rem instead of arguing with it. What stays is a FLOOR,
   and it is deliberately the full width rather than the shared 16rem minimum: the shared rule is
   `flex: 0 1 <width>`, so the control may still shrink when the header row is tight, and shrinking
   to 16rem clips harder than the 18rem that caused this report. The two media queries below
   override this floor back to 0 and then to a full row, which is where shrinking IS wanted. */
.dok-dash-header__range {
    min-width: var(--dok-daterange-width);
}

/* ===== 2. Attention cards ===== */
.dok-dash-attention {
    display: flex;
    align-items: flex-start;
    gap: var(--dok-space-sm);
    width: 100%;
    /* 44px touch target is the floor; these are far above it. */
    min-height: 5.5rem;
    padding: var(--dok-space-md);
    border: 1px solid var(--dok-border-subtle);
    border-left: 3px solid var(--dok-dash-attention-accent, var(--mud-palette-text-secondary));
    border-radius: var(--dok-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dok-shadow-sm);
    color: inherit;
    text-align: left;
    text-decoration: none;
}

/* Only the interactive variant looks interactive — an informational card is a <div>, never a
   button, and never grows a hover state. */
a.dok-dash-attention {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

a.dok-dash-attention:hover {
    border-color: rgba(var(--dok-dash-attention-accent-rgb, 148, 163, 184), 0.5);
    box-shadow: var(--dok-shadow-md);
    transform: translateY(-1px);
}

.dok-dash-attention--tone-critical { --dok-dash-attention-accent: var(--dok-dash-tone-critical); --dok-dash-attention-accent-rgb: var(--dok-dash-tone-critical-rgb); }
.dok-dash-attention--tone-warning { --dok-dash-attention-accent: var(--dok-dash-tone-warning); --dok-dash-attention-accent-rgb: var(--dok-dash-tone-warning-rgb); }
.dok-dash-attention--tone-info { --dok-dash-attention-accent: var(--dok-dash-tone-info); --dok-dash-attention-accent-rgb: var(--dok-dash-tone-info-rgb); }
.dok-dash-attention--tone-positive { --dok-dash-attention-accent: var(--dok-dash-tone-positive); --dok-dash-attention-accent-rgb: var(--dok-dash-tone-positive-rgb); }
.dok-dash-attention--tone-neutral { --dok-dash-attention-accent: var(--dok-dash-tone-neutral); --dok-dash-attention-accent-rgb: var(--dok-dash-tone-neutral-rgb); }

/* A zero is good news. It keeps its place in the grid but stops shouting: the accent turns
   neutral-green and the icon becomes a tick, so real problems are the only loud things. */
.dok-dash-attention--clear {
    --dok-dash-attention-accent: var(--dok-dash-tone-positive);
    --dok-dash-attention-accent-rgb: var(--dok-dash-tone-positive-rgb);
}

.dok-dash-attention__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dok-radius-sm);
    background: rgba(var(--dok-dash-attention-accent-rgb, 148, 163, 184), 0.12);
    color: var(--dok-dash-attention-accent);
}

/* Flex column, not the default inline flow: these are <span>s inside an <a>, so without this the
   value, the label and the description run together on one line. */
.dok-dash-attention__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-dash-attention__value {
    color: var(--mud-palette-text-primary);
    /* 30px — inside the 28-36px KPI range. */
    font-size: 1.875rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
}

.dok-dash-attention--clear .dok-dash-attention__value { color: var(--mud-palette-text-secondary); }

.dok-dash-attention__label {
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-dash-attention__description {
    margin-top: var(--dok-space-2xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-regular);
    line-height: var(--dok-line-height-normal);
}

/* ===== 3. Priority queue ===== */
.dok-dash-queue { padding: 0; }

.dok-dash-queue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-sm);
    padding: var(--dok-space-md);
}

/* The one place allowed to scroll sideways, and it scrolls inside its own card so the page
   itself never does. */
.dok-dash-queue__scroll {
    overflow-x: auto;
    border-top: 1px solid var(--dok-border-subtle);
}

.dok-dash-queue__table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
}

.dok-dash-queue__table th {
    padding: var(--dok-space-xs) var(--dok-space-sm);
    border-bottom: 1px solid var(--dok-border-subtle);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    text-align: left;
    white-space: nowrap;
}

.dok-dash-queue__table td {
    padding: var(--dok-space-sm);
    border-bottom: 1px solid var(--dok-border-subtle);
    font-size: var(--dok-font-size-sm);
    vertical-align: middle;
}

.dok-dash-queue__table tbody tr:last-child td { border-bottom: 0; }

.dok-dash-queue__row {
    cursor: pointer;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.dok-dash-queue__row:hover,
.dok-dash-queue__row:focus-visible {
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
    box-shadow: inset 3px 0 0 var(--dok-dash-row-accent, var(--mud-palette-primary));
    outline: none;
}

.dok-dash-queue__row--tone-critical { --dok-dash-row-accent: var(--dok-dash-tone-critical); }
.dok-dash-queue__row--tone-warning { --dok-dash-row-accent: var(--dok-dash-tone-warning); }
.dok-dash-queue__row--tone-info { --dok-dash-row-accent: var(--dok-dash-tone-info); }
.dok-dash-queue__row--tone-neutral { --dok-dash-row-accent: var(--dok-dash-tone-neutral); }
.dok-dash-queue__row--tone-positive { --dok-dash-row-accent: var(--dok-dash-tone-positive); }

.dok-dash-queue__title {
    color: var(--mud-palette-text-primary);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-dash-queue__reference {
    display: flex;
    gap: var(--dok-space-xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* Pill used for state, priority reason and SLA alike — one shape, tone does the talking. */
.dok-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border-radius: var(--dok-radius-full);
    background: rgba(var(--dok-dash-pill-rgb, 148, 163, 184), 0.12);
    color: var(--dok-dash-pill-color, var(--mud-palette-text-secondary));
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    white-space: nowrap;
}

.dok-dash-pill--tone-critical { --dok-dash-pill-color: var(--dok-dash-tone-critical); --dok-dash-pill-rgb: var(--dok-dash-tone-critical-rgb); }
.dok-dash-pill--tone-warning { --dok-dash-pill-color: var(--dok-dash-tone-warning); --dok-dash-pill-rgb: var(--dok-dash-tone-warning-rgb); }
.dok-dash-pill--tone-info { --dok-dash-pill-color: var(--dok-dash-tone-info); --dok-dash-pill-rgb: var(--dok-dash-tone-info-rgb); }
.dok-dash-pill--tone-positive { --dok-dash-pill-color: var(--dok-dash-tone-positive); --dok-dash-pill-rgb: var(--dok-dash-tone-positive-rgb); }
.dok-dash-pill--tone-neutral { --dok-dash-pill-color: var(--dok-dash-tone-neutral); --dok-dash-pill-rgb: var(--dok-dash-tone-neutral-rgb); }

.dok-dash-queue__sla { min-width: 7rem; }

.dok-dash-queue__sla-track {
    height: 4px;
    margin-top: var(--dok-space-2xs);
    border-radius: var(--dok-radius-full);
    background: rgba(148, 163, 184, 0.24);
    overflow: hidden;
}

.dok-dash-queue__sla-track > i {
    display: block;
    height: 100%;
    background: var(--dok-dash-pill-color, var(--mud-palette-text-secondary));
}

.dok-dash-queue__next {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* ===== 4. Quick actions ===== */
.dok-dash-actions__list {
    display: grid;
    gap: var(--dok-space-xs);
}

.dok-dash-action {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    min-height: 2.75rem; /* 44px touch target */
    padding: var(--dok-space-xs) var(--dok-space-sm);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.dok-dash-action:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.4);
    background: var(--dok-overlay-subtle);
}

.dok-dash-action--primary {
    border-color: transparent;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dok-dash-action--primary:hover {
    border-color: transparent;
    background: var(--mud-palette-primary-darken);
}

/* ===== 5. Compact DOKPilot =====
   Height comes from its content and nothing else. */
.dok-dash-pilot {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.24);
    background: linear-gradient(135deg, var(--dok-overlay-subtle), transparent);
}

.dok-dash-pilot__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    align-self: flex-start;
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border-radius: var(--dok-radius-full);
    background: var(--dok-overlay-soft);
    color: var(--mud-palette-primary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
}

.dok-dash-pilot__prompt {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    width: 100%;
    min-height: 2.75rem;
    margin-top: var(--dok-space-sm);
    padding: var(--dok-space-xs) var(--dok-space-sm);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-full);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease;
}

.dok-dash-pilot__prompt:hover { border-color: rgba(var(--mud-palette-primary-rgb), 0.5); }

.dok-dash-pilot__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dok-space-2xs);
    margin-top: var(--dok-space-xs);
}

.dok-dash-pilot__chip {
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-full);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.dok-dash-pilot__chip:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.5);
    color: var(--mud-palette-primary);
}

/* ===== 6. Dossier pulse ===== */
.dok-dash-pulse__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dok-space-sm);
    margin-bottom: var(--dok-space-md);
}

.dok-dash-pulse__metric { min-width: 0; }

.dok-dash-pulse__metric-value {
    color: var(--mud-palette-text-primary);
    font-size: 1.75rem; /* 28px */
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
}

.dok-dash-pulse__metric-label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
}

/* The stacked bar that replaces the nine-slice donut. Four operational groups, read left to
   right, no slices to compare by eye. */
.dok-dash-pulse__bar {
    display: flex;
    height: 0.75rem;
    border-radius: var(--dok-radius-full);
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.dok-dash-pulse__band { height: 100%; }
.dok-dash-pulse__band--tone-neutral { background: var(--dok-dash-tone-neutral); }
.dok-dash-pulse__band--tone-info { background: var(--dok-dash-tone-info); }
.dok-dash-pulse__band--tone-warning { background: var(--dok-dash-tone-warning); }
.dok-dash-pulse__band--tone-critical { background: var(--dok-dash-tone-critical); }
.dok-dash-pulse__band--tone-positive { background: var(--dok-dash-tone-positive); }

.dok-dash-pulse__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dok-space-sm);
    margin-top: var(--dok-space-sm);
}

.dok-dash-pulse__legend-item {
    display: flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
}

.dok-dash-pulse__legend-item > i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--dok-radius-full);
    flex: 0 0 auto;
}

.dok-dash-pulse__legend-item--tone-neutral > i { background: var(--dok-dash-tone-neutral); }
.dok-dash-pulse__legend-item--tone-info > i { background: var(--dok-dash-tone-info); }
.dok-dash-pulse__legend-item--tone-warning > i { background: var(--dok-dash-tone-warning); }
.dok-dash-pulse__legend-item--tone-critical > i { background: var(--dok-dash-tone-critical); }
.dok-dash-pulse__legend-item--tone-positive > i { background: var(--dok-dash-tone-positive); }

.dok-dash-pulse__legend-value { color: var(--mud-palette-text-primary); font-weight: var(--dok-font-weight-bold); }

.dok-dash-pulse__trend { margin-top: var(--dok-space-md); }

.dok-dash-pulse__trend-chart {
    display: block;
    width: 100%;
    height: 5rem;
}

.dok-dash-pulse__trend-created { fill: none; stroke: var(--dok-dash-tone-info); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dok-dash-pulse__trend-completed { fill: none; stroke: var(--dok-dash-tone-positive); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ===== 7. Recent business activity ===== */
.dok-dash-activity__list {
    display: grid;
    gap: var(--dok-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-dash-activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--dok-space-xs);
    min-height: 2.75rem;
    padding: var(--dok-space-xs);
    border-radius: var(--dok-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.16s ease;
}

a.dok-dash-activity__item:hover { background: var(--dok-overlay-subtle); }

.dok-dash-activity__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--dok-radius-full);
    background: rgba(var(--dok-dash-pill-rgb, 148, 163, 184), 0.14);
    color: var(--dok-dash-pill-color, var(--mud-palette-text-secondary));
}

.dok-dash-activity__text {
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    line-height: var(--dok-line-height-normal);
}

.dok-dash-activity__when {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* ===== 8. Inbound summary (hidden until DOK-114/122 ship) ===== */
.dok-dash-inbound__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dok-space-sm);
}

.dok-dash-inbound__metric-value {
    color: var(--mud-palette-text-primary);
    font-size: 1.5rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
}

.dok-dash-inbound__metric-label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* ===== Responsive =====
   Tablet folds the 8/4 split into full width and puts the attention cards two-up; mobile stacks
   everything. No breakpoint is allowed to produce a horizontal scrollbar on the page. */
@media (max-width: 1279px) {
    .dok-dash__span-8,
    .dok-dash__span-4 { grid-column: span 12; }
    .dok-dash__span-3 { grid-column: span 6; }
}

/* Once the actions no longer fit beside the title they wrap to their own line. Left as-is they
   sit at their natural width with dead space to the right, which reads as a layout accident —
   so the picker takes the slack and the refresh button lands at the end of the row. */
@media (max-width: 1023px) {
    .dok-dash-header__actions {
        width: 100%;
        flex-wrap: nowrap;
    }

    .dok-dash-header__range {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Below this the two dates no longer fit on one line beside the refresh button and the picker
   clips them mid-year. Dropping the font under 16px would fix the width but makes iOS zoom the
   page on focus, so the picker takes the whole row instead and refresh follows it. */
@media (max-width: 599px) {
    .dok-dash-header__actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .dok-dash-header__range { flex: 1 1 100%; }
}

@media (max-width: 767px) {
    .dok-dash { gap: var(--dok-space-sm); }
    .dok-dash__span-3 { grid-column: span 12; }

    .dok-dash-header { padding: var(--dok-space-md); }

    .dok-dash-pulse__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dok-dash-inbound__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dok-dash-attention { min-height: 0; }
    .dok-dash-attention__value { font-size: 1.625rem; }
}

/* The shell already neutralises transitions under prefers-reduced-motion for .dok-premium-app
   descendants; the lift is the one thing that needs saying again because it is a transform. */
@media (prefers-reduced-motion: reduce) {
    a.dok-dash-attention:hover { transform: none; }
}