/*
 * MSG Desk HQ styles (TRD 3: hand-written CSS, no build step).
 * Every value comes from the UI/UX Design Brief: tokens (section 3), type (4), spacing and
 * radius (5), app shell (6), components (7), states (9) and responsive rules (11).
 * Views use these classes and tokens, never raw colors.
 */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Bengali"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-sans-bengali-bengali-400-normal.woff2) format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Sans Bengali"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/noto-sans-bengali-bengali-500-normal.woff2) format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Sans Bengali"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/noto-sans-bengali-bengali-600-normal.woff2) format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }

/* ---------- Tokens (Design Brief 3) ---------- */
:root {
    /* Speed (owner request, 19 Oct 2026): every chart draws within 0.5 s. */
    --hq-chart-draw: 500ms;
    --surface-canvas: #F7F9FC;
    --surface-card: #FFFFFF;
    --surface-row-alt: #F8FAFC;
    /* Table row stripe (Design Brief v5.3, HQ table system item 6). */
    --surface-row-stripe: #FAFBFD;
    --surface-row-hover: #F3F6FC;
    --surface-row-failure: #FEF2F2;
    --surface-header: #F8FAFC;
    --border-subtle: #EDF0F6;
    --border-layout: #E8EDF5;
    --border-control: #DCE3ED;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-headline: #12284A;
    --toast-action: #9CCBFF;
    --action-primary: #0074D9;
    --action-primary-hover: #0069C7;
    --action-primary-pressed: #005BB0;
    --action-accent: #008AFA;
    --nav-active-text: #0069C7;
    --nav-active-bg: #EDF6FF;
    --nav-hover-bg: #F3F6FC;
    --selection-background: #EFF6FF;
    --greeting-from: #EDF6FF;
    --greeting-to: #F8FAFC;
    --greeting-border: #DFE7F7;
    --success-text: #166534; --success-bg: #DCFCE7;
    --warning-text: #92400E; --warning-bg: #FEF3C7;
    --danger-text: #B91C1C;  --danger-bg: #FEE2E2;
    --info-text: #1E40AF;    --info-bg: #DBEAFE;
    --neutral-text: #475569; --neutral-bg: #F1F5F9;
    /* Design Brief v1.8: Expired (before suspension) orange, Lifetime purple. */
    --expired-text: #9A3412; --expired-bg: #FFEDD5;
    --lifetime-text: #6B21A8; --lifetime-bg: #F3E8FF;
    --destructive: #B91C1C;  --destructive-hover: #991B1B;
    --disabled-bg: #F1F5F9;  --disabled-text: #64748B;
    --scrim: rgba(15, 23, 42, 0.48);

    --font-sans: Inter, "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --shadow-faint: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-medium: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-strong: 0 20px 48px rgba(15, 23, 42, 0.24);

    --sidebar-width: 238px;
    --topbar-height: 64px;
    --page-padding: 32px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--surface-canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--action-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
.icon { flex: none; width: 16px; height: 16px; stroke-width: 1.75; }
:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 3px; }
.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; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.secondary-text { color: var(--text-secondary); }
.caption { font-size: 12px; line-height: 18px; color: var(--text-muted); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Buttons (Design Brief 7.1) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
    font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
    cursor: pointer; text-decoration: none; position: relative;
    transition: background-color 120ms, border-color 120ms, color 120ms;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--action-primary); color: #fff; }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-primary:active { background: var(--action-primary-pressed); }
.btn-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-control); }
.btn-secondary:hover { background: var(--surface-row-hover); }
.btn-secondary:active { background: var(--nav-active-bg); }
/* Password fields (Design Brief v3.4): an eye icon inside the field on the right shows or hides it. */
.password-field { position: relative; }
.password-field .input { padding-right: 48px; }
.password-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.password-eye:hover { background: var(--nav-active-bg); color: var(--nav-active-text); }
.password-eye .icon { width: 18px; height: 18px; }
.password-eye[aria-pressed="false"] .icon:last-child, .password-eye[aria-pressed="true"] .icon:first-child { display: none; }
.btn-cancel { color: var(--text-secondary); } /* Design Brief v3.4: a quiet outlined Cancel in pop-ups */
.btn-tertiary { background: transparent; color: var(--action-primary); padding: 0 12px; }
.btn-tertiary:hover { background: var(--selection-background); }
.btn-destructive { background: var(--destructive); color: #fff; }
.btn-destructive:hover { background: var(--destructive-hover); }
.btn[disabled], .btn[aria-disabled="true"] {
    background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-bg); cursor: not-allowed;
}
.btn-block { width: 100%; }
/* Loading keeps the label and the width, shows progress and blocks a second click. */
/* The same busy bar on a filter dropdown or a tab while its page updates in place (owner decision, 16 Oct 2026). */
.btn[data-loading], .filter-button[data-loading], .tab[data-loading], .view-tab[data-loading] { pointer-events: none; overflow: hidden; cursor: progress; }
.filter-button[data-loading], .tab[data-loading], .view-tab[data-loading] { position: relative; }
.btn[data-loading]::after, .filter-button[data-loading]::after, .tab[data-loading]::after, .view-tab[data-loading]::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%;
    background: currentColor; opacity: 0.6; animation: progress 1s ease-in-out infinite;
}
@keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 32px; height: 32px; border-radius: 10px; border: 0; padding: 0;
    background: var(--selection-background); color: var(--action-primary); cursor: pointer;
}
.btn-icon::before { content: ""; position: absolute; inset: -6px; } /* 44 by 44 px hit area */
/* The one hover state for every icon button (Design Brief 7.1): light tint and pointer. */
.btn-icon:hover { background: var(--nav-active-bg); color: var(--nav-active-text); cursor: pointer; }
.btn-icon .icon { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }

/* ---------- Status pills (7.6) ---------- */
.pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.pill-success { color: var(--success-text); background: var(--success-bg); }
.pill-warning { color: var(--warning-text); background: var(--warning-bg); }
.pill-danger  { color: var(--danger-text);  background: var(--danger-bg); }
.pill-info    { color: var(--info-text);    background: var(--info-bg); }
.pill-neutral { color: var(--neutral-text); background: var(--neutral-bg); }
.pill-expired { color: var(--expired-text); background: var(--expired-bg); }
.pill-lifetime { color: var(--lifetime-text); background: var(--lifetime-bg); }

/* ---------- Forms (7.7) ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input[type=file] { min-width: 0; max-width: 100%; }
.field + .field { margin-top: 20px; }
.label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.label .required { color: var(--danger-text); }
/* Form labels and form section headings start every word with a capital letter ("Business Name",
   "City Or Town"; owner decision, 14 Oct 2026). Shown that way only: the words themselves stay as
   written. A label that is a question ("What is the problem?") keeps sentence case with .label-sentence. */
.label, .settings-group-title { text-transform: capitalize; }
.label.label-sentence { text-transform: none; }
.input {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-control); border-radius: 8px;
    background: var(--surface-card); font-size: 16px; line-height: 24px; color: var(--text-primary);
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.input::placeholder { color: var(--text-muted); }
.input:focus { outline: 2px solid var(--action-accent); outline-offset: 0; border-color: var(--action-accent); }
.input[aria-invalid="true"] { border-color: var(--danger-text); }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn-secondary { height: 44px; background: var(--selection-background); border-color: var(--nav-active-bg); color: var(--nav-active-text); }
.input-row .btn-secondary:hover { background: var(--nav-active-bg); }
.field-error { font-size: 14px; line-height: 20px; color: var(--danger-text); }
.field-hint { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.code-input { font-family: var(--font-mono); letter-spacing: 6px; font-size: 20px; text-align: center; }
.form-summary {
    padding: 12px 16px; border-radius: 10px; background: var(--selection-background);
    color: var(--text-secondary); font-size: 14px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Toggle (7.9): same shape on and off ---------- */
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track {
    position: relative; width: 40px; height: 24px; border-radius: 999px; flex: none;
    background: var(--border-control); transition: background-color 150ms;
}
.toggle-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-faint); transition: transform 150ms;
}
.toggle input:checked + .toggle-track { background: var(--action-primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--action-accent); outline-offset: 3px; }

/* Choice cards (7.9): same shape selected and unselected */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span {
    display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 12px;
    border: 1px solid var(--border-control); border-radius: 10px; background: var(--surface-card);
    font-weight: 600; cursor: pointer;
}
.choice input:checked + span { background: var(--action-primary); border-color: var(--action-primary); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--action-accent); outline-offset: 3px; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px;
    box-shadow: var(--shadow-faint);
}
.card-body { padding: 24px; }
.card-title { font-size: 16px; line-height: 24px; font-weight: 600; }

/* Number cards (7.5) */
/* Every row of number cards in HQ (owner decision, 17 Oct 2026): 4 per row from 1280 px, 3 from 1024 px, 2 from 640 px,
   1 below; cards in a row share its height. Never straight from 4 to 2. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1279px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A row whose cards depend on the role (.fills-row: Message Logs, the Dashboard) shares the full width equally when it
   has fewer than 4 cards, for example staff Message Logs with 3 (owner decision, 17 Oct 2026); then 3, 2, 1 as before. */
@media (min-width: 1024px) {
    .stat-grid.fills-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .stat-grid.fills-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat-grid.fills-row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }
.stat {
    display: flex; justify-content: space-between; gap: 12px; min-height: 119px; padding: 20px;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 15px;
    box-shadow: var(--shadow-faint); color: inherit; text-decoration: none;
}
a.stat:hover { text-decoration: none; border-color: var(--border-control); }
/* Sentence case like every other card label ("Sent today", not "SENT TODAY"; Design Brief 7.4 staging review 2 item 6). */
.stat-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-muted); }
.tabs-after-cards { margin-top: 24px; }
.stat-value { margin-top: 8px; font-size: 32px; line-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
/* Dashboard cards (owner decision, 16 Oct 2026): every note on one line; cut with an ellipsis when the card is too
   narrow, the full text on hover (hq.js sets the title). */
.one-line-notes .stat > div:first-child { min-width: 0; }
.one-line-notes .stat-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-icon {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
    background: var(--selection-background); color: var(--action-accent); flex: none;
}
.stat-icon .icon { width: 18px; height: 18px; }

/* ---------- Tabs (7.2, Design Brief v3.4): one grouped box with a soft border and rounded corners;
   the selected tab has a light blue fill with blue text, the others plain grey text; each has an icon.
   No counts in tabs. ---------- */
/* Tab groups (owner decision, 17 Oct 2026): 14 px inside each tab, 6 px between tabs. */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; padding: 4px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); }
/* The staff Done tab's Today | Yesterday switch, on its own line under the tabs (owner decision, 17 Oct 2026). */
.tabs.day-switch { display: flex; width: max-content; margin-top: 12px; }
.tab {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-secondary); font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tab .icon { width: 16px; height: 16px; }
.tab:hover { text-decoration: none; background: var(--surface-row-hover); color: var(--text-primary); }
/* Tabs (owner request, 20 Oct 2026): a focus ring only for keyboard use, never after a mouse click (hq.js marks the page
   data-input="pointer" while the mouse or touch is used, because the page refocuses a clicked tab after loading the
   view); labels are not selectable, so a double-click highlights nothing. */
/* The whole tab group and tab row too: a double-click on a tab otherwise highlights the nearest word beside it. */
.tab, .tabs, .tab-row { -webkit-user-select: none; user-select: none; }
.tab:focus:not(:focus-visible), [data-input="pointer"] .tab:focus { outline: none; }
.tab:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
[data-input="pointer"] .tab:focus-visible { outline: none; }
/* Page tabs row (owner request, 20 Oct 2026): the tabs on the left and the open tab's actions (a button, a period filter,
   the staff Today | Yesterday switch) on the right share one row of fixed height, so the tabs sit at exactly the same
   place on every tab, with or without an action. The content card starts 16 px under it. On a phone the actions may
   wrap under the tabs; the tabs themselves never move. */
.tab-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 44px; }
.tab-row > .tabs { flex: 0 1 auto; }
.tab-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-height: 44px; margin-left: auto; }
.tab-row-actions .tabs.day-switch { margin-top: 0; }
.tab-row + .card, .tab-row + .section { margin-top: 16px; }
/* Selected tab text in nav.active blue: #0074D9 on the light fill was 4.28:1, under the 4.5:1 rule (T-36, AC-30; 18 Oct 2026). */
.tab[aria-selected="true"], .tab[aria-current="page"] { background: var(--selection-background); color: var(--nav-active-text); font-weight: 600; }
/* A count after the tab's label (Action Queue, Call Desk, Subscriptions and Invoices; PRD v9.3 section 13, evening item 6;
   owner request, 14 Oct 2026): the nav badge's grey. */
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.tab[aria-current="page"] .tab-count { background: var(--surface-card); color: var(--nav-active-text); }
/* Rows made while the staging test clock was moved (PRD v9.3 section 13, evening review item 7). */
.test-clock-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text);
    font-family: var(--font-sans, inherit); font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: middle; }
/* Sub-tabs inside a card's header row, on the right (PRD v8.3; Design Brief 7.2): the same grouped style, smaller. */
.engine-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.engine-subhead .engine-subject { margin: 0; }
.engine-subhead .engine-channel { margin-left: auto; }
.engine-subhead:not(:has(*)) { display: none; }
.view-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border-subtle); }
.view-tab {
    padding: 0 0 12px; border: 0; background: none; color: var(--text-secondary); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.view-tab[aria-selected="true"] { color: var(--action-primary); border-bottom-color: var(--action-primary); }

/* ---------- Menus, and the one date filter's Custom panel (7.3; PRD section 13, "One date filter everywhere (14 Oct 2026)") ---------- */
.period-menu, .menu {
    position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 185px; padding: 6px;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-medium);
}
/* Open menus float above every card, table and pop-up (placed by hq.js), scrolling inside when long. */
.period-menu.is-floating, .menu.is-floating { position: fixed; z-index: 110; right: auto; overflow-y: auto; overscroll-behavior: contain; }
.period-menu button, .menu a, .menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
    background: none; color: var(--text-primary); text-align: left; cursor: pointer; text-decoration: none;
}
.period-menu button:hover, .menu a:hover, .menu button:hover { background: var(--neutral-bg); text-decoration: none; }
/* One highlight for the active item (owner decision, 17 Oct 2026): the light grey #F1F5F9 with 8 px corners, for the
   pointer and for the arrow keys (hq.js moves focus to the item under the pointer, so only one item is ever lit). The
   blue outline shows only for keyboard use, drawn inside the item so the menu edge never cuts it. */
