/* ==========================================================================
   DANX Carousel — Site & Continuity Portal
   Layered over MudBlazor. Brand palette, layout rhythm and the components
   MudBlazor does not provide: the coverage matrix, stat tiles, print packs.
   ========================================================================== */

/* Brand colours are fixed: they identify DANX and do not vary with the colour scheme. */
:root {
    /* Brand colours come from the active brand (BrandService writes --brand-*). The old
       names are kept as aliases so every existing rule follows the brand. */
    --danx-navy: var(--brand-nav, #1C1C1C);
    --danx-blue: var(--brand-primary, #2A2A2A);
    --danx-bright: var(--mud-palette-primary);
    --danx-light: var(--brand-accent, #F5B408);
    --danx-pale: color-mix(in srgb, var(--brand-nav-ink, #fff) 70%, transparent);
    --danx-gold: var(--brand-accent, #F5B408);
    --danx-magenta: var(--brand-eyebrow, #9A6E00);

    --danx-surface: var(--mud-palette-surface);
    --danx-canvas: var(--mud-palette-background);
    --danx-line: var(--mud-palette-lines-default);
    --danx-ink: var(--mud-palette-text-primary);
    --danx-ink-soft: var(--mud-palette-text-secondary);
    --danx-grey: var(--mud-palette-text-secondary);
    --danx-grey-light: var(--mud-palette-lines-default);

    /* Status colours, reserved for status. */
    --danx-green: var(--mud-palette-success);
    --danx-amber: var(--mud-palette-warning);
    --danx-red: var(--mud-palette-error);
    --danx-status-info: var(--mud-palette-info);
    --danx-status-neutral: var(--mud-palette-text-secondary);
    --danx-display: var(--mud-palette-text-primary);

    --ops-green: var(--mud-palette-success);
    --ops-amber: var(--mud-palette-warning);
    --ops-red: var(--mud-palette-error);
    --ops-blue: var(--mud-palette-info);
    --ops-violet: #7C3AED;
    --ops-neutral: var(--mud-palette-text-secondary);
    --ops-accent: var(--brand-accent, #F5B408);
    --ops-line: var(--mud-palette-lines-default);

    --danx-radius: 12px;
    --danx-gap: 16px;
}

html, body {
    font-family: var(--brand-font, 'Manrope', 'Segoe UI', system-ui, sans-serif);
    margin: 0;
}

/* ------------------------------------------------------------------ layout */

.danx-main {
    background: var(--danx-canvas);
    min-height: 100vh;
}

.danx-content {
    padding: 24px 28px 48px;
    max-width: 1680px;
}

@media (max-width: 720px) {
    .danx-content { padding: 16px 16px 32px; }
}

.danx-appbar {
    border-bottom: 1px solid var(--danx-line);
    backdrop-filter: saturate(180%) blur(8px);
}

.danx-search-trigger {
    min-width: 280px;
    justify-content: flex-start;
    border-color: var(--danx-line);
    color: var(--danx-ink-soft);
    text-transform: none;
}

.danx-search-label {
    font-weight: 400;
    font-size: 0.8125rem;
}

.danx-kbd {
    border: 1px solid var(--danx-line);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}

@media (max-width: 960px) {
    .danx-search-trigger { min-width: 0; }
    .danx-search-label { display: none; }
}

.danx-user-button { text-transform: none; }

.danx-user-meta {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.danx-user-name { font-size: 0.8125rem; font-weight: 500; }
.danx-user-role { font-size: 0.6875rem; opacity: 0.7; }

/* --------------------------------------------------------------- navigation */

.danx-drawer { border-right: none; }

.danx-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 60px;
}

.danx-brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: var(--brand-accent, #F5B408);
    color: var(--brand-accent-ink, #1A1A1A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.danx-brand-mark-lg {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 1.125rem;
    border-radius: 12px;
}

.danx-brand-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.danx-brand-name { color: #fff; font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.danx-brand-sub { color: var(--danx-pale); font-size: 0.6875rem; white-space: nowrap; }

.danx-nav { padding-top: 8px; }

.danx-nav-label {
    padding: 14px 20px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-nav-ink, #fff) 45%, transparent);
    white-space: nowrap;
}

.danx-nav-divider {
    border-color: rgba(255, 255, 255, 0.07) !important;
    margin: 6px 0 0;
}

.danx-nav .mud-nav-link {
    font-size: 0.8125rem;
    border-radius: 0 20px 20px 0;
    margin-right: 10px;
}

.danx-nav .mud-nav-link.active {
    background: color-mix(in srgb, var(--brand-accent, #F5B408) 16%, transparent);
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-accent, #F5B408);
}
.danx-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--brand-accent, #F5B408) !important; }

/* Mini drawer hides labels; the dividers alone would look like stray rules. */
.mud-drawer--closed .danx-nav-label,
.mud-drawer--closed .danx-brand-text { display: none; }

/* ------------------------------------------------------------ page headers */

.danx-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    /* Reserved height keeps the action buttons on the same line from page to page
       whether or not a lead paragraph is present. */
    min-height: 62px;
}

.danx-page-header-text { min-width: 0; flex: 1 1 auto; }

.danx-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 4px;
}

.danx-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--danx-magenta);
    margin-bottom: 4px;
}

.danx-eyebrow-invert { color: var(--danx-gold); }

.danx-page-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--danx-ink);
    letter-spacing: -0.01em;
}

.danx-page-lead {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--danx-ink-soft);
    max-width: 90ch;
}

.danx-breadcrumbs .mud-breadcrumb-item { font-size: 0.75rem; }

@media (max-width: 720px) {
    .danx-page-header { flex-direction: column; gap: 12px; }
    .danx-page-actions { padding-top: 0; }
}

/* -------------------------------------------------------------------- cards */

.danx-card {
    background: var(--danx-surface);
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    padding: 20px;
}

.danx-card-flush { padding: 0; }

.danx-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 12px;
}

.danx-card-foot {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--danx-line);
}

/* Gold marks the single most important callout on a screen. Used sparingly. */
.danx-card-accent { border-top: 3px solid var(--danx-gold); }

.danx-kv {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--danx-line);
}

.danx-kv:last-child { border-bottom: none; }
.danx-kv > span:first-child { color: var(--danx-ink-soft); flex: 0 0 auto; }
.danx-kv > span:last-child { text-align: right; font-weight: 500; }

/* --------------------------------------------------------------- stat tiles */

.danx-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--danx-gap);
    margin-bottom: 20px;
}

