/* Inter — self-hosted (no third-party font request; see docs/legal/COOKIE_POLICY.md) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light Slate design system — approved tokens.
   Colour bands are drawn from the Settl. wordmark: warm orange #F26A3D leads,
   vibrant green #39A96B confirms. Every band has a fill grade that clears
   WCAG AA (4.5:1) with white or with its own soft tint — see tests/test_brand.py. */
:root {
  /* neutrals — unchanged Light Slate canvas */
  --canvas: #F8FAFC;
  --panel: #FFFFFF;
  --border: #E2E8F0;
  --ink: #0F172A;
  --muted: #64748B;

  /* band 1 — Settl orange (identity, action) */
  --brand: #F26A3D;          /* the exact wordmark orange: band, mark, large display, borders */
  --brand-fill: #CE4A21;     /* solid fill under white text — AA 4.54:1 */
  --brand-hover: #B4431C;    /* pressed / hover — AA 5.58:1 */
  --brand-ink: #B4431C;      /* orange text on white — AA 5.58:1 */
  --brand-soft: #FEF1EB;     /* tinted surface */
  --brand-line: #F8D3C3;     /* hairline on tinted surface */

  /* band 2 — Settl green (confirmed, settled, money in) */
  --leaf: #39A96B;           /* the exact wordmark green: dot, positive marks */
  --leaf-fill: #22734A;      /* solid fill under white text — AA 5.80:1 */
  --leaf-ink: #22734A;       /* green text on white — AA 5.80:1 */
  --leaf-soft: #EAF6EF;
  --leaf-line: #C4E6D3;

  /* semantic aliases — every existing rule keeps working */
  --accent: var(--brand-fill);      /* solid fill under white text */
  --accent-ink: var(--brand-ink);   /* accent TEXT on a soft tint — 5.05:1 on
                                       --brand-soft. --brand-fill is only
                                       4.11:1 there, so never use it for text. */
  --accent-soft: var(--brand-soft);
  --ok: var(--leaf-ink);
  --ok-soft: var(--leaf-soft);
  --warn: #B45309;
  --warn-soft: #FDF6E7;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

/* header */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--border);
}
/* brand band — the wordmark's two colours, carried across the top of the app */
.topbar::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0 74%, var(--leaf) 74% 100%);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  height: 56px; display: flex; align-items: center; gap: 28px;
}
.brand { font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -0.02em; }
.brand span { color: var(--brand); }
.brand img, .brand svg { display: block; height: 22px; width: auto; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  padding: 7px 12px; border-radius: 999px; color: var(--muted);
  font-weight: 500; font-size: 14px;
}
/* --accent-ink, not --accent: the fill colour is only 4.11:1 on this tint
   (the one contrast failure in the audit). */
.topbar nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.logout-form { margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
/* hamburger — CSS-only (no JS), only rendered on narrow screens */
.nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
}

/* layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.page-head .muted { margin: 0; }
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.panel.narrow { max-width: 560px; margin: 40px auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.import-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.import-cell {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--canvas);
}
.import-cell form { margin: 0; }
.import-cell .input { width: 100%; box-sizing: border-box; }

/* stats */
/* auto-fit, not repeat(4): a 5th card used to be orphaned on its own row */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; margin-bottom: 0; }
.stat-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }

/* table */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); padding: 8px 10px;
}
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table .small { font-size: 12px; color: var(--muted); }
/* Long URLs, tokens and emails have no space to break on. Without this a single
   carrier callback URL on Settings/Inbox stretched the document to 799px on a
   375px phone, so the phone zoomed the whole page out and every label rendered
   tiny (found by rendering the live app at 375x667, not by reading the CSS).
   Deliberately NOT applied to table cells: `anywhere` also shrinks a cell's
   min-content width, which let the 7-column invoice table crush itself into
   313px ("Zed Logisti cs", "$5,275.0 0") instead of scrolling. break-word breaks
   an over-long word only when the line would otherwise overflow. */
code, .mono, p, li { overflow-wrap: anywhere; }
td, th { overflow-wrap: break-word; }
.subject-cell { max-width: 380px; }
.unread-row td { font-weight: 600; }
.unread-row td.subject-cell a { font-weight: 700; }
.email-body { white-space: pre-wrap; word-break: break-word; }
.customer-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }

