/* ================================================================
   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;
}

/* -- Phone top bar ------------------------------------------------
   The bar is a flex row whose only shrinkable item is the tab strip, and
   at phone widths the strip was already collapsed to width 0 - so there
   was nothing left to give and the bar pushed the whole document 31px
   (124px for a ticketing-team member, who also carries the presence pill)
   past a 375px viewport. Every migrated page could be dragged sideways.

   What actually costs the width is the fixed furniture, not the tabs:
   .c-jump's 200px floor, four 24px flex gaps and 40px of gutters come to
   426px before a single tab is drawn. So shrink the furniture and let the
   strip be the one elastic, scrolling region - which also gets the module
   tabs back on screen, since at width 0 a phone saw none of them. */
@media (max-width: 720px) {
  .c-topbar {
    gap: var(--nx-s3);
    padding: 0 var(--nx-s3);
  }

  /* The spacer holds no width once things are tight, but it still splits
     one flex gap into two - 24px of a 375px bar spent on nothing. The
     strip takes over pushing the jump and avatar to the right edge. */
  .c-topbar-spacer { display: none; }
  .c-topbar-tabs { flex: 1 1 auto; }

  /* Collapse the jump field to its glyph. The 200px floor is the single
     largest fixed term, and the "Jump to anything... <kbd>" hint is dead
     weight on a device with no Cmd key. The button keeps its aria-label,
     so the accessible name survives the label being hidden.
     The magnifier is inlined the same way the select chevron is (section
     16) - the top bar is the always-dark ink bar in every theme, so the
     --nx-topbar-dim value is safe to hardcode here. */
  .c-jump {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237E9494' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l3.5 3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  .c-jump > * { display: none; }

  /* Presence keeps its status dot; only the word is dropped, and it is
     clipped rather than display:none so the aria-live status a ticketing
     agent relies on still announces. */
  .c-topbar .presence-pill { flex: 0 0 auto; margin-right: 0; }
  .c-topbar .presence-pill .presence-pill-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ============ 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;
}

/* A control that exists in only one state still has to hold its box, or its
   appearance reflows everything around it. visibility keeps the layout identical
   whether or not it is showing - display:none on the tickets toolbar's Reset
   button wrapped "+ New ticket" onto a second row at 1440px and dropped the list
   41px every time a filter changed. Also drops it from the tab order, as
   display:none did. */
.is-reserved {
  visibility: hidden;
  pointer-events: none;
}

.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); }
/* The `multi` field shape (Finance FN-2 cardholder filter): a search box over a
   checkbox list, because a <select multiple> of forty people needs ctrl-click
   to add and loses the lot on one stray plain click. */
.c-filteredit-list {
  max-height: 208px;
  overflow-y: auto;
  margin-top: var(--nx-s2);
  border: 1px solid var(--nx-row-divider);
  border-radius: var(--nx-r-control);
}
.c-filteredit-check {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 5px 10px;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-ink);
  cursor: pointer;
}
.c-filteredit-check:hover { background: var(--nx-sunken); }
.c-filteredit-check input { accent-color: var(--nx-accent); flex: 0 0 auto; }
.c-filteredit-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-filteredit-none { padding: 10px; font-size: var(--nx-fs-secondary); color: var(--nx-muted); }
.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);
}

/* A segment used as a page's own tab row, sitting in the gutter above the
   content (Organizations, Communications). It hugs its labels rather than
   stretching, so it needs an explicit ceiling: `width: fit-content` never
   resolves below min-content, and with nowrap labels that min-content ran
   to 483px - the control simply hung off the side of a phone. Past the
   ceiling it scrolls, the same way the top bar's tab strip does. */
.c-segment--pagetabs {
  width: fit-content;
  max-width: calc(100% - var(--nx-gutter) * 2);
  margin: 14px var(--nx-gutter) 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.c-segment--pagetabs::-webkit-scrollbar { display: none; }

/* ============ 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;
}
/* Caption for the KPI ribbon (2026-08-20). The ribbon is scoped to the active
   view while the rail's counts are absolute, so the same word - "Mine" - carries
   two different numbers on one screen. Saying which question this bar answers is
   what makes that read as two readings rather than as a bug. */
.c-kpi-cap { margin: 0 var(--nx-gutter) 4px; }
.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);
}
/* A long value (a receipt filename) would otherwise reflow the whole head
   onto two lines. Opt-in, so the nine shipped modals keep their behaviour. */
.c-modal-context--trunc {
  max-width: 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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;
}


/* Single-purpose module header band: a page with no view tabs still needs to
   say what it is. Title left, role tag beside it, mono scope meta right.
   Shared, not My-Expenses-only: Finance, Inventory and Knowledge Center all
   land on the same shape when they migrate. */
.c-modulehead {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-line);
  padding: var(--nx-s3) var(--nx-gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.c-modulehead-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--nx-ink);
}
.c-modulehead-meta {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .06em;
  color: var(--nx-faint);
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .c-modulehead-meta { margin-left: 0; flex-basis: 100%; }
}

/* ============ 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; }

/* The hero itself wraps, but the KPI cluster is one nowrap flex row whose
   three counters plus the 220px balance bar have a 391px min-content - wider
   than the card at phone widths, and a flex item's default min-width:auto
   will not let it shrink below that. So the row wraps too, and the bar takes
   the width it is given rather than a fixed 220px. */
@media (max-width: 720px) {
  .c-hr-hero-kpis { flex-wrap: wrap; min-width: 0; }
  .c-hr-hero-bar { width: 100%; }
  .c-bar-meta { white-space: normal; }
}

/* 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; }

/* The tickets toolbar holds ONE row, and the view title is what gives way.
   ------------------------------------------------------------------------
   .c-toolbar is a shared console primitive with flex-wrap:wrap, and in a
   wrapping container the browser breaks the line BEFORE it shrinks anything -
   so a long view name ("Gold SLA breaches") pushed "+ New ticket" onto a second
   row and stepped the whole list down 41px. Measured before this: stable at
   1500+, but heights varied between 42 and 83 across views at 1440, 1366 and
   1280. 1366 is a laptop, so this was not an edge case.
   Scoped to .c-railmain (tickets only) rather than changed on the primitive.

   Order of sacrifice, by flex-shrink weight: the title ellipsises first (the
   rail already shows the same name, highlighted), then the search field down to
   a usable 150px. Everything else holds its size.

   Guarded by min-width: below 960px the rail becomes an off-canvas drawer and
   the toolbar is restyled for mobile, so nowrap must not reach it. The floor is
   set where one row measurably fits with zero overflow - see the changelog. */
