/* DGSM's own styles, beside MudBlazor's (P2-3). Colors come from MudBlazor's palette variables, so both themes work. */

/* The brand (SMD-233). Inter, served from the site (the CSP allows only its own fonts; OFL in lib/inter). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/inter/InterVariable.woff2") format("woff2");
}

/* The languages of Chinese and Japanese text (P13): their own font stacks after Inter, which has no such letters. Only fonts the
   viewer's computer has (the CSP allows no others): Microsoft's, Apple's and Google's Noto where installed. MudBlazor takes every
   typography's family from a variable on the root, so the page's lang (the language's culture, App.razor) swaps them all at once. */
html:lang(zh-TW) {
    --dgsm-font-ui: "Inter", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}

html:lang(zh-CN) {
    --dgsm-font-ui: "Inter", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

html:lang(ja) {
    --dgsm-font-ui: "Inter", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

html:lang(zh-TW),
html:lang(zh-CN),
html:lang(ja) {
    --mud-typography-default-family: var(--dgsm-font-ui);
    --mud-typography-h1-family: var(--dgsm-font-ui);
    --mud-typography-h2-family: var(--dgsm-font-ui);
    --mud-typography-h3-family: var(--dgsm-font-ui);
    --mud-typography-h4-family: var(--dgsm-font-ui);
    --mud-typography-h5-family: var(--dgsm-font-ui);
    --mud-typography-h6-family: var(--dgsm-font-ui);
    --mud-typography-subtitle1-family: var(--dgsm-font-ui);
    --mud-typography-subtitle2-family: var(--dgsm-font-ui);
    --mud-typography-body1-family: var(--dgsm-font-ui);
    --mud-typography-body2-family: var(--dgsm-font-ui);
    --mud-typography-button-family: var(--dgsm-font-ui);
    --mud-typography-caption-family: var(--dgsm-font-ui);
    --mud-typography-overline-family: var(--dgsm-font-ui);
    font-family: var(--dgsm-font-ui);
}

/* The one monospace stack (P12-5): every rule below that wants monospace uses it. */
:root {
    --dgsm-font-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}

/* The app bar: the banner and the product's name over a brand-blue line (the palette's primary in both themes). */
.mud-layout .mud-appbar {
    box-shadow: inset 0 -3px 0 var(--mud-palette-primary), 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* The banner keeps its full width while the Find box shrinks to its 200 px, and only then scales down, never cut (SMF-144): a tiny
   shrink factor leaves the shrinking to the Find box first, and a 12 px gap keeps the two apart. */
.dgsm-brand {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    flex: 0 0.01 auto;
    min-width: 0;
    margin-right: 12px;
}

.dgsm-brand-banner {
    display: block;
    height: 36px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
}

/* The large banner above the sign-in and No Access cards: 64 pixels high, centred, narrower on a phone without stretching. */
.dgsm-banner-large {
    display: block;
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 40px auto 0;
}

.dgsm-brand-name {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--mud-palette-lines-default);
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
}

/* The signed-in bar on one line at 1024 px, the narrowest screen used (SMF-142): the product's name only from 1280 px, the Find box
   shrinking from 340 to 200 px, and the environment, the person's name (cut with an ellipsis) and Sign out never wrapping. */
@media (max-width: 1279.98px) {
    .dgsm-brand-name {
        display: none;
    }
}

/* The least important columns of the wide tables (Servers, Hosted Servers, the home page's Servers panel) are hidden below 1280 px,
   so a table fits 1024 px, the narrowest screen used; the values stay on the item's own page. */
@media (max-width: 1279.98px) {
    .dgsm-wide-only {
        display: none;
    }
}

/* The widest-only columns (the Servers lists' Machine, the three gauges) need more room still: hidden below 1600 px, which covers
   1280 px too, so they show only on a screen that has the space for them. */
@media (max-width: 1599.98px) {
    .dgsm-widest-only {
        display: none;
    }
}

/* A row's actions stay in view when a table is wider than the screen. The surface colour keeps the cells under it from showing
   through; a hovered row paints MudBlazor's hover colour over it (a gradient, as the colour is translucent). */
.dgsm-row-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.mud-table-hover .mud-table-row:hover > .dgsm-row-actions {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

.dgsm-appbar-text,
.dgsm-appbar-form .mud-button-root {
    white-space: nowrap;
}

.dgsm-appbar-form {
    flex: none;
}

.dgsm-user-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The language menu's items (P13): a fixed slot for the check mark keeps the names in line. */
.dgsm-language-item {
    min-width: 180px;
    gap: 4px;
}

.dgsm-language-check-space {
    display: inline-block;
    width: 20px;
    flex: none;
}

/* The same choices as plain links on a page with no live connection (the sign-in pages): a details element opens without script. */
.dgsm-language-plain {
    position: relative;
    flex: none;
}

.dgsm-language-plain > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}

.dgsm-language-plain > summary::-webkit-details-marker {
    display: none;
}

.dgsm-language-plain > summary:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.dgsm-language-plain-list {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1300;
    min-width: 200px;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.dgsm-language-plain-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
}

.dgsm-language-plain-list a:hover,
.dgsm-language-plain-list a[aria-current="true"] {
    background-color: var(--mud-palette-action-default-hover);
}

.dgsm-language-preview {
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    font-size: 0.75rem;
}

/* Titles: weight 800 (the theme) in the palette's secondary, navy in light and pale blue in dark. A title given a color of its
   own keeps it (MudBlazor's color classes win), as do titles inside an alert. */
.mud-main-content :is(.mud-typography-h4, .mud-typography-h5, .mud-typography-h6):not(.mud-text-secondary):not(.mud-alert *),
.mud-dialog :is(.mud-typography-h4, .mud-typography-h5, .mud-typography-h6):not(.mud-text-secondary) {
    color: var(--mud-palette-secondary);
}

/* The dashboard tiles' brand-blue top line, and the bar beside the current menu entry (in place of MudBlazor's right edge). */
.dgsm-tile {
    border-top: 3px solid var(--mud-palette-primary);
}

.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 0;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* Release notes and known issues rendered from Markdown (ReleaseNotesMarkdown). */
.release-notes > :first-child {
    margin-top: 0;
}

.release-notes > :last-child {
    margin-bottom: 0;
}

.release-notes h1,
.release-notes h2,
.release-notes h3,
.release-notes h4 {
    margin: 1em 0 0.5em;
    font-weight: 500;
}

.release-notes p,
.release-notes ul,
.release-notes ol,
.release-notes table,
.release-notes pre {
    margin: 0 0 0.75em;
}

.release-notes ul,
.release-notes ol {
    padding-left: 1.5em;
}

.release-notes ul.contains-task-list {
    list-style: none;
    padding-left: 0.5em;
}

.release-notes a {
    color: var(--mud-palette-primary);
}

.release-notes code,
.release-notes pre {
    font-family: var(--dgsm-font-mono);
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.release-notes code {
    padding: 0 0.25em;
}

.release-notes pre {
    padding: 0.75em;
    overflow-x: auto;
}

.release-notes table {
    border-collapse: collapse;
}

.release-notes th,
.release-notes td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.25em 0.75em;
    text-align: left;
}

/* Readable forms and dialogs (SMD-80): labels above the fields, hints below, room between fields, sections. */
.dgsm-field {
    margin: 0 0 18px;
}

.dgsm-field-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 6px;
    color: var(--mud-palette-text-primary);
}

.dgsm-field-required {
    color: var(--mud-palette-error);
}

.dgsm-field-hint {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 6px 0 0;
    color: var(--mud-palette-text-secondary);
}

.dgsm-field .mud-input-control {
    margin-top: 0;
}

.dgsm-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    column-gap: 16px;
}

