/*
 * Transitional tokens. Existing module pages + JS reference --color-* / --font-sans / --border-radius-*
 * in ~57 places across 9 files. During the Talos design-system port they alias to --talos-* tokens
 * from talos-tokens.css so the palette flips automatically with [data-theme="dark"]. As each module
 * page is rebuilt in later PORTING steps against --talos-* directly, these aliases can be removed.
 */
:root {
    --font-sans: var(--talos-sans);
    --color-text-primary: var(--talos-ink);
    --color-text-secondary: var(--talos-ink-65);
    --color-background-primary: var(--talos-panel);
    --color-background-secondary: var(--talos-bg);
    --color-border-secondary: var(--talos-ink-12);
    --color-border-tertiary: var(--talos-ink-08);
    --color-background-info: var(--talos-bg);
    --color-text-info: var(--talos-warm);
    --color-overdue-accent: var(--talos-risk);
    --border-radius-md: 0;
    --border-radius-lg: 0;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--talos-sans); font-size: 14px; color: var(--talos-ink); background: var(--talos-paper); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-header {
    display: flex; align-items: center; gap: 28px;
    padding: 12px 24px;
    background: var(--talos-panel);
    border-bottom: 1px solid var(--talos-ink-12);
    flex-shrink: 0;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand-sentinel { display: block; flex-shrink: 0; }
.brand-sentinel__ring { stroke: var(--talos-ink); }
.brand-sentinel__bead { fill: var(--talos-warm); }
.brand-wordmark {
    font-family: var(--talos-serif); font-size: 14px; color: var(--talos-ink);
    letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; font-weight: 400;
}
.app-header .app-nav { display: flex; gap: 2px; }
.app-header .app-nav a {
    font-family: var(--talos-sans); font-size: 12px;
    color: var(--talos-ink-65); text-decoration: none;
    padding: 6px 10px 14px 10px;
    margin-bottom: -13px;
    border-bottom: 2px solid transparent;
}
.app-header .app-nav a:hover { color: var(--talos-ink); }
.app-header .app-nav a.active { color: var(--talos-ink); font-weight: 600; border-bottom-color: var(--talos-warm); }
.app-spacer { flex: 1; }
.app-status {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--talos-mono); font-size: 10px; color: var(--talos-mid);
    text-transform: uppercase; letter-spacing: 0.12em;
}
.app-status__item { display: inline-flex; align-items: center; gap: 6px; }
.app-status__divider { color: var(--talos-ink-12); }
/* User menu (header avatar + dropdown panel). Uses --talos-* tokens from talos-tokens.css. */
.user-menu { position: relative; }
.user-menu__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer;
    padding: 3px 6px 3px 3px;
    font-family: var(--talos-sans);
}
.user-menu__trigger:hover,
.user-menu__trigger[aria-expanded="true"] { background: var(--talos-ink-05); }
.user-menu__trigger:focus-visible { outline: 2px solid var(--talos-warm); outline-offset: 2px; }
.user-menu__chevron { font-size: 9px; color: var(--talos-ink-65); opacity: 0.6; }
.user-menu__panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 260px; z-index: 30;
    background: var(--talos-panel);
    border: 1px solid var(--talos-ink-12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}
.user-menu__panel[hidden] { display: none; }
.user-menu__identity { padding: 14px 16px; border-bottom: 1px solid var(--talos-ink-12); }
.user-menu__name { font-family: var(--talos-serif); font-size: 17px; color: var(--talos-ink); line-height: 1.2; margin-bottom: 4px; }
.user-menu__theme {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid var(--talos-ink-12);
    font-family: var(--talos-sans); font-size: 12px; color: var(--talos-ink);
}
.user-menu__signout {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px;
    font-family: var(--talos-sans); font-size: 12px;
    color: var(--talos-ink);
    text-decoration: none;
    cursor: pointer;
}
.user-menu__signout:hover { background: var(--talos-ink-05); color: var(--talos-warm); }
.user-menu__signout-arrow { color: var(--talos-ink-45); font-size: 13px; }
.user-menu__signout:hover .user-menu__signout-arrow { color: var(--talos-warm); }

/* ─── Notification bell + drawer ──────────────────────────────────────
   Bell sits between the status pill and the user-menu in the header.
   The drawer reuses .tal-drawer (right-side slide-in) from
   talos-components.css; the styles below cover only the bell itself,
   the badge bubble, and the row composition inside the drawer body.
   ────────────────────────────────────────────────────────────────── */
