/* ================================================================
   PostPro Nexus - Console design system - SHARED COMPONENT LAYER
   ----------------------------------------------------------------
   Every rule here is built from --nx-* tokens only (css/tokens.css).
   No literal colours. A brand-new page must be buildable from this
   file alone - if a page needs a rule that isn't here, the rule
   belongs here, not in a per-page <style> block.

   Prefix: .c-  (the legacy layer already owns .nx-)

   Sections
     0  Fonts + base
     1  App shell + top bar
     2  Buttons
     3  Inputs + form controls
     4  Chips, tags, status dots, overlines
     5  Toolbar row (search / view tabs / filters / actions)
     6  KPI ribbon
     7  Register table
     8  Pager
     9  Detail page (breadcrumb, header band, tabs, grid, rail)
    10  Property rows + inline edit
    11  Modals
    12  Skeletons + progress hairline
    13  Batch tray
    14  Queue rail + settings shell
    15  Utilities
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============ 0. FONTS + BASE ==================================== */

/* nexus.css sets Inter on BOTH `html` (0,0,1) and `body` (0,0,1), and it
   also sets Inter-specific font-feature-settings. `html:root` (0,1,1) and
   `html body` (0,0,2) each out-rank their counterpart without !important.
   Both are needed: the injected top bar is a direct child of <body>, so a
   rule scoped to the page container alone would leave the chrome in Inter. */
html:root {
  font-family: var(--nx-font-sans);
}
html body {
  font-family: var(--nx-font-sans);
  font-feature-settings: normal;   /* 'cv11','ss01','ss03' are Inter-only */
}

.c-app {
  background: var(--nx-page-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-body);
  min-height: 100vh;
}

.c-mono {
  font-family: var(--nx-font-mono);
  font-variant-numeric: tabular-nums;
}

/* The empty marker is a plain hyphen (library section 5) */
.c-empty {
  color: var(--nx-empty);
}

.c-link {
  color: var(--nx-accent-text);
  font-weight: 500;
  text-decoration: none;
}
.c-link:hover { text-decoration: underline; }

/* ============ 1. APP SHELL + TOP BAR ============================= */

.c-topbar {
  height: var(--nx-topbar-h);
  background: var(--nx-topbar-bg);
  border-bottom: 1px solid var(--nx-topbar-line);
  display: flex;
  align-items: center;
  gap: var(--nx-s6);
  padding: 0 var(--nx-gutter);
  position: sticky;
  top: 0;
  z-index: 900;
}

.c-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  text-decoration: none;
  flex: 0 0 auto;
}
.c-topbar-mark {
  width: 10px;
  height: 10px;
  background: var(--nx-accent);
  border-radius: 2px;
  display: inline-block;
}
.c-topbar-word {
  color: var(--nx-topbar-fg);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  font-weight: 600;
  letter-spacing: .14em;
}

.c-topbar-tabs {
  display: flex;
  gap: 2px;
  height: var(--nx-topbar-h);
  align-items: stretch;
  min-width: 0;
  /* Users pin their own tab set: past the available width the strip
     scrolls horizontally (never wraps into the jump field), with the
     scrollbar kept quiet. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.c-topbar-tabs::-webkit-scrollbar { display: none; }
.c-topbar-tab {
  display: flex;
  align-items: center;
  padding: 0 var(--nx-s3);
  color: var(--nx-topbar-dim);
  font-size: var(--nx-fs-body);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.c-topbar-tab:hover { color: var(--nx-topbar-fg); }
.c-topbar-tab.is-active {
  color: var(--nx-topbar-active);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--nx-accent);
}

.c-topbar-spacer { flex: 1; }

/* Global jump field - "Jump to anything... <kbd>" */
.c-jump {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--nx-r-control);
  padding: 5px 10px;
  color: var(--nx-topbar-dim);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  cursor: pointer;
  min-width: 200px;
}
.c-jump:hover { border-color: rgba(255, 255, 255, .24); }

.c-topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nx-accent);
  color: var(--nx-topbar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nx-fs-meta);
  font-weight: 700;
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
}
.c-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The legacy #userInfo badge is only a mount point now - the Console avatar
   replaces it visually, but the element has to stay so nexus-core can anchor
   the Teams presence pill beside it. */
.c-topbar #userInfo { display: none; }

/* Presence pill, restyled for the ink bar */
.c-topbar .presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-topbar-dim);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--nx-r-chip);
  padding: 3px 8px;
  margin-right: var(--nx-s2);
}

/* Admin mode tag - rose, mono */
.c-admin-tag {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-rose-fg-2);
  border: 1px solid var(--nx-rose-line);
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 6px;
}

/* Key hint - the OS-aware glyph swaps via JS, never CSS */
.c-kbd {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 6px;
  color: inherit;
  white-space: nowrap;
}

/* ============ 2. BUTTONS ========================================= */

.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--nx-r-control);
  border: 1px solid var(--nx-btn-ghost-line);
  background: var(--nx-btn-ghost-bg);
  color: var(--nx-ink);
  cursor: pointer;
  white-space: nowrap;
  /* A .c-btn is sometimes an <a> (auth-callback retry, segment links) - a
     button never carries the anchor underline. */
  text-decoration: none;
  transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.c-btn:hover { background: var(--nx-sunken); }
.c-btn:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 1px;
}
.c-btn[disabled], .c-btn:disabled {
  color: var(--nx-empty);
  cursor: not-allowed;
  background: var(--nx-sunken);
}

.c-btn--primary {
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
  border-color: var(--nx-btn-primary-bg);
  font-weight: 600;
  padding: 7px 14px;
}
.c-btn--primary:hover { background: var(--nx-btn-primary-bg); opacity: .9; }

.c-btn--danger {
  color: var(--nx-rose-fg-2);
  border-color: var(--nx-rose-line);
  background: var(--nx-btn-ghost-bg);
}
.c-btn--danger:hover { background: var(--nx-rose-tint); }

.c-btn--danger-solid {
  background: var(--nx-rose-fg-2);
  color: var(--nx-on-rose);
  border-color: var(--nx-rose-fg-2);
  font-weight: 600;
}
.c-btn--danger-solid[disabled] {
  background: var(--nx-rose-bg);
  color: var(--nx-rose-fg);
  border-color: var(--nx-rose-line);
}

.c-btn--dashed {
  border-style: dashed;
  border-color: var(--nx-dashed-line);
  color: var(--nx-muted);
}

.c-btn--sm {
  font-size: var(--nx-fs-meta);
  padding: 3px 8px;
}

.c-btn--icon {
  padding: 6px;
  width: 30px;
  height: 30px;
  justify-content: center;
}

/* ============ 3. INPUTS + FORM CONTROLS ========================== */

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.c-input::placeholder,
.c-textarea::placeholder { color: var(--nx-faint); }

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
  outline: none;
  border-color: var(--nx-accent);
  box-shadow: 0 0 0 3px var(--nx-accent-soft-bg);
}
.c-input[disabled], .c-select[disabled], .c-textarea[disabled] {
  color: var(--nx-empty);
  background: var(--nx-sunken);
  cursor: not-allowed;
}

.c-textarea { min-height: 76px; resize: vertical; }

/* Mono input for a value that is read character by character - an email, a
   serial, a key. Copy rule: mono for ids, emails, dates. */
.c-input--mono {
  font-family: var(--nx-font-mono);
  font-size: 11.5px;
}

/* Country code + number, as one field (board 11b PHONE / MOBILE).
   nexus-select replaces the visible control with a sibling .c-select-trigger
   that carries width:100% - in a flex row that makes the code box eat the
   number field, so the width has to be pinned on the TRIGGER, not the
   (absolutely positioned, invisible) native select. */
.c-phonerow { display: flex; gap: 6px; }
.c-phonerow .c-select,
.c-phonerow .c-select-trigger {
  flex: 0 0 96px;
  width: 96px;
  min-width: 0;
  padding-left: 10px;
  padding-right: 8px;
  overflow: hidden;
}
.c-phonerow .c-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-phonerow .c-select-caret { margin-left: auto; }
.c-phonerow .c-input { flex: 1; min-width: 0; }

.c-field { display: flex; flex-direction: column; gap: 4px; }
.c-field-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.c-field-hint { font-size: var(--nx-fs-meta); color: var(--nx-faint); }
.c-field-error { font-size: var(--nx-fs-meta); color: var(--nx-rose-fg-2); }

/* Toggle 34x20 */
.c-toggle {
  appearance: none;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--nx-border-strong);
  position: relative;
  cursor: pointer;
  border: 0;
  transition: background var(--nx-dur) var(--nx-ease);
  flex: 0 0 auto;
}
.c-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nx-surface);
  transition: transform var(--nx-dur) var(--nx-ease);
}
.c-toggle:checked { background: var(--nx-accent); }
.c-toggle:checked::after { transform: translateX(14px); }

/* Stepper  - n + */
.c-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  overflow: hidden;
  background: var(--nx-surface);
}
.c-stepper button {
  border: 0;
  background: none;
  color: var(--nx-muted);
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--nx-fs-body);
}
.c-stepper button:hover { background: var(--nx-sunken); }
.c-stepper-value {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  padding: 0 var(--nx-s2);
  min-width: 28px;
  text-align: center;
}

/* Console select. The real <select> stays in the DOM for forms and scripts,
   but is visually replaced by a trigger + attached menu, because a native
   select hands its list to the OS - which renders a huge grey popup that
   ignores the design entirely (library 3e). */
.c-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.c-select-trigger {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  width: 100%;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
}
.c-select-trigger:hover { border-color: var(--nx-muted); }
.c-select-trigger:focus-visible,
.c-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--nx-accent);
  box-shadow: 0 0 0 3px var(--nx-accent-soft-bg);
}
.c-select-trigger[disabled] {
  color: var(--nx-empty);
  background: var(--nx-sunken);
  cursor: not-allowed;
}
.c-select-trigger.is-placeholder .c-select-value { color: var(--nx-faint); }
.c-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-select-caret { color: var(--nx-faint); font-size: var(--nx-fs-meta); line-height: 1; }

/* The attached list reuses the lookup panel */
.c-select-menu { z-index: 1300; }

/* Attached select menu */
.c-menu {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  box-shadow: var(--nx-shadow-menu);
  padding: 4px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
}
/* A menu row is a row, whatever element it happens to be. Without these
   resets an <a> keeps the browser underline and a <button> keeps its border
   and grey fill, and the menu reads as a stack of loose controls. */
.c-menu-item {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  width: 100%;
  padding: 7px 10px;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--nx-ink);
  background: none;
  border: 0;
  border-radius: var(--nx-r-chip);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.c-menu-item:hover { background: var(--nx-sunken); text-decoration: none; }
/* Destructive row in an overflow menu - rose is reserved for exactly this */
.c-menu-item--danger { color: var(--nx-rose-fg-2); }
.c-menu-item--danger:hover { background: var(--nx-rose-tint); }
.c-menu-item:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: -2px;
}
/* A locked row (Home in the customize-tabs panel) stays readable but
   does not invite a click. */
.c-menu-item:disabled { color: var(--nx-faint); cursor: default; }
.c-menu-item:disabled:hover { background: none; }

/* Identity block at the top of the account menu - not a row you can click */
.c-menu-identity {
  padding: 10px;
  border-bottom: 1px solid var(--nx-row-divider);
  margin-bottom: 4px;
}
.c-menu-identity-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  color: var(--nx-ink);
}
.c-menu-identity-mail {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  margin-top: 2px;
  word-break: break-all;
}
.c-menu-sep {
  height: 1px;
  background: var(--nx-row-divider);
  margin: 4px 0;
}
.c-menu-item.is-selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--nx-accent);
}
.c-menu-footer {
  border-top: 1px solid var(--nx-row-divider);
  padding: 6px 10px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  display: flex;
  gap: var(--nx-s2);
}

/* User lookup row: avatar + name + mono email */
.c-lookup-row {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 6px 10px;
  border-radius: var(--nx-r-chip);
  cursor: pointer;
}
.c-lookup-row:hover { background: var(--nx-sunken); }
.c-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nx-fs-meta-sm);
  font-weight: 600;
  overflow: hidden;
  flex: 0 0 auto;
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-lookup-email {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  margin-left: auto;
}

/* ============ 4. CHIPS, TAGS, STATUS ============================= */

.c-overline {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
}

.c-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 4px;
  color: var(--nx-faint);
  border: 1px solid var(--nx-border-strong);
  white-space: nowrap;
}
.c-tag--dashed { border-style: dashed; border-color: var(--nx-dashed-line); }
.c-tag--green  { color: var(--nx-green-fg); background: var(--nx-green-bg); border-color: transparent; }
.c-tag--amber  { color: var(--nx-amber-fg); background: var(--nx-amber-bg); border-color: transparent; }
.c-tag--rose   { color: var(--nx-rose-fg);  background: var(--nx-rose-bg);  border-color: transparent; }
.c-tag--accent { color: var(--nx-accent-soft-fg); background: var(--nx-accent-soft-bg); border-color: transparent; }
/* SLA tier badge beside an organisation. Accent-soft rather than a filled ink
   chip: it sits on a list sub-line of quiet grey text, so a solid dark block read
   as heavier than the ticket subject above it. The tier's own `color` column is
   deliberately NOT used — colour in this list already means SLA state (rose =
   breached, amber = due) and a per-tier colour would compete with that.
   Tighter than the base .c-tag on both axes for the same reason. */
.c-tag--tier {
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-color: transparent;
  font-weight: 600;
  padding: 0 5px;
  letter-spacing: .07em;
}

/* Organisation + its SLA tier badge on a list sub-line. The sub-line truncates
   with an ellipsis, which would eat a trailing badge on a long company name —
   and long names are the norm here ("... Anlagenbau GmbH & Co. KG"). Laid out so
   the NAME gives way and the badge never does: the badge is the signal, and the
   full name is still in the row's title attribute. */
.c-cell-org { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: bottom; }
.c-cell-org-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-cell-org > .c-tag { flex: 0 0 auto; }

/* Type code box, e.g. SFX / PP3D */
.c-typecode {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
  padding: 2px 5px;
  text-align: center;
  display: inline-block;
  color: var(--nx-ink);
}

/* Status = dot + mono caps */
.c-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  text-transform: uppercase;
  color: var(--nx-ink);
  white-space: nowrap;
}
.c-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: var(--nx-empty);
  flex: 0 0 auto;
}
.c-dot--green { background: var(--nx-green-dot); }
.c-dot--amber { background: var(--nx-amber-dot); }
.c-dot--rose  { background: var(--nx-rose-fg-2); }
.c-dot--muted { background: var(--nx-empty); }
.c-dot--accent { background: var(--nx-accent); }

/* Filter chip: active = accent-soft with a dismiss */
.c-filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--nx-r-control);
  border: 0;
  cursor: default;
  white-space: nowrap;
}
.c-filterchip-x {
  opacity: .6;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: var(--nx-fs-secondary);
  line-height: 1;
}
.c-filterchip-x:hover { opacity: 1; }

/* Board 11d: one chip row replaces the label-above-dropdown wall. The chip
   states the APPLIED value as text; clicking it opens an editor attached
   below. The open chip flips to the ink fill so the panel has a visible owner
   - that is the "dark chip" the board's caption points at. */
.c-filterchip--open {
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
}
.c-filterchip-btn {
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.c-filterchip-btn:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 3px;
  border-radius: var(--nx-r-chip-sm);
}

/* The row itself: own line under the toolbar, positioned so the editor can
   overlap what follows instead of pushing the KPI ribbon down. */
.c-filterbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  flex-wrap: wrap;
  padding: 10px var(--nx-gutter) 0;
}
.c-filterbar.hidden { display: none; }
/* "Clear all" is a text action, not a bordered button - it must not compete
   with the chips it clears. */
.c-filterbar-clear {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  color: var(--nx-muted);
  padding: 5px var(--nx-s1);
  cursor: pointer;
}
.c-filterbar-clear:hover { color: var(--nx-ink); }
.c-filterbar-note {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* Attached editor for one chip (board 11d). Absolute inside .c-filterbar, so
   it needs no scroll listener to stay put - and no re-append, which would
   cancel a scrollbar drag inside it. */
.c-filteredit {
  position: absolute;
  z-index: 60;
  width: 280px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-menu);
  padding: var(--nx-s3) 14px;
}
.c-filteredit-title {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  margin-bottom: var(--nx-s2);
}
.c-filteredit-row { display: flex; gap: var(--nx-s2); }
.c-filteredit-row .c-select { flex: 1; min-width: 0; }
.c-filteredit-num {
  flex: 0 0 70px;
  font-family: var(--nx-font-mono);
}
/* No native spinners: they appear on focus and eat a third of a 70px box. */
.c-filteredit-num { -moz-appearance: textfield; appearance: textfield; }
.c-filteredit-num::-webkit-outer-spin-button,
.c-filteredit-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-filteredit-foot {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  margin-top: 10px;
}
/* A destructive action rendered as text, not a button - board 14c/14d put
   "Cancel planning item..." and "Archive..." at the foot of a rail card, where
   a rose-filled button would shout louder than the card's real purpose. */
.c-linkdanger {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-rose-fg-2);
  text-align: left;
  cursor: pointer;
  display: block;
}
.c-linkdanger:hover { text-decoration: underline; }

/* Destructive action, so rose - and text-only, because removing a filter is
   not the panel's primary action. Apply is. */
.c-filteredit-remove {
  flex: 1;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--nx-rose-fg-2);
  text-align: left;
  padding: var(--nx-s1) 0;
  cursor: pointer;
}

/* The value inside a filter chip is a bare select - the chip is the frame */
.c-filterchip-select {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--nx-fs-secondary);
  cursor: pointer;
  max-width: 140px;
  padding: 0 2px 0 0;
}
.c-filterchip-select:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 2px;
  border-radius: var(--nx-r-chip-sm);
}

/* 2-letter mono glyph square (never an icon tile) */
.c-glyph {
  width: 32px;
  height: 32px;
  border-radius: var(--nx-r-control);
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  color: var(--nx-muted);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
}

/* ============ 5. TOOLBAR ROW ===================================== */

/* Row 1 under the top bar: module search FIRST, then view tabs,
   filter chips, spacer, ghost actions, primary. */
.c-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--nx-gutter) 12px;
  flex-wrap: wrap;
}

.c-search {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 0 12px;
  height: 32px;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.c-search:focus-within {
  border-color: var(--nx-accent);
  box-shadow: 0 0 0 3px var(--nx-accent-soft-bg);
}
.c-search-icon { color: var(--nx-accent); font-size: var(--nx-fs-body); line-height: 1; }
.c-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  padding: 0;
}
.c-search input::placeholder { color: var(--nx-faint); }
.c-search .c-kbd { color: var(--nx-faint); }
/* the "/" hint is redundant once the field has focus */
.c-search:focus-within .c-kbd { visibility: hidden; }

/* Segmented view tabs */
.c-segment {
  display: flex;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  overflow: hidden;
  background: var(--nx-surface);
}
/* A segment entry may be a button (tab behaviour) or a plain link to a
   sibling page (Components: Catalog | Inventory | Recently deleted). */
.c-segment button,
.c-segment a {
  padding: 6px 12px;
  font-size: var(--nx-fs-secondary);
  font-family: inherit;
  color: var(--nx-muted);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.c-segment button:hover,
.c-segment a:hover { background: var(--nx-sunken); }
.c-segment button.is-active,
.c-segment a.is-active {
  font-weight: 600;
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
}

/* ============ 6. KPI RIBBON ====================================== */

/* One bordered surface bar, cells split by row-divider */
.c-kpi {
  margin: 0 var(--nx-gutter) 12px;
  display: flex;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-kpi-cell {
  flex: 1;
  padding: 10px var(--nx-s4);
  border-right: 1px solid var(--nx-row-divider);
  min-width: 0;
  text-align: left;
  background: none;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font-family: inherit;
}
.c-kpi-cell:last-child { border-right: 0; }
.c-kpi-cell[role="button"], button.c-kpi-cell { cursor: pointer; }
.c-kpi-cell[role="button"]:hover, button.c-kpi-cell:hover { background: var(--nx-sunken); }
.c-kpi-cell.is-active { background: var(--nx-selected-row); }
.c-kpi-num {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-kpi);
  font-weight: 600;
  color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
}
.c-kpi-num--accent { color: var(--nx-accent); }
.c-kpi-num--green  { color: var(--nx-green-fg); }
.c-kpi-num--amber  { color: var(--nx-amber-fg); }
.c-kpi-num--rose   { color: var(--nx-rose-fg-2); }
.c-kpi-num--muted  { color: var(--nx-faint); }
/* A KPI cell whose value is a word, not a number - the ribbon slot still
   applies but 18px mono on a phrase reads as shouting. */
.c-kpi-num--text {
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-body);
  font-weight: 600;
  line-height: 1.5;
}
.c-kpi-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}

/* ============ 7. REGISTER TABLE ================================== */

.c-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}

