/* Design system: the primitives and components every signed-in screen is built from,
   in the order the cascade relies on. Loaded after shell.css. */

/* --- Finding timeline --- */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.activity-item > .avatar-round {
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
}

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-text {
    margin: 3px 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* =========================================================================
   Compliance design system
   Primitives shared by every screen: page heads, surfaces, pills, tables,
   meters and diffs. Column priority is CSS-driven - each cell carries a
   data-prio and the grid wrapper is a size container, so the browser drops
   low-priority columns by itself instead of a measured JS fallback.
   ========================================================================= */

:focus-visible {
    outline: 2px solid var(--m365-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

h1[tabindex="-1"]:focus {
    outline: none;
}

table {
    margin: 0;
}

.mono {
    font-family: var(--m365-mono);
    font-size: 0.72rem;
}

code {
    font-family: var(--m365-mono);
    font-size: 0.875em;
    color: var(--m365-text);
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Takes the width of its table cell without adding to the column's intrinsic width. */
.truncate-fill {
    width: 0;
    min-width: 100%;
}

/* --- Responsive column priority --- */
[data-grid] {
    container: grid / inline-size;
}

/* A grid named here folds at its own thresholds only. */
[data-grid="tenants"] {
    container-name: tenants-grid;
}

[data-grid="baselines"] {
    container-name: baselines-grid;
}

[data-fold] {
    display: none;
}

/* Thresholds are the min-content width of each priority band's column set. */
@container grid (max-width: 1049px) {
    [data-prio="3"] { display: none !important; }
}

@container grid (max-width: 899px) {
    [data-prio="2"] { display: none; }
}

@container grid (max-width: 699px) {
    [data-prio="1"] { display: none; }
    [data-fold] { display: flex; }
}

@container grid (max-width: 1219px) {
    [data-prio="4"] { display: none !important; }
}

@container tenants-grid (max-width: 1259px) {
    [data-prio="4"] { display: none !important; }
}

@container tenants-grid (max-width: 1029px) {
    [data-prio="3"] { display: none !important; }
}

@container tenants-grid (max-width: 919px) {
    [data-prio="2"] { display: none; }
}

@container tenants-grid (max-width: 759px) {
    [data-prio="1"] { display: none; }
    [data-fold] { display: flex; }
}

[data-grid="drift"] {
    container-name: drift-grid;
}

@container drift-grid (max-width: 1299px) {
    [data-prio="4"] { display: none !important; }
}

@container drift-grid (max-width: 1074px) {
    [data-prio="3"] { display: none !important; }
}

@container drift-grid (max-width: 874px) {
    [data-prio="2"] { display: none; }
}

@container drift-grid (max-width: 699px) {
    [data-prio="1"] { display: none; }
    [data-fold] { display: flex; }
}

@container baselines-grid (max-width: 1049px) {
    [data-prio="4"] { display: none !important; }
}

@container baselines-grid (max-width: 899px) {
    [data-prio="3"] { display: none !important; }
}

@container baselines-grid (max-width: 699px) {
    [data-prio="1"] { display: none; }
}

[data-grid="backoffice-organizations"] {
    container-name: backoffice-organizations-grid;
}

@container backoffice-organizations-grid (max-width: 1510px) {
    [data-prio="4"] { display: none !important; }
}

@container backoffice-organizations-grid (max-width: 1385px) {
    [data-prio="2"] { display: none; }
}

@container backoffice-organizations-grid (max-width: 1176px) {
    [data-prio="1"] { display: none; }
}

[data-grid="users"] {
    container-name: users-grid;
}

[data-grid="access-requests"] {
    container-name: access-requests-grid;
}

@container users-grid (max-width: 639px) {
    [data-prio="1"] { display: none; }
    [data-fold] { display: flex; }
}

@container access-requests-grid (max-width: 639px) {
    [data-prio="1"] { display: none; }
}

@container access-requests-grid (max-width: 539px) {
    [data-prio="2"] { display: none; }
}

/* --- Split layouts --- */
[data-split] {
    display: grid;
    gap: 16px;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

[data-split][data-stretch] {
    align-items: stretch;
}

@media (min-width: 1200px) {
    [data-split="main"] {
        grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr);
    }
}

[data-split="editor2"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 1100px) {
    [data-split="editor2"] {
        grid-template-columns: 292px minmax(0, 1fr);
    }
}

[data-split="editor3"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

@media (min-width: 1200px) {
    [data-split="editor3"] {
        grid-template-columns: 186px 258px minmax(0, 1fr);
    }
}

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.auto-grid-narrow {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.auto-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
    gap: 10px;
}

.tile-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tile-flow > * {
    flex: 1 1 260px;
    min-width: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 16px);
}

.stack-md { --stack-gap: 11px; }
.stack-sm { --stack-gap: 7px; }
.stack-xs { --stack-gap: 3px; }
.stack-0 { --stack-gap: 0; }

/* Horizontal partner of .stack: a wrapping row of items on one baseline. */
.cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cluster-gap, 9px);
}

.cluster-sm { --cluster-gap: 6px; }
.cluster-lg { --cluster-gap: 12px; }
.cluster-nowrap { flex-wrap: nowrap; }

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.action-row-end { justify-content: flex-end; }

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auto-grid-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 16px;
    align-items: start;
}

/* Field grid inside a card or dialog. Override --grid-min for wider controls. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 215px)), 1fr));
    gap: var(--grid-gap, 14px);
}

.form-grid-tight { --grid-gap: 10px; }

/* One cell over several rows of the grid; each child sits in its own row of the parent. */
.form-grid-rows {
    display: grid;
    grid-template-rows: subgrid;
}

/* --- Text idioms and small surfaces --- */
/* Muted small copy: the standard explanatory line under a title or beside a control. */
.note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--m365-text-muted);
}

.note-xs { font-size: 0.72rem; }
.note-md { font-size: 0.78rem; }

.loading-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    font-size: 0.81rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--m365-text);
}

.loading-line.is-roomy {
    padding: 22px 0;
}

.spinner-box {
    display: flex;
    justify-content: center;
    padding: 22px 0;
}

