/*
  App layout on top of the Redwood theme. Only Redwood design tokens (--oj-*) are used for
  colour, spacing, radius and elevation, so the app follows the theme exactly.
*/
html, body { height: 100%; }
body { background: rgb(var(--oj-palette-neutral-rgb-10)); }

.ledger-boot { display: grid; place-items: center; height: 100vh; }
.ledger-gap { gap: var(--oj-core-spacing-4x); }
.ledger-gap-sm { gap: var(--oj-core-spacing-2x); }
.ledger-num { font-variant-numeric: tabular-nums; }
.ledger-end { text-align: end; }
.ledger-ok { color: var(--oj-core-text-color-success); }

/* Header */
.ledger-header { position: sticky; top: 0; z-index: 10; background: var(--oj-core-bg-color-content); border-bottom: 1px solid var(--oj-core-divider-color); padding: 0 var(--oj-core-spacing-2x); }
.ledger-header > .oj-flex-bar { min-height: 3.5rem; gap: var(--oj-core-spacing-2x); }
.ledger-product { margin: 0 var(--oj-core-spacing-2x); }
.ledger-env { padding: 0 var(--oj-core-spacing-2x); border-radius: var(--oj-core-border-radius-md); background: rgb(var(--oj-palette-warning-rgb-20)); color: var(--oj-core-text-color-warning); font-weight: 600; letter-spacing: .04em; }
.ledger-header-actions { gap: var(--oj-core-spacing-2x); }
.ledger-search-trigger {
  display: flex; align-items: center; gap: var(--oj-core-spacing-2x); width: min(32rem, 100%); height: 2.25rem;
  padding: 0 var(--oj-core-spacing-3x); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg);
  background: rgb(var(--oj-palette-neutral-rgb-10)); color: var(--oj-core-text-color-secondary); cursor: pointer; font: inherit;
}
.ledger-search-trigger:hover { background: var(--oj-core-bg-color-hover); }
.ledger-search-trigger span { flex: 1; text-align: start; }
.ledger-search-trigger kbd { font: inherit; font-size: .75rem; padding: 0 var(--oj-core-spacing-1x); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-md); }

/* Layout */
.ledger-layout { height: calc(100vh - 3.5rem - 1px); }
.ledger-drawer { width: 15rem; height: 100%; overflow-y: auto; background: var(--oj-core-bg-color-content); border-inline-end: 1px solid var(--oj-core-divider-color); }
.ledger-main { height: 100%; overflow-y: auto; }
.ledger-nav { padding: var(--oj-core-spacing-2x) 0 var(--oj-core-spacing-6x); }
.ledger-nav-section + .ledger-nav-section { margin-top: var(--oj-core-spacing-2x); }
.ledger-nav-heading { margin: var(--oj-core-spacing-3x) var(--oj-core-spacing-4x) var(--oj-core-spacing-1x); text-transform: uppercase; letter-spacing: .06em; }
.ledger-soon { margin-inline-start: var(--oj-core-spacing-2x); }
.ledger-nav li.oj-disabled a { opacity: .6; }

/* Pages */
.ledger-page { max-width: 64rem; margin: 0 auto; padding: var(--oj-core-spacing-6x) var(--oj-core-spacing-8x) var(--oj-core-spacing-12x); display: flex; flex-direction: column; gap: var(--oj-core-spacing-4x); }
.ledger-page-wide { max-width: 90rem; }
.ledger-page-header { display: flex; flex-direction: column; gap: var(--oj-core-spacing-2x); }
.ledger-back { margin-inline-start: calc(-1 * var(--oj-core-spacing-2x)); align-self: flex-start; }
.ledger-title { margin: 0; }
.ledger-subtitle { margin: var(--oj-core-spacing-1x) 0 0; }
.ledger-meta { display: flex; flex-wrap: wrap; gap: var(--oj-core-spacing-1x) var(--oj-core-spacing-4x); margin-top: var(--oj-core-spacing-2x); }
.ledger-actions { display: flex; flex-wrap: wrap; gap: var(--oj-core-spacing-2x); justify-content: flex-end; }

.ledger-card { background: var(--oj-core-bg-color-content); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); overflow: hidden; }
.ledger-card-header { padding: var(--oj-core-spacing-3x) var(--oj-core-spacing-4x); border-bottom: 1px solid var(--oj-core-divider-color); }
.ledger-card-header h2 { margin: 0; }
.ledger-card-body { padding: var(--oj-core-spacing-4x); }
.ledger-narrow { max-width: 36rem; }
.ledger-form-actions, .ledger-signin-actions { display: flex; justify-content: flex-end; margin-top: var(--oj-core-spacing-4x); }
.ledger-banner:empty { display: none; }
.ledger-empty { display: flex; flex-direction: column; align-items: center; gap: var(--oj-core-spacing-2x); padding: var(--oj-core-spacing-12x) var(--oj-core-spacing-6x); text-align: center; }
.ledger-empty h3, .ledger-empty p { margin: 0; }
.ledger-skeleton-rows { display: flex; flex-direction: column; gap: var(--oj-core-spacing-2x); }
.ledger-dialog-footer { display: flex; justify-content: flex-end; gap: var(--oj-core-spacing-2x); }

/* Lists */
.ledger-list { display: flex; flex-direction: column; gap: var(--oj-core-spacing-3x); }
.ledger-list-toolbar { flex-wrap: wrap; }
.ledger-list-search { flex: 1 1 18rem; max-width: 28rem; }
.ledger-filter { width: 13rem; }
.ledger-list-bar { min-height: 2rem; }
.ledger-table { width: 100%; max-height: calc(100vh - 20rem); background: var(--oj-core-bg-color-content); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); }
.ledger-table-flush { border: 0; border-radius: 0; max-height: none; }

/* Home */
.ledger-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--oj-core-spacing-4x); }
.ledger-kpi-value { margin: var(--oj-core-spacing-1x) 0; }
.ledger-home-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--oj-core-spacing-4x); align-items: start; }
@media (max-width: 1024px) { .ledger-home-grid { grid-template-columns: 1fr; } }
.ledger-todo, .ledger-rows { list-style: none; margin: 0; padding: 0; }
.ledger-todo li + li, .ledger-rows li + li { border-top: 1px solid var(--oj-core-divider-color); }
.ledger-todo-item { position: relative; display: flex; align-items: center; gap: var(--oj-core-spacing-3x); padding: var(--oj-core-spacing-3x) var(--oj-core-spacing-4x) var(--oj-core-spacing-3x) var(--oj-core-spacing-5x); }
.ledger-todo-item > :first-child { min-width: 2rem; }
.ledger-todo-item > :nth-child(2) { flex: 1; }
.ledger-todo-item::before { content: ""; position: absolute; inset-inline-start: 0; top: var(--oj-core-spacing-3x); bottom: var(--oj-core-spacing-3x); width: 3px; border-radius: 0 2px 2px 0; }
.ledger-tone-info::before { background: var(--oj-core-info-3); }
.ledger-tone-warning::before { background: var(--oj-core-warning-3); }
.ledger-tone-danger::before { background: var(--oj-core-danger-3); }
.ledger-tone-neutral::before { background: var(--oj-core-neutral-3); }
.ledger-todo-soon { color: var(--oj-core-text-color-secondary); }
.ledger-todo-soon::before { opacity: .4; }
.ledger-row-link { display: flex; align-items: center; gap: var(--oj-core-spacing-3x); padding: var(--oj-core-spacing-3x) var(--oj-core-spacing-4x); color: inherit; text-decoration: none; }
.ledger-row-link:hover { background: var(--oj-core-bg-color-hover); }
.ledger-row-num { width: 5.5rem; }
.ledger-row-date { width: 6.5rem; }
.ledger-row-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row-amt { width: 8rem; text-align: end; }

/* Record pages */
.ledger-record-layout { height: 100%; }
.ledger-record-layout > .ledger-page { height: 100%; overflow-y: auto; }
.ledger-record-top { display: grid; grid-template-columns: 1fr 18rem; }
@media (max-width: 1024px) { .ledger-record-top { grid-template-columns: 1fr; } }
.ledger-record-sections { padding: var(--oj-core-spacing-2x) var(--oj-core-spacing-4x) var(--oj-core-spacing-4x); }
.ledger-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oj-core-spacing-4x) var(--oj-core-spacing-8x); margin: var(--oj-core-spacing-2x) 0 0; }
.ledger-field dt { margin: 0; }
.ledger-field dd { margin: var(--oj-core-spacing-1x) 0 0; overflow-wrap: anywhere; }
.ledger-summary { padding: var(--oj-core-spacing-4x); border-inline-start: 1px solid var(--oj-core-divider-color); background: rgb(var(--oj-palette-neutral-rgb-10)); }
.ledger-summary h3 { margin: 0 0 var(--oj-core-spacing-3x); }
.ledger-summary dl { margin: 0; }
.ledger-summary-row { padding: var(--oj-core-spacing-1x) 0; }
.ledger-summary-row dt, .ledger-summary-row dd { margin: 0; }
.ledger-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--oj-core-spacing-3x); padding-top: var(--oj-core-spacing-3x); border-top: 1px solid var(--oj-core-divider-color); }
.ledger-tabs { padding: 0 var(--oj-core-spacing-4x); border-bottom: 1px solid var(--oj-core-divider-color); }

/* Side drawer (posting impact) */
.ledger-drawer-end { width: 24rem; height: 100%; overflow-y: auto; padding: 0 var(--oj-core-spacing-4x) var(--oj-core-spacing-6x); background: var(--oj-core-bg-color-content); border-inline-start: 1px solid var(--oj-core-divider-color); }
.ledger-drawer-header { position: sticky; top: 0; background: var(--oj-core-bg-color-content); min-height: 3.5rem; border-bottom: 1px solid var(--oj-core-divider-color); margin: 0 calc(-1 * var(--oj-core-spacing-4x)) var(--oj-core-spacing-4x); padding: 0 var(--oj-core-spacing-2x) 0 var(--oj-core-spacing-4x); }
.ledger-drawer-header h2 { margin: 0; }
.ledger-impact { display: flex; flex-direction: column; gap: var(--oj-core-spacing-3x); }
.ledger-impact h3 { margin: var(--oj-core-spacing-2x) 0 0; text-transform: uppercase; letter-spacing: .06em; }
.ledger-impact-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); }
.ledger-impact-list li { padding: var(--oj-core-spacing-2x) var(--oj-core-spacing-3x); }
.ledger-impact-list li + li { border-top: 1px solid var(--oj-core-divider-color); }
.ledger-impact-account { padding: var(--oj-core-spacing-3x); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); }
.ledger-impact-amounts { gap: var(--oj-core-spacing-8x); margin-top: var(--oj-core-spacing-2x); }

/* Journal line editor */
.ledger-lines { overflow-x: auto; }
.ledger-line { display: grid; grid-template-columns: 1.5rem minmax(14rem, 2fr) minmax(8rem, 1.5fr) minmax(8rem, 1fr) 8.5rem 8.5rem 4.5rem; gap: var(--oj-core-spacing-2x); align-items: start; padding: var(--oj-core-spacing-2x) var(--oj-core-spacing-4x); min-width: 56rem; }
.ledger-line + .ledger-line { border-top: 1px solid var(--oj-core-divider-color); }
.ledger-line-head { align-items: center; background: rgb(var(--oj-palette-neutral-rgb-10)); }
.ledger-line-no { padding-top: var(--oj-core-spacing-2x); }
.ledger-line-actions { display: flex; }
.ledger-lines-footer { padding: var(--oj-core-spacing-2x) var(--oj-core-spacing-4x); border-top: 1px solid var(--oj-core-divider-color); flex-wrap: wrap; gap: var(--oj-core-spacing-2x); }
.ledger-hint { margin-inline-start: var(--oj-core-spacing-2x); }
.ledger-date-shortcuts { margin-top: var(--oj-core-spacing-1x); }

