/* ── Typeface ───────────────────────────────────────────────────────────────────────── Inter, self-hosted as ONE variable file (v4.1, 344 KB, wght 100–900). SIL Open Font License 1.1 — free for commercial use, embedding and redistribution. Self-hosted because the app previously loaded no font at all: it named 'Segoe UI' and relied on that being installed, which is a Windows assumption. On macOS and Linux the stack silently fell through to Helvetica or Arial, so the product already rendered in a different typeface per machine — invisible only because everyone testing it was on Windows. Shipping the file makes rendering deterministic everywhere, which is the whole reason for this change; matching the shared reference's typeface is a side effect, not the goal. ONE file, upright only. The variable font carries every weight the app uses, so there is no per-weight request. Italic is deliberately absent: the whole product uses it in one place (a "bypasses visibility" label on /settings/users) and the browser's synthesised oblique is a fair trade for not shipping a second 344 KB face. font-display: swap — the file is served from the same host and cached after the first load, so the fallback is visible for at most one paint. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable.woff2') format('woff2'); } :root { /* ONE monospace stack for the whole app (2026-08-31). There were five, all meaning "code": Bootstrap's --bs-font-monospace, and four hand-written variants across JsonCodeBlock, LifecycleBranchesPanel, the two lifecycle assign modals and AzureConnect. On Windows they all landed on Consolas, which is why nobody noticed — on macOS and Linux they diverge, and one of them leads with ui-monospace while the others lead with Consolas. Consolas first because this app's users are largely on Windows; ui-monospace picks up the platform's own UI mono elsewhere. */ --app-font-mono: Consolas, "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", monospace; /* The one card elevation of the record drawer's notes/activity timeline. Measured live on the shared reference 2026-09-12: every floating surface there (the timeline node circles, the note cards, the activity cards and the quick-add card) carries this same three-layer shadow and no border. Defined on :root because the components that use it are CSS-isolated, and a custom property inherits through the DOM regardless of scope. */ /* ── Type scale ──────────────────────────────────────────────────────────────────────── The app ships ONE typeface (Inter, declared once in this file) and every element inherits it — no component names a font stack, and a form control that does not inherit says `font-family: inherit` rather than repeating the stack. Font SIZE had no such single source: it was 40+ literals, and the fractional `rem` ones resolved to values that exist nowhere else in the app. At this app's 14px root, `0.68rem` is 9.52px, `0.76rem` is 10.64px, `0.85rem` is 11.9px and `0.88rem` is 12.32px. Inside ONE panel that put meta text at 10.64px beside meta text at 12px, and body text at 12.32px beside body text at 14px — gaps too small to read as a hierarchy and too large to look deliberate. These six steps are the app's own most-used values, counted rather than invented: 14px is the root and the body size (40 declarations), 12px is next (25), then 13px (11), then 10.5px for badges (9, and the size `--chip-optical-shift` is calibrated for) and 16px for titles (7); 23px is the one display size, measured on the shared reference for the activity form's subject field. `--fs-section` is the odd one out and is kept on purpose: 21px is what `/settings/activities` measured on the reference for its section headings, where the hierarchy runs 21 → 16 → 14 (recorded in `03-features/activities/ui-behaviour.md`, "page-wide typography pass"). The app's OWN older settings pages head their sections with `.section-card-title` at 1.05rem (14.7px) / 600 instead, so the app currently has two section-heading conventions. That is a product decision to reconcile, not a bug to quietly normalise, so both stay and both are named here. Every Activities surface now sizes text ONLY from these — that area carries no font-size literal at all. The rest of the app still does; migrating it is BACKLOG 141. New code uses the tokens. */ --fs-chip: 10.5px; --fs-meta: 12px; --fs-control: 13px; --fs-body: 14px; --fs-title: 16px; --fs-section: 21px; --fs-display: 23px; --elev-card: 0 0 1px 1px rgba(0, 0, 0, .05), 0 1px 2px -2px rgba(0, 0, 0, .06), 0 1px 3px 0 rgba(0, 0, 0, .07); /* The RAISED elevation, the other half of the reference's two-step hierarchy (measured live 2026-09-12). Everything that sits ON the page carries --elev-card: the sticky top row, the tabbed composer card, the timeline's cards and node circles. Everything that sits OVER the page carries this one: the record detail drawer and every modal. There is no third step — a surface that needs to read as lifted takes --elev-overlay, and nothing in this app draws its own one-off shadow stack any more. */ --elev-overlay: 0 0 2px 0 rgba(0, 0, 0, .24), 0 16px 24px 2px rgba(0, 0, 0, .05), 0 6px 30px 5px rgba(0, 0, 0, .06), 0 8px 10px -5px rgba(0, 0, 0, .1); /* Bootstrap paints , , 
 and  from its OWN variable, so pointing
       ours at the token is what actually unifies them — replacing only our rules left
       Bootstrap's stack (SFMono first, Consolas fifth) on every  in the app,
       measured on /subscriptions/{id}'s Subscription ID and Tenant. */
    --bs-font-monospace: var(--app-font-mono);

    /* Shared corner radius for every anchored popover/dropdown menu (row-action kebabs,
       column panel, grid domain filters, profile menu, permission-set row menus, the
       storage-account label dropdown). Single source of truth so no consumer drifts to
       its own value — see llm-wiki/06-patterns/dropdown-pattern.md "Surface Chrome".
       Does NOT apply to edge-docked flyouts/drawers (those stay radius-less by design)
       or to tooltips (tracked separately, BACKLOG 84). */
    --popover-radius: 8px;

    /* ── Corner radius scale for BUTTONS and button-like controls (2026-08-29) ──────────
       Before this the app had TEN different radii on button-like controls, from three
       independent systems:

         1. Bootstrap's rem-based defaults, which nobody chose and nobody wrote down.
            `html { font-size: 14px }` means 0.375rem renders as 5.25px and 0.25rem as
            3.5px — values that appear nowhere in this codebase yet governed 173 buttons.
         2. Hand-written px in app.css and 20+ scoped stylesheets: 2px, 4px, 6px, 8px, 10px,
            20px, each decided in isolation.
         3. One token, --popover-radius, added 2026-08-27 for exactly this problem on
            popovers ("before this, five different values").

       The scale is deliberately TWO steps, decided by control height:

         --btn-radius     8px  — standard controls, 28px tall and up. Already the app's
                                 de-facto value (grid toolbar, selection bar, notes
                                 toolbar, the permission-set split button) and already
                                 written down in 01-design-system/visual-language.md.
         --btn-radius-sm  6px  — controls UNDER 28px, and menu rows. `.btn-sm` is 27.4px
                                 and the A–Z filter buttons are 27px; 8px on those reads
                                 as disproportionately round.

       --pill-radius is not a third size step — it is semantic. A pill/chip is not a
       button that happens to be rounder; it is a different object, and it stays fully
       round at any height. Circular icon buttons (50%) and the deliberately square-edged
       segmented switch / nav tabs (0) are semantic in the same way and are NOT part of
       this scale.

       See llm-wiki/01-design-system/visual-language.md for the full inventory. */
    --btn-radius: 8px;
    --btn-radius-sm: 6px;
    --pill-radius: 999px;

    /* ── Modal shell radius (2026-08-29, product decision — permanent) ────────────────────
       A ModalForm is DOCKED to an edge of the viewport, and the rule is:

           the docked edge gets NO radius; only the free edge is rounded.

       On desktop `.fm-modal` is `position: fixed; top: 0`, so it is flush with the top of
       the page and only its BOTTOM corners are rounded. Rounding the top would lift the
       shell off the page edge and break the "this sheet is pulled down over the page"
       reading the whole component is built around.

       The same rule flips on mobile: at <=480px the shell docks to `bottom: 0` instead, so
       there the TOP corners are the free edge and carry the radius. Same principle, mirrored
       — it is not an exception.

       This is a standing decision, not a one-off: any new modal, drawer or sheet follows it.
       See llm-wiki/02-components/component-library.md. */
    --modal-radius: 12px;
}