/* pills */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pill.current, .pill.age-current, .pill.paid, .pill.age-paid, .pill.sent { background: var(--ok-soft); color: var(--ok); }
.pill.due_soon, .pill.age-due_soon { background: var(--warn-soft); color: var(--warn); }
.pill.r1 { background: var(--accent-soft); color: var(--accent-ink); }
.pill.r2 { background: var(--warn-soft); color: var(--warn); }
.pill.r3, .pill.escalated, .pill.draft { background: var(--danger-soft); color: var(--danger); }
/* NB a class name cannot START with a digit — `.pill.0-30` is invalid CSS, which
   is why 1-30 / 31-60 / 61-90 days rendered as unstyled plain text while the
   other bucket rows got pills. The templates emit age-<bucket>. */
.pill.age-0-30, .pill.age-31-60, .pill.age-61-90, .pill.age-90\+ {
  background: var(--warn-soft); color: var(--warn);
}
/* The templates use these, but no rule existed for them — so `pill warn` (10
   places), `pill ok`, `pill danger`, `pill src` and every ladder stage pill
   (`pill st-*`: the escalation colours on the dashboard, Outbox and Calls
   pages) rendered as plain uncoloured text. One block so the set is visible
   and nothing can go missing again. */
.pill.ok, .pill.warn, .pill.danger, .pill.src {
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.src { background: var(--canvas); color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
.pill.st-pre_due, .pill.st-friendly { background: var(--ok-soft); color: var(--ok); }
.pill.st-firm { background: var(--warn-soft); color: var(--warn); }
.pill.st-urgent, .pill.st-final { background: var(--danger-soft); color: var(--danger); }

/* buttons */
.btn {
  display: inline-block; border: 1px solid var(--border); background: #fff;
  color: var(--ink); border-radius: var(--radius); padding: 8px 14px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn:hover { border-color: #CBD5E1; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); }
.btn.big { padding: 12px 22px; font-size: 16px; border-radius: 10px; }
.btn.tiny { padding: 4px 10px; font-size: 12px; }
.btn.ok { color: var(--ok); }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--canvas); }

/* forms */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.input {
  width: 100%; margin-top: 4px; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.input.file { padding: 6px; }
textarea.input { resize: vertical; font-family: ui-monospace, monospace; font-size: 13px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.inline-form { display: inline-flex; margin: 0; }
.auth-card { max-width: 400px; margin: 60px auto; }
.auth-card .btn { width: 100%; margin-top: 4px; }

/* flash */
.flash { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--leaf-line); }
.flash.error { background: var(--danger-soft); color: var(--danger); border: 1px solid #FECACA; }

/* landing */
.hero { text-align: center; padding: 70px 0 40px; }
.hero-badge {
  display: inline-block; background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid var(--brand-line);
  font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 { font-size: 44px; line-height: 1.1; margin-bottom: 16px; }
.hero h1 span { color: var(--brand); }
.hero-sub { max-width: 560px; margin: 0 auto 26px; color: var(--muted); font-size: 17px; }
.hero-cta { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cta-note { color: var(--muted); font-size: 13px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .features { grid-template-columns: 1fr; } }
.landing-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 46px; }

/* due list / preview */
.due-list { list-style: none; margin: 0; padding: 0; }
.due-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.due-list li:last-child { border-bottom: none; }
.muted { color: var(--muted); }
.note { font-size: 13px; }
.preview { position: relative; }
.preview-body {
  position: absolute; right: 0; top: 26px; z-index: 10; min-width: 340px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 12px;
  font-size: 12px; white-space: pre-wrap;
}
.tpl-block { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }

/* ---- customer comments timeline popup ---- */
.comment-btn {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:1px solid var(--border);
  border-radius:6px;background:#fff;color:var(--muted);
  font-size:12px;line-height:1;cursor:pointer;vertical-align:middle;
  margin-left:6px;transition:border-color .15s,color .15s;
}
.comment-btn:hover{border-color:var(--accent);color:var(--accent)}
.comment-btn.has-comments{color:var(--brand-ink);border-color:var(--brand-line);background:var(--brand-soft);width:auto;padding:0 6px}
/* The count of timeline entries, so a lit balloon says how much is in there.
   Rendered server-side on load and updated in place after a note is added. */
.comment-btn .ck-n{display:inline-block;margin-left:4px;min-width:14px;padding:0 3px;
  border-radius:7px;background:var(--brand-ink);color:#fff;font-size:10.5px;
  font-weight:600;line-height:15px;text-align:center;vertical-align:middle}
.comment-modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.45)}
.comment-modal.open{display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px}
.comment-box{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  width:100%;max-width:480px;max-height:74vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(15,23,42,.18);
}
.comment-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border)}
.comment-head h3{margin:0;font-size:15px;font-weight:700}
.comment-close{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.comment-close:hover{color:var(--ink)}
.comment-timeline{flex:1;overflow-y:auto;padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.comment-item{background:var(--canvas);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.comment-item .c-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment-item .c-when{font-size:11px;color:var(--muted);font-weight:600}
.comment-item .c-kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:1px 6px;border-radius:99px;background:var(--border);color:var(--muted)}
.comment-item .c-kind.k-note{background:var(--border);color:var(--muted)}
.comment-item .c-kind.k-call{background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line)}
.comment-item .c-kind.k-email{background:var(--leaf-soft);color:var(--leaf-ink);border:1px solid var(--leaf-line)}
.comment-item .c-kind.k-payment{background:var(--leaf-fill);color:#fff;border:1px solid var(--leaf-fill)}
.comment-item .c-text{font-size:14px;white-space:pre-wrap;word-break:break-word}
.comment-empty{color:var(--muted);font-size:14px;text-align:center;padding:18px 0}
.comment-add{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--border)}
.comment-add textarea{
  flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:14px;resize:vertical;min-height:38px;max-height:120px;
}
.comment-add textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.comment-add .btn{align-self:flex-end;white-space:nowrap}
.comment-err{color:var(--danger);font-size:13px;padding:0 18px 8px;display:none}

/* licence banner — deliberately not dismissible: it only appears when the
   automatic chasing is paused or an update is required (see licensing.py) */
.lic-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:var(--radius);margin-bottom:16px;
  font-size:14px;line-height:1.45;
}
.lic-bar .lic-ico{
  flex:0 0 auto;width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;background:var(--warn);
}
.lic-bar .lic-msg{flex:1 1 320px}
.lic-bar .lic-link{flex:0 0 auto;font-weight:600;text-decoration:underline;color:inherit}
.lic-bar.warn{background:var(--warn-soft);color:#7C3A0A;border:1px solid #F1D9A8}
.lic-bar.warn .lic-ico{background:var(--warn)}
.lic-bar.bad{background:var(--danger-soft);color:#991B1B;border:1px solid #FECACA}
.lic-bar.bad .lic-ico{background:var(--danger)}
.lic-bar.info{background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line)}
.lic-bar.info .lic-ico{background:var(--accent)}
.lic-bar .lic-exports{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.lic-bar .lic-exports a{font-weight:600;text-decoration:underline;color:inherit}

/* licence panel on Settings */
.lic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:4px 0 14px}
.lic-cell{background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.lic-cell .k{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.lic-cell .v{font-size:14px;font-weight:600;margin-top:3px;word-break:break-word}

/* ---- Settl. wordmark placement ---- */
.wordmark{display:block;height:30px;width:auto;margin:0 auto 22px}
.wordmark.sm{height:24px;margin:0 0 18px}

/* ---------------------------------------------------------------------------
   NARROW SCREENS (a phone is 375px wide). There used to be no media query for
   the header at all: nine nav links in a flex row pushed EVERY authenticated
   page to 853px, so "Log out" sat off-screen and every page scrolled sideways.
   The burger is CSS-only (a checkbox in base.html) — no JavaScript involved.
   --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .topbar-inner { height: auto; padding: 9px 14px; gap: 8px; flex-wrap: wrap; }
  .brand { order: 1; }
  .brand img, .brand svg { height: 20px; }
  .nav-burger { display: inline-flex; order: 3; margin-left: auto; }
  .topbar-actions { order: 4; gap: 4px; }
  .topbar-actions .btn { padding: 8px 10px; font-size: 13px; }
  .topbar nav {
    order: 5; flex-basis: 100%; flex-direction: column; gap: 2px;
    padding: 2px 0 4px; display: none;
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .topbar nav a {
    min-height: 44px; display: flex; align-items: center;
    padding: 10px 12px; border-radius: 10px; font-size: 15px;
  }
  /* 16px inputs: iOS Safari zooms the whole page when a smaller one is focused */
  .input, input, select, textarea { font-size: 16px; }
  textarea.input { font-size: 16px; }   /* was 15px — iOS Safari zooms the page on focus */
  .comment-add textarea { font-size: 16px; }   /* beats the modal's own 14px rule */
  /* 44px tap targets (Log in, Run daily check, Add invoice, Send…) */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.tiny { min-height: 44px; }   /* was 34px — a thumb cannot hit a 34px row button */
  .comment-btn { width: 44px; height: 44px; }   /* was 32px */
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .comment-close { min-width: 44px; min-height: 44px; }   /* was 23x20 in the modal header */
  /* the "Calls to make" stat-card link was an 83x16 strip — too small for a thumb */
  .stat-label a { display: inline-flex; align-items: center; min-height: 44px;
                  padding: 0 8px; margin: 0 -8px; }
  /* a wide table scrolls inside its panel instead of stretching the page */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* ...but at rest only the first two columns fit. The client cell's email made
     that column ~230px wide and pushed Amount/Due off the edge, so the amount
     rendered as "$5,2" and read as broken. Capping the email (a block inside the
     cell, so max-width is actually honoured) wraps it and brings the money and
     the due date on screen. */
  .table td:first-child .muted.small { max-width: 132px; overflow-wrap: break-word; }
  /* and say out loud that the rest is a swipe away — on a 6+ column table (the AR
     lists: invoices, customers, outbox, calls) the row buttons sit off-screen. The
     wording has to fit every one of them: "due date, risk" is invoices-only. */
  .panel:has(.table th:nth-child(6))::after {
    content: "Swipe the table sideways to see the remaining columns and the row buttons →";
    display: block; margin-top: 10px; font-size: 12px; color: var(--muted);
  }
  .table .email-body { white-space: normal; }
  .page-head { align-items: flex-start; }
  .wrap { padding: 18px 14px 44px; }
  .panel { padding: 16px; }
  h1 { font-size: 21px; }
  .stat-num { font-size: 22px; }
}

/* ---- "?" help: a page's instructions live behind one small round button ----
   The visible instructions were the longest line on every page head; they now
   sit in a balloon that opens on click (a native <details>, so it works with
   no JS and is keyboard-accessible for free). Closing: click the "?" again,
   click anywhere else, or press Escape (see the tiny handler in base.html). */
.title-row { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.help { position: relative; display: inline-flex; }
.help > summary {
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--muted);
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.help[open] > summary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.help[open] { z-index: 40; }
.help-balloon {
  position: absolute; left: 0; top: 30px; z-index: 40;
  width: min(440px, 80vw);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(15,23,42,.14);
  padding: 12px 14px;
  font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--ink);
  text-align: left; white-space: normal;
}
.help-balloon::before {
  content: ""; position: absolute; left: 8px; top: -6px; width: 10px; height: 10px;
  background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.help-balloon p { margin: 0 0 8px; }
.help-balloon p:last-child { margin-bottom: 0; }
.help-balloon strong { font-weight: 650; }
@media (max-width: 640px) {
  .help > summary { width: 30px; height: 30px; }   /* thumb-sized */
  /* The balloon hangs off the "?" button, which on a phone sits ~103px in —
     a 340px balloon then ran flush off the right edge. So on a phone it becomes
     a sheet across the viewport, over a light scrim. */
  .help[open]::before { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(15,23,42,.30); }
  .help-balloon { position: fixed; left: 14px; right: 14px; bottom: 16px; top: auto; width: auto; max-height: 62vh; overflow-y: auto; }
  .help-balloon::before { display: none; }
}

/* ---- how-to videos page ---- */
.video-grid { display: grid; gap: 18px; }
.video-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.video-head { margin-bottom: 12px; }
.video-head h2 { font-size: 18px; margin: 4px 0 4px; }
.video-head .muted { margin: 0; }
.video-num {
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent-ink, #F26A3D);
}
.video-card video { width: 100%; border-radius: 6px; background: #0f172a; display: block; }
.video-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; flex-wrap: wrap; }
.video-link {
  margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
}
.video-link:hover { border-color: var(--accent-ink, #F26A3D); color: var(--accent-ink, #F26A3D); }
@media (max-width: 640px) {
  .video-card { padding: 14px 14px 10px; }
  .video-foot { gap: 8px; }
  .video-link { margin-left: 0; }
}