/* ═══════════════════════════════════════════════════════
   Editorial + Sage — App design token overrides
   ═══════════════════════════════════════════════════════ */
:root {
    --bg:            #f6f4ef;
    --surface:       #ffffff;
    --surface-2:     #efece4;
    --surface-3:     #e9e5d8;
    --fg:            #1a1a1a;
    --ink:           #1a1a1a;
    --ink-2:         #494642;
    --ink-3:         #7a756d;
    --ink-4:         #a39d91;
    --line:          #e4ded2;
    --line-strong:   #bfb8a8;
    --border:        #e4ded2;
    --muted:         #7a756d;
    --accent:        #2b3a2a;
    --accent-hover:  #3a4d38;
    --accent-ink:    #ffffff;
    --accent-soft:   #dfe3d6;
    --accent-light:  #dfe3d6;
    --accent-glow:   rgba(43,58,42,0.12);
    --positive:      #3a6a3f;
    --positive-soft: #e3ecdd;
    --warn:          #8a5a1a;
    --warn-soft:     #f2e7d0;
    --danger:        #7a2e2e;
    --danger-soft:   #f0dede;
    --font-display:  "Newsreader", Georgia, serif;
    --font-mono:     "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --sidebar-w:     248px;
    --radius:        10px;
    --radius-sm:     6px;
    --radius-lg:     12px;
}
body {
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════
   App Shell
   ═══════════════════════════════════════════════════════ */

.app-shell { display: flex; min-height: 100vh; }


/* ── Onboarding shell ───────────────────────────────── */

.onboarding-shell {
    min-height: 100vh;
    background: var(--stone-50);
}
.onboarding-topbar {
    min-height: 4rem;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: #fff;
}
.onboarding-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--stone-900);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.onboarding-logo:hover { color: var(--stone-900); opacity: 0.85; }
.onboarding-logo-icon {
    width: 1.5rem;
    height: 2.25rem;
    object-fit: contain;
    flex-shrink: 0;
}
.onboarding-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}
.onboarding-account-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}
.onboarding-account-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stone-400);
}
.onboarding-account-email {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--stone-700);
}
.onboarding-main {
    width: 100%;
    min-height: calc(100vh - 4rem);
    padding: 3rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.onboarding-main .flash,
.onboarding-main .subscribe-page {
    width: 100%;
}


/* ── Sidebar — Editorial + Sage design ─────────────── */

.side {
    width: var(--sidebar-w);
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh; /* mobile: exclude browser chrome so the bottom stays reachable */
    background: color-mix(in srgb, var(--bg) 70%, var(--surface-2));
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px 14px;
    z-index: 100;
    overflow-y: auto;
}

/* Brand */
.side .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    text-decoration: none; color: var(--ink);
    flex-shrink: 0;
}
.side .brand .mark {
    width: 25px; height: 34px;
    object-fit: contain; flex: 0 0 auto;
}
.side .brand .wordmark {
    font-family: var(--font-display); font-size: 18px; font-weight: 500;
    letter-spacing: -0.02em; white-space: nowrap;
}

/* Nav sections */
.side-section { display: flex; flex-direction: column; gap: 1px; }
.side-label {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-3); padding: 0 10px 8px;
}
.side-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 6px;
    font-size: 13.5px; color: var(--ink-2);
    cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.side-item:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); }
.side-item.active {
    background: var(--surface); border-color: var(--line);
    color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.side-item .icn {
    width: 16px; height: 16px; color: var(--ink-3);
    flex: 0 0 auto; display: flex; align-items: center;
}
.side-item.active .icn { color: var(--accent); }
.side-item .count {
    margin-left: auto; font-family: var(--font-mono);
    font-size: 11px; color: var(--ink-3);
}
.side-item-ext { margin-left: auto; color: var(--ink-4); flex-shrink: 0; }

/* Scan card (inbox scanning status) */
.scan-card {
    border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--radius); padding: 14px; font-size: 12px;
}
.scan-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 10px;
}
.scan-head .pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--positive);
    animation: scan-pulse 2s infinite;
}
.scan-head .pulse--error { background: var(--danger); }
@keyframes scan-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 40%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.scan-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 2px 10px; padding: 6px 0;
    border-top: 1px dashed var(--line);
}
.scan-row:first-of-type { border-top: 0; padding-top: 0; }
.scan-row .who { color: var(--ink); font-size: 12.5px; }
.scan-row .what { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); grid-column: 1 / -1; }
.scan-row .state { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); align-self: start; }
.scan-row .state--error { color: var(--danger); }
.scan-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
}
.scan-footer a { color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }

/* User row */
.user-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px; border-top: 1px solid var(--line); margin-top: 4px;
}
.user-row .av {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 13px; font-weight: 500;
    flex: 0 0 auto;
}
.user-row .who { font-size: 13px; flex: 1; min-width: 0; }
.user-row .who a { color: var(--ink); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.user-row .who small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row .logout {
    margin-left: auto; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px;
}
.user-row .logout:hover { color: var(--ink); }

/* Scrollbar */
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* Legacy aliases (kept for backward compat with any remaining references) */
.sidebar-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--red-500); color: #fff;
    font-size: 0.6rem; font-weight: 700; line-height: 1;
    margin-left: auto;
}

/* User chip (legacy aliases kept) */
.sidebar-user {
    display: flex; align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
.sidebar-user-avatar {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase; flex-shrink: 0; letter-spacing: 0.03em;
}
.sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.sidebar-user-name { font-size: 0.8rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sidebar-user-name:hover { color: var(--accent); }
.sidebar-user-email { font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sidebar-logout-form { display: contents; }
.sidebar-logout-btn {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 6px;
    color: var(--ink-3); background: transparent; border: none; padding: 0; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.sidebar-logout-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* ── Sidebar inbox status (legacy class aliases) ────── */

@keyframes sidebar-inbox-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.sidebar-inbox {
    border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface);
    padding: 14px; font-size: 12px;
}
.sidebar-inbox-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sidebar-inbox-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--positive);
}
.sidebar-inbox-dot--scanning { animation: sidebar-inbox-pulse 1.5s ease-in-out infinite; }
.sidebar-inbox-dot--error { background: var(--danger); }
.sidebar-inbox-label {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.sidebar-inbox-account { display: flex; flex-direction: column; margin-bottom: 6px; }
.sidebar-inbox-account:last-of-type { margin-bottom: 0; }
.sidebar-inbox-account-name { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.sidebar-inbox-account-detail { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-inbox-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.sidebar-inbox-settings-link { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.sidebar-inbox-settings-link:hover { color: var(--accent); }


/* ── Content area ───────────────────────────────────── */

.content-wrap {
    flex: 1;
    margin-left: var(--sidebar-w);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-header {
    height: 3.5rem;
    border-bottom: 1px solid var(--stone-100);
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50;
    flex-shrink: 0;
}
.content-header-left {
    font-size: 0.8rem;
    color: var(--stone-400);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.content-header-left strong { color: var(--stone-700); font-weight: 500; }
.content-header-right { display: flex; align-items: center; gap: 0.75rem; }

.content-wrap main {
    padding: 2.5rem 2.5rem 5rem;
    max-width: 1320px;
}

main.main-unauthed {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    max-width: none;
}


/* ═══════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════ */

h1 { font-family: var(--font-display); font-size: clamp(34px, 4vw, 44px); font-weight: 500; margin-bottom: 1rem; letter-spacing: -0.018em; color: var(--ink); line-height: 1.2; }
h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; letter-spacing: -0.01em; color: var(--stone-800); }
h3 { font-size: 0.875rem; font-weight: 600; color: var(--stone-700); }

.section-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400); margin-bottom: 0.5rem;
}


/* ═══════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════ */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-xs); }


/* ═══════════════════════════════════════════════════════
   Breadcrumbs
   ═══════════════════════════════════════════════════════ */

.breadcrumb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; margin-bottom: 0.75rem; color: var(--stone-400); }
.breadcrumb a { color: var(--stone-400); font-weight: 500; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb a::after { content: '/'; margin-left: 0.3rem; color: var(--stone-300); font-weight: 400; }
.breadcrumb-current { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ═══════════════════════════════════════════════════════
   Flash Messages
   ═══════════════════════════════════════════════════════ */

.flash { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.875rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.82rem; font-weight: 500; animation: flash-in 0.25s ease-out; }
.flash-icon { flex-shrink: 0; }
.flash-success { background: var(--success-bg); color: var(--success-fg); border: 1px solid #a7f3d0; }
.flash-error   { background: var(--error-bg);   color: var(--error-fg);   border: 1px solid #fecaca; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════════════
   Shell Email Status
   ═══════════════════════════════════════════════════════ */

.shell-email-status {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--stone-200);
    border-radius: 999px;
    background: var(--stone-50);
    box-shadow: var(--shadow-xs);
}
.shell-email-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone-500);
    flex-shrink: 0;
}
.shell-email-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--positive);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 12%, transparent);
}
.shell-email-status-link {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.shell-email-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.shell-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--stone-200);
}
.shell-email-pill-account {
    min-width: 0;
}
.shell-email-pill-account strong {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--stone-800);
}
.shell-email-pill-account span {
    display: block;
    font-size: 0.6875rem;
    color: var(--stone-400);
    text-transform: capitalize;
}
.shell-email-pill-state {
    min-width: 0;
}
.shell-email-pill-state .email-conn-status {
    display: inline-flex;
    min-width: 0;
}
.shell-email-pill-state .status {
    font-size: 0.6rem;
}
.shell-email-pill-state .status + text {
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface); color: var(--fg);
    text-decoration: none; font-size: 13px; font-weight: 500;
    cursor: pointer; line-height: 1.4;
    transition: all var(--transition); box-shadow: var(--shadow-xs);
    white-space: nowrap; font-family: inherit;
}
.btn:hover { background: var(--stone-50); border-color: var(--stone-300); box-shadow: var(--shadow-sm); color: var(--fg); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-sm); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
/* Quiet variant for destructive actions that repeat per row or sit inside cards */
.btn-danger-outline { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); box-shadow: none; }
.btn-danger-outline:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost, .btn-secondary { background: var(--surface); border-color: var(--line-strong); box-shadow: none; color: var(--ink); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--stone-50); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-small { padding: 0.28rem 0.75rem; font-size: 12px; }

.email-archive-links { margin-top: 0.5rem; display: flex; gap: 0.5rem; }
.email-archive-links .btn { flex: 1; text-align: center; }


/* ═══════════════════════════════════════════════════════
   Forms
   ═══════════════════════════════════════════════════════ */

label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; margin-top: 0.85rem; color: var(--stone-600); letter-spacing: 0.01em; }
.label-optional { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
    display: block; width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit;
    background: var(--surface); color: var(--fg);
    transition: all var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
input::placeholder, textarea::placeholder { color: var(--stone-400); }
input[type="file"] { margin: 0.25rem 0; }
input[type="checkbox"] { display: inline; width: auto; margin-right: 0.4rem; accent-color: var(--accent); }
.form-error { color: var(--error-fg); font-size: 0.875rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--error-bg); border-radius: var(--radius); border: 1px solid #fecaca; }
.form-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; }
.form-card { max-width: 600px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-field { flex: 1; min-width: 140px; }

/* ── Edit receipt page layout ── */
.edit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.edit-grid:not(.has-original) { max-width: 760px; }
.edit-grid.has-original { grid-template-columns: minmax(0, 1fr) 340px; }
.edit-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.edit-side { position: sticky; top: 1rem; }
.edit-side .preview-card { margin-top: 0; }
.edit-side .email-archive-frame { height: 520px; }
@media (max-width: 1020px) {
    .edit-grid.has-original { grid-template-columns: 1fr; }
    .edit-side { position: static; }
}
.edit-receipt-details { display: flex; flex-direction: column; gap: 1rem; }
.edit-receipt-details .form-row { margin: 0; }
.cat-sync-note { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--accent); }

