/* 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. DOK-1132 — every row of the Painel is full width now, and what used to be an 8/4 split of
   the page grid is a grid of its own inside one row. The three below replace .dok-dash__span-8,
   .dok-dash__span-4, .dok-dash__span-3 and .dok-dash__stack, which no markup writes any more.

   The reason is heights. The page grid is `align-items: start`, so two cells side by side end where
   their own content ends — which is right for independent rows and wrong for every row the owner asked
   to be "the same height". A nested grid that stretches its own children gives each row its own answer
   without changing that rule for the page. */
.dok-dash__span-12 { grid-column: span 12; min-width: 0; }

/* Row 2 — the aids. auto-fit rather than `repeat(3, …)`: when the Centro de Entrada ships,
   InboundSummaryCard stops rendering nothing and takes a fourth column instead of dropping onto a
   second row on its own. */
.dok-dash__aids {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--dok-space-md);
    align-items: stretch;
}

/* Row 3 — the four indicators, then the queue they filter. The queue's table declares
   `min-width: 46rem` and scrolls inside its own card; a grid's implicit column is sized `auto`, which a
   wide child pushes past the container, so BOTH columns are named minmax(0, …). Without it the table
   would widen its column and the PAGE would scroll sideways — the one thing this stylesheet never does. */
.dok-dash__work {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--dok-space-md);
    align-items: stretch;
}

/* Row 5 — two readings of the same period, neither leading the other. */
.dok-dash__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dok-space-md);
    align-items: stretch;
}

/* ===== 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 — no panel (DOK-1132) =====

   It was a bordered card with its own shadow, first in a page of bordered cards with their own shadows,
   so the greeting was one more object to sort before the work. What is left is the type: an eyebrow that
   names the surface, the greeting, the state sentence, and the period on the right. A hairline under the
   row does the separating the border used to do, and costs nothing in weight.

   `align-items: flex-end` sits the date range on the baseline of the block rather than halfway up it,
   which is what makes the row read as one line of type with a control at its end. */
.dok-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dok-space-md);
    padding: 0 var(--dok-space-2xs) var(--dok-space-md);
    border-bottom: 1px solid var(--dok-border-subtle);
}

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

.dok-dash-header__eyebrow {
    margin: 0 0 var(--dok-space-2xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dok-dash-header__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    /* 32px. The 26px it replaces was sized to sit inside a card; with the card gone the greeting is the
       page's own title and takes the weight the panel used to carry. */
    font-size: var(--dok-font-size-2xl);
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: -0.025em;
    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(--dok-tone-success-ink); }

.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);
}

/* DOK-916 — "O meu trabalho / Organização", DOK-462's D6. One pill holding two options, the chosen one
   tinted primary; the same shape as the queue's focus chip, so the header does not gain a third style of
   control. Only the roles entitled to both views ever see it.

   The selected option is keyed on aria-pressed AND on a modifier class. The attribute is what a screen
   reader hears and the class is what the stylesheet scanner can match, and a rule on the attribute alone
   would leave the class undressed in DashboardStylesheetDok1132Tests.

   It is the header's middle child, not one of its actions (see DashboardHeader). `margin-left: auto`
   takes the header's free space, so on a wide screen it sits just left of the date range instead of
   floating halfway across the row, and when the actions wrap below 1024px it stays at the right end of
   the greeting's line. */
.dok-dash-scope {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    padding: var(--dok-space-2xs);
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-full);
    background: var(--mud-palette-surface);
}

.dok-dash-scope__option {
    min-height: 2.25rem;
    padding: 0 var(--dok-space-sm);
    border: 0;
    border-radius: var(--dok-radius-full);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.dok-dash-scope__option:hover { color: var(--mud-palette-text-primary); }

.dok-dash-scope__option--selected,
.dok-dash-scope__option[aria-pressed="true"] {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--dok-tone-primary-ink);
}

