/* The shell and the shared components. Loaded after main.css, which holds each app's own layout.
   Sections: base, icons, shell (sidebar, content panel, phone bar), page bar, buttons, fields,
   filter tabs, tables and rows, cards, dialogs, home, tools directory, sign-in, chat, small parts. */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--w-regular);
    line-height: 1.45;
    font-feature-settings: "cv01", "ss03", "calt";
    -webkit-font-smoothing: antialiased;
    background: var(--bg-app);
    color: var(--text-1);
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

#app { display: flex; flex-direction: column; height: 100vh; }
@supports (height: 100dvh) { body, #app { height: 100dvh; } }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); }
b, strong { font-weight: var(--w-strong); }
h1, h2, h3, h4 { font-weight: var(--w-strong); letter-spacing: -0.01em; }
code, pre, kbd, samp, .CodeMirror { font-family: var(--font-code); }

table, .tabular, [class*="amount"], [class*="-amt"], [class*="balance"] { font-variant-numeric: tabular-nums; }

::selection { background: rgba(90, 152, 243, 0.34); }

* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.13) transparent; }

/* A crisp ring, shown for keyboard focus and in fields; never a glow. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
:where(input, select, textarea):focus-visible { outline-offset: -1px; }

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

/* ── Icons ────────────────────────────────────────────────────────────── */
.ico {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -3px;
}
.ico-14 { width: 14px; height: 14px; stroke-width: 2; vertical-align: -2px; }
.ico-18 { width: 18px; height: 18px; stroke-width: 1.6; }
.ico-20 { width: 20px; height: 20px; stroke-width: 1.5; }
.ico-22 { width: 22px; height: 22px; stroke-width: 1.5; }
.ico-32 { width: 32px; height: 32px; stroke-width: 1.25; }

/* ── Shell ────────────────────────────────────────────────────────────── */
#main-view {
    display: none;
    flex-direction: row;
    height: 100vh;
    background: var(--bg-app);
}
@supports (height: 100dvh) { #main-view { height: 100dvh; } }
#main-view.active { display: flex; }

/* Sidebar: the quietest surface. It shares the window colour; the content sits on it as a panel. */
#sidebar {
    width: var(--sidebar-w);
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 10px 14px;
    flex: none;
}

#avatar-container {
    width: 34px; height: 34px; flex: none;
    border-radius: var(--r-3);
    background: var(--bg-raised);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}
#avatar-canvas { width: 34px; height: 34px; display: block; }

#header-info { flex: 1; min-width: 0; }
#navi-name {
    font-family: var(--font-pixel);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#navi-status { font-size: var(--fs-micro); line-height: 14px; color: var(--text-3); }
#header-toggle { display: none; }

.hdr-btn {
    width: 28px; height: 28px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-2);
    background: transparent; color: var(--text-3);
    text-decoration: none; position: relative;
    transition: background-color var(--t-fast), color var(--t-fast);
}
#notif-bell { padding: 0; cursor: pointer; }
.notif-badge {
    position: absolute; top: -3px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill);
    background: var(--danger-solid); color: #fff;
    font-size: 10px; font-weight: var(--w-strong); line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bg-app);
}

#header-search { position: relative; flex: 1 1 100%; min-width: 0; }
#header-search > .ico {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: var(--text-4); pointer-events: none;
}
#global-search-input {
    width: 100%; height: var(--control-h);
    padding: 0 44px 0 30px;
    background: var(--hover);
    border: 1px solid transparent;
    border-radius: var(--r-2);
    font-size: var(--fs-dense);
    color: var(--text-1);
    transition: background-color var(--t-fast), border-color var(--t-fast);
}
#global-search-input::placeholder { color: var(--text-3); }
#global-search-input:focus { background: var(--bg-control); border-color: var(--border-strong); }
.search-kbd {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    font-family: var(--font-sans); font-size: 10.5px; line-height: 16px;
    padding: 0 5px; border-radius: var(--r-1);
    color: var(--text-3); background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-subtle);
    pointer-events: none;
}
#global-search-input:focus ~ .search-kbd { display: none; }

#global-search-results {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 440px; max-width: calc(100vw - 24px); max-height: min(480px, 70vh);
    overflow-y: auto; z-index: 1000;
    background: var(--bg-overlay); border-radius: var(--r-3);
    box-shadow: var(--shadow-float);
    padding: 4px;
}
.gs-group-label { padding: 8px 10px 4px; font-size: var(--fs-micro); font-weight: var(--w-medium); color: var(--text-3); }
.gs-item { padding: 6px 10px; border-radius: var(--r-2); cursor: pointer; }
.gs-item:hover, .gs-item.gs-selected { background: var(--selected); }
.gs-item-title { font-size: var(--fs-dense); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-sub { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: var(--fs-dense); }

.notif-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 380px; max-width: calc(100vw - 24px); max-height: min(520px, 76vh);
    overflow: hidden; z-index: 1000;
    background: var(--bg-overlay); border-radius: var(--r-3);
    box-shadow: var(--shadow-float);
    cursor: default; text-align: left;
}
.nf-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.nf-title { font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); }
.nf-header-actions { display: flex; gap: 2px; }
.nf-action-btn { background: transparent; border: 0; border-radius: var(--r-1); color: var(--text-3); font-size: var(--fs-small); padding: 3px 7px; }
.nf-list { max-height: 440px; overflow-y: auto; }
.nf-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; align-items: flex-start; }
.nf-item:last-child { border-bottom: 0; }
.nf-item.nf-unread { box-shadow: inset 2px 0 0 var(--accent-text); }
.nf-item-icon { flex: none; color: var(--text-3); padding-top: 1px; }
.nf-item-body { flex: 1; min-width: 0; }
.nf-item-content { font-size: var(--fs-dense); color: var(--text-1); line-height: 1.4; }
.nf-item-meta { display: flex; gap: 8px; margin-top: 2px; }
.nf-item-topic, .nf-item-time { font-size: var(--fs-micro); color: var(--text-3); }
.nf-dismiss { background: transparent; border: 0; color: var(--text-4); padding: 2px; border-radius: var(--r-1); flex: none; }
.nf-empty, .nf-loading { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: var(--fs-dense); }

.sb-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 2px 8px 12px;
    scrollbar-width: none;
}
.sb-scroll:hover { scrollbar-width: thin; }