.c-tablewrap {
  margin: 0 var(--nx-gutter) var(--nx-s4);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-tablescroll { overflow-x: auto; }

/* Mono note under a register, for the rules a column cannot state (board 11b:
   where Delete lives, that rows load on scroll). Sits on the page background,
   outside the table card. */
.c-tablefoot {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  margin: -8px var(--nx-gutter) var(--nx-s4);
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-overline);
  text-transform: uppercase;
  color: var(--nx-faint);
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-fs-body);
}
.c-table thead th {
  text-align: left;
  padding: 8px var(--nx-s4);
  border-bottom: 1px solid var(--nx-line);
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--nx-surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.c-table tbody td {
  padding: 9px var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
  vertical-align: middle;
  color: var(--nx-ink);
}
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr:hover { background: var(--nx-sunken); }
.c-table tbody tr.is-selected { background: var(--nx-selected-row); }
/* Attention rows */
.c-table tbody tr.is-rose  { background: var(--nx-rose-tint); }
.c-table tbody tr.is-amber { background: var(--nx-amber-tint); }

/* Two-line primary cell: 13/500 over 11 muted */
.c-cell-primary { font-size: var(--nx-fs-body); font-weight: 500; color: var(--nx-ink); }
.c-cell-sub     { font-size: var(--nx-fs-meta); color: var(--nx-muted); margin-top: 1px; }
.c-cell-mono    { font-family: var(--nx-font-mono); font-size: 12.5px; font-weight: 600; }
.c-cell-meta    { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.c-cell-quiet   { font-size: var(--nx-fs-secondary); color: var(--nx-muted); }
/* Row actions, right-aligned: the primary verb then the overflow (board 11b).
   Deliberately NOT display:flex - a <td> with display:flex leaves the table's
   column model, so the cell stops lining up under its <th>. */
.c-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.c-cell-actions > * + * { margin-left: 6px; }

.c-table a.c-cell-link { color: var(--nx-ink); text-decoration: none; }
.c-table a.c-cell-link:hover { color: var(--nx-accent-text); }

/* Row actions column */
.c-rowactions { display: flex; gap: 4px; justify-content: center; }

/* Empty + loading states inside a table */
.c-table-empty {
  padding: 48px var(--nx-s4);
  text-align: center;
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary-lg);
}

/* ============ 8. PAGER =========================================== */

.c-pager {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 9px var(--nx-s4);
  border-top: 1px solid var(--nx-line);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
}
.c-pager-spacer { flex: 1; }
.c-pager button {
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  color: var(--nx-ink);
  border-radius: var(--nx-r-chip);
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--nx-fs-meta);
}
.c-pager button:hover:not([disabled]) { background: var(--nx-sunken); }
.c-pager button[disabled] { color: var(--nx-empty); cursor: not-allowed; }
.c-pager-size { display: inline-flex; align-items: center; gap: 6px; }
.c-pager-size select {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-ink);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
  padding: 1px 4px;
}

/* ============ 9. DETAIL PAGE ===================================== */

.c-detailbar {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 14px var(--nx-gutter) 0;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  flex-wrap: wrap;
}
.c-crumb { color: var(--nx-faint); text-decoration: none; }
.c-crumb:hover { color: var(--nx-accent-text); }
.c-crumb-current { color: var(--nx-ink); }
/* The "/" between crumbs. The breadcrumb nav sets its own gap, so the
   separator only needs to be quieter than the crumbs it sits between. */
.c-crumb-sep { color: var(--nx-empty); }
.c-detailbar-spacer { flex: 1; }

/* ‹ › record pager */
.c-recordpager { display: inline-flex; gap: 2px; }
.c-recordpager button {
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  color: var(--nx-muted);
  border-radius: var(--nx-r-chip);
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.c-recordpager button:hover:not([disabled]) { background: var(--nx-sunken); color: var(--nx-ink); }
.c-recordpager button[disabled] { color: var(--nx-empty); cursor: not-allowed; }

/* Header band card */
.c-headerband {
  margin: 12px var(--nx-gutter);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s4) var(--nx-gutter);
  display: flex;
  align-items: center;
  gap: var(--nx-s4);
  flex-wrap: wrap;
}
.c-headerband-id {
  font-family: var(--nx-font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--nx-ink);
  line-height: 1.1;
}
.c-headerband-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--nx-ink);
}
.c-headerband-chips { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.c-headerband-meta {
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  margin-left: auto;
}

/* Header-band chip is a size up from a table tag */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  border-radius: var(--nx-r-chip);
  padding: 3px 7px;
  color: var(--nx-ink);
  border: 1px solid var(--nx-border-strong);
  white-space: nowrap;
}
.c-chip--green  { color: var(--nx-green-fg); background: var(--nx-green-bg); border-color: transparent; }
.c-chip--amber  { color: var(--nx-amber-fg); background: var(--nx-amber-bg); border-color: transparent; }
.c-chip--rose   { color: var(--nx-rose-fg);  background: var(--nx-rose-bg);  border-color: transparent; }
.c-chip--rose-outline { color: var(--nx-rose-fg); border-color: var(--nx-rose-line); background: none; }
.c-chip--accent { color: var(--nx-accent-soft-fg); background: var(--nx-accent-soft-bg); border-color: transparent; }

/* LIVE pill - the inline-edit explainer */
.c-livepill {
  margin: 0 var(--nx-gutter) 12px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  background: var(--nx-live-bg);
  border: 1px solid var(--nx-accent-soft-line);
  color: var(--nx-accent-soft-fg);
  font-size: var(--nx-fs-secondary);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
}
.c-livepill-tag {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  background: var(--nx-accent-soft-fg);
  color: var(--nx-live-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
}

/* Underline tabs */
.c-tabs {
  display: flex;
  gap: var(--nx-s4);
  padding: 0 var(--nx-gutter) 12px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  border-bottom: 1px solid var(--nx-line);
  margin: 0 var(--nx-gutter);
  overflow-x: auto;
}
.c-tab {
  padding-bottom: var(--nx-s2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}
.c-tab:hover { color: var(--nx-ink); }
.c-tab.is-active {
  color: var(--nx-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--nx-accent);
}

/* Body grid 1fr 320px */
.c-detailgrid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--nx-s4);
  padding: var(--nx-s4) var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
.c-detailmain { display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }
.c-detailrail { display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }

@media (max-width: 1080px) {
  .c-detailgrid { grid-template-columns: 1fr; }
}

/* Section card inside the detail body */
.c-section {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 14px var(--nx-s4);
}
.c-section-title {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  margin-bottom: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
}
.c-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px var(--nx-gutter);
}
.c-section-grid--1 { grid-template-columns: 1fr; }
.c-section-grid--2 { grid-template-columns: repeat(2, 1fr); }
.c-section-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-section-grid--wide { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 900px) {
  .c-section-grid,
  .c-section-grid--3,
  .c-section-grid--wide { grid-template-columns: repeat(2, 1fr); }
}

/* Rail photo card - the type-linked machine asset */
.c-photo {
  width: 100%;
  height: 190px;
  border-radius: var(--nx-r-control);
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c-photo img { width: 100%; height: 100%; object-fit: contain; }
.c-photo-empty {
  color: var(--nx-empty);
  font-size: var(--nx-fs-secondary);
  text-align: center;
  padding: var(--nx-s3);
}
.c-photo-caption {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  margin-top: var(--nx-s2);
  padding: 0 4px;
}

/* Rail mini-KPI pair */
.c-minikpis { display: flex; gap: 10px; }
.c-minikpi {
  flex: 1;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 10px;
}
.c-minikpi--amber { border-color: var(--nx-amber-tint-line); background: var(--nx-amber-tint-2); }
.c-minikpi-num {
  font-family: var(--nx-font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--nx-ink);
}
.c-minikpi--amber .c-minikpi-num { color: var(--nx-amber-strong); }
.c-minikpi-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}

/* Activity list - mono timestamps */
.c-activity { display: flex; flex-direction: column; gap: var(--nx-s2); font-size: 11.5px; color: var(--nx-muted); }
.c-activity-time { font-family: var(--nx-font-mono); color: var(--nx-faint); }

/* ============ 10. PROPERTY ROWS + INLINE EDIT ==================== */

.c-prop { min-width: 0; }
/* A stack of property rows in a rail card (board 14c Details) */
.c-proplist { display: flex; flex-direction: column; gap: 10px; }
.c-prop-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-faint);
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.c-prop-value {
  font-size: var(--nx-fs-body);
  color: var(--nx-ink);
  word-break: break-word;
}
.c-prop-value.is-empty { color: var(--nx-empty); }
.c-prop-note { font-size: var(--nx-fs-meta); color: var(--nx-faint); font-weight: 400; }

/* Inline edit. Nothing about the editing state may change the box: the value
   itself becomes contentEditable and the only visual change is an `outline`,
   which is painted outside the box model and never reflows. Padding, margin,
   font and line-height are therefore IDENTICAL in both states - that is what
   guarantees no layout shift on click. Controls that cannot be contentEditable
   (select, date, lookup) open in an attached panel instead of swapping a
   larger field into the row. */
.c-edit {
  border-radius: var(--nx-r-chip);
  padding: 1px 4px;
  margin: -1px -4px;
  cursor: text;
  outline: 1px dashed transparent;
  outline-offset: 2px;
  transition: outline-color var(--nx-dur) var(--nx-ease);
}
.c-edit:hover { outline-color: var(--nx-accent); }
.c-edit:focus-visible { outline: 1px dashed var(--nx-accent); }

/* Same metrics as .c-edit above - only the outline differs. */
.c-edit.is-editing {
  outline: 1.5px solid var(--nx-accent);
  outline-offset: 2px;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
}
.c-edit.is-editing:focus { outline: 1.5px solid var(--nx-accent); }

.c-edit.is-saving { opacity: .6; }
.c-edit.is-error  { outline: 1.5px solid var(--nx-rose-fg-2); }

/* Derived / inherited values are not editable and say so */
.c-edit--locked { cursor: default; }
.c-edit--locked:hover { outline-color: transparent; }

/* The date popover holds a native picker; give it room without borrowing the
   legacy input styling nexus.css applies to bare inputs. */
.c-lookup .c-lookup-search input[type="date"] {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  background: none;
  border: 0;
  outline: none;
  padding: 2px 0;
}

/* Floating confirm chip. A dark pill that sits OUTSIDE the field, to its
   right - not stacked inside it. Colours are the primary-button pair, so it
   flips to teal-on-dark in dark mode exactly like the board's chipbg/chipfg.
   Positioned with position:fixed + getBoundingClientRect so it escapes any
   scroll or overflow container. */
.c-savechip {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--nx-r-control);
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  white-space: nowrap;
}
.c-savechip button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.c-savechip button:hover { opacity: .75; }
/* The revert glyph is deliberately quieter than the confirm glyph */
.c-savechip button.c-savechip-no { opacity: .55; }
.c-savechip button.c-savechip-no:hover { opacity: .9; }

/* "Saved" flash - same pill, no buttons, pops and fades */
.c-savechip--flash {
  pointer-events: none;
  animation: c-pop 1.4s ease forwards;
}
@keyframes c-pop {
  0%   { opacity: 0; transform: translateY(5px); }
  12%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .c-savechip--flash { animation: none; opacity: 1; }
}

/* ---- Inline relationship lookup (library section 3e) ----------------
   Used for owner / managed organization, application engineer, and any
   other field whose value is another record. Attached below the field:
   a search input, avatar+name+mono-email rows, and a footer key strip. */
.c-lookup {
  position: fixed;
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  box-shadow: var(--nx-shadow-menu);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.c-lookup-search {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--nx-row-divider);
}
.c-lookup-search input {
  flex: 1;
  min-width: 0;
  /* padding/line-height are reset explicitly, not left to the cascade. On a
     page that still loads nexus.css, its `input[type="text"]` rule carries
     padding: 10px 14px at the SAME specificity as this selector, so it applies
     to every property this rule does not declare - inflating the search row
     from 36px to 61px. A no-op on fully migrated pages. */
  padding: 0;
  line-height: 1.4;
  height: auto;
  border: 0;
  outline: none;
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
}
.c-lookup-search input::placeholder { color: var(--nx-faint); }
.c-lookup-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.c-lookup-row {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 6px 8px;
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--nx-ink);
}
.c-lookup-row:hover,
.c-lookup-row.is-cursor { background: var(--nx-sunken); }
.c-lookup-row.is-selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--nx-accent);
}
.c-lookup-name { font-size: var(--nx-fs-secondary-lg); font-weight: 500; }
.c-lookup-sub {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
}
.c-lookup-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary);
}
.c-lookup-foot {
  border-top: 1px solid var(--nx-row-divider);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
}
.c-lookup-foot .c-spacer { flex: 1; }
.c-lookup-clear {
  border: 0;
  background: none;
  color: var(--nx-rose-fg-2);
  font-family: inherit;
  font-size: var(--nx-fs-meta-sm);
  cursor: pointer;
  padding: 0;
}
/* Inline variant: the same lookup control flowing inside a modal body rather
   than floating below a trigger. The floating version is positioned by JS, so
   only the positioning and the menu shadow need undoing - the search row, the
   list and the rows are identical, which is the point of reusing them. */
.c-lookup--inline {
  position: static;
  width: auto;
  max-width: none;
  box-shadow: none;
  z-index: auto;
}

/* Chosen relationship reads as an avatar pill, not plain text */
.c-lookup-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  padding: 2px 10px 2px 3px;
  font-size: var(--nx-fs-secondary-lg);
}

/* ============ 11. MODALS ========================================= */

.c-modal {
  padding: 0;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-frame);
  background: var(--nx-surface);
  color: var(--nx-ink);
  box-shadow: var(--nx-shadow-modal);
  max-width: min(900px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  font-family: var(--nx-font-sans);
}
.c-modal::backdrop { background: var(--nx-overlay); }

.c-modal-head {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: var(--nx-s4) var(--nx-gutter);
  border-bottom: 1px solid var(--nx-line);
}
.c-modal-title {
  font-size: var(--nx-fs-card-title);
  font-weight: 700;
  color: var(--nx-ink);
  margin: 0;
}
.c-modal-context {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
  padding: 2px 7px;
  color: var(--nx-muted);
}
.c-modal-head-spacer { flex: 1; }
.c-modal-esc {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 6px;
  color: var(--nx-faint);
}
.c-modal-x {
  border: 0;
  background: none;
  color: var(--nx-muted);
  cursor: pointer;
  font-size: var(--nx-fs-card-title);
  line-height: 1;
  padding: 2px 4px;
}
.c-modal-x:hover { color: var(--nx-ink); }

.c-modal-body {
  padding: var(--nx-gutter);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nx-s4);
}
.c-modal-section { display: flex; flex-direction: column; gap: 10px; }
.c-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nx-s3) var(--nx-s4);
}
@media (max-width: 720px) {
  .c-modal-grid { grid-template-columns: 1fr; }
}

/* Sticky footer with the ⌘↵ hint */
.c-modal-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: var(--nx-s3) var(--nx-gutter);
  border-top: 1px solid var(--nx-line);
  background: var(--nx-surface);
}
.c-modal-foot-hint {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  margin-right: auto;
}

/* Destructive: consequences list + type-to-confirm */
.c-consequences {
  background: var(--nx-rose-tint);
  border: 1px solid var(--nx-rose-line);
  border-radius: var(--nx-r-control);
  padding: var(--nx-s3) var(--nx-s4);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
}
.c-consequences ul { margin: var(--nx-s2) 0 0; padding-left: 18px; }
.c-consequences li { margin-bottom: 4px; }

/* ============ 12. SKELETONS + PROGRESS HAIRLINE ==================
   Moved out. The whole loading vocabulary - hairline, skeleton blocks,
   KPI/card/table builders, corner chip, error card, infinite-scroll
   sentinel - is ONE shared layer now: css/nexus-skeleton.css plus
   js/nexus-skeleton.js (board 12a). It carries --nx-* fallbacks so the
   pages still on the legacy stylesheet get the identical look.

   What used to live here and where it went:
     .c-hairline    -> .nxsk-hairline   (track + 85% ease-out fill)
     .c-skel*       -> .nxsk*           (.5-1-.5 shimmer, 100ms stagger)
     .c-loadtoast   -> .nxsk-chip       (ink chip, live timer, Retry)
   ================================================================== */

/* ============ 13. BATCH TRAY ===================================== */

.c-tray {
  position: fixed;
  left: 50%;
  bottom: var(--nx-gutter);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-modal);
  padding: 10px var(--nx-s4);
  z-index: 940;
}
.c-tray-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}
.c-tray .c-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .24);
  color: inherit;
}
.c-tray .c-btn:hover { background: rgba(255, 255, 255, .1); }

/* ============ 14. QUEUE RAIL + SETTINGS SHELL ==================== */

.c-railgrid {
  display: grid;
  grid-template-columns: 212px 1fr;
  gap: var(--nx-s4);
  padding: 0 var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
.c-railgrid--settings { grid-template-columns: 236px 1fr; }
@media (max-width: 960px) {
  .c-railgrid, .c-railgrid--settings { grid-template-columns: 1fr; }
}

.c-rail {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-rail-group {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  padding: 10px 10px 4px;
  text-transform: uppercase;
}
.c-rail-item {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 6px 10px;
  border-radius: var(--nx-r-chip);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  cursor: pointer;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  text-decoration: none;
}
.c-rail-item:hover { background: var(--nx-sunken); }
.c-rail-item.is-active { background: var(--nx-selected-row); font-weight: 600; }
.c-rail-count {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
}
.c-rail-count--rose { color: var(--nx-rose-fg-2); }

/* Status group header strip inside a grouped list */
.c-groupstrip {
  background: var(--nx-sunken);
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-muted);
  padding: 6px var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
}

/* Collapsible rail, for a settings shell whose rail must fold away on a
   narrow screen (HR). Lives in the shared layer, not in the page, so any
   other module with a section rail inherits the same behaviour. */
.c-rail-backdrop {
  position: fixed;
  inset: 0;
  background: var(--nx-overlay);
  z-index: 890;
  display: none;
}
.c-rail-backdrop.is-open { display: block; }
.c-railtoggle { display: none; }

@media (max-width: 960px) {
  .c-railtoggle { display: inline-flex; }
  .c-railgrid > .c-rail {
    position: fixed;
    top: var(--nx-topbar-h);
    bottom: 0;
    left: 0;
    width: 236px;
    z-index: 900;
    overflow-y: auto;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--nx-dur) var(--nx-ease);
  }
  .c-railgrid > .c-rail.is-open { transform: translateX(0); }
}

/* AI / info note - accent-soft pill, never an icon tile */
.c-note {
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  border-radius: var(--nx-r-control);
  padding: 8px 12px;
  font-size: var(--nx-fs-secondary-lg);
}

/* Attention banner above a register (board 11b bounced-contacts line). Amber,
   full-width, with its action as a weighted link on the right - no icon, and
   never rose: this is something to look at, not something that broke. */
.c-banner {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  background: var(--nx-amber-tint-2);
  border: 1px solid var(--nx-amber-tint-line);
  color: var(--nx-amber-fg);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
  font-size: var(--nx-fs-secondary);
}
.c-banner.hidden { display: none; }
.c-banner-action {
  margin-left: auto;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.c-banner-action:hover { text-decoration: underline; }

/* ============ 14b. HR MODULE SURFACES ============================
   HR carried 3,695 lines of its own CSS. These are the component shapes
   that had no Console equivalent, rebuilt from tokens so the module needs
   no page-level stylesheet. Anything with a Console twin (buttons, tags,
   tables, fields, sections) was remapped rather than restyled.
   ================================================================ */

/* Rail sub-items: a second level under a rail entry */
.nav-subitem {
  display: block;
  padding: 5px 10px 5px 22px;
  border-radius: var(--nx-r-chip);
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  text-decoration: none;
  cursor: pointer;
}
.nav-subitem:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.nav-subitem.is-active { background: var(--nx-selected-row); color: var(--nx-ink); font-weight: 600; }
.nav-item-parent { display: flex; flex-direction: column; }

/* .loading-spinner is retired - board 12a bans the centred strip. Any
   stray markup now falls through to the deprecated shim in
   css/nexus-skeleton.css, which renders a quiet left-aligned bar. */

/* HR shell */
.hr-main { min-width: 0; }
.hr-content { display: flex; flex-direction: column; gap: var(--nx-s3); }
.hr-section { display: block; }
.hrd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hrd-avatar,
.welcome-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--nx-fs-secondary-lg); font-weight: 600; flex: 0 0 auto; overflow: hidden;
}
.hrd-avatar img, .welcome-avatar img { width: 100%; height: 100%; object-fit: cover; }

.welcome-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s4) var(--nx-gutter);
  display: flex; align-items: center; gap: var(--nx-s4); flex-wrap: wrap;
}
.welcome-left { display: flex; align-items: center; gap: var(--nx-s3); }

/* An SVG with a viewBox and no width/height fills its container, and
   `height: auto` then makes it square - which is how the leave-balance donut
   became a 980px circle. Size the known charts explicitly and cap the rest. */
.donut-chart,
.balance-donut-svg,
.leave-balance-ring,
.hrd-ring {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
}
.balance-chart { display: flex; align-items: center; justify-content: center; }
.hr-content svg:not([width]):not(.donut-chart):not(.balance-donut-svg) {
  width: 40px;
  height: 40px;
}
.c-table-empty svg { width: 32px; height: 32px; opacity: .45; display: block; margin: 0 auto 8px; }