.dok-dash-scope__option:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ===== 1b. The four attention cards (DOK-1132) =====

   A column of four filled cards beside the priority queue, each a toggle that narrows it. The column is
   four equal rows of 100% height, so it ends exactly where the queue ends however many rows the queue
   holds — which is what the owner's "a fila tem a mesma altura da soma dos quatro cartões" asks for, and
   the only way to keep it true when the queue's height is data.

   WHY THESE FOUR COLOURS ARE LITERALS AND NOT TONES. The tone scale at the top of this file has one red
   for everything critical, and two of these four are critical — overdue and failures would be the same
   card twice. The owner reads this column by colour, so each indicator gets its own, and settled all
   four on DEV on 2026-09-13: blue for waiting, yellow for the SLA, pink for overdue, red for failures.

   EVERY PAIR CLEARS AA FOR ITS OWN INK — measured, not eyeballed, at BOTH stops of every gradient:
   #2563EB 5.2:1, #DE1F77 4.6:1 and #B81765 6.3:1, #DC2626 4.8:1 against white; and the yellow
   #FDE68A/#FBD34D 6.3:1 against the brown ink it carries instead of white. Nothing here is painted with
   opacity: a white at 88% over a saturated fill is a different colour from white and undoes the
   measurement.

   THE YELLOW CARD IS THE ONE WITH DARK INK, and that is not an inconsistency to be tidied away. White on
   it measures 1.9:1 — unreadable — so a card the owner asked to be yellow can only be written on in a
   dark colour. Everything that varies with it (the ink, the badge behind the glyph, the ring on the
   pressed card) reads --dok-kpi-ink or currentColor rather than a second literal, so the card is one
   decision and not four.

   The blue is the brand blue rather than --mud-palette-info because MudBlazor's dark palette lightens
   Info to a sky blue that white text cannot sit on; a card that flips to unreadable in dark mode is
   worse than one that does not re-tint with the tenant.

   These five fills stay light in dark mode on purpose: they are brand-coloured tiles, like the ones on
   the reference dashboard the owner chose them from, not panels that should follow the page. The ink is
   measured against the tile, so the contrast holds in either theme. */
.dok-dash-attention {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: var(--dok-space-md);
    height: 100%;
}

.dok-dash-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-sm);
    min-height: 6rem;
    padding: var(--dok-space-md);
    border: 1px solid transparent;
    border-radius: var(--dok-radius);
    background: linear-gradient(135deg, var(--dok-kpi-from), var(--dok-kpi-to));
    color: var(--dok-kpi-ink, #ffffff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.16s ease;
}

.dok-dash-kpi:hover { box-shadow: var(--dok-shadow-md); }

.dok-dash-kpi:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The pressed card keeps its own colour — the filter it applies is that indicator's, not the page's —
   and says so with a ring inside its own edge. currentColor, so the ring is the card's own ink: a white
   one would be invisible on the light yellow. */
.dok-dash-kpi--on { box-shadow: inset 0 0 0 2px currentColor, var(--dok-shadow-md); }

.dok-dash-kpi__text {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
    min-width: 0;
}

.dok-dash-kpi__label {
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-dash-kpi__value {
    font-size: var(--dok-font-size-2xl);
    font-weight: var(--dok-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--dok-line-height-tight);
}

.dok-dash-kpi__description {
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
    line-height: var(--dok-line-height-normal);
}

.dok-dash-kpi__badge {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--dok-radius-full);
    /* Translucent, so the disc is a shade of the tile it sits on rather than a fifth colour to keep in
       step. The yellow card turns it the other way up — see its own rule. */
    background: var(--dok-kpi-badge, rgba(15, 23, 42, 0.24));
}

.dok-dash-kpi__badge .mud-icon-root { font-size: var(--dok-font-size-xl); color: currentColor; }

/* The four the owner settled on, in the order the column draws them. These fills are what a card wears
   when it has something in it; a card at zero wears none of them — see the cleared rule below. */