/* Search dialog */
.ledger-search-results { list-style: none; margin: var(--oj-core-spacing-3x) 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.ledger-search-results li { padding: var(--oj-core-spacing-2x) var(--oj-core-spacing-3x); border-radius: var(--oj-core-border-radius-md); cursor: pointer; }
.ledger-search-hi { background: var(--oj-core-bg-color-hover); box-shadow: inset 3px 0 0 var(--oj-core-brand-3); }
.ledger-search-empty { padding: var(--oj-core-spacing-6x) 0; text-align: center; cursor: default !important; }

/* Sign-in */
.ledger-signin { min-height: 100vh; display: grid; place-items: center; padding: var(--oj-core-spacing-4x); }
.ledger-signin-card { width: min(26rem, 100%); padding: var(--oj-core-spacing-8x); background: var(--oj-core-bg-color-content); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); box-shadow: var(--oj-core-box-shadow-sm); }
.ledger-signin-title { margin: var(--oj-core-spacing-6x) 0 var(--oj-core-spacing-1x); }
.ledger-signin-note { margin-top: var(--oj-core-spacing-6x); }

@media (max-width: 768px) {
  .ledger-page { padding: var(--oj-core-spacing-4x); }
  .ledger-fields { grid-template-columns: 1fr; }
  .ledger-search-trigger span, .ledger-search-trigger kbd { display: none; }
  .ledger-search-trigger { width: 2.25rem; padding: 0; justify-content: center; }
}
.ledger-header-text { flex-direction: column; align-items: flex-start; }
.ledger-nav-heading { font-size: .75rem; }
/* Keep the navigation drawer its full width; the main area absorbs wide tables instead. */
.ledger-drawer { min-width: 15rem; flex-shrink: 0; }
.ledger-main, .ledger-record-layout > .ledger-page { min-width: 0; }
.ledger-drawer-end { min-width: 24rem; flex-shrink: 0; }
.ledger-page-header oj-c-badge, .ledger-row-link oj-c-badge { flex-shrink: 0; }
.ledger-summary-row { display: flex; justify-content: space-between; gap: var(--oj-core-spacing-4x); }
oj-c-badge { min-width: max-content; }

/* Sales */
.ledger-danger { color: var(--oj-core-text-color-danger); }
.ledger-help { margin: 0 0 var(--oj-core-spacing-3x); }
.ledger-section-title { margin: var(--oj-core-spacing-2x) 0 0; }
.ledger-switch-field { display: flex; flex-direction: column; gap: var(--oj-core-spacing-1x); padding-top: var(--oj-core-spacing-1x); }
.ledger-sales-line { grid-template-columns: 1.5rem minmax(9rem, 1fr) minmax(14rem, 3fr) 5.5rem 8rem minmax(9rem, 1fr) minmax(11rem, 1.3fr) 8rem 2.5rem; min-width: 74rem; }
.ledger-line-amount { padding-top: var(--oj-core-spacing-2x); }
.ledger-totals { margin: 0; min-width: 18rem; }
.ledger-totals > div { display: flex; justify-content: space-between; gap: var(--oj-core-spacing-6x); padding: var(--oj-core-spacing-1x) 0; }
.ledger-totals dt, .ledger-totals dd { margin: 0; }
.ledger-totals-grand { border-top: 1px solid var(--oj-core-divider-color); margin-top: var(--oj-core-spacing-1x); padding-top: var(--oj-core-spacing-2x) !important; font-weight: 600; font-size: 1.125rem; }

/* Printable invoice */
.ledger-print { min-height: 100vh; background: rgb(var(--oj-palette-neutral-rgb-10)); padding: var(--oj-core-spacing-6x) var(--oj-core-spacing-4x); }
.ledger-print-msg { padding: var(--oj-core-spacing-8x); }
.ledger-print-toolbar { max-width: 210mm; margin: 0 auto var(--oj-core-spacing-4x); display: flex; align-items: center; gap: var(--oj-core-spacing-4x); }
.ledger-sheet { position: relative; max-width: 210mm; min-height: 270mm; margin: 0 auto; padding: 18mm 16mm; background: #fff; color: #161513; border: 1px solid var(--oj-core-divider-color); box-shadow: var(--oj-core-box-shadow-sm); }
.ledger-sheet-head { display: flex; justify-content: space-between; gap: 12mm; padding-bottom: 8mm; border-bottom: 1px solid var(--oj-core-divider-color); }
.ledger-sheet-title { text-align: end; }
.ledger-sheet-title h1 { margin: 0 0 4mm; text-transform: uppercase; letter-spacing: .04em; }
.ledger-sheet-meta { margin-inline-start: auto; border-collapse: collapse; font-size: .875rem; }
.ledger-sheet-meta th { text-align: end; font-weight: 400; color: var(--oj-core-text-color-secondary); padding: 1px 4mm 1px 0; }
.ledger-sheet-meta td { text-align: end; font-weight: 600; }
.ledger-sheet-to { margin: 8mm 0; }
.ledger-sheet-lines { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ledger-sheet-lines th { text-align: start; font-weight: 600; padding: 2.5mm 2mm; border-bottom: 1.5px solid #161513; }
.ledger-sheet-lines td { padding: 2.5mm 2mm; border-bottom: 1px solid var(--oj-core-divider-color); vertical-align: top; }
.ledger-sheet-lines .ledger-end { text-align: end; }
.ledger-sheet-totals { margin: 6mm 0 0 auto; border-collapse: collapse; min-width: 75mm; font-size: .875rem; }
.ledger-sheet-totals th { text-align: start; font-weight: 400; padding: 1.5mm 6mm 1.5mm 0; }
.ledger-sheet-totals td { text-align: end; padding: 1.5mm 0; }
.ledger-sheet-grand th, .ledger-sheet-grand td { font-weight: 700; font-size: 1rem; border-top: 1.5px solid #161513; padding-top: 2.5mm; }
.ledger-sheet-notes { margin-top: 10mm; white-space: pre-wrap; }
.ledger-sheet-foot { position: absolute; bottom: 12mm; left: 16mm; right: 16mm; }
.ledger-watermark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7rem; font-weight: 800; color: rgba(0,0,0,.05); transform: rotate(-24deg); pointer-events: none; }
@media print {
  @page { size: A4; margin: 0; }
  body, .ledger-print { background: #fff; padding: 0; }
  .ledger-print-toolbar { display: none; }
  .ledger-sheet { border: 0; box-shadow: none; max-width: none; min-height: 297mm; }
}
.ledger-totals.oj-flex-bar-end { display: block; }
.ledger-totals.oj-flex-bar-end { margin-inline-start: auto; }

/* Record header (pattern: type tile, status, facts, next steps, updated stamp, sticky compact bar) */
.ledger-eyebrow { margin-bottom: calc(-1 * var(--oj-core-spacing-1x)); }
.ledger-record-header { background: var(--oj-core-bg-color-content); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); padding: var(--oj-core-spacing-3x) var(--oj-core-spacing-5x) var(--oj-core-spacing-4x); }
.ledger-record-header .ledger-back { margin-bottom: var(--oj-core-spacing-1x); }
.ledger-type-tile { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--oj-core-border-radius-lg); background: rgb(var(--oj-palette-neutral-rgb-20)); color: var(--oj-core-text-color-primary); }
.ledger-type-tile-sm { width: 1.75rem; height: 1.75rem; border-radius: var(--oj-core-border-radius-md); }
.ledger-header-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--oj-core-spacing-2x); }
.ledger-sentinel { height: 1px; margin-top: -1px; }
.ledger-sticky-header {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--oj-core-spacing-3x);
  margin: calc(-1 * var(--oj-core-spacing-4x)) calc(-1 * var(--oj-core-spacing-8x)) 0; padding: 0 var(--oj-core-spacing-8x);
  height: 0; overflow: hidden; opacity: 0; background: var(--oj-core-bg-color-content); border-bottom: 1px solid transparent;
  transition: opacity .15s ease, height .15s ease;
}
.ledger-sticky-header.is-stuck { height: 3.25rem; opacity: 1; border-bottom-color: var(--oj-core-divider-color); box-shadow: var(--oj-core-box-shadow-sm); }
.ledger-sticky-spacer { flex: 1; }
@media (max-width: 768px) { .ledger-sticky-header { margin-inline: calc(-1 * var(--oj-core-spacing-4x)); padding-inline: var(--oj-core-spacing-4x); } }

/* Record body sections + summary card */
.ledger-collapsible { display: block; }
.ledger-section-body { padding: var(--oj-core-spacing-1x) 0 var(--oj-core-spacing-4x); }
.ledger-summary-wrap { padding: var(--oj-core-spacing-4x); }
.ledger-summary-card { border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-lg); padding: var(--oj-core-spacing-4x); background: var(--oj-core-bg-color-content); }
.ledger-summary-card h3 { margin: 0 0 var(--oj-core-spacing-3x); }
.ledger-summary-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--oj-core-spacing-2x); padding-top: var(--oj-core-spacing-3x); border-top: 1px solid var(--oj-core-divider-color); }
.ledger-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ledger-fields-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .ledger-fields-3 { grid-template-columns: 1fr; } }
.ledger-summary-due { margin-top: var(--oj-core-spacing-2x); }

/* Search results */
.ledger-search-heading { margin: var(--oj-core-spacing-3x) 0 var(--oj-core-spacing-1x); text-transform: uppercase; letter-spacing: .06em; }
.ledger-search-results { margin: 0 0 var(--oj-core-spacing-2x); }
.ledger-search-results li { display: flex; align-items: center; gap: var(--oj-core-spacing-3x); }
.ledger-search-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--oj-core-border-radius-md); background: rgb(var(--oj-palette-neutral-rgb-20)); flex: 0 0 auto; }
.ledger-search-text { flex: 1; min-width: 0; }
.ledger-search-title strong, .ledger-search-context strong { font-weight: 700; color: var(--oj-core-text-color-primary); }
.ledger-search-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-kbd { font: inherit; font-size: .75rem; padding: 0 var(--oj-core-spacing-1x); border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-md); color: var(--oj-core-text-color-secondary); }
.ledger-search-foot { border-top: 1px solid var(--oj-core-divider-color); padding-top: var(--oj-core-spacing-2x); }