@media (min-width: 1180px) {
  .c-railmain .c-toolbar { flex-wrap: nowrap; }
  /* Shrink weights decide the order of sacrifice. Flex distributes a deficit by
     weight x basis, so the search (260 x 8) absorbs ~94% of it and the title
     (~130 x 1) barely moves - a search box at 160px is still perfectly usable,
     a title clipped to nothing is not. The title's min-width is the floor that
     stops it disappearing: an earlier attempt with an unbounded weight of 100
     measured a title width of 0px at 1100. */
  .c-railmain .c-search { flex: 0 8 260px; min-width: 160px; }
  .c-railmain .c-viewtitle { flex: 0 1 auto; min-width: 96px; }
  .c-railmain .c-toolbar-meta { flex: 0 0 auto; white-space: nowrap; }
}

/* Below that floor one row genuinely does not fit - the search would have to go
   under 100px - so the toolbar keeps wrapping. It must still wrap the SAME way
   for every view, and the title is the only child whose width varies, so here it
   takes a fixed box instead of its content width. Without this, 1100-1160px
   measured heights of 83 for a short name and 84 (one more line) for a long one:
   a smaller jump than the 41px at 1440, but the same bug. Short names simply
   leave trailing space; long ones ellipsise. */
@media (max-width: 1179px) {
  .c-railmain .c-viewtitle { flex: 0 0 96px; }
}
.c-railmain .c-toolbar--chips { padding: 0 0 12px; }
.c-railmain .c-kpi { margin: 0 0 12px; }
.c-railmain .c-tablewrap { margin: 0; }

/* The title carries the active view's NAME, so its width is arbitrary - a user
   can name a view anything. One line, ellipsised: a long name must not become a
   two-line title and change the toolbar's height.

   This does NOT stop a long name wrapping the toolbar ROW itself: in a
   flex-wrap:wrap container the browser breaks the line before it shrinks an item,
   so min-width:0 would buy nothing here. That row already wrapped for long view
   names before any of this, and .c-toolbar is a shared console primitive - left
   alone deliberately. What matters for stability is that the title's width no
   longer changes with STATE (see updateListTitle). */
.c-viewtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--nx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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; }
/* A view whose LIVE filters have diverged from what it stores (2026-08-20).
   The highlight deliberately stays put - dropping it, which is what the rail
   used to do, lost the breadcrumb of where the list came from - so the marker
   is what says "this view, plus something". Reset in the toolbar undoes it.
   The 2px rule sits inside the item's 10px left padding, so nothing shifts. */
.c-rail-view.is-modified::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 2px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 1px;
  background: var(--nx-accent);
}
.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; }

/* ============ 16m. MY EXPENSES (boards MX-1 .. MX-4) ===============
   The cardholder page on the register pattern. One centred 860px column,
   because every element here is about a single decision: does this charge
   still need something from me.

   Three surfaces, all token-driven:
     .mx-drop     - the drop zone, the anchor of the page (MX-1)
     .mx-uprow    - upload inbox rows in the board-12b attachment language
                    (mono type tag + filename + mono size), progress in-row
     .mx-txrow    - transaction rows, one register card with per-card group
                    strips (.c-groupstrip), status as dot + mono caps

   Placed before section 18 on purpose: the shared `.hidden` is declared
   there, so it beats every `display` rule below by source order and a
   hidden element cannot leave an empty bar behind. That collision was a
   real bug on the legacy page, fixed there with combined selectors.
   ================================================================== */

.mx-col {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--nx-s5) var(--nx-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The ribbon's own gutter margin would double up inside the column. */
.mx-col .c-kpi { margin: 0; }

/* ---- drop zone (MX-1 / MX-4) ------------------------------------- */

.mx-drop {
  background: var(--nx-surface);
  border: 1.5px dashed var(--nx-border-strong);
  border-radius: 10px;
  padding: 30px var(--nx-s6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nx-s1);
  cursor: pointer;
  transition: border-color var(--nx-dur) var(--nx-ease), background-color var(--nx-dur) var(--nx-ease);
}
.mx-drop:hover { border-color: var(--nx-accent); }
.mx-drop:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.mx-drop.is-over { border-color: var(--nx-accent); background: var(--nx-accent-soft-bg); }
@media (prefers-reduced-motion: reduce) { .mx-drop { transition: none; } }

/* Arrow over a bar - the upload mark, drawn rather than an icon tile. */
.mx-drop-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.mx-drop-mark-arrow { font-size: var(--nx-fs-card-title); font-weight: 700; line-height: 1; }
.mx-drop-mark-bar { width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.mx-drop-title { font-size: var(--nx-fs-card-title); font-weight: 700; color: var(--nx-ink); margin: 0; }
.mx-drop-sub {
  font-size: var(--nx-fs-body);
  color: var(--nx-muted);
  line-height: 1.55;
  max-width: 540px;
  margin: 0;
}
.mx-drop-browse { color: var(--nx-accent-text); font-weight: 500; text-decoration: underline; }
.mx-drop-hint {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: var(--nx-ls-meta);
  margin: 6px 0 0;
}

/* ---- upload inbox (MX-1) ----------------------------------------- */

.mx-inbox { display: flex; flex-direction: column; gap: 6px; }
.mx-inbox-head { display: flex; align-items: center; gap: 10px; }

.mx-uprow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid var(--nx-row-divider);
}
.mx-uprow:first-child { border-top: 0; }
.mx-uprow--amber { background: var(--nx-amber-tint); }
.mx-uprow--rose  { background: var(--nx-rose-tint); }
/* A row carrying a progress bar stacks: the facts line, then the hairline. */
.mx-uprow--stack { flex-direction: column; align-items: stretch; gap: 7px; }
.mx-uprow-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mx-uprow-name {
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 500;
  color: var(--nx-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-uprow-msg { font-size: var(--nx-fs-secondary); font-weight: 500; }
.mx-uprow-msg--green { color: var(--nx-green-fg); font-weight: 600; }
.mx-uprow-msg--rose  { color: var(--nx-rose-fg); }
/* The tinted rows need the tag to read as part of the state, not the file. */
.mx-uprow--amber .c-att-tag { color: var(--nx-amber-fg); background: var(--nx-amber-bg); }
.mx-uprow--rose  .c-att-tag { color: var(--nx-rose-fg);  background: var(--nx-rose-bg); }

/* 24px square dismiss, the same one the board draws on every inbox row. */
.mx-x {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--nx-border-strong);
  border-radius: 5px;
  background: var(--nx-surface);
  color: var(--nx-faint);
  font-size: var(--nx-fs-meta);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.mx-x:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.mx-x:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

/* ---- indeterminate progress (rows, cells, modal) ----------------- */

.mx-prog {
  height: 3px;
  border-radius: 2px;
  background: var(--nx-row-divider);
  overflow: hidden;
}
.mx-prog-fill {
  height: 100%;
  width: 34%;
  border-radius: 2px;
  background: var(--nx-accent);
  animation: mx-slide 1.3s ease-in-out infinite;
}
/* Beside a status in a 190px cell, not across the row. */
.mx-prog--cell { width: 76px; display: block; }
@keyframes mx-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-prog-fill { animation: none; width: 100%; opacity: .45; }
}

/* Honest fallback once polling gives up - never a bar that implies work. */
.mx-stalled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-muted);
}