.period-menu button:focus, .menu a:focus, .menu button:focus { background: var(--neutral-bg); outline: none; text-decoration: none; }
.period-menu button:focus-visible, .menu a:focus-visible, .menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--action-primary); }
.period-menu button[aria-checked="true"] { color: var(--action-primary); font-weight: 600; }
.period-custom {
    position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 320px; padding: 16px;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-medium);
}
/* Custom floats above every card (placed by hq.js under the date button), so a table card never clips it. */
.period-custom.is-floating { position: fixed; z-index: 110; right: auto; }

/* ---------- Tables (7.4) ---------- */
.table-card { overflow: hidden; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; }
.table-tools .count { margin-left: auto; color: var(--text-secondary); }
.table-scroll { position: relative; overflow-x: auto; } /* keeps hidden labels inside the scroll area */

/* HQ table system (PRD v8.9; Design Brief 7.4): the toolbar inside the card, filter dropdowns and the footer. */
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); }
.table-toolbar .search-field { max-width: 380px; }
.table-toolbar .input, .table-toolbar .filter-button { height: 40px; border-radius: 10px; font-size: 14px; line-height: 20px; }
.table-toolbar .search-field .icon { top: 12px; }
.table-toolbar .count { margin-left: auto; color: var(--text-secondary); white-space: nowrap; }
/* A button at the right end of the toolbar, just left of the count (the Notifications page's Mark all as read). */
.table-toolbar .toolbar-end { margin-left: auto; }
.table-toolbar .toolbar-end + .count { margin-left: 0; }
/* One width for every filter button in HQ (PRD v9.0; Design Brief 7.4 item 2), set by the longest value
   ("Upgrade to Unlimited"): the value is left-aligned, the chevron sits at the right edge, and choosing a
   shorter value never resizes the button. A longer value (a team member's name) ends in an ellipsis. */
.filter-button, .hq-filter {
    display: inline-flex; align-items: center; gap: 8px; width: 232px; height: 40px; padding: 0 12px; border: 1px solid var(--border-control); border-radius: 10px;
    background: var(--surface-card); color: var(--text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; flex: 0 0 auto;
}
.filter-button .filter-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
/* A Custom period shows its dates in full: the button grows to fit them, never cutting them (owner decision, 17 Oct 2026). */
.filter-button.is-custom { width: auto; min-width: 232px; }
.filter-button.is-custom .filter-value { overflow: visible; }
/* Sortable column headers (PRD v9.0, 13 item 9; Design Brief 7.4 item 9): a quiet button, blue with an arrow when sorted. */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; cursor: pointer; }
.th-sort:hover { text-decoration: underline; }
.th-sort.is-sorted { color: var(--action-primary); }
.th-sort .icon { width: 14px; height: 14px; }
th.amount .th-sort { justify-content: flex-end; }
.filter-button .icon { width: 16px; height: 16px; color: var(--text-muted); }
.filter-button:hover { background: var(--surface-row-hover); }
.filter-button.is-set { border-color: var(--action-primary); background: var(--selection-background); color: var(--action-primary); }
.filter-button.is-set .icon { color: var(--action-primary); }
.filter .dropdown-menu button { padding-left: 6px; }
.filter-tick { display: inline-flex; width: 18px; justify-content: center; color: var(--action-primary); }
.filter-tick .icon { width: 16px; height: 16px; }
.extra-credit { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--success-text); } /* PRD v9.0 item 8 */
.extra-credit-row span { color: var(--success-text); }
.clear-filters { color: var(--action-primary); font-weight: 500; white-space: nowrap; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }
.table-footer .showing { color: var(--text-secondary); }
/* A footer row that lines up with the table cells (Dashboard, Your Tasks; owner decision, 19 Oct 2026). */
.table-footer-cells { padding: 12px 16px; font-size: 14px; line-height: 20px; }
.table-footer-cells .strong-link { white-space: nowrap; }
.table td.empty-cell, .table .dash { color: var(--text-muted); }
.table { width: 100%; border-collapse: collapse; }
.table th {
    height: 44px; padding: 0 16px; background: var(--surface-header); border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle); text-align: left; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.table td { height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.table tbody tr:nth-child(even) td { background: var(--surface-row-stripe); }
.table td .muted, .table td .caption { color: var(--text-secondary); }
.table tbody tr:hover td { background: var(--surface-row-hover); }
/* A link in a row under the pointer keeps 4.5:1 on the hover shade (T-36, AC-30; 18 Oct 2026). */
.table tbody tr:hover td a:not(.btn) { color: var(--nav-active-text); }
.table tr.row-link { cursor: pointer; }
.table tr.row-link:focus-visible { outline: 2px solid var(--action-accent); outline-offset: -2px; }
.table tr.row-link:focus-visible td { background: var(--surface-row-hover); }
.table tbody tr.is-failure td { background: var(--surface-row-failure); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
/* Long emails and names wrap anywhere instead of widening the table (Design Brief 7.4). */
.table .wrap-cell { max-width: 240px; overflow-wrap: anywhere; }
/* A caption under a value (a period, a plan, an email) stays on one line where the column allows. */
.table td .caption.nowrap { white-space: nowrap; }
/* Column alignment, every table (PRD v9.2 staging review 3 item 2; Design Brief 7.4 item 9): the first column is
   left-aligned and the last column right-aligned, header and cells; money and numbers stay right-aligned. */
.table th:first-child, .table td:first-child { text-align: left; }
.table th:last-child:not(:first-child), .table td:last-child:not(:first-child) { text-align: right; }
.table th:last-child:not(:first-child) .th-sort { justify-content: flex-end; }
.table td:last-child:not(:first-child) > .btn-row, .table td:last-child:not(:first-child) > .inline-copy,
.table td:last-child:not(:first-child) > .txn-cell, .table td:last-child:not(:first-child) > .row-icons { justify-content: flex-end; margin-left: auto; }
.table td:last-child:not(:first-child) > .workspace-line { justify-content: flex-end; }
/* Actions header over row icons, right-aligned with them (Design Brief v4.2, 7.4). */
.table .actions { text-align: right; }
.table td.actions .btn-row { justify-content: flex-end; }
/* Paid tab: the Transaction ID copy icon sits at the column's right edge (Design Brief v4.2). */
.table .txn-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pill-sm { height: 20px; padding: 0 8px; margin-left: 6px; }
/* Email and Phone (Design Brief v3.4, 7.4): only as wide as the longest value on the page, so the
   copy icon stays close to the text and the spare width goes to the other columns. */
.table .shrink { width: 1%; white-space: nowrap; }
/* Fixed row-icon slots (7.4): an action not available on a row leaves its slot empty. */
.icon-slot { display: inline-block; flex: none; width: 26px; height: 26px; }
/* HQ table system (Design Brief v5.3 item 6): row actions are icon-only 34 px buttons, empty slots keep the same width. */
.row-icons .btn-icon-sm, .row-icons .icon-slot { width: 34px; height: 34px; border-radius: 10px; }
/* Team & Roles row actions (owner decision, 17 Oct 2026; prototype "Team & Roles, edit plus a More menu"): Edit and More,
   36 px with a 1 px border, in the same place on every row; More turns light blue while its menu is open. */
.member-actions { justify-content: flex-end; }
.member-action, .member-action-slot { flex: none; width: 36px; height: 36px; border-radius: 8px; }
.member-action { border: 1px solid #E2E8F0; background: var(--surface-card); color: var(--text-secondary); }
.member-action:hover { border-color: var(--border-control); background: var(--surface-row-hover); color: var(--text-primary); }
.member-action[aria-expanded="true"] { border-color: var(--action-primary); background: var(--selection-background); color: var(--nav-active-text); }
.member-action-slot { display: inline-block; }
/* The More menu: about 288 px, the member's name first, then each action with an 18 px icon, its name and one line on
   what it does; the risky one last, red, below a 1 px line. On phones it opens full width at the bottom of the screen. */
.menu.member-menu { width: 220px; padding: 6px; border-color: #E2E8F0; border-radius: 12px; text-align: left; white-space: normal; }
.member-menu-name { padding: 8px 12px 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.member-menu form { margin: 0; }
.menu .member-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; height: auto; padding: 10px 12px; border: 0; border-radius: 8px;
    background: none; color: var(--text-primary); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu .member-menu-item:hover, .menu .member-menu-item:focus { background: var(--neutral-bg); text-decoration: none; outline: none; }
.menu .member-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--action-primary); }
.member-menu-item .icon { flex: none; width: 18px; height: 18px; color: var(--text-secondary); stroke-width: 1.75; }
.member-menu-label { font-size: 14px; line-height: 20px; font-weight: 500; }
.menu .member-menu-item.is-danger .member-menu-label, .member-menu-item.is-danger .icon { color: var(--danger-text); }
.menu .member-menu-item.is-danger:hover, .menu .member-menu-item.is-danger:focus { background: var(--surface-row-failure); }
.member-menu-divider { height: 1px; margin: 6px 4px; background: #E2E8F0; }
@media (max-width: 767px) {
    .menu.member-menu.is-floating { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; max-width: none !important; max-height: 70vh !important; }
}
.row-icons .btn-icon-sm .icon { width: 16px; height: 16px; }
.row-icons .btn-icon-sm::before { inset: -5px; }
/* Number cards above a table (Design Brief v5.3 item 2): an auto-fit grid, 220 px minimum. */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }
.pagination .page-of { color: var(--text-secondary); }

/* ---------- States (9) ---------- */
.state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; }
.state-icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--selection-background); color: var(--action-accent);
}
.state-icon .icon { width: 22px; height: 22px; }
.state-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.state p { max-width: 420px; color: var(--text-secondary); }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--neutral-bg), var(--surface-row-hover), var(--neutral-bg)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Pop-ups (7.8, Design Brief v2.2): no side drawers; every form and confirmation is a
   centered pop-up, at most 85% of the screen height, with the body scrolling inside and the footer
   always in view. Full screen on phones. ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; justify-content: center; align-items: center; padding: 16px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
.modal-sub { margin: 2px 0 0; overflow-wrap: anywhere; } /* The line under a pop-up title (Done by hand: the customer and workspace). */
#mark-done .drawer-title .mono { white-space: nowrap; } /* The action number never breaks in the middle. */
.drawer-title { font-size: 18px; line-height: 26px; font-weight: 600; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
/* Never two lines (owner decision, 19 Oct 2026, night; every HQ pop-up): a button label never wraps and a footer keeps its
   buttons in one row; below 640 px only, the footer's buttons stack full width with the primary one first (see below). */
.modal-foot { flex-wrap: nowrap; align-items: center; }
.modal-foot .btn, .modal-foot form, .modal-foot .btn-row { flex: none; }
.modal-foot form { margin: 0; }
.modal { width: 480px; max-width: 100%; max-height: 85vh; overflow: auto; background: var(--surface-card); border-radius: 16px; box-shadow: var(--shadow-strong); }
.modal-wide { width: 640px; }
.modal-body { padding: 20px 24px; color: var(--text-secondary); }

/* ---------- Messages with Undo (7.10) ---------- */
.toasts { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.toast {
    display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 12px;
    background: var(--text-primary); color: #fff; box-shadow: var(--shadow-medium);
}
.toast.is-error { background: var(--danger-bg); color: var(--danger-text); }
.toast .toast-action { background: none; border: 0; color: var(--toast-action); font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.toast.is-error .toast-action { color: var(--danger-text); }
.toast .toast-close { background: none; border: 0; color: inherit; opacity: 0.8; cursor: pointer; padding: 4px; border-radius: 8px; }

/* ---------- Login (Design Brief 8) ---------- */
.guest {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
    padding: 48px clamp(16px, 8vw, 166px);
    background: radial-gradient(60% 60% at 25% 45%, #E3F0FF 0%, rgba(227, 240, 255, 0) 70%), var(--surface-canvas);
}
.guest-eyebrow { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--action-primary); }
.guest-headline { margin-top: 20px; font-size: 52px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-headline); }
.guest-lead { margin-top: 28px; max-width: 420px; font-size: 17px; line-height: 30px; color: var(--text-secondary); }
.guest-card { width: 100%; max-width: 440px; justify-self: end; padding: 36px; border-radius: 24px; box-shadow: 0 20px 48px rgba(0, 116, 217, 0.08); }
.guest-card h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.guest-card .intro { margin-top: 8px; margin-bottom: 24px; color: var(--text-secondary); }
.guest-card .btn-primary { height: 48px; margin-top: 20px; }
.guest-note { margin-top: 24px; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; }
.alert-info { background: var(--info-bg); color: var(--info-text); }
.alert-danger { background: var(--danger-bg); color: var(--danger-text); }
.alert-success { background: var(--success-bg); color: var(--success-text); }
.qr { display: flex; justify-content: center; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.qr svg { width: 192px; height: 192px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; border-radius: 12px; background: var(--surface-row-alt); border: 1px solid var(--border-subtle); }
.codes li { list-style: none; font-family: var(--font-mono); font-size: 15px; text-align: center; }
.codes { margin: 0; }
@media (max-width: 1023px) {
    .guest { grid-template-columns: 1fr; gap: 32px; padding: 32px 16px; }
    .guest-card { justify-self: center; }
    .guest-headline { font-size: 36px; line-height: 44px; }
}
@media (max-width: 767px) { .guest-pitch { display: none; } .guest-card { padding: 24px; } }

/* ---------- App shell (Design Brief 6) ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed; z-index: 60; inset: 0 auto 0 0; width: var(--sidebar-width);
    display: flex; flex-direction: column; background: var(--surface-card); border-right: 1px solid var(--border-layout);
}
.sidebar-head { display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--border-layout); margin: 0 14px 0 0; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--action-accent); color: #fff; }
.logo-mark .icon { width: 18px; height: 18px; }
.hq-tag { padding: 2px 8px; border-radius: 6px; background: var(--selection-background); color: var(--nav-active-text); font-size: 12px; font-weight: 600; }
.sidebar-toggle { margin-left: auto; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 14px 16px; }
.nav-group { margin-top: 14px; }
.nav-group-label {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: 28px; padding: 0 12px; border: 0; background: none; cursor: pointer;
    text-align: left; white-space: nowrap; overflow: hidden; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.nav-group-text { flex: none; }
.nav-group-label .icon { flex: none; width: 12px; height: 12px; transition: transform 150ms; }
/* Never wrap a group label: when space runs short, the divider shrinks, not the label. */
.nav-group-label::after { content: ""; flex: 1 1 0; min-width: 0; height: 1px; margin-left: 8px; background: var(--border-layout); }
.nav-group[data-folded] .nav-group-label .icon { transform: rotate(-90deg); }
.nav-group[data-folded] .nav-items { display: none; }
/* The 4 px gap keeps hover and active backgrounds apart as separate rounded shapes (Prototype V21). */
.nav-items { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
    display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 10px;
    color: var(--text-muted); font-size: 13px; line-height: 20px; font-weight: 500; text-decoration: none;
}
.nav-item .icon { width: 17px; height: 17px; color: var(--text-secondary); }
.nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-active-text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-text); }
.nav-item[aria-current="page"] .icon { color: var(--nav-active-text); }
.nav-badge { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-secondary); font-size: 11px; font-weight: 600; line-height: 18px; }
.nav-item[aria-current="page"] .nav-badge { background: var(--action-primary); color: #fff; }
.sidebar-foot { padding: 12px 14px 16px; border-top: 1px solid var(--border-layout); }
.task-counter { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-row-alt); }
.task-counter-top { display: flex; justify-content: space-between; font-weight: 500; }
.progress { height: 5px; margin: 10px 0 8px; border-radius: 999px; background: var(--border-control); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--action-accent); border-radius: inherit; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 12px 6px 0; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; overflow: hidden;
    border-radius: 50%; background: var(--nav-active-bg); color: var(--nav-active-text); font-size: 13px; font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.user-card .name { font-weight: 500; }
