/* ============================================================
   TeamDesk design system — light / semi / dark
   Neutral enterprise palette, black primary actions, violet data accent.
   Every text/background pair in the three themes meets WCAG 2.1 AA.
   ============================================================ */

:root,
[data-theme="light"],
[data-theme="semi"] {
    --bg: #f3f3f5;
    --frame: #ffffff;
    --sidebar: #fafafb;
    --titlebar: #f3f3f5; /* installed-app window title bar (theme-color) */
    --surface: #ffffff;
    --surface-2: #f6f6f8;
    --surface-3: #ededf0;
    --radius: 5px;
    --border: #d0d5dd; /* ONE border colour per theme — cards, tables, inputs, buttons, dividers all use it */
    --border-strong: #d0d5dd;
    --border-input: #d0d5dd;
    --border-btn: #d0d5dd;
    --text: #101418;
    --text-2: #3d4047;
    --muted: #5f646d;
    --faint: #6f747d;
    --primary: #101418;
    --primary-hover: #2b2c31;
    --primary-text: #ffffff;
    --accent: #5b4ee0;
    --accent-soft: #efedfd;
    --success: #067662;
    --success-soft: #e8f6ef;
    --warning: #8a5200;
    --warning-soft: #fdf3e2;
    --danger: #d92d20;
    --danger-soft: #fef3f2;
    --info: #2563c9;
    --info-soft: #ebf2fe;
    --chart-1: #3d4047; /* charts and progress bars stay grey — no accent colour in the design */
    --chart-1-soft: rgba(16, 20, 24, .10);
    color-scheme: light;
}

[data-theme="dark"] {
    /* one neutral black behind everything (page, sidebar, top bar, cards, inputs); lines as quiet as the semi sidebar's */
    --bg: #1c1d21;
    --frame: #1c1d21;
    --sidebar: #1c1d21;
    --titlebar: #1c1d21;
    --surface: #1c1d21;
    --surface-2: #232428; /* hover and chips only: a hair lighter */
    --surface-3: #2a2b30;
    --border: #33353b;
    --border-strong: #33353b;
    --border-input: #33353b;
    --border-btn: #33353b;
    --text: #ebebee;
    --text-2: #c3c5cb;
    --muted: #a4a8b2;
    --faint: #979ba5;
    --primary: #f2f2f4;
    --primary-hover: #ffffff;
    --primary-text: #101418;
    /* status colours: desaturated so they inform without shouting; no purple accent (the design has none) */
    --accent: #c3c5cb;
    --accent-soft: rgba(195, 197, 203, .10);
    --success: #7fb896;
    --success-soft: rgba(127, 184, 150, .10);
    --warning: #cfae6b;
    --warning-soft: rgba(207, 174, 107, .10);
    --danger: #e5534b; /* a clear red — delete buttons and overdue dates must stand out on the black */
    --danger-soft: rgba(229, 83, 75, .12);
    --info: #92aecb;
    --info-soft: rgba(146, 174, 203, .10);
    --chart-1: #c3c5cb;
    --chart-1-soft: rgba(235, 235, 238, .10);
    color-scheme: dark;
}

/* Semi: light content with dark navigation */
[data-theme="semi"] .sidebar {
    --sidebar: #101418;
    --surface: #161a1f;
    --surface-2: #1b2026;
    --surface-3: #21262d;
    --border: #353b43; /* lines in the dark navigation (under the brand, above the user): visible, but quiet */
    --border-strong: #4d5560;
    --border-input: #4d5560;
    --border-btn: #4d5560;
    --text: #f5f6f8;
    --text-2: #c3c5cb;
    --muted: #a4a8b2;
    --faint: #979ba5;
    --primary: #f2f2f4;
    --primary-hover: #ffffff;
    --primary-text: #101418;
    --accent: #b0a7fb;
    --accent-soft: rgba(176, 167, 251, .16);
    --danger: #fca5a5;
    --danger-soft: rgba(252, 165, 165, .14);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01", "tnum";
}

/* scrollbars: thin rounded thumb on a transparent track, tinted from the theme text colour */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border: 2px solid transparent; border-radius: var(--radius); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 32%, transparent); }
@supports not selector(::-webkit-scrollbar) { /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent; }
}

a { color: inherit; text-decoration: none; }
a.link { color: inherit; text-decoration: none; } /* no underlines anywhere — links read by hover only */
a.link:hover { color: var(--text-2); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.012em; }

p { margin: 0; }

code, kbd {
    font-family: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: .92em;
}

code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1px 6px;
}

kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius);
    padding: 0 6px;
    font-size: 11px;
    color: var(--muted);
    line-height: 18px;
}

.i { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -.2em; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.strong { font-weight: 600; color: var(--text); }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cell-trunc { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* One consistent, visible keyboard focus indicator everywhere. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--text-2);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 100;
    padding: 8px 12px;
    background: var(--primary);
    color: var(--primary-text);
    border-radius: var(--radius);
    font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ---------- app shell ---------- */

.frame {
    display: flex;
    min-height: 100vh;
    background: var(--frame);
}

.sidebar {
    width: var(--sidebar-w, 252px); /* set by the drag handle (app.js), restored by theme.js */
    flex-shrink: 0;
    align-self: flex-start;
    background: var(--sidebar);
    color: var(--text);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden; /* brand and user block stay put; only the menu (.sidebar .nav) scrolls */
    transition: width .18s ease;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 14px 14px 18px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-text);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.brand-name { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; min-width: 0; flex: 1; } /* a little air between the app and the company */
.brand-name strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { flex: 1; padding: 4px 12px 12px; }
.sidebar .nav { padding-top: 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* the brand's line is right above; search lives in the top bar. The only scrolling part of the sidebar */

.nav-section > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 6px;
    cursor: pointer;
    user-select: none;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
}
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary .i { width: 14px; height: 14px; color: var(--faint); transition: transform .15s; }
.nav-section:not([open]) > summary .i { transform: rotate(-90deg); }

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: var(--radius);
    color: var(--text-2);
    font-weight: 500;
    line-height: 1.3;
    position: relative;
}
.nav-link .i { color: var(--muted); }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.nav-link.active .i { color: var(--text); }
.nav-link .count { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sidebar-foot {
    border-top: 1px solid var(--border);
    padding: 12px 12px 12px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.user-chip { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 6px; border-radius: var(--radius); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-meta strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--muted); font-size: 11.5px; }
/* search is the last top-bar button (a field in its place on the search page); Ctrl K opens it */
.sidebar .brand { box-sizing: border-box; height: 61px; flex-shrink: 0; padding: 0 12px 0 18px; border-bottom: 1px solid var(--border); } /* as tall as the top bar, so the two lines run as one — and never squeezed when the menu is taller than the window (the menu scrolls instead) */
.sidebar .sidebar-foot { flex-shrink: 0; }

/* collapsed sidebar */
html[data-nav="collapsed"] .sidebar { width: 68px; }
html[data-nav="collapsed"] .sidebar .brand { flex-direction: column; justify-content: center; gap: 4px; padding: 0; } /* mark and expand button stacked inside the same 61px */
html[data-nav="collapsed"] .brand-mark, html[data-nav="collapsed"] #nav-collapse { width: 28px; height: 28px; }
html[data-nav="collapsed"] .brand-mark { font-size: 13px; }
html[data-nav="collapsed"] .brand-name,
html[data-nav="collapsed"] .nav-section > summary,
html[data-nav="collapsed"] .nav-link .label,
html[data-nav="collapsed"] .nav-link .count,
html[data-nav="collapsed"] .user-meta { display: none; }
html[data-nav="collapsed"] .nav { padding: 8px; }
html[data-nav="collapsed"] .nav-link { justify-content: center; padding: 9px 0; }
html[data-nav="collapsed"] #nav-collapse .i { transform: rotate(180deg); }
html[data-nav="collapsed"] .sidebar-foot { flex-direction: column; padding: 10px 8px; }
html[data-nav="collapsed"] .sidebar-resizer { display: none; }

/* drag handle on the sidebar's edge — zero layout width, sits over the border */
.sidebar-resizer { position: sticky; top: 0; align-self: flex-start; flex-shrink: 0; width: 7px; height: 100vh; margin: 0 -4px 0 -3px; z-index: 5; cursor: col-resize; }
.sidebar-resizer:focus-visible, .split-resizer:focus-visible { outline: 0; } /* the col-resize cursor is the only feedback — no bars, no rings */
body.resizing { cursor: col-resize; user-select: none; }

/* ---------- avatars ---------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
    color: #fff;
    background: #5f646d;
    letter-spacing: .01em;
}
.avatar.c0 { background: linear-gradient(135deg, #5b4ee0, #4a3fc7); }
.avatar.c1 { background: linear-gradient(135deg, #b25a10, #94480c); }
.avatar.c2 { background: linear-gradient(135deg, #0b7d3c, #096a33); }
.avatar.c3 { background: linear-gradient(135deg, #2563c9, #1d4fa6); }
.avatar.c4 { background: linear-gradient(135deg, #c02b31, #a12227); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.avatar-edit-text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.avatar-edit-actions { display: flex; align-items: center; gap: 8px; }
.avatar-edit form { display: contents; }

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar-more { background: var(--surface); color: var(--muted); border: 1px dashed var(--border-strong); }

/* ---------- main / topbar ---------- */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--frame); }
@media (min-width: 921px) { /* desktop: the top bar stays put and only the page below it scrolls — its scrollbar starts under the top bar, like the sidebar's menu */
    .main { height: 100vh; overflow: hidden; }
    .main > .content { flex: 1; min-height: 0; overflow-y: auto; }
    /* the app window itself never scrolls — only the page area and the sidebar menu do. Anything briefly taller (a card being
       dragged, a re-render) could otherwise scroll the whole app, sidebar and top bar included, and leave an empty strip below */
    html:has(body > .frame), body:has(> .frame) { overflow: hidden; }
    .main { position: relative; overflow: clip; } /* clip: not scrollable by script either, so the top bar cannot slide away */
}

.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    box-sizing: border-box;
    min-height: 61px; /* the same height on every page, level with the sidebar brand block so their lines meet */
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--frame);
    z-index: 20;
}

.crumbs { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 96px; font-size: 13.5px; }
.crumbs .crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); padding: 6px 8px; border-radius: var(--radius); min-width: 0; flex: 0 1 auto; }
.crumbs .crumb .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a.crumb { max-width: 180px; }
.crumbs a.crumb:hover { color: var(--text); } /* only the text darkens, no fill */
.crumbs .crumb.current { color: var(--text); font-weight: 500; max-width: 360px; }
.crumbs .sep { color: var(--faint); display: inline-flex; flex-shrink: 0; }
.crumbs .sep .i { width: 14px; height: 14px; }

.gsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 300px;
    min-width: 120px;
    height: 36px;
    padding: 0 10px 0 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    margin-left: auto;
}
.gsearch:focus-within { background: var(--surface); }
.gsearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.gsearch input::placeholder { color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* one 10px rhythm between search, themes, actions and filter */
.topbar-actions .page-actions { gap: 10px; }
[data-theme="dark"] .topbar { background: var(--sidebar); } /* dark: the top bar is as black as the navigation (semi keeps it white) */
[data-theme="semi"] { --titlebar: #101418; }

.theme-switch {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
}
.theme-switch button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    height: 30px;
    padding: 0 9px; /* icon only — the theme name lives in title/aria-label */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius);
    cursor: pointer;
}
.theme-switch button .i { width: 14px; height: 14px; }
.theme-switch button.on { background: var(--surface); color: var(--text); border-color: var(--border); }

.icon-btn.nav-toggle { display: none; }
.backdrop { display: none; }

/* ---------- content & page header ---------- */

.content { padding: 26px 28px 40px; width: 100%; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin-bottom: 26px; }
.page-head-text { flex: 1 1 320px; min-width: 0; }
.page-title { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.page-sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
/* record titles: icon tile, title, tagline — a page's head and sections like a contact's company look exactly alike */
.title-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title-block > .min-w-0 { min-width: 0; }
.title-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); }
.title-icon .i { width: 18px; height: 18px; }
.title-block .page-title { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.title-block .page-sub { margin-top: 2px; font-size: 13px; }
.page-head .avatar-stack { margin-top: 6px; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.btn .i { width: 15px; height: 15px; }
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--surface-2); border-color: var(--border-btn); color: var(--text); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-btn); }
.btn-icon { width: 36px; padding: 0; } /* page-title actions: icon only, the label lives in title/aria-label */
.btn-icon .i { width: 17px; height: 17px; }
.btn-plain { background: transparent; color: var(--text-2); }
.btn-plain:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); border-color: var(--border); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius); }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.bordered { border-color: var(--border-strong); background: var(--surface); }
.icon-btn .i { width: 16px; height: 16px; }

.inline-form { display: inline; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.field.new-row { grid-column: 1; }

.field input, .field select, .field textarea, .input, .select {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    height: 40px;
    padding: 0 12px;
    outline: none;
    width: 100%;
    transition: border-color .12s, box-shadow .12s;
}
.field textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field input[type="file"] { padding: 7px 12px; }
.field input:disabled { color: var(--muted); background: var(--surface-2); border-color: var(--border-strong); }
.select { width: auto; height: 36px; padding-right: 30px; }

/* customizable select (Chromium 135+): the open list is styled like our cards; other browsers keep the native picker */
@supports (appearance: base-select) {
    .field select, .select, ::picker(select) { appearance: base-select; }
    .field select, .select { display: inline-flex; align-items: center; gap: 8px; padding-right: 10px; }
    ::picker(select) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-top: 4px; }
    option { padding: 8px 10px; border-radius: var(--radius); font: inherit; color: var(--text); }
    option:hover, option:focus-visible { background: var(--surface-2); outline: none; }
    option:checked { font-weight: 600; }
    option::checkmark { color: var(--muted); }
    .field select::picker-icon, .select::picker-icon { content: ''; width: 14px; height: 14px; margin-left: auto; background-color: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat; }
    select:open::picker-icon { rotate: 180deg; }
}
.input { height: 36px; }

:root { --field-gap: 16px; } /* one vertical rhythm between form fields: page forms, sign-in pages and modals */
.stack { display: flex; flex-direction: column; gap: var(--field-gap); }
.stack > .btn-block { margin-top: 6px; } /* a little more air before the submit button, same as .form-actions */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--field-gap) 24px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; } /* no divider above the buttons — the fields end, the buttons follow */
.content > .form-card > .card-head { display: none; } /* single-form pages: the top bar already names the page */
.content > .form-card > .card-body { padding-top: 0; }
.form-card .card-body { padding: 24px; }

/* notifications settings */
.channel-row { display: flex; gap: 8px; }
.channel-row input { flex: 1; min-width: 0; }
.checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
/* every checkbox is a switch — except hidden inputs behind their own control (letter picker, file pickers) */
input[type="checkbox"]:not(.sr-only):not(.letter-pick *) { appearance: none; -webkit-appearance: none; position: relative; display: inline-block; flex-shrink: 0; box-sizing: border-box; width: 34px; height: 20px; margin: 0; border: 1px solid var(--border-input); border-radius: 10px; background: var(--surface-3); vertical-align: middle; cursor: pointer; transition: background-color .15s, border-color .15s; }
input[type="checkbox"]:not(.sr-only):not(.letter-pick *)::before { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: transform .15s, background-color .15s; }
input[type="checkbox"]:not(.sr-only):not(.letter-pick *):checked { border-color: var(--primary); background: var(--primary); }
input[type="checkbox"]:not(.sr-only):not(.letter-pick *):checked::before { transform: translateX(14px); background: var(--primary-text); }
input[type="checkbox"]:not(.sr-only):not(.letter-pick *):focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
input[type="checkbox"]:not(.sr-only):not(.letter-pick *):disabled { opacity: .5; cursor: default; }
.field-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); }
.field-note .i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--success); }
.field-note.is-error, .field-note.is-error .i { color: var(--danger); }
table.events td.pick { width: 200px; }
table.events td.pick .select { width: 100%; } /* one width for every event's channel select */
table.events .select { height: 32px; }
/* settings tables need no column headings — the section intro names them (kept for screen readers) */
.settings-section > .table-wrap table.data > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table.data tr.group th { padding: 18px 16px 4px; background: transparent; color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left; border-bottom: 0; } /* a quiet label over its rows, no line of its own */
table.data tbody:has(+ tbody > tr.group:first-child) > tr:last-child > td, table.data tr:has(+ tr.group) > td { border-bottom: 0; } /* the next group's label separates the groups, no line above it */
table.data tbody + tbody > tr.group:first-child th, table.data tr:not(.group) + tr.group th { padding-top: 10px; } /* after a row: its own bottom padding plus 10px makes the same room as the first label has under the line */
/* audit log: a day is a quiet heading — the day in text colour, its date and how many events it holds in grey */
table.data tr.day-row th { padding-top: 16px; padding-bottom: 14px; color: var(--text); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
table.data tbody > tr.day-row:first-child th { padding-top: 16px; }
table.data tr.day-row .day-date, table.data tr.day-row .day-count { margin-left: 10px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
table.data tr.day-row .day-count::before { content: '·'; margin-right: 10px; color: var(--faint); }
table.data tr.day-row .day-name + .day-count { margin-left: 10px; }
table.channels .input { flex: 1; min-width: 0; height: 36px; }
table.channels .name-cell { display: flex; align-items: center; gap: 12px; }
table.channels td.actions:empty::after { content: ''; display: inline-block; width: 36px; } /* the add row keeps the column width */
table.channels td.col-title { padding-right: 0; } /* the test button sits as close to its field as the icon on the other side */
table.data.channels td, table.data.events td { border-bottom: 0; } /* settings lists: fields in rows, no lines between them */
table.data.channels tbody tr td, table.data.channels tbody tr td.actions { padding-top: 4px; padding-bottom: 4px; } /* rows of fields sit close together */
table.data.channels tbody tr:first-child td { padding-top: 16px; }
table.data.channels tbody tr:last-child td { padding-bottom: 16px; }
table.data.events tbody tr td, table.data.events tbody tr td.pick { padding-top: 6px; padding-bottom: 6px; }
.settings-section > .table-wrap table.data.events tr.group th { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* group titles keep their lines, the events between them do not */
.settings-section > .table-wrap table.data.events > tbody:first-of-type > tr.group:first-child th { border-top: 0; padding-top: 12px; }
table.data.events tr.group + tr td { padding-top: 12px; }
table.data.events tr:has(+ tr.group) td, table.data.events tbody:has(+ tbody) > tr:last-child td { padding-bottom: 12px; }
.settings-count { margin-left: 2px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.settings-intro p + p { margin-top: 12px; }
.settings-status { display: flex; align-items: flex-start; gap: 8px; color: var(--success) !important; font-size: 12.5px !important; }
.settings-status .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.settings-status.is-error { color: var(--danger) !important; }
.settings-status.is-idle { color: var(--muted) !important; }

/* ---------- toolbar / tabs ---------- */

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .input { width: 240px; }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.filter-bar .gsearch { margin-left: 0; flex: 0 0 260px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* list filters: one icon button after the page actions, the fields drop down underneath */
.filter-drop { position: relative; flex-shrink: 0; }
.filter-drop > summary { list-style: none; position: relative; }
.filter-drop > summary::-webkit-details-marker { display: none; }
.filter-drop > summary .pill { position: absolute; top: -6px; right: -6px; }
.filter-drop[open] > summary { background: var(--surface-3); }
/* a top-bar button with a short list of links (layouts/app.php 'menu'), e.g. Download → Excel, CSV, JSON */
.action-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 170px; padding: 4px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-btn); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.action-menu-item { display: block; padding: 8px 10px; border-radius: var(--radius); color: var(--text); font-size: 13px; text-decoration: none; white-space: nowrap; }
.action-menu-item:hover, .action-menu-item:focus-visible { background: var(--surface-3); outline: 0; }
.filter-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: 300px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border-btn); border-radius: var(--radius); }
.filter-panel .gsearch { width: 100%; flex-basis: auto; }
.filter-panel .select { width: 100%; }
.filter-panel .filter-date { margin: 0; }
.filter-panel .filter-date .input { box-sizing: border-box; width: 100%; } /* the day, as wide as the other filters */
.filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* Custom dates: From and To side by side, right under the period */
.filter-panel-actions { display: flex; gap: 8px; padding-top: 4px; }
/* its buttons keep their words; Search is the filled one (black on light themes, white on dark) */
.frame .filter-panel .btn { width: auto; padding: 0 14px; gap: 7px; font-size: 13px; line-height: 1; }
.frame .filter-panel .btn .i { width: 15px; height: 15px; }
.frame .filter-panel .btn-primary { background: var(--primary); color: var(--primary-text); }
.frame .filter-panel .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }

/* tabs read like the navigation: no frame around them, the current one on a soft fill */
.tabs { display: inline-flex; gap: 4px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius); color: var(--text-2); font-weight: 500; font-size: 14px; } /* the height of the buttons beside them, the type of the navigation */
.tabs a .i { width: 16px; height: 16px; color: var(--muted); }
.tabs a .count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tabs a.on .i { color: var(--text); }
.tabs a:not(.on) { opacity: .6; } /* the other tabs step back */
.tabs a:hover { color: var(--text); opacity: 1; }
.tabs a.on { color: var(--text); box-shadow: inset 0 -2px var(--text); border-radius: 0; } /* the current tab is underlined, not filled */