/* Bootstrap bridge — moves all 173 `.btn` instances onto the scale without touching a
   single markup file. Targets --bs-btn-border-radius specifically, NOT --bs-border-radius:
   the latter also drives cards, alerts, inputs, badges and dropdowns, which are a separate
   decision and deliberately stay where they are. Verified in the running app: buttons move,
   those five do not. */
.btn,
.btn-lg { --bs-btn-border-radius: var(--btn-radius); }
.btn-sm { --bs-btn-border-radius: var(--btn-radius-sm); }

html, body {
    /* Inter first, then the old stack as a fallback: if the woff2 ever fails to load the
       app degrades to exactly what it rendered before rather than to a browser default. */
    font-family: Inter, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.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;
}

/* ===== ModalForm input classes ===== */
.fm-input,
.fm-select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    font-family: inherit;
    border: 0.5px solid rgba(15, 23, 42, 0.20);
    border-radius: 8px;
    background: #fff;
    color: #212529;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.fm-select {
    /* Same caret as , as a data-URI because a CSS background cannot host a
       component. Path and 16x16 box must stay in sync with Components/CaretDown.razor. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M4.2 6h7.6a.5.5 0 0 1 .354.854l-3.8 3.8a.5.5 0 0 1-.708 0l-3.8-3.8A.5.5 0 0 1 4.2 6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.fm-input:focus,
.fm-select:focus {
    outline: none;
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.15);
}

.fm-textarea {
    display: block;
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    border: 0.5px solid rgba(15, 23, 42, 0.20);
    border-radius: 8px;
    background: #fff;
    color: #212529;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.fm-textarea:focus {
    outline: none;
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.15);
}

.fm-input:disabled,
.fm-select:disabled,
.fm-textarea:disabled {
    background: #f1f3f5;
    color: #6c757d;
    cursor: not-allowed;
}

/* ===== Standalone settings-page sections (Azure connect, Profile, Company settings) =====
   These pages sit outside any DataGrid/ModalForm flow, so they get their own light section
   chrome — global (not page-scoped) so the three pages read as one family instead of each
   inventing its own card look. */