.dgsm-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 14px 16px 0;
    margin: 0 0 16px;
}

.dgsm-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    color: var(--mud-palette-secondary);
}

.dgsm-intro {
    max-width: 110ch;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 18px;
    color: var(--mud-palette-text-secondary);
}

/* Date fields mark the viewer's today (DateField): MudBlazor rings the server's today (mud-current, outlined), which is UTC's
   date and the wrong day in the evening in America; its ring is hidden on DGSM's days and the viewer's today gets the ring. */
.mud-picker-calendar .mud-day.dgsm-day.mud-current:not(.dgsm-today):not(.mud-selected) {
    border-color: transparent;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.mud-picker-calendar .mud-day.dgsm-day.dgsm-today:not(.mud-selected) {
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Pages run full width (lists, grids, dashboards); a page that is mainly a form or text to read keeps this width. */
.dgsm-readable {
    max-width: 1280px;
}

/* A server row's Version cell (SMD-150, ServerRowCells): under the product major, the licensed component and the DataGarden
   Updater, each a name and a version. The names' column is as wide as the longest name of the cell, so the versions start at
   the same place within a row's cell and a short name leaves no gap; figures of equal width keep the digits stacked (user,
   2026-10-14). */
.dgsm-versions {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 12px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.dgsm-versions-name {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* The version and its chips (older release, update planned): a chip wraps under the version when the cell is narrow. */
.dgsm-version-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
}

/* A server's latest CPU, memory and disk (P6-5, SMD-107, MachineBars): three stacked rows of icon, label, bar and percent;
   amber and red from MachineGauges. The rows share four fixed columns, so every bar is the same length and starts at the
   same place: as flex rows, the labels shrank to their text in a table cell and each bar started elsewhere (user,
   2026-10-12). The bar's outline shows its full length on the dark theme. */
.dgsm-gauges {
    display: inline-grid;
    grid-template-columns: 1.25rem 5.5rem 140px 2.5rem;
    column-gap: 6px;
    row-gap: 3px;
    align-items: center;
    vertical-align: middle;
}

.dgsm-gauge {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.dgsm-gauge-track {
    position: relative;
    box-sizing: border-box;
    height: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 5px;
    overflow: hidden;
    background: var(--mud-palette-action-disabled-background);
}

.dgsm-gauge-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: var(--mud-palette-info);
}

.dgsm-gauge-near {
    background: var(--mud-palette-warning);
}

.dgsm-gauge-over {
    background: var(--mud-palette-error);
}

.dgsm-gauge-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.dgsm-bars-none {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* A status page's chart (P6-5, MetricChart). */
.dgsm-chart {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px;
}

.dgsm-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.dgsm-chart-empty {
    padding: 24px 0;
    color: var(--mud-palette-text-secondary);
}

/* The drawing (Apache ECharts, dgsm-charts.js, P7-14) fills its box; its height is the component's Height parameter. */
.dgsm-chart-plot {
    width: 100%;
    margin-top: 4px;
}

.dgsm-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.dgsm-chart-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

/* A category's heading in a status page's Reported Values (ReportedValues). */
.dgsm-values-category th {
    background: var(--mud-palette-background-gray);
    font-weight: 500;
    text-align: left;
}

/* The values tables (ReportedValues, ServerBilling): numbers right-aligned in digits of one width, so they line up down a column;
   the period's heading centred over its three columns. */
.dgsm-values .dgsm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dgsm-values .dgsm-group-head {
    text-align: center;
}

/* An opened value: its chart beside its latest readings; one above the other on a narrow screen. */
.dgsm-value-detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 8px 0;
}

@media (max-width: 960px) {
    .dgsm-value-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* What a role allows (P1-14, RoleExplanation): a compact list under the role's purpose. */
.dgsm-role-allows {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 4px 0 0;
    padding-left: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

/* The Staff Users grid and its legend (SMD-98): permission names turned sideways in narrow columns, the first column kept in
   place while the grid scrolls sideways, group headings, and ticks centred. position: relative keeps the screen-reader spans
   (dgsm-sr-only, absolutely positioned) inside the scrolling box, so the page itself never scrolls sideways. */
.dgsm-staff-grid {
    position: relative;
    overflow-x: auto;
}

.dgsm-staff-grid th.dgsm-staff-permission {
    vertical-align: bottom;
    padding: 4px 2px;
}

.dgsm-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: 400;
}

.dgsm-staff-grid .dgsm-sticky-column {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    min-width: 12rem;
}

.dgsm-staff-grid th.dgsm-staff-group {
    text-align: center;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dgsm-staff-grid .dgsm-staff-group-row td {
    background: var(--mud-palette-background-gray);
}

.dgsm-staff-grid .dgsm-staff-check {
    text-align: center;
    padding: 2px 4px;
}

.dgsm-staff-grid th.dgsm-staff-person-column {
    vertical-align: top;
    min-width: 11rem;
    font-weight: 400;
}

.dgsm-staff-grid .dgsm-staff-overlap {
    font-size: 0.75rem;
    max-width: 10rem;
    white-space: normal;
    /* Under its role's heading, as the checkmarks above are (the user, 2026-10-14). */
    text-align: center;
    vertical-align: top;
}

.dgsm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Monospace for ids, versions, keys and typed values (P12-5): on a text, cell or span the element itself; on a field (its root
   holds the label and helper text too) only the input, so the label keeps the normal font. */
.dgsm-mono:not(.mud-input-control),
.dgsm-mono input {
    font-family: var(--dgsm-font-mono);
}

.dgsm-preview {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 16px;
    font-size: 0.8125rem;
    background: var(--mud-palette-background-gray);
}

.mud-dialog .mud-dialog-title {
    padding: 20px 24px 4px;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 24px 4px;
}

.mud-dialog .mud-dialog-actions {
    gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* A release file's SHA-256 under its name (P5): small and monospace, wrapping anywhere on a narrow screen. */
.dgsm-sha {
    font-family: var(--dgsm-font-mono);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-all;
}

/* The connection notice (SMF-29, option A): a thin banner under the app bar, shown by dgsm.startBlazor while a page
   reconnects. It does not block the page. MudBlazor's palette keeps it readable in light and dark themes. */
#dgsm-reconnect {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    left: 0;
    right: 0;
    z-index: 1400;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    font-size: 0.875rem;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

#dgsm-reconnect.dgsm-reconnect-shown {
    display: flex;
}

#dgsm-reconnect .dgsm-reconnect-text {
    flex: 1;
}

#dgsm-reconnect .dgsm-reconnect-reload {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 2px 10px;
    cursor: pointer;
}

.dgsm-reconnect-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dgsm-spin 0.8s linear infinite;
}

@keyframes dgsm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The sign-in pages (P1-3): plain pages with ordinary form posts (no live connection, SMF-24), so plain inputs styled
   like MudBlazor's outlined fields. */
.dgsm-signin {
    max-width: 440px;
}

.dgsm-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.dgsm-input:hover {
    border-color: var(--mud-palette-text-primary);
}

.dgsm-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* The staff's way in: its own box under the password form, centered (user, 2026-10-10). */
.dgsm-signin-staff {
    margin: 28px 0 0;
    padding: 14px 16px 16px;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-background);
}

.dgsm-signin-staff-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.dgsm-signin-staff-hint {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 4px 0 12px;
    color: var(--mud-palette-text-secondary);
}

/* A temporary password: one string with no spaces, every other group of four tinted for reading it out. */
.dgsm-temporary-password {
    font-family: var(--dgsm-font-mono);
    font-size: 1.375rem;
    color: var(--mud-palette-text-primary);
}

.dgsm-temporary-password .dgsm-group-tint {
    /* A light tint of the brand color in both themes; the text keeps its own color. */
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 3px;
}

/* The authenticator set-up (P10-11, SMD-86): the QR code on white in both themes, so every phone can read it; the key in
   tinted groups of four, as a temporary password, with a Copy button that works without a live connection (dgsm.js). */
.dgsm-qr-code {
    width: fit-content;
    margin: 10px auto 12px;
    padding: 8px;
    background: #ffffff;
    border-radius: 4px;
}

.dgsm-qr-code svg {
    display: block;
    width: 180px;
    height: 180px;
}

.dgsm-authenticator-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 4px 0 8px;
}