#tab-bar, .sb-group { display: flex; flex-direction: column; gap: 1px; }
.sb-group { margin-top: 14px; }
.sb-label {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 24px; padding: 0 8px;
    border: 0; background: transparent; border-radius: var(--r-2);
    font-size: var(--fs-micro); font-weight: var(--w-medium); color: var(--text-3);
    text-align: left;
}
button.sb-label .ico { color: var(--text-4); opacity: 0; transition: transform var(--t-fast), opacity var(--t-fast); }
.sb-group.is-collapsed button.sb-label .ico { transform: rotate(-90deg); opacity: 1; }
.sb-group.is-collapsed > :not(.sb-label) { display: none; }

/* One row style for every destination: the eight sections and each tool. */
.tab-btn, .sb-app {
    position: relative; text-decoration: none;
    display: flex; align-items: center; gap: 9px;
    width: 100%; height: var(--row-h); padding: 0 8px;
    border: 0; border-radius: var(--r-2);
    background: transparent; color: var(--text-2);
    font-size: var(--fs-dense); font-weight: var(--w-regular);
    text-align: left; white-space: nowrap;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.tab-btn > .ico, .sb-app > .ico { color: var(--text-3); transition: color var(--t-fast); }
.tab-label, .sb-app-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab-btn.active, .sb-app.active { background: var(--selected); color: var(--text-1); font-weight: var(--w-medium); }
.tab-btn.active > .ico, .sb-app.active > .ico { color: var(--text-1); }
.tab-btn .notif-badge, .tab-badge, .sb-count {
    position: static; box-shadow: none;
    min-width: 0; height: auto; padding: 0;
    background: transparent; color: var(--text-3);
    font-size: var(--fs-micro); font-weight: var(--w-medium); font-variant-numeric: tabular-nums;
}
.tab-btn-apps { display: none; }
/* The phone app's Add button: only inside the app, where it opens the app's own actions. */
.tab-btn-native { display: none; }

/* The content panel */
#main-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    margin: 8px 8px 8px 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-4);
    overflow: hidden;
}

@media (hover: hover) {
    .hdr-btn:hover, .tab-btn:hover, .sb-app:hover, button.sb-label:hover { background: var(--hover); color: var(--text-1); }
    .tab-btn:hover > .ico, .sb-app:hover > .ico { color: var(--text-2); }
    button.sb-label:hover .ico { opacity: 1; }
    .nf-item:hover, .nf-action-btn:hover { background: var(--hover); }
    .nf-action-btn:hover, .nf-dismiss:hover { color: var(--text-1); }
}

/* Phone and narrow windows: the same destinations as a top bar and a four-item bottom bar. */
@media (max-width: 899px) {
    #main-view { flex-direction: column; }
    #sidebar { display: contents; }
    #header {
        order: 0; flex-wrap: nowrap; gap: 8px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px));
        background: var(--bg-app);
    }
    #avatar-container, #avatar-canvas { width: 32px; height: 32px; }
    #header-info, .search-kbd, #observation-link { display: none; }
    #header-search { flex: 1 1 auto; order: 1; }
    #notif-bell { order: 2; width: 36px; height: 36px; }
    #global-search-input { height: 36px; font-size: 16px; }
    #global-search-results, .notif-dropdown { position: fixed; left: 10px; right: 10px; top: calc(56px + env(safe-area-inset-top, 0px)); width: auto; max-width: none; }

    #main-col { order: 1; margin: 0; border: 0; border-radius: 0; }

    .sb-scroll {
        order: 2; flex: none; overflow: visible;
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--bg-app);
        border-top: 1px solid var(--border-subtle);
    }
    #sb-apps, .sb-system { display: none; }
    #tab-bar { flex-direction: row; gap: 0; }
    .tab-btn-apps { display: flex; }
    .in-app .tab-btn-native { display: flex; }
    #tab-bar .tab-btn {
        flex: 1 1 0; height: 52px; padding: 6px 0 4px;
        flex-direction: column; justify-content: center; gap: 3px;
        font-size: var(--fs-micro); font-weight: var(--w-medium); color: var(--text-3);
        background: transparent;
    }
    #tab-bar .tab-btn > .ico { width: 22px; height: 22px; stroke-width: 1.5; }
    #tab-bar .tab-btn.active { color: var(--text-1); }
    #tab-bar .tab-label { flex: none; }
    #tab-bar .tab-btn .notif-badge {
        position: absolute; top: 4px; left: calc(50% + 6px); right: auto;
        display: inline-flex; min-width: 15px; height: 15px; padding: 0 4px;
        background: var(--danger-solid); color: #fff; font-size: 10px; border-radius: var(--r-pill);
    }
}

/* ── Page bar: one header for every screen ────────────────────────────── */
.app-bar,
#email-toolbar, #contacts-toolbar, #props-toolbar, #leases-toolbar, #deleg-toolbar, #hiring-toolbar,
#mktg-toolbar, #proj-toolbar, #notes-toolbar, #bills-toolbar, #tax-toolbar, #kb-toolbar, #lc-toolbar, #draft-toolbar,
.cal-toolbar, .txn-header {
    display: flex; align-items: center; gap: 8px;
    min-height: var(--bar-h); padding: 8px 14px 8px 10px;
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    flex: none; flex-wrap: wrap;
}
.app-bar-title,
#email-toolbar-title, #contacts-toolbar-title, #props-toolbar-title, #leases-toolbar-title, #deleg-toolbar-title,
#hiring-toolbar-title, #mktg-toolbar-title, #proj-toolbar-title, #notes-toolbar-title, #bills-toolbar-title,
#tax-toolbar-title, .cal-title {
    flex: 1; min-width: 0;
    font-family: var(--font-sans);
    font-size: 15px; font-weight: var(--w-strong); letter-spacing: -0.01em;
    color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-bar > .app-bar-title:first-child { padding-left: 6px; }
.app-bar-spacer { flex: 1; }

