/*
    THE NAKALA DESIGN SYSTEM.

    One file. Every colour, size, weight, radius, shadow, focus ring and duration in the client is
    declared here as a custom property and consumed by name. Nothing anywhere else may write a
    literal colour or a literal pixel measurement — that rule is the whole point of the file, and it
    is what stops the client drifting into four slightly different greys the way it had before this
    existed. Until today the client had NO stylesheet for its own classes at all: `nk-grid`,
    `nk-page__header`, `nk-actionbar`, `nk-tile` and forty more were written by the renderer, the
    dashboard and the role centre and matched by nothing. Every generated page in the product —
    twelve hundred of them — rendered as unstyled divs.

    It lives in the component library rather than the application so that both projects can use it:
    the library's own components (the renderer, the primitives, the tiles) are styled by the same
    tokens as the shell, and a second host would get them by referencing the library.

        <link rel="stylesheet" href="_content/Nakala.Client.Components/css/nakala.css" />

    ── Density ─────────────────────────────────────────────────────────────────────────────────
    An ERP user has forty rows on screen and wants forty-five, and consumer-web spacing is simply
    the wrong instrument. The base type is 13px and a grid row is 26px, which puts about 40 rows in
    a 1280x720 viewport with the shell around them. Everything else follows from that: the spacing
    scale starts at 2px, controls are 24px tall, and there is no decorative whitespace anywhere.

    ── Themes ──────────────────────────────────────────────────────────────────────────────────
    Dark is NOT a second set of rules. It is the same rules with the tokens redefined — once under
    `prefers-color-scheme: dark` for the system default, once under `[data-theme="dark"]` for an
    explicit choice, and `[data-theme="light"]` wins back over the media query. There is exactly one
    block of declarations per component, so a component can never be styled in one theme and
    forgotten in the other.

    ── Contrast ────────────────────────────────────────────────────────────────────────────────
    Every foreground/background pair below was computed, not eyeballed. Text pairs are at or above
    4.5:1 and boundaries that carry meaning — control borders, focus rings — are at or above 3:1,
    in both themes. The measured ratios are in the module report.
*/

/* ══ 1. TOKENS ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ---- Surfaces and ink. Four surfaces, deepest first, so a raised thing is always lighter
            than what it sits on in light and darker in dark, and the rule "raised means nearer"
            reads the same in both. ---- */
    --nk-bg-sunken: #f3f4f6;
    --nk-bg: #ffffff;
    --nk-bg-raised: #ffffff;
    --nk-bg-nav: #e8edf3;
    --nk-bg-brand: #03173d;

    --nk-bg-hover: #eef1f5;
    --nk-bg-selected: #dce9fb;
    --nk-bg-nav-selected: #d7e4f7;

    --nk-ink: #17202b;
    --nk-ink-muted: #55606e;
    --nk-ink-on-brand: #c9d4e6;
    --nk-ink-on-accent: #ffffff;

    /* ---- Line. `line` is a hairline with no meaning; `border` bounds a control and therefore
            has to clear 3:1 on its own. Using the hairline on an input is the commonest
            accessibility mistake in a dense UI and the two names exist to make it hard. ---- */
    --nk-line: #d8dde3;

    /* A rule between rows of the same thing, where --nk-line would draw a box. */
    --nk-line-faint: #edf0f3;
    --nk-line-strong: #b9c0c9;
    --nk-border-control: #767e88;

    /* ---- Accent and status. ---- */
    --nk-accent: #0a58a6;
    --nk-accent-bg: #0a58a6;
    --nk-accent-wash: #e6effb;

    --nk-ok: #15803d;
    --nk-warn: #b45309;
    --nk-bad: #b91c1c;
    --nk-ok-wash: #dff3e5;
    --nk-warn-wash: #fdf0d5;
    --nk-bad-wash: #fbe3e3;
    --nk-ink-on-status: #ffffff;

    /* ---- Type. One family, one scale, four weights. The numeric family is separate because a
            money column that does not use tabular figures does not line up, and a ledger whose
            decimal points wander is a ledger nobody can scan. ---- */
    --nk-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nk-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --nk-text-xs: 10.5px;
    --nk-text-sm: 11.5px;
    --nk-text: 13px;
    --nk-text-md: 14px;
    --nk-text-lg: 17px;
    --nk-text-xl: 21px;
    --nk-text-display: 30px;

    --nk-leading: 1.35;
    --nk-leading-tight: 1.15;

    --nk-weight-regular: 400;
    --nk-weight-medium: 500;
    --nk-weight-semibold: 600;
    --nk-weight-bold: 700;

    /* ---- Spacing. A 2px base, not 4px: at this density the difference between 6 and 8 is
            visible and both are needed. ---- */
    --nk-space-1: 2px;
    --nk-space-2: 4px;
    --nk-space-3: 6px;
    --nk-space-4: 8px;
    --nk-space-5: 12px;
    --nk-space-6: 16px;
    --nk-space-7: 24px;
    --nk-space-8: 32px;

    /* ---- Sizes. ---- */
    --nk-row-height: 26px;

    /*
        THE PAGE ENGINE'S MEASUREMENTS.

        These arrived with the renderer, which was built in a different worktree on the same day as
        this sheet and named every token it wanted differently: --nk-surface for --nk-bg, --nk-text
        for --nk-ink, --nk-border for --nk-line, and so on. Twenty-seven of its thirty-three names
        met nothing here, so every generated page drew on its light-only literal fallbacks — under
        the dark palette included.

        One of them did worse than fall back. --nk-text is a FONT SIZE here and the renderer asked
        for it as a colour, so `color: var(--nk-text, #1a1a1a)` resolved to `color: 13px`, which is
        invalid and dropped: not the fallback, no colour at all.

        The renderer now speaks this vocabulary. These eight are the measurements it needs that a
        shell has no opinion about, so they live here rather than being invented twice.
    */
    --nk-gap: 8px;
    --nk-pad-x: 10px;
    --nk-pad-y: 4px;
    /* 150 of 360 rather than 180 of 320: see the field-grid note in PageRenderer.razor.css. The
       label track is fixed so that captions line up down a card, so the pair has to leave the
       control enough room for an account number at the NARROWEST column the layout produces. */
    --nk-label-width: 150px;
    --nk-field-width: 360px;
    --nk-filter-width: 240px;
    --nk-grid-height: 60vh;
    --nk-control-height: 24px;
    --nk-topbar-height: 38px;
    --nk-actionbar-height: 34px;
    --nk-nav-width: 232px;
    --nk-nav-width-collapsed: 44px;
    --nk-factbox-width: 260px;

    --nk-radius-sm: 2px;
    --nk-radius: 3px;
    --nk-radius-lg: 6px;
    --nk-radius-pill: 999px;

    /* ---- Elevation. Three steps and no more. A dense screen with shadows everywhere reads as
            noise; the shadow is what says "this floats over the page and Escape closes it". ---- */
    --nk-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
    --nk-shadow-2: 0 2px 8px rgba(15, 23, 42, 0.14);
    --nk-shadow-3: 0 8px 28px rgba(15, 23, 42, 0.22);

    /* ---- Focus. One ring, everywhere, drawn OUTSIDE the element so it never changes layout —
            a focus style that resizes a control makes a keyboard user's screen jump on every Tab.
            `--nk-focus` is redefined on dark surfaces rather than being a second rule. ---- */
    --nk-focus: #0a58a6;
    --nk-focus-width: 2px;
    --nk-focus-offset: 1px;

    /* ---- Motion. Short enough that a clerk never waits for it, and honoured only when the user
            has not asked for less. ---- */
    --nk-motion-fast: 90ms;
    --nk-motion: 140ms;
    --nk-ease: cubic-bezier(0.2, 0, 0.2, 1);

    --nk-z-sticky: 10;
    --nk-z-nav: 20;
    --nk-z-popover: 40;
    --nk-z-modal: 60;
}

