/* VIMS design system: "Assay Ledger" (IMSPRT-125, Prasad 2026-10-21). A vault register on
   stamp paper: sage paper surfaces, blue-black ink, lapis for every action, antique gold for
   the brand and for gold figures, an espresso sidebar. It replaced the AUFLUENCE/CRM palette
   VIMS shared until Stage 2 (IMSPRT-86); the shell and components keep their names.
   Rules: uiux-rules.md. Every colour is a token below; components use var(--...) only.
   Section 9 holds the VIMS-only components.

   ── 0. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand = antique gold: identity, and the figures that are gold (weights, values).
     --color-brand is dark enough for text on the paper (4.6:1); -light is for the dark
     sidebar and dark mode. Never on controls. */
  --color-brand:         #9a6b12;
  --color-brand-light:   #d4a645;
  --color-brand-rgb:     154, 107, 18;
  --color-brand-light-rgb: 212, 166, 69;
  /* Action = lapis ink: every interactive element. */
  --color-action:        #1e4d8c;
  --color-action-dark:   #163b6d;
  --color-action-light:  #3a68a8;
  --color-action-rgb:    30, 77, 140;
  /* Lapis tints for text on dark surfaces (WCAG AA on --surface-page dark). */
  --color-action-lighter:  #8fb0e6;
  --color-action-lighter-rgb: 143, 176, 230;
  --color-action-lightest: #b5cbef;
  --color-action-lightest-rgb: 181, 203, 239;
  /* Semantic. Success and danger are dark enough for text on the paper and for white text
     on them (4.5:1, WCAG AA); the -light tints are their text colour in dark mode. */
  --color-success:       #1f6b45;
  --color-success-rgb:   31, 107, 69;
  --color-success-light: #6fcf97;
  --color-warning:       #c48c14;
  --color-warning-rgb:   196, 140, 20;
  --color-danger:        #a4262c;
  --color-danger-rgb:    164, 38, 44;
  --color-danger-light:  #f28b8f;
  /* Neutrals: ink-biased greys on the sage paper, espresso at the dark end. */
  --color-n950: #17130e;
  --color-n900: #18202e;
  --color-n700: #3b4350;
  --color-n500: #5b6370;
  --color-n400: #8b929c;
  --color-n300: #c9cec6;
  --color-n100: #e4e8e0;
  --color-n50:  #edf0ea;
  --color-white: #ffffff;
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;
  --color-ink-rgb: 28, 40, 30;
  --color-border: rgba(var(--color-ink-rgb), .14);
  /* A hairline inside a panel: ledger rules between rows. */
  --color-rule: rgba(var(--color-ink-rgb), .07);
  /* The faint lines of stamp paper behind a record's identity block. */
  --color-guilloche: rgba(var(--color-action-rgb), .07);

  /* Paper and ink */
  --surface-page: var(--color-n50);
  --surface-panel: #fbfcf8;
  --surface-panel-2: #f4f6f0;
  --surface-sidebar: var(--color-n950);
  --sidebar-ink: #efe7d6;
  --sidebar-ink-rgb: 239, 231, 214;
  --bottom-nav-bg: rgba(251, 252, 248, .92);

  /* Bootstrap kept in step with the system */
  --bs-body-bg:          var(--surface-panel);
  --bs-body-bg-rgb:      251, 252, 248;
  --bs-body-color:       var(--color-n900);
  --bs-body-color-rgb:   24, 32, 46;
  --bs-emphasis-color:   var(--color-n950);
  --bs-secondary-color:  var(--color-n500);
  --bs-secondary-bg:     var(--color-n100);
  --bs-tertiary-bg:      var(--surface-panel-2);
  --bs-border-color:     var(--color-border);
  --bs-primary:          var(--color-action);
  --bs-primary-rgb:      var(--color-action-rgb);
  --bs-primary-bg-subtle: rgba(var(--color-action-rgb), .1);
  --bs-primary-border-subtle: rgba(var(--color-action-rgb), .28);
  --bs-link-color:       var(--color-action);
  --bs-link-color-rgb:   var(--color-action-rgb);
  --bs-link-hover-color: var(--color-action-dark);
  --bs-success:          var(--color-success);
  --bs-success-rgb:      var(--color-success-rgb);
  --bs-warning:          var(--color-warning);
  --bs-warning-rgb:      var(--color-warning-rgb);
  --bs-danger:           var(--color-danger);
  --bs-danger-rgb:       var(--color-danger-rgb);
  /* Anek and Tiro carry Latin, Devanagari (Marathi, Hindi) and Kannada, so all four screen
     languages are set in designed type rather than the system fallback. */
  --bs-body-font-family: "Anek Latin", "Anek Devanagari", "Anek Kannada", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading:        "Tiro Devanagari Marathi", "Tiro Kannada", Georgia, "Times New Roman", serif;
  --font-mono:           "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing (multiples of 4px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  /* Radius: a ledger's corners are nearly square. */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 999px; --radius-circle: 50%;
  /* Elevation: paper lies flat; only what floats (menus, toasts, dialogs) casts a shadow. */
  --shadow-elevation-1: 0 1px 0 rgba(var(--color-ink-rgb), .04);
  --shadow-elevation-2: 0 4px 14px rgba(var(--color-ink-rgb), .10);
  --shadow-elevation-3: 0 8px 24px rgba(var(--color-ink-rgb), .16);
  --shadow-elevation-4: 0 16px 40px rgba(var(--color-ink-rgb), .22);
  /* Timing */
  --t-micro: 100ms ease-out;
  /* Durations alone, for properties that take no easing (the page-change animation, ). */
  --dur-standard: 200ms;
  --dur-slide: 250ms;
  --t-standard: var(--dur-standard) ease-in-out;
  --t-slide: var(--dur-slide) cubic-bezier(.4, 0, .2, 1);
  /* The gap between one card's entrance and the next in a list (section 8), and the most
     steps any card waits, so a long list is never slow to appear. */
  --stagger-step: 40ms;
  --stagger-max: 7;
  /* One slow in-and-out of a "waiting" status dot: slow enough to read as calm, not alarm. */
  --dur-breathe: 1.8s;
  /* One pass of the QR viewfinder's line across its box: unhurried, so it reads as looking. */
  --dur-sweep: 2.2s;
  /* Z stack */
  --z-sticky: 100; --z-sidebar: 1020; --z-navbar: 1025; --z-bottom-nav: 1030; --z-fab: 1035;
  --z-action-bar: 1031; --z-dropdown: 1050; --z-overlay: 1055; --z-modal: 1060; --z-toast: 1070;
  --z-tooltip: 1080;
  /* Shell sizes */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 64px;
  --navbar-height: 57px;
  --bottom-nav-height: 64px;
  --fab-size: 52px;

  /* The four gradients (uiux-rules.md §0): use no others. A ledger is mostly flat; these
     are for the few surfaces that must read as a block of colour. */
  --gradient-hero:    linear-gradient(135deg, var(--color-action), var(--color-action-dark));
  --gradient-danger:  linear-gradient(135deg, var(--color-danger), #7d1d22);
  --gradient-success: linear-gradient(135deg, var(--color-success), #154d31);
  --gradient-gold:    linear-gradient(135deg, var(--color-brand-light), var(--color-brand));

  /* Status pill pairs (tinted: safe in light and dark) */
  --pill-open-bg:   rgba(var(--color-action-rgb), .1);   --pill-open-fg:   var(--color-action-dark);
  --pill-active-bg: rgba(var(--color-warning-rgb), .16); --pill-active-fg: #7a5200;
  --pill-done-bg:   rgba(var(--color-success-rgb), .12); --pill-done-fg:   #17573a;
  --pill-lost-bg:   rgba(var(--color-danger-rgb), .1);   --pill-lost-fg:   #8e1f25;
  --pill-hold-bg:   rgba(var(--color-ink-rgb), .08);     --pill-hold-fg:   var(--color-n700);

  /* Modals: a sheet of the paper, not glass */
  --modal-glass-bg: var(--surface-panel);
  --modal-border: var(--color-border);
  --modal-shadow: var(--shadow-elevation-4);
  --modal-backdrop-overlay: rgba(23, 19, 14, .45);
  --modal-backdrop-blur: 4px;
  --modal-title-color: var(--color-n950);
}

[data-bs-theme="dark"] {
  --color-ink-rgb: 232, 228, 215;
  --color-border: rgba(var(--color-ink-rgb), .14);
  --color-rule: rgba(var(--color-ink-rgb), .07);
  --color-guilloche: rgba(var(--color-action-lighter-rgb), .06);
  --color-brand: #d9b05a;
  --surface-page: #11141a;
  --surface-panel: #181c24;
  --surface-panel-2: #1d222b;
  --surface-sidebar: #0b0a08;
  --bottom-nav-bg: rgba(24, 28, 36, .92);
  --bs-body-bg: var(--surface-panel);
  --bs-body-bg-rgb: 24, 28, 36;
  --bs-body-color: #ebe7dc;
  --bs-body-color-rgb: 235, 231, 220;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #a39f94;
  --bs-secondary-bg: #232832;
  --bs-tertiary-bg: var(--surface-panel-2);
  --bs-border-color: var(--color-border);
  --bs-primary-bg-subtle: rgba(var(--color-action-lighter-rgb), .14);
  --bs-primary-border-subtle: rgba(var(--color-action-lighter-rgb), .32);
  --pill-open-bg: rgba(var(--color-action-lighter-rgb), .14); --pill-open-fg: var(--color-action-lightest);
  --pill-active-bg: rgba(240, 195, 106, .14); --pill-active-fg: #f0c36a;
  --pill-done-bg: rgba(111, 207, 151, .13); --pill-done-fg: #8fdcae;
  --pill-lost-bg: rgba(242, 139, 143, .13); --pill-lost-fg: #f5a3a6;
  --pill-hold-bg: rgba(var(--color-ink-rgb), .1); --pill-hold-fg: #c9c5ba;
  --bs-link-color: var(--color-action-lighter);
  --bs-link-color-rgb: var(--color-action-lighter-rgb);
  --bs-link-hover-color: var(--color-action-lightest);
  --bs-link-hover-color-rgb: var(--color-action-lightest-rgb);
  --modal-backdrop-overlay: rgba(0, 0, 0, .6);
  --modal-title-color: #ebe7dc;
}
/* Text in the action and state colours, lifted to tints that pass on dark surfaces. */
[data-bs-theme="dark"] .text-primary { color: var(--color-action-lighter) !important; }
[data-bs-theme="dark"] .text-success { color: var(--color-success-light) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--color-danger-light) !important; }
/* Primary buttons in dark mode: the light lapis with ink-dark text, as bright as the paper. */
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: var(--surface-page); --bs-btn-bg: var(--color-action-lighter);
  --bs-btn-border-color: var(--color-action-lighter); --bs-btn-hover-color: var(--surface-page);
  --bs-btn-hover-bg: var(--color-action-lightest); --bs-btn-hover-border-color: var(--color-action-lightest);
  --bs-btn-active-color: var(--surface-page); --bs-btn-active-bg: var(--color-action-lightest);
  --bs-btn-disabled-color: var(--surface-page); --bs-btn-disabled-bg: var(--color-action-lighter);
  --bs-btn-disabled-border-color: var(--color-action-lighter); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--color-action-lighter);
  --bs-btn-border-color: var(--color-action-lighter); --bs-btn-hover-color: var(--surface-page);
  --bs-btn-hover-bg: var(--color-action-lighter); --bs-btn-hover-border-color: var(--color-action-lighter); }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--color-n300); --bs-btn-border-color: rgba(var(--color-ink-rgb), .28);
  --bs-btn-hover-color: var(--surface-page); --bs-btn-hover-bg: var(--color-n300); --bs-btn-hover-border-color: var(--color-n300);
  --bs-btn-active-color: var(--surface-page); --bs-btn-active-bg: var(--color-n300); }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--color-danger-light); --bs-btn-border-color: var(--color-danger-light); }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--color-success-light); --bs-btn-border-color: var(--color-success-light); }
[data-bs-theme="dark"] .initials, [data-bs-theme="dark"] .filter-pill { color: var(--color-action-lighter); }


/* ── 1. Base ───────────────────────────────────────────────────────────── */
body {
  background: var(--surface-page);
  font-family: var(--bs-body-font-family);
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Tiro has one weight: never let the browser fake a bold of it. */
h1, h2, h3, .h1, .h2, .h3, .h4, .page-title { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0;
  font-synthesis-weight: none; text-wrap: balance; }
.num, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* A gold figure (a weight or a value): the brand colour, in the figures face. */
.gold-fig { color: var(--color-brand); }
a { text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
/* Bootstrap's own colour transitions, plus the press: a button eases back out of it too. */
.btn { transition: color var(--t-micro), background-color var(--t-micro), border-color var(--t-micro),
  box-shadow var(--t-micro), transform var(--t-micro); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { --bs-btn-bg: var(--color-action); --bs-btn-border-color: var(--color-action);
  --bs-btn-hover-bg: var(--color-action-dark); --bs-btn-hover-border-color: var(--color-action-dark);
  --bs-btn-active-bg: var(--color-action-dark); --bs-btn-disabled-bg: var(--color-action);
  --bs-btn-disabled-border-color: var(--color-action); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--color-action); --bs-btn-border-color: var(--color-action);
  --bs-btn-hover-bg: var(--color-action); --bs-btn-hover-border-color: var(--color-action);
  --bs-btn-active-bg: var(--color-action-dark); }
.btn { border-radius: var(--radius-sm); font-weight: 600; }
/* `hidden` always hides. Bootstrap's display utilities (.d-block, .d-flex) are !important and
   come later, so a hidden field wrapped in <label class="d-block"> (data-shown-when) still
   showed, greyed out and marked required. The doubled attribute outranks one class. */
[hidden][hidden] { display: none !important; }
/* Every action reads in Title Case, as in AUFLUENCE: buttons and ⋯ menu items. Labels stay
   sentence case in the source. */
.btn, .dropdown-item { text-transform: capitalize; }
/* Outline buttons in a state colour: Bootstrap's compiled colours (amber 1.6:1, red 4.3:1
   on white) fail contrast, so each takes its text colour from a token. */
.btn-outline-danger { --bs-btn-color: var(--color-danger); --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger);
  --bs-btn-active-bg: var(--color-danger); --bs-btn-active-border-color: var(--color-danger); }
.btn-outline-success { --bs-btn-color: var(--color-success); --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success);
  --bs-btn-active-bg: var(--color-success); --bs-btn-active-border-color: var(--color-success); }
.btn-outline-warning { --bs-btn-color: var(--pill-active-fg); --bs-btn-border-color: var(--color-warning);
  --bs-btn-hover-color: var(--color-n950); --bs-btn-active-color: var(--color-n950); }
.btn-check:checked + .btn-outline-warning { color: var(--color-n950); }
/* Bootstrap's grey (#6c757d) is just under 4.5:1 on the page surface. */
.btn-outline-secondary { --bs-btn-color: var(--color-n700); }
.form-control, .form-select { border-radius: var(--radius-sm); }
/* Bootstrap compiles its components' colours to literal values, so overriding --bs-primary
   doesn't reach them: point each one we use at the action colour. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-action); }
.nav { --bs-nav-link-color: var(--color-action); --bs-nav-link-hover-color: var(--color-action-dark); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--color-action); }
.list-group { --bs-list-group-active-bg: var(--color-action); --bs-list-group-active-border-color: var(--color-action); }
.pagination { --bs-pagination-color: var(--color-action); --bs-pagination-active-bg: var(--color-action);
  --bs-pagination-active-border-color: var(--color-action); --bs-pagination-hover-color: var(--color-action-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--color-action-rgb), .25); }
.accordion { --bs-accordion-active-color: var(--color-action-dark); --bs-accordion-active-bg: rgba(var(--color-action-rgb), .06);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--color-action-rgb), .25); }
.form-check-input:checked { background-color: var(--color-action); border-color: var(--color-action); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--color-action-light); box-shadow: 0 0 0 .25rem rgba(var(--color-action-rgb), .2); }
.progress { --bs-progress-bar-bg: var(--color-action); }
[data-bs-theme="dark"] .nav { --bs-nav-link-color: var(--color-action-lighter); --bs-nav-link-hover-color: var(--color-white); }
[data-bs-theme="dark"] .accordion { --bs-accordion-active-color: var(--color-action-lightest); }
/* A mandatory field's label ends in a red asterisk; app.js (markRequired) sets the class.
   Drawn here, not typed, so the label's text stays as written for screen readers and tests. */
.label-required::after { content: " *"; color: var(--color-danger); }
[data-bs-theme="dark"] .label-required::after { color: var(--color-danger-light); }
.card { border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-elevation-1);
  --bs-card-cap-bg: var(--surface-panel-2); }
