html, body {
    height: 100%;
    margin: 0;
}

/* The whole page in the Telerik theme's typography and colors, not only its components. */
body {
    font-family: var(--kendo-font-family, sans-serif);
    font-size: var(--kendo-font-size, 14px);
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    background: var(--kendo-color-app-surface, #fff);
}

/* The start screen (index.html): the mark, the name, and a bar that follows Blazor's download. Theme tokens, so it
   is already in the remembered light or dark (js/theme.js runs first). */
.admin-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    height: 100vh;
    color: var(--kendo-color-subtle, #666);
}

.admin-loading-mark {
    display: block;
    width: 6rem;
    height: auto;
}

.admin-loading-name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
}

.admin-loading-bar {
    width: 14rem;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background-color: var(--kendo-color-border, rgba(0, 0, 0, 0.1));
}

.admin-loading-bar > span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background-color: var(--kendo-color-primary, #ff6358);
    transition: width 0.2s ease-out;
}

/* "Loading" until the download reports, then its percentage ("63%"); Blazor sets the text as a CSS string. */
.admin-loading-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: var(--kendo-color-warning-subtle, lightyellow);
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.admin-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ── Chrome: a header (tint + accent rule), not a solid band of buttons. Theme tokens throughout, so it follows the
   theme and light/dark by itself. ── */

.admin-chrome {
    background-color: var(--kendo-color-primary-subtle);
    border-bottom: 2px solid var(--kendo-color-primary);
    padding-block: 0;
    padding-inline: 0.5rem;
    min-height: 2.75rem;
}

.admin-chrome .k-button,
.admin-title,
.admin-user {
    color: var(--kendo-color-primary-on-subtle);
}

.admin-chrome .k-button:hover {
    background-color: var(--kendo-color-primary-subtle-hover);
}

.admin-chrome .k-button.k-selected,
.admin-chrome .k-button.k-selected:hover {
    color: var(--kendo-color-primary-on-subtle);
    background-color: var(--kendo-color-primary-subtle-active);
}

.admin-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.admin-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0.25rem;
}

/* The avatar sized for the bar (the theme's small one is 16 px — too tight for two initials), and its initials set
   small enough to clear the edge. */
.admin-user .k-avatar {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
}

.admin-user .k-avatar .k-avatar-text {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The menu: opens below the bar (its button is centered in it), at a density for reading commands. */
.admin-menu {
    margin-top: 8.5px;
}

.admin-menu .k-menu-item .k-link {
    padding-block: 0.45rem;
    padding-inline: 0.75rem;
}

/* Headings: disabled items, set as small labels rather than faded commands. */
.admin-menu .k-menu-item.admin-menu-heading,
.admin-menu .k-menu-item.admin-menu-heading .k-link {
    opacity: 1;
    cursor: default;
    background-color: transparent;
}

.admin-menu .k-menu-item.admin-menu-heading .k-link {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--kendo-color-subtle);
    padding-block: 0.9rem 0.35rem;
}

.admin-menu .k-menu-item.admin-menu-heading:first-child .k-link {
    padding-top: 0.35rem;
}

.admin-menu .k-menu-item.admin-menu-heading.k-focus > .k-link {
    box-shadow: none;
}

.admin-menu .k-menu-item.admin-menu-ruled {
    border-top: 1px solid var(--kendo-color-border);
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.admin-menu .k-menu-item.admin-menu-checkable .k-menu-link-text {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.admin-menu-check {
    margin-inline-start: auto;
    padding-inline-start: 1.5rem;
    color: var(--kendo-color-primary);
}

.admin-menu-unchecked {
    visibility: hidden;
}

/* The theme picker: a grid of families, chosen by their color. */
.admin-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(9rem, 1fr));
    gap: 0.4rem;
}

.admin-swatch-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    background-color: var(--kendo-color-surface-alt);
    color: var(--kendo-color-on-app-surface);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.admin-swatch-choice:hover {
    background-color: var(--kendo-color-base-subtle-hover);
}