/* Dark by redefinition. Guarded so an explicit "light" wins the media query back. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --nk-bg-sunken: #0e1216;
        --nk-bg: #14181d;
        --nk-bg-raised: #1b2128;
        --nk-bg-nav: #171c22;
        --nk-bg-brand: #03173d;

        --nk-bg-hover: #222932;
        --nk-bg-selected: #233448;
        --nk-bg-nav-selected: #1f2c3c;

        --nk-ink: #e7ecf2;
        --nk-ink-muted: #a3aebb;

        --nk-line: #2b333c;
        --nk-line-faint: #222932;
        --nk-line-strong: #3b444f;
        --nk-border-control: #6e7a88;

        --nk-accent: #7fb0ff;
        --nk-accent-bg: #1f4f8f;
        --nk-accent-wash: #17232f;

        --nk-ok: #4ade80;
        --nk-warn: #fbbf24;
        --nk-bad: #f87171;
        --nk-ok-wash: #12301f;
        --nk-warn-wash: #3a2a12;
        --nk-bad-wash: #3a1a1a;

        --nk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
        --nk-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.6);
        --nk-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.7);

        --nk-focus: #9dc4ff;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --nk-bg-sunken: #0e1216;
    --nk-bg: #14181d;
    --nk-bg-raised: #1b2128;
    --nk-bg-nav: #171c22;
    --nk-bg-brand: #03173d;

    --nk-bg-hover: #222932;
    --nk-bg-selected: #233448;
    --nk-bg-nav-selected: #1f2c3c;

    --nk-ink: #e7ecf2;
    --nk-ink-muted: #a3aebb;

    --nk-line: #2b333c;

    /*
        THE ONE TOKEN THAT WAS DEFINED IN ONLY ONE OF THE TWO DARK BLOCKS.

        This file's own header says dark is "the same rules with the tokens redefined, in two blocks
        that must stay identical... 26 tokens are redefined in each, and they are the same 26". They
        were not. `--nk-line-faint` was redefined under `prefers-color-scheme: dark` — twice, with
        one of the two mis-indented, which is how it was missed — and not here.

        So a user who CHOSE dark on a machine whose system is light got #edf0f3 for the rule between
        every row of every list: a near-white hairline across a #14181d grid, on the densest screen
        in the product. The media query hid it from anybody developing on a dark desktop, because
        there the media block supplied the value and the omission was invisible.

        `The_two_dark_palettes_redefine_the_same_tokens` in DesignTokenTests is the guard, and it
        compares the two declaration sets rather than checking for this one name — the defect is the
        class, not the token.
    */
    --nk-line-faint: #222932;
    --nk-line-strong: #3b444f;
    --nk-border-control: #6e7a88;

    --nk-accent: #7fb0ff;
    --nk-accent-bg: #1f4f8f;
    --nk-accent-wash: #17232f;

    --nk-ok: #4ade80;
    --nk-warn: #fbbf24;
    --nk-bad: #f87171;
    --nk-ok-wash: #12301f;
    --nk-warn-wash: #3a2a12;
    --nk-bad-wash: #3a1a1a;

    --nk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --nk-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.6);
    --nk-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.7);

    --nk-focus: #9dc4ff;
}

/* ══ 2. BASE ═════════════════════════════════════════════════════════════════════════════════ */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--nk-bg-sunken);
    color: var(--nk-ink);
    font-family: var(--nk-font);
    font-size: var(--nk-text);
    line-height: var(--nk-leading);
    -webkit-font-smoothing: antialiased;
}

/*
    ONE focus ring for the whole product, and it is never removed.

    `:focus-visible` rather than `:focus`, so a mouse click on a button does not leave a ring
    behind, and a Tab always does. A ring drawn with `outline` and an offset costs no layout, which
    is what stops a dense grid shifting a row every time focus moves through it.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--nk-focus-width) solid var(--nk-focus);
    outline-offset: var(--nk-focus-offset);
    border-radius: var(--nk-radius-sm);
}

/* The Blazor template removed the ring from the routed heading. Restored: FocusOnNavigate moves
   focus to the h1 on every navigation, and a screen-reader user who cannot see where they landed
   is the exact person that focus move exists for. */
h1:focus-visible {
    outline: var(--nk-focus-width) solid var(--nk-focus);
}

a {
    color: var(--nk-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: var(--nk-weight-semibold);
    line-height: var(--nk-leading-tight);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══ 3. THE SHELL ════════════════════════════════════════════════════════════════════════════ */

.shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--nk-topbar-height) 1fr;
    grid-template-areas:
        "brand top"
        "nav   main";
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.shell-boot {
    display: grid;
    place-items: center;
    height: 100vh;
    color: var(--nk-ink-muted);
}

/* ---- the top bar ---- */

.shell__brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: var(--nk-space-3);
    width: var(--nk-nav-width);
    padding-inline: var(--nk-space-4);
    background: var(--nk-bg-brand);
    color: #ffffff;
    box-sizing: border-box;
    transition: width var(--nk-motion) var(--nk-ease);
}

