/* TrueDEM Portal — the portal's own additions, loaded last. Not part of the design system: what the
   design bundle draws with inline styles in gallery.html (the page header row, card text) gets a
   class here, so no markup needs a style attribute; candidates to move into truedem.css. */

/* ============================================================ page header row (PageHeader.md) */

.td-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--td-space-4);
    margin-bottom: var(--td-space-6);
}

.td-page-header .td-page-subtitle { margin-bottom: 0; }

.td-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--td-space-3);
}

/* ============================================================ card content (Card.md) */

.td-card-heading { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }
.td-card-text { margin: 0; color: var(--td-ink-soft); line-height: 1.5; max-width: 52ch; }


.td-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ============================================================ app bar */

.user-menu-backdrop { position: fixed; inset: 0; z-index: 1000; }
.user-menu-note { margin: 0; color: var(--td-ink-faint); font-size: .85rem; }
.user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) { .user-menu-name { display: none; } }

/* ============================================================ boot splash (static host page)
   Blazor publishes its download progress as --blazor-load-percentage on <html> (set through the
   CSSOM, so it needs no style-src exception): the bar follows real progress, no figure is shown. */

#app > .boot-splash .boot-bar-fill { width: var(--blazor-load-percentage, 0%); transition: width .2s ease; }

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    padding: var(--td-space-3) var(--td-space-5);
    background: var(--td-surface);
    border-top: 2px solid var(--td-status-outage);
    color: var(--td-ink);
    box-shadow: var(--td-shadow-lift);
}

#blazor-error-ui .reload { margin-left: var(--td-space-3); }

/* ============================================================ chart spike */

.spike-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--td-space-4);
    margin-bottom: var(--td-space-4);
}

.spike-label { color: var(--td-ink-soft); font-size: .85rem; }
.spike-chart-host { min-height: 380px; }
.fluent-card.spike-table-card { padding: 0; overflow-x: auto; }

.spike-table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.spike-table th, .spike-table td { padding: var(--td-space-2) var(--td-space-4); text-align: left; border-bottom: 1px solid var(--td-border); }
.spike-table th { color: var(--td-ink-faint); font-weight: 600; }

/* ============================================================ gallery (Pages/Gallery)
   The chrome of src/WebApp/design/gallery.html, and one class for each inline style it carried. */

.g-toc { display: flex; flex-wrap: wrap; gap: var(--td-space-1) var(--td-space-3); margin-bottom: var(--td-space-8); font-size: .875rem; }
.g-toc a { color: var(--td-ink-soft); text-decoration: none; }
.g-toc a:hover { color: var(--td-primary); }

.g-section { margin-bottom: var(--td-space-10); scroll-margin-top: var(--td-space-4); }
.g-head { display: flex; align-items: baseline; gap: var(--td-space-3); }
.g-head h2 { margin: 0; font-size: 1.35rem; }
.g-group { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--td-ink-faint); }
.g-summary { margin: var(--td-space-1) 0 var(--td-space-3); color: var(--td-ink-soft); max-width: 70ch; }

.g-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    background: var(--td-surface-alt);
    color: var(--td-ink);
}

.g-frame .pv { padding: 16px; }
.g-frame .app-bar, .g-frame .pub-header { position: relative; }
.g-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--td-space-4); }

/* A frame may carry the other theme than the page: the design bundle whitens the logo under any dark
   ancestor, so a light frame inside a dark page restores it. */
[data-theme="light"] .app-logo img,
[data-theme="light"] .pub-logo img,
[data-theme="light"] .boot-logo { filter: none; }

.g-mini.app-shell, .g-mini.pub-shell, .g-mini .app-content { min-height: 0; }
.g-placeholder { height: 64px; }
.g-flush { margin: 0; }
.g-flush-first .dash-category { margin-top: 0; }
.g-hero { padding: 3rem 2rem 3.25rem; }
.g-hero-card-metric { left: 3%; bottom: 14%; }
.g-hero-card-live { right: 3%; top: 12%; animation-delay: -3.5s; }
.g-hero-live { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.g-page-tight { padding: 20px 24px; }
.g-page-tight .td-page-header { margin-bottom: 0; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.g-stack { display: flex; flex-direction: column; gap: 14px; }
.g-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.g-hero-band { padding: 14px; border-radius: var(--td-radius); background: var(--td-gradient-hero); }
.g-pv-menu { display: flex; justify-content: flex-end; padding-right: 24px; min-height: 250px; }
.g-narrow { max-width: 420px; }
.g-badges { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: .9rem; }
.g-caption { font-size: .75rem; color: var(--td-ink-faint); }
.g-boot { min-height: 230px; }
.g-boot-fill { width: 62%; }
.g-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--td-space-4); }
.g-grid { background: var(--td-surface); border-radius: var(--td-radius); }

/* My profile and Users and roles (phase 0): facts, tables and forms on the tokens, no style attribute. */
.td-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--td-space-4); margin-bottom: var(--td-space-4); }
.td-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.td-facts dt { color: var(--td-ink-soft); font-weight: 600; }
.td-facts dd { margin: 0; overflow-wrap: anywhere; }
.td-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; }
.td-table { width: 100%; border-collapse: collapse; }
.td-table th, .td-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--td-border); text-align: left; vertical-align: top; }
.td-table th { color: var(--td-ink-soft); font-weight: 600; }
.td-list { margin: 0; padding-left: 1.1rem; }
.td-note { margin: .5rem 0 0; color: var(--td-ink-soft); font-size: .85rem; }
.td-form { display: flex; flex-wrap: wrap; gap: var(--td-space-3, 12px); align-items: flex-end; }
.td-role-editor { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.td-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: var(--td-space-4); }
/* Users and roles: list first, the details panel beside it on wide screens and above it on narrow ones. */
.users-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--td-space-3, 12px);
    margin-bottom: var(--td-space-4); }
