/* Noteful Studio shell and primitives. Every value is a token from tokens.css. */

/* What the pages took from Bootstrap's reboot, with its values, so nothing moved when it left. */
p, dl, ol, ul, pre { margin: 0 0 1rem; }
ol, ul { padding-left: 2rem; }
dd { margin: 0 0 .5rem; }
label { display: inline-block; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button:not(:disabled), [role="button"] { cursor: pointer; }
img, svg { vertical-align: middle; }
table { border-collapse: collapse; }
textarea { resize: vertical; }
[hidden] { display: none !important; }
/* The reboot also set a term bold; Studio's bold is semibold, as for b and strong. */
dt { font-weight: var(--weight-semibold); }

html, body, #app { height: 100%; }
b, strong { font-weight: var(--weight-semibold); }
body { overflow: hidden; } /* the shell scrolls inside its columns, never the document */

/* Blazor's error banner. Hidden until the runtime shows it. */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: var(--space-5) var(--space-8); background: var(--warning-bg); color: var(--warning-ink); border-top: 1px solid var(--warning-mark); box-shadow: var(--shadow-float); font: var(--type-body); }
#blazor-error-ui .reload { margin-left: var(--space-5); }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
.nf-shell { height: 100%; display: flex; flex-direction: column; }
.nf-body { flex: 1; display: flex; min-height: 0; }
.nf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface-ground); position: relative; overflow: clip; }
.nf-page { flex: 1; min-height: 0; overflow-y: auto; padding: var(--shell-gutter); display: flex; flex-direction: column; gap: var(--shell-gutter); }

/* Vertical fill: one region per page, marked nf-block--grow, reaches the foot of the window; every other region keeps
   its content height. A page whose content is taller than the window still scrolls. Grids and the calendar scroll
   inside and take exactly the height left, down to a floor at which they stay usable. */
.nf-block--grow { flex: 1 0 auto; }
.nf-page > .nf-empty, .nf-page > .nf-fault { flex: 1 0 auto; justify-content: center; }
.nf-page > .nf-grid.nf-block--grow, .nf-page > .nf-calendar.nf-block--grow { flex: 1 1 0; min-height: 320px; }
.nf-grid.nf-block--grow > .dxbl-grid { height: 100%; }
.nf-page--editor > .nf-workarea { flex: 1 0 auto; }
.nf-media__files { display: flex; flex-direction: column; gap: var(--shell-gutter); }

/* Icons: Material Symbols Rounded, 20px nominal, unfilled, currentColor. */
.material-symbols-rounded { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; font-size: 20px; line-height: 1; vertical-align: middle; user-select: none; }
/* Until the icon font has arrived, the script in the page head keeps nf-icons-loading on the document: an icon holds
   its square and shows nothing, never its name. */
.nf-icons-loading .material-symbols-rounded { visibility: hidden; }
:where(.nf-icons-loading .material-symbols-rounded) { width: 1em; overflow: hidden; }

/* ---- Top bar ---- */
.nf-topbar { position: relative; height: var(--shell-topbar-h); flex: 0 0 auto; background: var(--chrome-topbar); color: var(--text-on-chrome); display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); }
.nf-topbar__lockup { display: flex; align-items: center; gap: var(--space-5); }
.nf-topbar__logo { height: 18px; display: block; }
.nf-topbar__divider { width: 1px; height: 20px; background: var(--chrome-divider); }
.nf-topbar__name { font: var(--type-heading); color: var(--text-on-chrome-strong); letter-spacing: var(--tracking-wordmark); white-space: nowrap; }
.nf-topbar__env { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--btn-publish); color: var(--text-inverse); padding: 3px 6px; border-radius: var(--radius-sm); }
.nf-topbar__product { --state-layer: 255, 255, 255; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; cursor: pointer; background: rgba(var(--state-layer), .10); border: 1px solid var(--chrome-divider); border-radius: var(--radius-md); color: var(--text-on-chrome-strong); font: var(--type-ui-strong); }
.nf-topbar__product:hover { background: rgba(var(--state-layer), .16); }
.nf-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nf-topbar__user { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-on-chrome-strong); font: var(--type-ui-strong); cursor: pointer; padding: 0 4px; }
.nf-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--text-body); cursor: pointer; position: relative; transition: var(--transition-control); }
.nf-iconbtn:hover { background: var(--surface-hover); }
.nf-iconbtn--chrome { --state-layer: 255, 255, 255; color: var(--text-on-chrome); }
.nf-iconbtn.nf-iconbtn--chrome:hover { background: rgba(var(--state-layer), .12); color: var(--text-on-chrome-strong); }

/* ---- Side navigation ---- */
.nf-sidenav { width: var(--shell-sidebar-w); flex: 0 0 auto; background: var(--chrome-sidebar); display: flex; flex-direction: column; overflow: hidden; transition: width var(--duration-base) var(--ease-standard); }
.nf-sidenav--collapsed { width: var(--shell-sidebar-w-collapsed); }
.nf-sidenav__items { padding: var(--space-4) 0; flex: 1; overflow-y: auto; }
.nf-sidenav__row { display: flex; align-items: center; gap: var(--space-5); height: 40px; padding: 0 16px; cursor: pointer; color: var(--text-on-chrome); font: var(--type-body); white-space: nowrap; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); border: none; background: transparent; width: 100%; text-align: left; }
.nf-sidenav__row:hover { background: var(--chrome-hover); color: var(--text-on-chrome-strong); text-decoration: none; }
.nf-sidenav__row--active { background: var(--chrome-active); color: var(--text-on-chrome-strong); font-weight: var(--weight-semibold); }
.nf-sidenav--collapsed .nf-sidenav__row { padding: 0 18px; }
.nf-sidenav__row .material-symbols-rounded { flex: 0 0 20px; }
/* The row sets its line height to the font size; the label needs room for descenders, or its overflow clip cuts them. */
.nf-sidenav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.nf-sidenav__caption { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 2px; padding: 0 16px 0 18px; height: 26px; border: 0; background: transparent; cursor: pointer; font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-on-chrome-muted); transition: color var(--duration-fast) var(--ease-standard); }
.nf-sidenav__caption:hover { color: var(--text-on-chrome-strong); }
.nf-sidenav__caption .material-symbols-rounded { font-size: 18px; transition: transform var(--duration-base) var(--ease-standard); }
.nf-sidenav__caption--folded .material-symbols-rounded { transform: rotate(-90deg); }
.nf-sidenav__section { animation: nf-fade var(--duration-base) var(--ease-standard); }
.nf-sidenav--collapsed .nf-sidenav__section + .nf-sidenav__section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--chrome-divider); }
.nf-sidenav__footer { padding: var(--space-5); border-top: 1px solid var(--chrome-divider); font: var(--type-mono); color: var(--text-on-chrome); white-space: nowrap; overflow: hidden; }
.nf-sidenav__toggle { display: flex; align-items: center; gap: var(--space-5); height: 36px; padding: 0 18px; color: var(--text-on-chrome-muted); background: transparent; border: none; cursor: pointer; width: 100%; }
.nf-sidenav__toggle:hover { color: var(--text-on-chrome-strong); }

/* ---- Toolbar ---- */
.nf-toolbar { height: var(--shell-toolbar-h); flex: 0 0 auto; display: flex; align-items: center; margin: var(--shell-gutter) var(--shell-gutter) 0; padding: 0 var(--shell-gutter); }
.nf-toolbar__inner { width: 100%; height: 100%; min-width: 0; display: flex; align-items: center; gap: var(--space-4); }
/* The heading has one width on every page, 280 px, so the divider and the buttons after it stand in one place from page
   to page and while a page loads; a longer title or subtitle ends in an ellipsis and shows whole as its tooltip. It
   narrows only where the toolbar runs out of room (Messages at 1800, Audience and the message editor at 1440). */
.nf-toolbar__heading { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.nf-toolbar__titlerow { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nf-toolbar__titlerow > :not(.nf-toolbar__title) { flex: none; }
.nf-toolbar__title { min-width: 0; font: var(--type-heading); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The subtitle's line: its text ends in an ellipsis, a tag after it (a warning count) keeps its width and the line's height. */
.nf-toolbar__subrow { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nf-toolbar__tag { flex: none; height: 16px; margin: 0; padding: 0 6px; font: var(--type-note); }
.nf-toolbar__subtitle { min-width: 0; font: var(--type-note); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-toolbar__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); }
.nf-toolbar__back { flex: 0 0 auto; }
.nf-toolbar__sep { width: 1px; height: 24px; background: var(--border-default); margin: 0 var(--space-2); }
.nf-toolbar__sep--heading { flex: 0 0 auto; height: 32px; margin: 0 var(--space-3); }
.nf-toolbar__right { margin-left: var(--space-8); flex: 1 1 auto; justify-content: safe flex-end; align-self: stretch; display: flex; align-items: center; gap: var(--space-4); min-width: 0; padding-top: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nf-toolbar__right::-webkit-scrollbar { display: none; }

/* ---- Buttons (plain Razor where DevExpress adds nothing): flat, a fill at rest, one state layer for hover and press ---- */
.nf-btn {
  --btn-fill: var(--btn-secondary);
  --btn-ink: var(--btn-secondary-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-md); min-width: var(--control-h-md); padding: 0 14px;
  border: 0; border-radius: var(--radius-md);
  background: var(--btn-fill); color: var(--btn-ink);
  font: var(--type-ui-strong); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: var(--transition-control);
}
/* A leading glyph takes two pixels off the left padding. :where keeps the rule at the weight of one class, so the small
   size, the split button's parts and the Markdown bar's glyph only tools keep their own padding. */
.nf-btn:where(:has(> .material-symbols-rounded:first-child)) { padding-left: 12px; }
.nf-btn .material-symbols-rounded { font-size: 17px; }
.nf-btn:hover { background: linear-gradient(rgba(var(--state-layer), .08), rgba(var(--state-layer), .08)), var(--btn-fill); color: var(--btn-ink); text-decoration: none; }
.nf-btn:active, .nf-btn[aria-expanded="true"], .nf-btn[aria-pressed="true"] {
  background: linear-gradient(rgba(var(--state-layer), .14), rgba(var(--state-layer), .14)), var(--btn-fill); }
.nf-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-btn:disabled, .nf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: var(--btn-fill); }

.nf-btn--primary      { --btn-fill: var(--btn-primary);      --btn-ink: var(--text-inverse); --state-layer: 0, 0, 0; }
.nf-btn--publish      { --btn-fill: var(--btn-publish);      --btn-ink: var(--text-inverse); --state-layer: 0, 0, 0; }
.nf-btn--publish:focus-visible { box-shadow: var(--focus-ring-publish); }
.nf-btn--danger       { --btn-fill: var(--btn-danger);       --btn-ink: var(--btn-danger-ink); }
.nf-btn--danger-solid { --btn-fill: var(--btn-danger-solid); --btn-ink: var(--text-inverse); --state-layer: 0, 0, 0; }
/* The Assist button marks its on state with aria-expanded, since it opens a panel. */
.nf-btn--toggle[aria-expanded="true"], .nf-btn--toggle[aria-pressed="true"] { --btn-fill: var(--surface-selected); --btn-ink: var(--text-link); }
.nf-btn--sm { height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 10px; }
.nf-btn--lg { height: var(--control-h-lg); padding: 0 18px; }
/* A glyph only button is square, its name in its title; a count sits at its corner. */
.nf-btn--glyph { position: relative; width: var(--control-h-md); padding: 0; }
.nf-btn--glyph.nf-btn--sm { width: var(--control-h-sm); }

/* The split button: one shape whose two parts round their own outer corners. The types' menu lies inside it, so the
   shape cannot clip its content. */
.nf-splitbtn { position: relative; display: inline-flex; }
.nf-splitbtn__main  { padding: 0 12px 0 10px; border-radius: var(--radius-md) 0 0 var(--radius-md); }
/* The label over the type's name, left aligned inside the button's 32 px; the name a size smaller and lighter, white at 95 per
   cent on the fill, 4.5:1 on the primary blue, which full white holds at 4.85. Both lines are as high as their type, 2 px
   apart, so the text itself sits centred. */
.nf-splitbtn__label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.nf-splitbtn__type { font: var(--type-note-sm); line-height: 1; color: color-mix(in srgb, var(--btn-ink) 95%, var(--btn-fill)); }
.nf-splitbtn__caret { width: 28px; min-width: 28px; padding: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .32); }
.nf-splitbtn__caret:focus-visible { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .32), var(--focus-ring); }
.nf-splitbtn__caret .material-symbols-rounded { font-size: 18px; }

/* On chrome; a button in a menu that opens from the top bar stands on the menu's card. */
.nf-topbar .nf-btn:not(.nf-popover *) { --btn-fill: rgba(255, 255, 255, .10); --btn-ink: var(--text-on-chrome-strong); --state-layer: 255, 255, 255; }

/* ---- Segmented filter ---- */
.nf-seg { display: inline-flex; flex: 0 0 auto; height: var(--control-h-md); padding: 2px; border-radius: var(--radius-md); background: var(--surface-tint); }
.nf-seg__item { padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: var(--type-ui-strong); cursor: pointer; transition: var(--transition-control); }
.nf-seg__item:hover { background: linear-gradient(rgba(var(--state-layer), .08), rgba(var(--state-layer), .08)); color: var(--text-body); }
.nf-seg__item--active { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-block); }
.nf-seg__item--active:hover { background: linear-gradient(rgba(var(--state-layer), .08), rgba(var(--state-layer), .08)), var(--surface-card); color: var(--text-strong); }
.nf-seg--sm { height: var(--control-h-sm); }

/* ---- Search field ---- */
.nf-search { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-md); padding: 0 10px; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-muted); min-width: 200px; flex: 0 0 auto; }
.nf-search:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
/* In a toolbar the search gives way before any control is cut: it shrinks from its width to 160 px only when the row is short of room. */
.nf-toolbar__right .nf-search { flex: 0 1 208px; min-width: 160px; }
.nf-search input { border: none; outline: none; background: transparent; font: var(--type-body); color: var(--text-body); width: 100%; }
.nf-search .material-symbols-rounded { font-size: 18px; }
.nf-search input:focus-visible { box-shadow: none; }

/* ---- Status pill and tag ---- */
.nf-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; margin-block: 1px; padding: 0 7px; border-radius: var(--radius-sm); white-space: nowrap; font: var(--type-label); }
.nf-pill .material-symbols-rounded { font-size: 15px; }
.nf-pill--draft { color: var(--neutral-ink); background: var(--neutral-bg); }
.nf-pill--inreview, .nf-pill--warning { color: var(--warning-ink); background: var(--warning-bg); }
.nf-pill--scheduled { color: var(--scheduled-ink); background: var(--scheduled-bg); }
.nf-pill--published, .nf-pill--success { color: var(--success-ink); background: var(--success-bg); }
.nf-pill--archived { color: var(--neutral-ink); background: var(--neutral-bg); }
.nf-pill--studio { color: var(--studio-ink); background: var(--studio-bg); }
.nf-pill--silver { color: var(--neutral-ink); background: var(--neutral-bg); }
.nf-pill--danger { color: var(--danger-ink); background: var(--danger-bg); }
.nf-tag { display: inline-flex; align-items: center; height: 20px; margin-block: 1px; padding: 0 7px; border-radius: var(--radius-sm); font: var(--type-label); white-space: nowrap; }
.nf-tag--mono { font: var(--type-mono); }

/* Identifiers a reader compares character by character: versions, keys, hosts, storage ids, URLs. Grids set the size too. */
.nf-mono { font: var(--type-mono); }
.nf-tag--blue { color: var(--text-link); background: var(--surface-hover); }
/* A product the message does not reach whole: the filter glyph leads the key, and the tag keeps its optical width. */
.nf-tag--blue.is-limited { padding-left: 6px; gap: 3px; }
.nf-tag--blue.is-limited .material-symbols-rounded { font-size: 14px; }
.nf-tag--cyan { color: var(--info-ink); background: var(--info-bg); }
.nf-tag--neutral { color: var(--text-muted); background: var(--surface-tint); }
/* Release notes lines: the kind of change as a label. */
.nf-tag--new { color: var(--success-ink); background: var(--success-bg); }
.nf-tag--changed { color: var(--info-ink); background: var(--info-bg); }
.nf-tag--fixed { color: var(--scheduled-ink); background: var(--scheduled-bg); }

/* ---- Cards, metrics, callouts, empty state ---- */
.nf-card__body { padding: var(--space-6); }
.nf-card__title { font: var(--type-subheading); color: var(--text-strong); margin-bottom: var(--space-4); }
.nf-env { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-4) var(--space-6); }
.nf-env__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nf-env__label { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--shell-gutter); }
.nf-metric { padding: var(--space-6); }
.nf-metric__label { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nf-metric__value { font: var(--type-metric); font-variant-numeric: tabular-nums; color: var(--text-strong); margin-top: var(--space-3); }
.nf-metric__hint { font: var(--type-note); color: var(--text-subtle); margin-top: var(--space-2); }
.nf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-8); gap: var(--space-4); color: var(--text-muted); }
.nf-empty .material-symbols-rounded { font-size: 36px; color: var(--icon-subtle); }
.nf-empty__title { font: var(--type-heading); color: var(--text-strong); }
.nf-callout { display: flex; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); }
.nf-callout--info { background: var(--info-bg); }
.nf-callout__title { font: var(--type-subheading); color: var(--text-strong); }
.nf-callout__text { font: var(--type-body); color: var(--text-body); }

/* ---- DevExpress on the tokens. Fluent, registered in App.razor with ERIK blue as its accent, draws the controls; these
   rules give them Studio's type, the tones of BUTTONS.md and the fields and the grid of CONTROLS.md. Fluent declares its
   variables on each control's own element, so a rule sets them there with at least the theme's weight; the edit popup
   and every dropdown render at the end of the body, outside every nf- block. ---- */
/* Studio's font and focus colour for every control, its card as their ground, which Fluent's dark mode would make a
   neutral grey, and the accent before DevExpress's script sets it, so the first paint is not Fluent's own blue. */
:root { --dxds-font-family-sans-serif: var(--font-sans); --dxds-color-border-focus-default: var(--border-focus); --dxbl-accent-color: var(--btn-primary); --dxds-color-surface-neutral-default-rest: var(--surface-card); }