.shell--nav-collapsed .shell__brand {
    width: var(--nk-nav-width-collapsed);
    padding-inline: var(--nk-space-2);
}

.shell__brand-name {
    font-size: var(--nk-text-md);
    font-weight: var(--nk-weight-bold);
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

.shell__brand-name:hover {
    text-decoration: none;
}

.shell--nav-collapsed .shell__brand-name {
    display: none;
}

.shell__top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: var(--nk-space-4);
    padding-inline: var(--nk-space-5) var(--nk-space-4);
    background: var(--nk-bg-brand);
    color: var(--nk-ink-on-brand);
    font-size: var(--nk-text);

    /* The one place the ring is redefined rather than re-ruled: the bar is dark in both themes. */
    --nk-focus: #9dc4ff;
}

.shell__top-spacer {
    flex: 1 1 auto;
}

.shell__company {
    font-weight: var(--nk-weight-semibold);
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}

.shell__env {
    padding: var(--nk-space-1) var(--nk-space-3);
    border: 1px solid currentcolor;
    border-radius: var(--nk-radius-pill);
    font-size: var(--nk-text-xs);
    font-weight: var(--nk-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.shell__user {
    color: var(--nk-ink-on-brand);
    white-space: nowrap;
}

/* Every control in the top bar. One rule, so the bell, the theme switch, Tell Me and Sign out are
   the same object at the same size and cannot drift apart. */
.shell__top-button {
    display: inline-flex;
    align-items: center;
    gap: var(--nk-space-2);
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-3);
    border: 1px solid transparent;
    border-radius: var(--nk-radius);
    background: transparent;
    color: var(--nk-ink-on-brand);
    font: inherit;
    font-size: var(--nk-text-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--nk-motion-fast) var(--nk-ease);
}

.shell__top-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
}

.shell__top-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Tell Me looks like the search box it is, not like a button, because a box is what a person
   types into and the shortcut hint has to have somewhere to live. */
.shell__tellme {
    flex: 0 1 300px;
    justify-content: flex-start;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.shell__tellme-hint {
    margin-left: auto;
    padding: 0 var(--nk-space-2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--nk-radius-sm);
    font-size: var(--nk-text-xs);
    opacity: 0.85;
}

.shell__badge {
    display: inline-grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    padding-inline: 3px;
    border-radius: var(--nk-radius-pill);
    background: var(--nk-bad);
    color: var(--nk-ink-on-status);
    font-size: var(--nk-text-xs);
    font-weight: var(--nk-weight-bold);
    line-height: 1;
}

/* ---- the main column: action bar, then content ---- */

.shell__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--nk-bg);
    overflow: hidden;
}

/*
    THE ACTION BAR REGION.

    It is part of the SHELL, not of the page, and that is the whole idea: the commands sit in one
    fixed band under the top bar on every screen in the product, so a user reaches for Post in the
    same place whatever they have open. A page fills it by rendering <NkShellActions>; a page that
    fills nothing collapses the band to nothing rather than leaving an empty stripe.
*/
.shell__actionbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nk-space-2);
    min-height: var(--nk-actionbar-height);
    padding: 0 var(--nk-space-5);
    border-bottom: 1px solid var(--nk-line);
    background: var(--nk-bg-raised);
    box-shadow: var(--nk-shadow-1);
}

.shell__actionbar:empty {
    display: none;
}

.shell__content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: var(--nk-bg);
    overflow: auto;
}

/* ══ 4. THE NAVIGATION PANE ══════════════════════════════════════════════════════════════════ */

.nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    width: var(--nk-nav-width);
    border-right: 1px solid var(--nk-line);
    background: var(--nk-bg-nav);
    overflow: hidden;
    transition: width var(--nk-motion) var(--nk-ease);
}

.shell--nav-collapsed .nav {
    width: var(--nk-nav-width-collapsed);
}

.nav__scroll {
    flex: 1 1 auto;
    padding: var(--nk-space-2) 0 var(--nk-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav__area {
    border-bottom: 1px solid var(--nk-line);
}

/*
    An area header is a <button> and not a <div> with a click handler, because a keyboard user has
    to be able to reach and open it, and `aria-expanded` has to be on something that announces as
    expandable. The chevron is CSS rather than an icon file: the product ships no icon set, and
    borrowing one from a vendor is forbidden.
*/
.nav__area-toggle {
    display: flex;
    align-items: center;
    gap: var(--nk-space-3);
    width: 100%;
    height: var(--nk-row-height);
    padding-inline: var(--nk-space-4) var(--nk-space-3);
    border: 0;
    background: transparent;
    color: var(--nk-ink-muted);
    font: inherit;
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.nav__area-toggle:hover {
    background: var(--nk-bg-hover);
    color: var(--nk-ink);
}

.nav__chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentcolor;
    transition: transform var(--nk-motion-fast) var(--nk-ease);
}

.nav__area-toggle[aria-expanded="true"] .nav__chevron {
    transform: rotate(90deg);
}

.nav__area-caption {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__area-count {
    flex: 0 0 auto;
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
    font-weight: var(--nk-weight-regular);
    font-variant-numeric: tabular-nums;
}

.nav__module {
    padding: var(--nk-space-2) var(--nk-space-4) var(--nk-space-1);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
    font-weight: var(--nk-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.nav__link {
    display: block;
    height: var(--nk-row-height);
    padding: 0 var(--nk-space-4) 0 var(--nk-space-6);
    color: var(--nk-ink);
    font-size: var(--nk-text);
    line-height: var(--nk-row-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
}

.nav__link:hover {
    background: var(--nk-bg-hover);
    text-decoration: none;
}

/* NavLink stamps `active` on the link matching the current route. */
.nav__link.active {
    border-left-color: var(--nk-accent);
    background: var(--nk-bg-nav-selected);
    color: var(--nk-ink);
    font-weight: var(--nk-weight-medium);
}

.nav__empty,
.nav__error {
    padding: var(--nk-space-5) var(--nk-space-4);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

/* Collapsed: the pane keeps its width for the rail but shows nothing that needs reading. The
   alternative — icons only — needs an icon per module and the product has no icon set. */
.shell--nav-collapsed .nav__scroll {
    visibility: hidden;
}

.nav__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--nk-space-2);
    height: var(--nk-actionbar-height);
    padding-inline: var(--nk-space-2);
    border-top: 1px solid var(--nk-line);
}

.nav__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nk-space-2);
    height: var(--nk-control-height);
    min-width: var(--nk-control-height);
    padding-inline: var(--nk-space-3);
    border: 1px solid transparent;
    border-radius: var(--nk-radius);
    background: transparent;
    color: var(--nk-ink-muted);
    font: inherit;
    font-size: var(--nk-text-sm);
    cursor: pointer;
}

.nav__collapse:hover {
    background: var(--nk-bg-hover);
    color: var(--nk-ink);
}

/* ══ 5. BUTTONS AND THE ACTION BAR ═══════════════════════════════════════════════════════════ */

.nk-actionbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nk-space-2);
    min-height: var(--nk-actionbar-height);
}

.nk-actionbar__promoted {
    display: flex;
    align-items: center;
    gap: var(--nk-space-2);
}

.nk-actionbar__promoted:not(:empty)::after {
    content: "";
    width: 1px;
    height: 16px;
    margin-inline: var(--nk-space-2);
    background: var(--nk-line-strong);
}

.nk-action,
.nk-button {
    display: inline-flex;
    align-items: center;
    gap: var(--nk-space-2);
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-4);
    border: 1px solid transparent;
    border-radius: var(--nk-radius);
    background: transparent;
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nk-motion-fast) var(--nk-ease);
}