/* ── Add category inline ── */
.add-cat-inline { margin-top: 0.5rem; }
.add-cat-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; font-weight: 500; color: var(--accent);
    cursor: pointer; list-style: none; user-select: none;
}
.add-cat-toggle::-webkit-details-marker { display: none; }
.add-cat-toggle::before { content: '+'; font-weight: 700; }
details[open] .add-cat-toggle::before { content: '−'; }
.add-cat-body { margin-top: 0.625rem; padding: 0.875rem; background: var(--stone-50); border: 1px solid var(--border); border-radius: var(--radius); }
.add-cat-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.add-cat-input { flex: 1; min-width: 180px; }
.add-cat-deductible { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.add-cat-deductible input { width: auto; margin: 0; }
.add-cat-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }
.add-cat-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.625rem; }
.add-cat-error { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* ── Line items section ── */
.edit-line-items { overflow: hidden; }
.edit-line-items-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.edit-section-title { font-size: 0.875rem; font-weight: 600; color: var(--stone-700); margin: 0; letter-spacing: 0.01em; text-transform: uppercase; }
.line-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.line-items-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.line-items-table th {
    text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted); padding: 0 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.line-items-table td { padding: 0.25rem 0.375rem; vertical-align: middle; }
.line-items-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--stone-100); }
.col-qty { width: 5rem; }
.col-price { width: 7.5rem; }
.col-cat { width: 11rem; }
.col-del { width: 2.25rem; }
.li-input {
    width: 100%; padding: 0.3rem 0.45rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-size: 0.8125rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.li-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.li-name { min-width: 140px; }
.li-qty { text-align: right; }
.li-price { text-align: right; }
.btn-row-delete {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border: none; background: transparent;
    color: var(--stone-300); border-radius: var(--radius); cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.btn-row-delete:hover { color: var(--danger); background: #fee2e2; }
.line-items-empty { font-size: 0.875rem; color: var(--muted); text-align: center; padding: 1.5rem 0 0.5rem; }
.li-sum-foot td { padding-top: 0.5rem; border-top: 1px solid var(--border); }
.li-sum-label {
    text-align: right; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted);
}
.li-sum-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 0.825rem; }
.li-sum-hint[hidden] { display: none; }
.li-sum-hint {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin: 0.75rem 0 0; padding: 0.5rem 0.75rem;
    font-size: 0.8125rem; color: var(--stone-700);
    background: var(--stone-50); border: 1px solid var(--border); border-radius: var(--radius);
}
.li-cat-flash { animation: li-cat-flash 1.2s ease; }
@keyframes li-cat-flash {
    0% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    100% { border-color: var(--border); box-shadow: none; }
}


/* ═══════════════════════════════════════════════════════
   Auth (Login)
   ═══════════════════════════════════════════════════════ */

.auth-page { width: 100%; max-width: 380px; }
.auth-card { background: var(--surface); padding: 2.5rem 2rem; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); border: 1px solid var(--border); }
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-logo { display: inline-block; width: 3.1rem; height: 4.25rem; object-fit: contain; margin-bottom: 0.75rem; }
.auth-header h1 { font-size: 1.25rem; margin-bottom: 0.25rem; color: var(--stone-900); }
.auth-subtitle { color: var(--muted); font-size: 0.875rem; }
.auth-submit { width: 100%; margin-top: 1.25rem; padding: 0.65rem 1rem; font-size: 0.875rem; border-radius: var(--radius); }
.auth-footer { margin-top: 1.25rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.auth-footer a { color: var(--accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-help { font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.5; }
.auth-alt { margin-top: 1rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.btn-link { background: none; border: none; padding: 0; font: inherit; font-size: inherit; color: var(--accent); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.form-success { color: var(--positive); font-size: 0.875rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--positive-soft); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--positive) 35%, transparent); }

/* ── Invite codes ── */
.invite-code { font-family: 'Fira Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.8125rem; background: var(--stone-100); padding: 0.15rem 0.4rem; border-radius: 4px; letter-spacing: 0.02em; }
.btn-copy-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; transition: all var(--transition); }
.btn-copy-link:hover { background: var(--stone-100); color: var(--fg); border-color: var(--stone-300); }
.invite-status { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.invite-status--active { background: #d1fae5; color: #065f46; }
.invite-status--used { background: var(--stone-100); color: var(--muted); }
.invite-status--expired { background: #fef3c7; color: #92400e; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.btn-danger-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger-hover); box-shadow: none; }

/* ═══════════════════════════════════════════════════════
   Page Header
   ═══════════════════════════════════════════════════════ */

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }
.page-header h1 { margin-bottom: 0; }
.actions { display: flex; gap: 0.5rem; align-items: center; }


/* ═══════════════════════════════════════════════════════
   Tables — editorial flat style
   ═══════════════════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 0.875rem;
}
th, td { text-align: left; padding: 0.75rem 0.5rem; }
th {
    font-weight: 600;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stone-400);
    border-bottom: 1px solid var(--stone-100);
    padding-bottom: 0.625rem;
}
td { border-bottom: 1px solid var(--stone-50); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(0,0,0,0.02); }
th a { color: var(--stone-400); text-decoration: none; }
th a:hover { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Wrapped table (non-receipt tables that want a card feel) */
.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1rem;
}
.table-card table { font-size: 0.82rem; }
.table-card th { background: var(--stone-50); }
.table-card td { border-bottom: 1px solid var(--stone-100); }


/* ═══════════════════════════════════════════════════════
   Status Badges
   ═══════════════════════════════════════════════════════ */

.status { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--stone-100); color: var(--muted); display: inline-block; letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; }
.status-pending  { background: var(--amber-50);   color: var(--amber-600);   }
.status-ocr_done { background: var(--blue-50);     color: var(--blue-600);    }
.status-parsed   { background: var(--violet-50);   color: var(--violet-600);  }
.status-complete,
.status-verified { background: var(--emerald-50);  color: var(--emerald-600); }
.status-review   { background: var(--amber-50);    color: var(--amber-600);   }
.status-error    { background: var(--error-bg);    color: var(--error-fg);    }
.status-admin    { background: var(--violet-50);   color: var(--violet-600);  font-weight: 700; }


/* ═══════════════════════════════════════════════════════
   Receipt List — editorial
   ═══════════════════════════════════════════════════════ */

/* ── Receipt list hero — editorial serif display ─────── */
.receipt-hero {
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px 40px; align-items: end;
    padding-bottom: 24px; margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}
.receipt-hero-meta {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 12px;
    display: inline-flex; align-items: center; gap: 10px;
}
.receipt-hero-meta::before { content: ""; width: 20px; height: 1px; background: var(--line-strong); }
.receipt-hero-total {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(48px, 6vw, 72px); line-height: 1;
    letter-spacing: -0.018em; margin: 0;
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    color: var(--ink);
}
.receipt-hero-currency {
    font-size: 28px;
    color: var(--ink-3);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
}
.receipt-hero-total-secondary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: clamp(12px, 1.2vw, 16px);
}
.receipt-hero-total-secondary-part {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.receipt-hero-total-secondary-code {
    color: var(--ink-3);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
}
.receipt-hero-total-secondary-amount {
    color: var(--ink);
    font-style: normal;
    font-weight: 400;
}
.receipt-hero-total-secondary-sep,
.receipt-hero-total-secondary-text {
    color: var(--ink-3);
}
.receipt-hero-total .cents { font-size: 44px; color: var(--ink-2); }
.receipt-hero-sub {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-2); font-size: 14px; margin-top: 14px; flex-wrap: wrap;
}
.receipt-hero-sub .chip-meta {
    font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: 0.02em; color: var(--ink-3);
}
.receipt-hero-sub .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.receipt-hero-sub-item { display: flex; align-items: center; gap: 0.5rem; }
.receipt-hero-actions { display: flex; align-items: center; gap: 8px; }

/* ── Month strip ────────────────────────────────────── */
.strip {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    text-decoration: none;
}
.strip .cell {
    padding: 12px 12px 10px;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background .12s ease;
    min-height: 70px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.strip .cell:last-child { border-right: 0; }
.strip .cell:hover { background: var(--surface-2); }
.strip .cell.active {
    background: var(--ink);
    color: var(--bg);
}
.strip .cell.active .m-label { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.strip .cell.active .m-amt { color: var(--bg); }
.strip .cell.active .m-count { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.m-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.m-amt {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 6px;
    color: var(--ink);
}
.m-amt.muted { color: var(--ink-4); font-weight: 400; font-size: 15px; }
.m-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 2px;
}
.m-secondary {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}
.m-sec-item {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.m-sec-code {
    font-weight: 600;
    color: var(--ink-3);
}
.m-sec-more {
    color: var(--ink-4);
    font-style: italic;
}
.strip .cell.active .m-secondary { border-top-color: color-mix(in srgb, var(--bg) 25%, transparent); }
.strip .cell.active .m-sec-item { color: color-mix(in srgb, var(--bg) 50%, transparent); }
.strip .cell.active .m-sec-code { color: color-mix(in srgb, var(--bg) 65%, transparent); }

/* ── Filter bar search input ────────────────────────────── */
.filter-search {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    height: 28px; padding: 0 14px; margin: 0; box-sizing: border-box;
    background: var(--surface);
    min-width: 220px; flex-shrink: 0; font-weight: 400;
    transition: border-color 0.15s, background 0.15s;
}
.filter-search:focus-within { border-color: var(--accent); }
.filter-search svg { flex-shrink: 0; color: var(--ink-3); }
.filter-search .filter-search-inp {
    border: 0; outline: none; background: transparent; box-shadow: none;
    flex: 1; font-size: 13.5px; color: var(--ink); font-family: inherit;
    width: 0; padding: 0;
}
.filter-search .filter-search-inp:focus { border: 0; outline: none; box-shadow: none; }
.filter-search .filter-search-inp::placeholder { color: var(--ink-4); transition: color 100ms ease-out; }
.filter-search .filter-search-inp:focus::placeholder { color: transparent; }
/* Hide WebKit's built-in clear "X" so our custom button is the only one */
.filter-search .filter-search-inp::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.filter-search:has(.filter-search-inp:not(:placeholder-shown)) {
    border-color: var(--accent); background: var(--accent-soft);
}
.filter-search-clear {
    display: none; flex-shrink: 0;
    background: transparent; border: 0; padding: 0; margin: 0 -4px 0 0;
    width: 18px; height: 18px; border-radius: 999px;
    color: var(--ink-3); cursor: pointer;
    align-items: center; justify-content: center;
}
.filter-search-clear:hover { color: var(--ink); background: rgba(0,0,0,.06); }
.filter-search:has(.filter-search-inp:not(:placeholder-shown)) .filter-search-clear { display: inline-flex; }
/* HTMX in-flight indicator: gentle dim while the request is loading */
.filter-search.htmx-request { opacity: 0.6; }

/* Smooth fade between filter/search swaps so the receipt list doesn't
   pop when result counts change (especially noticeable on mobile). The
   search input swaps only .receipt-list-body so it stays in the DOM
   and keeps focus / mobile keyboard up; the form's chip changes swap
   the broader .receipt-list-page so totals & strip refresh too. */
.receipt-list-page,
.receipt-list-body { transition: opacity 120ms ease; }
.receipt-list-page.htmx-swapping,
.receipt-list-page.htmx-settling,
.receipt-list-body.htmx-swapping,
.receipt-list-body.htmx-settling { opacity: 0; }

/* ── Filter bar (new fchip design) ─────────────────────── */
.filters {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters-spacer { flex: 1; min-width: 12px; }
.right-meta {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.04em;
    white-space: nowrap; flex-shrink: 0;
}
.fchip {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 11px; margin: 0; box-sizing: border-box;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12.5px; font-weight: 400; line-height: 1; color: var(--ink-2);
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
    transition: background .1s ease;
}
.fchip:hover { background: var(--surface-2); }
.fchip--on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.fchip--on:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-2)); }
.fchip--clear { border-style: dashed; color: var(--ink-3); }
.fchip .cap {
    font-family: var(--font-mono); font-size: 10px; line-height: 1;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.fchip--on .cap { color: var(--accent); }
.fchip .val { font-weight: 400; color: var(--ink); line-height: 1; }
.fchip .x { color: var(--ink-3); font-size: 11px; line-height: 1; }
.fchip-sel {
    position: absolute; inset: 0;
    opacity: 0; width: 100%; height: 100%; cursor: pointer;
}

/* ── Bulk bar ────────────────────────────────────────────── */
.bulk {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    margin-top: 12px;
    background: var(--ink); color: var(--bg);
    border-radius: var(--radius); font-size: 13px;
}
.bulk-count {
    font-family: var(--font-display); font-size: 17px; font-weight: 500;
    letter-spacing: -0.01em; line-height: 1;
}
.bulk-label { opacity: .6; font-size: 12.5px; margin-right: 2px; }
.bulk-amt {
    font-family: var(--font-mono); font-size: 11.5px;
    color: color-mix(in srgb, var(--bg) 55%, transparent);
}
.bulk-sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--bg) 18%, transparent); flex: 0 0 auto; }
.bulk-grow { flex: 1; }
.bulk-btn {
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 12.5px; color: color-mix(in srgb, var(--bg) 85%, transparent);
    padding: 4px 9px; border-radius: 5px; list-style: none;
}
.bulk-btn:hover, .bulk-btn:focus { background: color-mix(in srgb, var(--bg) 10%, transparent); color: var(--bg); outline: none; }
.bulk-btn--danger { color: color-mix(in srgb, #fca5a5 85%, var(--bg)); }
.bulk-btn--danger:hover { background: color-mix(in srgb, var(--bg) 8%, transparent); color: #fca5a5; }
.bulk-deselect {
    background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 5px;
    color: color-mix(in srgb, var(--bg) 45%, transparent); display: flex; align-items: center;
}
.bulk-deselect:hover { color: var(--bg); background: color-mix(in srgb, var(--bg) 10%, transparent); }

/* Bulk popovers (category / tag) */
.bulk-popover { position: relative; }
.bulk-popover summary { list-style: none; }
.bulk-popover summary::-webkit-details-marker { display: none; }
.bulk-pop-body {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px;
    display: flex; gap: 6px; align-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    z-index: 50; min-width: 200px;
}
.bulk-cat-sel {
    flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 5px 8px; font: inherit; font-size: 13px; background: var(--surface);
    color: var(--ink); cursor: pointer;
}
.bulk-tag-inp {
    flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 5px 10px; font: inherit; font-size: 13px; background: var(--surface);
    color: var(--ink); outline: none; min-width: 120px;
}
.bulk-tag-inp:focus { border-color: var(--accent); }
.bulk-pop-apply {
    background: var(--accent); color: var(--accent-ink); border: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 500;
    padding: 5px 12px; border-radius: var(--radius-sm);
    white-space: nowrap;
}
.bulk-pop-apply:hover { background: var(--accent-hover); }

/* Filter bar (legacy, keep for other pages) */
.filter-form {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--stone-100);
}
.filter-form label { margin: 0; font-size: 0.625rem; color: var(--stone-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.filter-form select, .filter-form input[type="date"] { width: auto; padding: 0.35rem 0.6rem; font-size: 0.82rem; border-color: var(--stone-200); border-radius: var(--radius); background: var(--stone-50); }
.filter-form select:focus, .filter-form input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Receipt controls bar */
.receipt-controls {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--stone-100);
}
.receipt-controls-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400);
}
.receipt-controls-actions {
    display: flex; gap: 1rem;
    font-size: 0.75rem; color: var(--stone-400);
}
.receipt-controls-actions a, .receipt-controls-actions button {
    color: var(--stone-400); background: none; border: none; cursor: pointer;
    font: inherit; padding: 0; display: flex; align-items: center; gap: 0.25rem;
    transition: color var(--transition);
}
.receipt-controls-actions a:hover, .receipt-controls-actions button:hover { color: var(--stone-700); }

/* ── Receipt table — new editorial design ─────────────── */
.receipt-table-wrap { margin-top: 14px; }
.receipt-table {
    width: 100%;
    border-collapse: collapse;
}
.receipt-table th {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

/* Sortable column headers */
.sortable-th { padding: 0; }
.sortable-th.num { text-align: right; }
.sort-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0 0.5rem 0.625rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--transition);
    width: 100%;
}
.sortable-th.num .sort-link { justify-content: flex-end; }
.sort-link:hover { color: var(--stone-700); }
.sortable-th--active .sort-link { color: var(--accent); }

.sort-icon { flex-shrink: 0; }
.sort-icon--off { opacity: 0; transition: opacity var(--transition); }
.sortable-th:hover .sort-icon--off { opacity: 0.4; }
.sort-icon--on { opacity: 1; }

.receipt-table td {
    padding: 10px 8px;
    border-bottom: 1px dashed var(--line);
    font-size: 13.5px;
    vertical-align: middle;
}
.receipt-table tbody tr { transition: background .1s ease; position: relative; }
.receipt-table tbody tr[onclick], .receipt-table tbody tr.row-link { cursor: pointer; }
.receipt-table tbody tr[onclick]:hover, .receipt-table tbody tr.row-link:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); }
/* Stretched row link: transform (not position) so Safari treats the row as the containing block */
.receipt-table tbody tr.row-link { transform: translate(0); }
tr.row-link .row-link-a::after { content: ""; position: absolute; inset: 0; }
/* Interactive bits stay clickable above the stretched link */
tr.row-link :is(.row-check-hitbox, .cat-chip, .tags-cell .tag) { position: relative; z-index: 1; }
.receipt-table tbody tr.row-selected { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.receipt-table tbody tr.row-selected:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.receipt-table tbody tr.review-row { background: color-mix(in srgb, var(--warn-soft) 50%, var(--surface)); }
.receipt-table tbody tr.review-row:hover { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.receipt-table tbody tr:last-child td { border-bottom: none; }

/* ── Date group header rows ───────────────────────────── */
.receipt-table tbody tr.date-group-hd { cursor: default; }
.receipt-table tbody tr.date-group-hd:hover { background: transparent; }
.receipt-table tbody tr.date-group-hd td {
    padding: 0;
    border-bottom: none;
    border-top: 1px solid var(--line);
}
.receipt-table tbody tr.date-group-hd--first td { border-top: none; }
.dg-spacer { width: 0; }
.dg-content { padding: 22px 8px 6px !important; }
.dg-row { display: flex; align-items: baseline; gap: 14px; }
.dg-total {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dg-total-secondary {
    color: var(--ink-3);
    margin-left: 8px;
}
.dg-count { color: var(--ink-3); }
.dg-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.dg-range {
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.receipt-table tfoot td, .receipt-table tfoot th {
    padding: 18px 8px;
    border-top: 1px solid var(--line);
    border-bottom: none;
}

/* ── Vendor logo initials ─────────────────────────────── */
.vlogo {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--surface-2); border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 13px; font-weight: 500;
    color: var(--ink-2); flex: 0 0 auto;
    user-select: none;
}
.vlogo--brand { background: var(--surface); }
.vlogo--brand svg { display: block; }
.vname { min-width: 0; }
.vname-link { display: block; min-width: 0; color: inherit; text-decoration: none; }
.vname-link:hover .n { color: var(--accent); }
.vname .n {
    font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vname .meta {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
    letter-spacing: 0.02em; margin-top: 1px;
    display: flex; gap: 8px; align-items: center;
}
.vname .src-badge, .vname .src {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px; background: var(--surface-2);
    border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line);
    font-size: 10px;
}
.vname .meta-sum {
    color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Category pill with color dot ───────────────────── */
.catpill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink-2); cursor: pointer; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.catpill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cat-color, var(--ink-3)); flex: 0 0 auto;
}
.catpill:hover { background: var(--surface-3); }

/* ── Amounts in table ────────────────────────────────── */
.receipt-td-vendor { display: flex; align-items: center; gap: 12px; min-width: 0; }
.receipt-td-amount {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 13.5px; color: var(--ink); font-weight: 500;
    text-align: right;
}
.receipt-td-amount .cents { color: var(--ink-3); font-weight: 400; }
.receipt-td-amount.muted { color: var(--ink-4); font-weight: 400; }
.td-cents { color: var(--ink-3); font-weight: 400; }
.receipt-td-date {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2); letter-spacing: 0.01em; white-space: nowrap;
}

/* ── Row status (dot + label, replaces background pill in table) ── */
.row-status {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.row-status::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.row-status-complete  { color: var(--positive); }
.row-status-verified  { color: var(--positive); }
.row-status-review    { color: var(--warn); }
.row-status-error     { color: var(--danger); }
.row-status-pending   { color: var(--ink-3); }
.row-status-admin     { color: var(--accent); }

/* ── Receipt footer (total + pagination) ─────────────── */
.receipt-footer {
    display: flex; align-items: center; gap: 12px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: 13px;
}
.receipt-footer-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.receipt-footer-amount {
    font-family: var(--font-display); font-size: 18px; font-weight: 500;
    letter-spacing: -0.01em; color: var(--ink);
}
.receipt-list-currency {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    margin-right: 6px;
}
.receipt-footer-amount small {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
    margin-left: 6px; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 400;
}
.receipt-footer .spacer { flex: 1; }

/* Category display in receipt rows */
.cat-dot-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; color: var(--stone-400);
}
.cat-dot-row::before {
    content: '';
    display: inline-block;
    width: 0.375rem; height: 0.375rem;
    border-radius: 50%;
    background: var(--stone-300);
    flex-shrink: 0;
}

/* Category chip in receipt list table */
.cat-cell { min-width: 140px; padding: 8px !important; }
.cat-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-2);
    cursor: pointer; max-width: 100%; overflow: hidden;
    isolation: isolate;
    transition: background .12s ease, border-color .12s ease;
}
.cat-chip:hover { background: var(--surface-3); border-color: var(--line-strong); }
.cat-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cc); flex-shrink: 0;
    pointer-events: none;
}
.cat-chip-name {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    pointer-events: none;
}
.cat-chip-sel {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
    z-index: 1;
    cursor: pointer; font-size: 13px;
}
.cat-display { font-size: 0.82rem; }
.htmx-swapping { opacity: 0.5; transition: opacity var(--transition); }

/* Bulk bar */
.bulk-bar { align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.82rem; font-weight: 500; flex-wrap: wrap; }
.bulk-category-select { width: auto; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
.chk-col {
    width: 3.25rem;
    padding: 0 !important;
    text-align: center;
}
.row-check-hitbox {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
}
.row-check-hitbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}
.row-check-hitbox--head {
    min-height: 36px;
}
.thumb-col { width: 44px; padding: 0.375rem 0.25rem 0.375rem 0.5rem !important; }
.receipt-list-thumb { display: block; width: 36px; height: 48px; object-fit: cover; border-radius: 3px; border: 1px solid var(--stone-100); background: var(--stone-50); }


/* ═══════════════════════════════════════════════════════
   Receipt Detail
   ═══════════════════════════════════════════════════════ */