/* Dashboard: a card grid of Console sections. Card headings are the standard
   overline, so the dashboard reads like every other Console surface. */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--nx-s3);
}
.dashboard-card,
.balance-card,
.hrd-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 14px var(--nx-s4);
  min-width: 0;
}
.dashboard-grid > div > h3,
.dashboard-card > h3,
.balance-card > h3,
.hrd-card > h3 {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
}
.balance-content { display: flex; align-items: center; gap: var(--nx-s4); flex-wrap: wrap; }
.balance-row {
  display: flex; align-items: center; gap: var(--nx-s2);
  font-size: var(--nx-fs-secondary-lg); color: var(--nx-muted);
}
.balance-row--seg { justify-content: space-between; }
.balance-value { font-family: var(--nx-font-mono); font-weight: 600; color: var(--nx-ink); }
.balance-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-accent); flex: 0 0 auto; }

.welcome-name { font-size: var(--nx-fs-card-title); font-weight: 700; color: var(--nx-ink); }
.hrd-status-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.hrd-status-label {
  font-size: var(--nx-fs-overline); letter-spacing: var(--nx-ls-overline);
  text-transform: uppercase; color: var(--nx-faint); font-weight: 600;
}
.status-badge {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm);
  background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg);
  border-radius: var(--nx-r-chip); padding: 2px 7px;
}
.hrd-welcome-actions { display: flex; gap: var(--nx-s2); margin-left: auto; flex-wrap: wrap; }
.hrd-hidden { display: none; }
.hrd-date-label, .hrd-person-date {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-faint);
}
.hrd-skeleton, .hrd-skeleton-line {
  background: var(--nx-row-divider); border-radius: var(--nx-r-chip);
  height: 12px; margin-bottom: 6px;
  animation: nxsk-shimmer 1200ms ease infinite;
}
.hrd-heading-icon { color: var(--nx-faint); }

/* Attention banner card - amber tint, matching the register attention rows */
.hrd-banner-warning {
  background: var(--nx-amber-tint-2);
  border-color: var(--nx-amber-tint-line);
}
.hrd-banner-warning-header { display: flex; gap: var(--nx-s3); align-items: flex-start; }
.hrd-banner-warning-icon { color: var(--nx-amber-fg); flex: 0 0 auto; }
.hrd-banner-warning-title {
  font-size: var(--nx-fs-body); font-weight: 600; color: var(--nx-ink); margin: 0;
  text-transform: none; letter-spacing: normal;
}
.hrd-banner-warning-subtitle {
  font-size: var(--nx-fs-secondary); color: var(--nx-muted); margin: 2px 0 0;
}

/* Profile tabs / panes (the overview cards themselves are c-section now,
   built in 16e - the old profile-section-* classes are gone) */
.profile-tab-content { display: block; }
.profile-tab-content.hidden { display: none; }

/* Leave request chips */
.leave-range-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 6px 12px;
  background: var(--nx-surface);
}
.leave-range-chip-kicker {
  font-size: var(--nx-fs-overline); letter-spacing: var(--nx-ls-overline);
  font-weight: 600; color: var(--nx-faint); text-transform: uppercase;
}
.leave-range-chip-date {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary-lg); color: var(--nx-ink);
}
.leave-field-tight { display: flex; flex-direction: column; gap: 4px; }
.leave-req {
  display: flex; align-items: center; gap: var(--nx-s3);
  padding: 10px var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
}
.leave-req:last-child { border-bottom: 0; }

/* Recruitment */
.rec-tabpane { display: block; }
.rec-tabpane.hidden { display: none; }
.rec-cand {
  display: flex; align-items: center; gap: var(--nx-s2);
  padding: 8px 10px; border-radius: var(--nx-r-chip); cursor: pointer;
}
.rec-cand:hover { background: var(--nx-sunken); }
.rec-cand.is-selected { background: var(--nx-selected-row); }
.rec-star { border: 0; background: none; cursor: pointer; color: var(--nx-empty); padding: 0 1px; }
.rec-star.is-on { color: var(--nx-amber-dot); }
.rec-review-cap {
  font-size: var(--nx-fs-meta); color: var(--nx-faint); font-family: var(--nx-font-mono);
}

/* Calendar */
.calendar-day {
  border: 1px solid var(--nx-row-divider);
  min-height: 76px; padding: 6px;
  font-size: var(--nx-fs-secondary);
  background: var(--nx-surface);
}
.calendar-day.weekend { background: var(--nx-sunken); color: var(--nx-muted); }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--nx-accent); }
.capacity-badge {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm);
  border-radius: var(--nx-r-chip-sm); padding: 1px 5px;
  background: var(--nx-green-bg); color: var(--nx-green-fg);
}
.capacity-badge.capacity-medium { background: var(--nx-amber-bg); color: var(--nx-amber-fg); }
.capacity-badge.capacity-low    { background: var(--nx-rose-bg);  color: var(--nx-rose-fg); }

/* FSE rota */
.rota-dayhead {
  font-size: var(--nx-fs-overline); letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase; color: var(--nx-faint); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--nx-line);
}
.rota-weekend { background: var(--nx-sunken); }
.rota-today { box-shadow: inset 0 -2px 0 var(--nx-accent); color: var(--nx-ink); }

/* Letter-template editor */
.draggable-var {
  display: inline-block;
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta);
  background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg);
  border-radius: var(--nx-r-chip-sm); padding: 2px 6px; margin: 2px;
  cursor: grab;
}

/* Org chart */
.org-card {
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card); padding: 10px 12px; display: inline-block;
}
.org-card.top-level { border-color: var(--nx-accent); }
.org-card.manager { border-color: var(--nx-border-strong); }
.org-card-highlighted { box-shadow: 0 0 0 2px var(--nx-accent); }
.org-card-dimmed { opacity: .45; }
.org-subtree-collapsed > ul { display: none; }

/* ============ 15. UTILITIES ====================================== */

.c-row   { display: flex; align-items: center; gap: var(--nx-s2); }
.c-col   { display: flex; flex-direction: column; gap: var(--nx-s2); }
.c-spacer{ flex: 1; }
.c-wrap  { flex-wrap: wrap; }
.c-nowrap{ white-space: nowrap; }
.c-right { margin-left: auto; }

.c-pagetitle {
  font-size: var(--nx-fs-page-title);
  font-weight: 700;
  color: var(--nx-ink);
  letter-spacing: -.01em;
}

/* ============ 15b. MODULE TABS + HR DASHBOARD (board 3g) ========== */

/* Module-section tab row directly under the top bar (3g): tabs left,
   actions right in the SAME row. Extends .c-tabs. */
.c-tabs--module {
  align-items: center;
  padding: 14px var(--nx-gutter) 0;
  margin: 0;
  border-bottom: 0;
  gap: 14px;
}
.c-tabs--module .c-tab { padding-bottom: var(--nx-s2); text-decoration: none; }
.c-tabs--module .c-btn { margin-bottom: 6px; }
.c-tab-count {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: 1px;
}
.c-tab-count--amber { background: var(--nx-amber-bg); color: var(--nx-amber-strong); }
.c-tab-tag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-rose-fg);
  background: var(--nx-rose-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* Header band (3g hero): identity left, KPI trio + balance bar right */
.c-hr-hero {
  margin: 14px var(--nx-gutter) 12px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s4) var(--nx-gutter);
  display: flex;
  align-items: center;
  gap: var(--nx-s4);
  flex-wrap: wrap;
}
.c-hr-hero-hi { font-size: 18px; font-weight: 600; color: var(--nx-ink); }
.c-hr-hero-sub { font-size: 11.5px; color: var(--nx-muted); }
.c-hr-hero-kpis { display: flex; align-items: center; gap: var(--nx-gutter) ; }
.c-hr-kpi-num {
  font-family: var(--nx-font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-ink);
}
.c-hr-kpi-num--accent { color: var(--nx-accent); }
.c-hr-kpi-num--faint { color: var(--nx-faint); }
.c-hr-kpi-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}
.c-presence--in { color: var(--nx-green-fg); }
.c-hr-hero-bar { width: 220px; }
.c-bar {
  display: flex;
  height: 8px;
  border-radius: var(--nx-r-chip);
  overflow: hidden;
  background: var(--nx-row-divider);
}
.c-bar-seg { display: inline-block; height: 100%; }
.c-bar-seg--taken { background: var(--nx-empty); }
.c-bar-seg--pending { background: var(--nx-amber-dot); }
.c-bar-seg--left { background: var(--nx-accent); }
.c-bar-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-overline);
  color: var(--nx-faint);
  margin-top: 5px;
  white-space: nowrap;
}
.c-hr-hero a { text-decoration: none; }

/* 3g dashboard grid: 1fr 1fr 340px */
.c-hr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: var(--nx-s3);
  padding: 0 var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
.c-hr-grid-col { display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }
@media (max-width: 1080px) { .c-hr-grid { grid-template-columns: 1fr; } }

/* Attention (amber) request box inside PENDING (3g) */
.c-pending-box {
  border: 1px solid var(--nx-amber-tint-line);
  background: var(--nx-amber-tint-2);
  border-radius: var(--nx-r-control);
  padding: 10px 12px;
}
.c-pending-box + .c-pending-box { margin-top: var(--nx-s2); }

/* Dark-native card (3g FSE ROTA - ink surface in both themes) */
.c-card--ink {
  background: var(--nx-topbar-bg);
  border: 1px solid var(--nx-topbar-line);
  border-radius: var(--nx-r-card);
  padding: 14px var(--nx-s4);
  color: var(--nx-topbar-fg);
}
.c-card--ink .c-section-title { color: var(--nx-topbar-dim); margin-bottom: var(--nx-s2); }
.c-card--ink .c-rota-row {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-topbar-dim);
  display: flex;
  gap: var(--nx-s2);
  padding: 3px 0;
}
.c-card--ink .c-rota-strong { color: var(--nx-topbar-active); }
.c-card--ink .c-rota-dim { color: var(--nx-topbar-dim); }

/* 3g people/request rows */
.c-person-row { display: flex; align-items: center; gap: 10px; padding: 4.5px 0; }
.c-person-name { font-size: var(--nx-fs-secondary-lg); font-weight: 500; color: var(--nx-ink); }
.c-person-sub { font-size: 10.5px; color: var(--nx-faint); }
.c-person-right { margin-left: auto; font-size: var(--nx-fs-meta); color: var(--nx-faint); }
.c-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--nx-row-divider);
  font-size: var(--nx-fs-secondary-lg);
}
.c-req-row:last-child { border-bottom: 0; }
.c-req-dates { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.c-req-days { margin-left: auto; font-family: var(--nx-font-mono); font-size: var(--nx-fs-overline); color: var(--nx-faint); }

/* ============ 16. FORM KIT (board 3e gap-fill) ==================== */

/* Pastel initials variants (3e lookups, 3g people rows). Default stays accent-soft. */
.c-avatar--amber   { background: var(--nx-amber-bg); color: var(--nx-amber-fg); }
.c-avatar--rose    { background: var(--nx-rose-bg);  color: var(--nx-rose-fg); }
.c-avatar--neutral { background: var(--nx-row-divider); color: var(--nx-muted); }
.c-avatar--solid   { background: var(--nx-accent); color: var(--nx-btn-primary-fg); }
.c-avatar--md { width: 26px; height: 26px; font-size: 9px; font-weight: 700; }
.c-avatar--lg { width: 40px; height: 40px; font-size: 13px; font-weight: 700; }
.c-avatar--xl { width: 96px; height: 96px; font-size: 28px; font-weight: 600; }

/* Input error state - 1.5px rose border, message below via .c-field-error */
.c-input.is-error,
.c-select.is-error,
.c-textarea.is-error {
  border: 1.5px solid var(--nx-rose-fg-2);
  padding: 7.5px 11.5px; /* keep the box the same size as the 1px default */
}
.c-input.is-error:focus,
.c-textarea.is-error:focus { box-shadow: 0 0 0 3px var(--nx-rose-bg); }

/* Check chips - toggleable role pills (CONTACT ROLES in 3e) */
.c-checkchip {
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  background: transparent;
  border: 1px solid var(--nx-border-strong);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--nx-font-sans);
  line-height: 1.2;
}
.c-checkchip:hover { background: var(--nx-sunken); }
.c-checkchip.is-on {
  font-weight: 500;
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-color: var(--nx-accent-soft-line);
}
.c-checkchip.is-on::before { content: "\2713\00a0"; }

/* Checkbox-backed variant. The chip is a <label> wrapping a real checkbox, so
   the existing form.<name>.checked read path keeps working untouched and the
   control stays keyboard- and screen-reader-native; :has() paints the state, so
   there is no JS mirror to fall out of sync. */
.c-checkchip { display: inline-flex; align-items: center; }
.c-checkchip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.c-checkchip:has(input[type="checkbox"]:checked) {
  font-weight: 500;
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-color: var(--nx-accent-soft-line);
}
.c-checkchip:has(input[type="checkbox"]:checked)::before { content: "\2713\00a0"; }
.c-checkchip:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--nx-accent);
  outline-offset: 2px;
}
/* A row of check chips - the shape CONTACT ROLES / NOTIFICATIONS use */
.c-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }

/* Value chips shared by multi-select fields and chips inputs - mono, accent-soft */
.c-valuechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  border-radius: var(--nx-r-chip);
  padding: 3px 8px;
}
.c-valuechip button,
.c-valuechip .c-valuechip-x {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; opacity: .6; font-size: inherit; line-height: 1;
}
.c-valuechip button:hover, .c-valuechip .c-valuechip-x:hover { opacity: 1; }

/* Chips-in-field container: multi-select trigger and free-text chips input */
.c-chipfield {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 6px 8px;
  cursor: text;
  min-height: 36px;
}
.c-chipfield:focus-within {
  border: 1.5px solid var(--nx-accent);
  padding: 5.5px 7.5px;
  box-shadow: 0 0 0 3px var(--nx-live-bg);
}
.c-chipfield.is-open { border-radius: var(--nx-r-control) var(--nx-r-control) 0 0; }
.c-chipfield input {
  flex: 1;
  min-width: 90px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
}
.c-chipfield input::placeholder { color: var(--nx-empty); }

/* Checkbox visual for multi-select menu rows (15px square, accent when on) */
.c-checkbox {
  width: 15px;
  height: 15px;
  border-radius: var(--nx-r-chip);
  border: 1px solid var(--nx-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 9px;
  color: transparent;
  background: var(--nx-surface);
}
.c-checkbox.is-on {
  background: var(--nx-accent);
  border-color: var(--nx-accent);
  /* btn-primary-fg doubles as "text on an accent fill": white in light, deep teal-ink in dark */
  color: var(--nx-btn-primary-fg);
}
.c-checkbox.is-on::before { content: "\2713"; }

/* Menu footer note - count summaries and key hints (EMPTY = ANY, 2 SELECTED) */
.c-menu-note {
  padding: 6px 12px;
  border-top: 1px solid var(--nx-row-divider);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  background: var(--nx-sunken);
}

/* Date range field - mono YYYY-MM-DD -> YYYY-MM-DD */
.c-daterange {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  color: var(--nx-ink);
  cursor: pointer;
}
.c-daterange .c-daterange-arrow,
.c-daterange .c-daterange-icon { color: var(--nx-faint); }
.c-daterange .c-daterange-icon { margin-left: auto; }
.c-daterange.is-open,
.c-daterange:focus-visible {
  border: 1.5px solid var(--nx-accent);
  padding: 6.5px 11.5px;
  outline: none;
}
.c-daterange .is-empty { color: var(--nx-empty); }

/* Range calendar (3e): weekends sunken, today inset accent, ink start / teal
   end, soft fill between, working-day count in the footer. */
.c-cal {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-cal-head {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--nx-row-divider);
}
.c-cal-title {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  color: var(--nx-ink);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}
.c-cal-nav {
  background: none; border: 0; cursor: pointer;
  color: var(--nx-muted); font-size: var(--nx-fs-secondary);
  padding: 2px 6px; border-radius: var(--nx-r-chip);
}
.c-cal-nav:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.c-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.c-cal-dow {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  text-align: center;
  padding: 8px 0 6px;
  text-transform: uppercase;
}
.c-cal-day {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nx-font-mono);
  font-size: 11.5px;
  color: var(--nx-ink);
  border-top: 1px solid var(--nx-row-divider);
  cursor: pointer;
  position: relative;
}
.c-cal-day:hover { background: var(--nx-sunken); }
.c-cal-day.is-weekend { background: var(--nx-sunken); color: var(--nx-muted); }
.c-cal-day.is-outside { color: var(--nx-empty); }
.c-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--nx-accent); }
.c-cal-day.is-in-range { background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg); }
.c-cal-day.is-range-start,
.c-cal-day.is-range-end { font-weight: 600; }
.c-cal-day.is-range-start { background: var(--nx-ink); color: var(--nx-surface); }
.c-cal-day.is-range-end { background: var(--nx-accent); color: var(--nx-btn-primary-fg); }
.c-cal-day.has-entry::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--nx-accent);
}
.c-cal-foot {
  padding: 6px 12px;
  border-top: 1px solid var(--nx-row-divider);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  background: var(--nx-sunken);
}

/* Month variant (HR company calendar): tall block day cells, day number top
   left, event pills below. Weekends sunken, today inset accent line. */
.c-cal--month .c-cal-day {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 96px;
  padding: 6px;
  gap: 2px;
  cursor: default;
  border-left: 1px solid var(--nx-row-divider);
}
.c-cal--month .c-cal-day:nth-child(7n + 1) { border-left: 0; }
.c-cal--month .c-cal-day.is-clickable { cursor: pointer; }
.c-cal--month .c-cal-day.is-capacity-medium { background: var(--nx-amber-tint); }
.c-cal--month .c-cal-day.is-capacity-low { background: var(--nx-rose-tint); }
.c-cal-dayrow { display: flex; align-items: center; gap: 4px; }
.c-cal-daynum {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
}
.c-cal--month .c-cal-day.is-today .c-cal-daynum { color: var(--nx-accent-text); font-weight: 600; }
.c-cal-event {
  font-size: 10px;
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--nx-sunken);
  color: var(--nx-muted);
  display: inline-block;
  max-width: 100%;
}
.c-cal-event--rose { background: var(--nx-rose-bg); color: var(--nx-rose-fg); }
.c-cal-event--amber { background: var(--nx-amber-bg); color: var(--nx-amber-fg); }
.c-cal-event--accent { background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg); }
.c-cal-event--muted { background: var(--nx-row-divider); color: var(--nx-muted); }
.c-cal-pill {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 4px;
  margin-left: auto;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
}
.c-cal-pill--remote { background: var(--nx-row-divider); color: var(--nx-muted); margin-left: 2px; }
.c-cal-stack { display: flex; align-items: center; margin-top: 2px; }
.c-cal-stack .c-avatar { width: 20px; height: 20px; font-size: 8px; border: 1.5px solid var(--nx-surface); margin-left: -6px; }
.c-cal-stack .c-avatar:first-child { margin-left: 0; }

/* HR calendar day-detail modal: day-level pills, overline summary +
   capacity chip, leave-type groups (c-dot head + c-person-rows) */
.day-detail-section { display: flex; flex-direction: column; gap: var(--nx-s2); }
.day-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.day-detail-group { display: flex; flex-direction: column; }
.day-detail-group-head {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0 3px;
  font-size: var(--nx-fs-secondary-lg); font-weight: 600; color: var(--nx-ink);
}
.day-detail-group-count { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-faint); }
.day-detail-person { min-width: 0; }
.day-detail-range {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta);
  color: var(--nx-muted); white-space: nowrap; flex: 0 0 auto;
}
.day-detail-event { display: flex; align-items: center; gap: var(--nx-s2); }
.day-detail-scope { font-size: var(--nx-fs-meta); color: var(--nx-faint); }

/* Picker variant (3d Request-time-off): gapped rounded day tiles, sans-serif
   numerals, range start/end keep their tile radius on the outer corner only. */
.c-cal--picker .c-cal-grid { gap: 2px; padding: 2px 10px 10px; }
.c-cal--picker .c-cal-dow { padding: 8px 0 2px; font-size: 9px; }
.c-cal--picker .c-cal-day {
  min-height: 0;
  padding: 7px 0;
  border-top: 0;
  border-radius: 5px;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
}
.c-cal--picker .c-cal-day.is-weekend { background: var(--nx-sunken); color: var(--nx-empty); }
.c-cal--picker .c-cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--nx-accent);
  color: var(--nx-accent-soft-fg);
  background: var(--nx-sunken);
}
.c-cal--picker .c-cal-day.is-range-start { border-radius: 5px 0 0 5px; }
.c-cal--picker .c-cal-day.is-range-end { border-radius: 0 5px 5px 0; }
.c-cal--picker .c-cal-day.is-range-start.is-range-end { border-radius: 5px; }

/* FROM -> TO tiles above the picker (3d): accent-soft framed mono values */
.c-rangetiles {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: var(--nx-s2);
  align-items: center;
}
.c-rangetile {
  border: 1px solid var(--nx-accent-soft-line);
  background: var(--nx-selected-row);
  border-radius: var(--nx-r-control);
  padding: 8px 12px;
}
.c-rangetile .c-rangetile-label {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}
.c-rangetile .c-rangetile-value { font-family: var(--nx-font-mono); font-size: var(--nx-fs-body); }
.c-rangetiles-arrow { text-align: center; color: var(--nx-faint); }

/* ============ 16b. COMMAND CENTER HOME (board 2c) ================= */

/* Launcher, not a dashboard: greeting + mono datetime, prominent jump bar,
   recents tiles, field-coverage strip, module grid with role tags. */