.loading-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--m365-primary-tint);
    border-top-color: var(--m365-primary-fill);
    animation: loading-spin 0.9s linear infinite;
}

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

/* Decorative status glyph in front of a message. */
.glyph {
    flex: none;
    font-weight: 800;
}

.divider-top {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--m365-border);
}

/* Code surface for scripts, secrets and logs. */
.code-block {
    display: block;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
    color: var(--m365-text);
    font-family: var(--m365-mono);
    font-size: 0.72rem;
    line-height: 1.7;
    white-space: pre;
    overflow: auto;
    max-height: var(--code-max, none);
    scrollbar-gutter: stable;
}

.is-wrapped .code-block,
textarea.code-block {
    white-space: pre-wrap;
    word-break: break-all;
}

/* Inside an inset the surface-alt fill would vanish, so the block takes the surface colour. */
.inset .code-block { background: var(--m365-surface); }
.inset .field-value { background-color: var(--m365-surface); }
.inset .choice-card { background-color: var(--m365-surface); }


textarea.code-block {
    width: 100%;
    box-sizing: border-box;
    height: 340px;
    resize: vertical;
    border-color: var(--m365-control-border);
}

.code-block-wrap { position: relative; }

.code-block-wrap.has-copy .code-block { padding-top: 38px; }

.code-block-copy {
    position: absolute;
    top: 8px;
    right: 20px;
    z-index: 1;
    min-height: 0;
    padding: 4px 9px;
    font-size: 0.69rem;
}


/* --- Page head --- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-head h1 {
    overflow-wrap: anywhere;
    margin: 0;
    font-size: var(--t-title);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--m365-text);
}

.page-head p {
    margin: 5px 0 0;
    font-size: var(--t-secondary);
    font-weight: 500;
    color: var(--m365-text-soft);
}

.page-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-head-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.page-head-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-weight: 500;
    color: var(--m365-text-soft);
}

.page-title {
    margin: 0;
    font-size: var(--t-title);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--m365-text);
}

/* --- Surfaces --- */
.surface {
    background: var(--m365-card);
    border: 1px solid var(--m365-card-border);
    border-radius: 16px;
    box-shadow: var(--m365-shadow);
    padding: 18px;
}

.surface-accent {
    border: 2px solid var(--m365-primary);
}

.surface-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 14px;
}

.surface-head-main {
    flex: 1 1 200px;
    min-width: 0;
}

.surface-head-right {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.surface-head-title {
    font-size: var(--t-section);
    font-weight: 700;
    color: var(--m365-text);
    overflow-wrap: anywhere;
}

.surface-head-sub {
    font-size: var(--t-caption);
    color: var(--m365-text-muted);
    margin-top: 3px;
}

.eyebrow {
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--m365-text-muted);
}

.inset {
    padding: 13px 14px;
    border-radius: 9px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
}

.inset-dashed {
    border: 1px dashed var(--m365-border);
    border-radius: 9px;
    padding: 12px;
}

.inset-sm { padding: 9px 11px; }

.inset-alt { background: var(--m365-surface-alt); }
.inset-info { background: var(--m365-info-tint); border-color: var(--m365-info-line); }
.inset-success { background: var(--m365-success-tint); border-color: var(--m365-success-line); }
.inset-warning { background: var(--m365-warning-tint); border-color: var(--m365-warning); }
.inset-danger { background: var(--m365-danger-tint); border-color: var(--m365-danger); }
.inset-info.inset-bordered { border-color: var(--m365-info); }
.inset-success.inset-bordered { border-color: var(--m365-success); }

/* --- Callout ---
   A tinted inset carrying a status glyph, a message and, optionally, an action at the
   right. Rendered by the Callout component; the tone classes above pick the tint. */
.callout {
    display: flex;
    align-items: center;
    gap: 11px;
}

.callout-start { align-items: flex-start; }

.callout-body {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.55;
}

.callout-title {
    display: block;
    font-weight: 700;
}

.callout-body p { margin: 6px 0 0; }
.callout-body p:first-child { margin-top: 0; }
:where(.callout-body) p { font-size: inherit; line-height: inherit; }
.callout-body ul { margin: 6px 0 0; padding-left: 18px; }

.callout-outcome { padding: 12px 14px; }

.callout-outcome .callout-body {
    font-size: 12.5px;
    font-weight: 600;
}

.callout-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
}

/* --- Stat tiles --- */
.stat { min-width: 0; }

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
}