.danx-stat {
    background: var(--danx-surface);
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.danx-stat-link { cursor: pointer; }

.danx-stat-link:hover {
    border-color: var(--danx-light);
    transform: translateY(-1px);
}

.danx-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.danx-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
}

.danx-stat-icon { color: var(--danx-pale); }

.danx-stat-value {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--danx-display);
    letter-spacing: -0.02em;
}

.danx-stat-suffix { font-size: 1rem; font-weight: 500; margin-left: 2px; }

.danx-stat-caption {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    margin-top: 4px;
}

/* -------------------------------------------------------------- tier chips */

.danx-tier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.danx-tier-dense { padding: 1px 8px; font-size: 0.625rem; }

/* Background is a tint of the text colour. Declared twice: the flat rgba is the fallback
   for anything without color-mix, the second declaration wins everywhere else and keeps
   the tint correct when the status colour changes with the theme. */
.danx-tier-critical { background: rgba(197, 34, 31, 0.12); color: var(--danx-red); border-color: rgba(197, 34, 31, 0.25); }
.danx-tier-high { background: rgba(232, 163, 23, 0.14); color: var(--danx-amber); border-color: rgba(232, 163, 23, 0.3); }
.danx-tier-medium { background: rgba(40, 95, 241, 0.10); color: var(--danx-status-info); border-color: rgba(40, 95, 241, 0.22); }
.danx-tier-low { background: rgba(86, 86, 86, 0.08); color: var(--danx-status-neutral); border-color: rgba(86, 86, 86, 0.18); }

.danx-tier-critical {
    background: color-mix(in srgb, var(--danx-red) 13%, transparent);
    border-color: color-mix(in srgb, var(--danx-red) 30%, transparent);
}

.danx-tier-high {
    background: color-mix(in srgb, var(--danx-amber) 15%, transparent);
    border-color: color-mix(in srgb, var(--danx-amber) 32%, transparent);
}

.danx-tier-medium {
    background: color-mix(in srgb, var(--danx-status-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--danx-status-info) 26%, transparent);
}

.danx-tier-low {
    background: color-mix(in srgb, var(--danx-status-neutral) 10%, transparent);
    border-color: color-mix(in srgb, var(--danx-status-neutral) 22%, transparent);
}

.danx-tier-override { font-size: 0.625rem !important; opacity: 0.7; }

.danx-tier-row { margin-bottom: 14px; }

.danx-tier-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.danx-tier-count { font-weight: 600; font-size: 0.9375rem; }

.danx-tier-bar {
    height: 6px;
    background: var(--danx-line);
    border-radius: 999px;
    overflow: hidden;
}

.danx-tier-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }

.danx-tier-note {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-top: 4px;
}

/* -------------------------------------------------------------- work list */

.danx-work-list { padding: 0; }

.danx-work-item { border-bottom: 1px solid var(--danx-line); }
.danx-work-item:last-child { border-bottom: none; }

.danx-work-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.danx-work-main { min-width: 0; }

.danx-work-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danx-ink);
}

.danx-work-detail {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.danx-work-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.danx-work-category {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    white-space: nowrap;
}

.danx-work-due { font-size: 0.6875rem; color: var(--danx-ink-soft); white-space: nowrap; }
.danx-overdue { color: var(--danx-red); font-weight: 600; }

/* --------------------------------------------------------- coverage matrix */

.danx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.danx-legend-item { display: flex; align-items: center; gap: 7px; }

.danx-legend-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
}

.danx-legend-label { font-size: 0.75rem; color: var(--danx-ink-soft); }

.danx-legend-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danx-ink);
}

.danx-matrix-wrap {
    overflow: auto;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: var(--danx-surface);
    max-height: calc(100vh - 340px);
}

.danx-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
    width: max-content;
    min-width: 100%;
}

/* Both axes stay visible while scrolling — a matrix you lose your place in is useless. */
.danx-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--danx-surface);
}

.danx-matrix-band {
    z-index: 4;
}

