/* ── AI search pane: the shared LvTable inside a record tab, a detail rail on the right ── */
    .ais-body { display: flex; gap: 12px; align-items: stretch; height: calc(100vh - 250px); min-height: 420px; }
    .att-pane[data-pane="aisearch"] .list-view-container {
        --rec-color: var(--ent-candidate, var(--primary-color, var(--record-color-0ea5e9)));
        --model-accent: var(--ent-candidate, var(--primary-color, var(--record-color-0ea5e9)));
        flex: 1 1 auto; min-width: 0; height: 100%;
        border: 1px solid var(--att-border); border-radius: 12px; overflow: hidden;
        background: var(--att-surface);
    }
    .att-pane[data-pane="aisearch"] .lv-cmd-bar { box-shadow: inset 0 3px 0 var(--rec-color); }
    .att-pane[data-pane="aisearch"] .lv-data-row { cursor: pointer; }
    .att-pane[data-pane="aisearch"] .lv-data-row.ais-active td { background: color-mix(in srgb, var(--ent-candidate, var(--record-color-0ea5e9)) 8%, transparent); }
    .ais-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 10px; font-size: 12.5px; color: var(--att-text-2); font-variant-numeric: tabular-nums; }
    .ais-strip .ais-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .ais-strip .ais-err { color: var(--danger-color, var(--record-color-ef4444)); display: inline-flex; align-items: center; gap: 5px; }
    .ais-strip .ais-muted { color: var(--att-muted); }
    .ais-strip .att-action { padding: 5px 10px; font-size: 12px; }
    .ais-sel { display: inline-flex; align-items: center; gap: 8px; }
    .ais-sel b { color: var(--att-text); }
    .ais-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--att-accent) 30%, transparent); border-top-color: var(--att-accent); animation: ais-spin 1s linear infinite; }
    @keyframes ais-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .ais-spin { animation: none; } }
    .ais-pct { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ais-pct.hi { color: var(--success-color, var(--record-color-10b981)); }
    .ais-pct.mid { color: var(--notice-color, var(--record-color-3b82f6)); }
    .ais-pct.lo { color: var(--att-text-2); }
    .ais-pct small { font-size: 10.5px; font-weight: 700; }
    .ais-pct small.up { color: var(--success-color, var(--record-color-10b981)); }
    .ais-pct small.down { color: var(--danger-color, var(--record-color-ef4444)); }
    .ais-new { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; background: color-mix(in srgb, var(--att-accent) 18%, transparent); color: var(--att-accent); }
    .ais-ok { color: var(--success-color, var(--record-color-10b981)); font-size: 16px; }
    .ais-no { color: var(--att-muted); font-size: 16px; }
    .ais-na { color: var(--att-muted); font-size: 12px; }
    .ais-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .ais-pill.assigned { background: color-mix(in srgb, var(--success-color, var(--record-color-10b981)) 16%, transparent); color: var(--success-color, var(--record-color-10b981)); }
    .ais-pill.open { background: var(--att-surface-2); color: var(--att-muted); }
    .ais-pill.dismissed { background: var(--att-surface-2); color: var(--att-muted); text-decoration: line-through; }
    .ais-row-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--att-border); background: var(--att-surface); color: var(--att-text-2); }
    .ais-row-btn:hover { color: var(--att-text); border-color: var(--att-accent); }
    .ais-row-btn + .ais-row-btn { margin-left: 4px; }
    .ais-row-btn.ais-icon { width: 26px; padding: 0; justify-content: center; }
    .ais-row-btn.ais-icon:hover { color: var(--danger-color, var(--record-color-ef4444)); border-color: var(--danger-color, var(--record-color-ef4444)); }
    .ais-row-btn i { font-size: 14px; }
    .ais-pick { width: 15px; height: 15px; accent-color: var(--att-accent); cursor: pointer; vertical-align: middle; }
    .ais-pick:disabled { opacity: .35; cursor: not-allowed; }
    /* Detail rail */
    .ais-rail { flex: 0 0 380px; display: none; flex-direction: column; min-height: 0; background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 12px; overflow: hidden; }
    .ais-rail.open { display: flex; }
    .ais-rail-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--att-border); }
    .ais-rail-title { font-size: 14px; font-weight: 700; min-width: 0; }
    .ais-rail-title a { color: var(--ent-candidate, var(--record-color-0ea5e9)); text-decoration: none; }
    .ais-rail-title a:hover { text-decoration: underline; }
    .ais-rail-sub { font-size: 12px; color: var(--att-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
    .ais-rail-close { margin-left: auto; }
    .ais-rail-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
    .ais-rail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .ais-kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 12.5px; }
    .ais-kv dt { color: var(--att-muted); font-weight: 600; margin: 0; }
    .ais-kv dd { margin: 0; color: var(--att-text); font-variant-numeric: tabular-nums; }
    .ais-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--att-muted); margin: 0 0 6px; }
    .ais-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
    .ais-dim { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--att-text-2); }
    .ais-dim .bar { height: 4px; border-radius: 2px; background: var(--att-surface-2); overflow: hidden; }
    .ais-dim .bar i { display: block; height: 100%; background: var(--ent-candidate, var(--record-color-0ea5e9)); border-radius: 2px; }
    .ais-dim b { color: var(--att-text); font-variant-numeric: tabular-nums; }
    .ais-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
    .ais-tl li { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--att-border-2); font-size: 12.5px; align-items: baseline; }
    .ais-tl .when { white-space: nowrap; }
    .ais-trend { display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; font-size: 11.5px; color: var(--att-muted); font-variant-numeric: tabular-nums; }
    .ais-trend .cur { color: var(--att-text); font-weight: 700; }
    .ais-trend i { font-size: 13px; opacity: .6; }
    .ais-tl li:first-child { border-top: 0; }
    .ais-tl .when { color: var(--att-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
    .ais-tl .what b { font-variant-numeric: tabular-nums; }
    .ais-tl .what small { color: var(--att-muted); }
    .ais-runs li { grid-template-columns: 104px 1fr; }
    .ais-empty { font-size: 12.5px; color: var(--att-muted); }
    .ais-run-modal { width: min(1500px, calc(100vw - 32px)); height: min(920px, calc(100vh - 32px)); display: flex; flex-direction: column; }
    .ais-run-body { flex: 1; min-height: 0; padding: 0; position: relative; display: flex; }
    .ais-picker { flex: 1; width: 100%; height: 100%; border: 0; background: var(--att-bg); }
    .ais-picker-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--att-muted); }
    .ais-picker-err { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 35%, transparent); background: var(--att-surface); color: var(--danger-color, var(--record-color-ef4444)); font-size: 12.5px; }
    .ais-tl .filt { display: block; color: var(--att-muted); font-size: 11px; margin-top: 2px; }
    @media (max-width: 1100px) { .ais-body { flex-direction: column; height: auto; } .att-pane[data-pane="aisearch"] .list-view-container { height: 60vh; } .ais-rail { flex-basis: auto; max-height: 60vh; } }
    /* ── Design tokens (theme-aware) ── */
    :root {
        --att-bg:        var(--bg-secondary, var(--record-color-f7f7f8));
        --att-surface:   var(--bg-primary,   var(--record-color-ffffff));
        --att-surface-2: var(--bg-tertiary,  var(--record-color-f4f4f5));
        --att-border:    var(--border-color, var(--record-color-a70919ec));
        --att-border-2:  var(--record-color-ad186d70);
        --att-text:      var(--text-primary, var(--record-color-18181b));
        --att-text-2:    var(--text-secondary, var(--record-color-52525b));
        --att-muted:     var(--text-muted, var(--record-color-71717a));
        --att-accent:    var(--primary-color, var(--record-color-4f46e5));
        --att-disabled:  color-mix(in srgb, var(--text-muted, var(--record-color-71717a)) 50%, transparent);
    }
    /* Alias --dv-* so the shared related_emails.html partial (which was
       originally written for the legacy detail_view) renders correctly
       inside this shell without depending on detail_view.html being loaded. */
    .att-shell {
        --dv-surface:     var(--att-surface);
        --dv-surface-2:   var(--att-surface-2);
        --dv-border:      var(--att-border);
        --dv-value-color: var(--att-text);
        --dv-meta-color:  var(--att-text-2);
        --dv-label-color: var(--att-muted);
        --dv-hover-bg:    var(--att-surface-2);
    }
    /* Dark themes: inherit the app's theme tokens (purple-tinted on midnight)
       rather than overriding with neutral grays,

    so the page blends with the
       rest of the CRM. Only the faint inner borders need a dark-mode tweak
       since the light-theme rgba values values disappear on dark bg. */
    [data-theme="carbon"] .att-shell {
        --att-border-2: var(--record-color-69142783);
    }

    /* ── Page shell ── */
    .att-shell {
        display: grid;
        grid-template-rows: auto 1fr;
        /* See through: the page's pattern shows behind the record at this strength. */
        --att-shell-opacity: 70%;
        background: color-mix(in srgb, var(--att-bg) var(--att-shell-opacity), transparent);
        color: var(--att-text);
        overflow: hidden;
    }
    .att-shell * { box-sizing: border-box; }

    /* ── Top action bar ── */
    .att-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 18px;
        background: var(--att-surface);
        border-bottom: 1px solid var(--att-border);
        min-height: 56px;
    }
    .att-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 8px;
        color: var(--att-text-2);
        text-decoration: none;
        transition: background .12s;
    }
    .att-back:hover { background: var(--att-surface-2); color: var(--att-text); }
    .att-back i { font-size: 18px; }

    .att-record {
        display: flex; align-items: center; gap: 12px; min-width: 0;
    }
    /* --rec-color is the record's entity color (set on .att-shell from
       --ent-<model>); falls back to the theme accent for unknown models. */
    .att-shell { --rec-color: var(--att-accent); }
    .att-avatar {
        width: 32px; height: 32px; border-radius: 8px;
        background: color-mix(in srgb, var(--rec-color) 18%, transparent);
        color: var(--rec-color);
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700; text-transform: uppercase;
        flex-shrink: 0;
    }
    .att-record-sub i { color: var(--rec-color); }
    .att-record-name {
        font-size: 15px; font-weight: 700; color: var(--att-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 560px;
    }
    .att-record-sub {
        font-size: 12px; color: var(--att-muted);
        display: flex; align-items: center; gap: 6px;
    }

    .att-topbar-actions { margin-left: auto; display: flex; gap: 8px; }
    .att-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--att-text-2);
        background: var(--att-surface);
        border: 1px solid var(--att-border);
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        transition: background .12s, border-color .12s, color .12s;
    }
    .att-action:hover {
        background: var(--att-surface-2);
        color: var(--att-text);
        text-decoration: none;
    }
    .att-action i { font-size: 13px; }
    .att-action.is-soon {
        color: var(--att-disabled);
        cursor: not-allowed;
        opacity: 0.7;
    }
    .att-action.is-soon:hover { background: var(--att-surface); color: var(--att-disabled); }
    .att-action.is-primary {
        color: var(--btn-primary-text, var(--record-color-ffffff));
        background: var(--att-accent);
        border-color: transparent;
    }
    .att-action.is-primary:hover {
        background: color-mix(in srgb, var(--att-accent) 88%, var(--record-color-000));
        color: var(--btn-primary-text, var(--record-color-ffffff));
    }
    .soon-tag {
        font-size: 9px; font-weight: 700;
        padding: 1px 5px; border-radius: 4px;
        background: color-mix(in srgb, var(--att-muted) 18%, transparent);
        color: var(--att-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-left: 4px;
    }

    /* ── Body grid: main + right sidebar ── */
    .att-body {
        display: flex;
        min-height: 0;
        overflow: hidden;
    }

    .att-main {
        flex: 1;
        display: flex; flex-direction: column;
        min-width: 0; min-height: 0;
        background: transparent;   /* the shell carries the see-through fill */
    }

    /* ── Tab strip ── */
    .att-tabs {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 0 18px;
        background: var(--att-surface);
        border-bottom: 1px solid var(--att-border);
        overflow-x: auto;
        flex-shrink: 0;
    }
    .att-tabs::-webkit-scrollbar { height: 3px; }
    .att-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 14px 10px;
        border: none;
        background: transparent;
        color: var(--att-muted);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color .12s, border-color .12s;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .att-tab:hover { color: var(--att-text); }
    .att-tab.active {
        color: var(--att-text);
        border-bottom-color: var(--rec-color);
    }
    /* Tabs that point at ANOTHER entity carry that entity's color (--tab-c):
       icon + count pill always tinted, active underline in the entity color —
       so "Deals" reads indigo, "Jobs" blue, … wherever you are. */
    .att-tab.tab-ent i { color: var(--tab-c); }
    .att-tab.tab-ent .att-tab-count {
        background: color-mix(in srgb, var(--tab-c) 15%, transparent);
        color: var(--tab-c);
    }
    .att-tab.tab-ent.active { border-bottom-color: var(--tab-c); }
    .att-tab.tab-ent.active .att-tab-count { background: color-mix(in srgb, var(--tab-c) 22%, transparent); }
    /* Every other tab gets a colour too, from the brand palette
       (home/brand_colors.py), so the whole row reads by colour. */
    .att-tab[data-pane="details"]     { --tab-c: var(--rec-color); }
    .att-tab[data-pane="superset"]    { --tab-c: var(--ent-reporting, var(--record-color-9333ea)); }
    .att-tab[data-pane="timeline"]    { --tab-c: var(--ent-pipelines, var(--record-color-ea580c)); }
    .att-tab[data-pane="experience"]  { --tab-c: var(--ent-job, var(--record-color-1d4ed8)); }
    .att-tab[data-pane="embeddings"]  { --tab-c: var(--ent-settings, var(--record-color-6d28d9)); }
    .att-tab[data-pane="peopleshore"] { --tab-c: var(--ent-prospect, var(--record-color-0ea5e9)); }
    .att-tab[data-pane="jobrefs"]     { --tab-c: var(--ent-employee, var(--record-color-0d9488)); }
    .att-tab[data-pane="places"]      { --tab-c: var(--ent-orgchart, var(--record-color-0f766e)); }
    .att-tab[data-pane="notes"]       { --tab-c: var(--ent-pto, var(--record-color-16a34a)); }
    .att-tab[data-pane="files"]       { --tab-c: var(--ent-docshub, var(--record-color-0284c7)); }
    .att-tab[data-pane="comments"]    { --tab-c: var(--ent-myspace, var(--record-color-8b5cf6)); }
    .att-tab[data-pane="activity"]    { --tab-c: var(--ent-asset, var(--record-color-78716c)); }
    .att-tab i { font-size: 15px; }
    .att-tab .att-tab-count {
        font-size: 11px;
        background: var(--att-surface-2);
        color: var(--att-muted);
        padding: 1px 6px;
        border-radius: 8px;
        font-weight: 600;
    }
    .att-tab.active .att-tab-count {
        background: color-mix(in srgb, var(--att-accent) 14%, transparent);
        color: var(--att-accent);
    }
    .att-tab.is-soon { color: var(--att-disabled); cursor: not-allowed; }
    /* Tab strip wrapper with scroll arrows (shown only when tabs overflow). */
    .att-tabs-wrap { position: relative; display: flex; align-items: stretch; background: var(--att-surface); border-bottom: 1px solid var(--att-border); }
    .att-tabs-wrap > .att-tabs { flex: 1 1 auto; min-width: 0; border-bottom: none; }
    /* The arrows sit over the ends of the strip rather than in its flow: in
       flow the left one still reserved its width while hidden at the start,
       which pushed the first tab in off the content below it. */
    .att-tabs-arrow { display: none; position: absolute; top: 0; bottom: 0; z-index: 2; align-items: center; width: 58px; padding: 0 6px; border: none; color: var(--att-muted); cursor: pointer; }
    /* The tail fades the strip out under the arrow, so a tab scrolling past it
       thins away instead of being cut off mid word. */
    .att-tabs-arrow--l { left: 0; justify-content: flex-start;
        background: linear-gradient(to right, var(--att-surface) 72%, transparent); }
    .att-tabs-arrow--r { right: 0; justify-content: flex-end;
        background: linear-gradient(to left, var(--att-surface) 72%, transparent); }
    .att-tabs-arrow:hover { color: var(--att-text); }
    .att-tabs-arrow i { font-size: 18px; }
    .att-tabs-wrap.scrollable .att-tabs-arrow { display: inline-flex; }
    .att-tabs-wrap.at-start .att-tabs-arrow--l { visibility: hidden; }
    .att-tabs-wrap.at-end .att-tabs-arrow--r { visibility: hidden; }

    /* Smart search rendered inline (legacy Bootstrap modal relocated into a pane). */
    #smartSearchModal.ss-inline { position: static; display: block; z-index: auto; overflow: visible; background: transparent; }
    #smartSearchModal.ss-inline .modal-dialog { max-width: none; width: 100%; margin: 0; }
    #smartSearchModal.ss-inline .modal-dialog-centered { align-items: stretch; min-height: 0; }
    #smartSearchModal.ss-inline .modal-content { border: 1px solid var(--att-border) !important; border-radius: 12px; box-shadow: none !important; }
    #smartSearchModal.ss-inline .modal-header { display: none; }  /* the tab already names it */

    /* Inline change history (Activity tab). */
    .ah-wrap { max-width: none; }   /* uses the tab's whole width */
    .ah-list { display: flex; flex-direction: column; }
    .ah-loading, .ah-empty { padding: 28px; text-align: center; color: var(--att-muted); font-size: 13px; }
    .ah-entry { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 12px 2px; border-top: 1px solid var(--att-border-2); }
    .ah-entry:first-child { border-top: none; }
    .ah-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--att-muted); }
    .ah-entry.ah-created .ah-dot { background: var(--success-color, var(--record-color-16a34a)); }
    .ah-entry.ah-deleted .ah-dot { background: var(--danger-color, var(--record-color-ef4444)); }
    .ah-entry.ah-changed .ah-dot { background: var(--att-accent); }
    .ah-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
    .ah-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 6px; background: var(--att-surface-2); color: var(--att-text-2); }
    .ah-badge.ah-created { background: color-mix(in srgb, var(--success-color, var(--record-color-16a34a)) 16%, transparent); color: var(--success-color, var(--record-color-16a34a)); }
    .ah-badge.ah-deleted { background: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 16%, transparent); color: var(--danger-color, var(--record-color-ef4444)); }
    .ah-badge.ah-changed { background: color-mix(in srgb, var(--att-accent) 16%, transparent); color: var(--att-accent); }
    .ah-user { font-size: 12.5px; font-weight: 600; color: var(--att-text); }
    .ah-date { font-size: 11.5px; color: var(--att-muted); }
    .ah-change { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; padding: 2px 0; }
    .ah-field { font-weight: 600; color: var(--att-text-2); min-width: 120px; }
    .ah-old { color: var(--att-muted); text-decoration: line-through; }
    .ah-new { color: var(--att-text); }
    .ah-change i { color: var(--att-muted); font-size: 14px; }
    .ah-action { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
    .ah-action.ah-created { color: var(--success-color, var(--record-color-16a34a)); }
    .ah-action.ah-deleted { color: var(--danger-color, var(--record-color-ef4444)); }
    .ah-action.ah-muted { color: var(--att-muted); font-weight: 400; }
    .ah-more { display: none; justify-content: center; padding: 14px 0; }
    .att-tab.is-soon:hover { color: var(--att-disabled); }

    /* ── Main content panes ── */
    .att-panes { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }
    .att-pane { display: none; }
    .att-pane.active { display: block; }

    .att-pane-empty {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        padding: 64px 24px;
        color: var(--att-muted);
        text-align: center;
        gap: 8px;
    }
    .att-pane-empty i { font-size: 38px; opacity: 0.35; }
    .att-pane-empty .title { font-size: 14px; font-weight: 600; color: var(--att-text-2); }
    .att-pane-empty .hint  { font-size: 12.5px; color: var(--att-muted); max-width: 360px; line-height: 1.5; }

    .att-fields {
        list-style: none; padding: 4px 0; margin: 0;
    }
    /* Compact toolbar above related-record tables: quick filter + add button. */
    /* Secondary line under a card heading (PeopleShore applications). */
    .att-meta-line { font-size: 11.5px; color: var(--att-muted); font-weight: 600; }
    .att-rel-search {
        flex: 1 1 auto; min-width: 0; max-width: 340px;
        display: flex; align-items: center; gap: 7px;
        height: 32px; padding: 0 10px;
        background: var(--att-surface); border: 1px solid var(--att-border);
        border-radius: 8px; color: var(--att-muted);
    }
    .att-rel-search i { font-size: 15px; flex-shrink: 0; }
    .att-rel-search input {
        flex: 1; min-width: 0; border: none; background: none; outline: none;
        color: var(--att-text); font-size: 13px; font-family: inherit;
    }
    .att-rel-search input::placeholder { color: var(--att-disabled); }
    /* Recruiting phase chips (job candidates tab) — filter the list by stage. */
    .att-phase-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    /* As a strip inside the table frame it is spaced by the frame, not by itself. */
    .lv-embed > .att-phase-bar { margin-bottom: 0; }
    .att-phase {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px; border-radius: 999px;
        border: 1px solid var(--att-border); background: var(--att-surface);
        color: var(--att-muted); font-size: 12px; font-weight: 600;
        cursor: pointer; transition: background .12s, color .12s, border-color .12s;
    }
    .att-phase:hover { color: var(--att-text); border-color: var(--att-accent); }
    .att-phase.is-active {
        background: color-mix(in srgb, var(--rec-color) 14%, transparent);
        border-color: color-mix(in srgb, var(--rec-color) 40%, transparent);
        color: var(--att-text);
    }
    .att-phase-count {
        font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
        background: var(--att-surface-2); color: var(--att-muted); font-weight: 700;
    }
    .att-phase.is-active .att-phase-count {
        background: color-mix(in srgb, var(--rec-color) 24%, transparent);
        color: var(--att-text);
    }
    .lv-table tbody tr.is-stage-hidden { display: none !important; }
    /* Finance tab: money right-aligns and shares one digit width so columns
       compare down the page; the footer carries the converted totals. */
    .att-fin-num { text-align: right; font-variant-numeric: tabular-nums; }
    .lv-foot td {
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
        font-weight: 700;
    }
    .att-fin-note {
        display: flex; align-items: center; gap: 6px; margin-top: 8px;
        font-size: 11.5px; color: var(--att-muted);
    }
    /* Document state, reading the same as Računoid's own status pill. Written
       against .att-chip because that class is declared further down the sheet
       and would otherwise win on source order. `draft` keeps the plain chip. */
    .att-chip.att-fin-state--paid {
        background: color-mix(in srgb, var(--success-color, var(--record-color-10b981)) 15%, transparent);
        color: var(--success-color, var(--record-color-10b981));
        border-color: color-mix(in srgb, var(--success-color, var(--record-color-10b981)) 32%, transparent);
    }
    .att-chip.att-fin-state--open,
    .att-chip.att-fin-state--sent {
        background: color-mix(in srgb, var(--notice-color, var(--record-color-3b82f6)) 15%, transparent);
        color: var(--notice-color, var(--record-color-3b82f6));
        border-color: color-mix(in srgb, var(--notice-color, var(--record-color-3b82f6)) 32%, transparent);
    }
    .att-chip.att-fin-state--overdue,
    .att-chip.att-fin-state--cancelled,
    .att-chip.att-fin-state--uncollectible {
        background: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 15%, transparent);
        color: var(--danger-color, var(--record-color-ef4444));
        border-color: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 32%, transparent);
    }
    /* Inline stage picker in the job candidates table. */
    .att-stage-select {
        max-width: 100%; height: 28px; padding: 0 8px;
        border: 1px solid var(--att-border); border-radius: 7px;
        background: var(--att-surface); color: var(--att-text);
        font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer;
    }
    .att-stage-select:hover { border-color: var(--att-accent); }
    /* Roster strip of related contacts above a mail list (supplier/project). */
    .att-contacts-strip {
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
        padding: 10px 12px; margin-bottom: 12px;
        background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 10px;
    }
    .att-contacts-strip-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
        color: var(--att-muted); display: inline-flex; align-items: center; gap: 5px; margin-right: 4px;
    }
    .att-field {
        display: grid;
        /* Responsive label column: shrinks toward 76px as the (resizable)
           sidebar narrows, so the value/email always keeps room. */
        grid-template-columns: minmax(76px, 36%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 7px 16px;
        font-size: 12.5px;
        min-height: 32px;
        transition: background .12s;
    }
    .att-field:hover { background: var(--att-surface-2); }
    .att-field.is-editable { position: relative; cursor: pointer; }
    .aef-edit {
        position: absolute;
        right: 8px; top: 50%;
        transform: translateY(-50%);
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--att-border);
        background: var(--att-surface);
        color: var(--att-muted);
        border-radius: 6px;
        cursor: pointer;
        opacity: 0;
        transition: opacity .12s;
        font-size: 13px;
    }
    .att-field.is-editable:hover .aef-edit { opacity: 1; }
    .aef-edit:hover { color: var(--att-text); background: var(--att-surface-2); }
    /* Whole row is the click target — a plain row highlight is enough to say so.
       FK rows (company / deal) behave the same; only the entity name itself is
       exempt, since that link opens the record. */
    .att-field.is-editable:hover { background: var(--att-surface-2); }
    .att-field.is-editing:hover { background: transparent; }
    .aef-add-email {
        position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
        width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid color-mix(in srgb, var(--att-accent) 40%, var(--att-border));
        background: color-mix(in srgb, var(--att-accent) 8%, var(--att-surface)); color: var(--att-accent);
        border-radius: 6px; cursor: pointer; font-size: 14px;
    }
    .aef-add-email:hover { background: color-mix(in srgb, var(--att-accent) 18%, transparent); }
    .aef-addmail-row { margin-top: 6px; }
    /* While editing inline, hide BOTH the pencil and the "+ add mailbox"
       button so neither overlaps the save/cancel controls. */
    .att-field.is-editing .aef-edit,
    .att-field.is-editing .aef-add-email { display: none; }
    .aef-editor { display: flex; align-items: center; gap: 6px; width: 100%; }
    .aef-input, .aef-select {
        flex: 1; min-width: 0;
        height: 30px; padding: 0 8px;
        border: 1px solid color-mix(in srgb, var(--att-accent) 45%, var(--att-border));
        border-radius: 6px;
        background: var(--att-surface);
        color: var(--att-text);
        font-size: 12.5px;
        outline: none;
    }
    .aef-input:focus, .aef-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent); }
    /* Select-style dropdown (editor === 'select' / 'user' / 'country').
       Matches the app's .lv-smart-dropdown: a card that drops below the field
       with a chevron + slide-in. The field shows the value; options drop below;
       an in-menu search appears only when there are many options. */
    .aef-combo { position: relative; flex: 1; min-width: 0; }
    .aef-combo-trigger {
        width: 100%; flex: none; cursor: pointer; text-align: left;
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
    }
    .aef-combo-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aef-combo-trigger-label.is-placeholder { color: var(--att-muted); }
    .aef-combo-caret { font-size: 17px; color: var(--att-muted); flex-shrink: 0; transition: transform .15s; line-height: 1; }
    .aef-combo.is-open .aef-combo-caret { transform: rotate(180deg); color: var(--att-accent); }
    .aef-combo-menu {
        position: fixed; z-index: 1000;
        background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 10px;
        max-height: 280px; overflow-y: auto; padding: 4px;
        box-shadow: 0 8px 32px var(--record-color-8f59e80b), 0 2px 8px var(--record-color-a70919ec);
        animation: aefDrop .14s ease-out;
    }
    @keyframes aefDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    /* Pinned over the menu's own 4px padding, not under it: stuck at top 0 the
       rows scrolling past showed through that strip above the search box. */
    .aef-combo-search { position: sticky; top: -4px; margin-top: -4px; background: var(--att-surface); padding: 6px 2px 5px; z-index: 1; }
    .aef-combo-search-input {
        width: 100%; height: 30px; padding: 0 9px; font-size: 12.5px;
        border: 1px solid var(--att-border); border-radius: 7px;
        background: var(--att-bg); color: var(--att-text); outline: none;
    }
    .aef-combo-search-input:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, var(--att-border)); }
    .aef-combo-list { display: flex; flex-direction: column; }
    .aef-combo-opt {
        padding: 8px 10px; font-size: 12.5px; color: var(--att-text); border-radius: 6px;
        cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: flex; align-items: center; gap: 7px;
    }
    .aef-combo-opt i { font-size: 14px; flex-shrink: 0; color: var(--att-accent); }
    .aef-combo-opt:hover, .aef-combo-opt.is-active { background: color-mix(in srgb, var(--att-accent) 12%, var(--att-surface-2)); }
    .aef-combo-opt.is-selected { color: var(--att-accent); font-weight: 600; }
    .aef-combo-empty { padding: 9px 10px; font-size: 12px; color: var(--att-muted); }
    .aef-save, .aef-cancel {
        flex-shrink: 0;
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--att-border);
        border-radius: 6px;
        cursor: pointer;
        font-size: 15px;
    }
    .aef-save { background: var(--att-accent); color: var(--record-color-fff); border-color: transparent; }
    .aef-cancel { background: var(--att-surface); color: var(--att-muted); }
    .aef-cancel:hover { color: var(--att-text); background: var(--att-surface-2); }
    .att-field-label {
        display: flex; align-items: center; gap: 6px;
        color: var(--att-muted);
        font-weight: 500;
        min-width: 0;
    }
    .att-field-label i { font-size: 13px; color: var(--att-muted); flex-shrink: 0; }
    .att-field-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Scraped-data provenance marker — rendered only for allowlisted viewers. */
    .att-field-label i.att-prov { font-size: 12px; color: var(--ent-mailbox, var(--att-muted, var(--record-color-64748b))); opacity: .75; cursor: help; }
    .att-field-value {
        color: var(--att-text);
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.4;
        padding-top: 1px;
    }
    /* Editable fields keep the wrapped value clear of the hover pencil; fields
       with a "+ add mailbox" button reserve room for both buttons so a long
       email never runs under them. */
    .att-field.is-editable [data-aef-display] { padding-right: 26px; }
    .att-field:has(.aef-add-email) [data-aef-display] { padding-right: 52px; }
    /* While the inline add-mailbox row is open, hide the floating +/pencil so
       they don't overlap the row. */
    .att-field.is-addmail .aef-add-email,
    .att-field.is-addmail .aef-edit { display: none; }
    .att-field.is-addmail [data-aef-display] { padding-right: 0; }
    .att-field-value.empty {
        color: var(--att-disabled);
        font-style: italic;
    }
    .att-field-value a {
        color: var(--att-accent);
        text-decoration: none;
    }
    .att-field-value a:hover { text-decoration: underline; }

    .att-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11.5px;
        font-weight: 600;
        background: var(--att-surface-2);
        color: var(--att-text-2);
        border: 1px solid var(--att-border);
        margin: 0 4px 2px 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .att-chip.hot   { background: color-mix(in srgb, var(--record-color-ef4444) 12%, transparent); color: var(--record-color-b91c1c); border-color: color-mix(in srgb, var(--record-color-ef4444) 28%, transparent); }
    .att-chip.warm  { background: color-mix(in srgb, var(--record-color-f97316) 12%, transparent); color: var(--record-color-c2410c); border-color: color-mix(in srgb, var(--record-color-f97316) 28%, transparent); }
    .att-chip.cold  { background: color-mix(in srgb, var(--record-color-0ea5e9) 12%, transparent); color: var(--record-color-0369a1); border-color: color-mix(in srgb, var(--record-color-0ea5e9) 28%, transparent); }
    .att-chip.ok    { background: color-mix(in srgb, var(--record-color-22c55e) 12%, transparent); color: var(--record-color-15803d); border-color: color-mix(in srgb, var(--record-color-22c55e) 28%, transparent); }
    .att-chip.bad   { background: color-mix(in srgb, var(--record-color-ef4444) 12%, transparent); color: var(--record-color-b91c1c); border-color: color-mix(in srgb, var(--record-color-ef4444) 28%, transparent); }
    /* Related-record chip/link tinted by the TARGET entity's color (--chip-c,
       set from --ent-<model> on the element). A leading dot reinforces it. */
    .att-chip.is-ent {
        background: color-mix(in srgb, var(--chip-c, var(--att-accent)) 12%, transparent);
        color: var(--chip-c, var(--att-accent));
        border-color: color-mix(in srgb, var(--chip-c, var(--att-accent)) 32%, transparent);
        text-decoration: none;
    }
    .att-chip.is-ent::before {
        content: ''; width: 7px; height: 7px; border-radius: 50%;
        background: var(--chip-c, var(--att-accent)); flex-shrink: 0;
    }
    a.att-chip.is-ent:hover { background: color-mix(in srgb, var(--chip-c, var(--att-accent)) 20%, transparent); }
    /* Generic-sidebar FK link tinted by its target entity. */
    .att-field-value a.is-ent-link { color: var(--chip-c, var(--att-accent)); font-weight: 600; text-decoration: none; }
    .att-field-value a.is-ent-link:hover { text-decoration: underline; }

    .att-section-head {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--att-muted);
        padding: 16px 16px 6px;
    }
    .att-section-head--rel { display: flex; align-items: center; justify-content: space-between; }
    .att-add-rel {
        width: 22px; height: 22px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--att-border);
        background: var(--att-surface);
        color: var(--att-muted);
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
    }
    .att-add-rel:hover { color: var(--att-accent); border-color: color-mix(in srgb, var(--att-accent) 45%, var(--att-border)); }

    /* ── Mails table ──────────────────────────────────────────────── */
    .mt-wrap {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        font-size: 13px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .mt-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        min-height: 44px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-wrap: wrap;
    }
    .mt-search {
        position: relative;
        flex: 1 1 220px;
        min-width: 180px;
        max-width: 360px;
    }
    .mt-search i {
        position: absolute;
        left: 10px; top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        color: var(--att-muted);
        pointer-events: none;
    }
    .mt-search input {
        width: 100%;
        height: 28px;
        padding: 0 26px 0 28px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: 12px;
        outline: none;
        transition: border-color .12s, box-shadow .12s;
    }
    .mt-search input:focus {
        border-color: color-mix(in srgb, var(--att-accent) 50%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent);
    }
    /* Hide the browser's native search clear (X) — we render our own. */
    .mt-search input::-webkit-search-cancel-button,
    .mt-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
    .mt-search-clear {
        position: absolute;
        right: 6px; top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: var(--att-muted);
        cursor: pointer;
        font-size: 16px;
        padding: 2px;
        border-radius: 4px;
        display: none;
    }
    .mt-search-clear:hover { background: var(--att-surface-2); color: var(--att-text); }
    .mt-search.has-value .mt-search-clear { display: inline-flex; }

    .mt-filters {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        background: var(--att-surface);
        border: 1px solid var(--att-border);
        border-radius: 6px;
        padding: 0 1px;
        height: 28px;
    }
    .mt-filter {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 28px;
        padding: 0 9px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 6px;
        white-space: nowrap;
    }
    .mt-filter:hover { color: var(--att-text); background: var(--att-surface-2); }
    .mt-filter.active {
        color: var(--att-text);
        background: color-mix(in srgb, var(--att-accent) 14%, transparent);
    }
    .mt-filter i { font-size: 13px; }
    .mt-filter .mt-filter-count {
        font-size: 10px;
        background: var(--att-surface-2);
        padding: 1px 5px;
        border-radius: 6px;
        font-weight: 700;
        color: var(--att-muted);
    }
    .mt-filter.active .mt-filter-count { background: var(--att-surface); color: var(--att-accent); }
    .mt-filter-sep { width: 1px; align-self: center; height: 18px; background: var(--att-border); margin: 0 4px; flex-shrink: 0; }

    /* Job Mails tab — per-row "Relevant to this job" toggle (team-shared) + a
       no-AI suggestion hint. Only shown where it MEANS something (relevant /
       suggested rows are always visible); everything else reveals on row hover,
       so the column isn't a wall of icons. */
    .mt-pin { width: 24px; height: 24px; flex-shrink: 0; margin-right: 6px; padding: 0; border: none;
        background: none; color: var(--att-disabled); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity .12s, color .12s; }
    .mt-pin i { font-size: 18px; line-height: 1; }
    tr:hover .mt-pin { opacity: 1; }
    .mt-pin:hover { color: var(--ent-mailbox, var(--record-color-0ea5e9)); }
    .mt-pin:focus-visible { opacity: 1; outline: 2px solid var(--att-accent); outline-offset: 1px; border-radius: 5px; }
    /* Carries meaning -> always visible. Colour alone, no fill. */
    .mt-pin.is-pinned { opacity: 1; color: var(--ent-mailbox, var(--record-color-0ea5e9)); }
    .mt-pin.is-suggested { opacity: 1; color: var(--notice-color); }
    /* Relevance tooltip — a real popover: the native title= is ~1s late, tiny and
       unstyleable, so the "why is this suggested?" reasoning went unread. */
    .mt-tip { position: fixed; z-index: 1300; max-width: 270px; pointer-events: none;
        background: var(--att-surface); color: var(--att-text);
        border: 1px solid var(--att-border); border-radius: 10px;
        /* Same elevation as .aef-combo-menu. A --att-text-based shadow inverts to
           a white glow on dark themes — shadows here are plain black rgba. */
        box-shadow: 0 8px 32px var(--record-color-8f59e80b), 0 2px 8px var(--record-color-a70919ec);
        padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
        opacity: 0; transform: translateY(3px); transition: opacity .1s, transform .1s; }
    .mt-tip.show { opacity: 1; transform: translateY(0); }
    .mt-tip-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
        font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        color: var(--notice-color); }
    .mt-tip-head i { font-size: 14px; }
    .mt-tip.is-rel .mt-tip-head { color: var(--ent-mailbox, var(--record-color-0ea5e9)); }
    .mt-tip-body { color: var(--att-text); font-weight: 600; }
    .mt-tip-body b { color: var(--notice-color); font-weight: 800; }
    .mt-tip-hint { margin-top: 5px; font-size: 11px; font-weight: 400; color: var(--att-muted); }

    .mt-toolbar-spacer { flex: 1; }

    .mt-meta {
        font-size: 11.5px;
        color: var(--att-muted);
        font-variant-numeric: tabular-nums;
        padding: 0 8px;
    }

    /* Table proper */
    .mt-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
    /* Mails pane fills the available height (no 60vh cap): no dead space on
       tall screens, internal scroll instead of body scroll on short ones. */
    .att-pane.active[data-pane="mails"] { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    .att-pane[data-pane="mails"] .mt-wrap { flex: 1 1 auto; min-height: 0; }
    .mt-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
        font-size: 13px;
    }
    .mt-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-secondary);
        padding: 8px 10px;
        border-bottom: 1px solid var(--border-color);
        user-select: none;
        white-space: nowrap;
    }
    .mt-th-inner {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }
    .mt-th-inner:hover { color: var(--att-text); }
    .mt-th-sort {
        font-size: 13px;
        opacity: 0;
        transition: opacity .12s;
    }
    .mt-table th.is-sorted .mt-th-sort { opacity: 1; color: var(--att-accent); }
    .mt-table th .mt-resize {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 6px;
        cursor: col-resize;
        z-index: 3;
    }
    .mt-table th .mt-resize:hover,
    .mt-table th.is-resizing .mt-resize {
        background: color-mix(in srgb, var(--att-accent) 40%, transparent);
    }

    .mt-table td {
        padding: 8px 10px;
        font-size: 12px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--att-text);
    }
    .mt-table tbody tr {
        cursor: pointer;
        border-bottom: 1px solid var(--bg-tertiary);
        transition: background 0.1s ease;
    }
    .mt-table tbody tr:hover { background: var(--bg-secondary); }
    .mt-table tbody tr.unread {
        background: color-mix(in srgb, var(--att-accent) 3%, transparent);
    }
    .mt-table tbody tr.unread .mt-from,
    .mt-table tbody tr.unread .mt-subject { font-weight: 700; color: var(--att-text); }

    .mt-cell { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
    .mt-avatar {
        width: 23px; height: 23px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--record-color-fff);
        flex-shrink: 0;
        text-transform: uppercase;
    }
    .mt-from {
        color: var(--att-text-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }
    .mt-subject-wrap { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
    .mt-subject { color: var(--att-text); }
    .mt-preview { color: var(--att-muted); }
    .mt-dir-pill {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 600;
        background: var(--att-surface-2);
        color: var(--att-text-2);
    }
    .mt-dir-pill.sent { color: var(--success-color, var(--record-color-15803d)); background: color-mix(in srgb, var(--success-color, var(--record-color-22c55e)) 12%, transparent); }
    .mt-dir-pill.received { color: var(--info-color, var(--record-color-0369a1)); background: color-mix(in srgb, var(--info-color, var(--record-color-0ea5e9)) 12%, transparent); }
    .mt-dir-pill i { font-size: 11px; }
    .mt-attach { color: var(--att-muted); font-size: 15px; }
    .mt-date { color: var(--att-muted); font-variant-numeric: tabular-nums; }

    .mt-empty {
        padding: 36px 24px;
        text-align: center;
        color: var(--att-muted);
        font-size: 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .mt-empty i { font-size: 30px; opacity: 0.35; }

    @media (max-width: 1024px) {
        .att-field { grid-template-columns: 120px minmax(0, 1fr); }
    }
    @media (max-width: 600px) {
        .mt-toolbar { padding: 8px; }
        .mt-search { max-width: none; }
        .mt-meta { display: none; }
    }

    /* ── Email modal ──────────────────────────────────────────────── */
    .em-overlay {
        position: fixed; inset: 0;
        background: var(--record-color-4c85ca9b);
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .16s ease, visibility 0s .16s;
    }
    .em-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .16s ease; }
    .em-modal {
        background: var(--att-surface);
        color: var(--att-text);
        border: 1px solid var(--att-border);
        border-radius: 14px;
        width: min(1040px, 100%);
        height: min(880px, calc(100vh - 48px));
        max-height: calc(100vh - 48px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px -16px var(--record-color-554de51a);
        transform: translateY(8px) scale(0.99);
        transition: transform .16s ease;
    }
    .em-overlay.open .em-modal { transform: none; }
    .em-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--att-border);
    }
    .em-head-main { min-width: 0; flex: 1; }
    .em-subject {
        font-size: 18px; font-weight: 700; color: var(--att-text);
        line-height: 1.35; margin: 0 0 10px;
        word-break: break-word;
    }
    .em-meta-row {
        display: flex; align-items: center; gap: 8px;
        font-size: 13px; color: var(--att-text-2);
        flex-wrap: wrap;
    }
    .em-meta-row + .em-meta-row { margin-top: 3px; }
    .em-meta-label { color: var(--att-muted); min-width: 38px; }
    .em-meta-val { color: var(--att-text-2); word-break: break-word; }
    .em-close {
        flex-shrink: 0;
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        border: 1px solid var(--att-border);
        background: var(--att-surface);
        color: var(--att-text-2);
        cursor: pointer;
        font-size: 18px;
    }
    .em-close:hover { background: var(--att-surface-2); color: var(--att-text); }
    .em-body {
        flex: 1;
        overflow: auto;
        min-height: 120px;
    }
    .em-body iframe {
        width: 100%;
        border: 0;
        display: block;
        min-height: 320px;
        background: var(--att-surface);
    }
    .em-loading, .em-error {
        padding: 48px 24px;
        text-align: center;
        color: var(--att-muted);
        font-size: 13px;
    }
    .em-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-top: 1px solid var(--att-border);
        background: var(--att-surface-2);
    }
    .em-foot .em-spacer { flex: 1; }

    /* ── Add-colleague modal bits ── */
    .ac-tab.att-action.active { color: var(--record-color-fff); background: var(--att-accent); border-color: transparent; }
    .ac-field-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--att-muted); margin: 10px 0 5px; }
    .ac-field-label:first-child { margin-top: 0; }
    .ac-input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--att-border); border-radius: 8px; background: var(--att-surface); color: var(--att-text); font-size: 13px; outline: none; }
    .ac-input:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent); }
    .ac-result-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--att-border-2); font-size: 13px; color: var(--att-text); }
    .ac-result-row:last-child { border-bottom: none; }
    .ac-result-row:hover { background: var(--att-surface-2); }
    .ac-result-empty { padding: 14px; text-align: center; color: var(--att-muted); font-size: 12.5px; }

    /* ── Comments / Notes ── */
    .cm-wrap { padding: 12px 14px; }
    .cm-composer { margin-bottom: 14px; }
    .cm-input-wrap { position: relative; }
    .cm-textarea {
        width: 100%;
        border: 1px solid var(--att-border);
        border-radius: 10px;
        background: var(--att-surface);
        color: var(--att-text);
        font-size: 13px;
        font-family: inherit;
        line-height: 1.5;
        padding: 9px 11px;
        resize: vertical;
        outline: none;
    }
    .cm-textarea:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 12%, transparent); }
    .cm-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
    .cm-hint { font-size: 11px; color: var(--att-muted); }
    .cm-list { display: flex; flex-direction: column; gap: 2px; }

    /* Comments owns the full pane height: composer pinned, list scrolls. */
    .att-pane.active[data-pane="comments"] { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    .att-pane[data-pane="comments"] #cmWrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
    .att-pane[data-pane="comments"] #cmList { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 12px; }

    /* ── Record action rows (model-specific actions moved out of the topbar) ── */
    .att-manage { padding: 12px 14px; display: flex; flex-direction: column; gap: 16px; }
    .att-manage-group { display: flex; flex-direction: column; gap: 8px; }
    .att-manage-group > .att-section-head { padding: 0; margin: 0; }
    .att-manage-actions { display: flex; flex-direction: column; gap: 6px; }
    .att-manage-actions .att-action {
        justify-content: flex-start;
        width: 100%;
        padding: 9px 11px;
        font-size: 12.5px;
    }
    .att-manage-actions .att-action span { display: inline !important; }
    .att-manage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .att-manage-desc {
        font-size: 12.5px; line-height: 1.55; color: var(--att-text-2);
        white-space: pre-wrap; word-break: break-word;
        background: var(--att-bg); border: 1px solid var(--att-border);
        border-radius: 8px; padding: 10px 12px; max-height: 260px; overflow-y: auto;
    }
    .att-manage-empty { font-size: 12px; color: var(--att-disabled); font-style: italic; }
    .att-manage-textarea {
        width: 100%; font-size: 12.5px; line-height: 1.55; font-family: inherit;
        color: var(--att-text); background: var(--att-surface);
        border: 1px solid var(--att-border); border-radius: 8px; padding: 9px 11px;
        resize: vertical; min-height: 120px; outline: none;
    }
    .att-manage-textarea:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 12%, transparent); }

    /* Relationship sub-sections (Contacts / Deal / …) inside the Manage pane. */
    .att-rel { display: flex; flex-direction: column; gap: 8px; }
    .att-rel-head {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--att-muted);
    }
    .att-rel-head .att-rel-add {
        margin-left: auto;
        width: 22px; height: 22px; border-radius: 6px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid color-mix(in srgb, var(--att-accent) 40%, var(--att-border));
        background: color-mix(in srgb, var(--att-accent) 8%, var(--att-surface));
        color: var(--att-accent); cursor: pointer; font-size: 15px;
    }
    .att-rel-head .att-rel-add:hover { background: color-mix(in srgb, var(--att-accent) 18%, transparent); }
    /* Row holding a single assignee name + its inline action buttons. The
       left bar is the related record's entity color (--chip-c). */
    .att-rel-row {
        display: flex; align-items: center; gap: 6px;
        padding: 7px 9px; border: 1px solid var(--att-border); border-radius: 8px;
        background: var(--att-surface);
        box-shadow: inset 3px 0 0 var(--chip-c, transparent);
    }
    .att-rel-row a.att-rel-name { color: var(--chip-c, var(--att-text)); }
    .att-rel-row .att-rel-name {
        flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--att-text);
        text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .att-rel-row a.att-rel-name:hover { color: var(--att-accent); }
    .att-rel-icon-btn {
        width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--att-border); background: var(--att-surface-2);
        color: var(--att-muted); cursor: pointer; font-size: 14px;
    }
    .att-rel-icon-btn:hover { color: var(--att-text); border-color: var(--att-accent); }
    .att-rel-icon-btn.is-danger:hover { color: var(--danger-color, var(--record-color-ef4444)); border-color: var(--danger-color, var(--record-color-ef4444)); }
    .att-rel-empty { font-size: 12px; color: var(--att-disabled); font-style: italic; padding: 2px 0; }
    /* Compact "assign" CTA when a single-assignee slot is empty. */
    .att-rel-assign {
        display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
        padding: 7px 11px; border: 1px dashed var(--att-border); border-radius: 8px;
        background: transparent; color: var(--att-muted); cursor: pointer; font-size: 12.5px; font-weight: 600;
    }
    .att-rel-assign:hover { color: var(--att-accent); border-color: var(--att-accent); }
    .cm-loading, .cm-empty { padding: 24px; text-align: center; color: var(--att-muted); font-size: 12.5px; }
    .cm-item { display: flex; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--att-border-2); }
    .cm-item:first-child { border-top: none; }
    .cm-avatar {
        width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 700; text-transform: uppercase;
        background: color-mix(in srgb, var(--att-accent) 18%, transparent);
        color: var(--att-accent);
    }
    .cm-body { flex: 1; min-width: 0; }
    .cm-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .cm-author { font-size: 12.5px; font-weight: 700; color: var(--att-text); }
    .cm-time { font-size: 11px; color: var(--att-muted); }
    .cm-text { font-size: 13px; color: var(--att-text-2); line-height: 1.5; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
    .cm-text .cm-mention, .cm-text .mention { color: var(--att-accent); font-weight: 600; background: color-mix(in srgb, var(--att-accent) 12%, transparent); padding: 0 4px; border-radius: 4px; }
    .cm-actions { display: flex; gap: 12px; margin-top: 6px; }
    .cm-action { background: none; border: none; padding: 0; cursor: pointer; font-size: 11.5px; color: var(--att-muted); display: inline-flex; align-items: center; gap: 4px; }
    .cm-action:hover { color: var(--att-text); }
    .cm-action.liked { color: var(--att-accent); }
    .cm-meta .cm-actions { margin-top: 0; margin-left: auto; opacity: 0; transition: opacity .15s; }
    .cm-item:hover .cm-meta .cm-actions { opacity: 1; }
    .cm-action-btn { background: none; border: none; padding: 2px 4px; cursor: pointer; font-size: 13px; color: var(--att-muted); border-radius: 4px; line-height: 1; display: inline-flex; align-items: center; }
    .cm-action-btn:hover { color: var(--att-text); background: var(--att-hover, var(--record-color-bae00db0)); }
    .cm-action-del:hover { color: var(--danger, var(--record-color-ef4444)); }
    .cm-edit-form { margin-top: 6px; }
    .cm-edit-ta { width: 100%; resize: vertical; }
    .cm-mention-pop {
        position: absolute;
        z-index: 30;
        min-width: 200px; max-width: 280px;
        max-height: 220px; overflow-y: auto;
        background: var(--att-surface);
        border: 1px solid var(--att-border);
        border-radius: 10px;
        box-shadow: 0 12px 28px -8px var(--record-color-7be18e16);
        padding: 4px;
    }
    .cm-mention-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--att-text); }
    .cm-mention-opt.active, .cm-mention-opt:hover { background: var(--att-surface-2); }
    .cm-mention-opt .u { font-size: 11px; color: var(--att-muted); }

    /* ── Note board (rich, note-like) ───────────────────────────── */
    .note-board { padding: 12px 14px 26px; }

    /* Colour tokens: fallbacks only — a theme may override --note-*.       */
    .note-c-default { --sw-c: var(--att-surface-2); }
    .note-c-indigo  { --sw-c: var(--note-indigo, var(--accent-color)); }
    .note-c-green   { --sw-c: var(--note-green,  var(--record-color-22c55e)); }
    .note-c-blue    { --sw-c: var(--note-blue,   var(--record-color-3b82f6)); }
    .note-c-red     { --sw-c: var(--note-red,    var(--record-color-ef4444)); }
    .note-c-purple  { --sw-c: var(--note-purple, var(--record-color-8b5cf6)); }
    .note-c-orange  { --sw-c: var(--note-orange, var(--record-color-f97316)); }
    .note-c-teal    { --sw-c: var(--note-teal,   var(--record-color-14b8a6)); }
    .note-c-pink    { --sw-c: var(--note-pink,   var(--record-color-ec4899)); }
    .note-c-gray    { --sw-c: var(--note-gray,   var(--record-color-6b7280)); }

    /* Composer: the board's first card, an empty note (the dashed New app card
       of the RSR launcher). At rest it is one note's size with a writing line and
       Add note; typing into it opens it across the row with the title, the
       formatting and the colour, category, size and pin settings. */
    .note-composer {
        display: flex; flex-direction: column;
        border: 1px dashed var(--att-border); border-radius: 12px;
        background: transparent; padding: 11px 13px 10px; margin: 0;
        transition: border-color .15s, background .15s;
    }
    .note-composer:hover { border-color: color-mix(in srgb, var(--att-accent) 45%, var(--att-border)); }
    .note-grid:not(.is-list) .note-composer:not(.is-open) { height: 172px; }
    .note-composer .cm-input-wrap { flex: 1 1 auto; min-height: 0; }
    .note-composer:not(.is-open) .note-rte { min-height: 0; height: 100%; overflow: hidden; }
    .note-composer:not(.is-open) .note-title-input,
    .note-composer:not(.is-open) .note-fmt-bar,
    .note-composer:not(.is-open) .note-composer-tools { display: none; }
    .note-composer .note-composer-foot { margin-top: auto; padding-top: 10px; }
    .note-composer.is-open {
        grid-column: 1 / -1;
        border-style: solid; background: var(--att-surface);
        border-color: color-mix(in srgb, var(--att-accent) 50%, transparent);
    }
    /* The colour picked for the draft shows on it, the tint the saved note gets. */
    .note-composer[data-color]:not([data-color="default"]) {
        border-style: solid;
        background: color-mix(in srgb, var(--note-c) 9%, var(--att-surface));
        border-color: color-mix(in srgb, var(--note-c) 40%, var(--att-border));
        box-shadow: inset 3px 0 0 var(--note-c);
    }
    .note-title-input {
        width: 100%; border: none; background: transparent; outline: none;
        color: var(--att-text); font-size: 14.5px; font-weight: 700;
        padding: 2px 2px 6px; font-family: inherit;
    }
    .note-title-input::placeholder { color: var(--att-muted); font-weight: 600; }
    .note-textarea {
        width: 100%; border: none; background: transparent; outline: none; resize: vertical;
        color: var(--att-text); font-size: 13.5px; line-height: 1.55; font-family: inherit;
        padding: 2px; min-height: 46px;
    }
    .note-textarea::placeholder { color: var(--att-muted); }
    .note-composer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .note-composer-spacer { flex: 1 1 auto; }
    .note-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

    /* Colour swatches */
    .note-swatches { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .note-swatch {
        width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0;
        border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--att-border);
        background: var(--sw-c, var(--att-surface-2)); transition: transform .1s;
    }
    .note-swatch:hover { transform: scale(1.18); }
    .note-swatch.active { border-color: var(--att-text); }
    .note-swatch.note-c-default.active { border-color: var(--att-accent); }

    /* Category select + size + pin controls */
    .note-select {
        height: 28px; border: 1px solid var(--att-border); border-radius: 7px;
        background: var(--att-surface); color: var(--att-text-2); font-size: 12px;
        padding: 0 6px; font-family: inherit; cursor: pointer; outline: none; max-width: 140px;
    }
    .note-select:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); }
    .note-size-toggle { display: inline-flex; border: 1px solid var(--att-border); border-radius: 7px; overflow: hidden; }
    .note-size-toggle button {
        border: none; background: var(--att-surface); color: var(--att-muted); cursor: pointer;
        padding: 0 8px; height: 28px; line-height: 1; font-family: inherit;
    }
    .note-size-toggle button[data-size="sm"] { font-size: 10px; }
    .note-size-toggle button[data-size="md"] { font-size: 13px; }
    .note-size-toggle button[data-size="lg"] { font-size: 16px; font-weight: 700; }
    .note-size-toggle button + button { border-left: 1px solid var(--att-border); }
    .note-size-toggle button.active { background: color-mix(in srgb, var(--att-accent) 15%, transparent); color: var(--att-accent); }
    .note-pin-toggle {
        width: 28px; height: 28px; border: 1px solid var(--att-border); border-radius: 7px;
        background: var(--att-surface); color: var(--att-muted); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    }
    .note-pin-toggle:hover { color: var(--att-text); }
    .note-pin-toggle.active {
        background: color-mix(in srgb, var(--att-accent) 15%, transparent); color: var(--att-accent);
        border-color: color-mix(in srgb, var(--att-accent) 45%, var(--att-border));
    }

    /* Toolbar */
    .note-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .note-search { position: relative; flex: 1 1 160px; min-width: 140px; display: flex; align-items: center; }
    .note-search i { position: absolute; left: 9px; color: var(--att-muted); font-size: 15px; pointer-events: none; }
    .note-search input {
        width: 100%; height: 30px; border: 1px solid var(--att-border); border-radius: 8px;
        background: var(--att-surface); color: var(--att-text); font-size: 12.5px; font-family: inherit;
        padding: 0 9px 0 30px; outline: none;
    }
    .note-search input:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); }
    .note-chip {
        display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
        border: 1px solid var(--att-border); border-radius: 8px; background: var(--att-surface);
        color: var(--att-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .note-chip:hover { color: var(--att-text); }
    .note-chip.active {
        background: color-mix(in srgb, var(--att-accent) 15%, transparent); color: var(--att-accent);
        border-color: color-mix(in srgb, var(--att-accent) 45%, var(--att-border));
    }
    .note-view-toggle {
        width: 30px; height: 30px; border: 1px solid var(--att-border); border-radius: 8px;
        background: var(--att-surface); color: var(--att-muted); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
    }
    .note-view-toggle:hover { color: var(--att-text); }

    /* Board / cards: one size for every card, so the board reads as a grid.
       Long notes are cut after three lines; Open note shows the whole text.
       The card being edited spans the row and grows to fit the editor. */
    .note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
    .note-grid.is-list { grid-template-columns: minmax(0, 1fr); }
    .note-grid:not(.is-list) .note-card:not(.is-editing) { height: 172px; overflow: hidden; }
    /* Only the text gives way in a full card: the tags, title and footer keep their size. */
    .note-card > *, .note-view > * { flex-shrink: 0; }
    .note-view > .note-text { flex-shrink: 1; min-height: 0; overflow: hidden; }
    .note-grid .note-card.is-editing { grid-column: 1 / -1; }
    .note-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .note-view[hidden] { display: none; }
    .note-grid:not(.is-list) .note-card:not(.is-editing) .note-title {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .note-grid:not(.is-list) .note-card:not(.is-editing) .note-text {
        display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .note-card .note-view > .note-foot { margin-top: auto; padding-top: 11px; }
    .note-card {
        --note-c: var(--att-accent);
        break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
        display: flex; flex-direction: column; width: 100%; margin: 0;
        border: 1px solid var(--att-border); border-radius: 12px;
        background: var(--att-surface); padding: 11px 13px 10px;
        position: relative; transition: box-shadow .15s, border-color .15s, opacity .18s, transform .18s;
    }
    .note-card:hover { box-shadow: 0 6px 20px -10px var(--record-color-2d55e9cc); border-color: color-mix(in srgb, var(--att-accent) 22%, var(--att-border)); }
    .note-card[data-color="indigo"], .note-composer[data-color="indigo"] { --note-c: var(--note-indigo, var(--accent-color)); }
    .note-card[data-color="green"], .note-composer[data-color="green"]  { --note-c: var(--note-green,  var(--record-color-22c55e)); }
    .note-card[data-color="blue"], .note-composer[data-color="blue"]   { --note-c: var(--note-blue,   var(--record-color-3b82f6)); }
    .note-card[data-color="red"], .note-composer[data-color="red"]    { --note-c: var(--note-red,    var(--record-color-ef4444)); }
    .note-card[data-color="purple"], .note-composer[data-color="purple"] { --note-c: var(--note-purple, var(--record-color-8b5cf6)); }
    .note-card[data-color="orange"], .note-composer[data-color="orange"] { --note-c: var(--note-orange, var(--record-color-f97316)); }
    .note-card[data-color="teal"], .note-composer[data-color="teal"]   { --note-c: var(--note-teal,   var(--record-color-14b8a6)); }
    .note-card[data-color="pink"], .note-composer[data-color="pink"]   { --note-c: var(--note-pink,   var(--record-color-ec4899)); }
    .note-card[data-color="gray"], .note-composer[data-color="gray"]   { --note-c: var(--note-gray,   var(--record-color-6b7280)); }
    .note-card:not([data-color="default"]) {
        background: color-mix(in srgb, var(--note-c) 9%, var(--att-surface));
        border-color: color-mix(in srgb, var(--note-c) 26%, var(--att-border));
        box-shadow: inset 3px 0 0 var(--note-c);
    }
    .note-card:not([data-color="default"]):hover { box-shadow: inset 3px 0 0 var(--note-c), 0 6px 20px -10px var(--record-color-2d55e9cc); }
    .note-card.is-pinned { border-color: color-mix(in srgb, var(--note-c) 42%, var(--att-border)); }

    /* The tags row only takes room when it has tags; the hover actions float
       over the card's top right corner instead of holding a blank band. */
    .note-card-top { display: flex; align-items: flex-start; gap: 6px; }
    .note-card-top .note-actions {
        position: absolute; top: 6px; right: 6px; z-index: 2;
        border-radius: 7px; background: var(--att-surface);
    }
    .note-card.is-editing .note-card-top .note-actions { position: static; }
    .note-card-tags { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
    .note-badge {
        display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px;
        border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
        background: color-mix(in srgb, var(--cat-c, var(--att-accent)) 16%, transparent);
        color: color-mix(in srgb, var(--cat-c, var(--att-accent)) 78%, var(--att-text));
    }
    .note-badge i { font-size: 11px; }
    .note-badge--general   { --cat-c: var(--att-muted); }
    .note-badge--call      { --cat-c: var(--note-blue,   var(--record-color-3b82f6)); }
    .note-badge--meeting   { --cat-c: var(--note-purple, var(--record-color-8b5cf6)); }
    .note-badge--idea      { --cat-c: var(--note-indigo, var(--accent-color)); }
    .note-badge--todo      { --cat-c: var(--note-teal,   var(--record-color-14b8a6)); }
    .note-badge--important { --cat-c: var(--note-red,    var(--record-color-ef4444)); }
    .note-pin-flag { color: var(--note-c); font-size: 13px; display: inline-flex; }
    .note-card[data-color="default"] .note-pin-flag { color: var(--att-accent); }

    .note-actions { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .12s; flex-shrink: 0; margin-left: auto; }
    .note-card:hover .note-actions, .note-card.is-editing .note-actions { opacity: 1; }
    .note-act {
        width: 24px; height: 24px; border: none; background: transparent; color: var(--att-muted);
        border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0;
    }
    .note-act:hover { background: var(--att-hover, var(--record-color-bae00db0)); color: var(--att-text); }
    .note-act--del:hover { color: var(--danger, var(--record-color-ef4444)); background: color-mix(in srgb, var(--danger, var(--record-color-ef4444)) 12%, transparent); }

    .note-title { font-size: 15px; font-weight: 800; letter-spacing: -.012em; color: var(--att-text); margin: 9px 0 3px; line-height: 1.25; word-break: break-word; }
    .note-text { font-size: 13.5px; font-weight: 400; color: var(--att-text-2); line-height: 1.58; margin-top: 6px; word-break: break-word; white-space: normal; }
    .note-text br { display: block; content: ""; }
    .note-card[data-size="sm"] .note-text  { font-size: 12px; }
    .note-card[data-size="md"] .note-text  { font-size: 13.5px; }
    .note-card[data-size="lg"] .note-text  { font-size: 15.5px; line-height: 1.62; }
    .note-card[data-size="sm"] .note-title { font-size: 13px; }
    .note-card[data-size="lg"] .note-title { font-size: 17.5px; }
    .note-text .user-mention, .note-text .mention, .note-text .cm-mention {
        color: var(--att-accent); font-weight: 600; background: color-mix(in srgb, var(--att-accent) 12%, transparent);
        padding: 0 4px; border-radius: 4px; cursor: default;
    }
    .note-foot { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 11px; font-weight: 400; color: var(--att-muted); }
    /* The author's avatar (.u-avatar paints it); this only sizes it. */
    .note-avatar {
        width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    }
    .note-author { font-weight: 700; color: var(--att-text-2); }
    .note-time { font-weight: 400; }
    .note-dot { opacity: .6; }

    /* Inline palette popover on a card */
    .note-palette {
        position: absolute; top: 34px; left: 8px; right: 8px; z-index: 3;
        display: flex; gap: 7px; flex-wrap: wrap; margin: 0; padding: 9px;
        border: 1px solid var(--att-border); border-radius: 9px; background: var(--att-surface);
    }

    /* Inline edit */
    .note-edit { margin-top: 8px; }
    .note-edit .note-title-input {
        border: 1px solid var(--att-border); border-radius: 8px; background: var(--att-surface); padding: 7px 9px; font-size: 13.5px;
    }
    .note-edit .note-textarea {
        border: 1px solid var(--att-border); border-radius: 8px; background: var(--att-surface); padding: 8px 10px; margin-top: 6px; min-height: 60px;
    }
    .note-edit .note-textarea:focus, .note-edit .note-title-input:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, transparent); }
    .note-edit-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .note-edit-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

    /* Empty state */
    .note-empty { text-align: center; padding: 42px 20px; color: var(--att-muted); }
    .note-empty i { font-size: 34px; opacity: .5; }
    .note-empty .title { font-size: 14px; font-weight: 700; color: var(--att-text-2); margin-top: 8px; }
    .note-empty .hint { font-size: 12px; margin-top: 3px; }

    /* Pinned strip (header) */
    .note-pinned-bar {
        display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 10px;
        border: 1px solid color-mix(in srgb, var(--att-accent) 22%, var(--att-border)); border-radius: 10px;
        background: color-mix(in srgb, var(--att-accent) 5%, var(--att-surface));
    }
    .note-pinned-label {
        display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
        font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--att-accent);
    }
    .note-pinned-label i { font-size: 13px; }
    .note-pinned-track { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 1px; }
    .note-pinned-track::-webkit-scrollbar { height: 4px; }
    .note-pinned-track::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--att-muted) 40%, transparent); border-radius: 4px; }
    .note-pin-chip {
        --note-c: var(--att-accent);
        display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 200px;
        padding: 5px 10px 5px 8px; border-radius: 7px; cursor: pointer;
        border: 1px solid color-mix(in srgb, var(--note-c) 32%, var(--att-border));
        background: color-mix(in srgb, var(--note-c) 12%, var(--att-surface));
        box-shadow: inset 3px 0 0 var(--note-c);
        font-size: 12px; font-weight: 700; color: var(--att-text); transition: transform .1s, box-shadow .12s;
    }
    .note-pin-chip:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--note-c), 0 4px 10px -6px var(--record-color-3d9c0a42); }
    .note-pin-chip i { font-size: 12px; color: var(--note-c); flex-shrink: 0; }
    .note-pin-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @keyframes noteFlash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 28% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 55%, transparent); } }
    .note-card.is-flash { animation: noteFlash 1.05s ease; }

    /* Pinned notes surfaced in the record top bar (next to name/owner);
       chips carry the note colour + title, click opens the focus view. */
    .att-pinned-notes { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; margin-left: 6px; }
    .att-pin-note {
        --note-c: var(--att-accent);
        display: inline-flex; align-items: center; gap: 5px; max-width: 180px; flex-shrink: 1; min-width: 0;
        padding: 3px 9px 3px 7px; border-radius: 999px; cursor: pointer;
        border: 1px solid color-mix(in srgb, var(--note-c) 35%, var(--att-border));
        background: color-mix(in srgb, var(--note-c) 12%, var(--att-surface));
        color: var(--att-text); font-size: 11px; font-weight: 600; font-family: inherit; line-height: 1.4;
    }
    .att-pin-note:hover { background: color-mix(in srgb, var(--note-c) 20%, var(--att-surface)); }
    .att-pin-note i { font-size: 11px; color: var(--note-c); flex-shrink: 0; }
    .att-pin-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .att-pin-note.is-more { max-width: none; color: var(--att-muted); }
    @media (max-width: 860px) { .att-pinned-notes { display: none; } }

    /* Rich-text editor (WYSIWYG composer + inline edit) */
    .note-rte {
        --note-c: var(--att-accent);
        width: 100%; min-height: 52px; max-height: 320px; overflow-y: auto; outline: none;
        color: var(--att-text); font-size: 13.5px; line-height: 1.58; font-family: inherit;
        padding: 2px; word-break: break-word; white-space: pre-wrap;
    }
    .note-rte:empty::before { content: attr(data-placeholder); color: var(--att-muted); pointer-events: none; }
    .note-rte > div, .note-rte > p { margin: 0; min-height: 1.58em; }
    .note-rte strong, .note-rte b { font-weight: 800; color: var(--att-text); }
    .note-rte em, .note-rte i { font-style: italic; }
    .note-rte code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
        background: var(--att-surface-2); border: 1px solid var(--att-border); border-radius: 4px; padding: .5px 4px;
    }
    .note-rte blockquote {
        margin: 4px 0; padding: 2px 10px; border-left: 3px solid color-mix(in srgb, var(--att-accent) 55%, var(--att-border));
        color: var(--att-text); font-style: italic; background: color-mix(in srgb, var(--att-accent) 6%, transparent); border-radius: 0 6px 6px 0;
    }
    .note-rte .rte-mention {
        color: var(--att-accent); font-weight: 600; background: color-mix(in srgb, var(--att-accent) 12%, transparent);
        padding: 0 4px; border-radius: 4px; white-space: nowrap;
    }
    /* Inline checkbox item inside the editor */
    .note-rte .rte-chk {
        display: flex; align-items: flex-start; gap: 8px; padding: 1px 0 1px 0; margin: 1px 0;
    }
    .note-rte .rte-chk::before {
        content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; cursor: pointer;
        border: 1.5px solid color-mix(in srgb, var(--att-muted) 70%, var(--att-border)); background: var(--att-surface);
        background-position: center; background-repeat: no-repeat; background-size: 12px; transition: background-color .1s, border-color .1s;
    }
    .note-rte .rte-chk[data-checked="true"]::before {
        background-color: var(--att-accent); border-color: var(--att-accent);
        background-image: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    }
    .note-rte .rte-chk[data-checked="true"] { color: var(--att-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--att-muted) 55%, transparent); }

    /* Formatting toolbar */
    .note-fmt-bar { display: flex; align-items: center; gap: 2px; margin-top: 8px; flex-wrap: wrap; }
    .note-fmt {
        height: 26px; min-width: 26px; padding: 0 6px; border: none; background: transparent; color: var(--att-muted);
        border-radius: 6px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    }
    .note-fmt:hover { background: var(--att-hover, var(--record-color-bae00db0)); color: var(--att-text); }
    .note-fmt--text { font-size: 12px; font-weight: 600; }
    .note-fmt--text i { font-size: 14px; }
    .note-fmt-sep { width: 1px; height: 16px; background: var(--att-border); margin: 0 4px; }

    /* Templates menu */
    .note-tmpl { position: relative; }
    .note-tmpl-menu {
        position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 190px;
        background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 9px;
        box-shadow: 0 12px 28px -8px var(--record-color-2d55e9cc); padding: 4px;
    }
    .note-tmpl-item {
        display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px; cursor: pointer; width: 100%;
        border: none; background: transparent; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--att-text); font-family: inherit;
    }
    .note-tmpl-item:hover { background: var(--att-surface-2); }
    .note-tmpl-item i { font-size: 16px; color: var(--att-muted); flex-shrink: 0; }
    .note-tmpl-item small { display: block; font-size: 10.5px; color: var(--att-muted); font-weight: 400; margin-top: 1px; }

    /* Formatting help tooltip */
    .note-help { position: relative; display: inline-flex; align-items: center; color: var(--att-muted); cursor: help; font-size: 15px; }
    .note-help:hover, .note-help:focus { color: var(--att-accent); outline: none; }
    .note-help-pop {
        position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40; width: 232px;
        background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 8px;
        box-shadow: 0 12px 28px -8px var(--record-color-2d55e9cc); padding: 9px 11px;
        font-size: 11.5px; font-weight: 400; line-height: 1.75; color: var(--att-text-2);
        opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .12s, transform .12s, visibility .12s;
    }
    .note-help:hover .note-help-pop, .note-help:focus .note-help-pop { opacity: 1; visibility: visible; transform: translateY(0); }
    .note-help-pop code { font-size: 11px; background: var(--att-surface-2); padding: 0 3px; border-radius: 3px; }

    /* Rich content: bold / italic / code / quote / checklist */
    .note-text strong, .note-reader-text strong { font-weight: 800; color: var(--att-text); }
    .note-text em, .note-reader-text em { font-style: italic; }
    .note-text code, .note-reader-text code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
        background: var(--att-surface-2); border: 1px solid var(--att-border); border-radius: 4px; padding: .5px 4px;
    }
    .note-text blockquote, .note-reader-text blockquote {
        margin: 6px 0; padding: 3px 10px; border-left: 3px solid color-mix(in srgb, var(--note-c) 55%, var(--att-border));
        color: var(--att-text); font-style: italic; background: color-mix(in srgb, var(--note-c) 6%, transparent); border-radius: 0 6px 6px 0;
    }
    .note-text ul.nchk, .note-reader-text ul.nchk { list-style: none; margin: 7px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
    .note-text ul.nchk li, .note-reader-text ul.nchk li {
        display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 2px 2px 2px 0; font-weight: 400; line-height: 1.45; border-radius: 5px;
    }
    .note-text ul.nchk li:hover, .note-reader-text ul.nchk li:hover { background: var(--att-hover, var(--record-color-556c31e7)); }
    .note-text ul.nchk li::before, .note-reader-text ul.nchk li::before {
        content: ""; flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; border-radius: 4px;
        border: 1.5px solid color-mix(in srgb, var(--att-muted) 70%, var(--att-border)); background: var(--att-surface);
        background-position: center; background-repeat: no-repeat; background-size: 11px; transition: background-color .1s, border-color .1s;
    }
    .note-text ul.nchk li[data-c="1"]::before, .note-reader-text ul.nchk li[data-c="1"]::before {
        background-color: var(--note-c); border-color: var(--note-c);
        background-image: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    }
    .note-card[data-color="default"] .note-text ul.nchk li[data-c="1"]::before { background-color: var(--att-accent); border-color: var(--att-accent); }
    .note-text ul.nchk li[data-c="1"], .note-reader-text ul.nchk li[data-c="1"] {
        color: var(--att-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--att-muted) 60%, transparent);
    }
    .note-chk-add {
        display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 7px; border: none; background: transparent;
        color: var(--att-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; border-radius: 5px; font-family: inherit;
    }
    .note-chk-add:hover { color: var(--att-accent); background: color-mix(in srgb, var(--att-accent) 10%, transparent); }
    .note-chk-input {
        margin-top: 5px; width: 100%; border: 1px solid color-mix(in srgb, var(--att-accent) 45%, var(--att-border)); border-radius: 6px;
        background: var(--att-surface); color: var(--att-text); font-size: 12.5px; padding: 5px 8px; outline: none; font-family: inherit;
    }

    /* Colour filter dots */
    .note-color-filter { display: inline-flex; align-items: center; gap: 4px; }
    .note-color-filter .note-swatch { width: 16px; height: 16px; }
    .note-color-filter .note-swatch.active { transform: scale(1.15); }

    /* Reader / focus modal */
    .note-reader-overlay {
        position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center;
        padding: 6vh 16px 16px; background: var(--record-color-63db2c44); overflow-y: auto;
    }
    .note-reader {
        --note-c: var(--att-accent); width: 100%; max-width: 620px; background: var(--att-surface); border: 1px solid var(--att-border);
        border-radius: 16px; box-shadow: 0 30px 70px -20px var(--record-color-e1d0b862); overflow: hidden; animation: noteReaderIn .16s ease;
    }
    @keyframes noteReaderIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
    .note-reader.is-color { border-top: 4px solid var(--note-c); }
    .note-reader-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
    .note-reader-actions { display: inline-flex; gap: 2px; margin-left: auto; }
    .note-reader-body { padding: 2px 18px 6px; max-height: 58vh; overflow-y: auto; }
    .note-reader-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--att-text); line-height: 1.2; margin: 4px 0 8px; }
    .note-reader-text { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--att-text); word-break: break-word; }
    .note-reader-foot { display: flex; align-items: center; gap: 8px; padding: 10px 18px 16px; font-size: 12px; color: var(--att-muted); }
    .note-reader-foot .note-avatar { width: 24px; height: 24px; font-size: 11px; }
    .note-edited { font-size: 10px; font-weight: 600; color: var(--att-muted); opacity: .85; }

    @media (max-width: 640px) {
        .note-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
        .note-actions { opacity: 1; }
        .note-fmt--text span { display: none; }
    }

    /* ── Files tab ── */
    .fl-drop { border: 2px dashed var(--att-border); border-radius: 12px; padding: 28px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; color: var(--att-muted); margin-bottom: 14px; }
    .fl-drop:hover, .fl-drop.drag-over { border-color: var(--att-accent); background: color-mix(in srgb, var(--att-accent) 6%, transparent); }
    .fl-drop > i { font-size: 34px; color: var(--att-accent); }
    .fl-drop-title { font-size: 13.5px; color: var(--att-text); margin-top: 8px; }
    .fl-browse { color: var(--att-accent); font-weight: 600; cursor: pointer; }
    .fl-drop-hint { font-size: 11.5px; color: var(--att-muted); margin-top: 3px; }
    .fl-progress { height: 4px; background: var(--att-surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
    .fl-progress-bar { height: 100%; width: 0; background: var(--att-accent); transition: width .2s; }
    .fl-list { display: flex; flex-direction: column; gap: 6px; }
    .fl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--att-border); border-radius: 10px; background: var(--att-surface); }
    .fl-item:hover { background: var(--att-surface-2); }
    .fl-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--att-accent) 14%, transparent); color: var(--att-accent); font-size: 18px; flex-shrink: 0; }
    .fl-main { flex: 1; min-width: 0; }
    .fl-name { display: block; font-size: 13px; font-weight: 600; color: var(--att-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fl-name:hover { color: var(--att-accent); text-decoration: underline; }
    .fl-meta { font-size: 11.5px; color: var(--att-muted); margin-top: 2px; }
    .fl-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .fl-act { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--att-border); background: var(--att-surface); color: var(--att-muted); border-radius: 7px; cursor: pointer; font-size: 16px; text-decoration: none; }
    .fl-act:hover { color: var(--att-text); background: var(--att-surface-2); }
    .fl-del:hover { color: var(--danger-color, var(--record-color-ef4444)); border-color: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 40%, var(--att-border)); }
    .fl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px; color: var(--att-muted); font-size: 13px; }
    .fl-empty i { font-size: 30px; opacity: .4; }

    /* ── Candidate CV modal ── */
    .cvm-modal { width: min(1100px, 100%); height: min(880px, calc(100vh - 48px)); }
    .cvm-body { display: flex; overflow: hidden; }
    .cvm-list { flex: 0 0 280px; display: flex; flex-direction: column; gap: 4px; padding: 10px; overflow-y: auto; border-right: 1px solid var(--att-border); }
    .cvm-list:empty { display: none; }
    .cvm-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
    .cvm-item:hover { background: var(--att-surface-2); }
    .cvm-item:focus-visible { outline: 2px solid var(--att-accent); outline-offset: -2px; }
    .cvm-item.is-active { background: color-mix(in srgb, var(--att-accent) 10%, transparent); border-color: color-mix(in srgb, var(--att-accent) 30%, transparent); }
    .cvm-item > i { font-size: 18px; color: var(--att-accent); flex-shrink: 0; }
    .cvm-main { flex: 1; min-width: 0; }
    .cvm-name { font-size: 13px; font-weight: 600; color: var(--att-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cvm-meta { font-size: 11.5px; color: var(--att-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cvm-del { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--att-muted); font-size: 16px; cursor: pointer; }
    .cvm-del:hover { color: var(--danger-color, var(--record-color-ef4444)); background: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 10%, transparent); }
    .cvm-body .cvm-frame { flex: 1; width: auto; min-width: 0; height: 100%; }
    .cvm-empty { flex: 1; }
    /* The confirm dialog is a Bootstrap modal (1055); a CV delete asks it from
       inside the CV modal (.em-overlay, 1200), so it must stack above. */
    #globalConfirmModal { z-index: 1300; }

    /* Split button: the main part acts on the newest CV, the arrow lists every
       CV. Menu styled after the notes Template menu. */
    .att-split { position: relative; display: inline-flex; }
    .att-split.has-menu > .att-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .att-split-caret { margin-left: -1px; padding-left: 6px; padding-right: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .att-split-caret i { font-size: 16px; }
    .att-manage-actions .att-split { display: flex; width: 100%; }
    .att-manage-actions .att-split > .att-split-main { flex: 1; min-width: 0; }
    .att-manage-actions .att-split > .att-split-caret { width: auto; flex: 0 0 auto; justify-content: center; padding-left: 8px; padding-right: 8px; }
    .att-cv-menu {
        position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 250px; max-width: 320px;
        max-height: 300px; overflow-y: auto;
        background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 9px;
        /* The sidebar colour stays dark in every theme, so the shadow never
           turns into the light glow a text colour based one gives dark themes. */
        box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--sidebar-bg, var(--record-color-0f172a)) 45%, transparent); padding: 4px;
    }
    .att-cv-item {
        display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px; cursor: pointer; width: 100%;
        border: none; background: transparent; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--att-text); font-family: inherit;
    }
    .att-cv-item:hover, .att-cv-item:focus-visible { background: var(--att-surface-2); outline: none; }
    .att-cv-item > i { font-size: 16px; color: var(--att-accent); flex-shrink: 0; }
    .att-cv-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .att-cv-item small { display: block; font-size: 10.5px; color: var(--att-muted); font-weight: 400; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 720px) {
        .cvm-body { flex-direction: column; }
        .cvm-list { flex: 0 0 auto; max-height: 150px; border-right: 0; border-bottom: 1px solid var(--att-border); }
    }

    /* ── Projects tab (company only) ── */
    .pj-section-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--att-muted); margin-bottom: 12px; }
    .pj-section-head i { font-size: 15px; }
    .pj-count { font-size: 11px; background: var(--att-surface-2); color: var(--att-muted); padding: 1px 7px; border-radius: 8px; }
    .pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
    .pj-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--att-border); border-radius: 14px; background: var(--att-surface); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; overflow: hidden; }
    .pj-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pj-color, var(--att-accent)); }
    .pj-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--record-color-5338a386); border-color: color-mix(in srgb, var(--pj-color, var(--att-accent)) 45%, var(--att-border)); color: inherit; text-decoration: none; }
    .pj-card-top { display: flex; align-items: center; gap: 9px; }
    .pj-card-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pj-color, var(--att-accent)) 16%, transparent); color: var(--pj-color, var(--att-accent)); font-size: 16px; }
    .pj-card-name { font-size: 14px; font-weight: 700; color: var(--att-text); line-height: 1.3; word-break: break-word; }
    .pj-card-desc { font-size: 12px; color: var(--att-text-2); line-height: 1.45; }
    .pj-progress { height: 6px; border-radius: 4px; background: var(--att-surface-2); overflow: hidden; }
    .pj-progress-bar { height: 100%; background: var(--pj-color, var(--att-accent)); border-radius: 4px; transition: width .3s; }
    .pj-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--att-muted); }
    .pj-card-meta i { font-size: 13px; }
    .pj-pct { font-weight: 700; color: var(--att-text-2); }
    .pj-card-foot { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--att-muted); border-top: 1px solid var(--att-border-2); padding-top: 8px; }
    .pj-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
    .pj-op-list { display: flex; flex-direction: column; gap: 10px; }
    /* Inside a table frame there is no row padding to inherit. */
    .lv-embed > .pj-op-list { padding: 12px; }
    .sp-fields { padding: 4px 0; }
    .sp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
    .pj-op { border: 1px solid var(--att-border); border-radius: 14px; background: var(--att-surface); overflow: hidden; }
    .pj-op-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--att-border); background: var(--att-surface-2); }
    .pj-op-name { font-size: 13.5px; font-weight: 700; color: var(--att-text); text-decoration: none; }
    .pj-op-name:hover { color: var(--pj-color, var(--att-accent)); }
    .pj-op-count { margin-left: auto; font-size: 11px; color: var(--att-muted); }
    .pj-op-head .cx-actions { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
    .pj-op:hover .cx-actions, .pj-op:focus-within .cx-actions { opacity: 1; }
    /* A work experience entry is a small form: its fields edit in place. */
    .pj-op .att-formcard.cx-body { border: 0; border-radius: 0; padding: 6px 14px 10px; }
    .cx-body .att-field[data-editor="textarea"] .att-field-value { white-space: pre-line; }
    /* Tagged tasks on the left, the company's delivery projects on the right,
       half the width each. The cards run two or three across, by the room the
       right half has; one column only on a phone. */
    .ptk-layout.has-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
    .ptk-layout.has-side .ptk-side { container-type: inline-size; min-width: 0; }
    .ptk-layout.has-side .ptk-side .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @container (min-width: 720px) { .ptk-layout.has-side .ptk-side .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @container (max-width: 439px) { .ptk-layout.has-side .ptk-side .pj-grid { grid-template-columns: minmax(0, 1fr); } }
    @media (max-width: 1100px) { .ptk-layout.has-side { grid-template-columns: minmax(0, 1fr); } .ptk-side { order: -1; } }
    .ptk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .ptk-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 100%; padding: 0 10px; border: 1px solid var(--att-border); border-radius: 999px; background: var(--att-surface); color: var(--att-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ptk-pill:hover { color: var(--att-text); }
    .ptk-pill.active { background: color-mix(in srgb, var(--pj-color, var(--att-accent)) 14%, transparent); color: var(--pj-color, var(--att-accent)); border-color: color-mix(in srgb, var(--pj-color, var(--att-accent)) 45%, var(--att-border)); }
    .ptk-pill-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--pj-color, var(--att-accent)); }
    .ptk-pill-n { font-weight: 500; opacity: .75; }
    /* Projects/Tasks: tasks grouped under a small project label; a row opens
       the task drawer, ctrl or middle click still opens it on the board. */
    .ptk-groups { display: flex; flex-direction: column; gap: 18px; }
    .ptk-proj { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 7px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--att-text-2); text-decoration: none; }
    .ptk-proj i { font-size: 14px; color: var(--pj-color, var(--att-accent)); }
    .ptk-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ptk-proj:hover { color: var(--pj-color, var(--att-accent)); text-decoration: none; }
    .ptk-proj:hover .ptk-proj-name { text-decoration: underline; }
    .ptk-proj-count { font-weight: 500; color: var(--att-muted); white-space: nowrap; }
    .ptk-list { border: 1px solid var(--att-border); border-radius: 14px; background: var(--att-surface); overflow: hidden; }
    .ptk-row { display: flex; gap: 12px; padding: 14px 16px; color: var(--att-text); text-decoration: none; border-top: 1px solid var(--att-border-2); transition: background .12s; }
    .ptk-row:first-child { border-top: 0; }
    .ptk-row:hover { background: color-mix(in srgb, var(--pj-color, var(--att-accent)) 5%, var(--att-surface)); color: var(--att-text); text-decoration: none; }
    .ptk-row:focus-visible { outline: 2px solid var(--att-accent); outline-offset: -2px; }
    .ptk-row.is-open { background: color-mix(in srgb, var(--pj-color, var(--att-accent)) 9%, var(--att-surface)); }
    .ptk-check { font-size: 20px; line-height: 1; color: var(--att-muted); flex-shrink: 0; }
    .ptk-row.is-done .ptk-check { color: var(--success-color, var(--record-color-16a34a)); }
    .ptk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .ptk-top { display: flex; align-items: flex-start; gap: 10px; }
    .ptk-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
    .ptk-row.is-done .ptk-title { text-decoration: line-through; color: var(--att-muted); }
    .ptk-status { flex-shrink: 0; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--st, var(--att-muted)) 16%, transparent); color: color-mix(in srgb, var(--st, var(--att-muted)) 75%, var(--att-text)); }
    .ptk-snippet { font-size: 12.5px; line-height: 1.45; color: var(--att-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ptk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 11.5px; color: var(--att-muted); }
    .ptk-tag { padding: 1px 8px; border-radius: 999px; background: var(--att-surface-2); color: var(--att-text-2); font-size: 11px; }
    .ptk-meta-end { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
    .ptk-prio, .ptk-due { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
    .ptk-prio i, .ptk-due i { font-size: 13px; }
    .ptk-prio--low { color: var(--info-color, var(--record-color-06b6d4)); }
    .ptk-prio--medium { color: var(--att-accent); }
    .ptk-prio--high { color: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 65%, var(--att-text)); }
    .ptk-prio--urgent { color: var(--danger-color, var(--record-color-ef4444)); font-weight: 700; }
    .ptk-due.is-overdue { color: var(--danger-color, var(--record-color-ef4444)); font-weight: 600; }
    .ptk-people { display: inline-flex; align-items: center; }
    .ptk-people .u-avatar { box-shadow: 0 0 0 2px var(--att-surface); }
    .ptk-people .u-avatar + .u-avatar { margin-left: -6px; }
    .ptk-more { margin-left: 4px; font-size: 11px; color: var(--att-muted); }
    .ptk-prio--none { color: var(--att-muted); }
    /* Task drawer: one task's review with the quick edits the board allows.
       Under the mini calendar (2100) so its date picker opens on top. */
    .ptk-drawer-backdrop { position: fixed; inset: 0; z-index: 1985; background: color-mix(in srgb, var(--att-text) 28%, transparent); opacity: 0; pointer-events: none; transition: opacity .18s; }
    .ptk-drawer-backdrop.show { opacity: 1; pointer-events: auto; }
    .ptk-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1990; width: 460px; max-width: 100vw; display: flex; flex-direction: column; background: var(--att-surface); border-left: 1px solid var(--att-border); box-shadow: -12px 0 32px color-mix(in srgb, var(--att-text) 14%, transparent); transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; outline: none; }
    .ptk-drawer.show { transform: translateX(0); visibility: visible; transition: transform .22s ease; }
    .ptk-dr-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--att-border); flex-shrink: 0; }
    .ptk-dr-head .ptk-proj { flex: 1; min-width: 0; margin: 0; }
    .ptk-dr-open { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--att-border); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--att-text-2); text-decoration: none; white-space: nowrap; }
    .ptk-dr-open:hover { color: var(--att-text); background: var(--att-surface-2); text-decoration: none; }
    .ptk-dr-close { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--att-muted); font-size: 20px; cursor: pointer; }
    .ptk-dr-close:hover { background: var(--att-surface-2); color: var(--att-text); }
    .ptk-dr-body { position: relative; flex: 1; overflow-y: auto; padding: 18px 18px 28px; }
    .ptk-dr-loading { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--att-muted); font-size: 13px; text-align: center; }
    .ptk-dr-loading i { font-size: 22px; }
    .ptk-dr-titlebar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
    .ptk-dr-check { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--att-muted); font-size: 24px; cursor: pointer; }
    .ptk-dr-check:hover:not(:disabled) { color: var(--success-color, var(--record-color-16a34a)); background: color-mix(in srgb, var(--success-color, var(--record-color-16a34a)) 10%, transparent); }
    .ptk-dr-check.is-done { color: var(--success-color, var(--record-color-16a34a)); }
    .ptk-dr-check:disabled { cursor: default; }
    .ptk-dr-title { flex: 1; min-width: 0; margin: 0; padding: 3px 6px; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--att-text); background: transparent; border: 1px solid transparent; border-radius: 8px; resize: none; overflow: hidden; overflow-wrap: anywhere; }
    textarea.ptk-dr-title:hover { border-color: var(--att-border); }
    textarea.ptk-dr-title:focus { outline: none; border-color: color-mix(in srgb, var(--att-accent) 50%, var(--att-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent); }
    .ptk-dr-check.is-done + .ptk-dr-title { text-decoration: line-through; color: var(--att-muted); }
    .ptk-dr-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: 6px 12px; font-size: 13px; }
    .ptk-dr-label { display: flex; align-items: center; gap: 6px; min-height: 32px; color: var(--att-muted); font-weight: 500; }
    .ptk-dr-label i { font-size: 14px; }
    .ptk-dr-value { min-width: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .ptk-dr-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: -8px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--att-text); font-size: 12.5px; cursor: pointer; }
    .ptk-dr-btn:hover, .ptk-dr-btn[aria-expanded="true"] { border-color: var(--att-border); background: var(--att-surface-2); }
    .ptk-dr-btn > .bx-chevron-down { font-size: 16px; color: var(--att-muted); }
    .ptk-dr-date { height: 30px; margin-left: -8px; padding: 0 8px; border: 1px solid var(--att-border); border-radius: 8px; background: var(--att-surface); color: var(--att-text); font-size: 12.5px; }
    .ptk-dr-date.is-overdue { color: var(--danger-color, var(--record-color-ef4444)); border-color: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 40%, var(--att-border)); }
    .ptk-dr-empty { color: var(--att-disabled); font-style: italic; }
    .ptk-dr-person { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 3px 2px 2px; border-radius: 999px; background: var(--att-surface-2); color: var(--att-text); font-size: 12.5px; }
    .ptk-dr-person-name { padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ptk-dr-x { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--att-muted); font-size: 14px; cursor: pointer; }
    .ptk-dr-x:hover { background: color-mix(in srgb, var(--danger-color, var(--record-color-ef4444)) 14%, transparent); color: var(--danger-color, var(--record-color-ef4444)); }
    .ptk-dr-add { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border: 1px dashed var(--att-border); border-radius: 999px; background: transparent; color: var(--att-muted); font-size: 12px; cursor: pointer; }
    .ptk-dr-add:hover, .ptk-dr-add[aria-expanded="true"] { color: var(--att-accent); border-color: var(--att-accent); }
    .ptk-dr-ent { max-width: 100%; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--chip-c, var(--att-accent)) 12%, transparent); color: var(--chip-c, var(--att-accent)); font-size: 12.5px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ptk-dr-ent:hover { color: var(--chip-c, var(--att-accent)); text-decoration: underline; }
    .ptk-dr-desc { margin-top: 18px; padding: 12px 10px; border-top: 1px solid var(--att-border); font-size: 13px; line-height: 1.55; color: var(--att-text-2); overflow-wrap: anywhere; }
    .ptk-dr-desc > :first-child { margin-top: 0; }
    .ptk-dr-desc > :last-child { margin-bottom: 0; }
    .ptk-dr-desc p { margin: 0 0 8px; }
    .ptk-dr-desc ul, .ptk-dr-desc ol { margin: 0 0 8px; padding-left: 20px; }
    .ptk-dr-desc img { max-width: 100%; border-radius: 8px; }
    .ptk-dr-desc a { color: var(--att-accent); }
    .ptk-dr-desc.is-editable { min-height: 90px; border: 1px solid transparent; border-top-color: var(--att-border); border-radius: 0 0 8px 8px; cursor: text; outline: none; }
    .ptk-dr-desc.is-editable:hover { border-color: var(--att-border); border-radius: 8px; }
    .ptk-dr-desc.is-editable:focus { border-color: color-mix(in srgb, var(--att-accent) 50%, var(--att-border)); border-radius: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent); color: var(--att-text); }
    .ptk-dr-desc.is-editable:empty::before { content: attr(data-placeholder); color: var(--att-disabled); font-style: italic; }
    .ptk-dr-counts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--att-border); font-size: 12px; color: var(--att-muted); text-decoration: none; }
    .ptk-dr-counts span { display: inline-flex; align-items: center; gap: 4px; }
    .ptk-dr-counts:hover { color: var(--att-accent); text-decoration: none; }
    .ptk-menu { position: absolute; z-index: 2; width: 250px; max-width: calc(100% - 24px); max-height: 300px; display: flex; flex-direction: column; padding: 4px; background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 10px; box-shadow: 0 8px 32px color-mix(in srgb, var(--att-text) 16%, transparent); outline: none; animation: aefDrop .14s ease-out; }
    .ptk-menu-search { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 32px; margin: 2px 2px 4px; padding: 0 8px; border: 1px solid var(--att-border); border-radius: 7px; background: var(--att-bg); color: var(--att-muted); }
    .ptk-menu-search:focus-within { border-color: color-mix(in srgb, var(--att-accent) 50%, var(--att-border)); }
    .ptk-menu-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--att-text); font-size: 12.5px; }
    .ptk-menu-list { position: relative; overflow-y: auto; }
    .ptk-menu-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--att-text); cursor: pointer; }
    .ptk-menu-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
    .ptk-menu-label > span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .ptk-menu-opt.is-active { background: color-mix(in srgb, var(--att-accent) 12%, var(--att-surface-2)); }
    .ptk-menu-tick { flex-shrink: 0; font-size: 16px; color: var(--att-accent); visibility: hidden; }
    .ptk-menu-opt.is-selected .ptk-menu-tick { visibility: visible; }
    .ptk-menu-empty { padding: 9px 10px; font-size: 12px; color: var(--att-muted); }
    @media (max-width: 700px) { .ptk-drawer { width: 100%; } .ptk-dr-fields { grid-template-columns: 92px minmax(0, 1fr); } }

    /* ── Timeline (activity board) — ported from legacy detail, theme-aware ── */
    .gantt-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .gantt-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
    /* Off reads as a plain outlined chip with the entity dot, on as the tinted chip;
       a faded chip looked disabled rather than switched off. */
    .gantt-filter-btn { display: flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: 11px; font-weight: 600; border-radius: 20px; border: 1px solid var(--att-border); background: transparent; color: var(--att-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .gantt-filter-btn:hover { color: var(--att-text); border-color: color-mix(in srgb, var(--gfb-color) 45%, var(--att-border)); }
    .gantt-filter-btn.active { background: color-mix(in srgb, var(--gfb-color) 14%, transparent); border-color: color-mix(in srgb, var(--gfb-color) 55%, transparent); color: var(--gfb-color); }
    .gantt-filter-btn .gfb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gfb-color); flex-shrink: 0; }
    .gantt-outer { width: 100%; padding-bottom: 6px; }
    .gantt-loading, .gantt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; color: var(--att-muted); gap: 10px; font-size: 13px; }
    /* Vertical activity feed: month sections → day nodes on a rail → event rows.
       Newest first; per-entity tint comes in through --tl-c (an --ent-* var). */
    .tlv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .tlv-meta { font-size: 11px; color: var(--att-muted); white-space: nowrap; padding-bottom: 3px; }
    .tlv-map { display: flex; align-items: flex-end; gap: 3px; height: 36px; padding: 4px 7px; border: 1px solid var(--att-border); border-radius: 9px; background: var(--att-surface); overflow-x: auto; max-width: 100%; }
    .tlv-map-col { width: 11px; min-width: 11px; height: 100%; display: flex; align-items: flex-end; border: none; background: transparent; padding: 0; cursor: pointer; }
    .tlv-map-col span { width: 100%; border-radius: 2px 2px 0 0; min-height: 2px; background: color-mix(in srgb, var(--att-accent) 40%, transparent); transition: background .15s; }
    .tlv-map-col:hover span { background: var(--att-accent); }
    .tlv-map-col:disabled { cursor: default; }
    .tlv-map-col:disabled span { background: color-mix(in srgb, var(--att-muted) 22%, transparent); }
    .tlv-month-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 0 7px; background: var(--att-bg); }
    .tlv-month-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--att-text-2); }
    .tlv-month-count { font-size: 10px; font-weight: 700; color: var(--att-muted); background: color-mix(in srgb, var(--att-muted) 14%, transparent); border-radius: 10px; padding: 1px 7px; }
    .tlv-month-head::after { content: ''; flex: 1; height: 1px; background: var(--att-border); }
    .tlv-day { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; }
    .tlv-day-rail { position: relative; }
    .tlv-day-rail::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--att-border) 70%, transparent); }
    .tlv-day:last-child .tlv-day-rail::before { bottom: auto; height: 22px; }
    .tlv-day-dot { position: absolute; left: 3px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--att-surface); border: 3px solid var(--att-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 13%, transparent); }
    .tlv-day-body { min-width: 0; padding: 0 0 18px; }
    .tlv-day-date { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--att-text); margin-bottom: 7px; line-height: 1.4; }
    .tlv-day-count { font-size: 10.5px; font-weight: 500; color: var(--att-muted); }
    .tlv-items { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
    .tlv-item { --tl-c: var(--att-accent); width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid var(--att-border); background: var(--att-surface); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
    .tlv-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tl-c) 45%, var(--att-border)); box-shadow: 0 6px 16px color-mix(in srgb, var(--tl-c) 12%, transparent); }
    .tlv-item.is-hi { border-left: 3px solid color-mix(in srgb, var(--tl-c) 75%, transparent); }
    .tlv-item-ico { width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; color: var(--tl-c); background: color-mix(in srgb, var(--tl-c) 12%, transparent); }
    .tlv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .tlv-item-top { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex-wrap: wrap; }
    .tlv-item-ent { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-c); flex-shrink: 0; }
    .tlv-item-title { font-size: 12.5px; font-weight: 600; color: var(--att-text); line-height: 1.4; word-break: break-word; }
    .tlv-item-meta { font-size: 11px; color: var(--att-muted); line-height: 1.4; }
    .tlv-item-arrow { font-size: 16px; color: var(--att-muted); align-self: center; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
    .tlv-item:hover .tlv-item-arrow { opacity: 1; }
    .tlv-more { border: 1px dashed var(--att-border); background: transparent; color: var(--att-muted); font-size: 11px; font-weight: 600; border-radius: 8px; padding: 4px 11px; cursor: pointer; transition: color .12s, border-color .12s; }
    .tlv-more:hover { color: var(--att-text); border-color: var(--att-muted); }
    /* Year quick-filter (segmented) */
    .tlv-years { display: inline-flex; gap: 3px; background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
    .tlv-year-chip { border: none; background: transparent; color: var(--att-muted); font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer; line-height: 1.5; transition: background .12s, color .12s; }
    .tlv-year-chip:hover { color: var(--att-text); background: var(--att-surface-2); }
    .tlv-year-chip.active { color: var(--att-accent); background: color-mix(in srgb, var(--att-accent) 15%, transparent); }
    /* Hover bubble on timeline points */
    /* Elevation: plain black rgba like .aef-combo-menu. A --att-text-based shadow
       inverts to a white glow on dark themes. */
    .tlv-tip { position: fixed; z-index: 1200; max-width: 300px; pointer-events: none; background: var(--att-surface); color: var(--att-text); border: 1px solid var(--att-border); border-radius: 10px; box-shadow: 0 8px 32px var(--record-color-8f59e80b), 0 2px 8px var(--record-color-a70919ec); padding: 10px 12px; font-size: 12px; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
    .tlv-tip.show { opacity: 1; transform: translateY(0); }
    .tlv-tip-head { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-c, var(--att-accent)); margin-bottom: 3px; }
    .tlv-tip-title { font-size: 12.5px; font-weight: 700; color: var(--att-text); line-height: 1.35; margin-bottom: 2px; word-break: break-word; }
    .tlv-tip-date { font-size: 10.5px; color: var(--att-muted); margin-bottom: 7px; }
    .tlv-tip-rows { display: flex; flex-direction: column; gap: 4px; }
    .tlv-tip-row { display: flex; gap: 8px; align-items: baseline; }
    .tlv-tip-k { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--att-muted); flex-shrink: 0; min-width: 52px; }
    .tlv-tip-v { font-size: 11.5px; color: var(--att-text-2); word-break: break-word; line-height: 1.4; }
    /* Month sub-filter (shown once a year is picked) */
    .tlv-months { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 8px; padding: 2px; }
    .tlv-month-chip { border: none; background: transparent; color: var(--att-muted); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; line-height: 1.5; transition: background .12s, color .12s; }
    .tlv-month-chip:hover:not(:disabled) { color: var(--att-text); background: var(--att-surface-2); }
    .tlv-month-chip.active { color: var(--att-accent); background: color-mix(in srgb, var(--att-accent) 15%, transparent); }
    .tlv-month-chip:disabled { opacity: .3; cursor: default; }
    /* Two-column layout: readable-width feed + sticky utility rail on wide screens */
    /* The feed takes the width; the summary column sits at the right edge. */
    .tlv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
    .tlv-feed { min-width: 0; }
    .tlv-rail { display: none; flex-direction: column; gap: 12px; }
    @media (min-width: 1120px) {
        .tlv-body { grid-template-columns: minmax(0, 1fr) 300px; }
        .tlv-rail { display: flex; position: sticky; top: 0; align-self: start; }
    }
    .tlv-rail-card { border: 1px solid var(--att-border); border-radius: 11px; background: var(--att-surface); padding: 12px 13px; }
    .tlv-rail-title { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--att-muted); margin-bottom: 9px; }
    .tlv-rail-card .tlv-map { border: none; background: transparent; padding: 0; height: 72px; gap: 4px; overflow: hidden; }
    /* Bars share the card's width instead of standing 11px wide in a corner. */
    .tlv-rail-card .tlv-map-col { flex: 1 1 0; width: auto; min-width: 4px; }
    .tlv-sum-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 11px; }
    .tlv-sum-num { font-size: 23px; font-weight: 800; color: var(--att-text); line-height: 1; }
    .tlv-sum-lbl { font-size: 11px; color: var(--att-muted); }
    .tlv-sum-list { display: flex; flex-direction: column; gap: 6px; }
    .tlv-sum-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--att-text-2); }
    .tlv-sum-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--att-accent)); flex-shrink: 0; }
    .tlv-sum-row b { margin-left: auto; color: var(--att-text); font-weight: 700; }
    /* Enriched hover bubble */
    .tlv-tip-sum { font-size: 12px; color: var(--att-text-2); line-height: 1.5; }
    .tlv-tip-preview { font-size: 11.5px; color: var(--att-muted); line-height: 1.45; margin-top: 6px; border-left: 2px solid color-mix(in srgb, var(--tl-c, var(--att-accent)) 45%, var(--att-border)); padding-left: 8px; }
    @media (max-width: 767px) {
        .tlv-head { align-items: flex-start; flex-direction: column; }
        .tlv-tip { display: none; }
    }
    /* Day / record modal innards */
    .grm-entity-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--record-color-fff); margin-bottom: 10px; }
    .grm-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--att-text); }
    .grm-meta { font-size: 12px; color: var(--att-text-2); display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
    .grm-meta-row { display: flex; gap: 8px; }
    .grm-meta-key { font-weight: 600; min-width: 60px; color: var(--att-muted); }
    .btn-open-record { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; background: var(--att-accent); color: var(--record-color-fff); font-size: 13px; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: opacity .15s; }
    .btn-open-record:hover { opacity: .88; color: var(--record-color-fff); }
    /* Bootstrap modal surfaces themed for the attio shell */
    #ganttRecordModal .modal-content { background: var(--att-surface); color: var(--att-text); border: 1px solid var(--att-border); border-radius: 14px; }
    #ganttRecordModal .modal-header { border-bottom: 1px solid var(--att-border); padding: 14px 18px; }
    #ganttRecordModal .modal-footer { border-top: 1px solid var(--att-border); padding: 12px 18px; }
    #ganttRecordModal .modal-title { color: var(--att-text); }
    #ganttRecordModal .modal-body { padding: 16px 18px 18px; }
    .grm-note-body { font-size: 13.5px; line-height: 1.6; color: var(--att-text); margin-top: 12px; white-space: pre-wrap; word-break: break-word; }
    .grm-note-date { font-size: 11px; color: var(--att-muted); margin-top: 10px; }

    /* ── LinkedIn opportunities — review/sync modal (company Jobs tab) ── */
    .ljr-sub { font-size: 11px; color: var(--att-muted); }
    .ljr-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
    .ljr-pill.review { background: color-mix(in srgb, var(--notice-color) 15%, transparent); color: var(--notice-color); }
    .ljr-pill.added { background: color-mix(in srgb, var(--success-color, var(--record-color-16a34a)) 14%, transparent); color: var(--success-color, var(--record-color-16a34a)); }
    a.ljr-pill.added:hover { text-decoration: underline; }
    .ljr-pill.gone { background: color-mix(in srgb, var(--att-muted, var(--record-color-71717a)) 14%, transparent); color: var(--att-muted, var(--record-color-71717a)); }
    .ljr-pill.new { background: color-mix(in srgb, var(--ent-job) 14%, transparent); color: var(--ent-job); }
    .ljr-pill.updated { background: color-mix(in srgb, var(--info-color, var(--record-color-2563eb)) 13%, transparent); color: var(--info-color, var(--record-color-2563eb)); }
    .ljr-row.is-gone { filter: grayscale(1); opacity: .55; }
    .ljr-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .ljr-add { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
        border: 1px solid color-mix(in srgb, var(--ent-job) 40%, transparent);
        background: color-mix(in srgb, var(--ent-job) 12%, transparent);
        color: var(--ent-job); }
    .ljr-add:hover { background: color-mix(in srgb, var(--ent-job) 20%, transparent); }
    .ljr-add:disabled { opacity: .5; cursor: not-allowed; }
    .ljr-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--att-muted); border: 1px dashed var(--att-border); border-radius: 12px; }
    .ljr-srcgone { margin-left: 6px; }
    /* Jobs list is capped so the opportunities section below stays reachable
       without scrolling past every job. */
    .att-joblist { max-height: 46vh; overflow: auto; }
    /* ── Inline job-opportunities section (below the CRM jobs list; default collapsed).
       Sync confirm + progress + review all happen here — no modal. ── */
    .ljin { margin-top: 14px; border: 1px solid var(--att-border); border-radius: 14px; background: var(--att-surface); overflow: hidden; }
    .ljin-head-row > .lv-cmd-left { min-width: 0; flex: 1; }
    .ljin-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: transparent; border: none; cursor: pointer; color: var(--att-text); font-size: 12.5px; font-weight: 600; text-align: left; }
    .ljin-head:hover { background: var(--bg-tertiary); }
    .ljin-head .ljin-chev { transition: transform .18s ease; font-size: 18px; color: var(--att-muted); flex-shrink: 0; }
    .ljin-head i.bx-briefcase { color: var(--ent-job); font-size: 16px; flex-shrink: 0; }
    .ljin.open .ljin-head .ljin-chev { transform: rotate(90deg); }
    .ljin-count { font-weight: 700; color: var(--ent-job); }
    .ljin-meta { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--att-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 640px) { .ljin-meta { display: none; } }
    /* A word here is clipped to an ellipsis by the fixed column; an icon is not. */
    .ljr-needs { font-size: 14px; color: var(--notice-color); vertical-align: middle; cursor: help; }
    .ljin-capped { padding: 8px 12px; font-size: 11.5px; color: var(--att-muted); border-top: 1px solid var(--att-border); }
    .ljin-body { border-top: 1px solid var(--att-border); }
    /* No padding on top: the sticky header pins to the scrollport edge, and a
       10px gap there would let rows show above it on the way past. */
    .ljin-list { overflow: auto; padding: 0 10px 10px; }
    /* The list view styles its scrollbars on .lv-table-wrap, which is no longer
       the scroller here, so the bars are restyled on the element that is. A
       horizontal bar you cannot see is a table you cannot move sideways. */
    .ljin-list::-webkit-scrollbar { width: 10px; height: 10px; }
    .ljin-list::-webkit-scrollbar-track { background: var(--bg-secondary); }
    .ljin-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
    .ljin-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    .ljin-list { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--bg-secondary); }
    /* The list view's table wrapper is a scroll box of its own. Nested inside
       this panel's scroller it had no height cap, so it grew to the full two
       hundred rows and its horizontal bar sat at the bottom of all of them:
       moving the table sideways meant scrolling to the end of it first. One
       scroller here, the panel's, with both bars on the edges you can see. */
    .ljin-list .lv-table-wrap { overflow: visible; }
    /* `overflow: hidden` here is a rounded-corner clip elsewhere, but it makes
       this element the scrollport, so the sticky header stuck to it and scrolled
       away with the rows. */
    .ljin-list .lv-embed { overflow: visible; }
    /* Fixed layout, so a role with five delivery locations in one string cannot
       push the Add button off the side. Every column gets a share of the width
       it keeps whatever lands in it, and what does not fit is cut with an
       ellipsis and kept on the cell's tooltip. */
    .ljin-list .lv-table { table-layout: fixed; width: 100%; min-width: 0; }
    .ljin-list .lv-table th,
    .ljin-list .lv-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* The status cell holds pills, which must not be sliced in half. */
    .ljin-list .lv-table td .ljr-status { display: flex; gap: 4px; align-items: center; overflow: hidden; }
    .ljin-list .ljr-pill, .ljin-list .ljr-add { flex-shrink: 0; }
    /* The shipped `.lv-table thead` sticky rule keeps working: sticky resolves
       against the nearest scrolling ancestor, which is this panel now. Its own
       colours stay its own, so the header matches every other list. */
    /* Indeterminate progress bar — reused by the inline sync progress strip. */

    /* ── Responsive ── */
    @media (max-width: 600px) {
        .att-topbar { padding: 8px 10px; }
        .att-record-name { max-width: 160px; }
        .att-action span { display: none; }
        .att-action i { font-size: 16px; }
        .att-tabs { padding: 0 8px; }
        .att-tab { padding: 12px 10px 10px; }
        .att-panes { padding: 12px; }
    }

    /* ── Theme the shared change-history modal (history.css is hardcoded
          light). Scoped to the history modal via :has so other modals are
          untouched. ── */
    .modal-content:has(.crm-hist-header) { background: var(--att-surface); color: var(--att-text); }
    .crm-hist-body, .crm-hist-footer { background: var(--att-surface) !important; }
    .crm-hist-filters, .crm-hist-search-wrap, .crm-hist-header-row { background: var(--att-surface-2) !important; border-color: var(--att-border) !important; }
    .crm-hist-input, .crm-hist-select, input.crm-hist-date { background: var(--att-surface) !important; color: var(--att-text) !important; border-color: var(--att-border) !important; }
    /* Dark theme: render native date pickers / select dropdowns dark so they
       stop showing up white. color-scheme flips the browser's built-in UI. */
    [data-theme="carbon"] input, [data-theme="carbon"] select, [data-theme="carbon"] textarea { color-scheme: dark; }
    .crm-hist-row, .crm-hist-entry-compact, .crm-hist-entry-detailed, .crm-hist-table td, .crm-hist-table th { border-color: var(--att-border) !important; }
    .crm-hist-row:hover { background: var(--att-surface-2) !important; }
    .crm-hist-user, .crm-hist-field, .crm-hist-action-label, .crm-hist-new, .crm-hist-content, .crm-hist-pill-field { color: var(--att-text) !important; }
    .crm-hist-date, .crm-hist-meta, .crm-hist-count, .crm-hist-subtitle, .crm-hist-empty, .crm-hist-loading { color: var(--att-muted) !important; }
    .crm-hist-old, .crm-hist-pill-old { color: var(--att-text-2) !important; }
    .crm-hist-clear-btn, .crm-hist-load-more-btn, .crm-hist-more-btn, .crm-hist-pill { background: var(--att-surface-2) !important; color: var(--att-text) !important; border-color: var(--att-border) !important; }
    /* The detailed change box ships white (.crm-hist-table/.crm-hist-field) —
       theme it so the action label's light text is readable on dark. */
    .crm-hist-table { background: var(--att-surface) !important; }
    .crm-hist-field { background: var(--att-surface-2) !important; color: var(--att-text-2) !important; }
    .crm-hist-vals { background: var(--att-surface) !important; }
    /* The two specifically-reported elements: give them readable text + their
       own themed background so they never end up light-on-light. */
    .crm-hist-action-label { color: var(--att-text) !important; background: transparent !important; }
    .crm-hist-action-label.created { color: var(--success-color, var(--record-color-16a34a)) !important; }
    .crm-hist-action-label.deleted { color: var(--danger-color, var(--record-color-ef4444)) !important; }
    .crm-hist-meta .crm-hist-date, .crm-hist-header-row .crm-hist-date {
        background: var(--att-surface-2) !important;
        color: var(--att-text) !important;
        border: 1px solid var(--att-border) !important;
        border-radius: 7px !important;
        padding: 3px 9px !important;
    }

    /* ── Theme the assign-lead-stage modal (its own CSS is hardcoded light) ── */
    #assignLeadStageModal .modal-content { background: var(--att-surface); color: var(--att-text); border: 1px solid var(--att-border); }
    #assignLeadStageModal .modal-header, #assignLeadStageModal .modal-footer { border-color: var(--att-border) !important; }
    #assignLeadStageModal .lead-stage-option { background: var(--att-surface); border-color: var(--att-border) !important; color: var(--att-text); }
    #assignLeadStageModal .lead-stage-option:hover { background: var(--att-surface-2); }
    #assignLeadStageModal .lead-stage-option.selected { background: color-mix(in srgb, var(--att-accent) 14%, transparent); border-color: var(--att-accent) !important; }
    #assignLeadStageModal h6 { color: var(--att-text); }
    #assignLeadStageModal .text-muted, #assignLeadStageModal .stage-number, #assignLeadStageModal small { color: var(--att-muted) !important; }
    #assignLeadStageModal .alert-info { background: color-mix(in srgb, var(--att-accent) 10%, transparent); color: var(--att-text); border-color: color-mix(in srgb, var(--att-accent) 30%, transparent); }
    #assignLeadStageModal .alert-secondary { background: var(--att-surface-2); color: var(--att-text-2); border-color: var(--att-border); }
    /* modernize a touch */
    #assignLeadStageModal .modal-content { border-radius: 16px; }
    #assignLeadStageModal .lead-stage-option { border-radius: 12px !important; transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; }
    #assignLeadStageModal .lead-stage-option:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--record-color-a70919ec); }
    #assignLeadStageModal .btn-primary { background: var(--att-accent); border-color: var(--att-accent); }
    #assignLeadStageModal .btn-success { background: var(--success-color, var(--record-color-16a34a)); border-color: var(--success-color, var(--record-color-16a34a)); }
    /* Carbon: the global tinted state button (base.css), not a solid fill. */
    [data-theme="carbon"] #assignLeadStageModal .btn-success { background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
    #assignLeadStageModal .badge.bg-primary { background: var(--att-accent) !important; }

    /* Add-new-lead-stage modal (stacks on top) */
    #add_new_lead_stage .modal-content { background: var(--att-surface); color: var(--att-text); border: 1px solid var(--att-border); border-radius: 16px; }
    #add_new_lead_stage .modal-header, #add_new_lead_stage .modal-footer { border-color: var(--att-border) !important; }
    #add_new_lead_stage .modal-title, #add_new_lead_stage .form-label { color: var(--att-text); }
    #add_new_lead_stage .form-control, #add_new_lead_stage .input-group-text { background: var(--att-surface); color: var(--att-text); border-color: var(--att-border); }
    #add_new_lead_stage .form-control:focus { border-color: var(--att-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--att-accent) 14%, transparent); }
    #add_new_lead_stage .text-muted { color: var(--att-muted) !important; }
    #add_new_lead_stage .btn-primary { background: var(--att-accent); border-color: var(--att-accent); }

    /* Smart-search modal — its own CSS ships hardcoded light; remap to theme. */
    .ss-modal .modal-content { background: var(--att-surface) !important; color: var(--att-text) !important; border: 1px solid var(--att-border) !important; }
    .ss-modal .modal-header, .ss-modal .modal-footer { border-color: var(--att-border) !important; }
    .ss-modal .modal-title, .ss-modal .modal-body { color: var(--att-text) !important; }
    .ss-modal .modal-body { background: var(--att-surface) !important; }
    .ss-prompt, .ss-status-select, .ss-modal input, .ss-modal textarea, .ss-modal select { background: var(--att-surface) !important; color: var(--att-text) !important; border-color: var(--att-border) !important; }
    .ss-pick-card, .ss-run-row, .ss-cv-frame, .ss-cv-frame-inner, .ss-runs-list, .ss-pick-body { background: var(--att-surface-2) !important; border-color: var(--att-border) !important; color: var(--att-text) !important; }
    .ss-pick-card:hover { border-color: color-mix(in srgb, var(--att-accent) 40%, var(--att-border)) !important; }
    .ss-section-label, .ss-selected-label, .ss-run-meta-left, .ss-run-meta-right, .ss-run-when, .ss-run-count, .ss-pick-reason, .ss-working-sub, .ss-empty, .ss-working-text { color: var(--att-muted) !important; }
    .ss-pick-link, .ss-link-btn, .ss-cv-btn { color: var(--att-accent) !important; }
    .ss-chip, .ss-pick-chips > * { background: color-mix(in srgb, var(--att-accent) 14%, transparent) !important; color: var(--att-accent) !important; border-color: color-mix(in srgb, var(--att-accent) 30%, transparent) !important; }
    .ss-tab.active, .ss-run-btn, .ss-assign-btn { background: var(--att-accent) !important; color: var(--record-color-fff) !important; border-color: transparent !important; }
    .ss-tab { color: var(--att-muted) !important; }
    .ss-close-btn { color: var(--att-muted) !important; }
    .ss-cv-frame-head { background: var(--att-surface) !important; color: var(--att-text) !important; border-color: var(--att-border) !important; }
    [data-theme="carbon"] .ss-modal input, [data-theme="carbon"] .ss-modal textarea, [data-theme="carbon"] .ss-modal select { color-scheme: dark; }

    /* ── RSR sidebar pane ── */
    /* RSR sits inside the Details tab, which is as wide as the page: its
       sections flow into as many columns as the width allows instead of
       stacking down one. */
    .rsr-side-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 16px;
        align-items: start;
        padding: 4px 0 0;
    }
    .rsr-side-body > .rsr-stop-band { grid-column: 1 / -1; }
    .rsr-side-loading { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--att-muted); font-size: 13px; }
    /* Each section is a card, the one Details sits on (.att-formcard); its
       rows are a shade off the card so they still read as rows. */
    .rsr-side-section {
        margin-bottom: 0; min-width: 0;
        padding: 12px 14px 8px;
        background: var(--att-surface);
        border: 1px solid var(--att-border);
        border-radius: 12px;
    }
    .rsr-side-section .rsr-item { background: color-mix(in srgb, var(--att-text) 3%, var(--att-surface)); }
    .rsr-side-section .rsr-side-empty { margin: 0 0 6px; }
    /* Each section has to announce itself: these columns wrap, so a heading in
       the second row is the only thing saying a new subject has started. */
    .rsr-side-head {
        display: flex; align-items: center; gap: 7px;
        font-size: 11.5px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--att-text);
        margin-bottom: 9px; padding-bottom: 7px;
        border-bottom: 1px solid var(--att-border);
    }
    .rsr-side-head > i:first-child { font-size: 14px; color: var(--ent-rsr, var(--record-color-5b21b6)); }
    .rsr-side-head a { color: var(--ent-rsr,var(--record-color-5b21b6)); text-decoration: none; font-size: 10px; font-weight: 700; margin-left: auto; letter-spacing: .04em; }
    .rsr-side-head a:hover { text-decoration: underline; }
    .rsr-kv { display: grid; grid-template-columns: 100px 1fr; gap: 2px 8px; font-size: 12px; }
    .rsr-kv-label { color: var(--att-muted); padding: 3px 0; align-self: start; }
    .rsr-kv-val { color: var(--att-text); padding: 3px 0; word-break: break-word; }
    .rsr-score-badge { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .rsr-score-badge.hi  { background: color-mix(in srgb, var(--success-color,var(--record-color-10b981)) 15%, transparent); color: var(--success-color,var(--record-color-10b981)); }
    .rsr-score-badge.mid { background: color-mix(in srgb, var(--notice-color) 15%, transparent); color: var(--notice-color); }
    .rsr-score-badge.lo  { background: color-mix(in srgb, var(--att-muted,var(--record-color-71717a)) 15%, transparent); color: var(--att-muted,var(--record-color-71717a)); }
    .rsr-signal-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--att-border-2,var(--record-color-f67f65c0)); font-size: 12px; }
    .rsr-signal-row:last-child { border-bottom: none; }
    .rsr-signal-type { flex: 1; color: var(--att-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rsr-signal-meta { color: var(--att-muted); font-size: 11px; white-space: nowrap; }
    .rsr-pos-row { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--att-border-2,var(--record-color-f67f65c0)); cursor: pointer; }
    .rsr-pos-row:last-child { border-bottom: none; }
    .rsr-pos-row:hover .rsr-pos-title { text-decoration: underline; }
    .rsr-pos-title { color: var(--att-text); font-weight: 600; }
    .rsr-pos-meta { color: var(--att-muted); font-size: 11px; }
    .rsr-dnc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid var(--att-border); background: var(--att-surface); color: var(--att-text-2); cursor: pointer; }
    .rsr-dnc-btn.is-dnc { background: color-mix(in srgb, var(--danger-color,var(--record-color-ef4444)) 12%, transparent); color: var(--danger-color,var(--record-color-ef4444)); border-color: color-mix(in srgb, var(--danger-color,var(--record-color-ef4444)) 30%, transparent); }
    .rsr-side-empty { color: var(--att-muted); font-size: 12px; font-style: italic; }
    .rsr-dossier-preview { font-size: 12px; color: var(--att-text-2); line-height: 1.5; padding: 8px; background: var(--att-surface-2); border-radius: 6px; white-space: pre-wrap; }
    .rsr-exp-list { position: relative; padding-left: 14px; }
    .rsr-exp-list::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--att-border); }
    .rsr-exp-row { display: flex; gap: 10px; padding: 5px 0; position: relative; }
    .rsr-exp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--att-border); border: 2px solid var(--att-surface,var(--record-color-fff)); margin-top: 4px; flex-shrink: 0; position: absolute; left: -14px; }
    .rsr-exp-row.is-current .rsr-exp-dot { background: var(--ent-rsr,var(--record-color-5b21b6)); }
    .rsr-exp-body { flex: 1; min-width: 0; }
    .rsr-exp-title { font-size: 12px; font-weight: 600; color: var(--att-text); }
    .rsr-exp-row.is-current .rsr-exp-title { color: var(--ent-rsr,var(--record-color-5b21b6)); }
    .rsr-exp-co { font-size: 12px; color: var(--att-text-2); }
    .rsr-exp-dates { font-size: 11px; color: var(--att-muted); }

    /* ── RSR pane — sales-at-a-glance ── */
    .rsr-stop-band { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; margin-bottom: 12px;
        font-size: 12px; font-weight: 700;
        background: color-mix(in srgb, var(--danger-color,var(--record-color-ef4444)) 12%, transparent);
        color: var(--danger-color,var(--record-color-ef4444));
        border: 1px solid color-mix(in srgb, var(--danger-color,var(--record-color-ef4444)) 30%, transparent); }
    .rsr-stop-band i { font-size: 15px; }

    .rsr-count { margin-left: 2px; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 800;
        background: color-mix(in srgb, var(--ent-rsr,var(--record-color-5b21b6)) 16%, transparent); color: var(--ent-rsr,var(--record-color-5b21b6)); }

    .rsr-sig-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--ent-rsr,var(--record-color-5b21b6)); margin: 10px 0 5px; }
    .rsr-sig-type:first-child { margin-top: 0; }
    .rsr-item-num { font-size: 10px; font-weight: 700; color: var(--att-muted); min-width: 13px;
        text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

    .rsr-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
        text-decoration: none; color: inherit; margin-bottom: 6px; background: var(--att-surface,var(--record-color-fff));
        border: 1px solid var(--att-border-2,var(--record-color-556c31e7)); transition: border-color .12s, background .12s; }
    .rsr-item:last-child { margin-bottom: 0; }
    .rsr-item:hover { border-color: color-mix(in srgb, var(--ent-rsr,var(--record-color-5b21b6)) 40%, transparent);
        background: color-mix(in srgb, var(--ent-rsr,var(--record-color-5b21b6)) 5%, var(--att-surface,var(--record-color-fff))); }
    .rsr-item-main { flex: 1; min-width: 0; }
    .rsr-item-title { font-size: 12.5px; font-weight: 600; color: var(--att-text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rsr-item-sub { font-size: 11px; color: var(--att-muted); margin-top: 1px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rsr-item-go { color: var(--att-muted); font-size: 18px; flex-shrink: 0; }
    .rsr-item:hover .rsr-item-go { color: var(--ent-rsr,var(--record-color-5b21b6)); }

    .rsr-pill { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700;
        white-space: nowrap; text-transform: capitalize; }
    .rsr-pill--ok   { background: color-mix(in srgb, var(--success-color,var(--record-color-10b981)) 16%, transparent); color: var(--success-color,var(--record-color-10b981)); }
    .rsr-pill--wait { background: color-mix(in srgb, var(--notice-color) 16%, transparent); color: var(--notice-color); }
    .rsr-pill--mut  { background: color-mix(in srgb, var(--att-muted,var(--record-color-71717a)) 16%, transparent); color: var(--att-text-2); }

    /* ══ The Details tab ════════════════════════════════════════════
       The record's own fields as a wide multi-column form. It is a pane
       like any other, so the shell keeps its fixed viewport and .att-panes
       does the scrolling. */
    .att-formcard {
        background: var(--att-surface);
        border: 1px solid var(--att-border);
        border-radius: 12px;
        margin: 0;
        padding: 14px 18px 18px;
    }
    .att-formcard-head {
        display: flex; align-items: center; gap: 12px;
        flex-wrap: wrap; margin-bottom: 10px;
    }
    .att-formcard-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
    /* Titled section inside the form card — an accent bar + stronger type +
       generous top margin make each sub-section clearly identifiable & split. */
    .att-formcard .att-section-head {
        display: flex; align-items: center; gap: 8px;
        font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
        color: var(--att-text-2); font-weight: 800;
        padding: 0 0 7px; margin: 22px 0 8px;
        border-bottom: 1px solid var(--att-border);
    }
    .att-formcard .att-section-head::before {
        content: ""; width: 3px; height: 13px; border-radius: 2px;
        background: var(--rec-color); flex-shrink: 0;
    }
    .att-formcard .att-section-head:first-child { margin-top: 2px; }
    /* Old-details layout: two columns of horizontal "LABEL | value" rows with a
       light separator — the classic scannable form — kept inside the cool card. */
    .att-formcard-desc-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
    .att-formgrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 36px;
        padding: 2px 0 0;
    }
    .att-formcard .att-field {
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 12px;
        align-items: baseline;
        padding: 7px 26px 7px 4px;
        border-bottom: 1px solid var(--att-border-2);
        border-radius: 0;
        min-height: 0;
    }
    .att-formcard .att-field:hover { background: var(--att-surface-2); border-radius: 6px; }
    .att-formcard .att-field-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
        align-items: flex-start; padding-top: 1px;
    }
    /* Never clip a label — let it wrap to a second line instead. */
    .att-formcard .att-field-label span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
    .att-formcard .att-field-value { font-size: 13.5px; line-height: 1.4; }
    .att-formcard .att-field.is-editable .aef-edit { right: 6px; }
    /* Long free-text fields (skills, languages, descriptions) span both columns,
       keeping the label on the left. */
    .att-formgrid .att-field.is-wide { grid-column: 1 / -1; }
    /* Contacts under Client: rows flow into as many columns as the width allows,
       with the add control as the last cell so it follows the final contact. */
    .att-rel-cols {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 6px 14px;
        align-items: stretch;
    }
    .att-rel-addrow {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        padding: 7px 9px; border: 1px dashed var(--att-border); border-radius: 8px;
        background: transparent; color: var(--att-muted);
        cursor: pointer; font-size: 12.5px; font-weight: 600;
    }
    .att-rel-addrow:hover {
        color: var(--att-accent);
        border-color: var(--att-accent);
        background: color-mix(in srgb, var(--att-accent) 8%, transparent);
    }
    .att-rel-addrow i { font-size: 15px; }
    .att-formcard-desc { margin-top: 12px; }
    /* The one field on a record that holds paragraphs: it sizes to what is in
       it, and opens to the height of the screen when that is not enough. */
    /* padding-bottom leaves room under the last line, so the end of the text
       is never pinned to the bottom edge. The height eases only on the expand
       button (.is-animating): a standing transition makes corner drags lag. */
    .att-formcard-desc textarea.att-manage-textarea {
        width: 100%; margin-top: 6px; overflow-y: auto;
        padding-bottom: 56px;
    }
    .att-formcard-desc.is-animating textarea.att-manage-textarea {
        transition: height .22s cubic-bezier(.4, 0, .2, 1);
    }
    .att-formcard-desc.is-expanded textarea.att-manage-textarea { resize: none; }
    .att-desc-expand {
        margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 10px; flex-shrink: 0;
        font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
        border: 1px solid color-mix(in srgb, var(--att-accent) 40%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--att-accent) 10%, transparent);
        color: var(--att-accent);
        cursor: pointer;
        transition: color .12s, border-color .12s, background .12s;
    }
    .att-desc-expand i { font-size: 14px; }
    .att-desc-state { margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--att-muted); }
    .att-desc-state.is-ok { color: var(--success-color, var(--record-color-16a34a)); }
    .att-desc-state.is-bad { color: var(--danger-color, var(--record-color-ef4444)); }
    .att-desc-state:not(:empty) + .att-desc-expand { margin-left: 10px; }
    .att-desc-expand:hover {
        border-color: var(--att-accent);
        background: color-mix(in srgb, var(--att-accent) 18%, transparent);
    }
    @media (prefers-reduced-motion: reduce) {
        .att-formcard-desc.is-animating textarea.att-manage-textarea { transition: none; }
    }
    .att-formcard-rel { margin-top: 6px; }
    .att-formcard-rel .att-rel-head {
        display: flex; align-items: center; gap: 8px;
        font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
        color: var(--att-muted); font-weight: 700; margin-bottom: 6px;
    }
    .att-formcard-rel .att-rel-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .emb-wrap { display: grid; gap: 12px; }
    .emb-toolbar { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .emb-summary { display: flex; gap: 8px; flex-wrap: wrap; }
    .emb-unit-list {
        border: 1px solid var(--att-border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--att-surface);
    }
    .emb-unit {
        display: grid;
        grid-template-columns: 28px 120px minmax(180px, 1fr) 110px 150px;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--att-border-2);
        font-size: 12.5px;
    }
    .emb-unit:last-child { border-bottom: 0; }
    .emb-unit-type, .emb-unit-meta { color: var(--att-muted); }
    .emb-unit-value { color: var(--att-text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
    .emb-status {
        display: inline-flex;
        width: fit-content;
        padding: 3px 7px;
        border-radius: 999px;
        background: var(--att-surface-2);
        color: var(--att-text-2);
        font-size: 11px;
        font-weight: 700;
    }
    .emb-status--current { color: var(--success-color); background: color-mix(in srgb, var(--success-color) 12%, transparent); }
    .emb-status--missing, .emb-status--stale { color: var(--notice-color); background: color-mix(in srgb, var(--notice-color) 12%, transparent); }
    .emb-status--failed { color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 12%, transparent); }
    .emb-status--queued, .emb-status--processing { color: var(--info-color); background: color-mix(in srgb, var(--info-color) 12%, transparent); }
    .emb-history { grid-column: 2 / -1; color: var(--att-muted); font-size: 11.5px; }
    .emb-history summary { cursor: pointer; width: fit-content; }
    .emb-history-row { padding-top: 5px; }
    .emb-error { color: var(--danger-color); }
    @media (max-width: 820px) {
        .emb-unit { grid-template-columns: 28px 1fr auto; }
        .emb-unit-type, .emb-unit-meta { grid-column: 2 / -1; }
        .emb-history { grid-column: 2 / -1; }
    }
    @media (max-width: 720px) {
        .att-formcard { padding: 12px 12px 14px; }
        .att-formgrid { grid-template-columns: 1fr; }
    }

    /* ===============================================================
       THE RECORD AS A PANEL ON THE GROUND (UI overhaul, board 3a)
       The shell stops being a slab welded to
       the window and becomes a panel with the field showing around it,
       which is the move the list views already made. Sizes are the
       =============================================================== */
    /* The gutter is padding on the ground, never margin on the shell: a
       margin here collapses out through .container-fluid and .main-content,
       moving the whole page down by its own height instead of insetting the
       panel. main-content is already 100vh tall, so that margin was the
       scrollbar. Flush right, like the list panel: the record wants the
       width more than the page wants a symmetrical frame. */
    .att-ground {
        --att-gutter: 20px;
        /* What the app already put above the page before the ground starts.
           Mirrors static/css/base.css under the same 768px breakpoint:
           .main-content padding-top 56px plus .container-fluid margin-top 8px.
           Nothing in CSS can read that offset, so it is named here; if the
           mobile header changes size, this follows it. */
        --att-chrome: 0px;
        padding: var(--att-gutter) 0 var(--att-gutter) var(--att-gutter);
    }

    .att-shell {
        margin: 0;
        /* The ground's own padding is the only thing above and below, so the
           panel is the viewport less both gutters, and the page never scrolls. */
        height: calc(100vh - var(--att-chrome) - (var(--att-gutter) * 2));
        height: calc(100dvh - var(--att-chrome) - (var(--att-gutter) * 2));
        border: 1px solid var(--att-border);
        border-right: 0;
        border-radius: 14px 0 0 14px;
        box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, var(--record-color-0f172a)) 5%, transparent),
                    0 12px 32px -24px color-mix(in srgb, var(--text-primary, var(--record-color-0f172a)) 32%, transparent);
    }

    /* The shell clips its own corners. */
    .att-topbar {
        min-height: 62px;
        padding: 12px 24px;
        border-radius: 13px 0 0 0;
    }

    .att-back { width: 32px; height: 32px; border-radius: 9px; }

    .att-avatar {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: color-mix(in srgb, var(--rec-color) 20%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rec-color) 45%, transparent);
        /* A tint under an ink of the same hue, pulled toward the theme's text
           colour: deeper on Light, lighter on Dark. Mixing toward black made
           the letter dark on dark in the Dark theme. */
        color: color-mix(in srgb, var(--rec-color) 70%, var(--att-text, var(--record-color-0f172a)));
    }

    /* A candidate's avatar is a button: the picture when there is one, else
       the initial, with a camera on hover and a small menu to change it. */
    .att-photo { position: relative; flex-shrink: 0; }
    .att-photo > .att-avatar { position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
    .att-photo > .att-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .att-photo-cam {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--shadow-ink, var(--record-color-0f172a)) 55%, transparent);
        color: var(--avatar-ink, var(--record-color-ffffff)); font-size: 18px; opacity: 0; transition: opacity .15s;
    }
    .att-photo > .att-avatar:hover .att-photo-cam,
    .att-photo > .att-avatar:focus-visible .att-photo-cam,
    .att-photo.is-busy .att-photo-cam { opacity: 1; }
    .att-photo .att-cv-menu { left: 0; right: auto; min-width: 180px; }
    .att-photo .att-cv-item.is-danger > i { color: var(--danger-color, var(--record-color-dc2626)); }
    .att-photo .att-cv-item[hidden] { display: none; }

    .att-record-name {
        font-size: 20px;
        font-weight: 750;
        letter-spacing: -0.018em;
    }

    /* A 42px row, and the active tab marked by a bar inset from its own
       edges rather than a rule running the width of the strip: the mark
       belongs to the tab, not to the row it sits in. */
    /* 6px + the tab's own 12px puts the first label on the left edge of the
       panel below it. */
    .att-tabs { padding: 0 6px; }

    .att-tab {
        position: relative;
        height: 42px;
        padding: 0 12px;
        gap: 7px;
        border-bottom: 0;
    }

    .att-tab.active { font-weight: 700; }

    .att-tab.active::after {
        content: '';
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--tab-c, var(--rec-color));
    }

    @media (max-width: 1100px) {
        /* Edge to edge: on a small screen the frame costs more than it gives.
           The gutter lives on the ground, so the height calc follows it. */
        .att-ground { --att-gutter: 0px; }
        .att-shell { border: 0; border-radius: 0; box-shadow: none; }
        .att-topbar { border-radius: 0; }
    }
    @media (max-width: 768px) {
        .att-ground { --att-chrome: 64px; }
    }