/* The title takes the room it needs; the lock pill and Add stay together at the right, below the title only when narrow. */
.users-heading > .td-page-header { flex: 1 1 22rem; min-width: 0; margin-bottom: 0; }
/* The organisation-wide User (D33): a switch with what it means, under the heading. */
.users-everyone { margin: 0 0 var(--td-space-4); }
.users-everyone .td-note { margin: .15rem 0 0 1.75rem; max-width: 70ch; }
.no-access-contact a { color: var(--td-primary); }
.no-access-actions { justify-content: center; }
.users-segment { display: inline-flex; flex: none; border: 1px solid var(--td-border); border-radius: var(--td-radius-pill); overflow: hidden; }
.users-segment-option { padding: .35rem .9rem; border: 0; background: transparent; color: var(--td-ink-soft); font: inherit; cursor: pointer; }
.users-segment-option + .users-segment-option { border-left: 1px solid var(--td-border); }
.users-segment-option[aria-pressed="true"] { background: var(--td-primary-soft); color: var(--td-primary); font-weight: 600; }
.users-segment-option:focus-visible { outline: 2px solid var(--td-primary); outline-offset: -2px; }
.users-add-panel .users-segment { margin-bottom: var(--td-space-3, 12px); }
.users-add-manual { margin-top: var(--td-space-3, 12px); }
.users-add-manual > summary { cursor: pointer; color: var(--td-primary); }
.users-add-manual[open] > summary { margin-bottom: .5rem; }
/* Role tiles: each counts its role in the tab and filters it; the pressed one is the filter. */
/* Role tiles under the tabs: they count and filter the selected tab. */
.users-tiles-caption { margin: 0 0 .4rem; color: var(--td-ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.users-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: var(--td-space-4); }
.users-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem .9rem; border: 1px solid transparent; border-radius: var(--td-radius); background: var(--td-surface); box-shadow: var(--td-shadow); color: var(--td-ink); font: inherit; text-align: left; cursor: pointer; }
.users-tile:hover { border-color: var(--td-border); }
.users-tile[aria-pressed="true"] { border-color: var(--td-primary); background: var(--td-primary-soft); }
.users-tile:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }
.users-tile-count { font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.users-tile-label { color: var(--td-ink-soft); font-size: .85rem; }
/* Tabs (People, Groups, Disabled) with their counts, the search at the end of the bar. */
.users-tabs-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: var(--td-space-3, 12px); border-bottom: 1px solid var(--td-border); }
.users-tabs { display: flex; gap: 1.25rem; }
.users-tab { padding: .45rem .1rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--td-ink-soft); font: inherit; cursor: pointer; }
.users-tab[aria-selected="true"] { border-bottom-color: var(--td-primary); color: var(--td-ink); font-weight: 600; }
.users-tab:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }
.users-tab-count { margin-left: .25rem; color: var(--td-ink-soft); font-weight: 400; font-size: .85rem; }
.users-search { flex: 0 1 18rem; padding-bottom: .4rem; }
.users-search .users-search-input { max-width: none; width: 100%; }
.users-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--td-space-4); align-items: start; }
.users-list { min-width: 0; overflow-x: auto; }
.users-table td { vertical-align: middle; }
/* A disabled principal stays readable but recedes; its Disabled tag says why. */
.users-row.is-disabled > td { color: var(--td-ink-soft); }
.users-row.is-selected > td { background: var(--td-primary-soft); }
.users-open { display: flex; align-items: center; gap: .6rem; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.users-open:hover .users-name, .users-open:focus-visible .users-name { color: var(--td-primary); text-decoration: underline; }
.users-open:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }
.users-name { font-weight: 600; color: var(--td-ink); }
.users-secondary { margin: 0; font-size: .8rem; }
.users-tags { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.users-tags .dev-tag { margin-left: 0; }
.users-tags .td-note { margin: 0; }
/* Nothing in the panel may widen it beyond its column: long names, ids and the scope editor wrap or shrink. */
.users-details { min-width: 0; max-width: 100%; overflow-wrap: anywhere; overflow-x: clip; }
.users-details :where(input, select, textarea, table, fluent-text-input, fluent-select, fluent-combobox, .scope-editor, .td-actions) { max-width: 100%; }
.users-details-header { display: flex; align-items: center; gap: .75rem; }
.profile-avatar.users-avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.users-details-identity { flex: 1; min-width: 0; }
.users-details-title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--td-ink); overflow-wrap: anywhere; }
.users-details-identity .td-note { margin: 0; overflow-wrap: anywhere; }
.users-close { align-self: flex-start; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--td-ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.users-close:hover, .users-close:focus-visible { background: var(--td-primary-soft); color: var(--td-ink); }
.users-details-facts { margin-top: var(--td-space-3, 12px); font-size: .85rem; }
.users-details-section { margin-top: var(--td-space-4); padding-top: var(--td-space-3, 12px); border-top: 1px solid var(--td-border); }
.users-details-heading { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--td-ink); }
.users-role-options { display: flex; flex-direction: column; gap: .5rem; }
.users-details-section .td-actions { margin-top: var(--td-space-3, 12px); }
.users-details-section > .td-note { margin-top: 0; }
/* The scope editor inside the panel: the panel is its frame. */
.users-details .td-card.scope-editor { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.users-details .scope-editor .td-card-heading { display: none; }
.users-details .scope-input { max-width: none; }
.users-confirm-delete { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.users-confirm-delete .td-note { margin: 0 0 .25rem; flex-basis: 100%; }
@media (min-width: 1100px) {
    .users-layout.has-details { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); }
    /* The panel grows with its content and the page scrolls: no scroll box of its own (owner, 2026-11-04). */
}
@media (max-width: 1099px) {
    .users-details { order: -1; }
}
@media (max-width: 700px) {
    .users-col-scope { display: none; }
    .users-search { flex-basis: 100%; }
}

/* Users and roles: a Manager's scope — one fieldset per dimension, chosen values as chips, a suggestion-backed input. */
.td-card.scope-editor { margin-top: var(--td-space-4); }
.scope-dimension { margin: var(--td-space-4) 0 0; padding: 0; border: 0; }
.scope-dimension legend { padding: 0; margin-bottom: .4rem; color: var(--td-ink); font-weight: 600; }
.scope-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.scope-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .25rem .2rem .6rem; border-radius: var(--td-radius-pill); background: var(--td-primary-soft); color: var(--td-ink); font-size: .85rem; }
.scope-chip-count { color: var(--td-ink-soft); font-size: .78rem; }
.scope-chip-remove { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--td-ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; }
.scope-chip-remove:hover, .scope-chip-remove:focus-visible { background: var(--td-surface); color: var(--td-ink); }
.scope-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.scope-input { flex: 1 1 16rem; max-width: 26rem; min-height: 2.25rem; padding: .35rem .65rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-sm); background: var(--td-surface); color: var(--td-ink); font: inherit; }
.scope-input:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 1px; }
.scope-matches { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.scope-match .td-note { margin: 0 0 0 .4rem; }
/* The Entra directory picker (Users and roles, a scope's named people): a search, its matches, the consent offer. */
.directory-picker { margin: .5rem 0 var(--td-space-3, 12px); }
.directory-matches { display: flex; flex-direction: column; gap: .15rem; margin: .5rem 0 0; padding: 0; list-style: none; max-width: 40rem; }
.directory-match { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--td-border); }
.directory-match-name { font-weight: 600; color: var(--td-ink); }
.directory-match .td-note, .directory-known { margin: 0; }
.directory-match .directory-pick, .directory-known { margin-left: auto; }
.directory-consent { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; max-width: 40rem; }
.directory-consent p { margin: 0; flex-basis: 100%; }
.users-register-manual { margin-top: var(--td-space-3, 12px); }
.scope-coverage { margin: var(--td-space-4) 0 0; font-weight: 600; color: var(--td-ink); }
.user-menu-link { display: block; padding: .35rem 0; color: var(--td-primary); }
.user-menu-signout .user-menu-link, .user-menu-signout .user-menu-note { padding: .35rem .5rem; }

/* Home: the caller's roles as chips. */
.home-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }

/* The signed-in shell fills the window exactly and never scrolls as a page: the design system's .app-content
   minimum (100vh minus the app bar) leaves the footer out and pushed every page 34px past the window. The app
   bar and footer stay put; the drawer and the content area scroll on their own when they outgrow it. */
.app-shell { height: 100dvh; min-height: 0; overflow: hidden; }
.app-body { overflow: hidden; }
.app-content { min-height: 0; overflow-y: auto; }
.td-drawer { overflow-y: auto; display: flex; flex-direction: column; }
/* The drawer's two navigations: the data pages at the top, the account and instance management pinned to the bottom
   (owner, 2026-11-04); on a short window they follow on and the drawer scrolls. */