/* List toolbar: filter chips, active-filter tokens */
.ledger-toolbar-spacer { flex: 1; }
.ledger-list-search { flex: 0 1 22rem; min-width: 14rem; }
.ledger-tokens { flex-wrap: wrap; }
.ledger-token { display: inline-flex; align-items: center; gap: var(--oj-core-spacing-1x); padding: 0 var(--oj-core-spacing-1x) 0 var(--oj-core-spacing-2x); height: 1.75rem; border-radius: 999px; background: rgb(var(--oj-palette-neutral-rgb-20)); }
.ledger-token button { border: 0; background: transparent; cursor: pointer; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--oj-core-text-color-secondary); }
.ledger-token button:hover { background: var(--oj-core-bg-color-hover); color: var(--oj-core-text-color-primary); }
.ledger-up { color: var(--oj-core-text-color-success); }
.ledger-down { color: var(--oj-core-text-color-danger); }
.ledger-todo-text { flex: 1; display: flex; flex-direction: column; }
.ledger-kpis { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.ledger-form-section { margin: 0 0 var(--oj-core-spacing-3x); }
.ledger-summary-note { margin: var(--oj-core-spacing-3x) 0 0; }

/* =====================================================================================
   Shell v2: dock-based layout. Colours come only from Redwood palette values (UPL):
   teal-navy brand ramp for dark chrome, gold ramp for accents on dark, warm neutrals.
   ===================================================================================== */
:root {
  --ns-canvas: rgb(245, 244, 242);              /* neutral 20 */
  --ns-dock: rgb(17, 38, 48);                   /* brand 170 darkened toward neutral 190 */
  --ns-dock-hover: rgba(255, 255, 255, .08);
  --ns-dock-active: rgba(255, 255, 255, .14);
  --ns-band: rgb(5, 50, 66);                    /* brand 170 */
  --ns-panel: rgb(14, 44, 57);                  /* menus and popovers */
  --ns-panel-line: rgba(255, 255, 255, .10);
  --ns-panel-text: rgba(255, 255, 255, .92);
  --ns-panel-muted: rgba(255, 255, 255, .62);
  --ns-gold: rgb(213, 179, 100);                /* gold 60 */
  --ns-strip: linear-gradient(90deg, rgb(4, 83, 111), rgb(65, 144, 172) 45%, rgb(199, 165, 93) 80%, rgb(4, 83, 111));
  --ns-dock-h: 60px;
}

body { background: var(--ns-canvas); }
.ns-app { min-height: 100vh; }
.ns-strip { position: fixed; inset: 0 0 auto 0; height: 6px; background: var(--ns-strip); z-index: 30; }
.ns-main { min-height: 100vh; padding-top: 6px; padding-bottom: calc(var(--ns-dock-h) + 24px); }
.ns-grow, .ns-dock-spacer { flex: 1; }

/* ---------- Bottom dock ---------- */
.ns-dock { position: fixed; inset: auto 0 0 0; height: var(--ns-dock-h); z-index: 40; display: flex; align-items: stretch; background: var(--ns-dock); color: var(--ns-panel-text); box-shadow: 0 -2px 10px rgba(0, 0, 0, .18); }
.ns-dock button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.ns-dock-btn { width: 56px; display: grid; place-items: center; color: var(--ns-panel-text); }
.ns-dock-btn:hover { background: var(--ns-dock-hover); }
.ns-dock-btn.is-pressed, .ns-dock-btn.is-active { background: var(--ns-dock-active); }
.ns-dock-btn.is-active { box-shadow: inset 0 -3px 0 var(--ns-gold); }
.ns-dock-btn:focus-visible, .ns-dock button:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: -2px; }
.ns-dock-company { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 12px; margin-left: 4px; text-align: start; border-left: 1px solid var(--ns-panel-line) !important; }
.ns-dock-company:hover, .ns-dock-company.is-pressed { background: var(--ns-dock-hover); }
.ns-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: rgb(65, 144, 172); color: #fff; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.ns-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.ns-dock-company-text { display: flex; flex-direction: column; line-height: 1.2; max-width: 260px; }
.ns-dock-company-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-dock-company-role { font-size: 11px; color: var(--ns-panel-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-dock-search { align-self: center; display: flex; align-items: center; gap: 8px; width: 320px; height: 36px; padding: 0 12px; margin-right: 8px; border-radius: 6px !important; background: rgba(0, 0, 0, .28) !important; border: 1px solid var(--ns-panel-line) !important; color: var(--ns-panel-muted) !important; font-size: 13px !important; text-align: start; }
.ns-dock-search:hover { border-color: rgba(255, 255, 255, .3) !important; }
.ns-dock-search.is-hidden { visibility: hidden; }
.ns-dock-help { display: flex; align-items: center; gap: 6px; padding: 0 16px; border-left: 1px solid var(--ns-panel-line) !important; font-size: 13px !important; color: var(--ns-panel-muted) !important; }
.ns-dock-help:hover { background: var(--ns-dock-hover); color: var(--ns-panel-text) !important; }
@media (max-width: 900px) {
  .ns-dock-company-text, .ns-dock-help span, .ns-dock-search span { display: none; }
  .ns-dock-search { width: 40px; justify-content: center; }
}

/* ---------- Dock popovers ---------- */
.ns-popover { position: fixed; bottom: calc(var(--ns-dock-h) + 8px); z-index: 45; width: 280px; max-height: calc(100vh - var(--ns-dock-h) - 40px); overflow-y: auto; padding: 8px 0; border-radius: 6px; background: var(--ns-panel); color: var(--ns-panel-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13px; }
.ns-popover-wide { width: 340px; }
.ns-popover button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.ns-popover-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; }
.ns-popover-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ns-popover-tools { display: flex; gap: 4px; }
.ns-popover-tools button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--ns-panel-text); }
.ns-popover-tools button:disabled { opacity: .55; cursor: default; }
.ns-popover-list { list-style: none; margin: 0; padding: 0; }
.ns-popover-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 16px; text-align: start; }
.ns-popover-item:hover:not(:disabled) { background: var(--ns-dock-hover); }
.ns-popover-item:disabled { color: var(--ns-panel-muted); cursor: default; }
.ns-popover-item > span:first-of-type { flex: 1; }
.ns-popover-empty { margin: 8px 16px 16px; font-size: 18px; color: var(--ns-panel-muted); }
.ns-popover-divider { height: 1px; margin: 8px 0; background: var(--ns-panel-line); }
.ns-popover-caption { padding: 4px 16px 4px; font-size: 12px; color: var(--ns-panel-muted); }
.ns-soon { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-panel-muted); }
.ns-profile-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; }
.ns-profile-name { font-size: 15px; font-weight: 600; }
.ns-profile-company { display: flex; align-items: center; justify-content: space-between; margin: 0 16px 8px; padding: 10px 0; border-top: 1px solid var(--ns-panel-line); border-bottom: 1px solid var(--ns-panel-line); }
.ns-profile-company-name { font-weight: 600; }
.ns-profile-company-role { font-size: 12px; color: var(--ns-panel-muted); }
.ns-env { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.ns-profile-foot { display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 16px 6px; }
.ns-btn-outline { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px !important; border: 1px solid rgba(255, 255, 255, .45) !important; border-radius: 4px; }
.ns-btn-outline:hover { background: var(--ns-dock-hover) !important; }
.ns-version { font-size: 11px; color: var(--ns-panel-muted); text-align: end; }

/* ---------- Full menu ---------- */
.ns-menu { position: fixed; z-index: 45; left: 80px; right: max(16px, calc(100vw - 80px - 1200px)); top: 18px; bottom: calc(var(--ns-dock-h) + 8px); display: flex; flex-direction: column; border-radius: 6px; background: var(--ns-panel); color: var(--ns-panel-text); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); font-size: 14px; }
.ns-menu button, .ns-menu input { font: inherit; color: inherit; background: transparent; border: 0; }
.ns-menu-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--ns-panel-line); }
.ns-menu-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.ns-menu-search { display: flex; align-items: center; gap: 8px; width: 300px; height: 34px; padding: 0 10px; border-radius: 4px; background: rgba(0, 0, 0, .3); border: 1px solid var(--ns-panel-line); color: var(--ns-panel-muted); }
.ns-menu-search input { flex: 1; outline: none; color: var(--ns-panel-text); }
.ns-menu-search input::placeholder { color: var(--ns-panel-muted); }
.ns-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; cursor: pointer; }
.ns-icon-btn:hover { background: var(--ns-dock-hover); }
.ns-menu-cols { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding: 8px 20px 24px; }
.ns-menu-col { list-style: none; margin: 0; padding: 0; }
.ns-menu-group { border-bottom: 1px solid var(--ns-panel-line); }
.ns-menu-group-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 8px; cursor: pointer; text-align: start; }
.ns-menu-group-btn > span { flex: 1; }
.ns-menu-group-btn:hover, .ns-menu-task:hover:not(:disabled) { background: var(--ns-dock-hover); }
.ns-menu-group.is-open > .ns-menu-group-btn { background: rgba(255, 255, 255, .06); }
.ns-menu-tasks, .ns-menu-tasks ul { list-style: none; margin: 0; padding: 0 0 8px; }
.ns-menu-task { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; cursor: pointer; text-align: start; color: var(--ns-panel-text); }
.ns-menu-task:disabled { cursor: default; color: var(--ns-panel-muted); }
.ns-menu-task.is-current { color: var(--ns-gold); }
.ns-depth-1 { padding-left: 36px; }
.ns-depth-2 { padding-left: 52px; }
.ns-depth-3 { padding-left: 68px; }
@media (max-width: 900px) { .ns-menu { left: 8px; right: 8px; } .ns-menu-cols { grid-template-columns: 1fr; } .ns-menu-search { width: 160px; } }