/* ── Receipt detail — top bar ─────────────────────────── */
.detail-topbar {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 18px;
}
.detail-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-3); text-decoration: none;
}
.detail-back:hover { color: var(--ink); }
.detail-back .ar { font-size: 14px; line-height: 1; }
.detail-top-spacer { flex: 1; }
.detail-actions { display: inline-flex; align-items: center; gap: 2px; }
.detail-actions .sep { width: 1px; height: 18px; background: var(--line); margin: 0 8px; }
.tb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; font-size: 12.5px; color: var(--ink-2);
    border-radius: 999px; border: 1px solid transparent;
    background: none; cursor: pointer; font: inherit;
}
.tb-btn:hover { background: var(--surface-2); color: var(--ink); }
.tb-btn svg { color: var(--ink-3); }
.tb-btn.danger { color: var(--danger); }
.tb-btn.danger:hover { background: var(--danger-soft); }
.tb-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tb-btn.primary:hover { background: color-mix(in srgb, var(--ink) 88%, #000); }

/* ── Receipt detail hero ─────────────────────────────── */
.detail-hero {
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px 40px; align-items: start;
    padding: 10px 0 28px; border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.detail-hero-left {}
.detail-vendor-row { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.detail-vlogo {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 24px; font-weight: 500;
    color: var(--ink-2); letter-spacing: -0.01em; flex: 0 0 auto;
}
.detail-vendor {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(34px, 4.4vw, 48px); line-height: 1.02;
    letter-spacing: -0.018em; margin: 0; color: var(--ink);
}
.detail-hero-sub {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px;
}
.detail-hero-chips {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.detail-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2); cursor: default;
}
.detail-chip::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--cp, var(--ink-3));
}
.detail-chip.date { --cp: var(--ink-3); }
.detail-chip.source { --cp: oklch(58% 0.08 250); }
.detail-chip.category { --cp: oklch(58% 0.11 50); }
.detail-chip.year { --cp: var(--accent); }
.detail-hero-right { text-align: right; }
.detail-amount {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(38px, 4.6vw, 54px);
    line-height: 1; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 12px; justify-content: flex-end;
    flex-wrap: wrap; color: var(--ink);
}
.detail-amount .cur {
    font-size: 22px; color: var(--ink-3); font-style: italic;
    font-weight: 400; letter-spacing: -0.01em;
}
.detail-amount .cents { font-size: 32px; color: var(--ink-2); }
.detail-amount--missing { color: var(--ink-4); }
.detail-amount-status {
    margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--positive);
}
.detail-amount-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.detail-tax-note {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); margin-top: 6px; text-align: right;
}

/* Details DL */
.detail-dl {
    display: grid; grid-template-columns: 130px 1fr;
    gap: 0; font-size: 14px;
}
.detail-dl dt, .detail-dl dd {
    padding: 12px 0; border-top: 1px dashed var(--line);
}
.detail-dl dt:first-of-type, .detail-dl dd:first-of-type { border-top: 0; }
.detail-dl dt {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    align-self: center;
}
.detail-dl dd { margin: 0; color: var(--ink); }
.detail-dl dd .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }

/* Block labels */
.block-label {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
    /* flex, not inline-flex: a bare label in normal flow must not pick up a
       baseline offset from the parent's larger line box */
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
}
.block-label::before { content: ""; width: 20px; height: 1px; background: var(--line-strong); }
.block-label-currency-name {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--ink-4);
}
.block { margin-bottom: 40px; }

/* Two-column grid */
.detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; margin-top: 28px; }
.body-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; margin-top: 28px; }
.detail-main {}
.detail-sidebar { display: flex; flex-direction: column; gap: 32px; }

/* ── Detail topbar spacer/actions (new markup) ── */
.top-spacer { flex: 1; }
.top-actions { display: inline-flex; align-items: center; gap: 2px; }
.top-actions .sep { display: inline-block; width: 1px; height: 18px; background: var(--line); margin: 0 8px; vertical-align: middle; }

/* ── Receipt detail hero (new .rhead markup) ── */
.rhead {
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px 40px; align-items: start;
    padding: 10px 0 28px; border-bottom: 1px solid var(--line);
}
.rhead .vendor-row { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.rhead .vlogo {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 24px; font-weight: 500;
    color: var(--ink-2); letter-spacing: -0.01em; flex: 0 0 auto;
}
.rhead h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(34px, 4.4vw, 48px); line-height: 1.02;
    letter-spacing: -0.018em; margin: 0; color: var(--ink);
}
.rhead .sub {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px;
}
.rhead .crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.crumb-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2);
}
.crumb-pill::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--cp, var(--ink-3));
}
.crumb-pill.date { --cp: var(--ink-3); }
.crumb-pill.source { --cp: #5a7a9a; }
.crumb-pill.category { --cp: #8a6a2a; }
.crumb-pill.year { --cp: var(--accent); }
a.crumb-pill { text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
a.crumb-pill:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
a.crumb-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rhead .amount-block { text-align: right; }
.rhead .amount {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(38px, 4.6vw, 54px);
    line-height: 1; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 12px; justify-content: flex-end;
    flex-wrap: wrap; color: var(--ink);
}
.rhead .amount .cur {
    font-size: 22px; color: var(--ink-3); font-style: italic;
    font-weight: 400; letter-spacing: -0.01em;
}
.rhead .amount .cents { font-size: 32px; color: var(--ink-2); }
.rhead .amount-meta {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-3);
}

/* ── Details DL (new .dl markup) ── */
.dl {
    display: grid; grid-template-columns: 130px 1fr;
    gap: 0; font-size: 14px;
}
.dl dt, .dl dd { padding: 12px 0; border-top: 1px dashed var(--line); }
.dl dt:first-of-type, .dl dd:first-of-type { border-top: 0; }
.dl dt {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    align-self: center;
}
.dl dd { margin: 0; color: var(--ink); }
.dl .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.dl .amt-dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; }

/* ── Preview card (file/original) ────────────────────── */
.preview-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.preview-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    background: var(--surface-2);
}
.preview-head .ph-right { display: inline-flex; align-items: center; gap: 4px; }
.preview-head button { color: var(--ink-2); padding: 3px 6px; border-radius: 4px; background: none; border: none; cursor: pointer; }
.preview-head button:hover { background: var(--surface-3); color: var(--ink); }
.preview-foot {
    padding: 8px 10px; border-top: 1px solid var(--line);
    display: flex; gap: 4px; background: var(--surface-2);
}
.preview-foot button {
    flex: 1; font-family: var(--font-mono); font-size: 10.5px;
    padding: 6px 8px; border-radius: 6px; color: var(--ink-2);
    letter-spacing: 0.04em; text-transform: uppercase;
    background: none; border: none; cursor: pointer;
}
.preview-foot button:hover { background: var(--surface-3); color: var(--ink); }
.preview-foot button.active { background: var(--ink); color: var(--bg); }

/* File card (legacy) */
.file-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.file-preview-link {
    display: block; position: relative;
    text-decoration: none;
    cursor: zoom-in;
}
.receipt-image {
    display: block;
    width: 100%;
    border-radius: 0;
}
.file-preview-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600; color: #fff;
    transition: background var(--transition);
    opacity: 0;
}
.file-preview-link:hover .file-preview-overlay {
    background: rgba(0,0,0,0.35);
    opacity: 1;
}
.file-preview-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem; gap: 0.5rem;
    min-height: 180px;
    text-decoration: none;
    color: var(--stone-500);
    transition: background var(--transition);
}
.file-preview-doc:hover { background: var(--stone-100); }
.file-preview-email { display: block; position: relative; }
.file-preview-email .file-preview-overlay { border-radius: 0; }

/* Inline notes editor */
.notes-section { margin-top: 1.5rem; }
.notes-section-header { display: flex; align-items: center; margin-bottom: 0.375rem; }
.notes-section-header .section-label { margin: 0; }
.notes-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    animation: notes-status-in 0.2s ease forwards, notes-status-out 0.4s ease forwards 2.2s;
}
.notes-status::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.notes-status svg { display: none; }
.notes-status--saved { color: var(--positive, var(--teal-600)); }
.notes-status--error {
    color: var(--danger, #dc2626);
    /* Errors stay put so the user can actually read them */
    animation: notes-status-in 0.2s ease forwards;
}
@keyframes notes-status-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes notes-status-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.notes-inline {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--stone-700);
    resize: vertical;
    transition: border-color 150ms, background 150ms;
    box-sizing: border-box;
}
.notes-inline:hover {
    border-color: var(--stone-200);
    background: var(--stone-50);
}
.notes-inline:focus {
    border-color: var(--accent);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

/* OCR text */
.ocr-text {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--stone-50);
    overflow: hidden;
}
.ocr-text summary {
    cursor: pointer; user-select: none; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.875rem;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-500);
    transition: background var(--transition), color var(--transition);
    gap: 0.5rem;
}
.ocr-text summary::-webkit-details-marker { display: none; }
.ocr-text summary:hover { background: rgba(0,0,0,0.03); color: var(--stone-700); }
.ocr-text summary::after {
    content: '';
    display: inline-block;
    width: 1rem; height: 1rem; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    transition: transform 200ms ease;
}
.ocr-text[open] summary::after { transform: rotate(180deg); }
.ocr-text[open] summary { color: var(--stone-700); border-bottom: 1px solid var(--border); }
.ocr-text pre { margin: 0; padding: 0.75rem 0.875rem; }

/* File modal (dialog) */
.file-modal {
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    width: min(92vw, 1000px);
    height: 90vh;
    overflow: hidden;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    margin: 0;
}
.file-modal[open] {
    display: flex;
}
.file-modal::backdrop {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
}
.file-modal-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.file-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.file-modal-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--stone-800);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.file-modal-close {
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.625rem;
}
.file-modal-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--stone-900);
    min-height: 0;
}
.file-modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.file-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    background: #fff;
}

/* Receipt preview modal (duplicates page) */
.rp-modal-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.rp-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.875rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.rp-modal-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.rp-modal-title strong {
    font-size: 0.95rem;
    color: var(--stone-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-modal-amount {
    font-size: 0.85rem;
    color: var(--stone-500);
}
.rp-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rp-modal-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.rp-modal-body--html {
    padding: 0;
    gap: 0;
}
.rp-modal-image-wrap {
    text-align: center;
    background: var(--stone-900);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.rp-modal-email-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    flex: 1;
    min-height: 0;
    display: flex;
    margin: 1rem 1rem 0;
}
.rp-modal-email-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}
.rp-modal-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.rp-modal-body--pdf {
    padding: 0;
    gap: 0;
}
.rp-modal-pdf-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.rp-modal-pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.rp-modal-inner--pdf .rp-modal-dl {
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    grid-template-columns: repeat(4, auto);
    align-items: center;
    gap: 0.35rem 0.75rem;
}
.rp-modal-inner--pdf .rp-modal-dl dt {
    margin-left: 0.75rem;
}
.rp-modal-inner--pdf .rp-modal-dl dt:first-child {
    margin-left: 0;
}
.rp-modal-dl--html {
    grid-template-columns: repeat(4, auto);
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
}
.rp-modal-dl--html dt {
    margin-left: 0.75rem;
}
.rp-modal-dl--html dt:first-child {
    margin-left: 0;
}
.rp-modal-dl dt {
    color: var(--stone-500);
    font-weight: 500;
    white-space: nowrap;
}
.rp-modal-dl dd {
    margin: 0;
    color: var(--stone-700);
}

/* Email archive */
.email-archive-frame { width: 100%; height: 420px; border: none; display: block; background: #fff; }

/* Line items */
.receipt-items { margin-top: 2rem; }

/* Item details list */
.item-details-list { list-style: none; margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.receipt-file h2 { margin-bottom: 0.25rem; }

.items-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.items-table th { text-align: left; border-bottom: 1px solid var(--border); padding: 0.45rem 0.75rem; font-size: 0.625rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.1em; background: var(--stone-50); font-weight: 700; }
.items-table th.num { text-align: right; }
.items-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--stone-100); }
.items-table tr:last-child td { border-bottom: none; }
.items-table tr.discount td { color: var(--muted); }

.item-name-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.item-expanded, .item-type { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.35rem; border-radius: 99px; vertical-align: middle; }
.item-expanded { background: var(--emerald-50); color: var(--emerald-600); }
.item-type     { background: var(--blue-50);    color: var(--blue-600); }
.item-details { margin-top: 0.3rem; }
.item-details summary { font-size: 0.72rem; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; padding: 0.15rem 0; }
.item-details summary:hover { color: var(--fg); }
.item-details ul { list-style: none; margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.item-detail-row { display: flex; gap: 0.75rem; font-size: 0.78rem; }
.item-detail-key { font-weight: 600; color: var(--muted); text-transform: capitalize; min-width: 6rem; }
.item-detail-val { color: var(--fg); }
.detail-item-tags-grid {
    display: grid;
    gap: 0.75rem;
}
.detail-item-tag-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.detail-item-tag-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}
.detail-item-tag-header strong {
    font-size: 0.9rem;
    color: var(--stone-900);
}
.detail-item-tag-meta {
    font-size: 0.75rem;
    color: var(--stone-500);
}
.detail-item-tags-editor {
    gap: 0.45rem;
}
.detail-item-tags-editor .tag-add-form {
    width: 100%;
    max-width: 18rem;
}
.detail-item-tags-editor .tag-input {
    width: 100%;
    border-color: var(--border);
    background: var(--stone-50);
    min-width: 0;
    flex: 1 1 10rem;
}
.detail-item-tags-editor .tag-add-btn { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════
   Receipt Detail — redesigned blocks
   (line-item expand rows, tag editor, activity, danger zone,
    preview/ocr/related — mirrors The Paper Keep Detail.html)
   ═══════════════════════════════════════════════════════ */

.block-label-row { display: flex; align-items: center; margin-bottom: 16px; }
.block-label-row .block-label { margin-bottom: 0; }
.block-extra {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-4); letter-spacing: 0.04em;
    text-transform: none; margin-left: 10px;
}
.block-edit-link {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-3); letter-spacing: 0.04em;
    text-decoration: none;
}
.block-edit-link:hover { color: var(--ink); }