.c-home {
  padding: 0 var(--nx-gutter) var(--nx-gutter);
  display: flex;
  flex-direction: column;
}

.c-home-head {
  display: flex;
  align-items: flex-end;
  gap: var(--nx-s4);
  padding: 26px 0 8px;
  flex-wrap: wrap;
}
.c-home-hello {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--nx-ink-strong);
  margin: 0;
}
.c-home-date {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  margin-top: 4px;
}
.c-home-id { font-size: var(--nx-fs-secondary); color: var(--nx-muted); }

/* Prominent jump bar - a button that opens the ⌘K command palette */
.c-homejump {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  width: 100%;
  margin: 10px 0;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 13px 16px;
  font-family: var(--nx-font-sans);
  cursor: pointer;
  text-align: left;
}
.c-homejump:hover { border-color: var(--nx-border-strong); background: var(--nx-sunken); }
.c-homejump:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.c-homejump-icon { color: var(--nx-accent); font-size: 15px; line-height: 1; }
.c-homejump-text { font-size: 13.5px; color: var(--nx-faint); }
.c-homejump .c-kbd { margin-left: auto; color: var(--nx-muted); }

.c-home-section { padding-top: 10px; }
.c-home-sechead {
  display: flex;
  align-items: baseline;
  gap: var(--nx-s3);
  margin-bottom: 8px;
}

/* Tile grids: recents 5-up, modules 4-up */
.c-home-recents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.c-home-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1080px) {
  .c-home-recents { grid-template-columns: repeat(3, 1fr); }
  .c-home-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .c-home-recents, .c-home-modules { grid-template-columns: 1fr; }
}

.c-hometile {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
a.c-hometile:hover { border-color: var(--nx-border-strong); background: var(--nx-sunken); }
a.c-hometile:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.c-hometile-body { flex: 1; min-width: 0; }
.c-hometile-name {
  display: block;
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-hometile-sub { display: block; font-size: 10.5px; color: var(--nx-faint); margin-top: 1px; }
.c-hometile.is-locked .c-hometile-name { color: var(--nx-muted); }
.c-hometile .c-tag { flex: 0 0 auto; }

/* Glyph tints - colour is signal, not decoration: accent for the two core
   registers, amber for open work (tickets). Everything else stays neutral. */
.c-glyph--accent { background: var(--nx-accent-soft-bg); border-color: transparent; color: var(--nx-accent-soft-fg); }
.c-glyph--amber  { background: var(--nx-amber-tint-2);   border-color: transparent; color: var(--nx-amber-strong); }

/* Field coverage strip - one bordered surface, cells split by row-divider */
.c-covstrip {
  display: flex;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
  margin-top: 14px;
  flex-wrap: wrap;
}
.c-covstrip-label {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-right: 1px solid var(--nx-row-divider);
}
.c-covstrip-cell {
  flex: 1;
  min-width: 150px;
  padding: 10px 16px;
  border-right: 1px solid var(--nx-row-divider);
}
.c-covstrip-cell:last-child { border-right: 0; }
.c-covstrip-cell--wide { flex: 1.4; }
.c-covstrip-k {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}
.c-covstrip-v {
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  flex-wrap: wrap;
}
.c-covstrip-v .c-empty { color: var(--nx-empty); }
.c-covstrip-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nx-ink);
  font-weight: 500;
}
.c-covstrip-mono {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
}
.c-avatar--sm { width: 20px; height: 20px; font-size: 8px; font-weight: 700; }

/* ============ 16c. WALLBOARD (board 6b) =========================== */
/* Ticket wallboard - DARK-NATIVE: the page pins data-theme="dark" on
   <html> (like login.html), so every token below resolves to the dark
   set on any OS theme. Structural classes are .c-wall-*; the JS render
   sites keep their historical .db-* class names (renaming class strings
   inside 2,300 lines of concatenated HTML is the exact trap in the
   handoff section 4.4), and those names are styled here from tokens.
   Board anatomy: KPI wall of equal cells split by a 1px line, 30px mono
   numbers, alert cell = tinted bg + inset 2px top rose, dual 5px SLA
   bars, LIVE pill + full-screen control. */

body.c-wall-body { background: var(--nx-page-bg); }

.c-wall {
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--nx-s3) var(--nx-gutter) var(--nx-s4);
  display: flex;
  flex-direction: column;
  gap: var(--nx-s3);
  min-height: calc(100vh - var(--nx-topbar-h));
  background: var(--nx-page-bg);
  color: var(--nx-ink);
}

/* On a TV the chrome disappears in full screen; the wallboard bar
   (LIVE pill, clock, controls) stays. */
:fullscreen .c-topbar { display: none; }

/* ---- Control strip -------------------------------------------- */
.c-wall-bar {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: var(--nx-s2) var(--nx-s4);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  flex-wrap: wrap;
}

.c-wall-title {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--nx-ink-strong);
  white-space: nowrap;
}

.c-wall-spacer { flex: 1; }

.c-wall-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
  letter-spacing: .06em;
  white-space: nowrap;
}
#clientCount::before { content: 'CLIENTS: '; }

.c-wall-clock {
  color: var(--nx-accent-text);
  font-size: var(--nx-fs-secondary);
  font-weight: 600;
  letter-spacing: .08em;
}

/* LIVE pill: `● LIVE · 60S` - the dot is a text glyph coloured by the
   connection state classes the JS already sets. */
.c-wall-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .06em;
  padding: 3px var(--nx-s2);
  border-radius: var(--nx-r-chip);
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  color: var(--nx-muted);
  white-space: nowrap;
}
.db-conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-rose-fg-2);
  flex-shrink: 0;
  transition: background var(--nx-dur);
}
.db-conn-dot.connected { background: var(--nx-green-dot); }
.db-conn-dot.reconnecting { background: var(--nx-amber-dot); animation: c-wall-pulse 1.2s infinite; }
#connectionText { color: var(--nx-muted); }
.db-conn-dot.connected ~ #connectionText { color: var(--nx-green-fg); }
.c-wall-live-cadence { color: var(--nx-faint); }

/* Mono ghost controls: SOUND ON/OFF, FULL SCREEN */
.c-wall-ctrl {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .06em;
  color: var(--nx-muted);
  background: var(--nx-btn-ghost-bg);
  border: 1px solid var(--nx-btn-ghost-line);
  border-radius: var(--nx-r-chip);
  padding: 3px var(--nx-s2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nx-dur), border-color var(--nx-dur);
}
.c-wall-ctrl:hover { color: var(--nx-ink-strong); border-color: var(--nx-border-strong); }
.c-wall-ctrl.active { color: var(--nx-accent-text); border-color: var(--nx-accent-soft-line); background: var(--nx-accent-soft-bg); }

/* View toggle (All / Support / Installation) - segmented control */
.c-wall-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
}
.db-view-btn {
  background: none;
  border: none;
  color: var(--nx-muted);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  padding: 3px var(--nx-s3);
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nx-dur), background var(--nx-dur);
}
.db-view-btn:hover { color: var(--nx-ink); }
.db-view-btn.active {
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-weight: 600;
}

/* ---- Filter bar ------------------------------------------------ */
.c-wall-filters {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 6px var(--nx-s3);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  flex-wrap: wrap;
}
.db-filter-bar-label {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-faint);
  font-weight: 600;
  flex-shrink: 0;
}
.db-filter-sep { width: 1px; height: 18px; background: var(--nx-line); flex-shrink: 0; }
.db-filter-group { display: flex; align-items: center; gap: var(--nx-s1); flex-shrink: 0; }
.db-filter-group-label {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nx-faint);
}
.db-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-border-strong);
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-meta);
  padding: 3px 22px 3px var(--nx-s2);
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  outline: none;
  max-width: 160px;
  /* caret drawn from the muted token's dark value */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237E9494' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 6px;
  transition: border-color var(--nx-dur), box-shadow var(--nx-dur);
}
.db-filter-select:hover { border-color: var(--nx-accent); }
.db-filter-select:focus { border-color: var(--nx-accent); box-shadow: 0 0 0 1px var(--nx-accent); }
.db-filter-select.active-filter {
  border-color: var(--nx-accent-soft-line);
  color: var(--nx-accent-soft-fg);
  background-color: var(--nx-accent-soft-bg);
}

/* Region / team multi-select. `display` sits on :not(.hidden) so the
   shared .hidden class always wins (dialog-display pitfall). */
.db-ms-filter { position: relative; display: inline-block; }
.db-ms-toggle { text-align: left; min-width: 96px; }
.db-ms-menu { max-height: 300px; overflow-y: auto; }
.db-ms-menu:not(.hidden) {
  display: block;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 140px; padding: var(--nx-s1);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
  box-shadow: var(--nx-shadow-menu);
}
.db-ms-option {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: var(--nx-r-chip-sm);
  font-size: var(--nx-fs-meta); color: var(--nx-ink);
  cursor: pointer; white-space: nowrap;
}
.db-ms-option:hover { background: var(--nx-accent-soft-bg); }
.db-ms-option input { margin: 0; cursor: pointer; accent-color: var(--nx-accent); }

.db-filter-clear {
  background: none;
  border: 1px solid var(--nx-border-strong);
  color: var(--nx-muted);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  padding: 3px var(--nx-s2);
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color var(--nx-dur), border-color var(--nx-dur);
}
.db-filter-clear:hover { color: var(--nx-ink-strong); border-color: var(--nx-muted); }
.db-filter-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-accent-text);
  margin-left: auto;
  flex-shrink: 0;
}

/* ---- KPI wall (the board's signature element) ------------------ */
/* Equal cells split by a 1px line: 1px gap over the line token.
   grid-auto-flow keeps the cells equal however many views leave
   visible (all 9 in the All view). */
.c-wall-kpis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--nx-line);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.db-stat {
  background: var(--nx-page-bg);
  padding: var(--nx-s4) 14px;
  min-width: 0;
}
.db-stat-value {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-kpi-lg);
  font-weight: 600;
  line-height: 1;
  color: var(--nx-ink-strong);
  font-variant-numeric: tabular-nums;
  transition: color var(--nx-dur);
}
.db-stat-label {
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-stat-total {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  margin-top: 2px;
  letter-spacing: .04em;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity var(--nx-dur), height var(--nx-dur);
}
.db-stat-total.visible { opacity: 1; height: 14px; }

/* Semantic number colours - colour is the signal */
.db-stat[data-stat="unassigned_count"] .db-stat-value,
.db-stat[data-stat="escalated_count"] .db-stat-value { color: var(--nx-amber-fg); }
.db-stat[data-stat="installation_on_target_count"] .db-stat-value { color: var(--nx-accent); }
.db-stat[data-stat="installation_overdue_count"] .db-stat-value { color: var(--nx-rose-fg-2); }

/* Alert cell: tinted bg + inset 2px top rose (board 6b) */
.db-stat[data-stat="sla_breached_count"] {
  background: var(--nx-rose-tint);
  box-shadow: inset 0 2px 0 var(--nx-rose-fg-2);
}
.db-stat[data-stat="sla_breached_count"] .db-stat-value { color: var(--nx-rose-fg-2); }
.db-stat[data-stat="sla_breached_count"] .db-stat-label { color: var(--nx-muted); }

/* Zero reads as quiet, whatever the cell's semantic colour */
.c-wall-kpis .db-stat-value.is-zero { color: var(--nx-faint); }

/* ---- Main grid: urgent + recent (left), active table (right) --- */
.c-wall-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--nx-s3);
  flex: 1;
  min-height: 0;
}
.db-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.db-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nx-s2) 14px;
  border-bottom: 1px solid var(--nx-line);
  flex-shrink: 0;
}
.db-panel-title {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-muted);
}
.db-panel-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
  background: var(--nx-page-bg);
  padding: 2px var(--nx-s2);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-chip-sm);
}
.db-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--nx-s2);
  scrollbar-width: thin;
  scrollbar-color: var(--nx-border-strong) transparent;
}
.db-panel.urgent .db-panel-title { color: var(--nx-rose-fg-2); }
.db-panel.active { grid-row: 1 / 3; grid-column: 2; }
.db-panel.active .db-panel-title { color: var(--nx-accent-text); }
/* Installation view: recent fills both rows when urgent is hidden */
.db-panel.recent.install-expanded { grid-row: 1 / 3; }

/* ---- Urgent cards ---------------------------------------------- */
.db-urgent-card {
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: var(--nx-s2) var(--nx-s3);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color var(--nx-dur);
}
.db-urgent-card:last-child { margin-bottom: 0; }
.db-urgent-card:hover { border-color: var(--nx-border-strong); }
.db-urgent-card.sla-card-breached {
  background: var(--nx-rose-tint);
  border-color: var(--nx-rose-line);
  box-shadow: inset 2px 0 0 var(--nx-rose-fg-2);
}
.db-urgent-card.sla-card-warning {
  background: var(--nx-amber-tint);
  border-color: var(--nx-amber-tint-line);
  box-shadow: inset 2px 0 0 var(--nx-amber-dot);
}
.db-urgent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-s2);
  margin-bottom: 4px;
}
.db-ticket-num {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  color: var(--nx-ink-strong);
}
.db-urgent-subject {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.db-urgent-meta {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
  margin-bottom: var(--nx-s2);
}
.db-sla-timers { display: flex; gap: var(--nx-s4); }
.db-sla-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
}
.db-sla-label {
  color: var(--nx-faint);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-meta);
}
.db-sla-timer {
  font-family: var(--nx-font-mono);
  font-weight: 600;
  font-size: var(--nx-fs-secondary);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.db-sla-timer::before { content: '\25CF\00A0'; font-size: 8px; vertical-align: 1px; }
.db-sla-timer.sla-ok { color: var(--nx-green-fg); }
.db-sla-timer.sla-warning { color: var(--nx-amber-fg); }
.db-sla-timer.sla-breached { color: var(--nx-rose-fg-2); animation: c-wall-pulse 1.5s infinite; }

/* ---- Recent list ------------------------------------------------ */
.db-recent-item {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: var(--nx-s2) var(--nx-s2);
  border-bottom: 1px solid var(--nx-row-divider);
  cursor: pointer;
  transition: background var(--nx-dur);
}
.db-recent-item:last-child { border-bottom: none; }
.db-recent-item:hover { background: var(--nx-sunken); }
.db-recent-item .db-badge { flex-shrink: 0; }
.db-recent-num {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-ink-strong);
  font-weight: 600;
  white-space: nowrap;
  width: 80px;
  flex-shrink: 0;
}
.db-recent-subject {
  font-size: var(--nx-fs-secondary);
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.db-recent-time {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Active table ----------------------------------------------- */
.db-table-wrap { flex: 1; overflow: hidden; position: relative; }
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-fs-secondary);
  table-layout: fixed;
}
.db-table thead { position: sticky; top: 0; z-index: 2; }
.db-table th {
  background: var(--nx-surface);
  padding: var(--nx-s2) var(--nx-s2);
  text-align: left;
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  border-bottom: 1px solid var(--nx-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-table td {
  padding: var(--nx-s2) var(--nx-s2);
  border-bottom: 1px solid var(--nx-row-divider);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-table tbody tr { cursor: pointer; transition: background var(--nx-dur); }
.db-table tbody tr:hover { background: var(--nx-sunken); }
/* Attention row tints (board 6b: the breached row reads rose) */
.db-table tbody tr.is-breached-row { background: var(--nx-rose-tint); }
.db-table tbody tr.is-warning-row { background: var(--nx-amber-tint); }
.db-table tbody tr.is-breached-row:hover,
.db-table tbody tr.is-warning-row:hover { background: var(--nx-sunken); }
/* Percentage widths so SUBJECT stays the widest column at any panel
   size (px sums starve it under table-layout: fixed). */
.db-table .col-ticket { width: 6.5%; }
.db-table .col-priority { width: 8%; }
.db-table .col-status { width: 10%; }
.db-table .col-subject { width: 20.5%; font-weight: 500; color: var(--nx-ink-strong); }
.db-table .col-org { width: 11.5%; color: var(--nx-muted); }
.db-table .col-region { width: 4.5%; font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm); color: var(--nx-muted); }
.db-table .col-category { width: 8%; color: var(--nx-muted); }
.db-table .col-assignee { width: 11.5%; }
.db-table .col-sla { width: 9.75%; }
.db-table td .db-ticket-num { font-size: var(--nx-fs-meta); }

/* Dual SLA cells: 5px bar + mono label under it (board 6b) */
.c-wall-sla { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c-wall-slabar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  background: var(--nx-row-divider);
  overflow: hidden;
}
.c-wall-slabar-fill {
  display: inline-block;
  height: 100%;
  width: 0%;
  background: var(--nx-accent);
  transition: width .3s linear;
}
.c-wall-slabar-fill.is-warning { background: var(--nx-amber-dot); }
.c-wall-slabar-fill.is-breached { background: var(--nx-rose-fg-2); }
.c-wall-sla .db-sla-timer { font-size: 9px; font-weight: 600; }
.c-wall-sla-meta { display: flex; align-items: center; gap: 3px; min-width: 0; }
.c-wall-slatag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--nx-muted);
}
.c-wall-slatag.is-breached { color: var(--nx-rose-fg-2); }
.c-wall-slatag.is-paused { color: var(--nx-amber-fg); }
.c-wall-slatag.is-empty { color: var(--nx-empty); }
.c-wall-restype {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 0 3px;
  border-radius: var(--nx-r-chip-sm);
  margin-right: 3px;
}
.c-wall-restype.is-onsite { background: var(--nx-amber-bg); color: var(--nx-amber-fg); }
.c-wall-restype.is-collect { background: var(--nx-rose-bg); color: var(--nx-rose-fg-2); }

/* ---- Badges: dot + mono caps, no boxes -------------------------- */
.db-badge {
  display: inline-block;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--nx-muted);
}
.db-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: 0;
}
.db-badge.priority-critical { color: var(--nx-rose-fg-2); }
.db-badge.priority-high { color: var(--nx-amber-fg); }
.db-badge.priority-medium { color: var(--nx-accent-text); }
.db-badge.priority-low { color: var(--nx-muted); }
.db-badge.status-new { color: var(--nx-accent-text); }
.db-badge.status-triaging,
.db-badge.status-assigned { color: var(--nx-ink); }
.db-badge.status-in_progress { color: var(--nx-green-fg); }
.db-badge.status-awaiting_customer,
.db-badge.status-awaiting_parts,
.db-badge.status-awaiting_visit { color: var(--nx-amber-fg); }
.db-badge.status-escalated { color: var(--nx-rose-fg-2); }
.db-badge.db-badge-category { color: var(--nx-muted); }
.db-badge.db-badge-category::before { display: none; }

/* ---- Assignee / avatar ------------------------------------------ */
.db-assignee { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.db-assignee-name { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.db-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.db-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.db-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--nx-font-mono);
  text-transform: uppercase;
  background: var(--nx-row-divider);
  color: var(--nx-muted);
}
.c-wall-dim { color: var(--nx-faint); }

/* ---- Pagination bar (airport auto-rotate) ------------------------ */
.db-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-surface);
  flex-shrink: 0;
}
.db-page-info {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.db-page-dots { display: flex; align-items: center; gap: 6px; }
.db-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nx-border-strong);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--nx-dur);
}
.db-page-dot.active { background: var(--nx-accent); }
.db-page-controls { display: flex; align-items: center; gap: var(--nx-s1); }
.db-page-progress {
  position: relative;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--nx-row-divider);
  overflow: hidden;
}
.db-page-progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--nx-accent);
  width: 0%;
  transition: width .3s linear;
}
.db-page-progress-bar.running { transition: width 30s linear; width: 100%; }
.db-page-btn {
  background: none;
  border: 1px solid var(--nx-btn-ghost-line);
  color: var(--nx-muted);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  transition: color var(--nx-dur), border-color var(--nx-dur);
}
.db-page-btn:hover { color: var(--nx-ink-strong); border-color: var(--nx-border-strong); }
.db-page-btn.pause-btn.paused { color: var(--nx-amber-fg); border-color: var(--nx-amber-tint-line); }

/* ---- Distribution row -------------------------------------------- */
.db-dist-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-s3); }
.db-dist-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s3) 14px;
}
.db-dist-title {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-muted);
  margin-bottom: var(--nx-s2);
}
.db-dist-item { display: flex; align-items: center; gap: var(--nx-s2); margin-bottom: 5px; }
.db-dist-item:last-child { margin-bottom: 0; }
.db-dist-label {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
  text-transform: capitalize;
  width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-dist-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--nx-row-divider);
  overflow: hidden;
}
.db-dist-bar { height: 100%; transition: width .6s var(--nx-ease); }
.db-dist-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  font-weight: 600;
  color: var(--nx-ink);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Empty / loading --------------------------------------------- */
.db-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  text-transform: uppercase;
  letter-spacing: var(--nx-ls-overline);
}
.db-empty.db-empty--short { min-height: 40px; }
.c-wall-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-s3);
  height: 70vh;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-body);
  color: var(--nx-accent-text);
  text-transform: uppercase;
  letter-spacing: .2em;
  background: var(--nx-page-bg);
}
.c-wall-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--nx-line);
  border-top-color: var(--nx-accent);
  border-radius: 50%;
  animation: c-wall-spin .8s linear infinite;
}