.td-drawer-navs { display: flex; flex-direction: column; flex: 1 0 auto; }
.td-drawer-navs > .fluent-nav.td-drawer-items { flex: 0 0 auto; height: auto; } /* Fluent grows every nav (flex: 1): they split the drawer */
/* Instance management, the privileged area, calmly (owner, 2026-11-04): a raised neutral panel anchored at the bottom,
   the shield in the brand colour, a padlock for the lock on its changes. No tint: the shield and the words say it. */
.td-drawer-navs > .td-drawer-admin { margin: auto var(--td-space-2) var(--td-space-2); }
.td-drawer-admin { padding: .3rem 0 .35rem; border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-surface);
    box-shadow: var(--td-shadow); }
.td-drawer-admin .fluent-nav.td-drawer-items { padding: 0; background: transparent; }
.drawer-admin-header { display: flex; align-items: center; gap: .5rem; padding: .3rem var(--td-space-3) .25rem; color: var(--td-ink-soft);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.drawer-admin-header > svg { flex: none; width: 18px; height: 18px; fill: var(--td-primary); }
.drawer-lock { display: inline-flex; margin-left: auto; }
.drawer-lock svg { width: 16px; height: 16px; }
.drawer-lock.is-unlocked svg { fill: var(--td-primary); }
.drawer-lock.is-locked svg { fill: var(--td-ink-soft); }
.td-drawer.is-mini .td-drawer-navs > .td-drawer-admin { margin-left: 4px; margin-right: 4px; }
.td-drawer.is-mini .drawer-admin-header { flex-direction: column; gap: .2rem; padding-left: 0; padding-right: 0; }
.td-drawer.is-mini .drawer-lock { margin-left: 0; }
/* The breadcrumb line above an instance-management page's title. */
.im-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .35rem; padding: 0; list-style: none;
    color: var(--td-ink-soft); font-size: .8rem; }
.im-crumb li { display: inline-flex; align-items: center; gap: .3rem; }
.im-crumb li + li::before { content: "\203A"; margin-right: .1rem; color: var(--td-ink-soft); }
.im-crumb svg { flex: none; width: 14px; height: 14px; fill: var(--td-primary); }
/* The lock on changes, in the page header: blue and counting while unlocked, neutral with Unlock when locked. */
.users-heading-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; margin-top: .25rem; }
.lock-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid transparent; border-radius: var(--td-radius-pill);
    font: inherit; font-size: .85rem; line-height: 1.3; white-space: nowrap; }
.lock-pill svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.lock-pill.is-unlocked { background: var(--td-primary-soft); color: var(--td-primary); }
.lock-pill-clock { font-variant-numeric: tabular-nums; }
.lock-pill.is-locked { background: transparent; border-color: var(--td-border); color: var(--td-ink-soft); cursor: pointer; }
.lock-pill.is-locked:hover { border-color: var(--td-ink-soft); color: var(--td-ink); }
.lock-pill.is-locked:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }

/* My profile: the header card — initials, name, sign-in name, organisation and the role chips. */
.td-card.profile-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-4); margin-bottom: var(--td-space-4); }
.profile-avatar { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--td-primary-soft); color: var(--td-primary); font-size: 1.25rem; font-weight: 700; }
.profile-identity { flex: 1; min-width: 12rem; }
.profile-name { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--td-ink); }
.profile-upn, .profile-organisation { margin: .15rem 0 0; color: var(--td-ink-soft); overflow-wrap: anywhere; }
.profile-chips { flex: 0 1 auto; }
/* My profile's body (2026-11-04): two columns, one below 1000 px; each card a size container whose facts sit side by side
   while it is wide enough and stack label over value when it is not, never breaking a value letter by letter. */
.profile-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--td-space-4); align-items: start; margin-bottom: var(--td-space-4); }
.profile-column { display: grid; gap: var(--td-space-4); min-width: 0; }
.profile-card { container-type: inline-size; min-width: 0; }
.profile-facts { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .55rem 1rem; margin: var(--td-space-4) 0 0; }
.profile-facts dt { color: var(--td-ink-soft); font-weight: 600; }
.profile-facts dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.profile-facts .td-mono { overflow-wrap: anywhere; }
/* The identifiers support asks for, along the bottom of the first tile; each wraps on its own line when narrow. */
.profile-ids { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 0; padding-top: var(--td-space-3); border-top: 1px solid var(--td-border); }
.profile-id { min-width: 0; }
.profile-id dt { color: var(--td-ink-soft); font-size: .8rem; font-weight: 600; }
.profile-id dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: .1rem 0 0; min-width: 0; }
.profile-id .td-mono { overflow-wrap: anywhere; }
.profile-session-note { margin: var(--td-space-4) 0 0; }
.profile-features-intro { max-width: none; }
.profile-features { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.profile-features li { padding: .2rem .65rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-pill); background: var(--td-surface-alt); font-size: .85rem; color: var(--td-ink); }
.profile-table-scroll { overflow-x: auto; }
@container (max-width: 28rem) {
    .profile-facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .profile-facts dd { margin-bottom: .55rem; }
}
@media (max-width: 1000px) {
    .profile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ public landing (§5.13, D28) */

.pub-footer a.pub-footer-brand { margin-left: 0; font-weight: 600; }
.pub-footer-version { font-variant-numeric: tabular-nums; }

.landing { max-width: 1200px; margin: 0 auto; padding: var(--td-space-8) var(--td-space-5); }
.landing-section + .landing-section { margin-top: var(--td-space-8); }
.landing-section-head { margin-bottom: var(--td-space-5); text-align: center; }
.landing-heading { display: inline-flex; align-items: center; gap: var(--td-space-2); margin: 0 0 var(--td-space-2); font-size: 1.6rem; font-weight: 800; color: var(--td-ink); }
.landing-lede { margin: 0; color: var(--td-ink-soft); }

/* How it works as a timeline: one icon per step on a rail that joins them, the card under each icon; on a phone
   the rail runs down the left edge. */
.how-it-works { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--td-space-4); margin: 0; padding: 0; list-style: none; }
.how-it-works::before { content: ""; position: absolute; top: 1.5rem; left: 12.5%; right: 12.5%; height: 2px; background: var(--td-gradient-bar); opacity: .6; }
.how-it-works-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--td-space-3); }
.step-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--td-primary); border-radius: 50%; background: var(--td-surface); color: var(--td-primary); }
.step-icon svg { width: 24px; height: 24px; fill: currentColor; }
.step-body { flex: 1; width: 100%; text-align: center; }
.step-body .td-card-text { margin: 0 auto; }
@media (max-width: 900px) {
    .how-it-works { grid-template-columns: 1fr; gap: var(--td-space-3); }
    .how-it-works::before { top: 1.5rem; bottom: 1.5rem; left: 1.5rem; right: auto; width: 2px; height: auto; }
    .how-it-works-step { flex-direction: row; align-items: flex-start; }
    .step-body { text-align: left; }
    .step-body .td-card-text { margin: 0; }
}