/* Line-item table */
.li-table {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.li-head, .li-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 110px 110px;
    gap: 6px 14px; padding: 12px 18px; align-items: center;
}
.li-head {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.li-head .r, .li-row-top .r { text-align: right; }
.li-row { border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.li-row:last-of-type { border-bottom: 0; }
.li-row-top { cursor: pointer; transition: background .1s ease; }
.li-row-top:hover { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.li-row.open .li-row-top { background: color-mix(in srgb, var(--accent-soft, #dfe3d6) 30%, var(--surface)); }
.li-row .item { font-weight: 500; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.li-row .item .chev {
    font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
    transition: transform .15s ease; flex: 0 0 auto;
    display: inline-block; width: 10px;
}
.li-row.open .item .chev { transform: rotate(90deg); color: var(--ink); }
.li-row .item .itxt { min-width: 0; }
.li-row .item small {
    display: block; color: var(--ink-3); font-weight: 400;
    font-family: var(--font-mono); font-size: 11px; margin-top: 2px;
}
.li-row .qty { font-family: var(--font-mono); color: var(--ink-2); }
.li-row .price, .li-row .amount {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* Category + tag chips row under the item name (collapsed state) */
.li-chips {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
    padding-left: 18px; /* align with .itxt: chevron width 10px + 8px gap */
}
.li-chips .mini {
    font-family: var(--font-mono); font-size: 10.5px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft, #dfe3d6); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.li-chips .add-inline {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-3);
    border: 1px dashed var(--line-strong); border-radius: 999px;
    padding: 2px 8px; background: none; cursor: pointer;
}
.li-chips .add-inline:hover {
    color: var(--ink); border-color: var(--ink-3); background: var(--surface);
}

/* Expanded editor panel */
.li-expand {
    display: none;
    padding: 0 18px 16px 40px;
    border-bottom: 1px dashed var(--line);
    background: color-mix(in srgb, var(--accent-soft, #dfe3d6) 14%, var(--surface));
}
.li-row.open .li-expand { display: block; }
.li-row:last-of-type .li-expand { border-bottom: 0; }

.li-meta {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    padding: 10px 0 0; font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-3);
}
.li-meta > div { display: inline-flex; gap: 8px; }
.li-meta-key { color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; align-self: center; }
.li-meta-val { color: var(--ink-2); }

.tag-editor { display: flex; align-items: flex-start; gap: 14px; padding-top: 12px; }
.tag-editor .te-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    padding-top: 6px; min-width: 54px;
}
.tag-editor .te-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tag-editor .te-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-editor .te-suggested { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; }
.tag-editor .te-suggested .lbl {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.sugg-chip {
    font-family: var(--font-mono); font-size: 11px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--surface); color: var(--ink-2);
    border: 1px dashed var(--line-strong); cursor: pointer;
}
.sugg-chip::before { content: "+ "; color: var(--ink-3); }
.sugg-chip:hover {
    border-style: solid; border-color: var(--accent);
    color: var(--accent); background: var(--accent-soft, #dfe3d6);
}

/* Tag editor wraps the shared partials/tags output; tighten its look */
.tag-editor .te-chips .tag {
    font-family: var(--font-mono); font-size: 11px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--accent-soft, #dfe3d6); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    gap: 6px;
}
.tag-editor .te-chips .tag-add-form {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px dashed var(--line-strong); border-radius: 999px;
    padding: 1px 4px 1px 10px; background: transparent;
}
.tag-editor .te-chips .tag-add-form:focus-within {
    border-style: solid; border-color: var(--accent); background: var(--surface);
}
.tag-editor .te-chips .tag-input {
    border: 0; background: transparent; padding: 3px 2px;
    font-family: var(--font-mono); font-size: 11px; width: 140px; box-shadow: none;
}
.tag-editor .te-chips .tag-input:focus { border: 0; box-shadow: none; }
.tag-editor .te-chips .tag-add-btn {
    font-family: var(--font-mono); font-size: 10px;
    padding: 2px 8px; border-radius: 999px;
}

/* Line-item footer (subtotal / tax / total) */
.li-foot {
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding: 14px 18px;
    gap: 10px 20px;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    justify-content: end;
}
.li-foot > div { display: contents; }
.li-foot .ft-label {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
    text-align: right; grid-column: 2;
}
.li-foot .ft-val {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    text-align: right; min-width: 100px; grid-column: 3;
}
.li-foot .grand .ft-label { color: var(--ink); font-weight: 500; }
.li-foot .grand .ft-val { font-weight: 600; font-size: 15px; }

/* Activity timeline */
.history {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
}
.hrow {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px dashed var(--line);
    position: relative;
    text-decoration: none; color: inherit;
}
.hrow:first-child { border-top: 0; padding-top: 2px; }
.hrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line-strong);
    margin-top: 6px;
}
.hrow.latest .dot {
    background: var(--positive, #3a6a3f);
    box-shadow: 0 0 0 3px var(--positive-soft, #e3ecdd);
}
.hrow:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 3.5px; top: 18px; bottom: -10px;
    width: 1px; background: var(--line);
}
.hrow .txt { font-size: 13px; color: var(--ink); }
.hrow .txt strong { font-weight: 500; }
.hrow .txt small {
    display: block; font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-3); margin-top: 2px; letter-spacing: 0.02em;
}
.hrow .when {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4);
    letter-spacing: 0.04em; white-space: nowrap;
}
.related-row:hover { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.related-list .hrow .when {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    color: var(--ink-2); font-size: 11px;
}

/* Danger zone */
.danger-zone {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; margin-top: 20px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
    gap: 12px; flex-wrap: wrap;
}
.danger-zone .dz-txt { font-size: 13px; color: var(--ink-2); }
.danger-zone .dz-txt strong { color: var(--ink); font-weight: 500; }
.danger-zone .dz-actions { display: flex; gap: 8px; }
.btn-destructive {
    font-size: 12.5px; color: var(--danger);
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
    background: var(--surface); cursor: pointer;
    font-family: inherit;
}
.btn-destructive:hover { background: var(--danger-soft); }

/* Preview card body + link variants */
.preview-body {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--surface-2) 100%, transparent) 0 12px,
            var(--surface) 12px 24px);
    padding: 20px;
    min-height: 240px;
    display: grid;
    place-items: center;
}
.preview-body .file-preview-link,
.preview-body .receipt-image {
    max-width: 100%;
}
/* Email iframes fill the body edge-to-edge and hide the stripes behind them */
.preview-body:has(> .email-archive-frame) {
    padding: 0;
    background: var(--surface);
}
.preview-body > .email-archive-frame { width: 100%; height: 420px; }
.preview-head .ph-right a,
.preview-head .ph-right button {
    color: var(--ink-2); padding: 3px 6px; border-radius: 4px;
    text-decoration: none;
}
.preview-head .ph-right a:hover,
.preview-head .ph-right button:hover { background: var(--surface-3); color: var(--ink); }
.preview-foot a {
    flex: 1; font-family: var(--font-mono); font-size: 10.5px;
    padding: 6px 8px; border-radius: 6px; color: var(--ink-2);
    letter-spacing: 0.04em; text-transform: uppercase;
    text-align: center; text-decoration: none;
}
.preview-foot a:hover { background: var(--surface-3); color: var(--ink); }

/* OCR collapsible */
.ocr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.ocr summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3);
}
.ocr summary::-webkit-details-marker { display: none; }
.ocr summary::after { content: "+"; font-size: 16px; color: var(--ink-3); }
.ocr[open] summary::after { content: "−"; }
.ocr .ocr-body {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11.5px; color: var(--ink-2);
    line-height: 1.6;
    max-height: 240px; overflow: auto;
    white-space: pre-wrap;
}

/* Tighter columns on narrow viewports */
@media (max-width: 900px) {
    .li-head, .li-row-top {
        grid-template-columns: minmax(0, 1fr) 48px 90px 90px;
        gap: 6px 10px; padding: 10px 14px;
    }
    .li-expand { padding-left: 18px; }
}

/* Mobile: stack item/amount on top, qty/unit price below */
@media (max-width: 600px) {
    .li-head { display: none; }
    .li-row-top {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        padding: 12px 14px;
        align-items: baseline;
    }
    .li-row-top > .item   { grid-column: 1; grid-row: 1; }
    .li-row-top > .amount { grid-column: 2; grid-row: 1; align-self: start; font-weight: 500; }
    .li-row-top > .qty    { grid-column: 1; grid-row: 2; padding-left: 18px; font-size: 11.5px; }
    .li-row-top > .price  { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--ink-3); }
    .li-row-top > .li-chips { grid-column: 1 / -1; grid-row: 3; }
    .li-row-top > .qty::before {
        content: "Qty ";
        color: var(--ink-4); font-family: var(--font-mono);
        text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px;
    }
    .li-expand { padding: 0 14px 14px 28px; }
    .li-foot { padding: 12px 14px; }
    .tag-editor { flex-direction: column; gap: 8px; }
    .tag-editor .te-label { padding-top: 0; min-width: 0; }
}


/* ═══════════════════════════════════════════════════════
   Search
   ═══════════════════════════════════════════════════════ */

.search-form { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; align-items: center; }
.search-form input[type="search"] { flex: 1; padding: 0.6rem 0.85rem; font-size: 0.95rem; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
/* Search spinner: keep it in flow so the input width stays stable */
.search-spinner {
    font-size: 0.82rem; color: var(--muted);
    display: inline !important; /* always in flow */
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    pointer-events: none;
}
.search-spinner.htmx-request,
.htmx-request .search-spinner { opacity: 1; }

/* Search results: reserve space and fade between swaps so layout doesn't jump */
#search-results {
    min-height: 240px;
    transition: opacity 120ms ease;
}
#search-results.htmx-swapping,
#search-results.htmx-settling { opacity: 0; }
.search-result-count {
    color: var(--muted); font-size: 0.875rem;
    margin: 0 0 0.75rem; padding: 0;
    font-family: var(--font-mono); letter-spacing: 0.04em;
}
.search-page .empty-state { padding: 0; margin: 0 0 0.75rem; }

/* Per-result match context: which field matched + highlighted snippet */
.search-match {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}
.search-match-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
    margin-right: 6px;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    vertical-align: 1px;
}
.search-match-snippet { color: var(--ink-2); }
.search-match-snippet mark {
    background: var(--accent-soft, #dfe3d6);
    color: var(--accent);
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   Categories
   ═══════════════════════════════════════════════════════ */

.page-explainer { font-size: 0.875rem; color: var(--ink-3); margin: 6px 0 0; }
.page-sub-docs {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--ink-3); text-decoration: none; white-space: nowrap;
    transition: color .12s ease;
}
.page-sub-docs:hover { color: var(--ink); }
.page-sub-docs svg { flex-shrink: 0; }

/* Page heroes — eyebrow + title + lede on the left, actions bottom-aligned on the right */
.cat-hero,
.tp-hero,
.dup-hero,
.upload-hero,
.search-hero { align-items: flex-end; }

/* Stat rail */
.cat-stat-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.cat-stat {
    padding: 1.1rem 1.25rem;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cat-stat:last-child { border-right: none; }
.cat-s-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}
.cat-s-val {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.cat-s-val--name { font-size: 1.15rem; letter-spacing: -0.01em; }
.cat-s-ccy {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    vertical-align: middle;
    margin-right: 1px;
}
.cat-s-cents {
    font-size: 0.85rem;
    color: var(--ink-3);
    letter-spacing: 0;
}
.cat-s-meta {
    font-size: 0.72rem;
    color: var(--ink-3);
    margin-top: 2px;
}
.cat-s-link { color: var(--accent); text-decoration: none; }
.cat-s-link:hover { text-decoration: underline; }

/* Toolbar */
.cat-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cat-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

.cat-search {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 10px;
    height: 32px;
}
.cat-search svg { color: var(--ink-4); flex-shrink: 0; }
.cat-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    color: var(--ink);
    outline: none;
}
.cat-search input::placeholder { color: var(--ink-4); }
.cat-seg {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    height: 32px;
}
.cat-seg-cap {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
    padding: 0 8px 0 10px;
    border-right: 1px solid var(--line);
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.cat-seg-btn {
    padding: 0 11px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--ink-3);
    text-decoration: none;
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.cat-seg-btn:last-child { border-right: none; }
.cat-seg-btn:hover { background: var(--surface-2); color: var(--ink); }
.cat-seg-btn.on { background: var(--accent); color: #fff; font-weight: 500; }

/* Column header */
.cat-col-head {
    display: grid;
    grid-template-columns: 20px 1fr 68px 80px 68px 100px 62px;
    align-items: center;
    gap: 0 8px;
    padding: 0 10px 4px;
    margin-bottom: 0;
}
.cat-col-head > * {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}

/* Group heading */
.cat-g-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px 5px;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
}
.cat-g-head:first-child { border-top: none; margin-top: 0; }
.cat-g-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
}
.cat-g-meta {
    font-size: 0.72rem;
    color: var(--ink-4);
    flex: 1;
}
.cat-g-sum {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    flex-shrink: 0;
}

/* Category row */
.cat-row-new {
    display: grid;
    grid-template-columns: 20px 1fr 68px 80px 68px 100px 62px;
    align-items: center;
    gap: 0 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    transition: background 0.1s;
    position: relative;
}
.cat-row-new:first-of-type { border-top: none; }
.cat-row-new:hover { background: color-mix(in oklab, var(--cat, var(--accent)) 4%, var(--surface)); }
.cat-row-new.cat-row-expanded { background: color-mix(in oklab, var(--cat, var(--accent)) 5%, var(--bg)); }

/* Span full row for edit panel */
.cat-edit-panel { grid-column: 1 / -1; display: none; }
.cat-row-expanded .cat-edit-panel { display: block; }

.cat-drag {
    font-size: 10px;
    color: var(--ink-4);
    cursor: grab;
    user-select: none;
    letter-spacing: -1px;
    opacity: 0;
    transition: opacity 0.1s;
}
.cat-row-new:hover .cat-drag { opacity: 1; }

/* Name cell */
.cat-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.cat-color-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cat, var(--ink-3));
}
.cat-name-body { min-width: 0; }
.cat-n {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.cat-n-link { text-decoration: none; }
.cat-n-link:hover { color: var(--accent); text-decoration: underline; }
/* Stretched-link: the whole row is tappable, with the edit toggle and the
   inline edit panel layered above so they keep their own click targets. */
.cat-row-new .cat-n-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cat-row-new .cat-row-action,
.cat-row-new .cat-row-del,
.cat-row-new .cat-drag,
.cat-row-new .cat-edit-panel { position: relative; z-index: 2; }
.cat-desc-text {
    font-size: 0.72rem;
    color: var(--ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Tax chip */
.cat-tax-slot { display: flex; align-items: center; }
.cat-tax-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px 2px 5px;
    border-radius: 99px;
    background: color-mix(in oklab, var(--positive) 12%, transparent);
    color: var(--positive);
    border: 1px solid color-mix(in oklab, var(--positive) 25%, transparent);
}
.cat-tax-chip svg { width: 9px; height: 9px; }
.cat-tax-empty { color: var(--ink-4); font-size: 0.8rem; }

/* Sparkline */
.cat-spark-cell { display: flex; align-items: flex-end; height: 28px; }
.cat-spark {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 28px;
}
.cat-spark-bar {
    display: inline-block;
    width: 4px;
    min-height: 1px;
    border-radius: 1px 1px 0 0;
    background: color-mix(in oklab, var(--cat, var(--accent)) 40%, var(--line));
    flex-shrink: 0;
}
.cat-spark-bar.now {
    background: var(--cat, var(--accent));
}

/* Receipt count cell */
.cat-rcpt-cell { display: flex; flex-direction: column; gap: 1px; }
.cat-rcpt-n {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
}
.cat-rcpt-sub {
    font-size: 0.68rem;
    color: var(--ink-4);
}

/* Amount cell */
.cat-amt-cell { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.cat-amt-n {
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--ink);
}
.cat-amt-n--empty { color: var(--ink-4); }
.cat-amt-sub {
    font-size: 0.68rem;
    color: var(--ink-4);
}

/* Row actions cell (delete + ⋯) */
.cat-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
.cat-row-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-4);
    border-radius: var(--radius);
    opacity: 0;
    transition: background 0.1s, color 0.1s, opacity 0.1s;
}
.cat-row-del svg { display: block; }
.cat-row-new:hover .cat-row-del,
.cat-row-del:focus-visible { opacity: 1; }
@media (hover: none) {
    .cat-row-del { opacity: 1; }
}
.cat-row-del:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, transparent); }

/* Row action button (⋯) */
.cat-row-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.9rem;
    color: var(--ink-4);
    border-radius: var(--radius);
    transition: background 0.1s, color 0.1s;
    line-height: 1;
}
.cat-row-action:hover { background: var(--surface-2); color: var(--ink); }

/* Inline edit panel */
.cat-edit-panel {
    border-top: 1px dashed var(--line);
    padding: 14px 10px 10px;
    margin-top: 4px;
}
.cat-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
.cat-edit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.cat-edit-field label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}
.cat-edit-opt { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ink-4); }
.cat-edit-field input[type="text"],
.cat-edit-field textarea {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--bg);
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.1s, box-shadow 0.1s;
}
.cat-edit-field input[type="text"]:focus,
.cat-edit-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}
.cat-edit-field textarea { min-height: 56px; }

/* Hue picker */
.cat-hue-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cat-hue-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch, #888);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s, border-color 0.1s;
    flex-shrink: 0;
}
.cat-hue-chip:hover { transform: scale(1.2); }
.cat-hue-chip.on {
    border-color: var(--ink);
    transform: scale(1.1);
}

/* Toggle switches */
.cat-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}
.cat-toggle-row:last-child { border-bottom: none; }
.cat-toggle-row--disabled { opacity: 0.45; pointer-events: none; }
.cat-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    border-radius: 99px;
    background: var(--line-strong);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.2s;
}
.cat-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
}
.cat-toggle.on { background: var(--accent); }
.cat-toggle.on::after { left: 14px; }
/* input[type="checkbox"] elsewhere sets display:inline at equal-or-higher
   specificity, so qualify with the element to keep the native box hidden */
input.cat-toggle-native { display: none; }
.cat-toggle-label { flex: 1; min-width: 0; }
.cat-tl-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink);
    display: block;
}
.cat-tl-sub {
    font-size: 0.7rem;
    color: var(--ink-4);
    display: block;
    margin-top: 1px;
}

/* Edit panel footer */
.cat-edit-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.cat-edit-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--ink-4);
    padding: 4px 6px;
    border-radius: var(--radius);
    transition: color 0.1s, background 0.1s;
}
.cat-edit-delete svg { display: block; flex-shrink: 0; }
.cat-edit-delete:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, transparent); }
/* Add form */
.cat-add-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem 1.1rem;
    margin-bottom: 1rem;
}
.cat-add-form-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.75rem;
}
.cat-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px 12px;
    align-items: end;
}
.cat-field { display: flex; flex-direction: column; gap: 5px; }
.cat-field--check { justify-content: flex-end; padding-bottom: 2px; }
.cat-field-label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}
.cat-field-opt { font-style: italic; text-transform: none; letter-spacing: 0; }
.cat-field-input {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--bg);
    outline: none;
    font-family: inherit;
    transition: border-color 0.1s, box-shadow 0.1s;
}
.cat-field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}
.cat-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--ink-3);
}
.cat-check-label input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }
.cat-add-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* Add row (dashed button at bottom) */
.cat-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    background: none;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--ink-4);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-align: left;
}
.cat-add-row:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.cat-add-plus { font-size: 1rem; line-height: 1; }
.cat-add-hint { margin-left: auto; font-size: 0.72rem; color: var(--ink-4); }
.cat-add-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    background: var(--bg);
}
.btn-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.8;
    margin-left: 4px;
}

/* Empty state */
.empty-well {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.88rem;
}

@media (max-width: 900px) {
    .cat-stat-rail { grid-template-columns: 1fr 1fr; }
    .cat-stat:nth-child(2) { border-right: none; }
    .cat-stat:nth-child(3) { border-top: 1px solid var(--line); }
    .cat-stat:nth-child(4) { border-top: 1px solid var(--line); border-right: none; }
    .cat-col-head,
    .cat-row-new { grid-template-columns: 20px 1fr 68px 80px 68px 62px; }
    .cat-row-new > .cat-amt-cell { display: none; }
    .cat-col-head > *:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
    .cat-stat-rail { grid-template-columns: 1fr 1fr; }
    .cat-col-head,
    .cat-row-new { grid-template-columns: 1fr 68px 68px 62px; }
    .cat-drag { display: none; }
    .cat-col-head > *:nth-child(1) { display: none; }
    .cat-spark-cell, .cat-col-head > *:nth-child(4) { display: none; }
    .cat-amt-cell { display: none; }
    .cat-col-head > *:nth-child(6) { display: none; }
    .cat-add-grid { grid-template-columns: 1fr; }
    .cat-edit-grid { grid-template-columns: 1fr; }
    .cat-toolbar { flex-direction: column; align-items: stretch; }
    .cat-seg { width: 100%; }
}

/* Group header actions (custom grouping) */
.cat-g-head--custom { align-items: center; }
.cat-g-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.cat-g-sum { margin-left: 0; }
.cat-g-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink-4);
    transition: background 0.1s, color 0.1s;
}
.cat-g-btn:hover { background: var(--surface-2); color: var(--ink); }
.cat-g-btn--delete:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, transparent); }
.cat-g-label--edit { cursor: default; }
.cat-g-rename-form:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.cat-g-rename-input {
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--bg);
    outline: none;
    flex: 1;
    max-width: 220px;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}
/* Group picker in edit panel */
.cat-group-sel {
    flex: 1;
    max-width: 180px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 0.78rem;
    color: var(--ink);
    outline: none;
}
.cat-group-sel:focus { border-color: var(--accent); }