.app-back-btn, .cal-toolbar .app-back-btn, .txn-header .app-back-btn {
    width: 28px; height: 28px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-2);
    background: transparent; color: var(--text-3);
    font-size: 0;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.app-back-btn .ico { width: 16px; height: 16px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn, .task-btn, .notif-btn, .um-edit-btn, .um-small-btn, .cd-action-btn, .co-btn, .draft-btn-sm, .ct-bulk-btn,
.mt-sync-btn, .cal-today-btn, .cal-nav-btn, .tx-hdr-btn, .txn-rule-btn, .email-rule-btn, .prop-section-btn,
.tax-autofill-btn, .mt-add-col-btn, .email-refresh-btn, .txn-connect-btn.secondary,
.btn-primary, .ae-submit, .settings-save-btn, .create-btn, .create-task-btn, .mt-add-btn, .mt-submit-btn,
.co-btn-primary, .draft-btn-accent, .tax-generate-btn, .txn-connect-btn, .txn-auto-cat-btn, .lc-study-btn,
#contacts-add-btn, #props-add-btn, #deleg-add-btn, #hiring-add-btn, #mktg-add-btn, #proj-add-btn, #notes-add-btn,
#bills-add-btn, #tax-add-btn, #login-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--control-h); padding: 0 11px;
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    background: var(--bg-control); color: var(--text-1);
    font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: var(--w-medium); line-height: 1;
    white-space: nowrap; text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-primary, .ae-submit, .settings-save-btn, .create-btn, .create-task-btn, .mt-add-btn, .mt-submit-btn,
.co-btn-primary, .draft-btn-accent, .tax-generate-btn, .txn-connect-btn, .txn-auto-cat-btn, .lc-study-btn,
#contacts-add-btn, #props-add-btn, #deleg-add-btn, #hiring-add-btn, #mktg-add-btn, #proj-add-btn, #notes-add-btn,
#bills-add-btn, #tax-add-btn, #login-btn {
    background: var(--accent-solid); border-color: transparent; color: var(--on-accent);
}
.txn-connect-btn.secondary { background: var(--bg-control); border-color: var(--border); color: var(--text-1); }
.btn-ghost, .cal-nav-btn, .email-refresh-btn { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-icon, .cal-nav-btn, .email-refresh-btn { width: var(--control-h); padding: 0; }
.btn-danger { color: var(--error); }
.btn-sm, .um-small-btn, .um-edit-btn { height: var(--control-h-sm); padding: 0 8px; font-size: var(--fs-small); }
.ae-submit { width: 100%; height: 36px; margin-top: 8px; font-size: var(--fs-body); }
.btn:disabled, .btn-primary:disabled, .ae-submit:disabled { opacity: 0.5; cursor: default; }
.btn:active, .btn-primary:active, .ae-submit:active { transform: scale(0.98); }

@media (hover: hover) {
    .app-back-btn:hover { background: var(--hover); color: var(--text-1); }
    .btn:hover, .task-btn:hover, .notif-btn:hover, .um-edit-btn:hover, .um-small-btn:hover, .cd-action-btn:hover,
    .co-btn:hover, .draft-btn-sm:hover, .ct-bulk-btn:hover, .mt-sync-btn:hover, .cal-today-btn:hover,
    .tx-hdr-btn:hover, .txn-rule-btn:hover, .email-rule-btn:hover, .prop-section-btn:hover,
    .tax-autofill-btn:hover, .mt-add-col-btn:hover, .txn-connect-btn.secondary:hover {
        background: var(--bg-overlay); border-color: var(--border-strong); color: var(--text-1);
    }
    .btn-ghost:hover, .cal-nav-btn:hover, .email-refresh-btn:hover { background: var(--hover); border-color: transparent; color: var(--text-1); }
    .btn-primary:hover, .ae-submit:hover, .settings-save-btn:hover, .create-btn:hover, .create-task-btn:hover,
    .mt-add-btn:hover, .mt-submit-btn:hover, .co-btn-primary:hover, .draft-btn-accent:hover, .tax-generate-btn:hover,
    .txn-connect-btn:hover, .txn-auto-cat-btn:hover, .lc-study-btn:hover,
    #contacts-add-btn:hover, #props-add-btn:hover, #deleg-add-btn:hover, #hiring-add-btn:hover, #mktg-add-btn:hover,
    #proj-add-btn:hover, #notes-add-btn:hover, #bills-add-btn:hover, #tax-add-btn:hover, #login-btn:hover {
        background: var(--accent-solid-hover); border-color: transparent; color: var(--on-accent);
    }
    .task-btn.danger:hover, .ct-bulk-btn.danger:hover, .btn-danger:hover { color: var(--error); border-color: rgba(244, 123, 116, 0.4); }
}

/* ── Fields ───────────────────────────────────────────────────────────── */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    background: var(--bg-control);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: 6px 10px;
    font-size: var(--fs-dense);
}
:where(textarea) { line-height: 1.5; }
:where(input, textarea)::placeholder { color: var(--text-4); }
:where(input, select, textarea):focus { border-color: var(--focus); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-solid); width: 14px; height: 14px; vertical-align: -2px; }
select { cursor: pointer; }
option, optgroup { background: var(--bg-overlay); color: var(--text-1); }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }

.ae-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ae-field label, .cf-checkbox-group label { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--text-2); letter-spacing: 0; text-transform: none; }
.ae-field input:not([type="checkbox"]):not([type="radio"]), .ae-field select, .ae-field textarea {
    width: 100%; min-height: 34px; padding: 7px 10px;
    background: var(--bg-control); color: var(--text-1);
    border: 1px solid var(--border); border-radius: var(--r-2);
    font-size: var(--fs-body);
}
.ae-field textarea { resize: vertical; }

/* Search fields inside screens share one look. */
.tx-search-input, #contacts-search, #props-search, #hiring-search, #mktg-search, #proj-search, #notes-search,
#kb-search, #email-search, #comms-search, #txn-search {
    height: var(--control-h); padding: 0 10px;
    background: var(--hover); border: 1px solid transparent; border-radius: var(--r-2);
    font-family: var(--font-sans); font-size: var(--fs-dense); color: var(--text-1);
}

