/* Keddaro v3 (Figma GTruJJrX68q0T2BTvdfT7C: "v3 · Components", "v3 · App", "v3 · Landing"; FE-11).
   The page is paper, text is ink, and one green means "you are cleared to read this". A black bar is sealed text.
   Token names match the Figma "v3 Colors" variables 1:1 (surface/paper -> --surface-paper).
   Two themes, light and dark; no choice follows the OS (ColorTheme.cs sets data-theme). */

:root, [data-theme="light"] {
    color-scheme: light;
    --surface-paper: #f4f5f3;
    --surface-sheet: #ffffff;
    --surface-sunken: #eceeeb;
    --ink-primary: #0e1512;
    --ink-secondary: #4b5651;
    --ink-tertiary: #65706a;
    --ink-on-ink: #f4f5f3;
    --line-default: #dde1dd;
    --line-strong: #c2c9c3;
    --clear-fg: #0f6b4c;
    --clear-tint: #e3f1ea;
    --clear-line: #a9d3c0;
    --deny-fg: #b5303f;
    --deny-tint: #f9e9ea;
    --warn-fg: #8f5a0a;
    --warn-tint: #f8efd9;
    --seal-bar: #0e1512;
    --shadow-sheet: 0 24px 48px -16px rgb(14 21 18 / 0.08), 0 1px 2px rgb(14 21 18 / 0.05);
    --shadow-popover: 0 12px 32px -8px rgb(14 21 18 / 0.18), 0 1px 2px rgb(14 21 18 / 0.06);
}

[data-theme="dark"] {
    color-scheme: dark;
    --surface-paper: #0c1210;
    --surface-sheet: #131b18;
    --surface-sunken: #0a0f0d;
    --ink-primary: #eef2ef;
    --ink-secondary: #a3ada8;
    --ink-tertiary: #7b8680;
    --ink-on-ink: #0c1210;
    --line-default: #232d29;
    --line-strong: #34403b;
    --clear-fg: #5fd3a2;
    --clear-tint: #11261e;
    --clear-line: #1e4636;
    --deny-fg: #f0787f;
    --deny-tint: #2b1517;
    --warn-fg: #e9b450;
    --warn-tint: #2a2009;
    --seal-bar: #aeb9b3;
    --shadow-sheet: 0 24px 48px -16px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-popover: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* No choice made: follow the OS. Same values as [data-theme="dark"]; keep the two in step. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --surface-paper: #0c1210;
        --surface-sheet: #131b18;
        --surface-sunken: #0a0f0d;
        --ink-primary: #eef2ef;
        --ink-secondary: #a3ada8;
        --ink-tertiary: #7b8680;
        --ink-on-ink: #0c1210;
        --line-default: #232d29;
        --line-strong: #34403b;
        --clear-fg: #5fd3a2;
        --clear-tint: #11261e;
        --clear-line: #1e4636;
        --deny-fg: #f0787f;
        --deny-tint: #2b1517;
        --warn-fg: #e9b450;
        --warn-tint: #2a2009;
        --seal-bar: #aeb9b3;
        --shadow-sheet: 0 24px 48px -16px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-popover: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.4);
    }
}

:root {
    /* The vault: the one deep green surface, the same in both themes. */
    --vault-bg: #0b2b21;
    --vault-raised: #103528;
    --vault-ink: #eaf2ee;
    --vault-ink-2: #9db5aa;
    --vault-line: #24493b;
    --vault-accent: #7fddb3;

    --hover: color-mix(in srgb, var(--ink-primary) 6%, transparent);
    --radius-chip: 6px;
    --radius-control: 8px;
    --radius-sheet: 12px;
    --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-logo: "JetBrains Mono", var(--font-mono);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface-paper);
    color: var(--ink-primary);
    font: 14px/22px var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1:focus { outline: none; }
a { color: var(--ink-primary); text-underline-offset: 3px; }
code, .mono { font-family: var(--font-mono); font-size: 13px; }
.icon { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-tertiary); }
.error { padding: 10px 14px; border-radius: var(--radius-control); background: var(--deny-tint); color: var(--deny-fg); font-size: 14px; line-height: 22px; }
/* Group labels are sentence case and quiet: no uppercase eyebrows in v3. */
.overline { color: var(--ink-tertiary); font: 500 12px/16px var(--font-sans); letter-spacing: 0.005em; }