/* The example badge (D29): the section says its data is illustrative, in the heading itself. */
.example-badge { padding: .15rem .5rem; border-radius: var(--td-radius-sm); background: var(--td-status-advisory); color: #1b1b1b; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.incident-map { padding: var(--td-space-4); }
.landing-more { margin: var(--td-space-4) 0 0; text-align: center; }
.landing-more a { color: var(--td-primary); font-weight: 600; text-decoration: none; }
.landing-more a:hover, .landing-more a:focus-visible { text-decoration: underline; }
.incident-map-svg { display: block; width: 100%; height: auto; }
.map-land { fill: none; stroke: var(--td-ink-faint); stroke-opacity: .45; stroke-width: 1.25; stroke-linecap: round; }
.map-point { cursor: pointer; outline: none; }
.map-point .map-core { stroke: var(--td-surface); stroke-width: .6; }
.map-point .map-pulse { opacity: .25; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.6s ease-out infinite; }
.map-point.is-advisory .map-core, .map-point.is-advisory .map-pulse { fill: var(--td-status-advisory); }
.map-point.is-degraded .map-core, .map-point.is-degraded .map-pulse { fill: var(--td-status-degraded); }
.map-point.is-outage .map-core, .map-point.is-outage .map-pulse { fill: var(--td-status-outage); }
.map-point.is-selected .map-core, .map-point:focus-visible .map-core { stroke: var(--td-ink); stroke-width: 1; }
@keyframes map-pulse { 0% { transform: scale(.55); opacity: .45; } 100% { transform: scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-point .map-pulse { animation: none; } }


/* The map's detail panel: the selected point's region, status and incidents, beside the point (only on a click). */
.incident-map-canvas { position: relative; }
.map-detail { position: absolute; z-index: 2; box-sizing: border-box; width: 340px; max-width: 80%; padding: .85rem var(--td-space-4); border: 1px solid var(--td-border); border-radius: var(--td-radius-sm); background: var(--td-surface); box-shadow: 0 12px 32px rgba(10, 37, 64, .22); transform: translate(16px, -50%); animation: map-detail-in 120ms ease-out; }
.map-detail.is-left { transform: translate(calc(-100% - 16px), -50%); }
@keyframes map-detail-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map-detail { animation: none; } }
.map-detail-head { display: flex; align-items: flex-start; gap: .5rem; padding-bottom: .55rem; border-bottom: 1px solid var(--td-border); }
.map-detail-title { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.map-detail-region { font-weight: 700; color: var(--td-ink); }
.map-detail-count { font-size: .78rem; color: var(--td-ink-faint); }
.map-detail-close { flex: none; width: 1.6rem; height: 1.6rem; margin: -.2rem -.4rem 0 0; padding: 0; border: none; border-radius: 50%; background: none; color: var(--td-ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.map-detail-close:hover, .map-detail-close:focus-visible { background: var(--td-surface-alt); color: var(--td-ink); }
.map-detail-list { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.map-detail-list li { display: flex; align-items: flex-start; gap: .55rem; }
.map-detail-list .td-dot { width: 8px; height: 8px; margin-top: .4rem; }
.map-detail-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.map-detail-service { font-size: .85rem; font-weight: 700; color: var(--td-ink); }
.map-detail-since { font-weight: 400; color: var(--td-ink-faint); }
.map-detail-text { font-size: .85rem; line-height: 1.4; color: var(--td-ink-soft); }
/* The panel's position in 2 % steps (ExampleIncidentMap.PanelClass): classes, not a style attribute. */
.tip-x-0 { left: 0%; } .tip-x-1 { left: 2%; } .tip-x-2 { left: 4%; } .tip-x-3 { left: 6%; } .tip-x-4 { left: 8%; } .tip-x-5 { left: 10%; } .tip-x-6 { left: 12%; } .tip-x-7 { left: 14%; } .tip-x-8 { left: 16%; } .tip-x-9 { left: 18%; } .tip-x-10 { left: 20%; } .tip-x-11 { left: 22%; } .tip-x-12 { left: 24%; } .tip-x-13 { left: 26%; } .tip-x-14 { left: 28%; } .tip-x-15 { left: 30%; } .tip-x-16 { left: 32%; } .tip-x-17 { left: 34%; } .tip-x-18 { left: 36%; } .tip-x-19 { left: 38%; } .tip-x-20 { left: 40%; } .tip-x-21 { left: 42%; } .tip-x-22 { left: 44%; } .tip-x-23 { left: 46%; } .tip-x-24 { left: 48%; } .tip-x-25 { left: 50%; }
.tip-x-26 { left: 52%; } .tip-x-27 { left: 54%; } .tip-x-28 { left: 56%; } .tip-x-29 { left: 58%; } .tip-x-30 { left: 60%; } .tip-x-31 { left: 62%; } .tip-x-32 { left: 64%; } .tip-x-33 { left: 66%; } .tip-x-34 { left: 68%; } .tip-x-35 { left: 70%; } .tip-x-36 { left: 72%; } .tip-x-37 { left: 74%; } .tip-x-38 { left: 76%; } .tip-x-39 { left: 78%; } .tip-x-40 { left: 80%; } .tip-x-41 { left: 82%; } .tip-x-42 { left: 84%; } .tip-x-43 { left: 86%; } .tip-x-44 { left: 88%; } .tip-x-45 { left: 90%; } .tip-x-46 { left: 92%; } .tip-x-47 { left: 94%; } .tip-x-48 { left: 96%; } .tip-x-49 { left: 98%; } .tip-x-50 { left: 100%; }
.tip-y-0 { top: 0%; } .tip-y-1 { top: 2%; } .tip-y-2 { top: 4%; } .tip-y-3 { top: 6%; } .tip-y-4 { top: 8%; } .tip-y-5 { top: 10%; } .tip-y-6 { top: 12%; } .tip-y-7 { top: 14%; } .tip-y-8 { top: 16%; } .tip-y-9 { top: 18%; } .tip-y-10 { top: 20%; } .tip-y-11 { top: 22%; } .tip-y-12 { top: 24%; } .tip-y-13 { top: 26%; } .tip-y-14 { top: 28%; } .tip-y-15 { top: 30%; } .tip-y-16 { top: 32%; } .tip-y-17 { top: 34%; } .tip-y-18 { top: 36%; } .tip-y-19 { top: 38%; } .tip-y-20 { top: 40%; } .tip-y-21 { top: 42%; } .tip-y-22 { top: 44%; } .tip-y-23 { top: 46%; } .tip-y-24 { top: 48%; } .tip-y-25 { top: 50%; }
.tip-y-26 { top: 52%; } .tip-y-27 { top: 54%; } .tip-y-28 { top: 56%; } .tip-y-29 { top: 58%; } .tip-y-30 { top: 60%; } .tip-y-31 { top: 62%; } .tip-y-32 { top: 64%; } .tip-y-33 { top: 66%; } .tip-y-34 { top: 68%; } .tip-y-35 { top: 70%; } .tip-y-36 { top: 72%; } .tip-y-37 { top: 74%; } .tip-y-38 { top: 76%; } .tip-y-39 { top: 78%; } .tip-y-40 { top: 80%; } .tip-y-41 { top: 82%; } .tip-y-42 { top: 84%; } .tip-y-43 { top: 86%; } .tip-y-44 { top: 88%; } .tip-y-45 { top: 90%; } .tip-y-46 { top: 92%; } .tip-y-47 { top: 94%; } .tip-y-48 { top: 96%; } .tip-y-49 { top: 98%; } .tip-y-50 { top: 100%; }
.status-pill { display: inline-flex; flex: none; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: var(--td-radius-pill); font-size: .72rem; font-weight: 700; color: var(--td-ink); background: color-mix(in srgb, var(--td-status-advisory) 16%, transparent); }
.status-pill.is-degraded { background: color-mix(in srgb, var(--td-status-degraded) 16%, transparent); }
.status-pill.is-outage { background: color-mix(in srgb, var(--td-status-outage) 16%, transparent); }
.status-pill .td-dot { width: 8px; height: 8px; }

/* Get started (§5.13): centred in the page — the heading, the two paths side by side, what happens next. */
.pub-main:has(> .onboard) { display: flex; align-items: center; }
.onboard { width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--td-space-8) var(--td-space-5); }
.onboard-head { max-width: 680px; margin: 0 auto var(--td-space-8); text-align: center; }
.onboard-eyebrow { display: inline-block; margin-bottom: var(--td-space-2); padding: .2rem .65rem; border-radius: var(--td-radius-pill); background: var(--td-primary-soft); color: var(--td-primary); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.onboard-title { margin: 0 0 var(--td-space-3); font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--td-ink); text-wrap: balance; }
.onboard-lede { margin: 0; color: var(--td-ink-soft); font-size: 1.05rem; line-height: 1.6; }

.onboard-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-space-5); }
.onboard-path { display: flex; flex-direction: column; align-items: flex-start; gap: var(--td-space-3); padding: var(--td-space-6, 1.5rem); }
.onboard-path.is-primary { border-color: var(--td-primary); box-shadow: 0 0 0 1px var(--td-primary); }
.onboard-path-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--td-primary-soft); color: var(--td-primary); }
.onboard-path-icon svg { width: 24px; height: 24px; fill: currentColor; }
.onboard-path-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--td-ink); }
.onboard-path-for { margin: 0; color: var(--td-ink-soft); line-height: 1.5; }
.onboard-steps { margin: 0; padding-left: 1.25rem; color: var(--td-ink); line-height: 1.7; }
.onboard-steps li::marker { color: var(--td-primary); font-weight: 700; }
.onboard-action { align-self: stretch; }
.onboard-form { display: flex; flex-direction: column; gap: var(--td-space-2); width: 100%; margin-top: auto; }
.onboard-label { font-weight: 600; color: var(--td-ink); font-size: .9rem; }
.onboard-input { width: 100%; box-sizing: border-box; padding: .65rem .85rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-sm); background: var(--td-surface); color: var(--td-ink); font: inherit; }
.onboard-input:focus { outline: 2px solid var(--td-primary); outline-offset: 0; border-color: var(--td-primary); }
.onboard-error { margin: 0; color: var(--td-status-outage); font-size: .85rem; }
.onboard-note { color: var(--td-ink-faint); font-size: .8rem; text-align: center; }
.onboard-sent { display: flex; flex-direction: column; gap: var(--td-space-2); width: 100%; margin-top: auto; padding: var(--td-space-4); border-radius: var(--td-radius-sm); background: var(--td-primary-soft); color: var(--td-ink); line-height: 1.5; }
.onboard-sent-title { font-weight: 700; color: var(--td-primary); }
.onboard-link { align-self: flex-start; padding: 0; border: none; background: none; color: var(--td-primary); font: inherit; font-weight: 600; cursor: pointer; }
.onboard-action:disabled { cursor: not-allowed; opacity: .55; }
.onboard-path.is-primary .onboard-action { margin-top: auto; }