.nk-action:hover,
.nk-button:hover {
    background: var(--nk-bg-hover);
    text-decoration: none;
}

.nk-action:disabled,
.nk-button:disabled {
    color: var(--nk-ink-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.nk-action--promoted,
.nk-button--secondary {
    border-color: var(--nk-border-control);
    background: var(--nk-bg-raised);
}

/*
    §30.2's promoted action categories, distinguished by weight rather than by colour alone.

    Colour alone would be invisible to a colour-blind user and illegible on the cheap panels these
    screens are read on; a New that is filled and a Process that is outlined differ in shape.
*/
.nk-action--new,
.nk-button--primary {
    border-color: var(--nk-accent-bg);
    background: var(--nk-accent-bg);
    color: var(--nk-ink-on-accent);
    font-weight: var(--nk-weight-medium);
}

.nk-action--new:hover,
.nk-button--primary:hover {
    background: var(--nk-accent);
    color: var(--nk-ink-on-accent);
}

.nk-action--report {
    border-color: var(--nk-border-control);
}

.nk-actionbar__group {
    position: relative;
}

.nk-actionbar__menu {
    display: inline-flex;
    align-items: center;
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-4);
    border: 1px solid transparent;
    border-radius: var(--nk-radius);
    background: transparent;
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text);
    cursor: pointer;
}

.nk-actionbar__menu::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: var(--nk-space-2);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentcolor;
}

.nk-actionbar__menu:hover {
    background: var(--nk-bg-hover);
}

.nk-actionbar__items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--nk-z-popover);
    display: none;
    flex-direction: column;
    min-width: 200px;
    padding: var(--nk-space-1);
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    box-shadow: var(--nk-shadow-2);
}

/* Opens on hover AND on focus-within, so the menu is reachable by keyboard. Hover alone is a
   menu a keyboard user cannot open at all. */
.nk-actionbar__group:hover .nk-actionbar__items,
.nk-actionbar__group:focus-within .nk-actionbar__items {
    display: flex;
}

.nk-actionbar__items .nk-action {
    justify-content: flex-start;
    width: 100%;
    border-radius: var(--nk-radius-sm);
}

/* ══ 6. THE PAGE ═════════════════════════════════════════════════════════════════════════════ */

.nk-page {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-4);
    min-height: 0;
}

/*
    The page container takes focus programmatically (tabindex="-1", so the shortcut handler on it can
    receive keys) and is never reached by Tab. `:not(:focus-visible)` rather than a bare `:focus`
    because the two are not the same rule: a bare one also wins over the base sheet's ring, at higher
    specificity, for any future day somebody makes this element tabbable. Removing a ring is allowed
    only where nobody can get a ring.
*/
.nk-page:focus:not(:focus-visible) {
    outline: none;
}

.nk-page__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nk-space-4);
}

.nk-page__title {
    flex: 0 0 auto;
    margin-right: var(--nk-space-4);
    font-size: var(--nk-text-xl);
    font-weight: var(--nk-weight-semibold);
}

.nk-page__views {
    display: flex;
    gap: var(--nk-space-1);
    border-bottom: 1px solid var(--nk-line);
}

.nk-view {
    height: var(--nk-row-height);
    padding-inline: var(--nk-space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--nk-ink-muted);
    font: inherit;
    font-size: var(--nk-text);
    cursor: pointer;
}

.nk-view:hover {
    color: var(--nk-ink);
}

.nk-view--active {
    border-bottom-color: var(--nk-accent);
    color: var(--nk-ink);
    font-weight: var(--nk-weight-medium);
}

.nk-page__body {
    display: flex;
    align-items: flex-start;
    gap: var(--nk-space-5);
    min-height: 0;
}

.nk-page__content {
    flex: 1 1 auto;
    min-width: 0;
}

.nk-page__loading {
    padding: var(--nk-space-6);
    color: var(--nk-ink-muted);
}

.nk-part {
    margin-top: var(--nk-space-5);
}

.nk-part__caption,
.nk-factbox__caption {
    margin-bottom: var(--nk-space-2);
    font-size: var(--nk-text);
    font-weight: var(--nk-weight-semibold);
}

/* ---- FastTabs ---- */

.nk-fasttab {
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
}

.nk-fasttab + .nk-fasttab {
    margin-top: var(--nk-space-3);
}

.nk-fasttab__header {
    display: flex;
    align-items: center;
    gap: var(--nk-space-3);
    padding: var(--nk-space-2) var(--nk-space-4);
    background: var(--nk-bg-sunken);
    border-radius: var(--nk-radius) var(--nk-radius) 0 0;
}

.nk-fasttab__toggle {
    display: flex;
    align-items: center;
    gap: var(--nk-space-3);
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--nk-ink);
    font: inherit;
    font-weight: var(--nk-weight-semibold);
    text-align: left;
    cursor: pointer;
}

.nk-fasttab__caption {
    flex: 0 0 auto;
}

/* The collapsed summary — §30's FastTab shows its key values in the header, so a user can skip a
   tab without opening it. Muted, so it never competes with the caption. */