/* ── Filter tabs: text tabs with a quiet selected state, never coloured pills ── */
.app-filter-tab, .contacts-tab, .props-tab, .leases-tab, .deleg-domain-tab, .hiring-stage-tab, .mktg-tab, .proj-tab,
.notes-tab, .kb-domain-tab, .comms-domain-tab, .txn-type-tab, .email-account-tab, .cal-view-tab, .draft-filter-tab,
.bank-tab, .bills-cat-tab, .fin-domain-tab, .fin-prop-tab, .fin-sub-tab, .fin-year-tab, .mt-section-tab, .cd-tab {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: var(--control-h-sm); padding: 0 9px;
    border: 1px solid transparent; border-radius: var(--r-2);
    background: transparent; color: var(--text-3);
    font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: var(--w-medium); line-height: 1;
    letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.app-filter-tab.active, .contacts-tab.active, .props-tab.active, .leases-tab.active, .deleg-domain-tab.active,
.hiring-stage-tab.active, .mktg-tab.active, .proj-tab.active, .notes-tab.active, .kb-domain-tab.active,
.comms-domain-tab.active, .txn-type-tab.active, .email-account-tab.active, .cal-view-tab.active,
.draft-filter-tab.active, .bank-tab.active, .bills-cat-tab.active, .fin-domain-tab.active, .fin-prop-tab.active,
.fin-sub-tab.active, .fin-year-tab.active, .mt-section-tab.active, .cd-tab.active {
    background: var(--selected); color: var(--text-1); border-color: transparent;
}
@media (hover: hover) {
    .app-filter-tab:hover, .contacts-tab:hover, .props-tab:hover, .leases-tab:hover, .deleg-domain-tab:hover,
    .hiring-stage-tab:hover, .mktg-tab:hover, .proj-tab:hover, .notes-tab:hover, .kb-domain-tab:hover,
    .comms-domain-tab:hover, .txn-type-tab:hover, .email-account-tab:hover, .cal-view-tab:hover,
    .draft-filter-tab:hover, .bank-tab:hover, .bills-cat-tab:hover, .fin-domain-tab:hover, .fin-prop-tab:hover,
    .fin-sub-tab:hover, .fin-year-tab:hover, .mt-section-tab:hover, .cd-tab:hover { color: var(--text-1); }
}
.email-tab-badge, .email-account-tab:not(.active) .email-tab-badge {
    background: transparent; color: var(--text-3); padding: 0; min-width: 0;
    font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
}

/* The rows that hold those tabs */
#contacts-domain-tabs, #props-type-tabs, #leases-status-tabs, #deleg-domain-tabs, #hiring-stage-tabs, #mktg-status-tabs,
#proj-status-tabs, #notes-domain-tabs, #bank-domain-tabs, #bills-cat-tabs, #tax-cat-tabs, #email-account-tabs,
#email-domain-bar, .cal-view-tabs, .fin-domain-tabs, .fin-prop-tabs, .fin-sub-tabs, .fin-year-tabs {
    display: flex; align-items: center; gap: 2px;
    background: transparent;
    scrollbar-width: none;
}
#contacts-domain-tabs, #props-type-tabs, #leases-status-tabs, #deleg-domain-tabs, #hiring-stage-tabs, #mktg-status-tabs,
#proj-status-tabs, #notes-domain-tabs, #bank-domain-tabs, #bills-cat-tabs, #tax-cat-tabs, #email-account-tabs {
    padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; flex: none;
}

/* Underline tabs for the sections inside a screen */
.kb-inner-tab {
    flex: none; padding: 0 2px; margin: 0 10px; height: 38px;
    display: inline-flex; align-items: center;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--text-3); font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: var(--w-medium);
    cursor: pointer;
}
.kb-inner-tab.active { color: var(--text-1); border-bottom-color: var(--text-1); background: transparent; }
#kb-inner-tabs, #lc-inner-tabs { background: transparent !important; border-bottom: 1px solid var(--border-subtle) !important; padding: 0 6px !important; }

/* ── Tables and rows ──────────────────────────────────────────────────── */
.ct-table-header, .txn-table-header, .comms-table-header, .kb-header-row, .doc-list-header, .ph-head, .cd-sheet-head,
.fin-table-header td, .um-table th, .trust-table th {
    background: var(--bg-surface);
    color: var(--text-3);
    font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--w-medium);
    letter-spacing: 0; text-transform: none;
    border-bottom: 1px solid var(--border);
}
.ct-table-row, .txn-table-row, .comms-table-row, .kb-row, .doc-list-row, .ph-row, .cd-sheet-row, .email-row, .bill-row,
.deleg-row, .hiring-row, .contact-row, .um-table td, .trust-table td {
    border-bottom: 1px solid var(--border-subtle);
}
@media (hover: hover) {
    .ct-table-row:hover, .txn-table-row:hover, .comms-table-row:hover, .kb-row:hover, .doc-list-row:hover, .ph-row:hover,
    .cd-sheet-row:hover, .email-row:hover, .bill-row:hover, .deleg-row:hover, .hiring-row:hover, .contact-row:hover {
        background: var(--hover);
    }
}
.email-row.selected, .doc-list-row.selected, .ct-table-row.ct-selected, .tx-convo-item.active { background: var(--selected); }

/* A field inside a table row stays quiet until it is pointed at or used. */
.ct-table-row select, .comms-table-row select, .kb-row select, .txn-table-row select, .ph-row select,
.ct-table-row input:not([type="checkbox"]), .ph-row input:not([type="checkbox"]), .cd-sheet-row input:not([type="checkbox"]) {
    background: transparent; border-color: transparent; border-radius: var(--r-1);
    color: var(--text-2); font-size: var(--fs-small);
}
.ct-table-row select:hover, .comms-table-row select:hover, .kb-row select:hover, .txn-table-row select:hover, .ph-row select:hover,
.ct-table-row select:focus, .comms-table-row select:focus, .kb-row select:focus, .txn-table-row select:focus, .ph-row select:focus,
.ct-table-row input:not([type="checkbox"]):hover, .ph-row input:not([type="checkbox"]):hover,
.ct-table-row input:not([type="checkbox"]):focus, .ph-row input:not([type="checkbox"]):focus {
    background: var(--bg-control); border-color: var(--border); color: var(--text-1);
}

/* ── Cards and panels ─────────────────────────────────────────────────── */
.program-card, .task-card, .fin-card, .lc-curriculum-card, .prop-card, .ins-card {
    background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-3); box-shadow: none;
}
.panel-content { padding: 16px 20px 28px; }

.empty-state, .contacts-empty, .cd-empty, .tx-empty, .sl-empty, .mt-today-empty, .prop-empty-section, .txn-rules-empty {
    padding: 56px 24px; text-align: center;
    color: var(--text-3); font-size: var(--fs-dense); font-style: normal;
}

