/* Oracle Invoicer, brand v2 (31 October 2026): ink and electric violet on a lavender canvas, lime only as a fill
   under dark text. The screen only: the invoice sheet keeps the Exergy letterhead and its paper palette
   (INVOICE_DOC_CSS in oracle-core.js; .invoice-print below and in theme.css), so nothing a client receives changes.
   Night values are in theme.css. */
:root {
    /* Surfaces */
    --canvas: #F5F4FA;
    --surface: #FFFFFF;
    --subtle: #EEECF7;
    --selected: #E7E2FF;
    --inverse: #16142E;
    /* Lines. --control-edge is the 3:1 edge of a field, so its shape reads without its fill. */
    --border: #E3E0EF;
    --border-strong: #C9C5DD;
    --control-edge: #8C88AD;
    --focus: #5B3DF5;
    /* Text. --text-3 is for the surface and the canvas only: on the subtle and selected fills it is under 4.5:1. */
    --text: #16142E;
    --text-2: #5D5978;
    --text-3: #6F6B8C;
    --on-primary: #FFFFFF;
    --link: #4B2FE0;
    /* Action */
    --primary: #5B3DF5;
    --primary-hover: #4A2EE0;
    --lime: #C6F24E;            /* a fill only, always under dark text; never text on a light surface */
    /* Status: a foreground for words and icons, a background for chips. A state always has words as well. */
    --success: #0B7A5F;
    --success-bg: #E3F6EE;
    --warning: #A15A06;
    --warning-bg: #FFF1D9;
    --danger: #C21F3D;
    --danger-bg: #FDE7EA;
    --neutral: #4F4B6B;
    --neutral-bg: #EEECF5;
    --info: #2F4FD1;
    --info-bg: #E8EEFF;
    /* Charts */
    --chart-direct: #5B3DF5;
    --chart-rnd: #1A9E88;
    --chart-grid: #ECEAF5;

    /* The older names, kept so every rule written against them follows the brand and night mode. */
    --black: #0C0B17;
    --grey-950: var(--inverse);
    --grey-900: var(--text);
    --grey-800: #2E2B4A;
    --grey-700: #45415F;
    --grey-600: var(--text-2);
    --grey-500: var(--text-2);     /* muted text: --text-2 holds 4.5:1 on every fill */
    --grey-400: #8C88AD;           /* icons and rules, not text */
    --grey-300: var(--border-strong);
    --grey-200: var(--border);
    --grey-100: var(--subtle);
    --grey-50: #F8F7FC;
    --white: var(--surface);
    --vault: var(--inverse);
    --accent: var(--link);
    --accent-deep: #3F25C9;
    --accent-bright: var(--primary);
    --mint: var(--focus);
    --silver-dark: var(--text-2);
    --accent-soft: rgba(91, 61, 245, 0.10);
    --accent-glow: rgba(91, 61, 245, 0.32);
    --workspace-line: var(--border);
    --workspace-muted: var(--text-2);

    --sidebar-width: 248px;
    --header-height: 96px;

    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque', 'Geist', -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* the Exergy letterhead's face, kept for documents */
    --font-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;

    --shadow-sm: 0 1px 2px rgba(22, 20, 46, 0.05);
    --shadow-md: 0 8px 24px rgba(22, 20, 46, 0.08);
    --shadow-lg: 0 24px 60px rgba(22, 20, 46, 0.16);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }

body {
    font-family: var(--font-sans);
    background: var(--canvas);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selected); color: var(--text); }

/* The lockup: "oracle" over "INVOICER". The side bar and the sign-in panel set its size. */
.brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; margin: 0; line-height: 1; }
.brand-wordmark-name { font: 600 22px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.brand-wordmark-sub { margin-top: 4px; font: 500 10px/1.2 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); }

/* App Container */
.app { display: flex; min-height: 100vh; }

/* Main Content */
.main { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; min-width: 0; }

.header {
    background: transparent;
    border-bottom: 0;
    padding: 0 28px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-heading { display: flex; flex-direction: column; gap: 2px; }
.page-eyebrow {
    font: 500 12px/16px var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0;
}
.page-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}
.card-subtitle {
    font-size: 11px;
    color: var(--grey-500);
    font-family: var(--font-mono);
}
.dash-freshness-badge {
    display: none;
    font-size: 11px;
    color: var(--grey-500);
    font-family: var(--font-mono);
    margin-right: 8px;
    padding: 6px 10px;
    background: var(--grey-100);
    border-radius: 8px;
    border: 1px solid var(--grey-200);
}
.dash-freshness-badge:not(:empty) { display: inline-block; }

/* Dashboard loading skeleton */
.dash-loading { padding: 8px 0 32px; }
.dash-loading-label {
    text-align: center;
    font-size: 12px;
    color: var(--grey-500);
    margin-top: 20px;
    font-family: var(--font-mono);
}
.skeleton-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.skeleton-block {
    background: linear-gradient(90deg, var(--grey-100) 25%, var(--grey-50) 50%, var(--grey-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: var(--radius-lg);
    min-height: 108px;
    border: 1px solid var(--grey-200);
}
.skeleton-grid { min-height: 280px; animation-delay: 0.15s; }
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Bar rows (dashboard widgets) */
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-label {
    width: 130px;
    font-size: 12px;
    color: var(--grey-600);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bar-track {
    flex: 1;
    background: var(--grey-100);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 6px; transition: width 0.45s ease; }
.bar-fill--accent { background: var(--chart-direct); }
.bar-fill--success { background: var(--success); }
.bar-amount {
    width: 84px;
    text-align: right;
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--grey-800);
    flex-shrink: 0;
}

/* Data tables in cards */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--grey-500);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--grey-200);
}
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--grey-100);
    color: var(--grey-800);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--grey-50); }

/* Insight / heuristic cards */
.heuristics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.insight-card {
    padding: 16px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--grey-200);
    background: var(--white);
    font-size: 13px;
    line-height: 1.55;
}
.insight-card--red { border-color: var(--danger); background: var(--danger-bg); }
.insight-card--amber { border-color: var(--warning); background: var(--warning-bg); }
.insight-card--green { border-color: var(--success); background: var(--success-bg); }
.insight-card strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.insight-card--red strong { color: var(--danger); }
.insight-card--amber strong { color: var(--warning); }
.insight-card--green strong { color: var(--success); }

.stat-card--gold::before { background: linear-gradient(90deg, var(--accent), transparent); opacity: 1; }
.stat-card--success::before { background: linear-gradient(90deg, var(--success), transparent); opacity: 1; }
.stat-card--warn::before { background: linear-gradient(90deg, var(--warning), transparent); opacity: 1; }

.select-compact {
    padding: 8px 12px;
    border: 1px solid var(--control-edge);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--grey-700);
    cursor: pointer;
}
.select-compact:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
}

.content { padding: 28px 32px 40px; max-width: 1440px; }
.header-left { display: flex; align-items: center; gap: 16px; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.mobile-menu-btn {
    display: none;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    color: var(--grey-700);
    cursor: pointer;
    padding: 8px;
}

.page { display: none; }
.page.active { display: block; animation: fadeIn 0.28s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { border-color: var(--border-strong); }

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.card-title {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
.card-link { font-size: 13px; font-weight: 500; color: var(--link); cursor: pointer; text-decoration: none; }
.card-link:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-bright), transparent);
    opacity: 0.8;
}
.stat-card:hover {
    border-color: var(--grey-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-icon { width: 32px; height: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--selected); color: var(--accent-deep); }
.stat-icon svg { width: 16px; height: 16px; }
/* Payments and Transactions write their tile washes inline, as 748bec6 wrote them (the parity tests hold those views
   byte for byte), so the status fills of brand v2 reach them from here. */
.stat-icon[style*="--success"] { background: var(--success-bg) !important; }
.stat-icon[style*="--warning"] { background: var(--warning-bg) !important; }
.stat-icon[style*="--danger"] { background: var(--danger-bg) !important; }
.stat-value { font-family: var(--font-sans); font-size: 28px; font-weight: 500; color: var(--text); letter-spacing: -0.015em; line-height: 1.1; }
.stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; margin-top: 8px; padding: 2px 8px; border-radius: 4px; }
.stat-change.positive { color: var(--success); background: var(--success-bg); }
.stat-change.negative { color: var(--danger); background: var(--danger-bg); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}

.stat-value {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
    border-color: var(--control-edge);
    background: var(--subtle);
}

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px dashed var(--border-strong);
    width: 100%;
    margin-top: 12px;
    padding: 10px 16px;
    font-size: 12px;
}
.btn-ghost:hover {
    color: var(--grey-800);
    border-color: var(--grey-500);
    background: var(--grey-50);
}

.filter-btn.active {
    background: var(--inverse);
    color: var(--canvas);
    border-color: var(--inverse);
}

.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.btn-danger:hover { filter: brightness(0.92); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn svg { width: 16px; height: 16px; }
.btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-btn { padding: 8px 16px; }

/* List Items */
.list-item {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--grey-100);
    transition: background 0.15s ease;
    cursor: pointer;
}
.list-item:hover { background: var(--grey-50); }
.list-item:last-child { border-bottom: none; }

.list-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    background: var(--grey-100);
    color: var(--grey-600);
    flex-shrink: 0;
}
.list-icon.income { background: var(--success-bg); color: var(--success); }
.list-icon.expense { background: var(--danger-bg); color: var(--danger); }
.list-icon.pending { background: var(--warning-bg); color: var(--warning); }
.list-icon svg { width: 16px; height: 16px; }

.list-info { flex: 1; min-width: 0; }
.list-title { font-size: 13px; font-weight: 500; color: var(--grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-meta { font-size: 12px; color: var(--grey-500); margin-top: 2px; }

.list-amount { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.list-amount.positive { color: var(--success); }

.list-actions { display: flex; gap: 4px; margin-left: 12px; }
.list-action { background: none; border: none; color: var(--grey-400); cursor: pointer; padding: 4px; border-radius: 4px; }
.list-action:hover { color: var(--grey-900); background: var(--grey-100); }
.list-action svg { width: 16px; height: 16px; }
/* The place of a pending row's Email invoice action, so the actions line up down the list. */
.list-action-spacer { flex: 0 0 24px; }

/* Invoice Status Badge */
.invoice-status {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    margin-left: 12px;
    flex-shrink: 0;
}
.invoice-status.pending { background: var(--warning-bg); color: var(--warning); }
.invoice-status.paid { background: var(--success-bg); color: var(--success); }
.invoice-status.overdue { background: var(--danger-bg); color: var(--danger); }

/* Clients Grid */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.client-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.client-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.client-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.client-name { font-size: 15px; font-weight: 600; color: var(--grey-900); }
.client-company { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.client-detail { font-size: 12px; color: var(--grey-500); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.client-detail svg { width: 14px; height: 14px; flex-shrink: 0; }
.client-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grey-100); }
.client-stat-label { font-size: 11px; color: var(--grey-500); }
.client-stat-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--grey-900); margin-top: 2px; }

/* Revenue bars */
.revenue-item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.revenue-name { font-size: 13px; font-weight: 500; color: var(--grey-900); min-width: 120px; }
.revenue-bar-wrap { flex: 1; height: 8px; background: var(--grey-100); border-radius: 4px; overflow: hidden; }
.revenue-bar { height: 100%; background: var(--chart-direct); border-radius: 4px; transition: width 0.5s ease; }
.revenue-amount { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--grey-700); min-width: 80px; text-align: right; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-label { display: block; font-size: 13px; line-height: 18px; font-weight: 500; margin-bottom: 6px; color: var(--text); }

.form-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--control-edge);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--grey-900);
    transition: all 0.15s;
}
.form-input:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
    background: var(--surface);
}
.form-input::placeholder { color: var(--text-3); opacity: 1; }
select.form-input { cursor: pointer; }