.onboard-next { margin-top: var(--td-space-8); padding-top: var(--td-space-5); border-top: 1px solid var(--td-border); }
.onboard-next-title { margin: 0 0 var(--td-space-4); text-align: center; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--td-ink-faint); }
.onboard-next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--td-space-5); margin: 0; padding: 0; list-style: none; counter-reset: next; }
.onboard-next-steps li { position: relative; padding-left: 2.5rem; color: var(--td-ink-soft); line-height: 1.5; counter-increment: next; }
.onboard-next-steps li::before { content: counter(next); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--td-primary); color: var(--td-primary); font-weight: 700; font-size: .85rem; }
.onboard-next-steps strong { display: block; color: var(--td-ink); }
.onboard-next-steps li.is-current::before { box-shadow: 0 0 0 3px var(--td-primary-soft); }
.onboard-next-steps li.is-current strong { color: var(--td-primary); }

/* Onboarding (§5.13): signed in, organisation not served yet — the request form, then its state. */
.onboard-request { display: flex; flex-direction: column; gap: var(--td-space-3); max-width: 640px; margin: 0 auto; padding: var(--td-space-6); }
.onboard-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--td-space-2) var(--td-space-4); margin: 0; }
.onboard-facts dt { color: var(--td-ink-soft); font-size: .9rem; }
.onboard-facts dd { margin: 0; color: var(--td-ink); overflow-wrap: anywhere; }
.onboard-faint { color: var(--td-ink-faint); font-size: .8rem; }
.onboard-state { align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; background: var(--td-primary-soft); color: var(--td-primary); font-weight: 600; font-size: .85rem; }
.onboard-notice { max-width: 640px; margin: 0 auto var(--td-space-4); padding: var(--td-space-3) var(--td-space-4); border-radius: var(--td-radius); background: var(--td-primary-soft); color: var(--td-ink); }
.onboard-centre { display: flex; justify-content: center; }
/* The onboarding form (§5.13, reworked 5.1.81): sections, readable hints, checkboxes, read-only values. */
.onboard-request .onboard-form { gap: 0; margin-top: 0; }
.onboard-section { display: flex; flex-direction: column; gap: var(--td-space-2); margin: 0; padding: 0 0 var(--td-space-5); border: 0; min-width: 0; }
.onboard-section + .onboard-section { padding-top: var(--td-space-5); border-top: 1px solid var(--td-border); }
.onboard-section-title { margin: 0 0 var(--td-space-2); padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--td-ink); }
/* A floated legend is laid out as an ordinary item, so the section's top border sits above it, not through it. */
legend.onboard-section-title { float: left; width: 100%; }
.onboard-optional { font-weight: 400; color: var(--td-ink-soft); }
.onboard-hint { color: var(--td-ink-soft); font-size: .85rem; line-height: 1.45; }
.onboard-label { margin-top: var(--td-space-2); }
.onboard-readonly { margin: 0; padding: .65rem .85rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-sm); background: var(--td-surface-alt); color: var(--td-ink-soft); overflow-wrap: anywhere; }
.onboard-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--td-space-3); }
.onboard-pair > div { display: flex; flex-direction: column; gap: var(--td-space-2); min-width: 0; }
.onboard-check { display: flex; align-items: flex-start; gap: var(--td-space-2); color: var(--td-ink); line-height: 1.45; cursor: pointer; }
.onboard-check input { flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--td-primary); }
.onboard-check a { color: var(--td-primary); font-weight: 600; }
.onboard-self { margin: 0; }
.onboard-terms { margin: var(--td-space-5) 0 var(--td-space-4); padding-top: var(--td-space-5); border-top: 1px solid var(--td-border); }
.onboard-signout { margin: var(--td-space-3) 0 0; text-align: center; color: var(--td-ink-soft); font-size: .9rem; }
.onboard-signout .onboard-link { display: inline; font-size: inherit; }
.onboard-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--td-space-2); padding-bottom: var(--td-space-3); border-bottom: 1px solid var(--td-border); }
.onboard-sent-at { color: var(--td-ink-soft); font-size: .85rem; }
/* The setup checklist (§5.13): three moments, every step shown, Verified above Marked done. */
.onboard-setup { max-width: 640px; margin: var(--td-space-5) auto 0; }
/* The requirements step's page: a short word, then one card per documentation page. */
.requirements-back { margin: 0 0 var(--td-space-3); font-size: .9rem; }
.requirements-back a { color: var(--td-primary); font-weight: 600; text-decoration: none; }
.requirements-page { display: flex; flex-direction: column; gap: var(--td-space-4); max-width: 760px; }
.requirements-lede { margin: 0; color: var(--td-ink); line-height: 1.55; }
.requirements-missing { margin: 0; color: var(--td-ink-soft); }
.requirements-docs { display: grid; gap: var(--td-space-3); margin: 0; padding: 0; list-style: none; }
.requirements-doc-link {
    display: flex; flex-direction: column; gap: var(--td-space-1); padding: var(--td-space-4) var(--td-space-5);
    border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-surface); box-shadow: var(--td-shadow);
    color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.requirements-doc-link:hover { border-color: var(--td-primary); box-shadow: var(--td-shadow-lift); transform: translateY(-1px); }