/* Type for DevExpress controls, on Studio's ramp. */
.nf-grid .dxbl-grid { --dxbl-grid-font-size: var(--text-13); --dxbl-grid-line-height: 1.4; font: var(--type-ui); }
.nf-grid .dxbl-grid-header-content, .nf-grid .dxbl-grid-header { font: var(--type-caps); letter-spacing: var(--tracking-caps); }
.nf-grid .dxbl-grid-footer-row td, .nf-grid .dxbl-grid-footer-row td * { font-weight: var(--weight-semibold); }
.nf-calendar__mini .dxbl-calendar { --dxbl-calendar-font-size: var(--text-12); --dxbl-calendar-content-day-week-number-font-size: var(--text-11); --dxbl-calendar-content-days-of-week-font-size: var(--text-11); }
.nf-calendar__mini .dxbl-calendar .dxbl-calendar-week-number, .nf-calendar__mini .dxbl-calendar .dxbl-calendar-days-of-week th { font-weight: var(--weight-regular); color: var(--text-subtle); }
.nf-scheduler .dxbl-scheduler { --dxbl-scheduler-font-size: var(--text-13); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt { font: var(--type-label); }

/* Buttons in the tones of BUTTONS.md: flat, a fill at rest and the state layer over it for hover and press. Without the
   border the medium size takes a pixel more padding above and below, so it stays 32 high. */
.dxbl-btn.dxbl-btn-primary { --nf-dx-fill: var(--btn-primary); --nf-dx-ink: var(--text-inverse); --state-layer: 0, 0, 0; }
.dxbl-btn.dxbl-btn-success { --nf-dx-fill: var(--btn-publish); --nf-dx-ink: var(--text-inverse); --state-layer: 0, 0, 0; }
.dxbl-btn.dxbl-btn-secondary, .dxbl-btn.dxbl-btn-light { --nf-dx-fill: var(--btn-secondary); --nf-dx-ink: var(--btn-secondary-ink); }
.dxbl-btn.dxbl-btn-danger { --nf-dx-fill: var(--btn-danger); --nf-dx-ink: var(--btn-danger-ink); }
.dxbl-btn:is(.dxbl-btn-primary, .dxbl-btn-success, .dxbl-btn-secondary, .dxbl-btn-light, .dxbl-btn-danger) {
  --dxbl-btn-bg: var(--nf-dx-fill); --dxbl-btn-color: var(--nf-dx-ink);
  --dxbl-btn-hover-bg: color-mix(in srgb, rgb(var(--state-layer)) 8%, var(--nf-dx-fill)); --dxbl-btn-hover-color: var(--nf-dx-ink);
  --dxbl-btn-active-bg: color-mix(in srgb, rgb(var(--state-layer)) 14%, var(--nf-dx-fill)); --dxbl-btn-active-color: var(--nf-dx-ink);
  --dxbl-btn-border-width: 0; --dxbl-btn-border-radius: var(--radius-md);
  --dxbl-btn-font-size-m: var(--text-13); --dxbl-btn-padding-x-m: 14px; --dxbl-btn-padding-y-m: 6px;
}
.dxbl-btn:is(.dxbl-btn-primary, .dxbl-btn-success, .dxbl-btn-secondary, .dxbl-btn-light, .dxbl-btn-danger):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dxbl-btn.dxbl-btn-success:focus-visible { box-shadow: var(--focus-ring-publish); }
.dxbl-btn:is(.dxbl-btn-primary, .dxbl-btn-success, .dxbl-btn-secondary, .dxbl-btn-light, .dxbl-btn-danger):is(.dxbl-disabled, :disabled) {
  --dxbl-btn-bg: var(--nf-dx-fill); --dxbl-btn-color: var(--nf-dx-ink); --dxbl-btn-hover-bg: var(--nf-dx-fill); --dxbl-btn-active-bg: var(--nf-dx-fill);
  opacity: .45; cursor: not-allowed;
}

/* Fields as CONTROLS.md writes them: --border-field on every side, on focus --border-focus with the focus ring. Fluent's
   line under a focused field is set to nothing, and Studio's own ring stays off the input inside. A disabled editor is
   locked: the tint and the muted ink, as .nf-input:disabled. */
.dxbl-text-edit {
  --dxbl-text-edit-bg: var(--surface-card); --dxbl-text-edit-color: var(--text-body); --dxbl-text-edit-placeholder-color: var(--text-disabled);
  --dxbl-text-edit-border-color: var(--border-field); --dxbl-text-edit-border-hovered-color: var(--border-field); --dxbl-text-edit-border-active-color: var(--border-focus);
  --dxbl-text-edit-underline-color: var(--border-field); --dxbl-text-edit-underline-hovered-color: var(--border-field);
  --dxbl-text-edit-underline-focused-color: var(--border-focus); --dxbl-text-edit-underline-active-color: var(--border-focus); --dxbl-text-edit-underline-focused-height: 0px;
  --dxbl-text-edit-validation-valid-color: var(--border-field); --dxbl-text-edit-validation-invalid-color: var(--danger-mark);
  --dxbl-text-edit-disabled-bg: var(--surface-tint); --dxbl-text-edit-disabled-color: var(--text-muted); --dxbl-text-edit-disabled-border-color: var(--border-field);
}
.dxbl-text-edit:is(.dxbl-focused, :focus-within), .dxbl-text-edit.valid.modified:is(.dxbl-focused, :focus-within) { --dxbl-text-edit-border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.dxbl-text-edit .dxbl-text-edit-input:focus-visible { box-shadow: none; }

/* The grid as CONTROLS.md writes it: rows of 34, the head in caps on --surface-card-alt, hairlines in --border-subtle. The
   body's cells have two pixels less padding than Fluent's, so a row with a pill stays 34 as well. */
.nf-grid .dxbl-grid {
  --dxbl-grid-bg: var(--surface-card); --dxbl-grid-color: var(--text-body); --dxbl-grid-border-color: var(--border-subtle);
  --dxbl-grid-header-bg: var(--surface-card-alt); --dxbl-grid-header-color: var(--text-muted);
  --dxbl-grid-hover-bg: var(--surface-hover); --dxbl-grid-hover-color: var(--text-body);
  --dxbl-grid-selection-bg: var(--surface-selected); --dxbl-grid-selection-color: var(--text-body); --dxbl-grid-selected-hover-bg: var(--surface-selected);
  border: 0; border-radius: 0; box-shadow: none;
}
.nf-grid .dxbl-grid-header-content, .nf-grid .dxbl-grid-header { text-transform: uppercase; color: var(--text-muted); }
.nf-grid .dxbl-grid-table > tbody { --dxbl-grid-text-cell-padding-y: 4px; }
.nf-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-empty-row) > td { height: 34px; }
.nf-grid .nf-num { font-variant-numeric: tabular-nums; }

/* ---- Drawer, dialog, scrim ---- */
.nf-scrim { position: absolute; inset: 0; background: var(--surface-overlay); z-index: 20; animation: nf-fade var(--duration-base) var(--ease-standard); }
.nf-scrim--dialog { z-index: 30; }
/* A dialog opened over another lies above it, scrim and box: every Dialog sits in the page's own markup, so the later
   one is a later sibling. */
.nf-dialog ~ .nf-scrim--dialog { z-index: 32; }
.nf-dialog ~ .nf-dialog { z-index: 33; }
@keyframes nf-fade { from { opacity: 0; } to { opacity: 1; } }
.nf-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--surface-card); box-shadow: var(--shadow-drawer); border-radius: var(--radius-xl) 0 0 var(--radius-xl); display: flex; flex-direction: column; z-index: 21; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); }
.nf-drawer--open { transform: none; }
.nf-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.nf-drawer__title { font: var(--type-heading); color: var(--text-strong); }
.nf-drawer__subtitle { font: var(--type-note); color: var(--text-muted); margin-top: 2px; }
.nf-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.nf-drawer__foot { display: flex; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); }
.nf-drawer__foot .nf-btn { flex: 1; justify-content: center; }
.nf-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); z-index: 31; max-width: calc(100% - 32px); }
.nf-dialog__head { padding: var(--space-6) var(--space-6) var(--space-3); }
.nf-dialog__title { font: var(--type-heading); color: var(--text-strong); }
.nf-dialog__subtitle { font: var(--type-note); color: var(--text-muted); margin-top: 2px; }
.nf-dialog__body { padding: 0 var(--space-6) var(--space-6); font: var(--type-body); color: var(--text-body); }
.nf-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ---- Form fields ---- */
.nf-field { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-field__label { font: var(--type-label); color: var(--text-muted); }
.nf-field__hint { font: var(--type-note); color: var(--text-subtle); }
.nf-input, .nf-select, .nf-textarea { width: 100%; min-width: 0; height: var(--control-h-md); padding: 0 10px; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); font: var(--type-body); transition: var(--transition-control); }
.nf-textarea { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; }
.nf-input:focus, .nf-select:focus, .nf-textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
/* A locked box reads as locked, in the ground and the text of a disabled DevExpress editor. */
.nf-input:disabled { background: var(--surface-tint); color: var(--text-muted); }
.nf-input--mono { font: var(--type-mono); }
/* The metadata tab: what the type fixed, the word that marks a required field, and a note closing a section. */
.nf-typeline { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); font: var(--type-note); color: var(--text-subtle); }
.nf-typeline b { font-weight: var(--weight-semibold); color: var(--text-body); }
/* Type and presentation: a blue chip with its glyph and a caret, whose menu lies over what is below it. A name longer
   than its column ends in an ellipsis on the chip and reads in full in the menu. */
.nf-chipmenu { position: relative; display: inline-flex; align-self: flex-start; max-width: 100%; }
.nf-chipmenu__chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 4px 0 8px; border: 1px solid var(--surface-selected); border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--text-link); font: var(--weight-semibold) var(--text-13)/1 var(--font-sans); cursor: pointer; }
.nf-chipmenu__chip .material-symbols-rounded { flex: none; font-size: 16px; color: var(--text-link); }
.nf-chipmenu__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-chipmenu__chip .nf-chipmenu__caret { font-size: 18px; }
.nf-chipmenu__chip:hover { border-color: var(--border-focus); }
.nf-chipmenu__chip[aria-expanded="true"] { box-shadow: var(--focus-ring); }
.nf-chipmenu__chip:disabled { padding-right: 8px; border-color: var(--border-subtle); background: var(--surface-tint); color: var(--text-muted); cursor: default; }
.nf-chipmenu__chip:disabled .material-symbols-rounded { color: var(--text-subtle); }
.nf-chipmenu__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 61; width: 190px; display: flex; flex-direction: column; padding: 4px 0; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-float); }
/* The types' menu takes the width of its longest name; the menu of a chip in the right column opens to the left. */
.nf-chipmenu__menu--wide { width: max-content; min-width: 190px; }
.nf-chipmenu__menu--end { left: auto; right: 0; }
.nf-chipmenu__item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; background: transparent; color: var(--text-body); font: var(--weight-regular) var(--text-14)/1 var(--font-sans); text-align: left; cursor: pointer; }
.nf-chipmenu__item:hover, .nf-chipmenu__item:focus-visible { background: var(--surface-tint); outline: none; }
.nf-chipmenu__item .material-symbols-rounded { font-size: 18px; color: var(--text-subtle); }
.nf-chipmenu__label { flex: 1 1 auto; }
.nf-chipmenu__item .nf-chipmenu__check { font-size: 16px; color: var(--text-link); }
.nf-chipmenu__item--on, .nf-chipmenu__item--on:hover { background: var(--surface-selected); color: var(--text-link); font-weight: var(--weight-semibold); }
.nf-chipmenu__item--on .material-symbols-rounded { color: var(--text-link); }
/* New message on the Messages page: a split button, the main part with the glyph of the last type and the caret with the
   menu of the types. Each part has its own hover and focus, and neither lifts, so the two stay one shape. The menu lies 36 px
   below the parts' top over the grid, a name and a hint line per type, none checked. */
.nf-chipmenu__menu--types { top: 36px; width: 288px; }
.nf-chipmenu__menu--types .nf-chipmenu__item { align-items: flex-start; gap: var(--space-5); padding: 7px 12px; }
.nf-chipmenu__menu--types .nf-chipmenu__item:hover, .nf-chipmenu__menu--types .nf-chipmenu__item:focus { background: var(--surface-hover); outline: none; box-shadow: none; }
.nf-chipmenu__menu--types .nf-chipmenu__item .material-symbols-rounded { margin-top: 1px; color: var(--icon-subtle); }
.nf-chipmenu__menu--types .nf-chipmenu__item:focus .material-symbols-rounded { color: var(--text-link); }
.nf-chipmenu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nf-chipmenu__name { font: var(--type-ui); font-weight: var(--weight-medium); color: var(--text-body); }
.nf-chipmenu__hint { font: var(--type-note); color: var(--text-subtle); }
/* Priority: four steps over the section's width, the chosen one filled. */
.nf-prioseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.nf-prioseg .nf-seg__item { padding: 0; color: var(--text-body); font: var(--weight-regular) var(--text-13)/1 var(--font-sans); }
.nf-prioseg .nf-seg__item--active, .nf-prioseg .nf-seg__item--active:hover { background: var(--btn-primary); color: var(--text-inverse); font-weight: var(--weight-semibold); }
.nf-prioseg .nf-seg__item:disabled { cursor: default; color: var(--text-subtle); }
.nf-prioseg .nf-seg__item--active:disabled { background: var(--surface-card); color: var(--text-muted); }
.nf-fieldnote { display: flex; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font: var(--type-note); color: var(--text-subtle); }
.nf-fieldnote .material-symbols-rounded { flex: 0 0 auto; font-size: 15px; color: var(--icon-subtle); }
/* A list of boxes grouped under a heading, as the pickers show products with their installations and categories with their entries. */
.nf-picklist { box-sizing: border-box; overflow-y: auto; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); }
.nf-picklist__group { display: flex; align-items: center; gap: var(--space-4); padding: 7px 10px; background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); font: var(--type-ui-strong); color: var(--text-body); position: sticky; top: 0; cursor: pointer; }
.nf-picklist__item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-4); padding: 6px 10px 6px 24px; border-bottom: 1px solid var(--border-subtle); font: var(--type-ui); color: var(--text-body); cursor: pointer; }
/* All products has a group row's height and scrolls away with the list; the group rows keep sticking. */
.nf-picklist__all { position: static; }
.nf-picklist__section { padding: 7px 10px; background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nf-picklist__group span, .nf-picklist__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-picklist__filter { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.nf-picklist__filter .nf-search { display: flex; min-width: 0; }
.nf-picklist input { accent-color: var(--btn-primary); }
/* Recipients: a chip per id, four rows before the field scrolls, the count and Clear all on the label's own line. */
.nf-field__label--split { display: flex; align-items: baseline; gap: var(--space-3); }
.nf-chips { box-sizing: border-box; min-height: var(--control-h-md); max-height: 108px; overflow-y: auto; padding: 5px 6px; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-3); }
.nf-chips:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.nf-chips__input { flex: 1 1 96px; min-width: 96px; height: 20px; border: 0; outline: 0; background: transparent; font: var(--type-ui); }
.nf-chip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 3px 0 6px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--text-body); font: var(--type-ui); }
.nf-chip--id { font: var(--type-mono); }
.nf-chip--cat { background: var(--surface-hover); color: var(--text-link); }
/* A product reached whole: every installation of it, including ones added later. */
.nf-chip--product { background: var(--surface-hover); color: var(--text-link); font-weight: var(--weight-medium); }
.nf-chip--product .nf-chip__x { color: color-mix(in srgb, var(--text-link) 55%, var(--surface-hover)); }
/* An installation tag: every installation carrying it, across products, including ones tagged later. */
.nf-chip--tag { background: var(--studio-bg); color: var(--studio-ink); }
.nf-chip--tag .nf-chip__x { color: color-mix(in srgb, var(--studio-ink) 55%, var(--studio-bg)); }
.nf-chip__x { font-size: 14px; color: var(--icon-subtle); cursor: pointer; }
.nf-chips__count { margin-left: auto; display: flex; align-items: baseline; gap: var(--space-4); white-space: nowrap; font-weight: var(--weight-regular); color: var(--text-subtle); }
.nf-chip__icon { font-size: 13px; }
.nf-chips__pick { align-self: flex-start; }
.nf-popover.nf-popover--picker { position: fixed; top: 0; left: 0; right: auto; min-width: 0; max-width: none; padding: 0; display: flex; flex-direction: column; visibility: hidden; transform-origin: top left; }
.nf-popover.nf-popover--picker::before { display: none; }
.nf-popover.nf-popover--picker.nf-popover--placed { visibility: visible; }
.nf-picker__list { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; }
/* The installations picker's list: eight 28 px rows, then it scrolls. */
.nf-picker__list--capped { max-height: 224px; }
.nf-picklist .nf-picker__aside { flex: 0 0 auto; margin-left: auto; overflow: visible; font: var(--type-note); color: var(--text-subtle); }
.nf-picklist .nf-picker__id { font: var(--type-mono); }
.nf-picker__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); font: var(--type-note); color: var(--text-subtle); }
/* Room for two lines whatever it says, so the foot keeps its height when the selection empties or turns into all products. */
.nf-picker__tally { display: flex; align-items: center; min-width: 0; min-height: 2lh; }
/* The marker a message carries once it names recipients, in the chip row and in the list. */
.nf-pill--limited { background: var(--surface-tint); color: var(--text-body); }
.nf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.nf-row > * { min-width: 0; }
/* Type and presentation side by side, the type's names being longer; only the presentation's label holds a help button,
   so the chips line up at the foot. */
.nf-row--chips { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
.nf-row--foot { align-items: end; }
.nf-check { display: flex; align-items: flex-start; gap: var(--space-4); font: var(--type-body); color: var(--text-body); cursor: pointer; }
.nf-check input { margin-top: 3px; accent-color: var(--btn-primary); }
.nf-check--publish input { accent-color: var(--btn-publish); }
.nf-check__desc { font: var(--type-note); color: var(--text-subtle); }
.nf-check--line { align-items: center; }
.nf-check--line input { margin-top: 0; }
.nf-check--line .nf-hint { margin: -4px 0; }
/* A check that does not apply keeps its row, so the fields below stay where they are. */
.nf-check--reserved { visibility: hidden; }
.nf-error { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-ink); border: 1px solid color-mix(in srgb, var(--danger-ink) 22%, transparent); font: var(--type-body); }

/* ---- Note editor ---- */
.nf-editor { width: 100%; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--shell-gutter); }
.nf-page--editor { padding: 0; }
.nf-workarea { display: flex; align-items: stretch; gap: var(--shell-gutter); padding: var(--shell-gutter); }
.nf-editor__head { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); }
/* The source takes what the inspector and the preview leave, 55 to the preview's 45; nothing caps it. */
.nf-workarea > .nf-editor { flex: 55 1 0; min-width: 0; padding: 0; }
.nf-panelbody { display: flex; flex-direction: column; gap: var(--space-6); }
.nf-group { display: flex; flex-direction: column; gap: var(--space-6); }
.nf-group__title { margin: 0; font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
/* The chip row is as high as a status pill while the message is still loading, so the title below it stays put. */
.nf-editor__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; }
.nf-editor__saved { margin-left: auto; font: var(--type-mono); color: var(--text-subtle); }
.nf-editor__relation { display: inline-flex; align-items: center; gap: 4px; font: var(--type-note); color: var(--text-link); text-decoration: none; }
.nf-editor__relation .material-symbols-rounded { font-size: 16px; }
.nf-editor__relation:hover { text-decoration: underline; }
/* Revision list: one grid for the whole list and every row a subgrid of it, so each column lines up in every row and a
   picked row's border moves nothing; the outer columns carry the 12 px side padding. The list scrolls, the strip above
   it and the day headers stay. */
.nf-rev { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nf-drawer__body:has(> .nf-rev) { padding: 0; gap: 0; }
.nf-rev__head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.nf-rev__count { font: var(--type-note); font-variant-numeric: tabular-nums; color: var(--text-subtle); white-space: nowrap; }
.nf-rev__filter { margin-left: auto; }
.nf-rev__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 36px; column-gap: 10px; align-content: start; }
.nf-rev__day, .nf-rev__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.nf-rev__dayhead { grid-column: 1 / -1; position: sticky; top: 0; z-index: 1; padding: 7px 12px 5px; background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-rev__row { align-items: start; padding-block: 9px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.nf-rev__row:hover { background: var(--surface-hover); }
.nf-rev__row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.nf-rev__row--picked, .nf-rev__row--picked:hover { row-gap: 9px; padding-bottom: 10px; border-left: 2px solid var(--border-focus); background: var(--surface-selected); }
.nf-rev__num { font: var(--type-note); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-subtle); }
.nf-rev__row--current .nf-rev__num, .nf-rev__row--picked .nf-rev__num { color: var(--text-link); }
.nf-rev__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nf-rev__chips { display: flex; align-items: center; gap: 6px; }
.nf-rev__kind { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--text-body); font: var(--type-note-sm); }
.nf-rev__kind--text { background: var(--surface-hover); color: var(--text-link); }
.nf-rev__kind--current { background: var(--studio-bg); color: var(--studio-ink); font-weight: var(--weight-semibold); }
.nf-rev__lang { font: var(--type-caps); letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.nf-rev__author { font: var(--type-ui); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-rev__note { display: inline-flex; align-items: center; gap: 4px; font: var(--type-note); color: var(--text-subtle); }
.nf-rev__note .material-symbols-rounded { font-size: 13px; }
.nf-rev__time { font: var(--type-note); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--text-subtle); }
.nf-rev__restore { justify-self: start; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--icon-subtle); cursor: pointer; }
.nf-rev__restore .material-symbols-rounded { font-size: 17px; }
.nf-rev__restore:hover, .nf-rev__restore:focus-visible { color: var(--text-body); }
.nf-rev__restore:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 0; }
.nf-rev__restore:disabled, .nf-rev__restore:disabled:hover { opacity: .45; cursor: default; color: var(--icon-subtle); }
.nf-rev__detail { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 8px; padding-right: 12px; cursor: default; }
.nf-rev__changes { display: flex; flex-wrap: wrap; gap: 5px; }
.nf-rev__change { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--surface-selected); background: var(--surface-card); font: var(--type-note-sm); color: var(--text-body); white-space: nowrap; }
.nf-rev__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-rev__none { padding: 12px; font: var(--type-note); color: var(--text-subtle); }
.nf-rev__diff { flex: 0 0 auto; max-height: 45vh; overflow-y: auto; padding: 12px; border-top: 1px solid var(--border-default); }
.nf-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--space-3); font: var(--type-note); color: var(--text-body); }
.nf-diff .nf-field__label { grid-column: 1 / -1; margin-top: var(--space-2); }
.nf-diff div div { min-height: 1.4em; white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-diff__line--changed { background: var(--danger-bg); }
.nf-relation { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--text-subtle); text-decoration: none; }
.nf-relation .material-symbols-rounded { font-size: 16px; }
.nf-relation:hover { color: var(--text-link); }
.nf-count { display: block; text-align: right; font: var(--type-note); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.nf-field__hint .nf-count { display: inline; float: right; }
.nf-count.nf-over, .nf-mdbox__hint.nf-over { color: var(--danger-ink); }
.nf-editor__title.nf-over, .nf-textarea.nf-over, .nf-input.nf-over, .nf-mdbox__text.nf-over { border-color: var(--danger-mark); color: var(--danger-ink); }
.nf-mdbox { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-block); overflow: hidden; display: flex; flex-direction: column; }
.nf-mdbox__bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card-alt); flex-wrap: wrap; }
.nf-mdbox__hint { margin-left: auto; font: var(--type-note); font-variant-numeric: tabular-nums; color: var(--text-subtle); padding: 0 6px; }
/* The body's box is a size container: where the source column is narrow, Insert media and Assist show their glyphs only,
   their names as tooltips, so the bar keeps its line with the count. */
