html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--canvas);
    margin: 0;
}

body {
    overflow-x: hidden;
}

a, .btn-link {
    color: var(--link);
}

a:hover, .btn-link:hover {
    color: var(--link-hover);
}

/* ===== MAG LOGO BRANDING ===== */
/* Official transparent MAG PNG; preserve original pixels and proportional sizing. */

.mag-logo-image {
    display: block;
    height: 64px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-logo {
    display: block;
    height: 96px;
    width: auto;
    object-fit: contain;
    margin-bottom: 2rem;
    -webkit-font-smoothing: antialiased;
}

.login-logo-container {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.login-logo-trademark {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    position: absolute;
    right: -0.5rem;
    top: 0.5rem;
}

.mag-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
}

.mag-logo-trademark {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    vertical-align: super;
    margin-left: -0.3rem;
}

/* ===== END BRANDING ===== */

.command-home-shell {
    min-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(2rem, 5vh, 4rem) 1.75rem 4rem;
}

.mag-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}



.command-center {
    width: min(980px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.command-title {
    font-size: clamp(4.35rem, 8vw, 5.8rem);
    font-weight: 900;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #111827;
    line-height: 0.98;
    margin: 0;
}

.command-letter {
    transition: text-shadow 150ms ease;
}

.command-letter:hover {
    text-shadow: 0 0 16px rgba(225, 29, 46, 0.85), 0 0 32px rgba(225, 29, 46, 0.45);
}

.command-search-card {
    width: 93.75%;
    max-width: 731px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.125rem;
    background: #ffffff;
    padding: 1.375rem 1.625rem;
    border-radius: 25px;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.06);
    border: 1px solid #ECECEC;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.command-search-card:focus-within {
    border-color: #E11D2E;
    box-shadow: 0 16px 44px rgba(225, 29, 46, 0.16);
}

.search-icon {
    display: inline-flex;
    line-height: 1;
    color: #E11D2E;
    flex: 0 0 auto;
}

.command-search {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.19rem;
    background: transparent;
    color: #111827;
    padding: 0;
}

.command-search::placeholder {
    color: #9ca3af;
}

.mic-button {
    background: transparent;
    border: none;
    line-height: 1;
    display: inline-flex;
    color: #111111;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.mic-button:hover {
    color: #E11D2E;
}

.mic-button:focus-visible {
    outline: 2px solid #E11D2E;
    outline-offset: 3px;
    border-radius: 6px;
}

.mic-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Listening state is never signalled by colour alone: the word "Listening…" and an
   animated dot accompany the red, for colour-blind and low-vision users. */
.mic-button-listening {
    color: #E11D2E;
    gap: 0.5rem;
    align-items: center;
}

.mic-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E11D2E;
    white-space: nowrap;
}

.mic-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E11D2E;
    animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .mic-pulse { animation: none; }
}

.mic-message {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

/* ===== COMMAND HOMEPAGE SECTIONS ===== */

.command-greeting {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 0.5rem;
    text-align: center;
}

.home-command-block {
    width: 100%;
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.home-command-block h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: -0.035em;
    color: #111827;
}

.home-command-block > p {
    margin: 0 0 1.5rem;
    color: #6b7280;
}

.home-command-block .command-search-card {
    width: min(760px, 100%);
}

.home-command-block .quick-actions {
    width: min(760px, 100%);
    margin: 0.875rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.home-command-block .quick-actions .action-button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-color: #e5e7eb;
    box-shadow: none;
    background: #fff;
}

.home-command-block .quick-actions .action-button:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: none;
}

