/* Conto — coastal-colour system over Tabler 1.0-beta20.
   Source of truth: design/concepts/conto-coastal-colour-codex-handoff-2026-09-17.md
   Tokens first; components never carry raw hex. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../../fonts/PlusJakartaSans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('../../fonts/PlusJakartaSans-latin-italic.woff2') format('woff2'); }


@font-face { font-family: 'Dawning of a New Day'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/DawningOfANewDay-latin.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
    --colour-ink: #081A2A;
    --colour-petrol: #153A43;
    --colour-teal: #159EAA;
    --colour-teal-hover: #0E8791;
    --colour-teal-deep: #0B6E77;          /* small text / compact controls: AA on white, page and aqua */
    --colour-sky: #74C5D9;
    --colour-aqua: #DDF3F4;
    --colour-sun: #F4C64E;
    --colour-sun-soft: #FDF0C6;           /* "to review" tile ground — petrol text on it */
    --colour-page: #F8FCFC;
    --colour-surface: #FFFFFF;
    --colour-line: #D7E7EA;
    --colour-muted: #587080;
    --colour-on-petrol-muted: rgba(255, 255, 255, .72);
    --colour-petrol-row: rgba(255, 255, 255, .08);
    --colour-petrol-row-line: rgba(255, 255, 255, .14);
    --colour-sky-ink: #2F6F80;
    --colour-danger: #B42318;             /* overdue / errors: text-safe red */
    --colour-danger-soft: #FCEBE9;

    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-hand: 'Dawning of a New Day', 'Bradley Hand', 'Segoe Print', cursive;

    --r-card: 20px; --r-large: 24px; --r-pill: 999px; --r-field: 12px;
    --shadow: 0 18px 48px rgba(8, 26, 42, .12);
    --shadow-soft: 0 8px 24px rgba(8, 26, 42, .06);
    --t: 180ms; --ease: cubic-bezier(.2, .7, .2, 1);

    /* Tabler / Bootstrap bridge */
    --tblr-font-sans-serif: var(--font-sans);
    --tblr-body-bg: var(--colour-page);
    --tblr-body-color: var(--colour-ink);
    --tblr-secondary: var(--colour-muted);
    --tblr-muted: var(--colour-muted);
    --tblr-primary: var(--colour-teal);
    --tblr-primary-rgb: 21, 158, 170;
    --tblr-link-color: var(--colour-teal-deep);
    --tblr-link-hover-color: var(--colour-petrol);
    --tblr-border-color: var(--colour-line);
    --tblr-border-color-translucent: var(--colour-line);
    --tblr-card-bg: var(--colour-surface);
    --tblr-bg-surface: var(--colour-surface);
    --tblr-bg-surface-secondary: var(--colour-aqua);
    --tblr-body-font-size: .9375rem;
    --tblr-body-line-height: 1.55;
    --bs-body-bg: var(--colour-page);
    --bs-body-color: var(--colour-ink);
    --bs-border-color: var(--colour-line);
    --bs-link-color: var(--colour-teal-deep);
    --bs-primary: var(--colour-teal);
    --bs-primary-rgb: 21, 158, 170;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--colour-ink);
    background: var(--colour-page);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' 1;
}
a { color: var(--colour-teal-deep); text-underline-offset: .15em; }
a:hover { color: var(--colour-petrol); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--colour-ink); letter-spacing: -.02em; font-weight: 700; }
.text-muted, .text-secondary { color: var(--colour-muted) !important; }
.page { background: var(--colour-page); }
:focus-visible { outline: 3px solid var(--colour-petrol); outline-offset: 3px; }
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible { outline-offset: 2px; }
.skip-link {
    position: absolute; top: -60px; left: 12px; z-index: 10000;
    padding: .5rem 1rem; background: var(--colour-petrol); color: #fff; border-radius: var(--r-pill);
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- top navigation ---------- */
.topnav {
    position: sticky; top: 0; z-index: 1030;
    height: 76px;
    background: color-mix(in srgb, var(--colour-page) 90%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
}
.topnav.is-stuck { border-bottom-color: color-mix(in srgb, var(--colour-line) 70%, transparent); }
.topnav-inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.topnav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--colour-ink); }
.topnav-brand svg { width: 32px; height: 32px; }
.topnav-brand .wordmark { font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1; }
.topnav-links { display: flex; gap: 1.5rem; margin-inline: auto; list-style: none; padding: 0; margin-block: 0; }
.topnav-links > li { position: relative; }
.topnav-links a, .topnav-links button.navlink {
    display: inline-flex; align-items: center; gap: 4px; position: relative; padding: 8px 0; background: none; border: 0;
    color: var(--colour-ink); text-decoration: none; font-weight: 500; font-size: 1rem; font-family: inherit; cursor: pointer;
}
.topnav-links a::after, .topnav-links button.navlink::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--colour-teal); transform: scaleX(0); transition: transform var(--t) var(--ease);
}
.topnav-links a:hover::after, .topnav-links a[aria-current="page"]::after, .topnav-links button.navlink:hover::after, .topnav-links button.navlink[aria-expanded="true"]::after { transform: scaleX(1); }
.topnav-links a[aria-current="page"], .topnav-links button.navlink.is-active { font-weight: 600; }
.topnav-links button.navlink svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.topnav-links .dropdown-menu { margin-top: 10px; min-width: 220px; }
.topnav-links .dropdown-menu a { display: flex; padding: .55rem .9rem; font-weight: 500; }
.topnav-links .dropdown-menu a::after { display: none; }
.topnav-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.topnav .avatar-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; cursor: pointer;
    background: var(--colour-aqua); color: var(--colour-petrol); font-weight: 600; font-size: .9375rem; font-family: inherit;
}
.btn-new {
    width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--colour-teal-deep); color: #fff; border: 0; text-decoration: none;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn-new:hover, .btn-new:focus-visible { background: var(--colour-petrol); color: #fff; transform: translateY(-1px); }
.btn-new svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.topnav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--colour-line); background: var(--colour-surface); border-radius: 50%; place-items: center; cursor: pointer; }
.topnav-toggle svg { width: 22px; height: 22px; stroke: var(--colour-ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.topnav-search { display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--colour-line); background: var(--colour-surface); color: var(--colour-muted); font-size: .875rem; font-family: inherit; cursor: pointer; }
.topnav-search:hover { border-color: var(--colour-petrol); color: var(--colour-petrol); }
.topnav-search svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.topnav-search kbd { background: var(--colour-aqua); color: var(--colour-petrol); border: 0; font-size: .6875rem; padding: 2px 6px; border-radius: 6px; }
.topnav .dropdown-menu { border-radius: 16px; }

@media (max-width: 991.98px) {
    .topnav { height: 64px; }
    .topnav-inner { gap: .75rem; }
    .topnav-links { display: none; }
    .topnav-links.is-open {
        display: flex; flex-direction: column; gap: 0;
        position: absolute; left: 0; right: 0; top: 64px;
        background: var(--colour-surface); border-bottom: 1px solid var(--colour-line); padding: 8px 16px 16px;
        box-shadow: var(--shadow-soft);
    }
    .topnav-links.is-open a, .topnav-links.is-open button.navlink { padding: 12px 8px; display: flex; width: 100%; font-size: 1.0625rem; }
    .topnav-links.is-open a::after, .topnav-links.is-open button.navlink::after { display: none; }
    .topnav-links.is-open a[aria-current="page"] { color: var(--colour-teal-deep); }
    .topnav-links.is-open .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; border: 0; padding-left: 12px; margin: 0; }
    .topnav-toggle { display: inline-grid; }
    .topnav-search { display: none; }
    .topnav-brand svg { width: 28px; height: 28px; }
    .topnav-brand .wordmark { font-size: 1.3125rem; }
}