/* ── Dialogs: centred on a desk, a bottom sheet on a phone ────────────── */
[id$="-backdrop"], .um-edit-backdrop { background: var(--scrim); }
#add-app-panel, #rename-app-panel, [id$="-form-panel"], #mt-add-panel, #mt-proj-panel, #mt-col-panel, .form-panel, .um-edit-panel {
    background: var(--bg-overlay);
    border: 0; box-shadow: var(--shadow-float);
    color: var(--text-1);
}
.add-app-header {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-sans); font-size: 15px; font-weight: var(--w-strong); letter-spacing: -0.01em;
    color: var(--text-1); margin-bottom: 14px;
}
.add-app-header button {
    width: 28px; height: 28px; border: 0; border-radius: var(--r-2);
    background: transparent; color: var(--text-3); font-size: 14px;
}
@media (hover: hover) { .add-app-header button:hover { background: var(--hover); color: var(--text-1); } }
@media (min-width: 900px) {
    #add-app-sheet, #rename-app-sheet, [id$="-form-sheet"], #mt-add-sheet, #mt-proj-sheet, #mt-col-sheet, #email-compose-sheet {
        align-items: center;
    }
    #add-app-panel, #rename-app-panel, [id$="-form-panel"], #mt-add-panel, #mt-proj-panel, #mt-col-panel,
    #email-compose-sheet .form-panel {
        border-radius: var(--r-4); max-height: 86vh;
    }
}

/* ── Home ─────────────────────────────────────────────────────────────── */
#dashboard-content { padding: 0 !important; }
.home { max-width: 1040px; margin: 0 auto; padding: 36px 40px 56px; }
.home-top { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.home-heading { flex: 1; min-width: 0; }
.home-date { font-size: var(--fs-dense); color: var(--text-3); margin-bottom: 2px; }
.home-greeting { font-size: 24px; line-height: 30px; font-weight: var(--w-strong); letter-spacing: -0.02em; color: var(--text-1); }
.home-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.home-brief { font-size: 15px; line-height: 24px; color: var(--text-2); max-width: 68ch; margin-bottom: 30px; text-wrap: pretty; }
.home-brief b { color: var(--text-1); font-weight: var(--w-medium); }
.home-brief a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
.home-section + .home-section { margin-top: 30px; }
.home-section-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.home-section-title { font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); }
.home-section-count { font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-section-link { margin-left: auto; font-size: var(--fs-small); color: var(--text-3); background: none; border: 0; padding: 2px 4px; border-radius: var(--r-1); }
.home-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 38px; padding: 7px 8px; margin: 0 -8px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0; cursor: pointer;
}
.home-row:last-child { border-bottom-color: transparent; }
.home-row-time { width: 62px; flex: none; font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-row-main { flex: 1; min-width: 0; }
.home-row-title { font-size: var(--fs-dense); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row-sub { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row-end { flex: none; font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-row-end.is-strong { color: var(--text-1); font-size: var(--fs-dense); }
.home-row .ico { color: var(--text-3); }
.home-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-4); }
.home-none { padding: 14px 0 4px; font-size: var(--fs-dense); color: var(--text-3); }
@media (hover: hover) {
    .home-row:hover { background: var(--hover); border-radius: var(--r-2); border-bottom-color: transparent; }
    .home-section-link:hover { color: var(--text-1); background: var(--hover); }
}
@media (max-width: 899px) {
    .home { padding: 20px 16px 40px; }
    .home-top { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
    .home-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .home-greeting { font-size: 22px; line-height: 28px; }
}

/* ── Tools directory (the Apps tab) ───────────────────────────────────── */
#apps-home { flex: 1; overflow-y: auto; padding: 0; }
#apps-grid { max-width: 1040px; margin: 0 auto; padding: 28px 40px 56px; }
.dir-title { font-size: 20px; font-weight: var(--w-strong); letter-spacing: -0.02em; margin-bottom: 20px; }
.dir-group-label { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--text-3); padding: 0 8px 6px; }
.dir-group { margin-bottom: 26px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
.app-icon {
    display: flex; align-items: center; gap: 11px;
    min-height: 38px; padding: 6px 8px;
    border-radius: var(--r-2); cursor: pointer;
    color: var(--text-1); font-size: var(--fs-body);
    transition: background-color var(--t-fast);
}
.app-icon > .ico { color: var(--text-3); }
.app-icon-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-badge { font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .app-icon:hover { background: var(--hover); } }
@media (max-width: 899px) {
    #apps-grid { padding: 18px 12px 36px; }
    .dir-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .app-icon { min-height: 46px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
    .app-icon > .ico { width: 20px; height: 20px; stroke-width: 1.5; }
}

/* ── Sign-in ──────────────────────────────────────────────────────────── */
#login-screen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: var(--bg-app);
}
.login-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: stretch; }
.login-navi {
    width: 72px; height: 72px; align-self: center; margin-bottom: 18px;
    border-radius: 16px; background: var(--bg-raised) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--border);
    object-fit: cover; object-position: top;
}
#login-title {
    font-family: var(--font-pixel); font-weight: 400;
    font-size: 26px; line-height: 30px; letter-spacing: 0.06em;
    text-align: center; color: var(--text-1);
}
.login-sub { text-align: center; color: var(--text-3); font-size: var(--fs-dense); margin: 4px 0 26px; }
#login-screen label { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--text-2); margin-bottom: 5px; }
#login-screen input {
    width: 100%; height: 38px; margin-bottom: 12px; padding: 0 12px;
    background: var(--bg-control); border: 1px solid var(--border); border-radius: var(--r-2);
    font-size: 16px; color: var(--text-1);
}
#login-btn { height: 38px; margin-top: 6px; font-size: var(--fs-body); }
#login-error { min-height: 20px; margin-top: 12px; text-align: center; font-size: var(--fs-dense); color: var(--error); }