.dgsm-authenticator-key .dgsm-temporary-password {
    font-size: 1.125rem;
}

.dgsm-copy-button {
    padding: 4px 12px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

/* Icons and buttons in fixed slots (the organization page's Users, SMD-86): a missing one leaves its slot empty, so the
   rest stay in line from row to row. A state is told by the icon's shape, never by its color alone. */
.dgsm-slot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    vertical-align: middle;
}

.dgsm-slot-wide {
    width: 100px;
}

.dgsm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.dgsm-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The Delete Personal Data dialog's two lists, what goes and what stays (SMD-151). */
.dgsm-personal-data-list {
    margin: 4px 0 0;
    padding-left: 1.25rem;
}

/* A pressed sign-in button while the next page loads (dgsm.js): a small spinner before its working text. */
.dgsm-busy .mud-button-label::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 8px;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dgsm-spin 0.8s linear infinite;
}

/* An Activity row's details (P9-4, ActivityDetails): fields before and after, or a named event's details. */
.dgsm-activity-details {
    margin: 8px 16px 12px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dgsm-activity-details th,
.dgsm-activity-details td {
    padding: 3px 16px 3px 0;
    text-align: left;
    vertical-align: top;
    white-space: pre-wrap;
    word-break: break-word;
}

.dgsm-activity-details thead th {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dgsm-activity-details tbody th {
    font-weight: 500;
    white-space: nowrap;
}

.dgsm-activity-empty {
    color: var(--mud-palette-text-secondary);
}

/* The Monthly Report (P9-3): numbers right-aligned, a row naming each owner above its rows, terms wrapping. */
.dgsm-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.dgsm-report-summary {
    max-width: 640px;
}

.dgsm-report-group th {
    font-weight: 600 !important;
    background-color: var(--mud-palette-background-gray);
}

.dgsm-report-terms {
    min-width: 220px;
    word-break: break-word;
}

/* The Find box in the top bar (P9-5): a light field on the bar's color, shrinking to 200 px when the bar is full (SMF-142), hidden on
   narrow screens; each result with its kind. */
.dgsm-find {
    flex: 0 1 340px;
    min-width: 200px;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

@media (max-width: 960px) {
    .dgsm-find {
        display: none !important;
    }
}

.dgsm-find-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The menu's group headings (SMD-111): small and quiet, so the entries stay what the eye finds first. */
.dgsm-nav-section {
    padding: 16px 16px 4px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

/* A choice as a table (ChoiceTable, SMD-115): aligned columns, a radio button per row, the whole row clickable, the chosen row
   highlighted; numbers right-aligned in digits of one width. */
.dgsm-choice-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.dgsm-choice-table th {
    text-align: left;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dgsm-choice-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dgsm-choice-table .dgsm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dgsm-choice-table .dgsm-choice-radio {
    width: 2.5rem;
}

.dgsm-choice-row {
    cursor: pointer;
}

.dgsm-choice-row:hover td {
    background: var(--mud-palette-action-default-hover);
}

.dgsm-choice-chosen td,
.dgsm-choice-chosen:hover td {
    background: var(--mud-palette-primary-hover);
}

.dgsm-choice-disabled {
    cursor: default;
    color: var(--mud-palette-text-disabled);
}

.dgsm-choice-disabled:hover td {
    background: none;
}

.dgsm-choice-table input[type="radio"] {
    accent-color: var(--mud-palette-primary);
    width: 1rem;
    height: 1rem;
    cursor: inherit;
}

/* The wizard's review (SMD-115): what will be made, as label and value; then its cost as an accounting statement, line items
   with amounts in one right-aligned column and the total bold over a rule, double-ruled under. */
.dgsm-review-details th {
    text-align: left;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    padding: 3px 24px 3px 0;
    vertical-align: top;
    white-space: nowrap;
}

.dgsm-review-details td {
    padding: 3px 0;
}

.dgsm-statement {
    border-collapse: collapse;
    min-width: 28rem;
    max-width: 40rem;
    width: 100%;
}

.dgsm-statement th,
.dgsm-statement td {
    padding: 5px 0;
    text-align: left;
}

.dgsm-statement thead th {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dgsm-statement .dgsm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.dgsm-statement tfoot th,
.dgsm-statement tfoot td {
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-text-primary);
    border-bottom: 3px double var(--mud-palette-text-primary);
}

/* A cost in its own box (CostStatement, SMD-115), apart from any message or instruction. */
.dgsm-cost-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 10px 14px;
}

.dgsm-cost-box .dgsm-statement {
    min-width: 0;
}

/* Monthly Costs (F48, SMD-134): the statement beside the budget, its sections, lines, parts and ruled totals. */
.dgsm-monthly {
    display: grid;
    grid-template-columns: minmax(0, 52rem) minmax(14rem, 18rem);
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .dgsm-monthly {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dgsm-monthly .dgsm-statement,
.dgsm-months .dgsm-statement {
    max-width: none;
    min-width: 0;
}

.dgsm-statement .dgsm-mc-section th {
    font-weight: 700;
    padding-top: 14px;
}

.dgsm-statement .dgsm-mc-customer th {
    font-weight: 500;
    padding-left: 16px;
}

.dgsm-statement .dgsm-mc-item th {
    font-weight: 400;
    padding-left: 16px;
}

.dgsm-statement .dgsm-mc-server th {
    padding-left: 32px;
}

.dgsm-statement .dgsm-mc-part th,
.dgsm-statement .dgsm-mc-part td {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    padding-top: 1px;
    padding-bottom: 1px;
}

.dgsm-statement .dgsm-mc-part th {
    padding-left: 32px;
}

.dgsm-statement .dgsm-mc-part.dgsm-mc-of-server th {
    padding-left: 48px;
}

.dgsm-statement .dgsm-mc-subtotal th,
.dgsm-statement .dgsm-mc-subtotal td {
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dgsm-statement .dgsm-mc-total th,
.dgsm-statement .dgsm-mc-total td {
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-text-primary);
    border-bottom: 3px double var(--mud-palette-text-primary);
}

/* A row that takes no part, shown with its reason (P7-10: a server refused in the Update Selected plan). */
.dgsm-dimmed td {
    color: var(--mud-palette-text-disabled);
}

/* A small icon in a line of text. */
.dgsm-inline-icon {
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* A bold header with a rule under it that opens a section of a list: a component on the Software page and on a product's
 Container Images tab (SMD-129). */
.dgsm-section-header {
    border-bottom: 2px solid var(--mud-palette-text-secondary);
    padding-bottom: 4px;
}

/* A table row whose details follow in the next row (an on-site update's reason and steps): no rule between them. */
.dgsm-row-continued td {
    border-bottom: none !important;
}

/* The details row itself: indented under its row, close to it. */
.dgsm-row-detail td {
    padding-left: 24px !important;
    padding-top: 0 !important;
}

/* Radio options side by side (Add Site's connectivity policy, Request Software's deployment): room between one option's
 label and the next option's button, so each label clearly belongs to its own button. Set on MudRadioGroup, whose class lands on
 an outer wrapper; each option sits in its own wrapper inside .mud-radio-group (MudBlazor 9). */
.dgsm-radio-choices .mud-radio-group > *:not(:last-child) {
    margin-inline-end: 24px;
}

/* An Overview card's lines (OverviewLine, P7-14): every other line striped and the line under the pointer highlighted, in
 MudBlazor's own soft colours (its table colours are too strong or invisible in the dark theme: 20% white striped, a 4% black
 hover), so a value far to the right is easy to match to its label. Only the lines count, so a card's title, notes and links do
 not shift the stripes. The stripe leaves out the line under the pointer: its selector counts more than :hover (SMF-140). */
.dgsm-overview-line {
    padding: 1px 6px;
    border-radius: 4px;
}

.dgsm-overview-line:nth-child(even of .dgsm-overview-line):not(:hover) {
    background-color: var(--mud-palette-action-default-hover);
}

.dgsm-overview-line:hover {
    background-color: var(--mud-palette-lines-default);
}

/* A browser that lacks what DGSM needs (SMD-189, docs/reference/browser-requirements.md): a plain message at the top. */
.dgsm-unsupported {
    position: relative;
    z-index: 2000;
    padding: 12px 16px;
    background: #b42318;
    color: #ffffff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
}

/* Product logos (product logos, T1): the small picture beside a name keeps its size, and the logo grids show each picture on the
   page color it is made for. */
.dgsm-product-logo {
    flex: none;
}

.dgsm-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.dgsm-logo-preview-light {
    background-color: #ffffff;
}

.dgsm-logo-preview-dark {
    background-color: #1f2142;
}

/* The answers of a guide step (GuideChoices, SMD-234): a list with a bordered row per answer, or cards in a grid. The chosen answer is
   tinted (the primary's own hover tint, so light and dark both work), a row also has a primary bar on its left, a card a primary border.
   On a card the radio button is visually hidden but reachable by keyboard; the card shows its focus. */
.dgsm-guide-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 44rem;
    margin-bottom: 12px;
}

.dgsm-guide-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.dgsm-guide-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
}

.dgsm-guide-choice:hover {
    background: var(--mud-palette-action-default-hover);
}

.dgsm-guide-choice:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dgsm-guide-choice-chosen,
.dgsm-guide-choice-chosen:hover {
    background: var(--mud-palette-primary-hover);
}

.dgsm-guide-list .dgsm-guide-choice-chosen {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

.dgsm-guide-cards .dgsm-guide-choice {
    padding: 14px 16px;
}

.dgsm-guide-cards .dgsm-guide-choice-chosen {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.dgsm-guide-list input[type="radio"],
.dgsm-guide-list input[type="checkbox"] {
    flex: none;
    margin: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--mud-palette-primary);
    cursor: inherit;
}

.dgsm-guide-choice-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dgsm-guide-choice-name {
    font-weight: 500;
}

.dgsm-guide-choice-detail {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}