.danx-matrix-band-cell {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--danx-canvas);
    border-bottom: 1px solid var(--danx-line);
    border-right: 1px solid var(--danx-line);
    padding: 6px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
    text-align: left;
    white-space: nowrap;
}

.danx-matrix-corner,
.danx-matrix-row {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--danx-surface);
    border-right: 2px solid var(--danx-line);
    text-align: left;
    padding: 6px 12px;
    min-width: 230px;
}

.danx-matrix-corner { z-index: 6; top: 0; border-bottom: 1px solid var(--danx-line); }

.danx-matrix-corner-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
}

.danx-matrix-col {
    /* Rotated so thirty columns fit without the table becoming metres wide. */
    height: 132px;
    width: 30px;
    min-width: 30px;
    padding: 0;
    vertical-align: bottom;
    border-bottom: 1px solid var(--danx-line);
}

.danx-matrix-col-label {
    display: block;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    padding: 8px 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--danx-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.danx-matrix-col-label:hover { color: var(--danx-bright); }

.danx-matrix-code { font-family: ui-monospace, 'Cascadia Code', monospace; }

.danx-matrix-row-link {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    text-decoration: none;
    color: var(--danx-ink);
    max-width: 210px;
}

.danx-matrix-row-link:hover .danx-matrix-site-name { color: var(--danx-bright); }

.danx-matrix-flag { font-size: 0.875rem; }

.danx-matrix-site-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-weight: 600;
    font-size: 0.75rem;
}

.danx-matrix-site-name {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danx-matrix-warn { color: var(--danx-grey); margin-left: 6px; vertical-align: middle; }

.danx-matrix tbody tr:hover th,
.danx-matrix tbody tr:hover td { background: var(--danx-canvas); }

.danx-matrix-cell {
    padding: 2px;
    text-align: center;
    border-bottom: 1px solid var(--danx-line);
}

.danx-cell {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: default;
}

.danx-cell-mark {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}

.danx-matrix-rowend {
    position: sticky;
    right: 0;
    background: var(--danx-surface);
    border-left: 1px solid var(--danx-line);
    border-bottom: 1px solid var(--danx-line);
    padding: 0 4px;
    text-align: center;
    z-index: 2;
}

.danx-matrix-tip { font-size: 0.75rem; line-height: 1.5; }
.danx-matrix-tip strong { display: block; margin-bottom: 2px; }

/* --------------------------------------------------------- command palette */

.danx-palette .mud-dialog { border-radius: 12px; overflow: hidden; }
.danx-palette-input { margin: 0; }
.danx-palette-list { max-height: 420px; overflow-y: auto; }

.danx-palette-group {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
    line-height: 2;
}

.danx-palette-sub {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-left: 12px;
}

/* -------------------------------------------------------------- empty state */

.danx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
}

.danx-empty-icon { color: var(--danx-grey-light); margin-bottom: 12px; }
.danx-empty-title { font-size: 0.9375rem; font-weight: 600; color: var(--danx-ink); }

.danx-empty-detail {
    font-size: 0.8125rem;
    color: var(--danx-ink-soft);
    margin-top: 6px;
    max-width: 52ch;
}

/* ------------------------------------------------------------------- login */

.danx-login {
    display: grid;
    grid-template-columns: minmax(380px, 460px) 1fr;
    min-height: 100vh;
    background: var(--danx-canvas);
}

.danx-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    background: #fff;
}

.danx-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 36px;
}

.danx-login-title { font-size: 1.125rem; font-weight: 600; color: var(--danx-navy); }
.danx-login-sub { font-size: 0.8125rem; color: var(--danx-grey); }

.danx-login-form { display: flex; flex-direction: column; gap: 16px; }

.danx-field { display: flex; flex-direction: column; gap: 6px; }

.danx-field-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--danx-grey);
}

.danx-field-input {
    padding: 11px 13px;
    border: 1px solid var(--danx-grey-light);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--danx-ink);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.danx-field-input:focus {
    outline: none;
    border-color: var(--danx-bright);
    box-shadow: 0 0 0 3px rgba(40, 95, 241, 0.14);
}

.danx-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8125rem;
    color: var(--danx-grey);
    cursor: pointer;
}

.danx-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    background: var(--danx-blue);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.danx-login-button:hover { background: var(--danx-bright); }

.danx-login-error {
    padding: 11px 14px;
    border-radius: 8px;
    background: rgba(197, 34, 31, 0.08);
    border: 1px solid rgba(197, 34, 31, 0.25);
    color: var(--danx-red);
    font-size: 0.8125rem;
}

.danx-login-foot {
    margin-top: 28px;
    font-size: 0.6875rem;
    color: var(--danx-grey);
    line-height: 1.6;
}

.danx-login-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 64px;
    background: linear-gradient(150deg, var(--danx-navy) 0%, var(--danx-blue) 100%);
    color: #fff;
}

.danx-login-aside h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.danx-login-aside p {
    font-size: 0.9375rem;
    color: var(--danx-pale);
    max-width: 48ch;
    margin: 0 0 24px;
    line-height: 1.6;
}

.danx-login-aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.danx-login-aside li {
    position: relative;
    padding-left: 22px;
    font-size: 0.875rem;
    color: #DCE7FC;
}

.danx-login-aside li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--danx-gold);
}