.command-section {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.section-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attention-item,
.continue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 0.9375rem;
    color: #1f2937;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.attention-item:hover,
.continue-item:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.attention-label,
.continue-label {
    font-weight: 500;
}

.continue-timestamp {
    font-size: 0.8125rem;
    color: #9ca3af;
    flex: 0 0 auto;
    margin-left: auto;
}

.empty-state {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.9375rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* ===== END HOMEPAGE SECTIONS ===== */

.quick-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    transition: opacity 200ms ease;
    opacity: 1;
}

.quick-actions.fading {
    opacity: 0;
}

.quick-actions .action-button {
    flex: 0 1 auto;
}

/* Inline command answers (the single COMMAND bar responds here, ChatGPT-style) */
.command-thread {
    width: 100%;
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;                 /* generous separation between exchanges (newest first) */
    margin-top: 1.35rem;
    text-align: left;
}

/* One question+answer, grouped so the Q sits tight above its A while exchanges stay well separated. */
.command-exchange {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
/* A hairline divider above every exchange after the first makes multiple exchanges easy to scan. */
.command-exchange + .command-exchange {
    padding-top: 1.35rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.command-turn { display: flex; }
.command-turn-user { justify-content: flex-end; }
.command-turn-ai { justify-content: flex-start; }

.command-bubble {
    max-width: 42rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.9rem;
    line-height: 1.6;
    font-size: 0.92rem;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05);
}

.command-bubble-user { background: #2563eb; color: #ffffff; border-bottom-right-radius: 0.2rem; }
.command-bubble-ai { background: #f1f5f9; color: #0f172a; border-bottom-left-radius: 0.2rem; }
.command-answer { white-space: pre-wrap; }
.command-thinking { color: #64748b; font-style: italic; }

/* AI-response header — a light "who + when" chrome above every answer (UX-01 #2). */
.command-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.command-ai-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #4338ca; text-transform: uppercase; }
.command-ai-time { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; }

/* Evidence/provenance badges sit under a subtle divider so they read as metadata, not part of the answer. */
.command-answer-meta {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.command-badge { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 0.4rem; }
.command-badge-live { background: #dcfce7; color: #166534; }
.command-badge-dormant { background: #fef9c3; color: #475569; }
.command-scope { font-size: 0.72rem; color: #64748b; }

/* Fact-verification evidence label (AIStandards.md). Verified = record-backed; High = grounded AI reasoning;
   Assumption = inferred; Unknown = unverifiable; Conflicting = sources disagree. */
.command-verify { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 0.4rem; border: 1px solid transparent; }
.command-verify-verified { background: #dcfce7; color: #166534; border-color: #86efac; }
.command-verify-high { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.command-verify-assumption { background: #fef9c3; color: #475569; border-color: #fde047; }
.command-verify-unknown { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.command-verify-conflicting { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
/* Unavailable = the capability is switched off; what you are reading is a substitute, not the answer.
   TOKENS, NOT LITERALS - unlike its siblings above, which carry explicit dark overrides further down.
   This rule had neither, so dark mode rendered the "switched off" badge as a bright warm field. The
   status tokens are redefined under :root[data-theme="dark"] in theme.css, so one rule answers both
   themes and cannot drift out of step with a separate override. Caught in review. */
.command-verify-unavailable {
    background: var(--status-warning-surface);
    color: var(--status-warning);
    border-color: var(--status-warning);
}

/* Explicit user-selected dark theme (NOT OS auto-detection). */
/* UAT-003 (#709): hard-coded dark colours are screen-only; print uses the light rules. */
@media screen {
:root[data-theme="dark"] .command-bubble-ai { background: #1e293b; color: #e2e8f0; }
:root[data-theme="dark"] .command-exchange + .command-exchange { border-top-color: rgba(148, 163, 184, 0.18); }
:root[data-theme="dark"] .command-answer-meta { border-top-color: rgba(148, 163, 184, 0.2); }
:root[data-theme="dark"] .command-ai-header { border-bottom-color: rgba(148, 163, 184, 0.2); }
:root[data-theme="dark"] .command-ai-title { color: #a5b4fc; }
:root[data-theme="dark"] .command-thinking { color: #94a3b8; }
}

/* ── UX-01 status badges — one consistent visual language (colour + icon + text, never colour alone). ──
   Rendered by <StatusBadge>; tones resolved by StatusVisuals. Add new families in StatusVisuals, not here. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.magnavis-symbol { display: inline-block; flex: 0 0 auto; vertical-align: -0.125em; }
.status-badge-icon { display: inline-flex; align-items: center; line-height: 1; }
.status-badge-icon .magnavis-symbol { width: 0.95rem; height: 0.95rem; }
.nav-chevron .magnavis-symbol { width: 14px; height: 14px; }
.status-tone-neutral   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-tone-good      { background: #dcfce7; color: #166534; border-color: #86efac; }
.status-tone-warn      { background: #fef9c3; color: #475569; border-color: #fde047; }
.status-tone-critical  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.status-tone-info      { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.status-tone-discovery { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.status-tone-qualified { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

.entity-link { font-weight: 600; }

/* Explicit user-selected dark theme (NOT OS auto-detection). Values tokenized in the data-display increment. */
/* UAT-003 (#709): hard-coded dark colours are screen-only; print uses the light rules. */
@media screen {
:root[data-theme="dark"] .status-tone-neutral   { background: #1e293b; color: #cbd5e1; border-color: #334155; }
:root[data-theme="dark"] .status-tone-good      { background: #052e16; color: #86efac; border-color: #166534; }
:root[data-theme="dark"] .status-tone-warn      { background: #3f2d0a; color: #fde047; border-color: #475569; }
:root[data-theme="dark"] .status-tone-critical  { background: #3f1414; color: #fca5a5; border-color: #991b1b; }
:root[data-theme="dark"] .status-tone-info      { background: #0f2447; color: #93c5fd; border-color: #1e40af; }
:root[data-theme="dark"] .status-tone-discovery { background: #2e1065; color: #d8b4fe; border-color: #6b21a8; }
:root[data-theme="dark"] .status-tone-qualified { background: #431407; color: #fdba74; border-color: #9a3412; }
}

.action-button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    min-height: 42px;
    white-space: nowrap;
}

.action-button:hover {
    box-shadow: 0 16px 34px rgba(185, 28, 28, 0.14);
    transform: translateY(-2px);
}

.action-button-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.action-button-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 16px 34px rgba(225, 29, 46, 0.28);
}

.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex: 0 0 auto;
}

@media (max-width: 640.98px) {
    .command-home-shell {
        min-height: 62vh;
        padding: 1rem;
    }



    .command-center {
        gap: 1.5rem;
    }

    .command-search-card {
        width: 100%;
        padding: 0.8rem 1rem;
        border-radius: 16px;
    }

    .command-search {
        font-size: 1.06rem;
    }

    .home-command-block .quick-actions {
        grid-template-columns: 1fr;
    }

    .quick-actions .action-button {
        flex: 1 1 100%;
    }

    .action-button {
        font-size: 0.8rem;
    }
}

.btn-primary {
    color: var(--text-on-accent);
    background-color: var(--status-info);
    border-color: var(--status-info);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--focus-ring);
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

.candidate-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text-primary);
}

.candidate-table th,
.candidate-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.candidate-table th {
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-weight: 700;
}

.candidate-row {
    cursor: pointer;
}

.candidate-row:hover {
    background: var(--surface-hover);
}

.candidate-form {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.candidate-form label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

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

.activity-item {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}

.activity-item-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.activity-item-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.activity-visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.dashboard-card {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
}

.dashboard-card h2 {
    font-size: 1.1rem;
    margin-top: 0;
}

.production-overview {
    margin-bottom: 1.25rem;
}

.production-overview-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.production-brand-command {
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.production-brand-divider {
    width: 1px;
    height: 14px;
    background: #d1d5db;
}

.production-brand-mag {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
}

.production-overview-brand,
.summary-report-brand {
    flex-wrap: wrap;
    min-width: 0;
}

.production-brand-command,
.production-brand-mag {
    min-width: 0;
    max-width: 100%;
}

.production-brand-mag {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .production-overview-brand > .production-brand-mag,
    .summary-report-brand > .production-brand-mag {
        flex-basis: 100%;
    }

    .production-overview-brand > .production-brand-divider,
    .summary-report-brand > .production-brand-divider {
        flex-basis: 100%;
        width: 100%;
        height: 1px;
    }
}

.sample-data-badge {
    margin-left: auto;
    background: #fdeceb;
    color: #E11D2E;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.production-overview-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .production-overview-grid {
        grid-template-columns: 1fr;
    }
}

.production-identity-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.production-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E11D2E, #111827);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.production-identity-card h2 {
    margin: 0;
    font-size: 1.2rem;
}

.production-nmls, .production-licensed {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

.production-company {
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    width: 100%;
}

.production-company span {
    color: #6b7280;
    font-size: 0.85rem;
}

.production-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.production-stat-value {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    color: #111827;
}

.production-stat-label {
    display: block;
    font-size: 0.68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.production-social {
    width: 100%;
    padding-top: 0.9rem;
    margin-top: 0.4rem;
    border-top: 1px solid #f3f4f6;
}

.production-social-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
}

.production-social-icons {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

.production-social-icons a {
    display: inline-flex;
    opacity: 0.85;
}

.production-social-icons a:hover {
    opacity: 1;
}

.production-detail-card {
    /* UAT-022: a grid item defaults to min-width:auto, so a wide Loans table widened the card past the viewport. */
    min-width: 0;
    max-width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.production-tab-strip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.production-tab-button {
    background: none;
    border: none;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.production-tab-button.active {
    color: #E11D2E;
    border-bottom-color: #E11D2E;
}

.production-tab-spacer {
    flex: 1;
}

.production-time-period {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.production-time-period select {
    width: auto;
    padding: 0.4rem 0.6rem;
}

.production-summary-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 700px) {
    .production-summary-body {
        grid-template-columns: 1fr;
    }
}

.production-total-row {
    font-weight: 700;
}

.production-total-row td {
    border-top: 2px solid #111827;
}

.production-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.production-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #374151;
    width: 100%;
}

.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
}

.legend-purchase { background: #E11D2E; }
.legend-refi { background: #f08b95; }
.legend-equity { background: #111827; }

.production-trait-row {
    margin-bottom: 1rem;
}

.production-trait-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.production-trait-bar {
    background: #f3f4f6;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.production-trait-fill {
    background: linear-gradient(90deg, #E11D2E, #111827);
    height: 100%;
    border-radius: 999px;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.inline-panel {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* Layer 1: compact always-visible summary row */
.layer1-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
    margin-bottom: 1rem;
}

.layer1-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.layer1-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.layer1-field-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.layer1-primary .layer1-field-value {
    font-size: 1.3rem;
}

.layer1-ai-recommendation {
    flex-basis: 100%;
    background: #fef2f2;
    border-left: 3px solid #E11D2E;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    color: #111827;
}

/* Data-quality indicator badges — shown on the profile home page and candidate list when a
   record has missing/inconsistent contact or role data. Informational only, never blocking. */
.data-quality-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.data-quality-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.data-quality-badge-warning {
    background: #F5F6F8;
    color: #334155;
    border: 1px solid #fde68a;
}

.data-quality-badge-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.data-quality-band-high {
    background: #dbeafe;
    color: #0c4a6e;
    border: 1px solid #7dd3fc;
}

.data-quality-band-medium {
    background: #EEF1F4;
    color: #334155;
    border: 1px solid #D6DCE2;
}

.data-quality-band-low {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

.production-contact-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

.production-contact-block .production-stat-label {
    display: inline-block;
    min-width: 5.5rem;
    color: #6b7280;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Layer 2: expandable cards */
.expandable-card {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.6rem;
    background: var(--surface);
    overflow: hidden;
}

.expandable-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.expandable-card-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.expandable-card.expanded .expandable-card-chevron,
.expandable-card-chevron.expanded {
    transform: rotate(90deg);
}

.accordion-header-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.accordion-header-list .expandable-card-header {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.expandable-card-title {
    flex: 1;
}

.expandable-card-badge {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.expandable-card-body {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

/* Layer 3: slide-out drawer */
.slideout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.35);
    z-index: 900;
}

.slideout-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, 100vw);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: -12px 0 40px rgba(17, 24, 39, 0.2);
    z-index: 901;
    display: flex;
    flex-direction: column;
    animation: slideout-in 0.18s ease-out;
}

@keyframes slideout-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.slideout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.slideout-header h3 {
    margin: 0;
}

.slideout-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.slideout-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 1rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tab-button.active {
    color: var(--text-primary);
    border-bottom-color: var(--status-info);
}

.tab-content {
    padding-top: 0.25rem;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filters-row > div {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.ai-text {
    white-space: pre-wrap;
}

.activity-item.overdue {
    border-color: #fecaca;
    background: #fef2f2;
    color: #111827;
}

.activity-item.overdue .activity-item-meta { color: #4b5563; }
.summary-report .production-brand-command { color: #111827; }

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.login-card {
    width: min(420px, 90vw);
    background: white;
    color: #111827; /* This card stays white in both application themes. */
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-logo {
    display: block;
    width: 96px;
    height: auto;
    margin: 0 auto;
}

.login-title {
    font-size: 2.4rem;
    text-align: center;
    margin: 0;
    letter-spacing: 0.22em;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.login-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

/* Invalid checkbox state: red border for visual feedback, but remains fully clickable */
.login-checkbox input[type="checkbox"].invalid {
    accent-color: #E11D2E;
    border: 1px solid #E11D2E;
    box-shadow: none;
}

.login-checkbox input[type="checkbox"].invalid:focus {
    outline: 2px solid #E11D2E;
    outline-offset: 2px;
}

.login-forgot {
    color: #7A7A7A;
    font-weight: 600;
    text-decoration: none;
}

.login-forgot:hover {
    color: #E11D2E;
}

.login-agree {
    font-size: 0.85rem;
    color: #7A7A7A;
    margin-bottom: 1.25rem;
}

.login-agree a {
    color: #E11D2E;
    font-weight: 600;
}

/* Candidate Summary Report */
.company-overview .summary-report-stat,
.calendar-event-stats .summary-report-stat {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.company-overview .production-stat-value,
.calendar-event-stats .production-stat-value {
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.company-overview .production-stat-label,
.calendar-event-stats .production-stat-label { color: var(--text-muted); }
.company-overview .production-brand-command { color: var(--text-primary); }

.location-callout-popover {
    position: absolute;
    top: 1.4rem;
    left: 0;
    width: 300px;
}

@media screen and (max-width: 600px) {
    .location-callout-popover {
        position: fixed;
        top: 50%;
        left: 1rem;
        width: calc(100vw - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow: auto;
        transform: translateY(-50%);
    }
}

.summary-report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.summary-report {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    color: #111827;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(17, 24, 39, 0.08);
    padding: 2.5rem;
}

.summary-report-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-bottom: 2px solid #111827;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.summary-report-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.summary-report-title h1 {
    margin: 0.35rem 0 0.1rem;
    font-size: 1.6rem;
    color: #111827;
}

.summary-report-title p {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.summary-report-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-report-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
}

.summary-report-identity h2 {
    margin: 0 0 0.25rem;
    color: #111827;
}

.summary-report-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

/* The printable report keeps white paper in either shell theme. Scope link
   tokens to paper links and the trigger; themed dialogs keep their own contrast. */
.summary-report .summary-report-subtitle button[aria-haspopup="dialog"],
:where(.summary-report, .summary-report-shell) a:not(.action-button):not([role="dialog"] a) {
    --link: #006bb7;
    --link-hover: #00518c;
}

.summary-report-section {
    margin-bottom: 2rem;
}

.summary-report-section h3 {
    color: #111827;
    border-left: 4px solid #E11D2E;
    padding-left: 0.6rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.summary-report-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.summary-report-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #f9fafb;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.summary-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.summary-report-table th, .summary-report-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #e5e7eb;
}

.summary-report-table th {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.summary-report-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.summary-report-timeline li {
    padding: 0.6rem 0;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
    font-size: 0.92rem;
}

.summary-report-timeline-dates, .summary-report-timeline-production {
    color: #6b7280;
    font-size: 0.85rem;
}

.summary-report-narrative {
    color: #111827;
    line-height: 1.6;
    white-space: pre-line;
}

.summary-report-empty {
    color: #9ca3af;
    font-style: italic;
}

.summary-report-footer {
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1.25rem;
}

@media print {
    .no-print {
        display: none !important;
    }

    .summary-report {
        box-shadow: none;
        padding: 0;
    }

    /* Report-only print layout: remove interactive shell, retain provenance and
       runtime freshness warnings, and use white paper even from a dark session. */
    html:has(.summary-report),
    body:has(.summary-report),
    body:has(.summary-report) .page,
    body:has(.summary-report) main {
        background: #fff !important;
        color-scheme: light !important;
        color: #111827;
        min-height: 0;
        margin: 0;
    }

    body:has(.summary-report) .top-row,
    body:has(.summary-report) .nav-drawer,
    body:has(.summary-report) .nav-hamburger,
    body:has(.summary-report) .nav-backdrop,
    body:has(.summary-report) .command-footer,
    .summary-report [role="dialog"] {
        display: none !important;
    }

    body:has(.summary-report) article.content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body:has(.summary-report) .background-execution-warning {
        margin: 0 0 0.75rem;
        padding: 0.5rem;
        background: #fff;
        color: #111827;
        border-color: #6b7280;
        font-size: 9pt;
        break-inside: avoid;
    }

    body:has(.summary-report) .background-execution-warning strong {
        color: #111827;
    }

    .summary-report {
        max-width: none;
        border-radius: 0;
        font-size: 10pt;
    }

    .summary-report-header,
    .summary-report-identity,
    .summary-report-section,
    .summary-report-footer,
    .summary-report-table tr {
        break-inside: avoid;
    }

    .summary-report-section { margin: 0 0 1rem; }
    .summary-report-table thead { display: table-header-group; }
    .summary-report .summary-report-empty,
    .summary-report .summary-report-footer { color: #4b5563; }
}

.login-card:has(.login-agree input:not(:checked)) .login-submit {
    opacity: 0.5;
    pointer-events: none;
}

.login-field {
    margin-bottom: 1rem;
}

.login-field label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.3rem;
}

.login-submit {
    width: 100%;
    justify-content: center;
}

.login-error {
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.logout-form {
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.coming-soon-shell {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.coming-soon-card {
    width: min(520px, 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.coming-soon-title {
    font-size: clamp(2.2rem, 5vw, 2.8rem);
    letter-spacing: 0.14em;
}

.coming-soon-text {
    color: #7A7A7A;
    font-size: 1.05rem;
}

.legal-shell {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem 4rem;
}

.legal-doc {
    width: min(720px, 100%);
}

.legal-title {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
}

.legal-doc h1 {
    font-size: 1.9rem;
    color: #111111;
}

.legal-doc h2 {
    font-size: 1.15rem;
    color: #111111;
    margin-top: 1.75rem;
}

.legal-doc p {
    color: #333333;
    line-height: 1.6;
}

.legal-note {
    color: #7A7A7A;
    font-style: italic;
    border-left: 3px solid #E11D2E;
    padding-left: 0.9rem;
}

.legal-back {
    display: inline-flex;
    margin-top: 2rem;
    width: fit-content;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}



/* ===== PRIORITY-TIER GLOW — Subtle visual "secret sign" for A/B/C linked names ===== */
/* Recruiting temperature. Hot reads as ember, warm as amber, cold as slate — a heat scale, not a
   pass/fail traffic light. Tinting the name is the whole treatment: no glow, so a dense list stays
   readable, and every mark carries a shape and a word beside the colour. Key lives in the footer. */
:root {
    --temp-hot: #B3261E;
    --temp-warm: #B26B00;
    --temp-cold: #3E6B8C;
    --temp-unrated: #6B7280;
}

.temp-hot { color: var(--temp-hot); }
.temp-warm { color: var(--temp-warm); }
.temp-cold { color: var(--temp-cold); }
.temp-unrated { color: var(--temp-unrated); }

a.temp-hot, a.temp-warm, a.temp-cold { text-decoration-color: currentColor; }

.temp-mark {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    margin-right: .4rem;
    line-height: 1;
    vertical-align: baseline;
}
.temp-mark > [aria-hidden] { font-size: .8em; }
/* The word is the cue that survives greyscale, so it is shown, not hidden. Small and quiet, but read. */
.temp-mark-label { font-size: .72em; letter-spacing: .02em; text-transform: uppercase; }

.temp-key { display: inline-block; font-size: .8rem; }
.temp-key-summary { cursor: pointer; color: var(--text-secondary, #5b6472); }
.temp-key-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.temp-key-item { display: flex; gap: .4rem; align-items: baseline; padding: .15rem 0; }
.temp-key-meaning { color: var(--text-secondary, #5b6472); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ===== END RECRUITING TEMPERATURE ===== */

/* ===== CONTACT CLOCK =====
   Compact "time since last meaningful contact" widget on every profile header. Small but visible;
   color = urgency (Green <7d, Yellow 7-30d, Orange 31-90d, Red overdue by priority, Gray never). */
.contact-clock-wrap {
    position: relative;
    display: inline-block;
}

.contact-clock-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem 0.3rem 0.4rem;
    border: 1px solid var(--border-subtle);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    line-height: 1.1;
    transition: box-shadow 0.15s ease;
}

.contact-clock-trigger:hover {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.10);
}

.contact-clock-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    text-align: left;
}

.contact-clock-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.contact-clock-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Analog face */
.contact-clock-ring { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.contact-clock-tick { stroke: #d1d5db; stroke-width: 1; }
.contact-clock-hand { stroke-width: 2.4; stroke-linecap: round; }
.contact-clock-hub  { fill: #6b7280; }

/* Per-urgency accents (border, hand, dot) */
.contact-clock-green  { border-left-color: #16a34a; }
.contact-clock-yellow { border-left-color: #eab308; }
.contact-clock-orange { border-left-color: #f97316; }
.contact-clock-red    { border-left-color: #ef4444; }
.contact-clock-gray   { border-left-color: #d1d5db; }

/* ===== FOOTER — Global site footer (appears on all pages after main content) ===== */
.command-footer {
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
    margin-top: 4rem;
    padding: 2rem 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-section {
    line-height: 1.6;
}

.footer-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.footer-copyright {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.footer-copyright strong {
    color: var(--text-primary);
}

.footer-notice {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-link {
    color: var(--link);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.footer-version {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
}

.footer-version code {
    background: var(--surface-sunken);
    color: var(--text-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.75rem;
}

.footer-disclaimer {
    margin: 0;
    font-size: 0.8rem;
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.footer-text-small {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    
    .footer-link {
        white-space: nowrap;
    }
}

/* ===== ABOUT PAGE ===== */
.about-page {
    min-height: calc(100vh - 200px);
    background: #ffffff;
}

.about-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #006bb7 100%);
    color: white;
    padding: 3rem 1.5rem;
    text-align: center;
}

.about-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.about-tagline {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.95;
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.about-section {
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.about-section h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.about-section p {
    margin: 0 0 1rem;
    color: #374151;
}

.about-identity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.identity-item {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 4px solid #006bb7;
}

.identity-item strong {
    display: block;
    color: #111827;
    margin-bottom: 0.5rem;
}

.identity-item code {
    background: #e5e7eb;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9rem;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.about-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #374151;
}

.about-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}

.about-list strong {
    color: #111827;
}

.open-source-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.open-source-item {
    padding: 1.25rem;
    background: #f3f4f6;
    border-radius: 6px;
    border-left: 4px solid #9ca3af;
}

.open-source-item strong {
    display: block;
    color: #111827;
    margin-bottom: 0.5rem;
}

.open-source-item p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.open-source-item a {
    color: #006bb7;
    text-decoration: none;
}

.open-source-item a:hover {
    text-decoration: underline;
}

.about-notice {
    background: #EEF1F4;
    border-left: 4px solid #64748b;
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #334155;
}

.about-legal-links {
    background: #f0f9ff;
    border-left: 4px solid #0284c7;
    padding: 1.5rem;
    border-radius: 6px;
}

.about-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.about-links-list li {
    margin: 0;
}

.about-links-list a {
    color: #006bb7;
    text-decoration: none;
}

.about-links-list a:hover {
    text-decoration: underline;
}

/* ===== LEGAL PAGES (Terms, Privacy, etc.) ===== */
.legal-shell {
    background: #ffffff;
    min-height: calc(100vh - 150px);
    padding: 2rem 1.5rem;
}

.legal-doc {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    color: #374151;
}

.legal-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-doc h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1.5rem;
}

.legal-doc h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111827;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.legal-note {
    background: #EEF1F4;
    border-left: 4px solid #64748b;
    padding: 1rem;
    border-radius: 4px;
    color: #334155;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.legal-doc p {
    margin: 0 0 1rem;
}

.legal-doc ul, .legal-doc ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.legal-doc li {
    margin: 0.5rem 0;
}

.legal-doc code {
    background: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9rem;
}

.legal-back {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background: #006bb7;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.legal-back:hover {
    background: #004b99;
}
.contact-clock-yellow { border-left-color: #eab308; }
.contact-clock-orange { border-left-color: #ea580c; }
.contact-clock-red    { border-left-color: #dc2626; }
.contact-clock-gray   { border-left-color: #9ca3af; }

.contact-clock-green  .contact-clock-hand,
.contact-clock-green  .contact-clock-hub  { stroke: #16a34a; fill: #16a34a; }
.contact-clock-yellow .contact-clock-hand,
.contact-clock-yellow .contact-clock-hub  { stroke: #eab308; fill: #eab308; }
.contact-clock-orange .contact-clock-hand,
.contact-clock-orange .contact-clock-hub  { stroke: #ea580c; fill: #ea580c; }
.contact-clock-red    .contact-clock-hand,
.contact-clock-red    .contact-clock-hub  { stroke: #dc2626; fill: #dc2626; }
.contact-clock-gray   .contact-clock-hub  { fill: #9ca3af; }

/* Popover (Layer 3) */
.contact-clock-pop {
    position: absolute;
    z-index: 60;
    top: 2.6rem;
    left: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
    padding: 0.9rem;
    text-align: left;
}

.contact-clock-pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.contact-clock-pop-close {
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.contact-clock-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.contact-clock-dot-green  { background: #16a34a; }
.contact-clock-dot-yellow { background: #eab308; }
.contact-clock-dot-orange { background: #ea580c; }
.contact-clock-dot-red    { background: #dc2626; }
.contact-clock-dot-gray   { background: #9ca3af; }

.contact-clock-pop-age {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

.contact-clock-pop-meta {
    font-size: 0.8rem;
    color: #4b5563;
    margin-bottom: 0.15rem;
}

.contact-clock-pop-suggest {
    font-size: 0.8rem;
    color: #111827;
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin-top: 0.4rem;
}

.contact-clock-pop-rule {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0.6rem 0;
}

.contact-clock-pop-section-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin-bottom: 0.35rem;
}

.contact-clock-pop-empty {
    font-size: 0.82rem;
    color: #9ca3af;
}

.contact-clock-pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.contact-clock-pop-item-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.contact-clock-pop-channel { font-weight: 600; color: #111827; }
.contact-clock-pop-when { color: #9ca3af; }

.contact-clock-pop-item-sub {
    font-size: 0.76rem;
    color: #6b7280;
}
.contact-clock-pop-notes { color: #9ca3af; }

.contact-clock-pop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.contact-clock-action {
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
}

.contact-clock-log-context {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 0.75rem;
}
/* ===== END CONTACT CLOCK ===== */

/* ===== REVENUE INTELLIGENCE — Today's Highest-Value Actions ===== */
.ri-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}
.ri-card-head { display: flex; align-items: center; gap: 0.9rem; }
.ri-rank {
    flex: 0 0 auto; min-width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eff6ff; color: #1d4ed8; font-weight: 800; border-radius: 10px; font-size: 1rem;
}
.ri-titles { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.ri-name { font-weight: 700; color: #111827; text-decoration: none; }
.ri-name:hover { text-decoration: underline; }
.ri-action { font-size: 0.9rem; color: #374151; }
.ri-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.ri-badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.45rem; border-radius: 999px; font-weight: 700; }
.ri-disp-Escalate { background: #fef2f2; color: #991b1b; }
.ri-disp-RecommendOnly { background: #eff6ff; color: #1d4ed8; }
.ri-disp-DraftForApproval { background: #f5f3ff; color: #6d28d9; }
.ri-disp-AutoExecute { background: #f0fdf4; color: #166534; }
.ri-disp-NoActionNeeded { background: #f3f4f6; color: #6b7280; }
.ri-risk-high { background: #fef2f2; color: #991b1b; }
.ri-risk-medium { background: #F5F6F8; color: #334155; }
.ri-risk-low { background: #f0fdf4; color: #166534; }
.ri-conf { background: #f3f4f6; color: #374151; }
.ri-human { background: #fff7ed; color: #9a3412; }
.ri-why { margin: 0.6rem 0 0.4rem; }
.ri-why-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; }
.ri-why ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.ri-why li { font-size: 0.85rem; color: #374151; margin-bottom: 0.1rem; }
.ri-metrics { display: flex; align-items: center; gap: 1.2rem; font-size: 0.82rem; color: #6b7280; }
.ri-metrics .action-button { margin-left: auto; }
/* ===== END REVENUE INTELLIGENCE ===== */

/* ===== CLICKABLE COMMUNICATION FIELDS (PhoneLink / EmailLink / ExternalLink) ===== */
.audit-table-scroll { max-width:100%; overflow-x:auto; }
.audit-history-table { width:100%; table-layout:fixed; }
.audit-history-table th, .audit-history-table td { vertical-align:top; overflow-wrap:anywhere; }
.audit-table-scroll .audit-history-table th { color:var(--text-muted); }
.audit-value { margin:0; max-height:24rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; color:inherit; }
@media (max-width:700px) {
    .audit-history-table { min-width:700px; }
}
.comm-link {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
.comm-link:hover {
    color: var(--link-hover);
    border-bottom-color: currentColor;
}
/* Empty value placeholder — same muted dash the pages already used. */
.comm-empty {
    color: #9ca3af;
}
/* Non-empty but invalid (bad email / undialable phone) — visible, not hidden. */
.comm-invalid {
    color: #b45309;
    border-bottom: 1px dotted #b45309;
    cursor: help;
}
/* ===== END CLICKABLE COMMUNICATION FIELDS ===== */


/* Phase 8 — recruiter-friendly failure notice (FailureNotice.razor) + full-page Error.razor.
   Plain-English message + next-step guidance + a traceable support reference. */
.failure-notice {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 640px;
    margin: 1.5rem auto;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    /* The failure signal is the brand danger accent, not a warm field. A user-visible failure must
       never read as operationally healthy (owner rule), and the broad field must stay Light Steel
       (AGENTS.md palette override). Tokens, not literals, so dark mode is answered.

       The BORDER carries the danger signal, not the title text. Measured: --status-danger on
       --surface-sunken is 4.19:1 in light, under AA 4.5 for normal text, and .failure-notice-title
       is 1.05rem -- just below the large-text threshold that would excuse it. The title therefore
       inherits --text-primary (15.65:1 light / 16.11:1 dark). Do not colour it red. */
    border-left: 4px solid var(--status-danger);
    border-radius: 10px;
    background: var(--surface-sunken);
    color: var(--text-primary);
}
.failure-notice-icon { font-size: 1.4rem; line-height: 1.2; }
.failure-notice-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; }
.failure-notice-message { margin: 0 0 0.6rem; }
.failure-notice-guidance { margin: 0 0 0.6rem; }
.failure-notice-ref { margin: 0 0 0.75rem; font-size: 0.9rem; }
.failure-notice-ref code {
    background: var(--surface); padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600;
    border: 1px solid var(--border-subtle);
}
.failure-notice-ref-hint { color: var(--text-muted); }
.failure-notice-reload { margin-top: 0.25rem; }
.error-page { max-width: 640px; margin: 2rem auto; line-height: 1.55; }
.error-page code { background: var(--surface-sunken); color: var(--text-primary); padding: 0.1rem 0.4rem; border-radius: 4px; }

/* ===== Job Order Recruiting Summary Report ===== */
.summary-report-actions { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.summary-report-shell { max-width: 900px; margin: 0 auto 2rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.75rem 2rem; line-height: 1.5; }
.summary-report-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
h1.summary-report-title { margin: 0.2rem 0 0.1rem; font-size: 1.6rem; color: #111827; }
.summary-report-subtitle { margin: 0 0 1rem; color: #6b7280; font-size: 0.9rem; }
.summary-report-section { margin-top: 1.5rem; }
.summary-report-section h2 { font-size: 1.05rem; color: #111827; border-bottom: 2px solid #eef2f7; padding-bottom: 0.35rem; margin-bottom: 0.75rem; }
.summary-report-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 1.25rem; }
.summary-report-kv > div { display: flex; flex-direction: column; }
/* Small labels on printable white cards need paper contrast in either theme. */
:is(.summary-report, .summary-report-shell) .kv-label:not([role="dialog"] .kv-label),
:is(.summary-report, .summary-report-shell) .production-stat-label:not([role="dialog"] .production-stat-label) {
    color: #4b5563;
}

.summary-report-kv .kv-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; }
.summary-report-kv .kv-value { font-size: 0.95rem; color: #111827; }
.report-funnel { display: flex; flex-direction: column; gap: 0.45rem; }
.report-funnel-row { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 0.6rem; }
.report-funnel-label { font-size: 0.85rem; color: #374151; }
.report-funnel-bar { height: 18px; border-radius: 5px; background: linear-gradient(90deg, #2563eb, #1d4ed8); min-width: 4px; }
.report-funnel-count { text-align: right; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.report-table th { text-align: left; background: #f3f4f6; padding: 0.5rem 0.6rem; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.report-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid #f1f5f9; }
.report-internal-notes { background: #F5F6F8; border: 1px solid #fde68a; border-radius: 8px; padding: 0.6rem 0.85rem; color: #334155; }
.report-history { margin: 0; padding-left: 1.1rem; color: #4b5563; font-size: 0.85rem; }
.summary-report-footer { margin-top: 1.75rem; padding-top: 0.85rem; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 0.72rem; }
.summary-report-footer p { margin: 0.15rem 0; }

/* ---------------------------------------------------------------------------
   UX-01 "Why?" engine — explanation affordance next to any number.
   Hover shows the short definition (native title); click opens the breakdown.
   --------------------------------------------------------------------------- */
.metric-why-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.375rem;
}

.metric-why-button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 150ms ease, border-color 150ms ease;
}

.metric-why-button:hover,
.metric-why-wrap:has(.metric-why-popover:popover-open) .metric-why-button {
    color: #E11D2E;
    border-color: #E11D2E;
}

.metric-why-button:focus-visible,
.metric-why-close:focus-visible {
    outline: 2px solid #E11D2E;
    outline-offset: 2px;
}

.metric-why-popover {
    position: fixed;
    inset: 1rem;
    margin: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    box-sizing: border-box;
    width: min(340px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: fit-content;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
    text-align: left;
    white-space: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}

.metric-why-popover:not(:popover-open) {
    display: none;
}

.metric-why-close {
    align-self: flex-end;
    flex-shrink: 0;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #D6DCE2;
    border-radius: 6px;
    background: #F5F6F8;
    color: #374151;
    font: inherit;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.metric-why-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
}

.metric-why-section {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.metric-why-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.metric-why-body {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #374151;
}

.metric-why-contributor {
    display: block;
    font-variant-numeric: tabular-nums;
}

.metric-why-source {
    font-size: 0.6875rem;
    color: #9ca3af;
    border-top: 1px solid #F3F4F6;
    padding-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Restricted-access state (Security §2). Shown when territory default-deny
   returns zero rows, so the user is told WHY rather than shown a false empty state.
   --------------------------------------------------------------------------- */
.restricted-access {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 46rem;
    margin: 1.5rem auto;
    padding: 1.25rem 1.5rem;
    background: #F5F6F8;
    border: 1px solid #FDE68A;
    border-radius: 12px;
}

.restricted-access-icon {
    font-size: 1.5rem;
    line-height: 1.2;
    flex: 0 0 auto;
}

.restricted-access-title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #334155;
}

.restricted-access-text {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #334155;
}

.restricted-access-text:last-child { margin-bottom: 0; }

/* Priority score visual indicators for Dashboard */
.priority-critical {
    font-weight: 700;
    color: #DC2626;
    text-decoration: none;
}

.priority-critical:hover {
    text-decoration: underline;
    color: #991B1B;
}

.priority-high {
    font-weight: 600;
    color: #EA580C;
    text-decoration: none;
}

.priority-high:hover {
    text-decoration: underline;
    color: #C2410C;
}

.priority-medium {
    font-weight: 500;
    color: #EAB308;
    text-decoration: none;
}

.priority-medium:hover {
    text-decoration: underline;
    color: #CA8A04;
}

.priority-low {
    font-weight: 400;
    color: #6366F1;
    text-decoration: none;
}

.priority-low:hover {
    text-decoration: underline;
    color: #4F46E5;
}

/* ADR-033. UNMEASURED priority. Deliberately NOT a band on the critical→low ramp: this is the absence of a
   measurement, not the bottom of one, and it must not read as "we scored them and they were weak". Neutral
   grey, italic, so it is legible as a state rather than as a rank. */
.priority-unmeasured {
    font-weight: 400;
    font-style: italic;
    color: #6B7280;
    text-decoration: none;
}

.priority-unmeasured:hover {
    text-decoration: underline;
    color: #4B5563;
}

/* Static header draft handoff. The central command input remains on / and /ask. */
.top-row:has(.command-entry-form) { flex-wrap: wrap; row-gap: .5rem; }
.command-entry-form {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 0 1rem; flex: 1 1 24rem; max-width: 36rem; min-width: 0;
}
.command-entry-input {
  flex: 1 1 10rem; width: 10rem; min-width: 0; padding: .5rem .7rem;
  border: 1px solid var(--border-subtle, #D6DCE2); border-radius: .65rem;
  background: var(--surface-raised, #F5F6F8); color: var(--text-primary, #1f2430); font: inherit;
}
.command-entry-submit {
  padding: .5rem .7rem; border: 1px solid var(--border-subtle, #D6DCE2); border-radius: .65rem;
  background: var(--surface-raised, #F5F6F8); color: var(--text-primary, #1f2430); font: inherit;
}
.command-entry-input:focus-visible, .command-entry-submit:focus-visible {
  outline: 2px solid var(--focus-ring, #8b1a2b); outline-offset: 2px;
}
.command-draft-status { display: block; flex-basis: 100%; font-size: .8rem; color: var(--text-secondary, #5b6472); }
.command-draft-status:empty { display: none; }
@media (max-width: 820px) {
  .command-entry-form { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* Live local time: wall clocks are distinct from last-contact age. */
.local-time-clock { display:flex; flex-direction:column; gap:.15rem; padding:.6rem .85rem; border:1px solid var(--border-default); border-radius:12px; background:var(--surface,#fff); min-width:155px; }
.local-time-label { font-size:.69rem; text-transform:uppercase; letter-spacing:.045em; color:var(--text-secondary,#64748b); }
.local-time-value { font-size:1.05rem; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-primary,#0f172a); }
.local-time-date,.local-time-comparison,.local-time-hours { font-size:.74rem; line-height:1.4; color:var(--text-secondary,#64748b); }
.local-time-comparison { font-weight:600; }
.local-time-clock[data-calling-hours="open"] .local-time-hours { color:#15803d; }
.top-row .local-time-clock { margin-right:1rem; }
.layer1-field .local-time-clock { margin-top:.45rem; }
@media(max-width:700px) {
  .top-row { flex-wrap:wrap; row-gap:.65rem; }
  .top-row .local-time-clock { order:10; flex-basis:100%; margin-right:0; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.3rem .7rem; }
}

/* Keep attachment metadata and actions within their own keyboard-scrollable region. */
.document-table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; }
.document-table-scroll:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.document-table-scroll .candidate-table { min-width:36rem; }
.document-table-scroll td:first-child { overflow-wrap:anywhere; max-width:24rem; }
.document-upload-form > div { min-width:0; }
.document-file-input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.document-file-list { min-width:0; overflow-wrap:anywhere; }
@media print {
    .document-table-scroll { overflow:visible; }
    .document-table-scroll .candidate-table { min-width:0; }
}

/* Shared report attribution uses the exact approved standalone M asset. The small on-screen mark keeps
   ownership visible without competing with report content; print adds the same asset as a restrained
   page watermark. Uploaded originals are untouched. */
.report-confidentiality-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-top: 2rem;
    padding-top: .85rem;
    border-top: 1px solid #d6dce2;
    color: #4b5563;
    font-size: .72rem;
    text-align: left;
}
.report-confidentiality-symbol {
    width: 34px;
    height: 34px;
    object-fit: contain;
    opacity: .32;
    flex: 0 0 auto;
}
.report-confidentiality-mark p { margin: .12rem 0; }

@media print {
    body:has(:is(.summary-report, .magnavis-report))::after {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        height: 260px;
        background: url('/branding/magnavis-symbol.png') center / contain no-repeat;
        opacity: .06;
        pointer-events: none;
        z-index: 0;
        print-color-adjust: exact;
    }

    .report-confidentiality-mark {
        color: #4b5563;
        break-inside: avoid;
    }
}

/* Transparent selected artwork follows the persisted application theme.
   Only the displayed image participates in the accessibility tree. */
.product-brand-light { display: inline-block; }
.product-brand-dark { display: none; }
:root[data-theme="dark"] .product-brand-light { display: none; }
:root[data-theme="dark"] .product-brand-dark { display: inline-block; }
/* Reports and sign-in cards retain white surfaces, including in dark appearance. */
:root[data-theme="dark"] .login-card .product-brand-light,
:root[data-theme="dark"] .summary-report-shell .product-brand-light,
:root[data-theme="dark"] .summary-report .product-brand-light { display: inline-block; }
:root[data-theme="dark"] .login-card .product-brand-dark,
:root[data-theme="dark"] .summary-report-shell .product-brand-dark,
:root[data-theme="dark"] .summary-report .product-brand-dark { display: none; }
@media print {
    :root .product-brand-light { display: inline-block !important; }
    :root .product-brand-dark { display: none !important; }
}

/* Compact working-screen footer; policy links remain keyboard-accessible. */
.command-footer { padding: .75rem 1rem; }
.command-footer .footer-content { gap: .5rem 1.5rem; align-items: start; }
.command-footer .footer-bottom { margin-top: .35rem; padding-top: .35rem; }
.command-footer .footer-label { cursor: pointer; min-height: 44px; display: list-item; }
.command-footer p { margin-bottom: .25rem; }
.command-inbox .alert-warning, .alert-warning { --bs-alert-bg:#EEF1F4; --bs-alert-color:#334155; --bs-alert-border-color:#D6DCE2; }

/* List-page filter bar and sortable column headers.
   The Ctrl+K shortcut still works; only its on-screen hint was removed. */
.workflow-filter-bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 0 0 1rem;
}
.workflow-filter-bar label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.workflow-filter-bar .form-control { min-width: 12rem; }
.table-sort {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit;
  cursor: pointer; text-align: left;
}
.table-sort:hover { text-decoration: underline; }
.table-sort:focus-visible { outline: 2px solid var(--focus-ring, #8b1a2b); outline-offset: 2px; }

/* The collapsible wrapper around that filter bar. Closed by default; the toggle is a real button so it
   is keyboard reachable and announces its state. */
.list-filter-bar { margin: 0 0 1rem; }
.list-filter-toggle {
  background: none; border: 0; padding: .35rem 0; font: inherit; font-weight: 600; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
}
.list-filter-toggle:hover { text-decoration: underline; }
.list-filter-toggle:focus-visible { outline: 2px solid var(--focus-ring, #8b1a2b); outline-offset: 2px; }
.list-filter-caret { color: var(--text-secondary, #5b6472); }
.list-filter-bar .workflow-filter-bar[hidden] { display: none; }
.workflow-primary-search { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; margin: .75rem 0 0; }

/* UAT-058: admin tables (Users, Territories) scroll inside their own region at phone/tablet widths; nothing is hidden. */
.admin-table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; }
.admin-table-scroll:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
@media print {
    .admin-table-scroll { overflow:visible; }
}
/* UAT-059: persona switch (account menu, Preferences) and the "Viewing as" strip. */
.acting-role-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.acting-role-switch select { width: auto; min-width: 10rem; }
.acting-role-switch p { flex-basis: 100%; margin: 0; }
.acting-role-switch-compact { margin: 0; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); }
.acting-role-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    margin: 0.5rem 1.5rem 0; padding: 0.5rem 0.75rem; color: var(--text-primary); background: var(--surface-sunken);
    border: 1px solid var(--border-subtle); border-left: 4px solid var(--status-info); border-radius: 0.5rem; }
.acting-role-restore { margin: 0; }