.admin-swatch-chosen {
    border-color: var(--kendo-color-primary);
    box-shadow: inset 0 0 0 1px var(--kendo-color-primary);
}

.admin-swatch-dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid var(--kendo-color-border-alt);
}

.admin-swatch-note {
    margin: 0.75rem 0.25rem 0.25rem;
}

/* About (after pondhawk-one's). Every rule is scoped to the plate: the theme's margins on bare p and h2 would win.
   The mark is the Pondhawk dragonfly in its own slate blue — the one thing not from the theme. */

.admin-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 2rem 1.25rem;
}

.admin-about .admin-about-mark {
    display: block;
    width: 8rem;
    height: auto;
    margin: 0 0 1.25rem;
}

.admin-about .admin-about-product {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--kendo-color-on-app-surface);
    border-bottom: 2px solid var(--kendo-color-primary);
    padding-bottom: 0.5rem;
}

.admin-about .admin-about-kind {
    margin: 1.25rem 0 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--kendo-color-subtle);
}

.admin-about .admin-about-summary {
    max-width: 19rem;
    margin: 1rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--kendo-color-on-app-surface);
}

.admin-about .admin-about-version {
    margin: 1.75rem 0 0;
    font-size: 0.95rem;
    color: var(--kendo-color-on-app-surface);
}

.admin-about .admin-about-copyright {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
}

/* Font Awesome icons in Telerik buttons and font-icon spans: the theme's icon size. */
.k-icon.fa-regular,
.k-font-icon.fa-regular {
    font-size: 1em;
    width: 1.25em;
}

/* ── The working area: under the header, the navigator on the left and the page beside it. ── */

/* The SCIM endpoint being worked on, on the header. */
.admin-endpoint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kendo-color-primary-on-subtle);
}

/* A rule between the bar's groups, drawn by the group that needs it. */
.admin-chrome-rule {
    align-self: center;
    height: 1.25rem;
    width: 1px;
    margin-inline: 0.6rem;
    background-color: var(--kendo-color-primary-on-subtle);
    opacity: 0.3;
}

.admin-chrome .k-appbar-section {
    align-items: center;
}

.admin-endpoint-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* The working area ends inside the window with a gutter along its sides and bottom, so the navigator and the page
   read as cards on the page's ground (as Pondhawk Watch's panels do). Only the page inside its card scrolls. */
.admin-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 1rem 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* The ground the cards sit on. In light, Kendo's page and its panels are the same white, so the cards would
   dissolve into it: drop the page a little below them. Dark already separates them. The token rather than a body
   background, because the theme itself paints with it. */
:root:not(.admin-dark) {
    --kendo-color-app-surface: oklch(93.5% 0 0deg);
}

/* A feature fills what is left of the window: its navigator and its page, a gutter apart. */
.admin-feature {
    flex: 1;
    min-height: 0;
    gap: 0.6rem;
    background-color: transparent;
}

.admin-feature.k-drawer-container {
    min-height: 0;
    align-items: stretch;
}

/* The page's card runs the full height beside the navigator, whatever the page holds. */
.admin-feature .k-drawer-content {
    min-height: 0;
    align-self: stretch;
    height: auto;
}

.admin-feature .k-drawer,
.admin-feature .k-drawer-content {
    border: 1px solid var(--kendo-color-border);
    border-radius: 6px;
    background-color: var(--kendo-color-surface-alt);
    overflow: hidden;
}

/* A page outside any connection has no navigator: its card alone, at a width to read. */
.admin-feature-alone {
    display: flex;
}

.admin-card {
    flex: 0 1 60rem;
    min-height: 0;
    border: 1px solid var(--kendo-color-border);
    border-radius: 6px;
    background-color: var(--kendo-color-surface-alt);
    overflow: hidden;
}

/* ── The connection at a glance, above every page. ── */

.admin-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kendo-color-border);
    border-inline-start: 3px solid var(--kendo-color-primary);
    border-radius: 6px;
    background-color: var(--kendo-color-app-surface);
}

.admin-summary-endpoint {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-inline-end: auto;
}

.admin-summary-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.admin-summary-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
}

