/* Themes shrink the root font; pin it so Polaris rem sizing renders correctly. */
html { font-size: 16px; }

/* Border-box on everything we own. .plan-card set height:100% with padding and
   no box-sizing, so every plan card rendered ~38px taller than its grid row and
   spilled over the card beneath it. */
.page, .page *, .page *::before, .page *::after { box-sizing: border-box; }
body { font-size: 1rem; line-height: 1.5; margin: 0; }

/* Polaris s-page constrains its own width from inside its shadow root, which
   left half a wide screen empty and squeezed the finance tables. Layout is ours
   instead; s-section is still used for the card chrome so the surfaces stay
   native. */
/* Spacing is set here rather than negotiated with the components.
   A flex `gap` on the page plus whatever margin s-section carries in its own
   shadow root produced three different gaps on one screen: 2px under the metric
   row, 8px under the aging card, 19px under the toolbar. Every block now owns
   one explicit bottom margin and the components' own spacing is zeroed. */
.page {
  display: block;
  width: 100%;
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 3rem;
  box-sizing: border-box;
}
/* Spacing belongs to the blocks themselves, not to a parent selector.
   Every screen wraps its content in a v-if/v-else div, so `.page > *` matched
   that wrapper and never reached the cards inside it — which is why three
   attempts at fixing the rhythm changed nothing on screen. */
.page .card,
.page .cards,
.page .plans-grid,
.page .split { margin: 0 0 1rem 0; }

.page .toolbar { margin: 0 0 0.75rem 0; }

/* Banners are the other component shipped with :host{display:contents}, so they
   generate no box and nothing after one got any gap — which is what was still
   visibly wrong on Reminders and Plans. An author style on the host beats the
   component's own :host rule, so forcing display:block gives it a box we can
   space. Same trick would work for s-section; owning that element was still the
   better call because its geometry is ours, not just its margin. */
.page s-banner,
.page s-stack[direction="block"] { display: block; }
.page s-banner { margin: 0 0 1rem 0; }
.page s-banner + s-banner { margin-top: -0.375rem; }

/* Inside a group the gap comes from the grid, so items must not add their own
   margin or the rows drift apart. */
.cards > .card,
.plans-grid > .plan-card,
.split > .card { margin-bottom: 0; }

/* Nothing should push against the bottom of its own card. */
.card > *:last-child { margin-bottom: 0; }

/* Our own card, not s-section.
   s-section's host is `display: contents`, so it generates no box: margins,
   heights and flex gaps applied to it are silently ignored, and its inner card
   takes its spacing from a hash-suffixed custom property that Polaris only sets
   for sections nested inside another section. At page level that resolves to
   0rem, which is why blocks touched. Owning the element makes geometry ours. */