/* ---- summary line + completed toggle (MX-1) ---------------------- */

.mx-listhead { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; margin-top: var(--nx-s1); }
.mx-listhead-text { font-size: var(--nx-fs-body); color: var(--nx-muted); }

/* ---- transaction register (MX-1) --------------------------------- */

.c-groupstrip--mx { display: flex; align-items: center; gap: var(--nx-s2); font-weight: 600; }
.c-groupstrip--mx .mx-open { margin-left: auto; color: var(--nx-amber-fg); }
.c-groupstrip--mx .mx-clear { margin-left: auto; color: var(--nx-faint); }

.mx-txrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 150px 92px;
  align-items: center;
  gap: var(--nx-s3);
  padding: 9px 14px;
  border-top: 1px solid var(--nx-row-divider);
}
.mx-txrow--amber { background: var(--nx-amber-tint-2); }
.mx-txrow--rose  { background: var(--nx-rose-tint); }
/* Settled rows stay readable but stop competing - they need nothing. */
.mx-txrow--done  { opacity: .55; }
.mx-txrow-name { font-size: var(--nx-fs-body); font-weight: 500; color: var(--nx-ink); }
.mx-txrow-date {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-faint);
  margin-top: 2px;
}
.mx-txrow-status { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.mx-txrow-amt {
  text-align: right;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
}
.mx-txrow-amt-orig {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--nx-faint);
  margin-top: 1px;
}
.mx-txrow-act { display: flex; justify-content: flex-end; }
/* Settled rows revealed by the toggle fade in once, quietly - the one
   authored motion on this page. */
.mx-txrow--reveal { animation: mx-reveal 220ms ease-out; }
@keyframes mx-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mx-txrow--reveal { animation: none; } }

/* Rose-outline tag under a status: the receipt that came back rejected. */
.mx-whytag {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--nx-rose-fg);
  background: none;
  border: 1px solid var(--nx-rose-line);
  border-radius: var(--nx-r-chip-sm);
  padding: 1px 5px;
  cursor: pointer;
  white-space: nowrap;
}
.mx-whytag:hover { background: var(--nx-rose-bg); }
.mx-txfoot {
  padding: var(--nx-s2) 14px;
  border-top: 1px solid var(--nx-row-divider);
  text-align: center;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: .06em;
}
/* A whole status cell is clickable where it opens the receipt detail.
   Declares NO font property at all, on purpose. `font: inherit` resets the
   font-size .c-status sets on this same element, and so does an explicit
   `font-size: inherit` - this rule sits in a later section, so it wins on
   source order and a 10px mono status renders at 13px body size. .c-status
   already supplies family, size and spacing; the button only needs its
   chrome stripped. */
.mx-statusbtn {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.mx-statusbtn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; border-radius: var(--nx-r-chip); }

/* ---- empty + terminal states ------------------------------------- */

.mx-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nx-s1);
  padding: 40px var(--nx-s4);
}
.mx-state-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nx-fs-card-title);
  font-weight: 700;
  margin-bottom: 6px;
}
.mx-state-title { font-size: 15px; font-weight: 700; color: var(--nx-ink); margin: 0; }
.mx-state-sub { font-size: var(--nx-fs-body); color: var(--nx-muted); line-height: 1.5; max-width: 420px; margin: 0; }

/* ---- receipt detail modal (MX-3) --------------------------------- */

.mx-detail-head { display: flex; align-items: flex-start; gap: 10px; }
.mx-detail-merchant { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--nx-ink); flex: 1; margin: 0; }
.mx-detail-meta { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.mx-detail-desc { font-size: var(--nx-fs-body); color: var(--nx-muted); line-height: 1.5; margin: 0; }

/* Three note blocks, three sources. Automated findings are sunken, the
   cardholder's own note is a plain outline, and a note from a person at
   finance is accent-soft (board 15b framing). */
.mx-note { border-radius: var(--nx-r-card); overflow: hidden; }
.mx-note--check { background: var(--nx-sunken); border: 1px solid var(--nx-line); }
.mx-note--mine  { background: var(--nx-surface); border: 1px solid var(--nx-border-strong); }
.mx-note--finance {
  background: var(--nx-accent-soft-bg);
  border: 1px solid var(--nx-accent-soft-line);
  color: var(--nx-accent-soft-fg);
}
.mx-note-head {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 9px 13px;
  border-bottom: 1px solid var(--nx-row-divider);
}
.mx-note--finance .mx-note-head { border-bottom-color: var(--nx-accent-soft-line); }
.mx-note--mine .mx-note-head,
.mx-note--finance .mx-note-head { border-bottom: 0; padding-bottom: 4px; }
.mx-note-label {
  font-size: var(--nx-fs-overline);
  font-weight: 600;
  letter-spacing: var(--nx-ls-overline);
  text-transform: uppercase;
  color: var(--nx-faint);
}
.mx-note--mine .mx-note-label { color: var(--nx-muted); }
.mx-note--finance .mx-note-label { color: var(--nx-accent-soft-fg); }
.mx-note-count {
  margin-left: auto;
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--nx-amber-fg);
}
.mx-note-body { padding: 11px 13px; display: flex; flex-direction: column; gap: var(--nx-s2); font-size: var(--nx-fs-secondary); line-height: 1.5; }
.mx-note--mine .mx-note-body,
.mx-note--finance .mx-note-body { padding-top: 0; font-size: var(--nx-fs-body); }
.mx-note-finding { display: flex; flex-direction: column; gap: var(--nx-s2); }
.mx-note-finding + .mx-note-finding {
  border-top: 1px solid var(--nx-row-divider);
  padding-top: 11px;
}
.mx-note-fieldname {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-amber-fg);
}
/* Value compare: what the receipt says, what the card says. */
.mx-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--nx-s2); align-items: stretch; }
.mx-compare-cell {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 7px 10px;
  min-width: 0;
}
.mx-compare-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: var(--nx-ls-overline);
  text-transform: uppercase;
  color: var(--nx-faint);
}
.mx-compare-val { font-size: var(--nx-fs-secondary-lg); font-weight: 500; color: var(--nx-ink); margin-top: 2px; overflow-wrap: anywhere; }
.mx-compare-val--mono { font-family: var(--nx-font-mono); font-weight: 600; }
.mx-compare-op {
  display: flex;
  align-items: center;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary);
  font-weight: 600;
  color: var(--nx-amber-fg);
}
.mx-note-explain { font-size: var(--nx-fs-secondary); color: var(--nx-muted); line-height: 1.5; }