/* ---- Audio activation overlay ------------------------------------ */
.c-wall-audio {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--nx-overlay);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--nx-s4);
}
.c-wall-audio-title {
  color: var(--nx-accent-text);
  font-family: var(--nx-font-mono);
  font-size: 20px;
  letter-spacing: .15em;
}
.c-wall-audio-sub {
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary);
  font-family: var(--nx-font-mono);
}

/* ---- Breach toast (bottom-right) --------------------------------- */
.db-breach-toast {
  position: fixed;
  bottom: var(--nx-gutter);
  right: var(--nx-gutter);
  z-index: 9998;
  width: 340px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-rose-line);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-modal);
  animation: c-wall-toast-in .4s var(--nx-ease);
  overflow: hidden;
}
.db-breach-toast.hiding { animation: c-wall-toast-out .3s ease-in forwards; }
.db-breach-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nx-s2) var(--nx-s3);
  background: var(--nx-rose-tint);
  border-bottom: 1px solid var(--nx-rose-line);
}
.db-breach-toast-title {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-rose-fg-2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-breach-toast-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nx-rose-fg-2);
  animation: c-wall-pulse 1.2s infinite;
}
.db-breach-toast-nav {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  letter-spacing: .06em;
}
.db-breach-toast-body { padding: var(--nx-s3); cursor: pointer; }
.db-breach-toast-ticket {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-ink-strong);
  font-weight: 600;
  margin-bottom: 4px;
}
.db-breach-toast-subject {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--nx-s2);
}
.db-breach-toast-row { display: flex; align-items: center; justify-content: space-between; }
.db-breach-toast-assignee { display: flex; align-items: center; gap: var(--nx-s2); }
.db-breach-toast-assignee-name { font-size: var(--nx-fs-secondary); font-weight: 500; color: var(--nx-ink); }
.db-breach-toast-sla {
  font-family: var(--nx-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-rose-fg-2);
}
.db-breach-toast-close {
  position: absolute;
  top: 6px;
  right: var(--nx-s2);
  background: none;
  border: none;
  color: var(--nx-muted);
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: color var(--nx-dur);
}
.db-breach-toast-close:hover { color: var(--nx-ink-strong); }
.db-breach-toast-progress { height: 2px; background: var(--nx-row-divider); }
.db-breach-toast-progress-bar {
  height: 100%;
  background: var(--nx-rose-fg-2);
  width: 0%;
  transition: width .3s linear;
}
.db-breach-toast-progress-bar.running { transition: width 10s linear; width: 100%; }

/* ---- Event animations (state changes only, no decoration) -------- */
@keyframes c-wall-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes c-wall-spin { to { transform: rotate(360deg); } }
@keyframes c-wall-toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes c-wall-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes c-wall-flash-new {
  0% { background: var(--nx-accent-soft-bg); border-color: var(--nx-accent-soft-line); }
  100% { background: var(--nx-sunken); border-color: var(--nx-line); }
}
@keyframes c-wall-flash-breach {
  0%, 30%, 60% { background: var(--nx-rose-bg); border-color: var(--nx-rose-fg-2); }
  15%, 45%, 100% { background: var(--nx-sunken); border-color: var(--nx-line); }
}
@keyframes c-wall-stat-bump { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes c-wall-row-new { 0% { background: var(--nx-accent-soft-bg); } 100% { background: transparent; } }
@keyframes c-wall-row-breach {
  0%, 30%, 60% { background: var(--nx-rose-tint); }
  15%, 45%, 100% { background: transparent; }
}
.ticket-new-animation { animation: c-wall-flash-new 3s ease-out; }
.ticket-breach-animation { animation: c-wall-flash-breach 4s ease-out; }
.stat-flash { animation: c-wall-stat-bump .4s ease-out; }
.row-new-animation { animation: c-wall-row-new 3s ease-out; }
.row-breach-animation { animation: c-wall-row-breach 4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .c-wall *, .c-wall *::before, .c-wall *::after,
  .db-breach-toast, .db-breach-toast *,
  .db-sla-timer.sla-breached, .db-breach-toast-title::before {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1200px) {
  .c-wall-kpis { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; }
  .c-wall-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .db-panel.active { grid-row: auto; grid-column: auto; }
  .db-dist-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .c-wall-kpis { grid-template-columns: repeat(2, 1fr); }
  .db-stat-value { font-size: var(--nx-fs-kpi); }
  .c-wall-bar { gap: var(--nx-s2); }
  .c-wall-title { display: none; }
}

/* ============ 16d. TICKETS MODULE SURFACES (board 4a) ============
   The triage list carried ~800 lines of page CSS. These are the shapes
   with no Console twin, rebuilt from tokens so the module needs no
   page-level stylesheet. Anything with a Console twin (buttons, tags,
   tables, fields, modals, rail, KPI, pager) was remapped, not restyled.
   ================================================================ */

/* Right column of the queue-rail grid: toolbar/kpi/table lose their own
   gutters because the grid already provides them. */
.c-railmain { min-width: 0; }
.c-railmain .c-toolbar { padding: 0 0 10px; }
.c-railmain .c-toolbar--chips { padding: 0 0 12px; }
.c-railmain .c-kpi { margin: 0 0 12px; }
.c-railmain .c-tablewrap { margin: 0; }

.c-viewtitle { font-size: 15px; font-weight: 700; color: var(--nx-ink); }
.c-toolbar-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* Rail extras: amber count (unassigned/pending), rose queue item, pinned
   foot links, full-width segment (section switch inside the rail). */
.c-rail-count--amber { color: var(--nx-amber-strong); }
.c-rail-item--rose { color: var(--nx-rose-fg-2); font-weight: 500; }
.c-rail-item--rose .c-rail-count { color: var(--nx-rose-fg-2); }
.c-rail-foot {
  border-top: 1px solid var(--nx-row-divider);
  margin-top: var(--nx-s2);
  padding-top: var(--nx-s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-segment--block { display: flex; }
.c-segment--block button,
.c-segment--block label { flex: 1; text-align: center; justify-content: center; }

/* Radio-backed segment (board 11b PORTAL ACCESS). Same reasoning as the
   checkbox chips: a real radio group named like the field means
   form.<name>.value still reads and writes it, so no save logic changes - and
   arrow-key navigation comes free. */
.c-segment--radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 6px;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-muted);
  cursor: pointer;
}
.c-segment--radio label:hover { background: var(--nx-sunken); }
.c-segment--radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.c-segment--radio label:has(input:checked) {
  font-weight: 600;
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
}
.c-segment--radio label:has(input:focus-visible) {
  outline: 2px solid var(--nx-accent);
  outline-offset: -2px;
}
.section-tab-badge {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  background: var(--nx-rose-bg);
  color: var(--nx-rose-fg);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  margin-left: 4px;
}

/* MY VIEWS (owner feature 2026-08-18): user-saved filter snapshots in the
   queue rail. Dot colours are design tokens referenced by NAME through the
   c-dot--v-* classes, never a hex, so themes keep recolouring saved views. */

/* Dashed "+ Save view" affordance (c-btn--dashed vocabulary on a rail item) */
.c-rail-item--dashed {
  border: 1px dashed var(--nx-dashed-line);
  color: var(--nx-muted);
}
.c-rail-item--dashed:hover { color: var(--nx-ink); }

/* Saved-view row: dot + name + mono count, quiet actions on hover. The
   permanent transparent border keeps the box identical when the drag state
   paints its dashed border. */
.c-rail-view {
  border: 1px solid transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.c-rail-view-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-rail-view .c-rail-count { margin-left: auto; }
/* The overflow trigger swaps in for the count on hover/focus (managed rows
   only - buildViewItem adds it when the row is editable). */
.c-rail-view .c-rail-viewmenu { margin-left: auto; display: none; flex: 0 0 auto; }
.c-rail-view:hover .c-rail-viewmenu,
.c-rail-view:focus-within .c-rail-viewmenu { display: inline-flex; }
/* The count is only non-last when the row carries the overflow trigger. */
.c-rail-view:hover > .c-rail-count:not(:last-child),
.c-rail-view:focus-within > .c-rail-count:not(:last-child) { display: none; }
.c-menu-item--rose { color: var(--nx-rose-fg-2); }
.c-menu-item--rose:hover { background: var(--nx-rose-tint); }

/* Drag to reorder: the lifted item goes dashed and floats; siblings slide
   out of the way with a transform transition while the container is in its
   reordering state. */
#railMyViews.is-reordering .c-rail-view { transition: transform 120ms var(--nx-ease); }
#railMyViews.is-reordering .c-rail-view.is-dragging { transition: none; }
.c-rail-view.is-dragging {
  border: 1px dashed var(--nx-dashed-line);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-menu);
  z-index: 5;
}

/* Saved-view dot colours - the palette the save modal offers (TK-3: accent,
   amber, rose, ink; green/neutral survive as legacy render-only colours).
   --sw-ring feeds the selected-swatch double ring in the modal. */
.c-dot--v-accent  { background: var(--nx-accent);     --sw-ring: var(--nx-accent); }
.c-dot--v-green   { background: var(--nx-green-dot);  --sw-ring: var(--nx-green-dot); }
.c-dot--v-amber   { background: var(--nx-amber-dot);  --sw-ring: var(--nx-amber-dot); }
.c-dot--v-rose    { background: var(--nx-rose-fg-2);  --sw-ring: var(--nx-rose-fg-2); }
.c-dot--v-neutral { background: var(--nx-muted);      --sw-ring: var(--nx-muted); }
.c-dot--v-ink     { background: var(--nx-ink-strong); --sw-ring: var(--nx-ink-strong); }

/* Colour picker in the save-view modal (TK-3): square swatches inside a
   bordered field; the selected one gets the double ring in its own colour. */
.c-viewswatches {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  padding: 8px 10px;
}
.c-viewswatch {
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
}
.c-viewswatch .c-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--nx-r-chip);
}
.c-viewswatch:hover .c-dot {
  box-shadow: 0 0 0 2px var(--nx-surface), 0 0 0 3px var(--nx-border-strong);
}
.c-viewswatch.is-on .c-dot {
  box-shadow: 0 0 0 2px var(--nx-surface), 0 0 0 3.5px var(--sw-ring, var(--nx-accent));
}

/* Inline (auto-width) select for the toolbar sort control */
.c-select--inline {
  width: auto;
  padding: 4px 8px;
  font-size: var(--nx-fs-secondary);
}

/* Filter chip that wraps a native select (board 4a dashed chips). Active
   value flips it to the accent-soft filter-chip look. */
.c-chipselect {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed var(--nx-dashed-line);
  border-radius: var(--nx-r-control);
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary);
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.c-chipselect select {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  padding: 5px 4px 5px 10px;
  cursor: pointer;
  max-width: 180px;
}
.c-chipselect select:focus-visible {
  outline: 2px solid var(--nx-accent);
  border-radius: var(--nx-r-control);
}
.c-chipselect.has-value {
  border-style: solid;
  border-color: transparent;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-weight: 500;
}
.c-chipselect--check { padding: 5px 10px; gap: 6px; }
.c-chipselect--check input { margin: 0; cursor: pointer; }

/* Checkbox-dropdown filters (region / person / team). The toggle reads as
   one more dashed chip; the menu is a Console attached panel. */
.ms-filter { position: relative; }
.ms-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--nx-dashed-line);
  border-radius: var(--nx-r-control);
  background: none;
  color: var(--nx-muted);
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  padding: 5px 10px;
  cursor: pointer;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
}
.ms-filter-toggle.has-selection {
  border-style: solid;
  border-color: transparent;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-weight: 500;
}
.ms-filter-caret { margin-left: auto; opacity: .55; flex: 0 0 auto; }
.ms-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  box-shadow: var(--nx-shadow-menu);
}
.ms-filter-menu--scroll { max-height: 320px; overflow-y: auto; }
.ms-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--nx-r-chip);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  cursor: pointer;
  white-space: nowrap;
}
/* Two classes beat one, order-independent (see the dialog/display pitfall) */
.ms-filter-option.hidden { display: none; }
.ms-filter-option:hover { background: var(--nx-sunken); }
.ms-filter-option input { cursor: pointer; margin: 0; }
.ms-filter-search {
  position: sticky;
  top: -6px;
  z-index: 1;
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-ink);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
}
.ms-filter-search:focus { outline: none; border-color: var(--nx-accent); }
.ms-filter-option-text { overflow: hidden; text-overflow: ellipsis; }
.ms-filter-empty { padding: 10px 8px; font-size: var(--nx-fs-secondary); color: var(--nx-muted); }
.ms-filter-count {
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  font-variant-numeric: tabular-nums;
}

/* Grouped-register rows (status strips inside the table) */
.c-table tr.c-grouprow td {
  padding: 5px var(--nx-s4);
  background: var(--nx-sunken);
  border-bottom: 1px solid var(--nx-row-divider);
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-muted);
}

/* Ticket row anatomy (board 4a) */
.c-rowid { display: inline-flex; align-items: center; gap: 7px; }

/* Clickable ticket rows read as links (owner request 2026-08-17): pointer on
   the whole row, and the mono ticket number lights up like a link on hover.
   The tbody is #ticketsBody - this was written against #ticketsTableBody,
   an id that exists nowhere in the app, so the rule never matched and rows
   kept the text I-beam. Excludes the rows that are NOT clickable: status
   group headers, skeleton rows and the infinite-scroll sentinel. */
#ticketsBody tr:not(.c-grouprow):not(.nxsk-tr):not(.nxsk-more-row) { cursor: pointer; }
#ticketsBody tr:not(.c-grouprow):hover .c-rowid .c-cell-mono {
  color: var(--nx-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-assignee { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.c-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--nx-fs-secondary);
}
.c-sla {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-transform: uppercase;
}
.c-sla--ok       { color: var(--nx-green-fg); }
.c-sla--warning  { color: var(--nx-amber-fg); }
.c-sla--breached { color: var(--nx-rose-fg-2); font-weight: 600; }
.c-sla--none     { color: var(--nx-faint); }
.c-tag--cat {
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keep every cell inside its own column under table-layout: fixed */
.c-table--tickets tbody td { overflow: hidden; }

/* Sortable headers + drag-to-resize handles. th is sticky (positioned),
   so the absolutely positioned handle anchors to it - do NOT add
   position: relative here, it would silently unstick the header row. */
.c-table th.th-sortable { cursor: pointer; user-select: none; }
.c-table th.th-sortable:hover { color: var(--nx-ink); background: var(--nx-sunken); }
.c-table th.th-sort-active { color: var(--nx-accent-text); }
.th-sort-label { display: inline-flex; align-items: center; gap: 4px; }
.th-sort-icon {
  display: inline-flex;
  flex-direction: column;
  line-height: .65;
  font-size: 7px;
  opacity: .35;
  vertical-align: middle;
}
th.th-sort-active .th-sort-icon { opacity: 1; }
.th-sort-icon .sort-chevron-active { opacity: 1; font-weight: 700; }
.th-sort-icon .sort-chevron-inactive { opacity: .25; }
table.th-cols-sized { table-layout: fixed; }
.th-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}
.th-resizer::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--nx-accent);
  opacity: 0;
}
.th-resizer:hover::after,
.th-resizer:focus-visible::after,
table.th-resizing .th-resizer-active::after { opacity: 1; }
.th-resizer:focus-visible { outline: none; }
table.th-resizing { user-select: none; cursor: col-resize; }

/* Pager hint (sort help lives in the pager row, mono like the rest) */
.c-pager-hint { color: var(--nx-faint); }

/* Ticket id in the detail modal head */
.ticket-number {
  font-family: var(--nx-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nx-ink);
}

/* Create-modal helpers */
.tt-note { margin: 0 0 16px; font-size: var(--nx-fs-secondary); line-height: 1.45; color: var(--nx-muted); }
.c-labelrow { display: flex; align-items: center; gap: 6px; }
.c-labellink {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nx-muted);
  cursor: pointer;
  text-decoration: underline;
}
.c-labellink:hover { color: var(--nx-ink); }

/* Lookup fields (org / user pickers in the create modal) */
.lookup-field { position: relative; }
.lookup-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  padding: 7px 12px;
  border-radius: var(--nx-r-control);
  cursor: pointer;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  min-height: 20px;
}
.lookup-display:hover { border-color: var(--nx-accent); }
.lookup-display .lookup-placeholder { color: var(--nx-faint); }
.lookup-display .lookup-value { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lookup-display .lookup-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-display .lookup-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: var(--nx-sunken);
  color: var(--nx-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  line-height: 1;
}
.lookup-display .lookup-clear:hover { background: var(--nx-rose-bg); color: var(--nx-rose-fg); }
.lookup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--nx-r-chip);
  cursor: pointer;
  font-size: var(--nx-fs-secondary-lg);
}
.lookup-item:hover { background: var(--nx-sunken); }
.lookup-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nx-r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  background: var(--nx-sunken);
  color: var(--nx-muted);
  border: 1px solid var(--nx-line);
}
.lookup-item-info { flex: 1; min-width: 0; }
.lookup-item-name {
  font-weight: 500;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lookup-item-meta { font-size: var(--nx-fs-meta); color: var(--nx-muted); margin-top: 1px; }
.lookup-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--nx-r-chip-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 500;
  flex: 0 0 auto;
}

/* HubSpot company picker (quick-create organisation) */
.hs-results { display: none; }
.hs-results:not(.hidden) {
  display: block;
  margin-top: 6px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  background: var(--nx-surface);
}
.hs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: var(--nx-fs-secondary-lg);
  cursor: pointer;
  border-top: 1px solid var(--nx-row-divider);
}
.hs-row:first-child { border-top: 0; }
.hs-row:hover { background: var(--nx-sunken); }
.hs-row.is-taken { cursor: not-allowed; opacity: .55; }
.hs-row.is-taken:hover { background: transparent; }
.hs-row-main { flex: 1; min-width: 0; }
.hs-row-name { font-weight: 500; color: var(--nx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-row-meta { font-size: var(--nx-fs-meta); color: var(--nx-muted); margin-top: 1px; }
.hs-row-flag {
  flex: 0 0 auto;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--nx-faint);
}
.hs-picked { display: none; }
.hs-picked:not(.hidden) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--nx-accent-soft-line);
  border-radius: var(--nx-r-control);
  background: var(--nx-accent-soft-bg);
}
.hs-picked .hs-row-name { color: var(--nx-accent-soft-fg); }
.hs-empty { padding: 14px 12px; font-size: var(--nx-fs-secondary); color: var(--nx-muted); }

/* Domain-mismatch warning in the quick-create dialogs. `display` sits on
   :not(.hidden) so the class can never out-rank `.hidden`. */
.quick-contact-warning { display: none; }
.quick-contact-warning:not(.hidden) {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--nx-amber-tint-line);
  border-radius: var(--nx-r-control);
  background: var(--nx-amber-tint-2);
  color: var(--nx-amber-fg);
  font-size: var(--nx-fs-secondary);
}

/* Assignment preview (create modal) */
.assignment-preview {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s3) var(--nx-s4);
  background: var(--nx-sunken);
  min-height: 48px;
}
.preview-loading { opacity: .6; }
.assignment-card { display: flex; align-items: flex-start; gap: 12px; }
.assignment-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--nx-r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  flex: 0 0 auto;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
}
.assignment-card-info { flex: 1; min-width: 0; }
.assignment-card-name { font-size: var(--nx-fs-secondary-lg); font-weight: 500; color: var(--nx-ink); }
.assignment-card-detail { font-size: var(--nx-fs-meta); color: var(--nx-muted); margin-top: 2px; }
.assignment-rule-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: var(--nx-r-chip-sm);
  margin-top: 6px;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  text-transform: uppercase;
}
.assignment-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--nx-row-divider);
}
.team-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--nx-r-chip);
  font-size: var(--nx-fs-meta);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  color: var(--nx-muted);
}
.team-member-chip .capacity-dot { width: 6px; height: 6px; border-radius: 50%; }
.team-member-chip .capacity-dot.green  { background: var(--nx-green-dot); }
.team-member-chip .capacity-dot.yellow { background: var(--nx-amber-dot); }
.team-member-chip .capacity-dot.red    { background: var(--nx-rose-fg-2); }

/* Discussion (detail modal) */
.comment-item {
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--nx-r-control);
  font-size: var(--nx-fs-secondary-lg);
}
.comment-item.internal {
  background: var(--nx-amber-tint);
  border-color: var(--nx-amber-tint-line);
}

/* Corner toast (page-level notifications; popover = top layer, so it
   paints above open modals) */
.c-toastmsg {
  position: fixed;
  inset: auto 24px 24px auto;
  background: var(--nx-surface);
  color: var(--nx-ink);
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-green-dot);
  box-shadow: var(--nx-shadow-menu);
  padding: 12px 16px;
  font-size: var(--nx-fs-secondary-lg);
  max-width: 400px;
  border-radius: var(--nx-r-control);
  margin: 0;
  z-index: 10000;
  display: none;
  overflow: visible;
}
.c-toastmsg:popover-open { display: block; }
.c-toastmsg.error { border-left-color: var(--nx-rose-fg-2); }

/* ---- 16d-TK. Tickets board additions (TK-1/TK-2/TK-3, 2026-08-18) ----
   Views rail zones, saved-view rows + overflow menu, the ONE Filters
   panel, focus mode, infinite scroll sentinel + top pill, TK-3 modal. */

/* Rail zones: pinned top, ONE scrollable middle, pinned new-view + foot.
   Sticky full-height only on desktop - under 960px the rail is the shared
   slide-in drawer and manages its own height. */