.admin-summary-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-summary-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each number ends where its label ends: they stand at the right of the bar, and read as a column of figures. */
.admin-summary-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: inherit;
    text-decoration: none;
}

.admin-summary-number {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.admin-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* The spacing after the last letter is not part of the word: without this the number would overhang it. */
    margin-inline-end: -0.1em;
    color: var(--kendo-color-subtle);
}

.admin-summary-count:hover .admin-summary-number,
.admin-summary-count:focus-visible .admin-summary-number {
    color: var(--kendo-color-primary);
    text-decoration: underline;
}

/* A page is as tall as the space it is given and no taller: its head stays, and what it holds scrolls beneath. */
.admin-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.admin-page-head {
    flex: none;
    padding: 1rem 1.25rem 0;
}

/* The padding is inside the part that scrolls, so a field's focus ring at its edge is not cut off. */
.admin-page-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 1.25rem 1.25rem;
}

/* A page whose list fills it: the list takes what is left of the page, and the page body does not scroll. */
.admin-page-body:has(> .admin-fill) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-fill {
    flex: 1;
    min-height: 0;
}

.admin-page-title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.admin-page-about {
    margin: 0 0 1rem;
    color: var(--kendo-color-subtle);
}

.admin-hint {
    color: var(--kendo-color-subtle);
    font-size: 0.85rem;
}

/* Yes and no in a grid: a word, in the color that says which. */
.admin-yes {
    color: var(--kendo-color-success);
}

.admin-no {
    color: var(--kendo-color-subtle);
}

.admin-alert {
    color: var(--kendo-color-error);
}

/* What became of something the page was asked to do, said above its form: plain when it went well, in the alert's
   color (with .admin-alert) when it did not. */
.admin-outcome {
    max-width: 44rem;
    margin-block: 0 1.25rem;
    overflow-wrap: anywhere;
}

/* The buttons at the foot of a window that holds a form: what is done beside the form on the left, closing and
   saving on the right. */
.admin-window-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.admin-window-buttons-gap {
    flex: 1 1 auto;
}

/* The page shown for an address that names nothing. */
.admin-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    text-align: center;
    padding: 2rem;
}

@media (max-width: 640px) {
    .admin-title,
    /* A rule between the bar's groups, drawn by the group that needs it. */
.admin-chrome-rule {
    align-self: center;
    height: 1.25rem;
    width: 1px;
    margin-inline: 0.6rem;
    background-color: var(--kendo-color-primary-on-subtle);
    opacity: 0.3;
}

.admin-chrome .k-appbar-section {
    align-items: center;
}

.admin-endpoint-label {
        display: none;
    }

    .admin-swatches {
        grid-template-columns: repeat(2, minmax(7rem, 1fr));
    }

    .admin-page-head {
        padding: 0.75rem 0.75rem 0;
    }

    .admin-page-body {
        padding: 0.25rem 0.75rem 0.75rem;
    }
}

/* ── Drilling down: a list's row opens a page of its own, and the trail at the top is the way back. ── */

.admin-trail {
    margin: -0.25rem 0 0.5rem -0.5rem;
    background-color: transparent;
}

/* A row that opens says so. */
.admin-drillable .k-master-row {
    cursor: pointer;
}

.admin-drill {
    color: var(--kendo-color-primary);
    font-weight: 600;
    text-decoration: none;
}

.admin-drill:hover,
.admin-drill:focus-visible {
    text-decoration: underline;
}

.admin-form .k-form-buttons {
    flex-wrap: wrap;
}

/* ── Where the client starts: the connection to make. ── */

.admin-start {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem;
    text-align: center;
}

.admin-start-mark {
    width: 6rem;
    height: auto;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

.admin-start-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.admin-start-title:focus {
    outline: none;
}

.admin-start-hint {
    margin: 0 0 0.75rem;
    color: var(--kendo-color-subtle);
}

/* ── A section under a form: what is done at once (signing in), and deleting, each set apart by a rule.
      Deleting is asked for here and confirmed in a popup. ── */

.admin-section,
.admin-danger {
    max-width: 34rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kendo-color-border);
}