@media (max-width: 900px) {
    .danx-login { grid-template-columns: 1fr; }
    .danx-login-aside { display: none; }
    .danx-login-panel { padding: 32px 24px; }
}

/* ----------------------------------------------------------------- tables */

.mud-table-container { font-size: 0.8125rem; }

/* Thinner rows. The old portal's grids wasted half the screen on padding. */
.danx-grid .mud-table-cell {
    padding: 7px 12px;
    height: auto;
}

.danx-grid .mud-table-head .mud-table-cell {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
    white-space: nowrap;
}

.danx-grid .mud-table-row:hover { background: var(--danx-canvas) !important; }

.danx-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.danx-muted { color: var(--danx-ink-soft); }

.danx-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ declarations */

.danx-declare-group {
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--danx-surface);
}

.danx-declare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: var(--danx-canvas);
    border-bottom: 1px solid var(--danx-line);
}

.danx-declare-title {
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.danx-declare-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--danx-line);
}

.danx-declare-row:last-child { border-bottom: none; }
.danx-declare-row.is-on { background: rgba(40, 95, 241, 0.03); }

.danx-declare-body { flex: 1 1 auto; min-width: 0; }

.danx-declare-name {
    font-size: 0.8125rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.danx-declare-desc {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    margin-top: 2px;
}

/* ---------------------------------------------------------------- scenarios */

.danx-phase {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--danx-canvas);
    border: 1px solid var(--danx-line);
    color: var(--danx-ink-soft);
    white-space: nowrap;
}

.danx-phase-immediate { background: rgba(197, 34, 31, 0.08); border-color: rgba(197, 34, 31, 0.2); color: var(--danx-red); }
.danx-phase-shortterm { background: rgba(232, 163, 23, 0.10); border-color: rgba(232, 163, 23, 0.25); color: var(--danx-amber); }
.danx-phase-recovery { background: rgba(40, 95, 241, 0.08); border-color: rgba(40, 95, 241, 0.2); color: var(--danx-status-info); }

.danx-phase-immediate {
    background: color-mix(in srgb, var(--danx-red) 10%, transparent);
    border-color: color-mix(in srgb, var(--danx-red) 24%, transparent);
}

.danx-phase-shortterm {
    background: color-mix(in srgb, var(--danx-amber) 12%, transparent);
    border-color: color-mix(in srgb, var(--danx-amber) 26%, transparent);
}

.danx-phase-recovery {
    background: color-mix(in srgb, var(--danx-status-info) 10%, transparent);
    border-color: color-mix(in srgb, var(--danx-status-info) 22%, transparent);
}

.danx-action-row {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--danx-line);
    font-size: 0.8125rem;
}

.danx-action-row:last-child { border-bottom: none; }

.danx-action-owner {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-top: 3px;
}

.danx-statutory {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--danx-gold) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--danx-gold) 45%, transparent);
    color: var(--danx-gold);
    font-size: 0.625rem;
    font-weight: 600;
}

/* -------------------------------------------------------------------- print */

/* The pack is a preview of a printed page, so it stays light in both schemes: what is on
   screen should match what comes out of the printer. Redeclaring the tokens locally makes
   every nested rule follow, without any of them needing to know about printing. */
.danx-pack {
    background: #fff;
    color: #101828;

    --danx-surface: #ffffff;
    --danx-canvas: #f7f9fc;
    --danx-line: #d8d8d8;
    --danx-ink: #101828;
    --danx-ink-soft: #565656;
    --danx-grey: #565656;
    --danx-grey-light: #d8d8d8;
    --danx-display: #082255;
}

.danx-pack-page {
    max-width: 210mm;
    margin: 0 auto 24px;
    padding: 18mm 16mm;
    background: #fff;
    border: 1px solid var(--danx-line);
    border-radius: 4px;
}

.danx-pack-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--danx-navy);
    margin-bottom: 20px;
}

.danx-pack-title { font-size: 1.5rem; font-weight: 600; color: var(--danx-navy); margin: 0; }
.danx-pack-sub { font-size: 0.8125rem; color: var(--danx-grey); margin-top: 4px; }

.danx-pack-meta { text-align: right; font-size: 0.6875rem; color: var(--danx-grey); line-height: 1.7; }

.danx-pack h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--danx-navy);
    margin: 22px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--danx-grey-light);
}

.danx-pack h3 { font-size: 0.875rem; font-weight: 600; margin: 16px 0 6px; }

.danx-pack table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-bottom: 14px;
}

.danx-pack th,
.danx-pack td {
    border: 1px solid var(--danx-grey-light);
    padding: 6px 9px;
    text-align: left;
    vertical-align: top;
}

.danx-pack th { background: #F1F4F9; font-weight: 600; }

.danx-pack-callout {
    padding: 11px 14px;
    background: #F7F9FC;
    border-left: 4px solid var(--danx-gold);
    font-size: 0.75rem;
    margin: 12px 0;
}

@media print {
    @page { size: A4; margin: 14mm; }

    body { background: #fff !important; }

    .mud-appbar,
    .mud-drawer,
    .danx-no-print { display: none !important; }

    .mud-main-content { padding: 0 !important; margin: 0 !important; }

    .danx-content { padding: 0 !important; max-width: none !important; }

    .danx-pack-page {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        page-break-after: always;
    }

    .danx-pack-page:last-child { page-break-after: auto; }

    .danx-pack h2 { page-break-after: avoid; }
    .danx-pack table { page-break-inside: auto; }
    .danx-pack tr { page-break-inside: avoid; }
}

/* --------------------------------------------------------- impact scoring */

.danx-sticky { position: sticky; top: 80px; }

.danx-impact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--danx-line);
    flex-wrap: wrap;
}