.card-header { border-bottom-color: var(--color-rule); }
.form-control, .form-select { background-color: var(--surface-panel); border-color: rgba(var(--color-ink-rgb), .2); }
.form-control::placeholder { color: var(--color-n400); }
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: var(--space-1); }
/* Small-caps group label. One look wherever it sits (card or page), 12px so it stays readable
   on a low-end phone in daylight (the floor for any text in the app). */
h2.h6.text-uppercase, h3.h6.text-uppercase, .section-label {
  font-family: var(--bs-body-font-family); font-size: .75rem; font-weight: 700; letter-spacing: .08em;
}
.alert { border-radius: var(--radius-md); }
.badge { font-weight: 600; }
.table { --bs-table-bg: transparent; }
.table { --bs-table-border-color: var(--color-rule); }
.table thead th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); }

@media (max-width: 991.98px) {
  .btn, .form-control, .form-select { min-height: 44px; }
  .btn { min-width: 44px; }
  .back-link { min-height: 44px; margin-bottom: 0; }
  .btn-lg, .form-control-lg, .form-select-lg { min-height: 48px; }
  .form-control, .form-select { font-size: 1rem; } /* no iOS zoom on focus */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ── 2. Shell ──────────────────────────────────────────────────────────── */
/* dvh: the height left over by the browser's bars and the on-screen keyboard
   (base.html's viewport asks for interactive-widget=resizes-content); vh first for old browsers. */
#wrapper { display: flex; min-height: 100vh; min-height: 100dvh; }

#vimsSidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-sidebar); color: var(--color-white);
  z-index: var(--z-sidebar);
  transition: width var(--t-slide), transform var(--t-slide);
  display: flex; flex-direction: column;
}
#vimsSidebar .sidebar-brand {
  display: flex; align-items: center; gap: var(--space-2); min-height: 60px;
  padding: var(--space-3) var(--space-4); color: var(--color-white); text-decoration: none;
  border-bottom: 1px solid rgba(var(--sidebar-ink-rgb), .1);
}
/* The mark is a gold-ruled seal, as on the preview (IMSPRT-125). */
#vimsSidebar .brand-mark, .bare-brand .brand-mark { width: 34px; height: 34px; border: 1.5px solid var(--color-brand-light);
  border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-brand-light); font-size: 1.05rem !important; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
.brand-name { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; white-space: nowrap;
  line-height: 1.1; }
.brand-name small { display: block; font-family: var(--bs-body-font-family); font-weight: 500;
  font-size: .72rem; color: rgba(var(--sidebar-ink-rgb), .55); letter-spacing: .04em; }
.sidebar-group {
  padding: var(--space-4) var(--space-5) var(--space-1); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--sidebar-ink-rgb), .55); white-space: nowrap;
}
/* A long label wraps to a second line rather than being cut off ("Search Collateral by Lender"). */
#vimsSidebar .nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 2px var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); line-height: 1.25;
  color: rgba(var(--sidebar-ink-rgb), .82); font-size: .9rem; overflow: hidden;
  transition: background var(--t-micro), color var(--t-micro);
}
#vimsSidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
#vimsSidebar .nav-link:hover { background: rgba(var(--sidebar-ink-rgb), .07); color: var(--sidebar-ink); }
#vimsSidebar .nav-link.active { background: rgba(var(--color-brand-light-rgb), .14); color: var(--sidebar-ink); font-weight: 600; }
#vimsSidebar .nav-link.active i { color: var(--color-brand-light); }
.sidebar-user {
  margin-top: auto; padding: var(--space-3) var(--space-4); border-top: 1px solid rgba(var(--sidebar-ink-rgb), .1);
  display: flex; align-items: center; gap: var(--space-2); font-size: .8rem;
}
.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-circle); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand-light); color: var(--color-n950); font-weight: 700; font-size: .85rem;
}
.sidebar-user .who { min-width: 0; }
.sidebar-user .who div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who .sub { color: rgba(var(--sidebar-ink-rgb), .55); font-size: .75rem; }
/* Opens SIMS's My Profile page (change password); a full 44px touch target. */
.sidebar-user .who .profile-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px;
  color: rgba(var(--sidebar-ink-rgb), .8); font-size: .75rem; text-decoration: none;
}
.sidebar-user .who .profile-link:hover { color: var(--color-white); text-decoration: underline; }
.sidebar-collapse-btn {
  background: none; border: 0; color: rgba(var(--sidebar-ink-rgb), .6); width: 40px; height: 40px;
  border-radius: var(--radius-sm); margin: var(--space-2) auto;
}
.sidebar-collapse-btn:hover { background: rgba(var(--sidebar-ink-rgb), .07); color: var(--sidebar-ink); }

/* The collapsed rail is a desktop setting only: theme.js restores it on every screen size, and
   below lg it would shrink the drawer to icons and hide who is signed in. */
@media (min-width: 992px) {
  .sidebar-collapsed #vimsSidebar { width: var(--sidebar-collapsed-width); }
  .sidebar-collapsed #vimsSidebar .nav-label, .sidebar-collapsed #vimsSidebar .brand-name,
  .sidebar-collapsed #vimsSidebar .sidebar-group, .sidebar-collapsed #vimsSidebar .who { display: none; }
  .sidebar-collapsed #vimsSidebar .nav-link { justify-content: center; padding: 0; }
  .sidebar-collapsed #vimsSidebar .sidebar-collapse-btn i { transform: rotate(180deg); }
}

#page-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }

#topNavbar {
  position: sticky; top: 0; z-index: var(--z-navbar); min-height: var(--navbar-height);
  background: var(--bs-body-bg); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4);
}
#topNavbar .page-crumb { font-size: .85rem; color: var(--bs-secondary-color); }
#topNavbar .page-crumb a { color: inherit; text-decoration: none; }
#topNavbar .page-crumb .current { color: var(--bs-body-color); font-weight: 600; }
#topNavbar .mobile-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.icon-btn:hover { background: var(--bs-tertiary-bg); }
.icon-btn { flex-shrink: 0; }
/* A small "show more" toggle: one chevron that turns when open, the same on every screen
   (the browser's own triangle disappears once the summary is laid out as flex). */
details > summary.small { display: flex; align-items: center; gap: var(--space-1); list-style: none; cursor: pointer; }
details > summary.small::-webkit-details-marker { display: none; }
details > summary.small::before { font-family: "bootstrap-icons"; content: "\F285"; font-size: .75em;
  transition: transform var(--t-standard); }
details[open] > summary.small::before { transform: rotate(90deg); }
@media (max-width: 991.98px) {
  .icon-btn { width: 44px; height: 44px; }
  /* Small text toggles and inline links that stand alone are still tap targets. */
  details > summary.small { display: inline-flex; align-items: center; min-height: 44px; }
  .form-check-label { padding-block: 11px; min-width: 44px; display: inline-block; }
  .min-h-tap { min-height: 44px; }
}

main.page { flex: 1 1 auto; padding: var(--space-4); width: 100%; max-width: 1280px; margin: 0 auto; }
body { color: var(--bs-body-color); }
@media (min-width: 768px) { main.page { padding: var(--space-6); } }

#bottomNav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-height);
  background: var(--bottom-nav-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(var(--color-black-rgb), .06);
  z-index: var(--z-bottom-nav); padding: 0 var(--space-1) env(safe-area-inset-bottom);
}
#bottomNav .bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--color-n500); font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  transition: color var(--t-micro);
}
#bottomNav .bn-item i { font-size: 1.375rem; transition: transform var(--t-micro); }
#bottomNav .bn-item.active { color: var(--color-action); }
#bottomNav .bn-item.active i { transform: scale(1.08); }
#bottomNav .bn-item:active { opacity: .7; transform: scale(.93); }
[data-bs-theme="dark"] #bottomNav .bn-item { color: var(--color-n400); }
[data-bs-theme="dark"] #bottomNav .bn-item.active { color: var(--color-action-lighter); }

/* Waiting counts on the approval queues (pending_counts.js). Gold, the brand colour, on the
   dark sidebar in both themes; a ring of the page colour lifts a badge off an icon. */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-xl);
  background: var(--color-brand-light); color: var(--color-n950);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; animation: nav-count-in var(--t-standard);
}
@keyframes nav-count-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-count { animation: none; } }
#vimsSidebar .nav-link { position: relative; }
#vimsSidebar .nav-link .nav-count { margin-left: auto; }
/* A long label gives way to its count, never the other way round. */
#vimsSidebar .nav-link.has-count .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) {
  .sidebar-collapsed #vimsSidebar .nav-link .nav-count {
    position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem;
  }
}
#bottomNav .bn-item { position: relative; }
#bottomNav .nav-count {
  position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .62rem; box-shadow: 0 0 0 2px var(--bs-body-bg);
}
[data-menu-pending].has-pending::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
  border-radius: var(--radius-circle); background: var(--color-brand-light); box-shadow: 0 0 0 2px var(--bs-body-bg);
}

#fab {
  display: none; position: fixed; right: var(--space-4); bottom: calc(var(--bottom-nav-height) + 8px);
  width: var(--fab-size); height: var(--fab-size); border-radius: var(--radius-circle);
  background: var(--color-action); color: var(--color-white); font-size: 1.5rem;
  align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), .25); z-index: var(--z-fab);
  border: 0; padding: 0; /* it is a <button> where it opens a dialog */
  transition: transform var(--t-micro), box-shadow var(--t-micro);
}
#fab:active { transform: scale(.92); box-shadow: var(--shadow-elevation-2); }
[data-bs-theme="dark"] #fab { background: var(--color-action-lighter); color: var(--surface-page); }

/* Fades in and out with the drawer rather than snapping; visibility keeps it from taking taps
   while it is clear. */
#sidebarBackdrop { position: fixed; inset: 0; background: rgba(var(--color-black-rgb), .45);
  z-index: calc(var(--z-sidebar) - 1); opacity: 0; visibility: hidden;
  transition: opacity var(--t-slide), visibility var(--t-slide); }

@media (max-width: 991.98px) {
  #vimsSidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); width: var(--sidebar-width); }
  .sidebar-open #vimsSidebar { transform: none; box-shadow: var(--shadow-elevation-4); }
  .sidebar-open #sidebarBackdrop { opacity: 1; visibility: visible; }
  .sidebar-collapse-btn { display: none; }
  /* Who is signed in sits under the logo in the drawer, not below every menu group. */
  #vimsSidebar .sidebar-brand { order: -2; }
  .sidebar-user { order: -1; margin-top: 0; border-top: 0; border-bottom: 1px solid rgba(var(--color-white-rgb), .08); }
  #bottomNav { display: flex; }
  #fab { display: inline-flex; }
  main.page { padding-bottom: calc(var(--bottom-nav-height) + var(--space-8) + 56px); }
  /* Sticky action bars sit on top of the bottom nav, never under it. */
  .fixed-bottom { bottom: var(--bottom-nav-height) !important; z-index: var(--z-action-bar); }
  .has-action-bar #fab { display: none; }
  /* Typing (ui.js marks .is-typing): the keyboard takes the bottom half, so the
     bottom nav steps aside and the action bar sits right on the keyboard, its primary button
     reachable without closing it. */
  .is-typing #bottomNav { display: none; }
  .is-typing .fixed-bottom { bottom: 0 !important; }
  .is-typing .action-bar { bottom: 0; }
}
/* No pull-to-refresh mid-step: a screen with an action bar is a step or a form, and
   a reload there loses what was typed. Dialogs and the drawer keep their own scroll to themselves. */
html:has(> body.has-action-bar), body.has-action-bar { overscroll-behavior-y: contain; }
.modal, .modal-body { overscroll-behavior: contain; }
@media (min-width: 992px) {
  .fixed-bottom { left: var(--sidebar-width) !important; }
  .sidebar-collapsed .fixed-bottom { left: var(--sidebar-collapsed-width) !important; }
  main.page { padding-bottom: calc(var(--space-8) + 72px); }
}
.fixed-bottom { box-shadow: 0 -6px 18px rgba(var(--color-black-rgb), .06); }

/* Skip link: hidden until focused, then above the sticky shell (shares the toast layer). */
.skip-link:focus { z-index: var(--z-toast); }

/* Toasts (flash messages) */
#toastStack {
  position: fixed; top: calc(var(--navbar-height) + var(--space-3)); right: var(--space-4); left: auto;
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 32px));
}
@media (max-width: 575.98px) { #toastStack { left: var(--space-4); right: var(--space-4); width: auto; } }
.app-toast {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--bs-body-bg); box-shadow: var(--shadow-elevation-3);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-action); font-size: .875rem;
  animation: toast-in 200ms ease-out;
}
.app-toast.t-success { border-left-color: var(--color-success); }
.app-toast.t-danger { border-left-color: var(--color-danger); }
.app-toast.t-warning { border-left-color: var(--color-warning); }
.app-toast .t-icon { font-size: 1.1rem; line-height: 1.3; }
.app-toast.t-success .t-icon { color: var(--color-success); }
.app-toast.t-danger .t-icon { color: var(--color-danger); }
.app-toast.t-warning .t-icon { color: var(--color-warning); }
.app-toast .t-body { flex: 1; }
.app-toast.hiding { opacity: 0; transform: translateY(-6px); transition: opacity var(--t-standard), transform var(--t-standard); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Page changes: cross-document View Transitions, so going from one page to the next
   cross-fades like an app instead of blanking. The identity hero, page header and phone action
   bar each carry a name, so they hold their place (and only their content cross-fades) while
   the data area changes. The rest of the page only fades, never slides: the fixed bottom nav
   and top bar are part of it and must not move. Browsers without support load the page as
   before; reduced motion turns it off. Each name may appear once per page, or the browser
   skips the animation (the page still loads). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.identity-hero { view-transition-name: identity-hero; }
.page-header { view-transition-name: page-header; }
/* Only the phone's fixed bar: the desktop inline copy sits in the data, at the end of the content. */
@media (max-width: 991.98px) {
  .action-bar:not(.action-bar-desktop) { view-transition-name: action-bar; }
}
::view-transition-group(*) { animation-duration: var(--dur-slide); }
::view-transition-old(root) { animation: page-fade-out var(--t-standard) both; }
::view-transition-new(root) { animation: page-fade-in var(--t-slide) both; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }


/* ── 3. Page header ───────────────────────────────────────────────────── */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-5); }
.page-header .page-title { font-size: 1.85rem; margin: 0; line-height: 1.2; }
.page-header .page-sub { color: var(--bs-secondary-color); font-size: .875rem; margin-top: 2px; }
@media (max-width: 767.98px) { .page-header .page-title { font-size: 1.45rem; } }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .82rem;
  color: var(--bs-secondary-color); text-decoration: none; margin-bottom: var(--space-1); }
.back-link:hover { color: var(--color-action); }


/* ── 4. Components ────────────────────────────────────────────────────── */
/* Status pill */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-xl);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.5;
  white-space: nowrap; }
.sp-open { background: var(--pill-open-bg); color: var(--pill-open-fg); }
.sp-active { background: var(--pill-active-bg); color: var(--pill-active-fg); }
.sp-done { background: var(--pill-done-bg); color: var(--pill-done-fg); }
.sp-lost { background: var(--pill-lost-bg); color: var(--pill-lost-fg); }
.sp-hold { background: var(--pill-hold-bg); color: var(--pill-hold-fg); }
/* List card (CRM lead card pattern) */
.list-card {
  display: block; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  border-left: 3px solid transparent; background: var(--bs-body-bg); box-shadow: var(--shadow-elevation-1);
  color: var(--bs-body-color); text-decoration: none; overflow: hidden;
  transition: box-shadow var(--t-micro), transform var(--t-micro), translate var(--t-micro);
}
a.list-card:hover { box-shadow: var(--shadow-elevation-2); color: var(--bs-body-color); }
a.list-card:active { transform: scale(.99); }
.list-card .lc-body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.list-card .lc-main { flex: 1; min-width: 0; }
.list-card .lc-title { font-weight: 600; font-size: 1rem; line-height: 1.25; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.list-card .lc-meta { font-size: .82rem; color: var(--bs-secondary-color); display: flex; flex-wrap: wrap;
  gap: var(--space-1) var(--space-3); margin-top: 2px; }
.list-card .lc-meta i { font-size: .75rem; margin-right: 2px; }
.list-card .lc-meta > span { white-space: nowrap; }
.list-card .lc-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.list-card .lc-chevron { color: var(--color-n400); flex-shrink: 0; }
/* A card with a control before its text (vimsUi.listCard's `lead`): only the text is the link,
   and the control is a full 44px target. */
.list-card .lc-link { color: var(--bs-body-color); text-decoration: none; }
.list-card .lc-link:hover .lc-title { color: var(--color-action); }
.list-card .lc-lead { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1); }
.list-card .lc-lead .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; }
.urgency-danger  { border-left-color: var(--color-danger) !important; }
.urgency-warning { border-left-color: var(--color-warning) !important; }
.urgency-info    { border-left-color: var(--color-action-light) !important; }
.urgency-success { border-left-color: var(--color-success) !important; }
/* Urgency on an ordinary card needs the thicker left border list-cards already have. */
.card[class*="urgency-"] { border-left-width: 3px; }
.list-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Record card (vimsUi.recordCard): a queue row decided on its own - title, pill, ⋯, facts. */
.record-card { overflow: hidden; }
.record-card .rc-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule); }
.record-card .rc-title-box { flex: 1; min-width: 0; }
.record-card .rc-title { font-family: var(--bs-body-font-family); font-size: 1rem; font-weight: 600; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card .rc-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.record-card .rc-title.num { font-family: var(--font-mono); font-weight: 500; }
/* Facts read as label-value pairs, not two columns a desktop's width apart: the value sits
   right after its label. */
.record-card .kv { max-width: 40rem; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); }
.record-card .kv dd { text-align: left; font-weight: 500; }
.record-card .ledger-figs { margin-bottom: 0; max-width: 40rem; }
.record-card .ledger-figs .lf-value { font-size: 1.15rem; }
.record-card .rc-link { color: inherit; text-decoration: none; }
.record-card .rc-link:hover { color: var(--bs-link-color); text-decoration: underline; }
.record-card .rc-body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.record-card .rc-note { font-size: .82rem; border-top: 1px solid var(--color-rule); padding-top: var(--space-2); }
.record-card .lc-lead { margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1); }