.admin-section-title,
.admin-danger-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.admin-section-about,
.admin-danger-about {
    margin: 0 0 0.75rem;
    color: var(--kendo-color-subtle);
}

.admin-section .admin-facts {
    margin-top: 0.75rem;
}

/* ── The confirmation popup: a short question, and the particulars as points under it. ── */

.admin-confirm-question {
    margin: 0;
    font-weight: 600;
}

.admin-confirm-points {
    margin: 0.6rem 0 0;
    padding-inline-start: 1.25rem;
    color: var(--kendo-color-subtle);
}

.admin-confirm-points li + li {
    margin-top: 0.25rem;
}

/* ── The fault window: what went wrong, and the details as text to select or copy. ── */

.admin-fault-summary {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.admin-fault-details {
    max-height: 18rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    background: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
    font-family: var(--kendo-font-family-monospace, monospace);
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}

/* ── A page's toolbar: everything that can be done on the page, always first under the connection and above the way
      back. What adds or saves is on the left; what narrows a list, or deletes, is on the right. ── */

/* The commands are closed off from what they act on by a hairline in the theme's own border colour — the same
   line that sets a form's first field apart — with room on both sides of it. */
.admin-tools {
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--kendo-color-border-alt);
}

/* A page's commands: buttons that say what they do, in a row with nothing drawn behind it. What saves is first;
   what cannot be undone is last, apart from the rest. */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A list's commands are on its grid: what adds to it on the left, what narrows it on the right. */
.k-grid .k-grid-toolbar {
    gap: 0.5rem;
}

/* A form is submitted by Enter through this, which is never seen: the buttons are in the toolbar. */
.admin-implicit-submit {
    display: none;
}

/* A list's toolbar: what adds to the list on the left, what narrows it on the right. */
.admin-toolbar-space {
    flex: 1;
}

/* ── A form's fields: one column, narrow enough to read down. ── */

.admin-fields {
    max-width: 34rem;
}

.admin-fields .k-form-field + .k-form-field {
    margin-top: 1rem;
}

.admin-form-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* What is so, said plainly: a list of facts about the thing, each with what can be done about it. */
.admin-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
}

.admin-facts dt {
    font-weight: 600;
}

.admin-facts dd {
    margin: 0;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Forms: a field's label stands out from what is typed under it and from the hint beneath. ── */

.admin-form .k-form-label,
.admin-form .k-label {
    font-weight: 600;
}

/* A field is three things — its label, its box, its hint — and they read as one: close to each other, and well
   apart from the next field. */
.admin-form .k-form-field,
.admin-fields .k-form-field + .k-form-field {
    margin-block: 0 1.75rem;
}

.admin-form .k-form-label {
    margin-block-end: 0.3rem;
}

.admin-form .k-form-hint {
    margin-block-start: 0.3rem;
    color: var(--kendo-color-subtle);
    font-style: normal;
}

/* Two short fields that belong together share a row; a hint for both runs under them. On a narrow screen they stack. */
.admin-form .admin-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    margin-block: 0 1.75rem;
}

.admin-form .admin-field-row .k-form-field {
    margin-block: 0;
}

.admin-form .admin-field-row-hint {
    grid-column: 1 / -1;
}