/* The attached file, in the same 12b language as the inbox rows. */
.mx-detail-file {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: 10px 13px;
}
.mx-detail-review { border-top: 1px solid var(--nx-row-divider); padding-top: var(--nx-s3); display: flex; flex-direction: column; gap: 6px; }
.mx-detail-review-label { font-size: var(--nx-fs-secondary); font-weight: 600; color: var(--nx-ink); }

/* ---- attach picker modal (MX-2) ---------------------------------- */

.mx-pick-scope {
  padding: var(--nx-s2) var(--nx-gutter);
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mx-pick-list { max-height: 330px; overflow-y: auto; }
.mx-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px var(--nx-gutter);
  border: 0;
  border-top: 1px solid var(--nx-row-divider);
  border-left: 2px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--nx-ink);
}
.mx-pick-row:first-child { border-top: 0; }
.mx-pick-row:hover { background: var(--nx-sunken); }
.mx-pick-row.is-selected { background: var(--nx-selected-row); border-left-color: var(--nx-accent); }
.mx-pick-row:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.mx-pick-main { flex: 1; min-width: 0; }
.mx-pick-name { font-size: var(--nx-fs-secondary-lg); font-weight: 500; }
.mx-pick-date { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-faint); margin-left: var(--nx-s2); }
.mx-pick-amt { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); font-weight: 600; text-align: right; }
.mx-pick-amt-orig { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm); font-weight: 400; color: var(--nx-faint); }
.mx-pick-check { width: 12px; flex: 0 0 12px; color: var(--nx-accent-text); font-weight: 700; }
.mx-pick-empty { padding: var(--nx-s4) var(--nx-gutter); font-size: var(--nx-fs-body); color: var(--nx-muted); }

/* ---- inline page notice ------------------------------------------ */

/* Normal page flow at the top of the column, never a corner toast that
   covers the list it is talking about. */
.mx-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--nx-s3) 14px;
  border-radius: var(--nx-r-card);
  font-size: var(--nx-fs-body);
  line-height: 1.5;
  color: var(--nx-ink);
}
.mx-notice--success { background: var(--nx-accent-soft-bg); border: 1px solid var(--nx-accent-soft-line); color: var(--nx-accent-soft-fg); }
.mx-notice--error   { background: var(--nx-rose-tint); border: 1px solid var(--nx-rose-line); }
.mx-notice--info    { background: var(--nx-sunken); border: 1px solid var(--nx-line); }
.mx-notice-text { flex: 1; min-width: 0; }

/* ---- MX-4: 375px, same states, 44px targets ---------------------- */

@media (max-width: 760px) {
  .mx-col { padding: var(--nx-s3) var(--nx-s3) 32px; gap: 10px; }
  .mx-drop { padding: 18px 14px; }
  .mx-drop-mark { width: 36px; height: 36px; }
  .mx-drop-title { font-size: 14px; }
  .mx-drop-sub { font-size: var(--nx-fs-secondary); }

  /* Two lines: merchant + amount, then status + the action. */
  .mx-txrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name amt" "status act";
    gap: 9px var(--nx-s3);
    padding: var(--nx-s3);
  }
  /* Merchant and date on one line: two stacked lines here plus a 44px
     action button below made every row ~130px tall. */
  .mx-txrow-namecell {
    grid-area: name;
    display: flex;
    align-items: baseline;
    gap: var(--nx-s2);
    min-width: 0;
  }
  .mx-txrow-namecell .mx-txrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-txrow-date { margin-top: 0; flex: 0 0 auto; }
  .mx-txrow-status   { grid-area: status; }
  .mx-txrow-amtcell  { grid-area: amt; }
  .mx-txrow-act      { grid-area: act; align-items: center; }
  .mx-txrow-name { font-size: 13.5px; font-weight: 600; }

  /* Thumb-sized targets on the surfaces a phone actually taps. */
  .mx-txrow-act .c-btn { min-height: 44px; padding: 0 16px; }
  .mx-uprow .c-btn { min-height: 40px; }
  .mx-x { width: 32px; height: 32px; }

  .mx-uprow { flex-wrap: wrap; }

  /* 2x2 ribbon (the portal's CP-9 answer for phones). MX-4 drops the ribbon
     altogether, but that loses the "with finance" count, which appears
     nowhere else on the page. */
  /* Scoped to this page's column: an unscoped .c-kpi rule here would
     re-flow the ribbon on every list page in the app. */
  .mx-col .c-kpi { flex-wrap: wrap; }
  .mx-col .c-kpi-cell { flex: 1 1 50%; }
  .mx-col .c-kpi-cell:nth-child(2n) { border-right: 0; }
  .mx-col .c-kpi-cell:nth-child(-n+2) { border-bottom: 1px solid var(--nx-row-divider); }
  .mx-compare { grid-template-columns: 1fr; }
  .mx-compare-op { justify-content: center; }
}

/* ============ 17g. SEARCH "MATCHED IN" LINE ========================
   A third sub-line under a ticket row, shown only when the search matched
   something OUTSIDE the subject/description the row already displays —
   an attachment filename, a reply, an internal note, the machine serial.

   Monochrome by design: this is PROVENANCE, not status. Colour on this list
   is reserved for signal (breached rows, priority dots), and a coloured
   "matched in" line would compete with them on every search.

   The matched terms arrive wrapped in <b> from ts_headline; the <b> is the
   only emphasis, no highlight fill — a yellow marker on a monochrome list
   reads as an error state.

   var(--nx-*, literal) fallbacks so it renders correctly on pages that have
   not been migrated to the token set.
   =================================================================== */
.c-cell-matched {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
  font-size: var(--nx-fs-meta, 11.5px);
  color: var(--nx-muted, #93A6A6);
  min-width: 0;
}
.c-cell-matched-icon,
.c-cell-matched-sep { flex: 0 0 auto; }
.c-cell-matched-src { flex: 0 0 auto; text-transform: lowercase; }
/* The snippet is the part that must give way when the column is narrow. */
.c-cell-matched-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--nx-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
}
/* The matched term is the only thing that steps up to full text colour.
   The token is --nx-ink, NOT --nx-text: there is no --nx-text in tokens.css, and
   var() on an undefined property ALWAYS takes the fallback — so a hardcoded
   light-theme #17322F here rendered the matched term near-invisible against the
   dark theme's #0A0E0F page. `currentColor` as the fallback degrades to the
   muted context colour (still legible, just unemphasised) instead of guessing a
   theme. */
.c-cell-matched-text b {
  font-weight: 600;
  color: var(--nx-ink, currentColor);
}