.stat-value {
    display: block;
    margin-top: 2px;
    font-size: 1.19rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stat-lg .stat-value { font-size: 1.38rem; }
.stat-sm .stat-value { font-size: 0.81rem; font-weight: 700; letter-spacing: 0; }

.stat-hint {
    display: block;
    margin-top: 3px;
    font-size: 0.69rem;
    color: var(--m365-text-muted);
}

.status-tile {
    display: flex;
    flex-direction: column;
}

.status-tile .stat-value {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.status-tile .stat-lg .stat-value { font-size: 28px; }

.status-tile .stat-sm .stat-value {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.status-tile .stat-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
}

/* --- Pills --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--m365-pill-muted);
    color: var(--m365-text-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent);
}

.pill-glyph {
    font-size: 0.56rem;
    line-height: 1;
}

.tone-danger { background: var(--m365-danger-tint); color: var(--m365-danger-text); }
.tone-warning { background: var(--m365-warning-tint); color: var(--m365-warning-text); }
.tone-info { background: var(--m365-info-tint); color: var(--m365-info-text); }
.tone-excepted { background: var(--m365-excluded-tint); color: var(--m365-excluded-text); }
.tone-success { background: var(--m365-success-tint); color: var(--m365-success-text); }
.tone-primary { background: var(--m365-primary-tint); color: var(--m365-primary-text); }
.tone-muted { background: var(--m365-pill-muted); color: var(--m365-text-muted); }
.tone-viewer { background: var(--m365-viewer-tint); color: var(--m365-text); }

.fg-danger { color: var(--m365-danger-text); }
.fg-warning { color: var(--m365-warning-text); }
.fg-info { color: var(--m365-info-text); }
.fg-success { color: var(--m365-success-text); }
.fg-primary { color: var(--m365-primary-text); }
.fg-muted { color: var(--m365-text-muted); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    border-radius: 6px;
    font-size: var(--t-button);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    background: var(--m365-surface);
    color: var(--m365-text);
    border: 1px solid var(--m365-btn-line);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--m365-surface-alt);
    text-decoration: none;
}

.btn-accent,
.btn-accent:hover {
    background: var(--m365-btn-bg);
    color: var(--m365-btn-fg);
    border-color: transparent;
    box-shadow: var(--m365-btn-glow);
    letter-spacing: 0.03em;
}

.btn-accent:hover {
    filter: brightness(1.08);
}

.btn-subtle {
    background: transparent;
    color: var(--m365-primary-text);
    border-color: transparent;
}

.btn-danger {
    background: var(--m365-danger-fill, var(--m365-danger));
    border-color: var(--m365-danger-fill, var(--m365-danger));
    color: #fff;
}

.btn-danger:hover {
    background: var(--m365-danger-fill-dark);
    border-color: var(--m365-danger-fill-dark);
    color: #fff;
}

.btn-danger-outline {
    color: var(--m365-danger-text);
    border-color: currentColor;
}

.btn-danger-outline:hover {
    background: var(--m365-danger-tint);
}

.btn-sm {
    --btn-sm-pad-x: 10px;
    min-height: 28px;
    padding: 0 var(--btn-sm-pad-x);
    font-size: 0.72rem;
}

.btn-sm.is-flush {
    margin-inline-start: calc(-1 * var(--btn-sm-pad-x));
}

.btn-block {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.data-table th .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.data-table th .th-sort:hover {
    color: var(--m365-primary-text);
}

.data-table th .th-sort-mark {
    font-size: 0.6rem;
    color: var(--m365-primary-text);
}

.choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.choice-row.is-selected { background: var(--m365-primary-tint); }

.choice-row:hover { background: var(--m365-surface-alt); }

.choice-tick {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid var(--m365-control-border);
    border-radius: 4px;
    background: var(--m365-surface);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.choice-tick.is-on {
    border-color: var(--m365-primary);
    background: var(--m365-primary-fill);
}

.kv-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    align-items: center;
    font-size: .78rem;
}

/* --- Segmented control --- */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-btn-line);
    border-radius: 8px;
}

.segmented button {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--t-button);
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    color: var(--m365-text-muted);
}

.segmented button[aria-checked="true"] {
    background: var(--m365-seg-on);
    color: var(--m365-primary-text);
    box-shadow: inset 0 0 0 1px var(--m365-primary);
}

/* --- Filter bar --- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-trailing {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.filter-input {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    min-width: 190px;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-control-border);
    border-radius: 6px;
    color: var(--m365-text-muted);
}

.filter-input.is-raised {
    background: var(--m365-surface);
}

.filter-input:focus-within {
    outline: 2px solid var(--m365-primary);
    outline-offset: 1px;
    border-color: var(--m365-primary);
}

.filter-input input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--m365-text);
    outline: none;
}

/* A filter chip is a <select>, so this only overrides size and wording colour - setting the
   `background` shorthand here would drop the chevron the base rule paints. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 30px 0 11px;
    border-radius: 6px;
    border: 1px solid var(--m365-control-border);
    background-color: var(--m365-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--m365-text-muted);
    cursor: pointer;
    white-space: nowrap;
    max-width: 170px;
}

/* --- Data tables --- */
.data-table {
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    overflow-x: auto;
}

.data-table.is-raised {
    background: var(--m365-surface);
    border-color: var(--m365-card-border);
    box-shadow: 0 1px 2px rgba(8, 12, 34, 0.06);
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--m365-surface-alt);
}

.data-table th {
    text-align: left;
    padding: 9px 14px;
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--m365-text-muted);
    border-bottom: 1px solid var(--m365-border);
    white-space: nowrap;
}

.data-table th.align-right {
    text-align: right;
}

.data-table td {
    padding: 11px 14px;
    font-size: 0.78rem;
    color: var(--m365-text);
    border-bottom: 1px solid var(--m365-border);
    vertical-align: middle;
}

/* The wrapper already draws the bottom edge, and a border here as well leaves a sliver of a row
   under the last one where the wrapper's rounded corners clip it. */
.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr.is-clickable {
    cursor: pointer;
}

.data-table tbody tr.is-clickable:hover {
    background: var(--m365-primary-tint);
}

.row-link {
    color: inherit;
    text-decoration: none;
}

.row-link:hover {
    text-decoration: underline;
}

.data-table tbody tr.is-selected {
    background: var(--m365-primary-tint);
}

.data-table.is-compact td {
    padding: 7px 12px;
}

[data-grid="audit"] .pill,
[data-grid="tenant-timeline"] .pill {
    white-space: normal;
    border-radius: 11px;
}

.clamp-2,
.clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

.align-right {
    text-align: right;
}

.row-actions {
    display: flex;
    gap: 6px;
}

/* --- Meters and gauges --- */
.meter-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(24px, 1fr) minmax(0, auto);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.meter-row-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.meter {
    display: block;
    min-width: 0;
    height: 7px;
    border-radius: 4px;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-border);
    overflow: hidden;
}

.meter-fill {
    display: block;
    height: 100%;
}

.meter-row-value {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gauge {
    position: relative;
    flex: none;
}

.gauge svg {
    transform: rotate(-90deg);
}

/* Inset to the ring's inner edge rather than to the square, to prevent running out
   over the stroke for long strings like "NON-COMPLIANT". */
.gauge-body {
    position: absolute;
    inset: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

.gauge-score {
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--m365-text);
}

.gauge-label {
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-transform: uppercase;
    margin-top: 2px;
}

.gauge-delta {
    color: var(--m365-text-muted);
    font-weight: 600;
    line-height: 1.15;
    margin-top: 2px;
}

.score-chart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
}

.score-chart-marks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.63rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--m365-text-muted);
}