.card {
  background: var(--s-color-bg-surface, #fff);
  border: 1px solid var(--s-color-border, #e3e3e3);
  border-radius: .75rem;
  padding: 1rem 1.125rem;
  box-sizing: border-box;
}
.card-head {
  font-size: .8125rem;
  font-weight: 650;
  color: var(--s-color-text, #303030);
  margin-bottom: .625rem;
}
.card > .card-head:only-child { margin-bottom: 0; }
.cards > .card { height: 100%; }

/* Inside a group the gap is tighter than between groups, so the four metric
   cards read as one row rather than four unrelated blocks. */
.page > .cards,
.page > .plans-grid { gap: 0.625rem; }


/* Metric cards and plan cards: real gaps, equal heights. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.625rem;
  align-items: stretch;
}
.cards > .card { height: 100%; }
.cards.plans { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; }
.cards > s-section { display: block; height: 100%; }

/* Page toolbar: filters left, actions right. Not a card - it is chrome. */
.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0;
}
.toolbar .left { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.toolbar .left:empty { display: none; }
/* With no title to balance against, actions belong on the right. */
.toolbar:has(.left:empty) { justify-content: flex-end; padding-top: 0; }
.toolbar .right { display: flex; align-items: center; gap: 0.5rem; }
.page-heading {
  /* An h1 inside the Polaris context inherits nothing useful and falls back to
     the browser's serif default, which reads as an unstyled document. */
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--s-color-text, #303030);
}
body, .page, .page * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.page h1, .page h2, .page h3, .page h4 { font-family: inherit; }

/* ---------------------------------------------------------------------------
   Money and data grids

   Every figure is right-aligned with tabular numerals. In finance software,
   ragged left-aligned money is the fastest possible tell that the builders do
   not work with money.
   --------------------------------------------------------------------------- */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.neg { color: var(--s-color-text-critical, #a32b22); }
.muted { color: var(--s-color-text-secondary, #616161); }

.grid { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.grid th {
  text-align: left;
  font-weight: 550;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  color: var(--s-color-text-secondary, #616161);
  border-bottom: 1px solid var(--s-color-border, #e3e3e3);
}
.grid th.num { text-align: right; }
.grid td {
  padding: 0.6875rem 0.75rem;
  border-bottom: 1px solid var(--s-color-border-secondary, #f0f0f0);
  vertical-align: middle;
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr.clickable { cursor: pointer; }
.grid tbody tr.clickable:hover { background: var(--s-color-bg-surface-hover, #f7f7f7); }
.grid .rowlink { font-weight: 550; color: var(--s-color-text, #303030); }
.grid tbody tr.clickable:hover .rowlink { text-decoration: underline; }
.scroll-x { overflow-x: auto; }

/* An empty table still shows its headers, greyed, so the merchant learns the
   shape of what is coming before any data arrives. */
.grid.is-empty th { color: var(--s-color-text-disabled, #b5b5b5); }
.empty-row td {
  padding: 2.25rem 0.75rem;
  text-align: center;
  color: var(--s-color-text-secondary, #616161);
}
.empty-row .empty-head {
  display: block;
  font-weight: 650;
  color: var(--s-color-text, #303030);
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Credit dial — the signature element.

   One horizontal capacity track, always the same three segments in the same
   order, always with the numeric triple beneath. Never a donut, never animated.
   --------------------------------------------------------------------------- */
.dial-track {
  display: flex;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--s-color-bg-fill-tertiary, #e3e3e3);
}
.dial-track.sm { height: 0.375rem; min-width: 4.5rem; }
.dial-seg { height: 100%; }
.dial-seg.current  { background: #46586e; }
.dial-seg.overdue  { background: #a32b22; }
.dial-seg.over     { background: #a32b22; }
.dial-nums {
  margin-top: 0.4375rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--s-color-text-secondary, #616161);
}
.dial-nums strong { color: var(--s-color-text, #303030); font-weight: 650; }
.dial-nums .sep { opacity: 0.45; margin: 0 0.4375rem; }
.dial-limit { margin-top: 0.125rem; font-size: 0.75rem; color: var(--s-color-text-secondary, #616161); }
.dial-cell { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }

/* Aging bar: same visual language as the dial. */
.aging-track { display: flex; width: 100%; height: 0.625rem; border-radius: 999px; overflow: hidden;
  background: var(--s-color-bg-fill-tertiary, #e3e3e3); }
.aging-seg.b0 { background: #46586e; }
.aging-seg.b1 { background: #7a6a3f; }
.aging-seg.b2 { background: #b8791c; }
.aging-seg.b3 { background: #8f4a1e; }
.aging-seg.b4 { background: #a32b22; }
.aging-key { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.625rem; font-size: 0.75rem; }
.aging-key .k { display: flex; align-items: center; gap: 0.375rem; }
.aging-key .sw { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.aging-key .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Metric cards: one format, one weight. */
.metric { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric.neg { color: var(--s-color-text-critical, #a32b22); }
.metric-sub { font-size: 0.75rem; color: var(--s-color-text-secondary, #616161); margin-top: 0.125rem; }

/* Tabs — Polaris ships no s-tabs, so this matches its look. */
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--s-color-border, #e3e3e3); }
.tabs button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 550;
  color: var(--s-color-text-secondary, #616161);
  padding: 0.5rem 0.75rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--s-color-text, #303030); }
.tabs button[aria-selected="true"] {
  color: var(--s-color-text, #303030);
  border-bottom-color: var(--s-color-text, #303030);
}
.tabs .count { opacity: 0.6; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }

/* Plans: equal-height cards with the action pinned to the bottom. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
  align-items: stretch;
}
/* Our own card rather than s-section: a web component will not pass a stretched
   grid height through its shadow root, so the cards came out ragged and the
   buttons landed at four different heights. */
.plan-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--s-color-bg-surface, #fff);
  border: 1px solid var(--s-color-border, #e3e3e3);
  border-radius: .75rem;
  padding: 1.125rem;
}
.plan-card.featured { border-color: #10233b; box-shadow: inset 0 0 0 1px #10233b; }
.plan-card .plan-name { font-size: .8125rem; font-weight: 600; color: var(--s-color-text-secondary, #616161); }
.plan-card .plan-body { flex: 1 1 auto; }
.plan-card .plan-action { margin-top: 1rem; }
/* Reserved on every card so the price line starts at the same y. */
.plan-flag { min-height: 1.375rem; margin: .5rem 0 .625rem; }
.plan-includes { margin: .625rem 0 0; padding-left: 1.125rem; font-size: .8125rem; }
.plan-includes li { margin-bottom: .1875rem; }
.plan-blurb { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); margin: 0; }
.plan-price { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; }
.plan-price .per { font-size: 0.8125rem; font-weight: 400; color: var(--s-color-text-secondary, #616161); }
.plan-popular { display: inline-block; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; background: #10233b; color: #fff; padding: 0.125rem 0.5rem; border-radius: 999px; }

.center { text-align: center; padding: 2.5rem 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.inline-note { font-size: 0.8125rem; color: var(--s-color-text-secondary, #616161); }

/* Bulk action bar: appears only when rows are selected. */
.bulkbar {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1rem; margin-bottom: .75rem; border-radius: .625rem;
  background: var(--s-color-bg-surface-secondary, #f7f7f7);
  border: 1px solid var(--s-color-border, #e3e3e3);
}
.bulkbar .count { font-weight: 650; white-space: nowrap; }
.grid td.pick, .grid th.pick { width: 2.25rem; padding-right: 0; }

/* Simulator: the checkout notice rendered as the buyer would see it. */
.sim-outcome { border-radius: .625rem; padding: 1rem 1.125rem; border: 1px solid var(--s-color-border, #e3e3e3); }
.sim-outcome + .sim-outcome { margin-top: .75rem; }
.sim-outcome.allow { border-color: #b7dfc6; background: #f2fbf5; }
.sim-outcome.hide_terms { border-color: #f0d9a8; background: #fdf8ee; }
.sim-outcome.block { border-color: #f2c4c4; background: #fff4f4; }
.sim-label { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--s-color-text-secondary, #616161); }
.sim-verdict { font-size: 1rem; font-weight: 650; margin: .25rem 0 .375rem; }
.sim-why { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); }
.sim-buyer {
  margin-top: .75rem; padding: .75rem .875rem; border-radius: .5rem;
  background: #fff; border: 1px dashed var(--s-color-border, #d8dee5); font-size: .875rem;
}
.sim-buyer .cap { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--s-color-text-secondary, #616161); display: block; margin-bottom: .25rem; }

/* Ledger drill-down. */
.postings { background: var(--s-color-bg-surface-secondary, #fafafa); }
.postings table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.postings td { padding: .3125rem .75rem; border: 0; }
.postings .acct { color: var(--s-color-text-secondary, #616161); }
.rowexpand { cursor: pointer; user-select: none; }
.rowexpand .chev { display: inline-block; width: .75rem; color: var(--s-color-text-secondary, #616161); }

.clickable-key { cursor: pointer; }
.clickable-key:hover .v { text-decoration: underline; }

/* Onboarding wizard */
.wizard { max-width: 56rem; margin: 0 auto; }
.wizard-steps { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.wizard-step {
  flex: 1 1 8rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .8125rem;
  background: var(--s-color-bg-surface-secondary, #f1f1f1); color: var(--s-color-text-secondary, #616161);
  border-bottom: 2px solid transparent;
}
.wizard-step.done { color: var(--s-color-text, #303030); border-bottom-color: #b7dfc6; }
.wizard-step.active {
  background: var(--s-color-bg-surface, #fff); color: var(--s-color-text, #303030);
  font-weight: 650; border-bottom-color: #10233b;
}
.wizard-step .n { opacity: .55; margin-right: .375rem; font-variant-numeric: tabular-nums; }

.choice {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .625rem;
  padding: .875rem 1rem; background: var(--s-color-bg-surface, #fff);
}
.choice + .choice { margin-top: .625rem; }
.choice:hover { border-color: #b9c0c8; }
.choice.selected { border-color: #10233b; box-shadow: inset 0 0 0 1px #10233b; }
.choice .title { font-weight: 650; font-size: .9375rem; }
.choice .desc { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); margin-top: .1875rem; }
.choice .rec {
  display: inline-block; font-size: .6875rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; background: #10233b; color: #fff; padding: .0625rem .4375rem;
  border-radius: 999px; margin-left: .4375rem; vertical-align: middle;
}
.wizard-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.suggest-note { font-size: .75rem; color: var(--s-color-text-secondary, #616161); margin-top: .1875rem; }
.limit-input { width: 9rem; }

/* Dunning: a vertical timeline. Collections sequences are linear; a canvas
   builder would be showing off. */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: ''; position: absolute; left: .3125rem; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--s-color-border, #e3e3e3);
}
.tl-step { position: relative; padding: .625rem 0 .875rem; }
.tl-step::before {
  content: ''; position: absolute; left: -1.5rem; top: 1rem;
  width: .6875rem; height: .6875rem; border-radius: 50%;
  background: #46586e; box-shadow: 0 0 0 3px var(--s-color-bg, #f1f1f1);
}
.tl-step.pre::before { background: #7a94b8; }
.tl-step.late::before { background: #a32b22; }
.tl-step.off::before { background: var(--s-color-border, #d8dee5); }
.tl-when { font-weight: 650; font-size: .875rem; }
.tl-subject { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); margin-top: .125rem; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; cursor: pointer; }
.tl-edit { margin-top: .75rem; padding: .875rem; border-radius: .5rem;
  background: var(--s-color-bg-surface-secondary, #f7f7f7); border: 1px solid var(--s-color-border, #e3e3e3); }
.tl-vars { font-size: .75rem; color: var(--s-color-text-secondary, #616161); margin-top: .375rem; font-family: ui-monospace, monospace; }

/* Cash forecast: columns, not a library. */
.forecast { display: flex; align-items: flex-end; gap: .5rem; height: 9rem; margin: .5rem 0 .25rem; }
.fc-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.fc-bar { background: #46586e; border-radius: .25rem .25rem 0 0; min-height: 2px; }
.fc-bar.empty { background: var(--s-color-border, #e3e3e3); }
.fc-labels { display: flex; gap: .5rem; }
.fc-label { flex: 1; text-align: center; font-size: .6875rem; color: var(--s-color-text-secondary, #616161); }
.fc-amt { display: block; font-variant-numeric: tabular-nums; color: var(--s-color-text, #303030); font-weight: 600; }
.util-bar { height: .375rem; border-radius: 999px; background: var(--s-color-bg-fill-tertiary, #e3e3e3); overflow: hidden; min-width: 4rem; }
.util-fill { height: 100%; background: #46586e; }
.util-fill.high { background: #b8791c; }
.util-fill.over { background: #a32b22; }

/* Cash application: payments on the left, that account's invoices on the right. */
.split { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: .625rem; align-items: start; }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; } }
.pay-row {
  padding: .625rem .75rem; border-radius: .5rem; cursor: pointer;
  border: 1px solid transparent;
}
.pay-row + .pay-row { margin-top: .25rem; }
.pay-row:hover { background: var(--s-color-bg-surface-hover, #f7f7f7); }
.pay-row.selected { border-color: #10233b; background: var(--s-color-bg-surface-secondary, #f7f7f7); }
.pay-amt { font-weight: 650; font-variant-numeric: tabular-nums; }
.pay-meta { font-size: .75rem; color: var(--s-color-text-secondary, #616161); }
.alloc-input { width: 8rem; }
.remaining { font-variant-numeric: tabular-nums; font-weight: 650; }
.remaining.over { color: var(--s-color-text-critical, #a32b22); }
.remaining.zero { color: var(--s-color-text-success, #0c5132); }
.why { font-size: .6875rem; color: var(--s-color-text-secondary, #616161); }

/* Reconciliation: the green tick is the whole point, so it has to be legible. */
.tie { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-radius: .625rem;
  border: 1px solid var(--s-color-border, #e3e3e3); }
.tie + .tie { margin-top: .5rem; }
.tie.ok { border-color: #b7dfc6; background: #f2fbf5; }
.tie.off { border-color: #f2c4c4; background: #fff4f4; }
.tie.unknown { background: var(--s-color-bg-surface-secondary, #f7f7f7); }
.tie .mark { font-size: 1.125rem; line-height: 1; }
.tie .body { flex: 1; }
.tie .headline { font-weight: 650; font-variant-numeric: tabular-nums; }
.tie .detail { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); }
.map-row { display: grid; grid-template-columns: 1fr 10rem; gap: .75rem; align-items: center; padding: .375rem 0; }
.map-row .hint { font-size: .75rem; color: var(--s-color-text-secondary, #616161); }

/* ---------------------------------------------------------------------------
   Accounting
   Scoped under .acct so nothing here can reach another screen.
   Spacing is on an 8px scale throughout: 8 / 16 / 24.
   --------------------------------------------------------------------------- */

/* Polaris form controls are display:contents, so width and alignment cannot be
   applied to them until they are given a box. */
.acct s-text-field,
.acct s-date-field { display: block; }

.acct .page-head { margin-bottom: 1rem; }
.acct .page-head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; color: var(--s-color-text, #303030); }
.acct .page-head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #616161); margin-top: .125rem; }

.acct .card { padding: 1rem 1.25rem 1.25rem; }
.acct .section-title { font-size: .875rem; font-weight: 650; letter-spacing: -.005em; color: var(--s-color-text, #303030); }
.acct .section-sub { font-size: .78125rem; line-height: 1.45; color: var(--s-color-text-secondary, #616161); margin-top: .125rem; max-width: 44rem; }
.acct .section-head { margin-bottom: 1rem; }

.acct .label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--s-color-text-secondary, #6b7177);
}

/* --- reconciliation ------------------------------------------------------ */
/* Three panes divided by hairlines: ours, the verdict, theirs. Read left to
   right it is a sentence, which is why the difference sits in the middle. */
.acct .recon {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--s-color-border, #e3e3e3);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--s-color-bg-surface, #fff);
}
.acct .recon + .recon { margin-top: .5rem; }
.acct .recon > .pane { padding: 1rem 1.25rem; }
.acct .recon > .pane + .pane { border-left: 1px solid var(--s-color-border-secondary, #ececec); }
.acct .recon > .pane.mid { background: var(--s-color-bg-surface-secondary, #fafafa); }
@media (max-width: 52rem) {
  .acct .recon { grid-template-columns: 1fr; }
  .acct .recon > .pane + .pane { border-left: 0; border-top: 1px solid var(--s-color-border-secondary, #ececec); }
}

.acct .amount {
  font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums; margin-top: .375rem;
  color: var(--s-color-text, #303030);
}
.acct .amount.pending { color: var(--s-color-text-secondary, #8c9196); font-weight: 500; font-size: 1rem; }
.acct .amount.diff { color: #8e1f1b; }
.acct .meta { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .25rem; }

.acct .status {
  display: inline-flex; align-items: center; gap: .375rem;
  margin-top: .5rem; padding: .1875rem .5rem; border-radius: .25rem;
  font-size: .6875rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent;
}
.acct .status .dot { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.acct .status.ok { background: #eef7f1; color: #0c5132; border-color: #cfe7d9; }
.acct .status.off { background: #fdf0ef; color: #8e1f1b; border-color: #f2d1cf; }
.acct .status.idle { background: var(--s-color-bg-surface-secondary, #f4f4f4); color: #6b7177; border-color: var(--s-color-border, #e3e3e3); }

.acct .recon-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
}
.acct .recon-help { font-size: .75rem; line-height: 1.5; color: var(--s-color-text-secondary, #6b7177); max-width: 40rem; }

/* --- exports -------------------------------------------------------------- */
.acct .range { margin-bottom: 1rem; }
.acct .range .fields { display: flex; align-items: end; gap: .75rem; margin-top: .375rem; flex-wrap: wrap; }
.acct .range .field { width: 9.5rem; }
.acct .range .last { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); padding-bottom: .5rem; margin-left: auto; }

.acct .export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 52rem) { .acct .export-grid { grid-template-columns: 1fr; } }

/* An action row, not a box: one hairline, no fill, and the action on the right
   where the eye already is after reading the description. */
.acct .export-row {
  display: grid; grid-template-columns: 1.75rem 1fr auto;
  align-items: center; gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--s-color-border, #e3e3e3);
  border-radius: .5rem;
  transition: border-color .12s ease, background-color .12s ease;
}
.acct .export-row:hover { border-color: #c9ced4; background: var(--s-color-bg-surface-hover, #fcfcfd); }
.acct .export-row .ico { display: grid; place-items: center; color: var(--s-color-text-secondary, #8c9196); }
.acct .export-row .name { font-size: .8125rem; font-weight: 650; line-height: 1.3; }
.acct .export-row .desc { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; line-height: 1.4; }

/* --- chart of accounts ---------------------------------------------------- */
.acct .coa { width: 100%; border-collapse: collapse; }
.acct .coa th {
  text-align: left; font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--s-color-text-secondary, #6b7177);
  padding: 0 1rem .5rem 0;
  border-bottom: 1px solid var(--s-color-border, #e3e3e3);
  white-space: nowrap;
}
.acct .coa th.code { width: 9.5rem; text-align: right; padding-right: 0; }
.acct .coa td {
  padding: .5rem 1rem .5rem 0;
  border-bottom: 1px solid var(--s-color-border-secondary, #f1f1f1);
  vertical-align: middle;
}
.acct .coa tr:last-child td { border-bottom: 0; }
.acct .coa .name { font-size: .8125rem; font-weight: 650; color: var(--s-color-text, #303030); white-space: nowrap; }
.acct .coa .desc { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); line-height: 1.4; }
.acct .coa td.code { width: 9.5rem; padding-right: 0; }
.acct .coa .nocode { margin-left: .5rem; font-size: .6875rem; font-weight: 600; color: #8a6116; }

.acct .save-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--s-color-border, #e3e3e3);
}
.acct .save-state { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); }
.acct .save-state.dirty { color: #8a6116; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Companies
   Scoped under .cos. The table is the workspace; everything else supports it,
   so only the table gets a card. Spacing is on the same 8px scale.
   --------------------------------------------------------------------------- */

.cos s-text-field, .cos s-select, .cos s-search-field { display: block; }

.cos .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cos .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.cos .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; }

/* Filters sit on the page, not in a card: they are chrome for the table. */
.cos .filters { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }

.cos .segmented { display: inline-flex; padding: .1875rem; gap: .125rem; border-radius: .5rem;
  background: var(--s-color-bg-surface-secondary, #f1f1f1); flex-wrap: wrap; }
.cos .segmented button {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  font-size: .8125rem; font-weight: 550; line-height: 1;
  padding: .4375rem .625rem; border-radius: .375rem;
  color: var(--s-color-text-secondary, #6b7177); background: transparent;
  display: inline-flex; align-items: center; gap: .375rem;
}
.cos .segmented button:hover { color: var(--s-color-text, #303030); }
.cos .segmented button[aria-selected="true"] {
  background: var(--s-color-bg-surface, #fff); color: var(--s-color-text, #303030); font-weight: 650;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.cos .segmented .n { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .6; }
.cos .segmented button[aria-selected="true"] .n { opacity: .75; }

.cos .search { width: 18rem; max-width: 100%; }
@media (max-width: 46rem) { .cos .search { width: 100%; } }

/* Bulk bar: the toolbar Shopify shows above a table, not a form card. */
.cos .bulkbar {
  display: flex; align-items: flex-end; gap: .625rem; flex-wrap: wrap;
  padding: .625rem .75rem; margin-bottom: .5rem;
  border: 1px solid #c9d4e3; border-radius: .5rem;
  background: #f4f8fd;
}
.cos .bulkbar .count {
  font-size: .8125rem; font-weight: 650; white-space: nowrap;
  padding-bottom: .4375rem; color: #1f3b63;
}
.cos .bulkbar .f-action { width: 11rem; }
.cos .bulkbar .f-value { width: 8.5rem; }
.cos .bulkbar .f-reason { width: 14rem; flex: 1 1 12rem; }
.cos .bulkbar .spacer { flex: 1 1 auto; }
@media (max-width: 46rem) {
  .cos .bulkbar .f-action, .cos .bulkbar .f-value, .cos .bulkbar .f-reason { width: 100%; flex: 1 1 100%; }
}

/* Table */
.cos .table-card { padding: 0; overflow: hidden; }
.cos table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cos thead th {
  text-align: left; font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--s-color-text-secondary, #6b7177);
  padding: .625rem .75rem;
  background: var(--s-color-bg-surface-secondary, #fafafa);
  border-bottom: 1px solid var(--s-color-border, #e3e3e3);
}
.cos thead th.r { text-align: right; }
.cos tbody td { padding: .625rem .75rem; border-bottom: 1px solid var(--s-color-border-secondary, #f1f1f1); vertical-align: middle; }
.cos tbody tr:last-child td { border-bottom: 0; }
.cos tbody tr { cursor: pointer; }
.cos tbody tr:hover td { background: var(--s-color-bg-surface-hover, #fafbfc); }
.cos tbody tr.picked td { background: #f4f8fd; }
.cos td.r, .cos th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cos td.pick, .cos th.pick { width: 2.5rem; padding-right: 0; }
.cos .co-name { font-weight: 650; color: var(--s-color-text, #303030); line-height: 1.3; }
.cos tbody tr:hover .co-name { text-decoration: underline; }
.cos .co-loc { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.cos .terms { color: var(--s-color-text-secondary, #4a4a4a); }
.cos .dim { color: var(--s-color-text-secondary, #8c9196); }
.cos .neg { color: #8e1f1b; font-weight: 600; }

/* Available: a proportional bar, sized to the limit, muted until it matters. */
.cos .avail { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.cos .avail .bar { width: 3.5rem; height: .25rem; border-radius: 999px; overflow: hidden;
  background: var(--s-color-bg-fill-tertiary, #e6e6e6); flex: 0 0 auto; }
.cos .avail .fill { height: 100%; background: #5c6ac4; }
.cos .avail .fill.warn { background: #b8791c; }
.cos .avail .fill.over { background: #a32b22; }

.cos .empty { padding: 3rem 1.5rem; text-align: center; }
.cos .empty .h { font-size: .9375rem; font-weight: 650; color: var(--s-color-text, #303030); }
.cos .empty .b { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .25rem; }

.cos .foot { display: flex; align-items: center; justify-content: space-between;
  padding: .625rem .75rem; border-top: 1px solid var(--s-color-border, #e3e3e3);
  font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); }

/* ---------------------------------------------------------------------------
   Accounts receivable dashboard
   Scoped under .ar. The numbers are the hero; the setup notice supports them.
   --------------------------------------------------------------------------- */

.ar s-select { display: block; }

.ar .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ar .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.ar .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; max-width: 46rem; }
.ar .head .actions { display: flex; align-items: center; gap: .5rem; }

/* A contextual notice, not a banner: one line, light ground, action inline. */
.ar .notice {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .625rem .875rem; margin-bottom: .75rem;
  border: 1px solid #cfd8e3; border-radius: .5rem; background: #f6f9fc;
}
.ar .notice.warn { border-color: #e6d5a8; background: #fdf8ee; }
.ar .notice .ico { display: grid; place-items: center; color: #5c6b80; flex: 0 0 auto; }
.ar .notice .body { flex: 1 1 18rem; min-width: 0; }
.ar .notice .t { font-size: .8125rem; font-weight: 650; color: #1f3b63; }
.ar .notice.warn .t { color: #6b4e11; }
.ar .notice .d { font-size: .75rem; color: var(--s-color-text-secondary, #5c6b80); margin-top: .0625rem; line-height: 1.4; }

/* KPIs */
.ar .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; margin-bottom: .75rem; }
@media (max-width: 64rem) { .ar .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ar .kpis { grid-template-columns: 1fr; } }

.ar .kpi {
  display: flex; flex-direction: column; height: 100%;
  padding: .875rem 1rem 1rem;
  border: 1px solid var(--s-color-border, #e3e3e3);
  border-radius: .625rem;
  background: var(--s-color-bg-surface, #fff);
}
.ar .kpi .label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--s-color-text-secondary, #6b7177);
}
.ar .kpi .value {
  font-size: 1.5rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: .5rem;
  color: var(--s-color-text, #1a1a1a);
}
/* Emphasis only where there is genuinely something to act on. */
.ar .kpi .value.alert { color: #8e1f1b; }
.ar .kpi .note { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: auto; padding-top: .5rem; line-height: 1.4; }

/* Aging */
.ar .aging-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.ar .aging-total { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--s-color-text-secondary, #6b7177); }

.ar .aging-bar { display: flex; width: 100%; height: .5rem; border-radius: 999px; overflow: hidden; }
.ar .aging-seg { height: 100%; }
.ar .aging-seg.b0 { background: #5c6ac4; }
.ar .aging-seg.b1 { background: #8a7a3d; }
.ar .aging-seg.b2 { background: #b8791c; }
.ar .aging-seg.b3 { background: #96501d; }
.ar .aging-seg.b4 { background: #a32b22; }

.ar .aging-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .875rem; }
@media (max-width: 46rem) { .ar .aging-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar .aging-item { cursor: pointer; }
.ar .aging-item .k { display: flex; align-items: center; gap: .375rem; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--s-color-text-secondary, #6b7177); }
.ar .aging-item .sw { width: .5rem; height: .5rem; border-radius: 2px; flex: 0 0 auto; }
.ar .aging-item .v { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .1875rem; }
.ar .aging-item.zero .v { color: var(--s-color-text-secondary, #8c9196); font-weight: 500; }
.ar .aging-item:hover .v { text-decoration: underline; }

.ar .empty-inline { padding: 1.25rem 0 .25rem; }
.ar .empty-inline .h { font-size: .8125rem; font-weight: 650; color: var(--s-color-text, #303030); }
.ar .empty-inline .b { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; }

/* Needs attention */
.ar .card.work { padding: 0; overflow: hidden; }
.ar .work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--s-color-border, #e3e3e3); }
.ar .work-head .t { font-size: .875rem; font-weight: 650; }
.ar .work-head .d { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); }

.ar table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ar thead th { text-align: left; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; color: var(--s-color-text-secondary, #6b7177);
  padding: .5rem 1rem; background: var(--s-color-bg-surface-secondary, #fafafa);
  border-bottom: 1px solid var(--s-color-border, #e3e3e3); }
.ar thead th.r { text-align: right; }
.ar tbody td { padding: .625rem 1rem; border-bottom: 1px solid var(--s-color-border-secondary, #f1f1f1); vertical-align: middle; }
.ar tbody tr:last-child td { border-bottom: 0; }
.ar tbody tr { cursor: pointer; }
.ar tbody tr:hover td { background: var(--s-color-bg-surface-hover, #fafbfc); }
.ar td.r, .ar th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar .co-name { font-weight: 650; line-height: 1.3; }
.ar tbody tr:hover .co-name { text-decoration: underline; }
.ar .co-loc { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.ar .dim { color: var(--s-color-text-secondary, #8c9196); }
.ar .neg { color: #8e1f1b; font-weight: 600; }
.ar .work-empty { padding: 2.5rem 1.5rem; text-align: center; }
.ar .work-empty .h { font-size: .9375rem; font-weight: 650; }
.ar .work-empty .b { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .25rem; }

/* ---------------------------------------------------------------------------
   Cash application
   Scoped under .cash. One workflow read top to bottom: record the payment,
   pick the unapplied cash, match it to invoices.
   --------------------------------------------------------------------------- */

.cash s-select, .cash s-text-field { display: block; }

.cash .head { margin-bottom: 1rem; }
.cash .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.cash .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; max-width: 46rem; }

/* Success reads as a line of confirmation, not a card. */
.cash .ok {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .5rem .75rem; margin-bottom: .75rem;
  border: 1px solid #b9dfc8; border-radius: .5rem; background: #f2fbf5;
  font-size: .8125rem; color: #0c5132;
}
.cash .ok .tick { font-weight: 700; line-height: 1.35; }

.cash .card { padding: 1rem; }
.cash .empty-row td { padding: 0; }

.cash .sec-title { font-size: .875rem; font-weight: 650; color: var(--s-color-text, #303030); }
.cash .sec-sub { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.45; max-width: 44rem; }

/* Record form: one compact row on desktop, wrapping down through tablet. */
.cash .rec-form {
  display: grid; gap: .625rem; margin-top: .875rem;
  grid-template-columns: minmax(12rem, 1.6fr) minmax(6rem, .7fr) minmax(9rem, 1.2fr) auto;
  align-items: end;
}
@media (max-width: 60rem) { .cash .rec-form { grid-template-columns: 1fr 1fr; } .cash .rec-form .go { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .cash .rec-form { grid-template-columns: 1fr; } }
.cash .rec-form .go { display: flex; }

/* Workspace */
.cash .ws { display: grid; grid-template-columns: minmax(15rem, 30fr) minmax(0, 70fr); gap: .75rem; align-items: start; }
@media (max-width: 75rem) { .cash .ws { grid-template-columns: minmax(14rem, 35fr) minmax(0, 65fr); } }
@media (max-width: 55rem) { .cash .ws { grid-template-columns: 1fr; } }
.cash .ws > .card { margin-bottom: 0; }

/* Unapplied cash list */
.cash .pay-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .375rem; }
.cash .pay-row {
  position: relative; cursor: pointer; text-align: left; width: 100%;
  padding: .625rem .75rem .625rem .875rem; margin: 0;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .5rem;
  background: var(--s-color-bg-surface, #fff);
}
.cash .pay-row::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px;
  border-radius: 0 2px 2px 0; background: #c9ced4;
}
.cash .pay-row:hover { background: var(--s-color-bg-surface-hover, #fafbfc); }
.cash .pay-row.selected { border-color: #10233b; background: var(--s-color-bg-surface-secondary, #f7f8f9); }
.cash .pay-row.selected::before { background: #10233b; }
.cash .pay-row .amt { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cash .pay-row .co { font-size: .8125rem; font-weight: 600; margin-top: .1875rem; line-height: 1.3; }
.cash .pay-row .meta { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }

.cash .empty { padding: 1.5rem .25rem; }
.cash .empty .h { font-size: .8125rem; font-weight: 650; color: var(--s-color-text, #303030); }
.cash .empty .b { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.45; max-width: 22rem; }

/* Apply panel */
.cash .apply-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .75rem; margin-bottom: .75rem;
  border-bottom: 1px solid var(--s-color-border, #e3e3e3);
}
.cash .apply-head .who .co { font-size: .875rem; font-weight: 650; line-height: 1.3; }
.cash .apply-head .who .loc { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.cash .stats { display: flex; gap: 1.25rem; }
.cash .stat .k { font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--s-color-text-secondary, #6b7177); }
.cash .stat .v { font-size: .9375rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: .125rem; }
.cash .stat .v.over { color: #a32b22; }
.cash .stat .v.zero { color: #0c5132; }

.cash table.grid td { vertical-align: middle; }
.cash table.grid .rowlink { font-weight: 650; }
.cash .due-rel { font-size: .6875rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.cash .alloc-input { width: 7.5rem; margin-left: auto; }
.cash td.num .alloc-input s-text-field { text-align: right; }

.cash .actions {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-top: .875rem; margin-top: .875rem;
  border-top: 1px solid var(--s-color-border, #e3e3e3);
}
.cash .foot-note { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .5rem; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   Payment reminders
   Scoped under .rem. The escalation sequence is the centrepiece; the mail
   warning and the sending switches sit above it without competing.
   --------------------------------------------------------------------------- */

.rem s-switch, .rem s-text-field, .rem s-text-area, .rem s-select { display: block; }

.rem .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rem .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.rem .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; max-width: 46rem; }
.rem .head .actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 40rem) { .rem .head { flex-direction: column; } }

/* Compact strips: a state to know about, not a card to read. */
.rem .strip {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .625rem .875rem; margin-bottom: .75rem;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .5rem;
  background: var(--s-color-bg-surface, #fff);
}
.rem .strip .ico { display: grid; place-items: center; flex: 0 0 auto; margin-top: .0625rem; }
.rem .strip .t { font-size: .8125rem; font-weight: 650; }
.rem .strip .d { font-size: .75rem; margin-top: .0625rem; line-height: 1.45; color: var(--s-color-text-secondary, #6b7177); }
.rem .strip .go { margin-left: auto; flex: 0 0 auto; }
.rem .strip.warn { border-color: #e6d5a8; background: #fdf8ee; }
.rem .strip.warn .t, .rem .strip.warn .ico { color: #6b4e11; }
.rem .strip.warn .d { color: #7a6320; }
.rem .strip.info { border-color: #cfd8e3; background: #f6f9fc; }
.rem .strip.info .t, .rem .strip.info .ico { color: #1f3b63; }
.rem .strip.info .d { color: #48576b; }
.rem .strip.ok { border-color: #b9dfc8; background: #f2fbf5; }
.rem .strip.ok .t, .rem .strip.ok .ico { color: #0c5132; }

.rem .card { padding: 1rem; }
.rem .sec-title { font-size: .875rem; font-weight: 650; color: var(--s-color-text, #303030); }
.rem .sec-sub { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.45; max-width: 48rem; }

/* Sending */
.rem .switch-row { padding: .75rem 0; border-top: 1px solid var(--s-color-border-secondary, #f1f1f1); }
.rem .switch-row:first-of-type { border-top: 0; padding-top: .875rem; }
.rem .switch-row:last-of-type { padding-bottom: .875rem; }
.rem .send-note {
  font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); line-height: 1.45;
  padding-top: .75rem; border-top: 1px solid var(--s-color-border-secondary, #f1f1f1);
}

/* Sequence */
.rem .timeline { position: relative; padding-left: 1.375rem; margin-top: .875rem; }
.rem .timeline::before {
  content: ""; position: absolute; left: .3125rem; top: .75rem; bottom: .75rem;
  width: 1px; background: var(--s-color-border, #e1e3e5);
}
.rem .tl-step { position: relative; padding: 0; }
.rem .tl-step + .tl-step { border-top: 1px solid var(--s-color-border-secondary, #f1f1f1); }
.rem .tl-step::before {
  content: ""; position: absolute; left: -1.375rem; top: .9375rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #4a5568; box-shadow: 0 0 0 3px var(--s-color-bg-surface, #fff);
}
.rem .tl-step.pre::before { background: #7a94b8; }
.rem .tl-step.due::before { background: #1f2937; }
.rem .tl-step.over::before { background: #b8791c; }
.rem .tl-step.late::before { background: #a32b22; }
.rem .tl-step.off::before { background: var(--s-color-border, #d8dee5); }

.rem .tl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; padding: .625rem 0;
}
.rem .tl-head:hover .tl-when { text-decoration: underline; }
.rem .tl-when { font-weight: 650; font-size: .8125rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rem .tl-subject { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.4; }
.rem .tl-step.off .tl-subject { color: var(--s-color-text-disabled, #a5aaae); }
.rem .tl-edit-link { font-size: .75rem; flex: 0 0 auto; }

.rem .tl-edit {
  margin: 0 0 .875rem; padding: .875rem; border-radius: .5rem;
  border: 1px solid var(--s-color-border, #e3e3e3);
  background: var(--s-color-bg-surface-secondary, #fafafa);
  display: grid; gap: .75rem;
}
.rem .tl-vars {
  font-size: .6875rem; color: var(--s-color-text-secondary, #6b7177);
  font-family: ui-monospace, SFMono-Regular, monospace; margin-top: -.375rem;
}
.rem .tl-edit .save { justify-self: start; }

/* Preview + history */
.rem .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.rem table.grid td { vertical-align: top; }
.rem table.grid .rowlink { font-weight: 650; }
.rem .sub-line { font-size: .6875rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.rem .when-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rem .status-cell { white-space: nowrap; text-transform: capitalize; }

.rem .empty { padding: 1.75rem .25rem; text-align: center; }
.rem .empty .h { font-size: .8125rem; font-weight: 650; color: var(--s-color-text, #303030); }
.rem .empty .b { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .25rem; line-height: 1.45; }
.rem .empty-row td { padding: 0; }

/* ---------------------------------------------------------------------------
   Reports
   Scoped under .rep. The cash forecast is the hero; the rest are compact
   analytical tables that support it.
   --------------------------------------------------------------------------- */

.rep s-select { display: block; }

.rep .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rep .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.rep .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; max-width: 46rem; }
.rep .head .filter { flex: 0 0 auto; min-width: 10rem; }
@media (max-width: 40rem) { .rep .head { flex-direction: column; } }

.rep .card { padding: 1rem; }
.rep .sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .875rem; }
.rep .sec-title { font-size: .875rem; font-weight: 650; color: var(--s-color-text, #303030); }
.rep .sec-sub { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.45; max-width: 42rem; }
.rep .sec-head .act { flex: 0 0 auto; }

/* Headline metrics */
.rep .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .625rem; margin-bottom: .75rem; }
.rep .kpi {
  padding: .875rem 1rem 1rem;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .625rem;
  background: var(--s-color-bg-surface, #fff);
}
.rep .kpi .label { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--s-color-text-secondary, #6b7177); }
.rep .kpi .value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: .5rem; }
.rep .kpi .value .unit { font-size: .875rem; font-weight: 600; color: var(--s-color-text-secondary, #6b7177); margin-left: .25rem; }
.rep .kpi .value.neg { color: #a32b22; }
.rep .kpi .value.none { font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.rep .kpi .note { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .375rem; line-height: 1.45; }

/* Cash forecast */
.rep .fc-legend { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-bottom: .75rem; }
.rep .fc-legend .sw { width: .625rem; height: .625rem; border-radius: 2px; background: #46586e; flex: 0 0 auto; }
.rep .fc-now {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: .875rem;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .5rem;
  background: var(--s-color-bg-surface-secondary, #fafafa);
}
.rep .fc-now .k { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); }
.rep .fc-now .v { font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; color: #a32b22; }

.rep .chart { position: relative; padding-left: 4.5rem; }
.rep .chart .axis {
  position: absolute; left: 0; top: 0; width: 4rem; height: 13rem;
  font-size: .625rem; font-variant-numeric: tabular-nums; text-align: right;
  color: var(--s-color-text-secondary, #8c9196);
}
.rep .chart .axis span { position: absolute; right: 0; transform: translateY(-50%); }
.rep .plot {
  position: relative; height: 13rem;
  display: flex; align-items: flex-end; gap: .375rem;
  border-bottom: 1px solid var(--s-color-border, #d8dee5);
}
.rep .plot .gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--s-color-border-secondary, #ececec); }
.rep .fc-col { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.rep .fc-bar { background: #46586e; border-radius: .1875rem .1875rem 0 0; min-height: 2px; transition: none; }
.rep .fc-col:hover .fc-bar { background: #2f3d4e; }
.rep .fc-bar.empty { background: var(--s-color-border, #e8eaed); }
.rep .fc-labels { display: flex; gap: .375rem; padding-left: 4.5rem; margin-top: .5rem; }
.rep .fc-label { flex: 1; text-align: center; font-size: .625rem; color: var(--s-color-text-secondary, #8c9196); }
.rep .fc-amt { display: block; font-size: .6875rem; font-variant-numeric: tabular-nums; color: var(--s-color-text, #303030); font-weight: 600; margin-bottom: .125rem; }
.rep .fc-amt.zero { color: var(--s-color-text-disabled, #b5b5b5); font-weight: 500; }
@media (max-width: 48rem) {
  .rep .chart { padding-left: 0; }
  .rep .chart .axis { display: none; }
  .rep .fc-labels { padding-left: 0; }
  .rep .fc-label { font-size: .5625rem; }
  .rep .fc-amt { display: none; }
}

/* Tables */
.rep table.grid td { vertical-align: middle; }
.rep table.grid .rowlink { font-weight: 650; }
.rep .sub-line { font-size: .6875rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .0625rem; }
.rep td.num { white-space: nowrap; }
.rep .dial-cell { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.rep .util-bar { height: .3125rem; border-radius: 999px; background: var(--s-color-bg-fill-tertiary, #eceef0); overflow: hidden; width: 3.5rem; min-width: 0; flex: 0 0 auto; }
.rep .util-pct { font-variant-numeric: tabular-nums; min-width: 2.75rem; display: inline-block; text-align: right; }
.rep .util-pct.none { color: var(--s-color-text-secondary, #8c9196); }
.rep .late { color: #a32b22; font-weight: 600; }
.rep .ontime { font-variant-numeric: tabular-nums; }

/* Empty states */
.rep .empty { padding: 2rem 1rem; text-align: center; }
.rep .empty .h { font-size: .875rem; font-weight: 650; color: var(--s-color-text, #303030); }
.rep .empty .b { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .25rem; line-height: 1.45; max-width: 26rem; margin-left: auto; margin-right: auto; }
.rep .empty-row td { padding: 0; }

/* ---------------------------------------------------------------------------
   Settings
   Scoped under .set. Grouped sections with real field widths, and one action
   bar that follows you down the page instead of a Save button lost mid-form.
   --------------------------------------------------------------------------- */

.set s-text-field, .set s-text-area, .set s-select, .set s-switch { display: block; }

.set .head { margin-bottom: 1rem; }
.set .head .title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--s-color-text, #303030); }
.set .head .sub { font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; max-width: 46rem; }

.set .group { margin-bottom: 1.25rem; }
.set .group > .glabel {
  font-size: .6875rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--s-color-text-secondary, #8c9196);
  padding-bottom: .375rem; margin-bottom: .625rem;
  border-bottom: 1px solid var(--s-color-border, #e3e3e3);
}
.set .group > .card { margin-bottom: .625rem; }
.set .group > .card:last-child { margin-bottom: 0; }

.set .card { padding: 1rem; }
.set .sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.set .sec-title { font-size: .875rem; font-weight: 650; color: var(--s-color-text, #303030); }
.set .sec-sub { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .1875rem; line-height: 1.45; max-width: 44rem; }
.set .sec-head .act { flex: 0 0 auto; }

.set .fields { display: grid; gap: .875rem; margin-top: .875rem; }
.set .w-sm { max-width: 9rem; }
.set .w-md { max-width: 22rem; }
.set .w-lg { max-width: 36rem; }
@media (max-width: 40rem) { .set .w-sm, .set .w-md, .set .w-lg { max-width: none; } }

/* Accent colour: the hex field stays the source of truth, the swatch just shows it. */
.set .swatch-row { display: flex; align-items: flex-start; gap: .625rem; }
.set .swatch-row .f { flex: 0 0 9rem; }
.set .swatch {
  width: 2rem; height: 2rem; border-radius: .375rem; flex: 0 0 auto; margin-top: 1.5rem;
  border: 1px solid var(--s-color-border, #d8dee5);
}

.set .note {
  font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); line-height: 1.45;
  padding-top: .75rem; margin-top: .875rem;
  border-top: 1px solid var(--s-color-border-secondary, #f1f1f1);
}

.set .actions-row { margin-top: .875rem; }

/* Next invoice number */
.set .preview-box {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem .875rem; margin-top: .25rem;
  border: 1px solid var(--s-color-border, #e3e3e3); border-radius: .5rem;
  background: var(--s-color-bg-surface-secondary, #fafafa);
}
.set .preview-box .k { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--s-color-text-secondary, #6b7177); }
.set .preview-box .v {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: .01em;
  font-family: ui-monospace, SFMono-Regular, monospace; color: var(--s-color-text, #1a1a1a);
}

/* Plan */
.set .plan-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; }
.set .plan-name { font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; }
.set .plan-meta { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .125rem; }

/* Permissions */
.set .perms { display: grid; gap: .375rem; margin-top: .875rem; }
.set .perm { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.45; }
.set .perm .dot { width: .375rem; height: .375rem; border-radius: 50%; background: #7a94b8; flex: 0 0 auto; margin-top: .5rem; }

/* Advanced */
.set .adv { width: 100%; border-collapse: collapse; font-size: .8125rem; margin-top: .875rem; }
.set .adv td { padding: .5rem 0; border-bottom: 1px solid var(--s-color-border-secondary, #f1f1f1); }
.set .adv tr:last-child td { border-bottom: 0; }
.set .adv td:first-child { color: var(--s-color-text-secondary, #6b7177); }
.set .adv td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Action bar */
.set .savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; margin-top: 1rem;
  border: 1px solid var(--s-color-border, #d8dee5); border-radius: .625rem;
  background: var(--s-color-bg-surface, #fff);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .02), 0 2px 8px rgba(23, 24, 24, .08);
}
.set .savebar .state { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--s-color-text-secondary, #6b7177); }
.set .savebar .state .pip { width: .5rem; height: .5rem; border-radius: 50%; background: #b5bcc4; flex: 0 0 auto; }
.set .savebar.dirty { border-color: #c8b98a; }
.set .savebar.dirty .state { color: #6b4e11; font-weight: 600; }
.set .savebar.dirty .state .pip { background: #b8791c; }

/* ---------------------------------------------------------------------------
   Plan-gated state
   A feature the plan does not include is a state, not an error. Neutral ground
   and one clear action, so it never reads as something being broken.
   --------------------------------------------------------------------------- */

.page .upsell {
  display: flex; align-items: flex-start; gap: .625rem; flex-wrap: wrap;
  padding: .625rem .875rem; margin-bottom: .75rem;
  border: 1px solid #cfd8e3; border-radius: .5rem; background: #f6f9fc;
}
.page .upsell .ico { display: grid; place-items: center; color: #1f3b63; flex: 0 0 auto; margin-top: .0625rem; }
.page .upsell .body { flex: 1 1 20rem; min-width: 0; }
.page .upsell .t { font-size: .8125rem; font-weight: 650; color: #1f3b63; }
.page .upsell .d { font-size: .75rem; color: #48576b; margin-top: .0625rem; line-height: 1.45; }
.page .upsell .go { margin-left: auto; flex: 0 0 auto; }
.page .upsell-note { font-size: .75rem; color: var(--s-color-text-secondary, #6b7177); margin-top: .375rem; }