.danx-impact-row:last-of-type { border-bottom: none; }

.danx-impact-label { display: flex; flex-direction: column; min-width: 220px; flex: 1 1 260px; }

.danx-impact-label > span:first-child {
    font-size: 0.8125rem;
    font-weight: 500;
}

.danx-impact-help {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-top: 2px;
}

.danx-impact-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.danx-impact-step {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--danx-line);
    background: var(--danx-surface);
    color: var(--danx-ink-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.danx-impact-step:hover { border-color: var(--danx-light); }
.danx-impact-step.is-on { color: #fff; transform: scale(1.06); }

.danx-impact-current {
    min-width: 88px;
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-left: 6px;
}

@media (max-width: 720px) {
    .danx-impact-current { display: none; }
    .danx-sticky { position: static; }
}

/* ------------------------------------------------------------------- tabs */

.danx-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--danx-line); }

.danx-tabs .mud-tab {
    text-transform: none;
    font-size: 0.8125rem;
    min-height: 44px;
}

.danx-stepper { box-shadow: none; }

.danx-audit .mud-timeline-item-content { padding-bottom: 20px; }

.danx-pack-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--danx-surface);
    border-bottom: 1px solid var(--danx-line);
    margin-bottom: 20px;
}

/* ============================================================== estate map */

.danx-stat-row-tight { margin-bottom: 16px; }

.danx-map-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--danx-gap);
    align-items: start;
}

@media (max-width: 1100px) {
    .danx-map-layout { grid-template-columns: 1fr; }
}

.danx-map-side {
    display: flex;
    flex-direction: column;
    gap: var(--danx-gap);
    /* Filters stay put while the map is panned. */
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 110px);
}

.danx-map-filters { flex: 0 0 auto; }

.danx-filter-group { margin-bottom: 14px; }
.danx-filter-group:last-child { margin-bottom: 0; }

.danx-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
    margin-bottom: 6px;
}

.danx-filter-chips .mud-chip { margin: 0 4px 4px 0; font-size: 0.6875rem; }

.danx-map-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.danx-map-sites {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.danx-map-site {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 16px;
    border: none;
    border-bottom: 1px solid var(--danx-line);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--danx-ink);
}

.danx-map-site:hover { background: var(--danx-canvas); }
.danx-map-site:last-child { border-bottom: none; }

.danx-map-site-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 7px; }

.danx-map-site-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.danx-map-site-name {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danx-map-site-meta {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    flex: 0 0 auto;
    white-space: nowrap;
}

.danx-map-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}

/* Declaration state. A status report, so the RAG palette is doing its proper job. */
.danx-map-dot-current { background: var(--danx-green); }
.danx-map-dot-lapsed { background: var(--danx-amber); }
.danx-map-dot-never { background: var(--danx-red); }

.danx-map-unplaced {
    display: flex;
    gap: 9px;
    padding: 11px 16px;
    border-top: 1px solid var(--danx-line);
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    background: var(--danx-canvas);
}

.danx-map-panel { position: relative; overflow: hidden; }

.danx-map {
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 460px;
    background: var(--danx-canvas);
}

.danx-map-picker {
    height: 280px;
    min-height: 280px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    overflow: hidden;
}

.danx-map-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 500;
    display: flex;
    gap: 14px;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--danx-surface);
    border: 1px solid var(--danx-line);
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ---- markers ---- */

.danx-pin-wrap { background: none; border: none; }

.danx-pin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transform: translate(-7px, -7px);
    white-space: nowrap;
}

.danx-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pin);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    flex: 0 0 auto;
}

.danx-pin-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--danx-ink);
    background: var(--danx-surface);
    border: 1px solid var(--danx-line);
    border-radius: 4px;
    padding: 1px 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ---- popups ---- */

.danx-pop-shell .leaflet-popup-content-wrapper {
    background: var(--danx-surface);
    color: var(--danx-ink);
    border-radius: var(--danx-radius);
    border: 1px solid var(--danx-line);
}

.danx-pop-shell .leaflet-popup-tip { background: var(--danx-surface); }
.danx-pop-shell .leaflet-popup-content { margin: 12px 14px; font-family: inherit; }

.danx-pop-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }

.danx-pop-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-weight: 700;
    font-size: 0.8125rem;
}

.danx-pop-name { font-size: 0.8125rem; color: var(--danx-ink-soft); }

.danx-pop-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

.danx-pop-status { font-size: 0.6875rem; margin-bottom: 8px; font-weight: 500; }
.danx-pop-current { color: var(--danx-green); }
.danx-pop-lapsed { color: var(--danx-amber); }
.danx-pop-never { color: var(--danx-red); }

.danx-pop-table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.danx-pop-table th {
    text-align: left;
    font-weight: 400;
    color: var(--danx-ink-soft);
    padding: 2px 10px 2px 0;
    vertical-align: top;
    white-space: nowrap;
}
.danx-pop-table td { padding: 2px 0; }