@media (max-width: 30rem) {
    .admin-form .admin-field-row {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
}

/* The switch that turns the whole thing on or off stands first, set off from the fields below it by a rule. */
.admin-form .k-form-field.admin-field-apart {
    margin-block-end: 1.5rem;
    padding-block-end: 1.25rem;
    border-bottom: 1px solid var(--kendo-color-border-alt);
}

/* The themes draw a box's border at 8% of black, which all but disappears. Here it is drawn from the text color,
   so it is plain to see in every theme, light or dark; the theme's own focus ring is untouched. */
.admin-form .k-input,
.admin-form .k-picker {
    border-color: color-mix(in srgb, var(--kendo-color-on-app-surface) 38%, transparent);
}

.admin-form .k-input:hover,
.admin-form .k-picker:hover {
    border-color: color-mix(in srgb, var(--kendo-color-on-app-surface) 60%, transparent);
}

.admin-form .k-input.k-focus,
.admin-form .k-input:focus-within,
.admin-form .k-picker.k-focus,
.admin-form .k-picker:focus-within {
    border-color: var(--kendo-color-primary);
}

/* A checkbox or radio button not yet chosen is a box too, and as faint in the themes. */
.admin-form .k-checkbox:not(:checked),
.admin-form .k-radio:not(:checked) {
    border-color: color-mix(in srgb, var(--kendo-color-on-app-surface) 38%, transparent);
}

.admin-form .k-checkbox:not(:checked):hover,
.admin-form .k-radio:not(:checked):hover {
    border-color: color-mix(in srgb, var(--kendo-color-on-app-surface) 60%, transparent);
}

/* A dropdown in a form is a box like the others, not a button. */
.admin-form .k-picker,
.admin-form .k-picker:hover,
.admin-form .k-picker.k-hover {
    background-color: var(--kendo-color-surface-alt);
    background-image: none;
    color: var(--kendo-color-on-app-surface);
}


/* ── A few yes-or-no answers under one label, each on its own line. ── */

.admin-checks {
    display: grid;
    gap: 0.5rem;
}

.admin-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The confirmation toast ("Saved the role …"), sized from the width of the window rather than in fixed pixels, so it
   takes about the same share of a small laptop screen and of a large high-resolution monitor. The floor keeps it
   readable in a narrow window, the ceiling keeps it from growing without end. The box and its padding grow faster
   than the text: it is the size of the box that gets it noticed, and text grown at the same rate reads as shouting. */
.k-notification-group {
    padding: clamp(0.75rem, 1.2vw, 2.5rem);
    gap: 0.5em;
}

.k-notification {
    font-size: clamp(0.9rem, 0.65vw, 1.35rem);
    line-height: 1.35;
    min-width: clamp(14.5rem, 19.8vw, 43rem);
    max-width: min(36vw, 54rem);
    padding: clamp(0.65rem, 0.85vw, 1.8rem) clamp(0.9rem, 1.03vw, 2rem);
    gap: 0.75em;
    border-radius: 0.4em;
    box-shadow: 0 0.2em 0.9em rgba(0, 0, 0, 0.28);
}

.k-notification .k-icon,
.k-notification .k-svg-icon,
.k-notification .k-svg-icon > svg {
    width: 1.4em;
    height: 1.4em;
}

@media (max-width: 40rem) {
    .k-notification {
        max-width: calc(100vw - 1.5rem);
    }
}

/* ── What only this client has: the endpoint's own document, a group's members, a user's groups. ── */

/* A document as the endpoint holds it: text to read, select and copy, scrolling inside its box when it is long. */
.admin-document {
    max-height: 24rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: 6px;
    background-color: var(--kendo-color-app-surface);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    user-select: text;
}

/* The picker that adds a member, above the members it adds to. */
.admin-member-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* A short list of links, one to a line: the groups a user is in. */
.admin-links {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.admin-links li + li {
    margin-top: 0.25rem;
}

/* In its window the document has the window's height to use, not a section's. */
.admin-document-window .admin-document {
    max-height: 60vh;
}

/* A field with the one thing done from it beside it: the issuer and its Discover button. */
.admin-field-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-field-action > .k-textbox {
    flex: 1 1 auto;
}

/* The connection wizard: room for a form under its stepper, and a summary to read before connecting. */
.admin-connect-window .k-window-content {
    padding-block: 1rem;
}

.admin-connect-wizard .k-wizard-content {
    min-height: 18rem;
}

.admin-connect-wizard .admin-fields {
    max-width: none;
}

/* The window stays inside the browser's height: a long step scrolls under the stepper, its buttons always in view. */
.admin-connect-wizard .k-wizard-content {
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
}

/* A choice that goes with going ahead, under the question: its checkbox and label on one line. */
.admin-confirm-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* An extension's URN under its name: what it is called in the protocol, quiet and selectable. */
.admin-extension-urn {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    user-select: text;
}