.dok-dash-kpi--awaiting { --dok-kpi-from: #2563eb; --dok-kpi-to: #1d4ed8; }

.dok-dash-kpi--atrisk {
    --dok-kpi-from: #fde68a;
    --dok-kpi-to: #fbd34d;
    --dok-kpi-ink: #78350f;
    --dok-kpi-badge: rgba(255, 255, 255, 0.55);
}

.dok-dash-kpi--overdue { --dok-kpi-from: #de1f77; --dok-kpi-to: #b81765; }
.dok-dash-kpi--failed { --dok-kpi-from: #dc2626; --dok-kpi-to: #b91c1c; }

/* The default arm of AttentionCards.Accent: an indicator this stylesheet has no colour for arrives
   quiet rather than transparent. */
.dok-dash-kpi--quiet { --dok-kpi-from: #334155; --dok-kpi-to: #1e293b; }

/* A ZERO IS GOOD NEWS, and it must not be shouted in an alarm colour. The cleared card keeps its slot
   and its place in the column, drops the fill for the page's own surface, and takes the positive tone on
   the tick the markup swaps in — so "nothing to do" is said by the colour, the glyph and the words, and
   never by colour alone.

   This rule came from DOK-1123, was removed on 2026-09-13 when the owner read two cleared cards on DEV
   as missing their colours, and was put back the same day once the cause was clear: "realmente tu tinhas
   razão. Um 0 é uma boa notícia." The round trip is recorded rather than tidied away, because the rule
   only looks like a bug on a screen where several indicators happen to be empty — which is exactly the
   screen it was written for. */
.dok-dash-kpi--clear {
    border-color: var(--dok-border-subtle);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    box-shadow: var(--dok-shadow-sm);
}

.dok-dash-kpi--clear.dok-dash-kpi--on { box-shadow: inset 0 0 0 2px var(--dok-dash-tone-positive); }
.dok-dash-kpi--clear .dok-dash-kpi__label { color: var(--mud-palette-text-primary); }
.dok-dash-kpi--clear .dok-dash-kpi__value { color: var(--mud-palette-text-primary); }
.dok-dash-kpi--clear .dok-dash-kpi__badge { background: rgba(var(--dok-dash-tone-positive-rgb), 0.14); }
.dok-dash-kpi--clear .dok-dash-kpi__badge .mud-icon-root { color: var(--dok-dash-tone-positive); }

/* ===== 1c. The day (DOK-1132) =====
   The reserved slot of the aids row: an illustration, the reader's own date, one line of welcome. The
   picture keeps its own palette in both themes, as a picture does; the card under it is themed. */
.dok-dash-today {
    padding: 0;
    overflow: hidden;
}

.dok-dash-today__scene {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 8rem;
    object-fit: cover;
}

.dok-dash-today__copy {
    padding: var(--dok-space-md);
    border-top: 1px solid var(--dok-border-subtle);
}

/* The line under the date is a <p>, and a paragraph brings a user-agent margin the shared subtitle rule
   does not clear. */
.dok-dash-today__copy .dok-dash-card__subtitle { margin: var(--dok-space-2xs) 0 0; }

/* ===== 2. Documents by validity — one line (DOK-1125) =====

   This replaced three bordered cards. They carried the numbers correctly and DOK-591's rules about them
   still hold; what was wrong was the weight. Three surfaces with three shadows and three accents is a lot
   of furniture for three figures that, on most days, ask for nothing.

   The count is the link and it is the biggest thing in its group, because scanning this line is looking
   for the one number that is not where it should be. Under each count is the ACT, not a restatement of
   the count: "substituir agora", "tratar este mês", "planear". That is what makes three similar figures
   tell three different stories.

   Colour is never alone. Each window keeps its glyph beside its name and its own words underneath, so the
   grave one is still distinguishable in greyscale, in a printout, and to a reader who does not separate
   red from amber. */
.dok-dash-validity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-md) var(--dok-space-xl, 2rem);
    padding: var(--dok-space-md) var(--dok-space-lg);
    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-validity__heading {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
    min-width: 0;
    /* Takes the slack so the three windows sit together on the right rather than drifting apart across
       a wide screen — they are one group and read as one. */
    margin-right: auto;
}

.dok-dash-validity__title {
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-bold);
}

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

/* The whole group is the link — the number and the words that say what it counts. A bare digit as the
   only clickable thing is a target nobody can name out loud, and a screen reader would announce it as
   one. */
.dok-dash-validity__item {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-sm);
    /* 44px is the touch floor for a tap target. */
    min-height: 2.75rem;
    padding-left: var(--dok-space-lg);
    /* The hairline that separates one window from the next, and the heading from the first of them. */
    border-left: 1px solid var(--dok-border-subtle);
    color: inherit;
    text-decoration: none;
}

.dok-dash-validity__item:hover .dok-dash-validity__label,
.dok-dash-validity__item:focus-visible .dok-dash-validity__label {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dok-dash-validity__value {
    color: var(--dok-dash-validity-accent, var(--mud-palette-text-primary));
    /* 28px — the bottom of the KPI range. It has to win its group without turning the line back into the
       row of cards this issue removed. */
    font-size: 1.75rem;
    font-weight: var(--dok-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--dok-line-height-tight);
}

.dok-dash-validity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-dash-validity__label {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-dash-validity__label .mud-icon-root {
    font-size: var(--dok-font-size-base);
    color: var(--dok-dash-validity-accent, var(--mud-palette-text-secondary));
}

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

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

/* A zero is good news, and DOK-591 requires it to keep its place rather than vanish. It stops wearing
   its window's alarm colour and takes the positive one, alongside the tick the markup swaps in — so the
   reader is told "nothing here" twice, and never by colour alone. */
.dok-dash-validity__item--clear { --dok-dash-validity-accent: var(--dok-dash-tone-positive); }
.dok-dash-validity__item--clear .dok-dash-validity__value { color: var(--mud-palette-text-secondary); }

/* ===== 2b. The shared segment band (DokSegmentStrip) =====

   Segments inside one card, each a toggle that filters the list under it; the selected one is tinted
   with its own tone rather than a shared accent. The rules stay in this file because that is where they
   were written and every page of the App links it — moving two hundred lines to chase a name is churn a
   reviewer cannot check.

   DOK-1132 — THE PAINEL NO LONGER RENDERS ONE. Its four indicators are the filled cards above, so today
   the only caller is the Dossier listing, which passes Compact. The non-compact rules are kept because
   Compact is a parameter of a shared component and not a Painel setting, but nothing in the Painel
   reaches them any more. */
.dok-dash-strip {
    display: grid;
    /* DOK-1126 — the column count is the segment count, set inline by DokSegmentStrip. It was the
       literal 4 the Painel happens to need, which is exactly the shape of constant that left the
       listing's own stage row declaring seven columns for eight stages (DOK-511). */
    grid-template-columns: repeat(var(--dok-strip-columns, 4), minmax(0, 1fr));
    padding: 0;
    overflow: hidden;
    /* DOK-1139, on review — the band is its own stacking context, so the arrows' z-index below orders them
       among the segments and never against the page around the band. */
    isolation: isolate;
}

/* DOK-1139 — A ROW, NOT A STACK, and the band reads as a flow because of it: a tile with the stage's
   glyph, the name and the number beside it, and an arrow pointing at the next stage. The owner brought
   the shape in a mock-up of the Dossier listing, which since DOK-1132 is this component's only caller —
   the Painel's four indicators are filled cards of their own now.

   The arrow is a pseudo-element and never markup: it is decoration, and a screen reader that announced
   "greater-than" between every pair of stages would be reading the furniture. */
.dok-dash-seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dok-space-sm);
    /* 44px touch target is the floor; these are far above it. */
    min-height: 4.25rem;
    padding: var(--dok-space-sm) var(--dok-space-md);
    border: 0;
    background-color: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease;
}

/* The arrow sits on the seam between two stages, pointing at the next one.

   DOK-1139, ON REVIEW — THE OWNER NEVER SAW IT ON DEV, for two reasons, either of which was enough. The
   band is a grid with no gap, so the "gap between two buttons" the first version meant to draw over does
   not exist: the chevron lies just past this button's edge, on top of the NEXT button, which is positioned
   and later in the tree and so paints its own surface over it. And it was inked in the 18% hairline token,
   a border colour meant to be barely there. The z-index fixes the first — the band's isolation keeps it
   from rising over anything outside the band — and the secondary text colour at half strength fixes the
   second: it is the colour the approved mock-up used, and it follows the theme into dark mode where a
   literal would not. */
.dok-dash-seg::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -0.32rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--mud-palette-text-secondary);
    border-right: 2px solid var(--mud-palette-text-secondary);
    opacity: 0.5;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.dok-dash-seg:last-child::after { display: none; }