.user-card .role { font-size: 12px; line-height: 18px; color: var(--text-muted); }

/* Fixed header while scrolling (PRD section 13, 15 Oct 2026): the page itself never scrolls or bounces, so the top bar
   and the sidebar never move, not even when scrolling hard past the top or bottom on a Mac trackpad or a phone. Only the
   content area under the top bar scrolls, and it keeps its bounce. dvh follows a phone's browser bars. */
html.has-shell, html.has-shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.has-shell .shell { height: 100vh; height: 100dvh; min-height: 0; }
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
/* position: relative keeps absolutely placed helpers (screen-reader labels) inside it, so they never stretch the page. */
.page-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
.topbar {
    position: relative; flex: none; z-index: 50; display: flex; align-items: center; gap: 16px;
    height: var(--topbar-height); padding: 0 24px; background: var(--surface-card); border-bottom: 1px solid var(--border-layout);
}
.topbar-title { font-size: 14px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.search-button {
    display: flex; align-items: center; gap: 10px; width: 380px; max-width: 34vw; height: 36px; padding: 0 8px 0 12px;
    border: 1px solid var(--border-layout); border-radius: 999px; background: var(--surface-row-alt); color: var(--text-muted); cursor: pointer;
}
.search-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-button kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--border-control); border-radius: 6px; background: #fff; font: 12px var(--font-sans); color: var(--text-secondary); }
.bell { position: relative; text-decoration: none; }
.bell .dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger-text); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.icon-plain { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--text-secondary); cursor: pointer; }
.icon-plain:hover { background: var(--surface-row-hover); }
.icon-plain .icon { width: 20px; height: 20px; }
.avatar-button { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.popover-anchor { position: relative; }
.menu-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
.menu-header .name { font-weight: 600; }
.menu-empty { padding: 16px 10px; color: var(--text-secondary); }
.menu-wide { width: 320px; }
/* Notifications (Design Brief 6): Mark all read and View all top right; bold title, smaller grey
   text (two lines at most), time ago, a dot while unread. */
.notes-menu { width: 380px; max-width: calc(100vw - 32px); padding: 0 0 6px; }
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.notes-head .name { font-weight: 600; }
.notes-actions { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 20px; }
.notes-actions a, .link-button { color: var(--nav-active-text); font-weight: 500; }
.link-button { padding: 0; border: 0; background: none; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.menu .notes-actions a, .menu .notes-actions button { display: inline; width: auto; height: auto; padding: 0; border-radius: 0; }
.menu .notes-actions a:hover, .menu .notes-actions button:hover, .menu .notes-actions a:focus, .menu .notes-actions button:focus { background: none; }
.note, .menu a.note { display: flex; align-items: flex-start; gap: 10px; height: auto; padding: 10px 14px; border-radius: 0; color: var(--text-primary); text-decoration: none; }
.note:hover, .menu a.note:hover { background: var(--surface-row-hover); text-decoration: none; }
.note-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--action-accent); }
.note:not(.is-unread) .note-main { margin-left: 18px; }
.note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.note-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.note-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.note-time { flex: none; font-size: 12px; line-height: 20px; color: var(--text-secondary); white-space: nowrap; }
.note-list .note + .note { border-top: 1px solid var(--border-subtle); }
.note-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); text-decoration: none; }
.note-link .note-dot { margin-top: 0; }
.note-link .note-title.is-read { font-weight: 500; }
.menu button:disabled { color: var(--text-muted); cursor: not-allowed; background: none; }
.menu .menu-danger { color: var(--danger-text); }
.menu-note { max-width: 260px; padding: 2px 10px 8px; }
/* Form pop-ups (Design Brief 7.8): 640 px, 720 px for the plan forms. The body scrolls, so the
   footer with Cancel and the main button always stays visible. */
.modal-form { width: 640px; display: flex; flex-direction: column; overflow: hidden; }
.modal-form.modal-lg { width: 720px; }
.modal-form .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
/* Footer order in every pop-up (owner decision, 17 Oct 2026): Close or Cancel far left; the other actions, then the main
   action last on the far right, 8 px apart. */
.modal-foot > .btn-cancel { margin-right: auto; }
.modal-foot .foot-group { display: flex; }
.modal-foot .foot-group[hidden] { display: none; }
.modal-form .modal-foot { align-items: flex-start; flex: none; }
/* 20 px between the blocks of a form, counted from the first block that is shown. */
.modal-form .modal-body > :not([hidden]):not([type=hidden]) ~ *, .new-customer > * + *, [data-workspace-fields] > * + * { margin-top: 20px; }
/* Name about 60% and Phone about 40% on one row (Design Brief v2.3 7.7). */
.field-row { display: grid; gap: 16px; }
.field-row-name { grid-template-columns: 3fr 2fr; }
.field-row > .field { margin-top: 0; }
/* A group of choices with one label (Plan). The browser's own fieldset and legend styles are
   replaced, so the label lines up with the other labels, the group gets the same 20 px gap as any
   field, and no browser draws a border line around it. */
.group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.group > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; }
.group > legend + * { clear: both; }
@media (max-width: 767px) {
    .overlay { padding: 0; }
    .modal-form, .modal-form.modal-lg { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    /* A confirmation that takes a full-screen pop-up's place (17 Oct 2026) stays full screen, its footer at the bottom. */
    .modal.is-full { width: 100%; height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; }
    .modal.is-full .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
    .field-row-name { grid-template-columns: 1fr; }
}

/* Content fills the width beside the sidebar; above 1920 px it stops growing and stays centered (Design Brief 5). */
.content { width: 100%; max-width: calc(1920px + 2 * var(--page-padding)); margin: 0 auto; padding: var(--page-padding); }
/* No big title under the top bar (owner decision, 19 Oct 2026): the row holds only the page buttons, on the right. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 24px; }
/* The title line is as tall as a button (40 px), so titles sit at the same height with or without page buttons. */
.page-head > .page-title { padding: 2px 0; }
.page-title { font-size: 28px; line-height: 36px; font-weight: 600; } /* Design Brief v5.3, table system item 1 */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.section + .section { margin-top: 24px; }
/* Every tab group sits 16 px above the card it switches (owner review, 14 Oct 2026): one shared rule, so no page sets
   its own gap. */
.tabs + .card, .tabs + .section.card { margin-top: 16px; }
.section-title { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 12px; }

.greeting {
    /* 6 px more under the date line (owner decision, 18 Oct 2026). */
    padding: 24px 24px 30px;
    border: 1px solid var(--greeting-border); border-radius: 16px; background: linear-gradient(90deg, var(--greeting-from), var(--greeting-to));
}
.greeting h1 { font-size: 22px; line-height: 30px; font-weight: 600; }
.greeting h1 span { color: var(--action-accent); }
/* The date line (owner decision, 16 Oct 2026): the status pill at its right end, centred on the date text, its right
   edge on the banner's inner padding; on narrow screens it wraps under the date, on the left. */
.greeting-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 4px; }
.greeting p { color: var(--text-secondary); }
/* Staff: the number cards follow the banner directly, 24 px below it. */
.greeting + .section { margin-top: 24px; }
/* Shortcut tiles (Design Brief 8): equal widths that fill the whole row on every screen size; one row
   from tablet up, two columns on phones, where an odd last tile fills its row. --tiles is set in the view. */
.shortcuts { display: grid; grid-template-columns: repeat(var(--tiles, 5), minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px) {
    .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shortcuts > .shortcut:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.shortcut {
    display: flex; align-items: center; gap: 14px; min-width: 112px; height: 84px; padding: 0 18px; border: 1px solid var(--border-subtle); border-radius: 15px;
    background: var(--surface-card); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-faint); text-decoration: none;
}
.shortcut:hover { text-decoration: none; border-color: var(--border-control); }
.shortcut .stat-icon { flex: none; width: 36px; height: 36px; }

.search-dialog { width: 560px; }
.search-dialog .input { border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 16px 16px 0 0; height: 56px; padding: 0 20px; }
.search-dialog .input:focus { outline: none; }
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-primary); text-decoration: none; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--nav-active-bg); color: var(--nav-active-text); }
.search-results a { justify-content: space-between; }
.search-title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-detail { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-secondary); }
.search-results a[aria-selected="true"] .search-detail, .search-results a:hover .search-detail { color: var(--nav-active-text); }
.search-group { padding: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.search-empty { padding: 16px 12px; color: var(--text-secondary); }

.dl { display: grid; grid-template-columns: 160px 1fr; gap: 12px 24px; }
.dl dt { color: var(--text-secondary); }
.dl dd { margin: 0; font-weight: 500; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.stack > * + * { margin-top: 16px; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.swatch i { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-subtle); }

/* ---------- Customers and plans (Phase 3) ---------- */
.search-field { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.search-field .icon { position: absolute; left: 12px; top: 14px; color: var(--text-muted); }
.search-field .input { padding-left: 38px; }
/* Filter bars (Design Brief 7.4): every control matches the Search button: 40 px high, 10 px corners,
   14 px text. On touch screens buttons grow to 44 px, so the controls grow with them, and the search
   text goes back to 16 px so phones do not zoom in when it is tapped. */
.dropdown { display: inline-flex; align-items: center; gap: 12px; }
.dropdown-menu { left: 0; right: auto; }
.dropdown-menu button[aria-checked="true"] { color: var(--action-primary); font-weight: 600; }
.strong-link { font-weight: 600; color: var(--nav-active-text); }
.inline-copy { display: inline-flex; align-items: center; gap: 8px; }
/* In a list the copy icon sits at the right edge of its column, so the icons form one straight line
   whatever the text length (Design Brief 7.4, owner review of 12 Oct 2026). */
.table .inline-copy { display: flex; justify-content: space-between; gap: 12px; width: 100%; }
.btn-icon-sm { width: 26px; height: 26px; border-radius: 8px; }
.btn-icon-sm .icon { width: 14px; height: 14px; }
.btn-icon-sm::before { inset: -9px; }
.text-danger { color: var(--danger-text); }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-secondary); }
.breadcrumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--nav-active-text); }
.contact-sub { display: block; margin-top: 8px; }
.contact-sub-label { display: block; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
/* A negative balance is money the customer owes (owner decision of 12 Oct 2026): the warning colors. */
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.plan-card.is-hidden { opacity: 0.75; }
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.plan-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.plan-dot-launch { background: #008AFA; } .plan-dot-scale { background: #59B4FC; } .plan-dot-accelerate { background: #0969BF; }
.plan-dot-trial { background: #C4E6FF; } .plan-dot-lifetime_limited, .plan-dot-lifetime_unlimited { background: #8BCFFF; }
.plan-price { font-size: 28px; line-height: 36px; font-weight: 600; }
.plan-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice-grid.plan-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-choice { position: relative; }
.plan-choice input { position: absolute; opacity: 0; }
.plan-choice span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-control); border-radius: 10px; cursor: pointer; background: var(--surface-card); }
.plan-choice strong { color: var(--nav-active-text); font-weight: 600; }
.plan-choice small { font-size: 12px; color: var(--text-secondary); }
.plan-choice input:checked + span { background: var(--action-primary); border-color: var(--action-primary); }
.plan-choice input:checked + span strong, .plan-choice input:checked + span small { color: #fff; }
/* A card that cannot be picked (Create invoice, Renew: an open invoice or Lifetime Unlimited; 20 Oct 2026): grey, with why. */
.plan-choice input:disabled + span { background: var(--neutral-bg); border-color: var(--border-subtle); cursor: not-allowed; }
.plan-choice input:disabled + span strong { color: var(--text-secondary); }
.plan-choice input:focus-visible + span { outline: 2px solid var(--action-accent); outline-offset: 3px; }
.customer-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: var(--surface-row-alt); border: 1px solid var(--border-subtle); }
.customer-card > div { min-width: 0; }
.customer-card dt { font-size: 12px; line-height: 18px; color: var(--text-muted); }
.customer-card dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.customer-card .customer-card-name { grid-column: 1 / -1; }
/* Design Brief v3.4 review: the email stays on one line in the widest column. */
.customer-card [data-cc="email"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.customer-card .customer-card-name dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .customer-card { grid-template-columns: 1fr; } }
.quote { margin-top: 20px; padding: 16px; border-radius: 12px; background: var(--surface-row-alt); border: 1px solid var(--border-subtle); }
.quote-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.quote-row > span:first-child { color: var(--text-secondary); }
/* Credit balance pop-up (owner decision, 17 Oct 2026): the new balance is green when credit goes up, red when it goes down. */
.credit-up { color: var(--success-text); }
.credit-down { color: var(--danger-text); }
.quote-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--action-primary); }
.duplicate-warning { margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); }
.lookup-results { display: flex; flex-direction: column; gap: 8px; }
.lookup-results:not(:empty) { margin-top: 8px; }
.lookup-match { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-control); border-radius: 10px; }
.lookup-match.is-chosen { border-color: var(--action-primary); background: var(--selection-background); }
/* Staff watermark (Design Brief v3.3): small text at low opacity, repeated diagonally. */
.watermark { position: fixed; inset: -50%; z-index: 90; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; gap: 64px 96px;
    align-content: flex-start; padding: 24px; transform: rotate(-24deg); opacity: 0.045; color: var(--text-primary); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; user-select: none; }