@media (min-width: 961px) {
  .c-rail--tickets {
    position: sticky;
    top: calc(var(--nx-topbar-h) + 14px);
    max-height: calc(100vh - var(--nx-topbar-h) - 14px - var(--nx-gutter));
  }
}
.c-rail-pintop { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.c-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--nx-s2);
  border-top: 1px solid var(--nx-row-divider);
}
.c-rail-grouphead { display: flex; align-items: center; gap: 6px; }
.c-rail-grouptag {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nx-muted);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
}
.c-rail-grouptag--shared {
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-color: transparent;
}
/* Bottom fade + mono hint while views sit below the fold. Sticky inside the
   scroller so it rides the visible bottom edge. */
.c-rail-fade {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  height: 34px;
  flex: 0 0 auto;
  background: linear-gradient(color-mix(in srgb, var(--nx-surface) 0%, transparent), var(--nx-surface));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.c-rail-fade.hidden { display: none; }
.c-rail-scrollhint {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  color: var(--nx-faint);
  padding-bottom: 2px;
}
.c-rail-newview {
  flex: 0 0 auto;
  border-top: 1px solid var(--nx-row-divider);
  margin-top: var(--nx-s2);
  padding-top: var(--nx-s2);
}
.c-rail-newview .c-rail-item--dashed { justify-content: center; }
.c-rail-focusnote {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  color: var(--nx-faint);
  padding: 8px 10px;
}

/* Saved-view row overflow: one quiet mono trigger, menu body-mounted. */
.c-rail-viewmenu {
  border: 0;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  font-family: var(--nx-font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--nx-faint);
}
.c-rail-viewmenu:hover { color: var(--nx-ink); }

/* Focus mode (board TK-2): the railgrid carries .is-focus; items the rail
   logic marked .focus-hide disappear, the footnote appears. */
#ticketsRailgrid.is-focus .focus-hide { display: none; }
#ticketsRailgrid.is-focus .c-rail-focusnote { display: block; }
#ticketsRailgrid.is-focus .c-rail-scroll { border-top: 0; margin-top: 0; }
#ticketsRailgrid.is-focus .c-kpi { display: none; }
#focusModeBtn svg { display: block; transition: transform var(--nx-dur) var(--nx-ease); }
#focusModeBtn[aria-pressed="true"] svg { transform: rotate(180deg); }

/* Filters button states: accent-soft while any filter is active; the mono
   HIDDEN tag appears in focus mode while the panel is closed. */
#filtersPanelBtn.has-active {
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  border-color: var(--nx-accent-soft-line);
  font-weight: 600;
}
.c-fbtn-caret { opacity: .55; font-size: 10px; }
/* Visually hidden, still announced (sort-direction long label). */
.u-srlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.c-fbtn-tag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
}
#filtersPanelBtn.has-active .c-fbtn-tag { background: var(--nx-surface); }

/* The ONE filters panel: attached surface card with an accent-tinted border,
   overlaying the top of the list while open (not a dialog). */
.c-fpanel-anchor { position: relative; z-index: 25; }
.c-fpanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nx-surface);
  border: 1px solid var(--nx-accent-soft-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s3) 14px;
  box-shadow: var(--nx-shadow-menu);
}
.c-fpanel.hidden { display: none; }
.c-fpanel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 14px;
}
@media (max-width: 1100px) { .c-fpanel-grid { grid-template-columns: repeat(2, 1fr); } }
.c-fpanel-field { min-width: 0; }
.c-fpanel-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-muted);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.c-fpanel-field .c-select { width: 100%; }
.c-fpanel-field .ms-filter { display: block; }
.c-fpanel-field .ms-filter-toggle { width: 100%; max-width: none; display: flex; }
.c-fpanel-check {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 7px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  cursor: pointer;
}
.c-fpanel-check input { margin: 0 0 2px; cursor: pointer; }
.c-fpanel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--nx-s3);
  border-top: 1px solid var(--nx-row-divider);
  padding-top: 10px;
}
.c-fpanel-note {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--nx-faint);
}

/* Chip-in-field multi filters (SLA tier / machine dimensions): the toggle is
   a bordered field whose selected values render as mono chips; NO MACHINE
   reads amber. Solid border - these sit in the panel, not the chips row. */
.ms-filter-toggle--chips {
  border-style: solid;
  border-color: var(--nx-border-strong);
  background: var(--nx-surface);
  padding: 4px 8px;
  min-height: 30px;
}
.ms-filter-toggle--chips.has-selection {
  background: var(--nx-surface);
  color: var(--nx-muted);
  border-color: var(--nx-border-strong);
  font-weight: 400;
}
.ms-chipset { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.ms-chipset:empty::before { content: 'Any'; color: var(--nx-empty); }
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 6px;
  white-space: nowrap;
}
.ms-chip--amber { color: var(--nx-amber-fg); background: var(--nx-amber-bg); }
.ms-chip-x { cursor: pointer; opacity: .7; }
.ms-chip-x:hover { opacity: 1; }
.ms-chip-placeholder { color: var(--nx-empty); font-size: var(--nx-fs-secondary-lg); }
.ms-filter-option--amber { color: var(--nx-amber-fg); }
.ms-filter.is-disabled { opacity: .45; pointer-events: none; }

/* Mono filter chips (read-only) in the TK-3 modal */
.c-viewmodal-row {
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 12px;
  margin-bottom: 14px;
}
.c-req { color: var(--nx-rose-fg-2); }
.c-field-labelnote {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nx-faint);
}
#viewModalVisibility { margin-bottom: 14px; }
.c-visnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  background: var(--nx-amber-tint-2);
  border: 1px solid var(--nx-amber-tint-line);
  border-radius: var(--nx-r-control);
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--nx-amber-fg);
}
.c-visnote.hidden { display: none; }
.c-visnote-chip {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  background: var(--nx-amber-fg);
  color: var(--nx-amber-tint-2);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  flex: 0 0 auto;
}
.c-viewmodal-chips {
  border: 1px solid var(--nx-line);
  background: var(--nx-sunken);
  border-radius: var(--nx-r-control);
  padding: 8px 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 20px;
}
.c-fchip {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 6px;
}
.c-fchip--empty { color: var(--nx-faint); background: none; }

/* Visibility segment rows reuse the block segment; is-active carries the
   primary fill via the shared .c-segment rules. */
#viewModalVisSegment .vis-seg { flex: 1; }

/* Infinite scroll (board TK-2): thead + status group strips stick while the
   page scrolls, the sentinel row loads the next 50, a floating pill returns
   to the top. The tickets table never overflows horizontally by design (see
   the column-resize block in tickets.js), so the wrap can drop its scrollport
   and let position: sticky work against the page again. */
#sectionPanel-tickets .c-tablewrap { overflow: clip; }
#sectionPanel-tickets .c-tablescroll { overflow-x: visible; }
/* The chrome topbar scrolls away with the page (its sticky containing block
   is the chrome mount), so the table header owns the viewport top and the
   group strips ride just under it. */
.c-table--tickets tr.c-grouprow td {
  position: sticky;
  top: 32px;   /* the thead's rendered height */
  z-index: 1;
}
/* Infinite-scroll sentinel moved to the shared layer: .nxsk-more with
   the frame modifiers .nxsk-more--block and tr.nxsk-more-row. */

.c-toppill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  color: var(--nx-muted);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--nx-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: var(--nx-shadow-menu);
}
.c-toppill:hover { color: var(--nx-ink); border-color: var(--nx-accent); }
.c-toppill.hidden { display: none; }

/* ============ 16e. HR PEOPLE DIRECTORY + EMPLOYEE PROFILE =========
   People tab (register-pattern card grid) and the employee profile
   detail page (organization-detail pattern). The old page stylesheet
   carried these shapes; rebuilt from tokens. Only brand exception is
   the Teams-purple meeting button, kept by owner decision. =========== */

/* Toolbar-row selects are constrained, not full-bleed: the c-select-trigger
   button nexus-select.js inserts is width:100% by default, which turns every
   filter select in a flex row into a full-width bar. Scope it down inside
   the two row containers. */
.c-toolbar .c-select-trigger,
.hr-sec-top .c-select-trigger {
  width: auto;
  min-width: 150px;
}

/* Directory rows, board 11a: small circles, dense rows, 3-up. Not a photo
   card - the circle is 36px and the row is 10/12 padding, so a screenful
   holds people rather than portraits. Collapses to 2-up then 1-up. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nx-s2);
}
@media (max-width: 1180px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .people-grid { grid-template-columns: minmax(0, 1fr); } }

/* Alphabetical group header above each run of rows (mono, faint) */
.people-group {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-faint);
  padding: var(--nx-s2) 2px var(--nx-s1);
}
.people-group:first-child { padding-top: 0; }

.people-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.people-card:hover { border-color: var(--nx-border-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }
.people-card:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }

/* The circle sizes the img (object-fit cover), so an unsized or huge source
   can never blow the row up. Initials fill the same circle with no photo.
   Sized here rather than as a new .c-avatar-- size, same as .c-cal-stack. */
.people-card .c-avatar {
  width: 36px;
  height: 36px;
  font-size: var(--nx-fs-meta);
  font-weight: 700;
}
.people-card-body { flex: 1; min-width: 0; }
.people-card-name {
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.people-card-title {
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.people-card-meta {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  text-transform: uppercase;   /* copy rule: mono meta is UPPERCASE */
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Presence dot, 7px - bigger than the 6px status dot, and it carries no
   label, so the legend lives in the directory footer. */
.people-card .c-dot { width: 7px; height: 7px; }

/* Footer rule: mono next-group label, dashed rule, mono legend (board 11a) */
.people-foot {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 10px 2px 2px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-overline);
  color: var(--nx-faint);
}
.people-foot-rule {
  flex: 1;
  border-top: 1px dashed var(--nx-border-strong);
}

/* Employee profile page: re-base the self-guttering detail components to
   the section's own padding (same trick as .hr-section .c-toolbar). */
.emp-profile-page .c-detailbar { padding: 0 0 10px; }
.emp-profile-page .c-headerband { margin: 0 0 12px; }
.emp-profile-page .c-tabs { margin: 0; padding: 0 0 12px; }

/* Header band internals */
.emp-headerband-main { min-width: 0; }
.emp-headerband-sub { font-size: var(--nx-fs-secondary-lg); color: var(--nx-muted); margin-top: 1px; }
.emp-headerband-main .c-headerband-chips { margin-top: 8px; }
.emp-headerband-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
}
.emp-meta-mail {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
  text-decoration: none;
}
.emp-meta-mail:hover { color: var(--nx-accent-text); }
.emp-headerband-actions { display: flex; gap: var(--nx-s2); margin-top: 6px; }

/* Teams brand button (kept by owner decision) on c-btn anatomy */
.c-btn--teams {
  background: #5558AF;
  border-color: #5558AF;
  color: #FFFFFF;
  font-weight: 600;
}
.c-btn--teams:hover { background: #4B4E9E; }
.c-btn--teams img { display: block; }

/* Overview: stack of c-section cards */
.profile-overview { display: flex; flex-direction: column; gap: var(--nx-s3); }

/* Leave-balance mini-KPI row inside the overview */
.emp-balance-row { display: flex; gap: 10px; flex-wrap: wrap; }
.emp-balance-cell {
  flex: 1;
  min-width: 110px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 10px;
}
.emp-balance-cell--accent { border-color: var(--nx-accent-soft-line); background: var(--nx-accent-soft-bg); }
.emp-balance-cell--amber { border-color: var(--nx-amber-tint-line); background: var(--nx-amber-tint-2); }
.emp-balance-num { font-family: var(--nx-font-mono); font-size: 20px; font-weight: 600; color: var(--nx-ink); }
.emp-balance-cell--accent .emp-balance-num { color: var(--nx-accent-soft-fg); }
.emp-balance-cell--amber .emp-balance-num { color: var(--nx-amber-strong); }
.emp-balance-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .06em;
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}

/* Emergency contact tiles */
.emp-contact {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 10px 12px;
}
.emp-contact-name { font-size: var(--nx-fs-body); font-weight: 600; color: var(--nx-ink); }
.emp-contact-rel { font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.emp-contact-phone { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); color: var(--nx-ink); margin-top: 6px; }

/* Performance / audit / log feed records (HR-admin tabs): one vocabulary -
   a Console card per record, 13/600 title, mono dates, muted body. */
.performance-item, .log-entry, .audit-item {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 12px var(--nx-s4);
  margin-bottom: var(--nx-s3);
}
.performance-item-header, .log-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nx-s3);
  margin-bottom: 4px;
}
.performance-item-title { font-size: var(--nx-fs-body); font-weight: 600; color: var(--nx-ink); }
.performance-item-badge, .log-entry-type {
  display: inline-block;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  border-radius: var(--nx-r-chip);
  padding: 2px 7px;
  margin-left: 6px;
  background: var(--nx-sunken);
  color: var(--nx-muted);
}
.performance-item-date { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-faint); white-space: nowrap; }
.performance-item-meta { font-size: var(--nx-fs-meta); color: var(--nx-faint); }
.performance-item-details { font-size: var(--nx-fs-secondary-lg); color: var(--nx-muted); margin-top: 6px; line-height: 1.5; }
.log-entry-action-items { margin-top: 10px; font-size: var(--nx-fs-secondary); color: var(--nx-muted); }
.log-entry-transcript {
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 10px 12px;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}
.audit-item { display: flex; gap: var(--nx-s3); align-items: flex-start; }
.audit-item-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--nx-r-chip);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audit-item-content { flex: 1; min-width: 0; }
.audit-item-action { font-size: var(--nx-fs-body); color: var(--nx-ink); }
.audit-item-field {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  background: var(--nx-sunken);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 4px;
}
.audit-item-values { font-size: var(--nx-fs-secondary); color: var(--nx-muted); margin-top: 2px; }
.audit-item-meta { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm); color: var(--nx-faint); text-align: right; white-space: nowrap; }

/* Schedule-meeting week calendar (HR meeting dialog) */
.week-calendar-header {
  background: var(--nx-surface);
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nx-faint);
  text-align: center;
  padding: 6px 4px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.week-calendar-header.today { color: var(--nx-accent-text); box-shadow: inset 0 -2px 0 var(--nx-accent); }
.week-calendar-time {
  background: var(--nx-surface);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  text-align: right;
  padding: 4px 6px;
}
.week-calendar-cell { background: var(--nx-surface); min-height: 26px; cursor: pointer; }
.week-calendar-cell:hover { background: var(--nx-sunken); }
.week-calendar-cell.past { background: var(--nx-sunken); cursor: default; }
.week-calendar-cell.busy { cursor: default; }
.week-calendar-cell.selected { background: var(--nx-selected-row); }
.week-calendar-event {
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-rose-fg);
  background: var(--nx-rose-bg);
  border-radius: var(--nx-r-chip-sm);
  margin: 2px;
  padding: 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-calendar-event.selected-event { background: var(--nx-accent-soft-bg); color: var(--nx-accent-soft-fg); }

/* ============ 16f. TEAM COVERAGE (board 10a) ======================
   Presence register inside Tickets. Gap teams sort first; the gap
   signal is the ONLY red on a healthy screen (colour = signal). */

.c-cov {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px var(--nx-gutter) var(--nx-gutter);
}
.c-cov .c-toolbar { padding: 0; }
.c-cov-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-cov-hours-link {
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  color: var(--nx-accent-text);
  text-decoration: none;
  white-space: nowrap;
}
.c-cov-hours-link:hover { text-decoration: underline; }

/* Active-filter chip in rose when the filter is the gap filter */
.c-filterchip--rose { background: var(--nx-rose-bg); color: var(--nx-rose-fg); }

/* KPI ribbon: last cell (coverage gaps) carries a rose tint when > 0 */
.c-cov-kpi-alert { background: var(--nx-rose-tint); }
.c-cov-kpi-alert .c-kpi-label { color: var(--nx-rose-fg); }

/* Two balanced columns; each column stacks cards (board nests them so a
   short card never leaves a row-height hole beside a tall one). */
.c-cov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.c-cov-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
@media (max-width: 900px) {
  .c-cov-grid { grid-template-columns: 1fr; }
}

.c-cov-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-cov-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-line);
}
.c-cov-card.has-gap > .c-cov-card-head {
  background: var(--nx-rose-tint);
  box-shadow: inset 2px 0 0 var(--nx-rose-fg-2);
}
.c-cov-card-name {
  font-size: var(--nx-fs-body);
  font-weight: 700;
  color: var(--nx-ink);
  margin: 0;
}
.c-cov-card-sub {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-faint);
  margin-top: 2px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.c-cov-card-spacer { flex: 1; }
.c-cov-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: var(--nx-green-fg);
  white-space: nowrap;
}
.c-cov-count.has-gap { color: var(--nx-rose-fg-2); }
.c-cov-count-total { color: var(--nx-faint); font-weight: 400; }
.c-cov-gap-chip {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--nx-rose-fg);
  background: var(--nx-rose-bg);
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-cov-members { list-style: none; margin: 0; padding: 0; }
.c-cov-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--nx-row-divider);
  cursor: pointer;
}
.c-cov-member:hover, .c-cov-member:focus-visible { background: var(--nx-sunken); }
.c-cov-member:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.c-cov-members > :last-child { border-bottom: 0; }

.c-cov-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--nx-row-divider);
  color: var(--nx-muted);
  font-size: 8.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-cov-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.c-cov-member-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-cov-tag {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  color: var(--nx-muted);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: none;
}
.c-cov-tag--dashed { border-style: dashed; color: var(--nx-faint); }

.c-cov-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--nx-faint);
  white-space: nowrap;
}
.c-cov-status[data-status="available"] { color: var(--nx-green-fg); }
.c-cov-status[data-status="busy"]      { color: var(--nx-rose-fg-2); }
.c-cov-status[data-status="away"]      { color: var(--nx-amber-fg); }
.c-cov-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nx-empty);
  display: inline-block;
  flex: none;
}
.c-cov-status[data-status="available"] .c-cov-status-dot { background: var(--nx-green-dot); }
.c-cov-status[data-status="busy"]      .c-cov-status-dot { background: var(--nx-rose-fg-2); }
.c-cov-status[data-status="away"]      .c-cov-status-dot { background: var(--nx-amber-dot); }

.c-cov-pickup {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-cov-pickup[data-tier="good"] { color: var(--nx-green-fg); }
.c-cov-pickup[data-tier="warn"] { color: var(--nx-amber-fg); }
.c-cov-pickup[data-tier="bad"]  { color: var(--nx-rose-fg-2); }

.c-cov-tkt {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
  white-space: nowrap;
  text-transform: uppercase;
}
.c-cov-empty-row {
  padding: 10px 14px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-faint);
}
.c-cov-tkt.is-empty { color: var(--nx-faint); }
/* Teams-chat deep link: rests invisible (the board row is clean); appears
   on row hover or keyboard focus. visibility (not display) keeps row
   geometry stable. */
.c-cov-chat {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-accent-text);
  text-decoration: none;
  flex: none;
  visibility: hidden;
}
.c-cov-member:hover .c-cov-chat,
.c-cov-member:focus-within .c-cov-chat,
.c-cov-member:focus .c-cov-chat { visibility: visible; }
.c-cov-chat:hover { text-decoration: underline; }

/* Keep the closed "+ Filter" select at chip width; the popup list still
   renders its full option labels. */
.c-cov .c-chipselect select { width: 84px; }

/* "+ N more · expand" row and the 7-day team pickup footer */
.c-cov-more {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  border: 0;
  border-top: 1px solid var(--nx-row-divider);
  background: var(--nx-sunken);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  cursor: pointer;
}
.c-cov-more:hover { color: var(--nx-muted); }
.c-cov-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-top: 1px solid var(--nx-row-divider);
  background: var(--nx-sunken);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
}

.c-cov-footnote {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.c-cov-empty {
  border: 1px dashed var(--nx-dashed-line);
  border-radius: var(--nx-r-card);
  padding: 28px;
  text-align: center;
}
.c-cov-empty-title { font-size: var(--nx-fs-body); font-weight: 600; margin: 0 0 4px; color: var(--nx-ink); }
.c-cov-empty-body { font-size: var(--nx-fs-secondary); color: var(--nx-muted); margin: 0; }

/* Skeleton mirrors the card layout (never a wait screen) */
.c-cov-card.is-skeleton { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Scoreboard: top answerers, kept below the register (not on the board;
   preserved feature from the previous build) */
.c-cov-scoreboard {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-cov-scoreboard-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-line);
}
.c-cov-scoreboard-title {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  letter-spacing: var(--nx-ls-overline);
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 0;
}
.c-cov-scoreboard-hint {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.c-cov-scoreboard-list { list-style: none; margin: 0; padding: 0; }
.c-cov-scoreboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--nx-row-divider);
}
.c-cov-scoreboard-row:last-child { border-bottom: 0; }
.c-cov-rank {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  width: 16px;
  text-align: right;
  flex: none;
}
.c-cov-scoreboard-row[data-rank="1"] .c-cov-rank { color: var(--nx-ink); font-weight: 600; }
.c-cov-scoreboard-team {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.c-cov-scoreboard-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-cov-scoreboard-stats {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.c-cov-scoreboard-answered {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: var(--nx-ink);
}
.c-cov-scoreboard-answered-label {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  text-transform: uppercase;
}

/* Per-member stats modal (c-modal shell + a 3-up stat grid) */
.c-cov-stats-modal { width: 640px; }
.c-cov-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nx-s2);
}
.c-cov-stat {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 8px 10px;
  background: var(--nx-surface);
}
.c-cov-stat-label {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.c-cov-stat-value {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-kpi);
  font-weight: 600;
  color: var(--nx-ink);
  margin-top: 2px;
}
.c-cov-stat[data-tier="good"] .c-cov-stat-value { color: var(--nx-green-fg); }
.c-cov-stat[data-tier="warn"] .c-cov-stat-value { color: var(--nx-amber-fg); }
.c-cov-stat[data-tier="bad"]  .c-cov-stat-value { color: var(--nx-rose-fg-2); }
.c-cov-stat-hint {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.c-cov-stats-sub {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  text-transform: uppercase;
}

/* ============ 16h. COMPONENTS MODULE (board 3f) ===================
   Catalog register + component detail. Tokens only. */

/* Register thumb: photo when the part has one, dashed square otherwise */
.c-comp-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--nx-r-control);
  object-fit: cover;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  display: block;
}
.c-comp-thumb--empty { border: 1px dashed var(--nx-dashed-line); background: var(--nx-sunken); }
.c-comp-thumb--lg { width: 44px; height: 44px; border-radius: var(--nx-r-card); }