.nk-fasttab__summary {
    flex: 1 1 auto;
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-fasttab__more {
    flex: 0 0 auto;
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-3);
    border: 0;
    background: transparent;
    color: var(--nk-accent);
    font: inherit;
    font-size: var(--nk-text-sm);
    cursor: pointer;
}

.nk-fasttab__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--nk-space-1) var(--nk-space-6);
    padding: var(--nk-space-4);
}

/* ---- fields ---- */

.nk-field {
    display: grid;
    grid-template-columns: minmax(90px, 38%) 1fr;
    align-items: center;
    gap: var(--nk-space-4);
    min-height: var(--nk-row-height);
}

.nk-field__label {
    color: var(--nk-ink-muted);
    font-size: var(--nk-text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-field__mandatory {
    color: var(--nk-bad);
    font-weight: var(--nk-weight-bold);
}

.nk-input {
    width: 100%;
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-3);
    border: 1px solid var(--nk-border-control);
    border-radius: var(--nk-radius-sm);
    background: var(--nk-bg);
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text);
    box-sizing: border-box;
}

.nk-input--decimal,
.nk-input--integer {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A control that should take its content's width rather than its container's — a dashboard picker
   in the action bar, not a field on a card. */
.nk-input--auto {
    width: auto;
}

.nk-input--boolean {
    width: 15px;
    height: 15px;
    padding: 0;
    accent-color: var(--nk-accent-bg);
}

.nk-input:disabled,
.nk-input[readonly] {
    border-color: var(--nk-line);
    background: var(--nk-bg-sunken);
    color: var(--nk-ink-muted);
}

.nk-field--error .nk-input {
    border-color: var(--nk-bad);
    border-width: 2px;
}

.nk-field__error {
    grid-column: 2;
    color: var(--nk-bad);
    font-size: var(--nk-text-sm);
}

.nk-field__assist {
    grid-column: 2;
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

/* ---- the grid ---- */

/*
    Flex rather than CSS grid, because the column count is decided by the page metadata at run time
    and the markup carries no count for `grid-template-columns` to use. Head and body rows are the
    same flex container with the same children, so the columns line up without either of them
    knowing how many there are.
*/
.nk-grid {
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    overflow: auto;
}

.nk-grid__head,
.nk-grid__row {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

.nk-grid__head {
    position: sticky;
    top: 0;
    z-index: var(--nk-z-sticky);
    border-bottom: 1px solid var(--nk-line-strong);
    background: var(--nk-bg-sunken);
}

.nk-grid__th,
.nk-grid__cell {
    flex: 1 1 0;
    min-width: 96px;
    padding: 0 var(--nk-space-3);
    line-height: var(--nk-row-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-grid__th {
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-semibold);
}

.nk-grid__th + .nk-grid__th,
.nk-grid__cell + .nk-grid__cell {
    border-left: 1px solid var(--nk-line);
}

.nk-grid__row {
    border-bottom: 1px solid var(--nk-line);
}

.nk-grid__row:hover {
    background: var(--nk-bg-hover);
}

.nk-grid__row--selected,
.nk-grid__row[aria-selected="true"] {
    background: var(--nk-bg-selected);
}

/* Decimal points line up down the column. On a journal or a ledger this is what makes an outlier
   findable at a glance, which is the whole reason a numeric column is right-aligned at all. */
.nk-grid__cell--numeric,
.nk-cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.nk-grid__cell .nk-input {
    height: calc(var(--nk-row-height) - 4px);
    border-color: transparent;
    background: transparent;
}

.nk-grid__cell .nk-input:hover {
    border-color: var(--nk-border-control);
    background: var(--nk-bg);
}

.nk-grid__cell .nk-input:focus {
    border-color: var(--nk-accent);
    background: var(--nk-bg);
}

.nk-grid__empty {
    padding: var(--nk-space-6);
    color: var(--nk-ink-muted);
    text-align: center;
}

/* ---- FactBoxes ---- */

.nk-factbox-pane {
    flex: 0 0 var(--nk-factbox-width);
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-4);
}

.nk-factbox {
    padding: var(--nk-space-4);
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    font-size: var(--nk-text-sm);
}

/* A laptop cannot spare 260px beside a forty-column grid. The FactBox drops under the content
   rather than squeezing it, which is what §30's own responsive behaviour does. */
@media (max-width: 1100px) {
    .nk-page__body {
        flex-direction: column;
    }

    .nk-factbox-pane {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
}

/* ══ 7. NOTIFICATIONS, ALERTS AND POPOVERS ═══════════════════════════════════════════════════ */

.nk-notification {
    padding: var(--nk-space-4) var(--nk-space-5);
    border: 1px solid var(--nk-line-strong);
    border-left: 3px solid var(--nk-ink-muted);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
}

.nk-notification--error {
    border-left-color: var(--nk-bad);
    background: var(--nk-bad-wash);
}

.nk-notification--warning {
    border-left-color: var(--nk-warn);
    background: var(--nk-warn-wash);
}

.nk-notification--success {
    border-left-color: var(--nk-ok);
    background: var(--nk-ok-wash);
}

.nk-alerts {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-2);
    margin: 0 0 var(--nk-space-4);
    padding: 0;
    list-style: none;
}

.nk-alert {
    padding: var(--nk-space-2) var(--nk-space-4);
    border-left: 3px solid var(--nk-ink-muted);
    border-radius: var(--nk-radius-sm);
    background: var(--nk-bg-sunken);
    font-size: var(--nk-text);
}

.nk-alert-critical {
    border-left-color: var(--nk-bad);
    background: var(--nk-bad-wash);
}

.nk-alert-warning {
    border-left-color: var(--nk-warn);
    background: var(--nk-warn-wash);
}

.nk-alert-information {
    border-left-color: var(--nk-accent);
    background: var(--nk-accent-wash);
}

/* The one popover shape: the notification list, the Tell Me results, an action menu. */
.nk-popover {
    position: absolute;
    top: calc(var(--nk-topbar-height) - var(--nk-space-2));
    right: var(--nk-space-4);
    z-index: var(--nk-z-popover);
    width: min(380px, calc(100vw - var(--nk-space-7)));
    max-height: 60vh;
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius-lg);
    background: var(--nk-bg-raised);
    color: var(--nk-ink);
    box-shadow: var(--nk-shadow-3);
    overflow: auto;
}

.nk-popover__header {
    display: flex;
    align-items: center;
    gap: var(--nk-space-3);
    padding: var(--nk-space-4) var(--nk-space-5);
    border-bottom: 1px solid var(--nk-line);
    font-weight: var(--nk-weight-semibold);
}

/*
    A text action in a popover header — "Mark all as read". Styled as a link rather than a button so
    it does not compete with the primary action inside the pane, but it IS a <button>: it performs an
    action on this page and navigates nowhere, and an <a> there would offer a context menu full of
    things ("open in new tab") that cannot work.
*/
.nk-popover__action {
    padding: 0;
    border: 0;
    background: none;
    color: var(--nk-accent);
    font: inherit;
    font-weight: var(--nk-weight-regular);
    cursor: pointer;
}

.nk-popover__action:hover:not(:disabled) {
    text-decoration: underline;
}

.nk-popover__action:disabled {
    color: var(--nk-ink-muted);
    cursor: default;
}

/*
    The count goes to the far right, leaving the title and the action together on the left. Without
    this the header's `gap` put the count immediately after whichever of them was last, so adding the
    action moved the count — a number that had been in the same place on every page.
*/
.nk-popover__header .nk-muted {
    margin-left: auto;
}

.nk-popover__empty {
    padding: var(--nk-space-6) var(--nk-space-5);
    color: var(--nk-ink-muted);
}

.nk-notifications {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nk-notifications__item {
    display: block;
    width: 100%;
    padding: var(--nk-space-4) var(--nk-space-5);
    border: 0;
    border-bottom: 1px solid var(--nk-line);
    border-left: 3px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nk-notifications__item:hover {
    background: var(--nk-bg-hover);
    text-decoration: none;
}

.nk-notifications__item--unread {
    border-left-color: var(--nk-accent);
    font-weight: var(--nk-weight-medium);
}

.nk-notifications__meta {
    display: block;
    margin-top: var(--nk-space-1);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-regular);
}

/* ══ 8. TELL ME — the command palette ════════════════════════════════════════════════════════ */

.nk-palette__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--nk-z-modal);
    display: flex;
    justify-content: center;
    padding-top: 12vh;
    background: rgba(3, 10, 22, 0.4);
}

.nk-palette {
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - var(--nk-space-8)));
    max-height: 70vh;
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius-lg);
    background: var(--nk-bg-raised);
    box-shadow: var(--nk-shadow-3);
    overflow: hidden;
}