/* ============ 16n. FINANCE (boards FN-1 .. FN-6) ===================
   The staff receipts console. The live module was the only page in Nexus
   with its own left sidebar and its own 2,733-line stylesheet; both are
   gone. Finance mounts as a top-bar tab and its five pages became view
   tabs in the title band, so it reads like every other register.

   New here, and deliberately generic because two boards already want them:
     .c-viewtabs / .c-viewtab  - unbordered pill tabs, active = primary fill.
                                 FN-1's title band and FN-4's inbox tabs are
                                 the same control; .c-segment is the BORDERED
                                 sibling and stays as it is.
     .c-kpi-sub                - the 11px explainer under a ribbon number
                                 (FN-1 dashboard: "All tracked transactions").
     .c-tag--amber-line        - amber OUTLINE tag. NEEDS REVIEW - 60% has to
                                 sit beside a green RECEIVED status without
                                 out-shouting it, so it is a line not a fill.

   Everything else is .fn-*. The receipt-inbox rows deliberately reuse the
   .mx-uprow / .mx-prog / .mx-x / .mx-pick-* families from section 16m: that
   IS the shared vocabulary for "an uploaded receipt waiting to be paired",
   the board says FN-4 reuses MX-1's states, and forking it would leave two
   definitions of one row. The mx- prefix is historical, not a scope.
   ================================================================== */

/* ---- view tabs (FN-1 title band, FN-4 inbox) ---------------------- */

.c-viewtabs { display: flex; align-items: center; gap: var(--nx-s1); flex-wrap: wrap; }
.c-viewtab {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--nx-r-control);
  background: none;
  font-family: inherit;
  font-size: var(--nx-fs-secondary-lg);
  color: var(--nx-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.c-viewtab:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.c-viewtab:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.c-viewtab.is-active {
  background: var(--nx-btn-primary-bg);
  color: var(--nx-btn-primary-fg);
  font-weight: 600;
}
/* The count rides the tab, so it takes the tab's foreground and steps back
   rather than naming a colour that only works on the light fill. */
.c-viewtab-count {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-faint);
}
.c-viewtab.is-active .c-viewtab-count { color: inherit; opacity: .62; }

/* ---- ribbon + tag additions --------------------------------------- */

.c-kpi-sub { font-size: var(--nx-fs-meta); color: var(--nx-faint); margin-top: 2px; }
.c-tag--amber-line { color: var(--nx-amber-fg); border-color: var(--nx-amber-tint-line); }
button.c-tag--amber-line { background: none; cursor: pointer; font-weight: 600; }
button.c-tag--amber-line:hover { background: var(--nx-amber-bg); }

/* ---- page shell ---------------------------------------------------- */

.fn-view {
  padding: 14px var(--nx-gutter) var(--nx-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--nx-s3);
}
/* The dashboard is cards not controls, so it opens on the full gutter and
   breathes a little wider between them. */
.fn-view--dash { padding: var(--nx-gutter); gap: 14px; }
/* Notifications is a settings page, not a register: one centred column, the
   same 860px measure My Expenses uses for the same reason. */
.fn-view--narrow { max-width: 900px; margin: 0 auto; width: 100%; }
.fn-view .c-kpi,
.fn-view .c-tablewrap { margin: 0; }

/* ---- FN-1: spend by month ------------------------------------------ */

.fn-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  padding: var(--nx-s4) 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fn-card-head { display: flex; align-items: center; gap: var(--nx-s3); }
.fn-spend-month { font-size: var(--nx-fs-kpi); font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }

/* Per-currency cells, split by the row divider like a KPI ribbon. Auto-fit
   rather than a fixed three: the month decides how many currencies there are,
   and a hardcoded column count leaves a hole in a one-currency month. */
.fn-cur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}
.fn-cur-cell { padding: 2px 18px; border-right: 1px solid var(--nx-row-divider); min-width: 0; }
.fn-cur-cell:first-child { padding-left: 0; }
.fn-cur-cell:last-child { border-right: 0; padding-right: 0; }
.fn-cur-head { display: flex; align-items: center; gap: 6px; }
.fn-cur-code {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-muted);
}
.fn-cur-amount {
  font-family: var(--nx-font-mono);
  font-size: 22px;
  font-weight: 600;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fn-cur-count {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: .05em;
  margin-top: 3px;
}
.fn-cur-rule { width: 46px; height: 3px; border-radius: 2px; margin-top: var(--nx-s2); }

.fn-spend-foot {
  border-top: 1px solid var(--nx-row-divider);
  padding-top: var(--nx-s3);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.fn-topch { display: flex; align-items: center; gap: var(--nx-s2); }
.fn-topch-amount { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.fn-spend-empty { font-size: var(--nx-fs-body); color: var(--nx-muted); padding: var(--nx-s2) 0; }

/* ---- FN-1: total-spending chart ------------------------------------ */

.fn-chart { padding: var(--nx-s4) 18px 10px; gap: 10px; }
.fn-chart-head { display: flex; align-items: flex-start; gap: var(--nx-s3); flex-wrap: wrap; }
.fn-chart-total {
  font-family: var(--nx-font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: var(--nx-s1);
  font-variant-numeric: tabular-nums;
}
.fn-chart-sub {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: .06em;
  margin-top: 3px;
  text-transform: uppercase;
}
.fn-legend { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.fn-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px var(--nx-s2);
  border: 0;
  background: none;
  border-radius: var(--nx-r-chip);
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-muted);
  letter-spacing: .05em;
  transition: opacity var(--nx-dur) var(--nx-ease);
}
.fn-legend-item:hover { background: var(--nx-sunken); }
.fn-legend-item:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
/* Isolating one series dims the rest to .15 - the board's value. It reads as
   "still there, not the subject" rather than as data that vanished. */
.fn-legend-item.is-dim { opacity: .15; }

.fn-plot { position: relative; cursor: crosshair; }
.fn-plot svg { width: 100%; display: block; }
.fn-plot-line { transition: opacity .15s; }
.fn-plot-line.is-dim { opacity: .15; }
.fn-guide {
  position: absolute;
  top: 4%;
  height: 86.4%;
  width: 1px;
  background: var(--nx-border-strong);
  pointer-events: none;
}
.fn-plot-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--nx-surface);
  box-shadow: 0 0 0 1px var(--nx-line);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fn-tip {
  position: absolute;
  top: 14px;
  pointer-events: none;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-menu);
  padding: 10px var(--nx-s3);
  min-width: 176px;
  z-index: 3;
}
.fn-tip-month {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-muted);
  margin-bottom: 7px;
}
.fn-tip-row { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; }
.fn-tip-code { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-muted); letter-spacing: .04em; }
.fn-tip-gap { flex: 1; min-width: 26px; }
.fn-tip-amt { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); font-weight: 600; color: var(--nx-ink); }
.fn-chart-hint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}
.fn-axis { fill: var(--nx-faint); font-family: var(--nx-font-mono); font-size: 10px; }
.fn-grid { stroke: var(--nx-row-divider); stroke-width: 1; }
.fn-grid--base { stroke: var(--nx-line); }