/* Initials avatar for customers */
.initials { width: 40px; height: 40px; border-radius: var(--radius-circle); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
  background: rgba(var(--color-action-rgb), .12); color: var(--color-action); }

/* Identity hero (top of a collateral's page) */
/* Identity hero (top of a record's page): stamp paper, with faint guilloche rings behind it. */
.identity-hero {
  background: repeating-radial-gradient(circle at 92% 50%, transparent 0 9px, var(--color-guilloche) 9px 10px), var(--surface-panel);
  color: var(--bs-body-color); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.identity-hero .ih-row { display: flex; align-items: center; gap: var(--space-3); }
.identity-hero .initials { width: 52px; height: 52px; font-size: 1rem; }
.identity-hero .ih-name { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.identity-hero .ih-meta { font-size: .85rem; color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.identity-hero .ih-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-panel-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 3px 10px;
  font-size: .75rem; font-weight: 600; }
.identity-hero.ended { border-top: 3px solid var(--color-success); }
.identity-hero.stopped { border-top: 3px solid var(--color-n500); }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-tile { background: var(--bs-body-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-1); padding: var(--space-3) var(--space-4); border-top: 3px solid transparent;
  color: var(--bs-body-color); text-decoration: none; display: block;
  transition: box-shadow var(--t-micro), translate var(--t-micro); }
a.stat-tile:hover { box-shadow: var(--shadow-elevation-2); color: var(--bs-body-color); }
.stat-tile .st-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
.stat-tile .st-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bs-secondary-color); margin-top: 2px; }
.stat-tile.accent-primary { border-top-color: var(--color-action); }
.stat-tile.accent-success { border-top-color: var(--color-success); }
.stat-tile.accent-warning { border-top-color: var(--color-warning); }
.stat-tile.accent-danger { border-top-color: var(--color-danger); }
.stat-tile.accent-gold { border-top-color: var(--color-brand); }
.stat-tile.accent-gold .st-value { color: var(--color-brand); }

/* Home tiles */
.nav-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .nav-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nav-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nav-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--bs-body-bg); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevation-1); color: var(--bs-body-color); text-decoration: none; min-height: 112px;
  transition: box-shadow var(--t-micro), transform var(--t-micro), translate var(--t-micro); }
.nav-tile:hover { box-shadow: var(--shadow-elevation-2); color: var(--bs-body-color); }
.nav-tile:active { transform: scale(.98); }
.nav-tile .nt-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(var(--color-action-rgb), .1); color: var(--color-action); }
.nav-tile .nt-label { font-weight: 600; font-size: .95rem; }
[data-bs-theme="dark"] .nav-tile .nt-icon { color: var(--color-action-lighter); }

/* Gold hero (home greeting) */
/* A panel of stamp paper (IMSPRT-128 mockup 01): the greeting, who and where, the bell. */
.welcome-hero { padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.welcome-hero .wh-title { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400; margin: 0; line-height: 1.2; }
@media (min-width: 992px) {
  .welcome-hero { padding: var(--space-6) var(--space-8); margin-bottom: var(--space-6); }
  .welcome-hero .wh-title { font-size: 1.85rem; }
}
.welcome-hero .wh-sub { color: var(--bs-secondary-color); font-size: .9rem; margin-top: 2px; }
.welcome-hero .icon-btn { position: relative; }
/* An unread count on an icon button. */
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--radius-xl); background: var(--color-danger); color: var(--color-white);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; line-height: 1; }
.icon-btn .nav-count { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--bs-body-bg); }

/* Alert banner (next action) */
.action-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--gradient-danger); color: var(--color-white);
  margin-bottom: var(--space-3); }
.action-banner a { color: var(--color-white); font-weight: 600; }
.action-banner .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Empty state */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--bs-secondary-color); }
.empty-state i { font-size: 3rem; color: var(--color-n400); display: block; margin-bottom: var(--space-2); }
.empty-state .es-title { font-weight: 600; font-size: 1rem; color: var(--bs-body-color); }
.empty-state .es-sub { font-size: .875rem; margin-top: 2px; }

/* Section heading inside a page */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-3); }
.section-head h2 { font-size: 1.3rem; margin: 0; }

/* Definition rows */
.kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2) var(--space-3);
  font-size: .875rem; margin: 0; }
.kv dt { color: var(--bs-secondary-color); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
/* Ledger rules between the rows of a longer list of facts. */
.kv.kv-ruled { gap: 0 var(--space-3); }
.kv.kv-ruled dt, .kv.kv-ruled dd { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }

/* The action bar (ui.action_bar, ADR-0016): below lg the fixed bar above the bottom nav,
   at lg and up the same buttons inline at the end of the content. Secondary left, primary
   right; on a phone side by side with the primary about two-thirds of the width. */
.action-bar { margin-top: var(--space-4); }
.action-bar-inner { display: flex; gap: var(--space-2); justify-content: flex-end; }
.action-bar .btn { min-height: 48px; }
/* A list's FAB action, in the page header at lg and up (ui.page_header). */
.page-header .action-bar { margin-top: 0; }
@media (max-width: 991.98px) {
  .action-bar { position: fixed; left: 0; right: 0; bottom: var(--bottom-nav-height); margin: 0;
    z-index: var(--z-action-bar); padding: var(--space-2); background: var(--bs-body-bg);
    border-top: 1px solid var(--color-border); box-shadow: 0 -6px 18px rgba(var(--color-black-rgb), .06); }
  /* Two equal halves, as the mockups draw them (IMSPRT-128): a third was too narrow for a
     secondary like "Abandon Trip", which wrapped. Labels stay on one line. */
  .action-bar .ab-secondary { flex: 1 1 0; min-width: 0; }
  .action-bar .ab-primary { flex: 1 1 0; min-width: 0; }
  .action-bar .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The ⋯ menu in the page header: a 44px target; its rows are full-height tap rows. */
.more-menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.more-menu .dropdown-menu { min-width: 240px; z-index: var(--z-dropdown); }
.more-menu .dropdown-item { min-height: 44px; white-space: normal; }
.more-menu .dropdown-item.text-danger:active { color: var(--color-white) !important; background: var(--color-danger); }


/* ── 5. List screens ─────────── */
/* Filter bar pills and the dirty-Apply marker, as in the CRM's custom.css. */
.filter-pill {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 0 3px 10px;
  border-radius: var(--radius-xl); background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
  border: 1px solid var(--bs-primary-border-subtle); font-size: .78rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
}
.filter-pill:hover { color: var(--color-action-dark); }
.filter-pill .pill-remove {
  min-width: 44px; min-height: 44px; margin: -12px 0; display: inline-flex; align-items: center;
  justify-content: center; font-size: .9rem; opacity: .7;
}
.filter-pill:hover .pill-remove { opacity: 1; }
[data-bs-theme="dark"] .filter-pill { color: var(--color-action-lighter); }
.filter-apply-btn { min-height: 48px; min-width: 120px; }
/* Uncommitted edits in the panel: a ring, plus a dot for anyone who can't tell the rings
   apart by contrast. Apply stays enabled. */
.filter-apply-btn.filter-apply-dirty { box-shadow: 0 0 0 3px var(--bs-primary-border-subtle); position: relative; }
.filter-apply-btn.filter-apply-dirty::after {
  content: ''; position: absolute; top: var(--space-1); right: var(--space-1);
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-circle); background: var(--color-warning);
}

/* List views: the table never shows below md, whatever was stored (list_view.js). */
.lv-table { display: none; }
@media (min-width: 768px) {
  [data-list-view]:not([data-view="card"]) .lv-table { display: block; }
  [data-list-view]:not([data-view="card"]) .lv-cards { display: none; }
}
.lv-cards { padding: var(--space-2); }

/* Table view (CRM §6.5): at most 9 columns, hover row, header sticks under the top bar.
   No horizontal scroll container, so the sticky header works; cells wrap instead. */
.list-table { margin-bottom: 0; --bs-table-hover-bg: var(--bs-tertiary-bg); }
.list-table thead th {
  position: sticky; top: var(--navbar-height); z-index: var(--z-sticky); background: var(--bs-tertiary-bg);
  white-space: nowrap; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.list-table td { vertical-align: middle; overflow-wrap: anywhere; font-size: .875rem; }
.list-table td.num, .list-table th.num { text-align: right; }
.list-table a.row-link { font-weight: 600; text-decoration: none; color: var(--bs-link-color); }
.list-table a.row-link:hover { text-decoration: underline; }

/* Pager under a list. */
.list-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border);
}
@media (max-width: 991.98px) {
  .list-pager .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* Skeleton loading (CRM §8.1). */
.skeleton {
  background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, rgba(var(--color-white-rgb), .7) 50%,
    var(--bs-secondary-bg) 75%);
  background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite;
  border-radius: var(--radius-sm); color: transparent; pointer-events: none;
}
@keyframes skeleton-wave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk-line   { height: 12px; margin-bottom: 6px; }
.sk-title  { height: 18px; margin-bottom: var(--space-2); }
.sk-avatar { width: 40px; height: 40px; border-radius: var(--radius-circle); }
.sk-badge  { height: 20px; width: 60px; border-radius: var(--radius-xl); }
[data-bs-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(var(--color-white-rgb), .08) 25%, rgba(var(--color-white-rgb), .15) 50%,
    rgba(var(--color-white-rgb), .08) 75%);
  background-size: 200% 100%;
}


/* ── 6. Modals ─ */
/* Bootstrap's own layers (dialog 1055, backdrop 1050) tie with --z-overlay; pin the dialog
   to --z-modal so it is never behind its backdrop. */
.modal          { z-index: var(--z-modal); }
.modal-backdrop { z-index: calc(var(--z-modal) - 1); }
.modal-backdrop.show {
  opacity: 1; background: var(--modal-backdrop-overlay);
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur)) saturate(180%);
  backdrop-filter: blur(var(--modal-backdrop-blur)) saturate(180%);
}
.modal-content {
  background: var(--modal-glass-bg); border: 1px solid var(--modal-border); border-radius: var(--radius-lg);
  box-shadow: var(--modal-shadow);
  animation: modal-in var(--t-slide) both;
}
.modal-header { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-rule);
  animation: modal-part-in var(--t-slide) 50ms both; }
/* The CRM's gradient title, using the hero gradient; dark mode uses a plain light indigo
   rather than adding a fifth gradient. */
.modal-header .modal-title {
  font-family: var(--font-heading); font-weight: 400; font-size: 1.35rem; letter-spacing: 0;
  display: flex; align-items: center; gap: var(--space-2); color: var(--modal-title-color);
}

.modal-header .btn-close {
  width: 44px; height: 44px; border-radius: var(--radius-md); background-color: rgba(var(--color-black-rgb), .05);
  opacity: .6; margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) calc(var(--space-1) * -1) auto;
  transition: transform var(--t-standard), opacity var(--t-standard), background-color var(--t-standard);
}
.modal-header .btn-close:hover { background-color: rgba(var(--color-danger-rgb), .1); opacity: 1; transform: rotate(90deg); }
[data-bs-theme="dark"] .modal-header .btn-close { background-color: rgba(var(--color-white-rgb), .06); }
.modal-body { padding: var(--space-5) var(--space-6); animation: modal-part-in var(--t-slide) 80ms both; }
.modal-footer { padding: var(--space-4) var(--space-6) var(--space-5); gap: var(--space-2);
  border-top: 1px solid var(--color-rule); animation: modal-part-in var(--t-slide) 110ms both; }
.modal-footer > * { margin: 0; }
/* A dialog whose body is a flush list (the action sheet): the rows keep to its rounded corners. */
.modal-content:has(> .list-group-flush) { overflow: hidden; }
.modal .form-control, .modal .form-select { border-radius: var(--radius-sm); }
.modal .form-control:focus, .modal .form-select:focus {
  border-color: var(--color-action); box-shadow: 0 0 0 3px rgba(var(--color-action-rgb), .15);
}
.modal .form-label { font-weight: 600; font-size: .85rem; }
.modal .modal-footer .btn { border-radius: var(--radius-sm); min-height: 44px; padding-left: var(--space-5);
  padding-right: var(--space-5); font-weight: 600; }

/* Full screen below sm (a form needs the room); the panel loses its rounding there. */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content { border-radius: 0; border: 0; }
  .modal-fullscreen-sm-down .modal-footer .btn { flex: 1 1 0; min-height: 48px; }
}
/* A choice or a short form is a bottom sheet below sm (IMSPRT-128): pinned to the foot, full
   width, a grab handle on top, its buttons sharing the row. A dialog opts in with .modal-sheet. */
@media (max-width: 575.98px) {
  .modal-sheet .modal-dialog { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
  .modal-sheet .modal-content { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
    max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); animation-name: sheet-in; }
  .modal-sheet .modal-content::before { content: ""; align-self: center; width: 40px; height: 4px;
    margin-top: var(--space-2); border-radius: var(--radius-xl); background: var(--color-n300); }
  .modal-sheet .modal-body { overflow-y: auto; }
  .modal-sheet .modal-footer .btn { flex: 1 1 0; min-height: 48px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
/* The header's leading icon in a tinted circle, and the line under the title naming the record. */
.modal-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-circle); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(var(--color-action-rgb), .1); color: var(--color-action); }
.modal-icon.mi-success { background: rgba(var(--color-success-rgb), .12); color: var(--color-success); }
.modal-icon.mi-danger  { background: rgba(var(--color-danger-rgb), .1); color: var(--color-danger); }
.modal-icon.mi-warning { background: rgba(var(--color-warning-rgb), .16); color: var(--pill-active-fg); }
.modal-header:has(.modal-icon) { gap: var(--space-3); align-items: flex-start; }
.modal-sub { font-size: .85rem; color: var(--bs-secondary-color); margin-top: 2px; }
.modal-sub.num { font-family: var(--font-mono); }

/* A two- or three-way choice drawn as one control (the decision dialog's Approve | Reject).
   Radio inputs underneath, so the keyboard and forms work as for any radio group. */
.segmented { display: flex; padding: 3px; gap: 3px; background: var(--surface-panel-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
  color: var(--bs-secondary-color); transition: background-color var(--t-micro), color var(--t-micro); }
.segmented input:focus-visible + label { outline: 2px solid var(--color-action); outline-offset: 1px; }
.segmented input:checked + label { background: var(--surface-panel); color: var(--color-action);
  box-shadow: var(--shadow-elevation-1); border: 1px solid var(--color-border); }
.segmented input:checked + label.seg-danger { background: rgba(var(--color-danger-rgb), .1);
  color: var(--color-danger); border-color: rgba(var(--color-danger-rgb), .3); }
.segmented input:checked + label.seg-success { background: rgba(var(--color-success-rgb), .12);
  color: var(--color-success); border-color: rgba(var(--color-success-rgb), .3); }

/* The action sheet's rows in groups (decide, then the rest, then destructive), a rule between. */
.action-group + .action-group { border-top: 1px solid var(--color-rule); }
.action-group .list-group-item { min-height: 48px; }
.action-group.ag-danger .list-group-item { color: var(--color-danger); }
[data-bs-theme="dark"] .action-group.ag-danger .list-group-item { color: var(--color-danger-light); }
@keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes modal-part-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ── 7. Page loader and busy buttons ─ */
/* A bar along the top for real page navigations only, never for in-page fetches. */
.page-loader {
  position: fixed; top: 0; left: 0; height: 4px; width: 0; opacity: 0; pointer-events: none;
  background: var(--color-action); box-shadow: 0 0 8px 1px var(--color-action); z-index: var(--z-tooltip);
  transition: width .4s ease, opacity var(--t-slide);
}
.page-loader.pl-loading { opacity: 1; width: 40%; }
.page-loader.pl-leaving { opacity: 1; width: 80%; }
.page-loader.pl-done    { opacity: 1; width: 100%; }
.page-loader.pl-reset   { transition: none; }
/* The spinner a sending submit button shows left of its text (CRM uiux-rules §4.2). */
.btn .btn-spinner { margin-right: var(--space-2); vertical-align: -.125em; }

/* ── 8. Motion and micro-interactions (uiux-rules.md §4.3) ────────────── */
/* Small, quick and on the motion tokens: each says something happened (a card arrived, a
   press landed, a toast is about to go), none is decoration. Entrances and loops only run
   with prefers-reduced-motion: no-preference - a delayed entrance under the global 1ms rule
   above would still leave a card invisible for its delay. Transforms use the separate
   `translate`/`scale` properties where Bootstrap or Popper own `transform` (dropdowns). */

/* A busy button (vimsUi.busy): the spinner stands in for its icon, the label stays. */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .bi { display: none; }

/* Status dot: a pill that is a record's status (vimsUi.badge) leads with a dot in its tone,
   so the state reads at a glance without leaning on colour alone. */
.status-pill.sp-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: currentColor; flex-shrink: 0; }