/* The selected stage's arrow takes the stage's tone; the opacity above still halves it. */
.dok-dash-seg--on::after { border-color: var(--dok-seg-accent, var(--mud-palette-primary)); }

.dok-dash-seg:hover { background-color: var(--mud-palette-background); }

.dok-dash-seg:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* The hairline that ran at 80% of the segment's height was deleted by DOK-1139 along with the markup
   that asked for it: the arrow between stages separates them now, and two separators between one pair
   of stages is one too many. */

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

/* Selected. The tint is the segment's own tone at 7%, and it wins over the hover shade. */
.dok-dash-seg--on,
.dok-dash-seg--on:hover {
    background-color: rgba(var(--dok-seg-accent-rgb, 148, 163, 184), 0.07);
}

.dok-dash-seg--on .dok-dash-seg__value,
.dok-dash-seg--on .dok-dash-seg__description { color: var(--dok-seg-accent); }

/* The text column: the stage's name over its count. */
.dok-dash-seg__head {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dok-dash-seg__label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    line-height: var(--dok-line-height-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The glyph in a tile of its own, tinted with the stage's tone. A stage at zero keeps the tile and
   loses the weight — see --empty on the segment. */
.dok-dash-seg__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--dok-radius-sm);
    background: rgba(var(--dok-seg-accent-rgb, 148, 163, 184), 0.12);
    color: var(--dok-seg-accent, var(--mud-palette-text-secondary));
}