.nf-mdbox { container-type: inline-size; }
@container (max-width: 760px) {
    .nf-mdbox__tool { gap: 0; justify-content: center; font-size: 0; width: var(--control-h-sm); padding: 0; }
}
.nf-mdbox__text { width: 100%; flex: 1 1 auto; min-height: 240px; border: none; outline: none; resize: none; padding: var(--space-6); font: var(--type-mono-body); color: var(--text-body); background: transparent; display: block; }
/* Release notes: Form or Markdown in the bar, and a note under it that keeps its line while it has nothing to say. */
.nf-mdbox__source { height: 28px; }
.nf-mdbox__source .nf-seg__item { padding: 0 9px; font: var(--type-label); }
.nf-mdbox__note { margin: 0; padding: 4px var(--space-6); font: var(--type-note); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.nf-mdbox__note--reserved { visibility: hidden; }
.nf-mdbox__reserved { visibility: hidden; }
/* What a language was translated from: one line under the bar on every language tab, so nothing moves when it shows. */
.nf-mdbox__translated { margin: 0; height: 26px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 4px var(--space-6); font: var(--type-note); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; overflow: hidden; }
.nf-mdbox__translated--reserved { visibility: hidden; }
.nf-mdbox__translated .material-symbols-rounded { font-size: 15px; line-height: 1; color: var(--icon-subtle); }
.nf-mdbox__translated .nf-mdbox__stale { color: var(--warning-ink); }
.nf-mdbox__again { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--text-link); font: var(--weight-medium) var(--text-12)/1 var(--font-sans); cursor: pointer; }
.nf-mdbox__again:hover { text-decoration: underline; }
.nf-mdbox__again:disabled { color: var(--text-disabled); cursor: default; text-decoration: none; }
/* The form takes the text box's place and floor; a text grows with its lines. */
.nf-relform { flex: 1 1 auto; min-height: 240px; padding: var(--space-6); display: flex; flex-direction: column; gap: 8px; }
.nf-relform__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.nf-relform__text { field-sizing: content; resize: none; }
.nf-relform__tools { display: inline-flex; gap: 2px; }
.nf-relform__add { align-self: flex-start; }
.nf-preview .nf-release__text, .nf-previewcol__body .nf-release__text { white-space: pre-line; }
.nf-preview { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-block); overflow: hidden; }
.nf-preview__body { flex: 1 1 auto; padding: var(--space-8); }
.nf-preview__kicker { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--studio-ink); }
.nf-preview h2, .nf-previewcol__body h2 { font: var(--type-title); margin: 8px 0 12px; }
/* Below 1920 the preview replaces the text in the source column; the Markdown box stays in the page, hidden. */
.nf-mdbox--previewing { display: none; }
.nf-preview__lead { font: var(--type-body); color: var(--text-muted); margin-bottom: var(--space-5); }
.nf-prose { font: var(--type-body); color: var(--text-body); }
.nf-prose h1, .nf-prose h2, .nf-prose h3 { margin: var(--space-6) 0 var(--space-3); }
.nf-prose h2 { font: var(--type-heading); } .nf-prose h3 { font: var(--type-subheading); }
.nf-prose p { margin: 0 0 var(--space-4); } .nf-prose ul, .nf-prose ol { padding-left: 20px; margin: 0 0 var(--space-4); }
.nf-prose code { font: var(--type-mono); background: var(--surface-tint); padding: 1px 4px; border-radius: var(--radius-xs); }
.nf-prose pre { background: var(--surface-tint); padding: var(--space-5); border-radius: var(--radius-md); overflow: auto; }
.nf-prose table { border-collapse: collapse; } .nf-prose td, .nf-prose th { border: 1px solid var(--border-default); padding: 4px 8px; }
.nf-prose img { max-width: 100%; }

/* ---- System status and page faults ---- */
.nf-status { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; height: 28px; border-radius: var(--radius-md); color: var(--text-on-chrome); font: var(--type-label); cursor: default; }
.nf-fault { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-12) var(--space-8); color: var(--text-muted); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-block); }
.nf-fault .material-symbols-rounded { font-size: 40px; color: var(--danger-mark); }
.nf-fault__title { font: var(--type-heading); color: var(--text-strong); }
.nf-fault__text { font: var(--type-body); max-width: 520px; }
.nf-errorpage__title { color: var(--danger-ink); }


/* ---- Media library ---- */
.nf-media__grid { flex: 0 0 auto; align-items: start; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-5); }
.nf-media__card { display: flex; flex-direction: column; text-align: left; padding: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-block); cursor: pointer; overflow: hidden; transition: var(--transition-control); }
.nf-media__card:hover { border-color: var(--border-field); box-shadow: var(--shadow-float); }
.nf-media__card--active { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.nf-media__thumb { height: 120px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--surface-card-alt) 0 10px, var(--surface-tint) 10px 20px); color: var(--icon-subtle); overflow: hidden; }
.nf-media__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-media__thumb .material-symbols-rounded { font-size: 36px; }
.nf-media__name { padding: 8px 10px 0; font: var(--type-subheading); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-media__meta { padding: 2px 10px 10px; font: var(--type-note); color: var(--text-subtle); }
.nf-media__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font: var(--type-ui); }
.nf-media__facts dt { color: var(--text-muted); }
.nf-media__facts dd { margin: 0; color: var(--text-body); word-break: break-all; }
.nf-picker { display: flex; flex-direction: column; gap: var(--space-3); }

/* Status popover in the top bar */
.nf-status-wrap { position: relative; display: inline-flex; }
button.nf-status { border: 0; background: transparent; cursor: pointer; }
.nf-topbar button.nf-status { height: 20px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); font: var(--type-label); color: var(--neutral-ink); background: var(--neutral-bg); }
.nf-topbar button.nf-status--ok { color: var(--success-ink); background: var(--success-bg); border-color: color-mix(in srgb, var(--success-ink) 25%, transparent); }
.nf-topbar button.nf-status--warn { color: var(--warning-ink); background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning-ink) 25%, transparent); }
.nf-topbar button.nf-status--bad { color: var(--danger-ink); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger-ink) 25%, transparent); }
.nf-topbar button.nf-status:hover { filter: brightness(.96); }
.nf-popover__scrim { position: fixed; inset: 0; z-index: 60; }
.nf-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 61; min-width: 340px; max-width: 460px; background: var(--surface-card); color: var(--text-body); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 10px 12px; text-align: left; }
.nf-popover::before { content: ""; position: absolute; top: -6px; right: 14px; width: 10px; height: 10px; background: var(--surface-card); transform: rotate(45deg); }
/* Status panel: a light blue band with the verdict, a row per group of checks with its last ten results, a footer with the last check. */
.nf-status-panel { width: 340px; max-width: calc(100vw - 24px); min-width: 0; padding: 0; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-float); }
.nf-status-panel::before { display: none; }
.nf-status-panel__head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface-hover); border-bottom: 1px solid var(--surface-selected); }
.nf-status-panel__live { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--icon-subtle); }
.nf-status-panel__live--ok { background: var(--success-mark); animation: nf-status-pulse 2.4s ease-out infinite; }
.nf-status-panel__live--warn { background: var(--warning-mark); animation: nf-status-pulse-warn 2.4s ease-out infinite; }
.nf-status-panel__live--bad { background: var(--danger-mark); animation: nf-status-pulse-bad 2.4s ease-out infinite; }
@keyframes nf-status-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-mark) 50%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--success-mark) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-mark) 0%, transparent); } }
@keyframes nf-status-pulse-warn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-mark) 50%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning-mark) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-mark) 0%, transparent); } }
@keyframes nf-status-pulse-bad { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-mark) 50%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger-mark) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-mark) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .nf-status-panel__live { animation: none; } }
.nf-status-panel__verdict { flex: 1; min-width: 0; }
.nf-status-panel__headline { font: var(--weight-semibold) var(--text-14)/1.2 var(--font-sans); color: var(--text-strong); }
.nf-status-panel__sub { margin-top: 2px; font: var(--weight-regular) var(--text-11)/1.35 var(--font-sans); color: var(--text-subtle); }
.nf-status-panel__refresh { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--surface-selected); background: var(--surface-card); color: var(--text-link); cursor: pointer; }
.nf-status-panel__refresh:hover { background: var(--surface-selected); }
.nf-status-panel__refresh:disabled { cursor: default; opacity: .75; }
.nf-status-panel__refresh .material-symbols-rounded { font-size: 16px; }
.nf-status-panel__refresh .nf-spinner { width: 14px; height: 14px; border-color: var(--surface-selected); border-top-color: var(--text-link); }
.nf-status-panel__body { padding: 4px 13px 6px; }

/* A row: the tone bar, the name with its caption, the sparkline, the metric; the media store has the provider in place of the last two. */
.nf-status-panel__row { display: grid; grid-template-columns: 3px 1fr 58px 44px; align-items: center; column-gap: 9px; row-gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.nf-status-panel__row:last-child { border-bottom: 0; }
.nf-status-panel__row--info, .nf-status-panel__row--off { grid-template-columns: 3px 1fr auto; }
.nf-status-panel__edge { height: 22px; border-radius: 2px; background: var(--icon-subtle); }
.nf-status-panel__row--ok .nf-status-panel__edge { background: var(--success-mark); }
.nf-status-panel__row--warn .nf-status-panel__edge { background: var(--warning-mark); }
.nf-status-panel__row--bad .nf-status-panel__edge { background: var(--danger-mark); }
.nf-status-panel__row--info .nf-status-panel__edge { background: var(--studio-ink); }
.nf-status-panel__main { min-width: 0; display: flex; flex-direction: column; }
.nf-status-panel__name { font: var(--weight-semibold) var(--text-13)/1.3 var(--font-sans); color: var(--text-strong); }
.nf-status-panel__line { font: var(--weight-regular) var(--text-11)/1.3 var(--font-sans); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-status-panel__row--warn .nf-status-panel__line--fail { color: var(--warning-ink); }
.nf-status-panel__row--bad .nf-status-panel__line--fail { color: var(--danger-ink); }
.nf-status-panel__checks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; font: var(--weight-regular) var(--text-11)/1.3 var(--font-sans); color: var(--text-subtle); }
.nf-status-panel__check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nf-status-panel__check:not(:last-child)::after { content: "·"; margin: 0 1px 0 5px; }
.nf-status-panel__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--icon-subtle); }
.nf-status-panel__dot--warn { background: var(--warning-mark); }
.nf-status-panel__dot--bad { background: var(--danger-mark); }
.nf-status-panel__spark { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.nf-status-panel__spark-bar { flex: 1; border-radius: 1px; }
.nf-status-panel__spark-bar--past { background: color-mix(in srgb, var(--success-mark) 35%, transparent); }
.nf-status-panel__spark-bar--now { background: var(--success-mark); }
.nf-status-panel__spark-bar--warn { background: var(--warning-mark); }
.nf-status-panel__spark-bar--bad { background: var(--danger-mark); }
.nf-status-panel__spark-bar--empty { background: var(--surface-tint); }
.nf-status-panel__metric { justify-self: end; text-align: right; font: var(--weight-medium) var(--text-12)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.nf-status-panel__metric--ok { color: var(--success-ink); }
.nf-status-panel__metric--warn { color: var(--warning-ink); }
.nf-status-panel__metric--bad { color: var(--danger-ink); }
/* A row of the company's setup that is not the company's to check: the silver bar, and its state in silver on the right. */
.nf-status-panel__state { padding: 4px 7px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--surface-tint); color: var(--text-muted); font: var(--weight-medium) var(--text-11)/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap; }
.nf-status-panel__provider { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--studio-ink) 22%, transparent); border-radius: 5px; background: var(--studio-bg); color: var(--studio-ink); font: var(--weight-medium) var(--text-11)/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap; }
.nf-status-panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 13px; border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); font: var(--weight-regular) var(--text-11)/1 var(--font-sans); color: var(--text-subtle); }
.nf-status-panel__foot a { font: var(--weight-medium) var(--text-11)/1 var(--font-sans); color: var(--text-link); text-decoration: none; white-space: nowrap; }
.nf-status-panel__foot a:hover { text-decoration: underline; }

/* Sign-in page and account menu */
.nf-signin { min-height: 100vh; display: grid; place-items: center; background: var(--gradient-login); padding: 24px; }
.nf-signin__card { width: min(440px, 100%); background: var(--surface-card); color: var(--text-body); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); padding: 28px 28px 24px; }
/* The wordmark is white: inverted to near black on the light card, white as it is on the dark one. */
.nf-signin__logo { height: 22px; filter: invert(1) brightness(.2); margin-bottom: 14px; }
[data-theme="dark"] .nf-signin__logo { filter: none; }
.nf-signin__title { margin: 0 0 8px; font: var(--type-title); color: var(--text-strong); }
.nf-signin__text { margin: 0 0 18px; font: var(--type-body); color: var(--text-muted); }
.nf-signin__btn { width: 100%; justify-content: center; }
.nf-signin__users { display: grid; gap: 8px; }
.nf-signin__user { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-body); }
.nf-signin__user:hover { background: var(--surface-hover); border-color: var(--border-focus); }
.nf-signin__user .material-symbols-rounded { color: var(--text-muted); }
.nf-signin__user-name { font-weight: var(--weight-semibold); }
.nf-signin__user-group { font: var(--type-mono); color: var(--text-muted); }
.nf-signin__note { margin: 16px 0 0; font: var(--type-note); color: var(--text-subtle); }
.nf-topbar__env--dev { background: var(--warning-mark); color: var(--text-strong); margin-left: 4px; }
[data-theme="dark"] .nf-topbar__env--dev { color: var(--chrome-topbar); }
.nf-usermenu { min-width: 260px; }
.nf-usermenu__name { font-weight: var(--weight-semibold); }
.nf-usermenu__email { color: var(--text-muted); font: var(--type-note); overflow-wrap: anywhere; }
.nf-usermenu__role { margin: 8px 0 10px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font: var(--type-note); }
.nf-usermenu__out { width: 100%; justify-content: center; }
.nf-intro { margin: 0; padding: var(--space-4) var(--space-6); color: var(--text-muted); font: var(--type-ui); }

/* Handbook drawer and context hints */
.nf-help__toc { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-help__link { border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); border-radius: var(--radius-pill); padding: 4px 10px; font: var(--type-note); cursor: pointer; }
.nf-help__link:hover { background: var(--surface-hover); }
.nf-help__link--active { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--text-inverse); }
.nf-help__body { font: var(--type-ui); color: var(--text-body); }
.nf-help__body h4 { margin: 14px 0 6px; font: var(--type-subheading); color: var(--text-strong); }
.nf-help__body p { margin: 0 0 10px; }
.nf-help__body ul { margin: 0 0 10px 18px; padding: 0; }
.nf-help__body li { margin: 2px 0; }
.nf-help__body table { border-collapse: collapse; width: 100%; margin: 0 0 10px; font: var(--type-note); }
.nf-help__body th, .nf-help__body td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.nf-help__body th { color: var(--text-muted); font: var(--type-label); }
.nf-help__body strong { color: var(--text-strong); }
.nf-hint { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer; padding: 0; vertical-align: middle; }
.nf-hint:hover { color: var(--text-link); background: var(--surface-hover); }
.nf-hint .material-symbols-rounded { font-size: 18px; }

/* Language choice in the account menu */
.nf-usermenu { min-width: 300px; padding: 12px 14px; }
.nf-usermenu__name { font-weight: var(--weight-semibold); color: var(--text-strong); }
.nf-usermenu__email { color: var(--text-muted); font: var(--type-note); overflow-wrap: anywhere; margin-top: 2px; }
.nf-usermenu__role { margin: 10px 0 0; padding: 10px 0; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; color: var(--text-muted); font: var(--type-note); }
.nf-usermenu__section { padding-top: 10px; border-top: 1px solid var(--border-subtle); font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nf-usermenu__lang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; }
.nf-usermenu__appearance { display: flex; margin: 8px 0 12px; }
.nf-usermenu__appearance .nf-seg__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; }
.nf-usermenu__appearance .nf-seg__item .material-symbols-rounded, .nf-previewtheme .nf-seg__item .material-symbols-rounded { font-size: 16px; }
.nf-previewtheme .nf-seg__item { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; }
.nf-flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border-default); flex: 0 0 auto; vertical-align: -2px; margin-right: 6px; }
.nf-usermenu__lang-item { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.nf-seg__item .nf-flag { margin-right: 5px; }
.nf-usermenu__lang-item { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 6px 4px; text-align: center; text-decoration: none; color: var(--text-body); font: var(--type-note); white-space: nowrap; }
.nf-usermenu__lang-item:hover { background: var(--surface-hover); }
.nf-usermenu__lang-item--active { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--text-inverse); }
.nf-usermenu__out { width: 100%; justify-content: center; }
.nf-usermenu__link { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-top: 1px solid var(--border-subtle); color: var(--text-body); text-decoration: none; font: var(--type-ui); }
.nf-usermenu__link:hover { color: var(--text-link); }
.nf-usermenu__link .material-symbols-rounded { font-size: 18px; color: var(--text-muted); }
.nf-topbar__right .nf-topbar__product { margin: 0 2px; }

/* DevExpress editors inside Noteful forms and the calendar page */
.nf-dx { width: 100%; }
.nf-dxpopup { max-width: 640px; }
.dxbl-popup.nf-dxpopup { --dxbl-popup-border-radius: var(--radius-xl); --dxbl-popup-shadow: var(--shadow-float); }
.nf-dxform .dxbl-fl-cpt { font: var(--type-label); color: var(--text-muted); }
/* A form row that is not there for this choice keeps its room, so the form does not change height. */
.nf-dxform .nf-dxform__reserved { visibility: hidden; }
.nf-dxform .nf-dxform__mono input { font: var(--type-mono); }
.nf-scheduler { position: relative; min-width: 0; min-height: 0; }
.nf-scheduler__control { height: 100%; }

/* Areas: administration tiles, profile cards, navigation back link, clickable lockup */
a.nf-topbar__lockup { text-decoration: none; color: inherit; }
.nf-sidenav__back { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-on-chrome); text-decoration: none; font: var(--type-ui); border-bottom: 1px solid var(--chrome-divider); }
.nf-sidenav__back:hover { color: var(--text-on-chrome-strong); }
.nf-sidenav--collapsed .nf-sidenav__back { justify-content: center; padding: 10px 0; }
.nf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; gap: 14px; }
.nf-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); text-decoration: none; color: var(--text-body); text-align: center; }
.nf-tile .material-symbols-rounded { font-size: 34px; color: var(--text-link); }
a.nf-tile:hover { border-color: var(--border-focus); box-shadow: var(--shadow-float); }
.nf-tile__title { font: var(--type-subheading); color: var(--text-strong); }
.nf-tile__text { font: var(--type-note); color: var(--text-muted); }
.nf-tile--soon { opacity: .6; }
.nf-tile--soon .material-symbols-rounded { color: var(--text-muted); }
.nf-avatar { width: 120px; height: 120px; border-radius: var(--radius-xl); display: grid; place-items: center; color: var(--text-inverse); font: var(--weight-semibold) 44px/1 var(--font-sans); letter-spacing: .02em; }
.nf-avatar--picture { object-fit: cover; background: var(--surface-card-alt); }
.nf-grid .nf-grid__row { cursor: pointer; }
.nf-grid .nf-grid__row--ended > td { color: var(--text-muted); }
.nf-grid__named { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nf-grid__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A count with a label after it: the label starts at the same place in every row and sits in the line of the text, so
   the row keeps the height a text row has. */
.nf-grid__count { display: inline-flex; align-items: center; gap: var(--space-4); vertical-align: middle; }
.nf-grid__count > .nf-num { min-width: 2ch; }
.nf-grid__count > .nf-pill { margin-block: 0; }
.nf-sessions__state { display: block; white-space: normal; overflow-wrap: anywhere; }
.nf-page--media { position: relative; }
.nf-page--media.nf-dropzone--over::after { content: attr(data-drop); position: absolute; inset: var(--space-4); z-index: 20; display: grid; place-items: center; border: 2px dashed var(--border-focus); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface-hover) 88%, transparent); color: var(--text-link); font: var(--type-heading); pointer-events: none; }
.nf-dxupload--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nf-dialog__foot .nf-dialog__lead { margin-right: auto; }
.nf-media-preview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); }
.nf-media-preview__stage { min-height: 320px; max-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: repeating-conic-gradient(var(--surface-tint) 0 25%, var(--surface-card) 0 50%) 0 0 / 16px 16px; color: var(--icon-subtle); }
.nf-media-preview__stage img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.nf-media-preview__stage .material-symbols-rounded { font-size: 64px; }
.nf-media-preview__side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 800px) { .nf-media-preview { grid-template-columns: 1fr; } }
.nf-media-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5) var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.nf-media-bar__stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font: var(--type-ui); color: var(--text-muted); }
.nf-media-bar__stats strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.nf-media-bar__kind { display: inline-flex; align-items: center; gap: 4px; }
.nf-media-bar__kind .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
.nf-media-bar__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.nf-media-bar__control { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-note); color: var(--text-muted); }
.nf-media-bar__control .nf-select { width: auto; min-width: 150px; }
.nf-media-bar .nf-seg__item { display: inline-flex; align-items: center; }
.nf-media-bar .nf-seg__item .material-symbols-rounded { font-size: 18px; }
.nf-media__section { flex: 0 0 auto; display: flex; flex-direction: column; }
.nf-media__group { margin: 0 0 var(--space-4); display: flex; align-items: baseline; gap: var(--space-3); font: var(--type-subheading); color: var(--text-strong); }
.nf-media__group span { font: var(--type-note); color: var(--text-subtle); }
.nf-media__thumbcell { width: 44px; height: 30px; object-fit: cover; border-radius: var(--radius-sm); vertical-align: middle; }
.nf-media__iconcell { font-size: 20px; color: var(--icon-subtle); vertical-align: middle; }
.nf-iconbtn:disabled, .nf-iconbtn:disabled:hover { opacity: .4; cursor: default; background: transparent; color: var(--text-body); }
.nf-iconbtn--current { background: rgba(var(--state-layer), .16); color: var(--text-on-chrome-strong); }
.nf-tabs { flex: 0 0 auto; display: flex; align-items: stretch; gap: 28px; height: var(--shell-tabs-h); margin: var(--shell-gutter) var(--shell-gutter) 0; padding: 0 var(--shell-gutter); overflow-x: auto; }
.nf-tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; border-radius: 0; white-space: nowrap; color: var(--text-body); font: var(--type-ui-strong); font-weight: var(--weight-medium); letter-spacing: .02em; text-transform: uppercase; box-shadow: inset 0 -2px 0 transparent; transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.nf-tabs__tab .material-symbols-rounded { font-size: 19px; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
.nf-tabs__tab:hover { color: var(--text-link); box-shadow: inset 0 -2px 0 var(--border-default); }
.nf-tabs__tab:hover .material-symbols-rounded { color: var(--text-link); }
.nf-tabs__tab--active, .nf-tabs__tab--active:hover { color: var(--text-strong); font-weight: var(--weight-semibold); box-shadow: inset 0 -2px 0 var(--border-focus); }
.nf-tabs__tab--active .material-symbols-rounded { color: var(--text-strong); }
.nf-tabs__right { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; }
.nf-topbar__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--text-on-chrome-muted); }