/* Bulk sync progress track (HubSpot / Monday batch dialogs) */
.c-sync-track {
  height: 8px;
  border-radius: 999px;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  overflow: hidden;
}
.c-sync-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--nx-accent);
  transition: width .25s ease;
}

/* Compatibility rule row: type select | version chips | generation chips | remove */
.c-compat-row {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 30px;
  gap: var(--nx-s3);
  align-items: center;
  border-top: 1px solid var(--nx-row-divider);
  padding: 8px 0;
}
.c-compat-head {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 30px;
  gap: var(--nx-s3);
  padding-bottom: 6px;
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  font-weight: 600;
  text-transform: uppercase;
}
/* The chipfield's empty placeholder reads as mono meta ("EMPTY = ANY VERSION") */
.c-chipfield .c-chipfield-empty {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-faint);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.c-compat-remove {
  border: 0;
  background: none;
  color: var(--nx-faint);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px;
}
.c-compat-remove:hover { color: var(--nx-rose-fg-2); }

/* Detail gallery tile (rail IMAGES card) */
.c-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--nx-s2);
}
.c-gallery-tile {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  overflow: hidden;
  background: var(--nx-sunken);
  display: flex;
  flex-direction: column;
}
.c-gallery-thumb {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  background: var(--nx-sunken);
}
.c-gallery-tile-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--nx-surface);
}
/* Empty drop slot - dashed, mono hint */
.c-gallery-slot {
  border: 1px dashed var(--nx-dashed-line);
  border-radius: var(--nx-r-control);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--nx-muted);
  font-size: 12px;
  background: none;
  width: 100%;
}
.c-gallery-slot:hover { border-color: var(--nx-accent); color: var(--nx-accent-text); }
.c-gallery-slot .c-gallery-slot-hint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-faint);
  text-transform: uppercase;
}

/* ============ 16g. COMMUNICATIONS MODULE (boards 5f + 7b) =========
   Register on the File Center vocabulary (5f): segmented tabs, KPI ribbon,
   c-table anatomy, delivery funnel bar. Campaign creator (7b): step rail /
   main / live-count side column, condition rows, compose editor. Email
   canvases stay LIGHT in dark mode (senders author for light backgrounds)
   - the same documented exception as ticket-detail. ================= */

/* Delivery funnel: sent -> opened -> clicked, next to the mono triple */
.c-comm-funnel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.c-comm-funnel .c-cell-mono { white-space: nowrap; }
.c-comm-funnel-bar {
  flex: 1;
  min-width: 48px;
  height: 5px;
  border-radius: 3px;
  background: var(--nx-sunken);
  overflow: hidden;
  display: flex;
}
.c-comm-funnel-open  { background: var(--nx-accent); }
.c-comm-funnel-click { background: var(--nx-accent-soft-bg); }

/* Suppression-total banner over the campaigns register */
.c-comm-banner {
  margin: 0 var(--nx-gutter) 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nx-amber-tint);
  border: 1px solid var(--nx-amber-tint-line, var(--nx-amber-bg));
  color: var(--nx-amber-fg);
  font-size: var(--nx-fs-secondary);
  border-radius: var(--nx-r-control);
  padding: 7px 12px;
}
.c-comm-banner button {
  margin-left: auto;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  font-size: var(--nx-fs-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.c-comm-banner button:hover { text-decoration: underline; }

/* Template card grid */
.c-comm-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 var(--nx-gutter) var(--nx-s4);
}
@media (max-width: 900px) {
  .c-comm-cardgrid { grid-template-columns: 1fr; }
}

/* ---- Campaign creator shell (7b): rail / main / side ---- */
.c-wiz {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: 16px;
  padding: 6px var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
@media (max-width: 1080px) {
  .c-wiz { grid-template-columns: 1fr; }
}
.c-wiz-rail { display: flex; flex-direction: column; gap: 2px; }
.c-wiz-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--nx-r-control);
  border: 0;
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-muted);
  text-align: left;
  cursor: pointer;
}
.c-wiz-step[disabled] { cursor: default; }
.c-wiz-step.is-active {
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-weight: 600;
}
.c-wiz-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--nx-border-strong);
  color: var(--nx-faint);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.c-wiz-step.is-active .c-wiz-step-num {
  background: var(--nx-accent);
  border-color: var(--nx-accent);
  color: var(--nx-btn-primary-fg);
  font-weight: 600;
}
.c-wiz-step.is-done .c-wiz-step-num {
  background: var(--nx-green-bg);
  border-color: transparent;
  color: var(--nx-green-fg);
}
.c-wiz-rail-note {
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  padding: 10px 12px;
  line-height: 1.5;
}
.c-wiz-main, .c-wiz-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c-wiz-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 14px 16px;
}
.c-wiz-actions { display: flex; gap: 10px; }
.c-wiz-actions .c-btn { flex: 1; justify-content: center; }

/* Live recipient count (always-dark ink card, both themes) */
.c-wiz-count { padding: 16px; }
.c-wiz-count-num {
  font-family: var(--nx-font-mono);
  font-size: 30px;
  font-weight: 600;
  color: #2DD4BF; /* board 7b live count - fixed accent on the always-dark ink card */
  font-variant-numeric: tabular-nums;
}
.c-wiz-count-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: .08em;
  color: var(--nx-topbar-dim);
  font-weight: 600;
  text-transform: uppercase;
}
.c-wiz-count-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-topbar-fg);
  text-transform: uppercase;
}
.c-wiz-count-rows .is-rose { color: var(--nx-rose-fg-2); }

/* ---- Audience: condition rows + groups ---- */
.c-comm-cond {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 8px 10px;
  background: var(--nx-surface);
}
.c-comm-cond .c-select { width: auto; min-width: 130px; flex: 0 0 auto; }
.c-comm-cond .c-input { width: auto; min-width: 150px; flex: 1 1 150px; }
.c-comm-cond .c-chipfield { flex: 1 1 220px; min-width: 220px; }
.c-comm-group {
  border-left: 3px solid var(--nx-accent);
  background: var(--nx-sunken);
  border-radius: var(--nx-r-control);
  padding: 12px;
}
.c-comm-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.c-comm-group-conds { display: flex; flex-direction: column; gap: 8px; }

/* Bare select inside a chips field (adds the next value) */
.c-chipfield select {
  border: 0;
  background: transparent;
  color: var(--nx-accent-text);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
  min-width: 130px;
  flex: 1 1 auto;
  cursor: pointer;
  outline: none;
}

/* Audience type / editor mode segments reuse .c-segment */

/* ---- Compose: editor card ---- */
.c-comm-editor {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-comm-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-sunken);
}
.c-comm-editor-btn {
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  color: var(--nx-muted);
  border-radius: var(--nx-r-chip);
  padding: 3px 8px;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
  cursor: pointer;
  line-height: 1.4;
}
.c-comm-editor-btn:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.c-comm-editor-btn.is-mono { font-family: var(--nx-font-mono); font-size: 9.5px; }
.c-comm-editor-sep { width: 1px; height: 18px; background: var(--nx-row-divider); margin: 0 4px; }
.c-comm-editor-select {
  border: 1px solid var(--nx-border-strong);
  background: var(--nx-surface);
  color: var(--nx-muted);
  border-radius: var(--nx-r-chip);
  padding: 3px 6px;
  font-size: var(--nx-fs-meta);
  font-family: var(--nx-font-sans);
  width: auto;
  flex: 0 0 auto;
}
.c-comm-editor-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip);
  background: var(--nx-surface);
  cursor: pointer;
}
.c-comm-personalise {
  border: 1px solid var(--nx-accent-soft-line, var(--nx-accent-soft-bg));
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  border-radius: var(--nx-r-chip);
  padding: 3px 8px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
}

/* Email canvas: authored for light backgrounds - stays light in dark mode
   (documented exception, same as the ticket-detail email thread). */
.c-comm-canvas {
  background: #FFFFFF;
  color: #333333;
  padding: 14px 16px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.c-comm-canvas:focus { outline: none; }
div.c-comm-canvas[contenteditable] { min-height: 320px; overflow-y: auto; }
textarea.c-comm-canvas {
  width: 100%;
  border: 0;
  resize: vertical;
  font-family: var(--nx-font-mono);
  font-size: 12.5px;
  background: var(--nx-surface);
  color: var(--nx-ink);
  min-height: 320px;
}
textarea.c-comm-canvas:focus { outline: none; }
.c-comm-canvas p, .c-comm-canvas div:not(:has(table)),
.c-comm-preview-body p, .c-comm-preview-body div:not(:has(table)) {
  margin: 0 0 12px 0;
  padding: 0;
  line-height: 1.5;
}
.c-comm-canvas ul, .c-comm-canvas ol,
.c-comm-preview-body ul, .c-comm-preview-body ol {
  margin: 0 0 12px 0;
  padding-left: 24px;
  line-height: 1.5;
}
.c-comm-preview-body {
  background: #FFFFFF;
  color: #333333;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 14px 16px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  overflow-y: auto;
}

/* Merge-token pill inside the editors (mono, accent-soft; survives on the
   light canvas in both themes because the soft tokens stay readable there) */
.token-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--nx-accent-soft-bg);
  border: 1px solid var(--nx-accent-soft-line, var(--nx-accent-soft-bg));
  border-radius: var(--nx-r-chip);
  padding: 1px 7px;
  margin: 0 1px;
  vertical-align: baseline;
  cursor: default;
  user-select: all;
  line-height: 1.6;
}
.token-pill-label {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--nx-accent-soft-fg);
  white-space: nowrap;
}
.token-pill-fallback {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-accent-soft-fg);
  opacity: .65;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.token-pill-fallback::before { content: '\00b7 '; }

/* Merge-variable highlights inside preview canvases (light surface) */
.c-comm-var        { background: #FEF9C3; color: #854D0E; padding: 0 3px; border-radius: 3px; }
.c-comm-var--live  { background: #DCFCE7; color: #15803D; }
.c-comm-var--fb    { background: #FEF3C7; color: #B45309; }
.c-comm-var--miss  { background: #FEE2E2; color: #991B1B; }

/* ---- Shared files / forms rows (compose) ---- */
.c-comm-filerow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--nx-row-divider);
  min-width: 0;
}
.c-comm-filerow-body { flex: 1; min-width: 0; }
.c-comm-filerow-name {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-comm-filerow-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.c-comm-filerow .c-rowactions { flex: 0 0 auto; }

/* Preview-as-recipient split (email preview modal) */
.c-comm-preview-split {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: min(70vh, 640px);
}
.c-comm-preview-people {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--nx-line);
  background: var(--nx-sunken);
  min-height: 0;
}
.c-comm-preview-mail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* ---- Recipient rows (preview-as-recipient list, forward results) ---- */
.c-comm-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--nx-row-divider);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--nx-font-sans);
}
.c-comm-person:hover { background: var(--nx-sunken); }
.c-comm-person.is-selected { background: var(--nx-selected-row); }
.c-comm-person[disabled],
.c-comm-person.org-result-added { opacity: .6; cursor: default; }
.c-comm-person[disabled]:hover { background: none; }
.c-comm-person-body { min-width: 0; flex: 1; }
.c-comm-person-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-comm-person-sub {
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Excluded recipient cells (step 2) */
.c-comm-excluded { text-decoration: line-through; color: var(--nx-faint); }

/* ---- Review + send options ---- */
.c-comm-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  cursor: pointer;
  background: var(--nx-surface);
}
.c-comm-mode:hover { border-color: var(--nx-accent); }
.c-comm-mode.is-selected {
  border-color: var(--nx-accent);
  background: var(--nx-accent-soft-bg);
}
.c-comm-mode input[type="radio"] { margin-top: 2px; accent-color: var(--nx-accent); }
.c-comm-mode-name { font-size: var(--nx-fs-secondary-lg); font-weight: 600; color: var(--nx-ink); }
.c-comm-mode-desc { font-size: var(--nx-fs-secondary); color: var(--nx-muted); line-height: 1.4; }

/* Schedule summary lines (step 4) */
.schedule-summary { margin: 12px 0 0; font-size: var(--nx-fs-secondary-lg); line-height: 1.5; }
.schedule-summary.muted { color: var(--nx-muted); }
.schedule-summary.ok { color: var(--nx-ink); }
.schedule-summary.ok strong { font-variant-numeric: tabular-nums; }
.schedule-summary.error { color: var(--nx-rose-fg-2); }
.schedule-summary-secondary {
  margin: 4px 0 0;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
}
.schedule-error { margin: 8px 0 0; font-size: var(--nx-fs-secondary); color: var(--nx-rose-fg-2); }

/* Stacked corner toasts (communications page keeps its own container so
   several can show at once) */
.c-comm-toast {
  background: var(--nx-surface);
  color: var(--nx-ink);
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-green-dot);
  box-shadow: var(--nx-shadow-menu);
  padding: 10px 14px;
  font-size: var(--nx-fs-secondary-lg);
  max-width: 400px;
  border-radius: var(--nx-r-control);
}
.c-comm-toast.is-error { border-left-color: var(--nx-rose-fg-2); }

/* ============ 16i. FILE CENTER (boards 14a-14e) ====================
   The module carried 2,280 lines of page-level CSS across four pages and
   zero Console tokens. These are the shapes with no Console twin, rebuilt
   from tokens; anything that HAD a twin (buttons, tags, tables, fields,
   modals, KPI ribbon, segments) is remapped in the markup instead.
   ================================================================== */

/* Board 14a: 210px rail + content. align-items:start so a short rail does
   not stretch its cards to the height of the document list. */
.fc-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  padding: 12px var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
.fc-layout--wide { grid-template-columns: minmax(0, 1fr); }
/* The rail toggle only exists where the rail collapses. */
.fc-railtoggle { display: none; }
@media (max-width: 1024px) {
  .fc-layout { grid-template-columns: minmax(0, 1fr); }
  .fc-rail { display: none; }
  .fc-rail.is-open { display: flex; }
  .fc-railtoggle { display: inline-flex; }
}

.fc-rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* A rail card is padding:8 with 1px gaps - the rows carry their own radius,
   so the card reads as one block rather than a bordered list. */
.fc-railcard {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fc-railcard--pad { padding: 10px; gap: 0; }
.fc-railtitle {
  display: flex;
  align-items: center;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  padding: var(--nx-s1) 10px;
}
.fc-railcard--pad .fc-railtitle { padding: 0 0 6px; }
.fc-railtitle-action {
  margin-left: auto;
  border: 0;
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-accent-text);
  cursor: pointer;
  padding: 0;
}
.fc-railtitle-action:hover { text-decoration: underline; }

.fc-railitem {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--nx-r-control);
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.fc-railitem:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.fc-railitem.is-active {
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-weight: 600;
}
.fc-railitem-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-railcount {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-faint);
  flex: 0 0 auto;
}
/* Inside the active row the count inherits the accent ink - a faint count on
   an accent-soft fill reads as disabled. */
.fc-railitem.is-active .fc-railcount { color: inherit; }
/* Second level (a folder inside a category) */
.fc-railitem--sub { padding-left: 22px; font-size: var(--nx-fs-meta); }

/* Machine-type pills: mono, fully round, collapsed behind "+ N MORE" */
.fc-chipwrap { display: flex; gap: var(--nx-s1); flex-wrap: wrap; }
.fc-typechip {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-muted);
  background: none;
  border: 1px solid var(--nx-border-strong);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.fc-typechip:hover { border-color: var(--nx-accent); color: var(--nx-ink); }
.fc-typechip.is-active {
  color: var(--nx-accent-soft-fg);
  background: var(--nx-accent-soft-bg);
  border-color: transparent;
  font-weight: 600;
}
.fc-typechip--more {
  color: var(--nx-accent-text);
  border-style: dashed;
  border-color: var(--nx-accent-soft-line);
}

/* A content panel: the card that holds folders / approvals / planning rows */
.fc-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.fc-panelhead {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 10px var(--nx-s4);
  border-bottom: 1px solid var(--nx-line);
  flex-wrap: wrap;
}
.fc-panelhead-title {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.fc-panelhead-note {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
}
.fc-panelfoot {
  padding: 7px var(--nx-s4);
  border-top: 1px solid var(--nx-row-divider);
  background: var(--nx-sunken);
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* LIST / GRID toggle - a mono micro-segment, smaller than .c-segment */
.fc-viewtoggle {
  margin-left: auto;
  display: flex;
  border: 1px solid var(--nx-border-strong);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  flex: 0 0 auto;
}
.fc-viewtoggle button {
  padding: 3px var(--nx-s2);
  border: 0;
  background: none;
  color: var(--nx-muted);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: .06em;
  cursor: pointer;
}
.fc-viewtoggle button.is-active {
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
}

/* One row inside a panel. Rows separate with the row divider and the last
   one drops it, so the panel's own border finishes the stack. */
.fc-row {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 10px var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
  text-align: left;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: var(--nx-font-sans);
  color: var(--nx-ink);
}
.fc-row:last-child { border-bottom: 0; }
.fc-row--link { cursor: pointer; }
.fc-row--link:hover { background: var(--nx-sunken); }
.fc-row--attention { background: var(--nx-rose-tint); }
.fc-row--attention:hover { background: var(--nx-rose-tint); }
.fc-row-main { flex: 1; min-width: 0; }
.fc-row-name {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fc-row-sub {
  font-size: var(--nx-fs-meta);
  color: var(--nx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Mono meta line under a row title (file, size, author, due) */
.fc-row-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-row-meta .fc-overdue { color: var(--nx-rose-fg-2); font-weight: 600; }
.fc-row-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
  flex: 0 0 auto;
}
.fc-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  position: relative;   /* anchors the row overflow menu */
}
.fc-chev { color: var(--nx-faint); flex: 0 0 auto; }

/* 2-letter folder glyph (never an icon tile) */
.fc-glyph {
  width: 28px;
  height: 28px;
  border-radius: var(--nx-r-control);
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Board 14c/14d: dropzone for a first version */
.fc-dropzone {
  border: 1px dashed var(--nx-border-strong);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s6) var(--nx-s4);
  text-align: center;
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary-lg);
}
.fc-dropzone.is-over { border-color: var(--nx-accent); background: var(--nx-accent-soft-bg); }
.fc-dropzone-hint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-top: 10px;
}

/* Version history: the approver chain reads left to right, arrow included */
.fc-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  flex: 0 0 auto;
}
.fc-chain-to { color: var(--nx-ink); font-weight: 600; }
.fc-chain-tick { color: var(--nx-green-dot); }
.fc-vernum {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  color: var(--nx-ink);
  flex: 0 0 62px;
}

/* Thumbnail slot on 14d - dashed placeholder until a render exists */
.fc-thumb {
  border: 1px dashed var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nx-s3);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
  overflow: hidden;
}
.fc-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--nx-r-chip); }

/* Manage list in the 14d rail: label + value/chevron per row */
.fc-managerow {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--nx-row-divider);
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  text-align: left;
  cursor: pointer;
}
.fc-managerow:last-of-type { border-bottom: 0; }
.fc-managerow:hover { color: var(--nx-accent-text); }
.fc-managerow-value {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* Board 14e: form-field editor rows. The whole row is the drag target, so
   the handle is a grip affordance rather than the only draggable part. */
.fc-fieldrow {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 7px 10px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  background: var(--nx-surface);
  margin-bottom: 6px;
}
.fc-fieldrow.is-editing {
  border: 1.5px solid var(--nx-accent);
  box-shadow: 0 0 0 3px var(--nx-accent-soft-bg);
  padding: 6.5px 9.5px;   /* keep the box the same size as the 1px default */
}
.fc-fieldrow.is-dragging { opacity: .45; }
.fc-fieldrow.is-dropbefore { box-shadow: 0 -2px 0 var(--nx-accent); }
.fc-grip {
  color: var(--nx-empty);
  cursor: grab;
  font-size: var(--nx-fs-secondary);
  flex: 0 0 auto;
  line-height: 1;
}
.fc-fieldtag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--nx-muted);
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 5px;
  flex: 0 0 auto;
}
.fc-fieldlabel {
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: var(--nx-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-fieldhint {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-fieldreq {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-faint);
  flex: 0 0 auto;
}
.fc-fieldx {
  border: 0;
  background: none;
  color: var(--nx-faint);
  cursor: pointer;
  padding: 0 2px;
  font-size: var(--nx-fs-secondary);
  flex: 0 0 auto;
}
.fc-fieldx:hover { color: var(--nx-rose-fg-2); }
/* Inline label editor inside a field row - borderless, the row is the frame */
.fc-fieldedit {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: var(--nx-ink);
  padding: 0;
}
.fc-fieldedit:focus { outline: none; }

/* "+ Add field" row: dashed control then the mono list of types */
.fc-addfield {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  flex-wrap: wrap;
  margin-top: 10px;
}
.fc-typelist {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* Quiet cards under the field list (portal / notifications / automation) */
.fc-quietgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--nx-s3);
  margin-top: var(--nx-s4);
}
.fc-quietcard {
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 10px var(--nx-s3);
}
.fc-quietcard .fc-railtitle { padding: 0 0 var(--nx-s2); }
.fc-quietrow {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  margin-bottom: 6px;
}
.fc-quietrow:last-child { margin-bottom: 0; }
.fc-quietnote { font-size: var(--nx-fs-secondary-lg); color: var(--nx-muted); }

/* Forms register: two columns, list then editor (board 14e) */
.fc-formsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1180px) { .fc-formsplit { grid-template-columns: minmax(0, 1fr); } }