/* ── Chat ─────────────────────────────────────────────────────────────── */
#chat-messages { flex: 1; overflow-y: auto; padding: 28px 24px 12px; display: flex; flex-direction: column; gap: 22px; }
#chat-messages > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.message { max-width: none; padding: 0; border-radius: 0; font-size: 15px; line-height: 1.6; word-wrap: break-word; }
.message.navi { background: transparent; border: 0; color: var(--text-1); }
.message.operator {
    width: auto !important; max-width: min(80%, 620px) !important; margin-right: calc((100% - min(760px, 100%)) / 2) !important;
    align-self: flex-end; padding: 8px 14px;
    background: var(--selected); color: var(--text-1);
    border-radius: 16px 16px 4px 16px;
}
.message.system { align-self: center; text-align: center; background: transparent; color: var(--text-3); font-size: var(--fs-dense); font-style: normal; }
.message.navi, .message.operator { white-space: pre-wrap; }   /* replies and messages keep their line breaks */
.message .stream-status { margin-left: 8px; color: var(--text-3); font-size: var(--fs-dense); }
.message.tool-exec, .message.notification, .message.approval-request, .message.workflow-plan, .message.workflow-complete {
    padding: 10px 14px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-3); font-size: var(--fs-dense);
}
.message.approval-request { border-color: rgba(234, 179, 88, 0.45); }
.tool-input, .tool-output, .approval-details, .wf-step-trust { font-family: var(--font-code); font-size: var(--fs-small); }
.tool-name { color: var(--text-1); font-weight: var(--w-medium); }