.danx-pop-link {
    display: inline-block;
    margin-top: 9px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.danx-pop-link:hover { text-decoration: underline; }

/* Map library chrome, brought into the theme. Both providers reuse the pin and popup
   markup above, so only their own furniture needs restyling. */

.maplibregl-map { font-family: inherit; }

.maplibregl-popup.danx-pop-shell .maplibregl-popup-content {
    background: var(--danx-surface);
    color: var(--danx-ink);
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    padding: 12px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.maplibregl-popup.danx-pop-shell .maplibregl-popup-tip { border-top-color: var(--danx-surface); }
.maplibregl-popup.danx-pop-shell .maplibregl-popup-close-button {
    color: var(--danx-ink-soft);
    font-size: 1.125rem;
    padding: 0 6px;
}

.maplibregl-ctrl-group {
    background: var(--danx-surface) !important;
    border: 1px solid var(--danx-line) !important;
}

.maplibregl-ctrl-group button + button { border-top-color: var(--danx-line) !important; }

.maplibregl-ctrl-attrib {
    background: color-mix(in srgb, var(--danx-surface) 88%, transparent) !important;
    color: var(--danx-ink-soft) !important;
    font-size: 0.625rem !important;
}

.maplibregl-ctrl-attrib a { color: var(--mud-palette-primary) !important; }

/* Google renders its info window into its own shell, so the inner card is made flush. */
.gm-style .gm-style-iw-c {
    background: var(--danx-surface) !important;
    border-radius: var(--danx-radius) !important;
    padding: 12px 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

.gm-style .gm-style-iw-d { overflow: hidden !important; background: transparent !important; }
.gm-style .gm-style-iw-tc::after { background: var(--danx-surface) !important; }
.gm-style .gm-style-iw-c .danx-pop { color: var(--danx-ink); }
.gm-style .gm-ui-hover-effect > span { background-color: var(--danx-ink-soft) !important; }

/* The overlay pin is positioned by the Google projection, so it anchors from its centre. */
.gm-style .danx-pin { transform: translate(-7px, -50%); }

/* Shown in place of the map when the library or its tiles cannot be reached. The site
   list and filters beside it still work, so this explains rather than blocks. */
.danx-map-down {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 32px;
    text-align: center;
    background: var(--danx-canvas);
}

.danx-map-down-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--danx-ink);
    margin-bottom: 6px;
}

.danx-map-down-detail {
    font-size: 0.8125rem;
    color: var(--danx-ink-soft);
    max-width: 52ch;
    line-height: 1.6;
}

.danx-map-site-entity {
    display: block;
    font-size: 0.625rem;
    opacity: 0.75;
    text-align: right;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================ dashboard */

/* Cards in the lower row match height so the two columns read as a pair. */
.danx-fill { height: 100%; }

.danx-footprint { overflow: hidden; }

.danx-map-dashboard {
    height: 420px;
    min-height: 320px;
    border-top: 1px solid var(--danx-line);
    border-bottom: 1px solid var(--danx-line);
}

@media (max-width: 720px) {
    .danx-map-dashboard { height: 300px; min-height: 260px; }
}

/* Inside the footprint card the legend sits in the flow rather than over the map. */
.danx-map-legend-inline {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 10px 20px 0;
    flex-wrap: wrap;
    align-items: center;
}

.danx-legend-hint {
    margin-left: auto;
    font-size: 0.625rem;
    opacity: 0.7;
}

/* ---- region cards ---- */

.danx-region-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px 20px 20px;
}

.danx-region {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: var(--danx-surface);
    font-family: inherit;
    color: var(--danx-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.danx-region:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.danx-region.is-focused {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--danx-surface));
}

.danx-region-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.danx-region-name {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Count of sites in the region that owe a declaration. A status, so amber is correct. */
.danx-region-flag {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--danx-amber) 18%, transparent);
    color: var(--danx-amber);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.danx-region-value {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--danx-display);
    letter-spacing: -0.02em;
}

.danx-region-label {
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-bottom: 8px;
}

.danx-region-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.6875rem;
    color: var(--danx-ink-soft);
    margin-bottom: 9px;
}

.danx-region-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--danx-line);
    overflow: hidden;
    margin-top: auto;
}

.danx-region-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--danx-green);
    transition: width 0.3s ease;
}

/* ---- the burden callout ---- */

.danx-burden {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--danx-radius);
    background: var(--danx-canvas);
    border-top: 3px solid var(--danx-gold);
}

.danx-burden-figures {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.danx-burden-figures > div {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.danx-burden-value {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--danx-display);
}

.danx-burden-label {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--danx-ink-soft);
}

.danx-burden-note {
    font-size: 0.75rem;
    color: var(--danx-ink-soft);
    line-height: 1.55;
}

/* MudTabs has no panel-class parameter, so the spacing between the tab strip and its
   content is set here rather than passed in. */
.danx-tabs .mud-tabs-panels { padding-top: 16px; }

/* ===================================================================== */
/*  Site manager area                                                     */
/*  Built for somebody who opens the portal twice a year. Bigger targets,  */
/*  fewer things on screen, and every colour still drawn from the tokens   */
/*  above so the light/dark toggle carries through.                       */
/* ===================================================================== */