.section-card {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.section-card-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.section-intro {
    max-width: 62rem;
    margin-top: 0.35rem;
    line-height: 1.55;
}

.fm-divider {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 0 1rem;
    color: #6c757d;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fm-divider::before,
.fm-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.10);
}

.fm-divider-label { white-space: nowrap; flex-shrink: 0; }

/* ===== Compact horizontal settings form (Pipedrive company-settings reference, 2026-09-03) =====
   One flat form instead of per-field section cards: right-aligned label column + fixed-width
   control column CENTRED in the content area, helper text under the input, ONE Save for the
   whole form. Measured off the reference (row rhythm 16px, control column originally 480px
   centred — label cell and the empty space right of the input are each exactly (row - width) / 2
   at every tested width, so the label takes flex:1 and the ::after spacer mirrors it regardless
   of the column's fixed width; helper 12px/18px) and mapped onto the app palette/tokens
   (.fm-input 36px, app text/muted colours). Control column widened to 720px (+50%) on
   2026-09-07 per request, still centred by the same flex:1 label/spacer mechanism. Global for
   the same reason .section-card is: the standalone settings pages must read as one family. */
.settings-form {
    margin-top: 0.25rem;
}

.settings-form-row {
    display: flex;
    align-items: flex-start;
    /* the 16px label↔input distance comes from gap, NOT label padding — padding on a
       flex-basis-0 item floors its box at 16px and shifts the centred column sideways;
       gap also lands between the control and the ::after spacer, keeping both sides equal */
    gap: 16px;
    margin-bottom: 16px;
}

/* Right spacer, equal to the label column, so the 480px control column sits centred —
   the reference's actual geometry, not a max-width wrapper. */
.settings-form-row::after {
    content: "";
    flex: 1 1 0;
}

.settings-form-label {
    flex: 1 1 0;
    min-width: 0;
    /* 8px top centres the 20px label line against the 36px .fm-input */
    padding: 8px 0 0;
    text-align: right;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #212529;
}

.settings-form-control {
    flex: 0 0 720px;
    max-width: 100%;
    min-width: 0;
}

.settings-form-help {
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    color: #6c757d;
}

.settings-form-actions {
    margin-top: 8px;
}

/* A locked field: disabled .fm-input showing the current value, pencil button hung 8px
   OUTSIDE the control column (the reference keeps the input at the full 480 and lets the
   button borrow from the empty right half). The button opens a ModalForm that owns the
   actual edit — the page Save never touches locked fields. */
.settings-form-input-group {
    position: relative;
}

.settings-form-edit-btn {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0.5px solid rgba(15, 23, 42, 0.20);
    border-radius: 8px;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.settings-form-edit-btn:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: rgba(15, 23, 42, 0.35);
}

.settings-form-edit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .settings-form-row {
        flex-direction: column;
        gap: 4px;
    }

    .settings-form-row::after {
        content: none;
    }

    .settings-form-label {
        flex: none;
        padding: 0;
        text-align: left;
    }

    .settings-form-control {
        flex: none;
        width: 100%;
    }

    /* No empty right half to borrow from — the pencil tucks inside the row instead. */
    .settings-form-input-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .settings-form-input-group .fm-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .settings-form-edit-btn {
        position: static;
        flex: 0 0 auto;
    }
}

/* Branding rows (Company Settings -> General): thumbnail + Upload/Replace + Remove, one
   row per uploaded asset kind. The thumbnail is sized per kind so it previews at roughly
   the box it actually renders in (nav rail tile / login header mark / browser tab icon) —
   object-fit: contain, same as every consuming surface, so the preview is honest. */
.settings-branding-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-branding-thumb {
    display: inline-flex;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8f9fa;
    flex-shrink: 0;
}

.settings-branding-thumb-nav {
    width: 28px;
    height: 28px;
}

.settings-branding-thumb-login {
    height: 32px;
    max-width: 160px;
}

.settings-branding-thumb-favicon {
    width: 20px;
    height: 20px;
}

.settings-branding-upload {
    margin: 0;
}

.settings-branding-upload-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* ===== ModalForm button classes =====
   Global for the same reason .fm-input/.fm-select/.fm-textarea above are: a custom