@media (max-width: 1279px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .plan-grid, .plan-grid-2, .choice-grid { grid-template-columns: minmax(0, 1fr); }
    .choice-grid.plan-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .search-field { max-width: none; min-width: 0; flex-basis: 100%; }
    .table-toolbar .search-field { max-width: none; }
    .table-toolbar .input, .table-toolbar .filter-button { height: 44px; }
    .table-toolbar .input { font-size: 16px; }
    .table-toolbar .search-field .icon { top: 14px; }
    .table-toolbar .count { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Responsive (Design Brief 11) ---------- */
.menu-button { display: none; }
body.sidebar-closed .sidebar { display: none; }
body.sidebar-closed .main { margin-left: 0; }
body.sidebar-closed .menu-button { display: inline-flex; }
@media (max-width: 1279px) {
    :root { --page-padding: 24px; }
}
@media (max-width: 1023px) {
    .main { margin-left: 0; }
    .menu-button { display: inline-flex; }
    .sidebar { display: none; box-shadow: var(--shadow-strong); }
    body.sidebar-open .sidebar { display: flex; }
    body.sidebar-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
    .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    :root { --page-padding: 16px; --topbar-height: 56px; }
    .topbar { padding: 0 12px; gap: 8px; }
    .search-button { width: 40px; padding: 0; justify-content: center; }
    .search-button span, .search-button kbd { display: none; }
    .stat-value { font-size: 28px; line-height: 36px; }
    .page-actions { width: 100%; }
    .dl { grid-template-columns: 1fr; gap: 4px; }
    .dl dd { margin-bottom: 12px; }
    .btn { height: 44px; }
    .period-custom { width: calc(100vw - 32px); }
}
@media (pointer: coarse) { .btn { height: 44px; } }
@media (max-width: 767px), (pointer: coarse) {
}

/* ---------- Customer picker (Design Brief 7.3; PRD v5.1) ---------- */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label-row .link-button { font-size: 14px; }
.picker-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 44px; text-align: left; cursor: pointer; background: var(--surface-card); }
.picker-button .icon { flex: none; width: 16px; height: 16px; color: var(--text-muted); }
.picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-value strong { font-weight: 500; }
.picker-menu { padding: 8px; }
.picker-search { height: 40px; margin-bottom: 6px; }
.menu .picker-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; min-height: 52px; padding: 8px 10px; }
.picker-text { display: flex; flex-direction: column; min-width: 0; }
.picker-name { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.picker-email { font-size: 12px; line-height: 18px; color: var(--text-secondary); overflow-wrap: anywhere; }
.picker-tick { flex: none; width: 16px; height: 16px; color: var(--action-primary); }
.menu .picker-option[aria-selected="true"] { background: var(--selection-background); }
.picker-empty { padding: 12px 10px; color: var(--text-secondary); }

/* ---------- Action Queue view cards (Design Brief 8): clickable, the open view outlined ---------- */
.view-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.stat[aria-current="page"] { border-color: var(--action-primary); box-shadow: 0 0 0 1px var(--action-primary); }
@media (max-width: 767px) { .view-cards { grid-template-columns: 1fr; } }

/* Invoice numbers as links (Design Brief 4: monospace 13 px, regular weight). */
.mono-link { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; color: var(--action-primary); white-space: nowrap; }

/* ---------- Settings (owner decision, 17 Oct 2026): an overview of cards, each section a full-width page ---------- */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-stack { display: grid; gap: 24px; min-width: 0; } /* Settings, Deleted: two table cards (PRD v9.0) */
/* The overview: 4 cards a row from 1280 px, 3 from 1024, 2 from 640, 1 below; 16 px gaps; the same height in a row. */
/* Three groups, each with its title (owner decision, 17 Oct 2026): 12 px between a title and its cards, 28 px between groups. */
.settings-groups { display: flex; flex-direction: column; gap: 28px; }
.settings-group { display: flex; flex-direction: column; gap: 12px; }
.settings-group > .report-section-title { margin: 0; }
.settings-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Card text never wraps (owner decision, 17 Oct 2026): a card is at least as wide as the longest section name needs
   (Details & Branding on one line: padding, icon, gaps and chevron take about 132 px), so the grid drops a column
   instead of wrapping: 4 per row only when every name fits, then 3, 2, 1. */
@supports (width: max(1px, min(1px, 100%))) {
    /* At most 4 a row: a card is never narrower than a quarter of the row. */
    .settings-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18.5rem, calc((100% - 48px) / 4))), 1fr)); }
}
.settings-card { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 20px; background: var(--surface-card); border: 1px solid #E2E8F0;
    border-radius: 12px; color: var(--text-primary); text-decoration: none; }
.settings-card:hover { background: var(--surface-row-hover); text-decoration: none; }
.settings-card:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.settings-card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
    background: var(--selection-background); color: var(--action-primary); }
