h1:focus {
    outline: none;
}

/* ---- Ingage aiE admin ---- */
:root { --navy:#114272; --navy-dark:#0C3159; --gold:#FFC62F; --ink:#243244; --line:#D7E0EA; --bg:#EEF3F8;
        /* Every surface and text colour a page uses, so the dark theme is a set of values rather
           than a second stylesheet. --heading is separate from --navy on purpose: navy is also the
           sidebar and button fill, and navy TEXT on a dark background disappears. */
        --surface:#fff; --surface-2:#F5F8FC; --surface-3:#F8FAFD; --code-bg:#EEF3F8;
        --heading:var(--navy); --muted:#6B7A8D; --body-text:#48586B; --caption:#8A97A6;
        --chip-bg:#E7F0FA; --badge-bg:#EEF3F8; --badge-text:#5b6b7d; --ghost-bg:#fff;
        --good-text:#227C4B; --good-bg:#E3F6EC; --bad-text:#B23B3B; --bad-bg:#FBE7E7;
        --warn-text:#8A6D1F; --warn-bg:#FFF3D6; --link:#0B5CAD; --card-shadow:rgba(17,66,114,0.10);
        --track-ok:#DCE9F6; --track-warn:#F7E9CC; --track-bad:#F4DCDC;
        color-scheme: light; }

/* Dark mode — chosen per login and stored with it, set on <html> by App.razor. Only values change;
   every rule below reads the tokens. */