/* Logo: Bracket K mark and the lowercase mono wordmark. The tile is ink and the glyph its inverse, so it flips with the theme. */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-primary); font: 500 16px/22px var(--font-logo); letter-spacing: -0.64px; text-decoration: none; }
.logo-tile { fill: var(--ink-primary); }
.logo-glyph { fill: var(--surface-paper); }

/* Buttons: one primary per view; secondary for the rest; ghost for row actions; danger only as ghost text.
   Motion is press feedback and a colour change, nothing else (the design's "Notes: motion"). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 14px; border: 1px solid transparent; border-radius: var(--radius-control);
    background: none; color: var(--ink-primary);
    font: 500 14px/22px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-primary { background: var(--ink-primary); color: var(--ink-on-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink-primary) 86%, var(--surface-paper)); }
.btn-secondary { background: var(--surface-sheet); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-paper); }
.btn-ghost { padding: 6px 10px; color: var(--ink-secondary); }
.btn-ghost:hover { background: var(--hover); color: var(--ink-primary); }
.btn-danger, .btn-danger:hover { color: var(--deny-fg); }
.btn-sm { padding: 2px 10px; font-size: 13px; line-height: 20px; }
.btn-icon { width: 28px; height: 28px; padding: 0; }
.btn-lg { gap: 10px; padding: 10px 20px; font-size: 16px; line-height: 26px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* Chips: a role or a tag, set in mono. Outcomes are coloured words, not pills. */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--surface-sunken); color: var(--ink-secondary); font: 12px/18px var(--font-mono); white-space: nowrap; text-decoration: none; }
a.badge:hover { color: var(--ink-primary); }
.badge-accent, .badge-neutral { background: var(--ink-primary); color: var(--ink-on-ink); }
.badge-success, .badge-warning, .badge-danger { padding: 0; background: none; font: 500 12px/16px var(--font-sans); letter-spacing: 0.005em; }
.badge-success { color: var(--clear-fg); }
.badge-warning { color: var(--warn-fg); }
.badge-danger { color: var(--deny-fg); }
.grant-individual td { background: var(--warn-tint); }
.grant-individual td:first-child { padding-left: 12px; }
.badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .label { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink-primary); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 22px; }
.hint { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-tertiary); }
input:not([type=checkbox]), select {
    height: 36px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control);
    background: var(--surface-sheet); color: var(--ink-primary); font: 14px/22px var(--font-sans);
}
input::placeholder { color: var(--ink-tertiary); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -1px; }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink-primary); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* A form that sits in the sheet: an inset of paper, like the design's "Add a role". */
.form-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 20px; border-radius: var(--radius-sheet); background: var(--surface-paper); }
.form-bar .field { flex: 1 1 180px; }
.form-bar .field-wide { flex: 2 1 260px; }

/* Centred pages: sign-in adjacent screens, errors. A sheet on the paper. */
.centered { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 16px; }
.card { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 16px; padding: 36px; border: 1px solid var(--line-default); border-radius: var(--radius-sheet); background: var(--surface-sheet); box-shadow: var(--shadow-sheet); }
.card h1 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.card h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.card form { display: flex; flex-direction: column; gap: 16px; }
.lede { font-size: 16px; line-height: 26px; color: var(--ink-secondary); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-foot .push { margin-left: auto; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--ink-secondary); text-decoration: none; }
.back:hover { color: var(--ink-primary); }

/* Organisation list (tenant switcher) */
.org-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line-default); }
.org-list li + li { border-top: 1px solid var(--line-default); }
.org-list a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--ink-primary); text-decoration: none; }
.org-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.org-list .badges { margin-left: auto; }
.org-list .icon { color: var(--ink-tertiary); }
.org-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.org-row form { margin-left: auto; }
.org-tile { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-chip); background: var(--ink-primary); color: var(--ink-on-ink); font-size: 12px; font-weight: 500; }
.item-text { display: flex; flex-direction: column; min-width: 0; }
.item-text > strong { font-size: 14px; line-height: 22px; font-weight: 500; }
.item-text > span { overflow: hidden; font-size: 12px; line-height: 18px; color: var(--ink-tertiary); text-overflow: ellipsis; white-space: nowrap; }