/* Custom groups hint strip */
.cat-custom-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 12px;
    background: color-mix(in oklab, var(--accent) 6%, var(--surface));
    border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: var(--ink-3);
    margin-bottom: 10px;
    line-height: 1.5;
}
.cat-custom-hint svg { color: var(--accent); }

/* Custom groups empty state */
.cat-groups-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2.5rem 1.5rem;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-top: 8px;
}
.cat-groups-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 8%, var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 4px;
}
.cat-groups-empty-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
.cat-groups-empty-sub {
    font-size: 0.8rem;
    color: var(--ink-3);
    margin: 0;
    max-width: 320px;
}

/* FY picker in hero */
/* Merge page */
.merge-section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
    margin-bottom: 8px;
}
.merge-section-hint { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ink-4); }
.merge-cat-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}
.merge-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.1s;
}
.merge-cat-row:last-child { border-bottom: none; }
.merge-cat-row:hover { background: var(--surface-2); }
.merge-cat-row input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.merge-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.merge-cat-name { font-size: 0.85rem; color: var(--ink); }
.merge-target-sel {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 0.85rem;
    color: var(--ink);
    outline: none;
}
.merge-target-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent); }


/* ═══════════════════════════════════════════════════════
   History / Audit Trail
   ═══════════════════════════════════════════════════════ */

.history-list { list-style: none; }
.history-entry { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: var(--surface); box-shadow: var(--shadow-xs); }
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.history-op { font-weight: 700; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.12rem 0.5rem; border-radius: 99px; }
.history-INSERT .history-op { background: var(--success-bg); color: var(--success-fg); }
.history-UPDATE .history-op { background: var(--blue-50); color: var(--blue-600); }
.history-DELETE .history-op { background: var(--error-bg); color: var(--error-fg); }
.history-header time { color: var(--muted); font-size: 0.78rem; }
.history-diff { margin-top: 0.25rem; width: 100%; table-layout: fixed; }
.history-diff col.col-field { width: 20%; }
.history-diff col.col-before, .history-diff col.col-after { width: 40%; }
.history-diff thead th, .history-diff tbody td { vertical-align: top; word-break: break-word; }
.history-diff .history-field { font-weight: 600; text-transform: capitalize; }
.history-old { color: var(--danger); text-decoration: line-through; opacity: 0.75; }
.history-new { color: var(--success-fg); }
.history-note { color: var(--muted); font-size: 0.875rem; }

/* ── Unified history timeline ── */
.htl-list { list-style: none; padding: 0; }
.htl-entry { display: flex; gap: 0; position: relative; }
.htl-entry:last-child .htl-line { display: none; }

