/* ==========================================
   KFM CEP — Corporate Theme
   ========================================== */

:root {
    --navy: #283a49;
    --navy-light: #2f4456;
    --navy-hover: #374f63;
    --gold: #f13c6c;
    --gold-light: #f4567f;
    --gold-dim: rgba(241,60,108,0.12);
    --white: #ffffff;
    --gray-50: #f8f9fb;
    --gray-100: #f1f3f7;
    --gray-200: #e2e6ee;
    --gray-300: #cdd3df;
    --gray-400: #9ca3b4;
    --gray-500: #6b7489;
    --gray-600: #4a5268;
    --gray-700: #343b4f;
    --green: #16a34a;
    --green-bg: #dcfce7;
    --red: #dc2626;
    --red-bg: #fef2f2;
    --blue: #2563eb;
    --radius: 10px;
    --shadow-sm: 0 1px 3px rgba(12,27,51,0.06);
    --shadow: 0 2px 8px rgba(12,27,51,0.08), 0 4px 16px rgba(12,27,51,0.04);
    --shadow-lg: 0 8px 32px rgba(12,27,51,0.12), 0 2px 8px rgba(12,27,51,0.06);
    --transition: 0.2s ease;

    /* ----------------------------------------------------
       Pulse corporate baseline tokens (promoted 2026-05-17
       from body.login-page to :root so the hub and every
       subsequent page can read the same palette).
       NOTE: --gold above (#f13c6c) is RESERVED for the
       Pulse wordmark dot only. Use --kf-accent for any
       page-level accent (hairline rule, tick, secondary CTA).
       ---------------------------------------------------- */
    --kf-navy:        #0b1f3a;
    --kf-navy-deep:   #061427;
    --kf-ink:         #1a2230;
    --kf-paper:       #f6f3ec;
    --kf-paper-deep:  #efeae0;
    --kf-rule:        #d9d2c2;
    --kf-rule-soft:   #e7e1d3;
    --kf-muted:       #6e6a5f;
    --kf-accent:      #9a7b3f;

    /* ----------------------------------------------------
       Pulse signal palette (promoted to :root 2026-05-17,
       fin3). Calibrated, muted semantic colors for status,
       deltas, freshness, direction. Spec lives in
       kfm-cep/CLAUDE.md → "Signals & status (the calibrated
       life)". Do NOT swap these for Bootstrap-bright reds /
       greens — if it looks like a marker, it is wrong.
       ---------------------------------------------------- */
    --kf-signal-positive:    #3f6b46;
    --kf-signal-positive-bg: #e8efe9;
    --kf-signal-warning:     #b58a3f;
    --kf-signal-warning-bg:  #f4ecdc;
    --kf-signal-negative:    #8d3e3e;
    --kf-signal-negative-bg: #f1e0e0;
    --kf-signal-info:        #486b8a;
    --kf-signal-info-bg:     #e3e8ee;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--gray-50);
    color: var(--navy);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
input, select, textarea, button { font-size: 16px; } /* prevents iOS zoom on focus */

svg { flex-shrink: 0; }

/* ==========================================
   Buttons
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    font-family: inherit;
}

.btn:hover { background: var(--gray-50); border-color: var(--gray-300); }

.btn-primary {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}
.btn-primary:hover { background: #d9325f; border-color: #d9325f; }

.btn-outline { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-600); }
.btn-outline:hover { background: var(--gray-50); }

.btn-danger { color: var(--red); border-color: #fecaca; background: var(--white); }
.btn-danger:hover { background: var(--red-bg); }

.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-full { width: 100%; justify-content: center; }

/* ==========================================
   Forms
   ========================================== */

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--gray-700);
}

.form-group textarea,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--navy);
    transition: all var(--transition);
    background: var(--white);
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* Toggle switch (pill style) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-300, #cbd5e1);
    border-radius: 24px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: #7c3aed; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Pill bar holding a label/description on the left and a toggle on the right */
.salary-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 20px;
    gap: 16px;
}
.salary-toggle-bar > div:first-child { min-width: 0; }
.salary-toggle-bar strong { display: block; font-size: 14px; color: var(--navy, #0f172a); margin-bottom: 2px; }

/* Billing-type selector cards */
.billing-card { cursor: pointer; }
.billing-card-inner {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.15s;
    min-width: 180px;
    background: #fff;
}
.billing-card input:checked + .billing-card-inner {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.billing-card-inner strong { font-size: 14px; color: var(--navy, #0f172a); margin-bottom: 2px; }

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    cursor: pointer;
}

.form-group select:hover {
    border-color: var(--gray-300, #cbd5e1);
}

.form-group select option {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--navy);
    background: var(--white);
}

.form-group textarea:focus,
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.form-group input::placeholder { color: var(--gray-400); }

.input-wrapper { position: relative; }
.input-wrapper input { padding-left: 42px; }

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

/* ==========================================
   Login Page
   ========================================== */

.login-wrapper { display: flex; min-height: 100vh; }

.login-left {
    flex: 1;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    top: -50%; right: -30%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(241,60,108,0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.login-left::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(241,60,108,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.login-left-content {
    position: relative; z-index: 1;
    max-width: 440px; color: var(--white);
}

.login-brand-mark {
    font-size: 40px; font-weight: 700;
    color: var(--gold); letter-spacing: -1px;
    margin-bottom: 16px;
}

.login-left-content h2 {
    font-size: 28px; font-weight: 600;
    line-height: 1.3; margin-bottom: 16px;
}

.login-brand-title {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1;
    margin: 0 0 16px;
}

.login-pulse-dot {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 18px rgba(241,60,108,0.65);
    flex-shrink: 0;
}

.login-pulse-dot::before,
.login-pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.55;
    animation: login-pulse-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.login-pulse-dot::after {
    animation-delay: 1.2s;
}

@keyframes login-pulse-ring {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-pulse-dot::before,
    .login-pulse-dot::after { animation: none; }
}

.login-left-content > p {
    color: var(--gray-400); font-size: 15px;
    line-height: 1.6; margin-bottom: 32px;
}

.login-features { display: flex; flex-direction: column; gap: 14px; }

.login-feature {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: rgba(255,255,255,0.8);
}

.login-feature svg { color: var(--gold); stroke: var(--gold); flex-shrink: 0; }

.login-right {
    width: 480px; max-width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 60px; background: var(--white);
}

.login-card { width: 100%; max-width: 360px; }

.login-card-header { margin-bottom: 32px; }

.login-card-header h1 {
    font-size: 26px; font-weight: 700;
    color: var(--navy); margin-bottom: 6px;
}

.login-card-header p { color: var(--gray-500); font-size: 14px; }

.login-card .btn-primary {
    padding: 12px; font-size: 15px;
    font-weight: 600; margin-top: 4px;
}

.login-footer {
    text-align: center; margin-top: 32px;
    padding-top: 24px; border-top: 1px solid var(--gray-200);
}

.login-footer span { font-size: 12px; color: var(--gray-400); letter-spacing: 0.3px; }

/* SSO */
.sso-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; width: 100%; padding: 14px 20px;
    background: var(--white); border: 2px solid var(--gray-200);
    border-radius: var(--radius); font-size: 15px; font-weight: 600;
    color: var(--navy); text-decoration: none; cursor: pointer;
    transition: all var(--transition);
}

.sso-btn:hover {
    border-color: var(--gold); background: #fafaf8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sso-divider {
    display: flex; align-items: center; gap: 16px;
    margin: 20px 0; color: var(--gray-400); font-size: 13px;
}

.sso-divider::before,
.sso-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--gray-200);
}

.admin-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 10px 16px;
    background: transparent; border: 1px solid var(--gray-200);
    border-radius: var(--radius); font-size: 13px; font-weight: 500;
    color: var(--gray-500); cursor: pointer; transition: all var(--transition);
}

.admin-toggle-btn:hover {
    color: var(--navy); border-color: var(--gray-300); background: var(--gray-50);
}

.hidden { display: none !important; }

/* ==========================================
   Alert
   ========================================== */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 20px;
}

.alert-error {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid #fecaca;
}

/* ==========================================
   Sidebar
   ========================================== */

.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 260px; background: var(--navy); color: var(--white);
    display: flex; flex-direction: column; z-index: 100;
}

.sidebar-brand {
    padding: 26px 22px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    margin-bottom: 6px;
}

.sidebar-brand-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-pulse-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(241,60,108,0.55);
    flex-shrink: 0;
}

.sidebar-pulse-dot::before,
.sidebar-pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.55;
    animation: sidebar-pulse-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.sidebar-pulse-dot::after {
    animation-delay: 1.2s;
}

@keyframes sidebar-pulse-ring {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-pulse-dot::before,
    .sidebar-pulse-dot::after { animation: none; }
}

.sidebar-nav {
    list-style: none; padding: 12px 0;
    flex: 1; overflow-y: auto;
}

.nav-section-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--gray-400);
    padding: 16px 24px 6px; font-weight: 600;
}

.sidebar-nav li a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 2px 14px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.72);
    text-decoration: none; font-size: 13px; font-weight: 500;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.sidebar-nav li a:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
    border-color: rgba(255,255,255,0.14);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.sidebar-nav li a.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(241,60,108,0.20), rgba(241,60,108,0.06));
    border-color: rgba(241,60,108,0.40);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.sidebar-nav li a:focus-visible {
    outline: none;
    border-color: rgba(241,60,108,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 3px rgba(241,60,108,0.25);
}

.sidebar-nav li a svg { flex-shrink: 0; opacity: 0.75; }
.sidebar-nav li a.active svg { opacity: 1; stroke: var(--white); }

.sidebar-footer {
    padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }

.user-avatar {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--gold); color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}

.user-info { min-width: 0; }

.user-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.user-role { font-size: 11px; color: var(--gray-400); }

.logout-btn {
    color: rgba(255,255,255,0.4); padding: 6px;
    border-radius: 6px; transition: all var(--transition); display: flex;
}

.logout-btn:hover { color: var(--red); background: rgba(220,38,38,0.1); }

/* ==========================================
   Main Content
   ========================================== */

.main {
    margin-left: 260px; padding: 36px 40px; min-height: 100vh;
}

.main-full { min-height: 100vh; }

.page-header {
    margin-bottom: 32px; display: flex;
    justify-content: space-between; align-items: flex-start;
}

.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.page-header p { color: var(--gray-500); margin-top: 4px; font-size: 14px; }

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gray-500); text-decoration: none; font-size: 14px;
}
.back-link:hover { color: var(--navy); }

.text-muted { color: var(--gray-500); }
.text-sm { font-size: 13px; }
.required { color: var(--red); }

.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }

/* ==========================================
   Card & Table
   ========================================== */

.card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden;
    transition: box-shadow var(--transition);
}

.card-body { padding: 24px; }

.badge {
    display: inline-block; padding: 2px 10px;
    border-radius: 20px; font-size: 12px; font-weight: 500;
}

.badge-sso { background: #dbeafe; color: #2563eb; }
.badge-password { background: var(--gold-dim); color: var(--gold); }

.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--gray-400); font-size: 15px;
}

/* ==========================================
   Admin User List
   ========================================== */

.admin-user-list { display: flex; flex-direction: column; gap: 12px; }

.admin-user-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 20px 24px;
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 24px;
    transition: box-shadow var(--transition);
}

.admin-user-card:hover { box-shadow: var(--shadow); }
.admin-user-inactive { opacity: 0.55; }

.admin-user-main { display: flex; align-items: center; gap: 20px; min-width: 0; }

.admin-user-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }

.admin-user-avatar {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--navy); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; flex-shrink: 0;
}

.admin-avatar-admin { background: var(--gold); color: var(--white); }

.admin-user-name {
    font-size: 15px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.admin-user-username { font-size: 13px; color: var(--gray-400); }

.admin-user-meta {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

.admin-user-status {
    font-size: 13px; color: var(--gray-500);
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}

.admin-mod-tag {
    display: inline-block; padding: 3px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 600;
    background: var(--gray-100); color: var(--gray-600); white-space: nowrap;
}

.admin-mod-all { background: var(--navy); color: var(--white); }

.admin-user-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ==========================================
   Admin Tabs & Login Logs
   ========================================== */
.admin-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    border-bottom: 2px solid var(--gray-100); padding-bottom: 0;
}
.admin-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; background: none;
    font-size: 14px; font-weight: 600; color: var(--gray-400);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all var(--transition);
}
.admin-tab:hover { color: var(--navy); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

.login-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.login-stat-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 20px; text-align: center;
}
.login-stat-card.login-stat-errors { border-left: 3px solid var(--red); }
.login-stat-value { font-size: 28px; font-weight: 700; color: var(--navy); }
.login-stat-errors .login-stat-value { color: var(--red); }
.login-stat-label { font-size: 12px; color: var(--gray-400); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

.login-log-filters {
    display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.login-filter-btn {
    padding: 6px 16px; border: 1px solid var(--gray-200); border-radius: 20px;
    background: var(--white); font-size: 13px; font-weight: 500;
    color: var(--gray-500); cursor: pointer; transition: all var(--transition);
}
.login-filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.login-filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.user-filter-btn {
    padding: 6px 14px; border: 1px solid var(--gray-200); border-radius: 20px;
    background: var(--white); font-size: 12px; font-weight: 500;
    color: var(--gray-500); cursor: pointer; transition: all var(--transition);
}
.user-filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.user-filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.login-log-table-wrap { overflow-x: auto; }
.login-log-table td { vertical-align: middle; }
.login-log-time { white-space: nowrap; font-size: 13px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.login-log-email { font-size: 12px; color: var(--gray-400); }
.login-log-ip { font-size: 12px; color: var(--gray-400); font-family: monospace; }
.login-log-error { max-width: 250px; }
.login-error-text { font-size: 12px; color: var(--red); }

.login-status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
}
.login-status-success { background: #dcfce7; color: #166534; }
.login-status-fail { background: #fee2e2; color: #991b1b; }

/* ==========================================
   RBAC Sections (User Form)
   ========================================== */

.rbac-section {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 12px; margin-bottom: 20px; overflow: hidden;
}

.rbac-section-header {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px; border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.rbac-section-header > svg { color: var(--gray-400); stroke: var(--gray-400); }
.rbac-section-header h3 { font-size: 15px; font-weight: 700; }

.rbac-section-body { padding: 24px; }

.rbac-actions {
    display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;
}

/* Login type toggle (create form) */
.login-type-label {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 16px; border: 2px solid var(--gray-200);
    border-radius: var(--radius); font-size: 13px; font-weight: 500;
    color: var(--gray-500); transition: all var(--transition);
}

.login-type-label input { display: none; }

.login-type-active {
    border-color: var(--gold); background: #fafaf8;
    color: var(--navy); font-weight: 600;
}

/* Active toggle switch */
.active-toggle {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 14px 20px; border: 1px solid var(--gray-200);
    border-radius: 10px; transition: all var(--transition); user-select: none;
}

.active-toggle:hover { border-color: var(--gray-300); background: var(--gray-50); }
.active-toggle input { display: none; }

.active-toggle-track {
    width: 48px; height: 26px; border-radius: 26px;
    background: var(--gray-300); position: relative;
    transition: background 0.25s ease; flex-shrink: 0;
}

.active-toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.25s ease;
}

.active-toggle input:checked ~ .active-toggle-track { background: var(--green); }
.active-toggle input:checked ~ .active-toggle-track .active-toggle-thumb { transform: translateX(22px); }

.active-toggle-text { display: flex; flex-direction: column; }
.active-toggle-label { font-size: 14px; font-weight: 600; color: var(--navy); }
.active-toggle-status { font-size: 12px; color: var(--gray-400); transition: color var(--transition); }
.active-toggle input:checked ~ .active-toggle-text .active-toggle-status { color: var(--green); }

/* ==========================================
   Mobile menu toggle
   ========================================== */

.mobile-menu-btn {
    display: none; position: fixed; top: 16px; left: 16px; z-index: 200;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--gray-200); background: var(--white);
    color: var(--navy); align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow); transition: all 0.3s ease;
}

.mobile-menu-btn:hover { background: var(--gray-50); }

.mobile-menu-btn.sidebar-open {
    left: 276px; background: var(--navy);
    color: var(--white); border-color: var(--navy-hover); box-shadow: none;
}

.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 99;
}

.sidebar-overlay.active { display: block; }

/* ==========================================
   Responsive
   ========================================== */

/* Tablet */
@media (max-width: 1024px) {
    .login-left { display: none; }
    .login-right { width: 100%; }
    .form-row { flex-direction: column; gap: 8px; }
    .admin-user-card { grid-template-columns: 1fr; gap: 14px; }
    .admin-user-actions { justify-content: flex-end; }
    .lr-detail-layout-even { grid-template-columns: 1fr; }
    .lr-detail-layout { grid-template-columns: 1fr; }
    .lr-dashboard-grid { grid-template-columns: 1fr; }
    .lr-info-grid { grid-template-columns: 1fr 1fr; }
    .lr-stats-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; padding: 20px 14px; padding-top: 64px; }

    /* Page header */
    .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .page-header h1 { font-size: 20px; }

    /* Stat cards */
    .lr-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .lr-stat-card { padding: 16px; gap: 10px; border-radius: 10px; }
    .lr-stat-icon { width: 40px; height: 40px; border-radius: 10px; }
    .lr-stat-icon svg { width: 18px; height: 18px; }
    .lr-stat-value { font-size: 20px; }
    .lr-stat-label { font-size: 11px; }
    .lr-stat-sub { font-size: 10px; }

    /* Buildings grid */
    .lr-buildings-grid { grid-template-columns: 1fr; gap: 14px; }
    .lr-building-header { padding: 16px; }
    .lr-building-body { padding: 14px 16px; }
    .lr-building-footer { padding: 10px 16px; }
    .lr-building-name { font-size: 15px; }

    /* Tables — horizontal scroll with better touch */
    .card { border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lr-table { min-width: 600px; }
    .lr-th { padding: 10px 12px; font-size: 10px; white-space: nowrap; }
    .lr-td { padding: 10px 12px; font-size: 12px; }

    /* 6-col stats grid */
    .lr-stats-6 { grid-template-columns: repeat(2, 1fr); }

    /* Occupancy charts */
    .lr-occ-chart { height: 140px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Buttons in card footers */
    .card [style*="display:flex"][style*="gap:8px"] { flex-wrap: wrap; }

    /* Detail layouts */
    .lr-detail-layout { grid-template-columns: 1fr; gap: 16px; }
    .lr-detail-layout-even { grid-template-columns: 1fr; gap: 16px; }
    .lr-dashboard-grid { grid-template-columns: 1fr; gap: 16px; }
    .lr-info-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .lr-card-header { padding: 16px; }
    .lr-card-header h3 { font-size: 14px; }
    .lr-card-body { padding: 16px; }

    /* Tabs */
    .lr-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; }
    .lr-tab { padding: 10px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

    /* Filter bar — scrollable */
    .lr-filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
    .lr-filter-btn { white-space: nowrap; flex-shrink: 0; }

    /* Stacking units */
    .lr-stacking-unit { min-width: 100px; padding: 8px 10px; }
    .lr-stacking-label { font-size: 11px; }
    .lr-stacking-size { font-size: 9px; }
    .lr-stacking-tenant { font-size: 10px; }

    /* Activity log */
    .lr-activity-form { flex-direction: column; }
    .lr-activity-form input { width: 100%; }
    .lr-activity-item { padding: 12px; }
    .lr-activity-author { font-size: 11px; }
    .lr-activity-text { font-size: 12px; }

    /* Fee highlight */
    .lr-fee-highlight { padding: 16px; }
    .lr-fee-highlight-value { font-size: 22px; }

    /* Admin user cards */
    .admin-user-card { padding: 14px; grid-template-columns: 1fr; gap: 10px; }
    .admin-user-main { flex-direction: column; align-items: flex-start; gap: 8px; }
    .admin-user-meta { flex-wrap: wrap; gap: 6px; }
    .admin-user-actions { justify-content: flex-start; }

    /* Forms */
    .rbac-section { border-radius: 10px; margin-bottom: 14px; }
    .rbac-section-header { padding: 14px 16px; gap: 10px; }
    .rbac-section-header h3 { font-size: 14px; }
    .rbac-section-body { padding: 16px; }
    .rbac-actions { padding-top: 4px; }
    .rbac-actions .btn { padding: 10px 16px; font-size: 14px; }

    /* Back link */
    .back-link { font-size: 13px; }

    /* Pills / badges on mobile */
    .lr-status-pill { font-size: 11px; padding: 2px 10px; }
    .lr-stage-pill { font-size: 11px; padding: 2px 10px; }
    .badge { font-size: 11px; }

    /* Contact persons */
    .lr-person-item { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Report items */
    .lr-report-item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; }

    /* Building checkboxes */
    .lr-building-check { padding: 10px 14px; }
}

/* Small phones */
@media (max-width: 480px) {
    .main { padding: 16px 12px; padding-top: 60px; }
    .page-header h1 { font-size: 18px; }
    .page-header .btn { width: 100%; justify-content: center; }
    .lr-stats-grid { grid-template-columns: 1fr; gap: 10px; }
    .lr-stat-card { flex-direction: row; align-items: center; padding: 14px; }
    .lr-stats-6 { grid-template-columns: 1fr; }
    .lr-info-grid { grid-template-columns: 1fr; gap: 12px; }
    .lr-info-label { font-size: 10px; }
    .lr-info-value { font-size: 13px; }
    .btn { padding: 8px 14px; font-size: 13px; }
    .btn-sm { padding: 5px 10px; font-size: 12px; }
    .lr-table { min-width: 520px; }
    .lr-occ-chart { height: 120px !important; }
    .lr-buildings-grid { gap: 12px; }
    .lr-building-header h4 { font-size: 14px; }
    .back-link { font-size: 12px; }

    /* Login card */
    .login-card { padding: 24px 20px; }
    .login-card-header h1 { font-size: 22px; }
    .login-brand-logo { height: 70px; }
    .sso-btn { padding: 12px; font-size: 14px; }

    /* Form improvements */
    .form-group label { font-size: 12px; }
    .form-group input, .form-group select, .form-group textarea { font-size: 14px; padding: 10px 12px; }
    .rbac-section-body { padding: 14px; }
}

/* ==========================================
   OSS — Pursuits (responsive)
   ========================================== */

/* Pursuit tabs */
.pursuit-tab { background:none;border:none;font-size:14px;font-weight:500;color:var(--gray-400);padding:8px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px }
.pursuit-tab.active { color:var(--navy);border-bottom-color:var(--gold);font-weight:600 }
.pursuit-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px }

@media (max-width: 768px) {
    /* Pursuit pipeline */
    .pursuit-grid { grid-template-columns: 1fr; gap: 12px; }
    .pursuit-tab { font-size: 13px; padding: 6px 0; }

    /* Filter bar */
    .pursuit-filters { flex-direction: column; gap: 8px; }
    .pursuit-filters select,
    .pursuit-filters input { width: 100%; min-width: 0; }

    /* Cards — stack buttons */
    .pursuit-card .btn-sm { padding: 6px 10px; font-size: 11px; }

    /* Chip labels */
    .chip-label { padding: 4px 10px !important; font-size: 11px !important; }

    /* Closed summary boxes */
    .closed-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
    .closed-summary > div { padding: 14px; }
    .closed-summary > div > div:first-child { font-size: 28px; }

    /* Contact table scroll hint */
    .contacts-table-wrap { position: relative; }
    .contacts-table-wrap::after {
        content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
        pointer-events: none;
    }

    /* Modals */
    #editModal > div,
    #newCampaignModal > div,
    #newContactModal > div { width: 95%; max-width: none; padding: 20px; }
}

@media (max-width: 480px) {
    .pursuit-grid { gap: 10px; }
    .pursuit-tab { font-size: 12px; }
    #editModal > div,
    #newCampaignModal > div,
    #newContactModal > div { padding: 16px; }
}

/* ==========================================
   OSS — Pursuits (extended mobile pass)
   Targets the views that don't use .pursuit-filters
   ========================================== */
@media (max-width: 768px) {
    /* Activities page filter bar — inline styles bypass .pursuit-filters,
       so target by ID. Drop min-widths so they fill the row cleanly. */
    #activitySearch, #activityTypeFilter, #activityMemberFilter, #activityPursuitFilter {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13px;
    }

    /* Contacts page search input — same pattern */
    #contactSearch {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        font-size: 13px;
    }

    /* Followup-queue rows on the dashboard + the followups page —
       wrap cleanly when contact name + Done/Edit/Delete buttons get tight. */
    .followup-row { flex-wrap: wrap; }
    .followup-row > .followup-body { flex: 1 1 100%; min-width: 0; }

    /* Pursuits sidebar — campaign / pursuits cards inside the pipeline
       page lose all dead space at this width. */
    .pursuit-card .lr-stage-pill,
    .pursuit-card .badge { font-size: 10px !important; padding: 2px 8px !important; }

    /* Activity row — match the 768 breakpoint used elsewhere
       (was 600 internally; promoting to match the rest of pursuits) */
    .activity-actions { width: auto; }
    .activity-row-head { gap: 8px; }
    .activity-pursuit-link { font-size: 11px; }
    .activity-campaign-pills { gap: 3px; }
    .activity-campaign-pill { font-size: 10px; padding: 2px 6px; }

    /* Campaign cards: ensure the stat boxes shrink readably */
    .campaign-stat { padding: 5px 8px; }
    .cs-num { font-size: 14px; }
    .cs-lbl { font-size: 9px; }

    /* Pursuit detail page header — keep stage pill + edit/delete in one row,
       wrap cleanly when needed */
    .page-header > div[style*="display:flex"][style*="gap:10px"] { flex-wrap: wrap; }

    /* Pursuit/Campaign/Contact detail body — explicitly collapse 2-col grids
       inside detail layouts (campaigns + members, info grids). The global
       inline-style catch-all already does this; this is belt + braces. */
    .lr-detail-layout > div > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 480px) {
    /* Pipeline filter row: drop the gap so the third filter doesn't push
       to its own line at full width */
    .pursuit-filters { gap: 6px; }

    /* Activity row time column wraps below buttons on smallest phones */
    .activity-row-head { flex-direction: row; }
    .activity-time, .activity-date {
        width: 100%;
        order: 99;
        margin-top: 4px;
    }

    /* Campaign card head — title + actions stack on tiny phones */
    .campaign-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .campaign-actions { width: 100%; flex-wrap: wrap; }

    /* Campaign stat boxes can lose label visibility on smallest phones —
       pull em tighter but keep readable */
    .campaign-stat { padding: 4px 6px; }
    .cs-lbl { font-size: 8px; letter-spacing: .3px; }
}

/* ==========================================
   OSS — Pursuits (final mobile gap-closer)
   Targets the inline-styled modals and grids that
   bypass the earlier .pursuit-* / .lr-* rules.
   ========================================== */
@media (max-width: 768px) {
    /* Inline-styled modal inner panels — match the treatment that
       #editModal/#newContactModal/#newCampaignModal already get. */
    #newFollowupModal > div,
    #editFollowupModal > div,
    #newIntelModal > div,
    #editIntelModal > div,
    #activityTypeModal > div,
    #contactTypeModal > div,
    #contactSourceModal > div,
    #closeModal > div,
    #logActivityModal > div {
        width: 95% !important;
        max-width: none !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Inline 2-col grids inside cards & directly under .main — collapse so
       paired sub-cards stack on phones (e.g. contact_detail Activity/Followups). */
    .lr-card-body > div[style*="grid-template-columns:1fr 1fr"],
    .main > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Form-row inside a fixed modal: viewport-width media queries can't see modal
       width, so a 90%-wide modal at 375px still gets 2-col form-rows. Force single
       column for any .form-row inside a fixed-position modal. */
    div[style*="position:fixed"][style*="z-index:1000"] .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Picker dropdowns inside narrow modals — keep them inside the parent. */
    #contactDropdown, .ui-picker-dropdown { max-width: 100% !important; }

    /* Team-activity filter bar — member dropdown was min-width:200px,
       roughly half the viewport on a 375px phone. */
    .ta-select { min-width: 0 !important; flex: 1 1 100% !important; }
    #taFilters .ta-period-toggle { width: 100%; justify-content: space-between; }
    #taFilters .ta-period-btn { flex: 1; }
    #taFilters > div[style*="margin-left:auto"] { margin-left: 0 !important; width: 100%; }

    /* Follow-up row inline mark-done buttons used padding:2px 8px — sub-32px
       tap targets. Boost them on phones. */
    .followup-row button[style*="padding:2px 8px"] { padding: 6px 12px !important; font-size: 12px !important; }
    .followup-row .btn-sm { min-height: 32px; }

    /* Pursuit card action row tap targets. */
    .pursuit-card .btn-sm { min-height: 30px; }
}

@media (max-width: 480px) {
    /* Modal action row (Cancel + Save) — stack vertically full-width so the
       primary action is always reachable with one thumb. */
    div[style*="position:fixed"][style*="z-index:1000"] .rbac-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    div[style*="position:fixed"][style*="z-index:1000"] .rbac-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================
   OSS — Landlord Rep
   ========================================== */

.nav-subsection-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1px; color: var(--gold);
    padding: 4px 24px 2px; font-weight: 600;
    opacity: 0.7;
}

.nav-group-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--gray-400);
    padding: 14px 24px 4px; font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
    list-style: none;
}
.nav-group-label:first-of-type { border-top: none; margin-top: 0; }

.nav-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; flex-shrink: 0;
}

.nav-count {
    margin-left: auto; font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.5); min-width: 20px; text-align: right;
}

/* Stat cards */
.lr-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
    margin-bottom: 28px;
}

.lr-stat-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 14px; padding: 24px; display: flex;
    align-items: flex-start; gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.lr-stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--accent, var(--gray-200));
    transition: background var(--transition);
}

.lr-stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.lr-stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.lr-stat-card > div:not(.lr-stat-icon) { min-width: 0; flex: 1; }
.lr-stat-label { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; font-weight: 500; letter-spacing: 0.3px; overflow-wrap: anywhere; }
.lr-stat-value { font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lr-stat-sub { font-size: 11px; color: var(--gray-400); margin-top: 4px; overflow-wrap: anywhere; }

/* Buildings grid */
.lr-buildings-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}

.lr-building-card {
    transition: all 0.25s ease;
    border-radius: 14px !important;
    overflow: hidden;
}
.lr-building-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.lr-building-card .lr-building-header {
    padding: 24px; border-bottom: 1px solid var(--gray-100);
}

.lr-building-card .lr-building-name {
    font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--navy);
}

.lr-building-card .lr-building-body {
    padding: 20px 24px;
}

.lr-building-card .lr-building-footer {
    padding: 14px 24px; background: var(--gray-50); font-size: 12px;
    color: var(--gray-500); display: flex; justify-content: space-between;
    border-top: 1px solid var(--gray-100);
}

/* Tabs */
.lr-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--gray-200);
    margin-bottom: 24px;
}

.lr-tab {
    padding: 12px 24px; font-size: 14px; font-weight: 500;
    border: none; background: none; color: var(--gray-400);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all var(--transition);
    letter-spacing: 0.2px;
}

.lr-tab:hover { color: var(--navy); background: var(--gray-50); }
.lr-tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; background: transparent; }

/* Stacking plan units */
.lr-stacking-unit {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 14px; border-radius: 10px; min-width: 130px;
    border: 1px solid var(--gray-200); transition: all 0.2s ease;
    color: inherit; text-decoration: none;
}

.lr-stacking-unit:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.lr-stacking-label { font-size: 12px; font-weight: 700; }
.lr-stacking-size { font-size: 10px; color: var(--gray-500); }
.lr-stacking-tenant { font-size: 11px; font-weight: 500; margin-top: 1px; }

.lr-stacking-Occupied { background: #dcfce7; border-color: #86efac; }
.lr-stacking-Vacant { background: #fef2f2; border-color: #fecaca; }
.lr-stacking-LOO\ Stage { background: #fef3c7; border-color: #fde68a; }

/* Status pills */
.lr-status-pill {
    display: inline-block; padding: 3px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.2px;
}

.lr-status-Occupied, .lr-status-Paid, .lr-status-Active, .lr-status-Completed { background: #dcfce7; color: #166534; }
.lr-status-Vacant, .lr-status-Overdue, .lr-status-Closed { background: #fef2f2; color: #991b1b; }
.lr-status-Pending { background: #fef3c7; color: #92400e; }
.lr-status-LOO\ Stage { background: #dbeafe; color: #1e40af; }

/* Stage pill */
.lr-stage-pill {
    display: inline-block; padding: 3px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 600;
    background: var(--gray-100); color: var(--gray-600);
}

/* Info labels */
.lr-info-label { font-size: 11px; color: var(--gray-400); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.lr-info-value { font-size: 14px; font-weight: 600; color: var(--navy); }

/* Tables */
.lr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lr-table thead { background: var(--gray-50); }
.lr-th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; color: var(--gray-400); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
.lr-td { padding: 14px 16px; font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--gray-100); }
.lr-table tbody tr { transition: background var(--transition); }
.lr-table tbody tr:hover { background: var(--gray-50); }
.lr-table tbody tr:last-child .lr-td { border-bottom: none; }

/* Table link */
.lr-link { font-weight: 600; color: var(--blue); text-decoration: none; }
.lr-link:hover { color: #1d4ed8; text-decoration: underline; }

/* Filter buttons */
.lr-filter-bar { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }

.lr-filter-btn {
    padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--gray-200); background: var(--white);
    color: var(--gray-500); cursor: pointer; transition: all var(--transition);
    text-decoration: none; letter-spacing: 0.2px;
}

.lr-filter-btn:hover { border-color: var(--gray-300); color: var(--navy); background: var(--gray-50); }
.lr-filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Card sections */
.lr-card-header {
    padding: 20px 24px; border-bottom: 1px solid var(--gray-200);
    display: flex; justify-content: space-between; align-items: center;
}

.lr-card-header h3 { font-size: 15px; font-weight: 700; }

.lr-card-body { padding: 20px 24px; }

.lr-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.lr-detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.lr-detail-layout-even { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Activity log */
.lr-activity-form {
    display: flex; gap: 10px; margin-bottom: 20px;
}

.lr-activity-form input {
    flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200);
    border-radius: 10px; font-size: 13px; font-family: inherit;
    transition: all var(--transition);
}

.lr-activity-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }

.lr-activity-item {
    padding: 14px 16px; background: var(--gray-50); border-radius: 10px;
    border: 1px solid var(--gray-100);
}

.lr-activity-item + .lr-activity-item { margin-top: 10px; }

.lr-activity-meta {
    display: flex; justify-content: space-between; margin-bottom: 6px;
}

.lr-activity-author { font-size: 12px; font-weight: 700; color: var(--navy); }
.lr-activity-time { font-size: 11px; color: var(--gray-400); }
.lr-activity-text { font-size: 13px; color: var(--gray-600); line-height: 1.5; }

/* Quick actions sidebar */
.lr-actions-card .card-body { display: flex; flex-direction: column; gap: 8px; }

/* KF Fee highlight */
.lr-fee-highlight {
    margin-top: 20px; padding: 20px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-hover) 100%);
    border-radius: 12px; text-align: center; color: var(--white);
}

.lr-fee-highlight-label { font-size: 12px; opacity: 0.7; margin-bottom: 6px; font-weight: 500; letter-spacing: 0.5px; }
.lr-fee-highlight-value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }

/* Dashboard grid */
.lr-dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px;
}

/* Contact persons */
.lr-person-item {
    padding: 14px 0; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

.lr-person-item:last-child { border-bottom: none; }
.lr-person-name { font-weight: 600; font-size: 14px; color: var(--navy); }
.lr-person-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* Report items */
.lr-report-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--gray-100);
}

.lr-report-item:last-child { border-bottom: none; }

/* Empty state enhancement */
.empty-state {
    text-align: center; padding: 80px 20px;
    color: var(--gray-400); font-size: 15px;
}

.empty-state a { color: var(--gold); font-weight: 600; }

/* LR Role tags in user list */
.lr-role-tag { font-size: 10px; letter-spacing: 0.3px; font-weight: 700; }
.lr-role-hod { background: #dbeafe; color: #1e40af; }
.lr-role-team_lead { background: #dcfce7; color: #166534; }
.lr-role-agent { background: #fef3c7; color: #92400e; }

/* Building checkboxes in user form */
.lr-building-checkboxes {
    display: flex; flex-direction: column; gap: 8px;
}

.lr-building-check {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border: 1px solid var(--gray-200);
    border-radius: 10px; cursor: pointer; transition: all var(--transition);
}

.lr-building-check:hover { border-color: var(--gold); background: rgba(241,60,108,0.03); }

.lr-building-check input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0;
}

.lr-building-check input[type="checkbox"]:checked + .lr-building-check-label {
    color: var(--navy);
}

.lr-building-check-label {
    display: flex; flex-direction: column; gap: 2px;
}

.lr-building-check-label strong { font-size: 14px; font-weight: 600; }
.lr-building-check-label .text-muted { font-size: 12px; }

/* Section divider with label */
.lr-section-title {
    font-size: 13px; font-weight: 700; color: var(--gray-600);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
}

/* ==========================================
   Occupancy Bar Chart
   ========================================== */
.lr-occ-chart {
    display: flex; gap: 4px; align-items: flex-end; height: 160px; padding-top: 10px;
}
.lr-occ-bar-wrap {
    flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
    justify-content: flex-end; position: relative; cursor: pointer;
}
.lr-occ-bar {
    width: 100%; min-width: 16px; max-width: 36px; border-radius: 4px 4px 0 0;
    transition: opacity 0.2s;
}
.lr-occ-bar-wrap:hover .lr-occ-bar { opacity: 0.7; }
.lr-occ-label {
    font-size: 9px; color: var(--gray-400); margin-top: 4px; white-space: nowrap;
    text-overflow: ellipsis; overflow: hidden; max-width: 40px; text-align: center;
}

/* Stats grids — auto-fit caps at the child count, so .lr-stats-N
   never exceeds N columns but wraps gracefully when cards would
   otherwise overflow. NEVER use repeat(N, 1fr) here. See CLAUDE.md. */
.lr-stats-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lr-stats-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lr-stats-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lr-stats-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lr-stats-6 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 768px) {
    .lr-stats-2, .lr-stats-3 { grid-template-columns: 1fr; }
    .lr-stats-4, .lr-stats-5, .lr-stats-6 { grid-template-columns: repeat(2, 1fr); }
}

/* Info row for lease abstract other terms */
.lr-info-row {
    display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gray-100);
}
.lr-info-row .lr-info-label { min-width: 180px; flex-shrink: 0; }
.lr-info-row .lr-info-value { flex: 1; }
@media (max-width: 768px) {
    .lr-info-row { flex-direction: column; gap: 4px; }
    .lr-info-row .lr-info-label { min-width: unset; }
}

/* LA tab content */
.lr-la-tab-content { /* inherits from lr-tab-content */ }

/* ==========================================
   Module Hub Cards
   ========================================== */
.module-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}
.module-card:hover {
    border-color: var(--module-color, var(--navy));
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.module-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--module-color, var(--navy)) 10%, transparent);
    color: var(--module-color, var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.module-card-body { flex: 1; min-width: 0; }
.module-card-arrow {
    color: var(--gray-300);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.module-card:hover .module-card-arrow {
    color: var(--module-color, var(--navy));
    transform: translateX(3px);
}
.module-card-role {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    background: var(--gray-50);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Brand logos */
.login-brand-logo {
    height: 100px;
    width: auto;
    margin: 0 0 -10px;
    display: block;
    filter: brightness(0) invert(1);
}
.sidebar-brand-logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Sidebar module switcher */
.sidebar-module-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 14px 14px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.18);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.sidebar-module-switch:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 16px rgba(0,0,0,0.28);
}
.sidebar-module-switch:focus-visible {
    outline: none;
    border-color: rgba(241,60,108,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 3px rgba(241,60,108,0.25);
}
.sidebar-module-switch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.88);
    flex-shrink: 0;
}
.sidebar-module-switch-label { flex: 1; }
.sidebar-module-switch-chevron {
    opacity: 0.55;
    transition: transform 180ms ease, opacity 180ms ease;
    flex-shrink: 0;
}
.sidebar-module-switch:hover .sidebar-module-switch-chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* Info grid 2-col variant (used in reports) */
.lr-info-grid-2 { grid-template-columns: 1fr 1fr; }

/* Performance comparison row */
.lr-perf-row { display: flex; gap: 16px; font-size: 12px; }

/* ==========================================
   Module Hub
   ========================================== */
.hub-header {
    background: #fff; border-bottom: 1px solid var(--gray-100); padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
}
.hub-header-brand { display: flex; align-items: center; gap: 12px; }
.hub-header-title { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.hub-header-sub { font-size: 12px; color: var(--gray-400); }
.hub-header-user { display: flex; align-items: center; gap: 16px; }
.hub-header-user-info { text-align: right; }
.hub-header-user-name { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.hub-header-user-email { font-size: 11px; color: var(--gray-400); }
.hub-logout-btn {
    width: 36px; height: 36px; border-radius: 8px; background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-500); text-decoration: none;
}
.hub-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.hub-modules-wrap { width: 100%; max-width: 800px; }
.hub-modules-title { font-size: 24px; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; }
.hub-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* ==========================================
   Mobile — Module Hub
   ========================================== */
@media (max-width: 768px) {
    .hub-header { padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
    .hub-header-brand img { height: 28px; }
    .hub-header-title { font-size: 13px; }
    .hub-header-user-info { display: none; }
    .hub-content { padding: 24px 16px; align-items: flex-start; }
    .hub-modules-title { font-size: 20px; }
    .hub-modules-grid { grid-template-columns: 1fr; }
    .module-card { padding: 16px; gap: 12px; }
    .module-card-icon { width: 40px; height: 40px; }
    .module-card-role { top: 8px; right: 12px; }
    .lr-perf-row { flex-wrap: wrap; gap: 8px; }
    .lr-info-grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hub-header { padding: 12px; }
    .hub-content { padding: 20px 12px; }
    .hub-modules-title { font-size: 18px; }
    .module-card-body div:last-child { font-size: 12px; }
    .lr-info-grid-2 { grid-template-columns: 1fr; }
    .lr-perf-row { flex-direction: column; gap: 4px; }
}

/* ==========================================
   Tech module — mobile
   ========================================== */

@media (max-width: 768px) {
    /* Tech page-header action button rows wrap */
    .page-header > div[style*="display:flex"] { flex-wrap: wrap; gap: 8px; }
    .page-header form[style*="display:inline"] { display: inline-flex !important; }

    /* Filter / search bars at the top of tech list pages —
       drop the min-width that forces them to overflow on small phones. */
    #assetFilter, #userFilter, #licenseFilter {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* The asset count / user count badge that sits at the right with margin-left:auto
       — let it wrap naturally instead of shoving onto its own line at full width. */
    #assetCount, #userCount, #licenseCount {
        margin-left: 0 !important;
        font-size: 11px;
    }

    /* Tables get more vertical breathing room and a clearer scroll indicator */
    .lr-card-body[style*="overflow"] {
        position: relative;
        scrollbar-width: thin;
    }

    /* Action buttons inside table rows — bigger tap targets */
    .lr-table .btn-sm {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 30px;
    }

    /* Inline pill chips for license tags inside cells — keep them readable */
    .lr-td span[style*="background:#eff6ff"] {
        display: inline-block;
        margin: 1px;
        font-size: 10px !important;
    }

    /* Modal padding tighter on mobile so content actually fits */
    [id$="Modal"] > div[style*="background:white"] {
        padding: 20px !important;
    }
    [id$="Modal"] h2 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-right: 28px;
    }

    /* Bulk-edit modal rows — collapse the 180px label column to stack */
    .be-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }
    .be-apply { font-size: 13px; }

    /* Two-col form grids (inline-styled) collapse to single column on mobile.
       Covers: hardware details, asset modal editable section, contact modal. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Locked hardware fields readable on mobile */
    .hw-field {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    /* On very small phones, the page-header action buttons should be full-width
       so users can tap them comfortably. */
    .page-header > div[style*="display:flex"] .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    /* Small-screen tables: tighter padding */
    .lr-table .lr-th, .lr-table .lr-td { padding: 8px 10px; }
    /* Action button cells stack their buttons vertically when very narrow */
    .lr-td[style*="text-align:right"] {
        white-space: normal !important;
    }
    .lr-td[style*="text-align:right"] .btn-sm {
        margin: 2px 0;
        display: inline-flex;
    }
}

/* ==========================================
   P&C RBAC checkbox grid (admin user form)
   ========================================== */

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.perm-group {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 12px 14px;
}

.perm-check input[type="checkbox"] { accent-color: var(--gold); }

@media (max-width: 768px) {
    .perm-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   People & Culture Dashboard
   ========================================== */

.pc-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pc-stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px 24px;
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}

.pc-stat-card:hover { box-shadow: var(--shadow); }

.pc-stat-selected {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.pc-stat-yellow { border-left: 4px solid #f59e0b; }
.pc-stat-blue { border-left: 4px solid #3b82f6; }
.pc-stat-red { border-left: 4px solid #ef4444; }
.pc-stat-green { border-left: 4px solid #10b981; }
.pc-stat-purple { border-left: 4px solid #8b5cf6; }

.pc-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.pc-stat-label {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 500;
}

.pc-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-icon-yellow { background: #fef3c7; color: #d97706; }
.pc-icon-blue { background: #dbeafe; color: #2563eb; }
.pc-icon-red { background: #fee2e2; color: #dc2626; }
.pc-icon-green { background: #dcfce7; color: #16a34a; }
.pc-icon-purple { background: #ede9fe; color: #7c3aed; }

.pc-icon-yellow svg { stroke: #d97706; }
.pc-icon-blue svg { stroke: #2563eb; }
.pc-icon-red svg { stroke: #dc2626; }
.pc-icon-green svg { stroke: #16a34a; }
.pc-icon-purple svg { stroke: #7c3aed; }

.pc-stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.pc-cards-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 20px;
    margin-bottom: 24px;
}

.pc-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    padding: 24px;
}

.pc-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.pc-card-header svg { stroke: var(--gray-400); flex-shrink: 0; }

.pc-card-header h3 {
    font-size: 15px;
    font-weight: 700;
}

.pc-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition);
    border: 1px solid var(--gray-100);
}

.pc-action-btn:hover { background: var(--gray-50); }

.pc-action-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pc-dot-yellow { background: #f59e0b; }
.pc-dot-blue { background: #3b82f6; }
.pc-dot-red { background: #ef4444; }
.pc-dot-purple { background: #8b5cf6; }

.pc-list { display: flex; flex-direction: column; }

.pc-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.pc-list-item:last-child { border-bottom: none; }

.pc-list-item > div {
    display: flex;
    flex-direction: column;
}

.pc-list-item strong { font-size: 14px; }

.pc-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid transparent;
}

.pc-pending-item > div {
    display: flex;
    flex-direction: column;
}

.pc-pending-item strong { font-size: 14px; }
.pc-pending-item:last-child { margin-bottom: 0; }

.pc-pending-pending { background: #fef3c7; border-left-color: #f59e0b; }
.pc-pending-submitted { background: #dbeafe; border-left-color: #3b82f6; }

.pc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pc-badge-pending { background: #fef3c7; color: #92400e; }
.pc-badge-in-progress { background: #fff7ed; color: #c2410c; }
.pc-badge-completed { background: #dcfce7; color: #166534; }
.pc-badge-approved { background: #dcfce7; color: #166534; }
.pc-badge-submitted { background: #dbeafe; color: #1e40af; }
.pc-badge-rejected { background: #fef2f2; color: #dc2626; }

/* Generic dashboard section card (used for the per-type tables) */
.pc-section {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--gray-200);
    overflow-x: auto;
}

.pc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pc-section h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.pc-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 600px;
}

.pc-section thead { background: var(--gray-50); }

.pc-section th {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-700);
}

.pc-section td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}

.pc-section td strong { color: var(--gray-900); }

@media (max-width: 1024px) {
    .pc-stats-row { grid-template-columns: repeat(2, 1fr); }
    .pc-cards-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .pc-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
    .pc-cards-row { grid-template-columns: 1fr; }
    .pc-stat-card { padding: 12px 14px; }
    .pc-stat-value { font-size: 22px; }
    .pc-stat-label { font-size: 11px; }
    .pc-stat-top { margin-bottom: 4px; }
    .pc-stat-icon { display: none; }
    .pc-section { padding: 18px; }
    .pc-section-header { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* File upload drop-zone — reusable component */
.file-dropzone {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 24px 20px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.file-dropzone:hover,
.file-dropzone.is-dragover {
    border-color: #ff4d7e;
    background: #fff5f7;
}
.file-dropzone.is-dragover { box-shadow: 0 0 0 4px rgba(255,77,126,.10); }
.file-dropzone-prompt { text-align: center; pointer-events: none; }
.file-dropzone-prompt svg { color: #9ca3af; display: block; margin: 0 auto 8px; }
.file-dropzone-title { margin: 0 0 4px; font-size: 14px; color: #374151; }
.file-dropzone-title strong { color: #243647; }
.file-dropzone-hint { margin: 0; color: #6b7280; font-size: 12px; }
.file-dropzone--compact { padding: 14px 16px; }
.file-dropzone--compact .file-dropzone-prompt svg { width: 22px; height: 22px; margin-bottom: 4px; }
.file-dropzone--compact .file-dropzone-title { font-size: 13px; }
.file-chips {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.file-chips:empty { display: none; }
.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 13px;
    color: #243647;
    max-width: 100%;
}
.file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.file-chip-size { color: #6b7280; font-size: 12px; }
.file-chip-remove {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 2px 6px;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    border-radius: 9999px;
}
.file-chip-remove:hover { color: #dc2626; background: #fef2f2; }

/* ------------------------------------------------------------------
 * Searchable dropdown / combobox styles
 * Used by: transfer forms' staff autocomplete, the searchable_select
 * partial (Pm building Director/Centre Manager/Admin pickers, etc).
 * Class names kept as `.staff-dropdown*` for back-compat with the
 * transfer forms; safe to reuse on any combobox UI.
 * ------------------------------------------------------------------ */
.staff-search { margin-bottom: 22px; }
.staff-search-status {
    margin: 6px 2px 0;
    font-size: 11px;
    color: var(--gray-500);
    min-height: 14px;
    line-height: 1.3;
}
.staff-search-status.is-success { color: #059669; }
.staff-search-status.is-warn { color: #b45309; }
.staff-search-status.is-error { color: var(--red); }
.staff-dropdown {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-top: 6px;
    z-index: 50;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.staff-dropdown.open { display: block; }
.staff-dropdown-item {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 120ms ease, color 120ms ease;
}
.staff-dropdown-item:hover,
.staff-dropdown-item.is-active {
    background: var(--gold-dim);
}
.staff-dropdown-item.is-hidden { display: none; }
.staff-dropdown-item.is-selected .staff-dropdown-primary {
    color: var(--gold, var(--red));
}
.staff-dropdown-primary {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900, var(--navy));
    line-height: 1.3;
}
.staff-dropdown-secondary {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.staff-dropdown-chip {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-700);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.staff-dropdown-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--gray-500);
}

/* ==========================================
   Login Page — Corporate Register (scoped)
   Scoped to body.login-page so the original
   .login-* rules remain available to other
   surfaces (e.g. no-access.hbs).
   ========================================== */

/* --kf-* tokens are now declared at :root (see top of file).
   body.login-page reads them via var() — no change in computed
   colors for the login surface. */
body.login-page {
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper);
    color: var(--kf-ink);
    line-height: 1.55;
}

body.login-page .login-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    min-height: 100vh;
}

/* Left brand panel — quiet, deep navy, no radial pink */
body.login-page .login-left {
    position: relative;
    background: var(--kf-navy);
    color: #f2eee5;
    padding: 64px 72px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

/* Remove the inherited pink radial decorations */
body.login-page .login-left::before,
body.login-page .login-left::after {
    content: none;
    background: none;
}

/* A single restrained accent: hairline gold rule on the right edge */
body.login-page .login-left {
    border-right: 1px solid rgba(154, 123, 63, 0.35);
}

body.login-page .login-left-content {
    position: relative;
    z-index: 1;
    max-width: 460px;
    width: 100%;
    color: #f2eee5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

body.login-page .login-mark {
    margin-bottom: 56px;
}

body.login-page .login-brand-logo {
    height: 36px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* fix5 — force-white the KF mark on the navy brand pane at every viewport.
   The image asset is a dark mark, so on the #0b1f3a panel it would otherwise
   read as invisible. Scoped to body.login-page .login-left so the same logo
   class elsewhere (e.g. no-access surface) keeps its natural color. */
body.login-page .login-left .login-brand-logo,
body.login-page .login-mark .login-brand-logo {
    filter: brightness(0) invert(1) !important;
}

body.login-page .login-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242, 238, 229, 0.6);
    margin-bottom: 22px;
}

body.login-page .login-brand-title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5.4vw, 68px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.02;
    color: #f6f3ec;
    margin: 0 0 24px;
}

/* Pulsing brand dot — deliberate pink-magenta pop against the navy pane.
   The dot IS the brand mark; the rest of the surface stays navy + gold. */
body.login-page .login-brand-dot {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    border-radius: 50%;
    background: #f13c6c;
    /* Lift the dot to sit on the cap-height baseline rather than the type baseline */
    transform: translateY(-0.08em);
    transform-origin: center;
    box-shadow: 0 0 0 0 rgba(241, 60, 108, 0.55);
    animation: loginBrandPulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity, box-shadow;
}

@keyframes loginBrandPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-0.08em) scale(1);
        box-shadow: 0 0 0 0 rgba(241, 60, 108, 0.55);
    }
    50% {
        opacity: 0.55;
        transform: translateY(-0.08em) scale(0.78);
        box-shadow: 0 0 0 6px rgba(241, 60, 108, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login-page .login-brand-dot {
        animation: none;
        opacity: 1;
        box-shadow: none;
    }
}

body.login-page .login-tagline {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(242, 238, 229, 0.78);
    margin: 0 0 44px;
    max-width: 38ch;
}

body.login-page .login-features {
    list-style: none;
    margin: 0 0 auto;
    padding: 24px 0 0;
    border-top: 1px solid rgba(242, 238, 229, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.login-page .login-features li {
    position: relative;
    padding: 12px 0 12px 18px;
    font-size: 14px;
    color: rgba(242, 238, 229, 0.82);
    border-bottom: 1px solid rgba(242, 238, 229, 0.08);
    letter-spacing: 0.005em;
}

body.login-page .login-features li:last-child {
    border-bottom: none;
}

body.login-page .login-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--kf-accent);
    opacity: 0.85;
}

body.login-page .login-left-footer {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid rgba(242, 238, 229, 0.12);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(242, 238, 229, 0.5);
}

/* Right pane — ivory paper, no card-in-card.
   Use the literal hex with !important so this surface CANNOT be repainted
   dark by an inherited theme, a stale cache, or any user-agent dark scheme.
   Scoped to body.login-page so it does NOT touch any other surface. */
body.login-page .login-right {
    width: auto;
    max-width: none;
    background: #f6f3ec !important;
    color: var(--kf-ink, #1a2230);
    padding: 64px 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Belt-and-braces: every text element inside the form pane reads navy/dark
   on ivory. Headings → navy; body/labels/dividers → ink/muted. Defends
   against any future global dark-theme rule that targets these tags. */
body.login-page .login-right,
body.login-page .login-card,
body.login-page .login-card * {
    color: inherit;
}
body.login-page .login-card-header h1 { color: var(--kf-navy, #0b1f3a) !important; }
body.login-page .login-card-header p,
body.login-page .login-form label,
body.login-page .sso-divider,
body.login-page .login-footer span { color: var(--kf-muted, #6e6a5f); }
body.login-page .login-form input[type="text"],
body.login-page .login-form input[type="password"],
body.login-page .admin-toggle-btn { color: var(--kf-ink, #1a2230); }

body.login-page .login-card {
    width: 100%;
    max-width: 380px;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

body.login-page .login-card-header {
    margin-bottom: 36px;
}

body.login-page .login-card-header h1 {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--kf-navy);
    margin: 0 0 8px;
}

body.login-page .login-card-header p {
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0;
}

/* Microsoft SSO button — corporate flat, navy with a hairline border */
body.login-page .sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    background: var(--kf-navy);
    border: 1px solid var(--kf-navy);
    border-radius: 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f6f3ec;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.login-page .sso-btn:hover {
    background: var(--kf-navy-deep);
    border-color: var(--kf-navy-deep);
    box-shadow: none;
}

body.login-page .sso-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(154, 123, 63, 0.35);
}

/* Divider — hairline */
body.login-page .sso-divider {
    margin: 24px 0;
    color: var(--kf-muted);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.login-page .sso-divider::before,
body.login-page .sso-divider::after {
    background: var(--kf-rule);
    height: 1px;
}

/* Administrator sign-in — quiet text trigger */
body.login-page .admin-toggle-btn {
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: 1px solid var(--kf-rule);
    border-radius: 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--kf-ink);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}

body.login-page .admin-toggle-btn:hover {
    border-color: var(--kf-navy);
    background: var(--kf-paper-deep);
}

body.login-page .admin-toggle-btn:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* Form */
body.login-page .login-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.login-page .login-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

body.login-page .login-form label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kf-muted);
}

body.login-page .login-form input[type="text"],
body.login-page .login-form input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    color: var(--kf-ink);
    background: #fffdf8;
    border: 1px solid var(--kf-rule);
    border-radius: 4px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body.login-page .login-form input[type="text"]::placeholder,
body.login-page .login-form input[type="password"]::placeholder {
    color: #a8a294;
}

body.login-page .login-form input[type="text"]:focus,
body.login-page .login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--kf-navy);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.10);
}

body.login-page .login-submit.btn-primary {
    margin-top: 6px;
    width: 100%;
    padding: 13px 18px;
    background: var(--kf-accent);
    border: 1px solid var(--kf-accent);
    border-radius: 4px;
    color: #ffffff;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 180ms ease, border-color 180ms ease;
}

body.login-page .login-submit.btn-primary:hover {
    background: #856936;
    border-color: #856936;
}

body.login-page .login-submit.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(154, 123, 63, 0.30);
}

/* Alert */
body.login-page .alert-error {
    background: #fdf3f0;
    color: #8a2c1f;
    border: 1px solid #ecd2c8;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    margin-bottom: 22px;
}

/* Footer */
body.login-page .login-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--kf-rule-soft);
    text-align: left;
}

body.login-page .login-footer span {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--kf-muted);
    text-transform: none;
}

/* ---- MFA (portal two-factor) ---- */
body.login-page .alert-info {
    background: var(--kf-signal-info-bg, #e3e8ee);
    color: var(--kf-signal-info, #486b8a);
    border: 1px solid #cdd8e3;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    margin-bottom: 22px;
}

/* Method chooser cards */
body.login-page .mfa-choice-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 8px;
}
body.login-page .mfa-choice {
    display: block;
    text-decoration: none;
    color: var(--kf-ink);
    border: 1px solid var(--kf-rule);
    border-radius: 14px;
    padding: 20px 22px;
    background: var(--kf-paper);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body.login-page .mfa-choice:hover {
    transform: translateY(-2px);
    border-color: var(--kf-accent);
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.08);
}
body.login-page .mfa-choice h3 {
    font-family: "Source Serif 4", serif;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 6px;
}
body.login-page .mfa-choice p {
    font-size: 13px;
    color: var(--kf-muted);
    margin: 0;
}
body.login-page .mfa-choice-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
}

/* TOTP / email steps */
body.login-page .mfa-steps {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 14px;
    color: var(--kf-ink);
}
body.login-page .mfa-steps li { margin-bottom: 6px; }
body.login-page .mfa-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}
body.login-page .mfa-qr {
    border: 1px solid var(--kf-rule);
    border-radius: 12px;
    padding: 10px;
    background: #ffffff;
}
body.login-page .mfa-manual-key {
    font-size: 12px;
    color: var(--kf-muted);
    text-align: center;
    margin: 0 0 18px;
}
body.login-page .mfa-manual-key code {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--kf-ink);
    background: var(--kf-paper-deep);
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
}
body.login-page .mfa-sent-note {
    font-size: 14px;
    color: var(--kf-ink);
    margin: 0 0 18px;
}
body.login-page .mfa-alt-link {
    margin-top: 16px;
    font-size: 13px;
}
body.login-page .mfa-alt-link a,
body.login-page .mfa-verify-links a {
    color: var(--kf-accent);
    text-decoration: none;
}
body.login-page .mfa-alt-link a:hover,
body.login-page .mfa-verify-links a:hover { text-decoration: underline; }

/* Inline "resend" forms styled as text links */
body.login-page .mfa-inline-form { display: inline; }
body.login-page .mfa-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--kf-accent);
    cursor: pointer;
    text-decoration: none;
}
body.login-page .mfa-link-btn:hover { text-decoration: underline; }
body.login-page .mfa-verify-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    font-size: 13px;
    align-items: center;
}

/* Backup codes */
body.login-page .mfa-backup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0 18px;
}
body.login-page .mfa-backup-code {
    font-size: 15px;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--kf-ink);
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 8px;
    padding: 10px 6px;
}
body.login-page .mfa-backup-note {
    font-size: 13px;
    color: var(--kf-muted);
    margin: 0 0 20px;
}
body.login-page .mfa-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--kf-ink);
    margin-bottom: 18px;
    cursor: pointer;
}
body.login-page .mfa-ack input { margin-top: 3px; }

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
    body.login-page .sso-btn,
    body.login-page .admin-toggle-btn,
    body.login-page .login-submit.btn-primary,
    body.login-page .login-form input { transition: none; }
}

/* Responsive — collapse to single column on narrow viewports */
@media (max-width: 960px) {
    body.login-page .login-wrapper {
        grid-template-columns: 1fr;
    }
    body.login-page .login-left {
        padding: 40px 32px;
        border-right: none;
        border-bottom: 1px solid rgba(154, 123, 63, 0.35);
    }
    body.login-page .login-left-content {
        max-width: none;
    }
    body.login-page .login-mark { margin-bottom: 32px; }
    body.login-page .login-tagline { margin-bottom: 28px; }
    body.login-page .login-left-footer { margin-top: 32px; }
    body.login-page .login-right {
        padding: 48px 32px;
    }
}

/* Mobile — phones and small tablets (≤768px)
   Brand strip is the visual anchor: KF logo + Pulse wordmark must read at
   real size. Strip is allowed ~96–112px tall. Form still fits above the fold
   on a 667px viewport. */
@media (max-width: 768px) {
    /* Wrapper: stack. Allow content height instead of forcing 100vh so the
       keyboard doesn't shove the submit button off-screen on iOS. */
    body.login-page .login-wrapper {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    /* Brand pane — strip header. KF logo + "Pulse •" + eyebrow.
       Comfortable padding so logo + wordmark feel like the brand, not a footer. */
    body.login-page .login-left {
        padding: 22px 22px 20px;
        padding-top: max(22px, env(safe-area-inset-top));
        padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right));
        border-right: none;
        border-bottom: 1px solid rgba(154, 123, 63, 0.55);
        align-items: center;
        min-height: 0;
    }
    /* Form pane — force ivory paint at all mobile widths. Uses !important here
       because earlier unscoped `.login-right { background: var(--white) }`
       (line ~350) and the dark `.login-left` neighbouring grid cell can make
       this surface read dark on some browsers if cache/specificity falters.
       Scoped to body.login-page so it never leaks to other pages. */
    body.login-page .login-right {
        background: #f6f3ec !important;
        color: var(--kf-ink, #1a2230);
    }
    body.login-page .login-left-content {
        max-width: none;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    body.login-page .login-mark {
        margin-bottom: 0;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }
    /* KF logo — the brand anchor. ≥32px tall as requested. */
    body.login-page .login-brand-logo { height: 36px; }

    /* Eyebrow stays — single small line below the wordmark */
    body.login-page .login-eyebrow {
        margin-bottom: 0;
        font-size: 10px;
        letter-spacing: 0.2em;
        flex: 0 0 auto;
        order: 3;
        width: 100%;
        color: rgba(242, 238, 229, 0.6);
        margin-top: 2px;
    }

    /* "Pulse •" wordmark — hero of the brand strip. Serif feels like the mark. */
    body.login-page .login-brand-title {
        font-size: 38px;
        margin: 0;
        line-height: 1;
        flex: 0 0 auto;
        order: 2;
    }
    body.login-page .login-brand-dot {
        /* Scales with em — at 38px wordmark this lands ~13–14px diameter,
           proportional to the cap-height. */
        width: 0.34em;
        height: 0.34em;
    }

    /* Hide all other brand chrome — keeps the form above the fold */
    body.login-page .login-tagline,
    body.login-page .login-features,
    body.login-page .login-left-footer { display: none; }

    /* Form pane: top-aligned and packed efficiently */
    body.login-page .login-right {
        padding: 22px 22px 28px;
        padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right));
        padding-bottom: max(28px, env(safe-area-inset-bottom));
        align-items: stretch;
        justify-content: flex-start;
    }
    body.login-page .login-card {
        max-width: 100%;
        margin: 0 auto;
    }
    body.login-page .login-card-header { margin-bottom: 18px; }
    body.login-page .login-card-header h1 {
        font-size: 22px;
        margin-bottom: 4px;
    }
    body.login-page .login-card-header p { font-size: 13px; }

    /* Touch targets — iOS HIG min 44px, comfy 48px for the primary action.
       16px font-size on inputs prevents iOS auto-zoom on focus. */
    body.login-page .sso-btn {
        min-height: 48px;
        padding: 13px 20px;
        font-size: 15px;
    }
    body.login-page .admin-toggle-btn {
        min-height: 44px;
        padding: 11px 16px;
        font-size: 14px;
    }
    body.login-page .login-form { gap: 12px; margin-top: 14px; }
    body.login-page .login-form input[type="text"],
    body.login-page .login-form input[type="password"] {
        min-height: 44px;
        padding: 11px 14px;
        font-size: 16px;
    }
    body.login-page .login-submit.btn-primary {
        min-height: 48px;
        padding: 13px 18px;
        font-size: 15px;
    }

    body.login-page .sso-divider { margin: 14px 0; }
    body.login-page .login-footer {
        margin-top: 20px;
        padding-top: 14px;
    }
    body.login-page .login-footer span { font-size: 10px; }
}

/* Mobile — very small screens (≤480px): tighten the strip but keep brand
   marks legible. The "Pulse •" wordmark + KF logo STAY at acceptable size. */
@media (max-width: 480px) {
    body.login-page .login-left {
        padding: 18px 18px 16px;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.login-page .login-left-content { gap: 14px; }
    /* KF logo — still ≥32px so it reads as a brand mark, not a favicon. */
    body.login-page .login-brand-logo { height: 32px; }
    /* "Pulse" wordmark — 32px keeps the serif weighty enough to anchor. */
    body.login-page .login-brand-title { font-size: 32px; }
    body.login-page .login-brand-dot {
        width: 0.34em;
        height: 0.34em;
    }
    body.login-page .login-eyebrow {
        font-size: 9px;
        letter-spacing: 0.18em;
    }

    /* Force ivory paint — same guard as ≤768px, applies to phones too. */
    body.login-page .login-right {
        background: #f6f3ec !important;
        color: var(--kf-ink, #1a2230);
        padding: 20px 18px 26px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
        padding-bottom: max(26px, env(safe-area-inset-bottom));
    }
    body.login-page .login-card-header { margin-bottom: 16px; }
    body.login-page .login-card-header h1 { font-size: 21px; }
    body.login-page .login-card-header p { font-size: 12px; }
}

/* fix6 — KF logo via CSS mask. The IMG+filter approach was rendering the
   mark as invisible on the user's mobile browser. Switching to a SPAN
   styled with background-color: white + mask-image: kf-logo.png guarantees
   a solid white logo regardless of source PNG color or filter support. */
body.login-page .login-brand-logo {
    display: inline-block;
    background-color: #ffffff !important;
    -webkit-mask: url(/img/kf-logo.png) no-repeat center / contain;
    mask: url(/img/kf-logo.png) no-repeat center / contain;
    width: 64px;
    height: 44px;
    filter: none !important;
    opacity: 1 !important;
    vertical-align: middle;
}
@media (max-width: 768px) {
    body.login-page .login-brand-logo { width: 56px; height: 40px; }
}
@media (max-width: 480px) {
    body.login-page .login-brand-logo { width: 50px; height: 36px; }
}


/* ==========================================
   Module Hub — Mercury / Brex register (hub2)
   ==========================================
   Premium fintech card surface. Replaces the hub1 block.
   Scoped to body.hub-page. References:
   mercury.com, brex.com, ramp.com, parker.com.
   ========================================== */

body.hub-page {
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);                /* page = deeper tinted paper */
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hub-page .hub-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ---------- Top bar (hairline, generous padding) ---------- */
body.hub-page .hub-header {
    background: transparent;
    border-bottom: 1px solid var(--kf-rule-soft);
    padding: 20px 48px;
    padding-top: max(20px, env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

body.hub-page .hub-header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* KF logo via mask — bulletproof recolor to navy on paper. */
body.hub-page .hub-brand-logo {
    display: inline-block;
    background-color: var(--kf-navy);
    -webkit-mask: url(/img/kf-logo.png) no-repeat center / contain;
    mask: url(/img/kf-logo.png) no-repeat center / contain;
    width: 52px;
    height: 34px;
    flex-shrink: 0;
}

/* Pulse wordmark — Source Serif with pulsing pink dot. */
body.hub-page .hub-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.16em;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--kf-navy);
    margin: 0;
}

body.hub-page .hub-wordmark-dot {
    display: inline-block;
    width: 0.36em;
    height: 0.36em;
    border-radius: 50%;
    background: var(--gold);
    transform: translateY(-0.06em);
    transform-origin: center;
    box-shadow: 0 0 0 0 rgba(241, 60, 108, 0.45);
    animation: hubBrandPulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity, box-shadow;
}

@keyframes hubBrandPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-0.06em) scale(1);
        box-shadow: 0 0 0 0 rgba(241, 60, 108, 0.45);
    }
    50% {
        opacity: 0.55;
        transform: translateY(-0.06em) scale(0.78);
        box-shadow: 0 0 0 5px rgba(241, 60, 108, 0);
    }
}

/* User slot — quiet, top-right */
body.hub-page .hub-header-user {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
body.hub-page .hub-header-user-info {
    text-align: right;
    min-width: 0;
}
body.hub-page .hub-header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--kf-ink);
    line-height: 1.25;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}
body.hub-page .hub-header-user-email {
    font-size: 11px;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}

body.hub-page .hub-logout-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--kf-rule);
    color: var(--kf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.hub-page .hub-logout-btn:hover {
    border-color: var(--kf-navy);
    background: var(--kf-paper);
    color: var(--kf-navy);
}
body.hub-page .hub-logout-btn:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* ---------- Content area ---------- */
body.hub-page .hub-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 48px 80px;
}

body.hub-page .hub-modules-wrap {
    width: 100%;
    max-width: 1100px;
}

/* Hero block — Source Serif greeting + a single line of helper text. */
body.hub-page .hub-intro {
    margin: 0 0 48px;
    text-align: left;
}

body.hub-page .hub-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 18px;
}

body.hub-page .hub-modules-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3.6vw, 40px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.08;
    color: var(--kf-navy);
    margin: 0 0 10px;
    max-width: 22ch;
}

body.hub-page .hub-modules-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    color: var(--kf-muted);
    margin: 0;
    max-width: 65ch;
    line-height: 1.5;
}

/* ---------- Card grid ---------- */
body.hub-page .hub-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* ---------- Module card — Mercury/Brex surface ----------
   Paper-light card on deeper-paper page. Rounded 16px. Soft drop shadow.
   Per-module accent dot top-left. Monochrome navy icon next to title.
   Hover lifts 2px and deepens the shadow.
*/
body.hub-page .module-card {
    --module-accent: #6e6a5f;   /* fallback — overridden by per-module rules below */

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px;
    background: var(--kf-paper);                                   /* lighter than page */
    border: 1px solid var(--kf-rule-soft);                         /* nearly invisible */
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);                 /* large blur, low opacity */
    text-decoration: none;
    color: var(--kf-ink);
    min-height: 200px;
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}

body.hub-page .module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(11, 31, 58, 0.10);
    border-color: var(--kf-rule);
}
body.hub-page .module-card:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12),
                0 8px 28px rgba(11, 31, 58, 0.06);
}
body.hub-page .module-card:active {
    transform: translateY(0);
    transition-duration: 80ms;
}

/* Accent dot — top-left of the card. Per-module color comes from the
   per-module class below. 8px round, no halo. */
body.hub-page .module-card-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--module-accent);
    margin-bottom: 22px;
    flex-shrink: 0;
}

/* Head row — monochrome navy icon + module name in Source Sans medium. */
body.hub-page .module-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
}

body.hub-page .module-card-icon {
    width: 22px;
    height: 22px;
    color: var(--kf-navy);                /* monochrome — no colored tile */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.hub-page .module-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

body.hub-page .module-card-name {
    font-family: "Source Sans 3", sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--kf-navy);
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0;
}

/* Description — muted, comfortable line-height, capped at 2 lines visually. */
body.hub-page .module-card-desc {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--kf-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 42ch;
    flex: 1;
}

/* Foot row — role label left, arrow right. Arrow accents on hover. */
body.hub-page .module-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

body.hub-page .module-card-role {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-muted);
}

body.hub-page .module-card-arrow {
    color: var(--kf-rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.hub-page .module-card-arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.hub-page .module-card:hover .module-card-arrow {
    color: var(--kf-accent);
    transform: translateX(4px);
}

/* ---------- Per-module accent colors (muted, desaturated) ---------- */
body.hub-page .module-card--landlord_rep         { --module-accent: #3a5a7d; }  /* muted navy */
body.hub-page .module-card--tenant_admin         { --module-accent: #6e4a6a; }  /* muted plum */
body.hub-page .module-card--finance              { --module-accent: #5a7a5e; }  /* muted sage */
body.hub-page .module-card--sr_transfers         { --module-accent: #a37250; }  /* muted clay */
body.hub-page .module-card--people_culture       { --module-accent: #4a7a82; }  /* muted teal */
body.hub-page .module-card--pursuits             { --module-accent: #a08542; }  /* muted ochre */
body.hub-page .module-card--property_management  { --module-accent: #8a6a3f; }  /* muted bronze */
body.hub-page .module-card--marketing            { --module-accent: #8a5a72; }  /* muted mauve */
body.hub-page .module-card--tech                 { --module-accent: #4a5a74; }  /* muted slate */

/* ---------- No-modules empty state ---------- */
body.hub-page .hub-empty {
    width: 100%;
    max-width: 480px;
    margin: 64px auto;
    padding: 36px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    text-align: left;
}
body.hub-page .hub-empty-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-accent);
    margin: 0 0 14px;
}
body.hub-page .hub-empty-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--kf-navy);
    margin: 0 0 10px;
    line-height: 1.15;
}
body.hub-page .hub-empty-body {
    font-size: 14px;
    color: var(--kf-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}
body.hub-page .hub-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: var(--kf-navy);
    color: #f6f3ec;
    text-decoration: none;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--kf-navy);
    border-radius: 10px;
    min-height: 44px;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.hub-page .hub-empty-cta:hover {
    background: var(--kf-navy-deep);
    border-color: var(--kf-navy-deep);
}

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    body.hub-page .module-card,
    body.hub-page .module-card-arrow,
    body.hub-page .hub-logout-btn,
    body.hub-page .hub-empty-cta {
        transition: none;
    }
    body.hub-page .module-card:hover {
        transform: none;
    }
    body.hub-page .hub-wordmark-dot {
        animation: none;
        opacity: 1;
        box-shadow: none;
    }
}

/* ---------- Tablet / narrow desktop (≤960px) ---------- */
@media (max-width: 960px) {
    body.hub-page .hub-header { padding: 18px 28px; }
    body.hub-page .hub-content { padding: 48px 28px 64px; }
    body.hub-page .hub-intro { margin-bottom: 36px; }
    body.hub-page .hub-modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
    body.hub-page .hub-header {
        padding: 16px 20px;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        gap: 12px;
    }
    body.hub-page .hub-brand-logo { width: 44px; height: 30px; }
    body.hub-page .hub-wordmark { font-size: 19px; }
    body.hub-page .hub-header-user-info { display: none; }
    body.hub-page .hub-logout-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    body.hub-page .hub-content {
        padding: 32px 20px 48px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(48px, env(safe-area-inset-bottom));
    }
    body.hub-page .hub-intro { margin-bottom: 28px; }
    body.hub-page .hub-eyebrow { margin-bottom: 14px; font-size: 10px; }
    body.hub-page .hub-modules-title { font-size: 28px; }
    body.hub-page .hub-modules-sub { font-size: 14px; }

    body.hub-page .hub-modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    body.hub-page .module-card {
        padding: 22px;
        border-radius: 14px;
        min-height: 180px;
    }
    body.hub-page .module-card-dot { margin-bottom: 18px; }
    body.hub-page .module-card-name { font-size: 16px; }
    body.hub-page .module-card-desc { font-size: 13px; }
    body.hub-page .module-card-foot { margin-top: 18px; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    body.hub-page .hub-header { padding: 14px 16px; }
    body.hub-page .hub-brand-logo { width: 38px; height: 26px; }
    body.hub-page .hub-wordmark { font-size: 17px; }

    body.hub-page .hub-content {
        padding: 26px 16px 36px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(36px, env(safe-area-inset-bottom));
    }
    body.hub-page .hub-modules-title { font-size: 26px; }

    body.hub-page .hub-modules-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body.hub-page .module-card {
        padding: 20px;
        border-radius: 14px;
        min-height: 0;
    }
    body.hub-page .module-card-dot { margin-bottom: 16px; }
    body.hub-page .module-card-name { font-size: 16px; }
    body.hub-page .module-card-desc { font-size: 13px; }
}


/* ==========================================
   Finance Landing — Mercury / Brex register (fin1)
   ==========================================
   Premium fintech data surface. Scoped to body.finance-page
   so older .lr-stat-card / .data-table / .page-header rules
   keep their effect on every other surface.
   Reference: views/login.hbs + body.hub-page block above.
   ========================================== */

body.finance-page {
    --fin-accent: #5a7a5e;       /* muted sage — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.finance-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header ---------- */
body.finance-page .fin-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.finance-page .fin-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.finance-page .fin-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fin-accent);
    margin: 0 0 18px;
}

body.finance-page .fin-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

body.finance-page .fin-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 28ch;
}

body.finance-page .fin-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0;
    max-width: 65ch;
    line-height: 1.5;
}

body.finance-page .fin-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

body.finance-page .fin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.finance-page .fin-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.finance-page .fin-btn--primary:hover {
    background: var(--kf-navy-deep);
}
body.finance-page .fin-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.finance-page .fin-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.finance-page .fin-btn--ghost:hover {
    border-color: var(--kf-navy);
}
body.finance-page .fin-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* ---------- Flash notice ---------- */
body.finance-page .fin-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--fin-accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ----------
   We do NOT override grid-template-columns or .lr-stat-value font-size —
   the global auto-fit grid + clamp() rule does that work. */
body.finance-page .lr-stat-card.fin-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kill the global top stripe pseudo-element used by .lr-stat-card */
body.finance-page .lr-stat-card.fin-stat::before {
    content: none;
}

body.finance-page .lr-stat-card.fin-stat .fin-stat-body {
    min-width: 0;
    flex: 1;
}

body.finance-page .lr-stat-card.fin-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}

body.finance-page .lr-stat-card.fin-stat .lr-stat-value {
    /* keep the global clamp(20px, 2.1vw, 26px) */
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.finance-page .lr-stat-card.fin-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

body.finance-page .fin-stat-row-2 {
    margin-top: 20px;
}

/* ---------- Panel (table wrapper) ---------- */
body.finance-page .fin-panel {
    margin-top: 32px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

body.finance-page .fin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}

body.finance-page .fin-panel-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0 0 4px;
    line-height: 1.25;
}

body.finance-page .fin-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 0;
    letter-spacing: 0.005em;
}

body.finance-page .fin-panel-link {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 2px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-page .fin-panel-link:hover {
    color: var(--kf-accent);
    border-color: var(--kf-accent);
}

/* ---------- Table ---------- */
body.finance-page .fin-table-scroll {
    overflow-x: auto;
    position: relative;
}

body.finance-page .fin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
}

body.finance-page .fin-th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kf-paper);
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kf-muted);
    padding: 14px 20px;
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
}

body.finance-page .fin-th--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.finance-page .fin-td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    line-height: 1.4;
    vertical-align: middle;
}

body.finance-page .fin-table tbody tr:last-child .fin-td {
    border-bottom: none;
}

body.finance-page .fin-table tbody tr {
    transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.finance-page .fin-table tbody tr:hover {
    background: var(--kf-paper-deep);
}

body.finance-page .fin-td--name {
    color: var(--kf-navy);
    font-weight: 500;
    letter-spacing: -0.003em;
}

body.finance-page .fin-td--muted {
    color: var(--kf-muted);
}

body.finance-page .fin-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

body.finance-page .fin-td--strong {
    color: var(--kf-navy);
    font-weight: 500;
}

body.finance-page .fin-td-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}

body.finance-page .fin-inline-link {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-page .fin-inline-link:hover {
    color: var(--kf-accent);
    border-color: var(--kf-accent);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.finance-page .lr-stat-card.fin-stat,
    body.finance-page .fin-table tbody tr,
    body.finance-page .fin-btn,
    body.finance-page .fin-panel-link,
    body.finance-page .fin-inline-link { transition: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.finance-page .main {
        padding: 32px 28px 64px;
    }
    body.finance-page .fin-page-head {
        margin-bottom: 28px;
    }
    body.finance-page .fin-panel-head {
        padding: 16px 20px;
    }
    body.finance-page .fin-th { padding: 12px 16px; }
    body.finance-page .fin-td { padding: 14px 16px; }
    body.finance-page .fin-td-empty { padding: 28px 16px; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.finance-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.finance-page .fin-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.finance-page .fin-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.finance-page .fin-page-sub { font-size: 13px; }
    body.finance-page .fin-page-actions { width: 100%; }
    body.finance-page .lr-stat-card.fin-stat {
        padding: 18px 20px;
    }
    body.finance-page .fin-panel { border-radius: 12px; }
    body.finance-page .fin-panel-head {
        padding: 16px 18px;
        gap: 8px;
    }
    body.finance-page .fin-panel-title { font-size: 16px; }
    body.finance-page .fin-th { padding: 12px 14px; font-size: 10px; }
    body.finance-page .fin-td { padding: 14px 14px; font-size: 13px; }
    /* Right-edge fade hint that the table scrolls horizontally */
    body.finance-page .fin-table-scroll {
        background:
            linear-gradient(to right, transparent calc(100% - 28px), rgba(217, 210, 194, 0.55) 100%) no-repeat
            right center / 28px 100%;
    }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    body.finance-page .fin-btn { width: 100%; }
    body.finance-page .fin-page-actions { flex-direction: column; }
}


/* ==========================================
   Pursuits Dashboard — Mercury / Brex (pur1)
   ==========================================
   Premium fintech CRM surface. Scoped to body.pursuits-page
   so the older .lr-/.card/.page-header rules keep their effect
   on every other Pursuits sub-page (pipeline, contacts, etc.).
   Per-module accent: muted ochre #a08542 (Pursuits / Sales).
   Reference: views/finance/dashboard.hbs + the body.finance-page
   block above.
   ========================================== */

body.pursuits-page {
    --pur-accent: #a08542;       /* muted ochre — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.pursuits-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header ---------- */
body.pursuits-page .pur-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.pursuits-page .pur-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.pursuits-page .pur-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pur-accent);
    margin: 0 0 18px;
}

body.pursuits-page .pur-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

body.pursuits-page .pur-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 28ch;
}

body.pursuits-page .pur-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0 0 6px;
    max-width: 65ch;
    line-height: 1.5;
}

body.pursuits-page .pur-page-updated {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 0;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

body.pursuits-page .pur-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
body.pursuits-page .pur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .pur-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.pursuits-page .pur-btn--primary:hover {
    background: var(--kf-navy-deep);
}
body.pursuits-page .pur-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.pursuits-page .pur-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.pursuits-page .pur-btn--ghost:hover {
    border-color: var(--kf-navy);
}
body.pursuits-page .pur-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* ---------- Flash notice ---------- */
body.pursuits-page .pur-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--pur-accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ----------
   No override of grid-template-columns or .lr-stat-value font-size — the
   global auto-fit grid + clamp() handles that. */
body.pursuits-page .lr-stat-card.pur-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .lr-stat-card.pur-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.09);
    border-color: var(--kf-rule);
}

body.pursuits-page .lr-stat-card.pur-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14), 0 8px 28px rgba(11, 31, 58, 0.06);
}

/* Kill the global top stripe pseudo-element used by .lr-stat-card */
body.pursuits-page .lr-stat-card.pur-stat::before { content: none; }

/* Attention-bearing card (e.g., Follow-ups due > 0) wins the left stripe in
   the warning signal. Keep it edge-only — no card-wide tint. */
body.pursuits-page .lr-stat-card.pur-stat--attention {
    border-left-color: var(--kf-signal-warning);
}

body.pursuits-page .lr-stat-card.pur-stat .pur-stat-body {
    min-width: 0;
    flex: 1;
}

body.pursuits-page .lr-stat-card.pur-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}

body.pursuits-page .lr-stat-card.pur-stat .lr-stat-value {
    /* keep the global clamp(20px, 2.1vw, 26px) */
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.pursuits-page .lr-stat-card.pur-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* ---------- Two-column row (Follow-up queue + Quick actions) ---------- */
body.pursuits-page .pur-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 28px;
}

/* ---------- Panel ---------- */
body.pursuits-page .pur-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

body.pursuits-page .pur-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}

body.pursuits-page .pur-panel-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0 0 4px;
    line-height: 1.25;
}

body.pursuits-page .pur-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 0;
    letter-spacing: 0.005em;
}

body.pursuits-page .pur-panel-link {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 2px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-panel-link:hover {
    color: var(--kf-accent);
    border-color: var(--kf-accent);
}

body.pursuits-page .pur-panel-body { padding: 8px 24px 20px; }

body.pursuits-page .pur-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Follow-up rows ---------- */
body.pursuits-page .pur-followup-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pursuits-page .pur-followup-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
}

body.pursuits-page .pur-followup-row:first-child { padding-top: 12px; }
body.pursuits-page .pur-followup-row:last-child { border-bottom: none; padding-bottom: 4px; }

body.pursuits-page .pur-followup-form { display: inline-flex; }

body.pursuits-page .pur-followup-check {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-followup-check:hover {
    color: var(--kf-signal-positive);
    background: var(--kf-signal-positive-bg);
    border-color: var(--kf-signal-positive);
}
body.pursuits-page .pur-followup-check:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14);
}

body.pursuits-page .pur-followup-body {
    flex: 1;
    min-width: 0;
}

body.pursuits-page .pur-followup-contact {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0 0 4px;
    letter-spacing: -0.003em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pursuits-page .pur-followup-notes {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Status pills (signal palette) ---------- */
body.pursuits-page .pur-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}
body.pursuits-page .pur-pill--warn {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.pursuits-page .pur-pill--positive {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.pursuits-page .pur-pill--negative {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.pursuits-page .pur-pill--info {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}

/* ---------- Quick action links ---------- */
body.pursuits-page .pur-quick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 20px;
}

body.pursuits-page .pur-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.003em;
    min-height: 44px;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-quick-link:hover {
    background: var(--kf-paper-deep);
    color: var(--kf-navy);
}
body.pursuits-page .pur-quick-link:hover .pur-quick-arrow { color: var(--kf-accent); transform: translateX(2px); }
body.pursuits-page .pur-quick-link:focus-visible {
    outline: none;
    background: var(--kf-paper-deep);
    box-shadow: 0 0 0 2px rgba(11, 31, 58, 0.14);
}

body.pursuits-page .pur-quick-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-quick-link:hover .pur-quick-icon {
    color: var(--pur-accent);
    background: #f4ecdc;
}

body.pursuits-page .pur-quick-label { flex: 1; min-width: 0; }

body.pursuits-page .pur-quick-arrow {
    color: var(--kf-muted);
    font-size: 16px;
    line-height: 1;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Modal (Log activity) ---------- */
body.pursuits-page .pur-modal,
body .pur-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.42);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 24px;
    overflow-y: auto;
}

body.pursuits-page .pur-modal-panel,
body .pur-modal .pur-modal-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.18);
    position: relative;
    font-family: "Source Sans 3", sans-serif;
}

body.pursuits-page .pur-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--kf-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-modal-close:hover {
    color: var(--kf-navy);
    background: var(--kf-paper-deep);
}

body.pursuits-page .pur-modal-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.2;
    color: var(--kf-navy);
    margin: 0 0 6px;
}

body.pursuits-page .pur-modal-sub {
    font-size: 13px;
    color: var(--kf-muted);
    margin: 0 0 20px;
    line-height: 1.5;
    max-width: 48ch;
}

/* ---------- Form (modal) ---------- */
body.pursuits-page .pur-form { display: flex; flex-direction: column; gap: 16px; }

body.pursuits-page .pur-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

body.pursuits-page .pur-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

body.pursuits-page .pur-field label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
}

body.pursuits-page .pur-field input,
body.pursuits-page .pur-field select,
body.pursuits-page .pur-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .pur-field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

body.pursuits-page .pur-multiselect { min-height: 92px; padding: 8px 10px; }

body.pursuits-page .pur-field input:focus,
body.pursuits-page .pur-field select:focus,
body.pursuits-page .pur-field textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}

body.pursuits-page .pur-field-hint {
    font-size: 11px;
    color: var(--kf-muted);
    margin: 0;
    letter-spacing: 0.01em;
}

body.pursuits-page .pur-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.pursuits-page .lr-stat-card.pur-stat,
    body.pursuits-page .pur-btn,
    body.pursuits-page .pur-panel-link,
    body.pursuits-page .pur-quick-link,
    body.pursuits-page .pur-quick-icon,
    body.pursuits-page .pur-quick-arrow,
    body.pursuits-page .pur-followup-check,
    body.pursuits-page .pur-modal-close,
    body.pursuits-page .pur-field input,
    body.pursuits-page .pur-field select,
    body.pursuits-page .pur-field textarea { transition: none; }
    body.pursuits-page .lr-stat-card.pur-stat:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.pursuits-page .main { padding: 32px 28px 64px; }
    body.pursuits-page .pur-page-head { margin-bottom: 28px; }
    body.pursuits-page .pur-2col { grid-template-columns: 1fr; gap: 18px; }
    body.pursuits-page .pur-panel-head { padding: 16px 20px; }
    body.pursuits-page .pur-panel-body { padding: 6px 20px 16px; }
    body.pursuits-page .pur-quick { padding: 10px 10px 16px; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.pursuits-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.pursuits-page .pur-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.pursuits-page .pur-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.pursuits-page .pur-page-sub { font-size: 13px; }
    body.pursuits-page .pur-page-actions { width: 100%; }
    body.pursuits-page .pur-btn { width: 100%; }
    body.pursuits-page .lr-stat-card.pur-stat { padding: 18px 20px; }
    body.pursuits-page .pur-panel { border-radius: 12px; }
    body.pursuits-page .pur-panel-head { padding: 16px 18px; gap: 8px; }
    body.pursuits-page .pur-panel-title { font-size: 16px; }
    body.pursuits-page .pur-panel-body { padding: 4px 18px 14px; }
    body.pursuits-page .pur-modal { padding: 20px 14px 24px; }
    body.pursuits-page .pur-modal-panel { padding: 22px 20px 20px; border-radius: 14px; }
    body.pursuits-page .pur-modal-title { font-size: 18px; }
    body.pursuits-page .pur-form-row { grid-template-columns: 1fr; gap: 14px; }
    body.pursuits-page .pur-field input,
    body.pursuits-page .pur-field select,
    body.pursuits-page .pur-field textarea { font-size: 16px; }
    body.pursuits-page .pur-form-actions { flex-direction: column-reverse; }
    body.pursuits-page .pur-form-actions .pur-btn { width: 100%; }
}

/* ==========================================
   Pursuits — Team activity section (pur2)
   ==========================================
   Mercury-baseline restyle of the {{> ta_section}} partial. Consumed only
   by views/oss/pursuits/dashboard.hbs today, so scoped under body.pursuits-page.
   If a second module ever consumes ta_section it must add its own scoped block.
   ========================================== */

body.pursuits-page .ta-section {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.pursuits-page .ta-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kf-rule-soft);
}

body.pursuits-page .ta-section-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body.pursuits-page .ta-section-eyebrow {
    margin: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.pursuits-page .ta-section-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--kf-navy);
}

body.pursuits-page .ta-section-range {
    margin: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Filter bar --- */
body.pursuits-page .ta-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.04);
}

body.pursuits-page .ta-period-toggle {
    display: inline-flex;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

body.pursuits-page .ta-period-btn {
    padding: 6px 14px;
    border: 0;
    background: transparent;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 999px;
    color: var(--kf-muted);
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.01em;
}

body.pursuits-page .ta-period-btn:hover { color: var(--kf-ink); }

body.pursuits-page .ta-period-btn.is-active {
    background: var(--kf-paper);
    color: var(--kf-navy);
    box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
    font-weight: 600;
}

body.pursuits-page .ta-select,
body.pursuits-page .ta-input {
    height: 36px;
    min-width: 200px;
    padding: 0 12px;
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    background: var(--kf-paper);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-input { min-width: 0; }

body.pursuits-page .ta-select:focus,
body.pursuits-page .ta-input:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.08);
}

body.pursuits-page .ta-custom-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.pursuits-page .ta-range-sep {
    font-size: 12px;
    color: var(--kf-muted);
    font-weight: 500;
}

body.pursuits-page .ta-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-btn--primary {
    background: var(--kf-navy);
    color: #ffffff;
    border-color: var(--kf-navy);
}

body.pursuits-page .ta-btn--primary:hover { background: var(--kf-navy-deep); border-color: var(--kf-navy-deep); }

/* --- KPI grid: make .lr-stat-card act as a clickable card button --- */
body.pursuits-page .ta-kpi-grid { margin-top: 0; }

body.pursuits-page .ta-drill-card {
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

body.pursuits-page .ta-drill-card:focus-visible {
    outline: 2px solid var(--kf-navy);
    outline-offset: 3px;
}

/* --- Delta chip (used by ta_delta.hbs partial) --- */
body.pursuits-page .ta-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 8px 0 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

body.pursuits-page .ta-delta-glyph {
    font-size: 9px;
    line-height: 1;
    transform: translateY(-1px);
}

body.pursuits-page .ta-delta-num {
    font-weight: 600;
    font-size: 12px;
}

body.pursuits-page .ta-delta-period {
    color: var(--kf-muted);
    font-weight: 500;
}

body.pursuits-page .ta-delta--up   .ta-delta-glyph,
body.pursuits-page .ta-delta--up   .ta-delta-num { color: var(--kf-signal-positive); }
body.pursuits-page .ta-delta--down .ta-delta-glyph,
body.pursuits-page .ta-delta--down .ta-delta-num { color: var(--kf-signal-negative); }
body.pursuits-page .ta-delta--flat .ta-delta-glyph,
body.pursuits-page .ta-delta--flat .ta-delta-num { color: var(--kf-muted); }

/* --- Panel (flat, hairline-separated, replaces .card-in-card) --- */
body.pursuits-page .ta-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.04);
    overflow: hidden;
}

body.pursuits-page .ta-panel-head {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--kf-rule-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.pursuits-page .ta-panel-title {
    margin: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-navy);
    letter-spacing: -0.005em;
}

body.pursuits-page .ta-panel-sub {
    margin: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--kf-muted);
}

body.pursuits-page .ta-panel-body { padding: 18px 24px 20px; }

body.pursuits-page .ta-panel-footnote {
    margin: 0;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--kf-rule-soft);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11.5px;
    color: var(--kf-muted);
    line-height: 1.55;
}

body.pursuits-page .ta-empty {
    margin: 0;
    padding: 24px 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--kf-muted);
    text-align: center;
}

/* --- Outreach channels --- */
body.pursuits-page .ta-channel-panel .ta-panel-body { padding: 16px 24px 20px; }

body.pursuits-page .ta-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin-top: 2px;
}

body.pursuits-page .ta-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-right: 1px solid var(--kf-rule-soft);
    min-width: 0;
}

body.pursuits-page .ta-channel:last-child { border-right: 0; }

@media (max-width: 900px) {
    body.pursuits-page .ta-channel { border-right: 0; border-bottom: 1px solid var(--kf-rule-soft); }
    body.pursuits-page .ta-channel:last-child { border-bottom: 0; }
}

body.pursuits-page .ta-channel-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--kf-muted);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 50%;
    background: var(--kf-paper-deep);
}

body.pursuits-page .ta-channel-mark[data-channel="email"]    { color: #486b8a; }
body.pursuits-page .ta-channel-mark[data-channel="whatsapp"] { color: #3f6b46; }
body.pursuits-page .ta-channel-mark[data-channel="calls"]    { color: #a37250; }
body.pursuits-page .ta-channel-mark[data-channel="events"]   { color: #6e4a6a; }

body.pursuits-page .ta-channel-text { min-width: 0; }

body.pursuits-page .ta-channel-value {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--kf-navy);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

body.pursuits-page .ta-channel-label {
    margin: 4px 0 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
}

/* --- Two-column trend + mix --- */
body.pursuits-page .ta-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 900px) { body.pursuits-page .ta-2col { grid-template-columns: 1fr; } }

/* --- Trend chart --- */
body.pursuits-page .ta-line-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 12px;
}

body.pursuits-page .ta-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11.5px;
    color: var(--kf-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}

body.pursuits-page .ta-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

body.pursuits-page .ta-legend-dot--outreach  { background: #486b8a; }
body.pursuits-page .ta-legend-dot--leads     { background: #a08542; }
body.pursuits-page .ta-legend-dot--followups { background: #3f6b46; }

body.pursuits-page .ta-line-svg {
    width: 100%;
    height: 220px;
    display: block;
}

/* --- Donut --- */
body.pursuits-page .ta-donut-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
}

body.pursuits-page .ta-donut-svg {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

body.pursuits-page .ta-donut-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

body.pursuits-page .ta-donut-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    color: var(--kf-ink);
    font-weight: 500;
}

body.pursuits-page .ta-donut-label {
    color: var(--kf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.pursuits-page .ta-donut-pct {
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- Performance table --- */
body.pursuits-page .ta-table-scroll { padding: 0; overflow-x: auto; }

body.pursuits-page .ta-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

body.pursuits-page .ta-table th {
    text-align: left;
    padding: 14px 16px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--kf-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
}

body.pursuits-page .ta-table th:first-child { padding-left: 24px; }
body.pursuits-page .ta-table th:last-child  { padding-right: 24px; }

body.pursuits-page .ta-table th.num,
body.pursuits-page .ta-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.pursuits-page .ta-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    vertical-align: middle;
}

body.pursuits-page .ta-table td:first-child { padding-left: 24px; }
body.pursuits-page .ta-table td:last-child  { padding-right: 24px; }

body.pursuits-page .ta-table tbody tr:last-child td { border-bottom: 0; }

body.pursuits-page .ta-table tbody tr {
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-table tbody tr:hover { background: var(--kf-paper-deep); }

body.pursuits-page .ta-member-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.pursuits-page .ta-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    color: var(--kf-navy);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

body.pursuits-page .ta-member-name {
    font-weight: 500;
    color: var(--kf-navy);
}

body.pursuits-page .ta-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 10px;
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

body.pursuits-page .ta-share-col { min-width: 200px; }

body.pursuits-page .ta-share-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.pursuits-page .ta-share-track {
    flex: 1;
    height: 4px;
    background: var(--kf-paper-deep);
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
}

body.pursuits-page .ta-share-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--kf-accent);
    transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-share-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--kf-navy);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

/* --- Drill-down modal --- */
body.pursuits-page .ta-drill-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.42);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 16px;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body.pursuits-page .ta-drill-modal.open { display: flex; }

body.pursuits-page .ta-drill-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 16px;
    width: 100%;
    max-width: 980px;
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.18);
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 76px);
    overflow: hidden;
}

body.pursuits-page .ta-drill-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-shrink: 0;
}

body.pursuits-page .ta-drill-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    letter-spacing: -0.01em;
}

body.pursuits-page .ta-drill-meta {
    margin: 4px 0 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
}

body.pursuits-page .ta-drill-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    color: var(--kf-muted);
    line-height: 1;
    padding: 4px 10px;
    border-radius: 8px;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-drill-close:hover { color: var(--kf-navy); background: var(--kf-paper-deep); }

/* padding-top is 0 so the sticky thead can sit flush against the modal head's
   border-bottom — any padding here scrolls with content and creates a visible
   gap above the sticky header during scroll. */
body.pursuits-page .ta-drill-body {
    padding: 0 24px 24px;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.pursuits-page .ta-drill-empty,
body.pursuits-page .ta-drill-loading {
    padding: 48px 0;
    text-align: center;
    color: var(--kf-muted);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

/* border-collapse: separate is required for the sticky <th> to stay opaque
   over scrolling rows — Chrome's sticky implementation paints tbody cells over
   thead when borders are collapsed. */
body.pursuits-page .ta-drill-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

body.pursuits-page .ta-drill-table th {
    text-align: left;
    padding: 16px 12px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--kf-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--kf-rule-soft);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--kf-paper);
    background-clip: padding-box;
}

body.pursuits-page .ta-drill-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    vertical-align: top;
}

body.pursuits-page .ta-drill-table tbody tr:last-child td { border-bottom: 0; }
body.pursuits-page .ta-drill-table tbody tr:hover { background: var(--kf-paper-deep); }

body.pursuits-page .ta-drill-table td a {
    color: var(--kf-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.pursuits-page .ta-drill-table td a:hover { border-bottom-color: var(--kf-accent); }

body.pursuits-page .ta-drill-table td.ta-drill-notes {
    max-width: 320px;
    color: var(--kf-muted);
    white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
    body.pursuits-page .ta-period-btn,
    body.pursuits-page .ta-select,
    body.pursuits-page .ta-input,
    body.pursuits-page .ta-btn,
    body.pursuits-page .ta-share-bar,
    body.pursuits-page .ta-table tbody tr,
    body.pursuits-page .ta-drill-close,
    body.pursuits-page .ta-drill-table td a { transition: none; }
}

@media (max-width: 768px) {
    body.pursuits-page .ta-section { gap: 16px; }
    body.pursuits-page .ta-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    body.pursuits-page .ta-filterbar { padding: 12px; }
    body.pursuits-page .ta-select { min-width: 0; width: 100%; }
    body.pursuits-page .ta-custom-range { flex-wrap: wrap; width: 100%; }
    body.pursuits-page .ta-panel-head { padding: 16px 18px 12px; }
    body.pursuits-page .ta-panel-body { padding: 14px 18px 16px; }
    body.pursuits-page .ta-channel-panel .ta-panel-body { padding: 0; }
    body.pursuits-page .ta-channel { padding: 14px 18px; }
    body.pursuits-page .ta-table th:first-child,
    body.pursuits-page .ta-table td:first-child { padding-left: 18px; }
    body.pursuits-page .ta-table th:last-child,
    body.pursuits-page .ta-table td:last-child { padding-right: 18px; }
    body.pursuits-page .ta-donut-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ==========================================
   Pursuits sub-pages — Mercury baseline (pur6)
   ==========================================
   Adds the primitive set the sub-pages need: toolbar/filter, table,
   status pills (stage signal), kanban geometry, detail head, info grid,
   form section card, back-link, list rows (followups/intel/activity),
   and the chip multi-select. All scoped under body.pursuits-page so
   nothing leaks to other modules.
   Reuses tokens & primitives from the body.pursuits-page block above
   (pur-page-head, pur-btn, pur-panel, pur-field, pur-modal, pur-stat).
   ========================================== */

/* ---------- Sub-page container & back link ---------- */
body.pursuits-page .pur-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    padding: 4px 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kf-muted);
    text-decoration: none;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-back-link:hover { color: var(--kf-navy); }
body.pursuits-page .pur-back-link svg { width: 14px; height: 14px; }

/* ---------- Toolbar (search + filters + actions) ---------- */
body.pursuits-page .pur-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}

body.pursuits-page .pur-toolbar-meta {
    margin-left: auto;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

body.pursuits-page .pur-input,
body.pursuits-page .pur-select {
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.pursuits-page .pur-input { min-width: 220px; flex: 1 1 240px; max-width: 420px; }
body.pursuits-page .pur-select { min-width: 150px; padding-right: 32px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
body.pursuits-page .pur-input:focus,
body.pursuits-page .pur-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background-color: #fbf8f1;
}

/* Filter pill row (e.g. intel type filter) */
body.pursuits-page .pur-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}
body.pursuits-page .pur-filter-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-filter-pill:hover { border-color: var(--kf-navy); color: var(--kf-navy); }
body.pursuits-page .pur-filter-pill.is-active {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: var(--kf-paper);
}

/* ---------- Table ---------- */
body.pursuits-page .pur-table-wrap {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.pursuits-page .pur-table-scroll { overflow-x: auto; }

body.pursuits-page .pur-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Source Sans 3", sans-serif;
}

body.pursuits-page .pur-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper);
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
body.pursuits-page .pur-table thead th:first-child { padding-left: 24px; }
body.pursuits-page .pur-table thead th:last-child { padding-right: 24px; }

body.pursuits-page .pur-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--kf-ink);
    border-bottom: 1px solid var(--kf-rule-soft);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
body.pursuits-page .pur-table tbody td:first-child { padding-left: 24px; }
body.pursuits-page .pur-table tbody td:last-child { padding-right: 24px; }
body.pursuits-page .pur-table tbody tr:last-child td { border-bottom: none; }
body.pursuits-page .pur-table tbody tr { transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
body.pursuits-page .pur-table tbody tr:hover { background: var(--kf-paper-deep); }
body.pursuits-page .pur-table tbody td.pur-cell-wrap { white-space: normal; }

body.pursuits-page .pur-table-link {
    color: var(--kf-navy);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.003em;
}
body.pursuits-page .pur-table-link:hover { color: var(--kf-accent); }
body.pursuits-page .pur-table-mail {
    color: var(--kf-accent);
    text-decoration: none;
    font-size: 12.5px;
}
body.pursuits-page .pur-table-mail:hover { text-decoration: underline; }

body.pursuits-page .pur-table-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Status pills (stage signal) ----------
   Reuses semantic --kf-signal-* tokens. Generic .pur-status-pill is the
   base; modifier classes map pursuit stages to signal tone. */
body.pursuits-page .pur-status-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
}
body.pursuits-page .pur-status-pill--info,
body.pursuits-page .pur-status-pill--active,
body.pursuits-page .pur-status-pill--prospect {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}
body.pursuits-page .pur-status-pill--warn,
body.pursuits-page .pur-status-pill--pending,
body.pursuits-page .pur-status-pill--qualifying,
body.pursuits-page .pur-status-pill--proposal,
body.pursuits-page .pur-status-pill--paused {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.pursuits-page .pur-status-pill--positive,
body.pursuits-page .pur-status-pill--mandate,
body.pursuits-page .pur-status-pill--won,
body.pursuits-page .pur-status-pill--completed {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.pursuits-page .pur-status-pill--negative,
body.pursuits-page .pur-status-pill--overdue,
body.pursuits-page .pur-status-pill--lost {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.pursuits-page .pur-status-pill--neutral,
body.pursuits-page .pur-status-pill--watch {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    border: 1px solid var(--kf-rule-soft);
}

/* ---------- Member avatar (initial chip) ---------- */
body.pursuits-page .pur-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--kf-navy);
    color: var(--kf-paper);
    font-family: "Source Sans 3", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}
body.pursuits-page .pur-avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
body.pursuits-page .pur-avatar-row { display: inline-flex; gap: 4px; align-items: center; }

/* ---------- Heat / warmth dots ---------- */
body.pursuits-page .pur-heat { display: inline-flex; gap: 3px; }
body.pursuits-page .pur-heat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kf-signal-negative);
    display: inline-block;
}

/* ---------- Generic list row (followups, intel, activity) ---------- */
body.pursuits-page .pur-list { list-style: none; margin: 0; padding: 0; }
body.pursuits-page .pur-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.pursuits-page .pur-row:last-child { border-bottom: none; }
body.pursuits-page .pur-row-body { flex: 1; min-width: 0; }
body.pursuits-page .pur-row-title {
    margin: 0 0 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--kf-navy);
    letter-spacing: -0.003em;
}
body.pursuits-page .pur-row-sub {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    line-height: 1.5;
}
body.pursuits-page .pur-row-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    color: var(--kf-muted);
    margin: 0 0 4px;
}
body.pursuits-page .pur-row-date {
    font-variant-numeric: tabular-nums;
    color: var(--kf-muted);
}
body.pursuits-page .pur-row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
body.pursuits-page .pur-row-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.pursuits-page .pur-row-icon-btn:hover {
    color: var(--kf-signal-positive);
    background: var(--kf-signal-positive-bg);
    border-color: var(--kf-signal-positive);
}
body.pursuits-page .pur-row-icon-btn.pur-row-icon-btn--danger:hover {
    color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
    border-color: var(--kf-signal-negative);
}

/* Edge stripe on whole-section warning bands (overdue followups list, etc.) */
body.pursuits-page .pur-panel--warn { border-left: 2px solid var(--kf-signal-warning); }
body.pursuits-page .pur-panel--negative { border-left: 2px solid var(--kf-signal-negative); }

/* ---------- Tabs (pipeline active/watch/closed) ---------- */
body.pursuits-page .pur-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--kf-rule-soft);
    margin: 0 0 20px;
}
body.pursuits-page .pur-tab {
    background: none;
    border: none;
    padding: 12px 16px;
    margin-bottom: -1px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kf-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.003em;
}
body.pursuits-page .pur-tab:hover { color: var(--kf-navy); }
body.pursuits-page .pur-tab.is-active {
    color: var(--kf-navy);
    border-bottom-color: var(--pur-accent);
}

/* ---------- Pipeline pursuit card grid ---------- */
body.pursuits-page .pur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

body.pursuits-page .pur-pursuit-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.05);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-pursuit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(11, 31, 58, 0.08);
    border-color: var(--kf-rule);
}
body.pursuits-page .pur-pursuit-card-body { padding: 18px 20px 14px; flex: 1; min-width: 0; }
body.pursuits-page .pur-pursuit-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
body.pursuits-page .pur-pursuit-name {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--kf-navy);
    min-width: 0;
}
body.pursuits-page .pur-pursuit-name a { color: inherit; text-decoration: none; }
body.pursuits-page .pur-pursuit-name a:hover { color: var(--kf-accent); }
body.pursuits-page .pur-pursuit-meta {
    margin: 0 0 6px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    line-height: 1.45;
}
body.pursuits-page .pur-pursuit-meta.is-size { color: var(--kf-signal-positive); font-weight: 500; }
body.pursuits-page .pur-pursuit-meta.is-lease { color: var(--kf-signal-info); font-weight: 500; }
body.pursuits-page .pur-pursuit-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    margin: 0 4px 4px 0;
    text-decoration: none;
}
body.pursuits-page .pur-pursuit-tag.is-campaign { color: var(--kf-accent); }
body.pursuits-page .pur-pursuit-tag:hover { border-color: var(--kf-rule); }
body.pursuits-page .pur-pursuit-note {
    margin: 6px 0 8px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.pursuits-page .pur-pursuit-card-foot {
    padding: 10px 16px 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--kf-rule-soft);
}

body.pursuits-page .pur-stage-select {
    width: 100%;
    height: 32px;
    padding: 0 30px 0 10px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 8px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-ink);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 4px;
}
body.pursuits-page .pur-stage-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* Compact button used inside cards / row actions */
body.pursuits-page .pur-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1;
}
body.pursuits-page .pur-btn-sm:hover {
    border-color: var(--kf-navy);
    color: var(--kf-navy);
}
body.pursuits-page .pur-btn-sm--positive {
    background: var(--kf-signal-positive-bg);
    border-color: transparent;
    color: var(--kf-signal-positive);
}
body.pursuits-page .pur-btn-sm--positive:hover {
    border-color: var(--kf-signal-positive);
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.pursuits-page .pur-btn-sm--negative {
    background: var(--kf-signal-negative-bg);
    border-color: transparent;
    color: var(--kf-signal-negative);
}
body.pursuits-page .pur-btn-sm--negative:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.pursuits-page .pur-btn-sm--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--kf-muted);
}
body.pursuits-page .pur-btn-sm--ghost:hover {
    color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

/* Banner above watch tab */
body.pursuits-page .pur-banner {
    background: var(--kf-signal-warning-bg);
    border: 1px solid var(--kf-signal-warning);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 18px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-signal-warning);
    line-height: 1.5;
}

/* Closed-tab outcome summary */
body.pursuits-page .pur-outcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 24px;
}
body.pursuits-page .pur-outcome {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--pur-accent));
    border-radius: 14px;
    padding: 22px 24px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.05);
}
body.pursuits-page .pur-outcome-value {
    font-family: "Source Sans 3", sans-serif;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    margin: 0 0 4px;
}
body.pursuits-page .pur-outcome-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}

/* ---------- Campaign card (used in campaigns.hbs via partial) ---------- */
body.pursuits-page .pur-campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}
body.pursuits-page .pur-campaign-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.05);
    padding: 20px 22px;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(11, 31, 58, 0.08);
    border-color: var(--kf-rule);
}
body.pursuits-page .pur-campaign-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
body.pursuits-page .pur-campaign-name {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--kf-navy);
    min-width: 0;
}
body.pursuits-page .pur-campaign-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
body.pursuits-page .pur-campaign-target,
body.pursuits-page .pur-campaign-description,
body.pursuits-page .pur-campaign-dates {
    margin: 0 0 6px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    line-height: 1.5;
}
body.pursuits-page .pur-campaign-target { color: var(--kf-accent); font-weight: 500; }
body.pursuits-page .pur-campaign-dates { font-size: 11.5px; letter-spacing: 0.005em; }
body.pursuits-page .pur-campaign-stats {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
}
body.pursuits-page .pur-campaign-stat {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule));
    text-align: left;
    box-sizing: border-box;
    min-width: 0;
}
body.pursuits-page .pur-campaign-stat-num {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: 0 0 2px;
}
body.pursuits-page .pur-campaign-stat-lbl {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
}

/* Inner pursuit list inside campaign card */
body.pursuits-page .pur-campaign-pursuits { margin-top: 14px; border-top: 1px solid var(--kf-rule-soft); padding-top: 10px; }
body.pursuits-page .pur-campaign-pursuits summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    padding: 4px 0;
}
body.pursuits-page .pur-campaign-pursuits summary::-webkit-details-marker { display: none; }
body.pursuits-page .pur-campaign-pursuits .pur-cp-toggle { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1); font-size: 12px; }
body.pursuits-page .pur-campaign-pursuits[open] .pur-cp-toggle { transform: rotate(90deg); }
body.pursuits-page .pur-cp-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
body.pursuits-page .pur-cp-table tr { border-top: 1px solid var(--kf-rule-soft); }
body.pursuits-page .pur-cp-table tr:first-child { border-top: none; }
body.pursuits-page .pur-cp-table td { padding: 8px 4px; font-size: 12.5px; vertical-align: middle; color: var(--kf-ink); }
body.pursuits-page .pur-cp-company a { color: var(--kf-navy); text-decoration: none; }
body.pursuits-page .pur-cp-company a:hover { color: var(--kf-accent); }
body.pursuits-page .pur-cp-size { color: var(--kf-muted); text-align: right; white-space: nowrap; }
body.pursuits-page .pur-cp-value { color: var(--kf-accent); font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.pursuits-page .pur-cp-empty { color: var(--kf-rule); }
body.pursuits-page .pur-cp-stage { text-align: right; }
body.pursuits-page .pur-cp-foot { margin-top: 8px; text-align: right; }
body.pursuits-page .pur-cp-foot a { font-family: "Source Sans 3", sans-serif; font-size: 11.5px; color: var(--kf-accent); text-decoration: none; }
body.pursuits-page .pur-cp-foot a:hover { text-decoration: underline; }

/* Completed-campaigns disclosure */
body.pursuits-page .pur-completed-campaigns {
    margin-top: 32px;
    border-top: 1px solid var(--kf-rule-soft);
    padding-top: 20px;
}
body.pursuits-page .pur-completed-campaigns summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.pursuits-page .pur-completed-campaigns summary::-webkit-details-marker { display: none; }
body.pursuits-page .pur-completed-campaigns summary:hover { border-color: var(--kf-rule); color: var(--kf-navy); }
body.pursuits-page .pur-completed-campaigns .pur-cc-toggle { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1); font-size: 12px; }
body.pursuits-page .pur-completed-campaigns[open] .pur-cc-toggle { transform: rotate(90deg); }
body.pursuits-page .pur-completed-campaigns[open] .pur-campaign-card { opacity: 0.88; }

/* ---------- Detail page primitives ---------- */
body.pursuits-page .pur-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 24px;
}
body.pursuits-page .pur-detail-head-text { min-width: 0; flex: 1 1 320px; }
body.pursuits-page .pur-detail-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

body.pursuits-page .pur-detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}

body.pursuits-page .pur-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px 24px;
}
body.pursuits-page .pur-info-label {
    margin: 0 0 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.pursuits-page .pur-info-value {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
}
body.pursuits-page .pur-info-value.is-money { color: var(--kf-signal-positive); font-variant-numeric: tabular-nums; }
body.pursuits-page .pur-info-value.is-date { color: var(--kf-signal-info); font-variant-numeric: tabular-nums; }
body.pursuits-page .pur-info-value a { color: var(--kf-accent); text-decoration: none; }
body.pursuits-page .pur-info-value a:hover { text-decoration: underline; }

body.pursuits-page .pur-info-note {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--kf-rule-soft);
}
body.pursuits-page .pur-info-note p {
    margin: 6px 0 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1.65;
    white-space: pre-wrap;
}

body.pursuits-page .pur-detail-side .pur-panel { position: sticky; top: 24px; }
body.pursuits-page .pur-side-title {
    margin: 0 0 14px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.pursuits-page .pur-side-actions { display: flex; flex-direction: column; gap: 8px; }
body.pursuits-page .pur-side-actions .pur-btn { width: 100%; }

/* Pursuit detail nested 2col (campaigns/members) */
body.pursuits-page .pur-detail-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 0 0 24px;
}

/* Chip strip (for assigned members, linked campaigns) */
body.pursuits-page .pur-chip-strip { display: flex; gap: 6px; flex-wrap: wrap; }
body.pursuits-page .pur-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.005em;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.pursuits-page .pur-chip:hover { border-color: var(--kf-rule); color: var(--kf-accent); }

/* ---------- Form page wrapper ---------- */
body.pursuits-page .pur-form-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    padding: 0;
    overflow: hidden;
    margin: 0 0 24px;
}
body.pursuits-page .pur-form-card-head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.pursuits-page .pur-form-card-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
}
body.pursuits-page .pur-form-card-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
body.pursuits-page .pur-form-actions--page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 24px 0 0;
}

/* Chip-style multi-select (members, campaigns inside form/contact card) */
body.pursuits-page .pur-chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
body.pursuits-page .pur-chip-picker label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.005em;
    text-transform: none;
    cursor: pointer;
    transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.pursuits-page .pur-chip-picker label.is-on {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: var(--kf-paper);
}
body.pursuits-page .pur-chip-picker label input[type=checkbox] { display: none; }

/* Searchable combobox dropdown */
body.pursuits-page .pur-combo { position: relative; flex: 1; min-width: 0; }
body.pursuits-page .pur-combo-input { padding-right: 32px; }
body.pursuits-page .pur-combo-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: var(--kf-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
body.pursuits-page .pur-combo-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.14);
    margin-top: 0;
}
body.pursuits-page .pur-combo-item {
    padding: 10px 14px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    cursor: pointer;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.pursuits-page .pur-combo-item:last-child { border-bottom: none; }
body.pursuits-page .pur-combo-item.is-hi,
body.pursuits-page .pur-combo-item:hover { background: var(--kf-paper-deep); }
body.pursuits-page .pur-combo-item-sub { font-size: 11.5px; color: var(--kf-muted); margin-top: 2px; }
body.pursuits-page .pur-combo-empty { padding: 12px 14px; font-size: 12.5px; color: var(--kf-muted); }

/* Stat row reuse: "metric" cards inside campaign card stage stats */
body.pursuits-page .pur-campaign-stat--active { --accent: #3a5a7d; }
body.pursuits-page .pur-campaign-stat--won { --accent: #3f6b46; }
body.pursuits-page .pur-campaign-stat--lost { --accent: #8d3e3e; }
body.pursuits-page .pur-campaign-stat--total { --accent: var(--pur-accent); }

/* ---------- Settings page primitives ---------- */
body.pursuits-page .pur-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}
body.pursuits-page .pur-settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.pursuits-page .pur-settings-item:last-child { border-bottom: none; }
body.pursuits-page .pur-settings-item-body { flex: 1; min-width: 0; }
body.pursuits-page .pur-settings-item-name {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--kf-navy);
    letter-spacing: -0.003em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pursuits-page .pur-settings-item-sub {
    margin: 2px 0 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    color: var(--kf-muted);
    letter-spacing: 0.005em;
}

/* Avatar bubble for settings (members list) */
body.pursuits-page .pur-settings-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--kf-navy);
    color: var(--kf-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.pursuits-page .pur-pursuit-card,
    body.pursuits-page .pur-campaign-card,
    body.pursuits-page .pur-tab,
    body.pursuits-page .pur-row-icon-btn,
    body.pursuits-page .pur-btn-sm,
    body.pursuits-page .pur-filter-pill,
    body.pursuits-page .pur-chip-picker label,
    body.pursuits-page .pur-input,
    body.pursuits-page .pur-select,
    body.pursuits-page .pur-table tbody tr { transition: none; }
    body.pursuits-page .pur-pursuit-card:hover,
    body.pursuits-page .pur-campaign-card:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.pursuits-page .pur-detail-layout { grid-template-columns: 1fr; }
    body.pursuits-page .pur-detail-side .pur-panel { position: static; }
    body.pursuits-page .pur-detail-2col { grid-template-columns: 1fr; }
    body.pursuits-page .pur-outcome-grid { grid-template-columns: 1fr; }
    body.pursuits-page .pur-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.pursuits-page .pur-toolbar { gap: 8px; }
    body.pursuits-page .pur-input,
    body.pursuits-page .pur-select { font-size: 16px; min-width: 100%; flex: 1 1 100%; max-width: none; }
    body.pursuits-page .pur-toolbar-meta { margin-left: 0; width: 100%; }
    body.pursuits-page .pur-table thead { display: none; }
    body.pursuits-page .pur-table,
    body.pursuits-page .pur-table tbody,
    body.pursuits-page .pur-table tr,
    body.pursuits-page .pur-table td { display: block; width: 100%; box-sizing: border-box; }
    body.pursuits-page .pur-table tr {
        padding: 14px 18px;
        border-bottom: 1px solid var(--kf-rule-soft);
    }
    body.pursuits-page .pur-table td {
        padding: 2px 0;
        border: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    body.pursuits-page .pur-table tbody tr:last-child { border-bottom: none; }
    body.pursuits-page .pur-grid { grid-template-columns: 1fr; }
    body.pursuits-page .pur-campaigns-grid { grid-template-columns: 1fr; }
    body.pursuits-page .pur-tabs { overflow-x: auto; }
    body.pursuits-page .pur-tab { padding: 12px 12px; }
    body.pursuits-page .pur-form-card-head,
    body.pursuits-page .pur-form-card-body { padding-left: 18px; padding-right: 18px; }
    body.pursuits-page .pur-row { padding: 14px 18px; }
}


/* ==========================================
   Finance sub-pages — Mercury / Brex (fin2)
   ==========================================
   Promotes the body.finance-page baseline to every Finance sub-page:
   - billing  (body.finance-billing-page)
   - locations (body.finance-locations-page)
   - staff list + form (body.finance-staff-page)
   Strategy: share all visual primitives via a common selector list so
   we don't drift. Then layer page-specific rules below.
   Scope: all selectors start with body.finance- to avoid bleeding
   into the older .lr-/.bill-/.location-/.staff- rules.
   ========================================== */

body.finance-billing-page,
body.finance-locations-page,
body.finance-staff-page {
    --fin-accent: #5a7a5e;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep, #efeae0);
    color: var(--kf-ink, #1a2230);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.finance-billing-page .main,
body.finance-locations-page .main,
body.finance-staff-page .main {
    background: var(--kf-paper-deep, #efeae0);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header (shared with body.finance-page) ---------- */
body.finance-billing-page .fin-page-head,
body.finance-locations-page .fin-page-head,
body.finance-staff-page .fin-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.finance-billing-page .fin-page-head-text,
body.finance-locations-page .fin-page-head-text,
body.finance-staff-page .fin-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.finance-billing-page .fin-page-dot,
body.finance-locations-page .fin-page-dot,
body.finance-staff-page .fin-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fin-accent);
    margin: 0 0 18px;
}

body.finance-billing-page .fin-page-eyebrow,
body.finance-locations-page .fin-page-eyebrow,
body.finance-staff-page .fin-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 10px;
}

body.finance-billing-page .fin-page-title,
body.finance-locations-page .fin-page-title,
body.finance-staff-page .fin-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 8px;
    max-width: 32ch;
}

body.finance-billing-page .fin-page-title-tag,
body.finance-locations-page .fin-page-title-tag,
body.finance-staff-page .fin-page-title-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding: 4px 10px;
    border-radius: 999px;
}

body.finance-billing-page .fin-page-sub,
body.finance-locations-page .fin-page-sub,
body.finance-staff-page .fin-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    max-width: 70ch;
    line-height: 1.5;
}

body.finance-billing-page .fin-page-actions,
body.finance-locations-page .fin-page-actions,
body.finance-staff-page .fin-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
body.finance-billing-page .fin-btn,
body.finance-locations-page .fin-btn,
body.finance-staff-page .fin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.finance-billing-page .fin-btn--sm,
body.finance-locations-page .fin-btn--sm,
body.finance-staff-page .fin-btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

body.finance-billing-page .fin-btn--primary,
body.finance-locations-page .fin-btn--primary,
body.finance-staff-page .fin-btn--primary {
    background: var(--kf-navy, #0b1f3a);
    color: #f6f3ec;
}
body.finance-billing-page .fin-btn--primary:hover,
body.finance-locations-page .fin-btn--primary:hover,
body.finance-staff-page .fin-btn--primary:hover {
    background: var(--kf-navy-deep, #061427);
}
body.finance-billing-page .fin-btn--primary:focus-visible,
body.finance-locations-page .fin-btn--primary:focus-visible,
body.finance-staff-page .fin-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.finance-billing-page .fin-btn--ghost,
body.finance-locations-page .fin-btn--ghost,
body.finance-staff-page .fin-btn--ghost {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-navy, #0b1f3a);
    border-color: var(--kf-rule, #d9d2c2);
}
body.finance-billing-page .fin-btn--ghost:hover,
body.finance-locations-page .fin-btn--ghost:hover,
body.finance-staff-page .fin-btn--ghost:hover {
    border-color: var(--kf-navy, #0b1f3a);
}
body.finance-billing-page .fin-btn--ghost:focus-visible,
body.finance-locations-page .fin-btn--ghost:focus-visible,
body.finance-staff-page .fin-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy, #0b1f3a);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

body.finance-billing-page .fin-btn[disabled],
body.finance-locations-page .fin-btn[disabled],
body.finance-staff-page .fin-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- Flash + notices ---------- */
body.finance-billing-page .fin-flash,
body.finance-locations-page .fin-flash,
body.finance-staff-page .fin-flash {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 3px solid var(--fin-accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}

body.finance-billing-page .fin-notice,
body.finance-locations-page .fin-notice,
body.finance-staff-page .fin-notice {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    line-height: 1.55;
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.finance-billing-page .fin-notice strong,
body.finance-locations-page .fin-notice strong,
body.finance-staff-page .fin-notice strong {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
}
body.finance-billing-page .fin-notice--info,
body.finance-locations-page .fin-notice--info,
body.finance-staff-page .fin-notice--info {
    border-left: 3px solid #4a7a82;       /* muted teal */
}
body.finance-billing-page .fin-notice--warn,
body.finance-locations-page .fin-notice--warn,
body.finance-staff-page .fin-notice--warn {
    border-left: 3px solid #a37250;       /* muted clay */
}
body.finance-billing-page .fin-notice--ok,
body.finance-locations-page .fin-notice--ok,
body.finance-staff-page .fin-notice--ok {
    border-left: 3px solid #5a7a5e;       /* muted sage */
}

/* ---------- Stat cards (reuse body.finance-page treatment) ---------- */
body.finance-billing-page .lr-stat-card.fin-stat,
body.finance-locations-page .lr-stat-card.fin-stat,
body.finance-staff-page .lr-stat-card.fin-stat {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 2px solid var(--accent, var(--kf-rule-soft, #e7e1d3));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-billing-page .lr-stat-card.fin-stat::before,
body.finance-locations-page .lr-stat-card.fin-stat::before,
body.finance-staff-page .lr-stat-card.fin-stat::before { content: none; }

body.finance-billing-page .lr-stat-card.fin-stat .fin-stat-body,
body.finance-locations-page .lr-stat-card.fin-stat .fin-stat-body,
body.finance-staff-page .lr-stat-card.fin-stat .fin-stat-body {
    min-width: 0;
    flex: 1;
}

body.finance-billing-page .lr-stat-card.fin-stat .lr-stat-label,
body.finance-locations-page .lr-stat-card.fin-stat .lr-stat-label,
body.finance-staff-page .lr-stat-card.fin-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 12px;
}

body.finance-billing-page .lr-stat-card.fin-stat .lr-stat-value,
body.finance-locations-page .lr-stat-card.fin-stat .lr-stat-value,
body.finance-staff-page .lr-stat-card.fin-stat .lr-stat-value {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy, #0b1f3a));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.finance-billing-page .lr-stat-card.fin-stat .lr-stat-sub,
body.finance-locations-page .lr-stat-card.fin-stat .lr-stat-sub,
body.finance-staff-page .lr-stat-card.fin-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* ---------- Panel (table wrapper + form wrapper) ---------- */
body.finance-billing-page .fin-panel,
body.finance-locations-page .fin-panel,
body.finance-staff-page .fin-panel {
    margin-top: 24px;
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

body.finance-billing-page .fin-panel--padded,
body.finance-locations-page .fin-panel--padded,
body.finance-staff-page .fin-panel--padded {
    padding: 28px;
    overflow: visible;
}

body.finance-billing-page .fin-panel-head,
body.finance-locations-page .fin-panel-head,
body.finance-staff-page .fin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    flex-wrap: wrap;
}

body.finance-billing-page .fin-panel-head--with-filter,
body.finance-locations-page .fin-panel-head--with-filter,
body.finance-staff-page .fin-panel-head--with-filter {
    gap: 12px;
}

body.finance-billing-page .fin-panel-title,
body.finance-locations-page .fin-panel-title,
body.finance-staff-page .fin-panel-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 4px;
    line-height: 1.25;
}

body.finance-billing-page .fin-panel-sub,
body.finance-locations-page .fin-panel-sub,
body.finance-staff-page .fin-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    letter-spacing: 0.005em;
    line-height: 1.5;
}

body.finance-billing-page .fin-panel-sub-inline,
body.finance-locations-page .fin-panel-sub-inline,
body.finance-staff-page .fin-panel-sub-inline {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--kf-muted, #6e6a5f);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 8px;
}

body.finance-billing-page .fin-panel-foot,
body.finance-locations-page .fin-panel-foot,
body.finance-staff-page .fin-panel-foot {
    padding: 14px 24px;
    background: var(--kf-paper-deep, #efeae0);
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted, #6e6a5f);
    line-height: 1.6;
}
body.finance-billing-page .fin-panel-foot strong,
body.finance-locations-page .fin-panel-foot strong,
body.finance-staff-page .fin-panel-foot strong {
    color: var(--kf-ink, #1a2230);
    font-weight: 600;
}
body.finance-billing-page .fin-panel-foot--inline,
body.finance-locations-page .fin-panel-foot--inline,
body.finance-staff-page .fin-panel-foot--inline {
    background: transparent;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding: 12px 0 0;
    margin: 10px 0 0;
}

/* ---------- Table ---------- */
body.finance-billing-page .fin-table-scroll,
body.finance-locations-page .fin-table-scroll,
body.finance-staff-page .fin-table-scroll {
    overflow-x: auto;
    position: relative;
}

body.finance-billing-page .fin-table,
body.finance-locations-page .fin-table,
body.finance-staff-page .fin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
}

body.finance-billing-page .fin-th,
body.finance-locations-page .fin-th,
body.finance-staff-page .fin-th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kf-paper, #f6f3ec);
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    padding: 14px 20px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    white-space: nowrap;
}
body.finance-billing-page .fin-th--num,
body.finance-locations-page .fin-th--num,
body.finance-staff-page .fin-th--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.finance-billing-page .fin-th--right,
body.finance-locations-page .fin-th--right,
body.finance-staff-page .fin-th--right { text-align: right; }
body.finance-billing-page .fin-th--narrow,
body.finance-locations-page .fin-th--narrow,
body.finance-staff-page .fin-th--narrow { width: 36px; padding-right: 0; }

body.finance-billing-page .fin-td,
body.finance-locations-page .fin-td,
body.finance-staff-page .fin-td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    color: var(--kf-ink, #1a2230);
    line-height: 1.4;
    vertical-align: middle;
}
body.finance-billing-page .fin-td--narrow,
body.finance-locations-page .fin-td--narrow,
body.finance-staff-page .fin-td--narrow { width: 36px; padding-right: 0; text-align: center; }
body.finance-billing-page .fin-td--right,
body.finance-locations-page .fin-td--right,
body.finance-staff-page .fin-td--right { text-align: right; white-space: nowrap; }
body.finance-billing-page .fin-td--dim,
body.finance-locations-page .fin-td--dim,
body.finance-staff-page .fin-td--dim { color: var(--kf-muted, #6e6a5f); opacity: 0.7; }

body.finance-billing-page .fin-table tbody tr:last-child .fin-td,
body.finance-locations-page .fin-table tbody tr:last-child .fin-td,
body.finance-staff-page .fin-table tbody tr:last-child .fin-td { border-bottom: none; }

body.finance-billing-page .fin-table tbody tr,
body.finance-locations-page .fin-table tbody tr,
body.finance-staff-page .fin-table tbody tr {
    transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-billing-page .fin-table tbody tr:hover,
body.finance-staff-page .fin-staff-row:hover,
body.finance-locations-page .fin-row-toggle:hover {
    background: var(--kf-paper-deep, #efeae0);
}

body.finance-locations-page .fin-row-toggle,
body.finance-billing-page .fin-row-toggle { cursor: pointer; }

body.finance-billing-page .fin-td--name,
body.finance-locations-page .fin-td--name,
body.finance-staff-page .fin-td--name {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 500;
    letter-spacing: -0.003em;
}

body.finance-billing-page .fin-td--muted,
body.finance-locations-page .fin-td--muted,
body.finance-staff-page .fin-td--muted {
    color: var(--kf-muted, #6e6a5f);
}

body.finance-billing-page .fin-td--num,
body.finance-locations-page .fin-td--num,
body.finance-staff-page .fin-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

body.finance-billing-page .fin-td--strong,
body.finance-locations-page .fin-td--strong,
body.finance-staff-page .fin-td--strong {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
}

body.finance-billing-page .fin-td-empty,
body.finance-locations-page .fin-td-empty,
body.finance-staff-page .fin-td-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted, #6e6a5f);
    font-size: 13px;
    line-height: 1.5;
}

body.finance-billing-page .fin-td-note,
body.finance-locations-page .fin-td-note,
body.finance-staff-page .fin-td-note {
    font-size: 11.5px;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 3px;
    letter-spacing: 0.01em;
}
body.finance-billing-page .fin-td-note--clay { color: #a37250; }
body.finance-billing-page .fin-td-note--accent { color: var(--kf-accent, #9a7b3f); }

body.finance-billing-page .fin-inline-link,
body.finance-locations-page .fin-inline-link,
body.finance-staff-page .fin-inline-link {
    color: var(--kf-navy, #0b1f3a);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule, #d9d2c2);
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-billing-page .fin-inline-link:hover,
body.finance-locations-page .fin-inline-link:hover,
body.finance-staff-page .fin-inline-link:hover {
    color: var(--kf-accent, #9a7b3f);
    border-color: var(--kf-accent, #9a7b3f);
}

/* Code chip */
body.finance-billing-page .fin-code,
body.finance-locations-page .fin-code,
body.finance-staff-page .fin-code {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--kf-ink, #1a2230);
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0;
}

/* Pills (statuses) */
body.finance-billing-page .fin-pill,
body.finance-locations-page .fin-pill,
body.finance-staff-page .fin-pill {
    display: inline-block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
body.finance-billing-page .fin-pill--sage,
body.finance-locations-page .fin-pill--sage,
body.finance-staff-page .fin-pill--sage {
    background: rgba(90, 122, 94, 0.12);
    color: #3f5a44;
    border-color: rgba(90, 122, 94, 0.22);
}
body.finance-billing-page .fin-pill--clay,
body.finance-locations-page .fin-pill--clay,
body.finance-staff-page .fin-pill--clay {
    background: rgba(163, 114, 80, 0.13);
    color: #7a4e34;
    border-color: rgba(163, 114, 80, 0.22);
}
body.finance-billing-page .fin-pill--brick,
body.finance-locations-page .fin-pill--brick,
body.finance-staff-page .fin-pill--brick {
    background: rgba(154, 74, 74, 0.12);
    color: #7a3a3a;
    border-color: rgba(154, 74, 74, 0.22);
}
body.finance-billing-page .fin-pill--teal,
body.finance-locations-page .fin-pill--teal,
body.finance-staff-page .fin-pill--teal {
    background: rgba(74, 122, 130, 0.12);
    color: #345a62;
    border-color: rgba(74, 122, 130, 0.22);
}
body.finance-billing-page .fin-pill--neutral,
body.finance-locations-page .fin-pill--neutral,
body.finance-staff-page .fin-pill--neutral {
    background: var(--kf-paper-deep, #efeae0);
    color: var(--kf-muted, #6e6a5f);
    border-color: var(--kf-rule-soft, #e7e1d3);
}

/* Inline tag (location chip) */
body.finance-staff-page .fin-tag-row,
body.finance-staff-page.finance-staff-form .fin-tag-row {
    display: flex; flex-wrap: wrap; gap: 4px;
}
body.finance-staff-page .fin-tag {
    display: inline-block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kf-navy, #0b1f3a);
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

/* Filter input on staff list */
body.finance-staff-page .fin-filter {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 320px;
    max-width: 360px;
}
body.finance-staff-page .fin-filter-icon {
    position: absolute;
    left: 12px;
    display: inline-flex;
    color: var(--kf-muted, #6e6a5f);
    pointer-events: none;
}
body.finance-staff-page .fin-filter-input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 8px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-staff-page .fin-filter-input::placeholder {
    color: var(--kf-muted, #6e6a5f);
    opacity: 0.75;
}
body.finance-staff-page .fin-filter-input:focus {
    outline: none;
    border-color: var(--kf-accent, #9a7b3f);
    box-shadow: 0 0 0 3px rgba(154, 123, 63, 0.15);
}

/* ---------- Expandable row (locations + billing) ---------- */
body.finance-locations-page .fin-expand-icon,
body.finance-billing-page .fin-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--kf-muted, #6e6a5f);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-locations-page .fin-row-toggle:hover .fin-expand-icon,
body.finance-billing-page .fin-row-toggle:hover .fin-expand-icon {
    color: var(--kf-navy, #0b1f3a);
}
body.finance-locations-page .fin-expand-icon.open,
body.finance-billing-page .fin-expand-icon.open {
    transform: rotate(90deg);
    color: var(--kf-navy, #0b1f3a);
}

body.finance-locations-page .fin-summary-row > .fin-summary-td,
body.finance-billing-page .fin-summary-row > .fin-summary-td {
    padding: 0;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
}

body.finance-locations-page .fin-summary-inner,
body.finance-billing-page .fin-summary-inner {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-locations-page .fin-summary-inner.open,
body.finance-billing-page .fin-summary-inner.open {
    max-height: 2000px;
    opacity: 1;
}
body.finance-locations-page .fin-summary-inner.closing,
body.finance-billing-page .fin-summary-inner.closing {
    max-height: 0;
    opacity: 0;
    transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.finance-locations-page .fin-summary-card,
body.finance-billing-page .fin-summary-card {
    background: var(--kf-paper-deep, #efeae0);
    border-top: 1px dashed var(--kf-rule, #d9d2c2);
    padding: 24px 28px;
}

body.finance-locations-page .fin-summary-title,
body.finance-billing-page .fin-summary-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 18px;
}

/* Nested per-building table inside an expanded client row (billing only) */
body.finance-billing-page .fin-subtable-scroll {
    overflow-x: auto;
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 10px;
}
body.finance-billing-page .fin-subtable {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
}
body.finance-billing-page .fin-subtable thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    padding: 11px 16px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    white-space: nowrap;
    background: var(--kf-paper-deep, #efeae0);
}
body.finance-billing-page .fin-subtable th.fin-subtable-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.finance-billing-page .fin-subtable tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    line-height: 1.4;
    vertical-align: top;
}
body.finance-billing-page .fin-subtable tbody tr:last-child td {
    border-bottom: 1px solid var(--kf-rule, #d9d2c2);
}
body.finance-billing-page .fin-subtable .fin-subtable-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
body.finance-billing-page .fin-subtable .fin-subtable-muted { color: var(--kf-muted, #6e6a5f); }
body.finance-billing-page .fin-subtable .fin-subtable-name {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 500;
    letter-spacing: -0.003em;
}
body.finance-billing-page .fin-subtable .fin-subtable-strong {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
}
body.finance-billing-page .fin-subtable .fin-subtable-dim {
    color: var(--kf-muted, #6e6a5f);
    opacity: 0.7;
}
body.finance-billing-page .fin-subtable tfoot td {
    padding: 13px 16px;
    background: var(--kf-paper-deep, #efeae0);
    font-weight: 600;
    color: var(--kf-navy, #0b1f3a);
    border-top: 1px solid var(--kf-rule, #d9d2c2);
    border-bottom: none;
}
body.finance-billing-page .fin-subtable .fin-subtable-foot-label {
    text-align: left;
    letter-spacing: 0;
    color: var(--kf-navy, #0b1f3a);
}

body.finance-locations-page .fin-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

body.finance-locations-page .fin-summary-cell {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 10px;
    padding: 14px 16px;
}

body.finance-locations-page .fin-summary-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin-bottom: 6px;
}

body.finance-locations-page .fin-summary-value {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--kf-ink, #1a2230);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
body.finance-locations-page .fin-summary-value--empty {
    color: var(--kf-muted, #6e6a5f);
    font-style: italic;
}

body.finance-locations-page .fin-summary-breakdown {
    margin-top: 16px;
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 10px;
    padding: 16px 18px;
}

body.finance-locations-page .fin-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
}
body.finance-locations-page .fin-breakdown-table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    color: var(--kf-ink, #1a2230);
    line-height: 1.4;
}
body.finance-locations-page .fin-breakdown-table td:first-child {
    color: var(--kf-muted, #6e6a5f);
}
body.finance-locations-page .fin-breakdown-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
body.finance-locations-page .fin-breakdown-num--pos { color: #3f5a44; }
body.finance-locations-page .fin-breakdown-num--neg { color: #7a3a3a; }

body.finance-locations-page .fin-breakdown-total td {
    padding: 12px 0;
    border-bottom: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--kf-navy, #0b1f3a);
}
body.finance-locations-page .fin-breakdown-total td:first-child {
    color: var(--kf-navy, #0b1f3a);
}
body.finance-locations-page .fin-breakdown-total--pos td,
body.finance-locations-page .fin-breakdown-total--pos td:first-child { color: #3f5a44; }
body.finance-locations-page .fin-breakdown-total--neg td,
body.finance-locations-page .fin-breakdown-total--neg td:first-child { color: #7a3a3a; }

/* ---------- Staff form layout ---------- */
body.finance-staff-page.finance-staff-form .fin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
}
body.finance-staff-page.finance-staff-form .fin-panel-title {
    margin-bottom: 14px;
}
body.finance-staff-page .fin-dl {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
}
body.finance-staff-page .fin-dl dt {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 10px;
}
body.finance-staff-page .fin-dl dt:first-child { margin-top: 0; }
body.finance-staff-page .fin-dl dd {
    margin: 4px 0 0;
    color: var(--kf-ink, #1a2230);
}

body.finance-staff-page .fin-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    color: var(--kf-ink, #1a2230);
}
body.finance-staff-page .fin-breakdown-row:last-of-type { border-bottom: none; }
body.finance-staff-page .fin-breakdown-row--total {
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--kf-rule, #d9d2c2);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--kf-navy, #0b1f3a);
}
body.finance-staff-page .fin-num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--kf-ink, #1a2230);
    letter-spacing: 0;
}
body.finance-staff-page .fin-breakdown-row--total .fin-num { color: var(--kf-navy, #0b1f3a); }

body.finance-staff-page .fin-form {
    margin-top: 24px;
    max-width: 960px;
}
body.finance-staff-page .fin-form-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 18px;
}
body.finance-staff-page .fin-field {
    flex: 1 1 240px;
    min-width: 0;
}
body.finance-staff-page .fin-label {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 8px;
}
body.finance-staff-page .fin-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
    font-variant-numeric: tabular-nums;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.finance-staff-page .fin-input:focus {
    outline: none;
    border-color: var(--kf-accent, #9a7b3f);
    box-shadow: 0 0 0 3px rgba(154, 123, 63, 0.15);
}
body.finance-staff-page .fin-form-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.finance-billing-page *,
    body.finance-locations-page *,
    body.finance-staff-page * { transition: none !important; animation: none !important; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.finance-billing-page .main,
    body.finance-locations-page .main,
    body.finance-staff-page .main {
        padding: 32px 28px 64px;
    }
    body.finance-billing-page .fin-page-head,
    body.finance-locations-page .fin-page-head,
    body.finance-staff-page .fin-page-head { margin-bottom: 28px; }
    body.finance-billing-page .fin-panel-head,
    body.finance-locations-page .fin-panel-head,
    body.finance-staff-page .fin-panel-head { padding: 16px 20px; }
    body.finance-billing-page .fin-th,
    body.finance-locations-page .fin-th,
    body.finance-staff-page .fin-th { padding: 12px 16px; }
    body.finance-billing-page .fin-td,
    body.finance-locations-page .fin-td,
    body.finance-staff-page .fin-td { padding: 14px 16px; }
    body.finance-billing-page .fin-panel-foot,
    body.finance-locations-page .fin-panel-foot,
    body.finance-staff-page .fin-panel-foot { padding: 12px 20px; }
    body.finance-staff-page.finance-staff-form .fin-form-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.finance-billing-page .main,
    body.finance-locations-page .main,
    body.finance-staff-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.finance-billing-page .fin-page-head,
    body.finance-locations-page .fin-page-head,
    body.finance-staff-page .fin-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.finance-billing-page .fin-page-title,
    body.finance-locations-page .fin-page-title,
    body.finance-staff-page .fin-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.finance-billing-page .fin-page-sub,
    body.finance-locations-page .fin-page-sub,
    body.finance-staff-page .fin-page-sub { font-size: 13px; }
    body.finance-billing-page .fin-page-actions,
    body.finance-locations-page .fin-page-actions,
    body.finance-staff-page .fin-page-actions { width: 100%; }
    body.finance-billing-page .lr-stat-card.fin-stat,
    body.finance-locations-page .lr-stat-card.fin-stat,
    body.finance-staff-page .lr-stat-card.fin-stat { padding: 18px 20px; }
    body.finance-billing-page .fin-panel,
    body.finance-locations-page .fin-panel,
    body.finance-staff-page .fin-panel { border-radius: 12px; }
    body.finance-billing-page .fin-panel-head,
    body.finance-locations-page .fin-panel-head,
    body.finance-staff-page .fin-panel-head { padding: 16px 18px; gap: 8px; }
    body.finance-billing-page .fin-panel-title,
    body.finance-locations-page .fin-panel-title,
    body.finance-staff-page .fin-panel-title { font-size: 16px; }
    body.finance-billing-page .fin-th,
    body.finance-locations-page .fin-th,
    body.finance-staff-page .fin-th { padding: 12px 14px; font-size: 10px; }
    body.finance-billing-page .fin-td,
    body.finance-locations-page .fin-td,
    body.finance-staff-page .fin-td { padding: 14px 14px; font-size: 13px; }
    /* Right-edge fade hint that the table scrolls horizontally */
    body.finance-billing-page .fin-table-scroll,
    body.finance-locations-page .fin-table-scroll,
    body.finance-staff-page .fin-table-scroll {
        background:
            linear-gradient(to right, transparent calc(100% - 28px), rgba(217, 210, 194, 0.55) 100%) no-repeat
            right center / 28px 100%;
    }
    body.finance-staff-page .fin-filter { flex: 1 1 100%; max-width: 100%; }
    body.finance-staff-page .fin-form-row { flex-direction: column; align-items: stretch; }
    body.finance-staff-page .fin-form-actions { width: 100%; }
    body.finance-locations-page .fin-summary-card { padding: 18px 18px; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    body.finance-billing-page .fin-btn,
    body.finance-locations-page .fin-btn,
    body.finance-staff-page .fin-btn { width: 100%; }
    body.finance-billing-page .fin-page-actions,
    body.finance-locations-page .fin-page-actions,
    body.finance-staff-page .fin-page-actions { flex-direction: column; }
    body.finance-staff-page .fin-form-actions { flex-direction: column; }
}


/* ==========================================
   Finance — Signal layer (fin3, 2026-05-17)
   ==========================================
   Adds the calibrated signal palette back to Finance after
   the Mercury reset stripped status color. Spec lives in
   kfm-cep/CLAUDE.md → "Signals & status (the calibrated
   life)". Palette tokens (--kf-signal-*) are declared at
   :root above so any module can read them. Treatments below
   are scoped per Finance page body class.
   ========================================== */

/* ---------- "Refreshes / updated" line (under page sub) ---------- */
body.finance-page .fin-page-updated,
body.finance-billing-page .fin-page-updated,
body.finance-locations-page .fin-page-updated,
body.finance-staff-page .fin-page-updated {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 8px 0 0;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* ---------- Stat-card delta chip (▲ / ▼ / pending) ----------
   Lives inside .fin-stat-body, sandwiched between value and
   sub. Pending variant is invisible but holds layout space
   so the card height stays consistent once trend data wires
   in. font-variant-numeric: tabular-nums keeps the chip
   stable as percentages change. */
body.finance-page .fin-delta,
body.finance-billing-page .fin-delta,
body.finance-locations-page .fin-delta,
body.finance-staff-page .fin-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
    line-height: 1;
    min-height: 14px;
}
body.finance-page .fin-delta--up,
body.finance-billing-page .fin-delta--up,
body.finance-locations-page .fin-delta--up,
body.finance-staff-page .fin-delta--up { color: var(--kf-signal-positive); }
body.finance-page .fin-delta--down,
body.finance-billing-page .fin-delta--down,
body.finance-locations-page .fin-delta--down,
body.finance-staff-page .fin-delta--down { color: var(--kf-signal-negative); }
body.finance-page .fin-delta--pending,
body.finance-billing-page .fin-delta--pending,
body.finance-locations-page .fin-delta--pending,
body.finance-staff-page .fin-delta--pending {
    visibility: hidden;
}

/* ---------- Stat-card left-edge "needs attention" indicator ----------
   2px solid line on the LEFT edge. Subtle. Single card,
   single indicator — do not blanket. */
body.finance-page .lr-stat-card.fin-stat.fin-stat--attn,
body.finance-billing-page .lr-stat-card.fin-stat.fin-stat--attn,
body.finance-locations-page .lr-stat-card.fin-stat.fin-stat--attn,
body.finance-staff-page .lr-stat-card.fin-stat.fin-stat--attn {
    border-left: 2px solid var(--kf-signal-negative);
}
body.finance-page .lr-stat-card.fin-stat.fin-stat--warn,
body.finance-billing-page .lr-stat-card.fin-stat.fin-stat--warn,
body.finance-locations-page .lr-stat-card.fin-stat.fin-stat--warn,
body.finance-staff-page .lr-stat-card.fin-stat.fin-stat--warn {
    border-left: 2px solid var(--kf-signal-warning);
}

/* ---------- Status pills — signal palette variants ----------
   Spec pill geometry: 2px 8px / 999px / 11px / 500 / 0.06em
   uppercase. Background = -bg tint, text = solid signal.
   Inline pill in a heading drops to 10px to sit on the
   baseline of a Source Serif title without inflating its
   line-height. */
body.finance-billing-page .fin-pill,
body.finance-locations-page .fin-pill,
body.finance-staff-page .fin-pill {
    display: inline-block;
    font-family: "Source Sans 3", sans-serif;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* — paid / settled / active / complete → positive — */
body.finance-billing-page .fin-pill--paid,
body.finance-locations-page .fin-pill--paid,
body.finance-staff-page .fin-pill--paid,
body.finance-billing-page .fin-pill--active,
body.finance-locations-page .fin-pill--active,
body.finance-staff-page .fin-pill--active,
body.finance-billing-page .fin-pill--complete,
body.finance-locations-page .fin-pill--complete,
body.finance-staff-page .fin-pill--complete {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
    border-color: transparent;
}

/* — pending / draft / due-soon → warning — */
body.finance-billing-page .fin-pill--pending,
body.finance-locations-page .fin-pill--pending,
body.finance-staff-page .fin-pill--pending,
body.finance-billing-page .fin-pill--draft,
body.finance-locations-page .fin-pill--draft,
body.finance-staff-page .fin-pill--draft,
body.finance-billing-page .fin-pill--due,
body.finance-locations-page .fin-pill--due,
body.finance-staff-page .fin-pill--due,
body.finance-billing-page .fin-pill--onleave,
body.finance-locations-page .fin-pill--onleave,
body.finance-staff-page .fin-pill--onleave {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
    border-color: transparent;
}

/* — overdue / failed / inactive / departed → negative — */
body.finance-billing-page .fin-pill--overdue,
body.finance-locations-page .fin-pill--overdue,
body.finance-staff-page .fin-pill--overdue,
body.finance-billing-page .fin-pill--failed,
body.finance-locations-page .fin-pill--failed,
body.finance-staff-page .fin-pill--failed,
body.finance-billing-page .fin-pill--inactive,
body.finance-locations-page .fin-pill--inactive,
body.finance-staff-page .fin-pill--inactive,
body.finance-billing-page .fin-pill--departed,
body.finance-locations-page .fin-pill--departed,
body.finance-staff-page .fin-pill--departed {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
    border-color: transparent;
}

/* — void / cancelled → muted neutral — */
body.finance-billing-page .fin-pill--void,
body.finance-locations-page .fin-pill--void,
body.finance-staff-page .fin-pill--void,
body.finance-billing-page .fin-pill--cancelled,
body.finance-locations-page .fin-pill--cancelled,
body.finance-staff-page .fin-pill--cancelled {
    background: var(--kf-rule-soft);
    color: var(--kf-muted);
    border-color: transparent;
}

/* — info — */
body.finance-billing-page .fin-pill--info,
body.finance-locations-page .fin-pill--info,
body.finance-staff-page .fin-pill--info {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
    border-color: transparent;
}

/* When a pill sits inline inside the serif page title,
   nudge it down so it sits on the cap height, not the
   baseline of the descenders. */
body.finance-billing-page .fin-page-title .fin-pill,
body.finance-locations-page .fin-page-title .fin-pill,
body.finance-staff-page .fin-page-title .fin-pill {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-3px);
    margin-left: 10px;
    font-size: 10px;
}

/* ---------- Live indicator dot (top-buildings #1) ----------
   6px pulsing dot in muted info blue. 2s ease loop. Respects
   prefers-reduced-motion (handled in the global block at
   line ~4836 which kills animation on the finance bodies).
   We re-declare reduced-motion here for the .fin-live-dot
   on body.finance-page since that block does not cover the
   dashboard scope. */
body.finance-page .fin-live-dot,
body.finance-billing-page .fin-live-dot,
body.finance-locations-page .fin-live-dot,
body.finance-staff-page .fin-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kf-signal-info);
    margin-right: 8px;
    vertical-align: middle;
    animation: fin-live-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fin-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
    body.finance-page .fin-live-dot,
    body.finance-billing-page .fin-live-dot,
    body.finance-locations-page .fin-live-dot,
    body.finance-staff-page .fin-live-dot { animation: none; }
}

/* ---------- Form validation (staff misc form) ----------
   1px border in --kf-signal-negative on error, no glow.
   Field help in muted; error text in signal-negative. */
body.finance-staff-page .fin-input--error {
    border-color: var(--kf-signal-negative);
}
body.finance-staff-page .fin-input--error:focus {
    border-color: var(--kf-signal-negative);
    box-shadow: 0 0 0 3px rgba(141, 62, 62, 0.12);
}
body.finance-staff-page .fin-field-error {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-signal-negative);
    margin: 6px 0 0;
    line-height: 1.45;
}
body.finance-staff-page .fin-field-help {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 6px 0 0;
    line-height: 1.45;
}


/* ==========================================
   Shared signal utilities (project-wide, fin3)
   ==========================================
   Declared unscoped so any module can opt in. Convention
   for whoever wires charts / realtime later — do not
   redefine these per page. */

/* Sparkline (single-color stroke, no fill, no gradient).
   Tells whoever wires charts later: muted signal color,
   no rainbow, no area-fill. */
.kf-sparkline {
    fill: none;
    stroke: var(--kf-signal-positive);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.kf-sparkline--down { stroke: var(--kf-signal-negative); }
.kf-sparkline--info { stroke: var(--kf-signal-info); }
.kf-sparkline--warn { stroke: var(--kf-signal-warning); }

/* Row-update wash. Apply .kf-row-updated to a <tr> from JS
   when a value just refreshed; CSS handles the 600ms ease
   wash to the signal-bg and back. Variants for positive /
   warning / negative deltas. No flash, no bounce. */
@keyframes kf-row-wash-positive {
    0%   { background-color: transparent; }
    20%  { background-color: var(--kf-signal-positive-bg); }
    100% { background-color: transparent; }
}
@keyframes kf-row-wash-warning {
    0%   { background-color: transparent; }
    20%  { background-color: var(--kf-signal-warning-bg); }
    100% { background-color: transparent; }
}
@keyframes kf-row-wash-negative {
    0%   { background-color: transparent; }
    20%  { background-color: var(--kf-signal-negative-bg); }
    100% { background-color: transparent; }
}
.kf-row-updated {
    animation: kf-row-wash-positive 600ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}
.kf-row-updated--warning { animation-name: kf-row-wash-warning; }
.kf-row-updated--negative { animation-name: kf-row-wash-negative; }
@media (prefers-reduced-motion: reduce) {
    .kf-row-updated,
    .kf-row-updated--warning,
    .kf-row-updated--negative { animation: none; }
}


/* ==========================================
   Global sidebar — Mercury / Brex (fin2)
   ==========================================
   Restyles the shared sidebar markup across every module (Finance,
   LR, TA, PC, SR, PM, Pursuits, Advisory, Tech, Marketing). Replaces
   the heavy navy + glass-panel treatment with a calm paper surface,
   ivory ink, hairline rule, and a single accent indicator on active.
   Mobile slide-over behavior in the older 768px breakpoint is left
   intact — we only restyle the visual treatment.
   Selectors are scoped to `body .sidebar` to win against the older
   .sidebar block (lines ~454–605) at equal specificity but later in
   the cascade.
   ========================================== */

body .sidebar {
    width: 248px;
    background: #f6f3ec;                  /* --kf-paper */
    color: #1a2230;                        /* --kf-ink */
    border-right: 1px solid #e7e1d3;       /* --kf-rule-soft */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: none;
    overflow-x: hidden;                    /* sb3 — kill horizontal scrollbar */
}
/* sb3 — kill horizontal overflow on the nav scroll container too */
body .sidebar nav,
body .sidebar .sidebar-nav { overflow-x: hidden; }

/* Top brand block ----------------------------------------------- */
body .sidebar .sidebar-brand {
    padding: 22px 22px 18px;
    border-bottom: 1px solid #e7e1d3;
    background: transparent;
}

body .sidebar .sidebar-brand-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #6e6a5f;                        /* --kf-muted */
    margin-bottom: 4px;
}

body .sidebar .sidebar-brand-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

body .sidebar .sidebar-brand-name {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1;
    color: #0b1f3a;                        /* --kf-navy */
    background: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
            background-clip: border-box;
}

body .sidebar .sidebar-pulse-dot {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f13c6c;                   /* Pulse pink brand */
    box-shadow: 0 0 8px rgba(241, 60, 108, 0.45);
    flex-shrink: 0;
}
/* keep existing ::before / ::after pulse rings — they reference --gold */

/* Module switch button ------------------------------------------ */
body .sidebar .sidebar-module-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 14px 14px 6px;
    border-radius: 10px;
    background: #efeae0;                   /* --kf-paper-deep */
    color: #1a2230;
    text-decoration: none;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    border: 1px solid #e7e1d3;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .sidebar .sidebar-module-switch:hover {
    background: #f6f3ec;
    border-color: #d9d2c2;                 /* --kf-rule */
    color: #0b1f3a;
    transform: none;
    box-shadow: none;
}
body .sidebar .sidebar-module-switch:focus-visible {
    outline: none;
    border-color: #0b1f3a;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}
body .sidebar .sidebar-module-switch-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #6e6a5f;
}
body .sidebar .sidebar-module-switch:hover .sidebar-module-switch-icon { color: #0b1f3a; }
body .sidebar .sidebar-module-switch-chevron {
    opacity: 0.55;
    color: #6e6a5f;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .sidebar .sidebar-module-switch:hover .sidebar-module-switch-chevron {
    opacity: 1;
    color: #0b1f3a;
    transform: translateX(2px);
}

/* Section labels ------------------------------------------------ */
body .sidebar .nav-section-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6e6a5f;
    padding: 18px 22px 6px;
}
body .sidebar .nav-subsection-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6e6a5f;
    padding: 4px 22px 6px;
    opacity: 0.78;
}

/* Nav items ----------------------------------------------------- */
body .sidebar .sidebar-nav {
    padding: 8px 0 14px;
}

body .sidebar .sidebar-nav li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    margin: 2px 12px;
    border-radius: 8px;
    background: transparent;
    color: #1a2230;
    text-decoration: none;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    border: 1px solid transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

body .sidebar .sidebar-nav li a:hover {
    background: #efeae0;                   /* --kf-paper-deep */
    color: #0b1f3a;
    border-color: transparent;
    box-shadow: none;
}

body .sidebar .sidebar-nav li a.active {
    background: #0b1f3a;                   /* --kf-navy */
    color: #f6f3ec;                        /* --kf-paper ink-on-navy */
    border-color: transparent;
    box-shadow: none;
}
/* sb2 — anchor the gold active indicator to the <a> tile, not the sidebar */
body .sidebar .sidebar-nav li a { position: relative; }
body .sidebar .sidebar-nav li a.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 1px;
    background: #9a7b3f;                   /* --kf-accent */
}

body .sidebar .sidebar-nav li a:focus-visible {
    outline: none;
    border-color: #0b1f3a;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

body .sidebar .sidebar-nav li a svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: currentColor;
    opacity: 0.78;
    stroke-width: 1.6;
}
body .sidebar .sidebar-nav li a:hover svg { opacity: 1; }
body .sidebar .sidebar-nav li a.active svg {
    opacity: 1;
    color: #f6f3ec;
    stroke: #f6f3ec;
}

/* Footer ------------------------------------------------------- */
body .sidebar .sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid #e7e1d3;
    background: transparent;
}

body .sidebar .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #efeae0;
    color: #0b1f3a;
    border: 1px solid #e7e1d3;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    box-shadow: none;
}

body .sidebar .user-name {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1a2230;
    letter-spacing: 0;
}

body .sidebar .user-role {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    color: #6e6a5f;
    letter-spacing: 0.02em;
}

body .sidebar .logout-btn {
    color: #6e6a5f;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .sidebar .logout-btn:hover {
    background: rgba(154, 74, 74, 0.10);
    color: #7a3a3a;
    border-color: rgba(154, 74, 74, 0.18);
}
body .sidebar .logout-btn:focus-visible {
    outline: none;
    border-color: #0b1f3a;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* Mobile menu button (paper register) -------------------------- */
body .mobile-menu-btn {
    border: 1px solid #e7e1d3;
    background: #f6f3ec;
    color: #0b1f3a;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.06);
}
body .mobile-menu-btn:hover { background: #efeae0; }
body .mobile-menu-btn.sidebar-open {
    background: #0b1f3a;
    color: #f6f3ec;
    border-color: #0b1f3a;
    box-shadow: none;
}

body .sidebar-overlay { background: rgba(11, 31, 58, 0.35); }

/* Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .sidebar .sidebar-nav li a,
    body .sidebar .sidebar-module-switch,
    body .sidebar .logout-btn,
    body .mobile-menu-btn { transition: none; }
}

/* ==========================================
   Sidebar collapse-on-demand (sb1)
   Mini icon-rail toggle. Mercury / Brex pattern.
   Layered on top of the fin2 paper-register sidebar.
   ========================================== */

/* Width + main-content shift -------------------------------------- */
body .sidebar {
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .main {
    transition: margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .main { margin-left: 64px; }

/* Hide text labels in collapsed state (keeps layout stable) ------- */
body.sidebar-collapsed .sidebar .sidebar-nav-label,
body.sidebar-collapsed .sidebar .nav-section-label,
body.sidebar-collapsed .sidebar .nav-subsection-label,
body.sidebar-collapsed .sidebar .nav-group-label,
body.sidebar-collapsed .sidebar .sidebar-brand-eyebrow,
body.sidebar-collapsed .sidebar .sidebar-brand-name,
body.sidebar-collapsed .sidebar .sidebar-module-switch-label,
body.sidebar-collapsed .sidebar .sidebar-module-switch-chevron,
body.sidebar-collapsed .sidebar .nav-count,
body.sidebar-collapsed .sidebar .user-info {
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 140ms;
}
/* Expanded: fade in with slight delay so labels arrive after width grows */
body .sidebar .sidebar-nav-label,
body .sidebar .sidebar-brand-eyebrow,
body .sidebar .sidebar-brand-name,
body .sidebar .sidebar-module-switch-label,
body .sidebar .sidebar-module-switch-chevron,
body .sidebar .nav-count,
body .sidebar .user-info,
body .sidebar .nav-section-label,
body .sidebar .nav-subsection-label,
body .sidebar .nav-group-label {
    opacity: 1;
    visibility: visible;
    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
                visibility 0s linear 0s;
}

/* Collapsed brand: pulsing dot sits in the same 40x40 / margin:0 12px
   tile column as the module switch and nav icons below, so it shares
   the exact x-axis instead of being centered on the full 64px rail. */
body.sidebar-collapsed .sidebar .sidebar-brand {
    padding: 10px 0 10px;
    text-align: center;
}
body.sidebar-collapsed .sidebar .sidebar-brand-title {
    width: 40px;
    height: 40px;
    margin: 0 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    position: relative;
    min-height: 0;
}
body.sidebar-collapsed .sidebar .sidebar-brand-eyebrow {
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
body.sidebar-collapsed .sidebar .sidebar-brand-name {
    position: absolute;
    pointer-events: none;
}
body.sidebar-collapsed .sidebar .sidebar-pulse-dot {
    margin: 0;
}

/* sb3 — Collapsed module switch: blend with rail (no bg/border), icon only */
body.sidebar-collapsed .sidebar .sidebar-module-switch {
    padding: 0;
    margin: 14px 12px 6px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 1px solid transparent;
}
body.sidebar-collapsed .sidebar .sidebar-module-switch:hover {
    background: #efeae0;                   /* paper-deep on hover only */
    border-color: #e7e1d3;
}
body.sidebar-collapsed .sidebar .sidebar-module-switch-label,
body.sidebar-collapsed .sidebar .sidebar-module-switch-chevron {
    width: 0 !important;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* sb2 — Collapsed nav rows: 40x40 tile, icon centered. Labels go width:0 so
   they don't push the flex container past the tile and balloon the active
   item's navy fill. */
body.sidebar-collapsed .sidebar .sidebar-nav li a {
    padding: 0;
    margin: 2px 12px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 0;
}
body.sidebar-collapsed .sidebar .sidebar-nav-label {
    width: 0 !important;
    padding: 0;
    margin: 0;
    overflow: hidden;
    flex: 0 0 0;
}
/* Hide pursuits-style nav-dot in collapsed state (it duplicates the icon role) */
body.sidebar-collapsed .sidebar .sidebar-nav li a .nav-dot {
    margin: 0 auto;
}
/* Active gold indicator: anchor to the rail edge in collapsed mode */
body.sidebar-collapsed .sidebar .sidebar-nav li a.active::before {
    left: -8px;
}
/* Hide entire row when there's no visible content (section labels) */
body.sidebar-collapsed .sidebar .nav-section-label,
body.sidebar-collapsed .sidebar .nav-subsection-label,
body.sidebar-collapsed .sidebar .nav-group-label {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
/* Restore some breathing space between groups via a hairline */
body.sidebar-collapsed .sidebar .nav-group-label,
body.sidebar-collapsed .sidebar .nav-section-label[style*="margin-top"] {
    border-top: 1px solid #e7e1d3;
    margin: 8px 14px 0 !important;
    height: 0;
}

/* Collapsed footer: avatar centered, info hidden ------------------ */
body.sidebar-collapsed .sidebar .sidebar-footer {
    padding: 12px 8px;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
body.sidebar-collapsed .sidebar .sidebar-user {
    justify-content: center;
    gap: 0;
}
body.sidebar-collapsed .sidebar .user-info {
    width: 0;
    overflow: hidden;
}
body.sidebar-collapsed .sidebar .logout-btn {
    padding: 7px;
}

/* Collapse toggle button ------------------------------------------ */
body .sidebar-collapse-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 12px;
    /* sb3 — expanded footer is ~64px, collapsed footer is ~98px (flex-column).
       Use 110px to clear both. Collapsed override below recenters horizontally. */
    bottom: 110px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #6e6a5f;                    /* --kf-muted */
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
body .sidebar-collapse-toggle:hover {
    background: #efeae0;               /* --kf-paper-deep */
    border-color: #e7e1d3;             /* --kf-rule-soft */
    color: #0b1f3a;                    /* --kf-navy */
}
body .sidebar-collapse-toggle:focus-visible {
    outline: none;
    border-color: #0b1f3a;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}
body .sidebar-collapse-toggle-icon {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed: chevron points right (expand) */
body.sidebar-collapsed .sidebar-collapse-toggle-icon {
    transform: rotate(180deg);
}
/* Center the toggle in collapsed rail */
body.sidebar-collapsed .sidebar-collapse-toggle {
    left: 50%;
    transform: translateX(-50%);
}

/* Tooltip on collapsed nav items (pure CSS) ----------------------- */
body.sidebar-collapsed .sidebar .sidebar-nav li a {
    position: relative;
}
body.sidebar-collapsed .sidebar .sidebar-nav li a[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #f6f3ec;               /* --kf-paper */
    border: 1px solid #d9d2c2;         /* --kf-rule */
    border-radius: 6px;
    padding: 6px 10px;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #1a2230;                    /* --kf-ink */
    box-shadow: 0 4px 12px rgba(11, 31, 58, 0.08);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 200ms,
                visibility 0s linear 350ms;
    z-index: 200;
}
body.sidebar-collapsed .sidebar .sidebar-nav li a[data-label]:hover::after,
body.sidebar-collapsed .sidebar .sidebar-nav li a[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 200ms,
                visibility 0s linear 0s;
}

/* Mobile: hide toggle entirely (sidebar is a slide-over below 768px) */
@media (max-width: 768px) {
    body .sidebar-collapse-toggle { display: none; }
    /* Don't run collapsed-state rules on mobile — they would fight the slide-over */
    body.sidebar-collapsed .sidebar { width: 240px; }
    body.sidebar-collapsed .main { margin-left: 0; }
    body.sidebar-collapsed .sidebar .sidebar-nav-label,
    body.sidebar-collapsed .sidebar .nav-section-label,
    body.sidebar-collapsed .sidebar .nav-subsection-label,
    body.sidebar-collapsed .sidebar .nav-group-label,
    body.sidebar-collapsed .sidebar .sidebar-brand-eyebrow,
    body.sidebar-collapsed .sidebar .sidebar-brand-name,
    body.sidebar-collapsed .sidebar .sidebar-module-switch-label,
    body.sidebar-collapsed .sidebar .sidebar-module-switch-chevron,
    body.sidebar-collapsed .sidebar .nav-count,
    body.sidebar-collapsed .sidebar .user-info {
        opacity: 1;
        visibility: visible;
    }
    body.sidebar-collapsed .sidebar .sidebar-nav li a[data-label]::after { display: none; }
}

/* Reduced motion: drop the width/label transitions ---------------- */
@media (prefers-reduced-motion: reduce) {
    body .sidebar,
    body .main,
    body .sidebar .sidebar-nav-label,
    body .sidebar .sidebar-brand-name,
    body .sidebar .sidebar-module-switch-label,
    body .sidebar-collapse-toggle,
    body .sidebar-collapse-toggle-icon {
        transition: none;
    }
}


/* ==========================================
   Branding & Marketing — Mercury / Brex (mkt1)
   ==========================================
   Mirrors the Pursuits (pur6) baseline: paper background, serif page title,
   Mercury KPI cards with per-card --accent, hairline panels, signal pills,
   Mercury filter toolbar + table. Scoped to body.marketing-page so the older
   .page-header / .card / .data-table / .btn rules keep their effect on every
   other module that hasn't been migrated yet.
   Per-module accent: muted rose #9a5878 (Branding & Marketing).
   Reference: body.pursuits-page block above + body.finance-page.
   ========================================== */

body.marketing-page {
    --mkt-accent: #9a5878;       /* muted rose — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.marketing-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header ---------- */
body.marketing-page .mkt-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.marketing-page .mkt-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.marketing-page .mkt-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mkt-accent);
    margin: 0 0 18px;
}

body.marketing-page .mkt-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

body.marketing-page .mkt-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 32ch;
}

body.marketing-page .mkt-page-title .mkt-page-title-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.62em;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    margin-left: 10px;
    vertical-align: 0.12em;
}

body.marketing-page .mkt-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0 0 6px;
    max-width: 72ch;
    line-height: 1.5;
}

body.marketing-page .mkt-page-sub strong { color: var(--kf-ink); font-weight: 600; }

body.marketing-page .mkt-page-updated {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 0;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

body.marketing-page .mkt-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
body.marketing-page .mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.marketing-page .mkt-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.marketing-page .mkt-btn--primary:hover { background: var(--kf-navy-deep); }
body.marketing-page .mkt-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.marketing-page .mkt-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.marketing-page .mkt-btn--ghost:hover { border-color: var(--kf-navy); }
body.marketing-page .mkt-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

body.marketing-page .mkt-btn--danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.marketing-page .mkt-btn--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

body.marketing-page .mkt-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1;
}
body.marketing-page .mkt-btn-sm:hover { border-color: var(--kf-navy); color: var(--kf-navy); }
body.marketing-page .mkt-btn-sm--danger { color: var(--kf-signal-negative); }
body.marketing-page .mkt-btn-sm--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}

/* ---------- Flash notice ---------- */
body.marketing-page .mkt-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-positive);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}

/* ---------- Scope toggle (My Queue / My Submissions / All Requests) ---------- */
body.marketing-page .mkt-scope-toggle {
    display: inline-flex;
    gap: 2px;
    margin: 0 0 18px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 999px;
    padding: 3px;
}

body.marketing-page .mkt-scope-toggle a {
    padding: 7px 16px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--kf-muted);
    text-decoration: none;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-scope-toggle a:hover { color: var(--kf-ink); }
body.marketing-page .mkt-scope-toggle a.is-active {
    background: var(--kf-paper);
    color: var(--kf-navy);
    box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
    font-weight: 600;
}

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ---------- */
body.marketing-page .lr-stat-card.mkt-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.marketing-page a.lr-stat-card.mkt-stat,
body.marketing-page button.lr-stat-card.mkt-stat { cursor: pointer; }

body.marketing-page .lr-stat-card.mkt-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.09);
    border-color: var(--kf-rule);
}
body.marketing-page .lr-stat-card.mkt-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14), 0 8px 28px rgba(11, 31, 58, 0.06);
}

/* Kill the global top stripe pseudo-element used by .lr-stat-card */
body.marketing-page .lr-stat-card.mkt-stat::before { content: none; }

body.marketing-page .lr-stat-card.mkt-stat--attention {
    border-left-color: var(--kf-signal-warning);
}

body.marketing-page .lr-stat-card.mkt-stat .mkt-stat-body { min-width: 0; flex: 1; }

body.marketing-page .lr-stat-card.mkt-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}

body.marketing-page .lr-stat-card.mkt-stat .lr-stat-value {
    /* keep global clamp(20px, 2.1vw, 26px) */
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.marketing-page .lr-stat-card.mkt-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

body.marketing-page .lr-stat-card.mkt-stat .lr-stat-sub .mkt-substat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-right: 8px;
    color: var(--kf-muted);
}
body.marketing-page .lr-stat-card.mkt-stat .lr-stat-sub .mkt-substat-num {
    font-weight: 600;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------- Section eyebrow ---------- */
body.marketing-page .mkt-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 14px;
    flex-wrap: wrap;
}
body.marketing-page .mkt-section-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
}
body.marketing-page .mkt-section-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.marketing-page .mkt-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.marketing-page .mkt-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ---------- Panel ---------- */
body.marketing-page .mkt-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

body.marketing-page .mkt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}

body.marketing-page .mkt-panel-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0;
    line-height: 1.25;
}

body.marketing-page .mkt-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 4px 0 0;
}

body.marketing-page .mkt-panel-body { padding: 20px 24px; }
body.marketing-page .mkt-panel-body--flush { padding: 0; }

body.marketing-page .mkt-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Category grid (cards with --accent stripe) ---------- */
body.marketing-page .mkt-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

body.marketing-page .mkt-cat-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.04);
    text-decoration: none;
    color: inherit;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-cat-card,
body.marketing-page .mkt-cat-card:hover,
body.marketing-page .mkt-cat-card:focus,
body.marketing-page .mkt-cat-card:visited {
    text-decoration: none;
}
body.marketing-page .mkt-cat-card:hover {
    border-color: var(--kf-rule);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(11, 31, 58, 0.07);
}

body.marketing-page .mkt-cat-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.marketing-page .mkt-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, var(--kf-muted));
    flex-shrink: 0;
}

body.marketing-page .mkt-cat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kf-muted);
}

body.marketing-page .mkt-cat-value {
    font-family: "Source Sans 3", sans-serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--kf-navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.marketing-page .mkt-cat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    line-height: 1.5;
    margin: 0;
}

body.marketing-page .mkt-cat-sub .mkt-cat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-right: 10px;
    white-space: nowrap;
}
body.marketing-page .mkt-cat-sub .mkt-cat-chip-num {
    font-weight: 600;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
}
body.marketing-page .mkt-cat-sub .mkt-cat-chip--warn .mkt-cat-chip-num { color: var(--kf-signal-warning); }
body.marketing-page .mkt-cat-sub .mkt-cat-chip--prog .mkt-cat-chip-num { color: var(--kf-signal-info); }
body.marketing-page .mkt-cat-sub .mkt-cat-chip--done .mkt-cat-chip-num { color: var(--kf-signal-positive); }

/* ---------- Trend chart ---------- */
body.marketing-page .mkt-trend {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 180px;
    padding: 8px 4px 0;
}
body.marketing-page .mkt-trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
body.marketing-page .mkt-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 140px;
    width: 100%;
    justify-content: center;
}
body.marketing-page .mkt-trend-bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-trend-bar--submitted { background: var(--kf-signal-info); }
body.marketing-page .mkt-trend-bar--completed { background: var(--kf-signal-positive); }
body.marketing-page .mkt-trend-col:hover .mkt-trend-bar { opacity: 0.82; }
body.marketing-page .mkt-trend-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    color: var(--kf-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.01em;
}

/* ---------- Filter toolbar ---------- */
body.marketing-page .mkt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

body.marketing-page .mkt-toolbar-meta {
    margin-left: auto;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

body.marketing-page .mkt-select,
body.marketing-page .mkt-input {
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.marketing-page .mkt-input { min-width: 220px; flex: 1 1 240px; max-width: 420px; }
body.marketing-page .mkt-select { min-width: 160px; padding-right: 32px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
body.marketing-page .mkt-input:focus,
body.marketing-page .mkt-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background-color: #fbf8f1;
}

body.marketing-page .mkt-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-check input { accent-color: var(--kf-navy); width: 14px; height: 14px; }
body.marketing-page .mkt-check:hover { border-color: var(--kf-navy); }

body.marketing-page .mkt-toolbar-clear {
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 0 6px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-toolbar-clear:hover {
    color: var(--kf-navy);
    border-bottom-color: var(--kf-rule);
}

/* ---------- Table ---------- */
body.marketing-page .mkt-table-wrap {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.marketing-page .mkt-table-scroll { overflow-x: auto; }

body.marketing-page .mkt-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
}

body.marketing-page .mkt-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper);
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
}
body.marketing-page .mkt-table thead th:first-child { padding-left: 24px; }
body.marketing-page .mkt-table thead th:last-child { padding-right: 24px; text-align: right; }

body.marketing-page .mkt-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--kf-ink);
    border-bottom: 1px solid var(--kf-rule-soft);
    vertical-align: middle;
}
body.marketing-page .mkt-table tbody td:first-child { padding-left: 24px; }
body.marketing-page .mkt-table tbody td:last-child { padding-right: 24px; text-align: right; }
body.marketing-page .mkt-table tbody tr:last-child td { border-bottom: none; }
body.marketing-page .mkt-table tbody tr { transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1); }
body.marketing-page .mkt-table tbody tr:hover { background: var(--kf-paper-deep); }

body.marketing-page .mkt-table .mkt-cell-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--kf-muted);
    white-space: nowrap;
}
body.marketing-page .mkt-table .mkt-cell-summary {
    font-weight: 500;
    color: var(--kf-ink);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.003em;
}
body.marketing-page .mkt-table .mkt-cell-sub {
    font-size: 11.5px;
    color: var(--kf-muted);
    margin-top: 2px;
    letter-spacing: 0.005em;
}
body.marketing-page .mkt-table .mkt-cell-muted { color: var(--kf-muted); }
body.marketing-page .mkt-table .mkt-cell-unassigned {
    color: var(--kf-muted);
    font-style: italic;
}
body.marketing-page .mkt-table .mkt-cell-date {
    color: var(--kf-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.marketing-page .mkt-table-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
}
body.marketing-page .mkt-table-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.marketing-page .mkt-table-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Category tag (table cell) ---------- */
body.marketing-page .mkt-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
body.marketing-page .mkt-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tag-color, var(--kf-muted));
    flex-shrink: 0;
}

/* ---------- Status pills (signal palette) ---------- */
body.marketing-page .mkt-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
body.marketing-page .mkt-pill--pending {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.marketing-page .mkt-pill--progress {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}
body.marketing-page .mkt-pill--hold {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}
body.marketing-page .mkt-pill--done {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.marketing-page .mkt-pill--rejected {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.marketing-page .mkt-pill--lead {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}

/* ---------- Detail rows (definition list) ---------- */
body.marketing-page .mkt-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    font-size: 13.5px;
}
body.marketing-page .mkt-meta-grid > .mkt-meta-wide { grid-column: 1 / -1; }
body.marketing-page .mkt-meta-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 4px;
}
body.marketing-page .mkt-meta-value {
    margin: 0;
    color: var(--kf-ink);
    line-height: 1.5;
}
body.marketing-page .mkt-meta-value--muted { color: var(--kf-muted); }
body.marketing-page .mkt-meta-value a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    word-break: break-all;
}
body.marketing-page .mkt-meta-value a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }
body.marketing-page .mkt-meta-value pre {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
    color: var(--kf-ink);
    line-height: 1.55;
}
body.marketing-page .mkt-meta-divider {
    grid-column: 1 / -1;
    border-top: 1px solid var(--kf-rule-soft);
    padding-top: 16px;
    margin-top: 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.marketing-page .mkt-meta-callout {
    grid-column: 1 / -1;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-info);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 6px;
}
body.marketing-page .mkt-meta-callout .mkt-meta-label { margin-bottom: 6px; }

/* ---------- Form (Mercury) ---------- */
body.marketing-page .mkt-form { display: flex; flex-direction: column; gap: 16px; }
body.marketing-page .mkt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
body.marketing-page .mkt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.marketing-page .mkt-field label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.marketing-page .mkt-field input,
body.marketing-page .mkt-field select,
body.marketing-page .mkt-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .mkt-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
body.marketing-page .mkt-field input:focus,
body.marketing-page .mkt-field select:focus,
body.marketing-page .mkt-field textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.marketing-page .mkt-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* Brand the legacy .btn / .btn-primary inside marketing pages so any markup
   we did not rewrite (request_form partial, searchable-select, etc.) still
   reads Mercury. The .btn rules are unscoped in the legacy CSS so this is
   the safe specificity boost. */
body.marketing-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-navy);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.marketing-page .btn:hover { border-color: var(--kf-navy); }
body.marketing-page .btn-primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #f6f3ec;
}
body.marketing-page .btn-primary:hover { background: var(--kf-navy-deep); border-color: var(--kf-navy-deep); }
body.marketing-page .btn-sm { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
body.marketing-page .btn-danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.marketing-page .btn-danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

/* Tame legacy form-group inputs that the request_form partial still uses */
body.marketing-page .form-group input[type="text"],
body.marketing-page .form-group input[type="email"],
body.marketing-page .form-group input[type="date"],
body.marketing-page .form-group input[type="number"],
body.marketing-page .form-group input[type="url"],
body.marketing-page .form-group select,
body.marketing-page .form-group textarea {
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    width: 100%;
}
body.marketing-page .form-group input:focus,
body.marketing-page .form-group select:focus,
body.marketing-page .form-group textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.marketing-page .form-group label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    display: block;
    margin-bottom: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.marketing-page .lr-stat-card.mkt-stat,
    body.marketing-page .mkt-btn,
    body.marketing-page .mkt-btn-sm,
    body.marketing-page .mkt-cat-card,
    body.marketing-page .mkt-scope-toggle a,
    body.marketing-page .mkt-select,
    body.marketing-page .mkt-input,
    body.marketing-page .mkt-table tbody tr,
    body.marketing-page .mkt-trend-bar,
    body.marketing-page .mkt-field input,
    body.marketing-page .mkt-field select,
    body.marketing-page .mkt-field textarea { transition: none; }
    body.marketing-page .lr-stat-card.mkt-stat:hover,
    body.marketing-page .mkt-cat-card:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.marketing-page .main { padding: 32px 28px 64px; }
    body.marketing-page .mkt-page-head { margin-bottom: 28px; }
    body.marketing-page .mkt-meta-grid { grid-template-columns: 1fr; }
    body.marketing-page .mkt-table .mkt-cell-summary { max-width: 240px; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.marketing-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.marketing-page .mkt-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.marketing-page .mkt-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.marketing-page .mkt-page-sub { font-size: 13px; }
    body.marketing-page .mkt-page-actions { width: 100%; }
    body.marketing-page .mkt-page-actions .mkt-btn { flex: 1; }
    body.marketing-page .lr-stat-card.mkt-stat { padding: 18px 20px; }
    body.marketing-page .mkt-panel { border-radius: 12px; }
    body.marketing-page .mkt-panel-head { padding: 16px 18px; gap: 8px; }
    body.marketing-page .mkt-panel-title { font-size: 15px; }
    body.marketing-page .mkt-panel-body { padding: 16px 18px; }
    body.marketing-page .mkt-toolbar { gap: 8px; }
    body.marketing-page .mkt-select,
    body.marketing-page .mkt-input { font-size: 16px; min-width: 100%; flex: 1 1 100%; max-width: none; }
    body.marketing-page .mkt-check { width: 100%; }
    body.marketing-page .mkt-toolbar-meta { margin-left: 0; width: 100%; }
    body.marketing-page .mkt-form-row { grid-template-columns: 1fr; gap: 14px; }
    body.marketing-page .mkt-field input,
    body.marketing-page .mkt-field select,
    body.marketing-page .mkt-field textarea { font-size: 16px; }
    body.marketing-page .mkt-form-actions { flex-direction: column-reverse; }
    body.marketing-page .mkt-form-actions .mkt-btn { width: 100%; }
    body.marketing-page .mkt-trend { height: 150px; gap: 8px; }
    body.marketing-page .mkt-trend-bars { height: 110px; }
    body.marketing-page .mkt-trend-bar { width: 10px; }
}


/* ==========================================
   Tenant Admin — Mercury / Brex (ta1)
   ==========================================
   Mirrors Marketing (mkt1) + Pursuits (pur6): paper background, serif page
   title, Mercury KPI cards with per-card --accent, hairline panels, signal
   pills, Mercury filter toolbar + table. Scoped to body.tenant-admin-page
   so the older .page-header / .card / .lr-table / .btn rules keep their
   effect on every TA dashboard view that has NOT been reskinned yet (the
   dashboard intentionally stays on its legacy chrome — user wants
   declutter options first before any visual redesign there).
   Per-module accent: muted plum #6e4a6a (Tenant Admin).
   ========================================== */

body.tenant-admin-page {
    --ta-accent: #6e4a6a;        /* muted plum — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.tenant-admin-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Back link ---------- */
body.tenant-admin-page .ta-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kf-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-back:hover { color: var(--kf-navy); }
body.tenant-admin-page .ta-back svg { stroke-width: 2; }

/* ---------- Page header ---------- */
body.tenant-admin-page .ta-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.tenant-admin-page .ta-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.tenant-admin-page .ta-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ta-accent);
    margin: 0 0 18px;
}

body.tenant-admin-page .ta-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

body.tenant-admin-page .ta-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 36ch;
}

body.tenant-admin-page .ta-page-title .ta-page-title-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    margin-left: 12px;
    vertical-align: 0.14em;
}

body.tenant-admin-page .ta-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0;
    max-width: 72ch;
    line-height: 1.5;
}

body.tenant-admin-page .ta-page-sub strong { color: var(--kf-ink); font-weight: 600; }

body.tenant-admin-page .ta-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
body.tenant-admin-page .ta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

body.tenant-admin-page .ta-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.tenant-admin-page .ta-btn--primary:hover { background: var(--kf-navy-deep); }
body.tenant-admin-page .ta-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.tenant-admin-page .ta-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.tenant-admin-page .ta-btn--ghost:hover { border-color: var(--kf-navy); }
body.tenant-admin-page .ta-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

body.tenant-admin-page .ta-btn--danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.tenant-admin-page .ta-btn--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

body.tenant-admin-page .ta-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1;
}
body.tenant-admin-page .ta-btn-sm:hover { border-color: var(--kf-navy); color: var(--kf-navy); }
body.tenant-admin-page .ta-btn-sm.ta-btn-sm--primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: var(--kf-paper);
}
body.tenant-admin-page .ta-btn-sm.ta-btn-sm--primary:hover {
    background: var(--kf-navy-deep);
    border-color: var(--kf-navy-deep);
    color: var(--kf-paper);
}

/* ---------- Flash notice ---------- */
body.tenant-admin-page .ta-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-positive);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.tenant-admin-page .ta-flash--warn { border-left-color: var(--kf-signal-warning); }
body.tenant-admin-page .ta-flash--error { border-left-color: var(--kf-signal-negative); }

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ---------- */
body.tenant-admin-page .lr-stat-card.ta-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.tenant-admin-page a.lr-stat-card.ta-stat,
body.tenant-admin-page button.lr-stat-card.ta-stat { cursor: pointer; }

body.tenant-admin-page .lr-stat-card.ta-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.09);
    border-color: var(--kf-rule);
}
body.tenant-admin-page .lr-stat-card.ta-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14), 0 8px 28px rgba(11, 31, 58, 0.06);
}

/* Kill the global top stripe pseudo-element used by .lr-stat-card */
body.tenant-admin-page .lr-stat-card.ta-stat::before { content: none; }

body.tenant-admin-page .lr-stat-card.ta-stat--attention {
    border-left-color: var(--kf-signal-negative);
}

body.tenant-admin-page .lr-stat-card.ta-stat .ta-stat-body { min-width: 0; flex: 1; }

body.tenant-admin-page .lr-stat-card.ta-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}

body.tenant-admin-page .lr-stat-card.ta-stat .lr-stat-value {
    /* keep global clamp(20px, 2.1vw, 26px) */
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.tenant-admin-page .lr-stat-card.ta-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* ---------- Section eyebrow ---------- */
body.tenant-admin-page .ta-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 14px;
    flex-wrap: wrap;
}
body.tenant-admin-page .ta-section-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
}
body.tenant-admin-page .ta-section-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Panel ---------- */
body.tenant-admin-page .ta-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    margin: 0 0 24px;
}

body.tenant-admin-page .ta-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}

body.tenant-admin-page .ta-panel-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.tenant-admin-page .ta-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

body.tenant-admin-page .ta-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 4px 0 0;
}

body.tenant-admin-page .ta-panel-body { padding: 20px 24px; }
body.tenant-admin-page .ta-panel-body--flush { padding: 0; }

body.tenant-admin-page .ta-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}
body.tenant-admin-page .ta-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.tenant-admin-page .ta-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Filter toolbar ---------- */
body.tenant-admin-page .ta-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

body.tenant-admin-page .ta-toolbar-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin-right: 4px;
}

body.tenant-admin-page .ta-toolbar-meta {
    margin-left: auto;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

body.tenant-admin-page .ta-select,
body.tenant-admin-page .ta-input {
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.tenant-admin-page .ta-input { min-width: 220px; flex: 1 1 240px; max-width: 420px; }
body.tenant-admin-page .ta-select { min-width: 160px; padding-right: 32px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
body.tenant-admin-page .ta-input:focus,
body.tenant-admin-page .ta-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background-color: #fbf8f1;
}

body.tenant-admin-page .ta-toolbar-clear {
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 0 6px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-toolbar-clear:hover {
    color: var(--kf-navy);
    border-bottom-color: var(--kf-rule);
}

/* Segmented control (used for direction/status/type filters) */
body.tenant-admin-page .ta-segment {
    display: inline-flex;
    gap: 2px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 999px;
    padding: 3px;
}
body.tenant-admin-page .ta-segment a,
body.tenant-admin-page .ta-segment button {
    padding: 6px 14px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--kf-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-segment a:hover,
body.tenant-admin-page .ta-segment button:hover { color: var(--kf-ink); }
body.tenant-admin-page .ta-segment .is-active,
body.tenant-admin-page .ta-segment a.is-active,
body.tenant-admin-page .ta-segment button.is-active {
    background: var(--kf-paper);
    color: var(--kf-navy);
    box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
    font-weight: 600;
}

/* ---------- Table ---------- */
body.tenant-admin-page .ta-table-wrap {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.tenant-admin-page .ta-table-scroll { overflow-x: auto; }

body.tenant-admin-page .ta-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
}

body.tenant-admin-page .ta-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper);
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
}
body.tenant-admin-page .ta-table thead th:first-child { padding-left: 24px; }
body.tenant-admin-page .ta-table thead th:last-child { padding-right: 24px; text-align: right; }

body.tenant-admin-page .ta-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--kf-ink);
    border-bottom: 1px solid var(--kf-rule-soft);
    vertical-align: middle;
}
body.tenant-admin-page .ta-table tbody td:first-child { padding-left: 24px; }
body.tenant-admin-page .ta-table tbody td:last-child { padding-right: 24px; text-align: right; }
body.tenant-admin-page .ta-table tbody tr:last-child td { border-bottom: none; }
body.tenant-admin-page .ta-table tbody tr { transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1); }
body.tenant-admin-page .ta-table tbody tr:hover { background: var(--kf-paper-deep); }

body.tenant-admin-page .ta-table .ta-cell-strong {
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
}
body.tenant-admin-page .ta-table .ta-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-table .ta-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}
body.tenant-admin-page .ta-table .ta-cell-muted { color: var(--kf-muted); }
body.tenant-admin-page .ta-table .ta-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--kf-muted);
    white-space: nowrap;
}
body.tenant-admin-page .ta-table .ta-cell-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.tenant-admin-page .ta-table .ta-cell-date {
    color: var(--kf-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.tenant-admin-page .ta-table .ta-months {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
body.tenant-admin-page .ta-table .ta-months--urgent { color: var(--kf-signal-negative); }
body.tenant-admin-page .ta-table .ta-months--soon { color: var(--kf-signal-warning); }
body.tenant-admin-page .ta-table .ta-months--ok { color: var(--kf-signal-positive); }

body.tenant-admin-page .ta-table-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
}
body.tenant-admin-page .ta-table-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.tenant-admin-page .ta-table-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Status / direction pills (signal palette) ---------- */
body.tenant-admin-page .ta-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
body.tenant-admin-page .ta-pill--active,
body.tenant-admin-page .ta-pill--done,
body.tenant-admin-page .ta-pill--positive {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.tenant-admin-page .ta-pill--expiring,
body.tenant-admin-page .ta-pill--warn,
body.tenant-admin-page .ta-pill--stepped {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.tenant-admin-page .ta-pill--expired,
body.tenant-admin-page .ta-pill--negative {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.tenant-admin-page .ta-pill--renewed,
body.tenant-admin-page .ta-pill--info,
body.tenant-admin-page .ta-pill--leased {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}
body.tenant-admin-page .ta-pill--muted,
body.tenant-admin-page .ta-pill--inactive {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}
/* "Owned (sublet)" uses the module accent — landlord direction */
body.tenant-admin-page .ta-pill--owned {
    background: rgba(110, 74, 106, 0.10);
    color: var(--ta-accent);
}
/* Sector / type tag — neutral */
body.tenant-admin-page .ta-pill--tag {
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    border: 1px solid var(--kf-rule-soft);
    font-weight: 500;
}
/* Primary contact badge */
body.tenant-admin-page .ta-pill--primary {
    background: rgba(154, 123, 63, 0.12);
    color: var(--kf-accent);
    font-weight: 600;
}

/* ---------- Detail meta grid ---------- */
body.tenant-admin-page .ta-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    font-size: 13.5px;
}
body.tenant-admin-page .ta-meta-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.tenant-admin-page .ta-meta-grid > .ta-meta-wide { grid-column: 1 / -1; }
body.tenant-admin-page .ta-meta-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 4px;
}
body.tenant-admin-page .ta-meta-value {
    margin: 0;
    color: var(--kf-ink);
    line-height: 1.5;
}
body.tenant-admin-page .ta-meta-value--muted { color: var(--kf-muted); }
body.tenant-admin-page .ta-meta-value--num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
body.tenant-admin-page .ta-meta-value a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.tenant-admin-page .ta-meta-value a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* PIC / contact card */
body.tenant-admin-page .ta-pic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
body.tenant-admin-page .ta-pic {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-pic:hover { border-color: var(--kf-rule); }
body.tenant-admin-page .ta-pic--primary { border-left: 2px solid var(--kf-accent); }
body.tenant-admin-page .ta-pic-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
}
body.tenant-admin-page .ta-pic-name {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    color: var(--kf-ink);
    font-size: 14px;
}
body.tenant-admin-page .ta-pic-role {
    font-size: 12px;
    color: var(--kf-muted);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}
body.tenant-admin-page .ta-pic-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}
body.tenant-admin-page .ta-pic-contact a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-pic-contact a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Form (Mercury) — works with legacy form-group / rbac-section ---------- */
body.tenant-admin-page .rbac-section {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    margin: 0 0 20px;
    overflow: hidden;
}
body.tenant-admin-page .rbac-section-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
body.tenant-admin-page .rbac-section-header h3 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
body.tenant-admin-page .rbac-section-body { padding: 22px 24px; }

body.tenant-admin-page .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.tenant-admin-page .form-group label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    display: block;
    margin: 0 0 2px;
}
body.tenant-admin-page .form-group input[type="text"],
body.tenant-admin-page .form-group input[type="email"],
body.tenant-admin-page .form-group input[type="tel"],
body.tenant-admin-page .form-group input[type="date"],
body.tenant-admin-page .form-group input[type="number"],
body.tenant-admin-page .form-group input[type="url"],
body.tenant-admin-page .form-group input[type="file"],
body.tenant-admin-page .form-group select,
body.tenant-admin-page .form-group textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.tenant-admin-page .form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
body.tenant-admin-page .form-group input:focus,
body.tenant-admin-page .form-group select:focus,
body.tenant-admin-page .form-group textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.tenant-admin-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
body.tenant-admin-page .form-row--3 { grid-template-columns: repeat(3, 1fr); }

body.tenant-admin-page .rbac-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding: 16px 0 0;
    border-top: 1px solid var(--kf-rule-soft);
}

/* Tame legacy .btn buttons inside TA pages */
body.tenant-admin-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-navy);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.tenant-admin-page .btn:hover { border-color: var(--kf-navy); }
body.tenant-admin-page .btn-primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #f6f3ec;
}
body.tenant-admin-page .btn-primary:hover { background: var(--kf-navy-deep); border-color: var(--kf-navy-deep); }
body.tenant-admin-page .btn-outline {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-navy);
}
body.tenant-admin-page .btn-outline:hover { border-color: var(--kf-navy); }
body.tenant-admin-page .btn-sm { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
body.tenant-admin-page .btn-danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.tenant-admin-page .btn-danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.tenant-admin-page .lr-stat-card.ta-stat,
    body.tenant-admin-page .ta-btn,
    body.tenant-admin-page .ta-btn-sm,
    body.tenant-admin-page .ta-segment a,
    body.tenant-admin-page .ta-segment button,
    body.tenant-admin-page .ta-select,
    body.tenant-admin-page .ta-input,
    body.tenant-admin-page .ta-table tbody tr,
    body.tenant-admin-page .ta-pic,
    body.tenant-admin-page .form-group input,
    body.tenant-admin-page .form-group select,
    body.tenant-admin-page .form-group textarea { transition: none; }
    body.tenant-admin-page .lr-stat-card.ta-stat:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.tenant-admin-page .main { padding: 32px 28px 64px; }
    body.tenant-admin-page .ta-page-head { margin-bottom: 28px; }
    body.tenant-admin-page .ta-meta-grid,
    body.tenant-admin-page .ta-meta-grid--3 { grid-template-columns: 1fr 1fr; }
    body.tenant-admin-page .form-row,
    body.tenant-admin-page .form-row--3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.tenant-admin-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.tenant-admin-page .ta-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.tenant-admin-page .ta-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.tenant-admin-page .ta-page-sub { font-size: 13px; }
    body.tenant-admin-page .ta-page-actions { width: 100%; }
    body.tenant-admin-page .ta-page-actions .ta-btn,
    body.tenant-admin-page .ta-page-actions .btn { flex: 1; }
    body.tenant-admin-page .lr-stat-card.ta-stat { padding: 18px 20px; }
    body.tenant-admin-page .ta-panel { border-radius: 12px; }
    body.tenant-admin-page .ta-panel-head { padding: 16px 18px; gap: 8px; }
    body.tenant-admin-page .ta-panel-title { font-size: 15px; }
    body.tenant-admin-page .ta-panel-body { padding: 16px 18px; }
    body.tenant-admin-page .ta-toolbar { gap: 8px; }
    body.tenant-admin-page .ta-select,
    body.tenant-admin-page .ta-input { font-size: 16px; min-width: 100%; flex: 1 1 100%; max-width: none; }
    body.tenant-admin-page .ta-toolbar-meta { margin-left: 0; width: 100%; }
    body.tenant-admin-page .ta-meta-grid,
    body.tenant-admin-page .ta-meta-grid--3 { grid-template-columns: 1fr; }
    body.tenant-admin-page .form-row,
    body.tenant-admin-page .form-row--3 { grid-template-columns: 1fr; gap: 14px; }
    body.tenant-admin-page .rbac-section-body { padding: 18px; }
    body.tenant-admin-page .form-group input,
    body.tenant-admin-page .form-group select,
    body.tenant-admin-page .form-group textarea { font-size: 16px; }
    body.tenant-admin-page .rbac-actions { flex-direction: column-reverse; }
    body.tenant-admin-page .rbac-actions .btn,
    body.tenant-admin-page .rbac-actions .ta-btn { width: 100%; }
}

/* ==========================================
   TENANT ADMIN — Dashboard hero (Option A)
   Full-width panel that owns the visual centre of the dashboard:
   serif numeral count, eyebrow tone (warning / positive), two
   link-style CTAs. Sits above the 4-card KPI strip.
   ========================================== */

body.tenant-admin-page .ta-updated-meta {
    color: var(--kf-muted);
    font-weight: 400;
}

body.tenant-admin-page .ta-hero {
    border-left: 2px solid var(--kf-signal-warning);
    margin: 0 0 24px;
}
body.tenant-admin-page .ta-hero--positive { border-left-color: var(--kf-signal-positive); }
body.tenant-admin-page .ta-hero--warn { border-left-color: var(--kf-signal-warning); }

body.tenant-admin-page .ta-hero-body {
    padding: 32px 32px 28px;
    max-width: 72ch;
}

body.tenant-admin-page .ta-hero-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-signal-warning);
    margin: 0 0 14px;
}
body.tenant-admin-page .ta-hero--positive .ta-hero-eyebrow { color: var(--kf-signal-positive); }

body.tenant-admin-page .ta-hero-numeral {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5.4vw, 56px);
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1;
    color: var(--kf-navy);
    margin: 0 0 14px;
    font-variant-numeric: tabular-nums;
}

body.tenant-admin-page .ta-hero-lede {
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    color: var(--kf-ink);
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 60ch;
}
body.tenant-admin-page .ta-hero-lede strong {
    font-weight: 600;
    color: var(--kf-navy);
    font-variant-numeric: tabular-nums;
}

body.tenant-admin-page .ta-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

body.tenant-admin-page .ta-hero-cta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kf-navy);
    text-decoration: none;
    letter-spacing: 0.005em;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 2px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-hero-cta:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}
body.tenant-admin-page .ta-hero-cta:focus-visible {
    outline: none;
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
    box-shadow: 0 2px 0 0 var(--kf-accent);
}
body.tenant-admin-page .ta-hero-cta--muted { color: var(--kf-muted); }

/* KPI strip spacing — sits between hero and the section title */
body.tenant-admin-page .ta-kpi-strip { margin: 0 0 8px; }

/* "See all expiring" inline link in section meta */
body.tenant-admin-page .ta-section-meta .ta-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 1px;
    font-size: 12px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tenant-admin-page .ta-section-meta .ta-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}

@media (max-width: 900px) {
    body.tenant-admin-page .ta-hero-body { padding: 26px 24px 24px; }
    body.tenant-admin-page .ta-hero-numeral { font-size: clamp(36px, 7vw, 46px); }
}

@media (max-width: 640px) {
    body.tenant-admin-page .ta-hero-body { padding: 22px 20px 22px; }
    body.tenant-admin-page .ta-hero-numeral { font-size: clamp(34px, 9vw, 42px); }
    body.tenant-admin-page .ta-hero-lede { font-size: 14px; }
    body.tenant-admin-page .ta-hero-actions { gap: 14px 20px; }
    body.tenant-admin-page .ta-hero-cta { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    body.tenant-admin-page .ta-hero-cta { transition: none; }
}

/* ==========================================
   Property Management — Mercury / Brex (pm1)
   ==========================================
   Mirrors Marketing (mkt1) + Tenant Admin (ta1) + Pursuits (pur6): paper
   background, serif page title, Mercury KPI cards with per-card --accent,
   hairline panels, signal pills, Mercury filter toolbar + table. Scoped
   to body.property-management-page so the older .page-header / .card /
   .data-table / .btn rules keep their effect on every other module that
   hasn't been migrated yet.
   Per-module accent: muted stone #5e6a78 (Property Management).
   Reference: body.tenant-admin-page block above.
   ========================================== */

body.property-management-page {
    --pm-accent: #5e6a78;        /* muted stone — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.property-management-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Back link ---------- */
body.property-management-page .pm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kf-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-back:hover { color: var(--kf-navy); }

/* ---------- Page header ---------- */
body.property-management-page .pm-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.property-management-page .pm-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.property-management-page .pm-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-accent);
    margin: 0 0 18px;
}

body.property-management-page .pm-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

body.property-management-page .pm-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 36ch;
}

body.property-management-page .pm-page-title .pm-page-title-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    margin-left: 12px;
    vertical-align: 0.14em;
}

body.property-management-page .pm-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0;
    max-width: 72ch;
    line-height: 1.5;
}
body.property-management-page .pm-page-sub strong { color: var(--kf-ink); font-weight: 600; }
body.property-management-page .pm-page-sub a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-page-sub a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

body.property-management-page .pm-updated-meta {
    color: var(--kf-muted);
    font-weight: 400;
}

body.property-management-page .pm-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
body.property-management-page .pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

body.property-management-page .pm-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.property-management-page .pm-btn--primary:hover { background: var(--kf-navy-deep); }
body.property-management-page .pm-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.property-management-page .pm-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.property-management-page .pm-btn--ghost:hover { border-color: var(--kf-navy); }
body.property-management-page .pm-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

body.property-management-page .pm-btn--danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.property-management-page .pm-btn--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

body.property-management-page .pm-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1;
}
body.property-management-page .pm-btn-sm:hover { border-color: var(--kf-navy); color: var(--kf-navy); }
body.property-management-page .pm-btn-sm--danger { color: var(--kf-signal-negative); }
body.property-management-page .pm-btn-sm--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}

/* ---------- Flash notice ---------- */
body.property-management-page .pm-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-positive);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.property-management-page .pm-flash--warn { border-left-color: var(--kf-signal-warning); }
body.property-management-page .pm-flash--error { border-left-color: var(--kf-signal-negative); }

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ---------- */
body.property-management-page .lr-stat-card.pm-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.property-management-page a.lr-stat-card.pm-stat,
body.property-management-page button.lr-stat-card.pm-stat { cursor: pointer; }

body.property-management-page .lr-stat-card.pm-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.09);
    border-color: var(--kf-rule);
}
body.property-management-page .lr-stat-card.pm-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14), 0 8px 28px rgba(11, 31, 58, 0.06);
}

/* Kill the global top stripe pseudo-element used by .lr-stat-card */
body.property-management-page .lr-stat-card.pm-stat::before { content: none; }

body.property-management-page .lr-stat-card.pm-stat--attention {
    border-left-color: var(--kf-signal-negative);
}

body.property-management-page .lr-stat-card.pm-stat .pm-stat-body { min-width: 0; flex: 1; }

body.property-management-page .lr-stat-card.pm-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}

body.property-management-page .lr-stat-card.pm-stat .lr-stat-value {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.property-management-page .lr-stat-card.pm-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* ---------- Section eyebrow ---------- */
body.property-management-page .pm-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 14px;
    flex-wrap: wrap;
}
body.property-management-page .pm-section-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
}
body.property-management-page .pm-section-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.property-management-page .pm-section-meta a,
body.property-management-page .pm-section-meta .pm-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 1px;
    font-size: 12px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-section-meta a:hover,
body.property-management-page .pm-section-meta .pm-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}

/* ---------- Panel ---------- */
body.property-management-page .pm-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    margin: 0 0 24px;
}

body.property-management-page .pm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}

body.property-management-page .pm-panel-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.property-management-page .pm-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

body.property-management-page .pm-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 4px 0 0;
}

body.property-management-page .pm-panel-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
}

body.property-management-page .pm-panel-body { padding: 20px 24px; }
body.property-management-page .pm-panel-body--flush { padding: 0; }

body.property-management-page .pm-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}
body.property-management-page .pm-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.property-management-page .pm-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Table ---------- */
body.property-management-page .pm-table-wrap {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.property-management-page .pm-table-scroll { overflow-x: auto; }

body.property-management-page .pm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
}

body.property-management-page .pm-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper);
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
}
body.property-management-page .pm-table thead th:first-child { padding-left: 24px; }
body.property-management-page .pm-table thead th:last-child { padding-right: 24px; }
body.property-management-page .pm-table thead th.num { text-align: right; }
body.property-management-page .pm-table thead th.center { text-align: center; }
body.property-management-page .pm-table thead th.actions { text-align: right; padding-right: 24px; }

body.property-management-page .pm-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--kf-ink);
    border-bottom: 1px solid var(--kf-rule-soft);
    vertical-align: middle;
}
body.property-management-page .pm-table tbody td:first-child { padding-left: 24px; }
body.property-management-page .pm-table tbody td:last-child { padding-right: 24px; }
body.property-management-page .pm-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.property-management-page .pm-table tbody td.center { text-align: center; }
body.property-management-page .pm-table tbody td.actions { text-align: right; white-space: nowrap; }
body.property-management-page .pm-table tbody tr:last-child td { border-bottom: none; }
body.property-management-page .pm-table tbody tr { transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1); }
body.property-management-page .pm-table tbody tr:hover { background: var(--kf-paper-deep); }
body.property-management-page .pm-table tbody tr.pm-row-expandable { cursor: pointer; }

body.property-management-page .pm-table .pm-cell-strong {
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
}
body.property-management-page .pm-table .pm-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-table .pm-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}
body.property-management-page .pm-table .pm-cell-muted { color: var(--kf-muted); }
body.property-management-page .pm-table .pm-cell-sub {
    display: block;
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0.005em;
}
body.property-management-page .pm-table .pm-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--kf-muted);
    background: var(--kf-paper-deep);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
body.property-management-page .pm-table .pm-cell-date {
    color: var(--kf-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.property-management-page .pm-table .pm-expand-icon {
    display: inline-block;
    font-size: 10px;
    color: var(--kf-muted);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}
body.property-management-page .pm-table .pm-row-expandable.is-open .pm-expand-icon { transform: rotate(90deg); }

body.property-management-page .pm-table-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
}
body.property-management-page .pm-table-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.property-management-page .pm-table-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Status / direction pills (signal palette) ---------- */
body.property-management-page .pm-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
body.property-management-page .pm-pill--active,
body.property-management-page .pm-pill--in,
body.property-management-page .pm-pill--positive {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.property-management-page .pm-pill--warn {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.property-management-page .pm-pill--inactive,
body.property-management-page .pm-pill--out,
body.property-management-page .pm-pill--negative {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.property-management-page .pm-pill--info {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}
body.property-management-page .pm-pill--muted,
body.property-management-page .pm-pill--archived {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}
body.property-management-page .pm-pill--tag {
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    border: 1px solid var(--kf-rule-soft);
    font-weight: 500;
}
body.property-management-page .pm-pill--accent {
    background: rgba(94, 106, 120, 0.10);
    color: var(--pm-accent);
}

/* ---------- Toolbar (filter / search row) ---------- */
body.property-management-page .pm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

body.property-management-page .pm-toolbar-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin-right: 4px;
}

body.property-management-page .pm-toolbar-meta {
    margin-left: auto;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

body.property-management-page .pm-select,
body.property-management-page .pm-input {
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.property-management-page .pm-input { min-width: 220px; flex: 1 1 240px; max-width: 420px; }
body.property-management-page .pm-select { min-width: 160px; padding-right: 32px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
body.property-management-page .pm-input:focus,
body.property-management-page .pm-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background-color: #fbf8f1;
}

/* ---------- Detail meta grid (key/value blocks in detail views) ---------- */
body.property-management-page .pm-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    font-size: 13.5px;
}
body.property-management-page .pm-meta-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.property-management-page .pm-meta-grid > .pm-meta-wide { grid-column: 1 / -1; }
body.property-management-page .pm-meta-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 4px;
}
body.property-management-page .pm-meta-value {
    margin: 0;
    color: var(--kf-ink);
    line-height: 1.5;
    white-space: pre-line;
}
body.property-management-page .pm-meta-value--muted { color: var(--kf-muted); }
body.property-management-page .pm-meta-value--num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
body.property-management-page .pm-meta-value a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.property-management-page .pm-meta-value a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }
body.property-management-page .pm-meta-value code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--kf-paper-deep);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--kf-ink);
    letter-spacing: 0.01em;
}

/* ---------- Cost summary expansion row (in buildings table) ---------- */
body.property-management-page .pm-summary-row td {
    padding: 0;
    border-bottom: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
}
body.property-management-page .pm-summary-inner {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-summary-inner.is-open {
    max-height: 2400px;
    opacity: 1;
}
body.property-management-page .pm-summary-body {
    background: var(--kf-paper-deep);
    border-top: 1px dashed var(--kf-rule);
    padding: 22px 24px;
}
body.property-management-page .pm-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0 0 16px;
    letter-spacing: -0.005em;
}
body.property-management-page .pm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
body.property-management-page .pm-summary-tile {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 14px 16px;
}
body.property-management-page .pm-summary-tile-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--kf-muted);
    letter-spacing: 0.14em;
    margin: 0 0 6px;
}
body.property-management-page .pm-summary-tile-value {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
body.property-management-page .pm-summary-tile-value--muted { color: var(--kf-muted); font-weight: 500; }

body.property-management-page .pm-summary-breakdown {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 4px 16px;
}
body.property-management-page .pm-summary-breakdown-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--kf-muted);
    letter-spacing: 0.14em;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.property-management-page .pm-summary-breakdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: "Source Sans 3", sans-serif;
}
body.property-management-page .pm-summary-breakdown td {
    padding: 9px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
}
body.property-management-page .pm-summary-breakdown tr:last-child td { border-bottom: none; }
body.property-management-page .pm-summary-breakdown td:last-child { text-align: right; font-weight: 500; color: var(--kf-ink); }
body.property-management-page .pm-summary-breakdown .pm-summary-add { color: var(--kf-signal-positive); }
body.property-management-page .pm-summary-breakdown .pm-summary-sub { color: var(--kf-signal-negative); }
body.property-management-page .pm-summary-breakdown .pm-summary-total td {
    padding: 12px 0;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--kf-ink);
}
body.property-management-page .pm-summary-breakdown .pm-summary-result--pos td {
    color: var(--kf-signal-positive);
}
body.property-management-page .pm-summary-breakdown .pm-summary-result--neg td {
    color: var(--kf-signal-negative);
}

/* ---------- Form (Mercury) — works with legacy form-group ---------- */
body.property-management-page .pm-form-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    margin: 0 0 20px;
}
body.property-management-page .pm-form-section {
    padding: 22px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.property-management-page .pm-form-section:last-child { border-bottom: none; }
body.property-management-page .pm-form-section-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 16px;
}
body.property-management-page .pm-form-section-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    margin: -10px 0 14px;
    max-width: 64ch;
    line-height: 1.5;
}

body.property-management-page .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.property-management-page .form-group label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    display: block;
    margin: 0 0 2px;
}
body.property-management-page .form-group input[type="text"],
body.property-management-page .form-group input[type="email"],
body.property-management-page .form-group input[type="tel"],
body.property-management-page .form-group input[type="date"],
body.property-management-page .form-group input[type="number"],
body.property-management-page .form-group input[type="url"],
body.property-management-page .form-group input[type="file"],
body.property-management-page .form-group select,
body.property-management-page .form-group textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.property-management-page .form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
body.property-management-page .form-group input:focus,
body.property-management-page .form-group select:focus,
body.property-management-page .form-group textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.property-management-page .form-group .text-muted,
body.property-management-page .pm-form-hint {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    line-height: 1.5;
    letter-spacing: 0.005em;
    margin-top: 4px;
}
body.property-management-page .pm-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
body.property-management-page .pm-form-row--3 { grid-template-columns: repeat(3, 1fr); }
body.property-management-page .pm-form-row .pm-form-wide { grid-column: 1 / -1; }

body.property-management-page .pm-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    background: var(--kf-paper);
    border-top: 1px solid var(--kf-rule-soft);
}

/* Tame legacy .btn buttons inside PM pages (used by file_dropzone, csrf actions, etc.) */
body.property-management-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-navy);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.property-management-page .btn:hover { border-color: var(--kf-navy); }
body.property-management-page .btn-primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #f6f3ec;
}
body.property-management-page .btn-primary:hover { background: var(--kf-navy-deep); border-color: var(--kf-navy-deep); }
body.property-management-page .btn-outline {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-navy);
}
body.property-management-page .btn-outline:hover { border-color: var(--kf-navy); }
body.property-management-page .btn-sm { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
body.property-management-page .btn-danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.property-management-page .btn-danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

/* Chargeback method "billing-card" radio tiles — Mercury treatment over legacy markup */
body.property-management-page .billing-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    display: block;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}
body.property-management-page .billing-card:hover {
    border-color: var(--kf-navy);
}
body.property-management-page .billing-card.selected {
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 2px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.property-management-page .billing-card-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.property-management-page .billing-card-inner strong {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-navy);
    font-weight: 600;
    letter-spacing: -0.003em;
}
body.property-management-page .billing-card-inner .text-muted {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 0;
    letter-spacing: 0.005em;
}

/* Toggle switch (iKFPM cost / cost borne by company) — Mercury treatment */
body.property-management-page .salary-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
}
body.property-management-page .salary-toggle-bar strong {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    font-weight: 600;
    letter-spacing: -0.003em;
}
body.property-management-page .salary-toggle-bar .text-muted {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* Centre Manager chips (multi-picker) — Mercury treatment */
body.property-management-page .pm-cm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
body.property-management-page .pm-cm-chips:empty { display: none; }
body.property-management-page .pm-cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(94, 106, 120, 0.10);
    color: var(--kf-ink);
    padding: 4px 8px 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}
body.property-management-page .pm-cm-chip-remove {
    border: 0;
    background: transparent;
    color: var(--pm-accent);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
    transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.property-management-page .pm-cm-chip-remove:hover {
    background: rgba(94, 106, 120, 0.18);
    color: var(--kf-ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.property-management-page .lr-stat-card.pm-stat,
    body.property-management-page .pm-btn,
    body.property-management-page .pm-btn-sm,
    body.property-management-page .pm-select,
    body.property-management-page .pm-input,
    body.property-management-page .pm-table tbody tr,
    body.property-management-page .pm-summary-inner,
    body.property-management-page .pm-expand-icon,
    body.property-management-page .billing-card,
    body.property-management-page .form-group input,
    body.property-management-page .form-group select,
    body.property-management-page .form-group textarea { transition: none; }
    body.property-management-page .lr-stat-card.pm-stat:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.property-management-page .main { padding: 32px 28px 64px; }
    body.property-management-page .pm-page-head { margin-bottom: 28px; }
    body.property-management-page .pm-meta-grid,
    body.property-management-page .pm-meta-grid--3 { grid-template-columns: 1fr 1fr; }
    body.property-management-page .pm-form-row,
    body.property-management-page .pm-form-row--3 { grid-template-columns: 1fr 1fr; }
    body.property-management-page .pm-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.property-management-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.property-management-page .pm-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.property-management-page .pm-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.property-management-page .pm-page-sub { font-size: 13px; }
    body.property-management-page .pm-page-actions { width: 100%; }
    body.property-management-page .pm-page-actions .pm-btn,
    body.property-management-page .pm-page-actions .btn { flex: 1; }
    body.property-management-page .lr-stat-card.pm-stat { padding: 18px 20px; }
    body.property-management-page .pm-panel { border-radius: 12px; }
    body.property-management-page .pm-panel-head { padding: 16px 18px; gap: 8px; }
    body.property-management-page .pm-panel-title { font-size: 15px; }
    body.property-management-page .pm-panel-body { padding: 16px 18px; }
    body.property-management-page .pm-toolbar { gap: 8px; }
    body.property-management-page .pm-select,
    body.property-management-page .pm-input { font-size: 16px; min-width: 100%; flex: 1 1 100%; max-width: none; }
    body.property-management-page .pm-toolbar-meta { margin-left: 0; width: 100%; }
    body.property-management-page .pm-meta-grid,
    body.property-management-page .pm-meta-grid--3 { grid-template-columns: 1fr; }
    body.property-management-page .pm-form-row,
    body.property-management-page .pm-form-row--3 { grid-template-columns: 1fr; gap: 14px; }
    body.property-management-page .pm-form-section { padding: 18px; }
    body.property-management-page .pm-form-actions { padding: 16px 18px; flex-direction: column-reverse; }
    body.property-management-page .pm-form-actions .btn,
    body.property-management-page .pm-form-actions .pm-btn { width: 100%; }
    body.property-management-page .form-group input,
    body.property-management-page .form-group select,
    body.property-management-page .form-group textarea { font-size: 16px; }
    body.property-management-page .pm-summary-body { padding: 18px 16px; }
    body.property-management-page .pm-summary-grid { grid-template-columns: 1fr; }
}

/* === PM form fixes (pm2) ============================================== */

/* Searchable-select dropdown — use Mercury paper surface, drop the legacy
   white + pink hover (gold-dim resolves to rgba(241,60,108,0.12)). */
body.property-management-page .staff-dropdown {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.08);
    padding: 6px;
}
body.property-management-page .staff-dropdown-item { border-radius: 8px; }
body.property-management-page .staff-dropdown-item:hover,
body.property-management-page .staff-dropdown-item.is-active {
    background: var(--kf-paper-deep);
}
body.property-management-page .staff-dropdown-item.is-selected .staff-dropdown-primary {
    color: var(--kf-navy);
}
body.property-management-page .staff-dropdown-primary { color: var(--kf-ink); }
body.property-management-page .staff-dropdown-secondary,
body.property-management-page .staff-dropdown-empty { color: var(--kf-muted); }
body.property-management-page .staff-dropdown-chip {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}

/* Chargeback method tiles — neutralize the legacy inner box so only the
   outer Mercury label provides the boundary. Fixes nested-border misalignment
   and the bright purple checked state. */
body.property-management-page .billing-card-inner,
body.property-management-page .billing-card input:checked + .billing-card-inner {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    min-width: 0;
}

/* Area managers picker — combobox-with-tags. Chips + search input share one
   bordered Mercury surface that mirrors the Director In-Charge / Building Admin
   field exactly: same min-height, padding, radius, focus ring, and warm bg. */
body.property-management-page .pm-cm-combo {
    position: relative;
}
body.property-management-page .pm-cm-field {
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    cursor: text;
}
body.property-management-page .pm-cm-field:focus-within {
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.property-management-page .pm-cm-field .pm-cm-chips {
    display: contents;
}
/* Chips inside the field — slightly more compact so the unselected/empty
   height matches the 40px standard input exactly. */
body.property-management-page .pm-cm-field .pm-cm-chip {
    padding: 2px 4px 2px 10px;
    font-size: 13px;
    line-height: 1.3;
}
/* Override the generic .form-group input styling for the inner search
   input — it should not look like its own bordered input. */
body.property-management-page .pm-cm-field .pm-cm-search,
body.property-management-page .pm-cm-field input.pm-cm-search[type="text"] {
    width: auto;
    flex: 1 1 140px;
    min-width: 140px;
    min-height: 0;
    height: 26px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    outline: none;
    box-shadow: none;
}
body.property-management-page .pm-cm-field .pm-cm-search:focus {
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}
body.property-management-page .pm-cm-combo .pm-cm-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 6px;
    z-index: 20;
}

/* ==========================================
   People & Culture — Mercury / Brex (pc1)
   ==========================================
   Mirrors Property Management (pm1) primitives: paper background, serif page
   title, Mercury KPI cards with per-card --accent, hairline panels, signal
   pills, Mercury filter toolbar + table + form. Scoped to
   body.people-culture-page so the older .page-header / .card / .data-table /
   .btn rules keep their effect on every other module that hasn't been
   migrated yet.
   Per-module accent: muted teal #4a7a82 (People & Culture).
   ========================================== */

body.people-culture-page {
    --pc-accent: #4a7a82;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.people-culture-page .main {
    background: var(--kf-paper-deep);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Back link ---------- */
body.people-culture-page .pc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kf-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-back:hover { color: var(--kf-navy); }

/* ---------- Page header ---------- */
body.people-culture-page .pc-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}
body.people-culture-page .pc-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}
body.people-culture-page .pc-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-accent);
    margin: 0 0 18px;
}
body.people-culture-page .pc-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 10px;
}
body.people-culture-page .pc-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy);
    margin: 0 0 8px;
    max-width: 36ch;
}
body.people-culture-page .pc-page-title .pc-page-title-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    margin-left: 12px;
    vertical-align: 0.14em;
}
body.people-culture-page .pc-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted);
    margin: 0;
    max-width: 72ch;
    line-height: 1.5;
}
body.people-culture-page .pc-page-sub strong { color: var(--kf-ink); font-weight: 600; }
body.people-culture-page .pc-page-sub a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-page-sub a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }
body.people-culture-page .pc-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
body.people-culture-page .pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.people-culture-page .pc-btn--primary {
    background: var(--kf-navy);
    color: #f6f3ec;
}
body.people-culture-page .pc-btn--primary:hover { background: var(--kf-navy-deep); }
body.people-culture-page .pc-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}
body.people-culture-page .pc-btn--ghost {
    background: var(--kf-paper);
    color: var(--kf-navy);
    border-color: var(--kf-rule);
}
body.people-culture-page .pc-btn--ghost:hover { border-color: var(--kf-navy); }
body.people-culture-page .pc-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}
body.people-culture-page .pc-btn--danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.people-culture-page .pc-btn--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}
body.people-culture-page .pc-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1;
}
body.people-culture-page .pc-btn-sm:hover { border-color: var(--kf-navy); color: var(--kf-navy); }
body.people-culture-page .pc-btn-sm--danger { color: var(--kf-signal-negative); }
body.people-culture-page .pc-btn-sm--danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}

/* ---------- Flash notice ---------- */
body.people-culture-page .pc-flash {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-positive);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--kf-ink);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.people-culture-page .pc-flash--warn { border-left-color: var(--kf-signal-warning); }
body.people-culture-page .pc-flash--error { border-left-color: var(--kf-signal-negative); }
body.people-culture-page .pc-flash--info { border-left-color: var(--kf-signal-info); }

/* ---------- Stat cards (treatment — keep .lr-stats-grid layout) ---------- */
body.people-culture-page .lr-stat-card.pc-stat {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 2px solid var(--accent, var(--kf-rule-soft));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page a.lr-stat-card.pc-stat,
body.people-culture-page button.lr-stat-card.pc-stat { cursor: pointer; }
body.people-culture-page .lr-stat-card.pc-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.09);
    border-color: var(--kf-rule);
}
body.people-culture-page .lr-stat-card.pc-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.14), 0 8px 28px rgba(11, 31, 58, 0.06);
}
body.people-culture-page .lr-stat-card.pc-stat::before { content: none; }
body.people-culture-page .lr-stat-card.pc-stat--attention {
    border-left-color: var(--kf-signal-negative);
}
body.people-culture-page .lr-stat-card.pc-stat .pc-stat-body { min-width: 0; flex: 1; }
body.people-culture-page .lr-stat-card.pc-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 12px;
}
body.people-culture-page .lr-stat-card.pc-stat .lr-stat-value {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
body.people-culture-page .lr-stat-card.pc-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* ---------- Section eyebrow ---------- */
body.people-culture-page .pc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 14px;
    flex-wrap: wrap;
}
body.people-culture-page .pc-section-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
}
body.people-culture-page .pc-section-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.people-culture-page .pc-section-meta a,
body.people-culture-page .pc-section-meta .pc-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 1px;
    font-size: 12px;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-section-meta a:hover,
body.people-culture-page .pc-section-meta .pc-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}

/* ---------- Panel ---------- */
body.people-culture-page .pc-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    margin: 0 0 24px;
}
body.people-culture-page .pc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    flex-wrap: wrap;
}
body.people-culture-page .pc-panel-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.people-culture-page .pc-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
body.people-culture-page .pc-panel-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 4px 0 0;
}
body.people-culture-page .pc-panel-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
}
body.people-culture-page .pc-panel-body { padding: 20px 24px; }
body.people-culture-page .pc-panel-body--flush { padding: 0; }

body.people-culture-page .pc-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
    line-height: 1.5;
}
body.people-culture-page .pc-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.people-culture-page .pc-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Table ---------- */
body.people-culture-page .pc-table-wrap {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.people-culture-page .pc-table-scroll { overflow-x: auto; }
body.people-culture-page .pc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
}
body.people-culture-page .pc-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper);
    border-bottom: 1px solid var(--kf-rule-soft);
    white-space: nowrap;
}
body.people-culture-page .pc-table thead th:first-child { padding-left: 24px; }
body.people-culture-page .pc-table thead th:last-child { padding-right: 24px; }
body.people-culture-page .pc-table thead th.num { text-align: right; }
body.people-culture-page .pc-table thead th.center { text-align: center; }
body.people-culture-page .pc-table thead th.actions { text-align: right; padding-right: 24px; }
body.people-culture-page .pc-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--kf-ink);
    border-bottom: 1px solid var(--kf-rule-soft);
    vertical-align: middle;
}
body.people-culture-page .pc-table tbody td:first-child { padding-left: 24px; }
body.people-culture-page .pc-table tbody td:last-child { padding-right: 24px; }
body.people-culture-page .pc-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.people-culture-page .pc-table tbody td.center { text-align: center; }
body.people-culture-page .pc-table tbody td.actions { text-align: right; white-space: nowrap; }
body.people-culture-page .pc-table tbody tr:last-child td { border-bottom: none; }
body.people-culture-page .pc-table tbody tr { transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1); }
body.people-culture-page .pc-table tbody tr:hover { background: var(--kf-paper-deep); }
body.people-culture-page .pc-table tbody tr.pc-row-expandable { cursor: pointer; }

body.people-culture-page .pc-table .pc-cell-strong {
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
}
body.people-culture-page .pc-table .pc-cell-link {
    color: var(--kf-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-table .pc-cell-link:hover {
    color: var(--kf-accent);
    border-bottom-color: var(--kf-accent);
}
body.people-culture-page .pc-table .pc-cell-muted { color: var(--kf-muted); }
body.people-culture-page .pc-table .pc-cell-sub {
    display: block;
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0.005em;
}
body.people-culture-page .pc-table .pc-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--kf-muted);
    background: var(--kf-paper-deep);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
body.people-culture-page .pc-table .pc-cell-date {
    color: var(--kf-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.people-culture-page .pc-table .pc-cell-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body.people-culture-page .pc-table .pc-expand-icon {
    display: inline-block;
    font-size: 10px;
    color: var(--kf-muted);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}
body.people-culture-page .pc-table .pc-row-expandable.is-open .pc-expand-icon { transform: rotate(90deg); }
body.people-culture-page .pc-table-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
}
body.people-culture-page .pc-table-empty a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.people-culture-page .pc-table-empty a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Status / direction pills (signal palette) ---------- */
body.people-culture-page .pc-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
body.people-culture-page .pc-pill--positive,
body.people-culture-page .pc-pill--completed,
body.people-culture-page .pc-pill--approved,
body.people-culture-page .pc-pill--active,
body.people-culture-page .pc-pill--resolved {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.people-culture-page .pc-pill--warning,
body.people-culture-page .pc-pill--pending,
body.people-culture-page .pc-pill--in-progress {
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
}
body.people-culture-page .pc-pill--negative,
body.people-culture-page .pc-pill--rejected,
body.people-culture-page .pc-pill--overdue,
body.people-culture-page .pc-pill--urgent {
    background: var(--kf-signal-negative-bg);
    color: var(--kf-signal-negative);
}
body.people-culture-page .pc-pill--info,
body.people-culture-page .pc-pill--review,
body.people-culture-page .pc-pill--submitted {
    background: var(--kf-signal-info-bg);
    color: var(--kf-signal-info);
}
body.people-culture-page .pc-pill--muted,
body.people-culture-page .pc-pill--archived,
body.people-culture-page .pc-pill--neutral {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}
body.people-culture-page .pc-pill--accent {
    background: rgba(74, 122, 130, 0.10);
    color: var(--pc-accent);
}
body.people-culture-page .pc-pill--tag {
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    border: 1px solid var(--kf-rule-soft);
    font-weight: 500;
}

/* ---------- Toolbar (filter / search row) ---------- */
body.people-culture-page .pc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}
body.people-culture-page .pc-toolbar-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin-right: 4px;
}
body.people-culture-page .pc-toolbar-meta {
    margin-left: auto;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
body.people-culture-page .pc-select,
body.people-culture-page .pc-input {
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.people-culture-page .pc-input { min-width: 220px; flex: 1 1 240px; max-width: 420px; }
body.people-culture-page .pc-select { min-width: 160px; padding-right: 32px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
body.people-culture-page .pc-input:focus,
body.people-culture-page .pc-select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background-color: #fbf8f1;
}

/* ---------- Detail meta grid ---------- */
body.people-culture-page .pc-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    font-size: 13.5px;
}
body.people-culture-page .pc-meta-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.people-culture-page .pc-meta-grid > .pc-meta-wide { grid-column: 1 / -1; }
body.people-culture-page .pc-meta-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 4px;
}
body.people-culture-page .pc-meta-value {
    margin: 0;
    color: var(--kf-ink);
    line-height: 1.5;
    white-space: pre-line;
}
body.people-culture-page .pc-meta-value--muted { color: var(--kf-muted); }
body.people-culture-page .pc-meta-value--num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
body.people-culture-page .pc-meta-value a {
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.people-culture-page .pc-meta-value a:hover { color: var(--kf-accent); border-bottom-color: var(--kf-accent); }

/* ---------- Quick action / dashboard tiles ---------- */
body.people-culture-page .pc-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 32px 0 0;
}
body.people-culture-page .pc-quick-panel {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    padding: 20px 22px;
}
body.people-culture-page .pc-quick-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
body.people-culture-page .pc-quick-head-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.003em;
    color: var(--kf-navy);
    margin: 0;
}
body.people-culture-page .pc-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.people-culture-page .pc-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--kf-paper-deep);
    color: var(--kf-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-quick-link:hover {
    border-color: var(--kf-rule);
    color: var(--kf-navy);
}
body.people-culture-page .pc-quick-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, var(--pc-accent));
    flex-shrink: 0;
}

/* ---------- Form (Mercury) — works with legacy form-group ---------- */
body.people-culture-page .pc-form-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    margin: 0 0 20px;
}
body.people-culture-page .pc-form-section {
    padding: 22px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.people-culture-page .pc-form-section:last-child { border-bottom: none; }
body.people-culture-page .pc-form-section-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 0 0 16px;
}
body.people-culture-page .pc-form-section-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.5px;
    color: var(--kf-muted);
    margin: -10px 0 14px;
    max-width: 64ch;
    line-height: 1.5;
}
body.people-culture-page .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.people-culture-page .form-group label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    display: block;
    margin: 0 0 2px;
}
body.people-culture-page .form-group label.pc-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0.005em;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kf-ink);
}
body.people-culture-page .form-group input[type="text"],
body.people-culture-page .form-group input[type="email"],
body.people-culture-page .form-group input[type="tel"],
body.people-culture-page .form-group input[type="date"],
body.people-culture-page .form-group input[type="number"],
body.people-culture-page .form-group input[type="url"],
body.people-culture-page .form-group input[type="file"],
body.people-culture-page .form-group select,
body.people-culture-page .form-group textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.people-culture-page .form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
body.people-culture-page .form-group input:focus,
body.people-culture-page .form-group select:focus,
body.people-culture-page .form-group textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
    background: #fbf8f1;
}
body.people-culture-page .form-group input[readonly],
body.people-culture-page .form-group input[disabled],
body.people-culture-page .form-group select[disabled] {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    cursor: not-allowed;
}
body.people-culture-page .form-group .text-muted,
body.people-culture-page .pc-form-hint {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    line-height: 1.5;
    letter-spacing: 0.005em;
    margin-top: 4px;
}
body.people-culture-page .pc-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
body.people-culture-page .pc-form-row--3 { grid-template-columns: repeat(3, 1fr); }
body.people-culture-page .pc-form-row .pc-form-wide { grid-column: 1 / -1; }
body.people-culture-page .pc-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    background: var(--kf-paper);
    border-top: 1px solid var(--kf-rule-soft);
}

/* Tame legacy .btn buttons inside P&C pages */
body.people-culture-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule);
    background: var(--kf-paper);
    color: var(--kf-navy);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
body.people-culture-page .btn:hover { border-color: var(--kf-navy); }
body.people-culture-page .btn-primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #f6f3ec;
}
body.people-culture-page .btn-primary:hover { background: var(--kf-navy-deep); border-color: var(--kf-navy-deep); }
body.people-culture-page .btn-outline {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-navy);
}
body.people-culture-page .btn-outline:hover { border-color: var(--kf-navy); }
body.people-culture-page .btn-sm { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
body.people-culture-page .btn-danger {
    background: var(--kf-paper);
    border-color: var(--kf-rule);
    color: var(--kf-signal-negative);
}
body.people-culture-page .btn-danger:hover {
    border-color: var(--kf-signal-negative);
    background: var(--kf-signal-negative-bg);
}

/* ---------- Compensation summary tiles (manage.hbs expansion row) ---------- */
body.people-culture-page .pc-summary-row td {
    padding: 0;
    border-bottom: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
}
body.people-culture-page .pc-summary-inner {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-summary-inner.is-open {
    max-height: 2400px;
    opacity: 1;
}
body.people-culture-page .pc-summary-body {
    background: var(--kf-paper-deep);
    border-top: 1px dashed var(--kf-rule);
    padding: 22px 24px;
}
body.people-culture-page .pc-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0 0 16px;
    letter-spacing: -0.005em;
}
body.people-culture-page .pc-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
body.people-culture-page .pc-summary-tile {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 14px 16px;
}
body.people-culture-page .pc-summary-tile-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--kf-muted);
    letter-spacing: 0.14em;
    margin: 0 0 6px;
}
body.people-culture-page .pc-summary-tile-value {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
body.people-culture-page .pc-summary-tile-value--muted { color: var(--kf-muted); font-weight: 500; }
body.people-culture-page .pc-summary-tile--attention { border-color: rgba(141, 62, 62, 0.25); }
body.people-culture-page .pc-summary-tile--attention .pc-summary-tile-value { color: var(--kf-signal-negative); }

body.people-culture-page .pc-summary-breakdown {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 4px 16px;
}
body.people-culture-page .pc-summary-breakdown-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--kf-muted);
    letter-spacing: 0.14em;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.people-culture-page .pc-summary-breakdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: "Source Sans 3", sans-serif;
}
body.people-culture-page .pc-summary-breakdown td {
    padding: 9px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
}
body.people-culture-page .pc-summary-breakdown tr:last-child td { border-bottom: none; }
body.people-culture-page .pc-summary-breakdown td:last-child { text-align: right; font-weight: 500; color: var(--kf-ink); }
body.people-culture-page .pc-summary-breakdown .pc-summary-total td {
    padding: 12px 0;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--kf-ink);
}

/* ---------- Compare grid (transfer view: previous / new) ---------- */
body.people-culture-page .pc-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0 0;
}
body.people-culture-page .pc-compare-col {
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
    overflow: hidden;
    background: var(--kf-paper);
}
body.people-culture-page .pc-compare-head {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--kf-paper-deep);
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-muted);
}
body.people-culture-page .pc-compare-col--prev .pc-compare-head {
    color: var(--kf-signal-warning);
}
body.people-culture-page .pc-compare-col--new .pc-compare-head {
    color: var(--kf-signal-positive);
}
body.people-culture-page .pc-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
body.people-culture-page .pc-compare-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
}
body.people-culture-page .pc-compare-table td:first-child {
    width: 44%;
    color: var(--kf-muted);
    font-weight: 500;
    background: var(--kf-paper-deep);
}
body.people-culture-page .pc-compare-table tr:last-child td { border-bottom: none; }
body.people-culture-page .pc-compare-table .pc-compare-section td {
    background: var(--kf-paper);
    color: var(--kf-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    padding: 8px 14px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.people-culture-page .pc-compare-changed-tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--kf-signal-warning-bg);
    color: var(--kf-signal-warning);
    line-height: 1;
}
@media (max-width: 880px) {
    body.people-culture-page .pc-compare { grid-template-columns: 1fr; }
}

/* ---------- Transfer letter document ---------- */
body.people-culture-page .pc-letter-bar {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 auto 16px;
    max-width: 820px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.people-culture-page .pc-letter-page {
    background: var(--kf-paper);
    padding: 56px 64px;
    max-width: 820px;
    margin: 0 auto;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    border-radius: 12px;
    border: 1px solid var(--kf-rule-soft);
}
body.people-culture-page .pc-letter-doc {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    color: var(--kf-ink);
    line-height: 1.6;
}
body.people-culture-page .pc-letter-doc p { margin: 0 0 12px; }
body.people-culture-page .pc-letter-doc .letter-date,
body.people-culture-page .pc-letter-doc .pc-letter-date { text-align: right; }
body.people-culture-page .pc-letter-doc .letter-addressee { margin-top: 18px; }
body.people-culture-page .pc-letter-doc .letter-table,
body.people-culture-page .pc-letter-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
}
body.people-culture-page .pc-letter-doc .letter-table th,
body.people-culture-page .pc-letter-doc .letter-table td,
body.people-culture-page .pc-letter-doc table th,
body.people-culture-page .pc-letter-doc table td {
    border: 1px solid var(--kf-rule-soft);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
body.people-culture-page .pc-letter-doc .letter-table th,
body.people-culture-page .pc-letter-doc table th {
    background: var(--kf-paper-deep);
    font-weight: 600;
    width: 32%;
    color: var(--kf-ink);
}
body.people-culture-page .pc-letter-edit textarea {
    width: 100%;
    min-height: 500px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    padding: 14px;
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    background: var(--kf-paper);
    color: var(--kf-ink);
    box-sizing: border-box;
}
body.people-culture-page .pc-letter-edit textarea:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}
@media print {
    @page { size: A4; margin: 10mm 12mm; }
    html, body.people-culture-page { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    body.people-culture-page * { visibility: hidden !important; }
    body.people-culture-page #letterPreview,
    body.people-culture-page #letterPreview * { visibility: visible !important; }
    body.people-culture-page #letterPreview {
        position: absolute !important;
        left: 0; top: 0; right: 0;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    body.people-culture-page .pc-letter-page {
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    body.people-culture-page .pc-letter-doc {
        font-size: 9.5pt !important;
        line-height: 1.3 !important;
    }
    body.people-culture-page .pc-letter-doc p { margin: 0 0 4pt !important; }
    body.people-culture-page .pc-letter-doc .letter-addressee { margin-top: 6pt !important; }
    body.people-culture-page .pc-letter-doc .letter-table,
    body.people-culture-page .pc-letter-doc table {
        font-size: 8.5pt !important;
        margin: 3pt 0 6pt !important;
        page-break-inside: avoid;
    }
    body.people-culture-page .pc-letter-doc .letter-table th,
    body.people-culture-page .pc-letter-doc .letter-table td,
    body.people-culture-page .pc-letter-doc table th,
    body.people-culture-page .pc-letter-doc table td {
        padding: 2pt 5pt !important;
    }
}

/* ---------- Billing-lock month tiles ---------- */
body.people-culture-page .pc-month-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.people-culture-page .pc-month-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.people-culture-page .pc-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
}
body.people-culture-page .pc-month-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.005em;
}
body.people-culture-page .pc-month-meta {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 4px;
}
body.people-culture-page .pc-month-meta--locked { color: var(--kf-signal-positive); }
body.people-culture-page .pc-month-blockers {
    margin: 0 24px 16px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-negative);
    border-radius: 10px;
    padding: 12px 14px;
}
body.people-culture-page .pc-month-blockers-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--kf-signal-negative);
    margin: 0 0 6px;
    font-weight: 600;
}
body.people-culture-page .pc-month-blockers ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1.6;
}
body.people-culture-page .pc-month-transfers {
    border-top: 1px solid var(--kf-rule-soft);
    padding: 18px 24px 22px;
}
body.people-culture-page .pc-month-transfers-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--kf-muted);
    margin: 0 0 12px;
    font-weight: 500;
}
body.people-culture-page .pc-transfer-row {
    padding: 14px 16px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    margin-bottom: 10px;
}
body.people-culture-page .pc-transfer-row:last-child { margin-bottom: 0; }
body.people-culture-page .pc-transfer-row-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}
body.people-culture-page .pc-transfer-row-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--kf-ink);
}
body.people-culture-page .pc-transfer-row-sub {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
}
body.people-culture-page .pc-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-top: 10px;
}
body.people-culture-page .pc-diff-table td {
    padding: 4px 0;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
}
body.people-culture-page .pc-diff-table td:last-child {
    color: var(--kf-ink);
    font-weight: 600;
    text-align: right;
}

/* ---------- Audit-justify gate page (no sidebar) ---------- */
body.people-culture-page.people-culture-audit-justify-page {
    background: var(--kf-navy);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
body.people-culture-page .pc-audit-card {
    max-width: 560px;
    width: 100%;
    background: var(--kf-paper);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.people-culture-page .pc-audit-head {
    padding: 22px 28px;
    background: var(--kf-navy);
    color: #f6f3ec;
    border-bottom: 1px solid rgba(154, 123, 63, 0.18);
}
body.people-culture-page .pc-audit-head-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
body.people-culture-page .pc-audit-head-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(154, 123, 63, 0.20);
    color: var(--kf-accent);
}
body.people-culture-page .pc-audit-head-sub {
    margin: 4px 0 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: rgba(246, 243, 236, 0.78);
    line-height: 1.5;
}
body.people-culture-page .pc-audit-body { padding: 24px 28px; }
body.people-culture-page .pc-audit-user {
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
}
body.people-culture-page .pc-audit-user-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
}
body.people-culture-page .pc-audit-user strong {
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: 0.005em;
}
body.people-culture-page .pc-audit-error {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-left: 3px solid var(--kf-signal-negative);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--kf-signal-negative);
}
body.people-culture-page .pc-audit-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}
body.people-culture-page .pc-audit-cancel {
    font-size: 12px;
    color: var(--kf-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
}
body.people-culture-page .pc-audit-cancel:hover { color: var(--kf-navy); border-bottom-color: var(--kf-navy); }

/* ---------- Audit-list monitoring banner ---------- */
body.people-culture-page .pc-audit-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}
body.people-culture-page .pc-audit-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    flex-shrink: 0;
}
body.people-culture-page .pc-audit-banner--on .pc-audit-banner-badge {
    background: var(--kf-signal-positive-bg);
    color: var(--kf-signal-positive);
}
body.people-culture-page .pc-audit-banner-text { flex: 1; min-width: 0; }
body.people-culture-page .pc-audit-banner-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-ink);
    letter-spacing: -0.003em;
}
body.people-culture-page .pc-audit-banner-sub {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
    line-height: 1.5;
}
body.people-culture-page .pc-audit-banner-count {
    font-size: 12px;
    color: var(--kf-muted);
    letter-spacing: 0.01em;
}
body.people-culture-page .pc-audit-banner-count strong {
    color: var(--kf-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Salary-toggle bar (transfer form) ---------- */
body.people-culture-page .pc-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
}
body.people-culture-page .pc-toggle-bar strong {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink);
    font-weight: 600;
    letter-spacing: -0.003em;
}
body.people-culture-page .pc-toggle-bar .text-muted {
    font-size: 12px;
    color: var(--kf-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ---------- Service-request modal Mercury treatment ---------- */
body.people-culture-page .pc-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
body.people-culture-page .pc-modal-inner {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    padding: 28px;
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
}
body.people-culture-page .pc-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--kf-muted);
    line-height: 1;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-modal-close:hover { color: var(--kf-navy); }
body.people-culture-page .pc-modal-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy);
    margin: 0 0 18px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.people-culture-page .lr-stat-card.pc-stat,
    body.people-culture-page .pc-btn,
    body.people-culture-page .pc-btn-sm,
    body.people-culture-page .pc-select,
    body.people-culture-page .pc-input,
    body.people-culture-page .pc-table tbody tr,
    body.people-culture-page .pc-summary-inner,
    body.people-culture-page .pc-expand-icon,
    body.people-culture-page .pc-quick-link,
    body.people-culture-page .form-group input,
    body.people-culture-page .form-group select,
    body.people-culture-page .form-group textarea { transition: none; }
    body.people-culture-page .lr-stat-card.pc-stat:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.people-culture-page .main { padding: 32px 28px 64px; }
    body.people-culture-page .pc-page-head { margin-bottom: 28px; }
    body.people-culture-page .pc-meta-grid,
    body.people-culture-page .pc-meta-grid--3 { grid-template-columns: 1fr 1fr; }
    body.people-culture-page .pc-form-row,
    body.people-culture-page .pc-form-row--3 { grid-template-columns: 1fr 1fr; }
    body.people-culture-page .pc-summary-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    body.people-culture-page .pc-letter-page { padding: 40px 36px; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.people-culture-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.people-culture-page .pc-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.people-culture-page .pc-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.people-culture-page .pc-page-sub { font-size: 13px; }
    body.people-culture-page .pc-page-actions { width: 100%; }
    body.people-culture-page .pc-page-actions .pc-btn,
    body.people-culture-page .pc-page-actions .btn { flex: 1; }
    body.people-culture-page .lr-stat-card.pc-stat { padding: 18px 20px; }
    body.people-culture-page .pc-panel { border-radius: 12px; }
    body.people-culture-page .pc-panel-head { padding: 16px 18px; gap: 8px; }
    body.people-culture-page .pc-panel-title { font-size: 15px; }
    body.people-culture-page .pc-panel-body { padding: 16px 18px; }
    body.people-culture-page .pc-toolbar { gap: 8px; }
    body.people-culture-page .pc-select,
    body.people-culture-page .pc-input { font-size: 16px; min-width: 100%; flex: 1 1 100%; max-width: none; }
    body.people-culture-page .pc-toolbar-meta { margin-left: 0; width: 100%; }
    body.people-culture-page .pc-meta-grid,
    body.people-culture-page .pc-meta-grid--3 { grid-template-columns: 1fr; }
    body.people-culture-page .pc-form-row,
    body.people-culture-page .pc-form-row--3 { grid-template-columns: 1fr; gap: 14px; }
    body.people-culture-page .pc-form-section { padding: 18px; }
    body.people-culture-page .pc-form-actions { padding: 16px 18px; flex-direction: column-reverse; }
    body.people-culture-page .pc-form-actions .btn,
    body.people-culture-page .pc-form-actions .pc-btn { width: 100%; }
    body.people-culture-page .form-group input,
    body.people-culture-page .form-group select,
    body.people-culture-page .form-group textarea { font-size: 16px; }
    body.people-culture-page .pc-summary-body { padding: 18px 16px; }
    body.people-culture-page .pc-summary-grid { grid-template-columns: 1fr; }
    body.people-culture-page .pc-letter-page { padding: 28px 22px; }
    body.people-culture-page .pc-letter-bar { padding: 12px 14px; }
    body.people-culture-page .pc-audit-head { padding: 18px 20px; }
    body.people-culture-page .pc-audit-body { padding: 18px 20px; }
}

/* ---------- Searchable-select dropdown — Mercury surface inside P&C ---------- */
body.people-culture-page .staff-dropdown {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.08);
    padding: 6px;
}
body.people-culture-page .staff-dropdown-item { border-radius: 8px; }
body.people-culture-page .staff-dropdown-item:hover,
body.people-culture-page .staff-dropdown-item.is-active {
    background: var(--kf-paper-deep);
}
body.people-culture-page .staff-dropdown-item.is-selected .staff-dropdown-primary {
    color: var(--kf-navy);
}
body.people-culture-page .staff-dropdown-primary { color: var(--kf-ink); }
body.people-culture-page .staff-dropdown-secondary,
body.people-culture-page .staff-dropdown-empty { color: var(--kf-muted); }
body.people-culture-page .staff-dropdown-chip {
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
}

/* ==========================================
   People & Culture — Mercury polish (pc2)
   ==========================================
   Brings P&C to parity with the Finance canonical block at
   line ~7540. Adds calibrated-signal primitives that the
   initial pc1 migration didn't carry over: the muted
   "refreshes on reload" line under the page sub, the
   stat-card trend chip with up/down/pending variants, the
   pulsing live-dot for "most urgent / most recent" row
   highlights, and the small panel-link "View all →" affordance
   used inside .pc-panel-head. All scoped to body.people-culture-page.
   ========================================== */

/* ---------- "Refreshes / updated" line under page sub ---------- */
body.people-culture-page .pc-page-updated {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted);
    margin: 8px 0 0;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
body.people-culture-page .pc-page-updated::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kf-rule);
    vertical-align: 1px;
    margin-right: 8px;
}

/* ---------- Stat-card delta chip ▲ / ▼ / pending ----------
   Sits inside .pc-stat-body between value and sub. Pending
   keeps layout height stable so the card doesn't jump when
   trend data wires in. */
body.people-culture-page .pc-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
    line-height: 1;
    min-height: 14px;
}
body.people-culture-page .pc-delta--up { color: var(--kf-signal-positive); }
body.people-culture-page .pc-delta--down { color: var(--kf-signal-negative); }
body.people-culture-page .pc-delta--neutral { color: var(--kf-muted); }
body.people-culture-page .pc-delta--pending { visibility: hidden; }

/* ---------- Live indicator dot (6px pulsing info-blue) ----------
   Use ONLY on a row that genuinely represents the freshest /
   most-urgent / most-recent record on the page. Never on more
   than one row at a time. Respects prefers-reduced-motion. */
body.people-culture-page .pc-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kf-signal-info);
    margin-right: 8px;
    vertical-align: middle;
    animation: pc-live-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pc-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
    body.people-culture-page .pc-live-dot { animation: none; }
}

/* ---------- Stat-card attention/warn variants (signal palette) ----------
   Mirrors Finance's fin-stat--attn / fin-stat--warn. The existing
   pc-stat--attention class is preserved as an alias for back-compat. */
body.people-culture-page .lr-stat-card.pc-stat.pc-stat--attn {
    border-left: 2px solid var(--kf-signal-negative);
}
body.people-culture-page .lr-stat-card.pc-stat.pc-stat--warn {
    border-left: 2px solid var(--kf-signal-warning);
}
body.people-culture-page .lr-stat-card.pc-stat.pc-stat--positive {
    border-left: 2px solid var(--kf-signal-positive);
}

/* ---------- Panel-link "View all →" affordance ----------
   Sits at right of .pc-panel-head (mirrors fin-panel-link).
   The existing pc-section-meta a covers it for section heads;
   this gives panel heads the same treatment. */
body.people-culture-page .pc-panel-link {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kf-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule);
    padding-bottom: 2px;
    white-space: nowrap;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.people-culture-page .pc-panel-link:hover {
    color: var(--kf-accent);
    border-color: var(--kf-accent);
}

/* ============================================================
   Nickname modal — first-login capture (gr1)
   Pulse Mercury-baseline modal: rounded card, soft shadow,
   tinted paper, generous padding, calm motion. Greets the
   user and lets them pick a nickname or skip for this session.
   ============================================================ */
body.nickname-modal-open { overflow: hidden; }

.nickname-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: nickname-modal-fade 200ms ease;
}
/* The class rule above has specificity (0,1,0) and beats the UA's
   [hidden] { display: none } at equal specificity by source order, so
   setting modal.hidden = true would not actually hide it. This rule has
   (0,2,0) and wins. */
.nickname-modal[hidden] { display: none; }
@keyframes nickname-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.nickname-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.nickname-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 64px rgba(11, 31, 58, 0.18),
                0 8px 24px rgba(11, 31, 58, 0.06);
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: nickname-modal-rise 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes nickname-modal-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.nickname-modal-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-accent);
    margin: 0 0 8px;
}
.nickname-modal-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    color: var(--kf-ink);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.nickname-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--kf-ink);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.nickname-modal-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    font-size: 16px;
    color: var(--kf-ink);
    font-family: inherit;
    transition: border-color 180ms ease, background 180ms ease;
}
.nickname-modal-input:focus {
    outline: none;
    border-color: var(--kf-accent);
    background: #fff;
}
.nickname-modal-hint {
    font-size: 12px;
    color: var(--kf-muted);
    margin: 8px 0 0;
}
.nickname-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}
.nickname-modal-skip,
.nickname-modal-save {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    border: 1px solid transparent;
}
.nickname-modal-skip {
    background: transparent;
    color: var(--kf-muted);
    border-color: var(--kf-rule);
}
.nickname-modal-skip:hover {
    color: var(--kf-ink);
    background: var(--kf-paper-deep);
}
.nickname-modal-save {
    background: var(--kf-navy);
    color: var(--kf-paper);
}
.nickname-modal-save:hover { background: var(--kf-navy-deep); }
.nickname-modal-save:disabled {
    background: var(--kf-rule);
    color: var(--kf-muted);
    cursor: wait;
}
.nickname-modal-error {
    font-size: 13px;
    color: var(--kf-signal-negative);
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .nickname-modal { padding: 12px; }
    .nickname-modal-card { padding: 22px 20px 18px; }
    .nickname-modal-title { font-size: 20px; }
    .nickname-modal-actions { flex-direction: column-reverse; }
    .nickname-modal-skip,
    .nickname-modal-save { width: 100%; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nickname-modal,
    .nickname-modal-card { animation: none; }
}


/* ==========================================
   Service Request — Mercury / Brex (sr1, 2026-05-18)
   ==========================================
   Premium fintech surface, scoped under the four SR body classes
   so older unscoped .page-header / .data-table / .lr-stat-card
   rules keep working on every non-SR view. Mirrors the
   body.finance-*-page system at lines ~3502 and ~6416.
   Per-module accent: muted clay #a37250.
   Reference: views/finance/dashboard.hbs + the body.finance-page
   block; SR landing also follows views/finance/dashboard.hbs.
   ========================================== */

body.sr-page,
body.sr-transfers-page,
body.sr-expenses-page,
body.sr-receivables-page,
body.sr-branding-page {
    --sr-accent: #a37250;       /* muted clay — per-module token */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep, #efeae0);
    color: var(--kf-ink, #1a2230);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sr-page .main,
body.sr-transfers-page .main,
body.sr-expenses-page .main,
body.sr-receivables-page .main,
body.sr-branding-page .main {
    background: var(--kf-paper-deep, #efeae0);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header ---------- */
body.sr-page .sr-page-head,
body.sr-transfers-page .sr-page-head,
body.sr-expenses-page .sr-page-head,
body.sr-receivables-page .sr-page-head,
body.sr-branding-page .sr-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

body.sr-page .sr-page-head-text,
body.sr-transfers-page .sr-page-head-text,
body.sr-expenses-page .sr-page-head-text,
body.sr-receivables-page .sr-page-head-text,
body.sr-branding-page .sr-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}

body.sr-page .sr-page-dot,
body.sr-transfers-page .sr-page-dot,
body.sr-expenses-page .sr-page-dot,
body.sr-receivables-page .sr-page-dot,
body.sr-branding-page .sr-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sr-accent);
    margin: 0 0 18px;
}

body.sr-page .sr-page-eyebrow,
body.sr-transfers-page .sr-page-eyebrow,
body.sr-expenses-page .sr-page-eyebrow,
body.sr-receivables-page .sr-page-eyebrow,
body.sr-branding-page .sr-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 10px;
}

body.sr-page .sr-page-title,
body.sr-transfers-page .sr-page-title,
body.sr-expenses-page .sr-page-title,
body.sr-receivables-page .sr-page-title,
body.sr-branding-page .sr-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 8px;
    max-width: 32ch;
}

body.sr-page .sr-page-sub,
body.sr-transfers-page .sr-page-sub,
body.sr-expenses-page .sr-page-sub,
body.sr-receivables-page .sr-page-sub,
body.sr-branding-page .sr-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    max-width: 70ch;
    line-height: 1.5;
}

body.sr-page .sr-page-updated,
body.sr-transfers-page .sr-page-updated,
body.sr-expenses-page .sr-page-updated,
body.sr-receivables-page .sr-page-updated,
body.sr-branding-page .sr-page-updated {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted, #6e6a5f);
    margin: 8px 0 0;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

body.sr-page .sr-page-actions,
body.sr-transfers-page .sr-page-actions,
body.sr-expenses-page .sr-page-actions,
body.sr-receivables-page .sr-page-actions,
body.sr-branding-page .sr-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
body.sr-page .sr-btn,
body.sr-transfers-page .sr-btn,
body.sr-expenses-page .sr-btn,
body.sr-receivables-page .sr-btn,
body.sr-branding-page .sr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sr-page .sr-btn--sm,
body.sr-transfers-page .sr-btn--sm,
body.sr-expenses-page .sr-btn--sm,
body.sr-receivables-page .sr-btn--sm,
body.sr-branding-page .sr-btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

body.sr-page .sr-btn--primary,
body.sr-transfers-page .sr-btn--primary,
body.sr-expenses-page .sr-btn--primary,
body.sr-receivables-page .sr-btn--primary,
body.sr-branding-page .sr-btn--primary {
    background: var(--kf-navy, #0b1f3a);
    color: #f6f3ec;
}
body.sr-page .sr-btn--primary:hover,
body.sr-transfers-page .sr-btn--primary:hover,
body.sr-expenses-page .sr-btn--primary:hover,
body.sr-receivables-page .sr-btn--primary:hover,
body.sr-branding-page .sr-btn--primary:hover {
    background: var(--kf-navy-deep, #061427);
}
body.sr-page .sr-btn--primary:focus-visible,
body.sr-transfers-page .sr-btn--primary:focus-visible,
body.sr-expenses-page .sr-btn--primary:focus-visible,
body.sr-receivables-page .sr-btn--primary:focus-visible,
body.sr-branding-page .sr-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}

body.sr-page .sr-btn--ghost,
body.sr-transfers-page .sr-btn--ghost,
body.sr-expenses-page .sr-btn--ghost,
body.sr-receivables-page .sr-btn--ghost,
body.sr-branding-page .sr-btn--ghost {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-navy, #0b1f3a);
    border-color: var(--kf-rule, #d9d2c2);
}
body.sr-page .sr-btn--ghost:hover,
body.sr-transfers-page .sr-btn--ghost:hover,
body.sr-expenses-page .sr-btn--ghost:hover,
body.sr-receivables-page .sr-btn--ghost:hover,
body.sr-branding-page .sr-btn--ghost:hover {
    border-color: var(--kf-navy, #0b1f3a);
    color: var(--kf-accent, #9a7b3f);
}
body.sr-page .sr-btn--ghost:focus-visible,
body.sr-transfers-page .sr-btn--ghost:focus-visible,
body.sr-expenses-page .sr-btn--ghost:focus-visible,
body.sr-receivables-page .sr-btn--ghost:focus-visible,
body.sr-branding-page .sr-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy, #0b1f3a);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* Destructive — single hairline outline in muted negative, not bootstrap-red */
body.sr-page .sr-btn--danger,
body.sr-transfers-page .sr-btn--danger,
body.sr-expenses-page .sr-btn--danger,
body.sr-receivables-page .sr-btn--danger,
body.sr-branding-page .sr-btn--danger {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-signal-negative, #8d3e3e);
    border-color: var(--kf-rule, #d9d2c2);
}
body.sr-page .sr-btn--danger:hover,
body.sr-transfers-page .sr-btn--danger:hover,
body.sr-expenses-page .sr-btn--danger:hover,
body.sr-receivables-page .sr-btn--danger:hover,
body.sr-branding-page .sr-btn--danger:hover {
    border-color: var(--kf-signal-negative, #8d3e3e);
    background: var(--kf-signal-negative-bg, #f1e0e0);
}

body.sr-page .sr-inline-form,
body.sr-transfers-page .sr-inline-form,
body.sr-expenses-page .sr-inline-form,
body.sr-receivables-page .sr-inline-form,
body.sr-branding-page .sr-inline-form {
    display: inline-block;
    margin: 0;
}

/* ---------- Flash ---------- */
body.sr-page .sr-flash,
body.sr-transfers-page .sr-flash,
body.sr-expenses-page .sr-flash,
body.sr-receivables-page .sr-flash,
body.sr-branding-page .sr-flash {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 3px solid var(--sr-accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
}

/* ---------- Stat cards (treatment only — keep .lr-stats-grid layout) ---------- */
body.sr-page .lr-stat-card.sr-stat,
body.sr-transfers-page .lr-stat-card.sr-stat,
body.sr-expenses-page .lr-stat-card.sr-stat,
body.sr-receivables-page .lr-stat-card.sr-stat,
body.sr-branding-page .lr-stat-card.sr-stat {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 2px solid var(--accent, var(--kf-rule-soft, #e7e1d3));
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    align-items: stretch;
    gap: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-page .lr-stat-card.sr-stat::before,
body.sr-transfers-page .lr-stat-card.sr-stat::before,
body.sr-expenses-page .lr-stat-card.sr-stat::before,
body.sr-receivables-page .lr-stat-card.sr-stat::before,
body.sr-branding-page .lr-stat-card.sr-stat::before { content: none; }

body.sr-page .lr-stat-card.sr-stat .sr-stat-body,
body.sr-transfers-page .lr-stat-card.sr-stat .sr-stat-body,
body.sr-expenses-page .lr-stat-card.sr-stat .sr-stat-body,
body.sr-receivables-page .lr-stat-card.sr-stat .sr-stat-body,
body.sr-branding-page .lr-stat-card.sr-stat .sr-stat-body {
    min-width: 0;
    flex: 1;
}

body.sr-page .lr-stat-card.sr-stat .lr-stat-label,
body.sr-transfers-page .lr-stat-card.sr-stat .lr-stat-label,
body.sr-expenses-page .lr-stat-card.sr-stat .lr-stat-label,
body.sr-receivables-page .lr-stat-card.sr-stat .lr-stat-label,
body.sr-branding-page .lr-stat-card.sr-stat .lr-stat-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 12px;
}

body.sr-page .lr-stat-card.sr-stat .lr-stat-value,
body.sr-transfers-page .lr-stat-card.sr-stat .lr-stat-value,
body.sr-expenses-page .lr-stat-card.sr-stat .lr-stat-value,
body.sr-receivables-page .lr-stat-card.sr-stat .lr-stat-value,
body.sr-branding-page .lr-stat-card.sr-stat .lr-stat-value {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--accent, var(--kf-navy, #0b1f3a));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

body.sr-page .lr-stat-card.sr-stat .lr-stat-sub,
body.sr-transfers-page .lr-stat-card.sr-stat .lr-stat-sub,
body.sr-expenses-page .lr-stat-card.sr-stat .lr-stat-sub,
body.sr-receivables-page .lr-stat-card.sr-stat .lr-stat-sub,
body.sr-branding-page .lr-stat-card.sr-stat .lr-stat-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 8px;
    letter-spacing: 0.005em;
}

/* "Needs attention" left-edge indicator (e.g. Receivables → Overdue) */
body.sr-page .lr-stat-card.sr-stat.sr-stat--attn,
body.sr-transfers-page .lr-stat-card.sr-stat.sr-stat--attn,
body.sr-expenses-page .lr-stat-card.sr-stat.sr-stat--attn,
body.sr-receivables-page .lr-stat-card.sr-stat.sr-stat--attn,
body.sr-branding-page .lr-stat-card.sr-stat.sr-stat--attn {
    border-left: 2px solid var(--kf-signal-negative, #8d3e3e);
}

/* ---------- Panel (table wrapper) ---------- */
body.sr-page .sr-panel,
body.sr-transfers-page .sr-panel,
body.sr-expenses-page .sr-panel,
body.sr-receivables-page .sr-panel,
body.sr-branding-page .sr-panel {
    margin-top: 24px;
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

/* ---------- Filter row (Branding) ---------- */
body.sr-branding-page .sr-filter-row {
    display: flex;
    gap: 14px;
    align-items: end;
    margin-top: 24px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
body.sr-branding-page .sr-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}
body.sr-branding-page .sr-filter-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
}
body.sr-branding-page .sr-filter-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 8px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-branding-page .sr-filter-input:focus {
    outline: none;
    border-color: var(--kf-accent, #9a7b3f);
    box-shadow: 0 0 0 3px rgba(154, 123, 63, 0.15);
}
body.sr-branding-page .sr-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    height: 38px;
}

/* ---------- Table ---------- */
body.sr-page .sr-table-scroll,
body.sr-transfers-page .sr-table-scroll,
body.sr-expenses-page .sr-table-scroll,
body.sr-receivables-page .sr-table-scroll,
body.sr-branding-page .sr-table-scroll {
    overflow-x: auto;
    position: relative;
}

body.sr-page .sr-table,
body.sr-transfers-page .sr-table,
body.sr-expenses-page .sr-table,
body.sr-receivables-page .sr-table,
body.sr-branding-page .sr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
}

body.sr-page .sr-th,
body.sr-transfers-page .sr-th,
body.sr-expenses-page .sr-th,
body.sr-receivables-page .sr-th,
body.sr-branding-page .sr-th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kf-paper, #f6f3ec);
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    padding: 14px 20px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    white-space: nowrap;
}
body.sr-page .sr-th--num,
body.sr-transfers-page .sr-th--num,
body.sr-expenses-page .sr-th--num,
body.sr-receivables-page .sr-th--num,
body.sr-branding-page .sr-th--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.sr-page .sr-th--right,
body.sr-transfers-page .sr-th--right,
body.sr-expenses-page .sr-th--right,
body.sr-receivables-page .sr-th--right,
body.sr-branding-page .sr-th--right { text-align: right; }
body.sr-page .sr-th--center,
body.sr-transfers-page .sr-th--center,
body.sr-expenses-page .sr-th--center,
body.sr-receivables-page .sr-th--center,
body.sr-branding-page .sr-th--center { text-align: center; }

body.sr-page .sr-td,
body.sr-transfers-page .sr-td,
body.sr-expenses-page .sr-td,
body.sr-receivables-page .sr-td,
body.sr-branding-page .sr-td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    color: var(--kf-ink, #1a2230);
    line-height: 1.4;
    vertical-align: middle;
}
body.sr-page .sr-td--right,
body.sr-transfers-page .sr-td--right,
body.sr-expenses-page .sr-td--right,
body.sr-receivables-page .sr-td--right,
body.sr-branding-page .sr-td--right { text-align: right; white-space: nowrap; }
body.sr-page .sr-td--center,
body.sr-transfers-page .sr-td--center,
body.sr-expenses-page .sr-td--center,
body.sr-receivables-page .sr-td--center,
body.sr-branding-page .sr-td--center { text-align: center; }
body.sr-page .sr-td--num,
body.sr-transfers-page .sr-td--num,
body.sr-expenses-page .sr-td--num,
body.sr-receivables-page .sr-td--num,
body.sr-branding-page .sr-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
body.sr-page .sr-td--muted,
body.sr-transfers-page .sr-td--muted,
body.sr-expenses-page .sr-td--muted,
body.sr-receivables-page .sr-td--muted,
body.sr-branding-page .sr-td--muted { color: var(--kf-muted, #6e6a5f); }
body.sr-page .sr-td--strong,
body.sr-transfers-page .sr-td--strong,
body.sr-expenses-page .sr-td--strong,
body.sr-receivables-page .sr-td--strong,
body.sr-branding-page .sr-td--strong {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
}
body.sr-page .sr-td--name,
body.sr-transfers-page .sr-td--name,
body.sr-expenses-page .sr-td--name,
body.sr-receivables-page .sr-td--name,
body.sr-branding-page .sr-td--name {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 500;
    letter-spacing: -0.003em;
}
body.sr-page .sr-td-note,
body.sr-transfers-page .sr-td-note,
body.sr-expenses-page .sr-td-note,
body.sr-receivables-page .sr-td-note,
body.sr-branding-page .sr-td-note {
    font-size: 11.5px;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 3px;
    letter-spacing: 0.01em;
}
body.sr-branding-page .sr-td-truncate {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.sr-branding-page .sr-td-italic { font-style: italic; }

body.sr-page .sr-table tbody tr:last-child .sr-td,
body.sr-transfers-page .sr-table tbody tr:last-child .sr-td,
body.sr-expenses-page .sr-table tbody tr:last-child .sr-td,
body.sr-receivables-page .sr-table tbody tr:last-child .sr-td,
body.sr-branding-page .sr-table tbody tr:last-child .sr-td { border-bottom: none; }

body.sr-page .sr-table tbody tr,
body.sr-transfers-page .sr-table tbody tr,
body.sr-expenses-page .sr-table tbody tr,
body.sr-receivables-page .sr-table tbody tr,
body.sr-branding-page .sr-table tbody tr {
    transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-page .sr-table tbody tr:hover,
body.sr-transfers-page .sr-table tbody tr:hover,
body.sr-expenses-page .sr-table tbody tr:hover,
body.sr-receivables-page .sr-table tbody tr:hover,
body.sr-branding-page .sr-table tbody tr:hover {
    background: var(--kf-paper-deep, #efeae0);
}

body.sr-page .sr-td-empty,
body.sr-transfers-page .sr-td-empty,
body.sr-expenses-page .sr-td-empty,
body.sr-receivables-page .sr-td-empty,
body.sr-branding-page .sr-td-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--kf-muted, #6e6a5f);
    font-size: 13px;
    line-height: 1.5;
}

/* Code chip */
body.sr-page .sr-code,
body.sr-transfers-page .sr-code,
body.sr-expenses-page .sr-code,
body.sr-receivables-page .sr-code,
body.sr-branding-page .sr-code {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--kf-ink, #1a2230);
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0;
}

/* Tick (Yes/No column) */
body.sr-transfers-page .sr-tick {
    color: var(--kf-signal-positive, #3f6b46);
    font-weight: 600;
}

/* Inline link */
body.sr-page .sr-inline-link,
body.sr-transfers-page .sr-inline-link,
body.sr-expenses-page .sr-inline-link,
body.sr-receivables-page .sr-inline-link,
body.sr-branding-page .sr-inline-link {
    color: var(--kf-navy, #0b1f3a);
    text-decoration: none;
    border-bottom: 1px solid var(--kf-rule, #d9d2c2);
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-page .sr-inline-link:hover,
body.sr-transfers-page .sr-inline-link:hover,
body.sr-expenses-page .sr-inline-link:hover,
body.sr-receivables-page .sr-inline-link:hover,
body.sr-branding-page .sr-inline-link:hover {
    color: var(--kf-accent, #9a7b3f);
    border-color: var(--kf-accent, #9a7b3f);
}

/* Category chip (Branding) */
body.sr-branding-page .sr-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 999px;
    font-size: 12px;
    color: var(--kf-ink, #1a2230);
    white-space: nowrap;
}
body.sr-branding-page .sr-category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Pills (status) — signal palette variants ---------- */
body.sr-page .sr-pill,
body.sr-transfers-page .sr-pill,
body.sr-expenses-page .sr-pill,
body.sr-receivables-page .sr-pill,
body.sr-branding-page .sr-pill {
    display: inline-block;
    font-family: "Source Sans 3", sans-serif;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}
body.sr-page .sr-pill--positive,
body.sr-transfers-page .sr-pill--positive,
body.sr-expenses-page .sr-pill--positive,
body.sr-receivables-page .sr-pill--positive,
body.sr-branding-page .sr-pill--positive {
    background: var(--kf-signal-positive-bg, #e8efe9);
    color: var(--kf-signal-positive, #3f6b46);
}
body.sr-page .sr-pill--warning,
body.sr-transfers-page .sr-pill--warning,
body.sr-expenses-page .sr-pill--warning,
body.sr-receivables-page .sr-pill--warning,
body.sr-branding-page .sr-pill--warning {
    background: var(--kf-signal-warning-bg, #f4ecdc);
    color: var(--kf-signal-warning, #b58a3f);
}
body.sr-page .sr-pill--negative,
body.sr-transfers-page .sr-pill--negative,
body.sr-expenses-page .sr-pill--negative,
body.sr-receivables-page .sr-pill--negative,
body.sr-branding-page .sr-pill--negative {
    background: var(--kf-signal-negative-bg, #f1e0e0);
    color: var(--kf-signal-negative, #8d3e3e);
}
body.sr-page .sr-pill--info,
body.sr-transfers-page .sr-pill--info,
body.sr-expenses-page .sr-pill--info,
body.sr-receivables-page .sr-pill--info,
body.sr-branding-page .sr-pill--info {
    background: var(--kf-signal-info-bg, #e3e8ee);
    color: var(--kf-signal-info, #486b8a);
}
body.sr-page .sr-pill--neutral,
body.sr-transfers-page .sr-pill--neutral,
body.sr-expenses-page .sr-pill--neutral,
body.sr-receivables-page .sr-pill--neutral,
body.sr-branding-page .sr-pill--neutral {
    background: var(--kf-rule-soft, #e7e1d3);
    color: var(--kf-muted, #6e6a5f);
}

/* ---------- Dashboard tile section (sr-page only) ---------- */
body.sr-page .sr-tile-section {
    margin-top: 32px;
}
body.sr-page .sr-section-head {
    margin-bottom: 18px;
}
body.sr-page .sr-section-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 4px;
    line-height: 1.25;
}
body.sr-page .sr-section-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    letter-spacing: 0.005em;
}
body.sr-page .sr-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
body.sr-page .sr-tile {
    --accent: var(--sr-accent);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 2px solid var(--accent, var(--kf-rule-soft, #e7e1d3));
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
    text-decoration: none;
    color: var(--kf-ink, #1a2230);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
body.sr-page .sr-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(11, 31, 58, 0.10);
}
body.sr-page .sr-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12),
                0 8px 28px rgba(11, 31, 58, 0.06);
}
body.sr-page .sr-tile-dot {
    display: none;
}
body.sr-page .sr-tile-body {
    flex: 1;
    min-width: 0;
}
body.sr-page .sr-tile-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent, var(--kf-muted, #6e6a5f));
    margin: 0 0 8px;
}
body.sr-page .sr-tile-name {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 8px;
    line-height: 1.25;
}
body.sr-page .sr-tile-desc {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    max-width: 38ch;
}
body.sr-page .sr-tile-arrow {
    color: var(--kf-rule, #d9d2c2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-page .sr-tile:hover .sr-tile-arrow {
    color: var(--kf-accent, #9a7b3f);
    transform: translateX(4px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.sr-page *,
    body.sr-transfers-page *,
    body.sr-expenses-page *,
    body.sr-receivables-page *,
    body.sr-branding-page * { transition: none !important; animation: none !important; }
    body.sr-page .sr-tile:hover { transform: none; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.sr-page .main,
    body.sr-transfers-page .main,
    body.sr-expenses-page .main,
    body.sr-receivables-page .main,
    body.sr-branding-page .main {
        padding: 32px 28px 64px;
    }
    body.sr-page .sr-page-head,
    body.sr-transfers-page .sr-page-head,
    body.sr-expenses-page .sr-page-head,
    body.sr-receivables-page .sr-page-head,
    body.sr-branding-page .sr-page-head { margin-bottom: 28px; }
    body.sr-page .sr-th,
    body.sr-transfers-page .sr-th,
    body.sr-expenses-page .sr-th,
    body.sr-receivables-page .sr-th,
    body.sr-branding-page .sr-th { padding: 12px 16px; }
    body.sr-page .sr-td,
    body.sr-transfers-page .sr-td,
    body.sr-expenses-page .sr-td,
    body.sr-receivables-page .sr-td,
    body.sr-branding-page .sr-td { padding: 14px 16px; }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.sr-page .main,
    body.sr-transfers-page .main,
    body.sr-expenses-page .main,
    body.sr-receivables-page .main,
    body.sr-branding-page .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.sr-page .sr-page-head,
    body.sr-transfers-page .sr-page-head,
    body.sr-expenses-page .sr-page-head,
    body.sr-receivables-page .sr-page-head,
    body.sr-branding-page .sr-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    body.sr-page .sr-page-title,
    body.sr-transfers-page .sr-page-title,
    body.sr-expenses-page .sr-page-title,
    body.sr-receivables-page .sr-page-title,
    body.sr-branding-page .sr-page-title { font-size: clamp(22px, 6vw, 26px); }
    body.sr-page .sr-page-sub,
    body.sr-transfers-page .sr-page-sub,
    body.sr-expenses-page .sr-page-sub,
    body.sr-receivables-page .sr-page-sub,
    body.sr-branding-page .sr-page-sub { font-size: 13px; }
    body.sr-page .sr-page-actions,
    body.sr-transfers-page .sr-page-actions,
    body.sr-expenses-page .sr-page-actions,
    body.sr-receivables-page .sr-page-actions,
    body.sr-branding-page .sr-page-actions { width: 100%; }
    body.sr-page .lr-stat-card.sr-stat,
    body.sr-transfers-page .lr-stat-card.sr-stat,
    body.sr-expenses-page .lr-stat-card.sr-stat,
    body.sr-receivables-page .lr-stat-card.sr-stat,
    body.sr-branding-page .lr-stat-card.sr-stat { padding: 18px 20px; }
    body.sr-page .sr-panel,
    body.sr-transfers-page .sr-panel,
    body.sr-expenses-page .sr-panel,
    body.sr-receivables-page .sr-panel,
    body.sr-branding-page .sr-panel { border-radius: 12px; }
    body.sr-page .sr-th,
    body.sr-transfers-page .sr-th,
    body.sr-expenses-page .sr-th,
    body.sr-receivables-page .sr-th,
    body.sr-branding-page .sr-th { padding: 12px 14px; font-size: 10px; }
    body.sr-page .sr-td,
    body.sr-transfers-page .sr-td,
    body.sr-expenses-page .sr-td,
    body.sr-receivables-page .sr-td,
    body.sr-branding-page .sr-td { padding: 14px 14px; font-size: 13px; }
    /* Right-edge fade hint that the table scrolls horizontally */
    body.sr-page .sr-table-scroll,
    body.sr-transfers-page .sr-table-scroll,
    body.sr-expenses-page .sr-table-scroll,
    body.sr-receivables-page .sr-table-scroll,
    body.sr-branding-page .sr-table-scroll {
        background:
            linear-gradient(to right, transparent calc(100% - 28px), rgba(217, 210, 194, 0.55) 100%) no-repeat
            right center / 28px 100%;
    }
    body.sr-page .sr-tile-grid { grid-template-columns: 1fr; }
    body.sr-branding-page .sr-filter { min-width: 100%; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    body.sr-page .sr-btn,
    body.sr-transfers-page .sr-btn,
    body.sr-expenses-page .sr-btn,
    body.sr-receivables-page .sr-btn,
    body.sr-branding-page .sr-btn { width: 100%; }
    body.sr-page .sr-btn--sm,
    body.sr-transfers-page .sr-btn--sm,
    body.sr-expenses-page .sr-btn--sm,
    body.sr-receivables-page .sr-btn--sm,
    body.sr-branding-page .sr-btn--sm { width: auto; }
    body.sr-page .sr-page-actions,
    body.sr-transfers-page .sr-page-actions,
    body.sr-expenses-page .sr-page-actions,
    body.sr-receivables-page .sr-page-actions,
    body.sr-branding-page .sr-page-actions { flex-direction: column; }
}

/* ==========================================
   SR FORM PAGES (sr2, 2026-05-18)
   ==========================================
   Mercury / Brex form chrome for the four SR submission forms
   (Transfers / Expenses / Receivables / Branding). Inherits all
   sr1 tokens (sr-page-head, sr-btn family, sr-flash, sr-panel,
   sr-accent #a37250). Adds form card + field + section + modal
   styling, all scoped under body.sr-*-form so older unscoped
   .form-group / .btn / .marketing-cat-card rules keep working on
   every non-SR-form view (importantly: views/marketing/* still
   renders the shared partial with its original chrome).
   ========================================== */

body.sr-transfers-form,
body.sr-expenses-form,
body.sr-receivables-form,
body.sr-branding-form {
    --sr-accent: #a37250;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--kf-paper-deep, #efeae0);
    color: var(--kf-ink, #1a2230);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sr-transfers-form .main,
body.sr-expenses-form .main,
body.sr-receivables-form .main,
body.sr-branding-form .main {
    background: var(--kf-paper-deep, #efeae0);
    padding: 40px 48px 80px;
    min-height: 100vh;
}

/* ---------- Page header (mirror sr1) ---------- */
body.sr-transfers-form .sr-page-head,
body.sr-expenses-form .sr-page-head,
body.sr-receivables-form .sr-page-head,
body.sr-branding-form .sr-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}
body.sr-transfers-form .sr-page-head-text,
body.sr-expenses-form .sr-page-head-text,
body.sr-receivables-form .sr-page-head-text,
body.sr-branding-form .sr-page-head-text {
    min-width: 0;
    flex: 1 1 320px;
}
body.sr-transfers-form .sr-page-dot,
body.sr-expenses-form .sr-page-dot,
body.sr-receivables-form .sr-page-dot,
body.sr-branding-form .sr-page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sr-accent);
    margin: 0 0 18px;
}
body.sr-transfers-form .sr-page-eyebrow,
body.sr-expenses-form .sr-page-eyebrow,
body.sr-receivables-form .sr-page-eyebrow,
body.sr-branding-form .sr-page-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 0 0 10px;
}
body.sr-transfers-form .sr-page-title,
body.sr-expenses-form .sr-page-title,
body.sr-receivables-form .sr-page-title,
body.sr-branding-form .sr-page-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.1;
    color: var(--kf-navy, #0b1f3a);
    margin: 0 0 8px;
    max-width: 32ch;
}
body.sr-transfers-form .sr-page-sub,
body.sr-expenses-form .sr-page-sub,
body.sr-receivables-form .sr-page-sub,
body.sr-branding-form .sr-page-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-muted, #6e6a5f);
    margin: 0;
    max-width: 70ch;
    line-height: 1.5;
}
body.sr-transfers-form .sr-page-actions,
body.sr-expenses-form .sr-page-actions,
body.sr-receivables-form .sr-page-actions,
body.sr-branding-form .sr-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Buttons (re-declare locally — same shape as sr1) ---------- */
body.sr-transfers-form .sr-btn,
body.sr-expenses-form .sr-btn,
body.sr-receivables-form .sr-btn,
body.sr-branding-form .sr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-transfers-form .sr-btn--primary,
body.sr-expenses-form .sr-btn--primary,
body.sr-receivables-form .sr-btn--primary,
body.sr-branding-form .sr-btn--primary {
    background: var(--kf-navy, #0b1f3a);
    color: #f6f3ec;
}
body.sr-transfers-form .sr-btn--primary:hover,
body.sr-expenses-form .sr-btn--primary:hover,
body.sr-receivables-form .sr-btn--primary:hover,
body.sr-branding-form .sr-btn--primary:hover {
    background: var(--kf-navy-deep, #061427);
}
body.sr-transfers-form .sr-btn--primary:focus-visible,
body.sr-expenses-form .sr-btn--primary:focus-visible,
body.sr-receivables-form .sr-btn--primary:focus-visible,
body.sr-branding-form .sr-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.18);
}
body.sr-transfers-form .sr-btn--ghost,
body.sr-expenses-form .sr-btn--ghost,
body.sr-receivables-form .sr-btn--ghost,
body.sr-branding-form .sr-btn--ghost {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-navy, #0b1f3a);
    border-color: var(--kf-rule, #d9d2c2);
}
body.sr-transfers-form .sr-btn--ghost:hover,
body.sr-expenses-form .sr-btn--ghost:hover,
body.sr-receivables-form .sr-btn--ghost:hover,
body.sr-branding-form .sr-btn--ghost:hover {
    border-color: var(--kf-navy, #0b1f3a);
    color: var(--kf-accent, #9a7b3f);
}
body.sr-transfers-form .sr-btn--ghost:focus-visible,
body.sr-expenses-form .sr-btn--ghost:focus-visible,
body.sr-receivables-form .sr-btn--ghost:focus-visible,
body.sr-branding-form .sr-btn--ghost:focus-visible {
    outline: none;
    border-color: var(--kf-navy, #0b1f3a);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}
body.sr-transfers-form .sr-btn--danger,
body.sr-expenses-form .sr-btn--danger,
body.sr-receivables-form .sr-btn--danger,
body.sr-branding-form .sr-btn--danger {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-signal-negative, #8d3e3e);
    border-color: var(--kf-rule, #d9d2c2);
}
body.sr-transfers-form .sr-btn--danger:hover,
body.sr-expenses-form .sr-btn--danger:hover,
body.sr-receivables-form .sr-btn--danger:hover,
body.sr-branding-form .sr-btn--danger:hover {
    border-color: var(--kf-signal-negative, #8d3e3e);
    background: var(--kf-signal-negative-bg, #f1e0e0);
}
body.sr-transfers-form .sr-inline-form,
body.sr-expenses-form .sr-inline-form,
body.sr-receivables-form .sr-inline-form,
body.sr-branding-form .sr-inline-form {
    display: inline-block;
    margin: 0;
}

/* ---------- Flash ---------- */
body.sr-transfers-form .sr-flash,
body.sr-expenses-form .sr-flash,
body.sr-receivables-form .sr-flash,
body.sr-branding-form .sr-flash {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 3px solid var(--kf-signal-warning, #b58a3f);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--kf-ink, #1a2230);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.04);
    max-width: 1100px;
}

/* ---------- Form card (the one wrapper) ---------- */
body.sr-transfers-form .sr-form-card,
body.sr-expenses-form .sr-form-card,
body.sr-receivables-form .sr-form-card,
body.sr-branding-form .sr-form-card {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.05);
    box-sizing: border-box;
}
body.sr-transfers-form .sr-form-card--narrow,
body.sr-expenses-form .sr-form-card--narrow,
body.sr-receivables-form .sr-form-card--narrow,
body.sr-branding-form .sr-form-card--narrow {
    max-width: 780px;
}
body.sr-transfers-form .sr-form-card--mid,
body.sr-expenses-form .sr-form-card--mid,
body.sr-receivables-form .sr-form-card--mid,
body.sr-branding-form .sr-form-card--mid {
    max-width: 680px;
}
body.sr-transfers-form .sr-form-card--wide,
body.sr-expenses-form .sr-form-card--wide,
body.sr-receivables-form .sr-form-card--wide,
body.sr-branding-form .sr-form-card--wide {
    max-width: 1100px;
}

/* ---------- Section eyebrow (replaces nested h3 cards) ---------- */
body.sr-transfers-form .sr-form-section-label,
body.sr-expenses-form .sr-form-section-label,
body.sr-receivables-form .sr-form-section-label,
body.sr-branding-form .sr-form-section-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
    margin: 28px 0 14px;
    padding-top: 24px;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
}
/* First section has no top rule */
body.sr-transfers-form .sr-form-section-label:first-of-type,
body.sr-expenses-form .sr-form-section-label:first-of-type,
body.sr-receivables-form .sr-form-section-label:first-of-type,
body.sr-branding-form .sr-form-section-label:first-of-type,
body.sr-transfers-form .sr-form-section-label--first,
body.sr-expenses-form .sr-form-section-label--first,
body.sr-receivables-form .sr-form-section-label--first,
body.sr-branding-form .sr-form-section-label--first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ---------- Field grid ---------- */
body.sr-transfers-form .sr-form-grid,
body.sr-expenses-form .sr-form-grid,
body.sr-receivables-form .sr-form-grid,
body.sr-branding-form .sr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}
body.sr-transfers-form .sr-form-grid--3,
body.sr-expenses-form .sr-form-grid--3,
body.sr-receivables-form .sr-form-grid--3,
body.sr-branding-form .sr-form-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
body.sr-transfers-form .sr-form-grid > .sr-form-row--full,
body.sr-expenses-form .sr-form-grid > .sr-form-row--full,
body.sr-receivables-form .sr-form-grid > .sr-form-row--full,
body.sr-branding-form .sr-form-grid > .sr-form-row--full {
    grid-column: 1 / -1;
}

body.sr-transfers-form .sr-form-help,
body.sr-expenses-form .sr-form-help,
body.sr-receivables-form .sr-form-help,
body.sr-branding-form .sr-form-help {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted, #6e6a5f);
    margin: 8px 0 0;
    line-height: 1.5;
}

/* ---------- Labels + inputs ---------- */
body.sr-transfers-form .sr-form-label,
body.sr-expenses-form .sr-form-label,
body.sr-receivables-form .sr-form-label,
body.sr-branding-form .sr-form-label {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--kf-ink, #1a2230);
    margin: 0 0 6px;
}
body.sr-transfers-form .sr-form-req,
body.sr-expenses-form .sr-form-req,
body.sr-receivables-form .sr-form-req,
body.sr-branding-form .sr-form-req {
    color: var(--kf-signal-negative, #8d3e3e);
    font-weight: 500;
    margin-left: 2px;
}

/* Field wrapper (a thin shim so .form-group from the existing markup
   still works without re-templating every single field). Mercury-style
   spacing without disturbing the legacy class. */
body.sr-transfers-form .sr-form-grid .form-group,
body.sr-expenses-form .sr-form-grid .form-group,
body.sr-receivables-form .sr-form-grid .form-group,
body.sr-branding-form .sr-form-grid .form-group {
    margin: 0;
    min-width: 0;
}

/* Input / select / textarea — scoped, only inside the SR form card.
   The legacy global .form-group label rule sets bold-default;
   we re-style it here. */
body.sr-transfers-form .sr-form-card .form-group label,
body.sr-expenses-form .sr-form-card .form-group label,
body.sr-receivables-form .sr-form-card .form-group label,
body.sr-branding-form .sr-form-card .form-group label {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--kf-ink, #1a2230);
    margin: 0 0 6px;
    text-transform: none;
}

body.sr-transfers-form .sr-form-card input[type="text"],
body.sr-transfers-form .sr-form-card input[type="number"],
body.sr-transfers-form .sr-form-card input[type="date"],
body.sr-transfers-form .sr-form-card input[type="email"],
body.sr-transfers-form .sr-form-card input[type="url"],
body.sr-transfers-form .sr-form-card input[type="search"],
body.sr-transfers-form .sr-form-card input[type="tel"],
body.sr-transfers-form .sr-form-card select,
body.sr-transfers-form .sr-form-card textarea,
body.sr-expenses-form .sr-form-card input[type="text"],
body.sr-expenses-form .sr-form-card input[type="number"],
body.sr-expenses-form .sr-form-card input[type="date"],
body.sr-expenses-form .sr-form-card input[type="email"],
body.sr-expenses-form .sr-form-card input[type="url"],
body.sr-expenses-form .sr-form-card input[type="search"],
body.sr-expenses-form .sr-form-card input[type="tel"],
body.sr-expenses-form .sr-form-card select,
body.sr-expenses-form .sr-form-card textarea,
body.sr-receivables-form .sr-form-card input[type="text"],
body.sr-receivables-form .sr-form-card input[type="number"],
body.sr-receivables-form .sr-form-card input[type="date"],
body.sr-receivables-form .sr-form-card input[type="email"],
body.sr-receivables-form .sr-form-card input[type="url"],
body.sr-receivables-form .sr-form-card input[type="search"],
body.sr-receivables-form .sr-form-card input[type="tel"],
body.sr-receivables-form .sr-form-card select,
body.sr-receivables-form .sr-form-card textarea,
body.sr-branding-form .sr-form-shell input[type="text"],
body.sr-branding-form .sr-form-shell input[type="number"],
body.sr-branding-form .sr-form-shell input[type="date"],
body.sr-branding-form .sr-form-shell input[type="email"],
body.sr-branding-form .sr-form-shell input[type="url"],
body.sr-branding-form .sr-form-shell input[type="search"],
body.sr-branding-form .sr-form-shell input[type="tel"],
body.sr-branding-form .sr-form-shell select,
body.sr-branding-form .sr-form-shell textarea {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #fdfcf8;
    border: 1px solid var(--kf-rule, #d9d2c2);
    border-radius: 10px;
    box-sizing: border-box;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
    line-height: 1.4;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sr-transfers-form .sr-form-card textarea,
body.sr-expenses-form .sr-form-card textarea,
body.sr-receivables-form .sr-form-card textarea,
body.sr-branding-form .sr-form-shell textarea {
    height: auto;
    min-height: 88px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.5;
    font-variant-numeric: normal;
}

body.sr-transfers-form .sr-form-card input[type="number"],
body.sr-receivables-form .sr-form-card input[type="number"],
body.sr-expenses-form .sr-form-card input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* Focus ring — navy at 10% so it reads "selected, calm" not "alarm". */
body.sr-transfers-form .sr-form-card input:focus,
body.sr-transfers-form .sr-form-card select:focus,
body.sr-transfers-form .sr-form-card textarea:focus,
body.sr-expenses-form .sr-form-card input:focus,
body.sr-expenses-form .sr-form-card select:focus,
body.sr-expenses-form .sr-form-card textarea:focus,
body.sr-receivables-form .sr-form-card input:focus,
body.sr-receivables-form .sr-form-card select:focus,
body.sr-receivables-form .sr-form-card textarea:focus,
body.sr-branding-form .sr-form-shell input:focus,
body.sr-branding-form .sr-form-shell select:focus,
body.sr-branding-form .sr-form-shell textarea:focus {
    outline: none;
    border-color: var(--kf-navy, #0b1f3a);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.10);
    background: #fdfcf8;
}

/* Disabled / readonly — quiet paper-deep wash, no diagonal stripe. */
body.sr-transfers-form .sr-form-card input[readonly],
body.sr-transfers-form .sr-form-card input[disabled],
body.sr-transfers-form .sr-form-card select[disabled],
body.sr-transfers-form .sr-form-card textarea[readonly],
body.sr-transfers-form .sr-form-card textarea[disabled],
body.sr-expenses-form .sr-form-card input[readonly],
body.sr-expenses-form .sr-form-card input[disabled],
body.sr-expenses-form .sr-form-card select[disabled],
body.sr-receivables-form .sr-form-card input[readonly],
body.sr-receivables-form .sr-form-card input[disabled],
body.sr-receivables-form .sr-form-card select[disabled],
body.sr-branding-form .sr-form-shell input[readonly],
body.sr-branding-form .sr-form-shell input[disabled],
body.sr-branding-form .sr-form-shell select[disabled] {
    background: var(--kf-paper-deep, #efeae0);
    color: var(--kf-muted, #6e6a5f);
    cursor: not-allowed;
}

/* Native select chevron — appearance:none + inline-SVG arrow.
   Position into the right-pad so the text doesn't sit under the glyph. */
body.sr-transfers-form .sr-form-card select,
body.sr-expenses-form .sr-form-card select,
body.sr-receivables-form .sr-form-card select,
body.sr-branding-form .sr-form-shell select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

/* Required asterisk colour (handles the legacy var(--red) inline pattern). */
body.sr-transfers-form .sr-form-card .form-group label span[style*="--red"],
body.sr-expenses-form .sr-form-card .form-group label span[style*="--red"],
body.sr-receivables-form .sr-form-card .form-group label span[style*="--red"],
body.sr-branding-form .sr-form-shell .form-group label span[style*="--red"] {
    color: var(--kf-signal-negative, #8d3e3e) !important;
    font-weight: 500;
}

/* ---------- Form actions row ---------- */
body.sr-transfers-form .sr-form-actions,
body.sr-expenses-form .sr-form-actions,
body.sr-receivables-form .sr-form-actions,
body.sr-branding-form .sr-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    flex-wrap: wrap;
}

/* ---------- Checkboxes (custom small box, navy when checked) ---------- */
body.sr-transfers-form .sr-form-check,
body.sr-expenses-form .sr-form-check,
body.sr-receivables-form .sr-form-check,
body.sr-branding-form .sr-form-shell .sr-form-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
    cursor: pointer;
    user-select: none;
}
body.sr-transfers-form .sr-form-check input[type="checkbox"],
body.sr-expenses-form .sr-form-check input[type="checkbox"],
body.sr-receivables-form .sr-form-check input[type="checkbox"],
body.sr-branding-form .sr-form-shell .sr-form-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--kf-rule, #d9d2c2);
    border-radius: 5px;
    background: #fdfcf8;
    cursor: pointer;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-transfers-form .sr-form-check input[type="checkbox"]:checked,
body.sr-expenses-form .sr-form-check input[type="checkbox"]:checked,
body.sr-receivables-form .sr-form-check input[type="checkbox"]:checked,
body.sr-branding-form .sr-form-shell .sr-form-check input[type="checkbox"]:checked {
    background: var(--kf-navy, #0b1f3a);
    border-color: var(--kf-navy, #0b1f3a);
}
body.sr-transfers-form .sr-form-check input[type="checkbox"]:checked::after,
body.sr-expenses-form .sr-form-check input[type="checkbox"]:checked::after,
body.sr-receivables-form .sr-form-check input[type="checkbox"]:checked::after,
body.sr-branding-form .sr-form-shell .sr-form-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
body.sr-transfers-form .sr-form-check input[type="checkbox"]:focus-visible,
body.sr-expenses-form .sr-form-check input[type="checkbox"]:focus-visible,
body.sr-receivables-form .sr-form-check input[type="checkbox"]:focus-visible,
body.sr-branding-form .sr-form-shell .sr-form-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.15);
    border-color: var(--kf-navy, #0b1f3a);
}

/* ---------- Transfer-form-specific: read-only view card,
              salary subform grid, transfer layout, cost summary
              (these existed inline; here we move only what we
              must to keep the view-mode page on-baseline). ---------- */
body.sr-transfers-form .sr-view-card {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.05);
    margin: 0 0 20px;
    max-width: 1100px;
    box-sizing: border-box;
}
body.sr-transfers-form .sr-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    color: var(--kf-ink, #1a2230);
}
body.sr-transfers-form .sr-view-grid > .sr-view-full {
    grid-column: 1 / -1;
}
body.sr-transfers-form .sr-view-grid strong {
    color: var(--kf-muted, #6e6a5f);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 6px;
    display: inline-block;
}
body.sr-transfers-form .sr-view-grid .sr-view-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: var(--kf-navy, #0b1f3a);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
body.sr-transfers-form .sr-view-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: "Source Sans 3", sans-serif;
}
body.sr-transfers-form .sr-view-pill--approved { background: var(--kf-signal-positive-bg, #e8efe9); color: var(--kf-signal-positive, #3f6b46); }
body.sr-transfers-form .sr-view-pill--rejected { background: var(--kf-signal-negative-bg, #f1e0e0); color: var(--kf-signal-negative, #8d3e3e); }
body.sr-transfers-form .sr-view-pill--md { background: var(--kf-signal-info-bg, #e3e8ee); color: var(--kf-signal-info, #486b8a); }
body.sr-transfers-form .sr-view-pill--hr { background: var(--kf-signal-info-bg, #e3e8ee); color: var(--kf-signal-info, #486b8a); }
body.sr-transfers-form .sr-view-pill--director { background: var(--kf-signal-warning-bg, #f4ecdc); color: var(--kf-signal-warning, #b58a3f); }
body.sr-transfers-form .sr-view-reject {
    background: var(--kf-signal-negative-bg, #f1e0e0);
    border: 1px solid #e9c8c8;
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--kf-ink, #1a2230);
    font-size: 13px;
}
body.sr-transfers-form .sr-view-reject strong {
    color: var(--kf-signal-negative, #8d3e3e);
    font-size: 11px;
    letter-spacing: 0.12em;
}
body.sr-transfers-form .sr-view-comp {
    grid-column: 1 / -1;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    padding-top: 14px;
    margin-top: 6px;
}
body.sr-transfers-form .sr-view-pre {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 6px 0 0;
    color: var(--kf-ink, #1a2230);
    font-size: 13.5px;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
}

/* Letter card — keep on baseline */
body.sr-transfers-form .sr-letter-card {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 1100px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.05);
    box-sizing: border-box;
}
body.sr-transfers-form .sr-letter-card-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-ink, #1a2230);
}
body.sr-transfers-form .sr-letter-card-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--kf-muted, #6e6a5f);
    margin-top: 4px;
}

/* Salary subform (3 cols → wraps on narrow) */
body.sr-transfers-form .sr-salary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
    margin-top: 16px;
}

/* Approval-timeline outer card already lives in a shared partial. Quiet its
   surface so it reads as part of the SR baseline without rewriting the
   partial (the partial is also rendered by PC transfers — out of scope). */
body.sr-transfers-form .main > div[style*="border-radius:12px"][style*="background:#fff"]:has(ol.transfers-approval-timeline),
body.sr-transfers-form .main > div[style*="border-radius:12px"][style*="background:#fff"]:has(> div h3) {
    background: var(--kf-paper, #f6f3ec) !important;
    border-color: var(--kf-rule-soft, #e7e1d3) !important;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.05) !important;
    border-radius: 14px !important;
}

/* Transfer 2-col layout (form left + cost summary right) */
body.sr-transfers-form .transfer-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1400px;
}
body.sr-transfers-form .transfer-layout-left {
    flex: 3;
    min-width: 0;
}
body.sr-transfers-form .transfer-layout-right {
    flex: 2;
    min-width: 340px;
    max-width: 520px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
}

/* ---------- Modal restyle (reject + escalate) ---------- */
body.sr-transfers-form #rejectModal,
body.sr-transfers-form #escalateModal {
    background: rgba(11, 31, 58, 0.45) !important;
    backdrop-filter: blur(2px);
}
body.sr-transfers-form #rejectModal > div,
body.sr-transfers-form #escalateModal > div {
    background: var(--kf-paper, #f6f3ec) !important;
    border-radius: 16px !important;
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.20) !important;
    overflow: hidden;
}
body.sr-transfers-form #rejectModal > div > div:first-child,
body.sr-transfers-form #escalateModal > div > div:first-child {
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
}
body.sr-transfers-form #rejectModal h3,
body.sr-transfers-form #escalateModal h3 {
    font-family: "Source Serif 4", Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--kf-navy, #0b1f3a) !important;
    letter-spacing: -0.015em;
    font-size: 19px !important;
}
body.sr-transfers-form #rejectModal p,
body.sr-transfers-form #escalateModal p {
    color: var(--kf-muted, #6e6a5f) !important;
}
body.sr-transfers-form #rejectModal textarea,
body.sr-transfers-form #escalateModal textarea {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    background: #fdfcf8;
    border: 1px solid var(--kf-rule, #d9d2c2);
    border-radius: 10px;
    box-sizing: border-box;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: var(--kf-ink, #1a2230);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-transfers-form #rejectModal textarea:focus,
body.sr-transfers-form #escalateModal textarea:focus {
    outline: none;
    border-color: var(--kf-navy, #0b1f3a);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.10);
}
body.sr-transfers-form #rejectModal label,
body.sr-transfers-form #escalateModal label {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--kf-ink, #1a2230);
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0.01em;
}
body.sr-transfers-form #rejectModal > div > form > div:last-child,
body.sr-transfers-form #escalateModal > div > form > div:last-child {
    background: var(--kf-paper-deep, #efeae0) !important;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
}
/* The modal's bottom-row Cancel + primary buttons inherit the legacy .btn
   class. Restyle them inside our scope so we don't fight the global .btn rule
   on other pages. */
body.sr-transfers-form #rejectModal .btn,
body.sr-transfers-form #escalateModal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-navy, #0b1f3a);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-transfers-form #rejectModal .btn:hover,
body.sr-transfers-form #escalateModal .btn:hover {
    border-color: var(--kf-navy, #0b1f3a);
}
body.sr-transfers-form #rejectModal .btn.btn-primary,
body.sr-transfers-form #escalateModal .btn.btn-primary {
    background: var(--kf-navy, #0b1f3a);
    color: #f6f3ec;
    border-color: var(--kf-navy, #0b1f3a);
}
body.sr-transfers-form #rejectModal .btn.btn-primary:hover,
body.sr-transfers-form #escalateModal .btn.btn-primary:hover {
    background: var(--kf-navy-deep, #061427);
    border-color: var(--kf-navy-deep, #061427);
}
body.sr-transfers-form #rejectModal .btn.btn-danger {
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-signal-negative, #8d3e3e);
    border-color: var(--kf-rule, #d9d2c2);
}
body.sr-transfers-form #rejectModal .btn.btn-danger:hover {
    border-color: var(--kf-signal-negative, #8d3e3e);
    background: var(--kf-signal-negative-bg, #f1e0e0);
}

/* ---------- File dropzone (expense form) ---------- */
body.sr-expenses-form .file-dropzone {
    border: 1.5px dashed var(--kf-rule, #d9d2c2);
    background: #fdfcf8;
    border-radius: 12px;
    padding: 22px;
    color: var(--kf-muted, #6e6a5f);
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-expenses-form .file-dropzone:hover,
body.sr-expenses-form .file-dropzone.is-dragover {
    border-color: var(--kf-navy, #0b1f3a);
    background: var(--kf-paper-deep, #efeae0);
}
body.sr-expenses-form .file-dropzone-title {
    color: var(--kf-ink, #1a2230);
    font-family: "Source Sans 3", sans-serif;
}
body.sr-expenses-form .file-dropzone-title strong {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
}
body.sr-expenses-form .file-dropzone-hint {
    color: var(--kf-muted, #6e6a5f);
    font-size: 12px;
}

/* ---------- searchable_select widget — quiet its panel
              + ensure its bare input gets the Mercury treatment ---------- */
body.sr-transfers-form .sr-form-card .sselect .staff-dropdown,
body.sr-branding-form .sr-form-shell .sselect .staff-dropdown {
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: var(--kf-paper, #f6f3ec);
    box-shadow: 0 12px 30px rgba(11, 31, 58, 0.10);
    border-radius: 10px;
}

/* ---------- Branding-form descendant rules (partial untouched) ----------
   The shared marketing/request_form_body.hbs partial uses these classes:
     .marketing-cat-card        — category picker tiles
     .marketing-section         — per-category field group
   Plus inline-styled <h3>, <form>, <p>, etc. We can't rewrite those, but
   descendant selectors here override what we need to look right under
   body.sr-branding-form WITHOUT affecting the Marketing module's own pages
   (which don't have the body.sr-branding-form class). */
body.sr-branding-form .sr-form-shell > form {
    background: var(--kf-paper, #f6f3ec) !important;
    border: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.05);
    max-width: 1100px;
    box-sizing: border-box;
}
body.sr-branding-form .sr-form-shell > form > h3 {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--kf-muted, #6e6a5f) !important;
    margin: 28px 0 14px !important;
    padding-top: 24px;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
}
body.sr-branding-form .sr-form-shell > form > h3:first-of-type {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
}
body.sr-branding-form .sr-form-shell .marketing-section > h3 {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--kf-muted, #6e6a5f) !important;
    margin: 28px 0 14px !important;
    padding-top: 24px;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
}
body.sr-branding-form .sr-form-shell .form-group label {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--kf-ink, #1a2230) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    margin: 0 0 6px !important;
}
body.sr-branding-form .sr-form-shell .form-group label span[style*="--red"] {
    color: var(--kf-signal-negative, #8d3e3e) !important;
    font-weight: 500;
}
body.sr-branding-form .sr-form-shell .form-group label span[style*="--gray-500"] {
    color: var(--kf-muted, #6e6a5f) !important;
    font-weight: 400 !important;
}
body.sr-branding-form .sr-form-shell .form-group {
    margin: 0;
    min-width: 0;
}
/* Marketing category cards — quiet the harsh white card-on-card */
body.sr-branding-form .sr-form-shell .marketing-cat-card {
    border: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
    background: var(--kf-paper-deep, #efeae0) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: var(--kf-ink, #1a2230) !important;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.sr-branding-form .sr-form-shell .marketing-cat-card:hover {
    border-color: var(--kf-rule, #d9d2c2) !important;
}
/* When the inline JS toggles a card "active" it sets
   c.style.borderColor='var(--gold)'; c.style.background='#fffbeb'. That
   substitutes the (reserved) Pulse-dot pink. The inline styles win against
   selectors, but we can override the active state by targeting cards whose
   inner radio is :checked — those styles aren't inline. */
body.sr-branding-form .sr-form-shell .marketing-cat-card:has(input[type="radio"]:checked) {
    border-color: var(--kf-navy, #0b1f3a) !important;
    background: var(--kf-paper, #f6f3ec) !important;
    color: var(--kf-navy, #0b1f3a) !important;
    box-shadow: 0 0 0 1px var(--kf-navy, #0b1f3a) !important;
}
/* Inline info/warning banners inside the partial (yellow + blue boxes) */
body.sr-branding-form .sr-form-shell div[style*="background:#fef3c7"] {
    background: var(--kf-paper, #f6f3ec) !important;
    border: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
    border-left: 3px solid var(--kf-signal-warning, #b58a3f) !important;
    color: var(--kf-ink, #1a2230) !important;
    border-radius: 10px !important;
}
body.sr-branding-form .sr-form-shell div[style*="background:#eff6ff"] {
    background: var(--kf-paper, #f6f3ec) !important;
    border: 1px solid var(--kf-rule-soft, #e7e1d3) !important;
    border-left: 3px solid var(--kf-signal-info, #486b8a) !important;
    color: var(--kf-ink, #1a2230) !important;
    border-radius: 10px !important;
}
/* Bottom-row Cancel + Submit buttons in the partial use .btn / .btn-primary. */
body.sr-branding-form .sr-form-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: var(--kf-paper, #f6f3ec);
    color: var(--kf-navy, #0b1f3a);
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sr-branding-form .sr-form-shell .btn:hover {
    border-color: var(--kf-navy, #0b1f3a);
    color: var(--kf-accent, #9a7b3f);
}
body.sr-branding-form .sr-form-shell .btn.btn-primary {
    background: var(--kf-navy, #0b1f3a);
    color: #f6f3ec;
    border-color: var(--kf-navy, #0b1f3a);
}
body.sr-branding-form .sr-form-shell .btn.btn-primary:hover {
    background: var(--kf-navy-deep, #061427);
    border-color: var(--kf-navy-deep, #061427);
    color: #f6f3ec;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.sr-transfers-form *,
    body.sr-expenses-form *,
    body.sr-receivables-form *,
    body.sr-branding-form * { transition: none !important; animation: none !important; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px) {
    body.sr-transfers-form .main,
    body.sr-expenses-form .main,
    body.sr-receivables-form .main,
    body.sr-branding-form .main { padding: 32px 28px 64px; }
    body.sr-transfers-form .sr-page-head,
    body.sr-expenses-form .sr-page-head,
    body.sr-receivables-form .sr-page-head,
    body.sr-branding-form .sr-page-head { margin-bottom: 24px; }
    body.sr-transfers-form .sr-form-card,
    body.sr-expenses-form .sr-form-card,
    body.sr-receivables-form .sr-form-card,
    body.sr-branding-form .sr-form-shell > form { padding: 24px !important; border-radius: 14px !important; }
    body.sr-transfers-form .transfer-layout {
        flex-direction: column;
        max-width: none;
    }
    body.sr-transfers-form .transfer-layout-right {
        width: 100%;
        max-width: none;
        position: static;
    }
    body.sr-transfers-form .sr-salary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
    body.sr-transfers-form .main,
    body.sr-expenses-form .main,
    body.sr-receivables-form .main,
    body.sr-branding-form .main {
        padding: 24px 18px 56px;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }
    body.sr-transfers-form .sr-page-head,
    body.sr-expenses-form .sr-page-head,
    body.sr-receivables-form .sr-page-head,
    body.sr-branding-form .sr-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    body.sr-transfers-form .sr-page-actions,
    body.sr-expenses-form .sr-page-actions,
    body.sr-receivables-form .sr-page-actions,
    body.sr-branding-form .sr-page-actions { width: 100%; }
    body.sr-transfers-form .sr-form-card,
    body.sr-expenses-form .sr-form-card,
    body.sr-receivables-form .sr-form-card,
    body.sr-branding-form .sr-form-shell > form { padding: 20px !important; border-radius: 12px !important; }
    /* iOS zoom-on-focus suppression */
    body.sr-transfers-form .sr-form-card input,
    body.sr-transfers-form .sr-form-card select,
    body.sr-transfers-form .sr-form-card textarea,
    body.sr-expenses-form .sr-form-card input,
    body.sr-expenses-form .sr-form-card select,
    body.sr-expenses-form .sr-form-card textarea,
    body.sr-receivables-form .sr-form-card input,
    body.sr-receivables-form .sr-form-card select,
    body.sr-receivables-form .sr-form-card textarea,
    body.sr-branding-form .sr-form-shell input,
    body.sr-branding-form .sr-form-shell select,
    body.sr-branding-form .sr-form-shell textarea { font-size: 16px; }
    body.sr-transfers-form .sr-form-grid,
    body.sr-expenses-form .sr-form-grid,
    body.sr-receivables-form .sr-form-grid,
    body.sr-branding-form .sr-form-grid { grid-template-columns: 1fr; }
    body.sr-transfers-form .sr-form-grid--3 { grid-template-columns: 1fr; }
    body.sr-transfers-form .sr-salary-grid { grid-template-columns: 1fr; }
    body.sr-transfers-form .sr-view-grid { grid-template-columns: 1fr; }
    body.sr-transfers-form .sr-form-actions,
    body.sr-expenses-form .sr-form-actions,
    body.sr-receivables-form .sr-form-actions,
    body.sr-branding-form .sr-form-actions { flex-direction: column-reverse; }
    body.sr-transfers-form .sr-form-actions > *,
    body.sr-expenses-form .sr-form-actions > *,
    body.sr-receivables-form .sr-form-actions > *,
    body.sr-branding-form .sr-form-actions > * { width: 100%; }
}

/* ── TA dashboard — Actions subsections + Expiry-by-year chart ── */
body.tenant-admin-dashboard-page .ta-subsection-title {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 22px 0 10px;
}
body.tenant-admin-dashboard-page .ta-expiry-chart {
    padding: 20px 24px;
}
body.tenant-admin-dashboard-page .ta-expiry-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.tenant-admin-dashboard-page .ta-expiry-bar {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 14px;
}
body.tenant-admin-dashboard-page .ta-expiry-year {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
}
body.tenant-admin-dashboard-page .ta-expiry-track {
    position: relative;
    height: 10px;
    background: var(--kf-paper-deep);
    border-radius: 999px;
    overflow: hidden;
}
body.tenant-admin-dashboard-page .ta-expiry-fill {
    display: block;
    height: 100%;
    background: var(--kf-accent);
    border-radius: 999px;
    transition: width 240ms ease;
}
body.tenant-admin-dashboard-page .ta-expiry-count {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
@media (max-width: 540px) {
    body.tenant-admin-dashboard-page .ta-expiry-bar {
        grid-template-columns: 48px 1fr 40px;
        gap: 10px;
    }
}

/* ── TA dashboard — card trigger affordance + detail modal ── */
body.tenant-admin-dashboard-page .ta-card-trigger {
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    user-select: none;
}
body.tenant-admin-dashboard-page .ta-card-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
}
body.tenant-admin-dashboard-page .ta-card-trigger:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}

.ta-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ta-modal[hidden] { display: none; }
.ta-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ta-modal-panel {
    position: relative;
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.18);
    width: min(960px, 100%);
    max-height: min(80vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ta-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 160ms ease, color 160ms ease;
}
.ta-modal-close:hover { background: var(--kf-rule-soft); }
.ta-modal-close:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}
.ta-modal-head {
    padding: 22px 28px 14px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
.ta-modal-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--kf-navy);
    margin: 0;
    letter-spacing: -0.01em;
}
.ta-modal-sub {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}
.ta-modal-total {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kf-accent);
    margin: 10px 0 0;
    font-variant-numeric: tabular-nums;
}
.ta-modal-total:empty { display: none; }
.ta-modal-body {
    padding: 14px 28px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
}
.ta-modal-loading,
.ta-modal-empty,
.ta-modal-error {
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    color: var(--kf-muted);
    padding: 28px 0;
    text-align: center;
}
.ta-modal-error { color: var(--kf-signal-negative, #8d3e3e); }
.ta-modal-table-wrap { overflow-x: auto; }
.ta-modal-table-wrap .ta-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
}
.ta-modal-table-wrap .ta-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--kf-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
    position: sticky;
    top: 0;
    z-index: 1;
}
.ta-modal-table-wrap .ta-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kf-rule-soft);
    color: var(--kf-ink);
    vertical-align: middle;
}
.ta-modal-table-wrap .ta-table tbody tr:last-child td { border-bottom: 0; }
.ta-modal-table-wrap .ta-table tbody tr:hover { background: var(--kf-paper-deep); }
@media (max-width: 640px) {
    .ta-modal { padding: 12px; }
    .ta-modal-panel { max-height: 92vh; border-radius: 14px; }
    .ta-modal-head { padding: 18px 18px 12px; }
    .ta-modal-body { padding: 12px 18px 18px; }
    .ta-modal-title { font-size: 19px; }
}

/* TA tenancy form — let the searchable_select dropdown panel escape the
   .rbac-section's overflow:hidden bounds (which exists globally to clip the
   header's gray background to the section's rounded corners). Without this,
   the Agent dropdown gets cut off halfway. We re-round the header so its
   background doesn't spill past the section radius. */
body.tenant-admin-tenancy-form-page .rbac-section { overflow: visible; }
body.tenant-admin-tenancy-form-page .rbac-section-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* ── Service Request — Bookings (day-timeline layout) ── */
body.sr-bookings-page,
body.sr-bookings-form { background: var(--kf-paper-deep, #efeae0); }

/* ───── Picker: flight-style 2-month calendar + filter bar ───── */
body.sr-bookings-page .sr-bk-picker {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 16px;
    margin: 20px 0 16px;
}
@media (max-width: 960px) {
    body.sr-bookings-page .sr-bk-picker { grid-template-columns: 1fr; }
}

body.sr-bookings-page .sr-bk-cal {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    padding: 16px 20px;
}
body.sr-bookings-page .sr-bk-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
body.sr-bookings-page .sr-bk-cal__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
body.sr-bookings-page .sr-bk-cal__selected {
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-navy, #0b1f3a);
}
body.sr-bookings-page .sr-bk-cal__today {
    font-size: 12px;
    font-weight: 500;
    color: var(--kf-accent, #9a7b3f);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
}
body.sr-bookings-page .sr-bk-cal__today:hover { color: var(--kf-navy); }

body.sr-bookings-page .sr-bk-iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kf-ink, #1a2230);
    background: var(--kf-paper-deep, #efeae0);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    text-decoration: none;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}
body.sr-bookings-page .sr-bk-iconbtn:hover { background: var(--kf-rule, #d9d2c2); }
body.sr-bookings-page .sr-bk-iconbtn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
body.sr-bookings-page .sr-bk-day.is-disabled {
    color: var(--kf-muted, #6e6a5f);
    opacity: 0.3;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 36px;
    margin: 0 auto;
    font-size: 12px;
}

body.sr-bookings-page .sr-bk-cal__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 560px) {
    body.sr-bookings-page .sr-bk-cal__months { grid-template-columns: 1fr; }
    body.sr-bookings-page .sr-bk-cal__months > :nth-child(2) { display: none; }
}

body.sr-bookings-page .sr-bk-month__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kf-navy, #0b1f3a);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
body.sr-bookings-page .sr-bk-month__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
body.sr-bookings-page .sr-bk-month__table th {
    font-size: 10px;
    font-weight: 500;
    color: var(--kf-muted, #6e6a5f);
    padding: 4px 0;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}
body.sr-bookings-page .sr-bk-month__table td {
    padding: 2px;
    text-align: center;
}
body.sr-bookings-page .sr-bk-day {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 36px;
    margin: 0 auto;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--kf-ink, #1a2230);
    text-decoration: none;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: background 0.12s ease, color 0.12s ease;
}
body.sr-bookings-page .sr-bk-day:hover { background: var(--kf-paper-deep, #efeae0); }
body.sr-bookings-page .sr-bk-day.is-past { color: var(--kf-muted, #6e6a5f); opacity: 0.55; }
body.sr-bookings-page .sr-bk-day.is-today {
    color: var(--kf-navy, #0b1f3a);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--kf-accent, #9a7b3f);
}
body.sr-bookings-page .sr-bk-day.is-selected {
    background: var(--kf-navy, #0b1f3a);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    opacity: 1;
}

/* Filter bar (facility + toggles) */
body.sr-bookings-page .sr-bk-filters {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
}
body.sr-bookings-page .sr-bk-filters__row { display: flex; flex-direction: column; gap: 6px; }
body.sr-bookings-page .sr-bk-filters__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted, #6e6a5f);
}
body.sr-bookings-page .sr-bk-filters select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: #fff;
    font-size: 14px;
    color: var(--kf-ink);
    font-family: inherit;
}
body.sr-bookings-page .sr-bk-filters__toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--kf-rule-soft);
    margin-top: 2px;
}
body.sr-bookings-page .sr-bk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--kf-ink);
    cursor: pointer;
    padding: 4px 0;
}
body.sr-bookings-page .sr-bk-toggle input { accent-color: var(--kf-navy); }

/* Time range fields */
body.sr-bookings-page .sr-bk-timerow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
body.sr-bookings-page .sr-bk-timefield label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--kf-muted);
    margin-bottom: 4px;
}
body.sr-bookings-page .sr-bk-timefield input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: #fff;
    font-size: 15px;
    color: var(--kf-ink);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
body.sr-bookings-page .sr-bk-quickrange {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.sr-bookings-page .sr-bk-chip {
    appearance: none;
    border: 1px solid var(--kf-rule, #d9d2c2);
    background: #fff;
    color: var(--kf-ink);
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.sr-bookings-page .sr-bk-chip:hover {
    background: var(--kf-paper-deep);
    border-color: var(--kf-rule);
}
body.sr-bookings-page .sr-bk-checkbtn {
    width: 100%;
    margin-top: 4px;
}

/* Results list */
body.sr-bookings-page .sr-bk-results {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    padding: 20px 24px;
}
body.sr-bookings-page .sr-bk-results__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.sr-bookings-page .sr-bk-results__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kf-ink);
}
body.sr-bookings-page .sr-bk-results__title strong {
    color: var(--kf-navy);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.sr-bookings-page .sr-bk-results__meta {
    margin: 0;
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--kf-muted);
}
body.sr-bookings-page .sr-bk-tally {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
body.sr-bookings-page .sr-bk-tally--ok { color: var(--kf-signal-positive, #3f6b46); }
body.sr-bookings-page .sr-bk-tally--busy { color: var(--kf-signal-warning, #b58a3f); }

body.sr-bookings-page .sr-bk-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.sr-bookings-page .sr-bk-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--kf-rule-soft);
    border-radius: 12px;
    border-left: 3px solid var(--kf-rule);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.sr-bookings-page .sr-bk-result.is-available {
    border-left-color: var(--kf-signal-positive, #3f6b46);
}
body.sr-bookings-page .sr-bk-result.is-booked {
    border-left-color: var(--kf-signal-warning, #b58a3f);
    background: var(--kf-paper-deep);
}
body.sr-bookings-page .sr-bk-result__main { min-width: 0; flex: 1; }
body.sr-bookings-page .sr-bk-result__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-navy);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
body.sr-bookings-page .sr-bk-result__kind {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
    background: var(--kf-paper-deep);
    padding: 2px 8px;
    border-radius: 999px;
}
body.sr-bookings-page .sr-bk-result.is-booked .sr-bk-result__kind {
    background: #fff;
}
body.sr-bookings-page .sr-bk-result__meta {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--kf-muted);
}
body.sr-bookings-page .sr-bk-result__status {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--kf-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.sr-bookings-page .sr-bk-result__status--ok { color: var(--kf-signal-positive, #3f6b46); font-weight: 500; }
body.sr-bookings-page .sr-bk-result__conflicts {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--kf-ink);
}
body.sr-bookings-page .sr-bk-result__conflicts li {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
body.sr-bookings-page .sr-bk-result__conflicts strong {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--kf-navy);
}
body.sr-bookings-page .sr-bk-result__bookedby {
    color: var(--kf-muted);
    font-size: 12.5px;
}
body.sr-bookings-page .sr-bk-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
body.sr-bookings-page .sr-bk-dot--ok { background: var(--kf-signal-positive, #3f6b46); }
body.sr-bookings-page .sr-bk-dot--busy { background: var(--kf-signal-warning, #b58a3f); }

body.sr-bookings-page .sr-bk-result__action { flex: 0 0 auto; }
body.sr-bookings-page .sr-bk-result__busylabel {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.sr-bookings-page .sr-bk-result-empty {
    text-align: center;
    padding: 24px;
    color: var(--kf-muted);
    font-size: 13px;
}

@media (max-width: 640px) {
    body.sr-bookings-page .sr-bk-result {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    body.sr-bookings-page .sr-bk-result__action { width: 100%; }
    body.sr-bookings-page .sr-bk-result__action .sr-btn { width: 100%; justify-content: center; display: inline-flex; }
}

/* Day timeline */
body.sr-bookings-page .sr-bookings-timeline-wrap {
    padding: 0;
    overflow: hidden;
}
body.sr-bookings-page .sr-bookings-timeline-scroll {
    overflow-x: auto;
}
body.sr-bookings-page .sr-bookings-timeline {
    display: grid;
    min-width: 1100px;
    border-collapse: collapse;
}
body.sr-bookings-page .sr-bookings-timeline-corner {
    background: var(--kf-paper, #f6f3ec);
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    grid-column: 1 / span 1;
    position: sticky;
    left: 0;
    z-index: 3;
}
body.sr-bookings-page .sr-bookings-timeline-timecell {
    padding: 8px 4px;
    font-size: 11px;
    color: var(--kf-muted, #6e6a5f);
    text-align: center;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 1px solid var(--kf-rule-soft, #e7e1d3);
    background: var(--kf-paper, #f6f3ec);
    font-variant-numeric: tabular-nums;
}
body.sr-bookings-page .sr-bookings-timeline-rowlabel {
    grid-column: 1 / span 1;
    padding: 10px 12px;
    background: var(--kf-paper, #f6f3ec);
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.sr-bookings-page .sr-bookings-timeline-rowlabel-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--kf-ink, #1a2230);
}
body.sr-bookings-page .sr-bookings-timeline-rowlabel-meta {
    font-size: 11px;
    color: var(--kf-muted, #6e6a5f);
}
body.sr-bookings-page .sr-bookings-timeline-slot {
    background: #fff8e7;
    border-top: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-left: 1px solid var(--kf-rule-soft, #e7e1d3);
    min-height: 44px;
}
body.sr-bookings-page .sr-bookings-bar {
    align-self: center;
    margin: 4px 2px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(72, 107, 138, 0.18);
    border: 1px solid rgba(72, 107, 138, 0.35);
    color: var(--kf-navy, #0b1f3a);
    font-size: 11px;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-row: auto;
    z-index: 1;
    transition: filter 0.15s ease;
}
body.sr-bookings-page .sr-bookings-bar:hover { filter: brightness(0.95); }
body.sr-bookings-page .sr-bookings-bar.is-mine {
    background: rgba(255, 77, 126, 0.18);
    border-color: rgba(255, 77, 126, 0.40);
}
body.sr-bookings-page .sr-bookings-bar.status-checked_in {
    background: rgba(63, 107, 70, 0.18);
    border-color: rgba(63, 107, 70, 0.40);
    color: #2c4d31;
}
body.sr-bookings-page .sr-bookings-bar.status-cancelled,
body.sr-bookings-page .sr-bookings-bar.status-released {
    background: rgba(110, 106, 95, 0.12);
    border-color: rgba(110, 106, 95, 0.30);
    color: var(--kf-muted, #6e6a5f);
    text-decoration: line-through;
}
body.sr-bookings-page .sr-bookings-bar-title {
    font-weight: 500;
}
body.sr-bookings-page .sr-bookings-timeline-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--kf-muted, #6e6a5f);
    font-size: 13px;
}

/* Selected-day caption (above timeline) — hidden, now lives in calendar header */
body.sr-bookings-page .sr-bk-selected { display: none; }

/* Mobile-first split: timeline (desktop) vs cards (mobile) */
body.sr-bookings-page .sr-bk-mobile { display: none; }
@media (max-width: 768px) {
    body.sr-bookings-page .sr-bk-timeline-wrap { display: none; }
    body.sr-bookings-page .sr-bk-mobile { display: flex; flex-direction: column; gap: 12px; }
}

/* Mobile per-resource card */
body.sr-bookings-page .sr-bk-rescard {
    background: var(--kf-paper, #f6f3ec);
    border: 1px solid var(--kf-rule-soft, #e7e1d3);
    border-radius: 14px;
    padding: 14px 16px;
}
body.sr-bookings-page .sr-bk-rescard__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.sr-bookings-page .sr-bk-rescard__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kf-navy);
}
body.sr-bookings-page .sr-bk-rescard__meta {
    font-size: 12px;
    color: var(--kf-muted);
}
body.sr-bookings-page .sr-bk-rescard__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 16px;
}
body.sr-bookings-page .sr-bk-rescard__list:empty::after {
    content: "No bookings on this day.";
    display: block;
    font-size: 12px;
    color: var(--kf-muted);
    padding: 4px 0;
}
body.sr-bookings-page .sr-bk-rescard__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(72, 107, 138, 0.10);
    border-left: 3px solid rgba(72, 107, 138, 0.55);
    font-size: 13px;
}
body.sr-bookings-page .sr-bk-rescard__item.is-mine {
    background: rgba(255, 77, 126, 0.10);
    border-left-color: rgba(255, 77, 126, 0.60);
}
body.sr-bookings-page .sr-bk-rescard__item.status-checked_in {
    background: rgba(63, 107, 70, 0.10);
    border-left-color: rgba(63, 107, 70, 0.60);
}
body.sr-bookings-page .sr-bk-rescard__item.status-cancelled,
body.sr-bookings-page .sr-bk-rescard__item.status-released {
    background: rgba(110, 106, 95, 0.08);
    border-left-color: rgba(110, 106, 95, 0.40);
    color: var(--kf-muted);
    text-decoration: line-through;
}
body.sr-bookings-page .sr-bk-rescard__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--kf-navy);
    white-space: nowrap;
    flex: 0 0 auto;
}
body.sr-bookings-page .sr-bk-rescard__title {
    color: var(--kf-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
body.sr-bookings-page .sr-bk-mobile__empty {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    color: var(--kf-muted);
    font-size: 13px;
}

/* Tighten page padding on small screens */
@media (max-width: 768px) {
    body.sr-bookings-page .main,
    body.sr-bookings-form .main { padding: 24px 16px 60px; }
    body.sr-bookings-page .sr-bk-cal { padding: 12px 14px; }
    body.sr-bookings-page .sr-bk-filters { padding: 14px 16px; }
    body.sr-bookings-page .sr-bk-cal__selected { font-size: 13px; }
    body.sr-bookings-page .sr-bookings-timeline { min-width: 720px; }
}

/* Mobile-friendly tables: card-stack on small screens (used by My bookings + admin resources) */
@media (max-width: 720px) {
    body.sr-bookings-page .sr-table-scroll { overflow: visible; }
    body.sr-bookings-page .sr-table thead { display: none; }
    body.sr-bookings-page .sr-table,
    body.sr-bookings-page .sr-table tbody,
    body.sr-bookings-page .sr-table tr,
    body.sr-bookings-page .sr-table td { display: block; width: 100%; }
    body.sr-bookings-page .sr-table tr {
        background: var(--kf-paper);
        border: 1px solid var(--kf-rule-soft);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    body.sr-bookings-page .sr-table td {
        padding: 4px 0;
        border: 0;
        text-align: left !important;
    }
    body.sr-bookings-page .sr-table td.sr-td--right { text-align: left !important; }
    body.sr-bookings-page .sr-inline-form { display: inline-block; margin-right: 6px; }
}

/* ────────────────────────────────────────────────────────────
   Landlord Rep — Mercury/Pulse baseline (lr1)
   Reuses .ta-* component vocabulary via dual body class
   (body.tenant-admin-page.landlord-rep-page). This block:
   1. Overrides the module accent token to muted navy.
   2. Adds LR-only layout primitives (dash split, urgent list,
      quick actions, occupancy grid) and the data-band recolour
      for occupancy bars so we can drop inline color styles.
   ──────────────────────────────────────────────────────────── */
body.landlord-rep-page { --ta-accent: #3a5a7d; }

body.landlord-rep-page .ta-hero-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: var(--kf-ink);
}
body.landlord-rep-page .ta-hero-list li {
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}
body.landlord-rep-page .ta-hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kf-signal-warning, #b58a3f);
}

body.landlord-rep-page .lr-stat--negative {
    border-left: 2px solid var(--kf-signal-negative, #8d3e3e);
}
body.landlord-rep-page .lr-stat--warn {
    border-left: 2px solid var(--kf-signal-warning, #b58a3f);
}

body.landlord-rep-page .lr-dash-split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 20px;
    margin-top: 28px;
    align-items: start;
}
body.landlord-rep-page .lr-dash-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
@media (max-width: 960px) {
    body.landlord-rep-page .lr-dash-split { grid-template-columns: 1fr; }
}

body.landlord-rep-page .lr-panel--alert {
    border-left: 2px solid var(--kf-signal-negative, #8d3e3e);
}

body.landlord-rep-page .lr-urgent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body.landlord-rep-page .lr-urgent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kf-rule-soft, #e7e1d3);
}
body.landlord-rep-page .lr-urgent-row:last-child { border-bottom: 0; }
body.landlord-rep-page .lr-urgent-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-urgent-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--kf-muted);
}

body.landlord-rep-page .lr-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.landlord-rep-page .lr-quick-actions a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kf-ink);
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}
body.landlord-rep-page .lr-quick-actions a:hover {
    background: var(--kf-paper-deep);
    color: var(--kf-navy);
}

body.landlord-rep-page .lr-occ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
body.landlord-rep-page .lr-occ-panel .ta-panel-body { padding: 16px 18px 18px; }
body.landlord-rep-page .lr-occ-bar { background: var(--kf-rule, #d9d2c2); }
body.landlord-rep-page .lr-occ-bar[data-band="good"] { background: var(--kf-signal-positive, #3f6b46); }
body.landlord-rep-page .lr-occ-bar[data-band="warn"] { background: var(--kf-signal-warning, #b58a3f); }
body.landlord-rep-page .lr-occ-bar[data-band="low"]  { background: var(--kf-signal-negative, #8d3e3e); }

/* Landlord Rep — Buildings list (lr2) */
body.landlord-rep-page .lr-building-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
body.landlord-rep-page .lr-building-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
body.landlord-rep-page .lr-building-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.10);
    border-color: var(--kf-rule);
}
@media (prefers-reduced-motion: reduce) {
    body.landlord-rep-page .lr-building-card { transition: none; }
    body.landlord-rep-page .lr-building-card:hover { transform: none; }
}
body.landlord-rep-page .lr-building-head {
    align-items: flex-start;
    gap: 12px;
}
body.landlord-rep-page .lr-building-heading { min-width: 0; flex: 1; }
body.landlord-rep-page .lr-building-address {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--kf-muted);
    line-height: 1.45;
}
body.landlord-rep-page .lr-unit {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.04em;
    margin-left: 2px;
}
body.landlord-rep-page .ta-meta-value[data-band="good"] { color: var(--kf-signal-positive, #3f6b46); }
body.landlord-rep-page .ta-meta-value[data-band="warn"] { color: var(--kf-signal-warning, #b58a3f); }
body.landlord-rep-page .ta-meta-value[data-band="low"]  { color: var(--kf-signal-negative, #8d3e3e); }

body.landlord-rep-page .lr-building-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper-deep);
}
body.landlord-rep-page .lr-building-foot-item {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.landlord-rep-page .lr-building-foot-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-building-foot-value {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
}

/* Landlord Rep — Building detail (lr4) */
body.landlord-rep-page .lr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--kf-rule-soft);
    margin: 24px 0 20px;
}
body.landlord-rep-page .lr-tab {
    padding: 10px 18px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--kf-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.landlord-rep-page .lr-tab:hover { color: var(--kf-ink); }
body.landlord-rep-page .lr-tab.active {
    color: var(--kf-navy);
    border-bottom-color: var(--kf-accent);
    font-weight: 600;
    background: transparent;
}
body.landlord-rep-page .lr-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kf-paper-deep);
    color: var(--kf-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.landlord-rep-page .lr-tab.active .lr-tab-count {
    background: var(--kf-navy);
    color: #fff;
}

body.landlord-rep-page .lr-stat-value[data-band="good"] { color: var(--kf-signal-positive, #3f6b46); }
body.landlord-rep-page .lr-stat-value[data-band="warn"] { color: var(--kf-signal-warning, #b58a3f); }
body.landlord-rep-page .lr-stat-value[data-band="low"]  { color: var(--kf-signal-negative, #8d3e3e); }

body.landlord-rep-page .lr-stacking-legend {
    flex-wrap: wrap;
    gap: 12px;
}
body.landlord-rep-page .lr-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.landlord-rep-page .lr-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
body.landlord-rep-page .lr-legend-dot--occupied { background: #dcfce7; border: 1px solid #86efac; }
body.landlord-rep-page .lr-legend-dot--vacant   { background: #fef2f2; border: 1px solid #fecaca; }
body.landlord-rep-page .lr-legend-dot--loo      { background: #fef3c7; border: 1px solid #fde68a; }

body.landlord-rep-page .lr-stacking-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.landlord-rep-page .lr-subhead {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
    margin: 24px 0 10px;
}
body.landlord-rep-page .lr-bullet-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1.6;
}
body.landlord-rep-page .lr-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Landlord Rep — Detail pages (lr5) */
body.landlord-rep-page .lr-detail-main,
body.landlord-rep-page .lr-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
body.landlord-rep-page .ta-meta-grid--1 { grid-template-columns: 1fr; }

body.landlord-rep-page .lr-notes {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--kf-rule-soft);
}
body.landlord-rep-page .lr-notes-body {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--kf-ink);
    line-height: 1.65;
    white-space: pre-wrap;
}

body.landlord-rep-page .lr-activity-form {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    border: none;
    padding: 0;
    background: transparent;
}
body.landlord-rep-page .lr-activity-form .ta-input { flex: 1; min-width: 0; max-width: none; }
body.landlord-rep-page .lr-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.landlord-rep-page .lr-activity-item {
    background: var(--kf-paper-deep);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 10px;
    padding: 12px 14px;
}
body.landlord-rep-page .lr-activity-meta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 4px;
}
body.landlord-rep-page .lr-activity-author {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kf-navy);
}
body.landlord-rep-page .lr-activity-time {
    font-size: 11.5px;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
}
body.landlord-rep-page .lr-activity-text {
    margin: 0;
    font-size: 13px;
    color: var(--kf-ink);
    line-height: 1.55;
}

body.landlord-rep-page .lr-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.landlord-rep-page .lr-btn-block { width: 100%; justify-content: center; }

body.landlord-rep-page .lr-inline-form {
    padding: 16px 24px;
    background: var(--kf-paper-deep);
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.landlord-rep-page .lr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 640px) { body.landlord-rep-page .lr-form-row { grid-template-columns: 1fr; } }
body.landlord-rep-page .lr-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--kf-muted);
    font-weight: 500;
}
body.landlord-rep-page .lr-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

body.landlord-rep-page .lr-person-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body.landlord-rep-page .lr-person-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.landlord-rep-page .lr-person-item:last-child { border-bottom: 0; }
body.landlord-rep-page .lr-person-name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-person-meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--kf-muted);
}

/* Reports */
body.landlord-rep-page .lr-stage-list,
body.landlord-rep-page .lr-portfolio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body.landlord-rep-page .lr-stage-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.landlord-rep-page .lr-stage-list li:last-child { border-bottom: 0; }
body.landlord-rep-page .lr-stage-list-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-portfolio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--kf-rule-soft);
    gap: 16px;
}
body.landlord-rep-page .lr-portfolio-row:last-child { border-bottom: 0; }
body.landlord-rep-page .lr-portfolio-name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-portfolio-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-portfolio-occ { text-align: right; }
body.landlord-rep-page .lr-portfolio-occ-value {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-portfolio-occ-value[data-band="good"] { color: var(--kf-signal-positive, #3f6b46); }
body.landlord-rep-page .lr-portfolio-occ-value[data-band="warn"] { color: var(--kf-signal-warning, #b58a3f); }
body.landlord-rep-page .lr-portfolio-occ-value[data-band="low"]  { color: var(--kf-signal-negative, #8d3e3e); }
body.landlord-rep-page .lr-portfolio-occ-label {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--kf-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.landlord-rep-page .lr-report-card {
    display: flex;
    flex-direction: column;
}
body.landlord-rep-page .lr-perf-strip {
    padding: 14px 24px;
    background: var(--kf-paper-deep);
    border-top: 1px solid var(--kf-rule-soft);
    border-bottom: 1px solid var(--kf-rule-soft);
}
body.landlord-rep-page .lr-perf-label {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-perf-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
body.landlord-rep-page .lr-perf-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
body.landlord-rep-page .lr-perf-cell-label {
    font-size: 11.5px;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-perf-cell-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-perf-cell-value[data-trend="up"]   { color: var(--kf-signal-positive, #3f6b46); }
body.landlord-rep-page .lr-perf-cell-value[data-trend="down"] { color: var(--kf-signal-negative, #8d3e3e); }
body.landlord-rep-page .lr-perf-cell-value[data-trend="flat"] { color: var(--kf-muted); }

body.landlord-rep-page .lr-report-actions {
    display: flex;
    gap: 8px;
    padding: 14px 24px 18px;
}
body.landlord-rep-page .lr-report-actions .ta-btn { flex: 1; justify-content: center; }
body.landlord-rep-page .lr-report-occ { font-size: 22px; font-weight: 700; }

/* Lease-abstract tab strip sits inside the panel */
body.landlord-rep-page .lr-tabs--la {
    margin: 0;
    padding: 0 24px;
    border-top: 1px solid var(--kf-rule-soft);
}

/* Landlord Rep — Forms (lr6) */
body.landlord-rep-page .lr-form { display: flex; flex-direction: column; gap: 20px; }
body.landlord-rep-page .lr-form-grid {
    display: grid;
    gap: 14px 16px;
}
body.landlord-rep-page .lr-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    body.landlord-rep-page .lr-form-grid--2 { grid-template-columns: 1fr; }
}
body.landlord-rep-page .lr-field--wide { grid-column: 1 / -1; }
body.landlord-rep-page .lr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--kf-muted);
    font-weight: 500;
    min-width: 0;
}
body.landlord-rep-page .lr-field > span {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-field em {
    color: var(--kf-signal-negative, #8d3e3e);
    font-style: normal;
    margin-left: 2px;
}
body.landlord-rep-page .lr-field .ta-input,
body.landlord-rep-page .lr-field .ta-select { width: 100%; max-width: none; min-width: 0; flex: none; }
body.landlord-rep-page .lr-textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
body.landlord-rep-page .lr-select-multi {
    min-height: 96px;
    padding: 8px 12px;
    background-image: none;
    appearance: auto;
    -webkit-appearance: listbox;
}
body.landlord-rep-page .lr-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* Scoped overrides — make legacy .rbac-section markup look like ta-panel
   so any LR form we haven't migrated yet also reads correctly. */
body.landlord-rep-page .rbac-section {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule-soft);
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}
body.landlord-rep-page .rbac-section-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
}
body.landlord-rep-page .rbac-section-header > svg { display: none; }
body.landlord-rep-page .rbac-section-header h3 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--kf-ink);
    letter-spacing: -0.005em;
}
body.landlord-rep-page .rbac-section-body { padding: 20px 24px; }
body.landlord-rep-page .rbac-actions { padding-top: 0; }
body.landlord-rep-page .form-group label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--kf-muted);
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: 6px;
}
body.landlord-rep-page .form-group input:not([type="checkbox"]):not([type="radio"]),
body.landlord-rep-page .form-group textarea,
body.landlord-rep-page .form-group select {
    background: var(--kf-paper);
    border: 1px solid var(--kf-rule);
    border-radius: 10px;
    padding: 0 12px;
    height: 38px;
    font-size: 13px;
    color: var(--kf-ink);
    font-family: "Source Sans 3", sans-serif;
}
body.landlord-rep-page .form-group textarea { height: auto; padding: 10px 12px; line-height: 1.5; }
body.landlord-rep-page .form-group input:focus,
body.landlord-rep-page .form-group textarea:focus,
body.landlord-rep-page .form-group select:focus {
    outline: none;
    border-color: var(--kf-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.12);
}

/* Landlord Rep — Lists & report preview (lr7) */
body.landlord-rep-page .lr-row-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--kf-muted);
    max-width: 540px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.landlord-rep-page .lr-report-preview { display: flex; flex-direction: column; gap: 20px; }
body.landlord-rep-page .lr-report-header-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
body.landlord-rep-page .lr-report-h2 {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--kf-navy);
    letter-spacing: -0.01em;
}
body.landlord-rep-page .lr-report-address {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--kf-ink);
}
body.landlord-rep-page .lr-report-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--kf-muted);
}
body.landlord-rep-page .lr-report-stamp {
    text-align: right;
    font-size: 11px;
    line-height: 1.7;
    color: var(--kf-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.landlord-rep-page .lr-report-stamp p { margin: 0; }
body.landlord-rep-page .lr-report-footer {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: var(--kf-muted);
    border-top: 1px solid var(--kf-rule-soft);
    margin-top: 8px;
}

@media print {
    body.landlord-rep-page .sidebar,
    body.landlord-rep-page .ta-back,
    body.landlord-rep-page .lr-print-only-hide,
    body.landlord-rep-page nav,
    body.landlord-rep-page .mobile-menu-btn { display: none !important; }
    body.landlord-rep-page .main { margin: 0; padding: 20px; background: #fff; }
    body.landlord-rep-page .ta-panel { box-shadow: none; break-inside: avoid; }
}

/* Landlord Rep — Stacking-plan tile palette (lr8)
   Remap from the bright pastel defaults to the muted --kf-signal-* tints
   so the building-detail stacking plan reads like the rest of Mercury. */
body.landlord-rep-page .lr-stacking-unit {
    border-radius: 10px;
    border: 1px solid var(--kf-rule-soft);
    background: var(--kf-paper);
}
body.landlord-rep-page .lr-stacking-unit:hover {
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.08);
    transform: translateY(-1px);
}
body.landlord-rep-page .lr-stacking-label { color: var(--kf-ink); }
body.landlord-rep-page .lr-stacking-size { color: var(--kf-muted); }
body.landlord-rep-page .lr-stacking-tenant { color: var(--kf-ink); }

body.landlord-rep-page .lr-stacking-Occupied {
    background: var(--kf-signal-positive-bg, #e8efe9);
    border-color: rgba(63, 107, 70, 0.28);
}
body.landlord-rep-page .lr-stacking-Vacant {
    background: var(--kf-signal-negative-bg, #f1e0e0);
    border-color: rgba(141, 62, 62, 0.28);
}
body.landlord-rep-page .lr-stacking-LOO\ Stage {
    background: var(--kf-signal-warning-bg, #f4ecdc);
    border-color: rgba(181, 138, 63, 0.30);
}

/* Match the building-detail legend dots to the new tile palette. */
body.landlord-rep-page .lr-legend-dot--occupied {
    background: var(--kf-signal-positive-bg, #e8efe9);
    border: 1px solid rgba(63, 107, 70, 0.45);
}
body.landlord-rep-page .lr-legend-dot--vacant {
    background: var(--kf-signal-negative-bg, #f1e0e0);
    border: 1px solid rgba(141, 62, 62, 0.45);
}
body.landlord-rep-page .lr-legend-dot--loo {
    background: var(--kf-signal-warning-bg, #f4ecdc);
    border: 1px solid rgba(181, 138, 63, 0.45);
}

/* Searchable selects inside lr-form grids — kill the legacy margin-bottom
   so grid gap controls spacing. (lr8) */
body.landlord-rep-page .lr-form-grid .form-group { margin-bottom: 0; }
body.landlord-rep-page .lr-form-grid .form-group label {
    display: block;
    margin-bottom: 6px;
}

/* ============================================================
   Pulse Learn — Mercury/Brex baseline, muted indigo accent.
   Scoped to body.learn-page so no rule leaks elsewhere.
   ============================================================ */
body.learn-page {
    --learn-accent: #4a5a82;
    --learn-accent-deep: #344166;
    --learn-paper: #f6f3ec;
    --learn-paper-deep: #efeae0;
    --learn-card: #ffffff;
    --learn-ink: #1a2230;
    --learn-muted: #6e6a5f;
    --learn-rule: #e7e1d3;
    --learn-shadow: 0 8px 24px rgba(11, 31, 58, 0.06);
    background: var(--learn-paper-deep);
    color: var(--learn-ink);
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.learn-page .main { padding: 32px 40px 64px; }

body.learn-page .learn-back-link {
    display: inline-block; font-size: 13px; color: var(--learn-muted);
    text-decoration: none; margin-bottom: 16px;
}
body.learn-page .learn-back-link:hover { color: var(--learn-accent); }

body.learn-page .learn-page-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
body.learn-page .learn-page-head-text { flex: 1; min-width: 0; }
body.learn-page .learn-page-eyebrow {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--learn-muted); margin: 0 0 6px;
}
body.learn-page .learn-page-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--learn-accent); margin-right: 8px; vertical-align: middle;
}
body.learn-page .learn-page-title {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500;
    font-size: clamp(24px, 2.6vw, 32px); color: #0b1f3a; margin: 0 0 6px;
}
body.learn-page .learn-page-sub {
    color: var(--learn-muted); font-size: 14px; margin: 0; line-height: 1.6;
}
body.learn-page .learn-page-head-cta { display: flex; gap: 10px; }

/* Buttons */
body.learn-page .learn-btn {
    display: inline-block; padding: 10px 18px; border-radius: 10px;
    background: #0b1f3a; color: #ffffff; border: 0; font-size: 14px;
    font-weight: 500; text-decoration: none; cursor: pointer;
    transition: transform 200ms ease, background 200ms ease;
}
body.learn-page .learn-btn:hover { background: #061427; transform: translateY(-1px); }
body.learn-page .learn-btn-secondary {
    background: var(--learn-card); color: var(--learn-ink); border: 1px solid var(--learn-rule);
}
body.learn-page .learn-btn-secondary:hover { background: var(--learn-paper); border-color: var(--learn-accent); }
body.learn-page .learn-btn-small { padding: 6px 12px; font-size: 13px; }

body.learn-page .learn-link { color: var(--learn-accent); text-decoration: none; font-size: 13px; }
body.learn-page .learn-link:hover { text-decoration: underline; }
body.learn-page .learn-link-danger { color: #8d3e3e; background: transparent; border: 0; cursor: pointer; padding: 0; }

/* Stats grid */
body.learn-page .learn-stats-grid {
    display: grid; gap: 16px; margin-bottom: 28px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body.learn-page .learn-stat-card {
    background: var(--learn-card); border-radius: 14px; padding: 20px 24px;
    box-shadow: var(--learn-shadow); position: relative;
}
body.learn-page .learn-stat-card::before {
    content: ''; position: absolute; left: 0; top: 16px; bottom: 16px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--learn-accent);
}
body.learn-page .learn-stat-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--learn-muted); margin-bottom: 6px;
}
body.learn-page .learn-stat-value {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px); color: #0b1f3a;
    font-variant-numeric: tabular-nums;
}

/* Course grid */
body.learn-page .learn-course-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
body.learn-page .learn-course-card {
    background: var(--learn-card); border-radius: 16px; box-shadow: var(--learn-shadow);
    text-decoration: none; color: inherit; overflow: hidden; display: flex; flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
body.learn-page .learn-course-card:hover {
    transform: translateY(-2px); box-shadow: 0 12px 32px rgba(11, 31, 58, 0.1);
}
body.learn-page .learn-course-card-accent {
    height: 6px; background: var(--learn-accent);
}
body.learn-page .learn-course-card-body { padding: 24px 24px 22px; flex: 1; display: flex; flex-direction: column; }
body.learn-page .learn-course-card-eyebrow {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--learn-muted); margin-bottom: 8px;
}
body.learn-page .learn-course-card-title {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500;
    color: #0b1f3a; margin: 0 0 8px; font-size: 19px; line-height: 1.3;
}
body.learn-page .learn-course-card-summary {
    color: var(--learn-muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.learn-page .learn-course-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; font-size: 12px;
}
body.learn-page .learn-progress-text { color: var(--learn-muted); }

/* Progress bar */
body.learn-page .learn-progress {
    height: 6px; background: var(--learn-paper-deep); border-radius: 999px;
    overflow: hidden; margin: 8px 0 12px;
}
body.learn-page .learn-progress-bar {
    height: 100%; background: var(--learn-accent); border-radius: 999px;
    transition: width 240ms ease;
}

/* Pills */
body.learn-page .learn-pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
    background: #e3e8ee; color: #486b8a;
}
body.learn-page .learn-pill-assigned { background: #f4ecdc; color: #b58a3f; }
body.learn-page .learn-pill-in_progress { background: #e3e8ee; color: #486b8a; }
body.learn-page .learn-pill-passed { background: #e8efe9; color: #3f6b46; }
body.learn-page .learn-pill-failed { background: #f1e0e0; color: #8d3e3e; }
body.learn-page .learn-pill-status-draft { background: #efeae0; color: #6e6a5f; }
body.learn-page .learn-pill-status-published { background: #e8efe9; color: #3f6b46; }
body.learn-page .learn-pill-status-archived { background: #f1e0e0; color: #8d3e3e; }

/* Panels & outline */
body.learn-page .learn-panel {
    background: var(--learn-card); border-radius: 14px; padding: 28px 32px;
    box-shadow: var(--learn-shadow); margin-bottom: 20px;
}
body.learn-page .learn-panel-empty { text-align: center; padding: 64px 32px; }
body.learn-page .learn-panel-empty h2 {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500; color: #0b1f3a; margin: 0 0 8px;
}
body.learn-page .learn-panel-empty p { color: var(--learn-muted); max-width: 480px; margin: 0 auto; }
body.learn-page .learn-panel-title {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500; color: #0b1f3a;
    font-size: 18px; margin: 0 0 16px;
}

body.learn-page .learn-outline { display: flex; flex-direction: column; gap: 16px; }
body.learn-page .learn-section, body.learn-page .learn-section-edit {
    background: var(--learn-card); border-radius: 14px; padding: 20px 24px;
    box-shadow: var(--learn-shadow);
}
body.learn-page .learn-section-head { margin-bottom: 12px; }
body.learn-page .learn-section-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 500; color: #0b1f3a; margin: 0; font-size: 17px; }
body.learn-page .learn-section-summary { color: var(--learn-muted); font-size: 13px; margin: 4px 0 0; }
body.learn-page .learn-section-edit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

body.learn-page .learn-lesson-list { list-style: none; padding: 0; margin: 0; }
body.learn-page .learn-lesson-item { border-top: 1px solid var(--learn-rule); }
body.learn-page .learn-lesson-item:first-child { border-top: 0; }
body.learn-page .learn-lesson-link {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    text-decoration: none; color: var(--learn-ink); font-size: 14px;
}
body.learn-page .learn-lesson-link:hover { color: var(--learn-accent); }
body.learn-page .learn-lesson-icon {
    width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 500; font-size: 13px; flex-shrink: 0;
}
body.learn-page .learn-lesson-icon-article { background: #e3e8ee; color: #486b8a; }
body.learn-page .learn-lesson-icon-pdf { background: #f4ecdc; color: #b58a3f; }
body.learn-page .learn-lesson-icon-quiz { background: #e8efe9; color: #3f6b46; }
body.learn-page .learn-lesson-title { flex: 1; min-width: 0; }
body.learn-page .learn-lesson-status { color: var(--learn-muted); font-size: 12px; }
body.learn-page .learn-lesson-item.is-complete .learn-lesson-status { color: #3f6b46; }

/* Lesson container */
body.learn-page .learn-lesson-container {
    background: var(--learn-card); border-radius: 14px; padding: 40px 48px;
    box-shadow: var(--learn-shadow); max-width: 820px; margin: 0 auto;
}
body.learn-page .learn-lesson-head { margin-bottom: 24px; }
body.learn-page .learn-lesson-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--learn-rule); }
body.learn-page .learn-prose { color: var(--learn-ink); line-height: 1.7; font-size: 16px; }
body.learn-page .learn-prose h2, body.learn-page .learn-prose h3 {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500; color: #0b1f3a; margin-top: 24px;
}
body.learn-page .learn-prose img { max-width: 100%; border-radius: 8px; }

body.learn-page .learn-pdf-frame { height: 80vh; min-height: 480px; border: 1px solid var(--learn-rule); border-radius: 10px; overflow: hidden; background: var(--learn-paper); }
body.learn-page .learn-pdf-frame iframe,
body.learn-page .learn-pdf-frame object { width: 100%; height: 100%; border: 0; display: block; }
/* Tall variant for the PDF.js custom viewer — bigger reading area. */
body.learn-page .learn-pdf-frame-tall { height: calc(100vh - 200px); min-height: 640px; }
/* "Clean" wrapper: drop the card chrome so the PDF.js viewer reads as the page,
   no double-frame. The lesson card itself widens to give horizontal room. */
body.learn-page .learn-pdf-frame-clean { background: transparent; border: 0; border-radius: 0; }
/* When the lesson contains a PDF, give it room — override the 820px text cap. */
body.learn-page .learn-lesson-page .learn-lesson-container:has(.learn-pdf-frame) {
    max-width: none; padding: 16px 8px; box-shadow: none; background: transparent;
}
body.learn-page .learn-lesson-page .main:has(.learn-pdf-frame) { padding: 20px 16px; }
body.learn-page .learn-pdf-fallback {
    display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 24px; text-align: center; color: var(--learn-muted); font-size: 14px;
}
body.learn-page .learn-pdf-actions {
    display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}

/* Quiz */
body.learn-page .learn-quiz-questions { list-style: decimal; padding: 0 0 0 24px; }
body.learn-page .learn-quiz-q { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--learn-rule); }
body.learn-page .learn-quiz-q:last-child { border-bottom: 0; }
body.learn-page .learn-quiz-prompt { font-weight: 500; color: #0b1f3a; margin-bottom: 12px; }
body.learn-page .learn-quiz-options { list-style: none; padding: 0; margin: 0; }
body.learn-page .learn-quiz-option {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--learn-rule);
    border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
}
body.learn-page .learn-quiz-option:hover { border-color: var(--learn-accent); background: var(--learn-paper); }
body.learn-page .learn-quiz-option input[type="radio"] { accent-color: var(--learn-accent); }

/* Forms */
body.learn-page .learn-form label { display: block; margin-bottom: 16px; font-size: 13px; color: var(--learn-muted); }
body.learn-page .learn-form input[type="text"],
body.learn-page .learn-form input[type="number"],
body.learn-page .learn-form input[type="date"],
body.learn-page .learn-form select,
body.learn-page .learn-form textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    background: var(--learn-paper-deep); border: 1px solid var(--learn-rule);
    border-radius: 10px; font: inherit; color: var(--learn-ink);
    font-size: 14px; box-sizing: border-box;
}
body.learn-page .learn-form textarea { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 13px; }
body.learn-page .learn-form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body.learn-page .learn-form-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; }
body.learn-page .learn-inline-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
body.learn-page .learn-inline-form input, body.learn-page .learn-inline-form select {
    padding: 8px 10px; border: 1px solid var(--learn-rule); border-radius: 8px;
    background: var(--learn-paper); font: inherit; font-size: 13px;
}
body.learn-page .learn-help { color: var(--learn-muted); font-size: 12px; margin: 4px 0 0; line-height: 1.5; }
body.learn-page .learn-help code { background: var(--learn-paper-deep); padding: 1px 6px; border-radius: 4px; }

/* Table */
body.learn-page .learn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.learn-page .learn-table th, body.learn-page .learn-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--learn-rule); }
body.learn-page .learn-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--learn-muted); font-weight: 500; }
body.learn-page .learn-empty { color: var(--learn-muted); text-align: center; padding: 32px; }

/* Quiz countdown timer */
body.learn-page .learn-quiz-timer {
    position: sticky; top: 16px; z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--learn-card); border: 1px solid var(--learn-rule);
    box-shadow: var(--learn-shadow); border-radius: 10px;
    padding: 8px 14px; margin-bottom: 16px;
    font-variant-numeric: tabular-nums; font-size: 13px;
}
body.learn-page .learn-quiz-timer-label { color: var(--learn-muted); }
body.learn-page .learn-quiz-timer-value {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 500;
    color: #0b1f3a; font-size: 16px;
}
body.learn-page .learn-quiz-timer.is-low {
    background: #f1e0e0; border-color: #d4adad;
}
body.learn-page .learn-quiz-timer.is-low .learn-quiz-timer-value { color: #8d3e3e; }

/* Quiz review styling */
body.learn-page .learn-quiz-review-q.is-correct .learn-quiz-mark { color: #3f6b46; margin-right: 8px; }
body.learn-page .learn-quiz-review-q.is-wrong   .learn-quiz-mark { color: #8d3e3e; margin-right: 8px; }
body.learn-page .learn-quiz-review-option { cursor: default; }
body.learn-page .learn-quiz-review-option.is-correct-option {
    border-color: #3f6b46; background: #e8efe9;
}
body.learn-page .learn-quiz-review-option.is-picked:not(.is-correct-option) {
    border-color: #8d3e3e; background: #f1e0e0;
}
body.learn-page .learn-quiz-option-tag {
    margin-left: auto; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--learn-muted);
}
body.learn-page .learn-quiz-review-option.is-correct-option .learn-quiz-option-tag { color: #3f6b46; }
body.learn-page .learn-quiz-review-option.is-picked:not(.is-correct-option) .learn-quiz-option-tag { color: #8d3e3e; }

/* Attestation checkbox row */
body.learn-page .learn-attestation-form .learn-quiz-option { margin: 16px 0; padding: 14px 16px; }

@media (max-width: 768px) {
    body.learn-page .main { padding: 20px 16px 48px; }
    body.learn-page .learn-lesson-container { padding: 24px 20px; }
}

/* =========================================================================
   Onboarding (P&C) — Mercury baseline, scoped under body.pc-ob-page
   Phase 1: stage stepper + redesigned list/detail. Reuses .lr-stats-grid
   for stat cards and .pc-pill--* for stage tone.
   ========================================================================= */
body.pc-ob-page {
    --pc-ob-accent: #4a7a82;
    --pc-ob-paper: #f6f3ec;
    --pc-ob-paper-deep: #efeae0;
    --pc-ob-ink: #1a2230;
    --pc-ob-muted: #6e6a5f;
    --pc-ob-rule: #d9d2c2;
    --pc-ob-rule-soft: #e7e1d3;
    background: var(--pc-ob-paper-deep);
    color: var(--pc-ob-ink);
}
body.pc-ob-page .main {
    padding: 32px 36px 64px;
    background: var(--pc-ob-paper-deep);
}
@media (max-width: 900px) { body.pc-ob-page .main { padding: 22px 18px 48px; } }

/* Page head */
body.pc-ob-page .pc-ob-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
body.pc-ob-page .pc-ob-head-text { flex: 1; min-width: 280px; }
body.pc-ob-page .pc-ob-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pc-ob-accent); vertical-align: middle; margin-right: 8px;
}
body.pc-ob-page .pc-ob-eyebrow {
    margin: 0 0 6px; font: 500 11px/1.4 'Source Sans 3', system-ui, sans-serif;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-title {
    margin: 0 0 8px; font: 500 32px/1.15 'Source Serif 4', Georgia, serif;
    color: var(--pc-ob-ink); letter-spacing: -0.01em;
}
body.pc-ob-page .pc-ob-title-id {
    display: inline-block; margin-left: 10px; padding: 4px 10px;
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule);
    border-radius: 999px; font: 500 12px/1 'Source Sans 3', sans-serif;
    color: var(--pc-ob-muted); vertical-align: middle; letter-spacing: 0.04em;
}
body.pc-ob-page .pc-ob-sub {
    margin: 0 0 6px; max-width: 68ch; font: 400 14px/1.55 'Source Sans 3', sans-serif;
    color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-updated {
    margin: 0; font: 400 11px/1.4 'Source Sans 3', sans-serif;
    color: var(--pc-ob-muted); letter-spacing: 0.04em;
}
body.pc-ob-page .pc-ob-actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Buttons */
body.pc-ob-page .pc-ob-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
    font: 500 13px/1 'Source Sans 3', sans-serif; cursor: pointer;
    text-decoration: none; transition: all 180ms ease;
}
body.pc-ob-page .pc-ob-btn--primary {
    background: var(--pc-ob-ink); color: #f6f3ec; border-color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-btn--primary:hover {
    background: #0b1f3a; border-color: #0b1f3a;
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,31,58,0.12);
}
body.pc-ob-page .pc-ob-btn--ghost {
    background: var(--pc-ob-paper); color: var(--pc-ob-ink);
    border-color: var(--pc-ob-rule);
}
body.pc-ob-page .pc-ob-btn--ghost:hover {
    background: #fff; border-color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-btn--danger-ghost {
    background: transparent; color: #8d3e3e; border-color: transparent;
    padding: 8px 12px; font-size: 12px;
}
body.pc-ob-page .pc-ob-btn--danger-ghost:hover {
    background: #f1e0e0; border-color: #f1e0e0;
}
body.pc-ob-page .pc-ob-advance-form { margin: 0; }

body.pc-ob-page .pc-ob-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 14px; padding: 6px 0;
    font: 500 12px/1 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
    text-decoration: none;
}
body.pc-ob-page .pc-ob-back:hover { color: var(--pc-ob-ink); }

body.pc-ob-page .pc-ob-flash {
    margin: 0 0 20px; padding: 12px 16px;
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 10px; font: 500 13px/1.4 'Source Sans 3', sans-serif;
    color: var(--pc-ob-ink);
}

/* Stat cards — reuse .lr-stat-card frame, restyle treatment */
body.pc-ob-page .lr-stat-card.pc-ob-stat {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; padding: 20px 22px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
    position: relative; overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
body.pc-ob-page .lr-stat-card.pc-ob-stat::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--accent, var(--pc-ob-accent));
}
body.pc-ob-page .lr-stat-card.pc-ob-stat:hover {
    transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11,31,58,0.07);
}
body.pc-ob-page .pc-ob-stat-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
body.pc-ob-page .lr-stat-card.pc-ob-stat .lr-stat-label {
    margin: 0; font: 500 11px/1.4 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-ob-muted);
}
body.pc-ob-page .lr-stat-card.pc-ob-stat .lr-stat-value {
    margin: 0; font: 500 clamp(22px, 2.2vw, 28px)/1.1 'Source Serif 4', Georgia, serif;
    color: var(--pc-ob-ink); font-variant-numeric: tabular-nums;
}
body.pc-ob-page .lr-stat-card.pc-ob-stat .lr-stat-sub {
    margin: 4px 0 0; font: 400 12px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}

/* Filter pills */
body.pc-ob-page .pc-ob-filters {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 16px;
}
body.pc-ob-page .pc-ob-filter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule);
    font: 500 12px/1 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
    text-decoration: none; transition: all 150ms ease;
}
body.pc-ob-page .pc-ob-filter:hover { border-color: var(--pc-ob-ink); }
body.pc-ob-page .pc-ob-filter.is-active {
    background: var(--pc-ob-ink); color: #f6f3ec; border-color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-filter-count {
    font-variant-numeric: tabular-nums; font-size: 11px; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-filter.is-active .pc-ob-filter-count { color: rgba(246,243,236,0.7); }

/* Row list */
body.pc-ob-page .pc-ob-list {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
}
body.pc-ob-page .pc-ob-row {
    display: grid;
    grid-template-columns: 4px minmax(0, 1.6fr) 110px 110px 140px 130px 18px;
    gap: 20px; align-items: center;
    padding: 16px 22px; border-bottom: 1px solid var(--pc-ob-rule-soft);
    text-decoration: none; color: var(--pc-ob-ink);
    transition: background 150ms ease;
}
body.pc-ob-page .pc-ob-row:last-child { border-bottom: none; }
body.pc-ob-page .pc-ob-row:hover { background: var(--pc-ob-paper-deep); }
body.pc-ob-page .pc-ob-row-accent {
    width: 4px; height: 28px; border-radius: 2px; background: var(--pc-ob-accent);
}
body.pc-ob-page .pc-ob-row[data-stage="confirmed"] .pc-ob-row-accent { background: #3f6b46; }
body.pc-ob-page .pc-ob-row[data-stage="probation"] .pc-ob-row-accent { background: #486b8a; }
body.pc-ob-page .pc-ob-row[data-stage="first_week"] .pc-ob-row-accent { background: #b58a3f; }
body.pc-ob-page .pc-ob-row[data-stage="day_one"] .pc-ob-row-accent { background: #a37250; }
body.pc-ob-page .pc-ob-row[data-stage="pre_arrival"] .pc-ob-row-accent { background: #6e6a5f; }
body.pc-ob-page .pc-ob-row-main { min-width: 0; }
body.pc-ob-page .pc-ob-row-name {
    margin: 0 0 3px; font: 500 14px/1.3 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-row-meta {
    margin: 0; display: flex; gap: 6px; flex-wrap: wrap;
    font: 400 12px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-row-col { min-width: 0; }
body.pc-ob-page .pc-ob-col-label {
    margin: 0 0 2px; font: 500 10px/1 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-col-value {
    margin: 0; font: 400 13px/1.3 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
    font-variant-numeric: tabular-nums;
}
body.pc-ob-page .pc-ob-row-stage { text-align: right; }
body.pc-ob-page .pc-ob-row-chev { color: var(--pc-ob-muted); }
body.pc-ob-page .pc-ob-row:hover .pc-ob-row-chev { color: var(--pc-ob-ink); }
body.pc-ob-page .pc-ob-chip {
    display: inline-flex; padding: 2px 8px; border-radius: 999px;
    font: 500 11px/1.4 'Source Sans 3', sans-serif; letter-spacing: 0.02em;
    background: var(--pc-ob-paper-deep); color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-chip--warning { background: #f4ecdc; color: #b58a3f; }
body.pc-ob-page .pc-ob-chip--info { background: #e3e8ee; color: #486b8a; }
body.pc-ob-page .pc-ob-chip--neutral { background: var(--pc-ob-paper-deep); color: var(--pc-ob-muted); }

body.pc-ob-page .pc-ob-empty {
    padding: 48px 24px; text-align: center;
}
body.pc-ob-page .pc-ob-empty-title {
    margin: 0 0 6px; font: 500 15px/1.3 'Source Serif 4', Georgia, serif; color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-empty-sub {
    margin: 0; font: 400 13px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-empty a { color: var(--pc-ob-accent); }

/* Responsive list */
@media (max-width: 1100px) {
    body.pc-ob-page .pc-ob-row {
        grid-template-columns: 4px minmax(0, 1fr) 110px 130px 18px;
        gap: 14px;
    }
    body.pc-ob-page .pc-ob-row-col:nth-of-type(2),
    body.pc-ob-page .pc-ob-row-col:nth-of-type(3) { display: none; }
}
@media (max-width: 720px) {
    body.pc-ob-page .pc-ob-row {
        grid-template-columns: 4px minmax(0, 1fr) auto;
        padding: 14px 16px;
    }
    body.pc-ob-page .pc-ob-row-col,
    body.pc-ob-page .pc-ob-row-chev { display: none; }
    body.pc-ob-page .pc-ob-row-stage .pc-pill { font-size: 10px; }
}

/* Stepper */
body.pc-ob-page .pc-ob-stepper {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; padding: 24px 28px; margin-bottom: 24px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
}
body.pc-ob-page .pc-ob-stepper-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    position: relative;
}
body.pc-ob-page .pc-ob-stepper-list::before {
    content: ''; position: absolute; left: 20px; right: 20px; top: 16px; height: 1px;
    background: var(--pc-ob-rule-soft); z-index: 0;
}
body.pc-ob-page .pc-ob-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: relative; z-index: 1;
}
body.pc-ob-page .pc-ob-step-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--pc-ob-paper); border: 1.5px solid var(--pc-ob-rule);
    display: inline-flex; align-items: center; justify-content: center;
    font: 500 12px/1 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
    font-variant-numeric: tabular-nums;
}
body.pc-ob-page .pc-ob-step.is-current .pc-ob-step-dot {
    background: var(--pc-ob-accent); border-color: var(--pc-ob-accent); color: #fff;
    box-shadow: 0 0 0 4px rgba(74,122,130,0.12);
}
body.pc-ob-page .pc-ob-step-label {
    font: 500 12px/1.3 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
    text-align: center;
}
body.pc-ob-page .pc-ob-step.is-current .pc-ob-step-label { color: var(--pc-ob-ink); }
body.pc-ob-page .pc-ob-stepper-caption {
    margin: 18px 0 0; text-align: center;
    font: 400 12px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-stepper-caption strong { color: var(--pc-ob-ink); font-weight: 500; }
@media (max-width: 720px) {
    body.pc-ob-page .pc-ob-stepper-list { grid-template-columns: repeat(5, auto); justify-content: space-between; }
    body.pc-ob-page .pc-ob-step-label { font-size: 10px; }
}

/* Two-pane detail */
body.pc-ob-page .pc-ob-detail-grid {
    display: grid; grid-template-columns: 320px 1fr; gap: 24px;
}
@media (max-width: 980px) { body.pc-ob-page .pc-ob-detail-grid { grid-template-columns: 1fr; } }
body.pc-ob-page .pc-ob-identity-card {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; padding: 24px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
}
body.pc-ob-page .pc-ob-identity-eyebrow {
    margin: 0 0 8px; font: 500 11px/1 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-identity-name {
    margin: 0 0 6px; font: 500 22px/1.2 'Source Serif 4', Georgia, serif; color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-identity-sub {
    margin: 0; font: 400 12px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-identity-meta {
    margin: 18px 0 0; padding: 0; list-style: none;
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 14px; overflow: hidden;
}
body.pc-ob-page .pc-ob-identity-meta > div {
    display: grid; grid-template-columns: 110px 1fr; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--pc-ob-rule-soft);
}
body.pc-ob-page .pc-ob-identity-meta > div:last-child { border-bottom: none; }
body.pc-ob-page .pc-ob-identity-meta dt {
    margin: 0; font: 500 11px/1.4 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-identity-meta dd {
    margin: 0; font: 400 13px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
}

body.pc-ob-page .pc-ob-journey {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; padding: 28px 30px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
}
body.pc-ob-page .pc-ob-journey-head { margin-bottom: 20px; }
body.pc-ob-page .pc-ob-journey-title {
    margin: 0 0 4px; font: 500 18px/1.3 'Source Serif 4', Georgia, serif; color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-journey-sub {
    margin: 0; font: 400 13px/1.5 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-journey-list { list-style: none; padding: 0; margin: 0; }
body.pc-ob-page .pc-ob-journey-item {
    display: grid; grid-template-columns: 32px 1fr; gap: 16px;
    padding: 16px 0; border-top: 1px solid var(--pc-ob-rule-soft);
}
body.pc-ob-page .pc-ob-journey-item:first-child { border-top: none; }
body.pc-ob-page .pc-ob-journey-marker {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pc-ob-paper-deep); color: var(--pc-ob-muted);
    border: 1px solid var(--pc-ob-rule);
    display: inline-flex; align-items: center; justify-content: center;
    font: 500 12px/1 'Source Sans 3', sans-serif;
}
body.pc-ob-page .pc-ob-journey-item.is-current .pc-ob-journey-marker {
    background: var(--pc-ob-accent); color: #fff; border-color: var(--pc-ob-accent);
}
body.pc-ob-page .pc-ob-journey-name {
    margin: 4px 0 4px; font: 500 14px/1.3 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
}
body.pc-ob-page .pc-ob-journey-item.is-current .pc-ob-journey-name { color: var(--pc-ob-accent); }
body.pc-ob-page .pc-ob-journey-desc {
    margin: 0; font: 400 13px/1.55 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-danger {
    margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--pc-ob-rule-soft);
    text-align: right;
}

/* Form */
body.pc-ob-page .pc-ob-form {
    background: var(--pc-ob-paper); border: 1px solid var(--pc-ob-rule-soft);
    border-radius: 16px; padding: 28px 32px; max-width: 920px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.04);
}
body.pc-ob-page .pc-ob-form-section { margin-bottom: 28px; }
body.pc-ob-page .pc-ob-form-section:last-of-type { margin-bottom: 8px; }
body.pc-ob-page .pc-ob-form-section-title {
    margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--pc-ob-rule-soft);
    font: 500 13px/1.3 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-form-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px;
}
@media (max-width: 720px) { body.pc-ob-page .pc-ob-form-row { grid-template-columns: 1fr; } }
body.pc-ob-page .pc-ob-form .form-group { display: flex; flex-direction: column; gap: 6px; }
body.pc-ob-page .pc-ob-form label {
    font: 500 12px/1.3 'Source Sans 3', sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-form input[type="text"],
body.pc-ob-page .pc-ob-form input[type="date"],
body.pc-ob-page .pc-ob-form select {
    padding: 10px 12px; border-radius: 10px;
    background: #fff; border: 1px solid var(--pc-ob-rule);
    font: 400 14px/1.3 'Source Sans 3', sans-serif; color: var(--pc-ob-ink);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.pc-ob-page .pc-ob-form input:focus,
body.pc-ob-page .pc-ob-form select:focus {
    outline: none; border-color: var(--pc-ob-accent);
    box-shadow: 0 0 0 3px rgba(74,122,130,0.15);
}
body.pc-ob-page .pc-ob-inline-label {
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: none; letter-spacing: 0; color: var(--pc-ob-ink); font-weight: 400;
}
body.pc-ob-page .pc-ob-form-hint {
    margin: 4px 0 0; font: 400 11px/1.4 'Source Sans 3', sans-serif; color: var(--pc-ob-muted);
}
body.pc-ob-page .pc-ob-req { color: #8d3e3e; }
body.pc-ob-page .pc-ob-form-actions {
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid var(--pc-ob-rule-soft);
    display: flex; justify-content: flex-end; gap: 10px;
}