.score-chart-marks > :first-child {
    transform: translateY(-1px);
}

.score-chart-marks > :last-child {
    transform: translateY(1px);
}

.score-chart-plot {
    position: relative;
}

.score-chart-guides {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.score-chart-guides > span {
    display: block;
    height: 0;
    border-top: 1px dashed var(--m365-border);
}

.score-chart-guides > :last-child {
    border-top-style: solid;
}

.score-chart-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.63rem;
    white-space: nowrap;
    color: var(--m365-text-muted);
}

/* --- Severity tiles --- */
.severity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.severity-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--m365-chip-line);
    text-decoration: none;
    color: inherit;
}

.severity-tile-count {
    font-size: 1.19rem;
    font-weight: 800;
    line-height: 1;
}

.severity-tile-label {
    font-size: 0.72rem;
    font-weight: 700;
}

/* --- List rows (clickable, borderless) --- */
.list-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 4px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--m365-border);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.list-row:first-child {
    border-top: none;
}

.list-row:hover {
    background: var(--m365-surface-alt);
}

.card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.tenant-group {
    border: 1px solid var(--m365-group-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--m365-group-bg);
}

.tenant-group-head {
    padding: 12px 14px;
    background: var(--m365-group-head);
    border-bottom: 1px solid var(--m365-group-line);
}

.tenant-group .card-row {
    border-color: var(--m365-row-line);
    background: var(--m365-row);
}

.card-row > .pill:first-child {
    min-width: 76px;
    justify-content: center;
}

.card-row:hover {
    border-color: var(--m365-primary-light);
}

.card-row.is-selected {
    border-color: var(--m365-primary);
    background: var(--m365-primary-tint);
}

.selectable-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selectable-row > .card-row {
    flex: 1 1 auto;
    min-width: 0;
}

.upstream-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border-radius: 10px;
    border: 2px solid var(--m365-warning);
    background: var(--m365-warning-tint);
    box-shadow: var(--m365-shadow);
}

.upstream-banner.is-deferred {
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
    box-shadow: none;
}

.upstream-banner-glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--m365-warning);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
}

.upstream-banner.is-deferred .upstream-banner-glyph {
    border: 1px solid var(--m365-border);
    background: var(--m365-surface);
    color: var(--m365-text-muted);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 7px;
    background: var(--m365-primary-tint);
    color: var(--m365-primary-text);
    font-weight: 700;
}

.avatar-xs { width: 22px; height: 22px; font-size: 0.56rem; border-radius: 5px; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.66rem; }
.avatar-md { width: 34px; height: 34px; font-size: 0.81rem; }
.avatar-lg { width: 44px; height: 44px; font-size: 0.88rem; border-radius: 11px; }
.avatar-round { border-radius: 50%; background: var(--m365-surface-alt); border: 1px solid var(--m365-border); color: var(--m365-text-muted); }

.value-chip {
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--m365-mono);
    font-size: 0.66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.value-expected {
    background: var(--m365-success-tint);
    color: var(--m365-success-ink);
    border: 1px solid var(--m365-success-ink);
}

.value-actual {
    background: var(--m365-danger-tint);
    color: var(--m365-danger-text);
    border: 1px solid var(--m365-danger-line);
}

.value-transition-neutral .value-chip {
    background: var(--m365-surface-alt);
    color: var(--m365-text);
    border-color: var(--m365-border);
}

/* Expected and actual side by side, each chip clipped to its own share of the row. */
.value-transition {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.value-transition > .value-chip { max-width: var(--chip-max, 110px); }

/* Primary line over a muted secondary, both clipped. */
.two-line {
    display: block;
    min-width: 0;
    max-width: var(--two-line-max, none);
}

.two-line-primary { display: block; }

.two-line-secondary {
    display: block;
    margin-top: 2px;
    font-size: 0.69rem;
    color: var(--m365-text-muted);
}

.two-line-secondary .mono { font-size: inherit; }

/* --- Tabs --- */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--m365-btn-line);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tabs button {
    min-height: 42px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--m365-text-muted);
    font-family: inherit;
    font-size: var(--t-button);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tabs button[aria-selected="true"] {
    border-bottom-color: var(--m365-primary);
    color: var(--m365-primary-text);
    font-weight: 700;
}

@media (max-width: 1299px) {
    .tabs button {
        padding: 0 12px;
    }
}

/* --- Definition lists --- */
.kv {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 16px;
    font-size: 0.75rem;
}

.kv dt {
    color: var(--m365-text-muted);
    white-space: nowrap;
}

.kv dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.kv-sm { gap: 6px 16px; font-size: 0.72rem; }
.kv-tight { gap: 4px 12px; font-size: 0.72rem; }
.kv-lg { gap: 11px 20px; font-size: 0.78rem; }

.kv-hint {
    display: block;
    margin-top: 3px;
    font-family: var(--m365-sans);
    font-size: 0.69rem;
    font-weight: 400;
    color: var(--m365-text-muted);
}

/* --- Diff views --- */
.diff-scroll {
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    background: var(--m365-surface);
    overflow: hidden;
}

.diff-scroll > div {
    overflow: auto;
}

.diff-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-family: var(--m365-mono);
    font-size: 0.72rem;
}

.diff-table thead {
    background: var(--m365-surface-alt);
    font-family: var(--m365-sans);
}

.diff-table th[scope="col"] {
    text-align: left;
    padding: 9px 14px;
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--m365-text-muted);
    border-bottom: 1px solid var(--m365-border);
    white-space: nowrap;
}

.diff-table td,
.diff-table th[scope="row"] {
    padding: 6px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--m365-border);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-table th[scope="row"] {
    width: 56px;
    text-align: right;
    font-family: var(--m365-mono);
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--m365-text-muted);
}

.diff-table td + td {
    border-left: 1px solid var(--m365-border);
}

.diff-row-changed {
    background: var(--m365-warning-tint);
}

.diff-row-changed th[scope="row"] {
    color: var(--m365-warning-text);
    font-weight: 700;
}