/* Currency series colours. Four fixed hues, because a line chart's whole job
   is telling series apart and the accent alone cannot do that. They are NOT
   status colours: nothing on this chart is good or bad, so the amber and rose
   here carry no warning - which is exactly why the same four are reused for
   the currency dots in the spend card, so one colour means one currency
   everywhere on the page. Theme-invariant on purpose: re-hueing a series
   between light and dark would break that association. */
.fn-ser--0 { color: #0F9D8F; }   /* accent-family */
.fn-ser--1 { color: #6C7BD4; }   /* indigo */
.fn-ser--2 { color: #D97706; }   /* amber */
.fn-ser--3 { color: #E11D48; }   /* rose */
.fn-ser--4 { color: #0EA5A0; }   /* teal, for a fifth currency */
.fn-swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  flex: 0 0 auto;
}

/* ---- FN-2: register extras ----------------------------------------- */

.fn-holder { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fn-holder-name { font-size: var(--nx-fs-body); font-weight: 500; }
.fn-card4 { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-faint); margin-top: 1px; }
.fn-amount {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-secondary-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fn-amount-orig { font-family: var(--nx-font-mono); font-size: 10.5px; font-weight: 400; color: var(--nx-faint); }
.fn-statuscell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fn-due--late { color: var(--nx-rose-fg); }

/* 24px ghost square for a row-level file action. Same shape as .mx-x, kept
   separate so a change to one dismiss button cannot silently restyle the
   other module's rows. */
.fn-sq {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--nx-border-strong);
  border-radius: 5px;
  background: var(--nx-surface);
  color: var(--nx-muted);
  font-size: var(--nx-fs-meta);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.fn-sq:hover { background: var(--nx-sunken); color: var(--nx-ink); }
.fn-sq:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.fn-sq[disabled] { color: var(--nx-empty); cursor: default; }

/* ---- FN-3: receipt detail ------------------------------------------- */

/* Label/value pairs on one line, not stacked: the rail is 340px and the rows
   are short, so a two-column grid fits nine facts in the height a .c-proplist
   spends on five. Inline edit needs the value box to keep its geometry, hence
   align-items:center rather than a baseline the outline would sit off. */
.fn-props {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  row-gap: 9px;
  column-gap: 10px;
  align-items: center;
  font-size: var(--nx-fs-secondary-lg);
}
.fn-props .c-prop-label { margin-bottom: 0; }
.fn-props .c-prop-value { min-height: 18px; }


/* The receipt rail is 340px, not the Console default 320: the AI compare is a
   three-column table and it needs the extra 20px to stop "Merchant" wrapping. */
.fn-detailgrid { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1080px) {
  .fn-detailgrid { grid-template-columns: minmax(0, 1fr); }
}

.fn-headerband-amount { text-align: right; margin-left: auto; }
.fn-hb-num {
  display: block;
  font-family: var(--nx-font-mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fn-hb-dates {
  font-family: var(--nx-font-mono);
  font-size: 10.5px;
  color: var(--nx-faint);
  margin-top: 2px;
  letter-spacing: .04em;
}

/* The file row above the viewer - board 12b language, one line. */
.fn-filerow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-row-divider);
  flex-wrap: wrap;
}
.fn-filename { font-size: var(--nx-fs-secondary-lg); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.fn-docview {
  padding: 14px;
  background: var(--nx-sunken);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fn-docview img {
  max-width: 100%;
  max-height: 720px;
  border-radius: var(--nx-r-control);
  display: block;
  background: var(--nx-surface);
}
.fn-docview iframe {
  width: 100%;
  height: 720px;
  border: 0;
  border-radius: var(--nx-r-control);
  background: var(--nx-surface);
  display: block;
}
/* No file is a state, not an error: a dashed slot that says so, never a
   paperclip glyph pretending to be an icon. */
.fn-docslot {
  width: 100%;
  min-height: 260px;
  border: 1.5px dashed var(--nx-border-strong);
  border-radius: var(--nx-r-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--nx-s5);
}
.fn-docslot-title { font-size: var(--nx-fs-body); color: var(--nx-muted); }
.fn-docslot-hint {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-empty);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}

/* AI analysis: the confidence number, its bar, then the field compare. */
.fn-conf { font-family: var(--nx-font-mono); font-size: var(--nx-fs-kpi); font-weight: 600; margin-left: auto; }
.fn-conf--green { color: var(--nx-green-fg); }
.fn-conf--amber { color: var(--nx-amber-fg); }
.fn-confbar { height: 5px; border-radius: 3px; background: var(--nx-row-divider); overflow: hidden; margin-bottom: var(--nx-s3); }
.fn-confbar-fill { height: 100%; border-radius: 3px; background: var(--nx-amber-dot); transition: width .3s var(--nx-ease); }
.fn-confbar-fill--green { background: var(--nx-green-dot); }
@media (prefers-reduced-motion: reduce) { .fn-confbar-fill { transition: none; } }

.fn-aitable {
  display: grid;
  /* 84px, because "Merchant" at 12px plus the cell's 20px padding wrapped to
     two lines at 70px and the row grew a step taller than its neighbours. */
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
  font-size: var(--nx-fs-secondary);
  border: 1px solid var(--nx-row-divider);
  border-radius: var(--nx-r-control);
  overflow: hidden;
}
.fn-aitable-h {
  padding: 6px 10px;
  background: var(--nx-sunken);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-empty);
  text-transform: uppercase;
}
.fn-aitable-c { padding: 7px 10px; border-top: 1px solid var(--nx-row-divider); min-width: 0; overflow-wrap: anywhere; }
.fn-aitable-c--field { color: var(--nx-muted); white-space: nowrap; }
.fn-aitable-c--val { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); }
.fn-aitable-c--match { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-green-fg); }
/* "Near": the same value written differently. Deliberately UNCOLOURED - it is
   neither a pass to celebrate nor a problem to chase, and putting it in rose
   is what teaches people to stop reading this table. */
.fn-aitable-c--near { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.fn-aitable-c--miss { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-rose-fg); }
.fn-ai-explain { font-size: 11.5px; color: var(--nx-muted); line-height: 1.5; margin-top: 9px; }
.fn-ai-note {
  margin-top: 9px;
  background: var(--nx-amber-tint-2);
  border: 1px solid var(--nx-amber-tint-line);
  border-radius: var(--nx-r-control);
  padding: var(--nx-s2) 10px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-amber-fg);
  line-height: 1.45;
}
.fn-ai-note .c-dot { margin-top: 5px; }

.fn-decision-row { display: flex; align-items: center; gap: var(--nx-s2); margin-top: 10px; flex-wrap: wrap; }
.fn-decision-hint {
  margin-top: 7px;
  text-align: right;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: .06em;
}
.fn-decision-split {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  margin-top: var(--nx-s3);
  padding-top: var(--nx-s3);
  border-top: 1px solid var(--nx-row-divider);
}
/* One box the enhanced select can be swapped inside, so the trigger it
   injects never becomes a sibling cell of the row's own layout. */
.fn-selslot { min-width: 0; }
.fn-selslot--grow { flex: 1; }
.fn-selslot select.c-select-native { position: absolute; }

.fn-audit { display: flex; flex-direction: column; gap: 9px; }
.fn-audit-row { display: flex; align-items: center; gap: var(--nx-s2); }
.fn-audit-text { font-size: var(--nx-fs-secondary); min-width: 0; }
.fn-audit-actor { font-weight: 500; }
.fn-audit-what { color: var(--nx-muted); }
.fn-audit-time { margin-left: auto; font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta-sm); color: var(--nx-faint); flex: 0 0 auto; }
.fn-audit-detail { font-size: 11.5px; color: var(--nx-muted); padding-left: 28px; }
/* Nexus AI acts on these records too, and it is not a person - a 2-letter mono
   glyph square, never a round avatar that would imply one. */
.fn-aiglyph {
  width: 20px;
  height: 20px;
  border-radius: var(--nx-r-chip);
  background: var(--nx-accent-soft-bg);
  color: var(--nx-accent-soft-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nx-font-mono);
  font-size: 8.5px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- FN-4: receipt inbox -------------------------------------------- */

.fn-uploader { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.fn-uploader .c-avatar { width: 18px; height: 18px; font-size: 8px; font-weight: 700; }
.fn-uploader-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fn-uprow-main { min-width: 0; flex: 1; }
.fn-uprow-facts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.fn-extracted {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  margin-top: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* The suggested pairing is an accent LINK inside the extracted line, not a
   second row: it is the same fact continued, and a person reads it in place. */
.fn-likely {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--nx-accent-text);
  cursor: pointer;
  text-transform: uppercase;
}
.fn-likely:hover { text-decoration: underline; }
.fn-likely-wrap { white-space: nowrap; }
.fn-inbox-foot {
  border-top: 1px solid var(--nx-row-divider);
  padding: 9px 14px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}
.fn-empty {
  padding: 40px var(--nx-s4);
  text-align: center;
  color: var(--nx-muted);
  font-size: var(--nx-fs-secondary-lg);
}

/* ---- FN-5: cardholders register -------------------------------------- */

/* Person row and its per-card sub-rows are one table, so the caret column has
   to line up across both. The sub-row indents to 47px - the person row's 14px
   padding plus the 24px avatar plus its 9px gap - so a card reads as hanging
   off its owner rather than as a row of its own. */
.fn-chrow { cursor: pointer; }
.fn-chrow.is-open { background: var(--nx-selected-row); }
.fn-caret { color: var(--nx-faint); font-size: var(--nx-fs-meta); text-align: center; }
.fn-chrow.is-open .fn-caret { color: var(--nx-muted); }
.fn-cardrow > td { background: var(--nx-sunken); }
.fn-cardsub {
  display: grid;
  grid-template-columns: 110px 90px minmax(0, 1fr) 120px 70px;
  align-items: center;
  gap: var(--nx-s3);
  padding: 8px 0 8px 33px;
}
.fn-cardsub-last4 { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); }
.fn-cardsub-txn { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-faint); }
.fn-cardsub-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  color: var(--nx-faint);
  letter-spacing: .05em;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The sub-row is denser than a form: an entity picker at full control height
   makes each card 13px taller than the person row above it. */
.fn-cardsub .c-select,
.fn-cardsub .c-select-trigger { padding: 4px 9px; font-size: var(--nx-fs-secondary); }
/* An unset entity is the one thing on this row a person must fix, so the
   select itself carries the amber, not a badge beside it. */
.fn-entitysel--unset,
.fn-entitysel--unset + .c-select-trigger { border-color: var(--nx-amber-tint-line); color: var(--nx-amber-fg); }
@media (max-width: 900px) {
  .fn-cardsub { grid-template-columns: 1fr 1fr; padding-left: var(--nx-s4); row-gap: var(--nx-s2); }
}

/* ---- FN-6: notification routing --------------------------------------- */

.fn-notifform { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
/* Width has to be pinned on the TRIGGER as well as the native control:
   nexus-select.js hides the <select> and paints a sibling button that carries
   width:100%, so a width set only on the select leaves the button full-bleed
   and the whole row stacks. Same trap .c-phonerow documents. */
.fn-notifform .fn-sel-entity,
.fn-notifform .fn-sel-entity + .c-select-trigger { flex: 0 0 150px; width: 150px; min-width: 0; }
.fn-notifform .fn-sel-event,
.fn-notifform .fn-sel-event + .c-select-trigger { flex: 0 0 190px; width: 190px; min-width: 0; }
.fn-notifform .fn-notif-email { flex: 1; min-width: 220px; }
/* The native control is absolutely positioned behind its trigger once
   enhanced, so it must not also claim a flex slot. */
.fn-notifform select.c-select-native { flex: 0 0 0; width: 0; }
.fn-notif-hint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: .06em;
  margin-top: var(--nx-s2);
  text-transform: uppercase;
}
.fn-notifrow { display: flex; align-items: center; gap: 9px; padding: 9px 14px; flex-wrap: wrap; }
.fn-notifrow + .fn-groupstrip { border-top: 1px solid var(--nx-row-divider); }
.fn-groupstrip {
  background: var(--nx-sunken);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-muted);
  text-transform: uppercase;
}
.fn-notif-email-text { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-faint); }
.fn-notif-scope {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-faint);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fn-digestrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 768px) {
  .fn-view, .fn-view--dash { padding: var(--nx-s3) var(--nx-s3) var(--nx-s5); }
  .fn-card { padding: var(--nx-s3) 14px; }
  .fn-cur-cell { padding: var(--nx-s2) 0; border-right: 0; border-bottom: 1px solid var(--nx-row-divider); }
  .fn-cur-cell:last-child { border-bottom: 0; }
  .fn-chart-total { font-size: 22px; }
  /* Scoped to the finance views on purpose: an unscoped .c-kpi rule in a media
     query re-flows the ribbon on every list page in the app. */
  .fn-view .c-kpi { flex-wrap: wrap; }
  .fn-view .c-kpi-cell { flex: 1 1 50%; }
  .fn-view .c-kpi-cell:nth-child(2n) { border-right: 0; }
  .fn-view .c-kpi-cell:nth-child(-n+2) { border-bottom: 1px solid var(--nx-row-divider); }
}