/* Interaction layer: links swap colour and ground, nothing underlines, everything eases. A tab keeps square corners, so its
   underline runs straight to its ends. */
a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); border-radius: var(--radius-sm); }
a:hover { color: var(--text-link-hover); text-decoration: none; }
.nf-page a:not(.nf-btn):not(.nf-tile):not(.nf-usermenu__lang-item):hover { background: var(--surface-hover); box-shadow: 0 0 0 3px var(--surface-hover); }
.nf-iconbtn, .nf-seg__item, .nf-tile, .nf-media__card, .nf-usermenu__link, .nf-usermenu__lang-item, .nf-help__link, .nf-signin__user, .nf-sidenav__row, .nf-sidenav__back, .nf-status, .nf-hint { transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out); }
.nf-tile:hover, .nf-media__card:hover { transform: translateY(-1px); }
.nf-tile:active, .nf-media__card:active, .nf-iconbtn:active { transform: translateY(0) scale(.98); }
.nf-usermenu__link:hover { background: var(--surface-hover); color: var(--text-link); padding-left: 6px; }
.nf-usermenu__lang-item:hover, .nf-help__link:hover { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--text-inverse); }
.nf-iconbtn:hover { background: var(--surface-hover); color: var(--text-link); }
.nf-iconbtn:focus-visible, a:focus-visible, .nf-input:focus-visible, .nf-select:focus-visible, .nf-textarea:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.nf-popover { animation: nf-pop var(--duration-base) var(--ease-out); transform-origin: top right; }
@keyframes nf-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
/* The dialog is centred by its transform, so its own frames carry the centring and it opens where it stays. */
.nf-dialog { animation: nf-dialog-in var(--duration-base) var(--ease-out); }
@keyframes nf-dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% - 6px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* Cards and callouts stand with their page rather than fading in on their own; what a page holds appears in one step, see
   Loading at the end. */
.nf-error { animation: nf-fade var(--duration-base) var(--ease-standard); }
@keyframes nf-fade { from { opacity: 0; } to { opacity: 1; } }
.nf-grid tr, .nf-grid .dxbl-grid-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.nf-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--surface-selected); border-top-color: var(--border-focus); border-radius: 50%; animation: nf-spin .7s linear infinite; vertical-align: middle; }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Calendar page: rail with mini month and filters, the scheduler across the full width, a details panel
   that slides over the scheduler or docks when pinned, and a settings layer above everything. */
.nf-calendar { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: clip; overflow-clip-margin: 4px; }
.nf-calendar--pinned { grid-template-columns: 250px minmax(0, 1fr) 320px; }
.nf-calendar__rail { border-right: 1px solid var(--border-subtle); background: var(--surface-card); overflow-y: auto; display: flex; flex-direction: column; }
.nf-calendar__mini { padding: 8px 6px 4px; border-bottom: 1px solid var(--border-subtle); }
.nf-calendar__mini .nf-dxcalendar { width: 100%; }
.nf-calendar__filters { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.nf-calendar__check { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-md); font: var(--type-ui); color: var(--text-body); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.nf-calendar__check:hover { background: var(--surface-hover); }
.nf-calendar__check input { margin: 0; accent-color: var(--btn-primary); }
.nf-calendar__key { color: var(--text-muted); font: var(--type-note); }
.nf-calendar__details { border-left: 1px solid var(--border-subtle); border-radius: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; animation: nf-fade var(--duration-base) var(--ease-standard); }
.nf-calendar__details--float { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; max-width: 80%; z-index: 5; box-shadow: var(--shadow-drawer); animation: nf-slide-in var(--duration-slow) var(--ease-out); }
.nf-calendar__details-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nf-calendar__details-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.nf-calendar__details-title { font: var(--type-subheading); color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.nf-calendar__facts { grid-template-columns: 110px 1fr; }
.nf-calendar__summary { margin: 0; font: var(--type-ui); color: var(--text-body); }
.nf-calendar__open { justify-content: center; margin-top: auto; }
.nf-calendar__scrim { position: absolute; inset: 0; z-index: 11; background: var(--surface-overlay); animation: nf-fade var(--duration-base) var(--ease-standard); }
.nf-calendar__settings { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90%; z-index: 12; background: var(--surface-card); box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; animation: nf-slide-in var(--duration-slow) var(--ease-out); }
.nf-calendar__settings > .nf-calendar__details-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-subtle); }
.nf-calendar__settings-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.nf-calendar__settings-group { margin: 10px 0 0; font: var(--type-subheading); color: var(--text-strong); }
.nf-calendar__settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nf-calendar__settings-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); }
.nf-calendar__days { display: flex; gap: 4px; flex-wrap: wrap; }
.nf-calendar__day { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 8px; border: 1px solid var(--border-field); border-radius: var(--radius-pill); font: var(--type-label); color: var(--text-muted); cursor: pointer; user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.nf-calendar__day input { position: absolute; opacity: 0; width: 0; height: 0; }
.nf-calendar__day:hover { border-color: var(--border-focus); color: var(--text-link); }
.nf-calendar__day--on { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--text-inverse); }
.nf-iconbtn--on { background: var(--surface-selected); color: var(--text-link); }
@keyframes nf-slide-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 1100px) { .nf-calendar, .nf-calendar--pinned { grid-template-columns: minmax(0, 1fr); height: auto; } .nf-calendar__rail { border: 0; } .nf-calendar__details { border: 0; } .nf-scheduler { height: 70vh; } }

/* Calendar after the tmERIK planner: the client's blues and greys on the scheduler, a compact mini month,
   filter cards, tinted appointments with a state bar, and motion for the panels and the docked column. */
.nf-calendar { grid-template-columns: 288px minmax(0, 1fr) 0; transition: grid-template-columns var(--duration-slow) var(--ease-out); }
.nf-calendar--pinned { grid-template-columns: 288px minmax(0, 1fr) 336px; }
/* The gaps between the calendar's blocks are margins, so the details column adds none while it is closed. */
.nf-calendar__rail { margin-right: var(--shell-gutter); }
.nf-calendar__details:not(.nf-calendar__details--float) { margin-left: var(--shell-gutter); }
.nf-calendar__details { min-width: 320px; box-shadow: none; }
.nf-calendar__details--float { min-width: 0; box-shadow: var(--shadow-drawer); }
@keyframes nf-slide-in { from { transform: translateX(100%); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes nf-slide-out { from { transform: none; opacity: 1; } to { transform: translateX(100%); opacity: .5; } }
@keyframes nf-fade-out { from { opacity: 1; } to { opacity: 0; } }
.nf-calendar__details--float, .nf-calendar__settings { animation: nf-slide-in 300ms cubic-bezier(.2, .8, .2, 1); }
.nf-calendar__details--float.nf-calendar__details--closing, .nf-calendar__settings--closing { animation: nf-slide-out 220ms cubic-bezier(.4, 0, 1, 1) forwards; }
.nf-calendar__scrim--closing { animation: nf-fade-out 220ms ease forwards; }
.nf-calendar__rail { background: var(--surface-ground); }
.nf-calendar__mini { background: var(--surface-card); padding: 8px 12px 6px; }
.nf-calendar__mini .dxbl-calendar { border: 0; --dxbl-calendar-day-item-width: 28px; --dxbl-calendar-day-item-height: 27px; --dxbl-calendar-content-padding-x: 0; --dxbl-calendar-content-padding-top: 2px; --dxbl-calendar-content-padding-bottom: 2px; --dxbl-calendar-today-border-color: var(--border-focus); --dxbl-calendar-item-hover-bg: var(--surface-hover); --dxbl-calendar-item-hover-color: var(--text-strong); --dxbl-calendar-item-selected-bg: var(--btn-primary); --dxbl-calendar-item-selected-border-color: var(--btn-primary); --dxbl-calendar-item-selected-color: var(--text-inverse); --dxbl-calendar-item-selected-hover-bg: var(--btn-primary); --dxbl-calendar-item-selected-hover-border-color: var(--btn-primary); --dxbl-calendar-item-selected-hover-color: var(--text-inverse); --dxbl-calendar-item-prev-next-month-color: var(--text-subtle); }
/* Weekends in the muted ink: Fluent colours a day's link from this variable, which the weekend's cell sets for it. */
.nf-calendar__mini .dxbl-calendar .dxbl-calendar-weekend { --dxbl-calendar-item-text-color: var(--text-muted); }
.nf-calendar__mini .dxbl-calendar .dxbl-calendar-day { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.nf-calendar__mini .dxbl-calendar .dxbl-calendar-week-number { background: var(--surface-tint); color: var(--text-subtle); width: 22px; }
.nf-calendar__mini .dxbl-calendar div.dxbl-calendar-footer { display: none; }
.nf-calendar__filters { padding: 8px 12px 16px; gap: 4px; }
.nf-calendar__group { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 4px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; font: var(--type-label); color: var(--text-strong); }
.nf-calendar__group .material-symbols-rounded { font-size: 18px; color: var(--text-muted); transition: transform var(--duration-base) var(--ease-standard); }
.nf-calendar__group--closed .material-symbols-rounded { transform: rotate(-90deg); }
.nf-calendar__list { display: flex; flex-direction: column; gap: 4px; animation: nf-fade var(--duration-base) var(--ease-standard); }
.nf-calendar__check { padding: 8px 10px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-block); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.nf-calendar__check:hover { background: var(--surface-card); transform: translateX(2px); box-shadow: var(--shadow-block); border-color: var(--border-default); }
.nf-calendar__check input { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-out); }
.nf-calendar__check:active input { transform: scale(.85); }
.nf-scheduler .dxbl-scheduler { border: 0; --dxbl-scheduler-border-color: var(--border-subtle); --dxbl-scheduler-cell-hover-color: var(--surface-hover); --dxbl-scheduler-disabled-color: var(--surface-ground); }
/* The days outside the month sink to the page's ground, their numbers in the muted ink. */
.nf-scheduler .dxbl-sc-time-cell.dxbl-scheduler-disabled-color .dxbl-date-cell-head { color: var(--text-muted); }
.nf-scheduler .dxbl-sc-toolbar { border-bottom: 1px solid var(--border-subtle); }
.nf-scheduler .dxbl-sc-date-hr { color: var(--text-muted); font-weight: var(--weight-semibold); }
.nf-scheduler .dxbl-sc-date-hr-day { font: var(--type-heading); color: var(--text-strong); }
.nf-scheduler .dxbl-sc-today .dxbl-sc-date-hr-day, .nf-scheduler .dxbl-sc-today .dxbl-sc-date-hr-week { color: var(--text-link); }
.nf-scheduler .dxbl-sc-today { box-shadow: inset 0 -2px 0 var(--border-focus); }
.nf-scheduler .dxbl-sc-time-cell, .nf-scheduler .dxbl-sc-hour-cell { transition: background-color var(--duration-fast) var(--ease-standard); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt, .nf-scheduler .dxbl-scheduler .dxbl-sc-apt * { cursor: pointer; }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt { transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-standard); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt:hover { transform: translateY(-1px); filter: brightness(1.03); z-index: 3; }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-sc-apt-container { border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-block); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-bg { opacity: .16; }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-content, .nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-content * { color: var(--text-strong); font-weight: var(--weight-semibold); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-bg[data-label-id="1"] + .dxbl-apt-content { box-shadow: inset 3px 0 0 var(--scheduled-ink); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-bg[data-label-id="2"] + .dxbl-apt-content { box-shadow: inset 3px 0 0 var(--success-mark); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-bg[data-label-id="3"] + .dxbl-apt-content { box-shadow: inset 3px 0 0 var(--warning-mark); }
.nf-scheduler .dxbl-scheduler .dxbl-sc-apt .dxbl-apt-bg[data-label-id="4"] + .dxbl-apt-content { box-shadow: inset 3px 0 0 var(--icon-subtle); }
.nf-scheduler .dxbl-sc-content-wrapper { animation: nf-fade var(--duration-base) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .nf-calendar, .nf-calendar__details--float, .nf-calendar__settings, .nf-calendar__scrim, .nf-scheduler .dxbl-sc-apt { animation: none; transition: none; } }

/* ---- What a message needs: the caption in a needed field's box, the check after its label, the line under the chip row,
   the list at a blocked button and the count on the Metadata tab, all from one EditorNeeds. Red only after a blocked click. */
.nf-editor__titlefield { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-editor__title { box-sizing: border-box; width: 100%; height: 48px; padding: var(--space-3) var(--space-5); border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); outline: none; font: var(--type-display); letter-spacing: var(--tracking-tight); color: var(--text-strong); transition: var(--transition-control); }
.nf-editor__title:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
/* The caption stands in the middle of the box: the browser sets a placeholder on the line of the box's own type, so while
   it shows the box takes the caption's type and centres that short line; the first character brings the display type
   back in a box of the same height. */
.nf-editor__title:placeholder-shown { font: var(--type-caps); letter-spacing: var(--tracking-caps); }
.nf-editor__title.nf-over, .nf-editor__title.nf-missed { border-color: var(--danger-mark); color: var(--text-strong); }
/* Not editable, the title still reads as the message's heading: no box, full ink, the padding kept so nothing shifts. */
.nf-editor__title:disabled { border-color: transparent; background: transparent; }
.nf-editor__titlehint { display: flex; align-items: baseline; gap: var(--space-4); min-height: 17px; font: var(--type-note); color: var(--text-subtle); }
.nf-editor__titlehint .nf-count { margin-left: auto; }
.nf-editor__titlehint .nf-over, .nf-editor__titlemissed, .nf-field__hint.nf-missed { color: var(--danger-ink); }
.nf-editor__title:disabled + .nf-editor__titlehint .nf-count { visibility: hidden; }
.nf-need::placeholder, .nf-need input::placeholder, .nf-chips__need { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--need-ink); opacity: 1; }
.nf-chips__need { align-self: center; padding: 0 var(--space-2); white-space: nowrap; }
.nf-assign__none { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; }
.nf-missed::placeholder, .nf-missed input::placeholder, .nf-chips.nf-missed .nf-chips__need { color: var(--danger-ink); }
.nf-input.nf-missed, .nf-chips.nf-missed, .nf-missed .dxbl-text-edit, .dxbl-text-edit.nf-missed { border-color: var(--danger-mark); }
.dxbl-text-edit.nf-missed { --dxbl-text-edit-border-color: var(--danger-mark); --dxbl-text-edit-underline-color: var(--danger-mark); }
/* A DevExpress editor colours its placeholder from its own variable, with more weight than the rule above, so a needed one
   sets that variable and the caption's type on its input. */
.dxbl-text-edit.nf-need { --dxbl-text-edit-placeholder-color: var(--need-ink); }
.dxbl-text-edit.nf-need.nf-missed { --dxbl-text-edit-placeholder-color: var(--danger-ink); }
.dxbl-text-edit.nf-need .dxbl-text-edit-input::placeholder { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 1; }
.nf-field__met { display: inline-flex; width: 14px; margin-left: var(--space-2); font-size: 14px; color: var(--need-met); visibility: hidden; vertical-align: -2px; }
.nf-field__met--on { visibility: visible; }
/* The summary under the targets field keeps its line while a new message has none. */
.nf-field__hint--line { min-height: 1lh; }
.nf-needs { display: flex; align-items: center; gap: var(--space-6); min-height: 20px; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; }
.nf-needs__group { display: inline-flex; align-items: center; gap: var(--space-4); }
.nf-needs__lead { font-weight: var(--weight-semibold); color: var(--text-muted); }
.nf-needs__item { padding: 0; border: 0; background: none; font: inherit; color: var(--text-link); cursor: pointer; }
.nf-needs__item:hover { color: var(--text-link-hover); text-decoration: underline; }
.nf-needs__item:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.nf-needs--ready { color: var(--need-met); font-weight: var(--weight-semibold); gap: var(--space-2); }
.nf-needs--ready .material-symbols-rounded { font-size: 16px; }
.nf-needspop-anchor { position: relative; display: inline-flex; }
.nf-needspop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none; flex-direction: column; gap: var(--space-3); width: max-content; max-width: 320px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-float); font: var(--type-note); color: var(--text-body); white-space: normal; }
.nf-needspop__lead { font-weight: var(--weight-semibold); color: var(--text-muted); }
.nf-needspop-anchor:hover .nf-needspop, .nf-needspop-anchor:focus-within .nf-needspop, .nf-needspop--pinned { display: flex; }
.nf-inspector__count { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--space-2); margin-left: var(--space-2); border-radius: var(--radius-pill); background: var(--need-bg); color: var(--need-ink); font: var(--weight-semibold) var(--text-11)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.nf-inspector__count--zero { visibility: hidden; }
.nf-inspector--rail .nf-inspector__railbtn { position: relative; }
.nf-inspector--rail .nf-inspector__count { position: absolute; top: 1px; right: 1px; margin: 0; }
/* Read by a screen reader, not shown. */
.nf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nf-editor__title { transition: none; } }

/* ---- Notices: the lane under the toolbar, absolute in the main column so nothing moves, above the blocks and the
   Assist panel (15), below the drawers (21) and the dialogs (31, 33). A card's life runs in the page script. */
.nf-notices { position: absolute; z-index: 18; top: calc(var(--shell-gutter) + var(--shell-toolbar-h) + var(--space-4)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 2 * var(--shell-gutter))); display: flex; flex-direction: column; gap: var(--space-4); pointer-events: none; }
.nf-main:has(.nf-drawer--open) .nf-notices { left: calc((100% - 420px) / 2); }
.nf-notices__live { display: flex; flex-direction: column; gap: var(--space-4); }
.nf-notices__live:empty { display: none; }
.nf-notices > *, .nf-notices__live > * { pointer-events: auto; }
.nf-notice { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 36px; min-height: 44px; box-sizing: border-box; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden; animation: nf-notice-in var(--duration-base) var(--ease-out); }
.nf-notice__mark { display: grid; place-items: center; font-size: 20px; }
.nf-notice--success .nf-notice__mark { background: var(--success-bg); color: var(--success-ink); }
.nf-notice--warning .nf-notice__mark { background: var(--warning-bg); color: var(--warning-ink); }
.nf-notice__text { align-self: center; padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5); font: var(--type-body); color: var(--text-body); text-wrap: pretty; overflow-wrap: anywhere; }
.nf-notice__action { align-self: center; padding: 0 var(--space-2); border: 0; background: none; cursor: pointer; font: var(--type-ui-strong); color: var(--text-link); white-space: nowrap; }
.nf-notice__action:hover { color: var(--text-link-hover); text-decoration: underline; }
.nf-notice__close { display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 20px; }
.nf-notice__close .material-symbols-rounded { font-size: 20px; }
.nf-notice__close:hover { background: var(--surface-hover); }
.nf-notice :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-notice--error { grid-template-columns: 44px minmax(0, 1fr) 36px; background: var(--danger-bg); border: 1px solid var(--danger-mark); }
.nf-notice--error .nf-notice__mark { align-items: start; padding-top: var(--space-5); background: var(--danger-ink); color: var(--text-inverse); font-size: 22px; font-variation-settings: 'FILL' 1; }
.nf-notice--error .nf-notice__text { align-self: start; display: flex; flex-direction: column; gap: var(--space-2); }
.nf-notice__title { font: var(--type-subheading); color: var(--danger-ink); }
.nf-notice__actions { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.nf-notice--error .nf-notice__close { align-items: start; padding-top: 10px; }
.nf-notice__more { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); border-radius: var(--radius-lg); background: var(--danger-bg); color: var(--danger-ink); font: var(--type-ui-strong); box-shadow: var(--shadow-float); }
.nf-notice__more .nf-notice__action { color: var(--danger-ink); }
.nf-notice.is-leaving { animation: nf-notice-out var(--duration-fast) var(--ease-in) forwards; }
@keyframes nf-notice-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nf-notice-out { to { opacity: 0; } }