.requirements-doc-title { color: var(--td-ink); font-size: 1.05rem; font-weight: 700; }
.requirements-doc-text { color: var(--td-ink-soft); font-size: .9rem; line-height: 1.5; }
.requirements-doc-go { margin-top: var(--td-space-1); color: var(--td-primary); font-size: .9rem; font-weight: 600; }
.requirements-next { margin: 0; color: var(--td-ink-soft); font-size: .9rem; }
.requirements-next a { color: var(--td-primary); font-weight: 600; }

.setup-page { display: flex; flex-direction: column; gap: var(--td-space-5); max-width: 760px; }
.setup-page .onboard-contact-card { margin: 0; max-width: none; }
.setup { padding: var(--td-space-5); border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-surface); }
.setup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--td-space-2); }
.setup-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--td-ink); }
.setup-progress { color: var(--td-ink-soft); font-size: .9rem; }
.setup-lede { margin: var(--td-space-2) 0 0; color: var(--td-ink-soft); font-size: .9rem; }
.setup-moment { margin-top: var(--td-space-5); }
.setup-moment-title { margin: 0 0 var(--td-space-2); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--td-ink-soft); }
.setup-later { margin: 0 0 var(--td-space-2); color: var(--td-ink-soft); font-size: .85rem; }
.setup-steps { margin: 0; padding: 0; list-style: none; }
.setup-step { display: flex; gap: var(--td-space-3); padding: var(--td-space-3) 0; border-top: 1px solid var(--td-border); }
.setup-step:first-child { border-top: 0; }
.setup-mark { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border: 2px solid var(--td-border); border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 700; }
.setup-step.is-verified .setup-mark { border-color: var(--td-status-healthy); background: var(--td-status-healthy); }
.setup-step.is-ticked .setup-mark { border-color: var(--td-primary); background: var(--td-primary); }
.setup-step.is-unavailable { opacity: .55; }
.setup-body { flex: 1; min-width: 0; }
.setup-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--td-space-2); }
.setup-step-title { font-weight: 600; color: var(--td-ink); }
.setup-optional { padding: 0 .45rem; border-radius: 999px; background: var(--td-surface-alt); color: var(--td-ink-soft); font-size: .75rem; }
.setup-state { margin-left: auto; color: var(--td-ink-soft); font-size: .8rem; }
.setup-step.is-verified .setup-state { color: var(--td-status-healthy); font-weight: 600; }
.setup-why { margin: var(--td-space-1) 0 0; color: var(--td-ink-soft); font-size: .9rem; line-height: 1.45; }
.setup-missing { margin: var(--td-space-1) 0 0; color: var(--td-ink); font-size: .85rem; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-3); margin-top: var(--td-space-2); }
.setup-link { color: var(--td-primary); font-size: .9rem; font-weight: 600; }
.setup-tick { display: inline-flex; align-items: center; gap: var(--td-space-1); color: var(--td-ink-soft); font-size: .85rem; cursor: pointer; }
.setup-tick input { accent-color: var(--td-primary); }
@media (max-width: 600px) { .setup { padding: var(--td-space-4); } .setup-state { margin-left: 0; width: 100%; } }

/* "Questions?" (§5.13): the way to reach the TrueDEM team, under the form and the request. */
.onboard-contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--td-space-4); max-width: 640px; margin: var(--td-space-5) auto 0; padding: var(--td-space-4) var(--td-space-5); border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-surface); }
.onboard-contact-title { margin: 0 0 var(--td-space-1); font-size: 1rem; font-weight: 700; color: var(--td-ink); }
.onboard-contact-lede { margin: 0; color: var(--td-ink-soft); font-size: .9rem; line-height: 1.45; }
.onboard-contact-actions { display: flex; flex-wrap: wrap; gap: var(--td-space-2); }
@media (max-width: 600px) { .onboard-contact-actions, .onboard-contact-actions .td-button { width: 100%; } .onboard-contact-actions .td-button { justify-content: center; } }
@media (max-width: 600px) { .onboard-pair { grid-template-columns: 1fr; } .onboard-request { padding: var(--td-space-5) var(--td-space-4); } }
.onboard-source { margin: 0; color: var(--td-ink-soft); font-size: .9rem; line-height: 1.5; }
.onboard-source.is-guess { color: var(--td-ink); padding: var(--td-space-2) var(--td-space-3); border-radius: var(--td-radius); background: var(--td-primary-soft); }
.onboard-input[readonly] { background: var(--td-surface-alt); color: var(--td-ink-soft); }
.onboard-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; }
@media (max-width: 600px) { .onboard-facts { grid-template-columns: 1fr; } .onboard-facts dd { margin-bottom: var(--td-space-2); } }

/* A protected page asked to sign in (§8.1): the landing page says so, and the sign-in comes back to that page. */
.pub-signin-needed { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--td-space-3); padding: var(--td-space-3) var(--td-space-4); background: var(--td-primary-soft); color: var(--td-ink); }

.onboard-foot { margin: var(--td-space-8) 0 0; text-align: center; color: var(--td-ink-soft); }
.onboard-foot a { color: var(--td-primary); font-weight: 600; }

/* A sign-in that did not complete (§8.1): one centred card, what happened, what to do, the codes for support. */
.signin-failed { display: grid; place-items: center; width: 100%; min-height: 100%; padding: var(--td-space-8) var(--td-space-5); box-sizing: border-box; }
.signin-failed-card { display: flex; flex-direction: column; align-items: center; gap: var(--td-space-3); width: 100%; max-width: 560px; padding: var(--td-space-8) var(--td-space-6, 1.5rem); text-align: center; }
.signin-failed-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--td-primary-soft); color: var(--td-primary); }
.signin-failed-icon svg { fill: currentColor; }
.signin-failed-title { margin: var(--td-space-2) 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1.25; color: var(--td-ink); text-wrap: balance; }
.signin-failed-why { margin: 0; color: var(--td-ink); font-size: 1.05rem; line-height: 1.55; }
.signin-failed-next { margin: 0; color: var(--td-ink-soft); line-height: 1.55; }
.signin-failed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--td-space-3); margin-top: var(--td-space-3); }
.signin-failed-details { display: grid; grid-template-columns: auto auto; justify-content: center; gap: var(--td-space-1) var(--td-space-3); margin: var(--td-space-4) 0 0; padding-top: var(--td-space-4); border-top: 1px solid var(--td-border); width: 100%; color: var(--td-ink-faint); font-size: .8rem; text-align: left; }
.signin-failed-details dt { font-weight: 600; }
.signin-failed-details dd { margin: 0; }
.signin-failed-details code { font-size: .8rem; color: var(--td-ink-soft); word-break: break-all; }