/* Hover lifts, on devices that hover only (a phone would keep the lift after a tap). */
@media (hover: hover) {
  a.list-card:hover, .nav-tile:hover, a.stat-tile:hover { translate: 0 -2px; }
  .list-card .lc-chevron { transition: translate var(--t-micro), color var(--t-micro); }
  a.list-card:hover .lc-chevron, .list-card .lc-link:hover ~ .lc-chevron { translate: var(--space-1) 0; color: var(--color-action); }
  .nav-tile .nt-icon { transition: background-color var(--t-standard), color var(--t-standard), scale var(--t-standard); }
  .nav-tile:hover .nt-icon { background: var(--color-action); color: var(--color-white); scale: 1.06; }
  .back-link i { transition: translate var(--t-micro); }
  .back-link:hover i { translate: calc(var(--space-1) * -1) 0; }
  #fab:hover { box-shadow: 0 6px 22px rgba(var(--color-action-rgb), .45); }
}
[data-bs-theme="dark"] .nav-tile:hover .nt-icon { color: var(--color-white); }

/* Rows that change colour on hover ease into it. */
.dropdown-item, .list-group-item-action, .view-tabs .nav-link, .icon-btn {
  transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}

/* Toast countdown: a thin bar in the toast's tone empties over the time it stays, and stops
   while the pointer or focus is on it (ui.js armToast pauses the timer to match). */
.app-toast { position: relative; overflow: hidden; }
.app-toast .t-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left;
  background: var(--color-action); opacity: .55; animation: toast-timer var(--toast-ms, 5s) linear forwards; }
.app-toast.t-success .t-timer { background: var(--color-success); }
.app-toast:hover .t-timer, .app-toast:focus-within .t-timer { animation-play-state: paused; }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Lists and tiles rise in, one after another: a fresh page of results reads as new. */
  .list-stack > .list-card, .list-stack > .record-card, .stat-grid > .stat-tile, .nav-tiles > .nav-tile,
  #vimsActionList > .list-group-item {
    animation: rise-in var(--t-slide) backwards;
    animation-delay: calc(min(var(--stagger-i, 0), var(--stagger-max)) * var(--stagger-step));
  }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(2) { --stagger-i: 1; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(3) { --stagger-i: 2; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(4) { --stagger-i: 3; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(5) { --stagger-i: 4; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(6) { --stagger-i: 5; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(7) { --stagger-i: 6; }
  :is(.list-stack, .stat-grid, .nav-tiles, #vimsActionList) > :nth-child(n+8) { --stagger-i: 7; }
  @keyframes rise-in { from { opacity: 0; translate: 0 var(--space-2); } to { opacity: 1; translate: none; } }

  /* Menus drop in from their button. */
  .dropdown-menu.show { animation: menu-in var(--t-standard) backwards; }
  @keyframes menu-in { from { opacity: 0; translate: 0 calc(var(--space-1) * -1); } to { opacity: 1; translate: none; } }

  /* An empty state's icon settles in, so a list that came back empty doesn't look broken. */
  .empty-state > i { animation: pop-in var(--t-slide) backwards; }
  .empty-state > .es-title, .empty-state > .es-sub { animation: rise-in var(--t-slide) var(--stagger-step) backwards; }
  @keyframes pop-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }

  /* An error page's icon settles in like an empty state's. */
  .vims-error-code > i { display: inline-block; animation: pop-in var(--t-slide) backwards; }

  /* The FAB arrives with the page. */
  #fab { animation: pop-in var(--t-slide) calc(var(--stagger-step) * 3) backwards; }

  /* An icon that just changed meaning (the theme toggle) turns once. */
  .icon-pop { animation: icon-pop var(--t-slide); }
  @keyframes icon-pop { 0% { rotate: -90deg; scale: .6; opacity: 0; } 100% { rotate: 0deg; scale: 1; opacity: 1; } }

  /* A field marked wrong shakes once and its message fades in, so the eye goes to it. */
  .form-control.is-invalid, .form-select.is-invalid { animation: field-shake var(--t-slide); }
  .is-invalid ~ .invalid-feedback { animation: rise-in var(--t-standard) backwards; }
  @keyframes field-shake {
    20%, 60% { translate: calc(var(--space-1) * -1) 0; }
    40%, 80% { translate: var(--space-1) 0; }
  }

  /* "Show more" content opens downward rather than appearing. */
  details[open] > :not(summary) { animation: rise-in var(--t-standard) backwards; }

  /* Waiting on someone (a request awaiting approval): at the top of a record's page only,
     the dot breathes. Not in lists, where twenty of them would be noise. */
  .page-header .sp-active.sp-dot::before, .identity-hero .sp-active.sp-dot::before { animation: dot-breathe var(--dur-breathe) ease-in-out infinite; }
  @keyframes dot-breathe { 50% { opacity: .35; } }
}
@media (prefers-reduced-motion: reduce) { .app-toast .t-timer { display: none; } }


/* ── 9. VIMS components ───────────────────────────────────────────────── */
/* Screens still on their own sticky bars (position-sticky bottom-0, IMSPRT-76) ride above the
   bottom nav on a phone until each moves to the action bar. */
.position-sticky.bottom-0 {
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: var(--z-action-bar);
}
@media (max-width: 991.98px) {
  .position-sticky.bottom-0 { bottom: var(--bottom-nav-height) !important; }
  /* Field screens are used one-handed on a branch floor: full-size tap targets. */
  .position-sticky.bottom-0 .btn { min-height: 48px; }
}

/* A record's tabs (Collateral view): pills that wrap, never scroll, so none is out of sight on
   a phone (AUFLUENCE's in-page tabs); each a 44px target. */
/* Index tabs along a ledger rule: they wrap rather than scroll, so none is out of sight on a
   phone, and each is a 44px target. The open tab is underlined in lapis. */
.view-tabs { gap: 0 var(--space-1); border-bottom: 1px solid var(--color-border); }
.view-tabs .nav-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  padding: 0 var(--space-3); font-weight: 600; font-size: .92rem; }
.view-tabs .nav-link:not(.active) { background: none; color: var(--bs-secondary-color); }
.view-tabs .nav-link:not(.active):hover { color: var(--bs-body-color); }
.view-tabs .nav-link.active, .view-tabs .nav-link.active:hover { background: none; color: var(--bs-body-color);
  border-bottom-color: var(--color-action); }
[data-bs-theme="dark"] .view-tabs .nav-link.active { border-bottom-color: var(--color-action-lighter); }
.view-tabs .nav-link .badge { font-family: var(--font-mono); font-weight: 500; }
@media (max-width: 575.98px) { .view-tabs .nav-link { padding: 0 var(--space-2); font-size: .88rem; } }

/* ── Assay Ledger pieces (IMSPRT-125) ─ */
/* The record's number in a double-ruled gold cartouche, like a stamped serial. */
.serial { display: inline-flex; flex-direction: column; gap: 2px; border: 3px double var(--color-brand);
  border-radius: 2px; padding: var(--space-1) var(--space-3) 6px; background: var(--surface-panel); min-width: 0; }
.serial .serial-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bs-secondary-color); }
.serial .serial-no { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 500; letter-spacing: .03em;
  line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .serial .serial-no { font-size: 1.25rem; } }
/* A record's status at the head of its page: an inked stamp, square and slightly askew. */
.status-stamp { background: transparent !important; border: 1.5px solid currentColor; border-radius: 3px;
  padding: 5px 10px; letter-spacing: .14em; rotate: -3deg; }
.status-stamp.sp-dot::before { display: none; }

/* The figures strip: a record's few numbers that matter, side by side on one ruled panel. */
.ledger-figs { display: grid; grid-template-columns: repeat(var(--fig-cols, 4), minmax(0, 1fr));
  background: var(--surface-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-4); }
.ledger-figs .lf { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--color-rule); min-width: 0;
  display: flex; flex-direction: column; gap: 2px; }
.ledger-figs .lf:first-child { border-left: 0; }
.ledger-figs .lf-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-secondary-color); }
.ledger-figs .lf-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.4rem;
  font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.ledger-figs .lf-value small { font-size: .78rem; color: var(--bs-secondary-color); margin-left: 2px; }
.ledger-figs .lf-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.ledger-figs .lf.gold .lf-value { color: var(--color-brand); }
.ledger-figs .lf.warn .lf-value { color: var(--pill-active-fg); }
@media (max-width: 767.98px) {
  .ledger-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-figs .lf:nth-child(odd) { border-left: 0; }
  .ledger-figs .lf:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .ledger-figs .lf-value { font-size: 1.2rem; }
}

/* A ruled ledger table: small-caps heads on the panel's second tone, figures right-aligned. */
.ledger-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0; }
.ledger-table th { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left;
  color: var(--bs-secondary-color); background: var(--surface-panel-2); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.ledger-table td { padding: 10px var(--space-4); border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table .r { text-align: right; }
.ledger-table td.r { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger-table tfoot td { font-weight: 600; background: var(--surface-panel-2); border-top: 1px solid var(--color-border); }

/* A small mark beside an ornament: its purity and hallmark, or a damage. */
.mark-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .75rem; font-weight: 600;
  padding: 1px var(--space-2); border-radius: var(--radius-xl); white-space: nowrap; }
.mark-chip.mc-hallmark { background: rgba(var(--color-brand-rgb), .13); color: var(--color-brand); font-family: var(--font-mono); font-weight: 500; }
.mark-chip.mc-damage { background: var(--pill-lost-bg); color: var(--pill-lost-fg); }

/* A single-column form that would read too wide on a desktop. */
.vims-form-narrow { max-width: 40rem; }

/* Error pages */
.vims-error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.vims-error-page .vims-error-code { font-family: var(--font-heading); font-size: 4rem; font-weight: 400;
  color: var(--bs-secondary-color); }

/* Location picker (IMSPRT-48) */
.vims-location-picker { position: relative; }
.vims-location-panel { position: absolute; z-index: var(--z-dropdown); width: 100%; max-height: 24rem; overflow-y: auto; }
/* A fixed-width stand-in for the expand/collapse control on leaf rows, so names stay aligned
   down the tree instead of stepping left at every leaf. */
.vims-location-toggle, .vims-location-toggle-spacer { display: inline-block; width: 1.25rem; flex: 0 0 1.25rem;
  text-align: center; text-decoration: none; }
.vims-location-row { padding-block: var(--space-1); }

.vims-upload-preview img { max-height: 6rem; width: auto; }

/* The scanner's video element is injected by html5-qrcode, which sizes it to the camera frame;
   without this it can overflow a narrow card. */
.vims-qr-reader { max-width: 100%; }
.vims-qr-reader video { max-width: 100%; height: auto; }
@media (max-width: 575.98px) { .vims-qr-reader { width: 100% !important; } }

/* The viewfinder over the camera (partials/qr_scanner.html), driven by the stage's
   data-scan-state from qr-scanner.js: starting -> scanning -> captured, or idle/error. It sits
   exactly over the library's scan box (--qr-box), whose own white corners it replaces. */
.vims-qr-stage {
  position: relative;
  --qr-box: 200px;     /* the library's qrbox; qr-scanner.js sets the real one */
  --qs-arm: 28px;      /* how far each corner bracket reaches along the box's edge */
  --qs-weight: 3px;    /* the brackets' stroke */
  --qs-ink: var(--color-brand-light);
}
.vims-qr-stage [id="qr-shaded-region"] > div { display: none; }
.qr-sight { position: absolute; left: 50%; top: 50%; width: var(--qr-box); height: var(--qr-box);
  max-width: calc(100% - var(--space-4)); max-height: calc(100% - var(--space-4));
  translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity var(--t-standard); }
.vims-qr-stage:is([data-scan-state="starting"], [data-scan-state="scanning"], [data-scan-state="captured"]) .qr-sight { opacity: 1; }
.qs-corner { position: absolute; width: var(--qs-arm); height: var(--qs-arm); border: 0 solid var(--qs-ink);
  filter: drop-shadow(0 0 var(--space-1) rgba(var(--color-black-rgb), .5));
  transition: translate var(--t-slide), border-color var(--t-standard); }
.qs-tl { top: 0; left: 0; border-top-width: var(--qs-weight); border-left-width: var(--qs-weight); border-top-left-radius: var(--radius-md); }
.qs-tr { top: 0; right: 0; border-top-width: var(--qs-weight); border-right-width: var(--qs-weight); border-top-right-radius: var(--radius-md); }
.qs-bl { bottom: 0; left: 0; border-bottom-width: var(--qs-weight); border-left-width: var(--qs-weight); border-bottom-left-radius: var(--radius-md); }
.qs-br { bottom: 0; right: 0; border-bottom-width: var(--qs-weight); border-right-width: var(--qs-weight); border-bottom-right-radius: var(--radius-md); }
.qs-beam { position: absolute; top: 0; left: var(--space-2); right: var(--space-2); height: 2px;
  border-radius: var(--radius-xl); background: var(--qs-ink); opacity: 0;
  box-shadow: 0 0 var(--space-3) var(--space-1) rgba(var(--color-brand-light-rgb), .45); transition: opacity var(--t-standard); }
.qs-tick { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 56px; height: 56px; /* a tick big enough to read across the camera feed */
  border-radius: var(--radius-circle); background: var(--color-success); color: var(--color-white);
  font-size: 1.75rem; opacity: 0; scale: .5; transition: opacity var(--t-standard), scale var(--t-slide); }
/* Read: the corners close on the label in green and the tick lands. */
.vims-qr-stage[data-scan-state="captured"] { --qs-ink: var(--color-success-light); }
.vims-qr-stage[data-scan-state="captured"] .qs-tl { translate: var(--space-2) var(--space-2); }
.vims-qr-stage[data-scan-state="captured"] .qs-tr { translate: calc(var(--space-2) * -1) var(--space-2); }
.vims-qr-stage[data-scan-state="captured"] .qs-bl { translate: var(--space-2) calc(var(--space-2) * -1); }
.vims-qr-stage[data-scan-state="captured"] .qs-br { translate: calc(var(--space-2) * -1) calc(var(--space-2) * -1); }
.vims-qr-stage[data-scan-state="captured"] .qs-tick { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* The corners settle in from just outside the box, then wait gently on the camera. */
  .vims-qr-stage[data-scan-state="starting"] .qs-corner {
    animation: qs-settle var(--t-slide) backwards, dot-breathe var(--dur-breathe) ease-in-out var(--dur-slide) infinite; }
  .vims-qr-stage[data-scan-state="starting"] .qs-tr { --qs-from: var(--space-3) calc(var(--space-3) * -1); }
  .vims-qr-stage[data-scan-state="starting"] .qs-tl { --qs-from: calc(var(--space-3) * -1) calc(var(--space-3) * -1); }
  .vims-qr-stage[data-scan-state="starting"] .qs-bl { --qs-from: calc(var(--space-3) * -1) var(--space-3); }
  .vims-qr-stage[data-scan-state="starting"] .qs-br { --qs-from: var(--space-3) var(--space-3); }
  @keyframes qs-settle { from { opacity: 0; translate: var(--qs-from); } }
  /* Looking: the line sweeps down and back up the box, slowing at each edge. */
  .vims-qr-stage[data-scan-state="scanning"] .qs-beam {
    opacity: 1; animation: qs-sweep var(--dur-sweep) ease-in-out infinite alternate; }
  @keyframes qs-sweep { from { top: var(--space-2); } to { top: calc(100% - var(--space-2)); } }
  /* Read: the box gives one soft pulse as the corners close. */
  .vims-qr-stage[data-scan-state="captured"] .qr-sight { animation: qs-lock var(--dur-slide) ease-out; }
  @keyframes qs-lock { 50% { scale: 1.04; } }
}

/* Top-bar language picker: as narrow as its longest name. */
.vims-lang-select { width: auto; }

/* The brand above the sign-in card: the gold mark, the name in the heading font. */
.bare-brand { color: var(--bs-body-color); }
.bare-brand .bi { color: var(--color-brand); }
.bare-brand .brand-mark { border-color: var(--color-brand); color: var(--color-brand); }
.bare-brand .brand-name small { color: var(--bs-secondary-color); }

/* The open drawer and its backdrop sit above the top bar, bottom nav and FAB, so the brand
   and who is signed in are not hidden under the top bar on a phone. */
@media (max-width: 991.98px) {
  .sidebar-open #vimsSidebar { z-index: var(--z-dropdown); }
  .sidebar-open #sidebarBackdrop { z-index: calc(var(--z-dropdown) - 1); }
}
/* The drawer's language picker (phones; the top bar has it from lg up). */
.sidebar-language .vims-lang-select { width: 100%; }

/* The sidebar's role under the user's branch. */
.sidebar-user .who .role { color: var(--color-brand-light); font-size: .75rem; font-weight: 600; }

/* Audit report (audits/report.html): an audit beside the valuation it re-measured. "ar-" for
   audit report. Two sides read left (appraised) to right (audited) at every width, so the eye
   compares across, never down. */
.ar-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.ar-side { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3);
  background: var(--bs-body-bg); min-width: 0; }
.ar-side.ar-audit { border-top: 3px solid var(--color-brand); }
.ar-side.ar-baseline { border-top: 3px solid var(--color-n400); }
.ar-side .ar-who { font-weight: 700; overflow-wrap: anywhere; }
.ar-side .ar-when, .ar-side .ar-where { font-size: .8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }

/* A tile's audited figure, what it was, and the change between. */
.stat-tile .ar-was { font-size: .78rem; color: var(--bs-secondary-color); margin-top: var(--space-1); }
.ar-delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: .78rem;
  font-weight: 500; border-radius: var(--radius-sm); padding: 0 var(--space-1); white-space: nowrap; }