.settings-card-icon .icon { width: 20px; height: 20px; }
.settings-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.settings-card-name { max-width: 100%; font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One line; a status still too long is cut with an ellipsis, the full text on hover (its title). */
.settings-card-status { max-width: 100%; font-size: 13px; line-height: 18px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-card-text .pill { white-space: nowrap; }
.settings-card-chevron { flex: none; display: inline-flex; color: var(--text-muted); }
.settings-card-chevron .icon { width: 16px; height: 16px; }
/* The smallest phones (320 px): slightly tighter cards so every name still fits on one line. */
@media (max-width: 399px) { .settings-card { gap: 12px; padding: 16px; } }
.settings-form .card-body > * + * { margin-top: 20px; }
/* Settings forms (Design Brief v5.6 7.4 item 12, updated 14 Oct 2026): the full card width on a grid of 3 equal columns
   from 1024 px up and 1 column below (24 px column gap, 20 px row gap); every field has the same width, and a last
   row that is not full keeps its fields on the left at the same width; groups under small headings with 24 px above
   each; every control 44 px with its label above; a status line under the card title; secrets masked with eye and copy. */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; row-gap: 20px; }
.settings-grid > .field { margin-top: 0; min-width: 0; }
@media (min-width: 1024px) { .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* WooCommerce (Design Brief 7.4 item 12, updated 15 Oct 2026). Desktop: row 1 Store address over all the free space and
   Sync every at its natural width; row 2 the two keys, half each; both rows fill the card. Below 1024 px the rows step
   aside (display: contents) and the fields stack as before: Store address, Consumer key, Consumer secret, Sync every. */
.settings-woo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.settings-woo .field { margin-top: 0; min-width: 0; }
.woo-row { display: contents; }
.settings-woo .woo-store { order: 1; }
.settings-woo .woo-key { order: 2; }
.settings-woo .woo-secret { order: 3; }
.settings-woo .woo-sync { order: 4; }
/* Settings, Hermes: the connection key over the free space and Summary every at its natural width on desktop; alone, Summary
   every keeps its natural width on the left. Six periods do not fit one 44 px row on a narrow card, so below 1280 px they sit
   in two rows of three. */
.settings-split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.settings-split > .field { margin-top: 0; min-width: 0; }
@media (max-width: 1279px) {
    .hermes-interval .segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; height: auto; }
}
/* Desktop: the stretching field and the segmented control share a row; when the card is too narrow for both (the Settings
   menu sits beside it at 1024 px), the control moves to its own line and fills it. */
@media (min-width: 1024px) {
    .settings-split, .woo-row-top { display: flex; flex-wrap: wrap; gap: 20px 24px; }
    /* The field takes almost all free space; a control alone on its line stretches, so every row fills the card. */
    .settings-split > .field:not(.segmented-field), .woo-row-top > .woo-store { flex: 999 1 260px; }
    .settings-split > .segmented-field, .woo-row-top > .woo-sync { flex: 1 0 auto; }
    .woo-row-keys { display: grid; column-gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-woo .woo-sync .segmented { grid-auto-columns: auto; }
    .settings-woo .woo-sync .segment span { padding: 0 14px; }
}
@media (min-width: 1280px) {
    .settings-split .segmented { grid-auto-columns: auto; }
    .settings-split .segment span { padding: 0 14px; }
}
.settings-form .card-body > .settings-group { margin-top: 24px; }
.settings-form .card-body > .settings-group:first-child { margin-top: 0; }
.settings-group-title { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 600; }
.settings-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
/* Settings, Telegram: the webhook facts under the title, one label and value per line (owner request, 15 Oct 2026). */
.settings-facts { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.settings-facts li { display: flex; flex-wrap: wrap; column-gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.settings-facts .field-error { margin: 0; }
.btn-square { flex: none; width: 44px; height: 44px; padding: 0; }
.btn-square .icon { width: 18px; height: 18px; }
/* A saved secret: a read-only 44 px line "Saved, ends in a3f9" with a Replace text button (Design Brief v5.6 7.4 item 12). */
.secret-saved { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 12px;
    border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-row-alt); color: var(--text-secondary); font-size: 14px; }
.secret-saved .link-button { font-size: 14px; }
/* A read-only value to copy (the UddoktaPay webhook address) sits on the grey subtle surface. */
.input-subtle { background: var(--surface-row-alt); border-color: var(--border-subtle); color: var(--text-secondary); }
/* A few fixed choices (WooCommerce Sync every): a 44 px segmented control filling its cell with equal segments; the
   chosen one white with blue text on the light grey control (owner decision, 14 Oct 2026). */
.segmented-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.segmented-field legend { padding: 0; margin-bottom: 8px; }
.segmented { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; height: 44px; padding: 4px; border-radius: 8px; background: var(--surface-row-hover); }
.segment { position: relative; display: block; min-width: 0; cursor: pointer; }
.segment input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.segment span { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.segment input:checked + span { background: var(--surface-card); color: var(--action-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.segment input:focus-visible + span { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.settings-form .field-row { gap: 20px; }
.settings-row .field { margin-top: 0; }
.settings-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border-subtle); }
/* Settings, Hermes (Phase 10): Make a new connection key sits at the left end of the footer, apart from Save. */
.settings-foot-start { margin-right: auto; }

/* ---------- Review buttons (Design Brief 8, owner decision of 12 Oct 2026): icon only, named on hover ---------- */
/* Row icon colors (Design Brief v3.6, 7.4): the standard icon button (same shape, size and hover tint),
   green for positive actions (Renew, Mark paid, Approve, Payment found, Mark done), red for negative ones
   (Not found, Fix); neutral icons (Copy, PDF, Change plan, pencil, view) keep the standard blue. */
.btn-icon-yes { background: var(--success-bg); color: var(--success-text); }
.btn-icon-yes:hover { background: #BBF7D0; color: var(--success-text); }
.btn-icon-no { background: var(--danger-bg); color: var(--danger-text); }
.btn-icon-no:hover { background: #FECACA; color: var(--danger-text); }
.row-icons .btn-row, .btn-row.row-icons { gap: 8px; }
/* HQ invoice page (Staging review 4 item 3): the action bar above the shared card and the payment notes under it,
   both as wide as the card. */
.invoice-notes { max-width: 620px; margin-left: auto; margin-right: auto; }
.invoice-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
/* Tooltips: one fixed layer on top of the page (public/js/hq.js), never inside a table's scroll area, so it
   never widens a table or the page (bug fix 14 Oct 2026). */
.tip-layer {
    position: fixed; top: 0; left: 0; z-index: 1000; max-width: min(320px, calc(100vw - 16px));
    padding: 4px 8px; border-radius: 6px; background: var(--text-primary); color: #FFFFFF; font-size: 12px; line-height: 18px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.tip-layer[hidden] { display: none; }
.tip-layer.is-boxed { white-space: normal; overflow: visible; text-overflow: clip; }
.tip-change.is-success { color: #86EFAC; }
.tip-change.is-danger { color: #FCA5A5; }
.field-row-half { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .field-row-half { grid-template-columns: 1fr; } }


/* Reminder Engine (Phase 5; Prototype V21). */
.toggle-track.is-on { background: var(--action-primary); }
.toggle-track.is-on::after { transform: translateX(16px); }
button.toggle { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
button.toggle:focus-visible .toggle-track { outline: 2px solid var(--action-accent); outline-offset: 3px; }
.engine-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 20px 24px; }
.engine-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 16px 0 20px; }
.engine-subject { margin-bottom: 12px; }
.engine-subject .muted { margin-right: 8px; }
.engine-email { display: block; width: 100%; height: 640px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #F1F5F9; margin-bottom: 8px; }
/* Reminder Engine previews (PRD v9.1 staging review 2; Design Brief 7.4 item 4): three at once. */
.engine-previews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
@media (min-width: 1024px) { .engine-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); } .engine-previews .preview-email { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .engine-previews { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } .engine-previews .preview-email { grid-column: auto; } }
.preview-card { min-width: 0; }
/* Owner review (14 Oct 2026): space between the email preview and the "For Sohel Alam, invoice ..." line under it. */
.preview-card > .caption { margin-top: 12px; }
.preview-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 600; }
.preview-title .icon { width: 16px; height: 16px; color: var(--text-muted); }
.preview-title .caption { margin-left: auto; font-weight: 400; }
.inbox-frame { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.inbox-head { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 20px; }
.inbox-head div { display: flex; gap: 8px; min-width: 0; }
.inbox-head dt { width: 56px; flex: none; color: var(--text-muted); }
.inbox-head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.inbox-frame .engine-email { border: 0; border-radius: 0; margin: 0; height: 560px; }
.phone-frame { max-width: 320px; min-height: 360px; margin: 0 auto; padding: 16px 14px 20px; border: 8px solid #1E293B; border-radius: 28px; background: #FFFFFF; }
.phone-sender { margin: 0 0 12px; text-align: center; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.sms-bubble { margin: 0; padding: 10px 12px; max-width: 88%; border-radius: 16px 16px 16px 4px; background: #E9E9EB; color: #0F172A; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-caption { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.phone-whatsapp { background: #EFEAE2; }
.wa-bubble { position: relative; margin: 0; padding: 8px 10px 20px; max-width: 88%; border-radius: 4px 12px 12px 12px; background: #FFFFFF; color: #111B21; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa-time { position: absolute; right: 8px; bottom: 4px; font-size: 11px; line-height: 14px; color: #667781; }
.engine-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.engine-editor .field { margin-top: 0; }
.engine-editor textarea { min-height: 160px; resize: vertical; }
.engine-variables { flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.engine-preview { min-height: 96px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-subtle, #F8FAFC); white-space: pre-wrap; overflow-wrap: anywhere; }
.engine-clock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.engine-clock .field { margin-top: 0; }
.engine-ran { margin-top: 8px; padding-left: 20px; list-style: disc; color: var(--text-secondary); }
/* Three cards (Message Logs for staff, V21) share the row equally on wide screens. */
@media (min-width: 1280px) { .stat-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.engine-switch + .section { margin-top: 24px; }
.engine-save { align-self: flex-start; margin-top: 12px; }

/* ---------- Customer profile, layout 03 "Workspace focus" (PRD v8.0; Design Brief 8) ---------- */
.fits { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-header { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.profile-who { min-width: 0; flex: 1; }
.avatar-square { width: 58px; height: 58px; border-radius: 16px; font-size: 20px; flex: none; }
/* Customer profile, top row (owner decision, 17 Oct 2026): every box the same, a 40 px icon tile centred with its label
   and value, 12 px from the text, the same padding in all three. */
.fact { display: flex; gap: 12px; align-items: center; }
.fact-body { min-width: 0; flex: 1; }
.fact-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--nav-active-bg); color: var(--nav-active-text); }
.profile-who .customer-name { margin: 0; }
.customer-email { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-secondary); max-width: 100%; }
.inline-copy > .fits { flex: 0 1 auto; }
.inline-copy > .btn-icon { flex: none; }
.profile-header .page-actions { flex: none; flex-wrap: nowrap; }
.fact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.fact { min-width: 0; padding: 16px 20px; }
.fact + .fact { border-left: 1px solid var(--border-subtle); }
.fact-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.fact .inline-copy { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.fact .credit-amount { font-size: 20px; line-height: 28px; font-weight: 600; }
.profile-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.profile-content { min-width: 0; }
.workspace-list { padding: 16px 12px; }
.workspace-list .card-title { margin: 0 8px 8px; }
.workspace-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.workspace-list li { min-width: 0; }
.workspace-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text-primary); text-decoration: none; min-width: 0; }
.workspace-item:hover { background: var(--surface-row-hover); }
.workspace-item.is-selected { background: var(--nav-active-bg); color: var(--nav-active-text); }
.workspace-item:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.workspace-item-text { display: flex; flex-direction: column; min-width: 0; }
.workspace-item-name { font-weight: 600; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dot-info { background: #1E40AF; } .dot-success { background: #166534; } .dot-warning { background: #D97706; }
.dot-danger { background: #B91C1C; } .dot-neutral { background: #94A3B8; } .dot-lifetime { background: #6B21A8; }
.workspace-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
/* Staging review 4 item 2 (Design Brief v5.6 7.4 item 13): icon, name with the status pill and the workspace email
   under it on the left; Renew then the pencil on the right; on a phone the buttons wrap under the name. */
.workspace-card-head { display: flex; align-items: flex-start; gap: 12px 16px; min-width: 0; } /* only the pencil on the right, at every width */
.workspace-ident { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.workspace-ident-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.workspace-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-card-head .card-title { margin: 0; }
.workspace-card-head .pill { flex: none; }
.workspace-head-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.workspace-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.workspace-facts dt { font-size: 13px; color: var(--text-secondary); }
.workspace-facts dd { margin: 4px 0 0; font-weight: 500; }
.workspace-robot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; color: var(--text-secondary); }
.workspace-email { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; min-width: 0; }
.workspace-actions { flex-wrap: wrap; }
.workspace-actions .workspace-renew { margin-left: auto; } /* Renew at the right end of the action row; last when it wraps */
.workspace-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px -20px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--surface-row-alt); border-radius: 0 0 16px 16px; }
.text-success { color: var(--success-text); }
@media (max-width: 899px) {
    .profile-layout { grid-template-columns: minmax(0, 1fr); }
    .workspace-list { padding: 0; background: none; border: 0; box-shadow: none; }
    .workspace-list .card-title { margin: 0 0 8px; }
    .workspace-list ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .workspace-list li { flex: none; max-width: 240px; }
    .workspace-item { border: 1px solid var(--border-subtle); background: var(--surface-card); }
}
@media (max-width: 767px) {
    .profile-header { flex-wrap: wrap; }
    .profile-header .page-actions { width: 100%; flex-wrap: wrap; }
    .fact-strip { grid-template-columns: minmax(0, 1fr); }
    .fact + .fact { border-left: 0; border-top: 1px solid var(--border-subtle); }
}

/* ---------- Call Desk (Phase 6; PRD 10 Call Desk; Design Brief 8) ---------- */
/* The Log outcome panel: reminders sent and earlier calls side by side under the form. */
.outcome-history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plain-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.plain-list li + li { margin-top: 4px; }
.plain-list .by { color: var(--text-muted); }
@media (max-width: 767px) {
    .outcome-history { grid-template-columns: minmax(0, 1fr); }
}
/* The panel's customer card: the full phone stays on one line beside its copy icon. */
/* The Log call pop-up (Call Desk simplified, Design Brief 7.4): the customer box in two columns, Phone and Email,
   then Workspace and Invoice; outcomes and problem reasons as a two-column grid of 44 px choice boxes with centred
   14 px 600 text and a 12 px gap, the odd last box spanning the row; the chosen box is white with the blue control
   border and blue text. */
.outcome-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outcome-card .customer-card-name { grid-column: 1 / -1; }
.outcome-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.outcome-choices > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.outcome-choice { position: relative; }
.outcome-choice input { position: absolute; opacity: 0; }
.outcome-choice span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; text-align: center;
    font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border-control); border-radius: 10px;
    background: var(--surface-card); cursor: pointer; }
.outcome-choice span:hover { background: var(--surface-row-hover); }
.outcome-choice input:checked + span { background: var(--surface-card); border-color: var(--action-primary); color: var(--action-primary); box-shadow: inset 0 0 0 1px var(--action-primary); }
.outcome-choice input:focus-visible + span { outline: 2px solid var(--action-accent); outline-offset: 3px; }
.outcome-card [data-outcome-phone] { white-space: nowrap; }
/* Four footer buttons do not fit a phone: Resend link takes its own line, the other three stay on the right. */


/* Call Desk v2 (PRD v9.4 section 13; Design Brief 7.4 item 16). The six outcomes: two rows of three in the pop-up,
   two columns on a phone; no box spans a row. */
.outcome-choices.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .outcome-choices.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Says already paid with several unpaid invoices: "Which invoice?" then the Transaction ID, 20 px apart like the other
   fields of the pop-up (the pop-up's own spacing rule only reaches its direct children). */
[data-outcome-detail] > .group + .field { margin-top: 20px; }
/* One line per unpaid invoice in the Workspace, Plan and Invoice cells, so the lines of one customer stay level. */
.cell-line { line-height: 20px; white-space: nowrap; }
.cell-line .caption { line-height: 20px; }
/* In the pop-up the invoice lines may wrap, and on a phone the customer box is one column, so the full phone with its
   copy icon never runs into the Email beside it. */
.outcome-card .cell-line { white-space: normal; }
@media (max-width: 520px) { .outcome-card { grid-template-columns: minmax(0, 1fr); } }
.pill + .pill { margin-left: 6px; }
/* The staff toolbar's right side: "38 left in the queue" in secondary text, then Next call. */
.table-toolbar .toolbar-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
/* Call Desk ready screen (PRD section 13, "Call Desk ready screen", 15 Oct 2026; Design Brief 7.4 item 16, Ready state):
   the To call tab before Ready holds one centred block; the button opens the 440 px Start taking calls pop-up. */
.desk-ready-card { padding: 40px 24px; }
.desk-ready-block { display: flex; flex-direction: column; align-items: center; max-width: 480px; margin: 0 auto; text-align: center; }
.desk-ready-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px;
    background: var(--nav-active-bg); color: var(--action-primary); }
.desk-ready-icon .icon { width: 26px; height: 26px; }
.desk-ready-title { margin: 16px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.desk-ready-text { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.desk-ready-block > .btn { height: 44px; margin-top: 20px; }
.desk-ready-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 480px; margin: 24px 0 0;
    padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.desk-ready-numbers > div { min-width: 0; }
.desk-ready-numbers dt { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.desk-ready-numbers dd { margin: 4px 0 0; font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.modal-form.modal-start-calls { width: 440px; }
@media (max-width: 767px) { .modal-form.modal-start-calls { width: 100%; } }
.start-calls-text { margin: 0; color: var(--text-secondary); }
.start-calls-row { display: flex; align-items: center; gap: 12px; }
.start-calls-sum { flex: none; font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.start-calls-row .input { flex: 1; min-width: 0; height: 44px; }
.start-calls-row .input[aria-invalid="true"] { border-color: var(--danger-text); animation: desk-shake 0.4s ease-in-out; }
@keyframes desk-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .start-calls-row .input[aria-invalid="true"] { animation: none; } }
.tabs + .desk-ready-card { margin-top: 0; }

/* ---------- Action Queue and requests (Phase 7) ---------- */
.task-steps li { display: flex; align-items: center; gap: 8px; }
.task-steps .step-done { color: var(--success-text); }
.task-steps .step-failed { color: var(--danger-text); }
.task-steps .step-pending { color: var(--text-muted); }
.link-button.mono { font-family: var(--font-mono); font-size: 13px; }

/* Settings, Message templates (Design Brief 7.4 item 5; layout A, owner decision of 16 Oct 2026): the template tabs on
   top, then the editor card (name, Version badge, when it is sent, the channel tabs, the fields) and the live preview
   side by side; stacked below 1024 px. */
.template-layout { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.template-layout > .tabs { align-self: flex-start; max-width: 100%; }
/* The template tabs show names only and stay on one line; on a narrow screen the row scrolls sideways (17 Oct 2026). */
.tabs.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tabs.tabs-scroll .tab { flex: none; }
.template-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.field-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.field-label-row .label { margin: 0; }
.template-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The template editor boxes (owner decision, 14 Oct 2026): 16 px padding; plain text 14 / 22 px; the HTML in the code
   font at 13 / 20 px, one tag per line, long lines wrapping only at spaces (never inside a word or a tag name). Both
   grow with their content up to 20 lines (hq.js), then scroll. */
.template-text { min-height: 160px; resize: vertical; padding: 16px; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: normal; word-break: normal; }
.template-text.template-html { font-family: var(--font-mono); font-size: 13px; line-height: 20px; overflow-x: auto; }
.preview-format { margin: -4px 0 8px; }
/* A channel the step does not use: the tab stays in place, muted, with no hover. */
.tab.is-unused, .tab.is-unused:hover { color: var(--text-muted); background: none; cursor: default; font-weight: 400; }
.template-format { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-row-hover); }
.format-tab { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.format-tab[aria-selected="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.format-tab:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.placeholder-menu summary { list-style: none; display: inline-flex; cursor: pointer; }
.placeholder-menu summary::-webkit-details-marker { display: none; }
.placeholder-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.placeholder-list .btn { height: 32px; font-size: 13px; }
.settings-foot { gap: 8px; }
.template-preview .card-body > * + * { margin-top: 16px; }
/* Side by side, the editor and the Preview card start at the same height when a template, channel or format opens (hq.js
   sets the taller one's height as a minimum, owner decision of 17 Oct 2026); after that each grows on its own. The
   editor's footer stays at the bottom with any extra space above it; the Preview content stays at the top. */
@media (min-width: 1024px) {
    .template-editor > form.card { display: flex; flex-direction: column; }
    .template-editor > form.card > .card-body { flex: 1 0 auto; }
}
@media (max-width: 1023px) { .template-editor { grid-template-columns: minmax(0, 1fr); } }
/* Send a Test (owner decision, 18 Oct 2026): under the Preview card, in the same column. */
.template-test { grid-column: 2; grid-row: 2; }
.template-preview { grid-column: 2; grid-row: 1; }
.template-test-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; margin-top: 12px; }
.template-test-fields .field + .field { margin-top: 0; }
.template-test-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.template-test-foot .btn { margin-left: auto; }
@media (max-width: 1023px) { .template-test, .template-preview { grid-column: auto; grid-row: auto; } }

/* Customers, Workspaces (PRD v9.2; Design Brief 7.4 item 3): the live workspace names, one per line, at most two
   lines so the row keeps its height; the second line ends with "+N more" (secondary text, tooltip lists all). */
.workspace-names { max-width: 240px; line-height: 20px; }
.workspace-names .workspace-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.workspace-more { flex: none; font-size: 13px; color: var(--text-secondary); white-space: nowrap; cursor: default; }
.workspace-more:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; border-radius: 4px; }

/* Action Queue detail pop-up (PRD v9.2 staging review 3 item 4; Design Brief 7.4 item 6): 640 px (full screen on a
   phone, from .modal-form), the body scrolling inside, labelled sections, Close left and the actions right. */
.task-detail { width: 640px; }
.task-detail-head { align-items: flex-start; }
/* Simplified (owner decision, 17 Oct 2026; prototype "AFTER: task pop-up, simplified"): the task name 20/28 600 with the
   action number in the code font; the pills and "Waiting <time>" under it; the grey "What to do" box (1 px border,
   radius 12) with the reason in 15/23; Customer in two columns; History folded. */
.task-detail-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.task-detail-title .mono { margin-left: 4px; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--text-secondary); white-space: nowrap; }
.task-detail-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.task-detail-when { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.task-detail-body > * + * { margin-top: 20px; }
.task-todo { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface-header); border: 1px solid var(--border-layout); border-radius: 12px; }
.task-todo .detail-label { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.task-todo p { margin: 0; overflow-wrap: anywhere; }
.task-todo-text { font-size: 15px; line-height: 23px; color: var(--text-primary); }
.task-todo-note { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.task-todo-by { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.task-todo a.mono, .task-detail-body a.mono { font-size: 14px; white-space: nowrap; }
.detail-grid dd.inline-copy { display: flex; align-items: center; gap: 8px; }
.task-history-fold { border-top: 1px solid var(--border-layout); padding-top: 12px; }
.task-history-fold > summary { cursor: pointer; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); border-radius: 4px; }
.task-history-fold > summary:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.task-history-fold .task-history { margin-top: 10px; }
.detail-label { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-primary); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.detail-grid dt { font-size: 12px; line-height: 18px; color: var(--text-muted); }
.detail-grid dd { margin: 2px 0 0; color: var(--text-primary); }
.detail-grid .detail-wide { grid-column: 1 / -1; }
.wrap-anywhere { overflow-wrap: anywhere; }
.task-steps li, .task-history li { color: var(--text-primary); }
.task-history li + li { margin-top: 10px; }
.task-detail-foot { justify-content: space-between; }
.task-detail-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.task-detail-actions form { margin: 0; }
.btn-danger-text { color: var(--danger-text); }
/* The confirm pop-ups of the workspace card's More menu (owner decision, 17 Oct 2026). */
.danger-confirm-name { margin: 0 0 4px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.danger-confirm-name .caption { display: block; }
@media (max-width: 767px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* Live updates (Design Brief 7.4 item 8): a changed row fades from the selection colour over 1.5 s (no fade
   with reduced motion, above); counts and badges change without animation. "Reconnecting" in the header
   after 10 seconds offline. */
@keyframes live-changed { from { background-color: var(--selection-background); } to { background-color: transparent; } }
tr.live-changed > td { animation: live-changed 1.5s ease-out; }
.live-status { font-size: 12px; line-height: 18px; color: var(--text-muted); white-space: nowrap; }
/* On a narrow phone the page title gives way to "Reconnecting" (it ends in "..." instead of pushing the avatar off). */
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Reports (PRD v9.4 section 13, "Call Desk v2" item 8; Design Brief 7.3 and 7.4 item 16): the period bar (the dates covered
   on the left, the one date filter on the right, Custom opening below it), the Team table on one
   line per person and scrolling sideways inside its card, the person's actions pop-up and the staff "My numbers" card. */
.report-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.report-period .date-filter { margin-left: auto; }
.report-period + .section { margin-top: 16px; }
/* Motion on Reports and the number cards (owner decision, 16 Oct 2026). The income trend's columns grow from the baseline
   once it scrolls into view (a line drawing in since 18 Oct 2026), the doughnuts draw themselves once clockwise from 12 o'clock, and counting numbers keep their width with tabular digits. With reduced motion everything shows at once. */
[data-count], [data-count-live] { font-variant-numeric: tabular-nums; }
/* The counting digits keep the final value's width (owner decision, 16 Oct 2026). */
.count-box { display: inline-grid; justify-items: start; }
.count-ghost, .count-shown { grid-area: 1 / 1; }
.count-ghost { visibility: hidden; }
@keyframes hq-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.doughnut-sweep { stroke-dasharray: 100 100; stroke-dashoffset: 0; animation: hq-sweep var(--hq-chart-draw) cubic-bezier(0.33, 1, 0.68, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .doughnut-sweep { animation: none; }
}
.team-table th, .team-table td { white-space: nowrap; }
.team-table td .caption { line-height: 16px; }
/* "My Performance This Month" (owner decision, 17 Oct 2026): the Active Plans design with three columns. */
.active-plans.my-performance { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.my-performance dd { margin: 0; }
/* Urgent messages (PRD v9.2 section 13; Design Brief v5.6 7.4, Staging review 2, item 10). The received pop-up: a
   blocking 480 px modal over the 48% scrim, above every other pop-up and open menu, with a 4 px danger-red top
   border; the red Urgent pill, the sender and the time on top; the message in 16/24 px text (line breaks kept,
   long text scrolls inside); one full-width primary Acknowledge. Full width on a phone. */
.overlay-urgent { z-index: 115; }
.urgent-modal { display: flex; flex-direction: column; overflow: hidden; }
/* The red top edge is a straight 4 px band, clipped by the rounded corners. */
.urgent-modal::before { content: ""; flex: none; height: 4px; background: var(--destructive); }
.urgent-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 20px 24px 0; }
.urgent-from { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.urgent-time { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.urgent-body { flex: 1 1 auto; min-height: 0; margin: 0; padding: 16px 24px 20px; overflow-y: auto; font-size: 16px; line-height: 24px;
    color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.urgent-foot { flex: none; padding: 16px 24px 20px; border-top: 1px solid var(--border-subtle); }
@media (max-width: 767px) { .urgent-modal { width: 100%; max-height: 100%; border-radius: 0; } }
/* Send urgent: a normal 480 px pop-up with the Message box and its "0 of 500" count. */
.modal-form.modal-sm { width: 480px; }
@media (max-width: 767px) { .modal-form.modal-sm { width: 100%; } }
.char-count { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--text-muted); text-align: right; }
/* The Urgent tab: the message keeps its line breaks; "Acknowledged 3 of 5" opens the names with their times. */
.urgent-table .urgent-text { min-width: 280px; max-width: 480px; white-space: pre-wrap; }
.ack-menu { min-width: 260px; }
.ack-list { margin: 0; padding: 0; list-style: none; }
.ack-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; font-size: 14px; line-height: 20px; }
.ack-name { color: var(--text-primary); font-weight: 500; }
.ack-time { color: var(--text-secondary); white-space: nowrap; }
.ack-time.is-waiting { color: var(--text-muted); }
/* Phase 11: money screens (PRD 9.2 and 10; TRD 10; Design Brief 7.5 and 7.11). Accounts: Income, Expenses and Profit
   stacked on the left (about a third), Spending by category on the right, the Expenses table full width below; below
   1024 px the two columns stack. Doughnuts: the ring beside its breakdown list (stacked on narrow cards); a slice grows
   to 1.035 in 180 ms on hover, focus or a tap (no motion when reduced motion is asked for). */
.accounts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.accounts-cards { display: grid; grid-auto-rows: 1fr; gap: 16px; }
.accounts-overview .accounts-grid { margin-top: 12px; }
@media (max-width: 1023px) { .accounts-grid { grid-template-columns: minmax(0, 1fr); } }
.stat-value.is-gain { color: var(--success-text); }
.stat-value.is-loss { color: var(--danger-text); }
.chart-total { margin-top: 8px; font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doughnut-wrap { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 24px 32px; align-items: center; margin-top: 16px; }
@media (max-width: 767px) { .doughnut-wrap { grid-template-columns: minmax(0, 1fr); } }
.doughnut-figure { margin: 0; text-align: center; }
.doughnut-figure svg, .doughnut-empty { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
.doughnut-figure .caption { margin-top: 8px; }
.doughnut path { transform-box: view-box; transform-origin: 50% 50%; transition: transform 180ms ease; cursor: pointer; outline: none; }
.doughnut path:hover, .doughnut path:focus { transform: scale(1.035); }
.doughnut path:focus-visible { stroke: var(--text-primary); }
/* Only the slices react (owner decisions of 16 Oct 2026); with reduced motion a slice does not grow. */
@media (prefers-reduced-motion: reduce) { .doughnut path { transition: none; } .doughnut path:hover, .doughnut path:focus { transform: none; } }
/* Reports, Revenue share by plan (owner decisions of 16 Oct 2026): two equal columns 48 px apart that stack when narrow;
   the donut (about 300 px) centered in its half with 32 px above and below and its caption 16 px under it; the plan list
   vertically centered and at most 640 px wide, so each name stays close to its amount. */
.doughnut-wrap.is-large { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 0 48px; }
.doughnut-wrap.is-large .doughnut-figure { align-self: center; justify-self: center; width: 100%; padding: 32px 0; }
.doughnut-wrap.is-large .doughnut-figure svg, .doughnut-wrap.is-large .doughnut-empty { max-width: 300px; }
.doughnut-wrap.is-large .doughnut-figure .caption { margin-top: 16px; }
.doughnut-wrap.is-large .doughnut-rows { align-self: center; width: 100%; max-width: 640px; }
.doughnut-empty { position: relative; }
.doughnut-empty-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 64px; font-size: 13px; line-height: 18px; color: var(--text-muted); }
.doughnut-rows { margin: 0; padding: 0; list-style: none; min-width: 0; }
.doughnut-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--border-subtle); }
.doughnut-dot { width: 10px; height: 10px; border-radius: 50%; }
.doughnut-name { font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.doughnut-share { white-space: nowrap; font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.doughnut-amount { text-align: right; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 479px) { .doughnut-row { gap: 8px; } .doughnut-name, .doughnut-amount { font-size: 13px; } }
.expenses-table td.expense-notes { min-width: 200px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
/* Reports, money only (PRD 10; TRD 10; Design Brief 7.11): monthly recurring revenue, the renewal forecast and trial to
   paid in three equal cards (stacked below 1024 px). Sales by plan and the monthly income trend are column charts (above). */
.inline-dot { display: inline-block; margin: 0 8px 0 0; vertical-align: 1px; }
.table-total th, .table-total td { font-weight: 600; background: var(--surface-header); border-top: 1px solid var(--border-layout); }
.table-total th { text-align: left; }
.table-note { margin: 0; padding: 12px 16px 16px; color: var(--text-secondary); }
/* Reports key metric cards and MRR changes (owner decisions, 17 Oct 2026): a rise in green, a fall in red, ৳0 in grey;
   MRR changes has no hover, its rows a label with one grey line, and the Now row in 600 with a darker line above. */
.stat-note.is-up, .mrr-net.is-up, .mrr-changes td.is-up { color: var(--success-text); }
.stat-note.is-down, .mrr-net.is-down, .mrr-changes td.is-down { color: var(--danger-text); }
.stat-label abbr { text-decoration: none; cursor: help; }
.mrr-net { color: var(--text-primary); font-weight: 600; }
.mrr-changes td.amount { font-weight: 600; white-space: nowrap; }
.mrr-changes td.secondary-text { color: var(--text-secondary); }
.mrr-changes tbody tr:hover td, .mrr-changes tbody tr:nth-child(even) td { background: none; }
.mrr-changes td.mrr-change-label { font-weight: 500; }
.mrr-changes tr.mrr-total td { font-weight: 600; border-top: 1px solid #CBD5E1; }
/* The starting amount sits in the grey header row (#F1F5F9 as the owner asked, 17 Oct 2026; other table headers are
   #F8FAFC), in the header style; the amount in primary text. */
.mrr-changes tr.mrr-start th { background: #F1F5F9; }
.mrr-changes tr.mrr-start td { height: 44px; padding: 0 16px; background: #F1F5F9; border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Reports redesign (owner decision, 17 Oct 2026): MRR by Plan and Trial to Paid side by side (stacked below 1024 px), then
   the Renewal Forecast section: an 18/26 title, one line, three number cards. */
/* Reports layout (owner decision, 18 Oct 2026): the top row 2 : 3; Active Plans style columns; two columns ending level. */
.report-now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* Side by side (2 : 3) where each note fits on one line; stacked on smaller screens. */
@media (min-width: 1400px) { .report-now { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.report-columns { margin: 12px 0 0; }
.report-columns dd { margin: 0; }
.report-columns .active-plan:last-child { padding-right: 0; }
.report-now + .report-period { margin-top: 24px; }
.report-columns.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-columns.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-columns .active-plan { gap: 4px; }
.report-columns .active-plan-count { white-space: nowrap; }
.report-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.report-split-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.report-split-left > .income-split { flex: 1 1 auto; }
.report-share { display: flex; flex-direction: column; min-width: 0; }
.report-share .doughnut-wrap.is-large { flex: 1 1 auto; align-content: center; }
.report-share .doughnut-wrap.is-large .doughnut-figure svg, .report-share .doughnut-wrap.is-large .doughnut-empty { max-width: 320px; }
.income-split { display: flex; flex-direction: column; gap: 12px; }
.income-split-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.income-split-head .text-primary { color: var(--text-primary); }
.income-split-bar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.income-split-rows { margin: 0; padding: 0; list-style: none; }
/* Fitted to Revenue Share by Plan (owner decision, 19 Oct 2026, evening; prototype "Reports: New vs Renewal Income fitted"):
   side by side, the rows share the card's height evenly, each at least 48 px, so nothing is left empty at the bottom. */
.report-split-left > .income-split .income-split-rows { flex: 1 1 auto; display: flex; flex-direction: column; }
.report-split-left > .income-split .income-split-rows li { flex: 1 1 0; min-height: 48px; }
.income-split-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--border-subtle); font-size: 14px; }
.income-split-key { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.income-split-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 1023px) {
    .report-split { grid-template-columns: minmax(0, 1fr); }
    /* Stacked: the card keeps its normal height. */
    .report-split-left > .income-split, .report-split-left > .income-split .income-split-rows, .report-split-left > .income-split .income-split-rows li { flex: none; }
    .report-split-left > .income-split .income-split-rows li { min-height: 44px; }
    .report-columns.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 479px) { .report-columns.is-two, .report-columns.is-three { grid-template-columns: minmax(0, 1fr); } }
.report-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1023px) { .report-pair { grid-template-columns: minmax(0, 1fr); } }
.report-pair .card-title + .caption { margin-top: 2px; }
.report-section-title { font-size: 18px; line-height: 26px; font-weight: 600; }
.report-forecast > .caption { margin-top: 2px; }
.report-forecast .stat-grid { margin-top: 12px; }
/* MRR by Plan: the doughnut about 220 px with the total and "MRR" in its centre; a row's "N active" under its name. */
/* The total in a ring's centre (Reports, owner decisions of 17 Oct 2026): the number only, 600, tabular, primary text, in a
   box inside the hole (the hole is 52% of the ring); js shrinks the size when a long amount would touch the ring. */
.doughnut-ring { position: relative; width: 100%; max-width: 240px; margin: 0 auto; }
.doughnut-ring svg { max-width: none; }
.doughnut-wrap.is-large .doughnut-ring { max-width: 300px; }
.report-pair .doughnut-ring { max-width: 220px; }
.report-pair .doughnut-figure svg { max-width: 220px; }
.doughnut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.doughnut-center-value { width: 44%; text-align: center; white-space: nowrap; font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.doughnut-note { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary); }
/* Trial to Paid: one sentence with the big number, one 16 px bar split in three with 2 px gaps, three rows, a small note. */
.trial-sentence { margin-top: 16px; font-size: 18px; line-height: 26px; }
.trial-sentence strong { font-weight: 600; }
.trial-big { font-size: 32px; line-height: 40px; font-variant-numeric: tabular-nums; }
.trial-bar { display: flex; gap: 2px; height: 16px; margin-top: 16px; border-radius: 999px; overflow: hidden; }
.trial-card .is-bought { background: #16A34A; }
.trial-card .is-deciding { background: #93C5FD; }
.trial-card .is-lost { background: #CBD5E1; }
.trial-rows { margin: 12px 0 0; padding: 0; list-style: none; }
.trial-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); font-size: 14px; line-height: 20px; }
.trial-key { display: inline-flex; align-items: center; gap: 10px; }
.trial-swatch { width: 10px; height: 10px; border-radius: 3px; }
.trial-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.report-mini { width: 100%; margin-top: 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report-mini th, .report-mini td { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.report-mini tr:first-child th, .report-mini tr:first-child td { border-top: 0; }
.report-mini .amount { text-align: right; }
.report-mini th { text-align: left; font-weight: 500; }
.report-mini td + td { padding-left: 12px; }
.meter { height: 8px; margin-top: 12px; border-radius: 999px; background: var(--surface-row-hover); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--action-accent); }
/* Owner and admin dashboard (PRD 9.2; TRD 10; Design Brief 7.5 and 8): status pills on the right of the greeting; the
   "Dashboard" title row with the period on the right (owner); number cards four to a row (two on tablets, one on
   phones); Revenue by plan's own period at the top right of its card; Active plans as five columns (stacked on phones). */
.greeting-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.greeting-pills .pill { gap: 6px; }
/* The same 14 px between pills as before, as a gap, so a pill that wraps onto the next line starts at the left edge. */
.greeting-pills { column-gap: 14px; }
.greeting-pills .pill + .pill { margin-left: 0; }
.greeting-pills .pill .icon { width: 14px; height: 14px; }
/* A warning pill that opens the list behind it (owner decision, 18 Oct 2026): a thin border in its text colour, "›" after
   the text, a hand cursor and a slightly darker hover; the focus ring comes from links. */
.greeting-pills .pill-link { border: 1px solid rgba(146, 64, 14, 0.2); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; }
.greeting-pills .pill-link:hover { background: #FDE68A; }
.greeting-pills .pill-chevron { margin-left: -2px; font-size: 14px; line-height: 1; }
.dashboard-title { margin-top: 24px; }
.report-period-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-left: auto; }
.dashboard-title + .dashboard-cards { margin-top: 16px; }
.chart-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.active-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; }
.active-plan { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px; border-left: 1px solid var(--border-subtle); color: inherit; text-decoration: none; }
.active-plan:first-child { padding-left: 0; border-left: 0; }
a.active-plan:hover { text-decoration: none; }
/* Owner decision, 16 Oct 2026: the number stays primary text on hover (only the hand cursor shows); focus keeps the standard outline. */
a.active-plan { cursor: pointer; }
.active-plan-count { color: var(--text-primary); }
.active-plan-name { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.active-plan-count { font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.active-plan .is-unpaid { color: var(--warning-text); }
@media (max-width: 1023px) { .active-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .active-plan { padding: 0; border-left: 0; } }
@media (max-width: 1023px) { .active-plans.my-performance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dashboard-cards + .dashboard-cards { margin-top: 16px; }
.recent-table td.team-action { min-width: 240px; max-width: 520px; white-space: normal; }

/* Activity Log (PRD 10): "What happened" gets the room; Who and the role caption stay compact. */
.activity-table .wrap-cell { min-width: 260px; max-width: 460px; }
.activity-table td .caption { line-height: 16px; }

/* The Task cell (owner decision, 16 Oct 2026; Action Queue and the Dashboard's Your tasks): the type first, the number under it. */
.task-type { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.task-id { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.task-id .mono { font-size: 12px; line-height: 16px; }

/* Team & Roles, Members (PRD 10): the photo beside the name and email; the Owes pill after the name. */
.team-members .member-cell { display: flex; align-items: center; gap: 12px; }
.team-members .member-cell .pill { margin-left: 6px; }

/* Details & Branding, the Branding section (owner decisions of 16 Oct 2026): below a 1 px line, the logo and the favicon
   side by side from 1024 px (stacked below), each in an upload box: the picture in use (the built-in mark until one is
   uploaded), the file name, the accepted files, Upload or Replace and Remove. An empty box has a dashed border. */
.settings-form .card-body > .settings-branding { margin-top: 24px; padding-top: 24px; border-top: 1px solid #E2E8F0; }
.settings-branding .settings-group-title { margin-bottom: 2px; }
.settings-group-help { margin: 0; font-size: 14px; line-height: 22px; }
.branding-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; margin-top: 12px; }
@media (min-width: 1024px) { .branding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.branding-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.upload-box { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border: 1px solid #E2E8F0; border-radius: 12px; }
.upload-box.is-empty { border: 1px dashed var(--text-muted); }
.upload-preview { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 160px; height: 64px; padding: 8px; border-radius: 8px; background: var(--neutral-bg); overflow: hidden; }
.upload-preview-favicon { width: 64px; }
.upload-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.upload-preview-favicon img { width: 32px; height: 32px; }
.upload-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.upload-name { font-size: 14px; line-height: 20px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-box.is-empty .upload-name { color: var(--text-secondary); }
.upload-help { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.upload-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-info .field-error { margin: 0; }
/* An on/off switch with "On" or "Off" beside it (Security & Login, two-step for staff). */
.number-switch { display: inline-flex; align-items: center; gap: 8px; }
.number-switch .toggle { min-height: 44px; }
/* An uploaded logo in the sidebar keeps the HQ tag beside it. */
.logo-image { display: block; height: 32px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }


/* Settings, Telegram (owner decision, 17 Oct 2026; prototype "Settings 3. Telegram, clearer layout"): a status card, "Where
   Messages Go" with one topic dropdown per kind of message, and the bot token card. On a phone each dropdown moves under its label. */
.tg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.tg-bot { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; }
.tg-tile { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--nav-active-bg); color: var(--action-primary); display: inline-flex; align-items: center; justify-content: center; }
.tg-tile .icon { width: 22px; height: 22px; }
.tg-bot-text { display: grid; gap: 4px; min-width: 0; }
.tg-bot-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.tg-bot-text .secondary-text { margin: 0; font-size: 13px; line-height: 20px; }
.tg-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.tg-stats div { display: grid; gap: 2px; min-width: 0; }
.tg-stats dt { font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.tg-stats dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.tg-stats .tg-error { color: var(--danger-text); }
.tg-status .tg-problem { flex-basis: 100%; margin: 0; }
.tg-routes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.tg-routes-head .secondary-text { margin: 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.tg-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.tg-route:last-child { padding-bottom: 0; }
.tg-route-text { display: grid; gap: 2px; min-width: 0; }
.tg-route-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.tg-route-text .secondary-text { font-size: 13px; line-height: 20px; }
.tg-route-pick { display: flex; align-items: center; gap: 10px; }
.tg-route-pick .pill { flex: none; min-width: 84px; justify-content: center; }
.tg-route > .field-error { flex-basis: 100%; margin: 0; }
.tg-select { width: 260px; max-width: 100%; appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.tg-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.tg-empty p { margin: 0; font-size: 14px; line-height: 20px; }
.tg-token-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.tg-token-text { display: grid; gap: 4px; }
.tg-token-state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text-secondary); }
.tg-token .field { margin-top: 16px; }
@media (max-width: 767px) {
    .tg-route { display: grid; justify-content: stretch; }
    .tg-route-pick { width: 100%; }
    .tg-select { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Backups (Phase 12; owner prototype "HQ Backups", 17 Oct 2026): three cards, where backups live, the history. */
.alert-warning { background: var(--warning-bg); color: var(--warning-text); }
.backup-alert { display: flex; align-items: center; gap: 8px; }
.backup-alert .icon { flex: none; width: 18px; height: 18px; }
.stat-value.backup-when { font-size: 24px; line-height: 32px; }
.stat-note .pill { margin-right: 6px; }
.backup-where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.backup-where-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); }
.backup-where-title .icon { width: 18px; height: 18px; color: var(--action-primary); }
.backup-facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 16px; font-size: 14px; line-height: 22px; }
.backup-facts dt { color: var(--text-secondary); }
.backup-facts dd { margin: 0; overflow-wrap: anywhere; }
.backup-facts + .alert { margin-bottom: 12px; }
@media (max-width: 767px) { .backup-where { flex-direction: column; align-items: flex-start; } }
/* Backblaze B2 connection (owner request, 18 Oct 2026): status line and Test connection on one row; mistyped settings below. */
.backup-b2-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.backup-b2-status { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.backup-b2-status .pill { margin-right: 4px; }
.backup-b2-status .caption { display: block; }
.backup-b2-problems { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; color: var(--text-primary); }
.backup-b2-problems li { display: flex; gap: 8px; align-items: flex-start; }
.backup-b2-problems .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--warning-text); }
/* Restore (App Flow F19): the row icon in the destructive red; the pop-up's lists. */
.btn-icon.btn-icon-restore { color: var(--destructive); }
.restore-body > * + * { margin-top: 16px; }
.restore-subtitle { margin: 16px 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.restore-counts { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; font-size: 14px; }
.restore-counts li { display: flex; justify-content: space-between; padding: 10px 16px; }
.restore-counts li + li { border-top: 1px solid var(--border-subtle); }
/* Settings, Security & Login, Login Rules (approved layout, owner decision of 18 Oct 2026): no inner box; rows with an
   icon tile, the rule name over a short detail line, and one pill or switch on the right. */
.security-rules { margin: 0; padding: 0; list-style: none; }
.security-rules li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.rule-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--selection-background); color: var(--nav-active-text); }
.rule-tile .icon { width: 18px; height: 18px; }
.rule-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rule-name { font-size: 14px; line-height: 20px; font-weight: 500; }
.rule-detail { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.security-rules .pill { flex: none; white-space: nowrap; }
/* The Login rules pop-up (owner decision, 19 Oct 2026; prototype "Security C (chosen)"): each rule a row with its icon
   tile, name and detail, the switch on the right; Lockout and Idle sign-out read as a sentence with their dropdowns. */
.security-rules li:first-child { border-top: 0; padding-top: 0; }
.security-rules .rule-switch { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
.rule-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--text-primary); }
/* Number boxes (owner decision, 19 Oct 2026, night): about 80 px wide, 44 px tall, the number centred; the unit is plain
   text after the box. A wrong value has the red border of every HQ field; its message sits under the row. */
.rule-number { flex: none; width: 80px; height: 44px; padding: 0 8px; text-align: center; font-variant-numeric: tabular-nums; }
.rule-field { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rule-field .rule-sentence { margin-top: 0; }
.rule-field .field-error { margin: 0; }
.login-rules-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.login-rules-panel[hidden] { display: none; }
.restore-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.backups-actions > form { display: contents; }

/* Team & Roles, Performance (owner decision, 18 Oct 2026, prototype "Performance B"): one card per person in 22 rem cards
   (then 2, then 1 a row; a row's cards share one height), and the person's page with its number sections. */
.perf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 16px; align-items: stretch; }
.perf-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.perf-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.perf-card-head .avatar { width: 40px; height: 40px; font-size: 14px; }
.perf-card-who { min-width: 0; }
.perf-card-name { font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.perf-card-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.perf-card-numbers > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perf-card-numbers dt { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.perf-card-numbers dd { margin: 0; }
/* One line always (owner decision, 18 Oct 2026): a long amount gets smaller (data-fit-center in hq.js), never wraps. */
.perf-big { font-size: 22px; line-height: 30px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.perf-card-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.perf-details { flex: none; font-weight: 600; color: var(--nav-active-text); text-decoration: none; }
.perf-details:hover { text-decoration: underline; }
.perf-person-head { align-items: center; justify-content: space-between; }
.perf-person-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.perf-person-who .page-title { margin: 0; }
.perf-section { padding: 16px 8px 8px; min-width: 0; }
.perf-section-title { margin: 0 0 4px 16px; font-size: 15px; line-height: 22px; font-weight: 600; }
/* Dividers between numbers only: every number has a left line and the list is pulled 1 px left inside a clipping box,
   so the first number of each row (also after wrapping into 3, 2 or 1 columns) shows none. */
.perf-metrics-clip { overflow: hidden; }
.perf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0 0 0 -1px; }
.perf-metric { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.perf-metric dt { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.perf-metric dd { margin: 0; }
.perf-value { font-size: 20px; line-height: 28px; font-weight: 600; white-space: nowrap; overflow: hidden; }
@media (min-width: 1280px) { .perf-section-calls .perf-metrics, .perf-section-customers .perf-metrics { grid-template-columns: repeat(var(--perf-count), minmax(0, 1fr)); } }
.perf-row { display: grid; grid-template-columns: 3fr 2fr 3fr; gap: 16px; align-items: stretch; }
.perf-row .perf-section .perf-metrics { grid-template-columns: repeat(var(--perf-count), minmax(0, 1fr)); }
@media (max-width: 1279px) {
    .perf-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .perf-row .perf-section .perf-metrics { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
/* The role under a name on Performance (owner decision, 18 Oct 2026): small secondary text, never a pill. */
.perf-role { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }

/* Fast page changes (owner request, 18 Oct 2026): moving between HQ pages fades only the page content for 120 ms; the
   sidebar and the top bar stay still, as if only the content changed (Chrome and Edge; others change pages as before).
   With reduced motion nothing animates. */
@view-transition { navigation: auto; }
.has-shell .sidebar { view-transition-name: hq-sidebar; }
.has-shell .topbar { view-transition-name: hq-topbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Settings, SMS (DNotify), option G (owner decision, 18 Oct 2026): the staging line, two columns (about 2/5 and 3/5,
   stacked below 1024 px with the left cards first), Send test right after the number box, one result line. */
.sms-staging { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--warning-bg); color: var(--warning-text); font-size: 13px; line-height: 20px; }
.sms-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .sms-columns { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.sms-left { display: grid; gap: 24px; min-width: 0; }
.sms-card { display: grid; gap: 14px; min-width: 0; }
.sms-card .field { margin-top: 0; }
.sms-test-row { display: flex; gap: 8px; }
.sms-test-row .input { flex: 1 1 auto; min-width: 0; }
.sms-test-row .btn { flex: none; }
.sms-test-line { margin: 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.sms-test-line.is-success { color: var(--success-text); }
.sms-test-line.is-danger { color: var(--danger-text); }
.sms-recent { min-width: 0; }
.sms-select.tg-select { flex: none; width: 100%; }
/* Recent SMS fits its column: fixed widths for date, number, status and cost; the message takes the rest on one line. */
.sms-recent .table { table-layout: fixed; min-width: 600px; }
.sms-recent .sms-col-date { width: 176px; }
.sms-recent .sms-col-number { width: 130px; }
.sms-recent .sms-col-status { width: 112px; }
.sms-recent .sms-col-cost { width: 84px; }

/* A tab, filter or search loading in place (owner report, 18 Oct 2026): the cards dim after a short moment, so a click is
   visibly taken even on a slow connection; a fast answer shows no flicker. */
#content[aria-busy="true"] .card, #content[aria-busy="true"] .stat { opacity: 0.55; transition: opacity 0.15s ease 0.12s; }
/* An error the server sent that has no field to sit under: at the top of the pop-up (never fail silently). */
.modal-body > .form-error { margin: 0 0 12px; }
[data-engine-previews][aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s ease 0.12s; }
.engine-state { display: flex; align-items: center; gap: 10px; margin: 0; }
/* Log call footer (owner decision, 18 Oct 2026): Cancel, then Resend link on the left; the saves on the right. */
.modal-foot > .btn-cancel:has(+ .foot-left) { margin-right: 0; }
.modal-foot > .foot-left { margin-right: auto; }
/* A table wider than its card (Signups, owner review 18 Oct 2026): the first column stays while the rest scrolls, and a
   soft shadow on the left or right edge shows there is more to see (hq.js sets data-more-left / data-more-right). */
.table.sticky-first th:first-child, .table.sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-card); }
.table.sticky-first thead th:first-child { background: var(--surface-header); }
.table.sticky-first tbody tr:nth-child(even) td:first-child { background: var(--surface-row-stripe); }
.table.sticky-first tbody tr:hover td:first-child { background: var(--surface-row-hover); }
.scroll-hint { position: relative; }
.scroll-hint[data-more-right] { box-shadow: inset -14px 0 12px -12px rgba(15, 23, 42, 0.25); }
.scroll-hint[data-more-left] .table.sticky-first td:first-child, .scroll-hint[data-more-left] .table.sticky-first th:first-child { box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.25); }

/* Dashboard, modern number cards and the month chart (owner decision, 18 Oct 2026; prototype "Dashboard: modern layout"). */
.kpi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* Four a row where each label, chip and note fit on one line; two on smaller laptops and tablets; one on a phone. */
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.report-period + .kpi-grid, .kpi-grid + .kpi-grid.section { margin-top: 16px; }
.stat.kpi { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 18px 16px; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 20px; }
.kpi-head .stat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-chip { flex: none; padding: 2px 6px; border-radius: 999px; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.kpi-chip.is-success { color: var(--success-text); background: var(--success-bg); }
.kpi-chip.is-danger { color: var(--danger-text); background: var(--danger-bg); }
.kpi-chip.is-neutral { color: var(--text-secondary); background: var(--neutral-bg, #F1F5F9); }
.kpi-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; }
.kpi-body .stat-value { margin-top: 0; min-width: 0; white-space: nowrap; }
.kpi .sparkline { flex: none; width: 120px; height: 36px; }
.kpi .stat-note { margin-top: 0; }
@media (max-width: 359px) { .kpi .sparkline { width: 88px; } }
.month-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.month-chart-legend { display: flex; gap: 16px; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.month-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-solid { display: inline-block; width: 16px; height: 3px; background: #0074D9; border-radius: 2px; }
.legend-last { display: inline-block; width: 16px; height: 2px; background: #94A3B8; border-radius: 2px; }
.month-chart { margin-top: 12px; overflow-x: auto; }
.month-chart svg { display: block; min-width: 560px; }
.month-chart-axis { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.month-chart-on-track { font-size: 11px; font-weight: 600; fill: #0074D9; }
.month-chart-dot { pointer-events: none; }
.month-chart-point { fill: transparent; cursor: pointer; outline: none; }
.month-chart-point:hover, .month-chart-point:focus-visible { fill: #0074D9; fill-opacity: 0.18; stroke: #0074D9; stroke-width: 2; }
.month-chart.is-waiting .line-draw { stroke-dasharray: 0 100; }
.month-chart.is-growing .line-draw { animation: hq-line-draw var(--hq-chart-draw) cubic-bezier(0.33, 1, 0.68, 1) both; }
.month-chart.is-waiting .month-chart-area, .month-chart.is-waiting .month-chart-projection { opacity: 0; }
.month-chart.is-growing .month-chart-area, .month-chart.is-growing .month-chart-projection { animation: hq-fade-in 300ms 200ms ease-out both; }
@keyframes hq-line-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
@keyframes hq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .month-chart .line-draw, .month-chart-area, .month-chart-projection { animation: none !important; } }

/* Reports, Monthly Income Trend option C (owner decisions, 18 Oct 2026). */
.income-trend-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.income-trend-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 1023px) { .income-trend-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .income-trend-cards { grid-template-columns: minmax(0, 1fr); } }
.income-trend-card { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-canvas); }
.income-trend-card .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.income-trend-card .caption.is-up { color: var(--success-text); }
.income-trend-card .caption.is-down { color: var(--danger-text); }
.income-trend-value { font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.income-trend-view { margin-top: 16px; }
.trend-line { overflow-x: auto; }
.trend-line svg { display: block; min-width: 640px; }
.trend-line-axis { font-size: 12px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.trend-line-axis.is-current { fill: var(--text-primary); font-weight: 600; }
.trend-line-axis.is-empty { fill: #94A3B8; }
.trend-line-on-track { font-size: 12px; font-weight: 600; fill: #0074D9; }
.trend-line-point { fill: transparent; cursor: pointer; outline: none; }
.trend-line-point:hover, .trend-line-point:focus-visible { fill: #0074D9; fill-opacity: 0.16; stroke: #0074D9; stroke-width: 2; }
.trend-line.is-waiting .line-draw { stroke-dasharray: 0 100; }
.trend-line.is-growing .line-draw { animation: hq-line-draw var(--hq-chart-draw) cubic-bezier(0.33, 1, 0.68, 1) both; }
.trend-line.is-waiting .trend-line-area, .trend-line.is-waiting .trend-line-projection, .trend-line.is-waiting .trend-line-on-track { opacity: 0; }
.trend-line.is-growing .trend-line-area, .trend-line.is-growing .trend-line-projection, .trend-line.is-growing .trend-line-on-track { animation: hq-fade-in 300ms 200ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .trend-line .line-draw, .trend-line-area, .trend-line-projection, .trend-line-on-track { animation: none !important; } }
/* Call Desk table, option B (owner decision, 19 Oct 2026): Status holds the outcome pill and, 10 px under it, why the
   customer is back in the queue as a small amber label; at 1280 px and wider the table fits its card: tighter columns,
   and long names, emails, workspaces and staff names end in "…" (full value on hover). Narrower screens scroll sideways. */
.queue-reason { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--warning-bg); color: var(--warning-text); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.call-status > div + .queue-reason { margin-top: 10px; }
.call-table .call-customer a.fits { display: inline-block; vertical-align: top; }
.call-table .call-customer .fits { max-width: 200px; }
.call-table .call-workspace .fits { max-width: 180px; }
.call-table .call-by .fits { max-width: 140px; }
.call-table .call-status { text-align: left; white-space: nowrap; }
@media (min-width: 1280px) {
    .call-table th, .call-table td { padding-left: 8px; padding-right: 8px; }
    .call-table th:first-child, .call-table td:first-child { padding-left: 16px; }
    .call-table th:last-child, .call-table td:last-child { padding-right: 16px; }
    .call-table .inline-copy { gap: 4px; }
    /* The three text columns share the room left by Phone, Invoice, Status and Actions, so they never push the table
       wider than its card; their text ends in "…" only when it does not fit. */
    .call-table td.call-customer, .call-table td.call-workspace, .call-table td.call-by { max-width: 0; }
    .call-table td.call-customer { width: 52%; }
    .call-table td.call-workspace { width: 38%; }
    .call-table td.call-by { width: 10%; }
    .call-table td.call-phone, .call-table td.call-invoice, .call-table td.call-status, .call-table td.actions { width: 1px; }
    .call-table .call-customer .fits, .call-table .call-workspace .fits, .call-table .call-by .fits { max-width: 100%; }
}

/* Action Queue, Start review one by one (owner decision, 19 Oct 2026): the toolbar's "<n> tasks to review" and Start
   review; in the task pop-up "Task 1 of <n>" with a thin progress bar on top; the red outline action; the summary. */
.review-progress { display: flex; flex-direction: column; gap: 6px; padding: 12px 24px 0; }
/* The top row while reviewing: "Task 1 of 3", Skip to next as a blue text link (no border, no background), the X at the right. */
.review-progress-row { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.review-progress-row .review-skip { height: 36px; padding: 0 8px; background: transparent; border: 0; color: var(--action-primary); font-weight: 600; }
.review-progress-row .review-skip:hover { background: transparent; text-decoration: underline; }
.review-progress-row .review-close { margin-left: auto; }
.task-detail-foot .review-foot-side { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.review-progress-text { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.review-bar { display: block; height: 4px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.review-bar > span { display: block; height: 100%; background: var(--action-primary); border-radius: inherit; }
.btn.btn-danger-outline { border-color: var(--danger-text); color: var(--danger-text); }
.review-summary .review-progress { padding: 0 0 16px; }
.review-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.review-counts > div { padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; }
.review-counts dt { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.review-counts dd { margin: 4px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; }
@media (max-width: 639px) { .review-counts { grid-template-columns: 1fr; } }

/* Below 640 px: every pop-up footer stacks its buttons full width, the primary one (last in the row) first. Groups inside the
   footer stack the same way, so the order reads primary, secondary, then the others (owner decision, 19 Oct 2026, night). */
@media (max-width: 639px) {
    .modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .modal-foot > .btn-cancel, .modal-foot > .foot-left { margin-right: 0; }
    .modal-foot .btn-row, .modal-foot .foot-group, .modal-foot .task-detail-actions, .modal-foot .review-foot-side, .modal-foot .foot-left { flex-direction: column-reverse; align-items: stretch; width: 100%; }
    .modal-foot form { display: flex; flex-direction: column; width: 100%; }
    .modal-foot .btn { width: 100%; justify-content: center; }
}