@media (max-width: 800px) {
    .onboard { padding: var(--td-space-5) var(--td-space-4); }
    .onboard-title { font-size: 1.6rem; }
    .onboard-paths, .onboard-next-steps { grid-template-columns: 1fr; }
}
/* On a phone the PublicShell's 2rem side padding pushes "Get started" off screen. */
@media (max-width: 600px) {
    .pub-header, .pub-footer { padding-left: var(--td-space-4); padding-right: var(--td-space-4); }
    .pub-actions { gap: var(--td-space-1); }
    .pub-logo img { height: 26px; }
    .hero { padding: 3rem var(--td-space-4) 3.5rem; }
    .hero h1 { font-size: 1.8rem; }
    .landing { padding: var(--td-space-5) var(--td-space-4); }
}

/* ============================================================ signed-out calls to action (§5.13)
   Get started and Sign in on the header and the hero: the portal's own buttons, more generous than td-button. */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--td-radius-pill); font: inherit; font-weight: 650; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.cta:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 3px; }
.cta:active { transform: translateY(0); }
.cta-arrow { display: inline-flex; transition: transform .18s ease; }
.cta-arrow svg { fill: currentColor; }
.cta:hover .cta-arrow { transform: translateX(3px); }

/* The header: a gradient pill with a soft glow. */

/* The hero: solid white on the navy gradient, and frosted glass beside it. */
.cta-hero, .cta-glass { min-height: 3.25rem; padding: .8rem 1.6rem; font-size: 1.02rem; }
/* Get started (owner, 2026-11-04, "A · Luminous white"): a white pill with navy words, a soft white halo and a cyan glow
   beneath; on hover it lifts, the halo widens, the glow deepens and the arrow moves forward. The one bright, still thing
   in the hero, next to the moving headlines and the frosted Sign in. */
.cta-hero { gap: .65rem; padding: .85rem 1.45rem .85rem 1.7rem; color: var(--td-hero-from); background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .10), 0 14px 34px rgba(0, 179, 214, .35); }
.cta-hero:hover { transform: translateY(-2px); color: var(--td-hero-from);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 179, 214, .5); }
.cta-hero:hover .cta-arrow { transform: translateX(4px); }
.cta-hero-label { letter-spacing: .01em; }
.cta-hero .cta-arrow svg { width: 18px; height: 18px; }
/* The landing page's card leading to the incidents page, and its outlined call to action. */
.incident-teaser-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--td-space-4); padding: var(--td-space-5) var(--td-space-6);
    color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.incident-teaser-card:hover { border-color: var(--td-primary); box-shadow: var(--td-shadow-lift); }
.incident-teaser-card:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 3px; }
.incident-teaser-text { display: grid; gap: .35rem; flex: 1 1 22rem; min-width: 0; }
.incident-teaser-heading { display: block; margin: 0; text-align: left; }
.incident-teaser-text .landing-lede { margin: 0; text-align: left; }
.cta-outline { padding: .6rem 1.1rem; font-size: .95rem; color: var(--td-primary); border-color: var(--td-primary); background: transparent; }
.incident-teaser-card:hover .cta-outline { background: var(--td-primary-soft); }
.pub-footer-link { color: inherit; }
.cta-glass { color: var(--td-hero-ink); background: var(--td-hero-glass); border-color: var(--td-hero-glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cta-glass:hover { transform: translateY(-2px); color: var(--td-hero-ink); background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); box-shadow: 0 10px 30px rgba(3, 14, 32, .3); }
.cta-hero:focus-visible, .cta-glass:focus-visible { outline-color: #ffffff; }
.hero-cta { gap: var(--td-space-4); }
.ms-logo { flex: none; display: block; }

/* The header's Sign in: quiet, an icon and the word, tinted on hover. */
.pub-signin { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .45rem .85rem; border-radius: var(--td-radius-pill); color: var(--td-ink); font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.pub-signin svg { width: 18px; height: 18px; fill: currentColor; opacity: .8; }
.pub-signin:hover { background: var(--td-primary-soft); color: var(--td-primary); }
.pub-signin:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .cta, .cta-arrow { transition: none; } .cta:hover, .cta:hover .cta-arrow { transform: none; } }
@media (max-width: 640px) {
    .pub-signin svg { display: none; }
    .hero-cta { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
}

/* A suspended or decommissioned organisation (§5.13): the sign-in-failed card, the team's contact card under it. */
.signin-failed:has(.account-status) { align-content: center; gap: var(--td-space-5); }
.account-status-action { align-self: center; margin-top: var(--td-space-2); }
.signin-failed:has(.account-status) .onboard-contact-card { width: 100%; max-width: 560px; box-sizing: border-box; }

/* Users and roles, option 1 (2026-11-04): row avatars, the Protected switch, quiet text actions in the panel. */
.users-row-avatar { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--td-primary-soft); color: var(--td-primary); font-size: .75rem; font-weight: 700; }
.users-name-block { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.users-tags:empty { display: none; }
.users-row .users-tags { margin-left: 2.6rem; }
.users-col-signin { white-space: nowrap; }
.users-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.users-link { padding: 0; border: 0; background: none; color: var(--td-primary); font: inherit; font-size: .9rem; cursor: pointer; }
.users-link:hover, .users-link:focus-visible { text-decoration: underline; }
.users-link-danger { color: var(--td-status-outage); }
.users-quiet-actions { display: flex; align-items: center; gap: .5rem; color: var(--td-ink-soft); }
.users-details-section.users-danger { border-top-style: dashed; }
.users-scope-chips { margin: .25rem 0 0; }
.users-details-status { margin: .5rem 0 0; }
.users-object-id { margin: var(--td-space-3, 12px) 0 0; font-size: .75rem; overflow-wrap: anywhere; }
.users-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.users-switch-row .td-note { margin: 0; }
.users-switch { position: relative; flex: none; width: 2.5rem; height: 1.4rem; margin-top: .1rem; padding: 0; border: 1px solid var(--td-border); border-radius: var(--td-radius-pill); background: var(--td-surface); cursor: pointer; }
.users-switch-thumb { position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--td-ink-soft); transition: left .15s ease; }
.users-switch[aria-checked="true"] { border-color: var(--td-primary); background: var(--td-primary); }
.users-switch[aria-checked="true"] .users-switch-thumb { left: 1.25rem; background: var(--td-surface); }
.users-switch:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 2px; }
.users-role-option { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.users-role-option .td-note { margin: 0; }

/* The overview (§5.2): tiles, then a grid of cards; quality as one stacked bar with its legend (the tier word always
   beside the colour), issues as bars, the call trend as a sparkline. */
.window-caption { margin: -.5rem 0 var(--td-space-4); }
.partial-note { margin: .5rem 0 0; font-style: italic; }
.overview-error { margin: 0 0 var(--td-space-4); }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--td-space-4); margin-top: var(--td-space-4); align-items: start; }
.overview-grid .td-card { min-width: 0; }
.overview-subheading { margin: var(--td-space-4) 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--td-ink); }
.users-switch-row .overview-subheading { margin-top: 0; }
.quality-bar { display: block; width: 100%; height: .9rem; border-radius: var(--td-radius-sm); overflow: hidden; background: var(--td-surface-alt); }
.quality-seg.is-optimal { fill: var(--td-status-healthy); }
.quality-dot.is-optimal { background: var(--td-status-healthy); }
.quality-seg.is-acceptable { fill: var(--td-primary); }
.quality-dot.is-acceptable { background: var(--td-primary); }
.quality-seg.is-impacted { fill: var(--td-status-advisory); }
.quality-dot.is-impacted { background: var(--td-status-advisory); }
.quality-seg.is-degraded { fill: var(--td-status-degraded); }
.quality-dot.is-degraded { background: var(--td-status-degraded); }
.quality-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0; padding: 0; list-style: none; font-size: .85rem; color: var(--td-ink-soft); }
.quality-legend strong { margin-left: .3rem; color: var(--td-ink); }
.quality-dot { display: inline-block; width: .6rem; height: .6rem; margin-right: .35rem; border-radius: 50%; }
.overview-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.overview-bars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .85rem; }
.overview-bar-label { overflow-wrap: anywhere; }
.overview-bar { display: block; width: 100%; height: .5rem; border-radius: var(--td-radius-pill); overflow: hidden; }
.overview-bar-track { fill: var(--td-surface-alt); }
.overview-bar-fill { fill: var(--td-status-advisory); }
.overview-bar-value { font-variant-numeric: tabular-nums; }
.overview-spark { display: block; width: 100%; height: 3rem; }
.overview-spark polyline { stroke: var(--td-primary); stroke-width: 2; }
.overview-table td, .overview-table th { font-size: .9rem; }
.overview-change.is-worse { color: var(--td-status-degraded); }
.overview-change.is-better { color: var(--td-status-healthy); }
.overview-incidents-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.overview-incidents-list li { display: grid; gap: .1rem; }
.overview-incidents-list .td-note { margin: 0; }
.overview-incident-title { color: var(--td-ink); overflow-wrap: anywhere; }
.overview-facts { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; }
.overview-facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.overview-names-setting { margin-top: var(--td-space-4); padding-top: var(--td-space-3, 12px); border-top: 1px solid var(--td-border); }
.overview-people-count { margin: 0; }