.unified-diff {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--m365-mono);
    font-size: 0.72rem;
}

.unified-diff li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--m365-border);
}

.unified-diff li span:last-child {
    white-space: pre-wrap;
}

.unified-add { background: var(--m365-success-tint); color: var(--m365-success-text); }
.unified-del { background: var(--m365-danger-tint); color: var(--m365-danger-text); }

.semantic-diff {
    border: 1px solid var(--m365-border);
    border-radius: 9px;
    overflow: hidden;
}

.semantic-diff-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: var(--m365-surface-alt);
    border-bottom: 1px solid var(--m365-border);
}

.semantic-diff-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    padding: 13px;
}

.semantic-side {
    min-width: 0;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
}

.semantic-side-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.semantic-side-value {
    font-family: var(--m365-mono);
    font-size: 0.81rem;
    font-weight: 500;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

/* --- Resource tree --- */
.tree-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 9px;
    min-height: 38px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.tree-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 16px;
}

.tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    min-height: 34px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.tree-item[aria-current="true"] {
    background: var(--m365-primary-tint);
}

.tree-item-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 44px;
    padding: 10px;
}

.tree-item-stacked > span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.disclosure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}

.tree-caret {
    flex: none;
    font-size: 0.5rem;
    color: var(--m365-text-muted);
    transition: transform 0.15s ease;
}

.tree-caret.is-open {
    transform: rotate(90deg);
}

/* --- Choice cards (radio-like tiles) --- */
.choice-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    min-height: 44px;
    border-radius: 9px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.choice-card.is-selected {
    border: 2px solid var(--m365-primary);
    background: var(--m365-primary-tint);
}

.switch-state {
    display: inline-block;
    flex: none;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.state-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    width: 130px;
}

/* --- Switch cells --- */
.switch-cell {
    padding: 22px 0;
    text-align: center;
}

.switch-cell-body {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.switch-note {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    color: var(--m365-text-muted);
}

/* --- Toggles and checkboxes --- */
.switch {
    width: 44px;
    height: 26px;
    flex: none;
    border-radius: 13px;
    border: 1px solid var(--m365-control-border);
    background: var(--m365-surface-alt);
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.switch[aria-checked="true"],
.switch.is-on {
    background: var(--m365-primary-fill);
    justify-content: flex-end;
}

.switch:disabled,
.switch[aria-disabled="true"] {
    border-style: dashed;
    cursor: not-allowed;
}

.switch[aria-checked="true"]:disabled,
.switch[aria-checked="true"][aria-disabled="true"],
.switch.is-on:disabled {
    opacity: 0.7;
}

.switch-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--m365-text-muted);
    box-shadow: var(--m365-shadow);
}

.switch[aria-checked="true"] .switch-thumb,
.switch.is-on .switch-thumb {
    background: #fff;
}

/* Sized to sit inside a setting row's control rather than to be the row's own target. */
.switch-sm {
    width: 34px;
    height: 19px;
    padding: 2px;
}

.switch-sm .switch-thumb {
    width: 13px;
    height: 13px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: none;
    border-radius: 4px;
    border: 1px solid var(--m365-control-border);
    background: var(--m365-surface);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.checkbox[aria-checked="true"] {
    border-color: var(--m365-primary-fill);
    background: var(--m365-primary-fill);
}

/* --- Read-only form fields (prototype fidelity, not yet wired to a form model) --- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.field-label-end {
    font-size: 0.75rem;
    color: var(--m365-text-muted);
}

.field-value {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
    font-size: 0.78rem;
    color: var(--m365-text);
    overflow: hidden;
    white-space: nowrap;
}

/* A <select> wearing the field-value box is still a select, and the rule above breaks it twice:
   the `background` shorthand drops the chevron the base select rule paints, and `display: flex`
   makes the browser lay the <option> children out as flex items - which is how a five-option
   dropdown came to render a dropdown affordance per option instead of one at its right edge.
   Restated here rather than removed from the markup, so a select given this class later cannot
   bring the fault back. */
input.field-value {
    display: block;
    width: 100%;
}

textarea.field-value {
    display: block;
    width: 100%;
    height: auto;
    min-height: 72px;
    padding: 8px 10px;
    overflow: auto;
    white-space: pre-wrap;
    resize: vertical;
}

select.field-value {
    display: block;
    width: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2357627a' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding: 0 30px 0 10px;
}

body[data-theme="dark"] select.field-value {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2393a0b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}

input.field-value,
textarea.field-value,
select.field-value,
label.field-value {
    background-color: var(--m365-surface);
    border-color: var(--m365-control-border);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input.field-value:hover:not(:disabled):not([readonly]),
textarea.field-value:hover:not(:disabled):not([readonly]),
select.field-value:hover:not(:disabled),
label.field-value:hover {
    border-color: var(--m365-primary);
}

input.field-value:focus-visible,
textarea.field-value:focus-visible,
select.field-value:focus-visible,
label.field-value:focus-within {
    border-color: var(--m365-primary);
}

input.field-value:disabled,
input.field-value[readonly],
textarea.field-value:disabled,
textarea.field-value[readonly],
select.field-value:disabled {
    background-color: var(--m365-surface-alt);
    border-style: dashed;
    color: var(--m365-text-muted);
    opacity: 1;
}

input.field-value:disabled,
textarea.field-value:disabled,
select.field-value:disabled {
    border-color: var(--m365-border);
    cursor: not-allowed;
}

.inset input.field-value:disabled,
.inset textarea.field-value:disabled,
.inset select.field-value:disabled {
    background-color: var(--m365-surface);
}

span.field-value,
div.field-value {
    border-style: dashed;
}

.field-hint {
    font-size: 0.69rem;
    color: var(--m365-text-muted);
}

/* A select that sits in a header or toolbar rather than in a form column. */
.field-value-sm {
    height: 28px;
    font-size: 0.75rem;
}

select.field-value-sm { width: auto; }

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    font-size: 0.78rem;
    cursor: pointer;
}

.checkbox-field-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bullets li {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.55;
}

.bullets li > span:first-child {
    flex: none;
    font-weight: 700;
    color: var(--m365-text-muted);
}

.bullets-primary li > span:first-child {
    color: var(--m365-primary-text);
}

.new-baseline-reach {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--m365-border);
}