#chat-input-area {
    display: flex; align-items: flex-end; gap: 8px;
    width: calc(100% - 48px); max-width: 760px; margin: 0 auto 20px; padding: 6px;
    background: var(--bg-control); border: 1px solid var(--border); border-radius: 16px;
    transition: border-color var(--t-fast);
}
#chat-input-area:focus-within { border-color: var(--border-strong); }
#chat-input {
    flex: 1; min-height: 34px; max-height: 180px; padding: 7px 6px;
    background: transparent; border: 0; border-radius: 0; resize: none;
    font-size: 15px; line-height: 20px; color: var(--text-1);
}
#chat-input:focus-visible { outline: none; }
#chat-input::placeholder { color: var(--text-3); }
#new-chat-btn, #send-btn {
    width: 34px; height: 34px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
}
#new-chat-btn { background: transparent; color: var(--text-3); }
#send-btn { background: var(--text-1); color: var(--bg-app); transition: opacity var(--t-fast); }
#send-btn:disabled { opacity: 0.28; cursor: default; }
@media (hover: hover) { #new-chat-btn:hover { background: var(--hover); color: var(--text-1); } }
@media (max-width: 899px) {
    #chat-messages { padding: 16px 14px 8px; }
    #chat-input-area { width: calc(100% - 20px); margin-bottom: 10px; }
    #chat-input { font-size: 16px; }
}

/* ── Settings ─────────────────────────────────────────────────────────── */
#settings-panel { padding: 8px 28px 40px; max-width: 980px; }
.settings-section { margin: 24px 0 0; }
.settings-section h3 {
    font-size: 15px; font-weight: var(--w-strong); letter-spacing: -0.01em; text-transform: none;
    color: var(--text-1); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.setting-row { padding: 9px 0; gap: 16px; }
.setting-row label { font-size: var(--fs-dense); color: var(--text-2); }

/* ── Small parts ──────────────────────────────────────────────────────── */
.trust-badge, .um-role-badge { font-family: var(--font-sans); font-weight: var(--w-medium); border-radius: var(--r-1); padding: 2px 7px; }
.um-role-owner { background: var(--accent-tint); color: var(--accent-text); }
#call-overlay { font-family: var(--font-sans) !important; border-radius: var(--r-4) !important; box-shadow: var(--shadow-float) !important; }

/* ── Email ────────────────────────────────────────────────────────────── */
#email-list-pane { width: 372px; min-width: 300px; border-right: 1px solid var(--border-subtle); }
#email-search-bar { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
#email-search { width: 100%; }
#email-account-tabs .email-account-tab[style*="margin-left"] { margin-left: auto; }

.email-row {
    position: relative;
    display: block;
    padding: 10px 16px 10px 20px;
    border-left: 0;
    cursor: pointer;
}
.email-row.selected { background: var(--selected); border-left: 0; }
.email-row-main { min-width: 0; }
.email-row-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.email-sender {
    flex: 1; min-width: 0;
    font-size: var(--fs-dense); font-weight: var(--w-regular); color: var(--text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-date { flex: none; font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.email-subject { font-size: var(--fs-dense); font-weight: var(--w-regular); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-preview, .email-row-account { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* Unread is one signal: a dot, and the sender and subject at full strength. */
.email-row.unread::before {
    content: ""; position: absolute; left: 8px; top: 17px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text);
}
.email-row.unread .email-sender { color: var(--text-1); font-weight: var(--w-strong); }
.email-row.unread .email-subject { color: var(--text-1); font-weight: var(--w-medium); }

/* Row actions wait until the row is pointed at; a starred message keeps its star. */
.email-star, .email-spam-btn, .email-unimp-btn, .email-rule-btn {
    position: absolute; top: 6px;
    width: 26px; height: 26px; padding: 0;
    display: none; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-2);
    background: var(--bg-overlay); color: var(--text-3);
    font-size: 0; opacity: 1;
}
.email-rule-btn { right: 8px; }
.email-unimp-btn { right: 36px; }
.email-spam-btn { right: 64px; }
.email-star { right: 92px; }
.email-star.starred { display: inline-flex; top: auto; bottom: 8px; right: 10px; background: transparent; color: var(--warning); }
.email-star.starred .ico { fill: currentColor; }
.email-spam-btn.is-spam, .email-unimp-btn.is-unimp { color: var(--text-1); }
@media (hover: hover) {
    .email-row:hover .email-star, .email-row:hover .email-spam-btn,
    .email-row:hover .email-unimp-btn, .email-row:hover .email-rule-btn { display: inline-flex; }
    .email-row:hover .email-star.starred { top: 6px; bottom: auto; right: 92px; background: var(--bg-overlay); }
    .email-row:hover .email-date { visibility: hidden; }
    .email-star:hover, .email-spam-btn:hover, .email-unimp-btn:hover, .email-rule-btn:hover { color: var(--text-1); opacity: 1; }
}

.email-detail-header { padding: 22px 28px 16px; border-bottom: 1px solid var(--border-subtle); }
.email-detail-subject { font-size: 20px; line-height: 26px; font-weight: var(--w-strong); letter-spacing: -0.015em; margin-bottom: 10px; }
.email-detail-meta { gap: 2px; font-size: var(--fs-dense); color: var(--text-3); }
.email-detail-meta strong { font-weight: var(--w-regular); color: var(--text-3); display: inline-block; min-width: 42px; }
.email-detail-actions { display: flex; gap: 6px; margin-top: 14px; }
.email-back { display: none; }
.email-detail-body {
    padding: 22px 28px 36px; max-width: 820px;
    font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65; color: var(--text-1);
}
#email-thread-section { padding: 0 28px 28px; max-width: 820px; }
.email-thread-header { font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); border-top: 1px solid var(--border-subtle); }
.email-thread-msg { border: 1px solid var(--border-subtle); border-left-width: 1px !important; background: var(--bg-raised) !important; }
.email-thread-msg.sent .thread-dir { color: var(--text-1); }
.email-load-more { margin: 12px auto; }

@media (max-width: 899px) {
    #email-list-pane { width: 100%; min-width: 0; border-right: 0; }
    #email-detail-pane { display: none; }
    #email-layout.reading #email-list-pane { display: none; }
    #email-layout.reading #email-detail-pane { display: flex; }
    .email-back { display: inline-flex; }
    .email-detail-header, .email-detail-body { padding-left: 16px; padding-right: 16px; }
    .email-row { padding-top: 12px; padding-bottom: 12px; }
}

/* ── Table metrics: one header height, one row height ─────────────────── */
.ct-table-header, .comms-table-header, .txn-table-header, .doc-list-header, .kb-header-row {
    min-height: 32px; padding: 0 14px;
}
.ct-table-row, .comms-table-row, .txn-table-row, .doc-list-row, .kb-row {
    min-height: 34px; padding: 2px 14px; font-size: var(--fs-dense);
}
.ph-head, .ph-row { min-height: 32px; }
.txn-table-header.txn-filter-row { top: 32px; background: var(--bg-surface); }
.ct-table-header > div:hover, .txn-table-header > div:hover, .doc-list-header > div:hover, .comms-table-header > div:hover { color: var(--text-1); }
.txn-table-header.txn-filter-row > div:hover { color: var(--text-3); }
.comms-col-acct, .comms-col-date, .txn-col-date, .ct-col-phone { font-variant-numeric: tabular-nums; }
.txn-col-date { width: 96px; white-space: nowrap; color: var(--text-3); }

/* ── My Tasks ─────────────────────────────────────────────────────────── */
.mt-tabs {
    background: transparent; border-bottom: 1px solid var(--border-subtle);
    padding: 0 8px; min-height: var(--bar-h); align-items: stretch; scrollbar-width: none;
}
.mt-tab {
    padding: 0 10px; font-size: var(--fs-dense); font-weight: var(--w-medium); color: var(--text-3);
    border-bottom: 2px solid transparent;
}
.mt-tab.active { color: var(--text-1); border-bottom-color: var(--text-1); background: transparent; }
.mt-tab-count, .mt-tab.active .mt-tab-count {
    background: transparent; color: var(--text-3); padding: 0; min-width: 0;
    font-size: var(--fs-small); font-weight: var(--w-regular); font-variant-numeric: tabular-nums;
}
.mt-toolbar { background: transparent; border-bottom: 1px solid var(--border-subtle); padding: 8px 14px; }
.mt-kanban-col { background: rgba(255, 255, 255, 0.022); border: 0; border-radius: var(--r-3); }
.mt-kanban-col[data-column="approved"] { border: 0; }
.mt-kanban-col[data-column="approved"] .mt-kanban-header { color: var(--text-1); }
.mt-kanban-header { font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); }
.mt-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-2); box-shadow: none; }
@media (hover: hover) { .mt-tab:hover { color: var(--text-1); } .mt-card:hover { border-color: var(--border-strong); } }

/* ── Money ────────────────────────────────────────────────────────────── */
/* A summary strip: small label over a plain number. Colour only where money came in. */
.fin-summary-cards { display: flex; flex-wrap: wrap; gap: 8px 44px; padding: 20px 20px 16px; }
.fin-card { background: transparent; border: 0; border-radius: 0; padding: 0; text-align: left; }
.fin-card-label { font-size: var(--fs-small); color: var(--text-3); margin-bottom: 2px; }
.fin-card-num { font-family: var(--font-sans); font-size: 20px; font-weight: var(--w-strong); letter-spacing: -0.02em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.fin-card-num.negative { color: var(--text-1); }
.fin-card-num.positive { color: var(--success); }
.fin-chart-box { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--r-3); padding: 14px; }
.fin-section-title { font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); }
.fin-domain-tabs, .fin-sub-tabs, .fin-year-tabs, .fin-prop-tabs {
    background: transparent; border-bottom: 1px solid var(--border-subtle); padding: 6px 14px; gap: 2px;
}
.fin-year-tabs, .fin-prop-tabs { border-bottom: 0; padding-bottom: 0; }
.fin-table td { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.fin-table-total td { border-top: 0; }
.fin-table-grand td { border-top: 1px solid var(--border-strong); background: transparent; font-size: var(--fs-dense); padding: 10px 14px; }

.txn-title { flex: none; margin-right: 6px; overflow: visible; }
.txn-header #bank-connections-bar { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.txn-header .txn-connect-btn, .txn-header .txn-connect-btn.small {
    height: var(--control-h-sm); padding: 0 9px; font-size: var(--fs-small);
    background: var(--bg-control); border-color: var(--border); color: var(--text-1);
}
.txn-filters-row { gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.txn-filters-row #bank-domain-tabs { padding: 0; border: 0; }
.txn-search-input { height: var(--control-h); max-width: 320px; }
.txn-auto-cat-btn { background: var(--bg-control); border-color: var(--border); color: var(--text-1); }
.txn-table-row.txn-anomaly { background: var(--danger-tint); border-left: 0; box-shadow: inset 2px 0 0 var(--error); }
@media (hover: hover) {
    .txn-header .txn-connect-btn:hover, .txn-auto-cat-btn:hover { background: var(--bg-overlay); border-color: var(--border-strong); color: var(--text-1); }
}

/* ── Calendar: a quiet grid; colour belongs to the events ─────────────── */
.cal-toolbar { gap: 6px; }
.cal-title { flex: none; min-width: 150px; text-align: left; font-size: 15px; }
.cal-view-tabs { margin-left: auto; }
.cal-month-header-row, .cal-week-header, .cal-day-allday, .cal-list-day-header { background: transparent; border-bottom: 1px solid var(--border-subtle); }
.cal-month-header-cell, .cal-week-day-name, .cal-week-time-col, .cal-day-hour-label {
    font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--w-medium); color: var(--text-3);
}
.cal-month-header-cell { padding: 8px 0 6px; }
.cal-month-cell { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 4px 5px; min-height: 76px; }
.cal-month-cell.today { background: transparent; }
.cal-month-cell.other-month { opacity: 1; }
.cal-month-cell.other-month .cal-month-day-num { color: var(--text-4); }
.cal-month-day-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; margin-bottom: 2px; padding: 0 4px;
    font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums;
    border-radius: var(--r-pill);
}
.cal-month-cell.today .cal-month-day-num { background: var(--accent-solid); color: var(--on-accent); font-weight: var(--w-strong); }
.cal-month-event {
    font-size: var(--fs-micro); line-height: 16px; padding: 1px 6px; margin-bottom: 2px; border-radius: var(--r-1);
    border-left: 0 !important; background: var(--selected); color: var(--text-1);
}
.cal-month-more { font-size: var(--fs-micro); color: var(--text-3); padding: 0 6px; }
.cal-week-row, .cal-day-hour-row, .cal-week-allday-row, .cal-list-day { border-bottom: 1px solid var(--border-subtle); }
.cal-week-row { min-height: 48px; }
.cal-week-cell, .cal-week-allday-cell, .cal-day-hour-content { border-left: 1px solid var(--border-subtle); }
.cal-week-event, .cal-day-event, .cal-day-allday-event, .cal-week-event.allday {
    background: var(--accent-tint); color: var(--text-1); border-radius: var(--r-1);
    box-shadow: inset 2px 0 0 var(--accent-text); padding: 2px 6px 2px 8px;
}
.cal-list-day-header { font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: var(--w-strong); color: var(--text-1); padding: 10px 16px 6px; }
.cal-list-event { padding: 8px 16px; }
.cal-list-event-time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; min-width: 70px; }
@media (hover: hover) {
    .cal-month-cell:hover { background: var(--hover); }
    .cal-month-event:hover { background: var(--bg-overlay); color: var(--text-1); }
    .cal-list-event:hover { background: var(--hover); }
}