/* ============ 16o. HR APPROVALS (board HR-1) =======================
   The manager's decision queue. Every class the old renderer used
   (.approval-card, .approval-avatar, .approval-details, .approval-actions,
   .request-status) had NO rule anywhere in the project - the tab was raw
   divs, which is what the board means by "the unformatted approvals stack".

   One decision card per pending request: who, what type, when, what it costs
   the balance, who else is away, then Reject / Approve. A visit booked from a
   ticket also carries the job itself - customer, ticket, machine, site
   address, travel - because "3 days off" and "3 days on a customer site" are
   not the same decision and the screen used to show them identically.
   ================================================================== */

.hra-list { display: flex; flex-direction: column; gap: var(--nx-s3); }

.hra-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-card);
  overflow: hidden;
}
/* A request with no manager falls to HR: the card says so with an edge, so it
   reads as "yours by default" rather than as a normal report. */
.hra-card--orphan { border-left: 3px solid var(--nx-amber-dot); }

/* ---- head row ---------------------------------------------------- */

.hra-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hra-head .c-avatar { width: 38px; height: 38px; font-size: var(--nx-fs-secondary); font-weight: 700; }

.hra-who { display: flex; flex-direction: column; gap: 1px; min-width: 170px; }
.hra-name { font-size: 13.5px; font-weight: 600; color: var(--nx-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hra-role { font-size: var(--nx-fs-meta); color: var(--nx-faint); }

/* Leave-type pill. The dot takes the type's OWN colour (admin-configured, and
   the same colour the calendar and rota use for it), so the pill is an
   identity, not a severity - hence the neutral sunken fill behind it. */
.hra-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nx-sunken);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-chip);
  padding: 3px 9px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.hra-type-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.hra-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hra-field--balance { min-width: 190px; }