.ar-delta.down { color: var(--color-danger); background: rgba(var(--color-danger-rgb), .1); }
.ar-delta.up { color: var(--color-action); background: rgba(var(--color-action-rgb), .1); }
.ar-delta.same { color: var(--bs-secondary-color); background: rgba(var(--color-black-rgb), .04); }
[data-bs-theme="dark"] .ar-delta.down { color: var(--color-danger-light); }
[data-bs-theme="dark"] .ar-delta.up { color: var(--color-action-lighter); }
[data-bs-theme="dark"] .ar-delta.same { background: rgba(var(--color-white-rgb), .06); }

/* One ornament: photos then the figures on a phone, side by side from lg. */
.ar-ornament .ar-body { display: grid; gap: var(--space-4); }
@media (min-width: 992px) { .ar-ornament .ar-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ar-photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.ar-photo { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; background: var(--surface-page); aspect-ratio: 4 / 3; }
.ar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-photo .ar-photo-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-n400); font-size: 1.75rem; }
.ar-photo .ar-photo-tag { position: absolute; left: var(--space-1); bottom: var(--space-1); font-size: .75rem;
  font-weight: 700; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-white);
  background: rgba(var(--color-black-rgb), .6); }
.ar-photo .ar-photo-more { position: absolute; right: var(--space-1); top: var(--space-1); font-size: .75rem;
  font-weight: 700; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-white);
  background: rgba(var(--color-black-rgb), .6); }

/* The comparison grid: a table's reading order without a table's sideways scroll on a phone
   (uiux-rules.md §5) - four columns that always fit. */
.ar-cmp { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); font-size: .85rem; }
.ar-cmp > div { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-border); min-width: 0;
  overflow-wrap: anywhere; }
.ar-cmp .ar-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); }
.ar-cmp .ar-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ar-cmp .ar-param { color: var(--bs-secondary-color); font-weight: 500; }
.ar-cmp .ar-changed { background: rgba(var(--color-warning-rgb), .1); }
.ar-cmp .ar-flag { background: rgba(var(--color-danger-rgb), .1); }

/* The gallery: both sides' photos in two columns, appraised left, audited right. */
.ar-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.ar-gallery figure { margin: 0 0 var(--space-3); }
.ar-gallery img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.ar-gallery figcaption { font-size: .75rem; color: var(--bs-secondary-color); margin-top: var(--space-1); }

/* Home's work queue (IMSPRT-125): what is waiting on the person as ruled rows, the count first
   in its tone; the counts at zero are set aside on one quiet line below, so the eye goes only
   to work there is. */
.home-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 992px) { .home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.queue-panel { background: var(--surface-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.queue-panel .qp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-rule); }
.queue-panel .qp-head h2 { font-size: 1.3rem; margin: 0; }
.queue-row { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-rule); color: var(--bs-body-color); text-decoration: none;
  transition: background-color var(--t-micro); }
.queue-row:last-of-type { border-bottom: 0; }
a.queue-row:hover { background: var(--surface-panel-2); color: var(--bs-body-color); }
/* The count in ink; its urgency is the row's left edge and the tint of its icon (IMSPRT-128). */
.queue-row .qr-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 500;
  min-width: 2.5ch; text-align: right; color: var(--bs-emphasis-color); }
.queue-row { border-left: 3px solid transparent; }
.queue-row.qr-success { border-left-color: var(--color-success); }
.queue-row.qr-warning { border-left-color: var(--color-warning); }
.queue-row.qr-danger  { border-left-color: var(--color-danger); }
.queue-row .qr-label { flex: 1; min-width: 0; font-weight: 600; }
.queue-row .lc-chevron { color: var(--color-n400); }
.queue-clear { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4);
  background: var(--surface-panel-2); color: var(--bs-secondary-color); font-size: .875rem; border-top: 1px solid var(--color-rule); }
.queue-clear .bi { color: var(--color-success); }
[data-bs-theme="dark"] .queue-clear .bi { color: var(--color-success-light); }
/* Quick links beside the queue: a short list of tap rows, not a wall of tiles. */
.quick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 992px) { .quick-list { grid-template-columns: minmax(0, 1fr); } }
.quick-list a { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-3);
  background: var(--surface-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--bs-body-color); text-decoration: none; font-weight: 600; font-size: .92rem; }
.quick-list a:hover { border-color: var(--color-action-light); color: var(--bs-body-color); }
/* On a phone each link is a tile, its icon above the label. */
@media (max-width: 991.98px) {
  .quick-list a { flex-direction: column; justify-content: center; text-align: center; min-height: 88px;
    gap: var(--space-2); color: var(--color-action); }
  .quick-list a .bi { font-size: 1.4rem; }
}
/* A field operator's live trip, above the queue: the whole card opens the trip. */
.trip-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); background: var(--surface-panel); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning); border-radius: var(--radius-md); color: var(--bs-body-color);
  text-decoration: none; min-height: 64px; }
.trip-banner:hover { background: var(--surface-panel-2); color: var(--bs-body-color); }
.trip-banner .tb-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-circle); display: inline-flex;
  align-items: center; justify-content: center; background: rgba(var(--color-warning-rgb), .16); color: var(--pill-active-fg); }
.trip-banner .tb-title { font-weight: 600; }
.trip-banner .tb-sub { font-size: .85rem; color: var(--bs-secondary-color); }
.trip-banner .tb-go { margin-left: auto; color: var(--color-action); font-weight: 600; white-space: nowrap; }
.quick-list a .bi { color: var(--color-action); font-size: 1.15rem; }
[data-bs-theme="dark"] .quick-list a .bi { color: var(--color-action-lighter); }
@media (prefers-reduced-motion: no-preference) {
  .queue-panel > .queue-row { animation: rise-in var(--t-slide) backwards; }
}

/* A search form's filters in labelled groups (IMSPRT-125): one column on a phone, two from lg. */
.search-sections { display: grid; gap: var(--space-5); }
@media (min-width: 992px) { .search-sections { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); } }
.search-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.search-section > legend { float: none; width: 100%; font-size: .75rem; margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-rule); }

/* The totals bar (ui.totals_bar): running figures beside the commit button, in the action bar's
   place. The figures keep their size; the button takes what is left. */
.totals-bar .action-bar-inner { align-items: center; }
.totals-bar .ab-figures { display: flex; gap: var(--space-5); margin: 0 auto 0 0; min-width: 0; }
.totals-bar .ab-figures dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-secondary-color); }
.totals-bar .ab-figures dd { margin: 0; font-size: 1.1rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 992px) {
  .totals-bar { background: var(--surface-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); }
}
@media (max-width: 991.98px) {
  .totals-bar .ab-figures { gap: var(--space-4); }
  .totals-bar .ab-figures dd { font-size: 1rem; }
  .totals-bar .ab-primary { flex: 0 1 auto; }
}
/* A back control that is a button (ui.page_header back_id) reads like the link it stands for. */
.back-link.btn { font-weight: 400; font-size: .82rem; border: 0; color: var(--bs-secondary-color); text-transform: none; }
.back-link.btn:hover { color: var(--color-action); }
@media (max-width: 991.98px) { .back-link.btn { min-width: 0; } }

/* A narrow form's own action bar keeps to the form's width on a desktop, so the commit button
   ends where the form does rather than at the far edge of the screen. */
@media (min-width: 992px) { .vims-form-narrow ~ .action-bar { max-width: 40rem; } }

/* Sign-in and the other shell-less pages (base.html .login-shell): one narrow card on stamp
   paper, the gold seal and the name above it. */
.login-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: repeating-radial-gradient(circle at 50% 30%, transparent 0 13px, var(--color-guilloche) 13px 14px), var(--surface-page); }
.login-shell .bare-wrap { width: 100%; max-width: 26rem; }
.login-shell .card { border-top: 3px double var(--color-brand); box-shadow: var(--shadow-elevation-2); }
.bare-brand .brand-mark { width: 40px; height: 40px; font-size: 1.25rem; border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; }
.bare-brand .brand-name { font-size: 1.4rem; }
.login-shell h1 { font-size: 1.7rem; }
main.page.login-shell { max-width: none; }

/* ── 10. Engraving and motion (IMSPRT-127, uiux-rules.md §4.3) ─────────── */
/* The guilloche rosette (static/img/rosette.svg, tools/make_rosette.py): the engraving of
   stamp paper, faint behind the few surfaces that are the app's own - never behind data. */
:root { --rosette: url("../img/rosette.svg"); --rosette-faint: .09; --rosette-sidebar: .14; }
[data-bs-theme="dark"] { --rosette-faint: .07; }
/* The sidebar: a watermark under who is signed in, as on a banknote's corner. */
#vimsSidebar { isolation: isolate; }  /* already positioned: sticky, or fixed as the phone drawer */
#vimsSidebar::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 360px; height: 360px;
  left: -90px; bottom: -120px; background: var(--rosette) center / contain no-repeat; opacity: var(--rosette-sidebar); }
/* Home's greeting and the sign-in card carry the rosette at their right. */
.welcome-hero { position: relative; isolation: isolate; overflow: hidden; }
.welcome-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 300px; height: 300px;
  right: 40px; top: -120px; background: var(--rosette) center / contain no-repeat; opacity: var(--rosette-faint); }
.login-shell { position: relative; isolation: isolate; overflow: hidden; }
.login-shell::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(780px, 160vw);
  aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; background: var(--rosette) center / contain no-repeat;
  opacity: var(--rosette-faint); }
/* An empty state or error page: its icon sits in a gold-ruled seal on a small rosette. */
.empty-state > i, .vims-error-code > i { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; margin-inline: auto; border-radius: var(--radius-circle);
  border: 1.5px solid rgba(var(--color-brand-rgb), .45); color: var(--color-brand); font-size: 2.1rem;
  background: var(--rosette) center / 118% no-repeat, var(--surface-panel); }
.vims-error-code > i { width: 72px; height: 72px; font-size: 1.8rem; vertical-align: middle; }

/* Icons beside a figure's label and a packet's name. */
.ledger-figs .lf-label .bi { color: var(--color-brand); margin-right: 2px; }
.ledger-figs .lf.warn .lf-label .bi { color: var(--pill-active-fg); }
.packet-mark { color: var(--color-brand); font-size: 1.1rem; }
/* Home's queue rows lead with the kind of work in a ruled circle. */
.queue-row .qr-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border);
  color: var(--bs-secondary-color); background: var(--surface-panel-2); }
.queue-row.qr-success .qr-icon { background: rgba(var(--color-success-rgb), .12); color: var(--color-success); border-color: transparent; }
.queue-row.qr-warning .qr-icon { background: rgba(var(--color-warning-rgb), .16); color: var(--pill-active-fg); border-color: transparent; }
.queue-row.qr-danger .qr-icon  { background: rgba(var(--color-danger-rgb), .1); color: var(--color-danger); border-color: transparent; }
[data-bs-theme="dark"] .queue-row.qr-success .qr-icon { color: var(--color-success-light); }
[data-bs-theme="dark"] .queue-row.qr-danger .qr-icon { color: var(--color-danger-light); }
/* A button that just did its job (vimsUi.confirmDone): its tick in the success colour. */
.is-done .bi-check2 { color: var(--color-success); }
[data-bs-theme="dark"] .is-done .bi-check2 { color: var(--color-success-light); }

/* Index tabs: the open tab's lapis rule draws out from its centre. */
.view-tabs .nav-link { position: relative; border-bottom-color: transparent !important; }
.view-tabs .nav-link::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px;
  height: 2px; background: var(--color-action); scale: 0 1; transition: scale var(--t-standard); }
[data-bs-theme="dark"] .view-tabs .nav-link::after { background: var(--color-action-lighter); }
.view-tabs .nav-link.active::after { scale: 1 1; }
/* The sidebar's active item: a gold mark at its edge. */
#vimsSidebar .nav-link::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: var(--radius-sm); background: var(--color-brand-light); scale: 1 0; transition: scale var(--t-standard); }
#vimsSidebar .nav-link.active::before { scale: 1 1; }
/* Ledger rows: the row under the pointer is lit and marked in gold at its edge. */
.ledger-table tbody tr { transition: background-color var(--t-micro), box-shadow var(--t-micro); }
.ledger-table tbody tr[role="button"] { cursor: pointer; }