/* The state slot in the top bar's middle, and the offline chip that lies over it: the framework's reconnect element,
   shown only while the framework marks a lost connection on it. */
.nf-stateslot { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); }
.nf-state { height: 30px; max-width: 560px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5) 0 10px; border-radius: var(--radius-md); font: var(--type-ui); white-space: nowrap; transition: background-color var(--duration-base) var(--ease-standard); }
.nf-state:has(.nf-state__btn) { padding-right: var(--space-2); }
.nf-state__glyph { font-size: 17px; }
.nf-state--warning { background: var(--warning-bg); color: var(--warning-ink); }
.nf-state--danger { background: var(--danger-bg); color: var(--danger-ink); }
.nf-state__btn { height: 22px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-card); color: inherit; font: var(--type-ui-strong); }
.nf-state__btn:hover { background: color-mix(in srgb, rgb(var(--state-layer)) 8%, var(--surface-card)); }
.nf-state__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-reconnect { display: none; position: fixed; top: 7px; left: 50%; transform: translateX(-50%); z-index: 50; }
.nf-reconnect.components-reconnect-show, .nf-reconnect.components-reconnect-retrying, .nf-reconnect.components-reconnect-failed,
.nf-reconnect.components-reconnect-paused, .nf-reconnect.components-reconnect-resume-failed { display: block; }
.nf-reconnect .nf-reconnect__show, .nf-reconnect .nf-reconnect__failed, .nf-reconnect .nf-reconnect__paused, .nf-reconnect .nf-reconnect__resume-failed { display: none; }
.nf-reconnect.components-reconnect-show .nf-reconnect__show, .nf-reconnect.components-reconnect-retrying .nf-reconnect__show,
.nf-reconnect.components-reconnect-failed .nf-reconnect__failed, .nf-reconnect.components-reconnect-paused .nf-reconnect__paused,
.nf-reconnect.components-reconnect-resume-failed .nf-reconnect__resume-failed { display: inline-flex; }
@media (max-width: 1279.98px) { .nf-state__text { display: none; } }

/* "Saved 07:55" beside a card's Save button, in a slot its row keeps whether empty or not. */
.nf-savedat { min-width: 10ch; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; }
/* A label and its busy state in one cell, so the button keeps its width while an upload counts. */
.nf-swap { display: inline-grid; }
.nf-swap > * { grid-area: 1 / 1; }
.nf-swap__off { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nf-notice, .nf-notice.is-leaving { animation: none; }
  .nf-state { transition: none; }
}

/* ---- Inspector: rendered always; docked beside the content on wide screens, the toolbar's drawers below that ---- */
.nf-inspector { display: none; flex: 0 0 320px; width: 320px; min-width: 0; flex-direction: column; gap: var(--shell-gutter); }
.nf-inspector__head { flex: 0 0 auto; display: flex; flex-direction: column; }
.nf-inspector--rail { flex-basis: var(--shell-inspector-rail-w); width: var(--shell-inspector-rail-w); align-items: center; gap: var(--space-2); padding: 7px 0; }
.nf-inspector__tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card-alt); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nf-inspector__tab { flex: 1 1 auto; min-width: 0; padding: 10px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: var(--type-label); color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.nf-inspector__tab:hover { color: var(--text-strong); }
.nf-inspector__tab--active, .nf-inspector__tab--active:hover { color: var(--text-link); background: var(--surface-card); border-bottom-color: var(--border-focus); }
.nf-inspector__collapse { flex: 0 0 34px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--border-default); background: transparent; color: var(--text-muted); cursor: pointer; }
.nf-inspector__collapse:hover { color: var(--text-link); background: var(--surface-hover); }
.nf-inspector__collapse .material-symbols-rounded, .nf-inspector__railbtn .material-symbols-rounded { font-size: 20px; }
/* The body scrolls its blocks; three pixels of padding keep their shadow inside the scroll box, the margin keeps them aligned. */
.nf-inspector__body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -3px; padding: 0 3px 3px; display: flex; flex-direction: column; gap: var(--shell-gutter); }
.nf-inspector .nf-panelbody { gap: var(--shell-gutter); }
.nf-inspector .nf-group { padding: var(--space-6); }

/* Docked and open, the inspector stays in view below the toolbar, as high as the window leaves: the viewport less the
   top bar, the 56 px toolbar with its gap above and the work area's padding above and below. Its body scrolls when
   the tab is taller; when it is shorter, the tab's last block grows to the foot. */
.nf-workarea .nf-inspector:not(.nf-inspector--rail) { position: sticky; top: var(--shell-gutter); align-self: flex-start; height: calc(100vh - var(--shell-topbar-h) - var(--shell-toolbar-h) - 3 * var(--shell-gutter)); }
.nf-inspector__body > .nf-panelbody, .nf-inspector__body > .nf-panelbody > .nf-group:last-child { flex: 1 0 auto; }
.nf-panelbody--metadata .nf-group { gap: var(--space-5); }
/* The metadata tab keeps its width whether it scrolls or not: the scroll bar has its room reserved. */
.nf-inspector__body:has(> .nf-panelbody--metadata), .nf-drawer__body:has(> .nf-panelbody--metadata) { scrollbar-gutter: stable; }
.nf-panelbody--metadata .nf-typeline { padding-bottom: var(--space-4); margin-bottom: calc(-1 * var(--space-3)); }
.nf-inspector__foot { background: var(--surface-card-alt); padding: var(--space-4) var(--space-6); font: var(--type-note); color: var(--text-subtle); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.nf-inspector__railbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; }
.nf-inspector__railbtn:hover, .nf-inspector__railbtn--active { background: var(--surface-hover); color: var(--text-link); }
.nf-toolbar__inspectorbtn { display: none; }

/* The preview column from 1920: a block beside the inspector with a refresh button in its head. */
.nf-previewcol { display: none; flex: 45 1 0; min-width: 0; flex-direction: column; }
/* Like the inspector, the column stays in view as high as the window leaves and scrolls its body, so a long message
   never makes the page taller. */
.nf-workarea > .nf-previewcol { position: sticky; top: var(--shell-gutter); align-self: flex-start; height: calc(100vh - var(--shell-topbar-h) - var(--shell-toolbar-h) - 3 * var(--shell-gutter)); }
.nf-previewcol__head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card-alt); }
.nf-previewcol__title { flex: 1; font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-previewcol__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-8); }
.nf-toolbar__previewpane { display: none; }
/* In the editor the buttons keep their room and the crumb gives way, ending in an ellipsis, so a published message's
   toolbar fits at 1440 in every language. */
.nf-toolbar--editor .nf-toolbar__right { flex-shrink: 0; }

/* The width steps. The inspector docks from 1200 px, 320 px wide, 360 from 1920 and 440 from 2400 with its fields two-up;
   below 1200 its tabs are the toolbar's drawers. From 1920 the preview is the third column and the toolbar's Preview
   button hides it instead of replacing the text. */
@media (min-width: 1200px) {
    .nf-workarea .nf-inspector { display: flex; }
    .nf-toolbar__drawerbtn { display: none; }
    .nf-toolbar__inspectorbtn { display: inline-flex; }
}
@media (min-width: 1920px) {
    .nf-inspector:not(.nf-inspector--rail) { flex-basis: 360px; width: 360px; }
    .nf-workarea > .nf-previewcol, .nf-mdbox--previewing { display: flex; }
    .nf-preview--inline, .nf-toolbar__previewinline { display: none; }
    .nf-toolbar__previewpane { display: inline-flex; }
}
@media (min-width: 2400px) {
    .nf-inspector:not(.nf-inspector--rail) { flex-basis: 440px; width: 440px; }
}

/* Below 1400 px the navigation is held to its rail whatever the reader chose, and the toolbar's buttons but New message show
   their icons only; each keeps its name as the tooltip and for screen readers. */
.nf-sidenav__section--folded { display: none; }
@media (max-width: 1399px) {
    .nf-sidenav { width: var(--shell-sidebar-w-collapsed); }
    .nf-sidenav .nf-sidenav__label, .nf-sidenav .nf-sidenav__caption, .nf-sidenav .nf-sidenav__toggle, .nf-sidenav .nf-sidenav__footer { display: none; }
    .nf-sidenav .nf-sidenav__row { padding: 0 18px; }
    .nf-sidenav .nf-sidenav__back { justify-content: center; padding: 10px 0; }
    .nf-sidenav .nf-sidenav__section--folded { display: block; }
    .nf-sidenav .nf-sidenav__section + .nf-sidenav__section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--chrome-divider); }
    .nf-toolbar .nf-btn:not(.nf-splitbtn__main, .nf-btn--glyph) { gap: 0; padding: 0 10px; font-size: 0; }
}
/* A count on a glyph button: a small pill at its top right corner. At zero it keeps its place, hidden, so nothing moves. */
.nf-btn__badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--btn-primary); color: var(--text-inverse); font: var(--weight-semibold) 10px / 16px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.nf-btn__badge--none { visibility: hidden; }
/* Below 1800 px the list's bulk actions show their glyphs only, each in its tone, so the search keeps its width and the
   toolbar fits at 1440 px. */
@media (max-width: 1799.98px) {
    .nf-toolbar .nf-btn--bulk { gap: 0; justify-content: center; font-size: 0; width: var(--control-h-md); padding: 0; }
}

/* What needs you (#334): ghost buttons in the Dashboard's toolbar, each a glyph, a pill of a fixed width and the label. The
   pill holds three digits whatever it shows, a skeleton while the counts load, and the labels go below 1600 px on the
   window's width alone, so a count arriving or changing never moves a neighbour. The button rule outweighs the narrow
   toolbar's, which would take the gap and the label's size. */
.nf-btn--ghost { --btn-fill: transparent; --btn-ink: var(--text-body); }
.nf-needsyou { flex: none; display: flex; align-items: center; gap: 8px; }
.nf-toolbar .nf-needsyou .nf-needsyou__count { gap: var(--space-3); height: 32px; padding: 0 10px 0 8px; font: var(--type-ui-strong); }
.nf-needsyou__count .material-symbols-rounded { color: var(--icon-subtle); }
.nf-needsyou__count--zero .nf-needsyou__label { color: var(--text-subtle); }
.nf-needsyou__pill { box-sizing: border-box; justify-content: center; width: calc(3ch + 12px); margin-block: 0; padding: 0; font-variant-numeric: tabular-nums; }
.nf-needsyou__pill--loading { background: var(--surface-tint); animation: nf-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.nf-needsyou__menu { width: auto; min-width: 212px; }
.nf-needsyou__menu:focus { outline: none; }
.nf-needsyou__menu .nf-rowmenu__item { justify-content: space-between; }
.nf-needsyou__menu .nf-rowmenu__item:focus-visible { background: var(--surface-hover); outline: none; box-shadow: inset 0 0 0 2px var(--border-focus); }
@media (max-width: 1599.98px) {
    .nf-needsyou__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nf-needsyou__pill--loading { animation: none; } }

/* ---- Insert media: a popover at its button in the Markdown bar ---- */
.nf-mediapop { position: relative; display: inline-flex; }
.nf-mdbox:has(.nf-popover--media) { overflow: visible; }
.nf-popover--media { width: 420px; max-width: calc(100vw - 32px); min-width: 0; padding: 0; top: calc(100% + 6px); left: 0; right: auto; display: flex; flex-direction: column; }
.nf-popover--media::before { left: 14px; right: auto; }
.nf-mediapop__head { padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.nf-mediapop__head .nf-input { width: 100%; }
.nf-mediapop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-5); max-height: 280px; overflow-y: auto; }
.nf-mediapop__item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); font: var(--type-note); color: var(--text-body); text-align: left; cursor: pointer; }
.nf-mediapop__item:hover { background: var(--surface-hover); }
.nf-mediapop__item--picked, .nf-mediapop__item--picked:hover { border-color: var(--border-focus); background: var(--surface-selected); }
.nf-mediapop__item img, .nf-mediapop__item .material-symbols-rounded { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xs); }
.nf-mediapop__item .material-symbols-rounded { display: grid; place-items: center; background: var(--surface-tint); color: var(--icon-subtle); }
.nf-mediapop__item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-mediapop__empty { padding: var(--space-5); }
.nf-mediapop__foot { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); }

/* ---- Assist: a panel over the page from the Assist button in the Markdown bar ---- */
/* It takes no room, so nothing under it moves. From 1200 px it lies over the inspector, right-aligned to the work area and
   as high as the inspector: the toolbar and two gutters from the top, one gutter from the bottom. From 1920 it lies over the
   preview column, the last one, whose width follows from the columns' flex shares; the page says only whether the preview
   is hidden or the inspector is a rail. Below 1200 it is a drawer with a scrim, like the inspector's drawers. */