.nk-palette__input {
    flex: 0 0 auto;
    height: 44px;
    padding-inline: var(--nk-space-6);
    border: 0;
    border-bottom: 1px solid var(--nk-line);
    background: transparent;
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text-lg);
}

/*
    THE ONE PLACE IN THE PRODUCT THAT HAD NO FOCUS INDICATOR AT ALL.

    This removed the ring from Tell Me's search box on :focus-VISIBLE — the keyboard case — and put
    nothing in its place. The box's only boundary is a 1px --nk-line underline, which is there whether
    it has focus or not, so a user who Tabbed from the box to a result and back had no way to tell
    where the keyboard was. WCAG 2.2 SC 2.4.7 asks for a visible indicator and "the dialog is the only
    thing on screen" is not one.

    The ring is suppressed and REPLACED rather than simply restored: a 2px outline around a box whose
    edges are the dialog's edges looks like a mistake, and the underline thickening to the accent is
    the same statement in the shape this control already has.
*/
.nk-palette__input:focus-visible {
    outline: none;
    border-bottom: 2px solid var(--nk-focus);
    padding-bottom: 0;
}

.nk-palette__results {
    flex: 1 1 auto;
    margin: 0;
    padding: var(--nk-space-2) 0;
    list-style: none;
    overflow-y: auto;
}

.nk-palette__group {
    padding: var(--nk-space-3) var(--nk-space-6) var(--nk-space-1);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
    font-weight: var(--nk-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.nk-palette__item {
    display: flex;
    align-items: center;
    gap: var(--nk-space-4);
    width: 100%;
    height: 30px;
    padding-inline: var(--nk-space-6);
    border: 0;
    background: transparent;
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text);
    text-align: left;
    cursor: pointer;
}

/*
    The highlight is on the item the ARROW KEYS are on, not on `:hover`.

    A palette is driven from the keyboard, and if hover also highlighted, a mouse resting anywhere
    over the list would show two selections and Enter would take the one the user is not looking at.
*/
.nk-palette__item--active {
    background: var(--nk-bg-selected);
    color: var(--nk-ink);
}

.nk-palette__caption {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nk-palette__kind {
    flex: 0 0 auto;
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

.nk-palette__empty {
    padding: var(--nk-space-7) var(--nk-space-6);
    color: var(--nk-ink-muted);
}

.nk-palette__footer {
    flex: 0 0 auto;
    display: flex;
    gap: var(--nk-space-5);
    padding: var(--nk-space-3) var(--nk-space-6);
    border-top: 1px solid var(--nk-line);
    background: var(--nk-bg-sunken);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

.nk-key {
    padding: 0 var(--nk-space-2);
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius-sm);
    background: var(--nk-bg-raised);
    font-family: var(--nk-font-mono);
    font-size: var(--nk-text-xs);
}

/* ══ 8b. THE KEYBOARD SHORTCUT SHEET ═════════════════════════════════════════════════════════ */

/*
    The one modal shape in the product, and the only thing that uses it today is §30.6's shortcut
    sheet. It is deliberately the same elevation, radius and scrim as the Tell Me palette: both are
    "the product, paused, with one thing in front of it", and two different treatments for one idea
    is how a client starts to feel assembled rather than designed.
*/
.nk-sheet__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--nk-z-modal);
    background: rgba(8, 12, 18, 0.44);
}

.nk-sheet {
    position: fixed;
    top: 8vh;
    left: 50%;
    z-index: calc(var(--nk-z-modal) + 1);
    display: flex;
    flex-direction: column;
    width: min(760px, 92vw);
    max-height: 80vh;
    transform: translateX(-50%);
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius-lg);
    background: var(--nk-bg-raised);
    box-shadow: var(--nk-shadow-3);
}

.nk-sheet__header {
    display: flex;
    align-items: center;
    gap: var(--nk-space-4);
    padding: var(--nk-space-4) var(--nk-space-5);
    border-bottom: 1px solid var(--nk-line);
}

.nk-sheet__title {
    flex: 1 1 auto;
    font-size: var(--nk-text-lg);
}