/* Line Items */
.line-item-row {
    display: grid;
    grid-template-columns: 2fr 80px 100px 40px 40px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.line-item-row input { padding: 8px 10px; font-size: 13px; }
.line-item-header {
    display: grid;
    grid-template-columns: 2fr 80px 100px 40px 40px;
    gap: 8px;
    margin-bottom: 6px;
}
.line-item-header span { font-size: 11px; font-weight: 600; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.3px; }
.line-remove { background: none; border: none; color: var(--grey-400); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.line-remove:hover { color: var(--danger); background: var(--danger-bg); }
.line-hours-toggle { background: none; border: 1px solid var(--grey-200); color: var(--grey-500); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; width: 32px; height: 32px; }
.line-hours-toggle.active { background: var(--inverse); color: var(--canvas); border-color: var(--inverse); }

/* Invoice Totals */
.invoice-totals { background: var(--grey-50); border-radius: 8px; padding: 16px; margin-top: 16px; }
.total-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--grey-600); }
.total-final { border-top: 1px solid var(--grey-200); margin-top: 8px; padding-top: 12px; font-size: 16px; font-weight: 600; color: var(--grey-900); }
.mono { font-family: var(--font-mono); }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 20, 46, 0.45);
    z-index: 200;
    display: none;
    backdrop-filter: blur(4px);
}
.modal-overlay.active { display: block; }

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--white);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 201;
    display: none;
    opacity: 0;
    transition: all 0.2s;
}
.modal.active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal.modal-lg { max-width: 700px; }

.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--grey-100); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 24px; color: var(--grey-400); cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--grey-900); }

.modal-body { padding: 24px; max-height: calc(90vh - 140px); overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--grey-100); display: flex; justify-content: flex-end; gap: 12px; }

.sync-conflict-lead { font-size: 13px; color: var(--grey-600); margin-bottom: 16px; line-height: 1.5; }
.sync-conflict-list { margin: 0 0 16px 1.1rem; font-size: 13px; color: var(--grey-800); }
.sync-conflict-list li { margin-bottom: 6px; }
.sync-conflict-group { margin-top: 12px; }
.sync-conflict-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-500); margin-bottom: 8px; }
.sync-conflict-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--grey-50); border-radius: 6px; margin-bottom: 4px; font-size: 12px; }
.sync-conflict-actions { flex-wrap: wrap; }
.header-right .sync-btn { margin-left: 6px; }

/* Settings Grid */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
.toast { padding: 12px 16px; background: var(--inverse); color: var(--canvas); border-radius: var(--radius); margin-top: 8px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; animation: slideIn 0.2s ease; max-width: 360px; }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.toast.success { background: var(--success); color: var(--on-primary); }
.toast.error { background: var(--danger); color: var(--on-primary); }

/* Empty State */
.empty-state { text-align: center; padding: 48px 24px; color: var(--grey-500); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; color: var(--grey-300); }
.empty-state p { font-size: 14px; }
.empty-inline { font-size: 13px; color: var(--grey-500); padding: 8px 0; }

/* Print Invoice Styles */
.invoice-print {
    background: #ffffff;
    padding: 48px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #13271e;
}

/* Everything inside the sheet is styled by INVOICE_DOC_CSS in app.js, the one stylesheet the
   preview shares with the printed and saved document. */

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .mobile-menu-btn { display: block; }
    .grid-2, .settings-grid, .form-row { grid-template-columns: 1fr; }
    .content { padding: 16px; }
    .header { padding: 0 16px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .skeleton-stats { grid-template-columns: 1fr 1fr; }
    .heuristics-grid { grid-template-columns: 1fr; }
    .line-item-row { grid-template-columns: 1fr 60px 80px 32px 32px; }
    .invoice-print { padding: 24px; }
    .page-title { font-size: 20px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .clients-grid { grid-template-columns: 1fr; }
    .header-right .btn span { display: none; }
}

/* Chart Bars (Analyser) */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; padding: 0 4px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.chart-bar-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; border-radius: 4px 4px 0 0; overflow: hidden; }
.chart-bar-segment { width: 100%; min-height: 0; transition: height 0.4s ease; border-radius: 2px 2px 0 0; }
.chart-bar-label { font-size: 11px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chart-bar-value { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--grey-700); }

/* Transactions filter active state override */
[data-txfilter].active { background: var(--inverse); color: var(--canvas); border-color: var(--inverse); }

/* Login — split vault panel */
.login-overlay {
    position: fixed;
    inset: 0;
    background: var(--canvas);
    display: flex;
    z-index: 10000;
    transition: opacity 0.35s, visibility 0.35s;
    padding: 24px;
    /* A phone is shorter than the stacked panel and card: the overlay scrolls, and auto margins centre the shell
       only while it fits, so its top is never cut off. */
    overflow-y: auto;
}
.login-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.login-shell {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    width: min(980px, 100%);
    margin: auto;
    min-height: 540px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

/* The brand panel is ink in both themes (the lockup's dark chip), with the mark's violet and lime glow. */
.login-brand-panel {
    position: relative;
    background: radial-gradient(120% 80% at 100% 0%, rgba(91, 61, 245, 0.38), transparent 60%), #16142E;
    display: flex;
    flex-direction: column;
    color: #F1F0FA;
    overflow: hidden;
    padding: 40px 40px 44px;
}
.login-brand-lockup { display: flex; align-items: center; gap: 16px; }
.login-brand-mark { display: block; width: 64px; height: 64px; flex: none; }
.login-brand-panel .brand-wordmark-name { font-size: 40px; color: #F1F0FA; }
.login-brand-panel .brand-wordmark-sub { font-size: 12px; color: #ABA7C9; }

.login-brand-content { position: relative; z-index: 1; margin-top: auto; padding-top: 48px; }

/* Silver, tracked wide, after the tagline in the lockup above it. */
.login-eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ABA7C9;
    margin-bottom: 12px;
}

.login-headline {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.login-tagline {
    font-size: 14px;
    line-height: 1.65;
    color: #ABA7C9;
    max-width: 38ch;
    margin-bottom: 28px;
}

.login-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-features li {
    font-size: 13px;
    color: #D9D7EC;
    padding-left: 26px;
    position: relative;
}
/* A lime glint before each line: a fill on the ink panel, never text. */
.login-features li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C6F24E;
}

.login-card {
    background: var(--surface);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: auto;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.login-card-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.login-card-sub {
    font-size: 14px;
    color: var(--grey-500);
    line-height: 1.6;
    margin-bottom: 28px;
}

.login-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-height: 48px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    gap: 10px;
}
.login-google-btn svg { flex: none; background: #FFFFFF; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.login-skip-btn { margin-top: 12px; border-style: solid; border-radius: var(--radius-pill); min-height: 44px; font-size: 13px; color: var(--text); }
.login-prefs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

@media (max-width: 768px) {
    .login-shell { grid-template-columns: 1fr; min-height: auto; }
    .login-brand-panel { padding: 28px 28px 32px; }
    .login-brand-content { padding-top: 28px; }
    .login-card { padding: 32px 28px; }
    .login-headline { font-size: 1.75rem; }
}

/* Sync Button */
.sync-btn { background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:5px 12px;min-height:32px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;font-family:var(--font-sans);color:var(--grey-600);transition:all 0.2s; }
.sync-btn:hover { background:var(--grey-50);border-color:var(--grey-300);color:var(--grey-900); }
.sync-btn.syncing { color:var(--info);border-color:var(--info); }
.sync-btn.syncing .sync-icon { animation:spin 1s linear infinite; }
.sync-btn.synced { color:var(--success);border-color:var(--success); }
.sync-btn.error { color:var(--danger);border-color:var(--danger); }
.sync-btn:disabled { opacity:0.5;cursor:not-allowed; }
.sync-icon { width:16px;height:16px;transition:transform 0.2s; }
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

/* Print Styles */
/* Print/PDF goes through a dedicated single-invoice iframe (printInvoice). This block is a
   fallback for a manual Ctrl+P: hide the whole app + every other modal, and print ONLY the
   open invoice preview — so a stray Ctrl+P can't dump the entire app / invoice list. */
@media print {
    body { background: #fff; }
    .app, .sidebar-backdrop, .toast-container, .modal-overlay { display: none !important; }
    .modal { display: none !important; }
    #previewModal.active {
        display: block !important; position: static; transform: none;
        max-width: 100%; width: 100%; max-height: none; border-radius: 0; box-shadow: none; opacity: 1 !important;
    }
    #previewModal.active .modal-header { display: none !important; }
    #previewModal.active .modal-body { max-height: none; overflow: visible; padding: 0; }
    .invoice-print { padding: 0; box-shadow: none; margin: 0; }
}

/* ── Accessibility & polish (Living Blueprint) ── */
/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
.nav-item:focus-visible,
.btn:focus-visible,
[onclick]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.login-brand-panel :focus-visible { outline-color: #C6F24E; }

/* Aligned, non-shifting figures for all financial data */
.mono, .stat-value, .data-table td, .list-amount, .bar-amount,
.revenue-amount, .client-stat-value, .chart-bar-value, .nav-badge, .inv-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================== Analyser — AI upgrade ===================== */
/* Filter bar */
.analyser-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.af-field { display: flex; flex-direction: column; gap: 5px; }
.af-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); }
.analyser-filters .select-compact { min-width: 150px; }
.af-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.af-chip {
    font-size: 12px; font-weight: 500; color: var(--accent-deep);
    background: var(--selected); border: 1px solid var(--primary);
    border-radius: 999px; padding: 4px 11px; font-family: var(--font-sans);
}
.af-chip-clear { cursor: pointer; color: var(--grey-600); background: var(--grey-100); border-color: var(--grey-200); }
.af-chip-clear:hover { color: var(--danger); border-color: var(--danger); }

/* Metric strip */
.metric-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.metric-pill {
    flex: 1 1 150px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.metric-pill-label { font-size: 11px; color: var(--grey-500); }
.metric-pill-value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--grey-900); font-variant-numeric: tabular-nums; }
.metric-pill-warn { border-color: var(--warning); background: var(--warning-bg); }

/* Chart wrappers (sized parent for Chart.js) */
.chart-wrap { position: relative; height: 280px; width: 100%; }

/* AI Analyst panel */
.ai-analyst { border-color: var(--border-strong); }
.ai-analyst .card-header { background: transparent; }
.ai-keyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ai-key-status { font-size: 12px; color: var(--grey-600); font-family: var(--font-mono); }
.key-ok { color: var(--success); }
.key-missing { color: var(--warning); }
.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; }