.dok-dash-seg__value {
    color: var(--mud-palette-text-primary);
    /* 22px. It was 36 when this band was the first thing on the Painel; in a row of eight, beside its
       own label, it does not need to be the loudest thing on the page. */
    font-size: 1.375rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
    font-variant-numeric: tabular-nums;
}

/* A stage with nothing in it stays in the flow — the flow is the point — and goes quiet. */
.dok-dash-seg--empty .dok-dash-seg__value { color: var(--mud-palette-text-secondary); }
.dok-dash-seg--empty .dok-dash-seg__icon { opacity: 0.6; }

.dok-dash-seg__description {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: var(--dok-line-height-normal);
}

/* DOK-1126 — the compact band: eight segments instead of four, in the same card height.

   A density modifier, not a second style. Only the number and the padding shrink; the hairline, the
   tint, the focus ring and the head layout are the ones above, untouched. Without it the Painel's
   36px figure in a 1/8th-width column wraps against the label beside it. */
.dok-dash-strip--compact .dok-dash-seg {
    min-height: 5.25rem;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-sm) var(--dok-space-sm) calc(var(--dok-space-sm) + 2px);
}

.dok-dash-strip--compact .dok-dash-seg__head {
    /* Two lines of a short label, at this width. "Garantia de qualidade" is the one that needs them. */
    min-height: 2rem;
}