/* App shell (Figma "v3/App/Sidebar"): the sidebar sits on the paper, the page is a sheet beside it. */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; z-index: 2; /* its menus open over the page */ top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 14px 12px; }
.side-org { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-control); color: var(--ink-primary); font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: none; }
.side-org > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-org .icon { color: var(--ink-tertiary); }
.org-avatar { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-chip); background: var(--ink-primary); color: var(--ink-on-ink); font-size: 12px; line-height: 16px; font-weight: 500; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-group > .overline { padding: 0 10px 6px; }
.side-groups { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; } /* scrolls on short screens; the foot and its menus stay outside it */
/* Links are words only. The current one sits on a white pill, the same white as the sheet. */
.side-link, .sidebar .menu > summary { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius-control); color: var(--ink-secondary); font-size: 14px; line-height: 22px; text-decoration: none; }
.side-org:hover, .side-link:hover, .sidebar .menu > summary:hover { background: var(--hover); color: var(--ink-primary); }
.side-link[aria-current], .side-link[aria-current]:hover { border-color: var(--line-default); background: var(--surface-sheet); color: var(--ink-primary); font-weight: 500; }
.side-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.sidebar .account > summary { padding: 6px 10px; color: var(--ink-primary); font-weight: 500; }
.account > summary > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; margin: 12px 12px 12px 0; border: 1px solid var(--line-default); border-radius: var(--radius-sheet); background: var(--surface-sheet); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 52px; padding: 10px 28px; border-bottom: 1px solid var(--line-default); color: var(--ink-secondary); font-size: 14px; line-height: 22px; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--ink-primary); }
.topbar [aria-current] { color: var(--ink-primary); font-weight: 500; overflow-wrap: anywhere; }
.crumb-sep { color: var(--ink-tertiary); }
.content { flex: 1; display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 36px 48px 48px; }

.detail-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.title { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sub { max-width: 76ch; font-size: 16px; line-height: 26px; color: var(--ink-secondary); }
.meta { font-size: 13px; line-height: 20px; color: var(--ink-tertiary); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.actions form { display: contents; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.section { display: flex; flex-direction: column; gap: 6px; }
/* A button under a section's text keeps its own width. */
.section > .btn, .section > form { align-self: flex-start; }
.section h2, .h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
/* A section that reads top to bottom, with a table and a numbered list (Incidents). */
.section h2 .badge { margin-left: 8px; vertical-align: middle; }
.section h3 { margin-top: 14px; font-size: 16px; line-height: 24px; font-weight: 600; }
.section > .table-wrap { margin-top: 10px; }
.section > ol { margin: 0 0 10px; padding-left: 22px; }
.section > ol > li + li { margin-top: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; margin: auto; color: var(--ink-secondary); font-size: 14px; line-height: 22px; text-align: center; }
/* A list beside a form: the Roles screen. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 48px; }
.panel { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-sheet); background: var(--surface-paper); }
.panel h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }

.avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-secondary); font-size: 12px; line-height: 16px; font-weight: 500; }
.avatar-lg { width: 44px; height: 44px; font-size: 16px; }

/* Tables are ledgers: quiet column labels, a hairline under every row, no box around them. */
.table-wrap { position: relative; overflow-x: auto; /* relative: keeps visually-hidden headers inside the scroller */ }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.table th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-default); color: var(--ink-tertiary); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.005em; text-align: left; white-space: nowrap; }
.table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line-default); vertical-align: middle; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody:first-child tr:first-child td { border-top: 1px solid var(--line-default); }
.table td.end { text-align: right; }
.table td.num { color: var(--ink-secondary); white-space: nowrap; }
.table a { font-weight: 500; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table .icon { color: var(--ink-tertiary); }
/* A folder heading inside a ledger: a band of paper. */
.table tr.group td { padding: 6px 12px; background: var(--surface-paper); color: var(--ink-secondary); font: 12px/18px var(--font-mono); }
.table tr.group ~ tr:not(.group) td:first-child { padding-left: 12px; }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.level { color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }

/* Rank ladder: what a role can read. Green is readable, the seal bar is not (the design's "Can read" segments). */
.ladder { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-default); }
.ladder li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-default); color: var(--ink-tertiary); font-size: 14px; line-height: 22px; }
.ladder li::before { content: ""; flex-shrink: 0; width: 26px; height: 10px; border-radius: 3px; background: var(--seal-bar); }
.ladder li.in { color: var(--ink-primary); }
.ladder li.in::before { background: var(--clear-line); }
.ladder strong { font: 12px/18px var(--font-mono); }
.ladder .state { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 500; }