/* ---------- auth pages ---------- */
.auth-body { background: var(--colour-page); }
.auth-body .card { border-radius: var(--r-large); box-shadow: var(--shadow); }
.auth-body .card-body { padding: 2.25rem; }
.auth-body .form-label-description a { font-weight: 500; }

/* ---------- left navigation (everything visible) ---------- */
.has-sidenav { --sidenav-w: 264px; }
.sidenav {
    position: fixed; inset: 0 auto 0 0; width: var(--sidenav-w); z-index: 1040;
    display: flex; flex-direction: column;
    margin: 16px 0 16px 16px; height: calc(100vh - 32px);
    background: var(--colour-petrol); color: #fff; border-radius: var(--r-card); box-shadow: var(--shadow);
    padding: 1.5rem 1.25rem 1.25rem; overflow-y: auto;
}
.sidenav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.sidenav .topnav-brand { color: #fff; }
.sidenav-close { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--colour-petrol-row); place-items: center; cursor: pointer; }
.sidenav-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.sidenav-nav { flex: 1; }
.sidenav-label { margin: 1.1rem 0 .35rem .75rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--colour-on-petrol-muted); }
.sidenav-list { list-style: none; margin: 0; padding: 0; }
.sidenav-list a {
    display: flex; align-items: center; min-height: 42px; padding: .45rem 1rem; border-radius: var(--r-pill);
    color: #fff; text-decoration: none; font-weight: 500; font-size: .9375rem;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.sidenav-list a:hover { background: var(--colour-petrol-row); color: #fff; }
.sidenav-list a[aria-current="page"] { background: var(--colour-teal); color: #fff; font-weight: 600; }
.sidenav-backdrop { position: fixed; inset: 0; background: rgba(8, 26, 42, .45); z-index: 1035; }

.shell-main { margin-left: calc(var(--sidenav-w) + 16px); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--colour-page) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 0 2rem 0 calc(var(--sidenav-w) + 32px); }
.topbar-brand { display: none; }
.topbar .topnav-actions { margin-left: auto; }
.topbar-new { white-space: nowrap; }
.topbar-snap { display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 991.98px) { .topbar-snap { padding: 0 .75rem; } }

/* Account, top right: the business name stays on screen wherever you are. */
.topbar-user { margin-left: .25rem; }
.topbar-user-btn { display: flex; align-items: center; gap: .625rem; border: 1px solid var(--colour-line); background: var(--colour-surface); padding: .3rem .75rem .3rem .3rem; border-radius: var(--r-pill); color: var(--colour-ink); text-align: left; cursor: pointer; font-family: inherit; max-width: 260px; }
.topbar-user-btn:hover { border-color: var(--colour-sky); background: var(--colour-aqua); }
.topbar-user-btn .avatar-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--colour-petrol); color: #fff; font-weight: 600; font-size: .8125rem; flex: 0 0 auto; }
/* the business logo replaces the initials: white disc so any logo colour reads */
.topbar-user-btn .avatar-btn.avatar-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--colour-line); overflow: hidden; padding: 3px; }
.topbar-user-btn .avatar-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
.topbar-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-user-text b { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user-text span { color: var(--colour-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user-caret { width: 16px; height: 16px; stroke: var(--colour-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- receipts & invoices ---------- */
.dropzone { border: 2px dashed var(--colour-sky); border-radius: var(--r-card); background: var(--colour-surface); padding: 2rem; text-align: center; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.dropzone.is-over { background: var(--colour-aqua); border-color: var(--colour-teal); }
.dropzone p { margin: 0; color: var(--colour-muted); }
.dropzone .icon-tile { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--colour-aqua); color: var(--colour-petrol); margin-bottom: .75rem; }
.dropzone .icon-tile svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doc-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 1px solid var(--colour-line); background: #fff; }
.doc-thumb-pdf { display: grid; place-items: center; font-size: .6875rem; font-weight: 700; color: var(--colour-petrol); }
.doc-preview { border: 1px solid var(--colour-line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.doc-preview img { width: 100%; height: auto; display: block; }
.doc-preview iframe { width: 100%; height: 720px; border: 0; }
.doc-viewer iframe { height: calc(100vh - 230px); min-height: 480px; }
.field-check .form-control, .field-check .form-select { background: var(--colour-sun-soft); border-color: var(--colour-sun); }
.field-hint { font-size: .8125rem; color: var(--colour-muted); }
.page-body { flex: 1; }

@media (max-width: 991.98px) {
    .has-sidenav { --sidenav-w: 280px; }
    .sidenav { transform: translateX(calc(-100% - 24px)); transition: transform 220ms var(--ease); margin: 12px; height: calc(100vh - 24px); }
    .sidenav.is-open { transform: none; }
    .sidenav-close { display: inline-grid; }
    .shell-main { margin-left: 0; }
    .topbar-inner { padding: 0 16px; min-height: 64px; gap: .75rem; }
    .topbar-brand { display: inline-flex; }
    .topbar-new { display: none; }
    .topnav-search { display: none; }
    .topbar-user-text { display: none; }
    .topbar-user-caret { display: none; }
    .topbar-user-btn { padding: .3rem; border-color: transparent; background: none; }
}
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }

/* ---------- page header ---------- */
.page-body { padding-top: 2rem; padding-bottom: 4rem; }
.page-header { margin-bottom: 1.5rem; }
.page-header .row { row-gap: .75rem; }
.page-header .page-title { margin: 0; }
.page-header .btn { min-height: 44px; }
/* Every page reads like Today: content sits in rounded boxes with room to breathe. */
.container-xl > .card, .container-xl > .row > [class*="col"] > .card { margin-bottom: 1.25rem; }
.row-cards { row-gap: 1.25rem; }
.card > .table-responsive:first-child .table thead th { border-top: 0; }
.card .card-body > .row.g-2, .card .card-body > form > .row.g-2 { row-gap: .75rem; }
.card-body.border-bottom { border-bottom: 1px solid var(--colour-line) !important; }
.card-body + .table-responsive .table thead th { background: color-mix(in srgb, var(--colour-aqua) 45%, #fff); }
.datagrid-title, .card-header .subheader { color: var(--colour-muted); }
.card .card-title + .text-muted { margin-top: .25rem; }
.mt-3 { margin-top: 1.25rem !important; }
.page-pretitle { color: var(--colour-muted); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.page-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.page-title-lead { font-size: clamp(2.25rem, 4.2vw, 3.75rem); letter-spacing: -.05em; line-height: 1.02; }
.page-subtitle { color: var(--colour-muted); margin-top: .35rem; font-size: 1rem; }

/* handwritten accents: decorative, aria-hidden, never task information */
.hand { font-family: var(--font-hand); color: var(--colour-sky-ink); font-size: 1.375rem; line-height: 1.35; font-weight: 400; }
.hand.on-dark { color: var(--colour-on-petrol-muted); }

/* ---------- cards ---------- */
.card {
    border: 1px solid var(--colour-line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-soft);
    background: var(--colour-surface);
}
.card-header { background: transparent; border-bottom: 1px solid var(--colour-line); padding: 1.125rem 1.5rem; }
.card-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--colour-ink); }
.card-body { padding: 1.5rem; }
.card-footer { background: transparent; border-top: 1px solid var(--colour-line); }
.card-tinted { background: var(--colour-aqua); border-color: transparent; box-shadow: none; }
.card-petrol { background: var(--colour-petrol); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.card-petrol .card-title, .card-petrol h2, .card-petrol h3 { color: #fff; }
.card-link { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); text-decoration: none; color: inherit; display: block; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---------- buttons ---------- */
.btn {
    --tblr-btn-border-radius: var(--r-pill);
    border-radius: var(--r-pill);
    font-weight: 600;
    padding: .55rem 1.25rem;
    min-height: 44px;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn-sm { min-height: 36px; padding: .35rem .9rem; font-size: .8125rem; }
.btn-lg { min-height: 56px; padding: .75rem 1.75rem; font-size: 1.125rem; font-weight: 700; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary {
    --tblr-btn-bg: var(--colour-teal-deep); --tblr-btn-border-color: var(--colour-teal-deep); --tblr-btn-color: #fff;
    --tblr-btn-hover-bg: var(--colour-petrol); --tblr-btn-hover-border-color: var(--colour-petrol); --tblr-btn-hover-color: #fff;
    --tblr-btn-active-bg: var(--colour-petrol); --tblr-btn-active-border-color: var(--colour-petrol); --tblr-btn-active-color: #fff;
}
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-white, .btn-default {
    --tblr-btn-bg: var(--colour-surface); --tblr-btn-border-color: var(--colour-line); --tblr-btn-color: var(--colour-petrol);
    --tblr-btn-hover-bg: var(--colour-aqua); --tblr-btn-hover-border-color: var(--colour-petrol); --tblr-btn-hover-color: var(--colour-petrol);
    --tblr-btn-active-bg: var(--colour-aqua); --tblr-btn-active-color: var(--colour-petrol); --tblr-btn-active-border-color: var(--colour-petrol);
}
.btn-ghost-secondary, .btn-ghost-primary, .btn-link { color: var(--colour-teal-deep); }
.btn-outline-danger { --tblr-btn-color: var(--colour-danger); --tblr-btn-border-color: var(--colour-line); --tblr-btn-hover-bg: var(--colour-danger-soft); --tblr-btn-hover-color: var(--colour-danger); --tblr-btn-hover-border-color: var(--colour-danger); }
.btn-danger { --tblr-btn-bg: var(--colour-danger); --tblr-btn-border-color: var(--colour-danger); }
.btn-inverse { --tblr-btn-bg: var(--colour-aqua); --tblr-btn-border-color: var(--colour-aqua); --tblr-btn-color: var(--colour-petrol); --tblr-btn-hover-bg: #fff; --tblr-btn-hover-border-color: #fff; --tblr-btn-hover-color: var(--colour-petrol); }
.btn-teal-fill { --tblr-btn-bg: var(--colour-teal); --tblr-btn-border-color: var(--colour-teal); --tblr-btn-color: #fff; --tblr-btn-hover-bg: var(--colour-teal-hover); --tblr-btn-hover-border-color: var(--colour-teal-hover); --tblr-btn-hover-color: #fff; --tblr-btn-active-bg: var(--colour-teal-hover); --tblr-btn-active-color: #fff; font-size: 1.1875rem; font-weight: 700; min-height: 56px; }
.btn-icon { border-radius: 50%; width: 40px; height: 40px; min-height: 40px; padding: 0; }
.btn-list { gap: .5rem; }

/* ---------- badges (status) — muted, text-first ---------- */
.badge {
    border-radius: var(--r-pill); font-weight: 600; font-size: .75rem; letter-spacing: .01em;
    padding: .35em .75em; text-transform: none;
}
.badge.bg-green, .badge.bg-success   { background: var(--colour-aqua) !important; color: var(--colour-teal-deep) !important; }
.badge.bg-blue, .badge.bg-info, .badge.bg-azure, .badge.bg-cyan { background: color-mix(in srgb, var(--colour-sky) 35%, #fff) !important; color: var(--colour-petrol) !important; }
.badge.bg-yellow, .badge.bg-warning, .badge.bg-orange { background: var(--colour-sun-soft) !important; color: var(--colour-petrol) !important; }
.badge.bg-red, .badge.bg-danger      { background: var(--colour-danger-soft) !important; color: var(--colour-danger) !important; }
.badge.bg-secondary, .badge.bg-muted, .badge.bg-gray, .badge.bg-light { background: color-mix(in srgb, var(--colour-line) 60%, #fff) !important; color: var(--colour-muted) !important; }
.badge.bg-primary, .badge.bg-dark, .badge.bg-purple, .badge.bg-indigo { background: var(--colour-petrol) !important; color: #fff !important; }

/* ---------- tables ---------- */
.table { color: var(--colour-ink); --tblr-table-border-color: var(--colour-line); }
.table thead th, .card-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--colour-surface);
    color: var(--colour-muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid var(--colour-line);
}
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table-vcenter td { vertical-align: middle; }
.table tbody tr:hover { background: color-mix(in srgb, var(--colour-aqua) 45%, transparent); }
.table .text-end, .table .money { font-variant-numeric: tabular-nums; }
.table a { text-decoration: none; font-weight: 600; }
.table a:hover { text-decoration: underline; }

/* ---------- forms ---------- */
.form-label { font-weight: 600; color: var(--colour-petrol); font-size: .875rem; }
.form-control, .form-select {
    border-radius: var(--r-field); border-color: var(--colour-line); min-height: 44px;
    background: var(--colour-surface); color: var(--colour-ink);
}
.form-control-sm, .form-select-sm { min-height: 36px; }
.form-control:focus, .form-select:focus { border-color: var(--colour-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-sky) 45%, transparent); }
.form-control::placeholder { color: color-mix(in srgb, var(--colour-muted) 70%, #fff); }
.form-hint { color: var(--colour-muted); }
.form-check-input:checked { background-color: var(--colour-teal-deep); border-color: var(--colour-teal-deep); }
.input-group-text { border-radius: var(--r-field); border-color: var(--colour-line); background: var(--colour-aqua); color: var(--colour-petrol); }
.required::after { content: ' *'; color: var(--colour-danger); }
.invalid-feedback { color: var(--colour-danger); }
.is-invalid { border-color: var(--colour-danger) !important; }

/* ---------- alerts / flash ---------- */
.alert { border-radius: 16px; border: 1px solid var(--colour-line); background: var(--colour-surface); color: var(--colour-ink); }
.alert-success { background: var(--colour-aqua); border-color: transparent; color: var(--colour-petrol); }
.alert-danger { background: var(--colour-danger-soft); border-color: transparent; color: var(--colour-danger); }
.alert-warning, .alert-info { background: var(--colour-sun-soft); border-color: transparent; color: var(--colour-petrol); }

/* ---------- empty states ---------- */
.empty { padding: 3rem 1.5rem; }
.empty-icon { color: var(--colour-sky); }
.empty-title { font-weight: 700; letter-spacing: -.02em; }
.empty-subtitle { color: var(--colour-muted); }
.empty h1 { font-size: 4rem; color: var(--colour-petrol); }

/* ---------- nav tabs / pills ---------- */
.nav-tabs .nav-link { color: var(--colour-muted); font-weight: 500; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--colour-ink); border-bottom-color: var(--colour-teal); background: transparent; }
.nav-pills .nav-link { border-radius: var(--r-pill); color: var(--colour-petrol); background: var(--colour-surface); border: 1px solid var(--colour-line); min-height: 44px; display: inline-flex; align-items: center; padding: 0 1.25rem; font-weight: 600; margin-right: .5rem; }
.nav-pills .nav-link:hover { background: var(--colour-aqua); border-color: var(--colour-petrol); }
.nav-pills .nav-link.active { background: var(--colour-teal); border-color: var(--colour-teal); color: #fff; }

/* dropdowns, modals, pagination, misc */
.dropdown-menu { border-radius: 16px; border-color: var(--colour-line); box-shadow: var(--shadow); padding: .5rem; }
.dropdown-item { border-radius: var(--r-pill); padding: .55rem .9rem; color: var(--colour-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--colour-aqua); color: var(--colour-petrol); }
.dropdown-item.active { background: var(--colour-petrol); color: #fff; }
.modal-content { border-radius: var(--r-card); border: 0; box-shadow: var(--shadow); }
.page-link { color: var(--colour-petrol); border-color: var(--colour-line); }
.page-item.active .page-link { background: var(--colour-petrol); border-color: var(--colour-petrol); }
.avatar { background: var(--colour-aqua); color: var(--colour-petrol); font-weight: 600; }
.progress { background: var(--colour-aqua); }
.progress-bar { background: var(--colour-teal); }
kbd { background: var(--colour-aqua); color: var(--colour-petrol); border: 0; }
.footer { color: var(--colour-muted); font-size: .8125rem; border-top: 1px solid var(--colour-line); padding: 1.5rem 0; }
.text-primary { color: var(--colour-teal-deep) !important; }
.bg-primary { background: var(--colour-petrol) !important; }
.bg-primary-lt, .bg-green-lt, .bg-blue-lt, .bg-azure-lt { background: var(--colour-aqua) !important; color: var(--colour-petrol) !important; }
.bg-yellow-lt, .bg-orange-lt { background: var(--colour-sun-soft) !important; color: var(--colour-petrol) !important; }
.bg-red-lt { background: var(--colour-danger-soft) !important; color: var(--colour-danger) !important; }

/* ---------- dashboard ("Today") ---------- */
.today-grid { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr) minmax(260px, 3.5fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1199.98px) { .today-grid { grid-template-columns: 1fr 1fr; } .today-grid .decide-card { grid-row: span 2; } }
@media (max-width: 767.98px) { .today-grid { grid-template-columns: 1fr; } .today-grid .decide-card { grid-row: auto; } }

.decide-card { background: var(--colour-petrol); color: #fff; border-radius: var(--r-card); padding: 2rem 1.75rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.decide-card h2 { color: #fff; font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--colour-petrol-row-line); }
.decide-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.decide-list li { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--colour-petrol-row-line); }
.decide-list li:last-child { border-bottom: 0; }
.decide-list a { color: #fff; text-decoration: none; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.decide-list a:hover { color: var(--colour-sky); }
.decide-num { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); font-weight: 600; }
.decide-card .btn-teal-fill { width: 100%; margin-top: auto; }
.decide-card .hand { margin-top: 1.5rem; font-size: 1.25rem; transform: rotate(-4deg); display: inline-block; align-self: flex-end; text-align: right; }
.decide-empty { color: var(--colour-on-petrol-muted); font-size: 1.0625rem; margin-bottom: 1.5rem; }

.balance-card { background: var(--colour-surface); border: 1px solid var(--colour-line); border-radius: var(--r-card); padding: 2rem 2rem 1.5rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-width: 0; }
.balance-card h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -.04em; padding-bottom: 1.25rem; border-bottom: 1px solid var(--colour-line); margin-bottom: 1.25rem; }
.balance-figure { font-size: clamp(2.75rem, 5.5vw, 4.75rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.balance-label { color: var(--colour-muted); font-size: 1.125rem; margin-top: .35rem; }
.balance-chart { width: 100%; height: 80px; margin: 1rem 0 .5rem; }
.balance-chart .line { fill: none; stroke: var(--colour-teal); stroke-width: 2.5; stroke-linecap: round; }
.balance-chart .dot { fill: var(--colour-teal); }
.balance-note { font-size: 1.0625rem; margin-bottom: 1.25rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: auto; }
.tile { border-radius: 16px; padding: 1.125rem 1.25rem; text-decoration: none; color: var(--colour-ink); display: block; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); color: var(--colour-ink); }
.tile-label { display: block; color: var(--colour-muted); font-size: .9375rem; margin-bottom: .25rem; }
.tile-value { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile-aqua { background: var(--colour-aqua); }
.tile-sky { background: color-mix(in srgb, var(--colour-sky) 35%, #fff); }
.tile-sun { background: var(--colour-sun-soft); }
@media (max-width: 575.98px) { .tiles { grid-template-columns: 1fr; } }

.side-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.side-card { border-radius: var(--r-card); padding: 1.5rem; border: 1px solid var(--colour-line); background: var(--colour-surface); box-shadow: var(--shadow-soft); }
.side-card.tinted { background: var(--colour-aqua); border-color: transparent; box-shadow: none; }
.side-card h3 { font-size: 1.375rem; letter-spacing: -.03em; padding-bottom: .9rem; border-bottom: 1px solid color-mix(in srgb, var(--colour-line) 80%, transparent); margin-bottom: .9rem; }
.next-up { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: var(--colour-ink); }
.next-up:hover { color: var(--colour-petrol); }
.next-up b { display: block; font-size: 1.25rem; letter-spacing: -.02em; }
.next-up span { color: var(--colour-muted); }
.next-up svg { width: 26px; height: 26px; stroke: var(--colour-teal-deep); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.settled { list-style: none; padding: 0; margin: 0; }
.settled li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--colour-line); }
.settled li:last-child { border-bottom: 0; padding-bottom: 0; }
.settled b { display: block; font-weight: 600; }
.settled span { color: var(--colour-muted); font-size: .875rem; }
.settled .amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Today fits one screen: the still life is pinned bottom-left and overlaps the cards. */
.today-page { position: relative; min-height: calc(100vh - 72px - 1rem); padding-bottom: 2.75rem; display: flex; flex-direction: column; }
@media (min-width: 992px) and (min-height: 780px) {
    body.is-today .shell-main { height: calc(100vh - 72px); min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin-bottom: 0; }
    body.is-today .page-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    body.is-today .page-body > .container-xl { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    body.is-today .today-page { flex: 1; min-height: 0; }
}
.today-page .today-grid { flex: 0 0 auto; }
/* The heading never gives up height on short screens (Tabler's min-height lets it shrink, and the cards then cover the date). */
.today-page > .page-header { flex-shrink: 0; }
body.is-today .page-body { padding-top: .5rem; padding-bottom: .5rem; }
body.is-today .footer { display: none; }
body.is-today .balance-figure { font-size: clamp(2.5rem, 4.6vw, 4rem); }
body.is-today .decide-card, body.is-today .balance-card { padding-top: 1.5rem; padding-bottom: 1.25rem; }
body.is-today .decide-card h2, body.is-today .balance-card h2 { margin-bottom: 1rem; padding-bottom: 1rem; }
body.is-today .balance-chart { height: 64px; margin: .5rem 0 .25rem; }
body.is-today .side-card { padding: 1.25rem; }
body.is-today .settled li { padding: .55rem 0; }
@media (max-height: 900px) { .today-still { width: clamp(300px, 24vw, 420px); left: -110px; } }
body.is-today .decide-list li { padding: .7rem 0; }
.today-page .page-header { margin-bottom: 1rem; }
.today-page .page-title-lead { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.today-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 2rem; pointer-events: none; }
.today-still { position: absolute; left: -120px; bottom: -8px; width: clamp(360px, 30vw, 560px); z-index: 3; filter: drop-shadow(0 18px 30px rgba(8, 26, 42, .14)); }
.today-still img { width: 100%; height: auto; display: block; }
.today-hand { transform: rotate(-4deg); margin: 0 3rem 1.75rem 0 !important; }
.today-tag { display: flex; align-items: flex-end; gap: .75rem; margin: 0 0 1rem; font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--colour-sky-ink); line-height: 1.5; text-align: left; }
.tag-line { display: inline-block; width: 44px; height: 1px; background: var(--colour-sky); margin-bottom: 9px; }
.decide-card, .balance-card, .side-stack { position: relative; z-index: 1; }
@media (max-width: 991.98px) {
    .today-page { min-height: 0; padding-bottom: 2rem; }
    .today-foot { position: static; justify-content: flex-end; }
    .today-still, .today-tag { display: none; }
}

/* ---------- list pages ---------- */
.list-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.money { font-variant-numeric: tabular-nums; }
.section-label { color: var(--colour-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- print / motion ---------- */
@media print {
    .topnav, .footer, .btn, .list-toolbar { display: none !important; }
    .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .btn:hover, .tile:hover, .card-link:hover { transform: none; }
}

/* ---------- settings tabs (squares beside the title) ---------- */
.settings-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.settings-tabs a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: var(--r-pill);
    background: var(--colour-surface); border: 1px solid var(--colour-line); color: var(--colour-petrol);
    font-weight: 600; text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.settings-tabs a:hover { background: var(--colour-aqua); border-color: var(--colour-petrol); color: var(--colour-petrol); }
.settings-tabs a[aria-current="page"] { background: var(--colour-teal); border-color: var(--colour-teal); color: #fff; }
.form-control-color { width: 56px; height: 44px; padding: 4px; border-radius: 12px; }

/* ---------- review queue ---------- */
.review-list { display: flex; flex-direction: column; gap: 1rem; max-width: 880px; }
.review-item .card-body { padding: 1.5rem 1.75rem; }
.review-meta { color: var(--colour-muted); font-size: .875rem; margin-bottom: .35rem; }
.review-question { font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -.03em; margin-bottom: 1rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.review-else { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--colour-line); }

/* Profile questions (welcome, Settings → Your business) — one boxed choice per line */
.profile-choice { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; margin: 0 0 .5rem; border: 1px solid var(--colour-line); border-radius: 12px; background: var(--colour-surface, #fff); cursor: pointer; }
.profile-choice .form-check-input { margin-top: .3rem; flex: none; }
.profile-choice:has(.form-check-input:checked) { border-color: var(--colour-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--colour-teal) 18%, transparent); }
.profile-choice .form-check-label { line-height: 1.35; }
/* Director's loan card (Today) */
.dl-card { border-left: 4px solid var(--colour-line); }
.dl-card.is-amber { border-left-color: var(--colour-sun); }
.dl-card.is-red { border-left-color: var(--colour-danger); }

/* ---------- check your email ---------- */
.verify-card { border-radius: 28px; }
.verify-card .card-body { padding: 2.5rem 2rem 2rem; }
.verify-art { margin: 0 auto 1.25rem; max-width: 280px; }
.verify-art svg { width: 100%; height: auto; }
.verify-art .envelope rect { fill: var(--colour-aqua); stroke: var(--colour-teal); stroke-width: 2.5; }
.verify-art .envelope path { fill: none; stroke: var(--colour-teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.verify-art .rule { stroke: var(--colour-sky); stroke-width: 2.5; stroke-linecap: round; }
.verify-art .plus path { stroke: var(--colour-sun); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.verify-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; color: var(--colour-ink); }
.verify-title span { color: var(--colour-teal); }
.verify-lead { font-size: 1.0625rem; color: var(--colour-ink); margin-bottom: .75rem; }
.verify-note { color: var(--colour-muted); font-size: .9375rem; margin-bottom: 0; }
.verify-resend { margin-top: 1rem; }
.verify-resend summary { cursor: pointer; text-align: center; color: var(--colour-teal-deep); font-size: .9375rem; }
.verify-resend summary::-webkit-details-marker { display: none; }

/* ---------- guided first run ---------- */
.setup-body { background: var(--colour-page); }
.setup-shell { min-height: 100vh; display: flex; flex-direction: column; }
.setup-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; }
.setup-main { width: min(1040px, 100%); margin: 0 auto; padding: 0 1.25rem 4rem; }
.setup-head { text-align: center; margin-bottom: 2rem; }
.setup-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.setup-title span { color: var(--colour-teal); }
.setup-sub { color: var(--colour-muted); margin-bottom: 1.25rem; }
.setup-bar { height: 10px; border-radius: 999px; background: var(--colour-aqua); overflow: hidden; }
.setup-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--colour-teal), var(--colour-sky)); transition: width 400ms var(--ease); }
.setup-count { margin: .5rem 0 0; font-size: .875rem; color: var(--colour-muted); }
.setup-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: start; }
.setup-steps { list-style: none; margin: 0; padding: 1.25rem; background: var(--colour-petrol); border-radius: var(--r-card); color: #fff; }
.setup-steps li { margin: 0; }
.setup-steps li > a, .setup-steps li > span { display: flex; gap: .75rem; padding: .625rem .5rem; border-radius: var(--r-pill); color: var(--colour-on-petrol-muted); text-decoration: none; }
.setup-steps li > a:hover { background: var(--colour-petrol-row); color: #fff; }
.setup-steps li.is-now > span { background: var(--colour-teal); color: #fff; }
.setup-steps li.is-done > a { color: #fff; }
.setup-steps b { display: block; font-weight: 600; font-size: .9375rem; }
.setup-steps span span { font-size: .8125rem; opacity: .85; }
.setup-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.14); font-size: .8125rem; font-weight: 600; color: #fff; }
.setup-steps li.is-done .setup-dot { background: var(--colour-sky); color: var(--colour-petrol); }
.setup-steps li.is-now .setup-dot { background: #fff; color: var(--colour-teal); }
.setup-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.setup-card { background: var(--colour-surface); border: 1px solid var(--colour-line); border-radius: var(--r-card); padding: 1.75rem; }
.setup-step-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.setup-step-blurb { color: var(--colour-muted); margin-bottom: 1.5rem; }
.setup-actions { display: flex; align-items: center; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--colour-line); }
.setup-legal h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.setup-legal h3:first-child { margin-top: 0; }
.setup-legal p { color: var(--colour-muted); }
.setup-legal .form-check { background: var(--colour-page); border: 1px solid var(--colour-line); border-radius: 14px; padding: .875rem 1rem .875rem 2.5rem; }
.setup-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: .5rem 0 .25rem; }
.setup-template { display: block; cursor: pointer; }
.setup-template input { position: absolute; opacity: 0; }
.setup-template > span { display: block; border: 1px solid var(--colour-line); border-radius: 14px; padding: .875rem 1rem; }
.setup-template b { display: block; font-size: .9375rem; }
.setup-template span span { font-size: .8125rem; color: var(--colour-muted); }
.setup-template input:checked + span { border-color: var(--colour-teal); background: var(--colour-aqua); }
@media (max-width: 860px) {
    .setup-grid { grid-template-columns: 1fr; }
    .setup-steps { display: none; }
    .setup-top { padding: .75rem 1rem; }
}

.logo-drop { display: grid; place-items: center; gap: .5rem; width: 150px; height: 150px; border: 2px dashed var(--colour-sky); border-radius: 20px; background: var(--colour-page); cursor: pointer; overflow: hidden; margin-bottom: .5rem; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.logo-drop:hover { border-color: var(--colour-teal); background: var(--colour-aqua); }
.logo-drop img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .75rem; }
.logo-drop-icon svg { width: 34px; height: 34px; stroke: var(--colour-teal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.logo-drop-text { font-size: .8125rem; color: var(--colour-muted); }
.logo-drop.has-logo { border-style: solid; border-color: var(--colour-line); background: #fff; }

/* ---------- choosing a bank ---------- */
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.bank-tile { cursor: pointer; }
.bank-tile input { position: absolute; opacity: 0; }
.bank-tile > span { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--colour-line); border-radius: 16px; padding: .875rem 1rem; background: var(--colour-surface); min-height: 68px; }
.bank-mark { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
.bank-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--colour-line); padding: 4px; }
.bank-initial { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--colour-aqua); color: var(--colour-petrol); font-weight: 700; font-size: 1rem; }
.bank-tile input:checked + span .bank-initial { background: var(--colour-teal); color: #fff; }
.bank-tile b { font-size: .9375rem; font-weight: 600; }
.bank-tile input:checked + span { border-color: var(--colour-teal); background: var(--colour-aqua); box-shadow: 0 0 0 1px var(--colour-teal) inset; }
.bank-tile input:focus-visible + span { outline: 2px solid var(--colour-teal); outline-offset: 2px; }

.connect-cta { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--colour-aqua); border: 1px solid var(--colour-sky); border-radius: var(--r-card); padding: 1.25rem 1.5rem; }
.connect-cta h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .25rem; }
.connect-cta p { margin: 0; color: var(--colour-petrol); max-width: 52ch; font-size: .9375rem; }
.setup-or { display: flex; align-items: center; gap: 1rem; color: var(--colour-muted); font-size: .875rem; margin: 1.5rem 0 1rem; }
.setup-or::before, .setup-or::after { content: ''; flex: 1; height: 1px; background: var(--colour-line); }

.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--colour-line); }
.conn-list li:last-child { border-bottom: 0; }
.conn-list b { display: block; font-weight: 600; }

/* ---------- VAT ---------- */
.vat-periods { list-style: none; margin: 0; padding: 0; }
.vat-periods li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--colour-line); }
.vat-periods li:last-child { border-bottom: 0; }
.vat-period-when b { display: block; font-weight: 600; }
.vat-period-state { display: flex; align-items: center; gap: .5rem; }
.vat-boxes th { width: 3.5rem; color: var(--colour-teal-deep); font-weight: 700; }
.vat-steps { margin: 0; padding-left: 1.2em; }
.vat-steps li { margin-bottom: .5rem; line-height: 1.6; }

.send-list { margin: 0; padding-left: 1.1em; }
.send-list li { margin-bottom: .45rem; line-height: 1.5; }

/* ---------- plans ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.plan-card { background: var(--colour-surface); border: 1px solid var(--colour-line); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.plan-card.is-current { border-color: var(--colour-teal); background: var(--colour-aqua); }
.plan-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0; }
.plan-price { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.plan-price span { font-size: .9375rem; font-weight: 500; color: var(--colour-muted); }
.plan-for { font-weight: 500; margin: 0; }
.plan-blurb { color: var(--colour-muted); font-size: .9375rem; margin: 0 0 auto; }
.plan-card form, .plan-card .badge { margin-top: 1rem; }

.rtd-table th span { display: block; font-weight: 400; font-size: .75rem; color: var(--colour-muted); }
.rtd-box { display: inline-block; min-width: 2.4em; padding: .05rem .35rem; margin-right: .35rem; border-radius: 6px; background: var(--colour-aqua); color: var(--colour-teal-deep); font-size: .6875rem; font-weight: 700; letter-spacing: .02em; }

.books-years { display: grid; gap: .625rem; }
.books-year { display: block; border: 1px solid var(--colour-line); border-radius: 16px; padding: .875rem 1.125rem; text-decoration: none; color: var(--colour-ink); background: var(--colour-surface); }
.books-year:hover { border-color: var(--colour-teal); background: var(--colour-aqua); color: var(--colour-ink); }
.books-year b { display: block; font-weight: 600; }
.books-year span { color: var(--colour-muted); font-size: .875rem; }

.reminder-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.reminder-list li { padding: .4rem 0; border-bottom: 1px solid var(--colour-line); font-size: .9375rem; }
.reminder-list li:last-child { border-bottom: 0; }

/* Keyboard users land here first; it stays out of the way until focused. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--colour-petrol); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 12px 0; text-decoration: none; font-weight: 600; }
.skip-link:focus { left: 0; color: #fff; }

/* Small buttons carry small text, so they take the darker teal (AA at 4.5:1). */
.btn-sm.btn-teal-fill, .btn-teal-fill.btn-sm { --tblr-btn-bg: var(--colour-teal-deep); --tblr-btn-border-color: var(--colour-teal-deep); --tblr-btn-hover-bg: var(--colour-petrol); --tblr-btn-hover-border-color: var(--colour-petrol); font-size: .875rem; min-height: 0; }

/* ---------- sortable table headings (table-sort.js) ---------- */
th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sortable::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .25; transform: translateY(-2px) rotate(45deg); }
th.th-sortable:hover::after, th.th-sortable:focus-visible::after { opacity: .6; }
th.th-sortable[aria-sort="ascending"]::after { opacity: 1; transform: translateY(1px) rotate(-135deg); }
th.th-sortable[aria-sort="descending"]::after { opacity: 1; transform: translateY(-2px) rotate(45deg); }
th.th-sortable:focus-visible { outline: 2px solid var(--colour-teal); outline-offset: -2px; }

/* ---------- mileage ---------- */
.mileage-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 991.98px) { .mileage-top { grid-template-columns: 1fr; } }
.mileage-figure { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.band-meter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.band-meter .band { position: relative; border-radius: 12px; padding: .6rem .7rem .55rem; overflow: hidden; min-height: 64px;
    background: color-mix(in srgb, var(--colour-aqua) calc(100% - var(--heat) * .55), var(--colour-sky)); }
.band-meter .band.is-now { outline: 2px solid var(--colour-petrol); outline-offset: 1px; }
.band-meter .band-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--colour-petrol) 22%, transparent); }
.band-meter .band-rate, .band-meter .band-range { position: relative; display: block; }
.band-meter .band-rate { font-weight: 700; font-variant-numeric: tabular-nums; }
.band-meter .band-range { font-size: .75rem; color: var(--colour-muted); }
.usual-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.usual-trip { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--colour-line); border-radius: 14px; padding: .5rem .6rem .5rem .8rem; background: var(--colour-surface); }
.usual-trip .usual-fill { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--colour-ink); }
.usual-trip .usual-fill b, .usual-trip .usual-fill span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usual-trip .usual-fill span { font-size: .8125rem; color: var(--colour-muted); }
.engine-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.engine-tile { position: relative; display: block; border: 1px solid var(--colour-line); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; background: var(--colour-surface); }
.engine-tile input { position: absolute; opacity: 0; }
.engine-tile:has(input:checked) { border-color: var(--colour-petrol); box-shadow: 0 0 0 2px var(--colour-petrol) inset; background: var(--colour-aqua); }
.engine-tile:has(input:focus-visible) { outline: 2px solid var(--colour-petrol); outline-offset: 2px; }
.err-steps { background: var(--colour-sun-soft); border-radius: 12px; padding: .75rem 1rem; }

/* ---------- calmer type scale (owner, 2026-10-21: "titles too big next to the menu, even the transaction rows") ----------
   Headings sit one or two steps above the 15px menu, not five. Kept as one block so the scale can be read at a glance. */
.page-pretitle { font-size: .875rem; }
.page-title { font-size: clamp(1.375rem, 1.9vw, 1.75rem); letter-spacing: -.03em; }
.page-title-lead, .today-page .page-title-lead { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.035em; line-height: 1.1; }
.page-subtitle { font-size: .9375rem; }
.card-title { font-size: 1rem; }
h2.h3, .h3 { font-size: 1.0625rem; }
.review-item .card-body { padding: 1.1rem 1.35rem; }
.review-meta { font-size: .8125rem; margin-bottom: .2rem; }
.review-question { font-size: clamp(1rem, 1.3vw, 1.125rem); letter-spacing: -.015em; margin-bottom: .75rem; }
.btn { min-height: 38px; padding: .4rem 1rem; font-size: .875rem; }
.btn-sm { min-height: 32px; padding: .25rem .75rem; font-size: .8125rem; }
.btn-lg { min-height: 48px; font-size: 1rem; }
.settings-tabs a { min-height: 38px; padding: 0 1rem; font-size: .875rem; }
.table { font-size: .875rem; }
.table > :not(caption) > * > * { padding: .6rem .85rem; }
.decide-card h2, .balance-card h2 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); padding-bottom: .9rem; margin-bottom: .9rem; }
.decide-list a { font-size: .9375rem; }
.decide-empty, .balance-note { font-size: .9375rem; }
.balance-figure, body.is-today .balance-figure { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.balance-label { font-size: .9375rem; }
.tile-label { font-size: .8125rem; }
.tile-value { font-size: 1.1875rem; }
.side-card h3 { font-size: 1.0625rem; padding-bottom: .7rem; margin-bottom: .7rem; }
.next-up b { font-size: 1.0625rem; }
.hand { font-size: 1.1875rem; }
.decide-card .hand { font-size: 1.0625rem; }
.mileage-figure { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
.verify-title, .setup-title { font-size: clamp(1.5rem, 2.8vw, 1.875rem); }
.setup-step-title { font-size: 1.25rem; }
.plan-price { font-size: 1.625rem; }
.empty h1 { font-size: 2.75rem; }
.topnav-brand .wordmark { font-size: 1.375rem; }

/* Today, re-fitted (owner, 2026-10-21): no block stretches to fill a column; the balance shares its
   column with "Recently settled", so the three columns end at about the same height and fit one screen. */
.today-grid { grid-template-columns: minmax(280px, 4fr) minmax(0, 6.5fr) minmax(250px, 3.5fr); align-items: start; gap: 1rem; }
.mid-stack { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; min-width: 0; }
.side-stack { gap: 1rem; }
.decide-card, body.is-today .decide-card { padding: 1.25rem 1.35rem 1.1rem; }
.balance-card, body.is-today .balance-card { padding: 1.25rem 1.5rem 1.1rem; }
body.is-today .side-card, .side-card { padding: 1rem 1.15rem; }
body.is-today .decide-card h2, body.is-today .balance-card h2 { margin-bottom: .75rem; padding-bottom: .75rem; }
body.is-today .balance-chart { height: 52px; margin: .35rem 0 .15rem; }
.balance-note { margin-bottom: .75rem; }
.tiles { gap: .6rem; }
.tile { padding: .75rem .9rem; border-radius: 14px; }
body.is-today .decide-list li, .decide-list li { padding: .5rem 0; }
.decide-num { flex: 0 0 30px; width: 30px; height: 30px; font-size: .8125rem; }
.decide-card .btn { margin-top: .75rem; }
.decide-card .hand { margin-top: .75rem; }
.settled b { font-size: .875rem; }
body.is-today .settled li { padding: .45rem 0; }
.dl-card p { font-size: .875rem; }
@media (max-width: 1199.98px) { .today-grid { grid-template-columns: 1fr 1fr; } .today-grid .side-stack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 767.98px) { .today-grid { grid-template-columns: 1fr; } .today-grid .side-stack { display: flex; } }

/* ---------- audit fixes (lm-webdesign, 2026-10-21) ---------- */
/* CLR-010: white on teal #159EAA is 3.23:1. Teal keeps its look with ink text (5.46:1);
   on light ground the filled controls use teal-deep with white (5.98:1). */
.sidenav-list a[aria-current="page"] { color: var(--colour-ink); }
.btn-teal-fill { --tblr-btn-color: var(--colour-ink); --tblr-btn-hover-bg: var(--colour-sky); --tblr-btn-hover-border-color: var(--colour-sky); --tblr-btn-hover-color: var(--colour-ink); --tblr-btn-active-bg: var(--colour-sky); --tblr-btn-active-color: var(--colour-ink); font-size: .9375rem; min-height: 40px; }
.settings-tabs a[aria-current="page"], .nav-pills .nav-link.active { background: var(--colour-teal-deep); border-color: var(--colour-teal-deep); color: #fff; }
.tile-sky .tile-label { color: var(--colour-petrol); }            /* muted on sky was 4.15:1 → 9.77:1 */
.sidenav-label { font-size: .75rem; }                              /* TYP-008: 11px → 12px */
.topnav-search kbd { font-size: .75rem; }
/* Pattern 8 / BTN consistency: one control height per context — 38px with a mouse, 44px on a phone. */
.page-header .btn, .nav-pills .nav-link { min-height: 38px; }
.form-control, .form-select { min-height: 38px; }
.input-group > .form-control, .input-group > .form-select, .input-group > .btn { min-height: 38px; }
@media (max-width: 767.98px) {
    .btn, .btn-sm, .page-header .btn, .settings-tabs a, .nav-pills .nav-link, .form-control, .form-select, .topbar-new, .topbar-snap { min-height: 44px; }
    .btn-sm { padding-top: .5rem; padding-bottom: .5rem; }
}
/* DAT / TYP-026: numbers, dates and row actions never break across lines. */
.table td.money, .table td.text-end, .table td.nowrap, .table td.td-date, .card-table td:last-child { white-space: nowrap; }
.card-table td:last-child .btn + .btn, .card-table td:last-child .btn + form, .card-table td:last-child form + .btn { margin-left: .35rem; }
/* Today: the last few pixels at 1280×800. */
body.is-today .page-body { padding-top: .25rem; padding-bottom: .25rem; }
.today-page { padding-bottom: 2rem; }
/* Self-fix-the-fix (re-measured live): the small teal button keeps teal-deep, so its text stays white (5.98:1). */
.btn-sm.btn-teal-fill, .btn-teal-fill.btn-sm { --tblr-btn-color: #fff; --tblr-btn-hover-color: #fff; --tblr-btn-active-color: #fff; --tblr-btn-hover-bg: var(--colour-petrol); --tblr-btn-active-bg: var(--colour-petrol); min-height: 32px; }
.btn-teal-fill { min-height: 38px; }
/* Tabler's green (.text-success, 2.74:1 on white) is too light for amounts: money in reads in teal-deep (5.98:1). */
:root { --tblr-success: var(--colour-teal-deep); --tblr-success-rgb: 11, 110, 119; }   /* through Tabler's own variables, not !important */
.doc-thumb-pdf { font-size: .75rem; }
@media (max-width: 767.98px) { .btn-sm.btn-teal-fill, .btn-teal-fill.btn-sm, .btn-teal-fill { min-height: 44px; } }
/* Re-measure, round 2: Tabler's .subheader is 10px — 12px is the floor for labels (TYP-008). */
.subheader { font-size: .75rem; }
.badge.bg-secondary-lt { background: color-mix(in srgb, var(--colour-line) 60%, #fff) !important; color: var(--colour-petrol) !important; }
.today-page .page-header { margin-bottom: .6rem; }
.today-page .page-subtitle { margin-top: .15rem; }
/* Pattern 8, last pixels: inputs match the 38px buttons beside them. */
.form-control, .form-select { padding-top: .4rem; padding-bottom: .4rem; }
.today-page { padding-bottom: 1.5rem; }

/* ---------- Today and the menu on shorter screens (owner, 2026-10-21: "completely out of proportion") ----------
   The three columns end together: the balance column sets the height, the decisions card shows as many
   questions as fit (up to six) with its button at the foot, and the last card on the right takes the rest. */
@media (min-width: 1200px) {
    .today-grid { align-items: stretch; }
    .today-grid .decide-card { min-height: 0; overflow: hidden; contain: size; }   /* takes the row's height, never sets it */
    .today-grid .decide-list { flex: 1 1 auto; min-height: 0; overflow: hidden; margin-bottom: 0; }
    .today-grid .side-stack > :last-child { flex: 1 1 auto; }
}
.decide-list li { min-height: 0; }
@media (min-width: 992px) and (min-height: 600px) {
    body.is-today .shell-main { height: calc(100vh - 72px); min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin-bottom: 0; }
    body.is-today .page-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    body.is-today .page-body > .container-xl { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    body.is-today .today-page { flex: 1; min-height: 0; }
}
@media (min-width: 992px) and (max-height: 820px) {
    .sidenav { padding: 1rem 1rem .85rem; margin-top: 12px; margin-bottom: 12px; height: calc(100vh - 24px); }
    .sidenav-top { margin-bottom: .6rem; }
    .sidenav-label { margin: .6rem 0 .15rem .75rem; }
    .sidenav-list a { min-height: 32px; padding: .25rem .85rem; font-size: .875rem; }
    body.is-today .today-page .page-header .hand, .today-hand, .today-tag { display: none; }
    .today-still { width: clamp(220px, 18vw, 300px); }
    body.is-today .page-title-lead { font-size: clamp(1.375rem, 2vw, 1.75rem); }
    body.is-today .page-pretitle, body.is-today .page-subtitle { font-size: .8125rem; }
    body.is-today .decide-card h2, body.is-today .balance-card h2 { font-size: 1.125rem; margin-bottom: .6rem; padding-bottom: .6rem; }
    body.is-today .balance-figure { font-size: clamp(1.625rem, 4.4vh, 2.25rem); }
    body.is-today .balance-label, body.is-today .balance-note { font-size: .875rem; }
    body.is-today .balance-chart { height: 38px; margin: .25rem 0 0; }
    body.is-today .tile { padding: .55rem .75rem; }
    body.is-today .tile-value { font-size: 1.0625rem; }
    body.is-today .decide-list a, body.is-today .settled b { font-size: .875rem; }
    body.is-today .decide-list li { padding: .4rem 0; }
    body.is-today .side-card { padding: .85rem 1rem; }
    body.is-today .side-card h3 { font-size: 1rem; padding-bottom: .5rem; margin-bottom: .5rem; }
    body.is-today .next-up b { font-size: .9375rem; }
    body.is-today .dl-card p { font-size: .8125rem; }
}
@media (min-width: 992px) and (max-height: 700px) {
    .sidenav { padding-top: .75rem; padding-bottom: .6rem; }
    .sidenav-top { margin-bottom: .35rem; }
    .sidenav-list a { min-height: 26px; padding: .1rem .85rem; font-size: .8125rem; }
    .sidenav-label { margin: .4rem 0 .05rem .75rem; line-height: 1.2; }
    .sidenav .topnav-brand .wordmark { font-size: 1.125rem; }
    body.is-today .balance-chart { display: none; }
}
/* CT1 summary row */
.ct1-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

/* Review: one transfer pays back several mileage trips. */
.mileage-pick fieldset { border: 0; padding: 0; margin: 0; }
.mileage-pick-list { max-height: 16rem; overflow-y: auto; padding: .5rem .75rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); margin-bottom: .5rem; }
.mileage-pick-list .form-check { margin-bottom: .35rem; }