.ps-application { border-bottom: 1px solid var(--att-border); padding: 16px 0; overflow-wrap: anywhere; }
.ps-application-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ps-application-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ps-application details { margin-top: 10px; }

/* Static styles extracted from the existing record markup. */
.rd-ba9958a2 { --chip-c: var(--ent-contact); }
.rd-f506ec1a { opacity:.7; }
.rd-1186920e { --rec-color: var(--ent-mailbox); }
.rd-d71661e8 { height: 28px; padding: 0 9px; font-size: 12px; }
.rd-7a56919b { width: 190px; }
.rd-481971ef { width: 170px; }
.rd-5d121e7b { width: auto; }
.rd-d76d1bd5 { width: 110px; }
.rd-07bbbb60 { width: 44px; }
.rd-2612b357 { width: 90px; }
.rd-4fa00029 { position: relative; }
.rd-10de5208 { --rec-color: var(--ent-deal); }
.rd-ff28faaa { --rec-color: var(--ent-job); }
.rd-aea00207 { --rec-color: var(--ent-contact); }
.rd-c63bd6eb {  align-items:center; gap:6px; color:inherit; text-decoration:none; }
.rd-b28d6cf3 { --rec-color: var(--ent-racunoid); }
.rd-22ad5459 { --rec-color: var(--ent-company); }
.rd-9b75d388 { text-align:right; }
.rd-7b2b27f9 { --gfb-color:var(--ent-company, var(--record-color-e11d48)) }
.rd-492f724a { --gfb-color:var(--ent-contact, var(--record-color-059669)) }
.rd-f823032a { --gfb-color:var(--ent-job) }
.rd-e902f613 { --gfb-color:var(--ent-candidate, var(--record-color-0284c7)) }
.rd-f6231a7c { --gfb-color:var(--ent-deal, var(--record-color-4f46e5)) }
.rd-b4b81c93 { --gfb-color:var(--ent-note, var(--record-color-84cc16)) }
.rd-8c81219b { --gfb-color:var(--ent-racunoid) }
.rd-863cd65f { --gfb-color:var(--ent-costcenters) }
.rd-d60b29a3 { --gfb-color:var(--ent-mailbox, var(--record-color-2563eb)) }
.rd-6b9ff36c { --gfb-color:var(--ent-supplier, var(--record-color-7c3aed)) }
.rd-4a70b878 { max-width:400px; }
.rd-6b2a94ea { font-weight:600; }
.rd-02f30eb4 { --rec-color: var(--ent-candidate); }
.rd-97cb0aae { --pj-color: var(--att-accent); }
.rd-50b0fa12 { min-width:0; flex:1; }
.rd-7079f6d8 { --rec-color: var(--ent-supplier); }
.rd-c81cd82b { width: min(480px, 100%); height: auto; }
.rd-a205451f { padding: 16px 18px; }
.rd-26ce280e {  gap:4px; margin-bottom:14px; }
.rd-8a3f5a7a { flex:1; justify-content:center; }
.rd-0bf9ba87 { max-width:none; margin-bottom:8px; }
.rd-b1168e31 { max-height:260px; overflow:auto; border:1px solid var(--att-border); border-radius:8px; }
.rd-d2a2a650 { opacity:.6; }
.rd-62173f97 { padding:8px 0 0; text-align:left; color:var(--danger-color, var(--record-color-ef4444)); }
.rd-f9b14bfd { max-height:280px; overflow:auto; border:1px solid var(--att-border); border-radius:8px; }
.rd-a4b1fe64 { font-size:11px; color:var(--att-muted); margin-top:6px; }
.rd-94e8046e { width: min(460px, 100%); height: auto; }
.rd-e734d40c { width: min(520px, 100%); height: auto; }
.rd-ed4dbf0e {  gap:10px; }
.rd-6253876a { flex:1; }
.rd-675c0479 { height:auto; min-height:58px; resize:vertical; padding:8px 10px; }
.rd-fcc9ee53 {  color:var(--danger-color,var(--record-color-ef4444)); font-size:12px; margin-top:6px; }
.rd-49286c8c { width: min(560px, 100%); height: auto; }
.rd-9ca0ce8f { padding: 16px 18px; max-height: 70vh; overflow: auto; }
.rd-42d1a658 { color: var(--danger-color, var(--record-color-ef4444)); }
.rd-013e3b30 { color:var(--att-muted); }

/* Entity tabs use the same palette as their related records. */
.att-tab[data-tint="mailbox"] { --tab-c: var(--ent-mailbox); }
.att-tab[data-tint="deal"] { --tab-c: var(--ent-deal); }
.att-tab[data-tint="job"] { --tab-c: var(--ent-job); }
.att-tab[data-tint="contact"] { --tab-c: var(--ent-contact); }
.att-tab[data-tint="project"] { --tab-c: var(--ent-project); }
.att-tab[data-tint="racunoid"] { --tab-c: var(--ent-racunoid); }
.att-tab[data-tint="company"] { --tab-c: var(--ent-company); }
.att-tab[data-tint="candidate"] { --tab-c: var(--ent-candidate); }
.att-tab[data-tint="rsr"] { --tab-c: var(--ent-rsr); }