/* ── Texts ────────────────────────────────────────────────────────────── */
.tx-convo-list { background: transparent; border-right: 1px solid var(--border-subtle); width: 320px; min-width: 280px; }
.tx-convo-item { border-bottom: 1px solid var(--border-subtle); padding: 10px 14px; }
.tx-avatar, .cd-avatar { background: var(--bg-control); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border); font-weight: var(--w-medium); }
.bar-search { width: 200px; height: var(--control-h); background: var(--hover); border-color: transparent; }

@media (min-width: 900px) {
    .txn-header { flex-wrap: nowrap; }
    .txn-header #bank-connections-bar { flex: 0 1 auto; justify-content: flex-end; }
}

/* ── Auto Tasks and Programs ──────────────────────────────────────────── */
.create-task-btn { width: auto; align-self: flex-start; margin: 0 0 12px; }
.task-card, .program-card { padding: 12px 14px; margin-bottom: 6px; }
#tasks-list, #programs-list { max-width: 980px; }

/* Dialog width on a desk: a readable column in the middle, never edge to edge. */
@media (min-width: 900px) {
    #add-app-sheet, #rename-app-sheet, [id$="-form-sheet"], #mt-add-sheet, #mt-proj-sheet, #mt-col-sheet { justify-content: center; }
    #add-app-panel, #rename-app-panel, [id$="-form-panel"], .form-panel {
        width: 100%; max-width: 560px; margin: 0 auto; padding: 22px 24px;
    }
    #mt-add-panel, #mt-proj-panel { max-width: 640px; }
}

/* ── Documents ────────────────────────────────────────────────────────── */
.doc-connect-btn {
    display: inline-flex; align-items: center; height: var(--control-h); padding: 0 11px;
    border: 1px solid var(--border); border-radius: var(--r-2);
    background: var(--bg-control); color: var(--text-1);
    font-size: var(--fs-dense); font-weight: var(--w-medium); cursor: pointer;
}
@media (hover: hover) { .doc-connect-btn:hover { background: var(--bg-overlay); border-color: var(--border-strong); } }
.doc-breadcrumbs { background: transparent; border-bottom: 1px solid var(--border-subtle); padding: 10px 16px; }
.doc-bread-item { font-family: var(--font-sans); color: var(--text-2); }
.doc-bread-item:last-child { color: var(--text-1); font-weight: var(--w-medium); }
.doc-item-icon { font-size: 0; color: var(--text-3); margin-bottom: 8px; }
.doc-list-icon { color: var(--text-3); display: inline-flex; }

/* ── My Tasks: board cards, the Today column, stand-alone fields ──────── */
.mt-kanban { gap: 10px; padding: 14px; }
.mt-kanban-header { border-bottom: 0; padding: 10px 12px 6px; }
.mt-kanban-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-2); box-shadow: none; }
.mt-kanban-card-title { font-size: var(--fs-dense); font-weight: var(--w-medium); line-height: 1.4; color: var(--text-1); }
.mt-kanban-card-cat { font-size: var(--fs-micro); color: var(--text-3); }
.mt-pri-badge { border-radius: var(--r-1); font-size: var(--fs-micro); font-weight: var(--w-medium); padding: 1px 6px; }
.mt-card-today-btn, .mt-card-edit-btn { border-radius: var(--r-1); border-color: transparent; font-weight: var(--w-regular); }
.mt-kanban-5 .mt-kanban-col[data-column="today"] { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--border); }
.mt-kanban-5 .mt-kanban-col[data-column="today"] .mt-kanban-header { color: var(--text-1); }
.mt-scroll-btn { background: var(--bg-overlay); border: 0; box-shadow: var(--shadow-float); border-radius: var(--r-2); font-size: 16px; font-weight: var(--w-regular); color: var(--text-2); }
#my-tasks-content input.ph-sel {
    height: var(--control-h); padding: 0 10px;
    background: var(--bg-control); border: 1px solid var(--border); border-radius: var(--r-2);
    font-size: var(--fs-dense); cursor: text;
}
#my-tasks-content input.ph-sel:focus { border-color: var(--focus); }
.mt-filter-sel { height: var(--control-h-sm); padding: 0 6px; border-radius: var(--r-2); font-size: var(--fs-small); }
@media (hover: hover) {
    .mt-kanban-card:hover { border-color: var(--border-strong); }
    .mt-card-today-btn:hover, .mt-card-edit-btn:hover { background: var(--hover); color: var(--text-1); border-color: transparent; }
}