/* Screen-reader-only utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Chart empty-state placeholder (sits inside .chart-wrap) */
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.chart-empty p { font-size: 13px; color: var(--grey-500); }
.ai-keyform { flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 14px; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); }
.ai-keyform-row { display: flex; gap: 8px; }
.ai-keyform-row .form-input { flex: 1; }
.ai-key-note { font-size: 11px; line-height: 1.5; color: var(--grey-500); margin: 0; }
.form-hint { font-size: 11px; line-height: 1.5; color: var(--grey-500); margin: -4px 0 16px; }
.ai-ask { display: flex; gap: 8px; margin-bottom: 12px; }
.ai-ask .form-input { flex: 1; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ai-chip {
    font-size: 12px; font-weight: 500; color: var(--grey-700); cursor: pointer;
    background: var(--white); border: 1px solid var(--grey-200); border-radius: 999px; padding: 6px 13px;
    transition: all 0.15s ease;
}
.ai-chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.ai-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ----- AI conversation thread ----- */
.ai-thread-bar { display: none; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.ai-thread-bar .ai-thread-title { font-size: 11px; font-weight: 600; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; }
.ai-clear-btn { font-size: 11px; color: var(--grey-500); background: none; border: 1px solid var(--grey-200); border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: all 0.15s ease; }
.ai-clear-btn:hover { color: var(--danger); border-color: var(--danger); }
.ai-clear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-thread { display: flex; flex-direction: column; gap: 16px; max-height: 540px; overflow-y: auto; padding-right: 2px; }
.ai-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ai-empty { font-size: 13px; line-height: 1.55; color: var(--grey-500); margin: 4px 0 0; }
.ai-turn { display: flex; flex-direction: column; gap: 7px; }
.ai-q { align-self: flex-end; max-width: 86%; background: var(--primary); color: var(--on-primary); padding: 9px 13px; border-radius: 13px 13px 4px 13px; font-size: 13px; line-height: 1.45; overflow-wrap: break-word; }
.ai-a { align-self: flex-start; max-width: 94%; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 12px 14px; border-radius: 4px 13px 13px 13px; font-size: 13.5px; line-height: 1.6; color: var(--grey-800); position: relative; overflow-wrap: break-word; word-break: break-word; }
.ai-a-error { background: var(--danger-bg); border-color: var(--danger); border-left-color: var(--danger); color: var(--danger); white-space: pre-wrap; }
.ai-a p { margin: 0 0 8px; } .ai-a p:last-child { margin-bottom: 0; }
.ai-a p.ai-h { font-weight: 700; color: var(--grey-900); margin-top: 10px; }
.ai-a ul, .ai-a ol { margin: 4px 0 8px; padding-left: 20px; } .ai-a li { margin: 3px 0; }
.ai-a strong { font-weight: 700; color: var(--grey-900); }
.ai-a code { font-family: var(--font-mono); font-size: 12px; background: var(--grey-100); padding: 1px 5px; border-radius: 4px; }
.ai-a a { color: var(--accent-deep); text-decoration: underline; }
.ai-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ai-table th, .ai-table td { border: 1px solid var(--grey-200); padding: 5px 9px; text-align: left; }
.ai-table th { background: var(--grey-100); font-weight: 600; color: var(--grey-900); }
/* Always fully visible (no opacity-on-hover affordance — that fails contrast and is invisible on touch). */
.ai-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--grey-600); background: var(--white); border: 1px solid var(--grey-200); border-radius: 6px; padding: 3px 7px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.ai-copy:hover { color: var(--accent-deep); border-color: var(--accent); }
.ai-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-thinking { color: var(--grey-500); font-style: italic; }
.ai-thinking::after { content: ''; }
.ai-locked { text-align: center; padding: 40px 28px; color: var(--grey-500); }
.ai-locked svg { color: var(--grey-300); margin-bottom: 12px; }
.ai-locked p { font-size: 13px; line-height: 1.6; max-width: 46ch; margin: 0 auto 6px; }
.ai-locked strong { color: var(--grey-800); }

/* Client concentration drill rows */
.cc-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; margin-bottom: 4px; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    text-align: left; font-family: var(--font-sans); transition: all 0.15s ease;
}
.cc-row:hover { background: var(--grey-50); border-color: var(--grey-200); }
.cc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--grey-50); }
.cc-row-active { background: var(--selected); border-color: var(--primary); }
.cc-rank { font-size: 11px; font-weight: 600; color: var(--text-2); min-width: 20px; font-family: var(--font-mono); }
.cc-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-amt { font-family: var(--font-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-pct { font-size: 11px; color: var(--grey-500); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Geographic map */
.geo-svg { width: 100%; height: auto; max-height: 460px; display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--grey-50); }
.geo-ocean { fill: var(--grey-50); }
.geo-grat line { stroke: rgba(93, 89, 120, 0.16); stroke-width: 0.5; }
/* Realistic coastline: thin stroke, rounded joins, soft forest-green land fill. */
.geo-land-shape { fill: var(--subtle); stroke: var(--border-strong); stroke-width: 0.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.geo-bubble circle { fill: rgba(91, 61, 245, 0.42); stroke: var(--primary); stroke-width: 1.75; paint-order: stroke fill; transition: fill 0.15s ease; cursor: default; }
.geo-bubble:hover circle { fill: rgba(91, 61, 245, 0.58); }
.geo-bubble:focus-visible { outline: none; }
.geo-bubble:focus-visible circle { fill: rgba(91, 61, 245, 0.62); stroke-width: 3; }
.geo-label { fill: var(--grey-600); font-size: 13px; font-family: var(--font-sans); text-anchor: middle; }
.geo-amt { fill: var(--grey-900); font-size: 13px; font-weight: 700; font-family: var(--font-mono); text-anchor: middle; }
.geo-caption { font-size: 11px; color: var(--grey-500); text-align: center; margin: 10px 0 0; }
/* "Other / Unspecified" bubble — dashed + muted so it reads as a fallback, not a real country. */
.geo-bubble-other circle { fill: rgba(111, 107, 140, 0.24); stroke: var(--grey-500); stroke-width: 1.5; stroke-dasharray: 5 4; }
.geo-bubble-other:hover circle { fill: rgba(111, 107, 140, 0.40); }
.geo-bubble-other:focus-visible circle { fill: rgba(111, 107, 140, 0.44); stroke-width: 3; }
.geo-bubble-other .geo-label { fill: var(--grey-500); }
.geo-bubble-other .geo-amt { fill: var(--grey-700); } /* darker than label to clear WCAG AA over the muted fill */

@media (max-width: 768px) {
    .analyser-filters { gap: 10px; }
    .af-field { flex: 1 1 calc(50% - 5px); }
    .analyser-filters .select-compact { min-width: 0; width: 100%; }
    .af-active { margin-left: 0; flex-basis: 100%; }
    .chart-wrap { height: 240px; }
    .ai-ask { flex-direction: column; }
}

/* Client workspace (September 2026), in brand v2. */
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 1000; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: 600; }
.skip-link:focus { top: 12px; }
.login-overlay.hidden { display: none; }
.header { height: auto; min-height: 0; gap: 20px; padding: 32px 32px 8px; background: transparent; position: relative; align-items: flex-end; }
.page-title { font-size: 36px; font-weight: 600; line-height: 44px; letter-spacing: -.02em; }
.page-eyebrow { margin-bottom: 4px; }
.header-right { justify-content: flex-end; gap: 8px; }
.btn { min-height: 40px; }
.btn-sm { min-height: 32px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.content { padding: 20px 32px 48px; max-width: 1600px; }
.workspace-overview { margin-bottom: 28px; }
.workspace-section-heading, .client-workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.workspace-kicker { color: var(--text-2); font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.workspace-section-heading h2, .treasury-heading h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.workspace-overview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }
.workspace-year-control { display: flex; align-items: center; gap: 8px; }
.workspace-year-control label { font: 600 11px var(--font-sans); color: var(--text-2); }
.workspace-year-control select { width: auto; min-width: 90px; min-height: 36px; padding: 7px 26px 7px 10px; border: 1px solid var(--control-edge); border-radius: 5px; background-color: var(--surface); color: var(--text); font: 600 11px var(--font-sans); cursor: pointer; }
.workspace-year-control select:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.workspace-text-button { font: 600 11px var(--font-sans); background: none; color: var(--link); border: 0; cursor: pointer; padding: 7px 0; white-space: nowrap; }
.workspace-text-button:hover { color: var(--accent-deep); text-decoration: underline; }
.workspace-text-button span { font-size: 17px; margin-left: 7px; }
.workspace-scope { display: flex; align-items: center; gap: 7px; margin: 12px 0 19px; font-size: 12px; color: var(--workspace-muted); }
.workspace-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.workspace-metrics { display: grid; grid-template-columns: 1.3fr repeat(4,minmax(0,1fr)); border: 1px solid var(--workspace-line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.workspace-metric { padding: 21px 18px 18px; border-right: 1px solid var(--workspace-line); display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.workspace-metric:last-child { border: 0; }
.workspace-metric.collected { background: var(--selected); border-color: var(--workspace-line); color: var(--text); }
.workspace-metric-label { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: var(--text-2); }
.workspace-metric strong { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: clamp(17px,1.6vw,26px); line-height: 1.2; letter-spacing: -.015em; font-weight: 500; overflow-wrap: anywhere; }
.workspace-metric-note { font-size: 12px; color: var(--text-2); }
.workspace-metric.collected .workspace-metric-label, .workspace-metric.collected .workspace-metric-note { color: var(--text-2); }
.workspace-metric.overdue strong { color: var(--danger); }
.workspace-collection-breakdown { max-width: 100ch; margin: 12px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.workspace-collection-breakdown:empty { display: none; }
.workspace-insights { margin-top: 13px; }
.workspace-facts { display: flex; flex-wrap: wrap; gap: 9px 21px; align-items: center; }
.workspace-facts > span, .workspace-facts > button { font: 12px var(--font-sans); color: var(--text-2); background: none; padding: 0; border: 0; line-height: 1.7; }
.workspace-facts strong { color: var(--text); font-weight: 700; margin-right: 3px; }
.workspace-facts button { cursor: pointer; border-bottom: 1px dotted var(--border-strong); }
.workspace-facts button:hover { color: var(--text); border-bottom-style: solid; }
.workspace-facts .attention, .workspace-facts .attention strong { color: var(--warning); }
.workspace-data-warning { margin-top: 12px; font-size: 11px; color: var(--warning); padding: 10px 13px; border-left: 2px solid var(--warning); background: var(--warning-bg); }
.client-workspace { background: var(--surface); border: 1px solid var(--workspace-line); border-radius: var(--radius-lg); margin: 0 0 34px; overflow: hidden; scroll-margin-top: 20px; }
.client-workspace-heading { padding: 23px 23px 21px; }
.client-workspace-heading h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; display: flex; align-items: center; gap: 10px; }
.workspace-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); background: var(--subtle); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-weight: 500; vertical-align: middle; }
.client-workspace-toolbar { display: flex; align-items: end; gap: 12px; padding: 0 23px 17px; }
.workspace-search { flex: 1; }
.workspace-search label, .workspace-select label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 5px; }
.workspace-search input, .workspace-select select { font: 11px var(--font-sans); border: 1px solid var(--control-edge); border-radius: 5px; padding: 10px 12px; min-height: 39px; color: var(--text); background: var(--surface); width: 100%; }
.workspace-search input::placeholder { color: var(--text-3); opacity: 1; }
.workspace-select { width: 155px; }
.workspace-select select { padding-right: 26px; }
.workspace-search input:focus, .workspace-select select:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.workspace-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 23px 15px; }
.workspace-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.workspace-filters button { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text-2); padding: 6px 10px; font: 500 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.workspace-filters button:hover { border-color: var(--primary); }
.workspace-filters button[aria-pressed=true] { color: var(--accent-deep); background: var(--selected); border-color: var(--primary); }
.workspace-reset { font: 12px var(--font-sans); color: var(--text-2); cursor: pointer; border: 0; background: none; padding: 7px 0; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.workspace-ledger-scope { margin: 0; padding: 0 23px 14px; font-size: 11px; color: var(--text-2); }
.workspace-result-count { padding: 10px 23px; font: 11px var(--font-mono); color: var(--text-2); background: var(--grey-50); border-top: 1px solid var(--workspace-line); }
.workspace-table-scroll { width: 100%; overflow: auto; }
.workspace-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.workspace-table thead { background: var(--grey-50); }
.workspace-table th { font-weight: 500; }
.workspace-table thead th { padding: 10px 16px; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); border-bottom: 1px solid var(--workspace-line); }
.workspace-table th:first-child { width: 35%; padding-left: 23px; }
.workspace-table th:nth-child(2) { width: 16%; }
.workspace-table th:nth-child(3) { width: 17%; }
.workspace-table th:nth-child(4) { width: 17%; }
.workspace-table th:nth-child(5) { width: 15%; }
.workspace-table td, .workspace-table tbody th { padding: 17px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 11px; }
.workspace-table tbody tr:last-child td, .workspace-table tbody tr:last-child th { border-bottom: 0; }
.workspace-table tbody tr:hover { background: var(--grey-50); }
.workspace-table td.numeric { font: 500 12px var(--font-mono); letter-spacing: -.03em; overflow-wrap: anywhere; }
.workspace-table .numeric { text-align: right; }
.workspace-table td > strong { font-size: 12px; font-weight: 500; }
.workspace-client-identity { display: flex; gap: 12px; align-items: center; }
.workspace-client-identity > div { min-width: 0; }
.workspace-avatar { height: 36px; width: 36px; background: var(--subtle); border: 1px solid var(--border); border-radius: 5px; font: 500 11px var(--font-mono); color: var(--text-2); display: grid; place-items: center; flex-shrink: 0; }
.workspace-avatar.rd { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--surface)); }
.workspace-client-name { font: 600 13px var(--font-sans); letter-spacing: -.01em; border: 0; background: none; cursor: pointer; color: var(--text); text-align: left; padding: 0; overflow-wrap: anywhere; }
.workspace-client-name:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.workspace-client-company, .workspace-client-contact { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.5; }
.workspace-client-company { color: var(--text-2); }
.workspace-source { display: inline-block; font: 11px var(--font-mono); letter-spacing: -.02em; margin-top: 4px; color: var(--text-2); }
.workspace-table tr[data-row-key^="conflict:"] .workspace-source { color: var(--warning); background: var(--warning-bg); border-radius: 3px; padding: 3px 5px; }
.workspace-duplicate { font-size: 11px; margin-left: 7px; padding: 2px 4px; background: var(--warning-bg); color: var(--warning); border-radius: 3px; display: inline-block; }
.workspace-cell-note { display: block; font: 11px var(--font-sans); color: var(--text-2); margin-top: 5px; letter-spacing: 0; }
.workspace-overdue { color: var(--danger); }
.workspace-overdue .workspace-cell-note { color: var(--danger); }
.workspace-row-actions { text-align: right; }
.workspace-row-actions .btn { padding: 6px 8px; font-size: 11px; min-height: 29px; white-space: nowrap; }
.workspace-detail-button { display: block; margin: 7px 0 0 auto; padding: 2px 0; background: none; border: 0; color: var(--link); cursor: pointer; font: 11px var(--font-sans); }
.workspace-detail-button:hover { text-decoration: underline; }
.workspace-detail-button span { margin-left: 5px; }
.workspace-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--workspace-line); padding: 12px 23px; font: 11px var(--font-mono); color: var(--text-2); }
.workspace-pagination > div { display: flex; gap: 6px; }
.workspace-pagination .btn { font-size: 11px; }
.workspace-pagination-detail { color: var(--text-2); }
.workspace-empty { padding: 38px 20px 42px; text-align: center; border-top: 1px solid var(--border); }
.workspace-empty[hidden], .workspace-table-scroll[hidden] { display: none; }
.workspace-empty-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--subtle); color: var(--text-2); font-size: 28px; margin-bottom: 14px; }
.workspace-empty h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.workspace-empty p { max-width: 440px; margin: 8px auto 18px; font-size: 11px; color: var(--text-2); line-height: 1.8; }
.treasury-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 20px; }
.treasury-heading > div:first-child { max-width: 75%; }
.treasury-heading h2 { font-size: 27px; margin-bottom: 8px; }
#workspaceCloudStatus { font-size: 12px; color: var(--text-2); margin: 0; }
#workspaceCloudStatus[data-state=error] { color: var(--danger); }
.treasury-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.treasury-actions .btn { padding: 8px 10px; font-size: 12px; }
.upwork-source { margin-bottom: 24px; padding: 15px 18px; border: 1px solid var(--grey-200); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--grey-50); }
.upwork-source-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 15px; margin-bottom: 6px; }
.upwork-source-label { font: 600 12px var(--font-mono); letter-spacing: .04em; color: var(--accent-deep); }
.upwork-source-account { font-size: 11px; color: var(--grey-600); }
.upwork-source-account strong { color: var(--grey-900); font-weight: 600; }
.upwork-source p, .upwork-empty-note { font-size: 11px; line-height: 1.7; color: var(--grey-600); }
.upwork-source .upwork-refresh-status:not(:empty) { margin-top: 7px; font-weight: 600; color: var(--accent-deep); }
.upwork-source .upwork-refresh-status[data-state="error"] { color: var(--danger); }
.upwork-empty-note { margin-top: 8px; }
#refreshUpworkTransactionsButton:disabled { opacity: .65; cursor: wait; }
.dash-freshness-badge { padding: 0; border: 0; background: transparent; font-size: 11px; margin-top: 8px; }
.dash-loading { padding: 0; }
.dash-loading .skeleton-stats { gap: 10px; }
.dash-loading .skeleton-block { height: 45px; }
.dash-loading .skeleton-grid { display: none; }
.dash-loading-label { margin-top: 10px; }
.card { border-radius: var(--radius-lg); box-shadow: none; }
.card:hover { box-shadow: none; }
.card-header { padding: 18px 22px; gap: 12px; }
.stat-card { border-radius: var(--radius-lg); box-shadow: none; padding: 20px 22px; }
.stat-card:before { display: none; }
.stat-card:hover { transform: none; box-shadow: none; }
.stat-value { font-size: 28px; }
.stat-change { font-size: 12px; padding: 2px 0; background: transparent !important; }
.cc-rank { color: var(--text-2); }
.list-item { padding: 14px 20px; }
.list-title { font-size: 13px; }
.list-meta { font-size: 12px; }
.list-amount { font-size: 13px; }
.invoice-client-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.invoice-client-label .form-label { margin: 0; }
.invoice-client-label .workspace-text-button { font-size: 12px; padding: 0; }
.invoice-form-intro { color: var(--text-2); font-size: 11px; margin-bottom: 21px; }
.invoice-rate-status { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }
.invoice-form-hint { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }
/* Why a project was refused. --danger is remapped for night mode, so one rule serves both themes. */
.invoice-form-error { font-size: 11px; font-weight: 600; color: var(--danger); margin-top: 6px; line-height: 1.5; }
#invoiceModal .form-input[aria-invalid="true"], #invoiceModal .form-input[aria-invalid="true"]:focus { border-color: var(--danger); }
.invoice-section-title { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); margin: 24px 0 12px; text-transform: uppercase; letter-spacing: .06em; }
.modal { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal.active { display: flex; flex-direction: column; }
.modal-header { padding: 21px 24px; border-bottom-color: var(--border); flex-shrink: 0; }
.modal-header h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }
.modal-footer { flex: 0 0 auto; background: var(--surface); border-top-color: var(--border); }
.modal-close { color: var(--text-2); padding: 5px; width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--radius-pill); }
.modal-close:hover { background: var(--subtle); }
.modal-overlay { background: rgba(22, 20, 46, 0.45); backdrop-filter: blur(2px); }
.form-input { font-size: 13px; }
.client-detail-modal { max-width: 780px; }
.workspace-detail-source { font: 12px var(--font-mono); color: var(--text-2); margin-bottom: 19px; }
.workspace-contact-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 22px; }
.workspace-contact-facts dt { font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.workspace-contact-facts dd { font-size: 12px; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.workspace-detail-summary { display: flex; gap: 20px; padding: 18px 0; margin-top: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.workspace-detail-summary > div { flex: 1; min-width: 0; }
.workspace-detail-summary span { font-size: 11px; display: block; color: var(--text-2); margin-bottom: 5px; }
.workspace-detail-summary strong { font: 500 17px var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.workspace-history-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; color: var(--text); }
button.workspace-history-row { cursor: pointer; }
button.workspace-history-row:hover { background: var(--grey-50); }
.workspace-history-row strong { font: 500 11px var(--font-mono); }
.workspace-history-row > div, .workspace-history-row > span { min-width: 0; }
.workspace-history-row span span, .workspace-history-row div span { display: block; margin-top: 5px; font: 12px var(--font-sans); color: var(--text-2); overflow-wrap: anywhere; }
.workspace-history-empty { padding: 10px 0 25px; color: var(--text-2); font-size: 12px; }
.mobile-workspace-nav { display: none; }
.backup-workspace-copy { color: var(--text-2); font-size: 12px; line-height: 1.8; margin-bottom: 15px; }
#mergeClientsBody { font-size: 12px; color: var(--text-2); line-height: 1.8; }
#mergeClientsBody p { margin: 0 0 16px; }
#mergeClientsBody .workspace-note { color: var(--text-2); font-size: 11px; }
#mergeClientsBody .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
#mergeClientsBody .form-group { min-width: 0; margin: 0; }
#mergeClientsBody .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 7px; }
#mergeClientsBody .form-select { display: block; width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--control-edge); border-radius: 5px; background: var(--surface); color: var(--text); font: 12px var(--font-sans); padding: 11px 10px; }
#mergeClientsBody h4 { color: var(--text); font-size: 12px; font-weight: 650; margin: 6px 0 14px; }
#mergeClientsBody details { padding: 14px 17px; border: 1px solid var(--border); border-radius: 6px; background: var(--grey-50); margin: 20px 0; }
#mergeClientsBody summary { cursor: pointer; font-weight: 600; font-size: 11px; color: var(--text-2); }
#mergeSuggestions { margin-top: 13px; }
#mergeSuggestions > p { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#mergeSuggestions > p:last-child { margin-bottom: 0; }
#mergeSuggestions > p > span { font-size: 12px; color: var(--text-2); }
#mergeSuggestions button { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; white-space: normal; text-align: left; justify-content: flex-start; align-items: start; line-height: 1.7; }
#mergeSuggestions button > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#mergeClientsBody hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
#mergeClientsBody:has(#mergeConfirmed) { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 21px; }
#mergeClientsBody:has(#mergeConfirmed) > p, #mergeClientsBody:has(#mergeConfirmed) > h4, #mergeClientsBody:has(#mergeConfirmed) > label, #mergeClientsBody:has(#mergeConfirmed) > .form-error { grid-column: 1 / -1; margin: 0; }
#mergeClientsBody:has(#mergeConfirmed) > p:nth-child(2) { font-size: 11px; background: var(--subtle); padding: 12px 15px; border-left: 2px solid var(--primary); }
#mergeClientsBody:has(#mergeConfirmed) > label { font-size: 11px; padding: 13px 15px; background: var(--subtle); border: 1px solid var(--border); border-radius: 5px; }
#mergeConfirmed { margin-top: 3px; accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
#mergeDialogError:not(:empty) { margin: 12px 0; color: var(--danger); background: var(--danger-bg); padding: 10px 13px; border-left: 2px solid var(--danger); font-size: 11px; }
#mergeHistory .workspace-history-row { flex-wrap: wrap; gap: 8px; }
#mergeHistory .workspace-history-row p { margin: 0; }
#mergeHistory .badge { background: var(--subtle); font-size: 11px; padding: 3px 6px; color: var(--text-2); border-radius: 3px; }
.identity-repair-modal { max-width: 860px; }
.identity-repair-modal .modal-body { color: var(--text-2); font-size: 12px; line-height: 1.8; }
.repair-steps { display: flex; gap: 10px; margin-bottom: 21px; padding-bottom: 15px; border-bottom: 1px solid var(--border); font: 12px var(--font-mono); color: var(--text-2); }
.repair-steps span { padding: 5px 8px; border-radius: 4px; }
.repair-steps [aria-current=step] { color: var(--text); background: var(--selected); }
.repair-lead { font-size: 12px; margin-bottom: 19px; }
.repair-note { font-size: 11px; color: var(--text-2); line-height: 1.8; margin: 11px 0 17px; }
.repair-records { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.repair-record-choice { border: 1px solid var(--border-strong); border-radius: 6px; padding: 17px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; min-width: 0; }
.repair-record-choice:has(input:checked) { border-color: var(--primary); background: var(--selected); }
.repair-record-choice input, .repair-assignment-choice input { accent-color: var(--primary); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.repair-record-choice strong { display: block; color: var(--text); font-size: 13px; }
.repair-record-choice > span { min-width: 0; overflow-wrap: anywhere; }
.repair-record-fact { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; white-space: pre-line; overflow-wrap: anywhere; }
.repair-record-tag { display: block; font: 11px var(--font-mono); margin: 0 0 7px; color: var(--text-2); }
.repair-cloud-check { background: var(--grey-50); border: 1px solid var(--border); border-radius: 6px; padding: 17px; margin: 20px 0; }
.repair-cloud-check h4, .repair-section-title { color: var(--text); font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.repair-cloud-check p { font-size: 11px; margin-bottom: 10px; }
.repair-cloud-result { display: block; margin-top: 9px; color: var(--text); font-size: 11px; }
.repair-cloud-result.error { color: var(--danger); }
.repair-invoices { display: grid; gap: 16px; }
.repair-invoice { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; min-width: 0; }
.repair-invoice-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 17px; padding: 16px; background: var(--subtle); }
.repair-invoice-summary > div { min-width: 0; }
.repair-invoice-number { font: 500 11px var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.repair-invoice-amount { font: 500 12px var(--font-mono); text-align: right; color: var(--text); }
.repair-invoice-amount small { display: block; font: 11px var(--font-sans); color: var(--text-2); margin-top: 5px; }
.repair-invoice-snapshot { font-size: 11px; padding: 12px 16px 3px; overflow-wrap: anywhere; }
.repair-invoice-snapshot strong { font-size: 12px; font-weight: 650; display: block; margin-bottom: 4px; }
.repair-assignment { border: 0; padding: 13px 16px 16px; }
.repair-assignment legend { color: var(--text-2); font-size: 12px; font-weight: 600; padding-top: 13px; }
.repair-assignment-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.repair-assignment-choice { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; font-size: 11px; min-width: 0; }
.repair-assignment-choice:has(input:checked) { background: var(--selected); border-color: var(--primary); }
.repair-assignment-choice span { min-width: 0; overflow-wrap: anywhere; }
.repair-assignment-count { font: 12px var(--font-mono); color: var(--text-2); margin-bottom: 16px; }
.repair-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 17px 0 23px; }
.repair-review-record { padding: 17px; border: 1px solid var(--border); border-radius: 5px; background: var(--grey-50); min-width: 0; overflow-wrap: anywhere; }
.repair-review-record h4 { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.repair-review-record p { font-size: 11px; margin-bottom: 8px; }
.repair-review-record strong { color: var(--text); }
.repair-confirmation { display: flex; align-items: flex-start; gap: 11px; padding: 15px; background: var(--selected); border: 1px solid var(--border-strong); border-radius: 5px; font-size: 11px; margin: 18px 0; }
.repair-confirmation input { accent-color: var(--primary); width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; }
.repair-error { color: var(--danger); background: var(--danger-bg); padding: 12px 15px; border-left: 2px solid var(--danger); font-size: 11px; margin: 15px 0; }
.repair-error:empty { display: none; }
.repair-success { background: var(--success-bg); border-left: 3px solid var(--success); padding: 17px 19px; margin-bottom: 22px; }
.repair-success h4 { font-size: 17px; margin-bottom: 8px; color: var(--success); }
.repair-success p { font-size: 12px; color: var(--text-2); }
.workspace-conflict-resolve { margin-top: 11px; }
/* Email invoices: the pending invoices beside the email each one makes. */
.invoice-email-modal { max-width: 1040px; }
.invoice-email-modal .modal-body { color: var(--text-2); font-size: 12px; line-height: 1.7; }
#invoiceEmailModal [hidden] { display: none !important; }
.ie-mode { margin: 0 0 16px; padding: 11px 14px; background: var(--selected); border-left: 2px solid var(--primary); color: var(--text); font-size: 12px; }
.ie-mode:focus-visible, .ie-preview h4:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 10px 14px; background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--surface)); border-radius: 6px; color: var(--warning); font-size: 11px; }
.ie-sync p { margin: 0; }
.ie-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ie-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.ie-layout.single { grid-template-columns: minmax(0, 1fr); }
.ie-tools { margin: 0 0 10px; }
.ie-tools .btn, .ie-sync .btn, .ie-state .btn, .ie-footer .btn { white-space: normal; text-align: center; }
.ie-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ie-row { min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.ie-row.current { border-color: var(--primary); box-shadow: inset 3px 0 var(--primary); }
.ie-row-head { display: flex; align-items: flex-start; gap: 10px; }
.ie-row-head input { accent-color: var(--primary); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.ie-row-label { flex: 1 1 auto; min-width: 0; color: var(--text); overflow-wrap: anywhere; cursor: pointer; }
.ie-row-label strong { font: 500 11px var(--font-mono); color: var(--text); }
.ie-row-show.workspace-text-button { flex: 0 0 auto; padding: 0; }
.ie-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 26px; }
.ie-chips:empty { display: none; }
.ie-chip { padding: 2px 7px; border-radius: 3px; background: var(--subtle); color: var(--text-2); font: 600 12px var(--font-sans); overflow-wrap: anywhere; }
.ie-chip.warn { background: var(--warning-bg); color: var(--warning); }
.ie-chip.done { background: var(--info-bg); color: var(--info); }
.ie-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0 26px; }
.ie-state:empty { display: none; }
.ie-status { margin: 0; color: var(--text-2); font-size: 11px; overflow-wrap: anywhere; }
.ie-status.error { color: var(--danger); }
.ie-status.done { color: var(--success); font-weight: 600; }
.ie-status a { color: var(--link); text-decoration: underline; }
.ie-skipped { margin: 14px 0 0; color: var(--text-2); font-size: 11px; }
.ie-skipped summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.ie-skipped ul { margin: 8px 0 0 18px; }
.ie-empty { margin: 0; color: var(--text-2); font-size: 12px; }
.ie-preview { min-width: 0; padding: 16px 18px; background: var(--grey-50); border: 1px solid var(--border); border-radius: 6px; }
.ie-preview h4 { margin: 0 0 12px; color: var(--text); font-size: 13px; }
.ie-project { margin: 0 0 14px; }
#invoiceEmailModal .form-input[aria-invalid="true"], #invoiceEmailModal .form-input[aria-invalid="true"]:focus { border-color: var(--danger); }
.ie-facts { display: grid; gap: 6px; margin: 0 0 14px; }
.ie-facts > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ie-facts dt, .ie-text-label { color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ie-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ie-facts .workspace-text-button { padding: 0 0 0 6px; }
.ie-text-label { margin: 0 0 6px; }
.ie-text { margin: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font: 12px/1.7 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.ie-footer { align-items: center; flex-wrap: wrap; }
.ie-progress { margin: 0 auto 0 0; color: var(--text-2); font-size: 11px; }
@media (max-width: 768px) {
    .ie-layout { grid-template-columns: minmax(0, 1fr); }
    .ie-row-head { flex-wrap: wrap; }
    .ie-row-show.workspace-text-button { margin-left: 26px; }
    .ie-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ie-progress { flex-basis: 100%; }
}
@media (min-width: 1500px) { .workspace-table td, .workspace-table tbody th { padding-top: 20px; padding-bottom: 20px; } .workspace-metric strong { font-size: 25px; } }
@media (max-width: 1150px) and (min-width: 769px) {
    .content { padding-left: 22px; padding-right: 22px; }
    .header { padding-left: 22px; padding-right: 22px; }
    .workspace-metric { padding: 18px 12px; }
    .workspace-metric strong { font-size: 16px; }
    .workspace-table th:first-child { width: 32%; }
    .workspace-table td, .workspace-table tbody th { padding-left: 11px; padding-right: 11px; }
    .workspace-avatar { display: none; }
}
@media (max-width: 768px) {
    .header { min-height: 84px; padding: 18px 18px; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
    .header-left { gap: 11px; align-items: center; }
    .header-right { flex: 1; align-self: center; }
    .page-title { font-size: 28px; line-height: 36px; }
    .mobile-menu-btn { padding: 9px; border-radius: var(--radius-pill); }
    .header-right .btn { padding: 9px 14px; font-size: 12px; }
    .content { padding: 22px 18px 90px; }
    .workspace-section-heading { align-items: start; flex-wrap: wrap; }
    .workspace-overview-actions { justify-content: flex-start; gap: 10px 18px; }
    .workspace-section-heading h2 { font-size: 27px; max-width: 260px; }
    .workspace-section-heading .workspace-text-button { font-size: 11px; }
    .workspace-kicker { font-size: 11px; }
    .workspace-scope { font-size: 11px; align-items: baseline; line-height: 1.8; }
    .workspace-metrics { grid-template-columns: 1fr 1fr; }
    .workspace-metric { padding: 17px; border-bottom: 1px solid var(--workspace-line); gap: 8px; }
    .workspace-metric:nth-child(2), .workspace-metric:nth-child(4) { border-right: 0; }
    .workspace-metric:last-child { grid-column: 1/-1; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
    .workspace-metric strong { font-size: 20px; }
    .workspace-metric-label { font-size: 11px; }
    .workspace-metric-note { font-size: 11px; }
    .workspace-metric:last-child .workspace-metric-note { max-width: 100px; text-align: right; }
    .workspace-facts { gap: 8px 16px; }
    .workspace-facts > span, .workspace-facts > button { font-size: 11px; }
    .workspace-facts > button { min-height: 38px; display: inline-flex; align-items: center; padding: 0 3px; }
    .client-workspace-heading { padding: 20px 16px; gap: 10px; }
    .client-workspace-heading h2 { font-size: 17px; gap: 7px; }
    .client-workspace-heading .btn { padding: 7px 8px; font-size: 11px; }
    .client-workspace-toolbar { padding: 0 16px 15px; flex-wrap: wrap; gap: 10px; }
    .workspace-search { flex-basis: 100%; }
    .workspace-select { flex: 1; width: auto; min-width: 0; }
    .workspace-search input, .workspace-select select { font-size: 11px; }
    .workspace-filter-row { padding: 0 16px 13px; align-items: start; flex-wrap: wrap; }
    .workspace-filters { gap: 5px; }
    .workspace-filters button { font-size: 11px; padding: 9px 8px; min-height: 36px; }
    .workspace-reset { padding: 7px 0; margin-left: auto; font-size: 11px; min-height: 38px; }
    .workspace-ledger-scope { padding: 0 16px 12px; line-height: 1.7; }
    .workspace-result-count { padding: 12px 16px; }
    .workspace-table, .workspace-table tbody { display: block; }
    .workspace-table thead { display: none; }
    .workspace-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); padding: 17px 16px; gap: 14px 18px; }
    .workspace-table tr:last-child { border-bottom: 0; }
    .workspace-table tbody th, .workspace-table td { display: block; border: 0; padding: 0 !important; width: auto !important; min-width: 0; }
    .workspace-table tbody th { grid-column: 1 / -1; }
    .workspace-table tbody td:nth-child(2) { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: -4px; padding-left: 48px !important; }
    .workspace-table tbody td:nth-child(2) .workspace-cell-note { margin: 0; }
    .workspace-table td.numeric { text-align: left; font-size: 13px; }
    .workspace-table td.numeric:before { content: attr(data-label); display: block; color: var(--text-2); font: 11px var(--font-sans); margin-bottom: 5px; }
    .workspace-client-name { font-size: 13px; }
    .workspace-client-company, .workspace-client-contact { font-size: 12px; }
    .workspace-source { font-size: 11px; margin-top: 5px; }
    .workspace-row-actions { grid-column: 1/-1; display: flex !important; align-items: center; justify-content: flex-end; gap: 18px; margin-top: -2px; }
    .workspace-row-actions .btn { padding: 7px 11px; min-height: 32px; font-size: 12px; }
    .workspace-detail-button { margin: 0; font-size: 12px; padding: 8px 0; }
    .workspace-pagination { padding: 13px 16px; }
    .workspace-pagination-detail { display: none; }
    .treasury-heading { align-items: flex-start; gap: 14px; flex-wrap: wrap; }
    .treasury-heading > div:first-child { max-width: 100%; }
    .treasury-heading h2 { font-size: 27px; }
    .treasury-actions { justify-content: flex-start; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 16px; }
    .stat-value { font-size: 21px; }
    .card-header { padding: 15px 17px; flex-wrap: wrap; }
    .list-item { flex-wrap: wrap; gap: 10px; }
    /* On a phone the text keeps the first row to itself; amount, status and actions wrap beneath it.
       Without a basis the text column shrank to a few pixels and titles read "EXD-…". */
    .list-info { flex: 1 1 calc(100% - 62px); } /* icon 36 + margin 14 + gap 10, so the text stays beside the icon */
    .list-title { white-space: normal; overflow-wrap: anywhere; }
    .list-item > .list-icon ~ .list-amount { margin-left: 60px; }
    .list-item > .list-actions { margin-left: auto; }
    .modal { width: calc(100% - 24px); max-height: calc(100dvh - 32px); }
    .modal-header { padding: 17px 18px; }
    .modal-header h3 { font-size: 22px; }
    .modal-body { padding: 18px; }
    .modal-footer { gap: 7px; padding: 13px 16px; flex-wrap: wrap; }
    .modal-footer .btn { font-size: 12px; padding: 10px 14px; }
    .form-row { gap: 13px; }
    .form-input { font-size: 16px; }
    .line-item-row { grid-template-columns: 1fr 80px 34px 34px; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
    .line-item-row input:first-child { grid-column: 1/-1; }
    .line-item-row input { min-width: 0; width: 100%; font-size: 14px; }
    .line-item-header { display: none; }
    .workspace-contact-facts { grid-template-columns: 1fr; gap: 13px; }
    .workspace-detail-summary { gap: 12px; flex-wrap: wrap; }
    .workspace-detail-summary > div { flex: 1 1 40%; }
    .workspace-detail-summary strong { font-size: 15px; }
    .workspace-history-row { gap: 12px; }
    .workspace-history-row > strong { font-size: 12px; white-space: nowrap; }
    #mergeClientsBody .form-grid, #mergeClientsBody:has(#mergeConfirmed) { grid-template-columns: 1fr; gap: 16px; }
    #mergeClientsBody .form-select { font-size: 14px; }
    #mergeSuggestions button { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .repair-records, .repair-assignment-choices, .repair-review-grid { grid-template-columns: minmax(0,1fr); }
    .repair-steps { gap: 4px; font-size: 11px; }
    .repair-steps span { padding: 5px; }
    .repair-invoice-summary { gap: 10px; padding: 13px; }
    .repair-invoice-amount { font-size: 11px; }
    .repair-record-choice { min-height: 84px; }
    /* The bottom bar of brand v2 is in top-navigation.css. */
    .toast-container { bottom: 88px; }
}
@media (max-width: 450px) {
    .header-right { flex-basis: 100%; justify-content: flex-start; margin-left: 49px; }
    #page-dashboard .header-right { margin-left: 0; }
    .workspace-section-heading { flex-wrap: wrap; gap: 8px; }
    .workspace-section-heading .workspace-text-button { padding-top: 0; }
    .workspace-metric strong { font-size: 19px; }
    .stats-grid { grid-template-columns: 1fr; }
    .header-right .btn-group { flex-wrap: wrap; }
    .header-right #invoiceMonthFilter { min-width: 0 !important; width: 100%; }
}
@media (max-width: 600px) {
    #page-upwork .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media print { .mobile-workspace-nav, .skip-link { display: none !important; } }

/* ── Live Upwork feed (R&D Contracts) ─────────────────────────────────────── */
#upworkLiveFeed { margin-bottom: 24px; }
#upworkLiveFeed [hidden] { display: none !important; }
#upworkLiveFeed .card-header { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.upwork-live-heading { min-width: 0; }
.upwork-live-heading .card-subtitle { display: block; margin-top: 4px; }
.upwork-live-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.upwork-live-status { font-size: 11px; line-height: 1.7; color: var(--grey-600); margin: 0 0 16px; }
.upwork-live-status[data-tone="error"] { color: var(--danger); font-weight: 600; }
.upwork-live-status[data-tone="loading"] { color: var(--accent-deep); font-weight: 600; }
.upwork-live-status[data-tone="paused"] { color: var(--warning); font-weight: 600; }
.upwork-live-status[data-tone="signed-out"], .upwork-live-status[data-tone="disconnected"], .upwork-live-status[data-tone="empty"] { margin-bottom: 0; }
#upworkLiveFeed .stats-grid { margin-bottom: 18px; }
#upworkLiveStats .stat-header { flex-wrap: wrap; gap: 2px 8px; }
.upwork-live-asof { font: 500 12px var(--font-mono); color: var(--grey-500); }
.upwork-live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.upwork-live-panel { min-width: 0; border: 1px solid var(--grey-200); border-radius: 7px; padding: 14px 16px; background: var(--white); }
.upwork-live-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.upwork-live-panel-title { font-size: 12px; font-weight: 650; margin: 0 0 10px; color: var(--grey-900); }
.upwork-live-panel-head .upwork-live-panel-title { margin: 0; }
.upwork-live-count { font: 500 12px var(--font-mono); color: var(--grey-500); margin-left: 6px; }
.upwork-live-search { width: 100%; margin-bottom: 10px; }
.upwork-live-table-wrap { overflow-x: auto; }
.upwork-live-table td.num, .upwork-live-table th.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.upwork-live-table td.positive { color: var(--success); }
.upwork-live-table td.negative { color: var(--danger); }
.upwork-live-table .upwork-live-date { white-space: nowrap; color: var(--grey-600); }
.upwork-live-desc { font-weight: 500; color: var(--grey-900); }
.upwork-live-sub { font-size: 11px; color: var(--grey-500); margin: 6px 0 0; }
.upwork-live-type { font-size: 11px; color: var(--grey-600); white-space: nowrap; }
.upwork-live-group + .upwork-live-group { margin-top: 14px; }
.upwork-live-group-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-600); font-weight: 650; padding-bottom: 6px; border-bottom: 1px solid var(--grey-200); }
.upwork-live-list .list-item { padding: 10px 4px; cursor: default; }
.upwork-live-list .list-title { white-space: normal; }
.upwork-live-list .list-item a { color: inherit; }
.upwork-live-list .list-item a:hover { text-decoration: underline; }
.upwork-live-empty { font-size: 12px; color: var(--grey-500); padding: 12px 4px; margin: 0; }
.upwork-live-foot { font-size: 11px; color: var(--grey-500); margin: 14px 0 0; line-height: 1.7; }
#refreshUpworkLiveButton[aria-busy="true"], #axExportBtn[aria-busy="true"] { opacity: .65; cursor: wait; }
@media (max-width: 1100px) { .upwork-live-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .upwork-live-panel { padding: 12px; } .upwork-live-table { font-size: 12px; } .upwork-live-table th, .upwork-live-table td { padding: 8px 6px; } }

/* ── Mobile view toggle ─────────────────────────────────────────────────── */
.layout-toggle[aria-pressed="true"] { border-color: var(--primary); color: var(--accent-deep); }
.login-card .layout-toggle { align-self: flex-start; }
/* Forced mobile layout on a wide screen: keep the content column readable. */
html[data-layout="mobile"] .content { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Persistent sync notice ─────────────────────────────────────────────── */
/* Shown until a sync succeeds. A device must never sit on stale data without saying so. */
.sync-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 16px 32px 0; padding: 14px 18px; background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-left: 4px solid var(--warning); border-radius: var(--radius); color: var(--text); }
.sync-notice[hidden] { display: none; }
.sync-notice-text { min-width: 0; }
.sync-notice-title { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.5; }
.sync-notice-detail { margin: 4px 0 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.sync-notice-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sync-notice-dismiss { width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.sync-notice-dismiss:hover, .sync-notice-dismiss:focus-visible { background: rgba(22, 20, 46, .08); }
@media (max-width: 768px) { .sync-notice { flex-direction: column; margin: 12px 16px 0; padding: 12px 16px; gap: 10px; } .sync-notice-actions { align-self: stretch; justify-content: space-between; } }
@media print { .sync-notice { display: none !important; } }

/* Newer version notice. Quiet: the page's own colours, and it reloads only when asked. It floats at the foot of
   the screen, so a tab left scrolled down still sees it on return. On a phone it sits above the tab bar, where
   toasts sit. Dialogs and the phone menu cover it. */
.version-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text); }
.version-notice[hidden] { display: none; }
.version-notice-text { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
/* Room at the end of the page, so the notice never covers the last row. */
.main:has(> .version-notice:not([hidden])) { padding-bottom: 96px; }
@media (max-width: 768px) { .version-notice { bottom: 88px; } }
@media print { .version-notice { display: none !important; } }

/* ===================== Analyser: day-level view ===================== */
/* The overview tiles, the range controls, daily growth, total performance, weekly rhythm, needs attention
   and worked this week. Every rule is scoped to #page-analyser and every class introduced here starts
   with "ax-", so nothing on the other pages can change.
   Colours: the existing tokens only (--white is the surface, --grey-900 the ink; both flip in night mode).
   The only hex values are the four series colours the monthly chart already uses, with their two night
   values, so that swatches match the charts. One media query, at the 768px this page already uses.
   Blocks that adapt to their own width use container queries.
   Existing classes are restyled in six places, on this page only. Each is marked "EXISTING". */

/* ---- the four series colours of the monthly chart, named once */
#page-analyser { --ax-direct: var(--chart-direct); --ax-rd: var(--chart-rnd); --ax-review: #B58A16; --ax-progress: #C6F24E; }
html[data-theme="dark"] #page-analyser { --ax-review: #E2B84A; }
#page-analyser .ax-c-direct { background: var(--ax-direct); }
#page-analyser .ax-c-rd { background: var(--ax-rd); }
#page-analyser .ax-c-review { background: var(--ax-review); }
#page-analyser .ax-c-progress { background: var(--ax-progress); }
/* the light series keep a thin darker edge, so a swatch or a segment still reads against the card */
#page-analyser .ax-c-rd, #page-analyser .ax-c-review, #page-analyser .ax-c-progress { outline: 1px solid var(--grey-500); outline-offset: -1px; }

/* ---- section kicker (the look of .workspace-kicker) */
#page-analyser .ax-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
#page-analyser .ax-kicker { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); margin: 0; }
#page-analyser .ax-fresh { font-family: var(--font-mono); font-size: 11px; color: var(--grey-500); }
#page-analyser .ax-fresh strong { font-weight: 600; color: var(--grey-700); }
#page-analyser .ax-fresh .ax-fresh-warn { color: var(--warning); font-weight: 600; }

/* ---- overview tiles: label, value, signed change, comparison in words, small bars.
        The row is laid out from its own width: five across, then three over two, then two by two
        with the last tile full width. No tile is ever left alone on a row. */
#page-analyser .ax-overview { container: ax-overview / inline-size; margin-bottom: 20px; }
#page-analyser .ax-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#page-analyser .ax-tile { container: ax-tile / inline-size; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px 12px; min-width: 0; }
#page-analyser .ax-tile-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px; }
#page-analyser .ax-tile-value { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: var(--grey-900); white-space: nowrap; }
#page-analyser .ax-tile-note { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--grey-500); }
#page-analyser .ax-tile-note.ax-cmp { color: var(--grey-600); }
#page-analyser .ax-tile-note b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--grey-800); }
/* small bars, top right, with a caption that names them. The hollow bar is the one still open */
#page-analyser .ax-tile-spark { position: absolute; top: 12px; right: 14px; width: 72px; color: var(--grey-400); text-align: right; line-height: 1; }
#page-analyser .ax-tile-spark svg { display: block; width: 72px; height: 22px; }
#page-analyser .ax-spark-bar { fill: currentColor; }
#page-analyser .ax-spark-bar.ax-is-open { fill: var(--white); stroke: var(--accent); stroke-width: 1; }
#page-analyser .ax-spark-cap { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-500); }
#page-analyser .ax-tile--way { background: var(--grey-50); }
@container ax-overview (max-width: 940px) {
    #page-analyser .ax-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #page-analyser .ax-tile { grid-column: span 2; }
    #page-analyser .ax-tile:nth-child(n+4) { grid-column: span 3; }
}
@container ax-overview (max-width: 560px) {
    #page-analyser .ax-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #page-analyser .ax-tile, #page-analyser .ax-tile:nth-child(n+4) { grid-column: span 1; padding: 12px 12px 10px; }
    #page-analyser .ax-tile:last-child { grid-column: 1 / -1; }
    #page-analyser .ax-tile-value { font-size: 18px; }
}
/* a tile too narrow for its figure and the bars side by side drops the bars. A long figure needs the room
   sooner: eight printed characters ("R 3 098 678", "-R 610 650") at 206px, nine or more at 232px
   (the tile is marked ax-tile--long or ax-tile--longer; measured with the web fonts) */
@container ax-tile (max-width: 190px) { #page-analyser .ax-tile-spark { display: none; } }
@container ax-tile (max-width: 206px) { #page-analyser .ax-tile--long .ax-tile-spark { display: none; } }
@container ax-tile (max-width: 232px) { #page-analyser .ax-tile--longer .ax-tile-spark { display: none; } }

/* ---- signed change: arrow + sign + amount + share. Colour reinforces, never carries alone */
#page-analyser .ax-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--grey-700); white-space: nowrap; }
#page-analyser .ax-delta svg { width: 9px; height: 9px; flex: none; }
#page-analyser .ax-delta--up { color: var(--success); }
#page-analyser .ax-delta--down { color: var(--danger); }
#page-analyser .ax-delta--flat { color: var(--grey-600); font-weight: 500; }
#page-analyser .ax-delta--na { font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--grey-500); white-space: normal; }
#page-analyser .ax-delta--lg { font-size: 12px; margin-top: 10px; }
#page-analyser .ax-delta-lead { margin-right: 3px; font-family: var(--font-sans); font-weight: 600; color: var(--grey-700); }

/* ---- filter row additions (the row itself is the existing .analyser-filters) */
/* EXISTING 1: the filter bar is a size container, so the range buttons can take a row of their own
   before the row would break in an untidy place */
#page-analyser .analyser-filters { container: ax-filters / inline-size; }
#page-analyser .ax-range { display: flex; flex-wrap: wrap; gap: 4px; }
/* the buttons stand as tall as the selects beside them, so the captions above line up */
#page-analyser .ax-range .btn { min-height: 36px; font-family: var(--font-mono); }
/* The pressed look follows aria-pressed. The shared "active" class is reset on every .filter-btn in the
   document by the Invoices filter, so it cannot be the only carrier of the state. Night values as theme.css. */
#page-analyser .ax-range .btn[aria-pressed="true"], #page-analyser .ax-head-tools .btn[aria-pressed="true"] { background: var(--inverse); color: var(--canvas); border-color: var(--inverse); }
#page-analyser .ax-range-select { display: none; }
@container ax-filters (max-width: 1230px) { #page-analyser .ax-field-range--pills { flex: 1 1 100%; } }
#page-analyser .ax-custom { display: none; align-items: flex-end; gap: 12px; flex-wrap: wrap; width: 100%; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--grey-100); }
#page-analyser .ax-custom.ax-is-open { display: flex; }
#page-analyser .ax-custom input[type="date"] { padding: 7px 10px; border: 1px solid var(--grey-200); border-radius: 10px; background: var(--white); color: var(--grey-700); font-family: var(--font-mono); font-size: 12px; }
#page-analyser .ax-custom input[type="date"]:focus { outline: none; border-color: var(--grey-900); box-shadow: 0 0 0 3px var(--accent-soft); }
#page-analyser .ax-custom input[aria-invalid="true"], #page-analyser .ax-custom input[aria-invalid="true"]:focus { border-color: var(--danger); }
#page-analyser .ax-custom-msg { align-self: center; font-size: 11px; font-weight: 600; color: var(--danger); }
/* EXISTING 2: the Client select is capped, so one long client name cannot widen the row */
#page-analyser .analyser-filters #afClient { max-width: 176px; }
/* the sentence that says exactly what is on screen, the freshness of the data behind it, and the
   one alert that must not need scrolling */
#page-analyser .ax-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; width: 100%; padding-top: 9px; margin-top: -2px; border-top: 1px solid var(--grey-100); font-size: 11px; line-height: 1.45; color: var(--grey-500); }
#page-analyser .ax-scope strong { color: var(--grey-800); font-weight: 600; }
#page-analyser .ax-scope-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
#page-analyser .ax-alert { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border: 1px solid var(--grey-300); border-radius: 999px; background: var(--grey-50); color: var(--grey-900); font-family: var(--font-sans); font-size: 11px; line-height: 1.4; white-space: nowrap; cursor: pointer; }
#page-analyser .ax-alert:hover { border-color: var(--grey-900); }
#page-analyser .ax-alert svg { width: 13px; height: 13px; flex: none; color: var(--warning); }
#page-analyser .ax-alert b { font-weight: 700; }
#page-analyser .ax-alert-sub { color: var(--grey-500); }

/* ---- two-up rows (a chart beside a panel). They stack at 768px, where the existing .grid-2 stacks */
#page-analyser .ax-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; align-items: stretch; }
#page-analyser .ax-row > .card { margin-bottom: 0; display: flex; flex-direction: column; }
#page-analyser .ax-row > .card > .card-body { flex: 1; }
#page-analyser .ax-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#page-analyser .ax-head-tools .btn { padding: 5px 10px; font-size: 11px; min-height: 30px; }
#page-analyser .ax-subtitle { font-size: 12px; font-weight: 600; color: var(--grey-900); margin: 0 0 10px; }
#page-analyser .ax-subtitle small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--grey-500); }
#page-analyser .ax-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grey-100); }

/* ---- growth chart */
/* EXISTING 3: .chart-wrap heights inside the two new chart cards */
#page-analyser #axGrowthCard .chart-wrap { height: 236px; }
#page-analyser #axWeeklyCard .chart-wrap { height: 230px; }
#page-analyser .ax-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 20px; margin-bottom: 8px; font-family: var(--font-sans); font-size: 11px; color: var(--grey-500); }
#page-analyser .ax-status b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--grey-900); }
#page-analyser .ax-status .ax-status-day { font-family: var(--font-mono); font-size: 11px; color: var(--grey-700); font-weight: 600; min-width: 96px; }
#page-analyser .ax-status .ax-status-day .ax-muted { font-family: var(--font-sans); font-weight: 400; }
#page-analyser .ax-key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--accent); vertical-align: middle; margin-right: 5px; }
#page-analyser .ax-key--prev { border-top: 2px dashed var(--grey-500); }
#page-analyser .ax-chart-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--grey-500); }
#page-analyser .ax-swatch { display: inline-block; width: 12px; height: 10px; vertical-align: -1px; margin-right: 5px; background: var(--grey-100); border: 1px solid var(--grey-300); }
#page-analyser .ax-swatch--striped { border-color: var(--grey-500); background: repeating-linear-gradient(135deg, var(--ax-rd) 0 2px, var(--white) 2px 5px); }
/* the facts of the daily series, under the chart */
#page-analyser .ax-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 18px; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--grey-100); }
#page-analyser .ax-stats li { min-width: 0; padding: 10px 0 0; }
#page-analyser .ax-stats span { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--grey-500); }
#page-analyser .ax-stats b { display: block; margin-top: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; letter-spacing: -0.03em; color: var(--grey-900); white-space: nowrap; }
#page-analyser .ax-stats small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--grey-500); }

/* ---- "show the values": the table twin of a chart */
#page-analyser .ax-values { margin-top: 12px; border-top: 1px solid var(--grey-100); padding-top: 6px; font-family: var(--font-sans); }
#page-analyser .ax-values > summary { cursor: pointer; padding: 4px 0; font-size: 11px; font-weight: 600; color: var(--accent); list-style-position: inside; }
#page-analyser .ax-values > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* contain: inline-size stops a wide table from stretching the page on a phone: the wrapper scrolls instead
   (the phone layout makes .main a flex item, which otherwise grows to the table's width) */
#page-analyser .ax-table-scroll { contain: inline-size; overflow-x: auto; max-height: 300px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--grey-100); border-radius: 8px; }
#page-analyser .ax-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#page-analyser .ax-table-scroll .data-table thead th { position: sticky; top: 0; background: var(--grey-50); z-index: 1; }
/* EXISTING 4: a row header reads like the cells beside it, not like a column heading, and stays in
   view when the table scrolls sideways */
#page-analyser .ax-table-scroll .data-table tbody th { position: sticky; left: 0; background: var(--white); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--grey-800); border-bottom: 1px solid var(--grey-100); white-space: nowrap; }
#page-analyser .ax-table-scroll .data-table thead th:first-child { left: 0; z-index: 2; }
#page-analyser .ax-table-scroll .data-table tbody tr:last-child th { border-bottom: 0; }
#page-analyser .ax-table-scroll .data-table tbody tr:hover th { background: var(--grey-50); }
#page-analyser .ax-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-analyser .ax-muted { color: var(--grey-500); }
#page-analyser .ax-neg { color: var(--danger); }
#page-analyser tr.ax-provisional td, #page-analyser .ax-table-scroll .data-table tbody tr.ax-provisional th { background: var(--grey-50); }

/* ---- total performance: one headline figure and what it is made of */
#page-analyser .ax-hero-label { font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--grey-500); }
#page-analyser .ax-hero-value { margin-top: 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: var(--grey-900); white-space: nowrap; }
#page-analyser .ax-hero-sub { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--grey-500); }
/* the verdict and, beside it, the reason for it */
#page-analyser .ax-verdict-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
#page-analyser .ax-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--grey-200); background: var(--grey-50); font-size: 11px; font-weight: 600; color: var(--grey-700); white-space: nowrap; }
#page-analyser .ax-verdict svg { width: 12px; height: 12px; flex: none; }
#page-analyser .ax-verdict--good { color: var(--success); border-color: var(--success); background: var(--success-bg); }
#page-analyser .ax-verdict--warn { color: var(--warning); }
#page-analyser .ax-verdict-why { flex: 1 1 140px; font-size: 11px; line-height: 1.4; color: var(--grey-500); }
#page-analyser .ax-split { display: flex; gap: 2px; height: 10px; margin: 18px 0 12px; }
#page-analyser .ax-split span { display: block; min-width: 3px; }
#page-analyser .ax-split span:first-child { border-radius: 3px 0 0 3px; }
#page-analyser .ax-split span:last-child { border-radius: 0 3px 3px 0; }
#page-analyser .ax-legend { list-style: none; margin: 0; padding: 0; }
#page-analyser .ax-legend--alone { margin-top: 16px; }
#page-analyser .ax-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 36px; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; line-height: 1.3; color: var(--grey-800); }
#page-analyser .ax-legend .ax-sw { width: 10px; height: 10px; border-radius: 2px; }
#page-analyser .ax-legend .ax-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--grey-900); white-space: nowrap; }
#page-analyser .ax-legend .ax-amt.ax-neg { color: var(--danger); }
#page-analyser .ax-legend .ax-pc { font-family: var(--font-mono); font-size: 11px; color: var(--grey-500); text-align: right; }
#page-analyser .ax-facts { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--grey-100); }
#page-analyser .ax-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--grey-100); font-size: 12px; color: var(--grey-600); }
#page-analyser .ax-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
#page-analyser .ax-facts b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--grey-900); white-space: nowrap; }
#page-analyser .ax-facts small { display: block; font-size: 11px; line-height: 1.4; color: var(--grey-500); }
/* EXISTING 5: the empty state inside the card needs no rule of its own above it */
#page-analyser #analyserKpis .workspace-empty { border-top: 0; padding: 14px 4px 18px; }

/* ---- needs attention: icon + words for every state, never colour alone. Whole business, not filtered */
#page-analyser .ax-attn-body { display: flex; flex-direction: column; font-family: var(--font-sans); }
#page-analyser .ax-attn-body > div { flex: 1; display: flex; flex-direction: column; }
/* the overdue alert scrolls this card into view: it must land below the fixed navigation bar */
#page-analyser #axAttentionCard { scroll-margin-top: calc(var(--top-nav-height, 0px) + 14px); }
#page-analyser #axAttentionCard:focus { outline: none; }
#page-analyser #axAttentionCard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#page-analyser .ax-attn { list-style: none; margin: 0 0 14px; padding: 0; }
#page-analyser .ax-attn li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--grey-100); font-size: 12px; line-height: 1.45; color: var(--grey-800); }
#page-analyser .ax-attn li:first-child { padding-top: 0; }
#page-analyser .ax-attn li:last-child { border-bottom: 0; padding-bottom: 0; }
#page-analyser .ax-attn svg { width: 16px; height: 16px; margin-top: 1px; color: var(--grey-500); }
#page-analyser .ax-attn .ax-is-risk svg { color: var(--danger); }
#page-analyser .ax-attn .ax-is-watch svg { color: var(--warning); }
#page-analyser .ax-attn small { display: block; font-size: 11px; color: var(--grey-500); }
#page-analyser .ax-attn b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--grey-900); }
#page-analyser .ax-attn .ax-tag { display: inline-block; margin-right: 3px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--grey-100); color: var(--grey-700); }
#page-analyser .ax-attn .ax-is-risk .ax-tag { color: var(--danger); }
#page-analyser .ax-attn .ax-is-watch .ax-tag { color: var(--warning); }
#page-analyser .ax-attn-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--grey-200); font-size: 11px; color: var(--grey-500); }
#page-analyser .ax-attn-foot b { margin-left: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--grey-900); }

/* ---- worked this week (Upwork timesheet): the one truly daily signal. Bars on top, the same
        numbers as a table underneath, column for column */
#page-analyser .ax-worked { container: ax-worked / inline-size; }
#page-analyser .ax-worked-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 32px; align-items: end; }
/* with room to spare the sentence sits beside the bars instead of under them */
@container ax-worked (min-width: 640px) { #page-analyser .ax-worked-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
#page-analyser .ax-work { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: 72px; margin: 4px 0 0 88px; border-bottom: 1px solid var(--grey-300); }
#page-analyser .ax-work-day { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
#page-analyser .ax-work-last { position: absolute; left: 20%; right: 20%; bottom: 0; border: 1px dashed var(--grey-500); border-bottom: 0; border-radius: 3px 3px 0 0; }
#page-analyser .ax-work-this { position: relative; width: 34%; max-width: 26px; background: var(--ax-progress); border: 1px solid var(--grey-700); border-bottom: 0; border-radius: 3px 3px 0 0; }
#page-analyser .ax-work-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
#page-analyser .ax-work-table thead td { width: 88px; }
#page-analyser .ax-work-table th, #page-analyser .ax-work-table td { padding: 4px 0; text-align: center; font-weight: 400; color: var(--grey-800); }
#page-analyser .ax-work-table thead th { color: var(--grey-500); font-weight: 500; }
#page-analyser .ax-work-table th[scope="row"] { text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--grey-600); white-space: nowrap; }
#page-analyser .ax-work-table .ax-is-today { color: var(--grey-900); font-weight: 700; }
#page-analyser .ax-work-table i { display: inline-block; box-sizing: border-box; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
#page-analyser .ax-k-this { background: var(--ax-progress); border: 1px solid var(--grey-700); }
#page-analyser .ax-k-last { border: 1px dashed var(--grey-500); }
#page-analyser .ax-work-sum { margin: 10px 0 0; font-family: var(--font-sans); font-size: 11px; line-height: 1.5; color: var(--grey-500); }
#page-analyser .ax-work-sum b { font-family: var(--font-mono); color: var(--grey-900); font-weight: 600; }

/* ---- a third line inside an existing metric pill */
#page-analyser .ax-pill-sub { font-size: 11px; line-height: 1.35; color: var(--grey-500); }

/* ---- phones: the one breakpoint this page already uses */
@media (max-width: 768px) {
    /* the two-up rows stack where the existing .grid-2 stacks */
    #page-analyser .ax-row { grid-template-columns: minmax(0, 1fr); }
    /* eight range buttons become one select */
    #page-analyser .ax-range { display: none; }
    #page-analyser .ax-range-select { display: block; width: 100%; }
    /* the range and the comparison each take a full row */
    #page-analyser .analyser-filters .af-field.ax-field-range, #page-analyser .analyser-filters .af-field.ax-field-wide { flex: 1 1 100%; }
    /* EXISTING 6: a 44px touch target, and 16px type so iOS does not zoom the page on focus */
    #page-analyser .analyser-filters .select-compact { min-height: 44px; font-size: 16px; }
    #page-analyser .analyser-filters .af-chip-clear { min-height: 44px; padding: 0 16px; }
    #page-analyser .analyser-filters #afClient { max-width: none; }
    /* new controls: the same 44px */
    #page-analyser .ax-head-tools .btn, #page-analyser .ax-custom .btn, #page-analyser .ax-alert { min-height: 44px; }
    #page-analyser .ax-custom .af-field { flex: 1 1 calc(50% - 6px); }
    #page-analyser .ax-custom input[type="date"] { width: 100%; min-height: 44px; font-size: 16px; }
    #page-analyser .ax-values > summary { padding: 14px 0; }
    #page-analyser .ax-hero-value { font-size: 30px; }
    #page-analyser .ax-work { margin-left: 74px; }
    #page-analyser .ax-work-table thead td { width: 74px; }
    #page-analyser .ax-work-table i { margin-right: 4px; }
}
/* ---- a touch screen wider than a phone (a tablet): the new controls keep the 44px target */
@media (pointer: coarse) {
    #page-analyser .ax-range .btn, #page-analyser .ax-head-tools .btn, #page-analyser .ax-custom .btn, #page-analyser .ax-alert { min-height: 44px; }
    /* the selects beside the range buttons match them, so the captions above stay in line */
    #page-analyser .analyser-filters .select-compact { min-height: 44px; }
    #page-analyser .ax-custom input[type="date"] { min-height: 44px; }
    #page-analyser .ax-values > summary { padding: 14px 0; }
}

/* ---- Revenue by client: the period box beside its section title, and the split under each name */
#page-analyser .cc-head { align-items: center; }
#page-analyser .cc-period { display: flex; align-items: center; gap: 8px; }
#page-analyser .cc-period .select-compact { min-width: 180px; }
#page-analyser .cc-summary { font-size: 13px; color: var(--grey-700); margin: 0 0 4px; }
#page-analyser .cc-risk { font-size: 12px; color: var(--grey-500); margin: 0 0 12px; }
#page-analyser .cc-name { display: flex; flex-direction: column; min-width: 0; }
#page-analyser .cc-how { font-size: 11px; font-weight: 400; color: var(--grey-500); overflow: hidden; text-overflow: ellipsis; }
#page-analyser .cc-more { font-size: 12px; color: var(--grey-500); margin: 8px 0 0; }
/* ---- Key insights: each kind has a word as well as a colour */
#page-analyser .ins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#page-analyser .ins { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--ins-color); background: var(--ins-bg); }
#page-analyser .ins-tag { flex-shrink: 0; min-width: 62px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ins-color); padding-top: 2px; }
#page-analyser .ins-text { font-size: 13px; line-height: 1.45; color: var(--grey-800); }
#page-analyser .ins-risk { --ins-color: var(--danger); --ins-bg: var(--danger-bg); }
#page-analyser .ins-warn { --ins-color: var(--warning); --ins-bg: var(--warning-bg); }
#page-analyser .ins-good { --ins-color: var(--success); --ins-bg: var(--success-bg); }
#page-analyser .ins-info { --ins-color: var(--grey-600); --ins-bg: var(--grey-50); }
#page-analyser .ins-foot { margin: 10px 0 0; font-size: 11px; color: var(--grey-500); }
@media (max-width: 768px) {
    #page-analyser .cc-period { flex: 1 1 100%; }
    #page-analyser .cc-period .select-compact { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; }
    #page-analyser .ins { flex-direction: column; gap: 4px; }
}
@media (pointer: coarse) { #page-analyser .cc-period .select-compact { min-height: 44px; } }

/* The team record on Settings (PR E2): who may change it, its version, the publish review and each card's note. */
#page-settings [hidden] { display: none !important; }
.team-settings-card { margin-bottom: 20px; }
.team-settings-whose { font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.team-settings-version { font-size: 12px; color: var(--grey-500); margin: 0 0 6px; }
.team-card-note { font-size: 12px; line-height: 1.5; color: var(--grey-500); margin: 0 0 12px; }
.team-card-note.warn { color: var(--warning); font-weight: 600; }
.team-card-note.error { color: var(--danger); font-weight: 600; }
.team-field-problem { font-size: 11px; font-weight: 600; color: var(--danger); margin: 6px 0 0; line-height: 1.5; }
.team-review { margin-top: 16px; }
.team-review-heading { font-size: 13px; margin: 0 0 8px; }
.team-review-list { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 4px 16px; margin: 0 0 12px; font-size: 13px; }
.team-review-list dt { color: var(--grey-500); }
.team-review-list dd { margin: 0; overflow-wrap: anywhere; }
.team-review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#page-settings .form-input:disabled { opacity: 0.75; cursor: not-allowed; }

/* The invoice editor on a desktop (Figma "Invoice editor"): a 720 px drawer from the right, so the list it came from
   stays in view. A phone keeps the full-width sheet above. */
@media (min-width: 769px) {
    #invoiceModal {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(720px, calc(100vw - 96px));
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-width: 0 0 0 1px;
        border-radius: 16px 0 0 16px;
        transform: translateX(24px);
    }
    #invoiceModal.active { transform: none; }
}