@media (hover: hover) {
  .ledger-table tbody tr[role="button"]:hover { background: var(--surface-panel-2);
    box-shadow: inset 3px 0 0 var(--color-brand-light); }
  .queue-row .lc-chevron { transition: translate var(--t-micro), color var(--t-micro); }
  a.queue-row:hover .lc-chevron { translate: var(--space-1) 0; color: var(--color-action); }
  a.queue-row:hover .qr-icon { color: var(--color-action); border-color: var(--color-action-light); }
  #vimsSidebar .nav-link i { transition: translate var(--t-micro), color var(--t-micro); }
  #vimsSidebar .nav-link:hover i { translate: 2px 0; color: var(--color-brand-light); }
  .view-tabs .nav-link:not(.active):hover::after { scale: .35 1; opacity: .5; }
  .quick-list a .bi { transition: scale var(--t-micro); }
  .quick-list a:hover .bi { scale: 1.12; }
  .serial { transition: box-shadow var(--t-standard); }
  .serial:hover { box-shadow: 0 0 0 4px rgba(var(--color-brand-rgb), .1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* The status stamp inks onto the record once it has drawn: pressed down, then lifted. */
  .status-stamp { animation: stamp-in 420ms cubic-bezier(.2, .9, .3, 1.25) 180ms backwards; }
  @keyframes stamp-in {
    0% { opacity: 0; scale: 1.7; rotate: -12deg; }
    60% { opacity: 1; scale: .94; rotate: -2deg; }
    100% { opacity: 1; scale: 1; rotate: -3deg; }
  }
  /* The serial settles into its cartouche, like a number struck into metal. */
  .serial .serial-no { animation: serial-strike var(--t-slide) backwards; }
  @keyframes serial-strike { from { opacity: 0; letter-spacing: .22em; } to { opacity: 1; } }
  /* A record's figures and a packet's ornament lines arrive one after another. */
  .ledger-figs > .lf, .ledger-table tbody > tr { animation: rise-in var(--t-slide) backwards;
    animation-delay: calc(min(var(--stagger-i, 0), var(--stagger-max)) * var(--stagger-step)); }
  :is(.ledger-figs, .ledger-table tbody) > :nth-child(2) { --stagger-i: 1; }
  :is(.ledger-figs, .ledger-table tbody) > :nth-child(3) { --stagger-i: 2; }
  :is(.ledger-figs, .ledger-table tbody) > :nth-child(4) { --stagger-i: 3; }
  :is(.ledger-figs, .ledger-table tbody) > :nth-child(n+5) { --stagger-i: 4; }
  /* Home's queue rows and packets on a record follow the same rhythm. */
  .queue-panel > .queue-row:nth-child(2) { animation-delay: var(--stagger-step); }
  .queue-panel > .queue-row:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
  #packetList > .card { animation: rise-in var(--t-slide) backwards; }
  #packetList > .card:nth-child(2) { animation-delay: calc(var(--stagger-step) * 2); }
  #packetList > .card:nth-child(n+3) { animation-delay: calc(var(--stagger-step) * 4); }
  /* The rosette behind sign-in turns, very slowly - the one ambient motion, on a page with
     nothing else to watch. */
  .login-shell::before { animation: rosette-turn 240s linear infinite; }
  @keyframes rosette-turn { to { rotate: 360deg; } }
}

/* ── 11. Collateral and ornament screens (IMSPRT-128) ─────────────────── */
/* A line of guidance under the page title, saying what the screen does. */
.page-intro { color: var(--bs-secondary-color); font-size: .95rem; margin-bottom: var(--space-4); max-width: 44rem; }
/* A form in ruled panels, each headed in the heading face with a hairline running out after it. */
.ruled-head { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading); font-weight: 400;
  font-size: 1.15rem; margin: 0 0 var(--space-3); }
.ruled-head::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
/* A screen with a quiet panel beside its form on a desktop (what you searched, what happens next). */
@media (min-width: 992px) {
  .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-6); align-items: start; }
  .with-aside > .aside-panel { position: sticky; top: calc(var(--navbar-height) + var(--space-4)); }
}
@media (max-width: 991.98px) { .with-aside > .aside-panel { display: none; } }
.aside-panel .ruled-head::after { display: none; }
.aside-panel .ruled-head { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps-list li { display: flex; gap: var(--space-3); align-items: flex-start; counter-increment: step; font-size: .92rem; }
.steps-list li::before { content: counter(step); flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .75rem;
  border: 1px solid var(--color-border); color: var(--bs-secondary-color); }
.steps-list li:first-child::before { background: var(--color-action); border-color: var(--color-action); color: var(--color-white); }

/* A group of search filters that folds away (search collateral): a summary row with its icon,
   how many of its fields are set, and a chevron. */
.filter-card { background: var(--surface-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); }
.filter-card > summary { list-style: none; display: flex; align-items: center; gap: var(--space-3); min-height: 56px;
  padding: var(--space-2) var(--space-4); cursor: pointer; }
.filter-card > summary::-webkit-details-marker { display: none; }
.filter-card > summary > .bi:first-child { color: var(--color-action); font-size: 1.05rem; }
.filter-card .fc-title { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.2; }
.filter-card .fc-sub { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.filter-card .fc-count { margin-left: auto; font-family: var(--font-mono); font-size: .75rem; white-space: nowrap;
  color: var(--bs-secondary-color); }
.filter-card .fc-count.is-set { color: var(--color-action); background: rgba(var(--color-action-rgb), .1);
  padding: 1px var(--space-2); border-radius: var(--radius-xl); }
.filter-card > summary .fc-chevron { transition: rotate var(--t-standard); color: var(--bs-secondary-color); }
.filter-card[open] > summary .fc-chevron { rotate: 180deg; }
.filter-card[open] > summary { border-bottom: 1px solid var(--color-rule); }
.filter-card .fc-body { padding: var(--space-4); }
[data-bs-theme="dark"] .filter-card > summary > .bi:first-child,
[data-bs-theme="dark"] .filter-card .fc-count.is-set { color: var(--color-action-lighter); }
/* A filter the results were found with, named above the list. */
.filter-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); font-size: .85rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--surface-panel); }
.found-count { font-family: var(--font-mono); font-size: .85rem; color: var(--bs-secondary-color); }
/* A count riding on a commit button (how many collaterals are ticked). */
.btn-count { display: inline-block; min-width: 1.4rem; margin-left: var(--space-2); padding: 0 6px; border-radius: var(--radius-xl);
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.4rem; background: var(--color-white); color: var(--color-action); }

/* A choice of two or three with a line of explanation each, drawn as cards (appraisal type). */
.choice-cards { display: grid; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 992px) { .choice-cards { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-3); border: 0; overflow: visible; } }
.choice-cards input { position: absolute; opacity: 0; pointer-events: none; }
.choice-cards label { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-3);
  cursor: pointer; background: var(--surface-panel); }
.choice-cards label + input + label, .choice-cards input + label ~ label { border-top: 1px solid var(--color-rule); }
@media (min-width: 992px) {
  .choice-cards label { border: 1px solid var(--color-border) !important; border-radius: var(--radius-md); }
}
.choice-cards label::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-n400); background: var(--surface-panel); }
.choice-cards input:checked + label { background: rgba(var(--color-action-rgb), .07); }
@media (min-width: 992px) { .choice-cards input:checked + label { border-color: var(--color-action) !important; } }
.choice-cards input:checked + label::before { border-color: var(--color-action); box-shadow: inset 0 0 0 4px var(--surface-panel);
  background: var(--color-action); }
.choice-cards input:focus-visible + label { outline: 2px solid var(--color-action); outline-offset: -2px; }
.choice-cards .cc-title { display: block; font-weight: 500; }
.choice-cards .cc-sub { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.choice-cards.is-invalid { border-color: var(--color-danger); }
/* Who is doing this: their initials and name, read-only. */
.who-row { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule); }
.who-row .initials { width: 44px; height: 44px; }
.who-row .wr-label { font-size: .78rem; color: var(--bs-secondary-color); }

/* The packet editor (collateral details) and the record's ornaments: each ornament a row with
   its mark, its chips, and its figures - a list on a phone, a ledger table from md. */
.orn-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--surface-panel-2); display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-brand); font-size: 1.15rem; overflow: hidden; }
.orn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ledger-table .orn-thumb { width: 36px; height: 36px; }
.orn-list { list-style: none; margin: 0; padding: 0; }
.orn-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule); color: var(--bs-body-color); text-decoration: none; }
.orn-row:last-child { border-bottom: 0; }
.orn-row[role="button"] { cursor: pointer; }
.orn-row .or-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.orn-row .or-name { font-weight: 500; }
.orn-row .or-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.orn-row .or-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.orn-row .or-figs { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orn-row .or-figs .gold-fig { display: block; font-weight: 500; }
.orn-row .or-figs small { font-size: .8rem; color: var(--bs-secondary-color); }
@media (hover: hover) {
  .orn-row[role="button"]:hover { background: var(--surface-panel-2); box-shadow: inset 3px 0 0 var(--color-brand-light); }
}
/* A packet's own line under its tabs: its label id, what it holds, re-scan and delete. */
.packet-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-rule); font-size: .85rem; }
.packet-strip .ps-id { font-family: var(--font-mono); color: var(--bs-secondary-color); }
.packet-strip .ps-sum { font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 767.98px) { .packet-strip .ps-sum { order: 3; width: 100%; } .packet-strip .ps-id { margin-right: auto; } }
@media (min-width: 768px) { .packet-strip .ps-sum { margin-left: auto; } }
.packet-tabs-row { display: flex; align-items: flex-end; gap: var(--space-2); margin-bottom: 0; }
.packet-tabs-row .view-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.packet-tabs-row + .card { border-top-left-radius: 0; }
.view-tabs .tab-empty-dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--color-warning); }
/* "Add ornament to Packet 1": a dashed full-width call to add the next line. */
.btn-add-line { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 48px;
  border: 1.5px dashed rgba(var(--color-action-rgb), .55); border-radius: var(--radius-md); background: transparent;
  color: var(--color-action); font-weight: 500; text-decoration: none; }
.btn-add-line:hover { background: rgba(var(--color-action-rgb), .06); color: var(--color-action); }
[data-bs-theme="dark"] .btn-add-line { color: var(--color-action-lighter); border-color: rgba(var(--color-action-lighter-rgb), .55); }

/* Photo tiles (ornament form, damage, popup) and the dashed tile that adds one. */
.photo-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.photo-tile { position: relative; width: 72px; height: 72px; }
.photo-tile > button:first-child, .add-tile { width: 72px; height: 72px; padding: 0; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.photo-tile > button:first-child { border: 1px solid var(--color-border); background: var(--surface-panel-2); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .pt-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0;
  border-radius: var(--radius-circle); background: rgba(var(--color-white-rgb), .85); color: var(--color-n900);
  display: inline-flex; align-items: center; justify-content: center; }
.photo-tile .pt-remove::after { content: ""; position: absolute; inset: -10px; } /* a 44px target */
.photo-tile .pt-tag { position: absolute; left: 4px; bottom: 4px; font-size: .7rem; padding: 0 4px; border-radius: var(--radius-sm);
  background: rgba(var(--color-white-rgb), .9); color: var(--color-n900); pointer-events: none; }
.photo-tile.is-damage .pt-tag { color: var(--color-danger); }
.add-tile { border: 1.5px dashed rgba(var(--color-action-rgb), .55); background: transparent; color: var(--color-action);
  font-size: .75rem; line-height: 1.15; text-align: center; }
.add-tile .bi { font-size: 1.15rem; }
.add-tile:hover { background: rgba(var(--color-action-rgb), .06); }
[data-bs-theme="dark"] .add-tile { color: var(--color-action-lighter); border-color: rgba(var(--color-action-lighter-rgb), .55); }
.photo-tiles.tiles-lg .photo-tile, .photo-tiles.tiles-lg .photo-tile > button:first-child { width: 96px; height: 96px; }

/* A record sent back with a reason (collateral view, rejected): the reason before the record. */
.sent-back { border: 1px solid rgba(var(--color-danger-rgb), .3); border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md); background: rgba(var(--color-danger-rgb), .05); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); }
.sent-back .sb-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-danger); display: flex; gap: var(--space-2); align-items: center; }
[data-bs-theme="dark"] .sent-back .sb-title { color: var(--color-danger-light); }
.sent-back .sb-by { font-size: .8rem; color: var(--bs-secondary-color); margin-top: var(--space-1); }
/* An activity line: its time in the margin; a rejection marked in red at its edge. */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-rule); }
.activity-list li:last-child { border-bottom: 0; }
.activity-list .al-time { font-family: var(--font-mono); font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; min-width: 4.8rem; }
.activity-list .al-extra { font-size: .82rem; color: var(--bs-secondary-color); }
.activity-list li.is-rejection { box-shadow: inset 3px 0 0 var(--color-danger); }
/* A card's facts as ruled label / value rows, the value right-aligned (a charge's lender, loan). */
.fact-rows { margin: 0; }
.fact-rows > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0;
  border-top: 1px solid var(--color-rule); }
.fact-rows dt { font-weight: 400; color: var(--bs-secondary-color); }
.fact-rows dd { margin: 0; text-align: right; }

/* Master-limit warnings: each a line with a warning-coloured edge. */
.warn-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.warn-rows li { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-warning); }
.warn-rows li + li { border-top: 1px solid var(--color-rule); }
/* A certificate to download, sign and attach (Finish). */
.cert-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-panel); margin-bottom: var(--space-3); }
.cert-card .cc-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-rule); }
.cert-card .cc-head .bi { color: var(--color-action); font-size: 1.2rem; }
.cert-card .cc-body { padding: var(--space-3) var(--space-4); }
.cert-steps { list-style: none; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); counter-reset: step;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-panel); }
.cert-steps li { counter-increment: step; display: flex; gap: var(--space-2); padding: 2px 0; }
.cert-steps li::before { content: counter(step); font-family: var(--font-mono); color: var(--color-action); }
/* The camera's view: a dark well with the reader in it (scan QR, add packet). */
.scan-well .vims-qr-scanner { border: 0; background: transparent; }
.scan-well .vims-qr-scanner .card-header { display: none; }
.scan-well .vims-qr-scanner .card-body { padding: 0; }
.scan-well .vims-qr-reader { min-height: 240px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-n950); display: flex; align-items: center; justify-content: center; }
.scan-well .scan-hint { text-align: center; margin-top: var(--space-3); }
.scan-well .scan-hint .sh-sub { font-size: .85rem; color: var(--bs-secondary-color); }
/* A weight field's unit, inside the field's edge. */
.input-group .unit { font-family: var(--font-mono); color: var(--bs-secondary-color); background: var(--surface-panel); }
/* The live totals beside the ornament form on a desktop. */
.calc-rows { margin: 0 0 var(--space-3); font-size: .9rem; }
.calc-rows > div { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }
.calc-rows dd { margin: 0; font-family: var(--font-mono); }
.calc-big { font-family: var(--font-mono); font-size: 1.5rem; color: var(--color-brand); line-height: 1.2; }
/* The ornament type picker's rows: the chosen one marked at its edge, with a tick. */
.type-list .list-group-item { min-height: 52px; display: flex; align-items: center; gap: var(--space-2); }
.type-list .list-group-item.active { background: var(--surface-panel-2); color: var(--bs-body-color);
  border-color: var(--color-rule); box-shadow: inset 3px 0 0 var(--color-action); }
.type-list .list-group-item .bi-check2 { margin-left: auto; color: var(--color-action); }
.type-list .list-group-item .bi-lightbulb { margin-left: auto; color: var(--bs-secondary-color); }
/* The photo viewer: the image on the dark, its name above it. */
.photo-viewer .modal-content { background: var(--color-n950); color: var(--sidebar-ink); border: 0; }
.photo-viewer .modal-sub { color: rgba(var(--sidebar-ink-rgb), .7); }
/* Two hand-off buttons side by side on a phone (search results): one line each. */
@media (max-width: 991.98px) {
  .ab-compact .ab-secondary, .ab-compact .ab-primary { flex: 1 1 auto; }
  .ab-compact .btn { font-size: .9rem; white-space: nowrap; padding-inline: var(--space-2); }
}
@media (min-width: 992px) { .with-aside.with-aside-narrow { grid-template-columns: minmax(0, 40rem) 18rem; } }
/* A card's own few figures stay on one row on a phone (a charge's gold, value and loan). */
@media (max-width: 767.98px) {
  .ledger-figs.figs-inline { grid-template-columns: repeat(var(--fig-cols, 3), minmax(0, 1fr)); }
  .ledger-figs.figs-inline .lf { border-top: 0; padding: var(--space-2) var(--space-3); }
  .ledger-figs.figs-inline .lf + .lf { border-left: 1px solid var(--color-rule); }
  .ledger-figs.figs-inline .lf-value { font-size: 1rem; }
}
.pre-line { white-space: pre-line; }
/* A button that reads as a sentence keeps its case (the global .btn capitalises labels). */
.btn.keep-case { text-transform: none; }
.calc-rows dt { font-weight: 400; color: var(--bs-secondary-color); }
.segmented label { white-space: nowrap; padding-inline: var(--space-2); }
[data-bs-theme="dark"] .modal-icon:not(.mi-success):not(.mi-danger):not(.mi-warning) { color: var(--color-action-lighter); }

/* ── 12. Charge and movement screens (IMSPRT-128) ─────────────────────── */
/* A form with its record beside it on a desktop (request charge, confirm charge, closure):
   the record first on a phone, so the person sees what they act on before the fields; from
   lg the form on the left, the record and what follows it stacked on the right. */
.form-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6); align-items: start; }
@media (min-width: 992px) {
  .form-split { grid-template-columns: minmax(0, 40rem) minmax(0, 20rem); grid-template-rows: auto 1fr;
    grid-template-areas: "main side" "main after"; }
  .form-split > .fs-main { grid-area: main; }
  .form-split > .fs-side { grid-area: side; }
  .form-split > .fs-after { grid-area: after; }
}
/* A panel heading's count, after its rule (collaterals to pledge: 3). */
.ruled-head .rh-count { order: 1; font-family: var(--font-mono); font-size: .85rem; color: var(--bs-secondary-color); }
/* A line of what happens next, with its icon, under a form. */
.note-line { display: flex; gap: var(--space-2); align-items: flex-start; font-size: .9rem; color: var(--bs-secondary-color);
  margin: 0 0 var(--space-3); }
.note-line .bi { margin-top: 2px; }
/* A small-caps word over a record's name in a card (ON-LENDING, BULK MOVEMENT). */
.eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bs-secondary-color); }
.card-title-lg { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; line-height: 1.25; margin: 2px 0 0; }
/* A collateral in a list of numbers (to pledge, to move, on a movement): ruled rows in a card. */
.orn-row .or-num { font-family: var(--font-mono); }
.orn-row .or-remove { width: 44px; height: 44px; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }
.card > .orn-list:last-child .orn-row:last-child { border-bottom: 0; }

/* A route as a timeline: each stop a mark on a dashed line, then the place and its time. */
.route-list { list-style: none; margin: 0; padding: 0; }
.route-list .rl-stop { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.route-list .rl-stop:last-child { padding-bottom: 0; }
.route-list .rl-stop:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px;
  border-left: 1.5px dashed var(--color-n400); }
.route-list .rl-mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-circle); display: inline-flex;
  align-items: center; justify-content: center; border: 1.5px solid var(--color-n400); background: var(--surface-panel);
  font-family: var(--font-mono); font-size: .75rem; color: var(--bs-secondary-color); }