.dok-dash-strip--compact .dok-dash-seg__label {
    font-size: var(--dok-font-size-xs);
}

.dok-dash-strip--compact .dok-dash-seg__value {
    /* 28px — the bottom of the KPI range. Eight of these are a band, not eight headlines. */
    font-size: 1.75rem;
}

/* DOK-1126 — the lifecycle vocabulary, alongside the Painel's five risk tones above.

   The Dossier listing paints its segments by STAGE, and a stage's colour is a MudBlazor palette token
   (StageConstant -> UiColorToken -> WorkItemLifecyclePresentation.Tone), not one of neutral / info /
   warning / critical / positive. Both families set the same two variables, so every rule above works
   for either; what differs is only where the colour comes from.

   All nine tokens have an arm, including the one that used to fall through. DOK-507 gave Triggering and
   the Integration stage the Tertiary token, and three separate screens ended their colour switch at
   `_ => "default"` — so the new stage was painted the neutral grey of Draft on all three. That is the
   bug WorkItemLifecyclePresentationTests now pins, and a missing arm here would reintroduce it in the
   one place a test cannot see it: an undeclared --tone- suffix renders untinted, and silently. */
.dok-dash-seg--tone-primary { --dok-seg-accent: var(--mud-palette-primary); --dok-seg-accent-rgb: var(--mud-palette-primary-rgb); }
.dok-dash-seg--tone-secondary { --dok-seg-accent: var(--mud-palette-secondary); --dok-seg-accent-rgb: var(--mud-palette-secondary-rgb); }
.dok-dash-seg--tone-tertiary { --dok-seg-accent: var(--mud-palette-tertiary); --dok-seg-accent-rgb: var(--mud-palette-tertiary-rgb); }
.dok-dash-seg--tone-success { --dok-seg-accent: var(--mud-palette-success); --dok-seg-accent-rgb: var(--mud-palette-success-rgb); }
.dok-dash-seg--tone-error { --dok-seg-accent: var(--mud-palette-error); --dok-seg-accent-rgb: var(--mud-palette-error-rgb); }
.dok-dash-seg--tone-dark { --dok-seg-accent: var(--mud-palette-dark); --dok-seg-accent-rgb: var(--mud-palette-dark-rgb); }
.dok-dash-seg--tone-default { --dok-seg-accent: var(--mud-palette-text-secondary); --dok-seg-accent-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139); }

/* The chip that names the active filter, in the queue head. */
.dok-dash-queue__actions {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    flex-wrap: wrap;
}

.dok-dash-queue__focus {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    min-height: 2rem;
    padding: 0 var(--dok-space-xs);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.35);
    border-radius: var(--dok-radius-full);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--dok-tone-primary-ink);
    font: inherit;
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    cursor: pointer;
}

.dok-dash-queue__focus:hover { background: rgba(var(--mud-palette-primary-rgb), 0.14); }

/* ===== 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 the priority reason and the SLA — one shape, tone does the talking. DOK-1435 — its text takes
   the tone's ink (--dok-tone-*-ink, dok-theme.css) through --dok-dash-pill-ink: the palette colour on its own
   wash read below AA in the light theme. The wash, the SLA bar and the activity glyphs keep --dok-dash-pill-color. */
.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-ink, var(--dok-tone-default-ink));
    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-ink: var(--dok-tone-error-ink); }
.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-ink: var(--dok-tone-warning-ink); }
.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-ink: var(--dok-tone-primary-ink); }
.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-ink: var(--dok-tone-success-ink); }
.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-pill-ink: var(--dok-tone-default-ink); }

/* DOK-2196 — the queue's SLA pill and its bar left with DokDossierSla, which draws the SLA here as on the listing's row. */

.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 Genius =====
   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: var(--dok-font-size-xl);
    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 unstacks the work row — the four indicators go two-up ABOVE the queue rather than beside it,
   because a 19rem column and a 46rem table do not both fit — and mobile stacks everything. No breakpoint
   is allowed to produce a horizontal scrollbar on the page. */