/* ---------- cards ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.grid-12 .card, .vstack .card { margin-bottom: 0; }

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 52px;
    border-bottom: 0;
}
.card-head h2 { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.card-head h2 .i { color: var(--text-2); }
.card-head h2 .sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.card-head .count { color: var(--muted); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.card-head .tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.card-body { padding: 16px; flex: 1; }
.card-body.tight { padding: 0; }
/* explanatory notes: a quiet callout with an info icon */
.panel-note { position: relative; max-width: 860px; margin: 16px 0 0; padding: 11px 14px 11px 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.55; }
.panel-note::before { content: ''; position: absolute; left: 14px; top: 13px; width: 16px; height: 16px; background-color: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat; }
.panel-note code, dialog.dialog .dialog-text code { padding: 1px 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 12px; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.vstack { display: flex; flex-direction: column; gap: 16px; }
.vstack > .card { flex: 1; }

/* ---------- KPIs & charts ---------- */

.kpi-row { display: flex; gap: 28px; flex-wrap: wrap; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
a.kpi-value:hover { color: var(--text-2); }
.kpi-value.alert { color: var(--danger); }
.kpi-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi-label .i { width: 13px; height: 13px; }
.kpi-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.kpi-label .dot.progress { background: var(--chart-1); }
.kpi-label .dot.done { background: var(--success); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.delta .i { width: 13px; height: 13px; }

.kpi-with-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi-with-chart .chart-bars { flex-shrink: 0; }
.stat { display: flex; align-items: center; gap: 14px; }
.stat .kpi-value { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface-3); font-size: 24px; }
.stat .kpi-value.alert { background: var(--danger-soft); }
.stat .kpi { gap: 3px; min-width: 0; }
.stat .delta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.seg-bar { display: flex; height: 44px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); margin-top: 16px; }
.seg-bar .seg { height: 100%; min-width: 2px; transition: width .3s; }
.seg-bar .seg.todo { background: linear-gradient(90deg, var(--surface-3), var(--border-strong)); }
.seg-bar .seg.progress { background: linear-gradient(90deg, #6a5be6, #a89ffa); }
.seg-bar .seg.done { background: linear-gradient(90deg, #0b7d3c, #4ade80); }
.seg-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 6px; }

.chart-bars rect { fill: var(--chart-1); fill-opacity: .35; }
.chart-bars rect[data-last="1"] { fill-opacity: 1; }
.chart-area { width: 100%; height: 110px; display: block; }
.chart-area .area { fill: var(--chart-1-soft); }
.chart-area .line { stroke: var(--chart-1); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 4px; }

.quota { margin-top: 10px; }
.quota .progress { width: 100%; display: block; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; position: relative; } /* keeps absolutely positioned screen-reader text inside the scroller instead of widening the page */

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 10px 16px;
    line-height: 16px; /* a whole-pixel 37px header row: record pages line the title block's 92px up with header + first row */
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface);
}
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: break-word; } /* words stay whole — a squeezed table scrolls in its .table-wrap instead of splitting e-mails mid-word */
table.data td.actions, table.data th.actions { text-align: right; white-space: nowrap; width: 1%; } /* shrink-to-fit, to the right: the last button lines up in every row, however many there are */
table.data td.actions form { display: inline; }
table.data td.actions .btn + .btn, table.data td.actions form + form, table.data td.actions .btn + form, table.data td.actions form + .btn { margin-left: 4px; }
table.data th.col-title, table.data td.col-title { min-width: 240px; }
table.data td.num { font-variant-numeric: tabular-nums; } /* numbers stay left-aligned like every other column */
/* names, badges, flags and dates never break mid-word — the title column is the one that wraps */
table.data .name-cell, table.data td .badge, table.data td .flag, table.data td .chip, table.data td.nowrap { white-space: nowrap; overflow-wrap: normal; }
table.data .name-cell:has(> .row-icon) { white-space: normal; overflow-wrap: anywhere; } /* titles with an icon tile wrap instead of overflowing narrow columns */
.content.split table.data th.col-title, .content.split table.data td.col-title { min-width: 170px; }
.content.split table.data td, .content.split table.data th { padding-left: 12px; padding-right: 12px; }
.row-link, .row-title { color: var(--text); font-weight: 500; overflow-wrap: anywhere; } /* one title style for every list row, a link or not */
.row-link:hover { color: var(--text-2); }
.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hstack { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.checklist .sub-row { display: flex; align-items: center; gap: 10px; }
.checklist .sub-files { list-style: none; margin: 6px 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.checklist .sub-files li { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
.checklist .sub-files .link { display: inline-flex; align-items: center; gap: 5px; }
.checklist .sub-files .link .i { width: 13px; height: 13px; }
.checklist li.done .title { color: var(--muted); text-decoration: line-through; }
.checklist .title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.checklist .sub-row > form { display: contents; }
.checklist .sub-row { flex-wrap: wrap; }
.checklist .check { display: inline-flex; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.checklist li.done .check { color: var(--success); }
.checklist .check .i { width: 18px; height: 18px; }
.checklist-add { display: flex; gap: 8px; padding: 12px 16px; }
.checklist-add .input { flex: 1; height: 36px; } /* as tall as the add button beside it */

/* Gantt timeline: bar positions come from data-left / data-width via app.js */
.gantt { overflow-x: auto; }
.gantt-inner { min-width: calc(var(--weeks, 6) * 72px + 260px); }
.gantt-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-head { background: var(--surface-2); }
.gantt-label { display: flex; align-items: center; gap: 10px; padding: 9px 16px; min-width: 0; position: sticky; left: 0; z-index: 2; background: var(--frame); border-right: 1px solid var(--border); } /* task names stay put while the weeks scroll sideways */
.gantt-text { flex: 1; min-width: 0; }
.gantt-text .row-link { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gantt-scale { display: grid; grid-template-columns: repeat(var(--weeks, 6), 1fr); align-items: stretch; height: 100%; min-height: 36px; font-size: 11px; color: var(--muted); }
.gantt-scale span { display: flex; align-items: center; padding-left: 6px; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; } /* full height: each week line runs through the header and on into the rows; lines close a week, the name column's border opens the first */
.gantt-track { position: relative; min-height: 44px; background: repeating-linear-gradient(to right, transparent 0 calc(100% / var(--weeks, 6) - 1px), var(--border) calc(100% / var(--weeks, 6) - 1px) calc(100% / var(--weeks, 6))); } /* a line at the end of each week, like the header */
.gantt { cursor: grab; }
.gantt.is-panning { cursor: grabbing; user-select: none; }
.gantt a { cursor: pointer; }
/* .gantt-track > so the kind classes (.progress, .done…) never pick up the size of the global .progress meter */
.gantt-track > .gantt-bar { position: absolute; top: 50%; height: 18px; margin-top: -9px; border-radius: var(--radius); background: var(--faint); overflow: visible; vertical-align: baseline; }
.gantt-bar.progress { background: var(--text-2); }
.gantt-bar.done { background: var(--success); }
.gantt-bar.overdue { background: var(--danger); }
.gantt-bar.project { background: var(--text-2); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); opacity: .7; }
.gantt-legend { display: flex; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.gantt-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--faint); }
.gantt-legend .dot.progress { background: var(--text-2); }
.gantt-legend .dot.done { background: var(--success); }
.gantt-legend .dot.overdue { background: var(--danger); }
.sub-line { color: var(--muted); font-size: 12.5px; margin-top: 1px; overflow-wrap: anywhere; }
.sub-line.cell-trunc { display: block; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; color: var(--muted); text-align: center; font-size: 13.5px; }
.empty .i { width: 22px; height: 22px; color: var(--faint); }
.empty a { color: inherit; text-decoration: none; font-weight: 600; }

/* ---------- badges, flags, chips ---------- */

/* Status badges, priority flags and date chips read as plain text: no frame, no icon, the text colour of the line they sit in.
   Only what needs attention (urgent, overdue, refused) keeps the red text. */
.badge, .flag, .chip {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}
:is(.badge, .flag, .chip) .i { display: none; }
.badge-red, .flag.urgent, .chip.overdue { color: var(--danger); }

.progress { width: 96px; height: 6px; border-radius: var(--radius); background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; }
.progress i { display: block; height: 100%; background: var(--chart-1); border-radius: var(--radius); }
/* in the record-page profile column the bar runs the full width, the "x/y done" label sits at its end */
.content.split .record-main .prop dd:has(> .progress) { display: flex; align-items: center; gap: 10px; }
.content.split .record-main .prop dd > .progress { flex: 1; width: auto; }

/* ---------- flash ---------- */

.flash { display: flex; align-items: center; gap: 10px; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-weight: 500; font-size: 13.5px; }
.flash .i { flex-shrink: 0; }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash > span { flex: 1; min-width: 0; }
/* lead domains are copy buttons (never opened on this computer) that look like the row's title link */
button.lead-copy { padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: copy; }
button.link.lead-copy { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.copy-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius); background: var(--primary); color: var(--primary-text); font-size: 13px; line-height: 1.45; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .copy-toast { transition: none; } }
.flash-close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.flash-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.flash-close .i { width: 15px; height: 15px; }

/* ---------- properties (detail pages) ---------- */

.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px 24px; margin: 0; }
.prop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prop dt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prop dt .i { width: 13px; height: 13px; }
.prop dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; } /* values read as normal text — labels carry the emphasis */
.prose { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); line-height: 1.6; }
.notes-block { margin: 18px -16px 0; padding: 16px 16px 0; border-top: 1px solid var(--border); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; align-items: start; }

/* ---------- kanban board ---------- */

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }
.board-col { min-width: 0; }
.board-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.board-col-head .col-name { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; font-size: 13.5px; }
.board-col-head .col-name .i { width: 15px; height: 15px; color: var(--muted); }
.board-col-head .col-name .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.board-col-head .icon-btn { margin-left: auto; }
.board-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 80px; }
.board-col-body .empty { padding: 24px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 13px; }

