/* Ribh design system v2 ("Pro Max"), see docs/design/design-system.md.
   From the UI UX Pro Max skill: Minimalism & Swiss style, data-dense dashboard, Fira Sans,
   slate neutrals, brand orange darkened to pass 4.5:1. Scoped to pages whose <body> has the
   class "ds" so it can be rolled out one page at a time. */

@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/fira-sans/fira-sans-latin-400-normal.3327e58b1067.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/fira-sans/fira-sans-latin-500-normal.5bb107ad2319.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/fira-sans/fira-sans-latin-600-normal.d6bd2fb381ce.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/fira-sans/fira-sans-latin-700-normal.ab1e118c3ab2.woff2") format("woff2");
}

/* ---- Tokens (contrast against their background is in the design doc) ---- */
body.ds {
  --ink: #0f172a;          /* slate-900: 17.1:1 on --bg */
  --muted: #475569;        /* slate-600: 7.2:1 */
  --faint: #64748b;        /* slate-500: 4.8:1 on white, small labels only */
  --bg: #f8fafc;
  --card: #ffffff;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --side: #0f172a;
  --side-ink: #e2e8f0;     /* 14.5:1 on --side */
  --side-muted: #94a3b8;   /* 7.0:1 on --side */
  --side-hover: #1e293b;
  --accent: #c2410c;       /* brand orange, darkened: white on it 5.2:1 (was 3.4:1) */
  --accent-ink: #ffffff;
  --accent-soft: #fff7ed;
  --accent-line: #fed7aa;
  --good: #15803d;         /* 5.0:1 */
  --good-soft: #f0fdf4;
  --warn: #b45309;         /* 5.0:1 */
  --warn-soft: #fffbeb;
  --bad: #b91c1c;          /* 6.5:1 */
  --bad-soft: #fef2f2;
  --series-sales: #2563eb; /* checked for colour-blind readers with the profit green */
  --series-profit: #15803d;
  --grid: #e2e8f0;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(15 23 42 / 5%);
  --side-width: 232px;
  --focus: #c2410c;

  /* Type: Fira Sans throughout; figures use tabular numbers so columns line up. */
  --text-title: 1.625rem;
  --text-card: 1rem;
  --text-figure: clamp(1.375rem, 1.6vw, 1.625rem);
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-tiny: 0.75rem;

  /* Spacing: dense dashboard scale (8 / 12 / 16 / 24) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.ds h1 { font-weight: 600; letter-spacing: -0.01em; }
body.ds h2 { font-weight: 600; letter-spacing: 0; }
body.ds .num, body.ds .tile-value, body.ds .amount, body.ds .chart-svg .axis {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* ---- Interaction: visible focus, pointer cursor, short colour transitions ---- */
body.ds a, body.ds button, body.ds summary, body.ds [role="button"], body.ds .chart-svg .hit {
  cursor: pointer;
}
body.ds :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
body.ds .sidebar :focus-visible { outline-color: #fdba74; }
body.ds a, body.ds .button, body.ds .tile, body.ds .nav a, body.ds .chips a {
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  body.ds *, body.ds *::before, body.ds *::after { transition: none !important; animation: none !important; }
}

/* ---- Sidebar: slate, icons, filled current item ---- */
body.ds .sidebar { background: var(--side); }
body.ds .brand-name { font-weight: 600; letter-spacing: -0.005em; }
body.ds .nav a {
  justify-content: flex-start; gap: 10px; min-height: 38px; padding: 8px 12px; margin: 1px 0;
  border-radius: 8px; color: var(--side-ink); font-weight: 500;
}
body.ds .nav a > span:first-of-type { flex: 1; }
body.ds .nav a:hover { background: var(--side-hover); color: #fff; }
body.ds .nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
body.ds .nav .count { background: #fff; color: var(--accent); }
body.ds .nav a[aria-current="page"] .count { background: #fff; color: var(--accent); }
body.ds .nav-icon { display: inline-block; width: 18px; height: 18px; flex: none; opacity: 0.9; }
body.ds .nav-section { margin: 20px 12px 6px; font-weight: 600; letter-spacing: 0.08em; }
.nav-icon { display: none; }

/* ---- Page ---- */
body.ds .page { max-width: 1320px; }
@media (min-width: 900px) { body.ds .page { padding: 28px 32px 36px; } }
body.ds .page-head { margin-bottom: var(--s4); }
body.ds .page-head .sub { font-size: var(--text-small); }
body.ds .button { border-radius: 8px; font-size: var(--text-small); font-weight: 600; min-height: 36px; }
body.ds .button.small { min-height: 32px; padding: 6px 12px; }
body.ds .button.secondary { border-color: var(--line); }
body.ds .button.secondary:hover { border-color: var(--muted); background: var(--line-soft); }
@media (pointer: coarse) {
  body.ds .button, body.ds .button.small, body.ds .chips a { min-height: 44px; }
}

/* ---- Cards ---- */
body.ds .card { border-color: var(--line); border-radius: var(--radius); padding: var(--s4) 18px; box-shadow: var(--shadow); }
body.ds .card-head { margin-bottom: var(--s3); }
body.ds .card-head h2 { font-size: var(--text-card); }
body.ds .card-head .note { font-size: var(--text-small); color: var(--faint); }
body.ds .grid-2, body.ds .stack { gap: var(--s3); }

/* ---- KPI tiles ---- */
body.ds .tiles { gap: var(--s3); margin-bottom: var(--s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body.ds .tile { border-color: var(--line); border-radius: var(--radius); padding: 14px var(--s4); }
body.ds a.tile:hover { border-color: var(--accent); background: #fffdfb; }
body.ds .tile-label { font-size: var(--text-small); font-weight: 500; color: var(--muted); }
body.ds .tile-value { font-weight: 600; margin: 2px 0 4px; letter-spacing: -0.01em; }
body.ds .tile-value.good { color: var(--good); }
body.ds .tile-note { font-size: var(--text-tiny); color: var(--muted); }
body.ds .tile.prominent { background: var(--accent-soft); border-color: var(--accent-line); }
body.ds .tile.prominent .tile-value { color: var(--accent); }
body.ds .tile-warning { color: var(--warn); font-size: var(--text-tiny); }
body.ds .tile-warning::before { content: none; }
body.ds .tile-warning .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* Change against last week: an arrow and the words, never colour alone. */
body.ds .tile-change { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 6px; font-size: var(--text-tiny); color: var(--muted); }
body.ds .tile-change .up, body.ds .tile-change .down {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
body.ds .tile-change .up { background: var(--good-soft); color: var(--good); }
body.ds .tile-change .down { background: var(--bad-soft); color: var(--bad); }
body.ds .tile-change .icon { width: 12px; height: 12px; }
body.ds .tile-change .when { white-space: normal; min-width: 0; }  /* "vs September (same days)" wraps at 320 px */

/* ---- Tables: compact rows, sticky header, row highlight on hover ---- */
body.ds .table { font-size: var(--text-small); }
body.ds .table th {
  position: sticky; top: 0; z-index: 1; background: var(--card);
  font-size: var(--text-tiny); font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; border-bottom-color: var(--line);
}
body.ds .table td { padding: 10px; border-bottom-color: var(--line-soft); vertical-align: middle; }
body.ds .table tbody tr:hover td { background: var(--bg); }
body.ds .chip { font-size: var(--text-tiny); padding: 2px 9px; font-weight: 600; }
body.ds .chip.good { background: var(--good-soft); color: var(--good); }
body.ds .chip.warn { background: var(--warn-soft); color: var(--warn); }
body.ds .chip.bad { background: var(--bad-soft); color: var(--bad); }
body.ds .chip { background: var(--line-soft); color: var(--muted); }

/* ---- Needs your attention ---- */
body.ds .attention-group { padding: var(--s3) 0; }
body.ds .attention-group h3 { font-size: var(--text-body); font-weight: 600; gap: var(--s3); }
body.ds .attention-group h3 a { color: var(--ink); }
body.ds .attention-group h3 a:hover { color: var(--accent); }
body.ds .attention-group .attention li { padding: 5px 0; }
body.ds .attention-group .attention .what a { color: var(--ink); font-weight: 400; }
body.ds .attention-group .attention .what a:hover { color: var(--accent); text-decoration: underline; }
body.ds .attention-group .attention .detail { color: var(--faint); }
body.ds .attention .amount { font-weight: 600; }
body.ds .attention .amount.bad { color: var(--bad); }
body.ds .see-all { color: var(--accent); font-weight: 500; text-decoration: none; }
body.ds .see-all:hover { text-decoration: underline; }
body.ds .group-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--faint); }
body.ds .group-dot.bad { background: var(--bad); }
body.ds .group-dot.warn { background: var(--warn); }

/* ---- Chart ---- */
body.ds .chart-svg .axis { fill: var(--faint); }
body.ds .chart-svg .grid { stroke: var(--grid); }
body.ds .chart-svg .grid.base { stroke: #cbd5e1; }
body.ds .chart-svg .hit:hover { fill: rgb(15 23 42 / 4%); }
body.ds .legend { color: var(--muted); font-size: var(--text-small); }
body.ds details.table-view summary { color: var(--accent); font-weight: 500; font-size: var(--text-small); }

/* ---- Banners and hints ---- */
body.ds .banner { background: var(--warn-soft); border-color: #fde68a; }
body.ds .hint { color: var(--muted); font-size: var(--text-small); }
body.ds .footer, body.ds .footer a { color: var(--faint); }

/* ---- Phones and tablets ---- */
@media (max-width: 640px) {
  body.ds .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ds .tile { padding: 12px; }
  body.ds .tile-value { font-size: 1.2rem; }
  body.ds .card { padding: 14px; }
  body.ds h1 { font-size: 1.4rem; }
}

/* Colour follows good or bad for the owner: more discounts or more overdue is bad news. */
body.ds .tile-change .up.worse-up { background: var(--bad-soft); color: var(--bad); }
body.ds .tile-change .down.worse-up { background: var(--good-soft); color: var(--good); }
body.ds .tile-change .when { color: var(--faint); }
/* Attention headings: dot, title on the left, amount on the right. */
body.ds .attention-group h3 { justify-content: flex-start; }
body.ds .attention-group h3 > .group-dot { flex: none; }
body.ds .attention-group h3 > .amount { margin-left: auto; }
@media (max-width: 999px) {
  /* Tablets too: the owner's first questions first. */
  body.ds .grid-2 > #needs-attention { order: -1; }
  body.ds .tile.prominent { order: -1; }
}

/* Pointer targets at least 24x24 CSS px (WCAG 2.2 AA 2.5.8) for links that stand alone. */
body.ds details.table-view summary,
body.ds .see-all,
body.ds .sidebar-foot button,
body.ds .attention .what a,
body.ds .attention-group h3 a,
body.ds .card-head .note,
body.ds .card-head > a:not(.button),
body.ds .page-head .sub a,
body.ds .footer a { display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .attention-group .attention li { padding: 2px 0; }
body.ds .table td a { display: inline-block; min-height: 24px; line-height: 24px; }

/* The dark sidebar runs the full height of the page, however long the page is. */
@media (min-width: 900px) {
  body.ds .shell.with-sidebar {
    background: linear-gradient(to right, var(--side) var(--side-width), var(--bg) var(--side-width));
  }
}

/* Change against last week: the pill stays on one line, "vs last Tue" always on its own line. */
body.ds .tile-change { display: block; }
body.ds .tile-change .up, body.ds .tile-change .down { white-space: nowrap; }
body.ds .tile-change .when { display: block; margin-top: 3px; }
/* On the tinted tile the faint grey is just under 4.5:1, so use the darker grey there. */
body.ds .tile.prominent .tile-change .when, body.ds .tile.prominent .tile-note { color: var(--muted); }
/* Very narrow phones (under 360 px): the pill may wrap rather than push the page sideways. */
@media (max-width: 359px) {
  body.ds .tile-change .up, body.ds .tile-change .down { white-space: normal; }
}

/* ---- Shared bits for every page ---- */
.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;
}
body.ds .icon.ext { width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
body.ds .chips a { border-color: var(--line); font-weight: 500; }
body.ds .chips a:hover { border-color: var(--muted); background: var(--line-soft); }
body.ds .chips a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
body.ds .chips .n { color: var(--faint); }
body.ds .chips a[aria-current="true"] .n { color: #cbd5e1; }
body.ds .cell-sub { color: var(--faint); font-size: var(--text-tiny); }
body.ds .table a { color: var(--ink); }
body.ds .table a:hover { color: var(--accent); }

/* ---- Who owes me ---- */
body.ds .owed-table td:first-child strong { font-weight: 600; }
body.ds .owed-table .owed-amount strong { font-weight: 600; }

/* ---- This month ---- */
body.ds .bar-row { grid-template-columns: 72px 1fr auto; gap: var(--s3); font-size: var(--text-small); }
body.ds .bar-row .num { font-weight: 600; font-variant-numeric: tabular-nums; }
body.ds .meter-track { fill: var(--line-soft); }
body.ds .meter-fill { fill: var(--accent); }
body.ds .actions-list { padding-left: 20px; }
body.ds .actions-list li { margin-bottom: var(--s2); font-size: var(--text-body); }
body.ds .actions-list li::marker { color: var(--accent); font-weight: 600; }
body.ds .actions-list a { color: var(--ink); display: inline; }
body.ds .actions-list a:hover { color: var(--accent); text-decoration: underline; }
body.ds .table td.bad { color: var(--bad); }
body.ds .table td.good { color: var(--good); }
body.ds .actions-list a { display: block; min-height: 24px; padding: 2px 0; }

/* ---- Products ---- */
body.ds .grid-even { gap: var(--s3); }
body.ds .list-head { font-size: var(--text-body); font-weight: 600; }
body.ds .list-head a { color: var(--ink); }
body.ds .list-head a:hover { color: var(--accent); }
body.ds .attention.compact li { border-bottom-color: var(--line-soft); font-size: var(--text-small); }
body.ds .attention.compact .what a { color: var(--ink); font-weight: 400; display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .attention.compact .what a:hover { color: var(--accent); }
body.ds .table .name-cell a { color: var(--ink); font-weight: 500; display: inline; }
body.ds .product-cell a { color: var(--ink); }
body.ds .product-cell a:hover { color: var(--accent); }
body.ds .product-cell strong { font-weight: 600; }
body.ds .inline-search input { border-color: var(--line); border-radius: 8px; padding: 8px 12px; min-height: 36px; font-size: var(--text-small); }
body.ds .banner .button.secondary { background: #fff; }
body.ds .breadcrumb, body.ds .breadcrumb a { color: var(--faint); font-size: var(--text-small); }
/* The set-limits form */
body.ds label { font-size: var(--text-small); font-weight: 600; color: var(--ink); }
body.ds input[type="text"], body.ds input[type="number"], body.ds input[type="search"],
body.ds input[type="email"], body.ds input[type="password"], body.ds select, body.ds textarea {
  border-color: #cbd5e1; border-radius: 8px; font-size: 1rem;
}
body.ds input:focus, body.ds select:focus, body.ds textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
body.ds .facts dt { color: var(--muted); }
body.ds button.primary { border-radius: 8px; }
/* Part names in the profit tables: one line with an ellipsis (full name on hover), two lines on phones. */
body.ds .table .name-cell a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 24px; line-height: 24px;
}
@media (max-width: 640px) {
  body.ds .table .name-cell { white-space: normal; }
  body.ds .table .name-cell a {
    white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
  }
}
body.ds .list-head a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---- Alerts ---- */
body.ds .alert-list { padding: 2px var(--s4); }
body.ds .alert-row { border-left-width: 3px; border-left-color: var(--warn); padding: var(--s3) 0 var(--s3) 14px; margin: var(--s2) 0; }
body.ds .alert-row.serious { border-left-color: var(--bad); }
body.ds .alert-row.closed { border-left-color: var(--line); }
body.ds .alert-list .alert-row:not(:last-child) { box-shadow: 0 1px 0 var(--line-soft); }
body.ds .stake { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
body.ds .stake span { font-size: var(--text-small); font-weight: 500; color: var(--muted); }
body.ds .alert-what { font-size: var(--text-small); }
body.ds .alert-what strong { font-weight: 600; }
body.ds .alert-facts { font-size: var(--text-tiny); gap: 2px 16px; }
body.ds .alert-facts span { color: var(--faint); }
body.ds .alert-facts a { display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .alert-more { font-size: var(--text-tiny); }
body.ds .alert-more summary { color: var(--accent); font-weight: 500; display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
body.ds .alert-row .actions-row .muted { font-size: var(--text-small); }
body.ds .list-note { margin: 0 0 4px; font-size: var(--text-tiny); }

/* ---- Settings pages (alert rules, numbers check, QuickBooks, team, staff) ---- */
body.ds .facts { font-size: var(--text-small); }
body.ds .card h2 { font-size: var(--text-card); }
body.ds .card > p, body.ds .card .muted { font-size: var(--text-small); }
body.ds label.check { font-size: var(--text-small); font-weight: 500; min-height: 24px; }
body.ds input[type="checkbox"] { accent-color: var(--accent); }
body.ds .inline-field { gap: var(--s2); }
body.ds .button.c2qb { min-height: 36px; }
body.ds pre.raw { border-color: var(--line); background: var(--bg); }
body.ds .pager .muted { font-size: var(--text-small); }
body.ds .card form .button, body.ds .card form button { min-height: 36px; }
body.ds .discount-note { margin-top: 2px; }

/* ---- Type floor (UX review): body 15 px, secondary 13 px, labels 12 px, nothing smaller ---- */
body.ds { --text-tiny: 0.8125rem; }
body.ds .table th, body.ds .chip, body.ds .chips .n, body.ds .nav-section { font-size: 0.75rem; }
body.ds .tile-change .up, body.ds .tile-change .down { font-size: 0.75rem; }
/* Chart labels are SVG units: sized so they draw at 12 px or more on screen. */
body.ds .chart-wide .chart-svg .axis { font-size: 15px; }
body.ds .chart-narrow .chart-svg .axis { font-size: 13px; }

/* ---- Phones: tables marked "cards" become one card per row, each value labelled ---- */
@media (max-width: 640px) {
  body.ds .table.cards thead { display: none; }
  body.ds .table.cards, body.ds .table.cards tbody { display: block; width: 100%; }
  body.ds .table.cards tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  }
  body.ds .table.cards td { display: block; padding: 0; border: 0; text-align: start; min-width: 0; }
  body.ds .table.cards td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.75rem; color: var(--faint);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  body.ds .table.cards td.card-title { grid-column: 1 / -1; font-weight: 600; }
  body.ds .table.cards td.card-title a { white-space: normal; }
  body.ds .table.cards tbody tr:hover td { background: none; }
}

/* ---- Public pages (sign-in, password, two-factor, support, legal, errors) ---- */
body.ds .shell:not(.with-sidebar) .sidebar { display: none; }
body.ds .shell:not(.with-sidebar) .page { max-width: 760px; padding-top: 48px; }
body.ds .auth-card { max-width: 420px; margin: 0 auto var(--s4); padding: 28px 28px 24px; }
body.ds .auth-card h1 { font-size: 1.375rem; margin: var(--s4) 0 var(--s1); }
body.ds .auth-card .welcome { color: var(--muted); margin: 0 0 var(--s2); }
body.ds .auth-card label { margin-top: 14px; }
body.ds .auth-card button.primary { margin-top: var(--s5); min-height: 44px; font-size: 1rem; }
body.ds .auth-card .muted a { color: var(--accent); }
body.ds .auth-links { display: flex; justify-content: center; gap: var(--s4); font-size: var(--text-small); }
body.ds .auth-links a { color: var(--muted); }
body.ds .logo-mark { display: flex; align-items: center; gap: 10px; }
body.ds .logo-square {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1.125rem;
}
body.ds .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
body.ds .logo-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
body.ds .logo-for { color: var(--muted); font-size: var(--text-small); }
body.ds .error-page { max-width: 480px; margin: 0 auto; text-align: center; padding: 32px 28px; }
body.ds .error-page .logo-mark { justify-content: center; margin-bottom: var(--s4); }
body.ds .error-page .error-code { color: var(--accent); font-size: 2.75rem; font-weight: 700; line-height: 1.1; margin: 0 0 var(--s2); }
body.ds .prose { max-width: 68ch; }
body.ds .prose p, body.ds .prose li { line-height: 1.6; }
@media (max-width: 640px) {
  body.ds .shell:not(.with-sidebar) .page { padding-top: 24px; }
  body.ds .auth-card { padding: 22px 18px; }
}
body.ds .auth-links a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---- First day: setup steps and the first-look tour ---- */
body.ds .setup-card { max-width: 720px; padding: var(--s5); }
body.ds .setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
body.ds .setup-steps > li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s4); align-items: start; }
body.ds .setup-steps h2 { margin: 4px 0 6px; font-size: 1.0625rem; }
body.ds .setup-steps p { margin: 0 0 var(--s3); }
body.ds .step-dot {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-weight: 700; background: var(--line-soft); color: var(--muted); border: 1px solid var(--line);
}
body.ds .step-dot .icon { width: 16px; height: 16px; }
body.ds .setup-steps li.current .step-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
body.ds .setup-steps li.done .step-dot { background: var(--good-soft); color: var(--good); border-color: #bbf7d0; }
body.ds .setup-steps li.next { opacity: 0.85; }
body.ds .loaded-list { list-style: none; margin: 0 0 var(--s3); padding: 0; max-width: 360px; }
body.ds .loaded-list li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-small); }
body.ds .tour-card { border-color: var(--accent-line); background: var(--accent-soft); }
body.ds .tour-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: var(--s2); }
body.ds .tour-steps li::marker { color: var(--accent); font-weight: 700; }
/* Intuit's green #2CA01C with white text is 3.4:1; their darker green (#108000) passes 4.5:1. */
body.ds .button.c2qb { background: #108000; border-color: #108000; color: #fff; }
body.ds .button.c2qb:hover { background: #0d6b00; border-color: #0d6b00; color: #fff; }

/* ---- Today briefing (UX review) ---- */
body.ds .briefing {
  font-size: 1.0625rem; line-height: 1.5; margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
}
body.ds .compare-note { margin: 0 0 var(--s2); }
body.ds .tile-more { margin-top: 6px; font-size: var(--text-small); }
body.ds .tile-more summary {
  cursor: pointer; color: var(--muted); display: inline-block; min-height: 24px; line-height: 24px;
  list-style: none;
}
body.ds .tile-more summary::-webkit-details-marker { display: none; }
body.ds .tile-more summary::after { content: " ›"; }
body.ds .tile-more[open] summary::after { content: " ˅"; }
body.ds .tile-more .more-warn { color: var(--warn); font-weight: 600; }
body.ds .tile-more > * { display: block; margin-top: 4px; }
body.ds .tile-more .tile-change { margin-top: 6px; }
body.ds .things { list-style: none; margin: 0; padding: 0; }
body.ds .thing {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
body.ds .thing:last-child { border-bottom: 0; }
body.ds .thing .group-dot { margin: 0; align-self: center; }
body.ds .thing .what a { font-weight: 600; color: var(--ink); text-decoration: none; display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .thing .what a:hover { color: var(--accent); text-decoration: underline; }
body.ds .thing .detail { display: block; color: var(--muted); font-size: var(--text-small); }
body.ds .thing .amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ds .thing .amount.bad { color: var(--bad); }
body.ds .thing .words { font-weight: 500; color: var(--muted); font-size: var(--text-small); }
@media (max-width: 640px) {
  body.ds .thing { grid-template-columns: 8px 1fr; }
  body.ds .thing .amount { grid-column: 2; }
}

/* ---------- Settings (UX review): alert rule switches, People, Check against QuickBooks ---------- */
body.ds .rule-list { list-style: none; margin: 0; padding: 0; }
body.ds .rule-row { padding-block: var(--s4); border-block-end: 1px solid var(--line); display: grid; gap: var(--s2); }
body.ds .rule-row:first-child { padding-block-start: 0; }
body.ds .rule-name { font-weight: 600; font-size: var(--text-card); }
body.ds .rule-example { margin: 0; color: var(--muted); padding-inline-start: 52px; }
body.ds .rule-limit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-inline-start: 52px; }
body.ds .rule-limit label { margin: 0; font-weight: 500; }
body.ds .rule-meta { margin: 0; color: var(--faint); font-size: var(--text-tiny); padding-inline-start: 52px; }
body.ds .rule-row .error { margin: 0; padding-inline-start: 52px; }
body.ds .rule-row.is-off .rule-name { color: var(--muted); }
body.ds .rules-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-block-start: var(--s4); }
body.ds .rules-save .muted { font-size: var(--text-small); }

/* A checkbox drawn as a switch. The real checkbox sits invisibly over the track, so it keeps
   keyboard focus, screen readers and a full-size tap target. */
body.ds .switch { position: relative; display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; margin: 0; min-height: 28px; }
body.ds .switch input { position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); width: 40px; height: 28px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
body.ds .switch-track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--faint); transition: background-color 150ms; }
body.ds .switch-track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 25%); transition: inset-inline-start 150ms; }
body.ds .switch input:checked + .switch-track { background: var(--good); }
body.ds .switch input:checked + .switch-track::after { inset-inline-start: 19px; }
body.ds .switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.ds .switch-track, body.ds .switch-track::after { transition: none; }
}
@media (max-width: 640px) {
  body.ds .rule-example, body.ds .rule-limit, body.ds .rule-meta, body.ds .rule-row .error { padding-inline-start: 0; }
}
body.ds .verdict { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-size: var(--text-body); }
body.ds .verdict.good { color: var(--good); }
body.ds .verdict.good span { color: var(--ink); }
body.ds .verdict.good strong { color: var(--good); }
body.ds .verdict.bad strong { color: var(--bad); }
body.ds .verdict .verdict-icon { flex: none; width: 20px; height: 20px; margin-block-start: 1px; }
body.ds .verdict.bad .verdict-icon { color: var(--bad); }
body.ds .verdict-when { margin: var(--s2) 0 0; color: var(--faint); font-size: var(--text-tiny); padding-inline-start: 28px; }
body.ds .check-details > summary { cursor: pointer; color: var(--accent); font-weight: 500; margin-block-end: var(--s3); min-height: 24px; }
body.ds input.qb-name { width: 14em; max-width: 100%; }
body.ds .rule-limit input[type="number"].short { width: 6em; }
body.ds .people-grid { margin-block-end: var(--s4); }
body.ds .cell-sub { display: block; color: var(--faint); font-size: var(--text-tiny); font-weight: 400; }
@media (max-width: 640px) {
  body.ds .table.cards td.card-actions { grid-column: 1 / -1; padding-block-start: var(--s1); }
  body.ds .table.cards td.card-actions .inline-field { display: flex; gap: var(--s2); }
  body.ds .table.cards td.card-actions input.qb-name { flex: 1; width: auto; }
}

/* ---------- Actions (UX review 6/6): alert buttons, reminders, customer search, price limits ---------- */
body.ds .alert-actions { align-items: center; flex-wrap: wrap; }
body.ds .alert-history { margin: 0; color: var(--muted); font-size: var(--text-small); }
body.ds .button.quiet { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; box-shadow: none; padding-inline: var(--s2); }
body.ds .button.quiet:hover { background: var(--line-soft); color: var(--ink); }
body.ds .button.quiet .icon { width: 14px; height: 14px; margin-inline-start: 4px; vertical-align: -2px; }
body.ds .owed-action { text-align: end; }
body.ds .owed-action button { position: relative; white-space: nowrap; }  /* keeps the hidden "(opens WhatsApp)" inside the button */
body.ds .owed-action form { display: inline; }
body.ds .owed-table .owed-action .reminded { text-align: end; white-space: normal; min-width: 8em; }
body.ds .owed-search { margin-block-end: var(--s3); }
body.ds .owed-search label { font-size: var(--text-small); font-weight: 500; }
body.ds .owed-search input[type="search"] { width: 18em; max-width: 100%; }
body.ds .owed-search a { display: inline-block; min-height: 24px; line-height: 24px; }
body.ds .top-limits .limit-input { width: 7em; max-width: 100%; }
body.ds .top-limits td { vertical-align: top; }
body.ds .top-limits tr.has-error td { background: var(--bad-soft); }
body.ds .top-limits .error { margin: 4px 0 0; font-size: var(--text-small); white-space: normal; }
body.ds .price-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; font-size: var(--text-small); color: var(--muted); }
body.ds .price-trail li:first-child { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  body.ds .top-limits .limit-input { width: 100%; }
}