.new-baseline-reach > p {
    flex: 1 1 240px;
}

/* --- Setting rows -------------------------------------------------------------------
   Every setting in the baseline editor is one row of the same shape: name and description
   on the left, the control in a column of fixed width, the schema badge and the revert
   button last. */
.field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 9px 14px;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface);
}

.field-row-name {
    flex: 1 1 200px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
}

.field-row-label {
    font-family: var(--m365-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.field-row-hint {
    font-size: 0.69rem;
    line-height: 1.5;
    color: var(--m365-text-muted);
}

.field-row-control {
    flex: 1 1 248px;
    min-width: 190px;
    max-width: 248px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 72px;
    min-height: 32px;
}

.field-control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--m365-control-border);
    background: var(--m365-surface);
    color: var(--m365-text);
    font-family: var(--m365-mono);
    font-size: 0.75rem;
}

/* An editable control is the only white box in the column, and it answers to the pointer. What
   cannot be edited is grey, dashed and inert, so the two are told apart without reading either. */
.field-control:hover:not(:disabled):not(.field-control-static) {
    border-color: var(--m365-primary);
}

.field-control:focus:not(:disabled) {
    outline: 2px solid var(--m365-primary);
    outline-offset: 1px;
    border-color: var(--m365-primary);
}

.field-control:disabled {
    background: var(--m365-surface-alt);
    color: var(--m365-text-muted);
    border-color: var(--m365-border);
    border-style: dashed;
    cursor: not-allowed;
}

.field-control-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    text-align: left;
}

.field-control-switch:disabled {
    cursor: not-allowed;
}

select.field-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2357627a' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 30px;
}

body[data-theme="dark"] select.field-control:not(:disabled) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2393a0b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}

/* A value the pipeline resolves, shown and not typed over. */
.field-control-static {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--m365-surface-alt);
    color: var(--m365-text-muted);
    border-color: var(--m365-border);
    border-style: dashed;
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
}

.field-entry {
    display: flex;
    align-items: center;
    gap: 7px;
}

.field-icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--m365-btn-line);
    background: var(--m365-surface);
    color: var(--m365-text);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.field-icon-btn:disabled {
    color: var(--m365-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.field-icon-btn.is-revert {
    border-color: var(--m365-primary);
    color: var(--m365-primary-text);
}

/* --- Change list -------------------------------------------------------------------
   What a commit would push, grouped by the resource instance it belongs to. A long list
   scrolls rather than growing the dialog past the viewport. */
.change-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 330px;
    overflow-y: auto;
}

.change-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 12px;
    border-radius: 9px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface-alt);
}

.change-group-head {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.change-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
}

.change-value {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface);
    color: var(--m365-text);
    font-family: var(--m365-mono);
    font-size: 0.69rem;
    overflow-wrap: anywhere;
}

.change-value.is-to {
    background: var(--m365-success-tint);
}

.field-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px dashed var(--m365-border);
}

/* Size only - the chrome comes from the base select rule. */
.field select {
    width: 100%;
}

/* --- Wizard --- */
.wizard-step {
    display: flex;
    gap: 11px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 10px;
    min-height: 44px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    color: inherit;
}

.wizard-step[aria-current="step"] {
    background: var(--m365-primary-tint);
}

.wizard-marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.69rem;
    font-weight: 700;
    background: var(--m365-surface-alt);
    color: var(--m365-text-muted);
    border: 1px solid var(--m365-control-border);
}

.wizard-marker.is-done {
    background: var(--m365-success-fill);
    color: #fff;
    border: none;
}

.wizard-marker.is-ticked {
    background: var(--m365-success-tint);
    color: var(--m365-success-ink);
    border: 1px solid var(--m365-success-ink);
    font-size: 11px;
    font-weight: 800;
}

.wizard-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--m365-border);
}

.wizard-marker.is-current {
    background: var(--m365-primary-fill);
    color: #fff;
    border: none;
}

.workload-picks {
    --stack-gap: 10px;
}

.workload-access-grid {
    display: grid;
    grid-template-columns: max-content auto;
    justify-content: start;
    align-items: center;
    gap: 7px 18px;
}

.workload-pick {
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface);
    box-shadow: var(--m365-shadow);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.workload-pick.is-picked {
    border-color: var(--m365-primary-light);
    background: var(--m365-surface-alt);
    box-shadow: var(--m365-shadow-lg);
}

.workload-pick select {
    background-color: var(--m365-surface);
    border-color: var(--m365-primary-light);
    color: var(--m365-text);
}

.workload-pick select:hover:not(:disabled) {
    border-color: var(--m365-primary);
}

.workload-pick .checkbox-field {
    gap: 12px;
}

.workload-pick .checkbox-field-text {
    gap: 3px;
}

.workload-resources summary {
    cursor: pointer;
    width: fit-content;
}

.workload-resource-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    font-family: var(--m365-mono);
    font-size: 0.72rem;
    color: var(--m365-text-muted);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px 12px;
}

.workload-resource-list li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onboard-workloads { max-width: 560px; }
.dialog-panel .onboard-workloads { max-width: none; }

.onboard-connection { max-width: 560px; }
.onboard-connection.is-in-dialog { max-width: none; }

.onboard-connection.is-in-dialog .onboard-connection-note {
    max-width: 60%;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--m365-text);
}

.organization-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px 32px;
    align-items: start;
}

.organization-name-field { max-width: 420px; }

/* --- Triage board --- */
.board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: start;
}

@media (max-width: 1100px) {
    .board {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    }
}

.board-column {
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-border);
    border-radius: 10px;
    padding: 11px;
}

.board-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: stretch;
    width: 100%;
    padding: 11px;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--m365-border);
    background: var(--m365-surface);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    box-shadow: var(--m365-shadow);
}

.board-card.is-selected {
    border-color: var(--m365-primary);
    background: var(--m365-primary-tint);
}