/* Phones (owner, 2026-11-04: enforce mobile support). Below 768 px the drawer leaves the page its whole width: it slides
   over it from the menu button, with a backdrop, and closes on a choice, the backdrop or Escape (AppShell). Hidden until
   opened even before the script reports the width, so a phone never shows the desktop drawer. */
@media (max-width: 767px) {
    .app-body { position: relative; }
    .td-drawer, .td-drawer.is-mini { position: absolute; z-index: 150; inset: 0 auto 0 0; width: min(82vw, 300px); box-shadow: var(--td-shadow-lift);
        transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
    .td-drawer.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
    .td-drawer-backdrop { position: absolute; z-index: 140; inset: 0; background: rgba(3, 14, 32, .5); }
    .app-content { width: 100%; }
    .pub-footer { flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .td-drawer, .td-drawer.is-open { transition: none; } }

/* The landing page's rotating headlines (owner, 2026-11-04): three slides stacked in one grid cell (no jump in height),
   cross-fading with a lift and a blur every 10 seconds of a 30-second cycle (owner, 2026-11-04: 6 was too quick); the key phrase shimmers; the bars under
   them fill in step; the button pauses all of it. CSS alone: the CSP allows no inline script. */
.hero-rotation { display: grid; justify-items: center; }
.hero-rotator { display: grid; width: 100%; margin-bottom: var(--td-space-5); }
.hero-slide { grid-area: 1 / 1; display: grid; align-content: start; gap: var(--td-space-4); opacity: 0; pointer-events: none;
    animation: hero-slide 30s ease-in-out infinite both; }
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 9s; }
.hero-slide:nth-child(3) { animation-delay: 19s; }
.hero-slide-title { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.hero-slide-text { display: block; max-width: var(--td-lede-max); margin: 0 auto; color: var(--td-hero-ink-muted); font-size: 1.1rem; line-height: 1.6; }
.hero-em { background: linear-gradient(100deg, #8be9ff 0%, var(--td-accent-cyan) 45%, #9db8ff 90%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: hero-shimmer 6s ease-in-out infinite alternate; }
.hero-rotator-controls { display: flex; align-items: center; gap: .75rem; margin: 0 auto var(--td-space-8); }
.hero-ticks { display: flex; gap: .4rem; }
.hero-tick { width: 2.25rem; height: 3px; overflow: hidden; border-radius: var(--td-radius-pill); background: rgba(255, 255, 255, .18); }
.hero-tick-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--td-accent-cyan), #9db8ff); animation: hero-tick 30s linear infinite both; }
.hero-tick:nth-child(1) .hero-tick-fill { animation-delay: -1s; }
.hero-tick:nth-child(2) .hero-tick-fill { animation-delay: 9s; }
.hero-tick:nth-child(3) .hero-tick-fill { animation-delay: 19s; }
.hero-pause { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 1px solid var(--td-hero-glass-line); border-radius: 50%;
    background: var(--td-hero-glass); color: var(--td-hero-ink); cursor: pointer; }
.hero-pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero-pause:hover { background: rgba(255, 255, 255, .2); }
.hero-pause:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.hero-rotation.is-paused .hero-slide, .hero-rotation.is-paused .hero-tick-fill, .hero-rotation.is-paused .hero-em { animation-play-state: paused; }
@keyframes hero-slide {
    0% { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    2.7% { opacity: 1; transform: none; filter: none; }
    31% { opacity: 1; transform: none; filter: none; }
    33.6% { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
    100% { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
}
@keyframes hero-tick { 0% { width: 0; } 33.3% { width: 100%; } 33.4%, 100% { width: 0; } }
@keyframes hero-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 600px) { .hero-slide-title { font-size: 1.8rem; } }
/* Reduced motion (Windows' "Animation effects" off, common on company PCs): the headlines still change, as a plain
   cross-fade — no lift, no blur, no shimmer; the bars and the pause button stay. */
@keyframes hero-fade { 0% { opacity: 0; } 2.7%, 31% { opacity: 1; } 33.6%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation-name: hero-fade; }
    .hero-em { animation: none; background-position: 30% 50%; }
}

/* The hero's photo (owner, 2026-11-04: "navy photo", inspired by www.truedem.com's banner): a person on a Teams call, the
   site's header photo stored in grey (img/hero-people.jpg, 1600 px, 67 KB), blended by luminosity into the hero gradient
   so it takes the App's navy and blue; a wash darkens it behind the words (white text stays readable) and toward the
   bottom, where the banner meets the page. The banner is a little taller on wider screens, closer to truedem.com's. */
.hero-decor .hero-photo { position: absolute; inset: 0; background: url("../img/hero-people.jpg") center 35% / cover no-repeat;
    filter: contrast(1.15) brightness(.9); mix-blend-mode: luminosity; opacity: .55; }
.hero-decor .hero-photo-wash { position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(10, 37, 64, .55), transparent 75%),
    linear-gradient(180deg, rgba(10, 37, 64, .15) 0%, rgba(10, 37, 64, 0) 40%, rgba(10, 37, 64, .65) 100%); }
@media (min-width: 601px) {
    .hero { padding-top: 6.5rem; padding-bottom: 7rem; }
}
/* A phone: the person sits behind the words, so the wash is a little stronger there. */
@media (max-width: 600px) {
    .hero-decor .hero-photo { background-position: 62% 35%; opacity: .45; }
}