.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 10px; }
.tcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-height: 24px; }
.tcard-top .flag { margin-right: auto; }
.tcard-top .avatar { margin-left: auto; }
.tcard-title { display: block; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.tcard-title:hover { color: var(--text-2); }
.tcard-sub { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.tcard-sub .i { width: 13px; height: 13px; color: var(--faint); }
.tcard-meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.tcard-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.tcard-foot .meta { display: inline-flex; align-items: center; gap: 4px; }
.tcard-foot .meta .i { width: 13px; height: 13px; }
.tcard-actions { display: flex; gap: 6px; margin-top: 10px; }
@media (hover: hover) { /* with a mouse a card is dragged to another stage (app.js); touch screens keep the buttons */
    .tcard-actions { display: none; }
    .tcard[draggable="true"] { cursor: grab; }
}
.tcard.is-dragging { opacity: .45; }
.board-col-body.is-over { outline: 1px dashed var(--border-strong); outline-offset: 6px; border-radius: var(--radius); }

/* ---------- vault / secrets / dialogs ---------- */

.secret-mask { display: none; } /* masked secrets show nothing at all — the value appears only after Reveal */
.secret-value { font-family: Consolas, monospace; user-select: all; overflow-wrap: anywhere; }
.secret-value[data-ttl]::after { content: attr(data-ttl) " s"; color: var(--muted); font-family: inherit; font-size: 11px; margin-left: 6px; letter-spacing: 0; }
.otp.secret-value { font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

details.panel { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
details.panel > summary { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-weight: 500; font-size: 12.5px; cursor: pointer; list-style: none; }
details.panel > summary:hover { background: var(--surface-3); }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary .i { width: 15px; height: 15px; color: var(--muted); }
details.panel[open] > summary { background: var(--surface-3); }
details.panel .panel-body { padding: 16px 0 0; }

dialog.dialog {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    text-align: left;
    white-space: normal;
    font-size: 13.5px;
    font-weight: 400;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0;
    background: var(--surface);
    color: var(--text);
}
dialog.dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog.dialog .dialog-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
dialog.dialog .dialog-head .icon-btn { margin-left: auto; }
dialog.dialog .dialog-body { padding: 16px; }
/* modal anatomy: head strip, two-column field grid, footer strip — every divider runs edge to edge */
dialog.dialog { width: min(480px, calc(100vw - 32px)); }
dialog.dialog .dialog-head { padding: 14px 20px; font-weight: 600; }
dialog.dialog .dialog-body { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--field-gap) 16px; align-items: start; }
dialog.dialog .dialog-body > .span-2, dialog.dialog .dialog-body > .checkbox { grid-column: 1 / -1; }
dialog.dialog .dialog-body .field > span { font-size: 12px; }
dialog.dialog .dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
/* the confirmation's buttons say what they do (Delete / Cancel), not two icons that both read as "no" */
dialog.dialog-confirm .dialog-foot .btn { width: auto; min-width: 0; padding: 0 14px; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1; }
dialog.dialog-confirm .dialog-foot .btn > span { display: inline-flex; }
dialog.dialog-confirm .dialog-foot .btn .i { width: 15px; height: 15px; }
dialog.dialog-confirm .dialog-foot .btn-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
dialog.dialog-confirm .dialog-foot .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
dialog.dialog .dialog-foot .hint { margin-right: auto; font-size: 12.5px; color: var(--muted); }
dialog.dialog .dialog-text { display: block; color: var(--text-2); line-height: 1.6; } /* explanations read as paragraphs, not as a field grid */
dialog.dialog .dialog-text p { margin: 0 0 12px; }
dialog.dialog .dialog-text p:last-child { margin-bottom: 0; }

/* ---------- search results ---------- */

.result-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.result-item:last-child { border-bottom: 0; }
/* search page: one quiet full-width field, then the result groups with a line across the page between them */
/* search page: the field sits in the top bar; with nothing to list, one calm block in the middle of the page */
.topbar .gsearch.topbar-search { flex: 1 1 auto; min-width: 0; margin: 0; } /* takes the breadcrumb's place and the whole width; beats the narrower .gsearch widths at small breakpoints */
.search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: calc(100vh - 140px); padding: 32px 24px; text-align: center; }
.search-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); }
.search-empty-mark .i { width: 22px; height: 22px; }
.search-empty h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.search-empty p { margin: 0; max-width: 420px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.search-empty .search-empty-hint { margin-top: 14px; font-size: 12.5px; }
.search-empty kbd { display: inline-flex; align-items: center; min-width: 22px; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-family: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; justify-content: center; }
.search-group { border-bottom: 1px solid var(--border); }
.search-group-head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 20px 28px 8px; }
.search-group-head > .i { width: 16px; height: 16px; color: var(--text-2); }
.search-group-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.search-group-head .count { color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.search-group-head .btn { margin-left: auto; }
.search-group .result-item { padding: 12px 28px; }
@media (max-width: 920px) {
    .search-group-head, .search-group .result-item { padding-left: 14px; padding-right: 14px; }
}
.result-item .i { color: var(--muted); }
.result-item .title { font-weight: 500; overflow-wrap: anywhere; }
.result-item .meta { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* ---------- guest (login) ---------- */

.guest-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.guest-wrap { width: 100%; max-width: 400px; padding: 24px; }
.guest-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; font-size: 16px; font-weight: 600; }
.guest-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.guest-title { font-size: 20px; margin-bottom: 4px; }
.guest-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; }
.guest-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }
/* 6-digit codes as six boxes (app.js fills the real input, which stays in the form but out of sight) */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.field .otp .otp-box { box-sizing: border-box; width: 100%; min-width: 0; height: 52px; padding: 0; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 22px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--text); outline: none; }
.field .otp .otp-box:focus { border-color: var(--border-input); outline: none; box-shadow: none; } /* the active box looks like the others: only the blinking cursor shows it */
.field .otp.is-invalid .otp-box { border-color: var(--danger); }
.field .otp-source { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ---------- chat: conversation list | thread, each scrolling on its own ---------- */
.content.chat-content { padding: 0; }
body:has(.content.chat-content) .quick { display: none; } /* the floating + would sit on the Send button */
.chat { position: relative; display: grid; grid-template-columns: var(--chat-list-w, 300px) minmax(0, 1fr); min-height: calc(100vh - 62px); }
/* the handle sits on the line between the two columns without being a grid item of its own — as one it would take a cell */
.chat-list-resizer { position: absolute; top: 0; bottom: 0; left: calc(var(--chat-list-w, 300px) - 3px); width: 7px; cursor: col-resize; z-index: 5; }
.chat-list-resizer:focus-visible { outline: 0; }
@media (min-width: 921px) {
    .main.chat-main { height: 100vh; overflow: hidden; }
    .main.chat-main .content { flex: 1; min-height: 0; }
    .chat { height: 100%; min-height: 0; }
    .chat-list, .chat-thread { min-height: 0; }
    .chat-list-items, .chat-messages { overflow-y: auto; }
}
.chat-list { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--border); }
.chat-list-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
/* choosing conversations to delete: a round check before each row; the head shows the count and what to do */
.chat-list-tools { display: flex; align-items: center; gap: 10px; }
.chat-list-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chat-item-check { display: none; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--border-btn); border-radius: 50%; color: transparent; }
.chat-item-check .i { width: 12px; height: 12px; }
.chat-list.is-selecting .chat-item-check { display: inline-flex; }
.chat-list.is-selecting .chat-item.is-picked .chat-item-check { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.chat-list-head, .chat-thread-head { box-sizing: border-box; height: 68px; padding-top: 0; padding-bottom: 0; } /* one height for both heads, so their lines run as one across the divider */
.chat-list-empty { margin: 0; padding: 24px; color: var(--muted); font-size: 13px; }
.chat-list-items { flex: 1; }
/* sections (team chats, people, customers): a quiet label, items as rows without lines, one divider between sections */
.chat-list-section { padding-top: 0; }
.chat-list-section + .chat-list-section { border-top: 1px solid var(--border); }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 24px; color: var(--text); text-decoration: none; } /* full-width rows: the highlight runs edge to edge */
.chat-item:hover { background: var(--surface-2); }
.chat-item.on { background: var(--surface-3); box-shadow: inset 0 1px var(--border), inset 0 -1px var(--border); } /* a line above and below, drawn inside so the list does not move */
/* never two lines on top of each other: under a heading or the list head there is a line already, and the next section starts with one */
:is(.chat-item.on:first-child, .chat-list-group + .chat-item.on) { box-shadow: inset 0 -1px var(--border); }
.chat-list-section:not(:last-child) > .chat-item.on:last-child { box-shadow: inset 0 1px var(--border); }
.chat-list-section:not(:last-child) > .chat-list-group + .chat-item.on:last-child { box-shadow: none; }
.chat-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-item-title { font-size: 13.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-item-last { color: var(--muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.chat-item-meta time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chat-item-pin { display: inline-flex; color: var(--muted); }
.chat-item-pin .i { width: 13px; height: 13px; }
.chat-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: var(--primary-text); font-size: 11px; font-weight: 600; }
.chat-group-avatar { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.chat-group-avatar .i { width: 15px; height: 15px; }
.chat-thread { display: flex; flex-direction: column; min-width: 0; }
.chat-thread > .search-empty { flex: 1; min-height: 0; }
.chat-start { width: auto !important; padding: 0 14px !important; gap: 8px !important; font-size: 13px !important; }
.chat-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.chat-thread-head > .min-w-0 { flex: 1; }
.chat-thread-title { margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-thread-sub { margin: 1px 0 0; color: var(--muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-call-buttons { display: flex; gap: 8px; }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.chat-first { margin: auto 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.chat-msg { position: relative; align-self: flex-start; max-width: min(640px, 78%); padding: 9px 12px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.chat-msg:first-child { margin-top: auto; }
.chat-msg.mine { align-self: flex-end; background: var(--surface-2); }
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.chat-msg-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.chat-msg-tag { padding: 0 6px; border-radius: var(--radius); background: var(--surface-3); color: var(--muted); font-size: 11px; } /* a guest of a call wrote it */
.chat-msg-head time { color: var(--muted); font-size: 11.5px; }
.chat-msg-body { color: var(--text); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.deleted .chat-msg-body { color: var(--muted); font-style: italic; }
.chat-msg-delete { position: absolute; top: 4px; right: 4px; margin: 0; opacity: 0; transition: opacity .12s; }
.chat-msg:hover .chat-msg-delete, .chat-msg-delete:focus-within { opacity: 1; }
.chat-msg-delete .icon-btn { width: 24px; height: 24px; }
.chat-msg-delete .icon-btn .i { width: 13px; height: 13px; }
.chat-msg:has(.chat-msg-delete) .chat-msg-head { padding-right: 22px; } /* a guest's message can be deleted too, and it sits on the left */
.chat-call-log { display: inline-flex; align-self: center; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 12.5px; }
.chat-call-log .i { width: 13px; height: 13px; color: var(--muted); }
.chat-call-log time { color: var(--muted); font-size: 11.5px; }
.chat-call-note { margin: 0; padding: 10px 24px 0; } /* a call chat: what its guests can read, right above the composer */
.chat-composer { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); } /* the same air above and below the text box */
.chat-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.frame .chat-composer-row > .btn { flex: none; width: 40px; min-width: 40px; height: 40px; } /* send and stop as tall as the text box and the paperclip */
.chat-attach { position: relative; flex: none; height: 40px !important; width: 40px !important; min-width: 40px !important; cursor: pointer; }
.chat-attach:focus-within { background: var(--surface-3); }
.chat-composer-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chat-chosen { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 4px 0 6px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; }
.chat-chosen img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; }
.chat-chosen > .i { width: 14px; height: 14px; margin-left: 4px; color: var(--muted); }
.chat-chosen-name { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.chat-chosen-size { color: var(--muted); font-size: 11.5px; }
.chat-chosen .icon-btn { width: 26px; height: 26px; }
.chat-thread.is-drop { box-shadow: inset 0 0 0 2px var(--text-2); }
.chat-msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chat-img { display: block; max-width: 100%; line-height: 0; }
/* the frame is on the picture itself: a scaled-down picture's box can be wider than what it shows, which left an empty strip */
.chat-img img { display: block; width: auto; height: auto; max-width: min(360px, 100%); max-height: 260px; border: 1px solid var(--border); border-radius: var(--radius); }
.chat-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 13px; }
.chat-file:hover { background: var(--surface-3); }
.chat-file .i { width: 14px; height: 14px; flex: none; color: var(--muted); }
.chat-file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-file-size { flex: none; color: var(--muted); font-size: 12px; }
.chat-composer textarea { box-sizing: border-box; overflow-y: hidden; flex: 1; min-width: 0; min-height: 40px; max-height: 180px; padding: 10px 12px; resize: none; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; line-height: 18px; outline: none; } /* 18px line + 20px padding + 2px border = the 40px of the buttons beside it */
.chat-composer .btn { height: 40px; width: 40px; min-width: 40px; }
.chat-pick { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; max-height: 320px; overflow-y: auto; }
.chat-pick legend { margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.chat-pick-person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius); cursor: pointer; font-size: 13.5px; }
.chat-pick-person:hover { background: var(--surface-2); }
.chat-pick-person input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
@media (max-width: 920px) {
    .chat { grid-template-columns: minmax(0, 1fr); }
    .chat { grid-template-columns: minmax(0, 1fr); }
    .chat-list-resizer { display: none; }
    .chat-content .chat:has(.chat-thread-head) .chat-list { display: none; } /* phones: one column — the list, or the open conversation */
    .chat-content .chat:not(:has(.chat-thread-head)) .chat-thread { display: none; }
    .chat-list-head, .chat-item, .chat-thread-head, .chat-messages, .chat-composer { padding-left: 14px; padding-right: 14px; }
}

/* ---------- assistant: the chat layout; answers read like a document, not a bubble ---------- */
.ai-messages { gap: 16px; }
.ai-msg { align-self: stretch; max-width: 820px; padding: 2px 0 4px; }
.ai-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-msg-head .i { width: 15px; height: 15px; color: var(--text-2); }
.ai-msg-head time { color: var(--muted); font-size: 11.5px; }
.ai-msg-body { color: var(--text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-msg-body > :first-child { margin-top: 0; }
.ai-msg-body > :last-child { margin-bottom: 0; }
.ai-msg-body p, .ai-msg-body ul, .ai-msg-body ol, .ai-msg-body pre { margin: 0 0 10px; }
.ai-msg-body ul, .ai-msg-body ol { padding-left: 22px; }
.ai-msg-body li { margin: 2px 0; }
.ai-msg-body :is(h3, h4, h5, h6) { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.ai-msg-body code { padding: 1px 5px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; }
.ai-msg-body pre { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow-x: auto; }
.ai-msg-body pre code { padding: 0; border: 0; white-space: pre; }
.ai-thinking { color: var(--muted); font-style: italic; }
.ai-msg.is-running .ai-thinking::after { content: ''; display: inline-block; width: 1em; animation: ai-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes ai-dots { from { width: 0; } to { width: 1em; } }
@media (prefers-reduced-motion: reduce) { .ai-msg.is-running .ai-thinking::after { animation: none; } }
.ai-msg-foot { margin-top: 6px; color: var(--muted); font-size: 12px; }
.ai-msg-error { margin-top: 8px; color: var(--danger); font-size: 13px; }
.ai-status { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 420px; padding: 0 12px; border: 1px solid var(--border-btn); border-radius: var(--radius); color: var(--danger); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: help; }
.ai-status .i { width: 16px; height: 16px; flex: none; }
.chat-thread-head .ai-folder { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.ai-folder [data-ai-folder-connect] { max-width: 280px; }
.ai-folder [data-ai-folder-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.5; } /* the ellipsis box clips: room for descenders (g, p, y) */
.ai-pending { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.ai-pending-title { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.ai-pending ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ai-pending li { font-size: 13.5px; overflow-wrap: anywhere; }
.ai-pending pre { max-height: 240px; margin: 6px 0 0; padding: 8px 10px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-pending pre.is-old { color: var(--danger); }
.ai-pending pre.is-new { color: var(--success); }
.ai-pending-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.ai-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- dashboard: a briefing (dashboard/index.php) ----------
   Header, a quiet row of numbers, then two columns of flat sections: a heading on one line, rows divided by the one border colour. */
.brief { max-width: 1800px; margin: 0 auto; padding: 36px 40px 96px; } /* wide screens: use the room, the columns keep their ratio */
.brief-head { margin-bottom: 28px; }
.brief-date { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.brief-head h1 { margin: 0; color: var(--text); font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.brief-summary { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; }
/* what is left of the virus scanner setup — administrators only, gone once it works */
.brief-setup { margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.brief-setup-head { display: flex; align-items: center; gap: 8px; }
.brief-setup-head .i { flex: none; width: 17px; height: 17px; }
.brief-setup-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.brief-setup-who { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.brief-setup p { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; }
.brief-setup ol { display: grid; gap: 10px; margin: 12px 0 0; padding-left: 20px; color: var(--text); font-size: 13.5px; }
.brief-setup code { display: block; width: fit-content; max-width: 100%; margin-top: 4px; padding: 3px 8px; border-radius: 4px; background: var(--surface-3); font-size: 12.5px; overflow-wrap: anywhere; }
.chat-file.is-blocked, .chat-file.is-blocked .i, .mail-files .is-blocked .i { color: var(--danger); }

.brief-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 44px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.brief-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px; color: inherit; text-decoration: none; }
.brief-stat:first-child { padding-left: 0; }
.brief-stat + .brief-stat { border-left: 1px solid var(--border); }
.brief-stat strong { overflow: hidden; color: var(--text); font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.brief-stat span { color: var(--muted); font-size: 12.5px; }
.brief-stat:hover span { color: var(--text); }
.brief-stat.is-alert strong { color: var(--danger); }

.brief-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.brief-col { display: flex; flex-direction: column; gap: 44px; min-width: 0; }

.brief-section-head { display: flex; align-items: center; gap: 8px; min-height: 28px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.brief-section-head h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.brief-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.brief-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.brief-more .i { width: 14px; height: 14px; }
.brief-more:hover { color: var(--text); }
.brief-more-form { margin: 0 0 0 auto; }
.brief-more-form .brief-more { margin-left: 0; }
.brief-more-form + .brief-more-form { margin-left: 16px; }
/* "Check now": what the check found, beside the button (app.js) */
.brief-check-status { margin-left: auto; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.brief-check-status + .brief-more-form { margin-left: 12px; }
.brief-more:disabled { cursor: default; }
.brief-more.is-checking .i, .btn.is-checking .i { animation: brief-spin 1s linear infinite; }
@keyframes brief-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brief-more.is-checking .i { animation: none; } }
.brief-more-foot { display: flex; width: max-content; margin: 14px 0 0; }

.brief-list { margin: 0; padding: 0; list-style: none; }
.brief-group { display: flex; align-items: center; gap: 8px; padding: 20px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.brief-list > .brief-group:first-child { padding-top: 16px; }
.brief-group.is-alert { color: var(--danger); }
.brief-group .brief-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
.brief-item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--border); }
.brief-body { flex: 1; min-width: 0; }
.brief-title { display: block; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.brief-meta { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.brief-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; color: var(--muted); font-size: 12.5px; }
.brief-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brief-actions form { margin: 0; }
.brief-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.brief-mark .i { width: 16px; height: 16px; }
.avatar.brief-avatar { width: 32px; height: 32px; flex-shrink: 0; font-size: 11.5px; }

.brief-done { flex-shrink: 0; margin: 0; }
.brief-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--border); border-radius: 50%; background: transparent; color: transparent; cursor: pointer; }
.brief-check .i { width: 13px; height: 13px; }
.brief-check:hover, .brief-check:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.brief-flag { display: inline-flex; align-items: center; gap: 4px; }
.brief-flag .i { width: 13px; height: 13px; }
.brief-due { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.brief-flag.is-alert, .brief-due.is-alert { color: var(--danger); }

.brief-time { display: flex; flex-direction: column; flex-shrink: 0; width: 46px; font-variant-numeric: tabular-nums; }
.brief-time strong { color: var(--text); font-size: 13.5px; font-weight: 600; }
.brief-time span { color: var(--muted); font-size: 12px; }
.brief-live { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; font-weight: 600; }
.brief-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }

.brief-mail { align-items: flex-start; }
.brief-line { display: flex; align-items: baseline; gap: 10px; }
.brief-from { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.brief-when { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.brief-when .i { width: 13px; height: 13px; }
.brief-mail .brief-title { margin-top: 1px; font-size: 13.5px; font-weight: 400; }

.brief-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13.5px; }
.brief-empty .i { width: 18px; height: 18px; color: var(--faint); }
.brief-empty a { margin-left: auto; color: var(--text); font-weight: 500; text-decoration: none; }
.brief-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }

.brief-week { padding-top: 18px; }
.brief-week-total { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.brief-week-total strong { color: var(--text); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.brief-week-total span { color: var(--muted); font-size: 13px; }
.brief-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.brief-facts li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 0; }
.brief-facts li + li { padding-left: 16px; border-left: 1px solid var(--border); }
.brief-facts span { color: var(--muted); font-size: 12px; }
.brief-facts strong { color: var(--text); font-size: 14px; font-weight: 600; }

@media (min-width: 1200px) { .main.fill .content.dash { overflow-y: auto; } } /* the shell does not scroll there, so the briefing does */
@media (max-width: 1199px) {
    .brief-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .brief-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .brief-stat, .brief-stat:first-child { padding: 14px 16px 14px 0; }
    .brief-stat + .brief-stat { border-left: 0; }
}
@media (max-width: 920px) {
    .brief { padding: 20px 14px 96px; }
    .brief-head h1 { font-size: 22px; }
    .brief-stats { margin-bottom: 32px; }
    .brief-item { flex-wrap: wrap; }
    .brief-side, .brief-actions { margin-left: auto; }
}

/* ---------- customer portal (layouts/portal.php, portal/*) — the briefing style of the dashboard, for customers ---------- */
/* Search results: a soft page with one card per kind, the search term marked */
.content.flush:has(> .search-results) { background: var(--bg); }
.search-results { max-width: 1100px; margin: 0 auto; padding: 28px 32px 88px; }
.search-results > .search-empty { margin-top: 8vh; }
.search-summary { margin-bottom: 20px; }
.search-summary h1 { margin: 0 0 14px; color: var(--text); font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.search-summary h1 span { color: var(--muted); font-weight: 400; }
.search-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.search-jump a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.search-jump a:hover { background: var(--surface-2); }
.search-jump .i { width: 15px; height: 15px; color: var(--muted); }
.search-jump .count, .search-card-head .count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.search-card { margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 16px; }
.search-card-head { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.search-card-head .i { width: 16px; height: 16px; color: var(--muted); }
.search-card-head h2 { margin: 0; color: var(--text); font-size: 14.5px; font-weight: 600; }
.search-list { margin: 0; padding: 6px 0; list-style: none; }
.search-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 20px; color: inherit; text-decoration: none; }
.search-row:hover { background: var(--surface-2); }
.search-tile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); }
.search-tile .i { width: 16px; height: 16px; }
.avatar.search-avatar { width: 34px; height: 34px; flex-shrink: 0; font-size: 12px; }
.search-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.search-row-title { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.search-row-meta { overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.search-row-side { flex-shrink: 0; max-width: 40%; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.search-results mark { padding: 0 1px; border-radius: 3px; background: var(--warning-soft); color: inherit; }
@media (max-width: 720px) {
    .search-results { padding: 18px 14px 88px; }
    .search-row { padding: 10px 14px; }
    .search-row-side { display: none; }
}

/* Dashboard: calm cards on a soft page — each topic in its own card, no lines between rows, fewer items. */
.content.dash { background: var(--bg); }
.content.dash .brief { max-width: 1240px; padding: 32px 36px 96px; }
.content.dash .brief-head { margin-bottom: 22px; }
.content.dash .brief-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; border: 0; }
/* the figures: one panel, four columns split by lines — label, number, what it means; nothing to count reads quiet, what needs doing is red */
.content.dash .brief-stats { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.content.dash .brief-stat, .content.dash .brief-stat:first-child { gap: 6px; padding: 20px 24px; border: 0; border-radius: 0; background: transparent; }
.content.dash .brief-stat + .brief-stat { border-left: 1px solid var(--border); }
.brief-stat .brief-stat-label { overflow: hidden; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.brief-stat:hover .brief-stat-label { color: var(--text); }
.content.dash .brief-stat strong { margin: 4px 0 2px; font-size: 30px; line-height: 1.05; }
.brief-stat.is-zero strong { color: var(--muted); font-weight: 500; }
.content.dash .brief-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.content.dash .brief-col { gap: 20px; }
.content.dash .brief-section { padding: 2px 20px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.content.dash .brief-section-head { min-height: 50px; padding: 0; border-bottom: 0; }
.content.dash .brief-item { padding: 9px 0; border-bottom: 0; }
.content.dash .brief-group { padding: 14px 0 2px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.content.dash .brief-list > .brief-group:first-child { padding-top: 0; }
.content.dash .brief-empty { padding: 4px 0 10px; border-bottom: 0; }
.content.dash .brief-more-foot { margin: 8px 0 4px; }
.content.dash .brief-note { margin-top: 6px; }
.content.dash .brief-mail { position: relative; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--radius); }
.content.dash .brief-mail .brief-title::after { content: ''; position: absolute; inset: 0; } /* the whole row opens the e-mail */
.content.dash .brief-mail:hover { background: transparent; } /* no fill on hover */
.content.dash .brief-week { padding-top: 0; }
/* one e-mail, read like a mail client */
.mail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin: 4px 0 40px; }
.mail-view { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mail-view-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 28px 20px; color: var(--muted); font-size: 13px; }
.mail-view-note .i { width: 14px; height: 14px; }
.mail-side { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mail-side-section { padding: 18px 20px 20px; }
.mail-side-section + .mail-side-section { border-top: 1px solid var(--border); }
.mail-side h2 { margin: 0 0 4px; color: var(--text); font-size: 14.5px; font-weight: 600; }
.mail-side-text { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mail-side form { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0; }
.mail-side-section > p + form { margin-top: 0; }
.mail-side-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mail-side .btn { align-self: flex-start; }
.frame :is(.mail-side, .mail-view-note) .btn { width: auto; padding: 0 14px; gap: 7px; font-size: 13px; line-height: 1; } /* rarely used actions: they say what they do */
.frame :is(.mail-side, .mail-view-note) .btn .i { width: 15px; height: 15px; }
.frame .mail-side .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.frame .mail-side .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
@media (max-width: 1100px) { .mail-layout { grid-template-columns: minmax(0, 1fr); } }
.mail-view-head { padding: 24px 28px 18px; border-bottom: 1px solid var(--border); }
.mail-view-head h1 { margin: 0 0 18px; color: var(--text); font-size: 20px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.mail-view-from { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mail-view-from .avatar { width: 38px; height: 38px; flex-shrink: 0; font-size: 13px; }
.mail-view-from .muted { font-size: 13px; }
.mail-view-to { margin-top: 2px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.mail-view-to time { white-space: nowrap; } /* the date follows the recipients */
.mail-view-from .mail-body-switch { margin-left: auto; }
/* a call's page (record layout): the guest link and a note (its state is under Status); the invite form below its note */
.call-guest { display: flex; flex-direction: column; gap: 10px; }
.call-guest p { margin: 0; }
.call-invite-note { margin: 0 0 4px; }
.call-invite-note + .share-invite { margin-top: 12px; }

/* E-mail page: messages grouped by day like a mail client — who, their contact and the time on top; subject and the start of
   the text below; new mail has a dot and bold lines */
.mail-day-head { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 46px; margin: 0; padding: 0 28px; /* a band between two lines: the day in its middle */ color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.mail-day-head .count { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.mail-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mail-item + .mail-item { border-top: 1px solid var(--border); }
.mail-item-link { display: flex; align-items: flex-start; gap: 14px; padding: 14px 28px; color: inherit; text-decoration: none; }
.avatar.mail-item-avatar { flex: none; width: 36px; height: 36px; font-size: 12.5px; }
.mail-item-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mail-item-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mail-item-who { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mail-item-to { color: var(--muted); font-weight: 400; }
.mail-item-contact { overflow: hidden; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.mail-item-when { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mail-item-when .i { width: 13px; height: 13px; }
.mail-item-subject, .mail-item-snippet { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail-item-subject { color: var(--text-2); font-size: 13.5px; }
.mail-item-snippet { color: var(--muted); font-size: 13px; }
.mail-item-link:hover .mail-item-subject { color: var(--text); }
.mail-item.is-new :is(.mail-item-who, .mail-item-subject) { color: var(--text); font-weight: 600; }
.mail-item-dot { flex: none; width: 7px; height: 7px; margin-right: -2px; border-radius: 50%; background: var(--text); }
@media (max-width: 720px) {
    .mail-day-head { min-height: 40px; padding: 0 14px; }
    .mail-item-link { padding: 12px 14px; }
    .mail-item-contact { display: none; }
}
/* two panels: the list on the left (its width can be dragged, app.js), the chosen message on the right; each scrolls on its own */
.mail-split { display: grid; grid-template-columns: var(--mail-list-w, 460px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; } /* one row as tall as the window: a long message scrolls inside its panel, not the page */
/* the head stays and only the message below it scrolls — so no scrollbar pushes the head's buttons out of line with the top bar */
.mail-read-pane:has(> .mail-read) { overflow: hidden; }
.mail-read { display: flex; flex-direction: column; height: 100%; }
.mail-read .mail-view-head { flex: none; }
.mail-read-scroll { flex: 1; min-height: 0; overflow-y: auto; }
@media (min-width: 921px) {
    .mail-read .mail-read-title, .mail-read .mail-view-from { padding-left: 28px; padding-right: 24px; } /* right: the top bar's own 24px */
}
.mail-list-pane { grid-column: 1; grid-row: 1; min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); }
.mail-split-resizer { grid-column: 1; grid-row: 1; justify-self: end; width: 7px; margin-right: -4px; cursor: col-resize; z-index: 5; }
.mail-select-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; padding: 6px 12px 6px 24px; border-bottom: 1px solid var(--border); }
.mail-select-count { margin-right: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mail-select-tools { display: flex; align-items: center; gap: 10px; }
.mail-item-check { display: none; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--border-btn); border-radius: 50%; color: transparent; }
.mail-item-check .i { width: 12px; height: 12px; }
.mail-list-pane.is-selecting .mail-item-check { display: inline-flex; }
.mail-list-pane.is-selecting .mail-item.is-picked .mail-item-check { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.mail-list-pane.is-selecting .mail-item-link { cursor: pointer; }
.mail-split-resizer:focus-visible { outline: 0; }
.mail-read-pane { grid-column: 2; grid-row: 1; min-width: 0; overflow-y: auto; }
.mail-list-pane .mail-day-head { padding: 0 20px; }
.mail-list-pane .mail-day:first-child .mail-items { border-top: 1px solid var(--border); }
.mail-list-pane .mail-items:last-child { border-bottom: 1px solid var(--border); }
/* compact rows like a mail client: sender above, subject with the time below; new mail has a dark bar on its left edge */
.mail-list-pane .mail-item-link { align-items: center; gap: 12px; padding: 10px 16px 10px 20px; }
.mail-list-pane .avatar.mail-item-avatar { width: 32px; height: 32px; font-size: 11.5px; }
.mail-list-pane .mail-item-main { gap: 1px; }
.mail-list-pane .mail-item-who { font-size: 13.5px; }
.mail-item-clip { display: inline-flex; flex: none; margin-left: auto; color: var(--muted); }
.mail-item-clip .i { width: 13px; height: 13px; }
.mail-item-bottom { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mail-item-bottom .mail-item-subject { flex: 1; min-width: 0; font-size: 13px; }
.mail-item-bottom .mail-item-when { margin-left: 0; font-size: 12px; }
.mail-item.is-new .mail-item-link { box-shadow: inset 3px 0 var(--text); }
.mail-item.is-selected .mail-item-link { background: var(--surface-3); }
.mail-read-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--muted); font-size: 13.5px; }
.mail-read-empty .i { width: 28px; height: 28px; }
.mail-view.mail-read { border: 0; border-radius: 0; background: transparent; }
/* two bands like the list beside it: the subject with its actions as tall as a day's heading, a line, then the sender as tall as
   one message — so both lines run straight across the divider */
.mail-read .mail-view-head { display: block; min-height: 0; padding: 0; }
.mail-read .mail-read-title { box-sizing: border-box; height: 47px; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--border); }
.mail-read .mail-read-title h1 { margin: 0; overflow: hidden; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }
.mail-read .mail-read-actions { flex-wrap: nowrap; margin-left: auto; } /* on the sender's line, on its right */
.mail-read .mail-view-from { box-sizing: border-box; min-height: 60.75px; padding: 8px 28px; }
/* the top bar of the Mailbox: the line between the panels runs up through it, and the Inbox / Sent / All tabs start right after it */
@media (min-width: 1200px) {
    .topbar:has(~ main .mail-split)::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--mail-list-w, 460px) - 1px); border-left: 1px solid var(--border); pointer-events: none; } /* -1px: on the list's own right border */
    .topbar:has(~ main .mail-split) .view-tabs { position: absolute; top: 0; bottom: 0; left: calc(var(--mail-list-w, 460px) + 16px); margin: 0; }
}
/* the subject with the message's actions on its right — small buttons, like a mail client's toolbar */
.mail-read-title { display: flex; align-items: flex-start; gap: 16px; }
.mail-read-title h1 { flex: 1; min-width: 0; }
.mail-read-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.mail-read-actions .mail-body-switch { margin-left: 0; } /* one row: reply, the contact, HTML / Text */
.frame .mail-read-actions .btn { width: auto; height: 32px; max-width: 240px; padding: 0 12px; gap: 7px; overflow: hidden; font-size: 13px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.frame .mail-read-actions .btn .i { flex: none; width: 15px; height: 15px; }
.mail-read-back { display: none; align-items: center; gap: 6px; margin: 16px 16px 0; color: var(--muted); font-size: 13px; text-decoration: none; }
.mail-read-back .i { width: 15px; height: 15px; }
@media (max-width: 920px) { /* one panel at a time: the list, or the message with a way back */
    .mail-split { grid-template-columns: minmax(0, 1fr); height: auto; }
    .mail-split-resizer { display: none; }
    .mail-split.has-open:not(.is-default) .mail-list-pane, .mail-split:not(.has-open) .mail-read-pane, .mail-split.is-default .mail-read-pane { display: none; }
    .mail-list-pane { border-right: 0; }
    .mail-read-back { display: inline-flex; }
}
.mail-list-pager { display: flex; align-items: center; padding: 16px 20px; }
.mail-list-pager .brief-more { margin-left: 0; }
.mail-list-pager .mail-list-older { margin-left: auto; }

/* HTML e-mail: the sender's layout in a sandboxed frame (white, as it was designed), a switch to the plain text */
.mail-body-switch { display: inline-flex; flex: none; align-self: center; margin-left: 14px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); }
.mail-body-switch button { height: 26px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.mail-body-switch button:hover { color: var(--text); }
.mail-body-switch button.on { background: var(--surface-3); color: var(--text); }
/* pictures from the internet held back: one quiet line under the message head — no box, the choices as plain text buttons */
.mail-images { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.mail-images .i { flex: none; width: 14px; height: 14px; margin-right: -10px; }
.mail-images > span { flex: 1 1 220px; min-width: 0; }
.mail-images form { margin: 0; }
.mail-images-action { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.mail-images-action:hover { color: var(--text-2); }
.mail-view .mail-images { padding: 10px 28px; }
/* edge to edge: a designed mail brings its own background; a plain one gets its room inside the frame (MailController::html) */
.mail-frame { display: block; box-sizing: border-box; width: 100%; height: 160px; margin: 0; border: 0; background: #fff; color-scheme: light; }
.mail-view .mail-frame + [data-mail-text] + .mail-view-files { padding-top: 22px; }
.mail-read .mail-view-files { box-sizing: border-box; min-height: 47px; align-items: center; padding: 5px 24px 5px 28px; border-bottom: 1px solid var(--border); } /* the reader: attachments first, under the head */
.mail-read .mail-view-note { margin: 12px 24px 0 28px; }
.mail-read .mail-view-files { gap: 8px 22px; }
.mail-read .mail-view-files .chat-file { padding: 7px 0; border: 0; } /* plain lines in the bar, no boxes */
.mail-read .mail-view-files .chat-file:hover { background: none; }
.mail-read .mail-view-files a.chat-file:hover .chat-file-name { text-decoration: underline; }
.mail-view-body { padding: 24px 28px; color: var(--text); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-view-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 28px 22px; list-style: none; }
.mail-view-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 28px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) {
    .mail-view-head, .mail-view-body, .mail-view-foot { padding-left: 16px; padding-right: 16px; }
    .mail-view-files { padding: 0 16px 18px; }
}
/* customer conversations (portal and the team's customer thread): calls as a line, roomier messages, files */
.chat-system { display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center; max-width: 100%; }
.chat-system:first-child { margin-top: auto; }
.chat-system-line { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 12.5px; }
.chat-system-line .i { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.chat-system-line time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.chat-system .chat-msg-call { margin-top: 0; }
.portal-thread .chat-messages { gap: 14px; padding: 24px 28px; }
.portal-thread .chat-msg { padding: 10px 14px 11px; }
.portal-thread .chat-msg-body { font-size: 14px; }
.portal-thread .chat-composer { padding: 18px 28px; }
.portal-thread .chat-first { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 380px; margin: auto; font-size: 13.5px; line-height: 1.5; }
.portal-thread .chat-first .i { width: 22px; height: 22px; color: var(--faint); }
.portal-thread.is-drop { outline: 2px dashed var(--text-2); outline-offset: -8px; }
.chat-chosen .chat-chosen-remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.chat-chosen .chat-chosen-remove:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 720px) {
    .portal-thread .chat-messages, .portal-thread .chat-composer { padding-left: 14px; padding-right: 14px; }
}
.content.dash .brief-week-total { margin-bottom: 10px; }
/* my week: the total, then one fact per line — label left, value right, a line between them */
.content.dash .brief-facts { display: block; border-top: 0; }
.content.dash .brief-facts li, .content.dash .brief-facts li + li { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-left: 0; }
.content.dash .brief-facts li:first-child { padding-top: 2px; }
.content.dash .brief-facts li + li { border-top: 1px solid var(--border); }
.content.dash .brief-facts li:last-child { padding-bottom: 0; }
.content.dash .brief-facts span { color: var(--text-2); font-size: 13px; }
.content.dash .brief-facts strong { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* the tasks card runs as tall as the column beside it (no empty space under it) and scrolls inside when it has more */
@media (min-width: 1101px) {
    .content.dash .brief-grid { align-items: stretch; }
    .content.dash .brief-col:first-child > .dash-tasks:last-child { flex: 1; display: flex; flex-direction: column; min-height: 420px; }
    .content.dash .dash-tasks > .brief-list { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-right: -12px; padding-right: 12px; }
}
@media (max-width: 1100px) {
    .content.dash .brief-grid { grid-template-columns: minmax(0, 1fr); }
    .content.dash .brief-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content.dash .brief-stat:nth-child(odd) { border-left: 0; } /* two by two: a line between the columns and between the rows */
    .content.dash .brief-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
    .content.dash .brief { padding: 20px 14px 96px; }
    .content.dash .brief-stat, .content.dash .brief-stat:first-child { padding: 16px 18px; }
}

/* Customer portal: a grey page with white cards under a white top bar and header band — calm and document-like. */
.portal-body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
.portal-top { position: sticky; top: 0; z-index: 20; background: var(--frame); border-bottom: 1px solid var(--border); }
.portal-top-inner { display: flex; align-items: stretch; gap: 36px; max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.portal-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); text-decoration: none; }
.portal-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.portal-brand-text strong { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.portal-brand-text small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.portal-nav { display: flex; align-items: stretch; gap: 4px; }
.portal-nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.portal-nav-link .i { width: 16px; height: 16px; }
.portal-nav-link:hover { color: var(--text); }
.portal-nav-link.on { border-bottom-color: var(--text); color: var(--text); }
.portal-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--primary-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-me { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
.portal-me-text { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.25; }
.portal-me-text strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.portal-me-text small { max-width: 220px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.portal-me .avatar { width: 34px; height: 34px; flex-shrink: 0; font-size: 12px; }
.portal-me form { margin: 0; }
.portal-me form .btn { border-color: transparent; background: transparent; color: var(--muted); } /* sign-out: a quiet icon, not a boxed button */
.portal-me form .btn:hover, .portal-me form .btn:focus-visible { background: transparent; color: var(--text); }
.portal-main { flex: 1; }
.portal-flashes { display: flex; flex-direction: column; gap: 8px; padding: 20px max(32px, calc((100% - 1200px) / 2 + 32px)) 0; background: var(--frame); } /* on the page head's own white, lined up with its text */
.portal-flashes .flash { margin: 0; }
.portal-hero { background: var(--frame); border-bottom: 1px solid var(--border); }
.portal-flashes + .portal-hero { border-top: 0; }
.portal-hero-inner { display: flex; align-items: flex-end; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 30px 32px 28px; box-sizing: border-box; }
.portal-hero-text { flex: 1; min-width: 0; }
.portal-hero h1 { margin: 0; color: var(--text); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.portal-hero-text > p { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.portal-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.portal-crumbs a { color: var(--muted); text-decoration: none; }
.portal-crumbs a:hover { color: var(--text); }
.portal-crumbs .i { width: 14px; height: 14px; color: var(--faint); }
.portal-crumbs [aria-current] { max-width: 40ch; overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.portal-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.portal-page { max-width: 1200px; margin: 0 auto; padding: 28px 32px 72px; box-sizing: border-box; }
.portal-foot { border-top: 1px solid var(--border); background: var(--frame); }
.portal-foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; max-width: 1200px; margin: 0 auto; padding: 18px 32px; box-sizing: border-box; color: var(--muted); font-size: 12.5px; }
.portal-foot-inner span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.portal-foot-inner .i { width: 14px; height: 14px; flex-shrink: 0; }
/* portal building blocks */
.p-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.p-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; }
a.p-stat:hover { background: var(--surface-2); }
.p-stat-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.p-stat-label .i { width: 15px; height: 15px; }
.p-stat strong { overflow: hidden; color: var(--text); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.p-stat small { overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.p-stat progress, .p-bar progress { height: 6px; border: 0; border-radius: var(--radius); background: var(--surface-3); overflow: hidden; appearance: none; }
.p-stat progress { width: 100%; margin-top: 7px; }
.p-stat progress::-webkit-progress-bar, .p-bar progress::-webkit-progress-bar { background: var(--surface-3); }
.p-stat progress::-webkit-progress-value, .p-bar progress::-webkit-progress-value { background: var(--chart-1); }
.p-stat progress::-moz-progress-bar, .p-bar progress::-moz-progress-bar { background: var(--chart-1); }
.p-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.p-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.p-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.p-card-head { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.p-card-head h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.p-card-head .brief-more, .p-head-end { margin-left: auto; }
.p-card-body { padding: 20px; }
.p-card-sep { border-top: 1px solid var(--border); }
.p-card-note { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.p-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 22px 20px; color: var(--muted); font-size: 13.5px; }
.p-empty .i { width: 18px; height: 18px; flex-shrink: 0; color: var(--faint); }
.p-list { margin: 0; padding: 0; list-style: none; }
.p-list > li + li { border-top: 1px solid var(--border); }
.p-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 20px; color: inherit; text-decoration: none; }
a.p-row:hover { background: var(--surface-2); }
.p-row-top { align-items: flex-start; }
.p-row-body { flex: 1; min-width: 0; }
.p-row-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-row-title .t { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.p-row-title .badge { flex-shrink: 0; }
.p-row-meta { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.p-clamp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-chev { display: inline-flex; flex-shrink: 0; color: var(--faint); }
.p-chev .i { width: 16px; height: 16px; }
.p-bar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--muted); font-size: 12.5px; }
.p-bar progress { width: 120px; }
.p-bar span { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius); line-height: 1.1; }
.p-date small { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.p-date strong { color: var(--text); font-size: 18px; font-weight: 600; }
.p-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 14px 24px; margin: 0; padding: 20px; font-size: 13.5px; }
.p-details dt { color: var(--muted); }
.p-details dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.p-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.p-late, .p-details dd.p-late { color: var(--danger); }
.p-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 14px; }
.p-steps .i { width: 18px; height: 18px; flex-shrink: 0; color: var(--faint); }
.p-steps .done .i { color: var(--success); }
.p-step-title { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.p-steps .done .p-step-title { color: var(--muted); }
.p-step-state { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.p-card .table-wrap { border: 0; border-radius: 0; }
.p-card table.data :is(th, td):first-child { padding-left: 20px; }
.p-card table.data :is(th, td):last-child { padding-right: 20px; }
.p-task-link { color: var(--text); font-weight: 600; text-decoration: none; }
.p-task-link:hover { text-decoration: none; opacity: .75; }
.p-tasks .p-row-meta { margin-top: 2px; }
.p-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.p-help h2 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; }
.p-help p { margin: 0; color: var(--muted); font-size: 13px; }
.p-help .btn { flex-shrink: 0; }
.p-card .share-drop-form { margin: 0; }
/* meetings: its sections become cards */
.portal-page .brief-section { padding: 0 20px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.portal-page .brief-section-head { min-height: 54px; margin: 0 -20px; padding: 0 20px; box-sizing: border-box; }
.portal-page .brief-list > .brief-item:last-child { border-bottom: 0; }
.portal-page .brief-empty { border-bottom: 0; }
.portal-page .portal-form { padding-bottom: 14px; }
.portal-page .portal-form .form-foot { margin-top: 8px; }
.portal-page .brief-grid { gap: 24px; }
.share-drop-compact { padding: 18px 16px 16px; }
.share-drop-compact .share-drop-icon { width: 34px; height: 34px; margin-bottom: 4px; }
.field[data-dropzone] .share-drop-list { margin-top: 8px; }
.p-card .share-drop-form [data-drop-submit] { width: auto; align-self: flex-end; } /* the upload button appears once files are picked */
.p-card .share-drop-form [data-drop-submit]:disabled { display: none; }
.req-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.req-files a { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12.5px; text-decoration: none; }
.req-files a span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.req-files a:hover { background: var(--surface-2); }
.req-files .i { width: 13px; height: 13px; flex-shrink: 0; }
@media (max-width: 960px) {
    .p-grid { grid-template-columns: minmax(0, 1fr); }
    .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .portal-top-inner { flex-wrap: wrap; height: auto; gap: 0 12px; padding: 10px 16px 0; }
    .portal-nav { order: 3; width: 100%; height: 44px; margin: 6px -16px 0; padding: 0 4px; overflow-x: auto; border-top: 1px solid var(--border); }
    .portal-me-text { display: none; }
    .portal-hero-inner { flex-direction: column; align-items: stretch; padding: 22px 16px; }
    .portal-hero h1 { font-size: 23px; }
    .portal-hero-actions { flex-wrap: wrap; }
    .portal-page { padding: 18px 16px 56px; }
    .portal-flashes { padding: 16px 16px 0; }
    .portal-foot-inner { padding: 16px; }
    .p-stats { gap: 10px; }
    .p-stat { padding: 14px 16px; }
    .p-bar progress { width: 64px; }
    .p-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .p-details dd { margin-bottom: 10px; }
}
.portal-alt { margin: 16px 0 0; text-align: center; }
.portal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13px; text-decoration: none; }
.portal-back .i { width: 14px; height: 14px; }
.portal-back:hover { color: var(--text); }
.portal-wrap { white-space: normal; overflow-wrap: anywhere; }
.portal-progress { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-progress progress { width: 120px; height: 6px; border: 0; border-radius: var(--radius); background: var(--surface-3); overflow: hidden; appearance: none; }
.portal-progress progress::-webkit-progress-bar { background: var(--surface-3); }
.portal-progress progress::-webkit-progress-value { background: var(--chart-1); }
.portal-progress progress::-moz-progress-bar { background: var(--chart-1); }
.portal-progress span { min-width: 40px; color: var(--muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.portal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--field-gap, 16px) 16px; padding-top: 18px; }
.portal-form .span-2 { grid-column: 1 / -1; }
.portal-form .form-foot { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; }
.portal-thread { height: calc(100vh - 420px); min-height: 420px; overflow: hidden; }
.portal-thread .chat-messages { overflow-y: auto; padding-left: 20px; padding-right: 20px; }
.portal-thread .chat-composer { padding-left: 20px; padding-right: 20px; border-top: 1px solid var(--border); }
.portal-send-error { margin: 0; color: var(--danger); font-size: 13px; }
.chat-msg-call { margin-top: 10px; }
.frame .btn.chat-msg-call { display: inline-flex; width: auto; height: 32px; min-width: 0; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1; } /* a labelled button, unlike the app's icon-only ones */
/* a switch of two or three choices among the top-bar buttons (tasks: Mine / Team): one bordered control, the chosen one filled */
.segmented { display: inline-flex; flex-shrink: 0; align-items: center; height: 36px; box-sizing: border-box; padding: 2px; gap: 2px; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface); }
.segmented a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 3px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.segmented a .i { width: 15px; height: 15px; }
.segmented a:hover { color: var(--text); }
.segmented a.on { background: var(--surface-3); color: var(--text); }
.chat-msg-task { display: inline-block; margin: 2px 0 4px; color: var(--muted); font-size: 12px; text-decoration: none; }
.chat-msg-task:hover { color: var(--text); }
.chat-about { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.chat-about .i { width: 15px; height: 15px; flex-shrink: 0; }
.chat-about a { color: var(--text); font-weight: 500; text-decoration: none; }
.chat-about .chat-about-clear { display: inline-flex; margin-left: auto; color: var(--muted); }
a.chat-msg-name { color: inherit; text-decoration: none; }
a.chat-msg-name:hover { opacity: .7; }
.portal-access { display: flex; flex-direction: column; gap: 14px; }
.portal-access p { margin: 0; }
dialog.dialog .dialog-foot > form:first-child:has(.btn-danger) { margin-right: auto; }
.portal-rule { margin: 6px -20px; border: 0; border-top: 1px solid var(--border); } /* across the dialog: who has access above, where they sign in below */
.portal-send-to { min-width: 0; margin-right: 4px; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.portal-send-to strong { color: var(--text); font-weight: 500; } /* revoking stands apart from Close and Invite */
.portal-access .hint:last-of-type { margin-bottom: -6px; } /* the last one is the label above the address it describes */
.portal-calls { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } /* calls a revoked contact can still open with their guest link */
.portal-calls li { display: flex; align-items: center; gap: 10px; }
.portal-calls li > span:first-child { flex: 1; min-width: 0; }
.portal-calls .muted { font-size: 12.5px; }
.portal-calls form { margin: 0; }
.portal-company-head { display: flex; flex-direction: column; gap: 10px; margin: 0 calc(-1 * var(--bleed-r, 0px)) 0 calc(-1 * var(--bleed-l, 0px)); padding: 0 var(--bleed-r, 0px) 18px var(--bleed-l, 0px); border-bottom: 1px solid var(--border); } /* the line runs across the column, like the table's */
.portal-company-head p { margin: 0; }
.portal-company-table .actions { white-space: nowrap; }
.portal-company-table .actions form { display: inline-block; margin: 0; }
.chat-list-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; box-sizing: border-box; margin: 0; padding: 0 16px 0 24px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.chat-list-count { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 920px) {
    .portal-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- time registration ---------- */
.time-description { display: block; color: var(--text); font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.time-table .actions { white-space: nowrap; }
/* Entries, By client and By person: one row height and one name style, whatever the row holds */
table.data.time-table > tbody > tr { height: 64px; }
.time-table .name-cell .avatar-sm { width: 30px; height: 30px; font-size: 11.5px; } /* a person as big as a row icon */
.time-table .actions form { display: inline-block; margin: 0; }
/* ---------- calls calendar: one week, hour by hour; calls.js places the calls from their data attributes ---------- */
.cal-nav { display: flex; align-items: center; gap: 10px; } /* the same 10px as every other top-bar button */
.cal-label { padding: 0 6px; color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the week picker: one bordered control like the buttons beside it — arrows and the week inside, no boxes of their own */
.cal-week { display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface); }
.frame .cal-week .btn { width: 34px; min-width: 34px; height: 34px; border: 0; border-radius: 0; background: transparent; }
.frame .cal-week .btn:hover { background: var(--surface-3); }
.cal { --cal-hour: 48px; display: flex; flex-direction: column; }
.cal-head, .cal-grid { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); }
.cal-head { border-bottom: 1px solid var(--border); overflow-y: hidden; scrollbar-gutter: stable; } /* the same scrollbar room as the grid below, so the day columns line up */
.cal-day-head { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-left: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.cal-day-head strong { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 13px; color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day-head.is-today { color: var(--text); }
.cal-day-head.is-today strong { padding: 0 7px; background: var(--primary); color: var(--primary-text); }
.cal-scroll { overflow-y: auto; scrollbar-gutter: stable; }
@media (min-width: 921px) { .cal-scroll { height: calc(100vh - 62px - 47px); } }
.cal-grid { position: relative; height: calc(var(--cal-hour) * 24); }
.cal-hours { display: grid; grid-template-rows: repeat(24, var(--cal-hour)); }
.cal-hours span { position: relative; top: -8px; padding-right: 10px; color: var(--muted); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-left: 1px solid var(--border); background-image: linear-gradient(to top, var(--border) 1px, transparent 1px); background-size: 100% var(--cal-hour); cursor: pointer; } /* hour lines at the end of each hour: the first hour starts on the header's own line, not a second one */
.cal-col.is-today { background-color: var(--surface-2); }
/* booked calls stand out: a solid dark block (#101418) with white text */
.cal-event { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; box-sizing: border-box; min-height: 20px; padding: 3px 8px; overflow: hidden; border: 1px solid #101418; border-radius: var(--radius); background: #101418; color: #ffffff; font-size: 12px; line-height: 1.35; text-decoration: none; cursor: pointer; } /* always dark, also once over; in the dark theme the line keeps it apart from the page */
.cal-event:hover { background: #2b2c31; }
:root[data-theme="dark"] .cal-event { border-color: var(--border); }
.cal-event-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cal-event-time { display: inline-flex; align-items: center; gap: 4px; color: inherit; opacity: .75; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-event-time .i { width: 11px; height: 11px; }
.cal-event.is-short { padding-top: 2px; padding-bottom: 2px; }
.cal-event.is-short .cal-event-time { display: none; } /* up to 30 minutes: room for the title only */
.cal-now { position: absolute; left: 0; right: 0; z-index: 2; height: 0; border-top: 2px solid var(--text); pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.cal-agenda { display: none; }
@media (max-width: 920px) {
    .cal { display: none; }
    .cal-agenda { display: block; }
    .cal-nav .cal-label:not(.cal-month-label) { display: none; }
}
/* a call's page */
.call-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; align-content: start; }
.call-facts > div.field { grid-column: 1 / -1; }
.call-facts .share-message { margin: 0; }
.share-invite textarea.input { height: auto; min-height: 64px; padding: 9px 12px; resize: vertical; line-height: 1.5; }
@media (max-width: 720px) { .call-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a call ringing / starting: a dark card at the top right of the app ---------- */
.call-toast { position: fixed; top: 74px; right: 16px; /* below the top bar and its actions */ z-index: 90; display: flex; align-items: center; gap: 14px; width: min(440px, calc(100vw - 32px)); padding: 14px 14px 14px 16px; border: 1px solid #2a2c31; border-radius: 10px; background: #111316; color: #f2f2f4; }
.call-toast-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #2a2c31; border-radius: 50%; color: #c3c5cb; }
.call-toast-mark .i { width: 18px; height: 18px; }
.call-toast-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.call-toast-body strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.call-toast-body span { overflow: hidden; color: #a4a8b2; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.call-toast-actions { display: flex; flex: none; gap: 8px; }
.call-toast .call-btn { width: 40px; height: 40px; }
.call-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #2f3137; border-radius: 50%; background: #1b1d21; color: #f2f2f4; cursor: pointer; }
.call-btn:hover { background: #24262b; }
.call-btn:disabled { opacity: .4; cursor: default; }
.call-btn:disabled:hover { background: #1b1d21; }
.call-btn .i { width: 20px; height: 20px; }
.call-btn .when-on, .call-btn .when-off { display: inline-flex; }
.call-btn .when-off, .call-btn[aria-pressed="true"] .when-on { display: none; }
.call-btn[aria-pressed="true"] .when-off { display: inline-flex; }
.call-btn[aria-pressed="true"] { background: #f2f2f4; color: #111316; }
.call-btn.call-accept { background: #2f8f5b; border-color: #2f8f5b; color: #fff; }
.call-btn.call-end { background: #e5534b; border-color: #e5534b; color: #fff; }
.call-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5534b; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------- the call window (layouts/call.php): always dark, the video fills the window ---------- */
.call-body { height: 100vh; height: 100dvh; overflow: hidden; background: #0b0c0e; color: #f2f2f4; } /* dvh: an on-screen keyboard leaves the chat composer visible */
.room { height: 100%; }
.room-prejoin { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: center; gap: 48px; max-width: 1200px; height: 100%; margin: 0 auto; padding: 32px 48px; }
.room-preview { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #2a2c31; border-radius: 10px; background: #111316; }
.room-preview video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.room-preview-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 24px 84px; background: #111316; color: #a4a8b2; font-size: 13px; text-align: center; }
.room-preview-controls { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; }
.room-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px solid #2a2c31; border-radius: 50%; background: #1b1d21; color: #c3c5cb; font-size: 24px; font-weight: 600; }
.room-avatar .i { width: 26px; height: 26px; }
.room-avatar-sm { width: 30px; height: 30px; font-size: 11.5px; }
.room-join { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.room-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #a4a8b2; font-size: 12.5px; font-weight: 500; }
.room-kicker .i { width: 14px; height: 14px; }
.room-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere; }
.room-when { margin: 0; color: #c3c5cb; font-size: 14px; }
.room-when:empty { display: none; }
.room-join-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.room-field { display: flex; flex-direction: column; gap: 6px; color: #c3c5cb; font-size: 12.5px; font-weight: 600; }
.room-field input { height: 42px; padding: 0 12px; border: 1px solid #33353b; border-radius: var(--radius); outline: none; background: #16181b; color: #f2f2f4; font: inherit; font-size: 14px; font-weight: 400; }
.room-field input:focus { border-color: #5a5d65; }
.room-primary, .room-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius); font: inherit; cursor: pointer; }
.room-primary { height: 44px; padding: 0 20px; border: 0; background: #f2f2f4; color: #111316; font-size: 14px; font-weight: 600; }
.room-primary:hover { background: #ffffff; }
.room-primary:disabled { opacity: .6; cursor: default; }
.room-secondary { height: 40px; padding: 0 16px; border: 1px solid #33353b; background: #1b1d21; color: #f2f2f4; font-size: 13.5px; }
.room-secondary:hover { background: #24262b; }
.room-primary .i, .room-secondary .i { width: 18px; height: 18px; }
.room-note { margin: 0; color: #a4a8b2; font-size: 13px; line-height: 1.55; }
.room-error { margin: 0; color: #e5534b; font-size: 13px; line-height: 1.5; }
.room-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 32px; text-align: center; }
.room-message-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border: 1px solid #2a2c31; border-radius: 50%; color: #c3c5cb; }
.room-message-mark .i { width: 24px; height: 24px; }
.room-message .room-note { max-width: 440px; }
.room-message-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.room-spinner { width: 24px; height: 24px; border: 2px solid #33353b; border-top-color: #f2f2f4; border-radius: 50%; animation: room-spin 1s linear infinite; }
@keyframes room-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .room-spinner { animation-duration: 4s; } }
.room-call { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.room-bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 20px; border-bottom: 1px solid #1f2125; box-shadow: inset 0 1px #1f2125; } /* a line on top too, under the window's own title bar (inset: the bar keeps its 52px) */
.room-bar-title { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.room-clock { color: #a4a8b2; font-size: 13px; font-variant-numeric: tabular-nums; }
.room-bar-status { margin-left: auto; color: #a4a8b2; font-size: 13px; white-space: nowrap; }
.room-main { display: flex; min-height: 0; }
.room-tiles { display: grid; flex: 1; grid-auto-rows: minmax(0, 1fr); gap: 2px; min-width: 0; padding: 0; } /* the pictures fill the whole area, edge to edge; a thin dark gap between several */
.room-tiles[data-count="2"], .room-tiles[data-count="3"], .room-tiles[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-tiles[data-count="5"], .room-tiles[data-count="6"], .room-tiles[data-count="7"], .room-tiles[data-count="8"], .room-tiles[data-count="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* someone shares a screen: call.js places every picture (arrange) — the screen as big as fits in its own shape, the people
   beside or below it, whichever leaves the screen bigger, grown into the room that is left and centred as one group */
.room-tiles.has-spotlight { display: block; overflow: hidden; }
.room-tiles.has-spotlight .room-tile { position: absolute; margin: 0; aspect-ratio: auto; }
.room-tiles.has-spotlight.has-others .room-tile.is-self { right: auto; bottom: auto; z-index: auto; border: 0; border-radius: 0; } /* placed with the others, not floating in the corner */
.room-tiles.has-spotlight .room-tile.is-floating, .room-tiles.has-spotlight.has-others .room-tile.is-floating { z-index: 3; border: 1px solid #0b0c0e; border-radius: 10px; } /* no room beside the screen: small framed pictures over its corner */
.room-tiles { position: relative; }
/* with others in the call your own video floats small in the bottom-right corner, over the grid (like Teams) */
.room-tiles.has-others .room-tile.is-self { position: absolute; right: 24px; bottom: 24px; z-index: 3; width: clamp(160px, 18vw, 280px); height: auto; aspect-ratio: 16 / 9; border: 1px solid #0b0c0e; border-radius: 10px; } /* your own small picture: a quiet black frame over the video */
.room-tiles.has-others .room-tile.is-self .room-avatar { width: 40px; height: 40px; font-size: 14px; }
.room-tiles.has-others .room-tile.is-self .room-tile-label { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 11.5px; }
@media (max-width: 760px) { .room-tiles.has-others .room-tile.is-self { right: 12px; bottom: 12px; width: 120px; } }
.room-tile { position: relative; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: #16181b; }
.room-tile video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0c0e; } /* cameras fill their tile, no dark bars at the sides (the edges may be trimmed); shared screens stay whole, below */
.room-tiles.has-others .room-tile.is-self video { object-fit: cover; } /* only your small corner picture fills its box */
.room-tile.is-self video { transform: scaleX(-1); } /* your own camera as in a mirror */
.room.no-mirror .room-preview video, .room.no-mirror .room-tile.is-self video { transform: none; } /* the mirror button: your own view as others see it */
.room-tile.is-sharing video { transform: none; object-fit: contain; } /* a shared screen: whole and unmirrored */
/* full screen: a quiet button in the corner of every picture, shown on hover (or double-click the picture) */
.room-tile-full { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius); background: rgba(10, 11, 13, .75); color: #f2f2f4; cursor: pointer; opacity: 0; transition: opacity .15s; }
.room-tile:hover .room-tile-full, .room-tile-full:focus-visible { opacity: 1; }
.room-tile-full .i { width: 15px; height: 15px; }
.room-tile:fullscreen { position: static !important; width: 100% !important; height: 100% !important; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; } /* wins over the placement arrange() gives it */
.room-tile:fullscreen video { object-fit: contain; }
.room-tile-avatar { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #16181b; }
.room-tile.no-video .room-tile-avatar { display: flex; }
/* connecting or reconnecting: a spinner with the words below it, in the middle of the picture; a failed connection without the spinner */
.room-tile-state { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: #16181b; color: #a4a8b2; font-size: 13px; text-align: center; }
.room-tile-state::before { content: ''; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid #33353b; border-top-color: #f2f2f4; border-radius: 50%; animation: room-spin 1s linear infinite; }
.room-tile-state.is-failed::before { display: none; }
@media (prefers-reduced-motion: reduce) { .room-tile-state::before { animation-duration: 4s; } }
.room-tile-label { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 8px; border-radius: var(--radius); background: rgba(10, 11, 13, .75); font-size: 12.5px; }
.room-tile-label .i { width: 13px; height: 13px; }
.room-tile-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.room-tile-muted { display: inline-flex; color: #e5534b; }
.room-tile-sharing { display: inline-flex; color: #c3c5cb; }
.room-tile-tag { flex: none; padding: 0 6px; border: 1px solid #3a3c42; border-radius: var(--radius); color: #c3c5cb; font-size: 11px; line-height: 18px; }
.room-panel { display: flex; flex: none; flex-direction: column; width: 320px; overflow-y: auto; border-left: 1px solid #1f2125; background: #0b0c0e; }
.room-panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 12px 0 18px; border-bottom: 1px solid #1f2125; font-size: 14px; }
.room-panel-section { padding: 16px 18px; border-bottom: 1px solid #1f2125; }
.room-panel-section h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: #a4a8b2; font-size: 12px; font-weight: 600; }
.room-count { color: #f2f2f4; }
.room-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.room-person { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; }
.room-person-name { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.room-person-name small { color: #a4a8b2; font-size: 11.5px; }
.room-person-icons { display: inline-flex; gap: 6px; color: #a4a8b2; }
.room-person-icons .i { width: 14px; height: 14px; }
.room-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #33353b; border-radius: var(--radius); background: transparent; color: #f2f2f4; cursor: pointer; }
.room-icon:hover { background: #24262b; }
.room-icon:disabled { opacity: .5; cursor: default; }
.room-icon .i { width: 15px; height: 15px; }
.room-icon.room-admit { border-color: #f2f2f4; background: #f2f2f4; color: #111316; }
.room-icon.room-admit:hover { background: #ffffff; }
.room-copy { display: flex; align-items: center; gap: 8px; }
.room-copy code { flex: 1; min-width: 0; padding: 7px 10px; overflow: hidden; border: 1px solid #33353b; border-radius: var(--radius); color: #c3c5cb; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.room-hint { margin: 8px 0 0; color: #a4a8b2; font-size: 12px; line-height: 1.5; }
/* inviting from the call: e-mail addresses, and the team to ring */
.room-invite { display: flex; align-items: center; gap: 8px; }
.room-input { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid #33353b; border-radius: var(--radius); background: transparent; color: #f2f2f4; font: inherit; font-size: 12.5px; }
.room-input::placeholder { color: #7d818b; }
.room-input:focus { border-color: #a4a8b2; outline: 0; }
.room-team { margin-top: 12px; }
/* the call's chat: the same panel as People, with the messages scrolling and the composer at the bottom */
.room-chat { width: 360px; overflow: hidden; }
.room-chat-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; }
.room-chat-msg { font-size: 13.5px; }
.room-chat-head { display: flex; align-items: baseline; gap: 6px; color: #a4a8b2; font-size: 12px; }
.room-chat-name { color: #f2f2f4; font-weight: 600; }
.room-chat-body { white-space: pre-wrap; overflow-wrap: anywhere; color: #f2f2f4; }
.room-chat-files { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.room-chat-file { display: flex; gap: 6px; align-items: center; color: #f2f2f4; }
.room-chat-img img { display: block; max-width: 100%; max-height: 180px; border-radius: var(--radius); }
.room-chat-log, .room-chat-empty, .room-chat-note { color: #a4a8b2; font-size: 12.5px; }
.room-chat-note { padding: 8px 18px 0; margin: 0; }
.room-chat-form { border-top: 1px solid #1f2125; padding: 10px 12px; }
.room-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.room-chat-text { flex: 1; resize: none; height: auto; min-height: 32px; max-height: 120px; padding: 7px 10px; line-height: 1.4; } /* .room-input fixes the height and the padding a textarea needs back */
.room-chat .room-error { padding: 6px 18px 0; }
.room-chat-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.room-controls { display: flex; justify-content: center; gap: 12px; padding: 14px; border-top: 1px solid #1f2125; }
.room-toasts { position: absolute; top: 64px; right: 16px; z-index: 5; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100% - 32px)); pointer-events: none; }
.room-toast { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid #2a2c31; border-radius: 8px; background: #1b1d21; color: #f2f2f4; font-size: 13px; pointer-events: auto; }
.room-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .room-prejoin { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; height: auto; min-height: 100%; padding: 20px; overflow-y: auto; }
    .call-body:has(.room-prejoin:not([hidden])) { overflow-y: auto; }
    .room-panel { position: absolute; top: 52px; right: 0; bottom: 77px; z-index: 6; width: 100%; }
    .room-chat { width: 100%; }
    .room-tiles[data-count="3"], .room-tiles[data-count="4"] { grid-template-columns: minmax(0, 1fr); }
    .room-controls { gap: 8px; }
}
/* shared folders: the visitor's page is a wider sign-in card with the file list edge to edge */
.guest-wrap.guest-wide { max-width: 760px; }
/* the shared folder a visitor opens: a header, the files as a clean list to download, a place to add files — sections edge
   to edge inside the card, divided by lines */
.guest-card:has(> .sp-head) { padding: 0; overflow: hidden; }
.guest-card:has(> .sp-head) > .flash { margin: 20px 28px 0; }
.sp-head { display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--border); }
.sp-head > .min-w-0 { flex: 1; }
.sp-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--surface-3); color: var(--text); }
.sp-icon .i { width: 20px; height: 20px; }
.sp-title { margin: 0 0 3px; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.sp-meta { margin: 0; color: var(--muted); font-size: 13px; }
.sp-close { flex: none; }
.guest-card .sp-close { width: auto; height: 34px; padding: 0 8px; gap: 7px; border-color: transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; box-shadow: none; } /* a quiet text action, no frame */
.guest-card .sp-close:hover { background: transparent; color: var(--text); }
.guest-card .sp-close .i { width: 14px; height: 14px; }
.sp-message { margin: 0; padding: 16px 28px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-line; }
.sp-section { padding: 22px 28px 24px; }
.sp-section + .sp-section { border-top: 1px solid var(--border); }
/* secrets (secrets.js): the reveal / answer form on the link page, and the decrypted text with its copy button */
.secret-open { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
.secret-open .field { align-self: stretch; }
.secret-out { display: flex; align-items: flex-start; gap: 8px; }
.secret-out .secret-text { flex: 1; min-width: 0; height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 13px; line-height: 1.5; background: var(--surface-2); }
.secret-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.secret-open .secret-note { margin: -6px 0 0; }
.dialog-body > .secret-note { margin: 0; }
/* the Secrets page before the first one: what it is for, and the two ways in as cards */
.empty.secret-empty { gap: 0; padding: 48px 24px; color: var(--muted); }
.secret-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); }
.empty .secret-empty-mark .i { width: 22px; height: 22px; color: currentColor; }
.secret-empty-title { margin: 0 0 8px; color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.secret-empty-text { max-width: 440px; margin: 0 0 28px; font-size: 13.5px; line-height: 1.55; }
.secret-empty-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 680px; }
.empty a.secret-choice { display: flex; align-items: center; gap: 16px; min-height: 88px; box-sizing: border-box; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 400; text-align: left; transition: border-color .15s, background-color .15s; }
.empty a.secret-choice:hover { border-color: var(--text-2); background: var(--surface-2); }
.empty a.secret-choice:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.secret-choice-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--primary); color: var(--primary-text); }
.empty .secret-choice-icon .i { width: 18px; height: 18px; color: currentColor; }
.secret-choice-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.secret-choice-body strong { font-size: 14px; font-weight: 600; }
.secret-choice-body span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.empty .secret-choice-go { width: 18px; height: 18px; flex: none; color: var(--faint); transition: transform .15s; }
.empty a.secret-choice:hover .secret-choice-go { transform: translateX(2px); color: var(--text); }
.secret-empty-note { display: inline-flex; align-items: center; gap: 7px; margin: 24px 0 0; color: var(--faint); font-size: 12.5px; }
.empty .secret-empty-note .i { width: 14px; height: 14px; color: var(--success); }
@media (max-width: 640px) { .secret-empty-choices { grid-template-columns: minmax(0, 1fr); } }
.secret-error { margin: 0; color: var(--danger); font-size: 12.5px; }
.secret-email { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.secret-email { gap: 16px; }
/* invoices */
.invoice-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.invoice-party, .invoice-total { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; min-width: 0; }
.invoice-party .link { margin-top: 8px; font-size: 12.5px; }
.invoice-label { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.invoice-party strong { font-size: 15px; }
.invoice-total { text-align: right; }
.invoice-total strong { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.invoice-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the draft's lines: headed columns of fields, 8px apart, amounts on the right edge */
.settings-section > .table-wrap table.data.invoice-lines > thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
table.invoice-lines th { padding: 16px 4px 4px; border-bottom: 0; }
table.invoice-lines td { padding: 4px; border-bottom: 0; }
table.invoice-lines tbody tr:first-child td { padding-top: 4px; }
.settings-section > .table-wrap table.data.invoice-lines :is(th, td):first-child { padding-left: 24px; }
.settings-section > .table-wrap table.data.invoice-lines :is(th, td):last-child { padding-right: 24px; }
table.invoice-lines :is(th, td):nth-child(2) { width: 72px; }
table.invoice-lines :is(th, td):nth-child(3) { width: 92px; }
table.invoice-lines :is(th, td):nth-child(4) { width: 112px; }
table.invoice-lines :is(th, td):nth-child(5) { width: 72px; }
table.invoice-lines :is(th, td):nth-child(6) { width: 120px; padding-left: 12px; }
table.invoice-lines :is(th, td).actions { width: 36px; }
table.invoice-lines :is(.input, .select) { box-sizing: border-box; width: 100%; height: 36px; }
table.invoice-lines .select { padding-right: 28px; }
.input.amount { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-lines-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 12px 64px 21px 24px; } /* totals end under the amounts */
.frame .invoice-lines-foot .btn.invoice-add, .frame .invoice-steps .btn { width: auto; flex: none; padding: 0 14px; gap: 7px; font-size: 13px; line-height: 1; } /* labelled buttons: .frame .btn is icon-only by default */
.frame .invoice-lines-foot .btn.invoice-add .i { width: 15px; height: 15px; }
.invoice-totals { display: grid; gap: 6px; min-width: 260px; margin: 0; font-variant-numeric: tabular-nums; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 24px; font-size: 13.5px; }
.invoice-totals dt { color: var(--muted); }
.invoice-totals dd { margin: 0; }
.invoice-totals .grand { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 600; }
.invoice-totals .grand dt { color: var(--text); }
.invoice-preview-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.invoice-preview-facts > div { display: flex; flex-direction: column; gap: 2px; }
.invoice-preview-facts > div span { color: var(--muted); font-size: 12px; }
.invoice-preview-facts > div strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.invoice-preview-facts .settings-status { flex-basis: 100%; margin: 0; }
.invoice-send { display: flex; flex-direction: column; gap: 14px; }
table.data td.amount, table.data th.amount { text-align: right; } /* money lines up on its right edge */
.secret-email-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .secret-email-pickers { grid-template-columns: minmax(0, 1fr); } }
.recipient-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recipient-tag { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); color: var(--text); font-size: 13px; }
.recipient-tag button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.recipient-tag button:hover { background: var(--surface-3); color: var(--text); }
.secret-email-foot { display: flex; align-items: center; gap: 12px; }
.frame .secret-email-foot .btn { width: auto; flex: none; padding: 0 14px; gap: 7px; font-size: 13px; line-height: 1; } /* the form's one action says what it does */
.frame .secret-email-foot .btn .i { width: 15px; height: 15px; }
.frame .secret-email-foot .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.frame .secret-email-foot .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
.secret-email-foot .hint { margin: 0; color: var(--muted); font-size: 12.5px; }
.secret-email-foot .hint.is-error { color: var(--danger); }
/* the link page: one wide action, then the secret itself as the page's focus */
.guest-card .secret-cta, .secret-dialog .secret-cta { width: 100%; height: 42px; justify-content: center; gap: 8px; font-size: 14px; }
dialog.dialog.secret-dialog { width: min(420px, calc(100vw - 32px)); }
dialog.secret-dialog .dialog-body { display: block; }
.guest-card .secret-open { align-items: stretch; }
.secret-reveal { display: flex; flex-direction: column; gap: 12px; }
.secret-value { box-sizing: border-box; width: 100%; margin: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 17px; line-height: 1.5; resize: none; overflow-wrap: anywhere; outline: none; }
.secret-value:focus { border-color: var(--text-2); }
.secret-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warning-soft); color: var(--warning); font-size: 12.5px; line-height: 1.45; }
.secret-warn .i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.guest-card .btn.is-copied { background: var(--success); border-color: var(--success); color: #fff; }
.settings-foot .secret-error { margin-left: 6px; }
.sp-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.sp-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-group { margin: 16px 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sp-section > h2:first-child + .sp-group { margin-top: 0; }
.sp-empty { margin: 0; color: var(--muted); font-size: 13.5px; }
.sp-files { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.sp-files > li + li { border-top: 1px solid var(--border); }
.sp-file { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--text); text-decoration: none; }
.sp-file:hover .sp-file-name { text-decoration: underline; }
.sp-file:hover .sp-file-download { border-color: var(--text-2); color: var(--text); }
.sp-file-type { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--surface-3); color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.sp-file-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sp-file-name { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sp-file-meta { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp-file-download { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); }
.sp-file-download .i { width: 16px; height: 16px; }
.sp-upload [data-drop-submit] { align-self: flex-end; width: auto; }
.sp-upload [data-drop-submit]:disabled { display: none; } /* the upload button appears once files are chosen */
@media (max-width: 560px) { .sp-head, .sp-section, .sp-message { padding-left: 18px; padding-right: 18px; } .sp-head { flex-wrap: wrap; } }
.share-public-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.share-public-head > .min-w-0 { flex: 1; }
.share-public-head .guest-title { margin: 0 0 2px; overflow-wrap: anywhere; }
.share-public-head .guest-sub { margin: 0; }
.guest-card .table-wrap { margin: 0 -28px 22px; border-top: 1px solid var(--border); }
.guest-card table.data :is(th, td):first-child { padding-left: 28px; }
.guest-card table.data :is(th, td):last-child { padding-right: 28px; }
.guest-card > .empty { margin: 0 -28px 22px; padding: 22px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* visitor upload: one calm drop zone (click or drop), the picked files listed below it */
.share-drop-form { display: flex; flex-direction: column; gap: 12px; }
.share-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px 24px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.share-drop:hover, .share-drop:focus-within, .share-drop.is-over { border-color: var(--text-2); background: var(--surface-2); }
.share-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* the whole zone is the file input: a click opens the picker, a drop fills it */
.share-drop-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); }
.share-drop-icon .i { width: 18px; height: 18px; }
.share-drop-title { color: var(--text); font-size: 14px; font-weight: 600; }
.share-drop-hint { color: var(--muted); font-size: 12.5px; }
.share-drop-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.share-drop-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; }
.share-drop-list li + li { border-top: 1px solid var(--border); }
.share-drop-list .i { width: 14px; height: 14px; flex: none; color: var(--muted); }
.share-drop-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.share-drop-size { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.share-message { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
/* shared folders: the team's folder page */
.share-copy-block { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* 20px: the room every block in a section column keeps, like the page's section padding */
.share-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.share-copy code { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.share-copy-block .share-message { margin: 0; }
.share-copy-block .hint { margin: 0; color: var(--muted); font-size: 12.5px; }
.share-copy-block .settings-status { margin: -12px 0 -12px; } /* the once-only warning sits 8px under the password, the hint 8px below it */
/* a read-only value in a field grid (profile: 2FA status, last sign-in) — as tall as an input, so rows line up with forms */
.field-value { display: flex; align-items: center; min-height: 40px; color: var(--text); font-size: 14px; }
.field > .theme-switch { align-self: flex-start; }
.input-with-button { display: flex; align-items: center; gap: 8px; }
.input-with-button input { flex: 1; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.share-extend { display: flex; align-items: flex-end; gap: 8px; }
.share-extend .field { flex: 1; min-width: 0; } /* the full row, to the copy button's edge; picking a date saves it (data-autosubmit) */
.share-upload { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.share-upload .hint, .share-invite-foot .hint { color: var(--muted); font-size: 12.5px; }
.share-invite { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.share-invite :is(.select, .input) { width: 100%; }
.or-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--muted); font-size: 12px; line-height: 1; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.share-invite-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.frame .share-invite-foot .btn { width: auto; flex: none; padding: 0 14px; gap: 7px; font-size: 13px; line-height: 1; } /* the one action of the form says what it does */
.frame .share-invite-foot .btn .i { width: 15px; height: 15px; }
.frame .share-invite-foot .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.frame .share-invite-foot .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
.settings-section > .table-wrap > .empty { padding: 40px 24px; }
.guest-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.guest-steps span { flex: 1; height: 4px; border-radius: var(--radius); background: var(--surface-3); }
.guest-steps span.done { background: var(--success); }
.guest-steps span.now { background: var(--primary); }

.code-input { font-family: Consolas, monospace; font-size: 22px !important; letter-spacing: 8px; text-align: center; height: 48px !important; }
.qr-box { display: flex; justify-content: center; margin: 6px 0 14px; }
/* partials/qr-dialog: a link as a large, scannable code */
dialog.dialog.qr-dialog { width: min(340px, calc(100vw - 32px)); }
dialog.qr-dialog .dialog-body { display: block; padding: 12px; }
.qr-code svg { display: block; width: 100%; height: auto; border-radius: var(--radius); } /* the code's own white border is the frame */
.qr-box img { border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 8px; }
.manual-secret { margin-bottom: 16px; text-align: center; }
.manual-secret summary { cursor: pointer; color: var(--text); font-weight: 600; font-size: 13px; }
.secret-code { display: inline-block; margin-top: 8px; padding: 6px 10px; }

.error-page { text-align: center; padding: 10px 0; }
.error-code { font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: var(--text); margin: 0 0 6px; }

/* ---------- credentials reveal ---------- */

.cred-box { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.cred-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.cred-label { min-width: 110px; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.cred-box code { font-size: 14px; user-select: all; }

/* ---------- responsive ---------- */

/* ---------- record layout: the object in main, related objects in a right rail ---------- */

.record { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
.record-main, .record-aside { min-width: 0; container-type: inline-size; }
/* detail pages: the record itself as a narrow "about" column with its fields stacked, related sections fill the rest */
.record.detail { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
.props.stacked { grid-template-columns: 1fr; }
.record.detail .record-main .props { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } /* fields two-up in the narrow column */
.record.detail .record-main .prop.wide { grid-column: 1 / -1; }
.two-col > .card { margin-bottom: 0; }
/* dashboard grid and kanban board wrap by main-column width, not viewport width */
@container (max-width: 820px) {
    .span-3, .span-4 { grid-column: span 6; }
    .span-5, .span-7, .span-8 { grid-column: span 12; }
    .board { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 1200px) {
    .record, .record.detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1360px) {
    .gsearch { flex-basis: 220px; }
    .gsearch kbd { display: none; }
    .crumbs .crumb.current { max-width: 220px; }
    .topbar-actions .btn-plain .label { display: none; }
    .topbar-actions .btn-plain { padding: 0 9px; border-color: var(--border-strong); }
}

@media (max-width: 1199px) {
    /* record pages need room for two columns; below this they flow as one scrolling page — inside .main > .content, which still scrolls */
    .content.split { display: block; padding: 26px 28px 40px; --bleed-l: 28px; --bleed-r: 28px; }
    .content.split::before, .split-resizer { display: none; }
    .content.split > .page-head { display: flex; margin: 0 calc(-1 * var(--bleed-r)) 20px calc(-1 * var(--bleed-l)); padding: 0 var(--bleed-r) 20px var(--bleed-l); border-bottom: 1px solid var(--border); }
    .content.split > .record.detail { display: grid; }
    .content.split .page-head-text, .content.split .record-main, .content.split .record-aside { padding: 0; overflow: visible; }
    .content.dash { display: block; }
    .content.dash > .record { gap: 20px; }
    .content.dash .record-main, .content.dash .record-aside { overflow: visible; padding: 24px 28px 0; border-left: 0; }
}

@media (max-width: 1100px) {
    .span-3, .span-4 { grid-column: span 6; }
    .span-5, .span-7, .span-8 { grid-column: span 12; }
    .board { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
    .kpi-with-chart .chart-bars { display: none; }
    .gsearch { flex-basis: 170px; }
    .crumbs .crumb:not(.current) { display: none; }
    .crumbs .sep { display: none; }
    .theme-switch button { padding: 4px 7px; }
}

@media (max-width: 920px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 40;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .18s ease, visibility 0s .18s;
        width: 260px !important;
    }
    html.nav-open .sidebar { transform: translateX(0); visibility: visible; transition-delay: 0s; }
    html.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 35; }
    .sidebar-resizer { display: none; }
    .main.split, .main.fill { height: auto; display: block; overflow: visible; } /* small screens: back to one scrolling page */
    .content.split { display: block; padding: 18px 14px 96px; --bleed-l: 14px; --bleed-r: 14px; }
    .content.split::before, .split-resizer { display: none; }
    .content.split > .page-head { display: flex; }
    .content.split > .record.detail { display: grid; }
    .content.split .page-head-text, .content.split .page-actions, .content.split .record-main, .content.split .record-aside { padding: 0; overflow: visible; }
    .icon-btn.nav-toggle { display: inline-flex; }
    #nav-collapse { display: inline-flex; }
    .topbar { padding: 10px 14px; }
    .filter-bar { flex-wrap: wrap; flex-shrink: 1; width: 100%; }
    .filter-bar .gsearch { flex: 1 1 200px; }
    .content { padding: 18px 14px 50px; }
    .page-title { font-size: 22px; }
    .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
    .board { grid-template-columns: 1fr; overflow: visible; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2, .field.new-row { grid-column: span 1; }
    .topbar-actions .btn .label { display: none; }
    .topbar-actions .btn { padding: 0 10px; }
    .pager-label { display: none; } /* the pager buttons keep their tooltips */
    .cell-trunc { max-width: 160px; }
}

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

/* record pages: the title runs the full width on top; below it the fields on the left stay put and only the related-records
   column scrolls, with a divider between them from the title line down */
@media (min-width: 1200px) { /* below this the max-width: 1199px rules stack the page */
    .main.split { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    .main.split .content { flex: 1; min-height: 0; }
    .content.split { display: grid; grid-template-columns: var(--split-w, minmax(300px, 1fr)) minmax(0, 2fr); grid-template-rows: auto auto minmax(0, 1fr); padding: 0; }
    .content.split::before { content: ''; grid-column: 1; grid-row: 1 / span 3; border-right: 1px solid var(--border); pointer-events: none; z-index: 1; } /* from the top: the tabs in the title row belong to the right column */
    .split-resizer { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: stretch; width: 7px; margin-right: -4px; cursor: col-resize; z-index: 5; } /* drag the divider (app.js) */
    .content.split > .page-head, .content.split > .record.detail { display: contents; }
    .content.split .page-head-text { grid-column: 1 / -1; grid-row: 1; padding: 26px 28px 20px; border-bottom: 1px solid var(--border); } /* the title block ends in a line across the whole page */
    .content.split > .flash { grid-column: 1; grid-row: 2; margin: 16px 24px 0 28px; }
    .content.split .record-main { grid-column: 1; grid-row: 3; overflow-y: auto; padding: 20px 24px 28px 28px; --bleed-l: 28px; --bleed-r: 24px; }
    .content.split .record-aside { grid-column: 2; grid-row: 2 / span 2; overflow-y: auto; padding: 26px 28px 28px 24px; --bleed-l: 24px; --bleed-r: 28px; --bleed-t: 26px; }
    /* the related-records tabs sit in the title row, over the column they switch — left of the collapse button */
    .content.split .record-tabs { grid-column: 2; grid-row: 1; align-self: center; justify-self: start; max-width: calc(100% - 84px); margin: 0 0 0 24px; overflow-x: auto; scrollbar-width: none; z-index: 2; }
    .content.split .page-head-text > .min-w-0 { max-width: calc(var(--split-w-px, (100vw - var(--sidebar-w, 252px)) / 3) - 90px); }
}
.record-tabs a { height: 28px; white-space: nowrap; }
.record-tabs.is-compact .tab-label { display: none; } /* app.js: not enough room — icon and count only */
.record-tabs.is-compact a { gap: 5px; padding-left: 9px; padding-right: 9px; }
.record-tabs a .count { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) {
    .content.split .record-tabs { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
}
/* the left column is a profile, not a card: the divider frames it, fields stack one per row so nothing breaks mid-word */
.content.split .record-main .card { border: 0; border-radius: 0; background: transparent; }
.content.split .record-main .card-head { padding: 0 0 14px; border-bottom: 0; background: transparent; }
.content.split .record-main .card-body { padding: 0; }
.content.split .record-main .props { grid-template-columns: 1fr; gap: 22px; } /* one field per line, with air between them */
.content.split .record-main .prop { gap: 5px; }
.content.split .record-main .prop dd { line-height: 1.5; }
.content.split .record-main .prop dd { overflow-wrap: anywhere; }

/* quick actions: floating button bottom right, items fan out on a quarter circle */
.quick { position: fixed; right: 28px; bottom: 28px; z-index: 30; }
.quick-fab { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--primary); color: var(--primary-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* the one black button: the floating trigger */
.quick-fab:hover, .quick.open .quick-fab, .quick-fab:focus-visible { background: var(--primary-hover); outline: 0; }
.quick-fab .i { width: 17px; height: 17px; transition: transform .18s; }
.quick.open .quick-fab .i { transform: rotate(45deg); }
/* the actions open as a small menu card above the button — opaque, so it never collides with the page */
.quick-items { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border-btn); border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .14s, transform .14s, visibility 0s .14s; }
.quick.open .quick-items { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.quick-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; text-align: left; }
.quick-item:hover, .quick-item:focus-visible { background: var(--surface-3); outline: 0; }
.quick-item .i { width: 17px; height: 17px; color: var(--muted); order: -1; }
.quick-item:hover .i { color: var(--text); }
.quick-label { flex: 1; }

/* ---------- one button ---------- */
/* Every button inside the app is the same 36×36 icon button with the same frame; the label lives in
   title/aria-label (app.js copies it into a tooltip). Danger differs only by a red icon. Sign-in pages keep text. */
.frame .btn, dialog .btn {
    width: 36px; height: 36px; min-width: 36px; padding: 0; gap: 0; font-size: 0; line-height: 0;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-btn); border-radius: var(--radius);
}
.frame .btn .i, dialog .btn .i { width: 17px; height: 17px; }
.frame .btn:hover, dialog .btn:hover, .frame .btn[aria-pressed="true"], .frame .filter-drop[open] > summary.btn { background: var(--surface-3); color: var(--text); }
.frame .btn-danger, dialog .btn-danger { color: var(--danger); }
.frame .btn-danger:hover, dialog .btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.frame .btn:disabled, dialog .btn:disabled { opacity: .5; cursor: default; }
.frame .btn .pill { font-size: 11px; }
.frame .btn.is-copied, dialog .btn.is-copied { color: var(--success); background: var(--success-soft); }
table.data td.actions, table.data td:has(> .btn, > .hstack > .btn) { padding-top: 8px; padding-bottom: 8px; } /* a 36px button keeps every row at the height of a text row, so tabs never change the title block's line */
/* collapsible-panel openers (Upload a file, Add credential, Log activity) are the same button */
details.panel > summary { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; font-size: 0; line-height: 0; border: 1px solid var(--border); background: var(--surface); }
details.panel > summary .i { width: 17px; height: 17px; color: var(--text); }
details.panel > summary:hover, details.panel[open] > summary { background: var(--surface-3); }

/* ---------- flat sections ---------- */
/* No cards: a section is a heading row on a single divider line, then its content, aligned to the page. */
.card { background: transparent; border: 0; border-radius: 0; margin-bottom: 32px; }
.card-head { padding: 0 0 10px; border-bottom: 0; background: transparent; } /* no line under section headings anywhere */
.card-body { padding: 16px 0 0; }
.card-body.tight { padding: 0; }
.form-card .card-body { padding: 18px 0 0; }
table.data th { background: transparent; }
table.data th:first-child, table.data td:first-child { padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
.grid-12 { gap: 24px 32px; }
.record-aside { display: flex; flex-direction: column; gap: 32px; }
.record-aside .card, .grid-12 .card { margin-bottom: 0; }
details.panel { padding: 14px 0 0; }
.content.split .record-main .card + .card { margin: 24px calc(-1 * var(--bleed-r, 0px)) 0 calc(-1 * var(--bleed-l, 0px)); padding: 20px var(--bleed-r, 0px) 0 var(--bleed-l, 0px); border-top: 1px solid var(--border); } /* sections of the left column: a line across the column between them */
.content.split .record-main .card > .title-block { margin: 0 calc(-1 * var(--bleed-r, 0px)) 20px calc(-1 * var(--bleed-l, 0px)); padding: 0 var(--bleed-r, 0px) 20px var(--bleed-l, 0px); border-bottom: 1px solid var(--border); } /* a section title ends in a line and keeps its distance, like the page title */
.content.split .record-main .card + .card .card-head { padding-bottom: 12px; margin-bottom: 4px; }

/* ---------- list pages: full bleed ---------- */
/* The table runs edge to edge under the top bar; the top bar crumb carries the icon and the count. */
.content.flush { padding: 0; }
.content.flush > .card { margin: 0; }
.content.flush > .card > .card-head { padding: 10px 28px; }
.content.flush > .card > .card-head h2, .content.flush > .card > .card-head > .count { display: none; }
.content.flush > .card > .card-head:not(:has(.tools)) { display: none; }
.content.flush table.data th:first-child, .content.flush table.data td:first-child { padding-left: 28px; }
.content.flush table.data th:last-child, .content.flush table.data td:last-child { padding-right: 28px; }
.content.flush .empty { padding: 56px 28px; }
.content.split .record-aside > .card:has(> .card-body > .empty):not(:has(> .card-body > :not(.empty, dialog, script))),
.content.split .record-aside > .card > .card-body:has(> .empty):not(:has(> :not(.empty, dialog, script))) { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* an empty tab: the message sits in the middle of the column */
.content.flush > .card > .card-body > .empty { justify-content: center; box-sizing: border-box; min-height: calc(100vh - 62px); } /* an empty list page: the message sits in the middle of the page */
.content.flush .panel-note { margin: 20px 28px; }
.content.flush > .toolbar { margin: 0; padding: 14px 28px; border-bottom: 1px solid var(--border); } /* view switcher sits on its own strip */
.content.split .record-aside > .toolbar { margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.content.flush > .flash { margin: 16px 28px 0; }
.content.flush > .flash:not(.flash-success) + :not(.flash) { margin-top: 16px; border-top: 1px solid var(--border); } /* a line between an error and the list; success messages float (toast) and take no room */

/* leads filter dropdown: wider, grouped, Apply instead of submit-on-change */
.lead-filters .filter-panel { width: min(420px, calc(100vw - 28px)); max-height: calc(100vh - 120px); overflow-y: auto; gap: 14px; }
.filter-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter-group legend, .lead-filters .field > span { margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.filter-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filter-grid .span-2 { grid-column: 1 / -1; }
.filter-grid .input, .filter-grid .select { width: 100%; }
.letter-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 4px; }
.letter-picks .letter-pick:nth-child(-n+2) { grid-column: span 2; }
.letter-pick { position: relative; cursor: pointer; }
.letter-pick input { position: absolute; opacity: 0; pointer-events: none; }
.letter-pick span { display: flex; align-items: center; justify-content: center; height: 28px; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.letter-pick:hover span { background: var(--surface-3); color: var(--text); }
.letter-pick input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.letter-pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.lead-filters .filter-panel-actions { align-items: center; }
.lead-filters .filter-panel-actions .hint { margin-left: auto; color: var(--muted); font-size: 12px; }

/* confirmation modal (replaces the browser's confirm/alert) */
dialog.dialog.dialog-confirm { width: min(420px, calc(100vw - 32px)); }
dialog.dialog-confirm .dialog-head { border-bottom: 0; padding-bottom: 4px; }
dialog.dialog-confirm .dialog-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); }
dialog.dialog-confirm .dialog-mark .i { width: 17px; height: 17px; }
dialog.dialog-confirm .dialog-body { display: block; padding-top: 8px; }
dialog.dialog-confirm .dialog-text { margin: 0; overflow-wrap: anywhere; }
dialog.dialog-confirm[open] { animation: confirm-in .14s ease-out; }
@keyframes confirm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { dialog.dialog-confirm[open] { animation: none; } }
.content.flush > .board, .content.flush > .gantt, .content.flush > .card-body { padding: 20px 28px 0; }
.crumbs .crumb .i { width: 16px; height: 16px; margin-right: 8px; color: var(--text-2); vertical-align: -3px; }
.crumbs .crumb .count { margin-left: 8px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- dashboard ---------- */
/* main column | divider | rail; each column scrolls on its own. */
.content.dash { padding: 0; }
.content.dash table.data :is(.row-link, .sub-line, td > .link) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } /* one title line and one detail line per row, so the rows of both columns line up */
@media (min-width: 1200px) { /* columns scroll on their own only where they fit; the divider drags (app.js, --dash-w); the rail never gets narrower than 300px */
    .main.fill { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    .main.fill .content { flex: 1; min-height: 0; }
    .content.dash { display: flex; flex-direction: column; }
    .content.dash > .record { flex: 1; min-height: 0; gap: 0; align-items: stretch; grid-template-columns: minmax(0, var(--dash-w, 2fr)) minmax(300px, 1fr); }
    .content.dash .record-main { grid-column: 1; grid-row: 1; overflow-y: auto; padding: 24px 24px 28px 28px; --bleed-l: 28px; --bleed-r: 24px; --bleed-t: 24px; }
    .content.dash .record-aside { grid-column: 2; grid-row: 1; overflow-y: auto; padding: 24px 28px 28px 24px; border-left: 1px solid var(--border); --bleed-l: 24px; --bleed-r: 28px; --bleed-t: 24px; }
    .content.dash .split-resizer { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1199px) { /* stacked dashboard: one 32px gap between sections and room for the floating button at the end */
    .content.dash { --bleed-l: 28px; --bleed-r: 28px; }
    .content.dash > .record { gap: 0; }
    .content.dash .record-aside { padding-top: 0; padding-bottom: 96px; }
}
@media (max-width: 920px) { /* phones: the 14px side margin of every other page */
    .content.dash { --bleed-l: 14px; --bleed-r: 14px; }
    .content.dash .record-main, .content.dash .record-aside { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 921px) { /* the dashboard has no top bar: the KPI strip comes first (phones keep the bar for the menu button) */
    .main.fill > .topbar { display: none; }
}
@media (display-mode: standalone) and (min-width: 921px) { /* installed app: the line under the title bar continues above the KPI strip */
    .main.fill { border-top: 1px solid var(--border); }
    [data-theme="semi"] .main.fill { border-top-color: #353c45; }
}
/* scroll columns contain their absolutely positioned bits (screen-reader text); otherwise those stretch the page and the whole window scrolls */
.content.split .record-main, .content.split .record-aside, .content.dash .record-main, .content.dash .record-aside { position: relative; }
/* rows in a padded column run edge to edge: the list bleeds into the column padding and the cells keep the text aligned */
:is(.content.split .record-aside, .content.dash .record-main, .content.dash .record-aside) :is(.table-wrap, .checklist, .checklist-add) { margin-left: calc(-1 * var(--bleed-l, 0px)); margin-right: calc(-1 * var(--bleed-r, 0px)); }
/* the timeline tab of a record page sits like a table: edge to edge from the title line, labels aligned with the table text, no header strip */
.content.split .record-aside .gantt { margin-left: calc(-1 * var(--bleed-l, 0px)); margin-right: calc(-1 * var(--bleed-r, 0px)); }
.content.split .record-aside.tabbed > .card:first-child > .card-body.gantt { margin-top: calc(-1 * var(--bleed-t, 0px)); }
.content.split .record-aside .gantt .gantt-label { padding-left: var(--bleed-l, 0px); }
.content.split .record-aside .gantt .gantt-head { background: transparent; }
.content.split .record-aside .gantt .gantt-row:last-child { border-bottom: 1px solid var(--border); }
:is(.content.split .record-aside, .content.dash .record-main, .content.dash .record-aside) table.data :is(th, td):first-child { padding-left: var(--bleed-l, 0px); }
:is(.content.split .record-aside, .content.dash .record-main, .content.dash .record-aside) table.data :is(th, td):last-child { padding-right: var(--bleed-r, 0px); }
:is(.content.split .record-aside, .content.dash .record-main, .content.dash .record-aside) :is(.checklist > li, .checklist-add) { padding-left: var(--bleed-l, 0px); padding-right: var(--bleed-r, 0px); }
:is(.content.split .record-aside.tabbed, .content.dash .record-main, .content.dash .record-aside) > .card:first-child > .card-body > :is(.table-wrap, .checklist, .checklist-add):first-child { margin-top: calc(-1 * var(--bleed-t, 0px)); } /* a list that opens the column starts right under the line above */

/* ---------- first table column: one icon tile in front of every name ---------- */
.row-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); }
.row-icon .i { width: 15px; height: 15px; }
.name-cell > .min-w-0 { min-width: 0; }

/* ---------- record pages: related data as tabs (partials/record-tabs), one data set per page ---------- */
.record-aside.tabbed { gap: 16px; }
.record-aside.tabbed > .card > .card-head { display: none; } /* the tab already names the section */
/* top-bar view switcher (tasks): same tabs, 36px tall like every other top-bar control, right next to the search box */
.topbar .view-tabs { margin-left: auto; flex-shrink: 0; align-self: stretch; margin-top: -12px; margin-bottom: -12px; } /* the full bar height: the current tab's underline lies on the bar's line */
.topbar .view-tabs a { height: auto; }
@media (max-width: 1199px) { /* their own row under the title: back to a plain row of tabs */
    .topbar .view-tabs { align-self: auto; margin-top: 0; margin-bottom: 0; }
    .topbar .view-tabs a { height: 36px; }
}
.topbar .view-tabs a { white-space: nowrap; }
.topbar .view-tabs a .count { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { /* where record pages stack, the tabs take their own full-width row under the title and scroll sideways when they don't fit */
    .topbar { flex-wrap: wrap; row-gap: 10px; }
    .topbar .crumbs { flex: 1 1 0; min-width: 0; } /* grows into the free space instead of pushing the buttons onto a new row */
    .topbar .view-tabs { order: 1; flex: 1 1 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
    .topbar .view-tabs a { flex: 1 0 auto; justify-content: center; }
}

/* ---------- activity feed (contact page): day groups on a quiet timeline spine ---------- */
[hidden] { display: none !important; } /* hidden always wins, also over components that set display (e.g. .field-note) */
/* the kind filter: a filter button in the tabs row, beside the collapse button; the kinds in its dropdown */
@media (min-width: 1200px) {
    .content.split .record-tab-tools { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin-right: 72px; z-index: 3; }
    html[data-record="collapsed"] .content.split:has(.record-tab-tools) .record-tabs { margin-right: 116px; }
}
.feed-filter-menu { width: 230px; padding: 6px; gap: 2px; }
.feed-filter-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.feed-filter-menu button .i { width: 15px; height: 15px; color: var(--muted); }
.feed-filter-menu button .count { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.feed-filter-menu button:hover { background: var(--surface-2); }
.feed-filter-menu button.on { background: var(--surface-3); font-weight: 600; }
.feed-filter-menu button.on .i { color: var(--text); }

.i.i-send { transform: translate(-1px, 1px); }

/* tooltips of icon-only controls (app.js moves the title here, so the browser's own never shows) */
.tip { position: fixed; z-index: 1000; max-width: 260px; padding: 5px 9px; border-radius: var(--radius); background: var(--text); color: var(--surface); font-size: 12px; font-weight: 500; line-height: 1.35; pointer-events: none; animation: tip-in .12s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }
.feed-date { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 0; background: var(--frame); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } /* with the items' own 12px: the same room above and below a day's line */
.feed > .feed-day:first-child > .feed-date { padding-top: 0; } /* the first day starts at the column's own top padding */
.feed-attach-load { display: inline; margin: 0; }
button.feed-attach { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.feed-attach:hover { color: var(--text); }
/* success messages: a note in the corner that goes by itself (app.js), never pushing the page down; errors stay in place */
/* success messages: a small dark bar at the bottom centre, like the black buttons — never over a page's heading or its
   first lines, clear of the + button in the corner; a green check, white text, a quiet close */
.frame .flash.flash-success { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 60; width: fit-content; max-width: calc(100vw - 48px); box-sizing: border-box; margin: 0 auto; gap: 10px; padding: 12px 10px 12px 16px;
    border: 0; border-radius: var(--radius); background: #101418; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.45;
    transition: opacity .3s, transform .3s; animation: toast-in .2s ease-out; }
.frame .flash.flash-success > .i { width: 16px; height: 16px; color: #6fd49a; }
.frame .flash.flash-success .flash-close { width: 26px; height: 26px; margin: -4px 0; color: rgba(255, 255, 255, .6); }
.frame .flash.flash-success .flash-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.frame .flash.flash-success.is-leaving { opacity: 0; transform: translateY(6px); }
:root[data-theme="dark"] .frame .flash.flash-success { border: 1px solid var(--border); } /* dark: its edge stays visible on the dark page */
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .frame .flash.flash-success { animation: none; transition: none; } }
.feed-date::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.feed-list { position: relative; list-style: none; margin: 0 -10px; padding: 0; }
.feed-list::before { content: ''; position: absolute; left: 25px; top: 28px; bottom: 28px; width: 1px; background: var(--border); } /* the spine joins the icons */
.feed-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 10px; border-radius: var(--radius); transition: background-color .6s; }
.feed-item > .row-icon { position: relative; z-index: 1; width: 32px; height: 32px; background: var(--surface); }
.feed-item > .row-icon .i { width: 16px; height: 16px; }
.feed-main { min-width: 0; padding-top: 1px; }
.feed-title { display: flex; align-items: baseline; gap: 12px; }
.feed-title strong { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.feed-time { flex-shrink: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.feed-meta > * + *::before { content: '·'; margin: 0 7px; color: var(--faint); }
.feed-kind { color: var(--text-2); font-weight: 500; }
.feed-attach { display: inline-flex; align-items: center; gap: 4px; }
.feed-attach .i { width: 13px; height: 13px; }
.feed-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.feed-item.expanded .feed-text { display: block; overflow: visible; }
.feed-actions { display: flex; align-items: flex-start; gap: 6px; padding-left: 10px; }
.feed-toggle .i { transition: transform .15s; }
.feed-item.expanded .feed-toggle .i { transform: rotate(180deg); }
.feed-none { margin: 0; padding: 40px 0; color: var(--muted); text-align: center; }
/* e-mail: always the whole message, full width, in one design with the e-mail page — sender line, text, attachments */
.feed-mail .feed-message { overflow: hidden; width: 100%; max-width: none; box-sizing: border-box; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mail-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mail-line .avatar { flex-shrink: 0; margin-top: 1px; }
.mail-line-who { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.mail-line-who .muted { font-size: 12.5px; }
.mail-line-date { flex-shrink: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.feed-mail .feed-text, .feed-mail.expanded .feed-text { display: block; overflow: visible; -webkit-line-clamp: unset; margin: 0; padding: 16px; color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.mail-files { display: none; }
.feed-mail .mail-files { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 12px 16px; list-style: none; border-top: 1px solid var(--border); font-size: 13px; }
.mail-files li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mail-files .link, .mail-files .muted { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.mail-files .i { width: 14px; height: 14px; flex: none; color: var(--muted); }
/* composer attachments: the picked files sit between the message and the foot, each removable */
.composer-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 20px; list-style: none; border-top: 1px solid var(--border); }
.composer-files li { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.composer-file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer-file-size { flex: none; color: var(--muted); font-size: 12px; }
.composer-files .icon-btn { width: 24px; height: 24px; }
.composer-attach { position: relative; cursor: pointer; }
.composer-attach:focus-within { background: var(--surface-3); }
.mail-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-width: 640px; overflow: hidden; } /* one line that shrinks with the column */

/* ---------- e-mail composer: one dialog everywhere — headers as rows, the message below ---------- */
dialog.dialog.dialog-compose { width: min(760px, calc(100vw - 32px)); }
dialog.dialog#call-new { width: min(680px, calc(100vw - 32px)); } /* the call form: time, team, guests — room to breathe */
.composer { display: flex; flex-direction: column; }
.composer-errors { display: flex; flex-direction: column; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.composer-note { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.composer-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; min-height: 46px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.composer-row > label { color: var(--muted); font-size: 13px; }
.composer-row:focus-within > label { color: var(--text); }
.composer-row input, .composer-row .select { width: 100%; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; box-shadow: none; }
.composer-body { display: block; width: 100%; min-height: 300px; max-height: calc(100vh - 380px); padding: 16px 20px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.65; resize: vertical; outline: none; }
.composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.composer-foot .hint { margin-right: auto; color: var(--muted); font-size: 12.5px; }

/* ---------- audit log ---------- */
table.audit .audit-record { min-width: 150px; }
table.audit .audit-details { min-width: 200px; }
.pager { flex-shrink: 0; } /* one control with .cal-week: the arrows around "Page [x] of Y" */
.pager-jump { display: flex; align-items: center; margin: 0; }
.pager-input { box-sizing: border-box; field-sizing: content; min-width: 22px; height: 24px; margin: 0 4px 0 2px; padding: 0 6px 2px; line-height: 22px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; cursor: text; } /* no box of its own: the number reads as text, a soft fill shows it can be typed */
.pager-input::-webkit-outer-spin-button, .pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-input:hover, .pager-input:focus { outline: 0; background: var(--surface-3); }
.pager-of { color: var(--muted); font-weight: 400; }
/* audit log: pick a day in the top bar */
.audit-date { display: flex; align-items: center; gap: 8px; margin: 0; }
.audit-date-field { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface); color: var(--muted); cursor: pointer; }
.audit-date-field .i { width: 16px; height: 16px; flex: none; }
.audit-date-field input { height: 34px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; outline: none; color-scheme: light dark; }
.audit-date-field:focus-within { color: var(--text); }
.pager-label { display: flex; align-items: center; padding: 0 6px; color: var(--text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- sortable tables ---------- */
/* app.js turns column headings into buttons: click sorts, click again reverses; the chevron marks the active column */
table.data th .th-sort { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
table.data th .th-sort:hover, table.data th .th-sort:focus-visible, table.data th[aria-sort] .th-sort { color: var(--text); }
table.data th .th-sort::after { content: ''; width: 12px; height: 12px; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat; visibility: hidden; }
table.data th[aria-sort] .th-sort::after { visibility: visible; }
table.data th[aria-sort="ascending"] .th-sort::after { rotate: 180deg; }

/* ---------- long selects: a search box on top of the options (app.js, 9+ options) ---------- */
.select-search { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.select-search .input { height: 34px; }
.select-search ul { position: relative; list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.select-search-option { padding: 7px 10px; border-radius: var(--radius); color: var(--text); font-size: 13.5px; cursor: pointer; }
.select-search-option.active { background: var(--surface-3); }
.select-search-option[aria-selected="true"] { font-weight: 600; }
.select-search-empty { padding: 7px 10px; color: var(--muted); font-size: 13px; }

/* Date fields (app.js): a text field that opens TeamDesk's calendar */
input.date-input { cursor: pointer; caret-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field input.date-input, input.input.date-input { padding-right: 38px; }
.audit-date-field input.date-input { width: 96px; padding-right: 0; background-image: none; }
.date-picker { position: fixed; z-index: 60; width: 284px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.date-picker-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.date-picker-nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-btn); border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; }
.date-picker-nav .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-picker-dow { padding: 4px 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; }
.date-picker-day { height: 34px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.date-picker-nav:hover, .date-picker-day:hover:not(:disabled):not(.is-selected) { background: var(--surface-3); }
.date-picker-day.is-other { color: var(--muted); }
.date-picker-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; }
.date-picker-day.is-selected { background: var(--primary); color: var(--primary-text); font-weight: 600; }
.date-picker-day:disabled { opacity: .35; cursor: default; }
.date-picker-day:focus-visible, .date-picker-nav:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.date-picker-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* installed app (PWA): a hairline under the window's title bar */
@media (display-mode: standalone) {
    /* the line under the window title bar is the same line as the one above the user account, in every theme */
    .sidebar, .topbar { border-top: 1px solid var(--border); }
    [data-theme="semi"] .topbar { border-top-color: #353c45; } /* semi: the dark sidebar's line (its --border) continues across the white top bar */
}

@media print {
    :root, [data-theme] { --bg: #fff; --frame: #fff; --surface: #fff; --surface-2: #f4f4f4; --text: #000; --text-2: #222; --muted: #555; --border: #ccc; }
    .sidebar, .sidebar-resizer, .topbar, .backdrop, .avatar-stack, .theme-switch, .toolbar, .page-actions, .filter-drop, .quick, td.actions, .tcard-actions, details.panel, .nav-toggle, .skip-link { display: none !important; }
    .card { break-inside: avoid; }
}

/* E-mail on contacts and companies */
.mail-form .form-actions { margin-top: 16px; padding-top: 0; border-top: 0; }

/* File pickers: a real button around a visually hidden input; app.js uploads as soon as a file is picked */
.file-pick { cursor: pointer; position: relative; align-self: flex-start; }
.file-pick:has(input:focus-visible) { background: var(--surface-3); } /* keyboard focus only, border kept: after picking a file (focus stays on the input) it looks like every other button */
.btn-primary.file-pick:has(input:focus-visible) { background: var(--primary-hover); }
.hint { font-size: 12.5px; color: var(--muted); }
p.hint { margin: 0; }

/* ---------- user page: the tabs list the latest entries, the audit log keeps the rest ---------- */
.table-note { margin: 0; padding: 14px 0 0; color: var(--muted); font-size: 12.5px; }

/* ---------- settings-style forms (mailbox): an intro beside the fields, a line across the page between sections ---------- */
.settings-section { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 760px); gap: 16px 48px; padding: 28px; border-bottom: 1px solid var(--border); }
.settings-intro h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.settings-intro h2 .i { width: 16px; height: 16px; color: var(--text-2); }
.settings-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.settings-foot { display: flex; align-items: center; gap: 10px; padding: 20px 28px; }
/* a form's own Save / Create / Cancel buttons say what they do: icon plus word (top-bar actions stay icon-only) */
.frame :is(.settings-foot, .form-actions, .ai-pending-actions, .date-picker-foot) .btn, .frame .ai-folder [data-ai-folder-connect] { width: auto; min-width: 0; padding: 0 14px; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1; }
.frame :is(.settings-foot, .form-actions, .ai-pending-actions) .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.frame :is(.settings-foot, .form-actions, .ai-pending-actions) .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
.frame .date-picker-foot .btn { height: 30px; padding: 0 10px; }
.settings-foot .hint { margin: 0 0 0 6px; color: var(--muted); font-size: 12.5px; }
/* Every settings section: the intro on the left, and whatever sits beside it (fields, choices, a table) takes the rest of the
   width and fills the section top to bottom behind one vertical line, so the two read as columns on every page. */
.settings-section { position: relative; grid-template-columns: var(--intro-w, 280px) minmax(0, 1fr); column-gap: 28px; } /* the intro keeps 28px to both sides of it */
/* the line between intro and content can be dragged (app.js); the width holds on every page with sections */
.intro-resizer { position: absolute; top: 0; bottom: 0; left: calc(56px + var(--intro-w, 280px) - 4px); width: 7px; cursor: col-resize; z-index: 5; }
.intro-resizer:focus-visible { outline: 0; }
.settings-section > :not(.settings-intro):not(.intro-resizer) { margin: -28px -28px -29px 0; padding: 28px 28px 29px 24px; border-left: 1px solid var(--border); min-width: 0; } /* -29px: content as tall as the section lays its last line exactly on the section's line */
.settings-section > .table-wrap:not(.settings-intro) { padding: 0; } /* a list runs edge to edge of its column: its row lines meet the column's line and the section's end (the rule above would inset it) */
.settings-section > .table-wrap table.data > :is(tbody, tfoot):last-child > tr:last-child > td { border-bottom: 0; } /* the section's own line closes the list: a list shorter than the intro leaves no second line above it */
.settings-section > .table-wrap table.data :is(th, td):first-child { padding-left: 24px; }
.settings-section > .table-wrap table.data :is(th, td):last-child { padding-right: 28px; }
/* a list in a section keeps one 21px room: under the line to a group label or the first row, between groups, and above the end */
.settings-section > .table-wrap table.data tr.group th { padding-top: 21px; }
.settings-section > .table-wrap table.data :is(tbody + tbody > tr.group:first-child, tr:not(.group) + tr.group) th { padding-top: 12px; } /* + the row's own 8px under its buttons */
.settings-section > .table-wrap table.data > tbody:first-of-type > tr:first-child:not(.group) > td { padding-top: 16px; } /* + the 5px a two-line cell sits its icon lower */
.settings-section > .table-wrap table.data > tbody:last-child > tr:last-child > td { padding-bottom: 21px; }
/* pages made of sections (a shared folder, the profile, export): compact — 20px above and 21px below every section's content, on both columns */
.content.flush > section.settings-section { padding-top: 20px; padding-bottom: 20px; }
.content.flush > section.settings-section > :not(.settings-intro):not(.intro-resizer) { margin-top: -20px; margin-bottom: -21px; padding-top: 20px; padding-bottom: 21px; }
.content.flush > section.settings-section > .table-wrap:not(.settings-intro):not(.intro-resizer) { padding-top: 0; padding-bottom: 0; } /* a list keeps its own room (the rows' padding) */
@media (min-width: 1101px) { /* a page of sections shorter than the window: the last one runs to the bottom, its column line with it, and no line closes it */
    .content.flush:has(> section.settings-section) { display: flex; flex-direction: column; }
    .content.flush:has(> section.settings-section) > * { flex-shrink: 0; }
    .content.flush > section.settings-section:last-of-type { flex-grow: 1; border-bottom: 0; padding-bottom: 21px; } /* 21px: the height the missing line took */
    /* the same for a settings form made of sections (AI assistant, notifications) when a section is its last part */
    .content.flush:has(> form:last-of-type > section.settings-section:last-child) { display: flex; flex-direction: column; }
    .content.flush:has(> form:last-of-type > section.settings-section:last-child) > * { flex-shrink: 0; }
    .content.flush > form:last-of-type:not(:has(~ section, ~ div)):has(> section.settings-section:last-child) { flex-grow: 1; display: flex; flex-direction: column; }
    .content.flush > form:last-of-type:not(:has(~ section, ~ div)) > section.settings-section:last-child { flex-grow: 1; border-bottom: 0; padding-bottom: 29px; }
}
@media (max-width: 1100px) {
    .settings-section { grid-template-columns: minmax(0, 1fr); }
    .settings-section > :not(.settings-intro):not(.intro-resizer) { margin: 0; padding: 0; border-left: 0; }
    .intro-resizer { display: none; } /* one column: nothing to resize */
    .settings-section > .table-wrap { margin: 0 -28px -29px; border-left: 0; }
    .content.flush > section.settings-section > :not(.settings-intro):not(.intro-resizer) { margin-top: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
    .content.flush > section.settings-section > .table-wrap:not(.settings-intro):not(.intro-resizer) { margin: 0 -28px -21px; } /* one column: the list runs edge to edge again, down to the section's line */
    .settings-section > .table-wrap table.data :is(th, td):first-child { padding-left: 28px; }
}
@media (max-width: 920px) {
    .settings-section > .table-wrap { margin-left: -14px; margin-right: -14px; }
    .content.flush > section.settings-section > .table-wrap:not(.settings-intro):not(.intro-resizer) { margin-left: -14px; margin-right: -14px; }
    .settings-section > .table-wrap table.data :is(th, td):first-child { padding-left: 14px; }
    .settings-section > .table-wrap table.data :is(th, td):last-child { padding-right: 14px; }
}
@media (max-width: 920px) {
    .settings-section { padding: 20px 14px; }
    .settings-foot { padding: 18px 14px 96px; }
}

/* ---------- settings pages (notifications): sections run edge to edge with a line between them; tables bleed to both edges ---------- */
.page-section { padding: 24px 28px; border-bottom: 1px solid var(--border); }
.page-section:last-child { border-bottom: 0; padding-bottom: 0; }
.page-section > .card-head { padding: 0 0 12px; }
.page-section > .table-wrap { margin: 0 -28px; }
@media (max-width: 920px) {
    .page-section { padding: 18px 14px; }
    .page-section:last-child { padding-bottom: 0; }
    .page-section > .table-wrap { margin: 0 -14px; }
}

/* ---------- user form: the role as two described choices ---------- */
.role-choices { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.role-choice { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.role-choice input { margin: 3px 0 0; accent-color: var(--text); }
.role-choice .strong { display: block; }
.role-choice .hint { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- record pages: the details column folds away (button at the end of the title, app.js); the title stays ---------- */
.record-collapse { margin-left: auto; align-self: center; }
.record-collapse .i { transition: transform .15s; }
@media (max-width: 1199px) { .record-collapse { display: none; } }
@media (min-width: 1200px) {
    html[data-record="collapsed"] .content.split { grid-template-columns: 0 minmax(0, 1fr); }
    html[data-record="collapsed"] .content.split::before,
    html[data-record="collapsed"] .content.split .record-main,
    html[data-record="collapsed"] .content.split .split-resizer { display: none; }
    html[data-record="collapsed"] .content.split > .flash { position: fixed; top: 76px; right: 28px; z-index: 30; max-width: 440px; margin: 0; } /* messages stay readable while the column is folded */
    html[data-record="collapsed"] .record-collapse .i { transform: rotate(180deg); }
    html[data-record="collapsed"] .content.split .record-tabs { justify-self: end; margin: 0 72px 0 0; } /* folded: the tabs move right, next to the expand button, clear of the title */
}

/* ---------- leads: "seen" is outlined, one step past the filled "new" ---------- */

/* ---------- settings-style pages (My profile, Export): inside a section the picture row needs no line of its own ---------- */
.settings-section .avatar-edit { margin-bottom: 22px; padding-bottom: 0; border-bottom: 0; }

/* ---------- task subtasks: a summary with progress, then one calm row per step; row tools appear on hover ---------- */
.subtask-panel { margin: calc(-1 * var(--bleed-t, 0px)) calc(-1 * var(--bleed-r, 0px)) 0 calc(-1 * var(--bleed-l, 0px)); }
.subtask-panel > :not(.subtask-list), .subtask-panel .subtask-item { padding-left: var(--bleed-l, 16px); padding-right: var(--bleed-r, 16px); } /* on the rows, not the list: .subtask-list { padding: 0 } would win, and the row lines stay edge to edge */
.subtask-summary { display: flex; align-items: center; gap: 24px; box-sizing: border-box; min-height: 92px; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } /* 92px: its line meets the title block's line across the divider */
.subtask-summary-text { flex: 1; min-width: 0; }
.subtask-summary-text h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.subtask-summary-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.subtask-meter { display: flex; align-items: center; gap: 12px; flex: 0 1 260px; min-width: 140px; }
.subtask-meter .progress { flex: 1; width: auto; height: 4px; }
.subtask-percent { min-width: 38px; color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.subtask-list { margin: 0; padding: 0; list-style: none; }
.subtask-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.subtask-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.subtask-check .i { width: 20px; height: 20px; }
.subtask-check:hover, .subtask-check:focus-visible { color: var(--text); }
.subtask-item.is-done .subtask-check { color: var(--success); }
.subtask-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.subtask-title { color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.subtask-item.is-done .subtask-title { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--muted); text-decoration-thickness: 1.5px; }
.subtask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: var(--muted); font-size: 12.5px; }
.subtask-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.subtask-meta > span + span::before { content: '·'; margin: 0 8px; color: var(--faint); }
.subtask-meta .i { width: 12px; height: 12px; }
.subtask-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.subtask-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding: 0 3px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; }
.subtask-file > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; }
.subtask-file > a .i { width: 13px; height: 13px; flex: none; color: var(--muted); }
.subtask-file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.subtask-file-size { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.subtask-file .icon-btn { width: 22px; height: 22px; }
.subtask-file .icon-btn .i { width: 13px; height: 13px; }
.subtask-actions { display: flex; align-self: center; gap: 8px; opacity: 0; transition: opacity .12s; } /* in the middle of the row */
.subtask-item:hover .subtask-actions, .subtask-item:focus-within .subtask-actions { opacity: 1; }
@media (hover: none) { .subtask-actions { opacity: 1; } }
.subtask-add { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.subtask-add-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted); }
.subtask-add-mark .i { width: 18px; height: 18px; }
.subtask-add input { min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.subtask-add input::placeholder { color: var(--muted); }
.subtask-add:focus-within .subtask-add-mark { color: var(--text); }
.subtask-add .btn { opacity: 0; transition: opacity .12s; }
.subtask-add:focus-within .btn { opacity: 1; }
@media (hover: none) { .subtask-add .btn { opacity: 1; } }

/* ---------- task subtasks (old table layout) ---------- */
.subtasks .name-cell { white-space: normal; }
.subtasks .name-cell > .inline-form { display: contents; }
.row-icon.sub-check { padding: 0; background: var(--surface); color: var(--muted); cursor: pointer; }
.row-icon.sub-check:hover { border-color: var(--border-strong); color: var(--text); }
.subtasks tr.is-done .sub-check { color: var(--success); }
.subtasks .sub-title { min-width: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.subtasks tr.is-done .sub-title { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--muted); text-decoration-thickness: 1.5px; }
.subtasks .sub-files { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.subtasks .sub-files li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.subtasks .sub-files .link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.subtasks .sub-files .link .i { width: 13px; height: 13px; flex-shrink: 0; }
.sub-file-delete { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.sub-file-delete:hover { background: var(--danger-soft); color: var(--danger); }
.sub-file-delete .i { width: 13px; height: 13px; }
.subtasks tr.sub-add td { padding-top: 9px; padding-bottom: 9px; } /* the 36px button + 9 + 9 + the line: the 55px of every other row */
.sub-add-form { display: flex; align-items: center; gap: 10px; }
.sub-add-form .row-icon { color: var(--muted); }
.sub-add-form input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.sub-add-form input::placeholder { color: var(--muted); }
.sub-add-form:focus-within .row-icon { border-color: var(--border-strong); color: var(--text); }

/* ---------- record pages: the full-width title block is 68px with its line (like the chat heads); title and tagline keep to one line each ---------- */
@media (min-width: 1200px) {
    .content.split .page-head-text { box-sizing: border-box; height: 68px; padding-top: 0; padding-bottom: 0; }
    .content.split .record-tabs { align-self: stretch; } /* the tabs fill the title row: the current tab's underline lies on the row's line */
    .content.split .record-tabs a { height: auto; }
    .content.split .page-head-text :is(.page-title, .page-sub) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* record pages: a list's column headings stay in view while its rows scroll */
@media (min-width: 921px) {
    .content.split .record-aside .table-wrap { overflow-x: visible; } /* no scroll box of its own, so the headings can stick to the column */
    .content.split .record-aside table.data > thead th { position: sticky; top: calc(-1 * var(--bleed-t, 0px)); z-index: 3; background: var(--frame); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); } /* the line drawn as a shadow moves with the heading; no second border under it */
}
.record-tab-tools .subtask-meter { width: 220px; flex: none; } /* the task's progress, beside its tabs */
/* the Invoices page before the first invoice: three steps to get there */
.invoice-steps { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 620px; margin: 0; padding: 0; list-style: none; text-align: left; }
.invoice-steps li { display: flex; align-items: center; gap: 16px; box-sizing: border-box; min-height: 76px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.invoice-step-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 600; }
.invoice-steps li.is-done .invoice-step-mark { background: var(--success-soft); color: var(--success); }
.empty .invoice-step-mark .i { width: 16px; height: 16px; color: currentColor; }
.invoice-step-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.invoice-step-body strong { color: var(--text); font-size: 14px; font-weight: 600; }
.invoice-step-body span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.frame .invoice-steps .btn { flex: none; width: auto; padding: 0 14px; font-size: 13px; }
.frame .invoice-steps .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.frame .invoice-steps .btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
.empty.secret-empty .invoice-steps + * { margin-top: 0; }
/* the page's scrollbar (desktop): a line on its left, like the other column dividers. A styled WebKit scrollbar needs the
   standard scrollbar-width / scrollbar-color unset on that element. */
@media (min-width: 921px) {
    .main > .content { scrollbar-width: auto; scrollbar-color: auto; }
    .main > .content::-webkit-scrollbar { width: 11px; }
    .main > .content::-webkit-scrollbar-track { background: var(--frame); border-left: 1px solid var(--border); }
    .main > .content::-webkit-scrollbar-thumb { border: 3px solid transparent; border-left-width: 4px; border-radius: 6px; background: color-mix(in srgb, var(--text) 24%, transparent); background-clip: padding-box; }
    .main > .content::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 40%, transparent); }
}
/* new invoice: what to invoice, grouped by project */
.invoice-picker { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.invoice-group { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.invoice-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; float: left; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.invoice-group-head + * { clear: both; }
.invoice-check { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.invoice-group-name { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.invoice-group-hours { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.invoice-item + .invoice-item { border-top: 1px solid var(--border); }
.invoice-item:hover { background: var(--surface-2); }
.invoice-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invoice-item-label { color: var(--text); font-size: 13.5px; }
.invoice-item-meta { color: var(--muted); font-size: 12.5px; }
.invoice-picker input[type="checkbox"]:not(.sr-only) { width: 18px; height: 18px; border-radius: 4px; }
.invoice-picker input[type="checkbox"]:not(.sr-only)::before { display: none; }
.invoice-picker input[type="checkbox"]:not(.sr-only):checked { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; }
.invoice-picker input[type="checkbox"]:not(.sr-only):indeterminate { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--primary); }
/* a section stretched to the bottom of the page keeps its fields at the top: the grid's extra height stays below them */
.settings-section > .form-grid, .settings-section > .share-copy-block { align-content: start; }
table.data.invoice-lines { table-layout: fixed; } /* the set column widths hold; the description takes all the rest */
table.data.invoice-lines th.col-title, table.data.invoice-lines td.col-title { width: auto; min-width: 0; }
table.invoice-lines :is(th, td):nth-child(2) { width: 76px; }
table.invoice-lines :is(th, td):nth-child(3) { width: 96px; }
table.invoice-lines :is(th, td):nth-child(4) { width: 116px; }
table.invoice-lines :is(th, td):nth-child(5) { width: 76px; }
table.invoice-lines :is(th, td):nth-child(6) { width: 124px; }
table.invoice-lines :is(th, td).actions { width: 68px; }
table.invoice-lines .input.amount { padding-left: 8px; padding-right: 10px; }
table.invoice-lines th.amount { padding-right: 14px; }
table.invoice-lines th:nth-child(6).amount { padding-right: 4px; }
table.invoice-lines :is(th, td):nth-child(2) { width: 64px; }
table.invoice-lines :is(th, td):nth-child(3) { width: 84px; }
table.invoice-lines :is(th, td):nth-child(4) { width: 100px; }
table.invoice-lines :is(th, td):nth-child(5) { width: 64px; }
table.invoice-lines :is(th, td):nth-child(6) { width: 112px; }
table.invoice-lines :is(th, td).actions { width: 60px; }
table.invoice-lines .select { padding-left: 10px; padding-right: 24px; background-position: right 8px center; }
/* amounts: room on both sides — a clear gap after the VAT field and before the remove button; totals end on the same edge */
table.invoice-lines :is(th, td):nth-child(6) { width: 132px; padding-left: 16px; padding-right: 16px; }
table.invoice-lines :is(th, td).actions { width: 52px; padding-left: 0; }
table.invoice-lines th:nth-child(6).amount { padding-right: 16px; }
.invoice-lines-foot { padding-right: 68px; }
.invoice-totals { min-width: 300px; }
/* an empty list placed straight on the page (time registration): the message in the middle of the page, like other empty lists */
.content.flush > .empty { justify-content: center; box-sizing: border-box; min-height: calc(100vh - 62px); }
/* an issued invoice's lines: headed columns, numbers on the right, the totals ending on the amounts' edge */
.settings-section > .table-wrap table.data.invoice-view > thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
table.invoice-view { table-layout: fixed; }
table.invoice-view th { padding-top: 16px; padding-bottom: 8px; }
table.invoice-view :is(th, td):nth-child(2) { width: 64px; }
table.invoice-view :is(th, td):nth-child(3) { width: 64px; }
table.invoice-view :is(th, td):nth-child(4) { width: 120px; }
table.invoice-view :is(th, td):nth-child(5) { width: 72px; }
table.invoice-view :is(th, td):nth-child(6) { width: 132px; }
table.invoice-view td { font-variant-numeric: tabular-nums; }
.invoice-lines-foot.is-view { padding-right: 28px; }
/* user page → Time registration: the period's charts (partials/time-insights) */
.insights { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.insights-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.insights-period .segmented a.on { background: var(--surface-3); color: var(--text); }
.insights-date { margin: 0; }
.insights-date .input, .insights-date input { width: 150px; height: 36px; }
.insights-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.insights-kpis .kpi { padding: 16px 18px; gap: 4px; }
.insights-kpis .kpi + .kpi { border-left: 1px solid var(--border); }
.insights-kpis .kpi-value { font-size: 24px; }
.insights-kpis .kpi-value.warn { color: var(--warning); }
.kpi-sub { color: var(--muted); font-size: 12.5px; }
.insights-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.insights-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.insights-head h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.insights-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.insights-legend .dot + * , .insights-legend .dot.other { margin-left: 10px; }
.insights .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.insights .dot.billable { background: var(--chart-1); }
.insights .dot.other { background: color-mix(in srgb, var(--chart-1) 28%, transparent); }
.chart-columns { display: block; width: 100%; height: auto; }
.chart-columns .grid { stroke: var(--border); stroke-width: 1; }
.chart-columns .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-columns .billable { fill: var(--chart-1); }
.chart-columns .other { fill: var(--chart-1); fill-opacity: .28; }
.chart-columns .hit { fill: transparent; }
.chart-columns .col:hover .hit { fill: var(--surface-2); }
.chart-columns .col:focus-visible { outline: none; }
.chart-columns .col:focus-visible .hit { fill: var(--surface-3); }
.hbars { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; color: var(--text); text-decoration: none; font-size: 13px; }
a.hbar-row:hover .hbar-name { text-decoration: underline; }
.hbar-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbar-value { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar-track { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.hbar-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--chart-1); }
.insights-more { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
.weekday-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; height: 180px; }
.weekday { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.weekday-value { height: 16px; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.weekday-track { position: relative; flex: 1; width: 100%; max-width: 34px; }
.weekday-track i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px 4px 2px 2px; background: var(--chart-1); min-height: 2px; }
.weekday:hover .weekday-track i { background: var(--text); }
.weekday-name { color: var(--text-2); font-size: 12px; }
.ring-wrap { display: flex; align-items: center; gap: 24px; }
.chart-ring { flex: none; }
.chart-ring .track { stroke: var(--surface-3); }
.chart-ring .value { stroke: var(--chart-1); }
.chart-ring .ring-value { fill: var(--text); font-size: 22px; font-weight: 600; font-family: inherit; }
.ring-facts { display: grid; gap: 8px; flex: 1; min-width: 0; margin: 0; font-size: 13px; }
.ring-facts > div { display: flex; justify-content: space-between; gap: 12px; }
.ring-facts dt { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ring-facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip { position: fixed; z-index: 90; max-width: 320px; padding: 7px 10px; border-radius: var(--radius); background: #101418; color: #fff; font-size: 12.5px; line-height: 1.4; pointer-events: none; }
.insights-entries-title { margin: 0 0 8px; color: var(--text); font-size: 14px; font-weight: 600; }
@media (max-width: 1280px) { .insights-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .insights-kpis .kpi:nth-child(4) { border-left: 0; } .insights-kpis .kpi:nth-child(n+4) { border-top: 1px solid var(--border); } }
@media (max-width: 1100px) { .insights-grid { grid-template-columns: minmax(0, 1fr); } }
.insights-date .date-input, .insights-date input { width: 150px; }
.insights-kpis .kpi-value { font-size: 20px; white-space: nowrap; }
/* dashboard figures: each one a link to its page, whatever its value — they look and react like links */
.brief-stat { cursor: pointer; transition: background-color .12s; }
.content.dash .brief-stat:hover { background: var(--surface-2); }
.content.dash .brief-stat:hover strong { color: var(--text); }
.content.dash .brief-stat.is-alert:hover strong { color: var(--danger); }
.content.dash .brief-stat:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.content.dash .brief-stat:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.content.dash .brief-stat:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.insights-period { justify-content: space-between; }
.insights-range { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.insights-range .insights-date .input, .insights-range .insights-date .date-input { box-sizing: border-box; width: 150px; height: 36px; }
.insights-period .segmented a { padding: 0 10px; }
.insights-range .insights-date .input, .insights-range .insights-date .date-input { width: 136px; }
/* the entries as one more card under the charts: the list inside it, its lines running from edge to edge of the card */
.insights-entries { margin-top: -8px; padding: 18px 0 0; overflow: hidden; }
.insights-entries .insights-head { padding: 0 20px; }
.insights-entries .insights-head h3 .muted { margin-left: 6px; font-weight: 500; }
.insights-entries .insights-head .link { font-size: 13px; }
.content.split .record-aside .insights-entries .table-wrap { margin: 0; }
.content.split .record-aside .insights-entries table.data :is(th, td):first-child { padding-left: 20px; }
.content.split .record-aside .insights-entries table.data :is(th, td):last-child { padding-right: 20px; }
.insights-entries table.data > tbody > tr:last-child > td { border-bottom: 0; }
.insights-entries table.data > thead th { position: static; box-shadow: none; }
.insights-entries .insights-more { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.insights .empty, .record-aside .insights ~ .empty { padding: 48px 20px; }
/* ---------- calendar (partials/calendar-month): a month of weeks, Monday first ---------- */
.cal-month { display: flex; flex-direction: column; min-width: 0; }
.content.flush > .cal-month { min-height: calc(100vh - 62px); }
.cal-grid-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cal-grid-head span { padding: 10px 12px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cal-days { display: grid; flex: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(118px, 1fr); }
.cal-day { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 8px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cal-day.is-other .cal-date { color: var(--faint); }
.cal-day.is-other .cal-item { opacity: .6; }
.cal-date { align-self: flex-start; min-width: 22px; height: 22px; margin-bottom: 2px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; color: var(--text-2); font-size: 12.5px; font-weight: 500; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-day.is-today .cal-date { background: var(--primary); color: var(--primary-text); }
.cal-item { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1; text-decoration: none; }
.cal-item:hover { background: var(--surface-3); }
.cal-item .i { flex: none; width: 13px; height: 13px; color: var(--muted); }
.cal-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-time { flex: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cal-item.kind-call { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.cal-item.kind-project { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cal-item.kind-project .cal-title { font-weight: 500; }
.cal-item.is-overdue { background: var(--danger-soft); color: var(--danger); }
.cal-item.is-overdue .i { color: var(--danger); }
.cal-item.is-urgent .i { color: var(--danger); }
.cal-item.is-done .cal-title { color: var(--muted); text-decoration: line-through; }
.cal-more { position: relative; }
.cal-more > summary { list-style: none; padding: 2px 6px; border-radius: 4px; color: var(--muted); font-size: 12px; cursor: pointer; }
.cal-more > summary::-webkit-details-marker { display: none; }
.cal-more > summary:hover { background: var(--surface-2); color: var(--text); }
.cal-more-panel { position: absolute; top: -40px; left: -10px; z-index: 30; display: flex; flex-direction: column; gap: 3px; width: 260px; max-height: 320px; overflow-y: auto; padding: 10px; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.cal-more-date { margin: 0 0 6px; color: var(--text); font-size: 13px; font-weight: 600; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 12px 20px; color: var(--muted); font-size: 12.5px; }
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .i { width: 13px; height: 13px; }
.cal-legend-count { margin-left: auto; }
.cal-month-label { min-width: 118px; text-align: center; }
/* inside a record page's tab: the grid runs edge to edge of the column */
.record-aside .cal-month { margin: calc(-1 * var(--bleed-t, 0px)) calc(-1 * var(--bleed-r, 0px)) 0 calc(-1 * var(--bleed-l, 0px)); }
.record-aside .cal-days { grid-auto-rows: minmax(104px, auto); }
.record-aside .cal-legend { padding-left: calc(var(--bleed-l, 20px) - 9px); }
@media (max-width: 920px) { .cal-days { grid-auto-rows: minmax(84px, auto); } .cal-title { display: none; } .cal-item { justify-content: center; padding: 0; } .cal-time { display: none; } }
/* an empty message under tools that stay on top (the time charts' period bar): the message in the middle of the space below them */
.content.split .record-aside > .card:has(> .card-body > .insights > .empty),
.content.split .record-aside > .card > .card-body:has(> .insights > .empty) { flex: 1; display: flex; flex-direction: column; }
.content.split .record-aside .insights:has(> .empty) { flex: 1; margin-bottom: 0; }
.content.split .record-aside .insights > .empty { flex: 1; justify-content: center; padding-top: 0; padding-bottom: 86px; } /* lifted by the period bar and its gap, so the message sits in the middle of the whole column */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px var(--bleed-l, 20px); border-bottom: 1px solid var(--border); }
.cal-toolbar h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.cal-toolbar .cal-month-label { display: none; } /* the month is the heading on the left */
.cal-toolbar .cal-week .btn ~ .btn { border-left: 1px solid var(--border-btn); }
/* calendar, refined: quiet day cells, items as cards with a coloured edge, text with room for descenders */
.cal-grid-head span { padding: 12px 14px; text-align: left; }
.cal-days { grid-auto-rows: minmax(132px, 1fr); }
.cal-day { gap: 4px; padding: 8px 10px 10px; transition: background-color .12s; }
.cal-day:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.cal-date { height: 26px; min-width: 26px; margin: 0 0 4px -2px; padding: 0 7px; border-radius: 13px; font-size: 13px; line-height: 26px; }
.cal-day.is-today .cal-date { font-weight: 600; }
.cal-item { box-sizing: border-box; height: auto; min-height: 26px; gap: 7px; padding: 4px 8px 5px 7px; border-radius: 5px; border-left: 3px solid var(--border-strong); background: var(--surface-2); font-size: 12.5px; line-height: 1.35; }
.cal-item:hover { background: var(--surface-3); }
.cal-title { padding-bottom: 1px; } /* g, j, p and y keep their tails: the ellipsis box is as tall as the line */
.cal-item .i { width: 14px; height: 14px; }
.cal-item.kind-task { border-left-color: var(--chart-1); }
.cal-item.kind-project { border-left-color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cal-item.kind-project:hover { background: var(--surface-2); }
.cal-item.kind-call { border-left-color: #2f6fdb; background: color-mix(in srgb, #2f6fdb 8%, var(--surface)); }
.cal-item.kind-call:hover { background: color-mix(in srgb, #2f6fdb 14%, var(--surface)); }
.cal-time { font-weight: 600; color: var(--text-2); }
.cal-item.is-overdue { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.cal-item.is-overdue:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.cal-item.is-done { border-left-color: var(--border); background: transparent; color: var(--muted); }
.cal-item.is-done .cal-title { color: var(--muted); text-decoration: none; }
.cal-item.is-done .i { color: var(--success); }
.cal-more > summary { margin-top: 1px; padding: 3px 8px; font-size: 12px; font-weight: 500; }
.cal-more-panel { top: -8px; width: 280px; gap: 4px; padding: 12px; border-radius: 8px; }
.cal-legend { gap: 8px 22px; padding: 12px 20px; border-top: 1px solid var(--border); }
.cal-legend > span .i { width: 14px; height: 14px; }
.content.flush > .cal-month .cal-days { border-bottom: 0; }
.record-aside .cal-days { grid-auto-rows: minmax(118px, auto); }
/* the legend ends clear of the floating + button in the corner */
.cal-legend { padding-right: 88px; }
.cal-days > .cal-day:nth-last-child(-n+7) { border-bottom: 0; } /* the last week ends on the legend's own line */
.record-aside .cal-month { margin-bottom: calc(-1 * var(--bleed-b, 28px)); }

/* Meeting times in the portal: working days on the left, the open day's free times on the right, the picks below */
.slot-picker { display: grid; grid-template-columns: 252px minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.slot-picker.is-invalid { border-color: var(--danger); }
.slot-cal { padding: 14px 14px 12px; border-right: 1px solid var(--border); }
.slot-cal-month, .slot-panel-title { display: flex; align-items: center; height: 28px; margin: 0 0 8px; color: var(--text); font-size: 13px; font-weight: 600; }
.slot-cal-month { padding-left: 2px; }
.slot-cal-head, .slot-cal-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.slot-cal-head span { padding: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.slot-day { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
button.slot-day { border-color: var(--border); }
button.slot-day:hover { background: var(--surface-2); }
.slot-day.is-open, .slot-day.is-open:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.slot-day.is-off { color: var(--faint); font-weight: 400; cursor: default; opacity: .6; }
.slot-day.has-pick::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.slot-times { min-width: 0; padding: 14px 16px 16px; }
.slot-panel + .slot-panel { margin-top: 16px; }
.slot-picker.is-ready .slot-panel:not(.is-open) { display: none; }
.slot-picker.is-ready .slot-panel + .slot-panel { margin-top: 0; }
.slot-panel-title { font-weight: 600; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slot-time { position: relative; display: block; }
.slot-picker .slot-time input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } /* over its time, invisible: the field styles for inputs must not apply */
.slot-time span { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none; }
.slot-time:hover span { background: var(--surface-2); }
.slot-time input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.slot-time input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.slot-picker .slot-time input[type="checkbox"]:disabled { opacity: 0; cursor: not-allowed; }
.slot-time input:disabled + span { color: var(--faint); background: var(--surface-2); opacity: .6; }
.slot-chosen { display: none; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 48px; box-sizing: border-box; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.slot-picker.is-ready .slot-chosen { display: flex; }
.slot-chips { display: contents; margin: 0; padding: 0; list-style: none; }
.slot-chip { display: inline-flex; align-items: center; gap: 2px; height: 30px; box-sizing: border-box; padding: 0 3px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.slot-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.slot-chip-x:hover { background: var(--surface-2); color: var(--text); }
.slot-chip-x .i { width: 13px; height: 13px; }
.slot-chosen-empty { color: var(--muted); font-size: 12.5px; }
.slot-picker.is-invalid .slot-chosen-empty { color: var(--danger); }
@media (max-width: 640px) {
    .slot-picker { grid-template-columns: minmax(0, 1fr); }
    .slot-cal { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* The calendar legend stays in view at the bottom while the month scrolls; where the view has an address its entries
   filter it (one kind and/or overdue or done, click again to clear) */
.cal-legend { position: sticky; bottom: 0; z-index: 5; gap: 4px 6px; padding: 8px 88px 8px 11px; background: var(--surface); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; border-radius: var(--radius); color: var(--muted); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.cal-legend .cal-legend-item .i { width: 14px; height: 14px; }
a.cal-legend-item:hover { background: var(--surface-2); color: var(--text); }
a.cal-legend-item.is-on { box-shadow: inset 0 0 0 1px var(--border-btn); font-weight: 500; }

/* Portal messages (flash) sit under the page head's text, inside its white band */
.portal-hero > .portal-flashes { padding: 0 max(32px, calc((100% - 1200px) / 2 + 32px)) 26px; background: transparent; }
.portal-hero-inner:has(+ .portal-flashes .flash) { padding-bottom: 20px; }
.portal-flashes:not(:has(.flash)) { display: none; }
@media (max-width: 720px) {
    .portal-hero > .portal-flashes { padding: 0 16px 20px; }
    .portal-hero-inner:has(+ .portal-flashes .flash) { padding-bottom: 16px; }
}

/* Meeting requests (team): the list, and the confirm and decline dialogs */
dialog.dialog.req-dialog { width: min(520px, calc(100vw - 32px)); }
.req-summary { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.req-summary strong { color: var(--text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.req-summary > span { color: var(--muted); font-size: 12.5px; }
.req-summary p { max-height: 132px; margin: 6px 0 0; overflow-y: auto; color: var(--text-2); font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.req-times { display: flex; flex-direction: column; gap: 6px; }
.req-time { display: flex; align-items: center; gap: 12px; min-height: 50px; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.req-time:hover { background: var(--surface-2); }
.req-time:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.req-time input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.req-time-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.req-time-body strong { color: var(--text); font-size: 13.5px; font-weight: 600; }
.req-time-body span { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.req-time-note { margin-left: auto; color: var(--danger); font-size: 12px; text-align: right; }
.req-time.is-off { background: var(--surface-2); cursor: not-allowed; }
.req-time.is-off .req-time-body { opacity: .6; }
.req-dialog .panel-note { margin: 0 0 8px; max-width: none; }
table.data.req-table th.req-col-times { width: 34%; }
table.data.req-table th.req-col-status { width: 150px; }
.req-table tr.group th { vertical-align: bottom; }
.req-group-count { margin-left: 4px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.req-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.req-slot { display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.req-slot .i { width: 13px; height: 13px; color: var(--success); }
.req-slot.is-off { border-style: dashed; background: transparent; color: var(--faint); font-weight: 400; text-decoration: line-through; }
.req-slot.is-past { background: transparent; color: var(--muted); font-weight: 400; }
.req-slot.is-picked { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: var(--success-soft); }
.req-status { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.req-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.req-status.is-pending::before { background: var(--warning); }
.req-status.is-accepted::before { background: var(--success); }
.req-status.is-declined::before { background: var(--danger); }
.req-status.is-cancelled { color: var(--muted); }
.req-status-when { display: block; margin: 1px 0 0 14px; color: var(--muted); font-size: 12px; white-space: nowrap; }
td.req-none { padding-top: 14px; padding-bottom: 14px; color: var(--muted); }
td.req-none .i { width: 15px; height: 15px; margin-right: 8px; color: var(--success); vertical-align: -3px; }
/* the calls week: events as flat blocks */
.cal-event { border-radius: 0; }
.req-note { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 680px; margin: 3px 0 0; color: var(--text-2); font-size: 12.5px; }
.req-note .i { flex: none; width: 13px; height: 13px; color: var(--muted); }
.req-note-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.req-note-files { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--muted); }
.req-note-text + .req-note-files { margin-left: 8px; }
.req-summary .req-files { margin-top: 10px; }
.req-table { table-layout: fixed; min-width: 860px; } /* columns keep their widths; a long note shortens with … — narrower, the table scrolls */
table.data.req-table th.actions { width: 144px; } /* two buttons plus the page gutter */
@media (max-width: 920px) { .req-table { table-layout: auto; } }
/* legend swatches: a small copy of a calendar item in its colours, so the edge and background colours explain themselves */
.cal-legend-item { gap: 8px; }
/* calendar items and their legend swatches: square corners, so the coloured edge is a straight bar */
.cal-item { border-radius: 0; }
/* Calendar items and legend: a tinted background with a bar of the same colour on the left, no outlines or rounding. Grey task,
   violet project date, blue call; a state recolours it: amber urgent, red overdue, green done. Hover darkens a touch. */
.cal-month { --cal-task: var(--surface-2); --cal-project: var(--accent-soft); --cal-call: color-mix(in srgb, #2f6fdb 11%, var(--surface)); --cal-urgent: var(--warning-soft); --cal-overdue: var(--danger-soft); --cal-done: var(--success-soft); --cal-hover: rgba(16, 20, 24, .05); }
[data-theme="dark"] .cal-month { --cal-call: color-mix(in srgb, #6d9ef0 16%, var(--surface)); --cal-project: rgba(169, 159, 245, .14); --cal-hover: rgba(255, 255, 255, .06); }
.cal-month { --bar-task: #a3a8b1; --bar-project: #6e62e5; --bar-call: #2f6fdb; --bar-urgent: #e08a00; --bar-overdue: var(--danger); --bar-done: #3aa57f; }
[data-theme="dark"] .cal-month { --bar-task: #6b717c; --bar-project: #a99ff5; --bar-call: #6d9ef0; --bar-urgent: #f0a020; --bar-done: #5fbf93; }
.cal-month .cal-item, .cal-legend .cal-legend-item { --bg: var(--cal-task); --bar: var(--bar-task); border: 0; border-left: 3px solid var(--bar); border-radius: 0; box-shadow: none; background: var(--bg); color: var(--text); }
.cal-month .cal-item { padding-left: 7px; }
.cal-month .cal-item.kind-project, .cal-legend .sample-project { --bg: var(--cal-project); --bar: var(--bar-project); }
.cal-month .cal-item.kind-call, .cal-legend .sample-call { --bg: var(--cal-call); --bar: var(--bar-call); }
.cal-month .cal-item.is-urgent, .cal-legend .sample-urgent { --bg: var(--cal-urgent); --bar: var(--bar-urgent); color: var(--warning); }
.cal-month .cal-item.is-overdue, .cal-legend .sample-overdue { --bg: var(--cal-overdue); --bar: var(--bar-overdue); color: var(--danger); }
.cal-month .cal-item.is-done, .cal-legend .sample-done { --bg: var(--cal-done); --bar: var(--bar-done); color: var(--muted); }
.cal-month .cal-item.is-done .cal-title { color: var(--muted); }
.cal-month .cal-item:hover, .cal-month .cal-item.kind-project:hover, .cal-month .cal-item.kind-call:hover, .cal-month .cal-item.is-overdue:hover, .cal-legend a.cal-legend-item:hover { background: var(--bg); box-shadow: inset 0 0 0 100vmax var(--cal-hover); }
.cal-month .cal-item .i { width: 12px; height: 12px; }
.cal-month .cal-item.is-done .i, .cal-legend .sample-done .i:first-child { color: var(--success); }
.cal-legend .cal-legend-item { gap: 6px; height: 26px; padding: 0 10px 0 8px; font-size: 12.5px; }
.cal-legend .cal-legend-item .i { width: 12px; height: 12px; }
.cal-legend a.cal-legend-item.is-on { font-weight: 600; box-shadow: none; }

/* The record dialog: a calendar item's page in a frame over the calendar (app.js data-record-modal) */
.record-modal { position: fixed; width: min(1240px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); max-width: none; max-height: none; box-sizing: border-box; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--frame); box-shadow: 0 24px 64px rgba(0, 0, 0, .22); }
.record-modal::backdrop { background: rgba(0, 0, 0, .4); }
.record-modal-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--frame); }
.record-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; } /* level with the page actions in the frame's top bar */
/* ...and the page inside it: no navigation, breadcrumb, back button or search — the dialog is its frame */
.is-embedded .sidebar, .is-embedded .sidebar-resizer, .is-embedded .backdrop, .is-embedded .skip-link, .is-embedded .nav-toggle,
.is-embedded .crumbs, .is-embedded .topbar [data-back], .is-embedded .topbar-actions > a[href="/search"] { display: none; }
.is-embedded .topbar { padding-right: 62px; } /* the close button (16px from the edge, 36px wide) plus the same 10px gap as between the actions */
.is-embedded .topbar-actions { margin-left: auto; }
@media (min-width: 1200px) { /* a record page: one line — its actions float at the right of the title row, beside the close button, with no bar of their own */
    .is-embedded .main.split > .topbar, [data-theme="dark"] .is-embedded .main.split > .topbar { position: fixed; top: 0; right: 0; left: auto; z-index: 30; min-height: 0; padding: 16px 62px 0 0; border: 0; background: transparent; pointer-events: none; }
    .is-embedded .main.split > .topbar .topbar-actions { pointer-events: auto; }
    .is-embedded .record-collapse { display: none; } /* folding the details makes little sense in a dialog, and its place is the actions' */
    .is-embedded .content.split .record-tabs { max-width: calc(100% - 300px); }
}

/* Calls week: events look like calls in the month calendar — a blue tint with a blue bar on the left, square corners, dark
   text; a call that is over fades to grey */
.cal { --event-bar: #2f6fdb; --event-bg: color-mix(in srgb, #2f6fdb 11%, var(--surface)); --event-hover: color-mix(in srgb, #2f6fdb 18%, var(--surface)); }
[data-theme="dark"] .cal { --event-bar: #6d9ef0; --event-bg: color-mix(in srgb, #6d9ef0 16%, var(--surface)); --event-hover: color-mix(in srgb, #6d9ef0 24%, var(--surface)); }
.cal .cal-event, :root[data-theme="dark"] .cal .cal-event { gap: 0; padding: 3px 8px 3px 7px; border: 0; border-left: 3px solid var(--event-bar); border-radius: 0; background: var(--event-bg); color: var(--text); }
.cal .cal-event:hover { background: var(--event-hover); }
.cal .cal-event-title { font-weight: 600; }
.cal .cal-event-time { color: var(--text-2); opacity: 1; }
.cal .cal-event.is-past { --event-bar: var(--border-strong); --event-bg: var(--surface-2); --event-hover: var(--surface-3); color: var(--muted); }
.cal .cal-event.is-past .cal-event-time { color: var(--muted); }
.cal-month .cal-item .cal-state { font-weight: 600; } /* "Urgent:", "Overdue:", "Done:" before the title */

/* UI review follow-ups */
@media (min-width: 1200px) { .content.split .record-aside .cal-legend { bottom: -28px; } } /* the aside scrolls with a 28px bottom padding: the legend rests on its real edge */
.cal-month .cal-item, .cal-more > summary { scroll-margin-bottom: 56px; } /* a focused item never hides under the sticky legend */
@media (max-width: 920px) { /* phones: the month grid shows coloured marks; these beat the desktop rules above */
    .cal-month .cal-days { grid-auto-rows: minmax(84px, auto); }
    .cal-month .cal-item { justify-content: center; min-height: 10px; padding: 0; }
    .cal-month .cal-title, .cal-month .cal-time { display: none; }
}
/* A mail in the activity feed: the message runs to the column's right edge, under the reply button */
.feed-item.feed-mail { grid-template-rows: auto auto auto; }
.feed-mail > .feed-main { display: contents; }
.feed-mail > .row-icon { grid-column: 1; grid-row: 1 / span 2; }
.feed-mail .feed-title { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 1px; }
.feed-mail .feed-meta { grid-column: 2; grid-row: 2; min-width: 0; }
.feed-mail > .feed-actions { grid-column: 3; grid-row: 1 / span 2; }
.feed-mail .feed-message { grid-column: 2 / -1; grid-row: 3; }
/* legend rhythm: the sample bars start where the items' bars start in the day cells (10px), with the same 10px between samples
   and the same inner spacing as an item (3px bar, 7px to the text, 10px after it) */
.cal-legend, .record-aside .cal-legend { column-gap: 10px; padding-left: 10px; }
.cal-legend .cal-legend-item { padding: 0 10px 0 7px; }
.record-aside > .cal-month { flex: 1 0 auto; } /* a record's Calendar tab fills its column: the legend sits on the bottom edge, not above a strip of nothing */
.content.flush > .card > .card-head:has(> .gantt-legend) { border-bottom: 1px solid var(--border); } /* Timeline: the legend bar ends in a line above the weeks */
/* Toasts (a success message, "Copied") centre on the page area, not the whole window: the sidebar is not part of the page */
@media (min-width: 921px) {
    .frame .flash.flash-success { left: var(--sidebar-w, 252px); }
    html[data-nav="collapsed"] .frame .flash.flash-success { left: 68px; }
    body:has(> .frame) .copy-toast { left: calc(var(--sidebar-w, 252px) + (100vw - var(--sidebar-w, 252px)) / 2); }
    html[data-nav="collapsed"] body:has(> .frame) .copy-toast { left: calc(68px + (100vw - 68px) / 2); }
    .is-embedded .frame .flash.flash-success { left: 0; } /* inside the record dialog there is no sidebar */
    body.is-embedded:has(> .frame) .copy-toast { left: 50%; }
}