/* The tick box sits over the card's top-right corner, which the card's padding keeps clear. */
.board-card-shell {
    position: relative;
}

.board-card-shell > .checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.board-card-shell > .board-card {
    padding-right: 38px;
}

/* --- Heatmap --- */
.heatmap {
    display: grid;
    grid-template-columns: 86px repeat(5, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
}

.heat-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--m365-chip-line);
    color: var(--m365-text);
    font-size: 0.66rem;
    font-weight: 700;
}

.heat-swatch {
    width: 16px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--m365-control-border);
}

/* --- Promotion timeline --- */
.timeline-row {
    display: flex;
    gap: 13px;
}

.timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
}

.timeline-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--m365-border);
    background: var(--m365-surface-alt);
}

.timeline-dot.is-current { background: var(--m365-primary); }
.timeline-dot.is-done { background: var(--m365-success); }

.timeline-line {
    width: 2px;
    flex: 1;
    min-height: 32px;
    background: var(--m365-border);
}

/* --- Bar chart (scan history) --- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 104px;
}

.bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    height: 100%;
}

.bar {
    border-radius: 4px 4px 0 0;
    border: 1px solid color-mix(in srgb, var(--m365-primary) 70%, var(--m365-surface));
    border-bottom: none;
    background: var(--m365-primary-tint);
}

.bar-label {
    font-size: 0.6rem;
    text-align: center;
    color: var(--m365-text-muted);
    font-weight: 600;
}

/* --- Header widgets --- */
.scope-picker {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 230px;
}

.scope-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 34px;
    padding: 0 10px 0 8px;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-btn-line);
    border-radius: 6px;
    cursor: pointer;
    color: var(--m365-text);
    font-family: inherit;
    overflow: hidden;
}

.scope-menu {
    position: absolute;
    top: 40px;
    left: 0;
    width: 300px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    background: var(--m365-surface);
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    box-shadow: var(--m365-shadow-lg);
    padding: 6px;
    z-index: 60;
}

.scope-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    min-height: 40px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--m365-text);
    font-family: inherit;
}

.scope-option.is-selected {
    background: var(--m365-primary-tint);
}

.lang-picker {
    position: relative;
    flex: 0 0 auto;
}

.lang-trigger {
    width: auto;
    gap: 5px;
    padding: 0 8px;
}

.lang-menu {
    position: absolute;
    top: 40px;
    right: 0;
    min-width: 190px;
    background: var(--m365-surface);
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    box-shadow: var(--m365-shadow-lg);
    padding: 6px;
    z-index: 60;
}

.lang-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    min-height: 34px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--m365-text);
    font-family: inherit;
    font-size: .81rem;
}

.lang-option.is-selected {
    background: var(--m365-primary-tint);
    font-weight: 600;
}

.lang-option-code {
    flex: 0 0 auto;
    min-width: 22px;
    color: var(--m365-text-muted);
    font-size: .69rem;
    font-weight: 700;
}

.global-search-shell {
    position: relative;
    flex: 1 1 200px;
    min-width: 170px;
    max-width: 380px;
}

.global-search {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 11px;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-control-border);
    border-radius: 6px;
    color: var(--m365-text-muted);
}

.global-search:focus-within {
    outline: 2px solid var(--m365-primary);
    outline-offset: 1px;
    border-color: var(--m365-primary);
}

.global-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--m365-text);
    outline: none;
    text-overflow: ellipsis;
}

.global-search kbd {
    flex: none;
    padding: 1px 5px;
    border: 1px solid var(--m365-chip-line);
    border-radius: 4px;
    background: var(--m365-surface);
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 600;
    color: var(--m365-text-muted);
}

.search-menu {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    min-width: 280px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    background: var(--m365-surface);
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    box-shadow: var(--m365-shadow-lg);
    padding: 6px;
    z-index: 60;
}

.search-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    min-height: 38px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--m365-text);
    font-family: inherit;
}

.search-option:hover,
.search-option.is-active {
    background: var(--m365-primary-tint);
}

.search-note {
    padding: 8px 9px;
    font-size: 0.72rem;
    color: var(--m365-text-muted);
}

.person-picker {
    position: relative;
}

.person-picker-list {
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--m365-surface);
    border: 1px solid var(--m365-border);
    border-radius: 8px;
    padding: 6px;
}

.person-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    min-height: 38px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--m365-text);
    font-family: inherit;
}

.person-option:hover,
.person-option.is-active {
    background: var(--m365-primary-tint);
}

.person-option[aria-disabled="true"] {
    cursor: default;
    color: var(--m365-text-muted);
}

.btn-inline-link {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--m365-primary-text);
    text-decoration: underline;
    cursor: pointer;
}

.btn-inline-link:hover {
    color: var(--m365-primary-dark);
}

.header-count {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--m365-primary-fill);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 860px) {
    .global-search-shell,
    .scope-picker {
        display: none;
    }
}

/* --- Page-level helpers --- */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.bulk-bar.is-active {
    background: var(--m365-primary-tint);
}

.framework-tag,
.baseline-tag {
    display: inline-flex;
    align-items: center;
    background: var(--m365-surface-alt);
    border: 1px solid var(--m365-chip-line);
    white-space: nowrap;
}

.framework-tag {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--m365-text-muted);
}

.baseline-tag {
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--m365-text);
}

.scan-failed {
    font-weight: 700;
}

.tenant-baseline-unassigned {
    font-weight: 700;
}

.wizard-step-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--m365-text);
}

.wizard-step-label.is-current {
    font-weight: 700;
    color: var(--m365-primary-text);
}

.stage-name {
    font-size: 0.78rem;
    font-weight: 600;
}

.stage-name.is-current {
    font-weight: 700;
}

.tree-item.is-active-group {
    background: var(--m365-primary-tint);
    color: var(--m365-primary-text);
}

/* --- Modal dialog ------------------------------------------------------------------
   Scrim plus centred panel, matching the design prototype. The panel is capped at the
   viewport height and scrolls its body rather than the page, so a long confirmation
   list never pushes the footer buttons off screen. */