.route-list .is-start .rl-mark { background: var(--color-action); border-color: var(--color-action); color: var(--color-white); }
.route-list .is-next .rl-mark { border-color: var(--color-action); color: var(--color-action); }
.route-list .is-done .rl-mark { border-color: var(--color-success); color: var(--color-success); }
.route-list .rl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.route-list .rl-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); }
.route-list .rl-name { overflow-wrap: anywhere; }
.route-list .rl-sub { font-size: .82rem; color: var(--bs-secondary-color); }
.route-list .rl-time { font-family: var(--font-mono); font-size: .8rem; color: var(--bs-secondary-color); }
.route-list .rl-body > .status-pill, .route-list .rl-body > .btn { align-self: flex-start; margin-top: var(--space-2); }
[data-bs-theme="dark"] .route-list .is-next .rl-mark { border-color: var(--color-action-lighter); color: var(--color-action-lighter); }
[data-bs-theme="dark"] .route-list .is-done .rl-mark { border-color: var(--color-success-light); color: var(--color-success-light); }
/* From and to side by side on a desktop (closure, movement view): the route read across. */
@media (min-width: 768px) {
  .route-list.route-across { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
  .route-list.route-across .rl-stop { padding-bottom: 0; }
  .route-list.route-across .rl-stop:not(:last-child)::before { left: 32px; right: var(--space-4); top: 11px; bottom: auto;
    border-left: 0; border-top: 1.5px dashed var(--color-n400); }
  .route-list.route-across .rl-stop { flex-direction: column; }
}
/* How long a leg took, under its route. */
.route-took { font-family: var(--font-mono); font-size: .8rem; color: var(--bs-secondary-color); border-top: 1px solid var(--color-rule);
  padding-top: var(--space-2); margin-top: var(--space-3); }

/* A collateral number as a chip (what a trip carries). */
.filter-chip.num { font-family: var(--font-mono); font-size: .8rem; border-radius: var(--radius-sm); color: var(--color-action); text-decoration: none; }
a.filter-chip.num:hover { background: var(--surface-panel-2); }
[data-bs-theme="dark"] .filter-chip.num { color: var(--color-action-lighter); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cargo-line { font-family: var(--font-mono); font-size: .85rem; color: var(--bs-secondary-color); margin-top: var(--space-2); }

/* The trip's map: a panel with the place in it, a refresh over its corner, the reading below. */
.map-panel { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-panel); margin-bottom: var(--space-4); }
.map-panel .map-frame, .map-panel .map-placeholder { display: block; width: 100%; height: 260px; border: 0; background: var(--surface-panel-2); }
@media (min-width: 992px) { .map-panel .map-frame, .map-panel .map-placeholder { height: 340px; } }
.map-panel .map-placeholder { display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.map-panel .map-refresh { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; min-height: 44px;
  background: var(--surface-panel); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevation-1); }
.map-panel .map-reading { font-family: var(--font-mono); font-size: .8rem; color: var(--bs-secondary-color); margin: 0;
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-rule); }
.map-panel .map-reading:empty { display: none; }

/* A trip on the road: its stamp, when it set off and the clock running since. */
.trip-hero { text-align: center; }
.trip-hero .status-stamp { display: inline-block; }
.trip-clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; line-height: 1.2;
  color: var(--color-brand); margin-top: var(--space-1); }
@media (min-width: 992px) {
  .trip-hero { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .trip-hero .th-stamp { order: 2; }
  .trip-clock { color: var(--bs-body-color); font-size: 2.2rem; }
}
/* A per-stop "Mark reached" stays a full 48px target, not a link. */
.route-list .btn.stop-btn { min-height: 48px; }
/* Ruled facts straight under a card's header: no rule above the first. */
.fact-rows.fact-rows-flush > div:first-child { border-top: 0; }
/* Choice cards as a ruled list at every width (the reasons to abandon a trip). */
.choice-cards.choice-list label { min-height: 48px; }
@media (min-width: 992px) {
  .choice-cards.choice-list { grid-auto-flow: row; gap: 0; border: 1px solid var(--color-border); overflow: hidden; }
  .choice-cards.choice-list label { border: 0 !important; border-radius: 0; }
  .choice-cards.choice-list input + label ~ label { border-top: 1px solid var(--color-rule) !important; }
}
/* Packets scanned per collateral (validate packets): a thin bar under each row. */
.scan-progress { height: 4px; margin-top: var(--space-2); }
.scan-left { font-size: .78rem; color: var(--bs-secondary-color); margin-top: var(--space-1); overflow-wrap: anywhere; }
.scan-total { font-family: var(--font-mono); font-size: 1.15rem; }
.card.urgency-warning { border-left: 3px solid var(--color-warning); }

/* ── 13. Audit and inventory-audit screens (IMSPRT-128) ──────────────────── */
/* Choice cards two to a row on a desktop when there are more than three (audit types). */
@media (min-width: 992px) {
  .choice-cards.choice-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* An icon in the initials circle (the time a record is opened). */
.initials.initials-icon { background: var(--surface-panel-2); color: var(--bs-secondary-color); font-size: 1.05rem; }

/* A read-only field that opens a picker (the auditor): an icon before it, "Change" (or a
   chevron while empty) after it, the whole field one target. */
.picker-field { position: relative; }
.picker-field .form-control { padding-left: 2.6rem; padding-right: 5.5rem; cursor: pointer; min-height: 48px;
  background-color: var(--surface-panel); }
.picker-field .pf-icon { position: absolute; left: var(--space-3); top: 24px; translate: 0 -50%; color: var(--bs-secondary-color);
  pointer-events: none; }
.picker-field .pf-end { position: absolute; right: var(--space-3); top: 24px; translate: 0 -50%; pointer-events: none;
  color: var(--color-action); font-size: .9rem; }
.picker-field .pf-change { display: none; }
.picker-field.has-value .pf-change { display: inline; }
.picker-field.has-value .pf-chevron { display: none; }
.picker-field.has-value .pf-icon { color: var(--color-action); }
[data-bs-theme="dark"] .picker-field .pf-end, [data-bs-theme="dark"] .picker-field.has-value .pf-icon { color: var(--color-action-lighter); }
/* The picker's rows: a radio mark, the name, the branch under it; the chosen one marked. */
.pick-list .pick-row { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); }
.pick-list .pick-row .pr-mark { color: var(--color-n400); font-size: 1.1rem; margin-top: 1px; }
.pick-list .pick-row .pr-main { display: flex; flex-direction: column; min-width: 0; }
.pick-list .pick-row .pr-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.pick-list .pick-row.active { background: var(--surface-panel-2); color: var(--color-action); border-color: var(--color-rule);
  box-shadow: inset 3px 0 0 var(--color-action); }
.pick-list .pick-row.active .pr-mark { color: var(--color-action); }
[data-bs-theme="dark"] .pick-list .pick-row.active, [data-bs-theme="dark"] .pick-list .pick-row.active .pr-mark { color: var(--color-action-lighter); }
/* A number chip that can be taken off the list (collaterals to audit). */
.filter-chip.chip-remove { min-height: 44px; gap: var(--space-1); padding-right: var(--space-1); color: var(--bs-body-color); }
.filter-chip.chip-remove .icon-btn { width: 36px; height: 36px; position: relative; color: var(--bs-secondary-color); }
.filter-chip.chip-remove .icon-btn::after { content: ""; position: absolute; inset: -4px; } /* a 44px target */

/* The audit working view: a packet tab ticked once every ornament in it is audited. */
.view-tabs .tab-done { color: var(--color-success); }
.view-tabs .tab-todo { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .view-tabs .tab-done { color: var(--color-success-light); }
.or-count { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 400; }
.orn-row .bi-chevron-right { flex-shrink: 0; }
.ledger-table tr.row-link { cursor: pointer; }
@media (hover: hover) { .ledger-table tr.row-link:hover { background: var(--surface-panel-2); } }
.ledger-figs .lf.ok .lf-value { color: var(--color-success); }
[data-bs-theme="dark"] .ledger-figs .lf.ok .lf-value { color: var(--color-success-light); }

/* Inventory audit: where, the progress and the scanner on the left from lg, the branch's
   packets by collateral on the right. */
.branch-line { display: flex; gap: var(--space-2); align-items: baseline; color: var(--bs-secondary-color); margin-bottom: var(--space-4); }
.branch-line #addressName { color: var(--bs-body-color); }
@media (min-width: 992px) {
  .inv-layout { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
}
.inv-count { font-size: 2rem; line-height: 1.1; }
.inv-count .inv-of { font-size: 1.25rem; color: var(--bs-secondary-color); }
.progress.inv-bar { height: 6px; background: var(--surface-panel-2); }
.progress.inv-bar .progress-bar { background: var(--color-action); }
.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-head, .inv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-4); }
.inv-head { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--color-rule); }
.inv-head .r, .inv-row .ir-was, .inv-row .ir-now { text-align: right; }
.inv-row { min-height: 48px; border-bottom: 1px solid var(--color-rule); }
.inv-row .ir-id { overflow-wrap: anywhere; }
.inv-row .ir-was { display: none; color: var(--bs-secondary-color); }
@media (min-width: 768px) {
  .inv-head, .inv-row { grid-template-columns: minmax(0, 1fr) 6rem 7rem 7.5rem; }
  .inv-row .ir-was { display: block; }
}
.inv-row .ir-state { font-size: .85rem; color: var(--bs-secondary-color); white-space: nowrap; }
.inv-row .ir-state.is-done { color: var(--color-success); }
.inv-row .ir-state.is-scanned { color: var(--color-action); }
.inv-row .ir-state.is-missing { color: var(--color-danger); }
.inv-row.is-missing { box-shadow: inset 3px 0 0 var(--color-danger); }
[data-bs-theme="dark"] .inv-row .ir-state.is-done { color: var(--color-success-light); }
[data-bs-theme="dark"] .inv-row .ir-state.is-scanned { color: var(--color-action-lighter); }
[data-bs-theme="dark"] .inv-row .ir-state.is-missing { color: var(--color-danger-light); }
.inv-group { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  background: var(--surface-panel-2); border-bottom: 1px solid var(--color-rule); }
.inv-list > li:last-child { border-bottom: 0; }
/* A two-way filter that sits in a panel's head rather than across the page. */
.segmented.seg-compact { display: inline-flex; }
.segmented.seg-compact label { flex: 0 0 auto; padding-inline: var(--space-3); }

/* Audit report: the two sides on one panel, ornaments beside the history from lg. */
.ar-sides { gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-panel); }
.ar-sides .ar-side { border: 0; border-radius: 0; background: transparent; padding: var(--space-3) var(--space-4); }
.ar-sides .ar-side + .ar-side { border-left: 1px solid var(--color-rule); }
@media (min-width: 992px) {
  .ar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-5); align-items: start; }
}
.ar-layout .section-head .ruled-head::after { min-width: var(--space-4); }
.ar-name { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; }
.ar-packet { display: flex; align-items: center; gap: var(--space-1); font-size: .8rem; font-weight: 500; color: var(--bs-secondary-color);
  margin: 0 0 var(--space-2); }
.ar-ornament .ar-photos { margin-bottom: var(--space-3); }
.ar-photo-btn { min-height: 44px; }
.ar-photo-btn .ar-photo-more { margin-left: var(--space-1); font-size: .8rem; color: var(--bs-secondary-color); }
.ar-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 575.98px) { .ar-gallery-grid { grid-template-columns: minmax(0, 1fr); } }
.ar-gallery .ar-gallery-grid figure { margin: 0; }
.ar-gallery .ar-gallery-grid img { aspect-ratio: 1; object-fit: cover; }
.ar-gallery figure.is-damage img { border-color: var(--color-danger); }
.ar-gallery figure.is-damage figcaption { color: var(--color-danger); }
[data-bs-theme="dark"] .ar-gallery figure.is-damage figcaption { color: var(--color-danger-light); }
@media (min-width: 576px) { .ar-gallery .ar-gallery-col + .ar-gallery-col { border-left: 1px solid var(--color-rule); padding-left: var(--space-3); } }
/* On a phone the inventory audit's bar keeps the audited count and Submit; the expected total
   and the weighed gross are in the progress panel and the list above it. */
@media (max-width: 767.98px) { .totals-bar #totalPacketsBlock, .totals-bar #weighedGrossBlock { display: none; } }

/* ── 14. Sign-in, main and admin screens (IMSPRT-128) ──────────────────────── */
/* Sign-in: the card a little roomier, 48px fields, an eye inside the password's edge; on a
   desktop the brand and language run along the top of the page, the card alone in the middle. */
.login-card .card-body { padding: var(--space-6); }
@media (max-width: 575.98px) { .login-card .card-body { padding: var(--space-5) var(--space-4); } }
.login-card .form-control { min-height: 48px; }
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 52px; }
.pw-toggle { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: transparent;
  border-radius: var(--radius-sm); color: var(--bs-secondary-color); display: inline-flex; align-items: center;
  justify-content: center; }
.pw-toggle:hover { color: var(--bs-body-color); }
.pw-toggle:focus-visible { outline: 2px solid var(--color-action); outline-offset: -2px; }
.bare-foot { margin: var(--space-5) 0 0; text-align: center; font-size: .82rem; color: var(--bs-secondary-color); }
@media (min-width: 992px) {
  .login-shell .bare-top { position: absolute; top: 0; left: 0; right: 0; margin: 0 !important;
    padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-rule); }
}
/* On a phone the brand and the card start at the top, where the thumb and the keyboard leave them. */
@media (max-width: 991.98px) { .login-shell { align-items: flex-start; padding-top: var(--space-5); } }
/* The bare shell has no bottom nav: its action bar sits on the foot of the screen. */
@media (max-width: 991.98px) { .login-shell .action-bar { bottom: 0; } }

/* Error pages: the seal, the code small in mono, a title in the heading face, what to do.
   A failure on our side tints the seal red. The facts (who is signed in) and the reference
   sit in a panel under the message. */
.vims-error-page .ep-inner { width: 100%; max-width: 30rem; }
.vims-error-page .vims-error-code > i { width: 112px; height: 112px; font-size: 2.6rem; color: var(--color-action); }
.vims-error-page .vims-error-code.ep-danger > i { color: var(--color-danger); background: var(--rosette) center / 118% no-repeat,
  rgba(var(--color-danger-rgb), .08); }
[data-bs-theme="dark"] .vims-error-page .vims-error-code > i { color: var(--color-action-lighter); }
[data-bs-theme="dark"] .vims-error-page .vims-error-code.ep-danger > i { color: var(--color-danger-light); }
.vims-error-page .ep-code { font-family: var(--font-mono); letter-spacing: .2em; color: var(--bs-secondary-color);
  margin-top: var(--space-4); }
.vims-error-page .ep-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.6rem; margin: var(--space-1) 0 var(--space-2); }
.vims-error-page .ep-message { color: var(--bs-secondary-color); margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.vims-error-page .ep-facts, .vims-error-page .ep-ref { text-align: left; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--surface-panel); padding: var(--space-2) var(--space-4); }
.vims-error-page .ep-ref { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vims-error-page .ep-ref-no { display: block; font-family: var(--font-mono); font-size: 1.15rem; overflow-wrap: anywhere; }
.vims-error-page .ep-ref .btn { min-height: 44px; flex-shrink: 0; }
@media (min-width: 992px) { .vims-error-page .action-bar-inner { justify-content: center; } }

/* A day's heading in a feed: small caps on a hairline running both ways (notifications). */
.day-rule { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-secondary-color); }
.day-rule::before, .day-rule::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.notif-day:first-child .day-rule { margin-top: 0; }
/* A notification: the record's icon in a tile, the message, its time and "Needs action";
   an unread one bold with a dot at its end, a read one quieter. */
.notif-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.notif-list > li + li { border-top: 1px solid var(--color-rule); }
.notif-row { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: 56px; text-align: left;
  padding: var(--space-3) var(--space-4); border: 0; background: transparent; color: var(--bs-secondary-color); }
.notif-row.is-unread { color: var(--bs-body-color); }
@media (hover: hover) { .notif-row:hover { background: var(--surface-panel-2); } }
.notif-row:focus-visible { outline: 2px solid var(--color-action); outline-offset: -2px; }
.notif-row .nr-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex;
  align-items: center; justify-content: center; background: var(--surface-panel-2); color: var(--bs-secondary-color); }
.notif-row.is-pending .nr-icon { background: rgba(var(--color-action-rgb), .1); color: var(--color-action); }
.notif-row .nr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-row .nr-message { overflow-wrap: anywhere; }
.notif-row.is-unread .nr-message { font-weight: 600; }
.notif-row .nr-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: .8rem; color: var(--bs-secondary-color); }
.notif-row .nr-meta > * + *::before { content: "·"; margin-right: var(--space-2); }
.notif-row .nr-time { font-family: var(--font-mono); }
.notif-row .nr-pending { color: var(--color-action); font-weight: 500; }
.notif-row .nr-dot { width: 8px; height: 8px; margin-top: var(--space-2); flex-shrink: 0; border-radius: var(--radius-circle);
  background: var(--color-action); }