@media (max-width: 1279px) {
    .dok-dash__work { grid-template-columns: minmax(0, 1fr); }

    /* Four rows of equal height only make sense while the column is as tall as the queue. Once it sits
       above it, the cards take their own height, two across. */
    .dok-dash-attention {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        height: auto;
    }
}

/* 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-attention { grid-template-columns: minmax(0, 1fr); }
    .dok-dash__pair { grid-template-columns: minmax(0, 1fr); }

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

    .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-1125 — on a phone the line becomes a short list, one window per row. Wrapping it as a
       single run would break between a number and the words that name it, which is the one thing
       this layout cannot afford: a stray "7" on its own line is not information. */
    .dok-dash-validity { flex-direction: column; align-items: flex-start; gap: var(--dok-space-2xs); }
    .dok-dash-validity__item { min-height: 2.25rem; }
}

/* The prefers-reduced-motion block that used to sit here neutralised one transform: the lift on the
   attention card's hover. DOK-1125 deleted that card, and the line that replaced it moves nothing —
   it tints a bottom border. Nothing left to neutralise, so the block went with the card rather than
   staying as an empty guard over a rule that no longer exists. */

/* The band folds two up at tablet and one up on a phone. The hairlines go with the single row they
   belonged to — on two rows a left-edge line would fall at the start of row 2 — so below the desktop
   layout the segments separate by a top border. The `:not(--compact)` half is the wide four-column band,
   which no screen renders since DOK-1132; see the section header above. */
@media (max-width: 1279px) {
    .dok-dash-strip:not(.dok-dash-strip--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dok-dash-strip:not(.dok-dash-strip--compact) .dok-dash-seg:nth-child(n + 3) { border-top: 1px solid var(--dok-border-subtle); }

    /* DOK-1126 — the eight-segment band steps down more gently than the Painel's four: eight to four
       here, four to two at the phone breakpoint, and the Painel's own band is unaffected because every
       rule in this block now says which of the two it is talking about. Dropping straight from eight to
       two would make a band eight rows tall, which is a list, not a band. The hairline survives the
       first step — with four across it still divides — and is cleared at the start of each row. */
    .dok-dash-strip--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dok-dash-strip--compact .dok-dash-seg:nth-child(4n + 1) { background-image: none; }
    .dok-dash-strip--compact .dok-dash-seg:nth-child(n + 5) { border-top: 1px solid var(--dok-border-subtle); }
}

@media (max-width: 767px) {
    .dok-dash-strip:not(.dok-dash-strip--compact) { grid-template-columns: minmax(0, 1fr); }
    .dok-dash-strip:not(.dok-dash-strip--compact) .dok-dash-seg:nth-child(n + 2) { border-top: 1px solid var(--dok-border-subtle); }

    .dok-dash-strip--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dok-dash-strip--compact .dok-dash-seg:nth-child(2n + 1) { background-image: none; }
    .dok-dash-strip--compact .dok-dash-seg:nth-child(n + 3) { border-top: 1px solid var(--dok-border-subtle); }
}

/* ===== DOK-1894 — the figures, for whoever counts the dossiers without seeing them ===== */
.dok-dash-figures {
    display: grid;
    gap: var(--dok-space-md);
}

.dok-dash-figures__lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dok-space-md);
    align-items: start;
}

.dok-dash-figures__heading {
    margin: var(--dok-space-sm) 0 var(--dok-space-xs);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
}

.dok-dash-figures__list {
    display: grid;
    gap: var(--dok-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-dash-figures__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-sm);
    min-width: 0;
}

.dok-dash-figures__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-dash-figures__count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: var(--dok-font-weight-bold);
}

@media (max-width: 767px) {
    .dok-dash-figures__lists { grid-template-columns: minmax(0, 1fr); }
}