.nf-assist { display: none; position: absolute; z-index: 15; top: calc(var(--shell-toolbar-h) + 2 * var(--shell-gutter)); bottom: var(--shell-gutter); right: var(--shell-gutter); width: 480px; flex-direction: column; overflow: hidden; background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.nf-assist--open { display: flex; }
.nf-assist__scrim { display: none; }
@media (max-width: 1199px) {
    .nf-assist { top: 0; bottom: 0; right: 0; max-width: 92%; z-index: 21; border-radius: var(--radius-xl) 0 0 var(--radius-xl); box-shadow: var(--shadow-drawer); }
    .nf-assist__scrim { display: block; position: absolute; inset: 0; z-index: 20; background: var(--surface-overlay); animation: nf-fade var(--duration-base) var(--ease-standard); }
}
@media (min-width: 1920px) {
    .nf-assist { width: calc((100% - 4 * var(--shell-gutter) - 360px) * .45); }
    .nf-assist--rail { width: calc((100% - 4 * var(--shell-gutter) - var(--shell-inspector-rail-w)) * .45); }
    .nf-assist--nopreview { width: 560px; }
}
@media (min-width: 2400px) {
    .nf-assist:not(.nf-assist--rail, .nf-assist--nopreview) { width: calc((100% - 4 * var(--shell-gutter) - 440px) * .45); }
}
.nf-assist__head { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); }
.nf-assist__icon { font-size: 18px; color: var(--text-link); }
.nf-assist__title { font: var(--weight-semibold) 15px / var(--leading-snug) var(--font-display); color: var(--text-strong); }
.nf-assist__lang { padding: 0 5px; border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--text-link); font: var(--type-label); }
.nf-assist__provider { flex: 1; min-width: 0; text-align: right; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.nf-assist__steps[hidden] { display: none; }
.nf-assist__step { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border-subtle); }
.nf-assist__label { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-assist__hint { margin: 0; font: var(--type-note); color: var(--text-muted); }
.nf-assist__seg { display: flex; }
.nf-assist__seg .nf-seg__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nf-assist__seg .nf-seg__item .material-symbols-rounded, .nf-assist__chip .material-symbols-rounded { font-size: 16px; }
.nf-assist__seg .nf-seg__item:disabled { color: var(--text-subtle); cursor: default; background: transparent; }
.nf-assist__cascade { display: flex; flex-direction: column; gap: var(--space-4); }
.nf-assist__by { display: flex; }
.nf-assist__by .nf-seg__item { flex: 1 1 0; }
.nf-assist__pick { display: flex; flex-direction: column; gap: var(--space-4); }
.nf-assist__loadrow { display: flex; align-items: center; gap: var(--space-4); }
.nf-assist__loadhint { flex: 1; min-width: 0; }
.nf-assist__load { flex: 0 0 auto; gap: 6px; }
.nf-assist__mono { font: var(--type-mono); }
.nf-assist__issues { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.nf-assist__issues--loading { gap: var(--space-4); padding: var(--space-5); }
.nf-assist__issue { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.nf-assist__issue:last-child { border-bottom: 0; }
.nf-assist__issue--off { color: var(--text-subtle); }
.nf-assist__key { font: var(--type-mono); color: var(--text-link); }
.nf-assist__summary { font: var(--type-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__meta { grid-column: 3; font: var(--type-note-sm); color: var(--text-subtle); }
/* A list with an issue that may hold personal data keeps a slot for the mark in every row, so the keys stay in one line. */
.nf-assist__issues--marked .nf-assist__issue { grid-template-columns: 16px 16px auto minmax(0, 1fr); }
.nf-assist__issues--marked .nf-assist__meta { grid-column: 4; }
.nf-assist__sensitive { align-self: center; font-size: 16px; color: var(--warning-mark); cursor: help; }
/* How what was loaded goes: three ticks under the issues, the mask alone under a page. */
.nf-assist__privacy { display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-2); }
.nf-assist__count { margin: 0; font: var(--type-note); color: var(--text-muted); }
/* The line above the issues names the set and where it was looked for; it keeps its height while the set loads. */
.nf-assist__loaded { margin: 0; display: flex; align-items: center; gap: var(--space-4); min-height: 20px; }
.nf-assist__loadedlabel { min-width: 0; font: var(--type-ui-strong); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__looksin { margin-left: auto; min-width: 0; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pins: chips above Start from, a row that is there only while there are pins. */
.nf-assist__pins { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-assist__pin { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--border-field); border-radius: 14px; background: var(--surface-card); overflow: hidden; }
.nf-assist__pinchip { display: inline-flex; align-items: center; gap: 5px; max-width: 200px; height: 100%; padding: 0 4px 0 10px; border: 0; background: transparent; color: var(--text-body); font: var(--type-ui); cursor: pointer; }
.nf-assist__pinchip .material-symbols-rounded { font-size: 15px; color: var(--text-link); }
.nf-assist__pinname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__pinx { display: inline-grid; place-items: center; width: 24px; height: 100%; border: 0; background: transparent; color: var(--icon-subtle); cursor: pointer; }
.nf-assist__pinx .material-symbols-rounded { font-size: 14px; }
.nf-assist__pinchip:hover, .nf-assist__pinx:hover { background: var(--surface-hover); }
/* The Ask step's head: the label, and the pin button whose popover lies over what is below it. */
.nf-assist__stephead { display: flex; align-items: center; justify-content: space-between; }
.nf-assist__pinbox { position: relative; display: inline-flex; }
.nf-assist__pinbtn { width: 28px; height: 28px; margin: -6px -6px -6px 0; }
.nf-assist__pinbtn .material-symbols-rounded { font-size: 18px; }
.nf-assist__pinpop { position: absolute; top: calc(100% + 6px); right: -6px; z-index: 20; width: 280px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.nf-assist__pinfoot { display: flex; justify-content: flex-end; gap: var(--space-3); }
/* The Jira search box: the list of hits lies over what is below the box, so nothing moves when it opens. */
.nf-jirasearch { position: relative; }
.nf-jirasearch__box { position: relative; display: flex; align-items: center; }
.nf-jirasearch__icon { position: absolute; left: 9px; font-size: 18px; color: var(--icon-subtle); pointer-events: none; }
.nf-jirasearch__input { padding-left: 32px; padding-right: 32px; text-overflow: ellipsis; }
.nf-jirasearch--mono .nf-jirasearch__input { font: var(--type-mono); }
.nf-jirasearch__clear { position: absolute; right: 2px; width: 28px; height: 28px; }
.nf-jirasearch__clear .material-symbols-rounded { font-size: 16px; }
.nf-jirasearch__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.nf-jirasearch__hit { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.nf-jirasearch__hit:hover { background: var(--surface-hover); }
.nf-jirasearch__hit--active, .nf-jirasearch__hit--active:hover { background: var(--surface-selected); }
.nf-jirasearch__kind { font-size: 16px; color: var(--icon-subtle); }
.nf-jirasearch__label { min-width: 0; font: var(--type-ui); color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-jirasearch__meta { max-width: 180px; font: var(--type-note-sm); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-jirasearch__note { padding: 6px 8px; font: var(--type-note); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-jirasearch__note--danger { color: var(--danger-ink); }
.nf-assist__take { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
/* The tick that translates what lands into the other languages, under Take it as it is and in the foot. */
.nf-assist__also { display: inline-flex; align-items: center; gap: 6px; font: var(--type-note); color: var(--text-muted); cursor: pointer; }
.nf-assist__also input { margin: 0; }
.nf-assist__also:has(input:disabled) { color: var(--text-disabled); cursor: default; }
/* The translate starts under the segment of the sources, one chip per other language with text. */
.nf-assist__translatefrom { display: flex; flex-wrap: wrap; gap: 6px; }
/* A Confluence page as it came: its title, and its space, version and length. */
.nf-assist__page { display: flex; flex-direction: column; gap: 2px; min-height: 40px; }
.nf-assist__pagemeta { margin: 0; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What the last translation into the other languages did, a line per language. */
.nf-assist__translated { margin: 0; padding: var(--space-5) var(--space-8); list-style: none; display: flex; flex-direction: column; gap: 2px; background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); font: var(--type-note); color: var(--text-body); }
/* A proposed or translated title and summary, above the body's result. */
.nf-assist__fields { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-8) 0; }
.nf-assist__fields .nf-textarea { resize: none; }
.nf-assist__orask { margin-left: auto; }
.nf-assist__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-assist__chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border-field); border-radius: 14px; background: var(--surface-card); color: var(--text-body); font: var(--type-ui); cursor: pointer; transition: var(--transition-control); }
.nf-assist__chip:hover { background: var(--surface-hover); }
.nf-assist__chip--on, .nf-assist__chip--on:hover { border-color: var(--border-focus); background: var(--surface-selected); color: var(--text-link); }
/* A preset's label is the owner's, so a long one is cut rather than widening the row past the panel. */
.nf-assist__presets .nf-assist__chip { max-width: 100%; }
.nf-assist__chiplabel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The instruction grows with what is typed, from two lines to five. */
.nf-assist .nf-assist__instruction textarea { field-sizing: content; min-height: 52px; max-height: 112px; }
.nf-assist__sendrow { display: flex; align-items: center; gap: var(--space-4); }
.nf-assist__sends { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font: var(--type-note); color: var(--text-muted); }
.nf-assist__sends .material-symbols-rounded { font-size: 15px; color: var(--icon-subtle); }
.nf-assist__sendsline { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__recap { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-6); padding: var(--space-5) var(--space-8); background: var(--surface-card-alt); border-bottom: 1px solid var(--border-subtle); font: var(--type-note); }
.nf-assist__recaplabel { color: var(--text-subtle); }
.nf-assist__recapvalue { color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__workrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.nf-assist__working { font: var(--type-ui-strong); color: var(--text-strong); }
/* The result field scrolls, not the panel. */
.nf-assist__result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-8); }
.nf-assist__resulthead { display: flex; align-items: center; gap: var(--space-4); }
.nf-assist__edited { padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--text-muted); font: var(--type-note-sm); }
.nf-assist__took, .nf-assist__selected { margin-left: auto; font: var(--type-note); color: var(--text-subtle); }
/* The facts of an AI call, under the result's head at every result: four facts in two rows, each a caps label over its
   value and what it stands for, and beside them the links that open what was sent or what came back, one at a time. */
.nf-assist__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-tint); }
.nf-assist__fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nf-assist__factlabel { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-assist__factvalue { font: var(--type-ui-strong); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1lh; }
.nf-assist__factwhat { min-width: 0; font: var(--type-note); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__factlink { color: var(--text-link); }
.nf-assist__factlink:hover { color: var(--text-link-hover); text-decoration: underline; }
.nf-assist__factlinks { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
/* What a writing result proposes beside its text: a title, a summary and a version, one line each with its own Use, three
   rows high whatever it holds, so the text starts at one place. */
.nf-assist__proposals { flex: 0 0 auto; display: grid; grid-template-rows: repeat(3, var(--control-h-sm)); gap: var(--space-3); }
.nf-assist__proposal { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; min-width: 0; }
.nf-assist__proposallabel { font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-assist__proposalvalue { min-width: 0; font: var(--type-ui); color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist__memo { flex: 1 1 auto; min-height: 120px; resize: none; font: var(--type-mono-body); }
.nf-assist__entries { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.nf-assist__entry { display: grid; grid-template-columns: 16px 118px minmax(0, 1fr); gap: 8px; align-items: start; }
.nf-assist__entry > input { margin-top: 9px; }
.nf-assist__entry--off { opacity: .5; }
.nf-assist__entrytext { min-height: 0; resize: vertical; }
/* Show what was sent: both words hold one cell, so the link keeps its width when it turns; the block opens under the
   result and scrolls inside. */
.nf-assist__sentlink { flex: 0 0 auto; display: inline-grid; padding: 0; border: 0; background: transparent; color: var(--text-link); font: var(--type-note); cursor: pointer; }
.nf-assist__sentlink:hover { color: var(--text-link-hover); text-decoration: underline; }
.nf-assist__sentlink > span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; }
.nf-assist__sentword--off { visibility: hidden; }
.nf-assist__sent { flex: 0 0 auto; max-height: 240px; overflow: auto; margin: 0 var(--space-8) var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-tint); color: var(--text-body); font: var(--type-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-assist__sent[hidden] { display: none; }
/* What came back when it could not be read: its start under the error, in the sent block's type. */
.nf-assist__raw { max-height: 160px; overflow: auto; margin: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-tint); color: var(--text-body); font: var(--type-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-assist__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); background: var(--surface-card-alt); }
.nf-assist__footrow { display: flex; align-items: center; gap: var(--space-4); }
.nf-assist__grow { flex: 1; }
.nf-assist__keptas { margin: 0; font: var(--type-note); color: var(--text-subtle); }
/* Assist in the document editor (#332): the scope beside the title, proposals in rows with what is there now, a
   translation folded per language, and the line that says who decides on a legal text. */
.nf-assist__scope { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 180px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--text-body); font: var(--type-label); }
.nf-assist__scope .material-symbols-rounded { flex: none; font-size: 14px; color: var(--icon-subtle); }
.nf-assist__scopename { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assist .nf-docassist__pasted textarea { field-sizing: content; min-height: 132px; max-height: 300px; }
.nf-docassist__result { flex: 0 0 auto; }
.nf-docassist__legal { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 var(--space-8) var(--space-6); font: var(--type-note); color: var(--text-subtle); }
.nf-docassist__legal .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
.nf-docassist__targets { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-docassist__target { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: var(--space-4); color: var(--text-body); }
.nf-docassist__holds { color: var(--text-subtle); }
.nf-docassist__lang { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-subtle); }
.nf-docassist__fold { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--text-body); font: var(--type-ui); text-align: left; cursor: pointer; }
.nf-docassist__fold:disabled { cursor: default; }
.nf-docassist__fold .material-symbols-rounded { font-size: 18px; color: var(--icon-subtle); }
.nf-docassist__counts { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-docassist__counts--failed { color: var(--danger-ink); }
.nf-docassist__cost { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; }
/* Three chips fit a row whatever their labels, so two rows hold six: the presets, More and Translate. */
.nf-docassist__presets > .nf-assist__chip, .nf-docassist__more { max-width: calc((100% - 12px) / 3); }
.nf-docassist__more > .nf-assist__chip { max-width: 100%; }
.nf-assistfields { display: flex; flex-direction: column; }
.nf-assistfields__group { padding: var(--space-4) 0 var(--space-2); font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-assistfields__row { display: grid; grid-template-columns: 16px minmax(0, 96px) minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; column-gap: var(--space-4); min-height: 44px; border-bottom: 1px solid var(--border-subtle); }
.nf-assistfields__row--text { align-items: start; }
.nf-assistfields__row--text > :not(.nf-assistfields__box) { padding-top: 12px; }
.nf-assistfields__tick { margin: 0; accent-color: var(--btn-primary); }
.nf-assistfields__label { font: var(--type-label); color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assistfields__current { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-assistfields__current--empty { font-style: italic; }
.nf-assistfields__box { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-block: 8px; }
.nf-assistfields__box .nf-input { height: var(--control-h-sm); }
.nf-assistfields__text { resize: vertical; }
.nf-assist__off { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.nf-assist__officon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-tint); color: var(--icon-subtle); font-size: 20px; }
.nf-assist__offtitle { margin: 0; font: var(--weight-semibold) 15px / var(--leading-snug) var(--font-display); color: var(--text-strong); }
.nf-assist__offtext { margin: 0; font: var(--type-ui); color: var(--text-body); }
/* A failure in one line, with what to do beside it. */
.nf-inline-notice { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-md); font: var(--type-note); }
.nf-inline-notice .material-symbols-rounded { font-size: 16px; }
.nf-inline-notice__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-inline-notice__link { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font: var(--type-ui-strong); cursor: pointer; }
.nf-inline-notice--danger { background: var(--danger-bg); color: var(--danger-ink); }
.nf-inline-notice--warning { background: var(--warning-bg); color: var(--warning-ink); }
/* The AI at work: a thin bar that runs without an end. */
.nf-progress { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-tint); }
.nf-progress--indeterminate > span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--btn-primary); animation: nf-progress 1.2s var(--ease-standard) infinite; }
@keyframes nf-progress { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .nf-progress--indeterminate > span { animation: none; left: 30%; } }

/* The table of Jira issue types on the Settings page: the type, its kind, and a way to take the row out. */
.nf-kinds { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-kinds__row { display: grid; grid-template-columns: minmax(0, 1fr) 200px 28px; gap: var(--space-4); align-items: center; }
.nf-kinds__add { align-self: flex-start; }

/* The owner's price table, a row per model with two number boxes, and the month's usage, a row per person with a total. */
.nf-prices { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-prices__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 96px; gap: var(--space-4); align-items: center; font: var(--type-ui); }
/* A provider's head over its rows, from the second group on with room above it. */
.nf-prices__group > [role=rowheader] { grid-column: 1 / -1; }
.nf-prices__group ~ .nf-prices__group { margin-top: var(--space-4); }
.nf-prices__model { min-width: 0; font: var(--type-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-prices__number { text-align: right; font-variant-numeric: tabular-nums; }
.nf-prices__end { text-align: right; }
.nf-prices__asof { font: var(--type-note); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.nf-prices__currency { max-width: 120px; }
/* What the providers' pricing pages offer the table, per provider in the dialog: a tag, the model, the two prices. */
.nf-priceread { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-priceread + .nf-priceread { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.nf-priceread__row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 120px 120px; gap: var(--space-4); align-items: center; font: var(--type-ui); font-variant-numeric: tabular-nums; }
.nf-priceread__row .nf-tag { justify-self: start; }
.nf-priceread__note { margin: 0; font: var(--type-note); color: var(--text-subtle); }
.nf-settings__cardhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.nf-settings__empty { margin: 0; font: var(--type-note); color: var(--text-muted); }
.nf-usage { display: flex; flex-direction: column; }
.nf-usage__row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: var(--space-4); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font: var(--type-ui); font-variant-numeric: tabular-nums; }
.nf-usage__row > :not(:first-child) { text-align: right; }
.nf-usage__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-usage__total { border-bottom: 0; font: var(--type-ui-strong); }

/* The presets of the Assist panel on the Settings page: a row each with its glyph, its label and its task cut to one line.
   A row opens its form in its place and pushes the rows under it. */
.nf-presets__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.nf-presets__list > li + li { border-top: 1px solid var(--border-subtle); }
/* A row: the symbol, the label with where it comes from and a chevron at its end, the task on one line under the label. */
.nf-presets__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 20px; column-gap: var(--space-4); align-items: center; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: var(--text-body); text-align: left; cursor: pointer; }
.nf-presets__row:hover { background: var(--surface-hover); }
.nf-presets__glyph { font-size: 18px; color: var(--text-link); }
.nf-presets__label { min-width: 0; font: var(--type-ui-strong); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-presets__origin { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; }
.nf-presets__chevron { font-size: 20px; color: var(--icon-subtle); }
.nf-presets__task { grid-column: 2 / 4; min-width: 0; font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The one preset open: a rule on its left and a quiet ground, its form under the row, pushing the rows below. */
.nf-presets__item--open { box-shadow: inset 2px 0 0 var(--border-focus); background: var(--surface-hover); }
.nf-presets__item--open .nf-presets__row:hover { background: transparent; }
.nf-presetform { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-2) var(--space-6) var(--space-6) calc(12px + 20px + var(--space-4)); }
.nf-presetform__row { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-4); }
.nf-presetform__glyph { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.nf-presetform__glyph .material-symbols-rounded { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--text-link); font-size: 20px; }
.nf-presetform__glyph .nf-input { font: var(--type-mono); }
.nf-presetform__sends { display: flex; flex-direction: column; gap: var(--space-3); }
.nf-presetform__note { margin: 0; font: var(--type-note); color: var(--text-muted); }
.nf-presetform__end { margin-left: auto; }
/* The Presets tab: the editor's switch at the top left, the count line under it, the list in one card at most 1120 wide. */
.nf-presettab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.nf-presettab__seg .nf-seg__item, .nf-presetform__seg .nf-seg__item { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; }
.nf-presettab__count { display: flex; align-items: center; gap: var(--space-4); min-height: 1lh; margin: 0; font: var(--type-note); color: var(--text-subtle); }
.nf-presettab__card { align-self: stretch; max-width: 1120px; }
/* A document preset's row: the tags of what it works on and which types it is for, then where it comes from. */
.nf-presets__row--doc { grid-template-columns: 20px minmax(0, 1fr) auto auto 20px; }
.nf-presets__row--doc .nf-presets__origin { grid-column: 4; }
.nf-presets__row--doc .nf-presets__chevron { grid-column: 5; }
.nf-presets__row--doc .nf-presets__task { grid-column: 2 / 5; }
.nf-presets__tags { display: inline-flex; gap: var(--space-3); min-width: 0; }
/* What a document preset works on and for which types side by side, the box of chosen types under its switch. */
.nf-presetform__pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.nf-presetform__seg { align-self: flex-start; }
.nf-presetform__seg .nf-seg__item .material-symbols-rounded { font-size: 16px; }
.nf-presetform__seg .nf-seg__item:disabled { cursor: default; color: var(--text-subtle); }
.nf-presetform__types { margin-top: var(--space-3); }
.nf-presetform__sendsline { display: flex; align-items: center; gap: 6px; }
.nf-presetform__sendsline .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
@media (max-width: 1199.98px) {
    .nf-presetform__pair { grid-template-columns: minmax(0, 1fr); }
    .nf-presets__row--doc .nf-presets__tags { grid-row: 2; grid-column: 2 / 5; flex-wrap: wrap; }
    .nf-presets__row--doc .nf-presets__task { display: none; }
}

/* ---- Account: the profile, the release notes, the application info and the imprint. Every page is a grid of blocks from
   gutter to gutter, ordinary blocks on the ground. A fact is a label and a value from the ramp, stacked, or in a row with
   a fixed label column. A control with nothing to do stays in place at 45 per cent. ---- */
.nf-account { display: flex; flex-direction: column; gap: var(--shell-gutter); }
.nf-account .nf-fieldnote { margin: 0; padding-top: 0; border-top: 0; text-wrap: pretty; }
.nf-account__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shell-gutter); align-items: start; }
.nf-account__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--shell-gutter); align-items: start; }
.nf-account__stack { display: flex; flex-direction: column; gap: var(--shell-gutter); min-width: 0; }

/* The settings of Studio itself, by theme in tabs: each tab a grid of cards filling the window, a pair at one height or
   the presets' list, every card with its footer at its foot. On the page an administrator reads, every control stands
   disabled at 45 per cent; results and the usage stay at full strength, since they are reading matter. */
.nf-settings { min-width: 0; }
.nf-settings__grid { display: grid; gap: var(--shell-gutter); min-width: 0; }
.nf-settings__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.nf-settings__card { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-6); }
.nf-settings__card--span { grid-column: 1 / -1; }
.nf-settings__card .nf-fieldnote { margin: 0; padding-top: 0; border-top: 0; text-wrap: pretty; }
.nf-card__foot { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.nf-settings__count { font-variant-numeric: tabular-nums; }
.nf-settings__readonly { gap: 4px; }
.nf-settings__readonly .material-symbols-rounded { font-size: 14px; }
.nf-settings--readonly .nf-settings__card :is(.nf-input, .nf-textarea, .nf-btn, .nf-iconbtn, .nf-seg__item, input[type=checkbox], input[type=radio]):disabled,
.nf-settings--readonly .nf-settings__card .dxbl-disabled { opacity: .45; }
@media (max-width: 1599.98px) { .nf-settings__grid--ai, .nf-settings__grid--clock { grid-template-columns: minmax(0, 1fr); } }
/* The clock's interval: a field 120 wide with its unit after it. */
.nf-settings__seconds { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.nf-settings__seconds .nf-input { width: 120px; }
@media (max-width: 1199.98px) { .nf-settings__grid--pair { grid-template-columns: minmax(0, 1fr); } }
/* The key box keeps its place while Replace opens it again, and the outcome of a test holds one line whatever it says. */
.nf-settings__key { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--space-4); }
.nf-settings__state { display: inline-flex; align-items: center; gap: 3px; font: var(--type-note); color: var(--text-subtle); }
.nf-settings__ok { font-size: 14px; color: var(--success-mark); }
.nf-settings__model .dxbl-text-edit-input { font: var(--type-mono); }
.nf-settings__actions { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.nf-settings__outcome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-note); color: var(--text-subtle); }
.nf-settings__outcome--error { color: var(--danger-ink); }
/* The owner's choice per field, a segmented control saved at once, beside the field and as high as it: the fields of a card
   are one grid, the field and its choice a row, so the choice sits on the field's line and the label stays above the field.
   A field without a choice of its own keeps an empty cell. A key's box has its Replace and Remove beside it. */
.nf-settings__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: var(--space-5); align-items: end; min-width: 0; }
.nf-settings__keyfield { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.nf-settings__keyhead { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.nf-settings__keyacts { display: inline-flex; gap: 12px; margin-left: auto; }
.nf-settings__keyacts .nf-linkbtn { font: var(--type-note); }
.nf-settings__mode .nf-seg__item { padding: 0 10px; font: var(--type-ui); white-space: nowrap; }
.nf-settings__mode .nf-seg__item:disabled { pointer-events: none; }
/* A person's note under a field of the Profile cards keeps its line when it has nothing to say. */
.nf-settings__note { min-height: 1lh; }
/* The note under the model holds one line whatever the provider said; the whole reason is in its title. */
.nf-settings__models { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-account__block { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.nf-account__blockhead { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.nf-account__copy { margin: -5px 0 -5px auto; width: 28px; height: 28px; }
.nf-account__copy .material-symbols-rounded { font-size: 17px; }
.nf-account__start { align-self: flex-start; }
.nf-account__sentence { display: flex; align-items: center; gap: 8px; margin: 0; font: var(--type-body); color: var(--text-body); }
.nf-account__sentence .material-symbols-rounded { font-size: 20px; color: var(--icon-subtle); }
.nf-account__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-account__metric { display: flex; flex-direction: column; gap: 8px; }
.nf-account__figure { display: flex; align-items: baseline; gap: 8px; min-height: calc(var(--text-24) * var(--leading-tight)); }
.nf-account__value { font: var(--type-title); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.nf-account__value--ended { color: var(--danger-ink); }
.nf-account__value--unknown { font: var(--type-body); color: var(--text-subtle); }
.nf-account__unit { font: var(--type-note); color: var(--text-subtle); }
.nf-account__disclaimer p:not(.nf-fieldnote) { max-width: 90ch; margin: 0; font: var(--type-body); line-height: 1.7; color: var(--text-body); }

.nf-identity { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px; }
/* The picture with its two actions as links under it. */
.nf-identity__side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nf-identity__side > .nf-avatar { width: 96px; height: 96px; border-radius: var(--radius-pill); font: var(--weight-semibold) 40px/1 var(--font-display); letter-spacing: 0; }
.nf-identity__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nf-identity__head { display: flex; flex-direction: column; gap: 6px; }
.nf-identity__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nf-identity__name { min-width: 0; min-height: 1lh; margin: 0; font: var(--type-title); color: var(--text-strong); overflow-wrap: anywhere; }
.nf-identity__through { font: var(--type-note); color: var(--text-subtle); }
.nf-identity__facts, .nf-identity__note { max-width: 720px; }
.nf-identity__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.nf-linkbtn { padding: 0; border: 0; background: transparent; color: var(--text-link); font: var(--type-ui-strong); white-space: nowrap; cursor: pointer; }
.nf-linkbtn:hover { color: var(--text-link-hover); text-decoration: underline; }
.nf-linkbtn:disabled { opacity: .45; cursor: default; text-decoration: none; }
.nf-linkbtn--danger { color: var(--danger-ink); }
.nf-linkbtn--danger:hover { color: var(--danger-ink); }
/* Who I am beside my session at one height, then a caps line over my own accesses, three cards at one height. A value the
   company sets is one line with a lock; only what is left to the person is a field. */
.nf-account__row--pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
.nf-account__row--access { align-items: stretch; }
.nf-account .nf-account__foot { margin-top: auto; }
.nf-account__caps { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 0 2px; }
.nf-account__capsnote { min-width: 0; font: var(--type-note); color: var(--text-subtle); }
.nf-account__lang { max-width: 240px; }
.nf-account__langitem { display: inline-flex; align-items: center; gap: 8px; }
.nf-account__langitem .nf-flag { margin-right: 0; }
/* Application info and the Imprint (#350): the latest release beside the application and its publisher, its lines under one
   label per kind, both columns ending on one line; the company as a heading with its sentence, in one face on both pages. */
.nf-account__latest { gap: 14px; }
.nf-account__stack > .nf-account__pub { flex: 1 1 auto; }
.nf-account__head { display: flex; flex-direction: column; gap: 2px; }
.nf-account__company { margin: 0; font: var(--type-subheading); color: var(--text-strong); }
.nf-account__lede { margin: 0; max-width: 90ch; font: var(--type-body); color: var(--text-muted); }
.nf-account__row--imprint { align-items: stretch; }
.nf-release__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 20px 32px; }
.nf-release__group { min-width: 0; }
.nf-release__grouphead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nf-release__groupcount { font: var(--type-ui-strong); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nf-release__grouplist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nf-release__grouplist li { position: relative; padding-left: 14px; font: var(--type-body); color: var(--text-body); }
.nf-release__grouplist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 1px; background: var(--icon-subtle); }
.nf-access { gap: var(--space-4); }
/* The default targets: the editor's picker in a frame of its own with its foot line, the list eight rows high whether
   empty or full, so the card keeps its height. */
.nf-targets { gap: var(--space-4); }
.nf-targets__box { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-field); border-radius: var(--radius-md); overflow: hidden; }
.nf-targets__list { flex: 0 0 auto; height: 224px; }
.nf-lockedline { display: grid; grid-template-columns: 18px 72px minmax(0, 1fr); gap: 8px; align-items: baseline; font: var(--type-ui); }
.nf-lockedline > .material-symbols-rounded { align-self: center; font-size: 16px; color: var(--icon-subtle); }
.nf-lockedline__label { font: var(--type-label); color: var(--text-muted); }
.nf-lockedline__value { min-width: 0; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-field__labelnote { font-weight: var(--weight-regular); color: var(--text-subtle); }
.nf-tag--warning { color: var(--warning-ink); background: var(--warning-bg); }
.nf-tag--silver { color: var(--neutral-ink); background: var(--neutral-bg); }

.nf-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nf-facts--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.nf-facts__item { min-width: 0; }
.nf-facts--stack .nf-facts__item { display: flex; flex-direction: column; gap: 3px; }
.nf-facts__label { font: var(--type-label); color: var(--text-muted); }
.nf-facts__value { min-height: 1lh; margin: 0; font: var(--type-body); font-style: normal; color: var(--text-body); overflow-wrap: anywhere; }
.nf-facts--row .nf-facts__item { display: flex; align-items: baseline; gap: 12px; }
.nf-facts--row .nf-facts__label { flex: 0 0 auto; width: var(--nf-facts-label, 132px); }
.nf-facts--narrow { --nf-facts-label: 104px; }
.nf-facts__value--num { font-variant-numeric: tabular-nums; }
.nf-facts__value--mono { font: var(--type-mono); }

/* The session's time left as a progress element, so its share needs no inline style. */
.nf-meter { display: block; width: 100%; height: 4px; border: 0; border-radius: var(--radius-pill); background: var(--surface-tint); overflow: hidden; appearance: none; }
.nf-meter::-webkit-progress-bar { background: var(--surface-tint); }
.nf-meter::-webkit-progress-value { background: var(--studio-ink); }
.nf-meter::-moz-progress-bar { background: var(--studio-ink); }
.nf-meter--over::-webkit-progress-value { background: var(--danger-mark); }
.nf-meter--over::-moz-progress-bar { background: var(--danger-mark); }

.nf-release__cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--shell-gutter); align-items: start; }
.nf-release__index { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.nf-release__index .nf-group__title { padding: 0 4px; }
.nf-release__irows { display: flex; flex-direction: column; gap: 2px; }
.nf-release__iitem { box-sizing: border-box; display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 34px; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-body); text-align: left; cursor: pointer; }
.nf-release__iitem:hover, .nf-release__iitem--on { background: var(--surface-hover); }
.nf-release__dot { flex: 0 0 auto; align-self: center; width: 6px; height: 6px; border-radius: var(--radius-pill); background: transparent; }
.nf-release__dot--unread { background: var(--studio-ink); }
.nf-release__date { font: var(--type-note); color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nf-release__iitem .nf-release__date { margin-left: auto; color: var(--text-muted); }
.nf-release { align-self: stretch; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.nf-release__ver { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 18px; border-left: 2px solid transparent; scroll-margin-top: var(--shell-gutter); }
.nf-release__ver--unread { border-left-color: var(--studio-ink); }
.nf-release__header { display: flex; flex-direction: column; gap: 4px; }
/* Every version row, open or folded, shares its columns: the chevron, the version, the date, then the rest. The open
   version's headline and entries hang under its number. */
.nf-release__meta { display: flex; align-items: baseline; gap: 12px; min-height: 22px; }
.nf-release__meta > .material-symbols-rounded { align-self: center; font-size: 20px; color: var(--icon-subtle); }
.nf-release__no { flex: 0 0 auto; width: 8ch; }
.nf-release__meta .nf-release__date, .nf-release__fold .nf-release__date { flex: 0 0 auto; width: 66px; }
.nf-release__ver .nf-release__head, .nf-release__ver .nf-release__entries { margin-left: 32px; }
.nf-release__meta .nf-mono, .nf-release__fold .nf-mono { color: var(--text-subtle); }
.nf-release__head { margin: 0; max-width: 900px; font: var(--type-heading); color: var(--text-strong); text-wrap: pretty; }
.nf-release__entries { display: flex; flex-direction: column; gap: 10px; }
.nf-release__entry { display: grid; grid-template-columns: 88px minmax(0, 92ch); gap: 12px; align-items: baseline; }
.nf-release__entry .nf-tag { justify-self: start; }
.nf-release__nomatch, .nf-release__nohits { margin: 0; font: var(--type-body); color: var(--text-muted); }
.nf-release__nohits { padding: 12px 20px 12px 22px; border-bottom: 1px solid var(--border-subtle); }
.nf-mark { background: var(--mark-bg); color: var(--mark-ink); border-radius: 2px; padding: 0 1px; }
/* The editor's preview of release notes: the entries in the author's order, as the release notes page shows them. */
.nf-preview__entries { margin-top: var(--space-5); }
.nf-release__text { font: var(--type-body); color: var(--text-body); text-wrap: pretty; }
/* The preview's entry: the first line rendered, Details beside it, the details under it with a picture as a thumbnail of a fixed size. */
.nf-release__cell { min-width: 0; }
.nf-release__cell .nf-release__text p { display: inline; margin: 0; }
.nf-release__details { height: 20px; margin-left: 8px; padding: 0 7px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: transparent; font: var(--type-label); color: var(--text-link); vertical-align: baseline; cursor: pointer; }
.nf-release__details:hover { background: var(--surface-hover); }
.nf-release__detail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; font: var(--type-body); color: var(--text-body); }
.nf-release__detail p { margin: 0; }
.nf-release__thumb { box-sizing: border-box; display: grid; place-items: center; width: 200px; height: 120px; padding: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-tint); cursor: zoom-in; }
.nf-release__thumb:hover { background: var(--surface-hover); }
.nf-release__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nf-dialog.nf-picture { max-width: calc(100% - 48px); }
.nf-picture .nf-dialog__body { display: grid; place-items: center; }
.nf-picture__img { max-width: 100%; max-height: calc(100vh - 220px); }
.nf-release__fold { box-sizing: border-box; display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-left: 2px solid transparent; background: transparent; font: var(--type-body); color: var(--text-body); text-align: left; cursor: pointer; scroll-margin-top: var(--shell-gutter); }
.nf-release__fold:hover { background: var(--surface-hover); }
.nf-release__fold > .material-symbols-rounded { align-self: center; font-size: 20px; color: var(--icon-subtle); }
.nf-release__fold + .nf-release__fold, .nf-release__ver + .nf-release__fold, .nf-release__fold + .nf-release__ver { border-top: 1px solid var(--border-subtle); }
.nf-release__line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-release__counts { flex: 0 0 auto; align-self: center; display: flex; gap: 6px; margin-left: auto; }
.nf-release__count { font-variant-numeric: tabular-nums; }
.nf-release__nothing { font-size: 18px; color: var(--text-subtle); }
.nf-release__rail { display: none; flex-direction: column; gap: 16px; padding: 16px; }
.nf-release__part { display: flex; flex-direction: column; gap: 10px; }
.nf-release__part + .nf-release__part { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.nf-release__since { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nf-release__since li { display: flex; align-items: center; gap: 10px; font: var(--type-body); color: var(--text-body); }
.nf-release__since li.nf-release__since--none { color: var(--text-subtle); }
.nf-release__swatch { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.nf-release__num { margin-left: auto; font: var(--type-note); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nf-release__kinds { display: flex; flex-direction: column; gap: 2px; }
.nf-release__kind { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; font: var(--type-body); color: var(--text-body); text-align: left; cursor: pointer; }
.nf-release__kind:hover, .nf-release__kind--on { background: var(--surface-hover); }
.nf-release__pick { display: none; width: auto; min-width: 110px; }
.nf-release__search { flex: 0 0 auto; width: 220px; }
.nf-release__scope { flex: 0 0 auto; width: 140px; }
/* Below 1600 px Mark all as read is its glyph, its name the tooltip, so the German toolbar holds search, versions and filter at 1440. */
@media (max-width: 1599.98px) {
    .nf-release__markread { gap: 0; padding: 0 10px; font-size: 0; }
}
.nf-release__filter--off { opacity: .45; }
.nf-release__none { max-width: 420px; margin: 0 auto; font: var(--type-body); color: var(--text-muted); }

/* The unread dot of the release notes on the navigation's entry and the account menu's item: 8 px, over the icon when the
   navigation is a rail. */
.nf-sidenav__row > .nf-release__dot, .nf-usermenu__link > .nf-release__dot { width: 8px; height: 8px; }
.nf-sidenav__row:has(> .nf-release__dot) { position: relative; }
.nf-sidenav--collapsed .nf-sidenav__row > .nf-release__dot { position: absolute; top: 9px; left: 34px; }

@media (min-width: 1600px) {
    .nf-release__cols { grid-template-columns: 220px minmax(0, 1fr) 260px; }
    .nf-release__rail { display: flex; }
    .nf-release__filter { display: none; }
}
@media (max-width: 1399px) {
    .nf-sidenav .nf-sidenav__row > .nf-release__dot { position: absolute; top: 9px; left: 34px; }
    .nf-account__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nf-account__row > :last-child { grid-column: 1 / -1; }
    .nf-account__row--pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .nf-account__row--pair > :last-child { grid-column: auto; }
}
@media (max-width: 1199px) {
    .nf-account__row, .nf-account__row--pair, .nf-account__info { grid-template-columns: minmax(0, 1fr); }
    /* Application info in one column: the application first, since its version is what a reader comes for, then the
       latest release, then the publisher. */
    .nf-account__row--pair > .nf-account__stack { display: contents; }
    .nf-account__app { order: 1; }
    .nf-account__latest { order: 2; }
    .nf-account__pub { order: 3; }
    .nf-identity { grid-template-columns: minmax(0, 1fr); }
    .nf-identity__acts { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .nf-identity__acts .nf-fieldnote { flex-basis: 100%; }
    .nf-release__cols { grid-template-columns: minmax(0, 1fr); }
    .nf-release__index { display: none; }
    .nf-release__pick { display: inline-block; }
}

/* ---- Blocks on a ground: every region of a page is the same surface, white and borderless with one soft shadow, laid on
   --surface-ground with one gap, --shell-gutter, between blocks, between columns and from the page edge. Lines stay only
   inside a block; a stroke on the page belongs to a control. ---- */
.nf-block, .nf-toolbar, .nf-tabs, .nf-intro, .nf-card, .nf-grid, .nf-mdbox, .nf-preview, .nf-media-bar, .nf-media__files, .nf-tiles,
.nf-calendar__rail, .nf-scheduler, .nf-previewcol, .nf-inspector__head, .nf-inspector--rail, .nf-inspector .nf-group, .nf-inspector .nf-rev,
.nf-page > .nf-empty, .nf-page > .nf-fault { background: var(--surface-card); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-block); }
.nf-grid, .nf-scheduler, .nf-previewcol, .nf-inspector__head, .nf-inspector .nf-rev { overflow: hidden; }
.nf-media__files, .nf-tiles { padding: var(--space-6); }
.nf-calendar__details--float { margin-left: 0; border-radius: 0; box-shadow: var(--shadow-drawer); }

/* ---- Loading: a page shows its blocks at their final size at once and what they hold in one step. While its data is
   incomplete the page carries nf-page--loading, which sets --nf-shown to 0 for the insides of its blocks and for the
   toolbar's subtitle: they go at once and come back together with a short fade when the class goes. A block whose
   height follows the data keeps a minimum while it is empty, so that nothing below it moves. The rule weighs nothing,
   so a control's own opacity or transition still wins. ---- */
.nf-page--loading, .nf-toolbar:has(~ .nf-page--loading) { --nf-shown: 0; --nf-fade: 0s; }
:where(.nf-block, .nf-card, .nf-callout, .nf-grid, .nf-mdbox, .nf-preview, .nf-media-bar, .nf-media__files, .nf-tiles,
.nf-calendar__rail, .nf-scheduler, .nf-previewcol, .nf-inspector__head, .nf-inspector--rail, .nf-inspector .nf-group,
.nf-inspector .nf-rev, .nf-page > .nf-empty, .nf-page > .nf-fault) > *,
:where(.nf-toolbar__subrow) { opacity: var(--nf-shown, 1); transition: opacity var(--nf-fade, 150ms) var(--ease-out); }

/* ---- Skeletons: grey shapes where the content will stand, drawn by Shared/Skeleton inside a block while its page loads.
   They lie over the block, so its size stays, fade in only after 200 ms, so a fast load never shows them, pulse slowly
   and leave in the render in which the content appears. ---- */
:where(:has(> .nf-skeleton)) { position: relative; }
.nf-skeleton { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: inherit; overflow: hidden; pointer-events: none; opacity: 0; animation: nf-skeleton-in 150ms var(--ease-out) 200ms forwards; }
.nf-skeleton--inset { padding: var(--space-6); }
.nf-skeleton__bar { flex: 0 0 auto; display: block; height: 12px; max-width: 100%; border-radius: var(--radius-sm); background: var(--surface-tint); animation: nf-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.nf-skeleton__bar--tall { height: 18px; }
.nf-skeleton__bar--control { width: 100%; height: var(--control-h-md); }
.nf-skeleton__bar--head { width: 100%; height: 14px; margin-bottom: 4px; }
.nf-skeleton__field { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.nf-skeleton__rows { display: flex; flex-direction: column; gap: 18px; }
.nf-skeleton__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-5); }
.nf-skeleton__tile { display: flex; flex-direction: column; gap: var(--space-4); }
.nf-skeleton__thumb { height: 120px; border-radius: var(--radius-sm); background: var(--surface-tint); animation: nf-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.nf-skeleton__month { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1px; background: var(--surface-tint); border: 1px solid var(--surface-tint); }
.nf-skeleton__day { padding: var(--space-3); background: var(--surface-card); }
.nf-skeleton__day > .nf-skeleton__bar { width: 18px; height: 10px; }
@keyframes nf-skeleton-in { to { opacity: 1; } }
@keyframes nf-skeleton-pulse { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .nf-skeleton__bar, .nf-skeleton__thumb { animation: none; } }

/* ---- Products: a product row expands to its installations, a plain table with one hairline per row, and a key is shown
   once in a dialog that only its own button closes. ---- */
.nf-inst { padding: var(--space-5) var(--space-6) var(--space-6) 48px; background: var(--surface-card-alt); }
.nf-grid .dxbl-grid-detail-cell:has(.nf-inst) { padding: 0; }
.nf-inst__head, .nf-inst__row { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px 120px 224px; align-items: center; gap: var(--space-5); padding: 0 var(--space-4); height: 36px; border-bottom: 1px solid var(--border-subtle); }
.nf-inst__head { height: 30px; font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nf-inst__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-inst__tags { display: inline-flex; gap: var(--space-2); margin-left: var(--space-4); vertical-align: middle; }
.nf-inst__tags .nf-chip, .nf-inst__tagline .nf-chip { padding-right: 6px; }
.nf-inst__form { display: flex; flex-direction: column; gap: var(--space-5); }
/* One line under the tags field: the chips as typed, or why a word is not a tag. */
.nf-inst__tagline { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); height: 20px; overflow: hidden; }
.nf-inst__tagerror { font: var(--type-note); color: var(--danger-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-inst__hooknote { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Beside the button that makes a secret: the start of the one that is set, in the key's tone. */
.nf-inst__secret { margin-left: var(--space-3); font: var(--type-mono); color: var(--text-subtle); white-space: nowrap; }
/* The webhook of an installation: the icon beside its name, red when the last call failed. */
.nf-inst__hook { margin-left: var(--space-3); font-size: 16px; color: var(--text-subtle); vertical-align: middle; }
.nf-inst__hook--failed { color: var(--danger-mark); }
.nf-inst__key { display: flex; flex-direction: column; justify-content: center; min-width: 0; font: var(--type-mono); color: var(--text-subtle); }
.nf-inst__how { align-self: flex-start; font: var(--type-note-sm); white-space: nowrap; }
.nf-inst__seen--never { color: var(--text-subtle); }
.nf-inst__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.nf-inst__acts > * { flex: 0 0 auto; white-space: nowrap; }
.nf-inst__acts .nf-iconbtn { width: 28px; height: 28px; }
.nf-inst__rows--capped { max-height: 432px; overflow-y: auto; }
.nf-inst__filter { display: inline-flex; margin-bottom: var(--space-5); }
.nf-inst__foot { padding-top: var(--space-5); }
.nf-keyout { display: flex; align-items: center; gap: var(--space-4); }
.nf-keyout__value { flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 0 10px; height: var(--control-h-lg); display: flex; align-items: center; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-tint); font: var(--type-mono); color: var(--text-body); white-space: nowrap; }
.nf-keyout__copy { flex: 0 0 auto; width: var(--control-h-lg); height: var(--control-h-lg); display: grid; place-items: center; border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); cursor: pointer; }
.nf-keyout__copy:hover { background: var(--surface-hover); color: var(--text-link); }
.nf-keynote { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-5) 0 0; font: var(--type-note); color: var(--warning-ink); }
.nf-keynote + .nf-keynote { margin-top: var(--space-3); }
.nf-keynote .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; }
.nf-keyout--code { align-items: flex-start; }
.nf-keyout--code .nf-keyout__value { display: block; height: auto; min-height: var(--control-h-lg); margin: 0; padding: 9px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-integration__sample { display: flex; flex-direction: column; gap: 6px; }
.nf-integration__unset { color: var(--text-subtle); }
.nf-page > .nf-grid.nf-integration__grid { display: flex; flex-direction: column; }
.nf-grid.nf-block--grow.nf-integration__grid > .dxbl-grid { flex: 1 1 0; min-height: 0; height: auto; }
.nf-integration__head { padding: 16px 16px 0; }
/* The product's total ends the product cell, so it stands in one line down the grid whatever the name. */
.nf-integration__grid .nf-grid__named > .nf-pill { flex: 0 0 auto; margin-left: auto; }

/* ---- Audience: the recipient directory. A toolbar with search and two filters, one grid of id, name, product and
   category with a row menu, and below 900px a list of two lines per entry for one product. ---- */
.nf-dir__search { width: 240px; min-width: 0; }
.nf-dir__filter { flex: 0 0 auto; width: 170px; }
.nf-dir__none { color: var(--text-muted); }
.nf-dir__ways { display: inline-flex; gap: var(--space-4); }
.nf-dir__ways .material-symbols-rounded { font-size: 17px; color: inherit; }
.nf-dirlist { overflow-y: auto; }
.nf-dirlist__row { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); height: 46px; padding: 0 var(--space-4) 0 var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-dirlist__main { min-width: 0; display: flex; flex-direction: column; }
.nf-dirlist__name { font: var(--type-ui); color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-dirlist__meta { font: var(--type-note); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-rowmenu { position: fixed; top: 0; left: 0; right: auto; z-index: 62; width: 212px; min-width: 0; padding: var(--space-2); display: flex; flex-direction: column; visibility: hidden; }
.nf-rowmenu::before { display: none; }
.nf-rowmenu--placed { visibility: visible; }
.nf-rowmenu__item { display: flex; align-items: center; gap: var(--space-4); width: 100%; height: 30px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; font: var(--type-ui); color: var(--text-body); text-align: left; white-space: nowrap; cursor: pointer; }
.nf-rowmenu__item:hover { background: var(--surface-hover); }
.nf-rowmenu__item .material-symbols-rounded { width: 17px; font-size: 17px; color: var(--icon-subtle); }
.nf-rowmenu__item--sub { padding-left: var(--space-8); }
.nf-rowmenu__item--danger, .nf-rowmenu__item--danger .material-symbols-rounded { color: var(--danger-ink); }
/* A refused item stays in its place, dimmed, with the not allowed cursor and no hover; its reason is its title. */
.nf-rowmenu__item:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
.nf-rowmenu__item:is(:disabled, [aria-disabled="true"]):hover { background: transparent; }
.nf-rowmenu__sep { height: 1px; margin: var(--space-2) var(--space-4); background: var(--border-subtle); }
.nf-dir__form { display: flex; flex-direction: column; gap: var(--space-5); }
.nf-row--id { grid-template-columns: 180px minmax(0, 1fr); }
.nf-dir__error { box-sizing: border-box; min-height: calc(2 * 1.4 * var(--text-12)); margin: var(--space-2) 0 0; font: var(--type-note); color: var(--danger-ink); }
.nf-dir__paste { box-sizing: border-box; height: 116px; resize: none; }
.nf-dir__counts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); font: var(--type-ui); font-variant-numeric: tabular-nums; }
.nf-dir__verdict { display: inline-flex; align-items: center; gap: var(--space-2); }
.nf-dir__verdict .material-symbols-rounded { font-size: 17px; }
.nf-dir__verdict--new { color: var(--success-ink); }
.nf-dir__verdict--changed { color: var(--text-link); }
.nf-dir__verdict--unchanged { color: var(--text-subtle); }
.nf-dir__verdict--rejected { color: var(--danger-ink); }
.nf-dir__lines { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.nf-dir__line { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); font: var(--type-ui); color: var(--text-body); }
.nf-dir__line:last-child { border-bottom: 0; }
.nf-dir__line .nf-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-dir__what { min-width: 0; overflow-wrap: anywhere; }
.nf-dir__safe { font: var(--type-note); color: var(--text-subtle); }
.nf-catlist { display: flex; flex-direction: column; }
.nf-catlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); min-height: 40px; border-bottom: 1px solid var(--border-subtle); }
.nf-catlist__name { min-width: 0; font: var(--type-ui); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-catlist__count { margin-left: var(--space-4); font: var(--type-note); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.nf-dir__chiprow { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
.nf-chip--gone { flex: 0 0 auto; white-space: nowrap; background: var(--surface-tint); color: var(--text-subtle); }
@media (max-width: 1359px) {
    .nf-dir__search { width: 200px; }
}
@media (max-width: 479px) {
    .nf-row--id { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Documents: a type's page, the types block beside the tab strip and the tab's block, and the document editor's
   blocks. Plain tables with one hairline per row; marks and dots keep their room, so nothing moves. ---- */
.nf-docs { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: var(--shell-gutter); flex: 1 1 auto; min-height: 0; }
.nf-docs__main { display: flex; flex-direction: column; gap: var(--shell-gutter); min-width: 0; min-height: 0; }
.nf-docs__needslook { color: var(--warning-ink); }
.nf-tabs.nf-docs__tabs { margin: 0; }
.nf-doctypes { align-self: start; display: flex; flex-direction: column; padding: var(--space-3) 0 var(--space-4); }
.nf-doctypes__cap { padding: var(--space-5) var(--space-6) var(--space-2); font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.nf-doctypes__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 8px 28px; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-6); font: var(--type-ui); color: var(--text-body); text-decoration: none; }
.nf-doctypes__row .material-symbols-rounded { font-size: 18px; color: var(--icon-subtle); }
.nf-doctypes__row:hover { background: var(--surface-hover); }
.nf-doctypes__row--on, .nf-doctypes__row--on:hover { background: var(--surface-selected); color: var(--text-strong); }
.nf-doctypes__row--on .material-symbols-rounded { color: var(--text-link); }
.nf-doctypes__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-doctypes__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning-mark); visibility: hidden; }
.nf-doctypes__dot--on { visibility: visible; }
.nf-doctypes__count { font: var(--type-note); font-variant-numeric: tabular-nums; color: var(--text-subtle); text-align: right; }
.nf-doctypes__select { display: none; }

.nf-doctable { width: 100%; table-layout: fixed; border-collapse: collapse; font: var(--type-ui); color: var(--text-body); }
.nf-doctable th { height: 34px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; font: var(--type-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-doctable td { height: var(--row-h-grid); padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nf-doctable__num { text-align: right; font-variant-numeric: tabular-nums; }
.nf-doctable th.nf-doctable__num { text-align: right; }
.nf-doctable__muted { color: var(--text-muted); }
.nf-doctable__subtle { color: var(--text-subtle); }
.nf-tag--glyph { gap: 3px; padding-left: 5px; }
.nf-tag--glyph .material-symbols-rounded { font-size: 14px; }

/* Order: the rows take two lines, the document and its versions; the handle lifts a row, the line shows where it lands. */
.nf-docorder { display: flex; flex-direction: column; overflow: auto; }
.nf-docorder__rule { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); font: var(--type-note); color: var(--text-subtle); }
.nf-docorder__rule .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
/* The retired switch at the rule line's end, there in every state: the rule wraps first, the switch keeps its line. */
.nf-docorder__ruletext { flex: 1 1 auto; min-width: 0; }
.nf-docorder__retired { display: inline-flex; flex: none; align-items: center; gap: var(--space-3); margin-left: auto; color: var(--text-body); white-space: nowrap; cursor: pointer; }
.nf-docorder__retired:has(:disabled) { color: var(--text-subtle); cursor: default; }
.nf-docorder__looks { color: var(--warning-ink); }
.nf-docorder__table td { height: 48px; }
.nf-docorder__row { cursor: pointer; }
.nf-docorder__row:hover td { background: var(--surface-hover); }
.nf-docorder__doc { display: flex; flex-direction: column; min-width: 0; }
.nf-docorder__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-ui-strong); color: var(--text-strong); text-decoration: none; }
.nf-docorder__name:hover { color: var(--text-link); text-decoration: underline; }
.nf-docorder__version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-note); color: var(--text-subtle); }
.nf-docorder__targets { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; }
.nf-docorder__row--retired td, .nf-docorder__row--retired .nf-docorder__name { color: var(--text-subtle); }
.nf-docorder__handle { width: 28px; height: 28px; color: var(--icon-subtle); cursor: grab; }
.nf-docorder__handle[aria-pressed="true"] { background: var(--surface-selected); color: var(--text-link); }
.nf-docorder__row--lifted { position: relative; z-index: 1; box-shadow: var(--shadow-float); }
.nf-docorder__row--lifted td { background: var(--surface-card); }
.nf-docorder__row--landabove td { box-shadow: inset 0 2px 0 var(--border-focus); }
.nf-docorder__row--landbelow td { box-shadow: inset 0 -2px 0 var(--border-focus); }

/* Coverage: the head with the switch, the counts and the filters; group rows on the alternate surface. */
.nf-doccover { display: flex; flex-direction: column; overflow: auto; }
.nf-doccover__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-doccover__counts { font: var(--type-ui); font-variant-numeric: tabular-nums; color: var(--text-body); white-space: nowrap; }
.nf-doccover__right { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nf-doccover__right .nf-check { align-items: center; white-space: nowrap; }
.nf-doccover__right .nf-check input { margin-top: 0; }
.nf-doccover__filter { width: 240px; }
.nf-doccover__grid { flex: 1 1 auto; min-height: 0; }
.nf-doccover__grid > .dxbl-grid { height: 100%; }
.nf-doccover__name { font: var(--type-ui-strong); color: var(--text-strong); }
.nf-doccover__took { display: inline-flex; align-items: center; gap: var(--space-2); }
.nf-doccover__took .material-symbols-rounded { font-size: 16px; }

/* The document editor: the head as the message editor's, one block per field group or text, the inspector's lists. */
.nf-docedit__typeglyph { margin-right: 4px; font-size: 14px; }
.nf-docedit__locked { display: flex; align-items: center; gap: var(--space-3); min-height: 20px; font: var(--type-note); color: var(--text-muted); }
.nf-docedit__locked .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
.nf-docedit__langs .nf-field__met { margin-left: var(--space-2); }
.nf-docedit__caret { margin-left: -4px; font-size: 18px; }
.nf-docedit__error { color: var(--danger-ink); }
.nf-docedit__savetargets { align-self: flex-start; }
.nf-docorder__marks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nf-tag--danger { color: var(--danger-ink); background: var(--danger-bg); }
.nf-iconbtn--danger { color: var(--danger-ink); }

/* The tab strip's count: a pill after the label whose slot stays at zero, red while something cannot run. */
.nf-tabs__count { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--neutral-ink); font: var(--weight-semibold) var(--text-11)/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nf-tabs__count--zero { visibility: hidden; }
.nf-tabs__count--alert { background: var(--danger-bg); color: var(--danger-ink); }

/* The Timeline: a day head, sticky, then a row of 56 per planned change; the state and the actions keep their columns. */
.nf-doctimeline { display: flex; flex-direction: column; overflow: auto; }
.nf-doctimeline__head { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-doctimeline__head .nf-check { align-items: center; white-space: nowrap; }
.nf-doctimeline__head .nf-check input { margin-top: 0; }

/* Layout: the type's head with its revision, a grid per field group, Add field at each group's foot, Save layout in the
   block's foot. Controls stay in their places when an older revision opens read only. */
.nf-doclayout { display: flex; flex-direction: column; overflow: auto; }
.nf-doclayout__head { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-doclayout__name { flex: none; margin: 0; font: var(--type-heading); color: var(--text-strong); }
.nf-doclayout__revision { width: auto; min-width: 280px; max-width: 100%; }
.nf-doclayout__readonly { min-width: 0; font: var(--type-note); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-doclayout__block { padding: var(--space-6) var(--space-6) 0; }
.nf-doclayout__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-3); font: var(--type-ui-strong); color: var(--text-strong); }
.nf-doclayout__lang { margin-right: var(--space-2); font: var(--type-caps); letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.nf-doclayout__table th, .nf-doclayout__table td { padding: 0 var(--space-1); }
.nf-doclayout__table td { height: 44px; }
/* A label column's head names its language; below 140 px, at 1440, the code alone, the full name its tooltip. */
.nf-doclayout__th { display: flex; min-width: 0; container-type: inline-size; }
.nf-doclayout__thword { white-space: pre; }
@container (max-width: 139.98px) { .nf-doclayout__thword { display: none; } }
/* At 1440 a label column is about 100 wide; the grid's controls take the UI type and less padding, so Registergericht fits. */
.nf-doclayout__table :is(.nf-input, .nf-select) { height: var(--control-h-sm); padding: 0 var(--space-3); font: var(--type-ui); }
.nf-doclayout__table .nf-input--mono { font: var(--type-mono); }
.nf-doclayout__table .nf-select:disabled { background: var(--surface-tint); color: var(--text-muted); }
.nf-doclayout__required { margin: 0; accent-color: var(--btn-primary); }
.nf-doclayout__groupfoot { padding: var(--space-4) 0 0; }
.nf-doclayout__foot { display: flex; align-items: center; gap: var(--space-6); margin-top: auto; padding: var(--space-6); }
.nf-doclayout__note { min-width: 0; margin: 0; font: var(--type-note); color: var(--text-subtle); }

/* The switch (CONTROLS.md): a 32 by 18 track in the tint, the primary blue when on, a white knob. */
.nf-switch { appearance: none; position: relative; flex: none; width: 32px; height: 18px; margin: 0; border-radius: var(--radius-pill); background: var(--surface-tint); cursor: pointer; transition: var(--transition-control); }
.nf-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-inverse); box-shadow: var(--shadow-block); transition: transform var(--duration-base) var(--ease-out); }
.nf-switch:checked { background: var(--btn-primary); }
.nf-switch:checked::before { transform: translateX(14px); }
.nf-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-switch:disabled { opacity: .45; cursor: not-allowed; }
.nf-doctimeline__list { display: flex; flex-direction: column; }
.nf-doctimeline__day { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card-alt); font: var(--type-subheading); color: var(--text-strong); }
.nf-doctimeline__row { display: grid; grid-template-columns: 52px 24px minmax(0, 1fr) 160px 112px; align-items: center; gap: var(--space-4); height: 56px; padding: 0 var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-doctimeline__time { font: var(--type-ui-strong); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.nf-doctimeline__glyph { font-size: 20px; color: var(--icon-subtle); }
.nf-doctimeline__what { display: flex; flex-direction: column; min-width: 0; }
.nf-doctimeline__sentence { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-ui); color: var(--text-body); }
.nf-doctimeline__by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-note); color: var(--text-subtle); }
.nf-doctimeline__state { min-width: 0; }
.nf-doctimeline__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* The impact view: 760 wide and at most the window less 64, its body scrolling; the When row keeps its date field, faint
   while Now is chosen; the summary line and the grid keep their size while the dry run runs. */
.nf-dialog.nf-impact { display: flex; flex-direction: column; max-height: calc(100% - 64px); }
/* The purge's double check: the warning, what goes and what stays side by side, the other documents' plans it stops, the
   name typed and a reason. The body scrolls inside the dialog; the reserved lines keep their height empty. */
.nf-dialog.nf-purge { display: flex; flex-direction: column; max-height: calc(100% - 64px); }
.nf-purge .nf-dialog__body { display: flex; flex-direction: column; gap: var(--space-6); min-height: 0; overflow-y: auto; }
.nf-purge__warning { margin: 0; }
.nf-purge__warning, .nf-purge__warning .material-symbols-rounded { white-space: normal; }
.nf-purge__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); font: var(--type-ui); font-variant-numeric: tabular-nums; }
.nf-purge__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nf-purge__cap { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font: var(--type-label); text-transform: uppercase; color: var(--text-muted); }
.nf-purge__cap .material-symbols-rounded { font-size: 16px; color: var(--icon-subtle); }
.nf-purge__cap--goes .material-symbols-rounded { color: var(--danger-ink); }
.nf-purge__others { display: flex; flex-direction: column; gap: var(--space-2); font: var(--type-ui); }
.nf-purge__none, .nf-purge__blocks { display: inline-flex; align-items: center; gap: var(--space-3); }
.nf-purge__none .material-symbols-rounded { font-size: 16px; color: var(--need-met); }
.nf-purge__blocks .material-symbols-rounded { font-size: 16px; color: var(--danger-ink); }
.nf-purge__plans { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0 0 0 calc(16px + var(--space-3)); list-style: none; }
.nf-purge__plans li { display: flex; flex-direction: column; min-width: 0; }
.nf-purge__sentence { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-purge__when { font: var(--type-note); color: var(--text-subtle); }
.nf-purge__name { font: var(--type-mono); color: var(--text-strong); user-select: all; overflow-wrap: anywhere; }
.nf-purge__namebox { position: relative; display: block; }
.nf-purge__namebox .nf-input { width: 100%; padding-right: 32px; }
.nf-purge__met { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 18px; color: var(--need-met); }
.nf-purge__line { display: flex; align-items: center; gap: var(--space-2); min-height: 1lh; font: var(--type-note); color: var(--danger-ink); }
.nf-purge__line .material-symbols-rounded, .nf-purge__failed .material-symbols-rounded { font-size: 16px; }
.nf-purge__failed { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: var(--type-note); color: var(--danger-ink); }
@media (max-width: 671.98px) { .nf-purge__cols { grid-template-columns: minmax(0, 1fr); } }
.nf-impact .nf-dialog__body { display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; overflow: auto; }
.nf-impact__plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5) var(--space-6); }
.nf-impact__wide { grid-column: 1 / -1; }
.nf-impact__targets { border: 1px solid var(--border-field); border-radius: var(--radius-md); overflow: hidden; }
.nf-impact__validfrom { max-width: 320px; }
.nf-impact__when { display: grid; grid-template-columns: auto auto minmax(0, 260px); align-items: center; gap: var(--space-5); justify-content: start; }
.nf-impact__at--off { opacity: .45; }
.nf-impact__includes { min-height: 1lh; margin: 0; font: var(--type-note); color: var(--text-muted); }
.nf-impact__summary { display: flex; align-items: center; gap: var(--space-3); min-height: 1lh; margin: 0; font: var(--type-body); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.nf-impact__summary--refused { color: var(--danger-ink); }
.nf-impact__met { font-size: 18px; color: var(--need-met); }
.nf-impact__grid { flex: 0 0 auto; height: calc(34px + 8 * var(--row-h-grid-dense)); overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.nf-impact__table th { position: sticky; top: 0; z-index: 1; background: var(--surface-card); }
.nf-impact__table td { height: var(--row-h-grid-dense); }
.nf-impact__name { font: var(--type-ui-strong); color: var(--text-strong); }
.nf-impact__none { color: var(--warning-ink); }
.nf-impact__help { margin: 0; font: var(--type-note); color: var(--text-subtle); }
.nf-docgroup { display: flex; flex-direction: column; overflow: hidden; }
.nf-docgroup__head { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card-alt); font: var(--type-subheading); color: var(--text-strong); }
.nf-docgroup__title { min-width: 0; margin: 0; font: inherit; color: inherit; }
/* Assist's button of a block or the whole version stands at the left of its row, never at the right end, which the panel
   covers; in a group's head it takes no height of its own, so the heads keep theirs. Below 1440 it shows its glyph alone. */
.nf-docgroup__head .nf-docassist__btn { margin-block: -4px; }
.nf-docassist--target { box-shadow: var(--shadow-block), 0 0 0 2px var(--border-focus); }
@media (max-width: 1439.98px) {
    .nf-docassist__btn { gap: 0; width: var(--control-h-sm); padding: 0; }
    .nf-docassist__label { display: none; }
}
.nf-docgroup__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding: var(--space-6); }
.nf-docfield { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.nf-docfield--wide { grid-column: 1 / -1; }
.nf-docfield__box { position: relative; display: flex; align-items: center; }
.nf-docfield__box--glyph .nf-input { padding-left: 34px; }
.nf-docfield__box:has(.nf-docfield__open) .nf-input { padding-right: 36px; }
.nf-docfield__glyph { position: absolute; left: 10px; font-size: 18px; color: var(--icon-subtle); pointer-events: none; }
.nf-docfield__open { position: absolute; right: 2px; width: 28px; height: 28px; }
.nf-docfield .nf-textarea { field-sizing: content; min-height: calc(3lh + 18px); max-height: calc(8lh + 18px); }
.nf-docfield__hint { min-height: 17px; color: var(--warning-ink); }
/* A version that took effect: the fields lose their box and keep full ink, readable and copyable. */
.nf-docfield .nf-input[readonly], .nf-docfield .nf-textarea[readonly] { border-color: transparent; background: transparent; resize: none; }
.nf-doctext { display: flex; flex-direction: column; overflow: hidden; }
.nf-doctext__previewbtn { margin-left: var(--space-2); }
.nf-doctext__panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.nf-doctext__source { min-height: 320px; max-height: calc(100vh - 280px); overflow-y: auto; }
.nf-doctext__preview { display: none; min-width: 0; max-height: calc(100vh - 280px); overflow-y: auto; padding: var(--space-6); }
.nf-doctext--previewing .nf-doctext__source { display: none; }
.nf-doctext--previewing .nf-doctext__preview, .nf-doctext--readonly .nf-doctext__preview { display: block; }
.nf-inspector .nf-group.nf-docversions, .nf-inspector .nf-group.nf-dochistory, .nf-drawer .nf-docversions, .nf-drawer .nf-dochistory { gap: 0; padding: 0; }
.nf-docversions__row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4) 0 var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-docversions__row--open { background: var(--surface-selected); }
.nf-docversions__link { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: var(--space-3) 0; color: var(--text-body); text-decoration: none; }
.nf-docversions__head { display: flex; align-items: center; gap: var(--space-4); }
.nf-docversions__head b { font: var(--type-ui-strong); color: var(--text-strong); }
.nf-docversions__dates { font: var(--type-note); color: var(--text-subtle); }
.nf-dochistory__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.nf-dochistory__what { font: var(--type-ui-strong); color: var(--text-strong); }
.nf-dochistory__who { font: var(--type-note); color: var(--text-subtle); }
@media (max-width: 1599.98px) {
    .nf-toolbar .nf-btn--bulk .nf-docedit__caret { display: none; }
}
@media (max-width: 1199.98px) {
    .nf-docs { grid-template-columns: minmax(0, 1fr); }
    .nf-doctypes { display: none; }
    .nf-doctypes__select { display: block; }
}
@media (max-width: 879.98px) {
    .nf-docgroup__body { grid-template-columns: minmax(0, 1fr); }
}
/* From 1920 a text's preview stands beside its source, and the Preview button has nothing left to switch. */
@media (min-width: 1920px) {
    .nf-doctext:not(.nf-doctext--readonly) .nf-doctext__panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .nf-doctext .nf-doctext__preview, .nf-doctext--previewing .nf-doctext__source { display: block; }
    .nf-doctext:not(.nf-doctext--readonly) .nf-doctext__preview { border-left: 1px solid var(--border-subtle); }
    .nf-doctext__previewbtn { display: none; }
}