.hra-dates { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); color: var(--nx-ink); }
.hra-days { font-family: var(--nx-font-mono); font-size: 15px; font-weight: 600; color: var(--nx-ink); }
/* Prose, not mono: this cell is a sentence when there is no deduction ("None -
   service visits don't draw from leave") and a number pair when there is. */
.hra-balance { font-size: 11.5px; color: var(--nx-muted); }
.hra-balance-mono { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); color: var(--nx-ink); }
.hra-balance-arrow { color: var(--nx-empty); }

.hra-age { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.hra-requested {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---- visit context (Service Visit / Maintenance / Installation) --- */

.hra-visit {
  border-top: 1px solid var(--nx-row-divider);
  padding: 12px 18px;
  background: var(--nx-sunken);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hra-visit-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--nx-fs-body);
  color: var(--nx-ink);
  min-width: 0;
}
/* The glyph column is fixed so every row's text starts on the same edge. */
.hra-visit-ico {
  flex: 0 0 16px;
  color: var(--nx-faint);
  margin-top: 2px;
  line-height: 0;
}
.hra-visit-text { min-width: 0; overflow-wrap: anywhere; }
.hra-visit-dim { color: var(--nx-faint); }
.hra-visit-mono { font-family: var(--nx-font-mono); font-size: var(--nx-fs-secondary); }

.hra-visit-addr {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-control);
  padding: 9px 11px;
  font-size: var(--nx-fs-secondary);
  color: var(--nx-muted);
  line-height: 1.5;
}

/* Travel is the one part of a visit that is a plan rather than a fact, so it
   gets the accent-soft treatment the Console uses for "system says". */
.hra-visit-route {
  background: var(--nx-accent-soft-bg);
  border: 1px solid var(--nx-accent-soft-line);
  border-radius: var(--nx-r-control);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hra-route-head {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-meta-sm);
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-accent-soft-fg);
  text-transform: uppercase;
}
.hra-route-leg { font-size: var(--nx-fs-secondary-lg); color: var(--nx-ink); overflow-wrap: anywhere; }
.hra-route-stats { font-family: var(--nx-font-mono); font-size: var(--nx-fs-meta); color: var(--nx-muted); }
.hra-route-stop { display: flex; align-items: center; gap: 7px; font-size: var(--nx-fs-secondary); color: var(--nx-muted); }
.hra-route-stop .c-dot { flex: 0 0 auto; }

/* No ticket behind a visit type is a real state, not an error: 34 of the 35
   visit requests in production were logged in HR directly rather than booked
   from a ticket, and those have nothing to show. Say that plainly. */
.hra-visit-none {
  border-top: 1px solid var(--nx-row-divider);
  padding: 10px 18px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
  color: var(--nx-empty);
}

/* ---- coverage strip ---------------------------------------------- */

.hra-coverage {
  border-top: 1px solid var(--nx-row-divider);
  background: var(--nx-sunken);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: var(--nx-s4);
  flex-wrap: wrap;
}
.hra-cov-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.hra-cov-item--clear { color: var(--nx-accent-soft-fg); }
.hra-cov-item--warn { color: var(--nx-amber-fg); }
.hra-note { margin-left: auto; font-size: 11.5px; color: var(--nx-muted); font-style: italic; }

/* ---- foot -------------------------------------------------------- */

.hra-foot {
  border-top: 1px solid var(--nx-row-divider);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  flex-wrap: wrap;
}
.hra-foot-hint {
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  color: var(--nx-empty);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hra-foot-actions { margin-left: auto; display: flex; gap: var(--nx-s2); }

/* ---- decided register -------------------------------------------- */

.hra-decided-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--nx-row-divider);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hra-decided-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 170px 240px 70px minmax(0, 200px) 150px;
  gap: var(--nx-s3);
  padding: 10px 18px;
  border-bottom: 1px solid var(--nx-row-divider);
  align-items: center;
}
.hra-decided-row:last-child { border-bottom: 0; }
.hra-decided-row:hover { background: var(--nx-sunken); }
.hra-decided-row--head {
  padding: 8px 18px;
  font-family: var(--nx-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--nx-ls-meta);
  color: var(--nx-faint);
  text-transform: uppercase;
}
.hra-decided-row--head:hover { background: none; }
.hra-decided-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hra-decided-who .c-avatar { width: 26px; height: 26px; font-size: 9.5px; font-weight: 700; }
.hra-decided-name { font-size: var(--nx-fs-secondary-lg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hra-decided-verdict { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* A rejection reason is the most useful thing in this row, so it wraps to a
   second line rather than being clipped to an ellipsis. The full text is also
   on the element's title for anything longer than that. */
.hra-decided-by {
  font-family: var(--nx-font-mono);
  font-size: 9px;
  color: var(--nx-empty);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1180px) {
  /* The register is six columns of facts; below this the balance and the
     decision stack rather than clip. */
  .hra-decided-row { grid-template-columns: minmax(0, 1.3fr) 150px 200px 60px; }
  .hra-decided-row > :nth-child(n + 5) { grid-column: span 2; }
}
@media (max-width: 860px) {
  .hra-decided-row { grid-template-columns: 1fr 1fr; }
  .hra-decided-row > * { grid-column: auto; }
  .hra-decided-row--head { display: none; }
  .hra-field--balance { min-width: 0; }
  .hra-note { margin-left: 0; flex-basis: 100%; }
}

/* ============ 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;
}