.danx-kv > strong:last-child { text-align: right; font-weight: 500; }

.danx-my-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--danx-gap);
}

.danx-my-card { display: flex; flex-direction: column; }

.danx-my-figures {
    display: flex;
    gap: 24px;
    margin-bottom: 4px;
}

.danx-my-figure {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--danx-display);
}

.danx-my-figure-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--danx-ink-soft);
}

/* ------------------------------------------------------- functions on a site */

.danx-fn-group { margin-bottom: 14px; }

.danx-fn-kind {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--danx-ink-soft);
    margin-bottom: 6px;
}

/* --------------------------------------------------------- security answers */

.danx-sec-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--danx-line);
}

.danx-sec-line:last-child { border-bottom: none; }
.danx-sec-question { font-size: 0.875rem; }

.danx-sec-note {
    font-size: 0.78rem;
    color: var(--danx-ink-soft);
    margin-top: 2px;
}

/* ===================================================================== */
/*  The survey                                                            */
/* ===================================================================== */

.danx-survey { max-width: 900px; margin: 0 auto; }
.danx-survey-head { margin-bottom: 20px; }

.danx-survey-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.danx-survey-step {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: var(--danx-surface);
    color: var(--danx-ink-soft);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.danx-survey-step:disabled { opacity: 0.45; cursor: default; }

.danx-survey-step-no {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--danx-canvas);
    border: 1px solid var(--danx-line);
    font-weight: 600;
    flex: 0 0 auto;
}

.danx-survey-step-on {
    border-color: var(--mud-palette-primary);
    color: var(--danx-ink);
}

.danx-survey-step-on .danx-survey-step-no {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.danx-survey-step-done { color: var(--danx-ink); }

.danx-survey-body { padding: 24px; }

.danx-survey-q {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--danx-ink);
}

.danx-survey-help {
    margin: 0 0 18px;
    color: var(--danx-ink-soft);
    font-size: 0.875rem;
    max-width: 62ch;
}

/* ------------------------------------------------------- function selection */

.danx-survey-tally {
    padding: 12px 14px;
    border-radius: var(--danx-radius);
    background: var(--danx-canvas);
    border: 1px solid var(--danx-line);
    font-size: 0.85rem;
}

/* ------------------------------------------------------- security questions */

.danx-choice {
    padding: 7px 16px;
    border: 1px solid var(--danx-line);
    border-radius: 999px;
    background: var(--danx-surface);
    color: var(--danx-ink-soft);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.danx-choice:hover { color: var(--danx-ink); }

/* Selected only. An unselected control is never coloured, so the row reads as an answer
   rather than as a traffic light. */
.danx-choice-yes.danx-choice-on {
    background: var(--danx-green);
    border-color: var(--danx-green);
    color: #fff;
}

.danx-choice-no.danx-choice-on {
    background: var(--danx-amber);
    border-color: var(--danx-amber);
    color: #1a1a1a;
}

.danx-choice-na.danx-choice-on {
    background: var(--danx-status-neutral);
    border-color: var(--danx-status-neutral);
    color: #fff;
}

/* ------------------------------------------------------------- confirmation */

.danx-survey-summary {
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    padding: 4px 14px;
}

.danx-blockers { margin: 6px 0 0; padding-left: 18px; }
.danx-blockers li { font-size: 0.85rem; }

.danx-survey-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.danx-survey-nav > :last-child { margin-left: auto; }

@media (max-width: 600px) {
    .danx-survey-step-label { display: none; }
    .danx-survey-step { flex: 0 0 auto; }
}

/* Function activity picker, administration only. Three columns of checkboxes reads far
   faster than one long list when a function holds a dozen activities. */
.danx-fn-picklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 18px;
}

.danx-fn-picklist-group { break-inside: avoid; margin-bottom: 8px; }

/* Sign out is a real submit button so it needs no JavaScript. Styled to sit in the menu as
   if it were an ordinary item. */
.danx-logout {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

/* ------------------------------------------------------------ manager tasks */

.danx-tasks { border-left: 3px solid var(--mud-palette-primary); }

.danx-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--danx-line);
}

.danx-task:last-child { border-bottom: none; }

/* The RAG dot. Reserved for status, which is precisely what this is. */
.danx-rag {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.danx-task-text { flex: 1 1 auto; min-width: 0; }
.danx-task-site { font-weight: 600; font-size: 0.9rem; }

.danx-task-why {
    font-size: 0.78rem;
    color: var(--danx-ink-soft);
    margin-top: 1px;
}

@media (max-width: 600px) {
    .danx-task { flex-wrap: wrap; }
    .danx-task-text { flex: 1 1 100%; order: 2; }
}

/* ------------------------------------------------------------- single sign-on */

.danx-sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: #ffffff;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.danx-sso-button:hover { border-color: var(--mud-palette-primary); }

/* The divider between single sign-on and the password form. */
.danx-login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--danx-ink-soft);
    font-size: 0.78rem;
}

.danx-login-or::before,
.danx-login-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--danx-line);
}

/* The account activator. A plain element rather than a button, so the menu can open. */
.danx-user-button {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--danx-radius);
    cursor: pointer;
    user-select: none;
}