[data-bs-theme="dark"] .notif-row.is-pending .nr-icon, [data-bs-theme="dark"] .notif-row .nr-pending { color: var(--color-action-lighter); }
[data-bs-theme="dark"] .notif-row .nr-dot { background: var(--color-action-lighter); }
/* A quiet line under a list: what it holds, how many are shown. */
.list-foot { margin: var(--space-3) 0 0; text-align: center; font-size: .82rem; color: var(--bs-secondary-color); }

/* Pending actions: the number search (an icon inside its field, Search and Clear beside it)
   and the tabs - stacked on a phone, one row on a desktop. The tabs share the width on a
   phone, the active one's count above its name; on a desktop the count follows the name. */
.pending-top { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.search-row { display: flex; gap: var(--space-2); align-items: stretch; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field > .bi { position: absolute; left: var(--space-3); top: 50%; translate: 0 -50%; color: var(--bs-secondary-color);
  pointer-events: none; }
.search-field .form-control { padding-left: 2.4rem; min-height: 48px; }
.search-row .btn { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.count-tabs { flex-wrap: nowrap; }
.count-tabs .tab-count { font-family: var(--font-mono); }
.count-tabs .tab-count:empty { display: none; }
@media (max-width: 991.98px) {
  .count-tabs .nav-item { flex: 1 1 0; min-width: 0; }
  .count-tabs .nav-link { width: 100%; flex-direction: column; justify-content: flex-end; gap: 0; min-height: 56px;
    padding: var(--space-1) 2px; font-size: .8rem; }
  .count-tabs .tab-count { font-size: 1.15rem; line-height: 1.2; }
  .count-tabs .nav-link.active { color: var(--color-action); }
  [data-bs-theme="dark"] .count-tabs .nav-link.active { color: var(--color-action-lighter); }
}
@media (min-width: 992px) {
  .pending-top { flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
  .pending-top .search-row { flex: 0 1 26rem; }
  .pending-top .count-tabs { flex: 1 1 auto; }
  .count-tabs .nav-link { flex-direction: row-reverse; }
  .count-tabs .tab-count { font-size: .75rem; padding: 0 6px; border-radius: var(--radius-xl); background: var(--surface-panel-2);
    border: 1px solid var(--color-border); }
  /* A card's figures beside its facts, so a desktop row reads across. */
  .pending-list .record-card .rc-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-5); align-items: start; }
  .pending-list .record-card .rc-body > .rc-note, .pending-list .record-card .rc-body > :only-child { grid-column: 1 / -1; }
}

/* What a list was found with: its count, its filters as chips, and the way back to change them. */
.found-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.found-line .btn-link { min-height: 44px; }
/* A dashed "+ Add location" that is only as wide as its words. */
.btn-add-line.add-inline { display: inline-flex; width: auto; align-self: flex-start; padding: 0 var(--space-4); border-radius: var(--radius-xl); }

/* Gold rates: each location's newest rate - tick, where, the ⋯ - and its four per-gram rates,
   a 2 x 2 grid on a phone; from lg one ledger row under a header naming the four. */
.rate-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rate-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  overflow: hidden; }
.rate-card.is-selected { border-color: var(--color-action); box-shadow: inset 3px 0 0 var(--color-action); }
.rate-card .rc-check { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px;
  margin-left: var(--space-2); cursor: pointer; }
.rate-card .rc-where { display: flex; flex-direction: column; min-width: 0; padding: var(--space-3) var(--space-2); }
.rate-card .rc-name { font-weight: 500; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
.rate-card .rc-name .bi { color: var(--color-action); }
.rate-card .rc-name:hover { color: var(--color-action); text-decoration: underline; }
.rate-card .rc-place { font-size: .8rem; color: var(--bs-secondary-color); }
.rate-card .rc-menu { grid-column: 3; grid-row: 1; margin-right: var(--space-3); }
.rate-figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); }
.rate-figs .rf { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); }
.rate-figs .rf:nth-child(even) { border-left: 1px solid var(--color-rule); }
.rate-figs .rf:nth-child(n + 3) { border-top: 1px solid var(--color-rule); }
.rate-figs .rf-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.rate-figs .rf-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.rate-figs .rf-value small { font-size: .78rem; color: var(--bs-secondary-color); }
.rate-head { display: none; }
@media (min-width: 992px) {
  .rate-list { gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-panel); overflow: hidden; }
  .rate-head, .rate-card { grid-template-columns: 52px minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)) 64px; }
  .rate-head { display: grid; align-items: end; padding: var(--space-2) 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--bs-secondary-color); }
  .rate-head > span { text-align: right; padding-right: var(--space-3); }
  .rate-head .rh-where { grid-column: 2; text-align: left; }
  .rate-card { border: 0; border-radius: 0; border-top: 1px solid var(--color-rule); background: transparent; }
  .rate-card:first-child { border-top: 0; }
  .rate-card .rc-check { grid-column: 1; }
  .rate-card .rc-menu { grid-column: 7; grid-row: 1; justify-self: end; }
  .rate-figs { grid-column: 3 / 7; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .rate-figs .rf { padding: var(--space-2) var(--space-3); text-align: right; border: 0 !important; }
  .rate-figs .rf-label { display: none; }
  .rate-figs .rf-value { font-size: .95rem; }
}

/* A rate now against what it becomes (gold-rate confirm and delete): the before struck through,
   an arrow, the after; one block per location with its name and where its rate comes from. */
.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; }
.compare-table thead th { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-secondary-color); background: var(--surface-panel-2); padding: var(--space-2) var(--space-3); text-align: left; }
.compare-table tbody th { font-weight: 400; padding: var(--space-2) var(--space-3); }
.compare-table td { padding: var(--space-2) var(--space-3); }
.compare-table tbody tr + tr > * { border-top: 1px solid var(--color-rule); }
.compare-table .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-table thead .r { font-family: var(--font-body); }
.compare-table .ct-before { color: var(--bs-secondary-color); }
.compare-table tr.is-changed .ct-before { text-decoration: line-through; }
.compare-table .ct-after { font-weight: 600; }
.compare-table .ct-arrow { width: 1.5rem; padding-inline: 0; text-align: center; color: var(--bs-secondary-color); }
.compare-block + .compare-block { margin-top: var(--space-4); }
.compare-block .cb-head { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-2); }
.compare-block .cb-head > .bi { color: var(--color-action); margin-top: 2px; }
.compare-block .cb-name { font-weight: 500; }
.compare-block .cb-note { font-size: .8rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .compare-block .cb-head > .bi, [data-bs-theme="dark"] .rate-card .rc-name .bi { color: var(--color-action-lighter); }

/* Set gold rate: the four rates as branch / franchisee by regular / renewal. On a phone each
   side's two fields share a row under the side's name; from md the names sit in a column. */
.rate-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rate-inputs .ri-corner, .rate-inputs .ri-col { display: none; }
.rate-inputs .ri-row { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bs-secondary-color); margin-bottom: calc(var(--space-2) * -1); }
.rate-inputs .ri-label { font-size: .85rem; }
.rate-inputs .input-group .form-control { min-width: 0; }
@media (min-width: 768px) {
  .rate-inputs { grid-template-columns: 7rem repeat(2, minmax(0, 1fr)); align-items: center; }
  .rate-inputs .ri-corner, .rate-inputs .ri-col { display: block; }
  .rate-inputs .ri-row { grid-column: auto; margin: 0; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none;
    color: var(--bs-body-color); }
  .rate-inputs .ri-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.rate-inputs .form-control.is-invalid { background-image: none; padding-right: var(--space-3); }

/* A file chosen from a dashed drop zone (the input itself hidden but still focusable),
   then shown as a row with its name, size and a way to take it off. */
.file-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 132px; padding: var(--space-4); text-align: center; cursor: pointer; border-radius: var(--radius-md);
  border: 1.5px dashed rgba(var(--color-action-rgb), .55); background: rgba(var(--color-action-rgb), .03); margin: 0; }
.file-drop:hover { background: rgba(var(--color-action-rgb), .07); }
.file-drop-input:focus-visible + .file-drop { outline: 2px solid var(--color-action); outline-offset: 2px; }
.file-drop > .bi { font-size: 1.5rem; color: var(--color-action); }
.file-drop .fd-title { font-weight: 500; }
.file-drop .fd-sub { font-size: .8rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .file-drop > .bi { color: var(--color-action-lighter); }
.file-chosen { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-panel); }
.file-chosen .orn-thumb { color: var(--color-success); }
.file-chosen .fc-name { font-family: var(--font-mono); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chosen .fc-sub { font-size: .78rem; color: var(--bs-secondary-color); }
.file-chosen .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
/* A short list of what happens next, each line with its icon (the aside of a form). */
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: .9rem; }
.note-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.note-list .bi { margin-top: 2px; color: var(--bs-secondary-color); }
.note-list .bi-check2-circle { color: var(--color-success); }
.note-list .bi-exclamation-triangle { color: var(--pill-active-fg); }
/* A result's counts: the figures in mono, a problem count in red, a saved one in green. */
.result-rows dd { font-family: var(--font-mono); }
.result-rows .is-danger dt, .result-rows .is-danger dd { color: var(--color-danger); }
.result-rows .is-success dd { color: var(--color-success); }
[data-bs-theme="dark"] .result-rows .is-danger dt, [data-bs-theme="dark"] .result-rows .is-danger dd { color: var(--color-danger-light); }
[data-bs-theme="dark"] .result-rows .is-success dd { color: var(--color-success-light); }

/* A lender report upload: its pill under the branch line, who uploaded it under the figures. */
.report-card .rc-title-box > .status-pill { align-self: flex-start; margin-top: var(--space-2); }
.report-card .rc-title-box { display: flex; flex-direction: column; }
.report-card .report-by { margin: var(--space-2) 0 0; font-size: .82rem; color: var(--bs-secondary-color); }
.report-card .rc-head > .btn { min-height: 44px; flex-shrink: 0; }
@media (min-width: 992px) { .report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
  .report-grid > .empty-state { grid-column: 1 / -1; } }

/* Masters: each list a card - its icon in a tile, its name in the heading face, what it holds -
   two to a row from lg. */
.master-grid { display: grid; gap: var(--space-3); }
@media (min-width: 992px) { .master-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.master-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-4);
  min-height: 88px; color: var(--bs-body-color); text-decoration: none; }
.master-card .mc-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.35rem; background: rgba(var(--color-action-rgb), .1); color: var(--color-action); }
.master-card .mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.master-card .mc-title { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2; }
.master-card .mc-sub { font-size: .85rem; color: var(--bs-secondary-color); }
.master-card .mc-chevron { color: var(--bs-secondary-color); }
@media (hover: hover) { .master-card:hover { border-color: var(--color-action); box-shadow: inset 3px 0 0 var(--color-action); } }
[data-bs-theme="dark"] .master-card .mc-icon { color: var(--color-action-lighter); }

/* Masters lists: a ledger table from md; below it each row is a card - the first column as
   its title, the rest as label / value lines (each cell carries its column's name), Edit and
   Delete in its top corner. */
.master-table-card { overflow: hidden; }
.master-table .row-action { width: 44px; height: 44px; color: var(--color-action); }
.master-table .row-action.ra-danger { color: var(--color-danger); }
.master-table .row-action + .row-action { margin-left: var(--space-2); }
[data-bs-theme="dark"] .master-table .row-action { color: var(--color-action-lighter); }
[data-bs-theme="dark"] .master-table .row-action.ra-danger { color: var(--color-danger-light); }
.master-table .status-pill { white-space: nowrap; }
@media (max-width: 767.98px) {
  .master-table-card { background: transparent; border: 0; overflow: visible; }
  .master-table thead { display: none; }
  .master-table, .master-table tbody { display: block; }
  .master-table tbody { display: flex; flex-direction: column; gap: var(--space-3); }
  .master-table tr { position: relative; display: block; background: var(--surface-panel); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
  .master-table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border: 0;
    text-align: right !important; font-size: .88rem; }
  .master-table td::before { content: attr(data-label); color: var(--bs-secondary-color); text-align: left; }
  .master-table td.mt-title { display: block; text-align: left !important; font-weight: 500; font-size: 1rem;
    padding: var(--space-1) 104px var(--space-2) 0; margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-rule); min-height: 44px; }
  .master-table td.mt-title::before, .master-table td.mt-actions::before { display: none; }
  .master-table td.mt-actions { position: absolute; top: var(--space-2); right: var(--space-2); padding: 0; }
  .master-table td[colspan] { display: block; text-align: center !important; }
  .master-table td[colspan]::before { display: none; }
}

/* Audit trail: each version a card on a timeline, newest first - a filled mark on the
   latest, rings below it on one line; the changes as Field / From / To, the "to" in ink. */
.trail-go { min-height: 44px; min-width: 48px; }
.trail-list { list-style: none; margin: 0; padding: 0; position: relative; }
.trail-item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-3); }
.trail-item:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; border-left: 1.5px solid var(--color-border); }
.trail-item .ti-mark { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--space-3); border-radius: var(--radius-circle);
  border: 2px solid var(--color-action); background: var(--surface-page); }
.trail-item.is-latest .ti-mark { background: var(--color-action); }
.trail-item .ti-card { flex: 1; min-width: 0; overflow: hidden; }
.ti-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-rule); }
.ti-head .ti-time { font-family: var(--font-mono); font-size: .82rem; color: var(--bs-secondary-color); }
.ti-head .ti-who { margin-left: auto; font-weight: 500; }
.ti-none { margin: 0; padding: var(--space-3) var(--space-4); color: var(--bs-secondary-color); font-size: .9rem; }
.trail-table { width: 100%; border-collapse: collapse; font-size: .88rem; table-layout: fixed; }
.trail-table thead th { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color);
  padding: var(--space-2) var(--space-4) var(--space-1); text-align: left; }
.trail-table tbody th { font-weight: 400; }
.trail-table tbody th, .trail-table td { padding: var(--space-1) var(--space-4); vertical-align: top; overflow-wrap: anywhere; }
.trail-table tbody tr:last-child > * { padding-bottom: var(--space-3); }
.trail-table .tt-from { color: var(--bs-secondary-color); font-family: var(--font-mono); font-size: .82rem; }
.trail-table .tt-to { font-family: var(--font-mono); font-size: .82rem; }
@media (max-width: 575.98px) { .trail-table tbody th, .trail-table td, .trail-table thead th { padding-inline: var(--space-2); } }
[data-bs-theme="dark"] .trail-item .ti-mark { border-color: var(--color-action-lighter); }
[data-bs-theme="dark"] .trail-item.is-latest .ti-mark { background: var(--color-action-lighter); }
/* Scale capture (IMSPRT-143, partials/scale_capture.html + js/scale-capture.js): the scale photo
   first (a dashed frame round the packet on the scale), then the guide box over the display while
   both readers read it. The camera sits in a dark stage like the QR scanner's; the guide is the
   brand gold, the shutter a white ring. */
.scale-capture .scale-steps { display: flex; gap: var(--space-2); font-size: .85rem; margin-bottom: var(--space-2); }
.scale-capture .scale-steps span { flex: 1 1 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.scale-capture .scale-steps span.now { background: rgba(var(--color-action-rgb), .12); color: var(--color-action); font-weight: 600; }
.scale-capture .scale-steps span.done { color: var(--color-success); }
.scale-stage { position: relative; aspect-ratio: 4 / 3; background: rgb(var(--color-black-rgb)); border-radius: var(--radius-md); overflow: hidden; }
.scale-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scale-stage .scale-frame { position: absolute; inset: 6%; border: 2px dashed rgba(var(--color-white-rgb), .7); border-radius: var(--radius-md); pointer-events: none; }
.scale-stage .scale-guide { position: absolute; left: 10%; right: 10%; top: 35%; height: 30%; border: 2px solid var(--color-brand-light);
  border-radius: var(--radius-sm); box-shadow: 0 0 0 9999px rgba(var(--color-black-rgb), .45); pointer-events: none; }
.scale-stage .scale-guide::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--color-brand-light); opacity: .6; }
.scale-stage .scale-shutter { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); width: 56px; height: 56px;
  border-radius: var(--radius-circle); border: 4px solid rgb(var(--color-white-rgb)); background: rgba(var(--color-white-rgb), .25); }
.scale-stage .scale-status { position: absolute; left: 0; right: 0; top: var(--space-2); text-align: center; }
.scale-stage .scale-status .badge { font-size: .85rem; font-variant-numeric: tabular-nums; }
.scale-capture .scale-mark { font-size: .85rem; min-height: 1.4em; margin-top: var(--space-1); }
@media (prefers-reduced-motion: reduce) { .scale-stage * { transition: none !important; } }