.htl-dot-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 2rem; margin-right: 0.875rem; padding-top: 0.125rem; }
.htl-dot {
    width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--border);
    background: var(--stone-300);
}
.htl-INSERT .htl-dot  { background: var(--success-fg); box-shadow: 0 0 0 2px #bbf7d0; }
.htl-DELETE .htl-dot  { background: var(--danger); box-shadow: 0 0 0 2px #fecaca; }
.htl-UPDATE .htl-dot  { background: var(--blue-600); box-shadow: 0 0 0 2px #bfdbfe; }
.htl-item .htl-dot    { border-style: dashed; }
.htl-line { flex: 1; width: 1px; background: var(--border); min-height: 1.25rem; margin: 0.25rem 0; }

.htl-body { flex: 1; min-width: 0; padding-bottom: 1.25rem; }
.htl-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.htl-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.htl-subject { font-weight: 600; font-size: 0.875rem; color: var(--stone-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htl-time { color: var(--muted); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.htl-kind-badge {
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: 9999px; flex-shrink: 0;
}
.htl-kind-receipt { background: var(--stone-100); color: var(--stone-500); }
.htl-kind-item    { background: #ede9fe; color: #5b21b6; }

.htl-op { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 99px; flex-shrink: 0; }
.htl-op-insert { background: var(--success-bg); color: var(--success-fg); }
.htl-op-update { background: #dbeafe; color: var(--blue-600); }
.htl-op-delete { background: var(--error-bg); color: var(--error-fg); }
.htl-actor { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 99px; flex-shrink: 0; border: 1px solid var(--line-strong); color: var(--ink-3); }
.htl-actor-user { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }

/* Actor-aware presentation: automatic (system) entries recede so manual
   edits stand out; the checkbox filter hides them entirely (pure CSS). */
.htl-entry.htl-by-system .htl-body { opacity: 0.65; }
.htl-entry.htl-by-system .htl-dot { background: var(--stone-300); box-shadow: 0 0 0 2px var(--border); }
.htl-filter {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 16px; cursor: pointer; user-select: none;
}
.htl-filter input[type="checkbox"] { accent-color: var(--accent); width: 13px; height: 13px; }
.htl-filter:hover { color: var(--ink); }
.history-page:has(#htl-hide-system:checked) .htl-entry.htl-by-system { display: none; }

.htl-diff { margin-top: 0.375rem; width: 100%; table-layout: fixed; font-size: 0.8125rem; }
.htl-diff col.col-field  { width: 22%; }
.htl-diff col.col-before { width: 39%; }
.htl-diff col.col-after  { width: 39%; }
.htl-diff thead th { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 0.25rem; }
.htl-diff tbody td { vertical-align: top; word-break: break-word; padding: 0.125rem 0; }
.htl-note { color: var(--muted); font-size: 0.875rem; margin: 0; }


/* ═══════════════════════════════════════════════════════
   Settings / Ingest
   ═══════════════════════════════════════════════════════ */

.ingest-card { margin-bottom: 1.5rem; border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-width: 2px; }
.ingest-card-header { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 0.75rem; }
.ingest-card-header svg { flex-shrink: 0; color: var(--accent); margin-top: 0.15rem; }
.ingest-card-header h2 { margin-bottom: 0.15rem; }
.ingest-card-header p { color: var(--muted); font-size: 0.875rem; margin: 0; }
.ingest-email-box { display: flex; align-items: center; gap: 0.75rem; background: var(--stone-50); padding: 0.75rem 1rem; border-radius: var(--radius); margin: 1rem 0; border: 1px solid var(--border); }
.ingest-email-box code { font-size: 0.95rem; font-weight: 700; color: var(--accent); word-break: break-all; flex: 1; }
.settings-section { margin-bottom: 1.5rem; }
.settings-section h2 { margin-top: 0; margin-bottom: 0.85rem; }
.settings-dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1rem; }
.settings-dl dt { font-weight: 700; color: var(--stone-400); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; padding-top: 0.1rem; }
.settings-dl dd { font-size: 0.875rem; }
.gmail-connect-card { max-width: 48rem; }
.gmail-connect-card h1 { margin: 0 0 0.25rem; }

/* ── Settings page ("sources, then account") ─────────────────── */

.sp { max-width: 880px; }
.sp section, .sp .sp-section { scroll-margin-top: 24px; }

.sp-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sp-head h1 { margin: 8px 0 10px; }
.sp-lede { color: var(--ink-2); margin: 0; max-width: 52ch; font-size: 0.9rem; }
.sp-anchors { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.sp-anchors a {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); text-decoration: none; padding-bottom: 2px; border-bottom: 1px dashed var(--line-strong);
}
.sp-anchors a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.sp-deletion-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 22px; padding: 12px 16px; border-radius: var(--radius);
    border: 1px dashed color-mix(in srgb, var(--danger) 40%, var(--line-strong));
    background: color-mix(in srgb, var(--danger-soft) 40%, var(--bg));
    font-size: 0.85rem; color: var(--ink-2);
}
.sp-deletion-notice form { margin: 0; }

.sp-section { padding-top: 40px; }
.sp-section-sub { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-2); margin: 4px 0 16px; }

/* Sources ledger */
.sp-ledger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sp-ledger-hd, .sp-src-row {
    display: grid; grid-template-columns: 40px 1.3fr 128px 1fr 32px; gap: 12px; align-items: center;
    padding: 12px 16px;
}
.sp-ledger-hd {
    padding: 9px 16px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4);
}
.sp-src-row { border-bottom: 1px dashed var(--line); transition: background 100ms ease; }
.sp-src-row:last-child { border-bottom: none; }
.sp-src-row:hover { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.sp-src-icn {
    width: 32px; height: 32px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.sp-src-name { min-width: 0; }
.sp-src-name .n { font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-src-name .meta {
    display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em;
    margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-src-act { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.45; }
.sp-src-act small { display: block; color: var(--ink-4); font-size: 10.5px; }
.sp-src-status { min-width: 0; }
.sp-src-status .email-conn-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; }
.sp-src-status .status { white-space: nowrap; flex: 0 0 auto; }
.sp-src-status .email-conn-status-copy {
    min-width: 0; flex: 1 1 12rem; white-space: normal; overflow-wrap: anywhere;
    line-height: 1.45; color: var(--ink-3); font-size: 0.74rem;
}
.sp-fwd-token {
    font-family: var(--font-mono); font-size: 11px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; overflow-wrap: anywhere;
}
.sp-copy-chip {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px;
    padding: 1px 8px; color: var(--ink-2); cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.sp-copy-chip:hover { background: var(--surface-2); color: var(--ink); }

.sp-src-go {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-3); text-decoration: none; font-size: 14px;
}
.sp-src-go:hover { background: var(--surface-2); color: var(--ink); }

/* No-JS overflow menu */
.sp-src-menu { position: relative; }
.sp-src-menu summary {
    list-style: none; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 15px; letter-spacing: 1px; user-select: none;
}
.sp-src-menu summary::-webkit-details-marker { display: none; }
.sp-src-menu summary:hover, .sp-src-menu[open] summary { background: var(--surface-2); color: var(--ink); }
.sp-src-menu-pop {
    position: absolute; right: 0; top: 30px; z-index: 30; min-width: 150px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.sp-src-menu-pop a, .sp-src-menu-pop button {
    display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: none;
    font-size: 0.8rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 6px; cursor: pointer;
}
.sp-src-menu-pop a:hover, .sp-src-menu-pop button:hover { background: var(--surface-2); color: var(--ink); }
.sp-src-menu-pop .sp-menu-danger { color: var(--danger); }
.sp-src-menu-pop .sp-menu-danger:hover { background: var(--danger-soft); color: var(--danger); }
.sp-src-menu-pop form { margin: 0; }

.sp-connect-rail {
    margin-top: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sp-connect-rail .cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sp-prov {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px;
    padding: 5px 13px; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.sp-prov:hover { background: var(--surface-2); color: var(--ink); }
.sp-rail-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); flex-basis: 100%; margin: 2px 0 0; }
.sp-rail-note a { color: var(--ink-3); }

/* Usage */
.sp-usage { padding: 18px 20px 20px; }
.sp-usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-usage-n { font-family: var(--font-display); font-weight: 500; font-size: 42px; line-height: 1; letter-spacing: -0.018em; }
.sp-usage-n .of { font-size: 20px; color: var(--ink-4); font-style: italic; }
.sp-usage-n small { display: block; font-family: var(--font-mono); font-style: normal; font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 7px; }
.sp-usage-bill { text-align: right; font-size: 0.82rem; color: var(--ink-2); }
.sp-usage-bill .plan { font-family: var(--font-display); font-style: italic; font-size: 1rem; display: block; margin-bottom: 3px; }
.sp-usage-bill a { font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.sp-usage-bill a:hover { border-bottom-color: var(--accent); }
.sp-day-strip { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sp-day { padding: 9px 6px 11px; text-align: center; border-right: 1px solid var(--line); background: var(--surface); }
.sp-day:last-child { border-right: none; }
.sp-day .dl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.sp-day .dv { display: block; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sp-day .du { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.sp-day--zero .dv { color: var(--ink-4); }
.sp-day--today { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }
.sp-quota-meter { margin-top: 14px; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sp-quota-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sp-quota-meter--full i { background: var(--danger); }
.sp-usage-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); flex-wrap: wrap; }

/* Preference / security ledgers */
.sp-form { padding: 0; }
.sp-f-row {
    display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start;
    padding: 15px 20px; border-bottom: 1px dashed var(--line);
}
.sp-f-row:last-child { border-bottom: none; }
.sp-f-label { padding-top: 6px; }
.sp-f-label .l {
    display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 0;
}
.sp-f-label .h { font-size: 0.75rem; color: var(--ink-4); margin-top: 3px; line-height: 1.4; }
.sp-f-ctl input, .sp-f-ctl select { max-width: 380px; }
.sp-f-static { padding-top: 6px; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-f-static .mono { font-family: var(--font-mono); font-size: 0.78rem; }
.sp-f-static small { flex-basis: 100%; color: var(--ink-4); font-size: 0.75rem; }
.sp-f-static form.sp-inline-form { margin: 0; }
.sp-f-actions {
    display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
    border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sp-reveal summary {
    list-style: none; display: inline-flex; cursor: pointer; user-select: none;
}
.sp-reveal summary::-webkit-details-marker { display: none; }
.sp-reveal-form { display: flex; flex-direction: column; gap: 6px; max-width: 320px; margin-top: 12px; }
.sp-reveal-form label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.sp-reveal-form button { align-self: flex-start; margin-top: 8px; }

/* Danger block */
.sp-danger {
    margin-top: 14px; border: 1px dashed color-mix(in srgb, var(--danger) 30%, var(--line-strong));
    border-radius: var(--radius); padding: 2px 20px;
    background: color-mix(in srgb, var(--danger-soft) 18%, var(--bg));
}
.sp-d-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.sp-d-row:last-child { border-bottom: none; }
.sp-d-row b { font-size: 0.85rem; font-weight: 600; display: block; }
.sp-d-row p { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-3); max-width: 56ch; }
.sp-d-row form { margin: 0; }
.sp-d-note { font-size: 0.78rem; color: var(--ink-3); margin: 0; }
.sp-d-note a { color: var(--accent); }

@media (max-width: 860px) {
    .sp-ledger-hd { display: none; }
    .sp-src-row { grid-template-columns: 40px 1fr 32px; }
    .sp-src-row .sp-src-icn { grid-row: 1 / span 2; align-self: start; }
    .sp-src-act, .sp-src-status { grid-column: 2; }
    .sp-f-row { grid-template-columns: 1fr; gap: 8px; }
    .sp-f-label { padding-top: 0; }
    .sp-day .dv { font-size: 17px; }
    .sp-usage-bill { text-align: left; }
    .sp-d-row { grid-template-columns: 1fr; }
}
.gmail-connect-form { margin-top: 1rem; }
.gmail-scope-list { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.gmail-scope-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
}
.gmail-scope-option input[type="radio"] { margin-top: 0.2rem; }
.gmail-scope-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.gmail-scope-copy strong { font-size: 0.95rem; }
.gmail-scope-copy small { color: var(--muted); font-size: 0.8rem; }
.gmail-custom-date { max-width: 16rem; margin-bottom: 1rem; }
.gmail-custom-date p { margin: 0.35rem 0 0; font-size: 0.8rem; }
.gmail-connect-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
/* Gmail import review — range picker as a numeral strip (echoes .sp-day-strip) */
.gcr { max-width: 640px; }
.gcr-form { margin: 0; }
.gcr-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gcr-opt {
    position: relative; display: block; padding: 16px 14px 14px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color 120ms ease;
}
label.gcr-opt { cursor: pointer; }
label.gcr-opt:hover { border-color: var(--line-strong); }
.gcr-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gcr-opt:has(input:checked) { outline: 2px solid var(--ink); outline-offset: -2px; }
.gcr-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-glow); }
.gcr-opt .status { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); border: 1px solid var(--line-strong); background: var(--surface); }
.gcr-opt .dl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.gcr-opt .dv { display: block; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.gcr-opt .du { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.gcr-opt .dh { display: block; font-size: 0.75rem; color: var(--ink-3); line-height: 1.4; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.gcr-strip--pending .dv { color: var(--ink-4); animation: gcr-pulse 1.6s ease-in-out infinite; }
@keyframes gcr-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .gcr-strip--pending .dv { animation: none; } }
.gcr-foot { margin-top: 10px; }
.gcr-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.gcr .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
    .gcr-strip { grid-template-columns: 1fr; gap: 12px; }
    .gcr-opt .status { left: auto; right: 12px; transform: none; }
}
/* IMAP connect/edit — settings-language field ledger + folder picker */
.icx-notes {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: 14px 18px 12px; margin-bottom: 22px;
}
.icx-notes .cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.icx-notes ul { margin: 8px 0 0; padding-left: 17px; }
.icx-notes li { font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 6px; }
.icx-notes-doc { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.icx-notes-doc a { color: var(--ink-3); }
.icx .sp-f-ctl textarea { max-width: 380px; }
.icx-f-row--folders .sp-f-ctl { min-width: 0; }
.imap-folder-picker { display: grid; gap: 10px; }
.imap-folder-picker-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.icx-picker-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.imap-folder-browser {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
    max-height: 320px;
    overflow-y: auto;
}
.imap-folder-browser-summary {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--line);
}
.imap-folder-browser .flash { margin-bottom: 0; }
.imap-folder-browser-empty strong { display: block; margin-bottom: 3px; font-size: 0.85rem; font-weight: 500; }
.imap-folder-browser-empty p { margin: 0; color: var(--ink-3); font-size: 0.78rem; line-height: 1.5; max-width: 48ch; }
.imap-folder-tree { list-style: none; margin: 0; padding: 0; }
.imap-folder-tree .imap-folder-tree {
    margin-left: 9px;
    padding-left: 14px;
    border-left: 1px dashed var(--line);
}
.imap-folder-node {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 3px 0;
    font-size: 0.84rem;
    color: var(--ink);
    cursor: pointer;
}
.imap-folder-node:hover { color: var(--accent); }
.imap-folder-node input[type="checkbox"] { accent-color: var(--accent); }
.imap-folder-node small {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) { .icx-notes { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════
   Onboarding
   ═══════════════════════════════════════════════════════ */

.onboarding-card { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; }
.getting-started { margin-bottom: 1.5rem; }
.gs-list { list-style: none; padding-left: 0; }
.gs-list li { display: flex; gap: 0.65rem; align-items: flex-start; }
.gs-check { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 0.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.gs-done .gs-check { background: var(--positive); border-color: var(--positive); color: #fff; }
.gs-done strong { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.gs-skip-form { display: inline; margin: 0; }
.gs-skip-form .btn-link { font-size: 12px; }

/* Trial countdown banner */
.trial-banner { padding: 0.5rem 1.25rem; font-size: 0.8125rem; text-align: center; background: var(--accent-soft); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.trial-banner a { color: var(--accent); font-weight: 500; }
.trial-banner-urgent { background: var(--warn-soft); }
.trial-banner-urgent a { color: var(--warn); }
.onboarding-card h2 { margin-top: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); }
.onboarding-intro { color: var(--ink-3); font-size: 14px; margin-bottom: 0; }
.onboarding-list { padding-left: 1.5rem; text-align: left; display: inline-block; margin-top: 0.75rem; }
.onboarding-list li { margin-bottom: 0.875rem; font-size: 14px; color: var(--ink-2); }
.onboarding-note { color: var(--ink-3); font-size: 12px; }
.onboarding-note-link { color: var(--ink-3); }
.onboarding-note-link:hover { color: var(--accent); }
.onboarding-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ingest-email-inline { background: var(--accent-light); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; display: inline-block; margin-top: 0.25rem; color: var(--accent); font-weight: 600; }


/* ═══════════════════════════════════════════════════════
   Tags
   ═══════════════════════════════════════════════════════ */

.tags-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tag { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--accent-light); color: var(--accent); padding: 0.12rem 0.45rem; border-radius: 99px; font-size: 0.7rem; font-weight: 600; transition: background var(--transition); }
.tag:hover { background: var(--accent-soft); }
.tag-remove-form { display: inline-flex; margin: 0; }
.tag-remove { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 0.85rem; padding: 0 0.1rem; line-height: 1; opacity: 0.6; transition: opacity var(--transition); }
.tag-remove:hover { opacity: 1; color: var(--danger); }
.tag-add-form { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.line-item-delete-fallback { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--danger); }
.line-item-no-js-add { display: none; }
.tag-input { border: 1px solid transparent; background: transparent; padding: 0.15rem 0.4rem; font-size: 0.78rem; width: 7.5rem; min-height: 2rem; border-radius: var(--radius-sm); transition: all var(--transition); }
.tag-input:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.tag-add-btn { white-space: nowrap; }
.tag-small { font-size: 0.65rem; padding: 0.08rem 0.35rem; text-decoration: none; }
.tags-cell { max-width: 180px; }
.tags-cell .tag { margin: 0.1rem; }
.tags-cell .tag {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
    padding: 2px 7px; border-radius: 4px;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line);
}
.tags-cell .tag:hover { background: var(--surface-3); color: var(--ink); }
.bulk-tag-input { width: 110px; padding: 0.28rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.78rem; background: var(--surface); }
.item-tags-cell { min-width: 120px; }
.item-tags-cell .tag { margin: 0.1rem; }
.tag-input-sm { width: 50px; padding: 0.15rem 0.3rem; font-size: 0.7rem; }
.tags-page .tag-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.tags-page .inline-form { display: flex; gap: 0.25rem; align-items: center; }
.tags-page .tag-input { width: 100px; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; background: var(--surface); }


/* ═══════════════════════════════════════════════════════
   Duplicate Warning
   ═══════════════════════════════════════════════════════ */

.duplicate-warning { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--warning-bg); color: var(--warning-fg); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--amber-400); }
.duplicate-warning svg { flex-shrink: 0; margin-top: 0.1rem; }
.duplicate-warning a { color: var(--warning-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dupe-warning-content { flex: 1; }
.dupe-warning-item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; }
.dupe-warning-item:first-child { margin-top: 0.5rem; }
.dupe-warning-item a { flex: 1; min-width: 0; }
.dupe-warning-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dupe-warning-actions .btn-small { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.dupe-card { padding: 1.25rem; margin-bottom: 0.875rem; }
.dupe-card.dupe-resolved { opacity: 0.55; }

.dupe-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.dupe-card-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--stone-500);
}
.dupe-hint { font-size: 0.78rem; color: var(--muted); font-style: italic; }

.dupe-pair {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: stretch; gap: 0.75rem; margin-bottom: 1rem;
}
.dupe-vs-col { display: flex; align-items: center; justify-content: center; }
.dupe-vs {
    font-size: 0.7rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--stone-100); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.2rem 0.5rem;
}

.dupe-receipt { display: flex; flex-direction: column; gap: 0.5rem; }
.dupe-receipt-num {
    font-size: 0.625rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--stone-400);
}
.dupe-link {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.75rem 0.875rem; border-radius: var(--radius);
    background: var(--stone-50); border: 1px solid var(--border);
    text-decoration: none; color: var(--fg);
    transition: border-color var(--transition), box-shadow var(--transition);
    flex: 1;
}
.dupe-link:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.dupe-link::after {
    content: '↗ quick preview';
    font-size: 0.68rem; color: var(--accent); margin-top: 0.3rem;
    font-weight: 500;
}
.dupe-vendor { font-weight: 600; font-size: 0.925rem; color: var(--stone-900); }
.dupe-amount { font-size: 1.125rem; font-weight: 700; color: var(--stone-900); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dupe-date { font-size: 0.78rem; color: var(--stone-500); }
.dupe-source {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: var(--muted); text-transform: capitalize;
    margin-top: 0.1rem;
}
.dupe-id-label { font-size: 0.68rem; color: var(--stone-300); font-family: monospace; }

.dupe-open-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; color: var(--ink-3); text-decoration: none;
    align-self: flex-start;
}
.dupe-open-link:hover { color: var(--ink); }
.dupe-open-link svg { flex-shrink: 0; }

.dupe-trash-btn { display: flex; align-items: center; gap: 0.3rem; width: 100%; justify-content: center; }
.dupe-receipt-action { margin-top: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dupe-receipt-action .inline { display: block; }
.dupe-receipt-action .btn { display: flex; align-items: center; gap: 0.3rem; width: 100%; justify-content: center; }

.dupe-dismiss {
    padding-top: 0.75rem; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end;
}
.dupe-dismiss .btn { display: flex; align-items: center; gap: 0.35rem; }

/* ── Companion receipts (same purchase, different documents) ── */
.status-linked { background: var(--blue-50); color: var(--blue-600); }
.dupe-linked-role {
    align-self: flex-start; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--emerald-600); background: var(--emerald-50);
    border-radius: 999px; padding: 0.15rem 0.5rem;
}
.dupe-linked-role.dupe-linked-companion { color: var(--blue-600); background: var(--blue-50); }
.dupe-card.dupe-resolved .dupe-receipt-action { opacity: 1; }

.linked-dd { font-size: 0.85rem; }
.linked-dd a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.linked-item { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.linked-item + .linked-item { margin-top: 0.25rem; }
.linked-item .btn-small { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.linked-note { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--ink-3); }

.companion-flag {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--blue-600); background: var(--blue-50);
    border-radius: 999px; padding: 0.05rem 0.4rem;
}


/* ═══════════════════════════════════════════════════════
   Tax Summary
   ═══════════════════════════════════════════════════════ */

.summary-section { margin-top: 40px; }
.fy-form { display: inline-flex; align-items: center; }
.fy-wrap { position: relative; display: inline-flex; }
.fy-btn { pointer-events: none; }
.fy-chevron { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.fy-select-overlay {
    position: absolute; inset: 0; width: 100%; opacity: 0;
    cursor: pointer; appearance: none; -webkit-appearance: none;
}
.summary-cat-name { display: flex; align-items: center; gap: 8px; }
.summary-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.summary-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.summary-empty { color: var(--ink-3); margin-top: 40px; font-size: 14px; }
.summary-table tfoot th, .summary-table tfoot td { border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }

/* ── Summary stat tiles ─────────────────────────────── */
.summary-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 24px;
}
.summary-tile {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px;
}
.summary-tile-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
}
.summary-tile-value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 19px; color: var(--ink); margin-top: 8px;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.summary-tile-extra { font-size: 12.5px; color: var(--ink-2); }
.summary-tile-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.summary-tile-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 6px; }

/* ── Summary month strip proportion bar ─────────────── */
.summary-strip-wrap { margin-top: 4px; }
.summary-strip-wrap .strip .cell { cursor: pointer; }
.strip .m-bar { margin-top: auto; padding-top: 8px; }
.strip .m-bar i {
    display: block; height: 4px; border-radius: 0 2px 2px 0;
    background: color-mix(in srgb, var(--accent) 62%, var(--bg));
    min-width: 2px;
}
.strip .cell.active .m-bar i { background: color-mix(in srgb, var(--bg) 80%, transparent); }

/* ── Summary share column ───────────────────────────── */
.summary-share { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.summary-share-pct {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11.5px; color: var(--ink-3); min-width: 34px; text-align: right;
}
.summary-share-track {
    width: 110px; height: 4px; border-radius: 2px;
    background: color-mix(in srgb, var(--surface-3) 55%, transparent); overflow: hidden;
}
.summary-share-track i {
    display: block; height: 100%; border-radius: 0 2px 2px 0;
    background: color-mix(in srgb, var(--accent) 62%, var(--bg));
}
.summary-share-col { width: 170px; }
.summary-cur-chip {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    color: var(--ink-3); background: var(--surface-2);
    border-radius: 4px; padding: 2px 6px; margin-left: 8px;
}

/* ── Summary collapsed currencies ───────────────────── */
.summary-other { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.summary-other details { border-bottom: 1px solid var(--line); }
.summary-other details:last-child { border-bottom: none; }
.summary-other summary {
    list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px;
    padding: 13px 16px; font-size: 13.5px;
}
.summary-other summary::-webkit-details-marker { display: none; }
.summary-other summary:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.summary-other-code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); letter-spacing: 0.06em; }
.summary-other-name { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.summary-other-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.summary-other-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }
.summary-other-chevron { color: var(--ink-4); font-size: 10px; transition: transform .12s ease; }
.summary-other details[open] .summary-other-chevron { transform: rotate(180deg); }
.summary-other .receipt-table-wrap { margin: 0; padding: 0 16px 8px; }

/* ── AUD equivalents at ATO monthly rates ───────────── */
.summary-fx-approx {
    display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; font-weight: 400; color: var(--ink-4); white-space: nowrap;
}
.summary-tile-sub .summary-fx-approx { display: inline; }
.summary-fx-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin: 10px 2px 0; }
.summary-fx-note + .summary-fx-note { margin-top: 3px; }
.summary-fx-note.warn { color: var(--amber-600); }

/* ── Summary tag amounts (multi-currency) ───────────── */
.summary-tag-amounts { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 900px) {
    .summary-stats { grid-template-columns: 1fr; }
    .summary-share-col { width: auto; }
    .summary-share-track { display: none; }
}

/* ── WFH estimator (/summary/wfh) ───────────────────── */
.wfh-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 1.5rem; }
.wfh-method-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    padding: 16px 18px;
}
.wfh-method-card.is-best { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wfh-method-name {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); display: flex; align-items: center; gap: 8px;
}
.wfh-best-badge {
    font-size: 10px; letter-spacing: 0.05em; text-transform: none;
    color: color-mix(in srgb, var(--accent) 85%, var(--ink)); background: var(--accent-glow);
    border-radius: 4px; padding: 2px 7px;
}
.wfh-method-total {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 24px; color: var(--ink); margin: 8px 0 10px;
}
.wfh-breakdown { border-top: 1px solid var(--line); }
.wfh-breakdown > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
}
.wfh-breakdown > div > span:last-child {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.wfh-method-note { font-size: 11.5px; color: var(--ink-4); margin: 10px 0 0; line-height: 1.45; }

.wfh-details > summary {
    list-style: none; cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0;
}
.wfh-details > summary::-webkit-details-marker { display: none; }
.wfh-details > summary::before { content: '▸ '; color: var(--ink-4); font-size: 10px; }
.wfh-details[open] > summary::before { content: '▾ '; }
.wfh-details form { margin-top: 10px; }

.wfh-setup-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 12px;
}
.wfh-setup-grid label > span { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.wfh-method-choice { border: none; padding: 0; margin: 0; }
.wfh-method-choice legend { font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; padding: 0; }
.wfh-method-choice label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }
.wfh-field-note { font-size: 11.5px; color: var(--ink-4); margin: 8px 0 12px; line-height: 1.45; }

.wfh-mapping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.wfh-mapping-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.wfh-mapping-row select, .wfh-bill-select { width: auto; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
.wfh-details .receipt-table-wrap { margin: 10px 0 12px; }

/* Line-item "track as work asset" action on receipt detail */
.li-asset-action { padding-top: 10px; }
.li-asset-link { font-size: 12px; color: var(--ink-3); text-decoration: none; border-bottom: 1px dashed var(--line-strong); }
.li-asset-link:hover { color: var(--ink); }
.li-asset-link.is-tracked { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); border-bottom-style: solid; }

.wfh-asset-actions { white-space: nowrap; }
.wfh-row-details { position: relative; }
.wfh-row-details > summary { list-style: none; cursor: pointer; display: inline-block; }
.wfh-row-details > summary::-webkit-details-marker { display: none; }
.wfh-row-editor {
    /* Opens to the left of the Edit button so the buttons on other rows stay clickable */
    position: absolute; top: -8px; right: calc(100% + 8px); z-index: 30;
    width: min(520px, 86vw); text-align: left;
    white-space: normal; /* undo the nowrap inherited from .wfh-asset-actions */
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-md);
    padding: 14px 16px;
}
.wfh-setup-grid .wfh-field-note { grid-column: 1 / -1; margin: 0; }
.wfh-row-editor .inline { margin-top: 10px; }

.wfh-disclaimer {
    font-size: 11.5px; color: var(--ink-4); line-height: 1.5;
    border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2rem;
}
.wfh-disclaimer a { color: var(--ink-3); }

/* CSS-only help bubble (hover or keyboard focus) */
.wfh-help { position: relative; display: inline-flex; vertical-align: middle; }
.wfh-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--line-strong); color: var(--ink-3);
    font-family: var(--font-mono); font-size: 10px; line-height: 1;
    cursor: help; user-select: none;
}
.wfh-help:hover .wfh-help-icon, .wfh-help:focus .wfh-help-icon {
    color: var(--ink); border-color: var(--ink-3);
}
.wfh-help-tip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: -8px;
    width: max-content; max-width: min(300px, 80vw); z-index: 40;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 10px 12px;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
    text-transform: none; letter-spacing: normal; white-space: normal; text-align: left;
}
.wfh-help:hover .wfh-help-tip, .wfh-help:focus .wfh-help-tip { display: block; }
.wfh-help-tip > span { display: block; }
.wfh-help-tip > span + span { margin-top: 6px; }
.wfh-help-tip b { color: var(--ink); font-weight: 600; }
.wfh-help-tip .wfh-help-foot {
    color: var(--ink-4); border-top: 1px solid var(--line);
    padding-top: 6px; margin-top: 8px;
}