.nk-sheet__close {
    padding: var(--nk-space-1) var(--nk-space-3);
    border: 1px solid transparent;
    border-radius: var(--nk-radius-sm);
    background: transparent;
    color: var(--nk-ink-muted);
    font: inherit;
    cursor: pointer;
}

.nk-sheet__close:hover {
    border-color: var(--nk-line-strong);
    background: var(--nk-bg-hover);
    color: var(--nk-ink);
}

.nk-sheet__body {
    /*
        Two columns where there is room, because the whole map is about thirty rows and a reference
        somebody has to scroll is a reference they read half of.
    */
    columns: 2 300px;
    column-gap: var(--nk-space-7);
    padding: var(--nk-space-5);
    overflow-y: auto;
}

.nk-sheet__group {
    /* A group is never split down the middle of itself across the column break. */
    break-inside: avoid;
    margin-bottom: var(--nk-space-5);
}

.nk-sheet__group-title {
    margin-bottom: var(--nk-space-2);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.nk-sheet__keys {
    margin: 0;
}

.nk-sheet__key {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-4);
    padding: var(--nk-space-1) 0;
}

.nk-sheet__key dt {
    /* Fixed, so the captions line up down the column — the same reasoning as the field grid. */
    flex: 0 0 104px;
    margin: 0;
    text-align: right;
}

.nk-sheet__key dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.nk-sheet__unverified {
    margin-left: var(--nk-space-2);
    padding: 0 var(--nk-space-2);
    border: 1px solid var(--nk-warn);
    border-radius: var(--nk-radius-pill);
    color: var(--nk-warn);
    font-size: var(--nk-text-xs);
}

.nk-sheet__footer {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-5);
    padding: var(--nk-space-3) var(--nk-space-5);
    border-top: 1px solid var(--nk-line);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

/* ══ 9. THE ROLE CENTRE ══════════════════════════════════════════════════════════════════════ */

.nk-rolecentre {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-6);
    max-width: 1400px;
}

.nk-rolecentre__header {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-5);
}

.nk-rolecentre__header h1 {
    font-size: var(--nk-text-xl);
}

.nk-rolecentre__subtitle {
    margin: 0;
    color: var(--nk-ink-muted);
    font-size: var(--nk-text);
}

.nk-rolecentre__section {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-4);
}

.nk-rolecentre__section-title {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-4);
    font-size: var(--nk-text-md);
    font-weight: var(--nk-weight-semibold);
}

.nk-rolecentre__note {
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-regular);
}

.nk-cues {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--nk-space-4);
}

/*
    A CUE IS A LINK, ALWAYS.

    §37.1 makes drillthrough a release gate for an analytics figure, and the same reasoning applies
    with more force to a role centre: a count nobody can open is a decoration. So the cue is an
    anchor with an href, which means middle-click, Ctrl+click, Tab and Enter all work without a
    line of script, and a cue that somehow reached the client with nowhere to go renders as a
    plainly disabled card rather than as a live-looking one that does nothing.
*/
.nk-cue {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nk-space-2);
    min-height: 74px;
    padding: var(--nk-space-4);
    border: 1px solid var(--nk-line);
    border-top: 3px solid var(--nk-line-strong);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    color: var(--nk-ink);
    box-shadow: var(--nk-shadow-1);
    transition: box-shadow var(--nk-motion-fast) var(--nk-ease);
}

a.nk-cue:hover {
    box-shadow: var(--nk-shadow-2);
    text-decoration: none;
}

/*
    SEVERITY IS NOT A HUE.

    These three rules used to set `border-top-color` and nothing else, all at the same 3px width in
    the same place — so "nine jobs have failed" and "nine jobs finished early" were the same card to
    anybody with a red-green deficiency, which is roughly one man in twelve and the exact person an
    accounting screen cannot afford to mislead. WCAG 2.2 SC 1.4.1 is the rule and it is not satisfied
    by the colours being well chosen.

    The edge now carries WIDTH and STYLE as well as hue, so the three are distinguishable in
    greyscale, and NkCue puts a mark beside the figure and the severity in words into the card's
    accessible name. Three carriers, each legible on its own.
*/
.nk-cue--attention {
    border-top-color: var(--nk-warn);
    border-top-width: 4px;
}

.nk-cue--critical {
    border-top-color: var(--nk-bad);
    border-top-width: 4px;
    border-top-style: double;
}

.nk-cue--favourable {
    border-top-color: var(--nk-ok);
    border-top-style: dotted;
}

/* The mark beside the figure: smaller than the number, so it reads as a qualifier on it. */
.nk-cue__tone {
    margin-right: var(--nk-space-2);
    font-size: var(--nk-text-sm);
    vertical-align: 0.22em;
}

.nk-cue--dead {
    background: var(--nk-bg-sunken);
    color: var(--nk-ink-muted);
    cursor: not-allowed;
}

.nk-cue__value {
    font-size: var(--nk-text-display);
    font-weight: var(--nk-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--nk-leading-tight);
}

.nk-cue--attention .nk-cue__value {
    color: var(--nk-warn);
}

.nk-cue--critical .nk-cue__value {
    color: var(--nk-bad);
}

.nk-cue--favourable .nk-cue__value {
    color: var(--nk-ok);
}

.nk-cue__caption {
    font-size: var(--nk-text-sm);
    color: var(--nk-ink-muted);
}

.nk-cue__unit {
    margin-left: var(--nk-space-2);
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-regular);
    color: var(--nk-ink-muted);
}

.nk-rolecentre__modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--nk-space-5);
}

.nk-module__title {
    margin-bottom: var(--nk-space-2);
    padding-bottom: var(--nk-space-1);
    border-bottom: 1px solid var(--nk-line);
    font-size: var(--nk-text);
    font-weight: var(--nk-weight-semibold);
}

.nk-module__pages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nk-module__pages li {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-3);
    line-height: var(--nk-row-height);
}

.nk-module__type {
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
}

.nk-headline__figure {
    font-size: var(--nk-text-xl);
    font-weight: var(--nk-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.nk-headline__label {
    margin-left: var(--nk-space-3);
    color: var(--nk-ink-muted);
}

/* ══ 10. DASHBOARD TILES ═════════════════════════════════════════════════════════════════════ */

.nk-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-4);
}

.nk-dashboard-header {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-4);
}

.nk-dashboard-caption {
    font-size: var(--nk-text-lg);
}

.nk-dashboard-role,
.nk-uncertified {
    padding: var(--nk-space-1) var(--nk-space-3);
    border-radius: var(--nk-radius-pill);
    background: var(--nk-bg-sunken);
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
}