/* Disclosure menus (<details>): work without a circuit. ponytail: they don't close on an outside click.
   Every one sits at the foot of its page, so the panel opens upwards. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; z-index: 10; bottom: calc(100% + 6px); left: 0; display: flex; flex-direction: column; min-width: 216px; padding: 4px; border: 1px solid var(--line-default); border-radius: var(--radius-control); background: var(--surface-sheet); box-shadow: var(--shadow-popover); }
.menu-panel a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-chip); color: var(--ink-primary); font-size: 14px; line-height: 22px; text-decoration: none; }
.menu-panel a:hover { background: var(--hover); }
.menu-label { padding: 6px 8px 4px; color: var(--ink-tertiary); font-size: 12px; line-height: 16px; }

/* Theme switch (Figma "v3/App/Theme switch"): three links, the current one on a white segment. */
.theme { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-control); background: var(--surface-sunken); }
.theme a { flex: 1; padding: 4px 12px; border-radius: var(--radius-chip); color: var(--ink-tertiary); font: 500 12px/16px var(--font-sans); letter-spacing: 0.005em; text-align: center; text-decoration: none; white-space: nowrap; }
.theme a:hover { color: var(--ink-primary); }
.theme a[aria-current] { background: var(--surface-sheet); color: var(--ink-primary); }
.sidebar .theme { display: flex; }

/* Sealed text: one bar per line it replaces. */
.seal { display: block; height: 14px; border-radius: 3px; background: var(--seal-bar); }
.seal.readable { background: var(--clear-line); }
/* What a role reads, one segment per role, lowest first (the design's "Can read"). */
.reach { display: inline-flex; gap: 4px; vertical-align: middle; }
.reach .seal { width: 26px; height: 10px; }

@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; flex-flow: row wrap; align-items: center; gap: 4px 12px; height: auto; padding: 8px 16px; overflow: visible; }
    .side-groups, .side-group, .side-foot { flex-flow: row wrap; align-items: center; overflow: visible; }
    .side-groups { flex: 1 1 100%; order: 1; gap: 4px 12px; }
    .side-foot { margin: 0 0 0 auto; }
    .sidebar .overline { display: none; }
    .sidebar .theme { display: inline-flex; }
    .sidebar .menu-panel { top: calc(100% + 6px); right: 0; bottom: auto; left: auto; }
    .main { margin: 0 8px 8px; }
    .topbar { padding: 10px 16px; }
    .content { padding: 24px 16px 40px; }
    .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Blazor */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--clear-fg); }
.invalid { outline: 1px solid var(--deny-fg); }
.validation-message { color: var(--deny-fg); }

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

/* A rendered doc: markup from the docs service, so these style elements, not classes (Figma "App / Doc viewer"). */
.doc-page { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.rendered-doc { color: var(--ink-primary); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.rendered-doc > :first-child { margin-top: 0; }
.rendered-doc h1, .rendered-doc h2, .rendered-doc h3, .rendered-doc h4 { margin: 28px 0 10px; font-weight: 600; }
.rendered-doc h1 { margin-bottom: 12px; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
.rendered-doc h2 { font-size: 16px; line-height: 24px; letter-spacing: -0.005em; }
.rendered-doc h3, .rendered-doc h4 { font-size: 15px; line-height: 24px; }
.rendered-doc p, .rendered-doc ul, .rendered-doc ol, .rendered-doc pre, .rendered-doc table, .rendered-doc blockquote { margin: 0 0 16px; }
.rendered-doc code { padding: 1px 5px; border-radius: 4px; background: var(--surface-sunken); }
.rendered-doc pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--radius-control); background: var(--surface-sunken); line-height: 21px; }
.rendered-doc pre code { padding: 0; background: none; }
.rendered-doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.rendered-doc th, .rendered-doc td { padding: 8px 16px 8px 0; border-bottom: 1px solid var(--line-default); text-align: left; }
.rendered-doc th { color: var(--ink-tertiary); font-size: 12px; line-height: 16px; font-weight: 500; }
.rendered-doc img { max-width: 100%; }
/* Restricted blocks arrive as a blockquote placeholder: the design's sealed block. A rule down the side, what it is
   sealed for, then one bar per line the reader isn't cleared for. ponytail: the service doesn't say how long the
   block is, so it is always two bars. */
.rendered-doc blockquote { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-strong); color: var(--ink-secondary); font-size: 12px; line-height: 16px; font-weight: 500; }
.rendered-doc blockquote > * { margin: 0; }
.rendered-doc blockquote::before, .rendered-doc blockquote::after { content: ""; order: 1; height: 14px; border-radius: 3px; background: var(--seal-bar); }
.rendered-doc blockquote::after { width: 62%; }
.rendered-doc .sdocs-secret button { display: none; } /* revealing a secret comes with DOCS-3 */