.dialog-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10, 14, 24, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dialog-wide { width: min(760px, 100%); }

.dialog-panel {
    width: min(620px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--m365-surface);
    border: 1px solid var(--m365-border);
    border-radius: 12px;
    box-shadow: var(--m365-shadow-lg);
    animation: m365-fade-in 0.2s ease both;
}

.dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px 13px;
    border-bottom: 1px solid var(--m365-border);
}

.dialog-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.dialog-title.is-danger {
    color: var(--m365-danger-text);
}

.dialog-sub {
    margin: 5px 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--m365-text-muted);
}

.dialog-close {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--m365-btn-line);
    background: var(--m365-surface);
    color: var(--m365-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
}

.dialog-close:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
}

.dialog-body:empty {
    display: none;
}

.dialog-body:empty + .dialog-error {
    margin-top: 16px;
}

.dialog-body:empty + .dialog-foot {
    border-top: 0;
}

.dialog-error {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 18px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 0.75rem;
    line-height: 1.55;
    background: var(--m365-danger-tint);
    border: 1px solid var(--m365-danger);
}

.dialog-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 18px 17px;
    border-top: 1px solid var(--m365-border);
}

.dialog-foot-hint {
    flex: 1 0 100%;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--m365-text-muted);
    text-align: left;
}


/* ---------------------------------------------------------------------------
   Page flow

   `.surface` carries no margin of its own, so a card can sit inside a grid or a
   dialog without fighting it - which left every page to space its own panels, and
   several forgot. The container does it instead.
   --------------------------------------------------------------------------- */

.page-enter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A child's own bottom margin would add to the gap. `!important` because the
   margins this replaces were inline styles, which would otherwise win - a panel
   added later must not be able to reintroduce the double spacing. */
.page-enter > * {
    margin-bottom: 0 !important;
}

.tab-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tab-panel > * {
    margin-bottom: 0 !important;
}

.tab-panel[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Notifications

   The toast host is fixed rather than absolute: an ancestor with a transform
   becomes the containing block for fixed children, and `.page-enter` is one.
   --------------------------------------------------------------------------- */

.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 9px;

    /* Narrow enough not to cover the page it is reporting on. */
    width: min(360px, calc(100vw - 36px));

    /* The host spans the column; only the toasts themselves take clicks. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--m365-border);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--m365-surface);
    box-shadow: var(--m365-shadow-lg);
    animation: toast-in 160ms ease-out;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
    }

    .loading-spinner {
        animation: none;
        border-top-color: var(--m365-text-muted);
    }
}

.toast-info {
    border-left-color: var(--m365-info-text);
}

.toast-success {
    border-left-color: var(--m365-success-text);
}

.toast-warning {
    border-left-color: var(--m365-warning-text);
}

.toast-danger {
    border-left-color: var(--m365-danger-text);
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.76rem;
    font-weight: 700;
}

.toast-message {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--m365-text-muted);
}

.toast-link {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m365-primary-fill);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.toast-dismiss {
    min-width: 24px;
    min-height: 24px;
    border: 0;
    background: none;
    color: var(--m365-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.notification-indicator {
    position: relative;
    display: flex;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 895;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 440px);
    border: 1px solid var(--m365-border);
    border-radius: 10px;
    background: var(--m365-surface);
    box-shadow: var(--m365-shadow-lg);
}

.notification-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--m365-border);
}

.notification-heading {
    flex: 1;
    font-size: 0.81rem;
    font-weight: 700;
}

.notification-clear {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m365-primary-text);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.notification-empty {
    margin: 0;
    padding: 26px 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--m365-text-muted);
}

/* The head stays put and only the list scrolls, so Clear all is reachable however long the
   history is. */
.notification-list {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.notification-item + .notification-item {
    border-top: 1px solid var(--m365-border);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px 11px 10px;
    border-left: 3px solid transparent;
}

.notification-item:has(button.notification-open):hover {
    background: var(--m365-surface-alt);
}

.notification-glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 800;
}

.notification-dismiss {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--m365-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.notification-dismiss:hover {
    background: var(--m365-surface-alt);
    color: var(--m365-text);
}

.notification-info {
    border-left-color: var(--m365-info-text);
}

.notification-info .notification-glyph {
    background: var(--m365-info-tint);
    color: var(--m365-info-text);
}

.notification-success {
    border-left-color: var(--m365-success-text);
}

.notification-success .notification-glyph {
    background: var(--m365-success-tint);
    color: var(--m365-success-text);
}

.notification-warning {
    border-left-color: var(--m365-warning-text);
}

.notification-warning .notification-glyph {
    background: var(--m365-warning-tint);
    color: var(--m365-warning-text);
}

.notification-danger {
    border-left-color: var(--m365-danger-text);
}

.notification-danger .notification-glyph {
    background: var(--m365-danger-tint);
    color: var(--m365-danger-text);
}

.notification-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

div.notification-open {
    cursor: default;
}

.notification-title {
    font-size: 0.74rem;
    font-weight: 700;
}

.notification-message,
.notification-when {
    font-size: 0.7rem;
    color: var(--m365-text-muted);
}

.info-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.info-tip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--m365-text-muted);
    cursor: pointer;
}

.info-tip-trigger:hover,
.info-tip-trigger:focus-visible {
    color: var(--m365-primary-text);
}

.info-tip-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 895;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: min(320px, calc(100vw - 24px));
    padding: 11px 13px;
    border: 1px solid var(--m365-border);
    border-radius: 10px;
    background: var(--m365-surface);
    box-shadow: var(--m365-shadow-lg);
    text-align: left;
    white-space: normal;
}

.info-tip-title {
    font-size: 0.78rem;
    font-weight: 700;
}

.info-tip-message {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--m365-text-muted);
}

.health-tile-filter {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

[data-health-tile] .eyebrow {
    line-height: 1.3;
}

.health-tile-filter:focus-visible {
    outline: 2px solid var(--m365-primary);
    outline-offset: 4px;
}

.health-tile-filter[aria-pressed="true"] .stat-value {
    color: var(--m365-primary-text);
}