.nk-uncertified {
    background: var(--nk-warn-wash);
    color: var(--nk-warn);
}

.nk-dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nk-space-2);
}

.nk-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nk-space-2);
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-4);
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius-pill);
    background: var(--nk-bg-raised);
    color: var(--nk-ink);
    font: inherit;
    font-size: var(--nk-text-sm);
}

button.nk-filter-chip {
    cursor: pointer;
}

.nk-filter-caption {
    color: var(--nk-ink-muted);
}

.nk-filter-value {
    font-weight: var(--nk-weight-medium);
}

.nk-dashboard-grid,
.nk-tile-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 60px;
    gap: var(--nk-space-4);
}

/* Twelve columns is right at 1280 and absurd at 900. Below that the tiles stack rather than
   becoming twelve slivers. */
@media (max-width: 1100px) {
    .nk-dashboard-grid,
    .nk-tile-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 720px) {
    .nk-dashboard-grid,
    .nk-tile-grid {
        grid-template-columns: 1fr;
    }

    .nk-grid-cell {
        grid-column: 1 / -1 !important;
    }
}

.nk-grid-cell {
    min-width: 0;
}

.nk-tile {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-2);
    height: 100%;
    padding: var(--nk-space-4);
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    box-shadow: var(--nk-shadow-1);
    box-sizing: border-box;
    overflow: hidden;
}

.nk-tile-header {
    display: flex;
    align-items: baseline;
    gap: var(--nk-space-3);
}

.nk-tile-caption {
    flex: 1 1 auto;
    font-size: var(--nk-text-sm);
    font-weight: var(--nk-weight-semibold);
    color: var(--nk-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-kpi-value,
.nk-cue-value,
.nk-gauge-value {
    font-size: var(--nk-text-display);
    font-weight: var(--nk-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--nk-leading-tight);
}

.nk-positive {
    color: var(--nk-ok);
}

.nk-negative {
    color: var(--nk-bad);
}

.nk-sparkline {
    width: 100%;
    height: 24px;
    color: var(--nk-accent);
}

.nk-drillthrough {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nk-accent);
    font: inherit;
    font-size: var(--nk-text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.nk-tile-error,
.nk-tile-empty {
    color: var(--nk-ink-muted);
    font-size: var(--nk-text-sm);
}

.nk-tile-unsupported {
    border-style: dashed;
}

.nk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nk-text-sm);
}

.nk-table th,
.nk-table td {
    padding: var(--nk-space-1) var(--nk-space-3);
    border-bottom: 1px solid var(--nk-line);
    text-align: left;
    white-space: nowrap;
}

.nk-table th {
    color: var(--nk-ink-muted);
    font-weight: var(--nk-weight-semibold);
}

.nk-chart,
.nk-chart-canvas,
.nk-gauge-canvas,
.nk-donut,
.nk-waterfall {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.nk-axis {
    fill: var(--nk-ink-muted);
    font-size: var(--nk-text-xs);
}

.nk-line {
    fill: none;
    stroke: var(--nk-accent);
    stroke-width: 1.5;
}

.nk-area {
    fill: var(--nk-accent-wash);
}

.nk-point {
    fill: var(--nk-accent);
}

.nk-bar,
.nk-slice-0 {
    fill: var(--nk-accent);
}

.nk-gauge-track {
    fill: none;
    stroke: var(--nk-line);
}

.nk-gauge-fill {
    fill: none;
    stroke: var(--nk-accent);
}

.nk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nk-space-2) var(--nk-space-5);
    font-size: var(--nk-text-sm);
}

.nk-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--nk-space-2);
}

.nk-legend-label {
    color: var(--nk-ink-muted);
}

.nk-legend-value {
    font-variant-numeric: tabular-nums;
}

.nk-drillthrough-panel {
    margin-top: var(--nk-space-5);
    border: 1px solid var(--nk-line-strong);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
}

.nk-drillthrough-header {
    display: flex;
    align-items: center;
    gap: var(--nk-space-4);
    padding: var(--nk-space-4);
    border-bottom: 1px solid var(--nk-line);
    font-weight: var(--nk-weight-semibold);
}

.nk-drillthrough-fact {
    color: var(--nk-ink-muted);
    font-family: var(--nk-font-mono);
    font-size: var(--nk-text-sm);
}

.nk-drillthrough-count {
    margin-left: auto;
    color: var(--nk-ink-muted);
    font-variant-numeric: tabular-nums;
}

.nk-close {
    height: var(--nk-control-height);
    padding-inline: var(--nk-space-3);
    border: 0;
    background: transparent;
    color: var(--nk-ink-muted);
    font: inherit;
    cursor: pointer;
}

.nk-close:hover {
    color: var(--nk-ink);
}

/* ══ 11. SMALL SCREENS ═══════════════════════════════════════════════════════════════════════ */

/*
    The brief's floor is 1280x720 and its degradation target is a laptop. Below 900 the navigation
    stops taking a column of its own and slides over the content, because at that width a 232px
    pane and a usable list cannot both exist.
*/
@media (max-width: 900px) {
    .shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "main";
    }

    .shell__brand {
        display: none;
    }

    .nav {
        position: fixed;
        top: var(--nk-topbar-height);
        bottom: 0;
        left: 0;
        z-index: var(--nk-z-nav);
        box-shadow: var(--nk-shadow-3);
    }

    .shell--nav-collapsed .nav {
        display: none;
    }

    .shell__tellme {
        flex: 0 0 auto;
        width: var(--nk-control-height);
    }

    .shell__tellme-hint,
    .shell__tellme-label {
        display: none;
    }
}

/* ══ 12. UTILITIES ═══════════════════════════════════════════════════════════════════════════ */

/* Visible to a screen reader, invisible to everyone else. The skip link uses it, and so does every
   place a control's only label is its shape. */
.nk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.nk-skip {
    position: absolute;
    top: var(--nk-space-2);
    left: var(--nk-space-2);
    z-index: var(--nk-z-modal);
    padding: var(--nk-space-3) var(--nk-space-5);
    border-radius: var(--nk-radius);
    background: var(--nk-bg-raised);
    color: var(--nk-ink);
    box-shadow: var(--nk-shadow-2);
    transform: translateY(-200%);
    transition: transform var(--nk-motion) var(--nk-ease);
}

.nk-skip:focus {
    transform: translateY(0);
}

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

.nk-numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}