.danx-user-button:hover { background: rgba(255, 255, 255, 0.08); }
.danx-user-caret { opacity: 0.7; }

/* Sign out at the foot of the drawer, matching the nav links around it. */
/* Matched to .mud-nav-link above it - same colour, size, padding and pill shape - so it
   reads as one more item in the list rather than something bolted on the end. */
.danx-nav-signout {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    margin-right: 10px;
    border: 0;
    border-radius: 0 20px 20px 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-drawer-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.danx-nav-signout:hover { background: rgba(255, 255, 255, 0.08); }

/* Confirmation on the login page that signing out actually happened. */
.danx-login-note {
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--danx-line);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: var(--danx-radius);
    font-size: 0.85rem;
    color: var(--danx-ink);
}

/* ===================================================================== */
/*  Survey step 2 — choosing what happens here                            */
/*  A list with the tick on the left reads top to bottom like a checklist, */
/*  which is what it is. A grid of cards reads as navigation.             */
/* ===================================================================== */

.danx-fn-section { margin-bottom: 26px; }
.danx-fn-section-head { margin-bottom: 10px; }

.danx-fn-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--danx-ink);
}

.danx-fn-section-sub {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--danx-ink-soft);
}

.danx-pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.danx-pick {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: var(--danx-surface);
    color: var(--danx-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.danx-pick:hover { border-color: var(--mud-palette-primary); }

.danx-pick-on {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    background: var(--danx-canvas);
}

/* The tick box itself, at the left where a checklist expects it. */
.danx-pick-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--danx-line);
    border-radius: 4px;
    color: #fff;
}

.danx-pick-on .danx-pick-tick {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.danx-pick-body { flex: 1 1 auto; min-width: 0; }
.danx-pick-name { display: block; font-weight: 600; font-size: 0.9rem; }

.danx-pick-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--danx-ink-soft);
    line-height: 1.4;
    margin-top: 2px;
}

.danx-pick-count {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--danx-ink-soft);
}

.danx-pick-count::after { content: " activities"; }

.danx-survey-tally-empty { border-color: var(--danx-amber); }

/* A pointer to the service desk, where guessing would be worse than asking. */
.danx-help-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--danx-radius);
    background: var(--danx-canvas);
    border: 1px dashed var(--danx-line);
    font-size: 0.8rem;
    color: var(--danx-ink-soft);
}

/* ===================================================================== */
/*  Survey step 3 — the security questions                                */
/*  The question leads, the answer sits underneath in full-width segments. */
/* ===================================================================== */

.danx-sec {
    padding: 16px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    margin-bottom: 10px;
}

/* An unanswered question, once the manager has tried to move on. */
.danx-sec-missing {
    border-color: var(--danx-amber);
    box-shadow: inset 3px 0 0 var(--danx-amber);
}

.danx-sec-q { display: flex; gap: 10px; align-items: flex-start; }
.danx-sec-icon { color: var(--danx-ink-soft); margin-top: 2px; }

.danx-sec-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--danx-ink);
}

.danx-sec-help {
    margin: 3px 0 0;
    font-size: 0.8rem;
    color: var(--danx-ink-soft);
    line-height: 1.45;
}

.danx-sec-answer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.danx-sec-notes { margin-top: 12px; }

.danx-choice {
    padding: 10px 12px;
    border: 1px solid var(--danx-line);
    border-radius: var(--danx-radius);
    background: var(--danx-surface);
    color: var(--danx-ink-soft);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.danx-choice:hover { color: var(--danx-ink); border-color: var(--mud-palette-primary); }

/* Selected only. An unselected option is never coloured, so the row reads as an answer
   rather than as a traffic light. */
.danx-choice-yes.danx-choice-on {
    background: var(--danx-green);
    border-color: var(--danx-green);
    color: #fff;
}

.danx-choice-no.danx-choice-on {
    background: var(--danx-amber);
    border-color: var(--danx-amber);
    color: #1a1a1a;
}

.danx-choice-na.danx-choice-on {
    background: var(--danx-status-neutral);
    border-color: var(--danx-status-neutral);
    color: #fff;
}

/* ------------------------------------------------- step 5, what is left to do */

.danx-fixlist { margin-top: 8px; }

.danx-fix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--danx-line);
    font-size: 0.85rem;
}

.danx-fix:last-child { border-bottom: none; }

@media (max-width: 600px) {
    .danx-sec-answer { grid-template-columns: 1fr; }
    .danx-pick-count::after { content: ""; }
    .danx-fix { flex-wrap: wrap; }
}

/* ------------------------------------------- function detail: adding activities */

.danx-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--danx-radius);
    background: none;
    color: var(--danx-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.danx-add-row:hover {
    border-color: var(--mud-palette-primary);
    background: var(--danx-canvas);
}

.danx-add-row:disabled { opacity: 0.5; cursor: default; }
.danx-add-body { display: flex; flex-direction: column; min-width: 0; }
.danx-add-name { font-size: 0.86rem; }
.danx-add-code { font-size: 0.72rem; color: var(--danx-ink-soft); }

/* A table row that behaves as a link through to a detail page. */
.danx-row-link { cursor: pointer; }
.danx-cell-title { font-weight: 500; }
.danx-cell-sub { font-size: 0.78rem; color: var(--danx-ink-soft); }