/* ============ 16j. COMPOSER PICKERS (board 13a) ====================
   Share document / Attach form in the ticket reply composer. Both are the
   same 410x340 popover: header search, mono context note, ONE scrolling
   list, pinned footer. Rows are 34px, so nine fit without scrolling where
   the old ~120px cards fit four.
   ================================================================== */

.c-picker {
  position: absolute;
  z-index: 70;
  width: 410px;
  max-width: calc(100vw - 32px);
  height: 340px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-menu);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.c-picker.hidden { display: none; }

.c-picker-search {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--nx-line);
  flex: 0 0 auto;
}
.c-picker-search .c-search-icon { color: var(--nx-accent); flex: 0 0 auto; }
.c-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  padding: 0;
}
.c-picker-search input:focus { outline: none; }
.c-picker-search input::placeholder { color: var(--nx-faint); }

/* Mono context strip: what this picker sends, and where. Never decoration -
   on the form picker it names the recipient the link is tokenised for. */
.c-picker-note {
  padding: 5px 12px;
  background: var(--nx-sunken);
  border-bottom: 1px solid var(--nx-row-divider);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-picker-note--accent { color: var(--nx-accent-soft-fg); background: var(--nx-accent-soft-bg); }

/* The only scrolling region - the search and footer stay put */
.c-picker-list { flex: 1; overflow-y: auto; min-height: 0; }

.c-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 12px;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid var(--nx-row-divider);
  background: none;
  font-family: var(--nx-font-sans);
  text-align: left;
  color: var(--nx-ink);
  cursor: pointer;
}
.c-picker-row:last-child { border-bottom: 0; }
.c-picker-row:hover,
.c-picker-row.is-cursor { background: var(--nx-sunken); }
.c-picker-row.is-on { background: var(--nx-selected-row); }
.c-picker-row input[type="checkbox"] { margin: 0; flex: 0 0 auto; cursor: pointer; }
.c-picker-kind {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--nx-muted);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 4px;
  flex: 0 0 auto;
}
.c-picker-body { flex: 1; min-width: 0; }
.c-picker-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  color: var(--nx-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One mono line, truncated - the title attribute carries the full text */
.c-picker-meta {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ↵ affordance on the keyboard cursor row only */
.c-picker-enter {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-faint);
  flex: 0 0 auto;
  visibility: hidden;
}
.c-picker-row.is-cursor .c-picker-enter { visibility: visible; }

.c-picker-foot {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 8px 12px;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-sunken);
  flex: 0 0 auto;
}
.c-picker-hint {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  /* No extra tracking: at 410px the key strip plus the count is exactly as
     wide as the footer, and .08em pushed the last word into an ellipsis. */
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nx-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-picker-count {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-muted);
  flex: 0 0 auto;
}
.c-picker-empty {
  padding: var(--nx-s5) 12px;
  text-align: center;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-muted);
}

/* Composer buttons that own a picker: active = accent-soft, caret flips */
.c-composerbtn.is-open {
  background: var(--nx-accent-soft-bg);
  border-color: var(--nx-accent-soft-line);
  color: var(--nx-accent-soft-fg);
  font-weight: 600;
}
/* The pickers mount on document.body (the composer card is overflow:hidden),
   so this row only needs to lay its controls out. */
.c-composeractions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============ 16k. FILE CENTER ANALYTICS (board 15a) ===============
   Three columns: stacked stat cards, the top-documents ranking, then the
   portal/downloader panels. The old tab was a 200px stat column plus two
   half-width cards and a full-width table; 15a turns the ranking into the
   centre of gravity and gives every count a bar to be read against.
   ================================================================== */

.fca-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--nx-s3);
  padding: 0 var(--nx-gutter) var(--nx-gutter);
  align-items: start;
}
@media (max-width: 1180px) { .fca-grid { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 860px)  { .fca-grid { grid-template-columns: minmax(0, 1fr); } }

.fca-col { display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }

/* One number per card - the ribbon shape would make three 26px numerals
   compete across a single strip. */
.fca-stat {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 14px var(--nx-s4);
}
.fca-stat-num {
  font-family: var(--nx-font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--nx-ink);
  line-height: 1.1;
}
.fca-stat-num--accent { color: var(--nx-accent); }
/* A zero is not a result - it reads as the empty marker, not as data. */
.fca-stat-num--zero { color: var(--nx-faint); }
.fca-stat-label {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-meta);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Ranked row: title + mono category, then the bar, then the count */
.fca-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--nx-s2) var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
}
.fca-row:last-child { border-bottom: 0; }
.fca-row-main { flex: 1; min-width: 0; }
.fca-row-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fca-row-cat {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fca-bar {
  flex: 0 0 170px;
  height: 6px;
  background: var(--nx-row-divider);
  border-radius: 3px;
  overflow: hidden;
}
@media (max-width: 1400px) { .fca-bar { flex: 0 0 110px; } }
.fca-bar span {
  display: block;
  height: 100%;
  background: var(--nx-accent);
  border-radius: 3px;
}
.fca-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  font-weight: 600;
  color: var(--nx-ink);
  min-width: 20px;
  text-align: right;
  flex: 0 0 auto;
}

/* Person row (top downloaders) - 22px avatar, name, mono count */
.fca-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--nx-s2) var(--nx-s4);
  border-bottom: 1px solid var(--nx-row-divider);
}
.fca-person:last-child { border-bottom: 0; }
.fca-person .c-avatar { width: 22px; height: 22px; font-size: 8px; font-weight: 700; }
.fca-person-name {
  flex: 1;
  min-width: 0;
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fca-person-count {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-muted);
  flex: 0 0 auto;
}

/* Empty state that explains itself and offers the next step (board 15a) */
.fca-empty {
  padding: 22px var(--nx-s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.fca-empty-head {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-faint);
}
.fca-empty-body { font-size: 11.5px; color: var(--nx-muted); line-height: 1.5; }

/* ============ 16l. PERSON CHIPS + ORG ACCESS (boards 15b/15c) ======
   15b's rule: every person on the page is an avatar plus a name, never a
   bare string. One chip covers the version rows, the revision record and
   the header band; the approval arrow is part of the chain, not decoration.
   ================================================================== */

.c-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  white-space: nowrap;
  min-width: 0;
}
.c-person .c-avatar {
  width: 20px;
  height: 20px;
  font-size: 7.5px;
  font-weight: 700;
}
.c-person-name { overflow: hidden; text-overflow: ellipsis; }
.c-person--muted .c-person-name { color: var(--nx-muted); }
/* A rejection names the person who rejected it, in rose - the only place a
   person's name carries a status colour. */
.c-person--rose .c-person-name { color: var(--nx-rose-fg-2); font-weight: 500; }

.c-chain-arrow { color: var(--nx-faint); flex: 0 0 auto; }
.c-chain-self {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--nx-green-dot);
  flex: 0 0 auto;
}

/* Organization access (board 15b rail card). A per-org verdict list, so it
   needs its own search and a three-way filter - the counts in the segment
   are the answer to "how many can actually see this". */
.fc-orgaccess-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.fc-orgaccess-count {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  color: var(--nx-ink);
  font-weight: 600;
}
.fc-orgaccess-total { color: var(--nx-faint); font-weight: 400; }
.fc-orgaccess-list {
  max-height: 320px;
  overflow-y: auto;
  margin: var(--nx-s2) calc(-1 * var(--nx-s3)) 0;
}
.fc-orgrow {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 6px var(--nx-s3);
  border-bottom: 1px solid var(--nx-row-divider);
}
.fc-orgrow:last-child { border-bottom: 0; }
.fc-orgrow-main { flex: 1; min-width: 0; }
.fc-orgrow-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-orgrow-why {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-orgrow-why--blocked { color: var(--nx-rose-fg-2); }
.fc-orgrow-region {
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--nx-faint);
  flex: 0 0 auto;
}
/* 5px verdict dot: green = can see it, rose = cannot */
.fc-orgrow .c-dot { width: 5px; height: 5px; }

/* Micro-segment for the ALL / ACCESS / BLOCKED filter */
.fc-microseg {
  display: flex;
  gap: var(--nx-s1);
  margin-top: var(--nx-s2);
  flex-wrap: wrap;
}
.fc-microseg button {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-muted);
  background: none;
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 3px 7px;
  cursor: pointer;
}
.fc-microseg button.is-active {
  background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
}
.fc-microseg button.is-blocked.is-active {
  background: var(--nx-rose-bg);
  border-color: transparent;
  color: var(--nx-rose-fg);
}

/* ---- Board 15c: upload-version + revision-history modals ---------- */

/* The suggested version sits beside the field, not inside the label, so the
   rule ("empty = auto +0.1") is readable without opening a tooltip. */
.fc-versionrow { display: flex; align-items: center; gap: 10px; }
.fc-versionrow .c-input { flex: 0 0 120px; font-family: var(--nx-font-mono); }
.fc-versionhint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.fc-versionhint strong { color: var(--nx-ink); }

/* Amber approval note: who this version goes to, and what it replaces */
.fc-approvalnote {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-s2);
  background: var(--nx-amber-tint-2);
  border: 1px solid var(--nx-amber-tint-line);
  border-radius: var(--nx-r-control);
  padding: 9px 11px;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-amber-fg);
  line-height: 1.45;
}
.fc-approvalnote .c-tag { flex: 0 0 auto; }

/* Revision-history modal table: the current revision gets an accent edge */
.fc-revrow--current td { background: var(--nx-selected-row); }
.fc-revrow--current td:first-child { box-shadow: inset 2px 0 0 var(--nx-accent); }
.fc-revnum { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary-lg); font-weight: 600; }
.fc-revnum-state {
  display: block;
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
}
.fc-revnum-state--current { color: var(--nx-accent-text); }
.fc-revnum-state--rejected { color: var(--nx-rose-fg-2); }

/* ============ 17. ATTACHMENTS (board 12b) =========================
   Two surfaces, one vocabulary. No emoji tiles, no teal border card:
   a mono type tag by extension (or a 32px thumbnail when the file is
   an image), the filename, the size, then Preview / Download.

     .c-att-chip    - the chip in a message footer
     .c-attreg      - the ATTACHMENTS - CONVERSATION register (rail)

   The register lives in the ticket rail, not at the bottom of the
   thread, so a long conversation never buries its own files.
   ================================================================== */

/* ---- shared parts ---------------------------------------------- */

.c-att-tag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--nx-muted);
  background: var(--nx-row-divider);
  border-radius: var(--nx-r-chip-sm);
  padding: 4px 5px;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.c-att-thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--nx-r-chip);
  border: 1px solid var(--nx-line);
  background: var(--nx-sunken);
  object-fit: cover;
  display: block;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}
button.c-att-thumb { line-height: 0; }
button.c-att-thumb:hover { border-color: var(--nx-accent); }
.c-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.c-att-size {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  flex: 0 0 auto;
}
.c-att-sep { color: var(--nx-border-strong); flex: 0 0 auto; }

.c-att-act {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--nx-accent-text);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  text-decoration: none;
}
.c-att-act:hover { text-decoration: underline; }
.c-att-act[disabled] { color: var(--nx-empty); cursor: default; text-decoration: none; }

/* ---- in-message footer ------------------------------------------ */

/* Its own band under the message body. The horizontal padding matches
   .thread-content, because the footer is a SIBLING of it, not a child -
   without this the count label hangs off the card's left edge while the
   message text above it sits 16px in. */
.c-att-footer {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  flex-wrap: wrap;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--nx-row-divider);
}
@media (max-width: 768px) {
  .c-att-footer { padding: 10px 14px 12px; }
}
/* Attachments, shared documents and shared forms all use this band, so a
   message carrying all three reads as one evenly spaced stack. */
.c-att-count {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.c-att-chip {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-control);
  background: var(--nx-surface);
  padding: 6px 10px;
  font-size: var(--nx-fs-secondary-lg);
  max-width: 100%;
  min-width: 0;
}
.c-att-footer .c-att-link { margin-left: auto; }

.c-att-chip .c-att-name {
  font-weight: 500;
  color: var(--nx-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- conversation register (ticket rail) ------------------------ */

.c-attreg[hidden] { display: none; }
.c-attreg {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
.c-attreg-head {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--nx-line);
}
.c-attreg-title {
  font-size: var(--nx-fs-overline);
  letter-spacing: var(--nx-ls-overline);
  font-weight: 600;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.c-attreg-count {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-muted);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  white-space: nowrap;
}
.c-attreg-head .c-att-act { margin-left: auto; }

.c-attreg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-row-divider);
}
.c-attreg-row:last-of-type { border-bottom: 0; }
.c-attreg-row .c-att-tag { margin-top: 1px; }
.c-attreg-main { flex: 1; min-width: 0; }
.c-attreg-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wraps rather than truncates: in the 320px rail all four facts
   (who, channel, when, size) matter more than a single tidy line. */
.c-attreg-meta {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--nx-faint);
  margin-top: 2px;
}
.c-attreg-acts { display: flex; gap: 10px; margin-top: 6px; }

.c-attreg-note {
  padding: 8px 14px;
  border-top: 1px solid var(--nx-row-divider);
  background: var(--nx-sunken);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--nx-faint);
}
.c-attreg-empty {
  padding: 14px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
}

/* Wide hosts (a full-width panel rather than the 320px rail) put the
   two actions back on the filename line, as board 12b draws them. */
.c-attreg--wide .c-attreg-row { align-items: center; }
.c-attreg--wide .c-attreg-acts { margin-top: 0; flex: 0 0 auto; }

/* ============ 17b. IMAGE LIGHTBOX ================================
   Attachment images open here rather than in a browser tab. Built on
   <dialog> so Esc and the focus trap are the platform's job.

   The stage is ink in BOTH themes: a photo of a machine fault is the
   subject, and a light chrome around it changes how the colours read.
   Everything else - type tag, mono meta, accent actions - is the same
   vocabulary as the attachment chips that opened it (board 12b).
   ================================================================== */

.c-lightbox {
  width: min(94vw, 1400px);
  height: min(92vh, 960px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--nx-r-frame);
  background: #0C1517;
  color: #F2F5F5;
  overflow: hidden;
}
.c-lightbox::backdrop { background: rgba(6, 12, 13, .82); }
.c-lightbox[open] { display: flex; flex-direction: column; }

/* ---- header ---------------------------------------------------- */

.c-lightbox-head {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 10px 14px;
  border-bottom: 1px solid #1E2A2B;
  flex: 0 0 auto;
}
.c-lightbox-name {
  font-size: var(--nx-fs-body);
  font-weight: 600;
  color: #F2F5F5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.c-lightbox-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: var(--nx-ls-meta);
  color: #7E9494;
  white-space: nowrap;
  flex: 0 0 auto;
}
.c-lightbox-head .c-att-tag { background: #1E2A2B; color: #B8C7C7; }
.c-lightbox-spacer { flex: 1 1 auto; }

.c-lightbox-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #2E3D3E;
  border-radius: var(--nx-r-control);
  padding: 5px 10px;
  font: inherit;
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  color: #B8C7C7;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.c-lightbox-btn:hover { border-color: var(--nx-accent); color: #FFFFFF; }
.c-lightbox-btn[aria-pressed="true"] { border-color: var(--nx-accent); color: #2DD4BF; }
.c-lightbox-btn svg { width: 13px; height: 13px; }

.c-lightbox-esc {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: #5C7070;
  border: 1px solid #2E3D3E;
  border-radius: var(--nx-r-chip-sm);
  padding: 2px 6px;
  flex: 0 0 auto;
}
.c-lightbox-x {
  appearance: none;
  background: none;
  border: 0;
  color: #7E9494;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: var(--nx-r-chip);
}
.c-lightbox-x:hover { color: #FFFFFF; background: #1E2A2B; }

/* ---- stage ------------------------------------------------------ */

.c-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  /* A soft checker so a transparent PNG does not read as a hole. */
  background-color: #08100F;
  background-image:
    linear-gradient(45deg, #0C1517 25%, transparent 25%, transparent 75%, #0C1517 75%),
    linear-gradient(45deg, #0C1517 25%, transparent 25%, transparent 75%, #0C1517 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
.c-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}
/* Actual size: the image overflows and the stage scrolls, which is the
   whole point - a fault photo has to be inspectable, not just visible. */
.c-lightbox-stage.is-actual { align-items: flex-start; justify-content: flex-start; }
.c-lightbox-stage.is-actual .c-lightbox-img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.c-lightbox-stage:not(.is-actual) .c-lightbox-img { cursor: zoom-in; }

.c-lightbox-spin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #1E2A2B;
  border-top-color: var(--nx-accent);
  border-radius: 50%;
  animation: nxsk-spin 800ms linear infinite;
}
.c-lightbox-fail {
  position: absolute;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta);
  letter-spacing: var(--nx-ls-meta);
  color: #7E9494;
  text-align: center;
}

/* ---- prev / next ------------------------------------------------ */

.c-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2E3D3E;
  border-radius: 50%;
  background: rgba(12, 21, 23, .82);
  color: #B8C7C7;
  cursor: pointer;
  z-index: 2;
}
.c-lightbox-nav:hover { border-color: var(--nx-accent); color: #FFFFFF; }
.c-lightbox-nav[hidden] { display: none; }
.c-lightbox-nav--prev { left: 14px; }
.c-lightbox-nav--next { right: 14px; }

/* ---- footer ----------------------------------------------------- */

.c-lightbox-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: 9px 14px;
  border-top: 1px solid #1E2A2B;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  color: #7E9494;
}
.c-lightbox-thumbs { display: flex; gap: 6px; margin-left: auto; }
.c-lightbox-thumb {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #2E3D3E;
  border-radius: var(--nx-r-chip);
  background: #0C1517;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
}
.c-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-lightbox-thumb[aria-current="true"] { border-color: var(--nx-accent); }

@media (max-width: 768px) {
  .c-lightbox { width: 100vw; height: 100vh; border-radius: 0; }
  .c-lightbox-meta, .c-lightbox-esc, .c-lightbox-thumbs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .c-lightbox-spin { animation: none; }
}

/* ============ 17f. CONTACT MODAL - PM-1 ============================
   Handoff PM-1 "PORTAL - ADD CONTACT + EDIT CONTACT - SHARED SHELL": one
   dialog serves both jobs and the difference is STATED, not implied. On add
   the email leads, because it is the dedupe key and the person's future
   sign-in. On edit the email is already settled, so an identity strip takes
   the top slot instead: who is being edited, where they work, what access
   they already hold.
   Every display-setting rule here pairs with an explicit .hidden override -
   .hidden is declared in section 18 below, but relying on source order for
   that is the trap that has bitten this stylesheet before. */
.c-modal-ident {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--nx-gutter);
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-sunken);
}
.c-modal-ident.hidden { display: none; }
.c-modal-ident-who { flex: 1; min-width: 0; }
.c-modal-ident-name {
  font-size: var(--nx-fs-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-modal-ident-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "+ Add landline": progressive disclosure for the second phone number.
   Nearly every contact has one number, so the landline earns its row only
   when someone asks for it - or when the record already carries one. */
.c-linkbtn {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--nx-fs-secondary);
  font-weight: 500;
  color: var(--nx-accent-soft-fg);
  cursor: pointer;
}
.c-linkbtn:hover { text-decoration: underline; }
.c-linkbtn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.c-linkbtn.hidden { display: none; }

/* Destructive action sits hard left, the full width of the footer away from
   Save, and only exists once there is a record to act on. */
.c-modal-foot-deact { margin-right: auto; }
.c-modal-foot-deact:not(.hidden) ~ .c-modal-foot-hint { margin-right: 0; }

/* ============ 18. UTILITIES (kept last) =========================== */

/* Shared show/hide, matching the project convention. Declared here as well
   as in nexus.css so a page built from the Console layer alone still has it
   once the legacy stylesheet is gone. */
.hidden { display: none; }

/* Divider under a multi-filter's pinned rows (Person: Me / Unassigned sit above
   the people directory, so they must not read as two more colleagues). */
.ms-filter-sep {
  border: 0;
  border-top: 1px solid var(--nx-line);
  margin: 4px 0;
}