:root[data-theme="dark"] {
        --bg:#0E1824; --ink:#DCE6F0; --line:#2B3E53; --navy-dark:#0A2440;
        --surface:#162332; --surface-2:#1C2C3E; --surface-3:#1A2839; --code-bg:#22354A;
        --heading:#9FC3EA; --muted:#98A8BA; --body-text:#C2CEDB; --caption:#8C9BAC;
        --chip-bg:#22354A; --badge-bg:#22354A; --badge-text:#AFC0D2; --ghost-bg:#162332;
        --good-text:#6FD39C; --good-bg:#15392A; --bad-text:#F08A8A; --bad-bg:#3E1F24;
        --warn-text:#E9C46A; --warn-bg:#3A3019; --link:#8EC1FF; --card-shadow:rgba(0,0,0,0.35);
        --track-ok:#22364C; --track-warn:#3B3220; --track-bad:#3E2426;
        color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',Arial,sans-serif; color:var(--ink); background:var(--bg); }
.app { display:flex; min-height:100vh; }
/* Sticky, viewport-tall: as a plain flex item the sidebar stretches to the height of the whole
   page, which pushes the version line (margin-top:auto) below the fold on any long page. Pinning
   it to the viewport keeps the nav — and the version at its foot — on screen while the content
   scrolls; if the nav itself ever outgrows a short window, it scrolls inside its own column. */
.sidebar { width:230px; background:var(--navy); color:#cfe0f0; padding:18px 0; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; }
.sidebar .brand { color:#fff; font-size:20px; font-weight:800; padding:6px 22px 18px; }
.sidebar .brand span { color:var(--gold); }
.sidebar .nav-section { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#7fa5cc; padding:18px 22px 6px; }
.nav-item { display:block; padding:9px 22px; color:#cfe0f0; text-decoration:none; font-size:14.5px; border-left:3px solid transparent; }
.nav-item:hover { background:var(--navy-dark); color:#fff; }
.nav-item.active { background:var(--navy-dark); color:#fff; border-left-color:var(--gold); font-weight:600; }
.nav-version { margin-top:auto; padding:16px 22px 4px; font-size:11.5px; color:#7fa5cc; }

/* ---- Mobile top bar + hamburger (hidden on desktop) ---- */
.topbar { display:none; align-items:center; gap:14px; background:var(--navy); color:#fff; padding:10px 16px; position:sticky; top:0; z-index:30; }
.topbar-brand { font-size:18px; font-weight:800; }
.topbar-brand span { color:var(--gold); }
.nav-hamburger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; padding:6px; cursor:pointer; border-radius:7px; }
.nav-hamburger:hover { background:var(--navy-dark); }
.nav-hamburger span { display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-backdrop { display:none; }

.content { flex:1; min-width:0; padding:28px 34px; }
.content h1 { font-size:24px; margin:0 0 4px; color:var(--heading); }
.content h2 { font-size:16px; margin:26px 0 10px; color:var(--heading); }
.content a:not(.btn):not(.nav-item) { color:var(--link); }
.muted { color:var(--muted); font-size:13.5px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px; }
/* A login that can only look (ViewOnlyNotice). The fieldset is how a page greys out its edit controls
   in one place: a disabled fieldset disables every input and button inside it, with no border of its own. */
.view-only { border-left:4px solid var(--gold); }
fieldset.plain { border:0; padding:0; margin:0; min-width:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
/* A label-and-value table (".grid" above is a tile layout and breaks a table). Long values such as URLs wrap
   inside their cell instead of running over the next one. */
.kv-table th { width:170px; white-space:nowrap; vertical-align:top; }
.kv-table td { overflow-wrap:anywhere; }
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
th { background:var(--surface-2); color:var(--heading); font-weight:600; }
tr:last-child td { border-bottom:none; }
.chip { display:inline-block; background:var(--chip-bg); color:var(--heading); border-radius:20px; padding:2px 10px; font-size:12px; margin:2px 4px 2px 0; }
.chip.off { background:var(--surface-2); color:var(--muted); text-decoration:line-through; }
.btn { display:inline-block; background:var(--navy); color:#fff; border:none; border-radius:7px; padding:8px 16px; font-size:14px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--navy-dark); }
.btn.ghost { background:var(--ghost-bg); color:var(--heading); border:1px solid var(--line); }
.btn.small { padding:4px 10px; font-size:12.5px; }
/* Every button answers the click (Mike, 2026-10-13: "we must always provide some feedback to the user"): pressed
   when clicked, plainly greyed out when it cannot be clicked (a disabled button used to look exactly like an enabled
   one), and a spinner while it works — set by ActionButton, or by submit-feedback.js for a form or a link that leaves. */
.btn, .linkish, .chip, .th-sort { transition:filter .08s, transform .08s, opacity .12s; }
.btn:active:not(:disabled), .linkish:active:not(:disabled), button.chip:active:not(:disabled) { transform:translateY(1px); filter:brightness(.88); }
.btn:focus-visible, .linkish:focus-visible, button.chip:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.btn:disabled, .btn[aria-disabled="true"], .linkish:disabled, button.chip:disabled { opacity:.55; cursor:not-allowed; filter:none; transform:none; }
.btn:disabled:hover { background:var(--navy); }
.btn.ghost:disabled:hover { background:var(--ghost-bg); }
.is-busy { cursor:progress !important; opacity:.85 !important; }
.is-busy::before { content:""; display:inline-block; width:.85em; height:.85em; margin-right:.45em; vertical-align:-.12em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::before { animation:none; border-right-color:currentColor; opacity:.6; } }
label.fld { display:block; margin:12px 0 4px; font-size:13px; font-weight:600; color:var(--heading); }
input.txt, select.txt, textarea.txt { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--ink); }
textarea.txt { min-height:70px; }
.pill { display:inline-block; border-radius:20px; padding:2px 10px; font-size:12px; font-weight:600; }
.pill.on { background:var(--good-bg); color:var(--good-text); } .pill.off { background:var(--bad-bg); color:var(--bad-text); }
.pill.warn { background:var(--warn-bg); color:var(--warn-text); }
.badge { font-size:11px; padding:1px 7px; border-radius:5px; background:var(--badge-bg); color:var(--badge-text); }

/* "Needs your attention" — the same alerts the status email raises, on the page you land on.
   Coloured by the worst item in the list so the card itself is readable across the room. When
   there is nothing it is replaced by .all-clear below — a line, not a card, because a standing
   panel reading "all clear" is one a reader learns to stop seeing. */
.attention { border-left:4px solid var(--warn-text); }
.attention.bad { border-left-color:var(--bad-text); }
.attention h2 { margin-top:0 !important; }
.attention-row { display:flex; gap:10px; align-items:baseline; padding:7px 0; border-top:1px solid var(--line); }
.attention-row:first-of-type { border-top:none; padding-top:0; }
.attention-row .pill { flex-shrink:0; }

/* The quiet half of the same answer. A line, never a card: it has to be enough to tell a working
   page from a broken one, and not enough to compete with the card that replaces it. */
.all-clear { color:var(--muted); font-size:13px; margin:0 0 16px; }
.all-clear.cannot { color:var(--warn-text); }

/* ---- Sign-in landing (shown to anonymous visitors when Entra is configured) ---- */
.landing { display:flex; align-items:center; justify-content:center; min-height:72vh; }
.landing-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:44px 48px; text-align:center; max-width:420px; box-shadow:0 10px 34px var(--card-shadow); }
.landing-brand { font-size:30px; font-weight:800; color:var(--heading); }
.landing-brand span { color:var(--gold); }
.landing-title { font-size:16px; font-weight:600; color:var(--heading); letter-spacing:0.4px; margin-top:4px; }
.landing-sub { color:var(--muted); font-size:14px; line-height:1.55; margin:14px 0 26px; }
.landing-btn { padding:11px 24px; font-size:15px; }

/* ---- Technology Overview (the explainer at the foot of the Overview page) ---- */
.tech { margin-top:34px; border-top:1px solid var(--line); padding-top:22px; }
/* Prose runs the full content width, matching the tables and figures beside it. No measure cap:
   the alternative left a ragged right edge against full-width tables, and the content area is
   already bounded by the sidebar. */
.tech-lede { font-size:15px; line-height:1.65; color:var(--body-text); }
.tech h3 { font-size:14.5px; font-weight:700; color:var(--heading); margin:26px 0 8px; }
.tech p { font-size:13.5px; line-height:1.65; color:var(--body-text); }
.tech p.tight { margin:0 0 8px; }
/* Identifiers read as code, in prose and in table cells alike. */
.tech code { font-family:Consolas,'Cascadia Mono','Courier New',monospace; font-size:0.9em;
             background:var(--code-bg); color:var(--heading); padding:1px 5px; border-radius:4px;
             overflow-wrap:anywhere; }
.tech-stack td:first-child code { background:none; padding:0; }
/* The diagrams are drawn at ~1060 units wide; below the min-width the labels stop being
   readable, so the figure scrolls inside itself rather than shrinking the page's type. */
.tech-figure { overflow-x:auto; margin:0; padding:2px 0; }
/* The drawings carry their own light palette (the same SVG becomes the email's PNGs), so they sit on
   white in either theme rather than being redrawn per theme. */
.tech-figure svg { display:block; width:100%; min-width:900px; height:auto; background:#fff; border-radius:6px; }
.tech-figure figcaption { color:var(--caption); font-size:12px; margin-top:10px; }
.tech-steps { display:grid; gap:14px; margin-top:4px; }
.tech-step { display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; }
.tech-step .n { width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
                font-size:12px; font-weight:700; line-height:24px; text-align:center; }
.tech-step h4 { margin:1px 0 3px; font-size:13.5px; color:var(--heading); }
.tech-step p { margin:0; }
.tech-step .why { display:block; margin-top:5px; color:var(--muted); }
.tech-step .why b { color:var(--heading); font-weight:600; }
.tech-principles { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.tech-principle { background:var(--surface-3); border:1px solid var(--line); border-left:3px solid var(--gold);
                  border-radius:8px; padding:13px 15px; }
.tech-principle h4 { margin:0 0 4px; font-size:13.5px; color:var(--heading); }
.tech-principle p { margin:0; font-size:13px; }
/* Deliberately NOT nowrap: the first column carries sentences in the timeout ladder, not just
   short names, and forcing them onto one line pushes the table past the content area. The th
   widths do the column sizing. */
.tech-stack td:first-child { font-weight:600; color:var(--heading); }

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Responsive: collapse the sidebar into an off-canvas drawer on narrow screens ---- */
@media (max-width: 768px) {
    .app { flex-direction: column; }
    .topbar { display: flex; }

    /* Sidebar becomes an off-canvas drawer, hidden until the hamburger is toggled. */
    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 260px;
        max-width: 82vw;
        z-index: 50;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,0.28);
    }
    .sidebar .brand { display: none; } /* the brand already shows in the top bar */

    /* Full-screen dimmer behind the open drawer; tapping it closes (label -> checkbox). */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(9, 28, 51, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    /* Open state, driven purely by the checkbox. */
    #nav-toggle:checked ~ .sidebar { transform: translateX(0); }
    #nav-toggle:checked ~ .nav-backdrop { display: block; opacity: 1; pointer-events: auto; }

    /* Hamburger morphs into an X while open. */
    #nav-toggle:checked ~ .topbar .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #nav-toggle:checked ~ .topbar .nav-hamburger span:nth-child(2) { opacity: 0; }
    #nav-toggle:checked ~ .topbar .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .content { padding: 20px 18px; }

    /* Wide tables scroll within their own area instead of forcing the page sideways. */
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* ...except the technology stack table, which is prose, not data. Sideways scrolling is the
       wrong answer for three columns of sentences, and so is squeezing them into 110px towers:
       each row stacks into name / what it does / why, and the header goes away because the
       stacked cells label themselves. */
    table.tech-stack, table.tech-stack tbody, table.tech-stack tr, table.tech-stack td {
        display: block; width: auto; white-space: normal; overflow-x: visible;
    }
    table.tech-stack thead { display: none; }
    table.tech-stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
    table.tech-stack tr:last-child { border-bottom: none; }
    table.tech-stack td { border-bottom: none; padding: 2px 14px; }
    table.tech-stack td:first-child { font-size: 14.5px; }
    table.tech-stack td:last-child { color: var(--muted); }
    /* Only the tables whose last column is a rationale get the label — the reference tables'
       last column is a code location, and calling it "Why" would be a lie. */
    table.tech-stack.rationale td:last-child::before { content: "Why: "; font-weight: 600; color: var(--heading); }
}
/* "Show N inactive" on a list that hides them by default. A control, not a heading: it sits
   above the table and reads as an aside, but the COUNT is always there so nothing is hidden
   silently. */
.show-inactive { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; margin:0 0 12px; cursor:pointer; }
.show-inactive input { cursor:pointer; }

/* Search, record count and filters above a list (the Users page). Wraps on a phone. */
.list-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 12px; }
.list-toolbar input.txt { max-width:300px; }
.list-toolbar .show-inactive { margin:0; }

/* A column header that sorts its table: a button filling the cell, styled as the heading. */
.th-sort { background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.th-sort:hover { text-decoration:underline; }
.sort-mark { font-size:10px; color:var(--muted); }

/* A button that reads as a link, for an action that changes the page rather than navigating.
   Deliberately not an <a href="#">: Blazor's enhanced navigation claims the anchor before
   @onclick:preventDefault runs, and the click lands on the Overview page instead. */
.linkish { background:none; border:none; padding:0; font:inherit; color:var(--heading); text-decoration:underline; cursor:pointer; }
.linkish:hover { color:var(--ink); }

/* ---- The account menu, top right (UserMenu.razor) ----
   A native <details>, so it opens with no Blazor circuit; nav-drawer.js closes it on an outside click
   or Escape. Every colour is a theme token, so it follows light and dark like the rest of the page. */
.userbar { display:flex; justify-content:flex-end; margin:-16px 0 6px; }
.topbar-user { margin-left:auto; }
.user-menu { position:relative; }
.user-menu > summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px 4px 4px;
                       border-radius:22px; border:1px solid transparent; color:var(--ink); user-select:none; }
.user-menu > summary::-webkit-details-marker { display:none; }
.user-menu > summary:hover, .user-menu[open] > summary { background:var(--surface); border-color:var(--line); }
.user-menu > summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.user-name { font-size:13.5px; font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu .caret { color:var(--muted); transition:transform .15s ease; }
.user-menu[open] .caret { transform:rotate(180deg); }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
          background:var(--navy); color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px; flex-shrink:0;
          box-shadow:0 0 0 2px var(--gold); }
.avatar.lg { width:42px; height:42px; font-size:16px; }
.user-panel { position:absolute; right:0; top:calc(100% + 8px); width:280px; background:var(--surface); border:1px solid var(--line);
              border-radius:12px; box-shadow:0 12px 32px var(--card-shadow); padding:8px; z-index:50; }
.user-head { display:flex; align-items:center; gap:12px; padding:8px 8px 12px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.user-head-name { font-weight:700; color:var(--heading); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-head-email { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-label { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:4px 8px 6px; }
.theme-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 8px 6px; padding:3px; background:var(--surface-2);
                border:1px solid var(--line); border-radius:9px; }
.theme-switch button { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:none; border:none;
                       border-radius:7px; padding:7px 0; font:inherit; font-size:13px; color:var(--muted); cursor:pointer; }
.theme-switch button:hover { color:var(--ink); }
.theme-switch button.on { background:var(--surface); color:var(--heading); font-weight:600; box-shadow:0 1px 3px var(--card-shadow); }
.user-sep { height:1px; background:var(--line); margin:8px 0 6px; }
.user-item { display:block; padding:9px 10px; border-radius:7px; color:var(--ink) !important; text-decoration:none; font-size:13.5px; }
.user-item:hover { background:var(--surface-2); }
@media (max-width: 768px) {
    .userbar { display:none; }
    .topbar .user-menu > summary { color:#fff; padding:2px; }
    .topbar .user-menu > summary:hover, .topbar .user-menu[open] > summary { background:var(--navy-dark); border-color:transparent; }
    .topbar .user-name, .topbar .user-menu .caret { display:none; }
    .user-panel { width:min(280px, calc(100vw - 24px)); }
}

/* ---- Capability and setting rows on the aiE page (EmployeeEdit.razor) ----
   Name first, then what it does; the stored key last and small, for whoever needs to search for it. */
.cap-group { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:14px 0 4px; }
.cap-group:first-child { margin-top:0; }
.cap-row { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.cap-row:last-child { border-bottom:none; }
.cap-row input { margin-top:3px; flex-shrink:0; }
.cap-name { font-weight:600; color:var(--heading); margin-right:6px; }
.cap-desc { display:block; color:var(--body-text); font-size:13px; line-height:1.45; margin-top:2px; }
.cap-key { font-size:11px; color:var(--caption); background:none; padding:0; font-weight:400; margin-left:8px; }
.cap-desc + .cap-key { margin-left:0; }
.callout { border-radius:8px; padding:12px 14px; margin-bottom:12px; font-size:13.5px; line-height:1.5; }
.callout.warn { background:var(--warn-bg); color:var(--ink); border-left:4px solid var(--warn-text); }

/* Settings page sections (/config): collapsible headings, a search box, colours from the tokens. */
.cfg-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0 16px; }
.cfg-search { flex:1; min-width:240px; max-width:520px; }
.cfg-section { border:1px solid var(--line); border-radius:8px; background:var(--surface); margin-bottom:10px; }
.cfg-head { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:none; border:0;
            color:var(--heading); font:inherit; text-align:left; cursor:pointer; }
.cfg-head:hover { background:var(--surface-2); }
.cfg-head:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.cfg-caret { width:1em; color:var(--muted); }
.cfg-title { font-weight:700; font-size:16px; }
.cfg-count { margin-left:auto; color:var(--muted); font-size:13px; white-space:nowrap; }
.cfg-note { margin:0 14px 8px; }
.cfg-section table { margin:0 0 4px; }
/* aiEs page, grouped by department (EmployeeSections) */
.dept-new { margin-left:8px; font-weight:600; white-space:nowrap; }
.dept-also { margin-right:4px; }
/* One table per department: fixed columns so they line up from section to section. */
.aie-table { table-layout:fixed; width:100%; }
.aie-name { overflow-wrap:anywhere; }
/* Scorecard: one totals row per department above its aiEs. */
tr.dept-total td { background:var(--surface-2); border-top:2px solid var(--line); }
.dept-list td { vertical-align:middle; }
.dept-list input.txt { margin:0; }

/* ---- Users: list / org chart switch and the chart (2026-10-16) ---- */
.view-switch { display:inline-flex; margin-left:auto; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.view-switch button { background:var(--ghost-bg); color:var(--body-text); border:0; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer; }
.view-switch button + button { border-left:1px solid var(--line); }
.view-switch button.on { background:var(--navy); color:#fff; }
.view-switch button:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.org-scroll { overflow-x:auto; padding:8px 0 16px; margin-bottom:8px; }
.org-tree { display:inline-block; min-width:100%; text-align:center; }
.org-tree ul { position:relative; display:flex; justify-content:center; margin:0; padding:20px 0 0; }
.org-tree > ul { padding-top:0; }
.org-tree li { position:relative; list-style:none; padding:20px 3px 0; display:flex; flex-direction:column; align-items:center; }
.org-tree li::before, .org-tree li::after { content:''; position:absolute; top:0; right:50%; width:50%; height:20px; border-top:2px solid var(--caption); }
.org-tree li::after { right:auto; left:50%; border-left:2px solid var(--caption); }
.org-tree li:only-child { padding-top:0; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display:none; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border:0 none; }
.org-tree li:last-child::before { border-right:2px solid var(--caption); border-radius:0 6px 0 0; }
.org-tree li:first-child::after { border-radius:6px 0 0 0; }
.org-tree ul ul::before { content:''; position:absolute; top:0; left:50%; height:20px; border-left:2px solid var(--caption); }
.org-card { display:inline-flex; flex-direction:column; gap:2px; min-width:96px; max-width:150px; padding:6px 9px; background:var(--surface);
            border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:8px; box-shadow:0 1px 3px var(--card-shadow);
            color:var(--ink); text-decoration:none; font-size:12px; line-height:1.25; overflow-wrap:anywhere; }
.org-card { position:relative; z-index:1; }
.org-card strong { color:var(--heading); font-size:13px; }
.org-card:hover { border-color:var(--link); }
.org-card:focus-within { outline:2px solid var(--gold); outline-offset:2px; }
.org-link { color:inherit; text-decoration:none; outline:none; padding:0 8px; }
.org-link::after { content:''; position:absolute; inset:0; border-radius:8px; }
/* A small dot with no text (Mike, 2026-10-16). The button is a 16px transparent hit area so the
   8px dot stays easy to click; the dot itself is drawn by ::after. */
.org-aie { position:absolute; top:3px; right:3px; z-index:2; width:16px; height:16px; padding:0; border:0; border-radius:50%;
           background:transparent; cursor:pointer; }
.org-aie::after { content:''; position:absolute; top:4px; left:4px; width:8px; height:8px; border-radius:50%; background:var(--link); opacity:.55; }
.org-aie:hover::after { opacity:1; }
.org-aie:focus-visible { outline:2px solid var(--gold); outline-offset:0; }
/* Top layer: placed under its circle where the browser supports anchors, centred on screen where not. */
.org-aie-pop { margin:auto; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink);
               box-shadow:0 4px 14px var(--card-shadow); font-size:12px; text-align:left; min-width:140px; }
@supports (position-anchor: --x) {
    .org-aie-pop { margin:0; inset:auto; top:anchor(bottom); left:anchor(center); translate:-50% 6px; position-try-fallbacks:flip-block; }
}
.org-aie-pop-title { color:var(--muted); font-size:11px; margin-bottom:4px; }
.org-aie-pop ul { margin:0; padding-left:16px; }
.org-aie-pop li { margin:2px 0; color:var(--heading); }
.org-card.off { border-top-color:var(--caption); background:var(--surface-2); }
.org-card.off strong { color:var(--muted); }
.org-card.match { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.org-card.dim { opacity:.4; }
.org-sub { color:var(--muted); font-size:11px; }
/* A column of people with nobody under them: one line down the middle, behind the cards. */
.org-tree ul.leaves { flex-direction:column; align-items:stretch; gap:8px; max-width:150px; }
.org-tree ul.leaves::before { height:calc(100% - 20px); }
.org-tree ul.leaves > li { padding:0; }
.org-tree ul.leaves > li::before, .org-tree ul.leaves > li::after { display:none; }
.org-tree ul.leaves .org-card { width:100%; max-width:none; box-sizing:border-box; }
.org-count { color:var(--caption); font-size:10px; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.org-unplaced-title { margin:16px 0 8px; font-size:15px; }
.org-unplaced { display:flex; flex-wrap:wrap; gap:10px; }
.org-title { color:var(--body-text); font-size:11px; font-weight:600; }
/* Dragging a person onto their manager (2026-10-16). */
.org-card[draggable="true"] { cursor:grab; }
.org-dragging .org-card > * { pointer-events:none; }
.org-card.dragged { opacity:.45; }
.org-card.over { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold); }
.org-unplaced-area { border:2px solid transparent; border-radius:8px; }
.org-drop-zone { padding:0 8px 8px; border:2px dashed var(--caption); }
.org-dragging .org-unplaced-title * { pointer-events:none; }
.org-drop-zone.over { border-color:var(--gold); background:var(--warn-bg); }
.org-drop-hint { color:var(--muted); font-size:12px; }
.org-move-note { margin:0 0 10px; padding:8px 12px; border-radius:6px; background:var(--good-bg); color:var(--good-text); font-size:13px; }
.org-move-note.bad { background:var(--bad-bg); color:var(--bad-text); }