.summary-stats.has-wfh { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-tile-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.summary-tile-link .summary-tile { height: 100%; }
.summary-tile-link:hover .summary-tile { border-color: var(--line-strong); }
@media (max-width: 1100px) {
    .summary-stats.has-wfh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .summary-stats.has-wfh { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .wfh-method-grid { grid-template-columns: 1fr; }
    .wfh-row-editor {
        position: fixed; left: 7vw; right: 7vw; top: 12vh; width: auto;
        max-height: 76vh; overflow-y: auto;
    }
}


/* ═══════════════════════════════════════════════════════
   Queue
   ═══════════════════════════════════════════════════════ */

.queue-summary { margin-bottom: 1.5rem; }
.queue-summary .status { margin-right: 0.5rem; }
.queue-summary .quota-usage { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.queue-summary .quota-usage strong { color: var(--stone-700); }
.queue-housekeeping-note { margin: 0.65rem 0 1rem; font-size: 0.85rem; color: var(--muted); }
.queue-housekeeping-note a { color: var(--accent); text-decoration: none; }
.queue-housekeeping-note a:hover { text-decoration: underline; }
.queue-page h2 { margin-top: 1.5rem; }


/* ═══════════════════════════════════════════════════════
   Upload
   ═══════════════════════════════════════════════════════ */

.upload-form { margin-top: 28px; }
.upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 3.5rem 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; cursor: pointer; transition: all var(--transition); color: var(--ink-3); margin-bottom: 0; }
.upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); border-style: solid; }
.upload-dropzone.has-file { border-color: var(--emerald-600); border-width: 2px; background: var(--emerald-50); color: var(--emerald-600); border-style: solid; padding: calc(3.5rem - 1px) 2rem; }
.upload-dropzone.has-file:hover { border-color: var(--emerald-600); background: var(--emerald-50); color: var(--emerald-600); }
.upload-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone-empty, .dropzone-selected { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.dropzone-empty[hidden], .dropzone-selected[hidden] { display: none; }
.dropzone-text { font-size: 0.9375rem; font-weight: 500; margin: 0; color: var(--ink-2); }
.upload-dropzone.has-file .dropzone-selected-label { color: var(--emerald-600); font-weight: 600; }
.dropzone-browse { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.upload-dropzone.has-file .dropzone-browse { color: var(--emerald-600); }
.dropzone-hint { font-size: 0.75rem; margin: 0; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }
.dropzone-filename { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin: 0; font-family: var(--font-mono); word-break: break-all; max-width: 100%; }
.upload-details-block { margin-top: 36px; }
.upload-fields { max-width: 560px; }
.upload-submit { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.upload-submit .tb-btn { font-size: 13px; padding: 9px 18px; }


/* ═══════════════════════════════════════════════════════
   Admin
   ═══════════════════════════════════════════════════════ */

.admin-nav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.admin-nav .btn { box-shadow: none; border: 1px solid transparent; font-weight: 500; }
.admin-nav .btn:hover { background: var(--stone-50); color: var(--accent); border-color: transparent; }
.admin-nav .btn-primary { background: var(--stone-900); color: #fff; border-color: var(--stone-900); }
.admin-nav .btn-primary:hover { background: var(--stone-800); border-color: var(--stone-800); box-shadow: none; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; box-shadow: var(--shadow-xs); transition: box-shadow var(--transition); }
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card-danger { border-color: var(--red-400); border-width: 2px; }
.stat-label { display: block; font-size: 0.625rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 0.15rem; letter-spacing: -0.02em; color: var(--stone-900); font-variant-numeric: tabular-nums; }
.stat-detail { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }

.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.admin-section { margin-bottom: 1.25rem; background: var(--surface); padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.admin-section h2 { margin-top: 0; }
.admin-edit-form { max-width: 600px; }
.queue-error { max-width: 300px; font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-viewing-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.875rem; margin-bottom: 1rem; background: #fefce8; border: 1px solid #fde047; border-radius: var(--radius); font-size: 0.8125rem; color: #713f12; }
.admin-viewing-banner svg { flex-shrink: 0; color: #ca8a04; }
.admin-viewing-banner a { color: #92400e; font-weight: 600; text-decoration: underline; }

.queue-changes { max-width: 340px; }
.qchange { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 3px; background: var(--stone-100); border: 1px solid var(--border); color: var(--stone-600); white-space: nowrap; margin: 0.1rem 0.15rem 0.1rem 0; }
.qchange b { color: var(--stone-500); font-weight: 600; }
.qchange em { font-style: normal; color: var(--stone-400); }
.qchange-set { background: #f0fdf4; border-color: #86efac; color: #166534; }
.qchange-set b { color: #15803d; }
.qchange-unset { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.qchange-unset b { color: #b91c1c; }


/* ═══════════════════════════════════════════════════════
   Receipt list footer + Pagination
   ═══════════════════════════════════════════════════════ */

/* Footer row: total + pager side by side */
.receipt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.5rem 0;
    margin-top: 0.125rem;
    border-top: 1px solid var(--stone-200);
    gap: 1rem;
    flex-wrap: wrap;
}
.receipt-footer-total {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    font-size: 0.875rem;
}
.receipt-footer-amount {
    font-weight: 700; color: var(--stone-900);
    font-variant-numeric: tabular-nums;
}

/* Editorial pager */
.pager {
    display: flex; align-items: center; gap: 2px;
}
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pager-btn:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.pager-btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.pager-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.pager-num:hover { background: var(--surface-2); color: var(--ink); }
.pager-num--active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.pager-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
    user-select: none;
}

/* Legacy pagination (other pages) */
.pagination { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.pagination-info { font-size: 0.8rem; color: var(--muted); font-weight: 500; }


/* ═══════════════════════════════════════════════════════
   Log Viewer
   ═══════════════════════════════════════════════════════ */

.log-viewer { background: var(--stone-900); color: var(--stone-300); padding: 1.25rem; border-radius: var(--radius-lg); font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; font-size: 0.72rem; max-height: 600px; overflow-y: auto; box-shadow: var(--shadow-lg); line-height: 1.75; }
.log-line { padding: 0.1rem 0; white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid rgba(255,255,255,0.04); }


/* ═══════════════════════════════════════════════════════
   Error Page
   ═══════════════════════════════════════════════════════ */

.error-page { display: flex; justify-content: center; padding: 5rem 1rem; }
.error-content { text-align: center; }
.error-code { display: block; font-size: 5rem; font-weight: 800; color: var(--stone-200); line-height: 1; letter-spacing: -0.04em; }
.error-content h1 { font-size: 1.25rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.error-content p { color: var(--muted); margin-bottom: 1.5rem; }


/* ═══════════════════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════════════════ */

.inline { display: inline; }
.empty-state { color: var(--muted); font-size: 0.875rem; padding: 2rem 0; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success-fg); }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }


/* ═══════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════ */

/* Mobile topbar — hidden on desktop */
.mobile-topbar { display: none; }
.sidebar-close  { display: none; }

/* Utility: hidden on mobile (set below) */
.hide-mobile { /* desktop: visible */ }

/* Receipt table scroll wrapper */
.receipt-table-wrap { width: 100%; }

/* Docs shell (public docs pages) */
.docs-shell {
    display: flex;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    gap: 3rem;
    min-height: calc(100vh - 120px);
    align-items: flex-start;
}
.docs-sidebar {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
}
.docs-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stone-400);
    margin: 0 0 0.375rem;
    padding: 0 0.5rem;
}
.docs-nav-link {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    color: var(--stone-600);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.docs-nav-link:hover { background: var(--stone-100); color: var(--stone-900); }
.docs-nav-link--active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.docs-content { flex: 1; min-width: 0; }

/* Help / forwarding setup page */
.help-page { max-width: 720px; }
.help-page .page-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.help-page .page-subtitle { color: var(--ink-3); margin: 0; font-size: 0.875rem; }
.help-toc { padding: 1rem 1.25rem; margin-bottom: 0.5rem; }
.help-toc .section-label { margin-bottom: 0.5rem; }
.help-toc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.help-toc-links a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.82rem; color: var(--accent); text-decoration: none; padding: 0.2rem 0.625rem; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); transition: background var(--transition), border-color var(--transition); }
.help-toc-links a:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.help-section { padding: 1.5rem; margin-bottom: 0.5rem; }
.help-section h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.help-section p { color: var(--stone-600); margin: 0.75rem 0 0; font-size: 0.9rem; }
.help-section-header { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.help-section-header svg { flex-shrink: 0; }
.help-badge { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--stone-100); color: var(--stone-500); border: 1px solid var(--stone-200); }
.help-badge-download { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.help-steps { margin: 1rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.help-steps li { color: var(--stone-600); font-size: 0.9rem; line-height: 1.55; }
.help-steps li strong { color: var(--stone-800); }
.help-steps li code { font-size: 0.82rem; }
.help-list { margin: 0.75rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.help-list li { color: var(--stone-600); font-size: 0.9rem; }
.help-note { font-size: 0.82rem !important; color: var(--stone-500) !important; margin-top: 0.875rem !important; }
.help-download-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.875rem 1rem; background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: var(--radius); }
.help-download-desc { display: block; font-size: 0.8rem; color: var(--stone-500); margin-top: 0.125rem; }
.help-warning { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); font-size: 0.85rem; color: #92400e; }
.help-warning svg { flex-shrink: 0; margin-top: 0.1rem; color: #d97706; }
.help-code { margin: 0.875rem 0 0; padding: 0.875rem 1rem; background: var(--stone-900); border-radius: var(--radius); overflow-x: auto; }
.help-code code { font-size: 0.8rem; color: #e2e8f0; line-height: 1.6; white-space: pre; }
.help-manual { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.help-manual summary { cursor: pointer; font-size: 0.82rem; color: var(--stone-500); user-select: none; list-style: none; }
.help-manual summary::-webkit-details-marker { display: none; }
.help-manual summary::before { content: '▶  '; font-size: 0.6rem; }
.help-manual[open] summary::before { content: '▼  '; }
.help-screenshot { margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.help-screenshot img { display: block; width: 100%; height: auto; }
.help-screenshot figcaption { font-size: 0.78rem; color: var(--stone-500); padding: 0.5rem 0.875rem; border-top: 1px solid var(--border); background: var(--stone-50); }
.help-section h3 { font-size: 0.9rem; font-weight: 700; color: var(--stone-800); margin: 1.25rem 0 0; }
.help-fields { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.help-field { display: grid; grid-template-columns: 9rem 1fr; border-bottom: 1px solid var(--border); }
.help-field:last-child { border-bottom: none; }
.help-field-name { font-size: 0.82rem; font-weight: 600; color: var(--stone-700); padding: 0.625rem 0.875rem; background: var(--stone-50); }
.help-field-desc { font-size: 0.82rem; color: var(--stone-600); padding: 0.625rem 0.875rem; line-height: 1.5; }
@media (max-width: 600px) {
    .help-field { grid-template-columns: 1fr; }
    .help-field-name { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
}

/* ── 768px breakpoint: sidebar slides, topbar appears ── */
@media (max-width: 768px) {

    /* ── Mobile topbar — hamburger left, brand centered ── */
    .mobile-topbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 3.25rem;
        padding: 0 1rem;
        background: var(--stone-50);
        border-bottom: 1px solid rgba(0,0,0,0.07);
        position: sticky;
        top: 0;
        z-index: 200;
        flex-shrink: 0;
    }
    .mobile-hamburger {
        background: none; border: none;
        padding: 0.5rem; margin: -0.5rem;
        cursor: pointer; color: var(--stone-600);
        display: flex; align-items: center; justify-content: center;
        border-radius: var(--radius);
        transition: background var(--transition);
        min-width: 2.75rem; min-height: 2.75rem;
        justify-self: start;
    }
    .mobile-hamburger:hover { background: rgba(0,0,0,0.05); }
    .mobile-topbar-logo {
        display: flex; align-items: center; gap: 0.5rem;
        text-decoration: none; color: var(--stone-900);
        font-weight: 700; font-size: 0.9375rem;
        letter-spacing: -0.02em;
        font-family: ui-monospace, 'Cascadia Code', monospace;
        justify-self: center;
    }
    .mobile-topbar-logo-icon {
        width: 1.25rem; height: 1.8rem;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* ── Sidebar overlay ── */
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 90;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-overlay.open { display: block; }

    /* ── Sidebar ── */
    .side {
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.4,0,0.2,1);
        top: 0;
        z-index: 210; /* above mobile topbar (200) */
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    .side.open { transform: translateX(0); }
    .sidebar-overlay { z-index: 205; } /* between sidebar and topbar so topbar is hidden under overlay */
    .sidebar-close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 0.75rem; right: 0.75rem;
        width: 2rem; height: 2rem;
        background: none; border: none;
        color: var(--stone-400); cursor: pointer;
        border-radius: var(--radius);
        transition: all var(--transition);
    }
    .sidebar-close:hover { background: rgba(0,0,0,0.06); color: var(--stone-700); }

    /* ── Content area ── */
    .content-wrap { margin-left: 0; overflow-x: hidden; }
    .content-wrap main { padding: 1.5rem 1rem 4rem; overflow-x: hidden; }
    h1, h2 { word-break: break-word; }

    /* ── Receipt list ── */
    .receipt-hero { margin-bottom: 1.5rem; }
    .receipt-hero-total { font-size: 2.25rem; }
    .strip { grid-template-columns: repeat(12, minmax(80px, 1fr)); overflow-x: auto; }
    .filter-form { gap: 0.5rem; }
    .filter-form > div { flex: 1 1 calc(50% - 0.5rem); min-width: 110px; }
    .filter-form > div:last-child { flex: 1 1 100%; margin-left: 0 !important; justify-content: flex-end; }
    .receipt-controls { flex-wrap: wrap; gap: 0.5rem; }
    .receipt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
    .hide-mobile { display: none !important; }
    .chk-col { display: none !important; }
    .cat-cell { display: none !important; }
    .receipt-td-vendor { max-width: 38vw; }
    .receipt-td-vendor .vlogo { display: none; }
    .vname .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .receipt-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .bulk-bar { flex-wrap: wrap; gap: 0.375rem; }
    .bulk-tag-input { min-width: 0; flex: 1 1 100%; }

    /* ── Receipt detail ── */
    .detail-topbar { flex-wrap: wrap; gap: 0.75rem; }
    .detail-actions { flex-wrap: wrap; gap: 0.375rem; }
    .detail-hero { grid-template-columns: 1fr; }
    .detail-hero-right { text-align: left; }
    .detail-amount { justify-content: flex-start; font-size: 2rem; }
    .detail-vendor { font-size: 1.5rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .body-grid { grid-template-columns: 1fr; }
    .rhead { grid-template-columns: 1fr; }
    .rhead .amount-block { text-align: left; }
    .rhead .amount { justify-content: flex-start; }
    .detail-dl { max-width: 100%; grid-template-columns: 110px 1fr; }
    .detail-item-tag-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .detail-item-tags-editor .tag-add-form { max-width: none; }
    .detail-item-tags-editor .tag-add-btn { width: 100%; justify-content: center; }

    /* ── Page headers ── */
    .page-header { flex-wrap: wrap; gap: 0.5rem; }

    /* ── Duplicates ── */
    .dupe-pair { grid-template-columns: 1fr; }
    .dupe-vs-col { padding: 0.25rem 0; }

    /* ── Admin ── */
    .admin-columns { grid-template-columns: 1fr; }
    .admin-nav { flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
    .admin-section { overflow-x: hidden; }
    .settings-dl { grid-template-columns: 1fr; gap: 0.25rem; }
    .settings-dl dt { padding-top: 0; }
    .ingest-email-box { flex-wrap: wrap; }
    .ingest-email-box code { word-break: break-all; flex: 1 1 100%; margin-bottom: 0.5rem; }
    .ingest-email-box .btn { flex: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); overflow-x: auto; }

    /* ── Admin tables ── */
    .admin-nav ~ table,
    .admin-section > table,
    main > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    .admin-nav ~ table td,
    main > table td {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Tables (non-receipt) ── */
    .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Pager ── */
    .pager { flex-wrap: wrap; gap: 0.25rem; }

    /* ── Misc ── */
    .form-row { flex-direction: column; gap: 0.5rem; }
    .actions { flex-wrap: wrap; }
    .email-archive-links { flex-direction: column; }
    .email-archive-links .btn { flex: none; }
    .docs-sidebar { display: none; }
    .docs-shell { padding: 1.5rem 1rem; }
    .shell-email-status {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-lg);
    }
    .shell-email-status-list {
        width: 100%;
    }
    .shell-email-pill {
        width: 100%;
        border-radius: var(--radius);
        align-items: flex-start;
        flex-direction: column;
    }
    .shell-email-status-link,
    .shell-email-pill-state {
        white-space: normal;
        text-align: left;
    }
    .shell-email-pill-state .email-conn-status {
        display: block;
    }

    .settings-table,
    .settings-table tbody,
    .settings-table tr,
    .settings-table td {
        display: block;
    }

    .settings-table thead {
        display: none;
    }

    .settings-table tr {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--stone-100);
    }

    .settings-table tr:last-child {
        border-bottom: none;
    }

    .settings-table td {
        padding: 0;
        border-bottom: none;
    }

    .settings-email-account-cell {
        margin-bottom: 0.85rem;
    }

    .settings-actions {
        justify-content: flex-start;
    }
}

/* ── Admin waitlist (.wl-admin-*) ── */
.wl-admin-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--stone-100);
    gap: 1rem; flex-wrap: wrap;
}
.wl-admin-section-title {
    font-size: 0.875rem; font-weight: 600; color: var(--stone-700);
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
}
.wl-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem;
    background: var(--stone-100); color: var(--stone-600);
    border-radius: 9999px; font-size: 0.72rem; font-weight: 700;
}
.wl-badge--invited    { background: #dbeafe; color: #1e40af; }
.wl-badge--registered { background: #d1fae5; color: #065f46; }
.wl-invite-batch-form {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap;
}
.wl-count-label { font-size: 0.8125rem; color: var(--stone-600); white-space: nowrap; }
.wl-count-input {
    width: 4rem; padding: 0.3rem 0.5rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit; text-align: center;
    background: var(--surface); color: var(--fg);
}
.wl-admin-empty { padding: 1.5rem 1.25rem; color: var(--stone-400); font-size: 0.875rem; margin: 0; }
.wl-admin-results {
    margin-bottom: 1.5rem; border: 1px solid #bbf7d0;
    background: #f0fdf4; padding: 1.25rem 1.5rem;
}
.wl-admin-results-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; font-weight: 600; color: #166534; margin-bottom: 0.35rem;
}
.wl-admin-results-hint { font-size: 0.8125rem; color: #4d7c60; margin-bottom: 1rem; }
.wl-admin-links { display: flex; flex-direction: column; gap: 0.75rem; }
.wl-admin-link-row {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.875rem 1rem; background: #fff;
    border: 1px solid #bbf7d0; border-radius: var(--radius);
}
.wl-admin-link-meta { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.875rem; }
.wl-admin-link-url { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wl-invite-url { font-size: 0.72rem; word-break: break-all; }


/* ── Billing ──────────────────────────────────────────────────────────────── */
.billing-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.billing-plan { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--stone-50); }
.billing-plan--featured { border-color: var(--accent); background: #f0fdfa; }
.billing-plan-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 99px; margin-bottom: 0.625rem; }
.billing-plan-name { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone-400); margin-bottom: 0.25rem; }
.billing-plan-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--fg); }
.billing-plan-period { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.billing-plan-sub { font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 1rem; }
.billing-plan-btn { width: 100%; justify-content: center; margin-top: 0.25rem; }
@media (max-width: 480px) { .billing-plans { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
    .onboarding-topbar {
        padding: 0.75rem 1rem;
        align-items: flex-start;
        flex-direction: column;
    }
    .onboarding-account {
        width: 100%;
        justify-content: space-between;
    }
    .onboarding-account-text {
        align-items: flex-start;
    }
    .onboarding-account-email {
        max-width: 13rem;
    }
    .onboarding-main {
        padding: 2rem 1rem 3rem;
    }
}

/* ── Subscribe (post-registration) ───────────────────────────────────────── */
.subscribe-page { max-width: 540px; padding: 2rem 0 3rem; }
.subscribe-step-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.75rem; }
.subscribe-heading { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.subscribe-sub { color: var(--muted); margin: 0 0 2rem; font-size: 0.9375rem; }
.subscribe-plans { margin-top: 0; }
.subscribe-footer { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.subscribe-footer--aux { margin-top: 0.75rem; }

/* ── Filter chip scroll wrapper (desktop: transparent) ── */
.chip-scroll { display: contents; }

/* ═══════════════════════════════════════════════════════
   ≤720px — Phone-native receipt list layout
   ═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    /* ── Receipt list container: remove main padding so list is edge-to-edge ── */
    .content-wrap main:has(.receipt-list-page) { padding: 0 0 24px; }
    /* Reserve enough vertical space so HTMX-driven filter swaps don't
       collapse the page when the result count drops or jumps back up. */
    .receipt-list-page { min-height: calc(100vh - 56px); }

    /* ── Hero: compact ── */
    .receipt-hero {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px 18px;
    }
    .receipt-hero-actions { display: none; }
    .receipt-hero-total { font-size: 40px; gap: 6px; }
    .receipt-hero-total-secondary { font-size: 12px; }
    .receipt-hero-total .cents { font-size: 26px; }
    .receipt-hero-sub { margin-top: 10px; gap: 8px; }
    .receipt-hero-meta { font-size: 10px; margin-bottom: 8px; }

    /* ── Month strip → horizontal scroll rail ── */
    .strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        border: 0; border-radius: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        margin-top: 0;
        scrollbar-width: none;
    }
    .strip::-webkit-scrollbar { display: none; }
    .strip .cell {
        flex: 0 0 auto;
        min-width: 88px; min-height: auto;
        padding: 12px 14px;
        border-right: 1px solid var(--line);
        scroll-snap-align: start;
    }
    .strip .cell:nth-child(6) { border-right: 1px solid var(--line); }
    .strip .cell:nth-child(n+7) { border-top: 0; }
    .m-label { font-size: 10px; }
    .m-amt { font-size: 15px; margin-top: 4px; }
    .m-count { font-size: 10px; }

    /* ── Filters: vertical stack, chip-scroll row ── */
    .filters {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 18px 12px;
        margin-top: 0;
        gap: 10px;
        overflow-x: visible;
        border-bottom: 1px solid var(--line);
    }
    .filter-search {
        width: 100%; min-width: 0;
        height: auto; padding: 10px 14px;
        border-radius: 999px;
    }
    .filter-search .filter-search-inp { font-size: 15px; }
    .chip-scroll {
        display: flex; gap: 8px;
        overflow-x: auto;
        margin: 0 -18px; padding: 0 18px 2px;
        scrollbar-width: none;
    }
    .chip-scroll::-webkit-scrollbar { display: none; }
    .chip-scroll .fchip { flex: 0 0 auto; }
    .filters-spacer { display: none; }
    .right-meta { display: none; }

    /* ── Bulk bar: fixed above bottom tabs ── */
    #bulk-bar {
        position: fixed;
        left: 8px; right: 8px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        border-radius: 14px;
        box-shadow: 0 12px 28px -10px rgba(0,0,0,.35);
        z-index: 215;
    }

    /* ── Table → card list ── */
    .receipt-table-wrap { margin-top: 0; overflow-x: visible; }
    .receipt-table { display: block; }
    .receipt-table thead { display: none; }
    .receipt-table tbody { display: block; }

    /* Receipt rows → card layout */
    .receipt-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 14px 18px;
        gap: 0;
        border-bottom: 1px solid var(--line);
    }
    .receipt-table tbody tr:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
    .receipt-table tbody tr td { padding: 0; border: none !important; display: block; }
    .receipt-table tbody tr .chk-col { display: none !important; }

    /* Vendor: order 1, fills row minus amount; inner grid splits logo | content */
    .receipt-td-vendor {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        display: grid !important;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        align-items: start;
    }
    .receipt-td-vendor .vlogo {
        display: grid; place-items: center; /* override display:none from 768px rule */
        grid-column: 1;
        width: 44px; height: 44px;
        border-radius: 10px; font-size: 15px;
    }
    .receipt-td-vendor .vname { grid-column: 2; min-width: 0; }
    .receipt-td-vendor .vname .n { font-size: 15px; font-weight: 500; white-space: normal; }
    .receipt-td-vendor .vname .meta { display: flex; margin-top: 3px; gap: 6px; flex-wrap: wrap; font-size: 10.5px; }
    .receipt-td-vendor .vname .src-badge,
    .receipt-td-vendor .vname .src { font-size: 10px; }

    /* Amount: order 2, right of vendor */
    .receipt-td-amount {
        order: 2;
        flex: 0 0 auto;
        padding-left: 8px;
        font-size: 15px; text-align: right; align-self: flex-start;
    }
    .receipt-td-amount .td-cents { font-size: 12px; }

    /* Date: order 3, full-width second row, indented past logo */
    .receipt-td-date {
        order: 3;
        flex: 0 0 100%;
        padding-left: 56px !important; /* 44px logo + 12px gap; !important overrides higher-specificity td reset */
        margin-top: 3px;
        font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em;
    }

    /* Hidden cells */
    .cat-cell { display: none !important; }
    .receipt-table tbody tr .tags-cell { display: none !important; }
    .receipt-table tbody tr td.hide-mobile { display: none !important; }

    /* Group header rows: sticky block — must come after the general tr grid rule */
    .receipt-table tbody tr.date-group-hd {
        display: block !important;
        padding: 0;
        border-bottom: none;
        position: sticky;
        top: 52px;
        z-index: 5;
        background: color-mix(in oklab, var(--bg) 92%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--line);
    }
    .receipt-table tbody tr.date-group-hd.date-group-hd--first { border-top: 0; }
    .receipt-table tbody tr.date-group-hd:hover { background: color-mix(in oklab, var(--bg) 92%, transparent); }
    .receipt-table tbody tr.date-group-hd td { padding: 0 !important; border: none !important; }
    .receipt-table tbody tr.date-group-hd td.dg-spacer { display: none !important; }
    .receipt-table tbody tr.date-group-hd td.dg-content { display: block; padding: 10px 18px 8px !important; }
    .dg-row { flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; }
    .dg-label { font-size: 15px; }
    .dg-range { font-size: 10.5px; color: var(--ink-3); }
    .dg-total { font-size: 11px; }

    /* Footer */
    .receipt-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 16px 18px 0;
        padding-top: 16px;
    }
    .receipt-footer .spacer { display: none; }
    .pager { justify-content: center; width: 100%; }
    .pager-btn, .pager-num { min-width: 34px; height: 34px; }

    /* Empty-state spacing */
    .receipt-list-page .page-header { padding: 18px 18px 0; }
    .receipt-list-page .onboarding-card { margin: 1rem; }

    /* Summary tables: keep amount column from butting up against the category */
    .summary-table tbody tr {
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0 16px;
        cursor: default;
    }
    .summary-table tbody tr td:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    .summary-table tbody tr td.summary-amount {
        flex: 0 0 auto;
        text-align: right;
        white-space: nowrap;
    }
    .summary-table tfoot tr {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0 16px;
        padding: 14px 18px;
        border-top: 1px solid var(--line);
    }
    .summary-table tfoot th {
        padding: 0;
        border: none;
        white-space: nowrap;
    }
    .summary-table tfoot th:first-child { flex: 1 1 auto; min-width: 0; text-align: left; }
    .summary-table tfoot th.summary-amount { flex: 0 0 auto; text-align: right; }
    .summary-table tfoot th.hide-mobile,
    .summary-table tfoot th.summary-share-col { display: none; }
}
.subscribe-footer a { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   Tags page (tp-*)
   ═══════════════════════════════════════════════════════ */

.tp-page { padding-bottom: 80px; }

/* Hero — tp-specific spacing (shared alignment rule lives with cat-hero) */
.tp-hero { margin-bottom: 1.25rem; }
.tp-lede-link { color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.tp-lede-link:hover { border-color: var(--ink); }

/* Stat rail overrides for 3-col */
.tp-stat-rail { grid-template-columns: repeat(3, 1fr) !important; margin-bottom: 1.25rem; }
.tp-stat-unit {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: 0;
}
.tp-most-used { font-size: 1.2rem !important; letter-spacing: -0.01em !important; }
.tp-tag-link { color: var(--ink); text-decoration: none; }
.tp-tag-link:hover { color: var(--accent); }

/* Toolbar */
.tp-toolbar { margin-bottom: 4px; }
.tp-search { max-width: 340px; }

/* Tag grid */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
    margin-bottom: 8px;
}
@media (max-width: 1180px) { .tp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .tp-grid { grid-template-columns: 1fr; } }

/* List view */
.tp-grid[data-view="list"] {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.tp-grid[data-view="list"] .tp-card {
    border: 0;
    border-radius: 0;
    border-bottom: 1px dashed var(--line);
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 16px;
}
.tp-grid[data-view="list"] .tp-card:last-of-type { border-bottom: none; }
.tp-grid[data-view="list"] .tp-card .tp-hue-bar { display: none; }
.tp-grid[data-view="list"] .tp-card .tp-card-head { flex: 1.3; }
.tp-grid[data-view="list"] .tp-card .tp-glyph { width: 26px; height: 26px; font-size: 13px; border-radius: 6px; }
.tp-grid[data-view="list"] .tp-card .tp-name { font-size: 0.95rem; }
.tp-grid[data-view="list"] .tp-card .tp-note { display: none; }
.tp-grid[data-view="list"] .tp-card .tp-metrics {
    border-top: 0; border-bottom: 0; padding: 0;
    grid-template-columns: auto 100px auto;
    flex: 1.2;
}
.tp-grid[data-view="list"] .tp-card .tp-count { font-size: 1.1rem; }
.tp-grid[data-view="list"] .tp-card .tp-spark { height: 16px; }
.tp-grid[data-view="list"] .tp-card .tp-recent { display: none; }
.tp-grid[data-view="list"] .tp-card .tp-foot { margin-top: 0; }
.tp-grid[data-view="list"] .tp-card.tp-expanded { flex-direction: column; align-items: stretch; }
.tp-grid[data-view="list"] .tp-card.tp-expanded .tp-recent { display: flex; }
.tp-grid[data-view="list"] .tp-new-tag {
    border-left: none; border-right: none;
    border-top: 1px dashed var(--line); border-bottom: none;
    border-radius: 0; min-height: 52px;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 12px 14px;
}

/* Tag card */
.tp-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.tp-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 0 rgba(0,0,0,.02); }
.tp-card.tp-expanded { border-color: var(--ink-3); box-shadow: 0 4px 20px -10px rgba(0,0,0,.18); }

.tp-hue-bar {
    position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
    background: var(--hue, var(--ink-3));
    border-radius: 0 0 2px 2px;
    opacity: .75;
}

.tp-card-head {
    display: flex; align-items: flex-start; gap: 10px; min-width: 0;
}
.tp-glyph {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--hue, var(--ink-3)) 14%, var(--surface));
    color: color-mix(in oklab, var(--hue, var(--ink-3)) 70%, var(--ink));
    display: grid; place-items: center;
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 18px; letter-spacing: -0.01em;
    border: 1px solid color-mix(in oklab, var(--hue, var(--ink-3)) 30%, var(--line));
}
.tp-card-title { min-width: 0; flex: 1; }
.tp-name {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.15rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink);
}
.tp-name::before {
    content: "#";
    font-family: var(--font-mono); font-weight: 400; font-size: 0.85rem;
    color: var(--ink-4); font-style: normal; letter-spacing: 0;
    position: relative; top: -1px;
}
.tp-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }

/* Metrics */
.tp-metrics {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
}
.tp-count {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.5rem; line-height: 1; letter-spacing: -0.015em; color: var(--ink);
    display: flex; align-items: baseline; gap: 5px;
}
.tp-count small {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase;
    font-weight: 400;
}
.tp-spark {
    display: flex; align-items: flex-end; gap: 2px;
    height: 22px; flex: 1; min-width: 0; padding-left: 4px;
}
.tp-spark .b {
    flex: 1; min-height: 1px;
    background: color-mix(in oklab, var(--hue, var(--ink-3)) 45%, var(--bg));
    border-radius: 1px;
}
.tp-spark .b.now {
    background: var(--hue, var(--ink));
    outline: 1px solid color-mix(in oklab, var(--hue, var(--ink)) 80%, #000);
}
.tp-amt {
    font-family: var(--font-mono); font-size: 0.78rem;
    font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; white-space: nowrap;
}
.tp-amt-ccy { color: var(--ink-4); font-size: 0.65rem; letter-spacing: 0.04em; margin-right: 1px; }
.tp-amt-cents { font-size: 0.72rem; color: var(--ink-3); }
.tp-amt-nil { color: var(--ink-4); }

/* Recent receipts */
.tp-recent {
    display: flex; flex-direction: column;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
    margin-top: -2px;
}
.tp-rcpt {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 10px; padding: 4px 2px; font-size: 0.74rem; align-items: baseline;
}
.tp-rcpt + .tp-rcpt { border-top: 1px dashed var(--line); }
.tp-rcpt-date {
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase;
}
.tp-rcpt-who {
    color: var(--ink); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-rcpt-amt {
    font-family: var(--font-mono); font-size: 0.72rem;
    font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap;
}

/* Card footer */
.tp-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 10px;
}
.tp-foot-grow { flex: 1; }
.tp-see-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 10px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink); font-size: 0.74rem; font-weight: 500; text-decoration: none;
}
.tp-see-link:hover { background: var(--surface-2); }
.tp-see-link svg { width: 12px; height: 12px; }
.tp-icon-btn {
    width: 28px; height: 28px; border-radius: 999px;
    display: grid; place-items: center; color: var(--ink-3);
    border: 1px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    flex-shrink: 0;
}
.tp-icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }

/* Edit panel */
.tp-edit-panel { display: none; padding-top: 12px; border-top: 1px solid var(--line); }
.tp-card.tp-expanded .tp-edit-panel { display: block; }

.tp-edit-form { display: flex; flex-direction: column; gap: 10px; }
.tp-field { display: flex; flex-direction: column; gap: 5px; }
.tp-field label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    margin: 0;
}
.tp-field input[type="text"],
.tp-field textarea,
.tp-field select {
    border: 1px solid var(--line-strong); background: var(--bg);
    border-radius: 8px; padding: 7px 10px; font-size: 0.8rem; color: var(--ink);
    width: 100%; outline: none; font-family: inherit;
    transition: border-color .12s ease, background .12s ease;
}
.tp-field input[type="text"]:focus,
.tp-field textarea:focus,
.tp-field select:focus { border-color: var(--ink); background: var(--surface); }
.tp-field textarea { resize: vertical; min-height: 46px; line-height: 1.5; }

.tp-hue-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.tp-hue-chip {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--swatch); cursor: pointer;
    border: 2px solid transparent;
    outline: 1px solid color-mix(in oklab, var(--swatch) 50%, var(--line));
    outline-offset: -1px;
    transition: transform .08s ease, outline-color .12s ease, border-color .12s ease;
}
.tp-hue-chip:hover { transform: scale(1.08); }
.tp-hue-chip.on { border-color: var(--bg); outline: 1.5px solid var(--ink); outline-offset: 1px; }

.tp-panel-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 10px; margin-top: 4px;
    border-top: 1px dashed var(--line);
}
.tp-panel-cancel {
    font-size: 0.75rem; color: var(--ink-3); border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.tp-panel-cancel:hover { color: var(--ink); background: var(--surface-2); }

.tp-panel-actions {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 10px; margin-top: 6px;
    border-top: 1px dashed var(--line);
}
.tp-action-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-rename-input, .tp-merge-sel {
    flex: 1; min-width: 100px;
    border: 1px solid var(--line-strong); background: var(--surface);
    border-radius: 999px; padding: 4px 10px;
    font: inherit; font-size: 0.78rem; color: var(--ink); outline: none;
    transition: border-color .12s ease;
}
.tp-rename-input:focus, .tp-merge-sel:focus { border-color: var(--ink); }
.tp-merge-sel { appearance: none; -webkit-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 16 16'><path d='M3 6l5 5 5-5' stroke='%237a756d' stroke-width='1.4' fill='none'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; }
.tp-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--danger); padding: 5px 10px; border-radius: 999px;
    border: none; background: none; cursor: pointer;
}
.tp-delete-btn:hover { background: var(--danger-soft); }

/* New tag placeholder */
.tp-new-tag {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    color: var(--ink-3);
    background: color-mix(in oklab, var(--surface) 45%, transparent);
    font-size: 0.8rem;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    min-height: 60px;
}
.tp-new-tag:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.tp-new-plus {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    border: 1px dashed var(--line-strong);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 15px;
}
.tp-new-tag:hover .tp-new-plus { border-style: solid; border-color: var(--ink); }
.tp-new-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-new-hint { font-size: 0.72rem; color: var(--ink-4); margin-left: auto; }
.tp-new-hint a { color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }
.tp-new-hint a:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
    .tp-stat-rail { grid-template-columns: 1fr 1fr !important; }
    .tp-stat-rail .cat-stat:nth-child(2) { border-right: none; }
    .tp-stat-rail .cat-stat:nth-child(3) { border-top: 1px solid var(--line); border-right: none; }
}
@media (max-width: 720px) {
    .tp-toolbar { flex-direction: column; align-items: stretch; }
    .tp-search { max-width: 100%; }
    .tp-grid { grid-template-columns: 1fr; }
}