.notif-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--talos-ink-12);
    color: var(--talos-ink);
    cursor: pointer;
    margin-right: 8px;
}
.notif-bell:hover { background: var(--talos-ink-05); }
.notif-bell:focus-visible { outline: 2px solid var(--talos-warm); outline-offset: 2px; }
.notif-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--talos-risk);
    color: #fff;
    font-family: var(--talos-mono);
    font-size: 9px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1;
}
.notif-badge[hidden] { display: none; }

.notif-section { padding: 14px 16px 4px 16px; }
.notif-section__label {
    color: var(--talos-mid);
    margin-bottom: 8px;
}
.notif-list { display: flex; flex-direction: column; gap: 6px; }

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--talos-ink-08);
    background: var(--talos-panel);
    cursor: pointer;
    transition: background .12s;
}
.notif-row:hover { background: var(--talos-ink-05); }
.notif-row--unread { border-left: 3px solid var(--talos-warm); }
.notif-row__main { flex: 1; min-width: 0; }
.notif-row__title {
    font-size: 13px;
    color: var(--talos-ink);
    margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-row__sub {
    font-size: 12px;
    color: var(--talos-ink-65);
    margin-bottom: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-row__meta { color: var(--talos-mid); }

/* Right-side column: severity pill above, Complete button below. */
.notif-row__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.notif-row__complete {
    font-family: var(--talos-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--talos-mid);
    background: transparent;
    border: 1px solid var(--talos-ink-12);
    padding: 4px 10px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.notif-row__complete:hover,
.notif-row__complete:focus-visible {
    color: var(--talos-ink);
    background: var(--talos-ink-05);
    border-color: var(--talos-ink-20, var(--talos-ink-12));
    outline: none;
}

/* Collapse + fade animation when a row is being dismissed via Complete. */
.notif-row {
    transition: background .12s, opacity .18s ease, transform .18s ease,
                max-height .22s ease, padding .22s ease, margin .22s ease,
                border-width .22s ease;
    max-height: 200px;
    overflow: hidden;
}
.notif-row--leaving {
    opacity: 0;
    transform: translateX(8px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-width: 0;
    pointer-events: none;
}

.app-main { flex: 1; padding: 1.5rem 2rem; max-width: 1400px; width: 100%; margin: 0 auto; }

.tabs { display: flex; gap: 2px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.tab { padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--color-text-secondary); border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; }
.tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); font-weight: 500; }
.tab:hover:not(.active) { color: var(--color-text-primary); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.metric { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem; }
.metric-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.metric-val { font-size: 22px; font-weight: 500; }
.metric-val.warn { color: var(--talos-warm); }
.metric-val.danger { color: var(--talos-risk); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 12px; font-weight: 500; font-size: 12px; color: var(--color-text-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 0.5px solid var(--color-border-tertiary); color: var(--color-text-primary); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-background-secondary); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge-admin { background: #EEEDFE; color: #3C3489; }
.badge-rw { background: #E6F1FB; color: #0C447C; }
.badge-ro { background: #EAF3DE; color: #27500A; }
.badge-none { background: #F1EFE8; color: #444441; }
.badge-active { background: #EAF3DE; color: #27500A; }
.badge-inactive { background: #FCEBEB; color: #791F1F; }
.badge-overdue { background: #FCEBEB; color: #A32D2D; }
.badge-due { background: #FAEEDA; color: #633806; }
.badge-ok { background: #EAF3DE; color: #27500A; }
.badge-sw { background: #EEEDFE; color: #3C3489; }
.badge-app { background: #E6F1FB; color: #0C447C; }
.badge-infra { background: #FAEEDA; color: #633806; }
.badge-low { background: #EAF3DE; color: #27500A; }
.badge-medium { background: #FAEEDA; color: #633806; }
.badge-high { background: #FAECE7; color: #712B13; }
.badge-critical { background: #FCEBEB; color: #A32D2D; }
.badge-mono { background: var(--color-background-secondary); color: var(--color-text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.badge-open { background: #FAEEDA; color: #633806; }
.badge-closed { background: #EAF3DE; color: #27500A; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input, .toolbar select { font-size: 13px; padding: 6px 10px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-primary); height: 32px; }
.toolbar input { min-width: 200px; }

.btn { padding: 6px 14px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); cursor: pointer; font-size: 13px; background: var(--color-background-primary); color: var(--color-text-primary); height: 32px; white-space: nowrap; }
.btn:hover { background: var(--color-background-secondary); }
.btn-primary { background: var(--color-text-primary); color: var(--color-background-primary); border-color: var(--color-text-primary); }
.btn-primary:hover { opacity: 0.85; }
.btn-sm { padding: 3px 8px; height: 24px; font-size: 11px; }
.btn-danger { color: #A32D2D; border-color: var(--color-border-secondary); }
.btn-danger:hover { background: #FCEBEB; }

.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal { background: var(--color-background-primary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding: 1.5rem; width: 480px; max-width: 94vw; max-height: 80vh; overflow-y: auto; }
.modal h3 { font-size: 16px; font-weight: 500; margin-bottom: 1.25rem; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; font-size: 13px; padding: 7px 10px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-primary); }
.form-row textarea { resize: vertical; min-height: 60px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; }

.section-title { font-size: 13px; font-weight: 500; margin-bottom: 1rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.empty { text-align: center; padding: 3rem; color: var(--color-text-secondary); font-size: 13px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-background-info); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--color-text-info); flex-shrink: 0; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.export-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.overdue-row td:first-child { box-shadow: inset 3px 0 0 var(--color-overdue-accent); }

/* ─── Dashboard layout ─────────────────────────────────────────────
   Grid scaffolding + per-card row patterns for Pages/Dashboard.cshtml.
   All atoms use .tal-* classes from talos-components.css; these rules are
   just the composition (columns, gaps) and list-row density.
   ──────────────────────────────────────────────────────────────────── */
.dash { display: flex; flex-direction: column; gap: 18px; }

/* Stat strip — 4 equal columns, reusing .tal-stat. */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-stats .tal-stat { text-decoration: none; }
.dash-stats .tal-stat:hover { background: var(--talos-ink-05); }
@media (max-width: 900px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

.dash-row { display: grid; gap: 18px; }
.dash-row--split  { grid-template-columns: 1.35fr 1fr; }
.dash-row--thirds { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 1100px) {
    .dash-row--split, .dash-row--thirds { grid-template-columns: 1fr; }
}

.dash-empty {
    padding: 24px 18px;
    text-align: center;
    font-size: 12px;
    color: var(--talos-ink-45);
}

/* Access-review campaign rows (grouped by system). */
.dash-review {
    display: grid;
    grid-template-columns: 1.4fr 110px 90px 90px;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--talos-ink-08);
}
.dash-review:first-child { border-top: none; }
.dash-review__name   { font-size: 13px; color: var(--talos-ink); margin-bottom: 2px; }
.dash-review__scope  { font-size: 11px; color: var(--talos-ink-45); }
.dash-review__progress { display: flex; flex-direction: column; gap: 4px; }
.dash-review__count  { color: var(--talos-ink-65); }
.dash-review__due    { color: var(--talos-ink-65); }

/* Risk posture (category rows with progress bar). */
.dash-risk-list { display: flex; flex-direction: column; gap: 12px; }
.dash-risk__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 5px;
}
.dash-risk__name { font-size: 12px; color: var(--talos-ink); }
.dash-risk__high { color: var(--talos-risk); }
.dash-risk__bar  { height: 6px; }

/* Active-incident rows. */
.dash-incident {
    padding: 12px 18px;
    border-top: 1px solid var(--talos-ink-08);
    display: flex; flex-direction: column; gap: 5px;
}
.dash-incident:first-child { border-top: none; }
.dash-incident__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.dash-incident__title {
    font-size: 12.5px; color: var(--talos-ink); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
}
.dash-incident__meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--talos-mid); }

/* Software flag rows. */
.dash-software {
    padding: 11px 18px;
    border-top: 1px solid var(--talos-ink-08);
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.dash-software:first-child { border-top: none; }
.dash-software__name { font-size: 12.5px; color: var(--talos-ink); }
.dash-software__meta { font-size: 11px; color: var(--talos-ink-45); margin-top: 2px; }
.dash-software__footer { padding: 14px; text-align: center; border-top: 1px solid var(--talos-ink-08); }

/* Activity feed. */
.dash-activity {
    padding: 11px 18px;
    border-top: 1px solid var(--talos-ink-08);
    display: flex; gap: 10px; align-items: flex-start;
}
.dash-activity:first-child { border-top: none; }
.dash-activity__avatar { margin-top: 1px; }
.dash-activity__body { flex: 1; min-width: 0; }
.dash-activity__msg  { font-size: 12px; color: var(--talos-ink); line-height: 1.4; }
.dash-activity__meta { color: var(--talos-mid); margin-top: 3px; }

/* ─── Module page chrome ───────────────────────────────────────────
   Shared across rebuilt list-style modules (Incidents; Risk, Software,
   Access follow-on). Handles the pagehead → stats → toolbar → card-list
   → drawer composition using atoms from talos-components.css.
   ──────────────────────────────────────────────────────────────────── */
.mod { display: flex; flex-direction: column; gap: 18px; }

.mod-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .mod-stats { grid-template-columns: repeat(2, 1fr); } }

.mod-tab { display: flex; flex-direction: column; gap: 18px; }

.mod-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mod-toolbar .tal-search { flex: 0 1 320px; }
.mod-toolbar__spacer { flex: 1; }

.mod-empty { padding: 3rem; text-align: center; color: var(--talos-ink-45); font-size: 12px; }

/* Row text helpers — used inside .tal-row cells. */
.mod-row__title { color: var(--talos-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-row__sub { font-size: 11px; color: var(--talos-ink-45); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-mono { font-family: var(--talos-mono); font-size: 11px; color: var(--talos-ink-65); }
.mod-muted { color: var(--talos-ink-45); }
.mod-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--talos-mono); font-size: 10px; color: var(--talos-ink-65);
    text-transform: uppercase; letter-spacing: 0.1em;
}

/* Drawer body composition (the atom is .tal-drawer from components.css). */
.tal-drawer__title {
    font-family: var(--talos-serif); font-size: 20px; color: var(--talos-ink); margin-top: 2px;
}
.mod-drawer__close {
    padding: 4px 8px; height: auto;
    font-family: var(--talos-mono); font-size: 11px; color: var(--talos-ink-65);
}
.mod-drawer__section { padding: 0 22px; }
.mod-drawer__section:not(:first-child) { margin-top: 20px; }
.mod-drawer__section:first-child { padding-top: 22px; }
.mod-drawer__section:last-child  { padding-bottom: 22px; }
.mod-drawer__section > .tal-label-mono + .mod-drawer__body-text { margin-top: 8px; }
.mod-drawer__pills { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 22px; }
.mod-drawer__summary {
    margin: 20px 22px;
    padding: 16px;
    font-size: 13px; color: var(--talos-ink); line-height: 1.55;
    background: var(--talos-bg);
    border: 1px solid var(--talos-ink-08);
}
.mod-drawer__kv {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; padding: 0 22px;
}
@media (max-width: 640px) { .mod-drawer__kv { grid-template-columns: 1fr 1fr; } }
.mod-drawer__body-text { font-size: 12.5px; color: var(--talos-ink); line-height: 1.55; }
.mod-drawer__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 22px; padding-top: 18px;
    border-top: 1px solid var(--talos-ink-12);
}

/* Re-style the existing modal buttons already swapped to .tal-btn — match the
   legacy .btn sizing so form-actions rows line up with the inputs. */
.modal .form-actions .tal-btn { height: 32px; padding: 6px 14px; font-size: 13px; }

/* ─── Risk module — scoring cells + drawer scorecards ──────────────
   Used by wwwroot/js/risks.js. The inline `.risk-score` is the tight
   L×S badge shown in each row; the `.risk-scorecard` is the big tile
   version used inside the drawer's 4-up scoring grid.
   ──────────────────────────────────────────────────────────────────── */
.risk-score {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; padding: 0 6px;
    font-family: var(--talos-mono); font-size: 11px; font-weight: 600;
    background: var(--talos-ink-05);
    border: 1px solid var(--talos-ink-12);
    color: var(--talos-ink);
}
.risk-score--ok     { background: rgba(74,122,82,0.12);  border-color: rgba(74,122,82,0.28);  color: var(--talos-ok); }
.risk-score--bronze { background: rgba(184,115,51,0.12); border-color: rgba(184,115,51,0.28); color: var(--talos-warm); }
.risk-score--warn   { background: rgba(184,115,51,0.18); border-color: rgba(184,115,51,0.35); color: var(--talos-warm); }
.risk-score--risk   { background: rgba(166,61,42,0.14);  border-color: rgba(166,61,42,0.30);  color: var(--talos-risk); }

.risk-scoregrid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.risk-scorecard {
    padding: 12px;
    background: var(--talos-bg);
    border: 1px solid var(--talos-ink-08);
    display: flex; flex-direction: column; gap: 6px;
}
.risk-scorecard__val {
    font-family: var(--talos-serif); font-size: 26px; line-height: 1;
    color: var(--talos-ink);
}
.risk-scorecard__val--ok     { color: var(--talos-ok); }
.risk-scorecard__val--bronze { color: var(--talos-warm); }
.risk-scorecard__val--warn   { color: var(--talos-warm); }
.risk-scorecard__val--risk   { color: var(--talos-risk); }

.risk-controls-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 640px) {
    .risk-scoregrid     { grid-template-columns: repeat(2, 1fr); }
    .risk-controls-grid { grid-template-columns: 1fr; }
}

/* ─── Access / Users module — user cell + large avatar ────────────
   Access-register.js renders each user row as an avatar + stacked
   name/dept. `--lg` variant is used inside the grant drawer header.
   ──────────────────────────────────────────────────────────────────── */
.mod-user-cell {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.mod-user-cell > div { min-width: 0; }
.mod-user-cell--lg { gap: 14px; }
.tal-avatar--lg {
    width: 40px; height: 40px; border-radius: 20px; font-size: 13px;
}

/* ─── Tab bar (tal-segmented used as page-level tabs) ─────────────
   Page-level tabs on User Access Register are wider than the toolbar
   segmented filters — ensure they read as primary navigation.
   ──────────────────────────────────────────────────────────────────── */
#access-tabs button {
    font-family: var(--talos-sans);
    font-size: 12px;
    padding: 9px 18px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--talos-ink-65);
}
#access-tabs button[aria-pressed="true"] {
    color: var(--talos-ink); font-weight: 600;
    background: var(--talos-ink-08);
}

/* ─── Sign-in page (uses _AuthLayout) ────────────────────────────────
   Always dark. The _AuthLayout hardcodes `data-theme="dark"` so the
   shared tokens resolve to their dark values here — the user's light /
   dark preference for the signed-in app is left untouched.
   Two-pane split: mark + Canto quote on the left (hidden under 900px),
   single "Continue with Microsoft SSO" bronze button on the right.
   ──────────────────────────────────────────────────────────────────── */
.auth-body {
    min-height: 100vh;
    background: var(--talos-bg-alt);
    color: var(--talos-pale);
    margin: 0;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 460px;
}
@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
}

/* ── Brand pane (left) ─────────────────────────────────────────── */
.login-brand {
    position: relative;
    padding: 48px 56px;
    color: var(--talos-pale);
    background:
        radial-gradient(ellipse at 30% 40%, rgba(184,115,51,0.10) 0%, transparent 60%);
    border-right: 1px solid rgba(240,228,208,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
@media (max-width: 900px) {
    .login-brand { display: none; }
}

.login-brand__lockup .brand-sentinel__ring { stroke: var(--talos-pale); }
.login-brand__lockup .brand-sentinel__bead  { fill: var(--talos-warm); }
.login-brand__wordmark {
    color: var(--talos-pale);
    font-size: 16px;
    letter-spacing: 0.22em;
}

.login-brand__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.login-sentinel { display: block; flex-shrink: 0; }
.login-sentinel__ring { stroke: var(--talos-pale); }
.login-sentinel__core { fill: var(--talos-pale); }
.login-sentinel__bead { fill: var(--talos-warm); }

.login-brand__quote { max-width: 520px; }
.login-brand__canto {
    color: var(--talos-light);
    letter-spacing: 0.2em;
}
.login-brand__verse {
    font-family: var(--talos-serif);
    font-style: italic;
    font-size: 40px;
    line-height: 1.15;
    color: var(--talos-pale);
    margin: 12px 0 0 0;
    font-weight: 400;
}

.login-brand__footer {
    display: flex; align-items: center; gap: 24px;
}
.login-brand__footer .tal-label-mono { color: rgba(240,228,208,0.45); }

/* ── Sign-in pane (right) ──────────────────────────────────────── */
.login-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    gap: 28px;
}

.login-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.login-card__head { display: flex; flex-direction: column; gap: 8px; }
.login-card__head .tal-label-mono { color: var(--talos-light); letter-spacing: 0.2em; }
.login-card__title {
    font-family: var(--talos-serif);
    font-size: 36px;
    line-height: 1.1;
    color: var(--talos-pale);
    margin: 0;
    font-weight: 400;
}

/* SSO section */
.login-sso { display: flex; flex-direction: column; gap: 10px; }
.login-sso__note {
    color: rgba(240,228,208,0.35);
    letter-spacing: 0.14em;
    font-size: 11px;
}
.login-sso form { margin: 0; }

.login-sso-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: var(--talos-warm);
    color: #fff;
    border: none;
    font-family: var(--talos-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.login-sso-btn:hover { background: var(--talos-warm-hover); }
.login-sso-btn:focus-visible {
    outline: 2px solid var(--talos-pale);
    outline-offset: 2px;
}

.login-sso-btn__logo {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    background: #fff;
    padding: 1px;
}
.login-sso-btn__label { flex: 1; }
.login-sso-btn__arrow { opacity: 0.6; }

/* ─── Backups & DR — attachment grid (drawer) ────────────────────────
   Tiles are 96px square, image attachments fill the tile via object-fit,
   PDF tiles get a centred mono "PDF" badge. Each tile has a small × in
   the corner that triggers deletion (event.stopPropagation in JS so
   clicking the tile body still opens the file). Reuses --talos-* tokens
   so the look flips correctly under [data-theme="dark"].
   ───────────────────────────────────────────────────────────────── */
.bk-att-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.bk-att {
    position: relative;
    width: 96px; height: 96px;
    border: 1px solid var(--talos-ink-12);
    background: var(--talos-bg);
    overflow: hidden;
}
.bk-att__link {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; height: 100%;
    text-decoration: none; color: inherit;
}
.bk-att img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bk-att-icon {
    font-family: var(--talos-mono);
    font-size: 14px; font-weight: 600;
    color: var(--talos-warm);
    letter-spacing: 0.1em;
}
.bk-att-name {
    font-size: 10px;
    color: var(--talos-ink-65);
    margin-top: 4px;
    padding: 0 4px;
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 88px;
}
.bk-att__del {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px; line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.bk-att:hover .bk-att__del { opacity: 1; }
.bk-att__del:focus-visible { opacity: 1; outline: 2px solid var(--talos-warm); outline-offset: 1px; }

/* ─── Risk matrix (Likelihood × Severity heat map) ─────────────────
   Lives in a tal-card on /Risks between the stat tiles and the toolbar.
   Single CSS Grid with: row 1-5 = severity 5..1 (descending top→bottom),
   col 1 = vertical "Severity" caption, col 2 = severity row label,
   cols 3-7 = the 5 cell columns. Final two grid rows hold the column
   numbers and the "Likelihood" caption.
   Cell tones use --talos-ok / --talos-warm / --talos-risk with
   alpha ramps so the heat map reads but stays in palette. Cells are
   square via aspect-ratio: 1, capped at 88px so the matrix never
   dominates the page.
   ─────────────────────────────────────────────────────────────── */
.risk-matrix {
    display: grid;
    grid-template-columns: 26px 28px repeat(5, minmax(56px, 88px));
    grid-template-rows: repeat(5, minmax(56px, 88px)) 22px 22px;
    gap: 4px;
    padding: 4px 4px 0 4px;
    max-width: 580px;
    align-items: stretch;
    justify-items: stretch;
}
.risk-matrix__y-label,
.risk-matrix__x-label {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--talos-mono);
    font-size: 10px;
    color: var(--talos-mid);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.risk-matrix__y-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.risk-matrix__row-label,
.risk-matrix__col-label {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--talos-mono);
    font-size: 11px;
    color: var(--talos-ink-65);
}
.risk-matrix__cell {
    position: relative;
    aspect-ratio: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.12s ease, transform 0.08s ease;
    font-family: var(--talos-mono);
}
.risk-matrix__cell:hover     { border-color: var(--talos-ink-25); }
.risk-matrix__cell:focus-visible { outline: 2px solid var(--talos-warm); outline-offset: 1px; }
.risk-matrix__cell--selected {
    border: 2px solid var(--talos-ink);
    transform: scale(1.02);
    z-index: 1;
}
.risk-matrix__score {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.risk-matrix__count {
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.85;
}

/* Tonal heat ramp using the existing palette tokens. */
.risk-matrix__cell--low      { background: rgba(74, 122, 82, 0.30);  color: #2c4f33; }
.risk-matrix__cell--medium   { background: rgba(184, 115, 51, 0.28); color: #6b4626; }
.risk-matrix__cell--high     { background: rgba(184, 115, 51, 0.55); color: #ffffff; }
.risk-matrix__cell--critical { background: rgba(166, 61, 42, 0.65);  color: #ffffff; }

/* Dark-mode overrides — the bronze and risk tones get more saturated
   so they stay visible against the dark canvas. */
[data-theme="dark"] .risk-matrix__cell--low      { background: rgba(124, 168, 131, 0.32); color: #d8e8d8; }
[data-theme="dark"] .risk-matrix__cell--medium   { background: rgba(208, 137, 68, 0.32);  color: #f0d9b8; }
[data-theme="dark"] .risk-matrix__cell--high     { background: rgba(208, 137, 68, 0.60);  color: #1a1310; }
[data-theme="dark"] .risk-matrix__cell--critical { background: rgba(212, 106, 88, 0.70);  color: #1a1310; }
[data-theme="dark"] .risk-matrix__cell--selected { border-color: var(--talos-pale); }

/* ─── Risk matrix layout: matrix on the left, definition tables on the right.
   Stacks vertically below 1200px so the page stays readable on narrow viewports.
   ─────────────────────────────────────────────────────────────────── */
.risk-matrix-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}
.risk-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 1200px) {
    .risk-matrix-row { flex-direction: column; }
    .risk-legend { width: 100%; }
}

/* ─── Likelihood / Severity reference tables ─────────────────────────
   Talos-styled: --talos-bg header rows, --talos-ink-12 borders, mono
   row headers in the same uppercase 10px treatment used everywhere
   else for column captions. Bronze underline on the table caption
   ties it visually to the matrix's bronze accents.
   ─────────────────────────────────────────────────────────────── */
.risk-legend__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--talos-sans);
    font-size: 11px;
    line-height: 1.35;
    /* table-layout: auto (default) lets the row-header column shrink to its
       content (e.g. "Probability" / "5 · Catastrophic") so the wide data
       columns get as much room as possible. */
}
.risk-legend__caption {
    font-family: var(--talos-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--talos-mid);
    background: var(--talos-bg);
    padding: 8px 10px;
    text-align: left;
    font-weight: 500;
    border-left: 2px solid var(--talos-warm);
    border-bottom: 1px solid var(--talos-ink-12);
    caption-side: top;
}
.risk-legend__table thead th,
.risk-legend__table tbody th {
    font-family: var(--talos-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--talos-mid);
    background: var(--talos-bg);
    padding: 6px 8px;
    font-weight: 500;
    text-align: left;
    border: 1px solid var(--talos-ink-12);
    vertical-align: middle;
}
/* Row labels in the leftmost column: keep the line-break sensible by allowing
   the dot-separated number/word pair to wrap as a unit only if the cell is
   really narrow. The min-width keeps the column from squashing past readability. */
.risk-legend__table tbody th {
    min-width: 78px;
    line-height: 1.3;
}
.risk-legend__table tbody td {
    background: var(--talos-panel);
    padding: 6px 8px;
    color: var(--talos-ink);
    border: 1px solid var(--talos-ink-12);
    vertical-align: top;
    word-break: normal;
    overflow-wrap: anywhere;
}
.risk-legend__levels td {
    font-family: var(--talos-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--talos-warm);
    background: var(--talos-bg);
    text-align: center;
    padding: 6px 4px;
}

/* ─── Risk matrix card: collapse / expand ───────────────────────────
   The card loads collapsed by default (the .risk-matrix-card--collapsed
   class is set directly on the card in Razor), and the toggle button in
   the header is the only way to open it. Hides the body + the sub
   caption when collapsed; the title and current "N rated risks" status
   stay visible so the section is still informative when closed.
   ─────────────────────────────────────────────────────────────── */
.risk-matrix-card--collapsed .tal-card__body { display: none; }
.risk-matrix-card--collapsed .tal-card__sub  { display: none; }
.risk-matrix-card--collapsed .tal-card__header { border-bottom: none; }

.risk-matrix-header-right {
    display: flex; align-items: center; gap: 12px;
}
.risk-matrix-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--talos-ink-12);
    color: var(--talos-ink);
    font-family: var(--talos-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.risk-matrix-toggle:hover { background: var(--talos-ink-05); border-color: var(--talos-ink-25); }
.risk-matrix-toggle:focus-visible { outline: 2px solid var(--talos-warm); outline-offset: 2px; }
.risk-matrix-toggle__chevron {
    font-size: 10px;
    color: var(--talos-ink-65);
    transition: transform 0.18s ease;
    line-height: 1;
}
.risk-matrix-card--collapsed .risk-matrix-toggle__chevron {
    transform: rotate(-90deg);
}

/* ─── Textarea meta row (markdown hint + character counter) ──────────
   Auto-attached by shared.js to every <textarea[maxlength]>. Hint sits
   on the left (only shown when textarea has data-md="true"), counter on
   the right; counter is mono and goes amber at 90% of limit, red at 100%.
   ─────────────────────────────────────────────────────────────── */
.textarea-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
    font-family: var(--talos-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}
.md-hint {
    color: var(--talos-ink-45);
    flex: 1;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-hint code {
    background: var(--talos-ink-08);
    color: var(--talos-ink-65);
    padding: 1px 4px;
    margin: 0 2px;
    font-family: var(--talos-mono);
}
.char-counter {
    color: var(--talos-ink-45);
    white-space: nowrap;
    letter-spacing: 0.06em;
}
.char-counter--warn { color: var(--talos-warm); }
.char-counter--risk { color: var(--talos-risk); font-weight: 600; }

/* ─── Rendered markdown inside drawer body-text blocks ─────────────
   Drawer copy is rendered via shared.js renderMd() into the existing
   .mod-drawer__body-text container. Scoped block styles below keep
   headings reasonable (no browser-default oversized H1) and use the
   serif/mono fonts already in the design system.
   ───────────────────────────────────────────────────────────── */
.mod-drawer__body-text > *:first-child { margin-top: 0; }
.mod-drawer__body-text > *:last-child  { margin-bottom: 0; }
.mod-drawer__body-text p { margin: 8px 0; line-height: 1.5; }
.mod-drawer__body-text ul,
.mod-drawer__body-text ol { margin: 8px 0; padding-left: 22px; }
.mod-drawer__body-text li { margin: 2px 0; line-height: 1.45; }
.mod-drawer__body-text h1,
.mod-drawer__body-text h2,
.mod-drawer__body-text h3 {
    font-family: var(--talos-serif);
    font-weight: 400;
    margin: 14px 0 6px 0;
    color: var(--talos-ink);
    line-height: 1.2;
}
.mod-drawer__body-text h1 { font-size: 18px; }
.mod-drawer__body-text h2 { font-size: 16px; }
.mod-drawer__body-text h3 { font-size: 14px; }
.mod-drawer__body-text strong { font-weight: 600; color: var(--talos-ink); }
.mod-drawer__body-text em { font-style: italic; }
.mod-drawer__body-text code {
    font-family: var(--talos-mono);
    font-size: 11px;
    background: var(--talos-ink-08);
    color: var(--talos-ink);
    padding: 1px 5px;
}

/* ─── Reports catalog ────────────────────────────────────────────────
   Grid of report cards grouped by kind (Register / Exception / Activity /
   Executive). Each card links a single IReport definition to a Generate
   modal that renders its parameter schema dynamically.
   ────────────────────────────────────────────────────────────────── */
.reports-group { margin-top: 20px; }
.reports-group:first-child { margin-top: 0; }
.reports-group__head {
    font-family: var(--talos-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--talos-mid);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--talos-ink-08);
}
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.report-card {
    background: var(--talos-panel);
    border: 1px solid var(--talos-ink-12);
    padding: 16px;
    display: flex; flex-direction: column;
    min-height: 160px;
}
.report-card__kicker {
    font-family: var(--talos-sans);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--talos-warm);
    margin-bottom: 6px;
}
.report-card__title {
    font-family: var(--talos-serif);
    font-size: 18px;
    color: var(--talos-ink);
    line-height: 1.2;
    margin: 0 0 6px 0;
}
.report-card__desc {
    font-size: 12px;
    color: var(--talos-ink-65);
    line-height: 1.45;
    margin: 0 0 14px 0;
    flex: 1;
}
.report-card__actions { display: flex; gap: 8px; }

/* ─── Attention banner ───────────────────────────────────────────────
   Full-width callout shown when a module has outstanding tasks that
   need human attention — first use is the "new users from Entra
   pending access review" prompt above the Access register.
   ────────────────────────────────────────────────────────────────── */
.tal-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: rgba(184, 115, 51, 0.08);
    border: 1px solid rgba(184, 115, 51, 0.28);
    border-left: 3px solid var(--talos-warm);
    margin-bottom: 18px;
}
.tal-banner__icon {
    color: var(--talos-warm);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tal-banner__text {
    flex: 1;
    font-size: 13px; color: var(--talos-ink);
}
.tal-banner__text strong {
    font-weight: 600;
    color: var(--talos-warm);
    margin-right: 4px;
}
.tal-banner__actions { flex-shrink: 0; }

/* Row-level hint — a thin bronze leading bar on rows that need attention. */
.tal-row--flag { box-shadow: inset 3px 0 0 var(--talos-warm); }