/* ---------- Search-or-ask panel ---------- */
.ns-search { position: fixed; z-index: 45; right: 72px; bottom: 6px; width: min(440px, calc(100vw - 16px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; border-radius: 6px; background: var(--ns-panel); color: var(--ns-panel-text); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: 13px; overflow: hidden; }
.ns-search button, .ns-search input { font: inherit; color: inherit; background: transparent; border: 0; }
.ns-search-heading { padding: 10px 12px 6px; font-size: 12px; color: var(--ns-panel-muted); }
.ns-search-results { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 6px; }
.ns-search-results li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.ns-search-results li.is-hi { background: rgba(255, 255, 255, .09); box-shadow: inset 4px 0 0 var(--ns-gold); }
.ns-search-icon { width: 24px; display: grid; place-items: center; color: var(--ns-panel-muted); }
.ns-search-text { flex: 1; min-width: 0; }
.ns-search-title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ns-search-title strong, .ns-search-context strong { font-weight: 700; color: #fff; }
.ns-search-context { font-size: 12px; color: var(--ns-panel-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-search-empty { color: var(--ns-panel-muted); cursor: default !important; }
.ns-search-skeleton span { display: block; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.ns-search-skeleton span:first-child { width: 24px; height: 24px; }
.ns-search-skeleton span:last-child { flex: 1; }
.ns-kbd { font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); color: var(--ns-panel-muted); background: rgba(255, 255, 255, .06); }
.ns-search-foot { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: rgba(65, 144, 172, .22); border-top: 1px solid var(--ns-panel-line); font-size: 12px; color: var(--ns-panel-muted); }
.ns-search-foot strong { color: var(--ns-panel-text); font-size: 13px; }
.ns-search-input { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px; border-top: 1px solid var(--ns-panel-line); background: rgba(0, 0, 0, .25); }
.ns-search-input input { flex: 1; outline: none; color: var(--ns-panel-text); font-size: 14px; }
.ns-search-input input::placeholder { color: var(--ns-panel-muted); }
.ns-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ns-pill-success { background: rgb(222, 240, 225); color: rgb(30, 94, 46); }
.ns-pill-info { background: rgb(228, 241, 247); color: rgb(2, 94, 126); }
.ns-pill-warning { background: rgb(252, 239, 203); color: rgb(113, 94, 52); }
.ns-pill-danger { background: rgb(253, 230, 228); color: rgb(158, 37, 26); }
.ns-pill-neutral { background: rgb(241, 239, 237); color: rgb(71, 66, 62); }

/* ---------- List / standard page header ---------- */
.ns-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ns-eyebrow-link { font-size: 13px; color: var(--oj-core-text-color-brand, rgb(2, 94, 126)); text-decoration: none; }
.ns-eyebrow-link:hover { text-decoration: underline; }
.ns-h1 { margin: 2px 0 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.005em; }
.ns-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--oj-core-text-color-secondary); }
.ns-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.ns-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Record title band ---------- */
.ledger-page:has(> .ns-band:first-child), .ledger-record-layout > .ledger-page:has(> .ns-band:first-child) { padding-top: 0; }
.ns-band { position: relative; margin: 0 calc(-1 * var(--oj-core-spacing-8x)); padding: 14px var(--oj-core-spacing-8x) 52px; background: var(--ns-band); color: #fff; }
.ns-band-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ns-band-eyebrow { display: inline-block; margin-bottom: 8px; font-size: 13px; color: var(--ns-gold); text-decoration: none; }
.ns-band-eyebrow:hover { text-decoration: underline; }
.ns-band-title-row { display: flex; align-items: center; gap: 14px; }
.ns-type-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; flex: 0 0 auto; }
.ns-type-tile-sm { width: 28px; height: 28px; border-radius: 4px; }
.ns-band-title { display: flex; align-items: center; gap: 10px; }
.ns-band-title h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; }
.ns-band-type { font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.ns-band-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.ns-band-meta a, .ns-band-meta .oj-link-standalone { color: var(--ns-gold) !important; }
.ns-band-meta .oj-text-color-secondary { color: rgba(255, 255, 255, .72) !important; }
.ns-band-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ns-band-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ns-band-updated { font-size: 11px; color: rgba(255, 255, 255, .7); }
.ns-band-sentinel { position: absolute; bottom: 60px; height: 1px; width: 1px; }
/* the first card after the band overlaps it */
.ns-band + .ns-band-sticky + * { margin-top: -56px; position: relative; z-index: 1; }
.ns-band-sticky { position: sticky; top: 6px; z-index: 20; display: flex; align-items: center; gap: 10px; margin: -16px calc(-1 * var(--oj-core-spacing-8x)) 0; padding: 0 var(--oj-core-spacing-8x); height: 0; overflow: hidden; opacity: 0; background: var(--ns-band); color: #fff; transition: opacity .12s ease; pointer-events: none; }
.ns-band-sticky.is-stuck { height: 52px; opacity: 1; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.ns-band-sticky-title { font-size: 16px; font-weight: 700; }
.ns-band-sticky-meta { display: flex; gap: 14px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.ns-band-sticky-meta a { color: var(--ns-gold) !important; }
@media (max-width: 768px) {
  .ns-band, .ns-band-sticky { margin-inline: calc(-1 * var(--oj-core-spacing-4x)); padding-inline: var(--oj-core-spacing-4x); }
  .ns-band-sticky-meta { display: none; }
}

/* Page width and cards in the dock layout */
.ledger-page { max-width: none; padding: var(--oj-core-spacing-5x) var(--oj-core-spacing-8x) var(--oj-core-spacing-6x); }
.ledger-page-wide { max-width: none; }
.ledger-card { border: 0; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ledger-record-layout { height: auto; min-height: calc(100vh - 6px - var(--ns-dock-h)); }
.ledger-record-layout > .ledger-page { height: auto; overflow: visible; }

/* ---------- Home (two columns: reminders | KPIs, trends) ---------- */
.ns-home-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; }
.ns-home-brand { display: flex; align-items: center; gap: 12px; }
.ns-home-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ns-band); color: #fff; font-weight: 700; font-size: 15px; transform: rotate(-8deg); }
.ns-home-brand h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.ns-home-lock { color: var(--oj-core-text-color-secondary); align-self: flex-end; margin-bottom: 4px; }
.ns-home-grid { display: grid; grid-template-columns: minmax(14rem, 23%) 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ns-home-grid { grid-template-columns: 1fr; } }
.ns-home-left, .ns-home-right { display: flex; flex-direction: column; gap: 16px; }
.ns-card { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ns-card-head { display: flex; align-items: center; justify-content: space-between; }
.ns-card-title { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.ns-card-head .ns-card-title { margin: 0; }
.ns-card-sub { margin: -10px 0 12px; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-card-text { margin: 0; font-size: 14px; line-height: 1.5; }
.ns-link { color: rgb(2, 94, 126); text-decoration: none; }
.ns-link:hover { text-decoration: underline; }
.ns-reminders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ns-reminder { display: flex; flex-direction: column; padding-left: 12px; border-left: 3px solid; }
.ns-reminder-count { font-size: 22px; font-weight: 700; line-height: 1.1; }
.ns-tone-danger { border-color: rgb(195, 52, 39); }
.ns-tone-warning { border-color: rgb(199, 125, 33); }
.ns-tone-info { border-color: rgb(65, 144, 172); }
.ns-kpi-strip { display: flex; overflow-x: auto; border-bottom: 1px solid var(--oj-core-divider-color); margin: 0 -20px; padding: 0 20px; }
.ns-kpi-tile { flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; text-align: start; font: inherit; cursor: pointer; }
.ns-kpi-tile:hover { background: rgb(251, 249, 248); }
.ns-kpi-tile.is-selected { border-bottom-color: rgb(2, 94, 126); background: rgb(251, 249, 248); }
.ns-kpi-overview { min-width: 110px; border-right: 1px solid var(--oj-core-divider-color); }
.ns-kpi-label { font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-kpi-row { display: flex; align-items: center; gap: 8px; }
.ns-kpi-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ns-kpi-value-sm { font-size: 15px; font-weight: 700; }
.ns-kpi-caption { font-size: 11px; color: var(--oj-core-text-color-secondary); }
.ns-change { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-kpi-table, .ns-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ns-kpi-table { margin-top: 8px; }
.ns-kpi-table th { text-align: start; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-kpi-table td, .ns-table td { padding: 9px 8px; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-end { text-align: end !important; }
.ns-center { text-align: center !important; }
.ns-row-icon { border: 0; background: transparent; cursor: pointer; color: var(--oj-core-text-color-primary); padding: 2px; border-radius: 4px; }
.ns-row-icon:hover { background: var(--oj-core-bg-color-hover); }
.ns-clickable { cursor: pointer; }
.ns-clickable:hover td { background: rgb(251, 249, 248); }
.ns-ellipsis { max-width: 0; width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- List template ---------- */
.ledger-list-toolbar { gap: 8px !important; }
.ns-searchbox { flex: 0 1 32rem; min-width: 16rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 3px 10px; border: 1px solid rgb(180, 175, 170); border-radius: 6px; background: #fff; cursor: text; }
.ns-searchbox:focus-within { border-color: rgb(2, 94, 126); box-shadow: 0 0 0 1px rgb(2, 94, 126); }
.ns-searchbox input { flex: 1; min-width: 8rem; border: 0; outline: none; font: inherit; font-size: 14px; background: transparent; }
.ns-searchbox input::-webkit-search-cancel-button { cursor: pointer; }
.ns-token { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 8px; border: 1px dashed rgb(2, 94, 126); border-radius: 4px; background: rgb(237, 246, 249); font-size: 12px; color: rgb(2, 94, 126); }
.ns-token strong { font-weight: 600; color: rgb(4, 83, 111); }
.ns-token button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 3px; background: transparent; cursor: pointer; color: inherit; }
.ns-token button:hover { background: rgba(2, 94, 126, .12); }
.ns-results-bar { padding-top: 8px; border-top: 1px solid var(--oj-core-divider-color); }
.ns-row-actions { display: inline-flex; align-items: center; gap: 2px; }
.ns-row-icon-spacer { display: inline-block; width: 20px; }
.ledger-table { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.ns-attachment { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--oj-core-divider-color); border-radius: 6px; font-size: 13px; }
.ns-attachment span { flex: 1; font-weight: 600; }

/* ---------- Banking ---------- */
.ns-bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 16px; }
.ns-link-plain { color: inherit; text-decoration: none; }
.ns-link-plain:hover { text-decoration: underline; }
.ns-bank-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; }
.ns-bank-figures dt { font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-bank-figures dd { margin: 2px 0 0; font-weight: 600; }
.ns-bank-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ns-review { display: grid; grid-template-columns: minmax(18rem, 38%) 1fr; min-height: 28rem; }
@media (max-width: 1000px) { .ns-review { grid-template-columns: 1fr; } }
.ns-review-list { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--oj-core-divider-color); max-height: 70vh; overflow-y: auto; }
.ns-review-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "date amt amt" "desc desc hint"; gap: 2px 10px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--oj-core-divider-color); background: transparent; text-align: start; font: inherit; cursor: pointer; }
.ns-review-item:hover { background: rgb(251, 249, 248); }
.ns-review-item.is-selected { background: rgb(237, 246, 249); box-shadow: inset 4px 0 0 rgb(2, 94, 126); }
.ns-review-date { grid-area: date; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-review-desc { grid-area: desc; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-review-amt { grid-area: amt; justify-self: end; font-weight: 600; }
.ns-review-hint { grid-area: hint; justify-self: end; font-size: 11px; color: rgb(2, 94, 126); }
.is-in, .ns-in { color: rgb(30, 120, 60); }
.is-out { color: var(--oj-core-text-color-primary); }
.ns-review-detail { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.ns-review-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ns-review-head h3 { margin: 2px 0; }
.ns-review-big { font-size: 22px; font-weight: 700; white-space: nowrap; }
.ns-review-section { border: 1px solid var(--oj-core-divider-color); border-radius: 8px; padding: 12px 14px; }
.ns-review-section h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.ns-review-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--oj-core-divider-color); font-size: 14px; }
.ns-review-option:first-of-type { border-top: 0; }
.ns-inline-badge { margin-left: 8px; vertical-align: middle; }
.ns-review-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ns-status-cell { display: inline-flex; align-items: center; gap: 6px; }
.ns-recon { display: grid; grid-template-columns: 1fr 20rem; gap: 24px; align-items: start; }
@media (max-width: 900px) { .ns-recon { grid-template-columns: 1fr; } }
.ns-recon-action { margin-top: 12px; }
.ns-recon-history { margin: 24px 0 8px; }
.ns-bank-card .ns-card-head { align-items: flex-start; gap: 12px; }
.ns-bank-card .ns-card-sub { margin: 4px 0 0; }

/* ---------- Financial statements ---------- */
.ns-report-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.ns-report-bar > * { min-width: 11rem; flex: 0 1 14rem; }
.ns-statement-wrap { overflow-x: auto; padding: 0 0 12px; }
.ns-statement { width: 100%; border-collapse: collapse; font-size: 14px; }
.ns-statement th, .ns-statement td { padding: 7px 20px; text-align: start; font-weight: 400; }
.ns-statement thead th { font-size: 12px; font-weight: 600; color: var(--oj-core-text-color-secondary); border-bottom: 1px solid var(--oj-core-divider-color); background: rgb(251, 249, 248); white-space: nowrap; }
.ns-statement .ns-st-amt { text-align: end; width: 13rem; white-space: nowrap; }
.ns-statement .ns-st-compare { color: var(--oj-core-text-color-secondary); }
.ns-st-heading th { padding-top: 20px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(2, 94, 126); }
.ns-st-sechead th { padding-top: 14px; font-weight: 700; }
.ns-st-line .ns-st-label { padding-left: 36px; }
.ns-st-code { display: inline-block; min-width: 3.5rem; color: var(--oj-core-text-color-secondary); font-variant-numeric: tabular-nums; }
.ns-st-note { margin-left: 8px; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-st-empty .ns-st-label { color: var(--oj-core-text-color-secondary); }
.ns-st-total th, .ns-st-total td { font-weight: 700; border-top: 1px solid var(--oj-core-divider-color); }
.ns-st-total.is-grand th, .ns-st-total.is-grand td { font-size: 15px; font-weight: 800; border-top: 1px solid rgb(22, 21, 19); border-bottom: 3px double rgb(22, 21, 19); }
.ns-statement .is-negative { color: rgb(179, 49, 31); }

/* ---------- Import ---------- */
.ns-import-intro { display: grid; grid-template-columns: minmax(16rem, 1fr) 1.4fr; gap: 16px 32px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .ns-import-intro { grid-template-columns: 1fr; } }
.ns-import-help { color: var(--oj-core-text-color-secondary); background: rgb(251, 249, 248); border-radius: 8px; padding: 10px 14px; }
.ns-import-help p { margin: 0; }
.ns-import-help code { font-size: 12px; background: #fff; border: 1px solid var(--oj-core-divider-color); border-radius: 4px; padding: 0 4px; }
.ns-import-bar { margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
.ns-import-actions { display: flex; gap: 8px; }
.ns-import-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ns-opening td.ns-st-amt { width: 12rem; padding-top: 2px; padding-bottom: 2px; }
.ledger-card-body > oj-c-file-picker { display: block; width: 100%; }

/* ---------- VAT201 ---------- */
.ns-vat-note { margin: 0; flex: 1 1 24rem; max-width: 52rem; }
.ns-vat-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ns-vat-grid { grid-template-columns: 1fr; } }
.ns-vat201 { width: 100%; border-collapse: collapse; font-size: 14px; }
.ns-vat201 th, .ns-vat201 td { padding: 8px 16px; text-align: start; font-weight: 400; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-vat201 thead th { font-size: 12px; font-weight: 600; color: var(--oj-core-text-color-secondary); background: rgb(251, 249, 248); }
.ns-vat201 .ns-st-amt { text-align: end; white-space: nowrap; width: 9rem; }
.ns-vat201 .ns-st-total th, .ns-vat201 .ns-st-total td { font-weight: 700; border-bottom: 0; }
.ns-vat-box { width: 3rem; text-align: center !important; }
.ns-box { display: inline-block; min-width: 2.2rem; padding: 1px 6px; border: 1px solid rgb(2, 94, 126); border-radius: 4px; color: rgb(2, 94, 126); font-size: 12px; font-weight: 700; text-align: center; }
.ns-vat-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 16px 16px; padding: 14px 16px; border-radius: 8px; background: rgb(252, 241, 236); font-weight: 600; }
.ns-vat-result.is-refund { background: rgb(234, 245, 237); }
.ns-vat-result strong { font-size: 20px; }

/* ---------- Users ---------- */
.ns-users { display: grid; grid-template-columns: 1fr 20rem; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ns-users { grid-template-columns: 1fr; } }
.ns-person { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.ns-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(2, 94, 126); color: #fff; font-size: 13px; font-weight: 700; }
.ns-person-name { display: block; font-weight: 600; }
.ns-person-sub { display: block; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-roles { margin: 0; padding: 4px 20px 16px; }
.ns-roles div { padding: 8px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-roles div:last-child { border-bottom: 0; }
.ns-roles dt { font-weight: 700; font-size: 14px; }
.ns-roles dd { margin: 2px 0 0; font-size: 13px; color: var(--oj-core-text-color-secondary); }

/* ---------- Period close ---------- */
.ns-close { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ns-close { grid-template-columns: 1fr; } }
.ns-close-lock { display: flex; flex-direction: column; gap: 12px; }
.ns-lock-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--oj-core-text-color-secondary); }
.ns-lock-state.is-locked { color: rgb(2, 94, 126); }
.ns-checklist { list-style: none; margin: 8px 0 16px; padding: 0; }
.ns-checklist li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-check-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: rgb(30, 120, 60); }
.is-open .ns-check-icon { background: rgb(190, 120, 20); }
.ns-check-label { display: block; font-weight: 600; }
.ns-check-detail { display: block; font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-close-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 16px; }
.ns-close-result dt { font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-close-result dd { margin: 2px 0 0; font-weight: 700; }

/* ---------- Budgets ---------- */
.ns-bgt-bar { margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
.ns-bgt-bar p { margin: 0; }
.ns-bgt-wrap { overflow-x: auto; border: 1px solid var(--oj-core-divider-color); border-radius: 8px; }
.ns-bgt { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.ns-bgt th, .ns-bgt td { padding: 2px 4px; border-bottom: 1px solid var(--oj-core-divider-color); white-space: nowrap; }
.ns-bgt thead th { position: sticky; top: 0; background: rgb(251, 249, 248); font-size: 12px; font-weight: 600; color: var(--oj-core-text-color-secondary); text-align: end; padding: 8px 6px; }
.ns-bgt thead th:first-child { text-align: start; }
.ns-bgt-acct { position: sticky; left: 0; background: #fff; text-align: start; font-weight: 400; padding-left: 12px !important; min-width: 15rem; z-index: 1; }
.ns-bgt-section th { text-align: start; font-weight: 800; padding: 10px 12px 4px !important; background: #fff; }
.ns-bgt-total th { text-align: start; font-weight: 700; padding: 8px 12px !important; position: sticky; left: 0; background: rgb(251, 249, 248); }
.ns-bgt-total td { text-align: end; font-weight: 700; padding: 8px 6px; background: rgb(251, 249, 248); }
.ns-bgt-total.is-grand th, .ns-bgt-total.is-grand td { border-top: 1px solid rgb(22, 21, 19); }
.ns-cell { width: 6.5rem; box-sizing: border-box; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; font: inherit; font-variant-numeric: tabular-nums; text-align: end; background: transparent; color: inherit; }
.ns-cell:hover { border-color: var(--oj-core-divider-color); }
.ns-cell:focus { outline: none; border-color: rgb(2, 94, 126); box-shadow: 0 0 0 1px rgb(2, 94, 126); background: #fff; }
.ns-cell-total { font-weight: 700; background: rgb(251, 249, 248); width: 7.5rem; }

/* ---------- Cash forecast ---------- */
.ns-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin-bottom: 16px; }
.ns-kpi { background: #fff; border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ns-kpi span { font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-kpi strong { font-size: 20px; }
.ns-kpi em { font-style: normal; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-statement th.ns-st-label { white-space: nowrap; }

/* ---------- Analysis codes ---------- */
.ns-analysis { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 16px; align-items: start; margin-bottom: 12px; }
.ns-analysis-head { display: flex; justify-content: flex-end; margin-top: -8px; }
.ns-analysis-add { display: grid; grid-template-columns: 7rem 1fr auto; gap: 8px; align-items: end; }
.ns-codes { list-style: none; margin: 4px 0 12px; padding: 0; }
.ns-codes li { display: grid; grid-template-columns: 4.5rem 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-codes li.is-off { opacity: .55; }
.ns-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.ns-report-bar-2 { margin-top: 12px; }

/* ---------- Payment run ---------- */
.ns-payrun td, .ns-payrun th { vertical-align: middle; }
.ns-pr-check { width: 2.5rem; text-align: center !important; }
.ns-pr-check input { width: 18px; height: 18px; accent-color: rgb(2, 94, 126); }
.ns-payrun tr.is-disabled { color: var(--oj-core-text-color-secondary); }
.ns-payrun-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--oj-core-divider-color); }
.ns-payrun-total { display: flex; align-items: center; gap: 16px; }
.ns-payrun-total strong { font-size: 18px; }

/* ---------- Integrations ---------- */
.ns-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 16px; }
.ns-integration p { margin: 6px 0 0; }
.ns-integration-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ns-integration-head h3 { margin: 0; }

/* ---------- Debtors manager ---------- */
.ns-note-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 900px) { .ns-note-form { grid-template-columns: 1fr; } }
.ns-notes { list-style: none; margin: 12px 0 0; padding: 0; }
.ns-notes li { padding: 10px 0; border-top: 1px solid var(--oj-core-divider-color); }
.ns-notes p { margin: 0 0 2px; }
.ns-promise { font-weight: 600; color: rgb(2, 94, 126); }
.ns-due-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; max-height: 50vh; overflow: auto; }
.ns-stage { border: 1px solid var(--oj-core-divider-color); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.ns-stage-head { display: grid; grid-template-columns: 9rem 1fr auto; gap: 8px; align-items: end; }

/* ---------- API keys ---------- */
.ns-api-docs pre { background: rgb(22, 21, 19); color: #fff; padding: 10px 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; }
.ns-api-docs ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.ns-api-docs li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--oj-core-divider-color); }
.ns-api-docs li span { color: var(--oj-core-text-color-secondary); }
.ns-api-docs code, .ns-statement code { font-size: 12px; }
.ns-key-box { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px dashed rgb(2, 94, 126); border-radius: 6px; background: rgb(237, 246, 249); }
.ns-key-box code { flex: 1; word-break: break-all; font-size: 13px; }
tr.is-disabled { color: var(--oj-core-text-color-secondary); }

/* ---------- Time ---------- */
.ns-time-add { display: grid; grid-template-columns: 9rem 1fr 1fr 6rem 2fr auto auto; gap: 8px 12px; align-items: end; }
@media (max-width: 1200px) { .ns-time-add { grid-template-columns: repeat(2, 1fr); } }
.ns-unbilled { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 12px; margin-bottom: 16px; }
.ns-unbilled-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ns-time-table td { white-space: nowrap; }

/* ---------- Practice ---------- */
.ns-link-button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: rgb(2, 94, 126); cursor: pointer; text-align: start; }
.ns-link-button:hover { text-decoration: underline; }
.ns-plain { border: 0; background: none; padding: 0; cursor: pointer; }
.ns-practice td { white-space: nowrap; vertical-align: top; }
.ns-cur { font-size: 11px; color: var(--oj-core-text-color-secondary); font-weight: 600; }
.ns-payslips .ns-cell { width: 6.5rem; border-color: var(--oj-core-divider-color); }
.ns-viewonly { position: sticky; top: 0; z-index: 5; padding: 6px 16px; background: rgb(252, 241, 220); color: rgb(110, 70, 0); font-size: 13px; font-weight: 600; text-align: center; }

/* Queries: questions about a record, answered in a thread */
.ns-query-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ns-query-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; background: none; border: 1px solid var(--oj-core-divider-color); border-radius: 6px; padding: 8px 12px; cursor: pointer; font: inherit; color: inherit; }
.ns-query-item:hover { background: var(--oj-core-bg-color-hover); }
.ns-query-item > :last-child { grid-column: 1 / -1; }
.ns-query-subject { font-weight: 600; }
.ns-thread { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.ns-thread-msg { padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); max-width: 85%; justify-self: start; }
.ns-thread-msg.is-mine { justify-self: end; background: rgba(2, 94, 126, 0.1); }
.ns-thread-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-progress-bar { height: 8px; border-radius: 4px; background: var(--oj-core-divider-color); overflow: hidden; }
.ns-progress-bar > span { display: block; height: 100%; background: var(--oj-core-success-3, #508223); }
.ns-gap { gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ns-query-cell { text-align: left; min-width: 260px; }
.ns-query-cell .ns-link-button { text-align: left; font-weight: 600; }

/* Approvals */
.ns-decide { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ns-approval-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 12px; border-radius: 8px; border: 1px solid var(--oj-core-divider-color); background: rgba(255, 196, 0, 0.08); }
.ns-approval-bar.is-rejected { background: rgba(200, 0, 0, 0.05); }
.ns-fieldset { border: 0; padding: 0; margin: 12px 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ns-fieldset legend { margin-bottom: 4px; width: 100%; }
.ns-check { display: inline-flex; gap: 6px; align-items: center; }
.ns-bom-row { display: grid; grid-template-columns: 1fr 120px; gap: 8px; margin-bottom: 4px; }
.ns-load-more { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--oj-core-divider-color); }

/* ---------- Chart kit (components/charts, docs/design/charts-spec.md) ----------
   Colours: Redwood palette tokens only, in the validated order (spec §3.9). Five categorical slots; increase and
   decrease are teal and orange (red is kept for status). Dark values apply in Redwood's inverted regions. */
:root {
  --ledger-viz-1: rgb(var(--oj-palette-info-rgb-110));
  --ledger-viz-2: rgb(var(--oj-palette-dvt-rgb-2));
  --ledger-viz-3: rgb(var(--oj-palette-dvt-rgb-8));
  --ledger-viz-4: rgb(var(--oj-palette-dvt-rgb-9));
  --ledger-viz-5: rgb(var(--oj-palette-dvt-rgb-12));
  --ledger-viz-muted: rgb(var(--oj-palette-neutral-rgb-90));
  --ledger-viz-pos: var(--ledger-viz-1);
  --ledger-viz-neg: var(--ledger-viz-2);
  --ledger-viz-total: rgb(var(--oj-palette-neutral-rgb-100));
  --ledger-viz-ink: var(--oj-core-text-color-primary);
  --ledger-viz-surface: var(--oj-core-bg-color-content);
  --ledger-viz-zero: rgb(var(--oj-palette-neutral-rgb-60));
}
.oj-color-invert { --ledger-viz-total: rgb(var(--oj-palette-neutral-rgb-60)); --ledger-viz-zero: rgb(var(--oj-palette-neutral-rgb-110)); }
.ns-viz-viz-1 { fill: var(--ledger-viz-1); stroke: var(--ledger-viz-1); color: var(--ledger-viz-1); }
.ns-viz-viz-2 { fill: var(--ledger-viz-2); stroke: var(--ledger-viz-2); color: var(--ledger-viz-2); }
.ns-viz-viz-3 { fill: var(--ledger-viz-3); stroke: var(--ledger-viz-3); color: var(--ledger-viz-3); }
.ns-viz-viz-4 { fill: var(--ledger-viz-4); stroke: var(--ledger-viz-4); color: var(--ledger-viz-4); }
.ns-viz-viz-5 { fill: var(--ledger-viz-5); stroke: var(--ledger-viz-5); color: var(--ledger-viz-5); }
.ns-viz-pos { fill: var(--ledger-viz-pos); stroke: var(--ledger-viz-pos); color: var(--ledger-viz-pos); }
.ns-viz-neg { fill: var(--ledger-viz-neg); stroke: var(--ledger-viz-neg); color: var(--ledger-viz-neg); }
.ns-viz-total { fill: var(--ledger-viz-total); stroke: var(--ledger-viz-total); color: var(--ledger-viz-total); }
.ns-viz-muted { fill: var(--ledger-viz-muted); stroke: var(--ledger-viz-muted); color: var(--ledger-viz-muted); }
.ns-viz-ink { fill: var(--ledger-viz-ink); stroke: var(--ledger-viz-ink); color: var(--ledger-viz-ink); }
path.ns-viz-viz-1, path.ns-viz-viz-2, path.ns-viz-viz-3, path.ns-viz-viz-4, path.ns-viz-viz-5, path.ns-viz-pos, path.ns-viz-neg, path.ns-viz-total, path.ns-viz-muted { stroke: none; }

.ns-chart { margin: 0; position: relative; }
.ns-chart.is-refreshing .ns-chart-plot { opacity: .5; transition: opacity .2s; }
.ns-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ns-chart-title { margin: 0; font-size: 15px; font-weight: 700; }
.ns-chart-desc { margin: 2px 0 0; font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-chart-tools { display: flex; gap: 2px; flex-shrink: 0; }
.ns-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 2px; }
.ns-chart-key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: 12px; color: var(--oj-core-text-color-primary); cursor: pointer; }
.ns-chart-key:hover { background: var(--oj-core-bg-color-hover); }
.ns-chart-key:focus-visible { outline: 2px solid var(--oj-core-focus-border-color, rgb(var(--oj-palette-info-rgb-110))); outline-offset: 1px; }
.ns-chart-key.is-off { color: var(--oj-core-text-color-secondary); text-decoration: line-through; }
.ns-chart-key.is-off i { opacity: .3; }
.ns-swatch-box { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.ns-swatch-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.ns-chart-plot { position: relative; }
.ns-chart-focus { position: relative; border-radius: 6px; }
.ns-chart-focus:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 2px; }
.ns-chart-svg { display: block; overflow: visible; touch-action: pan-y; }
.ns-chart-axis, .ns-chart-label, .ns-chart-value, .ns-chart-ref text, .ns-chart-note text { font-size: 11px; font-family: inherit; fill: var(--oj-core-text-color-secondary); font-variant-numeric: tabular-nums; }
.ns-chart-label { fill: var(--oj-core-text-color-primary); }
.ns-chart-value { font-weight: 600; fill: var(--oj-core-text-color-primary); }
.ns-chart-axis.is-partial { font-style: italic; }
.ns-chart-grid { stroke: var(--oj-core-divider-color); stroke-width: 1; }
.ns-chart-zero { stroke: var(--ledger-viz-zero); stroke-width: 1; }
.ns-chart-band { fill: var(--oj-core-bg-color-hover); }
.ns-chart-crosshair { stroke: var(--oj-core-text-color-secondary); stroke-width: 1; pointer-events: none; }
.ns-chart-hit { fill: transparent; }
.ns-chart-hit.is-link { cursor: pointer; }
.ns-chart-svg .is-dim { opacity: .6; }
.ns-chart-svg .is-muted { opacity: .55; }
.ns-chart-line path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ns-chart-line circle { stroke: var(--ledger-viz-surface); stroke-width: 2; }
.ns-chart-line circle.is-partial { fill: var(--ledger-viz-surface); stroke: currentColor; }
.ns-chart-ref line { stroke: var(--ledger-viz-total); stroke-width: 2; }
.ns-chart-ref.is-critical line { stroke: var(--oj-core-text-color-danger); stroke-width: 1.5; }
.ns-chart-ref.is-critical text { fill: var(--oj-core-text-color-danger); }
.ns-chart-note line { stroke: var(--oj-core-text-color-secondary); stroke-width: 1; }
.ns-chart-note text { font-weight: 600; fill: var(--oj-core-text-color-primary); }
.ns-chart-note.is-critical text { fill: var(--oj-core-text-color-danger); }
.ns-mtd-bg { fill: var(--ledger-viz-surface); }
.ns-mtd-hatch { stroke: var(--oj-core-text-color-secondary); stroke-width: 1.5; opacity: .45; }
.ns-chart-tip { position: absolute; z-index: 5; min-width: 180px; max-width: 230px; padding: 8px 10px; border-radius: 6px; background: var(--ledger-viz-surface); box-shadow: 0 4px 16px rgba(0, 0, 0, .16), 0 0 0 1px var(--oj-core-divider-color); font-size: 12px; pointer-events: none; }
.ns-tip-title { font-weight: 700; margin-bottom: 4px; }
.ns-tip-sub { font-weight: 400; color: var(--oj-core-text-color-secondary); }
.ns-tip-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px; padding: 1px 0; }
.ns-tip-label { color: var(--oj-core-text-color-secondary); }
.ns-tip-hint { margin-top: 4px; color: var(--oj-core-text-color-secondary); font-size: 11px; }
.ns-chart-foot { margin: 6px 0 0; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-chart-table tr.is-active th, .ns-chart-table tr.is-active td, .ns-statement tr.is-active th, .ns-statement tr.is-active td { background: var(--oj-core-bg-color-hover); }
.ns-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ns-spark { flex-shrink: 0; }
.ns-spark path { fill: none; stroke: var(--ledger-viz-muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ns-spark circle { fill: var(--ledger-viz-1); stroke: var(--ledger-viz-surface); stroke-width: 1.5; }
.ns-spark circle.is-partial { fill: var(--ledger-viz-surface); stroke: var(--ledger-viz-1); }
.ns-change-vs { color: var(--oj-core-text-color-secondary); }
.ns-inbar { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
.ns-inbar-track { position: relative; flex: 1; height: 8px; }
.ns-inbar-fill { position: absolute; left: 0; top: 0; height: 8px; border-radius: 0 4px 4px 0; background: var(--ledger-viz-1); }
.ns-inbar.is-signed .ns-inbar-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ledger-viz-zero); }
.ns-inbar.is-signed .ns-inbar-fill { left: 50%; }
.ns-inbar.is-signed .ns-inbar-fill.is-neg { left: auto; right: 50%; border-radius: 4px 0 0 4px; background: var(--ledger-viz-neg); }
.ns-inbar-num { min-width: 48px; text-align: end; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ns-chart * { transition: none !important; } }
@media (forced-colors: active) {
  .ns-chart-svg path, .ns-chart-svg rect:not(.ns-chart-hit):not(.ns-chart-band):not(.ns-chart-segfocus) { fill: CanvasText; }
  .ns-chart-line path, .ns-chart-grid, .ns-chart-zero { stroke: CanvasText; }
}
.ns-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ns-kpi-grid .ns-kpi-tile { min-width: 0; border: 1px solid var(--oj-core-divider-color); border-radius: 8px; padding: 10px 12px; gap: 4px; text-decoration: none; color: inherit; }
.ns-kpi-grid .ns-kpi-tile:hover { background: var(--oj-core-bg-color-hover); }
.ns-kpi-grid .ns-kpi-tile:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 1px; }
.ns-kpi-grid .ns-kpi-row { justify-content: space-between; }
.ns-kpi-grid .ns-kpi-value { font-size: 18px; }
.ns-kpi-grid .ns-kpi-caption { font-size: 12px; }
.ns-change.is-good { color: var(--oj-core-text-color-success, rgb(var(--oj-palette-success-rgb-120))); }
.ns-change.is-bad { color: var(--oj-core-text-color-danger); }
.ns-home .ns-card + .ns-card .ns-chart { margin-top: 0; }
.ns-chart, .ns-chart-plot { min-width: 0; width: 100%; }
.ns-home-left, .ns-home-right { min-width: 0; }
.ns-chart-note-text { paint-order: stroke; stroke: var(--ledger-viz-surface); stroke-width: 3px; stroke-linejoin: round; }
:root {
  --ledger-viz-age-0: rgb(var(--oj-palette-info-rgb-70));
  --ledger-viz-age-1: rgb(var(--oj-palette-info-rgb-90));
  --ledger-viz-age-2: rgb(var(--oj-palette-info-rgb-110));
  --ledger-viz-age-3: rgb(var(--oj-palette-info-rgb-140));
  --ledger-viz-age-4: rgb(var(--oj-palette-info-rgb-160));
}
.oj-color-invert {
  --ledger-viz-age-0: rgb(var(--oj-palette-info-rgb-100));
  --ledger-viz-age-1: rgb(var(--oj-palette-info-rgb-80));
  --ledger-viz-age-2: rgb(var(--oj-palette-info-rgb-60));
  --ledger-viz-age-3: rgb(var(--oj-palette-info-rgb-50));
  --ledger-viz-age-4: rgb(var(--oj-palette-info-rgb-30));
}
.ns-viz-age-0 { fill: var(--ledger-viz-age-0); color: var(--ledger-viz-age-0); }
.ns-viz-age-1 { fill: var(--ledger-viz-age-1); color: var(--ledger-viz-age-1); }
.ns-viz-age-2 { fill: var(--ledger-viz-age-2); color: var(--ledger-viz-age-2); }
.ns-viz-age-3 { fill: var(--ledger-viz-age-3); color: var(--ledger-viz-age-3); }
.ns-viz-age-4 { fill: var(--ledger-viz-age-4); color: var(--ledger-viz-age-4); }
.ns-chart-gap { stroke: var(--ledger-viz-surface); stroke-width: 2; }
.ns-chart-inlabel { font-size: 11px; font-weight: 600; fill: #fff; pointer-events: none; }
.ns-chart-track { fill: var(--oj-core-bg-color-hover); rx: 3px; }
.ns-chart-target { stroke: var(--ledger-viz-ink); stroke-width: 2; }
.ns-chart-connector { stroke: var(--oj-core-text-color-secondary); stroke-width: 1; }
.ns-chart-axis.is-total { font-weight: 700; fill: var(--oj-core-text-color-primary); }
.ns-chart-note-inline { font-weight: 600; fill: var(--oj-core-text-color-secondary); }
.ns-chart-note-inline.is-good { fill: var(--oj-core-text-color-success, rgb(var(--oj-palette-success-rgb-120))); }
.ns-chart-note-inline.is-bad { fill: var(--oj-core-text-color-danger); }
.ns-chart-legend.is-static .ns-chart-key { cursor: default; }
.ns-chart-legend.is-static .ns-chart-key:hover { background: transparent; }
.ns-swatch-tick { display: inline-block; width: 2px; height: 12px; background: var(--ledger-viz-ink); }
.ns-chart-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-chart-inlabel.is-on-light { fill: var(--oj-core-text-color-primary); }
.ns-ageing { margin: 0 0 16px; padding: 16px; background: var(--ledger-viz-surface); border-radius: 10px; }
.ns-nowrap { white-space: nowrap; }
.ns-chart.is-headless .ns-chart-head { position: absolute; top: -40px; right: 0; z-index: 2; }
.ns-chart.is-headless .ns-chart-legend { margin-top: 0; }

/* ---------- Customisable dashboard (pages/dashboard.tsx, components/dashboard) ---------- */
.ns-dash-actions { display: flex; gap: 8px; }
@media (max-width: 480px) { .ns-home-head { flex-wrap: wrap; gap: 8px; } .ns-home-brand h1 { font-size: 24px; } }
.ns-dash-editbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--ledger-viz-surface); box-shadow: 0 2px 12px rgba(0, 0, 0, .12), 0 0 0 1px rgb(var(--oj-palette-info-rgb-110)); }
.ns-dash-editbar-title { font-weight: 700; margin-right: 8px; }
.ns-dash-editbar-gap { flex: 1; }
.ns-redo { display: inline-flex; transform: scaleX(-1); }
.ns-dash-section { margin: 0 0 20px; }
.ns-dash-section-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.ns-dash-section-title { margin: 0; font-size: 17px; font-weight: 800; }
.ns-dash-collapse { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; color: var(--oj-core-text-color-secondary); }
.ns-dash-collapse:hover { background: var(--oj-core-bg-color-hover); }
.ns-dash-rename { font: inherit; font-size: 16px; font-weight: 800; padding: 2px 8px; border: 1px dashed var(--oj-core-divider-color); border-radius: 6px; background: transparent; flex: 0 1 26ch; min-width: 8ch; width: 26ch; }
.ns-dash-section-tools { display: flex; gap: 4px; margin-left: auto; }
.ns-dash-grid { display: grid; gap: 12px; }
.ns-dash-grid.is-editing { padding: 8px; margin: -8px; border-radius: 12px; background-image: linear-gradient(to right, rgba(14, 114, 151, .06) 1px, transparent 1px); background-size: calc((100% + 12px) / 12) 100%; }
.ns-dash-grid.cols-1, .ns-dash-grid.cols-6 { grid-auto-rows: 88px; }
.ns-widget { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .04); transition: box-shadow .15s; }
.ns-dash-grid.is-editing .ns-widget { box-shadow: 0 0 0 1px rgba(14, 114, 151, .35); }
.ns-widget.is-dragging { z-index: 10; box-shadow: 0 12px 28px rgba(0, 0, 0, .2), 0 0 0 2px rgb(var(--oj-palette-info-rgb-110)); opacity: .95; }
.ns-widget.is-grabbed { z-index: 10; box-shadow: 0 0 0 3px rgb(var(--oj-palette-info-rgb-110)); }
.ns-widget.is-grabbed:focus { outline: none; }
.ns-widget-head { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px 0 14px; }
.ns-dash-grid.is-editing.cols-12 .ns-widget-head { cursor: grab; user-select: none; touch-action: none; }
.ns-widget.is-dragging .ns-widget-head { cursor: grabbing; }
.ns-widget-handle { color: var(--oj-core-text-color-secondary); font-size: 14px; }
.ns-widget-title { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-widget-link { color: inherit; text-decoration: none; }
.ns-widget-link:hover { text-decoration: underline; }
.ns-widget-tools { display: flex; gap: 2px; }
.ns-icon-btn { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; color: var(--oj-core-text-color-primary); cursor: pointer; }
.ns-icon-btn:hover:not(:disabled) { background: var(--oj-core-bg-color-hover); }
.ns-icon-btn:disabled { opacity: .35; cursor: default; }
.ns-icon-btn[aria-pressed="true"] { background: rgb(var(--oj-palette-info-rgb-110)); color: #fff; }
.ns-icon-btn:focus-visible, .ns-text-btn:focus-visible, .ns-dash-collapse:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 1px; }
.ns-text-btn { border: 0; background: transparent; font: inherit; font-size: 13px; color: rgb(var(--oj-palette-info-rgb-110)); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.ns-text-btn:hover { background: var(--oj-core-bg-color-hover); }
.ns-widget-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px 12px; position: relative; }
.ns-widget-lazy { height: 100%; }
.ns-widget-body .ns-chart.is-headless .ns-chart-head { top: -40px; right: -4px; }
.ns-dash-grid.is-editing .ns-chart.is-headless .ns-chart-head { display: none; }
.ns-widget-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, rgb(var(--oj-palette-info-rgb-110)) 50%, rgb(var(--oj-palette-info-rgb-110)) 60%, transparent 60%, transparent 70%, rgb(var(--oj-palette-info-rgb-110)) 70%, rgb(var(--oj-palette-info-rgb-110)) 80%, transparent 80%); border-bottom-right-radius: 8px; }
.ns-widget-size { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 6px; background: rgb(var(--oj-palette-info-rgb-110)); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.ns-widget-note { margin: 0; font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-dash-empty { grid-column: 1 / -1; padding: 16px; text-align: center; }
.ns-widget-kpi { height: 100%; }
.ns-widget-kpi.ns-kpi-tile, .ns-widget-kpi .ns-kpi-tile { display: flex; flex-direction: column; gap: 4px; height: 100%; border: 0; padding: 0; background: transparent; text-decoration: none; color: inherit; }
.ns-widget-kpi .ns-kpi-row { justify-content: space-between; }
.ns-widget-kpi .ns-kpi-value { font-size: 22px; }
.ns-widget-kpi.is-alert .ns-kpi-value { color: var(--oj-core-text-color-danger); }
.ns-widget-alerts { gap: 10px; }
.ns-widget-table { font-size: 13px; }
.ns-widget-table th { text-align: start; font-weight: 600; font-size: 12px; color: var(--oj-core-text-color-secondary); padding: 4px 6px; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-widget-table td { padding: 6px; }
.ns-widget-pill { margin-left: 6px; font-size: 11px; }
.ns-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; font-size: 13px; }
.ns-checklist li { display: flex; gap: 8px; align-items: baseline; }
.ns-checklist li.is-ok > span:first-child { color: var(--oj-core-text-color-success, rgb(var(--oj-palette-success-rgb-120))); font-weight: 700; }
.ns-checklist li.is-todo > span:first-child { color: var(--oj-core-text-color-danger); font-weight: 700; }
.ns-checklist-foot { grid-column: 1 / -1; color: var(--oj-core-text-color-secondary); }
.ns-dash-hint { font-size: 13px; color: var(--oj-core-text-color-secondary); text-align: center; }
.ns-gallery-bar { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 12px; }
.ns-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.ns-gallery-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--oj-core-divider-color); border-radius: 8px; }
.ns-gallery-card p { margin: 4px 0 0; font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-gallery-sub { display: block; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-settings-body { display: grid; gap: 12px; }
/* Company dashboard templates */
.ns-picker-intro { margin: 0 0 12px; }
.ns-template-sections { font-size: 12px !important; }
.ns-templates { display: grid; gap: 20px; }
.ns-templates-h { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.ns-templates section > p { margin: 0 0 10px; }
.ns-templates-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: end; }
.ns-template-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ns-template-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--oj-core-divider-color); border-radius: 8px; }
.ns-template-row > div:first-child { min-width: 0; }
.ns-template-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ns-template-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.ns-template-warn { color: var(--oj-core-text-color-warning); }
.ns-widget-notes { display: grid; gap: 8px; overflow: auto; height: 100%; }
@media (max-width: 767px) {
  .ns-templates-form { grid-template-columns: 1fr; }
  .ns-template-row { flex-direction: column; }
}
@media (max-width: 767px) { .ns-gallery-bar { grid-template-columns: 1fr; } .ns-dash-editbar-title { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ns-widget { transition: none; } }
.ns-widget-kpi .ns-kpi-tile > .ns-kpi-label { display: none; }
.ns-brush { margin-top: 6px; user-select: none; }
.ns-brush-track { position: relative; border-radius: 4px; background: var(--oj-core-bg-color-hover); touch-action: none; cursor: pointer; }
.ns-brush-svg { display: block; }
.ns-brush-area { fill: var(--ledger-viz-muted); opacity: .35; }
.ns-brush-line { fill: none; stroke: var(--ledger-viz-muted); stroke-width: 1.25; }
.ns-brush-shade { position: absolute; top: 0; bottom: 0; background: var(--ledger-viz-surface); opacity: .6; pointer-events: none; }
.ns-brush-window { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 1.5px solid var(--ledger-viz-1); border-radius: 4px; cursor: grab; }
.ns-brush-window:active { cursor: grabbing; }
.ns-brush-window:focus-visible, .ns-brush-handle:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 2px; }
.ns-brush-handle { position: absolute; top: 4px; bottom: 4px; width: 8px; margin-left: -4px; border-radius: 3px; background: var(--ledger-viz-1); cursor: ew-resize; }
.ns-brush-handle::before { content: ""; position: absolute; inset: -6px -10px; }
.ns-brush-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-brush-hint { font-size: 11px; }
.ns-chart-svg .is-faded { opacity: .28; }
.ns-chart-segfocus { fill: none; stroke: var(--ledger-viz-ink); stroke-width: 1.5; rx: 3px; pointer-events: none; }
.ns-filter-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ns-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; border: 1px solid var(--ledger-viz-1); border-radius: 999px; background: var(--oj-core-bg-color-hover); font: inherit; font-size: 13px; font-weight: 600; color: var(--oj-core-text-color-primary); cursor: pointer; }
.ns-filter-chip:hover { background: var(--oj-core-bg-color-active, var(--oj-core-bg-color-hover)); }
.ns-filter-chip:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 2px; }
.ns-filter-count { font-size: 13px; color: var(--oj-core-text-color-secondary); }
.ns-kpi-tile.is-static, .ns-kpi-grid .ns-kpi-tile.is-static:hover { cursor: default; background: transparent; }
.ns-page-charts { display: grid; gap: 16px; padding: 16px; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-page-chart-card { padding: 16px; margin-bottom: 16px; }

/* ---------- Live bank feeds ---------- */
.feed-card-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.feed-panel { border-left: 4px solid var(--oj-core-border-color, #ddd); padding: 16px 20px; }
.feed-tone-ok { border-left-color: rgb(80, 130, 35); }
.feed-tone-warn { border-left-color: rgb(204, 130, 0); }
.feed-tone-bad { border-left-color: rgb(195, 52, 39); }
.feed-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; justify-content: space-between; }
.feed-title { margin: 0; font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.feed-sub { margin: 4px 0 0; font-size: 13px; color: var(--oj-core-text-color-secondary); max-width: 46rem; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.feed-alert { margin: 12px 0 0; padding: 8px 12px; border-radius: 6px; background: rgb(255, 241, 238); color: rgb(130, 30, 20); font-size: 13px; }
.feed-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px 24px; margin: 16px 0 0; }
.feed-facts dt { font-size: 12px; color: var(--oj-core-text-color-secondary); }
.feed-facts dd { margin: 2px 0 0; font-size: 14px; }
.feed-warn { color: rgb(160, 90, 0); font-weight: 600; }
.feed-pending { margin-top: 14px; font-size: 13px; }
.feed-pending summary { cursor: pointer; font-weight: 600; }
.feed-pending table { margin-top: 8px; }
.feed-dialog-lead { margin: 0 0 12px; }
.feed-provider-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed-provider-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--oj-core-divider-color, #e5e5e5); border-radius: 8px; }
.feed-provider-name { font-weight: 600; }
.sandbox-bank { max-width: 34rem; margin: 24px auto; padding: 24px; border-radius: 12px; background: #fff; border-top: 6px solid rgb(30, 90, 160); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.sandbox-bank-brand { font-weight: 800; color: rgb(30, 90, 160); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sandbox-bank-brand span { font-weight: 400; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.sandbox-bank-title { font-size: 20px; margin: 16px 0 8px; }
.sandbox-bank-days { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sandbox-bank-days legend { font-weight: 600; margin-bottom: 6px; }
.sandbox-bank-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* Pay now link on the invoice screen */
.ledger-paynow { display: grid; gap: var(--oj-core-spacing-3x); }
.ledger-paynow-actions { display: flex; gap: var(--oj-core-spacing-2x); align-items: center; }
.ledger-paynow-link { display: flex; gap: var(--oj-core-spacing-3x); align-items: center; flex-wrap: wrap; }
.ledger-paynow-url { overflow-wrap: anywhere; font-family: var(--oj-core-font-family-monospace, ui-monospace, monospace); font-size: .875rem; }
.ledger-paynow-events { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ledger-paynow-events th { text-align: start; font-weight: 600; color: var(--oj-core-text-color-secondary); padding: var(--oj-core-spacing-1x) var(--oj-core-spacing-2x); border-bottom: 1px solid var(--oj-core-divider-color); }
.ledger-paynow-events td { padding: var(--oj-core-spacing-2x); border-bottom: 1px solid var(--oj-core-divider-color); vertical-align: top; }
.ledger-paynow-events .ledger-num { text-align: end; }
@media (max-width: 600px) { .ledger-paynow-events th:nth-child(4), .ledger-paynow-events td:nth-child(4) { display: none; } }
/* SARS eFiling */
.ns-efile-versions { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.ns-efile-version { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.ns-efile-version:hover { background: rgb(var(--oj-palette-neutral-rgb-20)); }
.ns-efile-version:focus-visible { outline: 2px solid rgb(var(--oj-palette-info-rgb-110)); outline-offset: 2px; }
.ns-efile-versions li.is-selected .ns-efile-version { border-color: var(--oj-core-divider-color); background: rgb(var(--oj-palette-neutral-rgb-10)); }
.ns-efile-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.ns-efile-timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 0 0 12px; position: relative; }
.ns-efile-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--oj-core-divider-color); }
.ns-efile-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: rgb(var(--oj-palette-info-rgb-100)); }
.ns-efile-dot[data-status="accepted"] { background: rgb(var(--oj-palette-success-rgb-100)); }
.ns-efile-dot[data-status="rejected"], .ns-efile-dot[data-status="failed"], .ns-efile-dot[data-status="approval_rejected"] { background: rgb(var(--oj-palette-danger-rgb-100)); }
.ns-efile-dot[data-status="awaiting_approval"], .ns-efile-dot[data-status="documents_requested"], .ns-efile-dot[data-status="under_review"] { background: rgb(var(--oj-palette-warning-rgb-100)); }
.ns-efile-reasons { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; border-left: 4px solid rgb(var(--oj-palette-warning-rgb-100)); background: rgb(var(--oj-palette-warning-rgb-10)); }
.ns-efile-reasons.is-rejected, .ns-efile-reasons.is-failed { border-left-color: rgb(var(--oj-palette-danger-rgb-100)); background: rgb(var(--oj-palette-danger-rgb-10)); }
.ns-efile-reasons ul { margin: 6px 0; padding-left: 20px; }
.ns-efile-reasons li { margin: 4px 0; }
.ns-efile-file { display: grid; gap: 4px; margin-top: 12px; }
.ns-approval-bar.ns-efile-approval { background: linear-gradient(rgba(255, 196, 0, 0.08), rgba(255, 196, 0, 0.08)), var(--oj-core-bg-color-content); }
/* Setup wizard */
.ns-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 16px; padding: 0; overflow-x: auto; }
.ns-steps li { flex: 1 1 0; min-width: 0; }
.ns-step { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 3px solid var(--oj-core-divider-color); background: none; font: inherit; color: var(--oj-core-text-color-secondary); text-align: start; cursor: pointer; }
.ns-step:disabled { cursor: default; }
.ns-step-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--oj-palette-neutral-rgb-30)); font-size: 12px; font-weight: 700; color: var(--oj-core-text-color-primary); }
.ns-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ns-steps .is-current .ns-step { border-bottom-color: rgb(4, 83, 111); color: var(--oj-core-text-color-primary); font-weight: 600; }
.ns-steps .is-current .ns-step-n { background: rgb(4, 83, 111); color: #fff; }
.ns-steps .is-done .ns-step { border-bottom-color: rgb(var(--oj-palette-success-rgb-60, 80, 130, 60)); }
.ns-steps .is-done .ns-step-n { background: var(--oj-core-text-color-success); color: #fff; }
@media (max-width: 768px) {
  .ns-steps .ns-step-label { display: none; }
  .ns-steps .is-current .ns-step-label { display: inline; white-space: normal; }
  .ns-steps li { flex: 0 0 auto; }
  .ns-steps .is-current { flex: 1 1 auto; }
}
.ns-step-intro { margin: 0 0 12px; }
.ns-step-switch { margin: 12px 0; }
.ns-step-sub { margin: 20px 0 4px; }
.ns-setup-later { margin: 12px 4px; color: var(--oj-core-text-color-secondary); }
.ns-link-button { border: 0; background: none; padding: 0; font: inherit; color: var(--oj-core-text-color-link, rgb(4, 83, 111)); text-decoration: underline; cursor: pointer; }
.ns-bank-list { list-style: none; margin: 0 0 12px; padding: 0; }
.ns-bank-list li { padding: 8px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-inline-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ns-inline-add oj-c-input-text { flex: 1 1 16rem; }

/* Choice cards (start fresh / switch, which system) */
.ns-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.ns-choice-grid legend { margin-bottom: 8px; padding: 0; }
.ns-choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) { .ns-choice-grid, .ns-choice-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.ns-choice { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--oj-core-divider-color); border-radius: 8px; background: var(--oj-core-bg-color-content); cursor: pointer; }
.ns-choice:hover { border-color: rgb(65, 144, 172); }
.ns-choice.is-selected { border-color: rgb(4, 83, 111); box-shadow: 0 0 0 2px rgba(4, 83, 111, .25); }
.ns-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ns-choice:focus-within { outline: 2px solid rgb(4, 83, 111); outline-offset: 2px; }
.ns-choice-title { font-weight: 600; }
.ns-choice-body { font-size: 13px; color: var(--oj-core-text-color-secondary); }

/* Switching from Sage, Pastel or Xero */
.ns-switch-callout { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: rgb(var(--oj-palette-brand-rgb-10, 233, 243, 246)); }
.ns-switch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ns-switch-head h3 { margin: 0 0 2px; }
.ns-switch-head p { margin: 0; }
.ns-switch-settings { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-bottom: 12px; }
.ns-switch-settings oj-c-input-date-text { flex: 0 1 22rem; }
.ns-switch-files { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; margin: 8px 0 16px; }
@media (max-width: 900px) { .ns-switch-files { grid-template-columns: minmax(0, 1fr); } }
.ns-export-list { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ns-export-list li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--oj-core-divider-color); color: var(--oj-core-text-color-secondary); }
.ns-export-list li strong { color: var(--oj-core-text-color-primary); font-weight: 600; }
.ns-export-tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--oj-core-divider-color); font-size: 11px; }
.ns-export-list .is-done .ns-export-tick { background: var(--oj-core-text-color-success); border-color: transparent; color: #fff; }
.ns-file-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ns-file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name remove" "kind kind"; align-items: center; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
.ns-file-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.ns-file-list li > oj-c-button { grid-area: remove; }
.ns-file-kind { grid-area: kind; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ns-file-kind oj-c-select-single { width: 13rem; max-width: 60%; }
.ns-dry-run { border-top: 1px solid var(--oj-core-divider-color); padding-top: 12px; }
.ns-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 1100px) { .ns-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ns-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ns-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: rgb(251, 249, 248); min-width: 0; }
.ns-tile-label { font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-tile-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ns-tile-note { font-size: 12px; color: var(--oj-core-text-color-secondary); overflow-wrap: anywhere; }
.ns-check-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; }
.ns-check { display: inline-flex; gap: 6px; align-items: baseline; font-size: 14px; }
.ns-check > span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; }
.ns-check.is-ok > span { background: var(--oj-core-text-color-success); }
.ns-check.is-off > span { background: var(--oj-core-text-color-warning); }
.ns-issues { list-style: none; margin: 0; padding: 0; }
.ns-issue { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--oj-core-divider-color); font-size: 14px; }
.ns-issue oj-c-badge { flex: none; }
.ns-switch-empty { color: var(--oj-core-text-color-secondary); padding: 12px 0; }
.ns-table-scroll { overflow-x: auto; margin: 0 0 8px; }
.ns-map .ns-st-label { min-width: 12rem; }
.ns-map-target { min-width: 16rem; }
.ns-map-target oj-c-select-single { width: 100%; max-width: 22rem; }
.ns-map-reason { display: block; font-size: 12px; color: var(--oj-core-text-color-secondary); }
.ns-switch-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; }
.ns-switch-details summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
@media (max-width: 768px) {
  .ns-statement th, .ns-statement td { padding: 7px 10px; }
  .ns-statement .ns-st-amt { width: auto; }
}
.ns-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ns-pill { padding: 6px 12px; border: 1px solid var(--oj-core-divider-color); border-radius: 999px; background: var(--oj-core-bg-color-content); font: inherit; font-size: 14px; color: var(--oj-core-text-color-primary); cursor: pointer; }
.ns-pill:hover { background: var(--oj-core-bg-color-hover); }
.ns-pill.is-selected { background: rgb(4, 83, 111); border-color: rgb(4, 83, 111); color: #fff; }
.ns-pill:focus-visible { outline: 2px solid rgb(4, 83, 111); outline-offset: 2px; }
/* On a phone the mapping and contact tables stack: one block per row, the Ledger choice under the source account. */
@media (max-width: 768px) {
  .ns-map thead { display: none; }
  .ns-map, .ns-map tbody, .ns-map tr, .ns-map th, .ns-map td { display: block; width: auto; }
  .ns-map tr { padding: 10px 0; border-bottom: 1px solid var(--oj-core-divider-color); }
  .ns-map.ns-statement th, .ns-map.ns-statement td { padding: 2px 0; text-align: start; }
  .ns-map .ns-st-line .ns-st-label { padding-left: 0; min-width: 0; font-weight: 600; }
  .ns-map .ns-st-amt { text-align: start; color: var(--oj-core-text-color-secondary); }
  .ns-map-target { min-width: 0; }
  .ns-map-target oj-c-select-single { max-width: none; }
}

/* ---------- AI assistant ---------- */
.ns-ai-notice p { margin: 0 0 10px; max-width: 72ch; }
.ns-ai-roles { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ns-ai-roles legend { margin-bottom: 4px; }
.ns-ask-examples { list-style: none; margin: 0; padding: 8px 16px 16px; display: grid; gap: 8px; }
.ns-ask-example { all: unset; cursor: pointer; display: block; padding: 10px 12px; border: 1px solid var(--oj-core-divider-color); border-radius: var(--oj-core-border-radius-md); }
.ns-ask-example:hover, .ns-ask-example:focus-visible { background: var(--oj-core-bg-color-hover); outline: 2px solid transparent; }
.ns-ask-example:focus-visible { box-shadow: 0 0 0 2px var(--oj-core-focus-border-color); }
.ns-ask-turns { display: grid; gap: 12px; }
.ns-ask-turn { display: grid; gap: 10px; }
.ns-ask-q { font-weight: 600; }
.ns-ask-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-ask-a { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.ns-ask-input { display: grid; gap: 8px; }